@kth/style 0.6.4 → 0.8.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/README.md +0 -2
- package/dist/cjs/index.js +1 -1
- package/dist/esm/index.js +1 -1
- package/package.json +1 -1
- package/scss/components/footer.scss +69 -0
- package/scss/components/menu-panel.scss +41 -4
package/README.md
CHANGED
|
@@ -28,5 +28,3 @@ Documentation available in the [KTH Style website](https://kthstyledemoprod.z6.w
|
|
|
28
28
|
- `src/react-components` are the React components
|
|
29
29
|
- `index.ts` and `react.ts` re-export the content in the respective `components` directories
|
|
30
30
|
- `assets` are static assets like the fonts and logotype. This is meant to be exposed by apps using KTH Style
|
|
31
|
-
|
|
32
|
-
Lorem pisp
|
package/dist/cjs/index.js
CHANGED
|
@@ -11,7 +11,7 @@ function closeAllDialogs() {
|
|
|
11
11
|
* @param dialog A <dialog> element
|
|
12
12
|
*/
|
|
13
13
|
function addEventListeners(dialog) {
|
|
14
|
-
const closeButton = dialog.querySelector(".kth-button.close");
|
|
14
|
+
const closeButton = dialog.querySelector(".kth-icon-button.close");
|
|
15
15
|
const backButton = dialog.querySelector(".kth-button.back");
|
|
16
16
|
dialog.addEventListener("keydown", (e) => {
|
|
17
17
|
if (e.key === "Escape") {
|
package/dist/esm/index.js
CHANGED
|
@@ -9,7 +9,7 @@ function closeAllDialogs() {
|
|
|
9
9
|
* @param dialog A <dialog> element
|
|
10
10
|
*/
|
|
11
11
|
function addEventListeners(dialog) {
|
|
12
|
-
const closeButton = dialog.querySelector(".kth-button.close");
|
|
12
|
+
const closeButton = dialog.querySelector(".kth-icon-button.close");
|
|
13
13
|
const backButton = dialog.querySelector(".kth-button.back");
|
|
14
14
|
dialog.addEventListener("keydown", (e) => {
|
|
15
15
|
if (e.key === "Escape") {
|
package/package.json
CHANGED
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
@use "../tokens/colors.scss";
|
|
2
|
+
@use "../tokens/spacing.scss";
|
|
3
|
+
@use "../utils/mixins.scss";
|
|
4
|
+
@use "../tokens/typography";
|
|
5
|
+
@use "../tokens/sizing.scss";
|
|
6
|
+
|
|
7
|
+
@layer kth-style {
|
|
8
|
+
.kth-footer.intranet {
|
|
9
|
+
@include colors.theme-intranet;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.kth-footer.external {
|
|
13
|
+
@include colors.theme-inverse;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.kth-footer.student-web {
|
|
17
|
+
@include colors.theme-student-web;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.kth-footer {
|
|
21
|
+
background: var(--color-background);
|
|
22
|
+
|
|
23
|
+
&__content {
|
|
24
|
+
@include mixins.container;
|
|
25
|
+
padding-top: spacing.$space-32;
|
|
26
|
+
padding-bottom: spacing.$space-32;
|
|
27
|
+
color: var(--color-primary);
|
|
28
|
+
|
|
29
|
+
.columnSplitter {
|
|
30
|
+
display: grid;
|
|
31
|
+
grid-template-columns: repeat(4, 1fr);
|
|
32
|
+
grid-column-gap: spacing.$space-48;
|
|
33
|
+
|
|
34
|
+
@media (max-width: sizing.$breakpoint-64) {
|
|
35
|
+
display: block;
|
|
36
|
+
column-count: 2;
|
|
37
|
+
|
|
38
|
+
.col {
|
|
39
|
+
break-inside: avoid-column;
|
|
40
|
+
width: 100%;
|
|
41
|
+
|
|
42
|
+
&:not(:first-child) {
|
|
43
|
+
margin-top: spacing.$space-32;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.col .block:not(:first-child) {
|
|
49
|
+
margin-top: spacing.$space-32;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
h2 {
|
|
54
|
+
@include typography.font-heading-s;
|
|
55
|
+
margin: 0 0 spacing.$space-8;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
ul {
|
|
59
|
+
padding: 0;
|
|
60
|
+
margin: 0;
|
|
61
|
+
list-style-type: none;
|
|
62
|
+
|
|
63
|
+
li:not(:last-child) {
|
|
64
|
+
margin-bottom: spacing.$space-16;
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
}
|
|
@@ -9,15 +9,52 @@
|
|
|
9
9
|
width: 100%;
|
|
10
10
|
border: none;
|
|
11
11
|
background: var(--color-background);
|
|
12
|
-
padding: 0;
|
|
13
|
-
padding-block-end: spacing.$space-48;
|
|
12
|
+
padding: spacing.$space-48 0;
|
|
14
13
|
|
|
15
14
|
&__container {
|
|
16
15
|
@include mixins.container;
|
|
17
16
|
}
|
|
18
17
|
|
|
19
|
-
|
|
20
|
-
|
|
18
|
+
&__header {
|
|
19
|
+
width: 100%;
|
|
20
|
+
padding: 0 0 spacing.$space-32;
|
|
21
|
+
display: flex;
|
|
22
|
+
align-items: flex-start;
|
|
23
|
+
justify-content: space-between;
|
|
24
|
+
|
|
25
|
+
h2 {
|
|
26
|
+
@include typography.font-heading-m;
|
|
27
|
+
color: var(--color-primary);
|
|
28
|
+
margin-bottom: spacing.$space-4;
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
&__content {
|
|
33
|
+
color: var(--color-primary);
|
|
34
|
+
|
|
35
|
+
.columnSplitter {
|
|
36
|
+
display: grid;
|
|
37
|
+
grid-template-columns: repeat(4, 1fr);
|
|
38
|
+
grid-gap: spacing.$space-48;
|
|
39
|
+
|
|
40
|
+
.col .block:not(:first-child) {
|
|
41
|
+
margin-top: spacing.$space-32;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
h3 {
|
|
46
|
+
@include typography.font-heading-s;
|
|
47
|
+
margin: 0 0 spacing.$space-8;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
ul {
|
|
51
|
+
padding: 0;
|
|
52
|
+
list-style-type: none;
|
|
53
|
+
|
|
54
|
+
li:not(:last-child) {
|
|
55
|
+
margin-bottom: spacing.$space-16;
|
|
56
|
+
}
|
|
57
|
+
}
|
|
21
58
|
}
|
|
22
59
|
}
|
|
23
60
|
|