From 6521828f27a20f3f69d389b4432bf38cd89a0c16 Mon Sep 17 00:00:00 2001 From: wayne Date: Tue, 17 Oct 2017 17:01:55 +0800 Subject: [PATCH] Carbon: layout add Visibility support --- examples/docs/en-US/layout.md | 15 +++++++ examples/docs/zh-CN/layout.md | 15 +++++++ packages/col/src/col.js | 2 +- packages/theme-chalk/src/col.scss | 43 +++++++++++++++------ packages/theme-chalk/src/common/var.scss | 24 ++++++++++++ packages/theme-chalk/src/display.scss | 12 ++++++ packages/theme-chalk/src/mixins/mixins.scss | 19 ++++----- packages/theme-chalk/src/reset.scss | 1 - 8 files changed, 108 insertions(+), 23 deletions(-) create mode 100644 packages/theme-chalk/src/display.scss diff --git a/examples/docs/en-US/layout.md b/examples/docs/en-US/layout.md index aee42aff6..6d5bb7b37 100644 --- a/examples/docs/en-US/layout.md +++ b/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 | |---------- |-------------- |---------- |-------------------------------- |-------- | diff --git a/examples/docs/zh-CN/layout.md b/examples/docs/zh-CN/layout.md index 0f4824e57..408122b78 100644 --- a/examples/docs/zh-CN/layout.md +++ b/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 | 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------------- |---------- |-------------------------------- |-------- | diff --git a/packages/col/src/col.js b/packages/col/src/col.js index 6a312c1ac..563002838 100644 --- a/packages/col/src/col.js +++ b/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]}` diff --git a/packages/theme-chalk/src/col.scss b/packages/theme-chalk/src/col.scss index 746ef8092..045709f73 100644 --- a/packages/theme-chalk/src/col.scss +++ b/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%; diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss index 9bdefb3d9..5bfbdc145 100644 --- a/packages/theme-chalk/src/common/var.scss +++ b/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), +); diff --git a/packages/theme-chalk/src/display.scss b/packages/theme-chalk/src/display.scss new file mode 100644 index 000000000..f78c6a285 --- /dev/null +++ b/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; + } + } + } +} diff --git a/packages/theme-chalk/src/mixins/mixins.scss b/packages/theme-chalk/src/mixins/mixins.scss index f0732c1e4..fa05565d6 100644 --- a/packages/theme-chalk/src/mixins/mixins.scss +++ b/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 diff --git a/packages/theme-chalk/src/reset.scss b/packages/theme-chalk/src/reset.scss index cc3b230c9..798f4a8ab 100644 --- a/packages/theme-chalk/src/reset.scss +++ b/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;