@internetstiftelsen/styleguide 4.1.12-beta.0.1 → 4.1.12-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.
package/package.json
CHANGED
|
@@ -7,7 +7,7 @@ $border-color: color.adjust($color-jade, $lightness: -5%);
|
|
|
7
7
|
padding-right: 0;
|
|
8
8
|
padding-left: 0;
|
|
9
9
|
transition: transform 0.25s ease-out;
|
|
10
|
-
background-color:
|
|
10
|
+
background-color: $color-jade-light;
|
|
11
11
|
|
|
12
12
|
&[aria-hidden='true'] {
|
|
13
13
|
display: none;
|
|
@@ -33,182 +33,35 @@ $border-color: color.adjust($color-jade, $lightness: -5%);
|
|
|
33
33
|
}
|
|
34
34
|
|
|
35
35
|
@include e(wrapper) {
|
|
36
|
+
padding-top: rhythm(3);
|
|
37
|
+
|
|
36
38
|
@include bp-down(md) {
|
|
37
39
|
padding-right: rhythm(1);
|
|
38
40
|
padding-left: rhythm(1);
|
|
39
|
-
border-bottom: 1px solid currentColor;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
@include bp-up(lg) {
|
|
43
|
-
padding-top: rhythm(3);
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
@include e(column) {
|
|
48
|
-
padding-bottom: rhythm(2);
|
|
49
|
-
|
|
50
|
-
@include bp-down(md) {
|
|
51
|
-
padding-left: 0;
|
|
52
|
-
padding-right: 0;
|
|
53
|
-
padding-bottom: 0;
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
@include e(buttons-list) {
|
|
58
|
-
display: flex;
|
|
59
|
-
align-items: stretch;
|
|
60
|
-
margin: 0;
|
|
61
|
-
padding: 0;
|
|
62
|
-
list-style: none;
|
|
63
|
-
|
|
64
|
-
@include e(item) {
|
|
65
|
-
width: 50%;
|
|
66
|
-
flex-grow: 1;
|
|
67
|
-
flex-shrink: 0;
|
|
68
|
-
margin: 0;
|
|
69
|
-
padding: 0;
|
|
70
|
-
|
|
71
|
-
& + & {
|
|
72
|
-
border-left: 1px solid currentColor;
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
@include e(link) {
|
|
77
|
-
display: flex;
|
|
78
|
-
flex-direction: column;
|
|
79
|
-
align-items: center;
|
|
80
|
-
padding-top: rhythm(2);
|
|
81
|
-
padding-bottom: rhythm(2);
|
|
82
|
-
text-align: center;
|
|
83
|
-
color: $color-cyberspace;
|
|
84
|
-
text-decoration: none;
|
|
85
|
-
font-family: $font-family-headings;
|
|
86
|
-
border: 0;
|
|
87
|
-
background-color: transparent;
|
|
88
|
-
appearance: none;
|
|
89
|
-
width: 100%;
|
|
90
|
-
height: 100%;
|
|
91
|
-
|
|
92
|
-
&[aria-expanded='true'] {
|
|
93
|
-
background-color: currentColor;
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
svg {
|
|
97
|
-
width: $icon-size-large * 1.25;
|
|
98
|
-
height: $icon-size-large * 1.25;
|
|
99
|
-
margin-bottom: rhythm(1);
|
|
100
|
-
pointer-events: none;
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
span {
|
|
104
|
-
pointer-events: none;
|
|
105
|
-
}
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
@include bp-up(lg) {
|
|
109
|
-
display: none;
|
|
110
|
-
}
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
@include e(search-container) {
|
|
114
|
-
background-color: currentcolor;
|
|
115
|
-
padding-top: rhythm(2);
|
|
116
|
-
padding-bottom: rhythm(2);
|
|
117
|
-
|
|
118
|
-
&[aria-hidden='true'] {
|
|
119
|
-
display: none;
|
|
120
|
-
}
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
@include e(topic) {
|
|
124
|
-
display: flex;
|
|
125
|
-
justify-content: space-between;
|
|
126
|
-
align-items: center;
|
|
127
|
-
border-top: 1px solid currentColor;
|
|
128
|
-
|
|
129
|
-
@include bp-up(lg) {
|
|
130
|
-
background-color: transparent;
|
|
131
|
-
border-top: 0;
|
|
132
|
-
margin-bottom: rhythm(1);
|
|
133
|
-
}
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
@include e(topic-button) {
|
|
137
|
-
margin-left: auto;
|
|
138
|
-
align-self: stretch;
|
|
139
|
-
padding-left: rhythm(1.5);
|
|
140
|
-
padding-right: rhythm(1.5);
|
|
141
|
-
border-left: 1px solid currentColor;
|
|
142
|
-
|
|
143
|
-
@include bp-up(lg) {
|
|
144
|
-
display: none;
|
|
145
|
-
pointer-events: none;
|
|
146
|
-
}
|
|
147
|
-
|
|
148
|
-
&[aria-expanded='true'] {
|
|
149
|
-
background-color: currentColor;
|
|
150
|
-
|
|
151
|
-
svg {
|
|
152
|
-
transform: rotate(-180deg);
|
|
153
|
-
}
|
|
154
41
|
}
|
|
155
42
|
}
|
|
156
43
|
|
|
157
44
|
@include e(list) {
|
|
158
|
-
margin-top:
|
|
159
|
-
background-color: currentColor;
|
|
160
|
-
margin-bottom: 0;
|
|
161
|
-
padding-top: 0;
|
|
162
|
-
padding-bottom: 0;
|
|
163
|
-
|
|
164
|
-
&[aria-hidden='true'] {
|
|
165
|
-
display: none;
|
|
166
|
-
}
|
|
167
|
-
|
|
168
|
-
@include bp-up(lg) {
|
|
169
|
-
margin-top: rhythm(1);
|
|
170
|
-
background-color: transparent;
|
|
171
|
-
border-bottom: 0;
|
|
172
|
-
|
|
173
|
-
&[aria-hidden='true'] {
|
|
174
|
-
display: initial;
|
|
175
|
-
}
|
|
176
|
-
}
|
|
45
|
+
margin-top: rhythm(1);
|
|
177
46
|
|
|
178
47
|
@include e(topic) {
|
|
179
|
-
margin-top:
|
|
180
|
-
margin-bottom: 0;
|
|
181
|
-
|
|
48
|
+
margin-top: rhythm(2);
|
|
49
|
+
margin-bottom: rhythm(0.5);
|
|
50
|
+
padding: rhythm(1) rhythm(1);
|
|
51
|
+
border-bottom: 1px solid $border-color;
|
|
182
52
|
font-family: $font-family-headings;
|
|
183
53
|
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
}
|
|
187
|
-
|
|
188
|
-
@include bp-up(lg) {
|
|
189
|
-
margin-top: rhythm(2);
|
|
190
|
-
margin-bottom: rhythm(0.5);
|
|
191
|
-
padding: rhythm(1) rhythm(1);
|
|
192
|
-
border-bottom: 0;
|
|
193
|
-
|
|
194
|
-
> a {
|
|
195
|
-
padding: 0;
|
|
196
|
-
}
|
|
54
|
+
&:first-child {
|
|
55
|
+
margin-top: 0;
|
|
197
56
|
}
|
|
198
57
|
}
|
|
199
58
|
|
|
200
59
|
@include e(item) {
|
|
201
|
-
margin: 0;
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
&:last-child {
|
|
205
|
-
border-bottom: 0;
|
|
206
|
-
}
|
|
60
|
+
margin: 0 0 rhythm(0.5) 0;
|
|
61
|
+
padding: rhythm(1) rhythm(1);
|
|
207
62
|
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
margin-bottom: rhythm(0.5);
|
|
211
|
-
border-bottom: 0;
|
|
63
|
+
& + & {
|
|
64
|
+
border-top: 1px solid $border-color;
|
|
212
65
|
}
|
|
213
66
|
}
|
|
214
67
|
|
|
@@ -234,14 +87,8 @@ $border-color: color.adjust($color-jade, $lightness: -5%);
|
|
|
234
87
|
@include e(link) {
|
|
235
88
|
display: inline-flex;
|
|
236
89
|
align-items: baseline;
|
|
237
|
-
width: 100%;
|
|
238
90
|
color: $color-cyberspace;
|
|
239
91
|
text-decoration: none;
|
|
240
|
-
padding: rhythm(1) rhythm(3.5);
|
|
241
|
-
|
|
242
|
-
@include m(sub-level) {
|
|
243
|
-
padding: rhythm(1) rhythm(5);
|
|
244
|
-
}
|
|
245
92
|
|
|
246
93
|
&:hover {
|
|
247
94
|
&:not(span) {
|
|
@@ -249,20 +96,15 @@ $border-color: color.adjust($color-jade, $lightness: -5%);
|
|
|
249
96
|
}
|
|
250
97
|
}
|
|
251
98
|
|
|
252
|
-
@include bp-up(lg) {
|
|
253
|
-
padding: 0;
|
|
254
|
-
}
|
|
255
|
-
|
|
256
99
|
@include m(large) {
|
|
257
100
|
display: block;
|
|
258
|
-
|
|
259
|
-
padding: rhythm(1.5) rhythm(2);
|
|
101
|
+
padding: 0 rhythm(1);
|
|
260
102
|
font-family: $font-family-headings;
|
|
103
|
+
font-size: rem(23px);
|
|
261
104
|
white-space: nowrap;
|
|
262
105
|
|
|
263
106
|
@include bp-up(lg) {
|
|
264
107
|
padding: 0;
|
|
265
|
-
font-size: rem(23px);
|
|
266
108
|
}
|
|
267
109
|
}
|
|
268
110
|
|