framework7-without-localstorage/src/less/material/forms.less

Full featured mobile HTML framework for building iOS & Android apps

/* === Forms === */
// Inputs
.list-block {
    input[type="text"], input[type="password"], input[type="search"], input[type="email"], input[type="tel"], input[type="url"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="number"], select, textarea {
        -webkit-appearance: none;
        -moz-appearance: none;
        -ms-appearance: none;
        appearance: none;
        box-sizing:border-box;
        border: none;
        background: none;
        border-radius: 0 0 0 0;
        box-shadow: none;
        display: block;
        padding: 0;
        margin: 0;
        width: 100%;
        height: 36px;
        color: #212121;
        font-size: 16px;
        font-family: inherit;
        &::-webkit-input-placeholder {
           color: rgba(0,0,0,0.35);
        }
    }
    .label, .floating-label {
        vertical-align: top;
        color:rgba(0,0,0,0.65);
        .transition(200ms);
        width: 35%;
        .flex-shrink(0);
    }

    input[type="date"], input[type="datetime-local"] {
        line-height: 44px;
    }
    select {
        -webkit-appearance: none;
        -moz-appearance: none;
        -ms-appearance: none;
        appearance: none;
    }
    textarea {
        resize:none;
        line-height: 1.4;
        padding-top: 8px;
        padding-bottom: 7px;
        height: 100px;
        &.resizable {
            height: 36px;
        }
    }

    .item-input {
        width: 100%;
        -ms-flex:1;
        .flex-shrink(1);
        font-size: 0;
        position: relative;
        margin-bottom: 4px;
        min-height: 36px;
    }

    // Inputs List
    .input-item, &.inputs-list {
        ul {
            .hairline-remove(bottom);
        }
        .item-media {
            .align-self(flex-end);
            min-height: 36px;
            margin-bottom: 8px;
            padding: 0;
        }
        .item-inner {
            display: block;
            margin-bottom: 4px;
            padding-bottom: 0;
            .hairline-remove(bottom);
        }
        .label, .floating-label {
            width: 100%;
            font-size: 12px;
        }
        .floating-label {
            .transform-origin(left);
            .transform(scale(16/12) translateY(21px));
            color: rgba(0,0,0,0.35);
            width: auto;
            max-width: 75%;
            ~.item-input input::-webkit-input-placeholder {
               color: transparent;
            }
        }
    }
    .focus-state, .not-empty-state {
        .floating-label {
            color:rgba(0,0,0,0.65);
            .transform(scale(1) translateY(0));
        }
    }
    .focus-state {
        &.item-inner {
            .label {
                color: @themeColor;
            }
        }
        &.input-field:after,
        .item-input-field:after {
            background: @themeColor;
        }
        .label, .floating-label {
            color: @themeColor;
        }
    }
    .not-empty-state {
        &.item-inner {
            .label {
                color: rgba(0, 0, 0, 0.65);
            }
        }
        &.input-field:after,
        .item-input-field:after {
            background: rgba(0, 0, 0, 0.12);
            transform: none !important;
        }
    }
}
.item-input-field, .input-field {
    position: relative;
    .hairline(bottom, rgba(0, 0, 0, 0.12));
    &:after {
        .transition(200ms);
    }
    &.focus-state:after, &.not-empty-state:after, .focus-state &:after, .not-empty-state &:after{
        background: @themeColor;
        .transform(scaleY(2)) !important;
    }
}
textarea.resizable {
    overflow: hidden;
}
//Switch
.label-switch {
    display: inline-block;
    vertical-align: middle;
    width: 36px;
    height: 14px;
    position: relative;
    cursor: pointer;
    .align-self(center);
    .checkbox {
        width: 36px;
        border-radius: 36px;
        box-sizing:border-box;
        height: 14px;
        background: #b0afaf;
        z-index: 0;
        margin: 0;
        padding: 0;
        -webkit-appearance: none;
        -moz-appearance: none;
        -ms-appearance: none;
        appearance: none;
        border:none;
        cursor: pointer;
        position: relative;
        .transition(300ms);
        &:after {
            content:' ';
            height: 20px;
            width: 20px;
            border-radius: 20px;
            background: #fff;
            position: absolute;
            z-index: 2;
            top: -3px;
            left: 0px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.4);
            .transform(translateX(0px));
            .transition(300ms);
        }
    }
    input[type="checkbox"] {
        display: none;
        &:checked {
            &+ .checkbox {
                background: rgba(red(@themeColor), green(@themeColor), blue(@themeColor), 0.5);
                &:after {
                    .transform(translateX(16px));
                    background: @themeColor;
                }
            }
        }
    }
    .item-input & {
        top: (36px - 14px) / 2;
    }
}

//Buttons
.button {
    color:@themeColor;
    text-decoration: none;
    text-align: center;
    display: block;
    border-radius: 2px;
    line-height: 36px;
    box-sizing:border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    background: none;
    padding: 0 10px;
    margin: 0;
    height: 36px;
    white-space: nowrap;
    text-overflow:ellipsis;
    font-size: 14px;
    text-transform: uppercase;
    font-family: inherit;
    cursor: pointer;
    min-width: 64px;
    padding: 0 8px;
    position: relative;
    overflow: hidden;
    outline: 0;
    border: none;
    .transition(300ms);
    .translate3d(0,0,0);
    input[type="submit"]&, input[type="button"]&{
        width: 100%;
    }
    html:not(.watch-active-state) &:active, &.active-state {
        background: rgba(0,0,0,0.1);
    }
    &.button-fill {
        background-color: @themeColor;
        color: #fff;
        html:not(.watch-active-state) &:active, &.active-state {
            background: darken(@themeColor, 8%);
        }
    }
    &.button-big {
        height: 48px;
        line-height: 48px;
        border-radius: 3px;
    }

    i.icon + span,
    span:not(.ripple-wave) + span,
    span:not(.ripple-wave) + i.icon,
    i.icon + i.icon {
        margin-left: 8px;
    }

    .navbar &, .toolbar &, .subnavbar &, .notifications & {
        &:not(.button-fill) {
            color:#fff;
            html:not(.watch-active-state) &:active, &.active-state {
                background: rgba(255,255,255,0.15);
            }
        }
    }
}
.button-raised {
    .depth(1);
    html:not(.watch-active-state) &:active, &.active-state {
        .depth(2);
    }
}
.buttons-row {
    .align-self(center);
    .flexbox();
    .flex-wrap(nowrap);
    .button {
        margin-left: 16px;
        width: 100%;
        -webkit-box-flex:1;
        -ms-flex:1;
    }
    .button:first-child {
        margin-left: 0;
    }
}


// Slider
.range-slider {
    width: 100%;
    position: relative;
    overflow: hidden;
    .align-self(center);
    input[type="range"] {
        position: relative;
        height: 20px;
        width: 100%;
        margin: 0;
        -webkit-appearance: none;
        -moz-appearance: none;
        -ms-appearance: none;
        appearance: none;
        background: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0, #b9b9b9), color-stop(100%, #b9b9b9));
        background: linear-gradient(to right, #b9b9b9 0, #b9b9b9 100%);
        background-position: center;
        background-size: 100% 2px;
        background-repeat: no-repeat;
        outline: 0;
        -ms-background-position-y: 500px;
        &:focus, &:active {
            border: 0;
            outline: 0 none;
        }
    }

    // Range thumb mixin
    .range-thumb() {
        -webkit-appearance: none;
        -moz-appearance: none;
        -ms-appearance: none;
        appearance: none;
        border: none;
        outline: 0;
        height: 20px;
        width: 20px;
        position: relative;
        background: @themeColor;
        border-radius: 20px;
    }

    // ======= Webkit ========
    input[type="range"]::-webkit-slider-thumb {
        .range-thumb();
    }

    input[type="range"]::-webkit-slider-thumb:before {
        position: absolute;
        top: 50%;
        right: 100%;
        width: 2000px;
        height: 2px;
        margin-top: -1px;
        z-index: 1;
        background: @themeColor;
        content: ' ';
    }

    // ======= FireFox ========
    input[type="range"]::-moz-range-track {
        width: 100%;
        height: 2px;
        background: #b7b8b7;
        border: none;
        outline: 0;
    }
    input[type="range"]::-moz-range-thumb {
        .range-thumb();
    }

    // ======= IE ========
    input[type="range"]::-ms-track {
        width: 100%;
        height: 2px;
        cursor: pointer;
        background: transparent;
        border-color: transparent;
        color: transparent;
    }
    input[type="range"]::-ms-thumb {
        .range-thumb();
    }

    input[type="range"]::-ms-fill-lower {
        background: @themeColor;
    }
    input[type="range"]::-ms-fill-upper {
        background: #b7b8b7;
    }

    .item-input & {
        top: (36px - 20px) / 2;
    }
}

// Checkboxes
.form-checkbox {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}
label.label-checkbox, .form-checkbox {
    cursor: pointer;
    input[type="checkbox"], input[type="radio"] {
        display: none;
    }
}
label.label-checkbox i.icon-form-checkbox, .form-checkbox i {
    width: 18px;
    height: 18px;
    position: relative;
    border-radius: 2px;
    border: 2px solid #6d6d6d;
    box-sizing:border-box;
    .transition(300ms);
    background: transparent;
    display: block;
    &:after {
        content:' ';
        position: absolute;
        width: 18px;
        height: 18px;
        left: -2px;
        top: -2px;
        .transition(300ms);
        opacity: 0;
        background: no-repeat center;
        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' fill='#ffffff' width='24' height='24' viewBox='0 0 24 24'><path d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/></svg>");
        -webkit-background-size: 100% auto;
        background-size: 100% auto;
    }
}
label.label-checkbox input[type="checkbox"]:checked + .item-media i.icon-form-checkbox,
label.label-checkbox input[type="checkbox"]:checked ~ .item-after i.icon-form-checkbox,
label.label-checkbox input[type="checkbox"]:checked ~ .item-inner i.icon-form-checkbox,
label.label-checkbox input[type="radio"]:checked + .item-media i.icon-form-checkbox,
label.label-checkbox input[type="radio"]:checked ~ .item-after i.icon-form-checkbox,
label.label-checkbox input[type="radio"]:checked ~ .item-inner i.icon-form-checkbox,
.form-checkbox input[type="checkbox"]:checked ~ i {
    border-color: @themeColor;
    background-color: @themeColor;
    &:after {
        opacity: 1;
    }
}
// Radio
.form-radio {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}
label.label-radio, .form-radio {
    cursor: pointer;
    input[type="checkbox"], input[type="radio"] {
        display: none;
    }
}
label.label-radio i.icon-form-radio, .form-radio i {
    width: 20px;
    height: 20px;
    position: relative;
    border-radius: 20px;
    border: 2px solid #6d6d6d;
    box-sizing:border-box;
    .transition(300ms);
    display: block;
    &:after {
        content:' ';
        position: absolute;
        width: 10px;
        height: 10px;
        left: 50%;
        top: 50%;
        margin-left: -5px;
        margin-top: -5px;
        background-color: @themeColor;
        border-radius: 100%;
        .transform(scale(0));
        .transition(300ms);
    }
}
label.label-radio input[type="checkbox"]:checked + .item-media i.icon-form-radio,
label.label-radio input[type="checkbox"]:checked ~ .item-after i.icon-form-radio,
label.label-radio input[type="checkbox"]:checked ~ .item-inner i.icon-form-radio,
label.label-radio input[type="radio"]:checked + .item-media i.icon-form-radio,
label.label-radio input[type="radio"]:checked ~ .item-after i.icon-form-radio,
label.label-radio input[type="radio"]:checked ~ .item-inner i.icon-form-radio,
.form-radio input[type="radio"]:checked ~ i {
    border-color: @themeColor;
    &:after {
        background-color: @themeColor;
        .transform(scale(1));
    }
}

label.label-checkbox, label.label-radio {
    position: relative;
    overflow: hidden;
    z-index: 0;
    .transition(300ms);
    .item-after {
        i.icon-form-checkbox, i.icon-form-radio {
            margin-left: 8px;
            margin-right: 16px;
        }
    }
    .media-list &, .media-item & {
        .item-media {
            i.icon-form-checkbox, i.icon-form-radio {
                margin-top: 4px;
            }
        }
    }
    html:not(.watch-active-state) &:active, &.active-state {
        background-color: rgba(0,0,0,0.1);
        .item-inner {
            .hairline-color(bottom, transparent);
        }
    }
}

// Smart selects
.smart-select {
    select {
        display: none;
    }
}