Final cleanup
This commit is contained in:
parent
7a077f3281
commit
0b7dbd65ff
4 changed files with 39 additions and 33 deletions
32
resources/assets/styles/components/forms.css
Normal file
32
resources/assets/styles/components/forms.css
Normal file
|
@ -0,0 +1,32 @@
|
|||
/**
|
||||
* Styles for the login form open input boxes. Label floats up above it when content
|
||||
* is input and then sinks back down into the field if left empty.
|
||||
*/
|
||||
.input-open {
|
||||
@apply .w-full .px-3 .relative;
|
||||
}
|
||||
|
||||
.input-open > .input {
|
||||
@apply .appearance-none .block .w-full .text-grey-darker .border-b-2 .border-grey-light .py-3 .mb-3;
|
||||
|
||||
&:focus {
|
||||
@apply .border-blue;
|
||||
outline: 0;
|
||||
transition: border 500ms ease-out;
|
||||
}
|
||||
|
||||
&:focus + label, &:valid + label, &.has-content + label {
|
||||
@apply .text-grey-darker .px-0 .cursor-pointer;
|
||||
transform:translateY(-26px)
|
||||
}
|
||||
|
||||
&:required {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.input-open > label {
|
||||
@apply .block .uppercase .tracking-wide .text-grey .text-xs .mb-2 .absolute;
|
||||
top: 14px;
|
||||
transition: transform 200ms ease-out;
|
||||
}
|
Reference in a new issue