Merge branch 'feature/sass2scss' into 'master'

sass文件转scss

sass文件转scss

See merge request !1

src/styles/common.sass

-@charset "UTF-8"
-
-@import "components/variables"
-
-*
-  &.ik-container-background
-    background-color: $ikmd-color-t5
-
-  &.ik-background-white
-    background-color: white
-
-  &.ik-title-font
-    font-size: 14px
-    font-weight: bold
-
-  &.ik-title-color
-    color: #263546
-
-  &.ik-title
-    @extend .ik-title-font
-    @extend .ik-title-color
-
-  &.ik-content-font
-    font-size: 12px
-
-  &.ik-content-color
-    color: #858e99
-
-  &.ik-content
-    @extend .ik-content-font
-    @extend .ik-content-color
-
-  @each $direction in top, right, bottom, left
-    &.ik-border-#{$direction}
-      border-#{$direction}: 1px solid #ececec
-
-  @each $justify in left, center, right
-    &.ik-text-#{$justify}
-      text-align: #{$justify}
-
-  &.ik-border
-    border: 1px solid #ececec
-
-  &.ik-purchase-background, &.ik-purchase_order-background
-    background-color: #7ac3f9
-
-  &.ik-sale-background, &.ik-sale_order-background
-    background-color: #ed9091
-
-  &.ik-other-background, &.ik-storage_transfer-background
-    background-color: #afce83
-
-  &.ik-storageio-background
-    background-color: #acb0e5
-
-/* Hide number input spin */
-input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button
-  -webkit-appearance: none
-  margin: 0
-
-.last-group
-  margin-bottom: #{$ikmd-space-base}px
-
-#guide-container
-  position: fixed
-  z-index: 1010
-
-  width: 288px
-  height: 271px
-
-  background-color: white
-  border-radius: 5px
-
-  .close
-    position: absolute
-    top: -11px
-    right: -11px
-
-    width: 22px
-    height: 22px
-
-    background-image: url(image_path('mobile/help/guide/popover-close.png'))
-
-  .header
-    height: 67px
-
-    background-size: 100% 100%
-    background-image: url(image_path('mobile/help/guide/popover-header.png'))
-
-  .body
-    padding: 14px
-
-    > a
-      display: block
-      width: 260px
-      height: 81px
-
-      background-size: 100% 100%
-
-    .leader
-      margin-bottom: 14px
-
-      background-image: url(image_path('mobile/help/guide/popover-leader.png'))
-
-    .member
-      background-image: url(image_path('mobile/help/guide/popover-member.png'))
-
-
-.ik-modal
-  $borde-color: #ddd
-  $borde-width: 5px
-  position: fixed
-  top: 0
-  left: 0
-  bottom: 0
-  right: 0
-  background-color: rgba(0, 0, 0, .3)
-  display: flex
-  justify-content: center
-  align-items: center
-  z-index: 1010
-
-  .ik-modal-content
-    width: 80%
-    display: flex
-    flex-direction: column
-    border: 1px solid $borde-color
-    border-radius: $borde-width
-    background-color: #fff
-
-    > .ik-modal-header
-      img
-        display: block
-        max-width: 100%
-        border-top-left-radius: $borde-width
-        border-top-right-radius: $borde-width
-
-    > .ik-modal-body
-      flex: none
-      max-height: 50vh
-      padding: 1.5em 1em
-      font-size: 1.2em
-      line-height: 1.4
-
-    > .ik-modal-footer
-      height: 45px
-      line-height: 45px
-      border-top: 1px solid $borde-color
-      text-align: center
-      font-size: 1.4em
-      display: flex
-      justify-content: center
-      align-items: center
-      .ik-modal-action
-        display: flex
-        flex: 1
-        background: none
-        border: none
-        outline: none
-        text-decoration: none
-        display: inline-block
-        text-align: center
-        color: #333
-
-      .ik-modal-action:not(:last-child)
-        border-right: 1px solid $borde-color

src/styles/common.scss

+@import "components/variables";
+
+* {
+  &.ik-container-background {
+    background-color: $ikmd-color-t5;
+  }
+
+  &.ik-background-white {
+    background-color: white;
+  }
+
+  &.ik-title-font {
+    font-size: 14px;
+    font-weight: bold;
+  }
+
+  &.ik-title-color {
+    color: #263546;
+  }
+
+  &.ik-title {
+    @extend .ik-title-font;
+
+    @extend .ik-title-color;
+  }
+
+  &.ik-content-font {
+    font-size: 12px;
+  }
+
+  &.ik-content-color {
+    color: #858e99;
+  }
+
+  &.ik-content {
+    @extend .ik-content-font;
+
+    @extend .ik-content-color;
+  }
+
+  @each $direction in top, right, bottom, left {
+    &.ik-border-#{$direction} {
+      border-#{$direction}: 1px solid #ececec;
+    }
+  }
+
+  @each $justify in left, center, right {
+    &.ik-text-#{$justify} {
+      text-align: #{$justify};
+    }
+  }
+
+  &.ik-border {
+    border: 1px solid #ececec;
+  }
+
+  &.ik-purchase-background, &.ik-purchase_order-background {
+    background-color: #7ac3f9;
+  }
+
+  &.ik-sale-background, &.ik-sale_order-background {
+    background-color: #ed9091;
+  }
+
+  &.ik-other-background, &.ik-storage_transfer-background {
+    background-color: #afce83;
+  }
+
+  &.ik-storageio-background {
+    background-color: #acb0e5;
+  }
+}
+
+/* Hide number input spin */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.last-group {
+  margin-bottom: #{$ikmd-space-base}px;
+}
+
+#guide-container {
+  position: fixed;
+  z-index: 1010;
+  width: 288px;
+  height: 271px;
+  background-color: white;
+  border-radius: 5px;
+
+  .close {
+    position: absolute;
+    top: -11px;
+    right: -11px;
+    width: 22px;
+    height: 22px;
+    background-image: url(image_path("mobile/help/guide/popover-close.png"));
+  }
+
+  .header {
+    height: 67px;
+    background-size: 100% 100%;
+    background-image: url(image_path("mobile/help/guide/popover-header.png"));
+  }
+
+  .body {
+    padding: 14px;
+
+    > a {
+      display: block;
+      width: 260px;
+      height: 81px;
+      background-size: 100% 100%;
+    }
+
+    .leader {
+      margin-bottom: 14px;
+      background-image: url(image_path("mobile/help/guide/popover-leader.png"));
+    }
+
+    .member {
+      background-image: url(image_path("mobile/help/guide/popover-member.png"));
+    }
+  }
+}
+
+.ik-modal {
+  $borde-color: #ddd;
+  $borde-width: 5px;
+
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background-color: rgba(0, 0, 0, 0.3);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1010;
+
+  .ik-modal-content {
+    width: 80%;
+    display: flex;
+    flex-direction: column;
+    border: 1px solid $borde-color;
+    border-radius: $borde-width;
+    background-color: #fff;
+
+    > .ik-modal-header {
+      img {
+        display: block;
+        max-width: 100%;
+        border-top-left-radius: $borde-width;
+        border-top-right-radius: $borde-width;
+      }
+    }
+
+    > .ik-modal-body {
+      flex: none;
+      max-height: 50vh;
+      padding: 1.5em 1em;
+      font-size: 1.2em;
+      line-height: 1.4;
+    }
+
+    > .ik-modal-footer {
+      height: 45px;
+      line-height: 45px;
+      border-top: 1px solid $borde-color;
+      text-align: center;
+      font-size: 1.4em;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      .ik-modal-action {
+        display: flex;
+        flex: 1;
+        background: none;
+        border: none;
+        outline: none;
+        text-decoration: none;
+        display: inline-block;
+        text-align: center;
+        color: #333;
+      }
+
+      .ik-modal-action:not(:last-child) {
+        border-right: 1px solid $borde-color;
+      }
+    }
+  }
+}

src/styles/components/variables.scss

 /* Variable */
 /* Variable */
-$ikmd-theme-color: #459df5
+$ikmd-theme-color: #459df5;
 
 
-$ikmd-color-t1: #1db0f1
-$ikmd-color-t2: #232626
-$ikmd-color-t3: #858e99
-$ikmd-color-t4: #b1b1b1
-$ikmd-color-t5: #efeff4
-$ikmd-color-t6: #444a63
-$ikmd-color-t7: #f25f5f
+$ikmd-color-t1: #1db0f1;
+$ikmd-color-t2: #232626;
+$ikmd-color-t3: #858e99;
+$ikmd-color-t4: #b1b1b1;
+$ikmd-color-t5: #efeff4;
+$ikmd-color-t6: #444a63;
+$ikmd-color-t7: #f25f5f;
 
 
-$ikmd-color-o1: #dfdfe4
-$ikmd-color-o2: #f3f3f3
+$ikmd-color-o1: #dfdfe4;
+$ikmd-color-o2: #f3f3f3;
 
 
-$ikmd-font-size-t1: 18px
-$ikmd-font-size-t2: 16px
-$ikmd-font-size-t3: 14px
-$ikmd-font-size-t4: 13px
-$ikmd-font-size-t5: 12px
+$ikmd-font-size-t1: 18px;
+$ikmd-font-size-t2: 16px;
+$ikmd-font-size-t3: 14px;
+$ikmd-font-size-t4: 13px;
+$ikmd-font-size-t5: 12px;
 
 
-$ikmd-space-base: 16
+$ikmd-space-base: 16;
 
 
-$ikmd-wing-blank: #{$ikmd-space-base}px // 两翼留白
+$ikmd-wing-blank: #{$ikmd-space-base}px; // 两翼留白
 
 
-$ikmd-white-space-8: #{$ikmd-space-base / 2}px
-$ikmd-white-space: #{$ikmd-space-base}px // 上下留白
+$ikmd-white-space-8: #{$ikmd-space-base / 2}px;
+$ikmd-white-space: #{$ikmd-space-base}px; // 上下留白
 
 
-$ikmd-btn-height: 48px
+$ikmd-btn-height: 48px;
 
 
-$ikmd-date-picker-cover-zIndex: 1000
-$ikmd-date-picker-zIndex: 1001
+$ikmd-date-picker-cover-zIndex: 1000;
+$ikmd-date-picker-zIndex: 1001;

src/styles/customers.sass

-@charset "UTF-8"
-
-#mobile_customers_index
-  .customers
-    i.anticon-file
-      margin-top: 50px
-
-      font-size: 100px
-
-    .customer
-      overflow: hidden
-
-      .icon
-        div
-          width: 50px
-          height: 50px
-          margin: 0 auto
-          background: #7ac3f9
-          border-radius: 5px
-        svg
-          height: 50px
-          width: 50px
-          fill: white
-
-      .content
-        border-bottom: 1px solid #f0f0f0
-
-        .info
-          padding: 15px 0
-
-          .number
-            color: #2a2d30
-
-          .name
-            color: #1c2338
-
-          .payment
-            color: #949da4
-
-        .status
-          //padding: 20px 20px 20px 0
-
-          p
-            padding: 2px 10px
-
-            border-radius: 20px
-
-
-$text-grey-color: #818a94
-$border-grey-color: #efefef
-
-#mobile_customers_show, #mobile_contacts_index
-  .ant_main
-    padding: 20px 15px
-  .svg_demo
-    height: 50px
-    width: 50px
-    background: #7ac3f9
-    border-radius: 5px
-    svg
-      height: 50px
-      width: 50px
-      fill: white
-  .font_bold
-    font-size: 18px
-    font-bold: bold
-    color: #000
-  .color9
-    line-height: 25px
-    color: #999
-  .customers-show-heading
-    font-size: .8rem
-    background: #efeff3
-    padding: .6rem .8rem
-  .customers-show-list
-    margin: .5rem .6rem
-    .customers-show-item
-      font-size: .8rem
-      padding-top: .5rem
-      padding-bottom: .8rem
-      border-bottom: 1px solid #f9f9f9
-      strong
-        display: inline-block
-        vertical-align: middle
-        font-size: 1rem
-        margin-right: .5rem
-        .contact-tag
-          margin-left: 8px
-      .customers-show-phone
-        text-align: right
-        .anticon-phone
-          font-size: 1.4rem
-
-
-  .ant-modal
-    .ant-modal-content
-
-      .ant-modal-body
-        padding: 0
-
-      .content-line
-        border-bottom: 1px solid #E4E4E4
-
-      .ant-modal-footer
-        display: none

src/styles/customers.scss

+#mobile_customers_index {
+  .customers {
+    i.anticon-file {
+      margin-top: 50px;
+      font-size: 100px;
+    }
+
+    .customer {
+      overflow: hidden;
+
+      .icon {
+        div {
+          width: 50px;
+          height: 50px;
+          margin: 0 auto;
+          background: #7ac3f9;
+          border-radius: 5px;
+        }
+
+        svg {
+          height: 50px;
+          width: 50px;
+          fill: white;
+        }
+      }
+
+      .content {
+        border-bottom: 1px solid #f0f0f0;
+
+        .info {
+          padding: 15px 0;
+
+          .number {
+            color: #2a2d30;
+          }
+
+          .name {
+            color: #1c2338;
+          }
+
+          .payment {
+            color: #949da4;
+          }
+        }
+
+        .status {
+          //padding: 20px 20px 20px 0
+
+          p {
+            padding: 2px 10px;
+            border-radius: 20px;
+          }
+        }
+      }
+    }
+  }
+}
+
+$text-grey-color: #818a94;
+$border-grey-color: #efefef;
+
+#mobile_customers_show,
+#mobile_contacts_index {
+  .ant_main {
+    padding: 20px 15px;
+  }
+
+  .svg_demo {
+    height: 50px;
+    width: 50px;
+    background: #7ac3f9;
+    border-radius: 5px;
+
+    svg {
+      height: 50px;
+      width: 50px;
+      fill: white;
+    }
+  }
+
+  .font_bold {
+    font-size: 18px;
+    font-bold: bold;
+    color: #000;
+  }
+
+  .color9 {
+    line-height: 25px;
+    color: #999;
+  }
+
+  .customers-show-heading {
+    font-size: 0.8rem;
+    background: #efeff3;
+    padding: 0.6rem 0.8rem;
+  }
+
+  .customers-show-list {
+    margin: 0.5rem 0.6rem;
+
+    .customers-show-item {
+      font-size: 0.8rem;
+      padding-top: 0.5rem;
+      padding-bottom: 0.8rem;
+      border-bottom: 1px solid #f9f9f9;
+
+      strong {
+        display: inline-block;
+        vertical-align: middle;
+        font-size: 1rem;
+        margin-right: 0.5rem;
+
+        .contact-tag {
+          margin-left: 8px;
+        }
+      }
+
+      .customers-show-phone {
+        text-align: right;
+
+        .anticon-phone {
+          font-size: 1.4rem;
+        }
+      }
+    }
+  }
+
+  .ant-modal {
+    .ant-modal-content {
+      .ant-modal-body {
+        padding: 0;
+      }
+
+      .content-line {
+        border-bottom: 1px solid #E4E4E4;
+      }
+
+      .ant-modal-footer {
+        display: none;
+      }
+    }
+  }
+}

src/styles/dashboard.sass

-@charset "UTF-8"
-
-@import "components/variables"
-
-#mobile_dashboard_index, #mobile_home_index
-  .document-list
-    i.anticon-file
-      margin-top: 50px
-
-      font-size: 100px
-
-  .statistic-container
-    border-right: 1px solid $ikmd-color-t5
-    border-bottom: 1px solid $ikmd-color-t5
-
-    svg
-      display: block
-      width: 25px
-      height: 35px
-      margin: 0 auto
-
-      &.purchase-color
-        fill: #4098f3
-
-      &.sale-color
-        fill: #da2a34
-
-      &.inventory-color
-        fill: #dc3ab7
-
-      &.debt-color
-        fill: #6fa80b
-
-  .shortcut-wrapper
-    margin-top: #{$ikmd-space-base}px
-
-    background-color: $ikmd-color-t5
-
-    .shortcut-container
-      background-color: white
-
-      .shortcut-item
-        display: block
-        width: 100%
-        height: 0
-        padding: 20% 0 80%
-
-        border-right: 1px solid $ikmd-color-t5
-        border-bottom: 1px solid $ikmd-color-t5
-        background-color: white
-        text-align: center
-
-        svg
-          display: block
-          width: 34px
-          height: 34px
-          margin: 0 auto
-
-          fill: #4098f3
-
-        p
-          margin-top: 5px
-          color: $ikmd-color-t2
-          font-size: $ikmd-font-size-t3
-
-  .document-header
-    height: #{$ikmd-space-base + 40}px
-    padding-top: #{$ikmd-space-base}px
-
-    background-color: $ikmd-color-t5
-
-    .document-header-item
-      background-color: white
-      border-bottom: 1px solid $ikmd-color-t5
-      text-align: center
-      font-size: $ikmd-font-size-t3
-
-      &.active
-        color: $ikmd-theme-color
-        border-bottom: 1px solid $ikmd-theme-color
-
-  a.shortcut-link
-    display: block
-    width: 100%
-    height: 0
-    padding-bottom: 80%
-
-    svg
-      display: block
-      width: 34px
-      height: 34px
-      margin: 20% auto 0
-
-      fill: #419af8
-
-    p
-      color: #858e99
-
-  p.document-title
-    padding: 0 20px
-
-    line-height: 40px

src/styles/dashboard.scss

+@import "components/variables";
+
+#mobile_dashboard_index,
+#mobile_home_index {
+  .document-list {
+    i.anticon-file {
+      margin-top: 50px;
+      font-size: 100px;
+    }
+  }
+
+  .statistic-container {
+    border-right: 1px solid $ikmd-color-t5;
+    border-bottom: 1px solid $ikmd-color-t5;
+
+    svg {
+      display: block;
+      width: 25px;
+      height: 35px;
+      margin: 0 auto;
+
+      &.purchase-color {
+        fill: #4098f3;
+      }
+
+      &.sale-color {
+        fill: #da2a34;
+      }
+
+      &.inventory-color {
+        fill: #dc3ab7;
+      }
+
+      &.debt-color {
+        fill: #6fa80b;
+      }
+    }
+  }
+
+  .shortcut-wrapper {
+    margin-top: #{$ikmd-space-base}px;
+    background-color: $ikmd-color-t5;
+
+    .shortcut-container {
+      background-color: white;
+
+      .shortcut-item {
+        display: block;
+        width: 100%;
+        height: 0;
+        padding: 20% 0 80%;
+        border-right: 1px solid $ikmd-color-t5;
+        border-bottom: 1px solid $ikmd-color-t5;
+        background-color: white;
+        text-align: center;
+
+        svg {
+          display: block;
+          width: 34px;
+          height: 34px;
+          margin: 0 auto;
+          fill: #4098f3;
+        }
+
+        p {
+          margin-top: 5px;
+          color: $ikmd-color-t2;
+          font-size: $ikmd-font-size-t3;
+        }
+      }
+    }
+  }
+
+  .document-header {
+    height: #{$ikmd-space-base + 40}px;
+    padding-top: #{$ikmd-space-base}px;
+    background-color: $ikmd-color-t5;
+
+    .document-header-item {
+      background-color: white;
+      border-bottom: 1px solid $ikmd-color-t5;
+      text-align: center;
+      font-size: $ikmd-font-size-t3;
+
+      &.active {
+        color: $ikmd-theme-color;
+        border-bottom: 1px solid $ikmd-theme-color;
+      }
+    }
+  }
+
+  a.shortcut-link {
+    display: block;
+    width: 100%;
+    height: 0;
+    padding-bottom: 80%;
+
+    svg {
+      display: block;
+      width: 34px;
+      height: 34px;
+      margin: 20% auto 0;
+      fill: #419af8;
+    }
+
+    p {
+      color: #858e99;
+    }
+  }
+
+  p.document-title {
+    padding: 0 20px;
+    line-height: 40px;
+  }
+}

src/styles/documents.sass

-@charset "UTF-8"
-
-@import "common"
-@import "components/variables"
-
-.common-document
-  overflow: hidden
-
-  .icon
-    width: 50px
-    height: 50px
-    margin: 0 auto
-    padding-top: 7px
-
-    color: #fff
-    border-radius: 5px
-    text-align: center
-    font-size: 12px
-    font-weight: bold
-
-  .content, .content-top
-    .status p
-      display: inline-block
-      width: 66px
-      padding: 2px 0
-
-      border-radius: 20px
-      color: #fff
-
-      &.approving, &.second_approving, &.third_approving
-        background-color: $ikmd-color-t1
-
-      &.rejected, &.deprecated
-        background-color: $ikmd-color-t7
-
-      &.draft
-        background-color: $ikmd-color-t4
-
-      &.submitted, &.passed
-        background-color: $ikmd-color-t3
-
-  .content
-    @extend .ik-border-bottom
-
-    .info
-      padding: 15px 0
-
-  .content-top
-    .info
-      padding-top: 15px
-
-  .content-bottom
-    @extend .ik-border-bottom
-    padding-bottom: 15px
-
-#mobile_documents_index,
-#mobile_dashboard_index,
-#mobile_purchases_index,
-#mobile_sales_index,
-#mobile_storageios_index,
-#mobile_storage_transfers_index
-  .document
-    @extend .common-document
-
-#mobile_purchase_orders_index,
-#mobile_sale_orders_index
-  .order
-    @extend .common-document
-
-#mobile_documents_index,
-#mobile_purchases_index,
-#mobile_sales_index
-  .documents
-    i.anticon-file
-      margin-top: 50px
-
-      font-size: 100px
-
-  .cancel-search
-    font-size: 12px
-    line-height: 32px
-    text-align: center
-    color: $ikmd-color-t1
-
-  .search-btn
-    float: right
-
-  .ant-form-item
-    margin-bottom: 0
-
-#mobile_documents_show,
-#mobile_purchases_show,
-#mobile_sales_show
-  .container-fluid
-    background-color: #ebebf0
-
-  .container
-    background-color: #ebebf0
-
-    .buttons
-      button
-        width: 47.5%
-
-        &.right
-          margin-left: 5%
-
-    .title-wrapper, .info-wrapper, .table-wrapper
-      background-color: #fff
-
-    .title-wrapper
-      .icon
-        width: 50px
-        height: 50px
-        margin: 0 auto
-        padding-top: 7px
-
-        color: #fff
-        border-radius: 5px
-        text-align: center
-        font-size: 12px
-        font-weight: bold
-
-      .status
-        p
-          display: inline-block
-          padding: 2px 8px
-
-          border-radius: 20px
-          background-color: #469cfc
-          color: #fff
-
-    .info-wrapper
-      .top
-        @extend .ik-border-bottom
-
-        .item
-          float: left
-          width: 33%
-          padding: 15px
-
-          @extend .ik-border-right
-
-          &:last-child
-            border: none
-
-    .table-wrapper
-      overflow-x: auto

src/styles/documents.scss

+@import "common";
+@import "components/variables";
+
+.common-document {
+  overflow: hidden;
+
+  .icon {
+    width: 50px;
+    height: 50px;
+    margin: 0 auto;
+    padding-top: 7px;
+    color: #fff;
+    border-radius: 5px;
+    text-align: center;
+    font-size: 12px;
+    font-weight: bold;
+  }
+
+  .content, .content-top {
+    .status p {
+      display: inline-block;
+      width: 66px;
+      padding: 2px 0;
+      border-radius: 20px;
+      color: #fff;
+
+      &.approving, &.second_approving, &.third_approving {
+        background-color: $ikmd-color-t1;
+      }
+
+      &.rejected, &.deprecated {
+        background-color: $ikmd-color-t7;
+      }
+
+      &.draft {
+        background-color: $ikmd-color-t4;
+      }
+
+      &.submitted, &.passed {
+        background-color: $ikmd-color-t3;
+      }
+    }
+  }
+
+  .content {
+    @extend .ik-border-bottom;
+
+    .info {
+      padding: 15px 0;
+    }
+  }
+
+  .content-top {
+    .info {
+      padding-top: 15px;
+    }
+  }
+
+  .content-bottom {
+    @extend .ik-border-bottom;
+
+    padding-bottom: 15px;
+  }
+}
+
+#mobile_documents_index,
+#mobile_dashboard_index,
+#mobile_purchases_index,
+#mobile_sales_index,
+#mobile_storageios_index,
+#mobile_storage_transfers_index {
+  .document {
+    @extend .common-document;
+  }
+}
+
+#mobile_purchase_orders_index,
+#mobile_sale_orders_index {
+  .order {
+    @extend .common-document;
+  }
+}
+
+#mobile_documents_index,
+#mobile_purchases_index,
+#mobile_sales_index {
+  .documents {
+    i.anticon-file {
+      margin-top: 50px;
+      font-size: 100px;
+    }
+  }
+
+  .cancel-search {
+    font-size: 12px;
+    line-height: 32px;
+    text-align: center;
+    color: $ikmd-color-t1;
+  }
+
+  .search-btn {
+    float: right;
+  }
+
+  .ant-form-item {
+    margin-bottom: 0;
+  }
+}
+
+#mobile_documents_show,
+#mobile_purchases_show,
+#mobile_sales_show {
+  .container-fluid {
+    background-color: #ebebf0;
+  }
+
+  .container {
+    background-color: #ebebf0;
+
+    .buttons {
+      button {
+        width: 47.5%;
+
+        &.right {
+          margin-left: 5%;
+        }
+      }
+    }
+
+    .title-wrapper, .info-wrapper, .table-wrapper {
+      background-color: #fff;
+    }
+
+    .title-wrapper {
+      .icon {
+        width: 50px;
+        height: 50px;
+        margin: 0 auto;
+        padding-top: 7px;
+        color: #fff;
+        border-radius: 5px;
+        text-align: center;
+        font-size: 12px;
+        font-weight: bold;
+      }
+
+      .status {
+        p {
+          display: inline-block;
+          padding: 2px 8px;
+          border-radius: 20px;
+          background-color: #469cfc;
+          color: #fff;
+        }
+      }
+    }
+
+    .info-wrapper {
+      .top {
+        @extend .ik-border-bottom;
+
+        .item {
+          float: left;
+          width: 33%;
+          padding: 15px;
+
+          @extend .ik-border-right;
+
+          &:last-child {
+            border: none;
+          }
+        }
+      }
+    }
+
+    .table-wrapper {
+      overflow-x: auto;
+    }
+  }
+}

src/styles/help.sass

-@charset "UTF-8"
-
-#mobile_help_pc, #mobile_help_system, #mobile_help_data, #mobile_help_index, #mobile_help_nav, #mobile_help_training, #mobile_home_merchants, #mobile_help_upgrades_show, #mobile_help_feedback, #mobile_help_upgrades_index
-  font-family: 'Helvetica Neue','Hiragino Sans GB','WenQuanYi Micro Hei','Microsoft Yahei',sans-serif
-  font-size: 14px
-  line-height: 1.42857143
-  -webkit-font-smoothing: antialiased
-  -moz-font-feature-settings: "liga","kern"
-  line-height: 1.42857143
-  h2
-    font-weight: 300
-    font-size: 16px
-    color: #848d99
-  h1, h3
-    font-weight: 300
-    font-size: 18px
-    text-align: center
-  p
-    color: #9aa2ab
-    font-size: 14px
-    text-indent: 2em
-
-  .help-center
-    display: block
-    max-width: 100%
-    height: 50px
-    margin-left: 5px
-
-#mobile_help_index,
-#mobile_help_data,
-#mobile_help_about,
-#mobile_help_nav,
-#mobile_customer_types_index,
-#mobile_members_index,
-#mobile_supplier_types_index,
-#mobile_help_upgrades_index,
-#mobile_help_push_setting,
-#mobile_units_index
-  background-color: #efeff4
-
-  .help-item
-    display: block
-    overflow: hidden
-
-    .vip-button
-      position: absolute
-      right: 5px
-      bottom: 40px
-      border: 1px solid
-      color: white
-      background-color: #459df5
-      border-radius: 5px
-      min-width: 70px
-      font-size: 13px
-    a
-      &.title
-        color: #666
-
-    .nav-item
-      display: inline-block
-      float: right
-
-    span
-      display: block
-
-      &.title
-        float: left
-
-      &.subtitle
-        float: right
-
-        color: #cacaca
-
-    padding: 20px 15px
-    background-color: #fff
-    position: relative
-
-    i
-      color: #cacaca
-
-    &::after
-      content: ''
-      height: 1px
-      width: 100%
-      left: 15px
-      bottom: 0
-      position: absolute
-      background-color: #eee
-
-    h2.org-title
-      position: absolute
-      top: 20px
-      left: 80px
-      font-weight: bold
-    p.org-expired
-      position: absolute
-      top: 50px
-      left: 57px
-
-  .help-list
-    .help-item
-      &:last-child::after
-        display: none
-
-  .help-item-blank
-    height: 15px
-    background: transparent
-    border-top: 1px solid #eee
-    border-bottom: 1px solid #eee
-
-  .help-item-narrow
-    padding: 10px 15px
-    overflow: hidden
-
-    background: transparent
-
-    span, a
-      display: block
-
-      color: #666
-
-      &.title
-        float: left
-
-      &.subtitle
-        float: right
-
-  .help-info
-    background-color: #fff
-
-#mobile_help_about,
-#mobile_help_training,
-#mobile_home_merchants
-  .training-code
-    img
-      display: block
-      height: 250px
-      margin: 0 auto
-
-  .help-item
-    a.title
-      color: #666
-
-    .color666
-      color: #666
-      &:hover
-        color: #666
-  .img-responsive
-    display: block
-    max-width: 100%
-    height: auto
-  .help-head-text
-    p:nth-child(1)
-      font-size: 1.2rem
-    p:nth-child(2)
-      font-size: 1rem
-
-#mobile_help_data
-  background-color: white
-
-#mobile_help_feedback, #mobile_help_open_vip
-  .title
-    height: 30px
-
-    background-color: #efeff4
-
-    p
-      font-size: 14px
-
-      line-height: 30px
-
-  .feedback
-    height: 200px
-    padding: 15px 0
-
-    border-bottom: 1px solid #efeff4
-
-    div
-      height: 100%
-
-    textarea
-      width: 100%
-      height: 100%
-
-      border: none
-
-  .info
-    height: 40px
-
-    border-bottom: 1px solid #efeff4
-
-    input
-      width: 100%
-
-      text-align: right
-      border: none
-
-  .notice
-    margin-top: 15px
-
-    color: #323232
-    text-align: center
-
-  .submit
-    padding: 15px 0
-
-    button
-      width: 100%
-      height: 40px
-
-      color: white
-      background-color: #459df5
-      border-radius: 3px
-      border: none
-
-  .consult
-    margin-top: 25px
-
-    text-align: center
-
-#mobile_help_guide_leader, #mobile_help_guide_member
-  background-color: #dfdfe4
-
-  .title
-    width: 100%
-
-    img
-      display: block
-      width: 100%
-
-  .info
-    padding: 16px
-
-    font-size: 14px
-    color: #858e99
-    background-color: white
-
-  .body
-    padding: 16px 16px 60px
-    background-color: white
-    
-    > div
-      width: 100%
-      margin-bottom: 16px
-
-    img
-      display: block
-      width: 100%
-
-
-#mobile_help_upgrades_show,
-#mobile_help_guide_leader,
-#mobile_help_guide_member
-  .begin-use
-    position: fixed
-    bottom: 0
-    left: 0
-    height: 56px
-    border-top: 1px solid #e7e7e7
-    background-color: #fff
-    width: 100%
-    text-align: center
-    >a
-      border-radius: 5px
-      border-width: 0
-      background-color: #38adff
-      color: #fff
-      display: inline-block
-      padding: 0 12px
-      min-width: 52px
-      height: 45px
-      line-height: 45px
-      text-align: center
-      font-size: 16px
-      display: block
-      margin: 5px 1%
-      width: 98%
-
-#mobile_help_pc,
-#mobile_help_system,
-#mobile_help_data,
-#mobile_help_index,
-#mobile_help_about,
-#mobile_help_feedback,
-#mobile_help_open_vip,
-#mobile_help_guide_leader,
-#mobile_help_guide_member
-  .row
-    overflow-x: hidden
-
-#mobile_help_upgrades_show
-  h3.title
-    padding: 15px 0
-
-    text-align: center
-
-  .body
-    padding: 0 10px 60px
-
-    pre
-      white-space: pre-wrap
-      text-indent: 2em
-
-    .time
-      margin-top: 30px
-
-      color: #cacaca
-      text-align: right
-
-#mobile_help_training,
-#mobile_help_open_vip,
-#mobile_home_merchants
-  .training-content
-    padding-left: 1rem
-    padding-right: 1rem
-    p
-      font-size: .9rem
-      color: #222
-      text-indent: 0
-  .training-footer
-    .training-form
-      .training-form-group
-        padding: 5px 15px
-        display: table
-        width: 100%
-        border-top: 1px solid #ddd
-        border-bottom: 1px solid #ddd
-        > span
-          display: table-cell
-      .training-label
-        vertical-align: middle
-        width: 200px
-        color: #858e99
-        font-size: 1rem
-  .training-input
-    text-align: right
-    display: table-cell
-    padding-top: 2px
-    padding-left: 0
-    height: 34px
-    color: #222
-    vertical-align: middle
-    line-height: 16px
-    border: 0
-    font-size: 1rem
-    width: 100%
-  .training-btn, .training-link
-    border-radius: 5px
-    border-width: 0
-    background-color: #38adff
-    color: #fff
-    display: inline-block
-    margin: 0
-    padding: 0 12px
-    min-width: 52px
-    min-height: 47px
-    text-align: center
-    font-size: 16px
-    line-height: 42px
-    display: block
-    width: 100%
-  .training-btn-w50
-    width: 60%
-    font-size: 14px
-    height: 36px
-    line-height: 36px
-    min-height: 36px
-  .training-input-2
-    border: 1px solid #ddd
-    border-radius: 5px
-    padding: 0 5px
-    height: 36px
-    text-align: left
-    font-size: 16px
-    line-height: 36px
-    display: block
-    width: 100%
-  .training-btn-2
-    height: 38px
-    line-height: 38px
-    min-height: 38px
-
-.ik-vip-table
-  border-collapse: collapse
-  border-spacing: 0
-  width: 96%
-  margin: 2%
-
-  th,
-  td
-    vertical-align: middle
-    padding: .3rem
-    font-size: .8rem
-
-  td
-    color: #666
-    border: 1px solid #efeff4
-    span
-      font-weight: 700
-
-  th
-    background-color: #38adff
-    border: 1px solid #38adff
-    color: #fff
-
-#mobile_help_open_vip
-  #vip-container
-    position: fixed
-    z-index: 1010
-
-    width: 288px
-    height: 271px
-
-    background-color: white
-    border-radius: 5px
-
-    .vip-body
-      position: relative
-      height: 100%
-      padding: 14px
-
-      .vip-content
-        position: absolute
-        bottom: 10px
-
-        width: calc(100% - 28px)
-
-#mobile_help_feedback
-  p
-    color: #666
-    text-indent: 0
-
-#mobile_help_upgrades_show
-  p
-    color: #666
-    img
-      display: block
-      margin: 10px auto

src/styles/help.scss

+#mobile_help_pc,
+#mobile_help_system,
+#mobile_help_data,
+#mobile_help_index,
+#mobile_help_nav,
+#mobile_help_training,
+#mobile_home_merchants,
+#mobile_help_upgrades_show,
+#mobile_help_feedback,
+#mobile_help_upgrades_index {
+  font-family: "Helvetica Neue", "Hiragino Sans GB", "WenQuanYi Micro Hei", "Microsoft Yahei", sans-serif;
+  font-size: 14px;
+  line-height: 1.42857;
+  -webkit-font-smoothing: antialiased;
+  -moz-font-feature-settings: "liga", "kern";
+  line-height: 1.42857;
+
+  h2 {
+    font-weight: 300;
+    font-size: 16px;
+    color: #848d99;
+  }
+
+  h1, h3 {
+    font-weight: 300;
+    font-size: 18px;
+    text-align: center;
+  }
+
+  p {
+    color: #9aa2ab;
+    font-size: 14px;
+    text-indent: 2em;
+  }
+
+  .help-center {
+    display: block;
+    max-width: 100%;
+    height: 50px;
+    margin-left: 5px;
+  }
+}
+
+#mobile_help_index,
+#mobile_help_data,
+#mobile_help_about,
+#mobile_help_nav,
+#mobile_customer_types_index,
+#mobile_members_index,
+#mobile_supplier_types_index,
+#mobile_help_upgrades_index,
+#mobile_help_push_setting,
+#mobile_units_index {
+  background-color: #efeff4;
+
+  .help-item {
+    display: block;
+    overflow: hidden;
+
+    .vip-button {
+      position: absolute;
+      right: 5px;
+      bottom: 40px;
+      border: 1px solid;
+      color: white;
+      background-color: #459df5;
+      border-radius: 5px;
+      min-width: 70px;
+      font-size: 13px;
+    }
+
+    a {
+      &.title {
+        color: #666;
+      }
+    }
+
+    .nav-item {
+      display: inline-block;
+      float: right;
+    }
+
+    span {
+      display: block;
+
+      &.title {
+        float: left;
+      }
+
+      &.subtitle {
+        float: right;
+        color: #cacaca;
+      }
+    }
+
+    padding: 20px 15px;
+    background-color: #fff;
+    position: relative;
+
+    i {
+      color: #cacaca;
+    }
+
+    &::after {
+      content: "";
+      height: 1px;
+      width: 100%;
+      left: 15px;
+      bottom: 0;
+      position: absolute;
+      background-color: #eee;
+    }
+
+    h2.org-title {
+      position: absolute;
+      top: 20px;
+      left: 80px;
+      font-weight: bold;
+    }
+
+    p.org-expired {
+      position: absolute;
+      top: 50px;
+      left: 57px;
+    }
+  }
+
+  .help-list {
+    .help-item {
+      &:last-child::after {
+        display: none;
+      }
+    }
+  }
+
+  .help-item-blank {
+    height: 15px;
+    background: transparent;
+    border-top: 1px solid #eee;
+    border-bottom: 1px solid #eee;
+  }
+
+  .help-item-narrow {
+    padding: 10px 15px;
+    overflow: hidden;
+    background: transparent;
+
+    span, a {
+      display: block;
+      color: #666;
+
+      &.title {
+        float: left;
+      }
+
+      &.subtitle {
+        float: right;
+      }
+    }
+  }
+
+  .help-info {
+    background-color: #fff;
+  }
+}
+
+#mobile_help_about,
+#mobile_help_training,
+#mobile_home_merchants {
+  .training-code {
+    img {
+      display: block;
+      height: 250px;
+      margin: 0 auto;
+    }
+  }
+
+  .help-item {
+    a.title {
+      color: #666;
+    }
+
+    .color666 {
+      color: #666;
+
+      &:hover {
+        color: #666;
+      }
+    }
+  }
+
+  .img-responsive {
+    display: block;
+    max-width: 100%;
+    height: auto;
+  }
+
+  .help-head-text {
+    p:nth-child(1) {
+      font-size: 1.2rem;
+    }
+
+    p:nth-child(2) {
+      font-size: 1rem;
+    }
+  }
+}
+
+#mobile_help_data {
+  background-color: white;
+}
+
+#mobile_help_feedback,
+#mobile_help_open_vip {
+  .title {
+    height: 30px;
+    background-color: #efeff4;
+
+    p {
+      font-size: 14px;
+      line-height: 30px;
+    }
+  }
+
+  .feedback {
+    height: 200px;
+    padding: 15px 0;
+    border-bottom: 1px solid #efeff4;
+
+    div {
+      height: 100%;
+    }
+
+    textarea {
+      width: 100%;
+      height: 100%;
+      border: none;
+    }
+  }
+
+  .info {
+    height: 40px;
+    border-bottom: 1px solid #efeff4;
+
+    input {
+      width: 100%;
+      text-align: right;
+      border: none;
+    }
+  }
+
+  .notice {
+    margin-top: 15px;
+    color: #323232;
+    text-align: center;
+  }
+
+  .submit {
+    padding: 15px 0;
+
+    button {
+      width: 100%;
+      height: 40px;
+      color: white;
+      background-color: #459df5;
+      border-radius: 3px;
+      border: none;
+    }
+  }
+
+  .consult {
+    margin-top: 25px;
+    text-align: center;
+  }
+}
+
+#mobile_help_guide_leader,
+#mobile_help_guide_member {
+  background-color: #dfdfe4;
+
+  .title {
+    width: 100%;
+
+    img {
+      display: block;
+      width: 100%;
+    }
+  }
+
+  .info {
+    padding: 16px;
+    font-size: 14px;
+    color: #858e99;
+    background-color: white;
+  }
+
+  .body {
+    padding: 16px 16px 60px;
+    background-color: white;
+
+    > div {
+      width: 100%;
+      margin-bottom: 16px;
+    }
+
+    img {
+      display: block;
+      width: 100%;
+    }
+  }
+}
+
+#mobile_help_upgrades_show,
+#mobile_help_guide_leader,
+#mobile_help_guide_member {
+  .begin-use {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    height: 56px;
+    border-top: 1px solid #e7e7e7;
+    background-color: #fff;
+    width: 100%;
+    text-align: center;
+
+    > a {
+      border-radius: 5px;
+      border-width: 0;
+      background-color: #38adff;
+      color: #fff;
+      display: inline-block;
+      padding: 0 12px;
+      min-width: 52px;
+      height: 45px;
+      line-height: 45px;
+      text-align: center;
+      font-size: 16px;
+      display: block;
+      margin: 5px 1%;
+      width: 98%;
+    }
+  }
+}
+
+#mobile_help_pc,
+#mobile_help_system,
+#mobile_help_data,
+#mobile_help_index,
+#mobile_help_about,
+#mobile_help_feedback,
+#mobile_help_open_vip,
+#mobile_help_guide_leader,
+#mobile_help_guide_member {
+  .row {
+    overflow-x: hidden;
+  }
+}
+
+#mobile_help_upgrades_show {
+  h3.title {
+    padding: 15px 0;
+    text-align: center;
+  }
+
+  .body {
+    padding: 0 10px 60px;
+
+    pre {
+      white-space: pre-wrap;
+      text-indent: 2em;
+    }
+
+    .time {
+      margin-top: 30px;
+      color: #cacaca;
+      text-align: right;
+    }
+  }
+}
+
+#mobile_help_training,
+#mobile_help_open_vip,
+#mobile_home_merchants {
+  .training-content {
+    padding-left: 1rem;
+    padding-right: 1rem;
+
+    p {
+      font-size: 0.9rem;
+      color: #222;
+      text-indent: 0;
+    }
+  }
+
+  .training-footer {
+    .training-form {
+      .training-form-group {
+        padding: 5px 15px;
+        display: table;
+        width: 100%;
+        border-top: 1px solid #ddd;
+        border-bottom: 1px solid #ddd;
+
+        > span {
+          display: table-cell;
+        }
+      }
+
+      .training-label {
+        vertical-align: middle;
+        width: 200px;
+        color: #858e99;
+        font-size: 1rem;
+      }
+    }
+  }
+
+  .training-input {
+    text-align: right;
+    display: table-cell;
+    padding-top: 2px;
+    padding-left: 0;
+    height: 34px;
+    color: #222;
+    vertical-align: middle;
+    line-height: 16px;
+    border: 0;
+    font-size: 1rem;
+    width: 100%;
+  }
+
+  .training-btn, .training-link {
+    border-radius: 5px;
+    border-width: 0;
+    background-color: #38adff;
+    color: #fff;
+    display: inline-block;
+    margin: 0;
+    padding: 0 12px;
+    min-width: 52px;
+    min-height: 47px;
+    text-align: center;
+    font-size: 16px;
+    line-height: 42px;
+    display: block;
+    width: 100%;
+  }
+
+  .training-btn-w50 {
+    width: 60%;
+    font-size: 14px;
+    height: 36px;
+    line-height: 36px;
+    min-height: 36px;
+  }
+
+  .training-input-2 {
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    padding: 0 5px;
+    height: 36px;
+    text-align: left;
+    font-size: 16px;
+    line-height: 36px;
+    display: block;
+    width: 100%;
+  }
+
+  .training-btn-2 {
+    height: 38px;
+    line-height: 38px;
+    min-height: 38px;
+  }
+}
+
+.ik-vip-table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  width: 96%;
+  margin: 2%;
+
+  th,
+  td {
+    vertical-align: middle;
+    padding: 0.3rem;
+    font-size: 0.8rem;
+  }
+
+  td {
+    color: #666;
+    border: 1px solid #efeff4;
+
+    span {
+      font-weight: 700;
+    }
+  }
+
+  th {
+    background-color: #38adff;
+    border: 1px solid #38adff;
+    color: #fff;
+  }
+}
+
+#mobile_help_open_vip {
+  #vip-container {
+    position: fixed;
+    z-index: 1010;
+    width: 288px;
+    height: 271px;
+    background-color: white;
+    border-radius: 5px;
+
+    .vip-body {
+      position: relative;
+      height: 100%;
+      padding: 14px;
+
+      .vip-content {
+        position: absolute;
+        bottom: 10px;
+        width: calc(100% - 28px);
+      }
+    }
+  }
+}
+
+#mobile_help_feedback {
+  p {
+    color: #666;
+    text-indent: 0;
+  }
+}
+
+#mobile_help_upgrades_show {
+  p {
+    color: #666;
+
+    img {
+      display: block;
+      margin: 10px auto;
+    }
+  }
+}

src/styles/ikmd.sass

-/* IK Mobile Design
-  ========================================================================== */
-
-@import "components/variables"
-
-/* Common Class */
-.ikmd-display-flex
-  display: -webkit-box
-  display: -webkit-flex
-  display: -moz-box
-  display: -moz-flex
-  display: -ms-flexbox
-  display: flex
-
-.ikmd-animation-settings
-  -webkit-animation-duration: .3s
-  -moz-animation-duration: .3s
-  animation-duration: .3s
-
-  -webkit-animation-delay: 0s
-  -moz-animation-delay: 0s
-  animation-delay: 0s
-
-@each $split in 1, 2, 3, 4
-  .ikmd-box-flex-#{$split}
-    -webkit-box-flex: #{$split}
-    -webkit-flex: #{$split}
-    -moz-box-flex: #{$split}
-    -moz-flex: #{$split}
-    -ms-flex: #{$split}
-    flex: #{$split}
-
-/* Input Group and Text Group */
-.ikmd-input-group-container, .ikmd-text-group-container
-  padding-top: $ikmd-white-space-8
-
-  background-color: $ikmd-color-t5
-
-  .ikmd-input-group-header, .ikmd-text-group-header
-    padding: 0 $ikmd-wing-blank $ikmd-white-space-8
-    font-size: $ikmd-font-size-t3
-
-  .ikmd-input-group-header + .ikmd-input-group, .ikmd-text-group-header + .ikmd-text-group
-    margin-top: 0 !important
-
-  .ikmd-input-group, .ikmd-text-group
-    margin-top: $ikmd-white-space-8
-    padding: 0 0 0 $ikmd-wing-blank
-
-    background-color: white
-    border: 1px solid $ikmd-color-t5
-    border-left: none
-    border-right: none
-
-    .ikmd-input, .ikmd-select, .ikmd-text
-      background-color: white
-
-      &:last-child::after
-        display: none
-
-    .ikmd-btn
-      width: 100%
-      height: $ikmd-btn-height
-      margin: 0 auto
-
-      &.ikmd-btn-primary
-        width: 100%
-        margin: 0
-
-        text-align: center
-
-/* Input and Text */
-.ikmd-input, .ikmd-text
-  position: relative
-
-  padding: 22px 0 8px
-
-  &::after
-    content: ''
-    height: 1px
-    width: 100%
-    left: 0
-    bottom: 0
-    position: absolute
-    background-color: $ikmd-color-t5
-
-  &.ikmd-input-text
-    min-height: 60px
-
-    span
-      display: block
-      margin-top: 5px /* 边距修正 */
-
-      color: $ikmd-color-t3 !important
-      font-size: $ikmd-font-size-t2
-
-  svg
-    fill: $ikmd-theme-color
-
-  label
-    position: absolute
-    top: 18px
-    left: 0
-
-    color: $ikmd-theme-color
-    font-size: $ikmd-font-size-t2
-
-    &.shrunken
-      -webkit-transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms
-      transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms
-      -webkit-transform: scale(0.75) translate(-18%, -50%)
-      transform: scale(0.75) translate(-18%, -50%)
-
-  input,
-  textarea,
-  span
-    display: block
-    width: 100%
-    margin-top: 5px // 边距修正
-
-    font-size: $ikmd-font-size-t2
-    border: none
-    color: $ikmd-color-t2
-
-  textarea
-    min-height: 120px
-    height: auto
-
-  p
-    position: absolute
-    top: 20px
-    right: 17px
-
-    color: $ikmd-color-t4
-    font-size: $ikmd-font-size-t3
-
-    max-width: 50%
-
-    text-align: right
-    word-break: break-all
-    word-wrap: break-word
-    background: white
-
-    pointer-events: none
-
-    &.ikmd-input-errors
-      color: $ikmd-color-t7
-
-  svg
-    position: absolute
-    top: 15px
-    right: 15px
-
-    width: 30px
-    height: 30px
-
-.ikmd-text span
-  min-height: 24px
-
-/* Select */
-.ikmd-select
-  position: relative
-
-  padding: 22px 0 8px
-
-  &::after
-    content: ''
-    height: 1px
-    width: 100%
-    left: 0
-    bottom: 0
-    position: absolute
-    background-color: #eee
-
-  .ikmd-select-title
-    position: absolute
-    top: 18px
-    left: 0
-
-    color: #459df5
-    font-size: $ikmd-font-size-t2
-
-    &.shrunken
-      -webkit-transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms
-      transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms
-      -webkit-transform: scale(0.75) translate(-18%, -50%)
-      transform: scale(0.75) translate(-18%, -50%)
-
-  .ikmd-select-subtitle
-    display: block
-    width: 100%
-    height: 30px
-    padding: 5px 0
-
-    font-size: 16px
-    border: none
-    color: $ikmd-color-t2
-
-  .ikmd-select-tips
-    position: absolute
-    top: 20px
-    right: #{25 + $ikmd-space-base}px
-
-    color: $ikmd-color-t4
-    font-size: $ikmd-font-size-t3
-
-    max-width: 50%
-
-    text-align: right
-    word-break: break-all
-    word-wrap: break-word
-    background: white
-
-    &.ikmd-input-tips
-      color: #323232
-
-    &.ikmd-input-errors
-      color: $ikmd-color-t7
-
-  .ikmd-select-arrow
-    position: absolute
-    top: 20px
-    right: 17px
-
-    color: $ikmd-color-t4
-    font-size: $ikmd-font-size-t3
-
-/* Button Group */
-.ikmd-btn-group-wrapper
-  .ikmd-btn-group-container
-    width: 100%
-    padding-top: $ikmd-white-space-8
-
-    background-color: $ikmd-color-t5
-
-    .ikmd-btn-group-header
-      padding: 0 $ikmd-wing-blank $ikmd-white-space-8
-      font-size: $ikmd-font-size-t3
-
-      & + .ikmd-btn-group
-        margin-top: 0 !important
-
-    .ikmd-btn-group
-      margin-top: $ikmd-white-space-8
-
-    &.ikmd-btn-group-bottom
-      //position: absolute
-      //left: 0
-      position: fixed
-      bottom: 0
-      left: 0
-
-      height: 48px
-
-      .ikmd-btn-group
-        position: fixed
-        left: 0
-        bottom: 0
-
-      .ikmd-btn-group-bottom-placeholder
-        height: 48px
-
-    .ikmd-btn-group
-      @extend .ikmd-display-flex
-
-      width: 100%
-
-      > button
-        @extend .ikmd-box-flex-1
-
-        border-right: 1px solid $ikmd-color-t5
-
-        &:last-child
-          border-right: none
-
-        &.ikmd-btn-primary
-          border-color: white
-
-  .ikmd-btn-group-bottom-placeholder
-    height: 48px
-
-/* Button */
-.ikmd-btn
-  display: block
-  height: $ikmd-btn-height
-
-  font-size: $ikmd-font-size-t2
-  color: $ikmd-theme-color
-  background-color: white
-  text-align: center
-  border: none
-
-  &.ikmd-btn-primary
-    color: white
-    background-color: $ikmd-theme-color
-
-  .ikmd-btn-icon-wrapper
-    display: inline-block
-    vertical-align: middle
-
-    > *
-      display: inline
-      vertical-align: middle
-
-    svg
-      width: 20px
-      height: 20px
-
-      fill: $ikmd-theme-color
-
-    p
-      margin-left: 10px
-
-/* Date Picker */
-.ikmd-date-picker-cover
-  position: fixed
-  left: 0
-  top: 0
-  z-index: $ikmd-date-picker-cover-zIndex
-
-  width: 100%
-  height: 100%
-
-  background-color: #000
-  opacity: 0.3
-
-.ikmd-date-picker
-  @extend .ikmd-animation-settings
-
-  position: fixed
-  left: 0
-  bottom: 0
-  z-index: $ikmd-date-picker-zIndex
-
-  width: 100%
-  height: 300px
-
-  background-color: white
-
-  .ikmd-date-picker-header
-    @extend .ikmd-display-flex
-
-    height: 48px
-    padding: 0 $ikmd-wing-blank
-    overflow: hidden
-
-    border-bottom: 1px solid $ikmd-color-t5
-
-    > div
-      height: 100%
-
-      font-size: $ikmd-font-size-t2
-      line-height: 48px
-
-      &.ikmd-date-picker-header-left, &.ikmd-date-picker-header-right
-        @extend .ikmd-box-flex-1
-
-        color: $ikmd-theme-color
-
-      &.ikmd-date-picker-header-right
-        text-align: right
-
-      &.ikmd-date-picker-header-title
-        @extend .ikmd-box-flex-4
-
-        color: $ikmd-color-t2
-        text-align: center
-
-  .ikmd-date-picker-body
-    @extend .ikmd-display-flex
-
-    width: 100%
-    height: 252px
-
-    .ikmd-date-picker-item
-      position: relative
-
-      @extend .ikmd-box-flex-1
-
-      .ikmd-date-picker-item-mask
-        position: absolute
-        left: 0
-        top: 0
-        z-index: 1201
-
-        width: 100%
-        height: 100%
-
-        background-image: linear-gradient(180deg, hsla(0, 0%, 100%, .95), hsla(0, 0%, 100%, .6)), linear-gradient(0deg, hsla(0, 0%, 100%, .95), hsla(0, 0%, 100%, .6))
-        background-size: 100% 108px
-        background-position: top, bottom
-        background-repeat: no-repeat
-
-        pointer-events: none
-
-      .ikmd-date-picker-item-indicator
-        position: absolute
-        left: 0
-        top: 108px
-
-        width: 100%
-        height: 36px
-
-        border: 1px solid $ikmd-color-t5
-        border-left: none
-        border-right: none
-
-      .ikmd-date-picker-item-content
-        position: absolute
-        left: 0
-        top: 0
-        z-index: 1200
-
-        width: 100%
-        height: 100%
-        display: none
-
-        text-align: center
-
-        font-size: $ikmd-font-size-t2
-        color: $ikmd-color-t2
-
-        .ikmd-date-picker-item-content-item
-          width: 100%
-          height: 36px !important
-
-          line-height: 36px !important
-
-/* Filter Bar */
-.ikmd-filter-bar
-  .ikmd-filter-bar-filter-container
-    @extend .ikmd-animation-settings
-
-    //position: relative
-    position: fixed
-    top: 0
-    left: 0
-    z-index: 1007
-
-    width: 100%
-
-    background-color: white
-
-    //height: 100%
-
-    .ikmd-filter-bar-categories
-      position: absolute
-      top: 0
-      left: 0
-      z-index: 1008
-
-      height: 100%
-      overflow: hidden
-
-      background-color: white
-      border-bottom: 1px solid $ikmd-color-t5
-
-      > div
-        float: left
-
-      .ikmd-filter-bar-category
-        height: 100%
-
-        text-align: center
-
-        p
-          color: $ikmd-color-t3
-          border-right: 1px solid $ikmd-color-t5
-          font-size: $ikmd-font-size-t3
-
-          &.active
-            color: $ikmd-theme-color
-
-          i
-            font-size: 10px
-
-    .ikmd-filter-bar-search
-      position: absolute
-      top: 0
-      right: 0
-      z-index: 1008
-
-      padding-top: 15px
-
-      text-align: center
-      font-size: $ikmd-font-size-t3
-      border-bottom: 1px solid $ikmd-color-t5
-
-    .ikmd-filter-bar-category-cover, .ikmd-filter-bar-category-buttons, .ikmd-filter-bar-toolbar
-      position: fixed
-      left: 0
-      z-index: 1006
-
-      width: 100%
-
-    .ikmd-filter-bar-category-cover
-      background-color: black
-      opacity: 0.6
-
-    .ikmd-filter-bar-category-buttons
-      @extend .ikmd-animation-settings
-
-      z-index: 1007
-
-      display: none
-
-      background-color: white
-      border-bottom: 1px solid $ikmd-color-t5
-
-      .ikmd-filter-bar-category-buttons-left, .ikmd-filter-bar-category-buttons-right
-        float: left
-        height: 200px
-        overflow-y: auto
-
-      .ikmd-filter-bar-category-buttons-left
-        background-color: $ikmd-color-o2
-
-        a
-          display: block
-          width: 100%
-          height: 40px
-
-          color: $ikmd-color-t4
-          font-size: $ikmd-font-size-t3
-          text-align: center
-          line-height: 40px
-
-          &.active
-            background-color: white
-
-      .ikmd-filter-bar-category-buttons-right
-        background-color: white
-
-      .ikmd-filter-bar-category-button
-        @extend .ik-word-break
-
-        position: relative
-
-        height: 40px
-        padding-left: #{$ikmd-space-base}px
-
-        line-height: 40px
-
-        &.active
-          p, i
-            color: $ikmd-theme-color
-
-        p
-          color: $ikmd-color-t4
-          font-size: $ikmd-font-size-t3
-          border-bottom: 1px solid $ikmd-color-t5
-
-          overflow: hidden
-          white-space: nowrap
-          text-overflow: ellipsis
-
-        i
-          position: absolute
-          top: 15px
-          right: #{$ikmd-space-base}px
-
-          font-size: $ikmd-font-size-t3
-
-    .ikmd-filter-bar-toolbar
-      z-index: 1007
-
-      display: none
-      height: 40px
-
-      background-color: white
-
-      .ikmd-filter-bar-toolbar-button
-        display: block
-        float: left
-        height: 100%
-
-        text-align: center
-        font-size: $ikmd-font-size-t3
-        line-height: 40px
-        border-right: 1px solid $ikmd-color-t5
-
-        &:last-child
-          border-right: none
-
-  .ikmd-filter-bar-search-container
-    @extend .ikmd-animation-settings
-
-    position: absolute
-    top: 0
-    left: 0
-    z-index: 1009
-
-    display: none
-    padding-left: #{$ikmd-space-base}px
-    overflow: hidden
-
-    background-color: $ikmd-color-o1
-
-    form
-      position: relative
-
-      > *
-        display: block
-        float: left
-
-      input
-        padding: 0 30px
-
-        border-radius: 75px
-        border: none
-
-      i
-        position: absolute
-        top: 16px
-
-        font-size: 18px
-
-        &.ikmd-filter-bar-search-magnifier
-          left: 10px
-
-        &.ikmd-filter-bar-search-clear
-          right: 58px
-
-    .ikmd-filter-bar-search-cancel
-      color: $ikmd-theme-color
-      font-size: $ikmd-font-size-t3
-      text-align: center
-
-    .ikmd-filter-bar-search-result
-      position: absolute
-      left: 0
-      z-index: 1006
-
-      width: 100%
-      height: 100%
-
-      background-color: $ikmd-color-t5
-      pointer-events: none
-
-/* Loading */
-.ikmd-loading
-  width: 50px
-  height: 50px
-  margin: 20px auto
-
-  > div
-    display: inline-block
-    width: .5rem
-    height: 100%
-    margin-left: .2rem
-
-    background-color: $ikmd-theme-color
-
-    -webkit-animation: stretch-delay 1.2s infinite ease-in-out
-    animation: stretch-delay 1.2s infinite ease-in-out
-
-  .ikmd-loading-rect1
-    margin-left: 0
-
-  .ikmd-loading-rect2
-    -webkit-animation-delay: -1.1s
-    animation-delay: -1.1s
-
-  .ikmd-loading-rect3
-    -webkit-animation-delay: -1.0s
-    animation-delay: -1.0s
-
-  .ikmd-loading-rect4
-    -webkit-animation-delay: -0.9s
-    animation-delay: -0.9s
-
-  .ikmd-loading-rect5
-    -webkit-animation-delay: -0.8s
-    animation-delay: -0.8s
-
-  @-webkit-keyframes stretch-delay
-    0%, 40%, 100%
-      -webkit-transform: scaleY(0.4)
-    20%
-      -webkit-transform: scaleY(1.0)
-
-  @keyframes stretch-delay
-    0%, 40%, 100%
-      transform: scaleY(0.4)
-      -webkit-transform: scaleY(0.4)
-    20%
-      transform: scaleY(1.0)
-      -webkit-transform: scaleY(1.0)
-
-/* Scroll Up Load */
-.ikmd-scroll-up-loader-wrapper
-  width: 100%
-  padding: #{$ikmd-space-base}px
-
-  text-align: center
-
-  .ikmd-scroll-up-loader
-    display: inline-block
-    margin: 0 auto
-    overflow: hidden
-
-    i
-      display: block
-      float: left
-      margin: 2px 0 0 5px
-
-      font-size: $ikmd-font-size-t3
-
-    p
-      float: left
-      margin-left: #{$ikmd-space-base}px
-
-/* Check Box */
-.ikmd-check-box-container
-  position: relative
-
-  i.ikmd-check-box
-    position: absolute
-    top: 20px
-    right: 8px
-    width: 20px
-    height: 20px
-    font-size: 20px
-    color: $ikmd-theme-color

src/styles/ikmd.scss

+/* IK Mobile Design
+ * ========================================================================== */
+
+@import "components/variables";
+
+/* Common Class */
+.ikmd-display-flex {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -moz-box;
+  display: -moz-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.ikmd-animation-settings {
+  -webkit-animation-duration: 0.3s;
+  -moz-animation-duration: 0.3s;
+  animation-duration: 0.3s;
+  -webkit-animation-delay: 0s;
+  -moz-animation-delay: 0s;
+  animation-delay: 0s;
+}
+
+@each $split in 1, 2, 3, 4 {
+  .ikmd-box-flex-#{$split} {
+    -webkit-box-flex: #{$split};
+    -webkit-flex: #{$split};
+    -moz-box-flex: #{$split};
+    -moz-flex: #{$split};
+    -ms-flex: #{$split};
+    flex: #{$split};
+  }
+}
+
+/* Input Group and Text Group */
+.ikmd-input-group-container, .ikmd-text-group-container {
+  padding-top: $ikmd-white-space-8;
+  background-color: $ikmd-color-t5;
+
+  .ikmd-input-group-header, .ikmd-text-group-header {
+    padding: 0 $ikmd-wing-blank $ikmd-white-space-8;
+    font-size: $ikmd-font-size-t3;
+  }
+
+  .ikmd-input-group-header + .ikmd-input-group, .ikmd-text-group-header + .ikmd-text-group {
+    margin-top: 0 !important;
+  }
+
+  .ikmd-input-group, .ikmd-text-group {
+    margin-top: $ikmd-white-space-8;
+    padding: 0 0 0 $ikmd-wing-blank;
+    background-color: white;
+    border: 1px solid $ikmd-color-t5;
+    border-left: none;
+    border-right: none;
+
+    .ikmd-input, .ikmd-select, .ikmd-text {
+      background-color: white;
+
+      &:last-child::after {
+        display: none;
+      }
+    }
+
+    .ikmd-btn {
+      width: 100%;
+      height: $ikmd-btn-height;
+      margin: 0 auto;
+
+      &.ikmd-btn-primary {
+        width: 100%;
+        margin: 0;
+        text-align: center;
+      }
+    }
+  }
+}
+
+/* Input and Text */
+.ikmd-input, .ikmd-text {
+  position: relative;
+  padding: 22px 0 8px;
+
+  &::after {
+    content: "";
+    height: 1px;
+    width: 100%;
+    left: 0;
+    bottom: 0;
+    position: absolute;
+    background-color: $ikmd-color-t5;
+  }
+
+  &.ikmd-input-text {
+    min-height: 60px;
+
+    span {
+      display: block;
+      margin-top: 5px;
+      color: $ikmd-color-t3 !important;
+      font-size: $ikmd-font-size-t2;
+    }
+  }
+
+  svg {
+    fill: $ikmd-theme-color;
+  }
+
+  label {
+    position: absolute;
+    top: 18px;
+    left: 0;
+    color: $ikmd-theme-color;
+    font-size: $ikmd-font-size-t2;
+
+    &.shrunken {
+      -webkit-transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
+      transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
+      -webkit-transform: scale(0.75) translate(-18%, -50%);
+      transform: scale(0.75) translate(-18%, -50%);
+    }
+  }
+
+  input,
+  textarea,
+  span {
+    display: block;
+    width: 100%;
+    margin-top: 5px;
+    font-size: $ikmd-font-size-t2;
+    border: none;
+    color: $ikmd-color-t2;
+  }
+
+  textarea {
+    min-height: 120px;
+    height: auto;
+  }
+
+  p {
+    position: absolute;
+    top: 20px;
+    right: 17px;
+    color: $ikmd-color-t4;
+    font-size: $ikmd-font-size-t3;
+    max-width: 50%;
+    text-align: right;
+    word-break: break-all;
+    word-wrap: break-word;
+    background: white;
+    pointer-events: none;
+
+    &.ikmd-input-errors {
+      color: $ikmd-color-t7;
+    }
+  }
+
+  svg {
+    position: absolute;
+    top: 15px;
+    right: 15px;
+    width: 30px;
+    height: 30px;
+  }
+}
+
+.ikmd-text span {
+  min-height: 24px;
+}
+
+/* Select */
+.ikmd-select {
+  position: relative;
+  padding: 22px 0 8px;
+
+  &::after {
+    content: "";
+    height: 1px;
+    width: 100%;
+    left: 0;
+    bottom: 0;
+    position: absolute;
+    background-color: #eee;
+  }
+
+  .ikmd-select-title {
+    position: absolute;
+    top: 18px;
+    left: 0;
+    color: #459df5;
+    font-size: $ikmd-font-size-t2;
+
+    &.shrunken {
+      -webkit-transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
+      transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
+      -webkit-transform: scale(0.75) translate(-18%, -50%);
+      transform: scale(0.75) translate(-18%, -50%);
+    }
+  }
+
+  .ikmd-select-subtitle {
+    display: block;
+    width: 100%;
+    height: 30px;
+    padding: 5px 0;
+    font-size: 16px;
+    border: none;
+    color: $ikmd-color-t2;
+  }
+
+  .ikmd-select-tips {
+    position: absolute;
+    top: 20px;
+    right: #{25 + $ikmd-space-base}px;
+    color: $ikmd-color-t4;
+    font-size: $ikmd-font-size-t3;
+    max-width: 50%;
+    text-align: right;
+    word-break: break-all;
+    word-wrap: break-word;
+    background: white;
+
+    &.ikmd-input-tips {
+      color: #323232;
+    }
+
+    &.ikmd-input-errors {
+      color: $ikmd-color-t7;
+    }
+  }
+
+  .ikmd-select-arrow {
+    position: absolute;
+    top: 20px;
+    right: 17px;
+    color: $ikmd-color-t4;
+    font-size: $ikmd-font-size-t3;
+  }
+}
+
+/* Button Group */
+.ikmd-btn-group-wrapper {
+  .ikmd-btn-group-container {
+    width: 100%;
+    padding-top: $ikmd-white-space-8;
+    background-color: $ikmd-color-t5;
+
+    .ikmd-btn-group-header {
+      padding: 0 $ikmd-wing-blank $ikmd-white-space-8;
+      font-size: $ikmd-font-size-t3;
+
+      & + .ikmd-btn-group {
+        margin-top: 0 !important;
+      }
+    }
+
+    .ikmd-btn-group {
+      margin-top: $ikmd-white-space-8;
+    }
+
+    &.ikmd-btn-group-bottom {
+      //position: absolute
+      //left: 0
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      height: 48px;
+
+      .ikmd-btn-group {
+        position: fixed;
+        left: 0;
+        bottom: 0;
+      }
+
+      .ikmd-btn-group-bottom-placeholder {
+        height: 48px;
+      }
+    }
+
+    .ikmd-btn-group {
+      @extend .ikmd-display-flex;
+
+      width: 100%;
+
+      > button {
+        @extend .ikmd-box-flex-1;
+
+        border-right: 1px solid $ikmd-color-t5;
+
+        &:last-child {
+          border-right: none;
+        }
+
+        &.ikmd-btn-primary {
+          border-color: white;
+        }
+      }
+    }
+  }
+
+  .ikmd-btn-group-bottom-placeholder {
+    height: 48px;
+  }
+}
+
+/* Button */
+.ikmd-btn {
+  display: block;
+  height: $ikmd-btn-height;
+  font-size: $ikmd-font-size-t2;
+  color: $ikmd-theme-color;
+  background-color: white;
+  text-align: center;
+  border: none;
+
+  &.ikmd-btn-primary {
+    color: white;
+    background-color: $ikmd-theme-color;
+  }
+
+  .ikmd-btn-icon-wrapper {
+    display: inline-block;
+    vertical-align: middle;
+
+    > * {
+      display: inline;
+      vertical-align: middle;
+    }
+
+    svg {
+      width: 20px;
+      height: 20px;
+      fill: $ikmd-theme-color;
+    }
+
+    p {
+      margin-left: 10px;
+    }
+  }
+}
+
+/* Date Picker */
+.ikmd-date-picker-cover {
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: $ikmd-date-picker-cover-zIndex;
+  width: 100%;
+  height: 100%;
+  background-color: #000;
+  opacity: 0.3;
+}
+
+.ikmd-date-picker {
+  @extend .ikmd-animation-settings;
+
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  z-index: $ikmd-date-picker-zIndex;
+  width: 100%;
+  height: 300px;
+  background-color: white;
+
+  .ikmd-date-picker-header {
+    @extend .ikmd-display-flex;
+
+    height: 48px;
+    padding: 0 $ikmd-wing-blank;
+    overflow: hidden;
+    border-bottom: 1px solid $ikmd-color-t5;
+
+    > div {
+      height: 100%;
+      font-size: $ikmd-font-size-t2;
+      line-height: 48px;
+
+      &.ikmd-date-picker-header-left, &.ikmd-date-picker-header-right {
+        @extend .ikmd-box-flex-1;
+
+        color: $ikmd-theme-color;
+      }
+
+      &.ikmd-date-picker-header-right {
+        text-align: right;
+      }
+
+      &.ikmd-date-picker-header-title {
+        @extend .ikmd-box-flex-4;
+
+        color: $ikmd-color-t2;
+        text-align: center;
+      }
+    }
+  }
+
+  .ikmd-date-picker-body {
+    @extend .ikmd-display-flex;
+
+    width: 100%;
+    height: 252px;
+
+    .ikmd-date-picker-item {
+      position: relative;
+
+      @extend .ikmd-box-flex-1;
+
+      .ikmd-date-picker-item-mask {
+        position: absolute;
+        left: 0;
+        top: 0;
+        z-index: 1201;
+        width: 100%;
+        height: 100%;
+        background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0.95), hsla(0, 0%, 100%, 0.6)), linear-gradient(0deg, hsla(0, 0%, 100%, 0.95), hsla(0, 0%, 100%, 0.6));
+        background-size: 100% 108px;
+        background-position: top, bottom;
+        background-repeat: no-repeat;
+        pointer-events: none;
+      }
+
+      .ikmd-date-picker-item-indicator {
+        position: absolute;
+        left: 0;
+        top: 108px;
+        width: 100%;
+        height: 36px;
+        border: 1px solid $ikmd-color-t5;
+        border-left: none;
+        border-right: none;
+      }
+
+      .ikmd-date-picker-item-content {
+        position: absolute;
+        left: 0;
+        top: 0;
+        z-index: 1200;
+        width: 100%;
+        height: 100%;
+        display: none;
+        text-align: center;
+        font-size: $ikmd-font-size-t2;
+        color: $ikmd-color-t2;
+
+        .ikmd-date-picker-item-content-item {
+          width: 100%;
+          height: 36px !important;
+          line-height: 36px !important;
+        }
+      }
+    }
+  }
+}
+
+/* Filter Bar */
+.ikmd-filter-bar {
+  .ikmd-filter-bar-filter-container {
+    @extend .ikmd-animation-settings;
+
+    //position: relative
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1007;
+    width: 100%;
+    background-color: white;
+
+    //height: 100%
+
+    .ikmd-filter-bar-categories {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 1008;
+      height: 100%;
+      overflow: hidden;
+      background-color: white;
+      border-bottom: 1px solid $ikmd-color-t5;
+
+      > div {
+        float: left;
+      }
+
+      .ikmd-filter-bar-category {
+        height: 100%;
+        text-align: center;
+
+        p {
+          color: $ikmd-color-t3;
+          border-right: 1px solid $ikmd-color-t5;
+          font-size: $ikmd-font-size-t3;
+
+          &.active {
+            color: $ikmd-theme-color;
+          }
+
+          i {
+            font-size: 10px;
+          }
+        }
+      }
+    }
+
+    .ikmd-filter-bar-search {
+      position: absolute;
+      top: 0;
+      right: 0;
+      z-index: 1008;
+      padding-top: 15px;
+      text-align: center;
+      font-size: $ikmd-font-size-t3;
+      border-bottom: 1px solid $ikmd-color-t5;
+    }
+
+    .ikmd-filter-bar-category-cover, .ikmd-filter-bar-category-buttons, .ikmd-filter-bar-toolbar {
+      position: fixed;
+      left: 0;
+      z-index: 1006;
+      width: 100%;
+    }
+
+    .ikmd-filter-bar-category-cover {
+      background-color: black;
+      opacity: 0.6;
+    }
+
+    .ikmd-filter-bar-category-buttons {
+      @extend .ikmd-animation-settings;
+
+      z-index: 1007;
+      display: none;
+      background-color: white;
+      border-bottom: 1px solid $ikmd-color-t5;
+
+      .ikmd-filter-bar-category-buttons-left, .ikmd-filter-bar-category-buttons-right {
+        float: left;
+        height: 200px;
+        overflow-y: auto;
+      }
+
+      .ikmd-filter-bar-category-buttons-left {
+        background-color: $ikmd-color-o2;
+
+        a {
+          display: block;
+          width: 100%;
+          height: 40px;
+          color: $ikmd-color-t4;
+          font-size: $ikmd-font-size-t3;
+          text-align: center;
+          line-height: 40px;
+
+          &.active {
+            background-color: white;
+          }
+        }
+      }
+
+      .ikmd-filter-bar-category-buttons-right {
+        background-color: white;
+      }
+
+      .ikmd-filter-bar-category-button {
+        @extend .ik-word-break;
+
+        position: relative;
+        height: 40px;
+        padding-left: #{$ikmd-space-base}px;
+        line-height: 40px;
+
+        &.active {
+          p, i {
+            color: $ikmd-theme-color;
+          }
+        }
+
+        p {
+          color: $ikmd-color-t4;
+          font-size: $ikmd-font-size-t3;
+          border-bottom: 1px solid $ikmd-color-t5;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+
+        i {
+          position: absolute;
+          top: 15px;
+          right: #{$ikmd-space-base}px;
+          font-size: $ikmd-font-size-t3;
+        }
+      }
+    }
+
+    .ikmd-filter-bar-toolbar {
+      z-index: 1007;
+      display: none;
+      height: 40px;
+      background-color: white;
+
+      .ikmd-filter-bar-toolbar-button {
+        display: block;
+        float: left;
+        height: 100%;
+        text-align: center;
+        font-size: $ikmd-font-size-t3;
+        line-height: 40px;
+        border-right: 1px solid $ikmd-color-t5;
+
+        &:last-child {
+          border-right: none;
+        }
+      }
+    }
+  }
+
+  .ikmd-filter-bar-search-container {
+    @extend .ikmd-animation-settings;
+
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1009;
+    display: none;
+    padding-left: #{$ikmd-space-base}px;
+    overflow: hidden;
+    background-color: $ikmd-color-o1;
+
+    form {
+      position: relative;
+
+      > * {
+        display: block;
+        float: left;
+      }
+
+      input {
+        padding: 0 30px;
+        border-radius: 75px;
+        border: none;
+      }
+
+      i {
+        position: absolute;
+        top: 16px;
+        font-size: 18px;
+
+        &.ikmd-filter-bar-search-magnifier {
+          left: 10px;
+        }
+
+        &.ikmd-filter-bar-search-clear {
+          right: 58px;
+        }
+      }
+    }
+
+    .ikmd-filter-bar-search-cancel {
+      color: $ikmd-theme-color;
+      font-size: $ikmd-font-size-t3;
+      text-align: center;
+    }
+
+    .ikmd-filter-bar-search-result {
+      position: absolute;
+      left: 0;
+      z-index: 1006;
+      width: 100%;
+      height: 100%;
+      background-color: $ikmd-color-t5;
+      pointer-events: none;
+    }
+  }
+}
+
+/* Loading */
+.ikmd-loading {
+  width: 50px;
+  height: 50px;
+  margin: 20px auto;
+
+  > div {
+    display: inline-block;
+    width: 0.5rem;
+    height: 100%;
+    margin-left: 0.2rem;
+    background-color: $ikmd-theme-color;
+    -webkit-animation: stretch-delay 1.2s infinite ease-in-out;
+    animation: stretch-delay 1.2s infinite ease-in-out;
+  }
+
+  .ikmd-loading-rect1 {
+    margin-left: 0;
+  }
+
+  .ikmd-loading-rect2 {
+    -webkit-animation-delay: -1.1s;
+    animation-delay: -1.1s;
+  }
+
+  .ikmd-loading-rect3 {
+    -webkit-animation-delay: -1s;
+    animation-delay: -1s;
+  }
+
+  .ikmd-loading-rect4 {
+    -webkit-animation-delay: -0.9s;
+    animation-delay: -0.9s;
+  }
+
+  .ikmd-loading-rect5 {
+    -webkit-animation-delay: -0.8s;
+    animation-delay: -0.8s;
+  }
+
+  @-webkit-keyframes stretch-delay {
+    0%, 40%, 100% {
+      -webkit-transform: scaleY(0.4);
+    }
+
+    20% {
+      -webkit-transform: scaleY(1);
+    }
+  }
+
+  @keyframes stretch-delay {
+    0%, 40%, 100% {
+      transform: scaleY(0.4);
+      -webkit-transform: scaleY(0.4);
+    }
+
+    20% {
+      transform: scaleY(1);
+      -webkit-transform: scaleY(1);
+    }
+  }
+}
+
+/* Scroll Up Load */
+.ikmd-scroll-up-loader-wrapper {
+  width: 100%;
+  padding: #{$ikmd-space-base}px;
+  text-align: center;
+
+  .ikmd-scroll-up-loader {
+    display: inline-block;
+    margin: 0 auto;
+    overflow: hidden;
+
+    i {
+      display: block;
+      float: left;
+      margin: 2px 0 0 5px;
+      font-size: $ikmd-font-size-t3;
+    }
+
+    p {
+      float: left;
+      margin-left: #{$ikmd-space-base}px;
+    }
+  }
+}
+
+/* Check Box */
+.ikmd-check-box-container {
+  position: relative;
+
+  i.ikmd-check-box {
+    position: absolute;
+    top: 20px;
+    right: 8px;
+    width: 20px;
+    height: 20px;
+    font-size: 20px;
+    color: $ikmd-theme-color;
+  }
+}

src/styles/product_categories.sass

-
-#mobile_product_categories_index
-  background: #efeff3
-
-  .customers-show-heading
-    padding: 5px 0px 5px 20px
-
-  li
-    padding: 15px 20px
-    border-bottom: solid #E4E4E4 1px
-    background: white

src/styles/product_categories.scss

+#mobile_product_categories_index {
+  background: #efeff3;
+
+  .customers-show-heading {
+    padding: 5px 0px 5px 20px;
+  }
+
+  li {
+    padding: 15px 20px;
+    border-bottom: solid #E4E4E4 1px;
+    background: white;
+  }
+}

src/styles/product_items.sass

-@charset "UTF-8"
-
-#mobile_product_items_new,
-#mobile_product_items_edit,
-#mobile_order_items_new,
-#mobile_order_items_edit
-  .product-items-header
-    padding: #{$ikmd-space-base}px
-
-    .product-items-icon
-      position: relative
-
-      float: left
-      width: 100%
-      height: 0
-      margin: auto
-      padding-bottom: 100%
-
-      border: 1px solid #E4E4E4
-
-      > div
-        position: absolute
-        top: 0
-        left: 0
-
-        width: 100%
-        height: 100%
-
-      img
-        display: block
-        margin: auto
-        width: 100%
-        height: 100%
-        max-width: 192px
-        max-height: 192px
-
-    .product-items-info
-      padding-left: #{$ikmd-space-base}px

src/styles/product_items.scss

+#mobile_product_items_new,
+#mobile_product_items_edit,
+#mobile_order_items_new,
+#mobile_order_items_edit {
+  .product-items-header {
+    padding: #{$ikmd-space-base}px;
+
+    .product-items-icon {
+      position: relative;
+      float: left;
+      width: 100%;
+      height: 0;
+      margin: auto;
+      padding-bottom: 100%;
+      border: 1px solid #E4E4E4;
+
+      > div {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+      }
+
+      img {
+        display: block;
+        margin: auto;
+        width: 100%;
+        height: 100%;
+        max-width: 192px;
+        max-height: 192px;
+      }
+    }
+
+    .product-items-info {
+      padding-left: #{$ikmd-space-base}px;
+    }
+  }
+}

src/styles/products.sass

-#mobile_products_index, #mobile_inventories_index, #mobile_batches_index
-  .products
-    i.anticon-file
-      margin-top: 50px
-      font-size: 100px
-
-    .product
-      overflow: hidden
-      border-bottom: 1px solid #f0f0f0
-      padding: 15px
-
-      .name
-        color: #2a2d30
-
-      .number
-        float: left
-        color: #949da4
-
-      .amount
-        float: right
-        color: #949da4
-
-#mobile_products_show
-  .header
-    overflow: hidden
-    padding: 20px
-
-    .icon
-      border: solid #E4E4E4
-      border-width: 1px
-      float: left
-      margin: auto
-      width: 100%
-      height: 100%
-
-      img
-        display: block
-        margin: auto
-        width: 100%
-        height: 100%
-        max-width: 192px
-        max-height: 192px
-
-    .content
-      float: left
-
-      .detail
-        padding-top: 15px
-
-      .name-with-number
-        margin-left: 20px
-
-  .list
-    .total
-      background-color: #F2F2F2
-      padding: 10px 20px
-      border: 1px solid #E4E4E4
-
-      .name
-        float: left
-      .value
-        float: right
-
-    .warehouses
-      .warehouse
-        padding: 20px
-        border: solid #E4E4E4
-        border-width: 0 1px 1px 1px
-
-        .name
-          float: left
-        .amount
-          float: right
-
-#mobile_products_new, #mobile_products_edit
-  .img-title
-    background-color: #F2F2F2
-    padding: 10px 20px
-
-  .pic
-    margin: 10px
-    border: solid #E4E4E4 1px
-
-  .anticon.anticon-eye-o
-    display: none !important
-
-  .ant-upload-list-item-info:hover:before
-    opacity: 0
-
-  .ant-upload-list-item-done,
-  .ant-upload-select,
-  .ant-upload-list-item-uploading
-    width: 128px
-    height: 128px
-    margin: 20px
-
-  .ant-upload-select-picture-card i
-    font-size: 28px
-    color: #999
-
-  .ant-upload-select-picture-card .ant-upload-text
-    margin-top: 8px
-    font-size: 14px
-    color: #666
-
-  .ant-upload-list-item-uploading-text
-    text-align: center
-
-  .upload
-    padding-bottom: 48px
-
-    .anticon.anticon-cross-circle
-      position: absolute
-      right: 0px
-      top: -8px
-      left: 90%
-      -webkit-transition: all 0.3s ease
-      transition: all 0.3s ease
-      cursor: pointer
-      font-size: 20px
-      width: 20px
-      line-height: 1
-      color: black
-      margin: 0px
-      padding: 0px
-
-.product-upload-item
-  width: 128px
-  height: 128px
-  margin: 20px
-  padding: 8px
-  border-radius: 6px
-  border: 1px solid #d9d9d9
-  position: relative
-  img
-    display: block
-    width: 100%
-    height: 100%
-  button
-    position: absolute
-    right: -5px
-    top: -5px
-    width: 20px
-    height: 20px
-    border-radius: 50%
-    background-color: black
-    border: none
-    color: white

src/styles/products.scss

+#mobile_products_index,
+#mobile_inventories_index,
+#mobile_batches_index {
+  .products {
+    i.anticon-file {
+      margin-top: 50px;
+      font-size: 100px;
+    }
+
+    .product {
+      overflow: hidden;
+      border-bottom: 1px solid #f0f0f0;
+      padding: 15px;
+
+      .name {
+        color: #2a2d30;
+      }
+
+      .number {
+        float: left;
+        color: #949da4;
+      }
+
+      .amount {
+        float: right;
+        color: #949da4;
+      }
+    }
+  }
+}
+
+#mobile_products_show {
+  .header {
+    overflow: hidden;
+    padding: 20px;
+
+    .icon {
+      border: solid #E4E4E4;
+      border-width: 1px;
+      float: left;
+      margin: auto;
+      width: 100%;
+      height: 100%;
+
+      img {
+        display: block;
+        margin: auto;
+        width: 100%;
+        height: 100%;
+        max-width: 192px;
+        max-height: 192px;
+      }
+    }
+
+    .content {
+      float: left;
+
+      .detail {
+        padding-top: 15px;
+      }
+
+      .name-with-number {
+        margin-left: 20px;
+      }
+    }
+  }
+
+  .list {
+    .total {
+      background-color: #F2F2F2;
+      padding: 10px 20px;
+      border: 1px solid #E4E4E4;
+
+      .name {
+        float: left;
+      }
+
+      .value {
+        float: right;
+      }
+    }
+
+    .warehouses {
+      .warehouse {
+        padding: 20px;
+        border: solid #E4E4E4;
+        border-width: 0 1px 1px 1px;
+
+        .name {
+          float: left;
+        }
+
+        .amount {
+          float: right;
+        }
+      }
+    }
+  }
+}
+
+#mobile_products_new,
+#mobile_products_edit {
+  .img-title {
+    background-color: #F2F2F2;
+    padding: 10px 20px;
+  }
+
+  .pic {
+    margin: 10px;
+    border: solid #E4E4E4 1px;
+  }
+
+  .anticon.anticon-eye-o {
+    display: none !important;
+  }
+
+  .ant-upload-list-item-info:hover:before {
+    opacity: 0;
+  }
+
+  .ant-upload-list-item-done,
+  .ant-upload-select,
+  .ant-upload-list-item-uploading {
+    width: 128px;
+    height: 128px;
+    margin: 20px;
+  }
+
+  .ant-upload-select-picture-card i {
+    font-size: 28px;
+    color: #999;
+  }
+
+  .ant-upload-select-picture-card .ant-upload-text {
+    margin-top: 8px;
+    font-size: 14px;
+    color: #666;
+  }
+
+  .ant-upload-list-item-uploading-text {
+    text-align: center;
+  }
+
+  .upload {
+    padding-bottom: 48px;
+
+    .anticon.anticon-cross-circle {
+      position: absolute;
+      right: 0px;
+      top: -8px;
+      left: 90%;
+      -webkit-transition: all 0.3s ease;
+      transition: all 0.3s ease;
+      cursor: pointer;
+      font-size: 20px;
+      width: 20px;
+      line-height: 1;
+      color: black;
+      margin: 0px;
+      padding: 0px;
+    }
+  }
+}
+
+.product-upload-item {
+  width: 128px;
+  height: 128px;
+  margin: 20px;
+  padding: 8px;
+  border-radius: 6px;
+  border: 1px solid #d9d9d9;
+  position: relative;
+
+  img {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
+  button {
+    position: absolute;
+    right: -5px;
+    top: -5px;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background-color: black;
+    border: none;
+    color: white;
+  }
+}

src/styles/purchase_orders.sass

-@charset "UTF-8"
-
-#mobile_purchase_orders_show
-  background-color: $ikmd-color-t5

src/styles/purchase_orders.scss

+#mobile_purchase_orders_show {
+  background-color: $ikmd-color-t5;
+}

src/styles/purchases.sass

-@charset "UTF-8"
-
-#mobile_sales_new, #mobile_purchases_new
-  .ikmd-input-group-container
-    background-color: $ikmd-color-t5
-
-.product-items-wrapper
-  background-color: $ikmd-color-t5
-
-  &.no-header
-    margin-top: #{$ikmd-space-base}px
-
-  .product-items
-    border-top: 1px solid $ikmd-color-t5
-    border-bottom: 1px solid $ikmd-color-t5
-
-    .product-item
-      padding: #{$ikmd-space-base}px
-
-      background-color: white
-
-      &::after
-        content: ''
-        height: 1px
-        width: 100%
-        left: 0
-        bottom: 0
-        position: absolute
-        background-color: $ikmd-color-t5
-
-      &:last-child::after
-        display: none
-
-  .product-items-total
-    @extend .ikmd-display-flex
-
-    background-color: white
-
-    .product-items-total-item
-      @extend .ikmd-box-flex-1
-
-      padding: #{$ikmd-space-base}px
-
-      border-right: 1px solid $ikmd-color-t5
-
-      &:last-child
-        border-right: none

src/styles/purchases.scss

+#mobile_sales_new, 
+#mobile_purchases_new {
+  .ikmd-input-group-container {
+    background-color: $ikmd-color-t5;
+  }
+}
+
+.product-items-wrapper {
+  background-color: $ikmd-color-t5;
+
+  &.no-header {
+    margin-top: #{$ikmd-space-base}px;
+  }
+
+  .product-items {
+    border-top: 1px solid $ikmd-color-t5;
+    border-bottom: 1px solid $ikmd-color-t5;
+
+    .product-item {
+      padding: #{$ikmd-space-base}px;
+      background-color: white;
+
+      &::after {
+        content: "";
+        height: 1px;
+        width: 100%;
+        left: 0;
+        bottom: 0;
+        position: absolute;
+        background-color: $ikmd-color-t5;
+      }
+
+      &:last-child::after {
+        display: none;
+      }
+    }
+  }
+
+  .product-items-total {
+    @extend .ikmd-display-flex;
+
+    background-color: white;
+
+    .product-items-total-item {
+      @extend .ikmd-box-flex-1;
+
+      padding: #{$ikmd-space-base}px;
+      border-right: 1px solid $ikmd-color-t5;
+
+      &:last-child {
+        border-right: none;
+      }
+    }
+  }
+}

src/styles/sale_orders.sass

-@charset "UTF-8"
-
-#mobile_sale_orders_show
-  background-color: $ikmd-color-t5

src/styles/sale_orders.scss

+#mobile_sale_orders_show {
+  background-color: $ikmd-color-t5;
+}

src/styles/search.sass

-@charset "UTF-8"
-
-@import "components/variables"
-
-.ik-search
-  @extend .ik-container-background
-
-  padding: #{$ikmd-space-base}px
-
-  .input
-    width: 100%
-
-  svg
-    position: absolute
-    right: 0
-
-    width: 30px
-    height: 30px
-
-    fill: $ikmd-theme-color

src/styles/search.scss

+@import "components/variables";
+
+.ik-search {
+  @extend .ik-container-background;
+
+  padding: #{$ikmd-space-base}px;
+
+  .input {
+    width: 100%;
+  }
+
+  svg {
+    position: absolute;
+    right: 0;
+    width: 30px;
+    height: 30px;
+    fill: $ikmd-theme-color;
+  }
+}

src/styles/serial_codes.sass

-@charset "UTF-8"
-#mobile_serial_codes_list
-  div.ikmd-check-box-banner-right
-    position: absolute
-    top: 20px
-    right: 10px
-    height: 20px
-    color: $ikmd-theme-color
-
-#mobile_serial_codes_index
-  i.ikmd-icon-close
-    font-size: 20px
\ No newline at end of file

src/styles/serial_codes.scss

+#mobile_serial_codes_list {
+  div.ikmd-check-box-banner-right {
+    position: absolute;
+    top: 20px;
+    right: 10px;
+    height: 20px;
+    color: $ikmd-theme-color;
+  }
+}
+
+#mobile_serial_codes_index {
+  i.ikmd-icon-close {
+    font-size: 20px;
+  }
+}

src/styles/storageios.sass

-
-#mobile_storageios_show, #mobile_storage_transfers_show
-  background-color: $ikmd-color-t5
-
-  .container
-    background-color: #ebebf0
-
-    .item, .product_item
-      @extend .ik-border-bottom
-
-      padding: 10px 0
-      background-color: #fff
-
-
-    .info-wrapper
-      background-color: #fff
\ No newline at end of file

src/styles/storageios.scss

+#mobile_storageios_show,
+#mobile_storage_transfers_show {
+  background-color: $ikmd-color-t5;
+
+  .container {
+    background-color: #ebebf0;
+
+    .item, .product_item {
+      @extend .ik-border-bottom;
+
+      padding: 10px 0;
+      background-color: #fff;
+    }
+
+    .info-wrapper {
+      background-color: #fff;
+    }
+  }
+}

src/styles/suppliers.sass

-@charset "UTF-8"
-
-#mobile_suppliers_index
-  .suppliers
-    i.anticon-file
-      margin-top: 50px
-      font-size: 100px
-
-    .supplier
-      .content
-        padding: 20px
-        border-bottom: 1px solid #f0f0f0
-
-        .number
-          float: left
-
-        .category
-          float: right
-
-#mobile_suppliers_show
-  .ant-main
-    padding: 15px
-
-  .svg-demo
-    div
-      width: 50px
-      height: 50px
-      margin: 0 auto
-      background: #7ac3f9
-      border-radius: 5px
-
-      svg
-        height: 50px
-        width: 50px
-        fill: white
-
-  .font-bold
-    line-height: 48px
-    font-size: 18px
-    font-weight: bold
-    color: #000
-
-  .color9
-    line-height: 25px
-    color: #999
-
-  .suppliers-show-heading
-    padding: 10px 20px 10px 20px
-    background: #efeff3
-    border: 1px solid #E4E4E4
-
-  .suppliers-show-list
-    .suppliers-show-item
-      padding: 20px
-      border-bottom: 1px solid #E4E4E4
-
-      strong
-        display: inline-block
-        vertical-align: middle
-        font-size: 16px
-        margin-right: 8px
-
-      .suppliers-show-phone
-        text-align: right
-
-        .anticon-phone
-          font-size: 24px
-
-  .ant-modal
-    .ant-modal-content
-
-      .ant-modal-body
-        padding: 0
-
-      .content-line
-        border-bottom: 1px solid #E4E4E4
-
-      .ant-modal-footer
-        display: none

src/styles/suppliers.scss

+#mobile_suppliers_index {
+  .suppliers {
+    i.anticon-file {
+      margin-top: 50px;
+      font-size: 100px;
+    }
+
+    .supplier {
+      .content {
+        padding: 20px;
+        border-bottom: 1px solid #f0f0f0;
+
+        .number {
+          float: left;
+        }
+
+        .category {
+          float: right;
+        }
+      }
+    }
+  }
+}
+
+#mobile_suppliers_show {
+  .ant-main {
+    padding: 15px;
+  }
+
+  .svg-demo {
+    div {
+      width: 50px;
+      height: 50px;
+      margin: 0 auto;
+      background: #7ac3f9;
+      border-radius: 5px;
+
+      svg {
+        height: 50px;
+        width: 50px;
+        fill: white;
+      }
+    }
+  }
+
+  .font-bold {
+    line-height: 48px;
+    font-size: 18px;
+    font-weight: bold;
+    color: #000;
+  }
+
+  .color9 {
+    line-height: 25px;
+    color: #999;
+  }
+
+  .suppliers-show-heading {
+    padding: 10px 20px 10px 20px;
+    background: #efeff3;
+    border: 1px solid #E4E4E4;
+  }
+
+  .suppliers-show-list {
+    .suppliers-show-item {
+      padding: 20px;
+      border-bottom: 1px solid #E4E4E4;
+
+      strong {
+        display: inline-block;
+        vertical-align: middle;
+        font-size: 16px;
+        margin-right: 8px;
+      }
+
+      .suppliers-show-phone {
+        text-align: right;
+
+        .anticon-phone {
+          font-size: 24px;
+        }
+      }
+    }
+  }
+
+  .ant-modal {
+    .ant-modal-content {
+      .ant-modal-body {
+        padding: 0;
+      }
+
+      .content-line {
+        border-bottom: 1px solid #E4E4E4;
+      }
+
+      .ant-modal-footer {
+        display: none;
+      }
+    }
+  }
+}

src/styles/table.sass

-@charset "UTF-8"
-
-table.ik-table
-  border-spacing: 0
-  border-collapse: collapse
-  text-align: center
-
-  thead
-    background-color: #ecf7fe
-
-  th, td
-    @extend .ik-border
-    padding: 8px
-
-    word-break: break-all
-    word-wrap: break-word
-
-    &.blue-color
-      background-color: #f0f9ff
-
-    &.yellow-color
-      background-color: #fdfff0

src/styles/table.scss

+table.ik-table {
+  border-spacing: 0;
+  border-collapse: collapse;
+  text-align: center;
+
+  thead {
+    background-color: #ecf7fe;
+  }
+
+  th, td {
+    @extend .ik-border;
+
+    padding: 8px;
+    word-break: break-all;
+    word-wrap: break-word;
+
+    &.blue-color {
+      background-color: #f0f9ff;
+    }
+
+    &.yellow-color {
+      background-color: #fdfff0;
+    }
+  }
+}