Skip to content

Instantly share code, notes, and snippets.

@floptwo
Last active May 14, 2020 04:28
Show Gist options
  • Save floptwo/1bbd4cbe53332fd233b92c411cd36c7c to your computer and use it in GitHub Desktop.
Save floptwo/1bbd4cbe53332fd233b92c411cd36c7c to your computer and use it in GitHub Desktop.
A SCSS (Sass) version of the Bootstrap 4 floating-labels.css from https://getbootstrap.com/docs/4.0/examples/floating-labels/
// A SCSS (Sass) version of the floating-labels.css from https://getbootstrap.com/docs/4.0/examples/floating-labels/
.form-label-group {
margin-bottom: 1rem;
position: relative;
& > input,
& > textarea,
& > label {
padding: #{$input-btn-padding-y} #{$input-btn-padding-x};
}
& > label {
border-radius: .25rem;
border: 1px solid transparent;
color: $body-color;
display: block;
left: 0;
line-height: $line-height-base;
margin-bottom: 0; /* Override default `<label>` margin */
pointer-events: none;
position: absolute;
top: 0;
transition: all .1s ease-in-out;
width: 100%;
}
& > input,
& > textarea {
&::-webkit-input-placeholder {
color: transparent;
}
&::-ms-input-placeholder {
color: transparent;
}
&::-moz-placeholder {
color: transparent;
}
&::-moz-placeholder {
color: transparent;
}
&::placeholder {
color: transparent;
}
&:not(:placeholder-shown) {
padding-bottom: calc(#{$input-btn-padding-y} / 3);
padding-top: calc(#{$input-btn-padding-y} + #{$input-btn-padding-y} * (2 / 3));
}
&:not(:placeholder-shown) ~ label {
color: $gray-600; // $input-color;
font-size: .8rem;
padding-bottom: calc(#{$input-btn-padding-y} / 3);
padding-top: calc(#{$input-btn-padding-y} / 3);
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment