github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

styles: use math.div to replace `/`

pull/21193/head
xing.wu 2021-07-30 14:02:17 +08:00
parent 4943867337
commit 2dd61a57ce
8 changed files with 46 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,3 +1,4 @@
@use "sass:math";
@import "mixins/mixins"; @import "mixins/mixins";
@import "common/var"; @import "common/var";
@ -22,7 +23,7 @@
@include when(fixed) { @include when(fixed) {
position: absolute; position: absolute;
top: 0; top: 0;
right: #{1 + $--badge-size / 2}; right: #{1 + math.div($--badge-size, 2)};
transform: translateY(-50%) translateX(100%); transform: translateY(-50%) translateX(100%);
@include when(dot) { @include when(dot) {

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

@ -1,3 +1,4 @@
@use "sass:math";
@import "mixins/mixins"; @import "mixins/mixins";
@import "common/var"; @import "common/var";
@ -122,7 +123,7 @@
padding: $--carousel-indicator-padding-horizontal $--carousel-indicator-padding-vertical; padding: $--carousel-indicator-padding-horizontal $--carousel-indicator-padding-vertical;
.el-carousel__button { .el-carousel__button {
width: $--carousel-indicator-height; width: $--carousel-indicator-height;
height: #{$--carousel-indicator-width / 2}; height: #{math.div($--carousel-indicator-width, 2)};
} }
} }

49
packages/theme-chalk/src/col.scss
View File

@ -1,3 +1,4 @@
@use "sass:math";
@import "./common/var.scss"; @import "./common/var.scss";
@import "./mixins/mixins.scss"; @import "./mixins/mixins.scss";
@ -12,21 +13,21 @@
@for $i from 0 through 24 { @for $i from 0 through 24 {
.el-col-#{$i} { .el-col-#{$i} {
width: (1 / 24 * $i * 100) * 1%; width: (math.div(1, 24) * $i * 100) * 1%;
} }
.el-col-offset-#{$i} { .el-col-offset-#{$i} {
margin-left: (1 / 24 * $i * 100) * 1%; margin-left: (math.div(1, 24) * $i * 100) * 1%;
} }
.el-col-pull-#{$i} { .el-col-pull-#{$i} {
position: relative; position: relative;
right: (1 / 24 * $i * 100) * 1%; right: (math.div(1, 24) * $i * 100) * 1%;
} }
.el-col-push-#{$i} { .el-col-push-#{$i} {
position: relative; position: relative;
left: (1 / 24 * $i * 100) * 1%; left: (math.div(1, 24) * $i * 100) * 1%;
} }
} }
@ -36,21 +37,21 @@
} }
@for $i from 0 through 24 { @for $i from 0 through 24 {
.el-col-xs-#{$i} { .el-col-xs-#{$i} {
width: (1 / 24 * $i * 100) * 1%; width: (math.div(1, 24) * $i * 100) * 1%;
} }
.el-col-xs-offset-#{$i} { .el-col-xs-offset-#{$i} {
margin-left: (1 / 24 * $i * 100) * 1%; margin-left: (math.div(1, 24) * $i * 100) * 1%;
} }
.el-col-xs-pull-#{$i} { .el-col-xs-pull-#{$i} {
position: relative; position: relative;
right: (1 / 24 * $i * 100) * 1%; right: (math.div(1, 24) * $i * 100) * 1%;
} }
.el-col-xs-push-#{$i} { .el-col-xs-push-#{$i} {
position: relative; position: relative;
left: (1 / 24 * $i * 100) * 1%; left: (math.div(1, 24) * $i * 100) * 1%;
} }
} }
} }
@ -61,21 +62,21 @@
} }
@for $i from 0 through 24 { @for $i from 0 through 24 {
.el-col-sm-#{$i} { .el-col-sm-#{$i} {
width: (1 / 24 * $i * 100) * 1%; width: (math.div(1, 24) * $i * 100) * 1%;
} }
.el-col-sm-offset-#{$i} { .el-col-sm-offset-#{$i} {
margin-left: (1 / 24 * $i * 100) * 1%; margin-left: (math.div(1, 24) * $i * 100) * 1%;
} }
.el-col-sm-pull-#{$i} { .el-col-sm-pull-#{$i} {
position: relative; position: relative;
right: (1 / 24 * $i * 100) * 1%; right: (math.div(1, 24) * $i * 100) * 1%;
} }
.el-col-sm-push-#{$i} { .el-col-sm-push-#{$i} {
position: relative; position: relative;
left: (1 / 24 * $i * 100) * 1%; left: (math.div(1, 24) * $i * 100) * 1%;
} }
} }
} }
@ -86,21 +87,21 @@
} }
@for $i from 0 through 24 { @for $i from 0 through 24 {
.el-col-md-#{$i} { .el-col-md-#{$i} {
width: (1 / 24 * $i * 100) * 1%; width: (math.div(1, 24) * $i * 100) * 1%;
} }
.el-col-md-offset-#{$i} { .el-col-md-offset-#{$i} {
margin-left: (1 / 24 * $i * 100) * 1%; margin-left: (math.div(1, 24) * $i * 100) * 1%;
} }
.el-col-md-pull-#{$i} { .el-col-md-pull-#{$i} {
position: relative; position: relative;
right: (1 / 24 * $i * 100) * 1%; right: (math.div(1, 24) * $i * 100) * 1%;
} }
.el-col-md-push-#{$i} { .el-col-md-push-#{$i} {
position: relative; position: relative;
left: (1 / 24 * $i * 100) * 1%; left: (math.div(1, 24) * $i * 100) * 1%;
} }
} }
} }
@ -111,21 +112,21 @@
} }
@for $i from 0 through 24 { @for $i from 0 through 24 {
.el-col-lg-#{$i} { .el-col-lg-#{$i} {
width: (1 / 24 * $i * 100) * 1%; width: (math.div(1, 24) * $i * 100) * 1%;
} }
.el-col-lg-offset-#{$i} { .el-col-lg-offset-#{$i} {
margin-left: (1 / 24 * $i * 100) * 1%; margin-left: (math.div(1, 24) * $i * 100) * 1%;
} }
.el-col-lg-pull-#{$i} { .el-col-lg-pull-#{$i} {
position: relative; position: relative;
right: (1 / 24 * $i * 100) * 1%; right: (math.div(1, 24) * $i * 100) * 1%;
} }
.el-col-lg-push-#{$i} { .el-col-lg-push-#{$i} {
position: relative; position: relative;
left: (1 / 24 * $i * 100) * 1%; left: (math.div(1, 24) * $i * 100) * 1%;
} }
} }
} }
@ -136,21 +137,21 @@
} }
@for $i from 0 through 24 { @for $i from 0 through 24 {
.el-col-xl-#{$i} { .el-col-xl-#{$i} {
width: (1 / 24 * $i * 100) * 1%; width: (math.div(1, 24) * $i * 100) * 1%;
} }
.el-col-xl-offset-#{$i} { .el-col-xl-offset-#{$i} {
margin-left: (1 / 24 * $i * 100) * 1%; margin-left: (math.div(1, 24) * $i * 100) * 1%;
} }
.el-col-xl-pull-#{$i} { .el-col-xl-pull-#{$i} {
position: relative; position: relative;
right: (1 / 24 * $i * 100) * 1%; right: (math.div(1, 24) * $i * 100) * 1%;
} }
.el-col-xl-push-#{$i} { .el-col-xl-push-#{$i} {
position: relative; position: relative;
left: (1 / 24 * $i * 100) * 1%; left: (math.div(1, 24) * $i * 100) * 1%;
} }
} }
} }

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

@ -1,5 +1,5 @@
/* Element Chalk Variables */ /* Element Chalk Variables */
@use "sass:math";
// Special comment for theme configurator // Special comment for theme configurator
// type|skipAutoTranslation|Category|Order // type|skipAutoTranslation|Category|Order
// skipAutoTranslation 1 // skipAutoTranslation 1
@ -486,7 +486,7 @@ $--cascader-tag-background: #f0f2f5;
/* Group /* Group
-------------------------- */ -------------------------- */
$--group-option-flex: 0 0 (1/5) * 100% !default; $--group-option-flex: 0 0 math.div(1, 5) * 100% !default;
$--group-option-offset-bottom: 12px !default; $--group-option-offset-bottom: 12px !default;
$--group-option-fill-hover: rgba($--color-black, 0.06) !default; $--group-option-fill-hover: rgba($--color-black, 0.06) !default;
$--group-title-color: $--color-black !default; $--group-title-color: $--color-black !default;

9
packages/theme-chalk/src/input-number.scss
View File

@ -1,3 +1,4 @@
@use "sass:math";
@import "mixins/mixins"; @import "mixins/mixins";
@import "common/var"; @import "common/var";
@import "input"; @import "input";
@ -137,7 +138,7 @@
@include e((increase, decrease)) { @include e((increase, decrease)) {
height: auto; height: auto;
line-height: #{($--input-height - 2) / 2}; line-height: #{math.div($--input-height - 2, 2)};
[class*=el-icon] { [class*=el-icon] {
transform: scale(.8); transform: scale(.8);
@ -161,19 +162,19 @@
&[class*=medium] { &[class*=medium] {
[class*=increase], [class*=decrease] { [class*=increase], [class*=decrease] {
line-height: #{($--input-medium-height - 2) / 2}; line-height: #{math.div($--input-medium-height - 2, 2)};
} }
} }
&[class*=small] { &[class*=small] {
[class*=increase], [class*=decrease] { [class*=increase], [class*=decrease] {
line-height: #{($--input-small-height - 2) / 2}; line-height: #{math.div($--input-small-height - 2, 2)};
} }
} }
&[class*=mini] { &[class*=mini] {
[class*=increase], [class*=decrease] { [class*=increase], [class*=decrease] {
line-height: #{($--input-mini-height - 2) / 2}; line-height: #{math.div($--input-mini-height - 2, 2)};
} }
} }
} }

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

@ -1,3 +1,4 @@
@use "sass:math";
@import "mixins/mixins"; @import "mixins/mixins";
@import "common/var"; @import "common/var";
@ -26,7 +27,7 @@
position: fixed; position: fixed;
.el-loading-spinner { .el-loading-spinner {
margin-top: #{- $--loading-fullscreen-spinner-size / 2}; margin-top: #{math.div(-$--loading-fullscreen-spinner-size, 2)};
.circular { .circular {
height: $--loading-fullscreen-spinner-size; height: $--loading-fullscreen-spinner-size;
@ -38,7 +39,7 @@
@include b(loading-spinner) { @include b(loading-spinner) {
top: 50%; top: 50%;
margin-top: #{- $--loading-spinner-size / 2}; margin-top: #{math.div(-$--loading-spinner-size, 2)};
width: 100%; width: 100%;
text-align: center; text-align: center;
position: absolute; position: absolute;

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

@ -1,3 +1,4 @@
@use "sass:math";
@import "mixins/mixins"; @import "mixins/mixins";
@import "common/var"; @import "common/var";
@ -29,7 +30,7 @@
&[x-placement^="top"] .popper__arrow { &[x-placement^="top"] .popper__arrow {
bottom: -$--popover-arrow-size; bottom: -$--popover-arrow-size;
left: 50%; left: 50%;
margin-right: #{$--tooltip-arrow-size / 2}; margin-right: #{math.div($--tooltip-arrow-size, 2)};
border-top-color: $--popover-border-color; border-top-color: $--popover-border-color;
border-bottom-width: 0; border-bottom-width: 0;
@ -48,7 +49,7 @@
&[x-placement^="bottom"] .popper__arrow { &[x-placement^="bottom"] .popper__arrow {
top: -$--popover-arrow-size; top: -$--popover-arrow-size;
left: 50%; left: 50%;
margin-right: #{$--tooltip-arrow-size / 2}; margin-right: #{math.div($--tooltip-arrow-size, 2)};
border-top-width: 0; border-top-width: 0;
border-bottom-color: $--popover-border-color; border-bottom-color: $--popover-border-color;
@ -67,7 +68,7 @@
&[x-placement^="right"] .popper__arrow { &[x-placement^="right"] .popper__arrow {
top: 50%; top: 50%;
left: -$--popover-arrow-size; left: -$--popover-arrow-size;
margin-bottom: #{$--tooltip-arrow-size / 2}; margin-bottom: #{math.div($--tooltip-arrow-size, 2)};
border-right-color: $--popover-border-color; border-right-color: $--popover-border-color;
border-left-width: 0; border-left-width: 0;
@ -86,7 +87,7 @@
&[x-placement^="left"] .popper__arrow { &[x-placement^="left"] .popper__arrow {
top: 50%; top: 50%;
right: -$--popover-arrow-size; right: -$--popover-arrow-size;
margin-bottom: #{$--tooltip-arrow-size / 2}; margin-bottom: #{math.div($--tooltip-arrow-size, 2)};
border-right-width: 0; border-right-width: 0;
border-left-color: $--popover-border-color; border-left-color: $--popover-border-color;

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

@ -1,3 +1,4 @@
@use "sass:math";
@import "mixins/mixins"; @import "mixins/mixins";
@import "mixins/utils"; @import "mixins/utils";
@import "common/var"; @import "common/var";
@ -138,7 +139,7 @@
font-size: 12px; font-size: 12px;
display: inline-block; display: inline-block;
box-sizing: border-box; box-sizing: border-box;
border-radius: #{$--transfer-filter-height / 2}; border-radius: #{math.div($--transfer-filter-height, 2)};
padding-right: 10px; padding-right: 10px;
padding-left: 30px; padding-left: 30px;
} }