diff --git a/styleguide/src/system/components/data-input/shared/input.scss b/styleguide/src/system/components/data-input/shared/input.scss index b0f30f5db..8d7eb59fe 100755 --- 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,57 +12,57 @@ 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; opacity: $opacity-disabled; cursor: not-allowed; } - + .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; @@ -76,7 +76,7 @@ color: $text-color-softer; transition: color $duration-short $ease-out; pointer-events: none; - + .ds-input-has-focus & { color: $text-color-base; } @@ -89,15 +89,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; } @@ -106,7 +106,7 @@ padding-left: $input-height-large; } } - + .#{$class}-has-icon-right { padding-right: $input-height; @@ -117,5 +117,5 @@ .ds-input-size-large & { padding-right: $input-height-large; } - } + } }