Projet

Général

Profil

Paste
Télécharger (11,7 ko) Statistiques
| Branche: | Révision:

root / drupal7 / sites / all / themes / bootstrap / bootstrap_subtheme / less / overrides.less @ 87dbc3bf

1
// Bootstrap variables.
2
@import 'variables.less';
3

    
4
// Media query variables.
5
@tablet:  ~"screen and (min-width: @{screen-sm-min})";
6
@normal:  ~"screen and (min-width: @{screen-md-min})";
7
@wide:    ~"screen and (min-width: @{screen-lg-min})";
8

    
9
// Drop shadows.
10
.box-shadow(@shadow) {
11
  -webkit-box-shadow: @shadow;
12
     -moz-box-shadow: @shadow;
13
          box-shadow: @shadow;
14
}
15

    
16
html {
17
  &.overlay-open .navbar-fixed-top {
18
    z-index: 400;
19
  }
20
  &.js {
21
    // Collapsible fieldsets.
22
    fieldset.collapsed {
23
     height: auto;
24
    }
25
    // Throbbers.
26
    input.form-autocomplete {
27
      background-image: none;
28
    }
29
  }
30
}
31
body {
32
  // Fix horizontal scrolling on iOS devices.
33
  // http://drupal.org/node/1870076
34
  position: relative;
35
  &.admin-expanded.admin-vertical.admin-nw .navbar,
36
  &.admin-expanded.admin-vertical.admin-sw .navbar {
37
    margin-left: 260px;
38
  }
39
  // Add padding to body if various toolbar or navbars are fixed on top.
40
  &.navbar-is-fixed-top {
41
    padding-top: 64px !important;
42
  }
43
  &.navbar-is-fixed-bottom {
44
    padding-bottom: 64px !important;
45
  }
46
  &.toolbar {
47
    padding-top: 30px !important;
48
    .navbar-fixed-top {
49
      top: 30px;
50
    }
51
    &.navbar-is-fixed-top {
52
      padding-top: 94px !important;
53
    }
54
  }
55
  &.toolbar-drawer {
56
    padding-top: 64px !important;
57
    .navbar-fixed-top {
58
      top: 64px;
59
    }
60
    &.navbar-is-fixed-top {
61
      padding-top: 128px !important;
62
    }
63
  }
64
  // Admin_menu toolbar.
65
  &.admin-menu {
66
    .navbar-fixed-top {
67
      top: 29px;
68
    }
69
    &.navbar-is-fixed-top {
70
      padding-top: 93px !important;
71
    }
72
  }
73
  div#admin-toolbar {
74
    z-index: 1600;
75
  }
76
  // Override box-shadow styles on all "admin" menus.
77
  #toolbar, #admin-menu, #admin-toolbar {
78
    .box-shadow(none);
79
  }
80
  // Override #admin-menu style.
81
  #admin-menu {
82
    margin: 0;
83
    padding: 0;
84
    position: fixed;
85
    z-index: 1600;
86
    .dropdown li {
87
      line-height: normal;
88
    }
89
  }
90
}
91

    
92
// Default navbar.
93
.navbar.container {
94
  @media @tablet {
95
    max-width: ((@container-sm - 30px));
96
  }
97
  @media @normal {
98
    max-width: ((@container-md - 30px));
99
  }
100
  @media @wide {
101
    max-width: ((@container-lg - 30px));
102
  }
103
  margin-top: 20px;
104
  > .container {
105
    margin: 0;
106
    padding: 0;
107
    width: auto;
108
  }
109
}
110

    
111
// Adjust z-index of core components.
112
#overlay-container,
113
.overlay-modal-background,
114
.overlay-element {
115
  z-index: 1500;
116
}
117
#toolbar {
118
  z-index: 1600;
119
}
120
// Adjust z-index of bootstrap modals
121
.modal {
122
  z-index: 1620;
123
}
124
.modal-dialog {
125
  z-index: 1630;
126
}
127
.modal-backdrop {
128
  z-index: 1610;
129
}
130
.footer {
131
  margin-top: 45px;
132
  padding-top: 35px;
133
  padding-bottom: 36px;
134
  border-top: 1px solid #E5E5E5;
135
}
136

    
137
// Element invisible fix
138
.element-invisible {
139
  margin: 0;
140
  padding: 0;
141
  width: 1px;
142
}
143

    
144
// Branding.
145
.navbar .logo {
146
  margin-right: -15px;
147
  padding-left: 15px;
148
  padding-right: 15px;
149
  @media @tablet {
150
    margin-right: 0;
151
    padding-left: 0;
152
  }
153
}
154

    
155
// Navigation.
156
ul.secondary {
157
  float: left;
158
  @media @tablet {
159
    float: right;
160
  }
161
}
162

    
163
// Page header.
164
.page-header {
165
  margin-top: 0;
166
}
167

    
168
// Blocks
169
.block {
170
  &:first-child h2.block-title {
171
    margin-top: 0;
172
  }
173
}
174

    
175
// Paragraphs.
176
p:last-child {
177
  margin-bottom: 0;
178
}
179

    
180
// Help region.
181
.region-help {
182
  > .glyphicon {
183
    font-size: @font-size-large;
184
    float: left;
185
    margin: -0.05em 0.5em 0 0;
186
  }
187
  .block {
188
    overflow: hidden;
189
  }
190
}
191

    
192
// Search form.
193
form#search-block-form {
194
  margin: 0;
195
}
196
.navbar #block-search-form {
197
  float: none;
198
  margin: 5px 0 5px 5px;
199
  @media @normal {
200
    float: right;
201
  }
202
}
203
.navbar-search .control-group {
204
  margin-bottom:0px;
205
}
206

    
207
// Action Links
208
ul.action-links {
209
  margin: @padding-base-horizontal 0;
210
  padding: 0;
211
  li {
212
    display: inline;
213
    margin: 0;
214
    padding: 0 @padding-base-vertical 0 0;
215
  }
216
  .glyphicon {
217
    padding-right: 0.5em;
218
  }
219
}
220

    
221
// Form elements.
222
input, textarea, select, .uneditable-input {
223
  max-width: 100%;
224
  width: auto;
225
}
226
input.error {
227
  color: @state-danger-text;
228
  border-color: @state-danger-border;
229
}
230
fieldset legend.panel-heading {
231
  float: left;
232
  line-height: 1em;
233
  margin: 0;
234
}
235
fieldset .panel-body {
236
  clear: both;
237
}
238
fieldset .panel-heading a.panel-title {
239
  color: inherit;
240
  display: block;
241
  margin: -10px -15px;
242
  padding: 10px 15px;
243
  &:hover {
244
    text-decoration: none;
245
  }
246
}
247
.form-actions{
248
  clear: both;
249
}
250
.resizable-textarea textarea {
251
  border-radius: @border-radius-base @border-radius-base 0 0;
252
}
253
.radio, .checkbox {
254
  &:first-child {
255
    margin-top: 0;
256
  }
257
  &:last-child {
258
    margin-bottom: 0;
259
  }
260
}
261
.help-block, .control-group .help-inline {
262
  color: @gray-light;
263
  font-size: 12px;
264
  margin: 5px 0 10px;
265
  padding: 0;
266
}
267
.panel-heading {
268
  display: block;
269
}
270
a.tabledrag-handle .handle {
271
  height: auto;
272
  width: auto;
273
}
274

    
275
// Error containers.
276
.error {
277
  color: @state-danger-text;
278
}
279
div.error,
280
table tr.error {
281
  background-color: @state-danger-bg;
282
  color: @state-danger-text;
283
}
284
.control-group.error {
285
  background: none;
286
  label, .control-label {
287
    color: @state-danger-text;
288
    font-weight: 600;
289
  }
290
  input, textarea, select, .uneditable-input {
291
    color: @input-color;
292
    border: 1px solid @input-border;
293
  }
294
  .help-block, .help-inline {
295
    color: @text-color;
296
  }
297
}
298

    
299
// Lists
300
.list-inline {
301
  > li.first {
302
    padding-left: 0;
303
  }
304
}
305
.nav-tabs {
306
  margin-bottom: 10px;
307
}
308
ul li.collapsed,
309
ul li.expanded,
310
ul li.leaf {
311
  list-style: none;
312
  list-style-image: none;
313
}
314
.tabs--secondary {
315
  margin: 0 0 10px;
316
}
317

    
318
// Submitted
319
.submitted {
320
  margin-bottom: 1em;
321
  font-style: italic;
322
  font-weight: normal;
323
  color: #777;
324
}
325

    
326
// Password strength indicator.
327
.password-strength {
328
  width: 17em;
329
  float: right;  /* LTR */
330
  margin-top: 1.4em;
331
}
332
.password-strength-title {
333
  display: inline;
334
}
335
.password-strength-text {
336
  float: right; /* LTR */
337
  font-weight: bold;
338
}
339
.password-indicator {
340
  background-color: darken(@input-color-placeholder, 2%);
341
  height: 0.3em;
342
  width: 100%;
343
  div {
344
    height: 100%;
345
    width: 0%;
346
    background-color: @input-color-placeholder;
347
  }
348
}
349
input.password-confirm,
350
input.password-field {
351
  width: 16em;
352
  margin-bottom: 0.4em;
353
}
354
div.password-confirm {
355
  float: right;  /* LTR */
356
  margin-top: 1.5em;
357
  visibility: hidden;
358
  width: 17em;
359
}
360
div.form-item div.password-suggestions {
361
  padding: 0.2em 0.5em;
362
  margin: 0.7em 0;
363
  width: 38.5em;
364
  border: 1px solid #B4B4B4;
365
}
366
div.password-suggestions ul {
367
  margin-bottom: 0;
368
}
369
.confirm-parent,
370
.password-parent {
371
  clear: left; /* LTR */
372
  margin: 0;
373
  width: 36.3em;
374
}
375

    
376
// Progress bar.
377
.progress-wrapper .progress {
378
  margin-bottom: 10px;
379
}
380

    
381
// Views AJAX pager.
382
.pagination ul > li > a {
383
  &.progress-disabled {
384
    float: left;
385
  }
386
}
387

    
388
// Autocomplete and throbber
389
.form-autocomplete {
390
  .glyphicon {
391
    color: @gray-light;
392
    font-size: 120%;
393
    &.glyphicon-spin {
394
      color: @brand-primary;
395
    }
396
  }
397
  .input-group-addon {
398
    background-color: rgb(255, 255, 255);
399
  }
400
}
401

    
402
// AJAX "Throbber".
403
.ajax-progress {
404
  .glyphicon {
405
    font-size: 90%;
406
    margin: 0 -.25em 0 0.5em;
407
  }
408
}
409

    
410
.glyphicon-spin {
411
  display: inline-block;
412
  -moz-animation: spin 1s infinite linear;
413
  -o-animation: spin 1s infinite linear;
414
  -webkit-animation: spin 1s infinite linear;
415
  animation: spin 1s infinite linear;
416
}
417
a .glyphicon-spin {
418
  display: inline-block;
419
  text-decoration: none;
420
}
421
@-moz-keyframes spin {
422
  0% {
423
    -moz-transform: rotate(0deg);
424
  }
425
  100% {
426
    -moz-transform: rotate(359deg);
427
  }
428
}
429
@-webkit-keyframes spin {
430
  0% {
431
    -webkit-transform: rotate(0deg);
432
  }
433
  100% {
434
    -webkit-transform: rotate(359deg);
435
  }
436
}
437
@-o-keyframes spin {
438
  0% {
439
    -o-transform: rotate(0deg);
440
  }
441
  100% {
442
    -o-transform: rotate(359deg);
443
  }
444
}
445
@-ms-keyframes spin {
446
  0% {
447
    -ms-transform: rotate(0deg);
448
  }
449
  100% {
450
    -ms-transform: rotate(359deg);
451
  }
452
}
453
@keyframes spin {
454
  0% {
455
    transform: rotate(0deg);
456
  }
457
  100% {
458
    transform: rotate(359deg);
459
  }
460
}
461

    
462
.glyphicon-refresh {
463
  -webkit-transform-origin: 50% 45%;
464
  -moz-transform-origin: 50% 45%;
465
  -ms-transform-origin: 50% 45%;
466
  -o-transform-origin: 50% 45%;
467
  transform-origin: 50% 45%;
468
}
469

    
470
/**
471
 * Missing Bootstrap 2 tab styling.
472
 * @see http://stackoverflow.com/questions/18432577/stacked-tabs-in-bootstrap-3
473
 * @see http://bootply.com/74926
474
 */
475
.tabbable {
476
  margin-bottom: 20px;
477
}
478
.tabs-below, .tabs-left, .tabs-right {
479
  > .nav-tabs {
480
    border-bottom: 0;
481
    .summary {
482
      color: @nav-disabled-link-color;
483
      font-size: @font-size-small;
484
    }
485
  }
486
}
487
.tab-pane > .panel-heading {
488
  display: none;
489
}
490
.tab-content > .active {
491
  display: block;
492
}
493

    
494
// Below.
495
.tabs-below {
496
  > .nav-tabs {
497
    border-top: 1px solid @nav-tabs-border-color;
498
    > li {
499
      margin-top: -1px;
500
      margin-bottom: 0;
501
      > a {
502
        border-radius: 0 0 @border-radius-base @border-radius-base;
503
        &:hover,
504
        &:focus {
505
          border-top-color: @nav-tabs-border-color;
506
          border-bottom-color: transparent;
507
        }
508
      }
509
    }
510
    > .active {
511
      > a,
512
      > a:hover,
513
      > a:focus {
514
        border-color: transparent @nav-tabs-border-color @nav-tabs-border-color @nav-tabs-border-color;
515
      }
516
    }
517
  }
518
}
519

    
520
// Left and right tabs.
521
.tabs-left,
522
.tabs-right {
523
  > .nav-tabs {
524
    padding-bottom: 20px;
525
    width: 220px;
526
    > li {
527
      float: none;
528
      &:focus {
529
        outline: 0;
530
      }
531
      > a {
532
        margin-right: 0;
533
        margin-bottom: 3px;
534
        &:focus {
535
          outline: 0;
536
        }
537
      }
538
    }
539
  }
540
  > .tab-content {
541
    border-radius: 0 @border-radius-base @border-radius-base @border-radius-base;
542
    .box-shadow(0 1px 1px rgba(0,0,0,.05));
543
    border: 1px solid @nav-tabs-border-color;
544
    overflow: hidden;
545
    padding: 10px 15px;
546
  }
547
}
548

    
549
// Left tabs.
550
.tabs-left {
551
  > .nav-tabs {
552
    float: left;
553
    margin-right: -1px;
554
    > li > a {
555
      border-radius: @border-radius-base 0 0 @border-radius-base;
556
      &:hover,
557
      &:focus {
558
        border-color: @nav-tabs-link-hover-border-color @nav-tabs-border-color @nav-tabs-link-hover-border-color @nav-tabs-link-hover-border-color;
559
      }
560
    }
561
    > .active > a,
562
    > .active > a:hover,
563
    > .active > a:focus {
564
      border-color: @nav-tabs-border-color transparent @nav-tabs-border-color @nav-tabs-border-color;
565
      .box-shadow(-1px 1px 1px rgba(0,0,0,.05));
566
    }
567
  }
568
}
569

    
570
// Right tabs.
571
.tabs-right {
572
  > .nav-tabs {
573
    float: right;
574
    margin-left: -1px;
575
    > li > a {
576
      border-radius: 0 @border-radius-base @border-radius-base 0;
577
      &:hover,
578
      &:focus {
579
        border-color: @nav-tabs-link-hover-border-color @nav-tabs-link-hover-border-color @nav-tabs-link-hover-border-color @nav-tabs-border-color;
580
        .box-shadow(1px 1px 1px rgba(0,0,0,.05));
581
      }
582
    }
583
    > .active > a,
584
    > .active > a:hover,
585
    > .active > a:focus {
586
      border-color: @nav-tabs-border-color @nav-tabs-border-color @nav-tabs-border-color transparent;
587
    }
588
  }
589
}
590

    
591
// Checkbox cell fix.
592
th.checkbox,
593
td.checkbox,
594
th.radio,
595
td.radio {
596
  display: table-cell;
597
}
598

    
599
// Views UI fixes.
600
.views-display-settings {
601
  .label {
602
    font-size: 100%;
603
    color:#666666;
604
  }
605
  .footer {
606
    padding:0;
607
    margin:4px 0 0 0;
608
  }
609
}
610

    
611
// Radio and checkbox in table fixes
612
table {
613
  .radio input[type="radio"],
614
  .checkbox input[type="checkbox"] {
615
    max-width: inherit;
616
  }
617
}
618

    
619
// Exposed filters
620
.form-horizontal .form-group label {
621
  position: relative;
622
  min-height: 1px;
623
  margin-top: 0;
624
  margin-bottom: 0;
625
  padding-top: 7px;
626
  padding-left:  (@grid-gutter-width / 2);
627
  padding-right: (@grid-gutter-width / 2);
628
  text-align: right;
629

    
630
  @media (min-width: @screen-sm-min) {
631
    float: left;
632
    width: percentage((2 / @grid-columns));
633
  }
634
}
635

    
636
// Treat all links inside alert as .alert-link
637
.alert a {
638
  font-weight: @alert-link-font-weight;
639
}
640
.alert-success a {
641
  color: darken(@alert-success-text, 10%);
642
}
643
.alert-info a {
644
  color: darken(@alert-info-text, 10%);
645
}
646
.alert-warning a {
647
  color: darken(@alert-warning-text, 10%);
648
}
649
.alert-danger a {
650
  color: darken(@alert-danger-text, 10%);
651
}