Sha256: 863d303e45e4085b1a64144501bcc3ac60cfc6293fe5d234814f5d19b06facef
Contents?: true
Size: 1.84 KB
Versions: 12
Compression:
Stored size: 1.84 KB
Contents
// Google Material Design inspired string input with floating label
.input.stringish:not(.filter_form_field) {
@include transform(translate3d(0, 0, 0));
@include transition(all 100ms $transition-timing);
border-bottom: 1px solid transparent;
margin-bottom: 2em;
padding-top: 2em;
position: relative;
label {
@include transform(scale(1.2) translateY(-$base-font-size));
@include transform-origin(0 0);
@include transition(font-size 180ms $transition-timing, transform 180ms $transition-timing);
color: $input-placeholder-color;
cursor: pointer;
display: block;
padding-top: 1em;
position: absolute;
width: 100%;
z-index: 2;
abbr {
@include transition(opacity 50ms $transition-timing);
border-bottom: 0;
color: $input-required-color;
margin-left: 2px;
opacity: 0.5;
}
}
input {
@include transition(all 100ms $transition-timing);
background: none;
border: 0;
border-bottom: 1px solid $input-border-color;
border-radius: 0;
color: $input-font-color;
font-size: 1.2em;
outline: none;
padding: 0 0 6px;
position: relative;
width: 100%;
z-index: 1;
}
&.error {
input {
border-bottom: 1px solid $error-color;
}
}
&.focused,
&.has-value {
label {
@include transform(scale(1) translateY(-2.8 * $base-font-size));
color: $label-font-color;
font-weight: 500;
abbr {
opacity: 0.8;
}
}
}
&.focused {
border-bottom: 1px solid $input-border-color-focused;
label {
color: $label-font-color-focused;
}
input {
border-bottom: 1px solid $input-border-color-focused;
color: $input-font-color-focused;
}
&.error {
border-bottom: 1px solid $error-color;
input {
border-bottom: 1px solid $error-color;
}
}
}
}
Version data entries
12 entries across 12 versions & 1 rubygems