mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2024-12-21 02:50:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(carousel): migrate css var (#2638)

Browse Source
This commit is contained in:
云游君 2021-07-23 23:11:00 +08:00 committed by GitHub
parent fc40a3bbfb
commit 02f3c7d66d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 32 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,6 +3,18 @@
@import 'mixins/mixins';
@import 'common/var';
:root {
--el-carousel-arrow-font-size: 12px;
--el-carousel-arrow-size: 36px;
--el-carousel-arrow-background: rgba(31, 45, 61, 0.11);
--el-carousel-arrow-hover-background: rgba(31, 45, 61, 0.23);
--el-carousel-indicator-width: 30px;
--el-carousel-indicator-height: 2px;
--el-carousel-indicator-padding-horizontal: 4px;
--el-carousel-indicator-padding-vertical: 12px;
--el-carousel-indicator-out-color: var(--el-border-color-hover);
}
@include b(carousel) {
position: relative;
@ -24,19 +36,19 @@
outline: none;
padding: 0;
margin: 0;
height: $--carousel-arrow-size;
width: $--carousel-arrow-size;
height: var(--el-carousel-arrow-size);
width: var(--el-carousel-arrow-size);
cursor: pointer;
transition: var(--el-transition-duration);
border-radius: 50%;
background-color: $--carousel-arrow-background;
background-color: var(--el-carousel-arrow-background);
color: $--color-white;
position: absolute;
top: 50%;
z-index: 10;
transform: translateY(-50%);
text-align: center;
font-size: $--carousel-arrow-font-size;
font-size: var(--el-carousel-arrow-font-size);
@include m(left) {
left: 16px;
@ -47,7 +59,7 @@
}
&:hover {
background-color: $--carousel-arrow-hover-background;
background-color: var(--el-carousel-arrow-hover-background);
}
& i {
@ -75,8 +87,10 @@
}
@include m(outside) {
bottom: #{$--carousel-indicator-height +
$--carousel-indicator-padding-vertical * 2};
bottom: calc(
var(--el-carousel-indicator-height) +
var(--el-carousel-indicator-padding-vertical) * 2
);
text-align: center;
position: static;
transform: none;
@ -84,7 +98,7 @@
opacity: 0.64;
}
button {
background-color: $--carousel-indicator-out-color;
background-color: var(--el-carousel-indicator-out-color);
opacity: 0.24;
}
}
@ -118,16 +132,16 @@
@include m(horizontal) {
display: inline-block;
padding: $--carousel-indicator-padding-vertical
$--carousel-indicator-padding-horizontal;
padding: var(--el-carousel-indicator-padding-vertical)
var(--el-carousel-indicator-padding-horizontal);
}
@include m(vertical) {
padding: $--carousel-indicator-padding-horizontal
$--carousel-indicator-padding-vertical;
padding: var(--el-carousel-indicator-padding-horizontal)
var(--el-carousel-indicator-padding-vertical);
.#{$namespace}-carousel__button {
width: $--carousel-indicator-height;
height: #{math.div($--carousel-indicator-width, 2)};
width: var(--el-carousel-indicator-height);
height: calc(var(--el-carousel-indicator-width / 2));
}
}
@ -141,8 +155,8 @@
@include e(button) {
display: block;
opacity: 0.48;
width: $--carousel-indicator-width;
height: $--carousel-indicator-height;
width: var(--el-carousel-indicator-width);
height: var(--el-carousel-indicator-height);
background-color: $--color-white;
border: none;
outline: none;

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

@ -616,18 +616,8 @@ $--scrollbar-hover-background-color: rgba(
/* Carousel
--------------------------*/
/// fontSize||Font|1
$--carousel-arrow-font-size: 12px !default;
$--carousel-arrow-size: 36px !default;
$--carousel-arrow-background: rgba(31, 45, 61, 0.11) !default;
$--carousel-arrow-hover-background: rgba(31, 45, 61, 0.23) !default;
/// width||Other|4
$--carousel-indicator-width: 30px !default;
/// height||Other|4
$--carousel-indicator-height: 2px !default;
$--carousel-indicator-padding-horizontal: 4px !default;
$--carousel-indicator-padding-vertical: 12px !default;
$--carousel-indicator-out-color: $--border-color-hover !default;
// refactor with css3 var
// See packages/theme-chalk/src/carousel.scss
/* Collapse
--------------------------*/