_formage.scss

@charset "UTF-8";
/**
 * @author          Luc Poupard
 * @lastmodified    2017-03-29
 * @note            Formage
 */


/* ----------------------------- */
/* Table of Content */
/* ----------------------------- */
/*
    == Global
        -- Uniformization
        -- Layout
    == Labels
    == Fields
        -- Inputs
        -- Checkboxes et radio
        -- Select
        -- Textarea
    == Buttons
    == Messages
        -- Help
        -- Error
        -- Confirmation
*/


/* == @section Global ==================== */
/* -- @subsection Uniformization ---------- */
/* Override normalize line-height [fixed at 1.15] */
button,
input,
optgroup,
select,
textarea {
    line-height: $form-line-height;
}

/* ♫ I like to click it, click it ♫ */
label,
#{$form-buttons} {
    cursor: pointer;
}

/* Disabled fields */
form [disabled],
form [readonly] {
    cursor: not-allowed;
}

/* Elegant alignment */
label,
.label,
button,
.button,
input,
select {
    vertical-align: middle;
}

/* To change according to desired design */
input,
button,
select,
textarea {
    padding: $form-input-padding;
    border-radius: $form-border-radius;
    font-family: inherit; // Fix typo inputs
    font-size: 1em; // Fix typo inputs

    @if $form-is-label-vertical == false {
        @media screen and ( min-width: em( $form-screen-small + 1 ) ) {
            max-width: em( $form-input-width );
        }
    }
}

form,
.form,
fieldset,
.fieldset {
    #{$form-fields},
    input[type="range"],
    select {
        width: 100%;
    }  
}

/* Do not display delete cross in IE/Edge */
::-ms-clear {
    display: none;
}

/**
 * Avoid zoom on iOS when focus on inputs
 * http://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone
 */
@if $form-is-normalize == true {
    @media screen and ( -webkit-min-device-pixel-ratio: 1.5 ) {
        #{$form-fields},
        select {
            font-size: em(16);
        }
    }
}

/* -- @subsection Layout ---------- */
fieldset,
.fieldset {
    margin-bottom: 1em;
    padding: 0;
    border: none;

    @if $form-is-label-vertical {
        @media screen and ( min-width: em( $form-screen-small + 1 ) ) {            
            margin-right: auto;
            margin-left: auto;
            max-width: em(600);
        }
    }

    /**
     * Each field is included in a div with its label and help/error messages
     * This div is the direct child of a fieldset tag or a div with the .fieldset class
     */
    > div {
        margin-bottom: 1em;
    }
}

legend {
    margin-bottom: 1em;
    font-weight: bold;

    @if $form-is-normalize == false {
        padding: 0;
    }
}

/**
 * Placeholder
 * http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css
 */
/* WebKit, Blink, Edge */
::-webkit-input-placeholder {
    color: $form-placeholder;
}

/* Mozilla Firefox 19+ */
::-moz-placeholder { 
    color: $form-placeholder;
    opacity: 1;
}

/* Internet Explorer 10-11 */
:-ms-input-placeholder {
    color: $form-placeholder;
}


/* == @section Labels ==================== */
label,
.label {
    display: block;
}

#{$form-radio-checkbox} {
    + label {
        display: inline-block;
    }
}

@if $form-is-label-vertical == false {
    @media screen and ( min-width: em( $form-screen-small + 1 ) ) {
        label,
        .label {  
            display: inline-block;
            width: $form-label-width;
        }

        #{$form-radio-checkbox} {
            + label {
                width: auto;
            }
        }

        /* If a field has no label, we add a padding on the parent div to keep the field aligned with others */
        .no-label {
            padding-left: $form-label-width;
        }        
    }
}


/* == @section Fields ==================== */
#{$form-fields},
select {
    border: 1px solid rgba( $form-border-color, .2 );
    background-color: $form-input-background;

    &:focus {
        box-shadow: 0 0 5px rgba( $form-border-shadow, .25 );
        border: 1px solid rgba( $form-border-color, .5 );
    }
}

/* 
 * Avoid radios, checkboxes and images sizing
 * and a different display in IE 
 */
#{$form-radio-checkbox},
input[type="image"] {
    width: auto;
    border: 0;
    background-color: transparent;
}

/* Avoid browser applying its styles */
#{$form-fields},
#{$form-buttons} {
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* -- @subsection Inputs ---------- */
/* Input type search */
input[type="search"] {
    -webkit-appearance: textfield;
}

/* Input type color */
input[type="color"] {
    padding: .1em 0;
    width: em(38);
    height: em(36);
}

/* Input type number */
@if $form-is-number == true {
    input[type=number]::-webkit-inner-spin-button, 
    input[type=number]::-webkit-outer-spin-button { 
        -webkit-appearance: none;
    }

    input[type="number"] {
        -moz-appearance: textfield;
    }
}

/**
 * Input type range
 * https://www.alsacreations.com/tuto/lire/1410-formulaire-html5-type-range.html
 */
// input[type="range"] {
//     position: relative;
//     margin-left: 1em;

//     &:after,
//     &:before {
//         position: absolute;
//         top: 1em;
//         color: #aaa;
//     }

//     &:before {
//         left:0em;
//         content: attr(min);
//     }

//     &:after {
//         right: 0em;
//         content: attr(max);
//     }
// }

/* Input type file */
// @if $form-is-label-vertical == false {
//     @media screen and ( min-width: em( $form-screen-small + 1 ) ) {
//         input[type="file"] {
//             width: auto;
//         }
//     }
// }


/* -- @subsection Checkboxes and radio ---------- */
#{$form-radio-checkbox} {
    &:focus {
        outline: 1px dotted;
    }
}

/* Group of checkboxes/radio button */
.checkbox-group,
.radio-group {
    margin-bottom: 0;
    
    legend {
        margin-bottom: 0;
        font-weight: normal;
    }

    > div {
        margin-top: 0;
    }

    @if $form-is-label-vertical == false {
        @media screen and ( min-width: em( $form-screen-small + 1 ) ) {
            > * {
                float: left;
            }

            legend {
                width: $form-label-width;
            }
        }
    }
}

/**
 * Toggle button, base on a checkbox
 * https://proto.io/freebies/onoff/
 */
.toggle-field {
    position: relative;
    display: inline-block;
    width: em(40);
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;

    + .label {
        display: inline-block;
    }
}

.toggle-input {
    @extend .visually-hidden;
}

.toggle-label {
    overflow: hidden;
    padding: 0;
    height: em(25);
    line-height: em(25);
    border: 2px solid transparent;
    border-radius: $form-border-radius;
    background-color: rgba( $form-border-color, .25 );
    text-indent: 100%;
    transition: all .3s ease-in;

    input[type="checkbox"] + &,
    input[type="radio"] + & {
        display: block;
    }

    &:before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        display: block;
        margin: 0;
        width: em(24);
        right: em(16);
        border: 2px solid rgba( $form-border-color, .25 );
        border-radius: $form-border-radius;
        background: $form-input-background;
        transition: all .3s ease-in 0s; 
    }
}

.toggle-input:checked {
    + .toggle-label {
        background-color: $form-button-background;
        border-color: $form-button-border;

        &:before {
            right: 0;
            border-color: $form-button-border;
        }
    }
}


/* -- @subsection Select ---------- */
select[multiple] {
    vertical-align: top;
}

/**
 * Customizing select
 * https://www.taniarascia.com/styling-ui-components-from-scratch-buttons-forms/
 */
@if $form-is-select == true {
    select:not([multiple]) {
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAJCAYAAAA/33wPAAAAvklEQVQoFY2QMQqEMBBFv7ERa/EMXkGw11K8QbDXzuN4BHv7QO6ifUgj7v4UAdlVM8Uwf+b9YZJISnlqrfEUZVlinucnBGKaJgghbiHOyLyFKIoCbdvecpyReYvo/Ma2bajrGtbaC58kCdZ1RZ7nl/4/4d5EsO/7nzl7IUtodBexMMagaRrs+06JLMvcNWmaOv2W/C/TMAyD58dxROgSmvxFFMdxoOs6lliWBXEcuzokXRbRoJRyvqqqQvye+QDMDz1D6yuj9wAAAABJRU5ErkJggg==);
        background-position: 100%;
        background-repeat: no-repeat;
    }
}


/* -- @subsection Textarea ---------- */
/* Avoid weirdy resize */
textarea {
    vertical-align: top;
    resize: vertical;
}


/* == @section Buttons ==================== */
#{$form-buttons} {
    margin: .5em 0;
    width: auto;
    border: 1px solid rgba( $form-button-border, 1 );
    background-color: rgba( $form-button-background, 1 );
    color: $form-button-color;

    &:hover,
    &:focus {
        border: 1px solid rgba( $form-button-border, .75 );
        background-color: rgba( $form-button-background, .75 );
    }
}

input[type="reset"] {
    border: 1px solid rgba( $form-button-border, 1 );
    background-color: $form-input-background;
    color: rgba( $form-button-background, 1 );

    &:hover,
    &:focus {
        border: 1px solid rgba( $form-button-border, .75 );
        background-color: $form-input-background;
        color: rgba( $form-button-background, .75 );
    }
}

/* Button who's not a button, oh shit */
.button {
    display: inline-block; // Link and span case
    padding: $form-input-padding;
    border-radius: $form-border-radius;
    font-family: inherit;
    font-size: 1em;
    text-decoration: none; // Link case

    &:active,
    &:visited,
    &:hover,
    &:focus {
        color: $form-button-color; // Link case
    }
}

.form-buttons {
    @if $form-is-label-vertical {
        @media screen and ( min-width: em( $form-screen-small + 1 ) ) {            
            margin-right: auto;
            margin-left: auto;
            max-width: em(600);
        }
    }
}


/* == @section Messages ==================== */
/* Error/confirmation messages on the top of the form */
div[class*="form-msg"] {
    padding: 0 1em;
    margin-bottom: 1em;
    border-radius: $form-border-radius;

    p:first-child {
        margin-top: 1em;
    }
}

/* Error/confirmation on a field */
label [class^="label-msg"],
.label [class^="label-msg"] {
    display: block;
    margin: -.25em 0 .25em 0;
    font-size: .9em;    
}


/* -- @subsection Help ---------- */
.form-msg-help {
    color: $form-help;
    background-color: lighten( $form-help, 45% );
    border: 1px solid $form-help;
}

.label-msg-help {
    color: $form-help;
}


/* -- @subsection Error ---------- */
.form-msg-error {
    color: $form-error;
    background-color: lighten( $form-error, 45% );
    border: 1px solid $form-error;
}

.label-msg-error {
    color: $form-error;
}

.form-error input, 
.form-error select, 
.form-error textarea {
    border: 1px solid $form-error;
    -webkit-box-shadow: 0 0 5px 0 rgba( $form-error, .5 );
    -moz-box-shadow: 0 0 5px 0 rgba( $form-error, .5 );
    box-shadow: 0 0 5px 0 rgba( $form-error, .5 );
}

// input:invalid,
// select:required:invalid,
// input:required:invalid,
// input:focus:invalid,
// textarea:required:invalid,
// textarea:focus:invalid

// .form-error input {
//     background-image: url("cross.png");
//     background-repeat: no-repeat;
//     background-position: 98% 50%;
//     padding-right: 25px;
// }


/* -- @subsection Confirmation ---------- */
.form-msg-confirmation {
    color: $form-valid;
    background-color: lighten( $form-valid, 55% );
    border: 1px solid $form-valid;
}

.form-valid input, 
.form-valid select, 
.form-valid textarea {
    border: 1px solid $form-valid;
    -webkit-box-shadow: 0 0 5px 0 rgba( $form-valid, .5 );
    -moz-box-shadow: 0 0 5px 0 rgba( $form-valid, .5 );
    box-shadow: 0 0 5px 0 rgba( $form-valid, .5 );
}

// input:focus:required:valid,
// textarea:focus:required:valid,
// select:focus:required:valid

// .form-valid input {
//     background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNoZWNrIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDYxMiA3OTIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYxMiA3OTIiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGZpbGw9IiM1Q0I4NUMiIGQ9Ik0yMzMuOCw2MTAuMWMtMTMuMywwLTI1LjktNi4yLTM0LTE2LjlMOTAuNSw0NDguOEM3Ni4zLDQzMCw4MCw0MDMuMyw5OC44LDM4OS4xYzE4LjgtMTQuMyw0NS41LTEwLjUsNTkuOCw4LjNsNzEuOSw5NWwyMjAuOS0yNTAuNWMxMi41LTIwLDM4LjgtMjYuMSw1OC44LTEzLjZjMjAsMTIuNCwyNi4xLDM4LjcsMTMuNiw1OC44TDI3MCw1OTBjLTcuNCwxMi0yMC4yLDE5LjQtMzQuMywyMC4xQzIzNS4xLDYxMC4xLDIzNC41LDYxMC4xLDIzMy44LDYxMC4xeiIvPjwvc3ZnPg==");
//     background-repeat: no-repeat;
//     background-position: 100% 50%;
//     padding-right: 25px;
// }