ratchet_design 0.1.1 → 0.1.2
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.
- checksums.yaml +4 -4
- data/app/assets/images/ratchet/favicon.ico +0 -0
- data/app/assets/images/ratchet/safari-pinned-tab.svg +1 -0
- data/app/assets/javascripts/ratchet/base/form.js +9 -118
- data/app/assets/javascripts/ratchet/base/mobilemenu.js +12 -50
- data/app/assets/javascripts/ratchet/base/sync-input-value.js +30 -0
- data/app/assets/javascripts/ratchet/core.js +58 -77
- data/app/assets/javascripts/ratchet/enhancement/_collapse.js +3 -6
- data/app/assets/javascripts/ratchet/enhancement/_swap.js +3 -7
- data/app/assets/javascripts/ratchet/enhancement/lightbox.js +165 -0
- data/app/assets/javascripts/ratchet/enhancement/notice.js +8 -3
- data/app/assets/javascripts/ratchet/enhancement/sticky.js +18 -35
- data/app/assets/javascripts/ratchet/enhancement/waypoints.js +125 -162
- data/app/assets/javascripts/ratchet/shim/scope.js +94 -0
- data/app/assets/javascripts/ratchet/{enhancement → utility}/loader.js +15 -8
- data/app/assets/stylesheets/ratchet/_core.scss +4 -1
- data/app/assets/stylesheets/ratchet/base/_button.scss +3 -3
- data/app/assets/stylesheets/ratchet/base/_form.scss +63 -47
- data/app/assets/stylesheets/ratchet/base/_multistep-form.scss +64 -0
- data/app/assets/stylesheets/ratchet/base/_text.scss +15 -15
- data/app/assets/stylesheets/ratchet/enhancement/_lightbox.scss +98 -0
- data/app/assets/stylesheets/ratchet/enhancement/_tooltip.scss +142 -0
- data/app/assets/stylesheets/ratchet/fonts-woff.css +4 -4
- data/app/assets/stylesheets/ratchet/fonts-woff2.css +4 -4
- data/app/assets/stylesheets/ratchet/utility/_global.scss +3 -13
- data/app/assets/stylesheets/ratchet/{enhancement → utility}/_loader.scss +1 -1
- data/app/helpers/ratchet/application_helper.rb +6 -12
- data/app/helpers/ratchet/form_helper.rb +140 -0
- data/app/views/layouts/ratchet/default.html.slim +3 -2
- data/app/views/shared/ratchet/_footer.html.slim +1 -1
- data/app/views/shared/ratchet/_header.html.slim +1 -1
- data/lib/ratchet_design/version.rb +1 -1
- data/lib/ratchet_design.rb +24 -4
- data/public/assets/ratchet/core-0.1.2.js +133 -0
- data/public/assets/ratchet/core-0.1.2.js.gz +0 -0
- data/public/assets/ratchet/core-0.1.2.map.json +1 -0
- data/public/assets/ratchet/core-0.1.20.js +20472 -0
- data/public/assets/ratchet/{fonts-woff-0.1.1.css → fonts-woff-0.1.2.css} +4 -4
- data/public/assets/ratchet/{fonts-woff-0.1.1.css.gz → fonts-woff-0.1.2.css.gz} +0 -0
- data/public/assets/ratchet/{fonts-woff2-0.1.1.css → fonts-woff2-0.1.2.css} +4 -4
- data/public/assets/ratchet/{fonts-woff2-0.1.1.css.gz → fonts-woff2-0.1.2.css.gz} +0 -0
- metadata +48 -27
- data/app/assets/javascripts/ratchet/base/validation.js +0 -263
- data/app/assets/javascripts/ratchet/enhancement/_lightbox.js +0 -93
- data/app/assets/javascripts/ratchet/shim/classlist.js +0 -234
- data/app/assets/javascripts/ratchet/shim/object.assign.js +0 -30
- data/app/assets/javascripts/ratchet/utility/compile_data.js +0 -32
- data/app/assets/javascripts/ratchet/utility/from_top.js +0 -14
- data/app/assets/javascripts/ratchet/utility/full_stop.js +0 -55
- data/app/assets/javascripts/ratchet/utility/get_closest.js +0 -20
- data/app/assets/javascripts/ratchet/utility/get_next.js +0 -17
- data/app/assets/javascripts/ratchet/utility/matches.js +0 -15
- data/app/assets/javascripts/ratchet/utility/scroll_to.js +0 -74
- data/app/assets/javascripts/ratchet/utility/throttle.js +0 -25
- data/app/assets/javascripts/ratchet/utility/timeout.js +0 -45
- data/app/assets/javascripts/ratchet/utility/unhover.js +0 -56
- data/app/assets/javascripts/ratchet/utility/word_count.js +0 -15
- data/app/assets/stylesheets/ratchet/enhancement/_signup.scss +0 -206
- data/public/assets/ratchet/core-0.1.1.js +0 -103
- data/public/assets/ratchet/core-0.1.1.js.gz +0 -0
- data/public/assets/ratchet/core-0.1.1.map.json +0 -1
@@ -6,16 +6,24 @@
|
|
6
6
|
* i. Utility
|
7
7
|
* ------------------------------------- */
|
8
8
|
|
9
|
+
// Universal text-based input variable
|
10
|
+
$text-inputs: 'textarea, input[type=url], input[type=tel], input[type=text], input[type=email], input[type=number], input[type=password]';
|
11
|
+
|
9
12
|
// Nested labels
|
10
|
-
@mixin nested-label($size: normal) {
|
13
|
+
@mixin nested-label($size: normal, $spacing: on) {
|
11
14
|
|
12
15
|
// Scoped variables
|
13
16
|
$font-size: if($size == large, 17px, 16px);
|
14
|
-
$margin: if($size == large, 19px, 25px);
|
15
17
|
$padding-y: if($size == large, 12px, 9px);
|
16
18
|
$padding-x: if($size == large, 14px, 12px);
|
19
|
+
$margin: if($size == large, 19px, 25px);
|
17
20
|
$distance: if($size == large, -24px, -22px);
|
18
21
|
$scale: if($size == large, .824, .875);
|
22
|
+
$height: if($size == large, 56px, 50px);
|
23
|
+
|
24
|
+
@if $spacing != on {
|
25
|
+
$margin: 0;
|
26
|
+
}
|
19
27
|
|
20
28
|
// Active state
|
21
29
|
%active {
|
@@ -31,9 +39,9 @@
|
|
31
39
|
|
32
40
|
// Input labels
|
33
41
|
label {
|
34
|
-
display: flex;
|
35
|
-
width: 100%;
|
36
42
|
padding: 0;
|
43
|
+
clear: both;
|
44
|
+
flex: 1 0 auto;
|
37
45
|
background: $white;
|
38
46
|
font-size: $font-size;
|
39
47
|
margin-bottom: $margin;
|
@@ -41,8 +49,8 @@
|
|
41
49
|
|
42
50
|
// Default active color
|
43
51
|
:not(.valid):not(.invalid) > {
|
44
|
-
|
45
|
-
|
52
|
+
textarea,
|
53
|
+
#{$text-inputs} {
|
46
54
|
&:focus + span,
|
47
55
|
&:active + span {
|
48
56
|
color: darken($aluminum, 10);
|
@@ -52,13 +60,8 @@
|
|
52
60
|
|
53
61
|
// Validated label
|
54
62
|
.valid > {
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
// Active state
|
59
|
-
+ span {
|
60
|
-
@extend %active;
|
61
|
-
}
|
63
|
+
textarea,
|
64
|
+
#{$text-inputs} {
|
62
65
|
|
63
66
|
// Non-required active color
|
64
67
|
&:not(:required):focus + span,
|
@@ -68,20 +71,15 @@
|
|
68
71
|
|
69
72
|
// Required active color
|
70
73
|
&:required + span {
|
71
|
-
color: $
|
74
|
+
color: $apple;
|
72
75
|
}
|
73
76
|
}
|
74
77
|
}
|
75
78
|
|
76
79
|
// Invalidated label
|
77
80
|
.invalid > {
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
// Active state
|
82
|
-
+ span {
|
83
|
-
@extend %active;
|
84
|
-
}
|
81
|
+
textarea,
|
82
|
+
#{$text-inputs} {
|
85
83
|
|
86
84
|
// Non-required active color
|
87
85
|
&:not(:required):focus + span,
|
@@ -98,15 +96,16 @@
|
|
98
96
|
|
99
97
|
// Select-specific styles
|
100
98
|
select {
|
99
|
+
margin: 0;
|
101
100
|
font-size: $font-size;
|
102
101
|
line-height: inherit;
|
102
|
+
height: $height;
|
103
103
|
padding: $padding-y $padding-x;
|
104
104
|
}
|
105
105
|
|
106
106
|
// Inputs
|
107
|
-
|
108
|
-
|
109
|
-
textarea {
|
107
|
+
textarea,
|
108
|
+
#{$text-inputs} {
|
110
109
|
z-index: 1;
|
111
110
|
margin: 0;
|
112
111
|
font-size: $font-size;
|
@@ -133,23 +132,41 @@
|
|
133
132
|
-webkit-font-smoothing: subpixel-antialiased;
|
134
133
|
z-index: 0;
|
135
134
|
color: $alto;
|
136
|
-
transform:
|
135
|
+
transform: translate3d(0, 0, 0) scale(1);
|
137
136
|
transition:
|
138
137
|
z-index .2s,
|
139
138
|
color .2s,
|
140
139
|
transform .2s;
|
141
140
|
}
|
142
141
|
|
143
|
-
// Move labels out of the way on focus
|
142
|
+
// Move labels out of the way on focus and empty
|
144
143
|
&:focus + span,
|
145
|
-
&:active + span
|
144
|
+
&:active + span,
|
145
|
+
&:not([value=""]) + span, {
|
146
146
|
@extend %active;
|
147
147
|
}
|
148
148
|
}
|
149
149
|
}
|
150
150
|
|
151
|
+
// Inline forms
|
152
|
+
@mixin inline-form($size: normal, $gutter: 10px) {
|
153
|
+
@include nested-label($size, off);
|
154
|
+
@include grid;
|
155
|
+
|
156
|
+
// Remove top spacing from submit button
|
157
|
+
> [type=submit] {
|
158
|
+
margin-top: 0;
|
159
|
+
}
|
160
|
+
|
161
|
+
// Leave right margin off last element
|
162
|
+
> :not(:last-child) {
|
163
|
+
margin-right: $gutter;
|
164
|
+
}
|
165
|
+
|
166
|
+
}
|
167
|
+
|
151
168
|
%success-btn {
|
152
|
-
@include button($color: $
|
169
|
+
@include button($color: $apple);
|
153
170
|
}
|
154
171
|
|
155
172
|
/* ===================================== *
|
@@ -298,9 +315,15 @@ select {
|
|
298
315
|
// Radios & checkboxes
|
299
316
|
input[type=radio],
|
300
317
|
input[type=checkbox] {
|
301
|
-
|
318
|
+
position: absolute;
|
319
|
+
opacity: 0;
|
320
|
+
|
321
|
+
&:focus + .tick-label,
|
322
|
+
&:active + .tick-label {
|
323
|
+
box-shadow: 0 0 0 1px $aluminum inset;
|
324
|
+
}
|
302
325
|
|
303
|
-
+
|
326
|
+
+ .tick-label {
|
304
327
|
width: 20px;
|
305
328
|
height: 20px;
|
306
329
|
margin: 0 8px 0 0;
|
@@ -321,11 +344,11 @@ input[type=checkbox] {
|
|
321
344
|
// Radios
|
322
345
|
input[type=radio] {
|
323
346
|
|
324
|
-
+
|
347
|
+
+ .tick-label {
|
325
348
|
border-radius: 50%;
|
326
349
|
}
|
327
350
|
|
328
|
-
&:checked +
|
351
|
+
&:checked + .tick-label {
|
329
352
|
box-shadow: 0 0 0 8px $cerulean inset;
|
330
353
|
}
|
331
354
|
}
|
@@ -333,7 +356,7 @@ input[type=radio] {
|
|
333
356
|
// Checkboxes
|
334
357
|
input[type=checkbox] {
|
335
358
|
|
336
|
-
+
|
359
|
+
+ .tick-label {
|
337
360
|
border-radius: $radius;
|
338
361
|
position: relative;
|
339
362
|
|
@@ -352,11 +375,11 @@ input[type=checkbox] {
|
|
352
375
|
}
|
353
376
|
}
|
354
377
|
|
355
|
-
&:checked +
|
378
|
+
&:checked + .tick-label {
|
356
379
|
box-shadow: 0 0 0 10px $cerulean inset;
|
357
380
|
}
|
358
381
|
|
359
|
-
&:checked +
|
382
|
+
&:checked + .tick-label:before {
|
360
383
|
transform: scale(.5) rotate(-45deg);
|
361
384
|
}
|
362
385
|
}
|
@@ -508,13 +531,7 @@ button[type=submit] {
|
|
508
531
|
* ------------------------------------- */
|
509
532
|
|
510
533
|
// Apply validation styles to inputs & textareas
|
511
|
-
textarea,
|
512
|
-
input[type=url],
|
513
|
-
input[type=tel],
|
514
|
-
input[type=text],
|
515
|
-
input[type=email],
|
516
|
-
input[type=number],
|
517
|
-
input[type=password] {
|
534
|
+
textarea, #{$text-inputs} {
|
518
535
|
|
519
536
|
// Strip default styling
|
520
537
|
&:invalid {
|
@@ -525,13 +542,13 @@ input[type=password] {
|
|
525
542
|
// Apply valid state color to required fields & adjacent labels
|
526
543
|
&.valid:required,
|
527
544
|
.valid &:required {
|
528
|
-
color: $
|
545
|
+
color: $apple;
|
529
546
|
}
|
530
547
|
|
531
548
|
// Apply valid state to required fields
|
532
549
|
&.valid:required,
|
533
550
|
.valid &:required {
|
534
|
-
border-color: $
|
551
|
+
border-color: $apple;
|
535
552
|
}
|
536
553
|
|
537
554
|
// Apply invalid state color to required fields & adjacent labels
|
@@ -549,7 +566,7 @@ input[type=password] {
|
|
549
566
|
// Apply valid state to Chrome’s autofilled fields
|
550
567
|
&.valid:required:-webkit-autofill,
|
551
568
|
.valid &:required:-webkit-autofill {
|
552
|
-
-webkit-text-fill-color: $
|
569
|
+
-webkit-text-fill-color: $apple;
|
553
570
|
}
|
554
571
|
|
555
572
|
// Apply invalid state to Chrome’s autofilled fields
|
@@ -596,7 +613,6 @@ input[type=password] {
|
|
596
613
|
font-size: 14px;
|
597
614
|
line-height: 21px;
|
598
615
|
|
599
|
-
|
600
616
|
// Message bubble triangle
|
601
617
|
&:before {
|
602
618
|
content: '';
|
@@ -611,4 +627,4 @@ input[type=password] {
|
|
611
627
|
border-color: transparent transparent $punch transparent;
|
612
628
|
}
|
613
629
|
}
|
614
|
-
}
|
630
|
+
}
|
@@ -0,0 +1,64 @@
|
|
1
|
+
fieldset.form-step {
|
2
|
+
left: 0;
|
3
|
+
right: 0;
|
4
|
+
|
5
|
+
&[disabled] {
|
6
|
+
position: absolute;
|
7
|
+
left: -9999px;
|
8
|
+
opacity: 0;
|
9
|
+
}
|
10
|
+
|
11
|
+
|
12
|
+
// Transition to form step
|
13
|
+
&.arrived { animation: fade-in-right .5s forwards; }
|
14
|
+
|
15
|
+
// Revisit form step
|
16
|
+
&.revisted, &.step-visited.arrived { animation: .5s fade-in-left forwards; }
|
17
|
+
|
18
|
+
// Transition away from form step
|
19
|
+
&.departed { animation: fade-out-left .5s forwards; }
|
20
|
+
}
|
21
|
+
|
22
|
+
// Transition to form step
|
23
|
+
@keyframes fade-in-right {
|
24
|
+
0% {
|
25
|
+
opacity: 0;
|
26
|
+
transform: perspective(1px) translate3d(200px, 0, 0);
|
27
|
+
}
|
28
|
+
|
29
|
+
100% {
|
30
|
+
opacity: 1;
|
31
|
+
transform: perspective(1px) translate3d(0, 0, 0);
|
32
|
+
}
|
33
|
+
}
|
34
|
+
|
35
|
+
// Transition away from form step
|
36
|
+
@keyframes fade-out-left {
|
37
|
+
0% {
|
38
|
+
opacity: 1;
|
39
|
+
transform: perspective(1px) translate3d(0, 0, 0);
|
40
|
+
}
|
41
|
+
|
42
|
+
99% {
|
43
|
+
opacity: 0;
|
44
|
+
transform: perspective(1px) translate3d(-200px, 0, 0);
|
45
|
+
}
|
46
|
+
|
47
|
+
100% {
|
48
|
+
opacity: 0;
|
49
|
+
transform: perspective(1px) translate3d(-9999px, 0, 0);
|
50
|
+
}
|
51
|
+
}
|
52
|
+
|
53
|
+
// Return to previous form step
|
54
|
+
@keyframes fade-in-left {
|
55
|
+
0% {
|
56
|
+
opacity: 0;
|
57
|
+
transform: perspective(1px) translate3d(-200px, 0, 0);
|
58
|
+
}
|
59
|
+
|
60
|
+
100% {
|
61
|
+
opacity: 1;
|
62
|
+
transform: perspective(1px) translate3d(0, 0, 0);
|
63
|
+
}
|
64
|
+
}
|
@@ -328,9 +328,7 @@ code,
|
|
328
328
|
kbd,
|
329
329
|
samp {
|
330
330
|
font-family: $mono-font;
|
331
|
-
|
332
|
-
word-spacing: -.015em;
|
333
|
-
color: $aluminum;
|
331
|
+
// color: $aluminum;
|
334
332
|
direction: ltr;
|
335
333
|
text-align: left;
|
336
334
|
tab-size: 2;
|
@@ -340,9 +338,10 @@ samp {
|
|
340
338
|
}
|
341
339
|
|
342
340
|
pre {
|
343
|
-
font-size: .9375rem; // 15.5px
|
344
341
|
overflow: auto;
|
345
|
-
@include rhythm(
|
342
|
+
@include rhythm(25px, 25px, on);
|
343
|
+
letter-spacing: -.015em;
|
344
|
+
word-spacing: -.015em;
|
346
345
|
border-radius: $radius;
|
347
346
|
background: $alabaster;
|
348
347
|
box-shadow: 0 0 0 1px $iron inset;
|
@@ -351,12 +350,13 @@ pre {
|
|
351
350
|
:not(pre) > code,
|
352
351
|
:not(pre) > kbd,
|
353
352
|
:not(pre) > samp {
|
354
|
-
font-size: .9375rem; // 15.5px
|
355
353
|
line-height: 0;
|
354
|
+
letter-spacing: -.015em;
|
355
|
+
word-spacing: -.015em;
|
356
356
|
word-wrap: break-word;
|
357
357
|
white-space: pre-wrap;
|
358
358
|
border-radius: $radius;
|
359
|
-
padding:
|
359
|
+
padding: 2px 6px;
|
360
360
|
background: $alabaster;
|
361
361
|
box-shadow: 0 0 0 1px $iron inset;
|
362
362
|
}
|
@@ -365,8 +365,8 @@ pre {
|
|
365
365
|
* xi. Syntax highlighting
|
366
366
|
* ------------------------------------- */
|
367
367
|
|
368
|
-
pre[class*=
|
369
|
-
code[class*=
|
368
|
+
pre[class*=lang-],
|
369
|
+
code[class*=lang-] {
|
370
370
|
color: $aluminum;
|
371
371
|
}
|
372
372
|
|
@@ -374,7 +374,7 @@ code[class*=language-] {
|
|
374
374
|
.cm-keyword { color: $bahama; }
|
375
375
|
.cm-atom { color: $lightning; }
|
376
376
|
.cm-number { color: $rose; }
|
377
|
-
.cm-def { color: $
|
377
|
+
.cm-def { color: $apple; }
|
378
378
|
.cm-variable { color: $flush; }
|
379
379
|
.cm-variable-2 { color: $orchid; }
|
380
380
|
.cm-variable-3 { color: $flush; }
|
@@ -382,16 +382,16 @@ code[class*=language-] {
|
|
382
382
|
.cm-operator { color: $nobel; }
|
383
383
|
.cm-comment { color: $nobel; }
|
384
384
|
.cm-string { color: $cerulean; }
|
385
|
-
.cm-string-2 { color: $
|
385
|
+
.cm-string-2 { color: $apple; }
|
386
386
|
.cm-meta { color: $nobel; }
|
387
387
|
.cm-error { color: $punch; }
|
388
388
|
.cm-qualifier { color: $nobel; }
|
389
389
|
.cm-builtin { color: $bahama; }
|
390
390
|
.cm-bracket { color: $nobel; }
|
391
391
|
.cm-tag { color: $bahama; }
|
392
|
-
.cm-attribute { color: $
|
392
|
+
.cm-attribute { color: $flush; }
|
393
393
|
.cm-header { color: $cerulean; }
|
394
|
-
.cm-quote { color: $
|
394
|
+
.cm-quote { color: $apple; }
|
395
395
|
.cm-hr { color: $nobel; }
|
396
396
|
.cm-link { color: $orchid; }
|
397
397
|
.cm-qualifier.cm-attribute { color: $flush; }
|
@@ -399,11 +399,11 @@ code[class*=language-] {
|
|
399
399
|
}
|
400
400
|
|
401
401
|
.static-code {
|
402
|
-
.cm-variable { color: $
|
402
|
+
.cm-variable { color: $apple; }
|
403
403
|
}
|
404
404
|
|
405
405
|
.cm-negative { color: $rose; }
|
406
|
-
.cm-positive { color: $
|
406
|
+
.cm-positive { color: $apple; }
|
407
407
|
.cm-header,
|
408
408
|
.cm-strong { }
|
409
409
|
.cm-em { }
|
@@ -0,0 +1,98 @@
|
|
1
|
+
/* ========================================================================== *
|
2
|
+
* Lightbox module
|
3
|
+
* -------------------------------------------------------------------------- */
|
4
|
+
|
5
|
+
/* ===================================== *
|
6
|
+
* a. Common
|
7
|
+
* ------------------------------------- */
|
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;
|
21
|
+
|
22
|
+
// Container figure
|
23
|
+
figure {
|
24
|
+
position: relative;
|
25
|
+
margin: 0;
|
26
|
+
}
|
27
|
+
|
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 {
|
44
|
+
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;
|
53
|
+
}
|
54
|
+
}
|
55
|
+
|
56
|
+
// Active state
|
57
|
+
.lightbox-active {
|
58
|
+
|
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
|
69
|
+
}
|
70
|
+
|
71
|
+
// Default loader state
|
72
|
+
.loader {
|
73
|
+
z-index: 14;
|
74
|
+
}
|
75
|
+
|
76
|
+
// Loader failure state
|
77
|
+
.loader.failure {
|
78
|
+
&:before {
|
79
|
+
border-color: transparent;
|
80
|
+
background: rgba($white, .2)
|
81
|
+
}
|
82
|
+
|
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;
|
86
|
+
}
|
87
|
+
}
|
88
|
+
}
|
89
|
+
|
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
|
+
}
|
98
|
+
}
|
@@ -0,0 +1,142 @@
|
|
1
|
+
/* ========================================================================== *
|
2
|
+
* Tooltip module
|
3
|
+
* -------------------------------------------------------------------------- */
|
4
|
+
|
5
|
+
@mixin tooltip($direction: 'bottom', $offset: 0px, $width: auto, $background: $shark) {
|
6
|
+
position: relative;
|
7
|
+
cursor: pointer;
|
8
|
+
|
9
|
+
// Tooltip components default state
|
10
|
+
&:after,
|
11
|
+
&:before {
|
12
|
+
position: absolute;
|
13
|
+
opacity: 0;
|
14
|
+
visibility: hidden;
|
15
|
+
z-index: 3;
|
16
|
+
transition:
|
17
|
+
opacity $duration,
|
18
|
+
visibility $duration;
|
19
|
+
}
|
20
|
+
|
21
|
+
// Tooltip components active state
|
22
|
+
&:hover,
|
23
|
+
&:focus,
|
24
|
+
&:active {
|
25
|
+
&:after,
|
26
|
+
&:before {
|
27
|
+
visibility: visible;
|
28
|
+
opacity: 1;
|
29
|
+
}
|
30
|
+
}
|
31
|
+
|
32
|
+
// Bubble
|
33
|
+
&:after {
|
34
|
+
content: attr(data-tooltip);
|
35
|
+
color: $white;
|
36
|
+
font-size: 14px;
|
37
|
+
font-weight: 300;
|
38
|
+
line-height: 20px;
|
39
|
+
padding: 10px 12px;
|
40
|
+
max-width: 100vw;
|
41
|
+
border-radius: $radius;
|
42
|
+
background: $background;
|
43
|
+
|
44
|
+
// Width settings
|
45
|
+
@if $width == 'auto' {
|
46
|
+
width: auto;
|
47
|
+
white-space: nowrap;
|
48
|
+
} @else {
|
49
|
+
width: $width;
|
50
|
+
}
|
51
|
+
|
52
|
+
// Direction settings
|
53
|
+
@if $direction == 'bottom' {
|
54
|
+
left: 50%;
|
55
|
+
top: calc(100% + 6px + #{$offset});
|
56
|
+
transform: translateX(-50%);
|
57
|
+
} @else if $direction == 'top' {
|
58
|
+
left: 50%;
|
59
|
+
bottom: calc(100% + 6px + #{$offset});
|
60
|
+
transform: translateX(-50%);
|
61
|
+
} @elseif $direction == 'left' {
|
62
|
+
right: calc(100% + 6px + #{$offset});
|
63
|
+
top: 50%;
|
64
|
+
transform: translateY(-50%);
|
65
|
+
} @else if $direction == 'right' {
|
66
|
+
left: calc(100% + 6px + #{$offset});
|
67
|
+
top: 50%;
|
68
|
+
transform: translateY(-50%);
|
69
|
+
}
|
70
|
+
}
|
71
|
+
|
72
|
+
// Bubble triangle
|
73
|
+
&:before {
|
74
|
+
content: '';
|
75
|
+
|
76
|
+
// Vertical direction settings
|
77
|
+
@if $direction == 'bottom' or $direction == 'top' {
|
78
|
+
left: 0;
|
79
|
+
width: 100%;
|
80
|
+
height: calc(6px + #{$offset});
|
81
|
+
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpolygon points='0,6 5,0 10,6' fill='#{$background}'/%3E%3C/svg%3E") 50% 100% / 10px 6px no-repeat;
|
82
|
+
|
83
|
+
// Horizontal direction settings
|
84
|
+
} @else if $direction == 'left' or $direction == 'right' {
|
85
|
+
top: 0;
|
86
|
+
width: calc(6px + #{$offset});
|
87
|
+
height: 100%;
|
88
|
+
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10'%3E%3Cpolygon points='0,0 6,5 0,10' fill='#{$background}'/%3E%3C/svg%3E") 0 50% / 6px 10px no-repeat;
|
89
|
+
}
|
90
|
+
|
91
|
+
// Bottom direction settings
|
92
|
+
@if $direction == 'bottom' {
|
93
|
+
top: 100%;
|
94
|
+
|
95
|
+
// Top direction settings
|
96
|
+
} @else if $direction == 'top' {
|
97
|
+
bottom: 100%;
|
98
|
+
transform: rotate(180deg);
|
99
|
+
|
100
|
+
// Left direction settings
|
101
|
+
} @else if $direction == 'left' {
|
102
|
+
right: 100%;
|
103
|
+
|
104
|
+
// Right direction settings
|
105
|
+
} @else if $direction == 'right' {
|
106
|
+
left: 100%;
|
107
|
+
transform: rotate(180deg);
|
108
|
+
}
|
109
|
+
}
|
110
|
+
}
|
111
|
+
|
112
|
+
article > p:first-of-type > [data-tooltip] {
|
113
|
+
@include tooltip;
|
114
|
+
}
|
115
|
+
|
116
|
+
.tooltip-left {
|
117
|
+
@include tooltip(left, 3px);
|
118
|
+
}
|
119
|
+
|
120
|
+
.tooltip-right {
|
121
|
+
@include tooltip(right, 3px);
|
122
|
+
}
|
123
|
+
|
124
|
+
.tooltip-top {
|
125
|
+
@include tooltip(top);
|
126
|
+
}
|
127
|
+
|
128
|
+
.tooltip-bottom {
|
129
|
+
@include tooltip;
|
130
|
+
}
|
131
|
+
|
132
|
+
.tooltip-offset {
|
133
|
+
@include tooltip($offset: 10px);
|
134
|
+
}
|
135
|
+
|
136
|
+
.tooltip-width {
|
137
|
+
@include tooltip($width: 220px);
|
138
|
+
}
|
139
|
+
|
140
|
+
// [data-tooltip] {
|
141
|
+
// @include tooltip($width: 216px);
|
142
|
+
// }
|