sync

[bootswatch] / MDB Free / sass / mdb / free / _forms-basic.scss

// FORMS BASIC\r
// Text inputs\r
input[type=text],\r
input[type=password],\r
input[type=email],\r
input[type=url],\r
input[type=time],\r
input[type=date],\r
input[type=datetime-local],\r
input[type=tel],\r
input[type=number],\r
input[type=search-md],\r
input[type=search],\r
textarea.md-textarea {\r
    // General Styles\r
    background-color: transparent;\r
    border: none;\r
    border-bottom: 1px solid $input-border-color;\r
    border-radius: 0;\r
    outline: none;\r
    height: 2.1rem;\r
    width: 100%;\r
    font-size: 1rem;\r
    box-shadow: none;\r
    @include box-sizing(content-box);\r
    transition: all .3s;\r
    // Disabled input style\r
    &:disabled,\r
    &:disabled,\r
    &[readonly="readonly"] {\r
        color: $input-disabled-color;\r
        border-bottom: 1px dotted $input-disabled-color;\r
        background-color: transparent;\r
    }\r
    // Disabled label style\r
    &:disabled+label,\r
    &[readonly="readonly"]+label {\r
        color: $input-disabled-color;\r
        background-color: transparent;\r
    }\r
    // Focused input style\r
    &:focus:not([readonly]) {\r
        border-bottom: 1px solid $input-focus-color;\r
        box-shadow: 0 1px 0 0 $input-focus-color;\r
    }\r
    // Focused label style\r
    &:focus:not([readonly])+label {\r
        color: $input-focus-color;\r
    }\r
    // Valid Input Style\r
    &.valid,\r
    &:focus.valid {\r
        border-bottom: 1px solid $input-success-color;\r
        box-shadow: 0 1px 0 0 $input-success-color;\r
    }\r
    // Custom Success Message\r
    &.valid+label:after,\r
    &:focus.valid+label:after {\r
        content: attr(data-success);\r
        color: $input-success-color;\r
        opacity: 1;\r
    }\r
    // Invalid Input Style\r
    &.invalid,\r
    &:focus.invalid {\r
        border-bottom: 1px solid $input-error-color;\r
        box-shadow: 0 1px 0 0 $input-error-color;\r
    }\r
    // Custom Error message\r
    &.invalid+label:after,\r
    &:focus.invalid+label:after {\r
        content: attr(data-error);\r
        color: $input-error-color;\r
        opacity: 1;\r
    }\r
    // Form Message Shared Styles\r
    &+label:after {\r
        display: block;\r
        content: "";\r
        position: absolute;\r
        top: 65px;\r
        opacity: 0;\r
        transition: .2s opacity ease-out, .2s color ease-out;\r
    }\r
    &.input-alternate {\r
        padding: 0 15px;\r
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12);\r
        font-size: 0.875rem;\r
        border-bottom: 0;\r
        transition: none !important;\r
        &:hover,\r
        &:focus {\r
            box-shadow: 0 3px 8px 0 rgba(0, 0, 0, .2), 0 0 0 1px rgba(0, 0, 0, .08) !important;\r
            border-bottom: 0;\r
        }\r
    }\r
}\r
\r
label {\r
    font-size: $label-font-size;\r
    color: darken ($input-border-color, 90%);\r
}\r
\r
.form-control {\r
    padding: 0;\r
    padding-bottom: 0.6rem;\r
    padding-top: 0.5rem;\r
    font-size: 1rem;\r
    line-height: 1.5;\r
    background-color: transparent;\r
    background-image: none;\r
    border-radius: 0;\r
    margin-top: 0.2rem;\r
    margin-bottom: 1rem;\r
    &:focus {\r
        background: transparent;\r
    }\r
}\r
\r
.form-control:disabled,\r
.form-control[readonly] {\r
    background-color: transparent;\r
    border-bottom: 1px solid #e0e0e0;\r
}\r
\r
// Styling for input field wrapper\r
.md-form {\r
    position: relative;\r
    margin-bottom: 1.5rem;\r
    &.form-sm {\r
        input {\r
            padding-bottom: 0.2rem;\r
            padding-top: 0.2rem;\r
            font-size: 0.8rem;\r
            line-height: 0.5;\r
        }\r
        label {\r
            font-size: 0.9rem;\r
        }\r
        .prefix {\r
            font-size: 1.5rem;\r
            top: 0.4rem;\r
        }\r
        .prefix~input,\r
        .prefix~textarea {\r
            margin-left: 2.2rem; //Po dodaniu marginesu z lewej powstaje dziwny margines po prawej. Do poprawienia przed updatem\r
        }\r
        .prefix~label {\r
            margin-left: 2.2rem;\r
        }\r
    }\r
    .btn {\r
        margin-bottom: 1.5rem;\r
    }\r
    label {\r
        color: #757575;\r
        position: absolute;\r
        top: 0.8rem;\r
        left: 0;\r
        font-size: 1rem;\r
        cursor: text;\r
        @include transition(.2s ease-out);\r
    }\r
    label.active {\r
        font-size: $label-font-size;\r
        @include transform(translateY(-140%));\r
    }\r
    // Prefix Icons\r
    .prefix {\r
        position: absolute;\r
        width: 3rem;\r
        font-size: 2rem;\r
        @include transition(color .2s);\r
        &.active {\r
            color: $input-focus-color;\r
        }\r
    }\r
    .prefix~input,\r
    .prefix~textarea {\r
        margin-left: 3rem;\r
        width: 92%;\r
        width: calc(100% - 3rem);\r
    }\r
    .prefix~textarea {\r
        padding-top: .8rem;\r
    }\r
    .prefix~label {\r
        margin-left: 3rem;\r
    }\r
    @media #{$medium-and-down} {\r
        .prefix~input {\r
            width: 86%;\r
            width: calc(100% - 3rem);\r
        }\r
    }\r
    @media #{$small-and-down} {\r
        .prefix~input {\r
            width: 80%;\r
            width: calc(100% - 3rem);\r
        }\r
    }\r
    &.input-group {\r
        .form-control {\r
            margin: 0;\r
            padding-left: 1rem;\r
            @include placeholder {\r
                color: #999;\r
                padding-top: 2px;\r
            }\r
        }\r
    }\r
}\r
\r
.form-inline {\r
    fieldset {\r
        margin-right: 1.5rem;\r
    }\r
}\r
\r
// Default textarea\r
textarea {\r
    width: 100%;\r
    height: 3rem;\r
    background-color: transparent;\r
    &.md-textarea {\r
        overflow-y: hidden;\r
        /* prevents scroll bar flash */\r
        padding: 1.6rem 0;\r
        /* prevents text jump on Enter keypress */\r
        resize: none;\r
        min-height: 3rem;\r
    }\r
}\r
\r
// For textarea autoresize\r
.hiddendiv {\r
    display: none;\r
    white-space: pre-wrap;\r
    word-wrap: break-word;\r
    overflow-wrap: break-word;\r
    /* future version of deprecated 'word-wrap' */\r
    padding-top: 1.2rem;\r
    /* prevents text jump on Enter keypress */\r
}\r
\r
//Input color\r
.input-dark-bg {\r
    // Style Placeholders\r
    @include placeholder {\r
        color: #fff!important;\r
        font-weight: 300;\r
    }\r
    input[type=text] {\r
        border-bottom: 1px solid #fff;\r
    }\r
    .form-control {\r
        color: #fff;\r
    }\r
}\r
\r
.input-light-bg {\r
    // Style Placeholders\r
    @include placeholder {\r
        color: #1C2331!important;\r
        font-weight: 300;\r
    }\r
    input[type=text] {\r
        border-bottom: 1px solid #1C2331;\r
    }\r
    .form-control {\r
        color: #1C2331;\r
    }\r
}\r
\r
.form-inline .form-group {\r
    margin-right: 2rem;\r
}\r
\r
i {\r
    &.btn-primary {\r
        background: $primary-color!important;\r
    }\r
    &.btn-default {\r
        background: $default-color!important;\r
    }\r
    &.btn-success {\r
        background: $success-color!important;\r
    }\r
    &.btn-info {\r
        background: $info-color!important;\r
    }\r
    &.btn-warning {\r
        background: $warning-color-dark!important;\r
    }\r
    &.btn-danger {\r
        background: $danger-color-dark!important;\r
    }\r
}