@oslokommune/punkt-css 9.3.2 → 9.4.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/CHANGELOG.md +28 -0
- package/README.md +1 -1
- package/dist/css/components/alert.css +18 -16
- package/dist/css/components/alert.min.css +1 -1
- package/dist/css/components/badge.css +2 -13
- package/dist/css/components/badge.min.css +1 -1
- package/dist/css/components/footer.css +5 -5
- package/dist/css/components/footer.min.css +1 -1
- package/dist/css/components/header.css +20 -11
- package/dist/css/components/header.min.css +1 -1
- package/dist/css/components/inputwrapper.css +21 -16
- package/dist/css/components/inputwrapper.min.css +1 -1
- package/dist/css/components/linkcard.css +21 -12
- package/dist/css/components/linkcard.min.css +1 -1
- package/dist/css/components/messagebox.css +12 -12
- package/dist/css/components/messagebox.min.css +1 -1
- package/dist/css/components/tag.css +126 -40
- package/dist/css/components/tag.min.css +1 -1
- package/dist/css/components/textinput.css +61 -35
- package/dist/css/components/textinput.min.css +1 -1
- package/dist/css/pkt-base.css +1418 -243
- package/dist/css/pkt-base.min.css +1 -1
- package/dist/css/pkt-components.css +286 -160
- package/dist/css/pkt-components.min.css +1 -1
- package/dist/css/pkt-elements.css +484 -344
- package/dist/css/pkt-elements.min.css +1 -1
- package/dist/css/pkt.css +2127 -712
- package/dist/css/pkt.min.css +1 -1
- package/dist/scss/abstracts/variables/_colors.scss +108 -0
- package/dist/scss/abstracts/variables/_spacing.scss +12 -10
- package/dist/scss/base/_colors.scss +111 -9
- package/dist/scss/base/_typography.scss +15 -58
- package/dist/scss/components/_alert.scss +28 -25
- package/dist/scss/components/_badge.scss +56 -55
- package/dist/scss/components/_footer.scss +5 -8
- package/dist/scss/components/_header.scss +30 -16
- package/dist/scss/components/_inputwrapper.scss +27 -20
- package/dist/scss/components/_linkcard.scss +41 -16
- package/dist/scss/components/_messagebox.scss +16 -14
- package/dist/scss/components/_tag.scss +150 -41
- package/dist/scss/elements/_button.scss +220 -156
- package/dist/scss/elements/_checkbox-radio.scss +86 -150
- package/dist/scss/elements/_form.scss +26 -24
- package/dist/scss/elements/_hr.scss +1 -1
- package/dist/scss/elements/_input.scss +63 -41
- package/dist/scss/elements/_list.scss +11 -6
- package/dist/scss/elements/_section.scss +8 -8
- package/dist/scss/elements/_table.scss +8 -8
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,34 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
|
|
|
5
5
|
|
|
6
6
|
---
|
|
7
7
|
|
|
8
|
+
## [9.4.0](https://github.com/oslokommune/punkt/compare/9.3.4...9.4.0) (2023-11-06)
|
|
9
|
+
|
|
10
|
+
### ⚠ BREAKING CHANGES
|
|
11
|
+
Ingen
|
|
12
|
+
|
|
13
|
+
### Features
|
|
14
|
+
* Nye designtokens - farger. Nye fargevariabler kan leses om på vår nettside.
|
|
15
|
+
Vi ønsker å gi dere litt tid på å bytte til nye fargevariabler så de gamle vil være tilgjengelige en liten stund fremover.
|
|
16
|
+
Mappingen av gamle til nye fargevariabler vil bli tilgjengelig på vår wiki-side på GitHub.
|
|
17
|
+
|
|
18
|
+
* docs(docs): #1171 docs disabled
|
|
19
|
+
|
|
20
|
+
* chore(all): #1184 Erstatt fargevariabler
|
|
21
|
+
|
|
22
|
+
* docs(docs,css) #1185 Dokumentere farger
|
|
23
|
+
|
|
24
|
+
* docs(docs): Contrastchecker
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
### Bug Fixes
|
|
28
|
+
Ingen
|
|
29
|
+
|
|
30
|
+
### Chores
|
|
31
|
+
Ingen
|
|
32
|
+
|
|
33
|
+
---
|
|
34
|
+
|
|
35
|
+
|
|
8
36
|
## [9.3.2](https://github.com/oslokommune/punkt/compare/9.3.1...9.3.2) (2023-10-30)
|
|
9
37
|
|
|
10
38
|
### ⚠ BREAKING CHANGES
|
package/README.md
CHANGED
|
@@ -242,7 +242,7 @@ Man kan hente verdier med denne funksjonen fra:
|
|
|
242
242
|
.wrapper {
|
|
243
243
|
max-width: map.get(variables.$breakpoints, 'phablet');
|
|
244
244
|
padding: map.get(variables.$spacing, 'size-24');
|
|
245
|
-
background-color: map.get(variables.$colors, 'color-red');
|
|
245
|
+
background-color: map.get(variables.$pkt-colors, 'color-red');
|
|
246
246
|
font-size: map.get(variables.$font-size, 'size-54');
|
|
247
247
|
}
|
|
248
248
|
```
|
|
@@ -2,35 +2,35 @@
|
|
|
2
2
|
* Alert component
|
|
3
3
|
*/
|
|
4
4
|
.pkt-alert {
|
|
5
|
-
--pkt-alert-bc: var(--color-blue);
|
|
6
|
-
--pkt-alert-bg: var(--color-blue
|
|
7
|
-
--pkt-alert-txt: var(--color-
|
|
8
|
-
--pkt-alert-icon-fg: var(--color-blue-
|
|
9
|
-
--pkt-alert-close-fg: var(--color-blue-
|
|
5
|
+
--pkt-color-alert-bc: var(--pkt-color-border-blue);
|
|
6
|
+
--pkt-color-alert-bg: var(--pkt-color-surface-default-light-blue);
|
|
7
|
+
--pkt-color-alert-txt: var(--pkt-color-text-body-dark);
|
|
8
|
+
--pkt-color-alert-icon-fg: var(--pkt-color-brand-dark-blue-1000);
|
|
9
|
+
--pkt-color-alert-close-fg: var(--pkt-color-brand-dark-blue-1000);
|
|
10
10
|
}
|
|
11
11
|
|
|
12
12
|
.pkt-alert--error {
|
|
13
|
-
--pkt-alert-bc: var(--color-red);
|
|
14
|
-
--pkt-alert-bg: var(--color-red
|
|
13
|
+
--pkt-color-alert-bc: var(--pkt-color-border-red);
|
|
14
|
+
--pkt-color-alert-bg: var(--pkt-color-surface-default-faded-red);
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
.pkt-alert--success {
|
|
18
|
-
--pkt-alert-bc: var(--color-green);
|
|
19
|
-
--pkt-alert-bg: var(--color-green
|
|
18
|
+
--pkt-color-alert-bc: var(--pkt-color-border-green);
|
|
19
|
+
--pkt-color-alert-bg: var(--pkt-color-surface-default-light-green);
|
|
20
20
|
}
|
|
21
21
|
|
|
22
22
|
.pkt-alert--warning {
|
|
23
|
-
--pkt-alert-bc: var(--color-yellow);
|
|
24
|
-
--pkt-alert-bg: var(--color-yellow
|
|
23
|
+
--pkt-color-alert-bc: var(--pkt-color-border-yellow);
|
|
24
|
+
--pkt-color-alert-bg: var(--pkt-color-surface-default-yellow);
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
.pkt-alert {
|
|
28
28
|
padding: 1.5rem 1.5rem 1.5rem 1.25rem;
|
|
29
29
|
display: block;
|
|
30
30
|
position: relative;
|
|
31
|
-
border-left: 0.25rem solid var(--pkt-alert-bc);
|
|
32
|
-
background-color: var(--pkt-alert-bg);
|
|
33
|
-
color: var(--pkt-alert-txt);
|
|
31
|
+
border-left: 0.25rem solid var(--pkt-color-alert-bc);
|
|
32
|
+
background-color: var(--pkt-color-alert-bg);
|
|
33
|
+
color: var(--pkt-color-alert-txt);
|
|
34
34
|
}
|
|
35
35
|
.pkt-alert__title {
|
|
36
36
|
font-size: 1.125rem;
|
|
@@ -73,7 +73,7 @@
|
|
|
73
73
|
margin-top: 1.5rem;
|
|
74
74
|
}
|
|
75
75
|
.pkt-alert__icon {
|
|
76
|
-
--fg-color: var(--pkt-alert-icon-fg);
|
|
76
|
+
--fg-color: var(--pkt-color-alert-icon-fg);
|
|
77
77
|
height: 2rem;
|
|
78
78
|
width: 2rem;
|
|
79
79
|
position: absolute;
|
|
@@ -81,11 +81,13 @@
|
|
|
81
81
|
left: 20px;
|
|
82
82
|
}
|
|
83
83
|
.pkt-alert__close {
|
|
84
|
-
--fg-color: var(--pkt-alert-close-fg);
|
|
85
84
|
position: absolute;
|
|
86
85
|
right: 1.125rem;
|
|
87
86
|
top: 0.625rem;
|
|
88
87
|
}
|
|
88
|
+
.pkt-alert__close svg {
|
|
89
|
+
--fg-color: var(--pkt-color-alert-close-fg);
|
|
90
|
+
}
|
|
89
91
|
|
|
90
92
|
.pkt-alert--slim {
|
|
91
93
|
padding: 0.75rem 1rem 0.75rem 0.25rem;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.pkt-alert{--pkt-alert-bc: var(--color-blue);--pkt-alert-bg: var(--color-blue
|
|
1
|
+
.pkt-alert{--pkt-color-alert-bc: var(--pkt-color-border-blue);--pkt-color-alert-bg: var(--pkt-color-surface-default-light-blue);--pkt-color-alert-txt: var(--pkt-color-text-body-dark);--pkt-color-alert-icon-fg: var(--pkt-color-brand-dark-blue-1000);--pkt-color-alert-close-fg: var(--pkt-color-brand-dark-blue-1000)}.pkt-alert--error{--pkt-color-alert-bc: var(--pkt-color-border-red);--pkt-color-alert-bg: var(--pkt-color-surface-default-faded-red)}.pkt-alert--success{--pkt-color-alert-bc: var(--pkt-color-border-green);--pkt-color-alert-bg: var(--pkt-color-surface-default-light-green)}.pkt-alert--warning{--pkt-color-alert-bc: var(--pkt-color-border-yellow);--pkt-color-alert-bg: var(--pkt-color-surface-default-yellow)}.pkt-alert{padding:1.5rem 1.5rem 1.5rem 1.25rem;display:block;position:relative;border-left:.25rem solid var(--pkt-color-alert-bc);background-color:var(--pkt-color-alert-bg);color:var(--pkt-color-alert-txt)}.pkt-alert__title{font-size:1.125rem;font-weight:500;letter-spacing:-0.2px;line-height:1.75rem;margin:0 0 1.5rem 2.5rem}.pkt-alert__close~.pkt-alert__title{margin:0 4rem 1.5rem 2.5rem}.pkt-alert__text{font-size:1.125rem;font-weight:300;letter-spacing:-0.2px;line-height:1.75rem;margin:0 0 0 2.5rem}.pkt-alert__text p{margin-bottom:1rem}.pkt-alert__text p:first-of-type{margin-top:0}.pkt-alert__text p:last-of-type{margin-bottom:0}.pkt-alert__close+.pkt-alert__text{margin:0 4rem 0 2.5rem}.pkt-alert__title+.pkt-alert__text{margin-left:0;margin-right:0}.pkt-alert__date{font-size:.875rem;font-weight:300;letter-spacing:-0.2px;line-height:1.375rem;margin-top:1.5rem}.pkt-alert__icon{--fg-color: var(--pkt-color-alert-icon-fg);height:2rem;width:2rem;position:absolute;top:22px;left:20px}.pkt-alert__close{position:absolute;right:1.125rem;top:.625rem}.pkt-alert__close svg{--fg-color: var(--pkt-color-alert-close-fg)}.pkt-alert--slim{padding:.75rem 1rem .75rem .25rem}.pkt-alert--slim .pkt-alert__icon{width:1.375rem;height:1.375rem;top:.81rem;left:1.25rem}.pkt-alert--slim .pkt-alert__text{font-size:1rem;font-weight:300;letter-spacing:-0.2px;line-height:1.5rem;margin:0 0 0 2.875rem}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
/*
|
|
2
2
|
* Badge element
|
|
3
|
+
* DEPRECATED - use tag instead
|
|
3
4
|
*/
|
|
4
5
|
.pkt-badge {
|
|
5
6
|
display: inline-flex;
|
|
@@ -10,21 +11,9 @@
|
|
|
10
11
|
font-weight: 500;
|
|
11
12
|
font-size: 0.75em;
|
|
12
13
|
line-height: 1em;
|
|
13
|
-
background: #b3f5ff;
|
|
14
14
|
border-radius: 1px;
|
|
15
15
|
}
|
|
16
16
|
|
|
17
|
-
.pkt-btn > .pkt-badge.pkt-badge--strong,
|
|
18
|
-
.pkt-badge--strong {
|
|
19
|
-
color: #b3f5ff;
|
|
20
|
-
background: #2a2859;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
.pkt-btn > .pkt-badge.pkt-badge--info,
|
|
24
|
-
.pkt-badge--info {
|
|
25
|
-
background: #f9c66b;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
17
|
.pkt-badge.pkt-badge--small,
|
|
29
18
|
.pkt-h1 > .pkt-badge,
|
|
30
19
|
.pkt-h2 > .pkt-badge,
|
|
@@ -36,7 +25,7 @@
|
|
|
36
25
|
.pkt-btn:not(.pkt-btn--ter) > .pkt-badge {
|
|
37
26
|
color: inherit;
|
|
38
27
|
background: transparent;
|
|
39
|
-
border: 1px solid
|
|
28
|
+
border: 1px solid;
|
|
40
29
|
border-radius: 4px;
|
|
41
30
|
}
|
|
42
31
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.pkt-badge{display:inline-flex;height:1.5em;margin-left:.4em;padding:.25em .4em;color:#000;font-weight:500;font-size:.75em;line-height:1em;
|
|
1
|
+
.pkt-badge{display:inline-flex;height:1.5em;margin-left:.4em;padding:.25em .4em;color:#000;font-weight:500;font-size:.75em;line-height:1em;border-radius:1px}.pkt-badge.pkt-badge--small,.pkt-h1>.pkt-badge,.pkt-h2>.pkt-badge,.pkt-h3>.pkt-badge{font-size:.5em;transform:translateY(-0.25em)}.pkt-btn:not(.pkt-btn--ter)>.pkt-badge{color:inherit;background:rgba(0,0,0,0);border:1px solid;border-radius:4px}.pkt-btn--pri:not(.pkt-btn--neg)>.pkt-badge,.pkt-btn--neg.pkt-btn--ter>.pkt-badge,.pkt-btn--neg.pkt-btn--ghost>.pkt-badge{border-color:#fff}.pkt-btn--small>.pkt-badge{padding-top:.28em;transform:translateY(-0.1em)}
|
|
@@ -7,8 +7,8 @@
|
|
|
7
7
|
letter-spacing: -0.2px;
|
|
8
8
|
line-height: 1.75rem;
|
|
9
9
|
padding: 2.5rem 1.5rem;
|
|
10
|
-
background-color: var(--color-
|
|
11
|
-
color: var(--color-
|
|
10
|
+
background-color: var(--pkt-color-surface-strong-dark-blue);
|
|
11
|
+
color: var(--pkt-color-text-body-default);
|
|
12
12
|
display: flex;
|
|
13
13
|
align-items: center;
|
|
14
14
|
}
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
line-height: 2.25rem;
|
|
29
29
|
margin-bottom: 2rem;
|
|
30
30
|
margin-top: 0;
|
|
31
|
-
color: var(--color-
|
|
31
|
+
color: var(--pkt-color-text-body-default);
|
|
32
32
|
}
|
|
33
33
|
.pkt-footer__text:last-child {
|
|
34
34
|
margin-bottom: 0;
|
|
@@ -110,8 +110,8 @@
|
|
|
110
110
|
letter-spacing: -0.2px;
|
|
111
111
|
line-height: 1.75rem;
|
|
112
112
|
padding: 2rem 1.5rem;
|
|
113
|
-
background-color: var(--color-
|
|
114
|
-
color: var(--color-
|
|
113
|
+
background-color: var(--pkt-color-surface-strong-dark-blue);
|
|
114
|
+
color: var(--pkt-color-text-body-default);
|
|
115
115
|
display: flex;
|
|
116
116
|
align-items: center;
|
|
117
117
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.pkt-footer{font-size:1.125rem;font-weight:300;letter-spacing:-0.2px;line-height:1.75rem;padding:2.5rem 1.5rem;background-color:var(--color-
|
|
1
|
+
.pkt-footer{font-size:1.125rem;font-weight:300;letter-spacing:-0.2px;line-height:1.75rem;padding:2.5rem 1.5rem;background-color:var(--pkt-color-surface-strong-dark-blue);color:var(--pkt-color-text-body-default);display:flex;align-items:center}@media screen and (min-width: 80rem){.pkt-footer{padding:3.5rem 1.5rem;justify-content:center}}.pkt-footer__container{max-width:80rem}.pkt-footer__title{font-size:1.5rem;font-weight:500;letter-spacing:-0.2px;line-height:2.25rem;margin-bottom:2rem;margin-top:0;color:var(--pkt-color-text-body-default)}.pkt-footer__text:last-child{margin-bottom:0;margin-top:2rem}.pkt-footer__text:not(:last-child){margin-bottom:2rem;margin-top:0}.pkt-footer__list{padding:0;margin:0;list-style:none}.pkt-footer__list-item{word-break:break-word}.pkt-footer__list-item:not(:last-child){margin-bottom:1rem}@media screen and (min-width: 80rem){.pkt-footer__list-item{margin-bottom:0}}.pkt-footer__link{display:flex;text-decoration:none !important}.pkt-footer__link:hover .pkt-footer__link-icon{--fg-color: currentColor}.pkt-footer__link-icon{--fg-color: currentColor;width:24px;height:24px;margin-right:.5rem;flex-shrink:0}@media screen and (min-width: 80rem){.pkt-footer__link-icon{margin-top:0}}.pkt-footer__social{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;gap:2rem;margin-top:2.5rem}.pkt-footer__social:hover .pkt-footer__link-icon{--fg-color: currentColor}@media screen and (min-width: 80rem){.pkt-footer__social{align-items:flex-end;justify-content:end}}@media screen and (min-width: 80rem){.pkt-footer__social-language{justify-self:flex-start}}.pkt-footer__social-icon{--fg-color: currentColor;width:24px;height:24px}.pkt-footer__social-icon-link:not(:last-child){margin-right:1rem}.pkt-footer-simple{font-size:1.125rem;font-weight:300;letter-spacing:-0.2px;line-height:1.75rem;padding:2rem 1.5rem;background-color:var(--pkt-color-surface-strong-dark-blue);color:var(--pkt-color-text-body-default);display:flex;align-items:center}@media screen and (min-width: 80rem){.pkt-footer-simple{justify-content:center}}.pkt-footer-simple__container{max-width:80rem}.pkt-footer-simple__list{padding:0;margin:0;list-style:none}@media screen and (min-width: 80rem){.pkt-footer-simple__list-item{display:inline-flex}}.pkt-footer-simple__list-item:not(:last-child){margin-bottom:1rem}@media screen and (min-width: 80rem){.pkt-footer-simple__list-item:not(:last-child){margin-bottom:0;margin-right:2rem}}.pkt-footer-simple__link{display:flex;text-decoration:none !important;align-items:flex-start}.pkt-footer-simple__link:hover .pkt-footer__link-icon{--fg-color: currentColor}.pkt-footer-simple__link-icon{--fg-color: currentColor;width:24px;height:24px;margin-right:.5rem;flex-shrink:0}@media screen and (min-width: 80rem){.pkt-footer-simple__link-icon{margin-top:0}}
|
|
@@ -2,8 +2,9 @@
|
|
|
2
2
|
* Header component
|
|
3
3
|
*/
|
|
4
4
|
.pkt-header {
|
|
5
|
-
background-color: var(--color-
|
|
6
|
-
border-bottom: 1px solid var(--color-
|
|
5
|
+
background-color: var(--pkt-color-background-default);
|
|
6
|
+
border-bottom: 1px solid var(--pkt-color-border-subtle);
|
|
7
|
+
color: var(--pkt-color-text-body-default);
|
|
7
8
|
display: flex;
|
|
8
9
|
justify-content: space-between;
|
|
9
10
|
align-items: center;
|
|
@@ -54,6 +55,9 @@
|
|
|
54
55
|
margin: 0;
|
|
55
56
|
padding: 0;
|
|
56
57
|
}
|
|
58
|
+
.pkt-header__logo svg {
|
|
59
|
+
--fg-color: var(--pkt-color-text-body-default);
|
|
60
|
+
}
|
|
57
61
|
.pkt-header__logo-service {
|
|
58
62
|
padding-top: 0.2rem;
|
|
59
63
|
display: none;
|
|
@@ -116,7 +120,7 @@
|
|
|
116
120
|
}
|
|
117
121
|
}
|
|
118
122
|
.pkt-header__user-btn {
|
|
119
|
-
border-color: var(--color-yellow);
|
|
123
|
+
border-color: var(--pkt-color-brand-yellow-1000);
|
|
120
124
|
}
|
|
121
125
|
.pkt-header__actions {
|
|
122
126
|
flex: 1 0 auto;
|
|
@@ -148,6 +152,7 @@
|
|
|
148
152
|
max-height: calc(100vh - 4.5rem);
|
|
149
153
|
overflow-x: hidden;
|
|
150
154
|
overflow-y: auto;
|
|
155
|
+
color: var(--pkt-color-text-body-dark);
|
|
151
156
|
}
|
|
152
157
|
@media screen and (min-width: 48rem) {
|
|
153
158
|
.pkt-header__dropdown {
|
|
@@ -160,14 +165,14 @@
|
|
|
160
165
|
}
|
|
161
166
|
.pkt-header__dropdown > li {
|
|
162
167
|
padding: 2rem;
|
|
163
|
-
background-color: var(--color-white);
|
|
168
|
+
background-color: var(--pkt-color-surface-subtle-white);
|
|
164
169
|
}
|
|
165
170
|
.pkt-header__dropdown > li.footer {
|
|
166
171
|
padding-top: 1rem;
|
|
167
172
|
padding-bottom: 1rem;
|
|
168
173
|
}
|
|
169
174
|
.pkt-header__dropdown > li:nth-child(odd) {
|
|
170
|
-
background-color: var(--color-gray
|
|
175
|
+
background-color: var(--pkt-color-surface-default-gray);
|
|
171
176
|
}
|
|
172
177
|
.pkt-header__user-fullname {
|
|
173
178
|
display: none;
|
|
@@ -191,7 +196,7 @@
|
|
|
191
196
|
}
|
|
192
197
|
}
|
|
193
198
|
.pkt-header--has-dropdown > .pkt-btn:hover .pkt-btn--closed {
|
|
194
|
-
--fg-color: var(--color-white);
|
|
199
|
+
--fg-color: var(--pkt-color-surface-subtle-white);
|
|
195
200
|
}
|
|
196
201
|
.pkt-header--has-dropdown .pkt-btn--open {
|
|
197
202
|
display: none;
|
|
@@ -205,12 +210,12 @@
|
|
|
205
210
|
}
|
|
206
211
|
}
|
|
207
212
|
.pkt-header--has-dropdown.pkt-header--open-dropdown > .pkt-btn {
|
|
208
|
-
background-color: var(--color-active);
|
|
209
|
-
border-color: var(--color-active);
|
|
210
|
-
color: var(--color-white);
|
|
213
|
+
background-color: var(--pkt-color-border-states-active);
|
|
214
|
+
border-color: var(--pkt-color-border-states-active);
|
|
215
|
+
color: var(--pkt-color-surface-subtle-white);
|
|
211
216
|
}
|
|
212
217
|
.pkt-header--has-dropdown.pkt-header--open-dropdown > .pkt-btn .pkt-btn--open {
|
|
213
|
-
--fg-color: var(--color-white);
|
|
218
|
+
--fg-color: var(--pkt-color-surface-subtle-white);
|
|
214
219
|
}
|
|
215
220
|
@media screen and (min-width: 80rem) {
|
|
216
221
|
.pkt-header--has-dropdown.pkt-header--open-dropdown > .pkt-btn .pkt-btn--open {
|
|
@@ -228,7 +233,7 @@
|
|
|
228
233
|
margin: 0;
|
|
229
234
|
}
|
|
230
235
|
.pkt-user-menu__label {
|
|
231
|
-
color: var(--color-
|
|
236
|
+
color: var(--pkt-color-grays-gray-600);
|
|
232
237
|
font-size: 0.875rem;
|
|
233
238
|
font-weight: 500;
|
|
234
239
|
letter-spacing: -0.2px;
|
|
@@ -250,6 +255,7 @@
|
|
|
250
255
|
margin: 0;
|
|
251
256
|
}
|
|
252
257
|
.pkt-user-menu .pkt-list .pkt-link {
|
|
258
|
+
color: var(--pkt-color-text-body-dark);
|
|
253
259
|
text-decoration: none;
|
|
254
260
|
}
|
|
255
261
|
.pkt-user-menu .pkt-list .pkt-link:hover {
|
|
@@ -261,4 +267,7 @@
|
|
|
261
267
|
}
|
|
262
268
|
.pkt-user-menu .pkt-list-horizontal {
|
|
263
269
|
margin: 0;
|
|
270
|
+
}
|
|
271
|
+
.pkt-user-menu .pkt-list-horizontal .pkt-link {
|
|
272
|
+
color: var(--pkt-color-text-body-dark);
|
|
264
273
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.pkt-header{background-color:var(--color-
|
|
1
|
+
.pkt-header{background-color:var(--pkt-color-background-default);border-bottom:1px solid var(--pkt-color-border-subtle);color:var(--pkt-color-text-body-default);display:flex;justify-content:space-between;align-items:center;padding:0 1rem;height:4.5rem}@media screen and (min-width: 48rem){.pkt-header{height:5.5rem}}@media screen and (min-width: 80rem){.pkt-header{height:6.5rem;padding:0 3rem}}.pkt-header--fixed{width:100vw;position:fixed;top:0;left:0;z-index:10}.pkt-header--scroll-to-hide{transform:translate3d(0, 0, 0);transition:.5s transform ease-in-out}.pkt-header--hidden{transform:translate3d(0, -100%, 0)}.pkt-header__logo{flex:0 1 auto;display:flex;align-items:center;gap:1rem;margin:0;padding:.375rem 0 0}@media screen and (min-width: 80rem){.pkt-header__logo{padding:.25rem 0 0;gap:1.5rem}}.pkt-header__logo-link,.pkt-header__logo-service{display:inline-block;margin:0;padding:0}.pkt-header__logo svg{--fg-color: var(--pkt-color-text-body-default)}.pkt-header__logo-service{padding-top:.2rem;display:none;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-size:1.375rem;font-weight:300;letter-spacing:-0.2px;line-height:2.125rem}@media screen and (min-width: 48rem){.pkt-header__logo-service{display:inline-block}}@media screen and (min-width: 80rem){.pkt-header__logo-service{padding-top:.4rem;font-size:1.5rem;font-weight:300;letter-spacing:-0.2px;line-height:2.25rem}}.pkt-header__logo-svg{height:3.25rem;width:6.2903225806rem}@media screen and (min-width: 80rem){.pkt-header__logo-svg{height:4rem;width:7.7419354839rem}}.pkt-header--narrow{padding:0 1rem;height:4.5rem}.pkt-header--narrow .pkt-header__logo{gap:1rem}.pkt-header--narrow .pkt-header__logo-service{padding-top:.28rem;font-size:1.125rem;font-weight:300;letter-spacing:-0.2px;line-height:1.75rem}.pkt-header--narrow .pkt-header__logo-svg{height:3rem;width:5.8064516129rem}@media screen and (min-width: 0)and (max-width: 64rem){.pkt-header__menu-btn{border:0}.pkt-header__menu-btn .pkt-btn__text{display:none}}.pkt-header__user-btn{border-color:var(--pkt-color-brand-yellow-1000)}.pkt-header__actions{flex:1 0 auto;display:flex;justify-content:flex-end;align-items:stretch}.pkt-header__actions-row{list-style:none;padding-left:0;margin:0;display:flex;align-items:center;gap:2rem}.pkt-header__actions-row>li{padding:0}.pkt-header__dropdown{z-index:2;position:absolute;margin:0;margin-top:.75rem;right:0;left:0;padding-left:0;list-style:none;visibility:hidden;max-height:calc(100vh - 4.5rem);overflow-x:hidden;overflow-y:auto;color:var(--pkt-color-text-body-dark)}@media screen and (min-width: 48rem){.pkt-header__dropdown{margin-top:1rem;left:auto;right:0;min-width:23rem;width:auto}}.pkt-header__dropdown>li{padding:2rem;background-color:var(--pkt-color-surface-subtle-white)}.pkt-header__dropdown>li.footer{padding-top:1rem;padding-bottom:1rem}.pkt-header__dropdown>li:nth-child(odd){background-color:var(--pkt-color-surface-default-gray)}.pkt-header__user-fullname{display:none}@media screen and (min-width: 80rem){.pkt-header__user-fullname{display:inline}}.pkt-header__user-shortname{display:inline}@media screen and (min-width: 80rem){.pkt-header__user-shortname{display:none}}@media screen and (min-width: 48rem){.pkt-header--has-dropdown{position:relative}}.pkt-header--has-dropdown>.pkt-btn:hover .pkt-btn--closed{--fg-color: var(--pkt-color-surface-subtle-white)}.pkt-header--has-dropdown .pkt-btn--open{display:none}.pkt-header--has-dropdown .pkt-btn--closed{display:none}@media screen and (min-width: 80rem){.pkt-header--has-dropdown .pkt-btn--closed{display:inline-block}}.pkt-header--has-dropdown.pkt-header--open-dropdown>.pkt-btn{background-color:var(--pkt-color-border-states-active);border-color:var(--pkt-color-border-states-active);color:var(--pkt-color-surface-subtle-white)}.pkt-header--has-dropdown.pkt-header--open-dropdown>.pkt-btn .pkt-btn--open{--fg-color: var(--pkt-color-surface-subtle-white)}@media screen and (min-width: 80rem){.pkt-header--has-dropdown.pkt-header--open-dropdown>.pkt-btn .pkt-btn--open{display:inline-block}}.pkt-header--has-dropdown.pkt-header--open-dropdown>.pkt-btn .pkt-btn--closed{display:none}.pkt-header--has-dropdown.pkt-header--open-dropdown .pkt-header__dropdown{visibility:visible}.pkt-user-menu p{margin:0}.pkt-user-menu__label{color:var(--pkt-color-grays-gray-600);font-size:.875rem;font-weight:500;letter-spacing:-0.2px;line-height:1.375rem}.pkt-user-menu__name{font-size:1.125rem;font-weight:500;letter-spacing:-0.2px;line-height:1.75rem}.pkt-user-menu__last-logged-in,.pkt-user-menu__org_number{font-size:1rem;font-weight:300;letter-spacing:-0.2px;line-height:1.5rem}.pkt-user-menu .pkt-list{margin:0}.pkt-user-menu .pkt-list .pkt-link{color:var(--pkt-color-text-body-dark);text-decoration:none}.pkt-user-menu .pkt-list .pkt-link:hover{text-decoration:underline}.pkt-user-menu .pkt-list>li>a{grid-template-columns:1.5rem auto;gap:.5rem}.pkt-user-menu .pkt-list-horizontal{margin:0}.pkt-user-menu .pkt-list-horizontal .pkt-link{color:var(--pkt-color-text-body-dark)}
|
|
@@ -8,6 +8,7 @@
|
|
|
8
8
|
flex-direction: column;
|
|
9
9
|
align-items: flex-start;
|
|
10
10
|
gap: 0.5rem;
|
|
11
|
+
color: var(--pkt-color-text-body-default);
|
|
11
12
|
}
|
|
12
13
|
.pkt-inputwrapper__label > h2 {
|
|
13
14
|
font-size: inherit;
|
|
@@ -23,6 +24,7 @@
|
|
|
23
24
|
font-weight: 300;
|
|
24
25
|
letter-spacing: -0.2px;
|
|
25
26
|
line-height: 1.375rem;
|
|
27
|
+
color: var(--pkt-color-text-body-default);
|
|
26
28
|
}
|
|
27
29
|
.pkt-inputwrapper__helptext > *:first-child {
|
|
28
30
|
margin-top: 0;
|
|
@@ -44,7 +46,7 @@
|
|
|
44
46
|
}
|
|
45
47
|
.pkt-inputwrapper__helptext-expandable-open {
|
|
46
48
|
display: block;
|
|
47
|
-
border-left: 2px solid var(--color-
|
|
49
|
+
border-left: 2px solid var(--pkt-color-text-body-dark);
|
|
48
50
|
padding: 0.5rem 1rem;
|
|
49
51
|
margin-bottom: 0.25rem;
|
|
50
52
|
}
|
|
@@ -64,15 +66,15 @@
|
|
|
64
66
|
margin-bottom: 0.5rem;
|
|
65
67
|
}
|
|
66
68
|
.pkt-inputwrapper--disabled {
|
|
67
|
-
color: var(--color-disabled);
|
|
69
|
+
color: var(--pkt-color-text-action-disabled);
|
|
68
70
|
cursor: inherit;
|
|
69
71
|
}
|
|
70
72
|
.pkt-inputwrapper--disabled .pkt-tag {
|
|
71
|
-
background-color: var(--color-
|
|
73
|
+
background-color: var(--pkt-color-surface-default-gray);
|
|
72
74
|
}
|
|
73
75
|
.pkt-inputwrapper--disabled .pkt-alert {
|
|
74
|
-
background-color: var(--color-
|
|
75
|
-
border-color: var(--color-disabled);
|
|
76
|
+
background-color: var(--pkt-color-surface-default-gray);
|
|
77
|
+
border-color: var(--pkt-color-text-action-disabled);
|
|
76
78
|
}
|
|
77
79
|
.pkt-inputwrapper--inline {
|
|
78
80
|
display: inline-block;
|
|
@@ -100,44 +102,47 @@
|
|
|
100
102
|
.pkt-inputwrapper--error .pkt-input,
|
|
101
103
|
.pkt-inputwrapper--error .pkt-input-prefix,
|
|
102
104
|
.pkt-inputwrapper--error .pkt-input-suffix,
|
|
103
|
-
.pkt-inputwrapper--error .pkt-input-icon
|
|
105
|
+
.pkt-inputwrapper--error .pkt-input-icon {
|
|
106
|
+
border-color: var(--pkt-color-brand-red-1000);
|
|
107
|
+
}
|
|
104
108
|
.pkt-inputwrapper--error .pkt-input:hover,
|
|
105
109
|
.pkt-inputwrapper--error .pkt-input__container:hover,
|
|
106
110
|
.pkt-inputwrapper--error .pkt-input__container:hover .pkt-input,
|
|
107
111
|
.pkt-inputwrapper--error .pkt-input__container:hover .pkt-input-prefix,
|
|
108
112
|
.pkt-inputwrapper--error .pkt-input__container:hover .pkt-input-suffix,
|
|
109
|
-
.pkt-inputwrapper--error .pkt-input__container:hover .pkt-input-icon
|
|
110
|
-
|
|
113
|
+
.pkt-inputwrapper--error .pkt-input__container:hover .pkt-input-icon {
|
|
114
|
+
border-color: var(--pkt-color-brand-red-1000);
|
|
115
|
+
}
|
|
116
|
+
.pkt-inputwrapper--error .pkt-input:focus-within,
|
|
111
117
|
.pkt-inputwrapper--error .pkt-input__container:focus-within .pkt-input,
|
|
112
118
|
.pkt-inputwrapper--error .pkt-input__container:focus-within .pkt-input-prefix,
|
|
113
119
|
.pkt-inputwrapper--error .pkt-input__container:focus-within .pkt-input-suffix,
|
|
114
120
|
.pkt-inputwrapper--error .pkt-input__container:focus-within .pkt-input-icon {
|
|
115
|
-
border-color: var(--color-red);
|
|
116
|
-
--focus-outline: var(--color-red);
|
|
121
|
+
border-color: var(--pkt-color-brand-red-1000);
|
|
117
122
|
}
|
|
118
123
|
.pkt-inputwrapper--disabled {
|
|
119
|
-
color: var(--color-disabled);
|
|
124
|
+
color: var(--pkt-color-text-action-disabled);
|
|
120
125
|
cursor: inherit;
|
|
121
126
|
}
|
|
122
127
|
.pkt-inputwrapper--disabled .pkt-input,
|
|
123
128
|
.pkt-inputwrapper--disabled .pkt-input-prefix,
|
|
124
129
|
.pkt-inputwrapper--disabled .pkt-input-suffix,
|
|
125
130
|
.pkt-inputwrapper--disabled .pkt-input-icon {
|
|
126
|
-
border-color: var(--color-disabled);
|
|
127
|
-
background-color: var(--color-
|
|
131
|
+
border-color: var(--pkt-color-border-states-disabled);
|
|
132
|
+
background-color: var(--pkt-color-surface-default-gray);
|
|
128
133
|
}
|
|
129
134
|
.pkt-inputwrapper--disabled .pkt-input__container:hover .pkt-input,
|
|
130
135
|
.pkt-inputwrapper--disabled .pkt-input__container:hover .pkt-input-prefix,
|
|
131
136
|
.pkt-inputwrapper--disabled .pkt-input__container:hover .pkt-input-suffix,
|
|
132
137
|
.pkt-inputwrapper--disabled .pkt-input__container:hover .pkt-input-icon {
|
|
133
|
-
border-color: var(--color-disabled);
|
|
138
|
+
border-color: var(--pkt-color-border-states-disabled);
|
|
134
139
|
}
|
|
135
140
|
.pkt-inputwrapper--disabled .pkt-input:hover {
|
|
136
|
-
border-color: var(--color-disabled);
|
|
141
|
+
border-color: var(--pkt-color-border-states-disabled);
|
|
137
142
|
box-shadow: none;
|
|
138
143
|
}
|
|
139
144
|
.pkt-inputwrapper--disabled .pkt-input:focus {
|
|
140
|
-
border-color: var(--color-disabled);
|
|
145
|
+
border-color: var(--pkt-color-border-states-disabled);
|
|
141
146
|
box-shadow: none;
|
|
142
147
|
outline: none;
|
|
143
148
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.pkt-inputwrapper__label{font-size:1.125rem;font-weight:500;letter-spacing:-0.2px;line-height:1.75rem;display:flex;flex-direction:column;align-items:flex-start;gap:.5rem}.pkt-inputwrapper__label>h2{font-size:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;display:inline;margin-bottom:0}.pkt-inputwrapper__helptext{width:min(100%,31rem);font-size:.875rem;font-weight:300;letter-spacing:-0.2px;line-height:1.375rem}.pkt-inputwrapper__helptext>*:first-child{margin-top:0}.pkt-inputwrapper__helptext>*:last-child{margin-bottom:0}.pkt-inputwrapper__helptext-expandable{display:inline-flex;text-align:left;align-items:center}.pkt-inputwrapper__helptext-expandable-heading{font-size:1.125rem;font-weight:500;letter-spacing:-0.2px;line-height:1.75rem;margin:0}.pkt-inputwrapper__helptext-expandable-open{display:block;border-left:2px solid var(--color-
|
|
1
|
+
.pkt-inputwrapper__label{font-size:1.125rem;font-weight:500;letter-spacing:-0.2px;line-height:1.75rem;display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;color:var(--pkt-color-text-body-default)}.pkt-inputwrapper__label>h2{font-size:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;display:inline;margin-bottom:0}.pkt-inputwrapper__helptext{width:min(100%,31rem);font-size:.875rem;font-weight:300;letter-spacing:-0.2px;line-height:1.375rem;color:var(--pkt-color-text-body-default)}.pkt-inputwrapper__helptext>*:first-child{margin-top:0}.pkt-inputwrapper__helptext>*:last-child{margin-bottom:0}.pkt-inputwrapper__helptext-expandable{display:inline-flex;text-align:left;align-items:center}.pkt-inputwrapper__helptext-expandable-heading{font-size:1.125rem;font-weight:500;letter-spacing:-0.2px;line-height:1.75rem;margin:0}.pkt-inputwrapper__helptext-expandable-open{display:block;border-left:2px solid var(--pkt-color-text-body-dark);padding:.5rem 1rem;margin-bottom:.25rem}.pkt-inputwrapper__helptext-expandable-closed{display:none}.pkt-inputwrapper__fieldset{display:flex;flex-direction:column;align-items:flex-start;gap:1rem;border:none;padding:0;margin:0}.pkt-inputwrapper__legend{margin-bottom:.5rem}.pkt-inputwrapper--disabled{color:var(--pkt-color-text-action-disabled);cursor:inherit}.pkt-inputwrapper--disabled .pkt-tag{background-color:var(--pkt-color-surface-default-gray)}.pkt-inputwrapper--disabled .pkt-alert{background-color:var(--pkt-color-surface-default-gray);border-color:var(--pkt-color-text-action-disabled)}.pkt-inputwrapper--inline{display:inline-block;vertical-align:middle;margin-right:8px}.pkt-inputwrapper .pkt-alert{width:min(100%,31rem);margin:0 0 .5rem 0}.pkt-inputwrapper .pkt-alert--error{margin:.5rem 0 .5rem 0}.pkt-inputwrapper .pkt-tag{margin-left:8px}.pkt-inputwrapper .pkt-btn{font-size:.875rem;font-weight:300;letter-spacing:-0.2px;line-height:1.375rem;padding:0;height:auto}.pkt-inputwrapper--error .pkt-input,.pkt-inputwrapper--error .pkt-input-prefix,.pkt-inputwrapper--error .pkt-input-suffix,.pkt-inputwrapper--error .pkt-input-icon{border-color:var(--pkt-color-brand-red-1000)}.pkt-inputwrapper--error .pkt-input:hover,.pkt-inputwrapper--error .pkt-input__container:hover,.pkt-inputwrapper--error .pkt-input__container:hover .pkt-input,.pkt-inputwrapper--error .pkt-input__container:hover .pkt-input-prefix,.pkt-inputwrapper--error .pkt-input__container:hover .pkt-input-suffix,.pkt-inputwrapper--error .pkt-input__container:hover .pkt-input-icon{border-color:var(--pkt-color-brand-red-1000)}.pkt-inputwrapper--error .pkt-input:focus-within,.pkt-inputwrapper--error .pkt-input__container:focus-within .pkt-input,.pkt-inputwrapper--error .pkt-input__container:focus-within .pkt-input-prefix,.pkt-inputwrapper--error .pkt-input__container:focus-within .pkt-input-suffix,.pkt-inputwrapper--error .pkt-input__container:focus-within .pkt-input-icon{border-color:var(--pkt-color-brand-red-1000)}.pkt-inputwrapper--disabled{color:var(--pkt-color-text-action-disabled);cursor:inherit}.pkt-inputwrapper--disabled .pkt-input,.pkt-inputwrapper--disabled .pkt-input-prefix,.pkt-inputwrapper--disabled .pkt-input-suffix,.pkt-inputwrapper--disabled .pkt-input-icon{border-color:var(--pkt-color-border-states-disabled);background-color:var(--pkt-color-surface-default-gray)}.pkt-inputwrapper--disabled .pkt-input__container:hover .pkt-input,.pkt-inputwrapper--disabled .pkt-input__container:hover .pkt-input-prefix,.pkt-inputwrapper--disabled .pkt-input__container:hover .pkt-input-suffix,.pkt-inputwrapper--disabled .pkt-input__container:hover .pkt-input-icon{border-color:var(--pkt-color-border-states-disabled)}.pkt-inputwrapper--disabled .pkt-input:hover{border-color:var(--pkt-color-border-states-disabled);box-shadow:none}.pkt-inputwrapper--disabled .pkt-input:focus{border-color:var(--pkt-color-border-states-disabled);box-shadow:none;outline:none}.pkt-inputwrapper--disabled .pkt-input__container:active .pkt-input{border-right:none;box-shadow:none;outline:none}[data-mode=dark] .pkt-inputwrapper{color:#fff}
|
|
@@ -62,27 +62,36 @@
|
|
|
62
62
|
margin-bottom: 0;
|
|
63
63
|
}
|
|
64
64
|
.pkt-linkcard--beige {
|
|
65
|
-
background-color: var(--color-
|
|
65
|
+
background-color: var(--pkt-color-surface-default-light-beige);
|
|
66
|
+
color: var(--pkt-color-text-body-dark) !important;
|
|
67
|
+
}
|
|
68
|
+
.pkt-linkcard--beige:hover, .pkt-linkcard--beige:focus, .pkt-linkcard--beige:focus-visible, .pkt-linkcard--beige:active {
|
|
69
|
+
color: var(--pkt-color-brand-warm-blue-1000) !important;
|
|
66
70
|
}
|
|
67
71
|
.pkt-linkcard--blue {
|
|
68
|
-
background-color: var(--color-blue
|
|
72
|
+
background-color: var(--pkt-color-surface-subtle-pale-blue);
|
|
73
|
+
color: var(--pkt-color-text-body-dark) !important;
|
|
74
|
+
}
|
|
75
|
+
.pkt-linkcard--blue:hover, .pkt-linkcard--blue:focus, .pkt-linkcard--blue:focus-visible, .pkt-linkcard--blue:active {
|
|
76
|
+
color: var(--pkt-color-brand-warm-blue-1000) !important;
|
|
69
77
|
}
|
|
70
78
|
.pkt-linkcard--grey-outline {
|
|
71
|
-
border: 4px solid var(--color-
|
|
79
|
+
border: 4px solid var(--pkt-color-border-subtle);
|
|
72
80
|
}
|
|
73
81
|
.pkt-linkcard--beige-outline {
|
|
74
|
-
border: 4px solid var(--color-
|
|
82
|
+
border: 4px solid var(--pkt-color-border-light-beige);
|
|
75
83
|
}
|
|
76
84
|
|
|
77
|
-
[data-mode=dark] .pkt-linkcard--
|
|
78
|
-
|
|
85
|
+
[data-mode=dark] .pkt-linkcard .pkt-link--external::after {
|
|
86
|
+
filter: brightness(0) saturate(100%) invert(99%) sepia(0%) saturate(2190%) hue-rotate(285deg) brightness(109%) contrast(100%);
|
|
79
87
|
}
|
|
80
|
-
[data-mode=dark] .pkt-linkcard
|
|
81
|
-
|
|
88
|
+
[data-mode=dark] .pkt-linkcard:hover .pkt-link--external::after {
|
|
89
|
+
filter: brightness(0) saturate(100%) invert(93%) sepia(91%) saturate(6664%) hue-rotate(169deg) brightness(103%) contrast(107%);
|
|
82
90
|
}
|
|
83
|
-
|
|
84
|
-
|
|
91
|
+
|
|
92
|
+
[data-mode=dark] .pkt-linkcard--beige .pkt-link--external::after, .pkt-linkcard--blue .pkt-link--external::after {
|
|
93
|
+
filter: brightness(0) saturate(100%) invert(14%) sepia(64%) saturate(913%) hue-rotate(210deg) brightness(91%) contrast(95%) !important;
|
|
85
94
|
}
|
|
86
|
-
[data-mode=dark] .pkt-linkcard--blue:
|
|
87
|
-
|
|
95
|
+
[data-mode=dark] .pkt-linkcard--beige .pkt-link--external:hover::after, .pkt-linkcard--blue .pkt-link--external:hover::after {
|
|
96
|
+
filter: brightness(0) saturate(100%) invert(14%) sepia(64%) saturate(913%) hue-rotate(210deg) brightness(91%) contrast(95%) !important;
|
|
88
97
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.pkt-linkcard{display:flex;align-items:flex-start;padding:1rem;text-decoration:none;width:100%;height:100%}@media screen and (min-width: 80rem){.pkt-linkcard{padding:1.5rem}}.pkt-linkcard:hover{text-decoration:none}.pkt-linkcard:hover .pkt-linkcard__title{text-decoration:underline}.pkt-linkcard:hover .pkt-link--external::after{filter:brightness(0) saturate(100%) invert(16%) sepia(99%) saturate(2420%) hue-rotate(222deg) brightness(93%) contrast(90%)}.pkt-linkcard__title{font-size:1.25rem;font-weight:500;letter-spacing:-0.2px;line-height:2rem;margin-bottom:.5rem}.pkt-linkcard__title>p{margin:0}@media screen and (min-width: 35.938rem){.pkt-linkcard__title{font-size:1.5rem;font-weight:500;letter-spacing:-0.2px;line-height:2.25rem}}.pkt-linkcard__title.pkt-link--external::after{height:1.5rem;width:1.5rem;background-size:1.5rem 1.5rem;margin-left:.5rem}.pkt-linkcard.pkt-link .pkt-icon.pkt-link__icon{margin-top:.188rem}@media screen and (min-width: 35.938rem){.pkt-linkcard.pkt-link .pkt-icon.pkt-link__icon{margin-top:.375rem}}.pkt-linkcard__text p:first-of-type{margin-top:0}.pkt-linkcard__text p:last-of-type{margin-bottom:0}.pkt-linkcard--beige{background-color:var(--color-
|
|
1
|
+
.pkt-linkcard{display:flex;align-items:flex-start;padding:1rem;text-decoration:none;width:100%;height:100%}@media screen and (min-width: 80rem){.pkt-linkcard{padding:1.5rem}}.pkt-linkcard:hover{text-decoration:none}.pkt-linkcard:hover .pkt-linkcard__title{text-decoration:underline}.pkt-linkcard:hover .pkt-link--external::after{filter:brightness(0) saturate(100%) invert(16%) sepia(99%) saturate(2420%) hue-rotate(222deg) brightness(93%) contrast(90%)}.pkt-linkcard__title{font-size:1.25rem;font-weight:500;letter-spacing:-0.2px;line-height:2rem;margin-bottom:.5rem}.pkt-linkcard__title>p{margin:0}@media screen and (min-width: 35.938rem){.pkt-linkcard__title{font-size:1.5rem;font-weight:500;letter-spacing:-0.2px;line-height:2.25rem}}.pkt-linkcard__title.pkt-link--external::after{height:1.5rem;width:1.5rem;background-size:1.5rem 1.5rem;margin-left:.5rem}.pkt-linkcard.pkt-link .pkt-icon.pkt-link__icon{margin-top:.188rem}@media screen and (min-width: 35.938rem){.pkt-linkcard.pkt-link .pkt-icon.pkt-link__icon{margin-top:.375rem}}.pkt-linkcard__text p:first-of-type{margin-top:0}.pkt-linkcard__text p:last-of-type{margin-bottom:0}.pkt-linkcard--beige{background-color:var(--pkt-color-surface-default-light-beige);color:var(--pkt-color-text-body-dark) !important}.pkt-linkcard--beige:hover,.pkt-linkcard--beige:focus,.pkt-linkcard--beige:focus-visible,.pkt-linkcard--beige:active{color:var(--pkt-color-brand-warm-blue-1000) !important}.pkt-linkcard--blue{background-color:var(--pkt-color-surface-subtle-pale-blue);color:var(--pkt-color-text-body-dark) !important}.pkt-linkcard--blue:hover,.pkt-linkcard--blue:focus,.pkt-linkcard--blue:focus-visible,.pkt-linkcard--blue:active{color:var(--pkt-color-brand-warm-blue-1000) !important}.pkt-linkcard--grey-outline{border:4px solid var(--pkt-color-border-subtle)}.pkt-linkcard--beige-outline{border:4px solid var(--pkt-color-border-light-beige)}[data-mode=dark] .pkt-linkcard .pkt-link--external::after{filter:brightness(0) saturate(100%) invert(99%) sepia(0%) saturate(2190%) hue-rotate(285deg) brightness(109%) contrast(100%)}[data-mode=dark] .pkt-linkcard:hover .pkt-link--external::after{filter:brightness(0) saturate(100%) invert(93%) sepia(91%) saturate(6664%) hue-rotate(169deg) brightness(103%) contrast(107%)}[data-mode=dark] .pkt-linkcard--beige .pkt-link--external::after,.pkt-linkcard--blue .pkt-link--external::after{filter:brightness(0) saturate(100%) invert(14%) sepia(64%) saturate(913%) hue-rotate(210deg) brightness(91%) contrast(95%) !important}[data-mode=dark] .pkt-linkcard--beige .pkt-link--external:hover::after,.pkt-linkcard--blue .pkt-link--external:hover::after{filter:brightness(0) saturate(100%) invert(14%) sepia(64%) saturate(913%) hue-rotate(210deg) brightness(91%) contrast(95%) !important}
|
|
@@ -2,33 +2,33 @@
|
|
|
2
2
|
* Messagebox component
|
|
3
3
|
*/
|
|
4
4
|
.pkt-messagebox {
|
|
5
|
-
--pkt-messagebox-bc: var(--color-beige
|
|
6
|
-
--pkt-messagebox-bg: var(--color-
|
|
7
|
-
--pkt-messagebox-txt: var(--color-
|
|
5
|
+
--pkt-color-messagebox-bc: var(--pkt-color-border-beige);
|
|
6
|
+
--pkt-color-messagebox-bg: var(--pkt-color-surface-default-light-beige);
|
|
7
|
+
--pkt-color-messagebox-txt: var(--pkt-color-text-body-dark);
|
|
8
8
|
}
|
|
9
9
|
|
|
10
10
|
.pkt-messagebox--red {
|
|
11
|
-
--pkt-messagebox-bc: var(--color-red);
|
|
12
|
-
--pkt-messagebox-bg: var(--color-red
|
|
11
|
+
--pkt-color-messagebox-bc: var(--pkt-color-border-red);
|
|
12
|
+
--pkt-color-messagebox-bg: var(--pkt-color-surface-default-faded-red);
|
|
13
13
|
}
|
|
14
14
|
|
|
15
15
|
.pkt-messagebox--green {
|
|
16
|
-
--pkt-messagebox-bc: var(--color-green);
|
|
17
|
-
--pkt-messagebox-bg: var(--color-green
|
|
16
|
+
--pkt-color-messagebox-bc: var(--pkt-color-border-green);
|
|
17
|
+
--pkt-color-messagebox-bg: var(--pkt-color-surface-default-light-green);
|
|
18
18
|
}
|
|
19
19
|
|
|
20
20
|
.pkt-messagebox--blue {
|
|
21
|
-
--pkt-messagebox-bc: var(--color-blue);
|
|
22
|
-
--pkt-messagebox-bg: var(--color-blue
|
|
21
|
+
--pkt-color-messagebox-bc: var(--pkt-color-border-blue);
|
|
22
|
+
--pkt-color-messagebox-bg: var(--pkt-color-surface-default-light-blue);
|
|
23
23
|
}
|
|
24
24
|
|
|
25
25
|
.pkt-messagebox {
|
|
26
26
|
padding: 1.5rem 1.5rem 1.5rem 1.25rem;
|
|
27
27
|
display: block;
|
|
28
28
|
position: relative;
|
|
29
|
-
border-left: 0.25rem solid var(--pkt-messagebox-bc);
|
|
30
|
-
background-color: var(--pkt-messagebox-bg);
|
|
31
|
-
color: var(--pkt-messagebox-txt);
|
|
29
|
+
border-left: 0.25rem solid var(--pkt-color-messagebox-bc);
|
|
30
|
+
background-color: var(--pkt-color-messagebox-bg);
|
|
31
|
+
color: var(--pkt-color-messagebox-txt);
|
|
32
32
|
}
|
|
33
33
|
.pkt-messagebox__title {
|
|
34
34
|
font-size: 1.5rem;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.pkt-messagebox{--pkt-messagebox-bc: var(--color-beige
|
|
1
|
+
.pkt-messagebox{--pkt-color-messagebox-bc: var(--pkt-color-border-beige);--pkt-color-messagebox-bg: var(--pkt-color-surface-default-light-beige);--pkt-color-messagebox-txt: var(--pkt-color-text-body-dark)}.pkt-messagebox--red{--pkt-color-messagebox-bc: var(--pkt-color-border-red);--pkt-color-messagebox-bg: var(--pkt-color-surface-default-faded-red)}.pkt-messagebox--green{--pkt-color-messagebox-bc: var(--pkt-color-border-green);--pkt-color-messagebox-bg: var(--pkt-color-surface-default-light-green)}.pkt-messagebox--blue{--pkt-color-messagebox-bc: var(--pkt-color-border-blue);--pkt-color-messagebox-bg: var(--pkt-color-surface-default-light-blue)}.pkt-messagebox{padding:1.5rem 1.5rem 1.5rem 1.25rem;display:block;position:relative;border-left:.25rem solid var(--pkt-color-messagebox-bc);background-color:var(--pkt-color-messagebox-bg);color:var(--pkt-color-messagebox-txt)}.pkt-messagebox__title{font-size:1.5rem;font-weight:500;letter-spacing:-0.2px;line-height:2.25rem;margin:0 0 1.5rem 0}.pkt-messagebox__text{font-size:1.125rem;font-weight:300;letter-spacing:-0.2px;line-height:1.75rem;margin:0}.pkt-messagebox__text p{margin-bottom:1rem}.pkt-messagebox__text p:last-of-type{margin-bottom:0}
|