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.
Files changed (61) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/images/ratchet/favicon.ico +0 -0
  3. data/app/assets/images/ratchet/safari-pinned-tab.svg +1 -0
  4. data/app/assets/javascripts/ratchet/base/form.js +9 -118
  5. data/app/assets/javascripts/ratchet/base/mobilemenu.js +12 -50
  6. data/app/assets/javascripts/ratchet/base/sync-input-value.js +30 -0
  7. data/app/assets/javascripts/ratchet/core.js +58 -77
  8. data/app/assets/javascripts/ratchet/enhancement/_collapse.js +3 -6
  9. data/app/assets/javascripts/ratchet/enhancement/_swap.js +3 -7
  10. data/app/assets/javascripts/ratchet/enhancement/lightbox.js +165 -0
  11. data/app/assets/javascripts/ratchet/enhancement/notice.js +8 -3
  12. data/app/assets/javascripts/ratchet/enhancement/sticky.js +18 -35
  13. data/app/assets/javascripts/ratchet/enhancement/waypoints.js +125 -162
  14. data/app/assets/javascripts/ratchet/shim/scope.js +94 -0
  15. data/app/assets/javascripts/ratchet/{enhancement → utility}/loader.js +15 -8
  16. data/app/assets/stylesheets/ratchet/_core.scss +4 -1
  17. data/app/assets/stylesheets/ratchet/base/_button.scss +3 -3
  18. data/app/assets/stylesheets/ratchet/base/_form.scss +63 -47
  19. data/app/assets/stylesheets/ratchet/base/_multistep-form.scss +64 -0
  20. data/app/assets/stylesheets/ratchet/base/_text.scss +15 -15
  21. data/app/assets/stylesheets/ratchet/enhancement/_lightbox.scss +98 -0
  22. data/app/assets/stylesheets/ratchet/enhancement/_tooltip.scss +142 -0
  23. data/app/assets/stylesheets/ratchet/fonts-woff.css +4 -4
  24. data/app/assets/stylesheets/ratchet/fonts-woff2.css +4 -4
  25. data/app/assets/stylesheets/ratchet/utility/_global.scss +3 -13
  26. data/app/assets/stylesheets/ratchet/{enhancement → utility}/_loader.scss +1 -1
  27. data/app/helpers/ratchet/application_helper.rb +6 -12
  28. data/app/helpers/ratchet/form_helper.rb +140 -0
  29. data/app/views/layouts/ratchet/default.html.slim +3 -2
  30. data/app/views/shared/ratchet/_footer.html.slim +1 -1
  31. data/app/views/shared/ratchet/_header.html.slim +1 -1
  32. data/lib/ratchet_design/version.rb +1 -1
  33. data/lib/ratchet_design.rb +24 -4
  34. data/public/assets/ratchet/core-0.1.2.js +133 -0
  35. data/public/assets/ratchet/core-0.1.2.js.gz +0 -0
  36. data/public/assets/ratchet/core-0.1.2.map.json +1 -0
  37. data/public/assets/ratchet/core-0.1.20.js +20472 -0
  38. data/public/assets/ratchet/{fonts-woff-0.1.1.css → fonts-woff-0.1.2.css} +4 -4
  39. data/public/assets/ratchet/{fonts-woff-0.1.1.css.gz → fonts-woff-0.1.2.css.gz} +0 -0
  40. data/public/assets/ratchet/{fonts-woff2-0.1.1.css → fonts-woff2-0.1.2.css} +4 -4
  41. data/public/assets/ratchet/{fonts-woff2-0.1.1.css.gz → fonts-woff2-0.1.2.css.gz} +0 -0
  42. metadata +48 -27
  43. data/app/assets/javascripts/ratchet/base/validation.js +0 -263
  44. data/app/assets/javascripts/ratchet/enhancement/_lightbox.js +0 -93
  45. data/app/assets/javascripts/ratchet/shim/classlist.js +0 -234
  46. data/app/assets/javascripts/ratchet/shim/object.assign.js +0 -30
  47. data/app/assets/javascripts/ratchet/utility/compile_data.js +0 -32
  48. data/app/assets/javascripts/ratchet/utility/from_top.js +0 -14
  49. data/app/assets/javascripts/ratchet/utility/full_stop.js +0 -55
  50. data/app/assets/javascripts/ratchet/utility/get_closest.js +0 -20
  51. data/app/assets/javascripts/ratchet/utility/get_next.js +0 -17
  52. data/app/assets/javascripts/ratchet/utility/matches.js +0 -15
  53. data/app/assets/javascripts/ratchet/utility/scroll_to.js +0 -74
  54. data/app/assets/javascripts/ratchet/utility/throttle.js +0 -25
  55. data/app/assets/javascripts/ratchet/utility/timeout.js +0 -45
  56. data/app/assets/javascripts/ratchet/utility/unhover.js +0 -56
  57. data/app/assets/javascripts/ratchet/utility/word_count.js +0 -15
  58. data/app/assets/stylesheets/ratchet/enhancement/_signup.scss +0 -206
  59. data/public/assets/ratchet/core-0.1.1.js +0 -103
  60. data/public/assets/ratchet/core-0.1.1.js.gz +0 -0
  61. 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
- input,
45
- textarea {
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
- input,
56
- textarea {
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: $lima;
74
+ color: $apple;
72
75
  }
73
76
  }
74
77
  }
75
78
 
76
79
  // Invalidated label
77
80
  .invalid > {
78
- input,
79
- textarea {
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
- input,
108
- select,
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: perspective(1px) translate3d(0, 0, 0) scale(1);
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: $lima);
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
- display: none;
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
- + span {
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
- + span {
347
+ + .tick-label {
325
348
  border-radius: 50%;
326
349
  }
327
350
 
328
- &:checked + span {
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
- + span {
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 + span {
378
+ &:checked + .tick-label {
356
379
  box-shadow: 0 0 0 10px $cerulean inset;
357
380
  }
358
381
 
359
- &:checked + span:before {
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: $lima;
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: $lima;
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: $lima;
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
- letter-spacing: -.015em;
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(26px, 23px, on);
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: 4px 6px;
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*=language-],
369
- code[class*=language-] {
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: $lima; }
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: $lima; }
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: $nobel; }
392
+ .cm-attribute { color: $flush; }
393
393
  .cm-header { color: $cerulean; }
394
- .cm-quote { color: $lima; }
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: $lima; }
402
+ .cm-variable { color: $apple; }
403
403
  }
404
404
 
405
405
  .cm-negative { color: $rose; }
406
- .cm-positive { color: $lima; }
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
+ // }