diff --git a/components/01_Atoms/input/_input.scss b/components/01_Atoms/input/_input.scss index e4856bf..33d1626 100644 --- a/components/01_Atoms/input/_input.scss +++ b/components/01_Atoms/input/_input.scss @@ -1,7 +1,3 @@ -.LP-Input:has( .LP-Input__Field:disabled){ - background-color: red; -} - .LP-Input{ $-margin-bottom: 30px; display: flex; @@ -21,27 +17,11 @@ background-color: $-secondary-background-color; border-radius: 3px 3px 0 0; } - - &:disabled{ - background-color: transparent; - border-bottom: 1px dashed $-secondary-color; - cursor: not-allowed; - - &:active{ - margin-bottom: $-margin-bottom; - border-radius: 0; - } - - ~.LP-Input__Message{ - visibility: hidden; - } - - } } .LP-Input__Label{ font-family: $-primary-sans-serif-font; - font-size: 18px; + font-size: 16px; } .LP-Input__Message{ @@ -67,23 +47,30 @@ .LP-Input__Message{ color: $-primary-accent-color; } - } -} + } + + &--disabled{ + .LP-Input__Field, .LP-Input__Field:disabled{ + background-color: transparent; + border-bottom: 1px dashed $-secondary-color; + cursor: not-allowed; + + label + &{ + color: red; + } -@media(max-width: $-viewport-small){ - .LP-Input{ - .LP-Input__Label{ - font-family: $-primary-sans-serif-font; - font-size: 2.5vw; - } - } -} + &:focus, &:active{ + margin-bottom: $-margin-bottom; + border-radius: 0; + } -@media(max-width: $-viewport-extra-small){ - .LP-Input{ - .LP-Input__Label{ - font-family: $-primary-sans-serif-font; - font-size: 18px; - } - } + ~.LP-Input__Message{ + visibility: hidden; + } + } + + .LP-Input__Label{ + color: $-secondary-color; + } + } } \ No newline at end of file