framework7-without-localstorage/src/less/ios/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: 0px;
        margin: 0;
        width: 100%;
        height: 43px;
        color: #000;
        font-size: 17px;
        font-family: inherit;

    }
    .item-title.label {
        vertical-align: top;
        + .item-input {
            margin-left: 5px;
        }
    }
    input[type="date"], input[type="datetime-local"] {
        line-height: 44px;
    }
    select {
        -webkit-appearance: none;
        -moz-appearance: none;
        -ms-appearance: none;
        appearance: none;
    }
    textarea {
        height: 100px;
        resize:none;
        line-height: 1.4;
        padding-top: 8px;
        padding-bottom: 7px;
        &.resizable {
            height: 43px;
        }
    }
    .item-input {
        width: 100%;
        margin-top: -8px;
        margin-bottom: -7px;
        -webkit-box-flex:1;
        -ms-flex:1;
        .flex-shrink(1);
    }
    .item-title.label {
        width: 35%;
        .flex-shrink(0);
    }
}

//Switch
.label-switch {
    display: inline-block;
    vertical-align: middle;
    width: 52px;
    border-radius: 16px;
    box-sizing: border-box;
    height: 32px;
    position: relative;
    cursor: pointer;
    .align-self(center);
    .checkbox {
        width: 52px;
        border-radius: 16px;
        box-sizing: border-box;
        height: 32px;
        background: #e5e5e5;
        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);
        &:before {
            content:' ';
            position: absolute;
            left: 2px;
            top: 2px;
            width: 48px;
            border-radius: 16px;
            box-sizing: border-box;
            height: 28px;
            background: #fff;
            z-index: 1;
            .transition(300ms);
            .transform(scale(1));
        }
        &:after {
            content:' ';
            height: 28px;
            width: 28px;
            border-radius: 28px;
            background: #fff;
            position: absolute;
            z-index: 2;
            top: 2px;
            left: 2px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.4);
            .transform(translateX(0px));
            .transition(300ms);
        }
    }
    input[type="checkbox"] {
        display: none;
        &:checked {
            &+ .checkbox {
                background: #4cd964;
                &:before {
                    .transform(scale(0));
                }
                &:after {
                    .transform(translateX(20px));
                }
            }
        }
    }
}
html.android {
    .label-switch input[type="checkbox"] {
        &+ .checkbox {
            .transition(0);
            &:after, &:before {
                .transition(0);
            }
        }
    }
}
//Buttons
.button {
    border: 1px solid @themeColor;
    color: @themeColor;
    text-decoration: none;
    text-align: center;
    display: block;
    border-radius: 5px;
    line-height: 27px;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    background: none;
    padding: 0 10px;
    margin: 0;
    height: 29px;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    text-overflow:ellipsis;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    outline: 0;
    input[type="submit"]&, input[type="button"]&{
        width: 100%;
    }

    html:not(.watch-active-state) &:active, &.active-state {
        background: rgba(red(@themeColor), green(@themeColor), blue(@themeColor), .15);
    }
    &.button-round {
        border-radius: 27px;
    }
    &.active {
        background: @themeColor;
        color: #fff;
    }
    &.button-big {
        font-size: 17px;
        height: 44px;
        line-height: 42px;
    }
    &.button-fill {
        color:#fff;
        background: @themeColor;
        border-color: transparent;
        html:not(.watch-active-state) &:active, &.active-state {
            opacity: 0.8;
        }
    }
    i.icon {
        &:first-child {
            margin-right: 10px;
        }
        &:last-child {
            margin-left: 10px;
        }
        &:first-child:last-child {
            margin-left: 0;
            margin-right: 0;
        }
    }
}
.buttons-row {
    .align-self(center);
    .flexbox();
    .flex-wrap(nowrap);
    .button {
        border-radius: 0 0 0 0;
        border-left-width: 0;
        width: 100%;
        -webkit-box-flex:1;
        -ms-flex:1;
    }
    .button:first-child {
        border-radius: 5px 0 0 5px;
        border-left-width: 1px;
        border-left-style: solid;
    }
    .button:last-child {
        border-radius: 0 5px 5px 0;
    }
    .button:first-child:last-child {
        border-radius: 5px;
    }
    .button.button-round:first-child {
        border-radius: 27px 0 0 27px;
    }
    .button.button-round:last-child {
        border-radius: 0 27px 27px 0;
    }
}


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



    // Range thumb mixin
    .range-thumb() {
        height: 28px;
        width: 28px;
        border-radius: 28px;
        background: #fff;
        z-index: 10;
        box-shadow: 0 2px 4px rgba(0,0,0,0.4);
        border: 0;
        outline: 0;
        position: absolute;
        box-sizing: border-box;
        content: ' ';
    }

    // ======= WebKit/Blink ========

    // Before Track
    input[type="range"]:after {
        height: 2px;
        background: #fff;
        content:' ';
        width: 5px;
        top: 50%;
        margin-top: -1px;
        left: -5px;
        z-index: 1;
        position: absolute;
    }
    // Thumb
    input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        -moz-appearance: none;
        -ms-appearance: none;
        appearance: none;
        .range-thumb();
        position: relative;
        cursor: pointer;
        margin-top: -1px;
    }
    input[type="range"]::-webkit-slider-thumb:after {
        .range-thumb();
        left: 0;
        top: 0;
    }
    // Track Active Highlight
    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();
        box-shadow: none;
        border: 1px solid rgba(0,0,0,0.2);
        box-sizing: border-box;
        margin-top: 0;
        top: 50%;
    }

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

// 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: 22px;
    height: 22px;
    position: relative;
    border-radius: 22px;
    border: 1px solid #c7c7cc;
    box-sizing: border-box;
    display: block;
    &:after {
        content:' ';
        position: absolute;
        left: 50%;
        margin-left: -6px;
        top: 50%;
        margin-top: -4px;
        width: 12px;
        height: 9px;
    }
}
label.label-checkbox input[type="checkbox"]:checked + .item-media i.icon-form-checkbox,
label.label-checkbox input[type="radio"]:checked + .item-media i.icon-form-checkbox,
.form-checkbox input[type="checkbox"]:checked ~ i {
    border: none;
    background-color: @themeColor;
    &:after {
        background: no-repeat center;
        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 12 9' xml:space='preserve'><polygon fill='#ffffff' points='12,0.7 11.3,0 3.9,7.4 0.7,4.2 0,4.9 3.9,8.8 3.9,8.8 3.9,8.8 '/></svg>");
        -webkit-background-size: 12px 9px;
        background-size: 12px 9px;
    }
}
// Radios
.form-radio {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    i {
        width: 22px;
        height: 22px;
        position: relative;
        border-radius: 4px;
        border: 1px solid #c7c7cc;
        box-sizing: border-box;
        display: block;
    }
}
label.label-radio, .form-radio {
    cursor: pointer;
    input[type="checkbox"], input[type="radio"] {
        display: none;
    }
}
.form-radio input[type="radio"]:checked ~ i,
label.label-radio input[type="checkbox"]:checked ~ .item-inner,
label.label-radio input[type="radio"]:checked ~ .item-inner {
    background: no-repeat center;
    .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 10'><polygon fill='@{themeColor}' points='11.6,0 4.4,7.2 1.4,4.2 0,5.6 4.4,10 4.4,10 4.4,10 13,1.4 '/></svg>");
    -webkit-background-size: 13px 10px;
    background-size: 13px 10px;
}
label.label-radio {
    input[type="checkbox"], input[type="radio"] {
        display: none;
        ~ .item-inner {
            padding-right: 35px;
        }
        &:checked ~ .item-inner{
            background-position: 90% center;
            background-position: ~"-webkit-calc(100% - 15px)" center;
            background-position: ~"calc(100% - 15px)" center;
        }
    }
}
label.label-checkbox, label.label-radio {
    .transition(300ms);
    html:not(.watch-active-state) &:active, &.active-state {
        .transition(0ms);
        background-color: #d9d9d9;
        .item-inner {
            .hairline-color(bottom, transparent);
        }
    }
}

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