cmaitchison-bootstrap-rails 2.0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/.gitignore +17 -0
- data/Gemfile +4 -0
- data/README.md +97 -0
- data/Rakefile +45 -0
- data/bootstrap-rails.gemspec +23 -0
- data/lib/bootstrap-rails.rb +13 -0
- data/lib/bootstrap-rails/engine.rb +6 -0
- data/lib/bootstrap-rails/ie_hex_str.rb +16 -0
- data/lib/bootstrap-rails/railtie.rb +5 -0
- data/lib/bootstrap-rails/version.rb +5 -0
- data/test/ie_hex_str_test.rb +26 -0
- data/test/test_helper.rb +2 -0
- data/vendor/assets/images/glyphicons-halflings-white.png +0 -0
- data/vendor/assets/images/glyphicons-halflings.png +0 -0
- data/vendor/assets/javascripts/bootstrap-alert.js +94 -0
- data/vendor/assets/javascripts/bootstrap-button.js +100 -0
- data/vendor/assets/javascripts/bootstrap-carousel.js +157 -0
- data/vendor/assets/javascripts/bootstrap-collapse.js +136 -0
- data/vendor/assets/javascripts/bootstrap-dropdown.js +92 -0
- data/vendor/assets/javascripts/bootstrap-modal.js +210 -0
- data/vendor/assets/javascripts/bootstrap-popover.js +95 -0
- data/vendor/assets/javascripts/bootstrap-scrollspy.js +125 -0
- data/vendor/assets/javascripts/bootstrap-tab.js +130 -0
- data/vendor/assets/javascripts/bootstrap-tooltip.js +270 -0
- data/vendor/assets/javascripts/bootstrap-transition.js +51 -0
- data/vendor/assets/javascripts/bootstrap-typeahead.js +271 -0
- data/vendor/assets/javascripts/bootstrap.js +12 -0
- data/vendor/assets/stylesheets/accordion.scss +28 -0
- data/vendor/assets/stylesheets/alerts.scss +70 -0
- data/vendor/assets/stylesheets/bootstrap.scss +62 -0
- data/vendor/assets/stylesheets/breadcrumbs.scss +22 -0
- data/vendor/assets/stylesheets/button-groups.scss +148 -0
- data/vendor/assets/stylesheets/buttons.scss +183 -0
- data/vendor/assets/stylesheets/carousel.scss +121 -0
- data/vendor/assets/stylesheets/close.scss +18 -0
- data/vendor/assets/stylesheets/code.scss +57 -0
- data/vendor/assets/stylesheets/component-animations.scss +18 -0
- data/vendor/assets/stylesheets/dropdowns.scss +130 -0
- data/vendor/assets/stylesheets/forms.scss +523 -0
- data/vendor/assets/stylesheets/grid.scss +8 -0
- data/vendor/assets/stylesheets/hero-unit.scss +20 -0
- data/vendor/assets/stylesheets/labels.scss +32 -0
- data/vendor/assets/stylesheets/layouts.scss +17 -0
- data/vendor/assets/stylesheets/mixins.scss +560 -0
- data/vendor/assets/stylesheets/modals.scss +83 -0
- data/vendor/assets/stylesheets/navbar.scss +299 -0
- data/vendor/assets/stylesheets/navs.scss +353 -0
- data/vendor/assets/stylesheets/pager.scss +30 -0
- data/vendor/assets/stylesheets/pagination.scss +55 -0
- data/vendor/assets/stylesheets/popovers.scss +49 -0
- data/vendor/assets/stylesheets/progress-bars.scss +95 -0
- data/vendor/assets/stylesheets/reset.scss +126 -0
- data/vendor/assets/stylesheets/responsive.scss +327 -0
- data/vendor/assets/stylesheets/scaffolding.scss +29 -0
- data/vendor/assets/stylesheets/sprites.scss +158 -0
- data/vendor/assets/stylesheets/tables.scss +141 -0
- data/vendor/assets/stylesheets/thumbnails.scss +35 -0
- data/vendor/assets/stylesheets/tooltip.scss +35 -0
- data/vendor/assets/stylesheets/type.scss +218 -0
- data/vendor/assets/stylesheets/utilities.scss +23 -0
- data/vendor/assets/stylesheets/variables.scss +107 -0
- data/vendor/assets/stylesheets/wells.scss +17 -0
- metadata +154 -0
@@ -0,0 +1,20 @@
|
|
1
|
+
// HERO UNIT
|
2
|
+
// ---------
|
3
|
+
|
4
|
+
.hero-unit {
|
5
|
+
padding: 60px;
|
6
|
+
margin-bottom: 30px;
|
7
|
+
background-color: #f5f5f5;
|
8
|
+
@include border-radius(6px);
|
9
|
+
h1 {
|
10
|
+
margin-bottom: 0;
|
11
|
+
font-size: 60px;
|
12
|
+
line-height: 1;
|
13
|
+
letter-spacing: -1px;
|
14
|
+
}
|
15
|
+
p {
|
16
|
+
font-size: 18px;
|
17
|
+
font-weight: 200;
|
18
|
+
line-height: $baseLineHeight * 1.5;
|
19
|
+
}
|
20
|
+
}
|
@@ -0,0 +1,32 @@
|
|
1
|
+
// LABELS
|
2
|
+
// ------
|
3
|
+
|
4
|
+
// Base
|
5
|
+
.label {
|
6
|
+
padding: 2px 4px 3px;
|
7
|
+
font-size: $baseFontSize * .85;
|
8
|
+
font-weight: bold;
|
9
|
+
color: $white;
|
10
|
+
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
|
11
|
+
background-color: $grayLight;
|
12
|
+
@include border-radius(3px);
|
13
|
+
}
|
14
|
+
|
15
|
+
// Hover state
|
16
|
+
.label:hover {
|
17
|
+
color: $white;
|
18
|
+
text-decoration: none;
|
19
|
+
}
|
20
|
+
|
21
|
+
// Colors
|
22
|
+
.label-important { background-color: $errorText; }
|
23
|
+
.label-important:hover { background-color: darken($errorText, 10%); }
|
24
|
+
|
25
|
+
.label-warning { background-color: $orange; }
|
26
|
+
.label-warning:hover { background-color: darken($orange, 10%); }
|
27
|
+
|
28
|
+
.label-success { background-color: $successText; }
|
29
|
+
.label-success:hover { background-color: darken($successText, 10%); }
|
30
|
+
|
31
|
+
.label-info { background-color: $infoText; }
|
32
|
+
.label-info:hover { background-color: darken($infoText, 10%); }
|
@@ -0,0 +1,17 @@
|
|
1
|
+
//
|
2
|
+
// Layouts
|
3
|
+
// Fixed-width and fluid (with sidebar) layouts
|
4
|
+
// --------------------------------------------
|
5
|
+
|
6
|
+
|
7
|
+
// Container (centered, fixed-width layouts)
|
8
|
+
.container {
|
9
|
+
@include container-fixed();
|
10
|
+
}
|
11
|
+
|
12
|
+
// Fluid layouts (left aligned, with sidebar, min- & max-width content)
|
13
|
+
.container-fluid {
|
14
|
+
padding-left: $gridGutterWidth;
|
15
|
+
padding-right: $gridGutterWidth;
|
16
|
+
@include clearfix();
|
17
|
+
}
|
@@ -0,0 +1,560 @@
|
|
1
|
+
// Mixins.less
|
2
|
+
// Snippets of reusable CSS to develop faster and keep code readable
|
3
|
+
// -----------------------------------------------------------------
|
4
|
+
|
5
|
+
|
6
|
+
// UTILITY MIXINS
|
7
|
+
// --------------------------------------------------
|
8
|
+
|
9
|
+
// Clearfix
|
10
|
+
// --------
|
11
|
+
// For clearing floats like a boss h5bp.com/q
|
12
|
+
@mixin clearfix() {
|
13
|
+
*zoom: 1;
|
14
|
+
&:before,
|
15
|
+
&:after {
|
16
|
+
display: table;
|
17
|
+
content: "";
|
18
|
+
}
|
19
|
+
&:after {
|
20
|
+
clear: both;
|
21
|
+
}
|
22
|
+
}
|
23
|
+
|
24
|
+
// Webkit-style focus
|
25
|
+
// ------------------
|
26
|
+
@mixin tab-focus() {
|
27
|
+
// Default
|
28
|
+
outline: thin dotted #333;
|
29
|
+
// Webkit
|
30
|
+
outline: 5px auto -webkit-focus-ring-color;
|
31
|
+
outline-offset: -2px;
|
32
|
+
}
|
33
|
+
|
34
|
+
// Center-align a block level element
|
35
|
+
// ----------------------------------
|
36
|
+
@mixin center-block() {
|
37
|
+
display: block;
|
38
|
+
margin-left: auto;
|
39
|
+
margin-right: auto;
|
40
|
+
}
|
41
|
+
|
42
|
+
// IE7 inline-block
|
43
|
+
// ----------------
|
44
|
+
@mixin ie7-inline-block() {
|
45
|
+
*display: inline; /* IE7 inline-block hack */
|
46
|
+
*zoom: 1;
|
47
|
+
}
|
48
|
+
|
49
|
+
// IE7 likes to collapse whitespace on either side of the inline-block elements.
|
50
|
+
// Ems because we're attempting to match the width of a space character. Left
|
51
|
+
// version is for form buttons, which typically come after other elements, and
|
52
|
+
// right version is for icons, which come before. Applying both is ok, but it will
|
53
|
+
// mean that space between those elements will be .6em (~2 space characters) in IE7,
|
54
|
+
// instead of the 1 space in other browsers.
|
55
|
+
@mixin ie7-restore-left-whitespace() {
|
56
|
+
*margin-left: .3em;
|
57
|
+
|
58
|
+
&:first-child {
|
59
|
+
*margin-left: 0;
|
60
|
+
}
|
61
|
+
}
|
62
|
+
|
63
|
+
@mixin ie7-restore-right-whitespace() {
|
64
|
+
*margin-right: .3em;
|
65
|
+
|
66
|
+
&:last-child {
|
67
|
+
*margin-left: 0;
|
68
|
+
}
|
69
|
+
}
|
70
|
+
|
71
|
+
// Sizing shortcuts
|
72
|
+
// -------------------------
|
73
|
+
@mixin size($height: 5px, $width: 5px) {
|
74
|
+
width: $width;
|
75
|
+
height: $height;
|
76
|
+
}
|
77
|
+
@mixin square($size: 5px) {
|
78
|
+
@include size($size, $size);
|
79
|
+
}
|
80
|
+
|
81
|
+
// Placeholder text
|
82
|
+
// -------------------------
|
83
|
+
@mixin placeholder($color: $placeholderText) {
|
84
|
+
:-moz-placeholder {
|
85
|
+
color: $color;
|
86
|
+
}
|
87
|
+
::-webkit-input-placeholder {
|
88
|
+
color: $color;
|
89
|
+
}
|
90
|
+
}
|
91
|
+
|
92
|
+
// Text overflow
|
93
|
+
// -------------------------
|
94
|
+
// Requires inline-block or block for proper styling
|
95
|
+
@mixin text-overflow() {
|
96
|
+
overflow: hidden;
|
97
|
+
text-overflow: ellipsis;
|
98
|
+
white-space: nowrap;
|
99
|
+
}
|
100
|
+
|
101
|
+
|
102
|
+
|
103
|
+
// FONTS
|
104
|
+
// --------------------------------------------------
|
105
|
+
|
106
|
+
@mixin font-family-serif() {
|
107
|
+
font-family: Georgia, "Times New Roman", Times, serif;
|
108
|
+
}
|
109
|
+
|
110
|
+
@mixin font-family-sans-serif() {
|
111
|
+
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
112
|
+
}
|
113
|
+
|
114
|
+
@mixin font-family-monospace() {
|
115
|
+
font-family: Menlo, Monaco, "Courier New", monospace;
|
116
|
+
}
|
117
|
+
|
118
|
+
@mixin font-shorthand($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
|
119
|
+
font-size: $size;
|
120
|
+
font-weight: $weight;
|
121
|
+
line-height: $lineHeight;
|
122
|
+
}
|
123
|
+
|
124
|
+
@mixin font-serif($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
|
125
|
+
@include font-family-serif;
|
126
|
+
@include font-shorthand($size, $weight, $lineHeight);
|
127
|
+
}
|
128
|
+
|
129
|
+
@mixin font-sans-serif($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
|
130
|
+
@include font-family-sans-serif;
|
131
|
+
@include font-shorthand($size, $weight, $lineHeight);
|
132
|
+
}
|
133
|
+
|
134
|
+
@mixin font-monospace($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
|
135
|
+
@include font-family-monospace;
|
136
|
+
@include font-shorthand($size, $weight, $lineHeight);
|
137
|
+
}
|
138
|
+
|
139
|
+
|
140
|
+
|
141
|
+
|
142
|
+
// GRID SYSTEM
|
143
|
+
// --------------------------------------------------
|
144
|
+
|
145
|
+
// Site container
|
146
|
+
// -------------------------
|
147
|
+
@mixin container-fixed() {
|
148
|
+
width: $gridRowWidth;
|
149
|
+
margin-left: auto;
|
150
|
+
margin-right: auto;
|
151
|
+
@include clearfix();
|
152
|
+
}
|
153
|
+
|
154
|
+
// Le grid system
|
155
|
+
// -------------------------
|
156
|
+
|
157
|
+
// Setup the mixins to be used
|
158
|
+
@mixin grid-system-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $columns) {
|
159
|
+
width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
|
160
|
+
}
|
161
|
+
|
162
|
+
@mixin grid-system-offset($gridColumnWidth, $gridGutterWidth, $columns) {
|
163
|
+
margin-left: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1)) + ($gridGutterWidth * 2);
|
164
|
+
}
|
165
|
+
|
166
|
+
@mixin grid-system-grid-column($gridGutterWidth) {
|
167
|
+
float: left;
|
168
|
+
margin-left: $gridGutterWidth;
|
169
|
+
}
|
170
|
+
|
171
|
+
// Take these values and mixins, and make 'em do their thang
|
172
|
+
@mixin grid-system-generate($gridColumns, $gridColumnWidth, $gridGutterWidth) {
|
173
|
+
// Row surrounds the columns
|
174
|
+
.row {
|
175
|
+
margin-left: $gridGutterWidth * -1;
|
176
|
+
@include clearfix();
|
177
|
+
}
|
178
|
+
// Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks @dhg)
|
179
|
+
[class*="span"] {
|
180
|
+
@include grid-system-grid-column($gridGutterWidth);
|
181
|
+
}
|
182
|
+
// Default columns
|
183
|
+
@for $i from 1 through 12 {
|
184
|
+
.span#{$i} { @include grid-system-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $i); }
|
185
|
+
}
|
186
|
+
.container { @include grid-system-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 12); }
|
187
|
+
// Offset column options
|
188
|
+
@for $i from 1 through 11 {
|
189
|
+
.offset#{$i} { @include grid-system-offset($gridColumnWidth, $gridGutterWidth, $i); }
|
190
|
+
}
|
191
|
+
}
|
192
|
+
|
193
|
+
// Fluid grid system
|
194
|
+
// -------------------------
|
195
|
+
|
196
|
+
// Setup the mixins to be used
|
197
|
+
@mixin fluid-grid-system-columns($fluidGridGutterWidth, $fluidGridColumnWidth, $columns) {
|
198
|
+
//TODO: check floid
|
199
|
+
width: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1));
|
200
|
+
}
|
201
|
+
@mixin fluid-grid-system-grid-column($fluidGridGutterWidth) {
|
202
|
+
float: left;
|
203
|
+
margin-left: $fluidGridGutterWidth;
|
204
|
+
}
|
205
|
+
// Take these values and mixins, and make 'em do their thang
|
206
|
+
@mixin fluid-grid-system-generate($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
|
207
|
+
// Row surrounds the columns
|
208
|
+
.row-fluid {
|
209
|
+
width: 100%;
|
210
|
+
@include clearfix();
|
211
|
+
|
212
|
+
// Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks @dhg)
|
213
|
+
> [class*="span"] {
|
214
|
+
@include fluid-grid-system-grid-column($fluidGridGutterWidth);
|
215
|
+
}
|
216
|
+
> [class*="span"]:first-child {
|
217
|
+
margin-left: 0;
|
218
|
+
}
|
219
|
+
// Default columns
|
220
|
+
@for $i from 1 through 12 {
|
221
|
+
.span#{$i} { @include fluid-grid-system-columns($fluidGridGutterWidth, $fluidGridColumnWidth, $i); }
|
222
|
+
}
|
223
|
+
}
|
224
|
+
}
|
225
|
+
|
226
|
+
// Input grid system
|
227
|
+
// -------------------------
|
228
|
+
@mixin input-grid-system-input-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $columns) {
|
229
|
+
width: (($gridColumnWidth) * $columns) + ($gridGutterWidth * ($columns - 1)) - 10;
|
230
|
+
}
|
231
|
+
@mixin input-grid-system-generate($gridColumns, $gridColumnWidth, $gridGutterWidth) {
|
232
|
+
input,
|
233
|
+
textarea,
|
234
|
+
.uneditable-input {
|
235
|
+
@for $i from 1 through 12 {
|
236
|
+
&.span#{$i} { @include input-grid-system-input-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $i); }
|
237
|
+
}
|
238
|
+
}
|
239
|
+
}
|
240
|
+
|
241
|
+
// Make a Grid
|
242
|
+
// -------------------------
|
243
|
+
// Use .make-row and .make-column to assign semantic layouts grid system behavior
|
244
|
+
@mixin make-row() {
|
245
|
+
margin-left: $gridGutterWidth * -1;
|
246
|
+
@include clearfix();
|
247
|
+
}
|
248
|
+
@mixin make-column($columns: 1) {
|
249
|
+
float: left;
|
250
|
+
margin-left: $gridGutterWidth;
|
251
|
+
width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
|
252
|
+
}
|
253
|
+
|
254
|
+
|
255
|
+
|
256
|
+
// Form field states (used in forms.less)
|
257
|
+
// --------------------------------------------------
|
258
|
+
|
259
|
+
// Mixin for form field states
|
260
|
+
@mixin form-field-state($textColor: #555, $borderColor: #ccc, $backgroundColor: #f5f5f5) {
|
261
|
+
// Set the text color
|
262
|
+
> label,
|
263
|
+
.help-block,
|
264
|
+
.help-inline {
|
265
|
+
color: $textColor;
|
266
|
+
}
|
267
|
+
// Style inputs accordingly
|
268
|
+
input,
|
269
|
+
select,
|
270
|
+
textarea {
|
271
|
+
color: $textColor;
|
272
|
+
border-color: $borderColor;
|
273
|
+
&:focus {
|
274
|
+
border-color: darken($borderColor, 10%);
|
275
|
+
@include box-shadow(0 0 6px lighten($borderColor, 20%));
|
276
|
+
}
|
277
|
+
}
|
278
|
+
// Give a small background color for input-prepend/-append
|
279
|
+
.input-prepend .add-on,
|
280
|
+
.input-append .add-on {
|
281
|
+
color: $textColor;
|
282
|
+
background-color: $backgroundColor;
|
283
|
+
border-color: $textColor;
|
284
|
+
}
|
285
|
+
}
|
286
|
+
|
287
|
+
|
288
|
+
|
289
|
+
// CSS3 PROPERTIES
|
290
|
+
// --------------------------------------------------
|
291
|
+
|
292
|
+
// Border Radius
|
293
|
+
@mixin border-radius($radius: 5px) {
|
294
|
+
-webkit-border-radius: $radius;
|
295
|
+
-moz-border-radius: $radius;
|
296
|
+
border-radius: $radius;
|
297
|
+
}
|
298
|
+
|
299
|
+
// Drop shadows
|
300
|
+
@mixin box-shadow($shadow: 0 1px 3px rgba(0,0,0,.25)) {
|
301
|
+
-webkit-box-shadow: $shadow;
|
302
|
+
-moz-box-shadow: $shadow;
|
303
|
+
box-shadow: $shadow;
|
304
|
+
}
|
305
|
+
|
306
|
+
// Transitions
|
307
|
+
@mixin transition($transition) {
|
308
|
+
-webkit-transition: $transition;
|
309
|
+
-moz-transition: $transition;
|
310
|
+
-ms-transition: $transition;
|
311
|
+
-o-transition: $transition;
|
312
|
+
transition: $transition;
|
313
|
+
}
|
314
|
+
|
315
|
+
// Transformations
|
316
|
+
@mixin rotate($degrees) {
|
317
|
+
-webkit-transform: rotate($degrees);
|
318
|
+
-moz-transform: rotate($degrees);
|
319
|
+
-ms-transform: rotate($degrees);
|
320
|
+
-o-transform: rotate($degrees);
|
321
|
+
transform: rotate($degrees);
|
322
|
+
}
|
323
|
+
@mixin scale($ratio) {
|
324
|
+
-webkit-transform: scale($ratio);
|
325
|
+
-moz-transform: scale($ratio);
|
326
|
+
-ms-transform: scale($ratio);
|
327
|
+
-o-transform: scale($ratio);
|
328
|
+
transform: scale($ratio);
|
329
|
+
}
|
330
|
+
@mixin translate($x: 0, $y: 0) {
|
331
|
+
-webkit-transform: translate($x, $y);
|
332
|
+
-moz-transform: translate($x, $y);
|
333
|
+
-ms-transform: translate($x, $y);
|
334
|
+
-o-transform: translate($x, $y);
|
335
|
+
transform: translate($x, $y);
|
336
|
+
}
|
337
|
+
@mixin skew($x: 0, $y: 0) {
|
338
|
+
-webkit-transform: skew($x, $y);
|
339
|
+
-moz-transform: skew($x, $y);
|
340
|
+
-ms-transform: skew($x, $y);
|
341
|
+
-o-transform: skew($x, $y);
|
342
|
+
transform: skew($x, $y);
|
343
|
+
}
|
344
|
+
@mixin translate3d($x: 0, $y: 0, $z: 0) {
|
345
|
+
-webkit-transform: translate($x, $y, $z);
|
346
|
+
-moz-transform: translate($x, $y, $z);
|
347
|
+
-ms-transform: translate($x, $y, $z);
|
348
|
+
-o-transform: translate($x, $y, $z);
|
349
|
+
transform: translate($x, $y, $z);
|
350
|
+
}
|
351
|
+
|
352
|
+
// Background clipping
|
353
|
+
// Heads up: FF 3.6 and under need "padding" instead of "padding-box"
|
354
|
+
@mixin background-clip($clip) {
|
355
|
+
-webkit-background-clip: $clip;
|
356
|
+
-moz-background-clip: $clip;
|
357
|
+
background-clip: $clip;
|
358
|
+
}
|
359
|
+
|
360
|
+
// Background sizing
|
361
|
+
@mixin background-size($size){
|
362
|
+
-webkit-background-size: $size;
|
363
|
+
-moz-background-size: $size;
|
364
|
+
-o-background-size: $size;
|
365
|
+
background-size: $size;
|
366
|
+
}
|
367
|
+
|
368
|
+
|
369
|
+
// Box sizing
|
370
|
+
@mixin box-sizing($boxmodel) {
|
371
|
+
-webkit-box-sizing: $boxmodel;
|
372
|
+
-moz-box-sizing: $boxmodel;
|
373
|
+
box-sizing: $boxmodel;
|
374
|
+
}
|
375
|
+
|
376
|
+
// User select
|
377
|
+
// For selecting text on the page
|
378
|
+
@mixin user-select($select) {
|
379
|
+
-webkit-user-select: $select;
|
380
|
+
-moz-user-select: $select;
|
381
|
+
-o-user-select: $select;
|
382
|
+
user-select: $select;
|
383
|
+
}
|
384
|
+
|
385
|
+
// Resize anything
|
386
|
+
@mixin resizable($direction: both) {
|
387
|
+
resize: $direction; // Options: horizontal, vertical, both
|
388
|
+
overflow: auto; // Safari fix
|
389
|
+
}
|
390
|
+
|
391
|
+
// CSS3 Content Columns
|
392
|
+
@mixin content-columns($columnCount, $columnGap: $gridColumnGutter) {
|
393
|
+
-webkit-column-count: $columnCount;
|
394
|
+
-moz-column-count: $columnCount;
|
395
|
+
column-count: $columnCount;
|
396
|
+
-webkit-column-gap: $columnGap;
|
397
|
+
-moz-column-gap: $columnGap;
|
398
|
+
column-gap: $columnGap;
|
399
|
+
}
|
400
|
+
|
401
|
+
// Opacity
|
402
|
+
@mixin opacity($opacity: 100) {
|
403
|
+
opacity: $opacity / 100;
|
404
|
+
filter: alpha(opacity=#{$opacity});
|
405
|
+
}
|
406
|
+
|
407
|
+
|
408
|
+
|
409
|
+
// BACKGROUNDS
|
410
|
+
// --------------------------------------------------
|
411
|
+
|
412
|
+
// Add an alphatransparency value to any background or border color (via Elyse Holladay)
|
413
|
+
@mixin translucent-background($color: $white, $alpha: 1) {
|
414
|
+
background-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
|
415
|
+
}
|
416
|
+
@mixin translucent-border($color: $white, $alpha: 1) {
|
417
|
+
border-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
|
418
|
+
@include background-clip(padding-box);
|
419
|
+
}
|
420
|
+
|
421
|
+
// Gradients
|
422
|
+
@mixin gradient-horizontal($startColor: #555, $endColor: #333) {
|
423
|
+
background-color: $endColor;
|
424
|
+
background-image: -moz-linear-gradient(left, $startColor, $endColor); // FF 3.6+
|
425
|
+
background-image: -ms-linear-gradient(left, $startColor, $endColor); // IE10
|
426
|
+
background-image: -webkit-gradient(linear, 0 0, 100% 0, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
|
427
|
+
background-image: -webkit-linear-gradient(left, $startColor, $endColor); // Safari 5.1+, Chrome 10+
|
428
|
+
background-image: -o-linear-gradient(left, $startColor, $endColor); // Opera 11.10
|
429
|
+
background-image: linear-gradient(left, $startColor, $endColor); // Le standard
|
430
|
+
background-repeat: repeat-x;
|
431
|
+
$ieStartColor: ie_hex_str($startColor);
|
432
|
+
$ieEndColor: ie_hex_str($endColor);
|
433
|
+
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$ieStartColor}', endColorstr='#{$ieEndColor}', GradientType=1); // IE9 and down
|
434
|
+
}
|
435
|
+
@mixin gradient-vertical($startColor: #555, $endColor: #333) {
|
436
|
+
background-color: mix($startColor, $endColor, 60%);
|
437
|
+
background-image: -moz-linear-gradient(top, $startColor, $endColor); // FF 3.6+
|
438
|
+
background-image: -ms-linear-gradient(top, $startColor, $endColor); // IE10
|
439
|
+
background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
|
440
|
+
background-image: -webkit-linear-gradient(top, $startColor, $endColor); // Safari 5.1+, Chrome 10+
|
441
|
+
background-image: -o-linear-gradient(top, $startColor, $endColor); // Opera 11.10
|
442
|
+
background-image: linear-gradient(top, $startColor, $endColor); // The standard
|
443
|
+
background-repeat: repeat-x;
|
444
|
+
$ieStartColor: ie_hex_str($startColor);
|
445
|
+
$ieEndColor: ie_hex_str($endColor);
|
446
|
+
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$ieStartColor}', endColorstr='#{$ieEndColor}', GradientType=0); // IE9 and down
|
447
|
+
}
|
448
|
+
@mixin gradient-directional($startColor: #555, $endColor: #333, $deg: 45deg) {
|
449
|
+
background-color: $endColor;
|
450
|
+
background-repeat: repeat-x;
|
451
|
+
background-image: -moz-linear-gradient($deg, $startColor, $endColor); // FF 3.6+
|
452
|
+
background-image: -ms-linear-gradient($deg, $startColor, $endColor); // IE10
|
453
|
+
background-image: -webkit-linear-gradient($deg, $startColor, $endColor); // Safari 5.1+, Chrome 10+
|
454
|
+
background-image: -o-linear-gradient($deg, $startColor, $endColor); // Opera 11.10
|
455
|
+
background-image: linear-gradient($deg, $startColor, $endColor); // The standard
|
456
|
+
}
|
457
|
+
@mixin gradient-vertical-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) {
|
458
|
+
background-color: mix($midColor, $endColor, 80%);
|
459
|
+
background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), color-stop($colorStop, $midColor), to($endColor));
|
460
|
+
background-image: -webkit-linear-gradient($startColor, $midColor $colorStop, $endColor);
|
461
|
+
background-image: -moz-linear-gradient(top, $startColor, $midColor $colorStop, $endColor);
|
462
|
+
background-image: -ms-linear-gradient($startColor, $midColor $colorStop, $endColor);
|
463
|
+
background-image: -o-linear-gradient($startColor, $midColor $colorStop, $endColor);
|
464
|
+
background-image: linear-gradient($startColor, $midColor $colorStop, $endColor);
|
465
|
+
background-repeat: no-repeat;
|
466
|
+
$ieStartColor: ie_hex_str($startColor);
|
467
|
+
$ieEndColor: ie_hex_str($endColor);
|
468
|
+
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$ieStartColor}', endColorstr='#{$ieEndColor}', GradientType=0); // IE9 and down, gets no color-stop at all for proper fallback
|
469
|
+
}
|
470
|
+
@mixin gradient-radial($innerColor: #555, $outerColor: #333) {
|
471
|
+
background-color: $outerColor;
|
472
|
+
background-image: -webkit-gradient(radial, center center, 0, center center, 460, from($innerColor), to($outerColor));
|
473
|
+
background-image: -webkit-radial-gradient(circle, $innerColor, $outerColor);
|
474
|
+
background-image: -moz-radial-gradient(circle, $innerColor, $outerColor);
|
475
|
+
background-image: -ms-radial-gradient(circle, $innerColor, $outerColor);
|
476
|
+
background-repeat: no-repeat;
|
477
|
+
// Opera cannot do radial gradients yet
|
478
|
+
}
|
479
|
+
@mixin gradient-striped($color, $angle: -45deg) {
|
480
|
+
background-color: $color;
|
481
|
+
$transparent: rgba(0,0,0,0); // Workaround compass transparent color-stop bug https://github.com/chriseppstein/compass/issues/356
|
482
|
+
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));
|
483
|
+
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);
|
484
|
+
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);
|
485
|
+
background-image: -ms-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);
|
486
|
+
background-image: -o-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);
|
487
|
+
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);
|
488
|
+
}
|
489
|
+
|
490
|
+
// Gradient Bar Colors for buttons and alerts
|
491
|
+
@mixin gradient-bar($primaryColor, $secondaryColor) {
|
492
|
+
@include gradient-vertical($primaryColor, $secondaryColor);
|
493
|
+
border-color: $secondaryColor $secondaryColor darken($secondaryColor, 15%);
|
494
|
+
border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
|
495
|
+
}
|
496
|
+
|
497
|
+
// Reset filters for IE
|
498
|
+
@mixin reset-filter() {
|
499
|
+
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
|
500
|
+
}
|
501
|
+
|
502
|
+
|
503
|
+
// Mixin for generating button backgrounds
|
504
|
+
// ---------------------------------------
|
505
|
+
@mixin button-background($startColor, $endColor) {
|
506
|
+
// gradientBar will set the background to a pleasing blend of these, to support IE<=9
|
507
|
+
@include gradient-bar($startColor, $endColor);
|
508
|
+
@include reset-filter();
|
509
|
+
|
510
|
+
// in these cases the gradient won't cover the background, so we override
|
511
|
+
&:hover, &:active, &.active, &.disabled, &[disabled] {
|
512
|
+
background-color: $endColor;
|
513
|
+
}
|
514
|
+
|
515
|
+
// IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
|
516
|
+
&:active,
|
517
|
+
&.active {
|
518
|
+
background-color: darken($endColor, 10%) \9;
|
519
|
+
}
|
520
|
+
}
|
521
|
+
|
522
|
+
|
523
|
+
// COMPONENT MIXINS
|
524
|
+
// --------------------------------------------------
|
525
|
+
|
526
|
+
// POPOVER ARROWS
|
527
|
+
// -------------------------
|
528
|
+
// For tipsies and popovers
|
529
|
+
@mixin popover-arrow-top($arrowWidth: 5px) {
|
530
|
+
bottom: 0;
|
531
|
+
left: 50%;
|
532
|
+
margin-left: -$arrowWidth;
|
533
|
+
border-left: $arrowWidth solid transparent;
|
534
|
+
border-right: $arrowWidth solid transparent;
|
535
|
+
border-top: $arrowWidth solid $black;
|
536
|
+
}
|
537
|
+
@mixin popover-arrow-left($arrowWidth: 5px) {
|
538
|
+
top: 50%;
|
539
|
+
right: 0;
|
540
|
+
margin-top: -$arrowWidth;
|
541
|
+
border-top: $arrowWidth solid transparent;
|
542
|
+
border-bottom: $arrowWidth solid transparent;
|
543
|
+
border-left: $arrowWidth solid $black;
|
544
|
+
}
|
545
|
+
@mixin popover-arrow-bottom($arrowWidth: 5px) {
|
546
|
+
top: 0;
|
547
|
+
left: 50%;
|
548
|
+
margin-left: -$arrowWidth;
|
549
|
+
border-left: $arrowWidth solid transparent;
|
550
|
+
border-right: $arrowWidth solid transparent;
|
551
|
+
border-bottom: $arrowWidth solid $black;
|
552
|
+
}
|
553
|
+
@mixin popover-arrow-right($arrowWidth: 5px) {
|
554
|
+
top: 50%;
|
555
|
+
left: 0;
|
556
|
+
margin-top: -$arrowWidth;
|
557
|
+
border-top: $arrowWidth solid transparent;
|
558
|
+
border-bottom: $arrowWidth solid transparent;
|
559
|
+
border-right: $arrowWidth solid $black;
|
560
|
+
}
|