Projet

Général

Profil

Paste
Télécharger (16,3 ko) Statistiques
| Branche: | Révision:

root / drupal7 / sites / all / themes / bootstrap / starterkits / less / less / overrides.less @ 7547bb19

1
// Media query variables.
2
@tablet:              ~"screen and (min-width: @{screen-sm-min})";
3
@normal:              ~"screen and (min-width: @{screen-md-min})";
4
@wide:                ~"screen and (min-width: @{screen-lg-min})";
5
@grid-breakpoint:     ~"screen and (min-width: @{grid-float-breakpoint})";
6

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

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

    
108
// Default navbar.
109
.navbar {
110
  &.container {
111
    @media @tablet {
112
      max-width: ((@container-sm - @grid-gutter-width));
113
    }
114
    @media @normal {
115
      max-width: ((@container-md - @grid-gutter-width));
116
    }
117
    @media @wide {
118
      max-width: ((@container-lg - @grid-gutter-width));
119
    }
120
  }
121
  &.container,
122
  &.container-fluid {
123
    margin-top: 20px;
124
  }
125
  &.container > .container,
126
  &.container-fluid > .container-fluid {
127
    margin: 0;
128
    padding: 0;
129
    width: auto;
130
  }
131
}
132

    
133
// Adjust z-index of core components.
134
#overlay-container,
135
.overlay-modal-background,
136
.overlay-element {
137
  z-index: 1500;
138
}
139
#toolbar {
140
  z-index: 1600;
141
}
142
// Adjust z-index of bootstrap modals
143
.modal {
144
  z-index: 1620;
145
}
146
.modal-dialog {
147
  z-index: 1630;
148
}
149
.ctools-modal-dialog .modal-body {
150
  width: 100% !important;
151
  overflow: auto;
152
}
153
.modal-backdrop {
154
  z-index: 1610;
155
}
156
.footer {
157
  margin-top: 45px;
158
  padding-top: 35px;
159
  padding-bottom: 36px;
160
  border-top: 1px solid #E5E5E5;
161
}
162

    
163
// Element invisible fix
164
.element-invisible {
165
  margin: 0;
166
  padding: 0;
167
  width: 1px;
168
}
169

    
170
// Branding.
171
.navbar .logo {
172
  margin-right: -15px;
173
  padding-left: 15px;
174
  padding-right: 15px;
175
  @media @grid-breakpoint {
176
    margin-right: 0;
177
    padding-left: 0;
178
  }
179
}
180

    
181
// Navigation.
182
ul.secondary {
183
  float: left;
184
  @media @tablet {
185
    float: right;
186
  }
187
}
188

    
189
// Page header.
190
.page-header {
191
  margin-top: 0;
192
}
193

    
194
// Sidebar blocks.
195
.region-sidebar-first,
196
.region-sidebar-second {
197
  .block:first-child h2.block-title {
198
    margin-top: 0;
199
  }
200
}
201

    
202
// Paragraphs.
203
p:last-child {
204
  margin-bottom: 0;
205
}
206

    
207
// Help region.
208
.region-help {
209
  > .glyphicon {
210
    font-size: @font-size-large;
211
    float: left;
212
    margin: -0.05em 0.5em 0 0;
213
  }
214
  .block {
215
    overflow: hidden;
216
  }
217
}
218

    
219
// Search form.
220
form#search-block-form {
221
  margin: 0;
222
}
223
.navbar #block-search-form {
224
  float: none;
225
  margin: 5px 0 5px 5px;
226
  @media @normal {
227
    float: right;
228
  }
229

    
230
  .input-group-btn {
231
    width: auto;
232
  }
233
}
234

    
235
// Action Links
236
ul.action-links {
237
  margin: @padding-base-horizontal 0;
238
  padding: 0;
239
  li {
240
    display: inline;
241
    margin: 0;
242
    padding: 0 @padding-base-vertical 0 0;
243
  }
244
  .glyphicon {
245
    padding-right: 0.5em;
246
  }
247
}
248

    
249
// Form elements.
250
input, textarea, select, .uneditable-input {
251
  max-width: 100%;
252
  width: auto;
253
}
254
input.error {
255
  color: @state-danger-text;
256
  border-color: @state-danger-border;
257
}
258
fieldset legend.panel-heading {
259
  float: left;
260
  line-height: 1em;
261
  margin: 0;
262
}
263
fieldset .panel-body {
264
  clear: both;
265
  display: inherit;
266
}
267
fieldset .panel-heading a.panel-title {
268
  color: inherit;
269
  display: block;
270
  margin: -10px -15px;
271
  padding: 10px 15px;
272
  &:hover {
273
    text-decoration: none;
274
  }
275
}
276
.form-group:last-child,
277
.panel:last-child {
278
  margin-bottom: 0;
279
}
280
.form-horizontal .form-group {
281
  margin-left: 0;
282
  margin-right: 0;
283
}
284
.form-actions{
285
  clear: both;
286
}
287
.managed-files.table {
288
  td:first-child {
289
    width: 100%;
290
  }
291
}
292
div.image-widget-data {
293
  float: none;
294
  overflow: hidden;
295
}
296
table.sticky-header {
297
  z-index: 1;
298
}
299
.resizable-textarea textarea {
300
  border-radius: @border-radius-base @border-radius-base 0 0;
301
}
302
.text-format-wrapper {
303
  // Use same value as .form-group.
304
  margin-bottom: 15px;
305
  > .form-type-textarea,
306
  .filter-wrapper {
307
    margin-bottom: 0;
308
  }
309
}
310
.filter-wrapper {
311
  border-radius: 0 0 @border-radius-base @border-radius-base;
312
  .panel-body {
313
    padding: 7px;
314
  }
315
  .form-type-select {
316
    min-width: 30%;
317
    .filter-list {
318
      width: 100%;
319
    }
320
  }
321
}
322
.filter-help {
323
  margin-top: 5px;
324
  text-align: center;
325
  @media @tablet {
326
    float: right;
327
  }
328
  .glyphicon {
329
    margin: 0 5px 0 0;
330
    vertical-align: text-top;
331
  }
332
}
333
.radio, .checkbox {
334
  &:first-child {
335
    margin-top: 0;
336
  }
337
  &:last-child {
338
    margin-bottom: 0;
339
  }
340
}
341
.help-block, .control-group .help-inline {
342
  color: @gray-light;
343
  font-size: 12px;
344
  margin: 5px 0 10px;
345
  padding: 0;
346
}
347
.panel-heading {
348
  display: block;
349
}
350
a.tabledrag-handle .handle {
351
  height: auto;
352
  width: auto;
353
}
354

    
355
// Error containers.
356
.error {
357
  color: @state-danger-text;
358
}
359
div.error,
360
table tr.error {
361
  background-color: @state-danger-bg;
362
  color: @state-danger-text;
363
}
364
.form-group.error,
365
.form-group.has-error {
366
  background: none;
367
  label, .control-label {
368
    color: @state-danger-text;
369
    font-weight: 600;
370
  }
371
  input, textarea, select, .uneditable-input {
372
    color: @input-color;
373
  }
374
  .help-block, .help-inline {
375
    color: @text-muted;
376
  }
377
}
378

    
379
// Lists
380
.nav-tabs {
381
  margin-bottom: 10px;
382
}
383
ul li.collapsed,
384
ul li.expanded,
385
ul li.leaf {
386
  list-style: none;
387
  list-style-image: none;
388
}
389
.tabs--secondary {
390
  margin: 0 0 10px;
391
}
392

    
393
// Submitted
394
.submitted {
395
  margin-bottom: 1em;
396
  font-style: italic;
397
  font-weight: normal;
398
  color: #777;
399
}
400

    
401
// Password strength/match.
402
.form-type-password-confirm {
403
  position: relative;
404
  label {
405
    display: block;
406
    .label {
407
      float: right;
408
    }
409
  }
410
  .password-help {
411
    padding-left: 2em;
412
    @media (min-width: @screen-sm-min) {
413
      border-left: 1px solid @table-border-color;
414
      left: percentage((6/12));
415
      margin-left: (@grid-gutter-width / 2);
416
      position: absolute;
417
    }
418
    @media (min-width: @screen-md-min) {
419
      left: percentage((4/12));
420
    }
421
  }
422
  .progress {
423
    background: transparent;
424
    -moz-border-radius: 0 0 5px 5px;
425
    -webkit-border-radius: 0 0 5px 5px;
426
    border-radius: 0 0 5px 5px;
427
    .box-shadow(none);
428
    height: 4px;
429
    margin: -5px 0px 0;
430
  }
431
  .form-type-password {
432
    clear: left;
433
  }
434
  .form-control-feedback {
435
    right: 15px;
436
  }
437
  .help-block {
438
    clear: both;
439
  }
440
}
441

    
442
// Views AJAX pager.
443
ul.pagination li > a {
444
  &.progress-disabled {
445
    float: left;
446
  }
447
}
448

    
449
// Autocomplete and throbber
450
.form-autocomplete {
451
  .glyphicon {
452
    color: @gray-light;
453
    font-size: 120%;
454
    &.glyphicon-spin {
455
      color: @brand-primary;
456
    }
457
  }
458
  .input-group-addon {
459
    background-color: rgb(255, 255, 255);
460
  }
461
  .dropdown a {
462
    white-space: normal;
463
  }
464
}
465

    
466
// AJAX "Progress bar".
467
.ajax-progress-bar {
468
  border-radius: 0 0 @border-radius-base @border-radius-base;
469
  border: 1px solid @input-group-addon-border-color;
470
  margin: -1px 0 0;
471
  padding: @padding-base-vertical @padding-base-horizontal;
472
  width: 100%;
473
  .progress {
474
    height: 8px;
475
    margin: 0;
476
  }
477
  .percentage,
478
  .message {
479
    color: @text-muted;
480
    font-size: @font-size-small;
481
    line-height: 1em;
482
    margin: 5px 0 0;
483
    padding: 0;
484
  }
485
}
486

    
487
.glyphicon-spin {
488
  display: inline-block;
489
  -moz-animation: spin 1s infinite linear;
490
  -o-animation: spin 1s infinite linear;
491
  -webkit-animation: spin 1s infinite linear;
492
  animation: spin 1s infinite linear;
493
}
494
a .glyphicon-spin {
495
  display: inline-block;
496
  text-decoration: none;
497
}
498
@-moz-keyframes spin {
499
  0% {
500
    -moz-transform: rotate(0deg);
501
  }
502
  100% {
503
    -moz-transform: rotate(359deg);
504
  }
505
}
506
@-webkit-keyframes spin {
507
  0% {
508
    -webkit-transform: rotate(0deg);
509
  }
510
  100% {
511
    -webkit-transform: rotate(359deg);
512
  }
513
}
514
@-o-keyframes spin {
515
  0% {
516
    -o-transform: rotate(0deg);
517
  }
518
  100% {
519
    -o-transform: rotate(359deg);
520
  }
521
}
522
@-ms-keyframes spin {
523
  0% {
524
    -ms-transform: rotate(0deg);
525
  }
526
  100% {
527
    -ms-transform: rotate(359deg);
528
  }
529
}
530
@keyframes spin {
531
  0% {
532
    transform: rotate(0deg);
533
  }
534
  100% {
535
    transform: rotate(359deg);
536
  }
537
}
538

    
539
/**
540
 * Missing Bootstrap 2 tab styling.
541
 * @see http://stackoverflow.com/questions/18432577/stacked-tabs-in-bootstrap-3
542
 * @see http://bootply.com/74926
543
 */
544
.tabbable {
545
  margin-bottom: 20px;
546
}
547
.tabs-below, .tabs-left, .tabs-right {
548
  > .nav-tabs {
549
    border-bottom: 0;
550
    .summary {
551
      color: @nav-disabled-link-color;
552
      font-size: @font-size-small;
553
    }
554
  }
555
}
556
.tab-pane > .panel-heading {
557
  display: none;
558
}
559
.tab-content > .active {
560
  display: block;
561
}
562

    
563
// Below.
564
.tabs-below {
565
  > .nav-tabs {
566
    border-top: 1px solid @nav-tabs-border-color;
567
    > li {
568
      margin-top: -1px;
569
      margin-bottom: 0;
570
      > a {
571
        border-radius: 0 0 @border-radius-base @border-radius-base;
572
        &:hover,
573
        &:focus {
574
          border-top-color: @nav-tabs-border-color;
575
          border-bottom-color: transparent;
576
        }
577
      }
578
    }
579
    > .active {
580
      > a,
581
      > a:hover,
582
      > a:focus {
583
        border-color: transparent @nav-tabs-border-color @nav-tabs-border-color @nav-tabs-border-color;
584
      }
585
    }
586
  }
587
}
588

    
589
// Left and right tabs.
590
.tabs-left,
591
.tabs-right {
592
  > .nav-tabs {
593
    padding-bottom: 20px;
594
    width: 220px;
595
    > li {
596
      float: none;
597
      &:focus {
598
        outline: 0;
599
      }
600
      > a {
601
        margin-right: 0;
602
        margin-bottom: 3px;
603
        &:focus {
604
          outline: 0;
605
        }
606
      }
607
    }
608
  }
609
  > .tab-content {
610
    border-radius: 0 @border-radius-base @border-radius-base @border-radius-base;
611
    .box-shadow(0 1px 1px rgba(0,0,0,.05));
612
    border: 1px solid @nav-tabs-border-color;
613
    overflow: hidden;
614
    padding: 10px 15px;
615
  }
616
}
617

    
618
// Left tabs.
619
.tabs-left {
620
  > .nav-tabs {
621
    float: left;
622
    margin-right: -1px;
623
    > li > a {
624
      border-radius: @border-radius-base 0 0 @border-radius-base;
625
      &:hover,
626
      &:focus {
627
        border-color: @nav-tabs-link-hover-border-color @nav-tabs-border-color @nav-tabs-link-hover-border-color @nav-tabs-link-hover-border-color;
628
      }
629
    }
630
    > .active > a,
631
    > .active > a:hover,
632
    > .active > a:focus {
633
      border-color: @nav-tabs-border-color transparent @nav-tabs-border-color @nav-tabs-border-color;
634
      .box-shadow(-1px 1px 1px rgba(0,0,0,.05));
635
    }
636
  }
637
}
638

    
639
// Right tabs.
640
.tabs-right {
641
  > .nav-tabs {
642
    float: right;
643
    margin-left: -1px;
644
    > li > a {
645
      border-radius: 0 @border-radius-base @border-radius-base 0;
646
      &:hover,
647
      &:focus {
648
        border-color: @nav-tabs-link-hover-border-color @nav-tabs-link-hover-border-color @nav-tabs-link-hover-border-color @nav-tabs-border-color;
649
        .box-shadow(1px 1px 1px rgba(0,0,0,.05));
650
      }
651
    }
652
    > .active > a,
653
    > .active > a:hover,
654
    > .active > a:focus {
655
      border-color: @nav-tabs-border-color @nav-tabs-border-color @nav-tabs-border-color transparent;
656
    }
657
  }
658
}
659

    
660
// Checkbox cell fix.
661
th.checkbox,
662
td.checkbox,
663
th.radio,
664
td.radio {
665
  display: table-cell;
666
}
667

    
668
// Views UI fixes.
669
.views-display-settings {
670
  .label {
671
    font-size: 100%;
672
    color:#666666;
673
  }
674
  .footer {
675
    padding:0;
676
    margin:4px 0 0 0;
677
  }
678
}
679
.views-exposed-form .views-exposed-widget .btn {
680
  margin-top: 1.8em;
681
}
682

    
683
// Radio and checkbox in table fixes
684
table {
685
  .radio input[type="radio"],
686
  .checkbox input[type="checkbox"] {
687
    max-width: inherit;
688
  }
689
}
690

    
691
// Exposed filters
692
.form-horizontal .form-group label {
693
  position: relative;
694
  min-height: 1px;
695
  margin-top: 0;
696
  margin-bottom: 0;
697
  padding-top: 7px;
698
  padding-left:  (@grid-gutter-width / 2);
699
  padding-right: (@grid-gutter-width / 2);
700
  text-align: right;
701

    
702
  @media (min-width: @screen-sm-min) {
703
    float: left;
704
    width: percentage((2 / @grid-columns));
705
  }
706
}
707

    
708
// Treat all links inside alert as .alert-link
709
.alert a {
710
  font-weight: @alert-link-font-weight;
711
}
712
.alert-success {
713
  a, a:hover, a:focus {
714
    color: darken(@alert-success-text, 10%);
715
  }
716
}
717
.alert-info {
718
  a, a:hover, a:focus {
719
    color: darken(@alert-info-text, 10%);
720
  }
721
}
722
.alert-warning {
723
  a, a:hover, a:focus {
724
    color: darken(@alert-warning-text, 10%);
725
  }
726
}
727
.alert-danger {
728
  a, a:hover, a:focus {
729
    color: darken(@alert-danger-text, 10%);
730
  }
731
}
732

    
733
// Override image module.
734
div.image-style-new,
735
div.image-style-new div {
736
  display: block;
737
}
738
div.image-style-new div.input-group {
739
  display: table;
740
}
741

    
742
td.module,
743
.table-striped>tbody>tr:nth-child(odd)>td.module,
744
.table>tbody>tr>td.module {
745
  background: @table-border-color;
746
  font-weight: 700;
747
}
748

    
749
// Book module.
750
.book-toc > .dropdown-menu {
751
  overflow: hidden;
752
  > .dropdown-header {
753
    white-space: nowrap;
754
  }
755
  > li:nth-child(1) > a {
756
    font-weight: bold;
757
  }
758
  .dropdown-menu {
759
    .box-shadow(none);
760
    border: 0;
761
    display: block;
762
    font-size: @font-size-small;
763
    margin: 0;
764
    padding: 0;
765
    position: static;
766
    width: 100%;
767
    > li {
768
      padding-left: 20px;
769
      > a {
770
        margin-left: -40px;
771
        padding-left: 60px;
772
      }
773
    }
774
  }
775
}
776

    
777
// Features module.
778
#features-filter .form-item.form-type-checkbox {
779
  padding-left: 20px;
780
}
781
fieldset.features-export-component {
782
  font-size: @font-size-small;
783
  html.js #features-export-form &, & {
784
    margin: 0 0 (@line-height-computed / 2);
785
  }
786
  .panel-heading {
787
    padding: 5px 10px;
788
    a.panel-title {
789
      font-size: @font-size-small;
790
      font-weight: 500;
791
      margin: -5px -10px;
792
      padding: 5px 10px;
793
    }
794
  }
795
  .panel-body {
796
    padding: 0 10px;
797
  }
798
}
799
div.features-export-list {
800
  margin: -11px 0 10px;
801
  padding: 0 10px;
802
}
803

    
804
fieldset.features-export-component .component-select ,
805
div.features-export-list {
806
  .form-type-checkbox {
807
    line-height: 1em;
808
    margin: 5px 5px 5px 0 !important;
809
    min-height: 0;
810
    padding: 3px 3px 3px 25px!important;
811
    input[type=checkbox] {
812
      margin-top: 0;
813
    }
814
  }
815
}
816

    
817
// Navbar module.
818
body.navbar-is-fixed-top.navbar-administration.navbar-horizontal.navbar-tray-open .navbar-fixed-top {
819
  top: 79px;
820
}
821
body.navbar-is-fixed-top.navbar-administration .navbar-fixed-top {
822
  top: 39px;
823
}
824
/* Small devices (tablets, 768px and up) */
825
@media (min-width: @screen-sm-min) {
826
body.navbar-is-fixed-top.navbar-administration.navbar-vertical.navbar-tray-open .navbar-fixed-top {
827
  left: 240px;
828
  left: 24rem;
829
  }
830
}
831
.navbar-administration #navbar-administration.navbar-oriented .navbar-bar{
832
  z-index: 1032;
833
}
834
.navbar-administration #navbar-administration .navbar-tray {
835
  z-index: 1031;
836
}
837
body.navbar-is-fixed-top.navbar-administration {
838
  padding-top: 103px!important;
839
}
840
body.navbar-is-fixed-top.navbar-administration.navbar-horizontal.navbar-tray-open {
841
  padding-top: 143px!important;
842
}
843
body.navbar-tray-open.navbar-vertical.navbar-fixed {
844
  margin-left: 240px;
845
  margin-left: 24rem;
846
}
847
#navbar-administration.navbar-oriented .navbar-tray-vertical {
848
  width: 24rem;
849
}
850

    
851
/**
852
 * Icon styles.
853
 */
854
a {
855
  &.icon-before .glyphicon {
856
    margin-right: .25em;
857
  }
858
  &.icon-after .glyphicon {
859
    margin-left: .25em;
860
  }
861
}
862

    
863
.btn {
864
  &.icon-before .glyphicon {
865
    margin-left: -.25em;
866
    margin-right: .25em;
867
  }
868
  &.icon-after .glyphicon {
869
    margin-left: .25em;
870
    margin-right: -.25em;
871
  }
872
}