source: spip-zone/_galaxie_/trad.spip.net/trunk/theme/css/_components.scss @ 120027

Last change on this file since 120027 was 120027, checked in by Cerdic, 2 months ago

distributions, grappe, recherche, crayons

File size: 7.3 KB
Line 
1.spip-admin-bloc, .spip-admin-float {
2  font-size: 0.7rem;
3  top:auto !important;
4  bottom: 0 !important;
5  right: 0 !important;
6  .spip-admin-boutons {
7    background-color: $gray-600;
8    border-radius: $border-radius-sm 0 0 $border-radius-sm;
9    display: block;
10    margin: 5px 0;
11    font-variant: small-caps;
12    text-transform: capitalize;
13  }
14
15  &:before {
16    content:'';
17    display: block;
18    background: $gray-500;
19    color: $white;
20    padding: 10px;
21    position: fixed;
22    bottom:0;
23    left: 0;
24    font-weight: bold;
25    @each $breakpoint in map-keys($grid-breakpoints) {
26      @include media-breakpoint-up($breakpoint) {
27        content: '#{$breakpoint}';
28      }
29    }
30  }
31}
32
33img {
34  max-width:100%;
35  height:auto;
36}
37
38.crayon-html {
39  &:before {
40    box-shadow: 0 0 10px #888;
41  }
42  .editer_statut {
43    display: flex;
44    flex-wrap: wrap;
45    &>label {
46      flex-basis: 100%;
47      width: 100%;
48    }
49    .choix {
50      display: block;
51      flex-basis: 25%;
52      width: 25%;
53    }
54  }
55}
56
57.searchbar {
58  padding:0.25rem 0;
59  background: $gray-100;
60
61  #formulaire_recherche {
62    margin: 0;
63  }
64  font-size:$font-size-sm;
65  label {
66    margin-bottom:0;
67  }
68  input.text, select, .btn {
69    font-size:$font-size-sm;
70  }
71  input.text::placeholder {
72    color:$gray-500;
73  }
74  label {
75    position: absolute;
76    width: 1px;
77    height: 1px;
78    padding: 0;
79    overflow: hidden;
80  }
81  .input-group {
82    width: 50%;
83  }
84}
85
86.well {
87  border-radius:0;
88  border:0;
89}
90
91.table, table.spip {
92  font-size: 14rem/18;
93  th, td {
94    padding: 0.25rem;
95  }
96  @include media-breakpoint-up(xl) {
97    font-size: 16rem/18;
98    th, td {
99      padding: 0.5rem;
100    }
101  }
102  caption {
103    caption-side: top;
104    background-color: $primary;
105    color:$white;
106    padding: $padding-y-lg $padding-x-sm;
107    a {
108      @include link-nav(inherit, $gray-200) {
109        text-decoration: underline;
110        background: none;
111      }
112    }
113  }
114  .formulaire_favori {
115    font-size: 12rem/18;
116    margin: 0;
117    //margin-bottom:-0.5rem;
118    .ajouter_favori, .retirer_favori {
119      display: block;
120      position: relative;
121      .fav-title {
122        position: absolute;
123        right: 100%;
124        margin-right: 0.25rem;
125        padding:0.1rem 0.25rem;
126        background: #fff;
127      }
128      .fav-picto {
129        width: 1.5em;
130      }
131    }
132  }
133}
134.liste-objets {
135  .caption{
136    background-repeat:no-repeat;
137    height:24px;
138    display:block;
139    padding-left: 30px;
140  }
141  &.versions {
142    .caption {
143      background-image:url(img/revision-xx.svg);
144      background-size: contain;
145    }
146  }
147  .type {
148    img {
149      max-width: 32px;
150    }
151  }
152}
153.table-wrapper {
154  max-width: 100%;
155  overflow-x: auto;
156}
157
158.tablesorter-default{
159  .header, .tablesorter-header {
160    background-image: url(data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==);
161        background-position: center right;
162        background-repeat: no-repeat;
163        cursor: pointer;
164        white-space: normal;
165        padding-right: 20px;
166        position:relative;
167    &:after {
168      content:'';
169      display: block;
170      position: absolute;
171      bottom:-2px;
172      left:0;
173      width: 100%;
174      border-bottom: 2px solid #aaa;
175    }
176    &.headerSortUp, &.tablesorter-headerAsc, &.tablesorter-headerSortUp {
177      background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7);
178      &:after {
179        border-bottom: 2px solid #000;
180      }
181    }
182    &.headerSortDown, &.tablesorter-headerDesc, &.tablesorter-headerSortDown {
183      background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7);
184      &:after {
185        border-bottom: 2px solid #000;
186      }
187    }
188  }
189  .sorter-false {
190        background-image: none;
191        cursor: default;
192  }
193  .tablesorter-processing {
194        background-position: center center !important;
195        background-repeat: no-repeat !important;
196        background-image: url(data:image/gif;base64,R0lGODlhFAAUAKEAAO7u7lpaWgAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQBCgACACwAAAAAFAAUAAACQZRvoIDtu1wLQUAlqKTVxqwhXIiBnDg6Y4eyx4lKW5XK7wrLeK3vbq8J2W4T4e1nMhpWrZCTt3xKZ8kgsggdJmUFACH5BAEKAAIALAcAAAALAAcAAAIUVB6ii7jajgCAuUmtovxtXnmdUAAAIfkEAQoAAgAsDQACAAcACwAAAhRUIpmHy/3gUVQAQO9NetuugCFWAAAh+QQBCgACACwNAAcABwALAAACE5QVcZjKbVo6ck2AF95m5/6BSwEAIfkEAQoAAgAsBwANAAsABwAAAhOUH3kr6QaAcSrGWe1VQl+mMUIBACH5BAEKAAIALAIADQALAAcAAAIUlICmh7ncTAgqijkruDiv7n2YUAAAIfkEAQoAAgAsAAAHAAcACwAAAhQUIGmHyedehIoqFXLKfPOAaZdWAAAh+QQFCgACACwAAAIABwALAAACFJQFcJiXb15zLYRl7cla8OtlGGgUADs=) !important
197  }
198  .tablesorter-filter-row {
199    td {
200      border-bottom: #aaa 1px solid;
201      line-height: normal;
202      text-align: center;
203      transition: line-height .1s ease
204    }
205    .disabled {
206      opacity: .5;
207      cursor: not-allowed
208    }
209
210    &.hideme {
211      td {
212        padding: 2px;
213        margin: 0;
214        line-height: 0;
215        cursor: pointer
216      }
217      * {
218        height: 1px;
219        min-height: 0;
220        border: 0;
221        padding: 0;
222        margin: 0;
223        opacity: 0
224      }
225    }
226  }
227  input.tablesorter-filter, select.tablesorter-filter {
228        width: 95%;
229        height: auto;
230        margin: 4px auto;
231        padding: 4px;
232        background-color: #fff;
233        border: 1px solid #bbb;
234        color: #333;
235        box-sizing: border-box;
236        transition: height .1s ease
237  }
238
239  .thead_flottant {
240        position: sticky !important;
241        top:0;
242        width:100% !important;
243  }
244
245  .filtered {
246        display: none
247  }
248
249  .tablesorter-errorRow td {
250        text-align: center;
251        cursor: pointer;
252        background-color: #e6bf99
253  }
254
255}
256
257.formulaire_spip {
258  .chosen-single, .chosen-drop {
259    color: $gray-800 !important;
260    padding: 0.25rem 0.5rem;
261    min-height: 2.5em;
262  }
263  fieldset>.editer-groupe {
264    margin-bottom: 0;
265  }
266}
267.formulaire_tradlang_choisir_module {
268  .editer-groupe {
269    @include media-breakpoint-up(sm) {
270      margin: 0 -1.5rem;
271      display: flex;
272      flex-wrap: wrap;
273      .editer {
274        margin: 0;
275        width: 50%;
276        flex-basis: 50%;
277        max-width: 50%;
278
279        &.editer_choisir_module {
280          order: 1;
281        }
282
283        &.editer_choisir_lang_orig {
284          order: 2;
285        }
286
287        &.editer_choisir_lang_cible {
288          order: 4;
289        }
290
291        &.editer_creer_lang_cible {
292          order: 3;
293        }
294      }
295    }
296    .editer {
297      &.editer_choisir_lang_cible {
298        &.disabled {
299          opacity: 0.5;
300          &:hover, &:focus {
301            opacity: 1;
302          }
303        }
304      }
305      &.editer_creer_lang_cible {
306        opacity: 0.5;
307        &:hover, &:focus, &.focus {
308          opacity: 1;
309        }
310      }
311      display: flex;
312      flex-direction: column;
313      .explication {
314        order:5;
315        margin: 0.25 * $rem-vert-margin;
316        font-size: 16/18rem;
317      }
318    }
319  }
320}
321.formulaire_switcher_langue {
322  legend {
323    display: none;
324  }
325  fieldset, .editer-groupe {
326    margin: 0;
327  }
328  .boutons {
329    padding-top: 1rem;
330    padding-bottom: 1rem;
331  }
332  select {
333    max-height: 5em;
334  }
335}
336
337.tab-container {
338  .nav-tabs {
339
340  }
341  .tab-content {
342    background: $nav-tabs-link-active-bg;
343    padding: $padding-y-lg $padding-x-lg;
344    .tab-content-inner {
345      display: flex;
346      overflow: hidden;
347      .tab-pane{
348        display: block;
349        flex-basis: 100%;
350        width: 100%;
351        order:2;
352        flex-shrink: 0;
353        &.active {
354          order: 1;
355        }
356      }
357    }
358  }
359}
Note: See TracBrowser for help on using the repository browser.