accoutrement 0.0.5 → 0.1.0

Sign up to get free protection for your applications and to get access to all the features.
@@ -1,116 +0,0 @@
1
- // ----------------------------------------------------------------------------
2
- // Imports
3
-
4
- @import 'sass-lists';
5
- @import 'color';
6
-
7
- // ----------------------------------------------------------------------------
8
- // Temporary gradient fixes
9
-
10
- // Return the convert angle or position for a css gradient using either syntax
11
- //
12
- // convert-gradient-angle($deg)
13
- // - $deg : The angle or position to convert.
14
- // - Whichever syntax you pass, the other will be returned.
15
- @function convert-gradient-angle(
16
- $deg
17
- ) {
18
- @if type-of($deg) == 'number' {
19
- @return mod(abs($deg - 450), 360deg);
20
- } @else {
21
- $direction: compact();
22
- @if nth($deg,1) == 'to' {
23
- @if length($deg) < 2 {
24
- $direction: top;
25
- @warn "no direction given for 'to'. Using 'to bottom' as default.";
26
- } @else { $direction: opposite-position(nth($deg,2)); }
27
- @if length($deg) > 2 { $direction: append($direction, opposite-position(nth($deg,3)), space);}
28
- } @else {
29
- $direction: append($direction, to, space);
30
- @each $pos in $deg { $direction: append($direction, opposite-position($pos), space); }
31
- }
32
- @return $direction;
33
- }
34
- }
35
-
36
- // Return a linear gradient converted between the old and new syntax
37
- //
38
- // convert-linear($angle, $details...)
39
- // - $angle : The angle or position to be converted.
40
- // - $details... : Color-stops and other details that don't require conversion.
41
- @function convert-gradient(
42
- $angle,
43
- $details...
44
- ) {
45
- @return linear-gradient(convert-gradient-angle($angle), $details...);
46
- }
47
-
48
- // Create a single gradient background image.
49
- // Layered backgrounds require a bit more finess than mixins provide.
50
- //
51
- // @include gradient-background-image($gradient...)
52
- // - $gradient: A list of gradient features (position/angle, color-stops, etc.)
53
- @mixin gradient-background-image(
54
- $gradient...
55
- ) {
56
- @include background-image(convert-gradient($gradient...));
57
- background-image: linear-gradient($gradient...);
58
- }
59
-
60
- // ----------------------------------------------------------------------------
61
- // Stripes
62
-
63
- // Returns a striped gradient for use anywhere gradients are accepted.
64
- //
65
- // stripes($position, $colors)
66
- // - $position: the starting position or angle of the gradient.
67
- // - $colors: a list of all the colors to be used.
68
- @function stripes(
69
- $position,
70
- $colors
71
- ) {
72
- $colors: if(type-of($colors) != 'list', compact($colors), $colors);
73
- $gradient: compact();
74
- $width: 100% / length($colors);
75
-
76
- @for $i from 1 through length($colors) {
77
- $pop: nth($colors,$i);
78
- $new: $pop ($width * ($i - 1)), $pop ($width * $i);
79
- $gradient: join($gradient, $new, comma);
80
- }
81
-
82
- @return linear-gradient($position, $gradient);
83
- }
84
-
85
- // ----------------------------------------------------------------------------
86
- // Color Palettes
87
-
88
- // Returns a full list of tinted and shaded variations on a color.
89
- //
90
- // get-palette($color [, $tints, $shades])
91
- // - $color : The color that your palette stack will be based around.
92
- // - $tints : Optional list of percentage tint amounts.
93
- // - $shades : Optional list of percentage shade amounts.
94
- @function get-palette(
95
- $color,
96
- $tints: $default-tints,
97
- $shades: $default-shades
98
- ) {
99
- $tint-stack: tint-stack($color, $tints);
100
- $shade-stack: shade-stack($color, $shades);
101
- @return remove-duplicates(join(reverse($tint-stack), $shade-stack));
102
- }
103
-
104
- // Creates a background gradient color palette based on a given color
105
- //
106
- // palette($color [, $tints, $shades])
107
- // - $color : The color that your palette gradient will be based around.
108
- // - $tints : Optional list of percentage tint amounts.
109
- // - $shades : Optional list of percentage shade amounts.
110
- @function palette(
111
- $color,
112
- $tints: $default-tints,
113
- $shades: $default-shades
114
- ) {
115
- @return stripes(left,get-palette($color, $tints, $shades));
116
- }
@@ -1,22 +0,0 @@
1
- // ----------------------------------------------------------------------------
2
- // Calc
3
-
4
- // ----------------------------------------------------------------------------
5
- // Returns a property/value pair using calc()
6
- //
7
- // calc($property, $calc [, $fallback])
8
- // - $property : Any css property that accepts calc().
9
- // - $calc : A *quoted* calc function, e.g. '100% - 7rem'.
10
- // - $fallback : An optional non-calc value to use on older browsers.
11
- @mixin calc(
12
- $property,
13
- $calc,
14
- $fallback: false
15
- ) {
16
- $calc: unquote($calc);
17
- @if $fallback { #{$property}: $fallback; }
18
- #{$property}: -webkit-calc(#{$calc});
19
- #{$property}: -moz-calc(#{$calc});
20
- #{$property}: -o-calc(#{$calc});
21
- #{$property}: calc(#{$calc});
22
- }
@@ -1,182 +0,0 @@
1
- // ----------------------------------------------------------------------------
2
- // Brightness
3
-
4
- // Returns the visual brightness of a color.
5
- //
6
- // brightness($color)
7
- // - $color: You know.
8
- @function brightness($color) {
9
- @return round((red($color) * 299) + (green($color) * 587) + (blue($color) * 114) / 1000);
10
- }
11
-
12
- // ----------------------------------------------------------------------------
13
- // Contrast
14
-
15
- // Set the default light and dark contrasts.
16
- $contrasted-dark-default : black !default;
17
- $contrasted-light-default : white !default;
18
-
19
- // Return a light or dark option based on best visual contrast.
20
- //
21
- // contrast($color [, $contrast])
22
- // - $color: The known color to contrast against.
23
- // - $contrast: Two colors (light and dark) to pick for best contrast.
24
- @function contrast(
25
- $color,
26
- $contrast: $contrasted-dark-default $contrasted-light-default
27
- ) {
28
- $contrasted-light: false;
29
- $contrasted-dark: false;
30
-
31
- @if length($contrast) == 2 {
32
- $light1: brightness(nth($contrast,1));
33
- $light2: brightness(nth($contrast,2));
34
- $contrasted-light: if($light1 > $light2, nth($contrast,1), nth($contrast,2));
35
- $contrasted-dark: if($light1 < $light2, nth($contrast,1), nth($contrast,2));
36
- } @else {
37
- @warn "Contrast takes two colors (light & dark) for the second argument.";
38
- }
39
-
40
- $color-brightness: brightness($color);
41
- $light-contrast-brightness: brightness($contrasted-light);
42
- $dark-contrast-brightness: brightness($contrasted-dark);
43
-
44
- $light-diff: abs($color-brightness - $light-contrast-brightness);
45
- $dark-diff: abs($color-brightness - $dark-contrast-brightness);
46
-
47
- @return if($light-diff > $dark-diff, $contrasted-light, $contrasted-dark);
48
- }
49
-
50
- // ----------------------------------------------------------------------------
51
- // Color Stacks
52
-
53
- // Set the default mixing intervals for use in color stacks.
54
- $default-amounts : 20% 40% 60% 70% 80% !default;
55
- $default-tints : $default-amounts !default;
56
- $default-shades : $default-amounts !default;
57
-
58
- // Returns a list of mixed colors at given intervals
59
- // based on two initial source colors.
60
- //
61
- // color-stack($main, $second [, $amounts])
62
- // - $main : The main color this stack is based on.
63
- // - $second : The color to be mixed in at varrying amounts.
64
- // - $amounts : Optional list of percentage mix intervals.
65
- @function color-stack(
66
- $main,
67
- $second,
68
- $amounts: $default-amounts
69
- ) {
70
- $stack: $main;
71
-
72
- @each $amount in $amounts {
73
- $stack: join($stack, mix($second, $main, $amount));
74
- }
75
-
76
- @return $stack;
77
- }
78
-
79
- // Shortcut for returning tint stacks based on a given color.
80
- //
81
- // tint-stack($color [, $amounts])
82
- // - $color : The color to tint.
83
- // - $amounts : Optional list of percentage tint amounts.
84
- @function tint-stack(
85
- $color,
86
- $amounts: $default-tints
87
- ) {
88
- @return color-stack($color, #fff, $amounts);
89
- }
90
-
91
- // Shortcut for returning shade stacks based on a given color.
92
- //
93
- // shade-stack($color [, $amounts])
94
- // - $color : The color to shade.
95
- // - $amounts... : Optional list of percentage shade amounts.
96
- @function shade-stack(
97
- $color,
98
- $amounts: $default-shades
99
- ) {
100
- @return color-stack($color, #000, $amounts);
101
- }
102
-
103
- // ---------------------------------------------------------------------------
104
- // Managing Colors
105
-
106
- // Returns a given tint or shade of a color,
107
- // with options for changing saturation and alpha channels as well.
108
- //
109
- // color($color [, $alpha, $tints, $shades])
110
- // - $color : The color to work from (See "Parsing Colors" detail below)
111
- // - $tints : Optional list of percentage tint amounts.
112
- // - $shades : Optional list of percentage shade amounts.
113
- //
114
- // Parsing Colors: $color == $saturation $color $tint-shade
115
- // - Any color value will be used as the base color.
116
- // - Any percentage preceeding the color will scale saturation.
117
- // - Any intiger, percentage, or keyword will change tint/shade:
118
- // - Intigers step through your list of tint/shade amounts.
119
- // - Percentages are used directly as tint/shade amounts.
120
- // - Positive numbers tint, negative numbers scale.
121
- // - Keywords light/lighter/lightest & dark/darker/darkest
122
- // use the first, middle, and last amounts in a stack.
123
- @function color(
124
- $color,
125
- $alpha: 1,
126
- $tints: $default-tints,
127
- $shades: $default-shades
128
- ) {
129
- $saturation: false;
130
- $lightness: false;
131
- $hue: hsl(0,0%,50%);
132
- $has-hue: false;
133
- $index: 0;
134
-
135
- @each $arg in $color {
136
- @if type-of($arg) == 'color' {
137
- $hue: $arg;
138
- $has-hue: true;
139
- }
140
- @if type-of($arg) == 'number' {
141
- @if unit($arg) != '' {
142
- @if $has-hue or length($color) == 1 { $lightness: $arg; }
143
- @else{ $saturation: $arg; }
144
- }
145
- @else { $index: $arg; }
146
- }
147
- @if type-of($arg) == 'string' {
148
- $tint-length : length($tints);
149
- $tint-half : floor($tint-length/2);
150
- $shade-length : length($shades);
151
- $shade-half : floor($shade-length/2);
152
- @if $arg == 'light' { $index: 1; }
153
- @if $arg == 'lighter' { $index: if($tint-half < 2, 2, $tint-half); }
154
- @if $arg == 'lightest' { $index: $tint-length; }
155
- @if $arg == 'dark' { $index: -1; }
156
- @if $arg == 'darker' { $index: if($shade-half < 2, -2, - $shade-half); }
157
- @if $arg == 'darkest' { $index: - $shade-length; }
158
- }
159
- }
160
-
161
- @if $lightness and $lightness != 0 {
162
- @if $lightness > 0 { $hue: tint($hue,$lightness); }
163
- @else { $hue: shade($hue,abs($lightness)); }
164
- } @else if $index and $index != 0 {
165
- $color-stack: compact();
166
- @if $index > 0 {
167
- $index: $index + 1;
168
- $color-stack: tint-stack($hue, $tints);
169
- } @else {
170
- $index: abs($index) + 1;
171
- $color-stack: shade-stack($hue, $shades);
172
- }
173
- @if $index <= length($color-stack) {
174
- $hue: nth($color-stack,$index);
175
- } @else {
176
- @warn "You don't have #{$index - 1} colors in this stack";
177
- }
178
- }
179
-
180
- @if $saturation { $hue: scale-color($hue, $saturation: $saturation); }
181
- @return rgba($hue, $alpha);
182
- }
@@ -1,297 +0,0 @@
1
- @import "compass/css3/shared";
2
-
3
- // enables 2009 syntax by default
4
- $flex-legacy : false !default;
5
-
6
- // September 2012 Candidate Recommendation (http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/)
7
- // Chrome 21 (prefixed)
8
- // Opera 12.1 (unprefixed)
9
- // Firefox 20 (unprefixed)
10
- $flex-webkit : true !default;
11
- $flex-moz : false !default;
12
- $flex-o : false !default;
13
- $flex-ms : false !default;
14
- $flex-khtml : false !default;
15
- $flex-official : true !default;
16
-
17
- // March 2012 Working Draft (http://www.w3.org/TR/2012/WD-css3-flexbox-20120322/)
18
- // Demo: http://umaar.github.com/css-flexbox-demo/
19
- // More: http://www.inserthtml.com/2012/05/css3-flex-box-specification-change-layout-design/
20
- // Chrome 17 (prefixed)
21
- // Internet Explorer 10 (prefixed) (http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx)
22
- // Safari?
23
- $flex-2012-webkit : true !default;
24
- $flex-2012-moz : false !default;
25
- $flex-2012-ms : true !default;
26
-
27
- // July 2009 Working Draft (http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/)
28
- // Firefox <20 (prefixed)
29
- $flex-2009-webkit : false !default;
30
- $flex-2009-moz : true !default;
31
-
32
- // --------------------------------
33
- // Common
34
-
35
- @function standard-to-draft-value($value, $version: 2009) {
36
- @if $value == flex-start {
37
- @return start;
38
- } @else if $value == flex-end {
39
- @return end;
40
- } @else if $value == space-between {
41
- @return justify;
42
- } @else if $value == space-around {
43
- @return if($version == 2009, justify, distribute);
44
- }
45
- @return $value;
46
- }
47
-
48
- @mixin flex-standard($property, $value) {
49
- @include experimental($property, $value,
50
- $flex-moz,
51
- $flex-webkit,
52
- $flex-o,
53
- $flex-ms,
54
- $flex-khtml,
55
- $flex-official);
56
- }
57
-
58
- @mixin flex-2012($property, $value) {
59
- @include experimental($property, $value,
60
- $flex-2012-moz,
61
- $flex-2012-webkit,
62
- false,
63
- $flex-2012-ms,
64
- false,
65
- false);
66
- }
67
-
68
- @mixin flex-2009($property, $value) {
69
- @include experimental($property, $value,
70
- $flex-2009-moz,
71
- $flex-2009-webkit,
72
- false,
73
- false,
74
- false,
75
- false);
76
- }
77
-
78
- // mixin to use if standard and 2012 have the same property names
79
- @mixin flex-modern($property, $value) {
80
- @include experimental($property, $value,
81
- $flex-2012-moz or $flex-moz,
82
- $flex-2012-webkit or $flex-webkit,
83
- false, // opera
84
- $flex-2012-ms or $flex-ms,
85
- false, // khtml,
86
- true); // official
87
- }
88
-
89
- // --------------------------------
90
- // Display property
91
-
92
- // $type: flex | inline-flex
93
- @mixin display-flex($type: flex, $legacy: $flex-legacy) {
94
- @if $legacy {
95
- @include legacy-display-flex($type);
96
- }
97
-
98
- @include experimental-value(display, if($type == flex, flexbox, inline-flexbox),
99
- $flex-2012-moz,
100
- $flex-2012-webkit,
101
- false,
102
- $flex-2012-ms,
103
- false,
104
- false);
105
- @include experimental-value(display, $type,
106
- $flex-moz,
107
- $flex-webkit,
108
- $flex-o,
109
- $flex-ms,
110
- $flex-khtml,
111
- $flex-official);
112
- }
113
-
114
- @mixin legacy-display-flex($type: flex) {
115
- @include experimental-value(display, if($type == flex, box, inline-box),
116
- $flex-2009-moz,
117
- $flex-2009-webkit,
118
- false,
119
- false,
120
- false,
121
- false);
122
- }
123
-
124
- // --------------------------------
125
- // Flex
126
-
127
- // $value: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
128
- @mixin flex($value: 0 1 auto, $legacy: $flex-legacy) {
129
- @if $legacy and unitless(nth($value, 1)) {
130
- // 2009 version does not have a shorthand, see `legacy-flex-grow`
131
- @include legacy-flex-grow(nth($value, 1));
132
- }
133
-
134
- @include flex-modern(flex, $value);
135
- }
136
-
137
- // --------------------------------
138
-
139
- // $value: Integer
140
- @mixin flex-grow($value: 0, $legacy: $flex-legacy) {
141
- @if $legacy {
142
- @include legacy-flex-grow($value);
143
- }
144
-
145
- // There is no 2012 version of this property
146
- @include flex-standard(flex-grow, $value);
147
- }
148
-
149
- @mixin legacy-flex-grow($value: 0) {
150
- @include flex-2009(box-flex, $value);
151
- }
152
-
153
- // --------------------------------
154
-
155
- // $value: Integer
156
- @mixin flex-shrink($value: 1) {
157
- // There is no 2009 version of this property
158
- // There is no 2012 version of this property
159
- @include flex-standard(flex-shrink, $value);
160
- }
161
-
162
- // --------------------------------
163
-
164
- // $value: united number (eg: 100px)
165
- @mixin flex-basis($value: auto) {
166
- // There is no 2009 version of this property
167
- // There is no 2012 version of this property
168
- @include flex-standard(flex-basis, $value);
169
- }
170
-
171
- // --------------------------------
172
- // Flex-flow
173
-
174
- // <'flex-direction'> || <'flex-wrap'>
175
- @mixin flex-flow($value: row nowrap, $legacy: $flex-legacy) {
176
- @if $legacy {
177
- @include legacy-flex-flow($value);
178
- }
179
-
180
- @include flex-modern(flex-flow, $value);
181
- }
182
-
183
- @mixin legacy-flex-flow($value: row nowrap) {
184
- @if length($value) > 1 { // 2009 version doesn't have a shorthand
185
- @include legacy-flex-direction(nth($value, 1));
186
- @include legacy-flex-wrap(nth($value, 2));
187
- } @else {
188
- @if $value == row or $value == row-reverse or $value == column or $value == column-reverse {
189
- @include legacy-flex-direction($value);
190
- } @else {
191
- @include legacy-flex-wrap($value);
192
- }
193
- }
194
- }
195
-
196
- // --------------------------------------------------------------------------------
197
-
198
- // $value: row | row-reverse | column | column-reverse
199
- @mixin flex-direction($value: row, $legacy: $flex-legacy) {
200
- @if $legacy {
201
- @include legacy-flex-direction($value);
202
- }
203
-
204
- @include flex-modern(flex-direction, $value);
205
- }
206
-
207
- @mixin legacy-flex-direction($value: row) {
208
- @include flex-2009(box-orient, if($value == row or $value == row-reverse, horizontal, vertical));
209
- }
210
-
211
- // --------------------------------------------------------------------------------
212
-
213
- // $value: nowrap | wrap | wrap-reverse
214
- @mixin flex-wrap($value: nowrap, $legacy: $flex-legacy) {
215
- @if $legacy {
216
- @include legacy-flex-wrap($value);
217
- }
218
-
219
- @include flex-modern(flex-direction, $value);
220
- }
221
-
222
- @mixin legacy-flex-wrap($value: nowrap) {
223
- @include flex-2009(box-lines, if($value == nowrap, single, multiple));
224
- @include flex-2009(box-direction, if($value == wrap-reverse, reverse, normal));
225
- }
226
-
227
- // --------------------------------
228
- // "Packing" & Alignment
229
-
230
- // Distributing extra space along the "main axis"
231
- // $value: flex-start | flex-end | center | space-between | space-around
232
- @mixin justify-content($value: flex-start, $legacy: $flex-legacy) {
233
- @if $legacy {
234
- @include legacy-justify-content($value);
235
- }
236
-
237
- @include flex-2012(flex-pack, standard-to-draft-value($value, 2012));
238
- @include flex-standard(justify-content, $value);
239
- }
240
-
241
- @mixin legacy-justify-content($value: flex-start) {
242
- @include flex-2009(box-pack, standard-to-draft-value($value, 2009));
243
- }
244
-
245
- // --------------------------------
246
-
247
- // Distributing extra space along the "cross axis"
248
- // $value: flex-start | flex-end | center | space-between | space-around | stretch
249
- @mixin align-content($value: flex-start, $legacy: $flex-legacy) {
250
- @if $legacy {
251
- @include legacy-align-content($value);
252
- }
253
-
254
- @include flex-2012(flex-line-pack, standard-to-draft-value($value, 2012));
255
- @include flex-standard(align-content, $value);
256
- }
257
-
258
- @mixin legacy-align-content($value: flex-start) {
259
- @include flex-2009(box-align, standard-to-draft-value($value, 2009));
260
- }
261
-
262
- // --------------------------------
263
-
264
- // Align items along the "cross axis"
265
- // $value: flex-start | flex-end | center | baseline | stretch
266
- @mixin align-items($value: stretch) { // the flex container
267
- // There is no 2009 version of this property
268
- @include flex-2012(flex-align, standard-to-draft-value($value, 2012));
269
- @include flex-standard(align-items, $value);
270
- }
271
-
272
- // --------------------------------
273
- // Child properties
274
-
275
- // Align items along the "cross axis" -- overrides `align-items` value on individual items
276
- // $value: auto | flex-start | flex-end | center | baseline | stretch
277
- @mixin align-self($value: auto) { // children of flex containers
278
- // There is no 2009 version of this property
279
- @include flex-2012(flex-item-align, standard-to-draft-value($value, 2012));
280
- @include flex-standard(align-self, $value);
281
- }
282
-
283
- // --------------------------------
284
-
285
- // $value: Integer
286
- @mixin order($value: 0, $legacy: $flex-legacy) {
287
- @if $legacy {
288
- @include legacy-order($value);
289
- }
290
-
291
- @include flex-2012(flex-order, $value);
292
- @include flex-standard(order, $value);
293
- }
294
-
295
- @mixin legacy-order($value: 0) {
296
- @include flex-2009(box-ordinal-group, $value);
297
- }