mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2025-01-12 10:45:10 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(style): migrate checkbox css3 var (#2493)

Browse Source
This commit is contained in:
云游君 2021-07-12 09:27:49 +08:00 committed by GitHub
parent d49a0e13df
commit 5faa7ec530
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 101 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

153
packages/theme-chalk/src/checkbox.scss
View File

@ -3,10 +3,54 @@
@import "mixins/_button";
@import "mixins/utils";
:root {
--el-checkbox-font-size: 14px;
--el-checkbox-font-weight: var(--el-font-weight-primary);
--el-checkbox-font-color: var(--el-color-text-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-color-text-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-color-text-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-bordered-padding: 9px 20px 9px 10px;
--el-checkbox-bordered-medium-padding: 7px 20px 7px 10px;
--el-checkbox-bordered-small-padding: 5px 15px 5px 10px;
--el-checkbox-bordered-mini-padding: 3px 15px 3px 10px;
--el-checkbox-bordered-medium-input-height: 14px;
--el-checkbox-bordered-medium-input-width: 14px;
--el-checkbox-bordered-medium-height: 36px;
--el-checkbox-bordered-small-input-height: 12px;
--el-checkbox-bordered-small-input-width: 12px;
--el-checkbox-bordered-small-height: 32px;
--el-checkbox-bordered-mini-input-height: 12px;
--el-checkbox-bordered-mini-input-width: 12px;
--el-checkbox-bordered-mini-height: 28px;
--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 b(checkbox) {
color: $--checkbox-font-color;
font-weight: $--checkbox-font-weight;
font-size: $--font-size-base;
color: var(--el-checkbox-font-color);
font-weight: var(--el-checkbox-font-weight);
font-size: var(--el-font-size-base);
position: relative;
cursor: pointer;
display: inline-block;
@ -15,19 +59,19 @@
margin-right: 30px;
@include when(bordered) {
padding: $--checkbox-bordered-padding;
border-radius: $--border-radius-base;
border: $--border-base;
padding: var(--el-checkbox-bordered-padding);
border-radius: var(--el-border-radius-base);
border: var(--el-border-base);
box-sizing: border-box;
line-height: normal;
height: $--checkbox-bordered-height;
height: var(--el-checkbox-bordered-height);
&.is-checked {
border-color: $--color-primary;
border-color: var(--el-color-primary);
}
&.is-disabled {
border-color: $--border-color-lighter;
border-color: var(--el-border-color-lighter);
cursor: not-allowed;
}
@ -36,9 +80,9 @@
}
&.#{$namespace}-checkbox--medium {
padding: $--checkbox-bordered-medium-padding;
padding: var(--el-checkbox-bordered-medium-padding);
border-radius: $--button-medium-border-radius;
height: $--checkbox-bordered-medium-height;
height: var(--el-checkbox-bordered-medium-height);
.#{$namespace}-checkbox__label {
line-height: 17px;
@ -46,15 +90,15 @@
}
.#{$namespace}-checkbox__inner {
height: $--checkbox-bordered-medium-input-height;
width: $--checkbox-bordered-medium-input-width;
height: var(--el-checkbox-bordered-medium-input-height);
width: var(--el-checkbox-bordered-medium-input-width);
}
}
&.#{$namespace}-checkbox--small {
padding: $--checkbox-bordered-small-padding;
padding: var(--el-checkbox-bordered-small-padding);
border-radius: $--button-small-border-radius;
height: $--checkbox-bordered-small-height;
height: var(--el-checkbox-bordered-small-height);
.#{$namespace}-checkbox__label {
line-height: 15px;
@ -62,8 +106,8 @@
}
.#{$namespace}-checkbox__inner {
height: $--checkbox-bordered-small-input-height;
width: $--checkbox-bordered-small-input-width;
height: var(--el-checkbox-bordered-small-input-height);
width: var(--el-checkbox-bordered-small-input-width);
&::after {
height: 6px;
@ -73,9 +117,9 @@
}
&.#{$namespace}-checkbox--mini {
padding: $--checkbox-bordered-mini-padding;
padding: var(--el-checkbox-bordered-mini-padding);
border-radius: $--button-mini-border-radius;
height: $--checkbox-bordered-mini-height;
height: var(--el-checkbox-bordered-mini-height);
.#{$namespace}-checkbox__label {
line-height: 12px;
@ -83,8 +127,8 @@
}
.#{$namespace}-checkbox__inner {
height: $--checkbox-bordered-mini-input-height;
width: $--checkbox-bordered-mini-input-width;
height: var(--el-checkbox-bordered-mini-input-height);
width: var(--el-checkbox-bordered-mini-input-width);
&::after {
height: 6px;
width: 2px;
@ -104,13 +148,13 @@
@include when(disabled) {
.#{$namespace}-checkbox__inner {
background-color: $--checkbox-disabled-input-fill;
border-color: $--checkbox-disabled-border-color;
background-color: var(--el-checkbox-disabled-input-fill);
border-color: var(--el-checkbox-disabled-border-color);
cursor: not-allowed;
&::after {
cursor: not-allowed;
border-color: $--checkbox-disabled-icon-color;
border-color: var(--el-checkbox-disabled-icon-color);
}
& + .#{$namespace}-checkbox__label {
@ -120,23 +164,23 @@
&.is-checked {
.#{$namespace}-checkbox__inner {
background-color: $--checkbox-disabled-checked-input-fill;
border-color: $--checkbox-disabled-checked-input-border-color;
background-color: var(--el-checkbox-disabled-checked-input-fill);
border-color: var(--el-checkbox-disabled-checked-input-border-color);
&::after {
border-color: $--checkbox-disabled-checked-icon-color;
border-color: var(--el-checkbox-disabled-checked-icon-color);
}
}
}
&.is-indeterminate {
.#{$namespace}-checkbox__inner {
background-color: $--checkbox-disabled-checked-input-fill;
border-color: $--checkbox-disabled-checked-input-border-color;
background-color: var(--el-checkbox-disabled-checked-input-fill);
border-color: var(--el-checkbox-disabled-checked-input-border-color);
&::before {
background-color: $--checkbox-disabled-checked-icon-color;
border-color: $--checkbox-disabled-checked-icon-color;
background-color: var(--el-checkbox-disabled-checked-icon-color);
border-color: var(--el-checkbox-disabled-checked-icon-color);
}
}
}
@ -149,8 +193,8 @@
@include when(checked) {
.#{$namespace}-checkbox__inner {
background-color: $--checkbox-checked-background-color;
border-color: $--checkbox-checked-input-border-color;
background-color: var(--el-checkbox-checked-background-color);
border-color: var(--el-checkbox-checked-input-border-color);
&::after {
transform: rotate(45deg) scaleY(1);
@ -158,24 +202,24 @@
}
& + .#{$namespace}-checkbox__label {
color: $--checkbox-checked-font-color;
color: var(--el-checkbox-checked-font-color);
}
}
@include when(focus) { /*focus时 视觉上区分*/
.#{$namespace}-checkbox__inner {
border-color: $--checkbox-input-border-color-hover;
border-color: var(--el-checkbox-input-border-color-hover);
}
}
@include when(indeterminate) {
.#{$namespace}-checkbox__inner {
background-color: $--checkbox-checked-background-color;
border-color: $--checkbox-checked-input-border-color;
background-color: var(--el-checkbox-checked-background-color);
border-color: var(--el-checkbox-checked-input-border-color);
&::before {
content: '';
position: absolute;
display: block;
background-color: $--checkbox-checked-icon-color;
background-color: var(--el-checkbox-checked-icon-color);
height: 2px;
transform: scale(0.5);
left: 0;
@ -192,24 +236,24 @@
@include e(inner) {
display: inline-block;
position: relative;
border: $--checkbox-input-border;
border-radius: $--checkbox-border-radius;
border: var(--el-checkbox-input-border);
border-radius: var(--el-checkbox-border-radius);
box-sizing: border-box;
width: $--checkbox-input-width;
height: $--checkbox-input-height;
background-color: $--checkbox-background-color;
width: var(--el-checkbox-input-width);
height: var(--el-checkbox-input-height);
background-color: var(--el-checkbox-background-color);
z-index: var(--el-index-normal);
transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46),
background-color .25s cubic-bezier(.71,-.46,.29,1.46);
&:hover {
border-color: $--checkbox-input-border-color-hover;
border-color: var(--el-checkbox-input-border-color-hover);
}
&::after {
box-sizing: content-box;
content: "";
border: 1px solid $--checkbox-checked-icon-color;
border: 1px solid var(--el-checkbox-checked-icon-color);
border-left: 0;
border-top: 0;
height: 7px;
@ -237,7 +281,7 @@
display: inline-block;
padding-left: 10px;
line-height: 19px;
font-size: $--checkbox-font-size;
font-size: var(--el-checkbox-font-size);
}
&:last-of-type {
@ -252,7 +296,7 @@
@include e(inner) {
display: inline-block;
line-height: 1;
font-weight: $--checkbox-font-weight;
font-weight: var(--el-checkbox-font-weight);
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
@ -272,7 +316,7 @@
@include button-size($--button-padding-vertical, $--button-padding-horizontal, $--button-font-size, 0);
&:hover {
color: $--color-primary;
color: var(--el-color-primary);
}
& [class*="#{$namespace}-icon-"] {
@ -294,13 +338,13 @@
&.is-checked {
& .#{$namespace}-checkbox-button__inner {
color: $--checkbox-button-checked-font-color;
background-color: $--checkbox-button-checked-background-color;
border-color: $--checkbox-button-checked-border-color;
box-shadow: -1px 0 0 0 $--color-primary-light-4;
color: var(--el-checkbox-button-checked-font-color);
background-color: var(--el-checkbox-button-checked-background-color);
border-color: var(--el-checkbox-button-checked-border-color);
box-shadow: -1px 0 0 0 var(--el-color-primary-light-4);
}
&:first-child .#{$namespace}-checkbox-button__inner {
border-left-color: $--checkbox-button-checked-border-color;
border-left-color: var(--el-checkbox-button-checked-border-color);
}
}
@ -328,7 +372,7 @@
&.is-focus {
& .#{$namespace}-checkbox-button__inner {
border-color: $--checkbox-button-checked-border-color;
border-color: var(--el-checkbox-button-checked-border-color);
}
}
@ -337,6 +381,7 @@
border-radius: 0 $--border-radius-base $--border-radius-base 0;
}
}
@include m(medium) {
.#{$namespace}-checkbox-button__inner {
@include button-size($--button-medium-padding-vertical, $--button-medium-padding-horizontal, $--button-medium-font-size, 0);

62
packages/theme-chalk/src/common/var.scss
View File

@ -132,67 +132,9 @@ $--disabled-border-base: $--border-color-light !default;
/* Checkbox
-------------------------- */
/// fontSize||Font|1
$--checkbox-font-size: 14px !default;
/// fontWeight||Font|1
$--checkbox-font-weight: $--font-weight-primary !default;
/// color||Color|0
$--checkbox-font-color: $--color-text-regular !default;
$--checkbox-input-height: 14px !default;
$--checkbox-input-width: 14px !default;
/// borderRadius||Border|2
$--checkbox-border-radius: $--border-radius-small !default;
/// color||Color|0
$--checkbox-background-color: $--color-white !default;
$--checkbox-input-border: $--border-base !default;
/// color||Color|0
$--checkbox-disabled-border-color: $--border-color-base !default;
$--checkbox-disabled-input-fill: #edf2fc !default;
$--checkbox-disabled-icon-color: $--color-text-placeholder !default;
$--checkbox-disabled-checked-input-fill: $--border-color-extra-light !default;
$--checkbox-disabled-checked-input-border-color: $--border-color-base !default;
$--checkbox-disabled-checked-icon-color: $--color-text-placeholder !default;
/// color||Color|0
$--checkbox-checked-font-color: $--color-primary !default;
$--checkbox-checked-input-border-color: $--color-primary !default;
/// color||Color|0
$--checkbox-checked-background-color: $--color-primary !default;
$--checkbox-checked-icon-color: $--fill-base !default;
$--checkbox-input-border-color-hover: $--color-primary !default;
/// height||Other|4
$--checkbox-bordered-height: 40px !default;
/// padding||Spacing|3
$--checkbox-bordered-padding: 9px 20px 9px 10px !default;
/// padding||Spacing|3
$--checkbox-bordered-medium-padding: 7px 20px 7px 10px !default;
/// padding||Spacing|3
$--checkbox-bordered-small-padding: 5px 15px 5px 10px !default;
/// padding||Spacing|3
$--checkbox-bordered-mini-padding: 3px 15px 3px 10px !default;
$--checkbox-bordered-medium-input-height: 14px !default;
$--checkbox-bordered-medium-input-width: 14px !default;
/// height||Other|4
$--checkbox-bordered-medium-height: 36px !default;
$--checkbox-bordered-small-input-height: 12px !default;
$--checkbox-bordered-small-input-width: 12px !default;
/// height||Other|4
$--checkbox-bordered-small-height: 32px !default;
$--checkbox-bordered-mini-input-height: 12px !default;
$--checkbox-bordered-mini-input-width: 12px !default;
/// height||Other|4
$--checkbox-bordered-mini-height: 28px !default;
/// color||Color|0
$--checkbox-button-checked-background-color: $--color-primary !default;
/// color||Color|0
$--checkbox-button-checked-font-color: $--color-white !default;
/// color||Color|0
$--checkbox-button-checked-border-color: $--color-primary !default;
// Checkbox
// See packages/theme-chalk/src/checkbox.scss
/* Radio
-------------------------- */