@ldmjs/ui 1.0.90 → 2.0.0-beta.1

package/dist/scss/_inputs.scss

@@ -1,201 +1,996 @@
-.small-input {
-  .v-text-field__prefix {
-    min-height: var(--input-height);
-    padding: 0 4px 0 8px;
-    opacity: 1 !important;
+@use "sass:selector";
+@use "sass:list";
+@use "sass:map";
+@use "utils";
 
-    .v-text-field__prefix__text {
-      margin: 0;
+$input-s: 32px;
+$input-m: 40px;
+$input-l: 48px;
+
+:root {
+  --input-s: #{$input-s};
+  --input-m: #{$input-m};
+  --input-l: #{$input-l};
+}
+
+$sizearray: (
+  '--x-small': (
+    // input height
+    $input-s,
+    // font-size
+    var(--text-body-s),
+    // dropdown list item padding
+    6px 12px,
+    // dropdown list title font size
+    var(--text-body-s),
+    // dropdown list subtitle font size
+    var(--text-body),
+    // dropdown list subtitle margin top
+    0
+  ),
+  '--small': (
+    $input-m,
+    var(--text-body-m),
+    8px 12px,
+    var(--text-body-m),
+    var(--text-body),
+    4px
+  ),
+  '--large': (
+    $input-l,
+    var(--text-body-l),
+    12px 20px,
+    var(--text-body-l),
+    var(--text-body-s),
+    4px
+  ),
+);
+
+$input-border-color-default: var(--grey-l-4);
+$input-border-color-hover: var(--grey);
+$input-disabled-color: var(--grey-l-2);
+$input-disabled-background-color: var(--grey-l-6);
+
+$colors: (
+  "grey": ("default": $input-border-color-default, "hover": $input-border-color-hover),
+  "success": ("default": var(--success-d-1), "hover": var(--success-d-1)),
+  "error": ("default": var(--error), "hover": var(--error)),
+);
+
+:root {
+  --input-height: #{$input-s};
+  --input-height-m: #{$input-m};
+  --input-height-l: #{$input-l};
+  --input-border-color-default: #{$input-border-color-default};
+  --input-border-color-hover: #{$input-border-color-hover};
+  --input-disabled-color: #{$input-disabled-color};
+  --input-disabled-background-color: #{$input-disabled-background-color};
+}
+
+@mixin inputsize() {
+  $parent: utils.getParent(&);
+
+  @at-root {
+    @each $s, $values in $sizearray {
+
+      &#{utils.getSelector($parent, $s)} {
+        $size: list.nth($values, 1);
+        $font: list.nth($values, 2);
+
+        .v-field {
+          min-height: $size;
+
+          .v-field__input {
+            min-height: $size;
+            font-size: $font;
+            padding-top: 3px;
+            padding-bottom: 3px;
+          }
+
+          @if $parent == '.ld-edit-text' {
+            .v-field__input {
+              height: $size;
+              max-height: $size;
+            }
+          }
+
+          .v-text-field__prefix,
+          .v-text-field__suffix {
+            min-height: $size;
+          }
+        }
+
+        .ld-label {
+          height: $size;
+          &-content {
+            font-size: $font;
+          }
+        }
+
+        .v-input__details {
+          .v-messages {
+            font-size: calc($font - 2px);
+            line-height: calc($font - 2px + 6px);
+          }
+        }
+
+        #{utils.getSelector($parent, '-help')} {
+          display: flex;
+          align-items: center;
+          margin-left: 8px;
+          height: $size;
+        }
+      }
     }
+  }
+}
 
-    & + input.v-field__input {
-      padding-left: 0px !important;
+@mixin dropdownlistsize() {
+  @at-root {
+    @each $size, $values in $sizearray {
+      $p: list.nth($values, 3);
+      $f: list.nth($values, 4);
+      $s: list.nth($values, 5);
+      $mt: list.nth($values, 6);
+
+      &#{utils.getSelector('.ld-dropdown-list', $size)} {
+        .v-list-item {
+          padding: $p !important;
+          .v-list-item__content {
+            .v-list-item-title {
+              font-size: $f;
+              line-height: calc($f + 4px);
+            }
+            .v-list-item-subtitle {
+              font-size: $s;
+              line-height: calc($s + 4px);
+              margin-top: $mt;
+            }
+          }
+        }
+      }
     }
   }
 
-  .v-text-field__suffix {
-    min-height: var(--input-height);
-    padding: 0 8px 0 4px;
-    opacity: 1 !important;
+}
+
+@mixin vfieldoutline($color) {
+  .v-field__outline {
+    border-radius: var(--border-radius);
+    .v-field__outline__start,
+    .v-field__outline__end {
+      border-color: $color !important;
+      opacity: 1 !important;
+      transition: all 0.2s;
+    }
   }
+}
 
-  &.v-field {
+@mixin vfield {
+  .v-field {
+    border-radius: var(--border-radius);
     background-color: var(--white);
+    overflow: hidden;
+
+    .v-field__input {
+      font-family: var(--regular);
+      color: var(--text);
+      padding-inline: unset;
+      padding-top: unset;
+      padding-bottom: unset;
+      padding: 0 12px;
+    }
+
+    .v-text-field__prefix {
+      padding: 0 0 0 12px;
+      opacity: 1 !important;
+
+      .v-text-field__prefix__text {
+        font-family: var(--regular);
+        font-size: var(--text-body-s);
+        color: var(--text);
+      }
+    }
+
+    .v-text-field__suffix {
+      padding: 0 12px 0 0;
+      opacity: 1 !important;
+
+      .v-text-field__suffix__text {
+        font-family: var(--regular);
+        font-size: var(--text-body-s);
+        color: var(--text);
+      }
+    }
+
+    .v-field__prepend-inner {
+      color: var(--grey-d-1);
+    }
+
+    .v-field__append-inner {
+      padding-right: 16px;
+      color: var(--grey-d-1);
+    }
   }
+}
+
+@mixin vfieldborder() {
+  $parent: utils.getParent(&);
+
+  @at-root {
+    $index: 0;
+    @each $color, $values in $colors {
+      $index: $index + 1;
+      $prefix: #{selector.append('--', $color)};
 
-  & .v-field__input {
-    min-height: var(--input-height);
+
+      &#{utils.getSelector($parent, $prefix)} {
+        $default: '';
+        $hover : '';
+        @each $key, $value in $values {
+          @if $key == "default" {
+            $default: $value;
+          }
+          @if $key == "hover" {
+            $hover: $value;
+          }
+        }
+
+        .v-input {
+          .v-field.v-field--variant-outlined {
+            @include vfieldoutline($default);
+          }
+
+          .v-input__append {
+            &:after {
+              border-color: $default;
+              border-width: 1px;
+            }
+          }
+
+          &:hover {
+            .v-field.v-field--variant-outlined {
+              @include vfieldoutline($hover);
+            }
+
+            .v-input__append {
+              &:after {
+                border-color: $hover;
+                border-width: 1px;
+              }
+            }
+          }
+
+          &.v-input--focused {
+            .v-field.v-field--variant-outlined {
+              @include vfieldoutline(var(--focus));
+            }
+
+            .v-input__append {
+              &:after {
+                border-color: var(--focus);
+                border-width: 2px;
+              }
+            }
+          }
+        }
+      }
+    }
   }
+}
 
-  &.password {
-    .v-field__input {
-      font-size: calc(var(--font-size) + 6px) !important;
+@mixin vfielddisabled() {
+  .v-input--disabled {
+    .v-field.v-field--variant-outlined.v-field--disabled {
+      background-color: var(--input-disabled-background-color);
+
+      .v-field__input {
+        color: var(--input-disabled-color);
+      }
+
+      .v-field__prepend-inner {
+        color: var(--input-disabled-color);
+      }
+
+      @include vfieldoutline(var(--input-disabled-background-color));
+
+      .v-text-field__prefix__text,
+      .v-text-field__suffix__text {
+        color: var(--input-disabled-color);
+      }
     }
   }
+}
 
-  &:not(.v-combobox):not(.v-select) {
-    .v-field__input {
-      height: var(--input-height);
+@mixin inputdetails() {
+  .v-input__details {
+    position: relative;
+    padding: 0 !important;
+    margin: 6px 0 0 0 !important;
+    z-index: 1;
+    height: 20px;
+    min-height: 20px;
+    align-items: center;
+
+    .v-messages {
+      color: var(--grey-d-1);
     }
   }
+}
+
+@mixin inputloader() {
+  $parent: utils.getParent(&);
+  $selector: utils.getSelector($parent, '-loader');
 
-  .v-field-label:not(.v-field-label--floating) {
-    transform: unset !important;
+  #{$selector} {
+    position: relative;
+    height: 3px;
+    width: 100%;
+    background-color: var(--primary);
+
+    &:after {
+      content: '';
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 30%;
+      height: 3px;
+      background-color: var(--primary-l-3);
+      border-radius: 3px;
+      animation: slideOut 0.8s linear infinite;
+    }
   }
 }
 
-body {
-  .v-field {
-    font-size: var(--font-size) !important;
-    background-color: var(--white);
+@mixin inputnoborder($direction) {
+  $outlinesuffix: '';
+  @if $direction == 'right' {
+    $outlinesuffix: 'end';
+  } @else {
+    $outlinesuffix: 'start';
   }
-  .v-label.v-field-label {
-    color: var(--grey);
-    top: unset !important;
-    &:not(.v-field-label--floating) {
-      height: 100%;
-      font-size: inherit !important;
+
+  .v-input {
+    .v-field.v-field--variant-outlined {
+      .v-field__outline__#{$outlinesuffix} {
+        #{selector.append('border-', $direction, '-width')}: 0;
+      }
     }
   }
-  .v-field.v-field--disabled {
-    opacity: 1;
+}
 
-    .v-text-field__prefix,
-    .v-text-field__suffix {
-      color: var(--grey);
+@mixin inputborder($direction, $size) {
+  $outlinesuffix: '';
+  @if $direction == 'right' {
+    $outlinesuffix: 'end';
+  } @else {
+    $outlinesuffix: 'start';
+  }
+
+  .v-field.v-field--variant-outlined {
+    .v-field__outline__#{$outlinesuffix} {
+      #{selector.append('border-', $direction, '-width')}: $size;
     }
   }
-  .v-field-label--floating {
-    color: var(--grey);
-    font-size: var(--body-0-font-size) !important;
+}
+
+@mixin inputnoborderradius($direction) {
+  $outlinesuffix: '';
+  @if $direction == 'right' {
+    $outlinesuffix: 'end';
+  } @else {
+    $outlinesuffix: 'start';
+  }
+
+  %noborderradius {
+    #{selector.append('border-top-', $direction, '-radius')}:  0 !important;
+    #{selector.append('border-bottom-', $direction, '-radius')}:  0 !important;
   }
-  .v-field--variant-outlined {
-    .v-field__outline__start,
-    .v-field__outline__end {
-      border-color: var(--grey-l-5);
-      opacity: 1;
+
+  .v-input {
+    .v-field {
+      @extend %noborderradius;
+    }
+    .v-field.v-field--variant-outlined {
+      .v-field__outline {
+        @extend %noborderradius;
+      }
+
+      .v-field__outline__#{$outlinesuffix} {
+        @extend %noborderradius;
+      }
     }
   }
-  .v-label.v-label--clickable {
-    font-size: var(--font-size);
-    color: var(--text);
-    opacity: 1;
-    letter-spacing: 0;
+}
+
+@mixin spinbutton($el) {
+  $selector: selector.append($el, '--active-menu');
+
+  .#{$selector} {
+    .v-field {
+      .v-field__append-inner {
+        svg {
+          transform: rotate(180deg);
+        }
+      }
+    }
   }
+}
+
+%custom-edit {
+  padding: 0 !important;
+}
+
+// ---------------------
+// ------ body
+// ---------------------
+
+body {
+  .v-field {
+    .v-field__input {
+      font-family: var(--regular);
+    }
+
+    &.v-field--appended {
+      padding-inline-end: 0 !important;
+    }
+
+    .v-field__append-inner {
+      .v-btn--icon {
+        color: var(--grey-d-1) !important;
+
+        svg {
+          color: var(--grey-d-1) !important;
+        }
+      }
+    }
+  }
+
   .v-input {
-    &.v-textarea {
-      .v-field {
-        padding-right: 0px;
+    .v-input__details {
+      .v-messages {
+        font-family: var(--regular);
       }
+    }
+  }
+
+  .ld-edit-text {
+    @extend %custom-edit;
+
+    @include inputsize();
+
+    @include vfield();
+
+    @include vfieldborder();
+
+    @include vfielddisabled();
+
+    .ld-edit-text--type-password {
       .v-field__input {
-        padding: 7px 6px;
+        font-size: calc(var(--font-size) + 6px) !important;
       }
     }
-    &:not(.v-textarea) {
-      .v-field__input {
-        min-height: var(--input-height) !important;
-        padding: 4px 6px;
+
+    @include inputdetails();
+  }
+
+  .ld-edit-masked-text {
+    @extend %custom-edit;
+
+    @include inputsize();
+
+    @include vfield();
+
+    @include vfieldborder();
+
+    @include vfielddisabled();
+
+    @include inputdetails();
+  }
+
+  .ld-datepicker {
+    @extend %custom-edit;
+
+    @include inputsize();
+
+    @include vfield();
+
+    @include vfieldborder();
+
+    @include vfielddisabled();
+
+    @include inputdetails();
+
+    .ld-datepicker-date-field {
+      position: relative;
+      display: flex;
+      align-items: center;
+      flex-basis: 100%;
+    }
+
+    .ld-datepicker-time-field {
+      position: relative;
+      display: flex;
+      align-items: center;
+      flex-basis: 100%;
+    }
+
+    &:not(.ld-datepicker--dateonly) {
+      .ld-datepicker-date-field {
+        @include inputnoborderradius('right');
+
+        @include inputnoborder('right');
+
+        .v-input {
+          &:hover {
+            @include inputborder('right', 1px);
+          }
+
+          &.v-input--focused {
+            @include inputborder('right', 2px);
+          }
+        }
       }
-      &.v-text-field--plain-underlined {
-        .v-field__input {
-          padding: 0;
+      .ld-datepicker-time-field {
+        @include inputnoborderradius('left');
+
+        .v-input {
+          &:hover {
+            @include inputborder('left', 1px);
+          }
+
+          &.v-input--focused {
+            @include inputborder('left', 2px);
+          }
         }
       }
     }
-    // &:not(.v-textarea):not(.v-select):not(.v-combobox) {
-    //   max-height: var(--input-max-height);
-    // }
-    &:not(.v-select) .v-field__input {
-      input {
-        height: 100%;
+  }
+
+  .ld-timepicker {
+    @extend %custom-edit;
+
+    @include inputsize();
+
+    @include vfield();
+
+    @include vfieldborder();
+
+    @include vfielddisabled();
+
+    @include inputdetails();
+  }
+
+  .ld-select {
+    @extend %custom-edit;
+
+    padding: 0 !important;
+
+    @include inputsize();
+
+    @include vfield();
+
+    @include vfieldborder();
+
+    @include vfielddisabled();
+
+    @include inputdetails();
+
+    @include spinbutton('v-select');
+  }
+
+  .ld-edit-list-box {
+    @extend %custom-edit;
+
+    @include inputsize();
+
+    @include vfield();
+
+    @include vfieldborder();
+
+    @include vfielddisabled();
+
+    @include inputdetails();
+  }
+
+  .ld-combobox {
+    @extend %custom-edit;
+
+    @include inputsize();
+
+    @include vfield();
+
+    @include vfieldborder();
+
+    @include vfielddisabled();
+
+    @include inputdetails();
+
+    @include inputloader();
+
+    @include spinbutton('v-combobox');
+  }
+
+  .ld-select-list-box {
+    @extend %custom-edit;
+
+    @include inputsize();
+
+    @include vfield();
+
+    @include vfieldborder();
+
+    @include vfielddisabled();
+
+    @include inputdetails();
+
+    @include inputloader();
+
+    @include inputnoborderradius('right');
+
+    @include inputnoborder('right');
+
+    .v-input {
+      .v-input__append {
+        position: relative;
+        margin-inline-start: unset;
+        padding-left: 8px;
+        padding-right: 12px;
+
+        &:after {
+          content: '';
+          display: block;
+          height: 100%;
+          width: 100%;
+          position: absolute;
+          top: 0;
+          left: 0;
+          border-style: solid;
+          border-left: none;
+          border-top-right-radius: var(--border-radius);
+          border-bottom-right-radius: var(--border-radius);
+          z-index: 0;
+          transition: all 0.2s;
+        }
+
+        button {
+          position: relative;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          height: 100%;
+          width: 20px;
+          z-index: 1;
+        }
+      }
+
+      &.v-input--disabled {
+        .v-input__append {
+          &:after {
+            border: none;
+            background-color: var(--grey-l-6);
+          }
+        }
       }
     }
-    &.v-text-field input {
-      margin-top: 0;
-      margin-bottom: 0;
+  }
+
+  .ld-textarea {
+    @extend %custom-edit;
+
+    $parent: '.ld-textarea';
+
+    $props: (
+      '--x-small': (
+        // input padding
+        6px 12px,
+        // height
+        72px,
+      ),
+      '--small': (
+        10px 16px,
+        80px,
+      ),
+      '--large': (
+        12px 16px,
+        96px,
+      )
+    );
+
+    @each $s, $values in $sizearray {
+      $size: list.nth($values, 1);
+      $font: list.nth($values, 2);
+
+      $propsValues: map.get($props, $s);
+
+      $p: list.nth($propsValues, 1);
+
+      &#{utils.getSelector($parent, $s)} {
+        .v-field {
+          .v-field__input {
+            font-size: $font;
+            line-height: calc($font + 6px);
+            padding: $p;;
+          }
+        }
+
+        .ld-label {
+          &-content {
+            font-size: $font;
+          }
+        }
+
+        .ld-textarea-help {
+          height: $size;
+          display: flex;
+          align-items: center;
+          margin-left: 8px;
+        }
+
+        &.ld-textarea--label-on-top {
+          .ld-label {
+            height: $size;
+          }
+        }
+
+        &.ld-textarea--clearable {
+          .v-field {
+            .v-field__input {
+              $px: list.nth($p, 2);
+              padding-right: calc($px + var(--icon-height));
+            }
+          }
+        }
+
+        .v-input__details {
+          .v-messages {
+            font-size: calc($font - 2px);
+            line-height: calc($font - 2px + 6px);
+          }
+        }
+      }
     }
-    &.v-input--disabled {
-      .v-field {
-        background-color: var(--grey-l-6);
-        color: var(--grey);
+
+    @include vfieldborder();
+
+    @include vfielddisabled();
+
+    @include inputdetails();
+
+    .v-field {
+      position: relative;
+
+      .v-field__clearable {
+        position: absolute;
+        top: 0;
+        right: 0;
+        padding-top: 0 !important;
       }
-      .v-input__details {
-        opacity: 1;
+    }
+  }
+
+  .ld-text-markup {
+    @extend %custom-edit;
+
+    .ld-label {
+      &-content {
+        font-size: var(--text-body-s);
       }
-      .v-input__append {
-        opacity: 1;
+    }
+
+    &--focused {
+      .md-editor-content {
+        &:after {
+          border: 2px solid var(--focus) !important;
+        }
       }
     }
-    &--horizontal {
-      .v-input__append {
-        margin-inline-start: 0;
+
+    &--disabled {
+      .ld-text-markup-preview {
+        background-color: var(--input-disabled-background-color);
+        border-color: var(--input-disabled-background-color);
+        color: var(--input-disabled-color);
       }
     }
-    .v-input__append {
-      padding-top: 0;
+
+    &-preview {
+      font-size: var(--text-body-s);
+      border: 1px solid var(--input-border-color-default);
+      border-radius: var(--border-radius);
+      padding: 12px 16px !important;
+
+      h1 {
+        font-size: 28px;
+      }
+      h2 {
+        font-size: 24px;
+      }
+      h3 {
+        font-size: 20px;
+      }
+      ul {
+        padding: 0 12px;
+        list-style: disc;
+        margin-bottom: 8px;
+      }
+      ol {
+        list-style: decimal;
+        padding: 0 12px;
+        margin-bottom: 8px;
+      }
+      p {
+        margin-bottom: 8px;
+      }
+      pre {
+        padding: 4px;
+      }
+      code {
+        background: none;
+        color: var(--text);
+        padding: 0;
+        font-size: 100%;
+      }
     }
 
-  }
-  .v-field__input {
-    display: flex;
-    align-items: center;
-    font-size: inherit !important;
-    opacity: 1;
-  }
-  .v-input__details {
-    padding: 0 !important;
-    margin: 0 !important;
-    z-index: 1;
-    height: 20px;
-    min-height: 20px;
-    align-items: center;
-    font-size: calc(var(--font-size) - 1px) !important;
+    @include inputdetails();
 
-    .v-messages {
-      font-size: calc(var(--font-size) - 1px) !important;
+    .v-input__details {
+      .v-messages {
+        font-size: var(--font-size);
+        line-height: calc(var(--font-size) + 6px);
+      }
     }
   }
-  .v-field--variant-outlined.v-field--focused .v-field__outline {
-    .v-field__outline__start {
-      border-top-width: 1px !important;
-      border-bottom-width: 1px !important;
-      border-inline-start-width: 1px !important;
-      border-color: var(--grey-l-4) !important;
-    }
-    .v-field__outline__end {
-      border-top-width: 1px !important;
-      border-bottom-width: 1px !important;
-      border-inline-end-width: 1px !important;
-      border-color: var(--grey-l-4) !important;
+
+  .v-select__content,
+  .v-combobox__content,
+  .v-autocomplete__content {
+    background-color: var(--white);
+    border-radius: var(--border-radius);
+    box-shadow: var(--shadow-l);
+
+    .v-list {
+      box-shadow: unset !important;
+
+      @include dropdownlistsize();
     }
   }
-  .v-select {
-    .v-select__selection {
-      margin: 0;
-      .v-select__selection-text {
-        display: inline-flex;
-        align-items: center;
-      }
+
+  .v-menu.ld-datepicker-menu {
+    .ld-datepicker-dropdown {
+      padding: 0 !important;
     }
   }
-  .v-autocomplete {
-    .v-field {
-      .v-text-field__prefix,
-      .v-text-field__suffix {
-        padding: 0 3px;
-        min-height: var(--input-height);
-        opacity: 1 !important;
+
+  .v-menu.ld-timepicker-menu {
+    .ld-timepicker-dropdown {
+      padding: 16px !important;
+      overflow: hidden;
+
+      .ld-timepicker-ampm {
+        display: flex;
+
+        .v-btn {
+          font-family: var(--regular);
+          font-size: var(--font-size);
+          flex: 1 1 auto;
+          height: var(--icon-height);
+          border: 2px solid var(--primary);
+          border-radius: 4px;
+          color: var(--text);
+          padding: 0 !important;
+
+          &.v-btn--active {
+            color: var(--white);
+            background-color: var(--primary);
+          }
+
+          &:first-child {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+          }
+
+          &:last-child {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+          }
+        }
+      }
+
+      .ld-timepicker-placeholder {
+        display: grid;
+        grid-template-columns: 1fr 3px 1fr;
+        color: var(--grey-d-1);
+        height: var(--icon-height);
+
+        & > div {
+          height: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+      }
+
+      .ld-timepicker-inputs {
+        display: grid;
+        grid-template-columns: 1fr 3px 1fr;
+        border: 1px solid var(--grey-l-5);
+        border-radius: var(--border-radius);
+
+        .ld-edit-text {
+          flex: 1 1 auto;
+        }
+
+        .v-field__input {
+          text-align: center;
+          padding: 0 !important;
+        }
+
+        .v-input {
+          .v-field.v-field--variant-outlined {
+            .v-field__outline__start {
+              border: none !important;
+            }
+            .v-field__outline__end {
+              border: none !important;
+            }
+          }
+        }
+      }
+
+      .ld-timepicker-options {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+
+        & > div {
+          max-height: 280px;
+          overflow-x: hidden;
+          overflow-y: auto;
+        }
+
+        .v-btn {
+          font-family: var(--regular);
+          color: var(--text) !important;
+
+          &:not(:last-child) {
+            margin-bottom: 4px;
+          }
+        }
       }
-    }
-    .v-autocomplete__selection {
-      height: unset;
     }
   }
 }
 
-input.disabled {
+input::placeholder {
+  color: var(--grey-d-1) !important;
+}
+
+input::-ms-input-placeholder { /* Для Microsoft Edge */
+  color: var(--grey-d-1) !important;
+}
+
+input::-webkit-input-placeholder { /* Для WebKit-браузеров (Chrome, Safari) */
+  color: var(--grey-d-1) !important;
+}
+
+input:-moz-placeholder { /* Для Firefox 19+ */
+  color: var(--grey-d-1) !important;
+}
+
+input.disabled,
+input[disabled] {
   background-color: var(--grey-l-6);
-  color: var(--grey);
+  color: var(--grey-l-2);
+}
+
+input {
+  outline: none;
+}
+
+input:focus {
+  outline: none;
 }
 
 input:-webkit-autofill,
@@ -208,8 +1003,3 @@ select:-webkit-autofill:focus {
   -webkit-background-clip: text;
   background-clip: text;
 }
-
-::-webkit-input-placeholder {color: var(--grey-l-2)}
-::-moz-placeholder {color: var(--grey-l-2)}
-input:-moz-placeholder {color: var(--grey-l-2)}
-input:-ms-input-placeholder {color: var(--grey-l-2)}