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 */
-$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/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;
+    }
+  }
+}