prettier scss 文件

2019-12-06 09:58:08 +08:00 · 2019-12-06 09:58:08 +08:00 · 84a569c1c4
parent 73d741e273
commit 84a569c1c4
91 changed files with 9583 additions and 9470 deletions
--- a/examples/components/CRUD/test.jsx
+++ b/examples/components/CRUD/test.jsx
@ -22,10 +22,10 @@ export default {
        type: 'map',
        label: 'Rendering engine',
        map: {
-          A: "<span class='label label-info'>A</span>",
-          B: "<span class='label label-success'>B</span>",
-          C: "<span class='label label-primary'>C</span>",
-          X: "<span class='label label-danger'>X</span>",
+          'A': "<span class='label label-info'>A</span>",
+          'B': "<span class='label label-success'>B</span>",
+          'C': "<span class='label label-primary'>C</span>",
+          'X': "<span class='label label-danger'>X</span>",
          '*': 'Unkown'
        }
      },
--- a/examples/components/Play.jsx
+++ b/examples/components/Play.jsx
@ -16,14 +16,14 @@ const DEFAULT_CONTENT = `{
 }`;

 const scopes = {
-  none: ``,
+  'none': ``,

-  body: `{
+  'body': `{
        "type": "page",
        "body": SCHEMA_PLACEHOLDER
    }`,

-  form: `{
+  'form': `{
        "type": "page",
        "body": {
            "title": "",
--- a/examples/loader.ts
+++ b/examples/loader.ts
@ -3,27 +3,27 @@ const __moduleId = (str: string) => '';
 const mapping: {
  [propName: string]: any;
 } = {
-  jquery: __moduleId('jquery'),
-  react: __moduleId('react'),
+  'jquery': __moduleId('jquery'),
+  'react': __moduleId('react'),
  'react-dom': __moduleId('react-dom'),
  'react-addons-update': __moduleId('react-addons-update'),
  'immutability-helper': __moduleId('react-addons-update'),
  'react-cropper': __moduleId('react-cropper'),
  'react-dropzone': __moduleId('react-dropzone'),
-  classnames: __moduleId('classnames'),
-  axios: __moduleId('axios'),
-  moment: __moduleId('moment'),
-  mobx: __moduleId('mobx'),
+  'classnames': __moduleId('classnames'),
+  'axios': __moduleId('axios'),
+  'moment': __moduleId('moment'),
+  'mobx': __moduleId('mobx'),
  'mobx-state-tree': __moduleId('mobx-state-tree'),
  'react-transition-group': __moduleId('react-transition-group'),
-  echarts: __moduleId('echarts'),
-  zrender: __moduleId('zrender'),
-  sortablejs: __moduleId('sortablejs'),
-  amis: __moduleId('../src'),
+  'echarts': __moduleId('echarts'),
+  'zrender': __moduleId('zrender'),
+  'sortablejs': __moduleId('sortablejs'),
+  'amis': __moduleId('../src'),
  'amis/embed': __moduleId('./embed.tsx'),
  'prop-types': __moduleId('prop-types'),
-  async: __moduleId('async'),
-  qs: __moduleId('qs')
+  'async': __moduleId('async'),
+  'qs': __moduleId('qs')
 };

 function amisRequire(...args: Array<any>) {
--- a/examples/style.scss
+++ b/examples/style.scss
@ -2,68 +2,67 @@
@import '../scss/functions';
@import '../scss/variables';

-
 .page-play,
 .page-edit {
-    &:before {
-        display: table;
-        content: " ";
-    }
+  &:before {
+    display: table;
+    content: ' ';
+  }

-    &:after {
-        clear: both;
-        display: block;
-        content: "";
-        height: 0;
-    }
+  &:after {
+    clear: both;
+    display: block;
+    content: '';
+    height: 0;
+  }

-    .app-content {
-        position: absolute;
-        top: 50px;
-        bottom: 0;
-        height: auto;
-        left: 0;
-        right: 0;
-    }
+  .app-content {
+    position: absolute;
+    top: 50px;
+    bottom: 0;
+    height: auto;
+    left: 0;
+    right: 0;
+  }

-    .app-content-body {
-        height: 100%;
-    }
+  .app-content-body {
+    height: 100%;
+  }
 }

 .resizer {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    margin-left: -2px;
-    width: 4px;
-    background: lighten($dark, 20%);
-    z-index: 1;
-    cursor: col-resize;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  margin-left: -2px;
+  width: 4px;
+  background: lighten($dark, 20%);
+  z-index: 1;
+  cursor: col-resize;

-    &:hover {
-        background: $dark;
-    }
+  &:hover {
+    background: $dark;
+  }
 }

 .doc-shcema-preview-popover {
-    box-shadow: none !important;
-    margin-top: -1px !important;
-    padding: 0 45px !important;
-    left: 0 !important;
-    width: 100% !important;
-    max-width: 980px !important;
-    z-index: 1 !important;
-    background: transparent !important;
-    border: none !important;
+  box-shadow: none !important;
+  margin-top: -1px !important;
+  padding: 0 45px !important;
+  left: 0 !important;
+  width: 100% !important;
+  max-width: 980px !important;
+  z-index: 1 !important;
+  background: transparent !important;
+  border: none !important;

-    .doc-schema-preview {
-        border: 1px solid #ddd;
-        background: rgb(240, 243, 244);
-        position: relative;
-        height: 100%;
-        width: 100%;
-    }
+  .doc-schema-preview {
+    border: 1px solid #ddd;
+    background: rgb(240, 243, 244);
+    position: relative;
+    height: 100%;
+    width: 100%;
+  }
 }

 // .view-code {
@ -73,7 +72,13 @@
 //     right: 175px;
 // }

-.amis-schema-editor.fix-settings .amis-schema-editor-settings-inner .amis-schema-editor-config-tab>.tab-content,
-.amis-schema-editor.fix-settings .amis-schema-editor-settings-inner .amis-schema-editor-code-tab>.tab-content {
-    bottom: 50px;
-}
+.amis-schema-editor.fix-settings
+  .amis-schema-editor-settings-inner
+  .amis-schema-editor-config-tab
+  > .tab-content,
+.amis-schema-editor.fix-settings
+  .amis-schema-editor-settings-inner
+  .amis-schema-editor-code-tab
+  > .tab-content {
+  bottom: 50px;
+}
--- a/package.json
+++ b/package.json
@ -10,7 +10,7 @@
    "stop": "fis3 server stop",
    "dev": "fis3 release -cwd ./public",
    "publish2npm": "sh publish.sh && npm publish",
-    "prettier": "prettier --write '{src,examples}/**/*.{tsx,ts,jsx}'"
+    "prettier": "prettier --write '{src,examples,scss}/**/*.{tsx,ts,jsx,scss}'"
  },
  "repository": {
    "type": "git",
--- a/scss/_functions.scss
+++ b/scss/_functions.scss
@ -1,42 +1,42 @@
 //下一个断点
@function breakpoint-next(
-    $name,
-    $breakpoints: breakpoints,
-    $breakpoint-names: map-keys($breakpoints)
+  $name,
+  $breakpoints: breakpoints,
+  $breakpoint-names: map-keys($breakpoints)
 ) {
-    $n: index($breakpoint-names, $name);
-    @return if(
-        $n < length($breakpoint-names),
-        nth($breakpoint-names, $n + 1),
-        null
-    );
+  $n: index($breakpoint-names, $name);
+  @return if(
+    $n < length($breakpoint-names),
+    nth($breakpoint-names, $n + 1),
+    null
+  );
 }

 //断点最小值
@function breakpoint-min($name, $breakpoints: $breakpoints) {
-    $min: map-get($breakpoints, $name); // @return if($min != 0, $min, null);
-    @return $min;
+  $min: map-get($breakpoints, $name); // @return if($min != 0, $min, null);
+  @return $min;
 }

 //断点最大值
@function breakpoint-max($name, $breakpoints: $breakpoints) {
-    $next: breakpoint-next($name, $breakpoints);
-    @return if($next, breakpoint-min($next, $breakpoints) - 1px, null);
+  $next: breakpoint-next($name, $breakpoints);
+  @return if($next, breakpoint-min($next, $breakpoints) - 1px, null);
 }

 //生成类名“-sm、-md、-lg、-cl” -xs?
@function breakpoint-infix($name, $breakpoints: $breakpoints) {
-    @return if(breakpoint-min($name, $breakpoints) ==null, "", "-#{$name}");
+  @return if(breakpoint-min($name, $breakpoints) ==null, '', '-#{$name}');
 }

@function px2rem($pixels, $context: $remFactor) {
-    @if (unitless($pixels)) {
-        $pixels: $pixels * 1px;
-    }
+  @if (unitless($pixels)) {
+    $pixels: $pixels * 1px;
+  }

-    @if (unitless($context)) {
-        $context: $context * 1px;
-    }
+  @if (unitless($context)) {
+    $context: $context * 1px;
+  }

-    @return $pixels / $context * 1rem;
+  @return $pixels / $context * 1rem;
 }
--- a/scss/_mixins.scss
+++ b/scss/_mixins.scss
@ -1,261 +1,261 @@
 // 媒体查询最小阈值
@mixin media-breakpoint-up($name, $breakpoints: $breakpoints) {
-    $min: breakpoint-min($name, $breakpoints);
+  $min: breakpoint-min($name, $breakpoints);

-    @if $min {
-        @media (min-width: $min) {
-            @content;
-        }
-    } @else {
-        @content;
+  @if $min {
+    @media (min-width: $min) {
+      @content;
    }
+  } @else {
+    @content;
+  }
 }

 //媒体查询最大阈值
@mixin media-breakpoint-down($name, $breakpoints: $breakpoints) {
-    $max: breakpoint-max($name, $breakpoints);
+  $max: breakpoint-max($name, $breakpoints);

-    @if $max {
-        @media (max-width: $max) {
-            @content;
-        }
-    } @else {
-        @content;
+  @if $max {
+    @media (max-width: $max) {
+      @content;
    }
+  } @else {
+    @content;
+  }
 }

 //媒体查询中间阈值
@mixin media-breakpoint-between($min, $max, $breakpoints: $breakpoints) {
-    $min: breakpoint-min($min, $breakpoints);
-    $max: breakpoint-max($max, $breakpoints);
+  $min: breakpoint-min($min, $breakpoints);
+  $max: breakpoint-max($max, $breakpoints);

-    @media (min-width: $min) and (max-width: $max) {
-        @content;
-    }
+  @media (min-width: $min) and (max-width: $max) {
+    @content;
+  }
 }

@mixin clearfix() {
-    &::before,
-    &::after {
-        display: table;
-        content: "";
-    }
-    &::after {
-        clear: both;
-    }
+  &::before,
+  &::after {
+    display: table;
+    content: '';
+  }
+  &::after {
+    clear: both;
+  }
 }

@mixin color-schema($bg-color: #555, $percent: 15%, $sat-percent: 100%) {
-    background-color: saturate(darken($bg-color, $percent), $sat-percent);
+  background-color: saturate(darken($bg-color, $percent), $sat-percent);
 }

@mixin color-schema-lt($bg-color: #555, $percent: 15%, $sat-percent: 100%) {
-    background-color: desaturate(lighten($bg-color, $percent), $sat-percent);
+  background-color: desaturate(lighten($bg-color, $percent), $sat-percent);
 }

@mixin color-variant(
-    $bg-color: #555,
-    $lt-percent: 10%,
-    $lter-percent: 15%,
-    $dk-percent: 10%,
-    $dker-percent: 15%
+  $bg-color: #555,
+  $lt-percent: 10%,
+  $lter-percent: 15%,
+  $dk-percent: 10%,
+  $dker-percent: 15%
 ) {
+  background-color: $bg-color;
+
+  &.lt,
+  & .lt {
+    @include color-schema-lt($bg-color, $lt-percent, 2.5%);
+  }
+
+  &.lter,
+  & .lter {
+    @include color-schema-lt($bg-color, $lter-percent, 5%);
+  }
+
+  &.dk,
+  & .dk {
+    @include color-schema($bg-color, $dk-percent, 2.5%);
+  }
+
+  &.dker,
+  & .dker {
+    @include color-schema($bg-color, $dker-percent, 5%);
+  }
+
+  &.bg,
+  & .bg {
    background-color: $bg-color;
-
-    &.lt,
-    & .lt {
-        @include color-schema-lt($bg-color, $lt-percent, 2.5%);
-    }
-
-    &.lter,
-    & .lter {
-        @include color-schema-lt($bg-color, $lter-percent, 5%);
-    }
-
-    &.dk,
-    & .dk {
-        @include color-schema($bg-color, $dk-percent, 2.5%);
-    }
-
-    &.dker,
-    & .dker {
-        @include color-schema($bg-color, $dker-percent, 5%);
-    }
-
-    &.bg,
-    & .bg {
-        background-color: $bg-color;
-    }
+  }
 }

@mixin font-variant($bg-color) {
-    $font-color: desaturate(lighten($bg-color, 40%), 10%);
-    $link-color: desaturate(lighten($bg-color, 50%), 10%);
-    $hover-color: #fff;
-    color: $font-color;
+  $font-color: desaturate(lighten($bg-color, 40%), 10%);
+  $link-color: desaturate(lighten($bg-color, 50%), 10%);
+  $hover-color: #fff;
+  color: $font-color;

-    & a {
-        color: $link-color;
+  & a {
+    color: $link-color;

-        &:hover {
-            color: $hover-color;
-        }
+    &:hover {
+      color: $hover-color;
    }
+  }

-    & .open > a {
-        &,
-        &:hover,
-        &:focus {
-            color: $hover-color;
-        }
+  & .open > a {
+    &,
+    &:hover,
+    &:focus {
+      color: $hover-color;
    }
+  }

-    & .text-muted {
-        color: darken($font-color, 10%) !important;
-    }
-
-    & .text-lt {
-        color: lighten($font-color, 25%) !important;
-    }
-
-    &.auto,
-    & .auto {
-        & .list-group-item {
-            border-color: darken($bg-color, 5%) !important;
-            background-color: transparent;
-
-            &:hover,
-            &:focus,
-            &:active,
-            &.active {
-                @include color-schema($bg-color, 5%, 2.5% !important);
-            }
-        }
+  & .text-muted {
+    color: darken($font-color, 10%) !important;
+  }
+
+  & .text-lt {
+    color: lighten($font-color, 25%) !important;
+  }
+
+  &.auto,
+  & .auto {
+    & .list-group-item {
+      border-color: darken($bg-color, 5%) !important;
+      background-color: transparent;
+
+      &:hover,
+      &:focus,
+      &:active,
+      &.active {
+        @include color-schema($bg-color, 5%, 2.5% !important);
+      }
    }
+  }
 }

@mixin text-wariant($bg-color, $name) {
-    a.bg-#{$name}:hover {
-        background-color: darken($bg-color, 5%);
-    }
+  a.bg-#{$name}:hover {
+    background-color: darken($bg-color, 5%);
+  }

-    a.text-#{$name}:hover {
-        color: darken($bg-color, 5%);
-    }
+  a.text-#{$name}:hover {
+    color: darken($bg-color, 5%);
+  }

-    .text-#{$name} {
-        color: $bg-color;
-    }
+  .text-#{$name} {
+    color: $bg-color;
+  }

-    .text-#{$name}-lt {
-        color: darken($bg-color, 5%);
-    }
+  .text-#{$name}-lt {
+    color: darken($bg-color, 5%);
+  }

-    .text-#{$name}-lter {
-        color: darken($bg-color, 10%);
-    }
+  .text-#{$name}-lter {
+    color: darken($bg-color, 10%);
+  }

-    .text-#{$name}-dk {
-        color: darken($bg-color, 5%);
-    }
+  .text-#{$name}-dk {
+    color: darken($bg-color, 5%);
+  }

-    .text-#{$name}-dker {
-        color: darken($bg-color, 10%);
-    }
+  .text-#{$name}-dker {
+    color: darken($bg-color, 10%);
+  }
 }

@mixin hover {
-    &:hover {
-        @content;
-    }
+  &:hover {
+    @content;
+  }
 }

@mixin hover-focus {
-    &:hover,
-    &:focus {
-        @content;
-    }
+  &:hover,
+  &:focus {
+    @content;
+  }
 }

@mixin hover-active {
-    &:hover:active {
-        @content;
-    }
+  &:hover:active {
+    @content;
+  }
 }

@mixin button-size(
-    $padding-y,
-    $padding-x,
-    $font-size,
-    $line-height,
-    $border-radius,
-    $height: auto,
-    $iconWdith: px2rem(20px)
+  $padding-y,
+  $padding-x,
+  $font-size,
+  $line-height,
+  $border-radius,
+  $height: auto,
+  $iconWdith: px2rem(20px)
 ) {
-    padding: $padding-y $padding-x;
-    font-size: $font-size;
-    line-height: $line-height;
-    border-radius: $border-radius;
-    height: $height;
+  padding: $padding-y $padding-x;
+  font-size: $font-size;
+  line-height: $line-height;
+  border-radius: $border-radius;
+  height: $height;

-    .#{$ns}Button-icon:first-child:not(:last-child):not(.pull-right),
-    > .pull-left {
-        margin-right: $padding-x;
-    }
+  .#{$ns}Button-icon:first-child:not(:last-child):not(.pull-right),
+  > .pull-left {
+    margin-right: $padding-x;
+  }

-    .#{$ns}Button-icon:last-child:not(:first-child):not(.pull-left),
-    > .pull-right {
-        margin-left: $padding-x;
-    }
+  .#{$ns}Button-icon:last-child:not(:first-child):not(.pull-left),
+  > .pull-right {
+    margin-left: $padding-x;
+  }
 }

@mixin button-variant(
-    $background,
-    $border: $background,
-    $color: $white,
-    $hover-background: darken($background, 7.5%),
-    $hover-border: darken($border, 10%),
-    $hover-color: $color,
-    $active-background: darken($background, 10%),
-    $active-border: darken($border, 12.5%),
-    $active-color: $color
+  $background,
+  $border: $background,
+  $color: $white,
+  $hover-background: darken($background, 7.5%),
+  $hover-border: darken($border, 10%),
+  $hover-color: $color,
+  $active-background: darken($background, 10%),
+  $active-border: darken($border, 12.5%),
+  $active-color: $color
 ) {
-    color: $color;
-    background-color: $background;
-    border-color: $border;
-    box-shadow: $Button-boxShadow;
+  color: $color;
+  background-color: $background;
+  border-color: $border;
+  box-shadow: $Button-boxShadow;

-    @include hover-focus {
-        color: $hover-color;
-        background-color: $hover-background;
-        border-color: $hover-border;
+  @include hover-focus {
+    color: $hover-color;
+    background-color: $hover-background;
+    border-color: $hover-border;
+  }
+
+  &.is-disabled,
+  &:disabled {
+    @if variable-exists(Button-onDisabled-bg) {
+      background-color: $Button-onDisabled-bg;
+    } @else {
+      background-color: $background;
    }

-    &.is-disabled,
-    &:disabled {
-        @if variable-exists(Button-onDisabled-bg) {
-            background-color: $Button-onDisabled-bg;
-        } @else {
-            background-color: $background;
-        }
-
-        @if variable-exists(Button-onDisabled-color) {
-            color: $Button-onDisabled-color;
-        } @else {
-            color: $color;
-        }
-
-        @if variable-exists(Button-onDisabled-borderColor) {
-            border-color: $Button-onDisabled-borderColor;
-        } @else {
-            border-color: $border;
-        }
+    @if variable-exists(Button-onDisabled-color) {
+      color: $Button-onDisabled-color;
+    } @else {
+      color: $color;
    }

-    &:not(:disabled):not(.is-disabled):active,
-    &:not(:disabled):not(.is-disabled).is-active {
-        color: $active-color;
-        background-color: $active-background;
-        border-color: $active-border;
+    @if variable-exists(Button-onDisabled-borderColor) {
+      border-color: $Button-onDisabled-borderColor;
+    } @else {
+      border-color: $border;
    }
+  }
+
+  &:not(:disabled):not(.is-disabled):active,
+  &:not(:disabled):not(.is-disabled).is-active {
+    color: $active-color;
+    background-color: $active-background;
+    border-color: $active-border;
+  }
 }
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@ -35,31 +35,17 @@ $dark: $gray800 !default;
 $remFactor: 16px !default;

 // 字体相关
-$fontFamilySansSerif: -apple-system,
-BlinkMacSystemFont,
-'SF Pro SC',
-'SF Pro Text',
-'Helvetica Neue',
-Helvetica,
-'PingFang SC',
-'Segoe UI',
-Roboto,
-'Hiragino Sans GB',
-'Arial',
-'microsoft yahei ui',
-'Microsoft YaHei',
-SimSun,
-sans-serif !default;
-$fontFamilyMonospace: SFMono-Regular,
-Menlo,
-Monaco,
-Consolas,
-'Liberation Mono',
-'Courier New',
-monospace !default;
+$fontFamilySansSerif: -apple-system, BlinkMacSystemFont, 'SF Pro SC',
+  'SF Pro Text', 'Helvetica Neue', Helvetica, 'PingFang SC', 'Segoe UI', Roboto,
+  'Hiragino Sans GB', 'Arial', 'microsoft yahei ui', 'Microsoft YaHei', SimSun,
+  sans-serif !default;
+$fontFamilyMonospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+  'Courier New', monospace !default;
 $fontFamilyBase: $fontFamilySansSerif !default;

-$fontSizeBase: px2rem(14px) !default; // Assumes the browser default, typically `16px`
+$fontSizeBase: px2rem(
+  14px
+) !default; // Assumes the browser default, typically `16px`
 $fontSizeMd: px2rem(16px) !default;
 $fontSizeLg: px2rem(20px) !default;
 $fontSizeXl: px2rem(24px) !default;
@ -99,11 +85,13 @@ $boxShadow: 0 0.5rem 1rem rgba($black, 0.15) !default;
 $boxShadowLg: 0 1rem 3rem rgba($black, 0.175) !default;

 // 窗口适配
-$breakpoints: (xs: 0,
+$breakpoints: (
+  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
-  xl: 1200px) !default;
+  xl: 1200px
+) !default;

 // 段落间距
 $paragraph-marginBottom: 1rem !default;
@ -159,10 +147,14 @@ $Layout-aside--md-width: px2rem(250px) !default;
 $Layout-aside--lg-width: px2rem(300px) !default;
 $Layout-aside--folded-width: px2rem(60px) !default;
 $Layout-aside-bg: $dark !default;
-$Layout-aside-onAcitve-bg: saturate(darken($Layout-aside-bg, 5%),
-  2.5%) !default;
-$Layout-aside-subList-bg: saturate(darken($Layout-aside-bg, 10%),
-  2.5%) !default;
+$Layout-aside-onAcitve-bg: saturate(
+  darken($Layout-aside-bg, 5%),
+  2.5%
+) !default;
+$Layout-aside-subList-bg: saturate(
+  darken($Layout-aside-bg, 10%),
+  2.5%
+) !default;
 $Layout-aside-onHover-bg: saturate(darken($Layout-aside-bg, 3%), 2.5%) !default;
 $Layout-aside-color: desaturate(lighten($Layout-aside-bg, 40%), 10%) !default;

@ -183,14 +175,16 @@ $Layout-asideLink-arrowColor: $Layout-asideLink-color !default;
 $Layout-asideLink-onActive-arrowColor: $Layout-asideLink-onActive-color !default;
 $Layout-asideLabel-color: darken($Layout-aside-color, 10%) !default;
 $Layout-brand-bg: $dark !default;
-$Layout-brandBar-color: desaturate(lighten($Layout-brand-bg, 40%),
-  10%) !default;
+$Layout-brandBar-color: desaturate(
+  lighten($Layout-brand-bg, 40%),
+  10%
+) !default;
 $Layout-brand-color: lighten($Layout-brandBar-color, 25%) !default;
 $Layout-header-height: px2rem(50px) !default;
 $Layout-headerBar-borderBottom: none !default;
 $Layout-header-bg: $white !default;
 $Layout-header-boxShadow: 0 px2rem(2px) px2rem(2px) rgba(0, 0, 0, 0.05),
-0 1px 0 rgba(0, 0, 0, 0.05) !default;
+  0 1px 0 rgba(0, 0, 0, 0.05) !default;
 $Layout-nav-height: px2rem(40px) !default;
 $Layout-nav-lgHeight: px2rem(50px) !default;
 $Layout-nav--folded-height: px2rem(50px) !default;
@ -223,7 +217,9 @@ $Modal-header-bg: darken($Modal-bg, 2.5%) !default;
 $Modal-title-lineHeight: $lineHeightBase !default;
 $Modal-title-fontSize: $fontSizeBase !default;
 $Modal-title-color: $text--loud-color !default;
-$Modal-header-paddingY: ($Modal-header-height - $Modal-title-lineHeight * $Modal-title-fontSize) / 2 !default;
+$Modal-header-paddingY: (
+    $Modal-header-height - $Modal-title-lineHeight * $Modal-title-fontSize
+  ) / 2 !default;
 $Modal-header-paddingX: $gap-md !default;
 $Modal-close-width: px2rem(12px) !default;
 $Modal-close-color: $text--muted-color !default;
@ -231,8 +227,10 @@ $Model-close-onHover-color: $text-color !default;
 $Modal-body-paddingX: $gap-md !default;
 $Modal-body-paddingY: $gap-md !default;
 $Modal-body--noHeader-paddingTop: $gap-base;
-$Modal-body-borderTop: $Modal-content-borderWidth solid lighten($Modal-content-borderColor, 5%) !default;
-$Modal-body-borderBottom: $Modal-content-borderWidth solid lighten($Modal-content-borderColor, 5%) !default;
+$Modal-body-borderTop: $Modal-content-borderWidth solid
+  lighten($Modal-content-borderColor, 5%) !default;
+$Modal-body-borderBottom: $Modal-content-borderWidth solid
+  lighten($Modal-content-borderColor, 5%) !default;
 $Modal-footer-padding: $gap-sm !default;
 $Modal-footer-marginY: 0 !default;
 $Modal-footer-marginX: 0 !default;
@ -355,8 +353,10 @@ $Alert-marginBottom: $gap-md !default;

 $Alert--danger-color: #a94442 !default;
 $Alert--danger-bg: #f2dede !default;
-$Alert--danger-borderColor: darken(adjust-hue($Alert--danger-bg, -10),
-  5%) !default;
+$Alert--danger-borderColor: darken(
+  adjust-hue($Alert--danger-bg, -10),
+  5%
+) !default;

 $Alert--info-color: #31708f !default;
 $Alert--info-bg: #d9edf7 !default;
@ -364,13 +364,17 @@ $Alert--info-borderColor: darken(adjust-hue($Alert--info-bg, -10), 5%) !default;

 $Alert--success-color: #3c763d !default;
 $Alert--success-bg: #dff0d8 !default;
-$Alert--success-borderColor: darken(adjust-hue($Alert--success-bg, -10),
-  5%) !default;
+$Alert--success-borderColor: darken(
+  adjust-hue($Alert--success-bg, -10),
+  5%
+) !default;

 $Alert--warning-color: #8a6d3b !default;
 $Alert--warning-bg: #fcf8e3 !default;
-$Alert--warning-borderColor: darken(adjust-hue($Alert--warning-bg, -10),
-  5%) !default;
+$Alert--warning-borderColor: darken(
+  adjust-hue($Alert--warning-bg, -10),
+  5%
+) !default;

 // spinner
 $Spinner-overlay-bg: rgba(255, 255, 255, 0.4) !default;
@ -458,7 +462,8 @@ $Table-tree-borderColor: $Table-borderColor !default;
 $TableCell-height: px2rem(40px) !default;
 $TableCell-paddingX: $gap-sm !default;
 $TableCell--edge-paddingX: $gap-md !default;
-$TableCell-paddingY: ($TableCell-height - $Table-fontSize * $Table-lineHeight) / 2;
+$TableCell-paddingY: ($TableCell-height - $Table-fontSize * $Table-lineHeight) /
+  2;
 $Table-placeholder-height: px2rem(100px) !default;

 // $Table-checkCell-width: px2rem(50px) !default;
@ -473,16 +478,20 @@ $Table-onChecked-bg: #d9f3fb !default;
 $Table-onChecked-borderColor: darken($Table-onChecked-bg, 10%) !default;
 $Table-onChecked-color: darken($Table-onChecked-bg, 40%) !default;
 $Table-onChecked-onHover-bg: darken($Table-onChecked-bg, 5%) !default;
-$Table-onChecked-onHover-borderColor: darken($Table-onChecked-borderColor,
-  5%) !default;
+$Table-onChecked-onHover-borderColor: darken(
+  $Table-onChecked-borderColor,
+  5%
+) !default;
 $Table-onChecked-onHover-color: darken($Table-onChecked-color, 5%) !default;

 $Table-onModified-bg: #e8f0fe !default;
 $Table-onModified-color: #4285f4 !default;
 $Table-onModified-borderColor: darken($Table-onModified-bg, 5%) !default;
 $Table-onModified-onHover-bg: darken($Table-onModified-bg, 2.5%) !default;
-$Table-onModified-onHover-borderColor: darken($Table-onModified-onHover-bg,
-  5%) !default;
+$Table-onModified-onHover-borderColor: darken(
+  $Table-onModified-onHover-bg,
+  5%
+) !default;
 $Table-onModified-onHover-color: darken($Table-onModified-color, 5%) !default;

 $Table-onDragging-opacity: 0.1 !default;
@ -641,10 +650,15 @@ $Form-input-placeholderColor: $text--muted-color !default;
 $Form-input-lineHeight: 20/14 !default;
 $Form-input-fontSize: $Form-fontSize !default;
 $Form-input-boxShadow: none !default;
-$Form-input-paddingY: ($Form-input-height - $Form-input-lineHeight * $Form-input-fontSize - px2rem(2px))/2 !default;
+$Form-input-paddingY: (
+    $Form-input-height - $Form-input-lineHeight * $Form-input-fontSize -
+      px2rem(2px)
+  )/2 !default;
 $Form-input-paddingX: px2rem(12px) !default;
 $Form-input-marginBottom: px2rem(6px) !default;
-$Form-label-paddingTop: ($Form-input-height - $Form-input-lineHeight * $Form-input-fontSize)/2 !default;
+$Form-label-paddingTop: (
+    $Form-input-height - $Form-input-lineHeight * $Form-input-fontSize
+  )/2 !default;

 $Form-input-addOnBg: #edf1f2 !default;
 $Form-input-addOnColor: $text-color !default;
@ -686,10 +700,14 @@ $Form-select-onFocused-borderColor: $Form-input-onFocused-borderColor !default;
 $Form-select-onError-borderColor: $Form-input-onError-borderColor !default;
 $Form-selectOption-height: $Form-input-height !default;
 $Form-selectValue-color: $info !default;
-$Form-selectValue-bg: saturate(lighten($Form-selectValue-color, 40%),
-  2.5%) !default;
-$Form-selectValue-borderColor: saturate(lighten($Form-selectValue-color, 30%),
-  2.5%) !default;
+$Form-selectValue-bg: saturate(
+  lighten($Form-selectValue-color, 40%),
+  2.5%
+) !default;
+$Form-selectValue-borderColor: saturate(
+  lighten($Form-selectValue-color, 30%),
+  2.5%
+) !default;
 $Form-selectValue-fontSize: $fontSizeSm !default;
 $Form-select-caret-vender: 'FontAwesome' !default;
 $Form-select-caret-icon: '\f0d7' !default;
@ -718,7 +736,10 @@ $InputGroup-addOn-bg: $Form-input-addOnBg !default;
 $InputGroup-addOn-borderWidth: $Form-input-borderWidth !default;
 $InputGroup-addOn-borderColor: $Form-input-borderColor !default;
 $InputGroup-addOn-borderRadius: $Form-input-borderRadius !default;
-$InputGroup-paddingY: ($InputGroup-height - $Form-input-lineHeight * $Form-input-fontSize - px2rem(2px))/2 !default;
+$InputGroup-paddingY: (
+    $InputGroup-height - $Form-input-lineHeight * $Form-input-fontSize -
+      px2rem(2px)
+  )/2 !default;
 $InputGroup-paddingX: px2rem(10px) !default;
 $InputGroup-addOn-onFocused-borderColor: $Form-input-onFocused-borderColor !default;
 $InputGroup-select-borderWidth: $Form-select-borderWidth !default;
@ -744,7 +765,10 @@ $Button-height: $Form-input-height !default;
 $Button-mimWidth: auto !default;
 $Button-lineHeight: $Form-input-lineHeight !default;
 $Button-paddingX: px2rem(12px) !default;
-$Button-paddingY: ($Button-height - $Button-borderWidth * 2 - $Button-lineHeight * $Button-fontSize)/2 !default;
+$Button-paddingY: (
+    $Button-height - $Button-borderWidth * 2 - $Button-lineHeight *
+      $Button-fontSize
+  )/2 !default;

 $Button--iconOnly-minWidthRate: 4 / 3 !default;

@ -752,28 +776,40 @@ $Button--xs-fontSize: $fontSizeXs !default;
 $Button--xs-height: px2rem(22px) !default;
 $Button--xs-lineHeight: 18 / 11 !default;
 $Button--xs-paddingX: px2rem(5px) !default;
-$Button--xs-paddingY: ($Button--xs-height - $Button-borderWidth * 2 - $Button--xs-lineHeight * $Button--xs-fontSize)/2 !default;
+$Button--xs-paddingY: (
+    $Button--xs-height - $Button-borderWidth * 2 - $Button--xs-lineHeight *
+      $Button--xs-fontSize
+  )/2 !default;

 $Button--sm-fontSize: $fontSizeSm !default;
 $Button--sm-height: px2rem(30px) !default;
 $Button--sm-lineHeight: 18 / 12 !default;
 $Button--sm-paddingX: px2rem(8px) !default;
-$Button--sm-paddingY: ($Button--sm-height - $Button-borderWidth * 2 - $Button--sm-lineHeight * $Button--sm-fontSize)/2 !default;
+$Button--sm-paddingY: (
+    $Button--sm-height - $Button-borderWidth * 2 - $Button--sm-lineHeight *
+      $Button--sm-fontSize
+  )/2 !default;

 $Button--md-fontSize: $Button-fontSize !default;
 $Button--md-height: $Button-height !default;
 $Button--md-lineHeight: $Button-lineHeight !default;
 $Button--md-paddingX: $Button-paddingX !default;
-$Button--md-paddingY: ($Button--md-height - $Button-borderWidth * 2 - $Button--md-lineHeight * $Button--md-fontSize)/2 !default;
+$Button--md-paddingY: (
+    $Button--md-height - $Button-borderWidth * 2 - $Button--md-lineHeight *
+      $Button--md-fontSize
+  )/2 !default;

 $Button--lg-fontSize: $fontSizeLg !default;
 $Button--lg-height: px2rem(46px) !default;
 $Button--lg-lineHeight: 24 / 20 !default;
 $Button--lg-paddingX: px2rem(16px) !default;
-$Button--lg-paddingY: ($Button--lg-height - $Button-borderWidth * 2 - $Button--lg-lineHeight * $Button--lg-fontSize)/2 !default;
+$Button--lg-paddingY: (
+    $Button--lg-height - $Button-borderWidth * 2 - $Button--lg-lineHeight *
+      $Button--lg-fontSize
+  )/2 !default;

 $Button-boxShadow: inset 0 1px 0 rgba($white, 0.15),
-0 1px 1px rgba($black, 0.075) !default;
+  0 1px 1px rgba($black, 0.075) !default;
 $Button-onFocus-boxShadow: none !default;
 $Button-onActive-boxShadow: inset 0 3px 5px rgba($black, 0.125) !default;
 $Button-onDisabled-opacity: 0.65 !default;
@ -785,10 +821,8 @@ $Button-borderRadius: $borderRadius !default;
 $Button--lg-borderRadius: $borderRadius !default;
 $Button--sm-borderRadius: $borderRadius !default;

-$Button-transition: color 0.15s ease-in-out,
-background-color 0.15s ease-in-out,
-border-color 0.15s ease-in-out,
-box-shadow 0.15s ease-in-out !default;
+$Button-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
+  border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !default;

 $Button--primary-bg: $primary !default;
 $Button--primary-border: $Button--primary-bg !default;
@ -797,20 +831,26 @@ $Button--primary-onHover-bg: darken($Button--primary-bg, 7.5%) !default;
 $Button--primary-onHover-border: darken($Button--primary-border, 10%) !default;
 $Button--primary-onHover-color: $Button--primary-color !default;
 $Button--primary-onActive-bg: darken($Button--primary-bg, 10%) !default;
-$Button--primary-onActive-border: darken($Button--primary-border,
-  12.5%) !default;
+$Button--primary-onActive-border: darken(
+  $Button--primary-border,
+  12.5%
+) !default;
 $Button--primary-onActive-color: $Button--primary-color !default;

 $Button--secondary-bg: $secondary !default;
 $Button--secondary-border: $Button--secondary-bg !default;
 $Button--secondary-color: $white !default;
 $Button--secondary-onHover-bg: darken($Button--secondary-bg, 7.5%) !default;
-$Button--secondary-onHover-border: darken($Button--secondary-border,
-  10%) !default;
+$Button--secondary-onHover-border: darken(
+  $Button--secondary-border,
+  10%
+) !default;
 $Button--secondary-onHover-color: $Button--secondary-color !default;
 $Button--secondary-onActive-bg: darken($Button--secondary-bg, 10%) !default;
-$Button--secondary-onActive-border: darken($Button--secondary-border,
-  12.5%) !default;
+$Button--secondary-onActive-border: darken(
+  $Button--secondary-border,
+  12.5%
+) !default;
 $Button--secondary-onActive-color: $Button--secondary-color !default;

 $Button--success-bg: $success !default;
@ -820,8 +860,10 @@ $Button--success-onHover-bg: darken($Button--success-bg, 7.5%) !default;
 $Button--success-onHover-border: darken($Button--success-border, 10%) !default;
 $Button--success-onHover-color: $Button--success-color !default;
 $Button--success-onActive-bg: darken($Button--success-bg, 10%) !default;
-$Button--success-onActive-border: darken($Button--success-border,
-  12.5%) !default;
+$Button--success-onActive-border: darken(
+  $Button--success-border,
+  12.5%
+) !default;
 $Button--success-onActive-color: $Button--success-color !default;

 $Button--info-bg: $info !default;
@ -841,8 +883,10 @@ $Button--warning-onHover-bg: darken($Button--warning-bg, 7.5%) !default;
 $Button--warning-onHover-border: darken($Button--warning-border, 10%) !default;
 $Button--warning-onHover-color: $Button--warning-color !default;
 $Button--warning-onActive-bg: darken($Button--warning-bg, 10%) !default;
-$Button--warning-onActive-border: darken($Button--warning-border,
-  12.5%) !default;
+$Button--warning-onActive-border: darken(
+  $Button--warning-border,
+  12.5%
+) !default;
 $Button--warning-onActive-color: $Button--warning-color !default;

 $Button--danger-bg: $danger !default;
@ -882,8 +926,10 @@ $Button--default-onHover-bg: darken($Button--default-bg, 7.5%) !default;
 $Button--default-onHover-border: darken($Button--default-border, 10%) !default;
 $Button--default-onHover-color: $Button--default-color !default;
 $Button--default-onActive-bg: darken($Button--default-bg, 10%) !default;
-$Button--default-onActive-border: darken($Button--default-border,
-  12.5%) !default;
+$Button--default-onActive-border: darken(
+  $Button--default-border,
+  12.5%
+) !default;
 $Button--default-onActive-color: $Button--default-color !default;

 $Button--link-color: $text-color !default;
@ -899,7 +945,9 @@ $DropDown-menu-height: px2rem(34px) !default;
 $DropDown-menu-minWidth: px2rem(160px) !default;
 $DropDown-menu-paddingY: $gap-xs !default;
 $DropDown-menu-paddingX: 0 !default;
-$DropDown-menuItem-paddingY: ($DropDown-menu-height - $fontSizeBase * $lineHeightBase) / 2 !default;
+$DropDown-menuItem-paddingY: (
+    $DropDown-menu-height - $fontSizeBase * $lineHeightBase
+  ) / 2 !default;
 $DropDown-menuItem-paddingX: $gap-sm !default;
 $DropDown-menuItem-onHover-color: inherit !default;
 $DropDown-menuItem-onHover-bg: $Button--default-onHover-bg !default;
@ -954,7 +1002,9 @@ $ColorPicker-height: $Form-input-height !default;
 $ColorPicker-lineHeight: $Form-input-lineHeight !default;
 $ColorPicker-fontSize: $Form-input-fontSize !default;
 $ColorPicker-paddingX: px2rem(12px) !default;
-$ColorPicker-paddingY: ($ColorPicker-height - $ColorPicker-lineHeight * $ColorPicker-fontSize)/2 - $ColorPicker-borderWidth !default;
+$ColorPicker-paddingY: (
+    $ColorPicker-height - $ColorPicker-lineHeight * $ColorPicker-fontSize
+  )/2 - $ColorPicker-borderWidth !default;
 $ColorPicker-placeholderColor: $Form-input-placeholderColor !default;
 $ColorPicker-onFocused-borderColor: $Form-input-onFocused-borderColor !default;
 $DatePicker-onHover-borderColor: $Form-input-borderColor !default;
@ -970,7 +1020,9 @@ $DatePicker-height: $Form-input-height !default;
 $DatePicker-lineHeight: $Form-input-lineHeight !default;
 $DatePicker-fontSize: $Form-input-fontSize !default;
 $DatePicker-paddingX: px2rem(12px) !default;
-$DatePicker-paddingY: ($DatePicker-height - $DatePicker-lineHeight * $DatePicker-fontSize)/2 - $DatePicker-borderWidth !default;
+$DatePicker-paddingY: (
+    $DatePicker-height - $DatePicker-lineHeight * $DatePicker-fontSize
+  )/2 - $DatePicker-borderWidth !default;
 $DatePicker-placeholderColor: $Form-input-placeholderColor !default;
 $DatePicker-iconColor: $icon-color !default;
 $DatePicker-onHover-iconColor: $icon-onHover-color !default;
@ -996,13 +1048,18 @@ $Calendar-input-borderRadius: $borderRadius !default;
 $Calendar-input-height: px2rem(30px) !default;
 $Calendar-input-lineHeight: $lineHeightBase;
 $Calendar-input-paddingX: px2rem(10px) !default;
-$Calendar-input-paddingY: ($Calendar-input-height - $Calendar-input-lineHeight * $Calendar-input-fontSize) / 2;
+$Calendar-input-paddingY: (
+    $Calendar-input-height - $Calendar-input-lineHeight *
+      $Calendar-input-fontSize
+  ) / 2;

 $Calendar-btn-fontSize: $fontSizeSm !default;
 $Calendar-btn-lineHeight: $lineHeightBase !default;
 $Calendar-btn-height: px2rem(30px) !default;
 $Calendar-btn-paddingX: px2rem(10px) !default;
-$Calendar-btn-paddingY: ($Calendar-btn-height - $Calendar-btn-lineHeight * $Calendar-btn-fontSize)/2 !default;
+$Calendar-btn-paddingY: (
+    $Calendar-btn-height - $Calendar-btn-lineHeight * $Calendar-btn-fontSize
+  )/2 !default;

 $Calendar-btn-bg: $info !default;
 $Calendar-btn-border: $Calendar-btn-bg !default;
@ -1020,12 +1077,16 @@ $Calendar-btnCancel-border: $Calendar-btnCancel-bg !default;
 $Calendar-btnCancel-borderRadius: $Button-borderRadius !default;
 $Calendar-btnCancel-color: $text-color !default;
 $Calendar-btnCancel-onHover-bg: darken($Calendar-btnCancel-bg, 7.5%) !default;
-$Calendar-btnCancel-onHover-border: darken($Calendar-btnCancel-border,
-  10%) !default;
+$Calendar-btnCancel-onHover-border: darken(
+  $Calendar-btnCancel-border,
+  10%
+) !default;
 $Calendar-btnCancel-onHover-color: $Calendar-btnCancel-color !default;
 $Calendar-btnCancel-onActive-bg: darken($Calendar-btnCancel-bg, 10%) !default;
-$Calendar-btnCancel-onActive-border: darken($Calendar-btnCancel-border,
-  12.5%) !default;
+$Calendar-btnCancel-onActive-border: darken(
+  $Calendar-btnCancel-border,
+  12.5%
+) !default;
 $Calendar-btnCancel-onActive-color: $Calendar-btnCancel-color !default;

 $Calendar-color: $text-color !default;
@ -1048,14 +1109,18 @@ $ListControl-item-paddingX: px2rem(12px) !default;
 $ListControl-item-paddingY: px2rem(6px) !default;
 $ListControl-item-color: $text-color !default;

-$ListControl-item-onHover-borderColor: darken($ListControl-item-borderColor,
-  10%) !default;
+$ListControl-item-onHover-borderColor: darken(
+  $ListControl-item-borderColor,
+  10%
+) !default;
 $ListControl-item-onHover-bg: darken($ListControl-item-bg, 7.5%) !default;
 $ListControl-item-onHover-color: $ListControl-item-color !default;

 $ListControl-item-onActive-bg: $primary !default;
-$ListControl-item-onActive-borderColor: darken($ListControl-item-onActive-bg,
-  10%) !default;
+$ListControl-item-onActive-borderColor: darken(
+  $ListControl-item-onActive-bg,
+  10%
+) !default;
 $ListControl-item-onActive-color: $white !default;
 $ListControl-item-onActive-before-bg: $white !default;
 $ListControl-item-onActive-after-borderColor: $primary !default;
@ -1088,7 +1153,10 @@ $Combo-addBtn-borderRadius: $Button-borderRadius;
 $Combo-addBtn-height: px2rem(26px) !default;
 $Combo-addBtn-lineHeight: $Button--sm-lineHeight !default;
 $Combo-addBtn-paddingX: $Button--sm-paddingX !default;
-$Combo-addBtn-paddingY: ($Combo-addBtn-height - $Button-borderWidth * 2 - $Combo-addBtn-lineHeight * $Combo-addBtn-fontSize)/2 !default;
+$Combo-addBtn-paddingY: (
+    $Combo-addBtn-height - $Button-borderWidth * 2 - $Combo-addBtn-lineHeight *
+      $Combo-addBtn-fontSize
+  )/2 !default;

 $Combo--vertical-item-gap: px2rem(5px);
 $Combo--vertical-item-borderColor: $borderColor !default;
@ -1103,8 +1171,10 @@ $Combo--vertical-itemToolbar-bg: $info !default;
 $Combo--vertical-itemToolbar-color: darken($white, 5%) !default;
 $Combo--vertical-itemToolbar-onHover-color: $white !default;
 $Combo--vertical-itemToolbar-borderWidth: $borderWidth !default;
-$Combo--vertical-itemToolbar-borderColor: darken($Combo--vertical-itemToolbar-bg,
-  5%) !default;
+$Combo--vertical-itemToolbar-borderColor: darken(
+  $Combo--vertical-itemToolbar-bg,
+  5%
+) !default;
 $Combo--vertical-itemToolbar-borderRadius: px2rem(3px) !default;
 $Combo--vertical-itemToolbar-transion: all 0.25s ease-in-out !default;
 $Combo--vertical-itemToolbar-positionTop: -$Combo--vertical-itemToolbar-height !default;
@ -1120,8 +1190,10 @@ $SubForm--addBtn-onHover-bg: darken($SubForm--addBtn-bg, 7.5%) !default;
 $SubForm--addBtn-onHover-border: darken($SubForm--addBtn-border, 10%) !default;
 $SubForm--addBtn-onHover-color: $SubForm--addBtn-color !default;
 $SubForm--addBtn-onActive-bg: darken($SubForm--addBtn-bg, 10%) !default;
-$SubForm--addBtn-onActive-border: darken($SubForm--addBtn-border,
-  12.5%) !default;
+$SubForm--addBtn-onActive-border: darken(
+  $SubForm--addBtn-border,
+  12.5%
+) !default;
 $SubForm--addBtn-onActive-color: $SubForm--addBtn-color !default;

 $SubForm--addBtn-fontSize: $Button--sm-fontSize !default;
@ -1129,7 +1201,10 @@ $SubForm--addBtn-borderRadius: $Button-borderRadius;
 $SubForm--addBtn-height: $Button--sm-height !default;
 $SubForm--addBtn-lineHeight: $Button--sm-lineHeight !default;
 $SubForm--addBtn-paddingX: $Button--sm-paddingX !default;
-$SubForm--addBtn-paddingY: ($SubForm--addBtn-height - $Button-borderWidth * 2 - $SubForm--addBtn-lineHeight * $SubForm--addBtn-fontSize)/2 !default;
+$SubForm--addBtn-paddingY: (
+    $SubForm--addBtn-height - $Button-borderWidth * 2 -
+      $SubForm--addBtn-lineHeight * $SubForm--addBtn-fontSize
+  )/2 !default;

 // InputRange
 $InputRange-fontFamily: $fontFamilyBase !default;
@ -1142,15 +1217,17 @@ $InputRange-onDisabled-color: #cccccc !default;
 $InputRange-slider-bg: $InputRange-primaryColor !default;
 $InputRange-slider-border: px2rem(1px) solid $InputRange-primaryColor !default;
 $InputRange-slider-onFocus-borderRadius: $borderRadiusMd !default;
-$InputRange-slider-onFocus-boxShadow: 0 0 0 $InputRange-slider-onFocus-borderRadius transparentize($InputRange-slider-bg, 0.8) !default;
+$InputRange-slider-onFocus-boxShadow: 0 0 0
+  $InputRange-slider-onFocus-borderRadius
+  transparentize($InputRange-slider-bg, 0.8) !default;
 $InputRange-slider-height: px2rem(24px) !default;
 $InputRange-slider-width: px2rem(18px) !default;
-$InputRange-slider-transition: transform 0.3s ease-out,
-box-shadow 0.3s ease-out !default;
+$InputRange-slider-transition: transform 0.3s ease-out, box-shadow 0.3s ease-out !default;
 $InputRange-sliderContainer-transition: left 0.3s ease-out !default;
 $InputRange-slider-onActive-transform: scale(1.3) !default;
 $InputRange-slider-onDisabled-bg: $InputRange-onDisabled-color !default;
-$InputRange-slider-onDisabled-border: px2rem(1px) solid $InputRange-onDisabled-color !default;
+$InputRange-slider-onDisabled-border: px2rem(1px) solid
+  $InputRange-onDisabled-color !default;

 // input-range-label
 $InputRange-label-color: $InputRange-neutralColor !default;
@ -1162,8 +1239,7 @@ $InputRange-label--value-positionTop: px2rem(-40px) !default;
 // input-range-track
 $InputRange-track-bg: $InputRange-neutralLightColor !default;
 $InputRange-track-height: px2rem(12px) !default;
-$InputRange-track-transition: left 0.3s ease-out,
-width 0.3s ease-out !default;
+$InputRange-track-transition: left 0.3s ease-out, width 0.3s ease-out !default;
 $InputRange-track-onActive-bg: $InputRange-primaryColor !default;
 $InputRange-track-onDisabled-bg: $InputRange-neutralLightColor !default;

@ -1172,12 +1248,16 @@ $ImageControl-addBtn-bg: $Button--default-bg !default;
 $ImageControl-addBtn-border: $Button--default-border !default;
 $ImageControl-addBtn-color: $Button--default-color !default;
 $ImageControl-addBtn-onHover-bg: darken($ImageControl-addBtn-bg, 7.5%) !default;
-$ImageControl-addBtn-onHover-border: darken($ImageControl-addBtn-border,
-  10%) !default;
+$ImageControl-addBtn-onHover-border: darken(
+  $ImageControl-addBtn-border,
+  10%
+) !default;
 $ImageControl-addBtn-onHover-color: $Button--default-color !default;
 $ImageControl-addBtn-onActive-bg: darken($ImageControl-addBtn-bg, 10%) !default;
-$ImageControl-addBtn-onActive-border: darken($ImageControl-addBtn-border,
-  12.5%) !default;
+$ImageControl-addBtn-onActive-border: darken(
+  $ImageControl-addBtn-border,
+  12.5%
+) !default;
 $ImageControl-addBtn-onActive-color: $ImageControl-addBtn-color !default;
 $ImageControl-addBtn-onDisabled-bg: $Form-input-onDisabled-bg !default;
 $ImageControl-addBtn-onDisabled-border: $Form-input-onDisabled-borderColor !default;
@ -1190,12 +1270,16 @@ $TagControl-sugBtn-bg: $Button--default-bg !default;
 $TagControl-sugBtn-border: $Button--default-border !default;
 $TagControl-sugBtn-color: $Button--default-color !default;
 $TagControl-sugBtn-onHover-bg: darken($TagControl-sugBtn-bg, 7.5%) !default;
-$TagControl-sugBtn-onHover-border: darken($TagControl-sugBtn-border,
-  10%) !default;
+$TagControl-sugBtn-onHover-border: darken(
+  $TagControl-sugBtn-border,
+  10%
+) !default;
 $TagControl-sugBtn-onHover-color: $Button--default-color !default;
 $TagControl-sugBtn-onActive-bg: darken($TagControl-sugBtn-bg, 10%) !default;
-$TagControl-sugBtn-onActive-border: darken($TagControl-sugBtn-border,
-  12.5%) !default;
+$TagControl-sugBtn-onActive-border: darken(
+  $TagControl-sugBtn-border,
+  12.5%
+) !default;
 $TagControl-sugBtn-onActive-color: $TagControl-sugBtn-color !default;

 $TagControl-sugBtn-borderWidth: $Button-borderWidth !default;
@ -1204,7 +1288,10 @@ $TagControl-sugBtn-borderRadius: $Button-borderRadius !default;
 $TagControl-sugBtn-height: $Button--sm-height !default;
 $TagControl-sugBtn-lineHeight: $Button--sm-lineHeight !default;
 $TagControl-sugBtn-paddingX: $Button--sm-paddingX !default;
-$TagControl-sugBtn-paddingY: ($TagControl-sugBtn-height - $Button-borderWidth * 2 - $TagControl-sugBtn-lineHeight * $TagControl-sugBtn-fontSize)/2 !default;
+$TagControl-sugBtn-paddingY: (
+    $TagControl-sugBtn-height - $Button-borderWidth * 2 -
+      $TagControl-sugBtn-lineHeight * $TagControl-sugBtn-fontSize
+  )/2 !default;

 // Wizard
 $Wizard-steps-bg: $gray100 !default;
@ -1378,4 +1465,4 @@ $Picker-iconColor: $icon-color !default;
 $Picker-onHover-iconColor: $icon-onHover-color !default;
 $Picker-btn-vendor: 'FontAwesome' !default;
 $Picker-btn-fontSize: $Form-fontSize !default;
-$Picker-btn-icon: '\f2d2' !default;
+$Picker-btn-icon: '\f2d2' !default;
--- a/scss/base/_normalize.scss
+++ b/scss/base/_normalize.scss
@ -9,8 +9,8 @@
 */

 html {
-    line-height: 1.15; // 1
-    -webkit-text-size-adjust: 100%; //2
+  line-height: 1.15; // 1
+  -webkit-text-size-adjust: 100%; //2
 }

 /* Sections
@ -21,7 +21,7 @@ html {
   */

 body {
-    margin: 0;
+  margin: 0;
 }

 /**
@ -30,8 +30,8 @@ body {
   */

 h1 {
-    font-size: 2em;
-    margin: 0.67em 0;
+  font-size: 2em;
+  margin: 0.67em 0;
 }

 /* Grouping content
@ -43,9 +43,9 @@ h1 {
   */

 hr {
-    box-sizing: content-box; // 1
-    height: 0; // 2
-    overflow: visible; //2
+  box-sizing: content-box; // 1
+  height: 0; // 2
+  overflow: visible; //2
 }

 /**
@ -54,8 +54,8 @@ hr {
   */

 pre {
-    font-family: monospace, monospace; // 1
-    font-size: 1em; // 2
+  font-family: monospace, monospace; // 1
+  font-size: 1em; // 2
 }

 /* Text-level semantics
@ -66,7 +66,7 @@ pre {
   */

 a {
-    background-color: transparent;
+  background-color: transparent;
 }

 /**
@ -75,9 +75,9 @@ a {
   */

 abbr[title] {
-    border-bottom: none; // 1
-    text-decoration: underline; // 2
-    text-decoration: underline dotted; // 2
+  border-bottom: none; // 1
+  text-decoration: underline; // 2
+  text-decoration: underline dotted; // 2
 }

 /**
@ -86,7 +86,7 @@ abbr[title] {

 b,
 strong {
-    font-weight: bolder;
+  font-weight: bolder;
 }

 /**
@ -97,8 +97,8 @@ strong {
 code,
 kbd,
 samp {
-    font-family: monospace, monospace; // 1
-    font-size: 1em; // 2
+  font-family: monospace, monospace; // 1
+  font-size: 1em; // 2
 }

 /**
@ -106,7 +106,7 @@ samp {
   */

 small {
-    font-size: 80%;
+  font-size: 80%;
 }

 /**
@ -116,18 +116,18 @@ small {

 sub,
 sup {
-    font-size: 75%;
-    line-height: 0;
-    position: relative;
-    vertical-align: baseline;
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
 }

 sub {
-    bottom: -0.25em;
+  bottom: -0.25em;
 }

 sup {
-    top: -0.5em;
+  top: -0.5em;
 }

 /* Embedded content
@ -138,7 +138,7 @@ sup {
   */

 img {
-    border-style: none;
+  border-style: none;
 }

 /* Forms
@ -154,10 +154,10 @@ input,
 optgroup,
 select,
 textarea {
-    font-family: inherit; // 1
-    font-size: 100%; // 1
-    line-height: 1.15; // 1
-    margin: 0; // 2
+  font-family: inherit; // 1
+  font-size: 100%; // 1
+  line-height: 1.15; // 1
+  margin: 0; // 2
 }

 /**
@ -167,7 +167,7 @@ textarea {

 button,
 input {
-    overflow: visible; // 1
+  overflow: visible; // 1
 }

 /**
@ -177,7 +177,7 @@ input {

 button,
 select {
-    text-transform: none; // 1
+  text-transform: none; // 1
 }

 /**
@ -185,10 +185,10 @@ select {
   */

 button,
-[type="button"],
-[type="reset"],
-[type="submit"] {
-    -webkit-appearance: button;
+[type='button'],
+[type='reset'],
+[type='submit'] {
+  -webkit-appearance: button;
 }

 /**
@ -196,11 +196,11 @@ button,
   */

 button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
-    border-style: none;
-    padding: 0;
+[type='button']::-moz-focus-inner,
+[type='reset']::-moz-focus-inner,
+[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
 }

 /**
@ -208,10 +208,10 @@ button::-moz-focus-inner,
   */

 button:-moz-focusring,
-[type="button"]:-moz-focusring,
-[type="reset"]:-moz-focusring,
-[type="submit"]:-moz-focusring {
-    outline: 1px dotted ButtonText;
+[type='button']:-moz-focusring,
+[type='reset']:-moz-focusring,
+[type='submit']:-moz-focusring {
+  outline: 1px dotted ButtonText;
 }

 /**
@ -219,7 +219,7 @@ button:-moz-focusring,
   */

 fieldset {
-    padding: 0.35em 0.75em 0.625em;
+  padding: 0.35em 0.75em 0.625em;
 }

 /**
@ -230,12 +230,12 @@ fieldset {
   */

 legend {
-    box-sizing: border-box; // 1
-    color: inherit; // 2
-    display: table; // 1
-    max-width: 100%; // 1
-    padding: 0; // 3
-    white-space: normal; // 1
+  box-sizing: border-box; // 1
+  color: inherit; // 2
+  display: table; // 1
+  max-width: 100%; // 1
+  padding: 0; // 3
+  white-space: normal; // 1
 }

 /**
@ -243,7 +243,7 @@ legend {
   */

 progress {
-    vertical-align: baseline;
+  vertical-align: baseline;
 }

 /**
@ -251,7 +251,7 @@ progress {
   */

 textarea {
-    overflow: auto;
+  overflow: auto;
 }

 /**
@ -259,19 +259,19 @@ textarea {
   * 2. Remove the padding in IE 10.
   */

-[type="checkbox"],
-[type="radio"] {
-    box-sizing: border-box; // 1
-    padding: 0; // 2
+[type='checkbox'],
+[type='radio'] {
+  box-sizing: border-box; // 1
+  padding: 0; // 2
 }

 /**
   * Correct the cursor style of increment and decrement buttons in Chrome.
   */

-[type="number"]::-webkit-inner-spin-button,
-[type="number"]::-webkit-outer-spin-button {
-    height: auto;
+[type='number']::-webkit-inner-spin-button,
+[type='number']::-webkit-outer-spin-button {
+  height: auto;
 }

 /**
@ -279,17 +279,17 @@ textarea {
   * 2. Correct the outline style in Safari.
   */

-[type="search"] {
-    -webkit-appearance: textfield; // 1
-    outline-offset: -2px; // 2
+[type='search'] {
+  -webkit-appearance: textfield; // 1
+  outline-offset: -2px; // 2
 }

 /**
   * Remove the inner padding in Chrome and Safari on macOS.
   */

-[type="search"]::-webkit-search-decoration {
-    -webkit-appearance: none;
+[type='search']::-webkit-search-decoration {
+  -webkit-appearance: none;
 }

 /**
@ -298,8 +298,8 @@ textarea {
   */

 ::-webkit-file-upload-button {
-    -webkit-appearance: button; // 1
-    font: inherit; // 2
+  -webkit-appearance: button; // 1
+  font: inherit; // 2
 }

 /* Interactive
@ -310,7 +310,7 @@ textarea {
   */

 details {
-    display: block;
+  display: block;
 }

 /*
@ -318,7 +318,7 @@ details {
   */

 summary {
-    display: list-item;
+  display: list-item;
 }

 /* Misc
@ -329,7 +329,7 @@ summary {
   */

 template {
-    display: none;
+  display: none;
 }

 /**
@ -337,14 +337,13 @@ template {
   */

 [hidden] {
-    display: none;
+  display: none;
 }

-
 svg.icon {
-    width: 1em;
-    height: 1em;
-    top: 0.125em;
-    position: relative;
-    fill: currentColor;
-}
+  width: 1em;
+  height: 1em;
+  top: 0.125em;
+  position: relative;
+  fill: currentColor;
+}
--- a/scss/base/_reset.scss
+++ b/scss/base/_reset.scss
@ -3,16 +3,16 @@

 // Reset box sizing to border box
 html {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }

 *,
 *::before,
 *::after {
-    box-sizing: inherit;
+  box-sizing: inherit;
 }

 // Remove figure margin
 figure {
-    margin: 0;
+  margin: 0;
 }
--- a/scss/base/_typography.scss
+++ b/scss/base/_typography.scss
@ -2,32 +2,32 @@
 * Basic typography style for copy text
 */
 html {
-    font-size: $remFactor;
+  font-size: $remFactor;
 }

 body {
-    color: $body-color;
-    background-color: $body-bg;
-    font-size: $body-size;
-    font-weight: $body-weight;
-    font-family: $fontFamilyBase;
-    line-height: $body-lineHeight;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
+  color: $body-color;
+  background-color: $body-bg;
+  font-size: $body-size;
+  font-weight: $body-weight;
+  font-family: $fontFamilyBase;
+  line-height: $body-lineHeight;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }

 a {
-    color: $link-color;
-    text-decoration: $link-decoration;
+  color: $link-color;
+  text-decoration: $link-decoration;

-    &:hover {
-        color: $link-onHover-color;
-        text-decoration: $link-onHover-decoration;
-    }
+  &:hover {
+    color: $link-onHover-color;
+    text-decoration: $link-onHover-decoration;
+  }
 }

 label {
-    font-weight: $fontWeightNormal;
+  font-weight: $fontWeightNormal;
 }

 h1,
@ -36,11 +36,11 @@ h3,
 h4,
 h5,
 h6 {
-    font-weight: $fontWeightNormal;
-    color: $text--loud-color;
-    line-height: 1.1;
+  font-weight: $fontWeightNormal;
+  color: $text--loud-color;
+  line-height: 1.1;
 }

 .is-matched {
-    color: $danger;
+  color: $danger;
 }
--- a/scss/components/_alert.scss
+++ b/scss/components/_alert.scss
@ -1,56 +1,56 @@
 .#{$ns}Alert {
-    font-size: $Alert-fontSize;
-    box-shadow: $Alert-boxShadow;
-    padding: $Alert-paddingY $Alert-paddingX;
-    border: $Alert-borderWidth solid $Alert-borderColor;
-    border-radius: $Alert-borderRadius;
-    margin-bottom: $Alert-marginBottom;
+  font-size: $Alert-fontSize;
+  box-shadow: $Alert-boxShadow;
+  padding: $Alert-paddingY $Alert-paddingX;
+  border: $Alert-borderWidth solid $Alert-borderColor;
+  border-radius: $Alert-borderRadius;
+  margin-bottom: $Alert-marginBottom;

-    &-close {
-        outline: none;
-        padding: 0;
-        cursor: pointer;
-        background: transparent;
-        border: 0;
-        float: right;
-        font-size: 21px;
-        font-weight: 700;
-        line-height: 1;
-        color: #000;
-        text-shadow: 0 1px 0 #fff;
-        filter: alpha(opacity=20);
-        opacity: 0.2;
+  &-close {
+    outline: none;
+    padding: 0;
+    cursor: pointer;
+    background: transparent;
+    border: 0;
+    float: right;
+    font-size: 21px;
+    font-weight: 700;
+    line-height: 1;
+    color: #000;
+    text-shadow: 0 1px 0 #fff;
+    filter: alpha(opacity=20);
+    opacity: 0.2;

-        &:hover {
-            color: #000;
-            text-decoration: none;
-            cursor: pointer;
-            filter: alpha(opacity=50);
-            opacity: 0.5;
-        }
+    &:hover {
+      color: #000;
+      text-decoration: none;
+      cursor: pointer;
+      filter: alpha(opacity=50);
+      opacity: 0.5;
    }
+  }

-    &--danger {
-        color: $Alert--danger-color;
-        background-color: $Alert--danger-bg;
-        border-color: $Alert--danger-borderColor;
-    }
+  &--danger {
+    color: $Alert--danger-color;
+    background-color: $Alert--danger-bg;
+    border-color: $Alert--danger-borderColor;
+  }

-    &--info {
-        color: $Alert--info-color;
-        background-color: $Alert--info-bg;
-        border-color: $Alert--info-borderColor;
-    }
+  &--info {
+    color: $Alert--info-color;
+    background-color: $Alert--info-bg;
+    border-color: $Alert--info-borderColor;
+  }

-    &--success {
-        color: $Alert--success-color;
-        background-color: $Alert--success-bg;
-        border-color: $Alert--success-borderColor;
-    }
+  &--success {
+    color: $Alert--success-color;
+    background-color: $Alert--success-bg;
+    border-color: $Alert--success-borderColor;
+  }

-    &--warning {
-        color: $Alert--warning-color;
-        background-color: $Alert--warning-bg;
-        border-color: $Alert--warning-borderColor;
-    }
+  &--warning {
+    color: $Alert--warning-color;
+    background-color: $Alert--warning-bg;
+    border-color: $Alert--warning-borderColor;
+  }
 }
--- a/scss/components/_audio.scss
+++ b/scss/components/_audio.scss
@ -1,146 +1,146 @@
@mixin input-range {
-    -webkit-appearance: none;
-    outline: none;
-    border: none;
-    padding: 0;
-    background: none;
+  -webkit-appearance: none;
+  outline: none;
+  border: none;
+  padding: 0;
+  background: none;

-    &::-webkit-slider-runnable-track {
-        background-color: $Audio-track-bg;
-        height: $Audio-track-height;
-        border-radius: $Audio-track-borderRadius;
-        border: $Audio-track-border;
-    }
+  &::-webkit-slider-runnable-track {
+    background-color: $Audio-track-bg;
+    height: $Audio-track-height;
+    border-radius: $Audio-track-borderRadius;
+    border: $Audio-track-border;
+  }

-    &::-webkit-slider-thumb {
-        -webkit-appearance: none !important;
-        border-radius: 100%;
-        cursor: pointer;
-        background: $Audio-thumb-bg;
-        width: $Audio-thumb-width;
-        height: $Audio-thumb-height;
-        margin-top: $Audio-thumb-marginTop;
-    }
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none !important;
+    border-radius: 100%;
+    cursor: pointer;
+    background: $Audio-thumb-bg;
+    width: $Audio-thumb-width;
+    height: $Audio-thumb-height;
+    margin-top: $Audio-thumb-marginTop;
+  }
 }

@mixin svg {
-    width: $Audio-svg-width;
-    height: $Audio-svg-height;
-    position: relative;
-    top: $Audio-svg-top;
+  width: $Audio-svg-width;
+  height: $Audio-svg-height;
+  position: relative;
+  top: $Audio-svg-top;
 }

 .#{$ns}Audio-original {
-    display: none;
+  display: none;
 }

 .#{$ns}Audio--inline {
-    display: inline-block;
+  display: inline-block;
 }

 .#{$ns}Audio {
-    box-sizing: border-box;
-    height: $Audio-height;
-    line-height: $Audio-lineHeight;
-    border: $Audio-border;
-    padding-left: $Audio-item-margin;
-    overflow: hidden;
+  box-sizing: border-box;
+  height: $Audio-height;
+  line-height: $Audio-lineHeight;
+  border: $Audio-border;
+  padding-left: $Audio-item-margin;
+  overflow: hidden;

-    &-controls {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
+  &-controls {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  &-rates {
+    width: $Audio-rate-width;
+    height: $Audio-rate-height;
+    text-align: center;
+    background: $Audio-rate-bg;
+    cursor: pointer;
+    margin-right: $Audio-item-margin;
+  }
+
+  &-rateControl {
+    margin-right: $Audio-item-margin;
+
+    &::after {
+      clear: both;
+      content: '';
    }

-    &-rates {
-        width: $Audio-rate-width;
-        height: $Audio-rate-height;
-        text-align: center;
-        background: $Audio-rate-bg;
-        cursor: pointer;
-        margin-right: $Audio-item-margin;
+    .#{$ns}Audio-rateControlItem {
+      width: $Audio-rate-width;
+      height: $Audio-rate-height;
+      background: $Audio-rate-bg;
+      cursor: pointer;
+      text-align: center;
+      float: left;
+      box-sizing: border-box;
+      border-right: $Audio-rateControlItem-borderRight;
+    }
+  }
+
+  &-play {
+    width: $Audio-play-width;
+    cursor: pointer;
+    margin-right: $Audio-item-margin;
+
+    svg {
+      @include svg();
+    }
+  }
+
+  &-times {
+    width: $Audio-times-width;
+    margin-right: $Audio-item-margin;
+    cursor: default;
+    flex-shrink: 0;
+  }
+
+  &-process {
+    flex: auto;
+    cursor: pointer;
+    min-width: $Audio-process-minWidth;
+    margin-right: $Audio-item-margin;
+
+    input[type='range'] {
+      @include input-range();
+    }
+  }
+
+  &-volume {
+    width: $Audio-volume-width;
+    height: $Audio-volume-height;
+    line-height: $Audio-volume-lineHeight;
+    cursor: pointer;
+    margin-right: $Audio-item-margin;
+
+    svg {
+      @include svg();
+    }
+  }
+
+  &-volumeControl {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: $Audio-volumeControl-width;
+    height: $Audio-volume-height;
+    line-height: $Audio-volume-lineHeight;
+    margin-right: $Audio-item-margin;
+
+    input[type='range'] {
+      @include input-range();
    }

-    &-rateControl {
-        margin-right: $Audio-item-margin;
-
-        &::after {
-            clear: both;
-            content: "";
-        }
-
-        .#{$ns}Audio-rateControlItem {
-            width: $Audio-rate-width;
-            height: $Audio-rate-height;
-            background: $Audio-rate-bg;
-            cursor: pointer;
-            text-align: center;
-            float: left;
-            box-sizing: border-box;
-            border-right: $Audio-rateControlItem-borderRight;
-        }
+    .#{$ns}Audio-volumeControlIcon {
+      margin-right: $Audio-item-margin;
+      cursor: pointer;
    }

-    &-play {
-        width: $Audio-play-width;
-        cursor: pointer;
-        margin-right: $Audio-item-margin;
-
-        svg {
-            @include svg();
-        }
-    }
-
-    &-times {
-        width: $Audio-times-width;
-        margin-right: $Audio-item-margin;
-        cursor: default;
-        flex-shrink: 0;
-    }
-
-    &-process {
-        flex: auto;
-        cursor: pointer;
-        min-width: $Audio-process-minWidth;
-        margin-right: $Audio-item-margin;
-
-        input[type="range"] {
-            @include input-range();
-        }
-    }
-
-    &-volume {
-        width: $Audio-volume-width;
-        height: $Audio-volume-height;
-        line-height: $Audio-volume-lineHeight;
-        cursor: pointer;
-        margin-right: $Audio-item-margin;
-
-        svg {
-            @include svg();
-        }
-    }
-
-    &-volumeControl {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        width: $Audio-volumeControl-width;
-        height: $Audio-volume-height;
-        line-height: $Audio-volume-lineHeight;
-        margin-right: $Audio-item-margin;
-
-        input[type="range"] {
-            @include input-range();
-        }
-
-        .#{$ns}Audio-volumeControlIcon {
-            margin-right: $Audio-item-margin;
-            cursor: pointer;
-        }
-
-        svg {
-            @include svg();
-        }
+    svg {
+      @include svg();
    }
+  }
 }
--- a/scss/components/_button-group.scss
+++ b/scss/components/_button-group.scss
@ -1,129 +1,129 @@
 .#{$ns}ButtonGroup {
+  position: relative;
+  display: inline-flex;
+  vertical-align: middle;
+
+  > .#{$ns}Button {
    position: relative;
-    display: inline-flex;
-    vertical-align: middle;
+    flex: 0 1 auto;
+  }

+  @if $Button-borderWidth>0 {
    > .#{$ns}Button {
-        position: relative;
-        flex: 0 1 auto;
+      @include hover {
+        z-index: 1;
+      }
+
+      &:focus,
+      &:active,
+      &.active,
+      &.is-active {
+        z-index: 1;
+      }
    }

-    @if $Button-borderWidth>0 {
-        > .#{$ns}Button {
-            @include hover {
-                z-index: 1;
-            }
-
-            &:focus,
-            &:active,
-            &.active,
-            &.is-active {
-                z-index: 1;
-            }
-        }
-
-        .#{$ns}Button + .#{$ns}Button,
-        .#{$ns}Button + .#{$ns}ButtonGroup,
-        .#{$ns}ButtonGroup + .#{$ns}Button,
-        .#{$ns}ButtonGroup + .#{$ns}ButtonGroup {
-            margin-left: -$Button-borderWidth;
-        }
-    } @else if
-        (
-            variable-exists("ButtonGroup-divider-width") and
-                variable-exists("ButtonGroup-divider-color")
-        )
-    {
-        background-color: $ButtonGroup-divider-color;
-
-        > .#{$ns}Button + .#{$ns}Button {
-            margin-left: $ButtonGroup-divider-width;
-        }
+    .#{$ns}Button + .#{$ns}Button,
+    .#{$ns}Button + .#{$ns}ButtonGroup,
+    .#{$ns}ButtonGroup + .#{$ns}Button,
+    .#{$ns}ButtonGroup + .#{$ns}ButtonGroup {
+      margin-left: -$Button-borderWidth;
    }
+  } @else if
+    (
+      variable-exists('ButtonGroup-divider-width') and
+        variable-exists('ButtonGroup-divider-color')
+    )
+  {
+    background-color: $ButtonGroup-divider-color;
+
+    > .#{$ns}Button + .#{$ns}Button {
+      margin-left: $ButtonGroup-divider-width;
+    }
+  }
 }

 .#{$ns}ButtonToolbar {
-    display: inline-flex;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    align-items: center;
+  display: inline-flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-items: center;

-    .#{$ns}ButtonGroup {
-        margin-left: px2rem(5px);
-        margin-top: px2rem(5px);
-        width: auto;
-    }
+  .#{$ns}ButtonGroup {
+    margin-left: px2rem(5px);
+    margin-top: px2rem(5px);
+    width: auto;
+  }
 }

 .#{$ns}ButtonGroup {
-    > .#{$ns}Button:first-child {
-        margin-left: 0;
+  > .#{$ns}Button:first-child {
+    margin-left: 0;
+  }
+
+  // cxd的ButtonGroup的is-active和:active样式不一样，这里做个兼容
+  .#{$ns}Button--primary:not(:disabled):not(.is-disabled).is-active {
+    @if variable-exists('ButtonGroup--primary-isActive-color') {
+      color: $ButtonGroup--primary-isActive-color;
    }
-
-    // cxd的ButtonGroup的is-active和:active样式不一样，这里做个兼容
-    .#{$ns}Button--primary:not(:disabled):not(.is-disabled).is-active{
-        @if variable-exists("ButtonGroup--primary-isActive-color") {
-            color: $ButtonGroup--primary-isActive-color;
-        }
-        @if variable-exists("ButtonGroup--primary-isActive-bg") {
-            background-color: $ButtonGroup--primary-isActive-bg;
-        }
-    }
-
-    @if $Button-borderWidth>0 {
-        > .#{$ns}Button:not(:last-child),
-        > .#{$ns}ButtonGroup:not(:last-child) > .#{$ns}Button {
-            border-top-right-radius: 0;
-            border-bottom-right-radius: 0;
-        }
-
-        > .#{$ns}Button:not(:first-child),
-        > .#{$ns}ButtonGroup:not(:first-child) > .#{$ns}Button {
-            border-top-left-radius: 0;
-            border-bottom-left-radius: 0;
-        }
-    }
-}
-
-.#{$ns}ButtonGroup--vertical {
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: center;
-
-    .#{$ns}Button,
-    .#{$ns}ButtonGroup {
-        width: 100%;
-    }
-
-    > .#{$ns}Button + .#{$ns}Button,
-    > .#{$ns}Button + .#{$ns}ButtonGroup,
-    > .#{$ns}ButtonGroup + .#{$ns}Button,
-    > .#{$ns}ButtonGroup + .#{$ns}ButtonGroup {
-        margin-top: -$Button-borderWidth;
-        margin-left: 0;
+    @if variable-exists('ButtonGroup--primary-isActive-bg') {
+      background-color: $ButtonGroup--primary-isActive-bg;
    }
+  }

+  @if $Button-borderWidth>0 {
    > .#{$ns}Button:not(:last-child),
    > .#{$ns}ButtonGroup:not(:last-child) > .#{$ns}Button {
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: 0;
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
    }

    > .#{$ns}Button:not(:first-child),
-    > .#{$ns}ButtonGroup:not(:first-child) > .btn {
-        border-top-left-radius: 0;
-        border-top-right-radius: 0;
+    > .#{$ns}ButtonGroup:not(:first-child) > .#{$ns}Button {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
    }
+  }
+}
+
+.#{$ns}ButtonGroup--vertical {
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+
+  .#{$ns}Button,
+  .#{$ns}ButtonGroup {
+    width: 100%;
+  }
+
+  > .#{$ns}Button + .#{$ns}Button,
+  > .#{$ns}Button + .#{$ns}ButtonGroup,
+  > .#{$ns}ButtonGroup + .#{$ns}Button,
+  > .#{$ns}ButtonGroup + .#{$ns}ButtonGroup {
+    margin-top: -$Button-borderWidth;
+    margin-left: 0;
+  }
+
+  > .#{$ns}Button:not(:last-child),
+  > .#{$ns}ButtonGroup:not(:last-child) > .#{$ns}Button {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  > .#{$ns}Button:not(:first-child),
+  > .#{$ns}ButtonGroup:not(:first-child) > .btn {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
 }

 .#{$ns}ButtonGroupControl {
-    display: inline-block;
+  display: inline-block;

-    > .#{$ns}ButtonGroup--sm {
-        margin-top: ($Form-input-height - $Button--sm-height) / 2;
-    }
+  > .#{$ns}ButtonGroup--sm {
+    margin-top: ($Form-input-height - $Button--sm-height) / 2;
+  }

-    > .#{$ns}ButtonGroup--xs {
-        margin-top: ($Form-input-height - $Button--xs-height) / 2;
-    }
+  > .#{$ns}ButtonGroup--xs {
+    margin-top: ($Form-input-height - $Button--xs-height) / 2;
+  }
 }
--- a/scss/components/_button.scss
+++ b/scss/components/_button.scss
@ -1,340 +1,340 @@
 .#{$ns}Button {
-    display: inline-block;
-    font-weight: $Button-fontWeight;
-    text-align: center;
-    vertical-align: middle;
-    user-select: none;
-    background-color: transparent;
-    border: $Button-borderWidth solid transparent;
-    transition: $Button-transition;
-    white-space: nowrap;
+  display: inline-block;
+  font-weight: $Button-fontWeight;
+  text-align: center;
+  vertical-align: middle;
+  user-select: none;
+  background-color: transparent;
+  border: $Button-borderWidth solid transparent;
+  transition: $Button-transition;
+  white-space: nowrap;

-    @if $Button-mimWidth !=auto {
-        min-width: $Button-mimWidth;
+  @if $Button-mimWidth !=auto {
+    min-width: $Button-mimWidth;
+  }
+
+  @include button-size(
+    $Button-paddingY,
+    $Button-paddingX,
+    $Button-fontSize,
+    $Button-lineHeight,
+    $Button-borderRadius,
+    $Button-height
+  );
+
+  @include hover-focus {
+    color: $text-color;
+    text-decoration: none;
+  }
+
+  &:focus,
+  &.focus {
+    outline: 0;
+    box-shadow: $Button-onFocus-boxShadow;
+  }
+
+  &.is-disabled,
+  &:disabled {
+    opacity: $Button-onDisabled-opacity;
+    box-shadow: none;
+    pointer-events: none;
+    border-color: $Button-onDisabled-borderColor;
+
+    @if variable-exists(Button-onDisabled-bg) {
+      background-color: $Button-onDisabled-bg !important;
    }

-    @include button-size(
-        $Button-paddingY,
-        $Button-paddingX,
-        $Button-fontSize,
-        $Button-lineHeight,
-        $Button-borderRadius,
-        $Button-height
-    );
-
-    @include hover-focus {
-        color: $text-color;
-        text-decoration: none;
+    @if variable-exists(Button-onDisabled-color) {
+      color: $Button-onDisabled-color !important;
    }

-    &:focus,
-    &.focus {
-        outline: 0;
-        box-shadow: $Button-onFocus-boxShadow;
+    &.is-active,
+    &:active {
+      @if variable-exists(Button-onDisabledActive-bg) {
+        background-color: $Button-onDisabledActive-bg !important;
+      }
    }
+  }

-    &.is-disabled,
-    &:disabled {
-        opacity: $Button-onDisabled-opacity;
-        box-shadow: none;
-        pointer-events: none;
-        border-color: $Button-onDisabled-borderColor;
+  &:not(:disabled):not(.is-disabled) {
+    cursor: pointer;
+  }

-        @if variable-exists(Button-onDisabled-bg) {
-            background-color: $Button-onDisabled-bg !important;
-        }
+  &:not(:disabled):not(.is-disabled):active,
+  &:not(:disabled):not(.is-disabled).is-active {
+    box-shadow: $Button-onActive-boxShadow;

-        @if variable-exists(Button-onDisabled-color) {
-            color: $Button-onDisabled-color !important;
-        }
-
-        &.is-active,
-        &:active {
-            @if variable-exists(Button-onDisabledActive-bg) {
-                background-color: $Button-onDisabledActive-bg !important;
-            }
-        }
+    &:focus {
+      box-shadow: $Button-onActive-boxShadow;
    }
+  }

-    &:not(:disabled):not(.is-disabled) {
-        cursor: pointer;
-    }
+  > .pull-left,
+  > .pull-right {
+    line-height: inherit;
+  }

-    &:not(:disabled):not(.is-disabled):active,
-    &:not(:disabled):not(.is-disabled).is-active {
-        box-shadow: $Button-onActive-boxShadow;
-
-        &:focus {
-            box-shadow: $Button-onActive-boxShadow;
-        }
-    }
-
-    > .pull-left,
-    > .pull-right {
-        line-height: inherit;
-    }
-
-    > .fa,
-    > .iconfont,
-    > .glyphicon {
-        font-size: inherit;
-    }
+  > .fa,
+  > .iconfont,
+  > .glyphicon {
+    font-size: inherit;
+  }
 }

 a.#{$ns}Button.is-disabled,
 fieldset:disabled a.#{$ns}Button {
-    pointer-events: none;
+  pointer-events: none;
 }

 .#{$ns}Button--primary {
-    @include button-variant(
-        $Button--primary-bg,
-        $Button--primary-border,
-        $Button--primary-color,
-        $Button--primary-onHover-bg,
-        $Button--primary-onHover-border,
-        $Button--primary-onHover-color,
-        $Button--primary-onActive-bg,
-        $Button--primary-onActive-border,
-        $Button--primary-onActive-color
-    );
+  @include button-variant(
+    $Button--primary-bg,
+    $Button--primary-border,
+    $Button--primary-color,
+    $Button--primary-onHover-bg,
+    $Button--primary-onHover-border,
+    $Button--primary-onHover-color,
+    $Button--primary-onActive-bg,
+    $Button--primary-onActive-border,
+    $Button--primary-onActive-color
+  );
 }

 .#{$ns}Button--secondary {
-    @include button-variant(
-        $Button--secondary-bg,
-        $Button--secondary-border,
-        $Button--secondary-color,
-        $Button--secondary-onHover-bg,
-        $Button--secondary-onHover-border,
-        $Button--secondary-onHover-color,
-        $Button--secondary-onActive-bg,
-        $Button--secondary-onActive-border,
-        $Button--secondary-onActive-color
-    );
+  @include button-variant(
+    $Button--secondary-bg,
+    $Button--secondary-border,
+    $Button--secondary-color,
+    $Button--secondary-onHover-bg,
+    $Button--secondary-onHover-border,
+    $Button--secondary-onHover-color,
+    $Button--secondary-onActive-bg,
+    $Button--secondary-onActive-border,
+    $Button--secondary-onActive-color
+  );
 }

 .#{$ns}Button--success {
-    @include button-variant(
-        $Button--success-bg,
-        $Button--success-border,
-        $Button--success-color,
-        $Button--success-onHover-bg,
-        $Button--success-onHover-border,
-        $Button--success-onHover-color,
-        $Button--success-onActive-bg,
-        $Button--success-onActive-border,
-        $Button--success-onActive-color
-    );
+  @include button-variant(
+    $Button--success-bg,
+    $Button--success-border,
+    $Button--success-color,
+    $Button--success-onHover-bg,
+    $Button--success-onHover-border,
+    $Button--success-onHover-color,
+    $Button--success-onActive-bg,
+    $Button--success-onActive-border,
+    $Button--success-onActive-color
+  );
 }

 .#{$ns}Button--info {
-    @include button-variant(
-        $Button--info-bg,
-        $Button--info-border,
-        $Button--info-color,
-        $Button--info-onHover-bg,
-        $Button--info-onHover-border,
-        $Button--info-onHover-color,
-        $Button--info-onActive-bg,
-        $Button--info-onActive-border,
-        $Button--info-onActive-color
-    );
+  @include button-variant(
+    $Button--info-bg,
+    $Button--info-border,
+    $Button--info-color,
+    $Button--info-onHover-bg,
+    $Button--info-onHover-border,
+    $Button--info-onHover-color,
+    $Button--info-onActive-bg,
+    $Button--info-onActive-border,
+    $Button--info-onActive-color
+  );
 }

 .#{$ns}Button--warning {
-    @include button-variant(
-        $Button--warning-bg,
-        $Button--warning-border,
-        $Button--warning-color,
-        $Button--warning-onHover-bg,
-        $Button--warning-onHover-border,
-        $Button--warning-onHover-color,
-        $Button--warning-onActive-bg,
-        $Button--warning-onActive-border,
-        $Button--warning-onActive-color
-    );
+  @include button-variant(
+    $Button--warning-bg,
+    $Button--warning-border,
+    $Button--warning-color,
+    $Button--warning-onHover-bg,
+    $Button--warning-onHover-border,
+    $Button--warning-onHover-color,
+    $Button--warning-onActive-bg,
+    $Button--warning-onActive-border,
+    $Button--warning-onActive-color
+  );
 }

 .#{$ns}Button--danger {
-    @include button-variant(
-        $Button--danger-bg,
-        $Button--danger-border,
-        $Button--danger-color,
-        $Button--danger-onHover-bg,
-        $Button--danger-onHover-border,
-        $Button--danger-onHover-color,
-        $Button--danger-onActive-bg,
-        $Button--danger-onActive-border,
-        $Button--danger-onActive-color
-    );
+  @include button-variant(
+    $Button--danger-bg,
+    $Button--danger-border,
+    $Button--danger-color,
+    $Button--danger-onHover-bg,
+    $Button--danger-onHover-border,
+    $Button--danger-onHover-color,
+    $Button--danger-onActive-bg,
+    $Button--danger-onActive-border,
+    $Button--danger-onActive-color
+  );
 }

 .#{$ns}Button--light {
-    @include button-variant(
-        $Button--light-bg,
-        $Button--light-border,
-        $Button--light-color,
-        $Button--light-onHover-bg,
-        $Button--light-onHover-border,
-        $Button--light-onHover-color,
-        $Button--light-onActive-bg,
-        $Button--light-onActive-border,
-        $Button--light-onActive-color
-    );
+  @include button-variant(
+    $Button--light-bg,
+    $Button--light-border,
+    $Button--light-color,
+    $Button--light-onHover-bg,
+    $Button--light-onHover-border,
+    $Button--light-onHover-color,
+    $Button--light-onActive-bg,
+    $Button--light-onActive-border,
+    $Button--light-onActive-color
+  );
 }

 .#{$ns}Button--dark {
-    @include button-variant(
-        $Button--dark-bg,
-        $Button--dark-border,
-        $Button--dark-color,
-        $Button--dark-onHover-bg,
-        $Button--dark-onHover-border,
-        $Button--dark-onHover-color,
-        $Button--dark-onActive-bg,
-        $Button--dark-onActive-border,
-        $Button--dark-onActive-color
-    );
+  @include button-variant(
+    $Button--dark-bg,
+    $Button--dark-border,
+    $Button--dark-color,
+    $Button--dark-onHover-bg,
+    $Button--dark-onHover-border,
+    $Button--dark-onHover-color,
+    $Button--dark-onActive-bg,
+    $Button--dark-onActive-border,
+    $Button--dark-onActive-color
+  );
 }

 .#{$ns}Button--default {
-    @include button-variant(
-        $Button--default-bg,
-        $Button--default-border,
-        $Button--default-color,
-        $Button--default-onHover-bg,
-        $Button--default-onHover-border,
-        $Button--default-onHover-color,
-        $Button--default-onActive-bg,
-        $Button--default-onActive-border,
-        $Button--default-onActive-color
-    );
+  @include button-variant(
+    $Button--default-bg,
+    $Button--default-border,
+    $Button--default-color,
+    $Button--default-onHover-bg,
+    $Button--default-onHover-border,
+    $Button--default-onHover-color,
+    $Button--default-onActive-bg,
+    $Button--default-onActive-border,
+    $Button--default-onActive-color
+  );
 }

 .#{$ns}Button--xs {
-    @include button-size(
-        $Button--xs-paddingY,
-        $Button--xs-paddingX,
-        $Button--xs-fontSize,
-        $Button--xs-lineHeight,
-        $Button--sm-borderRadius,
-        $Button--xs-height
-    );
+  @include button-size(
+    $Button--xs-paddingY,
+    $Button--xs-paddingX,
+    $Button--xs-fontSize,
+    $Button--xs-lineHeight,
+    $Button--sm-borderRadius,
+    $Button--xs-height
+  );

-    &.#{$ns}Button--iconOnly {
-        min-width: $Button--xs-height * $Button--iconOnly-minWidthRate;
-    }
+  &.#{$ns}Button--iconOnly {
+    min-width: $Button--xs-height * $Button--iconOnly-minWidthRate;
+  }
 }

 .#{$ns}Button--sm {
-    @include button-size(
-        $Button--sm-paddingY,
-        $Button--sm-paddingX,
-        $Button--sm-fontSize,
-        $Button--sm-lineHeight,
-        $Button--sm-borderRadius,
-        $Button--sm-height
-    );
+  @include button-size(
+    $Button--sm-paddingY,
+    $Button--sm-paddingX,
+    $Button--sm-fontSize,
+    $Button--sm-lineHeight,
+    $Button--sm-borderRadius,
+    $Button--sm-height
+  );

-    &.#{$ns}Button--iconOnly {
-        min-width: $Button--sm-height * $Button--iconOnly-minWidthRate;
-    }
+  &.#{$ns}Button--iconOnly {
+    min-width: $Button--sm-height * $Button--iconOnly-minWidthRate;
+  }
 }

 .#{$ns}Button--md {
-    @include button-size(
-        $Button--md-paddingY,
-        $Button--md-paddingX,
-        $Button--md-fontSize,
-        $Button--md-lineHeight,
-        $Button-borderRadius,
-        $Button--md-height
-    );
+  @include button-size(
+    $Button--md-paddingY,
+    $Button--md-paddingX,
+    $Button--md-fontSize,
+    $Button--md-lineHeight,
+    $Button-borderRadius,
+    $Button--md-height
+  );

-    &.#{$ns}Button--iconOnly {
-        min-width: $Button--md-height * $Button--iconOnly-minWidthRate;
-    }
+  &.#{$ns}Button--iconOnly {
+    min-width: $Button--md-height * $Button--iconOnly-minWidthRate;
+  }
 }

 .#{$ns}Button--lg {
-    @include button-size(
-        $Button--lg-paddingY,
-        $Button--lg-paddingX,
-        $Button--lg-fontSize,
-        $Button--lg-lineHeight,
-        $Button--lg-borderRadius,
-        $Button--lg-height
-    );
+  @include button-size(
+    $Button--lg-paddingY,
+    $Button--lg-paddingX,
+    $Button--lg-fontSize,
+    $Button--lg-lineHeight,
+    $Button--lg-borderRadius,
+    $Button--lg-height
+  );

-    &.#{$ns}Button--iconOnly {
-        min-width: $Button--lg-height * $Button--iconOnly-minWidthRate;
-    }
+  &.#{$ns}Button--iconOnly {
+    min-width: $Button--lg-height * $Button--iconOnly-minWidthRate;
+  }
 }

 .#{$ns}Button--iconOnly {
-    min-width: $Button-height * $Button--iconOnly-minWidthRate;
+  min-width: $Button-height * $Button--iconOnly-minWidthRate;

-    &:not(.#{$ns}Button--link) {
-        > .fa,
-        > .iconfont {
-            font-size: $fontSizeMd;
-        }
-
-        > .iconfont {
-            line-height: 1;
-        }
+  &:not(.#{$ns}Button--link) {
+    > .fa,
+    > .iconfont {
+      font-size: $fontSizeMd;
    }
+
+    > .iconfont {
+      line-height: 1;
+    }
+  }
 }

 .#{$ns}Button--link {
-    width: auto;
-    min-width: auto;
-    font-weight: $fontWeightNormal;
-    color: $Button--link-color;
-    text-decoration: $link-decoration;
-    border: none;
+  width: auto;
+  min-width: auto;
+  font-weight: $fontWeightNormal;
+  color: $Button--link-color;
+  text-decoration: $link-decoration;
+  border: none;

-    @include hover-focus {
-        color: $Button--link-onHover-color;
-        text-decoration: $link-onHover-decoration;
-        box-shadow: none;
-    }
+  @include hover-focus {
+    color: $Button--link-onHover-color;
+    text-decoration: $link-onHover-decoration;
+    box-shadow: none;
+  }

-    &:disabled,
-    &.is-disabled {
-        color: $text--muted-color;
-        pointer-events: none;
-    }
+  &:disabled,
+  &.is-disabled {
+    color: $text--muted-color;
+    pointer-events: none;
+  }
 }

 .#{$ns}Button--block {
-    display: block;
-    width: 100%;
+  display: block;
+  width: 100%;

-    + .#{$ns}Button--block {
-        margin-top: $gap-base;
-    }
+  + .#{$ns}Button--block {
+    margin-top: $gap-base;
+  }
 }

-input[type="submit"],
-input[type="reset"],
-input[type="button"] {
-    &.#{$ns}Button--block {
-        width: 100%;
-    }
+input[type='submit'],
+input[type='reset'],
+input[type='button'] {
+  &.#{$ns}Button--block {
+    width: 100%;
+  }
 }

 .#{$ns}ButtonToolbar {
-    margin-left: px2rem(-5px);
-    margin-top: px2rem(-5px);
+  margin-left: px2rem(-5px);
+  margin-top: px2rem(-5px);

-    > .#{$ns}Button {
-        margin-left: px2rem(5px);
-        margin-top: px2rem(5px);
-    }
+  > .#{$ns}Button {
+    margin-left: px2rem(5px);
+    margin-top: px2rem(5px);
+  }
 }

 .#{$ns}Button--disabled-wrap {
-    display: inline-block !important;
+  display: inline-block !important;
 }
--- a/scss/components/_card.scss
+++ b/scss/components/_card.scss
@ -1,178 +1,178 @@
 .#{$ns}Card {
-    background-color: $Card-bg;
-    border: $Card-borderWidth solid $Card-borderColor;
-    border-radius: $Card-borderRadius;
-    margin-bottom: $gap-base;
+  background-color: $Card-bg;
+  border: $Card-borderWidth solid $Card-borderColor;
+  border-radius: $Card-borderRadius;
+  margin-bottom: $gap-base;
+  position: relative;
+
+  &-title {
+    color: $text--loud-color;
+    font-size: $fontSizeMd;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &-subTitle {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: $text--muted-color;
+  }
+
+  &-checkBtn {
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: $gap-sm;
+    z-index: 1;
+
+    .#{$ns}Checkbox {
+      margin-right: 0;
+    }
+  }
+
+  &-dragBtn {
+    cursor: pointer;
+    float: right;
+    margin: $gap-sm;
+  }
+
+  &-heading {
+    overflow: hidden;
+    padding: $gap-sm $gap-base;
+  }
+
+  &-avtar {
+    float: left;
+    margin-right: $gap-base;
+    max-width: px2rem(200px);
+
+    img {
+      max-width: 100%;
+    }
+  }
+
+  &-meta {
+    display: block;
+    height: 100%;
+    overflow: hidden;
    position: relative;
+    margin-right: $gap-md;
+  }

-    &-title {
-        color: $text--loud-color;
-        font-size: $fontSizeMd;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
+  &-highlight {
+    background-color: $success;
+    width: px2rem(8px);
+    height: px2rem(8px);
+    border-radius: 100%;
+    display: inline-block;
+    position: absolute;
+    top: px2rem(5px);
+    right: px2rem(2px);
+  }

-    &-subTitle {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        color: $text--muted-color;
-    }
+  &-body {
+    padding: $gap-base;
+  }

-    &-checkBtn {
-        position: absolute;
-        top: 0;
-        right: 0;
-        margin: $gap-sm;
-        z-index: 1;
+  &-heading + &-body {
+    padding-top: $gap-xs;
+  }

-        .#{$ns}Checkbox {
-            margin-right: 0;
-        }
-    }
+  &-field {
+    position: relative;
+    display: flex;
+    flex-wrap: nowrap;
+  }

-    &-dragBtn {
+  &-fieldValue {
+    position: relative;
+    flex-basis: 0;
+    flex-grow: 1;
+  }
+
+  &-fieldLabel {
+    width: px2rem(60px);
+    color: $text--muted-color;
+  }
+
+  &-actions {
+    border-top: $Card-borderWidth solid $Card-actions-borderColor;
+    display: table;
+    width: 100%;
+
+    > a {
+      background-color: transparent;
+      display: table-cell;
+      border-color: $Card-actions-borderColor;
+      border-style: solid;
+      border-width: 0 $Card-borderWidth 0 0;
+      color: $text-color;
+      text-align: center;
+      line-height: px2rem(40px);
+      // font-size: $fontSizeBase;
+
+      &:not(is-disabled) {
        cursor: pointer;
-        float: right;
-        margin: $gap-sm;
+      }
+
+      &:last-child {
+        border: none;
+      }
+
+      &:hover {
+        background-color: $Card-actions-onHover-bg;
+        color: $Card-actions-onHover-color;
+        text-decoration: none;
+      }
+    }
+  }
+
+  &.is-checked {
+    background-color: $Card-onChecked-bg;
+    border-color: $Card-onChecked-borderColor;
+    color: $Card-onChecked-color;
+
+    .#{$ns}Card-actions,
+    .#{$ns}Card-actions > a {
+      border-color: $Card-onChecked-borderColor;
+      color: $Card-onChecked-color;
    }

-    &-heading {
-        overflow: hidden;
-        padding: $gap-sm $gap-base;
+    .#{$ns}Card-fieldLabel {
+      color: lighten($Card-onChecked-color, 20%);
    }

-    &-avtar {
-        float: left;
-        margin-right: $gap-base;
-        max-width: px2rem(200px);
+    .#{$ns}Card-actions > a:hover {
+      background-color: $Card-actions-onChecked-onHover-bg;
+      color: darken($Card-onChecked-color, 10%);
+    }
+  }

-        img {
-            max-width: 100%;
-        }
+  &.is-modified,
+  &.is-moved {
+    background-color: $Card-onModified-bg;
+    border-color: $Card-onModified-borderColor;
+    color: $Card-onModified-color;
+
+    .#{$ns}Card-actions,
+    .#{$ns}Card-actions > a {
+      border-color: $Card-onModified-borderColor;
+      color: $Card-onModified-color;
    }

-    &-meta {
-        display: block;
-        height: 100%;
-        overflow: hidden;
-        position: relative;
-        margin-right: $gap-md;
+    .#{$ns}Card-fieldLabel {
+      color: lighten($Card-onModified-color, 20%);
    }

-    &-highlight {
-        background-color: $success;
-        width: px2rem(8px);
-        height: px2rem(8px);
-        border-radius: 100%;
-        display: inline-block;
-        position: absolute;
-        top: px2rem(5px);
-        right: px2rem(2px);
+    .#{$ns}Card-actions > a:hover {
+      background-color: darken($Card-onModified-bg, 5%);
+      color: darken($Card-onModified-color, 10%);
    }
+  }

-    &-body {
-        padding: $gap-base;
-    }
-
-    &-heading + &-body {
-        padding-top: $gap-xs;
-    }
-
-    &-field {
-        position: relative;
-        display: flex;
-        flex-wrap: nowrap;
-    }
-
-    &-fieldValue {
-        position: relative;
-        flex-basis: 0;
-        flex-grow: 1;
-    }
-
-    &-fieldLabel {
-        width: px2rem(60px);
-        color: $text--muted-color;
-    }
-
-    &-actions {
-        border-top: $Card-borderWidth solid $Card-actions-borderColor;
-        display: table;
-        width: 100%;
-
-        > a {
-            background-color: transparent;
-            display: table-cell;
-            border-color: $Card-actions-borderColor;
-            border-style: solid;
-            border-width: 0 $Card-borderWidth 0 0;
-            color: $text-color;
-            text-align: center;
-            line-height: px2rem(40px);
-            // font-size: $fontSizeBase;
-
-            &:not(is-disabled) {
-                cursor: pointer;
-            }
-
-            &:last-child {
-                border: none;
-            }
-
-            &:hover {
-                background-color: $Card-actions-onHover-bg;
-                color: $Card-actions-onHover-color;
-                text-decoration: none;
-            }
-        }
-    }
-
-    &.is-checked {
-        background-color: $Card-onChecked-bg;
-        border-color: $Card-onChecked-borderColor;
-        color: $Card-onChecked-color;
-
-        .#{$ns}Card-actions,
-        .#{$ns}Card-actions > a {
-            border-color: $Card-onChecked-borderColor;
-            color: $Card-onChecked-color;
-        }
-
-        .#{$ns}Card-fieldLabel {
-            color: lighten($Card-onChecked-color, 20%);
-        }
-
-        .#{$ns}Card-actions > a:hover {
-            background-color: $Card-actions-onChecked-onHover-bg;
-            color: darken($Card-onChecked-color, 10%);
-        }
-    }
-
-    &.is-modified,
-    &.is-moved {
-        background-color: $Card-onModified-bg;
-        border-color: $Card-onModified-borderColor;
-        color: $Card-onModified-color;
-
-        .#{$ns}Card-actions,
-        .#{$ns}Card-actions > a {
-            border-color: $Card-onModified-borderColor;
-            color: $Card-onModified-color;
-        }
-
-        .#{$ns}Card-fieldLabel {
-            color: lighten($Card-onModified-color, 20%);
-        }
-
-        .#{$ns}Card-actions > a:hover {
-            background-color: darken($Card-onModified-bg, 5%);
-            color: darken($Card-onModified-color, 10%);
-        }
-    }
-
-    .is-dragging > & {
-        opacity: $Card-onDragging-opacity;
-    }
+  .is-dragging > & {
+    opacity: $Card-onDragging-opacity;
+  }
 }
--- a/scss/components/_cards.scss
+++ b/scss/components/_cards.scss
@ -1,183 +1,183 @@
 .#{$ns}Cards {
-    &-toolbar {
-        @include clearfix();
-        padding: $Cards-toolbar-paddingY $Cards-toolbar-paddingX;
-        margin-bottom: $gap-base;
+  &-toolbar {
+    @include clearfix();
+    padding: $Cards-toolbar-paddingY $Cards-toolbar-paddingX;
+    margin-bottom: $gap-base;
+  }
+
+  &-actions {
+    display: inline-block;
+
+    > * {
+      margin-right: $Crud-toolbar-gap;
    }
+  }

-    &-actions {
-        display: inline-block;
+  &-heading {
+    padding: $gap-xs 0;
+  }

-        > * {
-            margin-right: $Crud-toolbar-gap;
-        }
+  &-header {
+    padding: $Cards-toolbar-paddingY $Cards-toolbar-paddingX;
+
+    > * + .#{$ns}Button,
+    > * + .#{$ns}ButtonGroup,
+    > * + .#{$ns}ButtonToolbar {
+      margin-left: $Crud-toolbar-gap;
    }
+  }

-    &-heading {
-        padding: $gap-xs 0;
-    }
+  &-header + &-toolbar {
+    padding-top: 0;
+  }

-    &-header {
-        padding: $Cards-toolbar-paddingY $Cards-toolbar-paddingX;
+  &-fixedTop {
+    position: absolute;
+    background: $white;
+    z-index: -1;
+    opacity: 0;
+    box-shadow: $Cards-fixedTop-boxShadow;
+    padding: $gap-sm;

-        > * + .#{$ns}Button,
-        > * + .#{$ns}ButtonGroup,
-        > * + .#{$ns}ButtonToolbar {
-            margin-left: $Crud-toolbar-gap;
-        }
-    }
-
-    &-header + &-toolbar {
-        padding-top: 0;
-    }
-
-    &-fixedTop {
-        position: absolute;
-        background: $white;
-        z-index: -1;
-        opacity: 0;
-        box-shadow: $Cards-fixedTop-boxShadow;
-        padding: $gap-sm;
-
-        &.in {
-            position: fixed;
-            opacity: 1;
-            z-index: $zindex-affix;
-        }
-
-        .#{$ns}Cards-toolbar {
-            margin-bottom: 0;
-        }
-
-        &:empty {
-            display: none;
-        }
-    }
-
-    &--unsaved &-heading {
-        background: $Cards--unsaved-heading-bg;
-        color: $Cards--unsaved-heading-color;
-        padding: $gap-xs $gap-sm;
-        margin-bottom: $gap-sm;
-    }
-
-    &-dragTip {
-        color: $text--loud-color;
-        clear: both;
-        margin-top: $gap-xs;
-    }
-
-    &-placeholder {
-        background: $white;
-        color: $text--muted-color;
-        text-align: center;
-        height: $Cards-placeholder-height;
-        line-height: $Cards-placeholder-height;
-
-        border: $Card-borderWidth solid $Card-borderColor;
-        border-radius: $Card-borderRadius;
-    }
-
-    &--masonry {
-        display: block;
-
-        &:after {
-            content: none;
-        }
-
-        column-gap: 0;
-        column-fill: initial;
-
-        > div {
-            width: 100%;
-            float: none;
-            break-inside: avoid;
-            max-width: unset;
-            display: inline-block;
-            flex: unset;
-        }
-    }
-}
-
-@include media-breakpoint-up(sm) {
-    .#{$ns}Cards--masonrySm1 {
-        column-count: 12;
-    }
-
-    .#{$ns}Cards--masonrySm2 {
-        column-count: 6;
-    }
-
-    .#{$ns}Cards--masonrySm3 {
-        column-count: 4;
-    }
-
-    .#{$ns}Cards--masonrySm4 {
-        column-count: 3;
-    }
-
-    .#{$ns}Cards--masonrySm6 {
-        column-count: 2;
-    }
-
-    .#{$ns}Cards--masonrySm12 {
-        column-count: 1;
+    &.in {
+      position: fixed;
+      opacity: 1;
+      z-index: $zindex-affix;
    }

    .#{$ns}Cards-toolbar {
-        display: flex;
-        flex-wrap: nowrap;
+      margin-bottom: 0;
    }
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  &--unsaved &-heading {
+    background: $Cards--unsaved-heading-bg;
+    color: $Cards--unsaved-heading-color;
+    padding: $gap-xs $gap-sm;
+    margin-bottom: $gap-sm;
+  }
+
+  &-dragTip {
+    color: $text--loud-color;
+    clear: both;
+    margin-top: $gap-xs;
+  }
+
+  &-placeholder {
+    background: $white;
+    color: $text--muted-color;
+    text-align: center;
+    height: $Cards-placeholder-height;
+    line-height: $Cards-placeholder-height;
+
+    border: $Card-borderWidth solid $Card-borderColor;
+    border-radius: $Card-borderRadius;
+  }
+
+  &--masonry {
+    display: block;
+
+    &:after {
+      content: none;
+    }
+
+    column-gap: 0;
+    column-fill: initial;
+
+    > div {
+      width: 100%;
+      float: none;
+      break-inside: avoid;
+      max-width: unset;
+      display: inline-block;
+      flex: unset;
+    }
+  }
+}
+
+@include media-breakpoint-up(sm) {
+  .#{$ns}Cards--masonrySm1 {
+    column-count: 12;
+  }
+
+  .#{$ns}Cards--masonrySm2 {
+    column-count: 6;
+  }
+
+  .#{$ns}Cards--masonrySm3 {
+    column-count: 4;
+  }
+
+  .#{$ns}Cards--masonrySm4 {
+    column-count: 3;
+  }
+
+  .#{$ns}Cards--masonrySm6 {
+    column-count: 2;
+  }
+
+  .#{$ns}Cards--masonrySm12 {
+    column-count: 1;
+  }
+
+  .#{$ns}Cards-toolbar {
+    display: flex;
+    flex-wrap: nowrap;
+  }
 }

@include media-breakpoint-up(md) {
-    .#{$ns}Cards--masonryMd1 {
-        column-count: 12;
-    }
+  .#{$ns}Cards--masonryMd1 {
+    column-count: 12;
+  }

-    .#{$ns}Cards--masonryMd2 {
-        column-count: 6;
-    }
+  .#{$ns}Cards--masonryMd2 {
+    column-count: 6;
+  }

-    .#{$ns}Cards--masonryMd3 {
-        column-count: 4;
-    }
+  .#{$ns}Cards--masonryMd3 {
+    column-count: 4;
+  }

-    .#{$ns}Cards--masonryMd4 {
-        column-count: 3;
-    }
+  .#{$ns}Cards--masonryMd4 {
+    column-count: 3;
+  }

-    .#{$ns}Cards--masonryMd6 {
-        column-count: 2;
-    }
+  .#{$ns}Cards--masonryMd6 {
+    column-count: 2;
+  }

-    .#{$ns}Cards--masonryMd12 {
-        column-count: 1;
-    }
+  .#{$ns}Cards--masonryMd12 {
+    column-count: 1;
+  }
 }

@include media-breakpoint-up(lg) {
-    .#{$ns}Cards--masonryLg1 {
-        column-count: 12;
-    }
+  .#{$ns}Cards--masonryLg1 {
+    column-count: 12;
+  }

-    .#{$ns}Cards--masonryLg2 {
-        column-count: 6;
-    }
+  .#{$ns}Cards--masonryLg2 {
+    column-count: 6;
+  }

-    .#{$ns}Cards--masonryLg3 {
-        column-count: 4;
-    }
+  .#{$ns}Cards--masonryLg3 {
+    column-count: 4;
+  }

-    .#{$ns}Cards--masonryLg4 {
-        column-count: 3;
-    }
+  .#{$ns}Cards--masonryLg4 {
+    column-count: 3;
+  }

-    .#{$ns}Cards--masonryLg6 {
-        column-count: 2;
-    }
+  .#{$ns}Cards--masonryLg6 {
+    column-count: 2;
+  }

-    .#{$ns}Cards--masonryLg12 {
-        column-count: 1;
-    }
+  .#{$ns}Cards--masonryLg12 {
+    column-count: 1;
+  }
 }
--- a/scss/components/_carousel.scss
+++ b/scss/components/_carousel.scss
@ -1,167 +1,167 @@
@mixin arrow-control {
-    width: 10%;
-    min-width: $Carousel-arrowControl-width;
-    height: 100%;
-    cursor: pointer;
+  width: 10%;
+  min-width: $Carousel-arrowControl-width;
+  height: 100%;
+  cursor: pointer;
+  position: absolute;
+  transition-duration: $Carousel-transitionDuration;
+  svg {
    position: absolute;
-    transition-duration: $Carousel-transitionDuration;
-    svg {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        right: 50%;
-        transform: translate(-50%, -50%);
-        width: $Carousel-svg-width;
-        height: $Carousel-svg-height;
-    }
+    top: 50%;
+    left: 50%;
+    right: 50%;
+    transform: translate(-50%, -50%);
+    width: $Carousel-svg-width;
+    height: $Carousel-svg-height;
+  }
 }

 .#{$ns}Carousel {
-    min-width: $Carousel-minWidth;
-    height: $Carousel-height;
+  min-width: $Carousel-minWidth;
+  height: $Carousel-height;
+  position: relative;
+  display: block;
+  background: $Carousel-bg;
+
+  &.#{$ns}Carousel--light {
+    .#{$ns}Carousel-dot {
+      background-color: $Carousel--light-control;
+    }
+
+    svg {
+      fill: $Carousel--light-control;
+    }
+
+    .#{$ns}Carousel-item {
+      .title,
+      .description {
+        color: $Carousel--light-control;
+      }
+    }
+  }
+
+  &.#{$ns}Carousel--dark {
+    .#{$ns}Carousel-dot {
+      background-color: $Carousel--dark-control;
+    }
+
+    svg {
+      fill: $Carousel--dark-control;
+    }
+
+    .#{$ns}Carousel-item {
+      .title,
+      .description {
+        color: $Carousel--dark-control;
+      }
+    }
+  }
+
+  &-container {
+    width: 100%;
+    height: 100%;
    position: relative;
-    display: block;
-    background: $Carousel-bg;
+    overflow: hidden;

-    &.#{$ns}Carousel--light {
-        .#{$ns}Carousel-dot {
-            background-color: $Carousel--light-control;
-        }
+    .#{$ns}Carousel-item {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      transition: ease-out all $Carousel-transitionDuration;

-        svg {
-            fill: $Carousel--light-control;
-        }
+      &.fade {
+        opacity: 0;
+      }

-        .#{$ns}Carousel-item {
-            .title,
-            .description {
-                color: $Carousel--light-control;
-            }
-        }
-    }
+      &.fade.in {
+        opacity: 1;
+      }

-    &.#{$ns}Carousel--dark {
-        .#{$ns}Carousel-dot {
-            background-color: $Carousel--dark-control;
-        }
+      &.slide {
+        transform: translateX(100%);
+      }

-        svg {
-            fill: $Carousel--dark-control;
-        }
+      &.slide.in {
+        transform: translateX(0);
+      }

-        .#{$ns}Carousel-item {
-            .title,
-            .description {
-                color: $Carousel--dark-control;
-            }
-        }
-    }
+      &.slide.out {
+        transform: translateX(-100%);
+      }

-    &-container {
+      &.slideRight {
+        transform: translateX(-100%);
+      }
+
+      &.slideRight.in {
+        transform: translateX(0);
+      }
+
+      &.slideRight.out {
+        transform: translateX(100%);
+      }
+
+      .title {
+        position: absolute;
+        bottom: $Carousel-imageTitle-bottom;
+        text-align: center;
+        width: 100%;
+        opacity: 0.8;
+      }
+
+      .description {
+        position: absolute;
+        bottom: $Carousel-imageDescription-bottom;
+        text-align: center;
+        width: 100%;
+        opacity: 0.8;
+      }
+
+      .image {
        width: 100%;
        height: 100%;
-        position: relative;
-        overflow: hidden;
+        background-size: cover;
+      }
+    }
+  }

-        .#{$ns}Carousel-item {
-            width: 100%;
-            height: 100%;
-            position: absolute;
-            transition: ease-out all $Carousel-transitionDuration;
+  &-dotsControl {
+    position: absolute;
+    bottom: 0px;
+    width: 100%;
+    z-index: 100;
+    text-align: center;

-            &.fade {
-                opacity: 0;
-            }
+    .#{$ns}Carousel-dot {
+      display: inline-block;
+      height: $Carousel-dot-width;
+      width: $Carousel-dot-height;
+      border-radius: $Carousel-dot-borderRadius;
+      margin: $Carousel-dot-margin;
+      transition-duration: $Carousel-transitionDuration;
+      opacity: 0.3;

-            &.fade.in {
-                opacity: 1;
-            }
+      &.is-active {
+        opacity: 1;
+      }
+    }
+  }

-            &.slide {
-                transform: translateX(100%);
-            }
+  &-arrowsControl {
+    position: absolute;
+    width: 100%;
+    height: inherit;
+    z-index: 100;
+    text-align: center;

-            &.slide.in {
-                transform: translateX(0);
-            }
-
-            &.slide.out {
-                transform: translateX(-100%);
-            }
-
-            &.slideRight {
-                transform: translateX(-100%);
-            }
-
-            &.slideRight.in {
-                transform: translateX(0);
-            }
-
-            &.slideRight.out {
-                transform: translateX(100%);
-            }
-
-            .title {
-                position: absolute;
-                bottom: $Carousel-imageTitle-bottom;
-                text-align: center;
-                width: 100%;
-                opacity: 0.8;
-            }
-
-            .description {
-                position: absolute;
-                bottom: $Carousel-imageDescription-bottom;
-                text-align: center;
-                width: 100%;
-                opacity: 0.8;
-            }
-
-            .image {
-                width: 100%;
-                height: 100%;
-                background-size: cover;
-            }
-        }
+    .#{$ns}Carousel-leftArrow {
+      @include arrow-control;
+      left: 0;
    }

-    &-dotsControl {
-        position: absolute;
-        bottom: 0px;
-        width: 100%;
-        z-index: 100;
-        text-align: center;
-
-        .#{$ns}Carousel-dot {
-            display: inline-block;
-            height: $Carousel-dot-width;
-            width: $Carousel-dot-height;
-            border-radius: $Carousel-dot-borderRadius;
-            margin: $Carousel-dot-margin;
-            transition-duration: $Carousel-transitionDuration;
-            opacity: 0.3;
-
-            &.is-active {
-                opacity: 1;
-            }
-        }
+    .#{$ns}Carousel-rightArrow {
+      @include arrow-control;
+      right: 0;
    }
-
-    &-arrowsControl {
-        position: absolute;
-        width: 100%;
-        height: inherit;
-        z-index: 100;
-        text-align: center;
-
-        .#{$ns}Carousel-leftArrow {
-            @include arrow-control;
-            left: 0;
-        }
-
-        .#{$ns}Carousel-rightArrow {
-            @include arrow-control;
-            right: 0;
-        }
-    }
-}
+  }
+}
--- a/scss/components/_chart.scss
+++ b/scss/components/_chart.scss
@ -1,11 +1,11 @@
 .#{$ns}Chart {
-    min-height: 300px;
-    position: relative;
+  min-height: 300px;
+  position: relative;

-    &-placeholder {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-    }
+  &-placeholder {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
 }
--- a/scss/components/_collapse.scss
+++ b/scss/components/_collapse.scss
@ -1,51 +1,52 @@
 .#{$ns}Collapse {
-    padding: 0;
-    margin-bottom: $Form-item-gap;
+  padding: 0;
+  margin-bottom: $Form-item-gap;

-    &-header {
-        font-size: $fontSizeMd;
-        font-weight: $fontWeightNormal;
-        color: $text--loud-color;
-        padding: px2rem(5px) 0;
-        border-bottom: $borderWidth solid lighten($borderColor, 5%);
+  &-header {
+    font-size: $fontSizeMd;
+    font-weight: $fontWeightNormal;
+    color: $text--loud-color;
+    padding: px2rem(5px) 0;
+    border-bottom: $borderWidth solid lighten($borderColor, 5%);
+  }
+
+  &-arrow {
+    display: inline-block;
+    width: px2rem(16px);
+    text-align: center;
+    margin-left: $gap-xs;
+    cursor: pointer;
+
+    &:before {
+      content: '';
+      position: relative;
+      display: inline-block;
+      width: px2rem(6px);
+      height: px2rem(6px);
+      top: px2rem(-4px);
+      border-color: $text-color;
+      border-style: solid;
+      border-width: px2rem(1px) px2rem(1px) 0 0;
+      transform: rotate(135deg);
+      transform-origin: 50% 50%;
    }
+  }

-    &-arrow {
-        display: inline-block;
-        width: px2rem(16px);
-        text-align: center;
-        margin-left: $gap-xs;
-        cursor: pointer;
+  &.is-collapsed &-arrow:before {
+    transform: rotate(45deg);
+    transform-origin: 0% 50%;
+  }

-        &:before {
-            content: "";
-            position: relative;
-            display: inline-block;
-            width: px2rem(6px);
-            height: px2rem(6px);
-            top: px2rem(-4px);
-            border-color: $text-color;
-            border-style: solid;
-            border-width: px2rem(1px) px2rem(1px) 0 0;
-            transform: rotate(135deg);
-            transform-origin: 50% 50%;
-        }
-    }
-
-    &.is-collapsed &-arrow:before {
-        transform: rotate(45deg);
-        transform-origin: 0% 50%;
-    }
-
-    &--collapsable &-header {
-        user-select: none;
-    }
-
-    &-content {
-        transition: height .35s ease;
-        &.in, &.out {
-            height: 0;
-            overflow: hidden;
-        }
+  &--collapsable &-header {
+    user-select: none;
+  }
+
+  &-content {
+    transition: height 0.35s ease;
+    &.in,
+    &.out {
+      height: 0;
+      overflow: hidden;
    }
+  }
 }
--- a/scss/components/_color.scss
+++ b/scss/components/_color.scss
@ -1,18 +1,18 @@
 .#{$ns}ColorField {
+  display: inline-block;
+
+  &-previewIcon {
    display: inline-block;
+    vertical-align: middle;
+    width: px2rem(16px);
+    height: px2rem(16px);
+    box-shadow: $boxShadowSm;
+    background-color: #ccc;
+  }

-    &-previewIcon {
-        display: inline-block;
-        vertical-align: middle;
-        width: px2rem(16px);
-        height: px2rem(16px);
-        box-shadow: $boxShadowSm;
-        background-color: #ccc;
-    }
-
-    &-value {
-        display: inline-block;
-        margin-left: 10px;
-        vertical-align: middle;
-    }
-}
+  &-value {
+    display: inline-block;
+    margin-left: 10px;
+    vertical-align: middle;
+  }
+}
--- a/scss/components/_copyable.scss
+++ b/scss/components/_copyable.scss
@ -1,10 +1,10 @@
 .#{$ns}Field-copyBtn {
-    color: $Copyable-iconColor;
-    margin-left: $gap-xs;
-    display: inline-block;
-    cursor: pointer;
+  color: $Copyable-iconColor;
+  margin-left: $gap-xs;
+  display: inline-block;
+  cursor: pointer;

-    &:hover {
-        color: $Copyable-onHover-iconColor;
-    }
+  &:hover {
+    color: $Copyable-onHover-iconColor;
+  }
 }
--- a/scss/components/_crud.scss
+++ b/scss/components/_crud.scss
@ -1,130 +1,130 @@
 .#{$ns}Crud {
-    position: relative;
+  position: relative;

-    &.is-loading > &-body {
-        filter: blur(5px);
+  &.is-loading > &-body {
+    filter: blur(5px);
+  }
+
+  &-selection {
+    margin-bottom: $gap-base;
+  }
+
+  &-selectionLabel {
+    display: inline-block;
+    vertical-align: top;
+    margin-top: $gap-xs;
+  }
+
+  &-value {
+    cursor: pointer;
+    vertical-align: middle;
+    user-select: none;
+    line-height: $Form-input-lineHeight * $Form-input-fontSize - px2rem(2px);
+    display: inline-block;
+    font-size: $Form-selectValue-fontSize;
+    color: $Form-selectValue-color;
+    background: $Form-selectValue-bg;
+    border: px2rem(1px) solid $Form-selectValue-borderColor;
+    border-radius: 2px;
+    margin-right: $gap-xs;
+    margin-top: $gap-xs;
+
+    &:hover {
+      background-color: darken($Form-selectValue-bg, 5%);
    }

-    &-selection {
-        margin-bottom: $gap-base;
+    &.is-disabled {
+      pointer-events: none;
+      opacity: $Button-onDisabled-opacity;
+    }
+  }
+
+  &-valueIcon {
+    cursor: pointer;
+    border-right: px2rem(1px) solid $Form-selectValue-borderColor;
+    padding: 1px 5px;
+
+    &:hover {
+      background-color: darken($Form-selectValue-bg, 5%);
+    }
+  }
+
+  &-valueLabel {
+    padding: 0 $gap-xs;
+  }
+
+  &-selectionClear {
+    display: inline-block;
+    cursor: pointer;
+    user-select: none;
+    margin-left: $gap-xs;
+    margin-top: $gap-xs;
+    vertical-align: middle;
+  }
+
+  &-toolbar-item {
+    margin-left: $Crud-toolbar-gap;
+    line-height: $Crud-toolbar-lineHeight;
+    height: $Crud-toolbar-height;
+    vertical-align: middle;
+
+    &--left {
+      float: left;
    }

-    &-selectionLabel {
-        display: inline-block;
-        vertical-align: top;
-        margin-top: $gap-xs;
+    &--right {
+      float: right;
    }
+  }

-    &-value {
-        cursor: pointer;
-        vertical-align: middle;
-        user-select: none;
-        line-height: $Form-input-lineHeight * $Form-input-fontSize - px2rem(2px);
-        display: inline-block;
-        font-size: $Form-selectValue-fontSize;
-        color: $Form-selectValue-color;
-        background: $Form-selectValue-bg;
-        border: px2rem(1px) solid $Form-selectValue-borderColor;
-        border-radius: 2px;
-        margin-right: $gap-xs;
-        margin-top: $gap-xs;
-
-        &:hover {
-            background-color: darken($Form-selectValue-bg, 5%);
-        }
-
-        &.is-disabled {
-            pointer-events: none;
-            opacity: $Button-onDisabled-opacity;
-        }
+  &-actions {
+    > * + .#{$ns}Button,
+    > * + .#{$ns}ButtonGroup,
+    > * + .#{$ns}ButtonToolbar {
+      margin-left: $Crud-toolbar-gap;
    }
+  }

-    &-valueIcon {
-        cursor: pointer;
-        border-right: px2rem(1px) solid $Form-selectValue-borderColor;
-        padding: 1px 5px;
+  &-statistics {
+    line-height: $Crud-toolbar-height;
+    vertical-align: middle;
+  }

-        &:hover {
-            background-color: darken($Form-selectValue-bg, 5%);
-        }
-    }
-
-    &-valueLabel {
-        padding: 0 $gap-xs;
-    }
-
-    &-selectionClear {
-        display: inline-block;
-        cursor: pointer;
-        user-select: none;
-        margin-left: $gap-xs;
-        margin-top: $gap-xs;
-        vertical-align: middle;
-    }
-
-    &-toolbar-item {
-        margin-left: $Crud-toolbar-gap;
-        line-height: $Crud-toolbar-lineHeight;
-        height: $Crud-toolbar-height;
-        vertical-align: middle;
-
-        &--left {
-            float: left;
-        }
-
-        &--right {
-            float: right;
-        }
-    }
-
-    &-actions {
-        > * + .#{$ns}Button,
-        > * + .#{$ns}ButtonGroup,
-        > * + .#{$ns}ButtonToolbar {
-            margin-left: $Crud-toolbar-gap;
-        }
-    }
-
-    &-statistics {
-        line-height: $Crud-toolbar-height;
-        vertical-align: middle;
-    }
-
-    &-pageSwitch {
-        .#{$ns}Select {
-            margin-left: $Crud-toolbar-gap;
-        }
+  &-pageSwitch {
+    .#{$ns}Select {
+      margin-left: $Crud-toolbar-gap;
    }
+  }
 }

@include media-breakpoint-up(sm) {
-    .#{$ns}Crud {
-        &-toolbar {
-            margin-left: -$Crud-toolbar-gap;
-            flex-basis: 0;
-            flex-grow: 1;
-            @include clearfix();
-        }
+  .#{$ns}Crud {
+    &-toolbar {
+      margin-left: -$Crud-toolbar-gap;
+      flex-basis: 0;
+      flex-grow: 1;
+      @include clearfix();
+    }
+  }
+
+  &-toolbar-item {
+    margin-left: $Crud-toolbar-gap;
+    line-height: $Crud-toolbar-lineHeight;
+    height: $Crud-toolbar-height;
+    vertical-align: middle;
+
+    &--left {
+      float: left;
    }

-    &-toolbar-item {
-        margin-left: $Crud-toolbar-gap;
-        line-height: $Crud-toolbar-lineHeight;
-        height: $Crud-toolbar-height;
-        vertical-align: middle;
-
-        &--left {
-            float: left;
-        }
-
-        &--right {
-            float: right;
-        }
+    &--right {
+      float: right;
    }
+  }

-    &-actions {
-        > .#{$ns}Button + .#{$ns}Button {
-            margin-left: $Crud-toolbar-gap;
-        }
+  &-actions {
+    > .#{$ns}Button + .#{$ns}Button {
+      margin-left: $Crud-toolbar-gap;
    }
+  }
 }
--- a/scss/components/_divider.scss
+++ b/scss/components/_divider.scss
@ -1,10 +1,10 @@
 .#{$ns}Divider {
-    margin: ($gap-base) (-$gap-base);
-    border-bottom: $borderWidth dashed $borderColor;
-    height: px2rem(2px);
-    font-size: 0;
+  margin: ($gap-base) (-$gap-base);
+  border-bottom: $borderWidth dashed $borderColor;
+  height: px2rem(2px);
+  font-size: 0;

-    &--solid {
-        border-bottom-style: solid;
-    }
+  &--solid {
+    border-bottom-style: solid;
+  }
 }
--- a/scss/components/_drawer.scss
+++ b/scss/components/_drawer.scss
@ -1,171 +1,171 @@
 .#{$ns}Drawer {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: $zindex-modal;
+  overflow: hidden;
+  outline: 0;
+
+  &-content {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    pointer-events: auto;
+    background-color: $Drawer-bg;
+    background-clip: padding-box;
+    outline: 0;
+    z-index: 2;
+    border: $Drawer-content-borderWidth solid $Drawer-content-borderColor;
+    border-radius: $Drawer-content-borderRadius;
+    transition: transform ease-in-out 0.3s;
+  }
+
+  &-overlay {
+    transition: ease-out opacity 0.3s;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
-    z-index: $zindex-modal;
-    overflow: hidden;
-    outline: 0;
+    z-index: 1;
+    background-color: $Drawer-overlay-bg;
+    opacity: 0;

-    &-content {
-        position: absolute;
-        display: flex;
-        flex-direction: column;
-        width: 100%;
-        height: 100%;
-        pointer-events: auto;
-        background-color: $Drawer-bg;
-        background-clip: padding-box;
-        outline: 0;
-        z-index: 2;
-        border: $Drawer-content-borderWidth solid $Drawer-content-borderColor;
-        border-radius: $Drawer-content-borderRadius;
-        transition: transform ease-in-out 0.3s;
+    &.in {
+      opacity: 1;
+    }
+  }
+
+  &-header {
+    padding: $Drawer-header-padding;
+    background-color: $Drawer-header-bg;
+    @include clearfix();
+    border-bottom: $Drawer-content-borderWidth solid
+      lighten($Drawer-content-borderColor, 5%);
+    border-top-left-radius: $Drawer-content-borderRadius;
+    border-top-right-radius: $Drawer-content-borderRadius;
+  }
+
+  &-title {
+    font-size: $Drawer-title-fontSize;
+    color: $Drawer-title-fontColor;
+  }
+
+  &-close {
+    position: absolute;
+    color: $Drawer-close-color;
+    line-height: 1;
+    text-decoration: none;
+
+    svg {
+      width: 30px;
+      height: 30px;
+      fill: $Drawer-close-color;
    }

-    &-overlay {
-        transition: ease-out opacity 0.3s;
-        position: fixed;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        z-index: 1;
-        background-color: $Drawer-overlay-bg;
-        opacity: 0;
+    &:not(.is-disabled) {
+      cursor: pointer;

-        &.in {
-            opacity: 1;
-        }
-    }
-
-    &-header {
-        padding: $Drawer-header-padding;
-        background-color: $Drawer-header-bg;
-        @include clearfix();
-        border-bottom: $Drawer-content-borderWidth solid
-            lighten($Drawer-content-borderColor, 5%);
-        border-top-left-radius: $Drawer-content-borderRadius;
-        border-top-right-radius: $Drawer-content-borderRadius;
-    }
-
-    &-title {
-        font-size: $Drawer-title-fontSize;
-        color: $Drawer-title-fontColor;
-    }
-
-    &-close {
-        position: absolute;
-        color: $Drawer-close-color;
-        line-height: 1;
+      &:hover {
        text-decoration: none;
+        color: $Drawer-close-onHover-color;

        svg {
-            width: 30px;
-            height: 30px;
-            fill: $Drawer-close-color;
+          fill: $Drawer-close-onHover-color;
        }
+      }
+    }
+  }

-        &:not(.is-disabled) {
-            cursor: pointer;
+  &-body {
+    padding: $Drawer-body-padding;
+    flex-basis: 0;
+    flex-grow: 1;
+    overflow: auto;
+  }

-            &:hover {
-                text-decoration: none;
-                color: $Drawer-close-onHover-color;
+  &-footer {
+    display: flex;
+    align-items: flex-end;
+    justify-content: flex-end;
+    padding: $Drawer-footer-padding;
+    border-top: $Drawer-content-borderWidth solid
+      lighten($Drawer-content-borderColor, 5%);
+    border-bottom-left-radius: $Drawer-content-borderRadius;
+    border-bottom-right-radius: $Drawer-content-borderRadius;

-                svg {
-                    fill: $Drawer-close-onHover-color;
-                }
-            }
-        }
+    .#{$ns}Button {
+      margin-left: $gap-xs;
    }

-    &-body {
-        padding: $Drawer-body-padding;
-        flex-basis: 0;
-        flex-grow: 1;
-        overflow: auto;
+    .#{$ns}Drawer-info {
+      flex-basis: 0;
+      flex-grow: 1;
+      text-align: left;
+      align-self: center;
    }

-    &-footer {
-        display: flex;
-        align-items: flex-end;
-        justify-content: flex-end;
-        padding: $Drawer-footer-padding;
-        border-top: $Drawer-content-borderWidth solid
-            lighten($Drawer-content-borderColor, 5%);
-        border-bottom-left-radius: $Drawer-content-borderRadius;
-        border-bottom-right-radius: $Drawer-content-borderRadius;
-
-        .#{$ns}Button {
-            margin-left: $gap-xs;
-        }
-
-        .#{$ns}Drawer-info {
-            flex-basis: 0;
-            flex-grow: 1;
-            text-align: left;
-            align-self: center;
-        }
-
-        .#{$ns}Drawer-error {
-            color: $danger;
-        }
+    .#{$ns}Drawer-error {
+      color: $danger;
    }
+  }

-    &.#{$ns}Drawer--noOverlay {
-        .#{$ns}Drawer-close svg {
-            margin-top: px2rem(2px);
-            width: px2rem(20px);
-            height: px2rem(20px);
-            fill: #99a6ad;
-        }
+  &.#{$ns}Drawer--noOverlay {
+    .#{$ns}Drawer-close svg {
+      margin-top: px2rem(2px);
+      width: px2rem(20px);
+      height: px2rem(20px);
+      fill: #99a6ad;
    }
+  }

-    .#{$ns}Drawer-resizeCtrl {
-        position: absolute;
-        border: $borderWidth solid $borderColor;
-        background-color: $white;
-        border-radius: $borderRadius;
-        font-size: $fontSizeSm;
-        line-height: $fontSizeSm;
-        text-align: center;
-        user-select: none;
-    }
+  .#{$ns}Drawer-resizeCtrl {
+    position: absolute;
+    border: $borderWidth solid $borderColor;
+    background-color: $white;
+    border-radius: $borderRadius;
+    font-size: $fontSizeSm;
+    line-height: $fontSizeSm;
+    text-align: center;
+    user-select: none;
+  }
 }

 // size
@include media-breakpoint-up(sm) {
-    .#{$ns}Drawer .#{$ns}Drawer-content {
-        width: $Drawer-widthBase;
-        height: $Drawer-widthBase;
-    }
+  .#{$ns}Drawer .#{$ns}Drawer-content {
+    width: $Drawer-widthBase;
+    height: $Drawer-widthBase;
+  }

-    .#{$ns}Drawer--xs .#{$ns}Drawer-content {
-        width: $Drawer-widthXs;
-        height: $Drawer-widthXs;
-    }
+  .#{$ns}Drawer--xs .#{$ns}Drawer-content {
+    width: $Drawer-widthXs;
+    height: $Drawer-widthXs;
+  }

-    .#{$ns}Drawer--sm .#{$ns}Drawer-content {
-        width: $Drawer-widthSm;
-        height: $Drawer-widthSm;
-    }
+  .#{$ns}Drawer--sm .#{$ns}Drawer-content {
+    width: $Drawer-widthSm;
+    height: $Drawer-widthSm;
+  }

-    .#{$ns}Drawer--md .#{$ns}Drawer-content {
-        width: $Drawer-widthMd;
-        height: $Drawer-widthMd;
-    }
+  .#{$ns}Drawer--md .#{$ns}Drawer-content {
+    width: $Drawer-widthMd;
+    height: $Drawer-widthMd;
+  }

-    .#{$ns}Drawer--lg .#{$ns}Drawer-content {
-        width: $Drawer-widthLg;
-        height: $Drawer-widthLg;
-    }
+  .#{$ns}Drawer--lg .#{$ns}Drawer-content {
+    width: $Drawer-widthLg;
+    height: $Drawer-widthLg;
+  }

-    .#{$ns}Drawer--xl .#{$ns}Drawer-content {
-        width: $Drawer-widthXl;
-        height: $Drawer-widthXl;
-    }
+  .#{$ns}Drawer--xl .#{$ns}Drawer-content {
+    width: $Drawer-widthXl;
+    height: $Drawer-widthXl;
+  }
 }

 // positons
@ -173,171 +173,171 @@
 .#{$ns}Drawer--right .#{$ns}Drawer-content.in,
 .#{$ns}Drawer--bottom .#{$ns}Drawer-content.in,
 .#{$ns}Drawer--left .#{$ns}Drawer-content.in {
-    transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
 }

 .#{$ns}Drawer--top {
+  .#{$ns}Drawer-close {
+    top: 100%;
+    margin-top: $gap-sm;
+    left: $gap-sm;
+  }
+
+  &.#{$ns}Drawer--noOverlay {
    .#{$ns}Drawer-close {
-        top: 100%;
-        margin-top: $gap-sm;
-        left: $gap-sm;
+      top: $gap-base;
+      right: $gap-base;
+      left: auto;
+      margin-top: 0;
    }
+  }

-    &.#{$ns}Drawer--noOverlay {
-        .#{$ns}Drawer-close {
-            top: $gap-base;
-            right: $gap-base;
-            left: auto;
-            margin-top: 0;
-        }
-    }
+  .#{$ns}Drawer-content {
+    top: 0;
+    bottom: auto;
+    left: 0;
+    right: 0;
+    width: 100%;
+    transform: translate3d(0, -100%, 0);
+    box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.2);
+    min-height: 120px;
+  }

-    .#{$ns}Drawer-content {
-        top: 0;
-        bottom: auto;
-        left: 0;
-        right: 0;
-        width: 100%;
-        transform: translate3d(0, -100%, 0);
-        box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.2);
-        min-height: 120px;
-    }
-
-    .#{$ns}Drawer-resizeCtrl {
-        bottom: px2rem(-6px);
-        left: 50%;
-        cursor: ns-resize;
-        width: px2rem(20px);
-        height: px2rem(12px);
-    }
+  .#{$ns}Drawer-resizeCtrl {
+    bottom: px2rem(-6px);
+    left: 50%;
+    cursor: ns-resize;
+    width: px2rem(20px);
+    height: px2rem(12px);
+  }
 }

 .#{$ns}Drawer--right {
+  .#{$ns}Drawer-close {
+    right: 100%;
+    margin-right: $gap-sm;
+    top: $gap-sm;
+  }
+
+  &.#{$ns}Drawer--noOverlay {
    .#{$ns}Drawer-close {
-        right: 100%;
-        margin-right: $gap-sm;
-        top: $gap-sm;
+      top: $gap-base;
+      right: $gap-base;
+      margin-right: 0;
+    }
+  }
+
+  .#{$ns}Drawer-content {
+    top: 0;
+    bottom: 0;
+    left: auto;
+    right: 0;
+    height: 100%;
+    transform: translate3d(100%, 0, 0);
+    box-shadow: -10px 0 10px -10px rgba(0, 0, 0, 0.2);
+    min-width: 120px;
+  }
+
+  .#{$ns}Drawer-footer {
+    justify-content: flex-start;
+
+    .#{$ns}Button {
+      margin-left: 0;
+      margin-right: $gap-xs;
    }

-    &.#{$ns}Drawer--noOverlay {
-        .#{$ns}Drawer-close {
-            top: $gap-base;
-            right: $gap-base;
-            margin-right: 0;
-        }
+    .#{$ns}Drawer-info {
+      flex-basis: 0;
+      flex-grow: 1;
+      order: 10;
+      align-self: center;
+      text-align: right;
    }

-    .#{$ns}Drawer-content {
-        top: 0;
-        bottom: 0;
-        left: auto;
-        right: 0;
-        height: 100%;
-        transform: translate3d(100%, 0, 0);
-        box-shadow: -10px 0 10px -10px rgba(0, 0, 0, 0.2);
-        min-width: 120px;
+    .#{$ns}Drawer-error {
+      color: $danger;
    }
+  }

-    .#{$ns}Drawer-footer {
-        justify-content: flex-start;
-
-        .#{$ns}Button {
-            margin-left: 0;
-            margin-right: $gap-xs;
-        }
-
-        .#{$ns}Drawer-info {
-            flex-basis: 0;
-            flex-grow: 1;
-            order: 10;
-            align-self: center;
-            text-align: right;
-        }
-
-        .#{$ns}Drawer-error {
-            color: $danger;
-        }
-    }
-
-    .#{$ns}Drawer-resizeCtrl {
-        left: px2rem(-6px);
-        top: 50%;
-        cursor: ew-resize;
-        writing-mode: vertical-lr;
-        width: px2rem(12px);
-        height: px2rem(20px);
-    }
+  .#{$ns}Drawer-resizeCtrl {
+    left: px2rem(-6px);
+    top: 50%;
+    cursor: ew-resize;
+    writing-mode: vertical-lr;
+    width: px2rem(12px);
+    height: px2rem(20px);
+  }
 }

 .#{$ns}Drawer--bottom {
+  .#{$ns}Drawer-close {
+    bottom: 100%;
+    margin-bottom: $gap-sm;
+    left: $gap-sm;
+  }
+
+  &.#{$ns}Drawer--noOverlay {
    .#{$ns}Drawer-close {
-        bottom: 100%;
-        margin-bottom: $gap-sm;
-        left: $gap-sm;
+      top: $gap-base;
+      right: $gap-base;
+      left: auto;
+      margin-bottom: 0;
    }
+  }

-    &.#{$ns}Drawer--noOverlay {
-        .#{$ns}Drawer-close {
-            top: $gap-base;
-            right: $gap-base;
-            left: auto;
-            margin-bottom: 0;
-        }
-    }
+  .#{$ns}Drawer-content {
+    top: auto;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    transform: translate3d(0, 100%, 0);
+    box-shadow: 0 -10px 10px -10px rgba(0, 0, 0, 0.2);
+    min-height: 120px;
+  }

-    .#{$ns}Drawer-content {
-        top: auto;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        width: 100%;
-        transform: translate3d(0, 100%, 0);
-        box-shadow: 0 -10px 10px -10px rgba(0, 0, 0, 0.2);
-        min-height: 120px;
-    }
-
-    .#{$ns}Drawer-resizeCtrl {
-        top: px2rem(-6px);
-        left: 50%;
-        cursor: ns-resize;
-        width: px2rem(20px);
-        height: px2rem(12px);
-    }
+  .#{$ns}Drawer-resizeCtrl {
+    top: px2rem(-6px);
+    left: 50%;
+    cursor: ns-resize;
+    width: px2rem(20px);
+    height: px2rem(12px);
+  }
 }

 .#{$ns}Drawer--left {
+  .#{$ns}Drawer-close {
+    left: 100%;
+    margin-left: $gap-sm;
+    top: $gap-sm;
+  }
+
+  &.#{$ns}Drawer--noOverlay {
    .#{$ns}Drawer-close {
-        left: 100%;
-        margin-left: $gap-sm;
-        top: $gap-sm;
+      left: auto;
+      right: $gap-base;
+      top: $gap-base;
    }
+  }

-    &.#{$ns}Drawer--noOverlay {
-        .#{$ns}Drawer-close {
-            left: auto;
-            right: $gap-base;
-            top: $gap-base;
-        }
-    }
+  .#{$ns}Drawer-content {
+    top: 0;
+    bottom: 0;
+    right: auto;
+    left: 0;
+    height: 100%;
+    transform: translate3d(-100%, 0, 0);
+    box-shadow: 10px 0 10px -10px rgba(0, 0, 0, 0.2);
+    border-width: 0 $Drawer-content-borderWidth 0 0;
+    min-width: 120px;
+  }

-    .#{$ns}Drawer-content {
-        top: 0;
-        bottom: 0;
-        right: auto;
-        left: 0;
-        height: 100%;
-        transform: translate3d(-100%, 0, 0);
-        box-shadow: 10px 0 10px -10px rgba(0, 0, 0, 0.2);
-        border-width: 0 $Drawer-content-borderWidth 0 0;
-        min-width: 120px;
-    }
-
-    .#{$ns}Drawer-resizeCtrl {
-        right: px2rem(-6px);
-        top: 50%;
-        cursor: ew-resize;
-        writing-mode: vertical-lr;
-        width: px2rem(12px);
-        height: px2rem(20px);
-    }
+  .#{$ns}Drawer-resizeCtrl {
+    right: px2rem(-6px);
+    top: 50%;
+    cursor: ew-resize;
+    writing-mode: vertical-lr;
+    width: px2rem(12px);
+    height: px2rem(20px);
+  }
 }
--- a/scss/components/_dropdown.scss
+++ b/scss/components/_dropdown.scss
@ -1,75 +1,75 @@
 .#{$ns}DropDown {
-    position: relative;
-    display: inline-block;
+  position: relative;
+  display: inline-block;

-    &-caret {
-        margin-left: $DropDown-caret-marginLeft;
+  &-caret {
+    margin-left: $DropDown-caret-marginLeft;
+  }
+
+  &--block {
+    display: block;
+
+    .#{$ns}Button {
+      display: block;
+    }
+  }
+
+  &-menu {
+    position: absolute;
+    z-index: $zindex-dropdown;
+    top: 100%;
+    left: 0;
+    margin: px2rem(1px) 0 0;
+    background-color: $DropDown-menu-bg;
+    list-style: none;
+    padding: $DropDown-menu-paddingY $DropDown-menu-paddingX;
+    border: $DropDown-menu-borderWidth solid $DropDown-menu-borderColor;
+    border-radius: $DropDown-menu-borderRadius;
+    box-shadow: $DropDown-menu-boxShadow;
+    min-width: $DropDown-menu-minWidth;
+    text-align: left;
+  }
+
+  &--alignRight &-menu {
+    left: auto;
+    right: 0;
+  }
+
+  &-menuItem,
+  &-menu > li {
+    padding: $DropDown-menuItem-paddingY $DropDown-menuItem-paddingX;
+    white-space: nowrap;
+    box-sizing: border-box;
+    height: $DropDown-menu-height;
+    vertical-align: middle;
+    user-select: none;
+
+    &:hover {
+      background-color: $DropDown-menuItem-onHover-bg;
+      color: $DropDown-menuItem-onHover-color;
    }

-    &--block {
-        display: block;
-
-        .#{$ns}Button {
-            display: block;
-        }
+    &:not(.is-disabled),
+    &:not(.disabled) {
+      cursor: pointer;
    }

-    &-menu {
-        position: absolute;
-        z-index: $zindex-dropdown;
-        top: 100%;
-        left: 0;
-        margin: px2rem(1px) 0 0;
-        background-color: $DropDown-menu-bg;
-        list-style: none;
-        padding: $DropDown-menu-paddingY $DropDown-menu-paddingX;
-        border: $DropDown-menu-borderWidth solid $DropDown-menu-borderColor;
-        border-radius: $DropDown-menu-borderRadius;
-        box-shadow: $DropDown-menu-boxShadow;
-        min-width: $DropDown-menu-minWidth;
-        text-align: left;
+    &.#{$ns}DropDown-divider {
+      height: px2rem(1px);
+      margin: px2rem(9px) 0;
+      overflow: hidden;
+      background-color: $DropDown-menu-borderColor;
+      padding: 0;
    }
+  }

-    &--alignRight &-menu {
-        left: auto;
-        right: 0;
-    }
+  &-menu > li a {
+    display: block;
+    text-decoration: none;
+  }

-    &-menuItem,
-    &-menu > li {
-        padding: $DropDown-menuItem-paddingY $DropDown-menuItem-paddingX;
-        white-space: nowrap;
-        box-sizing: border-box;
-        height: $DropDown-menu-height;
-        vertical-align: middle;
-        user-select: none;
-
-        &:hover {
-            background-color: $DropDown-menuItem-onHover-bg;
-            color: $DropDown-menuItem-onHover-color;
-        }
-
-        &:not(.is-disabled),
-        &:not(.disabled) {
-            cursor: pointer;
-        }
-
-        &.#{$ns}DropDown-divider {
-            height: px2rem(1px);
-            margin: px2rem(9px) 0;
-            overflow: hidden;
-            background-color: $DropDown-menu-borderColor;
-            padding: 0;
-        }
-    }
-
-    &-menu > li a {
-        display: block;
-        text-decoration: none;
-    }
-
-    &-popover {
-        border: none;
-        box-shadow: none;
-    }
+  &-popover {
+    border: none;
+    box-shadow: none;
+  }
 }
--- a/scss/components/_list.scss
+++ b/scss/components/_list.scss
@ -1,177 +1,177 @@
 .#{$ns}List {
-    border: $List-borderWidth solid $List-borderColor;
-    border-radius: $List-borderRadius;
-    background-color: $List-bg;
-    margin-bottom: $gap-md;
-    position: relative;
+  border: $List-borderWidth solid $List-borderColor;
+  border-radius: $List-borderRadius;
+  background-color: $List-bg;
+  margin-bottom: $gap-md;
+  position: relative;

-    &-toolbar {
-        @include clearfix();
-        display: flex;
-        flex-wrap: nowrap;
-        padding: $List-toolbar-paddingY $List-toolbar-paddingX;
+  &-toolbar {
+    @include clearfix();
+    display: flex;
+    flex-wrap: nowrap;
+    padding: $List-toolbar-paddingY $List-toolbar-paddingX;
+  }
+
+  &-actions {
+    display: inline-block;
+
+    > * {
+      margin-right: $Crud-toolbar-gap;
+    }
+  }
+
+  &-header {
+    padding: $List-toolbar-paddingY $List-toolbar-paddingX;
+
+    > * + .#{$ns}Button,
+    > * + .#{$ns}ButtonGroup,
+    > * + .#{$ns}ButtonToolbar {
+      margin-left: $Crud-toolbar-gap;
+    }
+  }
+
+  &-header + &-toolbar {
+    padding-top: 0;
+  }
+
+  &-heading {
+    padding: $gap-xs 0;
+  }
+
+  &-fixedTop {
+    position: absolute;
+    background: $white;
+    z-index: -1;
+    opacity: 0;
+    box-shadow: $List-fixedTop-boxShadow;
+    padding: $gap-sm;
+
+    &.in {
+      position: fixed;
+      opacity: 1;
+      z-index: $zindex-affix;
    }

-    &-actions {
-        display: inline-block;
-
-        >* {
-            margin-right: $Crud-toolbar-gap;
-        }
+    .#{$ns}Cards-toolbar {
+      margin-bottom: 0;
    }

-    &-header {
-        padding: $List-toolbar-paddingY $List-toolbar-paddingX;
-
-        >*+.#{$ns}Button,
-        >*+.#{$ns}ButtonGroup,
-        >*+.#{$ns}ButtonToolbar {
-            margin-left: $Crud-toolbar-gap;
-        }
+    &:empty {
+      display: none;
    }
+  }

-    &-header+&-toolbar {
-        padding-top: 0;
-    }
+  &--unsaved &-heading {
+    background: $List--unsaved-heading-bg;
+    color: $List--unsaved-heading-color;
+    padding: $gap-xs $gap-sm;
+    margin-bottom: $gap-sm;
+  }

-    &-heading {
-        padding: $gap-xs 0;
-    }
+  &-dragTip {
+    color: $text--loud-color;
+    clear: both;
+    margin-top: $gap-xs;
+  }

-    &-fixedTop {
-        position: absolute;
-        background: $white;
-        z-index: -1;
-        opacity: 0;
-        box-shadow: $List-fixedTop-boxShadow;
-        padding: $gap-sm;
-
-        &.in {
-            position: fixed;
-            opacity: 1;
-            z-index: $zindex-affix;
-        }
-
-        .#{$ns}Cards-toolbar {
-            margin-bottom: 0;
-        }
-
-        &:empty {
-            display: none;
-        }
-    }
-
-    &--unsaved &-heading {
-        background: $List--unsaved-heading-bg;
-        color: $List--unsaved-heading-color;
-        padding: $gap-xs $gap-sm;
-        margin-bottom: $gap-sm;
-    }
-
-    &-dragTip {
-        color: $text--loud-color;
-        clear: both;
-        margin-top: $gap-xs;
-    }
-
-    &-placeholder {
-        color: $text--muted-color;
-        text-align: center;
-        height: $List-placeholder-height;
-        line-height: $List-placeholder-height;
-    }
+  &-placeholder {
+    color: $text--muted-color;
+    text-align: center;
+    height: $List-placeholder-height;
+    line-height: $List-placeholder-height;
+  }
 }

 .#{$ns}ListItem {
-    @include clearfix();
+  @include clearfix();

-    &+& {
-        border-top: $ListItem-borderWidth solid $ListItem-borderColor;
-    }
+  & + & {
+    border-top: $ListItem-borderWidth solid $ListItem-borderColor;
+  }

+  position: relative;
+  display: block;
+  padding: $ListItem-paddingY $ListItem-paddingX;
+
+  &:nth-child(even) {
+    background-color: $ListItem--strip-bg;
+  }
+
+  &-checkBtn {
+    float: left;
+    margin-right: $gap-sm;
+  }
+
+  &-dragBtn {
+    cursor: pointer;
+    float: left;
+    margin-right: $gap-sm;
+  }
+
+  &-actions {
+    float: right;
+  }
+
+  &-title {
+    margin: 0;
+    padding: 0;
+    font-size: $fontSizeBase;
+    color: $text--loud-color;
+    font-weight: $fontWeightNormal;
+  }
+
+  &-content {
+    overflow: hidden;
+  }
+
+  &-field {
    position: relative;
-    display: block;
-    padding: $ListItem-paddingY $ListItem-paddingX;
+    display: flex;
+    flex-wrap: nowrap;
+  }

-    &:nth-child(even) {
-        background-color: $ListItem--strip-bg;
+  &-fieldValue {
+    position: relative;
+    flex-basis: 0;
+    flex-grow: 1;
+    max-width: 100%;
+  }
+
+  &-fieldLabel {
+    width: px2rem(150px);
+    color: $text--muted-color;
+  }
+
+  &.is-checked {
+    background-color: $ListItem-onChecked-bg;
+    border-color: $ListItem-onChecked-borderColor;
+    color: $ListItem-onChecked-color;
+
+    + .#{$ns}ListItem {
+      border-color: $ListItem-onChecked-borderColor;
    }

-    &-checkBtn {
-        float: left;
-        margin-right: $gap-sm;
+    .#{$ns}ListItem-fieldLabel {
+      color: lighten($ListItem-onChecked-color, 20%);
+    }
+  }
+
+  &.is-modified,
+  &.is-moved {
+    background-color: $ListItem-onModified-bg;
+    border-color: $ListItem-onModified-borderColor;
+    color: $ListItem-onModified-color;
+
+    + .#{$ns}ListItem {
+      border-color: $ListItem-onModified-borderColor;
    }

-    &-dragBtn {
-        cursor: pointer;
-        float: left;
-        margin-right: $gap-sm;
+    .#{$ns}ListItem-fieldLabel {
+      color: lighten($ListItem-onModified-color, 20%);
    }
+  }

-    &-actions {
-        float: right;
-    }
-
-    &-title {
-        margin: 0;
-        padding: 0;
-        font-size: $fontSizeBase;
-        color: $text--loud-color;
-        font-weight: $fontWeightNormal;
-    }
-
-    &-content {
-        overflow: hidden;
-    }
-
-    &-field {
-        position: relative;
-        display: flex;
-        flex-wrap: nowrap;
-    }
-
-    &-fieldValue {
-        position: relative;
-        flex-basis: 0;
-        flex-grow: 1;
-        max-width: 100%;
-    }
-
-    &-fieldLabel {
-        width: px2rem(150px);
-        color: $text--muted-color;
-    }
-
-    &.is-checked {
-        background-color: $ListItem-onChecked-bg;
-        border-color: $ListItem-onChecked-borderColor;
-        color: $ListItem-onChecked-color;
-
-        +.#{$ns}ListItem {
-            border-color: $ListItem-onChecked-borderColor;
-        }
-
-        .#{$ns}ListItem-fieldLabel {
-            color: lighten($ListItem-onChecked-color, 20%);
-        }
-    }
-
-    &.is-modified,
-    &.is-moved {
-        background-color: $ListItem-onModified-bg;
-        border-color: $ListItem-onModified-borderColor;
-        color: $ListItem-onModified-color;
-
-        +.#{$ns}ListItem {
-            border-color: $ListItem-onModified-borderColor;
-        }
-
-        .#{$ns}ListItem-fieldLabel {
-            color: lighten($ListItem-onModified-color, 20%);
-        }
-    }
-
-    &.is-dragging {
-        opacity: $ListItem-onDragging-opacity;
-    }
-}
+  &.is-dragging {
+    opacity: $ListItem-onDragging-opacity;
+  }
+}
--- a/scss/components/_modal.scss
+++ b/scss/components/_modal.scss
@ -1,217 +1,220 @@
 .is-modalOpened {
-    overflow: hidden;
+  overflow: hidden;

-    .#{$ns}Modal {
-        overflow-x: hidden;
-        overflow-y: auto;
-    }
+  .#{$ns}Modal {
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
 }

@keyframes modalIn {
-    from {
-        opacity: 0;
-        transform: translate3d(0, -300px, 0) scale(0.2);
-    }
+  from {
+    opacity: 0;
+    transform: translate3d(0, -300px, 0) scale(0.2);
+  }
 }

@keyframes modalOut {
-    to {
-        opacity: 0;
-        transform: translate3d(0, -300px, 0) scale(0.2);
-    }
+  to {
+    opacity: 0;
+    transform: translate3d(0, -300px, 0) scale(0.2);
+  }
 }

 .#{$ns}Modal {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: $zindex-modal;
+  overflow: hidden;
+  outline: 0;
+
+  &-content {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog`
+    min-height: $Modal-content-minHeight;
+    pointer-events: auto;
+    background-color: $Modal-bg;
+    background-clip: padding-box;
+    outline: 0;
+    z-index: 2;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: $Modal-content-startMarginTop;
+    margin-bottom: $gap-md;
+    border: $Modal-content-borderWidth solid $Modal-content-borderColor;
+    border-radius: $Modal-content-borderRadius;
+
+    // transition: ease-out all 0.3s;
+    // transform: translateY(-300px) scale(0.2);
+    // opacity: 0;
+
+    &.in,
+    &.out {
+      // opacity: 1;
+      // transform: translateY(0) scale(1);
+      animation-duration: 0.35s;
+      animation-fill-mode: both;
+    }
+
+    &.in {
+      animation-name: modalIn;
+    }
+
+    &.out {
+      animation-name: modalOut;
+    }
+  }
+
+  &-overlay {
+    transition: ease-in-out opacity 0.5s;
+    // transition-delay: 0.2s;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
-    z-index: $zindex-modal;
-    overflow: hidden;
-    outline: 0;
+    z-index: 1;
+    background-color: $Modal-overlay-bg;
+    opacity: 0;

-    &-content {
-        position: relative;
-        display: flex;
-        flex-direction: column;
-        width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog`
-        min-height: $Modal-content-minHeight;
-        pointer-events: auto;
-        background-color: $Modal-bg;
-        background-clip: padding-box;
-        outline: 0;
-        z-index: 2;
-        margin-left: auto;
-        margin-right: auto;
-        margin-top: $Modal-content-startMarginTop;
-        margin-bottom: $gap-md;
-        border: $Modal-content-borderWidth solid $Modal-content-borderColor;
-        border-radius: $Modal-content-borderRadius;
-
-        // transition: ease-out all 0.3s;
-        // transform: translateY(-300px) scale(0.2);
-        // opacity: 0;
-
-        &.in,
-        &.out {
-            // opacity: 1;
-            // transform: translateY(0) scale(1);
-            animation-duration: 0.35s;
-            animation-fill-mode: both;
-        }
-
-        &.in {
-            animation-name: modalIn;
-        }
-
-        &.out {
-            animation-name: modalOut;
-        }
+    &.in {
+      opacity: 1;
    }

-    &-overlay {
-        transition: ease-in-out opacity 0.5s;
-        // transition-delay: 0.2s;
-        position: fixed;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        z-index: 1;
-        background-color: $Modal-overlay-bg;
-        opacity: 0;
+    &.out {
+      opacity: 0;
+    }
+  }

-        &.in {
-            opacity: 1;
-        }
+  &-header {
+    padding: $Modal-header-paddingY $Modal-header-paddingX;
+    background-color: $Modal-header-bg;
+    @include clearfix();
+    border-bottom: $Modal-body-borderTop;

-        &.out {
-            opacity: 0;
-        }
+    @if $Modal-content-borderRadius {
+      border-top-left-radius: $Modal-content-borderRadius;
+      border-top-right-radius: $Modal-content-borderRadius;
+    }
+  }
+
+  &-title {
+    font-size: $Modal-title-fontSize;
+    color: $Modal-title-color;
+  }
+
+  &-close {
+    float: right;
+    color: $Modal-close-color;
+    line-height: inherit;
+    text-decoration: none;
+    vertical-align: middle;
+
+    svg {
+      width: $Modal-close-width;
+      height: $Modal-close-width;
+      fill: $Modal-close-color;
    }

-    &-header {
-        padding: $Modal-header-paddingY $Modal-header-paddingX;
-        background-color: $Modal-header-bg;
-        @include clearfix();
-        border-bottom: $Modal-body-borderTop;
+    &:not(.is-disabled) {
+      cursor: pointer;

-        @if $Modal-content-borderRadius {
-            border-top-left-radius: $Modal-content-borderRadius;
-            border-top-right-radius: $Modal-content-borderRadius;
-        }
-    }
-
-    &-title {
-        font-size: $Modal-title-fontSize;
-        color: $Modal-title-color;
-    }
-
-    &-close {
-        float: right;
-        color: $Modal-close-color;
-        line-height: inherit;
+      &:hover {
        text-decoration: none;
-        vertical-align: middle;
+        color: $Model-close-onHover-color;

        svg {
-            width: $Modal-close-width;
-            height: $Modal-close-width;
-            fill: $Modal-close-color;
+          fill: $Model-close-onHover-color;
        }
+      }
+    }
+  }

-        &:not(.is-disabled) {
-            cursor: pointer;
+  &-content > &-close {
+    position: absolute;
+    right: $gap-md;
+    top: $gap-sm;
+    z-index: 10;
+  }

-            &:hover {
-                text-decoration: none;
-                color: $Model-close-onHover-color;
+  &-body {
+    padding: $Modal-body--noHeader-paddingTop $Modal-body-paddingX
+      $Modal-body-paddingY;
+    flex-basis: 0;
+    flex-grow: 1;
+  }

-                svg {
-                    fill: $Model-close-onHover-color;
-                }
-            }
-        }
+  &-header + &-body {
+    padding-top: $Modal-body-paddingY;
+  }
+
+  &-footer {
+    // @include clearfix();
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    padding: $Modal-footer-padding;
+    border-top: $Modal-body-borderBottom;
+    margin: $Modal-footer-marginY $Modal-footer-marginX;
+
+    @if $Modal-content-borderRadius {
+      border-bottom-left-radius: $Modal-content-borderRadius;
+      border-bottom-right-radius: $Modal-content-borderRadius;
    }

-    &-content>&-close {
-        position: absolute;
-        right: $gap-md;
-        top: $gap-sm;
-        z-index: 10;
-    }
-
-    &-body {
-        padding: $Modal-body--noHeader-paddingTop $Modal-body-paddingX $Modal-body-paddingY;
-        flex-basis: 0;
-        flex-grow: 1;
-    }
-
-    &-header+&-body {
-        padding-top: $Modal-body-paddingY;
-    }
-
-    &-footer {
-        // @include clearfix();
-        display: flex;
-        align-items: center;
-        justify-content: flex-end;
-        padding: $Modal-footer-padding;
-        border-top: $Modal-body-borderBottom;
-        margin: $Modal-footer-marginY $Modal-footer-marginX;
-
-        @if $Modal-content-borderRadius {
-            border-bottom-left-radius: $Modal-content-borderRadius;
-            border-bottom-right-radius: $Modal-content-borderRadius;
-        }
-
-        .#{$ns}Button {
-            margin-left: $gap-sm;
-        }
+    .#{$ns}Button {
+      margin-left: $gap-sm;
    }
+  }
 }

@for $i from (2) through 10 {
-    .#{$ns}Modal--#{$i}th {
-        .#{$ns}Modal-content {
-            margin-top: $Modal-content-startMarginTop + ($i - 1) * $Modal-content-stepMarginTop;
-        }
+  .#{$ns}Modal--#{$i}th {
+    .#{$ns}Modal-content {
+      margin-top: $Modal-content-startMarginTop +
+        ($i - 1) *
+        $Modal-content-stepMarginTop;
    }
+  }
 }

@include media-breakpoint-up(sm) {
-    .#{$ns}Modal-content {
-        max-width: $Modal-widthBase;
-    }
+  .#{$ns}Modal-content {
+    max-width: $Modal-widthBase;
+  }

-    .#{$ns}Modal--sm .#{$ns}Modal-content {
-        max-width: $Modal-widthSm;
-    }
+  .#{$ns}Modal--sm .#{$ns}Modal-content {
+    max-width: $Modal-widthSm;
+  }

-    .#{$ns}Modal--base .#{$ns}Modal-content {
-        max-width: $Modal-widthBase;
-    }
+  .#{$ns}Modal--base .#{$ns}Modal-content {
+    max-width: $Modal-widthBase;
+  }

-    .#{$ns}Modal--md .#{$ns}Modal-content {
-        max-width: $Modal-widthMd;
-    }
+  .#{$ns}Modal--md .#{$ns}Modal-content {
+    max-width: $Modal-widthMd;
+  }

-    .#{$ns}Modal--lg .#{$ns}Modal-content {
-        max-width: $Modal-widthLg;
-    }
+  .#{$ns}Modal--lg .#{$ns}Modal-content {
+    max-width: $Modal-widthLg;
+  }

-    .#{$ns}Modal--xl .#{$ns}Modal-content {
-        max-width: $Modal-widthXl;
-    }
+  .#{$ns}Modal--xl .#{$ns}Modal-content {
+    max-width: $Modal-widthXl;
+  }
 }

 .#{$ns}Dialog-info {
-    flex-basis: 0;
-    flex-grow: 1;
-    text-align: left;
+  flex-basis: 0;
+  flex-grow: 1;
+  text-align: left;
 }

 .#{$ns}Dialog-error {
-    color: $danger;
-}
+  color: $danger;
+}
--- a/scss/components/_nav.scss
+++ b/scss/components/_nav.scss
@ -1,143 +1,143 @@
 .#{$ns}Nav {
-    list-style: none;
-    margin: 0;
-    padding: 0;
+  list-style: none;
+  margin: 0;
+  padding: 0;

-    &--tabs {
-        border-bottom: $Tabs-borderWidth solid $Tabs-borderColor;
+  &--tabs {
+    border-bottom: $Tabs-borderWidth solid $Tabs-borderColor;

-        .#{$ns}Nav-item {
-            margin-bottom: -$Tabs-borderWidth;
-            display: inline-block;
+    .#{$ns}Nav-item {
+      margin-bottom: -$Tabs-borderWidth;
+      display: inline-block;

-            > a {
-                font-size: $Tabs-linkFontSize;
-                display: block;
-                outline: none;
-                border: $Tabs-borderWidth solid transparent;
-                border-top-left-radius: $Tabs-borderRadius;
-                border-top-right-radius: $Tabs-borderRadius;
-                color: $Tabs-color;
-                text-decoration: none;
-                margin-right: px2rem(2px);
-                padding: $gap-sm $gap-base;
-                cursor: pointer;
-            }
+      > a {
+        font-size: $Tabs-linkFontSize;
+        display: block;
+        outline: none;
+        border: $Tabs-borderWidth solid transparent;
+        border-top-left-radius: $Tabs-borderRadius;
+        border-top-right-radius: $Tabs-borderRadius;
+        color: $Tabs-color;
+        text-decoration: none;
+        margin-right: px2rem(2px);
+        padding: $gap-sm $gap-base;
+        cursor: pointer;
+      }

-            &:hover > a,
-            > a:focus {
-                border-color: $Tabs-onHover-borderColor;
-                text-decoration: none;
-            }
+      &:hover > a,
+      > a:focus {
+        border-color: $Tabs-onHover-borderColor;
+        text-decoration: none;
+      }

-            &.disabled > a,
-            &.is-disabled > a {
-                color: $Tabs-onDisabled-color;
-                background-color: transparent;
-                border-color: transparent;
-                pointer-events: none;
-            }
+      &.disabled > a,
+      &.is-disabled > a {
+        color: $Tabs-onDisabled-color;
+        background-color: transparent;
+        border-color: transparent;
+        pointer-events: none;
+      }

-            &.active > a,
-            &.is-active > a {
-                color: $Tabs-onActive-color;
-                background-color: $Tabs-onActive-bg;
-                border-color: $Tabs-onActive-borderColor;
-                border-bottom-color: $Tabs-content-bg;
-            }
-        }
-
-        .#{$ns}Nav-itemIcon {
-            margin-right: $gap-xs;
-        }
+      &.active > a,
+      &.is-active > a {
+        color: $Tabs-onActive-color;
+        background-color: $Tabs-onActive-bg;
+        border-color: $Tabs-onActive-borderColor;
+        border-bottom-color: $Tabs-content-bg;
+      }
    }

-    &--stacked {
-        .#{$ns}Nav-item {
-            position: relative;
-
-            > a {
-                display: block;
-                outline: none;
-                color: $Nav-item-color;
-                text-decoration: none;
-                padding: $gap-sm $gap-base;
-                cursor: pointer;
-                background-color: $Nav-item-bg;
-                border-radius: $Nav-item-borderRadius;
-            }
-
-            &:hover > a,
-            > a:focus {
-                border-color: $Nav-item-onHover-color;
-                text-decoration: none;
-                background-color: $Nav-item-onHover-bg;
-            }
-
-            &.disabled > a,
-            &.is-disabled > a {
-                color: $Nav-item-onDisabled-color;
-                background-color: transparent;
-                pointer-events: none;
-            }
-
-            &.active > a,
-            &.is-active > a {
-                color: $Nav-item-onActive-color;
-                background-color: $Nav-item-onActive-bg;
-                border-left: $Nav-item-onActive-borderLeft;
-                padding-left: px2rem(12px);
-            }
-
-            &.is-unfolded {
-                .#{$ns}Nav-itemToggler {
-                    transform: rotate(180deg) scale(0.8);
-                }
-
-                .#{$ns}Nav-subItems {
-                    display: block;
-                }
-            }
-
-            .#{$ns}Nav-itemToggler {
-                position: absolute;
-                width: px2rem(30px);
-                height: px2rem(30px);
-                text-align: center;
-                line-height: px2rem(30px);
-                vertical-align: middle;
-                top: px2rem(4px);
-                right: px2rem(2px);
-                cursor: pointer;
-                transform: scale(0.8);
-                transition: transform 0.3s;
-            }
-
-            .#{$ns}Nav-subItems {
-                display: none;
-                padding-left: 0;
-                list-style: none;
-            }
-
-            .#{$ns}Nav-item {
-                font-size: $Nav-subItem-fontSize;
-
-                a:before {
-                    content: "";
-                    display: inline-block;
-                    width: px2rem(4px);
-                    height: px2rem(4px);
-                    background-color: #ccc;
-                    border-radius: px2rem(500px);
-                    margin-right: px2rem(8px);
-                    vertical-align: middle;
-                }
-
-                &.active > a:before,
-                &.is-active > a:before {
-                    background-color: $Nav-subItem-onActiveBeforeBg;
-                }
-            }
-        }
+    .#{$ns}Nav-itemIcon {
+      margin-right: $gap-xs;
    }
+  }
+
+  &--stacked {
+    .#{$ns}Nav-item {
+      position: relative;
+
+      > a {
+        display: block;
+        outline: none;
+        color: $Nav-item-color;
+        text-decoration: none;
+        padding: $gap-sm $gap-base;
+        cursor: pointer;
+        background-color: $Nav-item-bg;
+        border-radius: $Nav-item-borderRadius;
+      }
+
+      &:hover > a,
+      > a:focus {
+        border-color: $Nav-item-onHover-color;
+        text-decoration: none;
+        background-color: $Nav-item-onHover-bg;
+      }
+
+      &.disabled > a,
+      &.is-disabled > a {
+        color: $Nav-item-onDisabled-color;
+        background-color: transparent;
+        pointer-events: none;
+      }
+
+      &.active > a,
+      &.is-active > a {
+        color: $Nav-item-onActive-color;
+        background-color: $Nav-item-onActive-bg;
+        border-left: $Nav-item-onActive-borderLeft;
+        padding-left: px2rem(12px);
+      }
+
+      &.is-unfolded {
+        .#{$ns}Nav-itemToggler {
+          transform: rotate(180deg) scale(0.8);
+        }
+
+        .#{$ns}Nav-subItems {
+          display: block;
+        }
+      }
+
+      .#{$ns}Nav-itemToggler {
+        position: absolute;
+        width: px2rem(30px);
+        height: px2rem(30px);
+        text-align: center;
+        line-height: px2rem(30px);
+        vertical-align: middle;
+        top: px2rem(4px);
+        right: px2rem(2px);
+        cursor: pointer;
+        transform: scale(0.8);
+        transition: transform 0.3s;
+      }
+
+      .#{$ns}Nav-subItems {
+        display: none;
+        padding-left: 0;
+        list-style: none;
+      }
+
+      .#{$ns}Nav-item {
+        font-size: $Nav-subItem-fontSize;
+
+        a:before {
+          content: '';
+          display: inline-block;
+          width: px2rem(4px);
+          height: px2rem(4px);
+          background-color: #ccc;
+          border-radius: px2rem(500px);
+          margin-right: px2rem(8px);
+          vertical-align: middle;
+        }
+
+        &.active > a:before,
+        &.is-active > a:before {
+          background-color: $Nav-subItem-onActiveBeforeBg;
+        }
+      }
+    }
+  }
 }
--- a/scss/components/_page.scss
+++ b/scss/components/_page.scss
@ -1,100 +1,100 @@
 .#{$ns}Page {
-    &-header {
-        padding: $Page-header-paddingY $Page-header-paddingX;
+  &-header {
+    padding: $Page-header-paddingY $Page-header-paddingX;
+  }
+
+  &-main {
+    background: $Page-main-bg;
+  }
+
+  &-content {
+    padding: $Page-content-paddingY $Page-content-paddingX;
+  }
+
+  &-main > &-header {
+    border-bottom: $borderWidth solid $borderColor;
+  }
+
+  &-headerRow {
+    border-bottom: $borderWidth solid $borderColor;
+
+    display: table;
+    table-layout: fixed;
+    width: 100%;
+    border-spacing: 0;
+
+    .#{$ns}Page-header,
+    .#{$ns}Page-toolbar {
+      display: table-cell;
+      vertical-align: middle;
    }

-    &-main {
-        background: $Page-main-bg;
+    .#{$ns}Page-toolbar {
+      text-align: right;
+      padding-right: $gap-base;
    }
+  }

-    &-content {
-        padding: $Page-content-paddingY $Page-content-paddingX;
-    }
+  &-title {
+    margin: 0;
+    padding: 0;
+    color: $Page-title-color;
+    line-height: $Page-title-lineHeight;
+    font-size: $Page-title-fontSize;
+    font-weight: $Page-title-fontWeight;
+  }

-    &-main > &-header {
-        border-bottom: $borderWidth solid $borderColor;
-    }
+  &-body {
+    padding: $Page-body-padding;
+  }

-    &-headerRow {
-        border-bottom: $borderWidth solid $borderColor;
-
-        display: table;
-        table-layout: fixed;
-        width: 100%;
-        border-spacing: 0;
-
-        .#{$ns}Page-header,
-        .#{$ns}Page-toolbar {
-            display: table-cell;
-            vertical-align: middle;
-        }
-
-        .#{$ns}Page-toolbar {
-            text-align: right;
-            padding-right: $gap-base;
-        }
-    }
-
-    &-title {
-        margin: 0;
-        padding: 0;
-        color: $Page-title-color;
-        line-height: $Page-title-lineHeight;
-        font-size: $Page-title-fontSize;
-        font-weight: $Page-title-fontWeight;
-    }
-
-    &-body {
-        padding: $Page-body-padding;
-    }
-
-    &-asideTplWrapper {
-        padding: $gap-xs;
-    }
+  &-asideTplWrapper {
+    padding: $gap-xs;
+  }
 }

 .#{$ns}Page-toolbar {
-    .#{$ns}Button + .#{$ns}Button {
-        margin-left: $gap-xs;
-    }
+  .#{$ns}Button + .#{$ns}Button {
+    margin-left: $gap-xs;
+  }
 }

 .#{$ns}Page-aside {
-    background-color: $Page-aside-bg;
+  background-color: $Page-aside-bg;
 }

@include media-breakpoint-up(md) {
-    .#{$ns}Page-aside {
-        &::before {
-            content: "";
-            position: absolute;
-            width: inherit;
-            top: 0;
-            bottom: 0;
-            z-index: -1;
-            background-color: inherit;
-            border: inherit;
-        }
-    
-        width: $Page-aside-width;
-        border-right: $borderWidth solid $borderColor;
+  .#{$ns}Page-aside {
+    &::before {
+      content: '';
+      position: absolute;
+      width: inherit;
+      top: 0;
+      bottom: 0;
+      z-index: -1;
+      background-color: inherit;
+      border: inherit;
    }
-    
-    .#{$ns}Page--withSidebar {
-        display: table;
-        table-layout: fixed;
-        width: 100%;
-        height: 100%;
-        border-spacing: 0;
-    
-        .#{$ns}Page-aside,
-        .#{$ns}Page-content {
-            display: table-cell;
-            vertical-align: top;
-        }
-    
-        .#{$ns}Page-content {
-            width: 100%;
-        }
+
+    width: $Page-aside-width;
+    border-right: $borderWidth solid $borderColor;
+  }
+
+  .#{$ns}Page--withSidebar {
+    display: table;
+    table-layout: fixed;
+    width: 100%;
+    height: 100%;
+    border-spacing: 0;
+
+    .#{$ns}Page-aside,
+    .#{$ns}Page-content {
+      display: table-cell;
+      vertical-align: top;
    }
+
+    .#{$ns}Page-content {
+      width: 100%;
+    }
+  }
 }
--- a/scss/components/_pagination.scss
+++ b/scss/components/_pagination.scss
@ -1,123 +1,123 @@
 .#{$ns}Pagination {
-    display: inline-block;
-    padding-left: 0;
-    margin-bottom: px2rem(-10px);
-    border-radius: px2rem(4px);
+  display: inline-block;
+  padding-left: 0;
+  margin-bottom: px2rem(-10px);
+  border-radius: px2rem(4px);

-    > li {
-        display: inline;
+  > li {
+    display: inline;

-        > a,
-        > span {
-            user-select: none;
-            position: relative;
-            float: left;
-            text-decoration: none;
-            min-width: $Pagination-minWidth;
-            height: $Pagination-height;
-            border: 0;
-            line-height: $Pagination-height;
-            padding: $Pagination-padding;
-            text-align: center;
-            color: #666666;
-            border-radius: 0;
-            margin-left: 0;
-            font-size: $Pagination-fontSize;
-        }
-
-        > a:hover,
-        > span:hover,
-        > a:focus,
-        > span:focus {
-            background-color: transparent;
-            color: $primary;
-        }
+    > a,
+    > span {
+      user-select: none;
+      position: relative;
+      float: left;
+      text-decoration: none;
+      min-width: $Pagination-minWidth;
+      height: $Pagination-height;
+      border: 0;
+      line-height: $Pagination-height;
+      padding: $Pagination-padding;
+      text-align: center;
+      color: #666666;
+      border-radius: 0;
+      margin-left: 0;
+      font-size: $Pagination-fontSize;
    }

-    > li.disabled {
-        > span,
-        > a {
-            cursor: not-allowed;
-        }
+    > a:hover,
+    > span:hover,
+    > a:focus,
+    > span:focus {
+      background-color: transparent;
+      color: $primary;
+    }
+  }

-        > a,
-        > span,
-        > a:hover,
-        > span:hover,
-        > a:focus,
-        > span:focus {
-            color: #cccccc;
-        }
+  > li.disabled {
+    > span,
+    > a {
+      cursor: not-allowed;
    }

-    > li.active {
-        > a,
-        > span,
-        > a:hover,
-        > span:hover,
-        > a:focus,
-        > span:focus {
-            background-color: $Pagination-onActive-backgroundColor;
-            color: $Pagination-onActive-color;
-            border: $Pagination-onActive-border;
-        }
+    > a,
+    > span,
+    > a:hover,
+    > span:hover,
+    > a:focus,
+    > span:focus {
+      color: #cccccc;
+    }
+  }
+
+  > li.active {
+    > a,
+    > span,
+    > a:hover,
+    > span:hover,
+    > a:focus,
+    > span:focus {
+      background-color: $Pagination-onActive-backgroundColor;
+      color: $Pagination-onActive-color;
+      border: $Pagination-onActive-border;
+    }
+  }
+
+  &-prev,
+  &-next {
+    font-family: $Pagination-arrowVendor;
+  }
+
+  &-prev {
+    > span {
+      cursor: pointer;
+
+      &::before {
+        content: $Pagination-prevArrowContent;
+      }
+    }
+  }
+
+  &-ellipsis {
+    > a > span {
+      position: relative;
+      top: px2rem(-4px);
+    }
+  }
+
+  &-next {
+    > span {
+      cursor: pointer;
+
+      &::before {
+        content: $Pagination-nextArrowContent;
+      }
+    }
+  }
+
+  &-inputGroup {
+    display: inline-flex;
+    flex-wrap: nowrap;
+
+    .#{$ns}Pagination-input {
+      width: px2rem(50px);
+      height: $Pagination-height;
+      border: $borderWidth solid $borderColor;
+      border-top-left-radius: $borderRadius;
+      border-bottom-left-radius: $borderRadius;
+      padding: px2rem(5px) px2rem(10px);
+
+      &:focus {
+        outline: none;
+        border: $borderWidth solid $primary;
+      }
    }

-    &-prev,
-    &-next {
-        font-family: $Pagination-arrowVendor;
-    }
-
-    &-prev {
-        > span {
-            cursor: pointer;
-
-            &::before {
-                content: $Pagination-prevArrowContent;
-            }
-        }
-    }
-
-    &-ellipsis {
-        > a > span {
-            position: relative;
-            top: px2rem(-4px);
-        }
-    }
-
-    &-next {
-        > span {
-            cursor: pointer;
-
-            &::before {
-                content: $Pagination-nextArrowContent;
-            }
-        }
-    }
-
-    &-inputGroup {
-        display: inline-flex;
-        flex-wrap: nowrap;
-
-        .#{$ns}Pagination-input {
-            width: px2rem(50px);
-            height: $Pagination-height;
-            border: $borderWidth solid $borderColor;
-            border-top-left-radius: $borderRadius;
-            border-bottom-left-radius: $borderRadius;
-            padding: px2rem(5px) px2rem(10px);
-
-            &:focus {
-                outline: none;
-                border: $borderWidth solid $primary;
-            }
-        }
-
-        .#{$ns}Button {
-            height: $Pagination-height;
-            margin-left: px2rem(-1px);
-            border-radius: 0 $borderRadius $borderRadius 0;
-            padding: 0 px2rem(10px);
-        }
+    .#{$ns}Button {
+      height: $Pagination-height;
+      margin-left: px2rem(-1px);
+      border-radius: 0 $borderRadius $borderRadius 0;
+      padding: 0 px2rem(10px);
    }
+  }
 }
--- a/scss/components/_popover.scss
+++ b/scss/components/_popover.scss
@ -1,41 +1,41 @@
 .#{$ns}PopOver {
-    position: absolute;
-    background: $PopOver-bg;
+  position: absolute;
+  background: $PopOver-bg;
+  top: 0;
+  left: 0;
+  z-index: $zindex-popover;
+  display: none;
+  padding: 0;
+  margin: 0;
+  font-weight: $fontWeightNormal;
+  letter-spacing: normal;
+  line-height: $lineHeightBase;
+  text-align: left;
+  text-align: start;
+  text-decoration: none;
+  text-shadow: none;
+  text-transform: none;
+  white-space: normal;
+  word-break: normal;
+  word-spacing: normal;
+  word-wrap: normal;
+  font-size: $fontSizeBase;
+  box-shadow: $boxShadow;
+  border: $borderWidth solid $borderColor;
+  border-radius: $borderRadius;
+
+  & > * {
+    position: relative;
+    z-index: 2;
+  }
+
+  &-overlay {
+    position: fixed !important;
    top: 0;
    left: 0;
-    z-index: $zindex-popover;
-    display: none;
-    padding: 0;
-    margin: 0;
-    font-weight: $fontWeightNormal;
-    letter-spacing: normal;
-    line-height: $lineHeightBase;
-    text-align: left;
-    text-align: start;
-    text-decoration: none;
-    text-shadow: none;
-    text-transform: none;
-    white-space: normal;
-    word-break: normal;
-    word-spacing: normal;
-    word-wrap: normal;
-    font-size: $fontSizeBase;
-    box-shadow: $boxShadow;
-    border: $borderWidth solid $borderColor;
-    border-radius: $borderRadius;
-
-    &>* {
-        position: relative;
-        z-index: 2;
-    }
-
-    &-overlay {
-        position: fixed !important;
-        top: 0;
-        left: 0;
-        right: 0;
-        z-index: 1;
-        bottom: 0;
-        background: transparent;
-    }
-}
+    right: 0;
+    z-index: 1;
+    bottom: 0;
+    background: transparent;
+  }
+}
--- a/scss/components/_popoverable.scss
+++ b/scss/components/_popoverable.scss
@ -1,30 +1,30 @@
 .#{$ns}Field-popOverBtn {
-    color: $PopOverAble-iconColor;
-    margin-left: $gap-xs;
-    visibility: hidden;
-    display: inline-block;
-    cursor: pointer;
+  color: $PopOverAble-iconColor;
+  margin-left: $gap-xs;
+  visibility: hidden;
+  display: inline-block;
+  cursor: pointer;

-    &:hover {
-        color: $PopOverAble-onHover-iconColor;
-    }
+  &:hover {
+    color: $PopOverAble-onHover-iconColor;
+  }
 }

 .#{$ns}Field--popOverAble {
-    outline: none;
-    position: relative;
+  outline: none;
+  position: relative;

-    &:hover .#{$ns}Field-popOverBtn {
-        visibility: visible;
-    }
+  &:hover .#{$ns}Field-popOverBtn {
+    visibility: visible;
+  }
 }

 .#{$ns}PopOverAble-popover {
-    min-width: px2rem(320px);
-    max-width: px2rem(640px);
+  min-width: px2rem(320px);
+  max-width: px2rem(640px);

-    .#{$ns}Panel {
-        margin-bottom: 0;
-        border: none;
-    }
+  .#{$ns}Panel {
+    margin-bottom: 0;
+    border: none;
+  }
 }
--- a/scss/components/_quick-edit.scss
+++ b/scss/components/_quick-edit.scss
@ -1,47 +1,47 @@
 .#{$ns}Field-quickEditBtn {
-    color: $QuickEdit-iconColor;
-    margin-left: $gap-xs;
-    visibility: hidden;
-    display: inline-block;
-    cursor: pointer;
+  color: $QuickEdit-iconColor;
+  margin-left: $gap-xs;
+  visibility: hidden;
+  display: inline-block;
+  cursor: pointer;

-    &:hover {
-        color: $QuickEdit-onHover-iconColor;
-    }
+  &:hover {
+    color: $QuickEdit-onHover-iconColor;
+  }
 }

 .#{$ns}Field--quickEditable {
-    outline: none;
+  outline: none;
+  position: relative;
+
+  &:focus {
    position: relative;

-    &:focus {
-        position: relative;
-
-        &:after {
-            content: "";
-            left: 0;
-            top: 0;
-            right: 0;
-            bottom: 0;
-            position: absolute;
-            pointer-events: none;
-            z-index: 1;
-            border: $QuickEdit-onFocus-borderWidth dashed
-                $QuickEdit-onFocus-borderColor;
-        }
+    &:after {
+      content: '';
+      left: 0;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      position: absolute;
+      pointer-events: none;
+      z-index: 1;
+      border: $QuickEdit-onFocus-borderWidth dashed
+        $QuickEdit-onFocus-borderColor;
    }
+  }

-    &:hover .#{$ns}Field-quickEditBtn {
-        visibility: visible;
-    }
+  &:hover .#{$ns}Field-quickEditBtn {
+    visibility: visible;
+  }
 }

 .#{$ns}QuickEdit-popover {
-    min-width: px2rem(320px);
-    max-width: px2rem(640px);
+  min-width: px2rem(320px);
+  max-width: px2rem(640px);

-    .#{$ns}Panel {
-        margin-bottom: 0;
-        border: none;
-    }
+  .#{$ns}Panel {
+    margin-bottom: 0;
+    border: none;
+  }
 }
--- a/scss/components/_remark.scss
+++ b/scss/components/_remark.scss
@ -1,23 +1,23 @@
 .#{$ns}Remark {
-    display: inline-block;
-    margin-left: $Remark-marginLeft;
-    color: $Remark-iconColor;
-    font-size: $fontSizeBase;
-    line-height: 1;
-    cursor: pointer;
-    background-color: $Remark-bg;
-    border: $Remark-borderWidth solid $Remark-borderColor;
-    text-align: center;
-    width: $Remark-width;
+  display: inline-block;
+  margin-left: $Remark-marginLeft;
+  color: $Remark-iconColor;
+  font-size: $fontSizeBase;
+  line-height: 1;
+  cursor: pointer;
+  background-color: $Remark-bg;
+  border: $Remark-borderWidth solid $Remark-borderColor;
+  text-align: center;
+  width: $Remark-width;

-    &-icon {
-        color: inherit;
-        font-size: $Remark-icon-fontSize;
-    }
+  &-icon {
+    color: inherit;
+    font-size: $Remark-icon-fontSize;
+  }

-    &:hover {
-        color: $Remark-onHover-iconColor;
-        background-color: $Remark-onHover-bg;
-        border-color: $Remark-onHover-borderColor;
-    }
+  &:hover {
+    color: $Remark-onHover-iconColor;
+    background-color: $Remark-onHover-bg;
+    border-color: $Remark-onHover-borderColor;
+  }
 }
--- a/scss/components/_service.scss
+++ b/scss/components/_service.scss
@ -1,3 +1,3 @@
 .#{$ns}Service {
-    position: relative;
+  position: relative;
 }
--- a/scss/components/_spinner.scss
+++ b/scss/components/_spinner.scss
@ -1,67 +1,67 @@
@keyframes rotate {
-    0% {
-        transform: rotate(0deg);
-    }
+  0% {
+    transform: rotate(0deg);
+  }

-    100% {
-        transform: rotate(359deg);
-    }
+  100% {
+    transform: rotate(359deg);
+  }
 }

 .#{$ns}Spinner-overlay {
-    position: absolute;
-    z-index: 10;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: $Spinner-overlay-bg;
-    transition: ease-out opacity 0.3s;
+  position: absolute;
+  z-index: 10;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: $Spinner-overlay-bg;
+  transition: ease-out opacity 0.3s;

-    opacity: 0;
+  opacity: 0;

-    &.in {
-        opacity: 1;
-    }
+  &.in {
+    opacity: 1;
+  }
 }

 .#{$ns}Spinner {
-    width: $Spinner-width;
-    height: $Spinner-height;
-    transform: translateZ(0);
-    display: inline-block;
-    background: $Spinner-bg;
-    background-size: 100%;
+  width: $Spinner-width;
+  height: $Spinner-height;
+  transform: translateZ(0);
+  display: inline-block;
+  background: $Spinner-bg;
+  background-size: 100%;

-    &--lg {
-        width: $Spinner--lg-width;
-        height: $Spinner--lg-height;
-    }
+  &--lg {
+    width: $Spinner--lg-width;
+    height: $Spinner--lg-height;
+  }

-    transition: ease-out all 0.3s;
+  transition: ease-out all 0.3s;
 }

 // 当启用 overlay 的时候，应该是居中模式。
 .#{$ns}Spinner--overlay {
-    position: absolute;
-    z-index: 11;
-    top: 50%;
-    left: 50%;
-    transform: translate3d(-50%, -50%, 0);
+  position: absolute;
+  z-index: 11;
+  top: 50%;
+  left: 50%;
+  transform: translate3d(-50%, -50%, 0);
 }

 .#{$ns}Spinner--overlay.#{$ns}Spinner--lg {
-    width: $Spinner--lg-width;
-    height: $Spinner--lg-height;
-    line-height: $Spinner--lg-height;
+  width: $Spinner--lg-width;
+  height: $Spinner--lg-height;
+  line-height: $Spinner--lg-height;
 }

@include media-breakpoint-up(md) {
-    .#{$ns}Layout .#{$ns}Page-body>.#{$ns}Spinner-overlay {
-        left: $Layout-aside-width;
-    }
+  .#{$ns}Layout .#{$ns}Page-body > .#{$ns}Spinner-overlay {
+    left: $Layout-aside-width;
+  }

-    .#{$ns}Layout--folded .#{$ns}Page-body>.#{$ns}Spinner-overlay {
-        left: $Layout-aside--folded-width;
-    }
-}
+  .#{$ns}Layout--folded .#{$ns}Page-body > .#{$ns}Spinner-overlay {
+    left: $Layout-aside--folded-width;
+  }
+}
--- a/scss/components/_status.scss
+++ b/scss/components/_status.scss
@ -1,127 +1,127 @@
 .#{$ns}StatusField {
-    white-space: nowrap;
+  white-space: nowrap;

-    &-label {
-        font-size: $fontSizeSm;
-        margin-left: $gap-sm;
+  &-label {
+    font-size: $fontSizeSm;
+    margin-left: $gap-sm;
+  }
+
+  @keyframes animation-rolling_red {
+    0% {
+      left: 0;
    }

-    @keyframes animation-rolling_red {
-        0% {
-            left: 0;
-        }
-
-        50% {
-            left: px2rem(13px);
-        }
-
-        100% {
-            left: 0;
-        }
+    50% {
+      left: px2rem(13px);
    }

-    @keyframes animation-rolling_blue {
-        0% {
-            left: $gap-sm + $gap-base;
-        }
+    100% {
+      left: 0;
+    }
+  }

-        50% {
-            left: px2rem(12px);
-        }
-
-        100% {
-            left: $gap-sm + $gap-base;
-        }
+  @keyframes animation-rolling_blue {
+    0% {
+      left: $gap-sm + $gap-base;
    }

-    .#{$ns}Status-icon {
-        &--danger,
-        &--primary,
-        &--rolling,
-        &--success,
-        &--warning {
-            &::before {
-                font-family: "iconfont";
-                content: "\e632";
-                font-style: normal;
-            }
-        }
-
-        &--rolling {
-            color: $warning;
-            position: relative;
-            left: $gap-md;
-
-            &::before {
-                font-size: inherit;
-                color: $danger;
-                position: absolute;
-                left: 0;
-                top: px2rem(1px);
-                margin-left: px2rem(-27px);
-                animation: animation-rolling_red 2s;
-                animation-iteration-count: infinite;
-            }
-
-            &::after {
-                font-family: "iconfont";
-                content: "\e632";
-                font-style: normal;
-                font-size: inherit;
-                color: $primary;
-                position: absolute;
-                left: $gap-sm + $gap-base;
-                top: px2rem(1px);
-                margin-left: px2rem(-39px);
-                animation: animation-rolling_blue 2s;
-                animation-iteration-count: infinite;
-            }
-        }
-
-        &--success {
-            &::before {
-                color: $success;
-            }
-        }
-
-        &--danger {
-            &::before {
-                color: $danger;
-            }
-        }
-
-        &--warning {
-            &::before {
-                color: $warning;
-            }
-        }
-
-        &--primary {
-            &::before {
-                color: $primary;
-            }
-        }
+    50% {
+      left: px2rem(12px);
    }

-    .#{$ns}Status-icon--rolling + &-label {
-        color: $warning;
-        position: relative;
-        left: $gap-md;
+    100% {
+      left: $gap-sm + $gap-base;
+    }
+  }
+
+  .#{$ns}Status-icon {
+    &--danger,
+    &--primary,
+    &--rolling,
+    &--success,
+    &--warning {
+      &::before {
+        font-family: 'iconfont';
+        content: '\e632';
+        font-style: normal;
+      }
    }

-    .#{$ns}Status-icon--success + &-label {
-        color: $success;
-    }
+    &--rolling {
+      color: $warning;
+      position: relative;
+      left: $gap-md;

-    .#{$ns}Status-icon--danger + &-label {
+      &::before {
+        font-size: inherit;
        color: $danger;
-    }
+        position: absolute;
+        left: 0;
+        top: px2rem(1px);
+        margin-left: px2rem(-27px);
+        animation: animation-rolling_red 2s;
+        animation-iteration-count: infinite;
+      }

-    .#{$ns}Status-icon--warning + &-label {
-        color: $warning;
-    }
-
-    .#{$ns}Status-icon--primary + &-label {
+      &::after {
+        font-family: 'iconfont';
+        content: '\e632';
+        font-style: normal;
+        font-size: inherit;
        color: $primary;
+        position: absolute;
+        left: $gap-sm + $gap-base;
+        top: px2rem(1px);
+        margin-left: px2rem(-39px);
+        animation: animation-rolling_blue 2s;
+        animation-iteration-count: infinite;
+      }
    }
+
+    &--success {
+      &::before {
+        color: $success;
+      }
+    }
+
+    &--danger {
+      &::before {
+        color: $danger;
+      }
+    }
+
+    &--warning {
+      &::before {
+        color: $warning;
+      }
+    }
+
+    &--primary {
+      &::before {
+        color: $primary;
+      }
+    }
+  }
+
+  .#{$ns}Status-icon--rolling + &-label {
+    color: $warning;
+    position: relative;
+    left: $gap-md;
+  }
+
+  .#{$ns}Status-icon--success + &-label {
+    color: $success;
+  }
+
+  .#{$ns}Status-icon--danger + &-label {
+    color: $danger;
+  }
+
+  .#{$ns}Status-icon--warning + &-label {
+    color: $warning;
+  }
+
+  .#{$ns}Status-icon--primary + &-label {
+    color: $primary;
+  }
 }
--- a/scss/components/_table.scss
+++ b/scss/components/_table.scss
--- a/scss/components/_tabs.scss
+++ b/scss/components/_tabs.scss
@ -1,270 +1,265 @@
 .#{$ns}Tabs {
-    &-links {
-        border-bottom: $Tabs-borderWidth solid $Tabs-borderColor;
-        padding-left: 0;
-        margin-bottom: 0;
-        list-style: none;
+  &-links {
+    border-bottom: $Tabs-borderWidth solid $Tabs-borderColor;
+    padding-left: 0;
+    margin-bottom: 0;
+    list-style: none;

-        &::before {
-            display: table;
-            content: ' ';
-        }
-
-        >.#{$ns}Tabs-link {
-            margin-bottom: -$Tabs-borderWidth;
-            display: inline-block;
-            position: relative;
-
-            >a:first-child {
-                font-size: $Tabs-linkFontSize;
-                outline: none;
-                border: $Tabs-borderWidth solid transparent;
-                border-top-left-radius: $Tabs-borderRadius;
-                border-top-right-radius: $Tabs-borderRadius;
-                color: $Tabs-color;
-                margin: $Tabs-linkMargin;
-                padding: $Tabs-linkPadding;
-                text-decoration: none;
-                cursor: pointer;
-                display: block;
-            }
-
-            >.#{$ns}Combo-toolbarBtn {
-                position: absolute;
-                right: -10px;
-                top: -10px;
-                z-index: 10;
-                display: none;
-            }
-
-            &:hover>.#{$ns}Combo-toolbarBtn {
-                display: block;
-            }
-
-            &:hover>a:first-child,
-            >a:first-child:focus {
-                border-color: $Tabs-onHover-borderColor;
-                text-decoration: none;
-            }
-
-            &.disabled>a:first-child,
-            &.is-disabled>a:first-child {
-                color: $Tabs-onDisabled-color;
-                background-color: transparent;
-                border-color: transparent;
-                pointer-events: none;
-            }
-
-            &.active>a:first-child,
-            &.is-active>a:first-child {
-                color: $Tabs-onActive-color;
-                background-color: $Tabs-onActive-bg;
-                border-color: $Tabs-onActive-borderColor;
-                border-bottom-color: transparent;
-            }
-        }
+    &::before {
+      display: table;
+      content: ' ';
    }

-    &-content {
-        background-color: $Tabs-content-bg;
-        padding: $gap-base;
-        border-style: solid;
-        border-width: 0 $Tabs-borderWidth $Tabs-borderWidth;
-        border-color: $Tabs-borderColor;
-    }
+    > .#{$ns}Tabs-link {
+      margin-bottom: -$Tabs-borderWidth;
+      display: inline-block;
+      position: relative;

-    &-pane {
+      > a:first-child {
+        font-size: $Tabs-linkFontSize;
+        outline: none;
+        border: $Tabs-borderWidth solid transparent;
+        border-top-left-radius: $Tabs-borderRadius;
+        border-top-right-radius: $Tabs-borderRadius;
+        color: $Tabs-color;
+        margin: $Tabs-linkMargin;
+        padding: $Tabs-linkPadding;
+        text-decoration: none;
+        cursor: pointer;
+        display: block;
+      }
+
+      > .#{$ns}Combo-toolbarBtn {
+        position: absolute;
+        right: -10px;
+        top: -10px;
+        z-index: 10;
        display: none;
-        opacity: 0;
-        transition: opacity 0.35s linear;
+      }
+
+      &:hover > .#{$ns}Combo-toolbarBtn {
+        display: block;
+      }
+
+      &:hover > a:first-child,
+      > a:first-child:focus {
+        border-color: $Tabs-onHover-borderColor;
+        text-decoration: none;
+      }
+
+      &.disabled > a:first-child,
+      &.is-disabled > a:first-child {
+        color: $Tabs-onDisabled-color;
+        background-color: transparent;
+        border-color: transparent;
+        pointer-events: none;
+      }
+
+      &.active > a:first-child,
+      &.is-active > a:first-child {
+        color: $Tabs-onActive-color;
+        background-color: $Tabs-onActive-bg;
+        border-color: $Tabs-onActive-borderColor;
+        border-bottom-color: transparent;
+      }
+    }
+  }
+
+  &-content {
+    background-color: $Tabs-content-bg;
+    padding: $gap-base;
+    border-style: solid;
+    border-width: 0 $Tabs-borderWidth $Tabs-borderWidth;
+    border-color: $Tabs-borderColor;
+  }
+
+  &-pane {
+    display: none;
+    opacity: 0;
+    transition: opacity 0.35s linear;
+
+    &.is-active {
+      display: block;
+    }
+
+    &.in {
+      opacity: 1;
+    }
+  }
+
+  &--line {
+    > .#{$ns}Tabs-links {
+      border-bottom-color: $Tabs--line-borderColor;
+
+      > li {
+        > a:first-child {
+          border-width: 0 0 $Tabs--line-borderWidth 0;
+          padding: $Tabs--line-linkPadding;
+          margin: $Tabs--line-linkMargin;
+
+          &:hover,
+          &:focus {
+            color: #666;
+            background-color: transparent;
+            border-color: transparent;
+          }
+        }
+
+        &:last-child {
+          > a {
+            margin: 0;
+          }
+        }

        &.is-active {
-            display: block;
-        }
-
-        &.in {
-            opacity: 1;
+          > a:first-child,
+          > a:first-child:hover,
+          > a:first-child:focus {
+            border-color: $Tabs--line-onHover-borderColor;
+            color: $Tabs--line-onHover-color;
+            background-color: transparent;
+          }
        }
+      }
    }

-    &--line {
-        >.#{$ns}Tabs-links {
-            border-bottom-color: $Tabs--line-borderColor;
+    > .#{$ns}Tabs-content {
+      border-width: 0;
+      padding: $Tabs--line-content-padding;
+      background-color: $Tabs--line-content-bg;
+    }
+  }

-            >li {
-                >a:first-child {
-                    border-width: 0 0 $Tabs--line-borderWidth 0;
-                    padding: $Tabs--line-linkPadding;
-                    margin: $Tabs--line-linkMargin;
+  &--card {
+    > .#{$ns}Tabs-links {
+      padding: $Tabs--card-padding;
+      background-color: $Tabs--card-bg;
+      border-top: px2rem(1px) solid $Tabs--card-borderTopColor;

-                    &:hover,
-                    &:focus {
-                        color: #666;
-                        background-color: transparent;
-                        border-color: transparent;
-                    }
-                }
-
-                &:last-child {
-                    >a {
-                        margin: 0;
-                    }
-                }
-
-                &.is-active {
-
-                    >a:first-child,
-                    >a:first-child:hover,
-                    >a:first-child:focus {
-                        border-color: $Tabs--line-onHover-borderColor;
-                        color: $Tabs--line-onHover-color;
-                        background-color: transparent;
-                    }
-                }
-            }
+      > li {
+        &.is-active {
+          > a:first-child,
+          > a:first-child:hover,
+          > a:first-child:focus {
+            border-color: $Tabs--card-onActive-borderColor;
+            color: $primary;
+            border-bottom-color: $Tabs--card-onActive-bg;
+            background-color: $Tabs--card-onActive-bg;
+          }
        }

-        >.#{$ns}Tabs-content {
-            border-width: 0;
-            padding: $Tabs--line-content-padding;
-            background-color: $Tabs--line-content-bg;
+        > a:first-child {
+          padding: $Tabs--card-linkPadding;
+          margin: $Tabs--card-linkMargin;
+
+          &:hover,
+          &:focus {
+            color: #666;
+            background-color: $Tabs--card-onActive-bg;
+            border-bottom-color: transparent;
+          }
        }
+      }
    }

-    &--card {
-        >.#{$ns}Tabs-links {
-            padding: $Tabs--card-padding;
-            background-color: $Tabs--card-bg;
-            border-top: px2rem(1px) solid $Tabs--card-borderTopColor;
+    > .#{$ns}Tabs-content {
+      border-width: 0;
+    }
+  }

-            >li {
-                &.is-active {
+  &--radio {
+    > .#{$ns}Tabs-links {
+      border: 0;
+      margin-bottom: px2rem(10px);

-                    >a:first-child,
-                    >a:first-child:hover,
-                    >a:first-child:focus {
-                        border-color: $Tabs--card-onActive-borderColor;
-                        color: $primary;
-                        border-bottom-color: $Tabs--card-onActive-bg;
-                        background-color: $Tabs--card-onActive-bg;
-                    }
-                }
+      > li {
+        margin: 0;

-                >a:first-child {
-                    padding: $Tabs--card-linkPadding;
-                    margin: $Tabs--card-linkMargin;
+        > a:first-child {
+          border-width: px2rem(1px);
+          border-color: $Tabs-borderColor;
+          font-size: $fontSizeSm;
+          text-align: center;
+          margin: 0;
+          padding: 0 px2rem(10px);
+          min-width: 68px;
+          height: px2rem(30px);
+          line-height: px2rem(30px);
+          border-radius: 0;
+          background: $Tabs--radio-bg;

-                    &:hover,
-                    &:focus {
-                        color: #666;
-                        background-color: $Tabs--card-onActive-bg;
-                        border-bottom-color: transparent;
-                    }
-                }
-            }
+          &:hover,
+          &:focus {
+            color: $primary;
+          }
        }

-        >.#{$ns}Tabs-content {
-            border-width: 0;
+        &.is-active {
+          > a:first-child,
+          > a:first-child:hover,
+          > a:first-child:focus {
+            color: $Tabs--radio-bg;
+            background-color: $primary;
+            border-color: $primary;
+            position: relative;
+            z-index: 1;
+          }
        }
+      }
+
+      > li + li {
+        margin-left: -1px;
+      }
    }

-    &--radio {
-        >.#{$ns}Tabs-links {
-            border: 0;
-            margin-bottom: px2rem(10px);
+    > .#{$ns}Tabs-content {
+      border-top: $Tabs-borderWidth solid $Tabs-borderColor;
+    }
+  }

-            >li {
-                margin: 0;
+  &--vertical {
+    display: flex;
+    min-height: px2rem(200px);
+    border: $Tabs-borderWidth solid $Tabs-borderColor;
+    border-radius: 0;

-                >a:first-child {
-                    border-width: px2rem(1px);
-                    border-color: $Tabs-borderColor;
-                    font-size: $fontSizeSm;
-                    text-align: center;
-                    margin: 0;
-                    padding: 0 px2rem(10px);
-                    min-width: 68px;
-                    height: px2rem(30px);
-                    line-height: px2rem(30px);
-                    border-radius: 0;
-                    background: $Tabs--radio-bg;
+    > .#{$ns}Tabs-links {
+      width: px2rem(140px);
+      background: #f5f5f5;
+      border: none;
+      padding-bottom: px2rem(60px);

-                    &:hover,
-                    &:focus {
-                        color: $primary;
-                    }
-                }
+      > li {
+        margin: 0 0 0 -1px;
+        display: block;

-                &.is-active {
+        > a:first-child {
+          border-color: transparent;
+          border-radius: 0;
+          border-width: 0 0 0 px2rem(4px);
+          margin: 0;

-                    >a:first-child,
-                    >a:first-child:hover,
-                    >a:first-child:focus {
-                        color: $Tabs--radio-bg;
-                        background-color: $primary;
-                        border-color: $primary;
-                        position: relative;
-                        z-index: 1;
-                    }
-                }
-            }
-
-            >li+li {
-                margin-left: -1px;
-            }
+          &:hover,
+          &:focus {
+            color: $primary;
+            border-color: transparent;
+          }
        }

-        >.#{$ns}Tabs-content {
-            border-top: $Tabs-borderWidth solid $Tabs-borderColor;
+        &.is-active {
+          > a:first-child,
+          > a:first-child:hover,
+          > a:first-child:focus {
+            color: $primary;
+            border-color: $primary;
+          }
        }
+      }
    }

-    &--vertical {
-        display: flex;
-        min-height: px2rem(200px);
-        border: $Tabs-borderWidth solid $Tabs-borderColor;
-        border-radius: 0;
-
-        >.#{$ns}Tabs-links {
-            width: px2rem(140px);
-            background: #F5F5F5;
-            border: none;
-            padding-bottom: px2rem(60px);
-
-            >li {
-                margin: 0 0 0 -1px;
-                display: block;
-
-                >a:first-child {
-                    border-color: transparent;
-                    border-radius: 0;
-                    border-width: 0 0 0 px2rem(4px);
-                    margin: 0;
-
-                    &:hover,
-                    &:focus {
-                        color: $primary;
-                        border-color: transparent;
-                    }
-                }
-
-                &.is-active {
-
-                    >a:first-child,
-                    >a:first-child:hover,
-                    >a:first-child:focus {
-                        color: $primary;
-                        border-color: $primary;
-                    }
-                }
-            }
-        }
-
-
-        >.#{$ns}Tabs-content {
-            border: none;
-            flex-grow: 1;
-        }
+    > .#{$ns}Tabs-content {
+      border: none;
+      flex-grow: 1;
    }
-}
+  }
+}
--- a/scss/components/_toast.scss
+++ b/scss/components/_toast.scss
@ -1,187 +1,188 @@
@keyframes bounceIn {
+  from,
+  20%,
+  40%,
+  60%,
+  80%,
+  to {
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+  }

-    from,
-    20%,
-    40%,
-    60%,
-    80%,
-    to {
-        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    }
+  0% {
+    opacity: 0;
+    transform: scale3d(0.3, 0.3, 0.3);
+  }

-    0% {
-        opacity: 0;
-        transform: scale3d(0.3, 0.3, 0.3);
-    }
+  20% {
+    transform: scale3d(1.1, 1.1, 1.1);
+  }

-    20% {
-        transform: scale3d(1.1, 1.1, 1.1);
-    }
+  40% {
+    transform: scale3d(0.9, 0.9, 0.9);
+  }

-    40% {
-        transform: scale3d(0.9, 0.9, 0.9);
-    }
+  60% {
+    opacity: 1;
+    transform: scale3d(1.03, 1.03, 1.03);
+  }

-    60% {
-        opacity: 1;
-        transform: scale3d(1.03, 1.03, 1.03);
-    }
+  80% {
+    transform: scale3d(0.97, 0.97, 0.97);
+  }

-    80% {
-        transform: scale3d(0.97, 0.97, 0.97);
-    }
-
-    to {
-        opacity: 1;
-        transform: scale3d(1, 1, 1);
-    }
+  to {
+    opacity: 1;
+    transform: scale3d(1, 1, 1);
+  }
 }

@keyframes bounceOut {
-    20% {
-        transform: scale3d(0.9, 0.9, 0.9);
-    }
+  20% {
+    transform: scale3d(0.9, 0.9, 0.9);
+  }

-    50%,
-    55% {
-        opacity: 1;
-        transform: scale3d(1.1, 1.1, 1.1);
-    }
+  50%,
+  55% {
+    opacity: 1;
+    transform: scale3d(1.1, 1.1, 1.1);
+  }

-    to {
-        opacity: 0;
-        transform: scale3d(0.3, 0.3, 0.3);
-    }
+  to {
+    opacity: 0;
+    transform: scale3d(0.3, 0.3, 0.3);
+  }
 }

 .#{$ns}Toast {
-    &-wrap {
-        pointer-events: none;
-        position: fixed;
-        z-index: $zindex-toast;
-    }
+  &-wrap {
+    pointer-events: none;
+    position: fixed;
+    z-index: $zindex-toast;
+  }

-    width: $Toast-width;
-    pointer-events: auto;
-    margin-bottom: $gap-xs;
-    padding: $Toast-paddingY $Toast-paddingX $Toast-paddingY ($Toast-paddingX + $Toast-paddingL);
-    box-shadow: $Toast-box-shadow;
-    border-radius: $Toast-borderRadius;
-    border: $Toast-border-width solid;
-    color: $Toast-color;
-    position: relative;
-    opacity: $Toast-opacity;
-    cursor: pointer;
-    opacity: 0;
-    transform: translateZ(0);
+  width: $Toast-width;
+  pointer-events: auto;
+  margin-bottom: $gap-xs;
+  padding: $Toast-paddingY $Toast-paddingX $Toast-paddingY
+    ($Toast-paddingX + $Toast-paddingL);
+  box-shadow: $Toast-box-shadow;
+  border-radius: $Toast-borderRadius;
+  border: $Toast-border-width solid;
+  color: $Toast-color;
+  position: relative;
+  opacity: $Toast-opacity;
+  cursor: pointer;
+  opacity: 0;
+  transform: translateZ(0);

-    &.in,
-    &.out {
-        animation-fill-mode: both;
-        animation-duration: 0.75s;
-        opacity: 1;
-    }
+  &.in,
+  &.out {
+    animation-fill-mode: both;
+    animation-duration: 0.75s;
+    opacity: 1;
+  }

-    &.in {
-        animation-name: bounceIn;
-    }
+  &.in {
+    animation-name: bounceIn;
+  }

-    &.out {
-        animation-name: bounceOut;
-    }
+  &.out {
+    animation-name: bounceOut;
+  }

-    &-title {
-        display: $Toast-display;
-        font-size: $fontSizeMd;
-    }
+  &-title {
+    display: $Toast-display;
+    font-size: $fontSizeMd;
+  }

-    &-body {
-        display: $Toast-display;
-    }
+  &-body {
+    display: $Toast-display;
+  }
+
+  &::before {
+    display: inline-block;
+    font-family: $Toast-iconVendor;
+    font-size: $Toast-icon-fontSize;
+    text-rendering: auto;
+    -webkit-font-smoothing: antialiased;
+    position: absolute;
+    left: $Toast-paddingX;
+    top: $Toast-paddingY;
+  }
+
+  // colors
+  &--error {
+    color: $Toast--danger-color;
+    border-color: $Toast--danger-borderColor;
+    background-color: $Toast--danger-bgColor;

    &::before {
-        display: inline-block;
-        font-family: $Toast-iconVendor;
-        font-size: $Toast-icon-fontSize;
-        text-rendering: auto;
-        -webkit-font-smoothing: antialiased;
-        position: absolute;
-        left: $Toast-paddingX;
-        top: $Toast-paddingY;
+      content: $Toast--error-icon;
    }
+  }

-    // colors
-    &--error {
-        color: $Toast--danger-color;
-        border-color: $Toast--danger-borderColor;
-        background-color: $Toast--danger-bgColor;
+  &--warning {
+    color: $Toast--warning-color;
+    border-color: $Toast--warning-borderColor;
+    background-color: $Toast--warning-bgColor;

-        &::before {
-            content: $Toast--error-icon;
-        }
+    &::before {
+      content: $Toast--warning-icon;
    }
+  }

-    &--warning {
-        color: $Toast--warning-color;
-        border-color: $Toast--warning-borderColor;
-        background-color: $Toast--warning-bgColor;
+  &--info {
+    color: $Toast--info-color;
+    border-color: $Toast--info-borderColor;
+    background-color: $Toast--info-bgColor;
+    padding: $Toast-paddingY $Toast-paddingX $Toast-paddingY
+      ($Toast-paddingX + $Toast--info-paddingL);

-        &::before {
-            content: $Toast--warning-icon;
-        }
+    &::before {
+      content: $Toast--info-icon;
    }
+  }

-    &--info {
-        color: $Toast--info-color;
-        border-color: $Toast--info-borderColor;
-        background-color: $Toast--info-bgColor;
-        padding: $Toast-paddingY $Toast-paddingX $Toast-paddingY ($Toast-paddingX + $Toast--info-paddingL);
+  &--success {
+    color: $Toast--success-color;
+    border-color: $Toast--success-borderColor;
+    background-color: $Toast--success-bgColor;

-        &::before {
-            content: $Toast--info-icon;
-        }
+    &::before {
+      content: $Toast--success-icon;
    }
+  }

-    &--success {
-        color: $Toast--success-color;
-        border-color: $Toast--success-borderColor;
-        background-color: $Toast--success-bgColor;
+  // positions
+  &-wrap--topRight {
+    top: $gap-base;
+    right: $gap-base;
+  }

-        &::before {
-            content: $Toast--success-icon;
-        }
-    }
+  &-wrap--topCenter {
+    top: $gap-base;
+    left: 50%;
+    margin-left: -$Toast-width/2;
+  }

-    // positions
-    &-wrap--topRight {
-        top: $gap-base;
-        right: $gap-base;
-    }
+  &-wrap--topLeft {
+    top: $gap-base;
+    left: $gap-base;
+  }

-    &-wrap--topCenter {
-        top: $gap-base;
-        left: 50%;
-        margin-left: -$Toast-width/2;
-    }
+  &-wrap--bottomLeft {
+    left: $gap-base;
+    bottom: $gap-base;
+  }

-    &-wrap--topLeft {
-        top: $gap-base;
-        left: $gap-base;
-    }
+  &-wrap--bottomCenter {
+    left: 50%;
+    margin-left: -$Toast-width/2;
+    bottom: $gap-base;
+  }

-    &-wrap--bottomLeft {
-        left: $gap-base;
-        bottom: $gap-base;
-    }
-
-    &-wrap--bottomCenter {
-        left: 50%;
-        margin-left: -$Toast-width/2;
-        bottom: $gap-base;
-    }
-
-    &-wrap--bottomRight {
-        bottom: $gap-base;
-        right: $gap-base;
-    }
-}
+  &-wrap--bottomRight {
+    bottom: $gap-base;
+    right: $gap-base;
+  }
+}
--- a/scss/components/_tooltip.scss
+++ b/scss/components/_tooltip.scss
@ -1,249 +1,251 @@
 .#{$ns}Tooltip {
+  position: absolute;
+  top: 0;
+  left: 0;
+  font-family: inherit;
+  border-radius: $borderRadius;
+  min-width: $Tooltip-minWidth;
+  max-width: $Tooltip-maxWidth;
+  text-align: left;
+  white-space: normal;
+  z-index: $zindex-tooltip;
+  word-wrap: break-word;
+  background: $Tooltip-bg;
+  border: $Tooltip-borderWidth solid $Tooltip-borderColor;
+  box-shadow: $Tooltip-boxShadow;
+
+  &-arrow {
    position: absolute;
-    top: 0;
-    left: 0;
-    font-family: inherit;
-    border-radius: $borderRadius;
-    min-width: $Tooltip-minWidth;
-    max-width: $Tooltip-maxWidth;
-    text-align: left;
-    white-space: normal;
-    z-index: $zindex-tooltip;
-    word-wrap: break-word;
-    background: $Tooltip-bg;
-    border: $Tooltip-borderWidth solid $Tooltip-borderColor;
-    box-shadow: $Tooltip-boxShadow;
+    display: block;
+    width: $Tooltip-arrow-width;
+    height: $Tooltip-arrow-height;
+    margin-left: -$Tooltip-arrow-width/2;
+    left: 50%;

-    &-arrow {
-        position: absolute;
-        display: block;
-        width: $Tooltip-arrow-width;
-        height: $Tooltip-arrow-height;
-        margin-left: -$Tooltip-arrow-width/2;
-        left: 50%;
+    &::before,
+    &::after {
+      position: absolute;
+      display: block;
+      content: '';
+      border-color: transparent;
+      border-style: solid;
+    }
+  }

-        &::before,
-        &::after {
-            position: absolute;
-            display: block;
-            content: '';
-            border-color: transparent;
-            border-style: solid;
-        }
+  &--top {
+    margin-top: -$Tooltip-arrow-height - px2rem(2px);
+
+    .#{$ns}Tooltip-arrow {
+      bottom: ($Tooltip-arrow-height + $Tooltip-borderWidth) * -1;
    }

-    &--top {
-        margin-top: -$Tooltip-arrow-height - px2rem(2px);
-
-        .#{$ns}Tooltip-arrow {
-            bottom: ($Tooltip-arrow-height + $Tooltip-borderWidth) * -1;
-        }
-
-        .#{$ns}Tooltip-arrow::before,
-        .#{$ns}Tooltip-arrow::after {
-            border-width: $Tooltip-arrow-height ($Tooltip-arrow-width / 2) 0;
-        }
-
-        .#{$ns}Tooltip-arrow::before {
-            bottom: 0;
-            border-top-color: $Tooltip-arrow-outerColor;
-        }
-
-        .#{$ns}Tooltip-arrow::after {
-            bottom: $Tooltip-borderWidth;
-            border-top-color: $Tooltip-arrow-color;
-        }
+    .#{$ns}Tooltip-arrow::before,
+    .#{$ns}Tooltip-arrow::after {
+      border-width: $Tooltip-arrow-height ($Tooltip-arrow-width / 2) 0;
    }

-    &--right {
-        margin-left: $Tooltip-arrow-height + px2rem(2px);
-
-        .#{$ns}Tooltip-arrow {
-            left: ($Tooltip-borderWidth) * -1;
-            width: $Tooltip-arrow-height;
-            height: $Tooltip-arrow-width;
-            margin-top: -$Tooltip-arrow-width/2;
-            top: 50%;
-        }
-
-        .#{$ns}Tooltip-arrow::before,
-        .#{$ns}Tooltip-arrow::after {
-            border-width: ($Tooltip-arrow-width / 2) $Tooltip-arrow-height ($Tooltip-arrow-width / 2) 0;
-        }
-
-        .#{$ns}Tooltip-arrow::before {
-            left: 0;
-            border-right-color: $Tooltip-arrow-outerColor;
-        }
-
-        .#{$ns}Tooltip-arrow::after {
-            left: $Tooltip-borderWidth;
-            border-right-color: $Tooltip-arrow-color;
-        }
+    .#{$ns}Tooltip-arrow::before {
+      bottom: 0;
+      border-top-color: $Tooltip-arrow-outerColor;
    }

-    &--bottom {
-        margin-top: $Tooltip-arrow-height + px2rem(2px);
+    .#{$ns}Tooltip-arrow::after {
+      bottom: $Tooltip-borderWidth;
+      border-top-color: $Tooltip-arrow-color;
+    }
+  }

-        .#{$ns}Tooltip-arrow {
-            top: ($Tooltip-arrow-height + $Tooltip-borderWidth) * -1;
-        }
+  &--right {
+    margin-left: $Tooltip-arrow-height + px2rem(2px);

-        .#{$ns}Tooltip-arrow::before,
-        .#{$ns}Tooltip-arrow::after {
-            border-width: 0 ($Tooltip-arrow-width / 2) $Tooltip-arrow-height ($Tooltip-arrow-width / 2);
-        }
-
-        .#{$ns}Tooltip-arrow::before {
-            top: 0;
-            border-bottom-color: $Tooltip-arrow-outerColor;
-        }
-
-        .#{$ns}Tooltip-arrow::after {
-            top: $Tooltip-borderWidth;
-            border-bottom-color: $Tooltip-arrow-color;
-        }
-
-        // This will remove the popover-header's border just below the arrow
-        .#{$ns}Tooltip-title::before {
-            position: absolute;
-            top: 0;
-            left: 50%;
-            display: block;
-            width: $Tooltip-arrow-width;
-            margin-left: ($Tooltip-arrow-width / -2);
-            content: '';
-            border-bottom: $Tooltip-borderWidth solid $Tooltip-title-bg;
-        }
+    .#{$ns}Tooltip-arrow {
+      left: ($Tooltip-borderWidth) * -1;
+      width: $Tooltip-arrow-height;
+      height: $Tooltip-arrow-width;
+      margin-top: -$Tooltip-arrow-width/2;
+      top: 50%;
    }

-    &--left {
-        margin-left: -$Tooltip-arrow-height - px2rem(2px);
-
-        .#{$ns}Tooltip-arrow {
-            left: auto;
-            right: ($Tooltip-arrow-height + $Tooltip-borderWidth) * -1;
-            width: $Tooltip-arrow-height;
-            height: $Tooltip-arrow-width;
-            margin-top: -$Tooltip-arrow-width/2;
-            top: 50%;
-        }
-
-        .#{$ns}Tooltip-arrow::before,
-        .#{$ns}Tooltip-arrow::after {
-            border-width: ($Tooltip-arrow-width / 2) 0 ($Tooltip-arrow-width / 2) $Tooltip-arrow-height;
-        }
-
-        .#{$ns}Tooltip-arrow::before {
-            right: 0;
-            border-left-color: $Tooltip-arrow-outerColor;
-        }
-
-        .#{$ns}Tooltip-arrow::after {
-            right: $Tooltip-borderWidth;
-            border-left-color: $Tooltip-arrow-color;
-        }
+    .#{$ns}Tooltip-arrow::before,
+    .#{$ns}Tooltip-arrow::after {
+      border-width: ($Tooltip-arrow-width / 2) $Tooltip-arrow-height
+        ($Tooltip-arrow-width / 2) 0;
    }

-    &-title {
-        padding: $Tooltip-title-paddingY $Tooltip-title-paddingX;
-        margin-bottom: 0; // Reset the default from Reboot
-        font-size: $fontSizeBase;
-        color: $Tooltip-title-color;
-        background-color: $Tooltip-title-bg;
-        border-bottom: $Tooltip-borderWidth solid darken($Tooltip-title-bg, 5%);
-        border-top-left-radius: $Tooltip-borderRadius - $Tooltip-borderWidth;
-        border-top-right-radius: $Tooltip-borderRadius - $Tooltip-borderWidth;
-
-        &:empty {
-            display: none;
-        }
+    .#{$ns}Tooltip-arrow::before {
+      left: 0;
+      border-right-color: $Tooltip-arrow-outerColor;
    }

-    &-body {
-        color: $Tooltip-body-color;
-        padding: $Tooltip-body-paddingY $Tooltip-body-paddingX;
+    .#{$ns}Tooltip-arrow::after {
+      left: $Tooltip-borderWidth;
+      border-right-color: $Tooltip-arrow-color;
    }
+  }
+
+  &--bottom {
+    margin-top: $Tooltip-arrow-height + px2rem(2px);
+
+    .#{$ns}Tooltip-arrow {
+      top: ($Tooltip-arrow-height + $Tooltip-borderWidth) * -1;
+    }
+
+    .#{$ns}Tooltip-arrow::before,
+    .#{$ns}Tooltip-arrow::after {
+      border-width: 0 ($Tooltip-arrow-width / 2) $Tooltip-arrow-height
+        ($Tooltip-arrow-width / 2);
+    }
+
+    .#{$ns}Tooltip-arrow::before {
+      top: 0;
+      border-bottom-color: $Tooltip-arrow-outerColor;
+    }
+
+    .#{$ns}Tooltip-arrow::after {
+      top: $Tooltip-borderWidth;
+      border-bottom-color: $Tooltip-arrow-color;
+    }
+
+    // This will remove the popover-header's border just below the arrow
+    .#{$ns}Tooltip-title::before {
+      position: absolute;
+      top: 0;
+      left: 50%;
+      display: block;
+      width: $Tooltip-arrow-width;
+      margin-left: ($Tooltip-arrow-width / -2);
+      content: '';
+      border-bottom: $Tooltip-borderWidth solid $Tooltip-title-bg;
+    }
+  }
+
+  &--left {
+    margin-left: -$Tooltip-arrow-height - px2rem(2px);
+
+    .#{$ns}Tooltip-arrow {
+      left: auto;
+      right: ($Tooltip-arrow-height + $Tooltip-borderWidth) * -1;
+      width: $Tooltip-arrow-height;
+      height: $Tooltip-arrow-width;
+      margin-top: -$Tooltip-arrow-width/2;
+      top: 50%;
+    }
+
+    .#{$ns}Tooltip-arrow::before,
+    .#{$ns}Tooltip-arrow::after {
+      border-width: ($Tooltip-arrow-width / 2) 0 ($Tooltip-arrow-width / 2)
+        $Tooltip-arrow-height;
+    }
+
+    .#{$ns}Tooltip-arrow::before {
+      right: 0;
+      border-left-color: $Tooltip-arrow-outerColor;
+    }
+
+    .#{$ns}Tooltip-arrow::after {
+      right: $Tooltip-borderWidth;
+      border-left-color: $Tooltip-arrow-color;
+    }
+  }
+
+  &-title {
+    padding: $Tooltip-title-paddingY $Tooltip-title-paddingX;
+    margin-bottom: 0; // Reset the default from Reboot
+    font-size: $fontSizeBase;
+    color: $Tooltip-title-color;
+    background-color: $Tooltip-title-bg;
+    border-bottom: $Tooltip-borderWidth solid darken($Tooltip-title-bg, 5%);
+    border-top-left-radius: $Tooltip-borderRadius - $Tooltip-borderWidth;
+    border-top-right-radius: $Tooltip-borderRadius - $Tooltip-borderWidth;
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  &-body {
+    color: $Tooltip-body-color;
+    padding: $Tooltip-body-paddingY $Tooltip-body-paddingX;
+  }
 }

-
@keyframes tooltipIn {
-    from {
-        opacity: 0;
-        margin: 0;
-    }
+  from {
+    opacity: 0;
+    margin: 0;
+  }
 }

 [data-tooltip] {
-    position: relative;
+  position: relative;

-    &:after {
-        pointer-events: none;
-        left: 0;
-        top: 50%;
-        transform: translateY(-50%);
-        position: absolute;
-        content: attr(data-tooltip);
-        font-size: $Tooltip--attr-fontSize;
-        line-height: $Tooltip--attr-lineHeigt;
-        text-align: left;
-        white-space: nowrap;
-        background: $Tooltip--attr-bg;
-        border: $Tooltip--attr-borderWidth solid $Tooltip--attr-borderColor;
-        border-radius: $Tooltip--attr-borderRadius;
-        box-shadow: $Tooltip--attr-boxShadow;
-        left: 100%;
-        color: $Tooltip--attr-color;
-        padding: $Tooltip--attr-paddingY $Tooltip--attr-paddingX;
-        display: none;
-        animation-duration: 0.2s;
-        animation-fill-mode: both;
-    }
+  &:after {
+    pointer-events: none;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    position: absolute;
+    content: attr(data-tooltip);
+    font-size: $Tooltip--attr-fontSize;
+    line-height: $Tooltip--attr-lineHeigt;
+    text-align: left;
+    white-space: nowrap;
+    background: $Tooltip--attr-bg;
+    border: $Tooltip--attr-borderWidth solid $Tooltip--attr-borderColor;
+    border-radius: $Tooltip--attr-borderRadius;
+    box-shadow: $Tooltip--attr-boxShadow;
+    left: 100%;
+    color: $Tooltip--attr-color;
+    padding: $Tooltip--attr-paddingY $Tooltip--attr-paddingX;
+    display: none;
+    animation-duration: 0.2s;
+    animation-fill-mode: both;
+  }

-    &:not(.is-disabled):hover:after {
-        display: inline-block;
-        animation-name: tooltipIn;
+  &:not(.is-disabled):hover:after {
+    display: inline-block;
+    animation-name: tooltipIn;

-        opacity: 1;
-        z-index: $zindex-tooltip;
-        margin: 0 0 0 $Tooltip--attr-gap;
-        opacity: 1;
-    }
+    opacity: 1;
+    z-index: $zindex-tooltip;
+    margin: 0 0 0 $Tooltip--attr-gap;
+    opacity: 1;
+  }

-    &[data-position='bottom']:after {
-        left: 50%;
-        top: 100%;
-        transform: translateX(-50%);
-    }
+  &[data-position='bottom']:after {
+    left: 50%;
+    top: 100%;
+    transform: translateX(-50%);
+  }

-    &[data-position='bottom']:hover:after {
-        margin: $Tooltip--attr-gap 0 0 0;
-    }
+  &[data-position='bottom']:hover:after {
+    margin: $Tooltip--attr-gap 0 0 0;
+  }

-    &[data-position='left']:after {
-        top: 50%;
-        right: 100%;
-        left: auto;
-        transform: translateY(-50%);
-    }
+  &[data-position='left']:after {
+    top: 50%;
+    right: 100%;
+    left: auto;
+    transform: translateY(-50%);
+  }

-    &[data-position='left']:hover:after {
-        margin: 0 0 0 $Tooltip--attr-gap;
-    }
+  &[data-position='left']:hover:after {
+    margin: 0 0 0 $Tooltip--attr-gap;
+  }

-    &[data-position='top']:after {
-        left: 50%;
-        top: auto;
-        bottom: 100%;
-        transform: translateX(-50%);
-    }
+  &[data-position='top']:after {
+    left: 50%;
+    top: auto;
+    bottom: 100%;
+    transform: translateX(-50%);
+  }

-    &[data-position='top']:hover:after {
-        margin: -$Tooltip--attr-gap 0 0 0;
-    }
+  &[data-position='top']:hover:after {
+    margin: -$Tooltip--attr-gap 0 0 0;
+  }

-    &:hover:active:after {
-        content: '';
-        display: none !important;
-    }
-}
+  &:hover:active:after {
+    content: '';
+    display: none !important;
+  }
+}
--- a/scss/components/_video.scss
+++ b/scss/components/_video.scss
@ -1,19 +1,19 @@
 .#{$ns}Video {
-    min-width: 200px;
+  min-width: 200px;

-    &-cursor {
-        position: absolute;
-        border: 2px solid $info;
-        transition: all 0.5s ease-out;
-    }
+  &-cursor {
+    position: absolute;
+    border: 2px solid $info;
+    transition: all 0.5s ease-out;
+  }

-    &-frameList {
-        .#{$ns}Video-frameItem {
-            cursor: pointer;
-        }
+  &-frameList {
+    .#{$ns}Video-frameItem {
+      cursor: pointer;
    }
+  }

-    .video-react-paused .video-react-big-play-button.big-play-button-hide {
-        display: block;
-    }
+  .video-react-paused .video-react-big-play-button.big-play-button-hide {
+    display: block;
+  }
 }
--- a/scss/components/_wizard.scss
+++ b/scss/components/_wizard.scss
@ -1,264 +1,264 @@
 .#{$ns}Wizard {
+  @include clearfix();
+
+  position: relative;
+
+  &,
+  &-tabs {
+    padding: 0;
+
+    .Badge {
+      display: inline-block;
+      width: $Wizard-badge-size;
+      height: $Wizard-badge-size;
+      font-size: $Wizard-badge-fontSize;
+      line-height: $Wizard-badge-size;
+      color: $Wizard-badge-color;
+      text-align: center;
+      white-space: nowrap;
+      vertical-align: middle;
+      background-color: $Wizard-badge-bg;
+      border-radius: $Wizard-badge-borderRadius; // font-weight: 700;
+      text-shadow: 0 px2rem(1px) 0 rgba(0, 0, 0, 0.2);
+      margin-right: $Wizard-badge-marginRight;
+      border: $Wizard-badge-border;
+      box-sizing: content-box;
+
+      // &--primary {
+      //     background-color: $primary;
+      // }
+
+      // &--secondary {
+      //     background-color: $secondary;
+      // }
+
+      // &--success {
+      //     background-color: $success;
+      // }
+
+      // &--info {
+      //     background-color: $info;
+      // }
+
+      // &--warning {
+      //     background-color: $warning;
+      // }
+
+      // &--danger {
+      //     background-color: $danger;
+      // }
+
+      // &--light {
+      //     background-color: $light;
+      // }
+
+      // &--dark {
+      //     background-color: $dark;
+      // }
+      &.is-active {
+        color: $white;
+        background-color: $Wizard-badge-onActive-backgroundColor;
+      }
+    }
+
+    ul li.active {
+      color: $info;
+    }
+
+    .#{$ns}Panel-footer > .#{$ns}Form-group,
+    .#{$ns}Panel-footer > .btn {
+      margin-left: px2rem(5px);
+    }
+
+    > ul.nav {
+      padding: 0;
+      margin: 0;
+      border: $borderWidth solid $borderColor;
+
+      li {
+        position: relative;
+        float: left;
+        padding: 0 px2rem(15px) 0 px2rem(25px);
+        margin: 0;
+        color: #999999;
+        cursor: pointer;
+        height: $Wizard-steps-height;
+        line-height: $Wizard-steps-height;
+
+        a {
+          border: 0 none !important;
+          background: transparent !important;
+          color: inherit;
+          display: inline;
+          padding: 0;
+
+          div {
+            display: inline;
+          }
+        }
+
+        &:first-child {
+          padding-left: px2rem(15px);
+          border-radius: px2rem(4px) 0 0 0;
+        }
+
+        &:before,
+        &:after {
+          content: '';
+          position: absolute;
+          right: px2rem(-10px);
+          border: px2rem(20px) solid transparent;
+          border-right: 0;
+          border-left: px2rem(10px) solid $borderColor;
+          border-left-color: rgba(0, 0, 0, 0.05);
+          z-index: 1;
+          bottom: 0;
+        }
+
+        &:after {
+          right: px2rem(-9px);
+          border-left-color: $Wizard-steps-bg;
+          z-index: 2;
+        }
+
+        &.is-active {
+          color: $Wizard-steps-li-onActive-color;
+          background: #fff;
+        }
+
+        &.is-active:after {
+          border-left-color: #fff;
+        }
+      }
+
+      // .Badge {
+      //     margin-right: px2rem(4px);
+      // }
+    }
+  }
+
+  &-steps {
+    font-size: $fontSizeBase;
+    padding: $Wizard-steps-padding;
+    background-color: $Wizard-steps-bg;
+    border-bottom: $Wizard-steps-borderWidth solid $borderColor;
+    text-align: $Wizard-steps-textAlign;
    @include clearfix();

-    position: relative;
+    ul {
+      display: $Wizard-steps-ulDisplay;
+      padding: 0;
+      margin: 0;
+      list-style: none outside none;

-    &,
-    &-tabs {
-        padding: 0;
-
-        .Badge {
-            display: inline-block;
-            width: $Wizard-badge-size;
-            height: $Wizard-badge-size;
-            font-size: $Wizard-badge-fontSize;
-            line-height: $Wizard-badge-size;
-            color: $Wizard-badge-color;
-            text-align: center;
-            white-space: nowrap;
-            vertical-align: middle;
-            background-color: $Wizard-badge-bg;
-            border-radius: $Wizard-badge-borderRadius; // font-weight: 700;
-            text-shadow: 0 px2rem(1px) 0 rgba(0, 0, 0, 0.2);
-            margin-right: $Wizard-badge-marginRight;
-            border: $Wizard-badge-border;
-            box-sizing: content-box;
-
-            // &--primary {
-            //     background-color: $primary;
-            // }
-
-            // &--secondary {
-            //     background-color: $secondary;
-            // }
-
-            // &--success {
-            //     background-color: $success;
-            // }
-
-            // &--info {
-            //     background-color: $info;
-            // }
-
-            // &--warning {
-            //     background-color: $warning;
-            // }
-
-            // &--danger {
-            //     background-color: $danger;
-            // }
-
-            // &--light {
-            //     background-color: $light;
-            // }
-
-            // &--dark {
-            //     background-color: $dark;
-            // }
-            &.is-active {
-                color: $white;
-                background-color: $Wizard-badge-onActive-backgroundColor;
-            }
-        }
-
-        ul li.active {
-            color: $info;
-        }
-
-        .#{$ns}Panel-footer > .#{$ns}Form-group,
-        .#{$ns}Panel-footer > .btn {
-            margin-left: px2rem(5px);
-        }
-
-        > ul.nav {
-            padding: 0;
-            margin: 0;
-            border: $borderWidth solid $borderColor;
-
-            li {
-                position: relative;
-                float: left;
-                padding: 0 px2rem(15px) 0 px2rem(25px);
-                margin: 0;
-                color: #999999;
-                cursor: pointer;
-                height: $Wizard-steps-height;
-                line-height: $Wizard-steps-height;
-
-                a {
-                    border: 0 none !important;
-                    background: transparent !important;
-                    color: inherit;
-                    display: inline;
-                    padding: 0;
-
-                    div {
-                        display: inline;
-                    }
-                }
-
-                &:first-child {
-                    padding-left: px2rem(15px);
-                    border-radius: px2rem(4px) 0 0 0;
-                }
-
-                &:before,
-                &:after {
-                    content: '';
-                    position: absolute;
-                    right: px2rem(-10px);
-                    border: px2rem(20px) solid transparent;
-                    border-right: 0;
-                    border-left: px2rem(10px) solid $borderColor;
-                    border-left-color: rgba(0, 0, 0, 0.05);
-                    z-index: 1;
-                    bottom: 0;
-                }
-
-                &:after {
-                    right: px2rem(-9px);
-                    border-left-color: $Wizard-steps-bg;
-                    z-index: 2;
-                }
-
-                &.is-active {
-                    color: $Wizard-steps-li-onActive-color;
-                    background: #fff;
-                }
-
-                &.is-active:after {
-                    border-left-color: #fff;
-                }
-            }
-
-            // .Badge {
-            //     margin-right: px2rem(4px);
-            // }
-        }
-    }
-
-    &-steps {
-        font-size: $fontSizeBase;
-        padding: $Wizard-steps-padding;
-        background-color: $Wizard-steps-bg;
-        border-bottom: $Wizard-steps-borderWidth solid $borderColor;
-        text-align: $Wizard-steps-textAlign;
-        @include clearfix();
-
-        ul {
-            display: $Wizard-steps-ulDisplay;
-            padding: 0;
-            margin: 0;
-            list-style: none outside none;
-
-            li {
-                position: relative;
-                float: left;
-                padding: 0 px2rem(15px) 0 px2rem(25px);
-                margin: 0;
-                color: #999999;
-                cursor: default;
-                height: $Wizard-steps-height;
-                line-height: $Wizard-steps-height;
-
-                &:first-child {
-                    padding-left: px2rem(15px);
-                    border-radius: px2rem(4px) 0 0 0;
-                }
-
-                &:before,
-                &:after {
-                    font-family: $Wizard-steps-liVender;
-                    content: $Wizard-steps-liAfterContent;
-                    position: absolute;
-                    bottom: 0;
-                    right: px2rem(-10px);
-                    border: $Wizard-steps-liAfterBorder;
-                    border-right: 0;
-                    border-left: px2rem(10px) solid $borderColor;
-                    border-left-color: rgba(0, 0, 0, 0.05);
-                    z-index: 2;
-                }
-
-                &:after {
-                    right: px2rem(-9px);
-                    border-left-color: $Wizard-steps-bg;
-                    z-index: 2;
-                }
-
-                &.is-active {
-                    color: $Wizard-steps-li-onActive-color;
-                    background: $Wizard-steps-li-onActive-bg;
-                }
-
-                &.is-active:after {
-                    border-left-color: $Wizard-steps-li-onActive-arrow-bg;
-                }
-
-                &.is-complete,
-                &.is-complete:hover {
-                    color: $Wizard-steps-li-onActive-color;
-                    cursor: pointer;
-                    background: $Wizard-steps-bg--isComplete;
-                }
-
-                &.is-complete:after {
-                    border-left-color: #f1f5f9;
-                }
-            }
-
-            // .Badge {
-            //     margin-right: px2rem(4px);
-            // }
-        }
-    }
-
-    &-stepContent {
-        padding: $Wizard-stepsContent-padding;
-
-        & .Step-pane {
-            display: none;
-
-            &.is-active {
-                display: inherit;
-            }
-        }
-    }
-
-    &--vertical {
+      li {
+        position: relative;
        float: left;
-        border-bottom: none;
-        margin-bottom: px2rem(30px); // padding: 0;
+        padding: 0 px2rem(15px) 0 px2rem(25px);
+        margin: 0;
+        color: #999999;
+        cursor: default;
+        height: $Wizard-steps-height;
+        line-height: $Wizard-steps-height;

-        &.#{$ns}Wizard-steps {
-            height: auto;
+        &:first-child {
+          padding-left: px2rem(15px);
+          border-radius: px2rem(4px) 0 0 0;
        }

-        & + .#{$ns}Wizard-stepContent {
-            zoom: 1;
-            overflow: hidden;
-            padding-left: px2rem(40px);
+        &:before,
+        &:after {
+          font-family: $Wizard-steps-liVender;
+          content: $Wizard-steps-liAfterContent;
+          position: absolute;
+          bottom: 0;
+          right: px2rem(-10px);
+          border: $Wizard-steps-liAfterBorder;
+          border-right: 0;
+          border-left: px2rem(10px) solid $borderColor;
+          border-left-color: rgba(0, 0, 0, 0.05);
+          z-index: 2;
        }

-        & li {
-            background-color: $Wizard-steps-bg;
+        &:after {
+          right: px2rem(-9px);
+          border-left-color: $Wizard-steps-bg;
+          z-index: 2;
        }

-        & ul li {
-            height: px2rem(40px);
-            line-height: px2rem(40px);
-            position: relative;
-            float: none;
-            border-bottom: $borderWidth solid $borderColor;
-            padding-left: px2rem(15px); // &:before,
-            // &:after {
-            // border: px2rem(20px) solid transparent;
-            // content: '';
-            // }
+        &.is-active {
+          color: $Wizard-steps-li-onActive-color;
+          background: $Wizard-steps-li-onActive-bg;
        }

-        & + .#{$ns}Wizard-stepContent + .#{$ns}Panel-footer {
-            clear: both;
+        &.is-active:after {
+          border-left-color: $Wizard-steps-li-onActive-arrow-bg;
        }
+
+        &.is-complete,
+        &.is-complete:hover {
+          color: $Wizard-steps-li-onActive-color;
+          cursor: pointer;
+          background: $Wizard-steps-bg--isComplete;
+        }
+
+        &.is-complete:after {
+          border-left-color: #f1f5f9;
+        }
+      }
+
+      // .Badge {
+      //     margin-right: px2rem(4px);
+      // }
    }
+  }
+
+  &-stepContent {
+    padding: $Wizard-stepsContent-padding;
+
+    & .Step-pane {
+      display: none;
+
+      &.is-active {
+        display: inherit;
+      }
+    }
+  }
+
+  &--vertical {
+    float: left;
+    border-bottom: none;
+    margin-bottom: px2rem(30px); // padding: 0;
+
+    &.#{$ns}Wizard-steps {
+      height: auto;
+    }
+
+    & + .#{$ns}Wizard-stepContent {
+      zoom: 1;
+      overflow: hidden;
+      padding-left: px2rem(40px);
+    }
+
+    & li {
+      background-color: $Wizard-steps-bg;
+    }
+
+    & ul li {
+      height: px2rem(40px);
+      line-height: px2rem(40px);
+      position: relative;
+      float: none;
+      border-bottom: $borderWidth solid $borderColor;
+      padding-left: px2rem(15px); // &:before,
+      // &:after {
+      // border: px2rem(20px) solid transparent;
+      // content: '';
+      // }
+    }
+
+    & + .#{$ns}Wizard-stepContent + .#{$ns}Panel-footer {
+      clear: both;
+    }
+  }
 }
--- a/scss/components/_wrapper.scss
+++ b/scss/components/_wrapper.scss
@ -1,27 +1,27 @@
 .#{$ns}Wrapper {
-    padding: px2rem(15px);
+  padding: px2rem(15px);

-    &--xs {
-        padding: px2rem(5px);
-    }
+  &--xs {
+    padding: px2rem(5px);
+  }

-    &--sm {
-        padding: px2rem(10px);
-    }
+  &--sm {
+    padding: px2rem(10px);
+  }

-    &--md {
-        padding: px2rem(20px);
-    }
+  &--md {
+    padding: px2rem(20px);
+  }

-    &--lg {
-        padding: px2rem(30px);
-    }
+  &--lg {
+    padding: px2rem(30px);
+  }

-    &--xl {
-        padding: px2rem(50px);
-    }
+  &--xl {
+    padding: px2rem(50px);
+  }

-    &--none {
-        padding: 0;
-    }
+  &--none {
+    padding: 0;
+  }
 }
--- a/scss/components/form/_chained-select.scss
+++ b/scss/components/form/_chained-select.scss
@ -1,5 +1,5 @@
 .#{$ns}ChainedSelectControl {
-    .#{$ns}Select {
-        margin-right: $gap-xs;
-    }
+  .#{$ns}Select {
+    margin-right: $gap-xs;
+  }
 }
--- a/scss/components/form/_checks.scss
+++ b/scss/components/form/_checks.scss
@ -1,265 +1,264 @@
 .#{$ns}Checkbox {
-    margin: 0 $gap-sm 0 0;
-    font-weight: $fontWeightNormal;
-    user-select: none;
+  margin: 0 $gap-sm 0 0;
+  font-weight: $fontWeightNormal;
+  user-select: none;
+
+  input {
+    opacity: 0;
+    position: absolute;
+  }
+
+  &:hover input:not(:disabled) + i {
+    border-color: $Checkbox-onHover-color;
+    // box-shadow: 0 0 px2rem(1px) $Checkbox-onHover-color inset;
+  }
+
+  > i {
+    cursor: pointer;
+    line-height: 1;
+    background: $Checkbox-gb;
+    display: inline-block;
+    vertical-align: middle;
+    position: relative;
+
+    + span {
+      margin-left: $Checkbox-gap;
+      cursor: pointer;
+
+      &:empty {
+        display: none;
+      }
+    }
+
+    &:before {
+      content: '';
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      width: 0px;
+      height: 0px;
+      background-color: transparent;
+      transition: all 0.2s;
+      transform-origin: 50% 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+
+  &--checkbox {
+    padding-left: $Checkbox-size;

    input {
-        opacity: 0;
-        position: absolute;
-    }
+      margin-left: -$Checkbox-size;

-    &:hover input:not(:disabled)+i {
+      &:checked + i {
        border-color: $Checkbox-onHover-color;
-        // box-shadow: 0 0 px2rem(1px) $Checkbox-onHover-color inset;
-    }
-
-    >i {
-        cursor: pointer;
-        line-height: 1;
-        background: $Checkbox-gb;
-        display: inline-block;
-        vertical-align: middle;
-        position: relative;
-
-        +span {
-            margin-left: $Checkbox-gap;
-            cursor: pointer;
-
-            &:empty {
-                display: none;
-            }
-        }

        &:before {
-            content: '';
-            position: absolute;
-            left: 50%;
-            top: 50%;
-            width: 0px;
-            height: 0px;
-            background-color: transparent;
-            transition: all 0.2s;
-            transform-origin: 50% 50%;
-            transform: translate(-50%, -50%);
+          width: $Checkbox-inner-size;
+          height: $Checkbox-inner-size;
+          background: $Checkbox-onHover-color;
        }
-    }
+      }

-    &--checkbox {
-        padding-left: $Checkbox-size;
+      &[disabled] + i {
+        border-color: lighten($Checkbox-color, 5%);
+        cursor: not-allowed;

-        input {
-            margin-left: -$Checkbox-size;
-
-            &:checked+i {
-                border-color: $Checkbox-onHover-color;
-
-                &:before {
-                    width: $Checkbox-inner-size;
-                    height: $Checkbox-inner-size;
-                    background: $Checkbox-onHover-color;
-                }
-            }
-
-            &[disabled]+i {
-                border-color: lighten($Checkbox-color, 5%);
-                cursor: not-allowed;
-
-                &:before {
-                    background-color: lighten($Checkbox-color, 5%);
-                    border-color: $white;
-                }
-            }
-
-            &[disabled]+i+span {
-                cursor: not-allowed;
-                color: $text--muted-color;
-            }
+        &:before {
+          background-color: lighten($Checkbox-color, 5%);
+          border-color: $white;
        }
+      }

-        >i {
-            width: $Checkbox-size;
-            height: $Checkbox-size;
-            border: px2rem(1px) solid $Checkbox-color;
-            border-radius: $Checkbox-borderRadius;
-            margin-left: -$Checkbox-size;
-            margin-top: px2rem(-3px);
-        }
-    }
-
-    &--full.#{$ns}Checkbox--checkbox {
-        &:not(:disabled)+i:hover {
-            border-color: $Checkbox-color;
-        }
-
-        input {
-            &:checked+i {
-                border-color: $Checkbox-onHover-color;
-                background: $Checkbox-onHover-color;
-
-                &:before {
-                    width: $Checkbox--full-inner-size;
-                    height: $Checkbox--full-inner-size / 2;
-                    border-color: $white;
-                }
-            }
-
-            // &[disabled] + i {
-            //     border-color: lighten($Checkbox-color, 5%);
-
-            //     &:before {
-            //         background-color: lighten($Checkbox-color, 5%);
-            //     }
-            // }
-
-            &:checked[disabled]+i {
-                border-color: lighten($Checkbox-color, 5%);
-                background-color: lighten($Checkbox-color, 5%);
-            }
-        }
-
-        >i {
-            position: relative;
-            cursor: pointer;
-
-            &:before {
-                content: '';
-                position: absolute;
-                left: 50%;
-                top: 50%;
-                width: 0;
-                height: 0;
-                border-color: transparent;
-                transition: width 0.2s, height 0.2s, transform 0.2s;
-                border-width: 0 0 px2rem(2px) px2rem(2px);
-                transform: translate(-50%, -60%) rotate(-40deg);
-                border-style: solid;
-            }
-        }
-    }
-
-    &--radio {
-        padding-left: $Radio-size;
-
-        input {
-            margin-left: -$Radio-size;
-
-            &:checked+i {
-                border-color: $Radio-onHover-color;
-
-                &:before {
-                    width: $Radio-inner-size;
-                    height: $Radio-inner-size;
-                    background-color: $Radio-onHover-color;
-                    border-radius: 50%;
-                }
-            }
-
-            &[disabled]+i {
-                border-color: lighten($Radio-color, 5%);
-                cursor: not-allowed;
-
-                &:before {
-                    background-color: lighten($Radio-color, 5%);
-                }
-            }
-
-            &[disabled]+i+span {
-                cursor: not-allowed;
-                color: $text--muted-color;
-            }
-        }
-
-        >i {
-            cursor: pointer;
-            width: $Radio-size;
-            height: $Radio-size;
-            border: px2rem(1px) solid $Radio-color;
-            margin-left: -$Radio-size;
-            margin-top: px2rem(-2px);
-            border-radius: 50%;
-        }
-    }
-
-    &--sm {
-        padding-left: $Checkbox--sm-size;
-
-        input {
-            margin-left: -$Checkbox--sm-size;
-
-            &:checked+i {
-                &:before {
-                    width: $Checkbox--sm-inner-size;
-                    height: $Checkbox--sm-inner-size;
-                }
-            }
-        }
-
-        >i {
-            width: $Checkbox--sm-size;
-            height: $Checkbox--sm-size;
-            margin-left: -$Checkbox--sm-size;
-
-            +span {
-                margin-left: $gap-xs;
-            }
-        }
-    }
-
-    &--sm.#{$ns}Checkbox--full {
-        input {
-            &:checked+i {
-                &:before {
-                    width: $Checkbox--sm--full-inner-size;
-                    height: $Checkbox--sm--full-inner-size / 2;
-                }
-            }
-        }
-    }
-
-    &-desc {
+      &[disabled] + i + span {
+        cursor: not-allowed;
        color: $text--muted-color;
-        margin-left: $Checkbox-gap;
-        margin-top: $gap-xs;
+      }
    }
+
+    > i {
+      width: $Checkbox-size;
+      height: $Checkbox-size;
+      border: px2rem(1px) solid $Checkbox-color;
+      border-radius: $Checkbox-borderRadius;
+      margin-left: -$Checkbox-size;
+      margin-top: px2rem(-3px);
+    }
+  }
+
+  &--full.#{$ns}Checkbox--checkbox {
+    &:not(:disabled) + i:hover {
+      border-color: $Checkbox-color;
+    }
+
+    input {
+      &:checked + i {
+        border-color: $Checkbox-onHover-color;
+        background: $Checkbox-onHover-color;
+
+        &:before {
+          width: $Checkbox--full-inner-size;
+          height: $Checkbox--full-inner-size / 2;
+          border-color: $white;
+        }
+      }
+
+      // &[disabled] + i {
+      //     border-color: lighten($Checkbox-color, 5%);
+
+      //     &:before {
+      //         background-color: lighten($Checkbox-color, 5%);
+      //     }
+      // }
+
+      &:checked[disabled] + i {
+        border-color: lighten($Checkbox-color, 5%);
+        background-color: lighten($Checkbox-color, 5%);
+      }
+    }
+
+    > i {
+      position: relative;
+      cursor: pointer;
+
+      &:before {
+        content: '';
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        width: 0;
+        height: 0;
+        border-color: transparent;
+        transition: width 0.2s, height 0.2s, transform 0.2s;
+        border-width: 0 0 px2rem(2px) px2rem(2px);
+        transform: translate(-50%, -60%) rotate(-40deg);
+        border-style: solid;
+      }
+    }
+  }
+
+  &--radio {
+    padding-left: $Radio-size;
+
+    input {
+      margin-left: -$Radio-size;
+
+      &:checked + i {
+        border-color: $Radio-onHover-color;
+
+        &:before {
+          width: $Radio-inner-size;
+          height: $Radio-inner-size;
+          background-color: $Radio-onHover-color;
+          border-radius: 50%;
+        }
+      }
+
+      &[disabled] + i {
+        border-color: lighten($Radio-color, 5%);
+        cursor: not-allowed;
+
+        &:before {
+          background-color: lighten($Radio-color, 5%);
+        }
+      }
+
+      &[disabled] + i + span {
+        cursor: not-allowed;
+        color: $text--muted-color;
+      }
+    }
+
+    > i {
+      cursor: pointer;
+      width: $Radio-size;
+      height: $Radio-size;
+      border: px2rem(1px) solid $Radio-color;
+      margin-left: -$Radio-size;
+      margin-top: px2rem(-2px);
+      border-radius: 50%;
+    }
+  }
+
+  &--sm {
+    padding-left: $Checkbox--sm-size;
+
+    input {
+      margin-left: -$Checkbox--sm-size;
+
+      &:checked + i {
+        &:before {
+          width: $Checkbox--sm-inner-size;
+          height: $Checkbox--sm-inner-size;
+        }
+      }
+    }
+
+    > i {
+      width: $Checkbox--sm-size;
+      height: $Checkbox--sm-size;
+      margin-left: -$Checkbox--sm-size;
+
+      + span {
+        margin-left: $gap-xs;
+      }
+    }
+  }
+
+  &--sm.#{$ns}Checkbox--full {
+    input {
+      &:checked + i {
+        &:before {
+          width: $Checkbox--sm--full-inner-size;
+          height: $Checkbox--sm--full-inner-size / 2;
+        }
+      }
+    }
+  }
+
+  &-desc {
+    color: $text--muted-color;
+    margin-left: $Checkbox-gap;
+    margin-top: $gap-xs;
+  }
 }

 .#{$ns}CheckboxControl,
 .#{$ns}RadiosControl,
 .#{$ns}CheckboxesControl {
-    padding-top: ($Form-input-height - $Checkbox-size) / 2;
+  padding-top: ($Form-input-height - $Checkbox-size) / 2;
 }

 .#{$ns}RadiosControl,
 .#{$ns}CheckboxesControl {
-    .#{$ns}Checkbox {
-        display: block;
-        margin-bottom: $Form-label-paddingTop;
-    }
+  .#{$ns}Checkbox {
+    display: block;
+    margin-bottom: $Form-label-paddingTop;
+  }

-    &.is-inline .#{$ns}Checkbox {
-        display: inline-block;
-        margin-right: $gap-md;
-    }
+  &.is-inline .#{$ns}Checkbox {
+    display: inline-block;
+    margin-right: $gap-md;
+  }
 }

 .#{$ns}RadiosControl-group,
 .#{$ns}CheckboxesControl-group {
+  .#{$ns}RadiosControl-group,
+  .#{$ns}CheckboxesControl-group {
+    padding-left: px2rem(80px);
+    @include clearfix();

-    .#{$ns}RadiosControl-group,
-    .#{$ns}CheckboxesControl-group {
-        padding-left: px2rem(80px);
-        @include clearfix();
-
-        >.#{$ns}RadiosControl-groupLabel,
-        >.#{$ns}CheckboxesControl-groupLabel {
-            float: left;
-            width: px2rem(80px);
-            margin-left: px2rem(-80px);
-        }
+    > .#{$ns}RadiosControl-groupLabel,
+    > .#{$ns}CheckboxesControl-groupLabel {
+      float: left;
+      width: px2rem(80px);
+      margin-left: px2rem(-80px);
    }
+  }
 }

 .#{$ns}RadiosControl-groupLabel,
 .#{$ns}CheckboxesControl-groupLabel {
-    display: block;
-}
+  display: block;
+}
--- a/scss/components/form/_city.scss
+++ b/scss/components/form/_city.scss
@ -1,31 +1,31 @@
 .#{$ns}CityPicker {
-    .#{$ns}Select + .#{$ns}Select {
-        margin-left: $gap-xs;
+  .#{$ns}Select + .#{$ns}Select {
+    margin-left: $gap-xs;
+  }
+
+  &-input {
+    outline: none;
+    vertical-align: middle;
+    margin-left: $gap-xs;
+    border: $Form-input-borderWidth solid $Form-input-borderColor;
+    border-radius: $Form-input-borderRadius;
+    // height: $Form-input-height;
+    line-height: $Form-input-lineHeight;
+    padding: $Form-input-paddingY $Form-input-paddingX;
+    font-size: $Form-input-fontSize;
+
+    &::placeholder {
+      color: $Form-input-placeholderColor;
+      user-select: none;
    }

-    &-input {
-        outline: none;
-        vertical-align: middle;
-        margin-left: $gap-xs;
-        border: $Form-input-borderWidth solid $Form-input-borderColor;
-        border-radius: $Form-input-borderRadius;
-        // height: $Form-input-height;
-        line-height: $Form-input-lineHeight;
-        padding: $Form-input-paddingY $Form-input-paddingX;
-        font-size: $Form-input-fontSize;
+    &:focus {
+      border-color: $Form-input-onFocused-borderColor;
+      box-shadow: $Form-input-boxShadow;

-        &::placeholder {
-            color: $Form-input-placeholderColor;
-            user-select: none;
-        }
-        
-        &:focus {
-            border-color: $Form-input-onFocused-borderColor;
-            box-shadow: $Form-input-boxShadow;
-
-            @if $Form-input-onFocused-bg !=$Form-input-bg {
-                background-color: $Form-input-onFocused-bg;
-            }
-        }
+      @if $Form-input-onFocused-bg !=$Form-input-bg {
+        background-color: $Form-input-onFocused-bg;
+      }
    }
-}
+  }
+}
--- a/scss/components/form/_color.scss
+++ b/scss/components/form/_color.scss
@ -1,87 +1,87 @@
 .#{$ns}ColorPicker {
-    position: relative;
-    display: inline-flex;
-    flex-wrap: nowrap;
-    white-space: nowrap;
-    border: $ColorPicker-borderWidth solid $ColorPicker-borderColor;
-    font-size: $ColorPicker-fontSize;
-    padding: $ColorPicker-paddingY $ColorPicker-paddingX;
-    background-color: $ColorPicker-bg;
-    color: $ColorPicker-color;
+  position: relative;
+  display: inline-flex;
+  flex-wrap: nowrap;
+  white-space: nowrap;
+  border: $ColorPicker-borderWidth solid $ColorPicker-borderColor;
+  font-size: $ColorPicker-fontSize;
+  padding: $ColorPicker-paddingY $ColorPicker-paddingX;
+  background-color: $ColorPicker-bg;
+  color: $ColorPicker-color;

-    &:not(.is-disabled) {
-        cursor: pointer;
+  &:not(.is-disabled) {
+    cursor: pointer;

-        &:hover {
-            background-color: $ColorPicker-onHover-bg;
-            border-color: $ColorPicker-onHover-borderColor;
-        }
+    &:hover {
+      background-color: $ColorPicker-onHover-bg;
+      border-color: $ColorPicker-onHover-borderColor;
    }
+  }

-    &-input {
-        border: 0;
-        background: transparent;
-        outline: none;
-        width: 100%;
-        flex-basis: 0;
-        flex-grow: 1;
-        padding: 0;
-        margin: 0;
-        height: $ColorPicker-fontSize * $ColorPicker-lineHeight;
+  &-input {
+    border: 0;
+    background: transparent;
+    outline: none;
+    width: 100%;
+    flex-basis: 0;
+    flex-grow: 1;
+    padding: 0;
+    margin: 0;
+    height: $ColorPicker-fontSize * $ColorPicker-lineHeight;

-        &::placeholder {
-            color: $ColorPicker-placeholderColor;
-        }
+    &::placeholder {
+      color: $ColorPicker-placeholderColor;
    }
+  }

-    &.is-focused {
-        border-color: $ColorPicker-onFocused-borderColor;
-        box-shadow: $Form-input-boxShadow;
-    }
+  &.is-focused {
+    border-color: $ColorPicker-onFocused-borderColor;
+    box-shadow: $Form-input-boxShadow;
+  }

-    &.is-disabled {
-        background: $ColorPicker-onDisabled-bg;
+  &.is-disabled {
+    background: $ColorPicker-onDisabled-bg;
+    color: $ColorPicker-onDisabled-color;
+    pointer-events: none;
+
+    > .#{$ns}ColorPicker-input {
+      color: $ColorPicker-onDisabled-color;
+
+      &::placeholder {
        color: $ColorPicker-onDisabled-color;
-        pointer-events: none;
-
-        > .#{$ns}ColorPicker-input {
-            color: $ColorPicker-onDisabled-color;
-
-            &::placeholder {
-                color: $ColorPicker-onDisabled-color;
-            }
-        }
+      }
    }
+  }

-    &-preview {
-        display: flex;
-        align-items: center;
-        margin-left: $gap-xs;
-        cursor: pointer;
-    }
+  &-preview {
+    display: flex;
+    align-items: center;
+    margin-left: $gap-xs;
+    cursor: pointer;
+  }

-    &-previewIcon {
-        display: block;
-        width: px2rem(16px);
-        height: px2rem(16px);
-        box-shadow: $boxShadowSm;
-    }
+  &-previewIcon {
+    display: block;
+    width: px2rem(16px);
+    height: px2rem(16px);
+    box-shadow: $boxShadowSm;
+  }

-    &-clear {
-        @include input-clear();
-        display: inline-block;
-        line-height: 1;
-    }
+  &-clear {
+    @include input-clear();
+    display: inline-block;
+    line-height: 1;
+  }
 }

 .#{$ns}ColorControl:not(.is-inline) > .#{$ns}ColorPicker {
-    display: flex;
+  display: flex;
 }

 // override

 .sketch-picker {
-    box-shadow: none !important;
-    border-radius: 0 !important;
-    border: none !important;
+  box-shadow: none !important;
+  border-radius: 0 !important;
+  border: none !important;
 }
--- a/scss/components/form/_combo.scss
+++ b/scss/components/form/_combo.scss
@ -1,216 +1,214 @@
 .#{$ns}Combo {
-    &-toolbarBtn {
-        line-height: $Combo-toolbarBtn-lineHeight;
-        height: $Combo-toolbarBtn-height;
-        color: $Combo-toolbarBtn-color;
-        padding: $Combo-toolbarBtn-paddingY $Combo-toolbarBtn-paddingX;
-        cursor: pointer;
+  &-toolbarBtn {
+    line-height: $Combo-toolbarBtn-lineHeight;
+    height: $Combo-toolbarBtn-height;
+    color: $Combo-toolbarBtn-color;
+    padding: $Combo-toolbarBtn-paddingY $Combo-toolbarBtn-paddingX;
+    cursor: pointer;
+
+    &:hover {
+      color: darken($Combo-toolbarBtn-color, 10%);
+    }
+  }
+
+  &-addBtn {
+    font-size: $Combo-addBtn-fontSize;
+
+    @include button-size(
+      $Combo-addBtn-paddingY,
+      $Combo-addBtn-paddingX,
+      $Combo-addBtn-fontSize,
+      $Combo-addBtn-lineHeight,
+      $Combo-addBtn-borderRadius,
+      $Combo-addBtn-height
+    );
+
+    @include button-variant(
+      $Combo-addBtn-bg,
+      $Combo-addBtn-border,
+      $Combo-addBtn-color,
+      $Combo-addBtn-onHover-bg,
+      $Combo-addBtn-onHover-border,
+      $Combo-addBtn-onHover-color,
+      $Combo-addBtn-onActive-bg,
+      $Combo-addBtn-onActive-border,
+      $Combo-addBtn-onActive-color
+    );
+
+    &.is-disabled {
+      pointer-events: none;
+      opacity: $Button-onDisabled-opacity;
+    }
+  }
+
+  &-items {
+    &:empty {
+      display: none;
+
+      + .#{$ns}Combo-toolbar {
+        padding-top: ($Form-input-height - $Combo-addBtn-height) / 2;
+      }
+    }
+
+    margin-bottom: $Combo-items-marginBottom;
+  }
+
+  &--hor {
+    .#{$ns}Combo-item {
+      display: flex;
+      flex-wrap: nowrap;
+    }
+
+    .#{$ns}Combo-item + .#{$ns}Combo-item {
+      margin-top: $Combo--horizontal-item-gap;
+    }
+
+    .#{$ns}Combo-itemInner {
+      flex-basis: 0;
+      flex-grow: 1;
+    }
+
+    .#{$ns}Combo-itemTag {
+      margin-right: $gap-sm;
+
+      label {
+        color: $info;
+        margin-right: $gap-sm;
+      }
+    }
+
+    .#{$ns}Combo-itemToolbar {
+      margin-left: $gap-xs;
+      display: flex;
+      white-space: nowrap;
+      align-items: flex-start;
+      padding-top: $Form-label-paddingTop;
+
+      > .is-disabled {
+        pointer-events: none;
+        opacity: $Button-onDisabled-opacity;
+      }
+    }
+  }
+
+  &--ver:not(&--noBorder) {
+    @include clearfix();
+    > .#{$ns}Combo-items {
+      margin: (-$Combo--vertical-item-gap * 2) (-$Combo--vertical-item-gap * 2)
+        0 (-$Combo--vertical-item-gap * 2);
+    }
+
+    .#{$ns}Combo-itemTag {
+      text-align: right;
+
+      label {
+        color: $info;
+        margin-right: $gap-sm;
+      }
+    }
+
+    // 不严格点会命中 combo 里面嵌套 combo 的情况，so sad.
+    > .#{$ns}Combo-item,
+    > .#{$ns}Combo-items > .#{$ns}Combo-item {
+      border: $Combo--vertical-item-borderWidth dashed
+        $Combo--vertical-item-borderColor;
+      padding: $Combo--vertical-item-paddingY $Combo--vertical-item-paddingX;
+      position: relative;
+    }
+
+    > .#{$ns}Combo-items > .#{$ns}Combo-item {
+      margin: $Combo--vertical-item-gap * 2;
+    }
+
+    > .#{$ns}Combo-item > .#{$ns}Combo-itemToolbar,
+    > .#{$ns}Combo-items > .#{$ns}Combo-item > .#{$ns}Combo-itemToolbar {
+      opacity: 0;
+      position: absolute;
+      right: $Combo--vertical-itemToolbar-positionRight;
+      top: $Combo--vertical-itemToolbar-positionTop / 2;
+      transition: $Combo--vertical-itemToolbar-transion;
+      height: $Combo--vertical-itemToolbar-height;
+      line-height: $Combo--vertical-itemToolbar-height;
+      background-color: $Combo--vertical-itemToolbar-bg;
+      color: $Combo--vertical-itemToolbar-color;
+      border-top-left-radius: $Combo--vertical-itemToolbar-borderRadius;
+      border-top-right-radius: $Combo--vertical-itemToolbar-borderRadius;
+      padding: 0 px2rem(3px);
+      border-style: solid;
+      border-color: $Combo--vertical-itemToolbar-borderColor;
+      border-width: $Combo--vertical-itemToolbar-borderWidth
+        $Combo--vertical-itemToolbar-borderWidth 0
+        $Combo--vertical-itemToolbar-borderWidth;
+      // margin-top: px2rem(-1px);
+
+      .#{$ns}Combo-toolbarBtn {
+        color: inherit;
+        line-height: $Combo--vertical-itemToolbar-height;
+        // font-size: px2rem(14px);

        &:hover {
-            color: darken($Combo-toolbarBtn-color, 10%);
+          color: $Combo--vertical-itemToolbar-onHover-color;
        }
+      }
+
+      // top: $Combo--vertical-itemToolbar-positionTop;
+      // opacity: 1;
    }

-    &-addBtn {
-        font-size: $Combo-addBtn-fontSize;
+    > .#{$ns}Combo-item:hover,
+    > .#{$ns}Combo-items > .#{$ns}Combo-item:hover {
+      border-color: $Combo--vertical-item-onHover-borderColor;
+      // border-style: solid;

-        @include button-size(
-            $Combo-addBtn-paddingY,
-            $Combo-addBtn-paddingX,
-            $Combo-addBtn-fontSize,
-            $Combo-addBtn-lineHeight,
-            $Combo-addBtn-borderRadius,
-            $Combo-addBtn-height
-        );
-
-        @include button-variant(
-            $Combo-addBtn-bg,
-            $Combo-addBtn-border,
-            $Combo-addBtn-color,
-            $Combo-addBtn-onHover-bg,
-            $Combo-addBtn-onHover-border,
-            $Combo-addBtn-onHover-color,
-            $Combo-addBtn-onActive-bg,
-            $Combo-addBtn-onActive-border,
-            $Combo-addBtn-onActive-color
-        );
-
-        &.is-disabled {
-            pointer-events: none;
-            opacity: $Button-onDisabled-opacity;
-        }
+      > .#{$ns}Combo-itemToolbar {
+        top: $Combo--vertical-itemToolbar-positionTop;
+        opacity: 1;
+      }
    }
+  }

-    &-items {
-        &:empty {
-            display: none;
+  &-item--dragging {
+    position: relative;

-            + .#{$ns}Combo-toolbar {
-                padding-top: ($Form-input-height - $Combo-addBtn-height) / 2;
-            }
-        }
-
-        margin-bottom: $Combo-items-marginBottom;
-    }
-
-    &--hor {
-        .#{$ns}Combo-item {
-            display: flex;
-            flex-wrap: nowrap;
-        }
-
-        .#{$ns}Combo-item + .#{$ns}Combo-item {
-            margin-top: $Combo--horizontal-item-gap;
-        }
-
-        .#{$ns}Combo-itemInner {
-            flex-basis: 0;
-            flex-grow: 1;
-        }
-
-        .#{$ns}Combo-itemTag {
-            margin-right: $gap-sm;
-
-            label {
-                color: $info;
-                margin-right: $gap-sm;
-            }
-        }
-
-        .#{$ns}Combo-itemToolbar {
-            margin-left: $gap-xs;
-            display: flex;
-            white-space: nowrap;
-            align-items: flex-start;
-            padding-top: $Form-label-paddingTop;
-
-            > .is-disabled {
-                pointer-events: none;
-                opacity: $Button-onDisabled-opacity;
-            }
-        }
-    }
-
-    &--ver:not(&--noBorder) {
-        @include clearfix();
-        > .#{$ns}Combo-items {
-            margin: (-$Combo--vertical-item-gap * 2)
-                (-$Combo--vertical-item-gap * 2) 0
-                (-$Combo--vertical-item-gap * 2);
-        }
-
-        .#{$ns}Combo-itemTag {
-            text-align: right;
-
-            label {
-                color: $info;
-                margin-right: $gap-sm;
-            }
-        }
-
-        // 不严格点会命中 combo 里面嵌套 combo 的情况，so sad.
-        > .#{$ns}Combo-item,
-        > .#{$ns}Combo-items > .#{$ns}Combo-item {
-            border: $Combo--vertical-item-borderWidth dashed
-                $Combo--vertical-item-borderColor;
-            padding: $Combo--vertical-item-paddingY
-                $Combo--vertical-item-paddingX;
-            position: relative;
-        }
-
-        > .#{$ns}Combo-items > .#{$ns}Combo-item {
-            margin: $Combo--vertical-item-gap * 2;
-        }
-
-        > .#{$ns}Combo-item > .#{$ns}Combo-itemToolbar,
-        > .#{$ns}Combo-items > .#{$ns}Combo-item > .#{$ns}Combo-itemToolbar {
-            opacity: 0;
-            position: absolute;
-            right: $Combo--vertical-itemToolbar-positionRight;
-            top: $Combo--vertical-itemToolbar-positionTop / 2;
-            transition: $Combo--vertical-itemToolbar-transion;
-            height: $Combo--vertical-itemToolbar-height;
-            line-height: $Combo--vertical-itemToolbar-height;
-            background-color: $Combo--vertical-itemToolbar-bg;
-            color: $Combo--vertical-itemToolbar-color;
-            border-top-left-radius: $Combo--vertical-itemToolbar-borderRadius;
-            border-top-right-radius: $Combo--vertical-itemToolbar-borderRadius;
-            padding: 0 px2rem(3px);
-            border-style: solid;
-            border-color: $Combo--vertical-itemToolbar-borderColor;
-            border-width: $Combo--vertical-itemToolbar-borderWidth
-                $Combo--vertical-itemToolbar-borderWidth 0
-                $Combo--vertical-itemToolbar-borderWidth;
-            // margin-top: px2rem(-1px);
-
-            .#{$ns}Combo-toolbarBtn {
-                color: inherit;
-                line-height: $Combo--vertical-itemToolbar-height;
-                // font-size: px2rem(14px);
-
-                &:hover {
-                    color: $Combo--vertical-itemToolbar-onHover-color;
-                }
-            }
-
-            // top: $Combo--vertical-itemToolbar-positionTop;
-            // opacity: 1;
-        }
-
-        > .#{$ns}Combo-item:hover,
-        > .#{$ns}Combo-items > .#{$ns}Combo-item:hover {
-            border-color: $Combo--vertical-item-onHover-borderColor;
-            // border-style: solid;
-
-            > .#{$ns}Combo-itemToolbar {
-                top: $Combo--vertical-itemToolbar-positionTop;
-                opacity: 1;
-            }
-        }
-    }
-
-    &-item--dragging {
-        position: relative;
-
-        &:after {
-            content: "";
-            display: block;
-            position: absolute;
-            z-index: 5;
-            left: 0;
-            top: 0;
-            right: 0;
-            bottom: 0;
-            width: 100%;
-            height: 100%;
-            background: rgba(0, 0, 0, 0.1);
-        }
+    &:after {
+      content: '';
+      display: block;
+      position: absolute;
+      z-index: 5;
+      left: 0;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(0, 0, 0, 0.1);
    }
+  }
 }

 .#{$ns}Combo-dragableTip {
-    color: $text--muted-color;
-    font-size: $fontSizeSm;
-    margin-left: $gap-xs;
+  color: $text--muted-color;
+  font-size: $fontSizeSm;
+  margin-left: $gap-xs;

-    &:empty {
-        display: none;
-    }
+  &:empty {
+    display: none;
+  }
 }

 .#{$ns}ComboControl.is-inline {
-    .#{$ns}Combo--hor .#{$ns}Combo-itemInner {
-        flex-grow: unset;
-        flex-basis: unset;
-    }
+  .#{$ns}Combo--hor .#{$ns}Combo-itemInner {
+    flex-grow: unset;
+    flex-basis: unset;
+  }

-    .#{$ns}Combo--ver .#{$ns}Combo-item {
-        display: inline-block;
-    }
+  .#{$ns}Combo--ver .#{$ns}Combo-item {
+    display: inline-block;
+  }
 }

@include media-breakpoint-up(sm) {
-    .#{$ns}Combo-form .#{$ns}Form-item:last-child {
-        margin-bottom: 0;
-    }
+  .#{$ns}Combo-form .#{$ns}Form-item:last-child {
+    margin-bottom: 0;
+  }
 }
--- a/scss/components/form/_date-range.scss
+++ b/scss/components/form/_date-range.scss
@ -1,116 +1,116 @@
 .#{$ns}DateRangePicker {
-    position: relative;
-    display: inline-flex;
-    flex-wrap: nowrap;
-    border: $DatePicker-borderWidth solid $DatePicker-borderColor;
-    font-size: $DatePicker-fontSize;
-    padding: $DatePicker-paddingY $DatePicker-paddingX;
-    height: $DatePicker-height;
-    outline: none;
-    white-space: nowrap;
-    border-radius: $DatePicker-borderRadius;
+  position: relative;
+  display: inline-flex;
+  flex-wrap: nowrap;
+  border: $DatePicker-borderWidth solid $DatePicker-borderColor;
+  font-size: $DatePicker-fontSize;
+  padding: $DatePicker-paddingY $DatePicker-paddingX;
+  height: $DatePicker-height;
+  outline: none;
+  white-space: nowrap;
+  border-radius: $DatePicker-borderRadius;

-    color: $DatePicker-color;
-    background-color: $DatePicker-bg;
+  color: $DatePicker-color;
+  background-color: $DatePicker-bg;

-    &:not(.is-disabled) {
-        cursor: pointer;
+  &:not(.is-disabled) {
+    cursor: pointer;

-        &:hover {
-            background-color: $DatePicker-onHover-bg;
-            border-color: $DatePicker-onHover-borderColor;
+    &:hover {
+      background-color: $DatePicker-onHover-bg;
+      border-color: $DatePicker-onHover-borderColor;

-            .#{$ns}DateRangePicker-toggler {
-                color: $DatePicker-onHover-iconColor;
-            }
-        }
+      .#{$ns}DateRangePicker-toggler {
+        color: $DatePicker-onHover-iconColor;
+      }
    }
+  }

-    &.is-focused {
-        border-color: $DatePicker-onFocused-borderColor;
-        box-shadow: $Form-input-boxShadow;
+  &.is-focused {
+    border-color: $DatePicker-onFocused-borderColor;
+    box-shadow: $Form-input-boxShadow;
+  }
+
+  &.is-disabled {
+    background: $gray200;
+
+    > &-input {
+      color: $text--muted-color;
    }
+  }

-    &.is-disabled {
-        background: $gray200;
+  &-placeholder {
+    color: $DatePicker-placeholderColor;
+    user-select: none;
+    margin-right: $gap-base;
+    flex-basis: 0;
+    flex-grow: 1;
+  }

-        > &-input {
-            color: $text--muted-color;
-        }
+  &-value {
+    margin-right: $gap-base;
+    flex-basis: 0;
+    flex-grow: 1;
+  }
+
+  &-toggler {
+    cursor: pointer;
+    color: $DatePicker-iconColor;
+
+    &:hover {
+      color: $DatePicker-onHover-iconColor;
    }
+  }

-    &-placeholder {
-        color: $DatePicker-placeholderColor;
-        user-select: none;
-        margin-right: $gap-base;
-        flex-basis: 0;
-        flex-grow: 1;
-    }
-
-    &-value {
-        margin-right: $gap-base;
-        flex-basis: 0;
-        flex-grow: 1;
-    }
-
-    &-toggler {
-        cursor: pointer;
-        color: $DatePicker-iconColor;
-
-        &:hover {
-            color: $DatePicker-onHover-iconColor;
-        }
-    }
-
-    &-clear {
-        @include input-clear();
-        display: inline-block;
-        line-height: 1;
-        margin-right: $gap-xs;
-    }
+  &-clear {
+    @include input-clear();
+    display: inline-block;
+    line-height: 1;
+    margin-right: $gap-xs;
+  }
 }

 .#{$ns}DateRangePicker-wrap {
-    width: auto;
-    white-space: nowrap;
-    padding: $gap-md;
+  width: auto;
+  white-space: nowrap;
+  padding: $gap-md;
 }

 .#{$ns}DateRangePicker-start,
 .#{$ns}DateRangePicker-end {
-    display: inline-block;
+  display: inline-block;

-    .rdtPicker {
-        padding: 0;
-        box-shadow: none;
-        border: none;
-    }
+  .rdtPicker {
+    padding: 0;
+    box-shadow: none;
+    border: none;
+  }
 }

 .#{$ns}DateRangePicker-end {
-    margin-left: 20px;
+  margin-left: 20px;
 }

 .#{$ns}DateRangePicker-rangers {
-    margin: 0 0 $gap-sm;
-    padding: 0;
-    list-style: none;
+  margin: 0 0 $gap-sm;
+  padding: 0;
+  list-style: none;
 }

 .#{$ns}DateRangePicker-ranger {
-    display: inline-block;
-    margin-right: $gap-sm;
+  display: inline-block;
+  margin-right: $gap-sm;

-    a {
-        cursor: pointer;
-    }
+  a {
+    cursor: pointer;
+  }
 }

 .#{$ns}DateRangePicker-actions {
-    text-align: right;
-    margin-top: $gap-sm;
+  text-align: right;
+  margin-top: $gap-sm;
 }

 .#{$ns}DateRangeControl:not(.is-inline) > .#{$ns}DateRangePicker {
-    display: flex;
+  display: flex;
 }
--- a/scss/components/form/_date.scss
+++ b/scss/components/form/_date.scss
@ -1,308 +1,312 @@
 .#{$ns}DatePicker {
-    position: relative;
-    display: inline-flex;
-    flex-wrap: nowrap;
-    border: $DatePicker-borderWidth solid $DatePicker-borderColor;
-    font-size: $DatePicker-fontSize;
-    padding: $DatePicker-paddingY $DatePicker-paddingX;
-    height: $DatePicker-height;
-    outline: none;
-    white-space: nowrap;
-    color: $DatePicker-color;
-    background-color: $DatePicker-bg;
-    border-radius: $DatePicker-borderRadius;
+  position: relative;
+  display: inline-flex;
+  flex-wrap: nowrap;
+  border: $DatePicker-borderWidth solid $DatePicker-borderColor;
+  font-size: $DatePicker-fontSize;
+  padding: $DatePicker-paddingY $DatePicker-paddingX;
+  height: $DatePicker-height;
+  outline: none;
+  white-space: nowrap;
+  color: $DatePicker-color;
+  background-color: $DatePicker-bg;
+  border-radius: $DatePicker-borderRadius;

-    &:not(.is-disabled) {
-        cursor: pointer;
+  &:not(.is-disabled) {
+    cursor: pointer;

-        &:hover {
-            background-color: $DatePicker-onHover-bg;
-            border-color: $DatePicker-onHover-borderColor;
+    &:hover {
+      background-color: $DatePicker-onHover-bg;
+      border-color: $DatePicker-onHover-borderColor;

-            .#{$ns}DatePicker-toggler:before {
-                color: $DatePicker-onHover-iconColor;
-            }
-        }
+      .#{$ns}DatePicker-toggler:before {
+        color: $DatePicker-onHover-iconColor;
+      }
+    }
+  }
+
+  &.is-focused {
+    border-color: $DatePicker-onFocused-borderColor;
+    box-shadow: $Form-input-boxShadow;
+  }
+
+  &.is-disabled {
+    background: $gray200;
+
+    > &-input {
+      color: $text--muted-color;
+    }
+  }
+
+  &-placeholder {
+    color: $DatePicker-placeholderColor;
+    user-select: none;
+    margin-right: $gap-base;
+    flex-basis: 0;
+    flex-grow: 1;
+  }
+
+  &-value {
+    margin-right: $gap-base;
+    flex-basis: 0;
+    flex-grow: 1;
+  }
+
+  &-toggler {
+    cursor: pointer;
+    color: $DatePicker-iconColor;
+
+    &:hover {
+      color: $DatePicker-onHover-iconColor;
    }

-    &.is-focused {
-        border-color: $DatePicker-onFocused-borderColor;
-        box-shadow: $Form-input-boxShadow;
+    &:before {
+      line-height: 1;
+      color: inherit;
+      content: $DatePicker-toggler-icon;
+      display: inline-block;
+      font-size: $DatePicker-toggler-fontSize;
+      font-family: $DatePicker-toggler-vendor;
    }
+  }

-    &.is-disabled {
-        background: $gray200;
-
-        >&-input {
-            color: $text--muted-color;
-        }
-    }
-
-    &-placeholder {
-        color: $DatePicker-placeholderColor;
-        user-select: none;
-        margin-right: $gap-base;
-        flex-basis: 0;
-        flex-grow: 1;
-    }
-
-    &-value {
-        margin-right: $gap-base;
-        flex-basis: 0;
-        flex-grow: 1;
-    }
-
-    &-toggler {
-        cursor: pointer;
-        color: $DatePicker-iconColor;
-
-        &:hover {
-            color: $DatePicker-onHover-iconColor;
-        }
-
-        &:before {
-            line-height: 1;
-            color: inherit;
-            content: $DatePicker-toggler-icon;
-            display: inline-block;
-            font-size: $DatePicker-toggler-fontSize;
-            font-family: $DatePicker-toggler-vendor;
-        }
-    }
-
-    &-clear {
-        display: inline-block;
-        @include input-clear();
-        line-height: 1;
-        margin-right: $gap-xs;
-    }
+  &-clear {
+    display: inline-block;
+    @include input-clear();
+    line-height: 1;
+    margin-right: $gap-xs;
+  }
 }

-.#{$ns}DateControl:not(.is-inline)>.#{$ns}DatePicker {
-    display: flex;
+.#{$ns}DateControl:not(.is-inline) > .#{$ns}DatePicker {
+  display: flex;
 }

 .#{$ns}DatePicker-shortcuts {
-    margin: $gap-sm $gap-md (-$gap-sm) $gap-md;
-    padding: 0;
-    list-style: none;
-    max-width: 206px;
+  margin: $gap-sm $gap-md (-$gap-sm) $gap-md;
+  padding: 0;
+  list-style: none;
+  max-width: 206px;
 }

 .#{$ns}DatePicker-shortcut {
-    display: inline-block;
-    margin-right: $gap-sm;
+  display: inline-block;
+  margin-right: $gap-sm;

-    a {
-        cursor: pointer;
-    }
+  a {
+    cursor: pointer;
+  }
 }

 // override third-party styles
 .rdt {
-    user-select: none;
-    font-size: $Calendar-fontSize;
-    color: $Calendar-color;
+  user-select: none;
+  font-size: $Calendar-fontSize;
+  color: $Calendar-color;

-    .rdtPicker {
-        margin-top: 0;
-        padding: $gap-md;
-        background: transparent;
-        border: none;
+  .rdtPicker {
+    margin-top: 0;
+    padding: $gap-md;
+    background: transparent;
+    border: none;

-        .dow {
-            color: $Calendar-wLabel-color;
-            font-weight: normal;
-        }
-
-        td.rdtDay,
-        td.rdtHour,
-        td.rdtMinute,
-        td.rdtSecond,
-        .rdtTimeToggle {
-            background-color: $Calendar-cell-bg;
-
-            &:hover {
-                background-color: $Calendar-cell-onHover-bg;
-            }
-        }
-
-        td.rdtToday:before {
-            border-bottom-color: $Calendar-cell-onActive-bg;
-        }
-
-        td.rdtActive.rdtToday:before {
-            border-bottom-color: $Calendar-cell-bg;
-        }
-
-        td.rdtActive,
-        td.rdtActive:hover {
-            background: $Calendar-cell-onActive-bg;
-        }
-
-        td.rdtDisabled,
-        td.rdtDisabled:hover {
-            background-color: $Calendar-cell-onDisabled-bg;
-        }
+    .dow {
+      color: $Calendar-wLabel-color;
+      font-weight: normal;
    }

-    thead tr:first-child th {
-        cursor: default;
-        text-align: left;
-        font-weight: normal;
+    td.rdtDay,
+    td.rdtHour,
+    td.rdtMinute,
+    td.rdtSecond,
+    .rdtTimeToggle {
+      background-color: $Calendar-cell-bg;
+
+      &:hover {
+        background-color: $Calendar-cell-onHover-bg;
+      }
    }

-    thead tr:first-child th:hover {
-        background: transparent;
+    td.rdtToday:before {
+      border-bottom-color: $Calendar-cell-onActive-bg;
    }

-    tfoot {
-        border-top: 0;
+    td.rdtActive.rdtToday:before {
+      border-bottom-color: $Calendar-cell-bg;
+    }

-        td {
-            padding-top: px2rem(5px);
-            text-align: left;
+    td.rdtActive,
+    td.rdtActive:hover {
+      background: $Calendar-cell-onActive-bg;
+    }

-            span {
-                width: 10px;
-                display: inline-block;
-                text-align: center;
-            }
+    td.rdtDisabled,
+    td.rdtDisabled:hover {
+      background-color: $Calendar-cell-onDisabled-bg;
+    }
+  }

-            input {
-                outline: none;
-                width: 42px;
-                font-size: $Calendar-input-fontSize;
-                color: $Calendar-input-color;
-                border: 1px solid $Calendar-input-borderColor;
-                border-radius: $Calendar-input-borderRadius;
-                height: $Calendar-input-height;
-                line-height: $Calendar-input-lineHeight;
-                padding: $Calendar-input-paddingY $Calendar-input-paddingX;
-                box-shadow: none;
+  thead tr:first-child th {
+    cursor: default;
+    text-align: left;
+    font-weight: normal;
+  }

-                &:focus {
-                    border-color: $Calendar-input-onFocused-borderColor;
-                    box-shadow: none;
-                }
-            }
+  thead tr:first-child th:hover {
+    background: transparent;
+  }

-            .rdtActions {
-                margin-top: $gap-sm;
-                text-align: right;
-            }
+  tfoot {
+    border-top: 0;
+
+    td {
+      padding-top: px2rem(5px);
+      text-align: left;
+
+      span {
+        width: 10px;
+        display: inline-block;
+        text-align: center;
+      }
+
+      input {
+        outline: none;
+        width: 42px;
+        font-size: $Calendar-input-fontSize;
+        color: $Calendar-input-color;
+        border: 1px solid $Calendar-input-borderColor;
+        border-radius: $Calendar-input-borderRadius;
+        height: $Calendar-input-height;
+        line-height: $Calendar-input-lineHeight;
+        padding: $Calendar-input-paddingY $Calendar-input-paddingX;
+        box-shadow: none;
+
+        &:focus {
+          border-color: $Calendar-input-onFocused-borderColor;
+          box-shadow: none;
        }
+      }
+
+      .rdtActions {
+        margin-top: $gap-sm;
+        text-align: right;
+      }
+    }
+  }
+
+  .rdtCounter {
+    .rdtBtn {
+      height: 30%;
+      line-height: px2rem(20px);
    }

-    .rdtCounter {
-        .rdtBtn {
-            height: 30%;
-            line-height: px2rem(20px);
-        }
-
-        .rdtCount {
-            height: 40%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
+    .rdtCount {
+      height: 40%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
    }
+  }
 }

 .rdtBtn {
-    line-height: $Calendar-btn-lineHeight;
-    padding: $Calendar-btn-paddingY $Calendar-btn-paddingX;
-    display: inline-block;
-    vertical-align: middle;
-    text-align: center;
-    user-select: none;
-    cursor: pointer;
+  line-height: $Calendar-btn-lineHeight;
+  padding: $Calendar-btn-paddingY $Calendar-btn-paddingX;
+  display: inline-block;
+  vertical-align: middle;
+  text-align: center;
+  user-select: none;
+  cursor: pointer;
+  text-decoration: none;
+  font-size: $Calendar-btn-fontSize;
+
+  &:hover {
    text-decoration: none;
-    font-size: $Calendar-btn-fontSize;
+  }

-    &:hover {
-        text-decoration: none;
-    }
+  &.is-disabled {
+    opacity: 0.6;
+    pointer-events: none;
+  }

-    &.is-disabled {
-        opacity: 0.6;
-        pointer-events: none;
-    }
+  .fa,
+  .iconfont {
+    font-size: $fontSizeSm;
+  }

-    .fa,
-    .iconfont {
-        font-size: $fontSizeSm;
-    }
+  @include button-variant(
+    $Calendar-btn-bg,
+    $Calendar-btn-border,
+    $Calendar-btn-color,
+    $Calendar-btn-onHover-bg,
+    $Calendar-btn-onHover-border,
+    $Calendar-btn-onHover-color,
+    $Calendar-btn-onActive-bg,
+    $Calendar-btn-onActive-border,
+    $Calendar-btn-onActive-color
+  );

-    @include button-variant($Calendar-btn-bg,
-        $Calendar-btn-border,
-        $Calendar-btn-color,
-        $Calendar-btn-onHover-bg,
-        $Calendar-btn-onHover-border,
-        $Calendar-btn-onHover-color,
-        $Calendar-btn-onActive-bg,
-        $Calendar-btn-onActive-border,
-        $Calendar-btn-onActive-color);
+  border-radius: $Calendar-btn-borderRadius;

-    border-radius: $Calendar-btn-borderRadius;
+  & + .rdtBtn {
+    margin-left: $gap-xs;
+  }

-    &+.rdtBtn {
-        margin-left: $gap-xs;
-    }
-
-    &Cancel {
-        @include button-variant($Calendar-btnCancel-bg,
-            $Calendar-btnCancel-border,
-            $Calendar-btnCancel-color,
-            $Calendar-btnCancel-onHover-bg,
-            $Calendar-btnCancel-onHover-border,
-            $Calendar-btnCancel-onHover-color,
-            $Calendar-btnCancel-onActive-bg,
-            $Calendar-btnCancel-onActive-border,
-            $Calendar-btnCancel-onActive-color);
-    }
+  &Cancel {
+    @include button-variant(
+      $Calendar-btnCancel-bg,
+      $Calendar-btnCancel-border,
+      $Calendar-btnCancel-color,
+      $Calendar-btnCancel-onHover-bg,
+      $Calendar-btnCancel-onHover-border,
+      $Calendar-btnCancel-onHover-color,
+      $Calendar-btnCancel-onActive-bg,
+      $Calendar-btnCancel-onActive-border,
+      $Calendar-btnCancel-onActive-color
+    );
+  }
 }

 .rdtBtnPrev:before,
 .rdtBtnNext:before {
-    display: inline-block;
-    color: inherit;
-    font-style: normal;
-    line-height: 1;
+  display: inline-block;
+  color: inherit;
+  font-style: normal;
+  line-height: 1;
 }

 .rdtBtnPrev:before {
-    font-family: $DatePicker-prevBtn-vendor;
-    font-size: $DatePicker-prevBtn-fontSize;
-    content: $DatePicker-prevBtn-icon;
+  font-family: $DatePicker-prevBtn-vendor;
+  font-size: $DatePicker-prevBtn-fontSize;
+  content: $DatePicker-prevBtn-icon;
 }

 .rdtBtnNext:before {
-    font-family: $DatePicker-nextBtn-vendor;
-    font-size: $DatePicker-nextBtn-fontSize;
-    content: $DatePicker-nextBtn-icon;
+  font-family: $DatePicker-nextBtn-vendor;
+  font-size: $DatePicker-nextBtn-fontSize;
+  content: $DatePicker-nextBtn-icon;
 }

 .rdtHeader {
-    display: table;
-    table-layout: fixed;
-    border-collapse: separate;
+  display: table;
+  table-layout: fixed;
+  border-collapse: separate;
+  width: 100%;
+
+  .rdtBtn {
+    display: table-cell;
+    width: px2rem(30px);
+    padding: 0;
+  }
+
+  .rdtSelect {
+    display: table-cell;
    width: 100%;
+    border-left: 1px solid $DatePicker-header-select-borderColor;
+    border-right: 1px solid $DatePicker-header-select-borderColor;

-    .rdtBtn {
-        display: table-cell;
-        width: px2rem(30px);
-        padding: 0;
+    .#{$ns}Select {
+      display: flex;
    }
-
-    .rdtSelect {
-        display: table-cell;
-        width: 100%;
-        border-left: 1px solid $DatePicker-header-select-borderColor;
-        border-right: 1px solid $DatePicker-header-select-borderColor;
-
-        .#{$ns}Select {
-            display: flex;
-        }
-    }
-}
+  }
+}
--- a/scss/components/form/_editor.scss
+++ b/scss/components/form/_editor.scss
@ -1,63 +1,63 @@
 // todo

 .#{$ns}EditorControl {
-    min-height: px2rem(200px);
-    max-height: px2rem(400px);
+  min-height: px2rem(200px);
+  max-height: px2rem(400px);

-    > .#{$ns}MonacoEditor,
-    > .#{$ns}MonacoEditor > .monaco-diff-editor {
-        min-height: px2rem(198px);
+  > .#{$ns}MonacoEditor,
+  > .#{$ns}MonacoEditor > .monaco-diff-editor {
+    min-height: px2rem(198px);
+  }
+
+  overflow: visible;
+  height: auto;
+  border: $Form-input-borderWidth solid $Form-input-borderColor;
+  max-width: 100%;
+  box-sizing: content-box;
+
+  &.is-error {
+    border-color: $Form-input-onError-borderColor;
+  }
+
+  &.is-focused {
+    border-color: $Form-input-onFocused-borderColor;
+  }
+
+  &--md {
+    min-height: 250px;
+
+    > .#{$ns}MonacoEditor {
+      min-height: 250px;
    }
+  }

-    overflow: visible;
-    height: auto;
-    border: $Form-input-borderWidth solid $Form-input-borderColor;
-    max-width: 100%;
-    box-sizing: content-box;
+  &--lg {
+    min-height: 300px;

-    &.is-error {
-        border-color: $Form-input-onError-borderColor;
+    > .#{$ns}MonacoEditor {
+      min-height: 300px;
    }
+  }

-    &.is-focused {
-        border-color: $Form-input-onFocused-borderColor;
+  &--xl {
+    min-height: 400px;
+
+    > .#{$ns}MonacoEditor {
+      min-height: 400px;
    }
+  }

-    &--md {
-        min-height: 250px;
+  &--xxl {
+    min-height: 500px;

-        > .#{$ns}MonacoEditor {
-            min-height: 250px;
-        }
-    }
-
-    &--lg {
-        min-height: 300px;
-
-        > .#{$ns}MonacoEditor {
-            min-height: 300px;
-        }
-    }
-
-    &--xl {
-        min-height: 400px;
-
-        > .#{$ns}MonacoEditor {
-            min-height: 400px;
-        }
-    }
-
-    &--xxl {
-        min-height: 500px;
-
-        > .#{$ns}MonacoEditor {
-            min-height: 500px;
-        }
+    > .#{$ns}MonacoEditor {
+      min-height: 500px;
    }
+  }
 }

 .monaco-inputbox > .wrapper {
-    padding: 0;
+  padding: 0;
 }

 // @media (min-width: 768px) {
--- a/scss/components/form/_fieldset.scss
+++ b/scss/components/form/_fieldset.scss
@ -1,128 +1,128 @@
 %fieldSetBase {
+  position: relative;
+
+  &:after {
+    content: '';
+    pointer-events: none;
+    border: 1px solid $borderColor;
+    position: absolute;
+    z-index: 0;
+    top: 11px;
+    left: 0;
+    bottom: 0;
+    right: 0;
+  }
+
+  > legend {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: inline-block;
+    border: 0;
+    width: auto;
+    z-index: 1;
+    background: $Fieldset-legend-bgColor;
+    border-left: 0 !important;
+  }
+
+  .collapse {
    position: relative;
-
-    &:after {
-        content: '';
-        pointer-events: none;
-        border: 1px solid $borderColor;
-        position: absolute;
-        z-index: 0;
-        top: 11px;
-        left: 0;
-        bottom: 0;
-        right: 0;
-    }
-
-    >legend {
-        position: absolute;
-        top: 0;
-        left: 0;
-        display: inline-block;
-        border: 0;
-        width: auto;
-        z-index: 1;
-        background: $Fieldset-legend-bgColor;
-        border-left: 0 !important;
-    }
-
-    .collapse {
-        position: relative;
-    }
+  }
 }

 fieldset.#{$ns}Collapse {
-    >legend {
-        font-weight: $fontWeightNormal;
-        padding: $gap-xs 0;
-        font-size: $fontSizeMd;
-        color: $text--loud-color;
-        border-left: $primary px2rem(4px) solid;
-        line-height: 1.2;
-        margin: 8px 0 28px;
-        padding: 0 0 0 14px;
-        cursor: pointer;
-        border-bottom: 0;
+  > legend {
+    font-weight: $fontWeightNormal;
+    padding: $gap-xs 0;
+    font-size: $fontSizeMd;
+    color: $text--loud-color;
+    border-left: $primary px2rem(4px) solid;
+    line-height: 1.2;
+    margin: 8px 0 28px;
+    padding: 0 0 0 14px;
+    cursor: pointer;
+    border-bottom: 0;
+  }
+
+  &--xs {
+    @extend %fieldSetBase;
+    padding: 20px 5px 5px 5px;
+
+    > legend {
+      left: 5px;
+      font-size: $fontSizeXs;
+      padding: 0 3px;
+      margin: 0 0 0 -3px;
    }

-    &--xs {
-        @extend %fieldSetBase;
-        padding: 20px 5px 5px 5px;
+    &:after {
+      top: 6px;
+    }
+  }

-        >legend {
-            left: 5px;
-            font-size: $fontSizeXs;
-            padding: 0 3px;
-            margin: 0 0 0 -3px;
-        }
+  &--sm {
+    @extend %fieldSetBase;

-        &:after {
-            top: 6px;
-        }
+    padding: 25px 10px 10px 10px;
+
+    > legend {
+      left: 10px;
+      font-size: $fontSizeSm;
+      padding: 0 5px;
+      margin: 0 0 0 -5px;
    }

-    &--sm {
-        @extend %fieldSetBase;
+    &:after {
+      top: 6px;
+    }
+  }

-        padding: 25px 10px 10px 10px;
+  &--base {
+    @extend %fieldSetBase;

-        >legend {
-            left: 10px;
-            font-size: $fontSizeSm;
-            padding: 0 5px;
-            margin: 0 0 0 -5px;
-        }
+    padding: 30px 15px 15px 15px;

-        &:after {
-            top: 6px;
-        }
+    > legend {
+      left: 15px;
+      font-size: $fontSizeBase;
+      padding: 0 8px;
+      margin: 0 0 0 -8px;
    }

-    &--base {
-        @extend %fieldSetBase;
+    &:after {
+      top: 7px;
+    }
+  }

-        padding: 30px 15px 15px 15px;
+  &--md {
+    @extend %fieldSetBase;
+    padding: 30px 20px 20px 20px;

-        >legend {
-            left: 15px;
-            font-size: $fontSizeBase;
-            padding: 0 8px;
-            margin: 0 0 0 -8px;
-        }
-
-        &:after {
-            top: 7px;
-        }
+    > legend {
+      left: 20px;
+      font-size: $fontSizeMd;
+      padding: 0 10px;
+      margin: 0 0 0 -10px;
    }

-    &--md {
-        @extend %fieldSetBase;
-        padding: 30px 20px 20px 20px;
+    &:after {
+      top: 7px;
+    }
+  }

-        >legend {
-            left: 20px;
-            font-size: $fontSizeMd;
-            padding: 0 10px;
-            margin: 0 0 0 -10px;
-        }
+  &--lg {
+    @extend %fieldSetBase;
+    padding: 40px 30px 30px 30px;

-        &:after {
-            top: 7px;
-        }
+    > legend {
+      left: 30px;
+      font-size: $fontSizeLg;
+      padding: 0 15px;
+      margin: 0 0 0 -15px;
    }

-    &--lg {
-        @extend %fieldSetBase;
-        padding: 40px 30px 30px 30px;
-
-        >legend {
-            left: 30px;
-            font-size: $fontSizeLg;
-            padding: 0 15px;
-            margin: 0 0 0 -15px;
-        }
-
-        &:after {
-            top: 9px;
-        }
+    &:after {
+      top: 9px;
    }
-}
+  }
+}
--- a/scss/components/form/_file.scss
+++ b/scss/components/form/_file.scss
@ -1,155 +1,147 @@
 .#{$ns}FileControl {
-    &-dropzone {
-        outline: none;
+  &-dropzone {
+    outline: none;
+  }

+  &-selectBtn {
+    width: px2rem(120px);
+
+    > svg {
+      margin-right: 10px;
+      width: pxrem(16px);
+      height: pxrem(16px);
+    }
+  }
+
+  // &-dropzone:focus {
+  //     .#{$ns}FileControl-selectBtn {
+  //         background: $Button--default-onHover-bg;
+  //         border-color: $Button--default-onHover-border;
+  //         color: $Button--default-onHover-color;
+  //     }
+
+  //     &:after {
+  //         content: '当前状态接受从剪切板中粘贴文件。';
+  //         color: $text--muted-color;
+  //         font-size: 11px;
+  //         margin-top: 10px;
+  //     }
+  // }
+
+  &-description {
+    margin-left: 10px;
+    color: #999;
+    font-size: 12px;
+  }
+
+  &-list {
+    list-style: none;
+    margin: 10px 0;
+    padding: 0;
+    width: 250px;
+
+    > li {
+      color: #333;
+      font-size: 12px;
+
+      &:hover {
+        color: #108cee;
+        background: #f3f3f3;
+      }
+    }
+  }
+
+  &-itemInfo {
+    padding: 0px 6px;
+    line-height: 26px;
+    height: 26px;
+
+    &.is-invalid {
+      color: #999;
    }

-    &-selectBtn {
-        width: px2rem(120px);
-
-
-        >svg {
-            margin-right: 10px;
-            width: pxrem(16px);
-            height: pxrem(16px);
-        }
+    > svg:first-child {
+      margin-right: 10px;
    }

-    // &-dropzone:focus {
-    //     .#{$ns}FileControl-selectBtn {
-    //         background: $Button--default-onHover-bg;
-    //         border-color: $Button--default-onHover-border;
-    //         color: $Button--default-onHover-color;
-    //     }
+    > svg:not(:first-child) {
+      margin-left: 10px;
+      width: px2rem(16px);
+      height: px2rem(16px);
+      top: px2rem(5px);
+    }
+  }

-    //     &:after {
-    //         content: '当前状态接受从剪切板中粘贴文件。';
-    //         color: $text--muted-color;
-    //         font-size: 11px;
-    //         margin-top: 10px;
-    //     }
-    // }
+  &-itemInfoText {
+    white-space: nowrap;
+    max-width: 180px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: inline-block;
+    vertical-align: middle;
+  }

-    &-description {
-        margin-left: 10px;
-        color: #999;
-        font-size: 12px;
+  &-clear {
+    float: right;
+    color: #999;
+    display: none;
+    cursor: pointer;
+
+    &:hover {
+      color: #333;
+    }
+  }
+
+  &-list > li:hover &-clear {
+    display: block;
+  }
+
+  &-progressInfo {
+    display: inline-flex;
+    height: 20px;
+    padding: 0 6px;
+    transform: translateY(-3px);
+    width: 100%;
+    align-items: center;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+
+    > span {
+      display: inline-block;
+      padding: 0 4px 0 10px;
+      font-size: 12px;
    }

-    &-list {
-        list-style: none;
-        margin: 10px 0;
-        padding: 0;
-        width: 250px;
-
-        >li {
-            color: #333;
-            font-size: 12px;
-
-            &:hover {
-                color: #108cee;
-                background: #f3f3f3;
-            }
-
-
-        }
+    > svg {
+      display: inline-block;
+      margin: 0 4px 0 10px;
+      width: 14px;
+      height: 14px;
+      top: 0;
    }
+  }

+  &-progress {
+    height: 5px;
+    flex: 1;
+    background: #ebebeb;

-
-    &-itemInfo {
-        padding: 0px 6px;
-        line-height: 26px;
-        height: 26px;
-
-        &.is-invalid {
-            color: #999;
-        }
-
-        >svg:first-child {
-            margin-right: 10px;
-        }
-
-        >svg:not(:first-child) {
-            margin-left: 10px;
-            width: px2rem(16px);
-            height: px2rem(16px);
-            top: px2rem(5px);
-        }
+    > span {
+      display: block;
+      background: $info;
+      height: 100%;
+      min-width: 10%;
+      transition: ease-out width 0.3s;
    }
+  }

-    &-itemInfoText {
-        white-space: nowrap;
-        max-width: 180px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        display: inline-block;
-        vertical-align: middle;
-    }
-
-    &-clear {
-        float: right;
-        color: #999;
-        display: none;
-        cursor: pointer;
-
-        &:hover {
-            color: #333;
-        }
-    }
-
-    &-list>li:hover &-clear {
-        display: block;
-    }
-
-    &-progressInfo {
-        display: inline-flex;
-        height: 20px;
-        padding: 0 6px;
-        transform: translateY(-3px);
-        width: 100%;
-        align-items: center;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-
-        >span {
-            display: inline-block;
-            padding: 0 4px 0 10px;
-            font-size: 12px;
-        }
-
-        >svg {
-            display: inline-block;
-            margin: 0 4px 0 10px;
-            width: 14px;
-            height: 14px;
-            top: 0;
-        }
-    }
-
-
-
-    &-progress {
-        height: 5px;
-        flex: 1;
-        background: #ebebeb;
-
-        >span {
-            display: block;
-            background: $info;
-            height: 100%;
-            min-width: 10%;
-            transition: ease-out width 0.3s;
-        }
-    }
-
-    &-acceptTip {
-        height: 120px;
-        color: #999;
-        border: 2px dashed $info;
-        border-radius: $borderRadius;
-        background: #f3f9fe;
-        line-height: 120px;
-        text-align: center;
-    }
-}
+  &-acceptTip {
+    height: 120px;
+    color: #999;
+    border: 2px dashed $info;
+    border-radius: $borderRadius;
+    background: #f3f9fe;
+    line-height: 120px;
+    text-align: center;
+  }
+}
--- a/scss/components/form/_group.scss
+++ b/scss/components/form/_group.scss
@ -1,103 +1,103 @@
 .#{$ns}Form-groupColumn {
-    margin-bottom: $gap-sm;
+  margin-bottom: $gap-sm;
 }

@include media-breakpoint-up(md) {
-    .#{$ns}Form-group {
-        margin-bottom: $Form-item-gap;
+  .#{$ns}Form-group {
+    margin-bottom: $Form-item-gap;

-        .#{$ns}Form-value > & {
-            margin-bottom: $Form-input-marginBottom;
-        }
-
-        &--hor {
-            display: flex;
-            flex-wrap: nowrap;
-            margin-left: -$Form-group-gutterWidth / 2;
-            margin-right: -$Form-group-gutterWidth / 2;
-            align-items: flex-start;
-
-            &.v-middle {
-                align-items: center;
-            }
-
-            &.v-bottom {
-                align-items: flex-end;
-            }
-
-            > * {
-                padding-left: $Form-group-gutterWidth / 2;
-                padding-right: $Form-group-gutterWidth / 2;
-            }
-
-            > .#{$ns}Form-item--inline {
-                margin-right: 0;
-            }
-
-            > .#{$ns}Form-item,
-            > div > .#{$ns}Form-item {
-                margin-bottom: 0;
-            }
-
-            .#{$ns}Form-input > .#{$ns}Form-group {
-                margin-bottom: 0;
-            }
-        }
-
-        &--lg {
-            margin-left: -$Form-group--lg-gutterWidth / 2;
-            margin-right: -$Form-group--lg-gutterWidth / 2;
-
-            > * {
-                padding-left: $Form-group--lg-gutterWidth / 2;
-                padding-right: $Form-group--lg-gutterWidth / 2;
-            }
-        }
-
-        &--md {
-            margin-left: -$Form-group--md-gutterWidth / 2;
-            margin-right: -$Form-group--md-gutterWidth / 2;
-
-            > * {
-                padding-left: $Form-group--md-gutterWidth / 2;
-                padding-right: $Form-group--md-gutterWidth / 2;
-            }
-        }
-
-        &--sm {
-            margin-left: -$Form-group--sm-gutterWidth / 2;
-            margin-right: -$Form-group--sm-gutterWidth / 2;
-
-            > * {
-                padding-left: $Form-group--sm-gutterWidth / 2;
-                padding-right: $Form-group--sm-gutterWidth / 2;
-            }
-        }
-
-        &--xs {
-            margin-left: -$Form-group--xs-gutterWidth / 2;
-            margin-right: -$Form-group--xs-gutterWidth / 2;
-
-            > * {
-                padding-left: $Form-group--xs-gutterWidth / 2;
-                padding-right: $Form-group--xs-gutterWidth / 2;
-            }
-        }
+    .#{$ns}Form-value > & {
+      margin-bottom: $Form-input-marginBottom;
    }

-    .#{$ns}Form-groupColumn {
-        flex-basis: 0;
-        flex-grow: 1;
-        width: 0;
-        max-width: 100%;
+    &--hor {
+      display: flex;
+      flex-wrap: nowrap;
+      margin-left: -$Form-group-gutterWidth / 2;
+      margin-right: -$Form-group-gutterWidth / 2;
+      align-items: flex-start;
+
+      &.v-middle {
+        align-items: center;
+      }
+
+      &.v-bottom {
+        align-items: flex-end;
+      }
+
+      > * {
+        padding-left: $Form-group-gutterWidth / 2;
+        padding-right: $Form-group-gutterWidth / 2;
+      }
+
+      > .#{$ns}Form-item--inline {
+        margin-right: 0;
+      }
+
+      > .#{$ns}Form-item,
+      > div > .#{$ns}Form-item {
        margin-bottom: 0;
+      }
+
+      .#{$ns}Form-input > .#{$ns}Form-group {
+        margin-bottom: 0;
+      }
    }

-    @for $i from (1) through $Form--horizontal-columns {
-        .#{$ns}Form-groupColumn--#{$i} {
-            flex: 0 0 percentage($i / $Form--horizontal-columns);
-            max-width: percentage($i / $Form--horizontal-columns);
-            min-height: 1px;
-        }
+    &--lg {
+      margin-left: -$Form-group--lg-gutterWidth / 2;
+      margin-right: -$Form-group--lg-gutterWidth / 2;
+
+      > * {
+        padding-left: $Form-group--lg-gutterWidth / 2;
+        padding-right: $Form-group--lg-gutterWidth / 2;
+      }
    }
+
+    &--md {
+      margin-left: -$Form-group--md-gutterWidth / 2;
+      margin-right: -$Form-group--md-gutterWidth / 2;
+
+      > * {
+        padding-left: $Form-group--md-gutterWidth / 2;
+        padding-right: $Form-group--md-gutterWidth / 2;
+      }
+    }
+
+    &--sm {
+      margin-left: -$Form-group--sm-gutterWidth / 2;
+      margin-right: -$Form-group--sm-gutterWidth / 2;
+
+      > * {
+        padding-left: $Form-group--sm-gutterWidth / 2;
+        padding-right: $Form-group--sm-gutterWidth / 2;
+      }
+    }
+
+    &--xs {
+      margin-left: -$Form-group--xs-gutterWidth / 2;
+      margin-right: -$Form-group--xs-gutterWidth / 2;
+
+      > * {
+        padding-left: $Form-group--xs-gutterWidth / 2;
+        padding-right: $Form-group--xs-gutterWidth / 2;
+      }
+    }
+  }
+
+  .#{$ns}Form-groupColumn {
+    flex-basis: 0;
+    flex-grow: 1;
+    width: 0;
+    max-width: 100%;
+    margin-bottom: 0;
+  }
+
+  @for $i from (1) through $Form--horizontal-columns {
+    .#{$ns}Form-groupColumn--#{$i} {
+      flex: 0 0 percentage($i / $Form--horizontal-columns);
+      max-width: percentage($i / $Form--horizontal-columns);
+      min-height: 1px;
+    }
+  }
 }
--- a/scss/components/form/_icon-picker.scss
+++ b/scss/components/form/_icon-picker.scss
@ -1,103 +1,103 @@
 .#{$ns}IconPickerControl {
-    @include input-text();
+  @include input-text();

-    &-placeholder {
-        color: $Form-input-placeholderColor;
-        user-select: none;
-        position: absolute;
-        left: $Form-input-paddingX;
-        top: $Form-input-paddingY;
-        margin-top: 2 * $Form-input-borderWidth;
-        line-height: $Form-input-lineHeight;
+  &-placeholder {
+    color: $Form-input-placeholderColor;
+    user-select: none;
+    position: absolute;
+    left: $Form-input-paddingX;
+    top: $Form-input-paddingY;
+    margin-top: 2 * $Form-input-borderWidth;
+    line-height: $Form-input-lineHeight;
+  }
+
+  &-valueWrap {
+    flex-grow: 1;
+    line-height: 1;
+    white-space: nowrap;
+
+    > input {
+      display: inline-block;
+      width: auto;
+      vertical-align: middle;
    }
+  }

-    &-valueWrap {
-        flex-grow: 1;
-        line-height: 1;
-        white-space: nowrap;
+  &-input--withAC {
+    position: relative;
+    flex-wrap: wrap;

-        > input {
-            display: inline-block;
-            width: auto;
-            vertical-align: middle;
-        }
+    > input {
+      width: auto;
    }
+  }

-    &-input--withAC {
-        position: relative;
-        flex-wrap: wrap;
+  &-sugsPanel {
+    position: absolute;
+    background: $Form-select-menu-bg;
+    color: $Form-select-menu-color;
+    border: $Form-input-borderWidth solid $Form-input-onFocused-borderColor;
+    left: px2rem(-1px);
+    right: px2rem(-1px);
+    top: 100%;
+    z-index: 10;
+    height: auto;
+  }

-        > input {
-            width: auto;
-        }
+  &-tabs {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 11;
+    background: $IconPicker-tabs-bg;
+  }
+
+  &-tab {
+    display: inline-block;
+    padding: $IconPicker-tab-padding;
+    height: $IconPicker-tab-height;
+    line-height: $IconPicker-tab-lineHeight;
+    cursor: pointer;
+    text-align: center;
+
+    &.active {
+      background: $IconPicker-tab-onActive-bg;
    }
+  }

-    &-sugsPanel {
-        position: absolute;
-        background: $Form-select-menu-bg;
-        color: $Form-select-menu-color;
-        border: $Form-input-borderWidth solid $Form-input-onFocused-borderColor;
-        left: px2rem(-1px);
-        right: px2rem(-1px);
-        top: 100%;
-        z-index: 10;
-        height: auto;
-    }
-
-    &-tabs {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        z-index: 11;
-        background: $IconPicker-tabs-bg;
-    }
-
-    &-tab {
-        display: inline-block;
-        padding: $IconPicker-tab-padding;
-        height: $IconPicker-tab-height;
-        line-height: $IconPicker-tab-lineHeight;
-        cursor: pointer;
-        text-align: center;
-
-        &.active {
-            background: $IconPicker-tab-onActive-bg;
-        }
-    }
-
-    &-singleVendor {
-        padding: $IconPicker-singleVendor-padding;
-    }
-
-    &-multiVendor {
-        padding: $IconPicker-multiVendor-padding;
-    }
-
-    &-sugs {
-        position: relative;
-        max-height: $IconPicker-content-maxHeight;
-        overflow-y: scroll;
-    }
-
-    &-sugItem {
-        display: inline-block;
-        width: $IconPicker-sugItem-width;
-        height: $IconPicker-sugItem-height;
-        text-align: center;
-        line-height: $IconPicker-sugItem-lineHeight;
-        cursor: pointer;
-    }
-
-    &-value {
-        user-select: none;
-        line-height: $Form-input-lineHeight * $Form-input-fontSize;
-        vertical-align: middle;
-        display: inline-block;
-
-        > i {
-            display: inline-block;
-            margin-right: $IconPicker-selectedIcon-marginRight;
-        }
+  &-singleVendor {
+    padding: $IconPicker-singleVendor-padding;
+  }
+
+  &-multiVendor {
+    padding: $IconPicker-multiVendor-padding;
+  }
+
+  &-sugs {
+    position: relative;
+    max-height: $IconPicker-content-maxHeight;
+    overflow-y: scroll;
+  }
+
+  &-sugItem {
+    display: inline-block;
+    width: $IconPicker-sugItem-width;
+    height: $IconPicker-sugItem-height;
+    text-align: center;
+    line-height: $IconPicker-sugItem-lineHeight;
+    cursor: pointer;
+  }
+
+  &-value {
+    user-select: none;
+    line-height: $Form-input-lineHeight * $Form-input-fontSize;
+    vertical-align: middle;
+    display: inline-block;
+
+    > i {
+      display: inline-block;
+      margin-right: $IconPicker-selectedIcon-marginRight;
    }
+  }
 }
--- a/scss/components/form/_image.scss
+++ b/scss/components/form/_image.scss
@ -1,254 +1,254 @@
 .#{$ns}ImageControl {
+  position: relative;
+
+  &-dropzone {
+    outline: none;
+  }
+
+  &-addBtn {
+    margin: 0;
+    width: px2rem(120px);
+    height: px2rem(120px);
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    border: $borderWidth solid $borderColor;
+    cursor: pointer;
+
+    @include button-variant(
+      $ImageControl-addBtn-bg,
+      $ImageControl-addBtn-border,
+      $ImageControl-addBtn-color,
+      $ImageControl-addBtn-onHover-bg,
+      $ImageControl-addBtn-onHover-border,
+      $ImageControl-addBtn-onHover-color,
+      $ImageControl-addBtn-onActive-bg,
+      $ImageControl-addBtn-onActive-border,
+      $ImageControl-addBtn-onActive-color
+    );
+
+    > svg {
+      width: px2rem(50px);
+      height: px2rem(50px);
+      top: 0;
+    }
+
+    &.is-disabled {
+      pointer-events: none;
+      border: px2rem(1px) solid $ImageControl-addBtn-onDisabled-border;
+      background: $ImageControl-addBtn-onDisabled-bg;
+      color: $ImageControl-addBtn-onDisabled-color;
+    }
+  }
+
+  &-pasteTip {
+    pointer-events: none;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    position: absolute;
+    font-size: $Tooltip--attr-fontSize;
+    line-height: $Tooltip--attr-lineHeigt;
+    text-align: left;
+    white-space: nowrap;
+    background: $Tooltip--attr-bg;
+    border: $Tooltip--attr-borderWidth solid $Tooltip--attr-borderColor;
+    border-radius: $Tooltip--attr-borderRadius;
+    box-shadow: $Tooltip--attr-boxShadow;
+    left: 100%;
+    color: $Tooltip--attr-color;
+    padding: $Tooltip--attr-paddingY $Tooltip--attr-paddingX;
+    margin: 30px 0 0 $Tooltip--attr-gap;
+  }
+
+  &-dropzone:focus &-addBtn {
+    border-color: $ImageControl-addBtn-onHover-border;
+    background: $ImageControl-addBtn-onHover-bg;
+    color: $ImageControl-addBtn-onHover-color;
+  }
+
+  &-item {
+    border: $borderWidth solid $borderColor;
+    vertical-align: top;
+    padding: px2rem(5px);
+    display: inline-block;
+    margin-right: px2rem(15px);
+    margin-right: px2rem(15px);
+    position: relative;
+  }
+
+  &-itemImageWrap {
+    width: px2rem(108px);
+    height: px2rem(108px);
+    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwMCIgaGVpZ2h0PSI0MDAiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdHRlcm4gaWQ9ImdyaWQiIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgICAgICAgICAgIDxyZWN0IGZpbGw9ImJsYWNrIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIG9wYWNpdHk9IjAuMSIgLz4KICAgICAgICAgICAgPHJlY3QgZmlsbD0id2hpdGUiIHg9IjEwIiB5PSIwIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIC8+CiAgICAgICAgICAgIDxyZWN0IGZpbGw9ImJsYWNrIiB4PSIxMCIgeT0iMTAiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgb3BhY2l0eT0iMC4xIiAvPgogICAgICAgICAgICA8cmVjdCBmaWxsPSJ3aGl0ZSIgeD0iMCIgeT0iMTAiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgLz4KICAgICAgICA8L3BhdHRlcm4+CiAgICA8L2RlZnM+CiAgICA8cmVjdCBmaWxsPSJ1cmwoI2dyaWQpIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiAvPgo8L3N2Zz4=');
+    overflow: hidden;
    position: relative;

-    &-dropzone {
-        outline: none;
+    > img {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      height: 100%;
+      width: auto;
+      transform: translate(-50%, -50%);
+    }
+  }
+
+  &-itemOverlay {
+    background: rgba(0, 0, 0, 0.6);
+    position: absolute;
+    width: px2rem(108px);
+    height: px2rem(108px);
+    display: none;
+    top: px2rem(5px);
+    left: px2rem(5px);
+
+    justify-content: center;
+    align-items: center;
+    align-content: center;
+    flex-wrap: wrap;
+    color: #fff;
+
+    > div {
+      width: 100%;
+      text-align: center;
+      margin-bottom: 5px;
    }

-    &-addBtn {
-        margin: 0;
-        width: px2rem(120px);
-        height: px2rem(120px);
-        display: inline-flex;
-        justify-content: center;
-        align-items: center;
-        border: $borderWidth solid $borderColor;
-        cursor: pointer;
+    > a {
+      cursor: pointer;
+      color: #fff;
+      display: inline-block;
+      padding: 0 5px;
+      line-height: 1;
+      font-size: px2rem(16px);
+    }
+  }

-        @include button-variant($ImageControl-addBtn-bg,
-            $ImageControl-addBtn-border,
-            $ImageControl-addBtn-color,
-            $ImageControl-addBtn-onHover-bg,
-            $ImageControl-addBtn-onHover-border,
-            $ImageControl-addBtn-onHover-color,
-            $ImageControl-addBtn-onActive-bg,
-            $ImageControl-addBtn-onActive-border,
-            $ImageControl-addBtn-onActive-color);
+  &-item:hover &-itemOverlay {
+    display: flex;
+  }

-        >svg {
-            width: px2rem(50px);
-            height: px2rem(50px);
-            top: 0;
-        }
+  &-itemClear {
+    position: absolute;
+    cursor: pointer;

-        &.is-disabled {
-            pointer-events: none;
-            border: px2rem(1px) solid $ImageControl-addBtn-onDisabled-border;
-            background: $ImageControl-addBtn-onDisabled-bg;
-            color: $ImageControl-addBtn-onDisabled-color;
-        }
+    color: #999;
+    top: 5px;
+    right: 5px;
+    line-height: 1;
+
+    > svg {
+      top: 0;
+      width: 10px;
+      height: 10px;
+    }
+  }
+
+  &-itemInfo {
+    display: inline-flex;
+    width: 110px;
+    height: 110px;
+    justify-content: center;
+    align-items: center;
+    align-content: center;
+    flex-wrap: wrap;
+
+    > p {
+      width: 100%;
+      text-align: center;
+      font-size: 12px;
+      margin-bottom: 5px;
+    }
+  }
+
+  &-progress {
+    width: 70px;
+    height: 5px;
+    background: #ebebeb;
+  }
+
+  &-progressValue {
+    height: 5px;
+    display: block;
+    background: $info;
+    min-width: 10%;
+    transition: ease-out width 0.3s;
+  }
+
+  &-retryBtn {
+    margin: 0;
+    width: px2rem(108px);
+    height: px2rem(108px);
+    display: inline-flex;
+    cursor: pointer;
+    justify-content: center;
+    align-items: center;
+    align-content: center;
+    flex-wrap: wrap;
+    color: #666;
+
+    &:hover {
+      color: #333;
+      text-decoration: none;
    }

-    &-pasteTip {
-        pointer-events: none;
-        left: 0;
-        top: 50%;
-        transform: translateY(-50%);
-        position: absolute;
-        font-size: $Tooltip--attr-fontSize;
-        line-height: $Tooltip--attr-lineHeigt;
-        text-align: left;
-        white-space: nowrap;
-        background: $Tooltip--attr-bg;
-        border: $Tooltip--attr-borderWidth solid $Tooltip--attr-borderColor;
-        border-radius: $Tooltip--attr-borderRadius;
-        box-shadow: $Tooltip--attr-boxShadow;
-        left: 100%;
-        color: $Tooltip--attr-color;
-        padding: $Tooltip--attr-paddingY $Tooltip--attr-paddingX;
-        margin: 30px 0 0 $Tooltip--attr-gap;
+    > p {
+      width: 100%;
+      text-align: center;
+      color: $danger;
+      margin: 10px 0 0;
    }
+  }

-    &-dropzone:focus &-addBtn {
-        border-color: $ImageControl-addBtn-onHover-border;
-        background: $ImageControl-addBtn-onHover-bg;
-        color: $ImageControl-addBtn-onHover-color;
+  &-errorMsg {
+    color: $danger;
+    margin: 5px 0 0;
+  }
+
+  &-uploadBtn {
+    margin-top: 5px;
+  }
+
+  &-cropperWrapper {
+    position: relative;
+
+    img {
+      max-width: 100%;
+      max-height: 400px;
    }
+  }

-    &-item {
-        border: $borderWidth solid $borderColor;
-        vertical-align: top;
-        padding: px2rem(5px);
-        display: inline-block;
-        margin-right: px2rem(15px);
-        margin-right: px2rem(15px);
-        position: relative;
+  &-croperToolbar {
+    display: inline-flex;
+    width: 50px;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    flex-direction: column;
+    align-items: flex-end;
+
+    > a {
+      color: #fff;
+      padding: 2px 5px;
+      cursor: pointer;
+      font-size: 20px;
    }
+  }

-    &-itemImageWrap {
-        width: px2rem(108px);
-        height: px2rem(108px);
-        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwMCIgaGVpZ2h0PSI0MDAiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdHRlcm4gaWQ9ImdyaWQiIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgICAgICAgICAgIDxyZWN0IGZpbGw9ImJsYWNrIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIG9wYWNpdHk9IjAuMSIgLz4KICAgICAgICAgICAgPHJlY3QgZmlsbD0id2hpdGUiIHg9IjEwIiB5PSIwIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIC8+CiAgICAgICAgICAgIDxyZWN0IGZpbGw9ImJsYWNrIiB4PSIxMCIgeT0iMTAiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgb3BhY2l0eT0iMC4xIiAvPgogICAgICAgICAgICA8cmVjdCBmaWxsPSJ3aGl0ZSIgeD0iMCIgeT0iMTAiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgLz4KICAgICAgICA8L3BhdHRlcm4+CiAgICA8L2RlZnM+CiAgICA8cmVjdCBmaWxsPSJ1cmwoI2dyaWQpIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiAvPgo8L3N2Zz4=");
-        overflow: hidden;
-        position: relative;
+  &-acceptTip {
+    height: 120px;
+    color: #999;
+    border: 2px dashed $borderColor;

-        >img {
-            position: absolute;
-            left: 50%;
-            top: 50%;
-            height: 100%;
-            width: auto;
-            transform: translate(-50%, -50%);
-        }
-    }
+    // &.is-accept {
+    border-color: $info;
+    background: #f3f9fe;
+    // }

-    &-itemOverlay {
-        background: rgba(0, 0, 0, 0.6);
-        position: absolute;
-        width: px2rem(108px);
-        height: px2rem(108px);
-        display: none;
-        top: px2rem(5px);
-        left: px2rem(5px);
+    border-radius: $borderRadius;

-        justify-content: center;
-        align-items: center;
-        align-content: center;
-        flex-wrap: wrap;
-        color: #fff;
-
-        >div {
-            width: 100%;
-            text-align: center;
-            margin-bottom: 5px;
-        }
-
-        >a {
-            cursor: pointer;
-            color: #fff;
-            display: inline-block;
-            padding: 0 5px;
-            line-height: 1;
-            font-size: px2rem(16px);
-        }
-    }
-
-    &-item:hover &-itemOverlay {
-        display: flex;
-    }
-
-    &-itemClear {
-        position: absolute;
-        cursor: pointer;
-
-        color: #999;
-        top: 5px;
-        right: 5px;
-        line-height: 1;
-
-        >svg {
-            top: 0;
-            width: 10px;
-            height: 10px;
-        }
-    }
-
-    &-itemInfo {
-        display: inline-flex;
-        width: 110px;
-        height: 110px;
-        justify-content: center;
-        align-items: center;
-        align-content: center;
-        flex-wrap: wrap;
-
-        >p {
-            width: 100%;
-            text-align: center;
-            font-size: 12px;
-            margin-bottom: 5px;
-        }
-    }
-
-    &-progress {
-        width: 70px;
-        height: 5px;
-        background: #ebebeb;
-    }
-
-    &-progressValue {
-        height: 5px;
-        display: block;
-        background: $info;
-        min-width: 10%;
-        transition: ease-out width 0.3s;
-    }
-
-    &-retryBtn {
-        margin: 0;
-        width: px2rem(108px);
-        height: px2rem(108px);
-        display: inline-flex;
-        cursor: pointer;
-        justify-content: center;
-        align-items: center;
-        align-content: center;
-        flex-wrap: wrap;
-        color: #666;
-
-        &:hover {
-            color: #333;
-            text-decoration: none;
-        }
-
-
-
-        >p {
-            width: 100%;
-            text-align: center;
-            color: $danger;
-            margin: 10px 0 0;
-        }
-    }
-
-    &-errorMsg {
-        color: $danger;
-        margin: 5px 0 0;
-    }
-
-    &-uploadBtn {
-        margin-top: 5px;
-    }
-
-    &-cropperWrapper {
-        position: relative;
-
-        img {
-            max-width: 100%;
-            max-height: 400px;
-        }
-    }
-
-    &-croperToolbar {
-        display: inline-flex;
-        width: 50px;
-        position: absolute;
-        right: 0;
-        bottom: 0;
-        flex-direction: column;
-        align-items: flex-end;
-
-        >a {
-            color: #fff;
-            padding: 2px 5px;
-            cursor: pointer;
-            font-size: 20px;
-        }
-    }
-
-    &-acceptTip {
-        height: 120px;
-        color: #999;
-        border: 2px dashed $borderColor;
-
-        // &.is-accept {
-        border-color: $info;
-        background: #f3f9fe;
-        // }
-
-        border-radius: $borderRadius;
-
-        line-height: 120px;
-        text-align: center;
-    }
-}
+    line-height: 120px;
+    text-align: center;
+  }
+}
--- a/scss/components/form/_input-group.scss
+++ b/scss/components/form/_input-group.scss
@ -1,170 +1,173 @@
 .#{$ns}InputGroup {
+  display: inline-flex;
+  flex-wrap: nowrap;
+
+  &.#{$ns}Form-control--sizeXs,
+  &.#{$ns}Form-control--sizeSm,
+  &.#{$ns}Form-control--sizeMd,
+  &.#{$ns}Form-control--sizeLg {
    display: inline-flex;
-    flex-wrap: nowrap;
+  }

-    &.#{$ns}Form-control--sizeXs,
-    &.#{$ns}Form-control--sizeSm,
-    &.#{$ns}Form-control--sizeMd,
-    &.#{$ns}Form-control--sizeLg {
-        display: inline-flex;
+  &-addOn,
+  & .#{$ns}Form-control {
+    display: inline-block;
+    white-space: nowrap;
+  }
+
+  &-addOn {
+    background: $InputGroup-addOn-bg;
+    border: $InputGroup-addOn-borderWidth solid $InputGroup-addOn-borderColor;
+    line-height: $InputGroup-height - $InputGroup-paddingY * 2 -
+      $InputGroup-addOn-borderWidth * 2;
+    height: $InputGroup-height;
+    box-sizing: border-box;
+    padding: $InputGroup-paddingY $InputGroup-paddingX;
+
+    &:not(:last-child) {
+      border-right: 0;
    }

-    &-addOn,
-    & .#{$ns}Form-control {
-        display: inline-block;
-        white-space: nowrap;
+    &:first-child {
+      @if $InputGroup-addOn-borderRadius {
+        border-top-left-radius: $InputGroup-addOn-borderRadius;
+        border-bottom-left-radius: $InputGroup-addOn-borderRadius;
+      }
    }

-    &-addOn {
-        background: $InputGroup-addOn-bg;
-        border: $InputGroup-addOn-borderWidth solid $InputGroup-addOn-borderColor;
-        line-height: $InputGroup-height - $InputGroup-paddingY * 2 - $InputGroup-addOn-borderWidth * 2;
-        height: $InputGroup-height;
-        box-sizing: border-box;
-        padding: $InputGroup-paddingY $InputGroup-paddingX;
+    &:last-child {
+      @if $InputGroup-addOn-borderRadius {
+        border-top-right-radius: $InputGroup-addOn-borderRadius;
+        border-bottom-right-radius: $InputGroup-addOn-borderRadius;
+      }
+    }
+  }

-        &:not(:last-child) {
-            border-right: 0;
-        }
-
-        &:first-child {
-            @if $InputGroup-addOn-borderRadius {
-                border-top-left-radius: $InputGroup-addOn-borderRadius;
-                border-bottom-left-radius: $InputGroup-addOn-borderRadius;
-            }
-        }
-
-        &:last-child {
-            @if $InputGroup-addOn-borderRadius {
-                border-top-right-radius: $InputGroup-addOn-borderRadius;
-                border-bottom-right-radius: $InputGroup-addOn-borderRadius;
-            }
-        }
+  &-btn {
+    .#{$ns}Button {
+      border-radius: 0;
+      border: $InputGroup-button-borderWidth solid
+        $InputGroup-button-borderColor;
    }

-    &-btn {
-        .#{$ns}Button {
-            border-radius: 0;
-            border: $InputGroup-button-borderWidth solid $InputGroup-button-borderColor;
-        }
-
-        &:not(:last-child) .#{$ns}Button {
-            border-right: 0;
-        }
-
-        &:first-child .#{$ns}Button {
-            @if $InputGroup-button-borderRadius {
-                border-top-left-radius: $InputGroup-button-borderRadius;
-                border-bottom-left-radius: $InputGroup-button-borderRadius;
-            }
-        }
-
-        &:last-child .#{$ns}Button {
-            @if $InputGroup-button-borderRadius {
-                border-top-right-radius: $InputGroup-button-borderRadius;
-                border-bottom-right-radius: $InputGroup-button-borderRadius;
-            }
-        }
+    &:not(:last-child) .#{$ns}Button {
+      border-right: 0;
    }

-    .#{$ns}TextControl-input {
-        flex-basis: 0;
-        flex-grow: 1;
-        display: inline-flex;
-
-        &:not(:first-child) {
-            border-top-left-radius: 0;
-            border-bottom-left-radius: 0;
-        }
-
-        &:not(:last-child) {
-            border-right-width: 0;
-            border-top-right-radius: 0;
-            border-bottom-right-radius: 0;
-        }
+    &:first-child .#{$ns}Button {
+      @if $InputGroup-button-borderRadius {
+        border-top-left-radius: $InputGroup-button-borderRadius;
+        border-bottom-left-radius: $InputGroup-button-borderRadius;
+      }
    }

-    .#{$ns}SelectControl {
-        @if $InputGroup-select-borderWidth {
-            .#{$ns}Select {
-                background-color: $InputGroup-select-bg;
-                border: $InputGroup-select-borderWidth solid $InputGroup-select-borderColor;
+    &:last-child .#{$ns}Button {
+      @if $InputGroup-button-borderRadius {
+        border-top-right-radius: $InputGroup-button-borderRadius;
+        border-bottom-right-radius: $InputGroup-button-borderRadius;
+      }
+    }
+  }

-                @if $InputGroup-select-color !=$Form-select-color {
-                    color: $InputGroup-select-color;
-                }
-            }
+  .#{$ns}TextControl-input {
+    flex-basis: 0;
+    flex-grow: 1;
+    display: inline-flex;

-            &:not(:last-child) .#{$ns}Select {
-                border-right: 0;
-            }
-
-            &:first-child .#{$ns}Select {
-                @if $InputGroup-select-borderRadius {
-                    border-top-left-radius: $InputGroup-select-borderRadius;
-                    border-bottom-left-radius: $InputGroup-select-borderRadius;
-                }
-            }
-
-            &:last-child .#{$ns}Select {
-                @if $InputGroup-select-borderRadius {
-                    border-top-right-radius: $InputGroup-select-borderRadius;
-                    border-bottom-right-radius: $InputGroup-select-borderRadius;
-                }
-            }
-        }
-
-        &:not(:first-child) .#{$ns}Select {
-            border-top-left-radius: 0;
-            border-bottom-left-radius: 0;
-        }
-
-        &:not(:last-child) .#{$ns}Select {
-            border-right-width: 0;
-            border-top-right-radius: 0;
-            border-bottom-right-radius: 0;
-        }
+    &:not(:first-child) {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
    }

-    @if $InputGroup-select-arrowColor !=$Form-select-caret-iconColor {
-        .#{$ns}Select-arrow {
-            color: $InputGroup-select-arrowColor;
+    &:not(:last-child) {
+      border-right-width: 0;
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+
+  .#{$ns}SelectControl {
+    @if $InputGroup-select-borderWidth {
+      .#{$ns}Select {
+        background-color: $InputGroup-select-bg;
+        border: $InputGroup-select-borderWidth
+          solid
+          $InputGroup-select-borderColor;
+
+        @if $InputGroup-select-color !=$Form-select-color {
+          color: $InputGroup-select-color;
        }
+      }
+
+      &:not(:last-child) .#{$ns}Select {
+        border-right: 0;
+      }
+
+      &:first-child .#{$ns}Select {
+        @if $InputGroup-select-borderRadius {
+          border-top-left-radius: $InputGroup-select-borderRadius;
+          border-bottom-left-radius: $InputGroup-select-borderRadius;
+        }
+      }
+
+      &:last-child .#{$ns}Select {
+        @if $InputGroup-select-borderRadius {
+          border-top-right-radius: $InputGroup-select-borderRadius;
+          border-bottom-right-radius: $InputGroup-select-borderRadius;
+        }
+      }
    }

-    &.is-focused {
-
-        .#{$ns}InputGroup-addOn,
-        .#{$ns}TextControl-input,
-        .#{$ns}Select,
-        .#{$ns}InputGroup-btn .#{$ns}Button {
-            border-color: $InputGroup-addOn-onFocused-borderColor;
-        }
-
-        @if $InputGroup-select-onFocused-bg !=$InputGroup-select-bg {
-            .#{$ns}Select {
-                background-color: $InputGroup-select-onFocused-bg;
-            }
-        }
-
-        @if $InputGroup-select-onFocused-color !=$InputGroup-select-color {
-            .#{$ns}Select {
-                color: $InputGroup-select-onFocused-color;
-            }
-        }
-
-        @if $InputGroup-select-onFocused-arrowColor !=$Form-select-caret-iconColor {
-            .#{$ns}Select-arrow {
-                color: $InputGroup-select-onFocused-arrowColor;
-            }
-        }
-
-        .#{$ns}InputGroup-addOn {
-            color: $primary;
-        }
+    &:not(:first-child) .#{$ns}Select {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
    }
+
+    &:not(:last-child) .#{$ns}Select {
+      border-right-width: 0;
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+
+  @if $InputGroup-select-arrowColor !=$Form-select-caret-iconColor {
+    .#{$ns}Select-arrow {
+      color: $InputGroup-select-arrowColor;
+    }
+  }
+
+  &.is-focused {
+    .#{$ns}InputGroup-addOn,
+    .#{$ns}TextControl-input,
+    .#{$ns}Select,
+    .#{$ns}InputGroup-btn .#{$ns}Button {
+      border-color: $InputGroup-addOn-onFocused-borderColor;
+    }
+
+    @if $InputGroup-select-onFocused-bg !=$InputGroup-select-bg {
+      .#{$ns}Select {
+        background-color: $InputGroup-select-onFocused-bg;
+      }
+    }
+
+    @if $InputGroup-select-onFocused-color !=$InputGroup-select-color {
+      .#{$ns}Select {
+        color: $InputGroup-select-onFocused-color;
+      }
+    }
+
+    @if $InputGroup-select-onFocused-arrowColor !=$Form-select-caret-iconColor {
+      .#{$ns}Select-arrow {
+        color: $InputGroup-select-onFocused-arrowColor;
+      }
+    }
+
+    .#{$ns}InputGroup-addOn {
+      color: $primary;
+    }
+  }
 }

 .#{$ns}InputGroup:not(.is-inline) {
-    display: flex;
-}
+  display: flex;
+}
--- a/scss/components/form/_list.scss
+++ b/scss/components/form/_list.scss
@ -1,123 +1,122 @@
 .#{$ns}ListControl {
-    &-items {
-        display: block;
-        margin: -$ListControl-gutterWidth/2;
+  &-items {
+    display: block;
+    margin: -$ListControl-gutterWidth/2;

-        &:empty {
-            display: none;
-        }
+    &:empty {
+      display: none;
+    }
+  }
+
+  &-item {
+    position: relative;
+    user-select: none;
+    font-size: $ListControl-fontSize;
+    display: inline-block;
+    vertical-align: middle;
+    margin: $ListControl-gutterWidth/2;
+    border: $ListControl-item-borderWidth solid $ListControl-item-borderColor;
+    background-color: $ListControl-item-bg;
+    padding: $ListControl-item-paddingY $ListControl-item-paddingX;
+    color: $ListControl-item-color;
+    transition: $ListControl-item-transition;
+    max-width: px2rem(200px) + 2 * $ListControl-item-paddingX;
+
+    &:not(.is-disabled) {
+      cursor: pointer;
    }

-    &-item {
-        position: relative;
-        user-select: none;
-        font-size: $ListControl-fontSize;
-        display: inline-block;
-        vertical-align: middle;
-        margin: $ListControl-gutterWidth/2;
-        border: $ListControl-item-borderWidth solid
-            $ListControl-item-borderColor;
-        background-color: $ListControl-item-bg;
-        padding: $ListControl-item-paddingY $ListControl-item-paddingX;
-        color: $ListControl-item-color;
-        transition: $ListControl-item-transition;
-        max-width: px2rem(200px) + 2 * $ListControl-item-paddingX;
-
-        &:not(.is-disabled) {
-            cursor: pointer;
-        }
-
-        .b-inherit {
-            border-color: $ListControl-item-color;
-        }
-
-        @include hover {
-            background-color: $ListControl-item-onHover-bg;
-            border-color: $ListControl-item-onHover-borderColor;
-            color: $ListControl-item-onHover-color;
-
-            .b-inherit {
-                border-color: $ListControl-item-onHover-borderColor;
-            }
-        }
-
-        &.is-disabled {
-            pointer-events: none;
-            opacity: $ListControl-item-onDisabled-opacity;
-            border-color: $ListControl-item-onDisabled-borderColor;
-
-            @if variable-exists("ListControl-item-onDisabled-bg") {
-                background-color: $ListControl-item-onDisabled-bg;
-            }
-
-            @if variable-exists("ListControl-item-onDisabled-color") {
-                color: $ListControl-item-onDisabled-color;
-            }
-
-            .b-inherit {
-                border-color: $ListControl-item-onDisabled-borderColor;
-            }
-        }
-
-        &:hover:active,
-        &.is-active {
-            background-color: $ListControl-item-onActive-bg;
-            border-color: $ListControl-item-onActive-borderColor;
-            color: $ListControl-item-onActive-color;
-
-            @if variable-exists("ListControl-item-onActive-onHover-bg") {
-                &:hover {
-                    background-color: $ListControl-item-onActive-onHover-bg;
-                }
-            }
-
-            .b-inherit {
-                border-color: $ListControl-item-onActive-color;
-            }
-
-            &:before {
-                content: "";
-                position: absolute;
-                width: px2rem(14px);
-                height: px2rem(14px);
-                background-color: $ListControl-item-onActive-before-bg;
-                right: 0;
-                bottom: 0;
-            }
-
-            &:after {
-                content: "";
-                position: absolute;
-                width: px2rem(10px);
-                height: px2rem(5px);
-                border-color: $ListControl-item-onActive-after-borderColor;
-                border-style: solid;
-                border-width: 0 0 px2rem(2px) px2rem(2px);
-                right: px2rem(1px);
-                bottom: px2rem(5px);
-                transform: rotate(-40deg);
-            }
-        }
+    .b-inherit {
+      border-color: $ListControl-item-color;
    }

-    &-itemImage {
-        margin: $ListControl-item-paddingY * -1 $ListControl-item-paddingX * -1;
+    @include hover {
+      background-color: $ListControl-item-onHover-bg;
+      border-color: $ListControl-item-onHover-borderColor;
+      color: $ListControl-item-onHover-color;

-        img {
-            display: block;
-            max-width: 100%;
+      .b-inherit {
+        border-color: $ListControl-item-onHover-borderColor;
+      }
+    }
+
+    &.is-disabled {
+      pointer-events: none;
+      opacity: $ListControl-item-onDisabled-opacity;
+      border-color: $ListControl-item-onDisabled-borderColor;
+
+      @if variable-exists('ListControl-item-onDisabled-bg') {
+        background-color: $ListControl-item-onDisabled-bg;
+      }
+
+      @if variable-exists('ListControl-item-onDisabled-color') {
+        color: $ListControl-item-onDisabled-color;
+      }
+
+      .b-inherit {
+        border-color: $ListControl-item-onDisabled-borderColor;
+      }
+    }
+
+    &:hover:active,
+    &.is-active {
+      background-color: $ListControl-item-onActive-bg;
+      border-color: $ListControl-item-onActive-borderColor;
+      color: $ListControl-item-onActive-color;
+
+      @if variable-exists('ListControl-item-onActive-onHover-bg') {
+        &:hover {
+          background-color: $ListControl-item-onActive-onHover-bg;
        }
-    }
+      }

-    &-itemLabel {
-        text-align: center;
-    }
+      .b-inherit {
+        border-color: $ListControl-item-onActive-color;
+      }

-    &-itemImage + &-itemLabel {
-        margin-top: $ListControl-item-paddingY;
-    }
+      &:before {
+        content: '';
+        position: absolute;
+        width: px2rem(14px);
+        height: px2rem(14px);
+        background-color: $ListControl-item-onActive-before-bg;
+        right: 0;
+        bottom: 0;
+      }

-    &-placeholder {
-        color: $Form-input-placeholderColor;
+      &:after {
+        content: '';
+        position: absolute;
+        width: px2rem(10px);
+        height: px2rem(5px);
+        border-color: $ListControl-item-onActive-after-borderColor;
+        border-style: solid;
+        border-width: 0 0 px2rem(2px) px2rem(2px);
+        right: px2rem(1px);
+        bottom: px2rem(5px);
+        transform: rotate(-40deg);
+      }
    }
+  }
+
+  &-itemImage {
+    margin: $ListControl-item-paddingY * -1 $ListControl-item-paddingX * -1;
+
+    img {
+      display: block;
+      max-width: 100%;
+    }
+  }
+
+  &-itemLabel {
+    text-align: center;
+  }
+
+  &-itemImage + &-itemLabel {
+    margin-top: $ListControl-item-paddingY;
+  }
+
+  &-placeholder {
+    color: $Form-input-placeholderColor;
+  }
 }
--- a/scss/components/form/_matrix.scss
+++ b/scss/components/form/_matrix.scss
@ -1,5 +1,5 @@
 .#{$ns}MatrixControl {
-    &-error {
-        margin-bottom: 0;
-    }
+  &-error {
+    margin-bottom: 0;
+  }
 }
--- a/scss/components/form/_nested-select.scss
+++ b/scss/components/form/_nested-select.scss
@ -1,137 +1,138 @@
 .#{$ns}NestedSelect {
-    display: inline-flex;
-    vertical-align: middle;
-    outline: none;
+  display: inline-flex;
+  vertical-align: middle;
+  outline: none;
+  position: relative;
+  border: $Form-select-borderWidth solid $Form-select-borderColor;
+  background: $Form-select-bg;
+  border-radius: $Form-select-borderRadius;
+  height: $Form-selectOption-height;
+  $paddingY: (
+      $Form-selectOption-height - $Form-input-lineHeight * $Form-input-fontSize -
+        $Form-select-borderWidth * 2
+    )/2;
+  padding: $paddingY 0 $paddingY $Form-select-paddingX;
+  cursor: pointer;
+  color: $Form-select-color;
+
+  &.is-disabled {
+    color: $text--muted-color;
+    background: $Form-input-onDisabled-bg;
+    border-color: $Form-input-onDisabled-borderColor;
+  }
+
+  &.is-focused,
+  &.is-opened {
+    border-color: $Form-input-onFocused-borderColor;
+    // border-bottom: 0;
+
+    @if ($Form-select-onFocused-color !=$Form-select-color) {
+      color: $Form-select-onFocused-color;
+    }
+  }
+
+  &.is-opened {
+    .#{$ns}Select-arrow:before {
+      transform: rotate(180deg);
+    }
+  }
+
+  &:not(.is-disabled):hover {
+    background: $Form-select-onHover-bg;
+  }
+
+  &-placeholder {
+    color: $Form-select-placeholderColor;
+    line-height: $Form-input-lineHeight;
+  }
+
+  &-valueWrap {
+    user-select: none;
    position: relative;
-    border: $Form-select-borderWidth solid $Form-select-borderColor;
-    background: $Form-select-bg;
-    border-radius: $Form-select-borderRadius;
-    height: $Form-selectOption-height;
-    $paddingY: (
-            $Form-selectOption-height - $Form-input-lineHeight *
-                $Form-input-fontSize - $Form-select-borderWidth * 2
-        )/2;
-    padding: $paddingY 0 $paddingY $Form-select-paddingX;
+    flex-grow: 1;
+  }
+
+  &-clear {
+    padding: px2rem(3px);
    cursor: pointer;
-    color: $Form-select-color;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    z-index: 2;

-    &.is-disabled {
-        color: $text--muted-color;
-        background: $Form-input-onDisabled-bg;
-        border-color: $Form-input-onDisabled-borderColor;
+    svg {
+      fill: $Form-input-iconColor;
+      width: px2rem(10px);
+      height: px2rem(10px);
    }

-    &.is-focused,
-    &.is-opened {
-        border-color: $Form-input-onFocused-borderColor;
-        // border-bottom: 0;
-
-        @if ($Form-select-onFocused-color !=$Form-select-color) {
-            color: $Form-select-onFocused-color;
-        }
+    &:hover svg {
+      fill: darken($color: $Form-input-iconColor, $amount: 20%);
    }
+  }

-    &.is-opened {
-        .#{$ns}Select-arrow:before {
-            transform: rotate(180deg);
-        }
+  &-optionArrowRight {
+    display: inline-block;
+    position: absolute;
+    right: px2rem(10px);
+
+    svg {
+      width: px2rem(12px);
+      height: px2rem(12px);
+      fill: $Form-input-iconColor;
    }
+  }

-    &:not(.is-disabled):hover {
-        background: $Form-select-onHover-bg;
-    }
+  &-menuOuter,
+  &-childrenOuter {
+    z-index: 10;
+    position: absolute;
+    background: $Form-select-menu-bg;
+    color: $Form-select-menu-color;
+    border: $Form-select-outer-borderWidth solid
+      $Form-input-onFocused-borderColor;
+    box-shadow: $Form-select-outer-boxShadow;

-    &-placeholder {
-        color: $Form-select-placeholderColor;
-        line-height: $Form-input-lineHeight;
-    }
+    .#{$ns}NestedSelect-option {
+      position: relative;
+      padding-left: px2rem(10px);
+      height: $Form-input-height;
+      line-height: $Form-input-height;
+      cursor: pointer;

-    &-valueWrap {
-        user-select: none;
-        position: relative;
-        flex-grow: 1;
-    }
+      &.is-active {
+        color: $Form-select-menu-onActive-color;
+        background-color: $Form-select-menu-onActive-bg;
+      }

-    &-clear {
-        padding: px2rem(3px);
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        position: relative;
-        z-index: 2;
+      &:hover {
+        color: $Form-select-menu-onHover-color;
+        background-color: $Form-select-menu-onHover-bg;
+      }

-        svg {
-            fill: $Form-input-iconColor;
-            width: px2rem(10px);
-            height: px2rem(10px);
-        }
+      &:hover > .#{$ns}NestedSelect-childrenOuter {
+        display: block;
+      }

-        &:hover svg {
-            fill: darken($color: $Form-input-iconColor, $amount: 20%);
-        }
-    }
-
-    &-optionArrowRight {
+      .#{$ns}Checkbox {
        display: inline-block;
-        position: absolute;
-        right: px2rem(10px);
+        padding-top: 0;
+      }

-        svg {
-            width: px2rem(12px);
-            height: px2rem(12px);
-            fill: $Form-input-iconColor;
-        }
+      &.checkall {
+        border-bottom: px2rem(1px) solid #eceff8;
+      }
    }
+  }

-    &-menuOuter,
-    &-childrenOuter {
-        z-index: 10;
-        position: absolute;
-        background: $Form-select-menu-bg;
-        color: $Form-select-menu-color;
-        border: $Form-select-outer-borderWidth solid $Form-input-onFocused-borderColor;
-        box-shadow: $Form-select-outer-boxShadow;
-
-        .#{$ns}NestedSelect-option {
-            position: relative;
-            padding-left: px2rem(10px);
-            height: $Form-input-height;
-            line-height: $Form-input-height;
-            cursor: pointer;
-
-            &.is-active {
-                color: $Form-select-menu-onActive-color;
-                background-color: $Form-select-menu-onActive-bg;
-            }
-
-            &:hover {
-                color: $Form-select-menu-onHover-color;
-                background-color: $Form-select-menu-onHover-bg;
-            }
-
-            &:hover > .#{$ns}NestedSelect-childrenOuter {
-                display: block;
-            }
-
-            .#{$ns}Checkbox {
-                display: inline-block;
-                padding-top: 0;
-            }
-
-            &.checkall {
-                border-bottom: px2rem(1px) solid #eceff8;
-            }
-        }
-    }
-
-    &-childrenOuter {
-        display: none;
-        position: relative;
-        width: 100%;
-        left: 100%;
-        transform: translateY(-$Form-input-height);
-        padding: 0;
-        margin: 0;
-    }
+  &-childrenOuter {
+    display: none;
+    position: relative;
+    width: 100%;
+    left: 100%;
+    transform: translateY(-$Form-input-height);
+    padding: 0;
+    margin: 0;
+  }
 }
--- a/scss/components/form/_number.scss
+++ b/scss/components/form/_number.scss
@ -1,177 +1,177 @@
 .#{$ns}Number {
-    margin: 0;
-    padding: 0;
-    line-height: $Form-input-height;
-    font-size: $Form-input-fontSize;
-    height: $Form-input-height;
+  margin: 0;
+  padding: 0;
+  line-height: $Form-input-height;
+  font-size: $Form-input-fontSize;
+  height: $Form-input-height;
+  display: inline-block;
+  vertical-align: middle;
+  background-color: $Number-bg;
+  border: $Number-borderWidth solid $Number-borderColor;
+  border-radius: $Number-borderRadius;
+
+  &-focused {
+    border-color: $Form-input-onFocused-borderColor;
+    box-shadow: $Form-input-boxShadow;
+  }
+
+  &-handler {
+    text-align: center;
+    overflow: hidden;
+    display: block;
+    touch-action: none;
+
+    &-active {
+      background: #ddd;
+    }
+  }
+
+  &-handler-up-inner,
+  &-handler-down-inner {
+    user-select: none;
+    -webkit-user-select: none;
    display: inline-block;
-    vertical-align: middle;
-    background-color: $Number-bg;
-    border: $Number-borderWidth solid $Number-borderColor;
-    border-radius: $Number-borderRadius;
+  }

-    &-focused {
-        border-color: $Form-input-onFocused-borderColor;
-        box-shadow: $Form-input-boxShadow;
+  &:hover {
+    border-color: $Form-input-onFocused-borderColor;
+
+    .#{$ns}Number-handler-up,
+    .#{$ns}Number-handler-wrap {
+      border-color: $Form-input-onFocused-borderColor;
    }
+  }

-    &-handler {
-        text-align: center;
-        overflow: hidden;
-        display: block;
-        touch-action: none;
+  &-disabled:hover {
+    border-color: $Form-input-borderColor;

-        &-active {
-            background: #ddd;
-        }
+    .#{$ns}Number-handler-up,
+    .#{$ns}Number-handler-wrap {
+      border-color: $Form-input-borderColor;
    }
+  }

-    &-handler-up-inner,
-    &-handler-down-inner {
-        user-select: none;
-        -webkit-user-select: none;
-        display: inline-block;
-    }
+  &-input-wrap {
+    overflow: hidden;
+    height: 100%;
+  }
+
+  &-input {
+    width: 100%;
+    background-color: transparent;
+    text-align: left;
+    vertical-align: top;
+    outline: 0;
+    -moz-appearance: textfield;
+    line-height: $Form-input-height - $Number-borderWidth * 2;
+    height: 100%;
+    transition: all 0.3s ease;
+    border: 0;
+    border-radius: $Form-input-borderRadius;
+    padding: 0 $Form-input-paddingX;
+  }
+
+  &-handler {
+    background-color: $Number-handler-bg;
+    color: $Number-handler-color;
+    font-family: $Number-handler-fontFamily;
+    font-size: $Number-handler-fontSize;

    &:hover {
-        border-color: $Form-input-onFocused-borderColor;
-
-        .#{$ns}Number-handler-up,
-        .#{$ns}Number-handler-wrap {
-            border-color: $Form-input-onFocused-borderColor;
-        }
+      background-color: $Number-handler-onHover-bg;
+      color: $Number-handler-onHover-color;
    }

-    &-disabled:hover {
+    &:hover:active {
+      background-color: $Number-handler-onActive-bg;
+    }
+  }
+
+  &-handler-up {
+    &-inner {
+      transform: $Number-handler--up-transform;
+
+      &:after {
+        content: $Number-handler--up-content;
+      }
+    }
+  }
+
+  &-handler-down {
+    &-inner {
+      &:after {
+        content: $Number-handler--down-content;
+      }
+    }
+  }
+
+  // @if $Number-handler-mode==vertical {
+  &-handler-wrap {
+    float: right;
+    border-left: px2rem(1px) solid $Form-input-borderColor;
+    width: $Number-handler-width;
+    height: 100%;
+  }
+
+  &-handler {
+    line-height: ($Form-input-height - px2rem(6px)) / 2;
+    height: ($Form-input-height - $Number-borderWidth * 2) / 2;
+  }
+
+  &-handler-up {
+    border-bottom: $Number-handler-borderBottom;
+    padding-top: px2rem(1px);
+  }
+
+  // } @else {
+  //     position: relative;
+
+  //     &-input {
+  //         text-align: center;
+  //     }
+
+  //     &-handler-up,
+  //     &-handler-down {
+  //         position: absolute;
+  //         width: $Number-handler-width;
+  //         height: 100%;
+  //         top: 0;
+  //     }
+
+  //     &-handler-down {
+  //         left: 0;
+  //     }
+
+  //     &-handler-up {
+  //         right: 0;
+  //     }
+  // }
+
+  &-handler-down-disabled,
+  &-handler-up-disabled {
+    background-color: $Number-handler-onDisabled-bg;
+    pointer-events: none;
+    color: $Number-handler-onDisabled-color;
+  }
+
+  &-disabled {
+    .#{$ns}Number-input {
+      opacity: 0.72;
+      cursor: not-allowed;
+      background-color: $Number-onDisabled-bg;
+    }
+
+    .#{$ns}Number-handler {
+      opacity: 0.72;
+
+      &:hover {
+        color: $text--muted-color;
        border-color: $Form-input-borderColor;
-
-        .#{$ns}Number-handler-up,
-        .#{$ns}Number-handler-wrap {
-            border-color: $Form-input-borderColor;
-        }
-    }
-
-    &-input-wrap {
-        overflow: hidden;
-        height: 100%;
-    }
-
-    &-input {
-        width: 100%;
-        background-color: transparent;
-        text-align: left;
-        vertical-align: top;
-        outline: 0;
-        -moz-appearance: textfield;
-        line-height: $Form-input-height - $Number-borderWidth * 2;
-        height: 100%;
-        transition: all 0.3s ease;
-        border: 0;
-        border-radius: $Form-input-borderRadius;
-        padding: 0 $Form-input-paddingX;
-    }
-
-    &-handler {
-        background-color: $Number-handler-bg;
-        color: $Number-handler-color;
-        font-family: $Number-handler-fontFamily;
-        font-size: $Number-handler-fontSize;
-
-        &:hover {
-            background-color: $Number-handler-onHover-bg;
-            color: $Number-handler-onHover-color;
-        }
-
-        &:hover:active {
-            background-color: $Number-handler-onActive-bg;
-        }
-    }
-
-    &-handler-up {
-        &-inner {
-            transform: $Number-handler--up-transform;
-
-            &:after {
-                content: $Number-handler--up-content;
-            }
-        }
-    }
-
-    &-handler-down {
-        &-inner {
-            &:after {
-                content: $Number-handler--down-content;
-            }
-        }
-    }
-
-    // @if $Number-handler-mode==vertical {
-    &-handler-wrap {
-        float: right;
-        border-left: px2rem(1px) solid $Form-input-borderColor;
-        width: $Number-handler-width;
-        height: 100%;
-    }
-
-    &-handler {
-        line-height: ($Form-input-height - px2rem(6px)) / 2;
-        height: ($Form-input-height - $Number-borderWidth * 2) / 2;
-    }
-
-    &-handler-up {
-        border-bottom: $Number-handler-borderBottom;
-        padding-top: px2rem(1px);
-    }
-
-    // } @else {
-    //     position: relative;
-
-    //     &-input {
-    //         text-align: center;
-    //     }
-
-    //     &-handler-up,
-    //     &-handler-down {
-    //         position: absolute;
-    //         width: $Number-handler-width;
-    //         height: 100%;
-    //         top: 0;
-    //     }
-
-    //     &-handler-down {
-    //         left: 0;
-    //     }
-
-    //     &-handler-up {
-    //         right: 0;
-    //     }
-    // }
-
-    &-handler-down-disabled,
-    &-handler-up-disabled {
-        background-color: $Number-handler-onDisabled-bg;
-        pointer-events: none;
-        color: $Number-handler-onDisabled-color;
-    }
-
-    &-disabled {
-        .#{$ns}Number-input {
-            opacity: 0.72;
-            cursor: not-allowed;
-            background-color: $Number-onDisabled-bg;
-        }
-
-        .#{$ns}Number-handler {
-            opacity: 0.72;
-
-            &:hover {
-                color: $text--muted-color;
-                border-color: $Form-input-borderColor;
-            }
-        }
+      }
    }
+  }
 }

 .#{$ns}NumberControl:not(.is-inline) > .#{$ns}Number {
-    display: block;
+  display: block;
 }
--- a/scss/components/form/_picker.scss
+++ b/scss/components/form/_picker.scss
@ -1,113 +1,112 @@
 .#{$ns}Picker {
-    @include input-text();
-    outline: none;
+  @include input-text();
+  outline: none;

-    &.is-focus > &-input {
-        border-color: $Form-input-onFocused-borderColor;
-        box-shadow: $Form-input-boxShadow;
+  &.is-focus > &-input {
+    border-color: $Form-input-onFocused-borderColor;
+    box-shadow: $Form-input-boxShadow;

-        @if $Form-input-onFocused-bg !=$Form-input-bg {
-            background-color: $Form-input-onFocused-bg;
-        }
+    @if $Form-input-onFocused-bg !=$Form-input-bg {
+      background-color: $Form-input-onFocused-bg;
+    }
+  }
+
+  &-placeholder {
+    color: $Form-input-placeholderColor;
+    user-select: none;
+    position: absolute;
+    // margin-top: 2 * $Form-input-borderWidth;
+    line-height: $Form-input-lineHeight;
+  }
+
+  &-input {
+    min-height: $Form-input-height;
+    height: auto;
+  }
+
+  .#{$ns}Picker-values {
+    display: inline;
+  }
+
+  &-valueWrap {
+    flex-grow: 1;
+    position: relative;
+
+    > input {
+      width: 1rem;
+      display: inline-block;
+    }
+  }
+
+  .#{$ns}Picker-valueWrap {
+    margin-bottom: -$gap-xs;
+    line-height: 1;
+  }
+
+  .#{$ns}Picker-value {
+    cursor: pointer;
+    user-select: none;
+    white-space: nowrap;
+    vertical-align: middle;
+    line-height: $Form-input-lineHeight * $Form-input-fontSize - px2rem(2px);
+    display: inline-block;
+    font-size: $Form-selectValue-fontSize;
+    color: $Form-selectValue-color;
+    background: $Form-selectValue-bg;
+    border: px2rem(1px) solid $Form-selectValue-borderColor;
+    border-radius: 2px;
+    margin-right: $gap-xs;
+    margin-bottom: $gap-xs;
+
+    &.is-disabled {
+      pointer-events: none;
+      opacity: $Button-onDisabled-opacity;
+    }
+  }
+
+  .#{$ns}Picker-valueIcon {
+    cursor: pointer;
+    border-right: px2rem(1px) solid $Form-selectValue-borderColor;
+    padding: 1px 5px;
+
+    &:hover {
+      background-color: darken($Form-selectValue-bg, 5%);
+    }
+  }
+
+  .#{$ns}Picker-valueLabel {
+    padding: 0 $gap-xs;
+  }
+
+  &-btn {
+    cursor: pointer;
+    color: $Picker-iconColor;
+
+    &:hover {
+      color: $Picker-onHover-iconColor;
    }

-    &-placeholder {
-        color: $Form-input-placeholderColor;
-        user-select: none;
-        position: absolute;
-        // margin-top: 2 * $Form-input-borderWidth;
-        line-height: $Form-input-lineHeight;
+    &:before {
+      line-height: 1;
+      color: inherit;
+      content: $Picker-btn-icon;
+      display: inline-block;
+      font-size: $Picker-btn-fontSize;
+      font-family: $Picker-btn-vendor;
    }
+  }

-    &-input {
-        min-height: $Form-input-height;
-        height: auto;
-    }
-
-    .#{$ns}Picker-values {
-        display: inline;
-    }
-
-    &-valueWrap {
-        flex-grow: 1;
-        position: relative;
-
-        > input {
-            width: 1rem;
-            display: inline-block;
-        }
-    }
-
-    .#{$ns}Picker-valueWrap {
-        margin-bottom: -$gap-xs;
-        line-height: 1;
-    }
-
-    .#{$ns}Picker-value {
-        cursor: pointer;
-        user-select: none;
-        white-space: nowrap;
-        vertical-align: middle;
-        line-height: $Form-input-lineHeight * $Form-input-fontSize -
-            px2rem(2px);
-        display: inline-block;
-        font-size: $Form-selectValue-fontSize;
-        color: $Form-selectValue-color;
-        background: $Form-selectValue-bg;
-        border: px2rem(1px) solid $Form-selectValue-borderColor;
-        border-radius: 2px;
-        margin-right: $gap-xs;
-        margin-bottom: $gap-xs;
-
-        &.is-disabled {
-            pointer-events: none;
-            opacity: $Button-onDisabled-opacity;
-        }
-    }
-
-    .#{$ns}Picker-valueIcon {
-        cursor: pointer;
-        border-right: px2rem(1px) solid $Form-selectValue-borderColor;
-        padding: 1px 5px;
-
-        &:hover {
-            background-color: darken($Form-selectValue-bg, 5%);
-        }
-    }
-
-    .#{$ns}Picker-valueLabel {
-        padding: 0 $gap-xs;
-    }
-
-    &-btn {
-        cursor: pointer;
-        color: $Picker-iconColor;
-
-        &:hover {
-            color: $Picker-onHover-iconColor;
-        }
-
-        &:before {
-            line-height: 1;
-            color: inherit;
-            content: $Picker-btn-icon;
-            display: inline-block;
-            font-size: $Picker-btn-fontSize;
-            font-family: $Picker-btn-vendor;
-        }
-    }
-
-    &-clear {
-        display: inline-block;
-        @include input-clear();
-        line-height: 1;
-        margin-right: $gap-xs;
-    }
+  &-clear {
+    display: inline-block;
+    @include input-clear();
+    line-height: 1;
+    margin-right: $gap-xs;
+  }
 }

 .#{$ns}PickerControl.is-inline {
-    .#{$ns}Picker {
-        display: inline-block;
-        min-width: px2rem(150px);
-    }
+  .#{$ns}Picker {
+    display: inline-block;
+    min-width: px2rem(150px);
+  }
 }
--- a/scss/components/form/_qr-code.scss
+++ b/scss/components/form/_qr-code.scss
@ -1,4 +1,4 @@
 .#{$ns}QrCode {
-    min-height: $Form-input-height;
-    padding: px2rem(7px) 0;
+  min-height: $Form-input-height;
+  padding: px2rem(7px) 0;
 }
--- a/scss/components/form/_range.scss
+++ b/scss/components/form/_range.scss
@ -1,216 +1,215 @@
 .#{$ns}RangeControl {
-    position: relative;
-    @include clearfix();
+  position: relative;
+  @include clearfix();

-    padding-top: 1rem;
-    padding-bottom: 1.1rem;
-
-    &--withInput {
-        .#{$ns}InputRange {
-            width: calc(100% - 120px);
-        }
-
-        .#{$ns}InputRange-label--mid {
-            left: calc(50% - 60px);
-        }
-
-        &.is-multiple {
-            .#{$ns}InputRange {
-                width: calc(100% - 210px);
-            }
-        }
-    }
+  padding-top: 1rem;
+  padding-bottom: 1.1rem;

+  &--withInput {
    .#{$ns}InputRange {
-        &-input {
-            font-size: $fontSizeSm;
-            position: absolute;
-            right: px2rem(26px);
-            top: px2rem(12px);
-            height: px2rem(30px);
-
-            input {
-                padding: px2rem(10px);
-                width: px2rem(74px);
-                height: 100%;
-
-                &:focus {
-                    outline: none;
-                    border: $borderWidth solid $info;
-                }
-            }
-
-            &-separator {
-                display: inline-block;
-                padding: 0 5px;
-            }
-        }
-
-        &-unit {
-            position: absolute;
-            right: px2rem(10px);
-            top: px2rem(7px);
-        }
-
-        &-clear {
-            position: absolute;
-            top: px2rem(18px);
-            right: 0;
-            cursor: pointer;
-
-            svg {
-                height: px2rem(16px);
-                width: px2rem(16px);
-                fill: #999;
-            }
-        }
+      width: calc(100% - 120px);
    }
+
+    .#{$ns}InputRange-label--mid {
+      left: calc(50% - 60px);
+    }
+
+    &.is-multiple {
+      .#{$ns}InputRange {
+        width: calc(100% - 210px);
+      }
+    }
+  }
+
+  .#{$ns}InputRange {
+    &-input {
+      font-size: $fontSizeSm;
+      position: absolute;
+      right: px2rem(26px);
+      top: px2rem(12px);
+      height: px2rem(30px);
+
+      input {
+        padding: px2rem(10px);
+        width: px2rem(74px);
+        height: 100%;
+
+        &:focus {
+          outline: none;
+          border: $borderWidth solid $info;
+        }
+      }
+
+      &-separator {
+        display: inline-block;
+        padding: 0 5px;
+      }
+    }
+
+    &-unit {
+      position: absolute;
+      right: px2rem(10px);
+      top: px2rem(7px);
+    }
+
+    &-clear {
+      position: absolute;
+      top: px2rem(18px);
+      right: 0;
+      cursor: pointer;
+
+      svg {
+        height: px2rem(16px);
+        width: px2rem(16px);
+        fill: #999;
+      }
+    }
+  }
 }

 .#{$ns}InputRange {
+  height: $InputRange-slider-height;
+  position: relative;
+  width: 100%;
+
+  // slider
+  &-slider {
+    appearance: none;
+    background: $InputRange-slider-bg;
+    border: $InputRange-slider-border;
+    // border-radius: 100%;
+    cursor: pointer;
+    display: block;
+    width: $InputRange-slider-width;
    height: $InputRange-slider-height;
+    margin-left: $InputRange-slider-width / -2;
+    margin-top: $InputRange-slider-height / -2 + $InputRange-track-height / -2;
+    outline: none;
+    position: absolute;
+    z-index: 2;
+    top: 50%;
+    transition: $InputRange-slider-transition;
+
+    &:active {
+      transform: $InputRange-slider-onActive-transform;
+    }
+
+    &:focus {
+      box-shadow: $InputRange-slider-onFocus-boxShadow;
+    }
+
+    .input-range--disabled & {
+      background: $InputRange-slider-onDisabled-bg;
+      border: $InputRange-slider-onDisabled-border;
+      box-shadow: none;
+      transform: none;
+    }
+
+    &:before {
+      content: '||';
+      color: #fff;
+      display: block;
+      line-height: px2rem(22px);
+      text-align: center;
+    }
+  }
+
+  &-sliderContainer {
+    transition: $InputRange-sliderContainer-transition;
+  }
+
+  // label
+  &-label {
+    color: $InputRange-label-color;
+    font-family: $InputRange-fontFamily;
+    font-size: $InputRange-label-fontSize;
+    transform: translateZ(0);
+    white-space: nowrap;
+  }
+
+  &-label--min,
+  &-label--max,
+  &-label--mid {
+    bottom: $InputRange-label-positionBottom;
+    position: absolute;
+  }
+
+  // &-label--min {
+  //     left: px2rem(15px);
+  // }
+
+  &-label--mid {
+    left: 50%;
+    bottom: px2rem(-5px);
+  }
+
+  &-label--max {
+    right: 0;
+  }
+
+  &-label--value {
+    position: absolute;
+    display: $InputRange-label--value-display;
+    top: $InputRange-label--value-positionTop;
+  }
+
+  // label Container
+
+  // &-labelContainer {
+  //     left: -50%;
+  //     position: relative;
+  //     .#{$ns}InputRange-label--max & {
+  //         left: 50%;
+  //     }
+  // }
+
+  // track
+  &-track {
+    background: $InputRange-track-bg;
+    // border-radius: 0;
+    cursor: pointer;
+    display: block;
+    height: $InputRange-track-height;
    position: relative;
-    width: 100%;
+    transition: $InputRange-track-transition;

-    // slider
-    &-slider {
-        appearance: none;
-        background: $InputRange-slider-bg;
-        border: $InputRange-slider-border;
-        // border-radius: 100%;
-        cursor: pointer;
-        display: block;
-        width: $InputRange-slider-width;
-        height: $InputRange-slider-height;
-        margin-left: $InputRange-slider-width / -2;
-        margin-top: $InputRange-slider-height / -2 + $InputRange-track-height /
-            -2;
-        outline: none;
-        position: absolute;
-        z-index: 2;
-        top: 50%;
-        transition: $InputRange-slider-transition;
-
-        &:active {
-            transform: $InputRange-slider-onActive-transform;
-        }
-
-        &:focus {
-            box-shadow: $InputRange-slider-onFocus-boxShadow;
-        }
-
-        .input-range--disabled & {
-            background: $InputRange-slider-onDisabled-bg;
-            border: $InputRange-slider-onDisabled-border;
-            box-shadow: none;
-            transform: none;
-        }
-
-        &:before {
-            content: "||";
-            color: #fff;
-            display: block;
-            line-height: px2rem(22px);
-            text-align: center;
-        }
+    .#{$ns}InputRange.is-disabled & {
+      background: $InputRange-track-onDisabled-bg;
    }

-    &-sliderContainer {
-        transition: $InputRange-sliderContainer-transition;
+    &.is-active {
+      background: $InputRange-track-onActive-bg;
+    }
+  }
+
+  &-track--background {
+    left: 0.5rem;
+    margin-top: -0.5 * $InputRange-track-height;
+    position: absolute;
+    right: 0.5rem;
+    top: 50%;
+
+    &::before,
+    &::after {
+      content: '';
+      width: 0.5rem;
+      height: 100%;
+      position: absolute;
+      top: 0;
+      background: inherit;
+      z-index: 1;
    }

-    // label
-    &-label {
-        color: $InputRange-label-color;
-        font-family: $InputRange-fontFamily;
-        font-size: $InputRange-label-fontSize;
-        transform: translateZ(0);
-        white-space: nowrap;
+    &::before {
+      left: -0.5rem;
    }

-    &-label--min,
-    &-label--max,
-    &-label--mid {
-        bottom: $InputRange-label-positionBottom;
-        position: absolute;
+    &::after {
+      right: -0.5rem;
    }
+  }

-    // &-label--min {
-    //     left: px2rem(15px);
-    // }
-
-    &-label--mid {
-        left: 50%;
-        bottom: px2rem(-5px);
-    }
-
-    &-label--max {
-        right: 0;
-    }
-
-    &-label--value {
-        position: absolute;
-        display: $InputRange-label--value-display;
-        top: $InputRange-label--value-positionTop;
-    }
-
-    // label Container
-
-    // &-labelContainer {
-    //     left: -50%;
-    //     position: relative;
-    //     .#{$ns}InputRange-label--max & {
-    //         left: 50%;
-    //     }
-    // }
-
-    // track
-    &-track {
-        background: $InputRange-track-bg;
-        // border-radius: 0;
-        cursor: pointer;
-        display: block;
-        height: $InputRange-track-height;
-        position: relative;
-        transition: $InputRange-track-transition;
-
-        .#{$ns}InputRange.is-disabled & {
-            background: $InputRange-track-onDisabled-bg;
-        }
-
-        &.is-active {
-            background: $InputRange-track-onActive-bg;
-        }
-    }
-
-    &-track--background {
-        left: 0.5rem;
-        margin-top: -0.5 * $InputRange-track-height;
-        position: absolute;
-        right: 0.5rem;
-        top: 50%;
-
-        &::before,
-        &::after {
-            content: "";
-            width: 0.5rem;
-            height: 100%;
-            position: absolute;
-            top: 0;
-            background: inherit;
-            z-index: 1;
-        }
-
-        &::before {
-            left: -0.5rem;
-        }
-
-        &::after {
-            right: -0.5rem;
-        }
-    }
-
-    &-track--active {
-        background: $InputRange-track-onActive-bg;
-    }
+  &-track--active {
+    background: $InputRange-track-onActive-bg;
+  }
 }
--- a/scss/components/form/_rating.scss
+++ b/scss/components/form/_rating.scss
@ -1,34 +1,34 @@
 .#{$ns}Rating {
-    position: relative;
+  position: relative;
+  overflow: hidden;
+  display: block;
+  float: left;
+  font-size: px2rem(24px);
+  color: $dark;
+  cursor: pointer;
+
+  &.is-active {
+    color: $info;
+  }
+
+  &.is-disabled {
+    cursor: not-allowed;
+  }
+
+  &-half:before {
+    position: absolute;
    overflow: hidden;
    display: block;
-    float: left;
-    font-size: px2rem(24px);
-    color: $dark;
-    cursor: pointer;
-
-    &.is-active {
-        color: $info;
-    }
-
-    &.is-disabled {
-        cursor: not-allowed;
-    }
-
-    &-half:before {
-        position: absolute;
-        overflow: hidden;
-        display: block;
-        z-index: 1;
-        top: 0;
-        left: 0;
-        width: 50%;
-        content: attr(data-forhalf);
-        color: $info;
-    }
+    z-index: 1;
+    top: 0;
+    left: 0;
+    width: 50%;
+    content: attr(data-forhalf);
+    color: $info;
+  }
 }

 .#{$ns}RatingControl {
-    position: relative;
-    overflow: hidden;
+  position: relative;
+  overflow: hidden;
 }
--- a/scss/components/form/_repeat.scss
+++ b/scss/components/form/_repeat.scss
@ -1,41 +1,41 @@
 // todo
 .#{$ns}RepeatControl {
-    .repeat-btn {
-        width: px2rem(80px);
-    }
+  .repeat-btn {
+    width: px2rem(80px);
+  }

-    .Select {
-        display: inline-block;
-        min-width: 100px;
-    }
+  .Select {
+    display: inline-block;
+    min-width: 100px;
+  }

-    .input-range {
-        margin-top: 0;
-    }
+  .input-range {
+    margin-top: 0;
+  }

-    //   .InputRange-label--value {
-    //     top: -25px;
+  //   .InputRange-label--value {
+  //     top: -25px;

-    //     .InputRange-labelContainer {
-    //       font-size: 14px;
-    //     }
-    //   }
+  //     .InputRange-labelContainer {
+  //       font-size: 14px;
+  //     }
+  //   }

-    //   .InputRange-slider {
-    //     z-index: 2;
-    //   }
+  //   .InputRange-slider {
+  //     z-index: 2;
+  //   }

-    //   .InputRange-track--active, .InputRange-slider {
-    //     background-color: #23b7e5;
-    //     border-color: #23b7e5;
-    //   }
+  //   .InputRange-track--active, .InputRange-slider {
+  //     background-color: #23b7e5;
+  //     border-color: #23b7e5;
+  //   }
 }

@media (min-width: 768px) {
-    .repeat-control.form-contorl-inline,
-    .form-group-inline .repeat-control {
-        display: inline-block;
-        min-width: 280px;
-        width: auto;
-    }
+  .repeat-control.form-contorl-inline,
+  .form-group-inline .repeat-control {
+    display: inline-block;
+    min-width: 280px;
+    width: auto;
+  }
 }
--- a/scss/components/form/_rich-text.scss
+++ b/scss/components/form/_rich-text.scss
@ -1,100 +1,101 @@
 // todo

 .fr-popup {
-    z-index: $zindex-popover !important;
+  z-index: $zindex-popover !important;
 }

 .#{$ns}RichTextControl {
-    min-height: px2rem(200px);
-    height: auto;
-    border: $Form-input-borderWidth solid $Form-input-borderColor;
-    width: 100%;
+  min-height: px2rem(200px);
+  height: auto;
+  border: $Form-input-borderWidth solid $Form-input-borderColor;
+  width: 100%;

-    .fr-toolbar.fr-top {
-        box-shadow: none;
-        border: 0;
-        position: relative;
+  .fr-toolbar.fr-top {
+    box-shadow: none;
+    border: 0;
+    position: relative;
+  }
+
+  .fr-box.fr-basic.fr-top:not(.fr-fullscreen) .fr-wrapper {
+    min-height: 150px;
+    max-height: 400px;
+    box-shadow: none;
+    overflow: auto;
+    border-top: 1px solid $Form-input-borderColor;
+  }
+
+  .fr-toolbar .fr-command.fr-btn,
+  .fr-popup .fr-command.fr-btn {
+    color: $Button--default-color;
+  }
+
+  .fr-toolbar .fr-command.fr-btn.fr-active,
+  .fr-popup .fr-command.fr-btn.fr-active {
+    color: $info;
+    background-color: $Form-select-onHover-bg;
+  }
+
+  .fr-desktop .fr-command:hover,
+  .fr-desktop .fr-command:focus {
+    background-color: $Form-select-onHover-bg;
+  }
+
+  .fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active,
+  .fr-popup .fr-command.fr-btn.fr-dropdown.fr-active {
+    background-color: $Form-select-onHover-bg;
+  }
+
+  .fr-command.fr-btn
+    + .fr-dropdown-menu
+    .fr-dropdown-wrapper
+    .fr-dropdown-content
+    ul.fr-dropdown-list
+    li
+    a.fr-active {
+    background-color: $info;
+    color: #fff;
+  }
+
+  &.is-focused {
+    border: $Form-input-borderWidth solid $Form-input-onFocused-borderColor;
+
+    .fr-box.fr-basic.fr-top .fr-wrapper {
+      border-top: $Form-input-borderWidth solid
+        $Form-input-onFocused-borderColor;
    }
+  }

-    .fr-box.fr-basic.fr-top:not(.fr-fullscreen) .fr-wrapper {
-        min-height: 150px;
-        max-height: 400px;
-        box-shadow: none;
-        overflow: auto;
-        border-top: 1px solid $Form-input-borderColor;
+  .fr-box.fr-basic .fr-element {
+    min-height: 150px;
+  }
+
+  .fr-sticky-dummy {
+    position: absolute;
+  }
+
+  &.is-disabled {
+    border-color: $Form-input-onDisabled-borderColor;
+    pointer-events: none;
+    opacity: 0.6;
+
+    .fr-box.fr-basic.fr-top .fr-wrapper {
+      border-color: $Form-input-onDisabled-borderColor;
    }
+  }

-    .fr-toolbar .fr-command.fr-btn,
-    .fr-popup .fr-command.fr-btn {
-        color: $Button--default-color;
-    }
+  //   &.amis-rich-text-control-md {
+  //     .fr-box.fr-basic .fr-element,
+  //     .fr-box.fr-basic.fr-top .fr-wrapper {
+  //       min-height: 250px;
+  //     }
+  //   }

-    .fr-toolbar .fr-command.fr-btn.fr-active,
-    .fr-popup .fr-command.fr-btn.fr-active {
-        color: $info;
-        background-color: $Form-select-onHover-bg;
-    }
-
-    .fr-desktop .fr-command:hover,
-    .fr-desktop .fr-command:focus {
-        background-color: $Form-select-onHover-bg;
-    }
-
-    .fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active,
-    .fr-popup .fr-command.fr-btn.fr-dropdown.fr-active {
-        background-color: $Form-select-onHover-bg;
-    }
-
-    .fr-command.fr-btn
-        + .fr-dropdown-menu
-        .fr-dropdown-wrapper
-        .fr-dropdown-content
-        ul.fr-dropdown-list
-        li
-        a.fr-active {
-        background-color: $info;
-        color: #fff;
-    }
-
-    &.is-focused {
-        border: $Form-input-borderWidth solid $Form-input-onFocused-borderColor;
-
-        .fr-box.fr-basic.fr-top .fr-wrapper {
-            border-top: $Form-input-borderWidth solid $Form-input-onFocused-borderColor;
-        }
-    }
-
-    .fr-box.fr-basic .fr-element {
-        min-height: 150px;
-    }
-
-    .fr-sticky-dummy {
-        position: absolute;
-    }
-
-    &.is-disabled {
-        border-color: $Form-input-onDisabled-borderColor;
-        pointer-events: none;
-        opacity: 0.6;
-
-        .fr-box.fr-basic.fr-top .fr-wrapper {
-            border-color: $Form-input-onDisabled-borderColor;
-        }
-    }
-
-    //   &.amis-rich-text-control-md {
-    //     .fr-box.fr-basic .fr-element,
-    //     .fr-box.fr-basic.fr-top .fr-wrapper {
-    //       min-height: 250px;
-    //     }
-    //   }
-
-    //   &.amis-rich-text-control-lg {
-    //     .fr-box.fr-basic .fr-element,
-    //     .fr-box.fr-basic.fr-top .fr-wrapper {
-    //       min-height: 300px;
-    //     }
-    //   }
+  //   &.amis-rich-text-control-lg {
+  //     .fr-box.fr-basic .fr-element,
+  //     .fr-box.fr-basic.fr-top .fr-wrapper {
+  //       min-height: 300px;
+  //     }
+  //   }
 }

 // @media (min-width: 768px) {
--- a/scss/components/form/_sub-form.scss
+++ b/scss/components/form/_sub-form.scss
@ -1,81 +1,81 @@
 .#{$ns}SubForm {
-    &-values {
-        display: inline-block;
-        margin-top: -$gap-xs;
-        padding: (
-                $Form-input-height - $Form-input-lineHeight *
-                    $Form-input-fontSize - px2rem(2px)
-            )/2 0;
+  &-values {
+    display: inline-block;
+    margin-top: -$gap-xs;
+    padding: (
+        $Form-input-height - $Form-input-lineHeight * $Form-input-fontSize -
+          px2rem(2px)
+      )/2 0;
+  }
+
+  &-value {
+    cursor: pointer;
+    user-select: none;
+    line-height: $Form-input-lineHeight * $Form-input-fontSize - px2rem(2px);
+    display: inline-block;
+    font-size: $Form-selectValue-fontSize;
+    color: $Form-selectValue-color;
+    background: $Form-selectValue-bg;
+    border: px2rem(1px) solid $Form-selectValue-borderColor;
+    border-radius: 2px;
+    margin-right: $gap-xs;
+    margin-top: $gap-xs;
+
+    &:hover {
+      background-color: darken($Form-selectValue-bg, 5%);
    }

-    &-value {
-        cursor: pointer;
-        user-select: none;
-        line-height: $Form-input-lineHeight * $Form-input-fontSize - px2rem(2px);
-        display: inline-block;
-        font-size: $Form-selectValue-fontSize;
-        color: $Form-selectValue-color;
-        background: $Form-selectValue-bg;
-        border: px2rem(1px) solid $Form-selectValue-borderColor;
-        border-radius: 2px;
-        margin-right: $gap-xs;
-        margin-top: $gap-xs;
-
-        &:hover {
-            background-color: darken($Form-selectValue-bg, 5%);
-        }
-
-        &.is-disabled {
-            pointer-events: none;
-            opacity: $Button-onDisabled-opacity;
-        }
+    &.is-disabled {
+      pointer-events: none;
+      opacity: $Button-onDisabled-opacity;
    }
+  }

-    &-valueIcon {
-        cursor: pointer;
-        border-right: px2rem(1px) solid $Form-selectValue-borderColor;
-        padding: 1px 5px;
+  &-valueIcon {
+    cursor: pointer;
+    border-right: px2rem(1px) solid $Form-selectValue-borderColor;
+    padding: 1px 5px;

-        &:hover {
-            background-color: darken($Form-selectValue-bg, 5%);
-        }
+    &:hover {
+      background-color: darken($Form-selectValue-bg, 5%);
    }
+  }

-    &-valueLabel {
-        padding: 0 $gap-xs;
-    }
-
-    &-addBtn {
-        font-size: $SubForm--addBtn-fontSize;
-
-        @include button-size(
-            $SubForm--addBtn-paddingY,
-            $SubForm--addBtn-paddingX,
-            $SubForm--addBtn-fontSize,
-            $SubForm--addBtn-lineHeight,
-            $SubForm--addBtn-borderRadius,
-            $SubForm--addBtn-height
-        );
-
-        @include button-variant(
-            $SubForm--addBtn-bg,
-            $SubForm--addBtn-border,
-            $SubForm--addBtn-color,
-            $SubForm--addBtn-onHover-bg,
-            $SubForm--addBtn-onHover-border,
-            $SubForm--addBtn-onHover-color,
-            $SubForm--addBtn-onActive-bg,
-            $SubForm--addBtn-onActive-border,
-            $SubForm--addBtn-onActive-color
-        );
-
-        &.is-disabled {
-            pointer-events: none;
-            opacity: $Button-onDisabled-opacity;
-        }
+  &-valueLabel {
+    padding: 0 $gap-xs;
+  }
+
+  &-addBtn {
+    font-size: $SubForm--addBtn-fontSize;
+
+    @include button-size(
+      $SubForm--addBtn-paddingY,
+      $SubForm--addBtn-paddingX,
+      $SubForm--addBtn-fontSize,
+      $SubForm--addBtn-lineHeight,
+      $SubForm--addBtn-borderRadius,
+      $SubForm--addBtn-height
+    );
+
+    @include button-variant(
+      $SubForm--addBtn-bg,
+      $SubForm--addBtn-border,
+      $SubForm--addBtn-color,
+      $SubForm--addBtn-onHover-bg,
+      $SubForm--addBtn-onHover-border,
+      $SubForm--addBtn-onHover-color,
+      $SubForm--addBtn-onActive-bg,
+      $SubForm--addBtn-onActive-border,
+      $SubForm--addBtn-onActive-color
+    );
+
+    &.is-disabled {
+      pointer-events: none;
+      opacity: $Button-onDisabled-opacity;
    }
+  }
 }

 .#{$ns}SubFormControl {
-    padding-top: $Form-input-height - $SubForm--addBtn-height;
+  padding-top: $Form-input-height - $SubForm--addBtn-height;
 }
--- a/scss/components/form/_switch.scss
+++ b/scss/components/form/_switch.scss
@ -1,117 +1,117 @@
 .#{$ns}Switch {
-    cursor: pointer;
-    position: relative;
-    display: inline-block;
-    width: $Switch-width;
-    height: $Switch-height;
-    overflow: hidden;
-    border-radius: px2rem(30px);
-    background-color: $Switch-onActive-bgColor;
-    margin: 0;
-    vertical-align: middle;
-    text-align: left;
+  cursor: pointer;
+  position: relative;
+  display: inline-block;
+  width: $Switch-width;
+  height: $Switch-height;
+  overflow: hidden;
+  border-radius: px2rem(30px);
+  background-color: $Switch-onActive-bgColor;
+  margin: 0;
+  vertical-align: middle;
+  text-align: left;

-    &.is-disabled {
-        background-color: $Switch-onDisabled-bgColor;
+  &.is-disabled {
+    background-color: $Switch-onDisabled-bgColor;
+  }
+
+  i {
+    &:before {
+      content: '\5173';
+      color: $Switch-valueColor;
+      text-indent: ($Switch-width / 2);
+      text-transform: uppercase;
+      font-size: $fontSizeSm;
+      line-height: $Switch-height;
+      font-style: normal;
+      font-weight: bold;
+
+      position: absolute;
+      top: px2rem(-1px);
+      bottom: px2rem(-1px);
+      left: px2rem(-1px);
+      right: px2rem(-1px);
+      background-color: $Switch-bgColor;
+      border: px2rem(1px) solid $Switch-borderColor;
+      border-radius: px2rem(30px);
+      transition: all 0.2s;
    }

-    i {
-        &:before {
-            content: "\5173";
-            color: $Switch-valueColor;
-            text-indent: ($Switch-width / 2);
-            text-transform: uppercase;
-            font-size: $fontSizeSm;
-            line-height: $Switch-height;
-            font-style: normal;
-            font-weight: bold;
+    &:after {
+      content: '';
+      position: absolute;
+      background-color: $white;
+      width: $Switch-height - px2rem(2px);
+      top: px2rem(1px);
+      bottom: px2rem(1px);
+      left: px2rem(1px);
+      border-radius: 50%;
+      // box-shadow: px2rem(1px) px2rem(1px) px2rem(3px) rgba(0, 0, 0, 0.25);
+      transition: margin-left 0.3s;
+    }
+  }

-            position: absolute;
-            top: px2rem(-1px);
-            bottom: px2rem(-1px);
-            left: px2rem(-1px);
-            right: px2rem(-1px);
-            background-color: $Switch-bgColor;
-            border: px2rem(1px) solid $Switch-borderColor;
-            border-radius: px2rem(30px);
-            transition: all 0.2s;
+  input {
+    position: absolute;
+    opacity: 0;
+
+    &:disabled,
+    &:disabled:checked {
+      & + i {
+        &:before {
+          color: $Switch-onDisabled-color;
+          background-color: $Switch-onDisabled-bgColor;
        }

        &:after {
-            content: "";
-            position: absolute;
-            background-color: $white;
-            width: $Switch-height - px2rem(2px);
-            top: px2rem(1px);
-            bottom: px2rem(1px);
-            left: px2rem(1px);
-            border-radius: 50%;
-            // box-shadow: px2rem(1px) px2rem(1px) px2rem(3px) rgba(0, 0, 0, 0.25);
-            transition: margin-left 0.3s;
+          background-color: $Switch-onDisabled-circle-BackgroundColor;
+          color: $Switch-onDisabled-color;
        }
+      }
    }

-    input {
-        position: absolute;
-        opacity: 0;
-
-        &:disabled,
-        &:disabled:checked {
-            &+i {
-                &:before {
-                    color: $Switch-onDisabled-color;
-                    background-color: $Switch-onDisabled-bgColor;
-                }
-
-                &:after {
-                    background-color: $Switch-onDisabled-circle-BackgroundColor;
-                    color: $Switch-onDisabled-color;
-                }
-            }
+    &:checked {
+      & + i {
+        &:before {
+          left: 100%;
+          border-width: 0;
        }

-        &:checked {
-            &+i {
-                &:before {
-                    left: 100%;
-                    border-width: 0;
-                }
+        &:after {
+          margin-left: $Switch-width - $Switch-height;

-                &:after {
-                    margin-left: $Switch-width - $Switch-height;
-
-                    content: "\5f00";
-                    color: $white;
-                    text-indent: px2rem(-18px); // todo
-                    text-transform: uppercase;
-                    font-size: $fontSizeSm;
-                    font-weight: bold;
-                    font-style: normal;
-                    line-height: $Switch-height;
-                }
-            }
+          content: '\5f00';
+          color: $white;
+          text-indent: px2rem(-18px); // todo
+          text-transform: uppercase;
+          font-size: $fontSizeSm;
+          font-weight: bold;
+          font-style: normal;
+          line-height: $Switch-height;
        }
+      }
    }
+  }
 }

 .#{$ns}Switch-option {
-    vertical-align: middle;
-    margin-left: $Switch-gap;
+  vertical-align: middle;
+  margin-left: $Switch-gap;

-    &:first-child {
-        margin-left: 0;
-        margin-right: $Switch-gap;
-    }
+  &:first-child {
+    margin-left: 0;
+    margin-right: $Switch-gap;
+  }

-    &:empty {
-        display: none;
-    }
+  &:empty {
+    display: none;
+  }
 }

 .#{$ns}SwitchControl {
-    padding-top: ($Form-input-height - $Switch-height) / 2;
+  padding-top: ($Form-input-height - $Switch-height) / 2;

-    &.is-inline {
-        display: inline-block;
-    }
-}
+  &.is-inline {
+    display: inline-block;
+  }
+}
--- a/scss/components/form/_tag.scss
+++ b/scss/components/form/_tag.scss
@ -1,112 +1,112 @@
 .#{$ns}TagControl {
-    @include input-text();
+  @include input-text();

-    &-placeholder {
-        color: $Form-input-placeholderColor;
-        user-select: none;
-        position: absolute;
-        left: $Form-input-paddingX;
-        top: $Form-input-paddingY;
-        margin-top: 2 * $Form-input-borderWidth;
-        line-height: $Form-input-lineHeight;
+  &-placeholder {
+    color: $Form-input-placeholderColor;
+    user-select: none;
+    position: absolute;
+    left: $Form-input-paddingX;
+    top: $Form-input-paddingY;
+    margin-top: 2 * $Form-input-borderWidth;
+    line-height: $Form-input-lineHeight;
+  }
+
+  &-input {
+    min-height: $Form-input-height;
+    height: auto;
+  }
+
+  &-valueWrap {
+    flex-grow: 1;
+    margin-bottom: -$gap-xs;
+    line-height: 1;
+
+    > input {
+      width: px2rem(100px);
+      vertical-align: middle;
+      position: relative;
+      z-index: 2;
+      margin-bottom: $gap-xs;
+    }
+  }
+
+  &-value {
+    cursor: pointer;
+    user-select: none;
+    white-space: nowrap;
+    vertical-align: middle;
+    line-height: $Form-input-lineHeight * $Form-input-fontSize - px2rem(2px);
+    display: inline-block;
+    font-size: $Form-selectValue-fontSize;
+    color: $Form-selectValue-color;
+    background: $Form-selectValue-bg;
+    border: px2rem(1px) solid $Form-selectValue-borderColor;
+    border-radius: 2px;
+    margin-right: $gap-xs;
+    margin-bottom: $gap-xs;
+
+    &.is-disabled {
+      pointer-events: none;
+      opacity: $Button-onDisabled-opacity;
+    }
+  }
+
+  &-valueIcon {
+    cursor: pointer;
+    border-right: px2rem(1px) solid $Form-selectValue-borderColor;
+    padding: 1px 5px;
+
+    &:hover {
+      background-color: darken($Form-selectValue-bg, 5%);
+    }
+  }
+
+  &-valueLabel {
+    padding: 0 $gap-xs;
+  }
+
+  &-sug {
+    margin-top: $Form-input-marginBottom;
+
+    &Tip {
+      color: $TagControl-sugTip-color;
+      margin-bottom: $Form-input-marginBottom;
    }

-    &-input {
-        min-height: $Form-input-height;
-        height: auto;
-    }
-
-    &-valueWrap {
-        flex-grow: 1;
-        margin-bottom: -$gap-xs;
-        line-height: 1;
-
-        > input {
-            width: px2rem(100px);
-            vertical-align: middle;
-            position: relative;
-            z-index: 2;
-            margin-bottom: $gap-xs;
-        }
-    }
-
-    &-value {
-        cursor: pointer;
-        user-select: none;
-        white-space: nowrap;
-        vertical-align: middle;
-        line-height: $Form-input-lineHeight * $Form-input-fontSize - px2rem(2px);
-        display: inline-block;
-        font-size: $Form-selectValue-fontSize;
-        color: $Form-selectValue-color;
-        background: $Form-selectValue-bg;
-        border: px2rem(1px) solid $Form-selectValue-borderColor;
-        border-radius: 2px;
-        margin-right: $gap-xs;
-        margin-bottom: $gap-xs;
-
-        &.is-disabled {
-            pointer-events: none;
-            opacity: $Button-onDisabled-opacity;
-        }
-    }
-
-    &-valueIcon {
-        cursor: pointer;
-        border-right: px2rem(1px) solid $Form-selectValue-borderColor;
-        padding: 1px 5px;
-
-        &:hover {
-            background-color: darken($Form-selectValue-bg, 5%);
-        }
-    }
-
-    &-valueLabel {
-        padding: 0 $gap-xs;
-    }
-
-    &-sug {
-        margin-top: $Form-input-marginBottom;
-
-        &Tip {
-            color: $TagControl-sugTip-color;
-            margin-bottom: $Form-input-marginBottom;
-        }
-
-        &Item {
-            margin-right: $gap-sm;
-            margin-bottom: $gap-sm;
-            display: inline-block;
-            font-size: $TagControl-sugBtn-fontSize;
-            cursor: pointer;
-            user-select: none;
-            border: $TagControl-sugBtn-borderWidth solid transparent;
-
-            @include button-size(
-                $TagControl-sugBtn-paddingY,
-                $TagControl-sugBtn-paddingX,
-                $TagControl-sugBtn-fontSize,
-                $TagControl-sugBtn-lineHeight,
-                $TagControl-sugBtn-borderRadius,
-                $TagControl-sugBtn-height
-            );
-
-            @include button-variant(
-                $TagControl-sugBtn-bg,
-                $TagControl-sugBtn-border,
-                $TagControl-sugBtn-color,
-                $TagControl-sugBtn-onHover-bg,
-                $TagControl-sugBtn-onHover-border,
-                $TagControl-sugBtn-onHover-color,
-                $TagControl-sugBtn-onActive-bg,
-                $TagControl-sugBtn-onActive-border,
-                $TagControl-sugBtn-onActive-color
-            );
-
-            &.is-disabled {
-                pointer-events: none;
-                opacity: $Button-onDisabled-opacity;
-            }
-        }
+    &Item {
+      margin-right: $gap-sm;
+      margin-bottom: $gap-sm;
+      display: inline-block;
+      font-size: $TagControl-sugBtn-fontSize;
+      cursor: pointer;
+      user-select: none;
+      border: $TagControl-sugBtn-borderWidth solid transparent;
+
+      @include button-size(
+        $TagControl-sugBtn-paddingY,
+        $TagControl-sugBtn-paddingX,
+        $TagControl-sugBtn-fontSize,
+        $TagControl-sugBtn-lineHeight,
+        $TagControl-sugBtn-borderRadius,
+        $TagControl-sugBtn-height
+      );
+
+      @include button-variant(
+        $TagControl-sugBtn-bg,
+        $TagControl-sugBtn-border,
+        $TagControl-sugBtn-color,
+        $TagControl-sugBtn-onHover-bg,
+        $TagControl-sugBtn-onHover-border,
+        $TagControl-sugBtn-onHover-color,
+        $TagControl-sugBtn-onActive-bg,
+        $TagControl-sugBtn-onActive-border,
+        $TagControl-sugBtn-onActive-color
+      );
+
+      &.is-disabled {
+        pointer-events: none;
+        opacity: $Button-onDisabled-opacity;
+      }
    }
+  }
 }
--- a/scss/components/form/_text.scss
+++ b/scss/components/form/_text.scss
@ -1,324 +1,325 @@
@mixin input-clear {
-    padding: px2rem(3px);
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  padding: px2rem(3px);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;

-    svg {
-        fill: $Form-input-iconColor;
-        width: px2rem(10px);
-        height: px2rem(10px);
-    }
+  svg {
+    fill: $Form-input-iconColor;
+    width: px2rem(10px);
+    height: px2rem(10px);
+  }

-    &:hover svg {
-        fill: darken($color: $Form-input-iconColor, $amount: 20%);
-    }
+  &:hover svg {
+    fill: darken($color: $Form-input-iconColor, $amount: 20%);
+  }
 }

@mixin input-text {
-    position: relative;
+  position: relative;

-    &.is-inline {
-        display: inline-block;
+  &.is-inline {
+    display: inline-block;
+  }
+
+  &-input {
+    display: flex;
+    background-color: $Form-input-bg;
+    border: $Form-input-borderWidth solid $Form-input-borderColor;
+    border-radius: $Form-input-borderRadius;
+    // height: $Form-input-height;
+    line-height: $Form-input-lineHeight;
+    padding: $Form-input-paddingY $Form-input-paddingX;
+    font-size: $Form-input-fontSize;
+
+    input {
+      outline: none;
+      background: transparent;
+      border: none;
+      color: $Form-input-color;
+      width: 100%;
+      height: $Form-input-lineHeight * $Form-input-fontSize;
+
+      &::placeholder {
+        color: $Form-input-placeholderColor;
+        user-select: none;
+      }
    }

-    &-input {
-        display: flex;
-        background-color: $Form-input-bg;
-        border: $Form-input-borderWidth solid $Form-input-borderColor;
-        border-radius: $Form-input-borderRadius;
-        // height: $Form-input-height;
-        line-height: $Form-input-lineHeight;
-        padding: $Form-input-paddingY $Form-input-paddingX;
-        font-size: $Form-input-fontSize;
-
-        input {
-            outline: none;
-            background: transparent;
-            border: none;
-            color: $Form-input-color;
-            width: 100%;
-            height: $Form-input-lineHeight * $Form-input-fontSize;
-
-            &::placeholder {
-                color: $Form-input-placeholderColor;
-                user-select: none;
-            }
-        }
-
-        > input {
-            flex-grow: 1;
-        }
+    > input {
+      flex-grow: 1;
    }
+  }

-    &.is-error > &-input {
-        border-color: $Form-input-onError-borderColor;
-        background-color: $Form-input-onError-bg;
+  &.is-error > &-input {
+    border-color: $Form-input-onError-borderColor;
+    background-color: $Form-input-onError-bg;
+  }
+
+  &.is-focused > &-input {
+    border-color: $Form-input-onFocused-borderColor;
+    box-shadow: $Form-input-boxShadow;
+
+    @if $Form-input-onFocused-bg !=$Form-input-bg {
+      background-color: $Form-input-onFocused-bg;
    }
+  }

-    &.is-focused > &-input {
-        border-color: $Form-input-onFocused-borderColor;
-        box-shadow: $Form-input-boxShadow;
+  &.is-error.is-focused > &-input {
+    border-color: $Form-input-onError-borderColor;
+  }

-        @if $Form-input-onFocused-bg !=$Form-input-bg {
-            background-color: $Form-input-onFocused-bg;
-        }
-    }
-
-    &.is-error.is-focused > &-input {
-        border-color: $Form-input-onError-borderColor;
-    }
-
-    &.is-disabled > &-input {
-        color: $text--muted-color;
-        background: $Form-input-onDisabled-bg;
-        border-color: $Form-input-onDisabled-borderColor;
-    }
-
-    &-spinner {
-        line-height: $Form-input-lineHeight * $Form-input-fontSize;
-    }
-
-    &-clear {
-        @include input-clear();
-    }
-
-    // 需要能撑开
-    @include media-breakpoint-up(sm) {
-        &.#{$ns}Form-control--sizeXs > &-input,
-        &.#{$ns}Form-control--sizeSm > &-input,
-        &.#{$ns}Form-control--sizeMd > &-input,
-        &.#{$ns}Form-control--sizeLg > &-input {
-            min-width: 100%;
-            display: inline-flex;
-        }
+  &.is-disabled > &-input {
+    color: $text--muted-color;
+    background: $Form-input-onDisabled-bg;
+    border-color: $Form-input-onDisabled-borderColor;
+  }
+
+  &-spinner {
+    line-height: $Form-input-lineHeight * $Form-input-fontSize;
+  }
+
+  &-clear {
+    @include input-clear();
+  }
+
+  // 需要能撑开
+  @include media-breakpoint-up(sm) {
+    &.#{$ns}Form-control--sizeXs > &-input,
+    &.#{$ns}Form-control--sizeSm > &-input,
+    &.#{$ns}Form-control--sizeMd > &-input,
+    &.#{$ns}Form-control--sizeLg > &-input {
+      min-width: 100%;
+      display: inline-flex;
    }
+  }
 }

 .#{$ns}TextControl {
-    @include input-text();
+  @include input-text();

-    &-placeholder {
-        color: $Form-input-placeholderColor;
-        user-select: none;
-        position: absolute;
-        left: $Form-input-paddingX;
-        top: $Form-input-paddingY;
-        margin-top: 2 * $Form-input-borderWidth;
-        line-height: $Form-input-lineHeight;
+  &-placeholder {
+    color: $Form-input-placeholderColor;
+    user-select: none;
+    position: absolute;
+    left: $Form-input-paddingX;
+    top: $Form-input-paddingY;
+    margin-top: 2 * $Form-input-borderWidth;
+    line-height: $Form-input-lineHeight;
+  }
+
+  &-valueWrap {
+    flex-grow: 1;
+    line-height: 1;
+    white-space: nowrap;
+
+    > input {
+      display: inline-block;
+      width: auto;
+      vertical-align: middle;
    }
+  }

-    &-valueWrap {
-        flex-grow: 1;
-        line-height: 1;
-        white-space: nowrap;
+  &--withAddOn {
+    display: flex;
+    flex-wrap: nowrap;

-        > input {
-            display: inline-block;
-            width: auto;
-            vertical-align: middle;
+    @include media-breakpoint-up(sm) {
+      &.#{$ns}Form-control--sizeXs,
+      &.#{$ns}Form-control--sizeSm,
+      &.#{$ns}Form-control--sizeMd,
+      &.#{$ns}Form-control--sizeLg {
+        display: inline-flex;
+
+        > .#{$ns}TextControl-input {
+          min-width: unset;
        }
+      }
+    }
+  }
+
+  &--withAddOn > &-input {
+    flex-basis: 1;
+    flex-grow: 1;
+    width: 0;
+
+    border-radius: 0;
+
+    &:first-child {
+      border-top-left-radius: $Form-input-borderRadius;
+      border-bottom-left-radius: $Form-input-borderRadius;
    }

-    &--withAddOn {
-        display: flex;
-        flex-wrap: nowrap;
-
-        @include media-breakpoint-up(sm) {
-            &.#{$ns}Form-control--sizeXs,
-            &.#{$ns}Form-control--sizeSm,
-            &.#{$ns}Form-control--sizeMd,
-            &.#{$ns}Form-control--sizeLg {
-                display: inline-flex;
-
-                > .#{$ns}TextControl-input {
-                    min-width: unset;
-                }
-            }
-        }
+    &:last-child {
+      border-top-right-radius: $Form-input-borderRadius;
+      border-bottom-right-radius: $Form-input-borderRadius;
    }

-    &--withAddOn > &-input {
-        flex-basis: 1;
-        flex-grow: 1;
+    @if $Form-input-addOnDividerBorderWidth==0 {
+      &:not(:last-child) {
+        border-right-width: 0;
+      }
+    }
+  }

-        border-radius: 0;
+  &--withAddOn > &-addOn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-left: px2rem(10px);
+    padding-right: px2rem(10px);
+    background: $Form-input-addOnBg;
+    color: $Form-input-addOnColor;
+    border-color: $Form-input-borderColor;
+    border-style: solid;
+    border-width: px2rem(1px) 0;

-        &:first-child {
-            border-top-left-radius: $Form-input-borderRadius;
-            border-bottom-left-radius: $Form-input-borderRadius;
-        }
-
-        &:last-child {
-            border-top-right-radius: $Form-input-borderRadius;
-            border-bottom-right-radius: $Form-input-borderRadius;
-        }
-
-        @if $Form-input-addOnDividerBorderWidth==0 {
-            &:not(:last-child) {
-                border-right-width: 0;
-            }
-        }
+    &:first-child {
+      border-left-width: px2rem(1px);
    }

-    &--withAddOn > &-addOn {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding-left: px2rem(10px);
-        padding-right: px2rem(10px);
-        background: $Form-input-addOnBg;
-        color: $Form-input-addOnColor;
-        border-color: $Form-input-borderColor;
-        border-style: solid;
-        border-width: px2rem(1px) 0;
+    &:last-child {
+      border-right-width: px2rem(1px);
+      border-top-right-radius: $Form-input-borderRadius;
+      border-bottom-right-radius: $Form-input-borderRadius;
+    }
+  }

-        &:first-child {
-            border-left-width: px2rem(1px);
-        }
-
-        &:last-child {
-            border-right-width: px2rem(1px);
-            border-top-right-radius: $Form-input-borderRadius;
-            border-bottom-right-radius: $Form-input-borderRadius;
-        }
+  &--withAddOn > &-button {
+    > .#{$ns}Button {
+      position: relative;
+      border-radius: 0;
+      margin-left: px2rem(-1px);
+      border: $InputGroup-button-borderWidth solid
+        $InputGroup-button-borderColor;
    }

-    &--withAddOn > &-button {
-        > .#{$ns}Button {
-            position: relative;
-            border-radius: 0;
-            margin-left: px2rem(-1px);
-            border: $InputGroup-button-borderWidth solid
-                $InputGroup-button-borderColor;
-        }
-
-        &:not(:last-child) .#{$ns}Button {
-            border-right: 0;
-        }
-
-        &:first-child .#{$ns}Button {
-            @if $InputGroup-button-borderRadius {
-                border-top-left-radius: $InputGroup-button-borderRadius;
-                border-bottom-left-radius: $InputGroup-button-borderRadius;
-            }
-        }
-
-        &:last-child .#{$ns}Button {
-            @if $InputGroup-button-borderRadius {
-                border-top-right-radius: $InputGroup-button-borderRadius;
-                border-bottom-right-radius: $InputGroup-button-borderRadius;
-            }
-        }
+    &:not(:last-child) .#{$ns}Button {
+      border-right: 0;
    }

-    &--withAddOn.is-focused > &-button .#{$ns}Button {
-        border-color: $Form-input-onFocused-borderColor;
+    &:first-child .#{$ns}Button {
+      @if $InputGroup-button-borderRadius {
+        border-top-left-radius: $InputGroup-button-borderRadius;
+        border-bottom-left-radius: $InputGroup-button-borderRadius;
+      }
    }

-    &--withAddOn.is-error > &-addOn {
-        border-color: $Form-input-onError-borderColor;
+    &:last-child .#{$ns}Button {
+      @if $InputGroup-button-borderRadius {
+        border-top-right-radius: $InputGroup-button-borderRadius;
+        border-bottom-right-radius: $InputGroup-button-borderRadius;
+      }
+    }
+  }
+
+  &--withAddOn.is-focused > &-button .#{$ns}Button {
+    border-color: $Form-input-onFocused-borderColor;
+  }
+
+  &--withAddOn.is-error > &-addOn {
+    border-color: $Form-input-onError-borderColor;
+  }
+
+  &--withAddOn.is-focused > &-addOn {
+    border-color: $Form-input-onFocused-borderColor;
+    color: $Form-input-onFocus-addOnColor;
+    box-shadow: $Form-input-boxShadow;
+  }
+
+  &--withAddOn.is-disabled > &-addOn {
+    color: $text--muted-color;
+  }
+
+  &-input--withAC {
+    position: relative;
+    flex-wrap: wrap;
+
+    input {
+      width: auto;
+      color: $Form-input-placeholderColor;
+    }
+  }
+
+  &-sugs {
+    position: absolute;
+    background: $Form-select-menu-bg;
+    color: $Form-select-menu-color;
+    border: $Form-input-borderWidth solid $Form-input-onFocused-borderColor;
+    left: px2rem(-1px);
+    right: px2rem(-1px);
+    top: 100%;
+    z-index: 10;
+  }
+
+  &-sugItem {
+    padding: (
+        $Form-selectOption-height - $Form-input-lineHeight *
+          $Form-input-fontSize - px2rem(2px)
+      )/2 px2rem(12px);
+
+    svg {
+      width: px2rem(16px);
+      margin-top: px2rem(4px);
+      float: right;
+      fill: darken($color: $Form-input-iconColor, $amount: 20%);
    }

-    &--withAddOn.is-focused > &-addOn {
-        border-color: $Form-input-onFocused-borderColor;
-        color: $Form-input-onFocus-addOnColor;
-        box-shadow: $Form-input-boxShadow;
+    &:not(.is-disabled) {
+      cursor: pointer;
    }

-    &--withAddOn.is-disabled > &-addOn {
-        color: $text--muted-color;
+    &.is-highlight {
+      color: $Form-select-menu-onHover-color;
+      background: $Form-select-menu-onHover-bg;
    }
+  }

-    &-input--withAC {
-        position: relative;
-        flex-wrap: wrap;
+  &-value {
+    user-select: none;
+    line-height: $Form-input-lineHeight * $Form-input-fontSize;
+    vertical-align: middle;
+    display: inline-block;
+  }

-        input {
-            width: auto;
-            color: $Form-input-placeholderColor;
-        }
+  &-input--multiple {
+    height: auto;
+    min-height: $Form-input-height;
+  }
+
+  &-input--multiple &-valueWrap {
+    white-space: normal;
+
+    margin-bottom: -$gap-xs;
+
+    > input {
+      margin-bottom: $gap-xs;
    }
+  }

-    &-sugs {
-        position: absolute;
-        background: $Form-select-menu-bg;
-        color: $Form-select-menu-color;
-        border: $Form-input-borderWidth solid $Form-input-onFocused-borderColor;
-        left: px2rem(-1px);
-        right: px2rem(-1px);
-        top: 100%;
-        z-index: 10;
+  &-input--multiple &-value {
+    line-height: $Form-input-lineHeight * $Form-input-fontSize - px2rem(2px);
+    font-size: $Form-selectValue-fontSize;
+    color: $Form-selectValue-color;
+    background: $Form-selectValue-bg;
+    border: px2rem(1px) solid $Form-selectValue-borderColor;
+    border-radius: px2rem(2px);
+    margin-right: $gap-xs;
+    margin-bottom: $gap-xs;
+  }
+
+  &-valueIcon {
+    cursor: pointer;
+    border-right: px2rem(1px) solid $Form-selectValue-borderColor;
+    padding: 1px 5px;
+
+    &:hover {
+      background-color: darken($Form-selectValue-bg, 5%);
    }
+  }

-    &-sugItem {
-        padding: (
-                $Form-selectOption-height - $Form-input-lineHeight *
-                    $Form-input-fontSize - px2rem(2px)
-            )/2 px2rem(12px);
-
-        svg {
-            width: px2rem(16px);
-            margin-top: px2rem(4px);
-            float: right;
-            fill: darken($color: $Form-input-iconColor, $amount: 20%);
-        }
-
-        &:not(.is-disabled) {
-            cursor: pointer;
-        }
-
-        &.is-highlight {
-            color: $Form-select-menu-onHover-color;
-            background: $Form-select-menu-onHover-bg;
-        }
-    }
-
-    &-value {
-        user-select: none;
-        line-height: $Form-input-lineHeight * $Form-input-fontSize;
-        vertical-align: middle;
-        display: inline-block;
-    }
-
-    &-input--multiple {
-        height: auto;
-        min-height: $Form-input-height;
-    }
-
-    &-input--multiple &-valueWrap {
-        white-space: normal;
-
-        margin-bottom: -$gap-xs;
-
-        > input {
-            margin-bottom: $gap-xs;
-        }
-    }
-
-    &-input--multiple &-value {
-        line-height: $Form-input-lineHeight * $Form-input-fontSize - px2rem(2px);
-        font-size: $Form-selectValue-fontSize;
-        color: $Form-selectValue-color;
-        background: $Form-selectValue-bg;
-        border: px2rem(1px) solid $Form-selectValue-borderColor;
-        border-radius: px2rem(2px);
-        margin-right: $gap-xs;
-        margin-bottom: $gap-xs;
-    }
-
-    &-valueIcon {
-        cursor: pointer;
-        border-right: px2rem(1px) solid $Form-selectValue-borderColor;
-        padding: 1px 5px;
-
-        &:hover {
-            background-color: darken($Form-selectValue-bg, 5%);
-        }
-    }
-
-    &-input--multiple &-valueLabel {
-        padding: 0 $gap-xs;
-    }
+  &-input--multiple &-valueLabel {
+    padding: 0 $gap-xs;
+  }
 }
--- a/scss/components/form/_textarea.scss
+++ b/scss/components/form/_textarea.scss
@ -1,28 +1,32 @@
 .#{$ns}TextareaControl {
-    border: 1px solid $Form-input-borderColor;
-    border-radius: $Form-input-borderRadius;
-    line-height: $Form-input-lineHeight;
-    background: $Form-input-bg;
-    padding: px2rem(6px) ($Form-input-height - $Form-input-lineHeight * $Form-input-fontSize - px2rem(2px));
-    font-size: $Form-input-fontSize;
-    outline: none;
-    resize: none;
-    display: block;
-    width: 100%;
+  border: 1px solid $Form-input-borderColor;
+  border-radius: $Form-input-borderRadius;
+  line-height: $Form-input-lineHeight;
+  background: $Form-input-bg;
+  padding: px2rem(6px)
+    (
+      $Form-input-height - $Form-input-lineHeight * $Form-input-fontSize -
+        px2rem(2px)
+    );
+  font-size: $Form-input-fontSize;
+  outline: none;
+  resize: none;
+  display: block;
+  width: 100%;

-    &.is-error {
-        border-color: $Form-input-onError-borderColor;
-    }
+  &.is-error {
+    border-color: $Form-input-onError-borderColor;
+  }

-    &:focus,
-    &.is-focused {
-        border-color: $Form-input-onFocused-borderColor;
-        box-shadow: $Form-input-boxShadow;
-    }
+  &:focus,
+  &.is-focused {
+    border-color: $Form-input-onFocused-borderColor;
+    box-shadow: $Form-input-boxShadow;
+  }

-    &.is-disabled,
-    &[disabled] {
-        background: $gray200;
-        color: $text--muted-color;
-    }
+  &.is-disabled,
+  &[disabled] {
+    background: $gray200;
+    color: $text--muted-color;
+  }
 }
--- a/scss/components/form/_transfer-select.scss
+++ b/scss/components/form/_transfer-select.scss
@ -1,120 +1,120 @@
 .#{$ns}TransferSelectControl {
-    display: flex;
-    height: px2rem(300px);
+  display: flex;
+  height: px2rem(300px);

-    .#{$ns}TransferSelect {
-        &-allOptions,
-        &-selectedOptions {
-            height: 100%;
-            flex: 1;
-            border: $borderWidth solid $borderColor;
-            overflow: auto;
+  .#{$ns}TransferSelect {
+    &-allOptions,
+    &-selectedOptions {
+      height: 100%;
+      flex: 1;
+      border: $borderWidth solid $borderColor;
+      overflow: auto;

-            .#{$ns}TransferSelect-heading {
-                position: relative;
-                height: px2rem(40px);
-                line-height: px2rem(40px);
-                padding-left: px2rem(20px);
-                border-bottom: $TransferSelect-heading-borderBottom;
-            }
+      .#{$ns}TransferSelect-heading {
+        position: relative;
+        height: px2rem(40px);
+        line-height: px2rem(40px);
+        padding-left: px2rem(20px);
+        border-bottom: $TransferSelect-heading-borderBottom;
+      }

-            .#{$ns}TransferSelect-body {
-                table tbody tr td,
-                ul li {
-                    position: relative;
-                }
-
-                ul {
-                    margin: 0;
-                    padding: 0;
-                    padding-top: px2rem(10px);
-                }
-
-                li {
-                    height: px2rem(30px);
-                    line-height: px2rem(30px);
-                    list-style: none;
-                    padding-left: px2rem(20px);
-                }
-            }
-
-            .#{$ns}TransferSelect-selectAll,
-            .#{$ns}TransferSelect-clearAll {
-                position: absolute;
-                right: 20px;
-                cursor: pointer;
-                color: $primary;
-            }
-
-            .#{$ns}TransferSelect-searchWrapper {
-                i {
-                    height: px2rem(17px);
-                    line-height: px2rem(17px);
-                }
-            }
+      .#{$ns}TransferSelect-body {
+        table tbody tr td,
+        ul li {
+          position: relative;
        }

-        &-allOptions {
-            &--table {
-                .#{$ns}TransferSelect-heading {
-                    background-color: $TransferSelect--table-heading-bg;
-                    display: flex;
-                }
-
-                .#{$ns}TransferSelect-searchWrapper {
-                    display: inline-block;
-                    padding: px2rem(3px) px2rem(10px);
-                    flex: 1;
-                    margin-left: px2rem(30px);
-                }
-            }
-
-            &--normal {
-                .#{$ns}TransferSelect-heading {
-                    background-color: $TransferSelect--normal-heading-bg;
-                }
-
-                .#{$ns}TransferSelect-searchWrapper {
-                    padding: px2rem(10px) px2rem(20px);
-                }
-            }
+        ul {
+          margin: 0;
+          padding: 0;
+          padding-top: px2rem(10px);
        }

-        &-selectedOptions {
-            &--table {
-                .#{$ns}TransferSelect-heading {
-                    background-color: $TransferSelect--table-heading-bg;
-                }
-            }
-
-            &--normal {
-                .#{$ns}TransferSelect-heading {
-                    background-color: $TransferSelect--normal-heading-bg;
-                }
-            }
+        li {
+          height: px2rem(30px);
+          line-height: px2rem(30px);
+          list-style: none;
+          padding-left: px2rem(20px);
        }
+      }

-        &-option-close {
-            width: px2rem(12px);
-            height: px2rem(12px);
-            position: absolute;
-            right: px2rem(20px);
-            cursor: pointer;
-        }
-
-        &-action {
-            padding: 0 px2rem(20px);
-
-            .#{$ns}TransferSelect-actionIcon {
-                display: inline-block;
-                width: 0;
-                height: 0;
-                border-top: px2rem(12px) solid transparent;
-                border-left: px2rem(12px) solid #b7b7b7;
-                border-bottom: px2rem(12px) solid transparent;
-                position: relative;
-                top: calc(50% - 6px);
-            }
+      .#{$ns}TransferSelect-selectAll,
+      .#{$ns}TransferSelect-clearAll {
+        position: absolute;
+        right: 20px;
+        cursor: pointer;
+        color: $primary;
+      }
+
+      .#{$ns}TransferSelect-searchWrapper {
+        i {
+          height: px2rem(17px);
+          line-height: px2rem(17px);
        }
+      }
    }
+
+    &-allOptions {
+      &--table {
+        .#{$ns}TransferSelect-heading {
+          background-color: $TransferSelect--table-heading-bg;
+          display: flex;
+        }
+
+        .#{$ns}TransferSelect-searchWrapper {
+          display: inline-block;
+          padding: px2rem(3px) px2rem(10px);
+          flex: 1;
+          margin-left: px2rem(30px);
+        }
+      }
+
+      &--normal {
+        .#{$ns}TransferSelect-heading {
+          background-color: $TransferSelect--normal-heading-bg;
+        }
+
+        .#{$ns}TransferSelect-searchWrapper {
+          padding: px2rem(10px) px2rem(20px);
+        }
+      }
+    }
+
+    &-selectedOptions {
+      &--table {
+        .#{$ns}TransferSelect-heading {
+          background-color: $TransferSelect--table-heading-bg;
+        }
+      }
+
+      &--normal {
+        .#{$ns}TransferSelect-heading {
+          background-color: $TransferSelect--normal-heading-bg;
+        }
+      }
+    }
+
+    &-option-close {
+      width: px2rem(12px);
+      height: px2rem(12px);
+      position: absolute;
+      right: px2rem(20px);
+      cursor: pointer;
+    }
+
+    &-action {
+      padding: 0 px2rem(20px);
+
+      .#{$ns}TransferSelect-actionIcon {
+        display: inline-block;
+        width: 0;
+        height: 0;
+        border-top: px2rem(12px) solid transparent;
+        border-left: px2rem(12px) solid #b7b7b7;
+        border-bottom: px2rem(12px) solid transparent;
+        position: relative;
+        top: calc(50% - 6px);
+      }
+    }
+  }
 }
--- a/scss/components/form/_tree-select.scss
+++ b/scss/components/form/_tree-select.scss
@ -1,134 +1,134 @@
 // todo
 .#{$ns}TreeSelectControl {
-    position: relative;
+  position: relative;
 }

 .#{$ns}TreeSelect {
-    @include input-text();
-    outline: none;
+  @include input-text();
+  outline: none;

-    &.is-opened > &-input {
-        border-color: $Form-input-onFocused-borderColor;
-        box-shadow: $Form-input-boxShadow;
+  &.is-opened > &-input {
+    border-color: $Form-input-onFocused-borderColor;
+    box-shadow: $Form-input-boxShadow;

-        @if $Form-input-onFocused-bg !=$Form-input-bg {
-            background-color: $Form-input-onFocused-bg;
-        }
+    @if $Form-input-onFocused-bg !=$Form-input-bg {
+      background-color: $Form-input-onFocused-bg;
+    }
+  }
+
+  &-placeholder {
+    color: $Form-input-placeholderColor;
+    user-select: none;
+    position: absolute;
+    // margin-top: 2 * $Form-input-borderWidth;
+    line-height: $Form-input-lineHeight;
+  }
+
+  &-input {
+    min-height: $Form-input-height;
+    height: auto;
+  }
+
+  &-valueWrap {
+    flex-grow: 1;
+    position: relative;
+  }
+
+  &--searchable {
+    .#{$ns}TreeSelect-placeholder,
+    .#{$ns}TreeSelect-value {
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+  }
+
+  &--multi {
+    &.#{$ns}TreeSelect--searchable {
+      .#{$ns}TreeSelect-value {
+        position: static;
+      }
    }

-    &-placeholder {
-        color: $Form-input-placeholderColor;
-        user-select: none;
-        position: absolute;
-        // margin-top: 2 * $Form-input-borderWidth;
-        line-height: $Form-input-lineHeight;
+    .#{$ns}TreeSelect-valueWrap {
+      margin-bottom: -$gap-xs;
+      line-height: 1;
+
+      > input {
+        width: auto;
+      }
    }

-    &-input {
-        min-height: $Form-input-height;
-        height: auto;
+    .#{$ns}TreeSelect-value {
+      cursor: pointer;
+      user-select: none;
+      white-space: nowrap;
+      vertical-align: middle;
+      line-height: $Form-input-lineHeight * $Form-input-fontSize - px2rem(2px);
+      display: inline-block;
+      font-size: $Form-selectValue-fontSize;
+      color: $Form-selectValue-color;
+      background: $Form-selectValue-bg;
+      border: px2rem(1px) solid $Form-selectValue-borderColor;
+      border-radius: 2px;
+      margin-right: $gap-xs;
+      margin-bottom: $gap-xs;
+
+      &.is-disabled {
+        pointer-events: none;
+        opacity: $Button-onDisabled-opacity;
+      }
    }

-    &-valueWrap {
-        flex-grow: 1;
-        position: relative;
+    .#{$ns}TreeSelect-valueIcon {
+      cursor: pointer;
+      border-right: px2rem(1px) solid $Form-selectValue-borderColor;
+      padding: 1px 5px;
+
+      &:hover {
+        background-color: darken($Form-selectValue-bg, 5%);
+      }
    }

-    &--searchable {
-        .#{$ns}TreeSelect-placeholder,
-        .#{$ns}TreeSelect-value {
-            position: absolute;
-            top: 0;
-            left: 0;
-        }
+    .#{$ns}TreeSelect-valueLabel {
+      padding: 0 $gap-xs;
    }
+  }

-    &--multi {
-        &.#{$ns}TreeSelect--searchable {
-            .#{$ns}TreeSelect-value {
-                position: static;
-            }
-        }
+  &-arrow {
+    width: px2rem(20px);
+    cursor: pointer;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;

-        .#{$ns}TreeSelect-valueWrap {
-            margin-bottom: -$gap-xs;
-            line-height: 1;
-
-            > input {
-                width: auto;
-            }
-        }
-
-        .#{$ns}TreeSelect-value {
-            cursor: pointer;
-            user-select: none;
-            white-space: nowrap;
-            vertical-align: middle;
-            line-height: $Form-input-lineHeight * $Form-input-fontSize - px2rem(2px);
-            display: inline-block;
-            font-size: $Form-selectValue-fontSize;
-            color: $Form-selectValue-color;
-            background: $Form-selectValue-bg;
-            border: px2rem(1px) solid $Form-selectValue-borderColor;
-            border-radius: 2px;
-            margin-right: $gap-xs;
-            margin-bottom: $gap-xs;
-
-            &.is-disabled {
-                pointer-events: none;
-                opacity: $Button-onDisabled-opacity;
-            }
-        }
-
-        .#{$ns}TreeSelect-valueIcon {
-            cursor: pointer;
-            border-right: px2rem(1px) solid $Form-selectValue-borderColor;
-            padding: 1px 5px;
-
-            &:hover {
-                background-color: darken($Form-selectValue-bg, 5%);
-            }
-        }
-
-        .#{$ns}TreeSelect-valueLabel {
-            padding: 0 $gap-xs;
-        }
-    }
-
-    &-arrow {
-        width: px2rem(20px);
-        cursor: pointer;
-        text-align: center;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        &:before {
-            content: '';
-            border-color: $Form-input-iconColor transparent transparent;
-            border-style: solid;
-            border-width: px2rem(5px) px2rem(5px) px2rem(2.5px);
-            display: inline-block;
-            height: 0;
-            width: 0;
-            position: relative;
-            top: px2rem(2px);
-        }
+    &:before {
+      content: '';
+      border-color: $Form-input-iconColor transparent transparent;
+      border-style: solid;
+      border-width: px2rem(5px) px2rem(5px) px2rem(2.5px);
+      display: inline-block;
+      height: 0;
+      width: 0;
+      position: relative;
+      top: px2rem(2px);
    }
+  }
 }

 .#{$ns}TreeSelect-popover {
-    background: transparent;
-    border: none;
-    box-shadow: none;
+  background: transparent;
+  border: none;
+  box-shadow: none;

-    > .#{$ns}Tree {
-        background: $TreeSelect-popover-bg;
-        border: $Form-input-borderWidth solid $Form-input-onFocused-borderColor;
-        padding: $gap-xs $Form-input-paddingX;
-        border-radius: 0;
-        margin-top: -1px;
-        max-height: 400px;
-        overflow: auto;
-    }
+  > .#{$ns}Tree {
+    background: $TreeSelect-popover-bg;
+    border: $Form-input-borderWidth solid $Form-input-onFocused-borderColor;
+    padding: $gap-xs $Form-input-paddingX;
+    border-radius: 0;
+    margin-top: -1px;
+    max-height: 400px;
+    overflow: auto;
+  }
 }
--- a/scss/components/form/_tree.scss
+++ b/scss/components/form/_tree.scss
@ -1,273 +1,294 @@
 .#{$ns}TreeControl {
-    border: 1px solid $Form-input-borderColor;
-    padding: 6px 12px;
-    border-radius: 2px;
-    max-height: 300px;
-    overflow: auto;
+  border: 1px solid $Form-input-borderColor;
+  padding: 6px 12px;
+  border-radius: 2px;
+  max-height: 300px;
+  overflow: auto;

-    &.h-full {
-        max-height: none;
-        overflow: visible;
-    }
+  &.h-full {
+    max-height: none;
+    overflow: visible;
+  }

-    &.no-border {
-        border: 0;
-    }
+  &.no-border {
+    border: 0;
+  }
 }

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

-    &-list,
-    &-sublist {
-        list-style: none;
-        padding: 0;
-        margin: 0;
-    }
+  &-sublist.is-folded {
+    display: none;
+  }

-    &-sublist.is-folded {
-        display: none;
-    }
+  &-item {
+    line-height: $Tree-itemHeight;
+    position: relative;

-    &-item {
-        line-height: $Tree-itemHeight;
+    > div {
+      &:hover {
+        text-decoration: none;
+
+        > .#{$ns}Tree-item-icons {
+          visibility: visible;
+        }
+      }
+
+      > span > svg {
+        display: inline-block;
+        cursor: pointer;
        position: relative;
+        top: 2px;
+        width: px2rem(16px);
+        height: px2rem(16px);
+        margin-left: px2rem(5px);
+      }
+    }
+  }

-        >div {
-            &:hover {
-                text-decoration: none;
+  &-rootItem {
+    line-height: $Tree-itemHeight;
+  }

-                >.#{$ns}Tree-item-icons {
-                    visibility: visible;
-                }
-            }
+  &-item > div:hover > .#{$ns}Tree-item-icons,
+  &-rootItem > div:hover > .#{$ns}Tree-item-icons {
+    visibility: visible;
+  }

-            >span>svg {
-                display: inline-block;
-                cursor: pointer;
-                position: relative;
-                top: 2px;
-                width: px2rem(16px);
-                height: px2rem(16px);
-                margin-left: px2rem(5px);
-            }
-        }
+  &-itemLabel {
+    &:hover {
+      background: $Tree-item-onHover-bg;
+    }
+  }
+
+  &-item-icons {
+    visibility: hidden;
+    transition: visibility 0.1s ease;
+    display: inline-block;
+    vertical-align: top;
+    height: $Tree-itemHeight;
+    line-height: $Tree-itemHeight;
+
+    > a {
+      display: inline-block;
+      vertical-align: middle;
+      margin-left: $gap-xs;
+      cursor: pointer;
+
+      > svg {
+        $svgSize: px2rem(16px);
+        width: $svgSize;
+        height: $svgSize;
+        top: 0.125 * $svgSize;
+      }
+    }
+  }
+
+  &-itemInput {
+    padding-left: $Tree-itemArrowWidth;
+
+    > a {
+      display: inline-block;
+      cursor: pointer;
+      margin-left: $gap-sm;
+      color: $icon-color;
+
+      &:hover {
+        color: $icon-onHover-color;
+        text-decoration: none;
+      }
    }

-    &-rootItem {
-        line-height: $Tree-itemHeight;
-    }
+    > input {
+      outline: none;
+      background-color: $Form-input-bg;
+      border: $Form-input-borderWidth solid $Form-input-borderColor;
+      border-radius: $Form-input-borderRadius;
+      line-height: $Form-input-lineHeight;
+      padding: (
+          $Tree-inputHeight - $Form-input-lineHeight * $Form-input-fontSize -
+            px2rem(2px)
+        )/2 $Form-input-paddingX;
+      font-size: $Form-input-fontSize;

-    &-item>div:hover>.#{$ns}Tree-item-icons,
-    &-rootItem>div:hover>.#{$ns}Tree-item-icons {
-        visibility: visible;
-    }
-
-    &-itemLabel {
-        &:hover {
-            background: $Tree-item-onHover-bg;
-        }
-    }
-
-    &-item-icons {
-        visibility: hidden;
-        transition: visibility .1s ease;
-        display: inline-block;
-        vertical-align: top;
-        height: $Tree-itemHeight;
-        line-height: $Tree-itemHeight;
-
-        >a {
-            display: inline-block;
-            vertical-align: middle;
-            margin-left: $gap-xs;
-            cursor: pointer;
-
-            >svg {
-                $svgSize: px2rem(16px);
-                width: $svgSize;
-                height: $svgSize;
-                top: 0.125 * $svgSize;
-            }
-        }
-    }
-
-    &-itemInput {
-        padding-left: $Tree-itemArrowWidth;
-
-        >a {
-            display: inline-block;
-            cursor: pointer;
-            margin-left: $gap-sm;
-            color: $icon-color;
-
-            &:hover {
-                color: $icon-onHover-color;
-                text-decoration: none;
-            }
-        }
-
-        >input {
-            outline: none;
-            background-color: $Form-input-bg;
-            border: $Form-input-borderWidth solid $Form-input-borderColor;
-            border-radius: $Form-input-borderRadius;
-            line-height: $Form-input-lineHeight;
-            padding: ($Tree-inputHeight - $Form-input-lineHeight * $Form-input-fontSize - px2rem(2px))/2 $Form-input-paddingX;
-            font-size: $Form-input-fontSize;
-
-            &::placeholder {
-                color: $Form-input-placeholderColor;
-                user-select: none;
-            }
-
-            &:focus {
-                border-color: $Form-input-onFocused-borderColor;
-                box-shadow: $Form-input-boxShadow;
-
-                @if $Form-input-onFocused-bg !=$Form-input-bg {
-                    background-color: $Form-input-onFocused-bg;
-                }
-            }
-        }
-    }
-
-    &-addTopBtn {
-        cursor: pointer;
-        height: $Tree-itemHeight;
-        line-height: $Tree-itemHeight;
-        display: block;
-
-        &:hover {
-            text-decoration: none;
-        }
-
-        &.is-disabled {
-            pointer-events: none;
-            color: $text--muted-color;
-        }
-
-        >svg {
-            $svgSize: px2rem(14px);
-            width: $svgSize;
-            height: $svgSize;
-            top: $svgSize * 0.125;
-            margin-right: $Tree-itemArrowWidth - px2rem(14px); // icon 的宽度是14px
-        }
-    }
-
-    &-itemArrow {
-        cursor: pointer;
-        width: $Tree-itemArrowWidth;
-        text-align: center;
-        display: inline-block;
-
-        &:before {
-            font-style: normal;
-            font-family: $Tree-arrowVendor;
-            content: $Tree-unfoldedArrowContent;
-        }
-
-        &.is-folded:before {
-            content: $Tree-foldedArrowContent;
-        }
-    }
-
-    &-itemArrowPlaceholder {
-        display: inline-block;
-        width: $Tree-itemArrowWidth;
-    }
-
-    &-itemIcon {
-        display: inline-block;
-        margin-right: px2rem(3px);
-    }
-
-    &-rootIcon {
-        &:before {
-            font-style: normal;
-            font-family: $Tree-rootIconVendor;
-            content: $Tree-rootIconContent;
-        }
-    }
-
-    &-leafIcon {
-        &:before {
-            font-style: normal;
-            font-family: $Tree-leafIconVendor;
-            content: $Tree-leafIconContent;
-        }
-    }
-
-    &-folderIcon {
-        &:before {
-            font-style: normal;
-            font-family: $Tree-folderIconVendor;
-            content: $Tree-folderIconContent;
-        }
-    }
-
-    &-itemLabel {
+      &::placeholder {
+        color: $Form-input-placeholderColor;
        user-select: none;
+      }

-        &.is-checked,
-        &.is-children-checked {
-            color: $Tree-itemLabel--onChecked-color;
+      &:focus {
+        border-color: $Form-input-onFocused-borderColor;
+        box-shadow: $Form-input-boxShadow;
+
+        @if $Form-input-onFocused-bg !=$Form-input-bg {
+          background-color: $Form-input-onFocused-bg;
        }
+      }
+    }
+  }

-        &.is-disabled {
-            color: $text--muted-color;
-        }
+  &-addTopBtn {
+    cursor: pointer;
+    height: $Tree-itemHeight;
+    line-height: $Tree-itemHeight;
+    display: block;
+
+    &:hover {
+      text-decoration: none;
    }

-    &-itemText {
-        cursor: pointer;
+    &.is-disabled {
+      pointer-events: none;
+      color: $text--muted-color;
    }

-    &-placeholder {
-        color: $text--muted-color;
+    > svg {
+      $svgSize: px2rem(14px);
+      width: $svgSize;
+      height: $svgSize;
+      top: $svgSize * 0.125;
+      margin-right: $Tree-itemArrowWidth - px2rem(14px); // icon 的宽度是14px
+    }
+  }
+
+  &-itemArrow {
+    cursor: pointer;
+    width: $Tree-itemArrowWidth;
+    text-align: center;
+    display: inline-block;
+
+    &:before {
+      font-style: normal;
+      font-family: $Tree-arrowVendor;
+      content: $Tree-unfoldedArrowContent;
    }

+    &.is-folded:before {
+      content: $Tree-foldedArrowContent;
+    }
+  }

+  &-itemArrowPlaceholder {
+    display: inline-block;
+    width: $Tree-itemArrowWidth;
+  }

-    &-item &-item>&-itemLabel,
-    &-item &-item>&-placeholder {
-        padding-left: $Tree-indent;
+  &-itemIcon {
+    display: inline-block;
+    margin-right: px2rem(3px);
+  }
+
+  &-rootIcon {
+    &:before {
+      font-style: normal;
+      font-family: $Tree-rootIconVendor;
+      content: $Tree-rootIconContent;
+    }
+  }
+
+  &-leafIcon {
+    &:before {
+      font-style: normal;
+      font-family: $Tree-leafIconVendor;
+      content: $Tree-leafIconContent;
+    }
+  }
+
+  &-folderIcon {
+    &:before {
+      font-style: normal;
+      font-family: $Tree-folderIconVendor;
+      content: $Tree-folderIconContent;
+    }
+  }
+
+  &-itemLabel {
+    user-select: none;
+
+    &.is-checked,
+    &.is-children-checked {
+      color: $Tree-itemLabel--onChecked-color;
    }

-    &-item &-item &-item>&-itemLabel,
-    &-item &-item &-item>&-placeholder {
-        padding-left: $Tree-indent * 2;
+    &.is-disabled {
+      color: $text--muted-color;
    }
+  }

-    &-item &-item &-item &-item>&-itemLabel {
-        padding-left: $Tree-indent * 3;
-    }
+  &-itemText {
+    cursor: pointer;
+  }

-    &-item &-item &-item &-item &-item>&-itemLabel {
-        padding-left: $Tree-indent * 4;
-    }
+  &-placeholder {
+    color: $text--muted-color;
+  }

-    &-item &-item &-item &-item &-item &-item>&-itemLabel {
-        padding-left: $Tree-indent * 5;
-    }
+  &-item &-item > &-itemLabel,
+  &-item &-item > &-placeholder {
+    padding-left: $Tree-indent;
+  }

-    &-item &-item &-item &-item &-item &-item &-item>&-itemLabel {
-        padding-left: $Tree-indent * 6;
-    }
+  &-item &-item &-item > &-itemLabel,
+  &-item &-item &-item > &-placeholder {
+    padding-left: $Tree-indent * 2;
+  }

-    &-item &-item &-item &-item &-item &-item &-item &-item>&-itemLabel {
-        padding-left: $Tree-indent * 7;
-    }
+  &-item &-item &-item &-item > &-itemLabel {
+    padding-left: $Tree-indent * 3;
+  }

-    &-item &-item &-item &-item &-item &-item &-item &-item &-item>&-itemLabel {
-        padding-left: $Tree-indent * 8;
-    }
+  &-item &-item &-item &-item &-item > &-itemLabel {
+    padding-left: $Tree-indent * 4;
+  }

-    &-item &-item &-item &-item &-item &-item &-item &-item &-item &-item>&-itemLabel {
-        padding-left: $Tree-indent * 9;
-    }
+  &-item &-item &-item &-item &-item &-item > &-itemLabel {
+    padding-left: $Tree-indent * 5;
+  }

-    &-item &-item &-item &-item &-item &-item &-item &-item &-item &-item &-item>&-itemLabel {
-        padding-left: $Tree-indent * 10;
-    }
-}
+  &-item &-item &-item &-item &-item &-item &-item > &-itemLabel {
+    padding-left: $Tree-indent * 6;
+  }
+
+  &-item &-item &-item &-item &-item &-item &-item &-item > &-itemLabel {
+    padding-left: $Tree-indent * 7;
+  }
+
+  &-item &-item &-item &-item &-item &-item &-item &-item &-item > &-itemLabel {
+    padding-left: $Tree-indent * 8;
+  }
+
+  &-item
+    &-item
+    &-item
+    &-item
+    &-item
+    &-item
+    &-item
+    &-item
+    &-item
+    &-item
+    > &-itemLabel {
+    padding-left: $Tree-indent * 9;
+  }
+
+  &-item
+    &-item
+    &-item
+    &-item
+    &-item
+    &-item
+    &-item
+    &-item
+    &-item
+    &-item
+    &-item
+    > &-itemLabel {
+    padding-left: $Tree-indent * 10;
+  }
+}
--- a/scss/layout/_aside.scss
+++ b/scss/layout/_aside.scss
@ -1,297 +1,305 @@
 .#{$ns}AsideNav {
-    @include clearfix();
+  @include clearfix();

-    &-label {
-        color: $Layout-asideLabel-color;
-        margin-top: $gap-base;
-        margin-bottom: $gap-sm;
-        font-size: $fontSizeXs;
-        padding-left: $gap-base;
-        padding-right: $gap-base;
+  &-label {
+    color: $Layout-asideLabel-color;
+    margin-top: $gap-base;
+    margin-bottom: $gap-sm;
+    font-size: $fontSizeXs;
+    padding-left: $gap-base;
+    padding-right: $gap-base;
+  }
+
+  &-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  &-itemArrow {
+    float: right;
+    display: block;
+    width: px2rem(20px);
+    text-align: center;
+    line-height: px2rem(17px);
+
+    &::before {
+      content: $Layout-asideLink-arrowIcon;
+      display: inline-block;
+      font-family: $Layout-asideLink-arrowVendor;
+      transform-origin: center;
+      color: $Layout-asideLink-arrowColor;
+      font-size: $Layout-asideLink-arrowFontSize;
    }

-    &-list {
-        list-style: none;
-        padding: 0;
-        margin: 0;
+    .#{$ns}AsideNav-item.is-open > a > &::before {
+      transform: rotate(90deg);
+      color: $Layout-asideLink-onActive-arrowColor;
+    }
+  }
+
+  &-itemBadge {
+    padding: px2rem(2px) px2rem(5px);
+    margin-top: px2rem(2px);
+    font-size: $fontSizeXs;
+    text-shadow: 0 px2rem(1px) 0 rgba(0, 0, 0, 0.2);
+    float: right;
+    min-width: px2rem(1px);
+    line-height: 1;
+    font-weight: $fontWeightBold;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: baseline;
+    border-radius: px2rem(10px);
+  }
+
+  &-itemIcon {
+    margin: ($Layout-nav-height - $lineHeightBase * $Layout-asideLink-fontSize)/-2
+      px2rem(-10px);
+    line-height: $Layout-nav-height;
+    width: $Layout-nav-height;
+    vertical-align: middle;
+    float: left;
+    margin-right: 0;
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+    color: $Layout-asideLink-iconColor;
+    font-size: $Layout-asideLink-onHover-iconSize;
+
+    &:before {
+      position: relative;
+      z-index: 2;
+    }
+  }
+
+  &-subList {
+    margin: 0;
+    padding: 0;
+    opacity: 0;
+    height: 0;
+    overflow: hidden;
+    margin-left: px2rem(-20px);
+    transition: all 0.2s ease-in-out 0s;
+    background-color: $Layout-aside-subList-bg;
+
+    .is-open > &,
+    .#{$ns}Layout--folded .#{$ns}AsideNav-item:hover > &,
+    .#{$ns}Layout--folded .#{$ns}AsideNav-item:focus > &,
+    .#{$ns}Layout--folded .#{$ns}AsideNav-item:active > & {
+      opacity: 1;
+      margin-left: 0;
+      height: auto !important;
+      overflow: visible;
    }

-    &-itemArrow {
-        float: right;
-        display: block;
-        width: px2rem(20px);
-        text-align: center;
-        line-height: px2rem(17px);
+    .#{$ns}Layout--folded .#{$ns}AsideNav-item.is-open > & {
+      overflow: hidden;
+    }
+  }

-        &::before {
-            content: $Layout-asideLink-arrowIcon;
-            display: inline-block;
-            font-family: $Layout-asideLink-arrowVendor;
-            transform-origin: center;
-            color: $Layout-asideLink-arrowColor;
-            font-size: $Layout-asideLink-arrowFontSize;
-        }
+  &-item {
+    position: relative;
+    display: block;

-        .#{$ns}AsideNav-item.is-open > a > &::before {
-            transform: rotate(90deg);
-            color: $Layout-asideLink-onActive-arrowColor;
+    a {
+      font-weight: normal;
+      cursor: pointer;
+      text-transform: none;
+      display: block;
+      font-size: $Layout-asideLink-fontSize;
+      padding: (
+          $Layout-nav-height - $lineHeightBase * $Layout-asideLink-fontSize
+        )/2 px2rem(15px);
+      position: relative;
+      transition: background-color 0.2s ease-in-out 0s;
+      color: $Layout-asideLink-color;
+      text-decoration: none;
+      user-select: none;
+
+      &:hover {
+        color: $Layout-asideLink-onHover-color;
+        text-decoration: none;
+        background-color: $Layout-aside-onHover-bg;
+
+        .#{$ns}AsideNav-itemIcon {
+          color: $Layout-asideLink-onHover-iconColor;
        }
+      }
    }

-    &-itemBadge {
-        padding: px2rem(2px) px2rem(5px);
-        margin-top: px2rem(2px);
-        font-size: $fontSizeXs;
-        text-shadow: 0 px2rem(1px) 0 rgba(0, 0, 0, 0.2);
-        float: right;
-        min-width: px2rem(1px);
-        line-height: 1;
-        font-weight: $fontWeightBold;
-        text-align: center;
-        white-space: nowrap;
-        vertical-align: baseline;
-        border-radius: px2rem(10px);
+    &.is-active {
+      > a {
+        background-color: $Layout-aside-onAcitve-bg;
+        color: $Layout-asideLink-onActive-color;
+
+        &:hover {
+          background-color: $Layout-aside-onHover-bg;
+        }
+      }
    }

-    &-itemIcon {
-        margin: ($Layout-nav-height - $lineHeightBase * $Layout-asideLink-fontSize)/-2 px2rem(-10px);
-        line-height: $Layout-nav-height;
-        width: $Layout-nav-height;
-        vertical-align: middle;
-        float: left;
-        margin-right: 0;
-        text-align: center;
-        position: relative;
-        overflow: hidden;
-        color: $Layout-asideLink-iconColor;
-        font-size: $Layout-asideLink-onHover-iconSize;
-
-        &:before {
-            position: relative;
-            z-index: 2;
-        }
+    &.is-lg {
+      > a {
+        padding: (
+            $Layout-nav-lgHeight - $lineHeightBase * $Layout-asideLink-fontSize
+          )/2 px2rem(15px);
+      }
    }

-    &-subList {
-        margin: 0;
-        padding: 0;
-        opacity: 0;
-        height: 0;
-        overflow: hidden;
-        margin-left: px2rem(-20px);
-        transition: all 0.2s ease-in-out 0s;
-        background-color: $Layout-aside-subList-bg;
+    .#{$ns}AsideNav-item {
+      a {
+        padding-left: $Layout-nav-height + px2rem(5px);
+      }

-        .is-open > &,
-        .#{$ns}Layout--folded .#{$ns}AsideNav-item:hover > &,
-        .#{$ns}Layout--folded .#{$ns}AsideNav-item:focus > &,
-        .#{$ns}Layout--folded .#{$ns}AsideNav-item:active > & {
-            opacity: 1;
-            margin-left: 0;
-            height: auto !important;
-            overflow: visible;
-        }
+      .#{$ns}AsideNav-item a {
+        padding-left: $Layout-nav-height + px2rem(35px);
+      }

-        .#{$ns}Layout--folded .#{$ns}AsideNav-item.is-open > & {
-            overflow: hidden;
-        }
-    }
+      .#{$ns}AsideNav-item .#{$ns}AsideNav-item a {
+        padding-left: $Layout-nav-height + px2rem(65px);
+      }

-    &-item {
-        position: relative;
-        display: block;
-
-        a {
-            font-weight: normal;
-            cursor: pointer;
-            text-transform: none;
-            display: block;
-            font-size: $Layout-asideLink-fontSize;
-            padding: ($Layout-nav-height - $lineHeightBase * $Layout-asideLink-fontSize)/2 px2rem(15px);
-            position: relative;
-            transition: background-color 0.2s ease-in-out 0s;
-            color: $Layout-asideLink-color;
-            text-decoration: none;
-            user-select: none;
-
-            &:hover {
-                color: $Layout-asideLink-onHover-color;
-                text-decoration: none;
-                background-color: $Layout-aside-onHover-bg;
-
-                .#{$ns}AsideNav-itemIcon {
-                    color: $Layout-asideLink-onHover-iconColor;
-                }
-            }
-        }
-
-        &.is-active {
-            > a {
-                background-color: $Layout-aside-onAcitve-bg;
-                color: $Layout-asideLink-onActive-color;
-
-                &:hover {
-                    background-color: $Layout-aside-onHover-bg;
-                }
-            }
-        }
-
-        &.is-lg {
-            > a {
-                padding: ($Layout-nav-lgHeight - $lineHeightBase * $Layout-asideLink-fontSize)/2 px2rem(15px);
-            }
-        }
-
-        .#{$ns}AsideNav-item {
-            a {
-                padding-left: $Layout-nav-height + px2rem(5px);
-            }
-
-            .#{$ns}AsideNav-item a {
-                padding-left: $Layout-nav-height + px2rem(35px);
-            }
-
-            .#{$ns}AsideNav-item .#{$ns}AsideNav-item a {
-                padding-left: $Layout-nav-height + px2rem(65px);
-            }
-
-            .#{$ns}AsideNav-subList {
-                display: none;
-            }
-
-            &.is-open .#{$ns}AsideNav-subList {
-                display: block;
-            }
-        }
-    }
-
-    &-subHeader {
+      .#{$ns}AsideNav-subList {
        display: none;
+      }

-        a {
-            cursor: default;
-            background: transparent;
-            color: darken($Layout-aside-color, 10%);
-            padding: ($Layout-nav--folded-height - $lineHeightBase * $Layout-asideLink-fontSize)/2 px2rem(20px);
-
-            &:hover {
-                color: darken($Layout-aside-color, 10%);
-                background: transparent;
-            }
-        }
+      &.is-open .#{$ns}AsideNav-subList {
+        display: block;
+      }
    }
+  }

-    &-tooltip {
-        pointer-events: none;
-        left: 0;
-        top: 50%;
-        transform: translateY(-50%);
-        position: absolute;
-        font-size: $Tooltip--attr-fontSize;
-        line-height: $Tooltip--attr-lineHeigt;
-        text-align: left;
-        white-space: nowrap;
-        background: $Tooltip--attr-bg;
-        border: $Tooltip--attr-borderWidth solid $Tooltip--attr-borderColor;
-        border-radius: $Tooltip--attr-borderRadius;
-        box-shadow: $Tooltip--attr-boxShadow;
-        left: 100%;
-        color: $Tooltip--attr-color;
-        padding: $Tooltip--attr-paddingY $Tooltip--attr-paddingX;
-        opacity: 0;
-        transition: $Tooltip--attr-transition;
-    }
+  &-subHeader {
+    display: none;

-    &-divider {
-        width: auto;
-        height: px2rem(1px);
-        margin: $Layout-asideDivider-margin;
-        overflow: hidden;
-        font-size: 0;
-        background-color: $Layout-asideDivider-bg;
+    a {
+      cursor: default;
+      background: transparent;
+      color: darken($Layout-aside-color, 10%);
+      padding: (
+          $Layout-nav--folded-height - $lineHeightBase *
+            $Layout-asideLink-fontSize
+        )/2 px2rem(20px);
+
+      &:hover {
+        color: darken($Layout-aside-color, 10%);
+        background: transparent;
+      }
    }
+  }
+
+  &-tooltip {
+    pointer-events: none;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    position: absolute;
+    font-size: $Tooltip--attr-fontSize;
+    line-height: $Tooltip--attr-lineHeigt;
+    text-align: left;
+    white-space: nowrap;
+    background: $Tooltip--attr-bg;
+    border: $Tooltip--attr-borderWidth solid $Tooltip--attr-borderColor;
+    border-radius: $Tooltip--attr-borderRadius;
+    box-shadow: $Tooltip--attr-boxShadow;
+    left: 100%;
+    color: $Tooltip--attr-color;
+    padding: $Tooltip--attr-paddingY $Tooltip--attr-paddingX;
+    opacity: 0;
+    transition: $Tooltip--attr-transition;
+  }
+
+  &-divider {
+    width: auto;
+    height: px2rem(1px);
+    margin: $Layout-asideDivider-margin;
+    overflow: hidden;
+    font-size: 0;
+    background-color: $Layout-asideDivider-bg;
+  }
 }

@include media-breakpoint-up(md) {
-    .#{$ns}Layout--folded {
-        .#{$ns}AsideNav-label {
-            display: none;
-        }
-
-        .#{$ns}AsideNav-subHeader {
-            display: block;
-        }
-
-        .#{$ns}AsideNav-item:hover > .#{$ns}AsideNav-tooltip {
-            opacity: 1;
-            z-index: $zindex-tooltip;
-            margin: 0 0 0 $Tooltip--attr-gap;
-            opacity: 1;
-        }
-
-        .#{$ns}AsideNav-list > .#{$ns}AsideNav-item > a {
-            text-align: center;
-            position: relative;
-            padding: 0;
-            text-align: center;
-            height: $Layout-nav--folded-height;
-            border: none;
-
-            .#{$ns}AsideNav-itemArrow,
-            .#{$ns}AsideNav-itemLabel {
-                display: none;
-            }
-
-            .#{$ns}AsideNav-itemIcon {
-                width: auto;
-                float: none !important;
-                display: block;
-                font-size: px2rem(16px);
-                margin: 0;
-                line-height: $Layout-nav--folded-height;
-                border: none !important;
-            }
-
-            .#{$ns}AsideNav-itemBadge {
-                position: absolute;
-                right: px2rem(12px);
-                top: px2rem(8px);
-                z-index: 3;
-            }
-        }
-
-        .#{$ns}AsideNav-list > .#{$ns}AsideNav-item.is-lg > a {
-            height: $Layout-nav-lgHeight;
-
-            .#{$ns}AsideNav-itemIcon {
-                line-height: $Layout-nav-lgHeight;
-            }
-        }
-
-        .#{$ns}AsideNav-item .#{$ns}AsideNav-item a {
-            padding-left: px2rem(20px) !important;
-        }
-
-        .#{$ns}AsideNav-subList {
-            height: 0 !important;
-            position: absolute;
-            left: 100%;
-            top: 0 !important;
-            z-index: 1050;
-            width: $Layout-aside-width;
-            box-shadow: 0 px2rem(2px) px2rem(6px) rgba(0, 0, 0, 0.1);
-        }
-
-        &.#{$ns}Layout--sm .#{$ns}AsideNav-subList {
-            width: $Layout-aside--sm-width;
-        }
-
-        &.#{$ns}Layout--md .#{$ns}AsideNav-subList {
-            width: $Layout-aside--md-width;
-        }
-
-        &.#{$ns}Layout--lg .#{$ns}AsideNav-subList {
-            width: $Layout-aside--lg-width;
-        }
+  .#{$ns}Layout--folded {
+    .#{$ns}AsideNav-label {
+      display: none;
    }
+
+    .#{$ns}AsideNav-subHeader {
+      display: block;
+    }
+
+    .#{$ns}AsideNav-item:hover > .#{$ns}AsideNav-tooltip {
+      opacity: 1;
+      z-index: $zindex-tooltip;
+      margin: 0 0 0 $Tooltip--attr-gap;
+      opacity: 1;
+    }
+
+    .#{$ns}AsideNav-list > .#{$ns}AsideNav-item > a {
+      text-align: center;
+      position: relative;
+      padding: 0;
+      text-align: center;
+      height: $Layout-nav--folded-height;
+      border: none;
+
+      .#{$ns}AsideNav-itemArrow,
+      .#{$ns}AsideNav-itemLabel {
+        display: none;
+      }
+
+      .#{$ns}AsideNav-itemIcon {
+        width: auto;
+        float: none !important;
+        display: block;
+        font-size: px2rem(16px);
+        margin: 0;
+        line-height: $Layout-nav--folded-height;
+        border: none !important;
+      }
+
+      .#{$ns}AsideNav-itemBadge {
+        position: absolute;
+        right: px2rem(12px);
+        top: px2rem(8px);
+        z-index: 3;
+      }
+    }
+
+    .#{$ns}AsideNav-list > .#{$ns}AsideNav-item.is-lg > a {
+      height: $Layout-nav-lgHeight;
+
+      .#{$ns}AsideNav-itemIcon {
+        line-height: $Layout-nav-lgHeight;
+      }
+    }
+
+    .#{$ns}AsideNav-item .#{$ns}AsideNav-item a {
+      padding-left: px2rem(20px) !important;
+    }
+
+    .#{$ns}AsideNav-subList {
+      height: 0 !important;
+      position: absolute;
+      left: 100%;
+      top: 0 !important;
+      z-index: 1050;
+      width: $Layout-aside-width;
+      box-shadow: 0 px2rem(2px) px2rem(6px) rgba(0, 0, 0, 0.1);
+    }
+
+    &.#{$ns}Layout--sm .#{$ns}AsideNav-subList {
+      width: $Layout-aside--sm-width;
+    }
+
+    &.#{$ns}Layout--md .#{$ns}AsideNav-subList {
+      width: $Layout-aside--md-width;
+    }
+
+    &.#{$ns}Layout--lg .#{$ns}AsideNav-subList {
+      width: $Layout-aside--lg-width;
+    }
+  }
 }
--- a/scss/layout/_grid.scss
+++ b/scss/layout/_grid.scss
@ -83,39 +83,39 @@
 // }

@mixin make-grid($class) {
-    // @include float-grid-columns($class);
-    // @include loop-grid-columns($Grid-columns, $class, width);
-    // @include loop-grid-columns($Grid-columns, $class, pull);
-    // @include loop-grid-columns($Grid-columns, $class, push);
-    // @include loop-grid-columns($Grid-columns, $class, offset);
+  // @include float-grid-columns($class);
+  // @include loop-grid-columns($Grid-columns, $class, width);
+  // @include loop-grid-columns($Grid-columns, $class, pull);
+  // @include loop-grid-columns($Grid-columns, $class, push);
+  // @include loop-grid-columns($Grid-columns, $class, offset);

-    @for $i from 1 through $Grid-columns {
-        .#{$ns}Grid-col--#{$class}#{$i} {
-            flex: 0 0 percentage($i / $Grid-columns);
-            max-width: percentage($i / $Grid-columns);
-            min-height: 1px;
-            padding-left: ($Grid-gutterWidth / 2);
-            padding-right: ($Grid-gutterWidth / 2);
-        }
+  @for $i from 1 through $Grid-columns {
+    .#{$ns}Grid-col--#{$class}#{$i} {
+      flex: 0 0 percentage($i / $Grid-columns);
+      max-width: percentage($i / $Grid-columns);
+      min-height: 1px;
+      padding-left: ($Grid-gutterWidth / 2);
+      padding-right: ($Grid-gutterWidth / 2);
    }
+  }

-    .#{$ns}Grid-col--#{$class} {
-        flex-basis: 0;
-        flex-grow: 1;
-        min-height: 1px;
-        max-width: 100%;
-        width: 0; // 很重要，没有的话会被撑开。
-        padding-left: ($Grid-gutterWidth / 2);
-        padding-right: ($Grid-gutterWidth / 2);
-    }
+  .#{$ns}Grid-col--#{$class} {
+    flex-basis: 0;
+    flex-grow: 1;
+    min-height: 1px;
+    max-width: 100%;
+    width: 0; // 很重要，没有的话会被撑开。
+    padding-left: ($Grid-gutterWidth / 2);
+    padding-right: ($Grid-gutterWidth / 2);
+  }
 }

 // Generate Grid row
@mixin make-row($gutter: $Grid-gutterWidth) {
-    margin-left: ($gutter / -2);
-    margin-right: ($gutter / -2);
-    display: flex;
-    flex-wrap: wrap;
+  margin-left: ($gutter / -2);
+  margin-right: ($gutter / -2);
+  display: flex;
+  flex-wrap: wrap;
 }

 // .#{$ns}Grid-container {
@ -143,17 +143,17 @@
@include make-grid(xs);

@include media-breakpoint-up(sm) {
-    .#{$ns}Grid {
-        @include make-row;
-    }
+  .#{$ns}Grid {
+    @include make-row;
+  }

-    @include make-grid(sm);
+  @include make-grid(sm);
 }

@include media-breakpoint-up(md) {
-    @include make-grid(md);
+  @include make-grid(md);
 }

@include media-breakpoint-up(lg) {
-    @include make-grid(lg);
+  @include make-grid(lg);
 }
--- a/scss/layout/_hbox.scss
+++ b/scss/layout/_hbox.scss
@ -1,98 +1,98 @@
 .#{$ns}Hbox {
-    display: table;
-    table-layout: fixed;
-    border-spacing: 0;
-    width: 100%;
-    height: 100%;
+  display: table;
+  table-layout: fixed;
+  border-spacing: 0;
+  width: 100%;
+  height: 100%;

-    & > .#{$ns}Hbox-col {
-        display: table-cell;
-        vertical-align: top;
-        height: 100%;
-        float: none;
-    }
+  & > .#{$ns}Hbox-col {
+    display: table-cell;
+    vertical-align: top;
+    height: 100%;
+    float: none;
+  }
 }

 .#{$ns}FormHbox {
-    margin-left: -15px;
-    margin-right: -15px;
+  margin-left: -15px;
+  margin-right: -15px;
+
+  > .#{$ns}Hbox > .#{$ns}Hbox-col {
+    padding-left: 15px;
+    padding-right: 15px;
+    vertical-align: top;
+
+    > .#{$ns}Form-group {
+      margin-left: 0;
+      margin-right: 0;
+    }
+
+    > .#{$ns}Form-group:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  &.#{$ns}Hbox--xs {
+    margin-left: -5px;
+    margin-right: -5px;

    > .#{$ns}Hbox > .#{$ns}Hbox-col {
-        padding-left: 15px;
-        padding-right: 15px;
-        vertical-align: top;
-
-        > .#{$ns}Form-group {
-            margin-left: 0;
-            margin-right: 0;
-        }
-
-        > .#{$ns}Form-group:last-child {
-            margin-bottom: 0;
-        }
+      padding-left: 5px;
+      padding-right: 5px;
    }
+  }

-    &.#{$ns}Hbox--xs {
-        margin-left: -5px;
-        margin-right: -5px;
+  &.#{$ns}Hbox--sm {
+    margin-left: -10px;
+    margin-right: -10px;

-        > .#{$ns}Hbox > .#{$ns}Hbox-col {
-            padding-left: 5px;
-            padding-right: 5px;
-        }
-    }
-
-    &.#{$ns}Hbox--sm {
-        margin-left: -10px;
-        margin-right: -10px;
-
-        > .#{$ns}Hbox > .#{$ns}Hbox-col {
-            padding-left: 10px;
-            padding-right: 10px;
-        }
+    > .#{$ns}Hbox > .#{$ns}Hbox-col {
+      padding-left: 10px;
+      padding-right: 10px;
    }
+  }
 }

@include media-breakpoint-down(md) {
-    .#{$ns}Hbox--autoSm {
-        display: block;
+  .#{$ns}Hbox--autoSm {
+    display: block;

-        & > .#{$ns}Hbox-col {
-            width: auto;
-            height: auto;
-            display: block;
+    & > .#{$ns}Hbox-col {
+      width: auto;
+      height: auto;
+      display: block;

-            &.show {
-                display: block !important;
-            }
-        }
-
-        & .#{$ns}Vbox {
-            height: auto;
-        }
-
-        & .cell-inner {
-            position: static !important;
-        }
+      &.show {
+        display: block !important;
+      }
    }
+
+    & .#{$ns}Vbox {
+      height: auto;
+    }
+
+    & .cell-inner {
+      position: static !important;
+    }
+  }
 }

@include media-breakpoint-down(sm) {
-    .#{$ns}Hbox--autoXs {
-        display: block;
+  .#{$ns}Hbox--autoXs {
+    display: block;

-        & > .#{$ns}Hbox-col {
-            width: auto;
-            height: auto;
-            display: block;
-        }
-
-        & .#{$ns}Vbox {
-            height: auto;
-        }
-
-        & .cell-inner {
-            position: static !important;
-        }
+    & > .#{$ns}Hbox-col {
+      width: auto;
+      height: auto;
+      display: block;
    }
+
+    & .#{$ns}Vbox {
+      height: auto;
+    }
+
+    & .cell-inner {
+      position: static !important;
+    }
+  }
 }
--- a/scss/layout/_layout.scss
+++ b/scss/layout/_layout.scss
@ -1,519 +1,505 @@
 html,
 body {
-    width: 100%;
-    height: 100%;
+  width: 100%;
+  height: 100%;
 }

 body {
-    overflow-x: hidden;
+  overflow-x: hidden;
 }

 .#{$ns}Layout {
-    height: auto;
-    min-height: 100%;
-    width: 100%;
-    position: relative;
+  height: auto;
+  min-height: 100%;
+  width: 100%;
+  position: relative;

-    &:before {
-        content: "";
-        position: absolute;
-        width: inherit;
-        top: 0;
-        bottom: 0;
-        z-index: -1;
-        background-color: $body-bg;
-        border: inherit;
-        display: block;
-    }
+  &:before {
+    content: '';
+    position: absolute;
+    width: inherit;
+    top: 0;
+    bottom: 0;
+    z-index: -1;
+    background-color: $body-bg;
+    border: inherit;
+    display: block;
+  }

-    &--boxed {
-        margin-right: auto;
-        margin-left: auto;
-        // box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
-    }
+  &--boxed {
+    margin-right: auto;
+    margin-left: auto;
+    // box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
+  }
+
+  .#{$ns}Layout-header {
+    background: $Layout-header-bg;
+    box-shadow: $Layout-header-boxShadow;
+    height: $Layout-header-height;
+  }
+
+  &--headerFixed {
+    padding-top: $Layout-header-height;

    .#{$ns}Layout-header {
-        background: $Layout-header-bg;
-        box-shadow: $Layout-header-boxShadow;
-        height: $Layout-header-height;
+      position: fixed;
+      top: 0;
+      width: 100%;
+      z-index: $zindex-fixed;
+    }
+  }
+
+  &-brandBar {
+    background: $Layout-brand-bg;
+    color: $Layout-brandBar-color;
+
+    > button {
+      padding: px2rem(10px) px2rem(17px);
+      font-size: px2rem(16px);
+      line-height: $Layout-header-height - px2rem(20px);
+      text-decoration: none;
+      background-color: transparent;
+      border: none;
+    }
+  }
+
+  &-brand {
+    color: $Layout-brand-color;
+    text-align: left;
+    font-size: $fontSizeMd;
+    font-weight: $fontWeightNormal;
+    max-width: 100%;
+    height: auto;
+    line-height: $Layout-header-height;
+    display: inline-block;
+    vertical-align: middle;
+    padding: 0 px2rem(20px);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    &:hover {
+      text-decoration: none;
    }

-    &--headerFixed {
-        padding-top: $Layout-header-height;
+    img {
+      max-height: $Layout-header-height / 2;
+      // margin-top: px2rem(-4px);
+      vertical-align: middle;
+      display: inline;
+    }
+  }

-        .#{$ns}Layout-header {
-            position: fixed;
-            top: 0;
-            width: 100%;
-            z-index: $zindex-fixed;
-        }
+  &-headerBar {
+    border-bottom: $Layout-headerBar-borderBottom;
+    min-height: $Layout-header-height;
+    padding: 0 $gap-sm;
+  }
+
+  &-aside {
+    float: left;
+    background: $Layout-aside-bg;
+    color: $Layout-aside-color;
+
+    &:before {
+      content: '';
+      position: absolute;
+      width: inherit;
+      top: 0;
+      bottom: 0;
+      z-index: -1;
+      background-color: inherit;
+      border: inherit;
+    }
+  }
+
+  &-asideFooter {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    z-index: $zindex-fixed;
+    max-width: $Layout-aside-width;
+
+    // .app-aside-folded & {
+    //     max-width: @app-aside-folded-width;
+    // }
+    ~ div {
+      padding-bottom: px2rem(50px);
+    }
+  }
+
+  &-content {
+    height: 100%;
+    @include clearfix();
+  }
+
+  // &-content--full {
+  //     position: absolute;
+  //     top: $Layout-header-height;
+  //     bottom: $Layout-header-height;
+  //     height: auto;
+  //     width: auto !important;
+  //     padding: 0 !important;
+  //     overflow-y: auto;
+  //     -webkit-overflow-scrolling: touch;
+
+  //     &.h-full {
+  //         bottom: 0;
+  //         height: auto;
+  //     }
+  // }
+
+  &-body {
+    padding-bottom: $Layout-header-height;
+    width: 100%;
+  }
+
+  &--noFooter &-body {
+    padding-bottom: 0;
+  }
+
+  &-content &-body {
+    float: left;
+  }
+
+  &-footer {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    // z-index: 1005; 为啥要这么高
+    z-index: 0;
+  }
+
+  &--sm {
+    .#{$ns}Layout-asideFooter {
+      max-width: $Layout-aside--sm-width;
+    }
+
+    .#{$ns}AsideNav-item a {
+      font-size: $fontSizeSm;
+    }
+  }
+
+  &--md .#{$ns}Layout-asideFooter {
+    max-width: $Layout-aside--md-width;
+  }
+
+  &--lg .#{$ns}Layout-asideFooter {
+    max-width: $Layout-aside--lg-width;
+  }
+}
+
+@include media-breakpoint-down(sm) {
+  .#{$ns}Layout {
+    // Layout 层没有出现滚动条件，导致移动端无法响应固定顶部/底部效果
+    // overflow-x: hidden;
+  }
+
+  .#{$ns}Layout-content {
+    transition: transform 0.2s ease;
+  }
+
+  .#{$ns}Layout-aside {
+    display: none;
+
+    .#{$ns}Layout--offScreen & {
+      position: fixed;
+      top: px2rem(50px);
+      bottom: 0;
+      width: $Layout--offscreen-width;
+      display: block !important;
+      visibility: visible;
+      overflow-x: hidden;
+      overflow-y: auto;
+      -webkit-overflow-scrolling: touch;
+      z-index: 1010;
+    }
+  }
+
+  .#{$ns}Layout-headerBar {
+    display: none;
+  }
+
+  .#{$ns}Layout--offScreen {
+    .#{$ns}Layout-content,
+    .#{$ns}Layout-footer {
+      background-color: $body-bg;
+      transition: transform 0.2s ease;
+      backface-visibility: hidden;
+      transform: translate3d($Layout--offscreen-width, 0px, 0px);
+      overflow: hidden;
+      position: fixed;
+      width: 100%;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      z-index: 1015;
+      padding-top: px2rem(50px);
+    }
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .#{$ns}Layout {
+    &--boxed {
+      width: px2rem(760px);
+
+      &.#{$ns}Layout--headerFixed .#{$ns}Layout-header {
+        width: px2rem(760px);
+      }
+    }
+
+    &-brand,
+    &-brandBar,
+    &-aside {
+      width: $Layout-aside-width;
    }

    &-brandBar {
-        background: $Layout-brand-bg;
-        color: $Layout-brandBar-color;
-
-        >button {
-            padding: px2rem(10px) px2rem(17px);
-            font-size: px2rem(16px);
-            line-height: $Layout-header-height - px2rem(20px);
-            text-decoration: none;
-            background-color: transparent;
-            border: none;
-        }
+      float: left;
    }

-    &-brand {
-        color: $Layout-brand-color;
-        text-align: left;
-        font-size: $fontSizeMd;
-        font-weight: $fontWeightNormal;
-        max-width: 100%;
-        height: auto;
-        line-height: $Layout-header-height;
-        display: inline-block;
-        vertical-align: middle;
-        padding: 0 px2rem(20px);
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-
-        &:hover {
-            text-decoration: none;
-        }
-
-        img {
-            max-height: $Layout-header-height / 2;
-            // margin-top: px2rem(-4px);
-            vertical-align: middle;
-            display: inline;
-        }
+    &--withAside {
+      .#{$ns}Layout-headerBar,
+      .#{$ns}Layout-content,
+      .#{$ns}Layout-footer {
+        margin-left: $Layout-aside-width;
+      }
    }

-    &-headerBar {
-        border-bottom: $Layout-headerBar-borderBottom;
-        min-height: $Layout-header-height;
-        padding: 0 $gap-sm;
+    .visible-folded {
+      display: none;
    }

-    &-aside {
-        float: left;
-        background: $Layout-aside-bg;
-        color: $Layout-aside-color;
+    &--folded {
+      .visible-folded {
+        display: inherit;
+      }

-        &:before {
-            content: "";
-            position: absolute;
-            width: inherit;
-            top: 0;
-            bottom: 0;
-            z-index: -1;
-            background-color: inherit;
-            border: inherit;
-        }
-    }
+      .hidden-folded {
+        display: none !important;
+      }

-    &-asideFooter {
-        position: absolute;
-        bottom: 0;
-        width: 100%;
-        z-index: $zindex-fixed;
-        max-width: $Layout-aside-width;
+      .text-center-folded {
+        text-align: center;
+      }

-        // .app-aside-folded & {
-        //     max-width: @app-aside-folded-width;
-        // }
-        ~div {
-            padding-bottom: px2rem(50px);
-        }
-    }
+      .pull-none-folded {
+        float: none !important;
+      }

-    &-content {
-        height: 100%;
-        @include clearfix();
-    }
+      .w-auto-folded {
+        width: auto;
+      }

-    // &-content--full {
-    //     position: absolute;
-    //     top: $Layout-header-height;
-    //     bottom: $Layout-header-height;
-    //     height: auto;
-    //     width: auto !important;
-    //     padding: 0 !important;
-    //     overflow-y: auto;
-    //     -webkit-overflow-scrolling: touch;
-
-    //     &.h-full {
-    //         bottom: 0;
-    //         height: auto;
-    //     }
-    // }
-
-    &-body {
-        padding-bottom: $Layout-header-height;
-        width: 100%;
-    }
-
-    &--noFooter &-body {
-        padding-bottom: 0;
-    }
-
-    &-content &-body {
-        float: left;
-    }
-
-    &-footer {
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        // z-index: 1005; 为啥要这么高
-        z-index: 0;
-    }
-
-    &--sm {
-        .#{$ns}Layout-asideFooter {
-            max-width: $Layout-aside--sm-width;
-        }
-
-        .#{$ns}AsideNav-item a {
-            font-size: $fontSizeSm;
-        }
-    }
-
-    &--md .#{$ns}Layout-asideFooter {
-        max-width: $Layout-aside--md-width;
-    }
-
-    &--lg .#{$ns}Layout-asideFooter {
-        max-width: $Layout-aside--lg-width;
-    }
-}
-
-
-@include media-breakpoint-down(sm) {
-    .#{$ns}Layout {
-        // Layout 层没有出现滚动条件，导致移动端无法响应固定顶部/底部效果
-        // overflow-x: hidden;
-    }
-
-
-
-    .#{$ns}Layout-content {
-        transition: transform 0.2s ease;
-    }
-
-    .#{$ns}Layout-aside {
-        display: none;
-
-        .#{$ns}Layout--offScreen & {
-            position: fixed;
-            top: px2rem(50px);
-            bottom: 0;
-            width: $Layout--offscreen-width;
-            display: block !important;
-            visibility: visible;
-            overflow-x: hidden;
-            overflow-y: auto;
-            -webkit-overflow-scrolling: touch;
-            z-index: 1010;
-        }
-    }
-
-    .#{$ns}Layout-headerBar {
-        display: none;
-    }
-
-    .#{$ns}Layout--offScreen {
+      .#{$ns}Layout-aside,
+      .#{$ns}Layout-brandBar {
+        width: $Layout-aside--folded-width;
+      }

+      &.#{$ns}Layout--withAside {
+        .#{$ns}Layout-headerBar,
        .#{$ns}Layout-content,
        .#{$ns}Layout-footer {
-            background-color: $body-bg;
-            transition: transform 0.2s ease;
-            backface-visibility: hidden;
-            transform: translate3d($Layout--offscreen-width, 0px, 0px);
-            overflow: hidden;
-            position: fixed;
-            width: 100%;
-            top: 0;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            z-index: 1015;
-            padding-top: px2rem(50px);
+          margin-left: $Layout-aside--folded-width;
        }
+      }
+
+      .#{$ns}Layout-brand {
+        display: block;
+        padding: 0;
+        font-size: $fontSizeLg;
+        text-align: center;
+      }
    }
-}

+    &--asideFixed {
+      .#{$ns}Layout-aside {
+        height: 100%;

-@include media-breakpoint-up(md) {
-    .#{$ns}Layout {
-        &--boxed {
-            width: px2rem(760px);
+        &:before {
+          position: fixed;
+          z-index: 15;
+        }
+      }

-            &.#{$ns}Layout--headerFixed .#{$ns}Layout-header {
-                width: px2rem(760px);
-            }
+      .#{$ns}Layout-brandBar {
+        position: fixed;
+      }
+
+      .#{$ns}Layout-asideWrap {
+        position: fixed;
+        overflow: hidden;
+        top: $Layout-header-height;
+        bottom: 0;
+        left: 0;
+        width: $Layout-aside-width - px2rem(1px);
+        z-index: $zindex-fixed;
+      }
+
+      .#{$ns}Layout-asideInner {
+        width: $Layout-aside-width + $scrollbar-width;
+        position: relative;
+        height: 100%;
+        overflow-x: hidden;
+        overflow-y: scroll;
+        -webkit-overflow-scrolling: touch;
+
+        &::-webkit-scrollbar {
+          -webkit-appearance: none;
        }

-        &-brand,
-        &-brandBar,
-        &-aside {
-            width: $Layout-aside-width;
+        &::-webkit-scrollbar:vertical {
+          width: $scrollbar-width;
        }

-        &-brandBar {
-            float: left;
-        }
-
-        &--withAside {
-
-            .#{$ns}Layout-headerBar,
-            .#{$ns}Layout-content,
-            .#{$ns}Layout-footer {
-                margin-left: $Layout-aside-width;
-            }
-        }
-
-        .visible-folded {
-            display: none;
-        }
-
-        &--folded {
-            .visible-folded {
-                display: inherit;
-            }
-
-            .hidden-folded {
-                display: none !important;
-            }
-
-            .text-center-folded {
-                text-align: center;
-            }
-
-            .pull-none-folded {
-                float: none !important;
-            }
-
-            .w-auto-folded {
-                width: auto;
-            }
-
-            .#{$ns}Layout-aside,
-            .#{$ns}Layout-brandBar {
-                width: $Layout-aside--folded-width;
-            }
-
-            &.#{$ns}Layout--withAside {
-
-                .#{$ns}Layout-headerBar,
-                .#{$ns}Layout-content,
-                .#{$ns}Layout-footer {
-                    margin-left: $Layout-aside--folded-width;
-                }
-            }
-
-            .#{$ns}Layout-brand {
-                display: block;
-                padding: 0;
-                font-size: $fontSizeLg;
-                text-align: center;
-            }
-        }
-
-        &--asideFixed {
-            .#{$ns}Layout-aside {
-                height: 100%;
-
-                &:before {
-                    position: fixed;
-                    z-index: 15;
-                }
-            }
-
-            .#{$ns}Layout-brandBar {
-                position: fixed;
-            }
-
-            .#{$ns}Layout-asideWrap {
-                position: fixed;
-                overflow: hidden;
-                top: $Layout-header-height;
-                bottom: 0;
-                left: 0;
-                width: $Layout-aside-width - px2rem(1px);
-                z-index: $zindex-fixed;
-            }
-
-            .#{$ns}Layout-asideInner {
-                width: $Layout-aside-width + $scrollbar-width;
-                position: relative;
-                height: 100%;
-                overflow-x: hidden;
-                overflow-y: scroll;
-                -webkit-overflow-scrolling: touch;
-
-                &::-webkit-scrollbar {
-                    -webkit-appearance: none;
-                }
-
-                &::-webkit-scrollbar:vertical {
-                    width: $scrollbar-width;
-                }
-
-                &>* {
-                    width: $Layout-aside-width;
-                }
-            }
-        }
-
-        &--asideFixed.#{$ns}Layout--folded {
-            .#{$ns}Layout-aside {
-                position: static;
-            }
-
-            .#{$ns}Layout-brandBar {
-                position: static;
-            }
-
-            .#{$ns}Layout-asideWrap {
-                overflow: visible;
-                position: relative;
-                top: 0;
-                z-index: 15;
-                width: $Layout-aside--folded-width - px2rem(1px);
-            }
-
-            .#{$ns}Layout-asideInner {
-                overflow: visible;
-                width: $Layout-aside--folded-width + $scrollbar-width;
-
-                >* {
-                    width: $Layout-aside--folded-width;
-                }
-            }
-        }
-
-        &--sm:not(.#{$ns}Layout--folded) {
-
-            .#{$ns}Layout-brand,
-            .#{$ns}Layout-brandBar,
-            .#{$ns}Layout-aside {
-                width: $Layout-aside--sm-width;
-            }
-
-            &.#{$ns}Layout--withAside {
-
-                .#{$ns}Layout-headerBar,
-                .#{$ns}Layout-content,
-                .#{$ns}Layout-footer {
-                    margin-left: $Layout-aside--sm-width;
-                }
-            }
-
-            &.#{$ns}Layout--asideFixed {
-                .#{$ns}Layout-asideWrap {
-                    width: $Layout-aside--sm-width - px2rem(1px);
-                }
-
-                .#{$ns}Layout-asideInner {
-                    width: $Layout-aside--sm-width + $scrollbar-width;
-
-                    &>* {
-                        width: $Layout-aside--sm-width;
-                    }
-                }
-            }
-        }
-
-        &--md:not(.#{$ns}Layout--folded) {
-
-            .#{$ns}Layout-brand,
-            .#{$ns}Layout-brandBar,
-            .#{$ns}Layout-aside {
-                width: $Layout-aside--md-width;
-            }
-
-            &.#{$ns}Layout--withAside {
-
-                .#{$ns}Layout-headerBar,
-                .#{$ns}Layout-content,
-                .#{$ns}Layout-footer {
-                    margin-left: $Layout-aside--md-width;
-                }
-            }
-
-            &.#{$ns}Layout--asideFixed {
-                .#{$ns}Layout-asideWrap {
-                    width: $Layout-aside--md-width - px2rem(1px);
-                }
-
-                .#{$ns}Layout-asideInner {
-                    width: $Layout-aside--md-width + $scrollbar-width;
-
-                    &>* {
-                        width: $Layout-aside--md-width;
-                    }
-                }
-            }
-        }
-
-        &--lg:not(.#{$ns}Layout--folded) {
-
-            .#{$ns}Layout-brand,
-            .#{$ns}Layout-brandBar,
-            .#{$ns}Layout-aside {
-                width: $Layout-aside--lg-width;
-            }
-
-            &.#{$ns}Layout--withAside {
-
-                .#{$ns}Layout-headerBar,
-                .#{$ns}Layout-content,
-                .#{$ns}Layout-footer {
-                    margin-left: $Layout-aside--lg-width;
-                }
-            }
-
-            &.#{$ns}Layout--asideFixed {
-                .#{$ns}Layout-asideWrap {
-                    width: $Layout-aside--lg-width - px2rem(1px);
-                }
-
-                .#{$ns}Layout-asideInner {
-                    width: $Layout-aside--lg-width + $scrollbar-width;
-
-                    &>* {
-                        width: $Layout-aside--lg-width;
-                    }
-                }
-            }
+        & > * {
+          width: $Layout-aside-width;
        }
+      }
    }
-}

+    &--asideFixed.#{$ns}Layout--folded {
+      .#{$ns}Layout-aside {
+        position: static;
+      }
+
+      .#{$ns}Layout-brandBar {
+        position: static;
+      }
+
+      .#{$ns}Layout-asideWrap {
+        overflow: visible;
+        position: relative;
+        top: 0;
+        z-index: 15;
+        width: $Layout-aside--folded-width - px2rem(1px);
+      }
+
+      .#{$ns}Layout-asideInner {
+        overflow: visible;
+        width: $Layout-aside--folded-width + $scrollbar-width;
+
+        > * {
+          width: $Layout-aside--folded-width;
+        }
+      }
+    }
+
+    &--sm:not(.#{$ns}Layout--folded) {
+      .#{$ns}Layout-brand,
+      .#{$ns}Layout-brandBar,
+      .#{$ns}Layout-aside {
+        width: $Layout-aside--sm-width;
+      }
+
+      &.#{$ns}Layout--withAside {
+        .#{$ns}Layout-headerBar,
+        .#{$ns}Layout-content,
+        .#{$ns}Layout-footer {
+          margin-left: $Layout-aside--sm-width;
+        }
+      }
+
+      &.#{$ns}Layout--asideFixed {
+        .#{$ns}Layout-asideWrap {
+          width: $Layout-aside--sm-width - px2rem(1px);
+        }
+
+        .#{$ns}Layout-asideInner {
+          width: $Layout-aside--sm-width + $scrollbar-width;
+
+          & > * {
+            width: $Layout-aside--sm-width;
+          }
+        }
+      }
+    }
+
+    &--md:not(.#{$ns}Layout--folded) {
+      .#{$ns}Layout-brand,
+      .#{$ns}Layout-brandBar,
+      .#{$ns}Layout-aside {
+        width: $Layout-aside--md-width;
+      }
+
+      &.#{$ns}Layout--withAside {
+        .#{$ns}Layout-headerBar,
+        .#{$ns}Layout-content,
+        .#{$ns}Layout-footer {
+          margin-left: $Layout-aside--md-width;
+        }
+      }
+
+      &.#{$ns}Layout--asideFixed {
+        .#{$ns}Layout-asideWrap {
+          width: $Layout-aside--md-width - px2rem(1px);
+        }
+
+        .#{$ns}Layout-asideInner {
+          width: $Layout-aside--md-width + $scrollbar-width;
+
+          & > * {
+            width: $Layout-aside--md-width;
+          }
+        }
+      }
+    }
+
+    &--lg:not(.#{$ns}Layout--folded) {
+      .#{$ns}Layout-brand,
+      .#{$ns}Layout-brandBar,
+      .#{$ns}Layout-aside {
+        width: $Layout-aside--lg-width;
+      }
+
+      &.#{$ns}Layout--withAside {
+        .#{$ns}Layout-headerBar,
+        .#{$ns}Layout-content,
+        .#{$ns}Layout-footer {
+          margin-left: $Layout-aside--lg-width;
+        }
+      }
+
+      &.#{$ns}Layout--asideFixed {
+        .#{$ns}Layout-asideWrap {
+          width: $Layout-aside--lg-width - px2rem(1px);
+        }
+
+        .#{$ns}Layout-asideInner {
+          width: $Layout-aside--lg-width + $scrollbar-width;
+
+          & > * {
+            width: $Layout-aside--lg-width;
+          }
+        }
+      }
+    }
+  }
+}

@include media-breakpoint-up(lg) {
-    .#{$ns}Layout {
-        &--boxed {
-            width: px2rem(980px);
+  .#{$ns}Layout {
+    &--boxed {
+      width: px2rem(980px);

-            &.#{$ns}Layout--headerFixed .#{$ns}Layout-header {
-                width: px2rem(980px);
-            }
-        }
+      &.#{$ns}Layout--headerFixed .#{$ns}Layout-header {
+        width: px2rem(980px);
+      }
    }
+  }
 }

@include media-breakpoint-up(xl) {
-    .#{$ns}Layout {
-        &--boxed {
-            width: px2rem(1180px);
+  .#{$ns}Layout {
+    &--boxed {
+      width: px2rem(1180px);

-            &.#{$ns}Layout--headerFixed .#{$ns}Layout-header {
-                width: px2rem(1180px);
-            }
-        }
+      &.#{$ns}Layout--headerFixed .#{$ns}Layout-header {
+        width: px2rem(1180px);
+      }
    }
-}
+  }
+}
--- a/scss/layout/_vbox.scss
+++ b/scss/layout/_vbox.scss
@ -1,38 +1,38 @@
 .#{$ns}Vbox {
-    display: table;
-    border-spacing: 0;
-    position: relative;
-    width: 100%;
+  display: table;
+  border-spacing: 0;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-height: 240px;
+
+  & .row-row {
+    display: table-row;
    height: 100%;
-    min-height: 240px;

-    & .row-row {
-        display: table-row;
-        height: 100%;
+    & .#{$ns}Vbox-cell {
+      position: relative;
+      height: 100%;
+      width: 100%;

-        & .#{$ns}Vbox-cell {
-            position: relative;
-            height: 100%;
-            width: 100%;
+      .ie & {
+        display: table-cell;
+        overflow: auto;

-            .ie & {
-                display: table-cell;
-                overflow: auto;
-
-                & .cell-inner {
-                    overflow: visible !important;
-                }
-            }
-
-            & .cell-inner {
-                position: absolute;
-                top: 0;
-                bottom: 0;
-                left: 0;
-                right: 0;
-                -webkit-overflow-scrolling: touch;
-                overflow: auto;
-            }
+        & .cell-inner {
+          overflow: visible !important;
        }
+      }
+
+      & .cell-inner {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        -webkit-overflow-scrolling: touch;
+        overflow: auto;
+      }
    }
+  }
 }
--- a/src/components/DatePicker.tsx
+++ b/src/components/DatePicker.tsx
@ -538,9 +538,9 @@ class CustomDaysView extends React.Component<CustomDaysViewProps> {
      if (isDisabled) classes += ' rdtDisabled';

      dayProps = {
-        key: prevMonth.format('M_D'),
+        'key': prevMonth.format('M_D'),
        'data-value': prevMonth.date(),
-        className: classes
+        'className': classes
      };

      if (!isDisabled) dayProps.onClick = this.handleDayChange;
--- a/src/components/DateRangePicker.tsx
+++ b/src/components/DateRangePicker.tsx
@ -44,7 +44,7 @@ export interface DateRangePickerState {
 }

 const availableRanges: {[propName: string]: any} = {
-  today: {
+  'today': {
    label: '今天',
    startDate: (now: moment.Moment) => {
      return now.startOf('day');
@ -54,7 +54,7 @@ const availableRanges: {[propName: string]: any} = {
    }
  },

-  yesterday: {
+  'yesterday': {
    label: '昨天',
    startDate: (now: moment.Moment) => {
      return now.add(-1, 'days').startOf('day');
@ -94,7 +94,7 @@ const availableRanges: {[propName: string]: any} = {
    }
  },

-  prevweek: {
+  'prevweek': {
    label: '上周',
    startDate: (now: moment.Moment) => {
      return now.startOf('week').add(-1, 'weeks');
@ -107,7 +107,7 @@ const availableRanges: {[propName: string]: any} = {
    }
  },

-  thismonth: {
+  'thismonth': {
    label: '本月',
    startDate: (now: moment.Moment) => {
      return now.startOf('month');
@ -117,7 +117,7 @@ const availableRanges: {[propName: string]: any} = {
    }
  },

-  prevmonth: {
+  'prevmonth': {
    label: '上个月',
    startDate: (now: moment.Moment) => {
      return now.startOf('month').add(-1, 'month');
@ -130,7 +130,7 @@ const availableRanges: {[propName: string]: any} = {
    }
  },

-  prevquarter: {
+  'prevquarter': {
    label: '上个季节',
    startDate: (now: moment.Moment) => {
      return now.startOf('quarter').add(-1, 'quarter');
@ -143,7 +143,7 @@ const availableRanges: {[propName: string]: any} = {
    }
  },

-  thisquarter: {
+  'thisquarter': {
    label: '本季度',
    startDate: (now: moment.Moment) => {
      return now.startOf('quarter');
--- a/src/components/Editor.tsx
+++ b/src/components/Editor.tsx
@ -13,20 +13,20 @@ function noJsExt(raw: string) {
 }

 const defaultConfig = {
-  url: 'vs/loader.js',
+  'url': 'vs/loader.js',
  'vs/nls': {
    availableLanguages: {
      '*': 'zh-cn'
    }
  },
-  paths: {}
+  'paths': {}
 };

 try {
  // fis 编译的话，能正确赋值上，如果不是，那请通过外部参数传递。
  defaultConfig.url = __uri('monaco-editor/min/vs/loader.js');
  defaultConfig.paths = {
-    vs: noJsExt(__uri('monaco-editor/min/vs/editor/editor.main.js')).replace(
+    'vs': noJsExt(__uri('monaco-editor/min/vs/editor/editor.main.js')).replace(
      /\/vs\/.*$/,
      ''
    ),
--- a/src/components/RichText.tsx
+++ b/src/components/RichText.tsx
@ -218,35 +218,35 @@ export default class FroalaEditor extends React.Component<any, any> {
    'Type something': '\u8f93\u5165\u4e00\u4e9b\u5185\u5bb9',

    // Basic formatting
-    Bold: '\u7c97\u4f53',
-    Italic: '\u659c\u4f53',
-    Underline: '\u4e0b\u5212\u7ebf',
-    Strikethrough: '\u5220\u9664\u7ebf',
+    'Bold': '\u7c97\u4f53',
+    'Italic': '\u659c\u4f53',
+    'Underline': '\u4e0b\u5212\u7ebf',
+    'Strikethrough': '\u5220\u9664\u7ebf',

    // Main buttons
-    Insert: '\u63d2\u5165',
-    Delete: '\u5220\u9664',
-    Cancel: '\u53d6\u6d88',
-    OK: '\u786e\u5b9a',
-    Back: '\u80cc\u90e8',
-    Remove: '\u53bb\u6389',
-    More: '\u66f4\u591a',
-    Update: '\u66f4\u65b0',
-    Style: '\u98ce\u683c',
+    'Insert': '\u63d2\u5165',
+    'Delete': '\u5220\u9664',
+    'Cancel': '\u53d6\u6d88',
+    'OK': '\u786e\u5b9a',
+    'Back': '\u80cc\u90e8',
+    'Remove': '\u53bb\u6389',
+    'More': '\u66f4\u591a',
+    'Update': '\u66f4\u65b0',
+    'Style': '\u98ce\u683c',

    // Font
    'Font Family': '\u5b57\u4f53',
    'Font Size': '\u5b57\u53f7',

    // Colors
-    Colors: '\u989c\u8272',
-    Background: '\u80cc\u666f',
-    Text: '\u6587\u5b57',
+    'Colors': '\u989c\u8272',
+    'Background': '\u80cc\u666f',
+    'Text': '\u6587\u5b57',

    // Paragraphs
    'Paragraph Format': '\u683c\u5f0f',
-    Normal: '\u6b63\u5e38',
-    Code: '\u4ee3\u7801',
+    'Normal': '\u6b63\u5e38',
+    'Code': '\u4ee3\u7801',
    'Heading 1': '\u6807\u98981',
    'Heading 2': '\u6807\u98982',
    'Heading 3': '\u6807\u98983',
@ -257,12 +257,12 @@ export default class FroalaEditor extends React.Component<any, any> {
    'Inline Style': '\u5185\u8054\u6837\u5f0f',

    // Alignment
-    Align: '\u5bf9\u9f50\u65b9\u5f0f',
+    'Align': '\u5bf9\u9f50\u65b9\u5f0f',
    'Align Left': '\u5de6\u5bf9\u9f50',
    'Align Center': '\u5c45\u4e2d',
    'Align Right': '\u53f3\u5bf9\u9f50',
    'Align Justify': '\u4e24\u7aef\u5bf9\u9f50',
-    None: '\u65e0',
+    'None': '\u65e0',

    // Lists
    'Ordered List': '\u7f16\u53f7\u5217\u8868',
@ -277,32 +277,32 @@ export default class FroalaEditor extends React.Component<any, any> {
    'Open in new tab': '\u5f00\u542f\u5728\u65b0\u6807\u7b7e\u9875',
    'Open Link': '\u6253\u5f00\u94fe\u63a5',
    'Edit Link': '\u7f16\u8f91\u94fe\u63a5',
-    Unlink: '\u5220\u9664\u94fe\u63a5',
+    'Unlink': '\u5220\u9664\u94fe\u63a5',
    'Choose Link': '\u9009\u62e9\u94fe\u63a5',

    // Images
    'Insert Image': '\u63d2\u5165\u56fe\u7247',
    'Upload Image': '\u4e0a\u4f20\u56fe\u7247',
    'By URL': '\u901a\u8fc7\u7f51\u5740',
-    Browse: '\u6d4f\u89c8',
+    'Browse': '\u6d4f\u89c8',
    'Drop image': '\u56fe\u50cf\u62d6\u653e',
    'or click': '\u6216\u70b9\u51fb',
    'Manage Images': '\u7ba1\u7406\u56fe\u50cf',
-    Loading: '\u8f7d\u5165\u4e2d',
-    Deleting: '\u5220\u9664',
-    Tags: '\u6807\u7b7e',
+    'Loading': '\u8f7d\u5165\u4e2d',
+    'Deleting': '\u5220\u9664',
+    'Tags': '\u6807\u7b7e',
    'Are you sure? Image will be deleted.':
      '\u4f60\u786e\u5b9a\u5417\uff1f\u56fe\u50cf\u5c06\u88ab\u5220\u9664\u3002',
-    Replace: '\u66f4\u6362',
-    Uploading: '\u4e0a\u4f20',
+    'Replace': '\u66f4\u6362',
+    'Uploading': '\u4e0a\u4f20',
    'Loading image': '\u5bfc\u5165\u56fe\u50cf',
-    Display: '\u663e\u793a',
-    Inline: '\u6392\u961f',
+    'Display': '\u663e\u793a',
+    'Inline': '\u6392\u961f',
    'Break Text': '\u65ad\u5f00\u6587\u672c',
    'Alternate Text': '\u5907\u7528\u6587\u672c',
    'Change Size': '\u5c3a\u5bf8\u53d8\u5316',
-    Width: '\u5bbd\u5ea6',
-    Height: '\u9ad8\u5ea6',
+    'Width': '\u5bbd\u5ea6',
+    'Height': '\u9ad8\u5ea6',
    'Something went wrong. Please try again.':
      '\u51fa\u4e86\u4e9b\u95ee\u9898\u3002 \u8bf7\u518d\u8bd5\u4e00\u6b21\u3002',

@ -316,23 +316,23 @@ export default class FroalaEditor extends React.Component<any, any> {
    'Remove Table': '\u5220\u9664\u8868',
    'Table Style': '\u8868\u683c\u6837\u5f0f',
    'Horizontal Align': '\u6c34\u5e73\u5bf9\u9f50\u65b9\u5f0f',
-    Row: '\u884c',
+    'Row': '\u884c',
    'Insert row above': '\u5728\u4e0a\u65b9\u63d2\u5165',
    'Insert row below': '\u5728\u4e0b\u65b9\u63d2\u5165',
    'Delete row': '\u5220\u9664\u884c',
-    Column: '\u5217',
+    'Column': '\u5217',
    'Insert column before': '\u5728\u5de6\u4fa7\u63d2\u5165',
    'Insert column after': '\u5728\u53f3\u4fa7\u63d2\u5165',
    'Delete column': '\u5220\u9664\u5217',
-    Cell: '\u5355\u5143\u683c',
+    'Cell': '\u5355\u5143\u683c',
    'Merge cells': '\u5408\u5e76\u5355\u5143\u683c',
    'Horizontal split': '\u6c34\u5e73\u5206\u5272',
    'Vertical split': '\u5782\u76f4\u5206\u5272',
    'Cell Background': '\u5355\u5143\u683c\u80cc\u666f',
    'Vertical Align': '\u5782\u76f4\u5bf9\u9f50\u65b9\u5f0f',
-    Top: '\u6700\u4f73',
-    Middle: '\u4e2d\u95f4',
-    Bottom: '\u5e95\u90e8',
+    'Top': '\u6700\u4f73',
+    'Middle': '\u4e2d\u95f4',
+    'Bottom': '\u5e95\u90e8',
    'Align Top': '\u9876\u90e8\u5bf9\u9f50',
    'Align Middle': '\u4e2d\u95f4\u5bf9\u9f50',
    'Align Bottom': '\u5e95\u90e8\u5bf9\u9f50',
@ -343,7 +343,7 @@ export default class FroalaEditor extends React.Component<any, any> {
    'Drop file': '\u6587\u4ef6\u62d6\u653e',

    // Emoticons
-    Emoticons: '\u8868\u60c5',
+    'Emoticons': '\u8868\u60c5',
    'Grinning face': '\u8138\u4e0a\u7b11\u563b\u563b',
    'Grinning face with smiling eyes': '',
    'Face with tears of joy':
@ -416,14 +416,14 @@ export default class FroalaEditor extends React.Component<any, any> {
    'Face with medical mask': '\u9762\u5bf9\u533b\u7597\u53e3\u7f69',

    // Line breaker
-    Break: '\u7834',
+    'Break': '\u7834',

    // Math
-    Subscript: '\u4e0b\u6807',
-    Superscript: '\u4e0a\u6807',
+    'Subscript': '\u4e0b\u6807',
+    'Superscript': '\u4e0a\u6807',

    // Full screen
-    Fullscreen: '\u5168\u5c4f',
+    'Fullscreen': '\u5168\u5c4f',

    // Horizontal line
    'Insert Horizontal Line': '\u63d2\u5165\u6c34\u5e73\u7ebf',
@ -432,8 +432,8 @@ export default class FroalaEditor extends React.Component<any, any> {
    'Clear Formatting': '\u683c\u5f0f\u5316\u5220\u9664',

    // Undo, redo
-    Undo: '\u64a4\u6d88',
-    Redo: '\u91cd\u590d',
+    'Undo': '\u64a4\u6d88',
+    'Redo': '\u91cd\u590d',

    // Select all
    'Select All': '\u5168\u9009',
@ -442,9 +442,9 @@ export default class FroalaEditor extends React.Component<any, any> {
    'Code View': '\u4ee3\u7801\u89c6\u56fe',

    // Quote
-    Quote: '\u5f15\u7528',
-    Increase: '\u589e\u52a0\u5f15\u7528',
-    Decrease: '\u5220\u9664\u5f15\u7528',
+    'Quote': '\u5f15\u7528',
+    'Increase': '\u589e\u52a0\u5f15\u7528',
+    'Decrease': '\u5220\u9664\u5f15\u7528',

    // Quick Insert
    'Quick Insert': '\u5feb\u63d2'
--- a/src/renderers/Form/index.tsx
+++ b/src/renderers/Form/index.tsx
@ -950,7 +950,14 @@ export default class Form extends React.Component<FormProps, object> {
  }

  renderBody() {
-    const {tabs, fieldSet, controls, mode, className, classnames: cx} = this.props;
+    const {
+      tabs,
+      fieldSet,
+      controls,
+      mode,
+      className,
+      classnames: cx
+    } = this.props;

    return (
      <div className={cx(`Form`, `Form--${mode || 'normal'}`, className)}>
--- a/src/themes/cxd.ts
+++ b/src/themes/cxd.ts
@ -5,27 +5,27 @@ theme('cxd', {
  classPrefix: 'cxd-',

  renderers: {
-    form: {
+    'form': {
      horizontal: {
        leftFixed: true
      }
    },

-    pagination: {
+    'pagination': {
      maxButtons: 9,
      showPageInput: false
    },

-    fieldset: {
+    'fieldset': {
      collapsable: false
    },

-    remark: {
+    'remark': {
      icon: 'iconfont icon-warning-mark',
      placement: 'right'
    },

-    tabs: {
+    'tabs': {
      mode: 'line'
    },

@ -38,7 +38,7 @@ theme('cxd', {
      clearable: true
    },

-    status: {
+    'status': {
      map: {
        success: 'Status-icon--success',
        pending: 'Status-icon--rolling',
--- a/src/themes/dark.ts
+++ b/src/themes/dark.ts
@ -6,7 +6,7 @@ theme('dark', {
  classPrefix,
  classnames,
  renderers: {
-    json: {
+    'json': {
      jsonTheme: 'eighties'
    },
    'editor-control': {
--- a/src/utils/helper.ts
+++ b/src/utils/helper.ts
@ -70,7 +70,11 @@ export function syncDataFromSuper(

  // 如果是 form store，则从父级同步 formItem 种东西。
  if (store && store.storeType === 'FormStore') {
-    keys = uniq((store as IFormStore).items.map(item => `${item.name}`.replace(/\..*$/, '')));
+    keys = uniq(
+      (store as IFormStore).items.map(item =>
+        `${item.name}`.replace(/\..*$/, '')
+      )
+    );
    force = false;
  }