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

refactor: col different size style (#2237)

Browse Source
This commit is contained in:
Enoch Qin 2021-06-23 14:57:44 +08:00 committed by GitHub
parent 45982cff8a
commit a9d6fe062f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 44 additions and 155 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,6 +2,7 @@
@import './common/var.scss';
@import './mixins/mixins.scss';
@import './mixins/_col.scss';
[class*='#{$namespace}-col-'] {
float: left;
@ -41,162 +42,12 @@
}
}
@include res(xs) {
.#{$namespace}-col-xs-0 {
display: none;
@include when(guttered) {
display: none;
}
}
@for $i from 0 through 24 {
.#{$namespace}-col-xs-#{$i} {
@if $i != 0 {
display: block;
}
max-width: (math.div(1, 24) * $i * 100) * 1%;
flex: 0 0 (math.div(1, 24) * $i * 100) * 1%;
}
@include col-size(xs);
.#{$namespace}-col-xs-offset-#{$i} {
margin-left: (math.div(1, 24) * $i * 100) * 1%;
}
@include col-size(sm);
.#{$namespace}-col-xs-pull-#{$i} {
position: relative;
right: (math.div(1, 24) * $i * 100) * 1%;
}
@include col-size(md);
.#{$namespace}-col-xs-push-#{$i} {
position: relative;
left: (math.div(1, 24) * $i * 100) * 1%;
}
}
}
@include col-size(lg);
@include res(sm) {
.#{$namespace}-col-sm-0 {
display: none;
@include when(guttered) {
display: none;
}
}
@for $i from 0 through 24 {
.#{$namespace}-col-sm-#{$i} {
@if $i != 0 {
display: block;
}
max-width: (math.div(1, 24) * $i * 100) * 1%;
flex: 0 0 (math.div(1, 24) * $i * 100) * 1%;
}
.#{$namespace}-col-sm-offset-#{$i} {
margin-left: (math.div(1, 24) * $i * 100) * 1%;
}
.#{$namespace}-col-sm-pull-#{$i} {
position: relative;
right: (math.div(1, 24) * $i * 100) * 1%;
}
.#{$namespace}-col-sm-push-#{$i} {
position: relative;
left: (math.div(1, 24) * $i * 100) * 1%;
}
}
}
@include res(md) {
.#{$namespace}-col-md-0 {
display: none;
@include when(guttered) {
display: none;
}
}
@for $i from 0 through 24 {
.#{$namespace}-col-md-#{$i} {
@if $i != 0 {
display: block;
}
max-width: (math.div(1, 24) * $i * 100) * 1%;
flex: 0 0 (math.div(1, 24) * $i * 100) * 1%;
}
.#{$namespace}-col-md-offset-#{$i} {
margin-left: (math.div(1, 24) * $i * 100) * 1%;
}
.#{$namespace}-col-md-pull-#{$i} {
position: relative;
right: (math.div(1, 24) * $i * 100) * 1%;
}
.#{$namespace}-col-md-push-#{$i} {
position: relative;
left: (math.div(1, 24) * $i * 100) * 1%;
}
}
}
@include res(lg) {
.#{$namespace}-col-lg-0 {
display: none;
@include when(guttered) {
display: none;
}
}
@for $i from 0 through 24 {
.#{$namespace}-col-lg-#{$i} {
@if $i != 0 {
display: block;
}
max-width: (math.div(1, 24) * $i * 100) * 1%;
flex: 0 0 (math.div(1, 24) * $i * 100) * 1%;
}
.#{$namespace}-col-lg-offset-#{$i} {
margin-left: (math.div(1, 24) * $i * 100) * 1%;
}
.#{$namespace}-col-lg-pull-#{$i} {
position: relative;
right: (math.div(1, 24) * $i * 100) * 1%;
}
.#{$namespace}-col-lg-push-#{$i} {
position: relative;
left: (math.div(1, 24) * $i * 100) * 1%;
}
}
}
@include res(xl) {
.#{$namespace}-col-xl-0 {
display: none;
@include when(guttered) {
display: none;
}
}
@for $i from 0 through 24 {
.#{$namespace}-col-xl-#{$i} {
@if $i != 0 {
display: block;
}
max-width: (math.div(1, 24) * $i * 100) * 1%;
flex: 0 0 (math.div(1, 24) * $i * 100) * 1%;
}
.#{$namespace}-col-xl-offset-#{$i} {
margin-left: (math.div(1, 24) * $i * 100) * 1%;
}
.#{$namespace}-col-xl-pull-#{$i} {
position: relative;
right: (math.div(1, 24) * $i * 100) * 1%;
}
.#{$namespace}-col-xl-push-#{$i} {
position: relative;
left: (math.div(1, 24) * $i * 100) * 1%;
}
}
}
@include col-size(xl);

38
packages/theme-chalk/src/mixins/_col.scss Normal file
View File

@ -0,0 +1,38 @@
@use "sass:math";
@import '../common/var.scss';
@import './mixins.scss';
@mixin col-size($size) {
@include res($size) {
.#{$namespace}-col-#{$size}-0 {
display: none;
@include when(guttered) {
display: none;
}
}
@for $i from 0 through 24 {
.#{$namespace}-col-#{$size}-#{$i} {
@if $i != 0 {
display: block;
}
max-width: (math.div(1, 24) * $i * 100) * 1%;
flex: 0 0 (math.div(1, 24) * $i * 100) * 1%;
}
.#{$namespace}-col-#{$size}-offset-#{$i} {
margin-left: (math.div(1, 24) * $i * 100) * 1%;
}
.#{$namespace}-col-#{$size}-pull-#{$i} {
position: relative;
right: (math.div(1, 24) * $i * 100) * 1%;
}
.#{$namespace}-col-#{$size}-push-#{$i} {
position: relative;
left: (math.div(1, 24) * $i * 100) * 1%;
}
}
}
}