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

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

page bilan wip

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