ratchet_design 0.1.19 → 0.1.20

Sign up to get free protection for your applications and to get access to all the features.
Files changed (102) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/javascripts/ratchet/_esvg.js +72 -0
  3. data/app/assets/javascripts/ratchet/_icons.js +19 -0
  4. data/app/assets/javascripts/ratchet/_topology.js +19 -0
  5. data/app/assets/javascripts/ratchet/base/form.js +4 -4
  6. data/app/assets/javascripts/ratchet/core.js +15 -8
  7. data/app/assets/javascripts/ratchet/enhancement/{_collapse.js → collapse.js} +3 -3
  8. data/app/assets/javascripts/ratchet/enhancement/lightbox.js +52 -118
  9. data/app/assets/javascripts/ratchet/enhancement/modal.js +185 -0
  10. data/app/assets/javascripts/ratchet/enhancement/smooth-scroll.js +21 -0
  11. data/app/assets/javascripts/ratchet/utility/once.js +42 -0
  12. data/app/assets/stylesheets/ratchet/_colors.yml +54 -0
  13. data/app/assets/stylesheets/ratchet/_core.scss +8 -1
  14. data/app/assets/stylesheets/ratchet/base/_button.scss +22 -31
  15. data/app/assets/stylesheets/ratchet/base/_document.scss +66 -53
  16. data/app/assets/stylesheets/ratchet/base/_form.scss +0 -1
  17. data/app/assets/stylesheets/ratchet/base/_list.scss +6 -15
  18. data/app/assets/stylesheets/ratchet/base/_media.scss +22 -6
  19. data/app/assets/stylesheets/ratchet/base/_section.scss +8 -257
  20. data/app/assets/stylesheets/ratchet/base/_slider.scss +388 -0
  21. data/app/assets/stylesheets/ratchet/base/_table.scss +1 -2
  22. data/app/assets/stylesheets/ratchet/base/_text.scss +13 -29
  23. data/app/assets/stylesheets/ratchet/enhancement/_deployments.scss +26 -0
  24. data/app/assets/stylesheets/ratchet/enhancement/_hero.scss +1 -1
  25. data/app/assets/stylesheets/ratchet/enhancement/_lightbox.scss +35 -76
  26. data/app/assets/stylesheets/ratchet/enhancement/_modal.scss +125 -0
  27. data/app/assets/stylesheets/ratchet/utility/_animations.scss +8 -0
  28. data/app/assets/stylesheets/ratchet/utility/_color.scss +25 -105
  29. data/app/assets/stylesheets/ratchet/utility/_global.scss +30 -24
  30. data/app/assets/stylesheets/ratchet/utility/_grid.scss +152 -15
  31. data/app/assets/svgs/ratchet/_icons/backup.svg +9 -0
  32. data/app/assets/svgs/ratchet/_icons/block.svg +7 -0
  33. data/app/assets/svgs/ratchet/_icons/compose-logomark.svg +8 -0
  34. data/app/assets/svgs/ratchet/_icons/connecting-in.svg +46 -0
  35. data/app/assets/svgs/ratchet/_icons/connecting-out.svg +33 -0
  36. data/app/assets/svgs/ratchet/_icons/customer-buffer.svg +28 -0
  37. data/app/assets/svgs/ratchet/_icons/customer-citrix.svg +12 -0
  38. data/app/assets/svgs/ratchet/_icons/customer-guardian.svg +31 -0
  39. data/app/assets/svgs/ratchet/_icons/customer-roximity.svg +16 -0
  40. data/app/assets/svgs/ratchet/_icons/customer-upworthy.svg +13 -0
  41. data/app/assets/svgs/ratchet/_icons/db-money.svg +31 -0
  42. data/app/assets/svgs/ratchet/_icons/deployment.svg +1 -0
  43. data/app/assets/svgs/ratchet/{facebook.svg → _icons/facebook.svg} +0 -0
  44. data/app/assets/svgs/ratchet/_icons/gear.svg +12 -0
  45. data/app/assets/svgs/ratchet/{github.svg → _icons/github.svg} +0 -0
  46. data/app/assets/svgs/ratchet/{google-plus.svg → _icons/google-plus.svg} +0 -0
  47. data/app/assets/svgs/ratchet/{ibm.svg → _icons/ibm.svg} +0 -0
  48. data/app/assets/svgs/ratchet/{inbox.svg → _icons/inbox.svg} +0 -0
  49. data/app/assets/svgs/ratchet/_icons/index.svg +3 -0
  50. data/app/assets/svgs/ratchet/_icons/keylock.svg +8 -0
  51. data/app/assets/svgs/ratchet/_icons/life-preserver.svg +17 -0
  52. data/app/assets/svgs/ratchet/{linkedin.svg → _icons/linkedin.svg} +0 -0
  53. data/app/assets/svgs/ratchet/_icons/metrics.svg +7 -0
  54. data/app/assets/svgs/ratchet/_icons/money-stack.svg +60 -0
  55. data/app/assets/svgs/ratchet/_icons/notepad.svg +12 -0
  56. data/app/assets/svgs/ratchet/_icons/notepad2.svg +14 -0
  57. data/app/assets/svgs/ratchet/_icons/one-click.svg +6 -0
  58. data/app/assets/svgs/ratchet/{ratchet.svg → _icons/ratchet.svg} +0 -0
  59. data/app/assets/svgs/ratchet/_icons/reliability.svg +12 -0
  60. data/app/assets/svgs/ratchet/_icons/safe.svg +26 -0
  61. data/app/assets/svgs/ratchet/_icons/scaling.svg +16 -0
  62. data/app/assets/svgs/ratchet/{search.svg → _icons/search.svg} +0 -0
  63. data/app/assets/svgs/ratchet/{subscribe.svg → _icons/subscribe.svg} +0 -0
  64. data/app/assets/svgs/ratchet/{twitter.svg → _icons/twitter.svg} +0 -0
  65. data/app/assets/svgs/ratchet/{y-combinator.svg → _icons/y-combinator.svg} +0 -0
  66. data/app/assets/svgs/ratchet/_icons/youtube.svg +3 -0
  67. data/app/assets/svgs/ratchet/_topology/arbiter.svg +1 -0
  68. data/app/assets/svgs/ratchet/_topology/backup.svg +1 -0
  69. data/app/assets/svgs/ratchet/_topology/config.svg +1 -0
  70. data/app/assets/svgs/ratchet/_topology/haproxy-2.svg +1 -0
  71. data/app/assets/svgs/ratchet/_topology/haproxy-storage.svg +1 -0
  72. data/app/assets/svgs/ratchet/_topology/haproxy.svg +1 -0
  73. data/app/assets/svgs/ratchet/_topology/memory.svg +1 -0
  74. data/app/assets/svgs/ratchet/_topology/portal-2.svg +1 -0
  75. data/app/assets/svgs/ratchet/_topology/portal.svg +1 -0
  76. data/app/assets/svgs/ratchet/_topology/sentinel-memory.svg +1 -0
  77. data/app/assets/svgs/ratchet/_topology/sentinel.svg +1 -0
  78. data/app/assets/svgs/ratchet/_topology/storage.svg +1 -0
  79. data/app/helpers/ratchet/application_helper.rb +10 -2
  80. data/app/helpers/ratchet/form_helper.rb +84 -1
  81. data/app/helpers/ratchet/icon_helper.rb +113 -0
  82. data/app/helpers/ratchet/pricing_helper.rb +133 -0
  83. data/app/helpers/ratchet/toggle_nav_helper.rb +101 -0
  84. data/app/views/layouts/ratchet/default.html.slim +3 -3
  85. data/app/views/shared/ratchet/_defs.html.slim +30 -88
  86. data/app/views/shared/ratchet/_fonts.html.slim +88 -0
  87. data/app/views/shared/ratchet/_footer.html.slim +1 -1
  88. data/app/views/shared/ratchet/_header.html.slim +5 -5
  89. data/app/views/shared/ratchet/_icons.html.slim +190 -5
  90. data/lib/ratchet_design/config_data.rb +29 -0
  91. data/lib/ratchet_design/version.rb +1 -1
  92. data/lib/ratchet_design.rb +27 -10
  93. data/public/core-0.1.20.js +22627 -0
  94. data/public/{fonts-woff-0.1.19.css → fonts-woff-0.1.20.css} +0 -0
  95. data/public/{fonts-woff2-0.1.19.css → fonts-woff2-0.1.20.css} +0 -0
  96. metadata +84 -22
  97. data/app/assets/javascripts/ratchet/_svg.js +0 -55
  98. data/public/core-0.1.19.js +0 -138
  99. data/public/core-0.1.19.js.gz +0 -0
  100. data/public/core-0.1.19.map.json +0 -1
  101. data/public/fonts-woff-0.1.19.css.gz +0 -0
  102. data/public/fonts-woff2-0.1.19.css.gz +0 -0
@@ -0,0 +1,388 @@
1
+ $slider-track: $isabella;
2
+ $slider-track-line: $dolphin;
3
+ $slider-mark: #fff;
4
+ $slider-active: $cerulean;//hsl(203, 47%, 65%);
5
+
6
+ @mixin slider-fill-theme($color, $class: 'fill', $index: '') {
7
+ $threshold: 8;
8
+
9
+ @if $index == '' {
10
+ $index: 'data-index';
11
+ } @else {
12
+ $index: 'data-index="#{$index}"';
13
+ }
14
+
15
+ .slider-input.#{$class} {
16
+ ~ .slider-fills {
17
+ .slider-fill[#{$index}].filled {
18
+ background: $color;
19
+ border-right-color: darken($color, 12);
20
+ &:first-child {
21
+ border-left-color: darken($color, 12);
22
+ }
23
+ &:before {
24
+ box-shadow: darken($color, 12) 0 0 0 1px;
25
+ }
26
+ }
27
+ }
28
+
29
+ ~ .slider-track {
30
+ .filled .slider-segment-mark[#{$index}] {
31
+ &:before {
32
+ border-color: $color;
33
+ box-shadow: darken($color, 12) 0 0 0 1px inset;
34
+ }
35
+ &:after {
36
+ box-shadow: darken($color, 12) 0 0 0 1px;
37
+ }
38
+ }
39
+ }
40
+ }
41
+ }
42
+
43
+
44
+ @mixin reset-slider {
45
+ -webkit-appearance: none;
46
+ -moz-appearance: none;
47
+ width: 100%;
48
+ margin: 0;
49
+ cursor: pointer;
50
+ &:focus { outline: none; }
51
+ &::-webkit-slider-thumb { -webkit-appearance: none; }
52
+ &::-moz-slider-thumb { -moz-appearance: none; }
53
+ &::-ms-track {
54
+ width: 100%;
55
+ cursor: pointer;
56
+ background: transparent;
57
+ border-color: transparent;
58
+ color: transparent;
59
+ }
60
+ &::-moz-focus-outer {
61
+ border: 0;
62
+ }
63
+ &::-moz-range-track {
64
+ border: inherit;
65
+ background: transparent;
66
+ }
67
+ }
68
+
69
+ @mixin slider-thumb {
70
+ &::-moz-range-thumb { @content; }
71
+ &::-webkit-slider-thumb { @content; }
72
+ &::-ms-thumb { @content; }
73
+ }
74
+
75
+ @mixin slider-track {
76
+ @content;
77
+ &::-moz-slider-track {
78
+ @content;
79
+ }
80
+ &::-ms-track {
81
+ @content;
82
+ }
83
+ }
84
+
85
+ .empty-label[data-slider-label] {
86
+ display: none;
87
+ }
88
+
89
+ input[type=range] {
90
+ @include reset-slider;
91
+ position: relative;
92
+ z-index: 4;
93
+
94
+ @include slider-thumb {
95
+ box-shadow: rgba(#000, .4) 0 0 0 1px, rgba(#000, .4) 0 1px 1px inset;
96
+ border: 6px solid #fff;
97
+ background: $slider-track-line;
98
+ box-sizing: border-box;
99
+ height: 19px;
100
+ width: 19px;
101
+ border-radius: 100%;
102
+ position: relative;
103
+ top: 1px;
104
+ transition: all .15s ease-in;
105
+ &:after {
106
+ box-sizing: border-box;
107
+ content: "";
108
+ position: absolute;
109
+ left: -15px; right: -15px; top: -15px; bottom: -15px;
110
+
111
+ }
112
+ &:active {
113
+ background: $slider-active;//#409bd9;
114
+ box-shadow: 0 0 2px 2px $slider-active, rgba(#000, .4) 0 1px 1px inset;
115
+ }
116
+ }
117
+
118
+ &:focus {
119
+ @include slider-thumb {
120
+ background: $slider-active;//#409bd9;
121
+ box-shadow: 0 0 2px 2px $slider-active, rgba(#000, .4) 0 1px 1px inset;
122
+ }
123
+ }
124
+
125
+ @include slider-track {
126
+ height: 16px;
127
+ background: transparent;
128
+
129
+ &:after {
130
+ position: absolute;
131
+ content: "";
132
+ left: 4px; right: 4px; top: 6px;
133
+ height: 5px;
134
+ background: $slider-track;
135
+ z-index: -1;
136
+ border-radius: 4px;
137
+ box-shadow: $slider-track-line 0 0 0 1px;
138
+ }
139
+ }
140
+
141
+ &.slider-input {
142
+ margin: 0;
143
+
144
+ @include slider-track {
145
+ &:after {
146
+ display: none;
147
+ }
148
+ }
149
+ }
150
+ }
151
+
152
+ input::-moz-focus-inner {
153
+ border: 0;
154
+ }
155
+
156
+ .slider-container {
157
+ position: relative;
158
+ padding: .5em 0;
159
+
160
+ @include at-least(400px){
161
+ display: flex;
162
+ flex-flow: row nowrap;
163
+ align-items: center;
164
+ &.with-label {
165
+ max-width: 320px;
166
+ }
167
+ }
168
+
169
+ &.line-labels {
170
+ padding: vr(1) 0 0;
171
+ }
172
+ }
173
+
174
+ .slider-input-container {
175
+ position: relative;
176
+ flex: 1 0 auto;
177
+ margin: .6em 0;
178
+ }
179
+
180
+ .slider-track {
181
+ height: 0px;
182
+ display: flex;
183
+ align-items: center;
184
+ flex-flow: row wrap;
185
+ justify-content: space-between;
186
+ margin: 0 10px 0 9px;
187
+ position: relative;
188
+ top: -12px;
189
+ }
190
+
191
+ .slider-segment {
192
+ position: relative;
193
+ }
194
+
195
+ .slider-segment-mark {
196
+ &:before, &:after {
197
+ position: absolute;
198
+ content: "";
199
+ width: 13px;
200
+ height: 13px;
201
+ top: -13px;
202
+ left: -5px;
203
+ box-sizing: border-box;
204
+ border-radius: 100%;
205
+ }
206
+ &:before {
207
+ background: $slider-mark;
208
+ border: $slider-track 3px solid;
209
+ box-shadow: $slider-track-line 0 0 0 1px inset;
210
+ z-index: 3;
211
+ }
212
+ &:after {
213
+ box-shadow: $slider-track-line 0 0 0 1px;
214
+ z-index: 0;
215
+ }
216
+ }
217
+
218
+ .slider-fills {
219
+ position: absolute;
220
+ left: 9px;
221
+ right: 10px;
222
+ top: 9px;
223
+ height: 5px;
224
+ z-index: 1;
225
+ display: flex;
226
+ }
227
+
228
+ .slider-fill {
229
+ flex-grow: 1;
230
+ height: 5px;
231
+ position: relative;
232
+
233
+ box-sizing: border-box;
234
+ background: $slider-track;
235
+ border-left: 1px solid transparent;
236
+ border-right: 1px solid $slider-track-line;
237
+
238
+ &:before {
239
+ content: "";
240
+ position: absolute;
241
+ top: 0px; left: 0px; right: 0px; bottom: 0px;
242
+ box-shadow: $slider-track-line 0 0 0 1px;
243
+ z-index: -1;
244
+ }
245
+
246
+ &:first-child {
247
+ border-left: 1px solid $slider-track-line;
248
+ &, &:before {
249
+ border-top-left-radius: 5px;
250
+ border-bottom-left-radius: 5px;
251
+ }
252
+ &:before { left: 0px; }
253
+ }
254
+
255
+ &:last-child {
256
+ &, &:before {
257
+ border-top-right-radius: 5px;
258
+ border-bottom-right-radius: 5px;
259
+ }
260
+ &:before { right: 0px; }
261
+ }
262
+
263
+ }
264
+
265
+ .slider-input.no-segments, .slider-input[max='100'] {
266
+ ~ .slider-fills .slider-fill { border-right: 0; }
267
+ }
268
+
269
+ .slider-line-label {
270
+ position: absolute;
271
+ white-space: nowrap;
272
+ font-size: 12px;
273
+ z-index: 3;
274
+ height: 1.25;
275
+ top: -39px;
276
+ right: -30px;
277
+ left: -28px;
278
+ text-align: center;
279
+ }
280
+
281
+ .slider-segment:first-child .slider-line-label {
282
+ left: -9px;
283
+ right: auto;
284
+ text-align: left;
285
+ &:before {
286
+ left: 8px;
287
+ }
288
+ }
289
+
290
+ .slider-segment:last-child .slider-line-label {
291
+ right: -11px;
292
+ left: auto;
293
+ text-align: right;
294
+ &:before {
295
+ right: 9px;
296
+ }
297
+ }
298
+
299
+ .slider-label {
300
+ background: $slider-mark;
301
+ border-radius: 3px;
302
+ box-shadow: $slider-track-line 0 0 0 1px;
303
+ font-size: 14px;
304
+ padding: 4px 8px;
305
+ position: relative;
306
+ text-align: center;
307
+
308
+ @include at-least(400px){
309
+ white-space: nowrap;
310
+ position: absolute;
311
+ top: 50%;
312
+ transform: translatey(-50%);
313
+ transform-style: preserve-3d;
314
+ &:after, &:before {
315
+ content: "";
316
+ }
317
+ }
318
+
319
+ &:after, &:before {
320
+ position: absolute;
321
+ width: 0;
322
+ height: 0;
323
+ top: 50%;
324
+ transform: translatey(-50%);
325
+ transform-style: preserve-3d;
326
+ border-top: 7px solid transparent;
327
+ border-bottom: 7px solid transparent;
328
+ }
329
+
330
+ > * + * {
331
+ &:before { content: " — " }
332
+
333
+ @include at-least(400px) {
334
+ display: block;
335
+ &:before { content: ""; }
336
+ }
337
+ }
338
+
339
+ [class*=big] {
340
+ font-size: 1.15em;
341
+ }
342
+
343
+ [class*=small] {
344
+ font-size: .8em;
345
+ }
346
+ }
347
+
348
+ [data-slider-label] {
349
+ &:after { content: attr(data-after); }
350
+ &:before { content: attr(data-before); }
351
+ }
352
+
353
+ .slider-label.align-right {
354
+ @include at-least(400px) {
355
+ margin-left: 10px;
356
+ left: 100%;
357
+ text-align: left;
358
+ }
359
+ &:before, &:after {
360
+ left: -7px;
361
+ border-right: 7px solid $slider-track-line;
362
+ }
363
+ &:after {
364
+ border-right-color: $slider-mark;
365
+ left: -6px;
366
+ }
367
+ }
368
+
369
+ .slider-label.align-left {
370
+ @include at-least(400px) {
371
+ margin-right: 10px;
372
+ right: 100%;
373
+ text-align: right;
374
+ }
375
+ &:before, &:after {
376
+ right: -7px;
377
+ border-top: 7px solid transparent;
378
+ border-left: 7px solid $slider-track-line;
379
+ border-bottom: 7px solid transparent;
380
+ }
381
+ &:after {
382
+ border-left-color: $slider-mark;
383
+ right: -6px;
384
+ }
385
+ }
386
+
387
+
388
+ @include slider-fill-theme($slider-active, 'fill');
@@ -22,7 +22,7 @@
22
22
  // Striped rows
23
23
  @mixin striped() {
24
24
  tbody tr:nth-child(2n+1) {
25
- background: lighten($alabaster, 5);
25
+ background: $smoke;
26
26
  }
27
27
  }
28
28
 
@@ -36,7 +36,6 @@
36
36
  @mixin keyed() {
37
37
  tbody tr > :first-child {
38
38
  font-weight: 700;
39
- color: $shark;
40
39
  white-space: nowrap;
41
40
  }
42
41
  }
@@ -1,9 +1,9 @@
1
1
  /* ========================================================================== *
2
- * a. Text module
2
+ * Text module
3
3
  * -------------------------------------------------------------------------- */
4
4
 
5
5
  /* ===================================== *
6
- * i. Utility
6
+ * Utility
7
7
  * ------------------------------------- */
8
8
 
9
9
  // Create an underlined link with cleared descenders
@@ -41,7 +41,7 @@
41
41
  }
42
42
 
43
43
  /* ===================================== *
44
- * ii. Common
44
+ * Common
45
45
  * ------------------------------------- */
46
46
 
47
47
  body,
@@ -53,7 +53,7 @@ textarea {
53
53
  }
54
54
 
55
55
  /* ===================================== *
56
- * iii. Heading
56
+ * Heading
57
57
  * ------------------------------------- */
58
58
 
59
59
  // 1.15 modular scale - http://www.modularscale.com/?18&px&1.15&web&text
@@ -105,7 +105,7 @@ h6 {
105
105
  }
106
106
 
107
107
  /* ===================================== *
108
- * iv. Paragraph
108
+ * Paragraph
109
109
  * ------------------------------------- */
110
110
 
111
111
  p {
@@ -119,7 +119,7 @@ article p a {
119
119
  }
120
120
 
121
121
  /* ===================================== *
122
- * v. Blockquote
122
+ * Blockquote
123
123
  * ------------------------------------- */
124
124
 
125
125
  // Blockquotes
@@ -168,27 +168,9 @@ blockquote {
168
168
  }
169
169
 
170
170
  /* ===================================== *
171
- * vi. Inline
171
+ * Inline
172
172
  * ------------------------------------- */
173
173
 
174
- // Bare inline text elements
175
- :not(p):not(li):not(dd):not(blockquote):not(small):not(strong):not(.suggestions li a) > {
176
- small {
177
- display: inline-block;
178
- line-height: vr(2); // 30px
179
- padding-top: 11px;
180
- margin-bottom: 19px;
181
- }
182
-
183
- b,
184
- strong {
185
- display: inline-block;
186
- line-height: vr(2); // 30px
187
- padding-top: 10px;
188
- margin-bottom: 5px;
189
- }
190
- }
191
-
192
174
  // Small text
193
175
  small {
194
176
  font-size: 14px;
@@ -229,6 +211,7 @@ sup {
229
211
 
230
212
  // Highlighted marks
231
213
  mark {
214
+ padding-top: .1em;
232
215
  background: lighten($azure, 45);
233
216
  }
234
217
 
@@ -238,6 +221,7 @@ abbr[title] {
238
221
  position: relative;
239
222
  cursor: help;
240
223
  font-style: normal;
224
+ text-decoration: none;
241
225
  border-bottom: 1px dashed $pewter;
242
226
 
243
227
  &:after,
@@ -245,7 +229,6 @@ abbr[title] {
245
229
  position: absolute;
246
230
  opacity: 0;
247
231
  z-index: -1;
248
- transition: $duration;
249
232
  }
250
233
 
251
234
  &:after {
@@ -260,6 +243,7 @@ abbr[title] {
260
243
  padding: 2px 10px;
261
244
  border-radius: $radius;
262
245
  background: $space;
246
+
263
247
  }
264
248
 
265
249
  &:before {
@@ -299,7 +283,7 @@ button {
299
283
  }
300
284
 
301
285
  /* ===================================== *
302
- * vii. Horizontal rule
286
+ * Horizontal rule
303
287
  * ------------------------------------- */
304
288
 
305
289
  hr {
@@ -325,7 +309,7 @@ hr.stars {
325
309
  }
326
310
 
327
311
  /* ===================================== *
328
- * viii. Preformatted text
312
+ * Preformatted text
329
313
  * ------------------------------------- */
330
314
 
331
315
  pre,
@@ -367,7 +351,7 @@ pre {
367
351
  }
368
352
 
369
353
  /* ===================================== *
370
- * xi. Syntax highlighting
354
+ * Syntax highlighting
371
355
  * ------------------------------------- */
372
356
 
373
357
  pre[class*=lang-],
@@ -0,0 +1,26 @@
1
+ figure.deployment {
2
+ position: relative;
3
+ .capsule {
4
+ height: 65px;
5
+ position: relative;
6
+ overflow-y: visible;
7
+ &.thin {
8
+ height: 40px;
9
+ }
10
+ }
11
+ @for $i from 10 through 0 {
12
+ .capsule:nth-child(#{$i}) {
13
+ z-index: 10 - $i;
14
+ }
15
+ }
16
+ }
17
+
18
+ .deployment-icon-container {
19
+ &.active .fade-in-on-hover, &:hover .fade-in-on-hover {
20
+ fill-opacity: 1;
21
+ }
22
+ .fade-in-on-hover {
23
+ transition-property: fill-opacity;
24
+ fill-opacity: 0;
25
+ }
26
+ }
@@ -31,7 +31,7 @@
31
31
 
32
32
  // // Remove botton margin from buttons
33
33
  // a {
34
- // @include button($fill: off, $bevel: on, $color: $white);
34
+ // @include button($fill: off, $rounded: on, $color: $white);
35
35
  // margin: 0;
36
36
  // }
37
37
 
@@ -1,98 +1,57 @@
1
1
  /* ========================================================================== *
2
- * Lightbox module
2
+ * Lightbox
3
3
  * -------------------------------------------------------------------------- */
4
4
 
5
5
  /* ===================================== *
6
- * a. Common
6
+ * Utility
7
7
  * ------------------------------------- */
8
8
 
9
- // Main lightbox element
10
- .lightbox {
11
- @extend %hidden;
12
- display: flex;
13
- width: 100%;
14
- height: 100%;
15
- margin: 0;
16
- align-items: center;
17
- justify-content: center;
18
- background: rgba(0, 0, 0, .9);
19
- visibility: hidden; // Hidden by default
20
- cursor: pointer;
9
+ $lightbox-padding: 3vw;
21
10
 
22
- // Container figure
23
- figure {
24
- position: relative;
25
- margin: 0;
26
- }
11
+ // Lightbox images
12
+ @mixin lightbox {
13
+ transform: translateY(calc(50vh - 50% - #{$lightbox-padding}));
27
14
 
28
- // Main image
29
- img {
30
- max-width: 90vw;
31
- max-height: 90vh;
32
- cursor: default;
33
- visibility: hidden; // Hidden by default
34
-
35
- // Make visible once loaded
36
- &.loaded,
37
- &.loaded + button {
38
- visibility: visible;
39
- }
40
- }
41
-
42
- // Close button
43
- button {
15
+ // Loading icon
16
+ &:before {
17
+ content: '';
44
18
  position: absolute;
45
- margin: 10px 0 0 10px;
46
- width: 20px;
47
- height: 20px;
48
- appearance: none;
49
- outline: none;
50
- border: 0;
51
- visibility: hidden; // Hidden by default
52
- background: url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg' fill='#FFF'%3E%3Cpath d='M2.663.005c.176.021.349.045.519.095.316.091.613.249.868.455l.184.166 10.765 10.765 10.768-10.768.187-.164c.262-.21.559-.368.882-.46.279-.079.567-.106.856-.089.228.014.456.065.671.143.257.094.498.23.712.401.578.467.922 1.186.925 1.928.001.239-.033.478-.1.707-.093.316-.249.611-.456.867l-.165.184-10.766 10.765 10.768 10.768.165.187c.224.279.388.599.477.947.078.308.097.631.055.946-.041.301-.136.593-.282.859-.113.208-.256.399-.424.566-.152.153-.324.285-.511.393-.584.337-1.296.423-1.945.235-.316-.092-.612-.25-.868-.456l-.183-.166-10.766-10.765-10.768 10.768-.186.165c-.28.224-.599.388-.947.477-.316.08-.646.098-.968.052-.293-.042-.578-.137-.838-.279-.242-.132-.462-.306-.648-.511-.16-.177-.294-.377-.398-.592-.307-.636-.328-1.387-.054-2.039.091-.218.214-.422.362-.606l.166-.183 10.765-10.766-10.765-10.765-.111-.119c-.208-.245-.372-.521-.476-.826-.204-.594-.172-1.259.087-1.832.098-.217.229-.42.385-.601.174-.201.381-.374.61-.51.279-.166.594-.278.916-.323l.353-.025.179.006z'/%3E%3C/svg%3E") 0 0 / 16px 16px no-repeat;
19
+ top: 50%;
20
+ left: 50%;
21
+ margin: -14px 0 0 -14px;
22
+ width: 28px;
23
+ height: 28px;
24
+ border-radius: 50%;
25
+ border: 2px solid $steel;
26
+ border-right-color: $white;
27
+ animation: spin 1s linear infinite;
53
28
  }
54
- }
55
-
56
- // Active state
57
- .lightbox-active {
58
29
 
59
- // Prevent scrolling
60
- overflow: hidden;
61
-
62
- // Reposition lightbox
63
- .lightbox {
64
- position: fixed;
65
- left: 0;
66
- top: 0;
67
- z-index: 13;
68
- visibility: visible; // Shown while active
30
+ img {
31
+ opacity: 0;
32
+ transition: opacity $duration;
69
33
  }
70
34
 
71
- // Default loader state
72
- .loader {
73
- z-index: 14;
74
- }
35
+ // Loaded state
36
+ &.loaded {
75
37
 
76
- // Loader failure state
77
- .loader.failure {
38
+ // Remove loading icon
78
39
  &:before {
79
- border-color: transparent;
80
- background: rgba($white, .2)
40
+ display: none;
41
+ animation: none;
81
42
  }
82
43
 
83
- &:after {
84
- content: '';
85
- background: url("data:image/svg+xml,%3Csvg viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='#FFF' d='M30.51 6.423l5.099-5.099.202-.16c.146-.09.313-.145.485-.16l.129-.004.128.011.126.026c.125.034.243.089.349.163.106.074.198.166.272.272.2.285.254.655.145.984-.041.123-.103.238-.183.339l-.086.096-35.284 35.285-.202.159c-.183.113-.398.171-.614.165-.347-.01-.676-.188-.876-.472l-.122-.227c-.047-.12-.074-.248-.078-.377-.003-.129.016-.258.056-.381.041-.122.103-.237.183-.339l.086-.096 3.989-3.989c-.337-.385-.538-.887-.538-1.424v-22.611c0-1.219.998-2.161 2.161-2.161h24.573zm3.857 26.933h-24.573l1.774-1.773h22.799c.222 0 .388-.166.333-.388v-1.884l-.166-.222-6.429-6.429c-.111-.11-.332-.11-.499 0l-2.937 2.439c-.831.72-2.106.665-2.882-.111l-1.832-1.792 1.295-1.295 1.867 1.812c.111.111.333.111.499 0l2.937-2.383c.832-.72 2.106-.665 2.882.111l5.32 5.32v-18.177l-.031-.158 1.267-1.266c.337.384.538.886.538 1.424v22.611c0 1.219-.998 2.161-2.162 2.161zm-17.556-13.234l-2.561-2.505c-.11-.111-.332-.111-.498 0l-8.202 7.703v5.875l.03.157 11.231-11.23zm1.284-1.284l10.642-10.642h-22.8c-.166 0-.332.166-.332.388v14.243l6.927-6.54c.832-.776 2.162-.776 2.993.056l2.57 2.495zm-8.089-8.465c1.101 0 1.995.894 1.995 1.996 0 1.101-.894 1.995-1.995 1.995s-1.995-.894-1.995-1.995c0-1.102.894-1.996 1.995-1.996z' /%3E%3C/svg%3E") 50% 50% / 28px 28px no-repeat;
44
+ // Fade in cover image
45
+ img {
46
+ opacity: 1;
86
47
  }
87
48
  }
88
49
  }
89
50
 
90
- // Deactivate anchor links under 700px
91
- @media (max-width: 700px) {
92
- a[href$=jpg],
93
- a[href$=png],
94
- a[href$=gif],
95
- a[href$=svg] {
96
- cursor: default;
97
- }
51
+ /* ===================================== *
52
+ * Common
53
+ * ------------------------------------- */
54
+
55
+ .lightbox {
56
+ @include lightbox;
98
57
  }