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,18 +2,17 @@
@import '../scss/functions';
@import '../scss/variables';

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

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

@ -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 {
+.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
@ -26,7 +26,7 @@

 //生成类名“-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) {
--- a/scss/_mixins.scss
+++ b/scss/_mixins.scss
@ -38,7 +38,7 @@
  &::before,
  &::after {
    display: table;
-        content: "";
+    content: '';
  }
  &::after {
    clear: both;
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@ -1217,7 +1217,6 @@

@include media-breakpoint-up(sm) {
  .#{$ns}Form-col {
-
    &.w,
    &.w-xs,
    &.w-sm &.w-md &.w-lg {
@ -1302,9 +1301,8 @@
  -webkit-overflow-scrolling: touch;

  &.hover {
-
    &,
-        &>.cell-inner {
+    & > .cell-inner {
      overflow-y: hidden !important;
    }

@ -1314,16 +1312,15 @@
      overflow: visible;
      overflow-y: auto;

-            &>.cell-inner {
+      & > .cell-inner {
        overflow-y: auto !important;
      }
    }
  }

  .smart & {
-
    &,
-        &>.cell-inner {
+    & > .cell-inner {
      overflow-y: auto !important;
    }
  }
@ -1354,11 +1351,11 @@
 .hover-anchor:hover,
 .hover-anchor:focus,
 .hover-anchor:active {
-    &>.hover-action {
+  & > .hover-action {
    display: inherit;
  }

-    &>.hover-rotate {
+  & > .hover-rotate {
    transform: rotate(90deg);
  }
 }
@ -1423,7 +1420,7 @@
  width: 100%;
  height: 100%;

-    &>.col {
+  & > .col {
    display: table-cell;
    vertical-align: top;
    height: 100%;
@ -1547,7 +1544,7 @@
    display: block !important;
  }

-    .row-2 [class*="col"] {
+  .row-2 [class*='col'] {
    width: 50%;
    float: left;
  }
--- 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;
--- a/scss/base/_normalize.scss
+++ b/scss/base/_normalize.scss
@ -185,9 +185,9 @@ select {
   */

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

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

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

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

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

-[type="checkbox"],
-[type="radio"] {
+[type='checkbox'],
+[type='radio'] {
  box-sizing: border-box; // 1
  padding: 0; // 2
 }
@ -269,8 +269,8 @@ textarea {
   * Correct the cursor style of increment and decrement buttons in Chrome.
   */

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

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

-[type="search"] {
+[type='search'] {
  -webkit-appearance: textfield; // 1
  outline-offset: -2px; // 2
 }
@ -288,7 +288,7 @@ textarea {
   * Remove the inner padding in Chrome and Safari on macOS.
   */

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

@ -340,7 +340,6 @@ template {
  display: none;
 }

-
 svg.icon {
  width: 1em;
  height: 1em;
--- a/scss/components/_audio.scss
+++ b/scss/components/_audio.scss
@ -66,7 +66,7 @@

    &::after {
      clear: both;
-            content: "";
+      content: '';
    }

    .#{$ns}Audio-rateControlItem {
@ -104,7 +104,7 @@
    min-width: $Audio-process-minWidth;
    margin-right: $Audio-item-margin;

-        input[type="range"] {
+    input[type='range'] {
      @include input-range();
    }
  }
@ -130,7 +130,7 @@
    line-height: $Audio-volume-lineHeight;
    margin-right: $Audio-item-margin;

-        input[type="range"] {
+    input[type='range'] {
      @include input-range();
    }

--- a/scss/components/_button-group.scss
+++ b/scss/components/_button-group.scss
@ -30,8 +30,8 @@
    }
  } @else if
    (
-            variable-exists("ButtonGroup-divider-width") and
-                variable-exists("ButtonGroup-divider-color")
+      variable-exists('ButtonGroup-divider-width') and
+        variable-exists('ButtonGroup-divider-color')
    )
  {
    background-color: $ButtonGroup-divider-color;
@ -61,11 +61,11 @@
  }

  // cxd的ButtonGroup的is-active和:active样式不一样，这里做个兼容
-    .#{$ns}Button--primary:not(:disabled):not(.is-disabled).is-active{
-        @if variable-exists("ButtonGroup--primary-isActive-color") {
+  .#{$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") {
+    @if variable-exists('ButtonGroup--primary-isActive-bg') {
      background-color: $ButtonGroup--primary-isActive-bg;
    }
  }
--- a/scss/components/_button.scss
+++ b/scss/components/_button.scss
@ -317,9 +317,9 @@ fieldset:disabled a.#{$ns}Button {
  }
 }

-input[type="submit"],
-input[type="reset"],
-input[type="button"] {
+input[type='submit'],
+input[type='reset'],
+input[type='button'] {
  &.#{$ns}Button--block {
    width: 100%;
  }
--- a/scss/components/_collapse.scss
+++ b/scss/components/_collapse.scss
@ -18,7 +18,7 @@
    cursor: pointer;

    &:before {
-            content: "";
+      content: '';
      position: relative;
      display: inline-block;
      width: px2rem(6px);
@ -42,8 +42,9 @@
  }

  &-content {
-        transition: height .35s ease;
-        &.in, &.out {
+    transition: height 0.35s ease;
+    &.in,
+    &.out {
      height: 0;
      overflow: hidden;
    }
--- a/scss/components/_list.scss
+++ b/scss/components/_list.scss
@ -15,7 +15,7 @@
  &-actions {
    display: inline-block;

-        >* {
+    > * {
      margin-right: $Crud-toolbar-gap;
    }
  }
@ -23,14 +23,14 @@
  &-header {
    padding: $List-toolbar-paddingY $List-toolbar-paddingX;

-        >*+.#{$ns}Button,
-        >*+.#{$ns}ButtonGroup,
-        >*+.#{$ns}ButtonToolbar {
+    > * + .#{$ns}Button,
+    > * + .#{$ns}ButtonGroup,
+    > * + .#{$ns}ButtonToolbar {
      margin-left: $Crud-toolbar-gap;
    }
  }

-    &-header+&-toolbar {
+  &-header + &-toolbar {
    padding-top: 0;
  }

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

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

@ -147,7 +147,7 @@
    border-color: $ListItem-onChecked-borderColor;
    color: $ListItem-onChecked-color;

-        +.#{$ns}ListItem {
+    + .#{$ns}ListItem {
      border-color: $ListItem-onChecked-borderColor;
    }

@ -162,7 +162,7 @@
    border-color: $ListItem-onModified-borderColor;
    color: $ListItem-onModified-color;

-        +.#{$ns}ListItem {
+    + .#{$ns}ListItem {
      border-color: $ListItem-onModified-borderColor;
    }

--- a/scss/components/_modal.scss
+++ b/scss/components/_modal.scss
@ -135,7 +135,7 @@
    }
  }

-    &-content>&-close {
+  &-content > &-close {
    position: absolute;
    right: $gap-md;
    top: $gap-sm;
@ -143,12 +143,13 @@
  }

  &-body {
-        padding: $Modal-body--noHeader-paddingTop $Modal-body-paddingX $Modal-body-paddingY;
+    padding: $Modal-body--noHeader-paddingTop $Modal-body-paddingX
+      $Modal-body-paddingY;
    flex-basis: 0;
    flex-grow: 1;
  }

-    &-header+&-body {
+  &-header + &-body {
    padding-top: $Modal-body-paddingY;
  }

@ -175,7 +176,9 @@
@for $i from (2) through 10 {
  .#{$ns}Modal--#{$i}th {
    .#{$ns}Modal-content {
-            margin-top: $Modal-content-startMarginTop + ($i - 1) * $Modal-content-stepMarginTop;
+      margin-top: $Modal-content-startMarginTop +
+        ($i - 1) *
+        $Modal-content-stepMarginTop;
    }
  }
 }
--- a/scss/components/_nav.scss
+++ b/scss/components/_nav.scss
@ -123,7 +123,7 @@
        font-size: $Nav-subItem-fontSize;

        a:before {
-                    content: "";
+          content: '';
          display: inline-block;
          width: px2rem(4px);
          height: px2rem(4px);
--- a/scss/components/_page.scss
+++ b/scss/components/_page.scss
@ -66,7 +66,7 @@
@include media-breakpoint-up(md) {
  .#{$ns}Page-aside {
    &::before {
-            content: "";
+      content: '';
      position: absolute;
      width: inherit;
      top: 0;
--- a/scss/components/_popover.scss
+++ b/scss/components/_popover.scss
@ -24,7 +24,7 @@
  border: $borderWidth solid $borderColor;
  border-radius: $borderRadius;

-    &>* {
+  & > * {
    position: relative;
    z-index: 2;
  }
--- a/scss/components/_quick-edit.scss
+++ b/scss/components/_quick-edit.scss
@ -18,7 +18,7 @@
    position: relative;

    &:after {
-            content: "";
+      content: '';
      left: 0;
      top: 0;
      right: 0;
--- a/scss/components/_spinner.scss
+++ b/scss/components/_spinner.scss
@ -57,11 +57,11 @@
 }

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

-    .#{$ns}Layout--folded .#{$ns}Page-body>.#{$ns}Spinner-overlay {
+  .#{$ns}Layout--folded .#{$ns}Page-body > .#{$ns}Spinner-overlay {
    left: $Layout-aside--folded-width;
  }
 }
--- a/scss/components/_status.scss
+++ b/scss/components/_status.scss
@ -41,8 +41,8 @@
    &--success,
    &--warning {
      &::before {
-                font-family: "iconfont";
-                content: "\e632";
+        font-family: 'iconfont';
+        content: '\e632';
        font-style: normal;
      }
    }
@ -64,8 +64,8 @@
      }

      &::after {
-                font-family: "iconfont";
-                content: "\e632";
+        font-family: 'iconfont';
+        content: '\e632';
        font-style: normal;
        font-size: inherit;
        color: $primary;
--- a/scss/components/_table.scss
+++ b/scss/components/_table.scss
@ -40,19 +40,19 @@
      z-index: $zindex-affix;
    }

-        >.#{$ns}Table-fixedLeft,
-        >.#{$ns}Table-fixedRight {
+    > .#{$ns}Table-fixedLeft,
+    > .#{$ns}Table-fixedRight {
      z-index: $zindex-affix + 10;
      // box-shadow: none;
      background: transparent;
      border-top: $Table-borderWidth solid $Table-borderColor;

-            >table {
+      > table {
        margin-bottom: px2rem(5px);
      }
    }

-        >.#{$ns}Table-wrapper {
+    > .#{$ns}Table-wrapper {
      border-top: $Table-borderWidth solid $Table-borderColor;
    }
  }
@ -60,7 +60,8 @@
  &-heading {
    background: $Table-heading-bg;
    border-bottom: $Table-borderWidth solid $Table-borderColor;
-        padding: ($Table-heading-height - $Table-fontSize * $lineHeightBase) / 2 $Table-toolbar-paddingX;
+    padding: ($Table-heading-height - $Table-fontSize * $lineHeightBase) / 2
+      $Table-toolbar-paddingX;
  }

  &--unsaved &-heading {
@ -83,7 +84,7 @@
      background-color: transparent !important;
    }

-        >td {
+    > td {
      vertical-align: middle !important;
      text-align: center;
    }
@ -92,9 +93,9 @@
  &-header {
    padding: $Table-toolbar-paddingY $Table-toolbar-paddingX;

-        >*+.#{$ns}Button,
-        >*+.#{$ns}ButtonGroup,
-        >*+.#{$ns}ButtonToolbar {
+    > * + .#{$ns}Button,
+    > * + .#{$ns}ButtonGroup,
+    > * + .#{$ns}ButtonToolbar {
      margin-left: $Crud-toolbar-gap;
    }
  }
@ -105,7 +106,7 @@
    padding: $Table-toolbar-paddingY $Table-toolbar-paddingX;
  }

-    &-header+&-toolbar {
+  &-header + &-toolbar {
    padding-top: 0;
  }

@ -113,8 +114,8 @@
    position: relative;
  }

-    &-header+&-contentWrap,
-    &-toolbar+&-contentWrap {
+  &-header + &-contentWrap,
+  &-toolbar + &-contentWrap {
    border-top: $Table-borderWidth solid $Table-borderColor;
  }

@ -125,7 +126,7 @@
  &-actions {
    display: inline-block;

-        >* {
+    > * {
      margin-right: $Crud-toolbar-gap;
    }
  }
@ -145,9 +146,8 @@
    background-color: $Table-bg;

    &--withCombine {
-
-            >thead>tr>th,
-            >tbody>tr>td {
+      > thead > tr > th,
+      > tbody > tr > td {
        &:first-child {
          padding-left: $TableCell-paddingX !important;
        }
@ -158,7 +158,7 @@
      }

      // reset
-            >tbody>tr {
+      > tbody > tr {
        @if $Table-strip-bg !=transparent {
          &.#{$ns}Table-tr--odd {
            background-color: transparent;
@ -169,20 +169,20 @@
          background-color: transparent;
        }

-                >td {
+        > td {
          vertical-align: middle;
        }

-                >td:not(:last-child) {
+        > td:not(:last-child) {
          border-right: $Table-borderWidth solid $Table-borderColor;
        }
      }
    }

-        >thead>tr {
+    > thead > tr {
      background-color: $Table-thead-bg;

-            >th {
+      > th {
        &[colspan] {
          text-align: center;
        }
@ -212,14 +212,14 @@
      }
    }

-        >thead>tr+tr {
+    > thead > tr + tr {
      border-top: $Table-borderWidth solid $Table-borderColor;
    }

-        >tbody>tr {
+    > tbody > tr {
      border-top: $Table-borderWidth solid $Table-borderColor;

-            >td {
+      > td {
        padding: $TableCell-paddingY $TableCell-paddingX;
        vertical-align: top;

@ -246,7 +246,7 @@
        border-color: $Table-onHover-borderColor;
        color: $Table-onHover-color;

-                &+tr {
+        & + tr {
          border-color: $Table-onHover-borderColor;
        }
      }
@ -256,7 +256,7 @@
        border-color: $Table-onChecked-borderColor;
        color: $Table-onChecked-color;

-                &+tr {
+        & + tr {
          border-color: $Table-onChecked-borderColor;
        }

@ -266,7 +266,7 @@
          border-color: $Table-onChecked-onHover-borderColor;
          color: $Table-onChecked-onHover-color;

-                    &+tr {
+          & + tr {
            border-color: $Table-onChecked-onHover-borderColor;
          }
        }
@ -278,7 +278,7 @@
        border-color: $Table-onModified-borderColor;
        color: $Table-onModified-color;

-                &+tr {
+        & + tr {
          border-color: $Table-onModified-borderColor;
        }

@ -288,7 +288,7 @@
          border-color: $Table-onModified-onHover-borderColor;
          color: $Table-onModified-onHover-color;

-                    &+tr {
+          & + tr {
            border-color: $Table-onModified-onHover-borderColor;
          }
        }
@ -309,10 +309,10 @@
      tr.#{$ns}Table-tr--#{$i}th {
        .#{$ns}Table-expandBtn {
          position: relative;
-                    right: - px2rem(20px) * ($i - 1);
+          right: -px2rem(20px) * ($i - 1);
        }

-                .#{$ns}Table-expandCell+td {
+        .#{$ns}Table-expandCell + td {
          position: relative;

          &::before {
@ -341,26 +341,23 @@
      }

      tr.#{$ns}Table-tr--#{$i}th.is-expandable {
-                .#{$ns}Table-expandCell+td {
+        .#{$ns}Table-expandCell + td {
          padding-left: px2rem(20px) * ($i - 1);
        }
      }

-
      tr.#{$ns}Table-tr--#{$i}th.is-last:not(.is-expanded) {
-                .#{$ns}Table-expandCell+td {
+        .#{$ns}Table-expandCell + td {
          &::before {
            height: px2rem(20px);
            bottom: auto;
          }
        }
      }
-
-
    }

-        >thead>tr>th.#{$ns}Table-checkCell,
-        >tbody>tr>td.#{$ns}Table-checkCell {
+    > thead > tr > th.#{$ns}Table-checkCell,
+    > tbody > tr > td.#{$ns}Table-checkCell {
      border-right: 0;
      width: px2rem(1px);

@ -369,21 +366,21 @@
      }
    }

-        >thead>tr>th.#{$ns}Table-expandCell,
-        >tbody>tr>td.#{$ns}Table-expandCell {
+    > thead > tr > th.#{$ns}Table-expandCell,
+    > tbody > tr > td.#{$ns}Table-expandCell {
      border-right: 0;
      width: px2rem(1px);
      padding-right: 0;
    }

-        >thead>tr>th.#{$ns}Table-dragCell,
-        >tbody>tr>td.#{$ns}Table-dragCell {
+    > thead > tr > th.#{$ns}Table-dragCell,
+    > tbody > tr > td.#{$ns}Table-dragCell {
      border-right: 0;
      width: px2rem(1px);
      padding-right: 0;
    }

-        >tbody>tr>td.#{$ns}Table-expandCell {
+    > tbody > tr > td.#{$ns}Table-expandCell {
      position: relative;

      @for $i from 1 through 7 {
@ -399,7 +396,7 @@
      }
    }

-        >tbody>tr.is-expanded>td.#{$ns}Table-expandCell {
+    > tbody > tr.is-expanded > td.#{$ns}Table-expandCell {
      // position: relative;

      &::before {
@ -414,22 +411,20 @@
      }
    }

-        >thead>tr>th.#{$ns}TableCell--sortable {
+    > thead > tr > th.#{$ns}TableCell--sortable {
      padding-right: $TableCell-paddingX + $TableCell-sortBtn-width;
      position: relative;
    }

-        >thead>tr>th.#{$ns}TableCell--searchable {
+    > thead > tr > th.#{$ns}TableCell--searchable {
      padding-right: $TableCell-paddingX + $TableCell-searchBtn-width;
      position: relative;
    }

-        >thead>tr>th.#{$ns}TableCell--filterable {
+    > thead > tr > th.#{$ns}TableCell--filterable {
      padding-right: $TableCell-paddingX + $TableCell-filterBtn-width;
      position: relative;
    }
-
-
  }

  &Cell-sortBtn {
@ -570,10 +565,12 @@
    pointer-events: all;
    position: absolute;
    // background: $Table-onHover-bg;
-        background: linear-gradient(90deg,
+    background: linear-gradient(
+      90deg,
      rgba($Table-onHover-bg, 0) 0%,
      rgba($Table-onHover-bg, 1) 20%,
-                rgba($Table-onHover-bg, 1) 100%);
+      rgba($Table-onHover-bg, 1) 100%
+    );
    top: $Table-borderWidth;
    bottom: 0;
    right: 0;
@ -615,28 +612,28 @@
    margin-bottom: 0;
    background: transparent;

-        >tbody>tr>th {
+    > tbody > tr > th {
      width: px2rem(120px);
      text-align: right;
      padding: $TableCell-paddingY $TableCell-paddingX;
    }

-        >tbody>tr>td {
+    > tbody > tr > td {
      word-break: break-all;
      padding: $TableCell-paddingY $TableCell-paddingX;
    }

-        >tbody>tr:not(:first-child) {
-            border-top: $Table-borderWidth solid lighten($Table-thead-borderColor, 2.5%);
+    > tbody > tr:not(:first-child) {
+      border-top: $Table-borderWidth solid
+        lighten($Table-thead-borderColor, 2.5%);
    }
  }

-
  &-expandBtn {
    position: relative;
    z-index: 1;

-        >i {
+    > i {
      display: inline-block;
      width: px2rem(16px);
      text-align: center;
@ -645,7 +642,7 @@

      &:before {
        display: inline-block;
-                line-height: 1.0;
+        line-height: 1;
        font-size: $Table-expandBtn-fontSize;
        color: $Table-expandBtn-color;
        font-family: $Table-expandBtn-vendor;
@ -654,7 +651,7 @@
      }
    }

-        &.is-active>i::before {
+    &.is-active > i::before {
      transform: rotate(90deg);
      transform-origin: 50% 50%;
    }
@ -667,9 +664,9 @@
    cursor: move;
  }

-    &-table>tbody>tr:hover .#{$ns}Table-dragBtn,
-    &-table>tbody>tr.is-dragging .#{$ns}Table-dragBtn,
-    &-table>tbody>tr.is-drop-allowed .#{$ns}Table-dragBtn {
+  &-table > tbody > tr:hover .#{$ns}Table-dragBtn,
+  &-table > tbody > tr.is-dragging .#{$ns}Table-dragBtn,
+  &-table > tbody > tr.is-drop-allowed .#{$ns}Table-dragBtn {
    visibility: visible;
  }
 }
@ -677,7 +674,7 @@
 .#{$ns}OperationField {
  margin: px2rem(-3px);

-    >.#{$ns}Button {
+  > .#{$ns}Button {
    margin: px2rem(3px);
  }
 }
--- a/scss/components/_tabs.scss
+++ b/scss/components/_tabs.scss
@ -10,12 +10,12 @@
      content: ' ';
    }

-        >.#{$ns}Tabs-link {
+    > .#{$ns}Tabs-link {
      margin-bottom: -$Tabs-borderWidth;
      display: inline-block;
      position: relative;

-            >a:first-child {
+      > a:first-child {
        font-size: $Tabs-linkFontSize;
        outline: none;
        border: $Tabs-borderWidth solid transparent;
@ -29,7 +29,7 @@
        display: block;
      }

-            >.#{$ns}Combo-toolbarBtn {
+      > .#{$ns}Combo-toolbarBtn {
        position: absolute;
        right: -10px;
        top: -10px;
@ -37,26 +37,26 @@
        display: none;
      }

-            &:hover>.#{$ns}Combo-toolbarBtn {
+      &:hover > .#{$ns}Combo-toolbarBtn {
        display: block;
      }

-            &:hover>a:first-child,
-            >a:first-child:focus {
+      &: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 {
+      &.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 {
+      &.active > a:first-child,
+      &.is-active > a:first-child {
        color: $Tabs-onActive-color;
        background-color: $Tabs-onActive-bg;
        border-color: $Tabs-onActive-borderColor;
@ -88,11 +88,11 @@
  }

  &--line {
-        >.#{$ns}Tabs-links {
+    > .#{$ns}Tabs-links {
      border-bottom-color: $Tabs--line-borderColor;

-            >li {
-                >a:first-child {
+      > li {
+        > a:first-child {
          border-width: 0 0 $Tabs--line-borderWidth 0;
          padding: $Tabs--line-linkPadding;
          margin: $Tabs--line-linkMargin;
@ -106,16 +106,15 @@
        }

        &:last-child {
-                    >a {
+          > a {
            margin: 0;
          }
        }

        &.is-active {
-
-                    >a:first-child,
-                    >a:first-child:hover,
-                    >a:first-child:focus {
+          > 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;
@ -124,7 +123,7 @@
      }
    }

-        >.#{$ns}Tabs-content {
+    > .#{$ns}Tabs-content {
      border-width: 0;
      padding: $Tabs--line-content-padding;
      background-color: $Tabs--line-content-bg;
@ -132,17 +131,16 @@
  }

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

-            >li {
+      > li {
        &.is-active {
-
-                    >a:first-child,
-                    >a:first-child:hover,
-                    >a:first-child:focus {
+          > 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;
@ -150,7 +148,7 @@
          }
        }

-                >a:first-child {
+        > a:first-child {
          padding: $Tabs--card-linkPadding;
          margin: $Tabs--card-linkMargin;

@ -164,20 +162,20 @@
      }
    }

-        >.#{$ns}Tabs-content {
+    > .#{$ns}Tabs-content {
      border-width: 0;
    }
  }

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

-            >li {
+      > li {
        margin: 0;

-                >a:first-child {
+        > a:first-child {
          border-width: px2rem(1px);
          border-color: $Tabs-borderColor;
          font-size: $fontSizeSm;
@ -197,10 +195,9 @@
        }

        &.is-active {
-
-                    >a:first-child,
-                    >a:first-child:hover,
-                    >a:first-child:focus {
+          > a:first-child,
+          > a:first-child:hover,
+          > a:first-child:focus {
            color: $Tabs--radio-bg;
            background-color: $primary;
            border-color: $primary;
@ -210,12 +207,12 @@
        }
      }

-            >li+li {
+      > li + li {
        margin-left: -1px;
      }
    }

-        >.#{$ns}Tabs-content {
+    > .#{$ns}Tabs-content {
      border-top: $Tabs-borderWidth solid $Tabs-borderColor;
    }
  }
@ -226,17 +223,17 @@
    border: $Tabs-borderWidth solid $Tabs-borderColor;
    border-radius: 0;

-        >.#{$ns}Tabs-links {
+    > .#{$ns}Tabs-links {
      width: px2rem(140px);
-            background: #F5F5F5;
+      background: #f5f5f5;
      border: none;
      padding-bottom: px2rem(60px);

-            >li {
+      > li {
        margin: 0 0 0 -1px;
        display: block;

-                >a:first-child {
+        > a:first-child {
          border-color: transparent;
          border-radius: 0;
          border-width: 0 0 0 px2rem(4px);
@ -250,10 +247,9 @@
        }

        &.is-active {
-
-                    >a:first-child,
-                    >a:first-child:hover,
-                    >a:first-child:focus {
+          > a:first-child,
+          > a:first-child:hover,
+          > a:first-child:focus {
            color: $primary;
            border-color: $primary;
          }
@ -261,8 +257,7 @@
      }
    }

-
-        >.#{$ns}Tabs-content {
+    > .#{$ns}Tabs-content {
      border: none;
      flex-grow: 1;
    }
--- a/scss/components/_toast.scss
+++ b/scss/components/_toast.scss
@ -1,5 +1,4 @@
@keyframes bounceIn {
-
  from,
  20%,
  40%,
@ -64,7 +63,8 @@
  width: $Toast-width;
  pointer-events: auto;
  margin-bottom: $gap-xs;
-    padding: $Toast-paddingY $Toast-paddingX $Toast-paddingY ($Toast-paddingX + $Toast-paddingL);
+  padding: $Toast-paddingY $Toast-paddingX $Toast-paddingY
+    ($Toast-paddingX + $Toast-paddingL);
  box-shadow: $Toast-box-shadow;
  border-radius: $Toast-borderRadius;
  border: $Toast-border-width solid;
@ -135,7 +135,8 @@
    color: $Toast--info-color;
    border-color: $Toast--info-borderColor;
    background-color: $Toast--info-bgColor;
-        padding: $Toast-paddingY $Toast-paddingX $Toast-paddingY ($Toast-paddingX + $Toast--info-paddingL);
+    padding: $Toast-paddingY $Toast-paddingX $Toast-paddingY
+      ($Toast-paddingX + $Toast--info-paddingL);

    &::before {
      content: $Toast--info-icon;
--- a/scss/components/_tooltip.scss
+++ b/scss/components/_tooltip.scss
@ -68,7 +68,8 @@

    .#{$ns}Tooltip-arrow::before,
    .#{$ns}Tooltip-arrow::after {
-            border-width: ($Tooltip-arrow-width / 2) $Tooltip-arrow-height ($Tooltip-arrow-width / 2) 0;
+      border-width: ($Tooltip-arrow-width / 2) $Tooltip-arrow-height
+        ($Tooltip-arrow-width / 2) 0;
    }

    .#{$ns}Tooltip-arrow::before {
@ -91,7 +92,8 @@

    .#{$ns}Tooltip-arrow::before,
    .#{$ns}Tooltip-arrow::after {
-            border-width: 0 ($Tooltip-arrow-width / 2) $Tooltip-arrow-height ($Tooltip-arrow-width / 2);
+      border-width: 0 ($Tooltip-arrow-width / 2) $Tooltip-arrow-height
+        ($Tooltip-arrow-width / 2);
    }

    .#{$ns}Tooltip-arrow::before {
@ -131,7 +133,8 @@

    .#{$ns}Tooltip-arrow::before,
    .#{$ns}Tooltip-arrow::after {
-            border-width: ($Tooltip-arrow-width / 2) 0 ($Tooltip-arrow-width / 2) $Tooltip-arrow-height;
+      border-width: ($Tooltip-arrow-width / 2) 0 ($Tooltip-arrow-width / 2)
+        $Tooltip-arrow-height;
    }

    .#{$ns}Tooltip-arrow::before {
@ -166,7 +169,6 @@
  }
 }

-
@keyframes tooltipIn {
  from {
    opacity: 0;
--- a/scss/components/form/_checks.scss
+++ b/scss/components/form/_checks.scss
@ -8,12 +8,12 @@
    position: absolute;
  }

-    &:hover input:not(:disabled)+i {
+  &:hover input:not(:disabled) + i {
    border-color: $Checkbox-onHover-color;
    // box-shadow: 0 0 px2rem(1px) $Checkbox-onHover-color inset;
  }

-    >i {
+  > i {
    cursor: pointer;
    line-height: 1;
    background: $Checkbox-gb;
@ -21,7 +21,7 @@
    vertical-align: middle;
    position: relative;

-        +span {
+    + span {
      margin-left: $Checkbox-gap;
      cursor: pointer;

@ -50,7 +50,7 @@
    input {
      margin-left: -$Checkbox-size;

-            &:checked+i {
+      &:checked + i {
        border-color: $Checkbox-onHover-color;

        &:before {
@ -60,7 +60,7 @@
        }
      }

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

@ -70,13 +70,13 @@
        }
      }

-            &[disabled]+i+span {
+      &[disabled] + i + span {
        cursor: not-allowed;
        color: $text--muted-color;
      }
    }

-        >i {
+    > i {
      width: $Checkbox-size;
      height: $Checkbox-size;
      border: px2rem(1px) solid $Checkbox-color;
@ -87,12 +87,12 @@
  }

  &--full.#{$ns}Checkbox--checkbox {
-        &:not(:disabled)+i:hover {
+    &:not(:disabled) + i:hover {
      border-color: $Checkbox-color;
    }

    input {
-            &:checked+i {
+      &:checked + i {
        border-color: $Checkbox-onHover-color;
        background: $Checkbox-onHover-color;

@ -111,13 +111,13 @@
      //     }
      // }

-            &:checked[disabled]+i {
+      &:checked[disabled] + i {
        border-color: lighten($Checkbox-color, 5%);
        background-color: lighten($Checkbox-color, 5%);
      }
    }

-        >i {
+    > i {
      position: relative;
      cursor: pointer;

@ -143,7 +143,7 @@
    input {
      margin-left: -$Radio-size;

-            &:checked+i {
+      &:checked + i {
        border-color: $Radio-onHover-color;

        &:before {
@ -154,7 +154,7 @@
        }
      }

-            &[disabled]+i {
+      &[disabled] + i {
        border-color: lighten($Radio-color, 5%);
        cursor: not-allowed;

@ -163,13 +163,13 @@
        }
      }

-            &[disabled]+i+span {
+      &[disabled] + i + span {
        cursor: not-allowed;
        color: $text--muted-color;
      }
    }

-        >i {
+    > i {
      cursor: pointer;
      width: $Radio-size;
      height: $Radio-size;
@ -186,7 +186,7 @@
    input {
      margin-left: -$Checkbox--sm-size;

-            &:checked+i {
+      &:checked + i {
        &:before {
          width: $Checkbox--sm-inner-size;
          height: $Checkbox--sm-inner-size;
@ -194,12 +194,12 @@
      }
    }

-        >i {
+    > i {
      width: $Checkbox--sm-size;
      height: $Checkbox--sm-size;
      margin-left: -$Checkbox--sm-size;

-            +span {
+      + span {
        margin-left: $gap-xs;
      }
    }
@ -207,7 +207,7 @@

  &--sm.#{$ns}Checkbox--full {
    input {
-            &:checked+i {
+      &:checked + i {
        &:before {
          width: $Checkbox--sm--full-inner-size;
          height: $Checkbox--sm--full-inner-size / 2;
@ -244,14 +244,13 @@

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

-        >.#{$ns}RadiosControl-groupLabel,
-        >.#{$ns}CheckboxesControl-groupLabel {
+    > .#{$ns}RadiosControl-groupLabel,
+    > .#{$ns}CheckboxesControl-groupLabel {
      float: left;
      width: px2rem(80px);
      margin-left: px2rem(-80px);
--- a/scss/components/form/_combo.scss
+++ b/scss/components/form/_combo.scss
@ -94,9 +94,8 @@
  &--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);
+      margin: (-$Combo--vertical-item-gap * 2) (-$Combo--vertical-item-gap * 2)
+        0 (-$Combo--vertical-item-gap * 2);
    }

    .#{$ns}Combo-itemTag {
@ -113,8 +112,7 @@
    > .#{$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;
+      padding: $Combo--vertical-item-paddingY $Combo--vertical-item-paddingX;
      position: relative;
    }

@ -173,7 +171,7 @@
    position: relative;

    &:after {
-            content: "";
+      content: '';
      display: block;
      position: absolute;
      z-index: 5;
--- a/scss/components/form/_date.scss
+++ b/scss/components/form/_date.scss
@ -33,7 +33,7 @@
  &.is-disabled {
    background: $gray200;

-        >&-input {
+    > &-input {
      color: $text--muted-color;
    }
  }
@ -78,7 +78,7 @@
  }
 }

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

@ -234,7 +234,8 @@
    font-size: $fontSizeSm;
  }

-    @include button-variant($Calendar-btn-bg,
+  @include button-variant(
+    $Calendar-btn-bg,
    $Calendar-btn-border,
    $Calendar-btn-color,
    $Calendar-btn-onHover-bg,
@ -242,16 +243,18 @@
    $Calendar-btn-onHover-color,
    $Calendar-btn-onActive-bg,
    $Calendar-btn-onActive-border,
-        $Calendar-btn-onActive-color);
+    $Calendar-btn-onActive-color
+  );

  border-radius: $Calendar-btn-borderRadius;

-    &+.rdtBtn {
+  & + .rdtBtn {
    margin-left: $gap-xs;
  }

  &Cancel {
-        @include button-variant($Calendar-btnCancel-bg,
+    @include button-variant(
+      $Calendar-btnCancel-bg,
      $Calendar-btnCancel-border,
      $Calendar-btnCancel-color,
      $Calendar-btnCancel-onHover-bg,
@ -259,7 +262,8 @@
      $Calendar-btnCancel-onHover-color,
      $Calendar-btnCancel-onActive-bg,
      $Calendar-btnCancel-onActive-border,
-            $Calendar-btnCancel-onActive-color);
+      $Calendar-btnCancel-onActive-color
+    );
  }
 }

--- a/scss/components/form/_fieldset.scss
+++ b/scss/components/form/_fieldset.scss
@ -13,7 +13,7 @@
    right: 0;
  }

-    >legend {
+  > legend {
    position: absolute;
    top: 0;
    left: 0;
@ -31,7 +31,7 @@
 }

 fieldset.#{$ns}Collapse {
-    >legend {
+  > legend {
    font-weight: $fontWeightNormal;
    padding: $gap-xs 0;
    font-size: $fontSizeMd;
@ -48,7 +48,7 @@ fieldset.#{$ns}Collapse {
    @extend %fieldSetBase;
    padding: 20px 5px 5px 5px;

-        >legend {
+    > legend {
      left: 5px;
      font-size: $fontSizeXs;
      padding: 0 3px;
@ -65,7 +65,7 @@ fieldset.#{$ns}Collapse {

    padding: 25px 10px 10px 10px;

-        >legend {
+    > legend {
      left: 10px;
      font-size: $fontSizeSm;
      padding: 0 5px;
@ -82,7 +82,7 @@ fieldset.#{$ns}Collapse {

    padding: 30px 15px 15px 15px;

-        >legend {
+    > legend {
      left: 15px;
      font-size: $fontSizeBase;
      padding: 0 8px;
@ -98,7 +98,7 @@ fieldset.#{$ns}Collapse {
    @extend %fieldSetBase;
    padding: 30px 20px 20px 20px;

-        >legend {
+    > legend {
      left: 20px;
      font-size: $fontSizeMd;
      padding: 0 10px;
@ -114,7 +114,7 @@ fieldset.#{$ns}Collapse {
    @extend %fieldSetBase;
    padding: 40px 30px 30px 30px;

-        >legend {
+    > legend {
      left: 30px;
      font-size: $fontSizeLg;
      padding: 0 15px;
--- a/scss/components/form/_file.scss
+++ b/scss/components/form/_file.scss
@ -1,14 +1,12 @@
 .#{$ns}FileControl {
  &-dropzone {
    outline: none;
-
  }

  &-selectBtn {
    width: px2rem(120px);

-
-        >svg {
+    > svg {
      margin-right: 10px;
      width: pxrem(16px);
      height: pxrem(16px);
@ -42,7 +40,7 @@
    padding: 0;
    width: 250px;

-        >li {
+    > li {
      color: #333;
      font-size: 12px;

@ -50,13 +48,9 @@
        color: #108cee;
        background: #f3f3f3;
      }
-
-
    }
  }

-
-
  &-itemInfo {
    padding: 0px 6px;
    line-height: 26px;
@ -66,11 +60,11 @@
      color: #999;
    }

-        >svg:first-child {
+    > svg:first-child {
      margin-right: 10px;
    }

-        >svg:not(:first-child) {
+    > svg:not(:first-child) {
      margin-left: 10px;
      width: px2rem(16px);
      height: px2rem(16px);
@ -98,7 +92,7 @@
    }
  }

-    &-list>li:hover &-clear {
+  &-list > li:hover &-clear {
    display: block;
  }

@ -112,13 +106,13 @@
    white-space: nowrap;
    text-overflow: ellipsis;

-        >span {
+    > span {
      display: inline-block;
      padding: 0 4px 0 10px;
      font-size: 12px;
    }

-        >svg {
+    > svg {
      display: inline-block;
      margin: 0 4px 0 10px;
      width: 14px;
@ -127,14 +121,12 @@
    }
  }

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

-        >span {
+    > span {
      display: block;
      background: $info;
      height: 100%;
--- a/scss/components/form/_image.scss
+++ b/scss/components/form/_image.scss
@ -15,7 +15,8 @@
    border: $borderWidth solid $borderColor;
    cursor: pointer;

-        @include button-variant($ImageControl-addBtn-bg,
+    @include button-variant(
+      $ImageControl-addBtn-bg,
      $ImageControl-addBtn-border,
      $ImageControl-addBtn-color,
      $ImageControl-addBtn-onHover-bg,
@ -23,9 +24,10 @@
      $ImageControl-addBtn-onHover-color,
      $ImageControl-addBtn-onActive-bg,
      $ImageControl-addBtn-onActive-border,
-            $ImageControl-addBtn-onActive-color);
+      $ImageControl-addBtn-onActive-color
+    );

-        >svg {
+    > svg {
      width: px2rem(50px);
      height: px2rem(50px);
      top: 0;
@ -78,11 +80,11 @@
  &-itemImageWrap {
    width: px2rem(108px);
    height: px2rem(108px);
-        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwMCIgaGVpZ2h0PSI0MDAiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdHRlcm4gaWQ9ImdyaWQiIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgICAgICAgICAgIDxyZWN0IGZpbGw9ImJsYWNrIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIG9wYWNpdHk9IjAuMSIgLz4KICAgICAgICAgICAgPHJlY3QgZmlsbD0id2hpdGUiIHg9IjEwIiB5PSIwIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIC8+CiAgICAgICAgICAgIDxyZWN0IGZpbGw9ImJsYWNrIiB4PSIxMCIgeT0iMTAiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgb3BhY2l0eT0iMC4xIiAvPgogICAgICAgICAgICA8cmVjdCBmaWxsPSJ3aGl0ZSIgeD0iMCIgeT0iMTAiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgLz4KICAgICAgICA8L3BhdHRlcm4+CiAgICA8L2RlZnM+CiAgICA8cmVjdCBmaWxsPSJ1cmwoI2dyaWQpIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiAvPgo8L3N2Zz4=");
+    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwMCIgaGVpZ2h0PSI0MDAiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdHRlcm4gaWQ9ImdyaWQiIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgICAgICAgICAgIDxyZWN0IGZpbGw9ImJsYWNrIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIG9wYWNpdHk9IjAuMSIgLz4KICAgICAgICAgICAgPHJlY3QgZmlsbD0id2hpdGUiIHg9IjEwIiB5PSIwIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIC8+CiAgICAgICAgICAgIDxyZWN0IGZpbGw9ImJsYWNrIiB4PSIxMCIgeT0iMTAiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgb3BhY2l0eT0iMC4xIiAvPgogICAgICAgICAgICA8cmVjdCBmaWxsPSJ3aGl0ZSIgeD0iMCIgeT0iMTAiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgLz4KICAgICAgICA8L3BhdHRlcm4+CiAgICA8L2RlZnM+CiAgICA8cmVjdCBmaWxsPSJ1cmwoI2dyaWQpIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiAvPgo8L3N2Zz4=');
    overflow: hidden;
    position: relative;

-        >img {
+    > img {
      position: absolute;
      left: 50%;
      top: 50%;
@ -107,13 +109,13 @@
    flex-wrap: wrap;
    color: #fff;

-        >div {
+    > div {
      width: 100%;
      text-align: center;
      margin-bottom: 5px;
    }

-        >a {
+    > a {
      cursor: pointer;
      color: #fff;
      display: inline-block;
@ -136,7 +138,7 @@
    right: 5px;
    line-height: 1;

-        >svg {
+    > svg {
      top: 0;
      width: 10px;
      height: 10px;
@ -152,7 +154,7 @@
    align-content: center;
    flex-wrap: wrap;

-        >p {
+    > p {
      width: 100%;
      text-align: center;
      font-size: 12px;
@ -191,9 +193,7 @@
      text-decoration: none;
    }

-
-
-        >p {
+    > p {
      width: 100%;
      text-align: center;
      color: $danger;
@ -228,7 +228,7 @@
    flex-direction: column;
    align-items: flex-end;

-        >a {
+    > a {
      color: #fff;
      padding: 2px 5px;
      cursor: pointer;
--- a/scss/components/form/_input-group.scss
+++ b/scss/components/form/_input-group.scss
@ -18,7 +18,8 @@
  &-addOn {
    background: $InputGroup-addOn-bg;
    border: $InputGroup-addOn-borderWidth solid $InputGroup-addOn-borderColor;
-        line-height: $InputGroup-height - $InputGroup-paddingY * 2 - $InputGroup-addOn-borderWidth * 2;
+    line-height: $InputGroup-height - $InputGroup-paddingY * 2 -
+      $InputGroup-addOn-borderWidth * 2;
    height: $InputGroup-height;
    box-sizing: border-box;
    padding: $InputGroup-paddingY $InputGroup-paddingX;
@ -45,7 +46,8 @@
  &-btn {
    .#{$ns}Button {
      border-radius: 0;
-            border: $InputGroup-button-borderWidth solid $InputGroup-button-borderColor;
+      border: $InputGroup-button-borderWidth solid
+        $InputGroup-button-borderColor;
    }

    &:not(:last-child) .#{$ns}Button {
@ -88,7 +90,9 @@
    @if $InputGroup-select-borderWidth {
      .#{$ns}Select {
        background-color: $InputGroup-select-bg;
-                border: $InputGroup-select-borderWidth solid $InputGroup-select-borderColor;
+        border: $InputGroup-select-borderWidth
+          solid
+          $InputGroup-select-borderColor;

        @if $InputGroup-select-color !=$Form-select-color {
          color: $InputGroup-select-color;
@ -133,7 +137,6 @@
  }

  &.is-focused {
-
    .#{$ns}InputGroup-addOn,
    .#{$ns}TextControl-input,
    .#{$ns}Select,
--- a/scss/components/form/_list.scss
+++ b/scss/components/form/_list.scss
@ -15,8 +15,7 @@
    display: inline-block;
    vertical-align: middle;
    margin: $ListControl-gutterWidth/2;
-        border: $ListControl-item-borderWidth solid
-            $ListControl-item-borderColor;
+    border: $ListControl-item-borderWidth solid $ListControl-item-borderColor;
    background-color: $ListControl-item-bg;
    padding: $ListControl-item-paddingY $ListControl-item-paddingX;
    color: $ListControl-item-color;
@ -46,11 +45,11 @@
      opacity: $ListControl-item-onDisabled-opacity;
      border-color: $ListControl-item-onDisabled-borderColor;

-            @if variable-exists("ListControl-item-onDisabled-bg") {
+      @if variable-exists('ListControl-item-onDisabled-bg') {
        background-color: $ListControl-item-onDisabled-bg;
      }

-            @if variable-exists("ListControl-item-onDisabled-color") {
+      @if variable-exists('ListControl-item-onDisabled-color') {
        color: $ListControl-item-onDisabled-color;
      }

@ -65,7 +64,7 @@
      border-color: $ListControl-item-onActive-borderColor;
      color: $ListControl-item-onActive-color;

-            @if variable-exists("ListControl-item-onActive-onHover-bg") {
+      @if variable-exists('ListControl-item-onActive-onHover-bg') {
        &:hover {
          background-color: $ListControl-item-onActive-onHover-bg;
        }
@ -76,7 +75,7 @@
      }

      &:before {
-                content: "";
+        content: '';
        position: absolute;
        width: px2rem(14px);
        height: px2rem(14px);
@ -86,7 +85,7 @@
      }

      &:after {
-                content: "";
+        content: '';
        position: absolute;
        width: px2rem(10px);
        height: px2rem(5px);
--- a/scss/components/form/_nested-select.scss
+++ b/scss/components/form/_nested-select.scss
@ -8,8 +8,8 @@
  border-radius: $Form-select-borderRadius;
  height: $Form-selectOption-height;
  $paddingY: (
-            $Form-selectOption-height - $Form-input-lineHeight *
-                $Form-input-fontSize - $Form-select-borderWidth * 2
+      $Form-selectOption-height - $Form-input-lineHeight * $Form-input-fontSize -
+        $Form-select-borderWidth * 2
    )/2;
  padding: $paddingY 0 $paddingY $Form-select-paddingX;
  cursor: pointer;
@ -90,7 +90,8 @@
    position: absolute;
    background: $Form-select-menu-bg;
    color: $Form-select-menu-color;
-        border: $Form-select-outer-borderWidth solid $Form-input-onFocused-borderColor;
+    border: $Form-select-outer-borderWidth solid
+      $Form-input-onFocused-borderColor;
    box-shadow: $Form-select-outer-boxShadow;

    .#{$ns}NestedSelect-option {
--- a/scss/components/form/_picker.scss
+++ b/scss/components/form/_picker.scss
@ -48,8 +48,7 @@
    user-select: none;
    white-space: nowrap;
    vertical-align: middle;
-        line-height: $Form-input-lineHeight * $Form-input-fontSize -
-            px2rem(2px);
+    line-height: $Form-input-lineHeight * $Form-input-fontSize - px2rem(2px);
    display: inline-block;
    font-size: $Form-selectValue-fontSize;
    color: $Form-selectValue-color;
--- a/scss/components/form/_range.scss
+++ b/scss/components/form/_range.scss
@ -83,8 +83,7 @@
    width: $InputRange-slider-width;
    height: $InputRange-slider-height;
    margin-left: $InputRange-slider-width / -2;
-        margin-top: $InputRange-slider-height / -2 + $InputRange-track-height /
-            -2;
+    margin-top: $InputRange-slider-height / -2 + $InputRange-track-height / -2;
    outline: none;
    position: absolute;
    z-index: 2;
@ -107,7 +106,7 @@
    }

    &:before {
-            content: "||";
+      content: '||';
      color: #fff;
      display: block;
      line-height: px2rem(22px);
@ -192,7 +191,7 @@

    &::before,
    &::after {
-            content: "";
+      content: '';
      width: 0.5rem;
      height: 100%;
      position: absolute;
--- a/scss/components/form/_rich-text.scss
+++ b/scss/components/form/_rich-text.scss
@ -60,7 +60,8 @@
    border: $Form-input-borderWidth solid $Form-input-onFocused-borderColor;

    .fr-box.fr-basic.fr-top .fr-wrapper {
-            border-top: $Form-input-borderWidth solid $Form-input-onFocused-borderColor;
+      border-top: $Form-input-borderWidth solid
+        $Form-input-onFocused-borderColor;
    }
  }

--- a/scss/components/form/_sub-form.scss
+++ b/scss/components/form/_sub-form.scss
@ -3,8 +3,8 @@
    display: inline-block;
    margin-top: -$gap-xs;
    padding: (
-                $Form-input-height - $Form-input-lineHeight *
-                    $Form-input-fontSize - px2rem(2px)
+        $Form-input-height - $Form-input-lineHeight * $Form-input-fontSize -
+          px2rem(2px)
      )/2 0;
  }

--- a/scss/components/form/_switch.scss
+++ b/scss/components/form/_switch.scss
@ -17,7 +17,7 @@

  i {
    &:before {
-            content: "\5173";
+      content: '\5173';
      color: $Switch-valueColor;
      text-indent: ($Switch-width / 2);
      text-transform: uppercase;
@ -38,7 +38,7 @@
    }

    &:after {
-            content: "";
+      content: '';
      position: absolute;
      background-color: $white;
      width: $Switch-height - px2rem(2px);
@ -57,7 +57,7 @@

    &:disabled,
    &:disabled:checked {
-            &+i {
+      & + i {
        &:before {
          color: $Switch-onDisabled-color;
          background-color: $Switch-onDisabled-bgColor;
@ -71,7 +71,7 @@
    }

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

-                    content: "\5f00";
+          content: '\5f00';
          color: $white;
          text-indent: px2rem(-18px); // todo
          text-transform: uppercase;
--- a/scss/components/form/_text.scss
+++ b/scss/components/form/_text.scss
@ -142,6 +142,7 @@
  &--withAddOn > &-input {
    flex-basis: 1;
    flex-grow: 1;
+    width: 0;

    border-radius: 0;

--- a/scss/components/form/_textarea.scss
+++ b/scss/components/form/_textarea.scss
@ -3,7 +3,11 @@
  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));
+  padding: px2rem(6px)
+    (
+      $Form-input-height - $Form-input-lineHeight * $Form-input-fontSize -
+        px2rem(2px)
+    );
  font-size: $Form-input-fontSize;
  outline: none;
  resize: none;
--- a/scss/components/form/_tree.scss
+++ b/scss/components/form/_tree.scss
@ -16,7 +16,6 @@
 }

 .#{$ns}Tree {
-
  &-list,
  &-sublist {
    list-style: none;
@ -32,16 +31,16 @@
    line-height: $Tree-itemHeight;
    position: relative;

-        >div {
+    > div {
      &:hover {
        text-decoration: none;

-                >.#{$ns}Tree-item-icons {
+        > .#{$ns}Tree-item-icons {
          visibility: visible;
        }
      }

-            >span>svg {
+      > span > svg {
        display: inline-block;
        cursor: pointer;
        position: relative;
@ -57,8 +56,8 @@
    line-height: $Tree-itemHeight;
  }

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

@ -70,19 +69,19 @@

  &-item-icons {
    visibility: hidden;
-        transition: visibility .1s ease;
+    transition: visibility 0.1s ease;
    display: inline-block;
    vertical-align: top;
    height: $Tree-itemHeight;
    line-height: $Tree-itemHeight;

-        >a {
+    > a {
      display: inline-block;
      vertical-align: middle;
      margin-left: $gap-xs;
      cursor: pointer;

-            >svg {
+      > svg {
        $svgSize: px2rem(16px);
        width: $svgSize;
        height: $svgSize;
@ -94,7 +93,7 @@
  &-itemInput {
    padding-left: $Tree-itemArrowWidth;

-        >a {
+    > a {
      display: inline-block;
      cursor: pointer;
      margin-left: $gap-sm;
@ -106,13 +105,16 @@
      }
    }

-        >input {
+    > 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;
+      padding: (
+          $Tree-inputHeight - $Form-input-lineHeight * $Form-input-fontSize -
+            px2rem(2px)
+        )/2 $Form-input-paddingX;
      font-size: $Form-input-fontSize;

      &::placeholder {
@ -146,7 +148,7 @@
      color: $text--muted-color;
    }

-        >svg {
+    > svg {
      $svgSize: px2rem(14px);
      width: $svgSize;
      height: $svgSize;
@ -227,47 +229,66 @@
    color: $text--muted-color;
  }

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

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

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

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

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

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

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

-    &-item &-item &-item &-item &-item &-item &-item &-item &-item>&-itemLabel {
+  &-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 {
+  &-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 {
+  &-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
@ -54,7 +54,8 @@
  }

  &-itemIcon {
-        margin: ($Layout-nav-height - $lineHeightBase * $Layout-asideLink-fontSize)/-2 px2rem(-10px);
+    margin: ($Layout-nav-height - $lineHeightBase * $Layout-asideLink-fontSize)/-2
+      px2rem(-10px);
    line-height: $Layout-nav-height;
    width: $Layout-nav-height;
    vertical-align: middle;
@ -107,7 +108,9 @@
      text-transform: none;
      display: block;
      font-size: $Layout-asideLink-fontSize;
-            padding: ($Layout-nav-height - $lineHeightBase * $Layout-asideLink-fontSize)/2 px2rem(15px);
+      padding: (
+          $Layout-nav-height - $lineHeightBase * $Layout-asideLink-fontSize
+        )/2 px2rem(15px);
      position: relative;
      transition: background-color 0.2s ease-in-out 0s;
      color: $Layout-asideLink-color;
@ -138,7 +141,9 @@

    &.is-lg {
      > a {
-                padding: ($Layout-nav-lgHeight - $lineHeightBase * $Layout-asideLink-fontSize)/2 px2rem(15px);
+        padding: (
+            $Layout-nav-lgHeight - $lineHeightBase * $Layout-asideLink-fontSize
+          )/2 px2rem(15px);
      }
    }

@ -172,7 +177,10 @@
      cursor: default;
      background: transparent;
      color: darken($Layout-aside-color, 10%);
-            padding: ($Layout-nav--folded-height - $lineHeightBase * $Layout-asideLink-fontSize)/2 px2rem(20px);
+      padding: (
+          $Layout-nav--folded-height - $lineHeightBase *
+            $Layout-asideLink-fontSize
+        )/2 px2rem(20px);

      &:hover {
        color: darken($Layout-aside-color, 10%);
--- a/scss/layout/_layout.scss
+++ b/scss/layout/_layout.scss
@ -15,7 +15,7 @@ body {
  position: relative;

  &:before {
-        content: "";
+    content: '';
    position: absolute;
    width: inherit;
    top: 0;
@ -53,7 +53,7 @@ body {
    background: $Layout-brand-bg;
    color: $Layout-brandBar-color;

-        >button {
+    > button {
      padding: px2rem(10px) px2rem(17px);
      font-size: px2rem(16px);
      line-height: $Layout-header-height - px2rem(20px);
@ -102,7 +102,7 @@ body {
    color: $Layout-aside-color;

    &:before {
-            content: "";
+      content: '';
      position: absolute;
      width: inherit;
      top: 0;
@ -123,7 +123,7 @@ body {
    // .app-aside-folded & {
    //     max-width: @app-aside-folded-width;
    // }
-        ~div {
+    ~ div {
      padding-bottom: px2rem(50px);
    }
  }
@ -190,15 +190,12 @@ body {
  }
 }

-
@include media-breakpoint-down(sm) {
  .#{$ns}Layout {
    // Layout 层没有出现滚动条件，导致移动端无法响应固定顶部/底部效果
    // overflow-x: hidden;
  }

-
-
  .#{$ns}Layout-content {
    transition: transform 0.2s ease;
  }
@ -225,7 +222,6 @@ body {
  }

  .#{$ns}Layout--offScreen {
-
    .#{$ns}Layout-content,
    .#{$ns}Layout-footer {
      background-color: $body-bg;
@ -245,7 +241,6 @@ body {
  }
 }

-
@include media-breakpoint-up(md) {
  .#{$ns}Layout {
    &--boxed {
@ -267,7 +262,6 @@ body {
    }

    &--withAside {
-
      .#{$ns}Layout-headerBar,
      .#{$ns}Layout-content,
      .#{$ns}Layout-footer {
@ -306,7 +300,6 @@ body {
      }

      &.#{$ns}Layout--withAside {
-
        .#{$ns}Layout-headerBar,
        .#{$ns}Layout-content,
        .#{$ns}Layout-footer {
@ -362,7 +355,7 @@ body {
          width: $scrollbar-width;
        }

-                &>* {
+        & > * {
          width: $Layout-aside-width;
        }
      }
@ -389,14 +382,13 @@ body {
        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 {
@ -404,7 +396,6 @@ body {
      }

      &.#{$ns}Layout--withAside {
-
        .#{$ns}Layout-headerBar,
        .#{$ns}Layout-content,
        .#{$ns}Layout-footer {
@ -420,7 +411,7 @@ body {
        .#{$ns}Layout-asideInner {
          width: $Layout-aside--sm-width + $scrollbar-width;

-                    &>* {
+          & > * {
            width: $Layout-aside--sm-width;
          }
        }
@ -428,7 +419,6 @@ body {
    }

    &--md:not(.#{$ns}Layout--folded) {
-
      .#{$ns}Layout-brand,
      .#{$ns}Layout-brandBar,
      .#{$ns}Layout-aside {
@ -436,7 +426,6 @@ body {
      }

      &.#{$ns}Layout--withAside {
-
        .#{$ns}Layout-headerBar,
        .#{$ns}Layout-content,
        .#{$ns}Layout-footer {
@ -452,7 +441,7 @@ body {
        .#{$ns}Layout-asideInner {
          width: $Layout-aside--md-width + $scrollbar-width;

-                    &>* {
+          & > * {
            width: $Layout-aside--md-width;
          }
        }
@ -460,7 +449,6 @@ body {
    }

    &--lg:not(.#{$ns}Layout--folded) {
-
      .#{$ns}Layout-brand,
      .#{$ns}Layout-brandBar,
      .#{$ns}Layout-aside {
@ -468,7 +456,6 @@ body {
      }

      &.#{$ns}Layout--withAside {
-
        .#{$ns}Layout-headerBar,
        .#{$ns}Layout-content,
        .#{$ns}Layout-footer {
@ -484,7 +471,7 @@ body {
        .#{$ns}Layout-asideInner {
          width: $Layout-aside--lg-width + $scrollbar-width;

-                    &>* {
+          & > * {
            width: $Layout-aside--lg-width;
          }
        }
@ -493,7 +480,6 @@ body {
  }
 }

-
@include media-breakpoint-up(lg) {
  .#{$ns}Layout {
    &--boxed {
--- 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;
  }