@internetstiftelsen/styleguide 4.0.5 → 4.0.6-beta.0.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 (6) hide show
  1. package/package.json +1 -1
  2. package/src/atoms/icon/_all-icons.zip +0 -0
  3. package/src/atoms/icon/sprite.svg +4 -0
  4. package/src/atoms/icon/table.svg +3 -0
  5. package/src/configurations/icons.json +1 -1
  6. package/src/organisms/tabs/_tabs.scss +13 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@internetstiftelsen/styleguide",
3
- "version": "4.0.5",
3
+ "version": "4.0.6-beta.0.2",
4
4
  "main": "dist/components.js",
5
5
  "ports": {
6
6
  "fractal": "3000"
package/src/atoms/icon/_all-icons.zip CHANGED
Binary file
package/src/atoms/icon/sprite.svg CHANGED
@@ -352,5 +352,9 @@
352
352
  <path d="M16 .5C7.4.5.5 7.4.5 16S7.4 31.5 16 31.5 31.5 24.6 31.5 16 24.6.5 16 .5zM7.1 7.2c.8-.8 1.6-1.4 2.5-2l-.8 2.5h2.4l2.4-2.4V4.1h-1.2l-1.2 1.2v-.9c1.5-.6 3.1-.9 4.8-.9 2.4 0 4.7.7 6.6 1.9v.1L24 6.9l-1.3 1.3-1.9-1.8h-2.4l-2.4 3 1.2 2.6 1.2-.8V10h1.2l1.3 1.1-1.3 1.3-4.8 2.4h-1.2v2.4h1.2l2.4-1.2 1.2 1.2h2.4V16l1-1.4 2.6-1V16H22v1.2h2.4l2.4 3.6 1.2-1.2v-1.2h-1.2v-1.2H28l.5-.1c-.2 2.2-1 4.3-2.2 6.1h-.8l-2.9-4.8-3 1.2-3.6-1.2-3.6 1.2-1.2 3.6 1.2 2.4h2.4l1.2-1.2 1.2 1.2v2.9c-.4 0-.8.1-1.2.1C9.1 28.5 3.5 22.9 3.5 16c0-1.2.2-2.4.5-3.6h1.2V9.6c.4-.7.9-1.4 1.4-2l.5-.4z"/>
353
353
  <path d="M13.6 10h1.2v2.4h-1.2z"/>
354
354
  </symbol>
355
+
356
+ <symbol id="icon-table" viewbox="0 0 32 32">
357
+ <path d="M1.9 5.9v20.3h28.2V5.9H1.9Zm25.9 2.2v3.5l-23.6-.2V8.1h23.6ZM11.7 19.5v-3h7.9v3.1h-7.9Zm8 1.1v3.3h-7.9v-3.3h7.9Zm-.1-8v3h-7.8v-3h7.8Zm-8.9 2.9H4.2v-3h6.5v3Zm-6.5 1h6.5v3H4.2v-3Zm16.4.1h7.2v3h-7.2v-3Zm0-1v-3h7.2v3h-7.2ZM4.2 20.5h6.5v3.4H4.2v-3.4Zm16.5 3.3v-3.2h7.1v3.2h-7.1Z"/>
358
+ </symbol>
355
359
  </defs>
356
360
  </svg>
package/src/atoms/icon/table.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32" width="32" height="32">
2
+ <path d="M1.9 5.9v20.3h28.2V5.9H1.9Zm25.9 2.2v3.5l-23.6-.2V8.1h23.6ZM11.7 19.5v-3h7.9v3.1h-7.9Zm8 1.1v3.3h-7.9v-3.3h7.9Zm-.1-8v3h-7.8v-3h7.8Zm-8.9 2.9H4.2v-3h6.5v3Zm-6.5 1h6.5v3H4.2v-3Zm16.4.1h7.2v3h-7.2v-3Zm0-1v-3h7.2v3h-7.2ZM4.2 20.5h6.5v3.4H4.2v-3.4Zm16.5 3.3v-3.2h7.1v3.2h-7.1Z"/>
3
+ </svg>
package/src/configurations/icons.json CHANGED
@@ -1 +1 @@
1
- [{"id":"search","name":"Search"},{"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":"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"}]
1
+ [{"id":"search","name":"Search"},{"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":"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"}]
package/src/organisms/tabs/_tabs.scss CHANGED
@@ -4,9 +4,14 @@
4
4
  overflow: hidden;
5
5
  display: flex;
6
6
  position: relative;
7
+ z-index: 3;
7
8
  margin: 0;
8
9
  padding: 0;
9
10
  overflow: auto;
11
+ mask-image: linear-gradient(-90deg, rgba(237, 237, 237, 0) 0%, rgba(237, 237, 237, 0) 5%, rgba(237, 237, 237, 1) 10%, rgba(237, 237, 237, 1) 100%);
12
+ mask-repeat: repeat-y;
13
+ mask-position: top right;
14
+ mask-size: 100% rhythm(6);
10
15
 
11
16
  &::-webkit-scrollbar {
12
17
  position: absolute;
@@ -17,7 +22,7 @@
17
22
  }
18
23
 
19
24
  &::-webkit-scrollbar-track {
20
- background-color: $color-ash;
25
+ background-color: $color-concrete;
21
26
  }
22
27
 
23
28
  &::-webkit-scrollbar-thumb {
@@ -38,7 +43,7 @@
38
43
  right: 0;
39
44
  bottom: 0;
40
45
  width: rhythm(3);
41
- background: linear-gradient(90deg, rgba(237, 237, 237, 0) 0%, rgba(237, 237, 237, 1) 75%, rgba(237, 237, 237, 1) 100%);
46
+ height: rhythm(6);
42
47
  }
43
48
 
44
49
 
@@ -64,11 +69,15 @@
64
69
  background-color: $color-concrete;
65
70
  color: $color-cyberspace;
66
71
  text-decoration: none;
72
+ border: 1px solid $color-ash;
73
+ border-bottom: 0;
67
74
 
68
75
  &:hover,
69
76
  &:focus {
70
77
  border-top-left-radius: $border-radius;
71
78
  border-top-right-radius: $border-radius;
79
+ border: 1px solid $color-ash;
80
+ border-bottom: 0;
72
81
  }
73
82
 
74
83
  &:hover {
@@ -85,12 +94,14 @@
85
94
 
86
95
  @include organism(tab-panel) {
87
96
  position: relative;
97
+ top: -2px;
88
98
  z-index: 2;
89
99
  padding: rhythm(2) rhythm(3);
90
100
  border-top-right-radius: $border-radius;
91
101
  border-bottom-right-radius: $border-radius;
92
102
  border-bottom-left-radius: $border-radius;
93
103
  background-color: $color-snow;
104
+ border: 1px solid $color-ash;
94
105
 
95
106
  &[aria-hidden='true'] {
96
107
  display: none;