polar-express 0.0.2
Sign up to get free protection for your applications and to get access to all the features.
- data/MIT-LICENSE +19 -0
- data/README.md +37 -0
- data/lib/generators/inuitcss/install/USAGE +9 -0
- data/lib/generators/inuitcss/install/install_generator.rb +9 -0
- data/lib/generators/inuitcss/install/templates/inuit.css.scss +99 -0
- data/lib/polar-express.rb +6 -0
- data/vendor/assets/stylesheets/CHANGELOG.md +26 -0
- data/vendor/assets/stylesheets/CONTRIBUTING.md +42 -0
- data/vendor/assets/stylesheets/LICENSE +13 -0
- data/vendor/assets/stylesheets/README.md +367 -0
- data/vendor/assets/stylesheets/_defaults.scss +225 -0
- data/vendor/assets/stylesheets/_inuit.scss +213 -0
- data/vendor/assets/stylesheets/base/_code.scss +63 -0
- data/vendor/assets/stylesheets/base/_forms.scss +174 -0
- data/vendor/assets/stylesheets/base/_headings.scss +60 -0
- data/vendor/assets/stylesheets/base/_images.scss +73 -0
- data/vendor/assets/stylesheets/base/_lists.scss +19 -0
- data/vendor/assets/stylesheets/base/_main.scss +8 -0
- data/vendor/assets/stylesheets/base/_paragraphs.scss +11 -0
- data/vendor/assets/stylesheets/base/_quotes.scss +96 -0
- data/vendor/assets/stylesheets/base/_smallprint.scss +13 -0
- data/vendor/assets/stylesheets/base/_tables.scss +163 -0
- data/vendor/assets/stylesheets/component.json +5 -0
- data/vendor/assets/stylesheets/generic/_brand.scss +18 -0
- data/vendor/assets/stylesheets/generic/_clearfix.scss +15 -0
- data/vendor/assets/stylesheets/generic/_debug.scss +168 -0
- data/vendor/assets/stylesheets/generic/_helper.scss +184 -0
- data/vendor/assets/stylesheets/generic/_mixins.scss +328 -0
- data/vendor/assets/stylesheets/generic/_normalize.scss +396 -0
- data/vendor/assets/stylesheets/generic/_pull.scss +147 -0
- data/vendor/assets/stylesheets/generic/_push.scss +147 -0
- data/vendor/assets/stylesheets/generic/_reset.scss +80 -0
- data/vendor/assets/stylesheets/generic/_shared.scss +61 -0
- data/vendor/assets/stylesheets/generic/_widths.scss +158 -0
- data/vendor/assets/stylesheets/objects/_arrows.scss +147 -0
- data/vendor/assets/stylesheets/objects/_beautons.scss +226 -0
- data/vendor/assets/stylesheets/objects/_block-list.scss +44 -0
- data/vendor/assets/stylesheets/objects/_breadcrumb.scss +63 -0
- data/vendor/assets/stylesheets/objects/_columns.scss +22 -0
- data/vendor/assets/stylesheets/objects/_flexbox.scss +55 -0
- data/vendor/assets/stylesheets/objects/_flyout.scss +63 -0
- data/vendor/assets/stylesheets/objects/_greybox.scss +58 -0
- data/vendor/assets/stylesheets/objects/_grids.scss +69 -0
- data/vendor/assets/stylesheets/objects/_icon-text.scss +40 -0
- data/vendor/assets/stylesheets/objects/_island.scss +38 -0
- data/vendor/assets/stylesheets/objects/_link-complex.scss +32 -0
- data/vendor/assets/stylesheets/objects/_lozenges.scss +46 -0
- data/vendor/assets/stylesheets/objects/_marginalia.scss +52 -0
- data/vendor/assets/stylesheets/objects/_matrix.scss +89 -0
- data/vendor/assets/stylesheets/objects/_media.scss +60 -0
- data/vendor/assets/stylesheets/objects/_nav.scss +155 -0
- data/vendor/assets/stylesheets/objects/_options.scss +45 -0
- data/vendor/assets/stylesheets/objects/_pagination.scss +50 -0
- data/vendor/assets/stylesheets/objects/_rules.scss +65 -0
- data/vendor/assets/stylesheets/objects/_split.scss +39 -0
- data/vendor/assets/stylesheets/objects/_sprite.scss +98 -0
- data/vendor/assets/stylesheets/objects/_stats.scss +52 -0
- data/vendor/assets/stylesheets/objects/_this-or-this.scss +38 -0
- data/vendor/assets/stylesheets/style.scss +26 -0
- metadata +122 -0
@@ -0,0 +1,184 @@
|
|
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
|
+
|
14
|
+
|
15
|
+
/**
|
16
|
+
* Add/remove floats
|
17
|
+
*/
|
18
|
+
.float--right { float:right!important; }
|
19
|
+
.float--left { float:left !important; }
|
20
|
+
.float--none { float:none !important; }
|
21
|
+
|
22
|
+
|
23
|
+
/**
|
24
|
+
* Text alignment
|
25
|
+
*/
|
26
|
+
.text--left { text-align:left !important; }
|
27
|
+
.text--center { text-align:center!important; }
|
28
|
+
.text--right { text-align:right !important; }
|
29
|
+
|
30
|
+
|
31
|
+
/**
|
32
|
+
* Font weights
|
33
|
+
*/
|
34
|
+
.weight--light { font-weight:300!important; }
|
35
|
+
.weight--normal { font-weight:400!important; }
|
36
|
+
.weight--semibold { font-weight:600!important; }
|
37
|
+
|
38
|
+
|
39
|
+
/**
|
40
|
+
* Add/remove margins
|
41
|
+
*/
|
42
|
+
.push { margin: $base-spacing-unit!important; }
|
43
|
+
.push--top { margin-top: $base-spacing-unit!important; }
|
44
|
+
.push--right { margin-right: $base-spacing-unit!important; }
|
45
|
+
.push--bottom { margin-bottom:$base-spacing-unit!important; }
|
46
|
+
.push--left { margin-left: $base-spacing-unit!important; }
|
47
|
+
.push--ends { margin-top: $base-spacing-unit!important; margin-bottom:$base-spacing-unit!important; }
|
48
|
+
.push--sides { margin-right: $base-spacing-unit!important; margin-left: $base-spacing-unit!important; }
|
49
|
+
|
50
|
+
.push-half { margin: $half-spacing-unit!important; }
|
51
|
+
.push-half--top { margin-top: $half-spacing-unit!important; }
|
52
|
+
.push-half--right { margin-right: $half-spacing-unit!important; }
|
53
|
+
.push-half--bottom { margin-bottom:$half-spacing-unit!important; }
|
54
|
+
.push-half--left { margin-left: $half-spacing-unit!important; }
|
55
|
+
.push-half--ends { margin-top: $half-spacing-unit!important; margin-bottom:$half-spacing-unit!important; }
|
56
|
+
.push-half--sides { margin-right: $half-spacing-unit!important; margin-left: $half-spacing-unit!important; }
|
57
|
+
|
58
|
+
.flush { margin: 0!important; }
|
59
|
+
.flush--top { margin-top: 0!important; }
|
60
|
+
.flush--right { margin-right: 0!important; }
|
61
|
+
.flush--bottom { margin-bottom:0!important; }
|
62
|
+
.flush--left { margin-left: 0!important; }
|
63
|
+
.flush--ends { margin-top: 0!important; margin-bottom:0!important; }
|
64
|
+
.flush--sides { margin-right: 0!important; margin-left: 0!important; }
|
65
|
+
|
66
|
+
|
67
|
+
/**
|
68
|
+
* Add/remove paddings
|
69
|
+
*/
|
70
|
+
.soft { padding: $base-spacing-unit!important; }
|
71
|
+
.soft--top { padding-top: $base-spacing-unit!important; }
|
72
|
+
.soft--right { padding-right: $base-spacing-unit!important; }
|
73
|
+
.soft--bottom { padding-bottom:$base-spacing-unit!important; }
|
74
|
+
.soft--left { padding-left: $base-spacing-unit!important; }
|
75
|
+
.soft--ends { padding-top: $base-spacing-unit!important; padding-bottom:$base-spacing-unit!important; }
|
76
|
+
.soft--sides { padding-right: $base-spacing-unit!important; padding-left: $base-spacing-unit!important; }
|
77
|
+
|
78
|
+
.soft-half { padding: $half-spacing-unit!important; }
|
79
|
+
.soft-half--top { padding-top: $half-spacing-unit!important; }
|
80
|
+
.soft-half--right { padding-right: $half-spacing-unit!important; }
|
81
|
+
.soft-half--bottom { padding-bottom:$half-spacing-unit!important; }
|
82
|
+
.soft-half--left { padding-left: $half-spacing-unit!important; }
|
83
|
+
.soft-half--ends { padding-top: $half-spacing-unit!important; padding-bottom:$half-spacing-unit!important; }
|
84
|
+
.soft-half--sides { padding-right: $half-spacing-unit!important; padding-left: $half-spacing-unit!important; }
|
85
|
+
|
86
|
+
.hard { padding: 0!important; }
|
87
|
+
.hard--top { padding-top: 0!important; }
|
88
|
+
.hard--right { padding-right: 0!important; }
|
89
|
+
.hard--bottom { padding-bottom:0!important; }
|
90
|
+
.hard--left { padding-left: 0!important; }
|
91
|
+
.hard--ends { padding-top: 0!important; padding-bottom:0!important; }
|
92
|
+
.hard--sides { padding-right: 0!important; padding-left: 0!important; }
|
93
|
+
|
94
|
+
|
95
|
+
/**
|
96
|
+
* Pull items full width of `.island` parents.
|
97
|
+
*/
|
98
|
+
.full-bleed{
|
99
|
+
margin-right:-$base-spacing-unit!important;
|
100
|
+
margin-left: -$base-spacing-unit!important;
|
101
|
+
|
102
|
+
.islet &{
|
103
|
+
margin-right:-($half-spacing-unit)!important;
|
104
|
+
margin-left: -($half-spacing-unit)!important;
|
105
|
+
}
|
106
|
+
}
|
107
|
+
|
108
|
+
|
109
|
+
/**
|
110
|
+
* Add a help cursor to any element that gives the user extra information on
|
111
|
+
* `:hover`.
|
112
|
+
*/
|
113
|
+
.informative{
|
114
|
+
cursor:help!important;
|
115
|
+
}
|
116
|
+
|
117
|
+
|
118
|
+
/**
|
119
|
+
* Mute an object by reducing its opacity.
|
120
|
+
*/
|
121
|
+
.muted{
|
122
|
+
opacity:0.5!important;
|
123
|
+
filter:alpha(opacity = 50)!important;
|
124
|
+
}
|
125
|
+
|
126
|
+
|
127
|
+
/**
|
128
|
+
* Align items to the right where they imply progression/movement forward, e.g.:
|
129
|
+
*
|
130
|
+
<p class=proceed><a href=#>Read more...</a></p>
|
131
|
+
*
|
132
|
+
*/
|
133
|
+
.proceed{
|
134
|
+
text-align:right!important;
|
135
|
+
}
|
136
|
+
|
137
|
+
|
138
|
+
/**
|
139
|
+
* Add a right-angled quote to links that imply movement, e.g.:
|
140
|
+
*
|
141
|
+
<a href=# class=go>Read more</a>
|
142
|
+
*
|
143
|
+
*/
|
144
|
+
.go:after{
|
145
|
+
content:"\00A0" "\00BB"!important;
|
146
|
+
}
|
147
|
+
|
148
|
+
|
149
|
+
/**
|
150
|
+
* Apply capital case to an element (usually a `strong`).
|
151
|
+
*/
|
152
|
+
.caps{
|
153
|
+
text-transform:uppercase!important;
|
154
|
+
}
|
155
|
+
|
156
|
+
|
157
|
+
/**
|
158
|
+
* Hide content off-screen without resorting to `display:none;`, also provide
|
159
|
+
* breakpoint specific hidden elements.
|
160
|
+
*/
|
161
|
+
@mixin accessibility{
|
162
|
+
border:0!important;
|
163
|
+
clip:rect(0 0 0 0)!important;
|
164
|
+
height:1px!important;
|
165
|
+
margin:-1px!important;
|
166
|
+
overflow:hidden!important;
|
167
|
+
padding:0!important;
|
168
|
+
position: absolute!important;
|
169
|
+
width:1px!important;
|
170
|
+
}
|
171
|
+
.accessibility,
|
172
|
+
.visuallyhidden{
|
173
|
+
@include accessibility;
|
174
|
+
}
|
175
|
+
@if $responsive{
|
176
|
+
@each $state in palm, lap, lap-and-up, portable, desk, desk-wide{
|
177
|
+
@include media-query(#{$state}){
|
178
|
+
.accessibility--#{$state},
|
179
|
+
.visuallyhidden--#{$state}{
|
180
|
+
@include accessibility;
|
181
|
+
}
|
182
|
+
}
|
183
|
+
}
|
184
|
+
}
|
@@ -0,0 +1,328 @@
|
|
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, $line-height:true){
|
14
|
+
font-size:$font-size;
|
15
|
+
font-size:($font-size / $base-font-size)*1rem;
|
16
|
+
@if $line-height == true{
|
17
|
+
line-height:ceil($font-size / $base-line-height) * ($base-line-height / $font-size);
|
18
|
+
}
|
19
|
+
}
|
20
|
+
|
21
|
+
|
22
|
+
/**
|
23
|
+
* Style any number of headings in one fell swoop, e.g.:
|
24
|
+
*
|
25
|
+
.foo{
|
26
|
+
@include headings(1, 3){
|
27
|
+
color:#BADA55;
|
28
|
+
}
|
29
|
+
}
|
30
|
+
*
|
31
|
+
* With thanks to @lar_zzz, @paranoida, @rowanmanning and ultimately
|
32
|
+
* @thierrylemoulec for refining and improving my initial mixin.
|
33
|
+
*/
|
34
|
+
@mixin headings($from: 1, $to: 6){
|
35
|
+
%base-heading {
|
36
|
+
@content
|
37
|
+
}
|
38
|
+
|
39
|
+
@if $from >= 1 and $to <= 6{
|
40
|
+
@for $i from $from through $to{
|
41
|
+
h#{$i}{
|
42
|
+
@extend %base-heading;
|
43
|
+
}
|
44
|
+
}
|
45
|
+
}
|
46
|
+
}
|
47
|
+
|
48
|
+
|
49
|
+
/**
|
50
|
+
* Create vendor-prefixed CSS in one go, e.g.
|
51
|
+
*
|
52
|
+
`@include vendor(border-radius, 4px);`
|
53
|
+
*
|
54
|
+
*/
|
55
|
+
@mixin vendor($property, $value...){
|
56
|
+
-webkit-#{$property}:$value;
|
57
|
+
-moz-#{$property}:$value;
|
58
|
+
-ms-#{$property}:$value;
|
59
|
+
-o-#{$property}:$value;
|
60
|
+
#{$property}:$value;
|
61
|
+
}
|
62
|
+
|
63
|
+
|
64
|
+
/**
|
65
|
+
* Create CSS keyframe animations for all vendors in one go, e.g.:
|
66
|
+
*
|
67
|
+
.foo{
|
68
|
+
@include vendor(animation, shrink 3s);
|
69
|
+
}
|
70
|
+
|
71
|
+
@include keyframe(shrink){
|
72
|
+
from{
|
73
|
+
font-size:5em;
|
74
|
+
}
|
75
|
+
}
|
76
|
+
*
|
77
|
+
* Courtesy of @integralist: twitter.com/integralist/status/260484115315437569
|
78
|
+
*/
|
79
|
+
@mixin keyframe ($animation-name){
|
80
|
+
@-webkit-keyframes $animation-name{
|
81
|
+
@content;
|
82
|
+
}
|
83
|
+
|
84
|
+
@-moz-keyframes $animation-name{
|
85
|
+
@content;
|
86
|
+
}
|
87
|
+
|
88
|
+
@-ms-keyframes $animation-name{
|
89
|
+
@content;
|
90
|
+
}
|
91
|
+
|
92
|
+
@-o-keyframes $animation-name{
|
93
|
+
@content;
|
94
|
+
}
|
95
|
+
|
96
|
+
@keyframes $animation-name{
|
97
|
+
@content;
|
98
|
+
}
|
99
|
+
}
|
100
|
+
|
101
|
+
|
102
|
+
/**
|
103
|
+
* Force overly long spans of text to truncate, e.g.:
|
104
|
+
*
|
105
|
+
`@include truncate(100%);`
|
106
|
+
*
|
107
|
+
* Where `$truncation-boundary` is a united measurement.
|
108
|
+
*/
|
109
|
+
@mixin truncate($truncation-boundary){
|
110
|
+
max-width:$truncation-boundary;
|
111
|
+
white-space:nowrap;
|
112
|
+
overflow:hidden;
|
113
|
+
text-overflow:ellipsis;
|
114
|
+
}
|
115
|
+
|
116
|
+
|
117
|
+
/**
|
118
|
+
* CSS arrows!!! But... before you read on, you might want to grab a coffee...
|
119
|
+
*
|
120
|
+
* This mixin creates a CSS arrow on a given element. We can have the arrow
|
121
|
+
* appear in one of 12 locations, thus:
|
122
|
+
*
|
123
|
+
* 01 02 03
|
124
|
+
* +------------------+
|
125
|
+
* 12 | | 04
|
126
|
+
* | |
|
127
|
+
* 11 | | 05
|
128
|
+
* | |
|
129
|
+
* 10 | | 06
|
130
|
+
* +------------------+
|
131
|
+
* 09 08 07
|
132
|
+
*
|
133
|
+
* You pass this position in along with a desired arrow color and optional
|
134
|
+
* border color, for example:
|
135
|
+
*
|
136
|
+
* `@include arrow(top, left, red)`
|
137
|
+
*
|
138
|
+
* for just a single, red arrow, or:
|
139
|
+
*
|
140
|
+
* `@include arrow(bottom, center, red, black)`
|
141
|
+
*
|
142
|
+
* which will create a red triangle with a black border which sits at the bottom
|
143
|
+
* center of the element. Call the mixin thus:
|
144
|
+
*
|
145
|
+
.foo{
|
146
|
+
background-color:#BADA55;
|
147
|
+
border:1px solid #ACE;
|
148
|
+
@include arrow(top, left, #BADA55, #ACE);
|
149
|
+
}
|
150
|
+
*
|
151
|
+
*/
|
152
|
+
@mixin arrow($arrow-edge, $arrow-location, $arrow-color, $border-color: $arrow-color){
|
153
|
+
|
154
|
+
@if $arrow-edge == top{
|
155
|
+
|
156
|
+
@extend %arrow--top;
|
157
|
+
|
158
|
+
&:before{
|
159
|
+
border-bottom-color:$border-color!important;
|
160
|
+
}
|
161
|
+
|
162
|
+
&:after{
|
163
|
+
border-bottom-color:$arrow-color!important;
|
164
|
+
}
|
165
|
+
|
166
|
+
@if $arrow-location == left{
|
167
|
+
@extend %arrow--left;
|
168
|
+
}
|
169
|
+
|
170
|
+
@if $arrow-location == center{
|
171
|
+
@extend %arrow--center;
|
172
|
+
}
|
173
|
+
|
174
|
+
@if $arrow-location == right{
|
175
|
+
@extend %arrow--right;
|
176
|
+
}
|
177
|
+
|
178
|
+
}
|
179
|
+
|
180
|
+
@if $arrow-edge == right{
|
181
|
+
|
182
|
+
@extend %arrow--far;
|
183
|
+
|
184
|
+
&:before{
|
185
|
+
border-left-color:$border-color!important;
|
186
|
+
}
|
187
|
+
|
188
|
+
&:after{
|
189
|
+
border-left-color:$arrow-color!important;
|
190
|
+
}
|
191
|
+
|
192
|
+
@if $arrow-location == top{
|
193
|
+
@extend %arrow--upper;
|
194
|
+
}
|
195
|
+
|
196
|
+
@if $arrow-location == center{
|
197
|
+
@extend %arrow--middle;
|
198
|
+
}
|
199
|
+
|
200
|
+
@if $arrow-location == bottom{
|
201
|
+
@extend %arrow--lower;
|
202
|
+
}
|
203
|
+
|
204
|
+
}
|
205
|
+
|
206
|
+
@if $arrow-edge == bottom{
|
207
|
+
|
208
|
+
@extend %arrow--bottom;
|
209
|
+
|
210
|
+
&:before{
|
211
|
+
border-top-color:$border-color!important;
|
212
|
+
}
|
213
|
+
|
214
|
+
&:after{
|
215
|
+
border-top-color:$arrow-color!important;
|
216
|
+
}
|
217
|
+
|
218
|
+
@if $arrow-location == left{
|
219
|
+
@extend %arrow--left;
|
220
|
+
}
|
221
|
+
|
222
|
+
@if $arrow-location == center{
|
223
|
+
@extend %arrow--center;
|
224
|
+
}
|
225
|
+
|
226
|
+
@if $arrow-location == right{
|
227
|
+
@extend %arrow--right;
|
228
|
+
}
|
229
|
+
|
230
|
+
}
|
231
|
+
|
232
|
+
@if $arrow-edge == left{
|
233
|
+
|
234
|
+
@extend %arrow--near;
|
235
|
+
|
236
|
+
&:before{
|
237
|
+
border-right-color:$border-color!important;
|
238
|
+
}
|
239
|
+
|
240
|
+
&:after{
|
241
|
+
border-right-color:$arrow-color!important;
|
242
|
+
}
|
243
|
+
|
244
|
+
@if $arrow-location == top{
|
245
|
+
@extend %arrow--upper;
|
246
|
+
}
|
247
|
+
|
248
|
+
@if $arrow-location == center{
|
249
|
+
@extend %arrow--middle;
|
250
|
+
}
|
251
|
+
|
252
|
+
@if $arrow-location == bottom{
|
253
|
+
@extend %arrow--lower;
|
254
|
+
}
|
255
|
+
|
256
|
+
}
|
257
|
+
|
258
|
+
}
|
259
|
+
|
260
|
+
|
261
|
+
/**
|
262
|
+
* Media query mixin.
|
263
|
+
*
|
264
|
+
* It’s not great practice to define solid breakpoints up-front, preferring to
|
265
|
+
* modify your design when it needs it, rather than assuming you’ll want a
|
266
|
+
* change at ‘mobile’. However, as inuit.css is required to take a hands off
|
267
|
+
* approach to design decisions, this is the closest we can get to baked-in
|
268
|
+
* responsiveness. It’s flexible enough to allow you to set your own breakpoints
|
269
|
+
* but solid enough to be frameworkified.
|
270
|
+
*
|
271
|
+
* We define some broad breakpoints in our vars file that are picked up here
|
272
|
+
* for use in a simple media query mixin. Our options are:
|
273
|
+
*
|
274
|
+
* palm
|
275
|
+
* lap
|
276
|
+
* lap-and-up
|
277
|
+
* portable
|
278
|
+
* desk
|
279
|
+
* desk-wide
|
280
|
+
*
|
281
|
+
* Not using a media query will, naturally, serve styles to all devices.
|
282
|
+
*
|
283
|
+
* `@include media-query(palm){ [styles here] }`
|
284
|
+
*
|
285
|
+
* We work out your end points for you:
|
286
|
+
*/
|
287
|
+
$palm-end: $lap-start - 1px;
|
288
|
+
$lap-end: $desk-start - 1px;
|
289
|
+
|
290
|
+
@mixin media-query($media-query){
|
291
|
+
|
292
|
+
@if $media-query == palm{
|
293
|
+
|
294
|
+
@media only screen and (max-width:$palm-end) { @content; }
|
295
|
+
|
296
|
+
}
|
297
|
+
|
298
|
+
@if $media-query == lap{
|
299
|
+
|
300
|
+
@media only screen and (min-width:$lap-start) and (max-width:$lap-end) { @content; }
|
301
|
+
|
302
|
+
}
|
303
|
+
|
304
|
+
@if $media-query == lap-and-up{
|
305
|
+
|
306
|
+
@media only screen and (min-width:$lap-start) { @content; }
|
307
|
+
|
308
|
+
}
|
309
|
+
|
310
|
+
@if $media-query == portable{
|
311
|
+
|
312
|
+
@media only screen and (max-width:$lap-end) { @content; }
|
313
|
+
|
314
|
+
}
|
315
|
+
|
316
|
+
@if $media-query == desk{
|
317
|
+
|
318
|
+
@media only screen and (min-width:$desk-start) { @content; }
|
319
|
+
|
320
|
+
}
|
321
|
+
|
322
|
+
@if $media-query == desk-wide{
|
323
|
+
|
324
|
+
@media only screen and (min-width: $desk-wide-start) { @content; }
|
325
|
+
|
326
|
+
}
|
327
|
+
|
328
|
+
}
|