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

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

@ -1,7 +1,3 @@
.LP-Input:has( .LP-Input__Field:disabled){
background-color: red;
}
.LP-Input{ .LP-Input{
$-margin-bottom: 30px; $-margin-bottom: 30px;
display: flex; display: flex;
@ -21,27 +17,11 @@
background-color: $-secondary-background-color; background-color: $-secondary-background-color;
border-radius: 3px 3px 0 0; 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{ .LP-Input__Label{
font-family: $-primary-sans-serif-font; font-family: $-primary-sans-serif-font;
font-size: 18px; font-size: 16px;
} }
.LP-Input__Message{ .LP-Input__Message{
@ -67,23 +47,30 @@
.LP-Input__Message{ .LP-Input__Message{
color: $-primary-accent-color; 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){ &:focus, &:active{
.LP-Input{ margin-bottom: $-margin-bottom;
.LP-Input__Label{ border-radius: 0;
font-family: $-primary-sans-serif-font; }
font-size: 2.5vw;
}
}
}
@media(max-width: $-viewport-extra-small){ ~.LP-Input__Message{
.LP-Input{ visibility: hidden;
.LP-Input__Label{ }
font-family: $-primary-sans-serif-font; }
font-size: 18px;
} .LP-Input__Label{
} color: $-secondary-color;
}
}
} }