Structure d'un thème

Fichier form.css

Dernière mise à jour : 04/03/2016 à 19h06
Table des matières
  1. Boutons et class boutons
    1. Les classiques
    2. Les petits boutons
    3. Les boutons de formulaire
    4. Les boutons "basic"
    5. Bouton basic avec couleur alternative
    6. Les field button
  2. Les formulaires
    1. Le conteneur de formulaire
    2. la Prévisualisation
    3. les éléments de saisie
    4. Surcharge générateur de mot de passe sur chrome
    5. Les élément du formulaire (englobe le label et l'input d'un champ)
    6. Les labels pour les inputs [for] et pour les elements sans associations
    7. Les champs Textarea
    8. Les choix des permissions
    9. Le vérification des contraintes de formulaire
    10. les champs d'auto-complétion
Le fichier form.css contient l'ensemble des classes CSS qui servent pour l'affichage des boutons et des formulaires.

Boutons et class boutons


Les classiques


Code CSS : 
button,
.button {
    padding: 0.3em 1em;
    height: auto;
    background-image: linear-gradient(to bottom,  rgba(255, 255, 255, 0.18) 0%, rgba(56, 56, 56, 0.10) 100%);
    background-color: #F9F9F9;
    border: 1px solid #CCCCCC;
    border-color: #E1E1E1 #E1E1E1 #BFBFBF #CFCFCF;
    border-radius: 4px;
    box-shadow: inset 0 0 0 rgba(255, 255, 255, 0.2), 0 0 2px rgba(0, 0, 0, 0.05);
    color: #333333;
    text-align: center;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.1);
    white-space: nowrap;    
}
 
button:hover,
.button-hover {
    background-color: #FDFDFD;
    box-shadow: inset 0 0 0 rgba(255, 255, 255, 0.2), 0 0 2px rgba(0, 0, 0, 0.1);
    transition: all 0.1s linear;
}
 
button:active,
.button-active {
    background-color: #F1F1F1;
    border: 1px solid #DDDDDD;
    box-shadow: inset 0 0 0 rgba(255, 255, 255, 0.2), 0 0 2px rgba(0, 0, 0, 0.05);
}

Les petits boutons


Code CSS : 
button.small,
.button-small {
    padding: 0.2em 0.5em;
    font-size: 1.1rem;
}

Les boutons de formulaire


Code CSS : 
button.submit {
    background-color: #3B6B9F;
    border-color: #366393;
    color: #FEFEFE;
}

button.submit:hover {
background-color: #366393;
border-color: #315A86;
}

Les boutons "basic"


Code CSS : 
.basic-button {
    display: inline-block;
    margin: 1px;
    padding: 1px 6px;
    background-color: #2F5B8A;
    border-radius: 2px;
    font-weight: bold;
    text-align: center;    
    color: #FFFFFF;
 
}
 
.basic-button:hover {
    background-color: #3D6997;
    color: #FFFFFF;
    text-decoration: none;
}

Bouton basic avec couleur alternative


Code CSS : 
.basic-button.alt     { background-color: #AAAAAA; }
.basic-button.alt:hover { background-color: #BBBBBB; }

Les field button


Code CSS : 
.field-button {
    display: inline-block;
    font-size: 0;
    white-space: nowrap;
}
 
.field-button input {
    border-radius: 4px 0 0 4px;
}
 
.field-button button {
    margin-left: -1px;
    padding: 4px 8px;
    border-radius: 0 4px 4px 0;
    font-size: 11px;
}


Les formulaires



Le conteneur de formulaire


Code CSS : 
.fieldset-mini {
    margin: 20px auto auto auto;
    width: 540px;
}
 
fieldset {
    margin: 1.5em 0;
    background: none;
    border: none;    
}
 
fieldset img {
    max-width: 250px;
}
 
@media (min-width: 769px) {
    fieldset img {
        max-width: 450px;
    }
}
 
fieldset.fieldset-submit {
    width: 100%;
    background: none;
    border: none;
    text-align: center;
}
 
fieldset.fieldset-submit legend {
    display: none;
}
 
.horizontal-fieldset-desc,
.horizontal-fieldset-element  {
    display: inline-table;
    vertical-align: middle;
}
 
.horizontal-fieldset-element .form-field-select {
    max-width: none;
}
 
optgroup {
    border: none;
    border-bottom: 1px solid #5B5A5A;
    font-weight: bold;
}
 
option {
    padding: 0 3px;
}
 
legend {
    display: block;
    margin: 0 0 0.6em 0;
    width: 100%;
    border-bottom: 1px solid #DDDDDD;
    text-transform: none;
    color: #474747;
    font-size: 1.5em;
}

la Prévisualisation


Code CSS : 
.xmlhttprequest-preview {
    padding: 0 2px;
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    color: #2E3B5F;
}
 
.xmlhttprequest-preview img {
    max-width: 600px;
}

les éléments de saisie


Code CSS : 
input[type=text],
input[type=email],
input[type=url],
input[type=number],
input[type=color],
input[type=tel],
input[type=search],
input[type=password],
input[type=file],
textarea,
select {
    padding: 4px 18px 4px 6px;
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.01);
    color: #555555;
}
 
input[type=text]:hover,
input[type=email]:hover,
input[type=url]:hover,
input[type=number]:hover,
input[type=color]:hover,
input[type=tel]:hover,
input[type=search]:hover,
input[type=password]:hover,
input[type=file]:hover,
textarea:hover,
select:hover {
    background-color: #FFFFFF;
    border: 1px solid #BBBBBB;
    color: #333333;
}
 
input[type=text]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=number]:focus,
input[type=color]:focus,
input[type=tel]:focus,
input[type=search]:focus,
input[type=password]:focus,
input[type=file]:focus,
textarea:focus,
select:focus {
    border-color: #BBBBBB;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.01), 0 0 6px rgba(0, 0, 0, 0.2);
    outline: 0;
    color: #222222;
}
 
input[type=color] {
    padding: 0 2px 0 2px;
    width: 25px;
}
 
form input:focus:invalid,
form textarea:focus:invalid,
form .constraint-status-right input,
form .constraint-status-right textarea {
    border-color: rgba(196, 60, 43, 0.3);
    box-shadow: 0 0 3px rgba(196, 60, 43, 0.1);
}
 
form input:focus:valid,
form textarea:focus:valid,
form .constraint-status-right input,
form .constraint-status-right textarea {
    border-color: rgba(71, 137, 72, 0.3);
    box-shadow: 0 0 5px rgba(71, 137, 72, 0.1);
}
 
input.field-smaller     { width: 29px;  }
input.field-small       { width: 77px;  }
input.field-large       { width: 200px; }
input.field-xlarge         { width: 250px; }
 
input.input-date         { width: 100px; }
input.input-hours         { width: 50px;  }
input.input-minutes     { width: 50px;  }
 
input[name$="_hours"]     { width: 50px;  }
input[name$="_minutes"] { width: 50px;  }

Surcharge générateur de mot de passe sur chrome


Code CSS : 
.cip-icon-key-small {
    display: none !important;
}

Les élément du formulaire (englobe le label et l'input d'un champ)


Code CSS : 
.form-element,
.form-element-textarea {
    position: relative;
    margin: 0 1em 1em 1em;
}
 
@media (min-width: 769px) {
    div#main.main-with-left.main-with-right section .form-element,
    div#main.main-with-left.main-with-right section .form-element-textarea {
        margin: 5px 0;
    }
}
 
.fieldset-description {
    margin: 0 1em 1.5em 1em;
}
 
@media (max-width: 768px) {
    .form-element,
    .form-element-textarea {
        margin: 0 0.6em 1em 0.6em;
    }
 
    .fieldset-description {
        margin: 0 0.6em 1.3em 0.6em;
    }
}
 
@media (max-width: 480px) {
    .form-element,
    .form-element-textarea {
        margin: 0 0.6em 0.5em 0.6em;
    }
 
    .fieldset-description {
        margin: 0 0.6em 0.9em 0.6em;
    }
}
 
@media (max-width: 768px) {
    .form-element-textarea + div.center button,
    .fieldset-content > div.center button {
        margin-top: 5px;
    }
}
 
.form-element [id$="user_avatar"] img {
    max-width: 200px;
}
 
.form-field {
    position: relative;
    display: inline-block;
    max-width: 600px;
}
 
@media (max-width:360px) {
    .form-field {
        max-width: 270px;
    }
}
 
.form-field-free-large {
    width: 100%;
    max-width: none;
}
 
.form-field-action-link {
    text-align: center;
}
 
/* --- Label pour les checkbox et radio --- */
.form-field label {
    display: block;
    margin: 0 10px 0 0;
}

Les labels pour les inputs [for] et pour les elements sans associations


Code CSS : 
.form-element > label {
    display: inline-block;
    padding-right: 10px;
    width: 40%;
    text-align: left;
    vertical-align: top;
}
 
.field-description {
    display: block;
    font-size: 0.8em;
    line-height: 12px;
}
 
@media (max-width: 768px) {
    .form-element > label {
        width: 100%;
    }
 
    span.field-description {
        display: inline-block;
        font-size: 0.7em;
        font-style: italic;
    }
}
 
@media (min-width: 769px) {
    .form-field-select {
        max-width: 59%;
    }
}
 
.form-field-select select {
    max-width: 100%;
}
 
input[disabled=disabled],
input[disabled=disabled]:hover,
input[disabled=disabled]:focus,
textarea[disabled=disabled],
textarea[disabled=disabled]:hover,
textarea[disabled=disabled]:focus,
select[disabled=disabled],
select[disabled=disabled]:hover,
select[disabled=disabled]:focus {
    background-color: #F1F1F1;
    border: 1px solid #CCCCCC;
    color: #AAAAAA;
    cursor: not-allowed;
}
 
input[readonly=readonly],
input[readonly=readonly]:hover,
input[readonly=readonly]:focus,
textarea[readonly=readonly],
textarea[readonly=readonly]:hover,
textarea[readonly=readonly]:focus,
select[readonly=readonly],
select[readonly=readonly]:hover,
select[readonly=readonly]:focus {
    background-color: #FAFAFA;
    border: 1px solid #CCCCCC;
    color: #888888;
}
 
.form-field-checkbox {
    display: inline-block;
}

Les champs Textarea


Code CSS : 
.form-field-textarea {
    position: relative;
    display: inline;
    margin: 5px auto;
    width: 99%;
}
 
textarea {
    width: 100%;
    overflow: auto;
    resize: vertical;
}
 
.form-element-textarea {
    width: 98%;
    margin: 0 1% 1em;
}
 
.form-element-textarea textarea {
    width: 100%;
}
 
.form-element-textarea .form-field-textarea {
    display: block;
}
 
.form-element-textarea .form-field-textarea div {
    float: left;
}
 
.form-element-preview {
    margin: 5px auto 0 auto;
    text-align: center;
}

Les choix des permissions


Code CSS : 
.form-element-auth .form-field {
    display: inline-block;
    margin: 2px 0 0 0;
}
 
.form-element-auth .form-field div[class^="advanced-auth"] {
    float:left;
}
 
.form-element-auth .field-description {
    display: inline;
    font-style: italic;
}
 
.advanced-auth-group select {
    padding-right: 5px;
    max-width: 153px;
    overflow-x: auto;
}
 
.advanced-auth-select select {
    padding-right: 5px;
    max-width: 132px;
    word-wrap: normal;
    overflow-x: auto;
}
 
.advanced-auth-select {
    margin-left:5px;
}
 
.advanced-auth-input {
    margin-left: 5px;
    width: 144px;
}
 
.advanced-auth-input input {
    padding: 4px 24px 4px 6px;
}
 
.advanced-auth-input button {
    margin-left: -29px;
    padding: 5px 5px 6px 5px;
    border-width: 0 0 0 1px;
    border-radius: 0 4px 4px 0;
}
 
.advanced-auth-input-result {
    margin: 2px 0 0 0;
    width: 138px;
    height: 100px;
}
 
.bbcode ~ .form-field-textarea textarea {
    border-radius: 0 0 4px 4px;
    border-width: 0 1px 1px 1px;
}
 
@media (min-width: 769px) {
    .form-element-textarea-small {
        width: 49%;
    }
}
 
@media (max-width: 480px) {
    .form-element-auth .form-field .advanced-auth-input {
        float: none;
        margin: 5px 0 0 0;
    }
}

Le vérification des contraintes de formulaire


Code CSS : 
.constraint-status-error input,
.constraint-status-error textarea {
    border-color: rgba(196, 60, 43, 0.3);
    box-shadow: inset 0 0 3px rgba(196, 60, 43, 0.1);
    color: #C43C35;
}
 
.constraint-status-error input:hover,
.constraint-status-error input:focus,
.constraint-status-error textarea:hover,
.constraint-status-error textarea:focus {
    border-color: rgba(196, 60, 43, 0.5);
    box-shadow: inset 0 0 6px rgba(196, 60, 43, 0.3);
    color: #C43C35;
}
 
.text-status-constraint {
    position:absolute;
    display: block;
    z-index: 1;
    padding: 6px 5px;
    left: 5px;
    min-width: 20em;
    background-color: #FEFEFE;
    border: 1px solid #EAEAEA;
    box-shadow: 1px 3px 6px rgba(0, 0, 0, 0.3);
    border-radius: 3px;
    font-size: 0.8em;
    font-weight: bold;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
}
 
input + .text-status-constraint {
    top: 25px;
}
 
.text-status-constraint:after,
.text-status-constraint:before {
    content: " ";
    position: absolute;
}
 
.text-status-constraint:before {
    left: 8px;
    top: -9px;
    border-bottom: 9px solid rgba(230, 230, 230, 1);
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
}
 
.text-status-constraint:after {
    left: 9px;
    top: -8px;
    border-bottom: 8px solid rgba(250, 250, 250, 1);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
}
 
div.field-required:after,
div.picture-status-constraint:after {
    display: inline-block;
    position: absolute;
    right: 4px;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
 
div.field-required:after {
    top: 10px;
    opacity: 0.6;
    color: #C43C35;
    font-size: 0.8rem;
    content: "\f069";
}
 
.form-field-date.field-required:after,
.form-field-date.picture-status-constraint:after {
    right: 24px;
}
 
.form-field-select.field-required:after,
.form-field-number.field-required:after,
.form-field-decimal.field-required:after {
    right: -10px;
}
 
.form-field-datetime.field-required:after {
    right: -15px;
}
 
.form-field-checkbox.field-required:after {
    right: -20px;
    top: 0;
}
 
.form-field-upload-file.field-required:after {
    right: 43px;
    top: 12px;
}
 
.constraint-status-right .form-field-upload-file.picture-status-constraint:after {
    right: 40px;
    top: 8px;
}
 
.constraint-status-right .form-field-color:after,
.constraint-status-right .form-field-select:after,
.constraint-status-right .form-field-number:after,
.constraint-status-right .form-field-decimal:after {
    right: -20px;
}
 
.constraint-statuts-right .form-field-checkbox:after {
    top: 4px;
}
 
.constraint-statuts-right .form-field-datetime:after {
    right: -22px;
}
 
.form-field-number input,
.form-field-decimal input,
.form-field-datetime input {
    padding-right: 2px;
}
 
.form-element-date .constraint-status-error div.field-required:after,
.form-element-date .constraint-status-right div.field-required:after {
    right: 10px;
}
 
.form-field-textarea.field-required:after,
.constraint-status-right .form-field-textarea.field-required:after,
.constraint-status-right .form-field-textarea.field-required:after {
    top: 45%;
}
 
.constraint-status-right div.field-required:after {
    content: " ";
}
 
.constraint-status-right div.form-field-checkbox.picture-status-constraint:after {
    top: 0;
}
 
.constraint-status-right div.picture-status-constraint:after {
    opacity: 1;
    font-size: 1.5rem;
    top: 6px;
}
 
.constraint-status-error .form-field-textarea .picture-status-constraint:after,
.constraint-status-right .form-field-textarea .picture-status-constraint:after {
    top: 40%;
}
 
.constraint-status-right div.picture-status-constraint:after {
    content: "\f00c";
    color: #57A957;
}
 
.constraint-status-error i.picture-status-constraint {
    content: "\f056";
    color: #C43C35;
}
 
.form-field-multi-select.field-required:after {
    display: none;
}
 
.constraint-status-right .form-field-multi-select select {
    border-color: rgba(71, 137, 72, 0.3);
    box-shadow: 0 0 5px rgba(71, 137, 72, 0.1);
}
 
.form-field-radio-button.field-required:after,
.form-field-multiple-checkbox.field-required:after {
    top: 4px;
    right: -10px;
}
 
.form-field-radio {
    display: inline-block;
}

les champs d'auto-complétion


Code CSS : 
.autocomplete-suggestions {
    background-color: #FFFFFF;
    border: 1px solid #999999;
    overflow: auto;
}
 
.autocomplete-suggestions strong {
    font-weight: normal;
    color: #3399FF;
}
 
.autocomplete-suggestion {
    padding: 2px 5px;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
}
 
.autocomplete-selected {
    background-color: #F0F0F0;
}
 
.autocomplete-no-suggestion {
    text-align: center;
}
Cette page a été vue 2762 fois