accoutrement 0.0.2 → 0.0.3
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/README.md +22 -2
- data/stylesheets/_accoutrement.scss +1 -0
- data/stylesheets/accoutrement/_arrows.scss +127 -0
- metadata +4 -3
data/README.md
CHANGED
|
@@ -19,6 +19,22 @@ who are very smart.
|
|
|
19
19
|
List of Things
|
|
20
20
|
--------------
|
|
21
21
|
|
|
22
|
+
### Arrows
|
|
23
|
+
|
|
24
|
+
**Settings:**
|
|
25
|
+
|
|
26
|
+
- `$default-arrow-position : top !default;`
|
|
27
|
+
- `$default-arrow-offset : center !default;`
|
|
28
|
+
- `$default-arrow-size : 1em !default;`
|
|
29
|
+
- `$default-arrow-color : gray !default;`
|
|
30
|
+
- `$default-arrow-border-size : null !default;`
|
|
31
|
+
- `$default-arrow-border-color : null !default;`
|
|
32
|
+
|
|
33
|
+
**Mixins:**
|
|
34
|
+
|
|
35
|
+
- `arrow-base()`
|
|
36
|
+
- `arrow([$arrow, $border, $positioning])`
|
|
37
|
+
|
|
22
38
|
### Background
|
|
23
39
|
|
|
24
40
|
**Functions:**
|
|
@@ -33,7 +49,9 @@ List of Things
|
|
|
33
49
|
|
|
34
50
|
### Color
|
|
35
51
|
|
|
36
|
-
*The
|
|
52
|
+
*The brightness and contrast functions are based on
|
|
53
|
+
a [codepen demo][text-contrast] by Brendan Saunders.
|
|
54
|
+
The idea of color-stacks comes from [toolkit][],
|
|
37
55
|
though I've made some alterations to fit into my own process.*
|
|
38
56
|
|
|
39
57
|
**Settings**:
|
|
@@ -51,6 +69,8 @@ though I've made some alterations to fit into my own process.*
|
|
|
51
69
|
- `shade-stack($color [, $amounts])`
|
|
52
70
|
- `color($color [, $alpha, $tints, $shades])`
|
|
53
71
|
|
|
72
|
+
[text-contrast]: http://codepen.io/bluesaunders/details/FCLaz
|
|
73
|
+
|
|
54
74
|
### Math
|
|
55
75
|
|
|
56
76
|
**Functions:**
|
|
@@ -76,7 +96,7 @@ though I've made some alterations to fit into my own process.*
|
|
|
76
96
|
**Mixins:**
|
|
77
97
|
- `@include before($content)`
|
|
78
98
|
- `@include after($content)`
|
|
79
|
-
- `@include wrap($content)`
|
|
99
|
+
- `@include wrap-content($content)`
|
|
80
100
|
|
|
81
101
|
### Rhythm
|
|
82
102
|
|
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
// ----------------------------------------------------------------------------
|
|
2
|
+
// Settings
|
|
3
|
+
|
|
4
|
+
// Body defaults
|
|
5
|
+
$default-arrow-position : top !default;
|
|
6
|
+
$default-arrow-offset : center !default;
|
|
7
|
+
$default-arrow-size : 1em !default;
|
|
8
|
+
$default-arrow-color : gray !default;
|
|
9
|
+
|
|
10
|
+
// Border defaults
|
|
11
|
+
$default-arrow-border-size : null !default;
|
|
12
|
+
$default-arrow-border-color : null !default;
|
|
13
|
+
|
|
14
|
+
// ----------------------------------------------------------------------------
|
|
15
|
+
// Mixins
|
|
16
|
+
|
|
17
|
+
// Creates a pseudo-element, prepared for arrow-fication
|
|
18
|
+
//
|
|
19
|
+
// @include arrow-base()
|
|
20
|
+
@mixin arrow-base {
|
|
21
|
+
content: " ";
|
|
22
|
+
position: absolute;
|
|
23
|
+
height: 0;
|
|
24
|
+
width: 0;
|
|
25
|
+
border: solid transparent;
|
|
26
|
+
pointer-events: none;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
// Creates an arrow to your exact size/shape/location specifications
|
|
30
|
+
//
|
|
31
|
+
// @include arrow([$arrow, $border, $positioning])
|
|
32
|
+
// $arrow : Arrow body position, offset, size, and color.
|
|
33
|
+
// $border : Border size and color.
|
|
34
|
+
// $positioning : You have to position the host element, default is relative.
|
|
35
|
+
@mixin arrow(
|
|
36
|
+
$arrow : $default-arrow-position
|
|
37
|
+
$default-arrow-offset
|
|
38
|
+
$default-arrow-size
|
|
39
|
+
$default-arrow-color,
|
|
40
|
+
$border : $default-arrow-border-size
|
|
41
|
+
$default-arrow-border-color,
|
|
42
|
+
$positioning : relative
|
|
43
|
+
) {
|
|
44
|
+
$has-border : false;
|
|
45
|
+
|
|
46
|
+
$position : $default-arrow-position;
|
|
47
|
+
$offset : $default-arrow-offset;
|
|
48
|
+
$size : $default-arrow-size;
|
|
49
|
+
$color : $default-arrow-color;
|
|
50
|
+
$border-size : $default-arrow-border-size;
|
|
51
|
+
$border-color : $default-arrow-border-color;
|
|
52
|
+
|
|
53
|
+
$strings : compact();
|
|
54
|
+
$numbers : compact();
|
|
55
|
+
|
|
56
|
+
@each $val in $border {
|
|
57
|
+
@if type-of($val) == 'color' {
|
|
58
|
+
$border-color: $val;
|
|
59
|
+
$has-border: true;
|
|
60
|
+
} @else if type-of($val) == 'number' {
|
|
61
|
+
$border-size: $val;
|
|
62
|
+
$has-border: true;
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
$pseudo : if($has-border, '&:before, &:after', '&:before');
|
|
67
|
+
|
|
68
|
+
@each $val in $arrow {
|
|
69
|
+
@if type-of($val) == 'color' { $color: $val; }
|
|
70
|
+
@else if type-of($val) == 'string' { $strings: append($strings, $val); }
|
|
71
|
+
@else if type-of($val) == 'number' { $numbers: append($numbers, $val); }
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
@if length($strings) > 0 {
|
|
75
|
+
$position: nth($strings,1);
|
|
76
|
+
@if length($strings) > 1 and nth($strings,2) { $offset: nth($strings,2); }
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
@if length($numbers) > 0 {
|
|
80
|
+
@if length($numbers) > 1 {
|
|
81
|
+
$offset: nth($numbers,1);
|
|
82
|
+
$size: nth($numbers,2);
|
|
83
|
+
} @else {
|
|
84
|
+
$size: nth($numbers,1);
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
$opposite: opposite-position($position);
|
|
89
|
+
$offset-position: if($position == left or $position == right, top, left);
|
|
90
|
+
@if $offset == 'bottom' or $offset == 'right' {
|
|
91
|
+
$offset-position: opposite-position($offset-position);
|
|
92
|
+
} @else if type-of($offset) == "number" {
|
|
93
|
+
@if $offset != abs($offset) {
|
|
94
|
+
$offset-position: opposite-position($offset-position);
|
|
95
|
+
};
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
position: $positioning;
|
|
99
|
+
|
|
100
|
+
#{$pseudo} {
|
|
101
|
+
@include arrow-base;
|
|
102
|
+
#{$opposite}: 100%;
|
|
103
|
+
border-#{$opposite}-color: $color;
|
|
104
|
+
border-width: $size;
|
|
105
|
+
@if $offset {
|
|
106
|
+
@if $offset == 'center' {
|
|
107
|
+
#{$offset-position}: 50%;
|
|
108
|
+
margin-#{$offset-position}: - $size;
|
|
109
|
+
} @else if type-of($offset) == 'string' {
|
|
110
|
+
#{$offset-position}: 0;
|
|
111
|
+
} @else {
|
|
112
|
+
#{$offset-position}: abs($offset);
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
@if $has-border {
|
|
118
|
+
$border-ratio: 1.5; // 1.41421356 square root of 2, rounded a bit
|
|
119
|
+
$border-full: $size + $border-size * $border-ratio;
|
|
120
|
+
&:before {
|
|
121
|
+
border-width: $border-full;
|
|
122
|
+
border-#{$opposite}-color: $border-color;
|
|
123
|
+
@if $offset == 'center' { margin-#{$offset-position}: - $border-full; }
|
|
124
|
+
@else { margin-#{$offset-position}: - $border-size * $border-ratio; }
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
}
|
metadata
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: accoutrement
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
hash:
|
|
4
|
+
hash: 25
|
|
5
5
|
prerelease:
|
|
6
6
|
segments:
|
|
7
7
|
- 0
|
|
8
8
|
- 0
|
|
9
|
-
-
|
|
10
|
-
version: 0.0.
|
|
9
|
+
- 3
|
|
10
|
+
version: 0.0.3
|
|
11
11
|
platform: ruby
|
|
12
12
|
authors:
|
|
13
13
|
- Eric Meyer
|
|
@@ -45,6 +45,7 @@ files:
|
|
|
45
45
|
- README.md
|
|
46
46
|
- lib/accoutrement.rb
|
|
47
47
|
- stylesheets/_accoutrement.scss
|
|
48
|
+
- stylesheets/accoutrement/_arrows.scss
|
|
48
49
|
- stylesheets/accoutrement/_background.scss
|
|
49
50
|
- stylesheets/accoutrement/_color.scss
|
|
50
51
|
- stylesheets/accoutrement/_math.scss
|