@internetstiftelsen/styleguide 4.1.13-beta.0.2 → 5.0.0

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 (145) hide show
  1. package/package.json +29 -29
  2. package/src/app.scss +85 -88
  3. package/src/atoms/archive-link/archive-link.scss +24 -17
  4. package/src/atoms/button/_button.scss +209 -203
  5. package/src/atoms/checkbox/_checkbox.scss +33 -26
  6. package/src/atoms/file/_file.scss +23 -13
  7. package/src/atoms/grid-toggle/_grid-toggle.scss +11 -6
  8. package/src/atoms/height-limiter/_height-limiter.scss +21 -14
  9. package/src/atoms/input/_input.scss +23 -16
  10. package/src/atoms/label/label.scss +11 -5
  11. package/src/atoms/logotype/_logotype.scss +3 -2
  12. package/src/atoms/main-menu/_main-menu.scss +67 -60
  13. package/src/atoms/meta/_meta.scss +44 -33
  14. package/src/atoms/meta/meta.config.js +1 -1
  15. package/src/atoms/paging/_paging.scss +27 -21
  16. package/src/atoms/password-toggle/_password-toggle.scss +9 -6
  17. package/src/atoms/progress/_progress.scss +19 -11
  18. package/src/atoms/quote/_quote.scss +17 -10
  19. package/src/atoms/radiobutton/_radiobutton.scss +33 -26
  20. package/src/atoms/range/_range.scss +46 -39
  21. package/src/atoms/rating/_rating.scss +11 -4
  22. package/src/atoms/ribbon/_ribbon.scss +16 -9
  23. package/src/atoms/select/_select.scss +18 -10
  24. package/src/atoms/skip/_skip.scss +9 -6
  25. package/src/atoms/spinner/_spinner.scss +4 -3
  26. package/src/atoms/tag/_tag.scss +26 -19
  27. package/src/atoms/textarea/_textarea.scss +22 -13
  28. package/src/atoms/tooltip/_tooltip.scss +28 -21
  29. package/src/base/_grid.scss +4 -4
  30. package/src/base/_normalize.scss +29 -27
  31. package/src/base/fonts/_fonts.scss +1 -1
  32. package/src/components.js +0 -2
  33. package/src/configurations/_bem.scss +10 -7
  34. package/src/configurations/_config.scss +11 -10
  35. package/src/configurations/_extends.scss +38 -34
  36. package/src/configurations/_functions.scss +23 -7
  37. package/src/configurations/_mixins.scss +23 -19
  38. package/src/configurations/_recaptcha.scss +2 -2
  39. package/src/configurations/_variables.scss +19 -25
  40. package/src/configurations/_wordpress.scss +64 -57
  41. package/src/configurations/colors/_background-colors.scss +3 -2
  42. package/src/configurations/colors/_colors-functions.scss +41 -39
  43. package/src/configurations/colors/_colors.scss +1 -1
  44. package/src/configurations/colors/_text-colors.scss +3 -2
  45. package/src/configurations/colors/_wordpress-colors.scss +3 -2
  46. package/src/configurations/forms/_fields.scss +28 -23
  47. package/src/configurations/grid/_grid.scss +40 -34
  48. package/src/configurations/typography/_typography.scss +113 -105
  49. package/src/configurations/typography/readme.md +1 -1
  50. package/src/globals.scss +16 -18
  51. package/src/isolated-footer.scss +25 -25
  52. package/src/molecules/alert/_alert.scss +44 -35
  53. package/src/molecules/breadcrumb/_breadcrumb.scss +43 -35
  54. package/src/molecules/byline/_byline.scss +30 -21
  55. package/src/molecules/card/_card.scss +87 -77
  56. package/src/molecules/context-menu/_context-menu.scss +32 -15
  57. package/src/molecules/continue-video-guide/continue-video-guide.scss +37 -28
  58. package/src/molecules/cookie-disclaimer/cookie-disclaimer.scss +32 -23
  59. package/src/molecules/download/_download.scss +38 -30
  60. package/src/molecules/form-control/_form-control.scss +66 -58
  61. package/src/molecules/glider/_glider-course.scss +29 -23
  62. package/src/molecules/glider/_glider-hero.scss +112 -104
  63. package/src/molecules/glider/_glider.scss +36 -30
  64. package/src/molecules/icon-overlay/_icon-overlay.scss +29 -20
  65. package/src/molecules/info-box/_info-box.scss +31 -22
  66. package/src/molecules/input-group/_input-group.scss +23 -13
  67. package/src/molecules/modal/_modal.scss +77 -65
  68. package/src/molecules/multi-select/_multi-select.scss +44 -33
  69. package/src/molecules/natural-language-form/_natural-language-form.scss +33 -23
  70. package/src/molecules/overview-navigation/_overview-navigation.scss +54 -45
  71. package/src/molecules/readspeaker/_readspeaker.scss +1 -1
  72. package/src/molecules/share/_share.scss +23 -15
  73. package/src/molecules/submenu/_submenu.scss +77 -69
  74. package/src/molecules/system-error/_system-error.scss +26 -17
  75. package/src/molecules/table/_table.scss +50 -42
  76. package/src/molecules/teaser-news-list/_teaser-news-list.scss +21 -12
  77. package/src/organisms/accordion/_accordion.scss +59 -49
  78. package/src/organisms/domain-search/_domain-search.scss +54 -45
  79. package/src/organisms/event-listing-item/_event-listing-item.scss +36 -26
  80. package/src/organisms/features-box/_features-box.scss +30 -19
  81. package/src/organisms/filter/_filter.scss +15 -10
  82. package/src/organisms/footer/_footer.scss +119 -109
  83. package/src/organisms/header/_header.scss +24 -14
  84. package/src/organisms/hero/_hero--bbk.scss +50 -38
  85. package/src/organisms/hero/_hero--dynamic-headline.scss +49 -39
  86. package/src/organisms/hero/_hero.scss +222 -207
  87. package/src/organisms/hero/hero.config.js +2 -2
  88. package/src/organisms/mailchimp/_mailchimp.scss +52 -42
  89. package/src/organisms/mega-menu/_mega-menu.scss +55 -45
  90. package/src/organisms/members-service-product/_members-service-product.scss +29 -18
  91. package/src/organisms/members-service-product/members-service-product.config.js +5 -5
  92. package/src/organisms/podcast/_podcast-episodes.scss +85 -75
  93. package/src/organisms/podcast/_podcast-player.scss +73 -64
  94. package/src/organisms/schedule/_schedule.scss +92 -82
  95. package/src/organisms/search/_search.scss +68 -58
  96. package/src/organisms/search-result/_search-result.scss +50 -40
  97. package/src/organisms/sections/_sections.scss +41 -31
  98. package/src/organisms/tabs/_tabs.scss +58 -46
  99. package/src/organisms/timeline/_timeline.scss +92 -81
  100. package/src/organisms/video-guide/_video-guide.scss +148 -138
  101. package/src/pages/animate-footer/animate-footer.config.js +180 -1
  102. package/src/print.scss +1 -1
  103. package/src/structures/_article.scss +39 -28
  104. package/src/structures/_core-values.scss +14 -2
  105. package/src/structures/_manifest.scss +4 -4
  106. package/src/structures/_section.scss +32 -20
  107. package/src/structures/_site.scss +19 -7
  108. package/src/theme/_dark-mode.scss +14 -13
  109. package/src/theme/_theme.scss +28 -25
  110. package/src/utilities/_align.scss +1 -1
  111. package/src/utilities/_border.scss +5 -3
  112. package/src/utilities/_box-shadow.scss +5 -2
  113. package/src/utilities/_display.scss +1 -1
  114. package/src/utilities/_fill.scss +5 -4
  115. package/src/utilities/_flex.scss +1 -1
  116. package/src/utilities/_font-size.scss +6 -5
  117. package/src/utilities/_fonts.scss +6 -5
  118. package/src/utilities/_gutter.scss +3 -2
  119. package/src/utilities/_hide.scss +17 -15
  120. package/src/utilities/_icons.scss +37 -33
  121. package/src/utilities/_indent.scss +8 -6
  122. package/src/utilities/_links.scss +22 -18
  123. package/src/utilities/_lists.scss +19 -14
  124. package/src/utilities/_manifest.scss +27 -27
  125. package/src/utilities/_margin.scss +20 -17
  126. package/src/utilities/_misc.scss +3 -2
  127. package/src/utilities/_padding.scss +18 -15
  128. package/src/utilities/_position.scss +3 -2
  129. package/src/utilities/_show.scss +7 -6
  130. package/src/utilities/_text.scss +1 -1
  131. package/src/utilities/_vertical-align.scss +1 -1
  132. package/src/utilities/_wrap.scss +1 -1
  133. package/src/utilities/_z-index.scss +7 -6
  134. package/src/utilities/tab-highlighting/_tab-highlighting.scss +6 -5
  135. package/src/vendor/baseline/_plumber.scss +14 -13
  136. package/src/vendor/grid/_breakpoints.scss +17 -13
  137. package/src/vendor/grid/_flex.scss +8 -4
  138. package/src/vendor/grid/_functions.scss +9 -6
  139. package/src/vendor/grid/_grid-framework.scss +14 -9
  140. package/src/vendor/grid/_grid.scss +19 -16
  141. package/src/vendor/grid/_spacing.scss +8 -3
  142. package/src/atoms/toggle-high-contrast/readme.md +0 -6
  143. package/src/atoms/toggle-high-contrast/toggle-high-contrast.config.js +0 -8
  144. package/src/atoms/toggle-high-contrast/toggle-high-contrast.js +0 -10
  145. package/src/molecules/modal/modal-graph.js +0 -40
package/src/organisms/sections/_sections.scss CHANGED
@@ -1,15 +1,25 @@
1
- @charset 'UTF-8';
2
-
1
+ @charset "UTF-8";
3
2
  @use "sass:math";
4
-
5
- $spacing: rhythm(6);
6
-
7
- @include organism(section) {
3
+ @use "sass:list";
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
+ @use '../../vendor/baseline/plumber' as plumber;
14
+
15
+ $spacing: func.rhythm(6);
16
+
17
+ @include mixin.organism(section) {
8
18
  position: relative;
9
19
  padding: math.div($spacing, 1.5) 0;
10
20
  background-color: var(--ash-color);
11
21
 
12
- @include m(white) {
22
+ @include bem.m(white) {
13
23
  padding: $spacing 0;
14
24
  background-color: var(--snow-color);
15
25
 
@@ -39,10 +49,10 @@ $spacing: rhythm(6);
39
49
  }
40
50
  }
41
51
 
42
- @include bp-up(md) {
52
+ @include breakpoint.bp-up(md) {
43
53
  padding: math.div($spacing * 1.25, 1.5) 0;
44
54
 
45
- @include m('white') {
55
+ @include bem.m('white') {
46
56
  padding: $spacing * 1.25 0;
47
57
 
48
58
  &::before,
@@ -52,10 +62,10 @@ $spacing: rhythm(6);
52
62
  }
53
63
  }
54
64
 
55
- @include bp-up(lg) {
65
+ @include breakpoint.bp-up(lg) {
56
66
  padding: math.div($spacing * 1.5, 1.5) 0;
57
67
 
58
- @include m('white') {
68
+ @include bem.m('white') {
59
69
  padding: $spacing * 1.5 0;
60
70
 
61
71
  &::before,
@@ -65,10 +75,10 @@ $spacing: rhythm(6);
65
75
  }
66
76
  }
67
77
 
68
- @include bp-up(xl) {
78
+ @include breakpoint.bp-up(xl) {
69
79
  padding: math.div($spacing * 2, 1.5) 0;
70
80
 
71
- @include m('white') {
81
+ @include bem.m('white') {
72
82
  padding: $spacing * 2 0;
73
83
 
74
84
  &::before,
@@ -78,42 +88,42 @@ $spacing: rhythm(6);
78
88
  }
79
89
  }
80
90
 
81
- @include e(content) {
91
+ @include bem.e(content) {
82
92
  position: relative;
83
- z-index: z_index(background);
93
+ z-index: func.z_index(background);
84
94
 
85
- @include m(peacock) {
95
+ @include bem.m(peacock) {
86
96
  ::selection {
87
- background-color: $color-peacock-light;
97
+ background-color: colors.$color-peacock-light;
88
98
  }
89
99
 
90
100
  ::-moz-selection {
91
- background-color: $color-peacock-light;
101
+ background-color: colors.$color-peacock-light;
92
102
  }
93
103
  }
94
104
 
95
- @include m(jade) {
105
+ @include bem.m(jade) {
96
106
  ::selection {
97
- background-color: $color-jade-light;
107
+ background-color: colors.$color-jade-light;
98
108
  }
99
109
 
100
110
  ::-moz-selection {
101
- background-color: $color-jade-light;
111
+ background-color: colors.$color-jade-light;
102
112
  }
103
113
  }
104
114
 
105
- @include m(rectangle-left) {
115
+ @include bem.m(rectangle-left) {
106
116
  &::after {
107
117
  content: '';
108
118
  position: absolute;
109
119
  top: 0;
110
120
  left: 0;
111
121
  z-index: 2;
112
- width: rem(575px);
113
- height: rem(575px);
114
- transform: translate(calc(-100% - #{rem(20px)}), -50%) rotate(-20deg);
122
+ width: func.to_rem(575px);
123
+ height: func.to_rem(575px);
124
+ transform: translate(calc(-100% - #{func.to_rem(20px)}), -50%) rotate(-20deg);
115
125
  transform-origin: right bottom;
116
- background-color: $color-peacock;
126
+ background-color: colors.$color-peacock;
117
127
  }
118
128
 
119
129
  // Hide in IE11
@@ -123,18 +133,18 @@ $spacing: rhythm(6);
123
133
  }
124
134
  }
125
135
 
126
- @include m(rectangle-right) {
136
+ @include bem.m(rectangle-right) {
127
137
  &::after {
128
138
  content: '';
129
139
  position: absolute;
130
140
  top: 0;
131
141
  right: 0;
132
142
  z-index: 2;
133
- width: rem(450px);
134
- height: rem(166px);
135
- transform: translate(calc(100% + #{rem(20px)}), 50%) rotate(20deg);
143
+ width: func.to_rem(450px);
144
+ height: func.to_rem(166px);
145
+ transform: translate(calc(100% + #{func.to_rem(20px)}), 50%) rotate(20deg);
136
146
  transform-origin: left bottom;
137
- background-color: $color-ruby;
147
+ background-color: colors.$color-ruby;
138
148
  }
139
149
 
140
150
  // Hide in IE11
package/src/organisms/tabs/_tabs.scss CHANGED
@@ -1,7 +1,19 @@
1
- @charset 'UTF-8';
1
+ @charset "UTF-8";
2
2
  @use "sass:color";
3
-
4
- @include organism(tab-list) {
3
+ @use '../../configurations/mixins' as mixin;
4
+ @use '../../configurations/extends';
5
+ @use '../../utilities/hide';
6
+ @use '../../configurations/bem' as bem;
7
+ @use '../../configurations/config' as config;
8
+ @use '../../configurations/variables' as var;
9
+ @use '../../configurations/functions' as func;
10
+ @use '../../configurations/colors/colors' as colors;
11
+ @use '../../configurations/colors/colors-functions' as colorFunc;
12
+ @use '../../vendor/grid/breakpoints' as breakpoint;
13
+ @use '../../vendor/grid/grid' as grid;
14
+ @use '../../vendor/baseline/plumber' as plumber;
15
+
16
+ @include mixin.organism(tab-list) {
5
17
  overflow: hidden;
6
18
  display: flex;
7
19
  position: relative;
@@ -12,28 +24,28 @@
12
24
  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%);
13
25
  mask-repeat: repeat-y;
14
26
  mask-position: top right;
15
- mask-size: 100% rhythm(6);
27
+ mask-size: 100% func.rhythm(6);
16
28
 
17
29
  &::-webkit-scrollbar {
18
30
  position: absolute;
19
31
  z-index: 2;
20
32
  bottom: 0;
21
33
  left: 0;
22
- height: rhythm(0.5);
34
+ height: func.rhythm(0.5);
23
35
  }
24
36
 
25
37
  &::-webkit-scrollbar-track {
26
- background-color: $color-concrete;
38
+ background-color: colors.$color-concrete;
27
39
  }
28
40
 
29
41
  &::-webkit-scrollbar-thumb {
30
- background-color: $color-granit;
42
+ background-color: colors.$color-granit;
31
43
  }
32
44
 
33
45
  &::before {
34
46
  @extend %u-visuallyhidden;
35
47
 
36
- content: $namespace;
48
+ content: var.$namespace;
37
49
  }
38
50
 
39
51
  &::after {
@@ -43,75 +55,75 @@
43
55
  top: 0;
44
56
  right: 0;
45
57
  bottom: 0;
46
- width: rhythm(3);
47
- height: rhythm(6);
58
+ width: func.rhythm(3);
59
+ height: func.rhythm(6);
48
60
  }
49
61
 
50
62
 
51
- @include e(item) {
63
+ @include bem.e(item) {
52
64
  display: flex;
53
65
  flex: 0 0 auto;
54
66
  padding: 0;
55
67
 
56
68
  + li {
57
- margin-left: rhythm(1);
69
+ margin-left: func.rhythm(1);
58
70
  }
59
71
  }
60
72
 
61
- @include e(link) {
73
+ @include bem.e(link) {
62
74
  @extend %normalize-links;
63
75
 
64
76
  display: inline-flex;
65
77
  position: relative;
66
78
  align-items: center;
67
- padding: rhythm(1.5) rhythm(3);
68
- border-top-left-radius: $border-radius;
69
- border-top-right-radius: $border-radius;
70
- background-color: $color-concrete;
71
- color: $color-cyberspace;
79
+ padding: func.rhythm(1.5) func.rhythm(3);
80
+ border-top-left-radius: var.$border-radius;
81
+ border-top-right-radius: var.$border-radius;
82
+ background-color: colors.$color-concrete;
83
+ color: colors.$color-cyberspace;
72
84
  text-decoration: none;
73
- border: 1px solid $color-ash;
85
+ border: 1px solid colors.$color-ash;
74
86
  border-bottom: 0;
75
87
 
76
88
  &:hover,
77
89
  &:focus {
78
- border-top-left-radius: $border-radius;
79
- border-top-right-radius: $border-radius;
80
- border: 1px solid $color-ash;
90
+ border-top-left-radius: var.$border-radius;
91
+ border-top-right-radius: var.$border-radius;
92
+ border: 1px solid colors.$color-ash;
81
93
  border-bottom: 0;
82
94
  }
83
95
 
84
96
  &:hover {
85
- background-color: color.adjust($color-concrete, $lightness: -5%);
97
+ background-color: color.adjust(colors.$color-concrete, $lightness: -5%);
86
98
  }
87
99
  }
88
100
 
89
101
  [data-tab-active] {
90
102
  a {
91
- background-color: $color-snow;
103
+ background-color: colors.$color-snow;
92
104
  }
93
105
  }
94
106
 
95
- @include m(gray) {
107
+ @include bem.m(gray) {
96
108
  [data-tab-active] {
97
109
  a {
98
- background-color: $color-ash;
99
- border-color: $color-concrete;
110
+ background-color: colors.$color-ash;
111
+ border-color: colors.$color-concrete;
100
112
  }
101
113
  }
102
114
  }
103
115
  }
104
116
 
105
- @include organism(tab-panel) {
117
+ @include mixin.organism(tab-panel) {
106
118
  position: relative;
107
119
  top: -1px;
108
120
  z-index: 2;
109
- padding: rhythm(2) rhythm(3);
110
- border-top-right-radius: $border-radius;
111
- border-bottom-right-radius: $border-radius;
112
- border-bottom-left-radius: $border-radius;
113
- background-color: $color-snow;
114
- border: 1px solid $color-ash;
121
+ padding: func.rhythm(2) func.rhythm(3);
122
+ border-top-right-radius: var.$border-radius;
123
+ border-bottom-right-radius: var.$border-radius;
124
+ border-bottom-left-radius: var.$border-radius;
125
+ background-color: colors.$color-snow;
126
+ border: 1px solid colors.$color-ash;
115
127
 
116
128
  &[aria-hidden='true'] {
117
129
  display: none;
@@ -121,34 +133,34 @@
121
133
  outline: 0;
122
134
  }
123
135
 
124
- @include m(gray) {
125
- background-color: $color-ash;
126
- border-color: $color-concrete;
136
+ @include bem.m(gray) {
137
+ background-color: colors.$color-ash;
138
+ border-color: colors.$color-concrete;
127
139
  }
128
140
  }
129
141
 
130
142
  .no-js {
131
- @include organism(tab-list) {
143
+ @include mixin.organism(tab-list) {
132
144
  display: block;
133
145
  padding: initial;
134
146
  margin: initial;
135
147
  list-style-type: disc;
136
148
 
137
- @include plumber(
149
+ @include plumber.plumber(
138
150
  $leading-bottom: 3
139
151
  );
140
152
 
141
- @include e(item) {
153
+ @include bem.e(item) {
142
154
  display: list-item;
143
- margin-top: rhythm(1);
144
- margin-left: rhythm(4);
145
- padding-top: rhythm(0.25);
146
- padding-bottom: rhythm(0.25);
155
+ margin-top: func.rhythm(1);
156
+ margin-left: func.rhythm(4);
157
+ padding-top: func.rhythm(0.25);
158
+ padding-bottom: func.rhythm(0.25);
147
159
  padding-top: 0;
148
160
  padding-left: 0;
149
161
  }
150
162
 
151
- @include e(link) {
163
+ @include bem.e(link) {
152
164
  background-color: transparent;
153
165
  padding: 0;
154
166
  border-radius: 0;
@@ -157,7 +169,7 @@
157
169
  }
158
170
  }
159
171
 
160
- @include organism(tab-panel) {
172
+ @include mixin.organism(tab-panel) {
161
173
  background-color: transparent;
162
174
  padding: 0;
163
175
  }