mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2024-12-15 04:42:23 +08:00
Code Issues Packages Projects Releases Wiki Activity

style: rename some vars

Browse Source
This commit is contained in:
07akioni 2020-02-19 15:38:44 +08:00
parent 271f37e37a
commit 14d4028623
27 changed files with 60 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
styles/BaseSelectMenu.scss
View File

@ -97,7 +97,7 @@
}
}
@include e(action) {
border-top: 1px solid $--n-alpha-divider-color;
border-top: 1px solid $--n-divider-color;
color: $--n-secondary-text-color;
}
@include m(multiple) {

2
styles/Drawer.scss
View File

@ -29,7 +29,7 @@
padding: 16px 24px;
position: absolute;
pointer-events: all;
background-color: $--n-dialog-color;
background-color: $--n-modal-color;
color: $--n-secondary-text-color;
transition: background-color .3s $--n-ease-in-out-cubic-bezier, color .3s $--n-ease-in-out-cubic-bezier;
}

2
styles/Log.scss
View File

@ -39,7 +39,7 @@
height: 34px;
border-radius: 17px;
color: $--n-secondary-text-color;
background-color: $--n-dialog-color;
background-color: $--n-modal-color;
line-height: 34px;
font-family: $--n-font-family;
white-space: nowrap;

2
styles/Modal.scss
View File

@ -3,7 +3,7 @@
@include themes-mixin {
@include b(modal-content) {
@include b(card) {
background-color: $--n-dialog-color;
background-color: $--n-modal-color;
}
@include once {
@include b(confirm) {

2
styles/Typography.scss
View File

@ -180,7 +180,7 @@ $--header-bar-width: (
border-radius: 3px;
font-size: .9em;
background-color: $--typography-code-background-color;
border: 1px solid $--n-alpha-border-color;
border: 1px solid $--n-border-color;
}
@include m(primary-depth) {
color: $--n-primary-text-color;

2
styles/Upload.scss
View File

@ -28,7 +28,7 @@
background-color: $--n-action-panel-color;
text-align: center;
border-radius: 6px;
border: 1px dashed $--n-alpha-border-color;
border: 1px dashed $--n-border-color;
padding: 24px;
transition: border-color .3s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier;
&:hover {

2
styles/themes/dark/components/Card.scss
View File

@ -2,7 +2,7 @@
$--card-background-color: $--n-card-color !global;
$--card-text-color: $--n-secondary-text-color !global;
$--card-title-text-color: $--n-primary-text-color !global;
$--card-border-color: $--n-alpha-divider-color !global;
$--card-border-color: $--n-divider-color !global;
$--card-action-background-color: $--n-action-panel-color !global;
$--card-close-fill: $--n-close-color !global;
}

6
styles/themes/dark/components/Cascader.scss
View File

@ -1,5 +1,5 @@
@mixin setup-dark-cascader {
$--cascader-menu-background-color: $--n-dialog-color !global;
$--cascader-menu-background-color: $--n-modal-color !global;
$--cascader-option-text-color: (
'default': $--n-secondary-text-color,
'active': $--n-primary-color,
@ -8,9 +8,9 @@
) !global;
$--cascader-menu-box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.18) !global;
$--cascader-menu-border-color: rgba(255, 255, 255, 0.1) !global;
$--cascader-menu-lightbar-background-color: mix($--primary-6, $--n-dialog-color, 20%) !global;
$--cascader-menu-lightbar-background-color: mix($--primary-6, $--n-modal-color, 20%) !global;
$--cascader-option-arrow-background-color: rgba(255, 255, 255, 0.3) !global;
$--cascader-menu-mask-background-color: change-color($--n-dialog-color, $alpha: .75) !global;
$--cascader-menu-mask-background-color: change-color($--n-modal-color, $alpha: .75) !global;
$--cascader-menu-mask-text-color: $--n-secondary-text-color !global;
$--cascader-item-check-mark-color: $--n-primary-color !global;
}

2
styles/themes/dark/components/CheckBox.scss
View File

@ -9,7 +9,7 @@
'disabled': rgba(255, 255, 255, 0.16)
) !global;
$--checkbox-disabled: $border-color !global;
$--checkbox-icon-fill: $--n-background-color !global;
$--checkbox-icon-fill: $--n-body-color !global;
$--checkbox-label-text-color: (
'default': $--n-secondary-text-color,
'disabled': $--n-disabled-text-color

4
styles/themes/dark/components/DatePicker.scss
View File

@ -5,12 +5,12 @@
$--date-picker-item-text-color: (
'inactive': $--n-disabled-text-color,
'default': $--n-secondary-text-color,
'active': $--n-dialog-color,
'active': $--n-modal-color,
'current': $--primary-6
) !global;
$--date-picker-item-sup-color: (
'default': $--primary-6,
'active': $--n-dialog-color
'active': $--n-modal-color
) !global;
$--date-picker-month-text-color: $--n-primary-text-color !global;
$--date-picker-item-background-color: (

2
styles/themes/dark/components/Descriptions.scss
View File

@ -3,5 +3,5 @@
$--descriptions-header-text-color: $--n-primary-text-color !global;
$--descriptions-content-text-color: $--n-secondary-text-color !global;
$--descriptions-content-background-color: $--n-card-color !global;
$--descriptions-border-color: $--n-alpha-border-color !global;
$--descriptions-border-color: $--n-border-color !global;
}

2
styles/themes/dark/components/Divider.scss
View File

@ -1,4 +1,4 @@
@mixin setup-dark-divider {
$--divider-text-color: $--n-primary-text-color !global;
$--divider-border-color: $--n-alpha-divider-color !global;
$--divider-border-color: $--n-divider-color !global;
}

2
styles/themes/dark/components/Layout.scss
View File

@ -1,6 +1,6 @@
@mixin setup-dark-layout {
$--layout-text-color: $--n-secondary-text-color !global;
$--layout-background-color: $--n-background-color !global;
$--layout-background-color: $--n-body-color !global;
$--layout-header-background-color: $--n-card-color !global;
$--layout-header-border-color: $--n-divider-color !global;
$--layout-footer-border-color: $--n-divider-color !global;

2
styles/themes/dark/components/Modal.scss
View File

@ -1,4 +1,4 @@
@mixin setup-dark-modal {
$--modal-background-color: $--n-dialog-color !global;
$--modal-background-color: $--n-modal-color !global;
$--modal-text-color: $--n-secondary-text-color !global;
}

2
styles/themes/dark/components/Slider.scss
View File

@ -14,7 +14,7 @@
'active': (inset 0 0 0 2px $--primary-6, 0 0 0 3px change-color($--primary-6, $alpha: .2)),
'focus': (inset 0 0 0 2px $--primary-6, 0 0 0 3px change-color($--primary-6, $alpha: .2))
) !global;
$--slider-indicator-background-color: $--n-dialog-color !global;
$--slider-indicator-background-color: $--n-modal-color !global;
$--slider-indicator-box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.18) !global;
$--slider-indicator-color: $--n-secondary-text-color !global;
$--slider-dot-box-shadow: (

2
styles/themes/dark/components/Tabs.scss
View File

@ -20,6 +20,6 @@
'default': $--n-secondary-text-color,
'active': $--n-primary-text-color
) !global;
$--tabs-nav-border-color: $--n-alpha-divider-color !global;
$--tabs-nav-border-color: $--n-divider-color !global;
$--tabs-panel-text-color: $--n-secondary-text-color !global;
}

23
styles/themes/dark/index.scss
View File

@ -59,6 +59,7 @@
@mixin setup-dark-theme($in-js-env: false) {
@include setup-dark-colors();
$--n-default-color: $--primary-6 !global;
$--n-primary-color: $--primary-6 !global;
$--n-info-color: $--info-6 !global;
$--n-success-color: $--success-6 !global;
@ -71,20 +72,18 @@
$--n-disabled-text-color: $--text-4 !global;
$--n-action-panel-color: $--overlay-action !global;
$--n-table-header-color: $--overlay-action !global;
$--n-close-color: $--text-3 !global;
$--n-popover-color: $--neutral-1 !global;
$--n-divider-color: $--neutral-6 !global;
$--n-alpha-divider-color: $--overlay-6 !global;
$--n-border-color: $--neutral-7 !global;
$--n-alpha-border-color: $--overlay-7 !global;
$--n-table-header-color: $--neutral-8 !global;
$--n-alpha-table-header-color: $--overlay-8 !global;
$--n-table-body-color: $--neutral-9 !global;
$--n-card-color: $--neutral-9 !global;
$--n-dialog-color: $--neutral-3 !global;
$--n-background-color: $--neutral-10 !global;
$--n-alpha-input-color: rgba(255, 255, 255, .12) !global;
$--n-divider-color: $--overlay-divider !global;
$--n-border-color: $--overlay-border !global;
$--n-popover-color: $--neutral-popover !global;
$--n-table-body-color: $--neutral-card !global;
$--n-card-color: $--neutral-card !global;
$--n-modal-color: $--neutral-modal !global;
$--n-body-color: $--neutral-body !global;
@if ($in-js-env != true) {
@include setup-dark-divider;
@include setup-dark-scrollbar;

20
styles/themes/light/components/Button.scss
View File

@ -77,15 +77,11 @@
$button-ghost-hover-alpha: .1;
$button-ghost-active-alpha: .15;
$button-ghost-focus-alpha: .1;
$button-ghost-weight: percentage(red($--n-border-color) / (255 - red($--n-border-color)) * $button-ghost-alpha);
$button-ghost-hover-weight: percentage(red($--n-border-color) / (255 - red($--n-border-color)) * $button-ghost-hover-alpha);
$button-ghost-active-weight: percentage(red($--n-border-color) / (255 - red($--n-border-color)) * $button-ghost-active-alpha);
$button-ghost-focus-weight: percentage(red($--n-border-color) / (255 - red($--n-border-color)) * $button-ghost-focus-alpha);
$--button-background-color: (
"default": mix($--n-border-color, white, $button-ghost-weight),
"default-focus": mix($--n-border-color, white, $button-ghost-focus-weight),
"default-hover": mix($--n-border-color, white, $button-ghost-hover-weight),
"default-active": mix($--n-border-color, white, $button-ghost-active-weight),
"default": mix($--n-default-color, white, 0),
"default-focus": mix($--n-default-color, white, 8%),
"default-hover": mix($--n-default-color, white, 8%),
"default-active": mix($--n-default-color, white, 12%),
"primary": $--primary-6,
"primary-focus": $--primary-5,
"primary-hover": $--primary-5,
@ -108,10 +104,10 @@
"error-active": $--error-7,
) !global;
$--ghost-button-background-color: (
"default": change-color($--n-secondary-text-color, $alpha: $button-ghost-alpha),
"default-focus": change-color($--n-secondary-text-color, $alpha: $button-ghost-focus-alpha),
"default-hover": change-color($--n-secondary-text-color, $alpha: $button-ghost-hover-alpha),
"default-active": change-color($--n-secondary-text-color, $alpha: $button-ghost-active-alpha),
"default": change-color($--n-secondary-text-color, $alpha: 0),
"default-focus": change-color($--n-secondary-text-color, $alpha: .08),
"default-hover": change-color($--n-secondary-text-color, $alpha: .08),
"default-active": change-color($--n-secondary-text-color, $alpha: .12),
"primary": change-color($--primary-6, $alpha: $button-ghost-alpha),
"primary-focus": change-color($--primary-6, $alpha: $button-ghost-focus-alpha),
"primary-hover": change-color($--primary-6, $alpha: $button-ghost-hover-alpha),

2
styles/themes/light/components/Card.scss
View File

@ -2,7 +2,7 @@
$--card-background-color: $--n-card-color !global;
$--card-text-color: $--n-secondary-text-color !global;
$--card-title-text-color: $--n-primary-text-color !global;
$--card-border-color: $--n-alpha-divider-color !global;
$--card-border-color: $--n-divider-color !global;
$--card-action-background-color: $--n-table-header-color !global;
$--card-close-fill: $--n-close-color !global;
}

6
styles/themes/light/components/Cascader.scss
View File

@ -1,5 +1,5 @@
@mixin setup-light-cascader {
$--cascader-menu-background-color: $--n-dialog-color !global;
$--cascader-menu-background-color: $--n-modal-color !global;
$--cascader-option-text-color: (
'default': $--n-secondary-text-color,
'active': $--n-primary-color,
@ -8,9 +8,9 @@
) !global;
$--cascader-menu-box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.18) !global;
$--cascader-menu-border-color: $--n-divider-color !global;
$--cascader-menu-lightbar-background-color: mix($--n-primary-color, $--n-dialog-color, 15%) !global;
$--cascader-menu-lightbar-background-color: mix($--n-primary-color, $--n-modal-color, 15%) !global;
$--cascader-option-arrow-background-color: rgba(0, 0, 0, 0.2) !global;
$--cascader-menu-mask-background-color: change-color($--n-dialog-color, $alpha: .75) !global;
$--cascader-menu-mask-background-color: change-color($--n-modal-color, $alpha: .75) !global;
$--cascader-menu-mask-text-color: $--n-secondary-text-color !global;
$--cascader-item-check-mark-color: $--n-primary-color !global;
}

2
styles/themes/light/components/DatePicker.scss
View File

@ -5,7 +5,7 @@
$--date-picker-item-text-color: (
'inactive': $--n-disabled-text-color,
'default': $--n-secondary-text-color,
'active': $--n-dialog-color,
'active': $--n-modal-color,
'current': $--primary-6
) !global;
$--date-picker-item-sup-color: (

2
styles/themes/light/components/Descriptions.scss
View File

@ -3,5 +3,5 @@
$--descriptions-header-text-color: $--n-primary-text-color !global;
$--descriptions-content-text-color: $--n-secondary-text-color !global;
$--descriptions-content-background-color: $--n-card-color !global;
$--descriptions-border-color: $--n-alpha-border-color !global;
$--descriptions-border-color: $--n-border-color !global;
}

2
styles/themes/light/components/Modal.scss
View File

@ -1,4 +1,4 @@
@mixin setup-light-modal {
$--modal-background-color: $--n-dialog-color !global;
$--modal-background-color: $--n-modal-color !global;
$--modal-text-color: $--n-secondary-text-color !global;
}

4
styles/themes/light/components/Table.scss
View File

@ -1,9 +1,9 @@
@mixin setup-light-table {
$--table-header-background-color: $--n-background-color !global;
$--table-header-background-color: $--n-body-color !global;
$--table-body-background-color: $--n-card-color !global;
$--table-header-text-color: $--text-1 !global;
$--table-body-text-color: $--text-2 !global;
$--table-row-hover: $--n-background-color !global;
$--table-row-hover: $--n-body-color !global;
$--table-border: 1px solid $--n-divider-color !global;
$--table-td-border-right: 1px solid $--n-divider-color !global;
$--data-table-border-color: $--n-divider-color !global;

2
styles/themes/light/components/Tabs.scss
View File

@ -19,6 +19,6 @@
'default': $--n-secondary-text-color,
'active': $--n-primary-text-color
) !global;
$--tabs-nav-border-color: $--n-alpha-divider-color !global;
$--tabs-nav-border-color: $--n-divider-color !global;
$--tabs-panel-text-color: $--n-secondary-text-color !global;
}

2
styles/themes/light/components/TimePicker.scss
View File

@ -1,5 +1,5 @@
@mixin setup-light-time-picker {
$--time-picker-background-color: $--n-dialog-color !global;
$--time-picker-background-color: $--n-modal-color !global;
$--time-picker-text-color: (
'default': $--n-secondary-text-color,
'active': $--n-primary-color

22
styles/themes/light/index.scss
View File

@ -59,6 +59,7 @@
@mixin setup-light-theme($in-js-env: false) {
@include setup-light-colors();
$--n-default-color: black !global;
$--n-primary-color: $--primary-6 !global;
$--n-info-color: $--info-6 !global;
$--n-success-color: $--success-6 !global;
@ -71,19 +72,18 @@
$--n-disabled-text-color: $--text-4 !global;
$--n-action-panel-color: $--overlay-action !global;
$--n-table-header-color: $--overlay-action !global;
$--n-close-color: $--text-3 !global;
$--n-divider-color: $--neutral-7 !global;
$--n-alpha-divider-color: $--overlay-7 !global;
$--n-border-color: $--neutral-6 !global;
$--n-alpha-border-color: $--overlay-6 !global;
$--n-popover-color: $--neutral-10 !global;
$--n-table-header-color: $--neutral-9 !global;
$--n-card-color: $--neutral-10 !global;
$--n-dialog-color: $--neutral-10 !global;
$--n-table-body-color: $--neutral-10 !global;
$--n-background-color: $--neutral-9 !global;
$--n-alpha-input-color: rgba(0, 0, 0, .04) !global;
$--n-divider-color: $--overlay-divider !global;
$--n-border-color: $--overlay-border !global;
$--n-popover-color: $--neutral-popover !global;
$--n-table-body-color: $--neutral-card !global;
$--n-card-color: $--neutral-card !global;
$--n-modal-color: $--neutral-modal !global;
$--n-body-color: $--neutral-body !global;
@if ($in-js-env != true) {
@include setup-light-divider;
@include setup-light-scrollbar;