diff --git a/package.json b/package.json index ff0bbeee..e89f36d3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@soramitsu/soramitsu-js-ui", - "version": "0.7.4", + "version": "0.7.5", "private": false, "publishConfig": { "registry": "https://nexus.iroha.tech/repository/npm-soramitsu-private/" diff --git a/src/components/Select/SOption.vue b/src/components/Select/SOption.vue index 602733fe..372a6719 100644 --- a/src/components/Select/SOption.vue +++ b/src/components/Select/SOption.vue @@ -1,5 +1,5 @@ diff --git a/src/styles/index.scss b/src/styles/index.scss index 4eef760e..93009ec5 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -16,6 +16,7 @@ @import "./json-input"; @import "./layout"; @import "./menu"; +@import "./option"; @import "./pagination"; @import "./radio"; @import "./scroll-sections"; diff --git a/src/styles/option.scss b/src/styles/option.scss new file mode 100644 index 00000000..9b1ba403 --- /dev/null +++ b/src/styles/option.scss @@ -0,0 +1,4 @@ +.s-option { + padding-left: $s-padding-input; + padding-right: $s-padding-input; +} \ No newline at end of file diff --git a/src/styles/select.scss b/src/styles/select.scss index f66d5f4d..bc9cdce0 100644 --- a/src/styles/select.scss +++ b/src/styles/select.scss @@ -15,6 +15,10 @@ } } +$select-prefix-margin-right: 8px; +$select-prefix-width: $s-size-mini; +$select-prefix-height: $s-size-mini; + .s-select { font-family: $s-font-family-default; width: 100%; @@ -48,9 +52,9 @@ &--prefix { .el-input__prefix { bottom: 0; - left: 12px; - width: $s-size-mini; - height: $s-size-mini; + left: $s-padding-input; + width: $select-prefix-width; + height: $select-prefix-height; margin: auto; overflow: hidden; } @@ -59,6 +63,13 @@ } &.s-input-type { .el-select { + .el-input { + &--prefix { + .el-input__inner { + padding-left: $s-padding-input + $select-prefix-width + $select-prefix-margin-right; + } + } + } .el-input__inner { height: $s-size-big; padding: 0 15px; @@ -84,7 +95,7 @@ .el-input { &--prefix { .el-input__inner{ - padding-left: 44px; + padding-left: $s-padding-input + $select-prefix-width + $select-prefix-margin-right; } .el-input__prefix { @@ -151,11 +162,10 @@ .el-input { &.el-input--prefix { .el-input__inner { - padding-left: 44px; + padding-left: $s-padding-input + $select-prefix-width + $select-prefix-margin-right; } } .el-input__inner { - padding-left: 12px; font-weight: bold; &:hover { border-color: var(--s-color-base-border-primary); diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 6e867af2..30254a87 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -48,6 +48,9 @@ $s-size-medium: 40px !default; $s-size-small: 32px !default; $s-size-mini: 24px !default; +// Padding +$s-padding-input: 16px; + $s-border-radius-base: 4px; $s-border-radius-mini: $s-border-radius-base !default; $s-border-radius-small: $s-border-radius-base * 2 !default; @@ -153,6 +156,8 @@ $--breakpoints-spec: ( --s-size-small: #{$s-size-small}; --s-size-medium: #{$s-size-medium}; --s-size-big: #{$s-size-big}; + // Padding + --s-padding-input: #{$s-padding-input}; // Border Radius --s-border-radius-mini: #{$s-border-radius-mini}; --s-border-radius-small: #{$s-border-radius-small};