test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-04 20:27:44 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

feat(style): use css3 var refactor base variable (#2478)

Browse Source 
* feat: add basic css3 var

* feat(style): migrate base style z-index
This commit is contained in:
云游君 2021-07-10 20:49:06 +08:00 committed by GitHub
parent f44211da86
commit 7dc55a7576
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
20 changed files with 116 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/theme-chalk/src/base.scss
View File

@ -1,2 +1,3 @@
@import "common/transition.scss";
@import "icon.scss";
@import "var.scss";

10
packages/theme-chalk/src/carousel-item.scss
View File

@ -10,10 +10,10 @@
height: 100%;
display: inline-block;
overflow: hidden;
z-index: #{$--index-normal - 1};
z-index: calc(var(--el-index-normal) - 1);
@include when(active) {
z-index: #{$--index-normal + 1};
z-index: calc(var(--el-index-normal) - 1);
}
@include when(animating) {
@ -25,14 +25,14 @@
transition: transform .4s ease-in-out;
&.is-in-stage {
cursor: pointer;
z-index: $--index-normal;
z-index: var(--el-index-normal);
&:hover .#{$namespace}-carousel__mask,
&.is-hover .#{$namespace}-carousel__mask {
opacity: 0.12;
}
}
&.is-active {
z-index: #{$--index-normal + 1};
z-index: calc(var(--el-index-normal) + 1);
}
}
}
@ -47,4 +47,4 @@
opacity: 0.24;
transition: .2s;
}
}
}

2
packages/theme-chalk/src/carousel.scss
View File

@ -60,7 +60,7 @@
list-style: none;
margin: 0;
padding: 0;
z-index: #{$--index-normal + 1};
z-index: calc(var(--el-index-normal) + 1);
@include m(horizontal) {
bottom: 0;

2
packages/theme-chalk/src/cascader.scss
View File

@ -67,7 +67,7 @@
@include when(disabled) {
.#{$namespace}-cascader__label {
z-index: #{$--index-normal + 1};
z-index: calc(var(--el-index-normal) + 1);
color: $--disabled-color-base;
}
}

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

@ -198,7 +198,7 @@
width: $--checkbox-input-width;
height: $--checkbox-input-height;
background-color: $--checkbox-background-color;
z-index: $--index-normal;
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);

2
packages/theme-chalk/src/collapse.scss
View File

@ -9,7 +9,7 @@
@include b(collapse-item) {
@include when(disabled) {
.#{$namespace}-collapse-item__header {
color: $--font-color-disabled-base;
color: var(--el-font-color-disabled-base);
cursor: not-allowed;
}
}

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

@ -123,13 +123,6 @@ $--font-size-extra-small: 12px !default;
$--font-weight-primary: 500 !default;
/// fontLineHeight|1|Line Height|2
$--font-line-height-primary: 24px !default;
$--font-color-disabled-base: #bbb !default;
/* z-index
-------------------------- */
$--index-normal: 1 !default;
$--index-top: 1000 !default;
$--index-popper: 2000 !default;
/* Disable base
-------------------------- */

2
packages/theme-chalk/src/date-picker/picker-panel.scss
View File

@ -90,7 +90,7 @@
}
@include when(disabled) {
color: $--font-color-disabled-base;
color: var(--el-font-color-disabled-base);
&:hover {
cursor: not-allowed;

2
packages/theme-chalk/src/date-picker/time-picker.scss
View File

@ -5,7 +5,7 @@
position: relative;
width: 180px;
left: 0;
z-index: $--index-top;
z-index: var(--el-index-top);
user-select: none;
box-sizing: content-box;

2
packages/theme-chalk/src/date-picker/time-spinner.scss
View File

@ -41,7 +41,7 @@
position: absolute;
left: 0;
width: 100%;
z-index: $--index-normal;
z-index: var(--el-index-normal);
text-align: center;
height: 30px;
line-height: 30px;

2
packages/theme-chalk/src/dropdown.scss
View File

@ -139,7 +139,7 @@
@include when(disabled) {
cursor: not-allowed;
color: $--font-color-disabled-base;
color: var(--el-font-color-disabled-base);
}
}

2
packages/theme-chalk/src/popover.scss
View File

@ -9,7 +9,7 @@
border-radius: $--popover-border-radius;
border: 1px solid $--popover-border-color;
padding: $--popover-padding;
z-index: $--index-popper;
z-index: var(--el-index-popper);
color: $--color-text-regular;
line-height: 1.4;
text-align: justify;

2
packages/theme-chalk/src/select-dropdown-v2.scss
View File

@ -3,7 +3,7 @@
@import "./popper";
@include b(select-dropdown) {
z-index: #{$--index-top + 1};
z-index: calc(var(--el-index-top) + 1);
border-radius: $--border-radius-base;
box-sizing: border-box;

2
packages/theme-chalk/src/select-dropdown.scss
View File

@ -3,7 +3,7 @@
@import "./popper";
@include b(select-dropdown) {
z-index: #{$--index-top + 1};
z-index: calc(var(--el-index-top) + 1);
border-radius: $--border-radius-base;
box-sizing: border-box;

4
packages/theme-chalk/src/select-v2.scss
View File

@ -209,7 +209,7 @@ $--input-inline-start: 7px !default;
cursor: pointer;
position: absolute;
top: 8px;
z-index: $--index-top;
z-index: var(--el-index-top);
right: 25px;
color: $--select-input-color;
line-height: 18px;
@ -255,7 +255,7 @@ $--input-inline-start: 7px !default;
@include e(selection) {
white-space: normal;
z-index: $--index-normal;
z-index: var(--el-index-normal);
display: flex;
align-items: center;
flex-wrap: wrap;

4
packages/theme-chalk/src/select.scss
View File

@ -122,7 +122,7 @@
cursor: pointer;
position: absolute;
top: 8px;
z-index: $--index-top;
z-index: var(--el-index-top);
right: 25px;
color: $--select-input-color;
line-height: 18px;
@ -137,7 +137,7 @@
position: absolute;
line-height: normal;
white-space: normal;
z-index: $--index-normal;
z-index: var(--el-index-normal);
top: 50%;
transform: translateY(-50%);
display: flex;

4
packages/theme-chalk/src/tabs.scss
View File

@ -52,7 +52,7 @@
width: 100%;
height: 2px;
background-color: $--border-color-light;
z-index: $--index-normal;
z-index: var(--el-index-normal);
}
@include when(scrollable) {
@ -81,7 +81,7 @@
position: relative;
transition: transform .3s;
float: left;
z-index: #{$--index-normal + 1};
z-index: calc(var(--el-index-normal) + 1);
@include when(stretch) {
min-width: 100%;

2
packages/theme-chalk/src/tooltip.scss
View File

@ -10,7 +10,7 @@
position: absolute;
border-radius: 4px;
padding: $--tooltip-padding;
z-index: $--index-popper;
z-index: var(--el-index-popper);
font-size: $--tooltip-font-size;
line-height: 1.2;
min-width: 10px;

2
packages/theme-chalk/src/transfer.scss
View File

@ -170,7 +170,7 @@
bottom: 0;
left: 0;
width: 100%;
z-index: $--index-normal;
z-index: var(--el-index-normal);
@include utils-vertical-center;
.#{$namespace}-checkbox {

91
packages/theme-chalk/src/var.scss Normal file
View File

@ -0,0 +1,91 @@
// CSS3 var
@import 'common/var';
:root {
--el-color-primary: #{$--color-primary};
--el-color-white: #{$--color-white};
--el-color-black: #{$--color-black};
--el-color-primary-light-1: #{$--color-primary-light-1};
--el-color-primary-light-2: #{$--color-primary-light-2};
--el-color-primary-light-3: #{$--color-primary-light-3};
--el-color-primary-light-4: #{$--color-primary-light-4};
--el-color-primary-light-5: #{$--color-primary-light-5};
--el-color-primary-light-6: #{$--color-primary-light-6};
--el-color-primary-light-7: #{$--color-primary-light-7};
--el-color-primary-light-8: #{$--color-primary-light-8};
--el-color-primary-light-9: #{$--color-primary-light-9};
--el-color-success: #{$--color-success};
--el-color-warning: #{$--color-warning};
--el-color-danger: #{$--color-danger};
--el-color-info: #{$--color-info};
--el-color-success-light: #{$--color-success-light};
--el-color-warning-light: #{$--color-warning-light};
--el-color-danger-light: #{$--color-danger-light};
--el-color-info-light: #{$--color-info-light};
--el-color-success-lighter: #{$--color-success-light};
--el-color-warning-lighter: #{$--color-warning-light};
--el-color-danger-lighter: #{$--color-danger-light};
--el-color-info-lighter: #{$--color-info-light};
--el-color-text-primary: #{$--color-text-primary};
--el-color-text-regular: #{$--color-text-regular};
--el-color-text-secondary: #{$--color-text-secondary};
--el-color-text-placeholder: #{$--color-text-placeholder};
--el-border-color-base: #{$--border-color-base};
--el-border-color-light: #{$--border-color-light};
--el-border-color-lighter: #{$--border-color-lighter};
--el-border-color-extra-light: #{$--border-color-extra-light};
// Background
--el-background-color-base: #{$--background-color-base};
// Link
--el-link-color: var(--el-color-primary-light-2);
--el-link-hover-color: var(--el-color-primary);
// Border
--el-border-width-base: #{$--border-width-base};
--el-border-style-base: #{$--border-style-base};
--el-border-color-hover: var(--el-color-text-placeholder);
--el-border-base: var(--el-border-width-base) var(--el-border-style-base)
var(--el-border-color-base);
--el-border-radius-base: #{$--border-radius-base};
--el-border-radius-small: #{$--border-radius-small};
--el-border-radius-circle: #{$--border-radius-circle};
// Box-shadow
--el-box-shadow-base: #{$--box-shadow-base};
--el-box-shadow-light: #{$--box-shadow-light};
// Svg
--el-svg-monochrome-grey: #{$--svg-monochrome-grey};
// Fill
--el-fill-base: var(--el-color-white);
// Typography
--el-font-size-extra-large: #{$--font-size-extra-large};
--el-font-size-large: #{$--font-size-large};
--el-font-size-medium: #{$--font-size-medium};
--el-font-size-base: #{$--font-size-base};
--el-font-size-small: #{$--font-size-small};
--el-font-size-extra-small: #{$--font-size-extra-small};
--el-font-weight-primary: #{$--font-weight-primary};
--el-line-height-primary: #{$--font-line-height-primary};
--el-font-color-disabled-base: #bbb;
// z-index
--el-index-normal: 1;
--el-index-top: 1000;
--el-index-popper: 2000;
// Disable base
--el-disabled-fill-base: var(--el-background-color-base);
--el-disabled-color-base: var(--el-color-text-placeholder);
--el-disabled-border-base: var(--el-border-color-light);
}