增加 .editorconfig；使用 prettier 格式化 scss

.editorconfig

@@ -0,0 +1,14 @@
+root = true
+
+[*]
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[**.{js,ts,tsx,scss}]
+indent_style = space
+indent_size = 4
+
+[*.md]
+trim_trailing_whitespace = false

scss/_functions.scss

@@ -1,7 +1,15 @@
 //下一个断点
-@function breakpoint-next( $name, $breakpoints: breakpoints, $breakpoint-names: map-keys($breakpoints)) {
+@function breakpoint-next(
+    $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);
+    @return if(
+        $n < length($breakpoint-names),
+        nth($breakpoint-names, $n + 1),
+        null
+    );
 }
 
 //断点最小值
@@ -25,8 +33,10 @@
     @if (unitless($pixels)) {
         $pixels: $pixels * 1px;
     }
+
     @if (unitless($context)) {
         $context: $context * 1px;
     }
+
     @return $pixels / $context * 1rem;
 }

scss/_mixins.scss

@@ -1,12 +1,12 @@
 // 媒体查询最小阈值
 @mixin media-breakpoint-up($name, $breakpoints: $breakpoints) {
     $min: breakpoint-min($name, $breakpoints);
+
     @if $min {
         @media (min-width: $min) {
             @content;
         }
-    }
+    } @else {
-    @else {
         @content;
     }
 }
@@ -14,12 +14,12 @@
 //媒体查询最大阈值
 @mixin media-breakpoint-down($name, $breakpoints: $breakpoints) {
     $max: breakpoint-max($name, $breakpoints);
+
     @if $max {
         @media (max-width: $max) {
             @content;
         }
-    }
+    } @else {
-    @else {
         @content;
     }
 }
@@ -28,6 +28,7 @@
 @mixin media-breakpoint-between($min, $max, $breakpoints: $breakpoints) {
     $min: breakpoint-min($min, $breakpoints);
     $max: breakpoint-max($max, $breakpoints);
+
     @media (min-width: $min) and (max-width: $max) {
         @content;
     }
@@ -49,24 +50,35 @@
     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%) {
+@mixin color-variant(
+    $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;
@@ -78,15 +90,19 @@
     $link-color: desaturate(lighten($bg-color, 50%), 10%);
     $hover-color: #fff;
     color: $font-color;
+
     & a {
         color: $link-color;
+
         &:hover {
             color: $hover-color;
         }
     }
 
     & .open > a {
-        &, &:hover, &:focus {
+        &,
+        &:hover,
+        &:focus {
             color: $hover-color;
         }
     }
@@ -99,11 +115,16 @@
         color: lighten($font-color, 25%) !important;
     }
 
-    &.auto, & .auto {
+    &.auto,
+    & .auto {
         & .list-group-item {
             border-color: darken($bg-color, 5%) !important;
             background-color: transparent;
-            &:hover, &:focus, &:active, &.active {
+
+            &:hover,
+            &:focus,
+            &:active,
+            &.active {
                 @include color-schema($bg-color, 5%, 2.5% !important);
             }
         }
@@ -114,28 +135,36 @@
     a.bg-#{$name}:hover {
         background-color: darken($bg-color, 5%);
     }
+
     a.text-#{$name}:hover {
         color: darken($bg-color, 5%);
     }
+
     .text-#{$name} {
         color: $bg-color;
     }
+
     .text-#{$name}-lt {
         color: darken($bg-color, 5%);
     }
+
     .text-#{$name}-lter {
         color: darken($bg-color, 10%);
     }
+
     .text-#{$name}-dk {
         color: darken($bg-color, 5%);
     }
+
     .text-#{$name}-dker {
         color: darken($bg-color, 10%);
     }
 }
 
 @mixin hover {
-    &:hover { @content; }
+    &:hover {
+        @content;
+    }
 }
 
 @mixin hover-focus {
@@ -166,7 +195,6 @@
     border-radius: $border-radius;
     height: $height;
 
-
     .#{$ns}Button-icon:first-child:not(:last-child):not(.pull-right),
     > .pull-left {
         margin-right: $padding-x;
@@ -202,7 +230,6 @@
 
     &.is-disabled,
     &:disabled {
-
         @if variable-exists(Button-onDisabled-bg) {
             background-color: $Button-onDisabled-bg;
         } @else {
@@ -220,8 +247,6 @@
         } @else {
             border-color: $border;
         }
-
-        
     }
 
     &:not(:disabled):not(.is-disabled):active,

scss/_variables.scss

@@ -1,6 +1,5 @@
-
 // 类名前缀
-$ns: '' !default;
+$ns: "" !default;
 
 // 颜色
 $white: #fff !default;
@@ -18,7 +17,7 @@ $black: #000 !default;
 $orange: #fd7e14 !default;
 $yellow: #ffc107 !default;
 $green: #28a745 !default;
-$turquoise: #00D1B2 !default;
+$turquoise: #00d1b2 !default;
 $cyan: #17a2b8 !default;
 $blue: #007bff !default;
 $purple: #6f42c1 !default;
@@ -36,11 +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;
+$fontFamilySansSerif: -apple-system, BlinkMacSystemFont, "SF Pro SC",
-$fontFamilyMonospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
+    "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;
 $fontSizeSm: px2rem(12px) !default;
@@ -66,19 +71,17 @@ $h4-fontSize: $fontSizeBase * 1.5 !default;
 $h5-fontSize: $fontSizeBase * 1.25 !default;
 $h6-fontSize: $fontSizeBase !default;
 
-
 // 边框
 $borderWidth: px2rem(1px) !default;
 $borderColor: $gray300 !default;
 
-$borderRadius: .142rem !default;
+$borderRadius: 0.142rem !default;
-$borderRadiusMd: .285rem !default;
+$borderRadiusMd: 0.285rem !default;
-$borderRadiusLg: .428rem !default;
+$borderRadiusLg: 0.428rem !default;
 
-
+$boxShadowSm: 0 0.125rem 0.25rem rgba($black, 0.075) !default;
-$boxShadowSm: 0 .125rem .25rem rgba($black, .075) !default;
+$boxShadow: 0 0.5rem 1rem rgba($black, 0.15) !default;
-$boxShadow: 0 .5rem 1rem rgba($black, .15) !default;
+$boxShadowLg: 0 1rem 3rem rgba($black, 0.175) !default;
-$boxShadowLg: 0 1rem 3rem rgba($black, .175) !default;
 
 // 窗口适配
 $breakpoints: (
@@ -139,7 +142,10 @@ $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-onAcitve-bg: saturate(
+    darken($Layout-aside-bg, 5%),
+    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;
 
@@ -160,12 +166,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;
+$Layout-header-boxShadow: 0 px2rem(2px) px2rem(2px) rgba(0, 0, 0, 0.05),
+    0 1px 0 rgba(0, 0, 0, 0.05) !default;
 $Layout-nav-height: px2rem(40px) !default;
 $Layout-nav--folded-height: px2rem(50px) !default;
 $Layout--offscreen-width: 75% !default;
@@ -197,7 +207,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;
@@ -205,8 +217,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-borderTop: $Modal-content-borderWidth solid
-$Modal-body-borderBottom: $Modal-content-borderWidth solid lighten($Modal-content-borderColor, 5%) !default;
+    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;
@@ -262,9 +276,9 @@ $Tooltip-arrow-width: px2rem(16px) !default;
 $Tooltip-arrow-height: px2rem(8px) !default;
 $Tooltip-arrow-color: $Tooltip-bg !default;
 $Tooltip-arrow-width: 1rem !default;
-$Tooltip-arrow-height: .5rem !default;
+$Tooltip-arrow-height: 0.5rem !default;
 $Tooltip-arrow-color: $Tooltip-bg !default;
-$Tooltip-arrow-outerColor: fade-in($Tooltip-borderColor, .05) !default;
+$Tooltip-arrow-outerColor: fade-in($Tooltip-borderColor, 0.05) !default;
 
 $Tooltip--attr-color: $background !default;
 $Tooltip--attr-bg: rgba(0, 0, 0, 0.7) !default;
@@ -277,7 +291,7 @@ $Tooltip--attr-lineHeigt: $lineHeightBase !default;
 $Tooltip--attr-paddingX: px2rem(10px) !default;
 $Tooltip--attr-paddingY: px2rem(2px) !default;
 $Tooltip--attr-gap: $gap-sm;
-$Tooltip--attr-transition: all .15s ease-in-out !default;
+$Tooltip--attr-transition: all 0.15s ease-in-out !default;
 
 // toast
 $Toast-width: px2rem(300px) !default;
@@ -317,7 +331,6 @@ $Toast--warning-icon: "\f071" !default;
 $Toast--info-icon: "\f05a" !default;
 $Toast--success-icon: "\f00c" !default;
 
-
 // alert
 $Alert-fontSize: $fontSizeBase !default;
 $Alert-boxShadow: none !default;
@@ -330,7 +343,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;
@@ -338,11 +354,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;
@@ -351,7 +373,7 @@ $Spinner-height: px2rem(26px) !default;
 $Spinner--lg-width: px2rem(50px) !default;
 $Spinner--lg-height: px2rem(50px) !default;
 
-$Spinner-bg: url('./spinner-default.svg') !default;
+$Spinner-bg: url("./spinner-default.svg") !default;
 
 // Tabs
 $Tabs-linkFontSize: $fontSizeBase !default;
@@ -376,7 +398,7 @@ $Nav-item-onHover-color: $text--loud-color!default;
 $Nav-item-onActive-color: $white !default;
 $Nav-item-onDisabled-color: $text--muted-color !default;
 $Nav-item-bg: transparent !default;
-$Nav-item-onHover-bg: rgba(0,0,0,.05) !default;
+$Nav-item-onHover-bg: rgba(0, 0, 0, 0.05) !default;
 $Nav-item-onActive-bg: $info !default;
 $Nav-item-onActive-borderLeft: 4px solid transparent !default;
 $Nav-subItem-onActiveBeforeBg: #e5eaeb !default;
@@ -396,8 +418,8 @@ $Table-borderColor: $borderColor !default;
 $Table-borderWidth: $borderWidth !default;
 $Table-borderRadius: $borderRadius !default;
 $Table-fixedTop-boxShadow: $boxShadow !default;
-$Table-fixedLeft-boxShadow: 0.42rem 0 0.42rem -0.28rem rgba($black, .15) !default;
+$Table-fixedLeft-boxShadow: 0.42rem 0 0.42rem -0.28rem rgba($black, 0.15) !default;
-$Table-fixedRight-boxShadow: -0.42rem 0 0.42rem -0.28rem rgba($black, .15) !default;
+$Table-fixedRight-boxShadow: -0.42rem 0 0.42rem -0.28rem rgba($black, 0.15) !default;
 $Table-toolbar-paddingX: $gap-sm !default;
 $Table-toolbar-paddingY: $gap-sm !default;
 $Table-thead-bg: $white !default;
@@ -409,7 +431,8 @@ $Table-thead-iconColor: $text--muted-color !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;
@@ -424,17 +447,22 @@ $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;
 $TableCell-searchBtn-width: px2rem(16px) !default;
 
@@ -505,8 +533,6 @@ $ListItem-onModified-color: #4285f4 !default;
 $ListItem-onModified-borderColor: darken($ListItem-onModified-bg, 10%) !default;
 $ListItem-onDragging-opacity: 0.1 !default;
 
-
-
 // QuickEdit
 $QuickEdit-iconColor: $text--muted-color !default;
 $QuickEdit-onHover-iconColor: $text-color !default;
@@ -534,7 +560,6 @@ $Remark-borderColor: $borderColor !default;
 $Remark-onHover-borderColor: $borderColor !default;
 $Remark-marginLeft: $gap-sm !default;
 
-
 // Form
 $Form-fontSize: $fontSizeBase !default;
 $Form-description-color: lighten($text-color, 10%) !default;
@@ -582,10 +607,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;
@@ -608,7 +638,6 @@ $Number-handler-onHover-bg: darken($Number-handler-bg, 5%) !default;
 $Number-handler-onActive-bg: $Number-handler-onHover-bg !default;
 $Number-handler-onDisabled-bg: $Form-input-onDisabled-bg !default;
 
-
 $Form-select-bg: $white !default;
 $Form-select-onHover-bg: darken($white, 5%) !default;
 $Form-select-color: $text-color !default;
@@ -622,8 +651,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: #007eff !default;
-$Form-selectValue-bg: saturate(lighten($Form-selectValue-color, 40%), 2.5%) !default;
+$Form-selectValue-bg: saturate(
-$Form-selectValue-borderColor: saturate(lighten($Form-selectValue-color, 30%), 2.5%) !default;
+    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;
@@ -635,7 +670,7 @@ $Form-select-menu-height: $Form-input-height !default;
 $Form-select-menu-bg: $white !default;
 $Form-select-menu-color: $Form-select-color !default;
 $Form-select-menu-onHover-color: $info !default;
-$Form-select-menu-onHover-bg: rgba(0,126,255,.08) !default;
+$Form-select-menu-onHover-bg: rgba(0, 126, 255, 0.08) !default;
 $Form-select-menu-onActive-color: $info !default;
 $Form-select-menu-onActive-bg: transparent !default;
 $Form-select-menu-onDisabled-color: $text--muted-color !default;
@@ -647,7 +682,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;
@@ -673,7 +711,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;
 
@@ -681,33 +722,43 @@ $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),
-$Button-boxShadow: inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default;
+    0 1px 1px rgba($black, 0.075) !default;
 $Button-onFocus-boxShadow: none !default;
-$Button-onActive-boxShadow: inset 0 3px 5px rgba($black, .125) !default;
+$Button-onActive-boxShadow: inset 0 3px 5px rgba($black, 0.125) !default;
-$Button-onDisabled-opacity: .65 !default;
+$Button-onDisabled-opacity: 0.65 !default;
 
 $Button--link-onDisabled-color: $gray600 !default;
 
@@ -715,7 +766,8 @@ $Button-borderRadius: $borderRadius !default;
 $Button--lg-borderRadius: $borderRadius !default;
 $Button--sm-borderRadius: $borderRadius !default;
 
-$Button-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .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;
@@ -724,17 +776,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;
@@ -744,7 +805,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;
@@ -764,7 +828,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;
@@ -797,7 +864,6 @@ $Button--dark-onActive-bg: darken($Button--dark-bg, 10%) !default;
 $Button--dark-onActive-border: darken($Button--dark-border, 12.5%) !default;
 $Button--dark-onActive-color: $Button--dark-color !default;
 
-
 $Button--default-bg: $white !default;
 $Button--default-border: $borderColor !default;
 $Button--default-color: $text-color !default;
@@ -805,7 +871,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;
@@ -821,12 +890,13 @@ $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;
 
-
 // Checks
 $Checkbox-gap: $gap-sm !default;
 $Checkbox-size: px2rem(20px) !default;
@@ -867,11 +937,12 @@ $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
 $DatePicker-color: $Form-input-color !default;
 $DatePicker-bg: $white !default;
@@ -883,7 +954,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: $gray600 !default;
 $DatePicker-onHover-iconColor: darken($DatePicker-iconColor, 10%) !default;
@@ -898,7 +971,6 @@ $DatePicker-nextBtn-vendor: "FontAwesome" !default;
 $DatePicker-nextBtn-fontSize: $fontSizeMd !default;
 $DatePicker-nextBtn-icon: "\f105" !default;
 
-
 $Calendar-fontSize: $fontSizeBase !default;
 
 $Calendar-input-color: $info !default;
@@ -909,14 +981,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;
@@ -934,13 +1010,18 @@ $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;
 $Calendar-wLabel-color: #999 !default;
 $Calendar-cell-bg: $white !default;
@@ -961,12 +1042,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-onDisabled-opacity: 0.6 !default;
@@ -997,7 +1084,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;
@@ -1012,9 +1102,12 @@ $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 .25s ease-in-out !default;
+$Combo--vertical-itemToolbar-transion: all 0.25s ease-in-out !default;
 $Combo--vertical-itemToolbar-positionTop: -$Combo--vertical-itemToolbar-height !default;
 $Combo--vertical-itemToolbar-positionRight: px2rem(5px) !default;
 
@@ -1028,7 +1121,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;
@@ -1036,8 +1132,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;
@@ -1050,14 +1148,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-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;
@@ -1080,10 +1181,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;
@@ -1092,7 +1199,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;
@@ -1126,7 +1236,7 @@ $Panel-borderRadius: $borderRadius !default;
 $Panel-marginBottom: px2rem(20px) !default;
 $Panel-bg: $white !default;
 $Panel-border: $borderWidth solid transparent !default;
-$Panel-boxShadow: 0 px2rem(1px) px2rem(1px) rgba(0, 0, 0, .05) !default;
+$Panel-boxShadow: 0 px2rem(1px) px2rem(1px) rgba(0, 0, 0, 0.05) !default;
 $Panel--default-bg: #f6f8f8 !default;
 $Panel--default-color: $text-color !default;
 $Panel--default-badgeColor: #f5f5f5 !default;
@@ -1147,7 +1257,7 @@ $Panel-footerPadding: px2rem(10px) px2rem(15px) !default;
 $Panel-borderWidth: px2rem(1px) !default;
 $Panel-footerButtomMarginLeft: $gap-sm !default;
 $Panel-btnToolbarTextAlign: right !default;
-$Panel-fixedBottom-boxShadow: 0 -0.5rem 1rem rgba($black, .15) !default;
+$Panel-fixedBottom-boxShadow: 0 -0.5rem 1rem rgba($black, 0.15) !default;
 
 // Pagination
 $Pagination-height: px2rem(30px) !default;
@@ -1178,7 +1288,7 @@ $Tree-folderIconContent: "\f07b" !default;
 $Tree-itemText--onChecked-color: $Form-selectValue-color !default;
 
 // IconPicker
-$IconPicker-tabs-bg: #F0F3F4 !default;
+$IconPicker-tabs-bg: #f0f3f4 !default;
 $IconPicker-tab-padding: 0 px2rem(5px) !default;
 $IconPicker-tab-height: px2rem(30px) !default;
 $IconPicker-tab-lineHeight: px2rem(30px) !default;

scss/base/_normalize.scss

@@ -9,8 +9,8 @@
  */
 
 html {
-    line-height: 1.15; /* 1 */
+    line-height: 1.15; // 1
-    -webkit-text-size-adjust: 100%; /* 2 */
+    -webkit-text-size-adjust: 100%; //2
 }
 
 /* Sections
@@ -43,9 +43,9 @@
    */
 
 hr {
-    box-sizing: content-box; /* 1 */
+    box-sizing: content-box; // 1
-    height: 0; /* 1 */
+    height: 0; // 2
-    overflow: visible; /* 2 */
+    overflow: visible; //2
 }
 
 /**
@@ -54,8 +54,8 @@
    */
 
 pre {
-    font-family: monospace, monospace; /* 1 */
+    font-family: monospace, monospace; // 1
-    font-size: 1em; /* 2 */
+    font-size: 1em; // 2
 }
 
 /* Text-level semantics
@@ -75,9 +75,9 @@
    */
 
 abbr[title] {
-    border-bottom: none; /* 1 */
+    border-bottom: none; // 1
-    text-decoration: underline; /* 2 */
+    text-decoration: underline; // 2
-    text-decoration: underline dotted; /* 2 */
+    text-decoration: underline dotted; // 2
 }
 
 /**
@@ -97,8 +97,8 @@
 code,
 kbd,
 samp {
-    font-family: monospace, monospace; /* 1 */
+    font-family: monospace, monospace; // 1
-    font-size: 1em; /* 2 */
+    font-size: 1em; // 2
 }
 
 /**
@@ -154,10 +154,10 @@
 optgroup,
 select,
 textarea {
-    font-family: inherit; /* 1 */
+    font-family: inherit; // 1
-    font-size: 100%; /* 1 */
+    font-size: 100%; // 1
-    line-height: 1.15; /* 1 */
+    line-height: 1.15; // 1
-    margin: 0; /* 2 */
+    margin: 0; // 2
 }
 
 /**
@@ -166,8 +166,8 @@
    */
 
 button,
-  input { /* 1 */
+input {
-    overflow: visible;
+    overflow: visible; // 1
 }
 
 /**
@@ -176,8 +176,8 @@
    */
 
 button,
-  select { /* 1 */
+select {
-    text-transform: none;
+    text-transform: none; // 1
 }
 
 /**
@@ -230,12 +230,12 @@
    */
 
 legend {
-    box-sizing: border-box; /* 1 */
+    box-sizing: border-box; // 1
-    color: inherit; /* 2 */
+    color: inherit; // 2
-    display: table; /* 1 */
+    display: table; // 1
-    max-width: 100%; /* 1 */
+    max-width: 100%; // 1
-    padding: 0; /* 3 */
+    padding: 0; // 3
-    white-space: normal; /* 1 */
+    white-space: normal; // 1
 }
 
 /**
@@ -261,8 +261,8 @@
 
 [type="checkbox"],
 [type="radio"] {
-    box-sizing: border-box; /* 1 */
+    box-sizing: border-box; // 1
-    padding: 0; /* 2 */
+    padding: 0; // 2
 }
 
 /**
@@ -280,8 +280,8 @@
    */
 
 [type="search"] {
-    -webkit-appearance: textfield; /* 1 */
+    -webkit-appearance: textfield; // 1
-    outline-offset: -2px; /* 2 */
+    outline-offset: -2px; // 2
 }
 
 /**
@@ -298,8 +298,8 @@
    */
 
 ::-webkit-file-upload-button {
-    -webkit-appearance: button; /* 1 */
+    -webkit-appearance: button; // 1
-    font: inherit; /* 2 */
+    font: inherit; // 2
 }
 
 /* Interactive

scss/base/_typography.scss

@@ -30,7 +30,12 @@ label {
     font-weight: $fontWeightNormal;
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
     font-weight: $fontWeightNormal;
     color: $text--loud-color;
     line-height: 1.1;

scss/components/_alert.scss

@@ -19,14 +19,14 @@
         color: #000;
         text-shadow: 0 1px 0 #fff;
         filter: alpha(opacity=20);
-        opacity: .2;
+        opacity: 0.2;
 
         &:hover {
             color: #000;
             text-decoration: none;
             cursor: pointer;
             filter: alpha(opacity=50);
-            opacity: .5;
+            opacity: 0.5;
         }
     }
 

scss/components/_audio.scss

@@ -50,6 +50,7 @@
     border: $Audio-border;
     display: inline-block;
     padding-left: $Audio-item-margin;
+
     &-rates {
         display: inline-block;
         width: $Audio-rate-width;
@@ -59,9 +60,11 @@
         cursor: pointer;
         margin-right: $Audio-item-margin;
     }
+
     &-rateControl {
         display: inline-block;
         margin-right: $Audio-item-margin;
+
         &::after {
             display: inline-block;
             clear: both;
@@ -80,6 +83,7 @@
             border-right: $Audio-rateControlItem-borderRight;
         }
     }
+
     &-play {
         display: inline-block;
         width: $Audio-play-width;
@@ -90,22 +94,25 @@
             @include svg();
         }
     }
+
     &-times {
         display: inline-block;
         width: $Audio-times-width;
         margin-right: $Audio-item-margin;
         cursor: default;
     }
+
     &-process {
         display: inline-block;
         width: $Audio-process-width;
         cursor: pointer;
         margin-right: $Audio-item-margin;
 
-        input[type=range] {
+        input[type="range"] {
             @include input-range();
         }
     }
+
     &-volume {
         display: inline-block;
         width: $Audio-volume-width;
@@ -117,13 +124,15 @@
             @include svg();
         }
     }
+
     &-volumeControl {
         display: inline-block;
         width: $Audio-volumeControl-width;
         height: $Audio-volumeControl-height;
         line-height: $Audio-volumeControl-lineHeight;
         margin-right: $Audio-item-margin;
-        input[type=range] {
+
+        input[type="range"] {
             @include input-range();
         }
 

scss/components/_button-group.scss

@@ -27,15 +27,20 @@
         .#{$ns}ButtonGroup + .#{$ns}ButtonGroup {
             margin-left: -$Button-borderWidth;
         }
-    } @else if (variable-exists("ButtonGroup-divider-width") and variable-exists("ButtonGroup-divider-color")) {
+    } @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;
@@ -67,7 +72,6 @@
     }
 }
 
-
 .#{$ns}ButtonGroup--vertical {
     flex-direction: column;
     align-items: flex-start;
@@ -99,7 +103,6 @@
     }
 }
 
-
 .#{$ns}ButtonGroupControl {
     display: inline-block;
 

scss/components/_button.scss

@@ -1,4 +1,3 @@
-
 .#{$ns}Button {
     display: inline-block;
     font-weight: $Button-fontWeight;
@@ -14,7 +13,14 @@
         min-width: $Button-mimWidth;
     }
 
-    @include button-size($Button-paddingY, $Button-paddingX, $Button-fontSize, $Button-lineHeight, $Button-borderRadius, $Button-height);
+    @include button-size(
+        $Button-paddingY,
+        $Button-paddingX,
+        $Button-fontSize,
+        $Button-lineHeight,
+        $Button-borderRadius,
+        $Button-height
+    );
 
     @include hover-focus {
         color: $text-color;
@@ -280,7 +286,6 @@ fieldset:disabled a.#{$ns}Button {
     }
 }
 
-
 .#{$ns}Button--link {
     width: auto;
     min-width: auto;

scss/components/_cards.scss

@@ -3,7 +3,6 @@
         @include clearfix();
         padding: $Cards-toolbar-paddingY $Cards-toolbar-paddingX;
         margin-bottom: $gap-base;
-        
     }
 
     &-actions {
@@ -81,6 +80,7 @@
 
     &--masonry {
         display: block;
+
         &:after {
             content: none;
         }
@@ -103,18 +103,23 @@
     .#{$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;
     }
@@ -129,18 +134,23 @@
     .#{$ns}Cards--masonryMd1 {
         column-count: 12;
     }
+
     .#{$ns}Cards--masonryMd2 {
         column-count: 6;
     }
+
     .#{$ns}Cards--masonryMd3 {
         column-count: 4;
     }
+
     .#{$ns}Cards--masonryMd4 {
         column-count: 3;
     }
+
     .#{$ns}Cards--masonryMd6 {
         column-count: 2;
     }
+
     .#{$ns}Cards--masonryMd12 {
         column-count: 1;
     }
@@ -150,18 +160,23 @@
     .#{$ns}Cards--masonryLg1 {
         column-count: 12;
     }
+
     .#{$ns}Cards--masonryLg2 {
         column-count: 6;
     }
+
     .#{$ns}Cards--masonryLg3 {
         column-count: 4;
     }
+
     .#{$ns}Cards--masonryLg4 {
         column-count: 3;
     }
+
     .#{$ns}Cards--masonryLg6 {
         column-count: 2;
     }
+
     .#{$ns}Cards--masonryLg12 {
         column-count: 1;
     }

scss/components/_chart.scss

@@ -1,6 +1,7 @@
 .#{$ns}Chart {
     min-height: 300px;
     position: relative;
+
     &-placeholder {
         position: absolute;
         top: 50%;

scss/components/_collapse.scss

@@ -18,7 +18,7 @@
         cursor: pointer;
 
         &:before {
-            content: '';
+            content: "";
             position: relative;
             display: inline-block;
             width: px2rem(6px);

scss/components/_copyable.scss

@@ -5,6 +5,6 @@
     cursor: pointer;
 
     &:hover {
-        color: $Copyable-onHover-iconColor
+        color: $Copyable-onHover-iconColor;
     }
 }

scss/components/_drawer.scss

@@ -44,7 +44,8 @@
         padding: $Drawer-header-padding;
         background-color: $Drawer-header-bg;
         @include clearfix();
-        border-bottom: $Drawer-content-borderWidth solid lighten($Drawer-content-borderColor, 5%);
+        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;
     }
@@ -92,7 +93,8 @@
         align-items: flex-end;
         justify-content: flex-end;
         padding: $Drawer-footer-padding;
-        border-top: $Drawer-content-borderWidth solid lighten($Drawer-content-borderColor, 5%);
+        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;
 

scss/components/_dropdown.scss

@@ -1,4 +1,3 @@
-
 .#{$ns}DropDown {
     position: relative;
     display: inline-block;
@@ -69,7 +68,6 @@
         text-decoration: none;
     }
 
-
     &-popover {
         border: none;
         box-shadow: none;

scss/components/_modal.scss

@@ -84,6 +84,7 @@
         line-height: inherit;
         text-decoration: none;
         vertical-align: middle;
+
         svg {
             width: $Modal-close-width;
             height: $Modal-close-width;
@@ -96,6 +97,7 @@
             &:hover {
                 text-decoration: none;
                 color: $Model-close-onHover-color;
+
                 svg {
                     fill: $Model-close-onHover-color;
                 }
@@ -111,7 +113,8 @@
     }
 
     &-body {
-        padding: $Modal-body--noHeader-paddingTop $Modal-body-paddingX $Modal-body-paddingY;
+        padding: $Modal-body--noHeader-paddingTop $Modal-body-paddingX
+            $Modal-body-paddingY;
         flex-basis: 0;
         flex-grow: 1;
     }
@@ -143,7 +146,9 @@
 @for $i from (2) through 10 {
     .#{$ns}Modal--#{$i}th {
         .#{$ns}Modal-content {
-            margin-top: $Modal-content-startMarginTop + ($i - 1) * $Modal-content-stepMarginTop;
+            margin-top: $Modal-content-startMarginTop +
+                ($i - 1) *
+                $Modal-content-stepMarginTop;
         }
     }
 }

scss/components/_nav.scss

@@ -2,11 +2,14 @@
     list-style: none;
     margin: 0;
     padding: 0;
+
     &--tabs {
         border-bottom: $Tabs-borderWidth solid $Tabs-borderColor;
+
         .#{$ns}Nav-item {
             margin-bottom: -$Tabs-borderWidth;
             display: inline-block;
+
             > a {
                 font-size: $Nav-item-fontSize;
                 display: block;
@@ -20,11 +23,13 @@
                 padding: $gap-sm $gap-base;
                 cursor: pointer;
             }
+
             &:hover > a,
             > a:focus {
                 border-color: $Tabs-onHover-borderColor;
                 text-decoration: none;
             }
+
             &.disabled > a,
             &.is-disabled > a {
                 color: $Tabs-onDisabled-color;
@@ -32,6 +37,7 @@
                 border-color: transparent;
                 pointer-events: none;
             }
+
             &.active > a,
             &.is-active > a {
                 color: $Tabs-onActive-color;
@@ -41,13 +47,16 @@
                 border-bottom-width: $Tabs-onActive-borderBottomWidth;
             }
         }
+
         .#{$ns}Nav-itemIcon {
             margin-right: $gap-xs;
         }
     }
+
     &--stacked {
         .#{$ns}Nav-item {
             position: relative;
+
             > a {
                 display: block;
                 outline: none;
@@ -58,18 +67,21 @@
                 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;
@@ -77,14 +89,17 @@
                 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);
@@ -96,17 +111,20 @@
                 right: px2rem(2px);
                 cursor: pointer;
                 transform: scale(0.8);
-                transition: transform .3s;
+                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: '';
+                    content: "";
                     display: inline-block;
                     width: px2rem(4px);
                     height: px2rem(4px);
@@ -115,6 +133,7 @@
                     margin-right: px2rem(8px);
                     vertical-align: middle;
                 }
+
                 &.active > a:before,
                 &.is-active > a:before {
                     background-color: $Nav-subItem-onActiveBeforeBg;

scss/components/_page.scss

@@ -1,12 +1,11 @@
 .#{$ns}Page {
-
     &-header {
         padding: $Page-header-paddingY $Page-header-paddingX;
     }
 
     &-main {
         background: $Page-main-bg;
-    };
+    }
 
     &-content {
         padding: $Page-content-paddingY $Page-content-paddingX;
@@ -51,7 +50,6 @@
     &-asideTplWrapper {
         padding: $gap-xs;
     }
-    
 }
 
 .#{$ns}Page-aside {

scss/components/_pagination.scss

@@ -3,8 +3,10 @@
     padding-left: 0;
     margin-bottom: px2rem(-10px);
     border-radius: px2rem(4px);
+
     > li {
         display: inline;
+
         > a,
         > span {
             user-select: none;
@@ -22,6 +24,7 @@
             margin-left: 0;
             font-size: $Pagination-fontSize;
         }
+
         > a:hover,
         > span:hover,
         > a:focus,
@@ -30,11 +33,13 @@
             color: $primary;
         }
     }
+
     > li.disabled {
         > span,
         > a {
             cursor: not-allowed;
         }
+
         > a,
         > span,
         > a:hover,
@@ -44,6 +49,7 @@
             color: #cccccc;
         }
     }
+
     > li.active {
         > a,
         > span,
@@ -55,35 +61,43 @@
             color: $white;
         }
     }
+
     &-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;
@@ -91,11 +105,13 @@
             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);

scss/components/_panel.scss

@@ -22,108 +22,135 @@
     /* 主题 */
     &--default {
         border-color: $borderColor;
+
         > .#{$ns}Panel-heading {
             background-color: $Panel--default-bg;
             color: $Panel--default-color;
+
             .badge {
                 color: $Panel--default-badgeColor;
                 background-color: $Panel--default-badgeBg;
             }
         }
+
         > .#{$ns}Panel-heading {
             border-color: $Panel--default-headingBorderColor;
         }
     }
+
     &--primary {
         border-color: $primary;
+
         > .#{$ns}Panel-heading {
             background-color: $primary;
             color: $white;
+
             .badge {
                 color: $primary;
-                background-color: $white
+                background-color: $white;
             }
         }
+
         > .#{$ns}Panel-heading,
         > .#{$ns}Panel-footer {
             border-color: $primary;
         }
     }
+
     &--success {
         border-color: $success;
+
         > .#{$ns}Panel-heading {
             background-color: $success;
             color: $white;
+
             .badge {
                 color: $success;
-                background-color: $white
+                background-color: $white;
             }
         }
+
         > .#{$ns}Panel-heading,
         > .#{$ns}Panel-footer {
             border-color: $success;
         }
     }
+
     &--info {
         border-color: $info;
+
         > .#{$ns}Panel-heading {
             background-color: $info;
             color: $white;
+
             .badge {
                 color: $info;
-                background-color: $white
+                background-color: $white;
             }
         }
+
         > .#{$ns}Panel-heading,
         > .#{$ns}Panel-footer {
             border-color: $info;
         }
     }
+
     &--warning {
         border-color: $warning;
+
         > .#{$ns}Panel-heading {
             background-color: $warning;
             color: $white;
+
             .badge {
                 color: $warning;
-                background-color: $white
+                background-color: $white;
             }
         }
+
         > .#{$ns}Panel-heading,
         > .#{$ns}Panel-footer {
             border-color: $warning;
         }
     }
+
     &--danger {
         border-color: $danger;
+
         > .#{$ns}Panel-heading {
             background-color: $danger;
             color: $white;
+
             .badge {
                 color: $danger;
-                background-color: $white
+                background-color: $white;
             }
         }
+
         > .#{$ns}Panel-heading,
         > .#{$ns}Panel-footer {
             border-color: $danger;
         }
     }
+
     /* 子组件 */
     &-heading {
         padding: $Panel-headingPadding;
         border-bottom: $Panel-headingBorderBottom;
         border-radius: $Panel-headingBorderRadius;
     }
+
     &-title {
         margin-top: $Panel-titleMarginTop;
         margin-bottom: $Panel-titleMarginBottom;
         font-size: $Panel-titleFontSize;
         color: $Panel-titleColor;
     }
+
     &-body {
         padding: $Panel-bodyPadding;
     }
+
     &-footer {
         border-color: $Panel-footerBorderColor;
         border-radius: $Panel-footerBorderRadius;
@@ -131,12 +158,15 @@
         padding: $Panel-footerPadding;
         border-style: solid;
         border-width: $Panel-borderWidth 0 0 0;
+
         .#{$ns}Button + .#{$ns}Button {
             margin-left: $Panel-footerButtomMarginLeft;
         }
     }
+
     &-btnToolbar {
         text-align: $Panel-btnToolbarTextAlign;
+
         .#{$ns}Button {
             margin-left: $Panel-footerButtomMarginLeft;
         }

scss/components/_popover.scss

@@ -1,4 +1,3 @@
-
 .#{$ns}PopOver {
     position: absolute;
     background: $white;

scss/components/_popoverable.scss

@@ -6,7 +6,7 @@
     cursor: pointer;
 
     &:hover {
-        color: $PopOverAble-onHover-iconColor
+        color: $PopOverAble-onHover-iconColor;
     }
 }
 
@@ -19,8 +19,6 @@
     }
 }
 
-
-
 .#{$ns}PopOverAble-popover {
     min-width: px2rem(320px);
     max-width: px2rem(640px);

scss/components/_quick-edit.scss

@@ -6,7 +6,7 @@
     cursor: pointer;
 
     &:hover {
-        color: $QuickEdit-onHover-iconColor
+        color: $QuickEdit-onHover-iconColor;
     }
 }
 
@@ -16,8 +16,9 @@
 
     &:focus {
         position: relative;
+
         &:after {
-            content: '';
+            content: "";
             left: 0;
             top: 0;
             right: 0;
@@ -25,7 +26,8 @@
             position: absolute;
             pointer-events: none;
             z-index: 1;
-            border: $QuickEdit-onFocus-borderWidth dashed $QuickEdit-onFocus-borderColor;
+            border: $QuickEdit-onFocus-borderWidth dashed
+                $QuickEdit-onFocus-borderColor;
         }
     }
 
@@ -34,8 +36,6 @@
     }
 }
 
-
-
 .#{$ns}QuickEdit-popover {
     min-width: px2rem(320px);
     max-width: px2rem(640px);

scss/components/_spinner.scss

@@ -2,6 +2,7 @@
     0% {
         transform: rotate(0deg);
     }
+
     100% {
         transform: rotate(359deg);
     }
@@ -44,7 +45,6 @@
     }
 }
 
-
 @include media-breakpoint-up(md) {
     .#{$ns}Layout .#{$ns}Page-body > .#{$ns}Spinner-overlay {
         left: $Layout-aside-width;

scss/components/_status.scss

@@ -8,43 +8,50 @@
 
     @keyframes animation-rolling_red {
         0% {
-            left: 0
+            left: 0;
         }
 
         50% {
-            left: px2rem(13px)
+            left: px2rem(13px);
         }
 
         100% {
-            left: 0
+            left: 0;
         }
     }
 
     @keyframes animation-rolling_blue {
         0% {
-            left: $gap-sm + $gap-base
+            left: $gap-sm + $gap-base;
         }
 
         50% {
-            left: px2rem(12px)
+            left: px2rem(12px);
         }
 
         100% {
-            left: $gap-sm + $gap-base
+            left: $gap-sm + $gap-base;
         }
     }
+
     .#{$ns}Status-icon {
-        &--danger, &--primary, &--rolling, &--success, &--warning{
+        &--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;
@@ -55,6 +62,7 @@
                 animation: animation-rolling_red 2s;
                 animation-iteration-count: infinite;
             }
+
             &::after {
                 font-family: "iconfont";
                 content: "\e632";
@@ -69,27 +77,32 @@
                 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;
@@ -111,5 +124,4 @@
     .#{$ns}Status-icon--primary + &-label {
         color: $primary;
     }
-
 }

scss/components/_table.scss

@@ -60,7 +60,8 @@
     &-heading {
         background: $Table-heading-bg;
         border-bottom: $Table-borderWidth solid $Table-borderColor;
-        padding: ($Table-heading-height - $Table-fontSize * $lineHeightBase) / 2  $Table-toolbar-paddingX;
+        padding: ($Table-heading-height - $Table-fontSize * $lineHeightBase) / 2
+            $Table-toolbar-paddingX;
     }
 
     &--unsaved &-heading {
@@ -130,10 +131,8 @@
         }
     }
 
-    
-
     &-content {
-        min-height: .01%;
+        min-height: 0.01%;
         overflow-x: auto;
     }
 
@@ -147,6 +146,7 @@
 
         > thead > tr {
             background-color: $Table-thead-bg;
+
             > th {
                 padding: $TableCell-paddingY $TableCell-paddingX;
 
@@ -159,8 +159,10 @@
                 }
 
                 &:not(:last-child) {
-                    border-right: $Table-thead-borderWidth solid $Table-thead-borderColor;
+                    border-right: $Table-thead-borderWidth solid
+                        $Table-thead-borderColor;
                 }
+
                 font-size: $Table-thead-fontSize;
                 color: $Table-thead-color;
                 font-weight: $fontWeightNormal;
@@ -190,6 +192,7 @@
 
             @if $Table-strip-bg !=transparent {
                 background-color: transparent;
+
                 &.#{$ns}Table-tr--odd {
                     background-color: $Table-strip-bg;
                 }
@@ -260,8 +263,10 @@
                     position: relative;
                     right: -20px * ($i - 1);
                 }
+
                 .#{$ns}Table-expandCell + td {
-                    > div, > span {
+                    > div,
+                    > span {
                         margin-left: 20px * ($i - 1);
                     }
                 }
@@ -272,6 +277,7 @@
         > tbody > tr > td.#{$ns}Table-checkCell {
             border-right: 0;
             width: px2rem(1px);
+
             .#{$ns}Checkbox {
                 margin: 0;
             }
@@ -466,7 +472,12 @@
         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%);
+        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;
@@ -520,7 +531,8 @@
         }
 
         > tbody > tr:not(:first-child) {
-            border-top: $Table-borderWidth solid lighten($Table-thead-borderColor, 2.5%);
+            border-top: $Table-borderWidth solid
+                lighten($Table-thead-borderColor, 2.5%);
         }
     }
 }

scss/components/_tabs.scss

@@ -1,9 +1,11 @@
 .#{$ns}Tabs {
     &-links {
         border-bottom: $Tabs-borderWidth solid $Tabs-borderColor;
+
         > .#{$ns}Tabs-link {
             margin-bottom: -$Tabs-borderWidth;
             display: inline-block;
+
             > a {
                 font-size: $Tabs-linkFontSize;
                 outline: none;
@@ -16,11 +18,13 @@
                 text-decoration: none;
                 cursor: pointer;
             }
+
             &:hover > a,
             > a:focus {
                 border-color: $Tabs-onHover-borderColor;
                 text-decoration: none;
             }
+
             &.disabled > a,
             &.is-disabled > a {
                 color: $Tabs-onDisabled-color;
@@ -28,6 +32,7 @@
                 border-color: transparent;
                 pointer-events: none;
             }
+
             &.active > a,
             &.is-active > a {
                 color: $Tabs-onActive-color;
@@ -37,6 +42,7 @@
             }
         }
     }
+
     &-content {
         background-color: $Tabs-content-bg;
         padding: $gap-base;
@@ -44,9 +50,11 @@
         border-width: 0 $Tabs-borderWidth $Tabs-borderWidth;
         border-color: $Tabs-borderColor;
     }
+
     &--line {
         > .#{$ns}Tabs-links {
             border-bottom-color: #e2e5ec;
+
             > li {
                 &.active {
                     > a,
@@ -55,9 +63,11 @@
                         border-bottom: px2rem(2px) solid $primary;
                         color: $primary;
                         background-color: transparent;
-                        border-color: transparent transparent $primary transparent;
+                        border-color: transparent transparent $primary
+                            transparent;
                     }
                 }
+
                 > a,
                 > a:hover,
                 > a:focus {
@@ -68,10 +78,12 @@
             }
         }
     }
+
     &--card {
         > .#{$ns}Tabs-links {
             background-color: #eceff8;
             border-top: px2rem(1px) solid #e2e5ec;
+
             > li {
                 &.active {
                     > a,
@@ -82,6 +94,7 @@
                         margin-left: px2rem(1px);
                     }
                 }
+
                 > a,
                 > a:hover,
                 > a:focus {
@@ -91,10 +104,12 @@
             }
         }
     }
+
     &--radio {
         > .#{$ns}Tabs-links {
             border: 0;
             margin-bottom: px2rem(10px);
+
             > li {
                 > a {
                     font-size: $fontSizeSm;
@@ -104,6 +119,7 @@
                     height: px2rem(30px);
                     line-height: px2rem(30px);
                 }
+
                 &.active {
                     > a,
                     > a:hover,
@@ -113,6 +129,7 @@
                         margin-left: px2rem(1px);
                     }
                 }
+
                 > a,
                 > a:hover,
                 > a:focus {
@@ -121,6 +138,7 @@
                 }
             }
         }
+
         .tab-content {
             border-top: $Tabs-borderWidth solid $Tabs-borderColor;
         }

scss/components/_toast.scss

@@ -7,23 +7,29 @@
     to {
         animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
     }
+
     0% {
         opacity: 0;
         transform: scale3d(0.3, 0.3, 0.3);
     }
+
     20% {
         transform: scale3d(1.1, 1.1, 1.1);
     }
+
     40% {
         transform: scale3d(0.9, 0.9, 0.9);
     }
+
     60% {
         opacity: 1;
         transform: scale3d(1.03, 1.03, 1.03);
     }
+
     80% {
         transform: scale3d(0.97, 0.97, 0.97);
     }
+
     to {
         opacity: 1;
         transform: scale3d(1, 1, 1);
@@ -34,11 +40,13 @@
     20% {
         transform: scale3d(0.9, 0.9, 0.9);
     }
+
     50%,
     55% {
         opacity: 1;
         transform: scale3d(1.1, 1.1, 1.1);
     }
+
     to {
         opacity: 0;
         transform: scale3d(0.3, 0.3, 0.3);
@@ -55,7 +63,8 @@
     width: $Toast-width;
     pointer-events: auto;
     margin-bottom: $gap-xs;
-    padding: $Toast-paddingY $Toast-paddingX $Toast-paddingY ($Toast-paddingX + $Toast-paddingL);
+    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;
@@ -86,9 +95,11 @@
         display: $Toast-display;
         font-size: $fontSizeMd;
     }
+
     &-body {
         display: $Toast-display;
     }
+
     &::before {
         display: inline-block;
         font-family: $Toast-iconVendor;
@@ -105,6 +116,7 @@
         color: $Toast--danger-color;
         border-color: $Toast--danger-borderColor;
         background-color: $Toast--danger-bgColor;
+
         &::before {
             content: $Toast--error-icon;
         }
@@ -114,6 +126,7 @@
         color: $Toast--warning-color;
         border-color: $Toast--warning-borderColor;
         background-color: $Toast--warning-bgColor;
+
         &::before {
             content: $Toast--warning-icon;
         }
@@ -123,7 +136,9 @@
         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);
+        padding: $Toast-paddingY $Toast-paddingX $Toast-paddingY
+            ($Toast-paddingX + $Toast--info-paddingL);
+
         &::before {
             content: $Toast--info-icon;
         }
@@ -133,6 +148,7 @@
         color: $Toast--success-color;
         border-color: $Toast--success-borderColor;
         background-color: $Toast--success-bgColor;
+
         &::before {
             content: $Toast--success-icon;
         }

scss/components/_tooltip.scss

@@ -68,7 +68,8 @@
 
         .#{$ns}Tooltip-arrow::before,
         .#{$ns}Tooltip-arrow::after {
-            border-width: ($Tooltip-arrow-width / 2) $Tooltip-arrow-height ($Tooltip-arrow-width / 2) 0;
+            border-width: ($Tooltip-arrow-width / 2) $Tooltip-arrow-height
+                ($Tooltip-arrow-width / 2) 0;
         }
 
         .#{$ns}Tooltip-arrow::before {
@@ -91,7 +92,8 @@
 
         .#{$ns}Tooltip-arrow::before,
         .#{$ns}Tooltip-arrow::after {
-            border-width: 0 ($Tooltip-arrow-width / 2) $Tooltip-arrow-height ($Tooltip-arrow-width / 2);
+            border-width: 0 ($Tooltip-arrow-width / 2) $Tooltip-arrow-height
+                ($Tooltip-arrow-width / 2);
         }
 
         .#{$ns}Tooltip-arrow::before {
@@ -131,7 +133,8 @@
 
         .#{$ns}Tooltip-arrow::before,
         .#{$ns}Tooltip-arrow::after {
-            border-width: ($Tooltip-arrow-width / 2) 0 ($Tooltip-arrow-width / 2) $Tooltip-arrow-height;
+            border-width: ($Tooltip-arrow-width / 2) 0
+                ($Tooltip-arrow-width / 2) $Tooltip-arrow-height;
         }
 
         .#{$ns}Tooltip-arrow::before {
@@ -166,9 +169,9 @@
     }
 }
 
-
 [data-tooltip] {
     position: relative;
+
     &:after {
         pointer-events: none;
         left: 0;
@@ -203,12 +206,13 @@
         top: 100%;
         transform: translateX(-50%);
     }
+
     &[data-position="bottom"]:hover:after {
         margin: $Tooltip--attr-gap 0 0 0;
     }
 
     &:hover:active:after {
-        content: '';
+        content: "";
         display: none !important;
     }
 }

scss/components/_video.scss

@@ -1,15 +1,18 @@
 .#{$ns}Video {
     min-width: 200px;
+
     &-cursor {
         position: absolute;
         border: 2px solid $info;
         transition: all 0.5s ease-out;
     }
+
     &-frameList {
         .#{$ns}Video-frameItem {
             cursor: pointer;
         }
     }
+
     .video-react-paused .video-react-big-play-button.big-play-button-hide {
         display: block;
     }

scss/components/_wizard.scss

@@ -2,9 +2,11 @@
     @include clearfix();
 
     position: relative;
+
     &,
     &-tabs {
         padding: 0;
+
         .Badge {
             display: inline-block; // min-width: px2rem(10px);
             // padding: px2rem(3px) px2rem(7px);
@@ -18,44 +20,56 @@
             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, .2);
+            text-shadow: 0 px2rem(1px) 0 rgba(0, 0, 0, 0.2);
             margin-right: $Wizard-badge-marginRight;
+
             &--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;
             }
         }
+
         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;
@@ -65,20 +79,24 @@
                 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: "";
@@ -91,23 +109,29 @@
                     z-index: 1;
                     bottom: 0;
                 }
+
                 &:after {
                     right: px2rem(-9px);
                     border-left-color: $Wizard-steps-bg;
                     z-index: 2;
                 }
+
                 &.is-active {
                     color: #3a87ad;
                     background: #fff;
                 }
+
                 &.is-active:after {
                     border-left-color: #fff;
                 }
-            } // .Badge {
+            }
+
+            // .Badge {
             //     margin-right: px2rem(4px);
             // }
         }
     }
+
     &-steps {
         font-size: $fontSizeBase;
         padding: $Wizard-steps-padding;
@@ -115,11 +139,13 @@
         border-bottom: $Wizard-steps-borderWidth solid $borderColor;
         text-align: $Wizard-steps-textAlign;
         height: $Wizard-steps-height;
+
         ul {
             display: $Wizard-steps-ulDisplay;
             padding: 0;
             margin: 0;
             list-style: none outside none;
+
             li {
                 position: relative;
                 float: left;
@@ -129,10 +155,12 @@
                 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;
@@ -146,55 +174,70 @@
                     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: #3a87ad;
                     background: #fff;
                 }
+
                 &.is-active:after {
                     border-left-color: #fff;
                 }
+
                 &.is-complete,
                 &.is-complete:hover {
                     cursor: pointer;
                     background: $Wizard-steps-bg--isComplete;
                 }
+
                 &.is-complete:after {
                     border-left-color: #f1f5f9;
                 }
-            } // .Badge {
+            }
+
+            // .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);
@@ -207,6 +250,7 @@
             // content: '';
             // }
         }
+
         & + .#{$ns}Wizard-stepContent + .#{$ns}Panel-footer {
             clear: both;
         }

scss/components/form/_checks.scss

@@ -1,4 +1,3 @@
-
 .#{$ns}Checkbox {
     margin: 0 $gap-sm 0 0;
     cursor: pointer;
@@ -52,8 +51,10 @@
                 border-color: $Checkbox-onHover-color;
 
                 &:before {
-                    left: ($Checkbox-size - px2rem(2px) - $Checkbox-inner-size) / 2;
+                    left: ($Checkbox-size - px2rem(2px) - $Checkbox-inner-size) /
-                    top: ($Checkbox-size - px2rem(2px) - $Checkbox-inner-size) / 2;
+                        2;
+                    top: ($Checkbox-size - px2rem(2px) - $Checkbox-inner-size) /
+                        2;
                     width: $Checkbox-inner-size;
                     height: $Checkbox-inner-size;
                     background-color: $Checkbox-onHover-color;
@@ -90,7 +91,7 @@
 
                 &:before {
                     // todo 后面自动计算
-                    @if $ns == 'cxd-' {
+                    @if $ns== "cxd-" {
                         top: px2rem(2px);
                         left: px2rem(1px);
                     } @else {
@@ -146,7 +147,6 @@
             &:checked + i {
                 border-color: $Radio-onHover-color;
 
-    
                 &:before {
                     left: ($Radio-size - px2rem(2px) - $Radio-inner-size) / 2;
                     top: ($Radio-size - px2rem(2px) - $Radio-inner-size) / 2;
@@ -189,6 +189,7 @@
                 }
             }
         }
+
         > i {
             width: $Checkbox--sm-size;
             height: $Checkbox--sm-size;

scss/components/form/_combo.scss

@@ -1,6 +1,4 @@
-
 .#{$ns}Combo {
-
     &-toolbarBtn {
         line-height: $Combo-toolbarBtn-lineHeight;
         height: $Combo-toolbarBtn-height;
@@ -16,7 +14,14 @@
     &-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-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,
@@ -79,14 +84,18 @@
 
     &--ver:not(&--noBorder) {
         > .#{$ns}Combo-items {
-            margin: (-$Combo--vertical-item-gap*2) (-$Combo--vertical-item-gap*2) 0 (-$Combo--vertical-item-gap*2);
+            margin: (-$Combo--vertical-item-gap * 2)
+                (-$Combo--vertical-item-gap * 2) 0
+                (-$Combo--vertical-item-gap * 2);
         }
 
         // 不严格点会命中 combo 里面嵌套 combo 的情况，so sad.
         > .#{$ns}Combo-item,
         > .#{$ns}Combo-items > .#{$ns}Combo-item {
-            border: $Combo--vertical-item-borderWidth dashed $Combo--vertical-item-borderColor;
+            border: $Combo--vertical-item-borderWidth dashed
-            padding: $Combo--vertical-item-paddingY $Combo--vertical-item-paddingX;
+                $Combo--vertical-item-borderColor;
+            padding: $Combo--vertical-item-paddingY
+                $Combo--vertical-item-paddingX;
             position: relative;
         }
 
@@ -110,7 +119,9 @@
             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;
+            border-width: $Combo--vertical-itemToolbar-borderWidth
+                $Combo--vertical-itemToolbar-borderWidth 0
+                $Combo--vertical-itemToolbar-borderWidth;
             // margin-top: px2rem(-1px);
 
             .#{$ns}Combo-toolbarBtn {
@@ -135,15 +146,15 @@
             > .#{$ns}Combo-itemToolbar {
                 top: $Combo--vertical-itemToolbar-positionTop;
                 opacity: 1;
-                
             }
         }
     }
 
     &-item--dragging {
         position: relative;
+
         &:after {
-            content: '';
+            content: "";
             display: block;
             position: absolute;
             z-index: 5;
@@ -175,7 +186,6 @@
     }
 }
 
-
 @include media-breakpoint-up(sm) {
     .#{$ns}Combo-form .#{$ns}Form-item:last-child {
         margin-bottom: 0;

scss/components/form/_date-range.scss

@@ -15,6 +15,7 @@
 
     &:not(.is-disabled) {
         cursor: pointer;
+
         &:hover {
             background-color: $DatePicker-onHover-bg;
         }
@@ -27,6 +28,7 @@
 
     &.is-disabled {
         background: $gray200;
+
         > &-input {
             color: $text--muted-color;
         }
@@ -49,6 +51,7 @@
     &-toggler {
         cursor: pointer;
         color: $DatePicker-iconColor;
+
         &:hover {
             color: $DatePicker-onHover-iconColor;
         }

scss/components/form/_date.scss

@@ -1,4 +1,3 @@
-
 .#{$ns}DatePicker {
     position: relative;
     display: inline-flex;
@@ -15,6 +14,7 @@
 
     &:not(.is-disabled) {
         cursor: pointer;
+
         &:hover {
             background-color: $DatePicker-onHover-bg;
         }
@@ -27,6 +27,7 @@
 
     &.is-disabled {
         background: $gray200;
+
         > &-input {
             color: $text--muted-color;
         }
@@ -49,6 +50,7 @@
     &-toggler {
         cursor: pointer;
         color: $DatePicker-iconColor;
+
         &:hover {
             color: $DatePicker-onHover-iconColor;
         }
@@ -100,7 +102,6 @@
             &:hover {
                 background-color: $Calendar-cell-onHover-bg;
             }
-            
         }
 
         td.rdtToday:before {
@@ -120,16 +121,18 @@
         td.rdtDisabled:hover {
             background-color: $Calendar-cell-onDisabled-bg;
         }
-        
     }
+
     thead tr:first-child th {
         cursor: default;
         text-align: left;
         font-weight: normal;
     }
+
     thead tr:first-child th:hover {
         background: transparent;
     }
+
     tfoot {
         border-top: 0;
 
@@ -159,7 +162,6 @@
                     border-color: $Calendar-input-onFocused-borderColor;
                     box-shadow: none;
                 }
-                
             }
 
             .rdtActions {
@@ -204,7 +206,8 @@
         pointer-events: none;
     }
 
-    .fa, .iconfont {
+    .fa,
+    .iconfont {
         font-size: $fontSizeSm;
     }
 
@@ -246,7 +249,7 @@
     display: inline-block;
     color: inherit;
     font-style: normal;
-    line-height: 1.0;
+    line-height: 1;
 }
 
 .rdtBtnPrev:before {
@@ -284,4 +287,3 @@
         }
     }
 }
-

scss/components/form/_editor.scss

@@ -8,6 +8,7 @@
     > .#{$ns}MonacoEditor > .monaco-diff-editor {
         min-height: px2rem(198px);
     }
+
     overflow: visible;
     height: auto;
     border: $Form-input-borderWidth solid $Form-input-borderColor;
@@ -24,6 +25,7 @@
 
     &--md {
         min-height: 250px;
+
         > .#{$ns}MonacoEditor {
             min-height: 250px;
         }
@@ -58,7 +60,6 @@
     padding: 0;
 }
 
-
 // @media (min-width: 768px) {
 
 //     .amis-editor-control.form-contorl-inline,

scss/components/form/_fieldset.scss

@@ -2,7 +2,7 @@
     position: relative;
 
     &:after {
-        content: '';
+        content: "";
         pointer-events: none;
         border: 1px solid lighten($borderColor, 5%);
         position: absolute;

scss/components/form/_form.scss

@@ -195,7 +195,6 @@
             display: inline-block;
             vertical-align: top;
 
-
             > .#{$ns}Form-label {
                 padding-top: $Form-label-paddingTop;
                 margin-bottom: 0;

scss/components/form/_group.scss

@@ -81,8 +81,6 @@
         }
     }
 
-    
-
     .#{$ns}Form-groupColumn {
         flex-basis: 0;
         flex-grow: 1;

scss/components/form/_icon-picker.scss

@@ -60,6 +60,7 @@
         line-height: $IconPicker-tab-lineHeight;
         cursor: pointer;
         text-align: center;
+
         &.active {
             background: $IconPicker-tab-onActive-bg;
         }

scss/components/form/_image.scss

@@ -13,10 +13,12 @@
     color: $text--muted-color;
     position: relative;
     cursor: pointer;
+
     > div:not(.image-list) {
         display: table-cell;
         vertical-align: middle;
     }
+
     &.has-files {
         cursor: default;
         border: 2px dashed transparent;
@@ -29,8 +31,9 @@
     height: 90px;
     padding-bottom: 20px;
     margin-bottom: 10px;
+
     &:after {
-        content: '温馨提示：当前状态可以粘贴剪切板中的文件。如截屏';
+        content: "温馨提示：当前状态可以粘贴剪切板中的文件。如截屏";
         position: absolute;
         left: 10px;
         bottom: 3px;
@@ -57,19 +60,23 @@
 .image-list {
     outline: none;
     margin: -5px;
+
     .image-item {
         position: relative;
         margin: 5px;
         width: 90px;
+
         .img-wrapper {
             width: 90px;
             min-height: 50px;
             overflow: hidden;
         }
+
         img {
             display: block;
             width: 100%;
         }
+
         .fa-spinner {
             position: absolute;
             left: 50%;
@@ -77,6 +84,7 @@
             margin: -15px 0 0 -20px;
             color: #fff;
         }
+
         .image-overlay {
             background: rgba(0, 0, 0, 0.3);
             border-radius: 5px;
@@ -109,16 +117,19 @@
                 }
             }
         }
+
         p {
             margin: 0;
             text-align: center;
         }
     }
+
     &.image-list-multiple .image-item .img-wrapper {
         height: 90px;
         display: table-cell;
         vertical-align: middle;
     }
+
     .image-add-btn {
         width: 90px;
         height: 110px;
@@ -126,17 +137,21 @@
         margin: 5px;
         cursor: pointer;
         float: left;
+
         &:hover .fa {
             color: $dark;
         }
     }
+
     .image-item.uploaded {
         .fa-spinner {
             display: none;
         }
+
         .image-overlay {
             display: none;
         }
+
         &:hover {
             .image-overlay {
                 display: flex;
@@ -147,15 +162,18 @@
 
 .cropper-wrapper {
     position: relative;
+
     img {
         max-width: 100%;
         max-height: 400px;
     }
+
     .btn {
         position: absolute;
         bottom: 0;
         right: 0;
     }
+
     .btn:nth-child(2n + 1) {
         bottom: 40px;
         right: 4px;

scss/components/form/_input-group.scss

@@ -17,8 +17,10 @@
 
     &-addOn {
         background: $InputGroup-addOn-bg;
-        border: $InputGroup-addOn-borderWidth solid $InputGroup-addOn-borderColor;
+        border: $InputGroup-addOn-borderWidth solid
-        line-height: $InputGroup-height - $InputGroup-paddingY * 2 - $InputGroup-addOn-borderWidth * 2;
+            $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;
@@ -45,7 +47,8 @@
     &-btn {
         .#{$ns}Button {
             border-radius: 0;
-            border: $InputGroup-button-borderWidth solid $InputGroup-button-borderColor;
+            border: $InputGroup-button-borderWidth solid
+                $InputGroup-button-borderColor;
         }
 
         &:not(:last-child) .#{$ns}Button {
@@ -87,7 +90,9 @@
         @if $InputGroup-select-borderWidth {
             .#{$ns}Select {
                 background-color: $InputGroup-select-bg;
-                border: $InputGroup-select-borderWidth solid $InputGroup-select-borderColor;
+                border: $InputGroup-select-borderWidth
+                    solid
+                    $InputGroup-select-borderColor;
 
                 @if $InputGroup-select-color !=$Form-select-color {
                     color: $InputGroup-select-color;
@@ -113,7 +118,6 @@
             }
         }
 
-        
         &:not(:first-child) .#{$ns}Select {
             border-top-left-radius: 0;
             border-bottom-left-radius: 0;
@@ -132,7 +136,6 @@
         }
     }
 
-
     &.is-focused {
         .#{$ns}InputGroup-addOn,
         .#{$ns}TextControl-input,
@@ -153,7 +156,9 @@
             }
         }
 
-        @if $InputGroup-select-onFocused-arrowColor != $Form-select-caret-iconColor {
+        @if $InputGroup-select-onFocused-arrowColor
+            !=$Form-select-caret-iconColor
+        {
             .#{$ns}Select-arrow {
                 color: $InputGroup-select-onFocused-arrowColor;
             }

scss/components/form/_list.scss

@@ -1,4 +1,3 @@
-
 .#{$ns}ListControl {
     &-items {
         display: block;
@@ -16,7 +15,8 @@
         display: inline-block;
         vertical-align: middle;
         margin: $ListControl-gutterWidth/2;
-        border: $ListControl-item-borderWidth solid $ListControl-item-borderColor;
+        border: $ListControl-item-borderWidth solid
+            $ListControl-item-borderColor;
         background-color: $ListControl-item-bg;
         padding: $ListControl-item-paddingY $ListControl-item-paddingX;
         color: $ListControl-item-color;
@@ -27,7 +27,11 @@
             cursor: pointer;
         }
 
-        .b-t, .b-l, .b-r, .b-b, .b-a {
+        .b-t,
+        .b-l,
+        .b-r,
+        .b-b,
+        .b-a {
             border-color: $ListControl-item-color;
         }
 
@@ -36,7 +40,11 @@
             border-color: $ListControl-item-onHover-borderColor;
             color: $ListControl-item-onHover-color;
 
-            .b-t, .b-l, .b-r, .b-b, .b-a {
+            .b-t,
+            .b-l,
+            .b-r,
+            .b-b,
+            .b-a {
                 border-color: $ListControl-item-onHover-borderColor;
             }
         }
@@ -53,7 +61,11 @@
                 color: $ListControl-item-onDisabled-color;
             }
 
-            .b-t, .b-l, .b-r, .b-b, .b-a {
+            .b-t,
+            .b-l,
+            .b-r,
+            .b-b,
+            .b-a {
                 border-color: $ListControl-item-onDisabled-borderColor;
             }
         }
@@ -70,12 +82,16 @@
                 }
             }
 
-            .b-t, .b-l, .b-r, .b-b, .b-a {
+            .b-t,
+            .b-l,
+            .b-r,
+            .b-b,
+            .b-a {
                 border-color: $ListControl-item-onActive-color;
             }
 
             &:before {
-                content: '';
+                content: "";
                 position: absolute;
                 width: px2rem(14px);
                 height: px2rem(14px);
@@ -85,7 +101,7 @@
             }
 
             &:after {
-                content: '';
+                content: "";
                 position: absolute;
                 width: px2rem(10px);
                 height: px2rem(5px);
@@ -101,6 +117,7 @@
 
     &-itemImage {
         margin: $ListControl-item-paddingY * -1 $ListControl-item-paddingX * -1;
+
         img {
             display: block;
             max-width: 100%;
@@ -115,7 +132,6 @@
         margin-top: $ListControl-item-paddingY;
     }
 
-
     &-placeholder {
         color: $Form-input-placeholderColor;
     }

scss/components/form/_nested-select.scss

@@ -7,7 +7,10 @@
     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;
+    $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;
@@ -74,7 +77,7 @@
         line-height: $Form-input-height;
         cursor: pointer;
         float: right;
-        text-align: center
+        text-align: center;
     }
 
     &-menuOuter,
@@ -83,7 +86,8 @@
         position: absolute;
         background: $Form-select-menu-bg;
         color: $Form-select-menu-color;
-        border: $Form-select-outer-borderWidth solid $Form-input-onFocused-borderColor;
+        border: $Form-select-outer-borderWidth solid
+            $Form-input-onFocused-borderColor;
         z-index: 10;
         box-shadow: $Form-select-outer-boxShadow;
 
@@ -115,9 +119,7 @@
             &.checkall {
                 border-bottom: px2rem(1px) solid #eceff8;
             }
-
         }
-
     }
 
     &-childrenOuter {
@@ -131,7 +133,7 @@
     }
 
     &-optionArrowRight:before {
-        content: '\e63b';
+        content: "\e63b";
         font-family: "iconfont" !important;
     }
 }

scss/components/form/_number.scss

@@ -20,6 +20,7 @@
         overflow: hidden;
         display: block;
         touch-action: none;
+
         &-active {
             background: #ddd;
         }
@@ -33,6 +34,7 @@
 
     &:hover {
         border-color: $Form-input-onFocused-borderColor;
+
         .#{$ns}Number-handler-up,
         .#{$ns}Number-handler-wrap {
             border-color: $Form-input-onFocused-borderColor;
@@ -41,6 +43,7 @@
 
     &-disabled:hover {
         border-color: $Form-input-borderColor;
+
         .#{$ns}Number-handler-up,
         .#{$ns}Number-handler-wrap {
             border-color: $Form-input-borderColor;
@@ -139,8 +142,6 @@
         }
     }
 
-    
-
     &-handler-down-disabled,
     &-handler-up-disabled {
         background-color: $Number-handler-onDisabled-bg;
@@ -154,8 +155,10 @@
             cursor: not-allowed;
             background-color: $gray200;
         }
+
         .#{$ns}Number-handler {
             opacity: 0.72;
+
             &:hover {
                 color: $text--muted-color;
                 border-color: $Form-input-borderColor;

scss/components/form/_picker.scss

@@ -1,9 +1,11 @@
 .#{$ns}Picker {
-
     &-values {
         display: inline-block;
         margin-top: -$gap-xs;
-        padding: ($Form-input-height - $Form-input-lineHeight * $Form-input-fontSize - px2rem(2px))/2 0;
+        padding: (
+                $Form-input-height - $Form-input-lineHeight *
+                    $Form-input-fontSize - px2rem(2px)
+            )/2 0;
     }
 
     &-value {

scss/components/form/_range.scss

@@ -2,17 +2,19 @@
     position: relative;
     @include clearfix();
 
-    padding-top: 1.0rem;
+    padding-top: 1rem;
     padding-bottom: 1.1rem;
 
     &--withInput {
         .#{$ns}InputRange {
             width: calc(100% - 120px);
         }
+
         .#{$ns}InputRange-label--mid {
             left: calc(50% - 60px);
         }
     }
+
     .#{$ns}InputRange {
         &-input {
             font-size: $fontSizeSm;
@@ -21,30 +23,35 @@
             right: px2rem(26px);
             top: px2rem(12px);
             height: px2rem(30px);
+
             input {
                 padding: px2rem(10px);
                 width: 100%;
                 height: 100%;
+
                 &:focus {
                     outline: none;
                     border: $borderWidth solid $info;
                 }
             }
         }
+
         &-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
+                fill: #999;
             }
         }
     }
@@ -66,7 +73,8 @@
         width: $InputRange-slider-width;
         height: $InputRange-slider-height;
         margin-left: $InputRange-slider-width / -2;
-        margin-top: $InputRange-slider-height / -2 + $InputRange-track-height / -2;
+        margin-top: $InputRange-slider-height / -2 + $InputRange-track-height /
+            -2;
         outline: none;
         position: absolute;
         z-index: 2;
@@ -78,7 +86,7 @@
         }
 
         &:focus {
-            box-shadow: $InputRange-slider-onFocus-boxShadow
+            box-shadow: $InputRange-slider-onFocus-boxShadow;
         }
 
         .input-range--disabled & {
@@ -87,6 +95,7 @@
             box-shadow: none;
             transform: none;
         }
+
         &:before {
             content: "||";
             color: #fff;
@@ -154,6 +163,7 @@
         height: $InputRange-track-height;
         position: relative;
         transition: $InputRange-track-transition;
+
         .#{$ns}InputRange.is-disabled & {
             background: $InputRange-track-onDisabled-bg;
         }
@@ -168,7 +178,7 @@
 
         &::before,
         &::after {
-            content: '';
+            content: "";
             width: 0.5rem;
             height: 100%;
             position: absolute;
@@ -189,6 +199,4 @@
     &-track--active {
         background: $InputRange-track-onActive-bg;
     }
-      
 }
-  

scss/components/form/_rating.scss

@@ -3,7 +3,7 @@
     overflow: hidden;
     display: block;
     float: left;
-    font-size: px2rem(24px);;
+    font-size: px2rem(24px);
     color: $dark;
     cursor: pointer;
 

scss/components/form/_repeat.scss

@@ -32,7 +32,6 @@
 }
 
 @media (min-width: 768px) {
-
     .repeat-control.form-contorl-inline,
     .form-group-inline .repeat-control {
         display: inline-block;

scss/components/form/_rich-text.scss

@@ -24,23 +24,33 @@
         border-top: 1px solid $Form-input-borderColor;
     }
 
-  .fr-toolbar .fr-command.fr-btn, .fr-popup .fr-command.fr-btn {
+    .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 {
+    .fr-toolbar .fr-command.fr-btn.fr-active,
+    .fr-popup .fr-command.fr-btn.fr-active {
         color: $info;
     }
 
-  .fr-desktop .fr-command:hover, .fr-desktop .fr-command:focus {
+    .fr-desktop .fr-command:hover,
+    .fr-desktop .fr-command:focus {
         background-color: $light;
     }
 
-  .fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active, .fr-popup .fr-command.fr-btn.fr-dropdown.fr-active {
+    .fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active,
+    .fr-popup .fr-command.fr-btn.fr-dropdown.fr-active {
         background-color: $light;
     }
 
-  .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li a.fr-active {
+    .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;
     }
@@ -49,7 +59,8 @@
         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;
+            border-top: $Form-input-borderWidth solid
+                $Form-input-onFocused-borderColor;
         }
     }
 
@@ -65,6 +76,7 @@
         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;
         }

scss/components/form/_select.scss

@@ -1,4 +1,3 @@
-
 .#{$ns}Select {
     display: inline-flex;
     vertical-align: middle;
@@ -8,7 +7,10 @@
     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;
+    $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;
@@ -82,7 +84,8 @@
         .#{$ns}Select-value {
             position: static;
             user-select: none;
-            line-height: $Form-input-lineHeight * $Form-input-fontSize - px2rem(2px);
+            line-height: $Form-input-lineHeight * $Form-input-fontSize -
+                px2rem(2px);
             display: inline-block;
             vertical-align: middle;
             font-size: $Form-selectValue-fontSize;
@@ -99,8 +102,6 @@
         }
     }
 
-    
-
     &-valueIcon {
         cursor: pointer;
         border-right: px2rem(1px) solid $Form-selectValue-borderColor;
@@ -121,7 +122,7 @@
         line-height: 1;
 
         &:before {
-            transition: transform .3s;
+            transition: transform 0.3s;
             content: $Form-select-caret-icon;
             font-family: $Form-select-caret-vender;
             font-size: $Form-select-caret-fontSize;
@@ -138,7 +139,8 @@
         position: absolute;
         background: $Form-select-menu-bg;
         color: $Form-select-menu-color;
-        border: $Form-select-outer-borderWidth solid $Form-input-onFocused-borderColor;
+        border: $Form-select-outer-borderWidth solid
+            $Form-input-onFocused-borderColor;
         left: px2rem(-1px);
         right: px2rem(-1px);
         min-width: 100%;
@@ -153,7 +155,10 @@
     }
 
     &-option {
-        padding: ($Form-select-menu-height - $Form-input-lineHeight * $Form-input-fontSize - px2rem(2px))/2 $Form-select-paddingX;
+        padding: (
+                $Form-select-menu-height - $Form-input-lineHeight *
+                    $Form-input-fontSize - px2rem(2px)
+            )/2 $Form-select-paddingX;
 
         &.is-active {
             color: $Form-select-menu-onActive-color;
@@ -217,7 +222,8 @@
     margin-top: -$Form-select-borderWidth;
     background: $Form-select-menu-bg;
     color: $Form-select-menu-color;
-    border: $Form-select-outer-borderWidth solid $Form-input-onFocused-borderColor;
+    border: $Form-select-outer-borderWidth solid
+        $Form-input-onFocused-borderColor;
     box-shadow: $Form-select-outer-boxShadow;
     border-top-left-radius: 0;
     border-top-right-radius: 0;

scss/components/form/_sub-form.scss

@@ -1,9 +1,11 @@
 .#{$ns}SubForm {
-
     &-values {
         display: inline-block;
         margin-top: -$gap-xs;
-        padding: ($Form-input-height - $Form-input-lineHeight * $Form-input-fontSize - px2rem(2px))/2 0;
+        padding: (
+                $Form-input-height - $Form-input-lineHeight *
+                    $Form-input-fontSize - px2rem(2px)
+            )/2 0;
     }
 
     &-value {
@@ -46,7 +48,14 @@
     &-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-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,

scss/components/form/_switch.scss

@@ -1,4 +1,3 @@
-
 .#{$ns}Switch {
     cursor: pointer;
     position: relative;
@@ -16,7 +15,6 @@
         background-color: $Switch-onDisabled-bgColor;
     }
 
-
     i {
         &:before {
             content: "OFF";
@@ -37,6 +35,7 @@
             border-radius: px2rem(30px);
             transition: all 0.2s;
         }
+
         &:after {
             content: "";
             position: absolute;
@@ -59,7 +58,7 @@
             & + i {
                 &:before {
                     color: $Switch-onDisabled-color;
-                    background-color: $Switch-onDisabled-bgColor
+                    background-color: $Switch-onDisabled-bgColor;
                 }
 
                 &:after {
@@ -74,6 +73,7 @@
                     left: 100%;
                     border-width: 0;
                 }
+
                 &:after {
                     margin-left: $Switch-width - $Switch-height;
 

scss/components/form/_tag.scss

@@ -1,4 +1,3 @@
-
 .#{$ns}TagControl {
     @include input-text();
 
@@ -83,7 +82,14 @@
             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-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,

scss/components/form/_text.scss

@@ -18,6 +18,7 @@
 
 @mixin input-text {
     position: relative;
+
     &.is-inline {
         display: inline-block;
     }
@@ -180,13 +181,13 @@
         }
     }
 
-    
     &--withAddOn > &-button {
         > .#{$ns}Button {
             position: relative;
             border-radius: 0;
             margin-left: px2rem(-1px);
-            border: $InputGroup-button-borderWidth solid $InputGroup-button-borderColor;
+            border: $InputGroup-button-borderWidth solid
+                $InputGroup-button-borderColor;
         }
 
         &:not(:last-child) .#{$ns}Button {
@@ -207,6 +208,7 @@
             }
         }
     }
+
     &--withAddOn.is-focused > &-button .#{$ns}Button {
         border-color: $Form-input-onFocused-borderColor;
     }
@@ -246,7 +248,10 @@
     }
 
     &-sugItem {
-        padding: ($Form-selectOption-height - $Form-input-lineHeight * $Form-input-fontSize - px2rem(2px))/2 px2rem(12px);
+        padding: (
+                $Form-selectOption-height - $Form-input-lineHeight *
+                    $Form-input-fontSize - px2rem(2px)
+            )/2 px2rem(12px);
 
         svg {
             width: px2rem(16px);
@@ -281,6 +286,7 @@
         white-space: normal;
 
         margin-bottom: -$gap-xs;
+
         > input {
             margin-bottom: $gap-xs;
         }

scss/components/form/_textarea.scss

@@ -2,7 +2,11 @@
     border: 1px solid $Form-input-borderColor;
     border-radius: $Form-input-borderRadius;
     line-height: $Form-input-lineHeight;
-    padding: px2rem(6px) ($Form-input-height - $Form-input-lineHeight * $Form-input-fontSize - px2rem(2px));
+    padding: px2rem(6px)
+        (
+            $Form-input-height - $Form-input-lineHeight * $Form-input-fontSize -
+                px2rem(2px)
+        );
     font-size: $Form-input-fontSize;
     outline: none;
     resize: none;
@@ -13,7 +17,8 @@
         border-color: $Form-input-onError-borderColor;
     }
 
-    &:focus, &.is-focused {
+    &:focus,
+    &.is-focused {
         border-color: $Form-input-onFocused-borderColor;
         box-shadow: $Form-input-boxShadow;
     }

scss/components/form/_transfer-select.scss

@@ -1,6 +1,7 @@
 .#{$ns}TransferSelectControl {
     display: flex;
     height: px2rem(300px);
+
     .#{$ns}TransferSelect {
         &-allOptions,
         &-selectedOptions {
@@ -8,6 +9,7 @@
             flex: 1;
             border: $borderWidth solid $borderColor;
             overflow: auto;
+
             .#{$ns}TransferSelect-heading {
                 position: relative;
                 height: px2rem(40px);
@@ -15,16 +17,19 @@
                 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);
@@ -32,6 +37,7 @@
                     padding-left: px2rem(20px);
                 }
             }
+
             .#{$ns}TransferSelect-selectAll,
             .#{$ns}TransferSelect-clearAll {
                 position: absolute;
@@ -39,6 +45,7 @@
                 cursor: pointer;
                 color: $primary;
             }
+
             .#{$ns}TransferSelect-searchWrapper {
                 i {
                     height: px2rem(17px);
@@ -46,12 +53,14 @@
                 }
             }
         }
+
         &-allOptions {
             &--table {
                 .#{$ns}TransferSelect-heading {
                     background-color: $TransferSelect--table-heading-bg;
                     display: flex;
                 }
+
                 .#{$ns}TransferSelect-searchWrapper {
                     display: inline-block;
                     padding: px2rem(3px) px2rem(10px);
@@ -59,27 +68,32 @@
                     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);
@@ -87,8 +101,10 @@
             right: px2rem(20px);
             cursor: pointer;
         }
+
         &-action {
             padding: 0 px2rem(20px);
+
             .#{$ns}TransferSelect-actionIcon {
                 display: inline-block;
                 width: 0;

scss/components/form/_tree-select.scss

@@ -64,7 +64,8 @@
             user-select: none;
             white-space: nowrap;
             vertical-align: middle;
-            line-height: $Form-input-lineHeight * $Form-input-fontSize - px2rem(2px);
+            line-height: $Form-input-lineHeight * $Form-input-fontSize -
+                px2rem(2px);
             display: inline-block;
             font-size: $Form-selectValue-fontSize;
             color: $Form-selectValue-color;
@@ -104,7 +105,7 @@
         justify-content: center;
 
         &:before {
-            content: '';
+            content: "";
             border-color: $Form-input-iconColor transparent transparent;
             border-style: solid;
             border-width: px2rem(5px) px2rem(5px) px2rem(2.5px);

scss/components/form/_tree.scss

@@ -15,9 +15,9 @@
     }
 }
 
-
 .#{$ns}Tree {
-  &-list, &-sublist {
+    &-list,
+    &-sublist {
         list-style: none;
         padding: 0;
         margin: 0;

scss/layout/_aside.scss

@@ -1,4 +1,3 @@
-
 .#{$ns}AsideNav {
     @include clearfix();
 
@@ -17,8 +16,6 @@
         margin: 0;
     }
 
-    
-
     &-itemArrow {
         float: right;
         display: block;
@@ -26,7 +23,6 @@
         text-align: center;
         line-height: px2rem(17px);
 
-
         &::before {
             content: $Layout-asideLink-arrowIcon;
             display: inline-block;
@@ -58,7 +54,10 @@
     }
 
     &-itemIcon {
-        margin: ($Layout-nav-height - $lineHeightBase * $Layout-asideLink-fontSize)/-2 px2rem(-10px);
+        margin: (
+                $Layout-nav-height - $lineHeightBase *
+                    $Layout-asideLink-fontSize
+            )/-2 px2rem(-10px);
         line-height: $Layout-nav-height;
         width: $Layout-nav-height;
         vertical-align: middle;
@@ -83,7 +82,7 @@
         height: 0;
         overflow: hidden;
         margin-left: px2rem(-20px);
-        transition: all .2s ease-in-out 0s;
+        transition: all 0.2s ease-in-out 0s;
         background-color: $Layout-aside-onAcitve-bg;
 
         .is-active > &,
@@ -111,14 +110,16 @@
             text-transform: none;
             display: block;
             font-size: $Layout-asideLink-fontSize;
-            padding: ($Layout-nav-height - $lineHeightBase*$Layout-asideLink-fontSize)/2 px2rem(15px);
+            padding: (
+                    $Layout-nav-height - $lineHeightBase *
+                        $Layout-asideLink-fontSize
+                )/2 px2rem(15px);
             position: relative;
-            transition: background-color .2s ease-in-out 0s;
+            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;
@@ -162,7 +163,6 @@
                 display: block;
             }
         }
-
     }
 
     &-subHeader {
@@ -172,7 +172,10 @@
             cursor: default;
             background: transparent;
             color: darken($Layout-aside-color, 10%);
-            padding: ($Layout-nav--folded-height - $lineHeightBase * $Layout-asideLink-fontSize)/2 px2rem(20px);
+            padding: (
+                    $Layout-nav--folded-height - $lineHeightBase *
+                        $Layout-asideLink-fontSize
+                )/2 px2rem(20px);
 
             &:hover {
                 color: darken($Layout-aside-color, 10%);

scss/layout/_grid.scss

@@ -38,7 +38,6 @@
 //     }
 // }
 
-
 // @mixin calc-grid-column($index, $class, $type) {
 //     @if ($type==width) and ($index > 0) {
 //         .#{$ns}Grid-col--#{$class}#{$index} {
@@ -141,8 +140,6 @@
 //     @include container-fixed;
 // }
 
-
-
 // @include make-grid-columns;
 
 @include make-grid(xs);

scss/layout/_hbox.scss

@@ -4,6 +4,7 @@
     border-spacing: 0;
     width: 100%;
     height: 100%;
+
     & > .#{$ns}Hbox-col {
         display: table-cell;
         vertical-align: top;
@@ -15,29 +16,36 @@
 .#{$ns}FormHbox {
     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: 5px;
             padding-right: 5px;
         }
     }
+
     &.#{$ns}Hbox--sm {
         margin-left: -10px;
         margin-right: -10px;
+
         > .#{$ns}Hbox > .#{$ns}Hbox-col {
             padding-left: 10px;
             padding-right: 10px;
@@ -48,17 +56,21 @@
 @include media-breakpoint-down(md) {
     .#{$ns}Hbox--autoSm {
         display: block;
+
         & > .#{$ns}Hbox-col {
             width: auto;
             height: auto;
             display: block;
+
             &.show {
                 display: block !important;
             }
         }
+
         & .#{$ns}Vbox {
             height: auto;
         }
+
         & .cell-inner {
             position: static !important;
         }
@@ -68,14 +80,17 @@
 @include media-breakpoint-down(sm) {
     .#{$ns}Hbox--autoXs {
         display: block;
+
         & > .#{$ns}Hbox-col {
             width: auto;
             height: auto;
             display: block;
         }
+
         & .#{$ns}Vbox {
             height: auto;
         }
+
         & .cell-inner {
             position: static !important;
         }

scss/layout/_layout.scss

@@ -1,7 +1,9 @@
-html, body {
+html,
+body {
     width: 100%;
     height: 100%;
 }
+
 body {
     overflow-x: hidden;
 }
@@ -45,7 +47,6 @@ body {
         background: $Layout-brand-bg;
         color: $Layout-brandBar-color;
 
-
         > button {
             padding: px2rem(10px) px2rem(17px);
             font-size: px2rem(16px);
@@ -74,6 +75,7 @@ body {
         &:hover {
             text-decoration: none;
         }
+
         img {
             max-height: $Layout-header-height / 2;
             // margin-top: px2rem(-4px);
@@ -109,8 +111,9 @@ body {
         position: absolute;
         bottom: 0;
         width: 100%;
-        z-index: $zindex-fixed;;
+        z-index: $zindex-fixed;
         max-width: $Layout-aside-width;
+
         // .app-aside-folded & {
         //     max-width: @app-aside-folded-width;
         // }
@@ -281,9 +284,11 @@ body {
                 &::-webkit-scrollbar {
                     -webkit-appearance: none;
                 }
+
                 &::-webkit-scrollbar:vertical {
                     width: $scrollbar-width;
                 }
+
                 & > * {
                     width: $Layout-aside-width;
                 }
@@ -405,7 +410,6 @@ body {
             }
         }
     }
-
 }
 
 @include media-breakpoint-down(sm) {
@@ -414,7 +418,7 @@ body {
     }
 
     .#{$ns}Layout-content {
-        transition: transform .2s ease;
+        transition: transform 0.2s ease;
     }
 
     .#{$ns}Layout-aside {
@@ -456,6 +460,4 @@ body {
             padding-top: px2rem(50px);
         }
     }
-
-
 }

scss/layout/_vbox.scss

@@ -5,20 +5,25 @@
     width: 100%;
     height: 100%;
     min-height: 240px;
+
     & .row-row {
         display: table-row;
         height: 100%;
+
         & .#{$ns}Vbox-cell {
             position: relative;
             height: 100%;
             width: 100%;
+
             .ie & {
                 display: table-cell;
                 overflow: auto;
+
                 & .cell-inner {
                     overflow: visible !important;
                 }
             }
+
             & .cell-inner {
                 position: absolute;
                 top: 0;

scss/themes/cxd.scss

@@ -1,7 +1,7 @@
 @import "../functions";
 $remFactor: 16px;
 
-$ns: 'cxd-';
+$ns: "cxd-";
 
 $info: #108cee;
 $primary: #108cee;
@@ -12,32 +12,32 @@ $light: #eaf6fe;
 $white: #fff;
 
 $info-bg: #eaf6fe;
-$success-bg: #F1FDEB;
+$success-bg: #f1fdeb;
-$warning-bg: #FCF7F1;
+$warning-bg: #fcf7f1;
-$danger-bg: #FFF5F5;
+$danger-bg: #fff5f5;
 
-$body-bg: #E8ECF0;
+$body-bg: #e8ecf0;
 $text-color: #666;
 $text--muted-color: #999;
 $text--loud-color: #333;
-$borderColor: #E8EBEE;
+$borderColor: #e8ebee;
 
 $link-onHover-decoration: none;
 
 $Layout-header-boxShadow: none;
 $Layout-aside-width: px2rem(180px);
 $Layout-aside-bg: #19233c;
-$Layout-brand-bg: #121A2C;
+$Layout-brand-bg: #121a2c;
 $Layout-brand-color: #fff;
 $Layout-asideLink-color: #fff;
 $Layout-asideLink-onHover-iconSize: px2rem(16px);
-$Layout-asideLink-onHover-iconColor: #42AAFA;
+$Layout-asideLink-onHover-iconColor: #42aafa;
 $Layout-asideLink-fontSize: px2rem(12px);
 $Layout-asideLink-arrowFontSize: px2rem(12px);
 $Layout-asideLink-arrowVendor: "iconfont";
 $Layout-asideLink-arrowIcon: "\e63b";
-$Layout-asideLink-arrowColor: #8D99b0;
+$Layout-asideLink-arrowColor: #8d99b0;
-$Layout-asideLink-onHover-arrowColor: #FFF;
+$Layout-asideLink-onHover-arrowColor: #fff;
 $Layout-headerBar-borderBottom: px2rem(1px) solid $body-bg;
 $Layout-asideDivider-margin: 0 px2rem(10px);
 
@@ -48,7 +48,6 @@ $Page-content-paddingX: px2rem(20px);
 $Page-main-bg: #fff;
 $Page-header-paddingY: px2rem(18px);
 
-
 $Form-item-gap: px2rem(20px);
 $Form-input-height: px2rem(30px);
 $Form-input-onFocused-bg: #f8fbfe;
@@ -81,7 +80,8 @@ $Form-select-caret-icon: "\e605";
 $Form-select-caret-iconColor: inherit;
 $Form-select-caret-fontSize: px2rem(12px);
 $Form-select-outer-borderWidth: 0;
-$Form-select-outer-boxShadow: px2rem(2px) px2rem(4px) px2rem(8px) rgba(0, 0, 0, 0.2);
+$Form-select-outer-boxShadow: px2rem(2px) px2rem(4px) px2rem(8px)
+    rgba(0, 0, 0, 0.2);
 $Form-select-menu-color: #333;
 
 $InputGroup-select-borderWidth: px2rem(1px);
@@ -187,7 +187,7 @@ $ButtonGroup-divider-color: #fff;
 $Button--link-color: $Button--default-color;
 $Button--link-onHover-color: $Button--default-color;
 
-$Spinner-bg: url('./spinner-cxd.svg');
+$Spinner-bg: url("./spinner-cxd.svg");
 
 $Crud-toolbar-gap: px2rem(10px);
 
@@ -251,7 +251,7 @@ $Modal-title-color: #333;
 $Modal-body-paddingY: px2rem(30px);
 $Modal-body-paddingX: px2rem(30px);
 $Modal-body-borderTop: none;
-$Modal-body-borderBottom: px2rem(1px) solid #ECEFF8;
+$Modal-body-borderBottom: px2rem(1px) solid #eceff8;
 $Modal-footer-marginX: px2rem(30px);
 $Modal-footer-padding: px2rem(15px) 0;
 
@@ -291,7 +291,6 @@ $Tabs-onHover-borderColor: transparent;
 $Tabs-onActive-borderBottomColor: $info;
 $Tabs-onActive-borderBottomWidth: px2rem(2px);
 
-
 // Pagination
 $Pagination-arrowVendor: "iconfont";
 $Pagination-prevArrowContent: "\e759";
@@ -341,7 +340,6 @@ $Alert--success-borderColor: $success-bg;
 $Alert--warning-color: $warning;
 $Alert--warning-borderColor: $warning-bg;
 
-
 // Toast
 
 $Toast-xs: px2rem(5px);
@@ -468,5 +466,4 @@ $TagControl-sugTip-color: $primary;
 @import "../components/form/nested-select";
 @import "../components/form/icon-picker";
 
-
 @import "../utilities";

scss/themes/default.scss

@@ -1,5 +1,4 @@
-
+$ns: "a-";
-$ns: 'a-';
 
 $primary: #7266ba;
 $info: #23b7e5;
@@ -94,5 +93,4 @@ $Form-input-borderColor: #cfdadd;
 @import "../components/form/nested-select";
 @import "../components/form/icon-picker";
 
-
 @import "../utilities";