add neu select styles (#458)

Author: Nikita-Polyakov

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/"

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<string> = []
+    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<string> {
     const cssClasses: Array<string> = []
+    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}`)

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 {

src/styles/neumorphism/index.scss

@@ -8,3 +8,4 @@
 @import "./tooltip";
 @import "./dialog";
 @import "./image";
+@import "./select";

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;
+      }
+    }
+  }
+}

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;
       }