From 658ab3628a94f4c9f9388e04df20e19c6ec3ac78 Mon Sep 17 00:00:00 2001
From: Nikita-Polyakov <polyakov@soramitsu.co.jp>
Date: Mon, 31 May 2021 12:36:32 +0300
Subject: [PATCH 1/3] wip neumorphic input

---
 .../DesignSystem/SDesignSystemProvider.vue    |   7 +
 src/components/Input/SInput.vue               |  15 +-
 src/stories/SFloatInput.stories.ts            |  17 +-
 src/stories/SInput.stories.ts                 |  15 +-
 src/styles/input.scss                         | 183 +++++++++---------
 src/styles/neumorphism/index.scss             |   1 +
 src/styles/neumorphism/input.scss             |  41 ++++
 7 files changed, 179 insertions(+), 100 deletions(-)
 create mode 100644 src/styles/neumorphism/input.scss

diff --git a/src/components/DesignSystem/SDesignSystemProvider.vue b/src/components/DesignSystem/SDesignSystemProvider.vue
index 7cfca97f..c9584290 100644
--- a/src/components/DesignSystem/SDesignSystemProvider.vue
+++ b/src/components/DesignSystem/SDesignSystemProvider.vue
@@ -14,3 +14,10 @@ export default class SDesignSystemProvider extends Vue {
   @Provide(DesignSystemProvideKey) designSystem = this
 }
 </script>
+
+<style lang="scss" scoped>
+.design-system-provider {
+  flex: 1;
+  width: 100%;
+}
+</style>
diff --git a/src/components/Input/SInput.vue b/src/components/Input/SInput.vue
index e80d1ffd..304fd576 100644
--- a/src/components/Input/SInput.vue
+++ b/src/components/Input/SInput.vue
@@ -3,7 +3,9 @@
     class="s-input"
     :class="computedClasses"
   >
-    <span v-if="value && !isMediumInput" class="s-placeholder">{{ placeholder }}</span>
+    <slot name="label">
+      <span v-if="value && !isMediumInput" class="s-placeholder">{{ placeholder }}</span>
+    </slot>
     <el-input
       ref="el-input"
       :value="value"
@@ -23,7 +25,7 @@
       :label="label"
       :accept="accept"
       :tabindex="tabindex"
-      :prefix-icon="(isMediumInput && prefix) ? prefix : ''"
+      :prefix-icon="prefix"
       :suffix-icon="suffix"
       @input="handleInput"
       @change="handleChange"
@@ -46,13 +48,14 @@ import { ElInput } from 'element-ui/types/input'
 import { ElForm } from 'element-ui/types/form'
 
 import { SIcon } from '../Icon'
+import { DesignSystemInject } from '../DesignSystem'
 import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
 import { Autocomplete, InputSize, InputType } from './consts'
 
 @Component({
   components: { SIcon }
 })
-export default class SInput extends Mixins(BorderRadiusMixin) {
+export default class SInput extends Mixins(BorderRadiusMixin, DesignSystemInject) {
   readonly InputType = InputType
   readonly emptyValue = null
   /**
@@ -170,6 +173,9 @@ export default class SInput extends Mixins(BorderRadiusMixin) {
 
   get computedClasses (): Array<string> {
     const cssClasses: Array<string> = []
+    if (this.designSystemClass) {
+      cssClasses.push(this.designSystemClass)
+    }
     if (this.focused) {
       cssClasses.push('s-focused')
     }
@@ -191,6 +197,9 @@ export default class SInput extends Mixins(BorderRadiusMixin) {
     if (this.size) {
       cssClasses.push(this.sizeClass)
     }
+    if (this.prefix) {
+      cssClasses.push('s-input--prefix')
+    }
     return cssClasses
   }
 
diff --git a/src/stories/SFloatInput.stories.ts b/src/stories/SFloatInput.stories.ts
index 7c0234d8..e27ac49d 100644
--- a/src/stories/SFloatInput.stories.ts
+++ b/src/stories/SFloatInput.stories.ts
@@ -1,6 +1,7 @@
-import { number, text, boolean, object, withKnobs } from '@storybook/addon-knobs'
+import { number, text, boolean, object, select, withKnobs } from '@storybook/addon-knobs'
 
-import { SFloatInput, SRow } from '../components'
+import { SFloatInput, SRow, SDesignSystemProvider } from '../components'
+import { DesignSystemTypes } from '../components/DesignSystem'
 
 export default {
   component: SFloatInput,
@@ -9,8 +10,10 @@ export default {
 }
 
 export const configurable = () => ({
-  components: { SFloatInput, SRow },
-  template: `<s-row class="s-flex" style="flex: 1; justify-content: space-between; align-items: center;">
+  components: { SFloatInput, SRow, SDesignSystemProvider },
+  template: `
+            <s-design-system-provider :value="designSystem">
+              <s-row class="s-flex" style="flex: 1; justify-content: space-between; align-items: center;">
                <s-float-input
                  v-model="model"
                  :decimals="decimals"
@@ -18,11 +21,15 @@ export const configurable = () => ({
                  :delimiters="delimiters"
                  :max="max"
                />
-             </s-row>`,
+              </s-row>
+            </s-design-system-provider>`,
   data: () => ({
     model: ''
   }),
   props: {
+    designSystem: {
+      default: select('Design System', Object.values(DesignSystemTypes), DesignSystemTypes.DEFAULT)
+    },
     decimals: {
       default: number('Decimals', 18)
     },
diff --git a/src/stories/SInput.stories.ts b/src/stories/SInput.stories.ts
index 8e394b96..a7935523 100644
--- a/src/stories/SInput.stories.ts
+++ b/src/stories/SInput.stories.ts
@@ -1,8 +1,9 @@
 import { text, boolean, withKnobs, number, select } from '@storybook/addon-knobs'
 
-import { SInput, SRow, SCol } from '../components'
+import { SInput, SRow, SCol, SDesignSystemProvider } from '../components'
 import { BorderRadius } from '../types'
 import { InputType, InputSize } from '../components/Input'
+import { DesignSystemTypes } from '../components/DesignSystem'
 
 export default {
   component: SInput,
@@ -12,8 +13,10 @@ export default {
 }
 
 export const configurable = () => ({
-  components: { SInput },
-  template: `<s-input
+  components: { SInput, SDesignSystemProvider },
+  template: `
+            <s-design-system-provider :value="designSystem">
+              <s-input
                v-model="input"
                :type="type"
                :placeholder="placeholder"
@@ -26,11 +29,15 @@ export const configurable = () => ({
                :size="size"
                :prefix="prefix"
                :suffix="suffix"
-             />`,
+              />
+            </s-design-system-provider>`,
   data: () => ({
     input: ''
   }),
   props: {
+    designSystem: {
+      default: select('Design System', Object.values(DesignSystemTypes), DesignSystemTypes.DEFAULT)
+    },
     type: {
       default: select('Type', Object.values(InputType), InputType.TEXT)
     },
diff --git a/src/styles/input.scss b/src/styles/input.scss
index 35cf091b..f77a0e0b 100644
--- a/src/styles/input.scss
+++ b/src/styles/input.scss
@@ -4,117 +4,134 @@
 ) {
   &.s-border-radius {
     &-#{$suffix} {
-      border-radius: 0;
-      .s-placeholder {
-        border-top-left-radius: $border-radius;
-      }
-      .el-input,
-      .el-textarea {
-        > input,
-        > textarea {
-          border-radius: $border-radius;
-        }
-      }
+      border-radius: $border-radius;
     }
   }
 }
 
+$input-icon-width: 18px;
+$input-border-width: 1px;
+$input-padding-top: $s-padding-input / 2 - $input-border-width;
+$input-padding-left: $s-padding-input - $input-border-width;
+
 .s-input {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: flex-start;
+
+  background-color: var(--s-color-base-background);
+  border-color: var(--s-color-base-background);
+  border-style: solid;
+  border-width: $input-border-width;
   font-family: $s-font-family-default;
-  width: 100%;
   min-height: $s-size-big;
+  padding: $input-padding-top $input-padding-left;
   position: relative;
+  width: 100%;
+
   @include input-border-radius;
   @include input-border-radius("medium", var(--s-border-radius-medium));
   @include input-border-radius("small", var(--s-border-radius-small));
   @include input-border-radius("mini", var(--s-border-radius-mini));
-  .el-input__suffix {
-    z-index: 1;
+
+  &.s-size-medium {
+    min-height: $s-size-medium;
   }
+
   .s-placeholder {
     // TODO: add default animation from material-ui
     color: var(--s-color-base-content-tertiary);
     text-align: left;
     font-size: var(--s-font-size-mini);
-    padding: 0 15px;
-    padding-top: 5px;
-    top: 1px;
-    left: 1px;
-    position: absolute;
+    line-height: 1.5;
     z-index: 1;
-    width: calc(100% - 15px);
-    background-color: var(--s-color-base-background);
     pointer-events: none;
-  }
-  .el-input,
-  .el-textarea {
-    height: 100%;
-    > input,
-    > textarea {
-      height: $s-size-big;
-      border: 1px solid var(--s-color-base-background);
-      background-color: var(--s-color-base-background);
-      &::placeholder {
-        color: var(--s-color-base-content-tertiary);
-        opacity: 1; // Firefox
+    position: absolute;
+    top: $s-padding-input / 2;
+
+    & + .el-input, & + .el-textarea {
+      padding-top: $s-padding-input;
+
+      .el-input__validateIcon {
+        padding-top: 11px;
       }
     }
-    > textarea {
-      padding-top: 12px;
-    }
-    [class^="el-input__count"] {
-      background-color: transparent;
-    }
   }
+
   &:hover {
-    .s-placeholder,
-    .el-input > input,
-    .el-textarea > textarea {
-      background-color: var(--s-color-base-background-hover);
+    background-color: var(--s-color-base-background-hover);
+    border-color: var(--s-color-base-background-hover);
+  }
+
+  &.s-focused {
+    background-color: var(--s-color-utility-surface);
+    border-color: var(--s-color-base-border-primary);
+  }
+
+  &.s-disabled {
+    color: var(--s-color-base-content-quaternary);
+    background-color: var(--s-color-base-disabled);
+    border-color: var(--s-color-base-disabled);
+
+    .s-placeholder {
+      color: var(--s-color-base-content-quaternary);
     }
-    .el-input > input,
-    .el-textarea > textarea {
-      border-color: var(--s-color-base-background-hover);
+  }
+
+  &--prefix:not(.s-textarea) {
+    .s-placeholder {
+      padding-left: $input-icon-width + $s-padding-input / 2;
     }
   }
-  &.s-size-medium {
-    min-height: $s-size-medium;
 
-    .el-input,
-    .el-textarea {
-      height: 100%;
-      > input,
-      > textarea {
-        height: $s-size-medium;
+  .el-input, .el-textarea {
+    font-size: inherit;
+    position: unset;
+
+    [class^="el-input__count"] {
+      background-color: transparent;
+    }
+
+    &__inner {
+      height: auto;
+      line-height: 1.5;
+      border: none;
+      border-radius: 0;
+      background-color: transparent;
+      padding: 0;
+      text-align: left;
+
+      &::placeholder {
+        color: var(--s-color-base-content-tertiary);
+        opacity: 1; // Firefox
       }
     }
-  }
-  &.s-focused {
-    .s-placeholder,
-    .el-input > input,
-    .el-textarea > textarea {
-      background-color: var(--s-color-utility-surface);
+
+    &__icon {
+      line-height: 1;
+      width: $input-icon-width;
     }
-    .el-input > input,
-    .el-textarea > textarea {
-      border-color: var(--s-color-base-border-primary);
+
+    &__prefix {
+      z-index: 1;
+      left: $input-padding-left;
     }
-  }
-  &.s-disabled {
-    .s-placeholder,
-    .el-input > input,
-    .el-textarea > textarea {
-      color: var(--s-color-base-content-quaternary);
-      background-color: var(--s-color-base-disabled);
+
+    &__suffix {
+      z-index: 1;
+      right: $input-padding-left;
     }
-    .el-input > input,
-    .el-textarea > textarea {
-      border-color: var(--s-color-base-disabled);
+
+    &--prefix {
+      .el-input__inner {
+        padding-left: $input-icon-width + $s-padding-input / 2;
+      }
     }
-  }
-  &:not(.s-textarea) {
-    .s-placeholder {
-      background-color: transparent !important;
+    &--suffix {
+      .el-input__inner {
+        padding-right: $input-icon-width + $s-padding-input / 2;
+      }
     }
   }
   .el-input > input {
@@ -132,17 +149,7 @@
       animation-name: onAutoFillCancel;
     }
   }
-  .s-placeholder + .el-input {
-    > input {
-      padding-top: 12px;
-    }
-    .el-input__validateIcon {
-      padding-top: 11px;
-    }
-  }
-  .s-placeholder + .el-textarea > textarea {
-    padding-top: 24px;
-  }
+
   &.s-text-file {
     .el-input > input {
       padding-right: 56px;
diff --git a/src/styles/neumorphism/index.scss b/src/styles/neumorphism/index.scss
index 68b676ec..6f709c44 100644
--- a/src/styles/neumorphism/index.scss
+++ b/src/styles/neumorphism/index.scss
@@ -1,2 +1,3 @@
 @import "./variables";
 @import "./button.scss";
+@import "./input.scss";
diff --git a/src/styles/neumorphism/input.scss b/src/styles/neumorphism/input.scss
new file mode 100644
index 00000000..aba7cd3e
--- /dev/null
+++ b/src/styles/neumorphism/input.scss
@@ -0,0 +1,41 @@
+$neu-input-border-width: 0 !default;
+$neu-input-background: var(--neu-color-base-background);
+$neu-input-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.02), 1px 1px 3px rgba(0, 0, 0, 0.1), inset 1px 1px 2px rgba(255, 255, 255, 0.8);
+$neu-input-box-shadow-active: 1px 1px 2px #FFFFFF, inset 1px 1px 2px rgba(0, 0, 0, 0.1);
+$neu-input-color: var(--neu-color-base-content-primary);
+$neu-input-color-disabled: var(--neu-color-base-content-secondary);
+$neu-input-placeholder-color: var(--neu-color-base-content-secondary);
+
+.s-input.neumorphic {
+  border-width: $neu-input-border-width;
+  box-shadow: $neu-input-box-shadow;
+  color: $neu-input-color;
+
+  .el-input, .el-textarea {
+    &__inner {
+      color: $neu-input-color;
+    }
+  }
+
+  & .s-placeholder {
+    color: $neu-input-placeholder-color;
+  }
+
+  &, &:hover, &.s-focused, &.s-disabled {
+    background: $neu-input-background;
+  }
+
+  &.s-focused, &.s-disabled {
+    box-shadow: $neu-input-box-shadow-active;
+  }
+
+  &.s-disabled {
+    .s-placeholder {
+      color: $neu-input-placeholder-color;
+    }
+
+    .el-input__inner {
+      color: $neu-input-color-disabled;
+    }
+  }
+}

From c53e516a4f65dcc47226819143e2ee983a4c7bd5 Mon Sep 17 00:00:00 2001
From: Nikita-Polyakov <polyakov@soramitsu.co.jp>
Date: Mon, 31 May 2021 14:58:44 +0300
Subject: [PATCH 2/3] add neu input styles & refactoring

---
 src/components/Input/SInput.vue   | 77 ++++++++++++++++++-------------
 src/stories/SInput.stories.ts     | 19 +++++++-
 src/styles/input.scss             | 34 +++++++++++---
 src/styles/neumorphism/input.scss | 28 +++++++----
 4 files changed, 109 insertions(+), 49 deletions(-)

diff --git a/src/components/Input/SInput.vue b/src/components/Input/SInput.vue
index 304fd576..8b7f2e1e 100644
--- a/src/components/Input/SInput.vue
+++ b/src/components/Input/SInput.vue
@@ -3,38 +3,48 @@
     class="s-input"
     :class="computedClasses"
   >
-    <slot name="label">
-      <span v-if="value && !isMediumInput" class="s-placeholder">{{ placeholder }}</span>
-    </slot>
-    <el-input
-      ref="el-input"
-      :value="value"
-      :type="computedType"
-      :placeholder="placeholder"
-      :disabled="disabled"
-      :show-password="showPassword && isTextInput"
-      :readonly="readonly"
-      :show-word-limit="showTextLimit && isTextOrTextareaInput"
-      :maxlength="maxlength"
-      :minlength="minlength"
-      :autocomplete="autocomplete"
-      :name="name"
-      :max="max"
-      :min="min"
-      :form="form"
-      :label="label"
-      :accept="accept"
-      :tabindex="tabindex"
-      :prefix-icon="prefix"
-      :suffix-icon="suffix"
-      @input="handleInput"
-      @change="handleChange"
-      @blur="handleBlur"
-      @focus="handleFocus"
-      @paste.native="handlePaste"
-    >
-      <slot slot="suffix" name="suffix"></slot>
-    </el-input>
+    <slot name="top" />
+
+    <div class="s-input__content">
+      <slot name="left" />
+
+      <div class="s-input__input">
+        <span v-if="value && !isMediumInput && !$slots.top" class="s-placeholder">{{ placeholder }}</span>
+        <el-input
+          ref="el-input"
+          :value="value"
+          :type="computedType"
+          :placeholder="placeholder"
+          :disabled="disabled"
+          :show-password="showPassword && isTextInput"
+          :readonly="readonly"
+          :show-word-limit="showTextLimit && isTextOrTextareaInput"
+          :maxlength="maxlength"
+          :minlength="minlength"
+          :autocomplete="autocomplete"
+          :name="name"
+          :max="max"
+          :min="min"
+          :form="form"
+          :label="label"
+          :accept="accept"
+          :tabindex="tabindex"
+          :prefix-icon="prefix"
+          :suffix-icon="suffix"
+          @input="handleInput"
+          @change="handleChange"
+          @blur="handleBlur"
+          @focus="handleFocus"
+          @paste.native="handlePaste"
+        >
+          <slot slot="suffix" name="suffix"></slot>
+        </el-input>
+      </div>
+      <slot name="right" />
+    </div>
+
+    <slot name="bottom"/>
+
     <template v-if="type === InputType.TEXT_FILE">
       <s-icon name="file-file-upload-24" />
       <input :value="emptyValue" type="file" :accept="accept" @change="handleTextFileChange">
@@ -200,6 +210,9 @@ export default class SInput extends Mixins(BorderRadiusMixin, DesignSystemInject
     if (this.prefix) {
       cssClasses.push('s-input--prefix')
     }
+    if (this.suffix) {
+      cssClasses.push('s-input--suffix')
+    }
     return cssClasses
   }
 
diff --git a/src/stories/SInput.stories.ts b/src/stories/SInput.stories.ts
index a7935523..ff4267a3 100644
--- a/src/stories/SInput.stories.ts
+++ b/src/stories/SInput.stories.ts
@@ -29,7 +29,12 @@ export const configurable = () => ({
                :size="size"
                :prefix="prefix"
                :suffix="suffix"
-              />
+              >
+                <div v-if="top" slot="top">{{ top }}</div>
+                <div v-if="bottom" slot="bottom">{{ bottom }}</div>
+                <div v-if="left" slot="left">{{ left }}</div>
+                <div v-if="right" slot="right">{{ right }}</div>
+              </s-input>
             </s-design-system-provider>`,
   data: () => ({
     input: ''
@@ -38,6 +43,18 @@ export const configurable = () => ({
     designSystem: {
       default: select('Design System', Object.values(DesignSystemTypes), DesignSystemTypes.DEFAULT)
     },
+    top: {
+      default: text('Top slot content', '')
+    },
+    bottom: {
+      default: text('Bottom slot content', '')
+    },
+    left: {
+      default: text('Left slot content', '')
+    },
+    right: {
+      default: text('Right slot content', '')
+    },
     type: {
       default: select('Type', Object.values(InputType), InputType.TEXT)
     },
diff --git a/src/styles/input.scss b/src/styles/input.scss
index f77a0e0b..cf26b2a0 100644
--- a/src/styles/input.scss
+++ b/src/styles/input.scss
@@ -16,9 +16,7 @@ $input-padding-left: $s-padding-input - $input-border-width;
 
 .s-input {
   display: flex;
-  flex-flow: column nowrap;
-  justify-content: center;
-  align-items: flex-start;
+  flex-direction: column;
 
   background-color: var(--s-color-base-background);
   border-color: var(--s-color-base-background);
@@ -35,6 +33,17 @@ $input-padding-left: $s-padding-input - $input-border-width;
   @include input-border-radius("small", var(--s-border-radius-small));
   @include input-border-radius("mini", var(--s-border-radius-mini));
 
+  &__content {
+    display: flex;
+    align-items: center;
+    width: 100%;
+  }
+
+  &__input {
+    flex: 1;
+    position: relative;
+  }
+
   &.s-size-medium {
     min-height: $s-size-medium;
   }
@@ -48,7 +57,7 @@ $input-padding-left: $s-padding-input - $input-border-width;
     z-index: 1;
     pointer-events: none;
     position: absolute;
-    top: $s-padding-input / 2;
+    top: -3px;
 
     & + .el-input, & + .el-textarea {
       padding-top: $s-padding-input;
@@ -85,6 +94,12 @@ $input-padding-left: $s-padding-input - $input-border-width;
     }
   }
 
+  &--suffix:not(.s-textarea) {
+    .s-placeholder {
+      padding-right: $input-icon-width + $s-padding-input / 2;
+    }
+  }
+
   .el-input, .el-textarea {
     font-size: inherit;
     position: unset;
@@ -93,6 +108,13 @@ $input-padding-left: $s-padding-input - $input-border-width;
       background-color: transparent;
     }
 
+    &.is-disabled {
+      .el-input__inner {
+        background-color: transparent;
+        color: inherit;
+      }
+    }
+
     &__inner {
       height: auto;
       line-height: 1.5;
@@ -115,12 +137,12 @@ $input-padding-left: $s-padding-input - $input-border-width;
 
     &__prefix {
       z-index: 1;
-      left: $input-padding-left;
+      left: 0;
     }
 
     &__suffix {
       z-index: 1;
-      right: $input-padding-left;
+      right: 0;
     }
 
     &--prefix {
diff --git a/src/styles/neumorphism/input.scss b/src/styles/neumorphism/input.scss
index aba7cd3e..ae590da6 100644
--- a/src/styles/neumorphism/input.scss
+++ b/src/styles/neumorphism/input.scss
@@ -1,24 +1,34 @@
 $neu-input-border-width: 0 !default;
-$neu-input-background: var(--neu-color-base-background);
-$neu-input-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.02), 1px 1px 3px rgba(0, 0, 0, 0.1), inset 1px 1px 2px rgba(255, 255, 255, 0.8);
-$neu-input-box-shadow-active: 1px 1px 2px #FFFFFF, inset 1px 1px 2px rgba(0, 0, 0, 0.1);
-$neu-input-color: var(--neu-color-base-content-primary);
-$neu-input-color-disabled: var(--neu-color-base-content-secondary);
-$neu-input-placeholder-color: var(--neu-color-base-content-secondary);
+$neu-input-background: var(--neu-color-base-background) !default;
+$neu-input-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.02), 1px 1px 3px rgba(0, 0, 0, 0.1), inset 1px 1px 2px rgba(255, 255, 255, 0.8) !default;
+$neu-input-box-shadow-active: 1px 1px 2px #FFFFFF, inset 1px 1px 2px rgba(0, 0, 0, 0.1) !default;
+$neu-input-color: var(--neu-color-base-content-primary) !default;
+$neu-input-color-disabled: var(--neu-color-base-content-secondary) !default;
+$neu-input-placeholder-color: var(--neu-color-base-content-secondary) !default;
+$neu-input-placeholder-offset: -2px !default;
+$neu-input-padding: 8px 16px !default;
 
 .s-input.neumorphic {
   border-width: $neu-input-border-width;
   box-shadow: $neu-input-box-shadow;
   color: $neu-input-color;
+  padding: $neu-input-padding;
 
   .el-input, .el-textarea {
     &__inner {
       color: $neu-input-color;
     }
+
+    &.is-disabled {
+      .el-input__inner {
+        background-color: transparent;
+      }
+    }
   }
 
   & .s-placeholder {
     color: $neu-input-placeholder-color;
+    top: $neu-input-placeholder-offset;
   }
 
   &, &:hover, &.s-focused, &.s-disabled {
@@ -30,12 +40,10 @@ $neu-input-placeholder-color: var(--neu-color-base-content-secondary);
   }
 
   &.s-disabled {
+    color: $neu-input-color-disabled;
+
     .s-placeholder {
       color: $neu-input-placeholder-color;
     }
-
-    .el-input__inner {
-      color: $neu-input-color-disabled;
-    }
   }
 }

From b7f43deb6f947ebad371b9804d435501396c3782 Mon Sep 17 00:00:00 2001
From: Nikita-Polyakov <polyakov@soramitsu.co.jp>
Date: Mon, 31 May 2021 15:05:45 +0300
Subject: [PATCH 3/3] fix file input

---
 src/components/Input/SInput.vue | 9 ++++-----
 src/styles/input.scss           | 9 +++++----
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/Input/SInput.vue b/src/components/Input/SInput.vue
index 8b7f2e1e..9efb076e 100644
--- a/src/components/Input/SInput.vue
+++ b/src/components/Input/SInput.vue
@@ -39,16 +39,15 @@
         >
           <slot slot="suffix" name="suffix"></slot>
         </el-input>
+        <template v-if="type === InputType.TEXT_FILE">
+          <s-icon name="file-file-upload-24" />
+          <input :value="emptyValue" type="file" :accept="accept" @change="handleTextFileChange">
+        </template>
       </div>
       <slot name="right" />
     </div>
 
     <slot name="bottom"/>
-
-    <template v-if="type === InputType.TEXT_FILE">
-      <s-icon name="file-file-upload-24" />
-      <input :value="emptyValue" type="file" :accept="accept" @change="handleTextFileChange">
-    </template>
   </div>
 </template>
 
diff --git a/src/styles/input.scss b/src/styles/input.scss
index cf26b2a0..626971f0 100644
--- a/src/styles/input.scss
+++ b/src/styles/input.scss
@@ -17,6 +17,7 @@ $input-padding-left: $s-padding-input - $input-border-width;
 .s-input {
   display: flex;
   flex-direction: column;
+  justify-content: center;
 
   background-color: var(--s-color-base-background);
   border-color: var(--s-color-base-background);
@@ -177,11 +178,11 @@ $input-padding-left: $s-padding-input - $input-border-width;
       padding-right: 56px;
     }
     .s-icon-file-file-upload-24 {
-      top: 16px;
-      right: 16px;
+      right: 0;
       font-size: var(--s-icon-font-size-big);
-      z-index: 1;
+      z-index: 2;
       position: absolute;
+      cursor: pointer;
       + input {
         cursor: pointer;
         position: absolute;
@@ -190,7 +191,7 @@ $input-padding-left: $s-padding-input - $input-border-width;
         right: 0;
         width: 56px;
         height: 100%;
-        z-index: 2;
+        z-index: 1;
       }
     }
   }