diff --git a/examples/components/CRUD/test.jsx b/examples/components/CRUD/test.jsx index 5a8dc24e..1ce65240 100644 --- a/examples/components/CRUD/test.jsx +++ b/examples/components/CRUD/test.jsx @@ -22,10 +22,10 @@ export default { type: 'map', label: 'Rendering engine', map: { - A: "A", - B: "B", - C: "C", - X: "X", + 'A': "A", + 'B': "B", + 'C': "C", + 'X': "X", '*': 'Unkown' } }, diff --git a/examples/components/Play.jsx b/examples/components/Play.jsx index d6bcf049..03e66f19 100644 --- a/examples/components/Play.jsx +++ b/examples/components/Play.jsx @@ -16,14 +16,14 @@ const DEFAULT_CONTENT = `{ }`; const scopes = { - none: ``, + 'none': ``, - body: `{ + 'body': `{ "type": "page", "body": SCHEMA_PLACEHOLDER }`, - form: `{ + 'form': `{ "type": "page", "body": { "title": "", diff --git a/examples/loader.ts b/examples/loader.ts index 53b07339..f675bbb0 100644 --- a/examples/loader.ts +++ b/examples/loader.ts @@ -3,27 +3,27 @@ const __moduleId = (str: string) => ''; const mapping: { [propName: string]: any; } = { - jquery: __moduleId('jquery'), - react: __moduleId('react'), + 'jquery': __moduleId('jquery'), + 'react': __moduleId('react'), 'react-dom': __moduleId('react-dom'), 'react-addons-update': __moduleId('react-addons-update'), 'immutability-helper': __moduleId('react-addons-update'), 'react-cropper': __moduleId('react-cropper'), 'react-dropzone': __moduleId('react-dropzone'), - classnames: __moduleId('classnames'), - axios: __moduleId('axios'), - moment: __moduleId('moment'), - mobx: __moduleId('mobx'), + 'classnames': __moduleId('classnames'), + 'axios': __moduleId('axios'), + 'moment': __moduleId('moment'), + 'mobx': __moduleId('mobx'), 'mobx-state-tree': __moduleId('mobx-state-tree'), 'react-transition-group': __moduleId('react-transition-group'), - echarts: __moduleId('echarts'), - zrender: __moduleId('zrender'), - sortablejs: __moduleId('sortablejs'), - amis: __moduleId('../src'), + 'echarts': __moduleId('echarts'), + 'zrender': __moduleId('zrender'), + 'sortablejs': __moduleId('sortablejs'), + 'amis': __moduleId('../src'), 'amis/embed': __moduleId('./embed.tsx'), 'prop-types': __moduleId('prop-types'), - async: __moduleId('async'), - qs: __moduleId('qs') + 'async': __moduleId('async'), + 'qs': __moduleId('qs') }; function amisRequire(...args: Array) { diff --git a/examples/style.scss b/examples/style.scss index f96ec5d3..d23b991c 100644 --- a/examples/style.scss +++ b/examples/style.scss @@ -2,68 +2,67 @@ @import '../scss/functions'; @import '../scss/variables'; - .page-play, .page-edit { - &:before { - display: table; - content: " "; - } + &:before { + display: table; + content: ' '; + } - &:after { - clear: both; - display: block; - content: ""; - height: 0; - } + &:after { + clear: both; + display: block; + content: ''; + height: 0; + } - .app-content { - position: absolute; - top: 50px; - bottom: 0; - height: auto; - left: 0; - right: 0; - } + .app-content { + position: absolute; + top: 50px; + bottom: 0; + height: auto; + left: 0; + right: 0; + } - .app-content-body { - height: 100%; - } + .app-content-body { + height: 100%; + } } .resizer { - position: absolute; - top: 0; - bottom: 0; - margin-left: -2px; - width: 4px; - background: lighten($dark, 20%); - z-index: 1; - cursor: col-resize; + position: absolute; + top: 0; + bottom: 0; + margin-left: -2px; + width: 4px; + background: lighten($dark, 20%); + z-index: 1; + cursor: col-resize; - &:hover { - background: $dark; - } + &:hover { + background: $dark; + } } .doc-shcema-preview-popover { - box-shadow: none !important; - margin-top: -1px !important; - padding: 0 45px !important; - left: 0 !important; - width: 100% !important; - max-width: 980px !important; - z-index: 1 !important; - background: transparent !important; - border: none !important; + box-shadow: none !important; + margin-top: -1px !important; + padding: 0 45px !important; + left: 0 !important; + width: 100% !important; + max-width: 980px !important; + z-index: 1 !important; + background: transparent !important; + border: none !important; - .doc-schema-preview { - border: 1px solid #ddd; - background: rgb(240, 243, 244); - position: relative; - height: 100%; - width: 100%; - } + .doc-schema-preview { + border: 1px solid #ddd; + background: rgb(240, 243, 244); + position: relative; + height: 100%; + width: 100%; + } } // .view-code { @@ -73,7 +72,13 @@ // right: 175px; // } -.amis-schema-editor.fix-settings .amis-schema-editor-settings-inner .amis-schema-editor-config-tab>.tab-content, -.amis-schema-editor.fix-settings .amis-schema-editor-settings-inner .amis-schema-editor-code-tab>.tab-content { - bottom: 50px; -} \ No newline at end of file +.amis-schema-editor.fix-settings + .amis-schema-editor-settings-inner + .amis-schema-editor-config-tab + > .tab-content, +.amis-schema-editor.fix-settings + .amis-schema-editor-settings-inner + .amis-schema-editor-code-tab + > .tab-content { + bottom: 50px; +} diff --git a/package.json b/package.json index 12e0a553..a543b94a 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,7 @@ "stop": "fis3 server stop", "dev": "fis3 release -cwd ./public", "publish2npm": "sh publish.sh && npm publish", - "prettier": "prettier --write '{src,examples}/**/*.{tsx,ts,jsx}'" + "prettier": "prettier --write '{src,examples,scss}/**/*.{tsx,ts,jsx,scss}'" }, "repository": { "type": "git", diff --git a/scss/_functions.scss b/scss/_functions.scss index 8a1e4f4e..9412b517 100644 --- a/scss/_functions.scss +++ b/scss/_functions.scss @@ -1,42 +1,42 @@ //下一个断点 @function breakpoint-next( - $name, - $breakpoints: breakpoints, - $breakpoint-names: map-keys($breakpoints) + $name, + $breakpoints: breakpoints, + $breakpoint-names: map-keys($breakpoints) ) { - $n: index($breakpoint-names, $name); - @return if( - $n < length($breakpoint-names), - nth($breakpoint-names, $n + 1), - null - ); + $n: index($breakpoint-names, $name); + @return if( + $n < length($breakpoint-names), + nth($breakpoint-names, $n + 1), + null + ); } //断点最小值 @function breakpoint-min($name, $breakpoints: $breakpoints) { - $min: map-get($breakpoints, $name); // @return if($min != 0, $min, null); - @return $min; + $min: map-get($breakpoints, $name); // @return if($min != 0, $min, null); + @return $min; } //断点最大值 @function breakpoint-max($name, $breakpoints: $breakpoints) { - $next: breakpoint-next($name, $breakpoints); - @return if($next, breakpoint-min($next, $breakpoints) - 1px, null); + $next: breakpoint-next($name, $breakpoints); + @return if($next, breakpoint-min($next, $breakpoints) - 1px, null); } //生成类名“-sm、-md、-lg、-cl” -xs? @function breakpoint-infix($name, $breakpoints: $breakpoints) { - @return if(breakpoint-min($name, $breakpoints) ==null, "", "-#{$name}"); + @return if(breakpoint-min($name, $breakpoints) ==null, '', '-#{$name}'); } @function px2rem($pixels, $context: $remFactor) { - @if (unitless($pixels)) { - $pixels: $pixels * 1px; - } + @if (unitless($pixels)) { + $pixels: $pixels * 1px; + } - @if (unitless($context)) { - $context: $context * 1px; - } + @if (unitless($context)) { + $context: $context * 1px; + } - @return $pixels / $context * 1rem; + @return $pixels / $context * 1rem; } diff --git a/scss/_mixins.scss b/scss/_mixins.scss index d268ef6f..7a8b4571 100644 --- a/scss/_mixins.scss +++ b/scss/_mixins.scss @@ -1,261 +1,261 @@ // 媒体查询最小阈值 @mixin media-breakpoint-up($name, $breakpoints: $breakpoints) { - $min: breakpoint-min($name, $breakpoints); + $min: breakpoint-min($name, $breakpoints); - @if $min { - @media (min-width: $min) { - @content; - } - } @else { - @content; + @if $min { + @media (min-width: $min) { + @content; } + } @else { + @content; + } } //媒体查询最大阈值 @mixin media-breakpoint-down($name, $breakpoints: $breakpoints) { - $max: breakpoint-max($name, $breakpoints); + $max: breakpoint-max($name, $breakpoints); - @if $max { - @media (max-width: $max) { - @content; - } - } @else { - @content; + @if $max { + @media (max-width: $max) { + @content; } + } @else { + @content; + } } //媒体查询中间阈值 @mixin media-breakpoint-between($min, $max, $breakpoints: $breakpoints) { - $min: breakpoint-min($min, $breakpoints); - $max: breakpoint-max($max, $breakpoints); + $min: breakpoint-min($min, $breakpoints); + $max: breakpoint-max($max, $breakpoints); - @media (min-width: $min) and (max-width: $max) { - @content; - } + @media (min-width: $min) and (max-width: $max) { + @content; + } } @mixin clearfix() { - &::before, - &::after { - display: table; - content: ""; - } - &::after { - clear: both; - } + &::before, + &::after { + display: table; + content: ''; + } + &::after { + clear: both; + } } @mixin color-schema($bg-color: #555, $percent: 15%, $sat-percent: 100%) { - background-color: saturate(darken($bg-color, $percent), $sat-percent); + background-color: saturate(darken($bg-color, $percent), $sat-percent); } @mixin color-schema-lt($bg-color: #555, $percent: 15%, $sat-percent: 100%) { - background-color: desaturate(lighten($bg-color, $percent), $sat-percent); + background-color: desaturate(lighten($bg-color, $percent), $sat-percent); } @mixin color-variant( - $bg-color: #555, - $lt-percent: 10%, - $lter-percent: 15%, - $dk-percent: 10%, - $dker-percent: 15% + $bg-color: #555, + $lt-percent: 10%, + $lter-percent: 15%, + $dk-percent: 10%, + $dker-percent: 15% ) { + background-color: $bg-color; + + &.lt, + & .lt { + @include color-schema-lt($bg-color, $lt-percent, 2.5%); + } + + &.lter, + & .lter { + @include color-schema-lt($bg-color, $lter-percent, 5%); + } + + &.dk, + & .dk { + @include color-schema($bg-color, $dk-percent, 2.5%); + } + + &.dker, + & .dker { + @include color-schema($bg-color, $dker-percent, 5%); + } + + &.bg, + & .bg { background-color: $bg-color; - - &.lt, - & .lt { - @include color-schema-lt($bg-color, $lt-percent, 2.5%); - } - - &.lter, - & .lter { - @include color-schema-lt($bg-color, $lter-percent, 5%); - } - - &.dk, - & .dk { - @include color-schema($bg-color, $dk-percent, 2.5%); - } - - &.dker, - & .dker { - @include color-schema($bg-color, $dker-percent, 5%); - } - - &.bg, - & .bg { - background-color: $bg-color; - } + } } @mixin font-variant($bg-color) { - $font-color: desaturate(lighten($bg-color, 40%), 10%); - $link-color: desaturate(lighten($bg-color, 50%), 10%); - $hover-color: #fff; - color: $font-color; + $font-color: desaturate(lighten($bg-color, 40%), 10%); + $link-color: desaturate(lighten($bg-color, 50%), 10%); + $hover-color: #fff; + color: $font-color; - & a { - color: $link-color; + & a { + color: $link-color; - &:hover { - color: $hover-color; - } + &:hover { + color: $hover-color; } + } - & .open > a { - &, - &:hover, - &:focus { - color: $hover-color; - } + & .open > a { + &, + &:hover, + &:focus { + color: $hover-color; } + } - & .text-muted { - color: darken($font-color, 10%) !important; - } - - & .text-lt { - color: lighten($font-color, 25%) !important; - } - - &.auto, - & .auto { - & .list-group-item { - border-color: darken($bg-color, 5%) !important; - background-color: transparent; - - &:hover, - &:focus, - &:active, - &.active { - @include color-schema($bg-color, 5%, 2.5% !important); - } - } + & .text-muted { + color: darken($font-color, 10%) !important; + } + + & .text-lt { + color: lighten($font-color, 25%) !important; + } + + &.auto, + & .auto { + & .list-group-item { + border-color: darken($bg-color, 5%) !important; + background-color: transparent; + + &:hover, + &:focus, + &:active, + &.active { + @include color-schema($bg-color, 5%, 2.5% !important); + } } + } } @mixin text-wariant($bg-color, $name) { - a.bg-#{$name}:hover { - background-color: darken($bg-color, 5%); - } + a.bg-#{$name}:hover { + background-color: darken($bg-color, 5%); + } - a.text-#{$name}:hover { - color: darken($bg-color, 5%); - } + a.text-#{$name}:hover { + color: darken($bg-color, 5%); + } - .text-#{$name} { - color: $bg-color; - } + .text-#{$name} { + color: $bg-color; + } - .text-#{$name}-lt { - color: darken($bg-color, 5%); - } + .text-#{$name}-lt { + color: darken($bg-color, 5%); + } - .text-#{$name}-lter { - color: darken($bg-color, 10%); - } + .text-#{$name}-lter { + color: darken($bg-color, 10%); + } - .text-#{$name}-dk { - color: darken($bg-color, 5%); - } + .text-#{$name}-dk { + color: darken($bg-color, 5%); + } - .text-#{$name}-dker { - color: darken($bg-color, 10%); - } + .text-#{$name}-dker { + color: darken($bg-color, 10%); + } } @mixin hover { - &:hover { - @content; - } + &:hover { + @content; + } } @mixin hover-focus { - &:hover, - &:focus { - @content; - } + &:hover, + &:focus { + @content; + } } @mixin hover-active { - &:hover:active { - @content; - } + &:hover:active { + @content; + } } @mixin button-size( - $padding-y, - $padding-x, - $font-size, - $line-height, - $border-radius, - $height: auto, - $iconWdith: px2rem(20px) + $padding-y, + $padding-x, + $font-size, + $line-height, + $border-radius, + $height: auto, + $iconWdith: px2rem(20px) ) { - padding: $padding-y $padding-x; - font-size: $font-size; - line-height: $line-height; - border-radius: $border-radius; - height: $height; + padding: $padding-y $padding-x; + font-size: $font-size; + line-height: $line-height; + border-radius: $border-radius; + height: $height; - .#{$ns}Button-icon:first-child:not(:last-child):not(.pull-right), - > .pull-left { - margin-right: $padding-x; - } + .#{$ns}Button-icon:first-child:not(:last-child):not(.pull-right), + > .pull-left { + margin-right: $padding-x; + } - .#{$ns}Button-icon:last-child:not(:first-child):not(.pull-left), - > .pull-right { - margin-left: $padding-x; - } + .#{$ns}Button-icon:last-child:not(:first-child):not(.pull-left), + > .pull-right { + margin-left: $padding-x; + } } @mixin button-variant( - $background, - $border: $background, - $color: $white, - $hover-background: darken($background, 7.5%), - $hover-border: darken($border, 10%), - $hover-color: $color, - $active-background: darken($background, 10%), - $active-border: darken($border, 12.5%), - $active-color: $color + $background, + $border: $background, + $color: $white, + $hover-background: darken($background, 7.5%), + $hover-border: darken($border, 10%), + $hover-color: $color, + $active-background: darken($background, 10%), + $active-border: darken($border, 12.5%), + $active-color: $color ) { - color: $color; - background-color: $background; - border-color: $border; - box-shadow: $Button-boxShadow; + color: $color; + background-color: $background; + border-color: $border; + box-shadow: $Button-boxShadow; - @include hover-focus { - color: $hover-color; - background-color: $hover-background; - border-color: $hover-border; + @include hover-focus { + color: $hover-color; + background-color: $hover-background; + border-color: $hover-border; + } + + &.is-disabled, + &:disabled { + @if variable-exists(Button-onDisabled-bg) { + background-color: $Button-onDisabled-bg; + } @else { + background-color: $background; } - &.is-disabled, - &:disabled { - @if variable-exists(Button-onDisabled-bg) { - background-color: $Button-onDisabled-bg; - } @else { - background-color: $background; - } - - @if variable-exists(Button-onDisabled-color) { - color: $Button-onDisabled-color; - } @else { - color: $color; - } - - @if variable-exists(Button-onDisabled-borderColor) { - border-color: $Button-onDisabled-borderColor; - } @else { - border-color: $border; - } + @if variable-exists(Button-onDisabled-color) { + color: $Button-onDisabled-color; + } @else { + color: $color; } - &:not(:disabled):not(.is-disabled):active, - &:not(:disabled):not(.is-disabled).is-active { - color: $active-color; - background-color: $active-background; - border-color: $active-border; + @if variable-exists(Button-onDisabled-borderColor) { + border-color: $Button-onDisabled-borderColor; + } @else { + border-color: $border; } + } + + &:not(:disabled):not(.is-disabled):active, + &:not(:disabled):not(.is-disabled).is-active { + color: $active-color; + background-color: $active-background; + border-color: $active-border; + } } diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 2c5894b2..c546db3d 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -5,52 +5,52 @@ // background .bg-light { - @include color-variant($light, 2%, 3%, 3%, 5%); - color: $text-color; + @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); + @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); + @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); + @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); + @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); + @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); + @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); + @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; + @include color-variant($white, 5%, 10%, 5%, 10%); + color: $text-color; } .bg-none { - background: none !important; + background: none !important; } // text colors @@ -64,1207 +64,1206 @@ @include text-wariant($black, black); .text-muted { - color: $text--muted-color; + color: $text--muted-color; } .text-loud { - color: $text--loud-color; + color: $text--loud-color; } .clearfix { - @include clearfix(); + @include clearfix(); } .pos-rlt { - position: relative; + position: relative; } .pos-stc { - position: static !important; + position: static !important; } .pos-abt { - position: absolute; + position: absolute; } .pos-fix { - position: fixed; + position: fixed; } .show { - visibility: visible; + visibility: visible; } .line { - // width: 100%; 不要设置 100%， 否则跟 pull-in 配合使用时候，宽度为不对。 - height: 2px; - margin: 10px 0; - font-size: 0; - overflow: hidden; + // width: 100%; 不要设置 100%， 否则跟 pull-in 配合使用时候，宽度为不对。 + height: 2px; + margin: 10px 0; + font-size: 0; + overflow: hidden; } .line-xs { - margin: 0; + margin: 0; } .line-lg { - margin-top: 15px; - margin-bottom: 15px; + margin-top: 15px; + margin-bottom: 15px; } .line-dashed { - border-style: dashed !important; - background-color: transparent; - border-width: 0; + border-style: dashed !important; + background-color: transparent; + border-width: 0; } .no-line { - border-width: 0; + border-width: 0; } .no-border, .no-borders { - border-color: transparent; - border-width: 0; + border-color: transparent; + border-width: 0; } .no-b-t { - border-top-width: 0; + border-top-width: 0; } .no-b-r { - border-right-width: 0; + border-right-width: 0; } .no-b-b { - border-bottom-width: 0; + border-bottom-width: 0; } .no-b-l { - border-left-width: 0; + border-left-width: 0; } .no-radius { - border-radius: 0; + border-radius: 0; } .block { - display: block; + display: block; } .block.hide { - display: none; + display: none; } .inline { - display: inline-block !important; + display: inline-block !important; } .none { - display: none; + display: none; } .pull-none { - float: none; + float: none; } .rounded { - border-radius: 500px; + border-radius: 500px; } .clear { - display: block; - overflow: hidden; + display: block; + overflow: hidden; } .no-bg { - background-color: transparent; - color: inherit; + background-color: transparent; + color: inherit; } .no-select { - user-select: none; + user-select: none; } .l-h { - line-height: $lineHeightBase; + line-height: $lineHeightBase; } .l-h-0x { - line-height: 0; + line-height: 0; } .l-h-1x { - line-height: 1.2; + line-height: 1.2; } .l-h-2x { - line-height: 2em; + line-height: 2em; } .l-s-1x { - letter-spacing: 1; + letter-spacing: 1; } .l-s-2x { - letter-spacing: 2; + letter-spacing: 2; } .l-s-3x { - letter-spacing: 3; + letter-spacing: 3; } .font-normal { - font-weight: normal; + font-weight: normal; } .font-thin { - font-weight: 300; + font-weight: 300; } .font-bold { - font-weight: 700; + font-weight: 700; } .text-5x { - font-size: 5em; + font-size: 5em; } .text-4x { - font-size: 4em; + font-size: 4em; } .text-3x { - font-size: 3em; + font-size: 3em; } .text-2x { - font-size: 2em; + font-size: 2em; } .text-xl { - font-size: $fontSizeXl !important; + font-size: $fontSizeXl !important; } .text-lg { - font-size: $fontSizeLg !important; + font-size: $fontSizeLg !important; } .text-md { - font-size: $fontSizeMd !important; + font-size: $fontSizeMd !important; } .text-base { - font-size: $fontSizeBase !important; + font-size: $fontSizeBase !important; } .text-sm { - font-size: $fontSizeSm !important; + font-size: $fontSizeSm !important; } .text-xs { - font-size: $fontSizeXs !important; + font-size: $fontSizeXs !important; } .text-xxs { - text-indent: -9999px; + text-indent: -9999px; } .text-ellipsis { - display: block; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + display: block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } .text-u-c { - text-transform: uppercase; + text-transform: uppercase; } .text-l-t { - text-decoration: line-through; + text-decoration: line-through; } .text-u-l { - text-decoration: underline; + text-decoration: underline; } .box-shadow { - box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(0, 0, 0, 0.05); + 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); + 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); + 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; + box-shadow: none !important; } .wrapper-xs { - padding: 5px; + padding: 5px; } .wrapper-sm { - padding: 10px; + padding: 10px; } .wrapper { - padding: 15px; + padding: 15px; } .wrapper-md { - padding: 20px; + padding: 20px; } .wrapper-lg { - padding: 30px; + padding: 30px; } .wrapper-xl { - padding: 50px; + padding: 50px; } .padder-lg { - padding-left: 30px; - padding-right: 30px; + padding-left: 30px; + padding-right: 30px; } .padder-md { - padding-left: 20px; - padding-right: 20px; + padding-left: 20px; + padding-right: 20px; } .padder { - padding-left: 15px; - padding-right: 15px; + padding-left: 15px; + padding-right: 15px; } .padder-v-xs { - padding-top: 5px; - padding-bottom: 5px; + padding-top: 5px; + padding-bottom: 5px; } .padder-v-sm { - padding-top: 10px; - padding-bottom: 10px; + padding-top: 10px; + padding-bottom: 10px; } .padder-v { - padding-top: 15px; - padding-bottom: 15px; + padding-top: 15px; + padding-bottom: 15px; } .padder-v-md { - padding-top: 20px; - padding-bottom: 20px; + padding-top: 20px; + padding-bottom: 20px; } .padder-v-lg { - padding-top: 30px; - padding-bottom: 30px; + padding-top: 30px; + padding-bottom: 30px; } .no-padder { - padding: 0 !important; + padding: 0 !important; } .pull-in { - margin-left: -15px; - margin-right: -15px; + margin-left: -15px; + margin-right: -15px; } .pull-in-md { - margin-left: -20px; - margin-right: -20px; + margin-left: -20px; + margin-right: -20px; } .pull-in-sm { - margin-left: -10px; - margin-right: -10px; + margin-left: -10px; + margin-right: -10px; } .pull-out { - margin: -10px -15px; + margin: -10px -15px; } .b { - border: 1px solid rgba(0, 0, 0, 0.05); + border: 1px solid rgba(0, 0, 0, 0.05); } .b-a { - border: 1px solid $borderColor; + border: 1px solid $borderColor; } .b-t { - border-top: 1px solid $borderColor; + border-top: 1px solid $borderColor; } .b-t-none { - border-top-width: 0; + border-top-width: 0; } .b-r { - border-right: 1px solid $borderColor; + border-right: 1px solid $borderColor; } .b-r-none { - border-right-width: 0; + border-right-width: 0; } .b-b { - border-bottom: 1px solid $borderColor; + border-bottom: 1px solid $borderColor; } .b-b-none { - border-bottom-width: 0; + border-bottom-width: 0; } .b-l { - border-left: 1px solid $borderColor; + border-left: 1px solid $borderColor; } .b-l-none { - border-left-width: 0; + border-left-width: 0; } .b-light { - border-color: $light; + border-color: $light; } .b-dark { - border-color: $dark; + border-color: $dark; } .b-black { - border-color: $dark; + border-color: $dark; } .b-primary { - border-color: $primary; + border-color: $primary; } .b-success { - border-color: $success; + border-color: $success; } .b-info { - border-color: $info; + border-color: $info; } .b-warning { - border-color: $warning; + border-color: $warning; } .b-danger { - border-color: $danger; + border-color: $danger; } .b-white { - border-color: #fff; + border-color: #fff; } .b-dashed { - border-style: dashed !important; + border-style: dashed !important; } .b-l-light { - border-left-color: $light; + border-left-color: $light; } .b-l-dark { - border-left-color: $dark; + border-left-color: $dark; } .b-l-black { - border-left-color: $dark; + border-left-color: $dark; } .b-l-primary { - border-left-color: $primary; + border-left-color: $primary; } .b-l-success { - border-left-color: $success; + border-left-color: $success; } .b-l-info { - border-left-color: $info; + border-left-color: $info; } .b-l-warning { - border-left-color: $warning; + border-left-color: $warning; } .b-l-danger { - border-left-color: $danger; + border-left-color: $danger; } .b-l-white { - border-left-color: #fff; + border-left-color: #fff; } .b-l-2x { - border-left-width: 2px; + border-left-width: 2px; } .b-l-3x { - border-left-width: 3px; + border-left-width: 3px; } .b-l-4x { - border-left-width: 4px; + border-left-width: 4px; } .b-l-5x { - border-left-width: 5px; + border-left-width: 5px; } .b-2x { - border-width: 2px; + border-width: 2px; } .b-3x { - border-width: 3px; + border-width: 3px; } .b-4x { - border-width: 4px; + border-width: 4px; } .b-5x { - border-width: 5px; + border-width: 5px; } .r { - border-radius: $borderRadius $borderRadius $borderRadius $borderRadius; + border-radius: $borderRadius $borderRadius $borderRadius $borderRadius; } .r-2x { - border-radius: $borderRadiusMd; + border-radius: $borderRadiusMd; } .r-3x { - border-radius: $borderRadiusLg; + border-radius: $borderRadiusLg; } .r-l { - border-radius: $borderRadius 0 0 $borderRadius; + border-radius: $borderRadius 0 0 $borderRadius; } .r-r { - border-radius: 0 $borderRadius $borderRadius 0; + border-radius: 0 $borderRadius $borderRadius 0; } .r-t { - border-radius: $borderRadius $borderRadius 0 0; + border-radius: $borderRadius $borderRadius 0 0; } .r-b { - border-radius: 0 0 $borderRadius $borderRadius; + border-radius: 0 0 $borderRadius $borderRadius; } .m-xxs { - margin: 2px 4px; + margin: 2px 4px; } .m-xs { - margin: 5px; + margin: 5px; } .m-sm { - margin: 10px; + margin: 10px; } .m { - margin: 15px; + margin: 15px; } .m-md { - margin: 20px; + margin: 20px; } .m-lg { - margin: 30px; + margin: 30px; } .m-xl { - margin: 50px; + margin: 50px; } .m-n, .m-none { - margin: 0 !important; + margin: 0 !important; } .m-l-none { - margin-left: 0 !important; + margin-left: 0 !important; } .m-l-xs { - margin-left: 5px; + margin-left: 5px; } .m-l-sm { - margin-left: 10px; + margin-left: 10px; } .m-l { - margin-left: 15px; + margin-left: 15px; } .m-l-md { - margin-left: 20px; + margin-left: 20px; } .m-l-lg { - margin-left: 30px; + margin-left: 30px; } .m-l-xl { - margin-left: 40px; + margin-left: 40px; } .m-l-xxl { - margin-left: 50px; + margin-left: 50px; } .m-l-n-xxs { - margin-left: -1px; + margin-left: -1px; } .m-l-n-xs { - margin-left: -5px; + margin-left: -5px; } .m-l-n-sm { - margin-left: -10px; + margin-left: -10px; } .m-l-n { - margin-left: -15px; + margin-left: -15px; } .m-l-n-md { - margin-left: -20px; + margin-left: -20px; } .m-l-n-lg { - margin-left: -30px; + margin-left: -30px; } .m-l-n-xl { - margin-left: -40px; + margin-left: -40px; } .m-l-n-xxl { - margin-left: -50px; + margin-left: -50px; } .m-t-none { - margin-top: 0 !important; + margin-top: 0 !important; } .m-t-xxs { - margin-top: 1px; + margin-top: 1px; } .m-t-xs { - margin-top: 5px; + margin-top: 5px; } .m-t-sm { - margin-top: 10px; + margin-top: 10px; } .m-t { - margin-top: 15px; + margin-top: 15px; } .m-t-md { - margin-top: 20px; + margin-top: 20px; } .m-t-lg { - margin-top: 30px; + margin-top: 30px; } .m-t-xl { - margin-top: 40px; + margin-top: 40px; } .m-t-xxl { - margin-top: 50px; + margin-top: 50px; } .m-t-n-xxs { - margin-top: -1px; + margin-top: -1px; } .m-t-n-xs { - margin-top: -5px; + margin-top: -5px; } .m-t-n-sm { - margin-top: -10px; + margin-top: -10px; } .m-t-n { - margin-top: -15px; + margin-top: -15px; } .m-t-n-md { - margin-top: -20px; + margin-top: -20px; } .m-t-n-lg { - margin-top: -30px; + margin-top: -30px; } .m-t-n-xl { - margin-top: -40px; + margin-top: -40px; } .m-t-n-xxl { - margin-top: -50px; + margin-top: -50px; } .m-r-none { - margin-right: 0 !important; + margin-right: 0 !important; } .m-r-xxs { - margin-right: 1px; + margin-right: 1px; } .m-r-xs { - margin-right: 5px; + margin-right: 5px; } .m-r-sm { - margin-right: 10px; + margin-right: 10px; } .m-r { - margin-right: 15px; + margin-right: 15px; } .m-r-md { - margin-right: 20px; + margin-right: 20px; } .m-r-lg { - margin-right: 30px; + margin-right: 30px; } .m-r-xl { - margin-right: 40px; + margin-right: 40px; } .m-r-xxl { - margin-right: 50px; + margin-right: 50px; } .m-r-n-xxs { - margin-right: -1px; + margin-right: -1px; } .m-r-n-xs { - margin-right: -5px; + margin-right: -5px; } .m-r-n-sm { - margin-right: -10px; + margin-right: -10px; } .m-r-n { - margin-right: -15px; + margin-right: -15px; } .m-r-n-md { - margin-right: -20px; + margin-right: -20px; } .m-r-n-lg { - margin-right: -30px; + margin-right: -30px; } .m-r-n-xl { - margin-right: -40px; + margin-right: -40px; } .m-r-n-xxl { - margin-right: -50px; + margin-right: -50px; } .m-b-none { - margin-bottom: 0 !important; + margin-bottom: 0 !important; } .m-b-xxs { - margin-bottom: 1px; + margin-bottom: 1px; } .m-b-xs { - margin-bottom: 5px; + margin-bottom: 5px; } .m-b-sm { - margin-bottom: 10px; + margin-bottom: 10px; } .m-b { - margin-bottom: 15px; + margin-bottom: 15px; } .m-b-md { - margin-bottom: 20px; + margin-bottom: 20px; } .m-b-lg { - margin-bottom: 30px; + margin-bottom: 30px; } .m-b-xl { - margin-bottom: 40px; + margin-bottom: 40px; } .m-b-xxl { - margin-bottom: 50px; + margin-bottom: 50px; } .m-b-n-xxs { - margin-bottom: -1px; + margin-bottom: -1px; } .m-b-n-xs { - margin-bottom: -5px; + margin-bottom: -5px; } .m-b-n-sm { - margin-bottom: -10px; + margin-bottom: -10px; } .m-b-n { - margin-bottom: -15px; + margin-bottom: -15px; } .m-b-n-md { - margin-bottom: -20px; + margin-bottom: -20px; } .m-b-n-lg { - margin-bottom: -30px; + margin-bottom: -30px; } .m-b-n-xl { - margin-bottom: -40px; + margin-bottom: -40px; } .m-b-n-xxl { - margin-bottom: -50px; + margin-bottom: -50px; } .p-xxs { - padding: 2px 4px; + padding: 2px 4px; } .p-xs { - padding: 5px; + padding: 5px; } .p-sm { - padding: 10px; + padding: 10px; } .p { - padding: 15px; + padding: 15px; } .p-md { - padding: 20px; + padding: 20px; } .p-lg { - padding: 30px; + padding: 30px; } .p-xl { - padding: 50px; + padding: 50px; } .p-n, .p-none { - padding: 0 !important; + padding: 0 !important; } .p-l-none { - padding-left: 0 !important; + padding-left: 0 !important; } .p-l-xs { - padding-left: 5px; + padding-left: 5px; } .p-l-sm { - padding-left: 10px; + padding-left: 10px; } .p-l { - padding-left: 15px; + padding-left: 15px; } .p-l-md { - padding-left: 20px; + padding-left: 20px; } .p-l-lg { - padding-left: 30px; + padding-left: 30px; } .p-l-xl { - padding-left: 40px; + padding-left: 40px; } .p-l-xxl { - padding-left: 50px; + padding-left: 50px; } .p-t-none { - padding-top: 0 !important; + padding-top: 0 !important; } .p-t-xxs { - padding-top: 1px; + padding-top: 1px; } .p-t-xs { - padding-top: 5px; + padding-top: 5px; } .p-t-sm { - padding-top: 10px; + padding-top: 10px; } .p-t { - padding-top: 15px; + padding-top: 15px; } .p-t-md { - padding-top: 20px; + padding-top: 20px; } .p-t-lg { - padding-top: 30px; + padding-top: 30px; } .p-t-xl { - padding-top: 40px; + padding-top: 40px; } .p-t-xxl { - padding-top: 50px; + padding-top: 50px; } .p-t-n-xxs { - padding-top: -1px; + padding-top: -1px; } .p-r-none { - padding-right: 0 !important; + padding-right: 0 !important; } .p-r-xxs { - padding-right: 1px; + padding-right: 1px; } .p-r-xs { - padding-right: 5px; + padding-right: 5px; } .p-r-sm { - padding-right: 10px; + padding-right: 10px; } .p-r { - padding-right: 15px; + padding-right: 15px; } .p-r-md { - padding-right: 20px; + padding-right: 20px; } .p-r-lg { - padding-right: 30px; + padding-right: 30px; } .p-r-xl { - padding-right: 40px; + padding-right: 40px; } .p-r-xxl { - padding-right: 50px; + padding-right: 50px; } .p-b-none { - padding-bottom: 0 !important; + padding-bottom: 0 !important; } .p-b-xxs { - padding-bottom: 1px; + padding-bottom: 1px; } .p-b-xs { - padding-bottom: 5px; + padding-bottom: 5px; } .p-b-sm { - padding-bottom: 10px; + padding-bottom: 10px; } .p-b { - padding-bottom: 15px; + padding-bottom: 15px; } .p-b-md { - padding-bottom: 20px; + padding-bottom: 20px; } .p-b-lg { - padding-bottom: 30px; + padding-bottom: 30px; } .p-b-xl { - padding-bottom: 40px; + padding-bottom: 40px; } .p-b-xxl { - padding-bottom: 50px; + padding-bottom: 50px; } .avatar { - position: relative; - display: block; + position: relative; + display: block; + border-radius: 500px; + white-space: nowrap; + + & img { border-radius: 500px; - white-space: nowrap; + width: 100%; + } - & 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; } - & 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; - } + &.bottom { + left: auto; + top: auto; + bottom: 0; + right: 0; } - &.thumb-md i { - width: 12px; - height: 12px; - margin: 3px; + &.left { + top: auto; + bottom: 0; } - &.thumb-sm i { - margin: 1px; + &.on { + background-color: $success; } - &.thumb-xs i { - margin: 0; + &.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; + width: 1em; } .w-2x { - width: 2em; + width: 2em; } .w-3x { - width: 3em; + width: 3em; } .w-xxs { - width: 60px; + width: 60px; } .h-xxs { - height: 60px; + height: 60px; } .w-xs { - width: 90px; + width: 90px; } .h-xs { - height: 90px; + height: 90px; } .w-sm { - width: 150px; + width: 150px; } .h-sm { - height: 150px; + height: 150px; } .w { - width: 200px; + width: 200px; } .h { - height: 200px; + height: 200px; } .w-md { - width: 240px; + width: 240px; } .h-md { - height: 240px; + height: 240px; } .w-lg { - width: 280px; + width: 280px; } .h-lg { - height: 280px; + height: 280px; } .w-xl { - width: 320px; + width: 320px; } .h-xl { - height: 320px; + height: 320px; } .w-xxl { - width: 360px; + width: 360px; } .h-xxl { - height: 360px; + height: 360px; } .w-full { - width: 100%; + width: 100%; } .w-auto { - width: auto; + width: auto; } .h-auto { - height: auto; + height: auto; } .h-full { - height: 100%; + height: 100%; } .no-grow { - flex-grow: unset !important; + flex-grow: unset !important; } @include media-breakpoint-up(sm) { - .#{$ns}Form-col { - - &.w, - &.w-xs, - &.w-sm &.w-md &.w-lg { - flex-basis: unset; - flex-grow: unset; - } + .#{$ns}Form-col { + &.w, + &.w-xs, + &.w-sm &.w-md &.w-lg { + flex-basis: unset; + flex-grow: unset; } + } } .thumb-xl { - width: 128px; - display: inline-block; + width: 128px; + display: inline-block; } .thumb-lg { - width: 96px; - display: inline-block; + width: 96px; + display: inline-block; } .thumb-md { - width: 64px; - display: inline-block; + width: 64px; + display: inline-block; } .thumb { - width: 50px; - display: inline-block; + width: 50px; + display: inline-block; } .thumb-sm { - width: 40px; - display: inline-block; + width: 40px; + display: inline-block; } .thumb-xs { - width: 34px; - display: inline-block; + width: 34px; + display: inline-block; } .thumb-xxs { - width: 30px; - display: inline-block; + width: 30px; + display: inline-block; } .thumb-wrapper { - padding: 2px; - border: 1px solid $borderColor; + padding: 2px; + border: 1px solid $borderColor; } .thumb, @@ -1275,109 +1274,107 @@ .thumb-lg, .thumb-btn, .thumb-xl { - & img { - height: auto; - max-width: 100%; - vertical-align: middle; - } + & img { + height: auto; + max-width: 100%; + vertical-align: middle; + } } .img-full { - width: 100%; + width: 100%; - & img { - width: 100%; - } + & img { + width: 100%; + } } .v-middle { - // display: inline-flex; - // align-items: center; - vertical-align: middle !important; + // display: inline-flex; + // align-items: center; + vertical-align: middle !important; } .scrollable { - overflow-x: hidden; - overflow-y: auto; - -webkit-overflow-scrolling: touch; + 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; - } - } + &.hover { + &, + & > .cell-inner { + overflow-y: hidden !important; } - .smart & { + &:hover, + &:focus, + &:active { + overflow: visible; + overflow-y: auto; - &, - &>.cell-inner { - overflow-y: auto !important; - } + & > .cell-inner { + overflow-y: auto !important; + } } + } + + .smart & { + &, + & > .cell-inner { + overflow-y: auto !important; + } + } } .scroll-x, .scroll-y { - overflow: hidden; - -webkit-overflow-scrolling: touch; + overflow: hidden; + -webkit-overflow-scrolling: touch; } .scroll-y { - overflow-y: auto; + overflow-y: auto; } .scroll-x { - overflow-x: auto; + overflow-x: auto; } .hover-action { - display: none; + display: none; } .hover-rotate { - transition: all 0.2s ease-in-out 0.1s; + transition: all 0.2s ease-in-out 0.1s; } .hover-anchor:hover, .hover-anchor:focus, .hover-anchor:active { - &>.hover-action { - display: inherit; - } + & > .hover-action { + display: inherit; + } - &>.hover-rotate { - transform: rotate(90deg); - } + & > .hover-rotate { + transform: rotate(90deg); + } } .backdrop { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 1050; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1050; - &.fade { - opacity: 0; - } + &.fade { + opacity: 0; + } - &.in { - opacity: 0.8; - } + &.in { + opacity: 0.8; + } } .col-xs-2-4, @@ -1388,231 +1385,231 @@ .col-sm-1-5, .col-md-1-5, .col-lg-1-5 { - position: relative; - min-height: 1px; - padding-right: 15px; - padding-left: 15px; + position: relative; + min-height: 1px; + padding-right: 15px; + padding-left: 15px; } // 5/12 = 2.4 .col-xs-2-4 { - width: 20%; - float: left; + width: 20%; + float: left; } // 8 / 12 = 1.5 .col-xs-1-5 { - width: 12.5%; - float: left; + width: 12.5%; + float: left; } .invisible { - position: absolute !important; - clip: rect(1px 1px 1px 1px); - clip: rect(1px, 1px, 1px, 1px); + position: absolute !important; + clip: rect(1px 1px 1px 1px); + clip: rect(1px, 1px, 1px, 1px); } .invisible2 { - visibility: hidden; + visibility: hidden; } .hbox { - display: table; - table-layout: fixed; - border-spacing: 0; - width: 100%; - height: 100%; + display: table; + table-layout: fixed; + border-spacing: 0; + width: 100%; + height: 100%; - &>.col { - display: table-cell; - vertical-align: top; - height: 100%; - float: none; - } + & > .col { + display: table-cell; + vertical-align: top; + height: 100%; + float: none; + } } .vbox { - display: table; - border-spacing: 0; - position: relative; - width: 100%; + display: table; + border-spacing: 0; + position: relative; + width: 100%; + height: 100%; + min-height: 240px; + + & .row-row { + display: table-row; height: 100%; - min-height: 240px; - & .row-row { - display: table-row; - height: 100%; + & .cell { + position: relative; + height: 100%; + width: 100%; - & .cell { - position: relative; - height: 100%; - width: 100%; + .ie & { + display: table-cell; + overflow: auto; - .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; - } + & .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; + white-space: normal; + word-break: break-all; + word-wrap: break-word; } @keyframes apearSensor { - from { - opacity: 0; - } + from { + opacity: 0; + } } @media (min-width: 768px) { - .col-sm-2-4 { - width: 20%; - float: left; - } + .col-sm-2-4 { + width: 20%; + float: left; + } - .col-sm-1-5 { - width: 12.5%; - float: left; - } + .col-sm-1-5 { + width: 12.5%; + float: left; + } } @media (min-width: 992px) { - .col-md-2-4 { - width: 20%; - float: left; - } + .col-md-2-4 { + width: 20%; + float: left; + } - .col-md-1-5 { - width: 12.5%; - float: left; - } + .col-md-1-5 { + width: 12.5%; + float: left; + } } @media (min-width: 1200px) { - .col-lg-2-4 { - width: 20%; - float: left; - } + .col-lg-2-4 { + width: 20%; + float: left; + } - .col-lg-1-5 { - width: 12.5%; - float: left; - } + .col-lg-1-5 { + width: 12.5%; + float: left; + } } // sm @media (min-width: 768px) and (max-width: 991px) { - .hidden-sm.show { - display: inherit !important; - } + .hidden-sm.show { + display: inherit !important; + } - .no-m-sm { - margin: 0 !important; - } + .no-m-sm { + margin: 0 !important; + } - .no-padder-sm { - padding: 0 !important; - } + .no-padder-sm { + padding: 0 !important; + } } /*phone*/ @media (max-width: 767px) { - .w-auto-xs { - width: auto; - } + .w-auto-xs { + width: auto; + } - .shift { - display: none !important; - } + .shift { + display: none !important; + } - .shift.in { - display: block !important; - } + .shift.in { + display: block !important; + } - .row-2 [class*="col"] { - width: 50%; - float: left; - } + .row-2 [class*='col'] { + width: 50%; + float: left; + } - .row-2 .col-0 { - clear: none; - } + .row-2 .col-0 { + clear: none; + } - .row-2 li:nth-child(odd) { - clear: left; - margin-left: 0; - } + .row-2 li:nth-child(odd) { + clear: left; + margin-left: 0; + } - .text-center-xs { - text-align: center; - } + .text-center-xs { + text-align: center; + } - .text-left-xs { - text-align: left; - } + .text-left-xs { + text-align: left; + } - .text-right-xs { - text-align: right; - } + .text-right-xs { + text-align: right; + } - .no-border-xs { - border-width: 0; - } + .no-border-xs { + border-width: 0; + } - .pull-none-xs { - float: none !important; - } + .pull-none-xs { + float: none !important; + } - .pull-right-xs { - float: right !important; - } + .pull-right-xs { + float: right !important; + } - .pull-left-xs { - float: left !important; - } + .pull-left-xs { + float: left !important; + } - .dropdown-menu.pull-none-xs { - left: 0; - } + .dropdown-menu.pull-none-xs { + left: 0; + } - .hidden-xs.show { - display: inherit !important; - } + .hidden-xs.show { + display: inherit !important; + } - .wrapper-lg, - .wrapper-md { - padding: 15px; - } + .wrapper-lg, + .wrapper-md { + padding: 15px; + } - .padder-lg, - .padder-md { - padding-left: 15px; - padding-right: 15px; - } + .padder-lg, + .padder-md { + padding-left: 15px; + padding-right: 15px; + } - .no-m-xs { - margin: 0 !important; - } + .no-m-xs { + margin: 0 !important; + } - .no-padder-xs { - padding: 0 !important; - } -} \ No newline at end of file + .no-padder-xs { + padding: 0 !important; + } +} diff --git a/scss/_variables.scss b/scss/_variables.scss index 9987b51d..9ff079b1 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -35,31 +35,17 @@ $dark: $gray800 !default; $remFactor: 16px !default; // 字体相关 -$fontFamilySansSerif: -apple-system, -BlinkMacSystemFont, -'SF Pro SC', -'SF Pro Text', -'Helvetica Neue', -Helvetica, -'PingFang SC', -'Segoe UI', -Roboto, -'Hiragino Sans GB', -'Arial', -'microsoft yahei ui', -'Microsoft YaHei', -SimSun, -sans-serif !default; -$fontFamilyMonospace: SFMono-Regular, -Menlo, -Monaco, -Consolas, -'Liberation Mono', -'Courier New', -monospace !default; +$fontFamilySansSerif: -apple-system, BlinkMacSystemFont, 'SF Pro SC', + 'SF Pro Text', 'Helvetica Neue', Helvetica, 'PingFang SC', 'Segoe UI', Roboto, + 'Hiragino Sans GB', 'Arial', 'microsoft yahei ui', 'Microsoft YaHei', SimSun, + sans-serif !default; +$fontFamilyMonospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', + 'Courier New', monospace !default; $fontFamilyBase: $fontFamilySansSerif !default; -$fontSizeBase: px2rem(14px) !default; // Assumes the browser default, typically `16px` +$fontSizeBase: px2rem( + 14px +) !default; // Assumes the browser default, typically `16px` $fontSizeMd: px2rem(16px) !default; $fontSizeLg: px2rem(20px) !default; $fontSizeXl: px2rem(24px) !default; @@ -99,11 +85,13 @@ $boxShadow: 0 0.5rem 1rem rgba($black, 0.15) !default; $boxShadowLg: 0 1rem 3rem rgba($black, 0.175) !default; // 窗口适配 -$breakpoints: (xs: 0, +$breakpoints: ( + xs: 0, sm: 576px, md: 768px, lg: 992px, - xl: 1200px) !default; + xl: 1200px +) !default; // 段落间距 $paragraph-marginBottom: 1rem !default; @@ -159,10 +147,14 @@ $Layout-aside--md-width: px2rem(250px) !default; $Layout-aside--lg-width: px2rem(300px) !default; $Layout-aside--folded-width: px2rem(60px) !default; $Layout-aside-bg: $dark !default; -$Layout-aside-onAcitve-bg: saturate(darken($Layout-aside-bg, 5%), - 2.5%) !default; -$Layout-aside-subList-bg: saturate(darken($Layout-aside-bg, 10%), - 2.5%) !default; +$Layout-aside-onAcitve-bg: saturate( + darken($Layout-aside-bg, 5%), + 2.5% +) !default; +$Layout-aside-subList-bg: saturate( + darken($Layout-aside-bg, 10%), + 2.5% +) !default; $Layout-aside-onHover-bg: saturate(darken($Layout-aside-bg, 3%), 2.5%) !default; $Layout-aside-color: desaturate(lighten($Layout-aside-bg, 40%), 10%) !default; @@ -183,14 +175,16 @@ $Layout-asideLink-arrowColor: $Layout-asideLink-color !default; $Layout-asideLink-onActive-arrowColor: $Layout-asideLink-onActive-color !default; $Layout-asideLabel-color: darken($Layout-aside-color, 10%) !default; $Layout-brand-bg: $dark !default; -$Layout-brandBar-color: desaturate(lighten($Layout-brand-bg, 40%), - 10%) !default; +$Layout-brandBar-color: desaturate( + lighten($Layout-brand-bg, 40%), + 10% +) !default; $Layout-brand-color: lighten($Layout-brandBar-color, 25%) !default; $Layout-header-height: px2rem(50px) !default; $Layout-headerBar-borderBottom: none !default; $Layout-header-bg: $white !default; $Layout-header-boxShadow: 0 px2rem(2px) px2rem(2px) rgba(0, 0, 0, 0.05), -0 1px 0 rgba(0, 0, 0, 0.05) !default; + 0 1px 0 rgba(0, 0, 0, 0.05) !default; $Layout-nav-height: px2rem(40px) !default; $Layout-nav-lgHeight: px2rem(50px) !default; $Layout-nav--folded-height: px2rem(50px) !default; @@ -223,7 +217,9 @@ $Modal-header-bg: darken($Modal-bg, 2.5%) !default; $Modal-title-lineHeight: $lineHeightBase !default; $Modal-title-fontSize: $fontSizeBase !default; $Modal-title-color: $text--loud-color !default; -$Modal-header-paddingY: ($Modal-header-height - $Modal-title-lineHeight * $Modal-title-fontSize) / 2 !default; +$Modal-header-paddingY: ( + $Modal-header-height - $Modal-title-lineHeight * $Modal-title-fontSize + ) / 2 !default; $Modal-header-paddingX: $gap-md !default; $Modal-close-width: px2rem(12px) !default; $Modal-close-color: $text--muted-color !default; @@ -231,8 +227,10 @@ $Model-close-onHover-color: $text-color !default; $Modal-body-paddingX: $gap-md !default; $Modal-body-paddingY: $gap-md !default; $Modal-body--noHeader-paddingTop: $gap-base; -$Modal-body-borderTop: $Modal-content-borderWidth solid lighten($Modal-content-borderColor, 5%) !default; -$Modal-body-borderBottom: $Modal-content-borderWidth solid lighten($Modal-content-borderColor, 5%) !default; +$Modal-body-borderTop: $Modal-content-borderWidth solid + lighten($Modal-content-borderColor, 5%) !default; +$Modal-body-borderBottom: $Modal-content-borderWidth solid + lighten($Modal-content-borderColor, 5%) !default; $Modal-footer-padding: $gap-sm !default; $Modal-footer-marginY: 0 !default; $Modal-footer-marginX: 0 !default; @@ -355,8 +353,10 @@ $Alert-marginBottom: $gap-md !default; $Alert--danger-color: #a94442 !default; $Alert--danger-bg: #f2dede !default; -$Alert--danger-borderColor: darken(adjust-hue($Alert--danger-bg, -10), - 5%) !default; +$Alert--danger-borderColor: darken( + adjust-hue($Alert--danger-bg, -10), + 5% +) !default; $Alert--info-color: #31708f !default; $Alert--info-bg: #d9edf7 !default; @@ -364,13 +364,17 @@ $Alert--info-borderColor: darken(adjust-hue($Alert--info-bg, -10), 5%) !default; $Alert--success-color: #3c763d !default; $Alert--success-bg: #dff0d8 !default; -$Alert--success-borderColor: darken(adjust-hue($Alert--success-bg, -10), - 5%) !default; +$Alert--success-borderColor: darken( + adjust-hue($Alert--success-bg, -10), + 5% +) !default; $Alert--warning-color: #8a6d3b !default; $Alert--warning-bg: #fcf8e3 !default; -$Alert--warning-borderColor: darken(adjust-hue($Alert--warning-bg, -10), - 5%) !default; +$Alert--warning-borderColor: darken( + adjust-hue($Alert--warning-bg, -10), + 5% +) !default; // spinner $Spinner-overlay-bg: rgba(255, 255, 255, 0.4) !default; @@ -458,7 +462,8 @@ $Table-tree-borderColor: $Table-borderColor !default; $TableCell-height: px2rem(40px) !default; $TableCell-paddingX: $gap-sm !default; $TableCell--edge-paddingX: $gap-md !default; -$TableCell-paddingY: ($TableCell-height - $Table-fontSize * $Table-lineHeight) / 2; +$TableCell-paddingY: ($TableCell-height - $Table-fontSize * $Table-lineHeight) / + 2; $Table-placeholder-height: px2rem(100px) !default; // $Table-checkCell-width: px2rem(50px) !default; @@ -473,16 +478,20 @@ $Table-onChecked-bg: #d9f3fb !default; $Table-onChecked-borderColor: darken($Table-onChecked-bg, 10%) !default; $Table-onChecked-color: darken($Table-onChecked-bg, 40%) !default; $Table-onChecked-onHover-bg: darken($Table-onChecked-bg, 5%) !default; -$Table-onChecked-onHover-borderColor: darken($Table-onChecked-borderColor, - 5%) !default; +$Table-onChecked-onHover-borderColor: darken( + $Table-onChecked-borderColor, + 5% +) !default; $Table-onChecked-onHover-color: darken($Table-onChecked-color, 5%) !default; $Table-onModified-bg: #e8f0fe !default; $Table-onModified-color: #4285f4 !default; $Table-onModified-borderColor: darken($Table-onModified-bg, 5%) !default; $Table-onModified-onHover-bg: darken($Table-onModified-bg, 2.5%) !default; -$Table-onModified-onHover-borderColor: darken($Table-onModified-onHover-bg, - 5%) !default; +$Table-onModified-onHover-borderColor: darken( + $Table-onModified-onHover-bg, + 5% +) !default; $Table-onModified-onHover-color: darken($Table-onModified-color, 5%) !default; $Table-onDragging-opacity: 0.1 !default; @@ -641,10 +650,15 @@ $Form-input-placeholderColor: $text--muted-color !default; $Form-input-lineHeight: 20/14 !default; $Form-input-fontSize: $Form-fontSize !default; $Form-input-boxShadow: none !default; -$Form-input-paddingY: ($Form-input-height - $Form-input-lineHeight * $Form-input-fontSize - px2rem(2px))/2 !default; +$Form-input-paddingY: ( + $Form-input-height - $Form-input-lineHeight * $Form-input-fontSize - + px2rem(2px) + )/2 !default; $Form-input-paddingX: px2rem(12px) !default; $Form-input-marginBottom: px2rem(6px) !default; -$Form-label-paddingTop: ($Form-input-height - $Form-input-lineHeight * $Form-input-fontSize)/2 !default; +$Form-label-paddingTop: ( + $Form-input-height - $Form-input-lineHeight * $Form-input-fontSize + )/2 !default; $Form-input-addOnBg: #edf1f2 !default; $Form-input-addOnColor: $text-color !default; @@ -686,10 +700,14 @@ $Form-select-onFocused-borderColor: $Form-input-onFocused-borderColor !default; $Form-select-onError-borderColor: $Form-input-onError-borderColor !default; $Form-selectOption-height: $Form-input-height !default; $Form-selectValue-color: $info !default; -$Form-selectValue-bg: saturate(lighten($Form-selectValue-color, 40%), - 2.5%) !default; -$Form-selectValue-borderColor: saturate(lighten($Form-selectValue-color, 30%), - 2.5%) !default; +$Form-selectValue-bg: saturate( + lighten($Form-selectValue-color, 40%), + 2.5% +) !default; +$Form-selectValue-borderColor: saturate( + lighten($Form-selectValue-color, 30%), + 2.5% +) !default; $Form-selectValue-fontSize: $fontSizeSm !default; $Form-select-caret-vender: 'FontAwesome' !default; $Form-select-caret-icon: '\f0d7' !default; @@ -718,7 +736,10 @@ $InputGroup-addOn-bg: $Form-input-addOnBg !default; $InputGroup-addOn-borderWidth: $Form-input-borderWidth !default; $InputGroup-addOn-borderColor: $Form-input-borderColor !default; $InputGroup-addOn-borderRadius: $Form-input-borderRadius !default; -$InputGroup-paddingY: ($InputGroup-height - $Form-input-lineHeight * $Form-input-fontSize - px2rem(2px))/2 !default; +$InputGroup-paddingY: ( + $InputGroup-height - $Form-input-lineHeight * $Form-input-fontSize - + px2rem(2px) + )/2 !default; $InputGroup-paddingX: px2rem(10px) !default; $InputGroup-addOn-onFocused-borderColor: $Form-input-onFocused-borderColor !default; $InputGroup-select-borderWidth: $Form-select-borderWidth !default; @@ -744,7 +765,10 @@ $Button-height: $Form-input-height !default; $Button-mimWidth: auto !default; $Button-lineHeight: $Form-input-lineHeight !default; $Button-paddingX: px2rem(12px) !default; -$Button-paddingY: ($Button-height - $Button-borderWidth * 2 - $Button-lineHeight * $Button-fontSize)/2 !default; +$Button-paddingY: ( + $Button-height - $Button-borderWidth * 2 - $Button-lineHeight * + $Button-fontSize + )/2 !default; $Button--iconOnly-minWidthRate: 4 / 3 !default; @@ -752,28 +776,40 @@ $Button--xs-fontSize: $fontSizeXs !default; $Button--xs-height: px2rem(22px) !default; $Button--xs-lineHeight: 18 / 11 !default; $Button--xs-paddingX: px2rem(5px) !default; -$Button--xs-paddingY: ($Button--xs-height - $Button-borderWidth * 2 - $Button--xs-lineHeight * $Button--xs-fontSize)/2 !default; +$Button--xs-paddingY: ( + $Button--xs-height - $Button-borderWidth * 2 - $Button--xs-lineHeight * + $Button--xs-fontSize + )/2 !default; $Button--sm-fontSize: $fontSizeSm !default; $Button--sm-height: px2rem(30px) !default; $Button--sm-lineHeight: 18 / 12 !default; $Button--sm-paddingX: px2rem(8px) !default; -$Button--sm-paddingY: ($Button--sm-height - $Button-borderWidth * 2 - $Button--sm-lineHeight * $Button--sm-fontSize)/2 !default; +$Button--sm-paddingY: ( + $Button--sm-height - $Button-borderWidth * 2 - $Button--sm-lineHeight * + $Button--sm-fontSize + )/2 !default; $Button--md-fontSize: $Button-fontSize !default; $Button--md-height: $Button-height !default; $Button--md-lineHeight: $Button-lineHeight !default; $Button--md-paddingX: $Button-paddingX !default; -$Button--md-paddingY: ($Button--md-height - $Button-borderWidth * 2 - $Button--md-lineHeight * $Button--md-fontSize)/2 !default; +$Button--md-paddingY: ( + $Button--md-height - $Button-borderWidth * 2 - $Button--md-lineHeight * + $Button--md-fontSize + )/2 !default; $Button--lg-fontSize: $fontSizeLg !default; $Button--lg-height: px2rem(46px) !default; $Button--lg-lineHeight: 24 / 20 !default; $Button--lg-paddingX: px2rem(16px) !default; -$Button--lg-paddingY: ($Button--lg-height - $Button-borderWidth * 2 - $Button--lg-lineHeight * $Button--lg-fontSize)/2 !default; +$Button--lg-paddingY: ( + $Button--lg-height - $Button-borderWidth * 2 - $Button--lg-lineHeight * + $Button--lg-fontSize + )/2 !default; $Button-boxShadow: inset 0 1px 0 rgba($white, 0.15), -0 1px 1px rgba($black, 0.075) !default; + 0 1px 1px rgba($black, 0.075) !default; $Button-onFocus-boxShadow: none !default; $Button-onActive-boxShadow: inset 0 3px 5px rgba($black, 0.125) !default; $Button-onDisabled-opacity: 0.65 !default; @@ -785,10 +821,8 @@ $Button-borderRadius: $borderRadius !default; $Button--lg-borderRadius: $borderRadius !default; $Button--sm-borderRadius: $borderRadius !default; -$Button-transition: color 0.15s ease-in-out, -background-color 0.15s ease-in-out, -border-color 0.15s ease-in-out, -box-shadow 0.15s ease-in-out !default; +$Button-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, + border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !default; $Button--primary-bg: $primary !default; $Button--primary-border: $Button--primary-bg !default; @@ -797,20 +831,26 @@ $Button--primary-onHover-bg: darken($Button--primary-bg, 7.5%) !default; $Button--primary-onHover-border: darken($Button--primary-border, 10%) !default; $Button--primary-onHover-color: $Button--primary-color !default; $Button--primary-onActive-bg: darken($Button--primary-bg, 10%) !default; -$Button--primary-onActive-border: darken($Button--primary-border, - 12.5%) !default; +$Button--primary-onActive-border: darken( + $Button--primary-border, + 12.5% +) !default; $Button--primary-onActive-color: $Button--primary-color !default; $Button--secondary-bg: $secondary !default; $Button--secondary-border: $Button--secondary-bg !default; $Button--secondary-color: $white !default; $Button--secondary-onHover-bg: darken($Button--secondary-bg, 7.5%) !default; -$Button--secondary-onHover-border: darken($Button--secondary-border, - 10%) !default; +$Button--secondary-onHover-border: darken( + $Button--secondary-border, + 10% +) !default; $Button--secondary-onHover-color: $Button--secondary-color !default; $Button--secondary-onActive-bg: darken($Button--secondary-bg, 10%) !default; -$Button--secondary-onActive-border: darken($Button--secondary-border, - 12.5%) !default; +$Button--secondary-onActive-border: darken( + $Button--secondary-border, + 12.5% +) !default; $Button--secondary-onActive-color: $Button--secondary-color !default; $Button--success-bg: $success !default; @@ -820,8 +860,10 @@ $Button--success-onHover-bg: darken($Button--success-bg, 7.5%) !default; $Button--success-onHover-border: darken($Button--success-border, 10%) !default; $Button--success-onHover-color: $Button--success-color !default; $Button--success-onActive-bg: darken($Button--success-bg, 10%) !default; -$Button--success-onActive-border: darken($Button--success-border, - 12.5%) !default; +$Button--success-onActive-border: darken( + $Button--success-border, + 12.5% +) !default; $Button--success-onActive-color: $Button--success-color !default; $Button--info-bg: $info !default; @@ -841,8 +883,10 @@ $Button--warning-onHover-bg: darken($Button--warning-bg, 7.5%) !default; $Button--warning-onHover-border: darken($Button--warning-border, 10%) !default; $Button--warning-onHover-color: $Button--warning-color !default; $Button--warning-onActive-bg: darken($Button--warning-bg, 10%) !default; -$Button--warning-onActive-border: darken($Button--warning-border, - 12.5%) !default; +$Button--warning-onActive-border: darken( + $Button--warning-border, + 12.5% +) !default; $Button--warning-onActive-color: $Button--warning-color !default; $Button--danger-bg: $danger !default; @@ -882,8 +926,10 @@ $Button--default-onHover-bg: darken($Button--default-bg, 7.5%) !default; $Button--default-onHover-border: darken($Button--default-border, 10%) !default; $Button--default-onHover-color: $Button--default-color !default; $Button--default-onActive-bg: darken($Button--default-bg, 10%) !default; -$Button--default-onActive-border: darken($Button--default-border, - 12.5%) !default; +$Button--default-onActive-border: darken( + $Button--default-border, + 12.5% +) !default; $Button--default-onActive-color: $Button--default-color !default; $Button--link-color: $text-color !default; @@ -899,7 +945,9 @@ $DropDown-menu-height: px2rem(34px) !default; $DropDown-menu-minWidth: px2rem(160px) !default; $DropDown-menu-paddingY: $gap-xs !default; $DropDown-menu-paddingX: 0 !default; -$DropDown-menuItem-paddingY: ($DropDown-menu-height - $fontSizeBase * $lineHeightBase) / 2 !default; +$DropDown-menuItem-paddingY: ( + $DropDown-menu-height - $fontSizeBase * $lineHeightBase + ) / 2 !default; $DropDown-menuItem-paddingX: $gap-sm !default; $DropDown-menuItem-onHover-color: inherit !default; $DropDown-menuItem-onHover-bg: $Button--default-onHover-bg !default; @@ -954,7 +1002,9 @@ $ColorPicker-height: $Form-input-height !default; $ColorPicker-lineHeight: $Form-input-lineHeight !default; $ColorPicker-fontSize: $Form-input-fontSize !default; $ColorPicker-paddingX: px2rem(12px) !default; -$ColorPicker-paddingY: ($ColorPicker-height - $ColorPicker-lineHeight * $ColorPicker-fontSize)/2 - $ColorPicker-borderWidth !default; +$ColorPicker-paddingY: ( + $ColorPicker-height - $ColorPicker-lineHeight * $ColorPicker-fontSize + )/2 - $ColorPicker-borderWidth !default; $ColorPicker-placeholderColor: $Form-input-placeholderColor !default; $ColorPicker-onFocused-borderColor: $Form-input-onFocused-borderColor !default; $DatePicker-onHover-borderColor: $Form-input-borderColor !default; @@ -970,7 +1020,9 @@ $DatePicker-height: $Form-input-height !default; $DatePicker-lineHeight: $Form-input-lineHeight !default; $DatePicker-fontSize: $Form-input-fontSize !default; $DatePicker-paddingX: px2rem(12px) !default; -$DatePicker-paddingY: ($DatePicker-height - $DatePicker-lineHeight * $DatePicker-fontSize)/2 - $DatePicker-borderWidth !default; +$DatePicker-paddingY: ( + $DatePicker-height - $DatePicker-lineHeight * $DatePicker-fontSize + )/2 - $DatePicker-borderWidth !default; $DatePicker-placeholderColor: $Form-input-placeholderColor !default; $DatePicker-iconColor: $icon-color !default; $DatePicker-onHover-iconColor: $icon-onHover-color !default; @@ -996,13 +1048,18 @@ $Calendar-input-borderRadius: $borderRadius !default; $Calendar-input-height: px2rem(30px) !default; $Calendar-input-lineHeight: $lineHeightBase; $Calendar-input-paddingX: px2rem(10px) !default; -$Calendar-input-paddingY: ($Calendar-input-height - $Calendar-input-lineHeight * $Calendar-input-fontSize) / 2; +$Calendar-input-paddingY: ( + $Calendar-input-height - $Calendar-input-lineHeight * + $Calendar-input-fontSize + ) / 2; $Calendar-btn-fontSize: $fontSizeSm !default; $Calendar-btn-lineHeight: $lineHeightBase !default; $Calendar-btn-height: px2rem(30px) !default; $Calendar-btn-paddingX: px2rem(10px) !default; -$Calendar-btn-paddingY: ($Calendar-btn-height - $Calendar-btn-lineHeight * $Calendar-btn-fontSize)/2 !default; +$Calendar-btn-paddingY: ( + $Calendar-btn-height - $Calendar-btn-lineHeight * $Calendar-btn-fontSize + )/2 !default; $Calendar-btn-bg: $info !default; $Calendar-btn-border: $Calendar-btn-bg !default; @@ -1020,12 +1077,16 @@ $Calendar-btnCancel-border: $Calendar-btnCancel-bg !default; $Calendar-btnCancel-borderRadius: $Button-borderRadius !default; $Calendar-btnCancel-color: $text-color !default; $Calendar-btnCancel-onHover-bg: darken($Calendar-btnCancel-bg, 7.5%) !default; -$Calendar-btnCancel-onHover-border: darken($Calendar-btnCancel-border, - 10%) !default; +$Calendar-btnCancel-onHover-border: darken( + $Calendar-btnCancel-border, + 10% +) !default; $Calendar-btnCancel-onHover-color: $Calendar-btnCancel-color !default; $Calendar-btnCancel-onActive-bg: darken($Calendar-btnCancel-bg, 10%) !default; -$Calendar-btnCancel-onActive-border: darken($Calendar-btnCancel-border, - 12.5%) !default; +$Calendar-btnCancel-onActive-border: darken( + $Calendar-btnCancel-border, + 12.5% +) !default; $Calendar-btnCancel-onActive-color: $Calendar-btnCancel-color !default; $Calendar-color: $text-color !default; @@ -1048,14 +1109,18 @@ $ListControl-item-paddingX: px2rem(12px) !default; $ListControl-item-paddingY: px2rem(6px) !default; $ListControl-item-color: $text-color !default; -$ListControl-item-onHover-borderColor: darken($ListControl-item-borderColor, - 10%) !default; +$ListControl-item-onHover-borderColor: darken( + $ListControl-item-borderColor, + 10% +) !default; $ListControl-item-onHover-bg: darken($ListControl-item-bg, 7.5%) !default; $ListControl-item-onHover-color: $ListControl-item-color !default; $ListControl-item-onActive-bg: $primary !default; -$ListControl-item-onActive-borderColor: darken($ListControl-item-onActive-bg, - 10%) !default; +$ListControl-item-onActive-borderColor: darken( + $ListControl-item-onActive-bg, + 10% +) !default; $ListControl-item-onActive-color: $white !default; $ListControl-item-onActive-before-bg: $white !default; $ListControl-item-onActive-after-borderColor: $primary !default; @@ -1088,7 +1153,10 @@ $Combo-addBtn-borderRadius: $Button-borderRadius; $Combo-addBtn-height: px2rem(26px) !default; $Combo-addBtn-lineHeight: $Button--sm-lineHeight !default; $Combo-addBtn-paddingX: $Button--sm-paddingX !default; -$Combo-addBtn-paddingY: ($Combo-addBtn-height - $Button-borderWidth * 2 - $Combo-addBtn-lineHeight * $Combo-addBtn-fontSize)/2 !default; +$Combo-addBtn-paddingY: ( + $Combo-addBtn-height - $Button-borderWidth * 2 - $Combo-addBtn-lineHeight * + $Combo-addBtn-fontSize + )/2 !default; $Combo--vertical-item-gap: px2rem(5px); $Combo--vertical-item-borderColor: $borderColor !default; @@ -1103,8 +1171,10 @@ $Combo--vertical-itemToolbar-bg: $info !default; $Combo--vertical-itemToolbar-color: darken($white, 5%) !default; $Combo--vertical-itemToolbar-onHover-color: $white !default; $Combo--vertical-itemToolbar-borderWidth: $borderWidth !default; -$Combo--vertical-itemToolbar-borderColor: darken($Combo--vertical-itemToolbar-bg, - 5%) !default; +$Combo--vertical-itemToolbar-borderColor: darken( + $Combo--vertical-itemToolbar-bg, + 5% +) !default; $Combo--vertical-itemToolbar-borderRadius: px2rem(3px) !default; $Combo--vertical-itemToolbar-transion: all 0.25s ease-in-out !default; $Combo--vertical-itemToolbar-positionTop: -$Combo--vertical-itemToolbar-height !default; @@ -1120,8 +1190,10 @@ $SubForm--addBtn-onHover-bg: darken($SubForm--addBtn-bg, 7.5%) !default; $SubForm--addBtn-onHover-border: darken($SubForm--addBtn-border, 10%) !default; $SubForm--addBtn-onHover-color: $SubForm--addBtn-color !default; $SubForm--addBtn-onActive-bg: darken($SubForm--addBtn-bg, 10%) !default; -$SubForm--addBtn-onActive-border: darken($SubForm--addBtn-border, - 12.5%) !default; +$SubForm--addBtn-onActive-border: darken( + $SubForm--addBtn-border, + 12.5% +) !default; $SubForm--addBtn-onActive-color: $SubForm--addBtn-color !default; $SubForm--addBtn-fontSize: $Button--sm-fontSize !default; @@ -1129,7 +1201,10 @@ $SubForm--addBtn-borderRadius: $Button-borderRadius; $SubForm--addBtn-height: $Button--sm-height !default; $SubForm--addBtn-lineHeight: $Button--sm-lineHeight !default; $SubForm--addBtn-paddingX: $Button--sm-paddingX !default; -$SubForm--addBtn-paddingY: ($SubForm--addBtn-height - $Button-borderWidth * 2 - $SubForm--addBtn-lineHeight * $SubForm--addBtn-fontSize)/2 !default; +$SubForm--addBtn-paddingY: ( + $SubForm--addBtn-height - $Button-borderWidth * 2 - + $SubForm--addBtn-lineHeight * $SubForm--addBtn-fontSize + )/2 !default; // InputRange $InputRange-fontFamily: $fontFamilyBase !default; @@ -1142,15 +1217,17 @@ $InputRange-onDisabled-color: #cccccc !default; $InputRange-slider-bg: $InputRange-primaryColor !default; $InputRange-slider-border: px2rem(1px) solid $InputRange-primaryColor !default; $InputRange-slider-onFocus-borderRadius: $borderRadiusMd !default; -$InputRange-slider-onFocus-boxShadow: 0 0 0 $InputRange-slider-onFocus-borderRadius transparentize($InputRange-slider-bg, 0.8) !default; +$InputRange-slider-onFocus-boxShadow: 0 0 0 + $InputRange-slider-onFocus-borderRadius + transparentize($InputRange-slider-bg, 0.8) !default; $InputRange-slider-height: px2rem(24px) !default; $InputRange-slider-width: px2rem(18px) !default; -$InputRange-slider-transition: transform 0.3s ease-out, -box-shadow 0.3s ease-out !default; +$InputRange-slider-transition: transform 0.3s ease-out, box-shadow 0.3s ease-out !default; $InputRange-sliderContainer-transition: left 0.3s ease-out !default; $InputRange-slider-onActive-transform: scale(1.3) !default; $InputRange-slider-onDisabled-bg: $InputRange-onDisabled-color !default; -$InputRange-slider-onDisabled-border: px2rem(1px) solid $InputRange-onDisabled-color !default; +$InputRange-slider-onDisabled-border: px2rem(1px) solid + $InputRange-onDisabled-color !default; // input-range-label $InputRange-label-color: $InputRange-neutralColor !default; @@ -1162,8 +1239,7 @@ $InputRange-label--value-positionTop: px2rem(-40px) !default; // input-range-track $InputRange-track-bg: $InputRange-neutralLightColor !default; $InputRange-track-height: px2rem(12px) !default; -$InputRange-track-transition: left 0.3s ease-out, -width 0.3s ease-out !default; +$InputRange-track-transition: left 0.3s ease-out, width 0.3s ease-out !default; $InputRange-track-onActive-bg: $InputRange-primaryColor !default; $InputRange-track-onDisabled-bg: $InputRange-neutralLightColor !default; @@ -1172,12 +1248,16 @@ $ImageControl-addBtn-bg: $Button--default-bg !default; $ImageControl-addBtn-border: $Button--default-border !default; $ImageControl-addBtn-color: $Button--default-color !default; $ImageControl-addBtn-onHover-bg: darken($ImageControl-addBtn-bg, 7.5%) !default; -$ImageControl-addBtn-onHover-border: darken($ImageControl-addBtn-border, - 10%) !default; +$ImageControl-addBtn-onHover-border: darken( + $ImageControl-addBtn-border, + 10% +) !default; $ImageControl-addBtn-onHover-color: $Button--default-color !default; $ImageControl-addBtn-onActive-bg: darken($ImageControl-addBtn-bg, 10%) !default; -$ImageControl-addBtn-onActive-border: darken($ImageControl-addBtn-border, - 12.5%) !default; +$ImageControl-addBtn-onActive-border: darken( + $ImageControl-addBtn-border, + 12.5% +) !default; $ImageControl-addBtn-onActive-color: $ImageControl-addBtn-color !default; $ImageControl-addBtn-onDisabled-bg: $Form-input-onDisabled-bg !default; $ImageControl-addBtn-onDisabled-border: $Form-input-onDisabled-borderColor !default; @@ -1190,12 +1270,16 @@ $TagControl-sugBtn-bg: $Button--default-bg !default; $TagControl-sugBtn-border: $Button--default-border !default; $TagControl-sugBtn-color: $Button--default-color !default; $TagControl-sugBtn-onHover-bg: darken($TagControl-sugBtn-bg, 7.5%) !default; -$TagControl-sugBtn-onHover-border: darken($TagControl-sugBtn-border, - 10%) !default; +$TagControl-sugBtn-onHover-border: darken( + $TagControl-sugBtn-border, + 10% +) !default; $TagControl-sugBtn-onHover-color: $Button--default-color !default; $TagControl-sugBtn-onActive-bg: darken($TagControl-sugBtn-bg, 10%) !default; -$TagControl-sugBtn-onActive-border: darken($TagControl-sugBtn-border, - 12.5%) !default; +$TagControl-sugBtn-onActive-border: darken( + $TagControl-sugBtn-border, + 12.5% +) !default; $TagControl-sugBtn-onActive-color: $TagControl-sugBtn-color !default; $TagControl-sugBtn-borderWidth: $Button-borderWidth !default; @@ -1204,7 +1288,10 @@ $TagControl-sugBtn-borderRadius: $Button-borderRadius !default; $TagControl-sugBtn-height: $Button--sm-height !default; $TagControl-sugBtn-lineHeight: $Button--sm-lineHeight !default; $TagControl-sugBtn-paddingX: $Button--sm-paddingX !default; -$TagControl-sugBtn-paddingY: ($TagControl-sugBtn-height - $Button-borderWidth * 2 - $TagControl-sugBtn-lineHeight * $TagControl-sugBtn-fontSize)/2 !default; +$TagControl-sugBtn-paddingY: ( + $TagControl-sugBtn-height - $Button-borderWidth * 2 - + $TagControl-sugBtn-lineHeight * $TagControl-sugBtn-fontSize + )/2 !default; // Wizard $Wizard-steps-bg: $gray100 !default; @@ -1378,4 +1465,4 @@ $Picker-iconColor: $icon-color !default; $Picker-onHover-iconColor: $icon-onHover-color !default; $Picker-btn-vendor: 'FontAwesome' !default; $Picker-btn-fontSize: $Form-fontSize !default; -$Picker-btn-icon: '\f2d2' !default; \ No newline at end of file +$Picker-btn-icon: '\f2d2' !default; diff --git a/scss/base/_normalize.scss b/scss/base/_normalize.scss index bae61a75..f8bbbf94 100644 --- a/scss/base/_normalize.scss +++ b/scss/base/_normalize.scss @@ -9,8 +9,8 @@ */ html { - line-height: 1.15; // 1 - -webkit-text-size-adjust: 100%; //2 + line-height: 1.15; // 1 + -webkit-text-size-adjust: 100%; //2 } /* Sections @@ -21,7 +21,7 @@ html { */ body { - margin: 0; + margin: 0; } /** @@ -30,8 +30,8 @@ body { */ h1 { - font-size: 2em; - margin: 0.67em 0; + font-size: 2em; + margin: 0.67em 0; } /* Grouping content @@ -43,9 +43,9 @@ h1 { */ hr { - box-sizing: content-box; // 1 - height: 0; // 2 - overflow: visible; //2 + box-sizing: content-box; // 1 + height: 0; // 2 + overflow: visible; //2 } /** @@ -54,8 +54,8 @@ hr { */ pre { - font-family: monospace, monospace; // 1 - font-size: 1em; // 2 + font-family: monospace, monospace; // 1 + font-size: 1em; // 2 } /* Text-level semantics @@ -66,7 +66,7 @@ pre { */ a { - background-color: transparent; + background-color: transparent; } /** @@ -75,9 +75,9 @@ a { */ abbr[title] { - border-bottom: none; // 1 - text-decoration: underline; // 2 - text-decoration: underline dotted; // 2 + border-bottom: none; // 1 + text-decoration: underline; // 2 + text-decoration: underline dotted; // 2 } /** @@ -86,7 +86,7 @@ abbr[title] { b, strong { - font-weight: bolder; + font-weight: bolder; } /** @@ -97,8 +97,8 @@ strong { code, kbd, samp { - font-family: monospace, monospace; // 1 - font-size: 1em; // 2 + font-family: monospace, monospace; // 1 + font-size: 1em; // 2 } /** @@ -106,7 +106,7 @@ samp { */ small { - font-size: 80%; + font-size: 80%; } /** @@ -116,18 +116,18 @@ small { sub, sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; } sub { - bottom: -0.25em; + bottom: -0.25em; } sup { - top: -0.5em; + top: -0.5em; } /* Embedded content @@ -138,7 +138,7 @@ sup { */ img { - border-style: none; + border-style: none; } /* Forms @@ -154,10 +154,10 @@ input, optgroup, select, textarea { - font-family: inherit; // 1 - font-size: 100%; // 1 - line-height: 1.15; // 1 - margin: 0; // 2 + font-family: inherit; // 1 + font-size: 100%; // 1 + line-height: 1.15; // 1 + margin: 0; // 2 } /** @@ -167,7 +167,7 @@ textarea { button, input { - overflow: visible; // 1 + overflow: visible; // 1 } /** @@ -177,7 +177,7 @@ input { button, select { - text-transform: none; // 1 + text-transform: none; // 1 } /** @@ -185,10 +185,10 @@ select { */ button, -[type="button"], -[type="reset"], -[type="submit"] { - -webkit-appearance: button; +[type='button'], +[type='reset'], +[type='submit'] { + -webkit-appearance: button; } /** @@ -196,11 +196,11 @@ button, */ button::-moz-focus-inner, -[type="button"]::-moz-focus-inner, -[type="reset"]::-moz-focus-inner, -[type="submit"]::-moz-focus-inner { - border-style: none; - padding: 0; +[type='button']::-moz-focus-inner, +[type='reset']::-moz-focus-inner, +[type='submit']::-moz-focus-inner { + border-style: none; + padding: 0; } /** @@ -208,10 +208,10 @@ button::-moz-focus-inner, */ button:-moz-focusring, -[type="button"]:-moz-focusring, -[type="reset"]:-moz-focusring, -[type="submit"]:-moz-focusring { - outline: 1px dotted ButtonText; +[type='button']:-moz-focusring, +[type='reset']:-moz-focusring, +[type='submit']:-moz-focusring { + outline: 1px dotted ButtonText; } /** @@ -219,7 +219,7 @@ button:-moz-focusring, */ fieldset { - padding: 0.35em 0.75em 0.625em; + padding: 0.35em 0.75em 0.625em; } /** @@ -230,12 +230,12 @@ fieldset { */ legend { - box-sizing: border-box; // 1 - color: inherit; // 2 - display: table; // 1 - max-width: 100%; // 1 - padding: 0; // 3 - white-space: normal; // 1 + box-sizing: border-box; // 1 + color: inherit; // 2 + display: table; // 1 + max-width: 100%; // 1 + padding: 0; // 3 + white-space: normal; // 1 } /** @@ -243,7 +243,7 @@ legend { */ progress { - vertical-align: baseline; + vertical-align: baseline; } /** @@ -251,7 +251,7 @@ progress { */ textarea { - overflow: auto; + overflow: auto; } /** @@ -259,19 +259,19 @@ textarea { * 2. Remove the padding in IE 10. */ -[type="checkbox"], -[type="radio"] { - box-sizing: border-box; // 1 - padding: 0; // 2 +[type='checkbox'], +[type='radio'] { + box-sizing: border-box; // 1 + padding: 0; // 2 } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ -[type="number"]::-webkit-inner-spin-button, -[type="number"]::-webkit-outer-spin-button { - height: auto; +[type='number']::-webkit-inner-spin-button, +[type='number']::-webkit-outer-spin-button { + height: auto; } /** @@ -279,17 +279,17 @@ textarea { * 2. Correct the outline style in Safari. */ -[type="search"] { - -webkit-appearance: textfield; // 1 - outline-offset: -2px; // 2 +[type='search'] { + -webkit-appearance: textfield; // 1 + outline-offset: -2px; // 2 } /** * Remove the inner padding in Chrome and Safari on macOS. */ -[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; +[type='search']::-webkit-search-decoration { + -webkit-appearance: none; } /** @@ -298,8 +298,8 @@ textarea { */ ::-webkit-file-upload-button { - -webkit-appearance: button; // 1 - font: inherit; // 2 + -webkit-appearance: button; // 1 + font: inherit; // 2 } /* Interactive @@ -310,7 +310,7 @@ textarea { */ details { - display: block; + display: block; } /* @@ -318,7 +318,7 @@ details { */ summary { - display: list-item; + display: list-item; } /* Misc @@ -329,7 +329,7 @@ summary { */ template { - display: none; + display: none; } /** @@ -337,14 +337,13 @@ template { */ [hidden] { - display: none; + display: none; } - svg.icon { - width: 1em; - height: 1em; - top: 0.125em; - position: relative; - fill: currentColor; -} \ No newline at end of file + width: 1em; + height: 1em; + top: 0.125em; + position: relative; + fill: currentColor; +} diff --git a/scss/base/_reset.scss b/scss/base/_reset.scss index f73a438c..a880625c 100644 --- a/scss/base/_reset.scss +++ b/scss/base/_reset.scss @@ -3,16 +3,16 @@ // Reset box sizing to border box html { - box-sizing: border-box; + box-sizing: border-box; } *, *::before, *::after { - box-sizing: inherit; + box-sizing: inherit; } // Remove figure margin figure { - margin: 0; + margin: 0; } diff --git a/scss/base/_typography.scss b/scss/base/_typography.scss index e4d63386..374eeace 100644 --- a/scss/base/_typography.scss +++ b/scss/base/_typography.scss @@ -2,32 +2,32 @@ * Basic typography style for copy text */ html { - font-size: $remFactor; + font-size: $remFactor; } body { - color: $body-color; - background-color: $body-bg; - font-size: $body-size; - font-weight: $body-weight; - font-family: $fontFamilyBase; - line-height: $body-lineHeight; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; + color: $body-color; + background-color: $body-bg; + font-size: $body-size; + font-weight: $body-weight; + font-family: $fontFamilyBase; + line-height: $body-lineHeight; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } a { - color: $link-color; - text-decoration: $link-decoration; + color: $link-color; + text-decoration: $link-decoration; - &:hover { - color: $link-onHover-color; - text-decoration: $link-onHover-decoration; - } + &:hover { + color: $link-onHover-color; + text-decoration: $link-onHover-decoration; + } } label { - font-weight: $fontWeightNormal; + font-weight: $fontWeightNormal; } h1, @@ -36,11 +36,11 @@ h3, h4, h5, h6 { - font-weight: $fontWeightNormal; - color: $text--loud-color; - line-height: 1.1; + font-weight: $fontWeightNormal; + color: $text--loud-color; + line-height: 1.1; } .is-matched { - color: $danger; + color: $danger; } diff --git a/scss/components/_alert.scss b/scss/components/_alert.scss index e86ff03b..0c0fdb8a 100644 --- a/scss/components/_alert.scss +++ b/scss/components/_alert.scss @@ -1,56 +1,56 @@ .#{$ns}Alert { - font-size: $Alert-fontSize; - box-shadow: $Alert-boxShadow; - padding: $Alert-paddingY $Alert-paddingX; - border: $Alert-borderWidth solid $Alert-borderColor; - border-radius: $Alert-borderRadius; - margin-bottom: $Alert-marginBottom; + font-size: $Alert-fontSize; + box-shadow: $Alert-boxShadow; + padding: $Alert-paddingY $Alert-paddingX; + border: $Alert-borderWidth solid $Alert-borderColor; + border-radius: $Alert-borderRadius; + margin-bottom: $Alert-marginBottom; - &-close { - outline: none; - padding: 0; - cursor: pointer; - background: transparent; - border: 0; - float: right; - font-size: 21px; - font-weight: 700; - line-height: 1; - color: #000; - text-shadow: 0 1px 0 #fff; - filter: alpha(opacity=20); - opacity: 0.2; + &-close { + outline: none; + padding: 0; + cursor: pointer; + background: transparent; + border: 0; + float: right; + font-size: 21px; + font-weight: 700; + line-height: 1; + color: #000; + text-shadow: 0 1px 0 #fff; + filter: alpha(opacity=20); + opacity: 0.2; - &:hover { - color: #000; - text-decoration: none; - cursor: pointer; - filter: alpha(opacity=50); - opacity: 0.5; - } + &:hover { + color: #000; + text-decoration: none; + cursor: pointer; + filter: alpha(opacity=50); + opacity: 0.5; } + } - &--danger { - color: $Alert--danger-color; - background-color: $Alert--danger-bg; - border-color: $Alert--danger-borderColor; - } + &--danger { + color: $Alert--danger-color; + background-color: $Alert--danger-bg; + border-color: $Alert--danger-borderColor; + } - &--info { - color: $Alert--info-color; - background-color: $Alert--info-bg; - border-color: $Alert--info-borderColor; - } + &--info { + color: $Alert--info-color; + background-color: $Alert--info-bg; + border-color: $Alert--info-borderColor; + } - &--success { - color: $Alert--success-color; - background-color: $Alert--success-bg; - border-color: $Alert--success-borderColor; - } + &--success { + color: $Alert--success-color; + background-color: $Alert--success-bg; + border-color: $Alert--success-borderColor; + } - &--warning { - color: $Alert--warning-color; - background-color: $Alert--warning-bg; - border-color: $Alert--warning-borderColor; - } + &--warning { + color: $Alert--warning-color; + background-color: $Alert--warning-bg; + border-color: $Alert--warning-borderColor; + } } diff --git a/scss/components/_audio.scss b/scss/components/_audio.scss index 4b0c0c7e..6d20430d 100644 --- a/scss/components/_audio.scss +++ b/scss/components/_audio.scss @@ -1,146 +1,146 @@ @mixin input-range { - -webkit-appearance: none; - outline: none; - border: none; - padding: 0; - background: none; + -webkit-appearance: none; + outline: none; + border: none; + padding: 0; + background: none; - &::-webkit-slider-runnable-track { - background-color: $Audio-track-bg; - height: $Audio-track-height; - border-radius: $Audio-track-borderRadius; - border: $Audio-track-border; - } + &::-webkit-slider-runnable-track { + background-color: $Audio-track-bg; + height: $Audio-track-height; + border-radius: $Audio-track-borderRadius; + border: $Audio-track-border; + } - &::-webkit-slider-thumb { - -webkit-appearance: none !important; - border-radius: 100%; - cursor: pointer; - background: $Audio-thumb-bg; - width: $Audio-thumb-width; - height: $Audio-thumb-height; - margin-top: $Audio-thumb-marginTop; - } + &::-webkit-slider-thumb { + -webkit-appearance: none !important; + border-radius: 100%; + cursor: pointer; + background: $Audio-thumb-bg; + width: $Audio-thumb-width; + height: $Audio-thumb-height; + margin-top: $Audio-thumb-marginTop; + } } @mixin svg { - width: $Audio-svg-width; - height: $Audio-svg-height; - position: relative; - top: $Audio-svg-top; + width: $Audio-svg-width; + height: $Audio-svg-height; + position: relative; + top: $Audio-svg-top; } .#{$ns}Audio-original { - display: none; + display: none; } .#{$ns}Audio--inline { - display: inline-block; + display: inline-block; } .#{$ns}Audio { - box-sizing: border-box; - height: $Audio-height; - line-height: $Audio-lineHeight; - border: $Audio-border; - padding-left: $Audio-item-margin; - overflow: hidden; + box-sizing: border-box; + height: $Audio-height; + line-height: $Audio-lineHeight; + border: $Audio-border; + padding-left: $Audio-item-margin; + overflow: hidden; - &-controls { - display: flex; - flex-direction: row; - align-items: center; + &-controls { + display: flex; + flex-direction: row; + align-items: center; + } + + &-rates { + width: $Audio-rate-width; + height: $Audio-rate-height; + text-align: center; + background: $Audio-rate-bg; + cursor: pointer; + margin-right: $Audio-item-margin; + } + + &-rateControl { + margin-right: $Audio-item-margin; + + &::after { + clear: both; + content: ''; } - &-rates { - width: $Audio-rate-width; - height: $Audio-rate-height; - text-align: center; - background: $Audio-rate-bg; - cursor: pointer; - margin-right: $Audio-item-margin; + .#{$ns}Audio-rateControlItem { + width: $Audio-rate-width; + height: $Audio-rate-height; + background: $Audio-rate-bg; + cursor: pointer; + text-align: center; + float: left; + box-sizing: border-box; + border-right: $Audio-rateControlItem-borderRight; + } + } + + &-play { + width: $Audio-play-width; + cursor: pointer; + margin-right: $Audio-item-margin; + + svg { + @include svg(); + } + } + + &-times { + width: $Audio-times-width; + margin-right: $Audio-item-margin; + cursor: default; + flex-shrink: 0; + } + + &-process { + flex: auto; + cursor: pointer; + min-width: $Audio-process-minWidth; + margin-right: $Audio-item-margin; + + input[type='range'] { + @include input-range(); + } + } + + &-volume { + width: $Audio-volume-width; + height: $Audio-volume-height; + line-height: $Audio-volume-lineHeight; + cursor: pointer; + margin-right: $Audio-item-margin; + + svg { + @include svg(); + } + } + + &-volumeControl { + display: flex; + flex-direction: row; + align-items: center; + width: $Audio-volumeControl-width; + height: $Audio-volume-height; + line-height: $Audio-volume-lineHeight; + margin-right: $Audio-item-margin; + + input[type='range'] { + @include input-range(); } - &-rateControl { - margin-right: $Audio-item-margin; - - &::after { - clear: both; - content: ""; - } - - .#{$ns}Audio-rateControlItem { - width: $Audio-rate-width; - height: $Audio-rate-height; - background: $Audio-rate-bg; - cursor: pointer; - text-align: center; - float: left; - box-sizing: border-box; - border-right: $Audio-rateControlItem-borderRight; - } + .#{$ns}Audio-volumeControlIcon { + margin-right: $Audio-item-margin; + cursor: pointer; } - &-play { - width: $Audio-play-width; - cursor: pointer; - margin-right: $Audio-item-margin; - - svg { - @include svg(); - } - } - - &-times { - width: $Audio-times-width; - margin-right: $Audio-item-margin; - cursor: default; - flex-shrink: 0; - } - - &-process { - flex: auto; - cursor: pointer; - min-width: $Audio-process-minWidth; - margin-right: $Audio-item-margin; - - input[type="range"] { - @include input-range(); - } - } - - &-volume { - width: $Audio-volume-width; - height: $Audio-volume-height; - line-height: $Audio-volume-lineHeight; - cursor: pointer; - margin-right: $Audio-item-margin; - - svg { - @include svg(); - } - } - - &-volumeControl { - display: flex; - flex-direction: row; - align-items: center; - width: $Audio-volumeControl-width; - height: $Audio-volume-height; - line-height: $Audio-volume-lineHeight; - margin-right: $Audio-item-margin; - - input[type="range"] { - @include input-range(); - } - - .#{$ns}Audio-volumeControlIcon { - margin-right: $Audio-item-margin; - cursor: pointer; - } - - svg { - @include svg(); - } + svg { + @include svg(); } + } } diff --git a/scss/components/_button-group.scss b/scss/components/_button-group.scss index 70d8609d..50d2fb82 100644 --- a/scss/components/_button-group.scss +++ b/scss/components/_button-group.scss @@ -1,129 +1,129 @@ .#{$ns}ButtonGroup { + position: relative; + display: inline-flex; + vertical-align: middle; + + > .#{$ns}Button { position: relative; - display: inline-flex; - vertical-align: middle; + flex: 0 1 auto; + } + @if $Button-borderWidth>0 { > .#{$ns}Button { - position: relative; - flex: 0 1 auto; + @include hover { + z-index: 1; + } + + &:focus, + &:active, + &.active, + &.is-active { + z-index: 1; + } } - @if $Button-borderWidth>0 { - > .#{$ns}Button { - @include hover { - z-index: 1; - } - - &:focus, - &:active, - &.active, - &.is-active { - z-index: 1; - } - } - - .#{$ns}Button + .#{$ns}Button, - .#{$ns}Button + .#{$ns}ButtonGroup, - .#{$ns}ButtonGroup + .#{$ns}Button, - .#{$ns}ButtonGroup + .#{$ns}ButtonGroup { - margin-left: -$Button-borderWidth; - } - } @else if - ( - variable-exists("ButtonGroup-divider-width") and - variable-exists("ButtonGroup-divider-color") - ) - { - background-color: $ButtonGroup-divider-color; - - > .#{$ns}Button + .#{$ns}Button { - margin-left: $ButtonGroup-divider-width; - } + .#{$ns}Button + .#{$ns}Button, + .#{$ns}Button + .#{$ns}ButtonGroup, + .#{$ns}ButtonGroup + .#{$ns}Button, + .#{$ns}ButtonGroup + .#{$ns}ButtonGroup { + margin-left: -$Button-borderWidth; } + } @else if + ( + variable-exists('ButtonGroup-divider-width') and + variable-exists('ButtonGroup-divider-color') + ) + { + background-color: $ButtonGroup-divider-color; + + > .#{$ns}Button + .#{$ns}Button { + margin-left: $ButtonGroup-divider-width; + } + } } .#{$ns}ButtonToolbar { - display: inline-flex; - flex-wrap: wrap; - justify-content: flex-start; - align-items: center; + display: inline-flex; + flex-wrap: wrap; + justify-content: flex-start; + align-items: center; - .#{$ns}ButtonGroup { - margin-left: px2rem(5px); - margin-top: px2rem(5px); - width: auto; - } + .#{$ns}ButtonGroup { + margin-left: px2rem(5px); + margin-top: px2rem(5px); + width: auto; + } } .#{$ns}ButtonGroup { - > .#{$ns}Button:first-child { - margin-left: 0; + > .#{$ns}Button:first-child { + margin-left: 0; + } + + // cxd的ButtonGroup的is-active和:active样式不一样，这里做个兼容 + .#{$ns}Button--primary:not(:disabled):not(.is-disabled).is-active { + @if variable-exists('ButtonGroup--primary-isActive-color') { + color: $ButtonGroup--primary-isActive-color; } - - // cxd的ButtonGroup的is-active和:active样式不一样，这里做个兼容 - .#{$ns}Button--primary:not(:disabled):not(.is-disabled).is-active{ - @if variable-exists("ButtonGroup--primary-isActive-color") { - color: $ButtonGroup--primary-isActive-color; - } - @if variable-exists("ButtonGroup--primary-isActive-bg") { - background-color: $ButtonGroup--primary-isActive-bg; - } - } - - @if $Button-borderWidth>0 { - > .#{$ns}Button:not(:last-child), - > .#{$ns}ButtonGroup:not(:last-child) > .#{$ns}Button { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } - - > .#{$ns}Button:not(:first-child), - > .#{$ns}ButtonGroup:not(:first-child) > .#{$ns}Button { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } - } -} - -.#{$ns}ButtonGroup--vertical { - flex-direction: column; - align-items: flex-start; - justify-content: center; - - .#{$ns}Button, - .#{$ns}ButtonGroup { - width: 100%; - } - - > .#{$ns}Button + .#{$ns}Button, - > .#{$ns}Button + .#{$ns}ButtonGroup, - > .#{$ns}ButtonGroup + .#{$ns}Button, - > .#{$ns}ButtonGroup + .#{$ns}ButtonGroup { - margin-top: -$Button-borderWidth; - margin-left: 0; + @if variable-exists('ButtonGroup--primary-isActive-bg') { + background-color: $ButtonGroup--primary-isActive-bg; } + } + @if $Button-borderWidth>0 { > .#{$ns}Button:not(:last-child), > .#{$ns}ButtonGroup:not(:last-child) > .#{$ns}Button { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; } > .#{$ns}Button:not(:first-child), - > .#{$ns}ButtonGroup:not(:first-child) > .btn { - border-top-left-radius: 0; - border-top-right-radius: 0; + > .#{$ns}ButtonGroup:not(:first-child) > .#{$ns}Button { + border-top-left-radius: 0; + border-bottom-left-radius: 0; } + } +} + +.#{$ns}ButtonGroup--vertical { + flex-direction: column; + align-items: flex-start; + justify-content: center; + + .#{$ns}Button, + .#{$ns}ButtonGroup { + width: 100%; + } + + > .#{$ns}Button + .#{$ns}Button, + > .#{$ns}Button + .#{$ns}ButtonGroup, + > .#{$ns}ButtonGroup + .#{$ns}Button, + > .#{$ns}ButtonGroup + .#{$ns}ButtonGroup { + margin-top: -$Button-borderWidth; + margin-left: 0; + } + + > .#{$ns}Button:not(:last-child), + > .#{$ns}ButtonGroup:not(:last-child) > .#{$ns}Button { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } + + > .#{$ns}Button:not(:first-child), + > .#{$ns}ButtonGroup:not(:first-child) > .btn { + border-top-left-radius: 0; + border-top-right-radius: 0; + } } .#{$ns}ButtonGroupControl { - display: inline-block; + display: inline-block; - > .#{$ns}ButtonGroup--sm { - margin-top: ($Form-input-height - $Button--sm-height) / 2; - } + > .#{$ns}ButtonGroup--sm { + margin-top: ($Form-input-height - $Button--sm-height) / 2; + } - > .#{$ns}ButtonGroup--xs { - margin-top: ($Form-input-height - $Button--xs-height) / 2; - } + > .#{$ns}ButtonGroup--xs { + margin-top: ($Form-input-height - $Button--xs-height) / 2; + } } diff --git a/scss/components/_button.scss b/scss/components/_button.scss index c65cd5be..ca9bd744 100644 --- a/scss/components/_button.scss +++ b/scss/components/_button.scss @@ -1,340 +1,340 @@ .#{$ns}Button { - display: inline-block; - font-weight: $Button-fontWeight; - text-align: center; - vertical-align: middle; - user-select: none; - background-color: transparent; - border: $Button-borderWidth solid transparent; - transition: $Button-transition; - white-space: nowrap; + display: inline-block; + font-weight: $Button-fontWeight; + text-align: center; + vertical-align: middle; + user-select: none; + background-color: transparent; + border: $Button-borderWidth solid transparent; + transition: $Button-transition; + white-space: nowrap; - @if $Button-mimWidth !=auto { - min-width: $Button-mimWidth; + @if $Button-mimWidth !=auto { + min-width: $Button-mimWidth; + } + + @include button-size( + $Button-paddingY, + $Button-paddingX, + $Button-fontSize, + $Button-lineHeight, + $Button-borderRadius, + $Button-height + ); + + @include hover-focus { + color: $text-color; + text-decoration: none; + } + + &:focus, + &.focus { + outline: 0; + box-shadow: $Button-onFocus-boxShadow; + } + + &.is-disabled, + &:disabled { + opacity: $Button-onDisabled-opacity; + box-shadow: none; + pointer-events: none; + border-color: $Button-onDisabled-borderColor; + + @if variable-exists(Button-onDisabled-bg) { + background-color: $Button-onDisabled-bg !important; } - @include button-size( - $Button-paddingY, - $Button-paddingX, - $Button-fontSize, - $Button-lineHeight, - $Button-borderRadius, - $Button-height - ); - - @include hover-focus { - color: $text-color; - text-decoration: none; + @if variable-exists(Button-onDisabled-color) { + color: $Button-onDisabled-color !important; } - &:focus, - &.focus { - outline: 0; - box-shadow: $Button-onFocus-boxShadow; + &.is-active, + &:active { + @if variable-exists(Button-onDisabledActive-bg) { + background-color: $Button-onDisabledActive-bg !important; + } } + } - &.is-disabled, - &:disabled { - opacity: $Button-onDisabled-opacity; - box-shadow: none; - pointer-events: none; - border-color: $Button-onDisabled-borderColor; + &:not(:disabled):not(.is-disabled) { + cursor: pointer; + } - @if variable-exists(Button-onDisabled-bg) { - background-color: $Button-onDisabled-bg !important; - } + &:not(:disabled):not(.is-disabled):active, + &:not(:disabled):not(.is-disabled).is-active { + box-shadow: $Button-onActive-boxShadow; - @if variable-exists(Button-onDisabled-color) { - color: $Button-onDisabled-color !important; - } - - &.is-active, - &:active { - @if variable-exists(Button-onDisabledActive-bg) { - background-color: $Button-onDisabledActive-bg !important; - } - } + &:focus { + box-shadow: $Button-onActive-boxShadow; } + } - &:not(:disabled):not(.is-disabled) { - cursor: pointer; - } + > .pull-left, + > .pull-right { + line-height: inherit; + } - &:not(:disabled):not(.is-disabled):active, - &:not(:disabled):not(.is-disabled).is-active { - box-shadow: $Button-onActive-boxShadow; - - &:focus { - box-shadow: $Button-onActive-boxShadow; - } - } - - > .pull-left, - > .pull-right { - line-height: inherit; - } - - > .fa, - > .iconfont, - > .glyphicon { - font-size: inherit; - } + > .fa, + > .iconfont, + > .glyphicon { + font-size: inherit; + } } a.#{$ns}Button.is-disabled, fieldset:disabled a.#{$ns}Button { - pointer-events: none; + pointer-events: none; } .#{$ns}Button--primary { - @include button-variant( - $Button--primary-bg, - $Button--primary-border, - $Button--primary-color, - $Button--primary-onHover-bg, - $Button--primary-onHover-border, - $Button--primary-onHover-color, - $Button--primary-onActive-bg, - $Button--primary-onActive-border, - $Button--primary-onActive-color - ); + @include button-variant( + $Button--primary-bg, + $Button--primary-border, + $Button--primary-color, + $Button--primary-onHover-bg, + $Button--primary-onHover-border, + $Button--primary-onHover-color, + $Button--primary-onActive-bg, + $Button--primary-onActive-border, + $Button--primary-onActive-color + ); } .#{$ns}Button--secondary { - @include button-variant( - $Button--secondary-bg, - $Button--secondary-border, - $Button--secondary-color, - $Button--secondary-onHover-bg, - $Button--secondary-onHover-border, - $Button--secondary-onHover-color, - $Button--secondary-onActive-bg, - $Button--secondary-onActive-border, - $Button--secondary-onActive-color - ); + @include button-variant( + $Button--secondary-bg, + $Button--secondary-border, + $Button--secondary-color, + $Button--secondary-onHover-bg, + $Button--secondary-onHover-border, + $Button--secondary-onHover-color, + $Button--secondary-onActive-bg, + $Button--secondary-onActive-border, + $Button--secondary-onActive-color + ); } .#{$ns}Button--success { - @include button-variant( - $Button--success-bg, - $Button--success-border, - $Button--success-color, - $Button--success-onHover-bg, - $Button--success-onHover-border, - $Button--success-onHover-color, - $Button--success-onActive-bg, - $Button--success-onActive-border, - $Button--success-onActive-color - ); + @include button-variant( + $Button--success-bg, + $Button--success-border, + $Button--success-color, + $Button--success-onHover-bg, + $Button--success-onHover-border, + $Button--success-onHover-color, + $Button--success-onActive-bg, + $Button--success-onActive-border, + $Button--success-onActive-color + ); } .#{$ns}Button--info { - @include button-variant( - $Button--info-bg, - $Button--info-border, - $Button--info-color, - $Button--info-onHover-bg, - $Button--info-onHover-border, - $Button--info-onHover-color, - $Button--info-onActive-bg, - $Button--info-onActive-border, - $Button--info-onActive-color - ); + @include button-variant( + $Button--info-bg, + $Button--info-border, + $Button--info-color, + $Button--info-onHover-bg, + $Button--info-onHover-border, + $Button--info-onHover-color, + $Button--info-onActive-bg, + $Button--info-onActive-border, + $Button--info-onActive-color + ); } .#{$ns}Button--warning { - @include button-variant( - $Button--warning-bg, - $Button--warning-border, - $Button--warning-color, - $Button--warning-onHover-bg, - $Button--warning-onHover-border, - $Button--warning-onHover-color, - $Button--warning-onActive-bg, - $Button--warning-onActive-border, - $Button--warning-onActive-color - ); + @include button-variant( + $Button--warning-bg, + $Button--warning-border, + $Button--warning-color, + $Button--warning-onHover-bg, + $Button--warning-onHover-border, + $Button--warning-onHover-color, + $Button--warning-onActive-bg, + $Button--warning-onActive-border, + $Button--warning-onActive-color + ); } .#{$ns}Button--danger { - @include button-variant( - $Button--danger-bg, - $Button--danger-border, - $Button--danger-color, - $Button--danger-onHover-bg, - $Button--danger-onHover-border, - $Button--danger-onHover-color, - $Button--danger-onActive-bg, - $Button--danger-onActive-border, - $Button--danger-onActive-color - ); + @include button-variant( + $Button--danger-bg, + $Button--danger-border, + $Button--danger-color, + $Button--danger-onHover-bg, + $Button--danger-onHover-border, + $Button--danger-onHover-color, + $Button--danger-onActive-bg, + $Button--danger-onActive-border, + $Button--danger-onActive-color + ); } .#{$ns}Button--light { - @include button-variant( - $Button--light-bg, - $Button--light-border, - $Button--light-color, - $Button--light-onHover-bg, - $Button--light-onHover-border, - $Button--light-onHover-color, - $Button--light-onActive-bg, - $Button--light-onActive-border, - $Button--light-onActive-color - ); + @include button-variant( + $Button--light-bg, + $Button--light-border, + $Button--light-color, + $Button--light-onHover-bg, + $Button--light-onHover-border, + $Button--light-onHover-color, + $Button--light-onActive-bg, + $Button--light-onActive-border, + $Button--light-onActive-color + ); } .#{$ns}Button--dark { - @include button-variant( - $Button--dark-bg, - $Button--dark-border, - $Button--dark-color, - $Button--dark-onHover-bg, - $Button--dark-onHover-border, - $Button--dark-onHover-color, - $Button--dark-onActive-bg, - $Button--dark-onActive-border, - $Button--dark-onActive-color - ); + @include button-variant( + $Button--dark-bg, + $Button--dark-border, + $Button--dark-color, + $Button--dark-onHover-bg, + $Button--dark-onHover-border, + $Button--dark-onHover-color, + $Button--dark-onActive-bg, + $Button--dark-onActive-border, + $Button--dark-onActive-color + ); } .#{$ns}Button--default { - @include button-variant( - $Button--default-bg, - $Button--default-border, - $Button--default-color, - $Button--default-onHover-bg, - $Button--default-onHover-border, - $Button--default-onHover-color, - $Button--default-onActive-bg, - $Button--default-onActive-border, - $Button--default-onActive-color - ); + @include button-variant( + $Button--default-bg, + $Button--default-border, + $Button--default-color, + $Button--default-onHover-bg, + $Button--default-onHover-border, + $Button--default-onHover-color, + $Button--default-onActive-bg, + $Button--default-onActive-border, + $Button--default-onActive-color + ); } .#{$ns}Button--xs { - @include button-size( - $Button--xs-paddingY, - $Button--xs-paddingX, - $Button--xs-fontSize, - $Button--xs-lineHeight, - $Button--sm-borderRadius, - $Button--xs-height - ); + @include button-size( + $Button--xs-paddingY, + $Button--xs-paddingX, + $Button--xs-fontSize, + $Button--xs-lineHeight, + $Button--sm-borderRadius, + $Button--xs-height + ); - &.#{$ns}Button--iconOnly { - min-width: $Button--xs-height * $Button--iconOnly-minWidthRate; - } + &.#{$ns}Button--iconOnly { + min-width: $Button--xs-height * $Button--iconOnly-minWidthRate; + } } .#{$ns}Button--sm { - @include button-size( - $Button--sm-paddingY, - $Button--sm-paddingX, - $Button--sm-fontSize, - $Button--sm-lineHeight, - $Button--sm-borderRadius, - $Button--sm-height - ); + @include button-size( + $Button--sm-paddingY, + $Button--sm-paddingX, + $Button--sm-fontSize, + $Button--sm-lineHeight, + $Button--sm-borderRadius, + $Button--sm-height + ); - &.#{$ns}Button--iconOnly { - min-width: $Button--sm-height * $Button--iconOnly-minWidthRate; - } + &.#{$ns}Button--iconOnly { + min-width: $Button--sm-height * $Button--iconOnly-minWidthRate; + } } .#{$ns}Button--md { - @include button-size( - $Button--md-paddingY, - $Button--md-paddingX, - $Button--md-fontSize, - $Button--md-lineHeight, - $Button-borderRadius, - $Button--md-height - ); + @include button-size( + $Button--md-paddingY, + $Button--md-paddingX, + $Button--md-fontSize, + $Button--md-lineHeight, + $Button-borderRadius, + $Button--md-height + ); - &.#{$ns}Button--iconOnly { - min-width: $Button--md-height * $Button--iconOnly-minWidthRate; - } + &.#{$ns}Button--iconOnly { + min-width: $Button--md-height * $Button--iconOnly-minWidthRate; + } } .#{$ns}Button--lg { - @include button-size( - $Button--lg-paddingY, - $Button--lg-paddingX, - $Button--lg-fontSize, - $Button--lg-lineHeight, - $Button--lg-borderRadius, - $Button--lg-height - ); + @include button-size( + $Button--lg-paddingY, + $Button--lg-paddingX, + $Button--lg-fontSize, + $Button--lg-lineHeight, + $Button--lg-borderRadius, + $Button--lg-height + ); - &.#{$ns}Button--iconOnly { - min-width: $Button--lg-height * $Button--iconOnly-minWidthRate; - } + &.#{$ns}Button--iconOnly { + min-width: $Button--lg-height * $Button--iconOnly-minWidthRate; + } } .#{$ns}Button--iconOnly { - min-width: $Button-height * $Button--iconOnly-minWidthRate; + min-width: $Button-height * $Button--iconOnly-minWidthRate; - &:not(.#{$ns}Button--link) { - > .fa, - > .iconfont { - font-size: $fontSizeMd; - } - - > .iconfont { - line-height: 1; - } + &:not(.#{$ns}Button--link) { + > .fa, + > .iconfont { + font-size: $fontSizeMd; } + + > .iconfont { + line-height: 1; + } + } } .#{$ns}Button--link { - width: auto; - min-width: auto; - font-weight: $fontWeightNormal; - color: $Button--link-color; - text-decoration: $link-decoration; - border: none; + width: auto; + min-width: auto; + font-weight: $fontWeightNormal; + color: $Button--link-color; + text-decoration: $link-decoration; + border: none; - @include hover-focus { - color: $Button--link-onHover-color; - text-decoration: $link-onHover-decoration; - box-shadow: none; - } + @include hover-focus { + color: $Button--link-onHover-color; + text-decoration: $link-onHover-decoration; + box-shadow: none; + } - &:disabled, - &.is-disabled { - color: $text--muted-color; - pointer-events: none; - } + &:disabled, + &.is-disabled { + color: $text--muted-color; + pointer-events: none; + } } .#{$ns}Button--block { - display: block; - width: 100%; + display: block; + width: 100%; - + .#{$ns}Button--block { - margin-top: $gap-base; - } + + .#{$ns}Button--block { + margin-top: $gap-base; + } } -input[type="submit"], -input[type="reset"], -input[type="button"] { - &.#{$ns}Button--block { - width: 100%; - } +input[type='submit'], +input[type='reset'], +input[type='button'] { + &.#{$ns}Button--block { + width: 100%; + } } .#{$ns}ButtonToolbar { - margin-left: px2rem(-5px); - margin-top: px2rem(-5px); + margin-left: px2rem(-5px); + margin-top: px2rem(-5px); - > .#{$ns}Button { - margin-left: px2rem(5px); - margin-top: px2rem(5px); - } + > .#{$ns}Button { + margin-left: px2rem(5px); + margin-top: px2rem(5px); + } } .#{$ns}Button--disabled-wrap { - display: inline-block !important; + display: inline-block !important; } diff --git a/scss/components/_card.scss b/scss/components/_card.scss index 599ebc10..b6431346 100644 --- a/scss/components/_card.scss +++ b/scss/components/_card.scss @@ -1,178 +1,178 @@ .#{$ns}Card { - background-color: $Card-bg; - border: $Card-borderWidth solid $Card-borderColor; - border-radius: $Card-borderRadius; - margin-bottom: $gap-base; + background-color: $Card-bg; + border: $Card-borderWidth solid $Card-borderColor; + border-radius: $Card-borderRadius; + margin-bottom: $gap-base; + position: relative; + + &-title { + color: $text--loud-color; + font-size: $fontSizeMd; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + &-subTitle { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + color: $text--muted-color; + } + + &-checkBtn { + position: absolute; + top: 0; + right: 0; + margin: $gap-sm; + z-index: 1; + + .#{$ns}Checkbox { + margin-right: 0; + } + } + + &-dragBtn { + cursor: pointer; + float: right; + margin: $gap-sm; + } + + &-heading { + overflow: hidden; + padding: $gap-sm $gap-base; + } + + &-avtar { + float: left; + margin-right: $gap-base; + max-width: px2rem(200px); + + img { + max-width: 100%; + } + } + + &-meta { + display: block; + height: 100%; + overflow: hidden; position: relative; + margin-right: $gap-md; + } - &-title { - color: $text--loud-color; - font-size: $fontSizeMd; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } + &-highlight { + background-color: $success; + width: px2rem(8px); + height: px2rem(8px); + border-radius: 100%; + display: inline-block; + position: absolute; + top: px2rem(5px); + right: px2rem(2px); + } - &-subTitle { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - color: $text--muted-color; - } + &-body { + padding: $gap-base; + } - &-checkBtn { - position: absolute; - top: 0; - right: 0; - margin: $gap-sm; - z-index: 1; + &-heading + &-body { + padding-top: $gap-xs; + } - .#{$ns}Checkbox { - margin-right: 0; - } - } + &-field { + position: relative; + display: flex; + flex-wrap: nowrap; + } - &-dragBtn { + &-fieldValue { + position: relative; + flex-basis: 0; + flex-grow: 1; + } + + &-fieldLabel { + width: px2rem(60px); + color: $text--muted-color; + } + + &-actions { + border-top: $Card-borderWidth solid $Card-actions-borderColor; + display: table; + width: 100%; + + > a { + background-color: transparent; + display: table-cell; + border-color: $Card-actions-borderColor; + border-style: solid; + border-width: 0 $Card-borderWidth 0 0; + color: $text-color; + text-align: center; + line-height: px2rem(40px); + // font-size: $fontSizeBase; + + &:not(is-disabled) { cursor: pointer; - float: right; - margin: $gap-sm; + } + + &:last-child { + border: none; + } + + &:hover { + background-color: $Card-actions-onHover-bg; + color: $Card-actions-onHover-color; + text-decoration: none; + } + } + } + + &.is-checked { + background-color: $Card-onChecked-bg; + border-color: $Card-onChecked-borderColor; + color: $Card-onChecked-color; + + .#{$ns}Card-actions, + .#{$ns}Card-actions > a { + border-color: $Card-onChecked-borderColor; + color: $Card-onChecked-color; } - &-heading { - overflow: hidden; - padding: $gap-sm $gap-base; + .#{$ns}Card-fieldLabel { + color: lighten($Card-onChecked-color, 20%); } - &-avtar { - float: left; - margin-right: $gap-base; - max-width: px2rem(200px); + .#{$ns}Card-actions > a:hover { + background-color: $Card-actions-onChecked-onHover-bg; + color: darken($Card-onChecked-color, 10%); + } + } - img { - max-width: 100%; - } + &.is-modified, + &.is-moved { + background-color: $Card-onModified-bg; + border-color: $Card-onModified-borderColor; + color: $Card-onModified-color; + + .#{$ns}Card-actions, + .#{$ns}Card-actions > a { + border-color: $Card-onModified-borderColor; + color: $Card-onModified-color; } - &-meta { - display: block; - height: 100%; - overflow: hidden; - position: relative; - margin-right: $gap-md; + .#{$ns}Card-fieldLabel { + color: lighten($Card-onModified-color, 20%); } - &-highlight { - background-color: $success; - width: px2rem(8px); - height: px2rem(8px); - border-radius: 100%; - display: inline-block; - position: absolute; - top: px2rem(5px); - right: px2rem(2px); + .#{$ns}Card-actions > a:hover { + background-color: darken($Card-onModified-bg, 5%); + color: darken($Card-onModified-color, 10%); } + } - &-body { - padding: $gap-base; - } - - &-heading + &-body { - padding-top: $gap-xs; - } - - &-field { - position: relative; - display: flex; - flex-wrap: nowrap; - } - - &-fieldValue { - position: relative; - flex-basis: 0; - flex-grow: 1; - } - - &-fieldLabel { - width: px2rem(60px); - color: $text--muted-color; - } - - &-actions { - border-top: $Card-borderWidth solid $Card-actions-borderColor; - display: table; - width: 100%; - - > a { - background-color: transparent; - display: table-cell; - border-color: $Card-actions-borderColor; - border-style: solid; - border-width: 0 $Card-borderWidth 0 0; - color: $text-color; - text-align: center; - line-height: px2rem(40px); - // font-size: $fontSizeBase; - - &:not(is-disabled) { - cursor: pointer; - } - - &:last-child { - border: none; - } - - &:hover { - background-color: $Card-actions-onHover-bg; - color: $Card-actions-onHover-color; - text-decoration: none; - } - } - } - - &.is-checked { - background-color: $Card-onChecked-bg; - border-color: $Card-onChecked-borderColor; - color: $Card-onChecked-color; - - .#{$ns}Card-actions, - .#{$ns}Card-actions > a { - border-color: $Card-onChecked-borderColor; - color: $Card-onChecked-color; - } - - .#{$ns}Card-fieldLabel { - color: lighten($Card-onChecked-color, 20%); - } - - .#{$ns}Card-actions > a:hover { - background-color: $Card-actions-onChecked-onHover-bg; - color: darken($Card-onChecked-color, 10%); - } - } - - &.is-modified, - &.is-moved { - background-color: $Card-onModified-bg; - border-color: $Card-onModified-borderColor; - color: $Card-onModified-color; - - .#{$ns}Card-actions, - .#{$ns}Card-actions > a { - border-color: $Card-onModified-borderColor; - color: $Card-onModified-color; - } - - .#{$ns}Card-fieldLabel { - color: lighten($Card-onModified-color, 20%); - } - - .#{$ns}Card-actions > a:hover { - background-color: darken($Card-onModified-bg, 5%); - color: darken($Card-onModified-color, 10%); - } - } - - .is-dragging > & { - opacity: $Card-onDragging-opacity; - } + .is-dragging > & { + opacity: $Card-onDragging-opacity; + } } diff --git a/scss/components/_cards.scss b/scss/components/_cards.scss index 74e86f32..05a2a16a 100644 --- a/scss/components/_cards.scss +++ b/scss/components/_cards.scss @@ -1,183 +1,183 @@ .#{$ns}Cards { - &-toolbar { - @include clearfix(); - padding: $Cards-toolbar-paddingY $Cards-toolbar-paddingX; - margin-bottom: $gap-base; + &-toolbar { + @include clearfix(); + padding: $Cards-toolbar-paddingY $Cards-toolbar-paddingX; + margin-bottom: $gap-base; + } + + &-actions { + display: inline-block; + + > * { + margin-right: $Crud-toolbar-gap; } + } - &-actions { - display: inline-block; + &-heading { + padding: $gap-xs 0; + } - > * { - margin-right: $Crud-toolbar-gap; - } + &-header { + padding: $Cards-toolbar-paddingY $Cards-toolbar-paddingX; + + > * + .#{$ns}Button, + > * + .#{$ns}ButtonGroup, + > * + .#{$ns}ButtonToolbar { + margin-left: $Crud-toolbar-gap; } + } - &-heading { - padding: $gap-xs 0; - } + &-header + &-toolbar { + padding-top: 0; + } - &-header { - padding: $Cards-toolbar-paddingY $Cards-toolbar-paddingX; + &-fixedTop { + position: absolute; + background: $white; + z-index: -1; + opacity: 0; + box-shadow: $Cards-fixedTop-boxShadow; + padding: $gap-sm; - > * + .#{$ns}Button, - > * + .#{$ns}ButtonGroup, - > * + .#{$ns}ButtonToolbar { - margin-left: $Crud-toolbar-gap; - } - } - - &-header + &-toolbar { - padding-top: 0; - } - - &-fixedTop { - position: absolute; - background: $white; - z-index: -1; - opacity: 0; - box-shadow: $Cards-fixedTop-boxShadow; - padding: $gap-sm; - - &.in { - position: fixed; - opacity: 1; - z-index: $zindex-affix; - } - - .#{$ns}Cards-toolbar { - margin-bottom: 0; - } - - &:empty { - display: none; - } - } - - &--unsaved &-heading { - background: $Cards--unsaved-heading-bg; - color: $Cards--unsaved-heading-color; - padding: $gap-xs $gap-sm; - margin-bottom: $gap-sm; - } - - &-dragTip { - color: $text--loud-color; - clear: both; - margin-top: $gap-xs; - } - - &-placeholder { - background: $white; - color: $text--muted-color; - text-align: center; - height: $Cards-placeholder-height; - line-height: $Cards-placeholder-height; - - border: $Card-borderWidth solid $Card-borderColor; - border-radius: $Card-borderRadius; - } - - &--masonry { - display: block; - - &:after { - content: none; - } - - column-gap: 0; - column-fill: initial; - - > div { - width: 100%; - float: none; - break-inside: avoid; - max-width: unset; - display: inline-block; - flex: unset; - } - } -} - -@include media-breakpoint-up(sm) { - .#{$ns}Cards--masonrySm1 { - column-count: 12; - } - - .#{$ns}Cards--masonrySm2 { - column-count: 6; - } - - .#{$ns}Cards--masonrySm3 { - column-count: 4; - } - - .#{$ns}Cards--masonrySm4 { - column-count: 3; - } - - .#{$ns}Cards--masonrySm6 { - column-count: 2; - } - - .#{$ns}Cards--masonrySm12 { - column-count: 1; + &.in { + position: fixed; + opacity: 1; + z-index: $zindex-affix; } .#{$ns}Cards-toolbar { - display: flex; - flex-wrap: nowrap; + margin-bottom: 0; } + + &:empty { + display: none; + } + } + + &--unsaved &-heading { + background: $Cards--unsaved-heading-bg; + color: $Cards--unsaved-heading-color; + padding: $gap-xs $gap-sm; + margin-bottom: $gap-sm; + } + + &-dragTip { + color: $text--loud-color; + clear: both; + margin-top: $gap-xs; + } + + &-placeholder { + background: $white; + color: $text--muted-color; + text-align: center; + height: $Cards-placeholder-height; + line-height: $Cards-placeholder-height; + + border: $Card-borderWidth solid $Card-borderColor; + border-radius: $Card-borderRadius; + } + + &--masonry { + display: block; + + &:after { + content: none; + } + + column-gap: 0; + column-fill: initial; + + > div { + width: 100%; + float: none; + break-inside: avoid; + max-width: unset; + display: inline-block; + flex: unset; + } + } +} + +@include media-breakpoint-up(sm) { + .#{$ns}Cards--masonrySm1 { + column-count: 12; + } + + .#{$ns}Cards--masonrySm2 { + column-count: 6; + } + + .#{$ns}Cards--masonrySm3 { + column-count: 4; + } + + .#{$ns}Cards--masonrySm4 { + column-count: 3; + } + + .#{$ns}Cards--masonrySm6 { + column-count: 2; + } + + .#{$ns}Cards--masonrySm12 { + column-count: 1; + } + + .#{$ns}Cards-toolbar { + display: flex; + flex-wrap: nowrap; + } } @include media-breakpoint-up(md) { - .#{$ns}Cards--masonryMd1 { - column-count: 12; - } + .#{$ns}Cards--masonryMd1 { + column-count: 12; + } - .#{$ns}Cards--masonryMd2 { - column-count: 6; - } + .#{$ns}Cards--masonryMd2 { + column-count: 6; + } - .#{$ns}Cards--masonryMd3 { - column-count: 4; - } + .#{$ns}Cards--masonryMd3 { + column-count: 4; + } - .#{$ns}Cards--masonryMd4 { - column-count: 3; - } + .#{$ns}Cards--masonryMd4 { + column-count: 3; + } - .#{$ns}Cards--masonryMd6 { - column-count: 2; - } + .#{$ns}Cards--masonryMd6 { + column-count: 2; + } - .#{$ns}Cards--masonryMd12 { - column-count: 1; - } + .#{$ns}Cards--masonryMd12 { + column-count: 1; + } } @include media-breakpoint-up(lg) { - .#{$ns}Cards--masonryLg1 { - column-count: 12; - } + .#{$ns}Cards--masonryLg1 { + column-count: 12; + } - .#{$ns}Cards--masonryLg2 { - column-count: 6; - } + .#{$ns}Cards--masonryLg2 { + column-count: 6; + } - .#{$ns}Cards--masonryLg3 { - column-count: 4; - } + .#{$ns}Cards--masonryLg3 { + column-count: 4; + } - .#{$ns}Cards--masonryLg4 { - column-count: 3; - } + .#{$ns}Cards--masonryLg4 { + column-count: 3; + } - .#{$ns}Cards--masonryLg6 { - column-count: 2; - } + .#{$ns}Cards--masonryLg6 { + column-count: 2; + } - .#{$ns}Cards--masonryLg12 { - column-count: 1; - } + .#{$ns}Cards--masonryLg12 { + column-count: 1; + } } diff --git a/scss/components/_carousel.scss b/scss/components/_carousel.scss index 406f5fd0..6b490a3f 100644 --- a/scss/components/_carousel.scss +++ b/scss/components/_carousel.scss @@ -1,167 +1,167 @@ @mixin arrow-control { - width: 10%; - min-width: $Carousel-arrowControl-width; - height: 100%; - cursor: pointer; + width: 10%; + min-width: $Carousel-arrowControl-width; + height: 100%; + cursor: pointer; + position: absolute; + transition-duration: $Carousel-transitionDuration; + svg { position: absolute; - transition-duration: $Carousel-transitionDuration; - svg { - position: absolute; - top: 50%; - left: 50%; - right: 50%; - transform: translate(-50%, -50%); - width: $Carousel-svg-width; - height: $Carousel-svg-height; - } + top: 50%; + left: 50%; + right: 50%; + transform: translate(-50%, -50%); + width: $Carousel-svg-width; + height: $Carousel-svg-height; + } } .#{$ns}Carousel { - min-width: $Carousel-minWidth; - height: $Carousel-height; + min-width: $Carousel-minWidth; + height: $Carousel-height; + position: relative; + display: block; + background: $Carousel-bg; + + &.#{$ns}Carousel--light { + .#{$ns}Carousel-dot { + background-color: $Carousel--light-control; + } + + svg { + fill: $Carousel--light-control; + } + + .#{$ns}Carousel-item { + .title, + .description { + color: $Carousel--light-control; + } + } + } + + &.#{$ns}Carousel--dark { + .#{$ns}Carousel-dot { + background-color: $Carousel--dark-control; + } + + svg { + fill: $Carousel--dark-control; + } + + .#{$ns}Carousel-item { + .title, + .description { + color: $Carousel--dark-control; + } + } + } + + &-container { + width: 100%; + height: 100%; position: relative; - display: block; - background: $Carousel-bg; + overflow: hidden; - &.#{$ns}Carousel--light { - .#{$ns}Carousel-dot { - background-color: $Carousel--light-control; - } + .#{$ns}Carousel-item { + width: 100%; + height: 100%; + position: absolute; + transition: ease-out all $Carousel-transitionDuration; - svg { - fill: $Carousel--light-control; - } + &.fade { + opacity: 0; + } - .#{$ns}Carousel-item { - .title, - .description { - color: $Carousel--light-control; - } - } - } + &.fade.in { + opacity: 1; + } - &.#{$ns}Carousel--dark { - .#{$ns}Carousel-dot { - background-color: $Carousel--dark-control; - } + &.slide { + transform: translateX(100%); + } - svg { - fill: $Carousel--dark-control; - } + &.slide.in { + transform: translateX(0); + } - .#{$ns}Carousel-item { - .title, - .description { - color: $Carousel--dark-control; - } - } - } + &.slide.out { + transform: translateX(-100%); + } - &-container { + &.slideRight { + transform: translateX(-100%); + } + + &.slideRight.in { + transform: translateX(0); + } + + &.slideRight.out { + transform: translateX(100%); + } + + .title { + position: absolute; + bottom: $Carousel-imageTitle-bottom; + text-align: center; + width: 100%; + opacity: 0.8; + } + + .description { + position: absolute; + bottom: $Carousel-imageDescription-bottom; + text-align: center; + width: 100%; + opacity: 0.8; + } + + .image { width: 100%; height: 100%; - position: relative; - overflow: hidden; + background-size: cover; + } + } + } - .#{$ns}Carousel-item { - width: 100%; - height: 100%; - position: absolute; - transition: ease-out all $Carousel-transitionDuration; + &-dotsControl { + position: absolute; + bottom: 0px; + width: 100%; + z-index: 100; + text-align: center; - &.fade { - opacity: 0; - } + .#{$ns}Carousel-dot { + display: inline-block; + height: $Carousel-dot-width; + width: $Carousel-dot-height; + border-radius: $Carousel-dot-borderRadius; + margin: $Carousel-dot-margin; + transition-duration: $Carousel-transitionDuration; + opacity: 0.3; - &.fade.in { - opacity: 1; - } + &.is-active { + opacity: 1; + } + } + } - &.slide { - transform: translateX(100%); - } + &-arrowsControl { + position: absolute; + width: 100%; + height: inherit; + z-index: 100; + text-align: center; - &.slide.in { - transform: translateX(0); - } - - &.slide.out { - transform: translateX(-100%); - } - - &.slideRight { - transform: translateX(-100%); - } - - &.slideRight.in { - transform: translateX(0); - } - - &.slideRight.out { - transform: translateX(100%); - } - - .title { - position: absolute; - bottom: $Carousel-imageTitle-bottom; - text-align: center; - width: 100%; - opacity: 0.8; - } - - .description { - position: absolute; - bottom: $Carousel-imageDescription-bottom; - text-align: center; - width: 100%; - opacity: 0.8; - } - - .image { - width: 100%; - height: 100%; - background-size: cover; - } - } + .#{$ns}Carousel-leftArrow { + @include arrow-control; + left: 0; } - &-dotsControl { - position: absolute; - bottom: 0px; - width: 100%; - z-index: 100; - text-align: center; - - .#{$ns}Carousel-dot { - display: inline-block; - height: $Carousel-dot-width; - width: $Carousel-dot-height; - border-radius: $Carousel-dot-borderRadius; - margin: $Carousel-dot-margin; - transition-duration: $Carousel-transitionDuration; - opacity: 0.3; - - &.is-active { - opacity: 1; - } - } + .#{$ns}Carousel-rightArrow { + @include arrow-control; + right: 0; } - - &-arrowsControl { - position: absolute; - width: 100%; - height: inherit; - z-index: 100; - text-align: center; - - .#{$ns}Carousel-leftArrow { - @include arrow-control; - left: 0; - } - - .#{$ns}Carousel-rightArrow { - @include arrow-control; - right: 0; - } - } -} \ No newline at end of file + } +} diff --git a/scss/components/_chart.scss b/scss/components/_chart.scss index d225096d..54168339 100644 --- a/scss/components/_chart.scss +++ b/scss/components/_chart.scss @@ -1,11 +1,11 @@ .#{$ns}Chart { - min-height: 300px; - position: relative; + min-height: 300px; + position: relative; - &-placeholder { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - } + &-placeholder { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } } diff --git a/scss/components/_collapse.scss b/scss/components/_collapse.scss index 19b4caaf..98d69246 100644 --- a/scss/components/_collapse.scss +++ b/scss/components/_collapse.scss @@ -1,51 +1,52 @@ .#{$ns}Collapse { - padding: 0; - margin-bottom: $Form-item-gap; + padding: 0; + margin-bottom: $Form-item-gap; - &-header { - font-size: $fontSizeMd; - font-weight: $fontWeightNormal; - color: $text--loud-color; - padding: px2rem(5px) 0; - border-bottom: $borderWidth solid lighten($borderColor, 5%); + &-header { + font-size: $fontSizeMd; + font-weight: $fontWeightNormal; + color: $text--loud-color; + padding: px2rem(5px) 0; + border-bottom: $borderWidth solid lighten($borderColor, 5%); + } + + &-arrow { + display: inline-block; + width: px2rem(16px); + text-align: center; + margin-left: $gap-xs; + cursor: pointer; + + &:before { + content: ''; + position: relative; + display: inline-block; + width: px2rem(6px); + height: px2rem(6px); + top: px2rem(-4px); + border-color: $text-color; + border-style: solid; + border-width: px2rem(1px) px2rem(1px) 0 0; + transform: rotate(135deg); + transform-origin: 50% 50%; } + } - &-arrow { - display: inline-block; - width: px2rem(16px); - text-align: center; - margin-left: $gap-xs; - cursor: pointer; + &.is-collapsed &-arrow:before { + transform: rotate(45deg); + transform-origin: 0% 50%; + } - &:before { - content: ""; - position: relative; - display: inline-block; - width: px2rem(6px); - height: px2rem(6px); - top: px2rem(-4px); - border-color: $text-color; - border-style: solid; - border-width: px2rem(1px) px2rem(1px) 0 0; - transform: rotate(135deg); - transform-origin: 50% 50%; - } - } - - &.is-collapsed &-arrow:before { - transform: rotate(45deg); - transform-origin: 0% 50%; - } - - &--collapsable &-header { - user-select: none; - } - - &-content { - transition: height .35s ease; - &.in, &.out { - height: 0; - overflow: hidden; - } + &--collapsable &-header { + user-select: none; + } + + &-content { + transition: height 0.35s ease; + &.in, + &.out { + height: 0; + overflow: hidden; } + } } diff --git a/scss/components/_color.scss b/scss/components/_color.scss index d66d3317..af1acbc0 100644 --- a/scss/components/_color.scss +++ b/scss/components/_color.scss @@ -1,18 +1,18 @@ .#{$ns}ColorField { + display: inline-block; + + &-previewIcon { display: inline-block; + vertical-align: middle; + width: px2rem(16px); + height: px2rem(16px); + box-shadow: $boxShadowSm; + background-color: #ccc; + } - &-previewIcon { - display: inline-block; - vertical-align: middle; - width: px2rem(16px); - height: px2rem(16px); - box-shadow: $boxShadowSm; - background-color: #ccc; - } - - &-value { - display: inline-block; - margin-left: 10px; - vertical-align: middle; - } -} \ No newline at end of file + &-value { + display: inline-block; + margin-left: 10px; + vertical-align: middle; + } +} diff --git a/scss/components/_copyable.scss b/scss/components/_copyable.scss index e9af1940..3fcdf9ea 100644 --- a/scss/components/_copyable.scss +++ b/scss/components/_copyable.scss @@ -1,10 +1,10 @@ .#{$ns}Field-copyBtn { - color: $Copyable-iconColor; - margin-left: $gap-xs; - display: inline-block; - cursor: pointer; + color: $Copyable-iconColor; + margin-left: $gap-xs; + display: inline-block; + cursor: pointer; - &:hover { - color: $Copyable-onHover-iconColor; - } + &:hover { + color: $Copyable-onHover-iconColor; + } } diff --git a/scss/components/_crud.scss b/scss/components/_crud.scss index 48742b89..f631a9de 100644 --- a/scss/components/_crud.scss +++ b/scss/components/_crud.scss @@ -1,130 +1,130 @@ .#{$ns}Crud { - position: relative; + position: relative; - &.is-loading > &-body { - filter: blur(5px); + &.is-loading > &-body { + filter: blur(5px); + } + + &-selection { + margin-bottom: $gap-base; + } + + &-selectionLabel { + display: inline-block; + vertical-align: top; + margin-top: $gap-xs; + } + + &-value { + cursor: pointer; + vertical-align: middle; + user-select: none; + line-height: $Form-input-lineHeight * $Form-input-fontSize - px2rem(2px); + display: inline-block; + font-size: $Form-selectValue-fontSize; + color: $Form-selectValue-color; + background: $Form-selectValue-bg; + border: px2rem(1px) solid $Form-selectValue-borderColor; + border-radius: 2px; + margin-right: $gap-xs; + margin-top: $gap-xs; + + &:hover { + background-color: darken($Form-selectValue-bg, 5%); } - &-selection { - margin-bottom: $gap-base; + &.is-disabled { + pointer-events: none; + opacity: $Button-onDisabled-opacity; + } + } + + &-valueIcon { + cursor: pointer; + border-right: px2rem(1px) solid $Form-selectValue-borderColor; + padding: 1px 5px; + + &:hover { + background-color: darken($Form-selectValue-bg, 5%); + } + } + + &-valueLabel { + padding: 0 $gap-xs; + } + + &-selectionClear { + display: inline-block; + cursor: pointer; + user-select: none; + margin-left: $gap-xs; + margin-top: $gap-xs; + vertical-align: middle; + } + + &-toolbar-item { + margin-left: $Crud-toolbar-gap; + line-height: $Crud-toolbar-lineHeight; + height: $Crud-toolbar-height; + vertical-align: middle; + + &--left { + float: left; } - &-selectionLabel { - display: inline-block; - vertical-align: top; - margin-top: $gap-xs; + &--right { + float: right; } + } - &-value { - cursor: pointer; - vertical-align: middle; - user-select: none; - line-height: $Form-input-lineHeight * $Form-input-fontSize - px2rem(2px); - display: inline-block; - font-size: $Form-selectValue-fontSize; - color: $Form-selectValue-color; - background: $Form-selectValue-bg; - border: px2rem(1px) solid $Form-selectValue-borderColor; - border-radius: 2px; - margin-right: $gap-xs; - margin-top: $gap-xs; - - &:hover { - background-color: darken($Form-selectValue-bg, 5%); - } - - &.is-disabled { - pointer-events: none; - opacity: $Button-onDisabled-opacity; - } + &-actions { + > * + .#{$ns}Button, + > * + .#{$ns}ButtonGroup, + > * + .#{$ns}ButtonToolbar { + margin-left: $Crud-toolbar-gap; } + } - &-valueIcon { - cursor: pointer; - border-right: px2rem(1px) solid $Form-selectValue-borderColor; - padding: 1px 5px; + &-statistics { + line-height: $Crud-toolbar-height; + vertical-align: middle; + } - &:hover { - background-color: darken($Form-selectValue-bg, 5%); - } - } - - &-valueLabel { - padding: 0 $gap-xs; - } - - &-selectionClear { - display: inline-block; - cursor: pointer; - user-select: none; - margin-left: $gap-xs; - margin-top: $gap-xs; - vertical-align: middle; - } - - &-toolbar-item { - margin-left: $Crud-toolbar-gap; - line-height: $Crud-toolbar-lineHeight; - height: $Crud-toolbar-height; - vertical-align: middle; - - &--left { - float: left; - } - - &--right { - float: right; - } - } - - &-actions { - > * + .#{$ns}Button, - > * + .#{$ns}ButtonGroup, - > * + .#{$ns}ButtonToolbar { - margin-left: $Crud-toolbar-gap; - } - } - - &-statistics { - line-height: $Crud-toolbar-height; - vertical-align: middle; - } - - &-pageSwitch { - .#{$ns}Select { - margin-left: $Crud-toolbar-gap; - } + &-pageSwitch { + .#{$ns}Select { + margin-left: $Crud-toolbar-gap; } + } } @include media-breakpoint-up(sm) { - .#{$ns}Crud { - &-toolbar { - margin-left: -$Crud-toolbar-gap; - flex-basis: 0; - flex-grow: 1; - @include clearfix(); - } + .#{$ns}Crud { + &-toolbar { + margin-left: -$Crud-toolbar-gap; + flex-basis: 0; + flex-grow: 1; + @include clearfix(); + } + } + + &-toolbar-item { + margin-left: $Crud-toolbar-gap; + line-height: $Crud-toolbar-lineHeight; + height: $Crud-toolbar-height; + vertical-align: middle; + + &--left { + float: left; } - &-toolbar-item { - margin-left: $Crud-toolbar-gap; - line-height: $Crud-toolbar-lineHeight; - height: $Crud-toolbar-height; - vertical-align: middle; - - &--left { - float: left; - } - - &--right { - float: right; - } + &--right { + float: right; } + } - &-actions { - > .#{$ns}Button + .#{$ns}Button { - margin-left: $Crud-toolbar-gap; - } + &-actions { + > .#{$ns}Button + .#{$ns}Button { + margin-left: $Crud-toolbar-gap; } + } } diff --git a/scss/components/_divider.scss b/scss/components/_divider.scss index 9717bfca..fedf6760 100644 --- a/scss/components/_divider.scss +++ b/scss/components/_divider.scss @@ -1,10 +1,10 @@ .#{$ns}Divider { - margin: ($gap-base) (-$gap-base); - border-bottom: $borderWidth dashed $borderColor; - height: px2rem(2px); - font-size: 0; + margin: ($gap-base) (-$gap-base); + border-bottom: $borderWidth dashed $borderColor; + height: px2rem(2px); + font-size: 0; - &--solid { - border-bottom-style: solid; - } + &--solid { + border-bottom-style: solid; + } } diff --git a/scss/components/_drawer.scss b/scss/components/_drawer.scss index d54d92c9..b569c837 100644 --- a/scss/components/_drawer.scss +++ b/scss/components/_drawer.scss @@ -1,171 +1,171 @@ .#{$ns}Drawer { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: $zindex-modal; + overflow: hidden; + outline: 0; + + &-content { + position: absolute; + display: flex; + flex-direction: column; + width: 100%; + height: 100%; + pointer-events: auto; + background-color: $Drawer-bg; + background-clip: padding-box; + outline: 0; + z-index: 2; + border: $Drawer-content-borderWidth solid $Drawer-content-borderColor; + border-radius: $Drawer-content-borderRadius; + transition: transform ease-in-out 0.3s; + } + + &-overlay { + transition: ease-out opacity 0.3s; position: fixed; top: 0; right: 0; bottom: 0; left: 0; - z-index: $zindex-modal; - overflow: hidden; - outline: 0; + z-index: 1; + background-color: $Drawer-overlay-bg; + opacity: 0; - &-content { - position: absolute; - display: flex; - flex-direction: column; - width: 100%; - height: 100%; - pointer-events: auto; - background-color: $Drawer-bg; - background-clip: padding-box; - outline: 0; - z-index: 2; - border: $Drawer-content-borderWidth solid $Drawer-content-borderColor; - border-radius: $Drawer-content-borderRadius; - transition: transform ease-in-out 0.3s; + &.in { + opacity: 1; + } + } + + &-header { + padding: $Drawer-header-padding; + background-color: $Drawer-header-bg; + @include clearfix(); + border-bottom: $Drawer-content-borderWidth solid + lighten($Drawer-content-borderColor, 5%); + border-top-left-radius: $Drawer-content-borderRadius; + border-top-right-radius: $Drawer-content-borderRadius; + } + + &-title { + font-size: $Drawer-title-fontSize; + color: $Drawer-title-fontColor; + } + + &-close { + position: absolute; + color: $Drawer-close-color; + line-height: 1; + text-decoration: none; + + svg { + width: 30px; + height: 30px; + fill: $Drawer-close-color; } - &-overlay { - transition: ease-out opacity 0.3s; - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 1; - background-color: $Drawer-overlay-bg; - opacity: 0; + &:not(.is-disabled) { + cursor: pointer; - &.in { - opacity: 1; - } - } - - &-header { - padding: $Drawer-header-padding; - background-color: $Drawer-header-bg; - @include clearfix(); - border-bottom: $Drawer-content-borderWidth solid - lighten($Drawer-content-borderColor, 5%); - border-top-left-radius: $Drawer-content-borderRadius; - border-top-right-radius: $Drawer-content-borderRadius; - } - - &-title { - font-size: $Drawer-title-fontSize; - color: $Drawer-title-fontColor; - } - - &-close { - position: absolute; - color: $Drawer-close-color; - line-height: 1; + &:hover { text-decoration: none; + color: $Drawer-close-onHover-color; svg { - width: 30px; - height: 30px; - fill: $Drawer-close-color; + fill: $Drawer-close-onHover-color; } + } + } + } - &:not(.is-disabled) { - cursor: pointer; + &-body { + padding: $Drawer-body-padding; + flex-basis: 0; + flex-grow: 1; + overflow: auto; + } - &:hover { - text-decoration: none; - color: $Drawer-close-onHover-color; + &-footer { + display: flex; + align-items: flex-end; + justify-content: flex-end; + padding: $Drawer-footer-padding; + border-top: $Drawer-content-borderWidth solid + lighten($Drawer-content-borderColor, 5%); + border-bottom-left-radius: $Drawer-content-borderRadius; + border-bottom-right-radius: $Drawer-content-borderRadius; - svg { - fill: $Drawer-close-onHover-color; - } - } - } + .#{$ns}Button { + margin-left: $gap-xs; } - &-body { - padding: $Drawer-body-padding; - flex-basis: 0; - flex-grow: 1; - overflow: auto; + .#{$ns}Drawer-info { + flex-basis: 0; + flex-grow: 1; + text-align: left; + align-self: center; } - &-footer { - display: flex; - align-items: flex-end; - justify-content: flex-end; - padding: $Drawer-footer-padding; - border-top: $Drawer-content-borderWidth solid - lighten($Drawer-content-borderColor, 5%); - border-bottom-left-radius: $Drawer-content-borderRadius; - border-bottom-right-radius: $Drawer-content-borderRadius; - - .#{$ns}Button { - margin-left: $gap-xs; - } - - .#{$ns}Drawer-info { - flex-basis: 0; - flex-grow: 1; - text-align: left; - align-self: center; - } - - .#{$ns}Drawer-error { - color: $danger; - } + .#{$ns}Drawer-error { + color: $danger; } + } - &.#{$ns}Drawer--noOverlay { - .#{$ns}Drawer-close svg { - margin-top: px2rem(2px); - width: px2rem(20px); - height: px2rem(20px); - fill: #99a6ad; - } + &.#{$ns}Drawer--noOverlay { + .#{$ns}Drawer-close svg { + margin-top: px2rem(2px); + width: px2rem(20px); + height: px2rem(20px); + fill: #99a6ad; } + } - .#{$ns}Drawer-resizeCtrl { - position: absolute; - border: $borderWidth solid $borderColor; - background-color: $white; - border-radius: $borderRadius; - font-size: $fontSizeSm; - line-height: $fontSizeSm; - text-align: center; - user-select: none; - } + .#{$ns}Drawer-resizeCtrl { + position: absolute; + border: $borderWidth solid $borderColor; + background-color: $white; + border-radius: $borderRadius; + font-size: $fontSizeSm; + line-height: $fontSizeSm; + text-align: center; + user-select: none; + } } // size @include media-breakpoint-up(sm) { - .#{$ns}Drawer .#{$ns}Drawer-content { - width: $Drawer-widthBase; - height: $Drawer-widthBase; - } + .#{$ns}Drawer .#{$ns}Drawer-content { + width: $Drawer-widthBase; + height: $Drawer-widthBase; + } - .#{$ns}Drawer--xs .#{$ns}Drawer-content { - width: $Drawer-widthXs; - height: $Drawer-widthXs; - } + .#{$ns}Drawer--xs .#{$ns}Drawer-content { + width: $Drawer-widthXs; + height: $Drawer-widthXs; + } - .#{$ns}Drawer--sm .#{$ns}Drawer-content { - width: $Drawer-widthSm; - height: $Drawer-widthSm; - } + .#{$ns}Drawer--sm .#{$ns}Drawer-content { + width: $Drawer-widthSm; + height: $Drawer-widthSm; + } - .#{$ns}Drawer--md .#{$ns}Drawer-content { - width: $Drawer-widthMd; - height: $Drawer-widthMd; - } + .#{$ns}Drawer--md .#{$ns}Drawer-content { + width: $Drawer-widthMd; + height: $Drawer-widthMd; + } - .#{$ns}Drawer--lg .#{$ns}Drawer-content { - width: $Drawer-widthLg; - height: $Drawer-widthLg; - } + .#{$ns}Drawer--lg .#{$ns}Drawer-content { + width: $Drawer-widthLg; + height: $Drawer-widthLg; + } - .#{$ns}Drawer--xl .#{$ns}Drawer-content { - width: $Drawer-widthXl; - height: $Drawer-widthXl; - } + .#{$ns}Drawer--xl .#{$ns}Drawer-content { + width: $Drawer-widthXl; + height: $Drawer-widthXl; + } } // positons @@ -173,171 +173,171 @@ .#{$ns}Drawer--right .#{$ns}Drawer-content.in, .#{$ns}Drawer--bottom .#{$ns}Drawer-content.in, .#{$ns}Drawer--left .#{$ns}Drawer-content.in { - transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } .#{$ns}Drawer--top { + .#{$ns}Drawer-close { + top: 100%; + margin-top: $gap-sm; + left: $gap-sm; + } + + &.#{$ns}Drawer--noOverlay { .#{$ns}Drawer-close { - top: 100%; - margin-top: $gap-sm; - left: $gap-sm; + top: $gap-base; + right: $gap-base; + left: auto; + margin-top: 0; } + } - &.#{$ns}Drawer--noOverlay { - .#{$ns}Drawer-close { - top: $gap-base; - right: $gap-base; - left: auto; - margin-top: 0; - } - } + .#{$ns}Drawer-content { + top: 0; + bottom: auto; + left: 0; + right: 0; + width: 100%; + transform: translate3d(0, -100%, 0); + box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.2); + min-height: 120px; + } - .#{$ns}Drawer-content { - top: 0; - bottom: auto; - left: 0; - right: 0; - width: 100%; - transform: translate3d(0, -100%, 0); - box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.2); - min-height: 120px; - } - - .#{$ns}Drawer-resizeCtrl { - bottom: px2rem(-6px); - left: 50%; - cursor: ns-resize; - width: px2rem(20px); - height: px2rem(12px); - } + .#{$ns}Drawer-resizeCtrl { + bottom: px2rem(-6px); + left: 50%; + cursor: ns-resize; + width: px2rem(20px); + height: px2rem(12px); + } } .#{$ns}Drawer--right { + .#{$ns}Drawer-close { + right: 100%; + margin-right: $gap-sm; + top: $gap-sm; + } + + &.#{$ns}Drawer--noOverlay { .#{$ns}Drawer-close { - right: 100%; - margin-right: $gap-sm; - top: $gap-sm; + top: $gap-base; + right: $gap-base; + margin-right: 0; + } + } + + .#{$ns}Drawer-content { + top: 0; + bottom: 0; + left: auto; + right: 0; + height: 100%; + transform: translate3d(100%, 0, 0); + box-shadow: -10px 0 10px -10px rgba(0, 0, 0, 0.2); + min-width: 120px; + } + + .#{$ns}Drawer-footer { + justify-content: flex-start; + + .#{$ns}Button { + margin-left: 0; + margin-right: $gap-xs; } - &.#{$ns}Drawer--noOverlay { - .#{$ns}Drawer-close { - top: $gap-base; - right: $gap-base; - margin-right: 0; - } + .#{$ns}Drawer-info { + flex-basis: 0; + flex-grow: 1; + order: 10; + align-self: center; + text-align: right; } - .#{$ns}Drawer-content { - top: 0; - bottom: 0; - left: auto; - right: 0; - height: 100%; - transform: translate3d(100%, 0, 0); - box-shadow: -10px 0 10px -10px rgba(0, 0, 0, 0.2); - min-width: 120px; + .#{$ns}Drawer-error { + color: $danger; } + } - .#{$ns}Drawer-footer { - justify-content: flex-start; - - .#{$ns}Button { - margin-left: 0; - margin-right: $gap-xs; - } - - .#{$ns}Drawer-info { - flex-basis: 0; - flex-grow: 1; - order: 10; - align-self: center; - text-align: right; - } - - .#{$ns}Drawer-error { - color: $danger; - } - } - - .#{$ns}Drawer-resizeCtrl { - left: px2rem(-6px); - top: 50%; - cursor: ew-resize; - writing-mode: vertical-lr; - width: px2rem(12px); - height: px2rem(20px); - } + .#{$ns}Drawer-resizeCtrl { + left: px2rem(-6px); + top: 50%; + cursor: ew-resize; + writing-mode: vertical-lr; + width: px2rem(12px); + height: px2rem(20px); + } } .#{$ns}Drawer--bottom { + .#{$ns}Drawer-close { + bottom: 100%; + margin-bottom: $gap-sm; + left: $gap-sm; + } + + &.#{$ns}Drawer--noOverlay { .#{$ns}Drawer-close { - bottom: 100%; - margin-bottom: $gap-sm; - left: $gap-sm; + top: $gap-base; + right: $gap-base; + left: auto; + margin-bottom: 0; } + } - &.#{$ns}Drawer--noOverlay { - .#{$ns}Drawer-close { - top: $gap-base; - right: $gap-base; - left: auto; - margin-bottom: 0; - } - } + .#{$ns}Drawer-content { + top: auto; + bottom: 0; + left: 0; + right: 0; + width: 100%; + transform: translate3d(0, 100%, 0); + box-shadow: 0 -10px 10px -10px rgba(0, 0, 0, 0.2); + min-height: 120px; + } - .#{$ns}Drawer-content { - top: auto; - bottom: 0; - left: 0; - right: 0; - width: 100%; - transform: translate3d(0, 100%, 0); - box-shadow: 0 -10px 10px -10px rgba(0, 0, 0, 0.2); - min-height: 120px; - } - - .#{$ns}Drawer-resizeCtrl { - top: px2rem(-6px); - left: 50%; - cursor: ns-resize; - width: px2rem(20px); - height: px2rem(12px); - } + .#{$ns}Drawer-resizeCtrl { + top: px2rem(-6px); + left: 50%; + cursor: ns-resize; + width: px2rem(20px); + height: px2rem(12px); + } } .#{$ns}Drawer--left { + .#{$ns}Drawer-close { + left: 100%; + margin-left: $gap-sm; + top: $gap-sm; + } + + &.#{$ns}Drawer--noOverlay { .#{$ns}Drawer-close { - left: 100%; - margin-left: $gap-sm; - top: $gap-sm; + left: auto; + right: $gap-base; + top: $gap-base; } + } - &.#{$ns}Drawer--noOverlay { - .#{$ns}Drawer-close { - left: auto; - right: $gap-base; - top: $gap-base; - } - } + .#{$ns}Drawer-content { + top: 0; + bottom: 0; + right: auto; + left: 0; + height: 100%; + transform: translate3d(-100%, 0, 0); + box-shadow: 10px 0 10px -10px rgba(0, 0, 0, 0.2); + border-width: 0 $Drawer-content-borderWidth 0 0; + min-width: 120px; + } - .#{$ns}Drawer-content { - top: 0; - bottom: 0; - right: auto; - left: 0; - height: 100%; - transform: translate3d(-100%, 0, 0); - box-shadow: 10px 0 10px -10px rgba(0, 0, 0, 0.2); - border-width: 0 $Drawer-content-borderWidth 0 0; - min-width: 120px; - } - - .#{$ns}Drawer-resizeCtrl { - right: px2rem(-6px); - top: 50%; - cursor: ew-resize; - writing-mode: vertical-lr; - width: px2rem(12px); - height: px2rem(20px); - } + .#{$ns}Drawer-resizeCtrl { + right: px2rem(-6px); + top: 50%; + cursor: ew-resize; + writing-mode: vertical-lr; + width: px2rem(12px); + height: px2rem(20px); + } } diff --git a/scss/components/_dropdown.scss b/scss/components/_dropdown.scss index 416d320f..648158a1 100644 --- a/scss/components/_dropdown.scss +++ b/scss/components/_dropdown.scss @@ -1,75 +1,75 @@ .#{$ns}DropDown { - position: relative; - display: inline-block; + position: relative; + display: inline-block; - &-caret { - margin-left: $DropDown-caret-marginLeft; + &-caret { + margin-left: $DropDown-caret-marginLeft; + } + + &--block { + display: block; + + .#{$ns}Button { + display: block; + } + } + + &-menu { + position: absolute; + z-index: $zindex-dropdown; + top: 100%; + left: 0; + margin: px2rem(1px) 0 0; + background-color: $DropDown-menu-bg; + list-style: none; + padding: $DropDown-menu-paddingY $DropDown-menu-paddingX; + border: $DropDown-menu-borderWidth solid $DropDown-menu-borderColor; + border-radius: $DropDown-menu-borderRadius; + box-shadow: $DropDown-menu-boxShadow; + min-width: $DropDown-menu-minWidth; + text-align: left; + } + + &--alignRight &-menu { + left: auto; + right: 0; + } + + &-menuItem, + &-menu > li { + padding: $DropDown-menuItem-paddingY $DropDown-menuItem-paddingX; + white-space: nowrap; + box-sizing: border-box; + height: $DropDown-menu-height; + vertical-align: middle; + user-select: none; + + &:hover { + background-color: $DropDown-menuItem-onHover-bg; + color: $DropDown-menuItem-onHover-color; } - &--block { - display: block; - - .#{$ns}Button { - display: block; - } + &:not(.is-disabled), + &:not(.disabled) { + cursor: pointer; } - &-menu { - position: absolute; - z-index: $zindex-dropdown; - top: 100%; - left: 0; - margin: px2rem(1px) 0 0; - background-color: $DropDown-menu-bg; - list-style: none; - padding: $DropDown-menu-paddingY $DropDown-menu-paddingX; - border: $DropDown-menu-borderWidth solid $DropDown-menu-borderColor; - border-radius: $DropDown-menu-borderRadius; - box-shadow: $DropDown-menu-boxShadow; - min-width: $DropDown-menu-minWidth; - text-align: left; + &.#{$ns}DropDown-divider { + height: px2rem(1px); + margin: px2rem(9px) 0; + overflow: hidden; + background-color: $DropDown-menu-borderColor; + padding: 0; } + } - &--alignRight &-menu { - left: auto; - right: 0; - } + &-menu > li a { + display: block; + text-decoration: none; + } - &-menuItem, - &-menu > li { - padding: $DropDown-menuItem-paddingY $DropDown-menuItem-paddingX; - white-space: nowrap; - box-sizing: border-box; - height: $DropDown-menu-height; - vertical-align: middle; - user-select: none; - - &:hover { - background-color: $DropDown-menuItem-onHover-bg; - color: $DropDown-menuItem-onHover-color; - } - - &:not(.is-disabled), - &:not(.disabled) { - cursor: pointer; - } - - &.#{$ns}DropDown-divider { - height: px2rem(1px); - margin: px2rem(9px) 0; - overflow: hidden; - background-color: $DropDown-menu-borderColor; - padding: 0; - } - } - - &-menu > li a { - display: block; - text-decoration: none; - } - - &-popover { - border: none; - box-shadow: none; - } + &-popover { + border: none; + box-shadow: none; + } } diff --git a/scss/components/_list.scss b/scss/components/_list.scss index 22421c7d..48c9cd23 100644 --- a/scss/components/_list.scss +++ b/scss/components/_list.scss @@ -1,177 +1,177 @@ .#{$ns}List { - border: $List-borderWidth solid $List-borderColor; - border-radius: $List-borderRadius; - background-color: $List-bg; - margin-bottom: $gap-md; - position: relative; + border: $List-borderWidth solid $List-borderColor; + border-radius: $List-borderRadius; + background-color: $List-bg; + margin-bottom: $gap-md; + position: relative; - &-toolbar { - @include clearfix(); - display: flex; - flex-wrap: nowrap; - padding: $List-toolbar-paddingY $List-toolbar-paddingX; + &-toolbar { + @include clearfix(); + display: flex; + flex-wrap: nowrap; + padding: $List-toolbar-paddingY $List-toolbar-paddingX; + } + + &-actions { + display: inline-block; + + > * { + margin-right: $Crud-toolbar-gap; + } + } + + &-header { + padding: $List-toolbar-paddingY $List-toolbar-paddingX; + + > * + .#{$ns}Button, + > * + .#{$ns}ButtonGroup, + > * + .#{$ns}ButtonToolbar { + margin-left: $Crud-toolbar-gap; + } + } + + &-header + &-toolbar { + padding-top: 0; + } + + &-heading { + padding: $gap-xs 0; + } + + &-fixedTop { + position: absolute; + background: $white; + z-index: -1; + opacity: 0; + box-shadow: $List-fixedTop-boxShadow; + padding: $gap-sm; + + &.in { + position: fixed; + opacity: 1; + z-index: $zindex-affix; } - &-actions { - display: inline-block; - - >* { - margin-right: $Crud-toolbar-gap; - } + .#{$ns}Cards-toolbar { + margin-bottom: 0; } - &-header { - padding: $List-toolbar-paddingY $List-toolbar-paddingX; - - >*+.#{$ns}Button, - >*+.#{$ns}ButtonGroup, - >*+.#{$ns}ButtonToolbar { - margin-left: $Crud-toolbar-gap; - } + &:empty { + display: none; } + } - &-header+&-toolbar { - padding-top: 0; - } + &--unsaved &-heading { + background: $List--unsaved-heading-bg; + color: $List--unsaved-heading-color; + padding: $gap-xs $gap-sm; + margin-bottom: $gap-sm; + } - &-heading { - padding: $gap-xs 0; - } + &-dragTip { + color: $text--loud-color; + clear: both; + margin-top: $gap-xs; + } - &-fixedTop { - position: absolute; - background: $white; - z-index: -1; - opacity: 0; - box-shadow: $List-fixedTop-boxShadow; - padding: $gap-sm; - - &.in { - position: fixed; - opacity: 1; - z-index: $zindex-affix; - } - - .#{$ns}Cards-toolbar { - margin-bottom: 0; - } - - &:empty { - display: none; - } - } - - &--unsaved &-heading { - background: $List--unsaved-heading-bg; - color: $List--unsaved-heading-color; - padding: $gap-xs $gap-sm; - margin-bottom: $gap-sm; - } - - &-dragTip { - color: $text--loud-color; - clear: both; - margin-top: $gap-xs; - } - - &-placeholder { - color: $text--muted-color; - text-align: center; - height: $List-placeholder-height; - line-height: $List-placeholder-height; - } + &-placeholder { + color: $text--muted-color; + text-align: center; + height: $List-placeholder-height; + line-height: $List-placeholder-height; + } } .#{$ns}ListItem { - @include clearfix(); + @include clearfix(); - &+& { - border-top: $ListItem-borderWidth solid $ListItem-borderColor; - } + & + & { + border-top: $ListItem-borderWidth solid $ListItem-borderColor; + } + position: relative; + display: block; + padding: $ListItem-paddingY $ListItem-paddingX; + + &:nth-child(even) { + background-color: $ListItem--strip-bg; + } + + &-checkBtn { + float: left; + margin-right: $gap-sm; + } + + &-dragBtn { + cursor: pointer; + float: left; + margin-right: $gap-sm; + } + + &-actions { + float: right; + } + + &-title { + margin: 0; + padding: 0; + font-size: $fontSizeBase; + color: $text--loud-color; + font-weight: $fontWeightNormal; + } + + &-content { + overflow: hidden; + } + + &-field { position: relative; - display: block; - padding: $ListItem-paddingY $ListItem-paddingX; + display: flex; + flex-wrap: nowrap; + } - &:nth-child(even) { - background-color: $ListItem--strip-bg; + &-fieldValue { + position: relative; + flex-basis: 0; + flex-grow: 1; + max-width: 100%; + } + + &-fieldLabel { + width: px2rem(150px); + color: $text--muted-color; + } + + &.is-checked { + background-color: $ListItem-onChecked-bg; + border-color: $ListItem-onChecked-borderColor; + color: $ListItem-onChecked-color; + + + .#{$ns}ListItem { + border-color: $ListItem-onChecked-borderColor; } - &-checkBtn { - float: left; - margin-right: $gap-sm; + .#{$ns}ListItem-fieldLabel { + color: lighten($ListItem-onChecked-color, 20%); + } + } + + &.is-modified, + &.is-moved { + background-color: $ListItem-onModified-bg; + border-color: $ListItem-onModified-borderColor; + color: $ListItem-onModified-color; + + + .#{$ns}ListItem { + border-color: $ListItem-onModified-borderColor; } - &-dragBtn { - cursor: pointer; - float: left; - margin-right: $gap-sm; + .#{$ns}ListItem-fieldLabel { + color: lighten($ListItem-onModified-color, 20%); } + } - &-actions { - float: right; - } - - &-title { - margin: 0; - padding: 0; - font-size: $fontSizeBase; - color: $text--loud-color; - font-weight: $fontWeightNormal; - } - - &-content { - overflow: hidden; - } - - &-field { - position: relative; - display: flex; - flex-wrap: nowrap; - } - - &-fieldValue { - position: relative; - flex-basis: 0; - flex-grow: 1; - max-width: 100%; - } - - &-fieldLabel { - width: px2rem(150px); - color: $text--muted-color; - } - - &.is-checked { - background-color: $ListItem-onChecked-bg; - border-color: $ListItem-onChecked-borderColor; - color: $ListItem-onChecked-color; - - +.#{$ns}ListItem { - border-color: $ListItem-onChecked-borderColor; - } - - .#{$ns}ListItem-fieldLabel { - color: lighten($ListItem-onChecked-color, 20%); - } - } - - &.is-modified, - &.is-moved { - background-color: $ListItem-onModified-bg; - border-color: $ListItem-onModified-borderColor; - color: $ListItem-onModified-color; - - +.#{$ns}ListItem { - border-color: $ListItem-onModified-borderColor; - } - - .#{$ns}ListItem-fieldLabel { - color: lighten($ListItem-onModified-color, 20%); - } - } - - &.is-dragging { - opacity: $ListItem-onDragging-opacity; - } -} \ No newline at end of file + &.is-dragging { + opacity: $ListItem-onDragging-opacity; + } +} diff --git a/scss/components/_modal.scss b/scss/components/_modal.scss index efd559f7..e72987b1 100644 --- a/scss/components/_modal.scss +++ b/scss/components/_modal.scss @@ -1,217 +1,220 @@ .is-modalOpened { - overflow: hidden; + overflow: hidden; - .#{$ns}Modal { - overflow-x: hidden; - overflow-y: auto; - } + .#{$ns}Modal { + overflow-x: hidden; + overflow-y: auto; + } } @keyframes modalIn { - from { - opacity: 0; - transform: translate3d(0, -300px, 0) scale(0.2); - } + from { + opacity: 0; + transform: translate3d(0, -300px, 0) scale(0.2); + } } @keyframes modalOut { - to { - opacity: 0; - transform: translate3d(0, -300px, 0) scale(0.2); - } + to { + opacity: 0; + transform: translate3d(0, -300px, 0) scale(0.2); + } } .#{$ns}Modal { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: $zindex-modal; + overflow: hidden; + outline: 0; + + &-content { + position: relative; + display: flex; + flex-direction: column; + width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog` + min-height: $Modal-content-minHeight; + pointer-events: auto; + background-color: $Modal-bg; + background-clip: padding-box; + outline: 0; + z-index: 2; + margin-left: auto; + margin-right: auto; + margin-top: $Modal-content-startMarginTop; + margin-bottom: $gap-md; + border: $Modal-content-borderWidth solid $Modal-content-borderColor; + border-radius: $Modal-content-borderRadius; + + // transition: ease-out all 0.3s; + // transform: translateY(-300px) scale(0.2); + // opacity: 0; + + &.in, + &.out { + // opacity: 1; + // transform: translateY(0) scale(1); + animation-duration: 0.35s; + animation-fill-mode: both; + } + + &.in { + animation-name: modalIn; + } + + &.out { + animation-name: modalOut; + } + } + + &-overlay { + transition: ease-in-out opacity 0.5s; + // transition-delay: 0.2s; position: fixed; top: 0; right: 0; bottom: 0; left: 0; - z-index: $zindex-modal; - overflow: hidden; - outline: 0; + z-index: 1; + background-color: $Modal-overlay-bg; + opacity: 0; - &-content { - position: relative; - display: flex; - flex-direction: column; - width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog` - min-height: $Modal-content-minHeight; - pointer-events: auto; - background-color: $Modal-bg; - background-clip: padding-box; - outline: 0; - z-index: 2; - margin-left: auto; - margin-right: auto; - margin-top: $Modal-content-startMarginTop; - margin-bottom: $gap-md; - border: $Modal-content-borderWidth solid $Modal-content-borderColor; - border-radius: $Modal-content-borderRadius; - - // transition: ease-out all 0.3s; - // transform: translateY(-300px) scale(0.2); - // opacity: 0; - - &.in, - &.out { - // opacity: 1; - // transform: translateY(0) scale(1); - animation-duration: 0.35s; - animation-fill-mode: both; - } - - &.in { - animation-name: modalIn; - } - - &.out { - animation-name: modalOut; - } + &.in { + opacity: 1; } - &-overlay { - transition: ease-in-out opacity 0.5s; - // transition-delay: 0.2s; - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 1; - background-color: $Modal-overlay-bg; - opacity: 0; + &.out { + opacity: 0; + } + } - &.in { - opacity: 1; - } + &-header { + padding: $Modal-header-paddingY $Modal-header-paddingX; + background-color: $Modal-header-bg; + @include clearfix(); + border-bottom: $Modal-body-borderTop; - &.out { - opacity: 0; - } + @if $Modal-content-borderRadius { + border-top-left-radius: $Modal-content-borderRadius; + border-top-right-radius: $Modal-content-borderRadius; + } + } + + &-title { + font-size: $Modal-title-fontSize; + color: $Modal-title-color; + } + + &-close { + float: right; + color: $Modal-close-color; + line-height: inherit; + text-decoration: none; + vertical-align: middle; + + svg { + width: $Modal-close-width; + height: $Modal-close-width; + fill: $Modal-close-color; } - &-header { - padding: $Modal-header-paddingY $Modal-header-paddingX; - background-color: $Modal-header-bg; - @include clearfix(); - border-bottom: $Modal-body-borderTop; + &:not(.is-disabled) { + cursor: pointer; - @if $Modal-content-borderRadius { - border-top-left-radius: $Modal-content-borderRadius; - border-top-right-radius: $Modal-content-borderRadius; - } - } - - &-title { - font-size: $Modal-title-fontSize; - color: $Modal-title-color; - } - - &-close { - float: right; - color: $Modal-close-color; - line-height: inherit; + &:hover { text-decoration: none; - vertical-align: middle; + color: $Model-close-onHover-color; svg { - width: $Modal-close-width; - height: $Modal-close-width; - fill: $Modal-close-color; + fill: $Model-close-onHover-color; } + } + } + } - &:not(.is-disabled) { - cursor: pointer; + &-content > &-close { + position: absolute; + right: $gap-md; + top: $gap-sm; + z-index: 10; + } - &:hover { - text-decoration: none; - color: $Model-close-onHover-color; + &-body { + padding: $Modal-body--noHeader-paddingTop $Modal-body-paddingX + $Modal-body-paddingY; + flex-basis: 0; + flex-grow: 1; + } - svg { - fill: $Model-close-onHover-color; - } - } - } + &-header + &-body { + padding-top: $Modal-body-paddingY; + } + + &-footer { + // @include clearfix(); + display: flex; + align-items: center; + justify-content: flex-end; + padding: $Modal-footer-padding; + border-top: $Modal-body-borderBottom; + margin: $Modal-footer-marginY $Modal-footer-marginX; + + @if $Modal-content-borderRadius { + border-bottom-left-radius: $Modal-content-borderRadius; + border-bottom-right-radius: $Modal-content-borderRadius; } - &-content>&-close { - position: absolute; - right: $gap-md; - top: $gap-sm; - z-index: 10; - } - - &-body { - padding: $Modal-body--noHeader-paddingTop $Modal-body-paddingX $Modal-body-paddingY; - flex-basis: 0; - flex-grow: 1; - } - - &-header+&-body { - padding-top: $Modal-body-paddingY; - } - - &-footer { - // @include clearfix(); - display: flex; - align-items: center; - justify-content: flex-end; - padding: $Modal-footer-padding; - border-top: $Modal-body-borderBottom; - margin: $Modal-footer-marginY $Modal-footer-marginX; - - @if $Modal-content-borderRadius { - border-bottom-left-radius: $Modal-content-borderRadius; - border-bottom-right-radius: $Modal-content-borderRadius; - } - - .#{$ns}Button { - margin-left: $gap-sm; - } + .#{$ns}Button { + margin-left: $gap-sm; } + } } @for $i from (2) through 10 { - .#{$ns}Modal--#{$i}th { - .#{$ns}Modal-content { - margin-top: $Modal-content-startMarginTop + ($i - 1) * $Modal-content-stepMarginTop; - } + .#{$ns}Modal--#{$i}th { + .#{$ns}Modal-content { + margin-top: $Modal-content-startMarginTop + + ($i - 1) * + $Modal-content-stepMarginTop; } + } } @include media-breakpoint-up(sm) { - .#{$ns}Modal-content { - max-width: $Modal-widthBase; - } + .#{$ns}Modal-content { + max-width: $Modal-widthBase; + } - .#{$ns}Modal--sm .#{$ns}Modal-content { - max-width: $Modal-widthSm; - } + .#{$ns}Modal--sm .#{$ns}Modal-content { + max-width: $Modal-widthSm; + } - .#{$ns}Modal--base .#{$ns}Modal-content { - max-width: $Modal-widthBase; - } + .#{$ns}Modal--base .#{$ns}Modal-content { + max-width: $Modal-widthBase; + } - .#{$ns}Modal--md .#{$ns}Modal-content { - max-width: $Modal-widthMd; - } + .#{$ns}Modal--md .#{$ns}Modal-content { + max-width: $Modal-widthMd; + } - .#{$ns}Modal--lg .#{$ns}Modal-content { - max-width: $Modal-widthLg; - } + .#{$ns}Modal--lg .#{$ns}Modal-content { + max-width: $Modal-widthLg; + } - .#{$ns}Modal--xl .#{$ns}Modal-content { - max-width: $Modal-widthXl; - } + .#{$ns}Modal--xl .#{$ns}Modal-content { + max-width: $Modal-widthXl; + } } .#{$ns}Dialog-info { - flex-basis: 0; - flex-grow: 1; - text-align: left; + flex-basis: 0; + flex-grow: 1; + text-align: left; } .#{$ns}Dialog-error { - color: $danger; -} \ No newline at end of file + color: $danger; +} diff --git a/scss/components/_nav.scss b/scss/components/_nav.scss index 4128a4bd..709f9cca 100644 --- a/scss/components/_nav.scss +++ b/scss/components/_nav.scss @@ -1,143 +1,143 @@ .#{$ns}Nav { - list-style: none; - margin: 0; - padding: 0; + list-style: none; + margin: 0; + padding: 0; - &--tabs { - border-bottom: $Tabs-borderWidth solid $Tabs-borderColor; + &--tabs { + border-bottom: $Tabs-borderWidth solid $Tabs-borderColor; - .#{$ns}Nav-item { - margin-bottom: -$Tabs-borderWidth; - display: inline-block; + .#{$ns}Nav-item { + margin-bottom: -$Tabs-borderWidth; + display: inline-block; - > a { - font-size: $Tabs-linkFontSize; - display: block; - outline: none; - border: $Tabs-borderWidth solid transparent; - border-top-left-radius: $Tabs-borderRadius; - border-top-right-radius: $Tabs-borderRadius; - color: $Tabs-color; - text-decoration: none; - margin-right: px2rem(2px); - padding: $gap-sm $gap-base; - cursor: pointer; - } + > a { + font-size: $Tabs-linkFontSize; + display: block; + outline: none; + border: $Tabs-borderWidth solid transparent; + border-top-left-radius: $Tabs-borderRadius; + border-top-right-radius: $Tabs-borderRadius; + color: $Tabs-color; + text-decoration: none; + margin-right: px2rem(2px); + padding: $gap-sm $gap-base; + cursor: pointer; + } - &:hover > a, - > a:focus { - border-color: $Tabs-onHover-borderColor; - text-decoration: none; - } + &:hover > a, + > a:focus { + border-color: $Tabs-onHover-borderColor; + text-decoration: none; + } - &.disabled > a, - &.is-disabled > a { - color: $Tabs-onDisabled-color; - background-color: transparent; - border-color: transparent; - pointer-events: none; - } + &.disabled > a, + &.is-disabled > a { + color: $Tabs-onDisabled-color; + background-color: transparent; + border-color: transparent; + pointer-events: none; + } - &.active > a, - &.is-active > a { - color: $Tabs-onActive-color; - background-color: $Tabs-onActive-bg; - border-color: $Tabs-onActive-borderColor; - border-bottom-color: $Tabs-content-bg; - } - } - - .#{$ns}Nav-itemIcon { - margin-right: $gap-xs; - } + &.active > a, + &.is-active > a { + color: $Tabs-onActive-color; + background-color: $Tabs-onActive-bg; + border-color: $Tabs-onActive-borderColor; + border-bottom-color: $Tabs-content-bg; + } } - &--stacked { - .#{$ns}Nav-item { - position: relative; - - > a { - display: block; - outline: none; - color: $Nav-item-color; - text-decoration: none; - padding: $gap-sm $gap-base; - cursor: pointer; - background-color: $Nav-item-bg; - border-radius: $Nav-item-borderRadius; - } - - &:hover > a, - > a:focus { - border-color: $Nav-item-onHover-color; - text-decoration: none; - background-color: $Nav-item-onHover-bg; - } - - &.disabled > a, - &.is-disabled > a { - color: $Nav-item-onDisabled-color; - background-color: transparent; - pointer-events: none; - } - - &.active > a, - &.is-active > a { - color: $Nav-item-onActive-color; - background-color: $Nav-item-onActive-bg; - border-left: $Nav-item-onActive-borderLeft; - padding-left: px2rem(12px); - } - - &.is-unfolded { - .#{$ns}Nav-itemToggler { - transform: rotate(180deg) scale(0.8); - } - - .#{$ns}Nav-subItems { - display: block; - } - } - - .#{$ns}Nav-itemToggler { - position: absolute; - width: px2rem(30px); - height: px2rem(30px); - text-align: center; - line-height: px2rem(30px); - vertical-align: middle; - top: px2rem(4px); - right: px2rem(2px); - cursor: pointer; - transform: scale(0.8); - transition: transform 0.3s; - } - - .#{$ns}Nav-subItems { - display: none; - padding-left: 0; - list-style: none; - } - - .#{$ns}Nav-item { - font-size: $Nav-subItem-fontSize; - - a:before { - content: ""; - display: inline-block; - width: px2rem(4px); - height: px2rem(4px); - background-color: #ccc; - border-radius: px2rem(500px); - margin-right: px2rem(8px); - vertical-align: middle; - } - - &.active > a:before, - &.is-active > a:before { - background-color: $Nav-subItem-onActiveBeforeBg; - } - } - } + .#{$ns}Nav-itemIcon { + margin-right: $gap-xs; } + } + + &--stacked { + .#{$ns}Nav-item { + position: relative; + + > a { + display: block; + outline: none; + color: $Nav-item-color; + text-decoration: none; + padding: $gap-sm $gap-base; + cursor: pointer; + background-color: $Nav-item-bg; + border-radius: $Nav-item-borderRadius; + } + + &:hover > a, + > a:focus { + border-color: $Nav-item-onHover-color; + text-decoration: none; + background-color: $Nav-item-onHover-bg; + } + + &.disabled > a, + &.is-disabled > a { + color: $Nav-item-onDisabled-color; + background-color: transparent; + pointer-events: none; + } + + &.active > a, + &.is-active > a { + color: $Nav-item-onActive-color; + background-color: $Nav-item-onActive-bg; + border-left: $Nav-item-onActive-borderLeft; + padding-left: px2rem(12px); + } + + &.is-unfolded { + .#{$ns}Nav-itemToggler { + transform: rotate(180deg) scale(0.8); + } + + .#{$ns}Nav-subItems { + display: block; + } + } + + .#{$ns}Nav-itemToggler { + position: absolute; + width: px2rem(30px); + height: px2rem(30px); + text-align: center; + line-height: px2rem(30px); + vertical-align: middle; + top: px2rem(4px); + right: px2rem(2px); + cursor: pointer; + transform: scale(0.8); + transition: transform 0.3s; + } + + .#{$ns}Nav-subItems { + display: none; + padding-left: 0; + list-style: none; + } + + .#{$ns}Nav-item { + font-size: $Nav-subItem-fontSize; + + a:before { + content: ''; + display: inline-block; + width: px2rem(4px); + height: px2rem(4px); + background-color: #ccc; + border-radius: px2rem(500px); + margin-right: px2rem(8px); + vertical-align: middle; + } + + &.active > a:before, + &.is-active > a:before { + background-color: $Nav-subItem-onActiveBeforeBg; + } + } + } + } } diff --git a/scss/components/_page.scss b/scss/components/_page.scss index 5f6fd36c..d34a8cff 100644 --- a/scss/components/_page.scss +++ b/scss/components/_page.scss @@ -1,100 +1,100 @@ .#{$ns}Page { - &-header { - padding: $Page-header-paddingY $Page-header-paddingX; + &-header { + padding: $Page-header-paddingY $Page-header-paddingX; + } + + &-main { + background: $Page-main-bg; + } + + &-content { + padding: $Page-content-paddingY $Page-content-paddingX; + } + + &-main > &-header { + border-bottom: $borderWidth solid $borderColor; + } + + &-headerRow { + border-bottom: $borderWidth solid $borderColor; + + display: table; + table-layout: fixed; + width: 100%; + border-spacing: 0; + + .#{$ns}Page-header, + .#{$ns}Page-toolbar { + display: table-cell; + vertical-align: middle; } - &-main { - background: $Page-main-bg; + .#{$ns}Page-toolbar { + text-align: right; + padding-right: $gap-base; } + } - &-content { - padding: $Page-content-paddingY $Page-content-paddingX; - } + &-title { + margin: 0; + padding: 0; + color: $Page-title-color; + line-height: $Page-title-lineHeight; + font-size: $Page-title-fontSize; + font-weight: $Page-title-fontWeight; + } - &-main > &-header { - border-bottom: $borderWidth solid $borderColor; - } + &-body { + padding: $Page-body-padding; + } - &-headerRow { - border-bottom: $borderWidth solid $borderColor; - - display: table; - table-layout: fixed; - width: 100%; - border-spacing: 0; - - .#{$ns}Page-header, - .#{$ns}Page-toolbar { - display: table-cell; - vertical-align: middle; - } - - .#{$ns}Page-toolbar { - text-align: right; - padding-right: $gap-base; - } - } - - &-title { - margin: 0; - padding: 0; - color: $Page-title-color; - line-height: $Page-title-lineHeight; - font-size: $Page-title-fontSize; - font-weight: $Page-title-fontWeight; - } - - &-body { - padding: $Page-body-padding; - } - - &-asideTplWrapper { - padding: $gap-xs; - } + &-asideTplWrapper { + padding: $gap-xs; + } } .#{$ns}Page-toolbar { - .#{$ns}Button + .#{$ns}Button { - margin-left: $gap-xs; - } + .#{$ns}Button + .#{$ns}Button { + margin-left: $gap-xs; + } } .#{$ns}Page-aside { - background-color: $Page-aside-bg; + background-color: $Page-aside-bg; } @include media-breakpoint-up(md) { - .#{$ns}Page-aside { - &::before { - content: ""; - position: absolute; - width: inherit; - top: 0; - bottom: 0; - z-index: -1; - background-color: inherit; - border: inherit; - } - - width: $Page-aside-width; - border-right: $borderWidth solid $borderColor; + .#{$ns}Page-aside { + &::before { + content: ''; + position: absolute; + width: inherit; + top: 0; + bottom: 0; + z-index: -1; + background-color: inherit; + border: inherit; } - - .#{$ns}Page--withSidebar { - display: table; - table-layout: fixed; - width: 100%; - height: 100%; - border-spacing: 0; - - .#{$ns}Page-aside, - .#{$ns}Page-content { - display: table-cell; - vertical-align: top; - } - - .#{$ns}Page-content { - width: 100%; - } + + width: $Page-aside-width; + border-right: $borderWidth solid $borderColor; + } + + .#{$ns}Page--withSidebar { + display: table; + table-layout: fixed; + width: 100%; + height: 100%; + border-spacing: 0; + + .#{$ns}Page-aside, + .#{$ns}Page-content { + display: table-cell; + vertical-align: top; } + + .#{$ns}Page-content { + width: 100%; + } + } } diff --git a/scss/components/_pagination.scss b/scss/components/_pagination.scss index c5d700fb..0bb3111d 100644 --- a/scss/components/_pagination.scss +++ b/scss/components/_pagination.scss @@ -1,123 +1,123 @@ .#{$ns}Pagination { - display: inline-block; - padding-left: 0; - margin-bottom: px2rem(-10px); - border-radius: px2rem(4px); + display: inline-block; + padding-left: 0; + margin-bottom: px2rem(-10px); + border-radius: px2rem(4px); - > li { - display: inline; + > li { + display: inline; - > a, - > span { - user-select: none; - position: relative; - float: left; - text-decoration: none; - min-width: $Pagination-minWidth; - height: $Pagination-height; - border: 0; - line-height: $Pagination-height; - padding: $Pagination-padding; - text-align: center; - color: #666666; - border-radius: 0; - margin-left: 0; - font-size: $Pagination-fontSize; - } - - > a:hover, - > span:hover, - > a:focus, - > span:focus { - background-color: transparent; - color: $primary; - } + > a, + > span { + user-select: none; + position: relative; + float: left; + text-decoration: none; + min-width: $Pagination-minWidth; + height: $Pagination-height; + border: 0; + line-height: $Pagination-height; + padding: $Pagination-padding; + text-align: center; + color: #666666; + border-radius: 0; + margin-left: 0; + font-size: $Pagination-fontSize; } - > li.disabled { - > span, - > a { - cursor: not-allowed; - } + > a:hover, + > span:hover, + > a:focus, + > span:focus { + background-color: transparent; + color: $primary; + } + } - > a, - > span, - > a:hover, - > span:hover, - > a:focus, - > span:focus { - color: #cccccc; - } + > li.disabled { + > span, + > a { + cursor: not-allowed; } - > li.active { - > a, - > span, - > a:hover, - > span:hover, - > a:focus, - > span:focus { - background-color: $Pagination-onActive-backgroundColor; - color: $Pagination-onActive-color; - border: $Pagination-onActive-border; - } + > a, + > span, + > a:hover, + > span:hover, + > a:focus, + > span:focus { + color: #cccccc; + } + } + + > li.active { + > a, + > span, + > a:hover, + > span:hover, + > a:focus, + > span:focus { + background-color: $Pagination-onActive-backgroundColor; + color: $Pagination-onActive-color; + border: $Pagination-onActive-border; + } + } + + &-prev, + &-next { + font-family: $Pagination-arrowVendor; + } + + &-prev { + > span { + cursor: pointer; + + &::before { + content: $Pagination-prevArrowContent; + } + } + } + + &-ellipsis { + > a > span { + position: relative; + top: px2rem(-4px); + } + } + + &-next { + > span { + cursor: pointer; + + &::before { + content: $Pagination-nextArrowContent; + } + } + } + + &-inputGroup { + display: inline-flex; + flex-wrap: nowrap; + + .#{$ns}Pagination-input { + width: px2rem(50px); + height: $Pagination-height; + border: $borderWidth solid $borderColor; + border-top-left-radius: $borderRadius; + border-bottom-left-radius: $borderRadius; + padding: px2rem(5px) px2rem(10px); + + &:focus { + outline: none; + border: $borderWidth solid $primary; + } } - &-prev, - &-next { - font-family: $Pagination-arrowVendor; - } - - &-prev { - > span { - cursor: pointer; - - &::before { - content: $Pagination-prevArrowContent; - } - } - } - - &-ellipsis { - > a > span { - position: relative; - top: px2rem(-4px); - } - } - - &-next { - > span { - cursor: pointer; - - &::before { - content: $Pagination-nextArrowContent; - } - } - } - - &-inputGroup { - display: inline-flex; - flex-wrap: nowrap; - - .#{$ns}Pagination-input { - width: px2rem(50px); - height: $Pagination-height; - border: $borderWidth solid $borderColor; - border-top-left-radius: $borderRadius; - border-bottom-left-radius: $borderRadius; - padding: px2rem(5px) px2rem(10px); - - &:focus { - outline: none; - border: $borderWidth solid $primary; - } - } - - .#{$ns}Button { - height: $Pagination-height; - margin-left: px2rem(-1px); - border-radius: 0 $borderRadius $borderRadius 0; - padding: 0 px2rem(10px); - } + .#{$ns}Button { + height: $Pagination-height; + margin-left: px2rem(-1px); + border-radius: 0 $borderRadius $borderRadius 0; + padding: 0 px2rem(10px); } + } } diff --git a/scss/components/_popover.scss b/scss/components/_popover.scss index e6049943..29c2dab8 100644 --- a/scss/components/_popover.scss +++ b/scss/components/_popover.scss @@ -1,41 +1,41 @@ .#{$ns}PopOver { - position: absolute; - background: $PopOver-bg; + position: absolute; + background: $PopOver-bg; + top: 0; + left: 0; + z-index: $zindex-popover; + display: none; + padding: 0; + margin: 0; + font-weight: $fontWeightNormal; + letter-spacing: normal; + line-height: $lineHeightBase; + text-align: left; + text-align: start; + text-decoration: none; + text-shadow: none; + text-transform: none; + white-space: normal; + word-break: normal; + word-spacing: normal; + word-wrap: normal; + font-size: $fontSizeBase; + box-shadow: $boxShadow; + border: $borderWidth solid $borderColor; + border-radius: $borderRadius; + + & > * { + position: relative; + z-index: 2; + } + + &-overlay { + position: fixed !important; top: 0; left: 0; - z-index: $zindex-popover; - display: none; - padding: 0; - margin: 0; - font-weight: $fontWeightNormal; - letter-spacing: normal; - line-height: $lineHeightBase; - text-align: left; - text-align: start; - text-decoration: none; - text-shadow: none; - text-transform: none; - white-space: normal; - word-break: normal; - word-spacing: normal; - word-wrap: normal; - font-size: $fontSizeBase; - box-shadow: $boxShadow; - border: $borderWidth solid $borderColor; - border-radius: $borderRadius; - - &>* { - position: relative; - z-index: 2; - } - - &-overlay { - position: fixed !important; - top: 0; - left: 0; - right: 0; - z-index: 1; - bottom: 0; - background: transparent; - } -} \ No newline at end of file + right: 0; + z-index: 1; + bottom: 0; + background: transparent; + } +} diff --git a/scss/components/_popoverable.scss b/scss/components/_popoverable.scss index 2cb503f1..11406e2e 100644 --- a/scss/components/_popoverable.scss +++ b/scss/components/_popoverable.scss @@ -1,30 +1,30 @@ .#{$ns}Field-popOverBtn { - color: $PopOverAble-iconColor; - margin-left: $gap-xs; - visibility: hidden; - display: inline-block; - cursor: pointer; + color: $PopOverAble-iconColor; + margin-left: $gap-xs; + visibility: hidden; + display: inline-block; + cursor: pointer; - &:hover { - color: $PopOverAble-onHover-iconColor; - } + &:hover { + color: $PopOverAble-onHover-iconColor; + } } .#{$ns}Field--popOverAble { - outline: none; - position: relative; + outline: none; + position: relative; - &:hover .#{$ns}Field-popOverBtn { - visibility: visible; - } + &:hover .#{$ns}Field-popOverBtn { + visibility: visible; + } } .#{$ns}PopOverAble-popover { - min-width: px2rem(320px); - max-width: px2rem(640px); + min-width: px2rem(320px); + max-width: px2rem(640px); - .#{$ns}Panel { - margin-bottom: 0; - border: none; - } + .#{$ns}Panel { + margin-bottom: 0; + border: none; + } } diff --git a/scss/components/_quick-edit.scss b/scss/components/_quick-edit.scss index 46396f43..4509a12d 100644 --- a/scss/components/_quick-edit.scss +++ b/scss/components/_quick-edit.scss @@ -1,47 +1,47 @@ .#{$ns}Field-quickEditBtn { - color: $QuickEdit-iconColor; - margin-left: $gap-xs; - visibility: hidden; - display: inline-block; - cursor: pointer; + color: $QuickEdit-iconColor; + margin-left: $gap-xs; + visibility: hidden; + display: inline-block; + cursor: pointer; - &:hover { - color: $QuickEdit-onHover-iconColor; - } + &:hover { + color: $QuickEdit-onHover-iconColor; + } } .#{$ns}Field--quickEditable { - outline: none; + outline: none; + position: relative; + + &:focus { position: relative; - &:focus { - position: relative; - - &:after { - content: ""; - left: 0; - top: 0; - right: 0; - bottom: 0; - position: absolute; - pointer-events: none; - z-index: 1; - border: $QuickEdit-onFocus-borderWidth dashed - $QuickEdit-onFocus-borderColor; - } + &:after { + content: ''; + left: 0; + top: 0; + right: 0; + bottom: 0; + position: absolute; + pointer-events: none; + z-index: 1; + border: $QuickEdit-onFocus-borderWidth dashed + $QuickEdit-onFocus-borderColor; } + } - &:hover .#{$ns}Field-quickEditBtn { - visibility: visible; - } + &:hover .#{$ns}Field-quickEditBtn { + visibility: visible; + } } .#{$ns}QuickEdit-popover { - min-width: px2rem(320px); - max-width: px2rem(640px); + min-width: px2rem(320px); + max-width: px2rem(640px); - .#{$ns}Panel { - margin-bottom: 0; - border: none; - } + .#{$ns}Panel { + margin-bottom: 0; + border: none; + } } diff --git a/scss/components/_remark.scss b/scss/components/_remark.scss index 091bfcfe..5db942a8 100644 --- a/scss/components/_remark.scss +++ b/scss/components/_remark.scss @@ -1,23 +1,23 @@ .#{$ns}Remark { - display: inline-block; - margin-left: $Remark-marginLeft; - color: $Remark-iconColor; - font-size: $fontSizeBase; - line-height: 1; - cursor: pointer; - background-color: $Remark-bg; - border: $Remark-borderWidth solid $Remark-borderColor; - text-align: center; - width: $Remark-width; + display: inline-block; + margin-left: $Remark-marginLeft; + color: $Remark-iconColor; + font-size: $fontSizeBase; + line-height: 1; + cursor: pointer; + background-color: $Remark-bg; + border: $Remark-borderWidth solid $Remark-borderColor; + text-align: center; + width: $Remark-width; - &-icon { - color: inherit; - font-size: $Remark-icon-fontSize; - } + &-icon { + color: inherit; + font-size: $Remark-icon-fontSize; + } - &:hover { - color: $Remark-onHover-iconColor; - background-color: $Remark-onHover-bg; - border-color: $Remark-onHover-borderColor; - } + &:hover { + color: $Remark-onHover-iconColor; + background-color: $Remark-onHover-bg; + border-color: $Remark-onHover-borderColor; + } } diff --git a/scss/components/_service.scss b/scss/components/_service.scss index ece3fc2e..6171e450 100644 --- a/scss/components/_service.scss +++ b/scss/components/_service.scss @@ -1,3 +1,3 @@ .#{$ns}Service { - position: relative; + position: relative; } diff --git a/scss/components/_spinner.scss b/scss/components/_spinner.scss index 58d62d47..25e6d3e7 100644 --- a/scss/components/_spinner.scss +++ b/scss/components/_spinner.scss @@ -1,67 +1,67 @@ @keyframes rotate { - 0% { - transform: rotate(0deg); - } + 0% { + transform: rotate(0deg); + } - 100% { - transform: rotate(359deg); - } + 100% { + transform: rotate(359deg); + } } .#{$ns}Spinner-overlay { - position: absolute; - z-index: 10; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: $Spinner-overlay-bg; - transition: ease-out opacity 0.3s; + position: absolute; + z-index: 10; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: $Spinner-overlay-bg; + transition: ease-out opacity 0.3s; - opacity: 0; + opacity: 0; - &.in { - opacity: 1; - } + &.in { + opacity: 1; + } } .#{$ns}Spinner { - width: $Spinner-width; - height: $Spinner-height; - transform: translateZ(0); - display: inline-block; - background: $Spinner-bg; - background-size: 100%; + width: $Spinner-width; + height: $Spinner-height; + transform: translateZ(0); + display: inline-block; + background: $Spinner-bg; + background-size: 100%; - &--lg { - width: $Spinner--lg-width; - height: $Spinner--lg-height; - } + &--lg { + width: $Spinner--lg-width; + height: $Spinner--lg-height; + } - transition: ease-out all 0.3s; + transition: ease-out all 0.3s; } // 当启用 overlay 的时候，应该是居中模式。 .#{$ns}Spinner--overlay { - position: absolute; - z-index: 11; - top: 50%; - left: 50%; - transform: translate3d(-50%, -50%, 0); + position: absolute; + z-index: 11; + top: 50%; + left: 50%; + transform: translate3d(-50%, -50%, 0); } .#{$ns}Spinner--overlay.#{$ns}Spinner--lg { - width: $Spinner--lg-width; - height: $Spinner--lg-height; - line-height: $Spinner--lg-height; + width: $Spinner--lg-width; + height: $Spinner--lg-height; + line-height: $Spinner--lg-height; } @include media-breakpoint-up(md) { - .#{$ns}Layout .#{$ns}Page-body>.#{$ns}Spinner-overlay { - left: $Layout-aside-width; - } + .#{$ns}Layout .#{$ns}Page-body > .#{$ns}Spinner-overlay { + left: $Layout-aside-width; + } - .#{$ns}Layout--folded .#{$ns}Page-body>.#{$ns}Spinner-overlay { - left: $Layout-aside--folded-width; - } -} \ No newline at end of file + .#{$ns}Layout--folded .#{$ns}Page-body > .#{$ns}Spinner-overlay { + left: $Layout-aside--folded-width; + } +} diff --git a/scss/components/_status.scss b/scss/components/_status.scss index f95014b0..5816a6a0 100644 --- a/scss/components/_status.scss +++ b/scss/components/_status.scss @@ -1,127 +1,127 @@ .#{$ns}StatusField { - white-space: nowrap; + white-space: nowrap; - &-label { - font-size: $fontSizeSm; - margin-left: $gap-sm; + &-label { + font-size: $fontSizeSm; + margin-left: $gap-sm; + } + + @keyframes animation-rolling_red { + 0% { + left: 0; } - @keyframes animation-rolling_red { - 0% { - left: 0; - } - - 50% { - left: px2rem(13px); - } - - 100% { - left: 0; - } + 50% { + left: px2rem(13px); } - @keyframes animation-rolling_blue { - 0% { - left: $gap-sm + $gap-base; - } + 100% { + left: 0; + } + } - 50% { - left: px2rem(12px); - } - - 100% { - left: $gap-sm + $gap-base; - } + @keyframes animation-rolling_blue { + 0% { + left: $gap-sm + $gap-base; } - .#{$ns}Status-icon { - &--danger, - &--primary, - &--rolling, - &--success, - &--warning { - &::before { - font-family: "iconfont"; - content: "\e632"; - font-style: normal; - } - } - - &--rolling { - color: $warning; - position: relative; - left: $gap-md; - - &::before { - font-size: inherit; - color: $danger; - position: absolute; - left: 0; - top: px2rem(1px); - margin-left: px2rem(-27px); - animation: animation-rolling_red 2s; - animation-iteration-count: infinite; - } - - &::after { - font-family: "iconfont"; - content: "\e632"; - font-style: normal; - font-size: inherit; - color: $primary; - position: absolute; - left: $gap-sm + $gap-base; - top: px2rem(1px); - margin-left: px2rem(-39px); - animation: animation-rolling_blue 2s; - animation-iteration-count: infinite; - } - } - - &--success { - &::before { - color: $success; - } - } - - &--danger { - &::before { - color: $danger; - } - } - - &--warning { - &::before { - color: $warning; - } - } - - &--primary { - &::before { - color: $primary; - } - } + 50% { + left: px2rem(12px); } - .#{$ns}Status-icon--rolling + &-label { - color: $warning; - position: relative; - left: $gap-md; + 100% { + left: $gap-sm + $gap-base; + } + } + + .#{$ns}Status-icon { + &--danger, + &--primary, + &--rolling, + &--success, + &--warning { + &::before { + font-family: 'iconfont'; + content: '\e632'; + font-style: normal; + } } - .#{$ns}Status-icon--success + &-label { - color: $success; - } + &--rolling { + color: $warning; + position: relative; + left: $gap-md; - .#{$ns}Status-icon--danger + &-label { + &::before { + font-size: inherit; color: $danger; - } + position: absolute; + left: 0; + top: px2rem(1px); + margin-left: px2rem(-27px); + animation: animation-rolling_red 2s; + animation-iteration-count: infinite; + } - .#{$ns}Status-icon--warning + &-label { - color: $warning; - } - - .#{$ns}Status-icon--primary + &-label { + &::after { + font-family: 'iconfont'; + content: '\e632'; + font-style: normal; + font-size: inherit; color: $primary; + position: absolute; + left: $gap-sm + $gap-base; + top: px2rem(1px); + margin-left: px2rem(-39px); + animation: animation-rolling_blue 2s; + animation-iteration-count: infinite; + } } + + &--success { + &::before { + color: $success; + } + } + + &--danger { + &::before { + color: $danger; + } + } + + &--warning { + &::before { + color: $warning; + } + } + + &--primary { + &::before { + color: $primary; + } + } + } + + .#{$ns}Status-icon--rolling + &-label { + color: $warning; + position: relative; + left: $gap-md; + } + + .#{$ns}Status-icon--success + &-label { + color: $success; + } + + .#{$ns}Status-icon--danger + &-label { + color: $danger; + } + + .#{$ns}Status-icon--warning + &-label { + color: $warning; + } + + .#{$ns}Status-icon--primary + &-label { + color: $primary; + } } diff --git a/scss/components/_table.scss b/scss/components/_table.scss index 1d14d675..f1be9078 100644 --- a/scss/components/_table.scss +++ b/scss/components/_table.scss @@ -1,683 +1,680 @@ .#{$ns}Table { - position: relative; + position: relative; + background: $Table-bg; + border: $Table-borderWidth solid $Table-borderColor; + border-radius: $Table-borderRadius; + margin-bottom: $gap-md; + + &-fixedLeft, + &-fixedRight { + position: absolute; background: $Table-bg; - border: $Table-borderWidth solid $Table-borderColor; - border-radius: $Table-borderRadius; - margin-bottom: $gap-md; + z-index: $zindex-affix - 10; + top: -999999px; - &-fixedLeft, - &-fixedRight { - position: absolute; - background: $Table-bg; - z-index: $zindex-affix - 10; - top: -999999px; + &.in { + top: auto; + } + } - &.in { - top: auto; - } + &-fixedLeft { + box-shadow: $Table-fixedLeft-boxShadow; + left: 0; + } + + &-fixedRight { + box-shadow: $Table-fixedRight-boxShadow; + right: 0; + } + + &-fixedTop { + position: absolute; + background: $Table-bg; + z-index: -1; + opacity: 0; + box-shadow: $Table-fixedTop-boxShadow; + + &.in { + position: fixed; + opacity: 1; + z-index: $zindex-affix; } - &-fixedLeft { - box-shadow: $Table-fixedLeft-boxShadow; - left: 0; + > .#{$ns}Table-fixedLeft, + > .#{$ns}Table-fixedRight { + z-index: $zindex-affix + 10; + // box-shadow: none; + background: transparent; + border-top: $Table-borderWidth solid $Table-borderColor; + + > table { + margin-bottom: px2rem(5px); + } } - &-fixedRight { - box-shadow: $Table-fixedRight-boxShadow; - right: 0; + > .#{$ns}Table-wrapper { + border-top: $Table-borderWidth solid $Table-borderColor; + } + } + + &-heading { + background: $Table-heading-bg; + border-bottom: $Table-borderWidth solid $Table-borderColor; + padding: ($Table-heading-height - $Table-fontSize * $lineHeightBase) / 2 + $Table-toolbar-paddingX; + } + + &--unsaved &-heading { + background: $Table--unsaved-heading-bg; + color: $Table--unsaved-heading-color; + } + + &-wrapper { + overflow: hidden; + } + + &-placeholder { + color: $text--muted-color; + text-align: center; + height: $Table-placeholder-height; + background-color: transparent !important; + + &:hover { + color: $text--muted-color; + background-color: transparent !important; } - &-fixedTop { - position: absolute; - background: $Table-bg; - z-index: -1; - opacity: 0; - box-shadow: $Table-fixedTop-boxShadow; + > td { + vertical-align: middle !important; + text-align: center; + } + } - &.in { - position: fixed; - opacity: 1; - z-index: $zindex-affix; + &-header { + padding: $Table-toolbar-paddingY $Table-toolbar-paddingX; + + > * + .#{$ns}Button, + > * + .#{$ns}ButtonGroup, + > * + .#{$ns}ButtonToolbar { + margin-left: $Crud-toolbar-gap; + } + } + + &-toolbar { + @include clearfix(); + display: flex; + padding: $Table-toolbar-paddingY $Table-toolbar-paddingX; + } + + &-header + &-toolbar { + padding-top: 0; + } + + &-contentWrap { + position: relative; + } + + &-header + &-contentWrap, + &-toolbar + &-contentWrap { + border-top: $Table-borderWidth solid $Table-borderColor; + } + + &-footToolbar { + border-top: $Table-borderWidth solid $Table-borderColor; + } + + &-actions { + display: inline-block; + + > * { + margin-right: $Crud-toolbar-gap; + } + } + + &-content { + min-height: 0.01%; + overflow-x: auto; + transform: translateZ(0); + } + + &-table { + width: 100%; + max-width: 100%; + margin-bottom: 0; + font-size: $Table-fontSize; + color: $Table-color; + background-color: $Table-bg; + + &--withCombine { + > thead > tr > th, + > tbody > tr > td { + &:first-child { + padding-left: $TableCell-paddingX !important; } - >.#{$ns}Table-fixedLeft, - >.#{$ns}Table-fixedRight { - z-index: $zindex-affix + 10; - // box-shadow: none; - background: transparent; - border-top: $Table-borderWidth solid $Table-borderColor; - - >table { - margin-bottom: px2rem(5px); - } + &:last-child { + padding-right: $TableCell-paddingX !important; } + } - >.#{$ns}Table-wrapper { - border-top: $Table-borderWidth solid $Table-borderColor; + // reset + > tbody > tr { + @if $Table-strip-bg !=transparent { + &.#{$ns}Table-tr--odd { + background-color: transparent; + } } - } - - &-heading { - background: $Table-heading-bg; - border-bottom: $Table-borderWidth solid $Table-borderColor; - padding: ($Table-heading-height - $Table-fontSize * $lineHeightBase) / 2 $Table-toolbar-paddingX; - } - - &--unsaved &-heading { - background: $Table--unsaved-heading-bg; - color: $Table--unsaved-heading-color; - } - - &-wrapper { - overflow: hidden; - } - - &-placeholder { - color: $text--muted-color; - text-align: center; - height: $Table-placeholder-height; - background-color: transparent !important; &:hover { - color: $text--muted-color; - background-color: transparent !important; + background-color: transparent; } - >td { - vertical-align: middle !important; - text-align: center; + > td { + vertical-align: middle; } + + > td:not(:last-child) { + border-right: $Table-borderWidth solid $Table-borderColor; + } + } } - &-header { - padding: $Table-toolbar-paddingY $Table-toolbar-paddingX; + > thead > tr { + background-color: $Table-thead-bg; - >*+.#{$ns}Button, - >*+.#{$ns}ButtonGroup, - >*+.#{$ns}ButtonToolbar { - margin-left: $Crud-toolbar-gap; - } - } - - &-toolbar { - @include clearfix(); - display: flex; - padding: $Table-toolbar-paddingY $Table-toolbar-paddingX; - } - - &-header+&-toolbar { - padding-top: 0; - } - - &-contentWrap { - position: relative; - } - - &-header+&-contentWrap, - &-toolbar+&-contentWrap { - border-top: $Table-borderWidth solid $Table-borderColor; - } - - &-footToolbar { - border-top: $Table-borderWidth solid $Table-borderColor; - } - - &-actions { - display: inline-block; - - >* { - margin-right: $Crud-toolbar-gap; - } - } - - &-content { - min-height: 0.01%; - overflow-x: auto; - transform: translateZ(0); - } - - &-table { - width: 100%; - max-width: 100%; - margin-bottom: 0; - font-size: $Table-fontSize; - color: $Table-color; - background-color: $Table-bg; - - &--withCombine { - - >thead>tr>th, - >tbody>tr>td { - &:first-child { - padding-left: $TableCell-paddingX !important; - } - - &:last-child { - padding-right: $TableCell-paddingX !important; - } - } - - // reset - >tbody>tr { - @if $Table-strip-bg !=transparent { - &.#{$ns}Table-tr--odd { - background-color: transparent; - } - } - - &:hover { - background-color: transparent; - } - - >td { - vertical-align: middle; - } - - >td:not(:last-child) { - border-right: $Table-borderWidth solid $Table-borderColor; - } - } + > th { + &[colspan] { + text-align: center; } - >thead>tr { - background-color: $Table-thead-bg; + padding: $TableCell-paddingY $TableCell-paddingX; - >th { - &[colspan] { - text-align: center; - } - - padding: $TableCell-paddingY $TableCell-paddingX; - - &:first-child { - padding-left: $TableCell--edge-paddingX; - } - - &:last-child { - padding-right: $TableCell--edge-paddingX; - } - - &:not(:last-child) { - border-right: $Table-thead-borderWidth solid $Table-thead-borderColor; - } - - font-size: $Table-thead-fontSize; - color: $Table-thead-color; - font-weight: $fontWeightNormal; - white-space: nowrap; - - .#{$ns}Remark { - margin-left: $gap-xs; - } - } + &:first-child { + padding-left: $TableCell--edge-paddingX; } - >thead>tr+tr { - border-top: $Table-borderWidth solid $Table-borderColor; + &:last-child { + padding-right: $TableCell--edge-paddingX; } - >tbody>tr { - border-top: $Table-borderWidth solid $Table-borderColor; - - >td { - padding: $TableCell-paddingY $TableCell-paddingX; - vertical-align: top; - - &:first-child { - padding-left: $TableCell--edge-paddingX; - } - - &:last-child { - padding-right: $TableCell--edge-paddingX; - } - } - - @if $Table-strip-bg !=transparent { - background-color: transparent; - - &.#{$ns}Table-tr--odd { - background-color: $Table-strip-bg; - } - } - - &:hover, - &.is-hovered { - background-color: $Table-onHover-bg; - border-color: $Table-onHover-borderColor; - color: $Table-onHover-color; - - &+tr { - border-color: $Table-onHover-borderColor; - } - } - - &.is-checked { - background-color: $Table-onChecked-bg; - border-color: $Table-onChecked-borderColor; - color: $Table-onChecked-color; - - &+tr { - border-color: $Table-onChecked-borderColor; - } - - &:hover, - &.is-hovered { - background-color: $Table-onChecked-onHover-bg; - border-color: $Table-onChecked-onHover-borderColor; - color: $Table-onChecked-onHover-color; - - &+tr { - border-color: $Table-onChecked-onHover-borderColor; - } - } - } - - &.is-moved, - &.is-modified { - background-color: $Table-onModified-bg; - border-color: $Table-onModified-borderColor; - color: $Table-onModified-color; - - &+tr { - border-color: $Table-onModified-borderColor; - } - - &:hover, - &.is-hovered { - background-color: $Table-onModified-onHover-bg; - border-color: $Table-onModified-onHover-borderColor; - color: $Table-onModified-onHover-color; - - &+tr { - border-color: $Table-onModified-onHover-borderColor; - } - } - } - - &.is-dragging { - opacity: $Table-onDragging-opacity; - } + &:not(:last-child) { + border-right: $Table-thead-borderWidth solid $Table-thead-borderColor; } - @for $i from 2 through 10 { - tr.#{$ns}Table-tr--#{$i}th.is-expanded { - .#{$ns}Table-expandCell:before { - right: px2rem(9px) + px2rem(-20px) * ($i - 1); - } - } - - tr.#{$ns}Table-tr--#{$i}th { - .#{$ns}Table-expandBtn { - position: relative; - right: - px2rem(20px) * ($i - 1); - } - - .#{$ns}Table-expandCell+td { - position: relative; - - &::before { - content: ''; - position: absolute; - width: px2rem(1px); - top: 0; - bottom: 0; - left: px2rem(-10px) + px2rem(20px) * ($i - 2); - height: auto; - background-color: $Table-tree-borderColor; - } - - &::after { - content: ''; - position: absolute; - height: px2rem(1px); - top: px2rem(20px); - left: px2rem(-10px) + px2rem(20px) * ($i - 2); - width: px2rem(10px); - background-color: $Table-tree-borderColor; - } - - padding-left: px2rem(20px) * $i - px2rem(20px); - } - } - - tr.#{$ns}Table-tr--#{$i}th.is-expandable { - .#{$ns}Table-expandCell+td { - padding-left: px2rem(20px) * ($i - 1); - } - } - - - tr.#{$ns}Table-tr--#{$i}th.is-last:not(.is-expanded) { - .#{$ns}Table-expandCell+td { - &::before { - height: px2rem(20px); - bottom: auto; - } - } - } - - - } - - >thead>tr>th.#{$ns}Table-checkCell, - >tbody>tr>td.#{$ns}Table-checkCell { - border-right: 0; - width: px2rem(1px); - - .#{$ns}Checkbox { - margin: 0; - } - } - - >thead>tr>th.#{$ns}Table-expandCell, - >tbody>tr>td.#{$ns}Table-expandCell { - border-right: 0; - width: px2rem(1px); - padding-right: 0; - } - - >thead>tr>th.#{$ns}Table-dragCell, - >tbody>tr>td.#{$ns}Table-dragCell { - border-right: 0; - width: px2rem(1px); - padding-right: 0; - } - - >tbody>tr>td.#{$ns}Table-expandCell { - position: relative; - - @for $i from 1 through 7 { - .#{$ns}Table-divider-#{$i} { - position: absolute; - width: px2rem(1px); - top: 0; - bottom: 0; - height: 100%; - background-color: $Table-tree-borderColor; - right: px2rem(9px) + px2rem(-20px) * ($i - 1); - } - } - } - - >tbody>tr.is-expanded>td.#{$ns}Table-expandCell { - // position: relative; - - &::before { - content: ''; - position: absolute; - width: px2rem(1px); - top: px2rem(30px); - bottom: 0; - right: px2rem(9px); - height: auto; - background-color: $Table-tree-borderColor; - } - } - - >thead>tr>th.#{$ns}TableCell--sortable { - padding-right: $TableCell-paddingX + $TableCell-sortBtn-width; - position: relative; - } - - >thead>tr>th.#{$ns}TableCell--searchable { - padding-right: $TableCell-paddingX + $TableCell-searchBtn-width; - position: relative; - } - - >thead>tr>th.#{$ns}TableCell--filterable { - padding-right: $TableCell-paddingX + $TableCell-filterBtn-width; - position: relative; - } - - - } - - &Cell-sortBtn { - cursor: pointer; - width: $TableCell-sortBtn-width; - position: absolute; - right: $TableCell-paddingX - $TableCell-sortBtn-width / 2; - color: $Table-thead-iconColor; - - &--up:before { - display: inline-block; - content: $TableCell-sortBtn--up-icon; - font-family: $TableCell-sortBtn--up-iconVendor; - } - - &--down:before { - display: inline-block; - content: $TableCell-sortBtn--down-icon; - font-family: $TableCell-sortBtn--down-iconVendor; - } - - &--default:before { - display: inline-block; - content: $TableCell-sortBtn--default-icon; - font-family: $TableCell-sortBtn--default-iconVendor; - } - - &--up, - &--down { - display: none; - position: relative; - z-index: 2; - font-style: normal; - - &.is-active { - display: inline-block; - } - } - - &--default { - font-style: normal; - position: absolute; - z-index: 1; - display: inline-block; - opacity: $TableCell-sortBtn--default-opacity; - top: 0; - left: 0; - - &.is-active { - opacity: $TableCell-sortBtn--default-onActive-opacity; - } - } - } - - &Cell-searchBtn { - cursor: pointer; - width: $TableCell-searchBtn-width; - position: absolute; - right: $TableCell-paddingX - $TableCell-searchBtn-width / 2; - color: $text--muted-color; - - &:hover { - color: $text-color; - } - } - - &Cell-searchPopOver { - border: none; - min-width: px2rem(320px); - max-width: px2rem(640px); - - .#{$ns}Panel { - margin: 0; - } - } - - &Cell-filterBtn { - cursor: pointer; - width: $TableCell-filterBtn-width; - position: absolute; - right: $TableCell-paddingX - $TableCell-filterBtn-width / 2; - color: $text--muted-color; - - &:hover { - color: $text-color; - } + font-size: $Table-thead-fontSize; + color: $Table-thead-color; + font-weight: $fontWeightNormal; + white-space: nowrap; .#{$ns}Remark { - display: inline; + margin-left: $gap-xs; } + } } - &Cell-filterPopOver { - border: none; - width: px2rem(160px); + > thead > tr + tr { + border-top: $Table-borderWidth solid $Table-borderColor; + } - .#{$ns}DropDown-menu { - margin: 0; - padding: 0; - border-radius: 0; + > tbody > tr { + border-top: $Table-borderWidth solid $Table-borderColor; - .#{$ns}DropDown-divider { - height: $TableCell-filterPopOver-dropDownItem-height; - line-height: $TableCell-filterPopOver-dropDownItem-height; - padding: $TableCell-filterPopOver-dropDownItem-padding; - background-color: $white; - margin: 0; + > td { + padding: $TableCell-paddingY $TableCell-paddingX; + vertical-align: top; - &:hover { - background-color: $light; - color: $primary; - } - - &.is-selected { - background-color: $light; - color: $primary; - } - - .#{$ns}Checkbox { - width: 100%; - margin: 0; - } - } + &:first-child { + padding-left: $TableCell--edge-paddingX; } + + &:last-child { + padding-right: $TableCell--edge-paddingX; + } + } + + @if $Table-strip-bg !=transparent { + background-color: transparent; + + &.#{$ns}Table-tr--odd { + background-color: $Table-strip-bg; + } + } + + &:hover, + &.is-hovered { + background-color: $Table-onHover-bg; + border-color: $Table-onHover-borderColor; + color: $Table-onHover-color; + + & + tr { + border-color: $Table-onHover-borderColor; + } + } + + &.is-checked { + background-color: $Table-onChecked-bg; + border-color: $Table-onChecked-borderColor; + color: $Table-onChecked-color; + + & + tr { + border-color: $Table-onChecked-borderColor; + } + + &:hover, + &.is-hovered { + background-color: $Table-onChecked-onHover-bg; + border-color: $Table-onChecked-onHover-borderColor; + color: $Table-onChecked-onHover-color; + + & + tr { + border-color: $Table-onChecked-onHover-borderColor; + } + } + } + + &.is-moved, + &.is-modified { + background-color: $Table-onModified-bg; + border-color: $Table-onModified-borderColor; + color: $Table-onModified-color; + + & + tr { + border-color: $Table-onModified-borderColor; + } + + &:hover, + &.is-hovered { + background-color: $Table-onModified-onHover-bg; + border-color: $Table-onModified-onHover-borderColor; + color: $Table-onModified-onHover-color; + + & + tr { + border-color: $Table-onModified-onHover-borderColor; + } + } + } + + &.is-dragging { + opacity: $Table-onDragging-opacity; + } } - &-itemActions-wrap { - position: absolute; - width: 100%; - left: 0; - top: 0; - min-height: 30px; - pointer-events: none; - box-shadow: $Table-onHover-boxShadow; + @for $i from 2 through 10 { + tr.#{$ns}Table-tr--#{$i}th.is-expanded { + .#{$ns}Table-expandCell:before { + right: px2rem(9px) + px2rem(-20px) * ($i - 1); + } + } + + tr.#{$ns}Table-tr--#{$i}th { + .#{$ns}Table-expandBtn { + position: relative; + right: -px2rem(20px) * ($i - 1); + } + + .#{$ns}Table-expandCell + td { + position: relative; + + &::before { + content: ''; + position: absolute; + width: px2rem(1px); + top: 0; + bottom: 0; + left: px2rem(-10px) + px2rem(20px) * ($i - 2); + height: auto; + background-color: $Table-tree-borderColor; + } + + &::after { + content: ''; + position: absolute; + height: px2rem(1px); + top: px2rem(20px); + left: px2rem(-10px) + px2rem(20px) * ($i - 2); + width: px2rem(10px); + background-color: $Table-tree-borderColor; + } + + padding-left: px2rem(20px) * $i - px2rem(20px); + } + } + + tr.#{$ns}Table-tr--#{$i}th.is-expandable { + .#{$ns}Table-expandCell + td { + padding-left: px2rem(20px) * ($i - 1); + } + } + + tr.#{$ns}Table-tr--#{$i}th.is-last:not(.is-expanded) { + .#{$ns}Table-expandCell + td { + &::before { + height: px2rem(20px); + bottom: auto; + } + } + } } - &-itemActions { - pointer-events: all; + > thead > tr > th.#{$ns}Table-checkCell, + > tbody > tr > td.#{$ns}Table-checkCell { + border-right: 0; + width: px2rem(1px); + + .#{$ns}Checkbox { + margin: 0; + } + } + + > thead > tr > th.#{$ns}Table-expandCell, + > tbody > tr > td.#{$ns}Table-expandCell { + border-right: 0; + width: px2rem(1px); + padding-right: 0; + } + + > thead > tr > th.#{$ns}Table-dragCell, + > tbody > tr > td.#{$ns}Table-dragCell { + border-right: 0; + width: px2rem(1px); + padding-right: 0; + } + + > tbody > tr > td.#{$ns}Table-expandCell { + position: relative; + + @for $i from 1 through 7 { + .#{$ns}Table-divider-#{$i} { + position: absolute; + width: px2rem(1px); + top: 0; + bottom: 0; + height: 100%; + background-color: $Table-tree-borderColor; + right: px2rem(9px) + px2rem(-20px) * ($i - 1); + } + } + } + + > tbody > tr.is-expanded > td.#{$ns}Table-expandCell { + // position: relative; + + &::before { + content: ''; position: absolute; - // background: $Table-onHover-bg; - background: linear-gradient(90deg, - rgba($Table-onHover-bg, 0) 0%, - rgba($Table-onHover-bg, 1) 20%, - rgba($Table-onHover-bg, 1) 100%); - top: $Table-borderWidth; + width: px2rem(1px); + top: px2rem(30px); bottom: 0; - right: 0; - padding-left: px2rem(50px); - padding-right: $TableCell-paddingX; - display: flex; - align-items: center; - - a { - cursor: pointer; - padding: $gap-xs $gap-sm; - color: $link-color; - text-decoration: $link-decoration; - - &:hover { - color: $link-onHover-color; - text-decoration: $link-onHover-decoration; - } - - &.is-disabled { - pointer-events: none; - opacity: $Button-onDisabled-opacity; - color: $text--muted-color; - } - } + right: px2rem(9px); + height: auto; + background-color: $Table-tree-borderColor; + } } - &-dragTip { - color: $text--loud-color; - clear: both; - margin-top: $gap-xs; + > thead > tr > th.#{$ns}TableCell--sortable { + padding-right: $TableCell-paddingX + $TableCell-sortBtn-width; + position: relative; } - &-footTable { - position: relative; - width: 100%; - border-spacing: 0; - border-collapse: collapse; - margin-bottom: 0; - background: transparent; - - >tbody>tr>th { - width: px2rem(120px); - text-align: right; - padding: $TableCell-paddingY $TableCell-paddingX; - } - - >tbody>tr>td { - word-break: break-all; - padding: $TableCell-paddingY $TableCell-paddingX; - } - - >tbody>tr:not(:first-child) { - border-top: $Table-borderWidth solid lighten($Table-thead-borderColor, 2.5%); - } + > thead > tr > th.#{$ns}TableCell--searchable { + padding-right: $TableCell-paddingX + $TableCell-searchBtn-width; + position: relative; } + > thead > tr > th.#{$ns}TableCell--filterable { + padding-right: $TableCell-paddingX + $TableCell-filterBtn-width; + position: relative; + } + } - &-expandBtn { - position: relative; - z-index: 1; + &Cell-sortBtn { + cursor: pointer; + width: $TableCell-sortBtn-width; + position: absolute; + right: $TableCell-paddingX - $TableCell-sortBtn-width / 2; + color: $Table-thead-iconColor; - >i { - display: inline-block; - width: px2rem(16px); - text-align: center; - cursor: pointer; - font-style: normal; - - &:before { - display: inline-block; - line-height: 1.0; - font-size: $Table-expandBtn-fontSize; - color: $Table-expandBtn-color; - font-family: $Table-expandBtn-vendor; - content: $Table-expandBtn-icon; - transition: transform ease-in-out 0.2s; - } - } - - &.is-active>i::before { - transform: rotate(90deg); - transform-origin: 50% 50%; - } + &--up:before { + display: inline-block; + content: $TableCell-sortBtn--up-icon; + font-family: $TableCell-sortBtn--up-iconVendor; } - &-dragBtn { - margin-right: $gap-xs; + &--down:before { + display: inline-block; + content: $TableCell-sortBtn--down-icon; + font-family: $TableCell-sortBtn--down-iconVendor; + } + + &--default:before { + display: inline-block; + content: $TableCell-sortBtn--default-icon; + font-family: $TableCell-sortBtn--default-iconVendor; + } + + &--up, + &--down { + display: none; + position: relative; + z-index: 2; + font-style: normal; + + &.is-active { display: inline-block; - visibility: hidden; - cursor: move; + } } - &-table>tbody>tr:hover .#{$ns}Table-dragBtn, - &-table>tbody>tr.is-dragging .#{$ns}Table-dragBtn, - &-table>tbody>tr.is-drop-allowed .#{$ns}Table-dragBtn { - visibility: visible; + &--default { + font-style: normal; + position: absolute; + z-index: 1; + display: inline-block; + opacity: $TableCell-sortBtn--default-opacity; + top: 0; + left: 0; + + &.is-active { + opacity: $TableCell-sortBtn--default-onActive-opacity; + } } + } + + &Cell-searchBtn { + cursor: pointer; + width: $TableCell-searchBtn-width; + position: absolute; + right: $TableCell-paddingX - $TableCell-searchBtn-width / 2; + color: $text--muted-color; + + &:hover { + color: $text-color; + } + } + + &Cell-searchPopOver { + border: none; + min-width: px2rem(320px); + max-width: px2rem(640px); + + .#{$ns}Panel { + margin: 0; + } + } + + &Cell-filterBtn { + cursor: pointer; + width: $TableCell-filterBtn-width; + position: absolute; + right: $TableCell-paddingX - $TableCell-filterBtn-width / 2; + color: $text--muted-color; + + &:hover { + color: $text-color; + } + + .#{$ns}Remark { + display: inline; + } + } + + &Cell-filterPopOver { + border: none; + width: px2rem(160px); + + .#{$ns}DropDown-menu { + margin: 0; + padding: 0; + border-radius: 0; + + .#{$ns}DropDown-divider { + height: $TableCell-filterPopOver-dropDownItem-height; + line-height: $TableCell-filterPopOver-dropDownItem-height; + padding: $TableCell-filterPopOver-dropDownItem-padding; + background-color: $white; + margin: 0; + + &:hover { + background-color: $light; + color: $primary; + } + + &.is-selected { + background-color: $light; + color: $primary; + } + + .#{$ns}Checkbox { + width: 100%; + margin: 0; + } + } + } + } + + &-itemActions-wrap { + position: absolute; + width: 100%; + left: 0; + top: 0; + min-height: 30px; + pointer-events: none; + box-shadow: $Table-onHover-boxShadow; + } + + &-itemActions { + pointer-events: all; + position: absolute; + // background: $Table-onHover-bg; + background: linear-gradient( + 90deg, + rgba($Table-onHover-bg, 0) 0%, + rgba($Table-onHover-bg, 1) 20%, + rgba($Table-onHover-bg, 1) 100% + ); + top: $Table-borderWidth; + bottom: 0; + right: 0; + padding-left: px2rem(50px); + padding-right: $TableCell-paddingX; + display: flex; + align-items: center; + + a { + cursor: pointer; + padding: $gap-xs $gap-sm; + color: $link-color; + text-decoration: $link-decoration; + + &:hover { + color: $link-onHover-color; + text-decoration: $link-onHover-decoration; + } + + &.is-disabled { + pointer-events: none; + opacity: $Button-onDisabled-opacity; + color: $text--muted-color; + } + } + } + + &-dragTip { + color: $text--loud-color; + clear: both; + margin-top: $gap-xs; + } + + &-footTable { + position: relative; + width: 100%; + border-spacing: 0; + border-collapse: collapse; + margin-bottom: 0; + background: transparent; + + > tbody > tr > th { + width: px2rem(120px); + text-align: right; + padding: $TableCell-paddingY $TableCell-paddingX; + } + + > tbody > tr > td { + word-break: break-all; + padding: $TableCell-paddingY $TableCell-paddingX; + } + + > tbody > tr:not(:first-child) { + border-top: $Table-borderWidth solid + lighten($Table-thead-borderColor, 2.5%); + } + } + + &-expandBtn { + position: relative; + z-index: 1; + + > i { + display: inline-block; + width: px2rem(16px); + text-align: center; + cursor: pointer; + font-style: normal; + + &:before { + display: inline-block; + line-height: 1; + font-size: $Table-expandBtn-fontSize; + color: $Table-expandBtn-color; + font-family: $Table-expandBtn-vendor; + content: $Table-expandBtn-icon; + transition: transform ease-in-out 0.2s; + } + } + + &.is-active > i::before { + transform: rotate(90deg); + transform-origin: 50% 50%; + } + } + + &-dragBtn { + margin-right: $gap-xs; + display: inline-block; + visibility: hidden; + cursor: move; + } + + &-table > tbody > tr:hover .#{$ns}Table-dragBtn, + &-table > tbody > tr.is-dragging .#{$ns}Table-dragBtn, + &-table > tbody > tr.is-drop-allowed .#{$ns}Table-dragBtn { + visibility: visible; + } } .#{$ns}OperationField { - margin: px2rem(-3px); + margin: px2rem(-3px); - >.#{$ns}Button { - margin: px2rem(3px); - } -} \ No newline at end of file + > .#{$ns}Button { + margin: px2rem(3px); + } +} diff --git a/scss/components/_tabs.scss b/scss/components/_tabs.scss index 5d6b1372..817e6272 100644 --- a/scss/components/_tabs.scss +++ b/scss/components/_tabs.scss @@ -1,270 +1,265 @@ .#{$ns}Tabs { - &-links { - border-bottom: $Tabs-borderWidth solid $Tabs-borderColor; - padding-left: 0; - margin-bottom: 0; - list-style: none; + &-links { + border-bottom: $Tabs-borderWidth solid $Tabs-borderColor; + padding-left: 0; + margin-bottom: 0; + list-style: none; - &::before { - display: table; - content: ' '; - } - - >.#{$ns}Tabs-link { - margin-bottom: -$Tabs-borderWidth; - display: inline-block; - position: relative; - - >a:first-child { - font-size: $Tabs-linkFontSize; - outline: none; - border: $Tabs-borderWidth solid transparent; - border-top-left-radius: $Tabs-borderRadius; - border-top-right-radius: $Tabs-borderRadius; - color: $Tabs-color; - margin: $Tabs-linkMargin; - padding: $Tabs-linkPadding; - text-decoration: none; - cursor: pointer; - display: block; - } - - >.#{$ns}Combo-toolbarBtn { - position: absolute; - right: -10px; - top: -10px; - z-index: 10; - display: none; - } - - &:hover>.#{$ns}Combo-toolbarBtn { - display: block; - } - - &:hover>a:first-child, - >a:first-child:focus { - border-color: $Tabs-onHover-borderColor; - text-decoration: none; - } - - &.disabled>a:first-child, - &.is-disabled>a:first-child { - color: $Tabs-onDisabled-color; - background-color: transparent; - border-color: transparent; - pointer-events: none; - } - - &.active>a:first-child, - &.is-active>a:first-child { - color: $Tabs-onActive-color; - background-color: $Tabs-onActive-bg; - border-color: $Tabs-onActive-borderColor; - border-bottom-color: transparent; - } - } + &::before { + display: table; + content: ' '; } - &-content { - background-color: $Tabs-content-bg; - padding: $gap-base; - border-style: solid; - border-width: 0 $Tabs-borderWidth $Tabs-borderWidth; - border-color: $Tabs-borderColor; - } + > .#{$ns}Tabs-link { + margin-bottom: -$Tabs-borderWidth; + display: inline-block; + position: relative; - &-pane { + > a:first-child { + font-size: $Tabs-linkFontSize; + outline: none; + border: $Tabs-borderWidth solid transparent; + border-top-left-radius: $Tabs-borderRadius; + border-top-right-radius: $Tabs-borderRadius; + color: $Tabs-color; + margin: $Tabs-linkMargin; + padding: $Tabs-linkPadding; + text-decoration: none; + cursor: pointer; + display: block; + } + + > .#{$ns}Combo-toolbarBtn { + position: absolute; + right: -10px; + top: -10px; + z-index: 10; display: none; - opacity: 0; - transition: opacity 0.35s linear; + } + + &:hover > .#{$ns}Combo-toolbarBtn { + display: block; + } + + &:hover > a:first-child, + > a:first-child:focus { + border-color: $Tabs-onHover-borderColor; + text-decoration: none; + } + + &.disabled > a:first-child, + &.is-disabled > a:first-child { + color: $Tabs-onDisabled-color; + background-color: transparent; + border-color: transparent; + pointer-events: none; + } + + &.active > a:first-child, + &.is-active > a:first-child { + color: $Tabs-onActive-color; + background-color: $Tabs-onActive-bg; + border-color: $Tabs-onActive-borderColor; + border-bottom-color: transparent; + } + } + } + + &-content { + background-color: $Tabs-content-bg; + padding: $gap-base; + border-style: solid; + border-width: 0 $Tabs-borderWidth $Tabs-borderWidth; + border-color: $Tabs-borderColor; + } + + &-pane { + display: none; + opacity: 0; + transition: opacity 0.35s linear; + + &.is-active { + display: block; + } + + &.in { + opacity: 1; + } + } + + &--line { + > .#{$ns}Tabs-links { + border-bottom-color: $Tabs--line-borderColor; + + > li { + > a:first-child { + border-width: 0 0 $Tabs--line-borderWidth 0; + padding: $Tabs--line-linkPadding; + margin: $Tabs--line-linkMargin; + + &:hover, + &:focus { + color: #666; + background-color: transparent; + border-color: transparent; + } + } + + &:last-child { + > a { + margin: 0; + } + } &.is-active { - display: block; - } - - &.in { - opacity: 1; + > a:first-child, + > a:first-child:hover, + > a:first-child:focus { + border-color: $Tabs--line-onHover-borderColor; + color: $Tabs--line-onHover-color; + background-color: transparent; + } } + } } - &--line { - >.#{$ns}Tabs-links { - border-bottom-color: $Tabs--line-borderColor; + > .#{$ns}Tabs-content { + border-width: 0; + padding: $Tabs--line-content-padding; + background-color: $Tabs--line-content-bg; + } + } - >li { - >a:first-child { - border-width: 0 0 $Tabs--line-borderWidth 0; - padding: $Tabs--line-linkPadding; - margin: $Tabs--line-linkMargin; + &--card { + > .#{$ns}Tabs-links { + padding: $Tabs--card-padding; + background-color: $Tabs--card-bg; + border-top: px2rem(1px) solid $Tabs--card-borderTopColor; - &:hover, - &:focus { - color: #666; - background-color: transparent; - border-color: transparent; - } - } - - &:last-child { - >a { - margin: 0; - } - } - - &.is-active { - - >a:first-child, - >a:first-child:hover, - >a:first-child:focus { - border-color: $Tabs--line-onHover-borderColor; - color: $Tabs--line-onHover-color; - background-color: transparent; - } - } - } + > li { + &.is-active { + > a:first-child, + > a:first-child:hover, + > a:first-child:focus { + border-color: $Tabs--card-onActive-borderColor; + color: $primary; + border-bottom-color: $Tabs--card-onActive-bg; + background-color: $Tabs--card-onActive-bg; + } } - >.#{$ns}Tabs-content { - border-width: 0; - padding: $Tabs--line-content-padding; - background-color: $Tabs--line-content-bg; + > a:first-child { + padding: $Tabs--card-linkPadding; + margin: $Tabs--card-linkMargin; + + &:hover, + &:focus { + color: #666; + background-color: $Tabs--card-onActive-bg; + border-bottom-color: transparent; + } } + } } - &--card { - >.#{$ns}Tabs-links { - padding: $Tabs--card-padding; - background-color: $Tabs--card-bg; - border-top: px2rem(1px) solid $Tabs--card-borderTopColor; + > .#{$ns}Tabs-content { + border-width: 0; + } + } - >li { - &.is-active { + &--radio { + > .#{$ns}Tabs-links { + border: 0; + margin-bottom: px2rem(10px); - >a:first-child, - >a:first-child:hover, - >a:first-child:focus { - border-color: $Tabs--card-onActive-borderColor; - color: $primary; - border-bottom-color: $Tabs--card-onActive-bg; - background-color: $Tabs--card-onActive-bg; - } - } + > li { + margin: 0; - >a:first-child { - padding: $Tabs--card-linkPadding; - margin: $Tabs--card-linkMargin; + > a:first-child { + border-width: px2rem(1px); + border-color: $Tabs-borderColor; + font-size: $fontSizeSm; + text-align: center; + margin: 0; + padding: 0 px2rem(10px); + min-width: 68px; + height: px2rem(30px); + line-height: px2rem(30px); + border-radius: 0; + background: $Tabs--radio-bg; - &:hover, - &:focus { - color: #666; - background-color: $Tabs--card-onActive-bg; - border-bottom-color: transparent; - } - } - } + &:hover, + &:focus { + color: $primary; + } } - >.#{$ns}Tabs-content { - border-width: 0; + &.is-active { + > a:first-child, + > a:first-child:hover, + > a:first-child:focus { + color: $Tabs--radio-bg; + background-color: $primary; + border-color: $primary; + position: relative; + z-index: 1; + } } + } + + > li + li { + margin-left: -1px; + } } - &--radio { - >.#{$ns}Tabs-links { - border: 0; - margin-bottom: px2rem(10px); + > .#{$ns}Tabs-content { + border-top: $Tabs-borderWidth solid $Tabs-borderColor; + } + } - >li { - margin: 0; + &--vertical { + display: flex; + min-height: px2rem(200px); + border: $Tabs-borderWidth solid $Tabs-borderColor; + border-radius: 0; - >a:first-child { - border-width: px2rem(1px); - border-color: $Tabs-borderColor; - font-size: $fontSizeSm; - text-align: center; - margin: 0; - padding: 0 px2rem(10px); - min-width: 68px; - height: px2rem(30px); - line-height: px2rem(30px); - border-radius: 0; - background: $Tabs--radio-bg; + > .#{$ns}Tabs-links { + width: px2rem(140px); + background: #f5f5f5; + border: none; + padding-bottom: px2rem(60px); - &:hover, - &:focus { - color: $primary; - } - } + > li { + margin: 0 0 0 -1px; + display: block; - &.is-active { + > a:first-child { + border-color: transparent; + border-radius: 0; + border-width: 0 0 0 px2rem(4px); + margin: 0; - >a:first-child, - >a:first-child:hover, - >a:first-child:focus { - color: $Tabs--radio-bg; - background-color: $primary; - border-color: $primary; - position: relative; - z-index: 1; - } - } - } - - >li+li { - margin-left: -1px; - } + &:hover, + &:focus { + color: $primary; + border-color: transparent; + } } - >.#{$ns}Tabs-content { - border-top: $Tabs-borderWidth solid $Tabs-borderColor; + &.is-active { + > a:first-child, + > a:first-child:hover, + > a:first-child:focus { + color: $primary; + border-color: $primary; + } } + } } - &--vertical { - display: flex; - min-height: px2rem(200px); - border: $Tabs-borderWidth solid $Tabs-borderColor; - border-radius: 0; - - >.#{$ns}Tabs-links { - width: px2rem(140px); - background: #F5F5F5; - border: none; - padding-bottom: px2rem(60px); - - >li { - margin: 0 0 0 -1px; - display: block; - - >a:first-child { - border-color: transparent; - border-radius: 0; - border-width: 0 0 0 px2rem(4px); - margin: 0; - - &:hover, - &:focus { - color: $primary; - border-color: transparent; - } - } - - &.is-active { - - >a:first-child, - >a:first-child:hover, - >a:first-child:focus { - color: $primary; - border-color: $primary; - } - } - } - } - - - >.#{$ns}Tabs-content { - border: none; - flex-grow: 1; - } + > .#{$ns}Tabs-content { + border: none; + flex-grow: 1; } -} \ No newline at end of file + } +} diff --git a/scss/components/_toast.scss b/scss/components/_toast.scss index 02cf60b6..76862c07 100644 --- a/scss/components/_toast.scss +++ b/scss/components/_toast.scss @@ -1,187 +1,188 @@ @keyframes bounceIn { + from, + 20%, + 40%, + 60%, + 80%, + to { + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + } - from, - 20%, - 40%, - 60%, - 80%, - to { - animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - } + 0% { + opacity: 0; + transform: scale3d(0.3, 0.3, 0.3); + } - 0% { - opacity: 0; - transform: scale3d(0.3, 0.3, 0.3); - } + 20% { + transform: scale3d(1.1, 1.1, 1.1); + } - 20% { - transform: scale3d(1.1, 1.1, 1.1); - } + 40% { + transform: scale3d(0.9, 0.9, 0.9); + } - 40% { - transform: scale3d(0.9, 0.9, 0.9); - } + 60% { + opacity: 1; + transform: scale3d(1.03, 1.03, 1.03); + } - 60% { - opacity: 1; - transform: scale3d(1.03, 1.03, 1.03); - } + 80% { + transform: scale3d(0.97, 0.97, 0.97); + } - 80% { - transform: scale3d(0.97, 0.97, 0.97); - } - - to { - opacity: 1; - transform: scale3d(1, 1, 1); - } + to { + opacity: 1; + transform: scale3d(1, 1, 1); + } } @keyframes bounceOut { - 20% { - transform: scale3d(0.9, 0.9, 0.9); - } + 20% { + transform: scale3d(0.9, 0.9, 0.9); + } - 50%, - 55% { - opacity: 1; - transform: scale3d(1.1, 1.1, 1.1); - } + 50%, + 55% { + opacity: 1; + transform: scale3d(1.1, 1.1, 1.1); + } - to { - opacity: 0; - transform: scale3d(0.3, 0.3, 0.3); - } + to { + opacity: 0; + transform: scale3d(0.3, 0.3, 0.3); + } } .#{$ns}Toast { - &-wrap { - pointer-events: none; - position: fixed; - z-index: $zindex-toast; - } + &-wrap { + pointer-events: none; + position: fixed; + z-index: $zindex-toast; + } - width: $Toast-width; - pointer-events: auto; - margin-bottom: $gap-xs; - padding: $Toast-paddingY $Toast-paddingX $Toast-paddingY ($Toast-paddingX + $Toast-paddingL); - box-shadow: $Toast-box-shadow; - border-radius: $Toast-borderRadius; - border: $Toast-border-width solid; - color: $Toast-color; - position: relative; - opacity: $Toast-opacity; - cursor: pointer; - opacity: 0; - transform: translateZ(0); + width: $Toast-width; + pointer-events: auto; + margin-bottom: $gap-xs; + padding: $Toast-paddingY $Toast-paddingX $Toast-paddingY + ($Toast-paddingX + $Toast-paddingL); + box-shadow: $Toast-box-shadow; + border-radius: $Toast-borderRadius; + border: $Toast-border-width solid; + color: $Toast-color; + position: relative; + opacity: $Toast-opacity; + cursor: pointer; + opacity: 0; + transform: translateZ(0); - &.in, - &.out { - animation-fill-mode: both; - animation-duration: 0.75s; - opacity: 1; - } + &.in, + &.out { + animation-fill-mode: both; + animation-duration: 0.75s; + opacity: 1; + } - &.in { - animation-name: bounceIn; - } + &.in { + animation-name: bounceIn; + } - &.out { - animation-name: bounceOut; - } + &.out { + animation-name: bounceOut; + } - &-title { - display: $Toast-display; - font-size: $fontSizeMd; - } + &-title { + display: $Toast-display; + font-size: $fontSizeMd; + } - &-body { - display: $Toast-display; - } + &-body { + display: $Toast-display; + } + + &::before { + display: inline-block; + font-family: $Toast-iconVendor; + font-size: $Toast-icon-fontSize; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + position: absolute; + left: $Toast-paddingX; + top: $Toast-paddingY; + } + + // colors + &--error { + color: $Toast--danger-color; + border-color: $Toast--danger-borderColor; + background-color: $Toast--danger-bgColor; &::before { - display: inline-block; - font-family: $Toast-iconVendor; - font-size: $Toast-icon-fontSize; - text-rendering: auto; - -webkit-font-smoothing: antialiased; - position: absolute; - left: $Toast-paddingX; - top: $Toast-paddingY; + content: $Toast--error-icon; } + } - // colors - &--error { - color: $Toast--danger-color; - border-color: $Toast--danger-borderColor; - background-color: $Toast--danger-bgColor; + &--warning { + color: $Toast--warning-color; + border-color: $Toast--warning-borderColor; + background-color: $Toast--warning-bgColor; - &::before { - content: $Toast--error-icon; - } + &::before { + content: $Toast--warning-icon; } + } - &--warning { - color: $Toast--warning-color; - border-color: $Toast--warning-borderColor; - background-color: $Toast--warning-bgColor; + &--info { + color: $Toast--info-color; + border-color: $Toast--info-borderColor; + background-color: $Toast--info-bgColor; + padding: $Toast-paddingY $Toast-paddingX $Toast-paddingY + ($Toast-paddingX + $Toast--info-paddingL); - &::before { - content: $Toast--warning-icon; - } + &::before { + content: $Toast--info-icon; } + } - &--info { - color: $Toast--info-color; - border-color: $Toast--info-borderColor; - background-color: $Toast--info-bgColor; - padding: $Toast-paddingY $Toast-paddingX $Toast-paddingY ($Toast-paddingX + $Toast--info-paddingL); + &--success { + color: $Toast--success-color; + border-color: $Toast--success-borderColor; + background-color: $Toast--success-bgColor; - &::before { - content: $Toast--info-icon; - } + &::before { + content: $Toast--success-icon; } + } - &--success { - color: $Toast--success-color; - border-color: $Toast--success-borderColor; - background-color: $Toast--success-bgColor; + // positions + &-wrap--topRight { + top: $gap-base; + right: $gap-base; + } - &::before { - content: $Toast--success-icon; - } - } + &-wrap--topCenter { + top: $gap-base; + left: 50%; + margin-left: -$Toast-width/2; + } - // positions - &-wrap--topRight { - top: $gap-base; - right: $gap-base; - } + &-wrap--topLeft { + top: $gap-base; + left: $gap-base; + } - &-wrap--topCenter { - top: $gap-base; - left: 50%; - margin-left: -$Toast-width/2; - } + &-wrap--bottomLeft { + left: $gap-base; + bottom: $gap-base; + } - &-wrap--topLeft { - top: $gap-base; - left: $gap-base; - } + &-wrap--bottomCenter { + left: 50%; + margin-left: -$Toast-width/2; + bottom: $gap-base; + } - &-wrap--bottomLeft { - left: $gap-base; - bottom: $gap-base; - } - - &-wrap--bottomCenter { - left: 50%; - margin-left: -$Toast-width/2; - bottom: $gap-base; - } - - &-wrap--bottomRight { - bottom: $gap-base; - right: $gap-base; - } -} \ No newline at end of file + &-wrap--bottomRight { + bottom: $gap-base; + right: $gap-base; + } +} diff --git a/scss/components/_tooltip.scss b/scss/components/_tooltip.scss index b70574a9..a92a4f90 100644 --- a/scss/components/_tooltip.scss +++ b/scss/components/_tooltip.scss @@ -1,249 +1,251 @@ .#{$ns}Tooltip { + position: absolute; + top: 0; + left: 0; + font-family: inherit; + border-radius: $borderRadius; + min-width: $Tooltip-minWidth; + max-width: $Tooltip-maxWidth; + text-align: left; + white-space: normal; + z-index: $zindex-tooltip; + word-wrap: break-word; + background: $Tooltip-bg; + border: $Tooltip-borderWidth solid $Tooltip-borderColor; + box-shadow: $Tooltip-boxShadow; + + &-arrow { position: absolute; - top: 0; - left: 0; - font-family: inherit; - border-radius: $borderRadius; - min-width: $Tooltip-minWidth; - max-width: $Tooltip-maxWidth; - text-align: left; - white-space: normal; - z-index: $zindex-tooltip; - word-wrap: break-word; - background: $Tooltip-bg; - border: $Tooltip-borderWidth solid $Tooltip-borderColor; - box-shadow: $Tooltip-boxShadow; + display: block; + width: $Tooltip-arrow-width; + height: $Tooltip-arrow-height; + margin-left: -$Tooltip-arrow-width/2; + left: 50%; - &-arrow { - position: absolute; - display: block; - width: $Tooltip-arrow-width; - height: $Tooltip-arrow-height; - margin-left: -$Tooltip-arrow-width/2; - left: 50%; + &::before, + &::after { + position: absolute; + display: block; + content: ''; + border-color: transparent; + border-style: solid; + } + } - &::before, - &::after { - position: absolute; - display: block; - content: ''; - border-color: transparent; - border-style: solid; - } + &--top { + margin-top: -$Tooltip-arrow-height - px2rem(2px); + + .#{$ns}Tooltip-arrow { + bottom: ($Tooltip-arrow-height + $Tooltip-borderWidth) * -1; } - &--top { - margin-top: -$Tooltip-arrow-height - px2rem(2px); - - .#{$ns}Tooltip-arrow { - bottom: ($Tooltip-arrow-height + $Tooltip-borderWidth) * -1; - } - - .#{$ns}Tooltip-arrow::before, - .#{$ns}Tooltip-arrow::after { - border-width: $Tooltip-arrow-height ($Tooltip-arrow-width / 2) 0; - } - - .#{$ns}Tooltip-arrow::before { - bottom: 0; - border-top-color: $Tooltip-arrow-outerColor; - } - - .#{$ns}Tooltip-arrow::after { - bottom: $Tooltip-borderWidth; - border-top-color: $Tooltip-arrow-color; - } + .#{$ns}Tooltip-arrow::before, + .#{$ns}Tooltip-arrow::after { + border-width: $Tooltip-arrow-height ($Tooltip-arrow-width / 2) 0; } - &--right { - margin-left: $Tooltip-arrow-height + px2rem(2px); - - .#{$ns}Tooltip-arrow { - left: ($Tooltip-borderWidth) * -1; - width: $Tooltip-arrow-height; - height: $Tooltip-arrow-width; - margin-top: -$Tooltip-arrow-width/2; - top: 50%; - } - - .#{$ns}Tooltip-arrow::before, - .#{$ns}Tooltip-arrow::after { - border-width: ($Tooltip-arrow-width / 2) $Tooltip-arrow-height ($Tooltip-arrow-width / 2) 0; - } - - .#{$ns}Tooltip-arrow::before { - left: 0; - border-right-color: $Tooltip-arrow-outerColor; - } - - .#{$ns}Tooltip-arrow::after { - left: $Tooltip-borderWidth; - border-right-color: $Tooltip-arrow-color; - } + .#{$ns}Tooltip-arrow::before { + bottom: 0; + border-top-color: $Tooltip-arrow-outerColor; } - &--bottom { - margin-top: $Tooltip-arrow-height + px2rem(2px); + .#{$ns}Tooltip-arrow::after { + bottom: $Tooltip-borderWidth; + border-top-color: $Tooltip-arrow-color; + } + } - .#{$ns}Tooltip-arrow { - top: ($Tooltip-arrow-height + $Tooltip-borderWidth) * -1; - } + &--right { + margin-left: $Tooltip-arrow-height + px2rem(2px); - .#{$ns}Tooltip-arrow::before, - .#{$ns}Tooltip-arrow::after { - border-width: 0 ($Tooltip-arrow-width / 2) $Tooltip-arrow-height ($Tooltip-arrow-width / 2); - } - - .#{$ns}Tooltip-arrow::before { - top: 0; - border-bottom-color: $Tooltip-arrow-outerColor; - } - - .#{$ns}Tooltip-arrow::after { - top: $Tooltip-borderWidth; - border-bottom-color: $Tooltip-arrow-color; - } - - // This will remove the popover-header's border just below the arrow - .#{$ns}Tooltip-title::before { - position: absolute; - top: 0; - left: 50%; - display: block; - width: $Tooltip-arrow-width; - margin-left: ($Tooltip-arrow-width / -2); - content: ''; - border-bottom: $Tooltip-borderWidth solid $Tooltip-title-bg; - } + .#{$ns}Tooltip-arrow { + left: ($Tooltip-borderWidth) * -1; + width: $Tooltip-arrow-height; + height: $Tooltip-arrow-width; + margin-top: -$Tooltip-arrow-width/2; + top: 50%; } - &--left { - margin-left: -$Tooltip-arrow-height - px2rem(2px); - - .#{$ns}Tooltip-arrow { - left: auto; - right: ($Tooltip-arrow-height + $Tooltip-borderWidth) * -1; - width: $Tooltip-arrow-height; - height: $Tooltip-arrow-width; - margin-top: -$Tooltip-arrow-width/2; - top: 50%; - } - - .#{$ns}Tooltip-arrow::before, - .#{$ns}Tooltip-arrow::after { - border-width: ($Tooltip-arrow-width / 2) 0 ($Tooltip-arrow-width / 2) $Tooltip-arrow-height; - } - - .#{$ns}Tooltip-arrow::before { - right: 0; - border-left-color: $Tooltip-arrow-outerColor; - } - - .#{$ns}Tooltip-arrow::after { - right: $Tooltip-borderWidth; - border-left-color: $Tooltip-arrow-color; - } + .#{$ns}Tooltip-arrow::before, + .#{$ns}Tooltip-arrow::after { + border-width: ($Tooltip-arrow-width / 2) $Tooltip-arrow-height + ($Tooltip-arrow-width / 2) 0; } - &-title { - padding: $Tooltip-title-paddingY $Tooltip-title-paddingX; - margin-bottom: 0; // Reset the default from Reboot - font-size: $fontSizeBase; - color: $Tooltip-title-color; - background-color: $Tooltip-title-bg; - border-bottom: $Tooltip-borderWidth solid darken($Tooltip-title-bg, 5%); - border-top-left-radius: $Tooltip-borderRadius - $Tooltip-borderWidth; - border-top-right-radius: $Tooltip-borderRadius - $Tooltip-borderWidth; - - &:empty { - display: none; - } + .#{$ns}Tooltip-arrow::before { + left: 0; + border-right-color: $Tooltip-arrow-outerColor; } - &-body { - color: $Tooltip-body-color; - padding: $Tooltip-body-paddingY $Tooltip-body-paddingX; + .#{$ns}Tooltip-arrow::after { + left: $Tooltip-borderWidth; + border-right-color: $Tooltip-arrow-color; } + } + + &--bottom { + margin-top: $Tooltip-arrow-height + px2rem(2px); + + .#{$ns}Tooltip-arrow { + top: ($Tooltip-arrow-height + $Tooltip-borderWidth) * -1; + } + + .#{$ns}Tooltip-arrow::before, + .#{$ns}Tooltip-arrow::after { + border-width: 0 ($Tooltip-arrow-width / 2) $Tooltip-arrow-height + ($Tooltip-arrow-width / 2); + } + + .#{$ns}Tooltip-arrow::before { + top: 0; + border-bottom-color: $Tooltip-arrow-outerColor; + } + + .#{$ns}Tooltip-arrow::after { + top: $Tooltip-borderWidth; + border-bottom-color: $Tooltip-arrow-color; + } + + // This will remove the popover-header's border just below the arrow + .#{$ns}Tooltip-title::before { + position: absolute; + top: 0; + left: 50%; + display: block; + width: $Tooltip-arrow-width; + margin-left: ($Tooltip-arrow-width / -2); + content: ''; + border-bottom: $Tooltip-borderWidth solid $Tooltip-title-bg; + } + } + + &--left { + margin-left: -$Tooltip-arrow-height - px2rem(2px); + + .#{$ns}Tooltip-arrow { + left: auto; + right: ($Tooltip-arrow-height + $Tooltip-borderWidth) * -1; + width: $Tooltip-arrow-height; + height: $Tooltip-arrow-width; + margin-top: -$Tooltip-arrow-width/2; + top: 50%; + } + + .#{$ns}Tooltip-arrow::before, + .#{$ns}Tooltip-arrow::after { + border-width: ($Tooltip-arrow-width / 2) 0 ($Tooltip-arrow-width / 2) + $Tooltip-arrow-height; + } + + .#{$ns}Tooltip-arrow::before { + right: 0; + border-left-color: $Tooltip-arrow-outerColor; + } + + .#{$ns}Tooltip-arrow::after { + right: $Tooltip-borderWidth; + border-left-color: $Tooltip-arrow-color; + } + } + + &-title { + padding: $Tooltip-title-paddingY $Tooltip-title-paddingX; + margin-bottom: 0; // Reset the default from Reboot + font-size: $fontSizeBase; + color: $Tooltip-title-color; + background-color: $Tooltip-title-bg; + border-bottom: $Tooltip-borderWidth solid darken($Tooltip-title-bg, 5%); + border-top-left-radius: $Tooltip-borderRadius - $Tooltip-borderWidth; + border-top-right-radius: $Tooltip-borderRadius - $Tooltip-borderWidth; + + &:empty { + display: none; + } + } + + &-body { + color: $Tooltip-body-color; + padding: $Tooltip-body-paddingY $Tooltip-body-paddingX; + } } - @keyframes tooltipIn { - from { - opacity: 0; - margin: 0; - } + from { + opacity: 0; + margin: 0; + } } [data-tooltip] { - position: relative; + position: relative; - &:after { - pointer-events: none; - left: 0; - top: 50%; - transform: translateY(-50%); - position: absolute; - content: attr(data-tooltip); - font-size: $Tooltip--attr-fontSize; - line-height: $Tooltip--attr-lineHeigt; - text-align: left; - white-space: nowrap; - background: $Tooltip--attr-bg; - border: $Tooltip--attr-borderWidth solid $Tooltip--attr-borderColor; - border-radius: $Tooltip--attr-borderRadius; - box-shadow: $Tooltip--attr-boxShadow; - left: 100%; - color: $Tooltip--attr-color; - padding: $Tooltip--attr-paddingY $Tooltip--attr-paddingX; - display: none; - animation-duration: 0.2s; - animation-fill-mode: both; - } + &:after { + pointer-events: none; + left: 0; + top: 50%; + transform: translateY(-50%); + position: absolute; + content: attr(data-tooltip); + font-size: $Tooltip--attr-fontSize; + line-height: $Tooltip--attr-lineHeigt; + text-align: left; + white-space: nowrap; + background: $Tooltip--attr-bg; + border: $Tooltip--attr-borderWidth solid $Tooltip--attr-borderColor; + border-radius: $Tooltip--attr-borderRadius; + box-shadow: $Tooltip--attr-boxShadow; + left: 100%; + color: $Tooltip--attr-color; + padding: $Tooltip--attr-paddingY $Tooltip--attr-paddingX; + display: none; + animation-duration: 0.2s; + animation-fill-mode: both; + } - &:not(.is-disabled):hover:after { - display: inline-block; - animation-name: tooltipIn; + &:not(.is-disabled):hover:after { + display: inline-block; + animation-name: tooltipIn; - opacity: 1; - z-index: $zindex-tooltip; - margin: 0 0 0 $Tooltip--attr-gap; - opacity: 1; - } + opacity: 1; + z-index: $zindex-tooltip; + margin: 0 0 0 $Tooltip--attr-gap; + opacity: 1; + } - &[data-position='bottom']:after { - left: 50%; - top: 100%; - transform: translateX(-50%); - } + &[data-position='bottom']:after { + left: 50%; + top: 100%; + transform: translateX(-50%); + } - &[data-position='bottom']:hover:after { - margin: $Tooltip--attr-gap 0 0 0; - } + &[data-position='bottom']:hover:after { + margin: $Tooltip--attr-gap 0 0 0; + } - &[data-position='left']:after { - top: 50%; - right: 100%; - left: auto; - transform: translateY(-50%); - } + &[data-position='left']:after { + top: 50%; + right: 100%; + left: auto; + transform: translateY(-50%); + } - &[data-position='left']:hover:after { - margin: 0 0 0 $Tooltip--attr-gap; - } + &[data-position='left']:hover:after { + margin: 0 0 0 $Tooltip--attr-gap; + } - &[data-position='top']:after { - left: 50%; - top: auto; - bottom: 100%; - transform: translateX(-50%); - } + &[data-position='top']:after { + left: 50%; + top: auto; + bottom: 100%; + transform: translateX(-50%); + } - &[data-position='top']:hover:after { - margin: -$Tooltip--attr-gap 0 0 0; - } + &[data-position='top']:hover:after { + margin: -$Tooltip--attr-gap 0 0 0; + } - &:hover:active:after { - content: ''; - display: none !important; - } -} \ No newline at end of file + &:hover:active:after { + content: ''; + display: none !important; + } +} diff --git a/scss/components/_video.scss b/scss/components/_video.scss index e13e42dc..a5f4fd7e 100644 --- a/scss/components/_video.scss +++ b/scss/components/_video.scss @@ -1,19 +1,19 @@ .#{$ns}Video { - min-width: 200px; + min-width: 200px; - &-cursor { - position: absolute; - border: 2px solid $info; - transition: all 0.5s ease-out; - } + &-cursor { + position: absolute; + border: 2px solid $info; + transition: all 0.5s ease-out; + } - &-frameList { - .#{$ns}Video-frameItem { - cursor: pointer; - } + &-frameList { + .#{$ns}Video-frameItem { + cursor: pointer; } + } - .video-react-paused .video-react-big-play-button.big-play-button-hide { - display: block; - } + .video-react-paused .video-react-big-play-button.big-play-button-hide { + display: block; + } } diff --git a/scss/components/_wizard.scss b/scss/components/_wizard.scss index 648c031a..dbc27c7e 100644 --- a/scss/components/_wizard.scss +++ b/scss/components/_wizard.scss @@ -1,264 +1,264 @@ .#{$ns}Wizard { + @include clearfix(); + + position: relative; + + &, + &-tabs { + padding: 0; + + .Badge { + display: inline-block; + width: $Wizard-badge-size; + height: $Wizard-badge-size; + font-size: $Wizard-badge-fontSize; + line-height: $Wizard-badge-size; + color: $Wizard-badge-color; + text-align: center; + white-space: nowrap; + vertical-align: middle; + background-color: $Wizard-badge-bg; + border-radius: $Wizard-badge-borderRadius; // font-weight: 700; + text-shadow: 0 px2rem(1px) 0 rgba(0, 0, 0, 0.2); + margin-right: $Wizard-badge-marginRight; + border: $Wizard-badge-border; + box-sizing: content-box; + + // &--primary { + // background-color: $primary; + // } + + // &--secondary { + // background-color: $secondary; + // } + + // &--success { + // background-color: $success; + // } + + // &--info { + // background-color: $info; + // } + + // &--warning { + // background-color: $warning; + // } + + // &--danger { + // background-color: $danger; + // } + + // &--light { + // background-color: $light; + // } + + // &--dark { + // background-color: $dark; + // } + &.is-active { + color: $white; + background-color: $Wizard-badge-onActive-backgroundColor; + } + } + + ul li.active { + color: $info; + } + + .#{$ns}Panel-footer > .#{$ns}Form-group, + .#{$ns}Panel-footer > .btn { + margin-left: px2rem(5px); + } + + > ul.nav { + padding: 0; + margin: 0; + border: $borderWidth solid $borderColor; + + li { + position: relative; + float: left; + padding: 0 px2rem(15px) 0 px2rem(25px); + margin: 0; + color: #999999; + cursor: pointer; + height: $Wizard-steps-height; + line-height: $Wizard-steps-height; + + a { + border: 0 none !important; + background: transparent !important; + color: inherit; + display: inline; + padding: 0; + + div { + display: inline; + } + } + + &:first-child { + padding-left: px2rem(15px); + border-radius: px2rem(4px) 0 0 0; + } + + &:before, + &:after { + content: ''; + position: absolute; + right: px2rem(-10px); + border: px2rem(20px) solid transparent; + border-right: 0; + border-left: px2rem(10px) solid $borderColor; + border-left-color: rgba(0, 0, 0, 0.05); + z-index: 1; + bottom: 0; + } + + &:after { + right: px2rem(-9px); + border-left-color: $Wizard-steps-bg; + z-index: 2; + } + + &.is-active { + color: $Wizard-steps-li-onActive-color; + background: #fff; + } + + &.is-active:after { + border-left-color: #fff; + } + } + + // .Badge { + // margin-right: px2rem(4px); + // } + } + } + + &-steps { + font-size: $fontSizeBase; + padding: $Wizard-steps-padding; + background-color: $Wizard-steps-bg; + border-bottom: $Wizard-steps-borderWidth solid $borderColor; + text-align: $Wizard-steps-textAlign; @include clearfix(); - position: relative; + ul { + display: $Wizard-steps-ulDisplay; + padding: 0; + margin: 0; + list-style: none outside none; - &, - &-tabs { - padding: 0; - - .Badge { - display: inline-block; - width: $Wizard-badge-size; - height: $Wizard-badge-size; - font-size: $Wizard-badge-fontSize; - line-height: $Wizard-badge-size; - color: $Wizard-badge-color; - text-align: center; - white-space: nowrap; - vertical-align: middle; - background-color: $Wizard-badge-bg; - border-radius: $Wizard-badge-borderRadius; // font-weight: 700; - text-shadow: 0 px2rem(1px) 0 rgba(0, 0, 0, 0.2); - margin-right: $Wizard-badge-marginRight; - border: $Wizard-badge-border; - box-sizing: content-box; - - // &--primary { - // background-color: $primary; - // } - - // &--secondary { - // background-color: $secondary; - // } - - // &--success { - // background-color: $success; - // } - - // &--info { - // background-color: $info; - // } - - // &--warning { - // background-color: $warning; - // } - - // &--danger { - // background-color: $danger; - // } - - // &--light { - // background-color: $light; - // } - - // &--dark { - // background-color: $dark; - // } - &.is-active { - color: $white; - background-color: $Wizard-badge-onActive-backgroundColor; - } - } - - ul li.active { - color: $info; - } - - .#{$ns}Panel-footer > .#{$ns}Form-group, - .#{$ns}Panel-footer > .btn { - margin-left: px2rem(5px); - } - - > ul.nav { - padding: 0; - margin: 0; - border: $borderWidth solid $borderColor; - - li { - position: relative; - float: left; - padding: 0 px2rem(15px) 0 px2rem(25px); - margin: 0; - color: #999999; - cursor: pointer; - height: $Wizard-steps-height; - line-height: $Wizard-steps-height; - - a { - border: 0 none !important; - background: transparent !important; - color: inherit; - display: inline; - padding: 0; - - div { - display: inline; - } - } - - &:first-child { - padding-left: px2rem(15px); - border-radius: px2rem(4px) 0 0 0; - } - - &:before, - &:after { - content: ''; - position: absolute; - right: px2rem(-10px); - border: px2rem(20px) solid transparent; - border-right: 0; - border-left: px2rem(10px) solid $borderColor; - border-left-color: rgba(0, 0, 0, 0.05); - z-index: 1; - bottom: 0; - } - - &:after { - right: px2rem(-9px); - border-left-color: $Wizard-steps-bg; - z-index: 2; - } - - &.is-active { - color: $Wizard-steps-li-onActive-color; - background: #fff; - } - - &.is-active:after { - border-left-color: #fff; - } - } - - // .Badge { - // margin-right: px2rem(4px); - // } - } - } - - &-steps { - font-size: $fontSizeBase; - padding: $Wizard-steps-padding; - background-color: $Wizard-steps-bg; - border-bottom: $Wizard-steps-borderWidth solid $borderColor; - text-align: $Wizard-steps-textAlign; - @include clearfix(); - - ul { - display: $Wizard-steps-ulDisplay; - padding: 0; - margin: 0; - list-style: none outside none; - - li { - position: relative; - float: left; - padding: 0 px2rem(15px) 0 px2rem(25px); - margin: 0; - color: #999999; - cursor: default; - height: $Wizard-steps-height; - line-height: $Wizard-steps-height; - - &:first-child { - padding-left: px2rem(15px); - border-radius: px2rem(4px) 0 0 0; - } - - &:before, - &:after { - font-family: $Wizard-steps-liVender; - content: $Wizard-steps-liAfterContent; - position: absolute; - bottom: 0; - right: px2rem(-10px); - border: $Wizard-steps-liAfterBorder; - border-right: 0; - border-left: px2rem(10px) solid $borderColor; - border-left-color: rgba(0, 0, 0, 0.05); - z-index: 2; - } - - &:after { - right: px2rem(-9px); - border-left-color: $Wizard-steps-bg; - z-index: 2; - } - - &.is-active { - color: $Wizard-steps-li-onActive-color; - background: $Wizard-steps-li-onActive-bg; - } - - &.is-active:after { - border-left-color: $Wizard-steps-li-onActive-arrow-bg; - } - - &.is-complete, - &.is-complete:hover { - color: $Wizard-steps-li-onActive-color; - cursor: pointer; - background: $Wizard-steps-bg--isComplete; - } - - &.is-complete:after { - border-left-color: #f1f5f9; - } - } - - // .Badge { - // margin-right: px2rem(4px); - // } - } - } - - &-stepContent { - padding: $Wizard-stepsContent-padding; - - & .Step-pane { - display: none; - - &.is-active { - display: inherit; - } - } - } - - &--vertical { + li { + position: relative; float: left; - border-bottom: none; - margin-bottom: px2rem(30px); // padding: 0; + padding: 0 px2rem(15px) 0 px2rem(25px); + margin: 0; + color: #999999; + cursor: default; + height: $Wizard-steps-height; + line-height: $Wizard-steps-height; - &.#{$ns}Wizard-steps { - height: auto; + &:first-child { + padding-left: px2rem(15px); + border-radius: px2rem(4px) 0 0 0; } - & + .#{$ns}Wizard-stepContent { - zoom: 1; - overflow: hidden; - padding-left: px2rem(40px); + &:before, + &:after { + font-family: $Wizard-steps-liVender; + content: $Wizard-steps-liAfterContent; + position: absolute; + bottom: 0; + right: px2rem(-10px); + border: $Wizard-steps-liAfterBorder; + border-right: 0; + border-left: px2rem(10px) solid $borderColor; + border-left-color: rgba(0, 0, 0, 0.05); + z-index: 2; } - & li { - background-color: $Wizard-steps-bg; + &:after { + right: px2rem(-9px); + border-left-color: $Wizard-steps-bg; + z-index: 2; } - & ul li { - height: px2rem(40px); - line-height: px2rem(40px); - position: relative; - float: none; - border-bottom: $borderWidth solid $borderColor; - padding-left: px2rem(15px); // &:before, - // &:after { - // border: px2rem(20px) solid transparent; - // content: ''; - // } + &.is-active { + color: $Wizard-steps-li-onActive-color; + background: $Wizard-steps-li-onActive-bg; } - & + .#{$ns}Wizard-stepContent + .#{$ns}Panel-footer { - clear: both; + &.is-active:after { + border-left-color: $Wizard-steps-li-onActive-arrow-bg; } + + &.is-complete, + &.is-complete:hover { + color: $Wizard-steps-li-onActive-color; + cursor: pointer; + background: $Wizard-steps-bg--isComplete; + } + + &.is-complete:after { + border-left-color: #f1f5f9; + } + } + + // .Badge { + // margin-right: px2rem(4px); + // } } + } + + &-stepContent { + padding: $Wizard-stepsContent-padding; + + & .Step-pane { + display: none; + + &.is-active { + display: inherit; + } + } + } + + &--vertical { + float: left; + border-bottom: none; + margin-bottom: px2rem(30px); // padding: 0; + + &.#{$ns}Wizard-steps { + height: auto; + } + + & + .#{$ns}Wizard-stepContent { + zoom: 1; + overflow: hidden; + padding-left: px2rem(40px); + } + + & li { + background-color: $Wizard-steps-bg; + } + + & ul li { + height: px2rem(40px); + line-height: px2rem(40px); + position: relative; + float: none; + border-bottom: $borderWidth solid $borderColor; + padding-left: px2rem(15px); // &:before, + // &:after { + // border: px2rem(20px) solid transparent; + // content: ''; + // } + } + + & + .#{$ns}Wizard-stepContent + .#{$ns}Panel-footer { + clear: both; + } + } } diff --git a/scss/components/_wrapper.scss b/scss/components/_wrapper.scss index ef4d8ba3..54a0b09b 100644 --- a/scss/components/_wrapper.scss +++ b/scss/components/_wrapper.scss @@ -1,27 +1,27 @@ .#{$ns}Wrapper { - padding: px2rem(15px); + padding: px2rem(15px); - &--xs { - padding: px2rem(5px); - } + &--xs { + padding: px2rem(5px); + } - &--sm { - padding: px2rem(10px); - } + &--sm { + padding: px2rem(10px); + } - &--md { - padding: px2rem(20px); - } + &--md { + padding: px2rem(20px); + } - &--lg { - padding: px2rem(30px); - } + &--lg { + padding: px2rem(30px); + } - &--xl { - padding: px2rem(50px); - } + &--xl { + padding: px2rem(50px); + } - &--none { - padding: 0; - } + &--none { + padding: 0; + } } diff --git a/scss/components/form/_chained-select.scss b/scss/components/form/_chained-select.scss index 902963eb..a265d413 100644 --- a/scss/components/form/_chained-select.scss +++ b/scss/components/form/_chained-select.scss @@ -1,5 +1,5 @@ .#{$ns}ChainedSelectControl { - .#{$ns}Select { - margin-right: $gap-xs; - } + .#{$ns}Select { + margin-right: $gap-xs; + } } diff --git a/scss/components/form/_checks.scss b/scss/components/form/_checks.scss index e3a33308..5e8e517f 100644 --- a/scss/components/form/_checks.scss +++ b/scss/components/form/_checks.scss @@ -1,265 +1,264 @@ .#{$ns}Checkbox { - margin: 0 $gap-sm 0 0; - font-weight: $fontWeightNormal; - user-select: none; + margin: 0 $gap-sm 0 0; + font-weight: $fontWeightNormal; + user-select: none; + + input { + opacity: 0; + position: absolute; + } + + &:hover input:not(:disabled) + i { + border-color: $Checkbox-onHover-color; + // box-shadow: 0 0 px2rem(1px) $Checkbox-onHover-color inset; + } + + > i { + cursor: pointer; + line-height: 1; + background: $Checkbox-gb; + display: inline-block; + vertical-align: middle; + position: relative; + + + span { + margin-left: $Checkbox-gap; + cursor: pointer; + + &:empty { + display: none; + } + } + + &:before { + content: ''; + position: absolute; + left: 50%; + top: 50%; + width: 0px; + height: 0px; + background-color: transparent; + transition: all 0.2s; + transform-origin: 50% 50%; + transform: translate(-50%, -50%); + } + } + + &--checkbox { + padding-left: $Checkbox-size; input { - opacity: 0; - position: absolute; - } + margin-left: -$Checkbox-size; - &:hover input:not(:disabled)+i { + &:checked + i { border-color: $Checkbox-onHover-color; - // box-shadow: 0 0 px2rem(1px) $Checkbox-onHover-color inset; - } - - >i { - cursor: pointer; - line-height: 1; - background: $Checkbox-gb; - display: inline-block; - vertical-align: middle; - position: relative; - - +span { - margin-left: $Checkbox-gap; - cursor: pointer; - - &:empty { - display: none; - } - } &:before { - content: ''; - position: absolute; - left: 50%; - top: 50%; - width: 0px; - height: 0px; - background-color: transparent; - transition: all 0.2s; - transform-origin: 50% 50%; - transform: translate(-50%, -50%); + width: $Checkbox-inner-size; + height: $Checkbox-inner-size; + background: $Checkbox-onHover-color; } - } + } - &--checkbox { - padding-left: $Checkbox-size; + &[disabled] + i { + border-color: lighten($Checkbox-color, 5%); + cursor: not-allowed; - input { - margin-left: -$Checkbox-size; - - &:checked+i { - border-color: $Checkbox-onHover-color; - - &:before { - width: $Checkbox-inner-size; - height: $Checkbox-inner-size; - background: $Checkbox-onHover-color; - } - } - - &[disabled]+i { - border-color: lighten($Checkbox-color, 5%); - cursor: not-allowed; - - &:before { - background-color: lighten($Checkbox-color, 5%); - border-color: $white; - } - } - - &[disabled]+i+span { - cursor: not-allowed; - color: $text--muted-color; - } + &:before { + background-color: lighten($Checkbox-color, 5%); + border-color: $white; } + } - >i { - width: $Checkbox-size; - height: $Checkbox-size; - border: px2rem(1px) solid $Checkbox-color; - border-radius: $Checkbox-borderRadius; - margin-left: -$Checkbox-size; - margin-top: px2rem(-3px); - } - } - - &--full.#{$ns}Checkbox--checkbox { - &:not(:disabled)+i:hover { - border-color: $Checkbox-color; - } - - input { - &:checked+i { - border-color: $Checkbox-onHover-color; - background: $Checkbox-onHover-color; - - &:before { - width: $Checkbox--full-inner-size; - height: $Checkbox--full-inner-size / 2; - border-color: $white; - } - } - - // &[disabled] + i { - // border-color: lighten($Checkbox-color, 5%); - - // &:before { - // background-color: lighten($Checkbox-color, 5%); - // } - // } - - &:checked[disabled]+i { - border-color: lighten($Checkbox-color, 5%); - background-color: lighten($Checkbox-color, 5%); - } - } - - >i { - position: relative; - cursor: pointer; - - &:before { - content: ''; - position: absolute; - left: 50%; - top: 50%; - width: 0; - height: 0; - border-color: transparent; - transition: width 0.2s, height 0.2s, transform 0.2s; - border-width: 0 0 px2rem(2px) px2rem(2px); - transform: translate(-50%, -60%) rotate(-40deg); - border-style: solid; - } - } - } - - &--radio { - padding-left: $Radio-size; - - input { - margin-left: -$Radio-size; - - &:checked+i { - border-color: $Radio-onHover-color; - - &:before { - width: $Radio-inner-size; - height: $Radio-inner-size; - background-color: $Radio-onHover-color; - border-radius: 50%; - } - } - - &[disabled]+i { - border-color: lighten($Radio-color, 5%); - cursor: not-allowed; - - &:before { - background-color: lighten($Radio-color, 5%); - } - } - - &[disabled]+i+span { - cursor: not-allowed; - color: $text--muted-color; - } - } - - >i { - cursor: pointer; - width: $Radio-size; - height: $Radio-size; - border: px2rem(1px) solid $Radio-color; - margin-left: -$Radio-size; - margin-top: px2rem(-2px); - border-radius: 50%; - } - } - - &--sm { - padding-left: $Checkbox--sm-size; - - input { - margin-left: -$Checkbox--sm-size; - - &:checked+i { - &:before { - width: $Checkbox--sm-inner-size; - height: $Checkbox--sm-inner-size; - } - } - } - - >i { - width: $Checkbox--sm-size; - height: $Checkbox--sm-size; - margin-left: -$Checkbox--sm-size; - - +span { - margin-left: $gap-xs; - } - } - } - - &--sm.#{$ns}Checkbox--full { - input { - &:checked+i { - &:before { - width: $Checkbox--sm--full-inner-size; - height: $Checkbox--sm--full-inner-size / 2; - } - } - } - } - - &-desc { + &[disabled] + i + span { + cursor: not-allowed; color: $text--muted-color; - margin-left: $Checkbox-gap; - margin-top: $gap-xs; + } } + + > i { + width: $Checkbox-size; + height: $Checkbox-size; + border: px2rem(1px) solid $Checkbox-color; + border-radius: $Checkbox-borderRadius; + margin-left: -$Checkbox-size; + margin-top: px2rem(-3px); + } + } + + &--full.#{$ns}Checkbox--checkbox { + &:not(:disabled) + i:hover { + border-color: $Checkbox-color; + } + + input { + &:checked + i { + border-color: $Checkbox-onHover-color; + background: $Checkbox-onHover-color; + + &:before { + width: $Checkbox--full-inner-size; + height: $Checkbox--full-inner-size / 2; + border-color: $white; + } + } + + // &[disabled] + i { + // border-color: lighten($Checkbox-color, 5%); + + // &:before { + // background-color: lighten($Checkbox-color, 5%); + // } + // } + + &:checked[disabled] + i { + border-color: lighten($Checkbox-color, 5%); + background-color: lighten($Checkbox-color, 5%); + } + } + + > i { + position: relative; + cursor: pointer; + + &:before { + content: ''; + position: absolute; + left: 50%; + top: 50%; + width: 0; + height: 0; + border-color: transparent; + transition: width 0.2s, height 0.2s, transform 0.2s; + border-width: 0 0 px2rem(2px) px2rem(2px); + transform: translate(-50%, -60%) rotate(-40deg); + border-style: solid; + } + } + } + + &--radio { + padding-left: $Radio-size; + + input { + margin-left: -$Radio-size; + + &:checked + i { + border-color: $Radio-onHover-color; + + &:before { + width: $Radio-inner-size; + height: $Radio-inner-size; + background-color: $Radio-onHover-color; + border-radius: 50%; + } + } + + &[disabled] + i { + border-color: lighten($Radio-color, 5%); + cursor: not-allowed; + + &:before { + background-color: lighten($Radio-color, 5%); + } + } + + &[disabled] + i + span { + cursor: not-allowed; + color: $text--muted-color; + } + } + + > i { + cursor: pointer; + width: $Radio-size; + height: $Radio-size; + border: px2rem(1px) solid $Radio-color; + margin-left: -$Radio-size; + margin-top: px2rem(-2px); + border-radius: 50%; + } + } + + &--sm { + padding-left: $Checkbox--sm-size; + + input { + margin-left: -$Checkbox--sm-size; + + &:checked + i { + &:before { + width: $Checkbox--sm-inner-size; + height: $Checkbox--sm-inner-size; + } + } + } + + > i { + width: $Checkbox--sm-size; + height: $Checkbox--sm-size; + margin-left: -$Checkbox--sm-size; + + + span { + margin-left: $gap-xs; + } + } + } + + &--sm.#{$ns}Checkbox--full { + input { + &:checked + i { + &:before { + width: $Checkbox--sm--full-inner-size; + height: $Checkbox--sm--full-inner-size / 2; + } + } + } + } + + &-desc { + color: $text--muted-color; + margin-left: $Checkbox-gap; + margin-top: $gap-xs; + } } .#{$ns}CheckboxControl, .#{$ns}RadiosControl, .#{$ns}CheckboxesControl { - padding-top: ($Form-input-height - $Checkbox-size) / 2; + padding-top: ($Form-input-height - $Checkbox-size) / 2; } .#{$ns}RadiosControl, .#{$ns}CheckboxesControl { - .#{$ns}Checkbox { - display: block; - margin-bottom: $Form-label-paddingTop; - } + .#{$ns}Checkbox { + display: block; + margin-bottom: $Form-label-paddingTop; + } - &.is-inline .#{$ns}Checkbox { - display: inline-block; - margin-right: $gap-md; - } + &.is-inline .#{$ns}Checkbox { + display: inline-block; + margin-right: $gap-md; + } } .#{$ns}RadiosControl-group, .#{$ns}CheckboxesControl-group { + .#{$ns}RadiosControl-group, + .#{$ns}CheckboxesControl-group { + padding-left: px2rem(80px); + @include clearfix(); - .#{$ns}RadiosControl-group, - .#{$ns}CheckboxesControl-group { - padding-left: px2rem(80px); - @include clearfix(); - - >.#{$ns}RadiosControl-groupLabel, - >.#{$ns}CheckboxesControl-groupLabel { - float: left; - width: px2rem(80px); - margin-left: px2rem(-80px); - } + > .#{$ns}RadiosControl-groupLabel, + > .#{$ns}CheckboxesControl-groupLabel { + float: left; + width: px2rem(80px); + margin-left: px2rem(-80px); } + } } .#{$ns}RadiosControl-groupLabel, .#{$ns}CheckboxesControl-groupLabel { - display: block; -} \ No newline at end of file + display: block; +} diff --git a/scss/components/form/_city.scss b/scss/components/form/_city.scss index d6d03e07..2fa64d2e 100644 --- a/scss/components/form/_city.scss +++ b/scss/components/form/_city.scss @@ -1,31 +1,31 @@ .#{$ns}CityPicker { - .#{$ns}Select + .#{$ns}Select { - margin-left: $gap-xs; + .#{$ns}Select + .#{$ns}Select { + margin-left: $gap-xs; + } + + &-input { + outline: none; + vertical-align: middle; + margin-left: $gap-xs; + border: $Form-input-borderWidth solid $Form-input-borderColor; + border-radius: $Form-input-borderRadius; + // height: $Form-input-height; + line-height: $Form-input-lineHeight; + padding: $Form-input-paddingY $Form-input-paddingX; + font-size: $Form-input-fontSize; + + &::placeholder { + color: $Form-input-placeholderColor; + user-select: none; } - &-input { - outline: none; - vertical-align: middle; - margin-left: $gap-xs; - border: $Form-input-borderWidth solid $Form-input-borderColor; - border-radius: $Form-input-borderRadius; - // height: $Form-input-height; - line-height: $Form-input-lineHeight; - padding: $Form-input-paddingY $Form-input-paddingX; - font-size: $Form-input-fontSize; + &:focus { + border-color: $Form-input-onFocused-borderColor; + box-shadow: $Form-input-boxShadow; - &::placeholder { - color: $Form-input-placeholderColor; - user-select: none; - } - - &:focus { - border-color: $Form-input-onFocused-borderColor; - box-shadow: $Form-input-boxShadow; - - @if $Form-input-onFocused-bg !=$Form-input-bg { - background-color: $Form-input-onFocused-bg; - } - } + @if $Form-input-onFocused-bg !=$Form-input-bg { + background-color: $Form-input-onFocused-bg; + } } -} \ No newline at end of file + } +} diff --git a/scss/components/form/_color.scss b/scss/components/form/_color.scss index c4824990..bb2b121c 100644 --- a/scss/components/form/_color.scss +++ b/scss/components/form/_color.scss @@ -1,87 +1,87 @@ .#{$ns}ColorPicker { - position: relative; - display: inline-flex; - flex-wrap: nowrap; - white-space: nowrap; - border: $ColorPicker-borderWidth solid $ColorPicker-borderColor; - font-size: $ColorPicker-fontSize; - padding: $ColorPicker-paddingY $ColorPicker-paddingX; - background-color: $ColorPicker-bg; - color: $ColorPicker-color; + position: relative; + display: inline-flex; + flex-wrap: nowrap; + white-space: nowrap; + border: $ColorPicker-borderWidth solid $ColorPicker-borderColor; + font-size: $ColorPicker-fontSize; + padding: $ColorPicker-paddingY $ColorPicker-paddingX; + background-color: $ColorPicker-bg; + color: $ColorPicker-color; - &:not(.is-disabled) { - cursor: pointer; + &:not(.is-disabled) { + cursor: pointer; - &:hover { - background-color: $ColorPicker-onHover-bg; - border-color: $ColorPicker-onHover-borderColor; - } + &:hover { + background-color: $ColorPicker-onHover-bg; + border-color: $ColorPicker-onHover-borderColor; } + } - &-input { - border: 0; - background: transparent; - outline: none; - width: 100%; - flex-basis: 0; - flex-grow: 1; - padding: 0; - margin: 0; - height: $ColorPicker-fontSize * $ColorPicker-lineHeight; + &-input { + border: 0; + background: transparent; + outline: none; + width: 100%; + flex-basis: 0; + flex-grow: 1; + padding: 0; + margin: 0; + height: $ColorPicker-fontSize * $ColorPicker-lineHeight; - &::placeholder { - color: $ColorPicker-placeholderColor; - } + &::placeholder { + color: $ColorPicker-placeholderColor; } + } - &.is-focused { - border-color: $ColorPicker-onFocused-borderColor; - box-shadow: $Form-input-boxShadow; - } + &.is-focused { + border-color: $ColorPicker-onFocused-borderColor; + box-shadow: $Form-input-boxShadow; + } - &.is-disabled { - background: $ColorPicker-onDisabled-bg; + &.is-disabled { + background: $ColorPicker-onDisabled-bg; + color: $ColorPicker-onDisabled-color; + pointer-events: none; + + > .#{$ns}ColorPicker-input { + color: $ColorPicker-onDisabled-color; + + &::placeholder { color: $ColorPicker-onDisabled-color; - pointer-events: none; - - > .#{$ns}ColorPicker-input { - color: $ColorPicker-onDisabled-color; - - &::placeholder { - color: $ColorPicker-onDisabled-color; - } - } + } } + } - &-preview { - display: flex; - align-items: center; - margin-left: $gap-xs; - cursor: pointer; - } + &-preview { + display: flex; + align-items: center; + margin-left: $gap-xs; + cursor: pointer; + } - &-previewIcon { - display: block; - width: px2rem(16px); - height: px2rem(16px); - box-shadow: $boxShadowSm; - } + &-previewIcon { + display: block; + width: px2rem(16px); + height: px2rem(16px); + box-shadow: $boxShadowSm; + } - &-clear { - @include input-clear(); - display: inline-block; - line-height: 1; - } + &-clear { + @include input-clear(); + display: inline-block; + line-height: 1; + } } .#{$ns}ColorControl:not(.is-inline) > .#{$ns}ColorPicker { - display: flex; + display: flex; } // override .sketch-picker { - box-shadow: none !important; - border-radius: 0 !important; - border: none !important; + box-shadow: none !important; + border-radius: 0 !important; + border: none !important; } diff --git a/scss/components/form/_combo.scss b/scss/components/form/_combo.scss index 8d16c7c1..6b82bc5b 100644 --- a/scss/components/form/_combo.scss +++ b/scss/components/form/_combo.scss @@ -1,216 +1,214 @@ .#{$ns}Combo { - &-toolbarBtn { - line-height: $Combo-toolbarBtn-lineHeight; - height: $Combo-toolbarBtn-height; - color: $Combo-toolbarBtn-color; - padding: $Combo-toolbarBtn-paddingY $Combo-toolbarBtn-paddingX; - cursor: pointer; + &-toolbarBtn { + line-height: $Combo-toolbarBtn-lineHeight; + height: $Combo-toolbarBtn-height; + color: $Combo-toolbarBtn-color; + padding: $Combo-toolbarBtn-paddingY $Combo-toolbarBtn-paddingX; + cursor: pointer; + + &:hover { + color: darken($Combo-toolbarBtn-color, 10%); + } + } + + &-addBtn { + font-size: $Combo-addBtn-fontSize; + + @include button-size( + $Combo-addBtn-paddingY, + $Combo-addBtn-paddingX, + $Combo-addBtn-fontSize, + $Combo-addBtn-lineHeight, + $Combo-addBtn-borderRadius, + $Combo-addBtn-height + ); + + @include button-variant( + $Combo-addBtn-bg, + $Combo-addBtn-border, + $Combo-addBtn-color, + $Combo-addBtn-onHover-bg, + $Combo-addBtn-onHover-border, + $Combo-addBtn-onHover-color, + $Combo-addBtn-onActive-bg, + $Combo-addBtn-onActive-border, + $Combo-addBtn-onActive-color + ); + + &.is-disabled { + pointer-events: none; + opacity: $Button-onDisabled-opacity; + } + } + + &-items { + &:empty { + display: none; + + + .#{$ns}Combo-toolbar { + padding-top: ($Form-input-height - $Combo-addBtn-height) / 2; + } + } + + margin-bottom: $Combo-items-marginBottom; + } + + &--hor { + .#{$ns}Combo-item { + display: flex; + flex-wrap: nowrap; + } + + .#{$ns}Combo-item + .#{$ns}Combo-item { + margin-top: $Combo--horizontal-item-gap; + } + + .#{$ns}Combo-itemInner { + flex-basis: 0; + flex-grow: 1; + } + + .#{$ns}Combo-itemTag { + margin-right: $gap-sm; + + label { + color: $info; + margin-right: $gap-sm; + } + } + + .#{$ns}Combo-itemToolbar { + margin-left: $gap-xs; + display: flex; + white-space: nowrap; + align-items: flex-start; + padding-top: $Form-label-paddingTop; + + > .is-disabled { + pointer-events: none; + opacity: $Button-onDisabled-opacity; + } + } + } + + &--ver:not(&--noBorder) { + @include clearfix(); + > .#{$ns}Combo-items { + margin: (-$Combo--vertical-item-gap * 2) (-$Combo--vertical-item-gap * 2) + 0 (-$Combo--vertical-item-gap * 2); + } + + .#{$ns}Combo-itemTag { + text-align: right; + + label { + color: $info; + margin-right: $gap-sm; + } + } + + // 不严格点会命中 combo 里面嵌套 combo 的情况，so sad. + > .#{$ns}Combo-item, + > .#{$ns}Combo-items > .#{$ns}Combo-item { + border: $Combo--vertical-item-borderWidth dashed + $Combo--vertical-item-borderColor; + padding: $Combo--vertical-item-paddingY $Combo--vertical-item-paddingX; + position: relative; + } + + > .#{$ns}Combo-items > .#{$ns}Combo-item { + margin: $Combo--vertical-item-gap * 2; + } + + > .#{$ns}Combo-item > .#{$ns}Combo-itemToolbar, + > .#{$ns}Combo-items > .#{$ns}Combo-item > .#{$ns}Combo-itemToolbar { + opacity: 0; + position: absolute; + right: $Combo--vertical-itemToolbar-positionRight; + top: $Combo--vertical-itemToolbar-positionTop / 2; + transition: $Combo--vertical-itemToolbar-transion; + height: $Combo--vertical-itemToolbar-height; + line-height: $Combo--vertical-itemToolbar-height; + background-color: $Combo--vertical-itemToolbar-bg; + color: $Combo--vertical-itemToolbar-color; + border-top-left-radius: $Combo--vertical-itemToolbar-borderRadius; + border-top-right-radius: $Combo--vertical-itemToolbar-borderRadius; + padding: 0 px2rem(3px); + border-style: solid; + border-color: $Combo--vertical-itemToolbar-borderColor; + border-width: $Combo--vertical-itemToolbar-borderWidth + $Combo--vertical-itemToolbar-borderWidth 0 + $Combo--vertical-itemToolbar-borderWidth; + // margin-top: px2rem(-1px); + + .#{$ns}Combo-toolbarBtn { + color: inherit; + line-height: $Combo--vertical-itemToolbar-height; + // font-size: px2rem(14px); &:hover { - color: darken($Combo-toolbarBtn-color, 10%); + color: $Combo--vertical-itemToolbar-onHover-color; } + } + + // top: $Combo--vertical-itemToolbar-positionTop; + // opacity: 1; } - &-addBtn { - font-size: $Combo-addBtn-fontSize; + > .#{$ns}Combo-item:hover, + > .#{$ns}Combo-items > .#{$ns}Combo-item:hover { + border-color: $Combo--vertical-item-onHover-borderColor; + // border-style: solid; - @include button-size( - $Combo-addBtn-paddingY, - $Combo-addBtn-paddingX, - $Combo-addBtn-fontSize, - $Combo-addBtn-lineHeight, - $Combo-addBtn-borderRadius, - $Combo-addBtn-height - ); - - @include button-variant( - $Combo-addBtn-bg, - $Combo-addBtn-border, - $Combo-addBtn-color, - $Combo-addBtn-onHover-bg, - $Combo-addBtn-onHover-border, - $Combo-addBtn-onHover-color, - $Combo-addBtn-onActive-bg, - $Combo-addBtn-onActive-border, - $Combo-addBtn-onActive-color - ); - - &.is-disabled { - pointer-events: none; - opacity: $Button-onDisabled-opacity; - } + > .#{$ns}Combo-itemToolbar { + top: $Combo--vertical-itemToolbar-positionTop; + opacity: 1; + } } + } - &-items { - &:empty { - display: none; + &-item--dragging { + position: relative; - + .#{$ns}Combo-toolbar { - padding-top: ($Form-input-height - $Combo-addBtn-height) / 2; - } - } - - margin-bottom: $Combo-items-marginBottom; - } - - &--hor { - .#{$ns}Combo-item { - display: flex; - flex-wrap: nowrap; - } - - .#{$ns}Combo-item + .#{$ns}Combo-item { - margin-top: $Combo--horizontal-item-gap; - } - - .#{$ns}Combo-itemInner { - flex-basis: 0; - flex-grow: 1; - } - - .#{$ns}Combo-itemTag { - margin-right: $gap-sm; - - label { - color: $info; - margin-right: $gap-sm; - } - } - - .#{$ns}Combo-itemToolbar { - margin-left: $gap-xs; - display: flex; - white-space: nowrap; - align-items: flex-start; - padding-top: $Form-label-paddingTop; - - > .is-disabled { - pointer-events: none; - opacity: $Button-onDisabled-opacity; - } - } - } - - &--ver:not(&--noBorder) { - @include clearfix(); - > .#{$ns}Combo-items { - margin: (-$Combo--vertical-item-gap * 2) - (-$Combo--vertical-item-gap * 2) 0 - (-$Combo--vertical-item-gap * 2); - } - - .#{$ns}Combo-itemTag { - text-align: right; - - label { - color: $info; - margin-right: $gap-sm; - } - } - - // 不严格点会命中 combo 里面嵌套 combo 的情况，so sad. - > .#{$ns}Combo-item, - > .#{$ns}Combo-items > .#{$ns}Combo-item { - border: $Combo--vertical-item-borderWidth dashed - $Combo--vertical-item-borderColor; - padding: $Combo--vertical-item-paddingY - $Combo--vertical-item-paddingX; - position: relative; - } - - > .#{$ns}Combo-items > .#{$ns}Combo-item { - margin: $Combo--vertical-item-gap * 2; - } - - > .#{$ns}Combo-item > .#{$ns}Combo-itemToolbar, - > .#{$ns}Combo-items > .#{$ns}Combo-item > .#{$ns}Combo-itemToolbar { - opacity: 0; - position: absolute; - right: $Combo--vertical-itemToolbar-positionRight; - top: $Combo--vertical-itemToolbar-positionTop / 2; - transition: $Combo--vertical-itemToolbar-transion; - height: $Combo--vertical-itemToolbar-height; - line-height: $Combo--vertical-itemToolbar-height; - background-color: $Combo--vertical-itemToolbar-bg; - color: $Combo--vertical-itemToolbar-color; - border-top-left-radius: $Combo--vertical-itemToolbar-borderRadius; - border-top-right-radius: $Combo--vertical-itemToolbar-borderRadius; - padding: 0 px2rem(3px); - border-style: solid; - border-color: $Combo--vertical-itemToolbar-borderColor; - border-width: $Combo--vertical-itemToolbar-borderWidth - $Combo--vertical-itemToolbar-borderWidth 0 - $Combo--vertical-itemToolbar-borderWidth; - // margin-top: px2rem(-1px); - - .#{$ns}Combo-toolbarBtn { - color: inherit; - line-height: $Combo--vertical-itemToolbar-height; - // font-size: px2rem(14px); - - &:hover { - color: $Combo--vertical-itemToolbar-onHover-color; - } - } - - // top: $Combo--vertical-itemToolbar-positionTop; - // opacity: 1; - } - - > .#{$ns}Combo-item:hover, - > .#{$ns}Combo-items > .#{$ns}Combo-item:hover { - border-color: $Combo--vertical-item-onHover-borderColor; - // border-style: solid; - - > .#{$ns}Combo-itemToolbar { - top: $Combo--vertical-itemToolbar-positionTop; - opacity: 1; - } - } - } - - &-item--dragging { - position: relative; - - &:after { - content: ""; - display: block; - position: absolute; - z-index: 5; - left: 0; - top: 0; - right: 0; - bottom: 0; - width: 100%; - height: 100%; - background: rgba(0, 0, 0, 0.1); - } + &:after { + content: ''; + display: block; + position: absolute; + z-index: 5; + left: 0; + top: 0; + right: 0; + bottom: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.1); } + } } .#{$ns}Combo-dragableTip { - color: $text--muted-color; - font-size: $fontSizeSm; - margin-left: $gap-xs; + color: $text--muted-color; + font-size: $fontSizeSm; + margin-left: $gap-xs; - &:empty { - display: none; - } + &:empty { + display: none; + } } .#{$ns}ComboControl.is-inline { - .#{$ns}Combo--hor .#{$ns}Combo-itemInner { - flex-grow: unset; - flex-basis: unset; - } + .#{$ns}Combo--hor .#{$ns}Combo-itemInner { + flex-grow: unset; + flex-basis: unset; + } - .#{$ns}Combo--ver .#{$ns}Combo-item { - display: inline-block; - } + .#{$ns}Combo--ver .#{$ns}Combo-item { + display: inline-block; + } } @include media-breakpoint-up(sm) { - .#{$ns}Combo-form .#{$ns}Form-item:last-child { - margin-bottom: 0; - } + .#{$ns}Combo-form .#{$ns}Form-item:last-child { + margin-bottom: 0; + } } diff --git a/scss/components/form/_date-range.scss b/scss/components/form/_date-range.scss index 5ff5e708..eb48d39a 100644 --- a/scss/components/form/_date-range.scss +++ b/scss/components/form/_date-range.scss @@ -1,116 +1,116 @@ .#{$ns}DateRangePicker { - position: relative; - display: inline-flex; - flex-wrap: nowrap; - border: $DatePicker-borderWidth solid $DatePicker-borderColor; - font-size: $DatePicker-fontSize; - padding: $DatePicker-paddingY $DatePicker-paddingX; - height: $DatePicker-height; - outline: none; - white-space: nowrap; - border-radius: $DatePicker-borderRadius; + position: relative; + display: inline-flex; + flex-wrap: nowrap; + border: $DatePicker-borderWidth solid $DatePicker-borderColor; + font-size: $DatePicker-fontSize; + padding: $DatePicker-paddingY $DatePicker-paddingX; + height: $DatePicker-height; + outline: none; + white-space: nowrap; + border-radius: $DatePicker-borderRadius; - color: $DatePicker-color; - background-color: $DatePicker-bg; + color: $DatePicker-color; + background-color: $DatePicker-bg; - &:not(.is-disabled) { - cursor: pointer; + &:not(.is-disabled) { + cursor: pointer; - &:hover { - background-color: $DatePicker-onHover-bg; - border-color: $DatePicker-onHover-borderColor; + &:hover { + background-color: $DatePicker-onHover-bg; + border-color: $DatePicker-onHover-borderColor; - .#{$ns}DateRangePicker-toggler { - color: $DatePicker-onHover-iconColor; - } - } + .#{$ns}DateRangePicker-toggler { + color: $DatePicker-onHover-iconColor; + } } + } - &.is-focused { - border-color: $DatePicker-onFocused-borderColor; - box-shadow: $Form-input-boxShadow; + &.is-focused { + border-color: $DatePicker-onFocused-borderColor; + box-shadow: $Form-input-boxShadow; + } + + &.is-disabled { + background: $gray200; + + > &-input { + color: $text--muted-color; } + } - &.is-disabled { - background: $gray200; + &-placeholder { + color: $DatePicker-placeholderColor; + user-select: none; + margin-right: $gap-base; + flex-basis: 0; + flex-grow: 1; + } - > &-input { - color: $text--muted-color; - } + &-value { + margin-right: $gap-base; + flex-basis: 0; + flex-grow: 1; + } + + &-toggler { + cursor: pointer; + color: $DatePicker-iconColor; + + &:hover { + color: $DatePicker-onHover-iconColor; } + } - &-placeholder { - color: $DatePicker-placeholderColor; - user-select: none; - margin-right: $gap-base; - flex-basis: 0; - flex-grow: 1; - } - - &-value { - margin-right: $gap-base; - flex-basis: 0; - flex-grow: 1; - } - - &-toggler { - cursor: pointer; - color: $DatePicker-iconColor; - - &:hover { - color: $DatePicker-onHover-iconColor; - } - } - - &-clear { - @include input-clear(); - display: inline-block; - line-height: 1; - margin-right: $gap-xs; - } + &-clear { + @include input-clear(); + display: inline-block; + line-height: 1; + margin-right: $gap-xs; + } } .#{$ns}DateRangePicker-wrap { - width: auto; - white-space: nowrap; - padding: $gap-md; + width: auto; + white-space: nowrap; + padding: $gap-md; } .#{$ns}DateRangePicker-start, .#{$ns}DateRangePicker-end { - display: inline-block; + display: inline-block; - .rdtPicker { - padding: 0; - box-shadow: none; - border: none; - } + .rdtPicker { + padding: 0; + box-shadow: none; + border: none; + } } .#{$ns}DateRangePicker-end { - margin-left: 20px; + margin-left: 20px; } .#{$ns}DateRangePicker-rangers { - margin: 0 0 $gap-sm; - padding: 0; - list-style: none; + margin: 0 0 $gap-sm; + padding: 0; + list-style: none; } .#{$ns}DateRangePicker-ranger { - display: inline-block; - margin-right: $gap-sm; + display: inline-block; + margin-right: $gap-sm; - a { - cursor: pointer; - } + a { + cursor: pointer; + } } .#{$ns}DateRangePicker-actions { - text-align: right; - margin-top: $gap-sm; + text-align: right; + margin-top: $gap-sm; } .#{$ns}DateRangeControl:not(.is-inline) > .#{$ns}DateRangePicker { - display: flex; + display: flex; } diff --git a/scss/components/form/_date.scss b/scss/components/form/_date.scss index c329500e..dc979797 100644 --- a/scss/components/form/_date.scss +++ b/scss/components/form/_date.scss @@ -1,308 +1,312 @@ .#{$ns}DatePicker { - position: relative; - display: inline-flex; - flex-wrap: nowrap; - border: $DatePicker-borderWidth solid $DatePicker-borderColor; - font-size: $DatePicker-fontSize; - padding: $DatePicker-paddingY $DatePicker-paddingX; - height: $DatePicker-height; - outline: none; - white-space: nowrap; - color: $DatePicker-color; - background-color: $DatePicker-bg; - border-radius: $DatePicker-borderRadius; + position: relative; + display: inline-flex; + flex-wrap: nowrap; + border: $DatePicker-borderWidth solid $DatePicker-borderColor; + font-size: $DatePicker-fontSize; + padding: $DatePicker-paddingY $DatePicker-paddingX; + height: $DatePicker-height; + outline: none; + white-space: nowrap; + color: $DatePicker-color; + background-color: $DatePicker-bg; + border-radius: $DatePicker-borderRadius; - &:not(.is-disabled) { - cursor: pointer; + &:not(.is-disabled) { + cursor: pointer; - &:hover { - background-color: $DatePicker-onHover-bg; - border-color: $DatePicker-onHover-borderColor; + &:hover { + background-color: $DatePicker-onHover-bg; + border-color: $DatePicker-onHover-borderColor; - .#{$ns}DatePicker-toggler:before { - color: $DatePicker-onHover-iconColor; - } - } + .#{$ns}DatePicker-toggler:before { + color: $DatePicker-onHover-iconColor; + } + } + } + + &.is-focused { + border-color: $DatePicker-onFocused-borderColor; + box-shadow: $Form-input-boxShadow; + } + + &.is-disabled { + background: $gray200; + + > &-input { + color: $text--muted-color; + } + } + + &-placeholder { + color: $DatePicker-placeholderColor; + user-select: none; + margin-right: $gap-base; + flex-basis: 0; + flex-grow: 1; + } + + &-value { + margin-right: $gap-base; + flex-basis: 0; + flex-grow: 1; + } + + &-toggler { + cursor: pointer; + color: $DatePicker-iconColor; + + &:hover { + color: $DatePicker-onHover-iconColor; } - &.is-focused { - border-color: $DatePicker-onFocused-borderColor; - box-shadow: $Form-input-boxShadow; + &:before { + line-height: 1; + color: inherit; + content: $DatePicker-toggler-icon; + display: inline-block; + font-size: $DatePicker-toggler-fontSize; + font-family: $DatePicker-toggler-vendor; } + } - &.is-disabled { - background: $gray200; - - >&-input { - color: $text--muted-color; - } - } - - &-placeholder { - color: $DatePicker-placeholderColor; - user-select: none; - margin-right: $gap-base; - flex-basis: 0; - flex-grow: 1; - } - - &-value { - margin-right: $gap-base; - flex-basis: 0; - flex-grow: 1; - } - - &-toggler { - cursor: pointer; - color: $DatePicker-iconColor; - - &:hover { - color: $DatePicker-onHover-iconColor; - } - - &:before { - line-height: 1; - color: inherit; - content: $DatePicker-toggler-icon; - display: inline-block; - font-size: $DatePicker-toggler-fontSize; - font-family: $DatePicker-toggler-vendor; - } - } - - &-clear { - display: inline-block; - @include input-clear(); - line-height: 1; - margin-right: $gap-xs; - } + &-clear { + display: inline-block; + @include input-clear(); + line-height: 1; + margin-right: $gap-xs; + } } -.#{$ns}DateControl:not(.is-inline)>.#{$ns}DatePicker { - display: flex; +.#{$ns}DateControl:not(.is-inline) > .#{$ns}DatePicker { + display: flex; } .#{$ns}DatePicker-shortcuts { - margin: $gap-sm $gap-md (-$gap-sm) $gap-md; - padding: 0; - list-style: none; - max-width: 206px; + margin: $gap-sm $gap-md (-$gap-sm) $gap-md; + padding: 0; + list-style: none; + max-width: 206px; } .#{$ns}DatePicker-shortcut { - display: inline-block; - margin-right: $gap-sm; + display: inline-block; + margin-right: $gap-sm; - a { - cursor: pointer; - } + a { + cursor: pointer; + } } // override third-party styles .rdt { - user-select: none; - font-size: $Calendar-fontSize; - color: $Calendar-color; + user-select: none; + font-size: $Calendar-fontSize; + color: $Calendar-color; - .rdtPicker { - margin-top: 0; - padding: $gap-md; - background: transparent; - border: none; + .rdtPicker { + margin-top: 0; + padding: $gap-md; + background: transparent; + border: none; - .dow { - color: $Calendar-wLabel-color; - font-weight: normal; - } - - td.rdtDay, - td.rdtHour, - td.rdtMinute, - td.rdtSecond, - .rdtTimeToggle { - background-color: $Calendar-cell-bg; - - &:hover { - background-color: $Calendar-cell-onHover-bg; - } - } - - td.rdtToday:before { - border-bottom-color: $Calendar-cell-onActive-bg; - } - - td.rdtActive.rdtToday:before { - border-bottom-color: $Calendar-cell-bg; - } - - td.rdtActive, - td.rdtActive:hover { - background: $Calendar-cell-onActive-bg; - } - - td.rdtDisabled, - td.rdtDisabled:hover { - background-color: $Calendar-cell-onDisabled-bg; - } + .dow { + color: $Calendar-wLabel-color; + font-weight: normal; } - thead tr:first-child th { - cursor: default; - text-align: left; - font-weight: normal; + td.rdtDay, + td.rdtHour, + td.rdtMinute, + td.rdtSecond, + .rdtTimeToggle { + background-color: $Calendar-cell-bg; + + &:hover { + background-color: $Calendar-cell-onHover-bg; + } } - thead tr:first-child th:hover { - background: transparent; + td.rdtToday:before { + border-bottom-color: $Calendar-cell-onActive-bg; } - tfoot { - border-top: 0; + td.rdtActive.rdtToday:before { + border-bottom-color: $Calendar-cell-bg; + } - td { - padding-top: px2rem(5px); - text-align: left; + td.rdtActive, + td.rdtActive:hover { + background: $Calendar-cell-onActive-bg; + } - span { - width: 10px; - display: inline-block; - text-align: center; - } + td.rdtDisabled, + td.rdtDisabled:hover { + background-color: $Calendar-cell-onDisabled-bg; + } + } - input { - outline: none; - width: 42px; - font-size: $Calendar-input-fontSize; - color: $Calendar-input-color; - border: 1px solid $Calendar-input-borderColor; - border-radius: $Calendar-input-borderRadius; - height: $Calendar-input-height; - line-height: $Calendar-input-lineHeight; - padding: $Calendar-input-paddingY $Calendar-input-paddingX; - box-shadow: none; + thead tr:first-child th { + cursor: default; + text-align: left; + font-weight: normal; + } - &:focus { - border-color: $Calendar-input-onFocused-borderColor; - box-shadow: none; - } - } + thead tr:first-child th:hover { + background: transparent; + } - .rdtActions { - margin-top: $gap-sm; - text-align: right; - } + tfoot { + border-top: 0; + + td { + padding-top: px2rem(5px); + text-align: left; + + span { + width: 10px; + display: inline-block; + text-align: center; + } + + input { + outline: none; + width: 42px; + font-size: $Calendar-input-fontSize; + color: $Calendar-input-color; + border: 1px solid $Calendar-input-borderColor; + border-radius: $Calendar-input-borderRadius; + height: $Calendar-input-height; + line-height: $Calendar-input-lineHeight; + padding: $Calendar-input-paddingY $Calendar-input-paddingX; + box-shadow: none; + + &:focus { + border-color: $Calendar-input-onFocused-borderColor; + box-shadow: none; } + } + + .rdtActions { + margin-top: $gap-sm; + text-align: right; + } + } + } + + .rdtCounter { + .rdtBtn { + height: 30%; + line-height: px2rem(20px); } - .rdtCounter { - .rdtBtn { - height: 30%; - line-height: px2rem(20px); - } - - .rdtCount { - height: 40%; - display: flex; - align-items: center; - justify-content: center; - } + .rdtCount { + height: 40%; + display: flex; + align-items: center; + justify-content: center; } + } } .rdtBtn { - line-height: $Calendar-btn-lineHeight; - padding: $Calendar-btn-paddingY $Calendar-btn-paddingX; - display: inline-block; - vertical-align: middle; - text-align: center; - user-select: none; - cursor: pointer; + line-height: $Calendar-btn-lineHeight; + padding: $Calendar-btn-paddingY $Calendar-btn-paddingX; + display: inline-block; + vertical-align: middle; + text-align: center; + user-select: none; + cursor: pointer; + text-decoration: none; + font-size: $Calendar-btn-fontSize; + + &:hover { text-decoration: none; - font-size: $Calendar-btn-fontSize; + } - &:hover { - text-decoration: none; - } + &.is-disabled { + opacity: 0.6; + pointer-events: none; + } - &.is-disabled { - opacity: 0.6; - pointer-events: none; - } + .fa, + .iconfont { + font-size: $fontSizeSm; + } - .fa, - .iconfont { - font-size: $fontSizeSm; - } + @include button-variant( + $Calendar-btn-bg, + $Calendar-btn-border, + $Calendar-btn-color, + $Calendar-btn-onHover-bg, + $Calendar-btn-onHover-border, + $Calendar-btn-onHover-color, + $Calendar-btn-onActive-bg, + $Calendar-btn-onActive-border, + $Calendar-btn-onActive-color + ); - @include button-variant($Calendar-btn-bg, - $Calendar-btn-border, - $Calendar-btn-color, - $Calendar-btn-onHover-bg, - $Calendar-btn-onHover-border, - $Calendar-btn-onHover-color, - $Calendar-btn-onActive-bg, - $Calendar-btn-onActive-border, - $Calendar-btn-onActive-color); + border-radius: $Calendar-btn-borderRadius; - border-radius: $Calendar-btn-borderRadius; + & + .rdtBtn { + margin-left: $gap-xs; + } - &+.rdtBtn { - margin-left: $gap-xs; - } - - &Cancel { - @include button-variant($Calendar-btnCancel-bg, - $Calendar-btnCancel-border, - $Calendar-btnCancel-color, - $Calendar-btnCancel-onHover-bg, - $Calendar-btnCancel-onHover-border, - $Calendar-btnCancel-onHover-color, - $Calendar-btnCancel-onActive-bg, - $Calendar-btnCancel-onActive-border, - $Calendar-btnCancel-onActive-color); - } + &Cancel { + @include button-variant( + $Calendar-btnCancel-bg, + $Calendar-btnCancel-border, + $Calendar-btnCancel-color, + $Calendar-btnCancel-onHover-bg, + $Calendar-btnCancel-onHover-border, + $Calendar-btnCancel-onHover-color, + $Calendar-btnCancel-onActive-bg, + $Calendar-btnCancel-onActive-border, + $Calendar-btnCancel-onActive-color + ); + } } .rdtBtnPrev:before, .rdtBtnNext:before { - display: inline-block; - color: inherit; - font-style: normal; - line-height: 1; + display: inline-block; + color: inherit; + font-style: normal; + line-height: 1; } .rdtBtnPrev:before { - font-family: $DatePicker-prevBtn-vendor; - font-size: $DatePicker-prevBtn-fontSize; - content: $DatePicker-prevBtn-icon; + font-family: $DatePicker-prevBtn-vendor; + font-size: $DatePicker-prevBtn-fontSize; + content: $DatePicker-prevBtn-icon; } .rdtBtnNext:before { - font-family: $DatePicker-nextBtn-vendor; - font-size: $DatePicker-nextBtn-fontSize; - content: $DatePicker-nextBtn-icon; + font-family: $DatePicker-nextBtn-vendor; + font-size: $DatePicker-nextBtn-fontSize; + content: $DatePicker-nextBtn-icon; } .rdtHeader { - display: table; - table-layout: fixed; - border-collapse: separate; + display: table; + table-layout: fixed; + border-collapse: separate; + width: 100%; + + .rdtBtn { + display: table-cell; + width: px2rem(30px); + padding: 0; + } + + .rdtSelect { + display: table-cell; width: 100%; + border-left: 1px solid $DatePicker-header-select-borderColor; + border-right: 1px solid $DatePicker-header-select-borderColor; - .rdtBtn { - display: table-cell; - width: px2rem(30px); - padding: 0; + .#{$ns}Select { + display: flex; } - - .rdtSelect { - display: table-cell; - width: 100%; - border-left: 1px solid $DatePicker-header-select-borderColor; - border-right: 1px solid $DatePicker-header-select-borderColor; - - .#{$ns}Select { - display: flex; - } - } -} \ No newline at end of file + } +} diff --git a/scss/components/form/_editor.scss b/scss/components/form/_editor.scss index 577a265c..f5d7d1de 100644 --- a/scss/components/form/_editor.scss +++ b/scss/components/form/_editor.scss @@ -1,63 +1,63 @@ // todo .#{$ns}EditorControl { - min-height: px2rem(200px); - max-height: px2rem(400px); + min-height: px2rem(200px); + max-height: px2rem(400px); - > .#{$ns}MonacoEditor, - > .#{$ns}MonacoEditor > .monaco-diff-editor { - min-height: px2rem(198px); + > .#{$ns}MonacoEditor, + > .#{$ns}MonacoEditor > .monaco-diff-editor { + min-height: px2rem(198px); + } + + overflow: visible; + height: auto; + border: $Form-input-borderWidth solid $Form-input-borderColor; + max-width: 100%; + box-sizing: content-box; + + &.is-error { + border-color: $Form-input-onError-borderColor; + } + + &.is-focused { + border-color: $Form-input-onFocused-borderColor; + } + + &--md { + min-height: 250px; + + > .#{$ns}MonacoEditor { + min-height: 250px; } + } - overflow: visible; - height: auto; - border: $Form-input-borderWidth solid $Form-input-borderColor; - max-width: 100%; - box-sizing: content-box; + &--lg { + min-height: 300px; - &.is-error { - border-color: $Form-input-onError-borderColor; + > .#{$ns}MonacoEditor { + min-height: 300px; } + } - &.is-focused { - border-color: $Form-input-onFocused-borderColor; + &--xl { + min-height: 400px; + + > .#{$ns}MonacoEditor { + min-height: 400px; } + } - &--md { - min-height: 250px; + &--xxl { + min-height: 500px; - > .#{$ns}MonacoEditor { - min-height: 250px; - } - } - - &--lg { - min-height: 300px; - - > .#{$ns}MonacoEditor { - min-height: 300px; - } - } - - &--xl { - min-height: 400px; - - > .#{$ns}MonacoEditor { - min-height: 400px; - } - } - - &--xxl { - min-height: 500px; - - > .#{$ns}MonacoEditor { - min-height: 500px; - } + > .#{$ns}MonacoEditor { + min-height: 500px; } + } } .monaco-inputbox > .wrapper { - padding: 0; + padding: 0; } // @media (min-width: 768px) { diff --git a/scss/components/form/_fieldset.scss b/scss/components/form/_fieldset.scss index e310d28d..7806c4f2 100644 --- a/scss/components/form/_fieldset.scss +++ b/scss/components/form/_fieldset.scss @@ -1,128 +1,128 @@ %fieldSetBase { + position: relative; + + &:after { + content: ''; + pointer-events: none; + border: 1px solid $borderColor; + position: absolute; + z-index: 0; + top: 11px; + left: 0; + bottom: 0; + right: 0; + } + + > legend { + position: absolute; + top: 0; + left: 0; + display: inline-block; + border: 0; + width: auto; + z-index: 1; + background: $Fieldset-legend-bgColor; + border-left: 0 !important; + } + + .collapse { position: relative; - - &:after { - content: ''; - pointer-events: none; - border: 1px solid $borderColor; - position: absolute; - z-index: 0; - top: 11px; - left: 0; - bottom: 0; - right: 0; - } - - >legend { - position: absolute; - top: 0; - left: 0; - display: inline-block; - border: 0; - width: auto; - z-index: 1; - background: $Fieldset-legend-bgColor; - border-left: 0 !important; - } - - .collapse { - position: relative; - } + } } fieldset.#{$ns}Collapse { - >legend { - font-weight: $fontWeightNormal; - padding: $gap-xs 0; - font-size: $fontSizeMd; - color: $text--loud-color; - border-left: $primary px2rem(4px) solid; - line-height: 1.2; - margin: 8px 0 28px; - padding: 0 0 0 14px; - cursor: pointer; - border-bottom: 0; + > legend { + font-weight: $fontWeightNormal; + padding: $gap-xs 0; + font-size: $fontSizeMd; + color: $text--loud-color; + border-left: $primary px2rem(4px) solid; + line-height: 1.2; + margin: 8px 0 28px; + padding: 0 0 0 14px; + cursor: pointer; + border-bottom: 0; + } + + &--xs { + @extend %fieldSetBase; + padding: 20px 5px 5px 5px; + + > legend { + left: 5px; + font-size: $fontSizeXs; + padding: 0 3px; + margin: 0 0 0 -3px; } - &--xs { - @extend %fieldSetBase; - padding: 20px 5px 5px 5px; + &:after { + top: 6px; + } + } - >legend { - left: 5px; - font-size: $fontSizeXs; - padding: 0 3px; - margin: 0 0 0 -3px; - } + &--sm { + @extend %fieldSetBase; - &:after { - top: 6px; - } + padding: 25px 10px 10px 10px; + + > legend { + left: 10px; + font-size: $fontSizeSm; + padding: 0 5px; + margin: 0 0 0 -5px; } - &--sm { - @extend %fieldSetBase; + &:after { + top: 6px; + } + } - padding: 25px 10px 10px 10px; + &--base { + @extend %fieldSetBase; - >legend { - left: 10px; - font-size: $fontSizeSm; - padding: 0 5px; - margin: 0 0 0 -5px; - } + padding: 30px 15px 15px 15px; - &:after { - top: 6px; - } + > legend { + left: 15px; + font-size: $fontSizeBase; + padding: 0 8px; + margin: 0 0 0 -8px; } - &--base { - @extend %fieldSetBase; + &:after { + top: 7px; + } + } - padding: 30px 15px 15px 15px; + &--md { + @extend %fieldSetBase; + padding: 30px 20px 20px 20px; - >legend { - left: 15px; - font-size: $fontSizeBase; - padding: 0 8px; - margin: 0 0 0 -8px; - } - - &:after { - top: 7px; - } + > legend { + left: 20px; + font-size: $fontSizeMd; + padding: 0 10px; + margin: 0 0 0 -10px; } - &--md { - @extend %fieldSetBase; - padding: 30px 20px 20px 20px; + &:after { + top: 7px; + } + } - >legend { - left: 20px; - font-size: $fontSizeMd; - padding: 0 10px; - margin: 0 0 0 -10px; - } + &--lg { + @extend %fieldSetBase; + padding: 40px 30px 30px 30px; - &:after { - top: 7px; - } + > legend { + left: 30px; + font-size: $fontSizeLg; + padding: 0 15px; + margin: 0 0 0 -15px; } - &--lg { - @extend %fieldSetBase; - padding: 40px 30px 30px 30px; - - >legend { - left: 30px; - font-size: $fontSizeLg; - padding: 0 15px; - margin: 0 0 0 -15px; - } - - &:after { - top: 9px; - } + &:after { + top: 9px; } -} \ No newline at end of file + } +} diff --git a/scss/components/form/_file.scss b/scss/components/form/_file.scss index 5046b814..ee17cbab 100644 --- a/scss/components/form/_file.scss +++ b/scss/components/form/_file.scss @@ -1,155 +1,147 @@ .#{$ns}FileControl { - &-dropzone { - outline: none; + &-dropzone { + outline: none; + } + &-selectBtn { + width: px2rem(120px); + + > svg { + margin-right: 10px; + width: pxrem(16px); + height: pxrem(16px); + } + } + + // &-dropzone:focus { + // .#{$ns}FileControl-selectBtn { + // background: $Button--default-onHover-bg; + // border-color: $Button--default-onHover-border; + // color: $Button--default-onHover-color; + // } + + // &:after { + // content: '当前状态接受从剪切板中粘贴文件。'; + // color: $text--muted-color; + // font-size: 11px; + // margin-top: 10px; + // } + // } + + &-description { + margin-left: 10px; + color: #999; + font-size: 12px; + } + + &-list { + list-style: none; + margin: 10px 0; + padding: 0; + width: 250px; + + > li { + color: #333; + font-size: 12px; + + &:hover { + color: #108cee; + background: #f3f3f3; + } + } + } + + &-itemInfo { + padding: 0px 6px; + line-height: 26px; + height: 26px; + + &.is-invalid { + color: #999; } - &-selectBtn { - width: px2rem(120px); - - - >svg { - margin-right: 10px; - width: pxrem(16px); - height: pxrem(16px); - } + > svg:first-child { + margin-right: 10px; } - // &-dropzone:focus { - // .#{$ns}FileControl-selectBtn { - // background: $Button--default-onHover-bg; - // border-color: $Button--default-onHover-border; - // color: $Button--default-onHover-color; - // } + > svg:not(:first-child) { + margin-left: 10px; + width: px2rem(16px); + height: px2rem(16px); + top: px2rem(5px); + } + } - // &:after { - // content: '当前状态接受从剪切板中粘贴文件。'; - // color: $text--muted-color; - // font-size: 11px; - // margin-top: 10px; - // } - // } + &-itemInfoText { + white-space: nowrap; + max-width: 180px; + overflow: hidden; + text-overflow: ellipsis; + display: inline-block; + vertical-align: middle; + } - &-description { - margin-left: 10px; - color: #999; - font-size: 12px; + &-clear { + float: right; + color: #999; + display: none; + cursor: pointer; + + &:hover { + color: #333; + } + } + + &-list > li:hover &-clear { + display: block; + } + + &-progressInfo { + display: inline-flex; + height: 20px; + padding: 0 6px; + transform: translateY(-3px); + width: 100%; + align-items: center; + white-space: nowrap; + text-overflow: ellipsis; + + > span { + display: inline-block; + padding: 0 4px 0 10px; + font-size: 12px; } - &-list { - list-style: none; - margin: 10px 0; - padding: 0; - width: 250px; - - >li { - color: #333; - font-size: 12px; - - &:hover { - color: #108cee; - background: #f3f3f3; - } - - - } + > svg { + display: inline-block; + margin: 0 4px 0 10px; + width: 14px; + height: 14px; + top: 0; } + } + &-progress { + height: 5px; + flex: 1; + background: #ebebeb; - - &-itemInfo { - padding: 0px 6px; - line-height: 26px; - height: 26px; - - &.is-invalid { - color: #999; - } - - >svg:first-child { - margin-right: 10px; - } - - >svg:not(:first-child) { - margin-left: 10px; - width: px2rem(16px); - height: px2rem(16px); - top: px2rem(5px); - } + > span { + display: block; + background: $info; + height: 100%; + min-width: 10%; + transition: ease-out width 0.3s; } + } - &-itemInfoText { - white-space: nowrap; - max-width: 180px; - overflow: hidden; - text-overflow: ellipsis; - display: inline-block; - vertical-align: middle; - } - - &-clear { - float: right; - color: #999; - display: none; - cursor: pointer; - - &:hover { - color: #333; - } - } - - &-list>li:hover &-clear { - display: block; - } - - &-progressInfo { - display: inline-flex; - height: 20px; - padding: 0 6px; - transform: translateY(-3px); - width: 100%; - align-items: center; - white-space: nowrap; - text-overflow: ellipsis; - - >span { - display: inline-block; - padding: 0 4px 0 10px; - font-size: 12px; - } - - >svg { - display: inline-block; - margin: 0 4px 0 10px; - width: 14px; - height: 14px; - top: 0; - } - } - - - - &-progress { - height: 5px; - flex: 1; - background: #ebebeb; - - >span { - display: block; - background: $info; - height: 100%; - min-width: 10%; - transition: ease-out width 0.3s; - } - } - - &-acceptTip { - height: 120px; - color: #999; - border: 2px dashed $info; - border-radius: $borderRadius; - background: #f3f9fe; - line-height: 120px; - text-align: center; - } -} \ No newline at end of file + &-acceptTip { + height: 120px; + color: #999; + border: 2px dashed $info; + border-radius: $borderRadius; + background: #f3f9fe; + line-height: 120px; + text-align: center; + } +} diff --git a/scss/components/form/_group.scss b/scss/components/form/_group.scss index aac06e2b..a96da245 100644 --- a/scss/components/form/_group.scss +++ b/scss/components/form/_group.scss @@ -1,103 +1,103 @@ .#{$ns}Form-groupColumn { - margin-bottom: $gap-sm; + margin-bottom: $gap-sm; } @include media-breakpoint-up(md) { - .#{$ns}Form-group { - margin-bottom: $Form-item-gap; + .#{$ns}Form-group { + margin-bottom: $Form-item-gap; - .#{$ns}Form-value > & { - margin-bottom: $Form-input-marginBottom; - } - - &--hor { - display: flex; - flex-wrap: nowrap; - margin-left: -$Form-group-gutterWidth / 2; - margin-right: -$Form-group-gutterWidth / 2; - align-items: flex-start; - - &.v-middle { - align-items: center; - } - - &.v-bottom { - align-items: flex-end; - } - - > * { - padding-left: $Form-group-gutterWidth / 2; - padding-right: $Form-group-gutterWidth / 2; - } - - > .#{$ns}Form-item--inline { - margin-right: 0; - } - - > .#{$ns}Form-item, - > div > .#{$ns}Form-item { - margin-bottom: 0; - } - - .#{$ns}Form-input > .#{$ns}Form-group { - margin-bottom: 0; - } - } - - &--lg { - margin-left: -$Form-group--lg-gutterWidth / 2; - margin-right: -$Form-group--lg-gutterWidth / 2; - - > * { - padding-left: $Form-group--lg-gutterWidth / 2; - padding-right: $Form-group--lg-gutterWidth / 2; - } - } - - &--md { - margin-left: -$Form-group--md-gutterWidth / 2; - margin-right: -$Form-group--md-gutterWidth / 2; - - > * { - padding-left: $Form-group--md-gutterWidth / 2; - padding-right: $Form-group--md-gutterWidth / 2; - } - } - - &--sm { - margin-left: -$Form-group--sm-gutterWidth / 2; - margin-right: -$Form-group--sm-gutterWidth / 2; - - > * { - padding-left: $Form-group--sm-gutterWidth / 2; - padding-right: $Form-group--sm-gutterWidth / 2; - } - } - - &--xs { - margin-left: -$Form-group--xs-gutterWidth / 2; - margin-right: -$Form-group--xs-gutterWidth / 2; - - > * { - padding-left: $Form-group--xs-gutterWidth / 2; - padding-right: $Form-group--xs-gutterWidth / 2; - } - } + .#{$ns}Form-value > & { + margin-bottom: $Form-input-marginBottom; } - .#{$ns}Form-groupColumn { - flex-basis: 0; - flex-grow: 1; - width: 0; - max-width: 100%; + &--hor { + display: flex; + flex-wrap: nowrap; + margin-left: -$Form-group-gutterWidth / 2; + margin-right: -$Form-group-gutterWidth / 2; + align-items: flex-start; + + &.v-middle { + align-items: center; + } + + &.v-bottom { + align-items: flex-end; + } + + > * { + padding-left: $Form-group-gutterWidth / 2; + padding-right: $Form-group-gutterWidth / 2; + } + + > .#{$ns}Form-item--inline { + margin-right: 0; + } + + > .#{$ns}Form-item, + > div > .#{$ns}Form-item { margin-bottom: 0; + } + + .#{$ns}Form-input > .#{$ns}Form-group { + margin-bottom: 0; + } } - @for $i from (1) through $Form--horizontal-columns { - .#{$ns}Form-groupColumn--#{$i} { - flex: 0 0 percentage($i / $Form--horizontal-columns); - max-width: percentage($i / $Form--horizontal-columns); - min-height: 1px; - } + &--lg { + margin-left: -$Form-group--lg-gutterWidth / 2; + margin-right: -$Form-group--lg-gutterWidth / 2; + + > * { + padding-left: $Form-group--lg-gutterWidth / 2; + padding-right: $Form-group--lg-gutterWidth / 2; + } } + + &--md { + margin-left: -$Form-group--md-gutterWidth / 2; + margin-right: -$Form-group--md-gutterWidth / 2; + + > * { + padding-left: $Form-group--md-gutterWidth / 2; + padding-right: $Form-group--md-gutterWidth / 2; + } + } + + &--sm { + margin-left: -$Form-group--sm-gutterWidth / 2; + margin-right: -$Form-group--sm-gutterWidth / 2; + + > * { + padding-left: $Form-group--sm-gutterWidth / 2; + padding-right: $Form-group--sm-gutterWidth / 2; + } + } + + &--xs { + margin-left: -$Form-group--xs-gutterWidth / 2; + margin-right: -$Form-group--xs-gutterWidth / 2; + + > * { + padding-left: $Form-group--xs-gutterWidth / 2; + padding-right: $Form-group--xs-gutterWidth / 2; + } + } + } + + .#{$ns}Form-groupColumn { + flex-basis: 0; + flex-grow: 1; + width: 0; + max-width: 100%; + margin-bottom: 0; + } + + @for $i from (1) through $Form--horizontal-columns { + .#{$ns}Form-groupColumn--#{$i} { + flex: 0 0 percentage($i / $Form--horizontal-columns); + max-width: percentage($i / $Form--horizontal-columns); + min-height: 1px; + } + } } diff --git a/scss/components/form/_icon-picker.scss b/scss/components/form/_icon-picker.scss index 7bcc8c96..1e914883 100644 --- a/scss/components/form/_icon-picker.scss +++ b/scss/components/form/_icon-picker.scss @@ -1,103 +1,103 @@ .#{$ns}IconPickerControl { - @include input-text(); + @include input-text(); - &-placeholder { - color: $Form-input-placeholderColor; - user-select: none; - position: absolute; - left: $Form-input-paddingX; - top: $Form-input-paddingY; - margin-top: 2 * $Form-input-borderWidth; - line-height: $Form-input-lineHeight; + &-placeholder { + color: $Form-input-placeholderColor; + user-select: none; + position: absolute; + left: $Form-input-paddingX; + top: $Form-input-paddingY; + margin-top: 2 * $Form-input-borderWidth; + line-height: $Form-input-lineHeight; + } + + &-valueWrap { + flex-grow: 1; + line-height: 1; + white-space: nowrap; + + > input { + display: inline-block; + width: auto; + vertical-align: middle; } + } - &-valueWrap { - flex-grow: 1; - line-height: 1; - white-space: nowrap; + &-input--withAC { + position: relative; + flex-wrap: wrap; - > input { - display: inline-block; - width: auto; - vertical-align: middle; - } + > input { + width: auto; } + } - &-input--withAC { - position: relative; - flex-wrap: wrap; + &-sugsPanel { + position: absolute; + background: $Form-select-menu-bg; + color: $Form-select-menu-color; + border: $Form-input-borderWidth solid $Form-input-onFocused-borderColor; + left: px2rem(-1px); + right: px2rem(-1px); + top: 100%; + z-index: 10; + height: auto; + } - > input { - width: auto; - } + &-tabs { + position: absolute; + top: 0; + left: 0; + right: 0; + z-index: 11; + background: $IconPicker-tabs-bg; + } + + &-tab { + display: inline-block; + padding: $IconPicker-tab-padding; + height: $IconPicker-tab-height; + line-height: $IconPicker-tab-lineHeight; + cursor: pointer; + text-align: center; + + &.active { + background: $IconPicker-tab-onActive-bg; } + } - &-sugsPanel { - position: absolute; - background: $Form-select-menu-bg; - color: $Form-select-menu-color; - border: $Form-input-borderWidth solid $Form-input-onFocused-borderColor; - left: px2rem(-1px); - right: px2rem(-1px); - top: 100%; - z-index: 10; - height: auto; - } - - &-tabs { - position: absolute; - top: 0; - left: 0; - right: 0; - z-index: 11; - background: $IconPicker-tabs-bg; - } - - &-tab { - display: inline-block; - padding: $IconPicker-tab-padding; - height: $IconPicker-tab-height; - line-height: $IconPicker-tab-lineHeight; - cursor: pointer; - text-align: center; - - &.active { - background: $IconPicker-tab-onActive-bg; - } - } - - &-singleVendor { - padding: $IconPicker-singleVendor-padding; - } - - &-multiVendor { - padding: $IconPicker-multiVendor-padding; - } - - &-sugs { - position: relative; - max-height: $IconPicker-content-maxHeight; - overflow-y: scroll; - } - - &-sugItem { - display: inline-block; - width: $IconPicker-sugItem-width; - height: $IconPicker-sugItem-height; - text-align: center; - line-height: $IconPicker-sugItem-lineHeight; - cursor: pointer; - } - - &-value { - user-select: none; - line-height: $Form-input-lineHeight * $Form-input-fontSize; - vertical-align: middle; - display: inline-block; - - > i { - display: inline-block; - margin-right: $IconPicker-selectedIcon-marginRight; - } + &-singleVendor { + padding: $IconPicker-singleVendor-padding; + } + + &-multiVendor { + padding: $IconPicker-multiVendor-padding; + } + + &-sugs { + position: relative; + max-height: $IconPicker-content-maxHeight; + overflow-y: scroll; + } + + &-sugItem { + display: inline-block; + width: $IconPicker-sugItem-width; + height: $IconPicker-sugItem-height; + text-align: center; + line-height: $IconPicker-sugItem-lineHeight; + cursor: pointer; + } + + &-value { + user-select: none; + line-height: $Form-input-lineHeight * $Form-input-fontSize; + vertical-align: middle; + display: inline-block; + + > i { + display: inline-block; + margin-right: $IconPicker-selectedIcon-marginRight; } + } } diff --git a/scss/components/form/_image.scss b/scss/components/form/_image.scss index 432756ea..b2937433 100644 --- a/scss/components/form/_image.scss +++ b/scss/components/form/_image.scss @@ -1,254 +1,254 @@ .#{$ns}ImageControl { + position: relative; + + &-dropzone { + outline: none; + } + + &-addBtn { + margin: 0; + width: px2rem(120px); + height: px2rem(120px); + display: inline-flex; + justify-content: center; + align-items: center; + border: $borderWidth solid $borderColor; + cursor: pointer; + + @include button-variant( + $ImageControl-addBtn-bg, + $ImageControl-addBtn-border, + $ImageControl-addBtn-color, + $ImageControl-addBtn-onHover-bg, + $ImageControl-addBtn-onHover-border, + $ImageControl-addBtn-onHover-color, + $ImageControl-addBtn-onActive-bg, + $ImageControl-addBtn-onActive-border, + $ImageControl-addBtn-onActive-color + ); + + > svg { + width: px2rem(50px); + height: px2rem(50px); + top: 0; + } + + &.is-disabled { + pointer-events: none; + border: px2rem(1px) solid $ImageControl-addBtn-onDisabled-border; + background: $ImageControl-addBtn-onDisabled-bg; + color: $ImageControl-addBtn-onDisabled-color; + } + } + + &-pasteTip { + pointer-events: none; + left: 0; + top: 50%; + transform: translateY(-50%); + position: absolute; + font-size: $Tooltip--attr-fontSize; + line-height: $Tooltip--attr-lineHeigt; + text-align: left; + white-space: nowrap; + background: $Tooltip--attr-bg; + border: $Tooltip--attr-borderWidth solid $Tooltip--attr-borderColor; + border-radius: $Tooltip--attr-borderRadius; + box-shadow: $Tooltip--attr-boxShadow; + left: 100%; + color: $Tooltip--attr-color; + padding: $Tooltip--attr-paddingY $Tooltip--attr-paddingX; + margin: 30px 0 0 $Tooltip--attr-gap; + } + + &-dropzone:focus &-addBtn { + border-color: $ImageControl-addBtn-onHover-border; + background: $ImageControl-addBtn-onHover-bg; + color: $ImageControl-addBtn-onHover-color; + } + + &-item { + border: $borderWidth solid $borderColor; + vertical-align: top; + padding: px2rem(5px); + display: inline-block; + margin-right: px2rem(15px); + margin-right: px2rem(15px); + position: relative; + } + + &-itemImageWrap { + width: px2rem(108px); + height: px2rem(108px); + background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwMCIgaGVpZ2h0PSI0MDAiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdHRlcm4gaWQ9ImdyaWQiIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgICAgICAgICAgIDxyZWN0IGZpbGw9ImJsYWNrIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIG9wYWNpdHk9IjAuMSIgLz4KICAgICAgICAgICAgPHJlY3QgZmlsbD0id2hpdGUiIHg9IjEwIiB5PSIwIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIC8+CiAgICAgICAgICAgIDxyZWN0IGZpbGw9ImJsYWNrIiB4PSIxMCIgeT0iMTAiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgb3BhY2l0eT0iMC4xIiAvPgogICAgICAgICAgICA8cmVjdCBmaWxsPSJ3aGl0ZSIgeD0iMCIgeT0iMTAiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgLz4KICAgICAgICA8L3BhdHRlcm4+CiAgICA8L2RlZnM+CiAgICA8cmVjdCBmaWxsPSJ1cmwoI2dyaWQpIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiAvPgo8L3N2Zz4='); + overflow: hidden; position: relative; - &-dropzone { - outline: none; + > img { + position: absolute; + left: 50%; + top: 50%; + height: 100%; + width: auto; + transform: translate(-50%, -50%); + } + } + + &-itemOverlay { + background: rgba(0, 0, 0, 0.6); + position: absolute; + width: px2rem(108px); + height: px2rem(108px); + display: none; + top: px2rem(5px); + left: px2rem(5px); + + justify-content: center; + align-items: center; + align-content: center; + flex-wrap: wrap; + color: #fff; + + > div { + width: 100%; + text-align: center; + margin-bottom: 5px; } - &-addBtn { - margin: 0; - width: px2rem(120px); - height: px2rem(120px); - display: inline-flex; - justify-content: center; - align-items: center; - border: $borderWidth solid $borderColor; - cursor: pointer; + > a { + cursor: pointer; + color: #fff; + display: inline-block; + padding: 0 5px; + line-height: 1; + font-size: px2rem(16px); + } + } - @include button-variant($ImageControl-addBtn-bg, - $ImageControl-addBtn-border, - $ImageControl-addBtn-color, - $ImageControl-addBtn-onHover-bg, - $ImageControl-addBtn-onHover-border, - $ImageControl-addBtn-onHover-color, - $ImageControl-addBtn-onActive-bg, - $ImageControl-addBtn-onActive-border, - $ImageControl-addBtn-onActive-color); + &-item:hover &-itemOverlay { + display: flex; + } - >svg { - width: px2rem(50px); - height: px2rem(50px); - top: 0; - } + &-itemClear { + position: absolute; + cursor: pointer; - &.is-disabled { - pointer-events: none; - border: px2rem(1px) solid $ImageControl-addBtn-onDisabled-border; - background: $ImageControl-addBtn-onDisabled-bg; - color: $ImageControl-addBtn-onDisabled-color; - } + color: #999; + top: 5px; + right: 5px; + line-height: 1; + + > svg { + top: 0; + width: 10px; + height: 10px; + } + } + + &-itemInfo { + display: inline-flex; + width: 110px; + height: 110px; + justify-content: center; + align-items: center; + align-content: center; + flex-wrap: wrap; + + > p { + width: 100%; + text-align: center; + font-size: 12px; + margin-bottom: 5px; + } + } + + &-progress { + width: 70px; + height: 5px; + background: #ebebeb; + } + + &-progressValue { + height: 5px; + display: block; + background: $info; + min-width: 10%; + transition: ease-out width 0.3s; + } + + &-retryBtn { + margin: 0; + width: px2rem(108px); + height: px2rem(108px); + display: inline-flex; + cursor: pointer; + justify-content: center; + align-items: center; + align-content: center; + flex-wrap: wrap; + color: #666; + + &:hover { + color: #333; + text-decoration: none; } - &-pasteTip { - pointer-events: none; - left: 0; - top: 50%; - transform: translateY(-50%); - position: absolute; - font-size: $Tooltip--attr-fontSize; - line-height: $Tooltip--attr-lineHeigt; - text-align: left; - white-space: nowrap; - background: $Tooltip--attr-bg; - border: $Tooltip--attr-borderWidth solid $Tooltip--attr-borderColor; - border-radius: $Tooltip--attr-borderRadius; - box-shadow: $Tooltip--attr-boxShadow; - left: 100%; - color: $Tooltip--attr-color; - padding: $Tooltip--attr-paddingY $Tooltip--attr-paddingX; - margin: 30px 0 0 $Tooltip--attr-gap; + > p { + width: 100%; + text-align: center; + color: $danger; + margin: 10px 0 0; } + } - &-dropzone:focus &-addBtn { - border-color: $ImageControl-addBtn-onHover-border; - background: $ImageControl-addBtn-onHover-bg; - color: $ImageControl-addBtn-onHover-color; + &-errorMsg { + color: $danger; + margin: 5px 0 0; + } + + &-uploadBtn { + margin-top: 5px; + } + + &-cropperWrapper { + position: relative; + + img { + max-width: 100%; + max-height: 400px; } + } - &-item { - border: $borderWidth solid $borderColor; - vertical-align: top; - padding: px2rem(5px); - display: inline-block; - margin-right: px2rem(15px); - margin-right: px2rem(15px); - position: relative; + &-croperToolbar { + display: inline-flex; + width: 50px; + position: absolute; + right: 0; + bottom: 0; + flex-direction: column; + align-items: flex-end; + + > a { + color: #fff; + padding: 2px 5px; + cursor: pointer; + font-size: 20px; } + } - &-itemImageWrap { - width: px2rem(108px); - height: px2rem(108px); - background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwMCIgaGVpZ2h0PSI0MDAiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdHRlcm4gaWQ9ImdyaWQiIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgICAgICAgICAgIDxyZWN0IGZpbGw9ImJsYWNrIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIG9wYWNpdHk9IjAuMSIgLz4KICAgICAgICAgICAgPHJlY3QgZmlsbD0id2hpdGUiIHg9IjEwIiB5PSIwIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIC8+CiAgICAgICAgICAgIDxyZWN0IGZpbGw9ImJsYWNrIiB4PSIxMCIgeT0iMTAiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgb3BhY2l0eT0iMC4xIiAvPgogICAgICAgICAgICA8cmVjdCBmaWxsPSJ3aGl0ZSIgeD0iMCIgeT0iMTAiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgLz4KICAgICAgICA8L3BhdHRlcm4+CiAgICA8L2RlZnM+CiAgICA8cmVjdCBmaWxsPSJ1cmwoI2dyaWQpIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiAvPgo8L3N2Zz4="); - overflow: hidden; - position: relative; + &-acceptTip { + height: 120px; + color: #999; + border: 2px dashed $borderColor; - >img { - position: absolute; - left: 50%; - top: 50%; - height: 100%; - width: auto; - transform: translate(-50%, -50%); - } - } + // &.is-accept { + border-color: $info; + background: #f3f9fe; + // } - &-itemOverlay { - background: rgba(0, 0, 0, 0.6); - position: absolute; - width: px2rem(108px); - height: px2rem(108px); - display: none; - top: px2rem(5px); - left: px2rem(5px); + border-radius: $borderRadius; - justify-content: center; - align-items: center; - align-content: center; - flex-wrap: wrap; - color: #fff; - - >div { - width: 100%; - text-align: center; - margin-bottom: 5px; - } - - >a { - cursor: pointer; - color: #fff; - display: inline-block; - padding: 0 5px; - line-height: 1; - font-size: px2rem(16px); - } - } - - &-item:hover &-itemOverlay { - display: flex; - } - - &-itemClear { - position: absolute; - cursor: pointer; - - color: #999; - top: 5px; - right: 5px; - line-height: 1; - - >svg { - top: 0; - width: 10px; - height: 10px; - } - } - - &-itemInfo { - display: inline-flex; - width: 110px; - height: 110px; - justify-content: center; - align-items: center; - align-content: center; - flex-wrap: wrap; - - >p { - width: 100%; - text-align: center; - font-size: 12px; - margin-bottom: 5px; - } - } - - &-progress { - width: 70px; - height: 5px; - background: #ebebeb; - } - - &-progressValue { - height: 5px; - display: block; - background: $info; - min-width: 10%; - transition: ease-out width 0.3s; - } - - &-retryBtn { - margin: 0; - width: px2rem(108px); - height: px2rem(108px); - display: inline-flex; - cursor: pointer; - justify-content: center; - align-items: center; - align-content: center; - flex-wrap: wrap; - color: #666; - - &:hover { - color: #333; - text-decoration: none; - } - - - - >p { - width: 100%; - text-align: center; - color: $danger; - margin: 10px 0 0; - } - } - - &-errorMsg { - color: $danger; - margin: 5px 0 0; - } - - &-uploadBtn { - margin-top: 5px; - } - - &-cropperWrapper { - position: relative; - - img { - max-width: 100%; - max-height: 400px; - } - } - - &-croperToolbar { - display: inline-flex; - width: 50px; - position: absolute; - right: 0; - bottom: 0; - flex-direction: column; - align-items: flex-end; - - >a { - color: #fff; - padding: 2px 5px; - cursor: pointer; - font-size: 20px; - } - } - - &-acceptTip { - height: 120px; - color: #999; - border: 2px dashed $borderColor; - - // &.is-accept { - border-color: $info; - background: #f3f9fe; - // } - - border-radius: $borderRadius; - - line-height: 120px; - text-align: center; - } -} \ No newline at end of file + line-height: 120px; + text-align: center; + } +} diff --git a/scss/components/form/_input-group.scss b/scss/components/form/_input-group.scss index cf76e47c..445f279f 100644 --- a/scss/components/form/_input-group.scss +++ b/scss/components/form/_input-group.scss @@ -1,170 +1,173 @@ .#{$ns}InputGroup { + display: inline-flex; + flex-wrap: nowrap; + + &.#{$ns}Form-control--sizeXs, + &.#{$ns}Form-control--sizeSm, + &.#{$ns}Form-control--sizeMd, + &.#{$ns}Form-control--sizeLg { display: inline-flex; - flex-wrap: nowrap; + } - &.#{$ns}Form-control--sizeXs, - &.#{$ns}Form-control--sizeSm, - &.#{$ns}Form-control--sizeMd, - &.#{$ns}Form-control--sizeLg { - display: inline-flex; + &-addOn, + & .#{$ns}Form-control { + display: inline-block; + white-space: nowrap; + } + + &-addOn { + background: $InputGroup-addOn-bg; + border: $InputGroup-addOn-borderWidth solid $InputGroup-addOn-borderColor; + line-height: $InputGroup-height - $InputGroup-paddingY * 2 - + $InputGroup-addOn-borderWidth * 2; + height: $InputGroup-height; + box-sizing: border-box; + padding: $InputGroup-paddingY $InputGroup-paddingX; + + &:not(:last-child) { + border-right: 0; } - &-addOn, - & .#{$ns}Form-control { - display: inline-block; - white-space: nowrap; + &:first-child { + @if $InputGroup-addOn-borderRadius { + border-top-left-radius: $InputGroup-addOn-borderRadius; + border-bottom-left-radius: $InputGroup-addOn-borderRadius; + } } - &-addOn { - background: $InputGroup-addOn-bg; - border: $InputGroup-addOn-borderWidth solid $InputGroup-addOn-borderColor; - line-height: $InputGroup-height - $InputGroup-paddingY * 2 - $InputGroup-addOn-borderWidth * 2; - height: $InputGroup-height; - box-sizing: border-box; - padding: $InputGroup-paddingY $InputGroup-paddingX; + &:last-child { + @if $InputGroup-addOn-borderRadius { + border-top-right-radius: $InputGroup-addOn-borderRadius; + border-bottom-right-radius: $InputGroup-addOn-borderRadius; + } + } + } - &:not(:last-child) { - border-right: 0; - } - - &:first-child { - @if $InputGroup-addOn-borderRadius { - border-top-left-radius: $InputGroup-addOn-borderRadius; - border-bottom-left-radius: $InputGroup-addOn-borderRadius; - } - } - - &:last-child { - @if $InputGroup-addOn-borderRadius { - border-top-right-radius: $InputGroup-addOn-borderRadius; - border-bottom-right-radius: $InputGroup-addOn-borderRadius; - } - } + &-btn { + .#{$ns}Button { + border-radius: 0; + border: $InputGroup-button-borderWidth solid + $InputGroup-button-borderColor; } - &-btn { - .#{$ns}Button { - border-radius: 0; - border: $InputGroup-button-borderWidth solid $InputGroup-button-borderColor; - } - - &:not(:last-child) .#{$ns}Button { - border-right: 0; - } - - &:first-child .#{$ns}Button { - @if $InputGroup-button-borderRadius { - border-top-left-radius: $InputGroup-button-borderRadius; - border-bottom-left-radius: $InputGroup-button-borderRadius; - } - } - - &:last-child .#{$ns}Button { - @if $InputGroup-button-borderRadius { - border-top-right-radius: $InputGroup-button-borderRadius; - border-bottom-right-radius: $InputGroup-button-borderRadius; - } - } + &:not(:last-child) .#{$ns}Button { + border-right: 0; } - .#{$ns}TextControl-input { - flex-basis: 0; - flex-grow: 1; - display: inline-flex; - - &:not(:first-child) { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } - - &:not(:last-child) { - border-right-width: 0; - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } + &:first-child .#{$ns}Button { + @if $InputGroup-button-borderRadius { + border-top-left-radius: $InputGroup-button-borderRadius; + border-bottom-left-radius: $InputGroup-button-borderRadius; + } } - .#{$ns}SelectControl { - @if $InputGroup-select-borderWidth { - .#{$ns}Select { - background-color: $InputGroup-select-bg; - border: $InputGroup-select-borderWidth solid $InputGroup-select-borderColor; + &:last-child .#{$ns}Button { + @if $InputGroup-button-borderRadius { + border-top-right-radius: $InputGroup-button-borderRadius; + border-bottom-right-radius: $InputGroup-button-borderRadius; + } + } + } - @if $InputGroup-select-color !=$Form-select-color { - color: $InputGroup-select-color; - } - } + .#{$ns}TextControl-input { + flex-basis: 0; + flex-grow: 1; + display: inline-flex; - &:not(:last-child) .#{$ns}Select { - border-right: 0; - } - - &:first-child .#{$ns}Select { - @if $InputGroup-select-borderRadius { - border-top-left-radius: $InputGroup-select-borderRadius; - border-bottom-left-radius: $InputGroup-select-borderRadius; - } - } - - &:last-child .#{$ns}Select { - @if $InputGroup-select-borderRadius { - border-top-right-radius: $InputGroup-select-borderRadius; - border-bottom-right-radius: $InputGroup-select-borderRadius; - } - } - } - - &:not(:first-child) .#{$ns}Select { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } - - &:not(:last-child) .#{$ns}Select { - border-right-width: 0; - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } + &:not(:first-child) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; } - @if $InputGroup-select-arrowColor !=$Form-select-caret-iconColor { - .#{$ns}Select-arrow { - color: $InputGroup-select-arrowColor; + &:not(:last-child) { + border-right-width: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + } + + .#{$ns}SelectControl { + @if $InputGroup-select-borderWidth { + .#{$ns}Select { + background-color: $InputGroup-select-bg; + border: $InputGroup-select-borderWidth + solid + $InputGroup-select-borderColor; + + @if $InputGroup-select-color !=$Form-select-color { + color: $InputGroup-select-color; } + } + + &:not(:last-child) .#{$ns}Select { + border-right: 0; + } + + &:first-child .#{$ns}Select { + @if $InputGroup-select-borderRadius { + border-top-left-radius: $InputGroup-select-borderRadius; + border-bottom-left-radius: $InputGroup-select-borderRadius; + } + } + + &:last-child .#{$ns}Select { + @if $InputGroup-select-borderRadius { + border-top-right-radius: $InputGroup-select-borderRadius; + border-bottom-right-radius: $InputGroup-select-borderRadius; + } + } } - &.is-focused { - - .#{$ns}InputGroup-addOn, - .#{$ns}TextControl-input, - .#{$ns}Select, - .#{$ns}InputGroup-btn .#{$ns}Button { - border-color: $InputGroup-addOn-onFocused-borderColor; - } - - @if $InputGroup-select-onFocused-bg !=$InputGroup-select-bg { - .#{$ns}Select { - background-color: $InputGroup-select-onFocused-bg; - } - } - - @if $InputGroup-select-onFocused-color !=$InputGroup-select-color { - .#{$ns}Select { - color: $InputGroup-select-onFocused-color; - } - } - - @if $InputGroup-select-onFocused-arrowColor !=$Form-select-caret-iconColor { - .#{$ns}Select-arrow { - color: $InputGroup-select-onFocused-arrowColor; - } - } - - .#{$ns}InputGroup-addOn { - color: $primary; - } + &:not(:first-child) .#{$ns}Select { + border-top-left-radius: 0; + border-bottom-left-radius: 0; } + + &:not(:last-child) .#{$ns}Select { + border-right-width: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + } + + @if $InputGroup-select-arrowColor !=$Form-select-caret-iconColor { + .#{$ns}Select-arrow { + color: $InputGroup-select-arrowColor; + } + } + + &.is-focused { + .#{$ns}InputGroup-addOn, + .#{$ns}TextControl-input, + .#{$ns}Select, + .#{$ns}InputGroup-btn .#{$ns}Button { + border-color: $InputGroup-addOn-onFocused-borderColor; + } + + @if $InputGroup-select-onFocused-bg !=$InputGroup-select-bg { + .#{$ns}Select { + background-color: $InputGroup-select-onFocused-bg; + } + } + + @if $InputGroup-select-onFocused-color !=$InputGroup-select-color { + .#{$ns}Select { + color: $InputGroup-select-onFocused-color; + } + } + + @if $InputGroup-select-onFocused-arrowColor !=$Form-select-caret-iconColor { + .#{$ns}Select-arrow { + color: $InputGroup-select-onFocused-arrowColor; + } + } + + .#{$ns}InputGroup-addOn { + color: $primary; + } + } } .#{$ns}InputGroup:not(.is-inline) { - display: flex; -} \ No newline at end of file + display: flex; +} diff --git a/scss/components/form/_list.scss b/scss/components/form/_list.scss index 3521d142..0952e1b1 100644 --- a/scss/components/form/_list.scss +++ b/scss/components/form/_list.scss @@ -1,123 +1,122 @@ .#{$ns}ListControl { - &-items { - display: block; - margin: -$ListControl-gutterWidth/2; + &-items { + display: block; + margin: -$ListControl-gutterWidth/2; - &:empty { - display: none; - } + &:empty { + display: none; + } + } + + &-item { + position: relative; + user-select: none; + font-size: $ListControl-fontSize; + display: inline-block; + vertical-align: middle; + margin: $ListControl-gutterWidth/2; + border: $ListControl-item-borderWidth solid $ListControl-item-borderColor; + background-color: $ListControl-item-bg; + padding: $ListControl-item-paddingY $ListControl-item-paddingX; + color: $ListControl-item-color; + transition: $ListControl-item-transition; + max-width: px2rem(200px) + 2 * $ListControl-item-paddingX; + + &:not(.is-disabled) { + cursor: pointer; } - &-item { - position: relative; - user-select: none; - font-size: $ListControl-fontSize; - display: inline-block; - vertical-align: middle; - margin: $ListControl-gutterWidth/2; - border: $ListControl-item-borderWidth solid - $ListControl-item-borderColor; - background-color: $ListControl-item-bg; - padding: $ListControl-item-paddingY $ListControl-item-paddingX; - color: $ListControl-item-color; - transition: $ListControl-item-transition; - max-width: px2rem(200px) + 2 * $ListControl-item-paddingX; - - &:not(.is-disabled) { - cursor: pointer; - } - - .b-inherit { - border-color: $ListControl-item-color; - } - - @include hover { - background-color: $ListControl-item-onHover-bg; - border-color: $ListControl-item-onHover-borderColor; - color: $ListControl-item-onHover-color; - - .b-inherit { - border-color: $ListControl-item-onHover-borderColor; - } - } - - &.is-disabled { - pointer-events: none; - opacity: $ListControl-item-onDisabled-opacity; - border-color: $ListControl-item-onDisabled-borderColor; - - @if variable-exists("ListControl-item-onDisabled-bg") { - background-color: $ListControl-item-onDisabled-bg; - } - - @if variable-exists("ListControl-item-onDisabled-color") { - color: $ListControl-item-onDisabled-color; - } - - .b-inherit { - border-color: $ListControl-item-onDisabled-borderColor; - } - } - - &:hover:active, - &.is-active { - background-color: $ListControl-item-onActive-bg; - border-color: $ListControl-item-onActive-borderColor; - color: $ListControl-item-onActive-color; - - @if variable-exists("ListControl-item-onActive-onHover-bg") { - &:hover { - background-color: $ListControl-item-onActive-onHover-bg; - } - } - - .b-inherit { - border-color: $ListControl-item-onActive-color; - } - - &:before { - content: ""; - position: absolute; - width: px2rem(14px); - height: px2rem(14px); - background-color: $ListControl-item-onActive-before-bg; - right: 0; - bottom: 0; - } - - &:after { - content: ""; - position: absolute; - width: px2rem(10px); - height: px2rem(5px); - border-color: $ListControl-item-onActive-after-borderColor; - border-style: solid; - border-width: 0 0 px2rem(2px) px2rem(2px); - right: px2rem(1px); - bottom: px2rem(5px); - transform: rotate(-40deg); - } - } + .b-inherit { + border-color: $ListControl-item-color; } - &-itemImage { - margin: $ListControl-item-paddingY * -1 $ListControl-item-paddingX * -1; + @include hover { + background-color: $ListControl-item-onHover-bg; + border-color: $ListControl-item-onHover-borderColor; + color: $ListControl-item-onHover-color; - img { - display: block; - max-width: 100%; + .b-inherit { + border-color: $ListControl-item-onHover-borderColor; + } + } + + &.is-disabled { + pointer-events: none; + opacity: $ListControl-item-onDisabled-opacity; + border-color: $ListControl-item-onDisabled-borderColor; + + @if variable-exists('ListControl-item-onDisabled-bg') { + background-color: $ListControl-item-onDisabled-bg; + } + + @if variable-exists('ListControl-item-onDisabled-color') { + color: $ListControl-item-onDisabled-color; + } + + .b-inherit { + border-color: $ListControl-item-onDisabled-borderColor; + } + } + + &:hover:active, + &.is-active { + background-color: $ListControl-item-onActive-bg; + border-color: $ListControl-item-onActive-borderColor; + color: $ListControl-item-onActive-color; + + @if variable-exists('ListControl-item-onActive-onHover-bg') { + &:hover { + background-color: $ListControl-item-onActive-onHover-bg; } - } + } - &-itemLabel { - text-align: center; - } + .b-inherit { + border-color: $ListControl-item-onActive-color; + } - &-itemImage + &-itemLabel { - margin-top: $ListControl-item-paddingY; - } + &:before { + content: ''; + position: absolute; + width: px2rem(14px); + height: px2rem(14px); + background-color: $ListControl-item-onActive-before-bg; + right: 0; + bottom: 0; + } - &-placeholder { - color: $Form-input-placeholderColor; + &:after { + content: ''; + position: absolute; + width: px2rem(10px); + height: px2rem(5px); + border-color: $ListControl-item-onActive-after-borderColor; + border-style: solid; + border-width: 0 0 px2rem(2px) px2rem(2px); + right: px2rem(1px); + bottom: px2rem(5px); + transform: rotate(-40deg); + } } + } + + &-itemImage { + margin: $ListControl-item-paddingY * -1 $ListControl-item-paddingX * -1; + + img { + display: block; + max-width: 100%; + } + } + + &-itemLabel { + text-align: center; + } + + &-itemImage + &-itemLabel { + margin-top: $ListControl-item-paddingY; + } + + &-placeholder { + color: $Form-input-placeholderColor; + } } diff --git a/scss/components/form/_matrix.scss b/scss/components/form/_matrix.scss index f8a20eb8..60b1441c 100644 --- a/scss/components/form/_matrix.scss +++ b/scss/components/form/_matrix.scss @@ -1,5 +1,5 @@ .#{$ns}MatrixControl { - &-error { - margin-bottom: 0; - } + &-error { + margin-bottom: 0; + } } diff --git a/scss/components/form/_nested-select.scss b/scss/components/form/_nested-select.scss index f58feaf5..6b8230ae 100644 --- a/scss/components/form/_nested-select.scss +++ b/scss/components/form/_nested-select.scss @@ -1,137 +1,138 @@ .#{$ns}NestedSelect { - display: inline-flex; - vertical-align: middle; - outline: none; + display: inline-flex; + vertical-align: middle; + outline: none; + position: relative; + border: $Form-select-borderWidth solid $Form-select-borderColor; + background: $Form-select-bg; + border-radius: $Form-select-borderRadius; + height: $Form-selectOption-height; + $paddingY: ( + $Form-selectOption-height - $Form-input-lineHeight * $Form-input-fontSize - + $Form-select-borderWidth * 2 + )/2; + padding: $paddingY 0 $paddingY $Form-select-paddingX; + cursor: pointer; + color: $Form-select-color; + + &.is-disabled { + color: $text--muted-color; + background: $Form-input-onDisabled-bg; + border-color: $Form-input-onDisabled-borderColor; + } + + &.is-focused, + &.is-opened { + border-color: $Form-input-onFocused-borderColor; + // border-bottom: 0; + + @if ($Form-select-onFocused-color !=$Form-select-color) { + color: $Form-select-onFocused-color; + } + } + + &.is-opened { + .#{$ns}Select-arrow:before { + transform: rotate(180deg); + } + } + + &:not(.is-disabled):hover { + background: $Form-select-onHover-bg; + } + + &-placeholder { + color: $Form-select-placeholderColor; + line-height: $Form-input-lineHeight; + } + + &-valueWrap { + user-select: none; position: relative; - border: $Form-select-borderWidth solid $Form-select-borderColor; - background: $Form-select-bg; - border-radius: $Form-select-borderRadius; - height: $Form-selectOption-height; - $paddingY: ( - $Form-selectOption-height - $Form-input-lineHeight * - $Form-input-fontSize - $Form-select-borderWidth * 2 - )/2; - padding: $paddingY 0 $paddingY $Form-select-paddingX; + flex-grow: 1; + } + + &-clear { + padding: px2rem(3px); cursor: pointer; - color: $Form-select-color; + display: flex; + align-items: center; + justify-content: center; + position: relative; + z-index: 2; - &.is-disabled { - color: $text--muted-color; - background: $Form-input-onDisabled-bg; - border-color: $Form-input-onDisabled-borderColor; + svg { + fill: $Form-input-iconColor; + width: px2rem(10px); + height: px2rem(10px); } - &.is-focused, - &.is-opened { - border-color: $Form-input-onFocused-borderColor; - // border-bottom: 0; - - @if ($Form-select-onFocused-color !=$Form-select-color) { - color: $Form-select-onFocused-color; - } + &:hover svg { + fill: darken($color: $Form-input-iconColor, $amount: 20%); } + } - &.is-opened { - .#{$ns}Select-arrow:before { - transform: rotate(180deg); - } + &-optionArrowRight { + display: inline-block; + position: absolute; + right: px2rem(10px); + + svg { + width: px2rem(12px); + height: px2rem(12px); + fill: $Form-input-iconColor; } + } - &:not(.is-disabled):hover { - background: $Form-select-onHover-bg; - } + &-menuOuter, + &-childrenOuter { + z-index: 10; + position: absolute; + background: $Form-select-menu-bg; + color: $Form-select-menu-color; + border: $Form-select-outer-borderWidth solid + $Form-input-onFocused-borderColor; + box-shadow: $Form-select-outer-boxShadow; - &-placeholder { - color: $Form-select-placeholderColor; - line-height: $Form-input-lineHeight; - } + .#{$ns}NestedSelect-option { + position: relative; + padding-left: px2rem(10px); + height: $Form-input-height; + line-height: $Form-input-height; + cursor: pointer; - &-valueWrap { - user-select: none; - position: relative; - flex-grow: 1; - } + &.is-active { + color: $Form-select-menu-onActive-color; + background-color: $Form-select-menu-onActive-bg; + } - &-clear { - padding: px2rem(3px); - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - position: relative; - z-index: 2; + &:hover { + color: $Form-select-menu-onHover-color; + background-color: $Form-select-menu-onHover-bg; + } - svg { - fill: $Form-input-iconColor; - width: px2rem(10px); - height: px2rem(10px); - } + &:hover > .#{$ns}NestedSelect-childrenOuter { + display: block; + } - &:hover svg { - fill: darken($color: $Form-input-iconColor, $amount: 20%); - } - } - - &-optionArrowRight { + .#{$ns}Checkbox { display: inline-block; - position: absolute; - right: px2rem(10px); + padding-top: 0; + } - svg { - width: px2rem(12px); - height: px2rem(12px); - fill: $Form-input-iconColor; - } + &.checkall { + border-bottom: px2rem(1px) solid #eceff8; + } } + } - &-menuOuter, - &-childrenOuter { - z-index: 10; - position: absolute; - background: $Form-select-menu-bg; - color: $Form-select-menu-color; - border: $Form-select-outer-borderWidth solid $Form-input-onFocused-borderColor; - box-shadow: $Form-select-outer-boxShadow; - - .#{$ns}NestedSelect-option { - position: relative; - padding-left: px2rem(10px); - height: $Form-input-height; - line-height: $Form-input-height; - cursor: pointer; - - &.is-active { - color: $Form-select-menu-onActive-color; - background-color: $Form-select-menu-onActive-bg; - } - - &:hover { - color: $Form-select-menu-onHover-color; - background-color: $Form-select-menu-onHover-bg; - } - - &:hover > .#{$ns}NestedSelect-childrenOuter { - display: block; - } - - .#{$ns}Checkbox { - display: inline-block; - padding-top: 0; - } - - &.checkall { - border-bottom: px2rem(1px) solid #eceff8; - } - } - } - - &-childrenOuter { - display: none; - position: relative; - width: 100%; - left: 100%; - transform: translateY(-$Form-input-height); - padding: 0; - margin: 0; - } + &-childrenOuter { + display: none; + position: relative; + width: 100%; + left: 100%; + transform: translateY(-$Form-input-height); + padding: 0; + margin: 0; + } } diff --git a/scss/components/form/_number.scss b/scss/components/form/_number.scss index 40ee651c..f6dbf9ce 100644 --- a/scss/components/form/_number.scss +++ b/scss/components/form/_number.scss @@ -1,177 +1,177 @@ .#{$ns}Number { - margin: 0; - padding: 0; - line-height: $Form-input-height; - font-size: $Form-input-fontSize; - height: $Form-input-height; + margin: 0; + padding: 0; + line-height: $Form-input-height; + font-size: $Form-input-fontSize; + height: $Form-input-height; + display: inline-block; + vertical-align: middle; + background-color: $Number-bg; + border: $Number-borderWidth solid $Number-borderColor; + border-radius: $Number-borderRadius; + + &-focused { + border-color: $Form-input-onFocused-borderColor; + box-shadow: $Form-input-boxShadow; + } + + &-handler { + text-align: center; + overflow: hidden; + display: block; + touch-action: none; + + &-active { + background: #ddd; + } + } + + &-handler-up-inner, + &-handler-down-inner { + user-select: none; + -webkit-user-select: none; display: inline-block; - vertical-align: middle; - background-color: $Number-bg; - border: $Number-borderWidth solid $Number-borderColor; - border-radius: $Number-borderRadius; + } - &-focused { - border-color: $Form-input-onFocused-borderColor; - box-shadow: $Form-input-boxShadow; + &:hover { + border-color: $Form-input-onFocused-borderColor; + + .#{$ns}Number-handler-up, + .#{$ns}Number-handler-wrap { + border-color: $Form-input-onFocused-borderColor; } + } - &-handler { - text-align: center; - overflow: hidden; - display: block; - touch-action: none; + &-disabled:hover { + border-color: $Form-input-borderColor; - &-active { - background: #ddd; - } + .#{$ns}Number-handler-up, + .#{$ns}Number-handler-wrap { + border-color: $Form-input-borderColor; } + } - &-handler-up-inner, - &-handler-down-inner { - user-select: none; - -webkit-user-select: none; - display: inline-block; - } + &-input-wrap { + overflow: hidden; + height: 100%; + } + + &-input { + width: 100%; + background-color: transparent; + text-align: left; + vertical-align: top; + outline: 0; + -moz-appearance: textfield; + line-height: $Form-input-height - $Number-borderWidth * 2; + height: 100%; + transition: all 0.3s ease; + border: 0; + border-radius: $Form-input-borderRadius; + padding: 0 $Form-input-paddingX; + } + + &-handler { + background-color: $Number-handler-bg; + color: $Number-handler-color; + font-family: $Number-handler-fontFamily; + font-size: $Number-handler-fontSize; &:hover { - border-color: $Form-input-onFocused-borderColor; - - .#{$ns}Number-handler-up, - .#{$ns}Number-handler-wrap { - border-color: $Form-input-onFocused-borderColor; - } + background-color: $Number-handler-onHover-bg; + color: $Number-handler-onHover-color; } - &-disabled:hover { + &:hover:active { + background-color: $Number-handler-onActive-bg; + } + } + + &-handler-up { + &-inner { + transform: $Number-handler--up-transform; + + &:after { + content: $Number-handler--up-content; + } + } + } + + &-handler-down { + &-inner { + &:after { + content: $Number-handler--down-content; + } + } + } + + // @if $Number-handler-mode==vertical { + &-handler-wrap { + float: right; + border-left: px2rem(1px) solid $Form-input-borderColor; + width: $Number-handler-width; + height: 100%; + } + + &-handler { + line-height: ($Form-input-height - px2rem(6px)) / 2; + height: ($Form-input-height - $Number-borderWidth * 2) / 2; + } + + &-handler-up { + border-bottom: $Number-handler-borderBottom; + padding-top: px2rem(1px); + } + + // } @else { + // position: relative; + + // &-input { + // text-align: center; + // } + + // &-handler-up, + // &-handler-down { + // position: absolute; + // width: $Number-handler-width; + // height: 100%; + // top: 0; + // } + + // &-handler-down { + // left: 0; + // } + + // &-handler-up { + // right: 0; + // } + // } + + &-handler-down-disabled, + &-handler-up-disabled { + background-color: $Number-handler-onDisabled-bg; + pointer-events: none; + color: $Number-handler-onDisabled-color; + } + + &-disabled { + .#{$ns}Number-input { + opacity: 0.72; + cursor: not-allowed; + background-color: $Number-onDisabled-bg; + } + + .#{$ns}Number-handler { + opacity: 0.72; + + &:hover { + color: $text--muted-color; border-color: $Form-input-borderColor; - - .#{$ns}Number-handler-up, - .#{$ns}Number-handler-wrap { - border-color: $Form-input-borderColor; - } - } - - &-input-wrap { - overflow: hidden; - height: 100%; - } - - &-input { - width: 100%; - background-color: transparent; - text-align: left; - vertical-align: top; - outline: 0; - -moz-appearance: textfield; - line-height: $Form-input-height - $Number-borderWidth * 2; - height: 100%; - transition: all 0.3s ease; - border: 0; - border-radius: $Form-input-borderRadius; - padding: 0 $Form-input-paddingX; - } - - &-handler { - background-color: $Number-handler-bg; - color: $Number-handler-color; - font-family: $Number-handler-fontFamily; - font-size: $Number-handler-fontSize; - - &:hover { - background-color: $Number-handler-onHover-bg; - color: $Number-handler-onHover-color; - } - - &:hover:active { - background-color: $Number-handler-onActive-bg; - } - } - - &-handler-up { - &-inner { - transform: $Number-handler--up-transform; - - &:after { - content: $Number-handler--up-content; - } - } - } - - &-handler-down { - &-inner { - &:after { - content: $Number-handler--down-content; - } - } - } - - // @if $Number-handler-mode==vertical { - &-handler-wrap { - float: right; - border-left: px2rem(1px) solid $Form-input-borderColor; - width: $Number-handler-width; - height: 100%; - } - - &-handler { - line-height: ($Form-input-height - px2rem(6px)) / 2; - height: ($Form-input-height - $Number-borderWidth * 2) / 2; - } - - &-handler-up { - border-bottom: $Number-handler-borderBottom; - padding-top: px2rem(1px); - } - - // } @else { - // position: relative; - - // &-input { - // text-align: center; - // } - - // &-handler-up, - // &-handler-down { - // position: absolute; - // width: $Number-handler-width; - // height: 100%; - // top: 0; - // } - - // &-handler-down { - // left: 0; - // } - - // &-handler-up { - // right: 0; - // } - // } - - &-handler-down-disabled, - &-handler-up-disabled { - background-color: $Number-handler-onDisabled-bg; - pointer-events: none; - color: $Number-handler-onDisabled-color; - } - - &-disabled { - .#{$ns}Number-input { - opacity: 0.72; - cursor: not-allowed; - background-color: $Number-onDisabled-bg; - } - - .#{$ns}Number-handler { - opacity: 0.72; - - &:hover { - color: $text--muted-color; - border-color: $Form-input-borderColor; - } - } + } } + } } .#{$ns}NumberControl:not(.is-inline) > .#{$ns}Number { - display: block; + display: block; } diff --git a/scss/components/form/_picker.scss b/scss/components/form/_picker.scss index 7420a629..79d3dd7e 100644 --- a/scss/components/form/_picker.scss +++ b/scss/components/form/_picker.scss @@ -1,113 +1,112 @@ .#{$ns}Picker { - @include input-text(); - outline: none; + @include input-text(); + outline: none; - &.is-focus > &-input { - border-color: $Form-input-onFocused-borderColor; - box-shadow: $Form-input-boxShadow; + &.is-focus > &-input { + border-color: $Form-input-onFocused-borderColor; + box-shadow: $Form-input-boxShadow; - @if $Form-input-onFocused-bg !=$Form-input-bg { - background-color: $Form-input-onFocused-bg; - } + @if $Form-input-onFocused-bg !=$Form-input-bg { + background-color: $Form-input-onFocused-bg; + } + } + + &-placeholder { + color: $Form-input-placeholderColor; + user-select: none; + position: absolute; + // margin-top: 2 * $Form-input-borderWidth; + line-height: $Form-input-lineHeight; + } + + &-input { + min-height: $Form-input-height; + height: auto; + } + + .#{$ns}Picker-values { + display: inline; + } + + &-valueWrap { + flex-grow: 1; + position: relative; + + > input { + width: 1rem; + display: inline-block; + } + } + + .#{$ns}Picker-valueWrap { + margin-bottom: -$gap-xs; + line-height: 1; + } + + .#{$ns}Picker-value { + cursor: pointer; + user-select: none; + white-space: nowrap; + vertical-align: middle; + line-height: $Form-input-lineHeight * $Form-input-fontSize - px2rem(2px); + display: inline-block; + font-size: $Form-selectValue-fontSize; + color: $Form-selectValue-color; + background: $Form-selectValue-bg; + border: px2rem(1px) solid $Form-selectValue-borderColor; + border-radius: 2px; + margin-right: $gap-xs; + margin-bottom: $gap-xs; + + &.is-disabled { + pointer-events: none; + opacity: $Button-onDisabled-opacity; + } + } + + .#{$ns}Picker-valueIcon { + cursor: pointer; + border-right: px2rem(1px) solid $Form-selectValue-borderColor; + padding: 1px 5px; + + &:hover { + background-color: darken($Form-selectValue-bg, 5%); + } + } + + .#{$ns}Picker-valueLabel { + padding: 0 $gap-xs; + } + + &-btn { + cursor: pointer; + color: $Picker-iconColor; + + &:hover { + color: $Picker-onHover-iconColor; } - &-placeholder { - color: $Form-input-placeholderColor; - user-select: none; - position: absolute; - // margin-top: 2 * $Form-input-borderWidth; - line-height: $Form-input-lineHeight; + &:before { + line-height: 1; + color: inherit; + content: $Picker-btn-icon; + display: inline-block; + font-size: $Picker-btn-fontSize; + font-family: $Picker-btn-vendor; } + } - &-input { - min-height: $Form-input-height; - height: auto; - } - - .#{$ns}Picker-values { - display: inline; - } - - &-valueWrap { - flex-grow: 1; - position: relative; - - > input { - width: 1rem; - display: inline-block; - } - } - - .#{$ns}Picker-valueWrap { - margin-bottom: -$gap-xs; - line-height: 1; - } - - .#{$ns}Picker-value { - cursor: pointer; - user-select: none; - white-space: nowrap; - vertical-align: middle; - line-height: $Form-input-lineHeight * $Form-input-fontSize - - px2rem(2px); - display: inline-block; - font-size: $Form-selectValue-fontSize; - color: $Form-selectValue-color; - background: $Form-selectValue-bg; - border: px2rem(1px) solid $Form-selectValue-borderColor; - border-radius: 2px; - margin-right: $gap-xs; - margin-bottom: $gap-xs; - - &.is-disabled { - pointer-events: none; - opacity: $Button-onDisabled-opacity; - } - } - - .#{$ns}Picker-valueIcon { - cursor: pointer; - border-right: px2rem(1px) solid $Form-selectValue-borderColor; - padding: 1px 5px; - - &:hover { - background-color: darken($Form-selectValue-bg, 5%); - } - } - - .#{$ns}Picker-valueLabel { - padding: 0 $gap-xs; - } - - &-btn { - cursor: pointer; - color: $Picker-iconColor; - - &:hover { - color: $Picker-onHover-iconColor; - } - - &:before { - line-height: 1; - color: inherit; - content: $Picker-btn-icon; - display: inline-block; - font-size: $Picker-btn-fontSize; - font-family: $Picker-btn-vendor; - } - } - - &-clear { - display: inline-block; - @include input-clear(); - line-height: 1; - margin-right: $gap-xs; - } + &-clear { + display: inline-block; + @include input-clear(); + line-height: 1; + margin-right: $gap-xs; + } } .#{$ns}PickerControl.is-inline { - .#{$ns}Picker { - display: inline-block; - min-width: px2rem(150px); - } + .#{$ns}Picker { + display: inline-block; + min-width: px2rem(150px); + } } diff --git a/scss/components/form/_qr-code.scss b/scss/components/form/_qr-code.scss index dc26adce..0f382edd 100644 --- a/scss/components/form/_qr-code.scss +++ b/scss/components/form/_qr-code.scss @@ -1,4 +1,4 @@ .#{$ns}QrCode { - min-height: $Form-input-height; - padding: px2rem(7px) 0; + min-height: $Form-input-height; + padding: px2rem(7px) 0; } diff --git a/scss/components/form/_range.scss b/scss/components/form/_range.scss index c358e9a7..755f8292 100644 --- a/scss/components/form/_range.scss +++ b/scss/components/form/_range.scss @@ -1,216 +1,215 @@ .#{$ns}RangeControl { - position: relative; - @include clearfix(); + position: relative; + @include clearfix(); - padding-top: 1rem; - padding-bottom: 1.1rem; - - &--withInput { - .#{$ns}InputRange { - width: calc(100% - 120px); - } - - .#{$ns}InputRange-label--mid { - left: calc(50% - 60px); - } - - &.is-multiple { - .#{$ns}InputRange { - width: calc(100% - 210px); - } - } - } + padding-top: 1rem; + padding-bottom: 1.1rem; + &--withInput { .#{$ns}InputRange { - &-input { - font-size: $fontSizeSm; - position: absolute; - right: px2rem(26px); - top: px2rem(12px); - height: px2rem(30px); - - input { - padding: px2rem(10px); - width: px2rem(74px); - height: 100%; - - &:focus { - outline: none; - border: $borderWidth solid $info; - } - } - - &-separator { - display: inline-block; - padding: 0 5px; - } - } - - &-unit { - position: absolute; - right: px2rem(10px); - top: px2rem(7px); - } - - &-clear { - position: absolute; - top: px2rem(18px); - right: 0; - cursor: pointer; - - svg { - height: px2rem(16px); - width: px2rem(16px); - fill: #999; - } - } + width: calc(100% - 120px); } + + .#{$ns}InputRange-label--mid { + left: calc(50% - 60px); + } + + &.is-multiple { + .#{$ns}InputRange { + width: calc(100% - 210px); + } + } + } + + .#{$ns}InputRange { + &-input { + font-size: $fontSizeSm; + position: absolute; + right: px2rem(26px); + top: px2rem(12px); + height: px2rem(30px); + + input { + padding: px2rem(10px); + width: px2rem(74px); + height: 100%; + + &:focus { + outline: none; + border: $borderWidth solid $info; + } + } + + &-separator { + display: inline-block; + padding: 0 5px; + } + } + + &-unit { + position: absolute; + right: px2rem(10px); + top: px2rem(7px); + } + + &-clear { + position: absolute; + top: px2rem(18px); + right: 0; + cursor: pointer; + + svg { + height: px2rem(16px); + width: px2rem(16px); + fill: #999; + } + } + } } .#{$ns}InputRange { + height: $InputRange-slider-height; + position: relative; + width: 100%; + + // slider + &-slider { + appearance: none; + background: $InputRange-slider-bg; + border: $InputRange-slider-border; + // border-radius: 100%; + cursor: pointer; + display: block; + width: $InputRange-slider-width; height: $InputRange-slider-height; + margin-left: $InputRange-slider-width / -2; + margin-top: $InputRange-slider-height / -2 + $InputRange-track-height / -2; + outline: none; + position: absolute; + z-index: 2; + top: 50%; + transition: $InputRange-slider-transition; + + &:active { + transform: $InputRange-slider-onActive-transform; + } + + &:focus { + box-shadow: $InputRange-slider-onFocus-boxShadow; + } + + .input-range--disabled & { + background: $InputRange-slider-onDisabled-bg; + border: $InputRange-slider-onDisabled-border; + box-shadow: none; + transform: none; + } + + &:before { + content: '||'; + color: #fff; + display: block; + line-height: px2rem(22px); + text-align: center; + } + } + + &-sliderContainer { + transition: $InputRange-sliderContainer-transition; + } + + // label + &-label { + color: $InputRange-label-color; + font-family: $InputRange-fontFamily; + font-size: $InputRange-label-fontSize; + transform: translateZ(0); + white-space: nowrap; + } + + &-label--min, + &-label--max, + &-label--mid { + bottom: $InputRange-label-positionBottom; + position: absolute; + } + + // &-label--min { + // left: px2rem(15px); + // } + + &-label--mid { + left: 50%; + bottom: px2rem(-5px); + } + + &-label--max { + right: 0; + } + + &-label--value { + position: absolute; + display: $InputRange-label--value-display; + top: $InputRange-label--value-positionTop; + } + + // label Container + + // &-labelContainer { + // left: -50%; + // position: relative; + // .#{$ns}InputRange-label--max & { + // left: 50%; + // } + // } + + // track + &-track { + background: $InputRange-track-bg; + // border-radius: 0; + cursor: pointer; + display: block; + height: $InputRange-track-height; position: relative; - width: 100%; + transition: $InputRange-track-transition; - // slider - &-slider { - appearance: none; - background: $InputRange-slider-bg; - border: $InputRange-slider-border; - // border-radius: 100%; - cursor: pointer; - display: block; - width: $InputRange-slider-width; - height: $InputRange-slider-height; - margin-left: $InputRange-slider-width / -2; - margin-top: $InputRange-slider-height / -2 + $InputRange-track-height / - -2; - outline: none; - position: absolute; - z-index: 2; - top: 50%; - transition: $InputRange-slider-transition; - - &:active { - transform: $InputRange-slider-onActive-transform; - } - - &:focus { - box-shadow: $InputRange-slider-onFocus-boxShadow; - } - - .input-range--disabled & { - background: $InputRange-slider-onDisabled-bg; - border: $InputRange-slider-onDisabled-border; - box-shadow: none; - transform: none; - } - - &:before { - content: "||"; - color: #fff; - display: block; - line-height: px2rem(22px); - text-align: center; - } + .#{$ns}InputRange.is-disabled & { + background: $InputRange-track-onDisabled-bg; } - &-sliderContainer { - transition: $InputRange-sliderContainer-transition; + &.is-active { + background: $InputRange-track-onActive-bg; + } + } + + &-track--background { + left: 0.5rem; + margin-top: -0.5 * $InputRange-track-height; + position: absolute; + right: 0.5rem; + top: 50%; + + &::before, + &::after { + content: ''; + width: 0.5rem; + height: 100%; + position: absolute; + top: 0; + background: inherit; + z-index: 1; } - // label - &-label { - color: $InputRange-label-color; - font-family: $InputRange-fontFamily; - font-size: $InputRange-label-fontSize; - transform: translateZ(0); - white-space: nowrap; + &::before { + left: -0.5rem; } - &-label--min, - &-label--max, - &-label--mid { - bottom: $InputRange-label-positionBottom; - position: absolute; + &::after { + right: -0.5rem; } + } - // &-label--min { - // left: px2rem(15px); - // } - - &-label--mid { - left: 50%; - bottom: px2rem(-5px); - } - - &-label--max { - right: 0; - } - - &-label--value { - position: absolute; - display: $InputRange-label--value-display; - top: $InputRange-label--value-positionTop; - } - - // label Container - - // &-labelContainer { - // left: -50%; - // position: relative; - // .#{$ns}InputRange-label--max & { - // left: 50%; - // } - // } - - // track - &-track { - background: $InputRange-track-bg; - // border-radius: 0; - cursor: pointer; - display: block; - height: $InputRange-track-height; - position: relative; - transition: $InputRange-track-transition; - - .#{$ns}InputRange.is-disabled & { - background: $InputRange-track-onDisabled-bg; - } - - &.is-active { - background: $InputRange-track-onActive-bg; - } - } - - &-track--background { - left: 0.5rem; - margin-top: -0.5 * $InputRange-track-height; - position: absolute; - right: 0.5rem; - top: 50%; - - &::before, - &::after { - content: ""; - width: 0.5rem; - height: 100%; - position: absolute; - top: 0; - background: inherit; - z-index: 1; - } - - &::before { - left: -0.5rem; - } - - &::after { - right: -0.5rem; - } - } - - &-track--active { - background: $InputRange-track-onActive-bg; - } + &-track--active { + background: $InputRange-track-onActive-bg; + } } diff --git a/scss/components/form/_rating.scss b/scss/components/form/_rating.scss index 841164c3..0018ed85 100644 --- a/scss/components/form/_rating.scss +++ b/scss/components/form/_rating.scss @@ -1,34 +1,34 @@ .#{$ns}Rating { - position: relative; + position: relative; + overflow: hidden; + display: block; + float: left; + font-size: px2rem(24px); + color: $dark; + cursor: pointer; + + &.is-active { + color: $info; + } + + &.is-disabled { + cursor: not-allowed; + } + + &-half:before { + position: absolute; overflow: hidden; display: block; - float: left; - font-size: px2rem(24px); - color: $dark; - cursor: pointer; - - &.is-active { - color: $info; - } - - &.is-disabled { - cursor: not-allowed; - } - - &-half:before { - position: absolute; - overflow: hidden; - display: block; - z-index: 1; - top: 0; - left: 0; - width: 50%; - content: attr(data-forhalf); - color: $info; - } + z-index: 1; + top: 0; + left: 0; + width: 50%; + content: attr(data-forhalf); + color: $info; + } } .#{$ns}RatingControl { - position: relative; - overflow: hidden; + position: relative; + overflow: hidden; } diff --git a/scss/components/form/_repeat.scss b/scss/components/form/_repeat.scss index b32525f8..7dc0abd8 100644 --- a/scss/components/form/_repeat.scss +++ b/scss/components/form/_repeat.scss @@ -1,41 +1,41 @@ // todo .#{$ns}RepeatControl { - .repeat-btn { - width: px2rem(80px); - } + .repeat-btn { + width: px2rem(80px); + } - .Select { - display: inline-block; - min-width: 100px; - } + .Select { + display: inline-block; + min-width: 100px; + } - .input-range { - margin-top: 0; - } + .input-range { + margin-top: 0; + } - // .InputRange-label--value { - // top: -25px; + // .InputRange-label--value { + // top: -25px; - // .InputRange-labelContainer { - // font-size: 14px; - // } - // } + // .InputRange-labelContainer { + // font-size: 14px; + // } + // } - // .InputRange-slider { - // z-index: 2; - // } + // .InputRange-slider { + // z-index: 2; + // } - // .InputRange-track--active, .InputRange-slider { - // background-color: #23b7e5; - // border-color: #23b7e5; - // } + // .InputRange-track--active, .InputRange-slider { + // background-color: #23b7e5; + // border-color: #23b7e5; + // } } @media (min-width: 768px) { - .repeat-control.form-contorl-inline, - .form-group-inline .repeat-control { - display: inline-block; - min-width: 280px; - width: auto; - } + .repeat-control.form-contorl-inline, + .form-group-inline .repeat-control { + display: inline-block; + min-width: 280px; + width: auto; + } } diff --git a/scss/components/form/_rich-text.scss b/scss/components/form/_rich-text.scss index 7080b732..b97a605d 100644 --- a/scss/components/form/_rich-text.scss +++ b/scss/components/form/_rich-text.scss @@ -1,100 +1,101 @@ // todo .fr-popup { - z-index: $zindex-popover !important; + z-index: $zindex-popover !important; } .#{$ns}RichTextControl { - min-height: px2rem(200px); - height: auto; - border: $Form-input-borderWidth solid $Form-input-borderColor; - width: 100%; + min-height: px2rem(200px); + height: auto; + border: $Form-input-borderWidth solid $Form-input-borderColor; + width: 100%; - .fr-toolbar.fr-top { - box-shadow: none; - border: 0; - position: relative; + .fr-toolbar.fr-top { + box-shadow: none; + border: 0; + position: relative; + } + + .fr-box.fr-basic.fr-top:not(.fr-fullscreen) .fr-wrapper { + min-height: 150px; + max-height: 400px; + box-shadow: none; + overflow: auto; + border-top: 1px solid $Form-input-borderColor; + } + + .fr-toolbar .fr-command.fr-btn, + .fr-popup .fr-command.fr-btn { + color: $Button--default-color; + } + + .fr-toolbar .fr-command.fr-btn.fr-active, + .fr-popup .fr-command.fr-btn.fr-active { + color: $info; + background-color: $Form-select-onHover-bg; + } + + .fr-desktop .fr-command:hover, + .fr-desktop .fr-command:focus { + background-color: $Form-select-onHover-bg; + } + + .fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active, + .fr-popup .fr-command.fr-btn.fr-dropdown.fr-active { + background-color: $Form-select-onHover-bg; + } + + .fr-command.fr-btn + + .fr-dropdown-menu + .fr-dropdown-wrapper + .fr-dropdown-content + ul.fr-dropdown-list + li + a.fr-active { + background-color: $info; + color: #fff; + } + + &.is-focused { + border: $Form-input-borderWidth solid $Form-input-onFocused-borderColor; + + .fr-box.fr-basic.fr-top .fr-wrapper { + border-top: $Form-input-borderWidth solid + $Form-input-onFocused-borderColor; } + } - .fr-box.fr-basic.fr-top:not(.fr-fullscreen) .fr-wrapper { - min-height: 150px; - max-height: 400px; - box-shadow: none; - overflow: auto; - border-top: 1px solid $Form-input-borderColor; + .fr-box.fr-basic .fr-element { + min-height: 150px; + } + + .fr-sticky-dummy { + position: absolute; + } + + &.is-disabled { + border-color: $Form-input-onDisabled-borderColor; + pointer-events: none; + opacity: 0.6; + + .fr-box.fr-basic.fr-top .fr-wrapper { + border-color: $Form-input-onDisabled-borderColor; } + } - .fr-toolbar .fr-command.fr-btn, - .fr-popup .fr-command.fr-btn { - color: $Button--default-color; - } + // &.amis-rich-text-control-md { + // .fr-box.fr-basic .fr-element, + // .fr-box.fr-basic.fr-top .fr-wrapper { + // min-height: 250px; + // } + // } - .fr-toolbar .fr-command.fr-btn.fr-active, - .fr-popup .fr-command.fr-btn.fr-active { - color: $info; - background-color: $Form-select-onHover-bg; - } - - .fr-desktop .fr-command:hover, - .fr-desktop .fr-command:focus { - background-color: $Form-select-onHover-bg; - } - - .fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active, - .fr-popup .fr-command.fr-btn.fr-dropdown.fr-active { - background-color: $Form-select-onHover-bg; - } - - .fr-command.fr-btn - + .fr-dropdown-menu - .fr-dropdown-wrapper - .fr-dropdown-content - ul.fr-dropdown-list - li - a.fr-active { - background-color: $info; - color: #fff; - } - - &.is-focused { - border: $Form-input-borderWidth solid $Form-input-onFocused-borderColor; - - .fr-box.fr-basic.fr-top .fr-wrapper { - border-top: $Form-input-borderWidth solid $Form-input-onFocused-borderColor; - } - } - - .fr-box.fr-basic .fr-element { - min-height: 150px; - } - - .fr-sticky-dummy { - position: absolute; - } - - &.is-disabled { - border-color: $Form-input-onDisabled-borderColor; - pointer-events: none; - opacity: 0.6; - - .fr-box.fr-basic.fr-top .fr-wrapper { - border-color: $Form-input-onDisabled-borderColor; - } - } - - // &.amis-rich-text-control-md { - // .fr-box.fr-basic .fr-element, - // .fr-box.fr-basic.fr-top .fr-wrapper { - // min-height: 250px; - // } - // } - - // &.amis-rich-text-control-lg { - // .fr-box.fr-basic .fr-element, - // .fr-box.fr-basic.fr-top .fr-wrapper { - // min-height: 300px; - // } - // } + // &.amis-rich-text-control-lg { + // .fr-box.fr-basic .fr-element, + // .fr-box.fr-basic.fr-top .fr-wrapper { + // min-height: 300px; + // } + // } } // @media (min-width: 768px) { diff --git a/scss/components/form/_sub-form.scss b/scss/components/form/_sub-form.scss index 5c254450..d1779906 100644 --- a/scss/components/form/_sub-form.scss +++ b/scss/components/form/_sub-form.scss @@ -1,81 +1,81 @@ .#{$ns}SubForm { - &-values { - display: inline-block; - margin-top: -$gap-xs; - padding: ( - $Form-input-height - $Form-input-lineHeight * - $Form-input-fontSize - px2rem(2px) - )/2 0; + &-values { + display: inline-block; + margin-top: -$gap-xs; + padding: ( + $Form-input-height - $Form-input-lineHeight * $Form-input-fontSize - + px2rem(2px) + )/2 0; + } + + &-value { + cursor: pointer; + user-select: none; + line-height: $Form-input-lineHeight * $Form-input-fontSize - px2rem(2px); + display: inline-block; + font-size: $Form-selectValue-fontSize; + color: $Form-selectValue-color; + background: $Form-selectValue-bg; + border: px2rem(1px) solid $Form-selectValue-borderColor; + border-radius: 2px; + margin-right: $gap-xs; + margin-top: $gap-xs; + + &:hover { + background-color: darken($Form-selectValue-bg, 5%); } - &-value { - cursor: pointer; - user-select: none; - line-height: $Form-input-lineHeight * $Form-input-fontSize - px2rem(2px); - display: inline-block; - font-size: $Form-selectValue-fontSize; - color: $Form-selectValue-color; - background: $Form-selectValue-bg; - border: px2rem(1px) solid $Form-selectValue-borderColor; - border-radius: 2px; - margin-right: $gap-xs; - margin-top: $gap-xs; - - &:hover { - background-color: darken($Form-selectValue-bg, 5%); - } - - &.is-disabled { - pointer-events: none; - opacity: $Button-onDisabled-opacity; - } + &.is-disabled { + pointer-events: none; + opacity: $Button-onDisabled-opacity; } + } - &-valueIcon { - cursor: pointer; - border-right: px2rem(1px) solid $Form-selectValue-borderColor; - padding: 1px 5px; + &-valueIcon { + cursor: pointer; + border-right: px2rem(1px) solid $Form-selectValue-borderColor; + padding: 1px 5px; - &:hover { - background-color: darken($Form-selectValue-bg, 5%); - } + &:hover { + background-color: darken($Form-selectValue-bg, 5%); } + } - &-valueLabel { - padding: 0 $gap-xs; - } - - &-addBtn { - font-size: $SubForm--addBtn-fontSize; - - @include button-size( - $SubForm--addBtn-paddingY, - $SubForm--addBtn-paddingX, - $SubForm--addBtn-fontSize, - $SubForm--addBtn-lineHeight, - $SubForm--addBtn-borderRadius, - $SubForm--addBtn-height - ); - - @include button-variant( - $SubForm--addBtn-bg, - $SubForm--addBtn-border, - $SubForm--addBtn-color, - $SubForm--addBtn-onHover-bg, - $SubForm--addBtn-onHover-border, - $SubForm--addBtn-onHover-color, - $SubForm--addBtn-onActive-bg, - $SubForm--addBtn-onActive-border, - $SubForm--addBtn-onActive-color - ); - - &.is-disabled { - pointer-events: none; - opacity: $Button-onDisabled-opacity; - } + &-valueLabel { + padding: 0 $gap-xs; + } + + &-addBtn { + font-size: $SubForm--addBtn-fontSize; + + @include button-size( + $SubForm--addBtn-paddingY, + $SubForm--addBtn-paddingX, + $SubForm--addBtn-fontSize, + $SubForm--addBtn-lineHeight, + $SubForm--addBtn-borderRadius, + $SubForm--addBtn-height + ); + + @include button-variant( + $SubForm--addBtn-bg, + $SubForm--addBtn-border, + $SubForm--addBtn-color, + $SubForm--addBtn-onHover-bg, + $SubForm--addBtn-onHover-border, + $SubForm--addBtn-onHover-color, + $SubForm--addBtn-onActive-bg, + $SubForm--addBtn-onActive-border, + $SubForm--addBtn-onActive-color + ); + + &.is-disabled { + pointer-events: none; + opacity: $Button-onDisabled-opacity; } + } } .#{$ns}SubFormControl { - padding-top: $Form-input-height - $SubForm--addBtn-height; + padding-top: $Form-input-height - $SubForm--addBtn-height; } diff --git a/scss/components/form/_switch.scss b/scss/components/form/_switch.scss index 3793351c..6471ab12 100644 --- a/scss/components/form/_switch.scss +++ b/scss/components/form/_switch.scss @@ -1,117 +1,117 @@ .#{$ns}Switch { - cursor: pointer; - position: relative; - display: inline-block; - width: $Switch-width; - height: $Switch-height; - overflow: hidden; - border-radius: px2rem(30px); - background-color: $Switch-onActive-bgColor; - margin: 0; - vertical-align: middle; - text-align: left; + cursor: pointer; + position: relative; + display: inline-block; + width: $Switch-width; + height: $Switch-height; + overflow: hidden; + border-radius: px2rem(30px); + background-color: $Switch-onActive-bgColor; + margin: 0; + vertical-align: middle; + text-align: left; - &.is-disabled { - background-color: $Switch-onDisabled-bgColor; + &.is-disabled { + background-color: $Switch-onDisabled-bgColor; + } + + i { + &:before { + content: '\5173'; + color: $Switch-valueColor; + text-indent: ($Switch-width / 2); + text-transform: uppercase; + font-size: $fontSizeSm; + line-height: $Switch-height; + font-style: normal; + font-weight: bold; + + position: absolute; + top: px2rem(-1px); + bottom: px2rem(-1px); + left: px2rem(-1px); + right: px2rem(-1px); + background-color: $Switch-bgColor; + border: px2rem(1px) solid $Switch-borderColor; + border-radius: px2rem(30px); + transition: all 0.2s; } - i { - &:before { - content: "\5173"; - color: $Switch-valueColor; - text-indent: ($Switch-width / 2); - text-transform: uppercase; - font-size: $fontSizeSm; - line-height: $Switch-height; - font-style: normal; - font-weight: bold; + &:after { + content: ''; + position: absolute; + background-color: $white; + width: $Switch-height - px2rem(2px); + top: px2rem(1px); + bottom: px2rem(1px); + left: px2rem(1px); + border-radius: 50%; + // box-shadow: px2rem(1px) px2rem(1px) px2rem(3px) rgba(0, 0, 0, 0.25); + transition: margin-left 0.3s; + } + } - position: absolute; - top: px2rem(-1px); - bottom: px2rem(-1px); - left: px2rem(-1px); - right: px2rem(-1px); - background-color: $Switch-bgColor; - border: px2rem(1px) solid $Switch-borderColor; - border-radius: px2rem(30px); - transition: all 0.2s; + input { + position: absolute; + opacity: 0; + + &:disabled, + &:disabled:checked { + & + i { + &:before { + color: $Switch-onDisabled-color; + background-color: $Switch-onDisabled-bgColor; } &:after { - content: ""; - position: absolute; - background-color: $white; - width: $Switch-height - px2rem(2px); - top: px2rem(1px); - bottom: px2rem(1px); - left: px2rem(1px); - border-radius: 50%; - // box-shadow: px2rem(1px) px2rem(1px) px2rem(3px) rgba(0, 0, 0, 0.25); - transition: margin-left 0.3s; + background-color: $Switch-onDisabled-circle-BackgroundColor; + color: $Switch-onDisabled-color; } + } } - input { - position: absolute; - opacity: 0; - - &:disabled, - &:disabled:checked { - &+i { - &:before { - color: $Switch-onDisabled-color; - background-color: $Switch-onDisabled-bgColor; - } - - &:after { - background-color: $Switch-onDisabled-circle-BackgroundColor; - color: $Switch-onDisabled-color; - } - } + &:checked { + & + i { + &:before { + left: 100%; + border-width: 0; } - &:checked { - &+i { - &:before { - left: 100%; - border-width: 0; - } + &:after { + margin-left: $Switch-width - $Switch-height; - &:after { - margin-left: $Switch-width - $Switch-height; - - content: "\5f00"; - color: $white; - text-indent: px2rem(-18px); // todo - text-transform: uppercase; - font-size: $fontSizeSm; - font-weight: bold; - font-style: normal; - line-height: $Switch-height; - } - } + content: '\5f00'; + color: $white; + text-indent: px2rem(-18px); // todo + text-transform: uppercase; + font-size: $fontSizeSm; + font-weight: bold; + font-style: normal; + line-height: $Switch-height; } + } } + } } .#{$ns}Switch-option { - vertical-align: middle; - margin-left: $Switch-gap; + vertical-align: middle; + margin-left: $Switch-gap; - &:first-child { - margin-left: 0; - margin-right: $Switch-gap; - } + &:first-child { + margin-left: 0; + margin-right: $Switch-gap; + } - &:empty { - display: none; - } + &:empty { + display: none; + } } .#{$ns}SwitchControl { - padding-top: ($Form-input-height - $Switch-height) / 2; + padding-top: ($Form-input-height - $Switch-height) / 2; - &.is-inline { - display: inline-block; - } -} \ No newline at end of file + &.is-inline { + display: inline-block; + } +} diff --git a/scss/components/form/_tag.scss b/scss/components/form/_tag.scss index 94acba24..13c24f25 100644 --- a/scss/components/form/_tag.scss +++ b/scss/components/form/_tag.scss @@ -1,112 +1,112 @@ .#{$ns}TagControl { - @include input-text(); + @include input-text(); - &-placeholder { - color: $Form-input-placeholderColor; - user-select: none; - position: absolute; - left: $Form-input-paddingX; - top: $Form-input-paddingY; - margin-top: 2 * $Form-input-borderWidth; - line-height: $Form-input-lineHeight; + &-placeholder { + color: $Form-input-placeholderColor; + user-select: none; + position: absolute; + left: $Form-input-paddingX; + top: $Form-input-paddingY; + margin-top: 2 * $Form-input-borderWidth; + line-height: $Form-input-lineHeight; + } + + &-input { + min-height: $Form-input-height; + height: auto; + } + + &-valueWrap { + flex-grow: 1; + margin-bottom: -$gap-xs; + line-height: 1; + + > input { + width: px2rem(100px); + vertical-align: middle; + position: relative; + z-index: 2; + margin-bottom: $gap-xs; + } + } + + &-value { + cursor: pointer; + user-select: none; + white-space: nowrap; + vertical-align: middle; + line-height: $Form-input-lineHeight * $Form-input-fontSize - px2rem(2px); + display: inline-block; + font-size: $Form-selectValue-fontSize; + color: $Form-selectValue-color; + background: $Form-selectValue-bg; + border: px2rem(1px) solid $Form-selectValue-borderColor; + border-radius: 2px; + margin-right: $gap-xs; + margin-bottom: $gap-xs; + + &.is-disabled { + pointer-events: none; + opacity: $Button-onDisabled-opacity; + } + } + + &-valueIcon { + cursor: pointer; + border-right: px2rem(1px) solid $Form-selectValue-borderColor; + padding: 1px 5px; + + &:hover { + background-color: darken($Form-selectValue-bg, 5%); + } + } + + &-valueLabel { + padding: 0 $gap-xs; + } + + &-sug { + margin-top: $Form-input-marginBottom; + + &Tip { + color: $TagControl-sugTip-color; + margin-bottom: $Form-input-marginBottom; } - &-input { - min-height: $Form-input-height; - height: auto; - } - - &-valueWrap { - flex-grow: 1; - margin-bottom: -$gap-xs; - line-height: 1; - - > input { - width: px2rem(100px); - vertical-align: middle; - position: relative; - z-index: 2; - margin-bottom: $gap-xs; - } - } - - &-value { - cursor: pointer; - user-select: none; - white-space: nowrap; - vertical-align: middle; - line-height: $Form-input-lineHeight * $Form-input-fontSize - px2rem(2px); - display: inline-block; - font-size: $Form-selectValue-fontSize; - color: $Form-selectValue-color; - background: $Form-selectValue-bg; - border: px2rem(1px) solid $Form-selectValue-borderColor; - border-radius: 2px; - margin-right: $gap-xs; - margin-bottom: $gap-xs; - - &.is-disabled { - pointer-events: none; - opacity: $Button-onDisabled-opacity; - } - } - - &-valueIcon { - cursor: pointer; - border-right: px2rem(1px) solid $Form-selectValue-borderColor; - padding: 1px 5px; - - &:hover { - background-color: darken($Form-selectValue-bg, 5%); - } - } - - &-valueLabel { - padding: 0 $gap-xs; - } - - &-sug { - margin-top: $Form-input-marginBottom; - - &Tip { - color: $TagControl-sugTip-color; - margin-bottom: $Form-input-marginBottom; - } - - &Item { - margin-right: $gap-sm; - margin-bottom: $gap-sm; - display: inline-block; - font-size: $TagControl-sugBtn-fontSize; - cursor: pointer; - user-select: none; - border: $TagControl-sugBtn-borderWidth solid transparent; - - @include button-size( - $TagControl-sugBtn-paddingY, - $TagControl-sugBtn-paddingX, - $TagControl-sugBtn-fontSize, - $TagControl-sugBtn-lineHeight, - $TagControl-sugBtn-borderRadius, - $TagControl-sugBtn-height - ); - - @include button-variant( - $TagControl-sugBtn-bg, - $TagControl-sugBtn-border, - $TagControl-sugBtn-color, - $TagControl-sugBtn-onHover-bg, - $TagControl-sugBtn-onHover-border, - $TagControl-sugBtn-onHover-color, - $TagControl-sugBtn-onActive-bg, - $TagControl-sugBtn-onActive-border, - $TagControl-sugBtn-onActive-color - ); - - &.is-disabled { - pointer-events: none; - opacity: $Button-onDisabled-opacity; - } - } + &Item { + margin-right: $gap-sm; + margin-bottom: $gap-sm; + display: inline-block; + font-size: $TagControl-sugBtn-fontSize; + cursor: pointer; + user-select: none; + border: $TagControl-sugBtn-borderWidth solid transparent; + + @include button-size( + $TagControl-sugBtn-paddingY, + $TagControl-sugBtn-paddingX, + $TagControl-sugBtn-fontSize, + $TagControl-sugBtn-lineHeight, + $TagControl-sugBtn-borderRadius, + $TagControl-sugBtn-height + ); + + @include button-variant( + $TagControl-sugBtn-bg, + $TagControl-sugBtn-border, + $TagControl-sugBtn-color, + $TagControl-sugBtn-onHover-bg, + $TagControl-sugBtn-onHover-border, + $TagControl-sugBtn-onHover-color, + $TagControl-sugBtn-onActive-bg, + $TagControl-sugBtn-onActive-border, + $TagControl-sugBtn-onActive-color + ); + + &.is-disabled { + pointer-events: none; + opacity: $Button-onDisabled-opacity; + } } + } } diff --git a/scss/components/form/_text.scss b/scss/components/form/_text.scss index 308fc19c..bfbea7ee 100644 --- a/scss/components/form/_text.scss +++ b/scss/components/form/_text.scss @@ -1,324 +1,325 @@ @mixin input-clear { - padding: px2rem(3px); - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; + padding: px2rem(3px); + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; - svg { - fill: $Form-input-iconColor; - width: px2rem(10px); - height: px2rem(10px); - } + svg { + fill: $Form-input-iconColor; + width: px2rem(10px); + height: px2rem(10px); + } - &:hover svg { - fill: darken($color: $Form-input-iconColor, $amount: 20%); - } + &:hover svg { + fill: darken($color: $Form-input-iconColor, $amount: 20%); + } } @mixin input-text { - position: relative; + position: relative; - &.is-inline { - display: inline-block; + &.is-inline { + display: inline-block; + } + + &-input { + display: flex; + background-color: $Form-input-bg; + border: $Form-input-borderWidth solid $Form-input-borderColor; + border-radius: $Form-input-borderRadius; + // height: $Form-input-height; + line-height: $Form-input-lineHeight; + padding: $Form-input-paddingY $Form-input-paddingX; + font-size: $Form-input-fontSize; + + input { + outline: none; + background: transparent; + border: none; + color: $Form-input-color; + width: 100%; + height: $Form-input-lineHeight * $Form-input-fontSize; + + &::placeholder { + color: $Form-input-placeholderColor; + user-select: none; + } } - &-input { - display: flex; - background-color: $Form-input-bg; - border: $Form-input-borderWidth solid $Form-input-borderColor; - border-radius: $Form-input-borderRadius; - // height: $Form-input-height; - line-height: $Form-input-lineHeight; - padding: $Form-input-paddingY $Form-input-paddingX; - font-size: $Form-input-fontSize; - - input { - outline: none; - background: transparent; - border: none; - color: $Form-input-color; - width: 100%; - height: $Form-input-lineHeight * $Form-input-fontSize; - - &::placeholder { - color: $Form-input-placeholderColor; - user-select: none; - } - } - - > input { - flex-grow: 1; - } + > input { + flex-grow: 1; } + } - &.is-error > &-input { - border-color: $Form-input-onError-borderColor; - background-color: $Form-input-onError-bg; + &.is-error > &-input { + border-color: $Form-input-onError-borderColor; + background-color: $Form-input-onError-bg; + } + + &.is-focused > &-input { + border-color: $Form-input-onFocused-borderColor; + box-shadow: $Form-input-boxShadow; + + @if $Form-input-onFocused-bg !=$Form-input-bg { + background-color: $Form-input-onFocused-bg; } + } - &.is-focused > &-input { - border-color: $Form-input-onFocused-borderColor; - box-shadow: $Form-input-boxShadow; + &.is-error.is-focused > &-input { + border-color: $Form-input-onError-borderColor; + } - @if $Form-input-onFocused-bg !=$Form-input-bg { - background-color: $Form-input-onFocused-bg; - } - } - - &.is-error.is-focused > &-input { - border-color: $Form-input-onError-borderColor; - } - - &.is-disabled > &-input { - color: $text--muted-color; - background: $Form-input-onDisabled-bg; - border-color: $Form-input-onDisabled-borderColor; - } - - &-spinner { - line-height: $Form-input-lineHeight * $Form-input-fontSize; - } - - &-clear { - @include input-clear(); - } - - // 需要能撑开 - @include media-breakpoint-up(sm) { - &.#{$ns}Form-control--sizeXs > &-input, - &.#{$ns}Form-control--sizeSm > &-input, - &.#{$ns}Form-control--sizeMd > &-input, - &.#{$ns}Form-control--sizeLg > &-input { - min-width: 100%; - display: inline-flex; - } + &.is-disabled > &-input { + color: $text--muted-color; + background: $Form-input-onDisabled-bg; + border-color: $Form-input-onDisabled-borderColor; + } + + &-spinner { + line-height: $Form-input-lineHeight * $Form-input-fontSize; + } + + &-clear { + @include input-clear(); + } + + // 需要能撑开 + @include media-breakpoint-up(sm) { + &.#{$ns}Form-control--sizeXs > &-input, + &.#{$ns}Form-control--sizeSm > &-input, + &.#{$ns}Form-control--sizeMd > &-input, + &.#{$ns}Form-control--sizeLg > &-input { + min-width: 100%; + display: inline-flex; } + } } .#{$ns}TextControl { - @include input-text(); + @include input-text(); - &-placeholder { - color: $Form-input-placeholderColor; - user-select: none; - position: absolute; - left: $Form-input-paddingX; - top: $Form-input-paddingY; - margin-top: 2 * $Form-input-borderWidth; - line-height: $Form-input-lineHeight; + &-placeholder { + color: $Form-input-placeholderColor; + user-select: none; + position: absolute; + left: $Form-input-paddingX; + top: $Form-input-paddingY; + margin-top: 2 * $Form-input-borderWidth; + line-height: $Form-input-lineHeight; + } + + &-valueWrap { + flex-grow: 1; + line-height: 1; + white-space: nowrap; + + > input { + display: inline-block; + width: auto; + vertical-align: middle; } + } - &-valueWrap { - flex-grow: 1; - line-height: 1; - white-space: nowrap; + &--withAddOn { + display: flex; + flex-wrap: nowrap; - > input { - display: inline-block; - width: auto; - vertical-align: middle; + @include media-breakpoint-up(sm) { + &.#{$ns}Form-control--sizeXs, + &.#{$ns}Form-control--sizeSm, + &.#{$ns}Form-control--sizeMd, + &.#{$ns}Form-control--sizeLg { + display: inline-flex; + + > .#{$ns}TextControl-input { + min-width: unset; } + } + } + } + + &--withAddOn > &-input { + flex-basis: 1; + flex-grow: 1; + width: 0; + + border-radius: 0; + + &:first-child { + border-top-left-radius: $Form-input-borderRadius; + border-bottom-left-radius: $Form-input-borderRadius; } - &--withAddOn { - display: flex; - flex-wrap: nowrap; - - @include media-breakpoint-up(sm) { - &.#{$ns}Form-control--sizeXs, - &.#{$ns}Form-control--sizeSm, - &.#{$ns}Form-control--sizeMd, - &.#{$ns}Form-control--sizeLg { - display: inline-flex; - - > .#{$ns}TextControl-input { - min-width: unset; - } - } - } + &:last-child { + border-top-right-radius: $Form-input-borderRadius; + border-bottom-right-radius: $Form-input-borderRadius; } - &--withAddOn > &-input { - flex-basis: 1; - flex-grow: 1; + @if $Form-input-addOnDividerBorderWidth==0 { + &:not(:last-child) { + border-right-width: 0; + } + } + } - border-radius: 0; + &--withAddOn > &-addOn { + display: flex; + align-items: center; + justify-content: center; + padding-left: px2rem(10px); + padding-right: px2rem(10px); + background: $Form-input-addOnBg; + color: $Form-input-addOnColor; + border-color: $Form-input-borderColor; + border-style: solid; + border-width: px2rem(1px) 0; - &:first-child { - border-top-left-radius: $Form-input-borderRadius; - border-bottom-left-radius: $Form-input-borderRadius; - } - - &:last-child { - border-top-right-radius: $Form-input-borderRadius; - border-bottom-right-radius: $Form-input-borderRadius; - } - - @if $Form-input-addOnDividerBorderWidth==0 { - &:not(:last-child) { - border-right-width: 0; - } - } + &:first-child { + border-left-width: px2rem(1px); } - &--withAddOn > &-addOn { - display: flex; - align-items: center; - justify-content: center; - padding-left: px2rem(10px); - padding-right: px2rem(10px); - background: $Form-input-addOnBg; - color: $Form-input-addOnColor; - border-color: $Form-input-borderColor; - border-style: solid; - border-width: px2rem(1px) 0; + &:last-child { + border-right-width: px2rem(1px); + border-top-right-radius: $Form-input-borderRadius; + border-bottom-right-radius: $Form-input-borderRadius; + } + } - &:first-child { - border-left-width: px2rem(1px); - } - - &:last-child { - border-right-width: px2rem(1px); - border-top-right-radius: $Form-input-borderRadius; - border-bottom-right-radius: $Form-input-borderRadius; - } + &--withAddOn > &-button { + > .#{$ns}Button { + position: relative; + border-radius: 0; + margin-left: px2rem(-1px); + border: $InputGroup-button-borderWidth solid + $InputGroup-button-borderColor; } - &--withAddOn > &-button { - > .#{$ns}Button { - position: relative; - border-radius: 0; - margin-left: px2rem(-1px); - border: $InputGroup-button-borderWidth solid - $InputGroup-button-borderColor; - } - - &:not(:last-child) .#{$ns}Button { - border-right: 0; - } - - &:first-child .#{$ns}Button { - @if $InputGroup-button-borderRadius { - border-top-left-radius: $InputGroup-button-borderRadius; - border-bottom-left-radius: $InputGroup-button-borderRadius; - } - } - - &:last-child .#{$ns}Button { - @if $InputGroup-button-borderRadius { - border-top-right-radius: $InputGroup-button-borderRadius; - border-bottom-right-radius: $InputGroup-button-borderRadius; - } - } + &:not(:last-child) .#{$ns}Button { + border-right: 0; } - &--withAddOn.is-focused > &-button .#{$ns}Button { - border-color: $Form-input-onFocused-borderColor; + &:first-child .#{$ns}Button { + @if $InputGroup-button-borderRadius { + border-top-left-radius: $InputGroup-button-borderRadius; + border-bottom-left-radius: $InputGroup-button-borderRadius; + } } - &--withAddOn.is-error > &-addOn { - border-color: $Form-input-onError-borderColor; + &:last-child .#{$ns}Button { + @if $InputGroup-button-borderRadius { + border-top-right-radius: $InputGroup-button-borderRadius; + border-bottom-right-radius: $InputGroup-button-borderRadius; + } + } + } + + &--withAddOn.is-focused > &-button .#{$ns}Button { + border-color: $Form-input-onFocused-borderColor; + } + + &--withAddOn.is-error > &-addOn { + border-color: $Form-input-onError-borderColor; + } + + &--withAddOn.is-focused > &-addOn { + border-color: $Form-input-onFocused-borderColor; + color: $Form-input-onFocus-addOnColor; + box-shadow: $Form-input-boxShadow; + } + + &--withAddOn.is-disabled > &-addOn { + color: $text--muted-color; + } + + &-input--withAC { + position: relative; + flex-wrap: wrap; + + input { + width: auto; + color: $Form-input-placeholderColor; + } + } + + &-sugs { + position: absolute; + background: $Form-select-menu-bg; + color: $Form-select-menu-color; + border: $Form-input-borderWidth solid $Form-input-onFocused-borderColor; + left: px2rem(-1px); + right: px2rem(-1px); + top: 100%; + z-index: 10; + } + + &-sugItem { + padding: ( + $Form-selectOption-height - $Form-input-lineHeight * + $Form-input-fontSize - px2rem(2px) + )/2 px2rem(12px); + + svg { + width: px2rem(16px); + margin-top: px2rem(4px); + float: right; + fill: darken($color: $Form-input-iconColor, $amount: 20%); } - &--withAddOn.is-focused > &-addOn { - border-color: $Form-input-onFocused-borderColor; - color: $Form-input-onFocus-addOnColor; - box-shadow: $Form-input-boxShadow; + &:not(.is-disabled) { + cursor: pointer; } - &--withAddOn.is-disabled > &-addOn { - color: $text--muted-color; + &.is-highlight { + color: $Form-select-menu-onHover-color; + background: $Form-select-menu-onHover-bg; } + } - &-input--withAC { - position: relative; - flex-wrap: wrap; + &-value { + user-select: none; + line-height: $Form-input-lineHeight * $Form-input-fontSize; + vertical-align: middle; + display: inline-block; + } - input { - width: auto; - color: $Form-input-placeholderColor; - } + &-input--multiple { + height: auto; + min-height: $Form-input-height; + } + + &-input--multiple &-valueWrap { + white-space: normal; + + margin-bottom: -$gap-xs; + + > input { + margin-bottom: $gap-xs; } + } - &-sugs { - position: absolute; - background: $Form-select-menu-bg; - color: $Form-select-menu-color; - border: $Form-input-borderWidth solid $Form-input-onFocused-borderColor; - left: px2rem(-1px); - right: px2rem(-1px); - top: 100%; - z-index: 10; + &-input--multiple &-value { + line-height: $Form-input-lineHeight * $Form-input-fontSize - px2rem(2px); + font-size: $Form-selectValue-fontSize; + color: $Form-selectValue-color; + background: $Form-selectValue-bg; + border: px2rem(1px) solid $Form-selectValue-borderColor; + border-radius: px2rem(2px); + margin-right: $gap-xs; + margin-bottom: $gap-xs; + } + + &-valueIcon { + cursor: pointer; + border-right: px2rem(1px) solid $Form-selectValue-borderColor; + padding: 1px 5px; + + &:hover { + background-color: darken($Form-selectValue-bg, 5%); } + } - &-sugItem { - padding: ( - $Form-selectOption-height - $Form-input-lineHeight * - $Form-input-fontSize - px2rem(2px) - )/2 px2rem(12px); - - svg { - width: px2rem(16px); - margin-top: px2rem(4px); - float: right; - fill: darken($color: $Form-input-iconColor, $amount: 20%); - } - - &:not(.is-disabled) { - cursor: pointer; - } - - &.is-highlight { - color: $Form-select-menu-onHover-color; - background: $Form-select-menu-onHover-bg; - } - } - - &-value { - user-select: none; - line-height: $Form-input-lineHeight * $Form-input-fontSize; - vertical-align: middle; - display: inline-block; - } - - &-input--multiple { - height: auto; - min-height: $Form-input-height; - } - - &-input--multiple &-valueWrap { - white-space: normal; - - margin-bottom: -$gap-xs; - - > input { - margin-bottom: $gap-xs; - } - } - - &-input--multiple &-value { - line-height: $Form-input-lineHeight * $Form-input-fontSize - px2rem(2px); - font-size: $Form-selectValue-fontSize; - color: $Form-selectValue-color; - background: $Form-selectValue-bg; - border: px2rem(1px) solid $Form-selectValue-borderColor; - border-radius: px2rem(2px); - margin-right: $gap-xs; - margin-bottom: $gap-xs; - } - - &-valueIcon { - cursor: pointer; - border-right: px2rem(1px) solid $Form-selectValue-borderColor; - padding: 1px 5px; - - &:hover { - background-color: darken($Form-selectValue-bg, 5%); - } - } - - &-input--multiple &-valueLabel { - padding: 0 $gap-xs; - } + &-input--multiple &-valueLabel { + padding: 0 $gap-xs; + } } diff --git a/scss/components/form/_textarea.scss b/scss/components/form/_textarea.scss index 7aaffa55..9ead6e36 100644 --- a/scss/components/form/_textarea.scss +++ b/scss/components/form/_textarea.scss @@ -1,28 +1,32 @@ .#{$ns}TextareaControl { - border: 1px solid $Form-input-borderColor; - border-radius: $Form-input-borderRadius; - line-height: $Form-input-lineHeight; - background: $Form-input-bg; - padding: px2rem(6px) ($Form-input-height - $Form-input-lineHeight * $Form-input-fontSize - px2rem(2px)); - font-size: $Form-input-fontSize; - outline: none; - resize: none; - display: block; - width: 100%; + border: 1px solid $Form-input-borderColor; + border-radius: $Form-input-borderRadius; + line-height: $Form-input-lineHeight; + background: $Form-input-bg; + padding: px2rem(6px) + ( + $Form-input-height - $Form-input-lineHeight * $Form-input-fontSize - + px2rem(2px) + ); + font-size: $Form-input-fontSize; + outline: none; + resize: none; + display: block; + width: 100%; - &.is-error { - border-color: $Form-input-onError-borderColor; - } + &.is-error { + border-color: $Form-input-onError-borderColor; + } - &:focus, - &.is-focused { - border-color: $Form-input-onFocused-borderColor; - box-shadow: $Form-input-boxShadow; - } + &:focus, + &.is-focused { + border-color: $Form-input-onFocused-borderColor; + box-shadow: $Form-input-boxShadow; + } - &.is-disabled, - &[disabled] { - background: $gray200; - color: $text--muted-color; - } + &.is-disabled, + &[disabled] { + background: $gray200; + color: $text--muted-color; + } } diff --git a/scss/components/form/_transfer-select.scss b/scss/components/form/_transfer-select.scss index fcbcf482..fa7f8c23 100644 --- a/scss/components/form/_transfer-select.scss +++ b/scss/components/form/_transfer-select.scss @@ -1,120 +1,120 @@ .#{$ns}TransferSelectControl { - display: flex; - height: px2rem(300px); + display: flex; + height: px2rem(300px); - .#{$ns}TransferSelect { - &-allOptions, - &-selectedOptions { - height: 100%; - flex: 1; - border: $borderWidth solid $borderColor; - overflow: auto; + .#{$ns}TransferSelect { + &-allOptions, + &-selectedOptions { + height: 100%; + flex: 1; + border: $borderWidth solid $borderColor; + overflow: auto; - .#{$ns}TransferSelect-heading { - position: relative; - height: px2rem(40px); - line-height: px2rem(40px); - padding-left: px2rem(20px); - border-bottom: $TransferSelect-heading-borderBottom; - } + .#{$ns}TransferSelect-heading { + position: relative; + height: px2rem(40px); + line-height: px2rem(40px); + padding-left: px2rem(20px); + border-bottom: $TransferSelect-heading-borderBottom; + } - .#{$ns}TransferSelect-body { - table tbody tr td, - ul li { - position: relative; - } - - ul { - margin: 0; - padding: 0; - padding-top: px2rem(10px); - } - - li { - height: px2rem(30px); - line-height: px2rem(30px); - list-style: none; - padding-left: px2rem(20px); - } - } - - .#{$ns}TransferSelect-selectAll, - .#{$ns}TransferSelect-clearAll { - position: absolute; - right: 20px; - cursor: pointer; - color: $primary; - } - - .#{$ns}TransferSelect-searchWrapper { - i { - height: px2rem(17px); - line-height: px2rem(17px); - } - } + .#{$ns}TransferSelect-body { + table tbody tr td, + ul li { + position: relative; } - &-allOptions { - &--table { - .#{$ns}TransferSelect-heading { - background-color: $TransferSelect--table-heading-bg; - display: flex; - } - - .#{$ns}TransferSelect-searchWrapper { - display: inline-block; - padding: px2rem(3px) px2rem(10px); - flex: 1; - margin-left: px2rem(30px); - } - } - - &--normal { - .#{$ns}TransferSelect-heading { - background-color: $TransferSelect--normal-heading-bg; - } - - .#{$ns}TransferSelect-searchWrapper { - padding: px2rem(10px) px2rem(20px); - } - } + ul { + margin: 0; + padding: 0; + padding-top: px2rem(10px); } - &-selectedOptions { - &--table { - .#{$ns}TransferSelect-heading { - background-color: $TransferSelect--table-heading-bg; - } - } - - &--normal { - .#{$ns}TransferSelect-heading { - background-color: $TransferSelect--normal-heading-bg; - } - } + li { + height: px2rem(30px); + line-height: px2rem(30px); + list-style: none; + padding-left: px2rem(20px); } + } - &-option-close { - width: px2rem(12px); - height: px2rem(12px); - position: absolute; - right: px2rem(20px); - cursor: pointer; - } - - &-action { - padding: 0 px2rem(20px); - - .#{$ns}TransferSelect-actionIcon { - display: inline-block; - width: 0; - height: 0; - border-top: px2rem(12px) solid transparent; - border-left: px2rem(12px) solid #b7b7b7; - border-bottom: px2rem(12px) solid transparent; - position: relative; - top: calc(50% - 6px); - } + .#{$ns}TransferSelect-selectAll, + .#{$ns}TransferSelect-clearAll { + position: absolute; + right: 20px; + cursor: pointer; + color: $primary; + } + + .#{$ns}TransferSelect-searchWrapper { + i { + height: px2rem(17px); + line-height: px2rem(17px); } + } } + + &-allOptions { + &--table { + .#{$ns}TransferSelect-heading { + background-color: $TransferSelect--table-heading-bg; + display: flex; + } + + .#{$ns}TransferSelect-searchWrapper { + display: inline-block; + padding: px2rem(3px) px2rem(10px); + flex: 1; + margin-left: px2rem(30px); + } + } + + &--normal { + .#{$ns}TransferSelect-heading { + background-color: $TransferSelect--normal-heading-bg; + } + + .#{$ns}TransferSelect-searchWrapper { + padding: px2rem(10px) px2rem(20px); + } + } + } + + &-selectedOptions { + &--table { + .#{$ns}TransferSelect-heading { + background-color: $TransferSelect--table-heading-bg; + } + } + + &--normal { + .#{$ns}TransferSelect-heading { + background-color: $TransferSelect--normal-heading-bg; + } + } + } + + &-option-close { + width: px2rem(12px); + height: px2rem(12px); + position: absolute; + right: px2rem(20px); + cursor: pointer; + } + + &-action { + padding: 0 px2rem(20px); + + .#{$ns}TransferSelect-actionIcon { + display: inline-block; + width: 0; + height: 0; + border-top: px2rem(12px) solid transparent; + border-left: px2rem(12px) solid #b7b7b7; + border-bottom: px2rem(12px) solid transparent; + position: relative; + top: calc(50% - 6px); + } + } + } } diff --git a/scss/components/form/_tree-select.scss b/scss/components/form/_tree-select.scss index 23f26c40..c769a7cb 100644 --- a/scss/components/form/_tree-select.scss +++ b/scss/components/form/_tree-select.scss @@ -1,134 +1,134 @@ // todo .#{$ns}TreeSelectControl { - position: relative; + position: relative; } .#{$ns}TreeSelect { - @include input-text(); - outline: none; + @include input-text(); + outline: none; - &.is-opened > &-input { - border-color: $Form-input-onFocused-borderColor; - box-shadow: $Form-input-boxShadow; + &.is-opened > &-input { + border-color: $Form-input-onFocused-borderColor; + box-shadow: $Form-input-boxShadow; - @if $Form-input-onFocused-bg !=$Form-input-bg { - background-color: $Form-input-onFocused-bg; - } + @if $Form-input-onFocused-bg !=$Form-input-bg { + background-color: $Form-input-onFocused-bg; + } + } + + &-placeholder { + color: $Form-input-placeholderColor; + user-select: none; + position: absolute; + // margin-top: 2 * $Form-input-borderWidth; + line-height: $Form-input-lineHeight; + } + + &-input { + min-height: $Form-input-height; + height: auto; + } + + &-valueWrap { + flex-grow: 1; + position: relative; + } + + &--searchable { + .#{$ns}TreeSelect-placeholder, + .#{$ns}TreeSelect-value { + position: absolute; + top: 0; + left: 0; + } + } + + &--multi { + &.#{$ns}TreeSelect--searchable { + .#{$ns}TreeSelect-value { + position: static; + } } - &-placeholder { - color: $Form-input-placeholderColor; - user-select: none; - position: absolute; - // margin-top: 2 * $Form-input-borderWidth; - line-height: $Form-input-lineHeight; + .#{$ns}TreeSelect-valueWrap { + margin-bottom: -$gap-xs; + line-height: 1; + + > input { + width: auto; + } } - &-input { - min-height: $Form-input-height; - height: auto; + .#{$ns}TreeSelect-value { + cursor: pointer; + user-select: none; + white-space: nowrap; + vertical-align: middle; + line-height: $Form-input-lineHeight * $Form-input-fontSize - px2rem(2px); + display: inline-block; + font-size: $Form-selectValue-fontSize; + color: $Form-selectValue-color; + background: $Form-selectValue-bg; + border: px2rem(1px) solid $Form-selectValue-borderColor; + border-radius: 2px; + margin-right: $gap-xs; + margin-bottom: $gap-xs; + + &.is-disabled { + pointer-events: none; + opacity: $Button-onDisabled-opacity; + } } - &-valueWrap { - flex-grow: 1; - position: relative; + .#{$ns}TreeSelect-valueIcon { + cursor: pointer; + border-right: px2rem(1px) solid $Form-selectValue-borderColor; + padding: 1px 5px; + + &:hover { + background-color: darken($Form-selectValue-bg, 5%); + } } - &--searchable { - .#{$ns}TreeSelect-placeholder, - .#{$ns}TreeSelect-value { - position: absolute; - top: 0; - left: 0; - } + .#{$ns}TreeSelect-valueLabel { + padding: 0 $gap-xs; } + } - &--multi { - &.#{$ns}TreeSelect--searchable { - .#{$ns}TreeSelect-value { - position: static; - } - } + &-arrow { + width: px2rem(20px); + cursor: pointer; + text-align: center; + display: flex; + align-items: center; + justify-content: center; - .#{$ns}TreeSelect-valueWrap { - margin-bottom: -$gap-xs; - line-height: 1; - - > input { - width: auto; - } - } - - .#{$ns}TreeSelect-value { - cursor: pointer; - user-select: none; - white-space: nowrap; - vertical-align: middle; - line-height: $Form-input-lineHeight * $Form-input-fontSize - px2rem(2px); - display: inline-block; - font-size: $Form-selectValue-fontSize; - color: $Form-selectValue-color; - background: $Form-selectValue-bg; - border: px2rem(1px) solid $Form-selectValue-borderColor; - border-radius: 2px; - margin-right: $gap-xs; - margin-bottom: $gap-xs; - - &.is-disabled { - pointer-events: none; - opacity: $Button-onDisabled-opacity; - } - } - - .#{$ns}TreeSelect-valueIcon { - cursor: pointer; - border-right: px2rem(1px) solid $Form-selectValue-borderColor; - padding: 1px 5px; - - &:hover { - background-color: darken($Form-selectValue-bg, 5%); - } - } - - .#{$ns}TreeSelect-valueLabel { - padding: 0 $gap-xs; - } - } - - &-arrow { - width: px2rem(20px); - cursor: pointer; - text-align: center; - display: flex; - align-items: center; - justify-content: center; - - &:before { - content: ''; - border-color: $Form-input-iconColor transparent transparent; - border-style: solid; - border-width: px2rem(5px) px2rem(5px) px2rem(2.5px); - display: inline-block; - height: 0; - width: 0; - position: relative; - top: px2rem(2px); - } + &:before { + content: ''; + border-color: $Form-input-iconColor transparent transparent; + border-style: solid; + border-width: px2rem(5px) px2rem(5px) px2rem(2.5px); + display: inline-block; + height: 0; + width: 0; + position: relative; + top: px2rem(2px); } + } } .#{$ns}TreeSelect-popover { - background: transparent; - border: none; - box-shadow: none; + background: transparent; + border: none; + box-shadow: none; - > .#{$ns}Tree { - background: $TreeSelect-popover-bg; - border: $Form-input-borderWidth solid $Form-input-onFocused-borderColor; - padding: $gap-xs $Form-input-paddingX; - border-radius: 0; - margin-top: -1px; - max-height: 400px; - overflow: auto; - } + > .#{$ns}Tree { + background: $TreeSelect-popover-bg; + border: $Form-input-borderWidth solid $Form-input-onFocused-borderColor; + padding: $gap-xs $Form-input-paddingX; + border-radius: 0; + margin-top: -1px; + max-height: 400px; + overflow: auto; + } } diff --git a/scss/components/form/_tree.scss b/scss/components/form/_tree.scss index 704e554a..9f9295fe 100644 --- a/scss/components/form/_tree.scss +++ b/scss/components/form/_tree.scss @@ -1,273 +1,294 @@ .#{$ns}TreeControl { - border: 1px solid $Form-input-borderColor; - padding: 6px 12px; - border-radius: 2px; - max-height: 300px; - overflow: auto; + border: 1px solid $Form-input-borderColor; + padding: 6px 12px; + border-radius: 2px; + max-height: 300px; + overflow: auto; - &.h-full { - max-height: none; - overflow: visible; - } + &.h-full { + max-height: none; + overflow: visible; + } - &.no-border { - border: 0; - } + &.no-border { + border: 0; + } } .#{$ns}Tree { + &-list, + &-sublist { + list-style: none; + padding: 0; + margin: 0; + } - &-list, - &-sublist { - list-style: none; - padding: 0; - margin: 0; - } + &-sublist.is-folded { + display: none; + } - &-sublist.is-folded { - display: none; - } + &-item { + line-height: $Tree-itemHeight; + position: relative; - &-item { - line-height: $Tree-itemHeight; + > div { + &:hover { + text-decoration: none; + + > .#{$ns}Tree-item-icons { + visibility: visible; + } + } + + > span > svg { + display: inline-block; + cursor: pointer; position: relative; + top: 2px; + width: px2rem(16px); + height: px2rem(16px); + margin-left: px2rem(5px); + } + } + } - >div { - &:hover { - text-decoration: none; + &-rootItem { + line-height: $Tree-itemHeight; + } - >.#{$ns}Tree-item-icons { - visibility: visible; - } - } + &-item > div:hover > .#{$ns}Tree-item-icons, + &-rootItem > div:hover > .#{$ns}Tree-item-icons { + visibility: visible; + } - >span>svg { - display: inline-block; - cursor: pointer; - position: relative; - top: 2px; - width: px2rem(16px); - height: px2rem(16px); - margin-left: px2rem(5px); - } - } + &-itemLabel { + &:hover { + background: $Tree-item-onHover-bg; + } + } + + &-item-icons { + visibility: hidden; + transition: visibility 0.1s ease; + display: inline-block; + vertical-align: top; + height: $Tree-itemHeight; + line-height: $Tree-itemHeight; + + > a { + display: inline-block; + vertical-align: middle; + margin-left: $gap-xs; + cursor: pointer; + + > svg { + $svgSize: px2rem(16px); + width: $svgSize; + height: $svgSize; + top: 0.125 * $svgSize; + } + } + } + + &-itemInput { + padding-left: $Tree-itemArrowWidth; + + > a { + display: inline-block; + cursor: pointer; + margin-left: $gap-sm; + color: $icon-color; + + &:hover { + color: $icon-onHover-color; + text-decoration: none; + } } - &-rootItem { - line-height: $Tree-itemHeight; - } + > input { + outline: none; + background-color: $Form-input-bg; + border: $Form-input-borderWidth solid $Form-input-borderColor; + border-radius: $Form-input-borderRadius; + line-height: $Form-input-lineHeight; + padding: ( + $Tree-inputHeight - $Form-input-lineHeight * $Form-input-fontSize - + px2rem(2px) + )/2 $Form-input-paddingX; + font-size: $Form-input-fontSize; - &-item>div:hover>.#{$ns}Tree-item-icons, - &-rootItem>div:hover>.#{$ns}Tree-item-icons { - visibility: visible; - } - - &-itemLabel { - &:hover { - background: $Tree-item-onHover-bg; - } - } - - &-item-icons { - visibility: hidden; - transition: visibility .1s ease; - display: inline-block; - vertical-align: top; - height: $Tree-itemHeight; - line-height: $Tree-itemHeight; - - >a { - display: inline-block; - vertical-align: middle; - margin-left: $gap-xs; - cursor: pointer; - - >svg { - $svgSize: px2rem(16px); - width: $svgSize; - height: $svgSize; - top: 0.125 * $svgSize; - } - } - } - - &-itemInput { - padding-left: $Tree-itemArrowWidth; - - >a { - display: inline-block; - cursor: pointer; - margin-left: $gap-sm; - color: $icon-color; - - &:hover { - color: $icon-onHover-color; - text-decoration: none; - } - } - - >input { - outline: none; - background-color: $Form-input-bg; - border: $Form-input-borderWidth solid $Form-input-borderColor; - border-radius: $Form-input-borderRadius; - line-height: $Form-input-lineHeight; - padding: ($Tree-inputHeight - $Form-input-lineHeight * $Form-input-fontSize - px2rem(2px))/2 $Form-input-paddingX; - font-size: $Form-input-fontSize; - - &::placeholder { - color: $Form-input-placeholderColor; - user-select: none; - } - - &:focus { - border-color: $Form-input-onFocused-borderColor; - box-shadow: $Form-input-boxShadow; - - @if $Form-input-onFocused-bg !=$Form-input-bg { - background-color: $Form-input-onFocused-bg; - } - } - } - } - - &-addTopBtn { - cursor: pointer; - height: $Tree-itemHeight; - line-height: $Tree-itemHeight; - display: block; - - &:hover { - text-decoration: none; - } - - &.is-disabled { - pointer-events: none; - color: $text--muted-color; - } - - >svg { - $svgSize: px2rem(14px); - width: $svgSize; - height: $svgSize; - top: $svgSize * 0.125; - margin-right: $Tree-itemArrowWidth - px2rem(14px); // icon 的宽度是14px - } - } - - &-itemArrow { - cursor: pointer; - width: $Tree-itemArrowWidth; - text-align: center; - display: inline-block; - - &:before { - font-style: normal; - font-family: $Tree-arrowVendor; - content: $Tree-unfoldedArrowContent; - } - - &.is-folded:before { - content: $Tree-foldedArrowContent; - } - } - - &-itemArrowPlaceholder { - display: inline-block; - width: $Tree-itemArrowWidth; - } - - &-itemIcon { - display: inline-block; - margin-right: px2rem(3px); - } - - &-rootIcon { - &:before { - font-style: normal; - font-family: $Tree-rootIconVendor; - content: $Tree-rootIconContent; - } - } - - &-leafIcon { - &:before { - font-style: normal; - font-family: $Tree-leafIconVendor; - content: $Tree-leafIconContent; - } - } - - &-folderIcon { - &:before { - font-style: normal; - font-family: $Tree-folderIconVendor; - content: $Tree-folderIconContent; - } - } - - &-itemLabel { + &::placeholder { + color: $Form-input-placeholderColor; user-select: none; + } - &.is-checked, - &.is-children-checked { - color: $Tree-itemLabel--onChecked-color; + &:focus { + border-color: $Form-input-onFocused-borderColor; + box-shadow: $Form-input-boxShadow; + + @if $Form-input-onFocused-bg !=$Form-input-bg { + background-color: $Form-input-onFocused-bg; } + } + } + } - &.is-disabled { - color: $text--muted-color; - } + &-addTopBtn { + cursor: pointer; + height: $Tree-itemHeight; + line-height: $Tree-itemHeight; + display: block; + + &:hover { + text-decoration: none; } - &-itemText { - cursor: pointer; + &.is-disabled { + pointer-events: none; + color: $text--muted-color; } - &-placeholder { - color: $text--muted-color; + > svg { + $svgSize: px2rem(14px); + width: $svgSize; + height: $svgSize; + top: $svgSize * 0.125; + margin-right: $Tree-itemArrowWidth - px2rem(14px); // icon 的宽度是14px + } + } + + &-itemArrow { + cursor: pointer; + width: $Tree-itemArrowWidth; + text-align: center; + display: inline-block; + + &:before { + font-style: normal; + font-family: $Tree-arrowVendor; + content: $Tree-unfoldedArrowContent; } + &.is-folded:before { + content: $Tree-foldedArrowContent; + } + } + &-itemArrowPlaceholder { + display: inline-block; + width: $Tree-itemArrowWidth; + } - &-item &-item>&-itemLabel, - &-item &-item>&-placeholder { - padding-left: $Tree-indent; + &-itemIcon { + display: inline-block; + margin-right: px2rem(3px); + } + + &-rootIcon { + &:before { + font-style: normal; + font-family: $Tree-rootIconVendor; + content: $Tree-rootIconContent; + } + } + + &-leafIcon { + &:before { + font-style: normal; + font-family: $Tree-leafIconVendor; + content: $Tree-leafIconContent; + } + } + + &-folderIcon { + &:before { + font-style: normal; + font-family: $Tree-folderIconVendor; + content: $Tree-folderIconContent; + } + } + + &-itemLabel { + user-select: none; + + &.is-checked, + &.is-children-checked { + color: $Tree-itemLabel--onChecked-color; } - &-item &-item &-item>&-itemLabel, - &-item &-item &-item>&-placeholder { - padding-left: $Tree-indent * 2; + &.is-disabled { + color: $text--muted-color; } + } - &-item &-item &-item &-item>&-itemLabel { - padding-left: $Tree-indent * 3; - } + &-itemText { + cursor: pointer; + } - &-item &-item &-item &-item &-item>&-itemLabel { - padding-left: $Tree-indent * 4; - } + &-placeholder { + color: $text--muted-color; + } - &-item &-item &-item &-item &-item &-item>&-itemLabel { - padding-left: $Tree-indent * 5; - } + &-item &-item > &-itemLabel, + &-item &-item > &-placeholder { + padding-left: $Tree-indent; + } - &-item &-item &-item &-item &-item &-item &-item>&-itemLabel { - padding-left: $Tree-indent * 6; - } + &-item &-item &-item > &-itemLabel, + &-item &-item &-item > &-placeholder { + padding-left: $Tree-indent * 2; + } - &-item &-item &-item &-item &-item &-item &-item &-item>&-itemLabel { - padding-left: $Tree-indent * 7; - } + &-item &-item &-item &-item > &-itemLabel { + padding-left: $Tree-indent * 3; + } - &-item &-item &-item &-item &-item &-item &-item &-item &-item>&-itemLabel { - padding-left: $Tree-indent * 8; - } + &-item &-item &-item &-item &-item > &-itemLabel { + padding-left: $Tree-indent * 4; + } - &-item &-item &-item &-item &-item &-item &-item &-item &-item &-item>&-itemLabel { - padding-left: $Tree-indent * 9; - } + &-item &-item &-item &-item &-item &-item > &-itemLabel { + padding-left: $Tree-indent * 5; + } - &-item &-item &-item &-item &-item &-item &-item &-item &-item &-item &-item>&-itemLabel { - padding-left: $Tree-indent * 10; - } -} \ No newline at end of file + &-item &-item &-item &-item &-item &-item &-item > &-itemLabel { + padding-left: $Tree-indent * 6; + } + + &-item &-item &-item &-item &-item &-item &-item &-item > &-itemLabel { + padding-left: $Tree-indent * 7; + } + + &-item &-item &-item &-item &-item &-item &-item &-item &-item > &-itemLabel { + padding-left: $Tree-indent * 8; + } + + &-item + &-item + &-item + &-item + &-item + &-item + &-item + &-item + &-item + &-item + > &-itemLabel { + padding-left: $Tree-indent * 9; + } + + &-item + &-item + &-item + &-item + &-item + &-item + &-item + &-item + &-item + &-item + &-item + > &-itemLabel { + padding-left: $Tree-indent * 10; + } +} diff --git a/scss/layout/_aside.scss b/scss/layout/_aside.scss index 821ebc74..8548bce2 100644 --- a/scss/layout/_aside.scss +++ b/scss/layout/_aside.scss @@ -1,297 +1,305 @@ .#{$ns}AsideNav { - @include clearfix(); + @include clearfix(); - &-label { - color: $Layout-asideLabel-color; - margin-top: $gap-base; - margin-bottom: $gap-sm; - font-size: $fontSizeXs; - padding-left: $gap-base; - padding-right: $gap-base; + &-label { + color: $Layout-asideLabel-color; + margin-top: $gap-base; + margin-bottom: $gap-sm; + font-size: $fontSizeXs; + padding-left: $gap-base; + padding-right: $gap-base; + } + + &-list { + list-style: none; + padding: 0; + margin: 0; + } + + &-itemArrow { + float: right; + display: block; + width: px2rem(20px); + text-align: center; + line-height: px2rem(17px); + + &::before { + content: $Layout-asideLink-arrowIcon; + display: inline-block; + font-family: $Layout-asideLink-arrowVendor; + transform-origin: center; + color: $Layout-asideLink-arrowColor; + font-size: $Layout-asideLink-arrowFontSize; } - &-list { - list-style: none; - padding: 0; - margin: 0; + .#{$ns}AsideNav-item.is-open > a > &::before { + transform: rotate(90deg); + color: $Layout-asideLink-onActive-arrowColor; + } + } + + &-itemBadge { + padding: px2rem(2px) px2rem(5px); + margin-top: px2rem(2px); + font-size: $fontSizeXs; + text-shadow: 0 px2rem(1px) 0 rgba(0, 0, 0, 0.2); + float: right; + min-width: px2rem(1px); + line-height: 1; + font-weight: $fontWeightBold; + text-align: center; + white-space: nowrap; + vertical-align: baseline; + border-radius: px2rem(10px); + } + + &-itemIcon { + margin: ($Layout-nav-height - $lineHeightBase * $Layout-asideLink-fontSize)/-2 + px2rem(-10px); + line-height: $Layout-nav-height; + width: $Layout-nav-height; + vertical-align: middle; + float: left; + margin-right: 0; + text-align: center; + position: relative; + overflow: hidden; + color: $Layout-asideLink-iconColor; + font-size: $Layout-asideLink-onHover-iconSize; + + &:before { + position: relative; + z-index: 2; + } + } + + &-subList { + margin: 0; + padding: 0; + opacity: 0; + height: 0; + overflow: hidden; + margin-left: px2rem(-20px); + transition: all 0.2s ease-in-out 0s; + background-color: $Layout-aside-subList-bg; + + .is-open > &, + .#{$ns}Layout--folded .#{$ns}AsideNav-item:hover > &, + .#{$ns}Layout--folded .#{$ns}AsideNav-item:focus > &, + .#{$ns}Layout--folded .#{$ns}AsideNav-item:active > & { + opacity: 1; + margin-left: 0; + height: auto !important; + overflow: visible; } - &-itemArrow { - float: right; - display: block; - width: px2rem(20px); - text-align: center; - line-height: px2rem(17px); + .#{$ns}Layout--folded .#{$ns}AsideNav-item.is-open > & { + overflow: hidden; + } + } - &::before { - content: $Layout-asideLink-arrowIcon; - display: inline-block; - font-family: $Layout-asideLink-arrowVendor; - transform-origin: center; - color: $Layout-asideLink-arrowColor; - font-size: $Layout-asideLink-arrowFontSize; - } + &-item { + position: relative; + display: block; - .#{$ns}AsideNav-item.is-open > a > &::before { - transform: rotate(90deg); - color: $Layout-asideLink-onActive-arrowColor; + a { + font-weight: normal; + cursor: pointer; + text-transform: none; + display: block; + font-size: $Layout-asideLink-fontSize; + padding: ( + $Layout-nav-height - $lineHeightBase * $Layout-asideLink-fontSize + )/2 px2rem(15px); + position: relative; + transition: background-color 0.2s ease-in-out 0s; + color: $Layout-asideLink-color; + text-decoration: none; + user-select: none; + + &:hover { + color: $Layout-asideLink-onHover-color; + text-decoration: none; + background-color: $Layout-aside-onHover-bg; + + .#{$ns}AsideNav-itemIcon { + color: $Layout-asideLink-onHover-iconColor; } + } } - &-itemBadge { - padding: px2rem(2px) px2rem(5px); - margin-top: px2rem(2px); - font-size: $fontSizeXs; - text-shadow: 0 px2rem(1px) 0 rgba(0, 0, 0, 0.2); - float: right; - min-width: px2rem(1px); - line-height: 1; - font-weight: $fontWeightBold; - text-align: center; - white-space: nowrap; - vertical-align: baseline; - border-radius: px2rem(10px); + &.is-active { + > a { + background-color: $Layout-aside-onAcitve-bg; + color: $Layout-asideLink-onActive-color; + + &:hover { + background-color: $Layout-aside-onHover-bg; + } + } } - &-itemIcon { - margin: ($Layout-nav-height - $lineHeightBase * $Layout-asideLink-fontSize)/-2 px2rem(-10px); - line-height: $Layout-nav-height; - width: $Layout-nav-height; - vertical-align: middle; - float: left; - margin-right: 0; - text-align: center; - position: relative; - overflow: hidden; - color: $Layout-asideLink-iconColor; - font-size: $Layout-asideLink-onHover-iconSize; - - &:before { - position: relative; - z-index: 2; - } + &.is-lg { + > a { + padding: ( + $Layout-nav-lgHeight - $lineHeightBase * $Layout-asideLink-fontSize + )/2 px2rem(15px); + } } - &-subList { - margin: 0; - padding: 0; - opacity: 0; - height: 0; - overflow: hidden; - margin-left: px2rem(-20px); - transition: all 0.2s ease-in-out 0s; - background-color: $Layout-aside-subList-bg; + .#{$ns}AsideNav-item { + a { + padding-left: $Layout-nav-height + px2rem(5px); + } - .is-open > &, - .#{$ns}Layout--folded .#{$ns}AsideNav-item:hover > &, - .#{$ns}Layout--folded .#{$ns}AsideNav-item:focus > &, - .#{$ns}Layout--folded .#{$ns}AsideNav-item:active > & { - opacity: 1; - margin-left: 0; - height: auto !important; - overflow: visible; - } + .#{$ns}AsideNav-item a { + padding-left: $Layout-nav-height + px2rem(35px); + } - .#{$ns}Layout--folded .#{$ns}AsideNav-item.is-open > & { - overflow: hidden; - } - } + .#{$ns}AsideNav-item .#{$ns}AsideNav-item a { + padding-left: $Layout-nav-height + px2rem(65px); + } - &-item { - position: relative; - display: block; - - a { - font-weight: normal; - cursor: pointer; - text-transform: none; - display: block; - font-size: $Layout-asideLink-fontSize; - padding: ($Layout-nav-height - $lineHeightBase * $Layout-asideLink-fontSize)/2 px2rem(15px); - position: relative; - transition: background-color 0.2s ease-in-out 0s; - color: $Layout-asideLink-color; - text-decoration: none; - user-select: none; - - &:hover { - color: $Layout-asideLink-onHover-color; - text-decoration: none; - background-color: $Layout-aside-onHover-bg; - - .#{$ns}AsideNav-itemIcon { - color: $Layout-asideLink-onHover-iconColor; - } - } - } - - &.is-active { - > a { - background-color: $Layout-aside-onAcitve-bg; - color: $Layout-asideLink-onActive-color; - - &:hover { - background-color: $Layout-aside-onHover-bg; - } - } - } - - &.is-lg { - > a { - padding: ($Layout-nav-lgHeight - $lineHeightBase * $Layout-asideLink-fontSize)/2 px2rem(15px); - } - } - - .#{$ns}AsideNav-item { - a { - padding-left: $Layout-nav-height + px2rem(5px); - } - - .#{$ns}AsideNav-item a { - padding-left: $Layout-nav-height + px2rem(35px); - } - - .#{$ns}AsideNav-item .#{$ns}AsideNav-item a { - padding-left: $Layout-nav-height + px2rem(65px); - } - - .#{$ns}AsideNav-subList { - display: none; - } - - &.is-open .#{$ns}AsideNav-subList { - display: block; - } - } - } - - &-subHeader { + .#{$ns}AsideNav-subList { display: none; + } - a { - cursor: default; - background: transparent; - color: darken($Layout-aside-color, 10%); - padding: ($Layout-nav--folded-height - $lineHeightBase * $Layout-asideLink-fontSize)/2 px2rem(20px); - - &:hover { - color: darken($Layout-aside-color, 10%); - background: transparent; - } - } + &.is-open .#{$ns}AsideNav-subList { + display: block; + } } + } - &-tooltip { - pointer-events: none; - left: 0; - top: 50%; - transform: translateY(-50%); - position: absolute; - font-size: $Tooltip--attr-fontSize; - line-height: $Tooltip--attr-lineHeigt; - text-align: left; - white-space: nowrap; - background: $Tooltip--attr-bg; - border: $Tooltip--attr-borderWidth solid $Tooltip--attr-borderColor; - border-radius: $Tooltip--attr-borderRadius; - box-shadow: $Tooltip--attr-boxShadow; - left: 100%; - color: $Tooltip--attr-color; - padding: $Tooltip--attr-paddingY $Tooltip--attr-paddingX; - opacity: 0; - transition: $Tooltip--attr-transition; - } + &-subHeader { + display: none; - &-divider { - width: auto; - height: px2rem(1px); - margin: $Layout-asideDivider-margin; - overflow: hidden; - font-size: 0; - background-color: $Layout-asideDivider-bg; + a { + cursor: default; + background: transparent; + color: darken($Layout-aside-color, 10%); + padding: ( + $Layout-nav--folded-height - $lineHeightBase * + $Layout-asideLink-fontSize + )/2 px2rem(20px); + + &:hover { + color: darken($Layout-aside-color, 10%); + background: transparent; + } } + } + + &-tooltip { + pointer-events: none; + left: 0; + top: 50%; + transform: translateY(-50%); + position: absolute; + font-size: $Tooltip--attr-fontSize; + line-height: $Tooltip--attr-lineHeigt; + text-align: left; + white-space: nowrap; + background: $Tooltip--attr-bg; + border: $Tooltip--attr-borderWidth solid $Tooltip--attr-borderColor; + border-radius: $Tooltip--attr-borderRadius; + box-shadow: $Tooltip--attr-boxShadow; + left: 100%; + color: $Tooltip--attr-color; + padding: $Tooltip--attr-paddingY $Tooltip--attr-paddingX; + opacity: 0; + transition: $Tooltip--attr-transition; + } + + &-divider { + width: auto; + height: px2rem(1px); + margin: $Layout-asideDivider-margin; + overflow: hidden; + font-size: 0; + background-color: $Layout-asideDivider-bg; + } } @include media-breakpoint-up(md) { - .#{$ns}Layout--folded { - .#{$ns}AsideNav-label { - display: none; - } - - .#{$ns}AsideNav-subHeader { - display: block; - } - - .#{$ns}AsideNav-item:hover > .#{$ns}AsideNav-tooltip { - opacity: 1; - z-index: $zindex-tooltip; - margin: 0 0 0 $Tooltip--attr-gap; - opacity: 1; - } - - .#{$ns}AsideNav-list > .#{$ns}AsideNav-item > a { - text-align: center; - position: relative; - padding: 0; - text-align: center; - height: $Layout-nav--folded-height; - border: none; - - .#{$ns}AsideNav-itemArrow, - .#{$ns}AsideNav-itemLabel { - display: none; - } - - .#{$ns}AsideNav-itemIcon { - width: auto; - float: none !important; - display: block; - font-size: px2rem(16px); - margin: 0; - line-height: $Layout-nav--folded-height; - border: none !important; - } - - .#{$ns}AsideNav-itemBadge { - position: absolute; - right: px2rem(12px); - top: px2rem(8px); - z-index: 3; - } - } - - .#{$ns}AsideNav-list > .#{$ns}AsideNav-item.is-lg > a { - height: $Layout-nav-lgHeight; - - .#{$ns}AsideNav-itemIcon { - line-height: $Layout-nav-lgHeight; - } - } - - .#{$ns}AsideNav-item .#{$ns}AsideNav-item a { - padding-left: px2rem(20px) !important; - } - - .#{$ns}AsideNav-subList { - height: 0 !important; - position: absolute; - left: 100%; - top: 0 !important; - z-index: 1050; - width: $Layout-aside-width; - box-shadow: 0 px2rem(2px) px2rem(6px) rgba(0, 0, 0, 0.1); - } - - &.#{$ns}Layout--sm .#{$ns}AsideNav-subList { - width: $Layout-aside--sm-width; - } - - &.#{$ns}Layout--md .#{$ns}AsideNav-subList { - width: $Layout-aside--md-width; - } - - &.#{$ns}Layout--lg .#{$ns}AsideNav-subList { - width: $Layout-aside--lg-width; - } + .#{$ns}Layout--folded { + .#{$ns}AsideNav-label { + display: none; } + + .#{$ns}AsideNav-subHeader { + display: block; + } + + .#{$ns}AsideNav-item:hover > .#{$ns}AsideNav-tooltip { + opacity: 1; + z-index: $zindex-tooltip; + margin: 0 0 0 $Tooltip--attr-gap; + opacity: 1; + } + + .#{$ns}AsideNav-list > .#{$ns}AsideNav-item > a { + text-align: center; + position: relative; + padding: 0; + text-align: center; + height: $Layout-nav--folded-height; + border: none; + + .#{$ns}AsideNav-itemArrow, + .#{$ns}AsideNav-itemLabel { + display: none; + } + + .#{$ns}AsideNav-itemIcon { + width: auto; + float: none !important; + display: block; + font-size: px2rem(16px); + margin: 0; + line-height: $Layout-nav--folded-height; + border: none !important; + } + + .#{$ns}AsideNav-itemBadge { + position: absolute; + right: px2rem(12px); + top: px2rem(8px); + z-index: 3; + } + } + + .#{$ns}AsideNav-list > .#{$ns}AsideNav-item.is-lg > a { + height: $Layout-nav-lgHeight; + + .#{$ns}AsideNav-itemIcon { + line-height: $Layout-nav-lgHeight; + } + } + + .#{$ns}AsideNav-item .#{$ns}AsideNav-item a { + padding-left: px2rem(20px) !important; + } + + .#{$ns}AsideNav-subList { + height: 0 !important; + position: absolute; + left: 100%; + top: 0 !important; + z-index: 1050; + width: $Layout-aside-width; + box-shadow: 0 px2rem(2px) px2rem(6px) rgba(0, 0, 0, 0.1); + } + + &.#{$ns}Layout--sm .#{$ns}AsideNav-subList { + width: $Layout-aside--sm-width; + } + + &.#{$ns}Layout--md .#{$ns}AsideNav-subList { + width: $Layout-aside--md-width; + } + + &.#{$ns}Layout--lg .#{$ns}AsideNav-subList { + width: $Layout-aside--lg-width; + } + } } diff --git a/scss/layout/_grid.scss b/scss/layout/_grid.scss index 33f2e6d4..8d0bfeaf 100644 --- a/scss/layout/_grid.scss +++ b/scss/layout/_grid.scss @@ -83,39 +83,39 @@ // } @mixin make-grid($class) { - // @include float-grid-columns($class); - // @include loop-grid-columns($Grid-columns, $class, width); - // @include loop-grid-columns($Grid-columns, $class, pull); - // @include loop-grid-columns($Grid-columns, $class, push); - // @include loop-grid-columns($Grid-columns, $class, offset); + // @include float-grid-columns($class); + // @include loop-grid-columns($Grid-columns, $class, width); + // @include loop-grid-columns($Grid-columns, $class, pull); + // @include loop-grid-columns($Grid-columns, $class, push); + // @include loop-grid-columns($Grid-columns, $class, offset); - @for $i from 1 through $Grid-columns { - .#{$ns}Grid-col--#{$class}#{$i} { - flex: 0 0 percentage($i / $Grid-columns); - max-width: percentage($i / $Grid-columns); - min-height: 1px; - padding-left: ($Grid-gutterWidth / 2); - padding-right: ($Grid-gutterWidth / 2); - } + @for $i from 1 through $Grid-columns { + .#{$ns}Grid-col--#{$class}#{$i} { + flex: 0 0 percentage($i / $Grid-columns); + max-width: percentage($i / $Grid-columns); + min-height: 1px; + padding-left: ($Grid-gutterWidth / 2); + padding-right: ($Grid-gutterWidth / 2); } + } - .#{$ns}Grid-col--#{$class} { - flex-basis: 0; - flex-grow: 1; - min-height: 1px; - max-width: 100%; - width: 0; // 很重要，没有的话会被撑开。 - padding-left: ($Grid-gutterWidth / 2); - padding-right: ($Grid-gutterWidth / 2); - } + .#{$ns}Grid-col--#{$class} { + flex-basis: 0; + flex-grow: 1; + min-height: 1px; + max-width: 100%; + width: 0; // 很重要，没有的话会被撑开。 + padding-left: ($Grid-gutterWidth / 2); + padding-right: ($Grid-gutterWidth / 2); + } } // Generate Grid row @mixin make-row($gutter: $Grid-gutterWidth) { - margin-left: ($gutter / -2); - margin-right: ($gutter / -2); - display: flex; - flex-wrap: wrap; + margin-left: ($gutter / -2); + margin-right: ($gutter / -2); + display: flex; + flex-wrap: wrap; } // .#{$ns}Grid-container { @@ -143,17 +143,17 @@ @include make-grid(xs); @include media-breakpoint-up(sm) { - .#{$ns}Grid { - @include make-row; - } + .#{$ns}Grid { + @include make-row; + } - @include make-grid(sm); + @include make-grid(sm); } @include media-breakpoint-up(md) { - @include make-grid(md); + @include make-grid(md); } @include media-breakpoint-up(lg) { - @include make-grid(lg); + @include make-grid(lg); } diff --git a/scss/layout/_hbox.scss b/scss/layout/_hbox.scss index bb0fb770..a0bf6c9c 100644 --- a/scss/layout/_hbox.scss +++ b/scss/layout/_hbox.scss @@ -1,98 +1,98 @@ .#{$ns}Hbox { - display: table; - table-layout: fixed; - border-spacing: 0; - width: 100%; - height: 100%; + display: table; + table-layout: fixed; + border-spacing: 0; + width: 100%; + height: 100%; - & > .#{$ns}Hbox-col { - display: table-cell; - vertical-align: top; - height: 100%; - float: none; - } + & > .#{$ns}Hbox-col { + display: table-cell; + vertical-align: top; + height: 100%; + float: none; + } } .#{$ns}FormHbox { - margin-left: -15px; - margin-right: -15px; + margin-left: -15px; + margin-right: -15px; + + > .#{$ns}Hbox > .#{$ns}Hbox-col { + padding-left: 15px; + padding-right: 15px; + vertical-align: top; + + > .#{$ns}Form-group { + margin-left: 0; + margin-right: 0; + } + + > .#{$ns}Form-group:last-child { + margin-bottom: 0; + } + } + + &.#{$ns}Hbox--xs { + margin-left: -5px; + margin-right: -5px; > .#{$ns}Hbox > .#{$ns}Hbox-col { - padding-left: 15px; - padding-right: 15px; - vertical-align: top; - - > .#{$ns}Form-group { - margin-left: 0; - margin-right: 0; - } - - > .#{$ns}Form-group:last-child { - margin-bottom: 0; - } + padding-left: 5px; + padding-right: 5px; } + } - &.#{$ns}Hbox--xs { - margin-left: -5px; - margin-right: -5px; + &.#{$ns}Hbox--sm { + margin-left: -10px; + margin-right: -10px; - > .#{$ns}Hbox > .#{$ns}Hbox-col { - padding-left: 5px; - padding-right: 5px; - } - } - - &.#{$ns}Hbox--sm { - margin-left: -10px; - margin-right: -10px; - - > .#{$ns}Hbox > .#{$ns}Hbox-col { - padding-left: 10px; - padding-right: 10px; - } + > .#{$ns}Hbox > .#{$ns}Hbox-col { + padding-left: 10px; + padding-right: 10px; } + } } @include media-breakpoint-down(md) { - .#{$ns}Hbox--autoSm { - display: block; + .#{$ns}Hbox--autoSm { + display: block; - & > .#{$ns}Hbox-col { - width: auto; - height: auto; - display: block; + & > .#{$ns}Hbox-col { + width: auto; + height: auto; + display: block; - &.show { - display: block !important; - } - } - - & .#{$ns}Vbox { - height: auto; - } - - & .cell-inner { - position: static !important; - } + &.show { + display: block !important; + } } + + & .#{$ns}Vbox { + height: auto; + } + + & .cell-inner { + position: static !important; + } + } } @include media-breakpoint-down(sm) { - .#{$ns}Hbox--autoXs { - display: block; + .#{$ns}Hbox--autoXs { + display: block; - & > .#{$ns}Hbox-col { - width: auto; - height: auto; - display: block; - } - - & .#{$ns}Vbox { - height: auto; - } - - & .cell-inner { - position: static !important; - } + & > .#{$ns}Hbox-col { + width: auto; + height: auto; + display: block; } + + & .#{$ns}Vbox { + height: auto; + } + + & .cell-inner { + position: static !important; + } + } } diff --git a/scss/layout/_layout.scss b/scss/layout/_layout.scss index 7c8b0262..aa6d1e65 100644 --- a/scss/layout/_layout.scss +++ b/scss/layout/_layout.scss @@ -1,519 +1,505 @@ html, body { - width: 100%; - height: 100%; + width: 100%; + height: 100%; } body { - overflow-x: hidden; + overflow-x: hidden; } .#{$ns}Layout { - height: auto; - min-height: 100%; - width: 100%; - position: relative; + height: auto; + min-height: 100%; + width: 100%; + position: relative; - &:before { - content: ""; - position: absolute; - width: inherit; - top: 0; - bottom: 0; - z-index: -1; - background-color: $body-bg; - border: inherit; - display: block; - } + &:before { + content: ''; + position: absolute; + width: inherit; + top: 0; + bottom: 0; + z-index: -1; + background-color: $body-bg; + border: inherit; + display: block; + } - &--boxed { - margin-right: auto; - margin-left: auto; - // box-shadow: 0 0 30px rgba(0, 0, 0, 0.3); - } + &--boxed { + margin-right: auto; + margin-left: auto; + // box-shadow: 0 0 30px rgba(0, 0, 0, 0.3); + } + + .#{$ns}Layout-header { + background: $Layout-header-bg; + box-shadow: $Layout-header-boxShadow; + height: $Layout-header-height; + } + + &--headerFixed { + padding-top: $Layout-header-height; .#{$ns}Layout-header { - background: $Layout-header-bg; - box-shadow: $Layout-header-boxShadow; - height: $Layout-header-height; + position: fixed; + top: 0; + width: 100%; + z-index: $zindex-fixed; + } + } + + &-brandBar { + background: $Layout-brand-bg; + color: $Layout-brandBar-color; + + > button { + padding: px2rem(10px) px2rem(17px); + font-size: px2rem(16px); + line-height: $Layout-header-height - px2rem(20px); + text-decoration: none; + background-color: transparent; + border: none; + } + } + + &-brand { + color: $Layout-brand-color; + text-align: left; + font-size: $fontSizeMd; + font-weight: $fontWeightNormal; + max-width: 100%; + height: auto; + line-height: $Layout-header-height; + display: inline-block; + vertical-align: middle; + padding: 0 px2rem(20px); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + + &:hover { + text-decoration: none; } - &--headerFixed { - padding-top: $Layout-header-height; + img { + max-height: $Layout-header-height / 2; + // margin-top: px2rem(-4px); + vertical-align: middle; + display: inline; + } + } - .#{$ns}Layout-header { - position: fixed; - top: 0; - width: 100%; - z-index: $zindex-fixed; - } + &-headerBar { + border-bottom: $Layout-headerBar-borderBottom; + min-height: $Layout-header-height; + padding: 0 $gap-sm; + } + + &-aside { + float: left; + background: $Layout-aside-bg; + color: $Layout-aside-color; + + &:before { + content: ''; + position: absolute; + width: inherit; + top: 0; + bottom: 0; + z-index: -1; + background-color: inherit; + border: inherit; + } + } + + &-asideFooter { + position: absolute; + bottom: 0; + width: 100%; + z-index: $zindex-fixed; + max-width: $Layout-aside-width; + + // .app-aside-folded & { + // max-width: @app-aside-folded-width; + // } + ~ div { + padding-bottom: px2rem(50px); + } + } + + &-content { + height: 100%; + @include clearfix(); + } + + // &-content--full { + // position: absolute; + // top: $Layout-header-height; + // bottom: $Layout-header-height; + // height: auto; + // width: auto !important; + // padding: 0 !important; + // overflow-y: auto; + // -webkit-overflow-scrolling: touch; + + // &.h-full { + // bottom: 0; + // height: auto; + // } + // } + + &-body { + padding-bottom: $Layout-header-height; + width: 100%; + } + + &--noFooter &-body { + padding-bottom: 0; + } + + &-content &-body { + float: left; + } + + &-footer { + position: absolute; + bottom: 0; + left: 0; + right: 0; + // z-index: 1005; 为啥要这么高 + z-index: 0; + } + + &--sm { + .#{$ns}Layout-asideFooter { + max-width: $Layout-aside--sm-width; + } + + .#{$ns}AsideNav-item a { + font-size: $fontSizeSm; + } + } + + &--md .#{$ns}Layout-asideFooter { + max-width: $Layout-aside--md-width; + } + + &--lg .#{$ns}Layout-asideFooter { + max-width: $Layout-aside--lg-width; + } +} + +@include media-breakpoint-down(sm) { + .#{$ns}Layout { + // Layout 层没有出现滚动条件，导致移动端无法响应固定顶部/底部效果 + // overflow-x: hidden; + } + + .#{$ns}Layout-content { + transition: transform 0.2s ease; + } + + .#{$ns}Layout-aside { + display: none; + + .#{$ns}Layout--offScreen & { + position: fixed; + top: px2rem(50px); + bottom: 0; + width: $Layout--offscreen-width; + display: block !important; + visibility: visible; + overflow-x: hidden; + overflow-y: auto; + -webkit-overflow-scrolling: touch; + z-index: 1010; + } + } + + .#{$ns}Layout-headerBar { + display: none; + } + + .#{$ns}Layout--offScreen { + .#{$ns}Layout-content, + .#{$ns}Layout-footer { + background-color: $body-bg; + transition: transform 0.2s ease; + backface-visibility: hidden; + transform: translate3d($Layout--offscreen-width, 0px, 0px); + overflow: hidden; + position: fixed; + width: 100%; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: 1015; + padding-top: px2rem(50px); + } + } +} + +@include media-breakpoint-up(md) { + .#{$ns}Layout { + &--boxed { + width: px2rem(760px); + + &.#{$ns}Layout--headerFixed .#{$ns}Layout-header { + width: px2rem(760px); + } + } + + &-brand, + &-brandBar, + &-aside { + width: $Layout-aside-width; } &-brandBar { - background: $Layout-brand-bg; - color: $Layout-brandBar-color; - - >button { - padding: px2rem(10px) px2rem(17px); - font-size: px2rem(16px); - line-height: $Layout-header-height - px2rem(20px); - text-decoration: none; - background-color: transparent; - border: none; - } + float: left; } - &-brand { - color: $Layout-brand-color; - text-align: left; - font-size: $fontSizeMd; - font-weight: $fontWeightNormal; - max-width: 100%; - height: auto; - line-height: $Layout-header-height; - display: inline-block; - vertical-align: middle; - padding: 0 px2rem(20px); - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - - &:hover { - text-decoration: none; - } - - img { - max-height: $Layout-header-height / 2; - // margin-top: px2rem(-4px); - vertical-align: middle; - display: inline; - } + &--withAside { + .#{$ns}Layout-headerBar, + .#{$ns}Layout-content, + .#{$ns}Layout-footer { + margin-left: $Layout-aside-width; + } } - &-headerBar { - border-bottom: $Layout-headerBar-borderBottom; - min-height: $Layout-header-height; - padding: 0 $gap-sm; + .visible-folded { + display: none; } - &-aside { - float: left; - background: $Layout-aside-bg; - color: $Layout-aside-color; + &--folded { + .visible-folded { + display: inherit; + } - &:before { - content: ""; - position: absolute; - width: inherit; - top: 0; - bottom: 0; - z-index: -1; - background-color: inherit; - border: inherit; - } - } + .hidden-folded { + display: none !important; + } - &-asideFooter { - position: absolute; - bottom: 0; - width: 100%; - z-index: $zindex-fixed; - max-width: $Layout-aside-width; + .text-center-folded { + text-align: center; + } - // .app-aside-folded & { - // max-width: @app-aside-folded-width; - // } - ~div { - padding-bottom: px2rem(50px); - } - } + .pull-none-folded { + float: none !important; + } - &-content { - height: 100%; - @include clearfix(); - } + .w-auto-folded { + width: auto; + } - // &-content--full { - // position: absolute; - // top: $Layout-header-height; - // bottom: $Layout-header-height; - // height: auto; - // width: auto !important; - // padding: 0 !important; - // overflow-y: auto; - // -webkit-overflow-scrolling: touch; - - // &.h-full { - // bottom: 0; - // height: auto; - // } - // } - - &-body { - padding-bottom: $Layout-header-height; - width: 100%; - } - - &--noFooter &-body { - padding-bottom: 0; - } - - &-content &-body { - float: left; - } - - &-footer { - position: absolute; - bottom: 0; - left: 0; - right: 0; - // z-index: 1005; 为啥要这么高 - z-index: 0; - } - - &--sm { - .#{$ns}Layout-asideFooter { - max-width: $Layout-aside--sm-width; - } - - .#{$ns}AsideNav-item a { - font-size: $fontSizeSm; - } - } - - &--md .#{$ns}Layout-asideFooter { - max-width: $Layout-aside--md-width; - } - - &--lg .#{$ns}Layout-asideFooter { - max-width: $Layout-aside--lg-width; - } -} - - -@include media-breakpoint-down(sm) { - .#{$ns}Layout { - // Layout 层没有出现滚动条件，导致移动端无法响应固定顶部/底部效果 - // overflow-x: hidden; - } - - - - .#{$ns}Layout-content { - transition: transform 0.2s ease; - } - - .#{$ns}Layout-aside { - display: none; - - .#{$ns}Layout--offScreen & { - position: fixed; - top: px2rem(50px); - bottom: 0; - width: $Layout--offscreen-width; - display: block !important; - visibility: visible; - overflow-x: hidden; - overflow-y: auto; - -webkit-overflow-scrolling: touch; - z-index: 1010; - } - } - - .#{$ns}Layout-headerBar { - display: none; - } - - .#{$ns}Layout--offScreen { + .#{$ns}Layout-aside, + .#{$ns}Layout-brandBar { + width: $Layout-aside--folded-width; + } + &.#{$ns}Layout--withAside { + .#{$ns}Layout-headerBar, .#{$ns}Layout-content, .#{$ns}Layout-footer { - background-color: $body-bg; - transition: transform 0.2s ease; - backface-visibility: hidden; - transform: translate3d($Layout--offscreen-width, 0px, 0px); - overflow: hidden; - position: fixed; - width: 100%; - top: 0; - bottom: 0; - left: 0; - right: 0; - z-index: 1015; - padding-top: px2rem(50px); + margin-left: $Layout-aside--folded-width; } + } + + .#{$ns}Layout-brand { + display: block; + padding: 0; + font-size: $fontSizeLg; + text-align: center; + } } -} + &--asideFixed { + .#{$ns}Layout-aside { + height: 100%; -@include media-breakpoint-up(md) { - .#{$ns}Layout { - &--boxed { - width: px2rem(760px); + &:before { + position: fixed; + z-index: 15; + } + } - &.#{$ns}Layout--headerFixed .#{$ns}Layout-header { - width: px2rem(760px); - } + .#{$ns}Layout-brandBar { + position: fixed; + } + + .#{$ns}Layout-asideWrap { + position: fixed; + overflow: hidden; + top: $Layout-header-height; + bottom: 0; + left: 0; + width: $Layout-aside-width - px2rem(1px); + z-index: $zindex-fixed; + } + + .#{$ns}Layout-asideInner { + width: $Layout-aside-width + $scrollbar-width; + position: relative; + height: 100%; + overflow-x: hidden; + overflow-y: scroll; + -webkit-overflow-scrolling: touch; + + &::-webkit-scrollbar { + -webkit-appearance: none; } - &-brand, - &-brandBar, - &-aside { - width: $Layout-aside-width; + &::-webkit-scrollbar:vertical { + width: $scrollbar-width; } - &-brandBar { - float: left; - } - - &--withAside { - - .#{$ns}Layout-headerBar, - .#{$ns}Layout-content, - .#{$ns}Layout-footer { - margin-left: $Layout-aside-width; - } - } - - .visible-folded { - display: none; - } - - &--folded { - .visible-folded { - display: inherit; - } - - .hidden-folded { - display: none !important; - } - - .text-center-folded { - text-align: center; - } - - .pull-none-folded { - float: none !important; - } - - .w-auto-folded { - width: auto; - } - - .#{$ns}Layout-aside, - .#{$ns}Layout-brandBar { - width: $Layout-aside--folded-width; - } - - &.#{$ns}Layout--withAside { - - .#{$ns}Layout-headerBar, - .#{$ns}Layout-content, - .#{$ns}Layout-footer { - margin-left: $Layout-aside--folded-width; - } - } - - .#{$ns}Layout-brand { - display: block; - padding: 0; - font-size: $fontSizeLg; - text-align: center; - } - } - - &--asideFixed { - .#{$ns}Layout-aside { - height: 100%; - - &:before { - position: fixed; - z-index: 15; - } - } - - .#{$ns}Layout-brandBar { - position: fixed; - } - - .#{$ns}Layout-asideWrap { - position: fixed; - overflow: hidden; - top: $Layout-header-height; - bottom: 0; - left: 0; - width: $Layout-aside-width - px2rem(1px); - z-index: $zindex-fixed; - } - - .#{$ns}Layout-asideInner { - width: $Layout-aside-width + $scrollbar-width; - position: relative; - height: 100%; - overflow-x: hidden; - overflow-y: scroll; - -webkit-overflow-scrolling: touch; - - &::-webkit-scrollbar { - -webkit-appearance: none; - } - - &::-webkit-scrollbar:vertical { - width: $scrollbar-width; - } - - &>* { - width: $Layout-aside-width; - } - } - } - - &--asideFixed.#{$ns}Layout--folded { - .#{$ns}Layout-aside { - position: static; - } - - .#{$ns}Layout-brandBar { - position: static; - } - - .#{$ns}Layout-asideWrap { - overflow: visible; - position: relative; - top: 0; - z-index: 15; - width: $Layout-aside--folded-width - px2rem(1px); - } - - .#{$ns}Layout-asideInner { - overflow: visible; - width: $Layout-aside--folded-width + $scrollbar-width; - - >* { - width: $Layout-aside--folded-width; - } - } - } - - &--sm:not(.#{$ns}Layout--folded) { - - .#{$ns}Layout-brand, - .#{$ns}Layout-brandBar, - .#{$ns}Layout-aside { - width: $Layout-aside--sm-width; - } - - &.#{$ns}Layout--withAside { - - .#{$ns}Layout-headerBar, - .#{$ns}Layout-content, - .#{$ns}Layout-footer { - margin-left: $Layout-aside--sm-width; - } - } - - &.#{$ns}Layout--asideFixed { - .#{$ns}Layout-asideWrap { - width: $Layout-aside--sm-width - px2rem(1px); - } - - .#{$ns}Layout-asideInner { - width: $Layout-aside--sm-width + $scrollbar-width; - - &>* { - width: $Layout-aside--sm-width; - } - } - } - } - - &--md:not(.#{$ns}Layout--folded) { - - .#{$ns}Layout-brand, - .#{$ns}Layout-brandBar, - .#{$ns}Layout-aside { - width: $Layout-aside--md-width; - } - - &.#{$ns}Layout--withAside { - - .#{$ns}Layout-headerBar, - .#{$ns}Layout-content, - .#{$ns}Layout-footer { - margin-left: $Layout-aside--md-width; - } - } - - &.#{$ns}Layout--asideFixed { - .#{$ns}Layout-asideWrap { - width: $Layout-aside--md-width - px2rem(1px); - } - - .#{$ns}Layout-asideInner { - width: $Layout-aside--md-width + $scrollbar-width; - - &>* { - width: $Layout-aside--md-width; - } - } - } - } - - &--lg:not(.#{$ns}Layout--folded) { - - .#{$ns}Layout-brand, - .#{$ns}Layout-brandBar, - .#{$ns}Layout-aside { - width: $Layout-aside--lg-width; - } - - &.#{$ns}Layout--withAside { - - .#{$ns}Layout-headerBar, - .#{$ns}Layout-content, - .#{$ns}Layout-footer { - margin-left: $Layout-aside--lg-width; - } - } - - &.#{$ns}Layout--asideFixed { - .#{$ns}Layout-asideWrap { - width: $Layout-aside--lg-width - px2rem(1px); - } - - .#{$ns}Layout-asideInner { - width: $Layout-aside--lg-width + $scrollbar-width; - - &>* { - width: $Layout-aside--lg-width; - } - } - } + & > * { + width: $Layout-aside-width; } + } } -} + &--asideFixed.#{$ns}Layout--folded { + .#{$ns}Layout-aside { + position: static; + } + + .#{$ns}Layout-brandBar { + position: static; + } + + .#{$ns}Layout-asideWrap { + overflow: visible; + position: relative; + top: 0; + z-index: 15; + width: $Layout-aside--folded-width - px2rem(1px); + } + + .#{$ns}Layout-asideInner { + overflow: visible; + width: $Layout-aside--folded-width + $scrollbar-width; + + > * { + width: $Layout-aside--folded-width; + } + } + } + + &--sm:not(.#{$ns}Layout--folded) { + .#{$ns}Layout-brand, + .#{$ns}Layout-brandBar, + .#{$ns}Layout-aside { + width: $Layout-aside--sm-width; + } + + &.#{$ns}Layout--withAside { + .#{$ns}Layout-headerBar, + .#{$ns}Layout-content, + .#{$ns}Layout-footer { + margin-left: $Layout-aside--sm-width; + } + } + + &.#{$ns}Layout--asideFixed { + .#{$ns}Layout-asideWrap { + width: $Layout-aside--sm-width - px2rem(1px); + } + + .#{$ns}Layout-asideInner { + width: $Layout-aside--sm-width + $scrollbar-width; + + & > * { + width: $Layout-aside--sm-width; + } + } + } + } + + &--md:not(.#{$ns}Layout--folded) { + .#{$ns}Layout-brand, + .#{$ns}Layout-brandBar, + .#{$ns}Layout-aside { + width: $Layout-aside--md-width; + } + + &.#{$ns}Layout--withAside { + .#{$ns}Layout-headerBar, + .#{$ns}Layout-content, + .#{$ns}Layout-footer { + margin-left: $Layout-aside--md-width; + } + } + + &.#{$ns}Layout--asideFixed { + .#{$ns}Layout-asideWrap { + width: $Layout-aside--md-width - px2rem(1px); + } + + .#{$ns}Layout-asideInner { + width: $Layout-aside--md-width + $scrollbar-width; + + & > * { + width: $Layout-aside--md-width; + } + } + } + } + + &--lg:not(.#{$ns}Layout--folded) { + .#{$ns}Layout-brand, + .#{$ns}Layout-brandBar, + .#{$ns}Layout-aside { + width: $Layout-aside--lg-width; + } + + &.#{$ns}Layout--withAside { + .#{$ns}Layout-headerBar, + .#{$ns}Layout-content, + .#{$ns}Layout-footer { + margin-left: $Layout-aside--lg-width; + } + } + + &.#{$ns}Layout--asideFixed { + .#{$ns}Layout-asideWrap { + width: $Layout-aside--lg-width - px2rem(1px); + } + + .#{$ns}Layout-asideInner { + width: $Layout-aside--lg-width + $scrollbar-width; + + & > * { + width: $Layout-aside--lg-width; + } + } + } + } + } +} @include media-breakpoint-up(lg) { - .#{$ns}Layout { - &--boxed { - width: px2rem(980px); + .#{$ns}Layout { + &--boxed { + width: px2rem(980px); - &.#{$ns}Layout--headerFixed .#{$ns}Layout-header { - width: px2rem(980px); - } - } + &.#{$ns}Layout--headerFixed .#{$ns}Layout-header { + width: px2rem(980px); + } } + } } @include media-breakpoint-up(xl) { - .#{$ns}Layout { - &--boxed { - width: px2rem(1180px); + .#{$ns}Layout { + &--boxed { + width: px2rem(1180px); - &.#{$ns}Layout--headerFixed .#{$ns}Layout-header { - width: px2rem(1180px); - } - } + &.#{$ns}Layout--headerFixed .#{$ns}Layout-header { + width: px2rem(1180px); + } } -} \ No newline at end of file + } +} diff --git a/scss/layout/_vbox.scss b/scss/layout/_vbox.scss index d1f9f20d..572cccb1 100644 --- a/scss/layout/_vbox.scss +++ b/scss/layout/_vbox.scss @@ -1,38 +1,38 @@ .#{$ns}Vbox { - display: table; - border-spacing: 0; - position: relative; - width: 100%; + display: table; + border-spacing: 0; + position: relative; + width: 100%; + height: 100%; + min-height: 240px; + + & .row-row { + display: table-row; height: 100%; - min-height: 240px; - & .row-row { - display: table-row; - height: 100%; + & .#{$ns}Vbox-cell { + position: relative; + height: 100%; + width: 100%; - & .#{$ns}Vbox-cell { - position: relative; - height: 100%; - width: 100%; + .ie & { + display: table-cell; + overflow: auto; - .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; - } + & .cell-inner { + overflow: visible !important; } + } + + & .cell-inner { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + -webkit-overflow-scrolling: touch; + overflow: auto; + } } + } } diff --git a/src/components/DatePicker.tsx b/src/components/DatePicker.tsx index f1798651..aa19d3c5 100644 --- a/src/components/DatePicker.tsx +++ b/src/components/DatePicker.tsx @@ -538,9 +538,9 @@ class CustomDaysView extends React.Component { if (isDisabled) classes += ' rdtDisabled'; dayProps = { - key: prevMonth.format('M_D'), + 'key': prevMonth.format('M_D'), 'data-value': prevMonth.date(), - className: classes + 'className': classes }; if (!isDisabled) dayProps.onClick = this.handleDayChange; diff --git a/src/components/DateRangePicker.tsx b/src/components/DateRangePicker.tsx index a810b502..e0a6854f 100644 --- a/src/components/DateRangePicker.tsx +++ b/src/components/DateRangePicker.tsx @@ -44,7 +44,7 @@ export interface DateRangePickerState { } const availableRanges: {[propName: string]: any} = { - today: { + 'today': { label: '今天', startDate: (now: moment.Moment) => { return now.startOf('day'); @@ -54,7 +54,7 @@ const availableRanges: {[propName: string]: any} = { } }, - yesterday: { + 'yesterday': { label: '昨天', startDate: (now: moment.Moment) => { return now.add(-1, 'days').startOf('day'); @@ -94,7 +94,7 @@ const availableRanges: {[propName: string]: any} = { } }, - prevweek: { + 'prevweek': { label: '上周', startDate: (now: moment.Moment) => { return now.startOf('week').add(-1, 'weeks'); @@ -107,7 +107,7 @@ const availableRanges: {[propName: string]: any} = { } }, - thismonth: { + 'thismonth': { label: '本月', startDate: (now: moment.Moment) => { return now.startOf('month'); @@ -117,7 +117,7 @@ const availableRanges: {[propName: string]: any} = { } }, - prevmonth: { + 'prevmonth': { label: '上个月', startDate: (now: moment.Moment) => { return now.startOf('month').add(-1, 'month'); @@ -130,7 +130,7 @@ const availableRanges: {[propName: string]: any} = { } }, - prevquarter: { + 'prevquarter': { label: '上个季节', startDate: (now: moment.Moment) => { return now.startOf('quarter').add(-1, 'quarter'); @@ -143,7 +143,7 @@ const availableRanges: {[propName: string]: any} = { } }, - thisquarter: { + 'thisquarter': { label: '本季度', startDate: (now: moment.Moment) => { return now.startOf('quarter'); diff --git a/src/components/Editor.tsx b/src/components/Editor.tsx index 7292bc02..50e0bd35 100644 --- a/src/components/Editor.tsx +++ b/src/components/Editor.tsx @@ -13,20 +13,20 @@ function noJsExt(raw: string) { } const defaultConfig = { - url: 'vs/loader.js', + 'url': 'vs/loader.js', 'vs/nls': { availableLanguages: { '*': 'zh-cn' } }, - paths: {} + 'paths': {} }; try { // fis 编译的话，能正确赋值上，如果不是，那请通过外部参数传递。 defaultConfig.url = __uri('monaco-editor/min/vs/loader.js'); defaultConfig.paths = { - vs: noJsExt(__uri('monaco-editor/min/vs/editor/editor.main.js')).replace( + 'vs': noJsExt(__uri('monaco-editor/min/vs/editor/editor.main.js')).replace( /\/vs\/.*$/, '' ), diff --git a/src/components/RichText.tsx b/src/components/RichText.tsx index e841aa48..839c27c6 100644 --- a/src/components/RichText.tsx +++ b/src/components/RichText.tsx @@ -218,35 +218,35 @@ export default class FroalaEditor extends React.Component { 'Type something': '\u8f93\u5165\u4e00\u4e9b\u5185\u5bb9', // Basic formatting - Bold: '\u7c97\u4f53', - Italic: '\u659c\u4f53', - Underline: '\u4e0b\u5212\u7ebf', - Strikethrough: '\u5220\u9664\u7ebf', + 'Bold': '\u7c97\u4f53', + 'Italic': '\u659c\u4f53', + 'Underline': '\u4e0b\u5212\u7ebf', + 'Strikethrough': '\u5220\u9664\u7ebf', // Main buttons - Insert: '\u63d2\u5165', - Delete: '\u5220\u9664', - Cancel: '\u53d6\u6d88', - OK: '\u786e\u5b9a', - Back: '\u80cc\u90e8', - Remove: '\u53bb\u6389', - More: '\u66f4\u591a', - Update: '\u66f4\u65b0', - Style: '\u98ce\u683c', + 'Insert': '\u63d2\u5165', + 'Delete': '\u5220\u9664', + 'Cancel': '\u53d6\u6d88', + 'OK': '\u786e\u5b9a', + 'Back': '\u80cc\u90e8', + 'Remove': '\u53bb\u6389', + 'More': '\u66f4\u591a', + 'Update': '\u66f4\u65b0', + 'Style': '\u98ce\u683c', // Font 'Font Family': '\u5b57\u4f53', 'Font Size': '\u5b57\u53f7', // Colors - Colors: '\u989c\u8272', - Background: '\u80cc\u666f', - Text: '\u6587\u5b57', + 'Colors': '\u989c\u8272', + 'Background': '\u80cc\u666f', + 'Text': '\u6587\u5b57', // Paragraphs 'Paragraph Format': '\u683c\u5f0f', - Normal: '\u6b63\u5e38', - Code: '\u4ee3\u7801', + 'Normal': '\u6b63\u5e38', + 'Code': '\u4ee3\u7801', 'Heading 1': '\u6807\u98981', 'Heading 2': '\u6807\u98982', 'Heading 3': '\u6807\u98983', @@ -257,12 +257,12 @@ export default class FroalaEditor extends React.Component { 'Inline Style': '\u5185\u8054\u6837\u5f0f', // Alignment - Align: '\u5bf9\u9f50\u65b9\u5f0f', + 'Align': '\u5bf9\u9f50\u65b9\u5f0f', 'Align Left': '\u5de6\u5bf9\u9f50', 'Align Center': '\u5c45\u4e2d', 'Align Right': '\u53f3\u5bf9\u9f50', 'Align Justify': '\u4e24\u7aef\u5bf9\u9f50', - None: '\u65e0', + 'None': '\u65e0', // Lists 'Ordered List': '\u7f16\u53f7\u5217\u8868', @@ -277,32 +277,32 @@ export default class FroalaEditor extends React.Component { 'Open in new tab': '\u5f00\u542f\u5728\u65b0\u6807\u7b7e\u9875', 'Open Link': '\u6253\u5f00\u94fe\u63a5', 'Edit Link': '\u7f16\u8f91\u94fe\u63a5', - Unlink: '\u5220\u9664\u94fe\u63a5', + 'Unlink': '\u5220\u9664\u94fe\u63a5', 'Choose Link': '\u9009\u62e9\u94fe\u63a5', // Images 'Insert Image': '\u63d2\u5165\u56fe\u7247', 'Upload Image': '\u4e0a\u4f20\u56fe\u7247', 'By URL': '\u901a\u8fc7\u7f51\u5740', - Browse: '\u6d4f\u89c8', + 'Browse': '\u6d4f\u89c8', 'Drop image': '\u56fe\u50cf\u62d6\u653e', 'or click': '\u6216\u70b9\u51fb', 'Manage Images': '\u7ba1\u7406\u56fe\u50cf', - Loading: '\u8f7d\u5165\u4e2d', - Deleting: '\u5220\u9664', - Tags: '\u6807\u7b7e', + 'Loading': '\u8f7d\u5165\u4e2d', + 'Deleting': '\u5220\u9664', + 'Tags': '\u6807\u7b7e', 'Are you sure? Image will be deleted.': '\u4f60\u786e\u5b9a\u5417\uff1f\u56fe\u50cf\u5c06\u88ab\u5220\u9664\u3002', - Replace: '\u66f4\u6362', - Uploading: '\u4e0a\u4f20', + 'Replace': '\u66f4\u6362', + 'Uploading': '\u4e0a\u4f20', 'Loading image': '\u5bfc\u5165\u56fe\u50cf', - Display: '\u663e\u793a', - Inline: '\u6392\u961f', + 'Display': '\u663e\u793a', + 'Inline': '\u6392\u961f', 'Break Text': '\u65ad\u5f00\u6587\u672c', 'Alternate Text': '\u5907\u7528\u6587\u672c', 'Change Size': '\u5c3a\u5bf8\u53d8\u5316', - Width: '\u5bbd\u5ea6', - Height: '\u9ad8\u5ea6', + 'Width': '\u5bbd\u5ea6', + 'Height': '\u9ad8\u5ea6', 'Something went wrong. Please try again.': '\u51fa\u4e86\u4e9b\u95ee\u9898\u3002 \u8bf7\u518d\u8bd5\u4e00\u6b21\u3002', @@ -316,23 +316,23 @@ export default class FroalaEditor extends React.Component { 'Remove Table': '\u5220\u9664\u8868', 'Table Style': '\u8868\u683c\u6837\u5f0f', 'Horizontal Align': '\u6c34\u5e73\u5bf9\u9f50\u65b9\u5f0f', - Row: '\u884c', + 'Row': '\u884c', 'Insert row above': '\u5728\u4e0a\u65b9\u63d2\u5165', 'Insert row below': '\u5728\u4e0b\u65b9\u63d2\u5165', 'Delete row': '\u5220\u9664\u884c', - Column: '\u5217', + 'Column': '\u5217', 'Insert column before': '\u5728\u5de6\u4fa7\u63d2\u5165', 'Insert column after': '\u5728\u53f3\u4fa7\u63d2\u5165', 'Delete column': '\u5220\u9664\u5217', - Cell: '\u5355\u5143\u683c', + 'Cell': '\u5355\u5143\u683c', 'Merge cells': '\u5408\u5e76\u5355\u5143\u683c', 'Horizontal split': '\u6c34\u5e73\u5206\u5272', 'Vertical split': '\u5782\u76f4\u5206\u5272', 'Cell Background': '\u5355\u5143\u683c\u80cc\u666f', 'Vertical Align': '\u5782\u76f4\u5bf9\u9f50\u65b9\u5f0f', - Top: '\u6700\u4f73', - Middle: '\u4e2d\u95f4', - Bottom: '\u5e95\u90e8', + 'Top': '\u6700\u4f73', + 'Middle': '\u4e2d\u95f4', + 'Bottom': '\u5e95\u90e8', 'Align Top': '\u9876\u90e8\u5bf9\u9f50', 'Align Middle': '\u4e2d\u95f4\u5bf9\u9f50', 'Align Bottom': '\u5e95\u90e8\u5bf9\u9f50', @@ -343,7 +343,7 @@ export default class FroalaEditor extends React.Component { 'Drop file': '\u6587\u4ef6\u62d6\u653e', // Emoticons - Emoticons: '\u8868\u60c5', + 'Emoticons': '\u8868\u60c5', 'Grinning face': '\u8138\u4e0a\u7b11\u563b\u563b', 'Grinning face with smiling eyes': '', 'Face with tears of joy': @@ -416,14 +416,14 @@ export default class FroalaEditor extends React.Component { 'Face with medical mask': '\u9762\u5bf9\u533b\u7597\u53e3\u7f69', // Line breaker - Break: '\u7834', + 'Break': '\u7834', // Math - Subscript: '\u4e0b\u6807', - Superscript: '\u4e0a\u6807', + 'Subscript': '\u4e0b\u6807', + 'Superscript': '\u4e0a\u6807', // Full screen - Fullscreen: '\u5168\u5c4f', + 'Fullscreen': '\u5168\u5c4f', // Horizontal line 'Insert Horizontal Line': '\u63d2\u5165\u6c34\u5e73\u7ebf', @@ -432,8 +432,8 @@ export default class FroalaEditor extends React.Component { 'Clear Formatting': '\u683c\u5f0f\u5316\u5220\u9664', // Undo, redo - Undo: '\u64a4\u6d88', - Redo: '\u91cd\u590d', + 'Undo': '\u64a4\u6d88', + 'Redo': '\u91cd\u590d', // Select all 'Select All': '\u5168\u9009', @@ -442,9 +442,9 @@ export default class FroalaEditor extends React.Component { 'Code View': '\u4ee3\u7801\u89c6\u56fe', // Quote - Quote: '\u5f15\u7528', - Increase: '\u589e\u52a0\u5f15\u7528', - Decrease: '\u5220\u9664\u5f15\u7528', + 'Quote': '\u5f15\u7528', + 'Increase': '\u589e\u52a0\u5f15\u7528', + 'Decrease': '\u5220\u9664\u5f15\u7528', // Quick Insert 'Quick Insert': '\u5feb\u63d2' diff --git a/src/renderers/Form/index.tsx b/src/renderers/Form/index.tsx index 3840e4c1..3f31e137 100644 --- a/src/renderers/Form/index.tsx +++ b/src/renderers/Form/index.tsx @@ -950,7 +950,14 @@ export default class Form extends React.Component { } renderBody() { - const {tabs, fieldSet, controls, mode, className, classnames: cx} = this.props; + const { + tabs, + fieldSet, + controls, + mode, + className, + classnames: cx + } = this.props; return (
diff --git a/src/themes/cxd.ts b/src/themes/cxd.ts index c858c025..8568fcc5 100644 --- a/src/themes/cxd.ts +++ b/src/themes/cxd.ts @@ -5,27 +5,27 @@ theme('cxd', { classPrefix: 'cxd-', renderers: { - form: { + 'form': { horizontal: { leftFixed: true } }, - pagination: { + 'pagination': { maxButtons: 9, showPageInput: false }, - fieldset: { + 'fieldset': { collapsable: false }, - remark: { + 'remark': { icon: 'iconfont icon-warning-mark', placement: 'right' }, - tabs: { + 'tabs': { mode: 'line' }, @@ -38,7 +38,7 @@ theme('cxd', { clearable: true }, - status: { + 'status': { map: { success: 'Status-icon--success', pending: 'Status-icon--rolling', diff --git a/src/themes/dark.ts b/src/themes/dark.ts index e538e5d9..0b431dbe 100644 --- a/src/themes/dark.ts +++ b/src/themes/dark.ts @@ -6,7 +6,7 @@ theme('dark', { classPrefix, classnames, renderers: { - json: { + 'json': { jsonTheme: 'eighties' }, 'editor-control': { diff --git a/src/utils/helper.ts b/src/utils/helper.ts index 7879f14c..3d53942a 100644 --- a/src/utils/helper.ts +++ b/src/utils/helper.ts @@ -70,7 +70,11 @@ export function syncDataFromSuper( // 如果是 form store，则从父级同步 formItem 种东西。 if (store && store.storeType === 'FormStore') { - keys = uniq((store as IFormStore).items.map(item => `${item.name}`.replace(/\..*$/, ''))); + keys = uniq( + (store as IFormStore).items.map(item => + `${item.name}`.replace(/\..*$/, '') + ) + ); force = false; }