From 2b30471488fecb9b5067f92043cd3746151472ea Mon Sep 17 00:00:00 2001 From: liaoxuezhi <2betop.cn@gmail.com> Date: Fri, 27 Nov 2020 21:21:20 +0800 Subject: [PATCH] =?UTF-8?q?utilities=20=E5=8D=95=E7=8B=AC=E6=8B=BF?= =?UTF-8?q?=E5=87=BA=E6=9D=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/index.html | 126 +- scss/_utilities.scss | 1631 ++++++++++++++++- scss/themes/cxd-utilities.scss | 4 - scss/themes/dark-utilities.scss | 4 - scss/themes/default-utilities.scss | 4 - scss/utilities.scss | 67 + .../background/_background-color.scss | 41 - scss/utilities/border/_border-width.scss | 170 -- scss/utilities/effect/_box-shadow.scss | 18 - scss/utilities/flex/_grow.scss | 5 - scss/utilities/layout/_clear.scss | 9 - scss/utilities/layout/_display.scss | 4 - scss/utilities/layout/_overflow.scss | 14 - scss/utilities/layout/_position.scss | 16 - scss/utilities/layout/_visibility.scss | 6 - scss/utilities/sizing/_width.scss | 108 -- scss/utilities/spacing/_margin.scss | 320 ---- scss/utilities/spacing/_padding.scss | 246 --- .../utilities/typography/_letter-spacing.scss | 12 - scss/utilities/typography/_line-height.scss | 16 - scss/utilities/typography/_text-align.scss | 12 - scss/utilities/typography/_text-color.scss | 10 - .../typography/_text-decoration.scss | 8 - scss/utilities/typography/_text-overflow.scss | 7 - .../utilities/typography/_text-transform.scss | 4 - .../utilities/typography/_vertical-align.scss | 15 - scss/utilities/typography/_whitespace.scss | 5 - scss/utilities/typography/_word-break.scss | 6 - scss/utilities/widgets/_avatar.scss | 70 - scss/utilities/widgets/_hbox.scss | 14 - scss/utilities/widgets/_label.scss | 62 - scss/utilities/widgets/_line.scss | 26 - scss/utilities/widgets/_scrollable.scss | 30 - scss/utilities/widgets/_thumb.scss | 54 - scss/utilities/widgets/_vbox.scss | 38 - 35 files changed, 1652 insertions(+), 1530 deletions(-) delete mode 100644 scss/themes/cxd-utilities.scss delete mode 100644 scss/themes/dark-utilities.scss delete mode 100644 scss/themes/default-utilities.scss create mode 100644 scss/utilities.scss delete mode 100644 scss/utilities/widgets/_avatar.scss delete mode 100644 scss/utilities/widgets/_hbox.scss delete mode 100644 scss/utilities/widgets/_label.scss delete mode 100644 scss/utilities/widgets/_line.scss delete mode 100644 scss/utilities/widgets/_scrollable.scss delete mode 100644 scss/utilities/widgets/_thumb.scss delete mode 100644 scss/utilities/widgets/_vbox.scss diff --git a/examples/index.html b/examples/index.html index 290cf996e..045c45ab9 100644 --- a/examples/index.html +++ b/examples/index.html @@ -1,81 +1,55 @@ - - - amis - 低代码前端框架 - - - - - - - - - - - - - - - - - - - - - -
- - - - + +
+ + + + + \ No newline at end of file diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 1b1eb3272..e62b7b1ad 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -3,81 +3,1252 @@ */ // background -@import './utilities/background/background-color'; -@import './utilities/border/border-color'; -@import './utilities/border/border-radius'; -@import './utilities/border/border-width'; -@import './utilities/border/border-style'; +.bg-light { + @include color-variant($light, 2%, 3%, 3%, 5%); + color: $text-color; +} -@import './utilities/layout/box-sizing'; -@import './utilities/layout/clear'; -@import './utilities/layout/display'; -@import './utilities/layout/float'; -@import './utilities/layout/overflow'; -@import './utilities/layout/position'; -@import './utilities/layout/top-right-bottom-left'; -@import './utilities/layout/visibility'; -@import './utilities/layout/z-index'; +.bg-dark { + @include color-variant($dark, 5%, 10%, 5%, 10%); + @include font-variant($dark); +} -@import './utilities/flex/direction'; -@import './utilities/flex/flex'; -@import './utilities/flex/grow'; -@import './utilities/flex/order'; -@import './utilities/flex/shrink'; -@import './utilities/flex/wrap'; +.bg-black { + @include color-variant($black, 5%, 10%, 5%, 10%); + @include font-variant($black); +} -@import './utilities/grid/auto-columns'; -@import './utilities/grid/auto-flow'; -@import './utilities/grid/auto-rows'; -@import './utilities/grid/column-start-end'; -@import './utilities/grid/columns'; -@import './utilities/grid/gap'; -@import './utilities/grid/row-start-end'; -@import './utilities/grid/rows'; +.bg-primary { + @include color-variant($primary, 5%, 10%, 5%, 10%); + @include font-variant($primary); +} -@import './utilities/box-alignment/align-content'; -@import './utilities/box-alignment/align-items'; -@import './utilities/box-alignment/align-self'; -@import './utilities/box-alignment/justify-content'; -@import './utilities/box-alignment/justify-items'; -@import './utilities/box-alignment/justify-self'; -@import './utilities/box-alignment/place-content'; -@import './utilities/box-alignment/place-items'; -@import './utilities/box-alignment/place-self'; +.bg-success { + @include color-variant($success, 5%, 10%, 5%, 10%); + @include font-variant($success); +} -@import './utilities/effect/box-shadow'; +.bg-info { + @include color-variant($info, 5%, 10%, 5%, 10%); + @include font-variant($info); +} -@import './utilities/spacing/margin'; -@import './utilities/spacing/padding'; -@import './utilities/spacing/space-between'; +.bg-warning { + @include color-variant($warning, 5%, 10%, 5%, 10%); + @include font-variant($warning); +} -@import './utilities/sizing/width'; -@import './utilities/sizing/height'; +.bg-danger { + @include color-variant($danger, 5%, 10%, 5%, 10%); + @include font-variant($danger); +} -@import './utilities/typography/font-size'; -@import './utilities/typography/font-style'; -@import './utilities/typography/font-weight'; -@import './utilities/typography/line-height'; -@import './utilities/typography/list-style-type'; -@import './utilities/typography/text-align'; -@import './utilities/typography/text-color'; -@import './utilities/typography/text-decoration'; -@import './utilities/typography/text-transform'; -@import './utilities/typography/whitespace'; -@import './utilities/typography/word-break'; +.bg-white { + @include color-variant($white, 5%, 10%, 5%, 10%); + color: $text-color; +} -@import './utilities/widgets/label'; -@import './utilities/widgets/hbox'; -@import './utilities/widgets/vbox'; -@import './utilities/widgets/thumb'; -@import './utilities/widgets/scrollable'; -@import './utilities/widgets/line'; +.bg-none { + background: none !important; +} + +// text colors +@include text-wariant($primary, primary); +@include text-wariant($info, info); +@include text-wariant($success, success); +@include text-wariant($warning, warning); +@include text-wariant($danger, danger); +@include text-wariant($dark, dark); +@include text-wariant($white, white); +@include text-wariant($black, black); + +.text-muted { + color: $text--muted-color; +} + +.text-loud { + color: $text--loud-color; +} + +.clearfix { + @include clearfix(); +} + +.pos-rlt { + position: relative; +} + +.pos-stc { + position: static !important; +} + +.pos-abt { + position: absolute; +} + +.pos-fix { + position: fixed; +} + +.show { + visibility: visible; +} + +.line { + // width: 100%; 不要设置 100%， 否则跟 pull-in 配合使用时候，宽度为不对。 + height: 2px; + margin: 10px 0; + font-size: 0; + overflow: hidden; +} + +.line-xs { + margin: 0; +} + +.line-lg { + margin-top: 15px; + margin-bottom: 15px; +} + +.line-dashed { + border-style: dashed !important; + background-color: transparent; + border-width: 0; +} + +.no-line { + border-width: 0; +} + +.no-border, +.no-borders { + border-color: transparent; + border-width: 0; +} + +.no-b-t { + border-top-width: 0; +} + +.no-b-r { + border-right-width: 0; +} + +.no-b-b { + border-bottom-width: 0; +} + +.no-b-l { + border-left-width: 0; +} + +.no-radius { + border-radius: 0; +} + +.block { + display: block; +} + +.block.hide { + display: none; +} + +.inline { + display: inline-block !important; +} + +.none { + display: none; +} + +.pull-none { + float: none; +} + +.rounded { + border-radius: 500px; +} + +.clear { + display: block; + overflow: hidden; +} + +.no-bg { + background-color: transparent; + color: inherit; +} .no-select { user-select: none; } +.l-h { + line-height: $lineHeightBase; +} + +.l-h-0x { + line-height: 0; +} + +.l-h-1x { + line-height: 1.2; +} + +.l-h-2x { + line-height: 2em; +} + +.l-s-1x { + letter-spacing: 1; +} + +.l-s-2x { + letter-spacing: 2; +} + +.l-s-3x { + letter-spacing: 3; +} + +.font-normal { + font-weight: normal; +} + +.font-thin { + font-weight: 300; +} + +.font-bold { + font-weight: 700; +} + +.text-5x { + font-size: 5em; +} + +.text-4x { + font-size: 4em; +} + +.text-3x { + font-size: 3em; +} + +.text-2x { + font-size: 2em; +} + +.text-xl { + font-size: $fontSizeXl !important; +} + +.text-lg { + font-size: $fontSizeLg !important; +} + +.text-md { + font-size: $fontSizeMd !important; +} + +.text-base { + font-size: $fontSizeBase !important; +} + +.text-sm { + font-size: $fontSizeSm !important; +} + +.text-xs { + font-size: $fontSizeXs !important; +} + +.text-xxs { + text-indent: -9999px; +} + +.text-ellipsis { + display: block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.text-u-c { + text-transform: uppercase; +} + +.text-l-t { + text-decoration: line-through; +} + +.text-u-l { + text-decoration: underline; +} + +.text-left { + text-align: left; +} + +.text-center { + text-align: center; +} + +.text-right { + text-align: right; +} + +.box-shadow { + box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(0, 0, 0, 0.05); +} + +.box-shadow-lg { + box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.05); +} + +.text-shadow { + font-size: 170px; + text-shadow: 0 1px 0 $borderColor, 0 2px 0 lighten($borderColor, 10%), + 0 5px 10px rgba(0, 0, 0, 0.125), 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.no-shadow { + box-shadow: none !important; +} + +.wrapper-xs { + padding: 5px; +} + +.wrapper-sm { + padding: 10px; +} + +.wrapper { + padding: 15px; +} + +.wrapper-md { + padding: 20px; +} + +.wrapper-lg { + padding: 30px; +} + +.wrapper-xl { + padding: 50px; +} + +.padder-lg { + padding-left: 30px; + padding-right: 30px; +} + +.padder-md { + padding-left: 20px; + padding-right: 20px; +} + +.padder { + padding-left: 15px; + padding-right: 15px; +} + +.padder-v-xs { + padding-top: 5px; + padding-bottom: 5px; +} + +.padder-v-sm { + padding-top: 10px; + padding-bottom: 10px; +} + +.padder-v { + padding-top: 15px; + padding-bottom: 15px; +} + +.padder-v-md { + padding-top: 20px; + padding-bottom: 20px; +} + +.padder-v-lg { + padding-top: 30px; + padding-bottom: 30px; +} + +.no-padder { + padding: 0 !important; +} + +.pull-in { + margin-left: -15px; + margin-right: -15px; +} + +.pull-in-md { + margin-left: -20px; + margin-right: -20px; +} + +.pull-in-sm { + margin-left: -10px; + margin-right: -10px; +} + +.pull-out { + margin: -10px -15px; +} + +.b { + border: 1px solid rgba(0, 0, 0, 0.05); +} + +.b-a { + border: 1px solid $borderColor; +} + +.b-t { + border-top: 1px solid $borderColor; +} + +.b-t-none { + border-top-width: 0; +} + +.b-r { + border-right: 1px solid $borderColor; +} + +.b-r-none { + border-right-width: 0; +} + +.b-b { + border-bottom: 1px solid $borderColor; +} + +.b-b-none { + border-bottom-width: 0; +} + +.b-l { + border-left: 1px solid $borderColor; +} + +.b-l-none { + border-left-width: 0; +} + +.b-light { + border-color: $light; +} + +.b-dark { + border-color: $dark; +} + +.b-black { + border-color: $dark; +} + +.b-primary { + border-color: $primary; +} + +.b-success { + border-color: $success; +} + +.b-info { + border-color: $info; +} + +.b-warning { + border-color: $warning; +} + +.b-danger { + border-color: $danger; +} + +.b-white { + border-color: #fff; +} + +.b-dashed { + border-style: dashed !important; +} + +.b-l-light { + border-left-color: $light; +} + +.b-l-dark { + border-left-color: $dark; +} + +.b-l-black { + border-left-color: $dark; +} + +.b-l-primary { + border-left-color: $primary; +} + +.b-l-success { + border-left-color: $success; +} + +.b-l-info { + border-left-color: $info; +} + +.b-l-warning { + border-left-color: $warning; +} + +.b-l-danger { + border-left-color: $danger; +} + +.b-l-white { + border-left-color: #fff; +} + +.b-l-2x { + border-left-width: 2px; +} + +.b-l-3x { + border-left-width: 3px; +} + +.b-l-4x { + border-left-width: 4px; +} + +.b-l-5x { + border-left-width: 5px; +} + +.b-2x { + border-width: 2px; +} + +.b-3x { + border-width: 3px; +} + +.b-4x { + border-width: 4px; +} + +.b-5x { + border-width: 5px; +} + +.r { + border-radius: $borderRadius $borderRadius $borderRadius $borderRadius; +} + +.r-2x { + border-radius: $borderRadiusMd; +} + +.r-3x { + border-radius: $borderRadiusLg; +} + +.r-l { + border-radius: $borderRadius 0 0 $borderRadius; +} + +.r-r { + border-radius: 0 $borderRadius $borderRadius 0; +} + +.r-t { + border-radius: $borderRadius $borderRadius 0 0; +} + +.r-b { + border-radius: 0 0 $borderRadius $borderRadius; +} + +.m-xxs { + margin: 2px 4px; +} + +.m-xs { + margin: 5px; +} + +.m-sm { + margin: 10px; +} + +.m { + margin: 15px; +} + +.m-md { + margin: 20px; +} + +.m-lg { + margin: 30px; +} + +.m-xl { + margin: 50px; +} + +.m-n, +.m-none { + margin: 0 !important; +} + +.m-l-none { + margin-left: 0 !important; +} + +.m-l-xs { + margin-left: 5px; +} + +.m-l-sm { + margin-left: 10px; +} + +.m-l { + margin-left: 15px; +} + +.m-l-md { + margin-left: 20px; +} + +.m-l-lg { + margin-left: 30px; +} + +.m-l-xl { + margin-left: 40px; +} + +.m-l-xxl { + margin-left: 50px; +} + +.m-l-n-xxs { + margin-left: -1px; +} + +.m-l-n-xs { + margin-left: -5px; +} + +.m-l-n-sm { + margin-left: -10px; +} + +.m-l-n { + margin-left: -15px; +} + +.m-l-n-md { + margin-left: -20px; +} + +.m-l-n-lg { + margin-left: -30px; +} + +.m-l-n-xl { + margin-left: -40px; +} + +.m-l-n-xxl { + margin-left: -50px; +} + +.m-t-none { + margin-top: 0 !important; +} + +.m-t-xxs { + margin-top: 1px; +} + +.m-t-xs { + margin-top: 5px; +} + +.m-t-sm { + margin-top: 10px; +} + +.m-t { + margin-top: 15px; +} + +.m-t-md { + margin-top: 20px; +} + +.m-t-lg { + margin-top: 30px; +} + +.m-t-xl { + margin-top: 40px; +} + +.m-t-xxl { + margin-top: 50px; +} + +.m-t-n-xxs { + margin-top: -1px; +} + +.m-t-n-xs { + margin-top: -5px; +} + +.m-t-n-sm { + margin-top: -10px; +} + +.m-t-n { + margin-top: -15px; +} + +.m-t-n-md { + margin-top: -20px; +} + +.m-t-n-lg { + margin-top: -30px; +} + +.m-t-n-xl { + margin-top: -40px; +} + +.m-t-n-xxl { + margin-top: -50px; +} + +.m-r-none { + margin-right: 0 !important; +} + +.m-r-xxs { + margin-right: 1px; +} + +.m-r-xs { + margin-right: 5px; +} + +.m-r-sm { + margin-right: 10px; +} + +.m-r { + margin-right: 15px; +} + +.m-r-md { + margin-right: 20px; +} + +.m-r-lg { + margin-right: 30px; +} + +.m-r-xl { + margin-right: 40px; +} + +.m-r-xxl { + margin-right: 50px; +} + +.m-r-n-xxs { + margin-right: -1px; +} + +.m-r-n-xs { + margin-right: -5px; +} + +.m-r-n-sm { + margin-right: -10px; +} + +.m-r-n { + margin-right: -15px; +} + +.m-r-n-md { + margin-right: -20px; +} + +.m-r-n-lg { + margin-right: -30px; +} + +.m-r-n-xl { + margin-right: -40px; +} + +.m-r-n-xxl { + margin-right: -50px; +} + +.m-b-none { + margin-bottom: 0 !important; +} + +.m-b-xxs { + margin-bottom: 1px; +} + +.m-b-xs { + margin-bottom: 5px; +} + +.m-b-sm { + margin-bottom: 10px; +} + +.m-b { + margin-bottom: 15px; +} + +.m-b-md { + margin-bottom: 20px; +} + +.m-b-lg { + margin-bottom: 30px; +} + +.m-b-xl { + margin-bottom: 40px; +} + +.m-b-xxl { + margin-bottom: 50px; +} + +.m-b-n-xxs { + margin-bottom: -1px; +} + +.m-b-n-xs { + margin-bottom: -5px; +} + +.m-b-n-sm { + margin-bottom: -10px; +} + +.m-b-n { + margin-bottom: -15px; +} + +.m-b-n-md { + margin-bottom: -20px; +} + +.m-b-n-lg { + margin-bottom: -30px; +} + +.m-b-n-xl { + margin-bottom: -40px; +} + +.m-b-n-xxl { + margin-bottom: -50px; +} + +.p-xxs { + padding: 2px 4px; +} + +.p-xs { + padding: 5px; +} + +.p-sm { + padding: 10px; +} + +.p { + padding: 15px; +} + +.p-md { + padding: 20px; +} + +.p-lg { + padding: 30px; +} + +.p-xl { + padding: 50px; +} + +.p-n, +.p-none { + padding: 0 !important; +} + +.p-l-none { + padding-left: 0 !important; +} + +.p-l-xs { + padding-left: 5px; +} + +.p-l-sm { + padding-left: 10px; +} + +.p-l { + padding-left: 15px; +} + +.p-l-md { + padding-left: 20px; +} + +.p-l-lg { + padding-left: 30px; +} + +.p-l-xl { + padding-left: 40px; +} + +.p-l-xxl { + padding-left: 50px; +} + +.p-t-none { + padding-top: 0 !important; +} + +.p-t-xxs { + padding-top: 1px; +} + +.p-t-xs { + padding-top: 5px; +} + +.p-t-sm { + padding-top: 10px; +} + +.p-t { + padding-top: 15px; +} + +.p-t-md { + padding-top: 20px; +} + +.p-t-lg { + padding-top: 30px; +} + +.p-t-xl { + padding-top: 40px; +} + +.p-t-xxl { + padding-top: 50px; +} + +.p-t-n-xxs { + padding-top: -1px; +} + +.p-r-none { + padding-right: 0 !important; +} + +.p-r-xxs { + padding-right: 1px; +} + +.p-r-xs { + padding-right: 5px; +} + +.p-r-sm { + padding-right: 10px; +} + +.p-r { + padding-right: 15px; +} + +.p-r-md { + padding-right: 20px; +} + +.p-r-lg { + padding-right: 30px; +} + +.p-r-xl { + padding-right: 40px; +} + +.p-r-xxl { + padding-right: 50px; +} + +.p-b-none { + padding-bottom: 0 !important; +} + +.p-b-xxs { + padding-bottom: 1px; +} + +.p-b-xs { + padding-bottom: 5px; +} + +.p-b-sm { + padding-bottom: 10px; +} + +.p-b { + padding-bottom: 15px; +} + +.p-b-md { + padding-bottom: 20px; +} + +.p-b-lg { + padding-bottom: 30px; +} + +.p-b-xl { + padding-bottom: 40px; +} + +.p-b-xxl { + padding-bottom: 50px; +} + +.avatar { + position: relative; + display: block; + border-radius: 500px; + white-space: nowrap; + + & img { + border-radius: 500px; + width: 100%; + } + + & i { + position: absolute; + left: 0; + top: 0; + width: 10px; + height: 10px; + margin: 2px; + border-width: 2px; + border-style: solid; + border-radius: 100%; + + &.right { + left: auto; + right: 0; + } + + &.bottom { + left: auto; + top: auto; + bottom: 0; + right: 0; + } + + &.left { + top: auto; + bottom: 0; + } + + &.on { + background-color: $success; + } + + &.off { + background-color: $text--muted-color; + } + + &.busy { + background-color: $danger; + } + + &.away { + background-color: $warning; + } + } + + &.thumb-md i { + width: 12px; + height: 12px; + margin: 3px; + } + + &.thumb-sm i { + margin: 1px; + } + + &.thumb-xs i { + margin: 0; + } +} + +.w-1x { + width: 1em; +} + +.w-2x { + width: 2em; +} + +.w-3x { + width: 3em; +} + +.w-xxs { + width: 60px; +} + +.h-xxs { + height: 60px; +} + +.w-xs { + width: 90px; +} + +.h-xs { + height: 90px; +} + +.w-ssm { + width: 120px; +} + +.w-sm { + width: 150px; +} + +.h-sm { + height: 150px; +} + +.h-ssm { + height: 120px; +} + +.w { + width: 200px; +} + +.h { + height: 200px; +} + +.w-md { + width: 240px; +} + +.h-md { + height: 240px; +} + +.w-lg { + width: 280px; +} + +.h-lg { + height: 280px; +} + +.w-xl { + width: 320px; +} + +.h-xl { + height: 320px; +} + +.w-xxl { + width: 360px; +} + +.h-xxl { + height: 360px; +} + +.w-xxxl { + width: 420px; +} + +.h-xxxl { + height: 420px; +} + +.w-full { + width: 100%; +} + +.w-auto { + width: auto; +} + +.h-auto { + height: auto; +} + +.h-full { + height: 100%; +} + +.no-grow { + flex-grow: unset !important; + flex-basis: unset !important; +} + +.nowrap { + white-space: nowrap; + flex-wrap: nowrap; +} + @include media-breakpoint-up(sm) { .#{$ns}Form-col { &.w, @@ -91,50 +1262,165 @@ } } -// .img-full { -// width: 100%; +.thumb-xl { + width: 128px; + display: inline-block; +} -// & img { -// width: 100%; -// } -// } +.thumb-lg { + width: 96px; + display: inline-block; +} -// .hover-action { -// display: none; -// } +.thumb-md { + width: 64px; + display: inline-block; +} -// .hover-rotate { -// transition: all 0.2s ease-in-out 0.1s; -// } +.thumb { + width: 50px; + display: inline-block; +} -// .hover-anchor:hover, -// .hover-anchor:focus, -// .hover-anchor:active { -// & > .hover-action { -// display: inherit; -// } +.thumb-sm { + width: 40px; + display: inline-block; +} -// & > .hover-rotate { -// transform: rotate(90deg); -// } -// } +.thumb-xs { + width: 34px; + display: inline-block; +} -// .backdrop { -// position: absolute; -// top: 0; -// right: 0; -// bottom: 0; -// left: 0; -// z-index: 1050; +.thumb-xxs { + width: 30px; + display: inline-block; +} -// &.fade { -// opacity: 0; -// } +.thumb-wrapper { + padding: 2px; + border: 1px solid $borderColor; +} -// &.in { -// opacity: 0.8; -// } -// } +.thumb, +.thumb-xxs, +.thumb-xs, +.thumb-sm, +.thumb-md, +.thumb-lg, +.thumb-btn, +.thumb-xl { + & img { + height: auto; + max-width: 100%; + vertical-align: middle; + } +} + +.img-full { + width: 100%; + + & img { + width: 100%; + } +} + +.v-top { + vertical-align: top !important; + align-self: flex-start; +} + +.v-middle { + vertical-align: middle !important; + align-self: center; +} + +.v-bottom { + vertical-align: bottom !important; + align-self: flex-end; +} + +.scrollable { + overflow-x: hidden; + overflow-y: auto; + -webkit-overflow-scrolling: touch; + + &.hover { + &, + & > .cell-inner { + overflow-y: hidden !important; + } + + &:hover, + &:focus, + &:active { + overflow: visible; + overflow-y: auto; + + & > .cell-inner { + overflow-y: auto !important; + } + } + } + + .smart & { + &, + & > .cell-inner { + overflow-y: auto !important; + } + } +} + +.scroll-x, +.scroll-y { + overflow: hidden; + -webkit-overflow-scrolling: touch; +} + +.scroll-y { + overflow-y: auto; +} + +.scroll-x { + overflow-x: auto; +} + +.hover-action { + display: none; +} + +.hover-rotate { + transition: all 0.2s ease-in-out 0.1s; +} + +.hover-anchor:hover, +.hover-anchor:focus, +.hover-anchor:active { + & > .hover-action { + display: inherit; + } + + & > .hover-rotate { + transform: rotate(90deg); + } +} + +.backdrop { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1050; + + &.fade { + opacity: 0; + } + + &.in { + opacity: 0.8; + } +} .col-xs-2-4, .col-sm-2-4, @@ -162,6 +1448,145 @@ float: left; } +.invisible { + position: absolute !important; + clip: rect(1px 1px 1px 1px); + clip: rect(1px, 1px, 1px, 1px); +} + +.invisible2 { + visibility: hidden; +} + +.hbox { + display: table; + table-layout: fixed; + border-spacing: 0; + width: 100%; + height: 100%; + + & > .col { + display: table-cell; + vertical-align: top; + height: 100%; + float: none; + } +} + +.vbox { + display: table; + border-spacing: 0; + position: relative; + width: 100%; + height: 100%; + min-height: 240px; + + & .row-row { + display: table-row; + height: 100%; + + & .cell { + position: relative; + height: 100%; + width: 100%; + + .ie & { + display: table-cell; + overflow: auto; + + & .cell-inner { + overflow: visible !important; + } + } + + & .cell-inner { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + -webkit-overflow-scrolling: touch; + overflow: auto; + } + } + } +} + +.word-break { + white-space: normal; + word-break: break-all; + word-wrap: break-word; +} + +// +// Labels +// -------------------------------------------------- + +.label { + display: inline; + padding: 0.2em 0.6em 0.3em; + font-size: 75%; + font-weight: 700; + line-height: 1; + color: $label-color; + text-align: center; + white-space: nowrap; + vertical-align: baseline; + border-radius: 0.25em; + + // Empty labels collapse automatically (not available in IE8) + &:empty { + display: none; + } + + // Quick fix for labels in buttons + .btn & { + position: relative; + top: -1px; + } +} +a.label { + &:hover, + &:focus { + color: $label-link--hover-color; + text-decoration: none; + cursor: pointer; + } +} + +// Colors +// Contextual variations (linked labels get darker on :hover) + +.label-default { + @include label-variant($label--default-bg); +} + +.label-primary { + @include label-variant($label--primary-bg); +} + +.label-success { + @include label-variant($label--success-bg); +} + +.label-info { + @include label-variant($label--info-bg); +} + +.label-warning { + @include label-variant($label--warning-bg); +} + +.label-danger { + @include label-variant($label--danger-bg); +} + +@keyframes apearSensor { + from { + opacity: 0; + } +} + @media (min-width: 768px) { .col-sm-2-4 { width: 20%; @@ -235,6 +1660,20 @@ display: block !important; } + .row-2 [class*='col'] { + width: 50%; + float: left; + } + + .row-2 .col-0 { + clear: none; + } + + .row-2 li:nth-child(odd) { + clear: left; + margin-left: 0; + } + .text-center-xs { text-align: center; } diff --git a/scss/themes/cxd-utilities.scss b/scss/themes/cxd-utilities.scss deleted file mode 100644 index 0dc50eaeb..000000000 --- a/scss/themes/cxd-utilities.scss +++ /dev/null @@ -1,4 +0,0 @@ -@import './cxd-variables'; - -@import '../mixins'; -@import '../utilities'; diff --git a/scss/themes/dark-utilities.scss b/scss/themes/dark-utilities.scss deleted file mode 100644 index 9b0baf140..000000000 --- a/scss/themes/dark-utilities.scss +++ /dev/null @@ -1,4 +0,0 @@ -@import './dark-variables'; - -@import '../mixins'; -@import '../utilities'; diff --git a/scss/themes/default-utilities.scss b/scss/themes/default-utilities.scss deleted file mode 100644 index d98a92381..000000000 --- a/scss/themes/default-utilities.scss +++ /dev/null @@ -1,4 +0,0 @@ -@import './default-variables'; - -@import '../mixins'; -@import '../utilities'; diff --git a/scss/utilities.scss b/scss/utilities.scss new file mode 100644 index 000000000..2dea6fa8a --- /dev/null +++ b/scss/utilities.scss @@ -0,0 +1,67 @@ +@import './variables'; +@import './mixins'; + +// background +@import './utilities/background/background-color'; + +@import './utilities/border/border-color'; +@import './utilities/border/border-radius'; +@import './utilities/border/border-width'; +@import './utilities/border/border-style'; + +@import './utilities/layout/box-sizing'; +@import './utilities/layout/clear'; +@import './utilities/layout/display'; +@import './utilities/layout/float'; +@import './utilities/layout/overflow'; +@import './utilities/layout/position'; +@import './utilities/layout/top-right-bottom-left'; +@import './utilities/layout/visibility'; +@import './utilities/layout/z-index'; + +@import './utilities/flex/direction'; +@import './utilities/flex/flex'; +@import './utilities/flex/grow'; +@import './utilities/flex/order'; +@import './utilities/flex/shrink'; +@import './utilities/flex/wrap'; + +@import './utilities/grid/auto-columns'; +@import './utilities/grid/auto-flow'; +@import './utilities/grid/auto-rows'; +@import './utilities/grid/column-start-end'; +@import './utilities/grid/columns'; +@import './utilities/grid/gap'; +@import './utilities/grid/row-start-end'; +@import './utilities/grid/rows'; + +@import './utilities/box-alignment/align-content'; +@import './utilities/box-alignment/align-items'; +@import './utilities/box-alignment/align-self'; +@import './utilities/box-alignment/justify-content'; +@import './utilities/box-alignment/justify-items'; +@import './utilities/box-alignment/justify-self'; +@import './utilities/box-alignment/place-content'; +@import './utilities/box-alignment/place-items'; +@import './utilities/box-alignment/place-self'; + +@import './utilities/effect/box-shadow'; + +@import './utilities/spacing/margin'; +@import './utilities/spacing/padding'; +@import './utilities/spacing/space-between'; + +@import './utilities/sizing/width'; +@import './utilities/sizing/height'; + +@import './utilities/typography/font-size'; +@import './utilities/typography/font-style'; +@import './utilities/typography/font-weight'; +@import './utilities/typography/line-height'; +@import './utilities/typography/list-style-type'; +@import './utilities/typography/text-align'; +@import './utilities/typography/text-color'; +@import './utilities/typography/text-decoration'; +@import './utilities/typography/text-transform'; +@import './utilities/typography/whitespace'; +@import './utilities/typography/word-break'; diff --git a/scss/utilities/background/_background-color.scss b/scss/utilities/background/_background-color.scss index 81cfe675a..76f3b438a 100644 --- a/scss/utilities/background/_background-color.scss +++ b/scss/utilities/background/_background-color.scss @@ -40,44 +40,3 @@ @include bg-colors('.' + selector-escape('hover:'), ':hover'); @include bg-colors('.' + selector-escape('active:'), '.is-active'); @include bg-colors('.group:hover .' + selector-escape('group-hover:')); - -// 这是原来的，看来是有些 breakchange -// .bg-light { -// @include color-variant($light, 2%, 3%, 3%, 5%); -// color: $text-color; -// } -// .bg-dark { -// @include color-variant($dark, 5%, 10%, 5%, 10%); -// @include font-variant($dark); -// } -// .bg-black { -// @include color-variant($black, 5%, 10%, 5%, 10%); -// @include font-variant($black); -// } -// .bg-primary { -// @include color-variant($primary, 5%, 10%, 5%, 10%); -// @include font-variant($primary); -// } -// .bg-success { -// @include color-variant($success, 5%, 10%, 5%, 10%); -// @include font-variant($success); -// } -// .bg-info { -// @include color-variant($info, 5%, 10%, 5%, 10%); -// @include font-variant($info); -// } -// .bg-warning { -// @include color-variant($warning, 5%, 10%, 5%, 10%); -// @include font-variant($warning); -// } -// .bg-danger { -// @include color-variant($danger, 5%, 10%, 5%, 10%); -// @include font-variant($danger); -// } -// .bg-white { -// @include color-variant($white, 5%, 10%, 5%, 10%); -// color: $text-color; -// } -// .bg-none { -// background: none !important; -// } diff --git a/scss/utilities/border/_border-width.scss b/scss/utilities/border/_border-width.scss index efaba72b8..25d14b3dd 100644 --- a/scss/utilities/border/_border-width.scss +++ b/scss/utilities/border/_border-width.scss @@ -21,176 +21,6 @@ } } -.b { - border: 1px solid rgba(0, 0, 0, 0.05); -} - -.b-a { - border: 1px solid $borderColor; -} - -.b-t { - border-top: 1px solid $borderColor; -} - -.b-t-none { - border-top-width: 0; -} - -.b-r { - border-right: 1px solid $borderColor; -} - -.b-r-none { - border-right-width: 0; -} - -.b-b { - border-bottom: 1px solid $borderColor; -} - -.b-b-none { - border-bottom-width: 0; -} - -.b-l { - border-left: 1px solid $borderColor; -} - -.b-l-none { - border-left-width: 0; -} - -.b-light { - border-color: $light; -} - -.b-dark { - border-color: $dark; -} - -.b-black { - border-color: $dark; -} - -.b-primary { - border-color: $primary; -} - -.b-success { - border-color: $success; -} - -.b-info { - border-color: $info; -} - -.b-warning { - border-color: $warning; -} - -.b-danger { - border-color: $danger; -} - -.b-white { - border-color: #fff; -} - -.b-dashed { - border-style: dashed !important; -} - -.b-l-light { - border-left-color: $light; -} - -.b-l-dark { - border-left-color: $dark; -} - -.b-l-black { - border-left-color: $dark; -} - -.b-l-primary { - border-left-color: $primary; -} - -.b-l-success { - border-left-color: $success; -} - -.b-l-info { - border-left-color: $info; -} - -.b-l-warning { - border-left-color: $warning; -} - -.b-l-danger { - border-left-color: $danger; -} - -.b-l-white { - border-left-color: #fff; -} - -.b-l-2x { - border-left-width: 2px; -} - -.b-l-3x { - border-left-width: 3px; -} - -.b-l-4x { - border-left-width: 4px; -} - -.b-l-5x { - border-left-width: 5px; -} - -.b-2x { - border-width: 2px; -} - -.b-3x { - border-width: 3px; -} - -.b-4x { - border-width: 4px; -} - -.b-5x { - border-width: 5px; -} - -.no-border, -.no-borders { - border-color: transparent; - border-width: 0; -} - -.no-b-t { - border-top-width: 0; -} - -.no-b-r { - border-right-width: 0; -} - -.no-b-b { - border-bottom-width: 0; -} - -.no-b-l { - border-left-width: 0; -} - @include border-widths(); @each $deivce in map-keys($devices) { @include media-device($deivce) { diff --git a/scss/utilities/effect/_box-shadow.scss b/scss/utilities/effect/_box-shadow.scss index 9cd74d78c..376919458 100644 --- a/scss/utilities/effect/_box-shadow.scss +++ b/scss/utilities/effect/_box-shadow.scss @@ -6,24 +6,6 @@ } } -.box-shadow { - box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(0, 0, 0, 0.05); -} - -.box-shadow-lg { - box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.05); -} - -.text-shadow { - font-size: 170px; - text-shadow: 0 1px 0 $borderColor, 0 2px 0 lighten($borderColor, 10%), - 0 5px 10px rgba(0, 0, 0, 0.125), 0 10px 20px rgba(0, 0, 0, 0.2); -} - -.no-shadow { - box-shadow: none !important; -} - @include make-box-shadow(); @each $deivce in map-keys($devices) { @include media-device($deivce) { diff --git a/scss/utilities/flex/_grow.scss b/scss/utilities/flex/_grow.scss index acdeb90ae..e7795e9ab 100644 --- a/scss/utilities/flex/_grow.scss +++ b/scss/utilities/flex/_grow.scss @@ -7,11 +7,6 @@ } } -.no-grow { - flex-grow: unset !important; - flex-basis: unset !important; -} - @include make-flex-grow(); @each $deivce in map-keys($devices) { @include media-device($deivce) { diff --git a/scss/utilities/layout/_clear.scss b/scss/utilities/layout/_clear.scss index 448ead78c..ddfc3784f 100644 --- a/scss/utilities/layout/_clear.scss +++ b/scss/utilities/layout/_clear.scss @@ -16,15 +16,6 @@ } } -.clear { - display: block; - overflow: hidden; -} - -.clearfix { - @include clearfix(); -} - @include make-clear(); @each $deivce in map-keys($devices) { @include media-device($deivce) { diff --git a/scss/utilities/layout/_display.scss b/scss/utilities/layout/_display.scss index e034edb24..30557fb8f 100644 --- a/scss/utilities/layout/_display.scss +++ b/scss/utilities/layout/_display.scss @@ -29,10 +29,6 @@ } } -.show { - visibility: visible; -} - @include make-display(); @each $deivce in map-keys($devices) { @include media-device($deivce) { diff --git a/scss/utilities/layout/_overflow.scss b/scss/utilities/layout/_overflow.scss index be5f1e4de..77e5e3082 100644 --- a/scss/utilities/layout/_overflow.scss +++ b/scss/utilities/layout/_overflow.scss @@ -37,20 +37,6 @@ } } -.scroll-x, -.scroll-y { - overflow: hidden; - -webkit-overflow-scrolling: touch; -} - -.scroll-y { - overflow-y: auto; -} - -.scroll-x { - overflow-x: auto; -} - @include make-overflow(); @each $deivce in map-keys($devices) { @include media-device($deivce) { diff --git a/scss/utilities/layout/_position.scss b/scss/utilities/layout/_position.scss index 672a2dc31..ad7a82d54 100644 --- a/scss/utilities/layout/_position.scss +++ b/scss/utilities/layout/_position.scss @@ -13,22 +13,6 @@ display: $value; } } - - #{$prefix}pos-rlt { - position: relative; - } - - #{$prefix}pos-stc { - position: static !important; - } - - #{$prefix}pos-abt { - position: absolute; - } - - #{$prefix}pos-fix { - position: fixed; - } } @include make-position(); diff --git a/scss/utilities/layout/_visibility.scss b/scss/utilities/layout/_visibility.scss index f006b367d..bea2cd0e7 100644 --- a/scss/utilities/layout/_visibility.scss +++ b/scss/utilities/layout/_visibility.scss @@ -4,12 +4,6 @@ } #{$prefix}invisible { - position: absolute !important; - clip: rect(1px 1px 1px 1px); - clip: rect(1px, 1px, 1px, 1px); - } - - #{$prefix}invisible2 { visibility: hidden; } } diff --git a/scss/utilities/sizing/_width.scss b/scss/utilities/sizing/_width.scss index 9bdcd7e5e..c7401ee70 100644 --- a/scss/utilities/sizing/_width.scss +++ b/scss/utilities/sizing/_width.scss @@ -53,111 +53,3 @@ @include make-widths('.' + selector-escape($deivce + ':')); } } - -// .w-1x { -// width: 1em; -// } - -// .w-2x { -// width: 2em; -// } - -// .w-3x { -// width: 3em; -// } - -// .w-xxs { -// width: 60px; -// } - -// .h-xxs { -// height: 60px; -// } - -// .w-xs { -// width: 90px; -// } - -// .h-xs { -// height: 90px; -// } - -// .w-ssm { -// width: 120px; -// } - -// .w-sm { -// width: 150px; -// } - -// .h-sm { -// height: 150px; -// } - -// .h-ssm { -// height: 120px; -// } - -// .w { -// width: 200px; -// } - -// .h { -// height: 200px; -// } - -// .w-md { -// width: 240px; -// } - -// .h-md { -// height: 240px; -// } - -// .w-lg { -// width: 280px; -// } - -// .h-lg { -// height: 280px; -// } - -// .w-xl { -// width: 320px; -// } - -// .h-xl { -// height: 320px; -// } - -// .w-xxl { -// width: 360px; -// } - -// .h-xxl { -// height: 360px; -// } - -// .w-xxxl { -// width: 420px; -// } - -// .h-xxxl { -// height: 420px; -// } - -// .w-full { -// width: 100%; -// } - -// .w-auto { -// width: auto; -// } - -// .h-auto { -// height: auto; -// } - -// .h-full { -// height: 100%; -// } diff --git a/scss/utilities/spacing/_margin.scss b/scss/utilities/spacing/_margin.scss index 1de0744d1..d5568f4d1 100644 --- a/scss/utilities/spacing/_margin.scss +++ b/scss/utilities/spacing/_margin.scss @@ -243,25 +243,6 @@ @include margin-negative-left-spacing($spacing, $prefix, $suffix); } -.pull-in { - margin-left: -15px; - margin-right: -15px; -} - -.pull-in-md { - margin-left: -20px; - margin-right: -20px; -} - -.pull-in-sm { - margin-left: -10px; - margin-right: -10px; -} - -.pull-out { - margin: -10px -15px; -} - @include make-margins(); @each $deivce in map-keys($devices) { @include media-device($deivce) { @@ -272,304 +253,3 @@ // @include bg-colors('.' + selector-escape('hover:'), ':hover'); // @include bg-colors('.' + selector-escape('active:'), '.is-active'); // @include bg-colors('.group:hover .' + selector-escape('group-hover:')); - -// .m-xxs { -// margin: 2px 4px; -// } - -// .m-xs { -// margin: 5px; -// } - -// .m-sm { -// margin: 10px; -// } - -// .m { -// margin: 15px; -// } - -// .m-md { -// margin: 20px; -// } - -// .m-lg { -// margin: 30px; -// } - -// .m-xl { -// margin: 50px; -// } - -// .m-n, -// .m-none { -// margin: 0 !important; -// } - -// .m-l-none { -// margin-left: 0 !important; -// } - -// .m-l-xs { -// margin-left: 5px; -// } - -// .m-l-sm { -// margin-left: 10px; -// } - -// .m-l { -// margin-left: 15px; -// } - -// .m-l-md { -// margin-left: 20px; -// } - -// .m-l-lg { -// margin-left: 30px; -// } - -// .m-l-xl { -// margin-left: 40px; -// } - -// .m-l-xxl { -// margin-left: 50px; -// } - -// .m-l-n-xxs { -// margin-left: -1px; -// } - -// .m-l-n-xs { -// margin-left: -5px; -// } - -// .m-l-n-sm { -// margin-left: -10px; -// } - -// .m-l-n { -// margin-left: -15px; -// } - -// .m-l-n-md { -// margin-left: -20px; -// } - -// .m-l-n-lg { -// margin-left: -30px; -// } - -// .m-l-n-xl { -// margin-left: -40px; -// } - -// .m-l-n-xxl { -// margin-left: -50px; -// } - -// .m-t-none { -// margin-top: 0 !important; -// } - -// .m-t-xxs { -// margin-top: 1px; -// } - -// .m-t-xs { -// margin-top: 5px; -// } - -// .m-t-sm { -// margin-top: 10px; -// } - -// .m-t { -// margin-top: 15px; -// } - -// .m-t-md { -// margin-top: 20px; -// } - -// .m-t-lg { -// margin-top: 30px; -// } - -// .m-t-xl { -// margin-top: 40px; -// } - -// .m-t-xxl { -// margin-top: 50px; -// } - -// .m-t-n-xxs { -// margin-top: -1px; -// } - -// .m-t-n-xs { -// margin-top: -5px; -// } - -// .m-t-n-sm { -// margin-top: -10px; -// } - -// .m-t-n { -// margin-top: -15px; -// } - -// .m-t-n-md { -// margin-top: -20px; -// } - -// .m-t-n-lg { -// margin-top: -30px; -// } - -// .m-t-n-xl { -// margin-top: -40px; -// } - -// .m-t-n-xxl { -// margin-top: -50px; -// } - -// .m-r-none { -// margin-right: 0 !important; -// } - -// .m-r-xxs { -// margin-right: 1px; -// } - -// .m-r-xs { -// margin-right: 5px; -// } - -// .m-r-sm { -// margin-right: 10px; -// } - -// .m-r { -// margin-right: 15px; -// } - -// .m-r-md { -// margin-right: 20px; -// } - -// .m-r-lg { -// margin-right: 30px; -// } - -// .m-r-xl { -// margin-right: 40px; -// } - -// .m-r-xxl { -// margin-right: 50px; -// } - -// .m-r-n-xxs { -// margin-right: -1px; -// } - -// .m-r-n-xs { -// margin-right: -5px; -// } - -// .m-r-n-sm { -// margin-right: -10px; -// } - -// .m-r-n { -// margin-right: -15px; -// } - -// .m-r-n-md { -// margin-right: -20px; -// } - -// .m-r-n-lg { -// margin-right: -30px; -// } - -// .m-r-n-xl { -// margin-right: -40px; -// } - -// .m-r-n-xxl { -// margin-right: -50px; -// } - -// .m-b-none { -// margin-bottom: 0 !important; -// } - -// .m-b-xxs { -// margin-bottom: 1px; -// } - -// .m-b-xs { -// margin-bottom: 5px; -// } - -// .m-b-sm { -// margin-bottom: 10px; -// } - -// .m-b { -// margin-bottom: 15px; -// } - -// .m-b-md { -// margin-bottom: 20px; -// } - -// .m-b-lg { -// margin-bottom: 30px; -// } - -// .m-b-xl { -// margin-bottom: 40px; -// } - -// .m-b-xxl { -// margin-bottom: 50px; -// } - -// .m-b-n-xxs { -// margin-bottom: -1px; -// } - -// .m-b-n-xs { -// margin-bottom: -5px; -// } - -// .m-b-n-sm { -// margin-bottom: -10px; -// } - -// .m-b-n { -// margin-bottom: -15px; -// } - -// .m-b-n-md { -// margin-bottom: -20px; -// } - -// .m-b-n-lg { -// margin-bottom: -30px; -// } - -// .m-b-n-xl { -// margin-bottom: -40px; -// } - -// .m-b-n-xxl { -// margin-bottom: -50px; -// } diff --git a/scss/utilities/spacing/_padding.scss b/scss/utilities/spacing/_padding.scss index 7c6ad57e9..c4650a1ff 100644 --- a/scss/utilities/spacing/_padding.scss +++ b/scss/utilities/spacing/_padding.scss @@ -110,74 +110,6 @@ @include padding-left-spacing($spacing, $prefix, $suffix); } -.wrapper-xs { - padding: 5px; -} - -.wrapper-sm { - padding: 10px; -} - -.wrapper { - padding: 15px; -} - -.wrapper-md { - padding: 20px; -} - -.wrapper-lg { - padding: 30px; -} - -.wrapper-xl { - padding: 50px; -} - -.padder-lg { - padding-left: 30px; - padding-right: 30px; -} - -.padder-md { - padding-left: 20px; - padding-right: 20px; -} - -.padder { - padding-left: 15px; - padding-right: 15px; -} - -.padder-v-xs { - padding-top: 5px; - padding-bottom: 5px; -} - -.padder-v-sm { - padding-top: 10px; - padding-bottom: 10px; -} - -.padder-v { - padding-top: 15px; - padding-bottom: 15px; -} - -.padder-v-md { - padding-top: 20px; - padding-bottom: 20px; -} - -.padder-v-lg { - padding-top: 30px; - padding-bottom: 30px; -} - -.no-padder { - padding: 0 !important; -} - @include make-padding(); @each $deivce in map-keys($devices) { @include media-device($deivce) { @@ -187,181 +119,3 @@ // @include bg-colors('.' + selector-escape('hover:'), ':hover'); // @include bg-colors('.' + selector-escape('active:'), '.is-active'); // @include bg-colors('.group:hover .' + selector-escape('group-hover:')); - -// 以下是原来的 -// .p-xxs { -// padding: 2px 4px; -// } - -// .p-xs { -// padding: 5px; -// } - -// .p-sm { -// padding: 10px; -// } - -// .p { -// padding: 15px; -// } - -// .p-md { -// padding: 20px; -// } - -// .p-lg { -// padding: 30px; -// } - -// .p-xl { -// padding: 50px; -// } - -// .p-n, -// .p-none { -// padding: 0 !important; -// } - -// .p-l-none { -// padding-left: 0 !important; -// } - -// .p-l-xs { -// padding-left: 5px; -// } - -// .p-l-sm { -// padding-left: 10px; -// } - -// .p-l { -// padding-left: 15px; -// } - -// .p-l-md { -// padding-left: 20px; -// } - -// .p-l-lg { -// padding-left: 30px; -// } - -// .p-l-xl { -// padding-left: 40px; -// } - -// .p-l-xxl { -// padding-left: 50px; -// } - -// .p-t-none { -// padding-top: 0 !important; -// } - -// .p-t-xxs { -// padding-top: 1px; -// } - -// .p-t-xs { -// padding-top: 5px; -// } - -// .p-t-sm { -// padding-top: 10px; -// } - -// .p-t { -// padding-top: 15px; -// } - -// .p-t-md { -// padding-top: 20px; -// } - -// .p-t-lg { -// padding-top: 30px; -// } - -// .p-t-xl { -// padding-top: 40px; -// } - -// .p-t-xxl { -// padding-top: 50px; -// } - -// .p-t-n-xxs { -// padding-top: -1px; -// } - -// .p-r-none { -// padding-right: 0 !important; -// } - -// .p-r-xxs { -// padding-right: 1px; -// } - -// .p-r-xs { -// padding-right: 5px; -// } - -// .p-r-sm { -// padding-right: 10px; -// } - -// .p-r { -// padding-right: 15px; -// } - -// .p-r-md { -// padding-right: 20px; -// } - -// .p-r-lg { -// padding-right: 30px; -// } - -// .p-r-xl { -// padding-right: 40px; -// } - -// .p-r-xxl { -// padding-right: 50px; -// } - -// .p-b-none { -// padding-bottom: 0 !important; -// } - -// .p-b-xxs { -// padding-bottom: 1px; -// } - -// .p-b-xs { -// padding-bottom: 5px; -// } - -// .p-b-sm { -// padding-bottom: 10px; -// } - -// .p-b { -// padding-bottom: 15px; -// } - -// .p-b-md { -// padding-bottom: 20px; -// } - -// .p-b-lg { -// padding-bottom: 30px; -// } - -// .p-b-xl { -// padding-bottom: 40px; -// } - -// .p-b-xxl { -// padding-bottom: 50px; -// } diff --git a/scss/utilities/typography/_letter-spacing.scss b/scss/utilities/typography/_letter-spacing.scss index 117c93101..0dfb329df 100644 --- a/scss/utilities/typography/_letter-spacing.scss +++ b/scss/utilities/typography/_letter-spacing.scss @@ -16,18 +16,6 @@ } } -.l-s-1x { - letter-spacing: 1; -} - -.l-s-2x { - letter-spacing: 2; -} - -.l-s-3x { - letter-spacing: 3; -} - @include make-letter-spacing(); @each $deivce in map-keys($devices) { @include media-device($deivce) { diff --git a/scss/utilities/typography/_line-height.scss b/scss/utilities/typography/_line-height.scss index 36f42894b..75154c94a 100644 --- a/scss/utilities/typography/_line-height.scss +++ b/scss/utilities/typography/_line-height.scss @@ -24,22 +24,6 @@ } } -.l-h { - line-height: $lineHeightBase; -} - -.l-h-0x { - line-height: 0; -} - -.l-h-1x { - line-height: 1.2; -} - -.l-h-2x { - line-height: 2em; -} - @include make-line-height(); @each $deivce in map-keys($devices) { @include media-device($deivce) { diff --git a/scss/utilities/typography/_text-align.scss b/scss/utilities/typography/_text-align.scss index fbbd40aa2..0dd1ab016 100644 --- a/scss/utilities/typography/_text-align.scss +++ b/scss/utilities/typography/_text-align.scss @@ -9,18 +9,6 @@ } } -// .text-left { -// text-align: left; -// } - -// .text-center { -// text-align: center; -// } - -// .text-right { -// text-align: right; -// } - @include make-text-align(); @each $deivce in map-keys($devices) { @include media-device($deivce) { diff --git a/scss/utilities/typography/_text-color.scss b/scss/utilities/typography/_text-color.scss index 016034a87..4215bb7ec 100644 --- a/scss/utilities/typography/_text-color.scss +++ b/scss/utilities/typography/_text-color.scss @@ -42,13 +42,3 @@ @include text-colors('.' + selector-escape('hover:'), ':hover'); @include text-colors('.' + selector-escape('active:'), '.is-active'); @include text-colors('.group:hover .' + selector-escape('group-hover:')); -// text colors - -// @include text-wariant($primary, primary); -// @include text-wariant($info, info); -// @include text-wariant($success, success); -// @include text-wariant($warning, warning); -// @include text-wariant($danger, danger); -// @include text-wariant($dark, dark); -// @include text-wariant($white, white); -// @include text-wariant($black, black); diff --git a/scss/utilities/typography/_text-decoration.scss b/scss/utilities/typography/_text-decoration.scss index c9597286c..78c13b688 100644 --- a/scss/utilities/typography/_text-decoration.scss +++ b/scss/utilities/typography/_text-decoration.scss @@ -10,14 +10,6 @@ } } -.text-l-t { - text-decoration: line-through; -} - -.text-u-l { - text-decoration: underline; -} - @include make-text-decoration(); @each $deivce in map-keys($devices) { @include media-device($deivce) { diff --git a/scss/utilities/typography/_text-overflow.scss b/scss/utilities/typography/_text-overflow.scss index 06cee9171..54a5194e7 100644 --- a/scss/utilities/typography/_text-overflow.scss +++ b/scss/utilities/typography/_text-overflow.scss @@ -14,13 +14,6 @@ } } -.text-ellipsis { - display: block; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - @include make-text-overflow(); @each $deivce in map-keys($devices) { @include media-device($deivce) { diff --git a/scss/utilities/typography/_text-transform.scss b/scss/utilities/typography/_text-transform.scss index ca6811403..6b59e43dd 100644 --- a/scss/utilities/typography/_text-transform.scss +++ b/scss/utilities/typography/_text-transform.scss @@ -14,10 +14,6 @@ } } -.text-u-c { - text-transform: uppercase; -} - @include make-text-transform(); @each $deivce in map-keys($devices) { @include media-device($deivce) { diff --git a/scss/utilities/typography/_vertical-align.scss b/scss/utilities/typography/_vertical-align.scss index e882f55d1..4affaf7a0 100644 --- a/scss/utilities/typography/_vertical-align.scss +++ b/scss/utilities/typography/_vertical-align.scss @@ -16,21 +16,6 @@ } } -.v-top { - vertical-align: top !important; - align-self: flex-start; -} - -.v-middle { - vertical-align: middle !important; - align-self: center; -} - -.v-bottom { - vertical-align: bottom !important; - align-self: flex-end; -} - @include make-vertical-align(); @each $deivce in map-keys($devices) { @include media-device($deivce) { diff --git a/scss/utilities/typography/_whitespace.scss b/scss/utilities/typography/_whitespace.scss index c012a5f18..e96636a24 100644 --- a/scss/utilities/typography/_whitespace.scss +++ b/scss/utilities/typography/_whitespace.scss @@ -15,11 +15,6 @@ } } -.nowrap { - white-space: nowrap; - flex-wrap: nowrap; -} - @include make-whitespace(); @each $deivce in map-keys($devices) { @include media-device($deivce) { diff --git a/scss/utilities/typography/_word-break.scss b/scss/utilities/typography/_word-break.scss index 2254c7dcc..33ab41d68 100644 --- a/scss/utilities/typography/_word-break.scss +++ b/scss/utilities/typography/_word-break.scss @@ -11,12 +11,6 @@ } } -.word-break { - white-space: normal; - word-break: break-all; - word-wrap: break-word; -} - @include make-word-break(); @each $deivce in map-keys($devices) { @include media-device($deivce) { diff --git a/scss/utilities/widgets/_avatar.scss b/scss/utilities/widgets/_avatar.scss deleted file mode 100644 index a69af7725..000000000 --- a/scss/utilities/widgets/_avatar.scss +++ /dev/null @@ -1,70 +0,0 @@ -.avatar { - position: relative; - display: block; - border-radius: 500px; - white-space: nowrap; - - & img { - border-radius: 500px; - width: 100%; - } - - & i { - position: absolute; - left: 0; - top: 0; - width: 10px; - height: 10px; - margin: 2px; - border-width: 2px; - border-style: solid; - border-radius: 100%; - - &.right { - left: auto; - right: 0; - } - - &.bottom { - left: auto; - top: auto; - bottom: 0; - right: 0; - } - - &.left { - top: auto; - bottom: 0; - } - - &.on { - background-color: $success; - } - - &.off { - background-color: $text--muted-color; - } - - &.busy { - background-color: $danger; - } - - &.away { - background-color: $warning; - } - } - - &.thumb-md i { - width: 12px; - height: 12px; - margin: 3px; - } - - &.thumb-sm i { - margin: 1px; - } - - &.thumb-xs i { - margin: 0; - } -} diff --git a/scss/utilities/widgets/_hbox.scss b/scss/utilities/widgets/_hbox.scss deleted file mode 100644 index ea5b85007..000000000 --- a/scss/utilities/widgets/_hbox.scss +++ /dev/null @@ -1,14 +0,0 @@ -.hbox { - display: table; - table-layout: fixed; - border-spacing: 0; - width: 100%; - height: 100%; - - & > .col { - display: table-cell; - vertical-align: top; - height: 100%; - float: none; - } -} diff --git a/scss/utilities/widgets/_label.scss b/scss/utilities/widgets/_label.scss deleted file mode 100644 index 02dc70619..000000000 --- a/scss/utilities/widgets/_label.scss +++ /dev/null @@ -1,62 +0,0 @@ -// -// Labels -// -------------------------------------------------- - -.label { - display: inline; - padding: 0.2em 0.6em 0.3em; - font-size: 75%; - font-weight: 700; - line-height: 1; - color: $label-color; - text-align: center; - white-space: nowrap; - vertical-align: baseline; - border-radius: 0.25em; - - // Empty labels collapse automatically (not available in IE8) - &:empty { - display: none; - } - - // Quick fix for labels in buttons - .btn & { - position: relative; - top: -1px; - } -} -a.label { - &:hover, - &:focus { - color: $label-link--hover-color; - text-decoration: none; - cursor: pointer; - } -} - -// Colors -// Contextual variations (linked labels get darker on :hover) - -.label-default { - @include label-variant($label--default-bg); -} - -.label-primary { - @include label-variant($label--primary-bg); -} - -.label-success { - @include label-variant($label--success-bg); -} - -.label-info { - @include label-variant($label--info-bg); -} - -.label-warning { - @include label-variant($label--warning-bg); -} - -.label-danger { - @include label-variant($label--danger-bg); -} diff --git a/scss/utilities/widgets/_line.scss b/scss/utilities/widgets/_line.scss deleted file mode 100644 index 670a5cd25..000000000 --- a/scss/utilities/widgets/_line.scss +++ /dev/null @@ -1,26 +0,0 @@ -.line { - // width: 100%; 不要设置 100%， 否则跟 pull-in 配合使用时候，宽度为不对。 - height: 2px; - margin: 10px 0; - font-size: 0; - overflow: hidden; -} - -.line-xs { - margin: 0; -} - -.line-lg { - margin-top: 15px; - margin-bottom: 15px; -} - -.line-dashed { - border-style: dashed !important; - background-color: transparent; - border-width: 0; -} - -.no-line { - border-width: 0; -} diff --git a/scss/utilities/widgets/_scrollable.scss b/scss/utilities/widgets/_scrollable.scss deleted file mode 100644 index 72341766b..000000000 --- a/scss/utilities/widgets/_scrollable.scss +++ /dev/null @@ -1,30 +0,0 @@ -.scrollable { - overflow-x: hidden; - overflow-y: auto; - -webkit-overflow-scrolling: touch; - - &.hover { - &, - & > .cell-inner { - overflow-y: hidden !important; - } - - &:hover, - &:focus, - &:active { - overflow: visible; - overflow-y: auto; - - & > .cell-inner { - overflow-y: auto !important; - } - } - } - - .smart & { - &, - & > .cell-inner { - overflow-y: auto !important; - } - } -} diff --git a/scss/utilities/widgets/_thumb.scss b/scss/utilities/widgets/_thumb.scss deleted file mode 100644 index 43c7dd1ca..000000000 --- a/scss/utilities/widgets/_thumb.scss +++ /dev/null @@ -1,54 +0,0 @@ -.thumb-xl { - width: 128px; - display: inline-block; -} - -.thumb-lg { - width: 96px; - display: inline-block; -} - -.thumb-md { - width: 64px; - display: inline-block; -} - -.thumb { - width: 50px; - display: inline-block; -} - -.thumb-sm { - width: 40px; - display: inline-block; -} - -.thumb-xs { - width: 34px; - display: inline-block; -} - -.thumb-xxs { - width: 30px; - display: inline-block; -} - -.thumb-wrapper { - padding: 2px; - border: 1px solid $borderColor; -} - -.thumb, -.thumb-xxs, -.thumb-xs, -.thumb-sm, -.thumb-md, -.thumb-lg, -.thumb-btn, -.thumb-xl { - & img { - height: auto; - max-width: 100%; - vertical-align: middle; - } -} diff --git a/scss/utilities/widgets/_vbox.scss b/scss/utilities/widgets/_vbox.scss deleted file mode 100644 index 8029f75e8..000000000 --- a/scss/utilities/widgets/_vbox.scss +++ /dev/null @@ -1,38 +0,0 @@ -.vbox { - display: table; - border-spacing: 0; - position: relative; - width: 100%; - height: 100%; - min-height: 240px; - - & .row-row { - display: table-row; - height: 100%; - - & .cell { - position: relative; - height: 100%; - width: 100%; - - .ie & { - display: table-cell; - overflow: auto; - - & .cell-inner { - overflow: visible !important; - } - } - - & .cell-inner { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - -webkit-overflow-scrolling: touch; - overflow: auto; - } - } - } -}