~openerp-dev/openerp-web/trunk-customfilter-jir

« back to all changes in this revision

Viewing changes to addons/web/static/lib/bootstrap/stylesheets/bootstrap/_mixins.scss

  • Committer: Vidhin Mehta (OpenERP)
  • Date: 2014-04-21 05:26:17 UTC
  • mfrom: (3747.2.239 trunk)
  • Revision ID: vme@tinyerp.com-20140421052617-spns3fo5ryybbwhx
[MERGE]Trunk.

Show diffs side-by-side

added added

removed removed

Lines of Context:
 
1
//
 
2
// Mixins
 
3
// --------------------------------------------------
 
4
 
 
5
 
 
6
// Utilities
 
7
// -------------------------
 
8
 
 
9
// Clearfix
 
10
// Source: http://nicolasgallagher.com/micro-clearfix-hack/
 
11
//
 
12
// For modern browsers
 
13
// 1. The space content is one way to avoid an Opera bug when the
 
14
//    contenteditable attribute is included anywhere else in the document.
 
15
//    Otherwise it causes space to appear at the top and bottom of elements
 
16
//    that are clearfixed.
 
17
// 2. The use of `table` rather than `block` is only necessary if using
 
18
//    `:before` to contain the top-margins of child elements.
 
19
@mixin clearfix() {
 
20
  &:before,
 
21
  &:after {
 
22
    content: " "; // 1
 
23
    display: table; // 2
 
24
  }
 
25
  &:after {
 
26
    clear: both;
 
27
  }
 
28
}
 
29
 
 
30
// WebKit-style focus
 
31
@mixin tab-focus() {
 
32
  // Default
 
33
  outline: thin dotted;
 
34
  // WebKit
 
35
  outline: 5px auto -webkit-focus-ring-color;
 
36
  outline-offset: -2px;
 
37
}
 
38
 
 
39
// Center-align a block level element
 
40
@mixin center-block() {
 
41
  display: block;
 
42
  margin-left: auto;
 
43
  margin-right: auto;
 
44
}
 
45
 
 
46
// Sizing shortcuts
 
47
@mixin size($width, $height) {
 
48
  width: $width;
 
49
  height: $height;
 
50
}
 
51
@mixin square($size) {
 
52
  @include size($size, $size);
 
53
}
 
54
 
 
55
// Placeholder text
 
56
@mixin placeholder($color: $input-color-placeholder) {
 
57
  &:-moz-placeholder            { color: $color; } // Firefox 4-18
 
58
  &::-moz-placeholder           { color: $color;   // Firefox 19+
 
59
                                  opacity: 1; } // See https://github.com/twbs/bootstrap/pull/11526
 
60
  &:-ms-input-placeholder       { color: $color; } // Internet Explorer 10+
 
61
  &::-webkit-input-placeholder  { color: $color; } // Safari and Chrome
 
62
}
 
63
 
 
64
// Text overflow
 
65
// Requires inline-block or block for proper styling
 
66
@mixin text-overflow() {
 
67
  overflow: hidden;
 
68
  text-overflow: ellipsis;
 
69
  white-space: nowrap;
 
70
}
 
71
 
 
72
// CSS image replacement
 
73
//
 
74
// Heads up! v3 launched with with only `.hide-text()`, but per our pattern for
 
75
// mixins being reused as classes with the same name, this doesn't hold up. As
 
76
// of v3.0.1 we have added `.text-hide()` and deprecated `.hide-text()`. Note
 
77
// that we cannot chain the mixins together in Less, so they are repeated.
 
78
//
 
79
// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
 
80
 
 
81
// Deprecated as of v3.0.1 (will be removed in v4)
 
82
@mixin hide-text() {
 
83
  font: #{0/0} a;
 
84
  color: transparent;
 
85
  text-shadow: none;
 
86
  background-color: transparent;
 
87
  border: 0;
 
88
}
 
89
// New mixin to use as of v3.0.1
 
90
@mixin text-hide() {
 
91
  @include hide-text();
 
92
}
 
93
 
 
94
 
 
95
 
 
96
// CSS3 PROPERTIES
 
97
// --------------------------------------------------
 
98
 
 
99
// Single side border-radius
 
100
@mixin border-top-radius($radius) {
 
101
  border-top-right-radius: $radius;
 
102
   border-top-left-radius: $radius;
 
103
}
 
104
@mixin border-right-radius($radius) {
 
105
  border-bottom-right-radius: $radius;
 
106
     border-top-right-radius: $radius;
 
107
}
 
108
@mixin border-bottom-radius($radius) {
 
109
  border-bottom-right-radius: $radius;
 
110
   border-bottom-left-radius: $radius;
 
111
}
 
112
@mixin border-left-radius($radius) {
 
113
  border-bottom-left-radius: $radius;
 
114
     border-top-left-radius: $radius;
 
115
}
 
116
 
 
117
// Drop shadows
 
118
//
 
119
// Note: Deprecated `.box-shadow()` as of v3.1.0 since all of Bootstrap's
 
120
//   supported browsers that have box shadow capabilities now support the
 
121
//   standard `box-shadow` property.
 
122
@mixin box-shadow($shadow...) {
 
123
  -webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1
 
124
          box-shadow: $shadow;
 
125
}
 
126
 
 
127
// Transitions
 
128
@mixin transition($transition...) {
 
129
  -webkit-transition: $transition;
 
130
          transition: $transition;
 
131
}
 
132
@mixin transition-property($transition-property...) {
 
133
  -webkit-transition-property: $transition-property;
 
134
          transition-property: $transition-property;
 
135
}
 
136
@mixin transition-delay($transition-delay) {
 
137
  -webkit-transition-delay: $transition-delay;
 
138
          transition-delay: $transition-delay;
 
139
}
 
140
@mixin transition-duration($transition-duration...) {
 
141
  -webkit-transition-duration: $transition-duration;
 
142
          transition-duration: $transition-duration;
 
143
}
 
144
@mixin transition-transform($transition...) {
 
145
  -webkit-transition: -webkit-transform $transition;
 
146
     -moz-transition: -moz-transform $transition;
 
147
       -o-transition: -o-transform $transition;
 
148
          transition: transform $transition;
 
149
}
 
150
 
 
151
// Transformations
 
152
@mixin rotate($degrees) {
 
153
  -webkit-transform: rotate($degrees);
 
154
      -ms-transform: rotate($degrees); // IE9 only
 
155
          transform: rotate($degrees);
 
156
}
 
157
@mixin scale($scale-args...) {
 
158
  -webkit-transform: scale($scale-args);
 
159
      -ms-transform: scale($scale-args); // IE9 only
 
160
          transform: scale($scale-args);
 
161
}
 
162
@mixin translate($x, $y) {
 
163
  -webkit-transform: translate($x, $y);
 
164
      -ms-transform: translate($x, $y); // IE9 only
 
165
          transform: translate($x, $y);
 
166
}
 
167
@mixin skew($x, $y) {
 
168
  -webkit-transform: skew($x, $y);
 
169
      -ms-transform: skewX($x) skewY($y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
 
170
          transform: skew($x, $y);
 
171
}
 
172
@mixin translate3d($x, $y, $z) {
 
173
  -webkit-transform: translate3d($x, $y, $z);
 
174
          transform: translate3d($x, $y, $z);
 
175
}
 
176
 
 
177
@mixin rotateX($degrees) {
 
178
  -webkit-transform: rotateX($degrees);
 
179
      -ms-transform: rotateX($degrees); // IE9 only
 
180
          transform: rotateX($degrees);
 
181
}
 
182
@mixin rotateY($degrees) {
 
183
  -webkit-transform: rotateY($degrees);
 
184
      -ms-transform: rotateY($degrees); // IE9 only
 
185
          transform: rotateY($degrees);
 
186
}
 
187
@mixin perspective($perspective) {
 
188
  -webkit-perspective: $perspective;
 
189
     -moz-perspective: $perspective;
 
190
          perspective: $perspective;
 
191
}
 
192
@mixin perspective-origin($perspective) {
 
193
  -webkit-perspective-origin: $perspective;
 
194
     -moz-perspective-origin: $perspective;
 
195
          perspective-origin: $perspective;
 
196
}
 
197
@mixin transform-origin($origin) {
 
198
  -webkit-transform-origin: $origin;
 
199
     -moz-transform-origin: $origin;
 
200
      -ms-transform-origin: $origin; // IE9 only
 
201
          transform-origin: $origin;
 
202
}
 
203
 
 
204
// Animations
 
205
@mixin animation($animation) {
 
206
  -webkit-animation: $animation;
 
207
          animation: $animation;
 
208
}
 
209
@mixin animation-name($name) {
 
210
  -webkit-animation-name: $name;
 
211
          animation-name: $name;
 
212
}
 
213
@mixin animation-duration($duration) {
 
214
  -webkit-animation-duration: $duration;
 
215
          animation-duration: $duration;
 
216
}
 
217
@mixin animation-timing-function($timing-function) {
 
218
  -webkit-animation-timing-function: $timing-function;
 
219
          animation-timing-function: $timing-function;
 
220
}
 
221
@mixin animation-delay($delay) {
 
222
  -webkit-animation-delay: $delay;
 
223
          animation-delay: $delay;
 
224
}
 
225
@mixin animation-iteration-count($iteration-count) {
 
226
  -webkit-animation-iteration-count: $iteration-count;
 
227
          animation-iteration-count: $iteration-count;
 
228
}
 
229
@mixin animation-direction($direction) {
 
230
  -webkit-animation-direction: $direction;
 
231
          animation-direction: $direction;
 
232
}
 
233
 
 
234
// Backface visibility
 
235
// Prevent browsers from flickering when using CSS 3D transforms.
 
236
// Default value is `visible`, but can be changed to `hidden`
 
237
@mixin backface-visibility($visibility){
 
238
  -webkit-backface-visibility: $visibility;
 
239
     -moz-backface-visibility: $visibility;
 
240
          backface-visibility: $visibility;
 
241
}
 
242
 
 
243
// Box sizing
 
244
@mixin box-sizing($boxmodel) {
 
245
  -webkit-box-sizing: $boxmodel;
 
246
     -moz-box-sizing: $boxmodel;
 
247
          box-sizing: $boxmodel;
 
248
}
 
249
 
 
250
// User select
 
251
// For selecting text on the page
 
252
@mixin user-select($select) {
 
253
  -webkit-user-select: $select;
 
254
     -moz-user-select: $select;
 
255
      -ms-user-select: $select; // IE10+
 
256
       -o-user-select: $select;
 
257
          user-select: $select;
 
258
}
 
259
 
 
260
// Resize anything
 
261
@mixin resizable($direction) {
 
262
  resize: $direction; // Options: horizontal, vertical, both
 
263
  overflow: auto; // Safari fix
 
264
}
 
265
 
 
266
// CSS3 Content Columns
 
267
@mixin content-columns($column-count, $column-gap: $grid-gutter-width) {
 
268
  -webkit-column-count: $column-count;
 
269
     -moz-column-count: $column-count;
 
270
          column-count: $column-count;
 
271
  -webkit-column-gap: $column-gap;
 
272
     -moz-column-gap: $column-gap;
 
273
          column-gap: $column-gap;
 
274
}
 
275
 
 
276
// Optional hyphenation
 
277
@mixin hyphens($mode: auto) {
 
278
  word-wrap: break-word;
 
279
  -webkit-hyphens: $mode;
 
280
     -moz-hyphens: $mode;
 
281
      -ms-hyphens: $mode; // IE10+
 
282
       -o-hyphens: $mode;
 
283
          hyphens: $mode;
 
284
}
 
285
 
 
286
// Opacity
 
287
@mixin opacity($opacity) {
 
288
  opacity: $opacity;
 
289
  // IE8 filter
 
290
  $opacity-ie: ($opacity * 100);
 
291
  filter: #{alpha(opacity=$opacity-ie)};
 
292
}
 
293
 
 
294
 
 
295
 
 
296
// GRADIENTS
 
297
// --------------------------------------------------
 
298
 
 
299
 
 
300
 
 
301
// Horizontal gradient, from left to right
 
302
//
 
303
// Creates two color stops, start and end, by specifying a color and position for each color stop.
 
304
// Color stops are not available in IE9 and below.
 
305
@mixin gradient-horizontal($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
 
306
  background-image: -webkit-linear-gradient(left, color-stop($start-color $start-percent), color-stop($end-color $end-percent)); // Safari 5.1-6, Chrome 10+
 
307
  background-image:  linear-gradient(to right, $start-color $start-percent, $end-color $end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
 
308
  background-repeat: repeat-x;
 
309
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9 and down
 
310
}
 
311
 
 
312
// Vertical gradient, from top to bottom
 
313
//
 
314
// Creates two color stops, start and end, by specifying a color and position for each color stop.
 
315
// Color stops are not available in IE9 and below.
 
316
@mixin gradient-vertical($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
 
317
  background-image: -webkit-linear-gradient(top, $start-color $start-percent, $end-color $end-percent);  // Safari 5.1-6, Chrome 10+
 
318
  background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
 
319
  background-repeat: repeat-x;
 
320
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 and down
 
321
}
 
322
 
 
323
@mixin gradient-directional($start-color: #555, $end-color: #333, $deg: 45deg) {
 
324
  background-repeat: repeat-x;
 
325
  background-image: -webkit-linear-gradient($deg, $start-color, $end-color); // Safari 5.1-6, Chrome 10+
 
326
  background-image: linear-gradient($deg, $start-color, $end-color); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
 
327
}
 
328
@mixin gradient-horizontal-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
 
329
  background-image: -webkit-linear-gradient(left, $start-color, $mid-color $color-stop, $end-color);
 
330
  background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
 
331
  background-repeat: no-repeat;
 
332
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9 and down, gets no color-stop at all for proper fallback
 
333
}
 
334
@mixin gradient-vertical-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
 
335
  background-image: -webkit-linear-gradient($start-color, $mid-color $color-stop, $end-color);
 
336
  background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
 
337
  background-repeat: no-repeat;
 
338
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 and down, gets no color-stop at all for proper fallback
 
339
}
 
340
@mixin gradient-radial($inner-color: #555, $outer-color: #333) {
 
341
  background-image: -webkit-radial-gradient(circle, $inner-color, $outer-color);
 
342
  background-image: radial-gradient(circle, $inner-color, $outer-color);
 
343
  background-repeat: no-repeat;
 
344
}
 
345
@mixin gradient-striped($color: rgba(255,255,255,.15), $angle: 45deg) {
 
346
  background-image: -webkit-linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
 
347
  background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
 
348
}
 
349
 
 
350
// Reset filters for IE
 
351
//
 
352
// When you need to remove a gradient background, do not forget to use this to reset
 
353
// the IE filter for IE9 and below.
 
354
@mixin reset-filter() {
 
355
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
 
356
}
 
357
 
 
358
 
 
359
 
 
360
// Retina images
 
361
//
 
362
// Short retina mixin for setting background-image and -size
 
363
 
 
364
@mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) {
 
365
  background-image: url(if($bootstrap-sass-asset-helper, twbs-image-path("#{$file-1x}"), "#{$file-1x}"));
 
366
 
 
367
  @media
 
368
  only screen and (-webkit-min-device-pixel-ratio: 2),
 
369
  only screen and (   min--moz-device-pixel-ratio: 2),
 
370
  only screen and (     -o-min-device-pixel-ratio: 2/1),
 
371
  only screen and (        min-device-pixel-ratio: 2),
 
372
  only screen and (                min-resolution: 192dpi),
 
373
  only screen and (                min-resolution: 2dppx) {
 
374
    background-image: url(if($bootstrap-sass-asset-helper, twbs-image-path("#{$file-2x}"), "#{$file-2x}"));
 
375
    background-size: $width-1x $height-1x;
 
376
  }
 
377
}
 
378
 
 
379
 
 
380
// Responsive image
 
381
//
 
382
// Keep images from scaling beyond the width of their parents.
 
383
 
 
384
@mixin img-responsive($display: block) {
 
385
  display: $display;
 
386
  max-width: 100%; // Part 1: Set a maximum relative to the parent
 
387
  height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
 
388
}
 
389
 
 
390
 
 
391
// COMPONENT MIXINS
 
392
// --------------------------------------------------
 
393
 
 
394
// Horizontal dividers
 
395
// -------------------------
 
396
// Dividers (basically an hr) within dropdowns and nav lists
 
397
@mixin nav-divider($color: #e5e5e5) {
 
398
  height: 1px;
 
399
  margin: (($line-height-computed / 2) - 1) 0;
 
400
  overflow: hidden;
 
401
  background-color: $color;
 
402
}
 
403
 
 
404
// Panels
 
405
// -------------------------
 
406
@mixin panel-variant($border, $heading-text-color, $heading-bg-color, $heading-border) {
 
407
  border-color: $border;
 
408
 
 
409
  & > .panel-heading {
 
410
    color: $heading-text-color;
 
411
    background-color: $heading-bg-color;
 
412
    border-color: $heading-border;
 
413
 
 
414
    + .panel-collapse .panel-body {
 
415
      border-top-color: $border;
 
416
    }
 
417
  }
 
418
  & > .panel-footer {
 
419
    + .panel-collapse .panel-body {
 
420
      border-bottom-color: $border;
 
421
    }
 
422
  }
 
423
}
 
424
 
 
425
// Alerts
 
426
// -------------------------
 
427
@mixin alert-variant($background, $border, $text-color) {
 
428
  background-color: $background;
 
429
  border-color: $border;
 
430
  color: $text-color;
 
431
 
 
432
  hr {
 
433
    border-top-color: darken($border, 5%);
 
434
  }
 
435
  .alert-link {
 
436
    color: darken($text-color, 10%);
 
437
  }
 
438
}
 
439
 
 
440
// Tables
 
441
// -------------------------
 
442
@mixin table-row-variant($state, $background) {
 
443
  // Exact selectors below required to override `.table-striped` and prevent
 
444
  // inheritance to nested tables.
 
445
  .table > thead > tr,
 
446
  .table > tbody > tr,
 
447
  .table > tfoot > tr {
 
448
    > td.#{$state},
 
449
    > th.#{$state},
 
450
    &.#{$state} > td,
 
451
    &.#{$state} > th {
 
452
      background-color: $background;
 
453
    }
 
454
  }
 
455
 
 
456
  // Hover states for `.table-hover`
 
457
  // Note: this is not available for cells or rows within `thead` or `tfoot`.
 
458
  .table-hover > tbody > tr {
 
459
    > td.#{$state}:hover,
 
460
    > th.#{$state}:hover,
 
461
    &.#{$state}:hover > td,
 
462
    &.#{$state}:hover > th {
 
463
      background-color: darken($background, 5%);
 
464
    }
 
465
  }
 
466
}
 
467
 
 
468
// List Groups
 
469
// -------------------------
 
470
@mixin list-group-item-variant($state, $background, $color) {
 
471
  .list-group-item-#{$state} {
 
472
    color: $color;
 
473
    background-color: $background;
 
474
 
 
475
    // [converter] extracted a& to a.list-group-item-#{$state}
 
476
  }
 
477
 
 
478
  a.list-group-item-#{$state} {
 
479
    color: $color;
 
480
 
 
481
    .list-group-item-heading { color: inherit; }
 
482
 
 
483
    &:hover,
 
484
    &:focus {
 
485
      color: $color;
 
486
      background-color: darken($background, 5%);
 
487
    }
 
488
    &.active,
 
489
    &.active:hover,
 
490
    &.active:focus {
 
491
      color: #fff;
 
492
      background-color: $color;
 
493
      border-color: $color;
 
494
    }
 
495
  }
 
496
}
 
497
 
 
498
// Button variants
 
499
// -------------------------
 
500
// Easily pump out default styles, as well as :hover, :focus, :active,
 
501
// and disabled options for all buttons
 
502
@mixin button-variant($color, $background, $border) {
 
503
  color: $color;
 
504
  background-color: $background;
 
505
  border-color: $border;
 
506
 
 
507
  &:hover,
 
508
  &:focus,
 
509
  &:active,
 
510
  &.active {
 
511
    color: $color;
 
512
    background-color: darken($background, 8%);
 
513
        border-color: darken($border, 12%);
 
514
  }
 
515
  .open & { &.dropdown-toggle {
 
516
    color: $color;
 
517
    background-color: darken($background, 8%);
 
518
        border-color: darken($border, 12%);
 
519
  } }
 
520
  &:active,
 
521
  &.active {
 
522
    background-image: none;
 
523
  }
 
524
  .open & { &.dropdown-toggle {
 
525
    background-image: none;
 
526
  } }
 
527
  &.disabled,
 
528
  &[disabled],
 
529
  fieldset[disabled] & {
 
530
    &,
 
531
    &:hover,
 
532
    &:focus,
 
533
    &:active,
 
534
    &.active {
 
535
      background-color: $background;
 
536
          border-color: $border;
 
537
    }
 
538
  }
 
539
 
 
540
  .badge {
 
541
    color: $background;
 
542
    background-color: $color;
 
543
  }
 
544
}
 
545
 
 
546
// Button sizes
 
547
// -------------------------
 
548
@mixin button-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
 
549
  padding: $padding-vertical $padding-horizontal;
 
550
  font-size: $font-size;
 
551
  line-height: $line-height;
 
552
  border-radius: $border-radius;
 
553
}
 
554
 
 
555
// Pagination
 
556
// -------------------------
 
557
@mixin pagination-size($padding-vertical, $padding-horizontal, $font-size, $border-radius) {
 
558
  > li {
 
559
    > a,
 
560
    > span {
 
561
      padding: $padding-vertical $padding-horizontal;
 
562
      font-size: $font-size;
 
563
    }
 
564
    &:first-child {
 
565
      > a,
 
566
      > span {
 
567
        @include border-left-radius($border-radius);
 
568
      }
 
569
    }
 
570
    &:last-child {
 
571
      > a,
 
572
      > span {
 
573
        @include border-right-radius($border-radius);
 
574
      }
 
575
    }
 
576
  }
 
577
}
 
578
 
 
579
// Labels
 
580
// -------------------------
 
581
@mixin label-variant($color) {
 
582
  background-color: $color;
 
583
  &[href] {
 
584
    &:hover,
 
585
    &:focus {
 
586
      background-color: darken($color, 10%);
 
587
    }
 
588
  }
 
589
}
 
590
 
 
591
// Contextual backgrounds
 
592
// -------------------------
 
593
// [converter] $parent hack
 
594
@mixin bg-variant($parent, $color) {
 
595
  #{$parent} { background-color: $color; }
 
596
  a#{$parent}:hover {
 
597
    background-color: darken($color, 10%);
 
598
  }
 
599
}
 
600
 
 
601
// Typography
 
602
// -------------------------
 
603
// [converter] $parent hack
 
604
@mixin text-emphasis-variant($parent, $color) {
 
605
  #{$parent} { color: $color; }
 
606
  a#{$parent}:hover {
 
607
    color: darken($color, 10%);
 
608
  }
 
609
}
 
610
 
 
611
// Navbar vertical align
 
612
// -------------------------
 
613
// Vertically center elements in the navbar.
 
614
// Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` to calculate the appropriate top margin.
 
615
@mixin navbar-vertical-align($element-height) {
 
616
  margin-top: (($navbar-height - $element-height) / 2);
 
617
  margin-bottom: (($navbar-height - $element-height) / 2);
 
618
}
 
619
 
 
620
// Progress bars
 
621
// -------------------------
 
622
@mixin progress-bar-variant($color) {
 
623
  background-color: $color;
 
624
  .progress-striped & {
 
625
    @include gradient-striped();
 
626
  }
 
627
}
 
628
 
 
629
// Responsive utilities
 
630
// -------------------------
 
631
// More easily include all the states for responsive-utilities.less.
 
632
// [converter] $parent hack
 
633
@mixin responsive-visibility($parent) {
 
634
  #{$parent} { display: block !important; }
 
635
  table#{$parent}  { display: table; }
 
636
  tr#{$parent}     { display: table-row !important; }
 
637
  th#{$parent},
 
638
  td#{$parent}     { display: table-cell !important; }
 
639
}
 
640
 
 
641
// [converter] $parent hack
 
642
@mixin responsive-invisibility($parent) {
 
643
    #{$parent},
 
644
  tr#{$parent},
 
645
  th#{$parent},
 
646
  td#{$parent} { display: none !important; }
 
647
}
 
648
 
 
649
 
 
650
// Grid System
 
651
// -----------
 
652
 
 
653
// Centered container element
 
654
@mixin container-fixed() {
 
655
  margin-right: auto;
 
656
  margin-left: auto;
 
657
  padding-left:  ($grid-gutter-width / 2);
 
658
  padding-right: ($grid-gutter-width / 2);
 
659
  @include clearfix();
 
660
}
 
661
 
 
662
// Creates a wrapper for a series of columns
 
663
@mixin make-row($gutter: $grid-gutter-width) {
 
664
  margin-left:  ($gutter / -2);
 
665
  margin-right: ($gutter / -2);
 
666
  @include clearfix();
 
667
}
 
668
 
 
669
// Generate the extra small columns
 
670
@mixin make-xs-column($columns, $gutter: $grid-gutter-width) {
 
671
  position: relative;
 
672
  float: left;
 
673
  width: percentage(($columns / $grid-columns));
 
674
  min-height: 1px;
 
675
  padding-left:  ($gutter / 2);
 
676
  padding-right: ($gutter / 2);
 
677
}
 
678
@mixin make-xs-column-offset($columns) {
 
679
  @media (min-width: $screen-xs-min) {
 
680
    margin-left: percentage(($columns / $grid-columns));
 
681
  }
 
682
}
 
683
@mixin make-xs-column-push($columns) {
 
684
  @media (min-width: $screen-xs-min) {
 
685
    left: percentage(($columns / $grid-columns));
 
686
  }
 
687
}
 
688
@mixin make-xs-column-pull($columns) {
 
689
  @media (min-width: $screen-xs-min) {
 
690
    right: percentage(($columns / $grid-columns));
 
691
  }
 
692
}
 
693
 
 
694
 
 
695
// Generate the small columns
 
696
@mixin make-sm-column($columns, $gutter: $grid-gutter-width) {
 
697
  position: relative;
 
698
  min-height: 1px;
 
699
  padding-left:  ($gutter / 2);
 
700
  padding-right: ($gutter / 2);
 
701
 
 
702
  @media (min-width: $screen-sm-min) {
 
703
    float: left;
 
704
    width: percentage(($columns / $grid-columns));
 
705
  }
 
706
}
 
707
@mixin make-sm-column-offset($columns) {
 
708
  @media (min-width: $screen-sm-min) {
 
709
    margin-left: percentage(($columns / $grid-columns));
 
710
  }
 
711
}
 
712
@mixin make-sm-column-push($columns) {
 
713
  @media (min-width: $screen-sm-min) {
 
714
    left: percentage(($columns / $grid-columns));
 
715
  }
 
716
}
 
717
@mixin make-sm-column-pull($columns) {
 
718
  @media (min-width: $screen-sm-min) {
 
719
    right: percentage(($columns / $grid-columns));
 
720
  }
 
721
}
 
722
 
 
723
 
 
724
// Generate the medium columns
 
725
@mixin make-md-column($columns, $gutter: $grid-gutter-width) {
 
726
  position: relative;
 
727
  min-height: 1px;
 
728
  padding-left:  ($gutter / 2);
 
729
  padding-right: ($gutter / 2);
 
730
 
 
731
  @media (min-width: $screen-md-min) {
 
732
    float: left;
 
733
    width: percentage(($columns / $grid-columns));
 
734
  }
 
735
}
 
736
@mixin make-md-column-offset($columns) {
 
737
  @media (min-width: $screen-md-min) {
 
738
    margin-left: percentage(($columns / $grid-columns));
 
739
  }
 
740
}
 
741
@mixin make-md-column-push($columns) {
 
742
  @media (min-width: $screen-md-min) {
 
743
    left: percentage(($columns / $grid-columns));
 
744
  }
 
745
}
 
746
@mixin make-md-column-pull($columns) {
 
747
  @media (min-width: $screen-md-min) {
 
748
    right: percentage(($columns / $grid-columns));
 
749
  }
 
750
}
 
751
 
 
752
 
 
753
// Generate the large columns
 
754
@mixin make-lg-column($columns, $gutter: $grid-gutter-width) {
 
755
  position: relative;
 
756
  min-height: 1px;
 
757
  padding-left:  ($gutter / 2);
 
758
  padding-right: ($gutter / 2);
 
759
 
 
760
  @media (min-width: $screen-lg-min) {
 
761
    float: left;
 
762
    width: percentage(($columns / $grid-columns));
 
763
  }
 
764
}
 
765
@mixin make-lg-column-offset($columns) {
 
766
  @media (min-width: $screen-lg-min) {
 
767
    margin-left: percentage(($columns / $grid-columns));
 
768
  }
 
769
}
 
770
@mixin make-lg-column-push($columns) {
 
771
  @media (min-width: $screen-lg-min) {
 
772
    left: percentage(($columns / $grid-columns));
 
773
  }
 
774
}
 
775
@mixin make-lg-column-pull($columns) {
 
776
  @media (min-width: $screen-lg-min) {
 
777
    right: percentage(($columns / $grid-columns));
 
778
  }
 
779
}
 
780
 
 
781
 
 
782
// Framework grid generation
 
783
//
 
784
// Used only by Bootstrap to generate the correct number of grid classes given
 
785
// any value of `$grid-columns`.
 
786
 
 
787
// [converter] Grid converted to use SASS cycles (LESS uses recursive nested mixin defs not supported by SASS)
 
788
@mixin make-grid-columns() {
 
789
  $list: '';
 
790
  $i: 1;
 
791
  $list: ".col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}";
 
792
  @for $i from 2 through $grid-columns {
 
793
    $list: ".col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}, #{$list}";
 
794
  }
 
795
  #{$list} {
 
796
    position: relative;
 
797
    // Prevent columns from collapsing when empty
 
798
    min-height: 1px;
 
799
    // Inner gutter via padding
 
800
    padding-left:  ($grid-gutter-width / 2);
 
801
    padding-right: ($grid-gutter-width / 2);
 
802
  }
 
803
}
 
804
 
 
805
 
 
806
// [converter] Grid converted to use SASS cycles (LESS uses recursive nested mixin defs not supported by SASS)
 
807
@mixin make-grid-columns-float($class) {
 
808
  $list: '';
 
809
  $i: 1;
 
810
  $list: ".col-#{$class}-#{$i}";
 
811
  @for $i from 2 through $grid-columns {
 
812
    $list: ".col-#{$class}-#{$i}, #{$list}";
 
813
  }
 
814
  #{$list} {
 
815
    float: left;
 
816
  }
 
817
}
 
818
 
 
819
 
 
820
@mixin calc-grid($index, $class, $type) {
 
821
  @if ($type == width) and ($index > 0) {
 
822
    .col-#{$class}-#{$index} {
 
823
      width: percentage(($index / $grid-columns));
 
824
    }
 
825
  }
 
826
  @if ($type == push) {
 
827
    .col-#{$class}-push-#{$index} {
 
828
      left: percentage(($index / $grid-columns));
 
829
    }
 
830
  }
 
831
  @if ($type == pull) {
 
832
    .col-#{$class}-pull-#{$index} {
 
833
      right: percentage(($index / $grid-columns));
 
834
    }
 
835
  }
 
836
  @if ($type == offset) {
 
837
    .col-#{$class}-offset-#{$index} {
 
838
      margin-left: percentage(($index / $grid-columns));
 
839
    }
 
840
  }
 
841
}
 
842
 
 
843
// [converter] This is defined recursively in LESS, but SASS supports real loops
 
844
@mixin make-grid($columns, $class, $type) {
 
845
  @for $i from 0 through $columns {
 
846
    @include calc-grid($i, $class, $type);
 
847
  }
 
848
}
 
849
 
 
850
 
 
851
 
 
852
// Form validation states
 
853
//
 
854
// Used in forms.less to generate the form validation CSS for warnings, errors,
 
855
// and successes.
 
856
 
 
857
@mixin form-control-validation($text-color: #555, $border-color: #ccc, $background-color: #f5f5f5) {
 
858
  // Color the label and help text
 
859
  .help-block,
 
860
  .control-label,
 
861
  .radio,
 
862
  .checkbox,
 
863
  .radio-inline,
 
864
  .checkbox-inline  {
 
865
    color: $text-color;
 
866
  }
 
867
  // Set the border and box shadow on specific inputs to match
 
868
  .form-control {
 
869
    border-color: $border-color;
 
870
    @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
 
871
    &:focus {
 
872
      border-color: darken($border-color, 10%);
 
873
      $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($border-color, 20%);
 
874
      @include box-shadow($shadow);
 
875
    }
 
876
  }
 
877
  // Set validation states also for addons
 
878
  .input-group-addon {
 
879
    color: $text-color;
 
880
    border-color: $border-color;
 
881
    background-color: $background-color;
 
882
  }
 
883
  // Optional feedback icon
 
884
  .form-control-feedback {
 
885
    color: $text-color;
 
886
  }
 
887
}
 
888
 
 
889
// Form control focus state
 
890
//
 
891
// Generate a customized focus state and for any input with the specified color,
 
892
// which defaults to the `$input-focus-border` variable.
 
893
//
 
894
// We highly encourage you to not customize the default value, but instead use
 
895
// this to tweak colors on an as-needed basis. This aesthetic change is based on
 
896
// WebKit's default styles, but applicable to a wider range of browsers. Its
 
897
// usability and accessibility should be taken into account with any change.
 
898
//
 
899
// Example usage: change the default blue border and shadow to white for better
 
900
// contrast against a dark gray background.
 
901
 
 
902
@mixin form-control-focus($color: $input-border-focus) {
 
903
  $color-rgba: rgba(red($color), green($color), blue($color), .6);
 
904
  &:focus {
 
905
    border-color: $color;
 
906
    outline: 0;
 
907
    @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px $color-rgba);
 
908
  }
 
909
}
 
910
 
 
911
// Form control sizing
 
912
//
 
913
// Relative text size, padding, and border-radii changes for form controls. For
 
914
// horizontal sizing, wrap controls in the predefined grid classes. `<select>`
 
915
// element gets special love because it's special, and that's a fact!
 
916
 
 
917
// [converter] $parent hack
 
918
@mixin input-size($parent, $input-height, $padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
 
919
  #{$parent} { height: $input-height;
 
920
  padding: $padding-vertical $padding-horizontal;
 
921
  font-size: $font-size;
 
922
  line-height: $line-height;
 
923
  border-radius: $border-radius; }
 
924
  select#{$parent} {
 
925
    height: $input-height;
 
926
    line-height: $input-height;
 
927
  }
 
928
 
 
929
  textarea#{$parent},
 
930
  select[multiple]#{$parent} {
 
931
    height: auto;
 
932
  }
 
933
}