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

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

fix formulaire de login et nouvelles couleurs

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