compass_twitter_bootstrap 0.1.4 → 0.1.5
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 +1 -0
- data/README.md +23 -0
- data/lib/compass_twitter_bootstrap/version.rb +1 -1
- data/lib/compass_twitter_bootstrap.rb +1 -1
- data/stylesheets/_compass_twitter_bootstrap.scss +7 -3
- data/stylesheets/compass_twitter_bootstrap/_forms.scss +135 -63
- data/stylesheets/compass_twitter_bootstrap/{_preboot.scss → _mixins.scss} +69 -109
- data/stylesheets/compass_twitter_bootstrap/_patterns.scss +277 -93
- data/stylesheets/compass_twitter_bootstrap/_reset.scss +5 -0
- data/stylesheets/compass_twitter_bootstrap/_scaffolding.scss +88 -64
- data/stylesheets/compass_twitter_bootstrap/_tables.scss +30 -7
- data/stylesheets/compass_twitter_bootstrap/_type.scss +3 -3
- data/stylesheets/compass_twitter_bootstrap/_variables.scss +60 -0
- metadata +8 -7
data/.gitignore
CHANGED
data/README.md
CHANGED
@@ -24,6 +24,29 @@ Compass Twitter Bootstrap is Twitter's toolkit converted for Compass.
|
|
24
24
|
|
25
25
|
@import "compass_twitter_bootstrap";
|
26
26
|
|
27
|
+
## Usage with asset pipeline(Rails 3.1)
|
28
|
+
|
29
|
+
**Add it to your Gemfile**
|
30
|
+
|
31
|
+
gem 'compass_twitter_bootstrap'
|
32
|
+
|
33
|
+
**Bundle install**
|
34
|
+
|
35
|
+
bundle install
|
36
|
+
|
37
|
+
**Add it to your Application.rb**
|
38
|
+
|
39
|
+
# Enable the asset pipeline
|
40
|
+
config.assets.enabled = true
|
41
|
+
|
42
|
+
# Compass integration
|
43
|
+
config.sass.load_paths << Compass::Frameworks['compass'].stylesheets_directory
|
44
|
+
config.sass.load_paths << Compass::Frameworks['twitter_bootstrap'].stylesheets_directory
|
45
|
+
|
46
|
+
**Import it into your SCSS file**
|
47
|
+
|
48
|
+
@import "compass_twitter_bootstrap"
|
49
|
+
|
27
50
|
|
28
51
|
## TWITTER BOOTSTRAP
|
29
52
|
|
@@ -1,6 +1,6 @@
|
|
1
1
|
require "compass_twitter_bootstrap/version"
|
2
2
|
require 'compass'
|
3
|
-
Compass::Frameworks.register("
|
3
|
+
Compass::Frameworks.register("twitter_bootstrap", :path => "#{File.dirname(__FILE__)}/..")
|
4
4
|
|
5
5
|
module CompassTwitterBootstrap
|
6
6
|
STYLESHEETS = File.expand_path("../stylesheets", __FILE__)
|
@@ -1,5 +1,5 @@
|
|
1
1
|
/*!
|
2
|
-
* Bootstrap v1.
|
2
|
+
* Bootstrap v1.3.0
|
3
3
|
*
|
4
4
|
* Copyright 2011 Twitter, Inc
|
5
5
|
* Licensed under the Apache License v2.0
|
@@ -10,11 +10,15 @@
|
|
10
10
|
*/
|
11
11
|
|
12
12
|
@import "compass";
|
13
|
+
|
13
14
|
// CSS Reset
|
14
15
|
@import "compass_twitter_bootstrap/reset";
|
15
16
|
|
16
|
-
// Core
|
17
|
-
@import "compass_twitter_bootstrap/
|
17
|
+
// Core variables and mixins
|
18
|
+
@import "compass_twitter_bootstrap/variables";
|
19
|
+
@import "compass_twitter_bootstrap/mixins";
|
20
|
+
|
21
|
+
// Grid system and page structure
|
18
22
|
@import "compass_twitter_bootstrap/scaffolding";
|
19
23
|
|
20
24
|
// Styled patterns and elements
|
@@ -16,18 +16,19 @@ fieldset {
|
|
16
16
|
padding-top: $baseline;
|
17
17
|
legend {
|
18
18
|
display: block;
|
19
|
-
|
20
|
-
font-size:
|
19
|
+
padding-left: 150px;
|
20
|
+
font-size: $basefont * 1.5;
|
21
21
|
line-height: 1;
|
22
|
-
*margin: 0 0 5px 145px; /* IE6-7 */
|
23
|
-
*line-height: 1.5; /* IE6-7 */
|
24
22
|
color: $grayDark;
|
23
|
+
*padding: 0 0 5px 145px; /* IE6-7 */
|
24
|
+
*line-height: 1.5; /* IE6-7 */
|
25
25
|
}
|
26
26
|
}
|
27
27
|
|
28
28
|
// Parent element that clears floats and wraps labels and fields together
|
29
|
-
.clearfix {
|
29
|
+
form .clearfix {
|
30
30
|
margin-bottom: $baseline;
|
31
|
+
@include clearfix();
|
31
32
|
}
|
32
33
|
|
33
34
|
// Set font for forms
|
@@ -41,8 +42,8 @@ textarea {
|
|
41
42
|
// Float labels left
|
42
43
|
label {
|
43
44
|
padding-top: 6px;
|
44
|
-
font-size:
|
45
|
-
line-height:
|
45
|
+
font-size: $basefont;
|
46
|
+
line-height: $baseline;
|
46
47
|
float: left;
|
47
48
|
width: 130px;
|
48
49
|
text-align: right;
|
@@ -50,7 +51,7 @@ label {
|
|
50
51
|
}
|
51
52
|
|
52
53
|
// Shift over the inside div to align all label's relevant content
|
53
|
-
|
54
|
+
form .input {
|
54
55
|
margin-left: 150px;
|
55
56
|
}
|
56
57
|
|
@@ -69,7 +70,7 @@ select,
|
|
69
70
|
width: 210px;
|
70
71
|
height: $baseline;
|
71
72
|
padding: 4px;
|
72
|
-
font-size:
|
73
|
+
font-size: $basefont;
|
73
74
|
line-height: $baseline;
|
74
75
|
color: $gray;
|
75
76
|
border: 1px solid #ccc;
|
@@ -89,7 +90,7 @@ input[type=radio] {
|
|
89
90
|
}
|
90
91
|
|
91
92
|
input[type=file] {
|
92
|
-
background-color:
|
93
|
+
background-color: $white;
|
93
94
|
padding: initial;
|
94
95
|
border: initial;
|
95
96
|
line-height: initial;
|
@@ -105,19 +106,27 @@ input[type=submit] {
|
|
105
106
|
|
106
107
|
select,
|
107
108
|
input[type=file] {
|
108
|
-
height: $baseline * 1.5;
|
109
|
+
height: $baseline * 1.5; // In IE7, the height of the select element cannot be changed by height, only font-size
|
109
110
|
line-height: $baseline * 1.5;
|
111
|
+
*margin-top: 4px; /* For IE7, add top margin to align select with labels */
|
112
|
+
}
|
113
|
+
|
114
|
+
// Make multiple select elements height not fixed
|
115
|
+
select[multiple] {
|
116
|
+
height: inherit;
|
110
117
|
}
|
111
118
|
|
112
119
|
textarea {
|
113
120
|
height: auto;
|
114
121
|
}
|
115
122
|
|
123
|
+
// For text that needs to appear as an input but should not be an input
|
116
124
|
.uneditable-input {
|
117
|
-
background-color:
|
125
|
+
background-color: $white;
|
118
126
|
display: block;
|
119
|
-
border-color: #
|
120
|
-
@include box-shadow(inset 0 1px 2px rgba(0,0,0,.
|
127
|
+
border-color: #eee;
|
128
|
+
@include box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
|
129
|
+
cursor: not-allowed;
|
121
130
|
}
|
122
131
|
|
123
132
|
// Placeholder text gets special styles; can't be bundled together though for some reason
|
@@ -130,21 +139,27 @@ textarea {
|
|
130
139
|
|
131
140
|
// Focus states
|
132
141
|
input,
|
133
|
-
|
142
|
+
textarea {
|
134
143
|
$transition: border linear .2s, box-shadow linear .2s;
|
135
144
|
@include transition($transition);
|
136
145
|
@include box-shadow(inset 0 1px 3px rgba(0,0,0,.1));
|
137
146
|
}
|
138
147
|
input:focus,
|
139
148
|
textarea:focus {
|
140
|
-
outline:
|
149
|
+
outline: 0;
|
141
150
|
border-color: rgba(82,168,236,.8);
|
142
151
|
$shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6);
|
143
152
|
@include box-shadow($shadow);
|
144
153
|
}
|
154
|
+
input[type=file]:focus,
|
155
|
+
input[type=checkbox]:focus,
|
156
|
+
select:focus {
|
157
|
+
@include box-shadow(none); // override for file inputs
|
158
|
+
outline: 1px dotted #666; // Selet elements don't get box-shadow styles, so instead we do outline
|
159
|
+
}
|
145
160
|
|
146
161
|
// Error styles
|
147
|
-
form div.error {
|
162
|
+
form div.clearfix.error {
|
148
163
|
background: lighten($red, 57%);
|
149
164
|
padding: 10px 0;
|
150
165
|
margin: -10px 0 10px;
|
@@ -175,35 +190,87 @@ form div.error {
|
|
175
190
|
}
|
176
191
|
|
177
192
|
// Form element sizes
|
178
|
-
.input-
|
193
|
+
// TODO v2: remove duplication here and just stick to .input-[size] in light of adding .spanN sizes
|
194
|
+
.input-mini,
|
195
|
+
input.mini,
|
196
|
+
textarea.mini,
|
197
|
+
select.mini {
|
179
198
|
width: 60px;
|
180
199
|
}
|
181
|
-
.input-small,
|
200
|
+
.input-small,
|
201
|
+
input.small,
|
202
|
+
textarea.small,
|
203
|
+
select.small {
|
182
204
|
width: 90px;
|
183
205
|
}
|
184
|
-
.input-medium,
|
206
|
+
.input-medium,
|
207
|
+
input.medium,
|
208
|
+
textarea.medium,
|
209
|
+
select.medium {
|
185
210
|
width: 150px;
|
186
211
|
}
|
187
|
-
.input-large,
|
212
|
+
.input-large,
|
213
|
+
input.large,
|
214
|
+
textarea.large,
|
215
|
+
select.large {
|
188
216
|
width: 210px;
|
189
217
|
}
|
190
|
-
.input-xlarge,
|
218
|
+
.input-xlarge,
|
219
|
+
input.xlarge,
|
220
|
+
textarea.xlarge,
|
221
|
+
select.xlarge {
|
191
222
|
width: 270px;
|
192
223
|
}
|
193
|
-
.input-xxlarge,
|
224
|
+
.input-xxlarge,
|
225
|
+
input.xxlarge,
|
226
|
+
textarea.xxlarge,
|
227
|
+
select.xxlarge {
|
194
228
|
width: 530px;
|
195
229
|
}
|
196
230
|
textarea.xxlarge {
|
197
|
-
overflow-y:
|
231
|
+
overflow-y: auto;
|
198
232
|
}
|
199
233
|
|
200
|
-
//
|
201
|
-
input
|
202
|
-
|
203
|
-
|
204
|
-
|
234
|
+
// Grid style input sizes
|
235
|
+
// This is a duplication of the main grid @include columns(); mixin, but subtracts 10px to account for input padding and border
|
236
|
+
@mixin formColumns($columnSpan: 1) {
|
237
|
+
display: inline-block;
|
238
|
+
float: none;
|
239
|
+
width: (($gridColumnWidth - 10) * $columnSpan) + (($gridColumnWidth - 10) * ($columnSpan - 1));
|
240
|
+
margin-left: 0;
|
241
|
+
}
|
242
|
+
input,
|
243
|
+
textarea,
|
244
|
+
select {
|
245
|
+
// Default columns
|
246
|
+
&.span1 { @include formColumns(1); }
|
247
|
+
&.span2 { @include formColumns(2); }
|
248
|
+
&.span3 { @include formColumns(3); }
|
249
|
+
&.span4 { @include formColumns(4); }
|
250
|
+
&.span5 { @include formColumns(5); }
|
251
|
+
&.span6 { @include formColumns(6); }
|
252
|
+
&.span7 { @include formColumns(7); }
|
253
|
+
&.span8 { @include formColumns(8); }
|
254
|
+
&.span9 { @include formColumns(9); }
|
255
|
+
&.span10 { @include formColumns(10); }
|
256
|
+
&.span11 { @include formColumns(11); }
|
257
|
+
&.span12 { @include formColumns(12); }
|
258
|
+
&.span13 { @include formColumns(13); }
|
259
|
+
&.span14 { @include formColumns(14); }
|
260
|
+
&.span15 { @include formColumns(15); }
|
261
|
+
&.span16 { @include formColumns(16); }
|
262
|
+
}
|
263
|
+
|
264
|
+
// Disabled and read-only inputs
|
265
|
+
input[disabled],
|
266
|
+
select[disabled],
|
267
|
+
textarea[disabled],
|
268
|
+
input[readonly],
|
269
|
+
select[readonly],
|
270
|
+
textarea[readonly] {
|
271
|
+
background-color: #f5f5f5;
|
205
272
|
border-color: #ddd;
|
206
|
-
|
273
|
+
cursor: not-allowed;
|
207
274
|
}
|
208
275
|
|
209
276
|
// Actions (the buttons)
|
@@ -228,7 +295,7 @@ input.disabled {
|
|
228
295
|
// Help Text
|
229
296
|
.help-inline,
|
230
297
|
.help-block {
|
231
|
-
font-size:
|
298
|
+
font-size: $basefont - 2;
|
232
299
|
line-height: $baseline;
|
233
300
|
color: $grayLight;
|
234
301
|
}
|
@@ -268,20 +335,22 @@ input.disabled {
|
|
268
335
|
@include border-radius(0 3px 3px 0);
|
269
336
|
}
|
270
337
|
.add-on {
|
338
|
+
position: relative;
|
271
339
|
background: #f5f5f5;
|
340
|
+
border: 1px solid #ccc;
|
341
|
+
z-index: 2;
|
272
342
|
float: left;
|
273
343
|
display: block;
|
274
344
|
width: auto;
|
275
345
|
min-width: 16px;
|
346
|
+
height: 18px;
|
276
347
|
padding: 4px 4px 4px 5px;
|
277
|
-
|
348
|
+
margin-right: -1px;
|
278
349
|
font-weight: normal;
|
279
350
|
line-height: 18px;
|
280
|
-
|
351
|
+
color: $grayLight;
|
281
352
|
text-align: center;
|
282
|
-
text-shadow: 0 1px 0
|
283
|
-
border: 1px solid #ccc;
|
284
|
-
border-right-width: 0;
|
353
|
+
text-shadow: 0 1px 0 $white;
|
285
354
|
@include border-radius(3px 0 0 3px);
|
286
355
|
}
|
287
356
|
.active {
|
@@ -301,8 +370,8 @@ input.disabled {
|
|
301
370
|
}
|
302
371
|
.add-on {
|
303
372
|
@include border-radius(0 3px 3px 0);
|
304
|
-
|
305
|
-
|
373
|
+
margin-right: 0;
|
374
|
+
margin-left: -1px;
|
306
375
|
}
|
307
376
|
}
|
308
377
|
|
@@ -314,31 +383,34 @@ input.disabled {
|
|
314
383
|
display: block;
|
315
384
|
padding: 0;
|
316
385
|
width: 100%;
|
317
|
-
|
318
|
-
|
319
|
-
|
320
|
-
|
321
|
-
|
322
|
-
|
323
|
-
|
324
|
-
|
325
|
-
|
326
|
-
|
327
|
-
|
328
|
-
small {
|
329
|
-
font-size: 12px;
|
330
|
-
font-weight: normal;
|
331
|
-
}
|
332
|
-
}
|
333
|
-
ul.inputs-list {
|
334
|
-
margin-left: 25px;
|
335
|
-
margin-bottom: 10px;
|
336
|
-
padding-top: 0;
|
386
|
+
}
|
387
|
+
label {
|
388
|
+
display: block;
|
389
|
+
float: none;
|
390
|
+
width: auto;
|
391
|
+
padding: 0;
|
392
|
+
line-height: $baseline;
|
393
|
+
text-align: left;
|
394
|
+
white-space: normal;
|
395
|
+
strong {
|
396
|
+
color: $gray;
|
337
397
|
}
|
338
|
-
|
339
|
-
|
398
|
+
small {
|
399
|
+
font-size: $basefont - 2;
|
400
|
+
font-weight: normal;
|
340
401
|
}
|
341
402
|
}
|
403
|
+
.inputs-list {
|
404
|
+
margin-left: 25px;
|
405
|
+
margin-bottom: 10px;
|
406
|
+
padding-top: 0;
|
407
|
+
}
|
408
|
+
&:first-child {
|
409
|
+
padding-top: 6px;
|
410
|
+
}
|
411
|
+
li + li {
|
412
|
+
padding-top: 2px;
|
413
|
+
}
|
342
414
|
input[type=radio],
|
343
415
|
input[type=checkbox] {
|
344
416
|
margin-bottom: 0;
|
@@ -352,7 +424,7 @@ input.disabled {
|
|
352
424
|
padding-top: $baseline / 2;
|
353
425
|
}
|
354
426
|
legend {
|
355
|
-
|
427
|
+
padding-left: 0;
|
356
428
|
}
|
357
429
|
label {
|
358
430
|
display: block;
|
@@ -379,7 +451,7 @@ input.disabled {
|
|
379
451
|
}
|
380
452
|
}
|
381
453
|
}
|
382
|
-
div.error {
|
454
|
+
div.clearfix.error {
|
383
455
|
padding-top: 10px;
|
384
456
|
padding-bottom: 10px;
|
385
457
|
padding-left: 10px;
|
@@ -390,4 +462,4 @@ input.disabled {
|
|
390
462
|
margin-left: -20px;
|
391
463
|
padding-left: 20px;
|
392
464
|
}
|
393
|
-
}
|
465
|
+
}
|
@@ -1,62 +1,10 @@
|
|
1
|
-
/*
|
2
|
-
*
|
3
|
-
*
|
4
|
-
|
5
|
-
|
6
|
-
// VARIABLES
|
7
|
-
// ---------
|
8
|
-
|
9
|
-
// Links
|
10
|
-
$linkColor: #0069d6;
|
11
|
-
$linkColorHover: darken($linkColor, 10);
|
12
|
-
|
13
|
-
// Grays
|
14
|
-
$black: #000;
|
15
|
-
$grayDark: lighten($black, 25%);
|
16
|
-
$gray: lighten($black, 50%);
|
17
|
-
$grayLight: lighten($black, 75%);
|
18
|
-
$grayLighter: lighten($black, 90%);
|
19
|
-
$white: #fff;
|
20
|
-
|
21
|
-
// Accent Colors
|
22
|
-
$blue: #049CDB;
|
23
|
-
$blueDark: #0064CD;
|
24
|
-
$green: #46a546;
|
25
|
-
$red: #9d261d;
|
26
|
-
$yellow: #ffc40d;
|
27
|
-
$orange: #f89406;
|
28
|
-
$pink: #c3325f;
|
29
|
-
$purple: #7a43b6;
|
30
|
-
|
31
|
-
// Baseline grid
|
32
|
-
$basefont: 13px;
|
33
|
-
$baseline: 18px;
|
34
|
-
|
35
|
-
// Griditude
|
36
|
-
$gridColumns: 16;
|
37
|
-
$gridColumnWidth: 40px;
|
38
|
-
$gridGutterWidth: 20px;
|
39
|
-
$extraSpace: ($gridGutterWidth * 2); // For our grid calculations
|
40
|
-
$siteWidth: ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1));
|
41
|
-
|
42
|
-
// Color Scheme
|
43
|
-
$baseColor: $blue; // Set a base color
|
44
|
-
$complement: spin($baseColor, 180); // Determine a complementary color
|
45
|
-
$split1: spin($baseColor, 158); // Split complements
|
46
|
-
$split2: spin($baseColor, -158);
|
47
|
-
$triad1: spin($baseColor, 135); // Triads colors
|
48
|
-
$triad2: spin($baseColor, -135);
|
49
|
-
$tetra1: spin($baseColor, 90); // Tetra colors
|
50
|
-
$tetra2: spin($baseColor, -90);
|
51
|
-
$analog1: spin($baseColor, 22); // Analogs colors
|
52
|
-
$analog2: spin($baseColor, -22);
|
53
|
-
|
54
|
-
|
55
|
-
// MIXINS
|
56
|
-
// ------
|
1
|
+
/* Mixins.scss
|
2
|
+
* Snippets of reusable CSS to develop faster and keep code readable
|
3
|
+
* ----------------------------------------------------------------- */
|
4
|
+
|
57
5
|
|
58
6
|
// Clearfix for clearing floats like a boss h5bp.com/q
|
59
|
-
@mixin
|
7
|
+
@mixin clearfix {
|
60
8
|
zoom: 1;
|
61
9
|
&:before, &:after {
|
62
10
|
display: table;
|
@@ -98,18 +46,21 @@ $analog2: spin($baseColor, -22);
|
|
98
46
|
font-weight: $weight;
|
99
47
|
line-height: $lineHeight;
|
100
48
|
}
|
49
|
+
|
101
50
|
@mixin sans-serif($weight: normal, $size: 14px, $lineHeight: 20px) {
|
102
51
|
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
103
52
|
font-size: $size;
|
104
53
|
font-weight: $weight;
|
105
54
|
line-height: $lineHeight;
|
106
55
|
}
|
56
|
+
|
107
57
|
@mixin serif($weight: normal, $size: 14px, $lineHeight: 20px) {
|
108
58
|
font-family: "Georgia", Times New Roman, Times, serif;
|
109
59
|
font-size: $size;
|
110
60
|
font-weight: $weight;
|
111
61
|
line-height: $lineHeight;
|
112
62
|
}
|
63
|
+
|
113
64
|
@mixin monospace($weight: normal, $size: 12px, $lineHeight: 20px) {
|
114
65
|
font-family: "Monaco", Courier New, monospace;
|
115
66
|
font-size: $size;
|
@@ -118,28 +69,77 @@ $analog2: spin($baseColor, -22);
|
|
118
69
|
}
|
119
70
|
|
120
71
|
// Grid System
|
121
|
-
@mixin container {
|
72
|
+
@mixin fixed-container() {
|
122
73
|
width: $siteWidth;
|
123
|
-
margin:
|
124
|
-
|
74
|
+
margin-left: auto;
|
75
|
+
margin-right: auto;
|
76
|
+
@include clearfix();
|
125
77
|
}
|
78
|
+
|
126
79
|
@mixin columns($columnSpan: 1) {
|
127
80
|
width: ($gridColumnWidth * $columnSpan) + ($gridGutterWidth * ($columnSpan - 1));
|
128
81
|
}
|
82
|
+
|
129
83
|
@mixin offset($columnOffset: 1) {
|
130
84
|
margin-left: ($gridColumnWidth * $columnOffset) + ($gridGutterWidth * ($columnOffset - 1)) + $extraSpace;
|
131
85
|
}
|
132
86
|
|
87
|
+
// Necessary grid styles for every column to make them appear next to each other horizontally
|
88
|
+
@mixin gridColumn() {
|
89
|
+
display: inline;
|
90
|
+
float: left;
|
91
|
+
margin-left: $gridGutterWidth;
|
92
|
+
}
|
93
|
+
|
94
|
+
// makeColumn can be used to mark any element (e.g., .content-primary) as a column without changing markup to .span something
|
95
|
+
@mixin makeColumn($columnSpan: 1) {
|
96
|
+
@include gridColumn();
|
97
|
+
@include columns($columnSpan);
|
98
|
+
}
|
99
|
+
|
100
|
+
// Border Radius (Will use compass version)
|
101
|
+
|
102
|
+
// Drop shadows (Will use compass version)
|
103
|
+
|
133
104
|
// Transitions
|
134
105
|
@mixin transition($transition) {
|
135
106
|
-webkit-transition: $transition;
|
136
107
|
-moz-transition: $transition;
|
108
|
+
-ms-transition: $transition;
|
109
|
+
-o-transition: $transition;
|
137
110
|
transition: $transition;
|
138
111
|
}
|
139
112
|
|
113
|
+
// Background clipping
|
114
|
+
@mixin background-clip($clip) {
|
115
|
+
-webkit-background-clip: $clip;
|
116
|
+
-moz-background-clip: $clip;
|
117
|
+
background-clip: $clip;
|
118
|
+
}
|
119
|
+
|
120
|
+
// CSS3 Content Columns
|
121
|
+
@mixin content-columns($columnCount, $columnGap: 20px) {
|
122
|
+
-webkit-column-count: $columnCount;
|
123
|
+
-moz-column-count: $columnCount;
|
124
|
+
column-count: $columnCount;
|
125
|
+
-webkit-column-gap: $columnGap;
|
126
|
+
-moz-column-gap: $columnGap;
|
127
|
+
column-gap: $columnGap;
|
128
|
+
}
|
129
|
+
|
130
|
+
// Add an alphatransparency value to any background or border color (via Elyse Holladay)
|
131
|
+
@mixin translucent-background($color: $white, $alpha: 1) {
|
132
|
+
background-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
|
133
|
+
}
|
134
|
+
|
135
|
+
@mixin translucent-border($color: $white, $alpha: 1) {
|
136
|
+
border-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
|
137
|
+
background-clip: padding-box;
|
138
|
+
}
|
139
|
+
|
140
140
|
|
141
141
|
// Gradients
|
142
|
-
@mixin horizontal($startColor: #555, $endColor: #333) {
|
142
|
+
@mixin gradient-horizontal($startColor: #555, $endColor: #333) {
|
143
143
|
background-color: $endColor;
|
144
144
|
background-repeat: repeat-x;
|
145
145
|
@include filter-gradient($startColor, $endColor, horizontal);
|
@@ -147,7 +147,7 @@ $analog2: spin($baseColor, -22);
|
|
147
147
|
@include background-image(linear-gradient(left, $startColor, $endColor));
|
148
148
|
}
|
149
149
|
|
150
|
-
@mixin vertical ($startColor: #555, $endColor: #333) {
|
150
|
+
@mixin gradient-vertical ($startColor: #555, $endColor: #333) {
|
151
151
|
background-color: $endColor;
|
152
152
|
background-repeat: repeat-x;
|
153
153
|
@include filter-gradient($startColor, $endColor);
|
@@ -155,72 +155,32 @@ $analog2: spin($baseColor, -22);
|
|
155
155
|
@include background-image(linear-gradient($startColor, $endColor));
|
156
156
|
}
|
157
157
|
|
158
|
-
@mixin directional ($startColor: #555, $endColor: #333, $deg: 45deg) {
|
158
|
+
@mixin gradient-directional ($startColor: #555, $endColor: #333, $deg: 45deg) {
|
159
159
|
background-color: $endColor;
|
160
160
|
background-repeat: repeat-x;
|
161
161
|
@include background-image(linear-gradient(left top, $startColor, $endColor));
|
162
162
|
}
|
163
163
|
|
164
|
-
@mixin vertical-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) {
|
164
|
+
@mixin gradient-vertical-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) {
|
165
165
|
background-color: $endColor;
|
166
166
|
background-repeat: no-repeat;
|
167
167
|
@include filter-gradient($startColor, $endColor);
|
168
168
|
@include background-image(linear-gradient($startColor, $midColor $colorStop, $endColor));
|
169
169
|
}
|
170
170
|
|
171
|
-
// CSS3 Content Columns
|
172
|
-
@mixin content-columns($columnCount, $columnGap: 20px) {
|
173
|
-
@include column-count($columnCount);
|
174
|
-
@include column-count($columnGap);
|
175
|
-
}
|
176
|
-
|
177
|
-
// Add an alphatransparency value to any background or border color (via Elyse Holladay)
|
178
|
-
@mixin background($color: $white, $alpha: 1) {
|
179
|
-
background-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
|
180
|
-
}
|
181
|
-
|
182
|
-
@mixin border($color: $white, $alpha: 1) {
|
183
|
-
border-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
|
184
|
-
background-clip: padding-box;
|
185
|
-
}
|
186
171
|
|
187
172
|
// Gradient Bar Colors for buttons and allerts
|
188
173
|
@mixin gradientBar($primaryColor, $secondaryColor) {
|
189
|
-
@include vertical($primaryColor, $secondaryColor);
|
174
|
+
@include gradient-vertical($primaryColor, $secondaryColor);
|
190
175
|
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
|
191
176
|
border-color: $secondaryColor $secondaryColor darken($secondaryColor, 15%);
|
192
177
|
border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
|
193
178
|
}
|
194
|
-
|
195
|
-
.btn,
|
196
|
-
.alert-message {
|
197
|
-
// Set text color
|
198
|
-
&.danger,
|
199
|
-
&.danger:hover,
|
200
|
-
&.error,
|
201
|
-
&.error:hover,
|
202
|
-
&.success,
|
203
|
-
&.success:hover,
|
204
|
-
&.info,
|
205
|
-
&.info:hover {
|
206
|
-
color: $white
|
207
|
-
}
|
208
|
-
// Danger and error appear as red
|
209
|
-
&.danger,
|
210
|
-
&.error {
|
211
|
-
@include gradientBar(#ee5f5b, #c43c35);
|
212
|
-
}
|
213
|
-
// Success appears as green
|
214
|
-
&.success {
|
215
|
-
@include gradientBar(#62c462, #57a957);
|
216
|
-
}
|
217
|
-
// Info appears as a neutral blue
|
218
|
-
&.info {
|
219
|
-
@include gradientBar(#5bc0de, #339bb9);
|
220
|
-
}
|
221
|
-
}
|
179
|
+
|
222
180
|
|
223
181
|
// Reset filters for IE
|
224
182
|
@mixin reset-filter() {
|
225
183
|
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)";
|
226
|
-
}
|
184
|
+
}
|
185
|
+
|
186
|
+
// Opacity (Will use compass version)
|