@internetstiftelsen/styleguide 2.23.9-beta.1.6 → 2.24.0-beta.0.1
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 +1 -1
- package/src/app.js +1 -1
- package/src/atoms/tag/_tag.scss +37 -1
- package/src/atoms/tag/tag.config.js +45 -7
- package/src/components.js +3 -3
- package/src/configurations/_mixins.scss +8 -0
package/package.json
CHANGED
package/src/app.js
CHANGED
|
@@ -2,7 +2,7 @@ import './molecules/form';
|
|
|
2
2
|
import './atoms/textarea/rich-text';
|
|
3
3
|
|
|
4
4
|
require('./atoms/grid-toggle/grid-toggle');
|
|
5
|
-
require('./components');
|
|
5
|
+
// require('./components');
|
|
6
6
|
|
|
7
7
|
const Button = require('./atoms/button/Button');
|
|
8
8
|
const { open, onClose, onOpen } = require('./molecules/modal/modal');
|
package/src/atoms/tag/_tag.scss
CHANGED
|
@@ -6,7 +6,8 @@
|
|
|
6
6
|
|
|
7
7
|
@extend %tag;
|
|
8
8
|
|
|
9
|
-
display: inline-
|
|
9
|
+
display: inline-flex;
|
|
10
|
+
align-items: center;
|
|
10
11
|
position: relative;
|
|
11
12
|
z-index: z_index(middleground);
|
|
12
13
|
margin-right: rhythm(1);
|
|
@@ -22,7 +23,42 @@
|
|
|
22
23
|
@include color_values($colors, 'border-color', $separator: '-');
|
|
23
24
|
}
|
|
24
25
|
|
|
26
|
+
@include e(text) {
|
|
27
|
+
color: $color-cyberspace;
|
|
28
|
+
}
|
|
29
|
+
|
|
25
30
|
@include m(light) {
|
|
26
31
|
@extend %tag-light;
|
|
32
|
+
|
|
33
|
+
@include e(text) {
|
|
34
|
+
color: $color-snow;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
> svg {
|
|
39
|
+
width: $icon-size-small;
|
|
40
|
+
height: $icon-size-small;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
@include m(hover-light) {
|
|
44
|
+
&:hover,
|
|
45
|
+
&:focus {
|
|
46
|
+
background-color: currentColor !important;
|
|
47
|
+
|
|
48
|
+
[class*=text] {
|
|
49
|
+
color: $color-snow;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
@include m(hover-dark) {
|
|
55
|
+
&:hover,
|
|
56
|
+
&:focus {
|
|
57
|
+
background-color: currentColor !important;
|
|
58
|
+
|
|
59
|
+
[class*=text] {
|
|
60
|
+
color: $color-cyberspace;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
27
63
|
}
|
|
28
64
|
}
|
|
@@ -15,22 +15,60 @@ module.exports = {
|
|
|
15
15
|
}
|
|
16
16
|
},
|
|
17
17
|
{
|
|
18
|
-
name: 'Background',
|
|
18
|
+
name: 'Background variation',
|
|
19
19
|
context: {
|
|
20
20
|
text: 'background',
|
|
21
21
|
href: '#',
|
|
22
22
|
is_light: false,
|
|
23
|
-
|
|
23
|
+
border: true,
|
|
24
|
+
border_color: 'ocean',
|
|
25
|
+
background_color: 'ocean',
|
|
26
|
+
hover_color: 'light',
|
|
27
|
+
color: 'ocean'
|
|
24
28
|
}
|
|
25
29
|
},
|
|
26
30
|
{
|
|
27
|
-
name: '
|
|
31
|
+
name: 'Border variation',
|
|
28
32
|
context: {
|
|
29
|
-
text: '
|
|
33
|
+
text: 'border',
|
|
30
34
|
href: '#',
|
|
31
|
-
is_light:
|
|
32
|
-
|
|
35
|
+
is_light: false,
|
|
36
|
+
border: true,
|
|
37
|
+
border_color: 'sandstone',
|
|
38
|
+
background_color: 'sandstone-light',
|
|
39
|
+
hover_color: 'light',
|
|
40
|
+
color: 'sandstone'
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
name: 'With right icon',
|
|
45
|
+
context: {
|
|
46
|
+
text: 'with right icon',
|
|
47
|
+
href: '#',
|
|
48
|
+
icon: 'pin',
|
|
49
|
+
icon_align_right: true,
|
|
50
|
+
is_light: false,
|
|
51
|
+
border: true,
|
|
52
|
+
border_color: 'lemon',
|
|
53
|
+
background_color: 'lemon-light',
|
|
54
|
+
hover_color: 'dark',
|
|
55
|
+
color: 'lemon'
|
|
56
|
+
}
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
name: 'With left icon',
|
|
60
|
+
context: {
|
|
61
|
+
text: 'with left icon',
|
|
62
|
+
href: '#',
|
|
63
|
+
icon: 'pin',
|
|
64
|
+
icon_align_left: true,
|
|
65
|
+
is_light: false,
|
|
66
|
+
border: true,
|
|
67
|
+
border_color: 'jade',
|
|
68
|
+
background_color: 'jade-light',
|
|
69
|
+
hover_color: 'dark',
|
|
70
|
+
color: 'jade'
|
|
33
71
|
}
|
|
34
72
|
}
|
|
35
73
|
]
|
|
36
|
-
}
|
|
74
|
+
}
|
package/src/components.js
CHANGED
|
@@ -1,7 +1,9 @@
|
|
|
1
|
+
import 'a11y-toggle';
|
|
2
|
+
import './focusTrap';
|
|
3
|
+
import './assets/js/conditional';
|
|
1
4
|
import './atoms/password-toggle/password-toggle';
|
|
2
5
|
import './utilities/tab-highlighting/tab-highlighting';
|
|
3
6
|
import './molecules/system-error/system-error';
|
|
4
|
-
import 'a11y-toggle';
|
|
5
7
|
import './molecules/cookie-disclaimer/cookie-disclaimer';
|
|
6
8
|
import './organisms/accordion/accordion';
|
|
7
9
|
import './organisms/tabs/tabs';
|
|
@@ -11,9 +13,7 @@ import './molecules/share/share';
|
|
|
11
13
|
import './molecules/natural-language-form/natural-language-form';
|
|
12
14
|
import './atoms/tooltip/tooltip';
|
|
13
15
|
import './atoms/toggle-high-contrast/toggle-high-contrast';
|
|
14
|
-
import './focusTrap';
|
|
15
16
|
import './atoms/height-limiter/height-limiter';
|
|
16
|
-
import './assets/js/conditional';
|
|
17
17
|
import './atoms/file/file';
|
|
18
18
|
import './atoms/file/filePreview';
|
|
19
19
|
import './organisms/podcast/podcast';
|
|
@@ -75,6 +75,10 @@
|
|
|
75
75
|
border-radius: rem(17.5px);
|
|
76
76
|
background-color: $color-granit;
|
|
77
77
|
color: $color-snow;
|
|
78
|
+
|
|
79
|
+
[class*=text] {
|
|
80
|
+
color: $color-snow;
|
|
81
|
+
}
|
|
78
82
|
}
|
|
79
83
|
}
|
|
80
84
|
|
|
@@ -86,5 +90,9 @@
|
|
|
86
90
|
&:focus {
|
|
87
91
|
border: 1px solid transparent;
|
|
88
92
|
background-color: rgba($color-snow, 0.5);
|
|
93
|
+
|
|
94
|
+
[class*=text] {
|
|
95
|
+
color: $color-cyberspace;
|
|
96
|
+
}
|
|
89
97
|
}
|
|
90
98
|
}
|