bootstrap-sass-rails 3.0.3.0 → 3.1.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (66) hide show
  1. data/LICENSE +1 -1
  2. data/README.md +24 -133
  3. data/app/assets/javascripts/twitter/bootstrap.js +1 -12
  4. data/app/assets/javascripts/twitter/bootstrap/affix.js +1 -126
  5. data/app/assets/javascripts/twitter/bootstrap/alert.js +1 -98
  6. data/app/assets/javascripts/twitter/bootstrap/button.js +1 -115
  7. data/app/assets/javascripts/twitter/bootstrap/carousel.js +1 -217
  8. data/app/assets/javascripts/twitter/bootstrap/collapse.js +1 -179
  9. data/app/assets/javascripts/twitter/bootstrap/dropdown.js +1 -154
  10. data/app/assets/javascripts/twitter/bootstrap/modal.js +1 -246
  11. data/app/assets/javascripts/twitter/bootstrap/popover.js +1 -117
  12. data/app/assets/javascripts/twitter/bootstrap/scrollspy.js +1 -158
  13. data/app/assets/javascripts/twitter/bootstrap/tab.js +1 -135
  14. data/app/assets/javascripts/twitter/bootstrap/tooltip.js +1 -386
  15. data/app/assets/javascripts/twitter/bootstrap/transition.js +1 -56
  16. data/app/assets/stylesheets/twitter/bootstrap.css.scss +1 -49
  17. data/app/assets/stylesheets/twitter/bootstrap/_alerts.scss +1 -67
  18. data/app/assets/stylesheets/twitter/bootstrap/_badges.scss +1 -51
  19. data/app/assets/stylesheets/twitter/bootstrap/_breadcrumbs.scss +1 -23
  20. data/app/assets/stylesheets/twitter/bootstrap/_button-groups.scss +1 -227
  21. data/app/assets/stylesheets/twitter/bootstrap/_buttons.scss +1 -155
  22. data/app/assets/stylesheets/twitter/bootstrap/_carousel.scss +1 -232
  23. data/app/assets/stylesheets/twitter/bootstrap/_close.scss +1 -34
  24. data/app/assets/stylesheets/twitter/bootstrap/_code.scss +1 -53
  25. data/app/assets/stylesheets/twitter/bootstrap/_component-animations.scss +1 -29
  26. data/app/assets/stylesheets/twitter/bootstrap/_dropdowns.scss +1 -187
  27. data/app/assets/stylesheets/twitter/bootstrap/_forms.scss +1 -373
  28. data/app/assets/stylesheets/twitter/bootstrap/_glyphicons.scss +1 -237
  29. data/app/assets/stylesheets/twitter/bootstrap/_grid.scss +1 -78
  30. data/app/assets/stylesheets/twitter/bootstrap/_input-groups.scss +1 -136
  31. data/app/assets/stylesheets/twitter/bootstrap/_jumbotron.scss +1 -46
  32. data/app/assets/stylesheets/twitter/bootstrap/_labels.scss +1 -64
  33. data/app/assets/stylesheets/twitter/bootstrap/_list-group.scss +1 -88
  34. data/app/assets/stylesheets/twitter/bootstrap/_media.scss +1 -56
  35. data/app/assets/stylesheets/twitter/bootstrap/_mixins.scss +1 -847
  36. data/app/assets/stylesheets/twitter/bootstrap/_modals.scss +1 -129
  37. data/app/assets/stylesheets/twitter/bootstrap/_navbar.scss +1 -616
  38. data/app/assets/stylesheets/twitter/bootstrap/_navs.scss +1 -242
  39. data/app/assets/stylesheets/twitter/bootstrap/_normalize.scss +1 -406
  40. data/app/assets/stylesheets/twitter/bootstrap/_pager.scss +1 -55
  41. data/app/assets/stylesheets/twitter/bootstrap/_pagination.scss +1 -85
  42. data/app/assets/stylesheets/twitter/bootstrap/_panels.scss +1 -182
  43. data/app/assets/stylesheets/twitter/bootstrap/_popovers.scss +1 -133
  44. data/app/assets/stylesheets/twitter/bootstrap/_print.scss +1 -105
  45. data/app/assets/stylesheets/twitter/bootstrap/_progress-bars.scss +1 -80
  46. data/app/assets/stylesheets/twitter/bootstrap/_responsive-utilities.scss +1 -198
  47. data/app/assets/stylesheets/twitter/bootstrap/_scaffolding.scss +1 -119
  48. data/app/assets/stylesheets/twitter/bootstrap/_tables.scss +1 -231
  49. data/app/assets/stylesheets/twitter/bootstrap/_theme.scss +1 -247
  50. data/app/assets/stylesheets/twitter/bootstrap/_thumbnails.scss +1 -38
  51. data/app/assets/stylesheets/twitter/bootstrap/_tooltip.scss +1 -95
  52. data/app/assets/stylesheets/twitter/bootstrap/_type.scss +1 -281
  53. data/app/assets/stylesheets/twitter/bootstrap/_utilities.scss +1 -56
  54. data/app/assets/stylesheets/twitter/bootstrap/_variables.scss +1 -642
  55. data/app/assets/stylesheets/twitter/bootstrap/_wells.scss +1 -29
  56. data/lib/bootstrap-sass-rails.rb +1 -1
  57. data/lib/bootstrap/sass/rails/engine.rb +3 -8
  58. data/lib/bootstrap/sass/rails/version.rb +2 -1
  59. data/lib/generators/bootstrap/templates/USAGE +1 -1
  60. metadata +37 -17
  61. data/app/assets/fonts/twitter/bootstrap/glyphicons-halflings-regular.eot +0 -0
  62. data/app/assets/fonts/twitter/bootstrap/glyphicons-halflings-regular.svg +0 -229
  63. data/app/assets/fonts/twitter/bootstrap/glyphicons-halflings-regular.ttf +0 -0
  64. data/app/assets/fonts/twitter/bootstrap/glyphicons-halflings-regular.woff +0 -0
  65. data/lib/bootstrap/sass/extensions.rb +0 -5
  66. data/lib/bootstrap/sass/extensions/functions.rb +0 -15
@@ -1,46 +1 @@
1
- //
2
- // Jumbotron
3
- // --------------------------------------------------
4
-
5
-
6
- .jumbotron {
7
- padding: $jumbotron-padding;
8
- margin-bottom: $jumbotron-padding;
9
- font-size: $jumbotron-font-size;
10
- font-weight: 200;
11
- line-height: ($line-height-base * 1.5);
12
- color: $jumbotron-color;
13
- background-color: $jumbotron-bg;
14
-
15
- h1,
16
- .h1 {
17
- line-height: 1;
18
- color: $jumbotron-heading-color;
19
- }
20
- p {
21
- line-height: 1.4;
22
- }
23
-
24
- .container & {
25
- border-radius: $border-radius-large; // Only round corners at higher resolutions if contained in a container
26
- }
27
-
28
- .container {
29
- max-width: 100%;
30
- }
31
-
32
- @media screen and (min-width: $screen-sm-min) {
33
- padding-top: ($jumbotron-padding * 1.6);
34
- padding-bottom: ($jumbotron-padding * 1.6);
35
-
36
- .container & {
37
- padding-left: ($jumbotron-padding * 2);
38
- padding-right: ($jumbotron-padding * 2);
39
- }
40
-
41
- h1,
42
- .h1 {
43
- font-size: ($font-size-base * 4.5);
44
- }
45
- }
46
- }
1
+ @import "bootstrap/jumbotron";
@@ -1,64 +1 @@
1
- //
2
- // Labels
3
- // --------------------------------------------------
4
-
5
- .label {
6
- display: inline;
7
- padding: .2em .6em .3em;
8
- font-size: 75%;
9
- font-weight: bold;
10
- line-height: 1;
11
- color: $label-color;
12
- text-align: center;
13
- white-space: nowrap;
14
- vertical-align: baseline;
15
- border-radius: .25em;
16
-
17
- // Add hover effects, but only for links
18
- &[href] {
19
- &:hover,
20
- &:focus {
21
- color: $label-link-hover-color;
22
- text-decoration: none;
23
- cursor: pointer;
24
- }
25
- }
26
-
27
- // Empty labels collapse automatically (not available in IE8)
28
- &:empty {
29
- display: none;
30
- }
31
-
32
- // Quick fix for labels in buttons
33
- .btn & {
34
- position: relative;
35
- top: -1px;
36
- }
37
- }
38
-
39
- // Colors
40
- // Contextual variations (linked labels get darker on :hover)
41
-
42
- .label-default {
43
- @include label-variant($label-default-bg);
44
- }
45
-
46
- .label-primary {
47
- @include label-variant($label-primary-bg);
48
- }
49
-
50
- .label-success {
51
- @include label-variant($label-success-bg);
52
- }
53
-
54
- .label-info {
55
- @include label-variant($label-info-bg);
56
- }
57
-
58
- .label-warning {
59
- @include label-variant($label-warning-bg);
60
- }
61
-
62
- .label-danger {
63
- @include label-variant($label-danger-bg);
64
- }
1
+ @import "bootstrap/labels";
@@ -1,88 +1 @@
1
- //
2
- // List groups
3
- // --------------------------------------------------
4
-
5
- // Base class
6
- //
7
- // Easily usable on <ul>, <ol>, or <div>.
8
- .list-group {
9
- // No need to set list-style: none; since .list-group-item is block level
10
- margin-bottom: 20px;
11
- padding-left: 0; // reset padding because ul and ol
12
- }
13
-
14
- // Individual list items
15
- // -------------------------
16
-
17
- .list-group-item {
18
- position: relative;
19
- display: block;
20
- padding: 10px 15px;
21
- // Place the border on the list items and negative margin up for better styling
22
- margin-bottom: -1px;
23
- background-color: $list-group-bg;
24
- border: 1px solid $list-group-border;
25
-
26
- // Round the first and last items
27
- &:first-child {
28
- @include border-top-radius($list-group-border-radius);
29
- }
30
- &:last-child {
31
- margin-bottom: 0;
32
- @include border-bottom-radius($list-group-border-radius);
33
- }
34
-
35
- // Align badges within list items
36
- > .badge {
37
- float: right;
38
- }
39
- > .badge + .badge {
40
- margin-right: 5px;
41
- }
42
- }
43
-
44
- // Linked list items
45
- a.list-group-item {
46
- color: $list-group-link-color;
47
-
48
- .list-group-item-heading {
49
- color: $list-group-link-heading-color;
50
- }
51
-
52
- // Hover state
53
- &:hover,
54
- &:focus {
55
- text-decoration: none;
56
- background-color: $list-group-hover-bg;
57
- }
58
-
59
- // Active class on item itself, not parent
60
- &.active,
61
- &.active:hover,
62
- &.active:focus {
63
- z-index: 2; // Place active items above their siblings for proper border styling
64
- color: $list-group-active-color;
65
- background-color: $list-group-active-bg;
66
- border-color: $list-group-active-border;
67
-
68
- // Force color to inherit for custom content
69
- .list-group-item-heading {
70
- color: inherit;
71
- }
72
- .list-group-item-text {
73
- color: lighten($list-group-active-bg, 40%);
74
- }
75
- }
76
- }
77
-
78
- // Custom content options
79
- // -------------------------
80
-
81
- .list-group-item-heading {
82
- margin-top: 0;
83
- margin-bottom: 5px;
84
- }
85
- .list-group-item-text {
86
- margin-bottom: 0;
87
- line-height: 1.3;
88
- }
1
+ @import "bootstrap/list-group";
@@ -1,56 +1 @@
1
- // Media objects
2
- // Source: http://stubbornella.org/content/?p=497
3
- // --------------------------------------------------
4
-
5
-
6
- // Common styles
7
- // -------------------------
8
-
9
- // Clear the floats
10
- .media,
11
- .media-body {
12
- overflow: hidden;
13
- zoom: 1;
14
- }
15
-
16
- // Proper spacing between instances of .media
17
- .media,
18
- .media .media {
19
- margin-top: 15px;
20
- }
21
- .media:first-child {
22
- margin-top: 0;
23
- }
24
-
25
- // For images and videos, set to block
26
- .media-object {
27
- display: block;
28
- }
29
-
30
- // Reset margins on headings for tighter default spacing
31
- .media-heading {
32
- margin: 0 0 5px;
33
- }
34
-
35
-
36
- // Media image alignment
37
- // -------------------------
38
-
39
- .media {
40
- > .pull-left {
41
- margin-right: 10px;
42
- }
43
- > .pull-right {
44
- margin-left: 10px;
45
- }
46
- }
47
-
48
-
49
- // Media list variation
50
- // -------------------------
51
-
52
- // Undo default ul/ol styles
53
- .media-list {
54
- padding-left: 0;
55
- list-style: none;
56
- }
1
+ @import "bootstrap/media";
@@ -1,847 +1 @@
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
- @mixin box-shadow($shadow...) {
119
- -webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1
120
- box-shadow: $shadow;
121
- }
122
-
123
- // Transitions
124
- @mixin transition($transition...) {
125
- -webkit-transition: $transition;
126
- transition: $transition;
127
- }
128
- @mixin transition-property($transition-property) {
129
- -webkit-transition-property: $transition-property;
130
- transition-property: $transition-property;
131
- }
132
- @mixin transition-delay($transition-delay) {
133
- -webkit-transition-delay: $transition-delay;
134
- transition-delay: $transition-delay;
135
- }
136
- @mixin transition-duration($transition-duration) {
137
- -webkit-transition-duration: $transition-duration;
138
- transition-duration: $transition-duration;
139
- }
140
- @mixin transition-transform($transition...) {
141
- -webkit-transition: -webkit-transform $transition;
142
- -moz-transition: -moz-transform $transition;
143
- -o-transition: -o-transform $transition;
144
- transition: transform $transition;
145
- }
146
-
147
- // Transformations
148
- @mixin rotate($degrees) {
149
- -webkit-transform: rotate($degrees);
150
- -ms-transform: rotate($degrees); // IE9+
151
- transform: rotate($degrees);
152
- }
153
- @mixin scale($ratio) {
154
- -webkit-transform: scale($ratio);
155
- -ms-transform: scale($ratio); // IE9+
156
- transform: scale($ratio);
157
- }
158
- @mixin translate($x, $y) {
159
- -webkit-transform: translate($x, $y);
160
- -ms-transform: translate($x, $y); // IE9+
161
- transform: translate($x, $y);
162
- }
163
- @mixin skew($x, $y) {
164
- -webkit-transform: skew($x, $y);
165
- -ms-transform: skewX($x) skewY($y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
166
- transform: skew($x, $y);
167
- }
168
- @mixin translate3d($x, $y, $z) {
169
- -webkit-transform: translate3d($x, $y, $z);
170
- transform: translate3d($x, $y, $z);
171
- }
172
-
173
- @mixin rotateX($degrees) {
174
- -webkit-transform: rotateX($degrees);
175
- -ms-transform: rotateX($degrees); // IE9+
176
- transform: rotateX($degrees);
177
- }
178
- @mixin rotateY($degrees) {
179
- -webkit-transform: rotateY($degrees);
180
- -ms-transform: rotateY($degrees); // IE9+
181
- transform: rotateY($degrees);
182
- }
183
- @mixin perspective($perspective) {
184
- -webkit-perspective: $perspective;
185
- -moz-perspective: $perspective;
186
- perspective: $perspective;
187
- }
188
- @mixin perspective-origin($perspective) {
189
- -webkit-perspective-origin: $perspective;
190
- -moz-perspective-origin: $perspective;
191
- perspective-origin: $perspective;
192
- }
193
- @mixin transform-origin($origin) {
194
- -webkit-transform-origin: $origin;
195
- -moz-transform-origin: $origin;
196
- transform-origin: $origin;
197
- }
198
-
199
- // Animations
200
- @mixin animation($animation) {
201
- -webkit-animation: $animation;
202
- animation: $animation;
203
- }
204
-
205
- // Backface visibility
206
- // Prevent browsers from flickering when using CSS 3D transforms.
207
- // Default value is `visible`, but can be changed to `hidden`
208
- @mixin backface-visibility($visibility){
209
- -webkit-backface-visibility: $visibility;
210
- -moz-backface-visibility: $visibility;
211
- backface-visibility: $visibility;
212
- }
213
-
214
- // Box sizing
215
- @mixin box-sizing($boxmodel) {
216
- -webkit-box-sizing: $boxmodel;
217
- -moz-box-sizing: $boxmodel;
218
- box-sizing: $boxmodel;
219
- }
220
-
221
- // User select
222
- // For selecting text on the page
223
- @mixin user-select($select) {
224
- -webkit-user-select: $select;
225
- -moz-user-select: $select;
226
- -ms-user-select: $select; // IE10+
227
- -o-user-select: $select;
228
- user-select: $select;
229
- }
230
-
231
- // Resize anything
232
- @mixin resizable($direction) {
233
- resize: $direction; // Options: horizontal, vertical, both
234
- overflow: auto; // Safari fix
235
- }
236
-
237
- // CSS3 Content Columns
238
- @mixin content-columns($column-count, $column-gap: $grid-gutter-width) {
239
- -webkit-column-count: $column-count;
240
- -moz-column-count: $column-count;
241
- column-count: $column-count;
242
- -webkit-column-gap: $column-gap;
243
- -moz-column-gap: $column-gap;
244
- column-gap: $column-gap;
245
- }
246
-
247
- // Optional hyphenation
248
- @mixin hyphens($mode: auto) {
249
- word-wrap: break-word;
250
- -webkit-hyphens: $mode;
251
- -moz-hyphens: $mode;
252
- -ms-hyphens: $mode; // IE10+
253
- -o-hyphens: $mode;
254
- hyphens: $mode;
255
- }
256
-
257
- // Opacity
258
- @mixin opacity($opacity) {
259
- opacity: $opacity;
260
- // IE8 filter
261
- $opacity-ie: ($opacity * 100);
262
- filter: alpha(opacity=$opacity-ie);
263
- }
264
-
265
-
266
-
267
- // GRADIENTS
268
- // --------------------------------------------------
269
-
270
-
271
-
272
- // Horizontal gradient, from left to right
273
- //
274
- // Creates two color stops, start and end, by specifying a color and position for each color stop.
275
- // Color stops are not available in IE9 and below.
276
- @mixin gradient-horizontal($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
277
- background-image: -webkit-linear-gradient(left, color-stop($start-color $start-percent), color-stop($end-color $end-percent)); // Safari 5.1-6, Chrome 10+
278
- 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+
279
- background-repeat: repeat-x;
280
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#{ie-hex-str($start-color)}, endColorstr=#{ie-hex-str($end-color)}, GradientType=1); // IE9 and down
281
- }
282
-
283
- // Vertical gradient, from top to bottom
284
- //
285
- // Creates two color stops, start and end, by specifying a color and position for each color stop.
286
- // Color stops are not available in IE9 and below.
287
- @mixin gradient-vertical($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
288
- background-image: -webkit-linear-gradient(top, $start-color $start-percent, $end-color $end-percent); // Safari 5.1-6, Chrome 10+
289
- 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+
290
- background-repeat: repeat-x;
291
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#{ie-hex-str($start-color)}, endColorstr=#{ie-hex-str($end-color)}, GradientType=0); // IE9 and down
292
- }
293
-
294
- @mixin gradient-directional($start-color: #555, $end-color: #333, $deg: 45deg) {
295
- background-repeat: repeat-x;
296
- background-image: -webkit-linear-gradient($deg, $start-color, $end-color); // Safari 5.1-6, Chrome 10+
297
- background-image: linear-gradient($deg, $start-color, $end-color); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
298
- }
299
- @mixin gradient-horizontal-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
300
- background-image: -webkit-linear-gradient(left, $start-color, $mid-color $color-stop, $end-color);
301
- background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
302
- background-repeat: no-repeat;
303
- 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
304
- }
305
- @mixin gradient-vertical-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
306
- background-image: -webkit-linear-gradient($start-color, $mid-color $color-stop, $end-color);
307
- background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
308
- background-repeat: no-repeat;
309
- 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
310
- }
311
- @mixin gradient-radial($inner-color: #555, $outer-color: #333) {
312
- background-image: -webkit-radial-gradient(circle, $inner-color, $outer-color);
313
- background-image: radial-gradient(circle, $inner-color, $outer-color);
314
- background-repeat: no-repeat;
315
- }
316
- @mixin gradient-striped($color: rgba(255,255,255,.15), $angle: 45deg) {
317
- background-image: -webkit-linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
318
- background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
319
- }
320
-
321
- // Reset filters for IE
322
- //
323
- // When you need to remove a gradient background, do not forget to use this to reset
324
- // the IE filter for IE9 and below.
325
- @mixin reset-filter() {
326
- filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
327
- }
328
-
329
-
330
-
331
- // Retina images
332
- //
333
- // Short retina mixin for setting background-image and -size
334
-
335
- @mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) {
336
- background-image: image-url("#{$file-1x}");
337
-
338
- @media
339
- only screen and (-webkit-min-device-pixel-ratio: 2),
340
- only screen and ( min--moz-device-pixel-ratio: 2),
341
- only screen and ( -o-min-device-pixel-ratio: 2/1),
342
- only screen and ( min-device-pixel-ratio: 2),
343
- only screen and ( min-resolution: 192dpi),
344
- only screen and ( min-resolution: 2dppx) {
345
- background-image: image-url("#{$file-2x}");
346
- background-size: $width-1x $height-1x;
347
- }
348
- }
349
-
350
-
351
- // Responsive image
352
- //
353
- // Keep images from scaling beyond the width of their parents.
354
-
355
- @mixin img-responsive($display: block) {
356
- display: $display;
357
- max-width: 100%; // Part 1: Set a maximum relative to the parent
358
- height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
359
- }
360
-
361
-
362
- // COMPONENT MIXINS
363
- // --------------------------------------------------
364
-
365
- // Horizontal dividers
366
- // -------------------------
367
- // Dividers (basically an hr) within dropdowns and nav lists
368
- @mixin nav-divider($color: #e5e5e5) {
369
- height: 1px;
370
- margin: (($line-height-computed / 2) - 1) 0;
371
- overflow: hidden;
372
- background-color: $color;
373
- }
374
-
375
- // Panels
376
- // -------------------------
377
- @mixin panel-variant($border, $heading-text-color, $heading-bg-color, $heading-border) {
378
- border-color: $border;
379
-
380
- & > .panel-heading {
381
- color: $heading-text-color;
382
- background-color: $heading-bg-color;
383
- border-color: $heading-border;
384
-
385
- + .panel-collapse .panel-body {
386
- border-top-color: $border;
387
- }
388
- }
389
- & > .panel-footer {
390
- + .panel-collapse .panel-body {
391
- border-bottom-color: $border;
392
- }
393
- }
394
- }
395
-
396
- // Alerts
397
- // -------------------------
398
- @mixin alert-variant($background, $border, $text-color) {
399
- background-color: $background;
400
- border-color: $border;
401
- color: $text-color;
402
-
403
- hr {
404
- border-top-color: darken($border, 5%);
405
- }
406
- .alert-link {
407
- color: darken($text-color, 10%);
408
- }
409
- }
410
-
411
- // Tables
412
- // -------------------------
413
- @mixin table-row-variant($state, $background) {
414
- // Exact selectors below required to override `.table-striped` and prevent
415
- // inheritance to nested tables.
416
- .table {
417
- > thead,
418
- > tbody,
419
- > tfoot {
420
- > tr > .#{$state},
421
- > .#{$state} > td,
422
- > .#{$state} > th {
423
- background-color: $background;
424
- }
425
- }
426
- }
427
-
428
- // Hover states for `.table-hover`
429
- // Note: this is not available for cells or rows within `thead` or `tfoot`.
430
- .table-hover > tbody {
431
- > tr > .#{$state}:hover,
432
- > .#{$state}:hover > td,
433
- > .#{$state}:hover > th {
434
- background-color: darken($background, 5%);
435
- }
436
- }
437
- }
438
-
439
- // Button variants
440
- // -------------------------
441
- // Easily pump out default styles, as well as :hover, :focus, :active,
442
- // and disabled options for all buttons
443
- @mixin button-variant($color, $background, $border) {
444
- color: $color;
445
- background-color: $background;
446
- border-color: $border;
447
-
448
- &:hover,
449
- &:focus,
450
- &:active,
451
- &.active {
452
- color: $color;
453
- background-color: darken($background, 8%);
454
- border-color: darken($border, 12%);
455
- }
456
- .open & {
457
- &.dropdown-toggle {
458
- color: $color;
459
- background-color: darken($background, 8%);
460
- border-color: darken($border, 12%);
461
- }
462
-
463
- }
464
- &:active,
465
- &.active {
466
- background-image: none;
467
- }
468
- .open & {
469
- &.dropdown-toggle {
470
- background-image: none;
471
- }
472
-
473
- }
474
- &.disabled,
475
- &[disabled],
476
- fieldset[disabled] & {
477
- &,
478
- &:hover,
479
- &:focus,
480
- &:active,
481
- &.active {
482
- background-color: $background;
483
- border-color: $border;
484
- }
485
- }
486
-
487
- .badge {
488
- color: $background;
489
- background-color: #fff;
490
- }
491
- }
492
-
493
- // Button sizes
494
- // -------------------------
495
- @mixin button-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
496
- padding: $padding-vertical $padding-horizontal;
497
- font-size: $font-size;
498
- line-height: $line-height;
499
- border-radius: $border-radius;
500
- }
501
-
502
- // Pagination
503
- // -------------------------
504
- @mixin pagination-size($padding-vertical, $padding-horizontal, $font-size, $border-radius) {
505
- > li {
506
- > a,
507
- > span {
508
- padding: $padding-vertical $padding-horizontal;
509
- font-size: $font-size;
510
- }
511
- &:first-child {
512
- > a,
513
- > span {
514
- @include border-left-radius($border-radius);
515
- }
516
- }
517
- &:last-child {
518
- > a,
519
- > span {
520
- @include border-right-radius($border-radius);
521
- }
522
- }
523
- }
524
- }
525
-
526
- // Labels
527
- // -------------------------
528
- @mixin label-variant($color) {
529
- background-color: $color;
530
- &[href] {
531
- &:hover,
532
- &:focus {
533
- background-color: darken($color, 10%);
534
- }
535
- }
536
- }
537
-
538
- // Navbar vertical align
539
- // -------------------------
540
- // Vertically center elements in the navbar.
541
- // Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` to calculate the appropriate top margin.
542
- @mixin navbar-vertical-align($element-height) {
543
- margin-top: (($navbar-height - $element-height) / 2);
544
- margin-bottom: (($navbar-height - $element-height) / 2);
545
- }
546
-
547
- // Progress bars
548
- // -------------------------
549
- @mixin progress-bar-variant($color) {
550
- background-color: $color;
551
- .progress-striped & {
552
- @include gradient-striped();
553
- }
554
- }
555
-
556
- // Responsive utilities
557
- // -------------------------
558
- // More easily include all the states for responsive-utilities.less.
559
- @mixin responsive-visibility($parent) {
560
- #{$parent} { display: block !important; }
561
- table#{$parent} { display: table; }
562
- tr#{$parent} { display: table-row !important; }
563
- th#{$parent},
564
- td#{$parent} { display: table-cell !important; }
565
- }
566
-
567
- @mixin responsive-invisibility($parent) {
568
- #{$parent},
569
- tr#{$parent},
570
- th#{$parent},
571
- td#{$parent} { display: none !important; }
572
- }
573
-
574
-
575
- // Grid System
576
- // -----------
577
-
578
- // Centered container element
579
- @mixin container-fixed() {
580
- margin-right: auto;
581
- margin-left: auto;
582
- padding-left: ($grid-gutter-width / 2);
583
- padding-right: ($grid-gutter-width / 2);
584
- @include clearfix();
585
- }
586
-
587
- // Creates a wrapper for a series of columns
588
- @mixin make-row($gutter: $grid-gutter-width) {
589
- margin-left: ($gutter / -2);
590
- margin-right: ($gutter / -2);
591
- @include clearfix();
592
- }
593
-
594
- // Generate the extra small columns
595
- @mixin make-xs-column($columns, $gutter: $grid-gutter-width) {
596
- position: relative;
597
- float: left;
598
- width: percentage(($columns / $grid-columns));
599
- // Prevent columns from collapsing when empty
600
- min-height: 1px;
601
- // Inner gutter via padding
602
- padding-left: ($gutter / 2);
603
- padding-right: ($gutter / 2);
604
- }
605
-
606
- // Generate the small columns
607
- @mixin make-sm-column($columns, $gutter: $grid-gutter-width) {
608
- position: relative;
609
- // Prevent columns from collapsing when empty
610
- min-height: 1px;
611
- // Inner gutter via padding
612
- padding-left: ($gutter / 2);
613
- padding-right: ($gutter / 2);
614
-
615
- // Calculate width based on number of columns available
616
- @media (min-width: $screen-sm-min) {
617
- float: left;
618
- width: percentage(($columns / $grid-columns));
619
- }
620
- }
621
-
622
- // Generate the small column offsets
623
- @mixin make-sm-column-offset($columns) {
624
- @media (min-width: $screen-sm-min) {
625
- margin-left: percentage(($columns / $grid-columns));
626
- }
627
- }
628
- @mixin make-sm-column-push($columns) {
629
- @media (min-width: $screen-sm-min) {
630
- left: percentage(($columns / $grid-columns));
631
- }
632
- }
633
- @mixin make-sm-column-pull($columns) {
634
- @media (min-width: $screen-sm-min) {
635
- right: percentage(($columns / $grid-columns));
636
- }
637
- }
638
-
639
- // Generate the medium columns
640
- @mixin make-md-column($columns, $gutter: $grid-gutter-width) {
641
- position: relative;
642
- // Prevent columns from collapsing when empty
643
- min-height: 1px;
644
- // Inner gutter via padding
645
- padding-left: ($gutter / 2);
646
- padding-right: ($gutter / 2);
647
-
648
- // Calculate width based on number of columns available
649
- @media (min-width: $screen-md-min) {
650
- float: left;
651
- width: percentage(($columns / $grid-columns));
652
- }
653
- }
654
-
655
- // Generate the medium column offsets
656
- @mixin make-md-column-offset($columns) {
657
- @media (min-width: $screen-md-min) {
658
- margin-left: percentage(($columns / $grid-columns));
659
- }
660
- }
661
- @mixin make-md-column-push($columns) {
662
- @media (min-width: $screen-md) {
663
- left: percentage(($columns / $grid-columns));
664
- }
665
- }
666
- @mixin make-md-column-pull($columns) {
667
- @media (min-width: $screen-md-min) {
668
- right: percentage(($columns / $grid-columns));
669
- }
670
- }
671
-
672
- // Generate the large columns
673
- @mixin make-lg-column($columns, $gutter: $grid-gutter-width) {
674
- position: relative;
675
- // Prevent columns from collapsing when empty
676
- min-height: 1px;
677
- // Inner gutter via padding
678
- padding-left: ($gutter / 2);
679
- padding-right: ($gutter / 2);
680
-
681
- // Calculate width based on number of columns available
682
- @media (min-width: $screen-lg-min) {
683
- float: left;
684
- width: percentage(($columns / $grid-columns));
685
- }
686
- }
687
-
688
- // Generate the large column offsets
689
- @mixin make-lg-column-offset($columns) {
690
- @media (min-width: $screen-lg-min) {
691
- margin-left: percentage(($columns / $grid-columns));
692
- }
693
- }
694
- @mixin make-lg-column-push($columns) {
695
- @media (min-width: $screen-lg-min) {
696
- left: percentage(($columns / $grid-columns));
697
- }
698
- }
699
- @mixin make-lg-column-pull($columns) {
700
- @media (min-width: $screen-lg-min) {
701
- right: percentage(($columns / $grid-columns));
702
- }
703
- }
704
-
705
-
706
- // Framework grid generation
707
- //
708
- // Used only by Bootstrap to generate the correct number of grid classes given
709
- // any value of `$grid-columns`.
710
-
711
- @mixin make-grid-columns() {
712
- $list: ();
713
- @for $index from 1 through $grid-columns {
714
- $list: append($list, unquote(".col-xs-#{$index}, .col-sm-#{$index}, .col-md-#{$index}, .col-lg-#{$index}"), comma);
715
- }
716
- #{$list} {
717
- position: relative;
718
- // Prevent columns from collapsing when empty
719
- min-height: 1px;
720
- // Inner gutter via padding
721
- padding-left: ($grid-gutter-width / 2);
722
- padding-right: ($grid-gutter-width / 2);
723
- }
724
- }
725
-
726
-
727
- @mixin make-grid-columns-float($class) {
728
- $list: ();
729
- @for $index from 1 through $grid-columns {
730
- $list: append($list, unquote(".col-#{$class}-#{$index}"), comma);
731
- }
732
- #{$list} {
733
- float: left;
734
- }
735
- }
736
-
737
-
738
- @mixin calc-grid($index, $class, $type) {
739
- @if ($type == width) and ($index > 0) {
740
- .col-#{$class}-#{$index} {
741
- width: percentage(($index / $grid-columns));
742
- }
743
- }
744
- @if ($type == push) {
745
- .col-#{$class}-push-#{$index} {
746
- left: percentage(($index / $grid-columns));
747
- }
748
- }
749
- @if ($type == pull) {
750
- .col-#{$class}-pull-#{$index} {
751
- right: percentage(($index / $grid-columns));
752
- }
753
- }
754
- @if ($type == offset) {
755
- .col-#{$class}-offset-#{$index} {
756
- margin-left: percentage(($index / $grid-columns));
757
- }
758
- }
759
- }
760
-
761
- @mixin make-grid($index, $class, $type) {
762
- @for $i from 0 through $index {
763
- @include calc-grid($i, $class, $type);
764
- }
765
- }
766
-
767
-
768
-
769
- // Form validation states
770
- //
771
- // Used in forms.less to generate the form validation CSS for warnings, errors,
772
- // and successes.
773
-
774
- @mixin form-control-validation($text-color: #555, $border-color: #ccc, $background-color: #f5f5f5) {
775
- // Color the label and help text
776
- .help-block,
777
- .control-label,
778
- .radio,
779
- .checkbox,
780
- .radio-inline,
781
- .checkbox-inline {
782
- color: $text-color;
783
- }
784
- // Set the border and box shadow on specific inputs to match
785
- .form-control {
786
- border-color: $border-color;
787
- @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
788
- &:focus {
789
- border-color: darken($border-color, 10%);
790
- $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($border-color, 20%);
791
- @include box-shadow($shadow);
792
- }
793
- }
794
- // Set validation states also for addons
795
- .input-group-addon {
796
- color: $text-color;
797
- border-color: $border-color;
798
- background-color: $background-color;
799
- }
800
- }
801
-
802
- // Form control focus state
803
- //
804
- // Generate a customized focus state and for any input with the specified color,
805
- // which defaults to the `$input-focus-border` variable.
806
- //
807
- // We highly encourage you to not customize the default value, but instead use
808
- // this to tweak colors on an as-needed basis. This aesthetic change is based on
809
- // WebKit's default styles, but applicable to a wider range of browsers. Its
810
- // usability and accessibility should be taken into account with any change.
811
- //
812
- // Example usage: change the default blue border and shadow to white for better
813
- // contrast against a dark gray background.
814
-
815
- @mixin form-control-focus($color: $input-border-focus) {
816
- $color-rgba: rgba(red($color), green($color), blue($color), .6);
817
- &:focus {
818
- border-color: $color;
819
- outline: 0;
820
- @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px $color-rgba);
821
- }
822
- }
823
-
824
- // Form control sizing
825
- //
826
- // Relative text size, padding, and border-radii changes for form controls. For
827
- // horizontal sizing, wrap controls in the predefined grid classes. `<select>`
828
- // element gets special love because it's special, and that's a fact!
829
-
830
- @mixin input-size($parent, $input-height, $padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
831
- #{$parent} {
832
-
833
- height: $input-height;
834
- padding: $padding-vertical $padding-horizontal;
835
- font-size: $font-size;
836
- line-height: $line-height;
837
- border-radius: $border-radius;
838
- }
839
- select#{$parent} {
840
- height: $input-height;
841
- line-height: $input-height;
842
- }
843
-
844
- textarea#{$parent} {
845
- height: auto;
846
- }
847
- }
1
+ @import "bootstrap/mixins";