增加 .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
+    );
 }
 
 //断点最小值
@@ -18,15 +26,17 @@
 
 //生成类名“-sm、-md、-lg、-cl” -xs?
 @function breakpoint-infix($name, $breakpoints: $breakpoints) {
-    @return if(breakpoint-min($name, $breakpoints)==null, "", "-#{$name}");
+    @return if(breakpoint-min($name, $breakpoints) ==null, "", "-#{$name}");
 }
 
 @function px2rem($pixels, $context: $remFactor) {
     @if (unitless($pixels)) {
         $pixels: $pixels * 1px;
     }
+
     @if (unitless($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;
     }
@@ -41,32 +42,43 @@
     }
 }
 
-@mixin color-schema($bg-color:#555, $percent:15%, $sat-percent:100%) {
+@mixin color-schema($bg-color: #555, $percent: 15%, $sat-percent: 100%) {
     background-color: saturate(darken($bg-color, $percent), $sat-percent);
 }
 
-@mixin color-schema-lt($bg-color:#555, $percent:15%, $sat-percent:100%) {
+@mixin color-schema-lt($bg-color: #555, $percent: 15%, $sat-percent: 100%) {
     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 {
@@ -152,11 +181,11 @@
 }
 
 @mixin button-size(
-    $padding-y, 
+    $padding-y,
-    $padding-x, 
+    $padding-x,
-    $font-size, 
+    $font-size,
-    $line-height, 
+    $line-height,
-    $border-radius, 
+    $border-radius,
     $height: auto,
     $iconWdith: px2rem(20px)
 ) {
@@ -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;
@@ -182,10 +210,10 @@
     $background,
     $border: $background,
     $color: $white,
-    $hover-background: darken($background, 7.5%), 
+    $hover-background: darken($background, 7.5%),
-    $hover-border: darken($border, 10%), 
+    $hover-border: darken($border, 10%),
     $hover-color: $color,
-    $active-background: darken($background, 10%), 
+    $active-background: darken($background, 10%),
     $active-border: darken($border, 12.5%),
     $active-color: $color
 ) {
@@ -193,16 +221,15 @@
     background-color: $background;
     border-color: $border;
     box-shadow: $Button-boxShadow;
-    
+
     @include hover-focus {
         color: $hover-color;
         background-color: $hover-background;
         border-color: $hover-border;
     }
-    
+
     &.is-disabled,
     &:disabled {
-
         @if variable-exists(Button-onDisabled-bg) {
             background-color: $Button-onDisabled-bg;
         } @else {
@@ -220,14 +247,12 @@
         } @else {
             border-color: $border;
         }
-
-        
     }
-    
+
     &:not(:disabled):not(.is-disabled):active,
     &:not(:disabled):not(.is-disabled).is-active {
         color: $active-color;
         background-color: $active-background;
         border-color: $active-border;
     }
-}
+}

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;
@@ -33,18 +32,24 @@ $danger: $red !default;
 $light: $gray100 !default;
 $dark: $gray800 !default;
 
-$remFactor: 16px!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(
-$fontSizeMd: px2rem(16px)  !default;
+    14px
-$fontSizeLg: px2rem(20px)  !default;
+) !default; // Assumes the browser default, typically `16px`
-$fontSizeSm: px2rem(12px)  !default;
+$fontSizeMd: px2rem(16px) !default;
-$fontSizeXs: px2rem(11px)  !default;
+$fontSizeLg: px2rem(20px) !default;
+$fontSizeSm: px2rem(12px) !default;
+$fontSizeXs: px2rem(11px) !default;
 
 $fontWeightLighter: lighter !default;
 $fontWeightLight: 300 !default;
@@ -66,31 +71,29 @@ $h4-fontSize: $fontSizeBase * 1.5 !default;
 $h5-fontSize: $fontSizeBase * 1.25 !default;
 $h6-fontSize: $fontSizeBase !default;
 
-
 // 边框
-$borderWidth: px2rem(1px)  !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: (
-  xs: 0,
+    xs: 0,
-  sm: 576px,
+    sm: 576px,
-  md: 768px,
+    md: 768px,
-  lg: 992px,
+    lg: 992px,
-  xl: 1200px
+    xl: 1200px
 ) !default;
 
 // 段落间距
-$paragraph-marginBottom:   1rem !default;
+$paragraph-marginBottom: 1rem !default;
 
 $text-color: $gray900 !default;
 $text--muted-color: lighten($text-color, 25%) !default;
@@ -133,13 +136,16 @@ $gap-lg: px2rem(30px) !default;
 // Components
 $scrollbar-width: px2rem(17px) !default;
 
-$Layout-aside-width: px2rem(200px)  !default;
+$Layout-aside-width: px2rem(200px) !default;
-$Layout-aside--sm-width: px2rem(150px)  !default;
+$Layout-aside--sm-width: px2rem(150px) !default;
-$Layout-aside--md-width: px2rem(250px)  !default;
+$Layout-aside--md-width: px2rem(250px) !default;
-$Layout-aside--lg-width: px2rem(300px)  !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;
 
@@ -155,18 +161,22 @@ $Layout-asideLink-onHover-color: #fff !default;
 $Layout-asideLink-onActive-color: #fff !default;
 $Layout-asideLink-arrowVendor: "FontAwesome" !default;
 $Layout-asideLink-arrowFontSize: $fontFamilyBase !default;
-$Layout-asideLink-arrowIcon: "\f105"  !default;
+$Layout-asideLink-arrowIcon: "\f105" !default;
 $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),
-$Layout-nav-height: px2rem(40px)  !default;
+    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,16 +207,20 @@ $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;
-$Model-close-onHover-color: $text-color !default ;
+$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;
@@ -228,7 +242,7 @@ $Drawer-header-bg: darken($Drawer-bg, 2.5%) !default;
 $Drawer-title-fontSize: $fontSizeMd !default;
 $Drawer-title-fontColor: $text--loud-color !default;
 $Drawer-close-color: rgba(255, 255, 255, 0.8) !default;
-$Drawer-close-onHover-color: rgba(255, 255, 255, 1) !default ;
+$Drawer-close-onHover-color: rgba(255, 255, 255, 1) !default;
 $Drawer-body-padding: $gap-base !default;
 $Drawer-footer-padding: $gap-base !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;
@@ -272,12 +286,12 @@ $Tooltip--attr-borderWidth: 0 !default;
 $Tooltip--attr-borderColor: $borderColor !default;
 $Tooltip--attr-borderRadius: $borderRadius !default;
 $Tooltip--attr-boxShadow: $boxShadow !default;
-$Tooltip--attr-fontSize: $fontSizeSm !default; 
+$Tooltip--attr-fontSize: $fontSizeSm !default;
 $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;
@@ -285,7 +299,7 @@ $Toast-box-shadow: $boxShadow !default;
 $Toast-borderRadius: $borderRadiusLg !default;
 $Toast-paddingY: $gap-base !default;
 $Toast-paddingX: $gap-base !default;
-$Toast-paddingL: px2rem(40px)!default;
+$Toast-paddingL: px2rem(40px) !default;
 $Toast--info-paddingL: $Toast-paddingL !default;
 $Toast-border-width: 0 !default;
 $Toast-icon-fontSize: px2rem(30px) !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;
@@ -362,8 +384,8 @@ $Tabs-color: $text-color !default;
 $Tabs-onDisabled-color: $gray600 !default;
 $Tabs-onHover-borderColor: $gray200 !default;
 $Tabs-onActive-color: $gray700 !default;
-$Tabs-onActive-borderColor:  $gray300 !default;
+$Tabs-onActive-borderColor: $gray300 !default;
-$Tabs-onActive-borderBottomColor:  transparent !default;
+$Tabs-onActive-borderBottomColor: transparent !default;
 $Tabs-onActive-borderBottomWidth: initial !default;
 $Tabs-onActive-bg: $background !default;
 $Tabs-content-bg: $background !default;
@@ -372,11 +394,11 @@ $Tabs-content-bg: $background !default;
 $Nav-item-fontSize: $fontSizeBase !default;
 $Nav-item-borderRadius: $borderRadiusMd !default;
 $Nav-item-color: $text-color !default;
-$Nav-item-onHover-color: $text--loud-color!default;
+$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,12 +431,13 @@ $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;
 
-$Table-strip-bg: lighten(#f6f8f8 , 1%) !default;
+$Table-strip-bg: lighten(#f6f8f8, 1%) !default;
 $Table-onHover-bg: darken($Table-strip-bg, 2%) !default;
 $Table-onHover-borderColor: darken($Table-onHover-bg, 10%) !default;
 $Table-onHover-color: $text-color !default;
@@ -423,17 +446,22 @@ $Table-onHover-boxShadow: $boxShadow !default;
 $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-bg: darken($Table-onChecked-bg, 5%) !default;
-$Table-onChecked-onHover-borderColor: darken($Table-onChecked-borderColor, 5%)!default;
+$Table-onChecked-onHover-borderColor: darken(
-$Table-onChecked-onHover-color: darken($Table-onChecked-color, 5%)!default;
+    $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-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-color: darken($Table-onModified-color, 5%)!default;
+    $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;
@@ -517,7 +543,7 @@ $QuickEdit-onFocus-borderWidth: $borderWidth !default;
 $Copyable-iconColor: $text--muted-color !default;
 $Copyable-onHover-iconColor: $text-color !default;
 
-// PopOverAble 
+// PopOverAble
 
 $PopOverAble-iconColor: $text--muted-color !default;
 $PopOverAble-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;
@@ -578,14 +603,19 @@ $Form-input-onError-bg: $Form-input-bg !default;
 $Form-input-onDisabled-borderColor: $Form-input-borderColor;
 $Form-input-onDisabled-bg: $gray200 !default;
 $Form-input-height: px2rem(34px) !default;
-$Form-input-placeholderColor: $text--muted-color!default;
+$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;
@@ -597,7 +627,7 @@ $Number-borderWidth: $Form-input-borderWidth !default;
 $Number-borderRadius: $Form-input-borderRadius !default;
 $Number-handler-mode: "vertical" !default;
 $Number-handler-width: px2rem(20px) !default;
-$Number-handler-color: $Form-input-color!default;
+$Number-handler-color: $Form-input-color !default;
 $Number-handler-onDisabled-color: $text--muted-color !default;
 $Number-handler-fontFamily: inherit !default;
 $Number-handler-fontSize: $fontSizeBase !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;
@@ -858,19 +928,20 @@ $Switch-onDisabled-color: #fff !default;
 $ColorPicker-color: $Form-input-color !default;
 $ColorPicker-bg: $white !default;
 $ColorPicker-onHover-bg: darken($ColorPicker-bg, 5%) !default;
-$ColorPicker-onDisabled-bg: $gray200!default;
+$ColorPicker-onDisabled-bg: $gray200 !default;
 $ColorPicker-onDisabled-color: $text--muted-color !default;
 $ColorPicker-borderWidth: $Form-input-borderWidth !default;
 $ColorPicker-borderColor: $Form-input-borderColor !default;
-$ColorPicker-borderRadius:  $Form-input-borderRadius !default;
+$ColorPicker-borderRadius: $Form-input-borderRadius !default;
 $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;
+$ColorPicker-onFocused-borderColor: $Form-input-onFocused-borderColor !default;
-
 
 // datepicker
 $DatePicker-color: $Form-input-color !default;
@@ -878,27 +949,28 @@ $DatePicker-bg: $white !default;
 $DatePicker-onHover-bg: darken($DatePicker-bg, 5%) !default;
 $DatePicker-borderWidth: $Form-input-borderWidth !default;
 $DatePicker-borderColor: $Form-input-borderColor !default;
-$DatePicker-borderRadius:  $Form-input-borderRadius !default;
+$DatePicker-borderRadius: $Form-input-borderRadius !default;
 $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;
-$DatePicker-onFocused-borderColor: $Form-input-onFocused-borderColor!default;
+$DatePicker-onFocused-borderColor: $Form-input-onFocused-borderColor !default;
 $DatePicker-toggler-vendor: "FontAwesome" !default;
 $DatePicker-toggler-fontSize: $Form-fontSize !default;
 $DatePicker-toggler-icon: "\f073" !default;
 $DatePicker-prevBtn-vendor: "FontAwesome" !default;
-$DatePicker-prevBtn-fontSize: $fontSizeMd!default;
+$DatePicker-prevBtn-fontSize: $fontSizeMd !default;
 $DatePicker-prevBtn-icon: "\f104" !default;
 $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,24 +1084,30 @@ $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;
 $Combo--vertical-item-onHover-borderColor: $info !default;
 $Combo--vertical-item-borderWidth: $borderWidth !default;
 $Combo--vertical-item-borderRadius: $borderRadius !default;
-$Combo--vertical-item-paddingX: px2rem(10px)!default;
+$Combo--vertical-item-paddingX: px2rem(10px) !default;
-$Combo--vertical-item-paddingY: px2rem(10px)!default;
+$Combo--vertical-item-paddingY: px2rem(10px) !default;
 
 $Combo--vertical-itemToolbar-height: px2rem(25px) !default;
 $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;
@@ -1165,7 +1275,7 @@ $TransferSelect-heading-borderBottom: $borderWidth solid $borderColor !default;
 
 // Tree
 $Tree-indent: px2rem(20px) !default;
-$Tree-itemArrowWidth: px2rem(10px)!default;
+$Tree-itemArrowWidth: px2rem(10px) !default;
 $Tree-arrowVendor: "FontAwesome" !default;
 $Tree-unfoldedArrowContent: "\f107" !default;
 $Tree-foldedArrowContent: "\f105" !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;
@@ -1223,4 +1333,4 @@ $Audio-thumb-marginTop: px2rem(-5px) !default;
 $Audio-svg-width: px2rem(20px) !default;
 $Audio-svg-height: px2rem(20px) !default;
 $Audio-svg-top: px2rem(6px) !default;
-$Audio-item-margin: px2rem(10px) !default;
+$Audio-item-margin: px2rem(10px) !default;

scss/base/_normalize.scss

@@ -8,334 +8,334 @@
  * 2. Prevent adjustments of font size after orientation changes in iOS.
  */
 
- html {
+html {
-    line-height: 1.15; /* 1 */
+    line-height: 1.15; // 1
-    -webkit-text-size-adjust: 100%; /* 2 */
+    -webkit-text-size-adjust: 100%; //2
-  }
+}
-  
+
-  /* Sections
+/* Sections
      ========================================================================== */
-  
+
-  /**
+/**
    * Remove the margin in all browsers.
    */
-  
+
-  body {
+body {
     margin: 0;
-  }
+}
-  
+
-  /**
+/**
    * Correct the font size and margin on `h1` elements within `section` and
    * `article` contexts in Chrome, Firefox, and Safari.
    */
-  
+
-  h1 {
+h1 {
     font-size: 2em;
     margin: 0.67em 0;
-  }
+}
-  
+
-  /* Grouping content
+/* Grouping content
      ========================================================================== */
-  
+
-  /**
+/**
    * 1. Add the correct box sizing in Firefox.
    * 2. Show the overflow in Edge and IE.
    */
-  
+
-  hr {
+hr {
-    box-sizing: content-box; /* 1 */
+    box-sizing: content-box; // 1
-    height: 0; /* 1 */
+    height: 0; // 2
-    overflow: visible; /* 2 */
+    overflow: visible; //2
-  }
+}
-  
+
-  /**
+/**
    * 1. Correct the inheritance and scaling of font size in all browsers.
    * 2. Correct the odd `em` font sizing in all browsers.
    */
-  
+
-  pre {
+pre {
-    font-family: monospace, monospace; /* 1 */
+    font-family: monospace, monospace; // 1
-    font-size: 1em; /* 2 */
+    font-size: 1em; // 2
-  }
+}
-  
+
-  /* Text-level semantics
+/* Text-level semantics
      ========================================================================== */
-  
+
-  /**
+/**
    * Remove the gray background on active links in IE 10.
    */
-  
+
-  a {
+a {
     background-color: transparent;
-  }
+}
-  
+
-  /**
+/**
    * 1. Remove the bottom border in Chrome 57-
    * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
    */
-  
+
-  abbr[title] {
+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
-  }
+}
-  
+
-  /**
+/**
    * Add the correct font weight in Chrome, Edge, and Safari.
    */
-  
+
-  b,
+b,
-  strong {
+strong {
     font-weight: bolder;
-  }
+}
-  
+
-  /**
+/**
    * 1. Correct the inheritance and scaling of font size in all browsers.
    * 2. Correct the odd `em` font sizing in all browsers.
    */
-  
+
-  code,
+code,
-  kbd,
+kbd,
-  samp {
+samp {
-    font-family: monospace, monospace; /* 1 */
+    font-family: monospace, monospace; // 1
-    font-size: 1em; /* 2 */
+    font-size: 1em; // 2
-  }
+}
-  
+
-  /**
+/**
    * Add the correct font size in all browsers.
    */
-  
+
-  small {
+small {
     font-size: 80%;
-  }
+}
-  
+
-  /**
+/**
    * Prevent `sub` and `sup` elements from affecting the line height in
    * all browsers.
    */
-  
+
-  sub,
+sub,
-  sup {
+sup {
     font-size: 75%;
     line-height: 0;
     position: relative;
     vertical-align: baseline;
-  }
+}
-  
+
-  sub {
+sub {
     bottom: -0.25em;
-  }
+}
-  
+
-  sup {
+sup {
     top: -0.5em;
-  }
+}
-  
+
-  /* Embedded content
+/* Embedded content
      ========================================================================== */
-  
+
-  /**
+/**
    * Remove the border on images inside links in IE 10.
    */
-  
+
-  img {
+img {
     border-style: none;
-  }
+}
-  
+
-  /* Forms
+/* Forms
      ========================================================================== */
-  
+
-  /**
+/**
    * 1. Change the font styles in all browsers.
    * 2. Remove the margin in Firefox and Safari.
    */
-  
+
-  button,
+button,
-  input,
+input,
-  optgroup,
+optgroup,
-  select,
+select,
-  textarea {
+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
-  }
+}
-  
+
-  /**
+/**
    * Show the overflow in IE.
    * 1. Show the overflow in Edge.
    */
-  
+
-  button,
+button,
-  input { /* 1 */
+input {
-    overflow: visible;
+    overflow: visible; // 1
-  }
+}
-  
+
-  /**
+/**
    * Remove the inheritance of text transform in Edge, Firefox, and IE.
    * 1. Remove the inheritance of text transform in Firefox.
    */
-  
+
-  button,
+button,
-  select { /* 1 */
+select {
-    text-transform: none;
+    text-transform: none; // 1
-  }
+}
-  
+
-  /**
+/**
    * Correct the inability to style clickable types in iOS and Safari.
    */
-  
+
-  button,
+button,
-  [type="button"],
+[type="button"],
-  [type="reset"],
+[type="reset"],
-  [type="submit"] {
+[type="submit"] {
     -webkit-appearance: button;
-  }
+}
-  
+
-  /**
+/**
    * Remove the inner border and padding in Firefox.
    */
-  
+
-  button::-moz-focus-inner,
+button::-moz-focus-inner,
-  [type="button"]::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
-  [type="reset"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
-  [type="submit"]::-moz-focus-inner {
+[type="submit"]::-moz-focus-inner {
     border-style: none;
     padding: 0;
-  }
+}
-  
+
-  /**
+/**
    * Restore the focus styles unset by the previous rule.
    */
-  
+
-  button:-moz-focusring,
+button:-moz-focusring,
-  [type="button"]:-moz-focusring,
+[type="button"]:-moz-focusring,
-  [type="reset"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
-  [type="submit"]:-moz-focusring {
+[type="submit"]:-moz-focusring {
     outline: 1px dotted ButtonText;
-  }
+}
-  
+
-  /**
+/**
    * Correct the padding in Firefox.
    */
-  
+
-  fieldset {
+fieldset {
     padding: 0.35em 0.75em 0.625em;
-  }
+}
-  
+
-  /**
+/**
    * 1. Correct the text wrapping in Edge and IE.
    * 2. Correct the color inheritance from `fieldset` elements in IE.
    * 3. Remove the padding so developers are not caught out when they zero out
    *    `fieldset` elements in all browsers.
    */
-  
+
-  legend {
+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
-  }
+}
-  
+
-  /**
+/**
    * Add the correct vertical alignment in Chrome, Firefox, and Opera.
    */
-  
+
-  progress {
+progress {
     vertical-align: baseline;
-  }
+}
-  
+
-  /**
+/**
    * Remove the default vertical scrollbar in IE 10+.
    */
-  
+
-  textarea {
+textarea {
     overflow: auto;
-  }
+}
-  
+
-  /**
+/**
    * 1. Add the correct box sizing in IE 10.
    * 2. Remove the padding in IE 10.
    */
-  
+
-  [type="checkbox"],
+[type="checkbox"],
-  [type="radio"] {
+[type="radio"] {
-    box-sizing: border-box; /* 1 */
+    box-sizing: border-box; // 1
-    padding: 0; /* 2 */
+    padding: 0; // 2
-  }
+}
-  
+
-  /**
+/**
    * Correct the cursor style of increment and decrement buttons in Chrome.
    */
-  
+
-  [type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-inner-spin-button,
-  [type="number"]::-webkit-outer-spin-button {
+[type="number"]::-webkit-outer-spin-button {
     height: auto;
-  }
+}
-  
+
-  /**
+/**
    * 1. Correct the odd appearance in Chrome and Safari.
    * 2. Correct the outline style in Safari.
    */
-  
+
-  [type="search"] {
+[type="search"] {
-    -webkit-appearance: textfield; /* 1 */
+    -webkit-appearance: textfield; // 1
-    outline-offset: -2px; /* 2 */
+    outline-offset: -2px; // 2
-  }
+}
-  
+
-  /**
+/**
    * Remove the inner padding in Chrome and Safari on macOS.
    */
-  
+
-  [type="search"]::-webkit-search-decoration {
+[type="search"]::-webkit-search-decoration {
     -webkit-appearance: none;
-  }
+}
-  
+
-  /**
+/**
    * 1. Correct the inability to style clickable types in iOS and Safari.
    * 2. Change font properties to `inherit` in Safari.
    */
-  
+
-  ::-webkit-file-upload-button {
+::-webkit-file-upload-button {
-    -webkit-appearance: button; /* 1 */
+    -webkit-appearance: button; // 1
-    font: inherit; /* 2 */
+    font: inherit; // 2
-  }
+}
-  
+
-  /* Interactive
+/* Interactive
      ========================================================================== */
-  
+
-  /*
+/*
    * Add the correct display in Edge, IE 10+, and Firefox.
    */
-  
+
-  details {
+details {
     display: block;
-  }
+}
-  
+
-  /*
+/*
    * Add the correct display in all browsers.
    */
-  
+
-  summary {
+summary {
     display: list-item;
-  }
+}
-  
+
-  /* Misc
+/* Misc
      ========================================================================== */
-  
+
-  /**
+/**
    * Add the correct display in IE 10+.
    */
-  
+
-  template {
+template {
     display: none;
-  }
+}
-  
+
-  /**
+/**
    * Add the correct display in IE 10.
    */
-  
+
-  [hidden] {
+[hidden] {
     display: none;
-  }
+}

scss/base/_reset.scss

@@ -15,4 +15,4 @@ html {
 // Remove figure margin
 figure {
     margin: 0;
-}
+}

scss/base/_typography.scss

@@ -1,11 +1,11 @@
 /**
  * Basic typography style for copy text
  */
- html {
+html {
     font-size: $remFactor;
- }
+}
 
- body {
+body {
     color: $body-color;
     background-color: $body-bg;
     font-size: $body-size;
@@ -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;
@@ -38,4 +43,4 @@ h1, h2, h3, h4, h5, h6 {
 
 .is-matched {
     color: $danger;
-}
+}

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  {
+        &:hover {
             color: #000;
             text-decoration: none;
             cursor: pointer;
             filter: alpha(opacity=50);
-            opacity: .5;
+            opacity: 0.5;
         }
     }
 
@@ -53,4 +53,4 @@
         background-color: $Alert--warning-bg;
         border-color: $Alert--warning-borderColor;
     }
-}
+}

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();
         }
 
@@ -137,4 +146,4 @@
             @include svg();
         }
     }
-}
+}

scss/components/_button-group.scss

@@ -3,39 +3,44 @@
     display: inline-flex;
     vertical-align: middle;
 
-    >.#{$ns}Button {
+    > .#{$ns}Button {
         position: relative;
         flex: 0 1 auto;
     }
 
-    @if $Button-borderWidth > 0 {
+    @if $Button-borderWidth>0 {
-        >.#{$ns}Button {
+        > .#{$ns}Button {
             @include hover {
                 z-index: 1;
             }
-    
+
             &:focus,
             &:active,
             &.active {
                 z-index: 1;
             }
         }
-    
+
         .#{$ns}Button + .#{$ns}Button,
         .#{$ns}Button + .#{$ns}ButtonGroup,
         .#{$ns}ButtonGroup + .#{$ns}Button,
         .#{$ns}ButtonGroup + .#{$ns}ButtonGroup {
             margin-left: -$Button-borderWidth;
         }
-    } @else if (variable-exists("ButtonGroup-divider-width") and variable-exists("ButtonGroup-divider-color")) {
+    } @else if
+        (
+            variable-exists("ButtonGroup-divider-width") and
+                variable-exists("ButtonGroup-divider-color")
+        )
+    {
         background-color: $ButtonGroup-divider-color;
-        >.#{$ns}Button + .#{$ns}Button {
+
+        > .#{$ns}Button + .#{$ns}Button {
             margin-left: $ButtonGroup-divider-width;
         }
     }
 }
 
-
 .#{$ns}ButtonToolbar {
     display: inline-flex;
     flex-wrap: wrap;
@@ -52,7 +57,7 @@
         margin-left: 0;
     }
 
-    @if $Button-borderWidth > 0 {
+    @if $Button-borderWidth>0 {
         > .#{$ns}Button:not(:last-child),
         > .#{$ns}ButtonGroup:not(:last-child) > .#{$ns}Button {
             border-top-right-radius: 0;
@@ -67,7 +72,6 @@
     }
 }
 
-
 .#{$ns}ButtonGroup--vertical {
     flex-direction: column;
     align-items: flex-start;
@@ -99,7 +103,6 @@
     }
 }
 
-
 .#{$ns}ButtonGroupControl {
     display: inline-block;
 
@@ -110,4 +113,4 @@
     > .#{$ns}ButtonGroup--xs {
         margin-top: ($Form-input-height - $Button--xs-height) / 2;
     }
-}
+}

scss/components/_button.scss

@@ -1,4 +1,3 @@
-
 .#{$ns}Button {
     display: inline-block;
     font-weight: $Button-fontWeight;
@@ -10,11 +9,18 @@
     transition: $Button-transition;
     white-space: nowrap;
 
-    @if $Button-mimWidth != auto {
+    @if $Button-mimWidth !=auto {
         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;
@@ -67,16 +73,16 @@
         line-height: inherit;
     }
 
-    >.fa,
+    > .fa,
-    >.iconfont,
+    > .iconfont,
-    >.glyphicon {
+    > .glyphicon {
         font-size: inherit;
     }
 }
 
 a.#{$ns}Button.is-disabled,
 fieldset:disabled a.#{$ns}Button {
-  pointer-events: none;
+    pointer-events: none;
 }
 
 .#{$ns}Button--primary {
@@ -207,10 +213,10 @@ fieldset:disabled a.#{$ns}Button {
 
 .#{$ns}Button--xs {
     @include button-size(
-        $Button--xs-paddingY, 
+        $Button--xs-paddingY,
-        $Button--xs-paddingX, 
+        $Button--xs-paddingX,
-        $Button--xs-fontSize, 
+        $Button--xs-fontSize,
-        $Button--xs-lineHeight, 
+        $Button--xs-lineHeight,
         $Button--sm-borderRadius,
         $Button--xs-height
     );
@@ -222,10 +228,10 @@ fieldset:disabled a.#{$ns}Button {
 
 .#{$ns}Button--sm {
     @include button-size(
-        $Button--sm-paddingY, 
+        $Button--sm-paddingY,
-        $Button--sm-paddingX, 
+        $Button--sm-paddingX,
-        $Button--sm-fontSize, 
+        $Button--sm-fontSize,
-        $Button--sm-lineHeight, 
+        $Button--sm-lineHeight,
         $Button--sm-borderRadius,
         $Button--sm-height
     );
@@ -237,10 +243,10 @@ fieldset:disabled a.#{$ns}Button {
 
 .#{$ns}Button--md {
     @include button-size(
-        $Button--md-paddingY, 
+        $Button--md-paddingY,
-        $Button--md-paddingX, 
+        $Button--md-paddingX,
-        $Button--md-fontSize, 
+        $Button--md-fontSize,
-        $Button--md-lineHeight, 
+        $Button--md-lineHeight,
         $Button-borderRadius,
         $Button--md-height
     );
@@ -252,10 +258,10 @@ fieldset:disabled a.#{$ns}Button {
 
 .#{$ns}Button--lg {
     @include button-size(
-        $Button--lg-paddingY, 
+        $Button--lg-paddingY,
-        $Button--lg-paddingX, 
+        $Button--lg-paddingX,
-        $Button--lg-fontSize, 
+        $Button--lg-fontSize,
-        $Button--lg-lineHeight, 
+        $Button--lg-lineHeight,
         $Button--lg-borderRadius,
         $Button--lg-height
     );
@@ -267,7 +273,7 @@ fieldset:disabled a.#{$ns}Button {
 
 .#{$ns}Button--iconOnly {
     min-width: $Button-height * $Button--iconOnly-minWidthRate;
-    
+
     &:not(.#{$ns}Button--link) {
         > .fa,
         > .iconfont {
@@ -280,7 +286,6 @@ fieldset:disabled a.#{$ns}Button {
     }
 }
 
-
 .#{$ns}Button--link {
     width: auto;
     min-width: auto;
@@ -305,8 +310,8 @@ fieldset:disabled a.#{$ns}Button {
 .#{$ns}Button--block {
     display: block;
     width: 100%;
-    
+
-    +.#{$ns}Button--block {
+    + .#{$ns}Button--block {
         margin-top: $gap-base;
     }
 }
@@ -329,4 +334,4 @@ input[type="button"] {
 
 .#{$ns}Button--disabled-wrap {
     display: inline-block !important;
-}
+}

scss/components/_card.scss

@@ -134,7 +134,7 @@
         border-color: $Card-onChecked-borderColor;
         color: $Card-onChecked-color;
 
-        .#{$ns}Card-actions, 
+        .#{$ns}Card-actions,
         .#{$ns}Card-actions > a {
             border-color: $Card-onChecked-borderColor;
             color: $Card-onChecked-color;
@@ -156,7 +156,7 @@
         border-color: $Card-onModified-borderColor;
         color: $Card-onModified-color;
 
-        .#{$ns}Card-actions, 
+        .#{$ns}Card-actions,
         .#{$ns}Card-actions > a {
             border-color: $Card-onModified-borderColor;
             color: $Card-onModified-color;
@@ -173,6 +173,6 @@
     }
 
     .is-dragging > & {
-       opacity: $Card-onDragging-opacity;
+        opacity: $Card-onDragging-opacity;
     }
-}
+}

scss/components/_cards.scss

@@ -3,12 +3,11 @@
         @include clearfix();
         padding: $Cards-toolbar-paddingY $Cards-toolbar-paddingX;
         margin-bottom: $gap-base;
-        
     }
 
     &-actions {
         display: inline-block;
-        
+
         > * {
             margin-right: $Crud-toolbar-gap;
         }
@@ -74,13 +73,14 @@
         text-align: center;
         height: $Cards-placeholder-height;
         line-height: $Cards-placeholder-height;
-        
+
         border: $Card-borderWidth solid $Card-borderColor;
         border-radius: $Card-borderRadius;
     }
 
     &--masonry {
         display: block;
+
         &:after {
             content: none;
         }
@@ -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,19 +160,24 @@
     .#{$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,10 +1,11 @@
 .#{$ns}Chart {
     min-height: 300px;
     position: relative;
+
     &-placeholder {
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
     }
-}
+}

scss/components/_collapse.scss

@@ -16,9 +16,9 @@
         text-align: center;
         margin-left: $gap-xs;
         cursor: pointer;
-        
+
         &:before {
-            content: '';
+            content: "";
             position: relative;
             display: inline-block;
             width: px2rem(6px);
@@ -39,4 +39,4 @@
     &--collapsable &-header {
         user-select: none;
     }
-}
+}

scss/components/_copyable.scss

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

scss/components/_crud.scss

@@ -127,4 +127,4 @@
             margin-left: $Crud-toolbar-gap;
         }
     }
-}
+}

scss/components/_divider.scss

@@ -3,4 +3,4 @@
     border-bottom: $borderWidth dashed $borderColor;
     height: px2rem(2px);
     font-size: 0;
-}
+}

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;
 
@@ -314,4 +316,4 @@
         width: px2rem(12px);
         height: px2rem(20px);
     }
-}
+}

scss/components/_dropdown.scss

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

scss/components/_list.scss

@@ -14,7 +14,7 @@
 
     &-actions {
         display: inline-block;
-        
+
         > * {
             margin-right: $Crud-toolbar-gap;
         }
@@ -84,7 +84,7 @@
 
 .#{$ns}ListItem {
     @include clearfix();
-    
+
     & + & {
         border-top: $ListItem-borderWidth solid $ListItem-borderColor;
     }
@@ -173,4 +173,4 @@
     &.is-dragging {
         opacity: $ListItem-onDragging-opacity;
     }
-}
+}

scss/components/_modal.scss

@@ -66,7 +66,7 @@
         background-color: $Modal-header-bg;
         @include clearfix();
         border-bottom: $Modal-body-borderTop;
-        
+
         @if $Modal-content-borderRadius {
             border-top-left-radius: $Modal-content-borderRadius;
             border-top-right-radius: $Modal-content-borderRadius;
@@ -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;
     }
@@ -140,10 +143,12 @@
     }
 }
 
-@for $i from (2) through 10  {
+@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;
         }
     }
 }
@@ -182,4 +187,4 @@
 
 .#{$ns}Dialog-error {
     color: $danger;
-}
+}

scss/components/_nav.scss

@@ -2,12 +2,15 @@
     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 {
+
+            > a {
                 font-size: $Nav-item-fontSize;
                 display: block;
                 outline: none;
@@ -20,20 +23,23 @@
                 padding: $gap-sm $gap-base;
                 cursor: pointer;
             }
-            &:hover>a,
+
-            >a:focus {
+            &:hover > a,
+            > a:focus {
                 border-color: $Tabs-onHover-borderColor;
                 text-decoration: none;
             }
-            &.disabled>a,
+
-            &.is-disabled>a {
+            &.disabled > a,
+            &.is-disabled > a {
                 color: $Tabs-onDisabled-color;
                 background-color: transparent;
                 border-color: transparent;
                 pointer-events: none;
             }
-            &.active>a,
+
-            &.is-active>a {
+            &.active > a,
+            &.is-active > a {
                 color: $Tabs-onActive-color;
                 background-color: $Tabs-onActive-bg;
                 border-color: $Tabs-onActive-borderColor;
@@ -41,14 +47,17 @@
                 border-bottom-width: $Tabs-onActive-borderBottomWidth;
             }
         }
+
         .#{$ns}Nav-itemIcon {
             margin-right: $gap-xs;
         }
     }
+
     &--stacked {
         .#{$ns}Nav-item {
             position: relative;
-            >a {
+
+            > a {
                 display: block;
                 outline: none;
                 color: $Nav-item-color;
@@ -58,33 +67,39 @@
                 background-color: $Nav-item-bg;
                 border-radius: $Nav-item-borderRadius;
             }
-            &:hover>a,
+
-            >a:focus {
+            &:hover > a,
+            > a:focus {
                 border-color: $Nav-item-onHover-color;
                 text-decoration: none;
                 background-color: $Nav-item-onHover-bg;
             }
-            &.disabled>a,
+
-            &.is-disabled>a {
+            &.disabled > a,
+            &.is-disabled > a {
                 color: $Nav-item-onDisabled-color;
                 background-color: transparent;
                 pointer-events: none;
             }
-            &.active>a,
+
-            &.is-active>a {
+            &.active > a,
+            &.is-active > a {
                 color: $Nav-item-onActive-color;
                 background-color: $Nav-item-onActive-bg;
                 border-left: $Nav-item-onActive-borderLeft;
                 padding-left: px2rem(12px);
             }
+
             &.is-unfolded {
                 .#{$ns}Nav-itemToggler {
                     transform: rotate(180deg) scale(0.8);
                 }
+
                 .#{$ns}Nav-subItems {
                     display: block;
                 }
             }
+
             .#{$ns}Nav-itemToggler {
                 position: absolute;
                 width: px2rem(30px);
@@ -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,11 +133,12 @@
                     margin-right: px2rem(8px);
                     vertical-align: middle;
                 }
-                &.active>a:before,
+
-                &.is-active>a:before {
+                &.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;
@@ -24,18 +23,18 @@
         width: 100%;
         border-spacing: 0;
 
-        .#{$ns}Page-header, 
+        .#{$ns}Page-header,
         .#{$ns}Page-toolbar {
             display: table-cell;
             vertical-align: middle;
         }
-        
+
         .#{$ns}Page-toolbar {
             text-align: right;
             padding-right: $gap-base;
         }
     }
-    
+
     &-title {
         margin: 0;
         padding: 0;
@@ -51,7 +50,6 @@
     &-asideTplWrapper {
         padding: $gap-xs;
     }
-    
 }
 
 .#{$ns}Page-aside {
@@ -78,7 +76,7 @@
     height: 100%;
     border-spacing: 0;
 
-    .#{$ns}Page-aside, 
+    .#{$ns}Page-aside,
     .#{$ns}Page-content {
         display: table-cell;
         vertical-align: top;
@@ -93,4 +91,4 @@
     .#{$ns}Button + .#{$ns}Button {
         margin-left: $gap-xs;
     }
-}
+}

scss/components/_pagination.scss

@@ -3,10 +3,12 @@
     padding-left: 0;
     margin-bottom: px2rem(-10px);
     border-radius: px2rem(4px);
-    >li {
+
+    > li {
         display: inline;
-        >a,
+
-        >span {
+        > a,
+        > span {
             user-select: none;
             position: relative;
             float: left;
@@ -22,68 +24,80 @@
             margin-left: 0;
             font-size: $Pagination-fontSize;
         }
-        >a:hover,
+
-        >span:hover,
+        > a:hover,
-        >a:focus,
+        > span:hover,
-        >span:focus {
+        > a:focus,
+        > span:focus {
             background-color: transparent;
             color: $primary;
         }
     }
-    >li.disabled {
+
-        >span,
+    > li.disabled {
-        >a {
+        > span,
+        > a {
             cursor: not-allowed;
         }
-        >a,
+
-        >span,
+        > a,
-        >a:hover,
+        > span,
-        >span:hover,
+        > a:hover,
-        >a:focus,
+        > span:hover,
-        >span:focus {
+        > a:focus,
+        > span:focus {
             color: #cccccc;
         }
     }
-    >li.active {
+
-        >a,
+    > li.active {
-        >span,
+        > a,
-        >a:hover,
+        > span,
-        >span:hover,
+        > a:hover,
-        >a:focus,
+        > span:hover,
-        >span:focus {
+        > a:focus,
+        > span:focus {
             background-color: $primary;
             color: $white;
         }
     }
+
     &-prev,
     &-next {
         font-family: $Pagination-arrowVendor;
     }
+
     &-prev {
-        >span {
+        > span {
             cursor: pointer;
+
             &::before {
                 content: $Pagination-prevArrowContent;
             }
         }
     }
+
     &-ellipsis {
-        >a>span {
+        > a > span {
             position: relative;
             top: px2rem(-4px);
         }
     }
+
     &-next {
-        >span {
+        > 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);
@@ -103,4 +119,4 @@
             padding: 0 px2rem(10px);
         }
     }
-}
+}

scss/components/_panel.scss

@@ -22,108 +22,135 @@
     /* 主题 */
     &--default {
         border-color: $borderColor;
-        >.#{$ns}Panel-heading {
+
+        > .#{$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 {
+
+        > .#{$ns}Panel-heading {
             border-color: $Panel--default-headingBorderColor;
         }
     }
+
     &--primary {
         border-color: $primary;
-        >.#{$ns}Panel-heading {
+
+        > .#{$ns}Panel-heading {
             background-color: $primary;
             color: $white;
+
             .badge {
                 color: $primary;
-                background-color: $white
+                background-color: $white;
             }
         }
-        >.#{$ns}Panel-heading,
+
-        >.#{$ns}Panel-footer {
+        > .#{$ns}Panel-heading,
+        > .#{$ns}Panel-footer {
             border-color: $primary;
         }
     }
+
     &--success {
         border-color: $success;
-        >.#{$ns}Panel-heading {
+
+        > .#{$ns}Panel-heading {
             background-color: $success;
             color: $white;
+
             .badge {
                 color: $success;
-                background-color: $white
+                background-color: $white;
             }
         }
-        >.#{$ns}Panel-heading,
+
-        >.#{$ns}Panel-footer {
+        > .#{$ns}Panel-heading,
+        > .#{$ns}Panel-footer {
             border-color: $success;
         }
     }
+
     &--info {
         border-color: $info;
-        >.#{$ns}Panel-heading {
+
+        > .#{$ns}Panel-heading {
             background-color: $info;
             color: $white;
+
             .badge {
                 color: $info;
-                background-color: $white
+                background-color: $white;
             }
         }
-        >.#{$ns}Panel-heading,
+
-        >.#{$ns}Panel-footer {
+        > .#{$ns}Panel-heading,
+        > .#{$ns}Panel-footer {
             border-color: $info;
         }
     }
+
     &--warning {
         border-color: $warning;
-        >.#{$ns}Panel-heading {
+
+        > .#{$ns}Panel-heading {
             background-color: $warning;
             color: $white;
+
             .badge {
                 color: $warning;
-                background-color: $white
+                background-color: $white;
             }
         }
-        >.#{$ns}Panel-heading,
+
-        >.#{$ns}Panel-footer {
+        > .#{$ns}Panel-heading,
+        > .#{$ns}Panel-footer {
             border-color: $warning;
         }
     }
+
     &--danger {
         border-color: $danger;
-        >.#{$ns}Panel-heading {
+
+        > .#{$ns}Panel-heading {
             background-color: $danger;
             color: $white;
+
             .badge {
                 color: $danger;
-                background-color: $white
+                background-color: $white;
             }
         }
-        >.#{$ns}Panel-heading,
+
-        >.#{$ns}Panel-footer {
+        > .#{$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,14 +158,17 @@
         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;
@@ -33,10 +32,10 @@
         z-index: 1;
         bottom: 0;
         background: transparent;
-  
+
         & + * {
-          position: relative;
+            position: relative;
-          z-index: 2;
+            z-index: 2;
         }
     }
-}
+}

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);
@@ -29,4 +27,4 @@
         margin-bottom: 0;
         border: none;
     }
-}
+}

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);
@@ -44,4 +44,4 @@
         margin-bottom: 0;
         border: none;
     }
-}
+}

scss/components/_remark.scss

@@ -20,4 +20,4 @@
         background-color: $Remark-onHover-bg;
         border-color: $Remark-onHover-borderColor;
     }
-}
+}

scss/components/_service.scss

@@ -1,3 +1,3 @@
-.#{$ns}Service{
+.#{$ns}Service {
     position: relative;
-}
+}

scss/components/_spinner.scss

@@ -1,9 +1,10 @@
 @keyframes rotate {
     0% {
-      transform: rotate(0deg);
+        transform: rotate(0deg);
     }
+
     100% {
-      transform: rotate(359deg);
+        transform: rotate(359deg);
     }
 }
 
@@ -44,13 +45,12 @@
     }
 }
 
-
 @include media-breakpoint-up(md) {
-    .#{$ns}Layout .#{$ns}Page-body>.#{$ns}Spinner-overlay {
+    .#{$ns}Layout .#{$ns}Page-body > .#{$ns}Spinner-overlay {
         left: $Layout-aside-width;
     }
 
-    .#{$ns}Layout--folded .#{$ns}Page-body>.#{$ns}Spinner-overlay {
+    .#{$ns}Layout--folded .#{$ns}Page-body > .#{$ns}Spinner-overlay {
         left: $Layout-aside--folded-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,10 +62,11 @@
                 animation: animation-rolling_red 2s;
                 animation-iteration-count: infinite;
             }
+
             &::after {
                 font-family: "iconfont";
                 content: "\e632";
-                font-style:normal;
+                font-style: normal;
                 font-size: inherit;
                 color: $primary;
                 position: absolute;
@@ -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 {
@@ -124,16 +125,14 @@
 
     &-actions {
         display: inline-block;
-        
+
         > * {
             margin-right: $Crud-toolbar-gap;
         }
     }
 
-    
-
     &-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;
@@ -174,7 +176,7 @@
 
         > tbody > tr {
             border-top: $Table-borderWidth solid $Table-borderColor;
-            
+
             > td {
                 padding: $TableCell-paddingY $TableCell-paddingX;
                 vertical-align: top;
@@ -188,8 +190,9 @@
                 }
             }
 
-            @if $Table-strip-bg != transparent {
+            @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 {
+                .#{$ns}Table-expandCell + td {
+                    > 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;
             }
@@ -306,7 +312,7 @@
 
             // reset
             > tbody > tr {
-                @if $Table-strip-bg != transparent {
+                @if $Table-strip-bg !=transparent {
                     &.#{$ns}Table-tr--odd {
                         background-color: transparent;
                     }
@@ -351,7 +357,7 @@
             content: $TableCell-sortBtn--default-icon;
             font-family: $TableCell-sortBtn--default-iconVendor;
         }
-        
+
         &--up,
         &--down {
             display: none;
@@ -466,11 +472,16 @@
         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;
-        padding-left: px2rem(50px); 
+        padding-left: px2rem(50px);
         padding-right: $TableCell-paddingX;
         display: flex;
         align-items: center;
@@ -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%);
         }
     }
 }
@@ -531,4 +543,4 @@
     > .#{$ns}Button {
         margin: px2rem(3px);
     }
-}
+}

scss/components/_tabs.scss

@@ -1,10 +1,12 @@
 .#{$ns}Tabs {
     &-links {
         border-bottom: $Tabs-borderWidth solid $Tabs-borderColor;
-        >.#{$ns}Tabs-link {
+
+        > .#{$ns}Tabs-link {
             margin-bottom: -$Tabs-borderWidth;
             display: inline-block;
-            >a {
+
+            > a {
                 font-size: $Tabs-linkFontSize;
                 outline: none;
                 border: $Tabs-borderWidth solid transparent;
@@ -16,20 +18,23 @@
                 text-decoration: none;
                 cursor: pointer;
             }
-            &:hover>a,
+
-            >a:focus {
+            &:hover > a,
+            > a:focus {
                 border-color: $Tabs-onHover-borderColor;
                 text-decoration: none;
             }
-            &.disabled>a,
+
-            &.is-disabled>a {
+            &.disabled > a,
+            &.is-disabled > a {
                 color: $Tabs-onDisabled-color;
                 background-color: transparent;
                 border-color: transparent;
                 pointer-events: none;
             }
-            &.active>a,
+
-            &.is-active>a {
+            &.active > a,
+            &.is-active > a {
                 color: $Tabs-onActive-color;
                 background-color: $Tabs-onActive-bg;
                 border-color: $Tabs-onActive-borderColor;
@@ -37,30 +42,35 @@
             }
         }
     }
+
     &-content {
         background-color: $Tabs-content-bg;
         padding: $gap-base;
         border-style: solid;
         border-width: 0 $Tabs-borderWidth $Tabs-borderWidth;
         border-color: $Tabs-borderColor;
-    } 
+    }
+
     &--line {
-        >.#{$ns}Tabs-links {
+        > .#{$ns}Tabs-links {
             border-bottom-color: #e2e5ec;
-            >li {
+
+            > li {
                 &.active {
-                    >a,
+                    > a,
-                    >a:hover,
+                    > a:hover,
-                    >a:focus {
+                    > a:focus {
                         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,
-                >a:focus {
+                > a:hover,
+                > a:focus {
                     color: #666;
                     background-color: transparent;
                     border-color: transparent;
@@ -68,35 +78,40 @@
             }
         }
     }
+
     &--card {
-        >.#{$ns}Tabs-links {
+        > .#{$ns}Tabs-links {
             background-color: #eceff8;
             border-top: px2rem(1px) solid #e2e5ec;
-            >li {
+
+            > li {
                 &.active {
-                    >a,
+                    > a,
-                    >a:hover,
+                    > a:hover,
-                    >a:focus {
+                    > a:focus {
                         color: $primary;
                         background-color: #fff;
                         margin-left: px2rem(1px);
                     }
                 }
-                >a,
+
-                >a:hover,
+                > a,
-                >a:focus {
+                > a:hover,
+                > a:focus {
                     color: #666;
                     background-color: transparent;
                 }
             }
         }
     }
+
     &--radio {
-        >.#{$ns}Tabs-links {
+        > .#{$ns}Tabs-links {
             border: 0;
             margin-bottom: px2rem(10px);
-            >li {
+
-                >a {
+            > li {
+                > a {
                     font-size: $fontSizeSm;
                     text-align: center;
                     margin-right: 0;
@@ -104,25 +119,28 @@
                     height: px2rem(30px);
                     line-height: px2rem(30px);
                 }
+
                 &.active {
-                    >a,
+                    > a,
-                    >a:hover,
+                    > a:hover,
-                    >a:focus {
+                    > a:focus {
                         color: #fff;
                         background-color: $primary;
                         margin-left: px2rem(1px);
                     }
                 }
-                >a,
+
-                >a:hover,
+                > a,
-                >a:focus {
+                > a:hover,
+                > a:focus {
                     color: $primary;
                     background-color: #eaf6fe;
                 }
             }
         }
+
         .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,11 +63,12 @@
     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;
-    color: $Toast-color; 
+    color: $Toast-color;
     position: relative;
     opacity: $Toast-opacity;
     cursor: pointer;
@@ -67,7 +76,7 @@
     &:hover {
         opacity: 1;
     }
-    
+
     &.in {
         animation-duration: 0.75s;
         animation-name: bounceIn;
@@ -86,9 +95,11 @@
         display: $Toast-display;
         font-size: $fontSizeMd;
     }
+
     &-body {
         display: $Toast-display;
     }
+
     &::before {
         display: inline-block;
         font-family: $Toast-iconVendor;
@@ -98,13 +109,14 @@
         position: absolute;
         left: $Toast-paddingX;
         top: $Toast-paddingY;
-    } 
+    }
-    
+
     // colors
     &--error {
         color: $Toast--danger-color;
         border-color: $Toast--danger-borderColor;
         background-color: $Toast--danger-bgColor;
+
         &::before {
             content: $Toast--error-icon;
         }
@@ -114,30 +126,34 @@
         color: $Toast--warning-color;
         border-color: $Toast--warning-borderColor;
         background-color: $Toast--warning-bgColor;
+
         &::before {
             content: $Toast--warning-icon;
         }
-    } 
+    }
 
     &--info {
         color: $Toast--info-color;
         border-color: $Toast--info-borderColor;
         background-color: $Toast--info-bgColor;
-        padding: $Toast-paddingY $Toast-paddingX $Toast-paddingY ($Toast-paddingX + $Toast--info-paddingL);
+        padding: $Toast-paddingY $Toast-paddingX $Toast-paddingY
+            ($Toast-paddingX + $Toast--info-paddingL);
+
         &::before {
             content: $Toast--info-icon;
         }
-    } 
+    }
 
     &--success {
         color: $Toast--success-color;
         border-color: $Toast--success-borderColor;
         background-color: $Toast--success-bgColor;
+
         &::before {
             content: $Toast--success-icon;
         }
-    } 
+    }
-    
+
     // positions
     &-wrap--topRight {
         top: $gap-base;
@@ -170,4 +186,4 @@
         bottom: $gap-base;
         right: $gap-base;
     }
-}
+}

scss/components/_tooltip.scss

@@ -65,17 +65,18 @@
             margin-top: -$Tooltip-arrow-width/2;
             top: 50%;
         }
-    
+
         .#{$ns}Tooltip-arrow::before,
         .#{$ns}Tooltip-arrow::after {
-            border-width: ($Tooltip-arrow-width / 2) $Tooltip-arrow-height ($Tooltip-arrow-width / 2) 0;
+            border-width: ($Tooltip-arrow-width / 2) $Tooltip-arrow-height
+                ($Tooltip-arrow-width / 2) 0;
         }
-    
+
         .#{$ns}Tooltip-arrow::before {
             left: 0;
             border-right-color: $Tooltip-arrow-outerColor;
         }
-    
+
         .#{$ns}Tooltip-arrow::after {
             left: $Tooltip-borderWidth;
             border-right-color: $Tooltip-arrow-color;
@@ -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 {
@@ -128,17 +130,18 @@
             margin-top: -$Tooltip-arrow-width/2;
             top: 50%;
         }
-    
+
         .#{$ns}Tooltip-arrow::before,
         .#{$ns}Tooltip-arrow::after {
-            border-width: ($Tooltip-arrow-width / 2) 0 ($Tooltip-arrow-width / 2) $Tooltip-arrow-height;
+            border-width: ($Tooltip-arrow-width / 2) 0
+                ($Tooltip-arrow-width / 2) $Tooltip-arrow-height;
         }
-    
+
         .#{$ns}Tooltip-arrow::before {
             right: 0;
             border-left-color: $Tooltip-arrow-outerColor;
         }
-    
+
         .#{$ns}Tooltip-arrow::after {
             right: $Tooltip-borderWidth;
             border-left-color: $Tooltip-arrow-color;
@@ -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;
+        display: none !important;
     }
-}
+}

scss/components/_video.scss

@@ -1,16 +1,19 @@
 .#{$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 {
+        .#{$ns}Panel-footer > .#{$ns}Form-group,
+        .#{$ns}Panel-footer > .btn {
             margin-left: px2rem(5px);
         }
-        >ul.nav {
+
+        > 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 {
+
+        & + .#{$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,8 +250,9 @@
             // content: '';
             // }
         }
-        &+.#{$ns}Wizard-stepContent+.#{$ns}Panel-footer {
+
+        & + .#{$ns}Wizard-stepContent + .#{$ns}Panel-footer {
             clear: both;
         }
     }
-}
+}

scss/components/_wrapper.scss

@@ -20,4 +20,4 @@
     &--xl {
         padding: px2rem(50px);
     }
-}
+}

scss/components/form/_chained-select.scss

@@ -2,4 +2,4 @@
     .#{$ns}Select {
         margin-right: $gap-xs;
     }
-}
+}

scss/components/form/_checks.scss

@@ -1,4 +1,3 @@
-
 .#{$ns}Checkbox {
     margin: 0 $gap-sm 0 0;
     cursor: pointer;
@@ -21,10 +20,10 @@
         display: inline-block;
         vertical-align: middle;
         position: relative;
-        
+
         + span {
             margin-left: $Checkbox-gap;
-            
+
             &:empty {
                 display: none;
             }
@@ -44,25 +43,27 @@
 
     &--checkbox {
         padding-left: $Checkbox-size;
-    
+
         input {
             margin-left: -$Checkbox-size;
 
             &:checked + i {
                 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;
                 }
             }
-    
+
             &[disabled] + i {
                 border-color: lighten($Checkbox-color, 5%);
-    
+
                 &:before {
                     background-color: lighten($Checkbox-color, 5%);
                 }
@@ -87,10 +88,10 @@
             &:checked + i {
                 border-color: $Checkbox-onHover-color;
                 background-color: $Checkbox-onHover-color;
-    
+
                 &:before {
                     // todo 后面自动计算
-                    @if $ns == 'cxd-' {
+                    @if $ns== "cxd-" {
                         top: px2rem(2px);
                         left: px2rem(1px);
                     } @else {
@@ -106,7 +107,7 @@
 
             // &[disabled] + i {
             //     border-color: lighten($Checkbox-color, 5%);
-    
+
             //     &:before {
             //         background-color: lighten($Checkbox-color, 5%);
             //     }
@@ -139,14 +140,13 @@
 
     &--radio {
         padding-left: $Radio-size;
-    
+
         input {
             margin-left: -$Radio-size;
 
             &: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;
@@ -156,10 +156,10 @@
                     border-radius: 50%;
                 }
             }
-            
+
             &[disabled] + i {
                 border-color: lighten($Radio-color, 5%);
-    
+
                 &:before {
                     background-color: lighten($Radio-color, 5%);
                 }
@@ -178,7 +178,7 @@
 
     &--sm {
         margin-right: px2rem(5px);
-        
+
         input {
             &:checked + i {
                 &:before {
@@ -189,6 +189,7 @@
                 }
             }
         }
+
         > i {
             width: $Checkbox--sm-size;
             height: $Checkbox--sm-size;
@@ -201,8 +202,8 @@
     }
 }
 
-.#{$ns}CheckboxControl, 
+.#{$ns}CheckboxControl,
-.#{$ns}RadiosControl, 
+.#{$ns}RadiosControl,
 .#{$ns}CheckboxesControl {
     padding-top: ($Form-input-height - $Checkbox-size) / 2;
 }
@@ -218,4 +219,4 @@
         display: inline-block;
         margin-right: $gap-md;
     }
-}
+}

scss/components/form/_color.scss

@@ -42,7 +42,7 @@
         background: $ColorPicker-onDisabled-bg;
         color: $ColorPicker-onDisabled-color;
         pointer-events: none;
-        
+
         > .#{$ns}ColorPicker-input {
             color: $ColorPicker-onDisabled-color;
 
@@ -83,4 +83,4 @@
     box-shadow: none !important;
     border-radius: 0 !important;
     border: none !important;
-}
+}

scss/components/form/_combo.scss

@@ -1,6 +1,4 @@
-
 .#{$ns}Combo {
-
     &-toolbarBtn {
         line-height: $Combo-toolbarBtn-lineHeight;
         height: $Combo-toolbarBtn-height;
@@ -15,9 +13,16 @@
 
     &-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,
             $Combo-addBtn-border,
@@ -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,9 +186,8 @@
     }
 }
 
-
 @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,11 +28,12 @@
 
     &.is-disabled {
         background: $gray200;
+
         > &-input {
             color: $text--muted-color;
         }
     }
-    
+
     &-placeholder {
         color: $DatePicker-placeholderColor;
         user-select: none;
@@ -49,6 +51,7 @@
     &-toggler {
         cursor: pointer;
         color: $DatePicker-iconColor;
+
         &:hover {
             color: $DatePicker-onHover-iconColor;
         }
@@ -105,4 +108,4 @@
 
 .#{$ns}DateRangeControl:not(.is-inline) > .#{$ns}DateRangePicker {
     display: flex;
-}
+}

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,11 +27,12 @@
 
     &.is-disabled {
         background: $gray200;
+
         > &-input {
             color: $text--muted-color;
         }
     }
-    
+
     &-placeholder {
         color: $DatePicker-placeholderColor;
         user-select: none;
@@ -49,6 +50,7 @@
     &-toggler {
         cursor: pointer;
         color: $DatePicker-iconColor;
+
         &:hover {
             color: $DatePicker-onHover-iconColor;
         }
@@ -60,7 +62,7 @@
             display: inline-block;
             font-size: $DatePicker-toggler-fontSize;
             font-family: $DatePicker-toggler-vendor;
-        }        
+        }
     }
 
     &-clear {
@@ -90,17 +92,16 @@
             font-weight: normal;
         }
 
-        td.rdtDay, 
+        td.rdtDay,
-        td.rdtHour, 
+        td.rdtHour,
-        td.rdtMinute, 
+        td.rdtMinute,
-        td.rdtSecond, 
+        td.rdtSecond,
         .rdtTimeToggle {
             background-color: $Calendar-cell-bg;
 
             &:hover {
                 background-color: $Calendar-cell-onHover-bg;
             }
-            
         }
 
         td.rdtToday:before {
@@ -111,7 +112,7 @@
             border-bottom-color: $Calendar-cell-bg;
         }
 
-        td.rdtActive, 
+        td.rdtActive,
         td.rdtActive:hover {
             background: $Calendar-cell-onActive-bg;
         }
@@ -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 {
@@ -174,7 +176,7 @@
             height: 30%;
             line-height: px2rem(20px);
         }
-    
+
         .rdtCount {
             height: 40%;
             display: flex;
@@ -186,7 +188,7 @@
 
 .rdtBtn {
     line-height: $Calendar-btn-lineHeight;
-    padding:  $Calendar-btn-paddingY $Calendar-btn-paddingX;
+    padding: $Calendar-btn-paddingY $Calendar-btn-paddingX;
     display: inline-block;
     vertical-align: middle;
     text-align: center;
@@ -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

@@ -3,11 +3,12 @@
 .#{$ns}EditorControl {
     min-height: px2rem(200px);
     max-height: px2rem(400px);
-    
+
     > .#{$ns}MonacoEditor,
     > .#{$ns}MonacoEditor > .monaco-diff-editor {
         min-height: px2rem(198px);
     }
+
     overflow: visible;
     height: auto;
     border: $Form-input-borderWidth solid $Form-input-borderColor;
@@ -19,11 +20,12 @@
     }
 
     &.is-focused {
-      border-color: $Form-input-onFocused-borderColor;
+        border-color: $Form-input-onFocused-borderColor;
     }
 
     &--md {
         min-height: 250px;
+
         > .#{$ns}MonacoEditor {
             min-height: 250px;
         }
@@ -54,11 +56,10 @@
     }
 }
 
-.monaco-inputbox>.wrapper {
+.monaco-inputbox > .wrapper {
     padding: 0;
 }
 
-
 // @media (min-width: 768px) {
 
 //     .amis-editor-control.form-contorl-inline,
@@ -66,4 +67,4 @@
 //       display: inline-block;
 //       width: 280px;
 //     }
-//   }
+//   }

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;
@@ -13,7 +13,7 @@
         right: 0;
     }
 
-    >legend {
+    > legend {
         position: absolute;
         top: 0;
         left: 0;
@@ -48,7 +48,7 @@ fieldset.#{$ns}Collapse {
         @extend %fieldSetBase;
         padding: 20px 5px 5px 5px;
 
-        >legend {
+        > legend {
             left: 5px;
             font-size: $fontSizeXs;
             padding: 0 3px;
@@ -65,7 +65,7 @@ fieldset.#{$ns}Collapse {
 
         padding: 25px 10px 10px 10px;
 
-        >legend {
+        > legend {
             left: 10px;
             font-size: $fontSizeSm;
             padding: 0 5px;
@@ -82,7 +82,7 @@ fieldset.#{$ns}Collapse {
 
         padding: 30px 15px 15px 15px;
 
-        >legend {
+        > legend {
             left: 15px;
             font-size: $fontSizeBase;
             padding: 0 8px;
@@ -98,7 +98,7 @@ fieldset.#{$ns}Collapse {
         @extend %fieldSetBase;
         padding: 30px 20px 20px 20px;
 
-        >legend {
+        > legend {
             left: 20px;
             font-size: $fontSizeMd;
             padding: 0 10px;
@@ -114,7 +114,7 @@ fieldset.#{$ns}Collapse {
         @extend %fieldSetBase;
         padding: 40px 30px 30px 30px;
 
-        >legend {
+        > legend {
             left: 30px;
             font-size: $fontSizeLg;
             padding: 0 15px;

scss/components/form/_form.scss

@@ -20,7 +20,7 @@
     margin-bottom: px2rem(5px);
     display: inline-block;
     max-width: 100%;
-    
+
     > span {
         position: relative;
     }
@@ -107,21 +107,21 @@
         display: inline-block;
         vertical-align: top;
     }
-    
+
     .#{$ns}Form-control--sizeSm {
         min-width: $Form-control-widthSm;
         width: auto;
         display: inline-block;
         vertical-align: top;
     }
-    
+
     .#{$ns}Form-control--sizeMd {
         min-width: $Form-control-widthMd;
         width: auto;
         display: inline-block;
         vertical-align: top;
     }
-    
+
     .#{$ns}Form-control--sizeLg {
         min-width: $Form-control-widthLg;
         width: auto;
@@ -135,19 +135,19 @@
             flex-wrap: nowrap;
             margin-left: -$Form--horizontal-gutterWidth / 2;
             margin-right: -$Form--horizontal-gutterWidth / 2;
-    
+
             > * {
                 padding-left: $Form--horizontal-gutterWidth / 2;
                 padding-right: $Form--horizontal-gutterWidth / 2;
             }
-    
+
             > .#{$ns}Form-label,
             > .#{$ns}Form-value {
                 flex-basis: 0;
                 flex-grow: 1;
                 max-width: 100%;
             }
-    
+
             .#{$ns}Form-itemColumn--xs,
             .#{$ns}Form-itemColumn--sm,
             .#{$ns}Form-itemColumn--normal,
@@ -157,32 +157,32 @@
                 flex-basis: unset;
             }
 
-            >.#{$ns}Form-label {
+            > .#{$ns}Form-label {
                 padding-top: $Form-label-paddingTop;
                 margin-bottom: 0;
             }
-    
+
             .#{$ns}Form-itemColumn--xs {
                 width: $Form--horizontal-label-widthXs;
             }
-    
+
             .#{$ns}Form-itemColumn--sm {
                 width: $Form--horizontal-label-widthSm;
             }
-    
+
             .#{$ns}Form-itemColumn--normal {
                 width: $Form--horizontal-label-widthBase;
             }
-    
+
             .#{$ns}Form-itemColumn--md {
                 width: $Form--horizontal-label-widthMd;
             }
-    
+
             .#{$ns}Form-itemColumn--lg {
                 width: $Form--horizontal-label-widthLg;
             }
-    
+
-            @for $i from (1) through $Form--horizontal-columns  {
+            @for $i from (1) through $Form--horizontal-columns {
                 .#{$ns}Form-itemColumn--#{$i} {
                     flex: 0 0 percentage($i / $Form--horizontal-columns);
                     max-width: percentage($i / $Form--horizontal-columns);
@@ -194,9 +194,8 @@
         &--inline {
             display: inline-block;
             vertical-align: top;
-            
 
-            >.#{$ns}Form-label {
+            > .#{$ns}Form-label {
                 padding-top: $Form-label-paddingTop;
                 margin-bottom: 0;
                 margin-right: $Form-item-gap/2;
@@ -206,7 +205,7 @@
                 }
             }
 
-            >.#{$ns}Form-value {
+            > .#{$ns}Form-value {
                 display: inline;
 
                 > .#{$ns}Form-control {
@@ -261,4 +260,4 @@
             flex-grow: 1;
         }
     }
-}
+}

scss/components/form/_group.scss

@@ -81,8 +81,6 @@
         }
     }
 
-    
-
     .#{$ns}Form-groupColumn {
         flex-basis: 0;
         flex-grow: 1;
@@ -90,11 +88,11 @@
         max-width: 100%;
     }
 
-    @for $i from (1) through $Form--horizontal-columns  {
+    @for $i from (1) through $Form--horizontal-columns {
         .#{$ns}Form-groupColumn--#{$i} {
             flex: 0 0 percentage($i / $Form--horizontal-columns);
             max-width: percentage($i / $Form--horizontal-columns);
             min-height: 1px;
         }
     }
-}
+}

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;
         }
@@ -99,4 +100,4 @@
             margin-right: $IconPicker-selectedIcon-marginRight;
         }
     }
-}
+}

scss/components/form/_image.scss

@@ -5,7 +5,7 @@
 }
 
 .drop-zone {
-    border: $Form-input-borderWidth*2 dashed $Form-input-borderColor;
+    border: $Form-input-borderWidth * 2 dashed $Form-input-borderColor;
     height: 70px;
     text-align: center;
     display: table;
@@ -13,10 +13,12 @@
     color: $text--muted-color;
     position: relative;
     cursor: pointer;
-    >div:not(.image-list) {
+
+    > div:not(.image-list) {
         display: table-cell;
         vertical-align: middle;
     }
+
     &.has-files {
         cursor: default;
         border: 2px dashed transparent;
@@ -25,12 +27,13 @@
 
 .drop-zone-wrapper:focus .drop-zone:not(.disabled) {
     color: $text-color;
-    border:  $Form-input-borderWidth*2 dashed $Form-input-onFocused-borderColor;
+    border: $Form-input-borderWidth * 2 dashed $Form-input-onFocused-borderColor;
     height: 90px;
     padding-bottom: 20px;
     margin-bottom: 10px;
+
     &:after {
-        content: '温馨提示：当前状态可以粘贴剪切板中的文件。如截屏';
+        content: "温馨提示：当前状态可以粘贴剪切板中的文件。如截屏";
         position: absolute;
         left: 10px;
         bottom: 3px;
@@ -51,25 +54,29 @@
 .drop-zone-active.has-files,
 .drop-zone:hover:not(.disabled):not(.has-files) {
     color: $text-color;
-    border: $Form-input-borderWidth*2 dashed $Form-input-onFocused-borderColor;
+    border: $Form-input-borderWidth * 2 dashed $Form-input-onFocused-borderColor;
 }
 
 .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;
@@ -168,4 +186,4 @@
         display: inline-block;
         min-width: 280px;
     }
-}
+}

scss/components/form/_input-group.scss

@@ -17,12 +17,14 @@
 
     &-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;
-        
+
         &:not(:last-child) {
             border-right: 0;
         }
@@ -45,21 +47,22 @@
     &-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 {
             border-right: 0;
         }
 
-        &:first-child .#{$ns}Button  {
+        &:first-child .#{$ns}Button {
             @if $InputGroup-button-borderRadius {
                 border-top-left-radius: $InputGroup-button-borderRadius;
                 border-bottom-left-radius: $InputGroup-button-borderRadius;
             }
         }
 
-        &:last-child .#{$ns}Button  {
+        &:last-child .#{$ns}Button {
             @if $InputGroup-button-borderRadius {
                 border-top-right-radius: $InputGroup-button-borderRadius;
                 border-bottom-right-radius: $InputGroup-button-borderRadius;
@@ -87,9 +90,11 @@
         @if $InputGroup-select-borderWidth {
             .#{$ns}Select {
                 background-color: $InputGroup-select-bg;
-                border: $InputGroup-select-borderWidth solid $InputGroup-select-borderColor;
+                border: $InputGroup-select-borderWidth
-                
+                    solid
-                @if $InputGroup-select-color != $Form-select-color {
+                    $InputGroup-select-borderColor;
+
+                @if $InputGroup-select-color !=$Form-select-color {
                     color: $InputGroup-select-color;
                 }
             }
@@ -97,14 +102,14 @@
             &:not(:last-child) .#{$ns}Select {
                 border-right: 0;
             }
-    
+
             &:first-child .#{$ns}Select {
                 @if $InputGroup-select-borderRadius {
                     border-top-left-radius: $InputGroup-select-borderRadius;
                     border-bottom-left-radius: $InputGroup-select-borderRadius;
                 }
             }
-    
+
             &:last-child .#{$ns}Select {
                 @if $InputGroup-select-borderRadius {
                     border-top-right-radius: $InputGroup-select-borderRadius;
@@ -113,7 +118,6 @@
             }
         }
 
-        
         &:not(:first-child) .#{$ns}Select {
             border-top-left-radius: 0;
             border-bottom-left-radius: 0;
@@ -126,12 +130,11 @@
         }
     }
 
-    @if $InputGroup-select-arrowColor != $Form-select-caret-iconColor {
+    @if $InputGroup-select-arrowColor !=$Form-select-caret-iconColor {
         .#{$ns}Select-arrow {
             color: $InputGroup-select-arrowColor;
         }
     }
-    
 
     &.is-focused {
         .#{$ns}InputGroup-addOn,
@@ -141,19 +144,21 @@
             border-color: $InputGroup-addOn-onFocused-borderColor;
         }
 
-        @if $InputGroup-select-onFocused-bg != $InputGroup-select-bg {
+        @if $InputGroup-select-onFocused-bg !=$InputGroup-select-bg {
             .#{$ns}Select {
                 background-color: $InputGroup-select-onFocused-bg;
             }
         }
 
-        @if $InputGroup-select-onFocused-color != $InputGroup-select-color {
+        @if $InputGroup-select-onFocused-color !=$InputGroup-select-color {
             .#{$ns}Select {
                 color: $InputGroup-select-onFocused-color;
             }
         }
 
-        @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;
             }
@@ -163,4 +168,4 @@
 
 .#{$ns}InputGroup:not(.is-inline) {
     display: flex;
-}
+}

scss/components/form/_list.scss

@@ -1,4 +1,3 @@
-
 .#{$ns}ListControl {
     &-items {
         display: block;
@@ -16,18 +15,23 @@
         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;
         transition: $ListControl-item-transition;
-        max-width: px2rem(200px) + 2*$ListControl-item-paddingX;
+        max-width: px2rem(200px) + 2 * $ListControl-item-paddingX;
 
         &:not(.is-disabled) {
             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,8 +132,7 @@
         margin-top: $ListControl-item-paddingY;
     }
 
-
     &-placeholder {
         color: $Form-input-placeholderColor;
     }
-}
+}

scss/components/form/_matrix.scss

@@ -2,4 +2,4 @@
     &-error {
         margin-bottom: 0;
     }
-}
+}

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;
 
@@ -103,7 +107,7 @@
                 background-color: $Form-select-menu-onHover-bg;
             }
 
-            &:hover>.#{$ns}NestedSelect-childrenOuter {
+            &:hover > .#{$ns}NestedSelect-childrenOuter {
                 display: block;
             }
 
@@ -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;
@@ -54,7 +57,7 @@
 
     &-input {
         width: 100%;
-        background-color: transparent; 
+        background-color: transparent;
         text-align: left;
         vertical-align: top;
         outline: 0;
@@ -98,7 +101,7 @@
         }
     }
 
-    @if $Number-handler-mode == vertical {
+    @if $Number-handler-mode==vertical {
         &-handler-wrap {
             float: right;
             border-left: px2rem(1px) solid $Form-input-borderColor;
@@ -110,14 +113,14 @@
             line-height: ($Form-input-height - px2rem(6px)) / 2;
             height: ($Form-input-height - $Number-borderWidth * 2) / 2;
         }
-    
+
         &-handler-up {
             border-bottom: px2rem(1px) solid $Form-input-borderColor;
             padding-top: px2rem(1px);
         }
     } @else {
         position: relative;
-        
+
         &-input {
             text-align: center;
         }
@@ -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;
@@ -166,4 +169,4 @@
 
 .#{$ns}NumberControl:not(.is-inline) > .#{$ns}Number {
     display: block;
-}
+}

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 {
@@ -46,4 +48,4 @@
 
 .#{$ns}PickerControl {
     padding-top: $Form-input-height - px2rem(30px);
-}
+}

scss/components/form/_qr-code.scss

@@ -1,4 +1,4 @@
 .#{$ns}QrCode {
     min-height: $Form-input-height;
     padding: px2rem(7px) 0;
-}
+}

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,27 +73,29 @@
         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;
         top: 50%;
         transition: $InputRange-slider-transition;
-    
+
         &:active {
             transform: $InputRange-slider-onActive-transform;
         }
-    
+
         &:focus {
-            box-shadow: $InputRange-slider-onFocus-boxShadow
+            box-shadow: $InputRange-slider-onFocus-boxShadow;
         }
-    
+
         .input-range--disabled & {
             background: $InputRange-slider-onDisabled-bg;
             border: $InputRange-slider-onDisabled-border;
             box-shadow: none;
             transform: none;
         }
+
         &:before {
             content: "||";
             color: #fff;
@@ -143,7 +152,7 @@
     //     .#{$ns}InputRange-label--max & {
     //         left: 50%;
     //     }
-    // } 
+    // }
 
     // track
     &-track {
@@ -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

@@ -13,30 +13,29 @@
         margin-top: 0;
     }
 
-//   .InputRange-label--value {
+    //   .InputRange-label--value {
-//     top: -25px;
+    //     top: -25px;
 
-//     .InputRange-labelContainer {
+    //     .InputRange-labelContainer {
-//       font-size: 14px;
+    //       font-size: 14px;
-//     }
+    //     }
-//   }
+    //   }
 
-//   .InputRange-slider {
+    //   .InputRange-slider {
-//     z-index: 2;
+    //     z-index: 2;
-//   }
+    //   }
 
-//   .InputRange-track--active, .InputRange-slider {
+    //   .InputRange-track--active, .InputRange-slider {
-//     background-color: #23b7e5;
+    //     background-color: #23b7e5;
-//     border-color: #23b7e5;
+    //     border-color: #23b7e5;
-//   }
+    //   }
 }
 
 @media (min-width: 768px) {
-
     .repeat-control.form-contorl-inline,
     .form-group-inline .repeat-control {
-      display: inline-block;
+        display: inline-block;
-      min-width: 280px;
+        min-width: 280px;
-      width: auto;
+        width: auto;
     }
-}
+}

scss/components/form/_rich-text.scss

@@ -1,7 +1,7 @@
 // todo
 
 .fr-popup {
-  z-index: $zindex-popover !important;
+    z-index: $zindex-popover !important;
 }
 
 .#{$ns}RichTextControl {
@@ -10,79 +10,91 @@
     border: $Form-input-borderWidth solid $Form-input-borderColor;
     width: 100%;
 
-  .fr-toolbar.fr-top {
+    .fr-toolbar.fr-top {
-    box-shadow: none;
+        box-shadow: none;
-    border: 0;
+        border: 0;
-    position: relative;
+        position: relative;
-  }
-
-  .fr-box.fr-basic.fr-top:not(.fr-fullscreen) .fr-wrapper {
-    min-height: 150px;
-    max-height: 400px;
-    box-shadow: none;
-    overflow: auto;
-    border-top: 1px solid $Form-input-borderColor;
-  }
-
-  .fr-toolbar .fr-command.fr-btn, .fr-popup .fr-command.fr-btn {
-    color: $Button--default-color;
-  }
-
-  .fr-toolbar .fr-command.fr-btn.fr-active, .fr-popup .fr-command.fr-btn.fr-active {
-    color: $info;
-  }
-
-  .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 {
-    background-color: $light;
-  }
-
-  .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li a.fr-active {
-    background-color: $info;
-    color: #fff;
-  }
-
-  &.is-focused {
-      border: $Form-input-borderWidth solid $Form-input-onFocused-borderColor;
-
-    .fr-box.fr-basic.fr-top .fr-wrapper {
-      border-top: $Form-input-borderWidth  solid $Form-input-onFocused-borderColor;
     }
-  }
 
-  .fr-box.fr-basic .fr-element {
+    .fr-box.fr-basic.fr-top:not(.fr-fullscreen) .fr-wrapper {
-    min-height: 150px;
+        min-height: 150px;
-  }
+        max-height: 400px;
-
+        box-shadow: none;
-  .fr-sticky-dummy {
+        overflow: auto;
-    position: absolute;
+        border-top: 1px solid $Form-input-borderColor;
-  }
-
-  &.is-disabled {
-    border-color: $Form-input-onDisabled-borderColor;
-    pointer-events: none;
-    opacity: 0.6;
-    .fr-box.fr-basic.fr-top .fr-wrapper {
-      border-color: $Form-input-onDisabled-borderColor;
     }
-  }
 
-//   &.amis-rich-text-control-md {
+    .fr-toolbar .fr-command.fr-btn,
-//     .fr-box.fr-basic .fr-element,
+    .fr-popup .fr-command.fr-btn {
-//     .fr-box.fr-basic.fr-top .fr-wrapper {
+        color: $Button--default-color;
-//       min-height: 250px;
+    }
-//     }
-//   }
 
-//   &.amis-rich-text-control-lg {
+    .fr-toolbar .fr-command.fr-btn.fr-active,
-//     .fr-box.fr-basic .fr-element,
+    .fr-popup .fr-command.fr-btn.fr-active {
-//     .fr-box.fr-basic.fr-top .fr-wrapper {
+        color: $info;
-//       min-height: 300px;
+    }
-//     }
+
-//   }
+    .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 {
+        background-color: $light;
+    }
+
+    .fr-command.fr-btn
+        + .fr-dropdown-menu
+        .fr-dropdown-wrapper
+        .fr-dropdown-content
+        ul.fr-dropdown-list
+        li
+        a.fr-active {
+        background-color: $info;
+        color: #fff;
+    }
+
+    &.is-focused {
+        border: $Form-input-borderWidth solid $Form-input-onFocused-borderColor;
+
+        .fr-box.fr-basic.fr-top .fr-wrapper {
+            border-top: $Form-input-borderWidth solid
+                $Form-input-onFocused-borderColor;
+        }
+    }
+
+    .fr-box.fr-basic .fr-element {
+        min-height: 150px;
+    }
+
+    .fr-sticky-dummy {
+        position: absolute;
+    }
+
+    &.is-disabled {
+        border-color: $Form-input-onDisabled-borderColor;
+        pointer-events: none;
+        opacity: 0.6;
+
+        .fr-box.fr-basic.fr-top .fr-wrapper {
+            border-color: $Form-input-onDisabled-borderColor;
+        }
+    }
+
+    //   &.amis-rich-text-control-md {
+    //     .fr-box.fr-basic .fr-element,
+    //     .fr-box.fr-basic.fr-top .fr-wrapper {
+    //       min-height: 250px;
+    //     }
+    //   }
+
+    //   &.amis-rich-text-control-lg {
+    //     .fr-box.fr-basic .fr-element,
+    //     .fr-box.fr-basic.fr-top .fr-wrapper {
+    //       min-height: 300px;
+    //     }
+    //   }
 }
 
 // @media (min-width: 768px) {
@@ -92,4 +104,4 @@
 //     display: inline-block;
 //     width: 280px;
 //   }
-// }
+// }

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,8 +155,11 @@
     }
 
     &-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;
             background-color: $Form-select-menu-onActive-bg;
@@ -164,7 +169,7 @@
             color: $Form-select-menu-onHover-color;
             background-color: $Form-select-menu-onHover-bg;
         }
-        
+
         &.is-disabled {
             color: $Form-select-menu-onDisabled-color;
             background-color: $Form-select-menu-onDisabled-bg;
@@ -182,8 +187,8 @@
     &.is-focused,
     &.is-opened {
         border-color: $Form-input-onFocused-borderColor;
-    
+
-        @if ($Form-select-onFocused-color != $Form-select-color) {
+        @if ($Form-select-onFocused-color !=$Form-select-color) {
             color: $Form-select-onFocused-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;
@@ -237,4 +243,4 @@
         min-width: 100%;
         display: inline-flex !important;
     }
-}
+}

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 {
@@ -45,9 +47,16 @@
 
     &-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,
             $SubForm--addBtn-border,
@@ -69,4 +78,4 @@
 
 .#{$ns}SubFormControl {
     padding-top: $Form-input-height - $SubForm--addBtn-height;
-}
+}

scss/components/form/_switch.scss

@@ -1,4 +1,3 @@
-
 .#{$ns}Switch {
     cursor: pointer;
     position: relative;
@@ -11,11 +10,10 @@
     margin: 0;
     vertical-align: middle;
     text-align: left;
-        
+
     &.is-disabled {
         background-color: $Switch-onDisabled-bgColor;
     }
-    
 
     i {
         &:before {
@@ -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,9 +73,10 @@
                     left: 100%;
                     border-width: 0;
                 }
+
                 &:after {
                     margin-left: $Switch-width - $Switch-height;
-                    
+
                     content: "On";
                     color: $white;
                     text-indent: px2rem(-20px); // todo

scss/components/form/_tag.scss

@@ -1,4 +1,3 @@
-
 .#{$ns}TagControl {
     @include input-text();
 
@@ -82,9 +81,16 @@
             cursor: pointer;
             user-select: none;
             border: $TagControl-sugBtn-borderWidth solid transparent;
-        
+
-            @include button-size($TagControl-sugBtn-paddingY, $TagControl-sugBtn-paddingX, $TagControl-sugBtn-fontSize, $TagControl-sugBtn-lineHeight, $TagControl-sugBtn-borderRadius, $TagControl-sugBtn-height);
+            @include button-size(
-            
+                $TagControl-sugBtn-paddingY,
+                $TagControl-sugBtn-paddingX,
+                $TagControl-sugBtn-fontSize,
+                $TagControl-sugBtn-lineHeight,
+                $TagControl-sugBtn-borderRadius,
+                $TagControl-sugBtn-height
+            );
+
             @include button-variant(
                 $TagControl-sugBtn-bg,
                 $TagControl-sugBtn-border,
@@ -103,4 +109,4 @@
             }
         }
     }
-}
+}

scss/components/form/_text.scss

@@ -18,6 +18,7 @@
 
 @mixin input-text {
     position: relative;
+
     &.is-inline {
         display: inline-block;
     }
@@ -60,7 +61,7 @@
         border-color: $Form-input-onFocused-borderColor;
         box-shadow: $Form-input-boxShadow;
 
-        @if $Form-input-onFocused-bg != $Form-input-bg {
+        @if $Form-input-onFocused-bg !=$Form-input-bg {
             background-color: $Form-input-onFocused-bg;
         }
     }
@@ -141,16 +142,16 @@
         border-radius: 0;
 
         &:first-child {
-            border-top-left-radius: $Form-input-borderRadius; 
+            border-top-left-radius: $Form-input-borderRadius;
             border-bottom-left-radius: $Form-input-borderRadius;
         }
 
         &:last-child {
-            border-top-right-radius: $Form-input-borderRadius; 
+            border-top-right-radius: $Form-input-borderRadius;
             border-bottom-right-radius: $Form-input-borderRadius;
         }
 
-        @if $Form-input-addOnDividerBorderWidth == 0 {
+        @if $Form-input-addOnDividerBorderWidth==0 {
             &:not(:last-child) {
                 border-right-width: 0;
             }
@@ -175,38 +176,39 @@
 
         &:last-child {
             border-right-width: px2rem(1px);
-            border-top-right-radius: $Form-input-borderRadius; 
+            border-top-right-radius: $Form-input-borderRadius;
             border-bottom-right-radius: $Form-input-borderRadius;
         }
     }
 
-    
     &--withAddOn > &-button {
         > .#{$ns}Button {
             position: relative;
             border-radius: 0;
             margin-left: px2rem(-1px);
-            border: $InputGroup-button-borderWidth solid $InputGroup-button-borderColor;
+            border: $InputGroup-button-borderWidth solid
+                $InputGroup-button-borderColor;
         }
 
         &:not(:last-child) .#{$ns}Button {
             border-right: 0;
         }
 
-        &:first-child .#{$ns}Button  {
+        &:first-child .#{$ns}Button {
             @if $InputGroup-button-borderRadius {
                 border-top-left-radius: $InputGroup-button-borderRadius;
                 border-bottom-left-radius: $InputGroup-button-borderRadius;
             }
         }
 
-        &:last-child .#{$ns}Button  {
+        &:last-child .#{$ns}Button {
             @if $InputGroup-button-borderRadius {
                 border-top-right-radius: $InputGroup-button-borderRadius;
                 border-bottom-right-radius: $InputGroup-button-borderRadius;
             }
         }
     }
+
     &--withAddOn.is-focused > &-button .#{$ns}Button {
         border-color: $Form-input-onFocused-borderColor;
     }
@@ -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);
@@ -254,7 +259,7 @@
             float: right;
             fill: darken($color: $Form-input-iconColor, $amount: 20%);
         }
-        
+
         &:not(.is-disabled) {
             cursor: pointer;
         }
@@ -281,6 +286,7 @@
         white-space: normal;
 
         margin-bottom: -$gap-xs;
+
         > input {
             margin-bottom: $gap-xs;
         }
@@ -310,4 +316,4 @@
     &-input--multiple &-valueLabel {
         padding: 0 $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;
     }
@@ -23,4 +28,4 @@
         background: $gray200;
         color: $text--muted-color;
     }
-}
+}

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;
@@ -101,4 +117,4 @@
             }
         }
     }
-}
+}

scss/components/form/_tree-select.scss

@@ -11,7 +11,7 @@
         border-color: $Form-input-onFocused-borderColor;
         box-shadow: $Form-input-boxShadow;
 
-        @if $Form-input-onFocused-bg != $Form-input-bg {
+        @if $Form-input-onFocused-bg !=$Form-input-bg {
             background-color: $Form-input-onFocused-bg;
         }
     }
@@ -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;
@@ -73,23 +74,23 @@
             border-radius: 2px;
             margin-right: $gap-xs;
             margin-bottom: $gap-xs;
-    
+
             &.is-disabled {
                 pointer-events: none;
                 opacity: $Button-onDisabled-opacity;
             }
         }
-    
+
         .#{$ns}TreeSelect-valueIcon {
             cursor: pointer;
             border-right: px2rem(1px) solid $Form-selectValue-borderColor;
             padding: 1px 5px;
-    
+
             &:hover {
                 background-color: darken($Form-selectValue-bg, 5%);
             }
         }
-    
+
         .#{$ns}TreeSelect-valueLabel {
             padding: 0 $gap-xs;
         }
@@ -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);
@@ -131,4 +132,4 @@
         max-height: 400px;
         overflow: auto;
     }
-}
+}

scss/components/form/_tree.scss

@@ -15,104 +15,104 @@
     }
 }
 
-
 .#{$ns}Tree {
-  &-list, &-sublist {
+    &-list,
-    list-style: none;
+    &-sublist {
-    padding: 0;
+        list-style: none;
-    margin: 0;
+        padding: 0;
-  }
+        margin: 0;
-
-  &-sublist {
-    padding-left: $Tree-indent;
-
-    &.is-folded {
-      display: none;
-    }
-  }
-
-  &-item {
-    line-height: px2rem(30px);
-    position: relative;
-
-    > a {
-      color: inherit;
-
-      &:hover {
-        text-decoration: none;
-      }
     }
 
-    &--isLeaf > a {
+    &-sublist {
-      padding-left: $Tree-itemArrowWidth + $gap-xs;
+        padding-left: $Tree-indent;
-    }
-  }
 
-  &-rootItem > a > i {
+        &.is-folded {
-    margin-left: 0 !important;
+            display: none;
-  }
+        }
-
-  &-itemArrow {
-    cursor: pointer;
-    width: $Tree-itemArrowWidth;
-    margin-right: $gap-xs;
-    display: inline-block;
-
-    &:before {
-      font-style: normal;
-      font-family: $Tree-arrowVendor;
-      content: $Tree-unfoldedArrowContent;
     }
 
-    &.is-folded:before {
+    &-item {
-      content: $Tree-foldedArrowContent;
+        line-height: px2rem(30px);
-    }
+        position: relative;
-  }
 
-  &-itemIcon {
+        > a {
-    display: inline-block;
+            color: inherit;
-    margin-right: $gap-xs;
-  }
 
-  &-rootIcon {
+            &:hover {
-    &:before {
+                text-decoration: none;
-      font-style: normal;
+            }
-      font-family: $Tree-rootIconVendor;
+        }
-      content: $Tree-rootIconContent;
-    }
-  }
 
-  &-leafIcon {
+        &--isLeaf > a {
-    &:before {
+            padding-left: $Tree-itemArrowWidth + $gap-xs;
-      font-style: normal;
+        }
-      font-family: $Tree-leafIconVendor;
-      content: $Tree-leafIconContent;
-    }
-  }
-
-  &-folderIcon {
-    &:before {
-      font-style: normal;
-      font-family: $Tree-folderIconVendor;
-      content: $Tree-folderIconContent;
-    }
-  }
-
-  &-itemText {
-    user-select: none;
-    cursor: pointer;
-
-    &.is-checked,
-    &.is-children-checked {
-      color: $Tree-itemText--onChecked-color;
     }
 
-    &.is-disabled {
+    &-rootItem > a > i {
-      color: $text--muted-color;
+        margin-left: 0 !important;
     }
-  }
 
-  &-placeholder {
+    &-itemArrow {
-    color: $text--muted-color;
+        cursor: pointer;
-  }
+        width: $Tree-itemArrowWidth;
-}
+        margin-right: $gap-xs;
+        display: inline-block;
+
+        &:before {
+            font-style: normal;
+            font-family: $Tree-arrowVendor;
+            content: $Tree-unfoldedArrowContent;
+        }
+
+        &.is-folded:before {
+            content: $Tree-foldedArrowContent;
+        }
+    }
+
+    &-itemIcon {
+        display: inline-block;
+        margin-right: $gap-xs;
+    }
+
+    &-rootIcon {
+        &:before {
+            font-style: normal;
+            font-family: $Tree-rootIconVendor;
+            content: $Tree-rootIconContent;
+        }
+    }
+
+    &-leafIcon {
+        &:before {
+            font-style: normal;
+            font-family: $Tree-leafIconVendor;
+            content: $Tree-leafIconContent;
+        }
+    }
+
+    &-folderIcon {
+        &:before {
+            font-style: normal;
+            font-family: $Tree-folderIconVendor;
+            content: $Tree-folderIconContent;
+        }
+    }
+
+    &-itemText {
+        user-select: none;
+        cursor: pointer;
+
+        &.is-checked,
+        &.is-children-checked {
+            color: $Tree-itemText--onChecked-color;
+        }
+
+        &.is-disabled {
+            color: $text--muted-color;
+        }
+    }
+
+    &-placeholder {
+        color: $text--muted-color;
+    }
+}

scss/layout/_aside.scss

@@ -1,4 +1,3 @@
-
 .#{$ns}AsideNav {
     @include clearfix();
 
@@ -17,15 +16,12 @@
         margin: 0;
     }
 
-    
-
     &-itemArrow {
         float: right;
         display: block;
         width: px2rem(20px);
         text-align: center;
         line-height: px2rem(17px);
-        
 
         &::before {
             content: $Layout-asideLink-arrowIcon;
@@ -35,7 +31,7 @@
             color: $Layout-asideLink-arrowColor;
             font-size: $Layout-asideLink-arrowFontSize;
         }
-        
+
         .#{$ns}AsideNav-item.is-active > a > &::before {
             transform: rotate(90deg);
             color: $Layout-asideLink-onActive-arrowColor;
@@ -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,12 +82,12 @@
         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 > &,
-        .#{$ns}Layout--folded .#{$ns}AsideNav-item:hover > &, 
+        .#{$ns}Layout--folded .#{$ns}AsideNav-item:hover > &,
-        .#{$ns}Layout--folded .#{$ns}AsideNav-item:focus > &, 
+        .#{$ns}Layout--folded .#{$ns}AsideNav-item:focus > &,
         .#{$ns}Layout--folded .#{$ns}AsideNav-item:active > & {
             opacity: 1;
             margin-left: 0;
@@ -111,13 +110,15 @@
             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;
@@ -145,7 +146,7 @@
             a {
                 padding-left: $Layout-nav-height + px2rem(5px);
             }
-    
+
             .#{$ns}AsideNav-item a {
                 padding-left: $Layout-nav-height + px2rem(35px);
             }
@@ -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%);
@@ -286,4 +289,4 @@
             width: $Layout-aside--lg-width;
         }
     }
-}
+}

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);
@@ -151,7 +148,7 @@
     .#{$ns}Grid {
         @include make-row;
     }
-    
+
     @include make-grid(sm);
 }
 

scss/layout/_hbox.scss

@@ -4,7 +4,8 @@
     border-spacing: 0;
     width: 100%;
     height: 100%;
-    &>.#{$ns}Hbox-col {
+
+    & > .#{$ns}Hbox-col {
         display: table-cell;
         vertical-align: top;
         height: 100%;
@@ -15,30 +16,37 @@
 .#{$ns}FormHbox {
     margin-left: -15px;
     margin-right: -15px;
-    >.#{$ns}Hbox>.#{$ns}Hbox-col {
+
+    > .#{$ns}Hbox > .#{$ns}Hbox-col {
         padding-left: 15px;
         padding-right: 15px;
         vertical-align: top;
-        >.#{$ns}Form-group {
+
+        > .#{$ns}Form-group {
             margin-left: 0;
             margin-right: 0;
         }
-        >.#{$ns}Form-group:last-child {
+
+        > .#{$ns}Form-group:last-child {
             margin-bottom: 0;
         }
     }
+
     &.#{$ns}Hbox--xs {
         margin-left: -5px;
         margin-right: -5px;
-        >.#{$ns}Hbox>.#{$ns}Hbox-col {
+
+        > .#{$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 {
+
+        > .#{$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 {
+
+        & > .#{$ns}Hbox-col {
             width: auto;
             height: auto;
             display: block;
+
             &.show {
                 display: block !important;
             }
         }
+
         & .#{$ns}Vbox {
             height: auto;
         }
+
         & .cell-inner {
             position: static !important;
         }
@@ -68,16 +80,19 @@
 @include media-breakpoint-down(sm) {
     .#{$ns}Hbox--autoXs {
         display: block;
-        &>.#{$ns}Hbox-col {
+
+        & > .#{$ns}Hbox-col {
             width: auto;
             height: auto;
             display: block;
         }
+
         & .#{$ns}Vbox {
             height: auto;
         }
+
         & .cell-inner {
             position: static !important;
         }
     }
-}
+}

scss/layout/_layout.scss

@@ -1,27 +1,29 @@
-html, body {
+html,
+body {
     width: 100%;
     height: 100%;
 }
+
 body {
     overflow-x: hidden;
 }
 
 .#{$ns}Layout {
     height: auto;
-	min-height: 100%;
+    min-height: 100%;
-	width: 100%;
+    width: 100%;
     position: relative;
-    
+
-    &:before{
+    &:before {
-		content: "";
+        content: "";
-		position: absolute;
+        position: absolute;
-		width: inherit;
+        width: inherit;
-		top: 0;
+        top: 0;
-		bottom: 0;
+        bottom: 0;
-		z-index: -1;
+        z-index: -1;
-		background-color: $body-bg;
+        background-color: $body-bg;
-		border: inherit;
+        border: inherit;
-		display: block;
+        display: block;
     }
 
     .#{$ns}Layout-header {
@@ -44,7 +46,6 @@ body {
     &-brandBar {
         background: $Layout-brand-bg;
         color: $Layout-brandBar-color;
-        
 
         > button {
             padding: px2rem(10px) px2rem(17px);
@@ -70,16 +71,17 @@ body {
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
-        
+
-        &:hover{
+        &:hover {
             text-decoration: none;
         }
-        img{
+
+        img {
             max-height: $Layout-header-height / 2;
             // margin-top: px2rem(-4px);
             vertical-align: middle;
             display: inline;
-        }	
+        }
     }
 
     &-headerBar {
@@ -87,13 +89,13 @@ body {
         min-height: $Layout-header-height;
         padding: 0 $gap-sm;
     }
-    
+
     &-aside {
         float: left;
         background: $Layout-aside-bg;
         color: $Layout-aside-color;
 
-        &:before{
+        &:before {
             content: "";
             position: absolute;
             width: inherit;
@@ -109,19 +111,20 @@ 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;
         // }
-        ~ div{
+        ~ div {
             padding-bottom: px2rem(50px);
         }
     }
 
     &-content {
         height: 100%;
-	    @include clearfix();
+        @include clearfix();
     }
 
     // &-content--full {
@@ -183,7 +186,7 @@ body {
 
 @include media-breakpoint-up(md) {
     .#{$ns}Layout {
-        &-brand, 
+        &-brand,
         &-brandBar,
         &-aside {
             width: $Layout-aside-width;
@@ -209,7 +212,7 @@ body {
             .visible-folded {
                 display: inherit;
             }
-    
+
             .hidden-folded {
                 display: none !important;
             }
@@ -281,9 +284,11 @@ body {
                 &::-webkit-scrollbar {
                     -webkit-appearance: none;
                 }
+
                 &::-webkit-scrollbar:vertical {
                     width: $scrollbar-width;
                 }
+
                 & > * {
                     width: $Layout-aside-width;
                 }
@@ -316,7 +321,7 @@ body {
         }
 
         &--sm:not(.#{$ns}Layout--folded) {
-            .#{$ns}Layout-brand, 
+            .#{$ns}Layout-brand,
             .#{$ns}Layout-brandBar,
             .#{$ns}Layout-aside {
                 width: $Layout-aside--sm-width;
@@ -346,7 +351,7 @@ body {
         }
 
         &--md:not(.#{$ns}Layout--folded) {
-            .#{$ns}Layout-brand, 
+            .#{$ns}Layout-brand,
             .#{$ns}Layout-brandBar,
             .#{$ns}Layout-aside {
                 width: $Layout-aside--md-width;
@@ -376,7 +381,7 @@ body {
         }
 
         &--lg:not(.#{$ns}Layout--folded) {
-            .#{$ns}Layout-brand, 
+            .#{$ns}Layout-brand,
             .#{$ns}Layout-brandBar,
             .#{$ns}Layout-aside {
                 width: $Layout-aside--lg-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;
@@ -30,4 +35,4 @@
             }
         }
     }
-}
+}

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);
@@ -144,7 +144,7 @@ $DatePicker-toggler-fontSize: px2rem(12px);
 $DatePicker-toggler-icon: "\e7b1";
 $DatePicker-prevBtn-vendor: "iconfont";
 $DatePicker-prevBtn-fontSize: px2rem(14px);
-$DatePicker-prevBtn-icon: "\e854" ;
+$DatePicker-prevBtn-icon: "\e854";
 $DatePicker-nextBtn-vendor: "iconfont";
 $DatePicker-nextBtn-fontSize: px2rem(14px);
 $DatePicker-nextBtn-icon: "\e63b";
@@ -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";
@@ -323,7 +322,7 @@ $Alert-xs: px2rem(5px);
 $Alert-md: px2rem(20px);
 
 $Alert-height: px2rem(30px);
-$Alert-fontSize: px2rem(12px) ;
+$Alert-fontSize: px2rem(12px);
 $Alert-paddingX: $Alert-md;
 $Alert-paddingY: $Alert-xs;
 $Alert-borderRadius: 0;
@@ -341,7 +340,6 @@ $Alert--success-borderColor: $success-bg;
 $Alert--warning-color: $warning;
 $Alert--warning-borderColor: $warning-bg;
 
-
 // Toast
 
 $Toast-xs: px2rem(5px);
@@ -401,12 +399,12 @@ $TagControl-sugTip-color: $primary;
 @import "../layout/aside";
 @import "../layout/hbox";
 @import "../layout/vbox";
-@import"../components/modal";
+@import "../components/modal";
-@import"../components/drawer";
+@import "../components/drawer";
 @import "../components/tooltip";
 @import "../components/popover";
-@import"../components/toast";
+@import "../components/toast";
-@import"../components/alert";
+@import "../components/alert";
 @import "../components/tabs";
 @import "../components/nav";
 @import "../components/page";
@@ -420,20 +418,20 @@ $TagControl-sugTip-color: $primary;
 @import "../components/button";
 @import "../components/button-group";
 @import "../components/dropdown";
-@import"../components/collapse";
+@import "../components/collapse";
-@import"../components/wizard";
+@import "../components/wizard";
-@import"../components/crud";
+@import "../components/crud";
-@import"../components/table";
+@import "../components/table";
-@import"../components/list";
+@import "../components/list";
-@import"../components/cards";
+@import "../components/cards";
-@import"../components/card";
+@import "../components/card";
-@import"../components/quick-edit";
+@import "../components/quick-edit";
-@import"../components/popoverable";
+@import "../components/popoverable";
-@import"../components/copyable";
+@import "../components/copyable";
-@import"../components/divider";
+@import "../components/divider";
-@import"../components/pagination";
+@import "../components/pagination";
-@import"../components/wrapper";
+@import "../components/wrapper";
-@import"../components/status";
+@import "../components/status";
 
 @import "../components/form/fieldset";
 @import "../components/form/group";
@@ -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;
@@ -27,12 +26,12 @@ $Form-input-borderColor: #cfdadd;
 @import "../layout/aside";
 @import "../layout/hbox";
 @import "../layout/vbox";
-@import"../components/modal";
+@import "../components/modal";
-@import"../components/drawer";
+@import "../components/drawer";
 @import "../components/tooltip";
 @import "../components/popover";
-@import"../components/toast";
+@import "../components/toast";
-@import"../components/alert";
+@import "../components/alert";
 @import "../components/tabs";
 @import "../components/nav";
 @import "../components/page";
@@ -46,20 +45,20 @@ $Form-input-borderColor: #cfdadd;
 @import "../components/button";
 @import "../components/button-group";
 @import "../components/dropdown";
-@import"../components/collapse";
+@import "../components/collapse";
-@import"../components/wizard";
+@import "../components/wizard";
-@import"../components/crud";
+@import "../components/crud";
-@import"../components/table";
+@import "../components/table";
-@import"../components/list";
+@import "../components/list";
-@import"../components/cards";
+@import "../components/cards";
-@import"../components/card";
+@import "../components/card";
-@import"../components/quick-edit";
+@import "../components/quick-edit";
-@import"../components/popoverable";
+@import "../components/popoverable";
-@import"../components/copyable";
+@import "../components/copyable";
-@import"../components/divider";
+@import "../components/divider";
-@import"../components/pagination";
+@import "../components/pagination";
-@import"../components/wrapper";
+@import "../components/wrapper";
-@import"../components/status";
+@import "../components/status";
 
 @import "../components/form/fieldset";
 @import "../components/form/group";
@@ -94,5 +93,4 @@ $Form-input-borderColor: #cfdadd;
 @import "../components/form/nested-select";
 @import "../components/form/icon-picker";
 
-
 @import "../utilities";