Commander1024/lostplaces-frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Styling disabled input

Browse Source
This commit is contained in:
reverend 2020-07-31 23:12:06 +02:00
parent e49803cb81
commit c05a286f84
1 changed files with 25 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
components/01_Atoms/input/_input.scss
View File

@ -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{
@ -68,22 +48,29 @@
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;
}
~.LP-Input__Message{
visibility: hidden;
}
}
@media(max-width: $-viewport-extra-small){
.LP-Input{
.LP-Input__Label{
font-family: $-primary-sans-serif-font;
font-size: 18px;
color: $-secondary-color;
}
}
}