@kth/style 1.0.0 → 1.1.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
CHANGED
|
@@ -103,6 +103,7 @@ $icon-size: calc(#{spacing.$space-24} + 2 * var(--space-inner-icon));
|
|
|
103
103
|
.kth-button.menu::before {
|
|
104
104
|
@include icons.icon-menu;
|
|
105
105
|
width: 20px;
|
|
106
|
+
min-width: 20px;
|
|
106
107
|
height: 20px;
|
|
107
108
|
background-color: var(--color-tertiary);
|
|
108
109
|
}
|
|
@@ -110,6 +111,7 @@ $icon-size: calc(#{spacing.$space-24} + 2 * var(--space-inner-icon));
|
|
|
110
111
|
.kth-button.back::before {
|
|
111
112
|
@include icons.icon-arrow-back;
|
|
112
113
|
width: 20px;
|
|
114
|
+
min-width: 20px;
|
|
113
115
|
height: 20px;
|
|
114
116
|
background-color: var(--color-tertiary);
|
|
115
117
|
}
|
|
@@ -121,6 +123,7 @@ $icon-size: calc(#{spacing.$space-24} + 2 * var(--space-inner-icon));
|
|
|
121
123
|
.kth-button.previous::before {
|
|
122
124
|
@include icons.icon-arrow-back-500;
|
|
123
125
|
width: 20px;
|
|
126
|
+
min-width: 20px;
|
|
124
127
|
height: 20px;
|
|
125
128
|
background-color: var(--color-text);
|
|
126
129
|
}
|
|
@@ -132,6 +135,7 @@ $icon-size: calc(#{spacing.$space-24} + 2 * var(--space-inner-icon));
|
|
|
132
135
|
.kth-button.next::after {
|
|
133
136
|
@include icons.icon-arrow-forward-500;
|
|
134
137
|
width: 20px;
|
|
138
|
+
min-width: 20px;
|
|
135
139
|
height: 20px;
|
|
136
140
|
background-color: var(--color-on-primary);
|
|
137
141
|
}
|
|
@@ -14,71 +14,6 @@
|
|
|
14
14
|
@media (min-width: 992px) {
|
|
15
15
|
display: none;
|
|
16
16
|
}
|
|
17
|
-
|
|
18
|
-
.nav-item.ancestor {
|
|
19
|
-
@include typography.font-heading-s;
|
|
20
|
-
margin-inline-start: 24px;
|
|
21
|
-
margin-block-start: 12px;
|
|
22
|
-
margin-block-end: 4px;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
.nav-link {
|
|
26
|
-
text-decoration: none;
|
|
27
|
-
display: flex;
|
|
28
|
-
padding-block: 8px;
|
|
29
|
-
padding-inline-start: 24px;
|
|
30
|
-
color: var(--color-tertiary);
|
|
31
|
-
|
|
32
|
-
&:hover {
|
|
33
|
-
text-decoration: underline;
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
.nav-item.selected:not(.expandable) {
|
|
38
|
-
position: relative;
|
|
39
|
-
|
|
40
|
-
&::before {
|
|
41
|
-
content: "";
|
|
42
|
-
position: absolute;
|
|
43
|
-
left: 0;
|
|
44
|
-
top: 0;
|
|
45
|
-
bottom: 0;
|
|
46
|
-
width: 4px;
|
|
47
|
-
background-color: var(--color-primary);
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
.nav-item.expandable > a {
|
|
52
|
-
justify-content: space-between;
|
|
53
|
-
|
|
54
|
-
&::after {
|
|
55
|
-
@include icons.icon-caret-right;
|
|
56
|
-
background-color: var(--color-tertiary);
|
|
57
|
-
align-self: center;
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
.nav-item.expandable.expanded > a {
|
|
62
|
-
@include typography.font-heading-xs;
|
|
63
|
-
color: var(--color-text);
|
|
64
|
-
|
|
65
|
-
&::after {
|
|
66
|
-
@include icons.icon-caret-down;
|
|
67
|
-
background-color: var(--color-text);
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
&:hover {
|
|
71
|
-
text-decoration: none;
|
|
72
|
-
}
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
ul {
|
|
76
|
-
margin-inline-start: 0;
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
.nav-list {
|
|
80
|
-
margin-inline-start: 24px;
|
|
81
|
-
}
|
|
82
17
|
}
|
|
83
18
|
}
|
|
84
19
|
|
|
@@ -87,38 +22,26 @@
|
|
|
87
22
|
.kth-local-navigation--mobile {
|
|
88
23
|
h2 {
|
|
89
24
|
@include typography.font-heading-s;
|
|
90
|
-
margin-inline-start: spacing.$space-24;
|
|
91
25
|
margin-block-start: spacing.$space-12;
|
|
92
26
|
margin-block-end: spacing.$space-4;
|
|
93
27
|
}
|
|
94
28
|
|
|
95
|
-
h3,
|
|
96
|
-
h4,
|
|
97
|
-
h5 {
|
|
98
|
-
@include typography.font-heading-xs;
|
|
99
|
-
margin-block: spacing.$space-8;
|
|
100
|
-
}
|
|
101
|
-
|
|
102
29
|
ul {
|
|
103
30
|
list-style: none;
|
|
104
31
|
padding: 0;
|
|
105
32
|
margin: 0;
|
|
106
|
-
margin-inline-start: spacing.$space-8;
|
|
107
|
-
}
|
|
108
33
|
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
&__submenu ul {
|
|
114
|
-
margin-inline-start: 0;
|
|
34
|
+
&.kth-local-navigation__submenu,
|
|
35
|
+
&.kth-local-navigation--mobile__submenu {
|
|
36
|
+
margin-inline-start: spacing.$space-16;
|
|
37
|
+
}
|
|
115
38
|
}
|
|
116
39
|
|
|
117
40
|
a:not(.kth-button) {
|
|
118
41
|
text-decoration: none;
|
|
119
42
|
display: flex;
|
|
120
43
|
padding-block: spacing.$space-8;
|
|
121
|
-
padding-inline-start: spacing.$space-
|
|
44
|
+
padding-inline-start: spacing.$space-12;
|
|
122
45
|
}
|
|
123
46
|
|
|
124
47
|
a:hover {
|
|
@@ -136,6 +59,10 @@
|
|
|
136
59
|
align-self: center;
|
|
137
60
|
}
|
|
138
61
|
|
|
62
|
+
a.expandable.expanded::after {
|
|
63
|
+
rotate: 90deg;
|
|
64
|
+
}
|
|
65
|
+
|
|
139
66
|
a[aria-current="page"] {
|
|
140
67
|
position: relative;
|
|
141
68
|
|