style(components): [col] fix gutter will be hidden when present (#16392)

* [col] fix gutter will be hidden when present * optimize code * supplement
element-plus · Apr 16, 2024 · 9c2da88 · 9c2da88
1 parent e83a18e
commit 9c2da88
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 16 deletions.
diff --git a/packages/theme-chalk/src/col.scss b/packages/theme-chalk/src/col.scss
@@ -12,16 +12,12 @@
   }
 }
 
-.#{$namespace}-col-0 {
-  display: none;
-  // to avoid introducing !important syntax, redundant css rule is required due to selector priority.
-  @include when(guttered) {
-    display: none;
-  }
-}
-
 @for $i from 0 through 24 {
   .#{$namespace}-col-#{$i} {
+    display: if($i == 0, none, block);
+    @include when(guttered) {
+      display: if($i == 0, none, block);
+    }
     max-width: (math.div(1, 24) * $i * 100) * 1%;
     flex: 0 0 (math.div(1, 24) * $i * 100) * 1%;
   }

diff --git a/packages/theme-chalk/src/mixins/_col.scss b/packages/theme-chalk/src/mixins/_col.scss
@@ -5,16 +5,11 @@
 
 @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;
+        display: if($i == 0, none, block);
+        @include when(guttered) {
+          display: if($i == 0, none, block);
         }
         max-width: (math.div(1, 24) * $i * 100) * 1%;
         flex: 0 0 (math.div(1, 24) * $i * 100) * 1%;