@internetstiftelsen/styleguide 5.0.15 → 5.0.17

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 (14) hide show
  1. package/dist/assets/js/iconToggle.js +6 -7
  2. package/package.json +1 -1
  3. package/src/app.scss +1 -0
  4. package/src/assets/js/iconToggle.js +10 -10
  5. package/src/atoms/icon/_all-icons.zip +0 -0
  6. package/src/atoms/icon/heading-2.svg +15 -0
  7. package/src/atoms/icon/heading-3.svg +15 -0
  8. package/src/atoms/icon/richtext-ordered-list.svg +7 -0
  9. package/src/atoms/icon/sprite.svg +25 -2
  10. package/src/configurations/icons.json +1 -1
  11. package/src/molecules/glider/_glider-course.scss +44 -0
  12. package/src/molecules/icon-overlay/_icon-overlay.scss +1 -0
  13. package/src/molecules/simple-flow-chart/_simple-flow-chart.scss +60 -0
  14. package/src/molecules/simple-flow-chart/simple-flow-chart.config.js +24 -0
package/dist/assets/js/iconToggle.js CHANGED
@@ -1,11 +1,7 @@
1
1
  'use strict';
2
2
 
3
3
  // Usage: data-toggle-icon-target="targetSvg" data-toggle-icon="copy|check"
4
- function toggleIconOnClick(e) {
5
- e.preventDefault();
6
-
7
- var el = e.target;
8
-
4
+ function toggleIconOnClick(el) {
9
5
  var target = el.dataset.toggleIconTarget ? document.getElementById(el.dataset.toggleIconTarget) : el;
10
6
  var i = parseInt(el.dataset.iconIteration || 0, 10);
11
7
  var options = el.dataset.toggleIcon.split('|');
@@ -17,8 +13,11 @@ function toggleIconOnClick(e) {
17
13
  }
18
14
 
19
15
  document.addEventListener('click', function (e) {
20
- if (e.target.closest('[data-toggle-icon]')) {
21
- toggleIconOnClick(e);
16
+ var target = e.target.closest('[data-toggle-icon]');
17
+
18
+ if (target) {
19
+ e.preventDefault();
20
+ toggleIconOnClick(target);
22
21
  return false;
23
22
  }
24
23
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@internetstiftelsen/styleguide",
3
- "version": "5.0.15",
3
+ "version": "5.0.17",
4
4
  "main": "dist/components.js",
5
5
  "ports": {
6
6
  "fractal": "3000"
package/src/app.scss CHANGED
@@ -67,6 +67,7 @@
67
67
  @use 'molecules/overview-navigation/overview-navigation';
68
68
  @use 'molecules/multi-select/multi-select';
69
69
  @use 'molecules/input-group/input-group';
70
+ @use 'molecules/simple-flow-chart/simple-flow-chart';
70
71
 
71
72
  // Organisms
72
73
  @use 'organisms/header/header';
package/src/assets/js/iconToggle.js CHANGED
@@ -1,23 +1,23 @@
1
1
  // Usage: data-toggle-icon-target="targetSvg" data-toggle-icon="copy|check"
2
- function toggleIconOnClick(e) {
3
- e.preventDefault();
4
-
5
- const el = e.target;
6
-
7
- const target = (el.dataset.toggleIconTarget) ? document.getElementById(el.dataset.toggleIconTarget) : el;
2
+ function toggleIconOnClick(el) {
3
+ const target = el.dataset.toggleIconTarget
4
+ ? document.getElementById(el.dataset.toggleIconTarget)
5
+ : el;
8
6
  const i = parseInt(el.dataset.iconIteration || 0, 10);
9
7
  const options = el.dataset.toggleIcon.split('|');
10
- const nextIteration = (i + 1) === options.length ? 0 : i + 1;
8
+ const nextIteration = i + 1 === options.length ? 0 : i + 1;
11
9
 
12
10
  el.dataset.iconIteration = nextIteration;
13
11
  const useElement = target.querySelector('use');
14
12
  useElement.setAttribute('xlink:href', `#icon-${options[nextIteration]}`);
15
13
  }
16
14
 
17
-
18
15
  document.addEventListener('click', (e) => {
19
- if (e.target.closest('[data-toggle-icon]')) {
20
- toggleIconOnClick(e);
16
+ let target = e.target.closest('[data-toggle-icon]');
17
+
18
+ if (target) {
19
+ e.preventDefault();
20
+ toggleIconOnClick(target);
21
21
  return false;
22
22
  }
23
23
  });
package/src/atoms/icon/_all-icons.zip CHANGED
Binary file
package/src/atoms/icon/heading-2.svg ADDED
@@ -0,0 +1,15 @@
1
+ <?xml version="1.0" encoding="UTF-8"?>
2
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 15" width="17" height="15">
3
+ <defs>
4
+ <style>
5
+ .cls-1 {
6
+ fill: none;
7
+ }
8
+ </style>
9
+ </defs>
10
+ <g>
11
+ <path d="M.07,2.35h1.9v4.09h4.4V2.35h1.9v10.23h-1.9v-4.39H1.97v4.39H.07V2.35Z"/>
12
+ <path d="M10.31,10.88c.82-.59,1.52-1.13,2.12-1.63.6-.5,1.13-1.08,1.59-1.72.46-.65.69-1.3.69-1.96,0-.46-.12-.84-.37-1.13-.25-.29-.61-.43-1.09-.43-.56,0-.98.2-1.25.6-.27.4-.42.9-.44,1.49l-1.79-.14c0-.63.14-1.23.42-1.8.28-.57.69-1.03,1.22-1.39.53-.36,1.16-.53,1.89-.53.62,0,1.18.14,1.66.4s.87.65,1.14,1.14c.27.49.41,1.06.41,1.71,0,1.03-.34,2.01-1.03,2.93-.68.92-1.61,1.74-2.79,2.46h4.22v1.7h-7.06v-1.38l.45-.32Z"/>
13
+ </g>
14
+ <rect class="cls-1" width="17" height="15"/>
15
+ </svg>
package/src/atoms/icon/heading-3.svg ADDED
@@ -0,0 +1,15 @@
1
+ <?xml version="1.0" encoding="UTF-8"?>
2
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 15" width="17" height="15">
3
+ <defs>
4
+ <style>
5
+ .cls-1 {
6
+ fill: none;
7
+ }
8
+ </style>
9
+ </defs>
10
+ <g>
11
+ <path d="M.02,2.36h1.89v4.05h4.37V2.36h1.89v10.15h-1.89v-4.35H1.91v4.35H.02V2.36Z"/>
12
+ <path d="M11.15,12.22c-.57-.28-1.02-.67-1.33-1.18-.32-.5-.47-1.09-.47-1.75l1.8-.11c0,.35.08.65.25.91.17.26.41.46.72.6s.67.21,1.08.21c.6,0,1.07-.13,1.41-.4.33-.27.5-.64.5-1.12,0-.52-.21-.9-.63-1.13-.42-.23-1.04-.34-1.85-.34v-1.42c.59,0,1.06-.11,1.39-.32.34-.21.51-.54.51-.99,0-.38-.13-.68-.38-.9-.25-.22-.59-.33-1.02-.33-.47,0-.84.13-1.11.38-.27.25-.41.59-.42,1.03l-1.78-.12c0-.58.14-1.1.43-1.55.29-.46.69-.82,1.2-1.07.52-.26,1.09-.39,1.74-.39.61,0,1.16.12,1.63.35s.85.56,1.12.98.4.9.4,1.44c0,.46-.11.86-.34,1.2-.23.34-.54.61-.93.8.57.19,1.02.49,1.35.9.34.41.5.91.5,1.51,0,.64-.16,1.2-.48,1.69-.32.49-.76.87-1.34,1.14-.57.27-1.23.41-1.97.41s-1.41-.14-1.98-.42Z"/>
13
+ </g>
14
+ <rect class="cls-1" width="17" height="15"/>
15
+ </svg>
package/src/atoms/icon/richtext-ordered-list.svg ADDED
@@ -0,0 +1,7 @@
1
+ <?xml version="1.0" encoding="UTF-8"?>
2
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 15" width="17" height="15">
3
+ <path d="M5.55.75h10.93v2H5.55V.75ZM5.55,5.96h10.93v2H5.55v-2ZM5.55,11.17h10.93v2H5.55v-2Z"/>
4
+ <path d="M1.22,1.13H.34v-.6h.49c.13,0,.23-.03.29-.09.06-.06.1-.15.1-.29v-.16h.75v3.48h-.75V1.13Z"/>
5
+ <path d="M.18,7.89c.27-.18.5-.36.71-.53.21-.17.39-.36.56-.58s.25-.44.25-.65c0-.13-.03-.24-.1-.32s-.16-.12-.3-.12c-.29,0-.45.21-.48.63l-.74-.06c0-.21.05-.42.15-.62.1-.2.24-.37.43-.49s.41-.19.67-.19c.22,0,.41.05.58.14.17.09.3.23.4.4s.15.37.15.6c0,.32-.09.63-.28.92-.19.29-.46.54-.81.76h1.23v.7H.11v-.55s.05-.04.07-.05Z"/>
6
+ <path d="M.64,13.72c-.2-.1-.36-.24-.47-.42-.11-.18-.17-.39-.17-.62l.75-.04c0,.1.02.19.07.27.05.08.12.14.21.18.09.04.2.06.32.06.18,0,.31-.04.41-.11s.15-.18.15-.32c0-.15-.06-.25-.18-.32s-.31-.1-.57-.1v-.59c.18,0,.31-.03.4-.09.09-.06.14-.15.14-.28,0-.11-.03-.19-.1-.25-.07-.06-.16-.09-.28-.09-.14,0-.24.04-.32.11-.08.07-.12.17-.12.29l-.75-.05c0-.2.05-.39.15-.55.1-.16.25-.29.43-.38.18-.09.39-.14.62-.14.21,0,.41.04.57.12.17.08.3.2.39.34s.14.32.14.51c0,.14-.03.27-.09.38-.06.11-.14.21-.25.28.17.07.31.18.4.32.09.14.14.3.14.49,0,.22-.06.42-.17.6-.11.17-.27.31-.47.4-.2.1-.43.14-.7.14s-.5-.05-.7-.15Z"/>
7
+ </svg>
package/src/atoms/icon/sprite.svg CHANGED
@@ -300,6 +300,26 @@
300
300
  <path d="M.55 13.209h4.844c2.109 0 4.056-1.292 4.056-3.6a3.45 3.45 0 0 0-2-3.041A2.797 2.797 0 0 0 8.83 4.14C8.83 1.653 6.747.791 4.857.791H.55v12.418zm2.232-7.418V2.803h2.111c1.063 0 1.89.492 1.89 1.459 0 1.222-.844 1.529-1.714 1.529H2.782zm0 5.291V7.716h2.559A1.734 1.734 0 0 1 7.25 9.359c0 1.169-.67 1.723-1.821 1.723H2.782z"/>
301
301
  </symbol>
302
302
 
303
+ <symbol id="icon-richtext-italic" viewbox="0 0 10 14">
304
+ <path d="M10.082 2.282v-2H4.364v2h1.508l-3.908 9.436H-.082v2h5.718v-2H4.129l3.908-9.436z"/>
305
+ </symbol>
306
+
307
+ <symbol id="icon-heading-2" viewbox="0 0 17 15">
308
+ <g>
309
+ <path d="M.07,2.35h1.9v4.09h4.4V2.35h1.9v10.23h-1.9v-4.39H1.97v4.39H.07V2.35Z"/>
310
+ <path d="M10.31,10.88c.82-.59,1.52-1.13,2.12-1.63.6-.5,1.13-1.08,1.59-1.72.46-.65.69-1.3.69-1.96,0-.46-.12-.84-.37-1.13-.25-.29-.61-.43-1.09-.43-.56,0-.98.2-1.25.6-.27.4-.42.9-.44,1.49l-1.79-.14c0-.63.14-1.23.42-1.8.28-.57.69-1.03,1.22-1.39.53-.36,1.16-.53,1.89-.53.62,0,1.18.14,1.66.4s.87.65,1.14,1.14c.27.49.41,1.06.41,1.71,0,1.03-.34,2.01-1.03,2.93-.68.92-1.61,1.74-2.79,2.46h4.22v1.7h-7.06v-1.38l.45-.32Z"/>
311
+ </g>
312
+ <rect style="fill:none;" width="17" height="15"/>
313
+ </symbol>
314
+
315
+ <symbol id="icon-heading-3" viewbox="0 0 17 15">
316
+ <g>
317
+ <path d="M.02,2.36h1.89v4.05h4.37V2.36h1.89v10.15h-1.89v-4.35H1.91v4.35H.02V2.36Z"/>
318
+ <path d="M11.15,12.22c-.57-.28-1.02-.67-1.33-1.18-.32-.5-.47-1.09-.47-1.75l1.8-.11c0,.35.08.65.25.91.17.26.41.46.72.6s.67.21,1.08.21c.6,0,1.07-.13,1.41-.4.33-.27.5-.64.5-1.12,0-.52-.21-.9-.63-1.13-.42-.23-1.04-.34-1.85-.34v-1.42c.59,0,1.06-.11,1.39-.32.34-.21.51-.54.51-.99,0-.38-.13-.68-.38-.9-.25-.22-.59-.33-1.02-.33-.47,0-.84.13-1.11.38-.27.25-.41.59-.42,1.03l-1.78-.12c0-.58.14-1.1.43-1.55.29-.46.69-.82,1.2-1.07.52-.26,1.09-.39,1.74-.39.61,0,1.16.12,1.63.35s.85.56,1.12.98.4.9.4,1.44c0,.46-.11.86-.34,1.2-.23.34-.54.61-.93.8.57.19,1.02.49,1.35.9.34.41.5.91.5,1.51,0,.64-.16,1.2-.48,1.69-.32.49-.76.87-1.34,1.14-.57.27-1.23.41-1.97.41s-1.41-.14-1.98-.42Z"/>
319
+ </g>
320
+ <rect style="fill:none;" width="17" height="15"/>
321
+ </symbol>
322
+
303
323
  <symbol id="icon-richtext-bullet-list" viewbox="0 0 17 15">
304
324
  <circle cx="1.86" cy="2.291" r="1.86"/>
305
325
  <circle cx="1.86" cy="7.5" r="1.86"/>
@@ -307,8 +327,11 @@
307
327
  <path d="M6.07 1.291H17v2H6.07zM6.07 6.5H17v2H6.07zM6.07 11.709H17v2H6.07z"/>
308
328
  </symbol>
309
329
 
310
- <symbol id="icon-richtext-italic" viewbox="0 0 10 14">
311
- <path d="M10.082 2.282v-2H4.364v2h1.508l-3.908 9.436H-.082v2h5.718v-2H4.129l3.908-9.436z"/>
330
+ <symbol id="icon-richtext-ordered-list" viewbox="0 0 17 15">
331
+ <path d="M5.55.75h10.93v2H5.55V.75ZM5.55,5.96h10.93v2H5.55v-2ZM5.55,11.17h10.93v2H5.55v-2Z"/>
332
+ <path d="M1.22,1.13H.34v-.6h.49c.13,0,.23-.03.29-.09.06-.06.1-.15.1-.29v-.16h.75v3.48h-.75V1.13Z"/>
333
+ <path d="M.18,7.89c.27-.18.5-.36.71-.53.21-.17.39-.36.56-.58s.25-.44.25-.65c0-.13-.03-.24-.1-.32s-.16-.12-.3-.12c-.29,0-.45.21-.48.63l-.74-.06c0-.21.05-.42.15-.62.1-.2.24-.37.43-.49s.41-.19.67-.19c.22,0,.41.05.58.14.17.09.3.23.4.4s.15.37.15.6c0,.32-.09.63-.28.92-.19.29-.46.54-.81.76h1.23v.7H.11v-.55s.05-.04.07-.05Z"/>
334
+ <path d="M.64,13.72c-.2-.1-.36-.24-.47-.42-.11-.18-.17-.39-.17-.62l.75-.04c0,.1.02.19.07.27.05.08.12.14.21.18.09.04.2.06.32.06.18,0,.31-.04.41-.11s.15-.18.15-.32c0-.15-.06-.25-.18-.32s-.31-.1-.57-.1v-.59c.18,0,.31-.03.4-.09.09-.06.14-.15.14-.28,0-.11-.03-.19-.1-.25-.07-.06-.16-.09-.28-.09-.14,0-.24.04-.32.11-.08.07-.12.17-.12.29l-.75-.05c0-.2.05-.39.15-.55.1-.16.25-.29.43-.38.18-.09.39-.14.62-.14.21,0,.41.04.57.12.17.08.3.2.39.34s.14.32.14.51c0,.14-.03.27-.09.38-.06.11-.14.21-.25.28.17.07.31.18.4.32.09.14.14.3.14.49,0,.22-.06.42-.17.6-.11.17-.27.31-.47.4-.2.1-.43.14-.7.14s-.5-.05-.7-.15Z"/>
312
335
  </symbol>
313
336
 
314
337
  <symbol id="icon-streaming" viewbox="0 0 28 20">
package/src/configurations/icons.json CHANGED
@@ -1 +1 @@
1
- [{"id":"search","name":"Search"},{"id":"search-domain","name":"Search Domain"},{"id":"arrow-forwards","name":"Arrow Forwards"},{"id":"arrow-backwards","name":"Arrow Backwards"},{"id":"arrow-down","name":"Arrow Down"},{"id":"arrow-variant","name":"Arrow Variant"},{"id":"hamburger","name":"Hamburger"},{"id":"close","name":"Close"},{"id":"check","name":"Check"},{"id":"quote","name":"Quote"},{"id":"file","name":"File"},{"id":"download","name":"Download"},{"id":"upload","name":"Upload"},{"id":"filter","name":"Filter"},{"id":"read","name":"Read"},{"id":"pin","name":"Pin"},{"id":"user","name":"User"},{"id":"language","name":"Language"},{"id":"linkedin","name":"Linkedin"},{"id":"facebook","name":"Facebook"},{"id":"instagram","name":"Instagram"},{"id":"twitter","name":"Twitter"},{"id":"x","name":"X"},{"id":"external-link","name":"External Link"},{"id":"app-share","name":"App Share"},{"id":"print","name":"Print"},{"id":"chapters","name":"Chapters"},{"id":"article","name":"Article"},{"id":"padlock","name":"Padlock"},{"id":"trash","name":"Trash"},{"id":"link","name":"Link"},{"id":"share","name":"Share"},{"id":"questionmark","name":"Questionmark"},{"id":"info","name":"Info"},{"id":"contrast","name":"Contrast"},{"id":"gauge","name":"Gauge"},{"id":"backward-15","name":"Backward 15"},{"id":"step-backwards","name":"Step Backwards"},{"id":"play","name":"Play"},{"id":"step-forwards","name":"Step Forwards"},{"id":"forward-60","name":"Forward 60"},{"id":"pause","name":"Pause"},{"id":"subtitles","name":"Subtitles"},{"id":"author","name":"Author"},{"id":"copy","name":"Copy"},{"id":"speaker","name":"Speaker"},{"id":"mute","name":"Mute"},{"id":"settings","name":"Settings"},{"id":"lte","name":"Lte"},{"id":"wifi","name":"Wifi"},{"id":"reception","name":"Reception"},{"id":"2g","name":"2g"},{"id":"3g","name":"3g"},{"id":"4g","name":"4g"},{"id":"5g","name":"5g"},{"id":"latency","name":"Latency"},{"id":"spinner","name":"Spinner"},{"id":"spinner-white","name":"Spinner White"},{"id":"3d","name":"3d"},{"id":"accessibility","name":"Accessibility"},{"id":"cafe","name":"Cafe"},{"id":"capacity","name":"Capacity"},{"id":"display","name":"Display"},{"id":"email","name":"Email"},{"id":"headset","name":"Headset"},{"id":"phone","name":"Phone"},{"id":"plus","name":"Plus"},{"id":"podcast","name":"Podcast"},{"id":"richtext-bold","name":"Richtext Bold"},{"id":"richtext-bullet-list","name":"Richtext Bullet List"},{"id":"richtext-italic","name":"Richtext Italic"},{"id":"streaming","name":"Streaming"},{"id":"time","name":"Time"},{"id":"drag-item","name":"Drag Item"},{"id":"personal-data","name":"Personal Data"},{"id":"romance","name":"Romance"},{"id":"shopping","name":"Shopping"},{"id":"warning","name":"Warning"},{"id":"diamond","name":"Diamond"},{"id":"world","name":"World"},{"id":"table","name":"Table"}]
1
+ [{"id":"search","name":"Search"},{"id":"search-domain","name":"Search Domain"},{"id":"arrow-forwards","name":"Arrow Forwards"},{"id":"arrow-backwards","name":"Arrow Backwards"},{"id":"arrow-down","name":"Arrow Down"},{"id":"arrow-variant","name":"Arrow Variant"},{"id":"hamburger","name":"Hamburger"},{"id":"close","name":"Close"},{"id":"check","name":"Check"},{"id":"quote","name":"Quote"},{"id":"file","name":"File"},{"id":"download","name":"Download"},{"id":"upload","name":"Upload"},{"id":"filter","name":"Filter"},{"id":"read","name":"Read"},{"id":"pin","name":"Pin"},{"id":"user","name":"User"},{"id":"language","name":"Language"},{"id":"linkedin","name":"Linkedin"},{"id":"facebook","name":"Facebook"},{"id":"instagram","name":"Instagram"},{"id":"twitter","name":"Twitter"},{"id":"x","name":"X"},{"id":"external-link","name":"External Link"},{"id":"app-share","name":"App Share"},{"id":"print","name":"Print"},{"id":"chapters","name":"Chapters"},{"id":"article","name":"Article"},{"id":"padlock","name":"Padlock"},{"id":"trash","name":"Trash"},{"id":"link","name":"Link"},{"id":"share","name":"Share"},{"id":"questionmark","name":"Questionmark"},{"id":"info","name":"Info"},{"id":"contrast","name":"Contrast"},{"id":"gauge","name":"Gauge"},{"id":"backward-15","name":"Backward 15"},{"id":"step-backwards","name":"Step Backwards"},{"id":"play","name":"Play"},{"id":"step-forwards","name":"Step Forwards"},{"id":"forward-60","name":"Forward 60"},{"id":"pause","name":"Pause"},{"id":"subtitles","name":"Subtitles"},{"id":"author","name":"Author"},{"id":"copy","name":"Copy"},{"id":"speaker","name":"Speaker"},{"id":"mute","name":"Mute"},{"id":"settings","name":"Settings"},{"id":"lte","name":"Lte"},{"id":"wifi","name":"Wifi"},{"id":"reception","name":"Reception"},{"id":"2g","name":"2g"},{"id":"3g","name":"3g"},{"id":"4g","name":"4g"},{"id":"5g","name":"5g"},{"id":"latency","name":"Latency"},{"id":"spinner","name":"Spinner"},{"id":"spinner-white","name":"Spinner White"},{"id":"3d","name":"3d"},{"id":"accessibility","name":"Accessibility"},{"id":"cafe","name":"Cafe"},{"id":"capacity","name":"Capacity"},{"id":"display","name":"Display"},{"id":"email","name":"Email"},{"id":"headset","name":"Headset"},{"id":"phone","name":"Phone"},{"id":"plus","name":"Plus"},{"id":"podcast","name":"Podcast"},{"id":"richtext-bold","name":"Richtext Bold"},{"id":"richtext-italic","name":"Richtext Italic"},{"id":"heading-2","name":"Heading 2"},{"id":"heading-3","name":"Heading 3"},{"id":"richtext-bullet-list","name":"Richtext Bullet List"},{"id":"richtext-ordered-list","name":"Richtext Ordered List"},{"id":"streaming","name":"Streaming"},{"id":"time","name":"Time"},{"id":"drag-item","name":"Drag Item"},{"id":"personal-data","name":"Personal Data"},{"id":"romance","name":"Romance"},{"id":"shopping","name":"Shopping"},{"id":"warning","name":"Warning"},{"id":"diamond","name":"Diamond"},{"id":"world","name":"World"},{"id":"table","name":"Table"}]
package/src/molecules/glider/_glider-course.scss CHANGED
@@ -123,5 +123,49 @@
123
123
  margin-top: 0;
124
124
  }
125
125
  }
126
+
127
+ @include bem.e(info-box) {
128
+ margin-top: 0;
129
+
130
+ @include breakpoint.bp-up(lg) {
131
+ margin-bottom: 0;
132
+ }
133
+
134
+ ol {
135
+ list-style-type: none;
136
+ counter-reset: list-counter;
137
+ padding-left: 0;
138
+
139
+ li {
140
+ padding-left: func.rhythm(5);
141
+ margin-bottom: func.rhythm(1);
142
+ position: relative;
143
+
144
+ * {
145
+ display: inline;
146
+ }
147
+
148
+ &::before {
149
+ content: counter(list-counter);
150
+ counter-increment: list-counter;
151
+ display: inline-flex;
152
+ margin-right: func.rhythm(2);
153
+ background-color: colors.$color-ruby;
154
+ color: colors.$color-snow;
155
+ width: var.$icon-size-large;
156
+ height: var.$icon-size-large;
157
+ flex-grow: 0;
158
+ flex-shrink: 0;
159
+ border-radius: 50%;
160
+ align-items: center;
161
+ justify-content: center;
162
+ line-height: 1;
163
+ position: absolute;
164
+ top: func.to_rem(4px);
165
+ left: 0;
166
+ }
167
+ }
168
+ }
169
+ }
126
170
  }
127
171
  }
package/src/molecules/icon-overlay/_icon-overlay.scss CHANGED
@@ -21,6 +21,7 @@
21
21
  object-fit: cover;
22
22
  object-position: 50% center;
23
23
  min-height: 100%;
24
+ aspect-ratio: 16 / 9;
24
25
  }
25
26
 
26
27
  img {
package/src/molecules/simple-flow-chart/_simple-flow-chart.scss ADDED
@@ -0,0 +1,60 @@
1
+ @charset "UTF-8";
2
+ @use "sass:math";
3
+ @use "sass:color";
4
+ @use '../../configurations/mixins' as mixin;
5
+ @use '../../configurations/bem' as bem;
6
+ @use '../../configurations/config' as config;
7
+ @use '../../configurations/variables' as var;
8
+ @use '../../configurations/functions' as func;
9
+ @use '../../configurations/colors/colors' as colors;
10
+ @use '../../configurations/colors/colors-functions' as colorFunc;
11
+ @use '../../vendor/grid/breakpoints' as breakpoint;
12
+ @use '../../vendor/grid/grid' as grid;
13
+
14
+ @include mixin.molecule(simple-flow-chart) {
15
+ list-style: none;
16
+ margin:0 ;
17
+ padding: 0;
18
+
19
+ @include bem.m(jade) {
20
+ background: rgb(45,137,122);
21
+ background: linear-gradient(180deg, rgba(45,137,122,1) 0%, rgba(208,240,234,1) 100%);
22
+ }
23
+
24
+ @include bem.e(item) {
25
+ padding: func.rhythm(3) func.rhythm(2);
26
+ position: relative;
27
+ text-align: center;
28
+ font-family: var.$font-family-headings;
29
+ font-size: calc(var.$size-base * 1.5);
30
+
31
+ & + & {
32
+ border-top: func.rhythm(1) solid colors.$color-snow;
33
+ }
34
+
35
+ &::after {
36
+ top: 100%;
37
+ left: 50%;
38
+ border: solid transparent;
39
+ content: '';
40
+ height: 0;
41
+ width: 0;
42
+ position: absolute;
43
+ pointer-events: none;
44
+ border-color: rgba(255, 255, 255, 0);
45
+ border-top-color: #ffffff;
46
+ border-width: func.rhythm(3) func.rhythm(5) 0 func.rhythm(5);
47
+ transform: translateX(-50%);
48
+ }
49
+
50
+ &:first-child {
51
+ color: colors.$color-snow;
52
+ }
53
+
54
+ &:last-child {
55
+ &::after {
56
+ display: none;
57
+ }
58
+ }
59
+ }
60
+ }
package/src/molecules/simple-flow-chart/simple-flow-chart.config.js ADDED
@@ -0,0 +1,24 @@
1
+ module.exports = {
2
+ status: 'prototype',
3
+ default: 'jade',
4
+
5
+ context: {
6
+ background_color: '#ffce2e',
7
+ icon_fill_color: '#1f2a36',
8
+ icon_background_hover_color: '#ffce2e',
9
+ },
10
+ variants: [
11
+ {
12
+ name: 'jade',
13
+ context: {
14
+ color: 'jade'
15
+ }
16
+ },
17
+ {
18
+ name: 'ruby',
19
+ context: {
20
+ color: 'jade'
21
+ }
22
+ },
23
+ ]
24
+ };