PHP Classes

File: public/mdb/scss/free/_forms.scss

Recommend this page to a friend!
  Classes of Ahmad Mustapha   PHP Todo List   public/mdb/scss/free/_forms.scss   Download  
File: public/mdb/scss/free/_forms.scss
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: PHP Todo List
Application to manage a list of tasks to do
Author: By
Last change:
Date: 1 year ago
Size: 15,651 bytes
 

Contents

Class file image Download
// 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; } } }