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

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

@ -616,18 +616,8 @@ $--scrollbar-hover-background-color: rgba(
/* Carousel /* Carousel
--------------------------*/ --------------------------*/
/// fontSize||Font|1 // refactor with css3 var
$--carousel-arrow-font-size: 12px !default; // See packages/theme-chalk/src/carousel.scss
$--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;
/* Collapse /* Collapse
--------------------------*/ --------------------------*/