javascript/element-plus
1
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2026-03-13 07:51:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(slider): migrate css var & use sass map for message (#2772)

Browse Source
This commit is contained in:
云游君
2021-07-30 17:40:22 +08:00
committed by GitHub
parent 2fb139a3e3
commit a2e1491411
9 changed files with 87 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@@ -94,8 +94,8 @@
"rollup-plugin-terser": "^7.0.2",
"rollup-plugin-typescript2": "^0.27.3",
"rollup-plugin-vue": "^6.0.0",
"sass": "^1.35.1",
"sass-loader": "^10.0.1",
"sass": "^1.36.0",
"sass-loader": "10.1.1",
"style-loader": "^1.2.1",
"throttle-debounce": "2.3.0",
"transliteration": "^2.1.11",

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

@@ -316,8 +316,19 @@ $--select-dropdown-border: solid 1px map.get($--border-color, 'light') !default;
/* Message
-------------------------- */
// refactor with css3 var
// See packages/theme-chalk/src/message.scss
// css3 var in packages/theme-chalk/src/message.scss
$--message: () !default;
$--message: map.merge(
(
'min-width': 380px,
'background-color': #edf2fc,
'padding': 15px 15px 15px 20px,
'close-size': 16px,
'close-icon-color': var(--el-text-color-placeholder),
'close-hover-color': var(--el-text-color-secondary),
),
$--message
);
/* Notification
-------------------------- */
@@ -537,20 +548,23 @@ $--card: map.merge(
/* Slider
--------------------------*/
/// color||Color|0
$--slider-main-background-color: $--color-primary !default;
/// color||Color|0
$--slider-runway-background-color: map.get($--border-color, 'light') !default;
$--slider-stop-background-color: $--color-white !default;
$--slider-disable-color: var(--el-text-color-placeholder) !default;
$--slider-margin: 16px 0 !default;
$--slider-border-radius: 3px !default;
/// height|1|Other|4
$--slider-height: 6px !default;
/// height||Other|4
$--slider-button-size: 20px !default;
$--slider-button-wrapper-size: 36px !default;
$--slider-button-wrapper-offset: -15px !default;
// css3 var in packages/theme-chalk/src/slider.scss
$--slider: () !default;
$--slider: map.merge(
(
'main-background-color': var(--el-color-primary),
'runway-background-color': var(--el-border-color-light),
'stop-background-color': var(--el-color-white),
'disable-color': var(--el-text-color-placeholder),
'margin': 16px 0,
'border-radius': 3px,
'height': 6px,
'button-size': 20px,
'button-wrapper-size': 36px,
'button-wrapper-offset': -15px,
),
$--slider
);
/* Menu
--------------------------*/

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

@@ -1,3 +1,5 @@
@use "sass:map";
@import 'mixins/mixins';
@import 'mixins/utils';
@import 'common/var';
@@ -54,7 +56,7 @@
border: none;
outline: none;
cursor: pointer;
font-size: var(--el-message-close-size);
font-size: var(--el-message-close-size, map.get($--message, 'close-size'));
.#{$namespace}-dialog__close {
color: var(--el-color-info);

4
packages/theme-chalk/src/message-box.scss
View File

@@ -1,3 +1,5 @@
@use "sass:map";
@import 'mixins/mixins';
@import 'common/var';
@import 'common/popup';
@@ -67,7 +69,7 @@
border: none;
outline: none;
background: transparent;
font-size: var(--el-message-close-size);
font-size: var(--el-message-close-size, map.get($--message, 'close-size'));
cursor: pointer;
.#{$namespace}-message-box__close {

9
packages/theme-chalk/src/message.scss
View File

@@ -1,14 +1,11 @@
@use "sass:map";
@import 'mixins/mixins';
@import 'mixins/var';
@import 'common/var';
:root {
--el-message-min-width: 380px;
--el-message-background-color: #edf2fc;
--el-message-padding: 15px 15px 15px 20px;
--el-message-close-icon-color: var(--el-text-color-placeholder);
--el-message-close-hover-color: var(--el-text-color-secondary);
@include set-component-css-var('message', $--message);
@each $type in (success, info, warning, error) {
--el-message-#{$type}-font-color: var(--el-color-#{$type});
@@ -86,7 +83,7 @@
transform: translateY(-50%);
cursor: pointer;
color: var(--el-message-close-icon-color);
font-size: var(--el-message-close-size);
font-size: var(--el-message-close-size, map.get($--message, 'close-size'));
&:focus {
outline-width: 0;

5
packages/theme-chalk/src/notification.scss
View File

@@ -8,7 +8,10 @@
--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);
--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;

51
packages/theme-chalk/src/slider.scss
View File

@@ -2,19 +2,24 @@
@import 'mixins/mixins';
@import 'mixins/utils';
@import 'mixins/var';
@import 'input-number';
@import 'tooltip';
@import 'common/var';
:root {
@include set-component-css-var('slider', $--slider);
}
@include b(slider) {
@include utils-clearfix;
@include e(runway) {
width: 100%;
height: $--slider-height;
margin: $--slider-margin;
background-color: $--slider-runway-background-color;
border-radius: $--slider-border-radius;
height: var(--el-slider-height);
margin: var(--el-slider-margin);
background-color: var(--el-slider-runway-background-color);
border-radius: var(--el-slider-border-radius);
position: relative;
cursor: pointer;
vertical-align: middle;
@@ -28,11 +33,11 @@
cursor: default;
.#{$namespace}-slider__bar {
background-color: $--slider-disable-color;
background-color: var(--el-slider-disable-color);
}
.#{$namespace}-slider__button {
border-color: $--slider-disable-color;
border-color: var(--el-slider-disable-color);
}
.#{$namespace}-slider__button-wrapper {
@@ -84,19 +89,19 @@
}
@include e(bar) {
height: $--slider-height;
background-color: $--slider-main-background-color;
border-top-left-radius: $--slider-border-radius;
border-bottom-left-radius: $--slider-border-radius;
height: var(--el-slider-height);
background-color: var(--el-slider-main-background-color);
border-top-left-radius: var(--el-slider-border-radius);
border-bottom-left-radius: var(--el-slider-border-radius);
position: absolute;
}
@include e(button-wrapper) {
height: $--slider-button-wrapper-size;
width: $--slider-button-wrapper-size;
height: var(--el-slider-button-wrapper-size);
width: var(--el-slider-button-wrapper-size);
position: absolute;
z-index: 1;
top: $--slider-button-wrapper-offset;
top: var(--el-slider-button-wrapper-offset);
transform: translateX(-50%);
background-color: transparent;
text-align: center;
@@ -117,11 +122,11 @@
@include e(button) {
display: inline-block;
width: $--slider-button-size;
height: $--slider-button-size;
width: var(--el-slider-button-size);
height: var(--el-slider-button-size);
vertical-align: middle;
border: solid 2px $--slider-main-background-color;
background-color: $--color-white;
border: solid 2px var(--el-slider-main-background-color);
background-color: var(--el-color-white);
border-radius: 50%;
box-sizing: border-box;
transition: var(--el-transition-duration-fast);
@@ -145,10 +150,10 @@
@include e(stop) {
position: absolute;
height: $--slider-height;
width: $--slider-height;
height: var(--el-slider-height);
width: var(--el-slider-height);
border-radius: var(--el-border-radius-circle);
background-color: $--slider-stop-background-color;
background-color: var(--el-slider-stop-background-color);
transform: translateX(-50%);
}
@@ -170,18 +175,18 @@
@include when(vertical) {
position: relative;
.#{$namespace}-slider__runway {
width: $--slider-height;
width: var(--el-slider-height);
height: 100%;
margin: 0 16px;
}
.#{$namespace}-slider__bar {
width: $--slider-height;
width: var(--el-slider-height);
height: auto;
border-radius: 0 0 3px 3px;
}
.#{$namespace}-slider__button-wrapper {
top: auto;
left: $--slider-button-wrapper-offset;
left: var(--el-slider-button-wrapper-offset);
transform: translateY(50%);
}
.#{$namespace}-slider__stop {

3
packages/theme-chalk/src/var.scss
View File

@@ -91,9 +91,6 @@
--el-button-disabled-font-color: var(--el-text-color-placeholder);
--el-button-disabled-background-color: var(--el-color-white);
--el-button-disabled-border-color: var(--el-border-color-light);
// message
--el-message-close-size: 16px;
}
/* Transition

26
yarn.lock
View File

@@ -8468,9 +8468,10 @@ kleur@^3.0.3:
version "3.0.3"
resolved "https://registry.yarnpkg.com/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e"
klona@^2.0.3:
version "2.0.3"
resolved "https://registry.yarnpkg.com/klona/-/klona-2.0.3.tgz#98274552c513583ad7a01456a789a2a0b4a2a538"
klona@^2.0.4:
version "2.0.4"
resolved "https://registry.npm.taobao.org/klona/download/klona-2.0.4.tgz#7bb1e3affb0cb8624547ef7e8f6708ea2e39dfc0"
integrity sha1-e7Hjr/sMuGJFR+9+j2cI6i4538A=
last-run@^1.1.0:
version "1.1.1"
@@ -11646,14 +11647,15 @@ sane@^4.0.3:
minimist "^1.1.1"
walker "~1.0.5"
sass-loader@^10.0.1:
version "10.0.2"
resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-10.0.2.tgz#c7b73010848b264792dd45372eea0b87cba4401e"
sass-loader@10.1.1:
version "10.1.1"
resolved "https://registry.nlark.com/sass-loader/download/sass-loader-10.1.1.tgz?cache=0&sync_timestamp=1623350053592&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fsass-loader%2Fdownload%2Fsass-loader-10.1.1.tgz#4ddd5a3d7638e7949065dd6e9c7c04037f7e663d"
integrity sha1-Td1aPXY455SQZd1unHwEA39+Zj0=
dependencies:
klona "^2.0.3"
klona "^2.0.4"
loader-utils "^2.0.0"
neo-async "^2.6.2"
schema-utils "^2.7.1"
schema-utils "^3.0.0"
semver "^7.3.2"
sass@^1.26.3:
@@ -11663,10 +11665,10 @@ sass@^1.26.3:
dependencies:
chokidar ">=3.0.0 <4.0.0"
sass@^1.35.1:
version "1.35.1"
resolved "https://registry.nlark.com/sass/download/sass-1.35.1.tgz#90ecf774dfe68f07b6193077e3b42fb154b9e1cd"
integrity sha1-kOz3dN/mjwe2GTB347QvsVS54c0=
sass@^1.36.0:
version "1.36.0"
resolved "https://registry.nlark.com/sass/download/sass-1.36.0.tgz#5912ef9d5d16714171ba11cb17edb274c4bbc07e"
integrity sha1-WRLvnV0WcUFxuhHLF+2ydMS7wH4=
dependencies:
chokidar ">=3.0.0 <4.0.0"