diff --git a/package.json b/package.json index 3e1ece37..597c3456 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@soramitsu/soramitsu-js-ui", - "version": "1.0.34", + "version": "1.0.35", "private": false, "publishConfig": { "registry": "https://nexus.iroha.tech/repository/npm-soramitsu/" diff --git a/src/components/Select/SSelect/SSelect.vue b/src/components/Select/SSelect/SSelect.vue index 4bcc7c8e..8e998c21 100644 --- a/src/components/Select/SSelect/SSelect.vue +++ b/src/components/Select/SSelect/SSelect.vue @@ -35,13 +35,14 @@ import { ElFormItem } from 'element-ui/types/form-item' import SizeMixin from '../../../mixins/SizeMixin' import BorderRadiusMixin from '../../../mixins/BorderRadiusMixin' +import DesignSystemInject from '../../DesignSystem/DesignSystemInject' import { Autocomplete } from '../../Input/consts' import { InputTypes } from '../consts' @Component({ components: { ElSelect } }) -export default class SSelect extends Mixins(SizeMixin, BorderRadiusMixin) { +export default class SSelect extends Mixins(SizeMixin, BorderRadiusMixin, DesignSystemInject) { /** * Selected value. Can be used with `v-model` */ @@ -163,6 +164,9 @@ export default class SSelect extends Mixins(SizeMixin, BorderRadiusMixin) { get computedPopperClass (): string { const cssClasses: Array = [] + if (this.designSystemClass) { + cssClasses.push(this.designSystemClass) + } if (this.popperClass) { cssClasses.push(this.popperClass) } @@ -174,6 +178,9 @@ export default class SSelect extends Mixins(SizeMixin, BorderRadiusMixin) { get computedClasses (): Array { const cssClasses: Array = [] + if (this.designSystemClass) { + cssClasses.push(this.designSystemClass) + } if (this.inputType === 'select') { if ((this.elForm || this.elFormItem || {}).size) { cssClasses.push(`s-${(this.elForm || this.elFormItem).size}`) diff --git a/src/styles/dropdown.scss b/src/styles/dropdown.scss index a71874a5..5ccb436f 100644 --- a/src/styles/dropdown.scss +++ b/src/styles/dropdown.scss @@ -55,6 +55,7 @@ .el-dropdown-menu.el-popper { background-color: var(--s-color-base-on-accent); border-color: var(--s-color-base-on-accent); + overflow: hidden; @include with-popper-arrows; } .el-dropdown-menu__item { diff --git a/src/styles/neumorphism/index.scss b/src/styles/neumorphism/index.scss index 6088d16b..27a04027 100644 --- a/src/styles/neumorphism/index.scss +++ b/src/styles/neumorphism/index.scss @@ -8,3 +8,4 @@ @import "./tooltip"; @import "./dialog"; @import "./image"; +@import "./select"; diff --git a/src/styles/neumorphism/select.scss b/src/styles/neumorphism/select.scss new file mode 100644 index 00000000..baa9ff57 --- /dev/null +++ b/src/styles/neumorphism/select.scss @@ -0,0 +1,48 @@ +$arrow-placements: 'top', 'bottom', 'left', 'right'; + +$neu-select-background: var(--s-color-base-background) !default; +$neu-select-dropdown-background: var(--s-color-base-on-accent) !default; +$neu-select-border-width: 0 !default; +$neu-select-box-shadow: var(--s-shadow-element) !default; +$neu-select-color: var(--s-color-base-content-primary) !default; + +.s-select.neumorphic { + &.s-select-type, + &.s-input-type { + .el-select { + .el-input__inner { + border-width: $neu-select-border-width; + background-color: $neu-select-background; + box-shadow: $neu-select-box-shadow; + color: $neu-select-color; + font-weight: 400; + } + } + } +} + +.el-select-dropdown.el-popper.neumorphic { + background-color: $neu-select-dropdown-background; + border-color: $neu-select-dropdown-background; + + .el-scrollbar, + .el-select-dropdown__list, + .el-select-dropdown__wrap { + border-radius: inherit; + } + + .el-select-dropdown__item { + &:not(.selected) { + color: $neu-select-color; + } + } + + @each $placement in $arrow-placements { + &[x-placement^='#{$placement}'] .popper__arrow { + border-#{$placement}-color: $neu-select-dropdown-background; + &:after { + border-#{$placement}-color: $neu-select-dropdown-background; + } + } + } +} \ No newline at end of file diff --git a/src/styles/select.scss b/src/styles/select.scss index 81fa5628..5769fb65 100644 --- a/src/styles/select.scss +++ b/src/styles/select.scss @@ -4,7 +4,8 @@ ) { &.s-border-radius { &-#{$suffix} { - border-radius: 0; + border-radius: $border-radius; + .s-placeholder { border-top-left-radius: $border-radius; }