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

refactor(badge/card/dropdown/rate): migrate css var & use sass:map (#2764)

Browse Source 
* refactor(badge): migrate css var & use sass:map

* refactor(rate): migrate css var & use sass:map

* refactor(card): migrate css var & use sass:map

* refactor(dropdown): migrate css var & use sass:map
This commit is contained in:
云游君 2021-07-30 11:25:47 +08:00 committed by GitHub
parent 51beb99d0e
commit a4275b94f2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 105 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
packages/theme-chalk/src/badge.scss
View File

@ -1,30 +1,36 @@
@use "sass:math";
@use "sass:map";
@import 'mixins/mixins';
@import 'mixins/var';
@import 'common/var';
:root {
@include set-component-css-var('badge', $--badge);
}
@include b(badge) {
position: relative;
vertical-align: middle;
display: inline-block;
@include e(content) {
background-color: $--badge-background-color;
border-radius: $--badge-radius;
color: $--color-white;
background-color: var(--el-badge-background-color);
border-radius: var(--el-badge-radius);
color: var(--el-color-white);
display: inline-block;
font-size: $--badge-font-size;
height: $--badge-size;
line-height: $--badge-size;
padding: 0 $--badge-padding;
font-size: var(--el-badge-font-size);
height: var(--el-badge-size);
line-height: var(--el-badge-size);
padding: 0 var(--el-badge-padding);
text-align: center;
white-space: nowrap;
border: 1px solid $--color-white;
border: 1px solid var(--el-color-white);
@include when(fixed) {
position: absolute;
top: 0;
right: #{1 + math.div($--badge-size, 2)};
right: calc(1px + var(--el-badge-size) / 2);
transform: translateY(-50%) translateX(100%);
@include when(dot) {

15
packages/theme-chalk/src/card.scss
View File

@ -1,9 +1,14 @@
@import 'mixins/mixins';
@import 'mixins/var';
@import 'common/var';
:root {
@include set-component-css-var('card', $--card);
}
@include b(card) {
border-radius: $--card-border-radius;
border: 1px solid $--card-border-color;
border-radius: var(--el-card-border-radius);
border: 1px solid var(--el-card-border-color);
background-color: $--color-white;
overflow: hidden;
color: var(--el-text-color-primary);
@ -21,12 +26,12 @@
}
@include e(header) {
padding: #{$--card-padding - 2 $--card-padding};
border-bottom: 1px solid $--card-border-color;
padding: calc(var(--el-card-padding) - 2px) var(--el-card-padding);
border-bottom: 1px solid var(--el-card-border-color);
box-sizing: border-box;
}
@include e(body) {
padding: $--card-padding;
padding: var(--el-card-padding);
}
}

4
packages/theme-chalk/src/color-picker.scss
View File

@ -1,3 +1,5 @@
@use "sass:map";
@import 'mixins/mixins';
@import 'common/var';
@import './input.scss';
@ -396,7 +398,7 @@
box-sizing: content-box;
background-color: $--color-white;
border-radius: var(--el-border-radius-base);
box-shadow: $--dropdown-menu-box-shadow;
box-shadow: map.get($--dropdown, 'menu-box-shadow');
&.#{$namespace}-popper {
border: 1px solid var(--el-border-color-lighter);
}

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

@ -501,34 +501,44 @@ $--button-active-shade-percent: 10% !default;
/* Dropdown
-------------------------- */
$--dropdown-menu-box-shadow: var(--el-box-shadow-light) !default;
$--dropdown-menuItem-hover-fill: map.get(
$--colors,
'primary',
'light-9'
) !default;
$--dropdown-menuItem-hover-color: $--link-color !default;
$--dropdown-menu-index: 10 !default;
$--dropdown: () !default;
$--dropdown: map.merge(
(
'menu-box-shadow': var(--el-box-shadow-light),
'menuItem-hover-fill': var(--el-color-primary-light-9),
'menuItem-hover-color': var(--el-link-color),
'menu-index': 10,
),
$--dropdown
);
/* Badge
-------------------------- */
/// color||Color|0
$--badge-background-color: $--color-danger !default;
$--badge-radius: 10px !default;
/// fontSize||Font|1
$--badge-font-size: 12px !default;
/// padding||Spacing|3
$--badge-padding: 6px !default;
/// height||Other|4
$--badge-size: 18px !default;
// Css3 var in packages/theme-chalk/src/badge.scss
$--badge: () !default;
$--badge: map.merge(
(
'background-color': var(--el-color-danger),
'radius': 10px,
'font-size': 12px,
'padding': 6px,
'size': 18px,
),
$--badge
);
/* Card
--------------------------*/
/// color||Color|0
$--card-border-color: map.get($--border-color, 'lighter') !default;
$--card-border-radius: 4px !default;
/// padding||Spacing|3
$--card-padding: 20px !default;
$--card: () !default;
$--card: map.merge(
(
'border-color':
var(--el-border-color-light, map.get($--border-color, 'lighter')),
'border-radius': 4px,
'padding': 20px,
),
$--card
);
/* Slider
--------------------------*/
@ -554,14 +564,17 @@ $--slider-button-wrapper-offset: -15px !default;
/* Rate
--------------------------*/
$--rate-height: 20px !default;
/// fontSize||Font|1
$--rate-font-size: map.get($--font-size, 'base') !default;
/// height||Other|3
$--rate-icon-size: 18px !default;
/// margin||Spacing|2
$--rate-icon-margin: 6px !default;
$--rate-icon-color: var(--el-text-color-placeholder) !default;
$--rate: () !default;
$--rate: map.merge(
(
'height': 20px,
'font-size': var(--el-font-size-base),
'icon-size': 18px,
'icon-margin': 6px,
'icon-color': var(--el-text-color-placeholder),
),
$--rate
);
/* DatePicker
--------------------------*/

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

@ -1,8 +1,13 @@
@import 'mixins/mixins';
@import 'mixins/var';
@import 'common/var';
@import 'button';
@import 'popper';
:root {
@include set-component-css-var('dropdown', $--dropdown);
}
@include b(dropdown) {
display: inline-block;
position: relative;
@ -16,7 +21,7 @@
@include picker-popper(
$--color-white,
1px solid var(--el-border-color-light),
$--dropdown-menu-box-shadow
var(--el-dropdown-menu-box-shadow)
);
.#{$namespace}-dropdown-menu {
@ -28,7 +33,7 @@
}
@include b(scrollbar__bar) {
z-index: #{$--dropdown-menu-index + 1};
z-index: calc(var(--el-dropdown-menu-index + 1));
}
@include b(dropdown__list) {
@ -96,7 +101,7 @@
position: relative;
top: 0;
left: 0;
z-index: $--dropdown-menu-index;
z-index: var(--el-dropdown-menu-index);
padding: 10px 0;
margin: 0;
background-color: $--color-white;
@ -115,8 +120,8 @@
outline: none;
&:not(.is-disabled):hover,
&:focus {
background-color: $--dropdown-menuItem-hover-fill;
color: $--dropdown-menuItem-hover-color;
background-color: var(--el-dropdown-menuItem-hover-fill);
color: var(--el-dropdown-menuItem-hover-color);
}
i {

7
packages/theme-chalk/src/mixins/_var.scss
View File

@ -13,3 +13,10 @@
@mixin set-css-var-type($name, $type, $--variables) {
--el-#{$name}-#{$type}: #{map.get($--variables, $type)};
}
// set all css var for component by map
@mixin set-component-css-var($name, $--variables) {
@each $attribute, $value in $--variables {
--el-#{$name}-#{$attribute}: #{$value};
}
}

17
packages/theme-chalk/src/rate.scss
View File

@ -1,8 +1,15 @@
@use "sass:map";
@import 'mixins/mixins';
@import 'mixins/var';
@import 'common/var';
:root {
@include set-component-css-var('rate', $--rate);
}
@include b(rate) {
height: $--rate-height;
height: var(--el-rate-height);
line-height: 1;
&:focus,
@ -20,9 +27,9 @@
@include e(icon) {
position: relative;
display: inline-block;
font-size: $--rate-icon-size;
margin-right: $--rate-icon-margin;
color: $--rate-icon-color;
font-size: var(--el-rate-icon-size);
margin-right: var(--el-rate-icon-margin);
color: var(--el-rate-icon-color);
transition: var(--el-transition-duration);
&.hover {
transform: scale(1.15);
@ -44,7 +51,7 @@
}
@include e(text) {
font-size: $--rate-font-size;
font-size: var(--el-rate-font-size);
vertical-align: middle;
}
}

8
packages/theme-chalk/src/table-column.scss
View File

@ -1,3 +1,5 @@
@use "sass:map";
@import 'mixins/mixins';
@import 'checkbox';
@import 'tag';
@ -16,7 +18,7 @@
border: solid 1px var(--el-border-color-lighter);
border-radius: 2px;
background-color: $--color-white;
box-shadow: $--dropdown-menu-box-shadow;
box-shadow: map.get($--dropdown, 'menu-box-shadow');
box-sizing: border-box;
margin: 2px 0;
@ -35,8 +37,8 @@
font-size: var(--el-font-size-base);
&:hover {
background-color: $--dropdown-menuItem-hover-fill;
color: $--dropdown-menuItem-hover-color;
background-color: map.get($--dropdown, 'menuItem-hover-fill');
color: map.get($--dropdown, 'menuItem-hover-color');
}
@include when(active) {