Styling disabled input
This commit is contained in:
parent
e49803cb81
commit
c05a286f84
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user