mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-01 18:58:10 +08:00
feat(var): var sass map for components (#2778)
* feat(var): var sass map for components * feat(var): migrate var sass map for all components
This commit is contained in:
云游君
GitHub
parent
0f2181abc3
commit
fe9600c181
@ -1,18 +1,11 @@
|
||||
@use "sass:map";
|
||||
|
||||
@import 'mixins/mixins';
|
||||
@import 'mixins/var';
|
||||
@import 'common/var';
|
||||
|
||||
:root {
|
||||
--el-alert-padding: 8px 16px;
|
||||
--el-alert-border-radius-base: var(--el-border-radius-base);
|
||||
--el-alert-title-font-size: 13px;
|
||||
--el-alert-description-font-size: 12px;
|
||||
--el-alert-close-font-size: 12px;
|
||||
--el-alert-close-customed-font-size: 13px;
|
||||
|
||||
--el-alert-icon-size: 16px;
|
||||
--el-alert-icon-large-size: 28px;
|
||||
@include set-component-css-var('alert', $--alert);
|
||||
|
||||
@each $type in (success, info, warning, error) {
|
||||
--el-alert-#{$type}-color: #{map.get($--colors, $type, 'lighter')};
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
@use "sass:map";
|
||||
|
||||
@import 'mixins/mixins';
|
||||
@import 'mixins/utils';
|
||||
@import 'common/var';
|
||||
@ -47,16 +49,16 @@
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&:hover {
|
||||
background-color: $--select-option-hover-background;
|
||||
background-color: map.get($--select-option, 'hover-background');
|
||||
}
|
||||
|
||||
&.highlighted {
|
||||
background-color: $--select-option-hover-background;
|
||||
background-color: map.get($--select-option, 'hover-background');
|
||||
}
|
||||
|
||||
&.divider {
|
||||
margin-top: 6px;
|
||||
border-top: 1px solid $--color-black;
|
||||
border-top: 1px solid var(--el-color-black);
|
||||
}
|
||||
|
||||
&.divider:last-child {
|
||||
@ -74,7 +76,7 @@
|
||||
@include utils-vertical-center;
|
||||
|
||||
&:hover {
|
||||
background-color: $--color-white;
|
||||
background-color: var(--el-color-white);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,15 +1,9 @@
|
||||
@import 'mixins/mixins';
|
||||
@import 'mixins/var';
|
||||
@import 'common/var';
|
||||
|
||||
:root {
|
||||
--el-avatar-font-color: #fff;
|
||||
--el-avatar-background-color: #c0c4cc;
|
||||
--el-avatar-text-font-size: 14px;
|
||||
--el-avatar-icon-font-size: 18px;
|
||||
--el-avatar-border-radius: var(--el-border-radius-base);
|
||||
--el-avatar-large-size: 40px;
|
||||
--el-avatar-medium-size: 36px;
|
||||
--el-avatar-small-size: 28px;
|
||||
@include set-component-css-var('avatar', $--avatar);
|
||||
}
|
||||
|
||||
@include b(avatar) {
|
||||
|
||||
@ -1,10 +1,9 @@
|
||||
@import 'mixins/mixins';
|
||||
@import 'mixins/var';
|
||||
@import 'common/var';
|
||||
|
||||
:root {
|
||||
--el-backtop-background-color: var(--el-color-white);
|
||||
--el-backtop-font-color: var(--el-color-primary);
|
||||
--el-backtop-hover-background-color: var(--el-border-color-extra-light);
|
||||
@include set-component-css-var('backtop', $--backtop);
|
||||
}
|
||||
|
||||
@include b(backtop) {
|
||||
|
||||
@ -1,16 +1,11 @@
|
||||
@import 'mixins/mixins';
|
||||
@import 'mixins/var';
|
||||
@import 'common/var';
|
||||
@import 'button';
|
||||
@import 'button-group';
|
||||
|
||||
:root {
|
||||
--el-calendar-border: var(
|
||||
--el-table-border,
|
||||
1px solid var(--el-border-color-lighter)
|
||||
);
|
||||
--el-calendar-header-border-bottom: var(--el-calendar-border);
|
||||
--el-calendar-selected-background-color: #f2f8fe;
|
||||
--el-calendar-cell-width: 85px;
|
||||
@include set-component-css-var('calendar', $--calendar);
|
||||
}
|
||||
|
||||
@include b(calendar) {
|
||||
|
||||
@ -1,18 +1,11 @@
|
||||
@use "sass:math";
|
||||
|
||||
@import 'mixins/mixins';
|
||||
@import 'mixins/var';
|
||||
@import 'common/var';
|
||||
|
||||
:root {
|
||||
--el-carousel-arrow-font-size: 12px;
|
||||
--el-carousel-arrow-size: 36px;
|
||||
--el-carousel-arrow-background: rgba(31, 45, 61, 0.11);
|
||||
--el-carousel-arrow-hover-background: rgba(31, 45, 61, 0.23);
|
||||
--el-carousel-indicator-width: 30px;
|
||||
--el-carousel-indicator-height: 2px;
|
||||
--el-carousel-indicator-padding-horizontal: 4px;
|
||||
--el-carousel-indicator-padding-vertical: 12px;
|
||||
--el-carousel-indicator-out-color: var(--el-border-color-hover);
|
||||
@include set-component-css-var('carousel', $--carousel);
|
||||
}
|
||||
|
||||
@include b(carousel) {
|
||||
|
||||
@ -1,27 +1,18 @@
|
||||
@use "sass:map";
|
||||
|
||||
@import 'mixins/mixins';
|
||||
@import 'mixins/var';
|
||||
@import 'common/var';
|
||||
@import './input';
|
||||
@import './popper';
|
||||
@import './tag';
|
||||
|
||||
:root {
|
||||
--el-cascader-menu-font-color: var(--el-text-color-regular);
|
||||
--el-cascader-menu-selected-font-color: var(--el-color-primary);
|
||||
--el-cascader-menu-fill: var(--el-fill-base);
|
||||
--el-cascader-menu-font-size: var(--el-font-size-base);
|
||||
--el-cascader-menu-radius: var(--el-border-radius-base);
|
||||
--el-cascader-menu-border: solid 1px var(--el-border-color-light);
|
||||
--el-cascader-menu-shadow: var(--el-box-shadow-light);
|
||||
--el-cascader-node-background-hover: var(--el-background-color-base);
|
||||
--el-cascader-node-color-disabled: var(--el-text-color-placeholder);
|
||||
--el-cascader-color-empty: var(--el-text-color-placeholder);
|
||||
--el-cascader-tag-background: #f0f2f5;
|
||||
}
|
||||
|
||||
@import './cascader-panel';
|
||||
|
||||
:root {
|
||||
@include set-component-css-var('cascader', $--cascader);
|
||||
}
|
||||
|
||||
@include b(cascader) {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
@ -32,7 +23,10 @@
|
||||
&:not(.is-disabled):hover {
|
||||
.#{$namespace}-input__inner {
|
||||
cursor: pointer;
|
||||
border-color: $--input-hover-border;
|
||||
border-color: var(
|
||||
--el-input-hover-border,
|
||||
map.get($--input, 'hover-border')
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -43,7 +37,10 @@
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&:focus {
|
||||
border-color: $--input-focus-border;
|
||||
border-color: var(
|
||||
--el-input-focus-border,
|
||||
map.get($--input, 'focus-border')
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -57,12 +54,18 @@
|
||||
}
|
||||
|
||||
.#{$namespace}-icon-circle-close:hover {
|
||||
color: $--input-clear-hover-color;
|
||||
color: var(
|
||||
--el-input-clear-hover-color,
|
||||
map.get($--input, 'clear-hover-color')
|
||||
);
|
||||
}
|
||||
|
||||
@include when(focus) {
|
||||
.#{$namespace}-input__inner {
|
||||
border-color: $--input-focus-border;
|
||||
border-color: var(
|
||||
--el-input-focus-border,
|
||||
map.get($--input, 'focus-border')
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
|
||||
@import 'common/var';
|
||||
@import 'mixins/mixins';
|
||||
@import 'mixins/var';
|
||||
@import 'mixins/_button';
|
||||
@import 'mixins/utils';
|
||||
|
||||
@ -53,36 +54,7 @@ $--checkbox-line-height: map.merge(
|
||||
);
|
||||
|
||||
:root {
|
||||
--el-checkbox-font-size: 14px;
|
||||
--el-checkbox-font-weight: var(--el-font-weight-primary);
|
||||
--el-checkbox-font-color: var(--el-text-color-regular);
|
||||
--el-checkbox-input-height: 14px;
|
||||
--el-checkbox-input-width: 14px;
|
||||
--el-checkbox-border-radius: var(--el-border-radius-small);
|
||||
--el-checkbox-background-color: var(--el-color-white);
|
||||
--el-checkbox-input-border: var(--el-border-base);
|
||||
|
||||
--el-checkbox-disabled-border-color: var(--el-border-color-base);
|
||||
--el-checkbox-disabled-input-fill: #edf2fc;
|
||||
--el-checkbox-disabled-icon-color: var(--el-text-color-placeholder);
|
||||
|
||||
--el-checkbox-disabled-checked-input-fill: var(--el-border-color-extra-light);
|
||||
--el-checkbox-disabled-checked-input-border-color: var(
|
||||
--el-border-color-base
|
||||
);
|
||||
--el-checkbox-disabled-checked-icon-color: var(--el-text-color-placeholder);
|
||||
|
||||
--el-checkbox-checked-font-color: var(--el-color-primary);
|
||||
--el-checkbox-checked-input-border-color: var(--el-color-primary);
|
||||
--el-checkbox-checked-background-color: var(--el-color-primary);
|
||||
--el-checkbox-checked-icon-color: var(--el-fill-base);
|
||||
|
||||
--el-checkbox-input-border-color-hover: var(--el-color-primary);
|
||||
--el-checkbox-bordered-height: 40px;
|
||||
|
||||
--el-checkbox-button-checked-background-color: var(--el-color-primary);
|
||||
--el-checkbox-button-checked-font-color: var(--el-color-white);
|
||||
--el-checkbox-button-checked-border-color: var(--el-color-primary);
|
||||
@include set-component-css-var('checkbox', $--checkbox);
|
||||
}
|
||||
|
||||
@include b(checkbox) {
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
@import './var.scss';
|
||||
@import '../mixins/mixins';
|
||||
@import '../mixins/var';
|
||||
|
||||
:root {
|
||||
--el-popup-modal-background-color: var(--el-color-black);
|
||||
--el-popup-modal-opacity: 0.5;
|
||||
@include set-component-css-var('popup', $--popup);
|
||||
}
|
||||
|
||||
.v-modal-enter {
|
||||
|
||||
@ -180,43 +180,91 @@ $--disabled-border-base: map.get($--border-color, 'light') !default;
|
||||
|
||||
/* Checkbox
|
||||
-------------------------- */
|
||||
|
||||
// Checkbox
|
||||
// refactor with css3 var
|
||||
// See packages/theme-chalk/src/checkbox.scss
|
||||
// css3 var in packages/theme-chalk/src/checkbox.scss
|
||||
$--checkbox: () !default;
|
||||
$--checkbox: map.merge(
|
||||
(
|
||||
'font-size': 14px,
|
||||
'font-weight': var(--el-font-weight-primary),
|
||||
'font-color': var(--el-text-color-regular),
|
||||
'input-height': 14px,
|
||||
'input-width': 14px,
|
||||
'border-radius': var(--el-border-radius-small),
|
||||
'background-color': var(--el-color-white),
|
||||
'input-border': var(--el-border-base),
|
||||
'disabled-border-color': var(--el-border-color-base),
|
||||
'disabled-input-fill': #edf2fc,
|
||||
'disabled-icon-color': var(--el-text-color-placeholder),
|
||||
'disabled-checked-input-fill': var(--el-border-color-extra-light),
|
||||
'disabled-checked-input-border-color': var(--el-border-color-base),
|
||||
'disabled-checked-icon-color': var(--el-text-color-placeholder),
|
||||
'checked-font-color': var(--el-color-primary),
|
||||
'checked-input-border-color': var(--el-color-primary),
|
||||
'checked-background-color': var(--el-color-primary),
|
||||
'checked-icon-color': var(--el-fill-base),
|
||||
'input-border-color-hover': var(--el-color-primary),
|
||||
'bordered-height': 40px,
|
||||
'button-checked-background-color': var(--el-color-primary),
|
||||
'button-checked-font-color': var(--el-color-white),
|
||||
'button-checked-border-color': var(--el-color-primary),
|
||||
),
|
||||
$--checkbox
|
||||
);
|
||||
|
||||
/* Radio
|
||||
-------------------------- */
|
||||
/// fontSize||Font|1
|
||||
$--radio-font-size: map.get($--font-size, 'base') !default;
|
||||
/// color||Color|0
|
||||
$--radio-font-color: var(--el-text-color-regular) !default;
|
||||
$--radio-input-height: 14px !default;
|
||||
$--radio-input-width: 14px !default;
|
||||
/// borderRadius||Border|2
|
||||
$--radio-input-border-radius: var(--el-border-radius-circle) !default;
|
||||
/// color||Color|0
|
||||
$--radio-input-background-color: $--color-white !default;
|
||||
$--radio-input-border: $--border-base !default;
|
||||
/// color||Color|0
|
||||
$--radio-input-border-color: map.get($--border-color, 'base') !default;
|
||||
$--radio: () !default;
|
||||
$--radio: map.merge(
|
||||
(
|
||||
'font-size': map.get($--font-size, 'base'),
|
||||
'font-color': var(--el-text-color-regular),
|
||||
'font-weight': var(--el-font-weight-primary),
|
||||
'input-height': 14px,
|
||||
'input-width': 14px,
|
||||
'input-border-radius': var(--el-border-radius-circle),
|
||||
'input-background-color': var(--el-color-white),
|
||||
'input-border': $--border-base,
|
||||
'input-border-color': map.get($--border-color, 'base'),
|
||||
),
|
||||
$--radio
|
||||
);
|
||||
|
||||
$--radio-disabled-input-border-color: $--disabled-border-base !default;
|
||||
$--radio-disabled-input-fill: $--disabled-fill-base !default;
|
||||
$--radio-disabled-icon-color: $--disabled-fill-base !default;
|
||||
$--radio-button: () !default;
|
||||
$--radio-button: map.merge(
|
||||
(
|
||||
'checked-background-color': var(--el-color-primary),
|
||||
'checked-font-color': var(--el-color-white),
|
||||
'checked-border-color': var(--el-color-primary),
|
||||
'disabled-checked-fill': var(--el-border-color-extra-light),
|
||||
),
|
||||
$--radio-button
|
||||
);
|
||||
|
||||
$--radio-disabled-checked-input-border-color: $--disabled-border-base !default;
|
||||
$--radio-disabled-checked-input-fill: $--disabled-fill-base !default;
|
||||
$--radio-disabled-checked-icon-color: var(--el-text-color-placeholder) !default;
|
||||
$--radio-disabled: () !default;
|
||||
$--radio-disabled: map.merge(
|
||||
(
|
||||
'input-border-color': var(--el-disabled-border-base),
|
||||
'input-fill': var(--el-disabled-fill-base),
|
||||
'icon-color': var(--el-disabled-fill-base),
|
||||
'checked-input-border-color': var(--el-disabled-border-base),
|
||||
'checked-input-fill': var(--el-disabled-fill-base),
|
||||
'checked-icon-color': var(--el-text-color-placeholder),
|
||||
),
|
||||
$--radio-disabled
|
||||
);
|
||||
|
||||
/// color||Color|0
|
||||
$--radio-checked-font-color: $--color-primary !default;
|
||||
/// color||Color|0
|
||||
$--radio-checked-input-border-color: $--color-primary !default;
|
||||
/// color||Color|0
|
||||
$--radio-checked-icon-color: $--color-primary !default;
|
||||
$--radio-checked: () !default;
|
||||
$--radio-checked: map.merge(
|
||||
(
|
||||
'font-color': var(--el-color-primary),
|
||||
'input-border-color': var(--el-color-primary),
|
||||
'icon-color': var(--el-color-primary),
|
||||
),
|
||||
$--radio-checked
|
||||
);
|
||||
|
||||
$--radio-input-border-color-hover: $--color-primary !default;
|
||||
$--radio-input-border-color-hover: var(--el-color-primary) !default;
|
||||
|
||||
$--radio-bordered-padding: () !default;
|
||||
$--radio-bordered-padding: map.merge(
|
||||
@ -260,62 +308,94 @@ $--radio-bordered-height: map.merge(
|
||||
$--radio-bordered-height
|
||||
);
|
||||
|
||||
/// color||Color|0
|
||||
$--radio-button-checked-background-color: $--color-primary !default;
|
||||
/// color||Color|0
|
||||
$--radio-button-checked-font-color: $--color-white !default;
|
||||
/// color||Color|0
|
||||
$--radio-button-checked-border-color: $--color-primary !default;
|
||||
$--radio-button-disabled-checked-fill: map.get(
|
||||
$--border-color,
|
||||
'extra-light'
|
||||
) !default;
|
||||
|
||||
/* Select
|
||||
-------------------------- */
|
||||
$--select-border-color-hover: $--border-color-hover !default;
|
||||
$--select-disabled-border: $--disabled-border-base !default;
|
||||
/// fontSize||Font|1
|
||||
$--select-font-size: map.get($--font-size, 'base') !default;
|
||||
$--select-close-hover-color: var(--el-text-color-secondary) !default;
|
||||
$--select: () !default;
|
||||
$--select: map.merge(
|
||||
(
|
||||
'border-color-hover': $--border-color-hover,
|
||||
'disabled-border': $--disabled-border-base,
|
||||
'font-size': map.get($--font-size, 'base'),
|
||||
'close-hover-color': var(--el-text-color-secondary),
|
||||
'input-color': var(--el-text-color-placeholder),
|
||||
'multiple-input-color': #666,
|
||||
'input-focus-border-color': $--color-primary,
|
||||
'input-font-size': 14px,
|
||||
),
|
||||
$--select
|
||||
);
|
||||
|
||||
$--select-input-color: var(--el-text-color-placeholder) !default;
|
||||
$--select-multiple-input-color: #666 !default;
|
||||
/// color||Color|0
|
||||
$--select-input-focus-border-color: $--color-primary !default;
|
||||
/// fontSize||Font|1
|
||||
$--select-input-font-size: 14px !default;
|
||||
$--select-option: () !default;
|
||||
$--select-option: map.merge(
|
||||
(
|
||||
'color': var(--el-text-color-regular),
|
||||
'disabled-color': var(--el-text-color-placeholder),
|
||||
'height': 34px,
|
||||
'hover-background': var(--el-background-color-base),
|
||||
'selected-font-color': var(--el-color-primary),
|
||||
),
|
||||
$--select-option
|
||||
);
|
||||
|
||||
$--select-option-color: var(--el-text-color-regular) !default;
|
||||
$--select-option-disabled-color: var(--el-text-color-placeholder) !default;
|
||||
/// height||Other|4
|
||||
$--select-option-height: 34px !default;
|
||||
$--select-option-hover-background: $--background-color-base !default;
|
||||
/// color||Color|0
|
||||
$--select-option-selected-font-color: $--color-primary !default;
|
||||
$--select-group: () !default;
|
||||
$--select-group: map.merge(
|
||||
(
|
||||
'color': var(--el-color-info),
|
||||
'height': 30px,
|
||||
'font-size': 12px,
|
||||
),
|
||||
$--select-group
|
||||
);
|
||||
|
||||
$--select-group-color: $--color-info !default;
|
||||
$--select-group-height: 30px !default;
|
||||
$--select-group-font-size: 12px !default;
|
||||
|
||||
$--select-dropdown-background: $--color-white !default;
|
||||
$--select-dropdown-shadow: var(--el-box-shadow-light) !default;
|
||||
$--select-dropdown-empty-color: #999 !default;
|
||||
/// height||Other|4
|
||||
$--select-dropdown-max-height: 274px !default;
|
||||
$--select-dropdown-padding: 6px 0 !default;
|
||||
$--select-dropdown-empty-padding: 10px 0 !default;
|
||||
$--select-dropdown-border: solid 1px map.get($--border-color, 'light') !default;
|
||||
$--select-dropdown: () !default;
|
||||
$--select-dropdown: map.merge(
|
||||
(
|
||||
'background': $--color-white,
|
||||
'shadow': var(--el-box-shadow-light),
|
||||
'empty-color': #999,
|
||||
'max-height': 274px,
|
||||
'padding': 6px 0,
|
||||
'empty-padding': 10px 0,
|
||||
'border': solid 1px map.get($--border-color, 'light'),
|
||||
),
|
||||
$--select-dropdown
|
||||
);
|
||||
|
||||
/* Alert
|
||||
-------------------------- */
|
||||
// refactor with css3 var
|
||||
// See packages/theme-chalk/src/alert.scss
|
||||
// css3 var in packages/theme-chalk/src/alert.scss
|
||||
$--alert: () !default;
|
||||
$--alert: map.merge(
|
||||
(
|
||||
'padding': 8px 16px,
|
||||
'border-radius-base': var(--el-border-radius-base),
|
||||
'title-font-size': 13px,
|
||||
'description-font-size': 12px,
|
||||
'close-font-size': 12px,
|
||||
'close-customed-font-size': 13px,
|
||||
'icon-size': 16px,
|
||||
'icon-large-size': 28px,
|
||||
),
|
||||
$--alert
|
||||
);
|
||||
|
||||
/* MessageBox
|
||||
-------------------------- */
|
||||
// refactor with css3 var
|
||||
// See packages/theme-chalk/src/message-box.scss
|
||||
// css3 var in packages/theme-chalk/src/message-box.scss
|
||||
$--messagebox: () !default;
|
||||
$--messagebox: map.merge(
|
||||
(
|
||||
'title-color': var(--el-text-color-primary),
|
||||
'width': 420px,
|
||||
'border-radius': 4px,
|
||||
'font-size': var(--el-font-size-large),
|
||||
'content-font-size': var(--el-font-size-base),
|
||||
'content-color': var(--el-text-color-regular),
|
||||
'error-font-size': 12px,
|
||||
'padding-primary': 15px,
|
||||
),
|
||||
$--messagebox
|
||||
);
|
||||
|
||||
/* Message
|
||||
-------------------------- */
|
||||
@ -335,33 +415,53 @@ $--message: map.merge(
|
||||
|
||||
/* Notification
|
||||
-------------------------- */
|
||||
// refactor with css3 var
|
||||
// See packages/theme-chalk/src/notification.scss
|
||||
// css3 var in packages/theme-chalk/src/notification.scss
|
||||
$--notification: () !default;
|
||||
$--notification: map.merge(
|
||||
(
|
||||
'width': 330px,
|
||||
'padding': 14px 26px 14px 13px,
|
||||
'radius': 8px,
|
||||
'shadow': var(--el-box-shadow-light),
|
||||
'border-color': var(--el-border-color-lighter),
|
||||
'icon-size': 24px,
|
||||
'close-font-size':
|
||||
var(--el-message-close-size, map.get($--message, 'close-size')),
|
||||
'group-margin-left': 13px,
|
||||
'group-margin-right': 8px,
|
||||
'content-font-size': var(--el-font-size-base),
|
||||
'content-color': var(--el-text-color-regular),
|
||||
'title-font-size': 16px,
|
||||
'title-color': var(--el-text-color-primary),
|
||||
'close-color': var(--el-text-color-secondary),
|
||||
'close-hover-color': var(--el-text-color-regular),
|
||||
),
|
||||
$--notification
|
||||
);
|
||||
|
||||
/* Input
|
||||
-------------------------- */
|
||||
/// color||Color|0
|
||||
$--input-font-color: var(--el-text-color-regular) !default;
|
||||
// css3 var in packages/theme-chalk/src/input.scss
|
||||
$--input: () !default;
|
||||
$--input: map.merge(
|
||||
(
|
||||
'font-color': var(--el-text-color-regular),
|
||||
'border': $--border-base,
|
||||
'border-color': map.get($--border-color, 'base'),
|
||||
'border-radius': var(--el-border-radius-base),
|
||||
'background-color': $--color-white,
|
||||
'icon-color': var(--el-text-color-placeholder),
|
||||
'placeholder-color': var(--el-text-color-placeholder),
|
||||
'hover-border': $--border-color-hover,
|
||||
'clear-hover-color': var(--el-text-color-secondary),
|
||||
'focus-border': $--color-primary,
|
||||
),
|
||||
$--input
|
||||
);
|
||||
|
||||
$--input-border: $--border-base !default;
|
||||
$--input-border-color: map.get($--border-color, 'base') !default;
|
||||
/// borderRadius||Border|2
|
||||
$--input-border-radius: var(--el-border-radius-base) !default;
|
||||
/// color||Color|0
|
||||
$--input-background-color: $--color-white !default;
|
||||
/// color||Color|0
|
||||
$--input-icon-color: var(--el-text-color-placeholder) !default;
|
||||
/// color||Color|0
|
||||
$--input-placeholder-color: var(--el-text-color-placeholder) !default;
|
||||
|
||||
$--input-hover-border: $--border-color-hover !default;
|
||||
$--input-clear-hover-color: var(--el-text-color-secondary) !default;
|
||||
|
||||
$--input-focus-border: $--color-primary !default;
|
||||
|
||||
$--input-disabled-fill: $--disabled-fill-base !default;
|
||||
$--input-disabled-border: $--disabled-border-base !default;
|
||||
$--input-disabled-color: $--disabled-color-base !default;
|
||||
$--input-disabled-fill: var(--el-disabled-fill-base) !default;
|
||||
$--input-disabled-border: var(--el-disabled-border-base) !default;
|
||||
$--input-disabled-color: var(--el-disabled-color-base) !default;
|
||||
$--input-disabled-placeholder-color: var(--el-text-color-placeholder) !default;
|
||||
|
||||
$--input-font-size: () !default;
|
||||
@ -408,8 +508,24 @@ $--input-number-width: map.merge(
|
||||
|
||||
/* Cascader
|
||||
-------------------------- */
|
||||
// refactor with css3 var
|
||||
// See packages/theme-chalk/src/cascader.scss
|
||||
// css3 var in packages/theme-chalk/src/cascader.scss
|
||||
$--cascader: () !default;
|
||||
$--cascader: map.merge(
|
||||
(
|
||||
'menu-font-color': var(--el-text-color-regular),
|
||||
'menu-selected-font-color': var(--el-color-primary),
|
||||
'menu-fill': var(--el-fill-base),
|
||||
'menu-font-size': var(--el-font-size-base),
|
||||
'menu-radius': var(--el-border-radius-base),
|
||||
'menu-border': solid 1px var(--el-border-color-light),
|
||||
'menu-shadow': var(--el-box-shadow-light),
|
||||
'node-background-hover': var(--el-background-color-base),
|
||||
'node-color-disabled': var(--el-text-color-placeholder),
|
||||
'color-empty': var(--el-text-color-placeholder),
|
||||
'tag-background': #f0f2f5,
|
||||
),
|
||||
$--cascader
|
||||
);
|
||||
|
||||
/* Button
|
||||
-------------------------- */
|
||||
@ -506,48 +622,148 @@ $--button-padding-horizontal: map.merge(
|
||||
|
||||
/* Switch
|
||||
-------------------------- */
|
||||
// refactor with css3 var
|
||||
// See packages/theme-chalk/src/switch.scss
|
||||
// css3 var in packages/theme-chalk/src/switch.scss
|
||||
$--switch: () !default;
|
||||
$--switch: map.merge(
|
||||
(
|
||||
'on-color': var(--el-color-primary),
|
||||
'off-color': var(--el-border-color-base),
|
||||
'font-size': var(--el-font-size-base),
|
||||
'core-border-radius': 10px,
|
||||
'width': 40px,
|
||||
'height': 20px,
|
||||
'button-size': 16px,
|
||||
),
|
||||
$--switch
|
||||
);
|
||||
|
||||
/* Dialog
|
||||
-------------------------- */
|
||||
// refactor with css3 var
|
||||
// See packages/theme-chalk/src/dialog.scss
|
||||
// css3 var in packages/theme-chalk/src/dialog.scss
|
||||
$--dialog: () !default;
|
||||
$--dialog: map.merge(
|
||||
(
|
||||
'background-color': var(--el-color-white),
|
||||
'box-shadow': 0 1px 3px rgba(0, 0, 0, 0.3),
|
||||
'title-font-size': var(--el-font-size-large),
|
||||
'content-font-size': 14px,
|
||||
'font-line-height': var(--el-font-line-height-primary),
|
||||
'padding-primary': 20px,
|
||||
),
|
||||
$--dialog
|
||||
);
|
||||
|
||||
/* Table
|
||||
-------------------------- */
|
||||
// refactor with css3 var
|
||||
// See packages/theme-chalk/src/table.scss
|
||||
// css3 var in packages/theme-chalk/src/table.scss
|
||||
$--table: () !default;
|
||||
$--table: map.merge(
|
||||
(
|
||||
'border-color': var(--el-border-color-lighter),
|
||||
'border': 1px solid var(--el-table-border-color),
|
||||
'font-color': var(--el-text-color-regular),
|
||||
'header-font-color': var(--el-text-color-secondary),
|
||||
'row-hover-background-color': var(--el-background-color-base),
|
||||
'current-row-background-color': var(--el-color-primary-light-9),
|
||||
'header-background-color': var(--el-color-white),
|
||||
'fixed-box-shadow': 0 0 10px rgba(0, 0, 0, 0.12),
|
||||
),
|
||||
$--table
|
||||
);
|
||||
|
||||
/* Pagination
|
||||
-------------------------- */
|
||||
// refactor with css3 var
|
||||
// See packages/theme-chalk/src/pagination.scss
|
||||
// css3 var in packages/theme-chalk/src/pagination.scss
|
||||
$--pagination: () !default;
|
||||
$--pagination: map.merge(
|
||||
(
|
||||
'font-size': 13px,
|
||||
'background-color': var(--el-color-white),
|
||||
'font-color': var(--el-text-color-primary),
|
||||
'border-radius': 3px,
|
||||
'button-color': var(--el-text-color-primary),
|
||||
'button-width': 35.5px,
|
||||
'button-height': 28px,
|
||||
'button-disabled-color': var(--el-text-color-placeholder),
|
||||
'button-disabled-background-color': var(--el-color-white),
|
||||
'hover-color': var(--el-color-primary),
|
||||
'height-extra-small': 22px,
|
||||
'line-height-extra-small': var(--el-pagination-height-extra-small),
|
||||
),
|
||||
$--pagination
|
||||
);
|
||||
|
||||
/* Popup
|
||||
-------------------------- */
|
||||
// refactor with css3 var
|
||||
// See packages/theme-chalk/src/popup.scss
|
||||
// css3 var in packages/theme-chalk/src/popup.scss
|
||||
$--popup: () !default;
|
||||
$--popup: map.merge(
|
||||
(
|
||||
'modal-background-color': var(--el-color-black),
|
||||
'modal-opacity': 0.5,
|
||||
),
|
||||
$--popup
|
||||
);
|
||||
|
||||
/* Popover
|
||||
-------------------------- */
|
||||
// refactor with css3 var
|
||||
// See packages/theme-chalk/src/popover.scss
|
||||
// css3 var in packages/theme-chalk/src/popover.scss
|
||||
$--popover: () !default;
|
||||
$--popover: map.merge(
|
||||
(
|
||||
'background-color': var(--el-color-white),
|
||||
'font-size': var(--el-font-size-base),
|
||||
'border-color': var(--el-border-color-lighter),
|
||||
'padding': 12px,
|
||||
'padding-large': 18px 20px,
|
||||
'title-font-size': 16px,
|
||||
'title-font-color': var(--el-text-color-primary),
|
||||
'border-radius': 4px,
|
||||
),
|
||||
$--popover
|
||||
);
|
||||
|
||||
/* Tooltip
|
||||
-------------------------- */
|
||||
// refactor with css3 var
|
||||
// See packages/theme-chalk/src/tooltip.scss
|
||||
// css3 var in packages/theme-chalk/src/tooltip.scss
|
||||
$--tooltip: () !default;
|
||||
$--tooltip: map.merge(
|
||||
(
|
||||
'fill': var(--el-text-color-primary),
|
||||
'color': var(--el-color-white),
|
||||
'font-size': 12px,
|
||||
'border-color': var(--el-text-color-primary),
|
||||
'arrow-size': 6px,
|
||||
'padding': 10px,
|
||||
),
|
||||
$--tooltip
|
||||
);
|
||||
|
||||
/* Tag
|
||||
-------------------------- */
|
||||
// refactor with css3 var
|
||||
// See packages/theme-chalk/src/tag.scss
|
||||
// css3 var in packages/theme-chalk/src/tag.scss
|
||||
$--tag: () !default;
|
||||
$--tag: map.merge(
|
||||
(
|
||||
'font-size': 12px,
|
||||
'border-radius': 4px,
|
||||
'padding': 0 10px,
|
||||
),
|
||||
$--tag
|
||||
);
|
||||
|
||||
/* Tree
|
||||
-------------------------- */
|
||||
// refactor with css3 var
|
||||
// See packages/theme-chalk/src/tree.scss
|
||||
// css3 var in packages/theme-chalk/src/tree.scss
|
||||
$--tree: () !default;
|
||||
$--tree: map.merge(
|
||||
(
|
||||
'node-hover-background-color': var(--el-background-color-base),
|
||||
'font-color': var(--el-text-color-regular),
|
||||
'expand-icon-color': var(--el-text-color-placeholder),
|
||||
),
|
||||
$--tree
|
||||
);
|
||||
|
||||
/* Dropdown
|
||||
-------------------------- */
|
||||
@ -612,8 +828,18 @@ $--slider: map.merge(
|
||||
|
||||
/* Menu
|
||||
--------------------------*/
|
||||
// refactor with css3 var
|
||||
// See packages/theme-chalk/src/menu.scss
|
||||
// css3 var in packages/theme-chalk/src/menu.scss
|
||||
$--menu: () !default;
|
||||
$--menu: map.merge(
|
||||
(
|
||||
'item-font-size': var(--el-font-size-base),
|
||||
'item-font-color': var(--el-text-color-primary),
|
||||
'background-color': var(--el-color-white),
|
||||
'item-hover-fill': var(--el-color-primary-light-9),
|
||||
'border-color': #e6e6e6,
|
||||
),
|
||||
$--menu
|
||||
);
|
||||
|
||||
/* Rate
|
||||
--------------------------*/
|
||||
@ -631,23 +857,68 @@ $--rate: map.merge(
|
||||
|
||||
/* DatePicker
|
||||
--------------------------*/
|
||||
// refactor with css3 var
|
||||
// See packages/theme-chalk/src/date-picker.scss
|
||||
// css3 var packages/theme-chalk/src/date-picker/var.scss
|
||||
$--datepicker: () !default;
|
||||
$--datepicker: map.merge(
|
||||
(
|
||||
'font-color': var(--el-color-text-regular),
|
||||
'off-font-color': var(--el-color-text-placeholder),
|
||||
'header-font-color': var(--el-color-text-regular),
|
||||
'icon-color': var(--el-color-text-primary),
|
||||
'border-color': var(--el-disabled-border-base),
|
||||
'inner-border-color': #e4e4e4,
|
||||
'inrange-background-color': var(--el-border-color-extra-light),
|
||||
'inrange-hover-background-color': var(--el-border-color-extra-light),
|
||||
'active-color': var(--el-color-primary),
|
||||
'hover-font-color': var(--el-color-primary),
|
||||
),
|
||||
$--datepicker
|
||||
);
|
||||
|
||||
/* Loading
|
||||
--------------------------*/
|
||||
// refactor with css3 var
|
||||
// See packages/theme-chalk/src/loading.scss
|
||||
// css3 var in packages/theme-chalk/src/loading.scss
|
||||
$--loading: () !default;
|
||||
$--loading: map.merge(
|
||||
(
|
||||
'spinner-size': 42px,
|
||||
'fullscreen-spinner-size': 50px,
|
||||
),
|
||||
$--loading
|
||||
);
|
||||
|
||||
/* Scrollbar
|
||||
--------------------------*/
|
||||
// refactor with css3 var
|
||||
// See packages/theme-chalk/src/scrollbar.scss
|
||||
// css3 var in packages/theme-chalk/src/scrollbar.scss
|
||||
$--scrollbar: () !default;
|
||||
$--scrollbar: map.merge(
|
||||
(
|
||||
'opacity': 0.3,
|
||||
'background-color': var(--el-text-color-secondary),
|
||||
'hover-opacity': 0.5,
|
||||
'hover-background-color': var(--el-text-color-secondary),
|
||||
),
|
||||
$--scrollbar
|
||||
);
|
||||
|
||||
/* Carousel
|
||||
--------------------------*/
|
||||
// refactor with css3 var
|
||||
// See packages/theme-chalk/src/carousel.scss
|
||||
// css3 var in packages/theme-chalk/src/carousel.scss
|
||||
$--carousel: () !default;
|
||||
$--carousel: map.merge(
|
||||
(
|
||||
'arrow-font-size': 12px,
|
||||
'arrow-size': 36px,
|
||||
'arrow-background': rgba(31, 45, 61, 0.11),
|
||||
'arrow-hover-background': rgba(31, 45, 61, 0.23),
|
||||
'indicator-width': 30px,
|
||||
'indicator-height': 2px,
|
||||
'indicator-padding-horizontal': 4px,
|
||||
'indicator-padding-vertical': 12px,
|
||||
'indicator-out-color': var(--el-border-color-hover),
|
||||
),
|
||||
$--carousel
|
||||
);
|
||||
|
||||
/* Collapse
|
||||
--------------------------*/
|
||||
@ -656,18 +927,48 @@ $--rate: map.merge(
|
||||
|
||||
/* Transfer
|
||||
--------------------------*/
|
||||
// refactor with css3 var
|
||||
// See packages/theme-chalk/src/transfer.scss
|
||||
// css3 var in packages/theme-chalk/src/transfer.scss
|
||||
$--transfer: () !default;
|
||||
$--transfer: map.merge(
|
||||
(
|
||||
'border-color': var(--el-border-color-lighter),
|
||||
'border-radius': var(--el-border-radius-base),
|
||||
'panel-width': 200px,
|
||||
'panel-header-height': 40px,
|
||||
'panel-header-background-color': var(--el-background-color-base),
|
||||
'panel-footer-height': 40px,
|
||||
'panel-body-height': 246px,
|
||||
'item-height': 30px,
|
||||
'filter-height': 32px,
|
||||
),
|
||||
$--transfer
|
||||
);
|
||||
|
||||
/* Timeline
|
||||
--------------------------*/
|
||||
// refactor with css3 var
|
||||
// See packages/theme-chalk/src/timeline-item.scss
|
||||
// css3 var in packages/theme-chalk/src/timeline-item.scss
|
||||
$--timeline: () !default;
|
||||
$--timeline: map.merge(
|
||||
(
|
||||
'node-size-normal': 12px,
|
||||
'node-size-large': 14px,
|
||||
'node-color': var(--el-border-color-light),
|
||||
),
|
||||
$--timeline
|
||||
);
|
||||
|
||||
/* Backtop
|
||||
--------------------------*/
|
||||
// refactor with css3 var
|
||||
// See packages/theme-chalk/src/backtop.scss
|
||||
// css3 var in packages/theme-chalk/src/backtop.scss
|
||||
$--backtop: () !default;
|
||||
$--backtop: map.merge(
|
||||
(
|
||||
'background-color': var(--el-color-white),
|
||||
'font-color': var(--el-color-primary),
|
||||
'hover-background-color': var(--el-border-color-extra-light),
|
||||
),
|
||||
$--backtop
|
||||
);
|
||||
|
||||
/* Link
|
||||
--------------------------*/
|
||||
@ -686,33 +987,90 @@ $--link: map.merge(
|
||||
|
||||
/* Calendar
|
||||
--------------------------*/
|
||||
// refactor with css3 var
|
||||
// See packages/theme-chalk/src/calendar.scss
|
||||
// css3 var in packages/theme-chalk/src/calendar.scss
|
||||
$--calendar: () !default;
|
||||
$--calendar: map.merge(
|
||||
(
|
||||
'border': var(--el-table-border, 1px solid var(--el-border-color-lighter)),
|
||||
'header-border-bottom': var(--el-calendar-border),
|
||||
'selected-background-color': #f2f8fe,
|
||||
'cell-width': 85px,
|
||||
),
|
||||
$--calendar
|
||||
);
|
||||
|
||||
/* Form
|
||||
-------------------------- */
|
||||
// refactor with css3 var
|
||||
// See packages/theme-chalk/src/form.scss
|
||||
// css3 var in packages/theme-chalk/src/form.scss
|
||||
$--form: () !default;
|
||||
$--form: map.merge(
|
||||
(
|
||||
'label-font-size': var(--el-font-size-base),
|
||||
),
|
||||
$--form
|
||||
);
|
||||
|
||||
/* Avatar
|
||||
--------------------------*/
|
||||
// refactor with css3 var
|
||||
// See packages/theme-chalk/src/avatar.scss
|
||||
// css3 var in packages/theme-chalk/src/avatar.scss
|
||||
$--avatar: () !default;
|
||||
$--avatar: map.merge(
|
||||
(
|
||||
'font-color': #fff,
|
||||
'background-color': #c0c4cc,
|
||||
'text-font-size': 14px,
|
||||
'icon-font-size': 18px,
|
||||
'border-radius': var(--el-border-radius-base),
|
||||
'large-size': 40px,
|
||||
'medium-size': 36px,
|
||||
'small-size': 28px,
|
||||
),
|
||||
$--avatar
|
||||
);
|
||||
|
||||
/* Empty
|
||||
-------------------------- */
|
||||
// refactor with css3 var
|
||||
// See packages/theme-chalk/src/empty.scss
|
||||
// css3 var in packages/theme-chalk/src/empty.scss
|
||||
$--empty: () !default;
|
||||
$--empty: map.merge(
|
||||
(
|
||||
'padding': 40px 0,
|
||||
'image-width': 160px,
|
||||
'description-margin-top': 20px,
|
||||
'bottom-margin-top': 20px,
|
||||
),
|
||||
$--empty
|
||||
);
|
||||
|
||||
/* Descriptions
|
||||
-------------------------- */
|
||||
// refactor with css3 var
|
||||
// See packages/theme-chalk/src/descriptions.scss
|
||||
// css3 var in packages/theme-chalk/src/descriptions.scss
|
||||
$--descriptions: () !default;
|
||||
$--descriptions: map.merge(
|
||||
(
|
||||
'header-margin-bottom': 20px,
|
||||
'title-font-size': 16px,
|
||||
'table-border': 1px solid map.get($--border-color, 'lighter'),
|
||||
'item-bordered-label-background': #fafafa,
|
||||
),
|
||||
$--descriptions
|
||||
);
|
||||
|
||||
/* Result
|
||||
-------------------------- */
|
||||
// refactor with css3 var
|
||||
// See packages/theme-chalk/src/result.scss
|
||||
// css3 var in packages/theme-chalk/src/result.scss
|
||||
$--result: () !default;
|
||||
$--result: map.merge(
|
||||
(
|
||||
'padding': 40px 30px,
|
||||
'icon-font-size': 64px,
|
||||
'title-font-size': 20px,
|
||||
'title-margin-top': 20px,
|
||||
'subtitle-margin-top': 10px,
|
||||
'extra-margin-top': 30px,
|
||||
),
|
||||
$--result
|
||||
);
|
||||
|
||||
/* Break-point
|
||||
--------------------------*/
|
||||
|
||||
@ -1,14 +1,6 @@
|
||||
@import '../mixins/var';
|
||||
@import '../common/var.scss';
|
||||
|
||||
:root {
|
||||
--el-datepicker-font-color: var(--el-color-text-regular);
|
||||
--el-datepicker-off-font-color: var(--el-color-text-placeholder);
|
||||
--el-datepicker-header-font-color: var(--el-color-text-regular);
|
||||
--el-datepicker-icon-color: var(--el-color-text-primary);
|
||||
--el-datepicker-border-color: var(--el-disabled-border-base);
|
||||
--el-datepicker-inner-border-color: #e4e4e4;
|
||||
--el-datepicker-inrange-background-color: var(--el-border-color-extra-light);
|
||||
--el-datepicker-inrange-hover-background-color: var(
|
||||
--el-border-color-extra-light
|
||||
);
|
||||
--el-datepicker-active-color: var(--el-color-primary);
|
||||
--el-datepicker-hover-font-color: var(--el-color-primary);
|
||||
@include set-component-css-var('datepicker', $--datepicker);
|
||||
}
|
||||
|
||||
@ -1,12 +1,10 @@
|
||||
@import 'mixins/mixins';
|
||||
@import 'mixins/var';
|
||||
@import 'common/var';
|
||||
@import 'descriptions-item';
|
||||
|
||||
:root {
|
||||
--el-descriptions-header-margin-bottom: 20px;
|
||||
--el-descriptions-title-font-size: 16px;
|
||||
--el-descriptions-table-border: 1px solid map.get($--border-color, 'lighter');
|
||||
--el-descriptions-item-bordered-label-background: #fafafa;
|
||||
@include set-component-css-var('descriptions', $--descriptions);
|
||||
}
|
||||
|
||||
@include b(descriptions) {
|
||||
|
||||
@ -2,17 +2,13 @@
|
||||
|
||||
@import 'mixins/mixins';
|
||||
@import 'mixins/utils';
|
||||
@import 'mixins/var';
|
||||
@import 'common/var';
|
||||
@import 'common/popup';
|
||||
@import './overlay.scss';
|
||||
|
||||
:root {
|
||||
--el-dialog-background-color: var(--el-color-white);
|
||||
--el-dialog-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||
--el-dialog-title-font-size: var(--el-font-size-large);
|
||||
--el-dialog-content-font-size: 14px;
|
||||
--el-dialog-font-line-height: var(--el-font-line-height-primary);
|
||||
--el-dialog-padding-primary: 20px;
|
||||
@include set-component-css-var('dialog', $--dialog);
|
||||
}
|
||||
|
||||
@include b(dialog) {
|
||||
|
||||
@ -1,11 +1,9 @@
|
||||
@import 'mixins/mixins';
|
||||
@import 'mixins/var';
|
||||
@import 'common/var';
|
||||
|
||||
:root {
|
||||
--el-empty-padding: 40px 0;
|
||||
--el-empty-image-width: 160px;
|
||||
--el-empty-description-margin-top: 20px;
|
||||
--el-empty-bottom-margin-top: 20px;
|
||||
@include set-component-css-var('empty', $--empty);
|
||||
}
|
||||
|
||||
@include b(empty) {
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
@import 'mixins/mixins';
|
||||
@import 'mixins/utils';
|
||||
@import 'mixins/var';
|
||||
@import 'common/var';
|
||||
|
||||
:root {
|
||||
--el-form-label-font-size: var(--el-font-size-base);
|
||||
@include set-component-css-var('form', $--form);
|
||||
}
|
||||
|
||||
@include b(form) {
|
||||
|
||||
@ -38,7 +38,10 @@
|
||||
color: var(--el-color-primary);
|
||||
|
||||
& ~ .#{$namespace}-input:not(.is-disabled) .#{$namespace}-input__inner {
|
||||
border-color: $--input-focus-border;
|
||||
border-color: var(
|
||||
--el-input-focus-border,
|
||||
map.get($--input, 'focus-border')
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,8 +1,13 @@
|
||||
@use "sass:map";
|
||||
|
||||
@import 'mixins/mixins';
|
||||
@import 'mixins/var';
|
||||
@import 'common/var';
|
||||
|
||||
:root {
|
||||
@include set-component-css-var('input', $--input);
|
||||
}
|
||||
|
||||
@include b(textarea) {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
@ -18,24 +23,24 @@
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
font-size: inherit;
|
||||
color: $--input-font-color;
|
||||
background-color: $--input-background-color;
|
||||
color: var(--el-input-font-color);
|
||||
background-color: var(--el-input-background-color);
|
||||
background-image: none;
|
||||
border: $--input-border;
|
||||
border-radius: $--input-border-radius;
|
||||
border: var(--el-input-border);
|
||||
border-radius: var(--el-input-border-radius);
|
||||
transition: var(--el-border-transition-base);
|
||||
|
||||
&::placeholder {
|
||||
color: $--input-placeholder-color;
|
||||
color: var(--el-input-placeholder-color);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: $--input-hover-border;
|
||||
border-color: var(--el-input-hover-border);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: $--input-focus-border;
|
||||
border-color: var(--el-input-focus-border);
|
||||
}
|
||||
}
|
||||
|
||||
@ -82,13 +87,13 @@
|
||||
@include scroll-bar;
|
||||
|
||||
& .#{$namespace}-input__clear {
|
||||
color: $--input-icon-color;
|
||||
color: var(--el-input-icon-color);
|
||||
font-size: map.get($--input-font-size, 'default');
|
||||
cursor: pointer;
|
||||
transition: var(--el-color-transition-base);
|
||||
|
||||
&:hover {
|
||||
color: $--input-clear-hover-color;
|
||||
color: var(--el-input-clear-hover-color);
|
||||
}
|
||||
}
|
||||
|
||||
@ -109,12 +114,12 @@
|
||||
|
||||
@include e(inner) {
|
||||
-webkit-appearance: none;
|
||||
background-color: $--input-background-color;
|
||||
background-color: var(--el-input-background-color);
|
||||
background-image: none;
|
||||
border-radius: $--input-border-radius;
|
||||
border: $--input-border;
|
||||
border-radius: var(--el-input-border-radius);
|
||||
border: var(--el-input-border);
|
||||
box-sizing: border-box;
|
||||
color: $--input-font-color;
|
||||
color: var(--el-input-font-color);
|
||||
display: inline-block;
|
||||
font-size: inherit;
|
||||
height: map.get($--input-height, 'default');
|
||||
@ -125,16 +130,16 @@
|
||||
width: 100%;
|
||||
|
||||
&::placeholder {
|
||||
color: $--input-placeholder-color;
|
||||
color: var(--el-input-placeholder-color);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: $--input-hover-border;
|
||||
border-color: var(--el-input-hover-border);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: $--input-focus-border;
|
||||
border-color: var(--el-input-focus-border);
|
||||
}
|
||||
}
|
||||
|
||||
@ -144,7 +149,7 @@
|
||||
right: 5px;
|
||||
top: 0;
|
||||
text-align: center;
|
||||
color: $--input-icon-color;
|
||||
color: var(--el-input-icon-color);
|
||||
transition: all var(--el-transition-duration);
|
||||
pointer-events: none;
|
||||
}
|
||||
@ -159,7 +164,7 @@
|
||||
left: 5px;
|
||||
top: 0;
|
||||
text-align: center;
|
||||
color: $--input-icon-color;
|
||||
color: var(--el-input-icon-color);
|
||||
transition: all var(--el-transition-duration);
|
||||
}
|
||||
|
||||
@ -185,7 +190,7 @@
|
||||
@include when(active) {
|
||||
.#{$namespace}-input__inner {
|
||||
outline: none;
|
||||
border-color: $--input-focus-border;
|
||||
border-color: var(--el-input-focus-border);
|
||||
}
|
||||
}
|
||||
|
||||
@ -272,7 +277,7 @@
|
||||
display: table-cell;
|
||||
position: relative;
|
||||
border: $--border-base;
|
||||
border-radius: $--input-border-radius;
|
||||
border-radius: var(--el-input-border-radius);
|
||||
padding: 0 20px;
|
||||
width: 1px;
|
||||
white-space: nowrap;
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
@use "sass:math";
|
||||
|
||||
@import 'mixins/mixins';
|
||||
@import 'mixins/var';
|
||||
@import 'common/var';
|
||||
|
||||
:root {
|
||||
--el-loading-spinner-size: 42px;
|
||||
--el-loading-fullscreen-spinner-size: 50px;
|
||||
@include set-component-css-var('loading', $--loading);
|
||||
}
|
||||
|
||||
@include b(loading-parent) {
|
||||
|
||||
@ -1,15 +1,12 @@
|
||||
@import 'mixins/mixins';
|
||||
@import 'mixins/var';
|
||||
@import 'mixins/utils';
|
||||
@import 'common/var';
|
||||
@import 'common/transition';
|
||||
@import 'tooltip';
|
||||
|
||||
:root {
|
||||
--el-menu-item-font-size: var(--el-font-size-base);
|
||||
--el-menu-item-font-color: var(--el-text-color-primary);
|
||||
--el-menu-background-color: var(--el-color-white);
|
||||
--el-menu-item-hover-fill: var(--el-color-primary-light-9);
|
||||
--el-menu-border-color: #e6e6e6;
|
||||
@include set-component-css-var('menu', $--menu);
|
||||
}
|
||||
|
||||
@mixin menu-item {
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
@use "sass:map";
|
||||
|
||||
@import 'mixins/mixins';
|
||||
@import 'mixins/var';
|
||||
@import 'common/var';
|
||||
@import 'common/popup';
|
||||
@import 'button';
|
||||
@ -8,14 +9,7 @@
|
||||
@import 'overlay';
|
||||
|
||||
:root {
|
||||
--el-messagebox-title-color: var(--el-text-color-primary);
|
||||
--el-messagebox-width: 420px;
|
||||
--el-messagebox-border-radius: 4px;
|
||||
--el-messagebox-font-size: var(--el-font-size-large);
|
||||
--el-messagebox-content-font-size: var(--el-font-size-base);
|
||||
--el-messagebox-content-color: var(--el-text-color-regular);
|
||||
--el-messagebox-error-font-size: 12px;
|
||||
--el-messagebox-padding-primary: 15px;
|
||||
@include set-component-css-var('messagebox', $--messagebox);
|
||||
|
||||
@each $type in (success, info, warning, error) {
|
||||
--el-messagebox-#{$type}-color: var(--el-color-#{$type});
|
||||
|
||||
@ -1,26 +1,9 @@
|
||||
@import 'mixins/mixins';
|
||||
@import 'mixins/var';
|
||||
@import 'common/var';
|
||||
|
||||
:root {
|
||||
--el-notification-width: 330px;
|
||||
--el-notification-padding: 14px 26px 14px 13px;
|
||||
--el-notification-radius: 8px;
|
||||
--el-notification-shadow: var(--el-box-shadow-light);
|
||||
--el-notification-border-color: var(--el-border-color-lighter);
|
||||
--el-notification-icon-size: 24px;
|
||||
--el-notification-close-font-size: var(
|
||||
--el-message-close-size,
|
||||
map.get($--message, 'close-size')
|
||||
);
|
||||
|
||||
--el-notification-group-margin-left: 13px;
|
||||
--el-notification-group-margin-right: 8px;
|
||||
--el-notification-content-font-size: var(--el-font-size-base);
|
||||
--el-notification-content-color: var(--el-text-color-regular);
|
||||
--el-notification-title-font-size: 16px;
|
||||
--el-notification-title-color: var(--el-text-color-primary);
|
||||
--el-notification-close-color: var(--el-text-color-secondary);
|
||||
--el-notification-close-hover-color: var(--el-text-color-regular);
|
||||
@include set-component-css-var('notification', $--notification);
|
||||
|
||||
@each $type in (success, info, warning, error) {
|
||||
--el-notification-#{$type}-icon-color: var(--el-color-#{$type});
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
@use "sass:map";
|
||||
|
||||
@import 'mixins/mixins';
|
||||
@import 'common/var';
|
||||
|
||||
@ -41,9 +43,9 @@
|
||||
|
||||
@include e(title) {
|
||||
padding-left: $gap;
|
||||
font-size: $--select-group-font-size;
|
||||
color: $--select-group-color;
|
||||
line-height: $--select-group-height;
|
||||
font-size: map.get($--select-group, 'font-size');
|
||||
color: map.get($--select-group, 'color');
|
||||
line-height: map.get($--select-group, 'height');
|
||||
}
|
||||
|
||||
& .#{$namespace}-select-dropdown__item {
|
||||
|
||||
@ -1,50 +1,53 @@
|
||||
@use "sass:map";
|
||||
|
||||
@import 'mixins/mixins';
|
||||
@import 'mixins/var';
|
||||
@import 'common/var';
|
||||
|
||||
@include b(select-dropdown) {
|
||||
@include e(option-item) {
|
||||
font-size: $--select-font-size;
|
||||
font-size: var(--el-select-font-size);
|
||||
// 20 as the padding of option item, 12 as the size of ✓ icon size
|
||||
padding: 0 #{20 + 12}px 0 20px;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: $--select-option-color;
|
||||
height: $--select-option-height;
|
||||
line-height: $--select-option-height;
|
||||
color: map.get($--select-option, 'color');
|
||||
height: map.get($--select-option, 'height');
|
||||
line-height: map.get($--select-option, 'height');
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
|
||||
@include when(disabled) {
|
||||
color: $--select-option-disabled-color;
|
||||
color: map.get($--select-option, 'disabled-color');
|
||||
cursor: not-allowed;
|
||||
|
||||
&:hover {
|
||||
background-color: $--color-white;
|
||||
background-color: var(--el-color-white);
|
||||
}
|
||||
}
|
||||
|
||||
@include when(selected) {
|
||||
background-color: $--select-option-hover-background;
|
||||
background-color: map.get($--select-option, 'hover-background');
|
||||
font-weight: 700;
|
||||
|
||||
&:not(.is-multiple) {
|
||||
color: $--select-option-selected-font-color;
|
||||
color: map.get($--select-option, 'selected-font-color');
|
||||
}
|
||||
}
|
||||
|
||||
&.hover,
|
||||
&:hover {
|
||||
background-color: $--select-option-hover-background;
|
||||
background-color: map.get($--select-option, 'hover-background');
|
||||
}
|
||||
}
|
||||
|
||||
@include when(multiple) {
|
||||
.el-select-dropdown__option-item {
|
||||
&.is-selected {
|
||||
color: $--select-option-selected-font-color;
|
||||
background-color: $--select-dropdown-background;
|
||||
color: map.get($--select-option, 'selected-font-color');
|
||||
background-color: map.get($--select-dropdown, 'background');
|
||||
font-weight: bold;
|
||||
&::after {
|
||||
position: absolute;
|
||||
|
||||
@ -1,37 +1,39 @@
|
||||
@use "sass:map";
|
||||
|
||||
@import 'mixins/mixins';
|
||||
@import 'common/var';
|
||||
|
||||
@include b(select-dropdown) {
|
||||
@include e(item) {
|
||||
font-size: $--select-font-size;
|
||||
font-size: map.get($--select, 'font-size');
|
||||
// 20 as the padding of option item, 12 as the size of ✓ icon size
|
||||
padding: 0 #{20 + 12}px 0 20px;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: $--select-option-color;
|
||||
height: $--select-option-height;
|
||||
line-height: $--select-option-height;
|
||||
color: map.get($--select-option, 'color');
|
||||
height: map.get($--select-option, 'height');
|
||||
line-height: map.get($--select-option, 'height');
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
|
||||
@include when(disabled) {
|
||||
color: $--select-option-disabled-color;
|
||||
color: map.get($--select-option, 'disabled-color');
|
||||
cursor: not-allowed;
|
||||
|
||||
&:hover {
|
||||
background-color: $--color-white;
|
||||
background-color: var(--el-color-white);
|
||||
}
|
||||
}
|
||||
|
||||
&.hover,
|
||||
&:hover {
|
||||
background-color: $--select-option-hover-background;
|
||||
background-color: map.get($--select-option, 'hover-background');
|
||||
}
|
||||
|
||||
&.selected {
|
||||
color: $--select-option-selected-font-color;
|
||||
color: map.get($--select-option, 'selected-font-color');
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,25 +2,12 @@
|
||||
|
||||
@import 'mixins/mixins';
|
||||
@import 'mixins/utils';
|
||||
@import 'mixins/var';
|
||||
@import 'common/var';
|
||||
@import 'select';
|
||||
|
||||
:root {
|
||||
--el-pagination-font-size: 13px;
|
||||
--el-pagination-background-color: var(--el-color-white);
|
||||
--el-pagination-font-color: var(--el-text-color-primary);
|
||||
--el-pagination-border-radius: 3px;
|
||||
--el-pagination-button-color: var(--el-text-color-primary);
|
||||
--el-pagination-button-width: 35.5px;
|
||||
--el-pagination-button-height: 28px;
|
||||
--el-pagination-button-disabled-color: var(--el-text-color-placeholder);
|
||||
--el-pagination-button-disabled-background-color: var(--el-color-white);
|
||||
--el-pagination-hover-color: var(--el-color-primary);
|
||||
|
||||
--el-pagination-height-extra-small: 22px;
|
||||
--el-pagination-line-height-extra-small: var(
|
||||
--el-pagination-height-extra-small
|
||||
);
|
||||
@include set-component-css-var('pagination', $--pagination);
|
||||
}
|
||||
|
||||
@include b(pagination) {
|
||||
|
||||
@ -1,16 +1,10 @@
|
||||
@import 'mixins/mixins';
|
||||
@import 'mixins/var';
|
||||
@import 'common/var';
|
||||
@import 'popper';
|
||||
|
||||
:root {
|
||||
--el-popover-background-color: var(--el-color-white);
|
||||
--el-popover-font-size: var(--el-font-size-base);
|
||||
--el-popover-border-color: var(--el-border-color-lighter);
|
||||
--el-popover-padding: 12px;
|
||||
--el-popover-padding-large: 18px 20px;
|
||||
--el-popover-title-font-size: 16px;
|
||||
--el-popover-title-font-color: var(--el-text-color-primary);
|
||||
--el-popover-border-radius: 4px;
|
||||
@include set-component-css-var('popover', $--popover);
|
||||
}
|
||||
|
||||
@include b(popover) {
|
||||
|
||||
@ -74,10 +74,10 @@
|
||||
|
||||
&:checked {
|
||||
& + .#{$namespace}-radio-button__inner {
|
||||
color: $--radio-button-checked-font-color;
|
||||
background-color: $--radio-button-checked-background-color;
|
||||
border-color: $--radio-button-checked-border-color;
|
||||
box-shadow: -1px 0 0 0 $--radio-button-checked-border-color;
|
||||
color: var(--el-radio-button-checked-font-color);
|
||||
background-color: var(--el-radio-button-checked-background-color);
|
||||
border-color: var(--el-radio-button-checked-border-color);
|
||||
box-shadow: -1px 0 0 0 var(--el-radio-button-checked-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
@ -100,7 +100,7 @@
|
||||
box-shadow: none;
|
||||
}
|
||||
&:checked + .#{$namespace}-radio-button__inner {
|
||||
background-color: $--radio-button-disabled-checked-fill;
|
||||
background-color: var(--el-radio-button-disabled-checked-fill);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -133,6 +133,6 @@
|
||||
|
||||
&:focus:not(.is-focus):not(:active):not(.is-disabled) {
|
||||
/*获得焦点时 样式提醒*/
|
||||
box-shadow: 0 0 2px 2px $--radio-button-checked-border-color;
|
||||
box-shadow: 0 0 2px 2px var(--el-radio-button-checked-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,15 +2,17 @@
|
||||
|
||||
@import 'mixins/mixins';
|
||||
@import 'mixins/utils';
|
||||
@import 'mixins/var';
|
||||
@import 'mixins/button';
|
||||
@import 'common/var';
|
||||
|
||||
:root {
|
||||
--el-radio-font-weight: var(--el-font-weight-primary);
|
||||
@include set-component-css-var('radio', $--radio);
|
||||
@include set-component-css-var('radio-button', $--radio-button);
|
||||
}
|
||||
|
||||
@include b(radio) {
|
||||
color: $--radio-font-color;
|
||||
color: VAR(--el-radio-font-color);
|
||||
font-weight: var(--el-radio-font-weight);
|
||||
line-height: 1;
|
||||
position: relative;
|
||||
@ -25,7 +27,7 @@
|
||||
@include when(bordered) {
|
||||
padding: map.get($--radio-bordered-padding, 'default');
|
||||
border-radius: var(--el-border-radius-base);
|
||||
border: $--border-base;
|
||||
border: var(--el-border-base);
|
||||
box-sizing: border-box;
|
||||
height: map.get($--radio-bordered-height, 'default');
|
||||
|
||||
@ -73,13 +75,13 @@
|
||||
|
||||
@include when(disabled) {
|
||||
.#{$namespace}-radio__inner {
|
||||
background-color: $--radio-disabled-input-fill;
|
||||
border-color: $--radio-disabled-input-border-color;
|
||||
background-color: map.get($--radio-disabled, 'input-fill');
|
||||
border-color: map.get($--radio-disabled, 'input-border-color');
|
||||
cursor: not-allowed;
|
||||
|
||||
&::after {
|
||||
cursor: not-allowed;
|
||||
background-color: $--radio-disabled-icon-color;
|
||||
background-color: map.get($--radio-disabled, 'icon-color');
|
||||
}
|
||||
|
||||
& + .#{$namespace}-radio__label {
|
||||
@ -88,11 +90,14 @@
|
||||
}
|
||||
&.is-checked {
|
||||
.#{$namespace}-radio__inner {
|
||||
background-color: $--radio-disabled-checked-input-fill;
|
||||
border-color: $--radio-disabled-checked-input-border-color;
|
||||
background-color: map.get($--radio-disabled, 'checked-input-fill');
|
||||
border-color: map.get(
|
||||
$--radio-disabled,
|
||||
'checked-input-border-color'
|
||||
);
|
||||
|
||||
&::after {
|
||||
background-color: $--radio-disabled-checked-icon-color;
|
||||
background-color: map.get($--radio-disabled, 'checked-icon-color');
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -104,8 +109,8 @@
|
||||
|
||||
@include when(checked) {
|
||||
.#{$namespace}-radio__inner {
|
||||
border-color: $--radio-checked-input-border-color;
|
||||
background: $--radio-checked-icon-color;
|
||||
border-color: map.get($--radio-checked, 'input-border-color');
|
||||
background: map.get($--radio-checked, 'icon-color');
|
||||
|
||||
&::after {
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
@ -113,36 +118,36 @@
|
||||
}
|
||||
|
||||
& + .#{$namespace}-radio__label {
|
||||
color: $--radio-checked-font-color;
|
||||
color: map.get($--radio-checked, 'font-color');
|
||||
}
|
||||
}
|
||||
|
||||
@include when(focus) {
|
||||
.#{$namespace}-radio__inner {
|
||||
border-color: $--radio-input-border-color-hover;
|
||||
border-color: var(--el-radio-input-border-color-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
@include e(inner) {
|
||||
border: $--radio-input-border;
|
||||
border-radius: $--radio-input-border-radius;
|
||||
width: $--radio-input-width;
|
||||
height: $--radio-input-height;
|
||||
background-color: $--radio-input-background-color;
|
||||
border: var(--el-radio-input-border);
|
||||
border-radius: var(--el-radio-input-border-radius);
|
||||
width: var(--el-radio-input-width);
|
||||
height: var(--el-radio-input-height);
|
||||
background-color: var(--el-radio-input-background-color);
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:hover {
|
||||
border-color: $--radio-input-border-color-hover;
|
||||
border-color: var(--el-radio-input-border-color-hover);
|
||||
}
|
||||
|
||||
&::after {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: $--radio-input-border-radius;
|
||||
background-color: $--color-white;
|
||||
border-radius: var(--el-radio-input-border-radius);
|
||||
background-color: var(--el-color-white);
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
@ -167,12 +172,12 @@
|
||||
&:focus:not(.is-focus):not(:active):not(.is-disabled) {
|
||||
/*获得焦点时 样式提醒*/
|
||||
.#{$namespace}-radio__inner {
|
||||
box-shadow: 0 0 2px 2px $--radio-input-border-color-hover;
|
||||
box-shadow: 0 0 2px 2px var(--el-radio-input-border-color-hover);
|
||||
}
|
||||
}
|
||||
|
||||
@include e(label) {
|
||||
font-size: $--radio-font-size;
|
||||
font-size: var(--el-radio-font-size);
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,15 +1,11 @@
|
||||
@import 'mixins/mixins';
|
||||
@import 'mixins/var';
|
||||
@import 'common/var';
|
||||
|
||||
$types: success, warning, danger, info, error;
|
||||
|
||||
:root {
|
||||
--el-result-padding: 40px 30px;
|
||||
--el-result-icon-font-size: 64px;
|
||||
--el-result-title-font-size: 20px;
|
||||
--el-result-title-margin-top: 20px;
|
||||
--el-result-subtitle-margin-top: 10px;
|
||||
--el-result-extra-margin-top: 30px;
|
||||
@include set-component-css-var('result', $--result);
|
||||
|
||||
@each $type in $types {
|
||||
--el-result-#{$type}-color: var(--el-color-#{$type});
|
||||
|
||||
@ -1,11 +1,9 @@
|
||||
@import 'mixins/mixins';
|
||||
@import 'mixins/var';
|
||||
@import 'common/var';
|
||||
|
||||
:root {
|
||||
--el-scrollbar-opacity: 0.3;
|
||||
--el-scrollbar-background-color: var(--el-text-color-secondary);
|
||||
--el-scrollbar-hover-opacity: 0.5;
|
||||
--el-scrollbar-hover-background-color: var(--el-text-color-secondary);
|
||||
@include set-component-css-var('scrollbar', $--scrollbar);
|
||||
}
|
||||
|
||||
@include b(scrollbar) {
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
@use "sass:map";
|
||||
|
||||
@import 'mixins/mixins';
|
||||
@import 'common/var';
|
||||
@import './popper';
|
||||
@ -13,20 +15,20 @@
|
||||
}
|
||||
|
||||
@include b(select-dropdown__empty) {
|
||||
padding: $--select-dropdown-empty-padding;
|
||||
padding: map.get($--select-dropdown, 'empty-padding');
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
color: $--select-dropdown-empty-color;
|
||||
font-size: $--select-font-size;
|
||||
color: map.get($--select-dropdown, 'empty-color');
|
||||
font-size: var(--el-select-font-size);
|
||||
}
|
||||
|
||||
@include b(select-dropdown__wrap) {
|
||||
max-height: $--select-dropdown-max-height;
|
||||
max-height: map.get($--select-dropdown, 'max-height');
|
||||
}
|
||||
|
||||
@include b(select-dropdown__list) {
|
||||
list-style: none;
|
||||
margin: $--select-dropdown-padding;
|
||||
margin: map.get($--select-dropdown, 'padding');
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
@use "sass:map";
|
||||
|
||||
@import 'mixins/mixins';
|
||||
@import 'common/var';
|
||||
@import './popper';
|
||||
@ -9,11 +11,11 @@
|
||||
|
||||
@include when(multiple) {
|
||||
& .#{$namespace}-select-dropdown__item.selected {
|
||||
color: $--select-option-selected-font-color;
|
||||
background-color: $--select-dropdown-background;
|
||||
color: map.get($--select-option, 'selected-font-color');
|
||||
background-color: map.get($--select-dropdown, 'background');
|
||||
|
||||
&.hover {
|
||||
background-color: $--select-option-hover-background;
|
||||
background-color: map.get($--select-option, 'hover-background');
|
||||
}
|
||||
|
||||
&::after {
|
||||
@ -35,20 +37,20 @@
|
||||
}
|
||||
|
||||
@include b(select-dropdown__empty) {
|
||||
padding: $--select-dropdown-empty-padding;
|
||||
padding: map.get($--select-dropdown, 'empty-padding');
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
color: $--select-dropdown-empty-color;
|
||||
font-size: $--select-font-size;
|
||||
color: map.get($--select-dropdown, 'empty-color');
|
||||
font-size: var(--el-select-font-size);
|
||||
}
|
||||
|
||||
@include b(select-dropdown__wrap) {
|
||||
max-height: $--select-dropdown-max-height;
|
||||
max-height: map.get($--select-dropdown, 'max-height');
|
||||
}
|
||||
|
||||
@include b(select-dropdown__list) {
|
||||
list-style: none;
|
||||
padding: $--select-dropdown-padding;
|
||||
padding: map.get($--select-dropdown, 'padding');
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@ -50,16 +50,16 @@ $--input-inline-start: 7px !default;
|
||||
@include when(disabled) {
|
||||
cursor: not-allowed;
|
||||
|
||||
background-color: $--background-color-base;
|
||||
background-color: var(--el-background-color-base);
|
||||
color: var(--el-text-color-placeholder);
|
||||
border-color: $--select-disabled-border;
|
||||
border-color: var(--el-select-disabled-border);
|
||||
|
||||
&:hover {
|
||||
border-color: $--select-disabled-border;
|
||||
border-color: inherit;
|
||||
}
|
||||
|
||||
&.is-focus {
|
||||
border-color: $--select-input-focus-border-color;
|
||||
border-color: var(--el-input-focus-border-color);
|
||||
}
|
||||
|
||||
.is-transparent {
|
||||
@ -111,9 +111,9 @@ $--input-inline-start: 7px !default;
|
||||
|
||||
@include e(popper) {
|
||||
@include picker-popper(
|
||||
$--select-dropdown-background,
|
||||
$--select-dropdown-border,
|
||||
$--select-dropdown-shadow
|
||||
map.get($--select-dropdown, 'background'),
|
||||
map.get($--select-dropdown, 'border'),
|
||||
map.get($--select-dropdown, 'shadow')
|
||||
);
|
||||
}
|
||||
|
||||
@ -140,7 +140,7 @@ $--input-inline-start: 7px !default;
|
||||
|
||||
&:hover {
|
||||
#{$selector}__combobox-input {
|
||||
border-color: $--select-border-color-hover;
|
||||
border-color: var(--el-select-border-color-hover);
|
||||
}
|
||||
}
|
||||
|
||||
@ -156,7 +156,7 @@ $--input-inline-start: 7px !default;
|
||||
display: block;
|
||||
|
||||
&:focus {
|
||||
border-color: $--select-input-focus-border-color;
|
||||
border-color: var(--el-select-input-focus-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
@ -165,8 +165,8 @@ $--input-inline-start: 7px !default;
|
||||
outline: none;
|
||||
padding: 0;
|
||||
margin-left: 15px;
|
||||
color: $--select-multiple-input-color;
|
||||
font-size: $--select-font-size;
|
||||
color: var(--el-select-multiple-input-color);
|
||||
font-size: var(--el-select-font-size);
|
||||
appearance: none;
|
||||
height: 28px;
|
||||
|
||||
@ -181,12 +181,12 @@ $--input-inline-start: 7px !default;
|
||||
top: 8px;
|
||||
z-index: var(--el-index-top);
|
||||
right: 25px;
|
||||
color: $--select-input-color;
|
||||
color: var(--el-select-input-color);
|
||||
line-height: 18px;
|
||||
font-size: $--select-input-font-size;
|
||||
font-size: var(--el-select-input-font-size);
|
||||
|
||||
&:hover {
|
||||
color: $--select-close-hover-color;
|
||||
color: var(--el-select-close-hover-color);
|
||||
}
|
||||
}
|
||||
|
||||
@ -199,8 +199,8 @@ $--input-inline-start: 7px !default;
|
||||
}
|
||||
|
||||
@include e(caret) {
|
||||
color: $--select-input-color;
|
||||
font-size: $--select-input-font-size;
|
||||
color: var(--el-select-input-color);
|
||||
font-size: var(--el-select-input-font-size);
|
||||
transition: transform var(--el-transition-duration);
|
||||
transform: rotateZ(180deg);
|
||||
cursor: pointer;
|
||||
@ -210,15 +210,15 @@ $--input-inline-start: 7px !default;
|
||||
}
|
||||
|
||||
@include when(show-close) {
|
||||
font-size: $--select-font-size;
|
||||
font-size: var(--el-select-font-size);
|
||||
text-align: center;
|
||||
transform: rotateZ(180deg);
|
||||
border-radius: var(--el-border-radius-circle);
|
||||
color: $--select-input-color;
|
||||
color: var(--el-select-input-color);
|
||||
transition: var(--el-color-transition-base);
|
||||
|
||||
&:hover {
|
||||
color: $--select-close-hover-color;
|
||||
color: (--el-select-close-hover-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -263,7 +263,7 @@ $--input-inline-start: 7px !default;
|
||||
transform: translateY(-50%);
|
||||
margin-inline-start: $--input-inline-start;
|
||||
width: calc(100% - 52px);
|
||||
color: $--input-font-color;
|
||||
color: var(--el-input-font-color, map.get($--input, 'font-color'));
|
||||
font-size: inherit;
|
||||
@include when(transparent) {
|
||||
color: var(--el-text-color-placeholder);
|
||||
@ -280,7 +280,7 @@ $--input-inline-start: 7px !default;
|
||||
background-color: var(--el-text-color-placeholder);
|
||||
right: -7px;
|
||||
top: 0;
|
||||
color: $--color-white;
|
||||
color: var(--el-color-white);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--el-text-color-secondary);
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
|
||||
@import 'mixins/mixins';
|
||||
@import 'mixins/utils';
|
||||
@import 'mixins/var';
|
||||
@import 'common/var';
|
||||
@import 'select-dropdown';
|
||||
@import 'input';
|
||||
@ -10,6 +11,10 @@
|
||||
@import 'option-group';
|
||||
@import 'scrollbar';
|
||||
|
||||
:root {
|
||||
@include set-component-css-var('select', $--select);
|
||||
}
|
||||
|
||||
@include b(select) {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
@ -17,9 +22,9 @@
|
||||
|
||||
@include e(popper) {
|
||||
@include picker-popper(
|
||||
$--select-dropdown-background,
|
||||
$--select-dropdown-border,
|
||||
$--select-dropdown-shadow
|
||||
map.get($--select-dropdown, 'background'),
|
||||
map.get($--select-dropdown, 'border'),
|
||||
map.get($--select-dropdown, 'shadow')
|
||||
);
|
||||
}
|
||||
|
||||
@ -35,7 +40,7 @@
|
||||
|
||||
&:hover {
|
||||
.#{$namespace}-input__inner {
|
||||
border-color: $--select-border-color-hover;
|
||||
border-color: var(--el-select-border-color-hover);
|
||||
}
|
||||
}
|
||||
|
||||
@ -52,7 +57,7 @@
|
||||
display: block;
|
||||
|
||||
&:focus {
|
||||
border-color: $--select-input-focus-border-color;
|
||||
border-color: var(--el-select-input-focus-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
@ -60,8 +65,8 @@
|
||||
display: block;
|
||||
|
||||
& .#{$namespace}-select__caret {
|
||||
color: $--select-input-color;
|
||||
font-size: $--select-input-font-size;
|
||||
color: var(--el-select-input-color);
|
||||
font-size: var(--el-select-input-font-size);
|
||||
transition: transform var(--el-transition-duration);
|
||||
transform: rotateZ(180deg);
|
||||
cursor: pointer;
|
||||
@ -71,15 +76,15 @@
|
||||
}
|
||||
|
||||
@include when(show-close) {
|
||||
font-size: $--select-font-size;
|
||||
font-size: var(--el-select-font-size);
|
||||
text-align: center;
|
||||
transform: rotateZ(180deg);
|
||||
border-radius: var(--el-border-radius-circle);
|
||||
color: $--select-input-color;
|
||||
color: var(--el-select-input-color);
|
||||
transition: var(--el-color-transition-base);
|
||||
|
||||
&:hover {
|
||||
color: $--select-close-hover-color;
|
||||
color: var(--el-select-close-hover-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -89,13 +94,13 @@
|
||||
cursor: not-allowed;
|
||||
|
||||
&:hover {
|
||||
border-color: $--select-disabled-border;
|
||||
border-color: var(--el-select-disabled-border);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-focus .#{$namespace}-input__inner {
|
||||
border-color: $--select-input-focus-border-color;
|
||||
border-color: var(--el-select-input-focus-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
@ -104,8 +109,8 @@
|
||||
outline: none;
|
||||
padding: 0;
|
||||
margin-left: 15px;
|
||||
color: $--select-multiple-input-color;
|
||||
font-size: $--select-font-size;
|
||||
color: var(--el-select-multiple-input-color);
|
||||
font-size: var(--el-select-font-size);
|
||||
appearance: none;
|
||||
height: 28px;
|
||||
background-color: transparent;
|
||||
@ -120,12 +125,12 @@
|
||||
top: 8px;
|
||||
z-index: var(--el-index-top);
|
||||
right: 25px;
|
||||
color: $--select-input-color;
|
||||
color: var(--el-select-input-color);
|
||||
line-height: 18px;
|
||||
font-size: $--select-input-font-size;
|
||||
font-size: var(--el-select-input-font-size);
|
||||
|
||||
&:hover {
|
||||
color: $--select-close-hover-color;
|
||||
color: var(--el-select-close-hover-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -210,7 +210,7 @@
|
||||
.#{$namespace}-input-number__increase {
|
||||
top: map.get($--input-height, 'small');
|
||||
margin-top: -1px;
|
||||
border: $--input-border;
|
||||
border: var(--el-input-border, map.get($--input, 'border'));
|
||||
line-height: 20px;
|
||||
box-sizing: border-box;
|
||||
transition: var(--el-border-transition-base);
|
||||
@ -218,11 +218,17 @@
|
||||
.#{$namespace}-input-number__decrease {
|
||||
width: 18px;
|
||||
right: 18px;
|
||||
border-bottom-left-radius: $--input-border-radius;
|
||||
border-bottom-left-radius: var(
|
||||
--el-input-border-radius,
|
||||
map.get($--input, 'border-radius')
|
||||
);
|
||||
}
|
||||
.#{$namespace}-input-number__increase {
|
||||
width: 19px;
|
||||
border-bottom-right-radius: $--input-border-radius;
|
||||
border-bottom-right-radius: var(
|
||||
--el-input-border-radius,
|
||||
map.get($--input, 'border-radius')
|
||||
);
|
||||
& ~ .#{$namespace}-input .#{$namespace}-input__inner {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
@ -231,13 +237,19 @@
|
||||
&:hover {
|
||||
.#{$namespace}-input-number__decrease,
|
||||
.#{$namespace}-input-number__increase {
|
||||
border-color: $--input-hover-border;
|
||||
border-color: var(
|
||||
--el-input-hover-border,
|
||||
map.get($--input, 'hover-border')
|
||||
);
|
||||
}
|
||||
}
|
||||
&:active {
|
||||
.#{$namespace}-input-number__decrease,
|
||||
.#{$namespace}-input-number__increase {
|
||||
border-color: $--input-focus-border;
|
||||
border-color: var(
|
||||
--el-input-focus-border,
|
||||
map.get($--input, 'focus-border')
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,14 +1,11 @@
|
||||
@use "sass:map";
|
||||
|
||||
@import 'mixins/mixins';
|
||||
@import 'mixins/var';
|
||||
@import 'common/var';
|
||||
|
||||
:root {
|
||||
--el-switch-on-color: var(--el-color-primary);
|
||||
--el-switch-off-color: var(--el-border-color-base);
|
||||
--el-switch-font-size: var(--el-font-size-base);
|
||||
--el-switch-core-border-radius: 10px;
|
||||
--el-switch-width: 40px;
|
||||
--el-switch-height: 20px;
|
||||
--el-switch-button-size: 16px;
|
||||
@include set-component-css-var('switch', $--switch);
|
||||
}
|
||||
|
||||
@include b(switch) {
|
||||
|
||||
@ -1,18 +1,12 @@
|
||||
@import 'mixins/mixins';
|
||||
@import 'mixins/var';
|
||||
@import 'checkbox';
|
||||
@import 'tag';
|
||||
@import 'tooltip';
|
||||
@import 'common/var';
|
||||
|
||||
:root {
|
||||
--el-table-border-color: var(--el-border-color-lighter);
|
||||
--el-table-border: 1px solid var(--el-table-border-color);
|
||||
--el-table-font-color: var(--el-text-color-regular);
|
||||
--el-table-header-font-color: var(--el-text-color-secondary);
|
||||
--el-table-row-hover-background-color: var(--el-background-color-base);
|
||||
--el-table-current-row-background-color: var(--el-color-primary-light-9);
|
||||
--el-table-header-background-color: var(--el-color-white);
|
||||
--el-table-fixed-box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
|
||||
@include set-component-css-var('table', $--table);
|
||||
}
|
||||
|
||||
@include b(table) {
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
@use "sass:map";
|
||||
|
||||
@import 'mixins/mixins';
|
||||
@import 'mixins/var';
|
||||
@import 'common/var';
|
||||
|
||||
$types: (primary, success, warning, info, danger);
|
||||
@ -9,21 +10,19 @@ $--tag-color: () !default;
|
||||
|
||||
@each $type in $types {
|
||||
$--tag-color: map.merge(
|
||||
$--tag-color,
|
||||
(
|
||||
$type: map.get($--colors, $type, 'base'),
|
||||
)
|
||||
),
|
||||
$--tag-color
|
||||
) !global;
|
||||
}
|
||||
|
||||
:root {
|
||||
@include set-component-css-var('tag', $--tag);
|
||||
|
||||
@each $type in $types {
|
||||
--el-tag-#{$type}-color: var(--el-color-#{$type});
|
||||
}
|
||||
|
||||
--el-tag-font-size: 12px;
|
||||
--el-tag-border-radius: 4px;
|
||||
--el-tag-padding: 0 10px;
|
||||
}
|
||||
|
||||
@mixin genTheme(
|
||||
|
||||
@ -1,10 +1,9 @@
|
||||
@import 'mixins/mixins';
|
||||
@import 'mixins/var';
|
||||
@import 'common/var';
|
||||
|
||||
:root {
|
||||
--el-timeline-node-size-normal: 12px;
|
||||
--el-timeline-node-size-large: 14px;
|
||||
--el-timeline-node-color: var(--el-border-color-light);
|
||||
@include set-component-css-var('timeline', $--timeline);
|
||||
}
|
||||
|
||||
@include b(timeline-item) {
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
@use "sass:map";
|
||||
|
||||
@import 'mixins/mixins';
|
||||
@import 'mixins/var';
|
||||
@import 'common/var';
|
||||
@import 'popper';
|
||||
|
||||
@ -14,12 +15,7 @@ $positionMap: (
|
||||
);
|
||||
|
||||
:root {
|
||||
--el-tooltip-fill: var(--el-text-color-primary);
|
||||
--el-tooltip-color: var(--el-color-white);
|
||||
--el-tooltip-font-size: 12px;
|
||||
--el-tooltip-border-color: var(--el-text-color-primary);
|
||||
--el-tooltip-arrow-size: 6px;
|
||||
--el-tooltip-padding: 10px;
|
||||
@include set-component-css-var('tooltip', $--tooltip);
|
||||
}
|
||||
|
||||
@include b(tooltip) {
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
@use "sass:math";
|
||||
@use "sass:map";
|
||||
|
||||
@import 'mixins/mixins';
|
||||
@import 'mixins/utils';
|
||||
@ -9,15 +10,7 @@
|
||||
@import 'checkbox-group';
|
||||
|
||||
:root {
|
||||
--el-transfer-border-color: var(--el-border-color-lighter);
|
||||
--el-transfer-border-radius: var(--el-border-radius-base);
|
||||
--el-transfer-panel-width: 200px;
|
||||
--el-transfer-panel-header-height: 40px;
|
||||
--el-transfer-panel-header-background-color: var(--el-background-color-base);
|
||||
--el-transfer-panel-footer-height: 40px;
|
||||
--el-transfer-panel-body-height: 246px;
|
||||
--el-transfer-item-height: 30px;
|
||||
--el-transfer-filter-height: 32px;
|
||||
@include set-component-css-var('transfer', $--transfer);
|
||||
}
|
||||
|
||||
@include b(transfer) {
|
||||
|
||||
@ -1,12 +1,11 @@
|
||||
@import 'mixins/mixins';
|
||||
@import 'mixins/var';
|
||||
@import 'common/var';
|
||||
@import 'common/transition';
|
||||
@import 'checkbox';
|
||||
|
||||
:root {
|
||||
--el-tree-node-hover-background-color: var(--el-background-color-base);
|
||||
--el-tree-font-color: var(--el-text-color-regular);
|
||||
--el-tree-expand-icon-color: var(--el-text-color-placeholder);
|
||||
@include set-component-css-var('tree', $--tree);
|
||||
}
|
||||
|
||||
@include b(tree) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user