@kth/style 1.2.0 → 1.3.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.
package/package.json
CHANGED
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
@use "../tokens/spacing";
|
|
2
|
+
@use "../tokens/sizing.scss";
|
|
3
|
+
@use "../utils/mixins.scss";
|
|
4
|
+
|
|
5
|
+
.kth-breadcrumbs {
|
|
6
|
+
display: none;
|
|
7
|
+
@include mixins.container;
|
|
8
|
+
padding-block-start: spacing.$space-16;
|
|
9
|
+
|
|
10
|
+
@media (min-width: sizing.$breakpoint-64) {
|
|
11
|
+
display: block;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
&__list {
|
|
15
|
+
list-style: none;
|
|
16
|
+
display: flex;
|
|
17
|
+
padding: 0;
|
|
18
|
+
margin: 0;
|
|
19
|
+
|
|
20
|
+
li {
|
|
21
|
+
position: relative;
|
|
22
|
+
padding-right: spacing.$space-8;
|
|
23
|
+
|
|
24
|
+
&::after {
|
|
25
|
+
content: "/";
|
|
26
|
+
color: var(--color-tertiary);
|
|
27
|
+
padding-left: spacing.$space-8;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
&:last-child::after {
|
|
31
|
+
content: "";
|
|
32
|
+
position: static;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
}
|
|
@@ -102,17 +102,11 @@ $icon-size: calc(#{spacing.$space-24} + 2 * var(--space-inner-icon));
|
|
|
102
102
|
|
|
103
103
|
.kth-button.menu::before {
|
|
104
104
|
@include icons.icon-menu;
|
|
105
|
-
width: 20px;
|
|
106
|
-
min-width: 20px;
|
|
107
|
-
height: 20px;
|
|
108
105
|
background-color: var(--color-tertiary);
|
|
109
106
|
}
|
|
110
107
|
|
|
111
108
|
.kth-button.back::before {
|
|
112
109
|
@include icons.icon-arrow-back;
|
|
113
|
-
width: 20px;
|
|
114
|
-
min-width: 20px;
|
|
115
|
-
height: 20px;
|
|
116
110
|
background-color: var(--color-tertiary);
|
|
117
111
|
}
|
|
118
112
|
|
|
@@ -122,9 +116,6 @@ $icon-size: calc(#{spacing.$space-24} + 2 * var(--space-inner-icon));
|
|
|
122
116
|
|
|
123
117
|
.kth-button.previous::before {
|
|
124
118
|
@include icons.icon-arrow-back-500;
|
|
125
|
-
width: 20px;
|
|
126
|
-
min-width: 20px;
|
|
127
|
-
height: 20px;
|
|
128
119
|
background-color: var(--color-text);
|
|
129
120
|
}
|
|
130
121
|
|
|
@@ -134,9 +125,6 @@ $icon-size: calc(#{spacing.$space-24} + 2 * var(--space-inner-icon));
|
|
|
134
125
|
|
|
135
126
|
.kth-button.next::after {
|
|
136
127
|
@include icons.icon-arrow-forward-500;
|
|
137
|
-
width: 20px;
|
|
138
|
-
min-width: 20px;
|
|
139
|
-
height: 20px;
|
|
140
128
|
background-color: var(--color-on-primary);
|
|
141
129
|
}
|
|
142
130
|
}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
@use "../tokens/sizing.scss";
|
|
1
2
|
@use "../tokens/spacing.scss";
|
|
2
3
|
@use "../utils/mixins.scss";
|
|
3
4
|
|
|
@@ -8,7 +9,12 @@
|
|
|
8
9
|
|
|
9
10
|
.kth-main-content {
|
|
10
11
|
@include mixins.container;
|
|
12
|
+
padding-block: spacing.$space-16;
|
|
11
13
|
flex: 1;
|
|
14
|
+
|
|
15
|
+
@media (min-width: sizing.$breakpoint-64) {
|
|
16
|
+
padding-block: spacing.$space-32;
|
|
17
|
+
}
|
|
12
18
|
}
|
|
13
19
|
}
|
|
14
20
|
|
|
@@ -5,18 +5,6 @@
|
|
|
5
5
|
@use "../tokens/sizing.scss";
|
|
6
6
|
@use "../tokens/icons";
|
|
7
7
|
|
|
8
|
-
@layer legacy-compatibility {
|
|
9
|
-
.kth-local-navigation--mobile {
|
|
10
|
-
display: block;
|
|
11
|
-
width: auto;
|
|
12
|
-
padding: 0;
|
|
13
|
-
|
|
14
|
-
@media (min-width: 992px) {
|
|
15
|
-
display: none;
|
|
16
|
-
}
|
|
17
|
-
}
|
|
18
|
-
}
|
|
19
|
-
|
|
20
8
|
@layer kth-style {
|
|
21
9
|
.kth-local-navigation,
|
|
22
10
|
.kth-local-navigation--mobile {
|
package/scss/tokens/icons.scss
CHANGED
package/scss/utils/layers.scss
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer kth-style.old, kth-style
|
|
1
|
+
@layer kth-style.old, kth-style;
|