@internetstiftelsen/styleguide 4.1.13 → 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 +18 -18
  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 +33 -28
  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/atoms/button/_button.scss CHANGED
@@ -1,25 +1,31 @@
1
- @charset 'UTF-8';
1
+ @charset "UTF-8";
2
2
  @use "sass:color";
3
+ @use '../../configurations/mixins' as mixin;
4
+ @use '../../configurations/bem' as bem;
5
+ @use '../../configurations/variables' as var;
6
+ @use '../../configurations/functions' as func;
7
+ @use '../../configurations/colors/colors' as colors;
8
+ @use '../../vendor/grid/breakpoints' as breakpoint;
3
9
 
4
10
  // Default Button
5
11
  /// @group Buttons
6
- @include atom(button) {
12
+ @include mixin.atom(button) {
7
13
  display: inline-flex;
8
14
  position: relative;
9
15
  flex-wrap: nowrap;
10
16
  align-items: center;
11
17
  justify-content: center;
12
18
  margin: 0;
13
- padding: rhythm(1.112) rhythm(2);
19
+ padding: func.rhythm(1.112) func.rhythm(2);
14
20
  overflow: hidden;
15
21
  border: 0;
16
- border-radius: $border-radius;
22
+ border-radius: var.$border-radius;
17
23
  background-color: currentColor;
18
24
  background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
19
25
  box-shadow: 0 0 0 1px inset currentColor;
20
- color: $color-ocean-dark;
21
- font-family: $font-family-headings;
22
- font-size: rem(16px);
26
+ color: colors.$color-ocean-dark;
27
+ font-family: var.$font-family-headings;
28
+ font-size: func.to_rem(16px);
23
29
  text-decoration: none;
24
30
  text-shadow: none;
25
31
  hyphens: auto;
@@ -27,16 +33,16 @@
27
33
 
28
34
  &:hover,
29
35
  &:focus {
30
- color: $color-ocean;
36
+ color: colors.$color-ocean;
31
37
  }
32
38
 
33
39
  &:disabled {
34
- background-color: $color-granit !important;
40
+ background-color: colors.$color-granit !important;
35
41
  box-shadow: none;
36
42
  cursor: not-allowed;
37
43
 
38
44
  [class*='text'] {
39
- color: $color-snow !important;
45
+ color: colors.$color-snow !important;
40
46
  text-shadow: none !important;
41
47
  }
42
48
  }
@@ -47,38 +53,38 @@
47
53
  }
48
54
 
49
55
  &.is-loading & {
50
- @include e(text) {
56
+ @include bem.e(text) {
51
57
  transform: translateY(-100%);
52
58
  opacity: 0;
53
59
  }
54
60
 
55
- @include e(icon) {
61
+ @include bem.e(icon) {
56
62
  transform: translateY(-100%);
57
63
  opacity: 0;
58
64
  }
59
65
 
60
- @include e(spinner) {
66
+ @include bem.e(spinner) {
61
67
  transform: translate(-50%, -50%);
62
68
  opacity: 1;
63
69
  }
64
70
  }
65
71
 
66
- @include e(text) {
72
+ @include bem.e(text) {
67
73
  position: relative;
68
74
  transform: translateY(0);
69
75
  transition: 0.3s opacity, 0.3s transform;
70
76
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
71
77
  opacity: 1;
72
- color: $color-snow;
78
+ color: colors.$color-snow;
73
79
  pointer-events: none;
74
80
  }
75
81
 
76
- @include e(spinner) {
82
+ @include bem.e(spinner) {
77
83
  position: absolute;
78
84
  top: 50%;
79
85
  left: 50%;
80
- width: $icon-size-small;
81
- height: $icon-size-small;
86
+ width: var.$icon-size-small;
87
+ height: var.$icon-size-small;
82
88
  transform: translate(-50%, 50%);
83
89
  transition: 0.3s opacity, 0.3s transform;
84
90
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
@@ -87,122 +93,122 @@
87
93
 
88
94
  // Modifiers
89
95
 
90
- @include m(full-width) {
96
+ @include bem.m(full-width) {
91
97
  display: flex;
92
98
  width: 100%;
93
99
  }
94
100
 
95
- @include m(small) {
96
- padding: rhythm(0.6) rhythm(1.5);
101
+ @include bem.m(small) {
102
+ padding: func.rhythm(0.6) func.rhythm(1.5);
97
103
  }
98
104
 
99
- @include m(large) {
100
- padding: rhythm(1.6) rhythm(4);
105
+ @include bem.m(large) {
106
+ padding: func.rhythm(1.6) func.rhythm(4);
101
107
 
102
- @include e(text) {
103
- @include bp-up(sm) {
104
- font-size: rem(24px);
108
+ @include bem.e(text) {
109
+ @include breakpoint.bp-up(sm) {
110
+ font-size: func.to_rem(24px);
105
111
  }
106
112
  }
107
113
 
108
- @include e(icon) {
109
- width: $icon-size;
110
- height: $icon-size;
114
+ @include bem.e(icon) {
115
+ width: var.$icon-size;
116
+ height: var.$icon-size;
111
117
  }
112
118
 
113
- @include e(spinner) {
114
- width: $icon-size;
115
- height: $icon-size;
119
+ @include bem.e(spinner) {
120
+ width: var.$icon-size;
121
+ height: var.$icon-size;
116
122
  }
117
123
  }
118
124
 
119
- @include m(large-responsive) {
120
- padding: rhythm(1.6) rhythm(4);
125
+ @include bem.m(large-responsive) {
126
+ padding: func.rhythm(1.6) func.rhythm(4);
121
127
 
122
- @include e(text) {
123
- font-size: rem(24px);
128
+ @include bem.e(text) {
129
+ font-size: func.to_rem(24px);
124
130
  }
125
131
 
126
- @include e(icon) {
127
- width: $icon-size;
128
- height: $icon-size;
132
+ @include bem.e(icon) {
133
+ width: var.$icon-size;
134
+ height: var.$icon-size;
129
135
  }
130
136
 
131
- @include e(spinner) {
132
- width: $icon-size;
133
- height: $icon-size;
137
+ @include bem.e(spinner) {
138
+ width: var.$icon-size;
139
+ height: var.$icon-size;
134
140
  }
135
141
 
136
- @include bp-down(sm) {
137
- padding: rhythm(1.112) rhythm(2);
142
+ @include breakpoint.bp-down(sm) {
143
+ padding: func.rhythm(1.112) func.rhythm(2);
138
144
 
139
- @include e(text) {
140
- font-size: rem(16px);
145
+ @include bem.e(text) {
146
+ font-size: func.to_rem(16px);
141
147
  }
142
148
  }
143
149
  }
144
150
 
145
- @include m(icon) {
151
+ @include bem.m(icon) {
146
152
  justify-content: space-between;
147
- max-width: rhythm(50);
148
- padding-right: rhythm(5);
153
+ max-width: func.rhythm(50);
154
+ padding-right: func.rhythm(5);
149
155
  text-align: left;
150
156
  }
151
157
 
152
- @include m(icon-left) {
158
+ @include bem.m(icon-left) {
153
159
  justify-content: space-between;
154
- max-width: rhythm(50);
155
- padding-right: rhythm(2);
156
- padding-left: rhythm(5);
160
+ max-width: func.rhythm(50);
161
+ padding-right: func.rhythm(2);
162
+ padding-left: func.rhythm(5);
157
163
 
158
- @include e(icon) {
164
+ @include bem.e(icon) {
159
165
  right: auto;
160
- left: rhythm(1.5);
166
+ left: func.rhythm(1.5);
161
167
  }
162
168
  }
163
169
 
164
- @include m(standalone-icon) {
165
- padding: rhythm(1);
170
+ @include bem.m(standalone-icon) {
171
+ padding: func.rhythm(1);
166
172
  border: 0;
167
173
  border-radius: 0;
168
174
  background-color: transparent;
169
175
  box-shadow: none;
170
176
 
171
- @include e(text) {
172
- @include visuallyhidden;
177
+ @include bem.e(text) {
178
+ @include mixin.visuallyhidden;
173
179
  }
174
180
 
175
- @include e(icon) {
181
+ @include bem.e(icon) {
176
182
  position: static;
177
- width: $icon-size;
178
- height: $icon-size;
183
+ width: var.$icon-size;
184
+ height: var.$icon-size;
179
185
  transform: none;
180
186
  color: var(--cyberspace-color);
181
187
  fill: currentColor;
182
188
  }
183
189
 
184
- @include m(white) {
185
- @include e(icon) {
186
- fill: $color-snow;
190
+ @include bem.m(white) {
191
+ @include bem.e(icon) {
192
+ fill: colors.$color-snow;
187
193
  }
188
194
  }
189
195
  }
190
196
 
191
- @include e(icon) {
197
+ @include bem.e(icon) {
192
198
  position: absolute;
193
- z-index: z_index(background);
199
+ z-index: func.z_index(background);
194
200
  top: 50%;
195
- right: rhythm(1.5);
196
- width: $icon-size-small;
197
- height: $icon-size-small;
201
+ right: func.rhythm(1.5);
202
+ width: var.$icon-size-small;
203
+ height: var.$icon-size-small;
198
204
  transform: translateY(-50%);
199
205
  transition: fill 100ms linear;
200
- fill: $color-snow;
206
+ fill: colors.$color-snow;
201
207
  pointer-events: none;
202
208
  }
203
209
 
204
210
  // More colors
205
- @include m(transparent) {
211
+ @include bem.m(transparent) {
206
212
  border-color: transparent;
207
213
  background-color: transparent;
208
214
  box-shadow: none;
@@ -214,325 +220,325 @@
214
220
  text-decoration: underline;
215
221
  }
216
222
 
217
- @include e(text) {
223
+ @include bem.e(text) {
218
224
  color: var(--cyberspace-color);
219
225
  }
220
226
 
221
- @include e(icon) {
222
- width: $icon-size;
223
- height: $icon-size;
227
+ @include bem.e(icon) {
228
+ width: var.$icon-size;
229
+ height: var.$icon-size;
224
230
  fill: var(--cyberspace-cyberspace);
225
231
  fill: currentColor;
226
232
  }
227
233
 
228
- @include m(small-icon) {
229
- @include e(icon) {
230
- width: $icon-size-small;
231
- height: $icon-size-small;
234
+ @include bem.m(small-icon) {
235
+ @include bem.e(icon) {
236
+ width: var.$icon-size-small;
237
+ height: var.$icon-size-small;
232
238
  }
233
239
  }
234
240
  }
235
241
 
236
- @include m(cyberspace) {
237
- color: $color-cyberspace;
242
+ @include bem.m(cyberspace) {
243
+ color: colors.$color-cyberspace;
238
244
 
239
245
  &:hover,
240
246
  &:focus {
241
- color: $color-granit;
247
+ color: colors.$color-granit;
242
248
  }
243
249
 
244
- @include e(text) {
245
- color: $color-snow;
250
+ @include bem.e(text) {
251
+ color: colors.$color-snow;
246
252
  }
247
253
 
248
- @include e(icon) {
249
- fill: $color-snow;
254
+ @include bem.e(icon) {
255
+ fill: colors.$color-snow;
250
256
  }
251
257
  }
252
258
 
253
- @include m(snow) {
259
+ @include bem.m(snow) {
254
260
  color: transparent;
255
261
 
256
262
  &:hover,
257
263
  &:focus {
258
- color: $color-snow;
264
+ color: colors.$color-snow;
259
265
  }
260
266
 
261
- @include e(text) {
262
- color: $color-snow;
267
+ @include bem.e(text) {
268
+ color: colors.$color-snow;
263
269
  }
264
270
 
265
- @include e(icon) {
266
- fill: $color-snow;
271
+ @include bem.e(icon) {
272
+ fill: colors.$color-snow;
267
273
  }
268
274
  }
269
275
 
270
- @include m(ruby) {
271
- color: $color-ruby;
276
+ @include bem.m(ruby) {
277
+ color: colors.$color-ruby;
272
278
 
273
279
  &:hover,
274
280
  &:focus {
275
- color: $color-ruby-dark;
281
+ color: colors.$color-ruby-dark;
276
282
  }
277
283
 
278
- @include e(text) {
279
- color: $color-snow;
280
- text-shadow: 0 0 rhythm(0.5) $color-ruby-dark;
284
+ @include bem.e(text) {
285
+ color: colors.$color-snow;
286
+ text-shadow: 0 0 func.rhythm(0.5) colors.$color-ruby-dark;
281
287
  }
282
288
 
283
- @include e(icon) {
284
- fill: $color-snow;
289
+ @include bem.e(icon) {
290
+ fill: colors.$color-snow;
285
291
  }
286
292
  }
287
293
 
288
- @include m(ruby-light) {
289
- box-shadow: 0 0 0 1px inset $color-ruby;
290
- color: $color-ruby-light;
294
+ @include bem.m(ruby-light) {
295
+ box-shadow: 0 0 0 1px inset colors.$color-ruby;
296
+ color: colors.$color-ruby-light;
291
297
 
292
298
  &:hover,
293
299
  &:focus {
294
- color: $color-ruby;
300
+ color: colors.$color-ruby;
295
301
  }
296
302
 
297
- @include e(text) {
298
- color: $color-cyberspace;
303
+ @include bem.e(text) {
304
+ color: colors.$color-cyberspace;
299
305
  }
300
306
 
301
- @include e(icon) {
302
- fill: $color-cyberspace;
307
+ @include bem.e(icon) {
308
+ fill: colors.$color-cyberspace;
303
309
  }
304
310
  }
305
311
 
306
- @include m(ruby-dark) {
307
- color: $color-ruby-dark;
312
+ @include bem.m(ruby-dark) {
313
+ color: colors.$color-ruby-dark;
308
314
 
309
315
  &:hover,
310
316
  &:focus {
311
- color: $color-ruby;
317
+ color: colors.$color-ruby;
312
318
  }
313
319
 
314
- @include e(text) {
315
- color: $color-snow;
320
+ @include bem.e(text) {
321
+ color: colors.$color-snow;
316
322
  }
317
323
 
318
- @include e(icon) {
319
- fill: $color-snow;
324
+ @include bem.e(icon) {
325
+ fill: colors.$color-snow;
320
326
  }
321
327
  }
322
328
 
323
- @include m(ocean-light) {
324
- box-shadow: 0 0 0 1px inset $color-ocean;
325
- color: $color-ocean-light;
329
+ @include bem.m(ocean-light) {
330
+ box-shadow: 0 0 0 1px inset colors.$color-ocean;
331
+ color: colors.$color-ocean-light;
326
332
 
327
333
  &:hover,
328
334
  &:focus {
329
- color: $color-ocean;
335
+ color: colors.$color-ocean;
330
336
  }
331
337
 
332
- @include e(text) {
333
- color: $color-cyberspace;
338
+ @include bem.e(text) {
339
+ color: colors.$color-cyberspace;
334
340
  }
335
341
 
336
- @include e(icon) {
337
- fill: $color-cyberspace;
342
+ @include bem.e(icon) {
343
+ fill: colors.$color-cyberspace;
338
344
  }
339
345
  }
340
346
 
341
- @include m(jade) {
342
- color: $color-jade;
347
+ @include bem.m(jade) {
348
+ color: colors.$color-jade;
343
349
 
344
350
  &:hover,
345
351
  &:focus {
346
- color: color.adjust($color-jade, $lightness: -10%);
352
+ color: color.adjust(colors.$color-jade, $lightness: -10%);
347
353
  text-shadow: none;
348
354
  }
349
355
 
350
- @include e(text) {
351
- color: $color-snow;
352
- text-shadow: 0 0 rhythm(2) $color-jade-dark;
356
+ @include bem.e(text) {
357
+ color: colors.$color-snow;
358
+ text-shadow: 0 0 func.rhythm(2) colors.$color-jade-dark;
353
359
  }
354
360
 
355
- @include e(icon) {
356
- fill: $color-cyberspace;
361
+ @include bem.e(icon) {
362
+ fill: colors.$color-cyberspace;
357
363
  }
358
364
  }
359
365
 
360
- @include m(jade-light) {
361
- box-shadow: 0 0 0 1px inset $color-jade;
362
- color: $color-jade-light;
366
+ @include bem.m(jade-light) {
367
+ box-shadow: 0 0 0 1px inset colors.$color-jade;
368
+ color: colors.$color-jade-light;
363
369
 
364
370
  &:hover,
365
371
  &:focus {
366
- color: $color-jade;
372
+ color: colors.$color-jade;
367
373
  }
368
374
 
369
- @include e(text) {
370
- color: $color-cyberspace;
375
+ @include bem.e(text) {
376
+ color: colors.$color-cyberspace;
371
377
  }
372
378
 
373
- @include e(icon) {
374
- fill: $color-cyberspace;
379
+ @include bem.e(icon) {
380
+ fill: colors.$color-cyberspace;
375
381
  }
376
382
  }
377
383
 
378
- @include m(jade-dark) {
379
- color: $color-jade-dark;
384
+ @include bem.m(jade-dark) {
385
+ color: colors.$color-jade-dark;
380
386
 
381
387
  &:hover,
382
388
  &:focus {
383
- color: $color-jade;
389
+ color: colors.$color-jade;
384
390
  }
385
391
 
386
- @include e(text) {
387
- color: $color-snow;
392
+ @include bem.e(text) {
393
+ color: colors.$color-snow;
388
394
  }
389
395
 
390
- @include e(icon) {
391
- fill: $color-snow;
396
+ @include bem.e(icon) {
397
+ fill: colors.$color-snow;
392
398
  }
393
399
  }
394
400
 
395
- @include m(lemon) {
396
- color: $color-lemon;
401
+ @include bem.m(lemon) {
402
+ color: colors.$color-lemon;
397
403
 
398
404
  &:hover,
399
405
  &:focus {
400
- color: $color-lemon-light;
406
+ color: colors.$color-lemon-light;
401
407
  }
402
408
 
403
- @include e(text) {
404
- color: $color-cyberspace;
409
+ @include bem.e(text) {
410
+ color: colors.$color-cyberspace;
405
411
  }
406
412
 
407
- @include e(icon) {
408
- fill: $color-cyberspace;
413
+ @include bem.e(icon) {
414
+ fill: colors.$color-cyberspace;
409
415
  }
410
416
  }
411
417
 
412
- @include m(lemon-light) {
413
- box-shadow: 0 0 0 1px inset $color-lemon;
414
- color: $color-lemon-light;
418
+ @include bem.m(lemon-light) {
419
+ box-shadow: 0 0 0 1px inset colors.$color-lemon;
420
+ color: colors.$color-lemon-light;
415
421
 
416
422
  &:hover,
417
423
  &:focus {
418
- background-color: $color-lemon;
424
+ background-color: colors.$color-lemon;
419
425
  }
420
426
 
421
- @include e(text) {
422
- color: $color-cyberspace;
427
+ @include bem.e(text) {
428
+ color: colors.$color-cyberspace;
423
429
  }
424
430
 
425
- @include e(icon) {
426
- fill: $color-cyberspace;
431
+ @include bem.e(icon) {
432
+ fill: colors.$color-cyberspace;
427
433
  }
428
434
  }
429
435
 
430
- @include m(peacock) {
431
- color: $color-peacock;
436
+ @include bem.m(peacock) {
437
+ color: colors.$color-peacock;
432
438
 
433
439
  &:hover {
434
- color: color.adjust($color-peacock, $lightness: -10%);
440
+ color: color.adjust(colors.$color-peacock, $lightness: -10%);
435
441
  text-shadow: none;
436
442
  }
437
443
 
438
444
  &:focus {
439
- color: $color-peacock;
445
+ color: colors.$color-peacock;
440
446
  }
441
447
 
442
448
  &:hover:focus {
443
- color: $color-peacock;
449
+ color: colors.$color-peacock;
444
450
  }
445
451
 
446
- @include e(text) {
447
- color: $color-snow;
448
- text-shadow: 0 0 rhythm(2) $color-peacock-dark;
452
+ @include bem.e(text) {
453
+ color: colors.$color-snow;
454
+ text-shadow: 0 0 func.rhythm(2) colors.$color-peacock-dark;
449
455
  }
450
456
 
451
- @include e(icon) {
452
- fill: $color-cyberspace;
457
+ @include bem.e(icon) {
458
+ fill: colors.$color-cyberspace;
453
459
  }
454
460
  }
455
461
 
456
- @include m(peacock-light) {
457
- box-shadow: 0 0 0 1px inset $color-peacock;
458
- color: $color-peacock-light;
462
+ @include bem.m(peacock-light) {
463
+ box-shadow: 0 0 0 1px inset colors.$color-peacock;
464
+ color: colors.$color-peacock-light;
459
465
 
460
466
  &:hover {
461
- color: $color-peacock;
467
+ color: colors.$color-peacock;
462
468
  }
463
469
 
464
470
  &:focus {
465
- color: $color-peacock-light;
471
+ color: colors.$color-peacock-light;
466
472
  }
467
473
 
468
474
  &:hover:focus {
469
- color: $color-peacock-light;
475
+ color: colors.$color-peacock-light;
470
476
  }
471
477
 
472
- @include e(text) {
473
- color: $color-cyberspace;
478
+ @include bem.e(text) {
479
+ color: colors.$color-cyberspace;
474
480
  }
475
481
 
476
- @include e(icon) {
477
- fill: $color-cyberspace;
482
+ @include bem.e(icon) {
483
+ fill: colors.$color-cyberspace;
478
484
  }
479
485
  }
480
486
 
481
- @include m(sandstone) {
482
- color: $color-sandstone;
487
+ @include bem.m(sandstone) {
488
+ color: colors.$color-sandstone;
483
489
 
484
490
  &:hover,
485
491
  &:focus {
486
- color: $color-sandstone-light;
492
+ color: colors.$color-sandstone-light;
487
493
  }
488
494
 
489
- @include e(text) {
490
- color: $color-cyberspace;
495
+ @include bem.e(text) {
496
+ color: colors.$color-cyberspace;
491
497
  }
492
498
 
493
- @include e(icon) {
494
- fill: $color-cyberspace;
499
+ @include bem.e(icon) {
500
+ fill: colors.$color-cyberspace;
495
501
  }
496
502
  }
497
503
 
498
- @include m(sandstone-light) {
499
- box-shadow: 0 0 0 1px inset $color-sandstone;
500
- color: $color-sandstone-light;
504
+ @include bem.m(sandstone-light) {
505
+ box-shadow: 0 0 0 1px inset colors.$color-sandstone;
506
+ color: colors.$color-sandstone-light;
501
507
 
502
508
  &:hover {
503
- color: $color-sandstone;
509
+ color: colors.$color-sandstone;
504
510
  }
505
511
 
506
512
  &:focus {
507
- color: $color-sandstone-light;
513
+ color: colors.$color-sandstone-light;
508
514
  }
509
515
 
510
516
  &:hover:focus {
511
- color: $color-sandstone-light;
517
+ color: colors.$color-sandstone-light;
512
518
  }
513
519
 
514
- @include e(text) {
515
- color: $color-cyberspace;
520
+ @include bem.e(text) {
521
+ color: colors.$color-cyberspace;
516
522
  }
517
523
 
518
- @include e(icon) {
519
- fill: $color-cyberspace;
524
+ @include bem.e(icon) {
525
+ fill: colors.$color-cyberspace;
520
526
  }
521
527
  }
522
528
 
523
- @include m(dashed) {
529
+ @include bem.m(dashed) {
524
530
  border: 1px dashed;
525
531
  background: transparent;
526
532
  box-shadow: none;
527
- color: $color-cyberspace;
533
+ color: colors.$color-cyberspace;
528
534
 
529
535
  &:hover,
530
536
  &:focus {
531
- color: $color-cyberspace;
537
+ color: colors.$color-cyberspace;
532
538
  text-decoration: underline;
533
539
  }
534
540
 
535
- @include e(text) {
541
+ @include bem.e(text) {
536
542
  color: inherit;
537
543
  }
538
544
  }