// Forms basic
// Input + label wrapper styles
.md-form {
// Text inputs
input:not([type]),
input[type="text"]:not(.browser-default),
input[type="password"]:not(.browser-default),
input[type="email"]:not(.browser-default),
input[type="url"]:not(.browser-default),
input[type="time"]:not(.browser-default),
input[type="date"]:not(.browser-default),
input[type="datetime"]:not(.browser-default),
input[type="datetime-local"]:not(.browser-default),
input[type="tel"]:not(.browser-default),
input[type="number"]:not(.browser-default),
input[type="search"]:not(.browser-default),
input[type="phone"]:not(.browser-default),
input[type="search-md"],
textarea.md-textarea {
// General Styles
box-sizing: content-box;
background-color: transparent;
border: none;
border-bottom: 1px solid $input-border-color;
border-radius: 0;
outline: none;
box-shadow: none;
transition: $input-transition;
// Focused input style
&:focus:not([readonly]) {
border-bottom: 1px solid $input-md-focus-color;
box-shadow: 0 1px 0 0 $input-md-focus-color;
// Focused label style
+ label {
color: $input-md-focus-color;
}
}
// Form message shared styles
+ label::after {
position: absolute;
top: $input-label-after-top;
display: block;
content: "";
opacity: 0;
transition: $input-label-after-transition;
}
// Valid input style
&.valid,
&:focus.valid {
border-bottom: 1px solid $input-success-color;
box-shadow: 0 1px 0 0 $input-success-color;
}
&.valid + label:after,
&:focus.valid + label:after {
color: $input-success-color;
content: attr(data-success);
opacity: 1;
}
// Invalid input style
&.invalid,
&:focus.invalid {
border-bottom: 1px solid $input-error-color;
box-shadow: 0 1px 0 0 $input-error-color;
}
&.invalid + label:after,
&:focus.invalid + label:after {
color: $input-error-color;
content: attr(data-error);
opacity: 1;
}
&.form-control.valid + label:after,
&.form-control:focus.valid + label:after {
top: $input-label-valid-top;
}
&.form-control.invalid + label:after,
&.form-control:focus.invalid + label:after {
top: $input-label-invalid-top;
}
&.form-control-lg.valid + label:after,
&.form-control-lg:focus.valid + label:after {
top: $input-label-valid-top-lg;
}
&.form-control-lg.invalid + label:after,
&.form-control-lg:focus.invalid + label:after {
top: $input-label-invalid-top-lg;
}
&.form-control-sm.valid + label:after,
&.form-control-sm:focus.valid + label:after {
top: $input-label-valid-top-sm;
}
&.form-control-sm.invalid + label:after,
&.form-control-sm:focus.invalid + label:after {
top: $input-label-invalid-top-sm;
}
}
> input[type="date"]:not(.browser-default) + label {
transform-origin: 0 0;
}
> input[type]:-webkit-autofill:not(.browser-default):not([type="search"]) + label,
> input[type="time"]:not(.browser-default) + label {
font-size: .8rem;
transform: translateY(-25px);
transform-origin: 0 0;
}
.was-validated {
input[type="text"] {
&:valid {
+ label {
color: $input-success-color !important;
}
}
&:invalid {
+ label {
color: $input-error-color !important;
}
}
}
.form-control {
&:valid:focus {
box-shadow: 0 1px 0 0 $input-success-color !important;
}
&:valid {
border-color: $input-success-color !important;
}
&:invalid:focus {
box-shadow: 0 1px 0 0 $input-error-color !important;
}
&:invalid {
border-color: $input-error-color !important;
}
}
}
// Input with label
.form-control {
height: auto;
padding: $input-form-control-padding-top 0 $input-form-control-padding-bottom 0;
margin: 0 0 $input-form-control-margin-bottom 0;
background-color: transparent;
border-radius: 0;
&:focus {
box-shadow: none;
}
&:disabled,
&[readonly] {
background-color: transparent;
border-bottom: 1px solid $grey-lighten-1;
}
&.is-valid {
border-color: $input-success-color;
&:focus {
border-color: $input-success-color !important;
box-shadow: 0 1px 0 0 $input-success-color !important;
}
}
&.is-invalid {
border-color: $input-error-color;
&:focus {
border-color: $input-error-color !important;
box-shadow: 0 1px 0 0 $input-error-color !important;
}
}
&.is-valid,
&.is-invalid {
background-position: center right !important;
}
}
@include make-input($input-validate-mb, $input-label-font-size, $input-label-active-font-size, $input-prefix-top, $input-prefix-font-size, $input-prefix-margin-left, $input-prefix-width, $input-form-text-ml);
position: relative;
margin-top: $input-md-form-margin-top;
margin-bottom: $input-md-form-margin-bottom;
label {
position: absolute;
top: 0;
left: 0;
font-size: 1rem;
color: $input-label-color;
cursor: text;
transition: transform .2s ease-out, color .2s ease-out;
transform: translateY(12px);
transform-origin: 0% 100%;
&.active {
transform: translateY(-14px) scale(.8);
}
}
.prefix {
position: absolute;
transition: $input-prefix-transition;
&.active {
color: $input-md-focus-color;
}
}
&.form-lg {
@include make-input($input-validate-mb-lg, $input-label-font-size-lg, $input-label-active-font-size-lg, $input-prefix-top-lg, $input-prefix-font-size-lg, $input-prefix-margin-left-lg, $input-prefix-width-lg, $input-form-text-ml-lg);
}
&.form-sm {
@include make-input($input-validate-mb-sm, $input-label-font-size-sm, $input-label-active-font-size-sm, $input-prefix-top-sm, $input-prefix-font-size-sm, $input-prefix-margin-left-sm, $input-prefix-width-sm, $input-form-text-ml-sm);
}
// Textarea
textarea {
&.md-textarea {
padding: 0;
overflow-y: hidden;
& + label {
top: -0.6rem;
}
}
&.md-textarea-auto {
padding: 0;
padding-top: $textarea-padding;
& + label {
top: 0;
}
}
// Label color for textarea
// ~ label {
// &.active {
// color: $input-md-focus-color;
// }
// }
}
&.md-outline {
position: relative;
margin-top: 1.5rem;
margin-bottom: 1.5rem;
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="time"],
input[type="date"],
input[type="datetime-local"],
input[type="tel"],
input[type="number"],
input[type="search-md"],
input[type="search"],
textarea.md-textarea {
// General Styles
box-sizing: border-box;
background-color: transparent;
border: 1px solid #dadce0;
border-radius: 4px;
outline: none;
box-shadow: none;
transition: all .3s;
// Focused input style
&:focus:not([readonly]) {
border-color: #4285f4;
box-shadow: inset 0 0 0 1px #4285f4;
// Focused label style
+ label {
color: #4285f4;
}
}
// Valid input style
&.valid,
&:focus.valid {
border-color: $input-success-color;
box-shadow: inset 0 0 0 1px $input-success-color;
}
&:focus:not([readonly]).valid + label,
&.valid + label:after,
&:focus.valid + label:after {
color: $input-success-color;
content: attr(data-success);
opacity: 1;
}
// Invalid input style
&.invalid,
&:focus.invalid {
border-color: $input-error-color;
box-shadow: inset 0 0 0 1px $input-error-color;
}
&:focus:not([readonly]).invalid + label,
&.invalid + label:after,
&:focus.invalid + label:after {
color: $input-error-color;
content: attr(data-error);
opacity: 1;
}
&.form-control.valid + label:after,
&.form-control:focus.valid + label:after {
position: absolute;
top: 4rem;
left: 0;
}
&.form-control.invalid + label:after,
&.form-control:focus.invalid + label:after {
position: absolute;
top: 4rem;
left: 0;
}
}
> input[type]:-webkit-autofill:not(.browser-default):not([type="search"]) + label,
> input[type="time"]:not(.browser-default) + label {
left: 8px;
padding-right: 5px;
padding-left: 5px;
font-size: 1rem;
font-weight: 500;
background: #fff;
transform: translateY(-9px) scale(.8);
transform-origin: 0 0;
}
> input[type]:-webkit-autofill:not(.browser-default):not([type="search"]) + label.active,
> input[type="time"]:not(.browser-default) + label.active {
transform: translateY(-9px) scale(.8);
transform-origin: 0 0;
}
@-webkit-keyframes autofill {
to {
color: #495057;
background: transparent;
}
}
@keyframes autofill {
to {
color: #495057;
background: transparent;
}
}
input:-webkit-autofill {
-webkit-animation-name: autofill;
animation-name: autofill;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.form-control {
padding: .375rem .75rem;
}
label {
position: absolute;
top: 0;
left: 0;
padding-left: 10px;
font-size: 1rem;
color: #757575;
cursor: text;
transition: transform .2s ease-out, color .2s ease-out;
transform: translateY(9px);
transform-origin: 0% 100%;
&.active {
left: 8px;
padding-right: 5px;
padding-left: 5px;
font-weight: 500;
background: #fff;
transform: translateY(-13px) scale(.8);
}
}
&.form-lg {
.form-control {
&.form-control-lg {
padding: .5rem .725rem;
}
}
label {
font-size: 1.25rem;
transform: translateY(10px);
&.active {
font-size: 1.1rem;
transform: translateY(-14px) scale(.8);
}
}
.prefix {
top: .65rem;
font-size: 25px;
~ input,
~ textarea {
width: calc(100% - 2.2rem);
margin-left: 2.2rem;
}
~ label {
margin-left: 2.2rem;
}
~ .form-text {
margin-left: 2.3rem;
}
}
}
&.form-sm {
.form-control {
&.form-control-sm {
padding: .25rem .625rem;
}
}
label {
font-size: .8rem;
transform: translateY(8px);
&.active {
font-size: .85rem;
transform: translateY(-12px) scale(.8);
}
}
.prefix {
top: .5rem;
font-size: 15px;
~ input,
~ textarea {
width: calc(100% - 1.6rem);
margin-left: 1.6rem;
}
~ label {
margin-left: 1.6rem;
}
~ .form-text {
margin-left: 1.7rem;
}
}
}
.prefix {
position: absolute;
top: .6rem;
font-size: 20px;
transition: color .2s;
&:focus {
color: #4285f4;
}
~ input,
~ textarea {
width: calc(100% - 2rem);
margin-left: 2rem;
}
~ label {
margin-left: 2rem;
}
~ .form-text {
margin-left: 2.1rem;
}
}
.character-counter {
margin-top: -.5rem;
}
}
&.md-bg {
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="time"],
input[type="date"],
input[type="datetime-local"],
input[type="tel"],
input[type="number"],
input[type="search-md"],
input[type="search"],
textarea.md-textarea {
&:focus:not([readonly]) {
border-bottom: none;
box-shadow: none;
}
box-sizing: border-box;
padding: 10px 5px;
background: #f5f5f5 no-repeat;
background-image: linear-gradient(to bottom, $input-md-focus-color, $input-md-focus-color), linear-gradient(to bottom, $input-border-color, $input-border-color);
background-position: 50% 100%, 50% 100%;
background-size: 0 2px, 100% 1px;
border: 0;
border-top-left-radius: .3rem;
border-top-right-radius: .3rem;
transition: background-size .3s cubic-bezier(.64, .09, .08, 1);
&:focus {
background-color: #dcdcdc;
background-size: 100% 2px, 100% 1px;
outline: none;
}
}
> input[type="date"]:not(.browser-default) + label {
transform-origin: 0 0;
}
> input[type]:-webkit-autofill:not(.browser-default):not([type="search"]) + label,
> input[type="time"]:not(.browser-default) + label {
font-size: .8rem;
transform: translateY(-12px);
transform-origin: 0 0;
}
.form-control {
padding: 1.1rem .7rem .4rem !important;
}
label {
top: 0;
padding-left: .7rem;
font-size: 1rem;
transition: transform .2s ease-out, color .2s ease-out;
transform: translateY(13px);
transform-origin: 0% 100%;
&.active {
padding-left: .75rem;
font-weight: 500;
transform: translateY(-3px) scale(.8);
}
}
&.form-lg {
label {
transform: translateY(16px);
&.active {
transform: translateY(-4px) scale(.8);
}
}
}
&.form-sm {
label {
transform: translateY(11px);
&.active {
transform: translateY(-2px) scale(.8);
}
}
}
}
}
.md-form .form-control.is-invalid,
.was-validated .md-form .form-control:invalid {
padding-right: 0;
}
.md-form .form-control.is-valid,
.was-validated .md-form .form-control:valid {
padding-right: 0;
}
.needs-validation .md-form label {
left: .3rem;
}
// Custom file input browser support
@each $lang,
$text in $custom-mdb-file-text {
.custom-file-input {
&:lang(#{$lang}) {
& ~ .custom-file-label {
&::after {
content: $text;
}
}
}
}
}
.md-form {
& > label {
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.form-control {
box-sizing: border-box !important;
}
.form-control.valid + label,
.form-control.invalid + label {
overflow: visible;
}
.input-prefix {
position: absolute;
top: 50%;
transform: translateY(-50%);
transition: $input-prefix-transition;
color: rgba(0,0,0,.87);
pointer-events: none;
&.active {
color: $input-md-focus-color;
}
}
&.input-with-pre-icon {
label {
left: 36px;
right: initial;
}
.input-prefix {
left: 16px;
right: initial;
}
.form-control {
padding-left: 2.7rem !important;
}
}
&.input-with-post-icon {
.input-prefix {
right: 16px;
left: initial;
}
.form-control {
padding-right: 2.7rem !important;
}
}
&.input-with-post-icon.input-with-pre-icon {
.input-prefix {
right: 16px;
left: initial;
}
.input-prefix:first-of-type {
left: 16px;
right: initial;
}
.form-control {
padding-left: 2.5rem !important;
padding-right: 2.5rem !important;
}
}
}
|
Download
