sled 4.5.5
Sign up to get free protection for your applications and to get access to all the features.
- data/LICENSE +13 -0
- data/README.md +24 -0
- data/lib/generators/inuit/install/USAGE +9 -0
- data/lib/generators/inuit/install/install_generator.rb +10 -0
- data/lib/generators/inuit/install/templates/inuit_and_override.css.scss +3 -0
- data/lib/sled.rb +8 -0
- data/lib/sled/version.rb +3 -0
- data/vendor/assets/stylesheets/_vars.scss +124 -0
- data/vendor/assets/stylesheets/assets/batch/batch.eot +0 -0
- data/vendor/assets/stylesheets/assets/batch/batch.svg +360 -0
- data/vendor/assets/stylesheets/assets/batch/batch.ttf +0 -0
- data/vendor/assets/stylesheets/assets/batch/batch.woff +0 -0
- data/vendor/assets/stylesheets/assets/batch/batch_webfont_reference.pdf +0 -0
- data/vendor/assets/stylesheets/inuit.css/_inuit.scss +210 -0
- data/vendor/assets/stylesheets/inuit.css/base/_code.scss +63 -0
- data/vendor/assets/stylesheets/inuit.css/base/_forms.scss +174 -0
- data/vendor/assets/stylesheets/inuit.css/base/_headings.scss +60 -0
- data/vendor/assets/stylesheets/inuit.css/base/_images.scss +67 -0
- data/vendor/assets/stylesheets/inuit.css/base/_links.scss +37 -0
- data/vendor/assets/stylesheets/inuit.css/base/_lists.scss +19 -0
- data/vendor/assets/stylesheets/inuit.css/base/_main.scss +8 -0
- data/vendor/assets/stylesheets/inuit.css/base/_paragraphs.scss +11 -0
- data/vendor/assets/stylesheets/inuit.css/base/_quotes.scss +96 -0
- data/vendor/assets/stylesheets/inuit.css/base/_smallprint.scss +13 -0
- data/vendor/assets/stylesheets/inuit.css/base/_tables.scss +163 -0
- data/vendor/assets/stylesheets/inuit.css/generic/_brand.scss +18 -0
- data/vendor/assets/stylesheets/inuit.css/generic/_clearfix.scss +15 -0
- data/vendor/assets/stylesheets/inuit.css/generic/_debug.scss +168 -0
- data/vendor/assets/stylesheets/inuit.css/generic/_helper.scss +112 -0
- data/vendor/assets/stylesheets/inuit.css/generic/_mixins.scss +299 -0
- data/vendor/assets/stylesheets/inuit.css/generic/_normalize.scss +396 -0
- data/vendor/assets/stylesheets/inuit.css/generic/_pull.scss +123 -0
- data/vendor/assets/stylesheets/inuit.css/generic/_push.scss +123 -0
- data/vendor/assets/stylesheets/inuit.css/generic/_reset.scss +80 -0
- data/vendor/assets/stylesheets/inuit.css/generic/_shared.scss +61 -0
- data/vendor/assets/stylesheets/inuit.css/generic/_widths.scss +154 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_arrows.scss +143 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_batch.scss +15 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_block-list.scss +40 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_breadcrumb.scss +59 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_buttons.scss +44 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_columns.scss +18 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_flexbox.scss +51 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_flyout.scss +59 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_greybox.scss +54 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_grids.scss +99 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_icon-text.scss +36 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_island.scss +34 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_link-complex.scss +28 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_lozenges.scss +42 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_marginalia.scss +48 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_matrix.scss +98 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_media.scss +56 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_nav.scss +151 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_options.scss +41 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_pagination.scss +46 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_rules.scss +61 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_split.scss +35 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_sprite.scss +92 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_stats.scss +48 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_this-or-this.scss +34 -0
- data/vendor/assets/stylesheets/style.scss +23 -0
- metadata +126 -0
@@ -0,0 +1,18 @@
|
|
1
|
+
/*------------------------------------*\
|
2
|
+
$BRAND
|
3
|
+
\*------------------------------------*/
|
4
|
+
/**
|
5
|
+
* `.brand` is a quick and simple way to apply your brand face and/or color to
|
6
|
+
* any element using a handy helper class.
|
7
|
+
*/
|
8
|
+
.brand{
|
9
|
+
font-family:$brand-face +!important;
|
10
|
+
color:$brand-color +!important;
|
11
|
+
}
|
12
|
+
.brand-face{
|
13
|
+
font-family:$brand-face +!important;
|
14
|
+
}
|
15
|
+
.brand-color,
|
16
|
+
.brand-colour{
|
17
|
+
color:$brand-color +!important;
|
18
|
+
}
|
@@ -0,0 +1,15 @@
|
|
1
|
+
/*------------------------------------*\
|
2
|
+
$CLEARFIX
|
3
|
+
\*------------------------------------*/
|
4
|
+
/**
|
5
|
+
* Micro clearfix, as per: css-101.org/articles/clearfix/latest-new-clearfix-so-far.php
|
6
|
+
* Extend the clearfix class with Sass to avoid the `.cf` class appearing over
|
7
|
+
* and over in your markup.
|
8
|
+
*/
|
9
|
+
.cf{
|
10
|
+
&:after{
|
11
|
+
content:"";
|
12
|
+
display:table;
|
13
|
+
clear:both;
|
14
|
+
}
|
15
|
+
}
|
@@ -0,0 +1,168 @@
|
|
1
|
+
@if $debug-mode == true{
|
2
|
+
/*------------------------------------*\
|
3
|
+
$DEBUG
|
4
|
+
\*------------------------------------*/
|
5
|
+
/**
|
6
|
+
* Enable this stylesheet to visually detect any improperly nested or
|
7
|
+
* potentially invalid markup, or any potentially inaccessible code.
|
8
|
+
*
|
9
|
+
* Red == definite error
|
10
|
+
* Yellow == double-check
|
11
|
+
* None == should be fine
|
12
|
+
*
|
13
|
+
* Please note that this method of checking markup quality should not be relied
|
14
|
+
* upon entirely. Validate your markup!
|
15
|
+
*/
|
16
|
+
|
17
|
+
|
18
|
+
/**
|
19
|
+
* Are there any empty elements in your page?
|
20
|
+
*/
|
21
|
+
:empty{
|
22
|
+
outline:5px solid yellow;
|
23
|
+
}
|
24
|
+
|
25
|
+
|
26
|
+
/**
|
27
|
+
* Images require `alt` attributes, empty `alt`s are fine but should be
|
28
|
+
* double-checked, no `alt` is bad and is flagged red.
|
29
|
+
*/
|
30
|
+
img{
|
31
|
+
outline:5px solid red;
|
32
|
+
}
|
33
|
+
img[alt]{
|
34
|
+
outline:none;
|
35
|
+
}
|
36
|
+
img[alt=""]{
|
37
|
+
outline:5px solid yellow;
|
38
|
+
}
|
39
|
+
|
40
|
+
|
41
|
+
/**
|
42
|
+
* Links sometimes, though not always, benefit from `title` attributes. Links
|
43
|
+
* without are never invalid but it’s a good idea to check.
|
44
|
+
*/
|
45
|
+
a{
|
46
|
+
outline:5px solid yellow;
|
47
|
+
}
|
48
|
+
a[title]{
|
49
|
+
outline:none;
|
50
|
+
}
|
51
|
+
|
52
|
+
|
53
|
+
/**
|
54
|
+
* Double-check any links whose `href` is something questionable.
|
55
|
+
*/
|
56
|
+
a[href="#"],
|
57
|
+
a[href*="javascript"]{
|
58
|
+
outline:5px solid yellow;
|
59
|
+
}
|
60
|
+
|
61
|
+
|
62
|
+
/**
|
63
|
+
* The `target` attribute ain’t too nice...
|
64
|
+
*/
|
65
|
+
a[target]{
|
66
|
+
outline:5px solid yellow;
|
67
|
+
}
|
68
|
+
|
69
|
+
|
70
|
+
/**
|
71
|
+
* Ensure any lists only contain `li`s as children.
|
72
|
+
*/
|
73
|
+
ul,
|
74
|
+
ol{
|
75
|
+
> *:not(li){
|
76
|
+
outline:5px solid red;
|
77
|
+
}
|
78
|
+
}
|
79
|
+
|
80
|
+
|
81
|
+
/**
|
82
|
+
* It’s always nice to give `th`s `scope` attributes.
|
83
|
+
*/
|
84
|
+
th{
|
85
|
+
outline:5px solid yellow;
|
86
|
+
}
|
87
|
+
th[scope]{
|
88
|
+
outline:none;
|
89
|
+
}
|
90
|
+
|
91
|
+
|
92
|
+
/**
|
93
|
+
* `tr`s as children of `table`s ain’t great, did you need a `thead`/`tbody`?
|
94
|
+
*/
|
95
|
+
table > tr{
|
96
|
+
outline:5px solid yellow;
|
97
|
+
}
|
98
|
+
|
99
|
+
|
100
|
+
/**
|
101
|
+
* `tfoot` needs to come *before* `tbody`.
|
102
|
+
*/
|
103
|
+
tbody + tfoot{
|
104
|
+
outline:5px solid yellow;
|
105
|
+
}
|
106
|
+
|
107
|
+
|
108
|
+
/**
|
109
|
+
* Forms require `action` attributes
|
110
|
+
*/
|
111
|
+
form{
|
112
|
+
outline:5px solid red;
|
113
|
+
}
|
114
|
+
form[action]{
|
115
|
+
outline:none;
|
116
|
+
}
|
117
|
+
|
118
|
+
|
119
|
+
/**
|
120
|
+
* Various form-field types have required attributes. `input`s need `type`
|
121
|
+
* attributes, `textarea`s need `rows` and `cols` attributes and submit buttons
|
122
|
+
* need a `value` attribute.
|
123
|
+
*/
|
124
|
+
textarea,
|
125
|
+
input{
|
126
|
+
outline:5px solid red;
|
127
|
+
}
|
128
|
+
input[type]{
|
129
|
+
outline:none;
|
130
|
+
}
|
131
|
+
textarea[rows][cols]{
|
132
|
+
outline:none;
|
133
|
+
}
|
134
|
+
input[type=submit]{
|
135
|
+
outline:5px solid red;
|
136
|
+
}
|
137
|
+
input[type=submit][value]{
|
138
|
+
outline:none;
|
139
|
+
}
|
140
|
+
|
141
|
+
|
142
|
+
/**
|
143
|
+
* Avoid inline styles where possible.
|
144
|
+
*/
|
145
|
+
[style]{
|
146
|
+
outline:5px solid yellow;
|
147
|
+
}
|
148
|
+
|
149
|
+
|
150
|
+
/**
|
151
|
+
* You should avoid using IDs for CSS, is this doing any styling?
|
152
|
+
*/
|
153
|
+
[id]{
|
154
|
+
outline:5px solid yellow;
|
155
|
+
}
|
156
|
+
|
157
|
+
|
158
|
+
/**
|
159
|
+
* Are you using the grid system correctly?
|
160
|
+
*/
|
161
|
+
.gw > :not(.g),
|
162
|
+
.grid-wrapper > :not(.grid),
|
163
|
+
.gw--rev > :not(.g),
|
164
|
+
.grid-wrapper--rev > :not(.grid){
|
165
|
+
outline:5px solid red;
|
166
|
+
}
|
167
|
+
|
168
|
+
}/* endif */
|
@@ -0,0 +1,112 @@
|
|
1
|
+
/*------------------------------------*\
|
2
|
+
$HELPER
|
3
|
+
\*------------------------------------*/
|
4
|
+
/**
|
5
|
+
* A series of helper classes to use arbitrarily. Only use a helper class if an
|
6
|
+
* element/component doesn’t already have a class to which you could apply this
|
7
|
+
* styling, e.g. if you need to float `.main-nav` left then add `float:left;` to
|
8
|
+
* that ruleset as opposed to adding the `.float--left` class to the markup.
|
9
|
+
*
|
10
|
+
* A lot of these classes carry `!important` as you will always want them to win
|
11
|
+
* out over other selectors.
|
12
|
+
*/
|
13
|
+
.float--right { float:right!important; }
|
14
|
+
.float--left { float:left !important; }
|
15
|
+
|
16
|
+
.text--left { text-align:left !important; }
|
17
|
+
.text--center { text-align:center!important; }
|
18
|
+
.text--right { text-align:right !important; }
|
19
|
+
|
20
|
+
.flush { margin: 0!important; }
|
21
|
+
.flush--top { margin-top: 0!important; }
|
22
|
+
.flush--right { margin-right: 0!important; }
|
23
|
+
.flush--bottom { margin-bottom:0!important; }
|
24
|
+
.flush--left { margin-left: 0!important; }
|
25
|
+
.flush--ends { margin-top: 0!important; margin-bottom:0!important; }
|
26
|
+
.flush--sides { margin-right: 0!important; margin-left: 0!important; }
|
27
|
+
|
28
|
+
|
29
|
+
/**
|
30
|
+
* Pull items full width of `.island` parents.
|
31
|
+
*/
|
32
|
+
.full-bleed{
|
33
|
+
margin-right:-$base-spacing-unit!important;
|
34
|
+
margin-left: -$base-spacing-unit!important;
|
35
|
+
|
36
|
+
.islet &{
|
37
|
+
margin-right:-($half-spacing-unit)!important;
|
38
|
+
margin-left: -($half-spacing-unit)!important;
|
39
|
+
}
|
40
|
+
}
|
41
|
+
|
42
|
+
|
43
|
+
/**
|
44
|
+
* Add a help cursor to any element that gives the user extra information on
|
45
|
+
* `:hover`.
|
46
|
+
*/
|
47
|
+
.informative{
|
48
|
+
cursor:help;
|
49
|
+
}
|
50
|
+
|
51
|
+
|
52
|
+
/**
|
53
|
+
* Mute an object by reducing its opacity.
|
54
|
+
*/
|
55
|
+
.muted{
|
56
|
+
opacity:0.5;
|
57
|
+
filter:alpha(opacity = 50);
|
58
|
+
}
|
59
|
+
|
60
|
+
|
61
|
+
/**
|
62
|
+
* Align items to the right where they imply progression/movement forward, e.g.:
|
63
|
+
*
|
64
|
+
<p class=proceed><a href=#>Read more...</a></p>
|
65
|
+
*
|
66
|
+
*/
|
67
|
+
.proceed{
|
68
|
+
text-align:right;
|
69
|
+
}
|
70
|
+
|
71
|
+
|
72
|
+
/**
|
73
|
+
* Add a right-angled quote to links that imply movement, e.g.:
|
74
|
+
*
|
75
|
+
<a href=# class=go>Read more</a>
|
76
|
+
*
|
77
|
+
*/
|
78
|
+
.go:after{
|
79
|
+
content:" »";
|
80
|
+
}
|
81
|
+
|
82
|
+
|
83
|
+
/**
|
84
|
+
* Apply capital case to an element (usually a `strong`).
|
85
|
+
*/
|
86
|
+
.caps{
|
87
|
+
text-transform:uppercase;
|
88
|
+
}
|
89
|
+
|
90
|
+
|
91
|
+
/**
|
92
|
+
* Hide content off-screen without resorting to `display:none;`
|
93
|
+
*/
|
94
|
+
.accessibility { position:absolute; left:-99999px; }
|
95
|
+
[dir=rtl] .accessibility { left:auto; right:-99999px; }
|
96
|
+
|
97
|
+
|
98
|
+
/**
|
99
|
+
* Hide content based on breakpoint
|
100
|
+
*/
|
101
|
+
.hide{
|
102
|
+
position:absolute;
|
103
|
+
left:-9999px;
|
104
|
+
}
|
105
|
+
@each $state in palm, lap, lap-and-up, portable, desk, desk-wide{
|
106
|
+
@include media-query(#{$state}){
|
107
|
+
.hide--#{$state}{
|
108
|
+
position:absolute;
|
109
|
+
left:-9999px;
|
110
|
+
}
|
111
|
+
}
|
112
|
+
}
|
@@ -0,0 +1,299 @@
|
|
1
|
+
/*------------------------------------*\
|
2
|
+
$MIXINS
|
3
|
+
\*------------------------------------*/
|
4
|
+
/**
|
5
|
+
* Create a fully formed type style (sizing and vertical rhythm) by passing in a
|
6
|
+
* single value, e.g.:
|
7
|
+
*
|
8
|
+
`@include font-size(10px);`
|
9
|
+
*
|
10
|
+
* Thanks to @redclov3r for the `line-height` Sass:
|
11
|
+
* twitter.com/redclov3r/status/250301539321798657
|
12
|
+
*/
|
13
|
+
@mixin font-size($font-size){
|
14
|
+
font-size:$font-size;
|
15
|
+
font-size:($font-size / $base-font-size)*1rem;
|
16
|
+
line-height:ceil($font-size / $base-line-height) * ($base-line-height / $font-size);
|
17
|
+
}
|
18
|
+
|
19
|
+
|
20
|
+
/**
|
21
|
+
* Create vendor-prefixed CSS in one go, e.g.
|
22
|
+
*
|
23
|
+
`@include vendor(border-radius, 4px);`
|
24
|
+
*
|
25
|
+
*/
|
26
|
+
@mixin vendor($property, $value...){
|
27
|
+
-webkit-#{$property}:$value;
|
28
|
+
-moz-#{$property}:$value;
|
29
|
+
-ms-#{$property}:$value;
|
30
|
+
-o-#{$property}:$value;
|
31
|
+
#{$property}:$value;
|
32
|
+
}
|
33
|
+
|
34
|
+
|
35
|
+
/**
|
36
|
+
* Create CSS keyframe animations for all vendors in one go, e.g.:
|
37
|
+
*
|
38
|
+
.foo{
|
39
|
+
@include vendor(animation, shrink 3s);
|
40
|
+
}
|
41
|
+
|
42
|
+
@include keyframe(shrink){
|
43
|
+
from{
|
44
|
+
font-size:5em;
|
45
|
+
}
|
46
|
+
}
|
47
|
+
*
|
48
|
+
* Courtesy of @integralist: twitter.com/integralist/status/260484115315437569
|
49
|
+
*/
|
50
|
+
@mixin keyframe ($animation-name){
|
51
|
+
@-webkit-keyframes $animation-name{
|
52
|
+
@content;
|
53
|
+
}
|
54
|
+
|
55
|
+
@-moz-keyframes $animation-name{
|
56
|
+
@content;
|
57
|
+
}
|
58
|
+
|
59
|
+
@-ms-keyframes $animation-name{
|
60
|
+
@content;
|
61
|
+
}
|
62
|
+
|
63
|
+
@-o-keyframes $animation-name{
|
64
|
+
@content;
|
65
|
+
}
|
66
|
+
|
67
|
+
@keyframes $animation-name{
|
68
|
+
@content;
|
69
|
+
}
|
70
|
+
}
|
71
|
+
|
72
|
+
|
73
|
+
/**
|
74
|
+
* Force overly long spans of text to truncate, e.g.:
|
75
|
+
*
|
76
|
+
`@include truncate(100%);`
|
77
|
+
*
|
78
|
+
* Where `$truncation-boundary` is a united measurement.
|
79
|
+
*/
|
80
|
+
@mixin truncate($truncation-boundary){
|
81
|
+
max-width:$truncation-boundary;
|
82
|
+
white-space:nowrap;
|
83
|
+
overflow:hidden;
|
84
|
+
text-overflow:ellipsis;
|
85
|
+
}
|
86
|
+
|
87
|
+
|
88
|
+
/**
|
89
|
+
* CSS arrows!!! But... before you read on, you might want to grab a coffee...
|
90
|
+
*
|
91
|
+
* This mixin creates a CSS arrow on a given element. We can have the arrow
|
92
|
+
* appear in one of 12 locations, thus:
|
93
|
+
*
|
94
|
+
* 01 02 03
|
95
|
+
* +------------------+
|
96
|
+
* 12 | | 04
|
97
|
+
* | |
|
98
|
+
* 11 | | 05
|
99
|
+
* | |
|
100
|
+
* 10 | | 06
|
101
|
+
* +------------------+
|
102
|
+
* 09 08 07
|
103
|
+
*
|
104
|
+
* You pass this position in along with a desired arrow color and optional
|
105
|
+
* border color, for example:
|
106
|
+
*
|
107
|
+
* `@include arrow(top, left, red)`
|
108
|
+
*
|
109
|
+
* for just a single, red arrow, or:
|
110
|
+
*
|
111
|
+
* `@include arrow(bottom, center, red, black)`
|
112
|
+
*
|
113
|
+
* which will create a red triangle with a black border which sits at the bottom
|
114
|
+
* center of the element. Call the mixin thus:
|
115
|
+
*
|
116
|
+
.foo{
|
117
|
+
background-color:#BADA55;
|
118
|
+
border:1px solid #ACE;
|
119
|
+
@include arrow(top, left, #BADA55, #ACE);
|
120
|
+
}
|
121
|
+
*
|
122
|
+
*/
|
123
|
+
@mixin arrow($arrow-edge, $arrow-location, $arrow-color, $border-color: $arrow-color){
|
124
|
+
|
125
|
+
@if $arrow-edge == top{
|
126
|
+
|
127
|
+
@extend %arrow--top;
|
128
|
+
|
129
|
+
&:before{
|
130
|
+
border-bottom-color:$border-color!important;
|
131
|
+
}
|
132
|
+
|
133
|
+
&:after{
|
134
|
+
border-bottom-color:$arrow-color!important;
|
135
|
+
}
|
136
|
+
|
137
|
+
@if $arrow-location == left{
|
138
|
+
@extend %arrow--left;
|
139
|
+
}
|
140
|
+
|
141
|
+
@if $arrow-location == center{
|
142
|
+
@extend %arrow--center;
|
143
|
+
}
|
144
|
+
|
145
|
+
@if $arrow-location == right{
|
146
|
+
@extend %arrow--right;
|
147
|
+
}
|
148
|
+
|
149
|
+
}
|
150
|
+
|
151
|
+
@if $arrow-edge == right{
|
152
|
+
|
153
|
+
@extend %arrow--far;
|
154
|
+
|
155
|
+
&:before{
|
156
|
+
border-left-color:$border-color!important;
|
157
|
+
}
|
158
|
+
|
159
|
+
&:after{
|
160
|
+
border-left-color:$arrow-color!important;
|
161
|
+
}
|
162
|
+
|
163
|
+
@if $arrow-location == top{
|
164
|
+
@extend %arrow--upper;
|
165
|
+
}
|
166
|
+
|
167
|
+
@if $arrow-location == center{
|
168
|
+
@extend %arrow--middle;
|
169
|
+
}
|
170
|
+
|
171
|
+
@if $arrow-location == bottom{
|
172
|
+
@extend %arrow--lower;
|
173
|
+
}
|
174
|
+
|
175
|
+
}
|
176
|
+
|
177
|
+
@if $arrow-edge == bottom{
|
178
|
+
|
179
|
+
@extend %arrow--bottom;
|
180
|
+
|
181
|
+
&:before{
|
182
|
+
border-top-color:$border-color!important;
|
183
|
+
}
|
184
|
+
|
185
|
+
&:after{
|
186
|
+
border-top-color:$arrow-color!important;
|
187
|
+
}
|
188
|
+
|
189
|
+
@if $arrow-location == left{
|
190
|
+
@extend %arrow--left;
|
191
|
+
}
|
192
|
+
|
193
|
+
@if $arrow-location == center{
|
194
|
+
@extend %arrow--center;
|
195
|
+
}
|
196
|
+
|
197
|
+
@if $arrow-location == right{
|
198
|
+
@extend %arrow--right;
|
199
|
+
}
|
200
|
+
|
201
|
+
}
|
202
|
+
|
203
|
+
@if $arrow-edge == left{
|
204
|
+
|
205
|
+
@extend %arrow--near;
|
206
|
+
|
207
|
+
&:before{
|
208
|
+
border-right-color:$border-color!important;
|
209
|
+
}
|
210
|
+
|
211
|
+
&:after{
|
212
|
+
border-right-color:$arrow-color!important;
|
213
|
+
}
|
214
|
+
|
215
|
+
@if $arrow-location == top{
|
216
|
+
@extend %arrow--upper;
|
217
|
+
}
|
218
|
+
|
219
|
+
@if $arrow-location == center{
|
220
|
+
@extend %arrow--middle;
|
221
|
+
}
|
222
|
+
|
223
|
+
@if $arrow-location == bottom{
|
224
|
+
@extend %arrow--lower;
|
225
|
+
}
|
226
|
+
|
227
|
+
}
|
228
|
+
|
229
|
+
}
|
230
|
+
|
231
|
+
|
232
|
+
/**
|
233
|
+
* Media query mixin.
|
234
|
+
*
|
235
|
+
* It’s not great practice to define solid breakpoints up-front, preferring to
|
236
|
+
* modify your design when it needs it, rather than assuming you’ll want a
|
237
|
+
* change at ‘mobile’. However, as inuit.css is required to take a hands off
|
238
|
+
* approach to design decisions, this is the closest we can get to baked-in
|
239
|
+
* responsiveness. It’s flexible enough to allow you to set your own breakpoints
|
240
|
+
* but solid enough to be frameworkified.
|
241
|
+
*
|
242
|
+
* We define some broad breakpoints in our vars file that are picked up here
|
243
|
+
* for use in a simple media query mixin. Our options are:
|
244
|
+
*
|
245
|
+
* palm
|
246
|
+
* lap
|
247
|
+
* lap-and-up
|
248
|
+
* portable
|
249
|
+
* desk
|
250
|
+
* desk-wide
|
251
|
+
*
|
252
|
+
* Not using a media query will, naturally, serve styles to all devices.
|
253
|
+
*
|
254
|
+
* `@include media-query(palm){ [styles here] }`
|
255
|
+
*
|
256
|
+
* We work out your end points for you:
|
257
|
+
*/
|
258
|
+
$palm-end: $lap-start - 1px;
|
259
|
+
$lap-end: $desk-start - 1px;
|
260
|
+
|
261
|
+
@mixin media-query($media-query){
|
262
|
+
|
263
|
+
@if $media-query == palm{
|
264
|
+
|
265
|
+
@media only screen and (max-width:$palm-end) { @content; }
|
266
|
+
|
267
|
+
}
|
268
|
+
|
269
|
+
@if $media-query == lap{
|
270
|
+
|
271
|
+
@media only screen and (min-width:$lap-start) and (max-width:$lap-end) { @content; }
|
272
|
+
|
273
|
+
}
|
274
|
+
|
275
|
+
@if $media-query == lap-and-up{
|
276
|
+
|
277
|
+
@media only screen and (min-width:$lap-start) { @content; }
|
278
|
+
|
279
|
+
}
|
280
|
+
|
281
|
+
@if $media-query == portable{
|
282
|
+
|
283
|
+
@media only screen and (max-width:$lap-end) { @content; }
|
284
|
+
|
285
|
+
}
|
286
|
+
|
287
|
+
@if $media-query == desk{
|
288
|
+
|
289
|
+
@media only screen and (min-width:$desk-start) { @content; }
|
290
|
+
|
291
|
+
}
|
292
|
+
|
293
|
+
@if $media-query == desk-wide{
|
294
|
+
|
295
|
+
@media only screen and (min-width: $desk-wide-start) { @content; }
|
296
|
+
|
297
|
+
}
|
298
|
+
|
299
|
+
}
|