|
@@ -0,0 +1,260 @@
|
|
|
|
+/** element-plus transition */
|
|
|
|
+$ep-transition-duration: (
|
|
|
|
+ '': 0.3s,
|
|
|
|
+ 'fast': 0.2s,
|
|
|
|
+);
|
|
|
|
+
|
|
|
|
+$cst-gap-space: (
|
|
|
|
+ 'extra-mini': 2px,
|
|
|
|
+ 'medium-mini': 4px,
|
|
|
|
+ 'mini': 6px,
|
|
|
|
+ 'extra-small': 10px,
|
|
|
|
+ 'small': 12px,
|
|
|
|
+ 'extra-base': 16px,
|
|
|
|
+ 'medium-base': 18px,
|
|
|
|
+ 'base': 20px,
|
|
|
|
+ 'large': 30px,
|
|
|
|
+ 'super-large': 60px
|
|
|
|
+);
|
|
|
|
+
|
|
|
|
+/** element-plus font-size */
|
|
|
|
+$ep-font-size: (
|
|
|
|
+ 'extra-large': 20px,
|
|
|
|
+ 'large': 18px,
|
|
|
|
+ 'medium': 16px,
|
|
|
|
+ 'base': 14px,
|
|
|
|
+ 'small': 13px,
|
|
|
|
+ 'extra-small': 12px,
|
|
|
|
+);
|
|
|
|
+
|
|
|
|
+/** element-plus colors */
|
|
|
|
+$ep-colors: (
|
|
|
|
+ 'primary': (
|
|
|
|
+ 'base': #0091ff,
|
|
|
|
+ 'light': #00C4FF,
|
|
|
|
+ 'plus': #0064FF,
|
|
|
|
+ ),
|
|
|
|
+ 'white': #ffffff,
|
|
|
|
+ 'black': #000000,
|
|
|
|
+ 'tip': (
|
|
|
|
+ 'base': #E02020,
|
|
|
|
+ ),
|
|
|
|
+ 'success': (
|
|
|
|
+ 'base': #67c23a,
|
|
|
|
+ ),
|
|
|
|
+ 'warning': (
|
|
|
|
+ 'base': #e6a23c,
|
|
|
|
+ ),
|
|
|
|
+ 'danger': (
|
|
|
|
+ 'base': #f56c6c,
|
|
|
|
+ ),
|
|
|
|
+ 'error': (
|
|
|
|
+ 'base': #f56c6c,
|
|
|
|
+ ),
|
|
|
|
+ 'info': (
|
|
|
|
+ 'base': #909399,
|
|
|
|
+ ),
|
|
|
|
+);
|
|
|
|
+
|
|
|
|
+/** element-plus fill colors */
|
|
|
|
+$ep-fill-color: (
|
|
|
|
+ '': #f0f2f5,
|
|
|
|
+ 'light': #f5f7fa,
|
|
|
|
+ 'lighter': #fafafa,
|
|
|
|
+ 'extra-light': #fafcff,
|
|
|
|
+ 'f8': #f8f8f8,
|
|
|
|
+ 'light-gray': #eee,
|
|
|
|
+ 'dark': #ebedf0,
|
|
|
|
+ 'darker': #e6e8eb,
|
|
|
|
+ 'blank': #ffffff,
|
|
|
|
+);
|
|
|
|
+
|
|
|
|
+/** element-plus border colors */
|
|
|
|
+$ep-border-color: (
|
|
|
|
+ '': #dcdfe6,
|
|
|
|
+ 'light': #e4e7ed,
|
|
|
|
+ 'lighter': #eee,
|
|
|
|
+ 'extra-light': #f2f6fc,
|
|
|
|
+ 'dark': #d4d7de,
|
|
|
|
+ 'darker': #cdd0d6,
|
|
|
|
+);
|
|
|
|
+
|
|
|
|
+/** element-plus text colors */
|
|
|
|
+$ep-text-color: (
|
|
|
|
+ 'primary': #333,
|
|
|
|
+ 'primary-plus': #444,
|
|
|
|
+ 'regular': #666,
|
|
|
|
+ 'secondary': #888,
|
|
|
|
+ 'placeholder': #999,
|
|
|
|
+ 'disabled': #c0c4cc,
|
|
|
|
+);
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+/** element-plus button */
|
|
|
|
+$ep-button: (
|
|
|
|
+ 'bg-color': map-get($ep-fill-color, 'lighter'),
|
|
|
|
+ 'border-color': map-get($ep-border-color, 'light'),
|
|
|
|
+ 'text-color': map-get($ep-text-color, 'regular'),
|
|
|
|
+);
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+$cst-button-colors: (
|
|
|
|
+ 'custom-1': #00ba97,
|
|
|
|
+ 'special': #e5f4ff,
|
|
|
|
+);
|
|
|
|
+
|
|
|
|
+/** element-plus background colors */
|
|
|
|
+$ep-bg-color: (
|
|
|
|
+ '': #ffffff,
|
|
|
|
+ 'page': #f2f3f5,
|
|
|
|
+ 'overlay': #ffffff,
|
|
|
|
+);
|
|
|
|
+
|
|
|
|
+/** element-plus border radius */
|
|
|
|
+$ep-border-radius: (
|
|
|
|
+ 'base': 6px,
|
|
|
|
+ 'small': 4px,
|
|
|
|
+ 'round': 10px,
|
|
|
|
+ 'circle': 100%,
|
|
|
|
+);
|
|
|
|
+
|
|
|
|
+/** element-plus card */
|
|
|
|
+$ep-card: (
|
|
|
|
+ 'border-radius': map-get($ep-border-radius, 'base'),
|
|
|
|
+ 'padding': map-get($cst-gap-space, 'base'),
|
|
|
|
+ 'border-color': transparent,
|
|
|
|
+ 'bg-color': map-get($ep-fill-color, 'blank'),
|
|
|
|
+);
|
|
|
|
+
|
|
|
|
+/** element-plus menu */
|
|
|
|
+$ep-menu: (
|
|
|
|
+ 'item-height': 38px,
|
|
|
|
+ 'base-level-padding': 20px,
|
|
|
|
+ 'level-padding': 40px,
|
|
|
|
+ 'hover-bg-color': 'none',
|
|
|
|
+ 'icon-width': 14px,
|
|
|
|
+ 'hover-text-color': map-get($ep-text-color, 'regular'),
|
|
|
|
+);
|
|
|
|
+
|
|
|
|
+/** element-plus popper */
|
|
|
|
+$ep-popper: (
|
|
|
|
+ 'border-radius': map-get($ep-border-radius, 'small'),
|
|
|
|
+);
|
|
|
|
+
|
|
|
|
+/** element-plus form */
|
|
|
|
+$ep-form: (
|
|
|
|
+ 'label-font-size': map-get($ep-font-size, 'extra-small'),
|
|
|
|
+);
|
|
|
|
+
|
|
|
|
+/** element-plus component size */
|
|
|
|
+$ep-common-component-size: (
|
|
|
|
+ 'large': 54px,
|
|
|
|
+ 'default': 40px,
|
|
|
|
+ 'small': 32px,
|
|
|
|
+);
|
|
|
|
+
|
|
|
|
+/** element-plus input font size */
|
|
|
|
+$ep-input-font-size: (
|
|
|
|
+ 'large': 15px,
|
|
|
|
+ 'default': 12px,
|
|
|
|
+ 'small': 12px,
|
|
|
|
+);
|
|
|
|
+
|
|
|
|
+/** element-plus box-shadow */
|
|
|
|
+$ep-box-shadow: (
|
|
|
|
+ '': (
|
|
|
|
+ 0px 12px 32px 4px rgba(0, 0, 0, 0.04),
|
|
|
|
+ 0px 8px 20px rgba(0, 0, 0, 0.08),
|
|
|
|
+ ),
|
|
|
|
+ 'light': (
|
|
|
|
+ 0px 0px 12px rgba(0, 0, 0, 0.12),
|
|
|
|
+ ),
|
|
|
|
+ 'lighter': (
|
|
|
|
+ 0px 0px 6px rgba(0, 0, 0, 0.12),
|
|
|
|
+ ),
|
|
|
|
+ 'dark': (
|
|
|
|
+ 0px 16px 48px 16px rgba(0, 0, 0, 0.08),
|
|
|
|
+ 0px 12px 32px rgba(0, 0, 0, 0.12),
|
|
|
|
+ 0px 8px 16px -8px rgba(0, 0, 0, 0.16),
|
|
|
|
+ ),
|
|
|
|
+);
|
|
|
|
+
|
|
|
|
+/** element-plus table */
|
|
|
|
+$ep-table: (
|
|
|
|
+ 'border-color': map-get($ep-border-color, 'lighter'),
|
|
|
|
+ 'border': 1px solid map-get($ep-border-color, 'lighter'),
|
|
|
|
+ 'text-color': map-get($ep-text-color, 'regular'),
|
|
|
|
+ 'header-text-color': map-get($ep-text-color, 'primary-plus'),
|
|
|
|
+ 'row-hover-bg-color': map-get($ep-fill-color, 'light'),
|
|
|
|
+ 'current-row-bg-color': var(--el-color-primary-light-9),
|
|
|
|
+ 'header-bg-color': map-get($ep-bg-color, ''),
|
|
|
|
+ 'fixed-box-shadow': map-get($ep-box-shadow, 'light'),
|
|
|
|
+ 'bg-color': map-get($ep-fill-color, 'blank'),
|
|
|
|
+ 'tr-bg-color': map-get($ep-fill-color, 'blank'),
|
|
|
|
+ 'expanded-cell-bg-color': map-get($ep-fill-color, 'blank'),
|
|
|
|
+ 'fixed-left-column': inset 10px 0 10px -10px rgb(0 0 0 / 15%),
|
|
|
|
+ 'fixed-right-column': inset -10px 0 10px -10px rgb(0 0 0 / 15%),
|
|
|
|
+);
|
|
|
|
+
|
|
|
|
+/** element-plus table font-size*/
|
|
|
|
+$ep-table-font-size: (
|
|
|
|
+ 'large': map-get($ep-font-size, 'base'),
|
|
|
|
+ 'default': map-get($ep-font-size, 'small'),
|
|
|
|
+ 'small': map-get($ep-font-size, 'extra-small'),
|
|
|
|
+);
|
|
|
|
+
|
|
|
|
+/** element-plus table padding*/
|
|
|
|
+$ep-table-padding: (
|
|
|
|
+ 'large': 14px 0,
|
|
|
|
+ 'default': 12px 0,
|
|
|
|
+ 'small': 10px 0,
|
|
|
|
+);
|
|
|
|
+
|
|
|
|
+/** element-plus table cell padding*/
|
|
|
|
+$ep-table-cell-padding: (
|
|
|
|
+ 'large': 0 16px,
|
|
|
|
+ 'default': 0 12px,
|
|
|
|
+ 'small': 0 8px,
|
|
|
|
+);
|
|
|
|
+
|
|
|
|
+/** element-plus pagination */
|
|
|
|
+$ep-pagination: (
|
|
|
|
+ 'font-size': 14px,
|
|
|
|
+ 'bg-color': map-get($ep-fill-color, 'blank'),
|
|
|
|
+ 'text-color': map-get($ep-text-color, 'primary'),
|
|
|
|
+ 'border-radius': 3px,
|
|
|
|
+ 'button-color': map-get($ep-text-color, 'primary'),
|
|
|
|
+ 'button-width': 32px,
|
|
|
|
+ 'button-height': 32px,
|
|
|
|
+ 'button-disabled-color': map-get($ep-text-color, 'placeholder'),
|
|
|
|
+ 'button-disabled-bg-color': map-get($ep-fill-color, 'blank'),
|
|
|
|
+ 'button-bg-color': map-get($ep-fill-color, ''),
|
|
|
|
+ 'hover-color': map-get($ep-colors, 'primary', 'base'),
|
|
|
|
+ 'height-extra-small': 24px,
|
|
|
|
+ 'line-height-extra-small': 24px,
|
|
|
|
+);
|
|
|
|
+
|
|
|
|
+/** element-plus dialog */
|
|
|
|
+$ep-dialog: (
|
|
|
|
+ 'width': fit-content,
|
|
|
|
+ 'margin-top': 15vh,
|
|
|
|
+ 'bg-color': map-get($ep-fill-color, 'blank'),
|
|
|
|
+ 'box-shadow': map-get($ep-box-shadow, ''),
|
|
|
|
+ 'title-font-size': map-get($ep-font-size, 'base'),
|
|
|
|
+ 'content-font-size': map-get($ep-font-size, 'extra-small'),
|
|
|
|
+ 'font-line-height': normal,
|
|
|
|
+ 'padding-primary': map-get($cst-gap-space, 'base'),
|
|
|
|
+ 'border-radius': map-get($ep-border-radius, 'base'),
|
|
|
|
+ /** custom */ //
|
|
|
|
+ 'header-height': 44px,
|
|
|
|
+ 'header-bg-color': map-get($ep-fill-color, 'f8'),
|
|
|
|
+ 'header-font-size': map-get($ep-font-size, 'base'),
|
|
|
|
+ 'header-font-color': map-get($ep-text-color, 'primary'),
|
|
|
|
+);
|
|
|
|
+
|
|
|
|
+$ep-dialog-body-padding:(
|
|
|
|
+ 'small': 16px,
|
|
|
|
+ 'base': 20px,
|
|
|
|
+ 'medium': 30px,
|
|
|
|
+ 'large': 40px
|
|
|
|
+);
|