@oslokommune/punkt-css 12.12.2 → 12.12.4
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 +43 -0
- package/README.md +1 -1
- package/dist/css/components/alert.css +13 -13
- package/dist/css/components/alert.min.css +1 -1
- package/dist/css/components/backlink.css +4 -4
- package/dist/css/components/backlink.min.css +1 -1
- package/dist/css/components/breadcrumbs.css +2 -2
- package/dist/css/components/breadcrumbs.min.css +1 -1
- package/dist/css/components/calendar.css +2 -2
- package/dist/css/components/calendar.min.css +1 -1
- package/dist/css/components/footer.css +12 -12
- package/dist/css/components/footer.min.css +1 -1
- package/dist/css/components/header.css +12 -12
- package/dist/css/components/header.min.css +1 -1
- package/dist/css/components/inputwrapper.css +14 -14
- package/dist/css/components/inputwrapper.min.css +1 -1
- package/dist/css/components/linkcard.css +4 -4
- package/dist/css/components/linkcard.min.css +1 -1
- package/dist/css/components/loader.css +6 -6
- package/dist/css/components/loader.min.css +1 -1
- package/dist/css/components/messagebox.css +10 -10
- package/dist/css/components/messagebox.min.css +1 -1
- package/dist/css/components/searchinput.css +4 -4
- package/dist/css/components/searchinput.min.css +1 -1
- package/dist/css/components/tabs.css +5 -5
- package/dist/css/components/tabs.min.css +1 -1
- package/dist/css/components/tag.css +11 -11
- package/dist/css/components/tag.min.css +1 -1
- package/dist/css/components/textinput.css +18 -12
- package/dist/css/components/textinput.min.css +1 -1
- package/dist/css/pkt-base.css +175 -175
- package/dist/css/pkt-base.min.css +1 -1
- package/dist/css/pkt-components.css +117 -111
- package/dist/css/pkt-components.min.css +1 -1
- package/dist/css/pkt-elements.css +65 -65
- package/dist/css/pkt-elements.min.css +1 -1
- package/dist/css/pkt.css +339 -339
- package/dist/css/pkt.min.css +1 -1
- package/dist/scss/abstracts/functions/_index.scss +12 -18
- package/dist/scss/abstracts/mixins/_typography.scss +9 -12
- package/dist/scss/abstracts/variables/_colors.scss +84 -81
- package/dist/scss/components/_alert.scss +6 -4
- package/dist/scss/components/_backlink.scss +2 -2
- package/dist/scss/components/_footer.scss +3 -3
- package/dist/scss/components/_inputwrapper.scss +4 -4
- package/dist/scss/components/_messagebox.scss +2 -2
- package/dist/scss/components/_stepper.scss +5 -5
- package/dist/scss/components/_tabs.scss +2 -1
- package/dist/scss/components/_tag.scss +245 -250
- package/dist/scss/elements/_button.scss +9 -7
- package/dist/scss/elements/_checkbox-radio.scss +24 -41
- package/dist/scss/elements/_input.scss +21 -12
- package/dist/scss/elements/_section.scss +10 -12
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
.pkt-searchinput{position:relative;
|
|
1
|
+
.pkt-searchinput{position:relative;letter-spacing:-0.2px;font-weight:300;font-size:1.125rem;line-height:1.75rem}.pkt-searchinput__field{width:min(100%,31rem);display:flex}.pkt-searchinput--fullwidth .pkt-searchinput__field{width:100%}.pkt-searchinput--global .pkt-input:not(:disabled){border-color:var(--pkt-color-border-yellow)}.pkt-searchinput--global .pkt-input:not(:disabled):hover,.pkt-searchinput--global .pkt-input:not(:disabled):active,.pkt-searchinput--global .pkt-input:not(:disabled):focus{border-color:var(--pkt-color-input-border-active)}.pkt-searchinput--global .pkt-searchinput__button{border-radius:50%}.pkt-searchinput--local-with-button .pkt-searchinput__field{gap:.5rem}.pkt-searchinput--local .pkt-input{padding:.5rem 0 .5rem 1rem}.pkt-searchinput--local .pkt-searchinput__button:disabled{border-color:var(--pkt-color-input-border-disabled)}.pkt-searchinput--local .pkt-searchinput__button svg{margin-left:0}.pkt-searchinput__suggestions{position:absolute;z-index:2;padding:0;margin:2px 0 0;width:min(100%,31rem);list-style:none;background-color:var(--pkt-color-background-card);box-shadow:0px 4px 6px -1px rgba(0,0,0,.1),0px 2px 4px -2px rgba(0,0,0,.1)}.pkt-searchinput--global .pkt-searchinput__suggestions{width:min(100% - 3rem,28rem)}.pkt-searchinput--local-with-button .pkt-searchinput__suggestions{width:min(100% - 3.5rem,27.5rem)}.pkt-searchinput--fullwidth .pkt-searchinput__suggestions{width:100%}.pkt-searchinput__suggestion{display:block;padding:1rem;text-decoration:none;background-color:rgba(0,0,0,0);color:var(--pkt-color-text-action-normal);border:none;font:inherit;outline:inherit;text-align:inherit}.pkt-searchinput__suggestion:hover,.pkt-searchinput__suggestion:focus,.pkt-searchinput__suggestion:active{text-decoration:none;background-color:var(--pkt-color-background-subtle);color:var(--pkt-color-text-action-active)}.pkt-searchinput__suggestion:hover .pkt-searchinput__suggestion-title,.pkt-searchinput__suggestion:focus .pkt-searchinput__suggestion-title,.pkt-searchinput__suggestion:active .pkt-searchinput__suggestion-title{text-decoration:underline}.pkt-searchinput__suggestion:hover>*,.pkt-searchinput__suggestion:focus>*,.pkt-searchinput__suggestion:active>*{color:inherit}.pkt-searchinput__suggestion--has-hover{cursor:pointer}.pkt-searchinput__suggestion-title{letter-spacing:-0.2px;font-weight:500;font-size:1.125rem;line-height:1.75rem}.pkt-searchinput__suggestion-text{margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;hyphens:auto}
|
|
@@ -30,11 +30,11 @@
|
|
|
30
30
|
padding: 0.75rem 1rem;
|
|
31
31
|
color: var(--pkt-color-text-action-disabled);
|
|
32
32
|
border-bottom: 0.25rem solid transparent;
|
|
33
|
-
|
|
34
|
-
font-weight: 400;
|
|
33
|
+
white-space: nowrap;
|
|
35
34
|
letter-spacing: -0.2px;
|
|
35
|
+
font-weight: 400;
|
|
36
|
+
font-size: 1rem;
|
|
36
37
|
line-height: 1.5rem;
|
|
37
|
-
white-space: nowrap;
|
|
38
38
|
}
|
|
39
39
|
.pkt-tabs__link .pkt-icon,
|
|
40
40
|
.pkt-tabs__link pkt-icon, .pkt-tabs__button .pkt-icon,
|
|
@@ -63,9 +63,9 @@
|
|
|
63
63
|
.pkt-tabs__link.active, .pkt-tabs__button.active {
|
|
64
64
|
color: var(--pkt-color-text-action-normal);
|
|
65
65
|
border-bottom: 0.25rem solid var(--pkt-color-border-blue);
|
|
66
|
-
font-size: 1rem;
|
|
67
|
-
font-weight: 500;
|
|
68
66
|
letter-spacing: -0.2px;
|
|
67
|
+
font-weight: 500;
|
|
68
|
+
font-size: 1rem;
|
|
69
69
|
line-height: 1.5rem;
|
|
70
70
|
}
|
|
71
71
|
.pkt-tabs:after {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.pkt-tabs{--pkt-tabs-bg: var(--pkt-color-background-default);background-color:var(--pkt-tabs-bg);position:relative;border-bottom:1px solid var(--pkt-color-border-gray)}.pkt-tabs__list{position:relative;width:auto;width:100%;overflow-x:auto;scrollbar-width:thin;padding:.25rem 4rem 0 .25rem;margin:0;display:flex;flex-wrap:nowrap;align-items:flex-start}.pkt-tabs__button{border:0;padding:0;background:none;border-radius:0}.pkt-tabs__link,.pkt-tabs__button{cursor:pointer;display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;color:var(--pkt-color-text-action-disabled);border-bottom:.25rem solid rgba(0,0,0,0);
|
|
1
|
+
.pkt-tabs{--pkt-tabs-bg: var(--pkt-color-background-default);background-color:var(--pkt-tabs-bg);position:relative;border-bottom:1px solid var(--pkt-color-border-gray)}.pkt-tabs__list{position:relative;width:auto;width:100%;overflow-x:auto;scrollbar-width:thin;padding:.25rem 4rem 0 .25rem;margin:0;display:flex;flex-wrap:nowrap;align-items:flex-start}.pkt-tabs__button{border:0;padding:0;background:none;border-radius:0}.pkt-tabs__link,.pkt-tabs__button{cursor:pointer;display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;color:var(--pkt-color-text-action-disabled);border-bottom:.25rem solid rgba(0,0,0,0);white-space:nowrap;letter-spacing:-0.2px;font-weight:400;font-size:1rem;line-height:1.5rem}.pkt-tabs__link .pkt-icon,.pkt-tabs__link pkt-icon,.pkt-tabs__button .pkt-icon,.pkt-tabs__button pkt-icon{--fg-color: currentColor}.pkt-tabs__link,.pkt-tabs__link:hover,.pkt-tabs__link:active,.pkt-tabs__button,.pkt-tabs__button:hover,.pkt-tabs__button:active{text-decoration:none}.pkt-tabs__link:focus:not(:active),.pkt-tabs__link:focus-visible:not(:active),.pkt-tabs__button:focus:not(:active),.pkt-tabs__button:focus-visible:not(:active){border:0;box-shadow:none;background-color:var(--pkt-color-surface-default-gray);outline:.25rem solid var(--pkt-color-border-states-focus);outline-offset:0}.pkt-tabs__link.active:focus,.pkt-tabs__link.active:focus-visible,.pkt-tabs__button.active:focus,.pkt-tabs__button.active:focus-visible{box-shadow:none;border-bottom:.25rem solid var(--pkt-color-border-blue)}.pkt-tabs__link:hover,.pkt-tabs__link:focus,.pkt-tabs__link:focus-visible,.pkt-tabs__link:focus-visible:is(:active),.pkt-tabs__link:focus:is(:active),.pkt-tabs__link:active,.pkt-tabs__button:hover,.pkt-tabs__button:focus,.pkt-tabs__button:focus-visible,.pkt-tabs__button:focus-visible:is(:active),.pkt-tabs__button:focus:is(:active),.pkt-tabs__button:active{outline:0;color:var(--pkt-color-text-action-active);border-bottom:.25rem solid var(--pkt-color-border-states-hover)}.pkt-tabs__link.active,.pkt-tabs__button.active{color:var(--pkt-color-text-action-normal);border-bottom:.25rem solid var(--pkt-color-border-blue);letter-spacing:-0.2px;font-weight:500;font-size:1rem;line-height:1.5rem}.pkt-tabs:after{content:"";display:block;position:absolute;z-index:3;background:linear-gradient(90deg, transparent 0%, var(--pkt-tabs-bg) 100%);top:0;right:0;bottom:0;width:5rem;pointer-events:none}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/*
|
|
1
|
+
/*
|
|
2
2
|
* Tag element
|
|
3
3
|
*/
|
|
4
4
|
.pkt-tag {
|
|
@@ -23,9 +23,9 @@
|
|
|
23
23
|
height: 1.875rem;
|
|
24
24
|
column-gap: 0;
|
|
25
25
|
color: var(--pkt-color-tag-text-normal);
|
|
26
|
-
font-size: 0.875rem;
|
|
27
|
-
font-weight: 500;
|
|
28
26
|
letter-spacing: -0.2px;
|
|
27
|
+
font-weight: 500;
|
|
28
|
+
font-size: 0.875rem;
|
|
29
29
|
line-height: 1.375rem;
|
|
30
30
|
}
|
|
31
31
|
.pkt-tag.pkt-btn:hover, .pkt-tag.pkt-tag--hover {
|
|
@@ -216,22 +216,22 @@
|
|
|
216
216
|
height: 1.875rem;
|
|
217
217
|
}
|
|
218
218
|
.pkt-tag--large {
|
|
219
|
-
font-size: 1.125rem;
|
|
220
|
-
font-weight: 500;
|
|
221
|
-
letter-spacing: -0.2px;
|
|
222
|
-
line-height: 1.75rem;
|
|
223
219
|
padding: 0.25rem 0.5rem;
|
|
224
220
|
height: 2.25rem;
|
|
221
|
+
letter-spacing: -0.2px;
|
|
222
|
+
font-weight: 500;
|
|
223
|
+
font-size: 1.125rem;
|
|
224
|
+
line-height: 1.75rem;
|
|
225
225
|
}
|
|
226
226
|
.pkt-tag--normal-text {
|
|
227
|
-
font-size: 0.875rem;
|
|
228
|
-
font-weight: 500;
|
|
229
227
|
letter-spacing: -0.2px;
|
|
228
|
+
font-weight: 500;
|
|
229
|
+
font-size: 0.875rem;
|
|
230
230
|
line-height: 1.375rem;
|
|
231
231
|
}
|
|
232
232
|
.pkt-tag--thin-text {
|
|
233
|
-
font-size: 0.875rem;
|
|
234
|
-
font-weight: 300;
|
|
235
233
|
letter-spacing: -0.2px;
|
|
234
|
+
font-weight: 300;
|
|
235
|
+
font-size: 0.875rem;
|
|
236
236
|
line-height: 1.375rem;
|
|
237
237
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.pkt-tag{--pkt-color-tag-text-active: var(--pkt-color-brand-warm-blue-1000);--pkt-color-tag-text-focus: var(--pkt-color-brand-warm-blue-1000);--pkt-color-tag-text-hover: var(--pkt-color-brand-warm-blue-1000);--pkt-color-tag-text-normal: var(--pkt-color-brand-dark-blue-1000)}[data-mode=dark] .pkt-tag{--pkt-color-tag-text-active: var(--pkt-color-brand-dark-blue-1000);--pkt-color-tag-text-focus: var(--pkt-color-brand-dark-blue-1000);--pkt-color-tag-text-hover: var(--pkt-color-brand-dark-blue-1000);--pkt-color-tag-text-normal: var(--pkt-color-brand-dark-blue-1000)}.pkt-tag{background:var(--pkt-color-surface-default-light-blue);padding:.25rem .5rem;display:inline-flex;align-items:center;height:1.875rem;column-gap:0;color:var(--pkt-color-tag-text-normal);
|
|
1
|
+
.pkt-tag{--pkt-color-tag-text-active: var(--pkt-color-brand-warm-blue-1000);--pkt-color-tag-text-focus: var(--pkt-color-brand-warm-blue-1000);--pkt-color-tag-text-hover: var(--pkt-color-brand-warm-blue-1000);--pkt-color-tag-text-normal: var(--pkt-color-brand-dark-blue-1000)}[data-mode=dark] .pkt-tag{--pkt-color-tag-text-active: var(--pkt-color-brand-dark-blue-1000);--pkt-color-tag-text-focus: var(--pkt-color-brand-dark-blue-1000);--pkt-color-tag-text-hover: var(--pkt-color-brand-dark-blue-1000);--pkt-color-tag-text-normal: var(--pkt-color-brand-dark-blue-1000)}.pkt-tag{background:var(--pkt-color-surface-default-light-blue);padding:.25rem .5rem;display:inline-flex;align-items:center;height:1.875rem;column-gap:0;color:var(--pkt-color-tag-text-normal);letter-spacing:-0.2px;font-weight:500;font-size:.875rem;line-height:1.375rem}.pkt-tag.pkt-btn:hover,.pkt-tag.pkt-tag--hover{background-color:var(--pkt-color-surface-strong-blue);color:var(--pkt-color-tag-text-hover);text-decoration:underline;border-color:rgba(0,0,0,0)}.pkt-tag.pkt-btn:hover>svg,.pkt-tag.pkt-tag--hover>svg{--fg-color: var(--pkt-color-tag-text-hover)}.pkt-tag.pkt-btn:focus,.pkt-tag.pkt-tag--focus{background-color:var(--pkt-color-surface-strong-blue);border-color:var(--pkt-color-text-action-active);outline:4px solid var(--pkt-color-border-states-focus);color:var(--pkt-color-tag-text-focus)}.pkt-tag.pkt-btn:focus>svg,.pkt-tag.pkt-tag--focus>svg{--fg-color: var(--pkt-color-tag-text-focus)}.pkt-tag.pkt-btn:active,.pkt-tag.pkt-tag--active,.pkt-tag.pkt-tag--active:hover{background-color:var(--pkt-color-surface-strong-blue);color:var(--pkt-color-tag-text-active)}.pkt-tag.pkt-btn:active>svg,.pkt-tag.pkt-tag--active>svg,.pkt-tag.pkt-tag--active:hover>svg{--fg-color: var(--pkt-color-tag-text-active)}.pkt-tag__icon{width:16px;height:16px;margin-right:.5rem}.pkt-tag__close-btn{width:16px;height:16px;margin-left:.5rem}.pkt-tag--green{background:var(--pkt-color-surface-strong-light-green)}.pkt-tag--green.pkt-btn:hover,.pkt-tag--green.pkt-tag--hover{background-color:var(--pkt-color-surface-strong-green);color:var(--pkt-color-tag-text-hover)}.pkt-tag--green.pkt-btn:hover>svg,.pkt-tag--green.pkt-tag--hover>svg{--fg-color: var(--pkt-color-tag-text-hover)}.pkt-tag--green.pkt-btn:focus,.pkt-tag--green.pkt-tag--focus{background-color:var(--pkt-color-surface-strong-green);color:var(--pkt-color-tag-text-focus)}.pkt-tag--green.pkt-btn:focus>svg,.pkt-tag--green.pkt-tag--focus>svg{--fg-color: var(--pkt-color-tag-text-focus)}.pkt-tag--green.pkt-btn:active,.pkt-tag--green.pkt-tag--active{background-color:var(--pkt-color-surface-strong-green);color:var(--pkt-color-tag-text-active)}.pkt-tag--green.pkt-btn:active>svg,.pkt-tag--green.pkt-tag--active>svg{--fg-color: var(--pkt-color-tag-text-active)}.pkt-tag--yellow{background:var(--pkt-color-surface-default-yellow)}.pkt-tag--yellow.pkt-btn:hover,.pkt-tag--yellow.pkt-tag--hover{background-color:var(--pkt-color-surface-strong-yellow);color:var(--pkt-color-tag-text-hover)}.pkt-tag--yellow.pkt-btn:hover>svg,.pkt-tag--yellow.pkt-tag--hover>svg{--fg-color: var(--pkt-color-tag-text-hover)}.pkt-tag--yellow.pkt-btn:focus,.pkt-tag--yellow.pkt-tag--focus{background-color:var(--pkt-color-surface-strong-yellow);color:var(--pkt-color-tag-text-focus)}.pkt-tag--yellow.pkt-btn:focus>svg,.pkt-tag--yellow.pkt-tag--focus>svg{--fg-color: var(--pkt-color-tag-text-focus)}.pkt-tag--yellow.pkt-btn:active,.pkt-tag--yellow.pkt-tag--active{background-color:var(--pkt-color-surface-strong-yellow);color:var(--pkt-color-tag-text-active)}.pkt-tag--yellow.pkt-btn:active>svg,.pkt-tag--yellow.pkt-tag--active>svg{--fg-color: var(--pkt-color-tag-text-active)}.pkt-tag--red{background:var(--pkt-color-surface-default-red)}.pkt-tag--red.pkt-btn:hover,.pkt-tag--red.pkt-tag--hover{background-color:var(--pkt-color-surface-strong-red);color:var(--pkt-color-tag-text-hover)}.pkt-tag--red.pkt-btn:hover>svg,.pkt-tag--red.pkt-tag--hover>svg{--fg-color: var(--pkt-color-tag-text-hover)}.pkt-tag--red.pkt-btn:focus,.pkt-tag--red.pkt-tag--focus{background-color:var(--pkt-color-surface-strong-red);color:var(--pkt-color-tag-text-focus)}.pkt-tag--red.pkt-btn:focus>svg,.pkt-tag--red.pkt-tag--focus>svg{--fg-color: var(--pkt-color-tag-text-focus)}.pkt-tag--red.pkt-btn:active,.pkt-tag--red.pkt-tag--active{background-color:var(--pkt-color-surface-strong-red);color:var(--pkt-color-tag-text-active)}.pkt-tag--red.pkt-btn:active>svg,.pkt-tag--red.pkt-tag--active>svg{--fg-color: var(--pkt-color-tag-text-active)}.pkt-tag--beige{background:var(--pkt-color-surface-default-light-beige)}.pkt-tag--beige.pkt-btn:hover,.pkt-tag--beige.pkt-tag--hover{background-color:var(--pkt-color-surface-strong-beige);color:var(--pkt-color-tag-text-hover)}.pkt-tag--beige.pkt-btn:hover>svg,.pkt-tag--beige.pkt-tag--hover>svg{--fg-color: var(--pkt-color-tag-text-hover)}.pkt-tag--beige.pkt-btn:focus,.pkt-tag--beige.pkt-tag--focus{background-color:var(--pkt-color-surface-strong-beige);color:var(--pkt-color-tag-text-focus)}.pkt-tag--beige.pkt-btn:focus>svg,.pkt-tag--beige.pkt-tag--focus>svg{--fg-color: var(--pkt-color-tag-text-focus)}.pkt-tag--beige.pkt-btn:active,.pkt-tag--beige.pkt-tag--active{background-color:var(--pkt-color-surface-strong-beige);color:var(--pkt-color-tag-text-active)}.pkt-tag--beige.pkt-btn:active>svg,.pkt-tag--beige.pkt-tag--active>svg{--fg-color: var(--pkt-color-tag-text-active)}.pkt-tag--gray,.pkt-tag--grey{background:var(--pkt-color-surface-default-gray)}.pkt-tag--gray.pkt-btn:hover,.pkt-tag--gray.pkt-tag--hover,.pkt-tag--grey.pkt-btn:hover,.pkt-tag--grey.pkt-tag--hover{background-color:var(--pkt-color-surface-strong-gray);color:var(--pkt-color-tag-text-hover)}.pkt-tag--gray.pkt-btn:hover>svg,.pkt-tag--gray.pkt-tag--hover>svg,.pkt-tag--grey.pkt-btn:hover>svg,.pkt-tag--grey.pkt-tag--hover>svg{--fg-color: var(--pkt-color-tag-text-hover)}.pkt-tag--gray.pkt-btn:focus,.pkt-tag--gray.pkt-tag--focus,.pkt-tag--grey.pkt-btn:focus,.pkt-tag--grey.pkt-tag--focus{background-color:var(--pkt-color-surface-strong-gray);color:var(--pkt-color-tag-text-active)}.pkt-tag--gray.pkt-btn:focus>svg,.pkt-tag--gray.pkt-tag--focus>svg,.pkt-tag--grey.pkt-btn:focus>svg,.pkt-tag--grey.pkt-tag--focus>svg{--fg-color: var(--pkt-color-tag-text-active)}.pkt-tag--gray.pkt-btn:active,.pkt-tag--gray.pkt-tag--active,.pkt-tag--grey.pkt-btn:active,.pkt-tag--grey.pkt-tag--active{background-color:var(--pkt-color-surface-strong-gray);color:var(--pkt-color-tag-text-active)}.pkt-tag--gray.pkt-btn:active>svg,.pkt-tag--gray.pkt-tag--active>svg,.pkt-tag--grey.pkt-btn:active>svg,.pkt-tag--grey.pkt-tag--active>svg{--fg-color: var(--pkt-color-tag-text-active)}.pkt-tag--blue-light{background:var(--pkt-color-surface-subtle-light-blue)}.pkt-tag--blue-light.pkt-btn:hover,.pkt-tag--blue-light.pkt-tag--hover{background-color:var(--pkt-color-surface-strong-blue);color:var(--pkt-color-tag-text-hover)}.pkt-tag--blue-light.pkt-btn:hover>svg,.pkt-tag--blue-light.pkt-tag--hover>svg{--fg-color: var(--pkt-color-tag-text-hover)}.pkt-tag--blue-light.pkt-btn:focus,.pkt-tag--blue-light.pkt-tag--focus{background-color:var(--pkt-color-surface-strong-blue);color:var(--pkt-color-tag-text-focus)}.pkt-tag--blue-light.pkt-btn:focus>svg,.pkt-tag--blue-light.pkt-tag--focus>svg{--fg-color: var(--pkt-color-tag-text-focus)}.pkt-tag--blue-light.pkt-btn:active,.pkt-tag--blue-light.pkt-tag--active{background-color:var(--pkt-color-surface-strong-blue);color:var(--pkt-color-tag-text-active)}.pkt-tag--blue-light.pkt-btn:active>svg,.pkt-tag--blue-light.pkt-tag--active>svg{--fg-color: var(--pkt-color-tag-text-active)}.pkt-tag--small{padding:.25rem;height:1.375rem}.pkt-tag--medium{padding:.25rem .5rem;height:1.875rem}.pkt-tag--large{padding:.25rem .5rem;height:2.25rem;letter-spacing:-0.2px;font-weight:500;font-size:1.125rem;line-height:1.75rem}.pkt-tag--normal-text{letter-spacing:-0.2px;font-weight:500;font-size:.875rem;line-height:1.375rem}.pkt-tag--thin-text{letter-spacing:-0.2px;font-weight:300;font-size:.875rem;line-height:1.375rem}
|
|
@@ -44,10 +44,6 @@
|
|
|
44
44
|
}
|
|
45
45
|
|
|
46
46
|
.pkt-input, .pkt-textinput__input {
|
|
47
|
-
font-size: 1.125rem;
|
|
48
|
-
font-weight: 300;
|
|
49
|
-
letter-spacing: -0.2px;
|
|
50
|
-
line-height: 1.75rem;
|
|
51
47
|
display: flex;
|
|
52
48
|
align-items: center;
|
|
53
49
|
appearance: none;
|
|
@@ -57,6 +53,10 @@
|
|
|
57
53
|
color: var(--pkt-color-input-text-normal);
|
|
58
54
|
margin: 0;
|
|
59
55
|
padding: 0.5rem 1rem;
|
|
56
|
+
letter-spacing: -0.2px;
|
|
57
|
+
font-weight: 300;
|
|
58
|
+
font-size: 1.125rem;
|
|
59
|
+
line-height: 1.75rem;
|
|
60
60
|
}
|
|
61
61
|
.pkt-input:not(.pkt-input-compact), .pkt-textinput__input:not(.pkt-input-compact) {
|
|
62
62
|
min-height: 3rem;
|
|
@@ -65,9 +65,9 @@
|
|
|
65
65
|
border: 0;
|
|
66
66
|
border-bottom: 1px solid var(--pkt-color-input-border-normal);
|
|
67
67
|
padding: 0 0 0.1rem 0;
|
|
68
|
-
font-size: 1rem;
|
|
69
|
-
font-weight: 300;
|
|
70
68
|
letter-spacing: -0.2px;
|
|
69
|
+
font-weight: 300;
|
|
70
|
+
font-size: 1rem;
|
|
71
71
|
line-height: 1.5rem;
|
|
72
72
|
}
|
|
73
73
|
.pkt-input-compact.pkt-input:is(select):not([multiple]), .pkt-input-compact.pkt-textinput__input:is(select):not([multiple]) {
|
|
@@ -130,10 +130,12 @@
|
|
|
130
130
|
border: 2px solid var(--pkt-color-input-border-disabled);
|
|
131
131
|
}
|
|
132
132
|
.pkt-input-prefix, .pkt-input-suffix, .pkt-input-icon, .pkt-input-separator {
|
|
133
|
-
font-size: 1.125rem;
|
|
134
|
-
font-weight: 300;
|
|
135
133
|
letter-spacing: -0.2px;
|
|
134
|
+
font-weight: 300;
|
|
135
|
+
font-size: 1.125rem;
|
|
136
136
|
line-height: 1.75rem;
|
|
137
|
+
}
|
|
138
|
+
.pkt-input-prefix, .pkt-input-suffix, .pkt-input-icon, .pkt-input-separator {
|
|
137
139
|
display: flex;
|
|
138
140
|
align-items: center;
|
|
139
141
|
width: auto;
|
|
@@ -230,18 +232,22 @@
|
|
|
230
232
|
border-color: var(--pkt-color-input-border-active);
|
|
231
233
|
}
|
|
232
234
|
.pkt-input__counter {
|
|
233
|
-
font-size: 0.875rem;
|
|
234
|
-
font-weight: 300;
|
|
235
235
|
letter-spacing: -0.2px;
|
|
236
|
+
font-weight: 300;
|
|
237
|
+
font-size: 0.875rem;
|
|
236
238
|
line-height: 1.375rem;
|
|
239
|
+
}
|
|
240
|
+
.pkt-input__counter {
|
|
237
241
|
width: min(100%, 31rem);
|
|
238
242
|
text-align: right;
|
|
239
243
|
}
|
|
240
244
|
.pkt-input__counter--error {
|
|
241
|
-
font-size: 0.875rem;
|
|
242
|
-
font-weight: 500;
|
|
243
245
|
letter-spacing: -0.2px;
|
|
246
|
+
font-weight: 500;
|
|
247
|
+
font-size: 0.875rem;
|
|
244
248
|
line-height: 1.375rem;
|
|
249
|
+
}
|
|
250
|
+
.pkt-input__counter--error {
|
|
245
251
|
color: var(--pkt-color-input-text-error);
|
|
246
252
|
}
|
|
247
253
|
.pkt-input__range-inputs {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.pkt-input,.pkt-textinput__input,.pkt-input-prefix,.pkt-input-suffix,.pkt-input-icon,.pkt-input__container{--pkt-color-input-background-normal: var(--pkt-color-brand-neutrals-white);--pkt-color-input-border-active: var(--pkt-color-brand-warm-blue-1000);--pkt-color-input-border-disabled: var(--pkt-color-grays-gray-300);--pkt-color-input-border-error: var(--pkt-color-brand-red-1000);--pkt-color-input-border-hover: var(--pkt-color-brand-warm-blue-1000);--pkt-color-input-border-normal: var(--pkt-color-brand-dark-blue-1000);--pkt-color-input-text-active: var(--pkt-color-brand-warm-blue-1000);--pkt-color-input-text-disabled: var(--pkt-color-grays-gray-500);--pkt-color-input-text-hover: var(--pkt-color-brand-warm-blue-1000);--pkt-color-input-text-normal: var(--pkt-color-brand-dark-blue-1000);--pkt-color-input-text-error: var(--pkt-color-brand-red-1000);--pkt-color-input-text-open: var(--pkt-color-brand-neutrals-white)}[data-mode=dark] .pkt-input,[data-mode=dark] .pkt-textinput__input,[data-mode=dark] .pkt-input-prefix,[data-mode=dark] .pkt-input-suffix,[data-mode=dark] .pkt-input-icon,[data-mode=dark] .pkt-input__container{--pkt-color-input-background-normal: var(--pkt-color-brand-neutrals-white);--pkt-color-input-border-active: var(--pkt-color-brand-blue-500);--pkt-color-input-border-disabled: var(--pkt-color-grays-gray-200);--pkt-color-input-border-error: var(--pkt-color-brand-red-1000);--pkt-color-input-border-hover: var(--pkt-color-brand-blue-500);--pkt-color-input-border-normal: var(--pkt-color-brand-neutrals-white);--pkt-color-input-text-active: var(--pkt-color-brand-warm-blue-1000);--pkt-color-input-text-disabled: var(--pkt-color-grays-gray-200);--pkt-color-input-text-hover: var(--pkt-color-brand-warm-blue-1000);--pkt-color-input-text-normal: var(--pkt-color-brand-dark-blue-1000);--pkt-color-input-text-error: var(--pkt-color-brand-red-1000);--pkt-color-input-text-open: var(--pkt-color-brand-dark-blue-1000)}.pkt-input,.pkt-textinput__input{
|
|
1
|
+
.pkt-input,.pkt-textinput__input,.pkt-input-prefix,.pkt-input-suffix,.pkt-input-icon,.pkt-input__container{--pkt-color-input-background-normal: var(--pkt-color-brand-neutrals-white);--pkt-color-input-border-active: var(--pkt-color-brand-warm-blue-1000);--pkt-color-input-border-disabled: var(--pkt-color-grays-gray-300);--pkt-color-input-border-error: var(--pkt-color-brand-red-1000);--pkt-color-input-border-hover: var(--pkt-color-brand-warm-blue-1000);--pkt-color-input-border-normal: var(--pkt-color-brand-dark-blue-1000);--pkt-color-input-text-active: var(--pkt-color-brand-warm-blue-1000);--pkt-color-input-text-disabled: var(--pkt-color-grays-gray-500);--pkt-color-input-text-hover: var(--pkt-color-brand-warm-blue-1000);--pkt-color-input-text-normal: var(--pkt-color-brand-dark-blue-1000);--pkt-color-input-text-error: var(--pkt-color-brand-red-1000);--pkt-color-input-text-open: var(--pkt-color-brand-neutrals-white)}[data-mode=dark] .pkt-input,[data-mode=dark] .pkt-textinput__input,[data-mode=dark] .pkt-input-prefix,[data-mode=dark] .pkt-input-suffix,[data-mode=dark] .pkt-input-icon,[data-mode=dark] .pkt-input__container{--pkt-color-input-background-normal: var(--pkt-color-brand-neutrals-white);--pkt-color-input-border-active: var(--pkt-color-brand-blue-500);--pkt-color-input-border-disabled: var(--pkt-color-grays-gray-200);--pkt-color-input-border-error: var(--pkt-color-brand-red-1000);--pkt-color-input-border-hover: var(--pkt-color-brand-blue-500);--pkt-color-input-border-normal: var(--pkt-color-brand-neutrals-white);--pkt-color-input-text-active: var(--pkt-color-brand-warm-blue-1000);--pkt-color-input-text-disabled: var(--pkt-color-grays-gray-200);--pkt-color-input-text-hover: var(--pkt-color-brand-warm-blue-1000);--pkt-color-input-text-normal: var(--pkt-color-brand-dark-blue-1000);--pkt-color-input-text-error: var(--pkt-color-brand-red-1000);--pkt-color-input-text-open: var(--pkt-color-brand-dark-blue-1000)}.pkt-input,.pkt-textinput__input{display:flex;align-items:center;appearance:none;background-color:var(--pkt-color-input-background-normal);border:2px solid var(--pkt-color-input-border-normal);border-radius:0;color:var(--pkt-color-input-text-normal);margin:0;padding:.5rem 1rem;letter-spacing:-0.2px;font-weight:300;font-size:1.125rem;line-height:1.75rem}.pkt-input:not(.pkt-input-compact),.pkt-textinput__input:not(.pkt-input-compact){min-height:3rem}.pkt-input-compact.pkt-input,.pkt-input-compact.pkt-textinput__input{border:0;border-bottom:1px solid var(--pkt-color-input-border-normal);padding:0 0 .1rem 0;letter-spacing:-0.2px;font-weight:300;font-size:1rem;line-height:1.5rem}.pkt-input-compact.pkt-input:is(select):not([multiple]),.pkt-input-compact.pkt-textinput__input:is(select):not([multiple]){background-position:right 0 top 50%;padding-right:2rem}.pkt-input:not(textarea[cols]):not(input[size]):not(.pkt-input--fullwidth):not(.pkt-datepicker__input:not(.pkt-datepicker--multiple)),.pkt-textinput__input:not(textarea[cols]):not(input[size]):not(.pkt-input--fullwidth):not(.pkt-datepicker__input:not(.pkt-datepicker--multiple)),.pkt-input__container:not(:is(:has(.pkt-datepicker__input:not(.pkt-datepicker--multiple)))):not(:is(:has(textarea[cols]))):not(:is(:has(input[size]))):not(:is(:has(.pkt-input--fullwidth))){width:min(31rem,100%)}.pkt-input__container:is(:has(.pkt-datepicker__input:not(.pkt-datepicker--multiple))):not(:is(:has(.pkt-input--fullwidth))){width:fit-content}.pkt-input--fullwidth,.pkt-input--fullwidth+.pkt-input__counter{width:100%}.pkt-input:is(textarea),.pkt-textinput__input:is(textarea){min-height:8rem}.pkt-input:is(select),.pkt-textinput__input:is(select){appearance:none;-moz-appearance:none;-webkit-appearance:none;padding-right:3rem}.pkt-input:is(select):not([multiple]),.pkt-textinput__input:is(select):not([multiple]){--svg: url(https://punkt-cdn.oslo.kommune.no/12.12/icons/chevron-thin-down.svg);background-image:var(--svg);background-repeat:no-repeat;background-position:right .7rem top 50%;background-size:1.5rem auto,100%}.pkt-input:is(select) option,.pkt-textinput__input:is(select) option{background-color:var(--pkt-color-input-background-normal);color:var(--pkt-color-input-text-normal);font-weight:normal}.pkt-input::placeholder,.pkt-textinput__input::placeholder{color:var(--pkt-color-text-placeholder);opacity:1}.pkt-input:hover,.pkt-textinput__input:hover,.pkt-input.pkt-input--hover,.pkt-input--hover.pkt-textinput__input{border-color:var(--pkt-color-input-border-hover)}.pkt-input:focus-visible,.pkt-textinput__input:focus-visible,.pkt-input.pkt-input__textinput--focus,.pkt-input__textinput--focus.pkt-textinput__input{box-shadow:0 0 0 2px var(--pkt-color-input-border-active);border-color:var(--pkt-color-input-border-active)}.pkt-input:focus,.pkt-textinput__input:focus{outline:none;box-shadow:0 0 0 2px var(--pkt-color-input-border-active);border-color:var(--pkt-color-input-border-active)}.pkt-input:disabled,.pkt-textinput__input:disabled,.pkt-input:disabled::placeholder,.pkt-textinput__input:disabled::placeholder,.pkt-input[readonly],[readonly].pkt-textinput__input{opacity:1;background-color:var(--pkt-color-surface-default-gray);border-color:var(--pkt-color-input-border-disabled);cursor:inherit}.pkt-input:disabled:active,.pkt-textinput__input:disabled:active{border:2px solid var(--pkt-color-input-border-disabled)}.pkt-input-prefix,.pkt-input-suffix,.pkt-input-icon,.pkt-input-separator{letter-spacing:-0.2px;font-weight:300;font-size:1.125rem;line-height:1.75rem}.pkt-input-prefix,.pkt-input-suffix,.pkt-input-icon,.pkt-input-separator{display:flex;align-items:center;width:auto;height:3rem;border:2px solid var(--pkt-color-input-border-normal);flex-shrink:0;color:var(--pkt-color-brand-dark-blue-1000);background-color:var(--pkt-color-input-background-normal)}.pkt-input-prefix{padding:.5rem 0rem .5rem 1rem}.pkt-input-prefix::after{content:"";width:1px;margin-left:.5rem;height:100%;background-color:var(--pkt-color-brand-dark-blue-1000)}.pkt-input-suffix{padding:.5rem 1rem .5rem 0rem}.pkt-input-suffix svg{width:1.5rem;height:1.5rem;margin-left:.5rem}.pkt-input-suffix::before{content:"";width:1px;margin-right:.5rem;height:1.5rem;background-color:var(--pkt-color-brand-dark-blue-1000)}.pkt-input-icon{padding:.5rem 1rem;align-self:stretch}.pkt-input-icon svg{width:1.5rem;height:1.5rem}.pkt-input-icon:not(button) svg{margin-left:.5rem}.pkt-input-separator{padding:.5rem 0}.pkt-input--counter-error,.pkt-input--counter-error:focus{border-color:var(--pkt-color-input-border-error);background-color:var(--pkt-color-surface-default-faded-red)}.pkt-input--counter-error:focus{box-shadow:0 0 0 2px var(--pkt-color-input-border-error)}.pkt-input__container{display:flex;align-items:center;align-self:stretch}.pkt-input__container:is(:has(input[size])),.pkt-input__container:is(:has(textarea[cols])){align-self:flex-start}.pkt-input__container :first-child:not(:only-child){border-right-width:0}.pkt-input__container :last-child:not(:only-child){border-left-width:0}.pkt-input__container :not(:first-child):not(:last-child){border-left-width:0;border-right-width:0}.pkt-input__container p{margin:0}.pkt-input__container input:focus{outline:none;box-shadow:none}.pkt-input__container:hover .pkt-input,.pkt-input__container:hover .pkt-textinput__input,.pkt-input__container:hover .pkt-input-prefix,.pkt-input__container:hover .pkt-input-suffix,.pkt-input__container:hover .pkt-input-icon{border-color:var(--pkt-color-input-border-active)}.pkt-input__container:hover .pkt-input:disabled,.pkt-input__container:hover .pkt-textinput__input:disabled,.pkt-input__container:hover .pkt-input-prefix:disabled,.pkt-input__container:hover .pkt-input-suffix:disabled,.pkt-input__container:hover .pkt-input-icon:disabled{border-color:var(--pkt-color-input-border-disabled)}.pkt-input__container:focus-within{outline:2px solid var(--pkt-color-input-border-active)}.pkt-input__container:focus-within .pkt-input,.pkt-input__container:focus-within .pkt-textinput__input,.pkt-input__container:focus-within .pkt-input-prefix,.pkt-input__container:focus-within .pkt-input-suffix,.pkt-input__container:focus-within .pkt-input-icon{border-color:var(--pkt-color-input-border-active)}.pkt-input__counter{letter-spacing:-0.2px;font-weight:300;font-size:.875rem;line-height:1.375rem}.pkt-input__counter{width:min(100%,31rem);text-align:right}.pkt-input__counter--error{letter-spacing:-0.2px;font-weight:500;font-size:.875rem;line-height:1.375rem}.pkt-input__counter--error{color:var(--pkt-color-input-text-error)}.pkt-input__range-inputs{min-width:17rem;container:range/inline-size}@container range (width < 30rem){.pkt-input__container{border:2px solid var(--pkt-color-input-border-normal);display:grid;grid-template-rows:auto auto;grid-template-columns:min-content auto 4rem;gap:0}.pkt-input__container>:nth-child(2){grid-column-start:span 2}.pkt-input__container .pkt-input-prefix,.pkt-input__container .pkt-input-suffix,.pkt-input__container .pkt-input-icon,.pkt-input__container .pkt-input,.pkt-input__container .pkt-textinput__input{border:0}}
|