baz_april/squelettes/scss/components/_forms.scss
2020-05-16 12:21:49 +02:00

386 lines
8.0 KiB
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;
.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 {
border-left: 6px solid #F5F5F5;
padding-left: 1.5em;
}
}
/* 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-weight: bold;
font-style: normal;
text-transform: uppercase;
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;
}
}
}
}
}