Projet

Général

Profil

Paste
Télécharger (15,9 ko) Statistiques
| Branche: | Révision:

root / drupal7 / sites / all / themes / bootstrap / starterkits / sass / scss / _overrides.scss @ 4eeb3b46

1
// Media query variables.
2
$tablet:  "screen and (min-width: 768px)";
3
$normal:  "screen and (min-width: 992px)";
4
$wide:    "screen and (min-width: 1200px)";
5

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

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

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

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

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

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

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

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

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

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

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

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

    
229
  .input-group-btn {
230
    width: auto;
231
  }
232
}
233
.navbar-search .control-group {
234
  margin-bottom:0px;
235
}
236

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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