Carbon: layout add Visibility support

examples/docs/en-US/layout.md

@@ -341,6 +341,21 @@ Taking example by Bootstrap's responsive design, four breakpoints are preset: xs
 ```
 :::
 
+### Classes for Visibility
+
+```js
+import 'element-ui/lib/theme-chalk/display.scss';
+```
+
+- `hide-xs-only` - hide when on extra small viewports only
+- `hide-sm-only` - hide when on small viewports and down
+- `hide-sm-and-down` - hide when on small viewports and down
+- `hide-sm-and-up` - hide when on small viewports and up
+- `hide-md-only` - hide when on medium viewports only
+- `hide-md-and-down` - hide when on medium viewports and down
+- `hide-md-and-up` - hide when on medium viewports and up
+- `hide-lg-only` - hide when on large viewports only
+
 ### Row Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |

examples/docs/zh-CN/layout.md

@@ -340,6 +340,21 @@
 ```
 :::
 
+### 基于断点的隐藏
+
+```js
+import 'element-ui/lib/theme-chalk/display.scss';
+```
+
+- `hidden-xs-only` - 当视口在 `xs` 尺寸时隐藏
+- `hidden-sm-only` - 当视口在 `sm` 尺寸时隐藏
+- `hidden-sm-and-down` - 当视口在 `sm` 及以下尺寸时隐藏
+- `hidden-sm-and-up` - 当视口在 `sm` 及以上尺寸时隐藏
+- `hidden-md-only` - 当视口在 `md` 尺寸时隐藏
+- `hidden-md-and-down` - 当视口在 `md` 及以下尺寸时隐藏
+- `hidden-md-and-up` - 当视口在 `md` 及以上尺寸时隐藏
+- `hidden-lg-only` - 当视口在 `lg` 及以下尺寸时隐藏
+
 ### Row Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |

packages/col/src/col.js

@@ -38,7 +38,7 @@ export default {
     }
 
     ['span', 'offset', 'pull', 'push'].forEach(prop => {
-      if (this[prop]) {
+      if (this[prop] || this[prop] === 0) {
         classList.push(
           prop !== 'span'
           ? `el-col-${prop}-${this[prop]}`

packages/theme-chalk/src/col.scss

@@ -1,42 +1,50 @@
 @import "./common/var.scss";
+@import "./mixins/mixins.scss";
 
-.el-col-1, .el-col-2, .el-col-3, .el-col-4, .el-col-5, .el-col-6, .el-col-7, .el-col-8, .el-col-9, .el-col-10, .el-col-11, .el-col-12, .el-col-13, .el-col-14, .el-col-15, .el-col-16, .el-col-17, .el-col-18, .el-col-19, .el-col-20, .el-col-21, .el-col-22, .el-col-23, .el-col-24 {
+[class*="el-col-"] {
   float: left;
   box-sizing: border-box;
 }
-.el-col-0 {
-  width: 0;
+
+[class*="-0"] {
+  display: none;
 }
 
-@for $i from 0 through 24 {
+@for $i from 1 through 24 {
   .el-col-#{$i} {
     width: (1 / 24 * $i * 100) * 1%;
   }
+
   .el-col-offset-#{$i} {
     margin-left: (1 / 24 * $i * 100) * 1%;
   }
+
   .el-col-pull-#{$i} {
     position: relative;
     right: (1 / 24 * $i * 100) * 1%;
   }
+
   .el-col-push-#{$i} {
     position: relative;
     left: (1 / 24 * $i * 100) * 1%;
   }
 }
 
-@media (max-width: 768px) {
-  @for $i from 0 through 24 {
+@include res(xs) {
+  @for $i from 1 through 24 {
     .el-col-xs-#{$i} {
       width: (1 / 24 * $i * 100) * 1%;
     }
+
     .el-col-xs-offset-#{$i} {
       margin-left: (1 / 24 * $i * 100) * 1%;
     }
+
     .el-col-xs-pull-#{$i} {
       position: relative;
       right: (1 / 24 * $i * 100) * 1%;
     }
+
     .el-col-xs-push-#{$i} {
       position: relative;
       left: (1 / 24 * $i * 100) * 1%;
@@ -44,54 +52,65 @@
   }
 }
 
-@media (min-width: 768px) {
-  @for $i from 0 through 24 {
+@include res(sm) {
+  @for $i from 1 through 24 {
     .el-col-sm-#{$i} {
       width: (1 / 24 * $i * 100) * 1%;
     }
+
     .el-col-sm-offset-#{$i} {
       margin-left: (1 / 24 * $i * 100) * 1%;
     }
+
     .el-col-sm-pull-#{$i} {
       position: relative;
       right: (1 / 24 * $i * 100) * 1%;
     }
+
     .el-col-sm-push-#{$i} {
       position: relative;
       left: (1 / 24 * $i * 100) * 1%;
     }
   }
 }
-@media (min-width: 992px) {
-  @for $i from 0 through 24 {
+
+@include res(md) {
+  @for $i from 1 through 24 {
     .el-col-md-#{$i} {
       width: (1 / 24 * $i * 100) * 1%;
     }
+
     .el-col-md-offset-#{$i} {
       margin-left: (1 / 24 * $i * 100) * 1%;
     }
+
     .el-col-md-pull-#{$i} {
       position: relative;
       right: (1 / 24 * $i * 100) * 1%;
     }
+
     .el-col-md-push-#{$i} {
       position: relative;
       left: (1 / 24 * $i * 100) * 1%;
     }
   }
 }
-@media (min-width: 1200px) {
-  @for $i from 0 through 24 {
+
+@include res(lg) {
+  @for $i from 1 through 24 {
     .el-col-lg-#{$i} {
       width: (1 / 24 * $i * 100) * 1%;
     }
+
     .el-col-lg-offset-#{$i} {
       margin-left: (1 / 24 * $i * 100) * 1%;
     }
+
     .el-col-lg-pull-#{$i} {
       position: relative;
       right: (1 / 24 * $i * 100) * 1%;
     }
+
     .el-col-lg-push-#{$i} {
       position: relative;
       left: (1 / 24 * $i * 100) * 1%;

packages/theme-chalk/src/common/var.scss

@@ -673,3 +673,27 @@ $--footer-padding: 0 20px;
 /* Main
 --------------------------*/
 $--main-padding: 20px;
+
+/* Break-point
+--------------------------*/
+$--sm: 768px !default;
+$--md: 992px !default;;
+$--lg: 1200px !default;;
+
+$--breakpoints: (
+  'xs' : (max-width: $--sm),
+  'sm' : (min-width: $--sm),
+  'md' : (min-width: $--md),
+  'lg' : (min-width: $--lg)
+);
+
+$--breakpoints-spec: (
+  'xs-only' : (max-width: $--sm - 1),
+  'small-and-up' : (min-width: $--sm),
+  'sm-only': "(min-width: #{$--sm}) and (max-width: #{$--md} - 1)",
+  'sm-and-down': (max-width: $--md - 1),
+  'md-and-up' : (min-width: $--md),
+  'md-only': "(min-width: #{$--md}) and (max-width: #{$--lg } - 1)",
+  'md-and-down': (max-width: $--lg - 1),
+  'lg-only' : (min-width: $--lg),
+);

packages/theme-chalk/src/display.scss

@@ -0,0 +1,12 @@
+@import "common/var";
+@import "mixins/mixins";
+
+.hide {
+  @each $break-point-name, $value in $--breakpoints-spec {
+    &-#{$break-point-name} {
+      @include res($break-point-name, $--breakpoints-spec) {
+        display: none !important;
+      }
+    }
+  }
+}

packages/theme-chalk/src/mixins/mixins.scss

@@ -1,16 +1,17 @@
 @import "function";
 @import "../common/var";
 
-/* Flex
+/* Break-points
  -------------------------- */
-@mixin flex-center {
-  justify-content: center;
-  align-items: center;
-}
-
-@mixin flex-left-center {
-  justify-content: flex-start;
-  align-items: center;
+@mixin res($key, $map: $--breakpoints) {
+  // 循环断点Map，如果存在则返回
+  @if map-has-key($map, $key) {
+    @media only screen and #{inspect(map-get($map, $key))} {
+      @content;
+    }
+  } @else {
+    @warn "Undefeined points: `#{$map}`";
+  }
 }
 
 /* Scrollbar

packages/theme-chalk/src/reset.scss

@@ -1,6 +1,5 @@
 @import 'common/var';
 
-@reset-global pc;
 body {
   font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
   font-weight: 400;