Skip to content

Instantly share code, notes, and snippets.

@richardvenneman
Created October 22, 2015 10:13
Show Gist options
  • Save richardvenneman/cf64188aa645208c65c8 to your computer and use it in GitHub Desktop.
Save richardvenneman/cf64188aa645208c65c8 to your computer and use it in GitHub Desktop.
Floatl styling
.floatl--focused .floatl__label {
color: hsl(201, 73%, 54%);
}
.floatl--active {
.floatl__input {
padding: 1.4em 1em .6em 1em;
}
}
.floatl__label {
top: .25em;
left: em(1, em(12));
padding: .8em .3em .3em .3em;
font-size: em(12);
font-weight: $fw-semi-bold;
color: hsl(0, 0%, 55%);
}
.floatl__input {
display: block;
margin-bottom: 1em;
width: 100%;
padding: 1em;
font-size: 1.1em;
font-weight: $fw-regular;
color: hsl(0, 0%, 30%);
border-color: hsl(0, 0%, 94%);
background-color: hsl(0, 0%, 99%);
border-radius: 4px;
&::selection {
background-color: hsl(201, 73%, 54%);
}
&:focus {
border-color: hsl(201, 73%, 54%);
}
@include placeholder {
color: hsl(195, 4%, 78%);
}
}
input.floatl__input {
height: auto;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment