cosy-jekyll-theme 1.0.5 → 1.0.6

Sign up to get free protection for your applications and to get access to all the features.
data/_sass/_mixins.scss CHANGED
@@ -65,9 +65,9 @@
65
65
  line-height: 0 + round($doc-line-height / $size*10000) / 10000;
66
66
  }
67
67
 
68
- @mixin text-overflow() {
68
+ @mixin text-overflow($type: ellipsis) {
69
69
  overflow: hidden;
70
- text-overflow: ellipsis;
70
+ text-overflow: $type;
71
71
  white-space: nowrap;
72
72
  }
73
73
 
@@ -76,42 +76,42 @@
76
76
 
77
77
  @mixin horizontal($startColor : $white, $endColor : $lightergrey) {
78
78
  background-color: $endColor;
79
- background-image : -webkit-gradient(linear, 0 0, 100% 0, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
80
- background-image : -webkit-linear-gradient(left, $startColor, $endColor); // Safari 5.1+, Chrome 10+
81
- background-image : -moz-linear-gradient(left, $startColor, $endColor); // FF 3.6+
82
- background-image : -ms-linear-gradient(left, $startColor, $endColor); // IE10
83
- background-image : -o-linear-gradient(left, $startColor, $endColor); // Opera 11.10
84
- background-image : linear-gradient(left, $startColor, $endColor); // W3C
85
- background-repeat : repeat-x;
79
+ background-image: -webkit-gradient(linear, 0 0, 100% 0, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
80
+ background-image: -webkit-linear-gradient(left, $startColor, $endColor); // Safari 5.1+, Chrome 10+
81
+ background-image: -moz-linear-gradient(left, $startColor, $endColor); // FF 3.6+
82
+ background-image: -ms-linear-gradient(left, $startColor, $endColor); // IE10
83
+ background-image: -o-linear-gradient(left, $startColor, $endColor); // Opera 11.10
84
+ background-image: linear-gradient(left, $startColor, $endColor); // W3C
85
+ background-repeat: repeat-x;
86
86
  }
87
87
 
88
88
  @mixin vertical($startColor : $white, $endColor: $lightergrey) {
89
- background-image : -webkit-gradient(linear, 0 0, 0 100%, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
90
- background-image : -webkit-linear-gradient(top, $startColor, $endColor); // Safari 5.1+, Chrome 10+
91
- background-color : $endColor;
92
- background-image : -moz-linear-gradient(top, $startColor, $endColor); // FF 3.6+
93
- background-image : -ms-linear-gradient(top, $startColor, $endColor); // IE10
94
- background-image : -o-linear-gradient(top, $startColor, $endColor); // Opera 11.10
95
- background-image : linear-gradient(top, $startColor, $endColor); // W3C
96
- background-repeat : repeat-x;
89
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
90
+ background-image: -webkit-linear-gradient(top, $startColor, $endColor); // Safari 5.1+, Chrome 10+
91
+ background-color: $endColor;
92
+ background-image: -moz-linear-gradient(top, $startColor, $endColor); // FF 3.6+
93
+ background-image: -ms-linear-gradient(top, $startColor, $endColor); // IE10
94
+ background-image: -o-linear-gradient(top, $startColor, $endColor); // Opera 11.10
95
+ background-image: linear-gradient(top, $startColor, $endColor); // W3C
96
+ background-repeat: repeat-x;
97
97
  }
98
98
 
99
99
  @mixin directional($startColor : $white, $endColor : $lightergrey, $deg : 45deg) {
100
- background-color : $endColor;
101
- background-image : -moz-linear-gradient($deg, $startColor, $endColor); // FF 3.6+
102
- background-image : -ms-linear-gradient($deg, $startColor, $endColor); // IE10
103
- background-image : -webkit-linear-gradient($deg, $startColor, $endColor); // Safari 5.1+, Chrome 10+
104
- background-image : -o-linear-gradient($deg, $startColor, $endColor); // Opera 11.10
105
- background-image : linear-gradient($deg, $startColor, $endColor); // W3C
106
- background-repeat : repeat-x;
100
+ background-color: $endColor;
101
+ background-image: -moz-linear-gradient($deg, $startColor, $endColor); // FF 3.6+
102
+ background-image: -ms-linear-gradient($deg, $startColor, $endColor); // IE10
103
+ background-image: -webkit-linear-gradient($deg, $startColor, $endColor); // Safari 5.1+, Chrome 10+
104
+ background-image: -o-linear-gradient($deg, $startColor, $endColor); // Opera 11.10
105
+ background-image: linear-gradient($deg, $startColor, $endColor); // W3C
106
+ background-repeat: repeat-x;
107
107
  }
108
108
 
109
109
  // .bordered(COLOR, COLOR, COLOR, COLOR);
110
110
  @mixin bordered($top-color: #eee, $right-color: #eee, $bottom-color: #eee, $left-color: #eee) {
111
- border-top : solid 1px $top-color;
112
- border-left : solid 1px $left-color;
113
- border-right : solid 1px $right-color;
114
- border-bottom : solid 1px $bottom-color;
111
+ border-top: solid 1px $top-color;
112
+ border-left: solid 1px $left-color;
113
+ border-right: solid 1px $right-color;
114
+ border-bottom: solid 1px $bottom-color;
115
115
  }
116
116
 
117
117
  // ROUND CORNERS
@@ -119,47 +119,47 @@
119
119
 
120
120
  // .rounded(VALUE);
121
121
  @mixin rounded($radius:4px) {
122
- -webkit-border-radius : $radius;
123
- -moz-border-radius : $radius;
124
- border-radius : $radius;
122
+ -webkit-border-radius: $radius;
123
+ -moz-border-radius: $radius;
124
+ border-radius: $radius;
125
125
  }
126
126
 
127
127
  // .border-radius(VALUE,VALUE,VALUE,VALUE);
128
128
  @mixin border-radius($topright: 0, $bottomright: 0, $bottomleft: 0, $topleft: 0) {
129
- -webkit-border-top-right-radius : $topright;
130
- -webkit-border-bottom-right-radius : $bottomright;
131
- -webkit-border-bottom-left-radius : $bottomleft;
132
- -webkit-border-top-left-radius : $topleft;
133
- -moz-border-radius-topright : $topright;
134
- -moz-border-radius-bottomright : $bottomright;
135
- -moz-border-radius-bottomleft : $bottomleft;
136
- -moz-border-radius-topleft : $topleft;
137
- border-top-right-radius : $topright;
138
- border-bottom-right-radius : $bottomright;
139
- border-bottom-left-radius : $bottomleft;
140
- border-top-left-radius : $topleft;
141
- -webkit-background-clip : padding-box;
142
- -moz-background-clip : padding;
143
- background-clip : padding-box;
129
+ -webkit-border-top-right-radius: $topright;
130
+ -webkit-border-bottom-right-radius: $bottomright;
131
+ -webkit-border-bottom-left-radius: $bottomleft;
132
+ -webkit-border-top-left-radius: $topleft;
133
+ -moz-border-radius-topright: $topright;
134
+ -moz-border-radius-bottomright: $bottomright;
135
+ -moz-border-radius-bottomleft: $bottomleft;
136
+ -moz-border-radius-topleft: $topleft;
137
+ border-top-right-radius: $topright;
138
+ border-bottom-right-radius: $bottomright;
139
+ border-bottom-left-radius: $bottomleft;
140
+ border-top-left-radius: $topleft;
141
+ -webkit-background-clip: padding-box;
142
+ -moz-background-clip: padding;
143
+ background-clip: padding-box;
144
144
  }
145
145
 
146
146
  // .box-shadow(HORIZONTAL VERTICAL BLUR COLOR))
147
147
  @mixin box-shadow($shadow: 0 1px 3px rgba(0,0,0,.25)) {
148
- -webkit-box-shadow : $shadow;
149
- -moz-box-shadow : $shadow;
150
- box-shadow : $shadow;
148
+ -webkit-box-shadow: $shadow;
149
+ -moz-box-shadow: $shadow;
150
+ box-shadow: $shadow;
151
151
  }
152
152
 
153
153
  // .drop-shadow(HORIZONTAL, VERTICAL, BLUR, ALPHA);
154
154
  @mixin drop-shadow($x-axis: 0, $y-axis: 1px, $blur: 2px, $alpha: 0.1) {
155
- -webkit-box-shadow : $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
156
- -moz-box-shadow : $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
157
- box-shadow : $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
155
+ -webkit-box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
156
+ -moz-box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
157
+ box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
158
158
  }
159
159
 
160
160
  // .text-shadow();
161
161
  @mixin text-shadow($shadow: 0 2px 3px rgba(0,0,0,.25)) {
162
- text-shadow : $shadow;
162
+ text-shadow: $shadow;
163
163
  }
164
164
 
165
165
  // TRANSFORMATIONS
@@ -167,61 +167,69 @@
167
167
 
168
168
  // .rotate(VALUEdeg);
169
169
  @mixin rotate($deg) {
170
- -webkit-transform : rotate($deg);
171
- -moz-transform : rotate($deg);
172
- -ms-transform : rotate($deg);
173
- -o-transform : rotate($deg);
174
- transform : rotate($deg);
170
+ -webkit-transform: rotate($deg);
171
+ -moz-transform: rotate($deg);
172
+ -ms-transform: rotate($deg);
173
+ -o-transform: rotate($deg);
174
+ transform: rotate($deg);
175
175
  }
176
176
 
177
177
  // .scale(VALUE);
178
178
  @mixin scale($ratio) {
179
- -webkit-transform : scale($ratio);
180
- -moz-transform : scale($ratio);
181
- -ms-transform : scale($ratio);
182
- -o-transform : scale($ratio);
183
- transform : scale($ratio);
179
+ -webkit-transform: scale($ratio);
180
+ -moz-transform: scale($ratio);
181
+ -ms-transform: scale($ratio);
182
+ -o-transform: scale($ratio);
183
+ transform: scale($ratio);
184
+ }
185
+
186
+ @mixin transform($value) {
187
+ -webkit-transform: $value;
188
+ -moz-transform: $value;
189
+ -ms-transform: $value;
190
+ -o-transform: $value;
191
+ transform: $value;
184
192
  }
185
193
 
186
194
  // .skew(VALUE, VALUE);
187
195
  @mixin skew($x: 0, $y: 0) {
188
- -webkit-transform : skew($x, $y);
189
- -moz-transform : skew($x, $y);
190
- -ms-transform : skew($x, $y);
191
- -o-transform : skew($x, $y);
192
- transform : skew($x, $y);
196
+ -webkit-transform: skew($x, $y);
197
+ -moz-transform: skew($x, $y);
198
+ -ms-transform: skew($x, $y);
199
+ -o-transform: skew($x, $y);
200
+ transform: skew($x, $y);
193
201
  }
194
202
 
195
203
  // .transition(PROPERTY DURATION DELAY(OPTIONAL) TIMING-FINCTION);
196
204
  @mixin transition($transition) {
197
- -webkit-transition : $transition;
198
- -moz-transition : $transition;
199
- -ms-transition : $transition;
200
- -o-transition : $transition;
201
- transition : $transition;
205
+ -webkit-transition: $transition;
206
+ -moz-transition: $transition;
207
+ -ms-transition: $transition;
208
+ -o-transition: $transition;
209
+ transition: $transition;
202
210
  }
203
211
 
204
212
  // .translate(VALUE, VALUE)
205
213
  @mixin translate($x: 0, $y: 0) {
206
- -webkit-transform : translate($x, $y);
207
- -moz-transform : translate($x, $y);
208
- -ms-transform : translate($x, $y);
209
- -o-transform : translate($x, $y);
210
- transform : translate($x, $y);
214
+ -webkit-transform: translate($x, $y);
215
+ -moz-transform: translate($x, $y);
216
+ -ms-transform: translate($x, $y);
217
+ -o-transform: translate($x, $y);
218
+ transform: translate($x, $y);
211
219
  }
212
220
 
213
221
  @mixin translate3d($x: 0, $y: 0, $z: 0) {
214
- -webkit-transform : translate($x, $y, $z);
215
- -moz-transform : translate($x, $y, $z);
216
- -ms-transform : translate($x, $y, $z);
217
- -o-transform : translate($x, $y, $z);
218
- transform : translate($x, $y, $z);
222
+ -webkit-transform: translate($x, $y, $z);
223
+ -moz-transform: translate($x, $y, $z);
224
+ -ms-transform: translate($x, $y, $z);
225
+ -o-transform: translate($x, $y, $z);
226
+ transform: translate($x, $y, $z);
219
227
  }
220
228
 
221
229
  @mixin animation($name, $duration: 300ms, $delay: 0, $ease: ease) {
222
230
  -webkit-animation: $name $duration $delay $ease;
223
- -moz-animation: $name $duration $delay $ease;
224
- -ms-animation: $name $duration $delay $ease;
231
+ -moz-animation: $name $duration $delay $ease;
232
+ -ms-animation: $name $duration $delay $ease;
225
233
  }
226
234
 
227
235
  // BACKGROUND
@@ -229,44 +237,45 @@
229
237
 
230
238
  // .background-alpha(VALUE VALUE);
231
239
  @mixin background-alpha($color: $white, $alpha: 1) {
232
- background-color : hsla(hue($color), saturation($color), lightness($color), $alpha);
240
+ background-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
233
241
  }
234
242
 
235
243
  // .background-size(VALUE VALUE);
236
- @mixin background-size($size){
237
- -webkit-background-size : $size;
238
- -moz-background-size : $size;
239
- -o-background-size : $size;
240
- background-size : $size;
244
+ @mixin background-size($size) {
245
+ -webkit-background-size: $size;
246
+ -moz-background-size: $size;
247
+ -o-background-size: $size;
248
+ background-size: $size;
241
249
  }
242
250
 
243
251
  // .background-clip(VALUE); (border-box, padding-box, content-box)
244
252
  @mixin background-clip($clip) {
245
- -webkit-background-clip : $clip;
246
- -moz-background-clip : $clip;
247
- background-clip : $clip;
253
+ -webkit-background-clip: $clip;
254
+ -moz-background-clip: $clip;
255
+ background-clip: $clip;
248
256
  }
249
257
 
250
258
  // .box-sizing(VALUE); (border-box, padding-box, content-box)
251
259
  @mixin box-sizing($boxsize: border-box) {
252
- -webkit-box-sizing : $boxsize;
253
- -moz-box-sizing : $boxsize;
254
- -ms-box-sizing : $boxsize;
255
- box-sizing : $boxsize;
260
+ -webkit-box-sizing: $boxsize;
261
+ -moz-box-sizing: $boxsize;
262
+ -ms-box-sizing: $boxsize;
263
+ box-sizing: $boxsize;
256
264
  }
257
265
 
258
266
  // For image replacement
259
267
  @mixin hide-text() {
260
- text-indent : 100%;
261
- white-space : nowrap;
262
- overflow : hidden;
268
+ text-indent: 100%;
269
+ white-space: nowrap;
270
+ overflow: hidden;
263
271
  }
264
272
 
265
273
  // Hide from visual and speaking browsers
266
274
  @mixin hidden() {
267
- display : none !important;
268
- visibility : hidden;
275
+ display: none !important;
276
+ visibility: hidden;
269
277
  }
278
+
270
279
  .hidden {
271
280
  display: none;
272
281
  visibility: hidden;
@@ -274,43 +283,43 @@
274
283
 
275
284
  // Hide but maintain layout
276
285
  @mixin invisible() {
277
- visibility : hidden;
286
+ visibility: hidden;
278
287
  }
279
288
 
280
289
  // .resize(VALUE) (none, both, horizontal, vertical, inherit)
281
290
  @mixin resize($direction: both) {
282
- resize : $direction;
283
- overflow : auto;
291
+ resize: $direction;
292
+ overflow: auto;
284
293
  }
285
294
 
286
295
  // .userselect(VALUE) (all, element, none, text)
287
296
  @mixin user-select($select) {
288
- -webkit-user-select : $select;
289
- -moz-user-select : $select;
290
- -o-user-select : $select;
291
- user-select : $select;
297
+ -webkit-user-select: $select;
298
+ -moz-user-select: $select;
299
+ -o-user-select: $select;
300
+ user-select: $select;
292
301
  }
293
302
 
294
303
  // Hidden but available to speaking browsers
295
304
  @mixin visuallyhidden() {
296
- overflow : hidden;
297
- position : absolute;
298
- clip : rect(0 0 0 0);
299
- height : 1px;
300
- width : 1px;
301
- margin : -1px;
302
- padding : 0;
303
- border : 0;
305
+ overflow: hidden;
306
+ position: absolute;
307
+ clip: rect(0 0 0 0);
308
+ height: 1px;
309
+ width: 1px;
310
+ margin: -1px;
311
+ padding: 0;
312
+ border: 0;
304
313
  }
305
314
 
306
315
  // Make visuallyhidden focusable with a keyboard
307
316
  .visuallyhidden.focusable:active,
308
317
  .visuallyhidden.focusable:focus {
309
- position : static;
310
- clip : auto;
311
- height : auto;
312
- width : auto;
313
- margin : 0;
318
+ position: static;
319
+ clip: auto;
320
+ height: auto;
321
+ width: auto;
322
+ margin: 0;
314
323
  overflow: visible;
315
324
  }
316
325
 
@@ -359,7 +368,6 @@
359
368
  align-items: $value;
360
369
  }
361
370
 
362
-
363
371
  @mixin flex-direction($value: row) {
364
372
  @if $value == row-reverse {
365
373
  -webkit-box-direction: reverse;