bourbon-compass 3.2.0.beta.1.a → 3.2.0
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/stylesheets/bourbon/_bourbon.scss +5 -2
- data/stylesheets/bourbon/addons/_button.scss +142 -41
- data/stylesheets/bourbon/addons/_directional-values.scss +5 -8
- data/stylesheets/bourbon/addons/_html5-input-types.scss +3 -3
- data/stylesheets/bourbon/addons/_triangle.scss +51 -13
- data/stylesheets/bourbon/addons/_word-wrap.scss +8 -0
- data/stylesheets/bourbon/css3/_columns.scss +1 -1
- data/stylesheets/bourbon/css3/_filter.scss +5 -0
- data/stylesheets/bourbon/css3/_font-feature-settings.scss +10 -0
- data/stylesheets/bourbon/css3/_image-rendering.scss +1 -0
- data/stylesheets/bourbon/css3/_keyframes.scss +6 -7
- data/stylesheets/bourbon/css3/_placeholder.scss +3 -24
- data/stylesheets/bourbon/css3/_transition.scss +47 -4
- data/stylesheets/bourbon/functions/_color-lightness.scss +13 -0
- data/stylesheets/bourbon/functions/_modular-scale.scss +1 -1
- data/stylesheets/bourbon/functions/_px-to-rem.scss +15 -0
- metadata +12 -8
- data/stylesheets/bourbon/addons/_rem.scss +0 -33
|
@@ -11,12 +11,14 @@
|
|
|
11
11
|
@import "helpers/shape-size-stripper";
|
|
12
12
|
|
|
13
13
|
// Custom Functions
|
|
14
|
+
@import "functions/color-lightness";
|
|
14
15
|
@import "functions/flex-grid";
|
|
15
|
-
@import "functions/grid-width";
|
|
16
16
|
@import "functions/golden-ratio";
|
|
17
|
+
@import "functions/grid-width";
|
|
17
18
|
@import "functions/linear-gradient";
|
|
18
19
|
@import "functions/modular-scale";
|
|
19
20
|
@import "functions/px-to-em";
|
|
21
|
+
@import "functions/px-to-rem";
|
|
20
22
|
@import "functions/radial-gradient";
|
|
21
23
|
@import "functions/strip-units";
|
|
22
24
|
@import "functions/tint-shade";
|
|
@@ -34,6 +36,7 @@
|
|
|
34
36
|
@import "css3/box-sizing";
|
|
35
37
|
@import "css3/calc";
|
|
36
38
|
@import "css3/columns";
|
|
39
|
+
@import "css3/filter";
|
|
37
40
|
@import "css3/flex-box";
|
|
38
41
|
@import "css3/font-face";
|
|
39
42
|
@import "css3/hyphens";
|
|
@@ -59,11 +62,11 @@
|
|
|
59
62
|
@import "addons/html5-input-types";
|
|
60
63
|
@import "addons/position";
|
|
61
64
|
@import "addons/prefixer";
|
|
62
|
-
@import "addons/rem";
|
|
63
65
|
@import "addons/retina-image";
|
|
64
66
|
@import "addons/size";
|
|
65
67
|
@import "addons/timing-functions";
|
|
66
68
|
@import "addons/triangle";
|
|
69
|
+
@import "addons/word-wrap";
|
|
67
70
|
|
|
68
71
|
// Soon to be deprecated Mixins
|
|
69
72
|
@import "bourbon-deprecated-upcoming";
|
|
@@ -1,38 +1,51 @@
|
|
|
1
|
-
@mixin button ($style: simple, $base-color: #4294f0) {
|
|
1
|
+
@mixin button ($style: simple, $base-color: #4294f0, $text-size: inherit, $padding: 7px 18px) {
|
|
2
2
|
|
|
3
|
-
@if type-of($style) == color {
|
|
3
|
+
@if type-of($style) == string and type-of($base-color) == color {
|
|
4
|
+
@include buttonstyle($style, $base-color, $text-size, $padding);
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
@if type-of($style) == string and type-of($base-color) == number {
|
|
8
|
+
$padding: $text-size;
|
|
9
|
+
$text-size: $base-color;
|
|
10
|
+
$base-color: #4294f0;
|
|
11
|
+
|
|
12
|
+
@if $padding == inherit {
|
|
13
|
+
$padding: 7px 18px;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
@include buttonstyle($style, $base-color, $text-size, $padding);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
@if type-of($style) == color and type-of($base-color) == color {
|
|
4
20
|
$base-color: $style;
|
|
5
21
|
$style: simple;
|
|
22
|
+
@include buttonstyle($style, $base-color, $text-size, $padding);
|
|
6
23
|
}
|
|
7
24
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
25
|
+
@if type-of($style) == color and type-of($base-color) == number {
|
|
26
|
+
$padding: $text-size;
|
|
27
|
+
$text-size: $base-color;
|
|
28
|
+
$base-color: $style;
|
|
29
|
+
$style: simple;
|
|
13
30
|
|
|
14
|
-
@
|
|
15
|
-
|
|
31
|
+
@if $padding == inherit {
|
|
32
|
+
$padding: 7px 18px;
|
|
16
33
|
}
|
|
17
34
|
|
|
18
|
-
@
|
|
19
|
-
@include pill($base-color, $grayscale: true);
|
|
20
|
-
}
|
|
35
|
+
@include buttonstyle($style, $base-color, $text-size, $padding);
|
|
21
36
|
}
|
|
22
37
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
38
|
+
@if type-of($style) == number {
|
|
39
|
+
$padding: $base-color;
|
|
40
|
+
$text-size: $style;
|
|
41
|
+
$base-color: #4294f0;
|
|
42
|
+
$style: simple;
|
|
28
43
|
|
|
29
|
-
@
|
|
30
|
-
|
|
44
|
+
@if $padding == #4294f0 {
|
|
45
|
+
$padding: 7px 18px;
|
|
31
46
|
}
|
|
32
47
|
|
|
33
|
-
@
|
|
34
|
-
@include pill($base-color);
|
|
35
|
-
}
|
|
48
|
+
@include buttonstyle($style, $base-color, $text-size, $padding);
|
|
36
49
|
}
|
|
37
50
|
|
|
38
51
|
&:disabled {
|
|
@@ -42,16 +55,55 @@
|
|
|
42
55
|
}
|
|
43
56
|
|
|
44
57
|
|
|
58
|
+
// Selector Style Button
|
|
59
|
+
//************************************************************************//
|
|
60
|
+
@mixin buttonstyle($type, $b-color, $t-size, $pad) {
|
|
61
|
+
// Grayscale button
|
|
62
|
+
@if $type == simple and $b-color == grayscale($b-color) {
|
|
63
|
+
@include simple($b-color, true, $t-size, $pad);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
@if $type == shiny and $b-color == grayscale($b-color) {
|
|
67
|
+
@include shiny($b-color, true, $t-size, $pad);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
@if $type == pill and $b-color == grayscale($b-color) {
|
|
71
|
+
@include pill($b-color, true, $t-size, $pad);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
@if $type == flat and $b-color == grayscale($b-color) {
|
|
75
|
+
@include flat($b-color, true, $t-size, $pad);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
// Colored button
|
|
79
|
+
@if $type == simple {
|
|
80
|
+
@include simple($b-color, false, $t-size, $pad);
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
@else if $type == shiny {
|
|
84
|
+
@include shiny($b-color, false, $t-size, $pad);
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
@else if $type == pill {
|
|
88
|
+
@include pill($b-color, false, $t-size, $pad);
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
@else if $type == flat {
|
|
92
|
+
@include flat($b-color, false, $t-size, $pad);
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
|
|
45
97
|
// Simple Button
|
|
46
98
|
//************************************************************************//
|
|
47
|
-
@mixin simple($base-color, $grayscale: false) {
|
|
99
|
+
@mixin simple($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
|
|
48
100
|
$color: hsl(0, 0, 100%);
|
|
49
101
|
$border: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
|
|
50
102
|
$inset-shadow: adjust-color($base-color, $saturation: -8%, $lightness: 15%);
|
|
51
103
|
$stop-gradient: adjust-color($base-color, $saturation: 9%, $lightness: -11%);
|
|
52
104
|
$text-shadow: adjust-color($base-color, $saturation: 15%, $lightness: -18%);
|
|
53
105
|
|
|
54
|
-
@if
|
|
106
|
+
@if is-light($base-color) {
|
|
55
107
|
$color: hsl(0, 0, 20%);
|
|
56
108
|
$text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
|
|
57
109
|
}
|
|
@@ -68,10 +120,10 @@
|
|
|
68
120
|
box-shadow: inset 0 1px 0 0 $inset-shadow;
|
|
69
121
|
color: $color;
|
|
70
122
|
display: inline-block;
|
|
71
|
-
font-size:
|
|
123
|
+
font-size: $textsize;
|
|
72
124
|
font-weight: bold;
|
|
73
125
|
@include linear-gradient ($base-color, $stop-gradient);
|
|
74
|
-
padding:
|
|
126
|
+
padding: $padding;
|
|
75
127
|
text-decoration: none;
|
|
76
128
|
text-shadow: 0 1px 0 $text-shadow;
|
|
77
129
|
background-clip: padding-box;
|
|
@@ -92,7 +144,8 @@
|
|
|
92
144
|
@include linear-gradient ($base-color-hover, $stop-gradient-hover);
|
|
93
145
|
}
|
|
94
146
|
|
|
95
|
-
&:active:not(:disabled)
|
|
147
|
+
&:active:not(:disabled),
|
|
148
|
+
&:focus:not(:disabled) {
|
|
96
149
|
$border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
|
|
97
150
|
$inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%);
|
|
98
151
|
|
|
@@ -102,14 +155,14 @@
|
|
|
102
155
|
}
|
|
103
156
|
|
|
104
157
|
border: 1px solid $border-active;
|
|
105
|
-
box-shadow: inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active
|
|
158
|
+
box-shadow: inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active;
|
|
106
159
|
}
|
|
107
160
|
}
|
|
108
161
|
|
|
109
162
|
|
|
110
163
|
// Shiny Button
|
|
111
164
|
//************************************************************************//
|
|
112
|
-
@mixin shiny($base-color, $grayscale: false) {
|
|
165
|
+
@mixin shiny($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
|
|
113
166
|
$color: hsl(0, 0, 100%);
|
|
114
167
|
$border: adjust-color($base-color, $red: -117, $green: -111, $blue: -81);
|
|
115
168
|
$border-bottom: adjust-color($base-color, $red: -126, $green: -127, $blue: -122);
|
|
@@ -119,7 +172,7 @@
|
|
|
119
172
|
$text-shadow: adjust-color($base-color, $red: -140, $green: -141, $blue: -114);
|
|
120
173
|
$third-stop: adjust-color($base-color, $red: -86, $green: -75, $blue: -48);
|
|
121
174
|
|
|
122
|
-
@if
|
|
175
|
+
@if is-light($base-color) {
|
|
123
176
|
$color: hsl(0, 0, 20%);
|
|
124
177
|
$text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
|
|
125
178
|
}
|
|
@@ -140,10 +193,10 @@
|
|
|
140
193
|
box-shadow: inset 0 1px 0 0 $inset-shadow;
|
|
141
194
|
color: $color;
|
|
142
195
|
display: inline-block;
|
|
143
|
-
font-size:
|
|
196
|
+
font-size: $textsize;
|
|
144
197
|
font-weight: bold;
|
|
145
198
|
@include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%);
|
|
146
|
-
padding:
|
|
199
|
+
padding: $padding;
|
|
147
200
|
text-align: center;
|
|
148
201
|
text-decoration: none;
|
|
149
202
|
text-shadow: 0 -1px 1px $text-shadow;
|
|
@@ -168,21 +221,22 @@
|
|
|
168
221
|
$fourth-stop-hover 100%);
|
|
169
222
|
}
|
|
170
223
|
|
|
171
|
-
&:active:not(:disabled)
|
|
224
|
+
&:active:not(:disabled),
|
|
225
|
+
&:focus:not(:disabled) {
|
|
172
226
|
$inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122);
|
|
173
227
|
|
|
174
228
|
@if $grayscale == true {
|
|
175
229
|
$inset-shadow-active: grayscale($inset-shadow-active);
|
|
176
230
|
}
|
|
177
231
|
|
|
178
|
-
box-shadow: inset 0 0 20px 0 $inset-shadow-active
|
|
232
|
+
box-shadow: inset 0 0 20px 0 $inset-shadow-active;
|
|
179
233
|
}
|
|
180
234
|
}
|
|
181
235
|
|
|
182
236
|
|
|
183
237
|
// Pill Button
|
|
184
238
|
//************************************************************************//
|
|
185
|
-
@mixin pill($base-color, $grayscale: false) {
|
|
239
|
+
@mixin pill($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
|
|
186
240
|
$color: hsl(0, 0, 100%);
|
|
187
241
|
$border-bottom: adjust-color($base-color, $hue: 8, $saturation: -11%, $lightness: -26%);
|
|
188
242
|
$border-sides: adjust-color($base-color, $hue: 4, $saturation: -21%, $lightness: -21%);
|
|
@@ -191,7 +245,7 @@
|
|
|
191
245
|
$stop-gradient: adjust-color($base-color, $hue: 8, $saturation: 14%, $lightness: -10%);
|
|
192
246
|
$text-shadow: adjust-color($base-color, $hue: 5, $saturation: -19%, $lightness: -15%);
|
|
193
247
|
|
|
194
|
-
@if
|
|
248
|
+
@if is-light($base-color) {
|
|
195
249
|
$color: hsl(0, 0, 20%);
|
|
196
250
|
$text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
|
|
197
251
|
}
|
|
@@ -208,14 +262,14 @@
|
|
|
208
262
|
border: 1px solid $border-top;
|
|
209
263
|
border-color: $border-top $border-sides $border-bottom;
|
|
210
264
|
border-radius: 16px;
|
|
211
|
-
box-shadow: inset 0 1px 0 0 $inset-shadow
|
|
265
|
+
box-shadow: inset 0 1px 0 0 $inset-shadow;
|
|
212
266
|
color: $color;
|
|
213
267
|
display: inline-block;
|
|
214
|
-
font-size:
|
|
268
|
+
font-size: $textsize;
|
|
215
269
|
font-weight: normal;
|
|
216
270
|
line-height: 1;
|
|
217
271
|
@include linear-gradient ($base-color, $stop-gradient);
|
|
218
|
-
padding:
|
|
272
|
+
padding: $padding;
|
|
219
273
|
text-align: center;
|
|
220
274
|
text-decoration: none;
|
|
221
275
|
text-shadow: 0 -1px 1px $text-shadow;
|
|
@@ -249,7 +303,8 @@
|
|
|
249
303
|
background-clip: padding-box;
|
|
250
304
|
}
|
|
251
305
|
|
|
252
|
-
&:active:not(:disabled)
|
|
306
|
+
&:active:not(:disabled),
|
|
307
|
+
&:focus:not(:disabled) {
|
|
253
308
|
$active-color: adjust-color($base-color, $hue: 4, $saturation: -12%, $lightness: -10%);
|
|
254
309
|
$border-active: adjust-color($base-color, $hue: 6, $saturation: -2.5%, $lightness: -30%);
|
|
255
310
|
$border-bottom-active: adjust-color($base-color, $hue: 11, $saturation: 6%, $lightness: -31%);
|
|
@@ -267,7 +322,53 @@
|
|
|
267
322
|
background: $active-color;
|
|
268
323
|
border: 1px solid $border-active;
|
|
269
324
|
border-bottom: 1px solid $border-bottom-active;
|
|
270
|
-
box-shadow: inset 0 0 6px 3px $inset-shadow-active
|
|
325
|
+
box-shadow: inset 0 0 6px 3px $inset-shadow-active;
|
|
271
326
|
text-shadow: 0 -1px 1px $text-shadow-active;
|
|
272
327
|
}
|
|
273
328
|
}
|
|
329
|
+
|
|
330
|
+
|
|
331
|
+
|
|
332
|
+
// Flat Button
|
|
333
|
+
//************************************************************************//
|
|
334
|
+
@mixin flat($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
|
|
335
|
+
$color: hsl(0, 0, 100%);
|
|
336
|
+
|
|
337
|
+
@if is-light($base-color) {
|
|
338
|
+
$color: hsl(0, 0, 20%);
|
|
339
|
+
}
|
|
340
|
+
|
|
341
|
+
background-color: $base-color;
|
|
342
|
+
border-radius: 3px;
|
|
343
|
+
border: none;
|
|
344
|
+
color: $color;
|
|
345
|
+
display: inline-block;
|
|
346
|
+
font-size: inherit;
|
|
347
|
+
font-weight: bold;
|
|
348
|
+
padding: 7px 18px;
|
|
349
|
+
text-decoration: none;
|
|
350
|
+
background-clip: padding-box;
|
|
351
|
+
|
|
352
|
+
&:hover:not(:disabled){
|
|
353
|
+
$base-color-hover: adjust-color($base-color, $saturation: 4%, $lightness: 5%);
|
|
354
|
+
|
|
355
|
+
@if $grayscale == true {
|
|
356
|
+
$base-color-hover: grayscale($base-color-hover);
|
|
357
|
+
}
|
|
358
|
+
|
|
359
|
+
background-color: $base-color-hover;
|
|
360
|
+
cursor: pointer;
|
|
361
|
+
}
|
|
362
|
+
|
|
363
|
+
&:active:not(:disabled),
|
|
364
|
+
&:focus:not(:disabled) {
|
|
365
|
+
$base-color-active: adjust-color($base-color, $saturation: -4%, $lightness: -5%);
|
|
366
|
+
|
|
367
|
+
@if $grayscale == true {
|
|
368
|
+
$base-color-active: grayscale($base-color-active);
|
|
369
|
+
}
|
|
370
|
+
|
|
371
|
+
background-color: $base-color-active;
|
|
372
|
+
cursor: pointer;
|
|
373
|
+
}
|
|
374
|
+
}
|
|
@@ -57,9 +57,6 @@
|
|
|
57
57
|
$right: $pre + "-right" + if($suf, "-#{$suf}", "");
|
|
58
58
|
$all: $pre + if($suf, "-#{$suf}", "");
|
|
59
59
|
|
|
60
|
-
// Get list inside $vals (is there a better way?)
|
|
61
|
-
@each $val in $vals { $vals: $val; }
|
|
62
|
-
|
|
63
60
|
$vals: collapse-directionals($vals);
|
|
64
61
|
|
|
65
62
|
@if contains-falsy($vals) {
|
|
@@ -94,21 +91,21 @@
|
|
|
94
91
|
}
|
|
95
92
|
|
|
96
93
|
@mixin margin($vals...) {
|
|
97
|
-
@include directional-property(margin, false, $vals);
|
|
94
|
+
@include directional-property(margin, false, $vals...);
|
|
98
95
|
}
|
|
99
96
|
|
|
100
97
|
@mixin padding($vals...) {
|
|
101
|
-
@include directional-property(padding, false, $vals);
|
|
98
|
+
@include directional-property(padding, false, $vals...);
|
|
102
99
|
}
|
|
103
100
|
|
|
104
101
|
@mixin border-style($vals...) {
|
|
105
|
-
@include directional-property(border, style, $vals);
|
|
102
|
+
@include directional-property(border, style, $vals...);
|
|
106
103
|
}
|
|
107
104
|
|
|
108
105
|
@mixin border-color($vals...) {
|
|
109
|
-
@include directional-property(border, color, $vals);
|
|
106
|
+
@include directional-property(border, color, $vals...);
|
|
110
107
|
}
|
|
111
108
|
|
|
112
109
|
@mixin border-width($vals...) {
|
|
113
|
-
@include directional-property(border, width, $vals);
|
|
110
|
+
@include directional-property(border, width, $vals...);
|
|
114
111
|
}
|
|
@@ -22,7 +22,7 @@ $inputs-list: 'input[type="email"]',
|
|
|
22
22
|
|
|
23
23
|
$unquoted-inputs-list: ();
|
|
24
24
|
@each $input-type in $inputs-list {
|
|
25
|
-
$unquoted-inputs-list: append($unquoted-inputs-list, unquote($input-type), comma)
|
|
25
|
+
$unquoted-inputs-list: append($unquoted-inputs-list, unquote($input-type), comma);
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
$all-text-inputs: $unquoted-inputs-list;
|
|
@@ -33,7 +33,7 @@ $all-text-inputs: $unquoted-inputs-list;
|
|
|
33
33
|
$all-text-inputs-hover: ();
|
|
34
34
|
@each $input-type in $unquoted-inputs-list {
|
|
35
35
|
$input-type-hover: $input-type + ":hover";
|
|
36
|
-
$all-text-inputs-hover: append($all-text-inputs-hover, $input-type-hover, comma)
|
|
36
|
+
$all-text-inputs-hover: append($all-text-inputs-hover, $input-type-hover, comma);
|
|
37
37
|
}
|
|
38
38
|
|
|
39
39
|
// Focus Pseudo-class
|
|
@@ -41,7 +41,7 @@ $all-text-inputs-hover: ();
|
|
|
41
41
|
$all-text-inputs-focus: ();
|
|
42
42
|
@each $input-type in $unquoted-inputs-list {
|
|
43
43
|
$input-type-focus: $input-type + ":focus";
|
|
44
|
-
$all-text-inputs-focus: append($all-text-inputs-focus, $input-type-focus, comma)
|
|
44
|
+
$all-text-inputs-focus: append($all-text-inputs-focus, $input-type-focus, comma);
|
|
45
45
|
}
|
|
46
46
|
|
|
47
47
|
// You must use interpolation on the variable:
|
|
@@ -2,44 +2,82 @@
|
|
|
2
2
|
height: 0;
|
|
3
3
|
width: 0;
|
|
4
4
|
|
|
5
|
+
$width: nth($size, 1);
|
|
6
|
+
$height: nth($size, length($size));
|
|
7
|
+
|
|
8
|
+
$foreground-color: nth($color, 1);
|
|
9
|
+
$background-color: if(length($color) == 2, nth($color, 2), transparent);
|
|
10
|
+
|
|
5
11
|
@if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
12
|
+
|
|
13
|
+
$width: $width / 2;
|
|
14
|
+
$height: if(length($size) > 1, $height, $height/2);
|
|
9
15
|
|
|
10
16
|
@if $direction == up {
|
|
11
|
-
border-
|
|
17
|
+
border-left: $width solid $background-color;
|
|
18
|
+
border-right: $width solid $background-color;
|
|
19
|
+
border-bottom: $height solid $foreground-color;
|
|
12
20
|
|
|
13
21
|
} @else if $direction == right {
|
|
14
|
-
border-
|
|
22
|
+
border-top: $width solid $background-color;
|
|
23
|
+
border-bottom: $width solid $background-color;
|
|
24
|
+
border-left: $height solid $foreground-color;
|
|
15
25
|
|
|
16
26
|
} @else if $direction == down {
|
|
17
|
-
border-
|
|
27
|
+
border-left: $width solid $background-color;
|
|
28
|
+
border-right: $width solid $background-color;
|
|
29
|
+
border-top: $height solid $foreground-color;
|
|
18
30
|
|
|
19
31
|
} @else if $direction == left {
|
|
20
|
-
border-
|
|
32
|
+
border-top: $width solid $background-color;
|
|
33
|
+
border-bottom: $width solid $background-color;
|
|
34
|
+
border-right: $height solid $foreground-color;
|
|
21
35
|
}
|
|
22
36
|
}
|
|
23
37
|
|
|
24
38
|
@else if ($direction == up-right) or ($direction == up-left) {
|
|
25
|
-
border-top: $
|
|
39
|
+
border-top: $height solid $foreground-color;
|
|
26
40
|
|
|
27
41
|
@if $direction == up-right {
|
|
28
|
-
border-left: $
|
|
42
|
+
border-left: $width solid $background-color;
|
|
29
43
|
|
|
30
44
|
} @else if $direction == up-left {
|
|
31
|
-
border-right: $
|
|
45
|
+
border-right: $width solid $background-color;
|
|
32
46
|
}
|
|
33
47
|
}
|
|
34
48
|
|
|
35
49
|
@else if ($direction == down-right) or ($direction == down-left) {
|
|
36
|
-
border-bottom: $
|
|
50
|
+
border-bottom: $height solid $foreground-color;
|
|
37
51
|
|
|
38
52
|
@if $direction == down-right {
|
|
39
|
-
border-left: $
|
|
53
|
+
border-left: $width solid $background-color;
|
|
40
54
|
|
|
41
55
|
} @else if $direction == down-left {
|
|
42
|
-
border-right: $
|
|
56
|
+
border-right: $width solid $background-color;
|
|
43
57
|
}
|
|
44
58
|
}
|
|
59
|
+
|
|
60
|
+
@else if ($direction == inset-up) {
|
|
61
|
+
border-width: $height $width;
|
|
62
|
+
border-style: solid;
|
|
63
|
+
border-color: $background-color $background-color $foreground-color;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
@else if ($direction == inset-down) {
|
|
67
|
+
border-width: $height $width;
|
|
68
|
+
border-style: solid;
|
|
69
|
+
border-color: $foreground-color $background-color $background-color;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
@else if ($direction == inset-right) {
|
|
73
|
+
border-width: $width $height;
|
|
74
|
+
border-style: solid;
|
|
75
|
+
border-color: $background-color $background-color $background-color $foreground-color;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
@else if ($direction == inset-left) {
|
|
79
|
+
border-width: $width $height;
|
|
80
|
+
border-style: solid;
|
|
81
|
+
border-color: $background-color $foreground-color $background-color $background-color;
|
|
82
|
+
}
|
|
45
83
|
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
// Font feature settings mixin and property default.
|
|
2
|
+
// Examples: @include font-feature-settings("liga");
|
|
3
|
+
// @include font-feature-settings("lnum" false);
|
|
4
|
+
// @include font-feature-settings("pnum" 1, "kern" 0);
|
|
5
|
+
// @include font-feature-settings("ss01", "ss02");
|
|
6
|
+
|
|
7
|
+
@mixin font-feature-settings($settings...) {
|
|
8
|
+
@if length($settings) == 0 { $settings: none; }
|
|
9
|
+
@include prefixer(font-feature-settings, $settings, webkit moz ms spec);
|
|
10
|
+
}
|
|
@@ -20,17 +20,16 @@
|
|
|
20
20
|
@content;
|
|
21
21
|
}
|
|
22
22
|
}
|
|
23
|
-
@if $original-prefix-for-spec {
|
|
24
|
-
@include disable-prefix-for-all();
|
|
25
|
-
$prefix-for-spec: true;
|
|
26
|
-
@keyframes #{$name} {
|
|
27
|
-
@content;
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
23
|
|
|
31
24
|
$prefix-for-webkit: $original-prefix-for-webkit;
|
|
32
25
|
$prefix-for-mozilla: $original-prefix-for-mozilla;
|
|
33
26
|
$prefix-for-microsoft: $original-prefix-for-microsoft;
|
|
34
27
|
$prefix-for-opera: $original-prefix-for-opera;
|
|
35
28
|
$prefix-for-spec: $original-prefix-for-spec;
|
|
29
|
+
|
|
30
|
+
@if $original-prefix-for-spec {
|
|
31
|
+
@keyframes #{$name} {
|
|
32
|
+
@content;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
36
35
|
}
|
|
@@ -1,29 +1,8 @@
|
|
|
1
|
-
$placeholders: '-webkit-input-placeholder',
|
|
2
|
-
'-moz-placeholder',
|
|
3
|
-
'-ms-input-placeholder';
|
|
4
|
-
|
|
5
1
|
@mixin placeholder {
|
|
2
|
+
$placeholders: ":-webkit-input" ":-moz" "-moz" "-ms-input";
|
|
6
3
|
@each $placeholder in $placeholders {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
@content;
|
|
10
|
-
}
|
|
11
|
-
}
|
|
12
|
-
@else if $placeholder == "-moz-placeholder" {
|
|
13
|
-
// FF 18-
|
|
14
|
-
&:#{$placeholder} {
|
|
15
|
-
@content;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
// FF 19+
|
|
19
|
-
&::#{$placeholder} {
|
|
20
|
-
@content;
|
|
21
|
-
}
|
|
22
|
-
}
|
|
23
|
-
@else {
|
|
24
|
-
&:#{$placeholder} {
|
|
25
|
-
@content;
|
|
26
|
-
}
|
|
4
|
+
&:#{$placeholder}-placeholder {
|
|
5
|
+
@content;
|
|
27
6
|
}
|
|
28
7
|
}
|
|
29
8
|
}
|
|
@@ -4,13 +4,56 @@
|
|
|
4
4
|
// @include transition-property (transform, opacity);
|
|
5
5
|
|
|
6
6
|
@mixin transition ($properties...) {
|
|
7
|
-
|
|
8
|
-
|
|
7
|
+
// Fix for vendor-prefix transform property
|
|
8
|
+
$needs-prefixes: false;
|
|
9
|
+
$webkit: ();
|
|
10
|
+
$moz: ();
|
|
11
|
+
$spec: ();
|
|
12
|
+
|
|
13
|
+
// Create lists for vendor-prefixed transform
|
|
14
|
+
@each $list in $properties {
|
|
15
|
+
@if nth($list, 1) == "transform" {
|
|
16
|
+
$needs-prefixes: true;
|
|
17
|
+
$list1: -webkit-transform;
|
|
18
|
+
$list2: -moz-transform;
|
|
19
|
+
$list3: ();
|
|
20
|
+
|
|
21
|
+
@each $var in $list {
|
|
22
|
+
$list3: join($list3, $var);
|
|
23
|
+
|
|
24
|
+
@if $var != "transform" {
|
|
25
|
+
$list1: join($list1, $var);
|
|
26
|
+
$list2: join($list2, $var);
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
$webkit: append($webkit, $list1);
|
|
31
|
+
$moz: append($moz, $list2);
|
|
32
|
+
$spec: append($spec, $list3);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
// Create lists for non-prefixed transition properties
|
|
36
|
+
@else {
|
|
37
|
+
$webkit: append($webkit, $list, comma);
|
|
38
|
+
$moz: append($moz, $list, comma);
|
|
39
|
+
$spec: append($spec, $list, comma);
|
|
40
|
+
}
|
|
9
41
|
}
|
|
10
42
|
|
|
43
|
+
@if $needs-prefixes {
|
|
44
|
+
-webkit-transition: $webkit;
|
|
45
|
+
-moz-transition: $moz;
|
|
46
|
+
transition: $spec;
|
|
47
|
+
}
|
|
11
48
|
@else {
|
|
12
|
-
$properties
|
|
13
|
-
|
|
49
|
+
@if length($properties) >= 1 {
|
|
50
|
+
@include prefixer(transition, $properties, webkit moz spec);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
@else {
|
|
54
|
+
$properties: all 0.15s ease-out 0s;
|
|
55
|
+
@include prefixer(transition, $properties, webkit moz spec);
|
|
56
|
+
}
|
|
14
57
|
}
|
|
15
58
|
}
|
|
16
59
|
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
// Programatically determines whether a color is light or dark
|
|
2
|
+
// Returns a boolean
|
|
3
|
+
// More details here http://robots.thoughtbot.com/closer-look-color-lightness
|
|
4
|
+
|
|
5
|
+
@function is-light($hex-color) {
|
|
6
|
+
$-local-red: red(rgba($hex-color, 1.0));
|
|
7
|
+
$-local-green: green(rgba($hex-color, 1.0));
|
|
8
|
+
$-local-blue: blue(rgba($hex-color, 1.0));
|
|
9
|
+
|
|
10
|
+
$-local-lightness: ($-local-red * 0.2126 + $-local-green * 0.7152 + $-local-blue * 0.0722) / 255;
|
|
11
|
+
|
|
12
|
+
@return $-local-lightness > .6;
|
|
13
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
// Convert pixels to rems
|
|
2
|
+
// eg. for a relational value of 12px write rem(12)
|
|
3
|
+
// Assumes $em-base is the font-size of <html>
|
|
4
|
+
|
|
5
|
+
@function rem($pxval) {
|
|
6
|
+
@if not unitless($pxval) {
|
|
7
|
+
$pxval: strip-units($pxval);
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
$base: $em-base;
|
|
11
|
+
@if not unitless($base) {
|
|
12
|
+
$base: strip-units($base);
|
|
13
|
+
}
|
|
14
|
+
@return ($pxval / $base) * 1rem;
|
|
15
|
+
}
|
metadata
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: bourbon-compass
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 3.2.0
|
|
5
|
-
prerelease:
|
|
4
|
+
version: 3.2.0
|
|
5
|
+
prerelease:
|
|
6
6
|
platform: ruby
|
|
7
7
|
authors:
|
|
8
8
|
- Jed Foster
|
|
9
9
|
autorequire:
|
|
10
10
|
bindir: bin
|
|
11
11
|
cert_chain: []
|
|
12
|
-
date:
|
|
12
|
+
date: 2014-04-19 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: compass
|
|
@@ -34,7 +34,7 @@ dependencies:
|
|
|
34
34
|
requirements:
|
|
35
35
|
- - ! '>='
|
|
36
36
|
- !ruby/object:Gem::Version
|
|
37
|
-
version: 3.3.0
|
|
37
|
+
version: 3.3.0
|
|
38
38
|
type: :runtime
|
|
39
39
|
prerelease: false
|
|
40
40
|
version_requirements: !ruby/object:Gem::Requirement
|
|
@@ -42,7 +42,7 @@ dependencies:
|
|
|
42
42
|
requirements:
|
|
43
43
|
- - ! '>='
|
|
44
44
|
- !ruby/object:Gem::Version
|
|
45
|
-
version: 3.3.0
|
|
45
|
+
version: 3.3.0
|
|
46
46
|
description: thoughtbot's Bourbon packaged as a Compass extension.
|
|
47
47
|
email: jed@jedfoster.com
|
|
48
48
|
executables: []
|
|
@@ -61,11 +61,11 @@ files:
|
|
|
61
61
|
- stylesheets/bourbon/addons/_html5-input-types.scss
|
|
62
62
|
- stylesheets/bourbon/addons/_position.scss
|
|
63
63
|
- stylesheets/bourbon/addons/_prefixer.scss
|
|
64
|
-
- stylesheets/bourbon/addons/_rem.scss
|
|
65
64
|
- stylesheets/bourbon/addons/_retina-image.scss
|
|
66
65
|
- stylesheets/bourbon/addons/_size.scss
|
|
67
66
|
- stylesheets/bourbon/addons/_timing-functions.scss
|
|
68
67
|
- stylesheets/bourbon/addons/_triangle.scss
|
|
68
|
+
- stylesheets/bourbon/addons/_word-wrap.scss
|
|
69
69
|
- stylesheets/bourbon/css3/_animation.scss
|
|
70
70
|
- stylesheets/bourbon/css3/_appearance.scss
|
|
71
71
|
- stylesheets/bourbon/css3/_backface-visibility.scss
|
|
@@ -76,8 +76,10 @@ files:
|
|
|
76
76
|
- stylesheets/bourbon/css3/_box-sizing.scss
|
|
77
77
|
- stylesheets/bourbon/css3/_calc.scss
|
|
78
78
|
- stylesheets/bourbon/css3/_columns.scss
|
|
79
|
+
- stylesheets/bourbon/css3/_filter.scss
|
|
79
80
|
- stylesheets/bourbon/css3/_flex-box.scss
|
|
80
81
|
- stylesheets/bourbon/css3/_font-face.scss
|
|
82
|
+
- stylesheets/bourbon/css3/_font-feature-settings.scss
|
|
81
83
|
- stylesheets/bourbon/css3/_hidpi-media-query.scss
|
|
82
84
|
- stylesheets/bourbon/css3/_hyphens.scss
|
|
83
85
|
- stylesheets/bourbon/css3/_image-rendering.scss
|
|
@@ -90,12 +92,14 @@ files:
|
|
|
90
92
|
- stylesheets/bourbon/css3/_transform.scss
|
|
91
93
|
- stylesheets/bourbon/css3/_transition.scss
|
|
92
94
|
- stylesheets/bourbon/css3/_user-select.scss
|
|
95
|
+
- stylesheets/bourbon/functions/_color-lightness.scss
|
|
93
96
|
- stylesheets/bourbon/functions/_flex-grid.scss
|
|
94
97
|
- stylesheets/bourbon/functions/_golden-ratio.scss
|
|
95
98
|
- stylesheets/bourbon/functions/_grid-width.scss
|
|
96
99
|
- stylesheets/bourbon/functions/_linear-gradient.scss
|
|
97
100
|
- stylesheets/bourbon/functions/_modular-scale.scss
|
|
98
101
|
- stylesheets/bourbon/functions/_px-to-em.scss
|
|
102
|
+
- stylesheets/bourbon/functions/_px-to-rem.scss
|
|
99
103
|
- stylesheets/bourbon/functions/_radial-gradient.scss
|
|
100
104
|
- stylesheets/bourbon/functions/_strip-units.scss
|
|
101
105
|
- stylesheets/bourbon/functions/_tint-shade.scss
|
|
@@ -124,9 +128,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
|
124
128
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
|
125
129
|
none: false
|
|
126
130
|
requirements:
|
|
127
|
-
- - ! '
|
|
131
|
+
- - ! '>='
|
|
128
132
|
- !ruby/object:Gem::Version
|
|
129
|
-
version:
|
|
133
|
+
version: '0'
|
|
130
134
|
requirements: []
|
|
131
135
|
rubyforge_project:
|
|
132
136
|
rubygems_version: 1.8.23
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
@mixin rem($property, $size, $base: $em-base) {
|
|
2
|
-
@if not unitless($base) {
|
|
3
|
-
$base: strip-units($base);
|
|
4
|
-
}
|
|
5
|
-
|
|
6
|
-
$unitless_values: ();
|
|
7
|
-
@each $num in $size {
|
|
8
|
-
@if not unitless($num) {
|
|
9
|
-
@if unit($num) == "em" {
|
|
10
|
-
$num: $num * $base;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
$num: strip-units($num);
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
$unitless_values: append($unitless_values, $num);
|
|
17
|
-
}
|
|
18
|
-
$size: $unitless_values;
|
|
19
|
-
|
|
20
|
-
$pixel_values: ();
|
|
21
|
-
$rem_values: ();
|
|
22
|
-
@each $value in $pxval {
|
|
23
|
-
$pixel_value: $value * 1px;
|
|
24
|
-
$pixel_values: append($pixel_values, $pixel_value);
|
|
25
|
-
|
|
26
|
-
$rem_value: ($value / $base) * 1rem;
|
|
27
|
-
$rem_values: append($rem_values, $rem_value);
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
#{$property}: $pixel_values;
|
|
31
|
-
#{$property}: $rem_values;
|
|
32
|
-
}
|
|
33
|
-
|