bootstrap_sass_rails 0.0.1

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