baz_april/squelettes/scss/components/_forms.scss

/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */

button,
input,
optgroup,
select,
textarea {
    // color: inherit; /* 1 */
    font:   inherit; /* 2 */
    margin: 0; /* 3 */
}


//----------------------------------------
//  Formulaires SPIP
//----------------------------------------

.formulaire_spip {

    @include text-block;
	clear:both;

    .boutons,
    .titrem {
        margin: 0;
    }

    .editer {
        margin:   0 0 0.5em 0;
        padding:  0;
        clear:    both;
        overflow: hidden;
        & > label {
            display:       block;
            margin-bottom: 0.5em;
        }
    }
    fieldset {
        margin:  0;
        padding: 0;
    }
    label {
        padding:     0;
        font-size:   inherit;
        font-weight: normal;
    }
    .fieldset,
    .saisie_explication {
        padding:    0;
        border:     none;
        background: none;
    }
    fieldset {
        legend {
            margin-bottom: 1em;
        }
        .editer-groupe {
            margin-left:0;
        }
    }

    /* elements du formulaire */
    input.text,
    input.password,
    input.date,
    input[type=text],
    input[type=password],
    input[type=search],
    input[type=email],
    textarea,
    select {
        font-size:   1em;
        font-family: inherit;
        padding:     0 0.3em;
        width:       100%;
        border:      1px solid $couleur-border-form;
        background:  white;
        // bug with em heights in chrome
        min-height:  em(30px);
        line-height: em(30px);
        &:focus {
            border-color: $couleur-border-form-focus;
        }
    }
    .erreur {
        input.text,
        input.password,
        input.date,
        input[type=text],
        input[type=password],
        input[type=search],
        input[type=email],
        textarea,
        select {
            border: 2px solid $couleur-erreur;
        }
    }

    select {
        -webkit-appearance: none;
        -moz-appearance:    none;
        appearance:         none;
        background:         white url(../images/icone-dropdown.png) right center no-repeat;
        padding-right:      28px;
        &:hover,
        &:focus {
            background-image: url(../images/icone-dropdown-over.png);
        }
    }
    select[multiple] {
        background-image: none;
        &:hover,
        &:focus {
            background-image: none;
        }
    }

    select::-ms-expand {
        display: none;
    }

    .saisie_date input,
    input.date {
        //background: white url(../images/icone-calendrier.png) right center no-repeat;
    }

    textarea {
        height:      em(250px);
        overflow:    auto;
        font-size:   inherit;
        font-family: inherit;
        line-height: inherit;
        &.court {
            height: em(125px);
        }
    }

    input.placeholder,
    textarea.placeholder {
        color: lighten($couleur-texte, 15%);
    }

    input::-webkit-input-placeholder {
        color: $couleur-placeholder;
    }
    input:-moz-placeholder { /* Firefox 18- */
        color: $couleur-placeholder;
    }
    input::-moz-placeholder { /* Firefox 19+ */
        color: $couleur-placeholder;
    }
    input:-ms-input-placeholder {
        color: $couleur-placeholder;
    }

    .erreur {
        background-color: $couleur-erreur-bg;
    }
    .editer.erreur {
        padding: 0.5em;
    }
    
    .erreur_message {
        display:     block;
        color:       $couleur-erreur;
        font-weight: bold;
    }

    .obligatoire label, .obligatoire .label {
        font-weight: bold;
    }

    /* sous choix */
    .choix {
        overflow:        hidden;
        padding:         0;
        margin:          0.3em 0;
        display:         flex;
        justify-content: flex-start;
        align-items:     center;
    }

    .choix label {
        font-weight:    normal;
        text-transform: none;
        float:          right;
        width:          96%;
        padding-left:   0.5em;
    }

    .choix label.on {
        font-weight: bold !important;
    }

    .choix .radio,
    .choix .checkbox {
        float:  none;
        margin: 0;
    }

    /* reponses succes/erreur */

    .reponse_formulaire,
    .error, .success, .notice {
        border:        1px solid;
        font-weight:   normal;
        padding:       0.5em;
        min-height:    em(24px);
        margin-bottom: 1em;
        margin-top:    1em;
        & > p:last-child {
            margin-bottom: 0;
        }
    }

    .reponse_formulaire_ok {
        color:            $couleur-valide;
        border-color:     lighten($couleur-valide, 30%);
        background-color: $couleur-valide-bg;
    }

    .reponse_formulaire_erreur {
        color:            $couleur-erreur;
        border-color:     lighten($couleur-erreur, 30%);
        background-color: $couleur-erreur-bg;
    }

    /* Explications */
    .saisie_explication .explication {
        background: #F0F0F0;
        font-size:  100%;
    }

    p.explication {
        display:       block;
        font-weight:   normal;
        margin-bottom: 0.5em;
    }

    .explication * {
        margin: 0 !important;
    }

    /* Remarques importantes */
    .attention {
        display:       block;
        margin-bottom: 1em;
        font-weight:   normal;
    }

    input.submit,
    input.reset,
    input.button {
        width: auto;
    }

    /* Fieldset */

    fieldset {
        border:  0;
        width:   auto;
        padding: 0;
        margin:  1.5em 0;
    }

    h2.legend,
    h3.legend,
    legend {
        font-style:     normal;
        font-size:      125%;
        display:        block;
        width:          100%;
        margin:         0 0 0.5em 0;
    }

    fieldset input.text,
    fieldset textarea.textarea {
        border: 1px solid $couleur-border-form;
    }

    .saisie_date label {
        display: inline-block;
        width:   40%;
    }

    /* boutons */
    .boutons {
        margin:     1em 0 0 0;
        clear:      both;
        //padding:    1em 0;
        text-align: right;
    }

    .boutons-left {
        text-align: left;
    }

    .boutons-center {
        text-align: center;
    }

    .boutons.noborder {
        margin-top: 0;
    }

    input[type=submit] {
        @include bouton($couleur-boutons);
    }
}

//----------------------------------------
//  Boutons
//----------------------------------------

.button,
.formulaire_spip button,
.formulaire_spip input[type=submit] 
{
    @include bouton($couleur-boutons);

    &.button--white {
        background: white;
        color:      $couleur-lien;
        &:hover {
            background: $couleur-lien;
            color:      white;
        }
    }

    &.button--cancel {
        background-color: #615B5D;
    }

    &.button--small {
        font-size: 0.85em;
    }
    &.button--big {
        height:        em(44px);
        line-height:   em(44px);
        border-radius: em(22px);
        padding:       0 2em;
    }

}

/* Bouton de validation */
/* Pour IE, qui grossit le bouton submit */
input[type="submit"], input[type="reset"] {
    font-size: inherit;
}

.formulaires_compacts {
    .formulaire_spip {
        .editer {
            padding: 0;
        }
        label {
            .obligatoire {
                display: none;
            }
        }
        .boutons {
            text-align: left;
            input[type=submit] {
                height:        em(44px);
                line-height:   em(44px);
                border-radius: em(22px);
                padding:       0 2em;

                background:    white;
                color:         $couleur-lien;
                &:hover {
                    background: $couleur-lien;
                    color:      white;
                }
            }
        }
    }
}