diff --git a/styleguide/src/system/components/data-input/shared/input.scss b/styleguide/src/system/components/data-input/shared/input.scss index 1c14f754c..c2d0df638 100644 --- a/styleguide/src/system/components/data-input/shared/input.scss +++ b/styleguide/src/system/components/data-input/shared/input.scss @@ -2,7 +2,7 @@ .#{$class}-wrap { position: relative; } - + .#{$class} { appearance: none; box-sizing: border-box; @@ -12,25 +12,25 @@ width: 100%; padding: $input-padding-vertical $space-x-small; height: $input-height; - + color: $text-color-base; background: $background-color-base; - + border: $input-border-size solid $border-color-base; border-radius: $border-radius-base; outline: none; transition: all $duration-short $ease-out; - + &::placeholder { color: $text-color-disabled; } - + .ds-input-has-focus &, &:focus { border-color: $border-color-active; background: $background-color-base; } - + .ds-input-is-disabled &, &:disabled { color: $text-color-disabled; @@ -43,32 +43,32 @@ .ds-input-is-readonly & { pointer-events: none; } - + .ds-input-has-error & { border-color: $border-color-danger; } } - + .ds-input-size-small { font-size: $font-size-small; - + .#{$class} { font-size: $input-font-size-small; height: $input-height-small; padding: $input-padding-vertical-small $space-x-small; } } - + .ds-input-size-large { font-size: $font-size-large; - + .#{$class} { font-size: $input-font-size-large; height: $input-height-large; padding: $input-padding-vertical-large $space-x-small; } } - + .#{$class}-icon, .#{$class}-icon-right { position: absolute; @@ -82,7 +82,7 @@ color: $text-color-softer; transition: color $duration-short $ease-out; pointer-events: none; - + .ds-input-has-focus & { color: $text-color-base; } @@ -95,15 +95,15 @@ width: $input-height-large; } } - + .#{$class}-icon-right { right: 0; left: auto; } - + .#{$class}-has-icon { padding-left: $input-height; - + .ds-input-size-small & { padding-left: $input-height-small; } @@ -112,7 +112,7 @@ padding-left: $input-height-large; } } - + .#{$class}-has-icon-right { padding-right: $input-height; @@ -123,5 +123,5 @@ .ds-input-size-large & { padding-right: $input-height-large; } - } + } }