source: spip-zone/_plugins_/bootstrap/trunk/bootstrap2spip/css/_forms.scss @ 115267

Last change on this file since 115267 was 115267, checked in by cedric@…, 18 months ago

Fix button & form : la combinaison du :not(.btn-link) et des .btn:not() cibles par le @extend cassaient certains selecteurs
Cette variante est plus saine et evite de produire plein de code superflu par combinaisons multiples des selecteurs css etendus

File size: 6.5 KB
Line 
1@import "bootstrap/css/_forms";
2
3legend {
4        font-size: $h3-font-size;
5        line-height: $line-height-base / ($h3-font-size / $font-size-base);
6        margin-bottom: $rem-vert-margin / 2;
7        margin-top: $rem-vert-margin / 2;
8        border-bottom: $input-border-width solid $input-border-color;
9}
10
11/* Surcharge RTL */
12.rtl {
13  .form-search .input-append .search-query {
14                border-radius : 0 14px 14px 0;
15  }
16  .form-search .input-append .btn {
17                border-radius : 14px 0 0 14px;
18  }
19  .form-search .input-prepend .search-query {
20                border-radius : 14px 0 0 14px;
21  }
22  .form-search .input-prepend .btn {
23                border-radius : 0 14px 14px 0;
24  }
25}
26
27
28/* Structure generale des formulaires
29----------------------------------------------- */
30$form-padding: $spacer !default;
31$form-padding-sm: $spacer / 2 !default;
32
33.formulaire_spip {
34        clear: both;
35        margin-bottom: $rem-vert-margin;
36        padding: $form-padding;
37        background-color: $form-bg;
38        position: relative;
39}
40.formulaire_spip form {margin-bottom: 0}
41.formulaire_spip .boutons {
42        background-color: $form-bg;
43        border-top: 1px solid $input-group-addon-border-color;
44        @include clearfix(); // Adding clearfix to allow for .pull-right button containers
45        margin: 0 -1 * $form-padding -1 * $form-padding;
46        padding: $form-padding;
47        text-align: right;
48}
49.secondary {
50  .formulaire_spip {padding: $form-padding-sm;}
51  .formulaire_spip .boutons {margin: 0 -1 * $form-padding-sm -1 * $form-padding-sm; padding: $form-padding-sm;}
52}
53
54input.submit, .formulaire_spip button.submit:not(.btn-link) {
55        @extend %btn-base;
56}
57
58body {
59        input.submit, .formulaire_spip button.submit:not(.btn-link) {
60                @include button-variant(theme-color("light"), $input-group-addon-border-color);
61        }
62}
63
64
65
66/* Lignes */
67.formulaire_spip .editer-groupe,
68// et compat legacy
69.formulaire_spip >div>ul,
70.formulaire_spip fieldset>ul,
71.formulaire_spip .fieldset>ul,
72.formulaire_spip form>ul,
73.formulaire_spip form>div>ul {margin-left: 0;list-style: none;margin-bottom: $form-group-margin-bottom;}
74
75.formulaire_spip .editer { list-style: none;clear: both; margin: 0 -1 * $form-padding; padding: $rem-vert-margin / 4 $form-padding $rem-vert-margin / 2; }
76
77.formulaire_spip label {font-weight: inherit;margin-bottom: $rem-vert-margin / 4}
78
79/* Explications */
80.formulaire_spip .explication {
81        display: block;
82        color: lighten($body-color, 25%); // lighten the text some for contrast
83        margin:0 0 $rem-vert-margin;
84}
85.formulaire_spip .editer .explication {margin:$rem-vert-margin / 4 0; }
86.formulaire_spip .editer label+.explication {margin-top: -$rem-vert-margin / 4}
87
88/* Champs obligatoires */
89.formulaire_spip .editer.obligatoire {}
90.formulaire_spip .editer.obligatoire label {font-weight: bold;}
91
92/* choix */
93.formulaire_spip input.radio, .formulaire_spip input.checkbox {display:inline-block;}
94.formulaire_spip .choix label {display:inline;font-weight:normal;}
95.formulaire_spip .choix input.radio, .formulaire_spip .choix input.checkbox {
96        width:auto;
97        margin: $form-check-input-margin-y $form-check-input-margin-x;
98        margin-left:0;
99        margin-bottom: 1px;
100}
101
102/* choix de mot dans le form forum notamment */
103.formulaire_spip .choix_mots {
104        display: flex;
105        flex-wrap: wrap;
106        justify-content: flex-start;
107}
108.formulaire_spip .choix_mots .saisie_mot {
109        flex-grow:1;
110        flex-basis:50%;
111        @include media-breakpoint-down(sm) {
112                flex-basis:100%;
113        }
114}
115.formulaire_spip .choix_mots .saisie_mot:nth-child(2n-1) {clear: both;}
116.formulaire_spip .choix_mots .saisie_mot label {display:inline;font-weight:normal;}
117.formulaire_spip .choix_mots .saisie_mot input.radio,
118.formulaire_spip .choix_mots .saisie_mot input.checkbox {
119        width:auto;
120        margin: $form-check-input-margin-y $form-check-input-margin-x;
121        margin-left:0;
122        margin-bottom: 1px;
123}
124
125
126/* Champs de saisie */
127.formulaire_spip {
128        input.text,input.password,input.email,input.date,
129        textarea,
130        select {
131                @extend .form-control;
132        }
133        textarea {height: auto;}
134
135        .markItUp .markItUpContainer .markItUpHeader {width: 100%;padding-right: 6px;padding-left: 6px;}
136        .markItUp .markItUpContainer .markItUpHeader + textarea {border-top-left-radius: 0;border-top-right-radius: 0;border-top:0;}
137}
138
139
140/* Reponses, previsu et erreurs
141----------------------------------------------- */
142
143/* * Erreurs */
144.editer.erreur {
145        background-color: theme-color-level('danger', $alert-bg-level);
146        input.text,input.password,input.email,input.date,
147        textarea,
148        select {
149        border-color: theme-color-level('danger', $alert-border-level);
150        //box-shadow: inset 0 1px 1px rgba(0,0,0,.075); // Redeclare so transitions work
151                &:focus {
152                  border-color: darken(theme-color-level('danger', $alert-border-level), 10%);
153                  //@shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@state-danger-text, 20%);
154                  //.box-shadow(@shadow);
155                }
156        }
157}
158.editer .erreur_message { display: block; color: theme-color-level('danger', $alert-color-level); font-weight: bold;}
159.editer .erreur_message label {display: inline;}
160.editer .erreur_message input {margin: 0;}
161
162/* Reponses */
163.reponse_formulaire {
164        @extend .alert;
165}
166.reponse_formulaire_ok {
167        @include alert-variant(theme-color-level('success', $alert-bg-level), theme-color-level('success', $alert-border-level), theme-color-level('success', $alert-color-level));
168}
169.reponse_formulaire_erreur {
170        @include alert-variant(theme-color-level('danger', $alert-bg-level), theme-color-level('danger', $alert-border-level), theme-color-level('danger', $alert-color-level));
171}
172
173/* Variantes et cas particuliers
174----------------------------------------------- */
175
176/* quelques fieldset.info qui ne sont pas des messages d'info */
177.formulaire_spip fieldset.info {
178  background-color: inherit;
179  color: inherit;
180  text-shadow:inherit;
181  border-radius: inherit;
182}
183
184/* Selection des langues */
185.formulaire_menu_lang { margin: 0; padding: 0; background: none; border: 0;}
186.formulaire_menu_lang form select {
187        width: 100%;
188}
189
190/* Formulaires de recherche (site / petitions) */
191.formulaire_recherche,.secondary .formulaire_recherche {
192        padding: 0;
193        background: none;
194        border: 0;
195        .btn {
196                @include button-variant(theme-color("light"), $input-group-addon-border-color);
197        }
198}
199#formulaire_recherche {
200        padding-right: 0;
201}
202
203/* Formulaire de login dans une page */
204.formulaire_login .editer-groupe {position: relative;}
205.formulaire_login form .editer {clear:left;}
206.formulaire_login form input.text,
207.formulaire_login form input.password {
208        width: 60%;
209        @include media-breakpoint-down(sm) {
210                width: 100%;
211        }
212}
213
214.formulaire_login form .editer_password .details {margin-bottom:0;}
215.formulaire_login #spip_logo_auteur {
216        position: absolute;
217        top:0;
218        right: 0;
219        @include media-breakpoint-down(sm) {
220                margin-top: -35px;
221        }
222}
223
Note: See TracBrowser for help on using the repository browser.