soramitsu · stefashkaa · Oct 12, 2020 · Oct 3, 2020 · Oct 3, 2020 · Oct 3, 2020
diff --git a/config/storybook/preview.js b/config/storybook/preview.js
@@ -20,7 +20,7 @@ addParameters({
 
 addDecorator(withA11y)
 addDecorator(() => ({
-  template: `<div class="flex" style="padding: 20px;">
+  template: `<div class="s-flex" style="padding: 20px;">
                <story/>
              </div>`
 }))
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu/soramitsu-js-ui",
-  "version": "0.3.5",
+  "version": "0.4.0",
   "private": false,
   "publishConfig": {
     "registry": "https://nexus.iroha.tech/repository/npm-soramitsu-private/"

diff --git a/src/components/Breadcrumb/SBreadcrumb.vue b/src/components/Breadcrumb/SBreadcrumb.vue
@@ -15,11 +15,3 @@ export default class SBreadcrumb extends Vue {
   @Prop({ default: '/', type: String }) readonly separator!: string
 }
 </script>
-
-<style lang="scss">
-@import "../../styles/variables.scss";
-.el-breadcrumb__separator {
-  color: $s-color-neutral-secondary;
-  font-weight: normal;
-}
-</style>
diff --git a/src/components/Breadcrumb/SBreadcrumbItem.vue b/src/components/Breadcrumb/SBreadcrumbItem.vue
@@ -24,17 +24,3 @@ export default class SBreadcrumbItem extends Vue {
   @Prop({ default: false, type: Boolean }) readonly replace!: boolean
 }
 </script>
-
-<style lang="scss">
-@import "../../styles/variables.scss";
-.el-breadcrumb__inner {
-  color: $s-color-neutral-secondary;
-  &.is-link {
-    color: $s-color-neutral-secondary;
-    font-weight: normal;
-  }
-}
-.el-breadcrumb__item:last-child {
-  pointer-events: none;
-}
-</style>
diff --git a/src/components/Button/SButton.vue b/src/components/Button/SButton.vue
@@ -182,152 +182,3 @@ export default class SButton extends Vue {
   }
 }
 </script>
-
-<style lang="scss">
-@import "../../styles/variables.scss";
-
-.s-loading {
-  padding: 12px 17.5px;
-  i {
-    position: absolute;
-    left: var(--s-button-loading-left);
-  }
-  &.s-small {
-    padding: 9px 15px;
-    i {
-      left: calc(var(--s-button-loading-left) + 2px);
-    }
-  }
-  > :not(i) {
-    color: transparent;
-  }
-}
-
-.s-primary {
-  &:hover, &:active, &:focus {
-    background-color: $s-color-main-hover;
-    border-color: $s-color-main-hover;
-  }
-  &:disabled, &:disabled:hover {
-    background-color: $s-color-main-inactive;
-    border-color: $s-color-main-inactive;
-  }
-}
-
-.s-secondary {
-  &:hover, &:active, &:focus {
-    color: $s-color-main-brand;
-    background-color: $s-color-basic-white;
-    border-color: $s-color-main-brand;
-  }
-  &:disabled, &:disabled:hover {
-    color: $s-color-neutral-inactive;
-    border-color: $s-color-neutral-border;
-  }
-  &.s-alternative {
-    &:hover, &:active, &:focus {
-      color: $s-color-basic-black;
-      background-color: $s-color-neutral-hover;
-      border-color: $s-color-neutral-hover;
-    }
-    &:disabled, &:disabled:hover {
-      color: $s-color-neutral-inactive;
-      border-color: $s-color-neutral-border;
-      background-color: $s-color-basic-white;
-    }
-  }
-}
-
-.s-link {
-  color: $s-color-basic-black;
-  border: none;
-  background-color: transparent;
-  &:hover, &:active, &:focus {
-    color: $s-color-main-brand;
-    background-color: transparent;
-  }
-  &:disabled, &:disabled:hover {
-    color: $s-color-neutral-inactive;
-  }
-}
-
-.s-tertiary {
-  color: $s-color-basic-black;
-  border-color: $s-color-neutral-placeholder;
-  background-color: $s-color-neutral-placeholder;
-  &:hover, &:active, &:focus {
-    color: $s-color-main-brand;
-    background-color: $s-color-neutral-placeholder;
-    border-color: $s-color-neutral-placeholder;
-  }
-  &:disabled, &:disabled:hover {
-    color: $s-color-neutral-inactive;
-    background-color: $s-color-neutral-placeholder;
-    border-color: $s-color-neutral-placeholder;
-  }
-}
-
-.s-action {
-  &.s-big {
-    width: $s-size-big;
-    padding: 12px;
-    i {
-      font-size: 20px;
-    }
-  }
-  &.s-medium {
-    width: $s-size-medium;
-    padding: 10px;
-    i {
-      font-size: 18px;
-    }
-  }
-  &.s-small {
-    width: $s-size-small;
-    padding: 9px;
-    i {
-      font-size: 16px;
-      margin-left: -2px;
-      margin-top: -2px;
-    }
-  }
-  color: $s-color-basic-black;
-  background-color: $s-color-neutral-placeholder;
-  border-color: $s-color-neutral-placeholder;
-  border-radius: 8px;
-  &:hover, &:active, &:focus, &:disabled, &:disabled:hover {
-    color: $s-color-basic-black;
-    background-color: $s-color-neutral-hover;
-    border-color: $s-color-neutral-hover;
-  }
-  &:disabled, &:disabled:hover {
-    color: $s-color-neutral-inactive;
-  }
-  &.s-alternative {
-    background-color: $s-color-basic-white;
-    border-color: $s-color-neutral-border;
-    &:hover, &:active, &:focus, &:disabled, &:disabled:hover {
-      color: $s-color-basic-black;
-      background-color: $s-color-neutral-placeholder;
-      border-color: $s-color-neutral-placeholder;
-    }
-    &:disabled, &:disabled:hover {
-      color: $s-color-neutral-inactive;
-    }
-  }
-}
-
-button {
-  > span > i {
-    &[class^=s-icon-], &[class^=el-icon-] {
-      display: inline-block;
-      color: inherit;
-    }
-  }
-  &:not(.s-action) > span > i {
-    &[class^=s-icon-], &[class^=el-icon-] {
-      margin-right: 6px;
-    }
-  }
-}
-</style>
diff --git a/src/components/Card/SCard.vue b/src/components/Card/SCard.vue
@@ -57,27 +57,3 @@ export default class SCard extends Vue {
   }
 }
 </script>
-
-<style lang="scss">
-@import "../../styles/variables.scss";
-
-.s-card {
-  color: $s-color-basic-black;
-  border-radius: 8px;
-  border-color: $s-color-neutral-border;
-  &.s-clickable {
-    cursor: pointer;
-  }
-  &:hover, &:focus {
-    border-color: $s-color-basic-white;
-  }
-  .el-card__header {
-    border-bottom-color: $s-color-basic-white;
-    padding-bottom: 0;
-    text-align: left;
-  }
-  .el-card__body {
-    padding: 18px 20px;
-  }
-}
-</style>
diff --git a/src/components/Checkbox/SCheckbox.vue b/src/components/Checkbox/SCheckbox.vue
@@ -98,93 +98,3 @@ export default class SCheckbox extends Vue {
   }
 }
 </script>
-
-<style lang="scss">
-@import "../../styles/variables.scss";
-@import "../../styles/common.scss";
-
-.el-checkbox {
-  &.s-big {
-    @extend .s-big;
-    padding: 17px 0 9px 0;
-    &.is-bordered {
-      padding: 17px 20px 9px 15px;
-    }
-  }
-  &.s-medium {
-    @extend .s-medium;
-    &, &.is-bordered {
-      padding: 9px 15px 7px 10px;
-      .el-checkbox__inner {
-        height: 16px;
-        width: 16px;
-        &::after {
-          top: 0;
-          left: 4px;
-          height: 8px;
-          width: 4px;
-        }
-      }
-    }
-    & {
-      padding: 9px 0 7px 0;
-    }
-  }
-  &.s-small {
-    @extend .s-small;
-    border-radius: 4px;
-    .el-checkbox__label {
-      font-size: 12px;
-    }
-    &, &.is-bordered {
-      padding: 5px 15px 5px 10px;
-      .el-checkbox__inner {
-        height: 14px;
-        width: 14px;
-        &::after {
-          top: 1px;
-          left: 4px;
-          height: 6px;
-          width: 2px;
-        }
-      }
-    }
-    & {
-      padding: 5px 0;
-    }
-  }
-}
-.el-checkbox__inner {
-  border-color: $s-color-neutral-inactive;
-  border-radius: 4px;
-  width: 20px;
-  height: 20px;
-  &::after {
-    border-width: 2px;
-    height: 10px;
-    left: 6px;
-    width: 5px;
-  }
-}
-.el-checkbox__input {
-  &.is-disabled {
-    .el-checkbox__inner {
-      background-color: $s-color-neutral-placeholder;
-    }
-    & + span.el-checkbox__label {
-      color: $s-color-neutral-inactive;
-    }
-  }
-  &.is-checked {
-    &.is-disabled > .el-checkbox__inner {
-      background-color: $s-color-neutral-placeholder;
-      &::after {
-        border-color: $s-color-neutral-inactive;
-      }
-    }
-    & + .el-checkbox__label {
-      color: $s-color-basic-black;
-    }
-  }
-}
-</style>
diff --git a/src/components/Collapse/SCollapse.vue b/src/components/Collapse/SCollapse.vue
@@ -46,12 +46,3 @@ export default class SCollapse extends Vue {
   }
 }
 </script>
-
-<style lang="scss">
-@import "../../styles/variables.scss";
-
-.el-collapse {
-  border-top-color: #F5F5F5;
-  border-bottom-color: #F5F5F5;
-}
-</style>
diff --git a/src/components/Collapse/SCollapseItem.vue b/src/components/Collapse/SCollapseItem.vue
@@ -50,49 +50,3 @@ export default class SCollapseItem extends Vue {
   }
 }
 </script>
-
-<style lang="scss">
-@import "../../styles/variables.scss";
-@import "../../styles/icons.scss";
-
-.s-without-border {
-  > div > .el-collapse-item__header,
-  > .el-collapse-item__wrap {
-    border: none;
-  }
-}
-.s-without-padding > .el-collapse-item__wrap > .el-collapse-item__content {
-  padding-bottom: 0;
-}
-.el-collapse-item__ {
-  &wrap {
-    border-bottom-color: #F5F5F5;
-  }
-  &header {
-    color: $s-color-basic-black;
-    border-bottom-color: #F5F5F5;
-    &.is-active {
-      border-bottom-color: transparent;
-    }
-    .el-icon-arrow-right {
-      font-family: 'soramitsu-icons' !important;
-      @extend .s-icon-chevron-top;
-      font-size: 16px;
-      padding: 8px;
-      width: 32px;
-      height: 32px;
-      background-color: $s-color-neutral-placeholder;
-      border-radius: 50%;
-      &.is-active {
-        transform: rotate(180deg);
-      }
-    }
-  }
-  &content {
-    color: $s-color-basic-black;
-  }
-}
-.el-collapse-item.is-disabled .el-collapse-item__header {
-  color: $s-color-neutral-inactive;
-}
-</style>