@oslokommune/punkt-css 11.10.1 → 11.11.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 +133 -0
- package/dist/css/components/accordion.css +121 -0
- package/dist/css/components/accordion.min.css +1 -0
- package/dist/css/components/textinput.css +1 -1
- package/dist/css/components/textinput.min.css +1 -1
- package/dist/css/pkt-base.css +1 -1
- package/dist/css/pkt-base.min.css +1 -1
- package/dist/css/pkt-components.css +123 -1
- package/dist/css/pkt-components.min.css +1 -1
- package/dist/css/pkt-elements.css +3 -3
- package/dist/css/pkt-elements.min.css +1 -1
- package/dist/css/pkt.css +126 -4
- package/dist/css/pkt.min.css +1 -1
- package/dist/scss/abstracts/variables/_index.scss +1 -1
- package/dist/scss/components/_accordion.scss +169 -0
- package/dist/scss/components/_index.scss +1 -0
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,139 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
|
|
|
5
5
|
|
|
6
6
|
---
|
|
7
7
|
|
|
8
|
+
## [11.11.0](https://github.com/oslokommune/punkt/compare/11.10.1...11.11.0) (2024-04-25)
|
|
9
|
+
|
|
10
|
+
### ⚠ BREAKING CHANGES
|
|
11
|
+
Ingen
|
|
12
|
+
|
|
13
|
+
### Features
|
|
14
|
+
* Accordion 🪗 (#1624). * feat(react): accordion✨ (#1596)
|
|
15
|
+
|
|
16
|
+
* feat(react): Accordion WIP
|
|
17
|
+
|
|
18
|
+
* ✨ feat(react,css): Accordion
|
|
19
|
+
|
|
20
|
+
- Update component specs: Accordion and Accordionitem
|
|
21
|
+
- Make AccordionItem and Accordion accessible
|
|
22
|
+
- Add props: compact, skin, defaultOpen, onClick
|
|
23
|
+
- Add React display of component
|
|
24
|
+
- Add descriptions
|
|
25
|
+
|
|
26
|
+
* 🧹 Clean up
|
|
27
|
+
|
|
28
|
+
* 🔒 npm install and update lockfile
|
|
29
|
+
|
|
30
|
+
* ♻️ Refactor & add state example
|
|
31
|
+
|
|
32
|
+
* ✅ Add Accordion test
|
|
33
|
+
|
|
34
|
+
- Renders without errors
|
|
35
|
+
- Is Ref working correctly
|
|
36
|
+
- Is children rendered
|
|
37
|
+
- Props properly applied
|
|
38
|
+
- Accessibility
|
|
39
|
+
|
|
40
|
+
* ♻️ Refactor hover & open style as discussed
|
|
41
|
+
|
|
42
|
+
- Remove blue background & white text for opened acc item
|
|
43
|
+
- Add purple border when active acc item
|
|
44
|
+
- Add underline on summary text and arrow movement when hovering
|
|
45
|
+
|
|
46
|
+
* ♻️ Jan roter rundt i CSS igjen!
|
|
47
|
+
- Fix hovering and active state
|
|
48
|
+
|
|
49
|
+
* ♻️ Refactor AccordionItem: optional toggleFn & prop
|
|
50
|
+
|
|
51
|
+
The toggle function is now optional with the "open" prop. This is so that the user will not have to provide the open state of each items if they want the accordion to allow multiple open items at once (which is the default). If they do want to restrict the number of open items, an example will be provided on how to locally in their own code.
|
|
52
|
+
|
|
53
|
+
* feat(react): ✨ add optional overriding toggleProps
|
|
54
|
+
|
|
55
|
+
- Add working example of handling toggleState to limit number of opened accordionItems.
|
|
56
|
+
- Styling and opening works as intended.
|
|
57
|
+
- Both when having automatic state handling (all items are expandable) and when using toggleProps to override it.
|
|
58
|
+
- Add description of why we have chosen to do it like this.
|
|
59
|
+
|
|
60
|
+
|
|
61
|
+
|
|
62
|
+
---------
|
|
63
|
+
|
|
64
|
+
Co-authored-by: Jan Schjetne <jan.schjetne@origo.oslo.kommune.no>
|
|
65
|
+
|
|
66
|
+
* feat(vue): accordion 🪗✨ (#1617)
|
|
67
|
+
|
|
68
|
+
* feat(vue): ✨ we tried something
|
|
69
|
+
|
|
70
|
+
* feat(vue): add Vue version of Accordion+fix test✨
|
|
71
|
+
|
|
72
|
+
* Add routing
|
|
73
|
+
|
|
74
|
+
* Update Accordion.vue
|
|
75
|
+
|
|
76
|
+
* add trine as codeowner
|
|
77
|
+
|
|
78
|
+
---------
|
|
79
|
+
|
|
80
|
+
Co-authored-by: Jan Schjetne <jan.schjetne@origo.oslo.kommune.no>
|
|
81
|
+
|
|
82
|
+
* Feature accordion docs ✨ #1549 (#1619)
|
|
83
|
+
|
|
84
|
+
|
|
85
|
+
* feat(docs,react): add pure html/css example...
|
|
86
|
+
|
|
87
|
+
.. and edit react✨
|
|
88
|
+
|
|
89
|
+
* fix(docs): legg til mer doc
|
|
90
|
+
|
|
91
|
+
* fix(docs): Improve UU and code examples + text
|
|
92
|
+
|
|
93
|
+
* fix(docs): Småendringer på acc docs
|
|
94
|
+
|
|
95
|
+
* fix(docs): Endre tekst. pga E-preventDefault()
|
|
96
|
+
|
|
97
|
+
* fix(docs): use CheckList component
|
|
98
|
+
|
|
99
|
+
---------
|
|
100
|
+
|
|
101
|
+
Signed-off-by: dependabot[bot] <support@github.com>
|
|
102
|
+
Co-authored-by: julielyng <35265191+julielyng@users.noreply.github.com>
|
|
103
|
+
Co-authored-by: Jan Schjetne <jan.schjetne@origo.oslo.kommune.no>
|
|
104
|
+
Co-authored-by: omatrebym <97092636+omatrebym@users.noreply.github.com>
|
|
105
|
+
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
|
|
106
|
+
|
|
107
|
+
* fix(css): adjust borderless & compact border width
|
|
108
|
+
|
|
109
|
+
* fix(docs): Update component-status.json 📄
|
|
110
|
+
|
|
111
|
+
* feat(docs):#1550 Lagt til innhold (#1643)
|
|
112
|
+
|
|
113
|
+
* docs:#1550 Lagt til innhold
|
|
114
|
+
|
|
115
|
+
* docs:#1550 Oppdatert innhold
|
|
116
|
+
|
|
117
|
+
* add svg photos
|
|
118
|
+
|
|
119
|
+
---------
|
|
120
|
+
|
|
121
|
+
Co-authored-by: julielyng <35265191+julielyng@users.noreply.github.com>
|
|
122
|
+
|
|
123
|
+
---------
|
|
124
|
+
|
|
125
|
+
Signed-off-by: dependabot[bot] <support@github.com>
|
|
126
|
+
Co-authored-by: Jan Schjetne <jan.schjetne@origo.oslo.kommune.no>
|
|
127
|
+
Co-authored-by: julielyng <35265191+julielyng@users.noreply.github.com>
|
|
128
|
+
Co-authored-by: omatrebym <97092636+omatrebym@users.noreply.github.com>
|
|
129
|
+
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
|
|
130
|
+
|
|
131
|
+
|
|
132
|
+
### Bug Fixes
|
|
133
|
+
Ingen
|
|
134
|
+
|
|
135
|
+
### Chores
|
|
136
|
+
Ingen
|
|
137
|
+
|
|
138
|
+
---
|
|
139
|
+
|
|
140
|
+
|
|
8
141
|
## [11.11.0](https://github.com/oslokommune/punkt/compare/11.10.0...11.11.0) (2024-04-19)
|
|
9
142
|
|
|
10
143
|
### ⚠ BREAKING CHANGES
|
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Accordion/Expandable component
|
|
3
|
+
*/
|
|
4
|
+
.pkt-accordion {
|
|
5
|
+
display: grid;
|
|
6
|
+
grid-template-columns: 1fr;
|
|
7
|
+
grid-template-rows: 0fr;
|
|
8
|
+
row-gap: 0.5rem;
|
|
9
|
+
transition: grid-template-rows 500ms;
|
|
10
|
+
font-size: 1.5rem;
|
|
11
|
+
font-weight: 500;
|
|
12
|
+
letter-spacing: -0.2px;
|
|
13
|
+
line-height: 2.25rem;
|
|
14
|
+
}
|
|
15
|
+
.pkt-accordion:focus-visible {
|
|
16
|
+
border: 0.25rem solid var(--pkt-color-border-states-hover);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.pkt-accordion--borderless .pkt-accordion-item {
|
|
20
|
+
border: none;
|
|
21
|
+
}
|
|
22
|
+
.pkt-accordion--borderless .pkt-accordion-item[open] .pkt-accordion-item__title {
|
|
23
|
+
box-shadow: inset 0 0 0 0.25rem var(--pkt-color-border-states-active);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.pkt-accordion--outlined .pkt-accordion-item {
|
|
27
|
+
border: 3px solid var(--pkt-color-border-gray);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.pkt-accordion--beige {
|
|
31
|
+
row-gap: 0;
|
|
32
|
+
}
|
|
33
|
+
.pkt-accordion--beige .pkt-accordion-item:nth-child(odd) {
|
|
34
|
+
background-color: var(--pkt-color-surface-default-light-beige);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.pkt-accordion--blue {
|
|
38
|
+
row-gap: 0;
|
|
39
|
+
}
|
|
40
|
+
.pkt-accordion--blue .pkt-accordion-item:nth-child(odd) {
|
|
41
|
+
background-color: var(--pkt-color-surface-default-light-blue);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.pkt-accordion--compact.pkt-accordion--borderless .pkt-accordion-item {
|
|
45
|
+
border: none;
|
|
46
|
+
}
|
|
47
|
+
.pkt-accordion--compact.pkt-accordion--borderless .pkt-accordion-item--open .pkt-accordion-item__title {
|
|
48
|
+
box-shadow: inset 0 0 0 0.125rem var(--pkt-color-border-states-active);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.pkt-accordion--compact > .pkt-accordion-item .pkt-accordion-item__title {
|
|
52
|
+
padding: 1rem;
|
|
53
|
+
font-size: 1rem;
|
|
54
|
+
font-weight: 500;
|
|
55
|
+
letter-spacing: -0.2px;
|
|
56
|
+
line-height: 1.5rem;
|
|
57
|
+
}
|
|
58
|
+
.pkt-accordion--compact > .pkt-accordion-item .pkt-accordion-item__content {
|
|
59
|
+
padding: 1rem;
|
|
60
|
+
font-size: 1rem;
|
|
61
|
+
font-weight: 300;
|
|
62
|
+
letter-spacing: -0.2px;
|
|
63
|
+
line-height: 1.5rem;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.pkt-accordion-item {
|
|
67
|
+
color: var(--pkt-color-brand-dark-blue-1000);
|
|
68
|
+
background-color: var(--pkt-color-brand-neutrals-white);
|
|
69
|
+
transition: transform 0.3s;
|
|
70
|
+
appearance: none;
|
|
71
|
+
text-align: left;
|
|
72
|
+
}
|
|
73
|
+
.pkt-accordion-item summary::-webkit-details-marker {
|
|
74
|
+
display: none;
|
|
75
|
+
}
|
|
76
|
+
.pkt-accordion-item__title {
|
|
77
|
+
align-items: center;
|
|
78
|
+
cursor: pointer;
|
|
79
|
+
display: flex;
|
|
80
|
+
justify-content: space-between;
|
|
81
|
+
padding: 1.5rem;
|
|
82
|
+
}
|
|
83
|
+
.pkt-accordion-item__title:hover {
|
|
84
|
+
text-decoration: underline;
|
|
85
|
+
}
|
|
86
|
+
.pkt-accordion-item__title:hover .pkt-accordion-item__icon {
|
|
87
|
+
transform: translateY(0.25rem);
|
|
88
|
+
}
|
|
89
|
+
.pkt-accordion-item__title:focus-visible {
|
|
90
|
+
outline: 0.25rem solid var(--pkt-color-border-states-focus);
|
|
91
|
+
}
|
|
92
|
+
.pkt-accordion-item__icon {
|
|
93
|
+
transition: transform 0.2s;
|
|
94
|
+
}
|
|
95
|
+
.pkt-accordion-item__content {
|
|
96
|
+
border-top: none;
|
|
97
|
+
display: none;
|
|
98
|
+
font-size: 1.125rem;
|
|
99
|
+
font-weight: 300;
|
|
100
|
+
letter-spacing: -0.2px;
|
|
101
|
+
line-height: 1.75rem;
|
|
102
|
+
padding: 1.5rem;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.pkt-accordion-item[open] .pkt-accordion-item__title {
|
|
106
|
+
border-bottom: none;
|
|
107
|
+
}
|
|
108
|
+
.pkt-accordion-item[open] .pkt-accordion-item__title:hover .pkt-accordion-item__icon {
|
|
109
|
+
transform: rotate(180deg) translateY(0.25rem);
|
|
110
|
+
}
|
|
111
|
+
.pkt-accordion-item[open] .pkt-accordion-item__content {
|
|
112
|
+
display: block;
|
|
113
|
+
}
|
|
114
|
+
.pkt-accordion-item[open] .pkt-accordion-item__icon {
|
|
115
|
+
transform: rotate(180deg) translateY(0);
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.pkt-icon.pkt-accordion-item__icon > svg {
|
|
119
|
+
min-height: 2rem;
|
|
120
|
+
min-width: 2rem;
|
|
121
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.pkt-accordion{display:grid;grid-template-columns:1fr;grid-template-rows:0fr;row-gap:.5rem;transition:grid-template-rows 500ms;font-size:1.5rem;font-weight:500;letter-spacing:-0.2px;line-height:2.25rem}.pkt-accordion:focus-visible{border:.25rem solid var(--pkt-color-border-states-hover)}.pkt-accordion--borderless .pkt-accordion-item{border:none}.pkt-accordion--borderless .pkt-accordion-item[open] .pkt-accordion-item__title{box-shadow:inset 0 0 0 .25rem var(--pkt-color-border-states-active)}.pkt-accordion--outlined .pkt-accordion-item{border:3px solid var(--pkt-color-border-gray)}.pkt-accordion--beige{row-gap:0}.pkt-accordion--beige .pkt-accordion-item:nth-child(odd){background-color:var(--pkt-color-surface-default-light-beige)}.pkt-accordion--blue{row-gap:0}.pkt-accordion--blue .pkt-accordion-item:nth-child(odd){background-color:var(--pkt-color-surface-default-light-blue)}.pkt-accordion--compact.pkt-accordion--borderless .pkt-accordion-item{border:none}.pkt-accordion--compact.pkt-accordion--borderless .pkt-accordion-item--open .pkt-accordion-item__title{box-shadow:inset 0 0 0 .125rem var(--pkt-color-border-states-active)}.pkt-accordion--compact>.pkt-accordion-item .pkt-accordion-item__title{padding:1rem;font-size:1rem;font-weight:500;letter-spacing:-0.2px;line-height:1.5rem}.pkt-accordion--compact>.pkt-accordion-item .pkt-accordion-item__content{padding:1rem;font-size:1rem;font-weight:300;letter-spacing:-0.2px;line-height:1.5rem}.pkt-accordion-item{color:var(--pkt-color-brand-dark-blue-1000);background-color:var(--pkt-color-brand-neutrals-white);transition:transform .3s;appearance:none;text-align:left}.pkt-accordion-item summary::-webkit-details-marker{display:none}.pkt-accordion-item__title{align-items:center;cursor:pointer;display:flex;justify-content:space-between;padding:1.5rem}.pkt-accordion-item__title:hover{text-decoration:underline}.pkt-accordion-item__title:hover .pkt-accordion-item__icon{transform:translateY(0.25rem)}.pkt-accordion-item__title:focus-visible{outline:.25rem solid var(--pkt-color-border-states-focus)}.pkt-accordion-item__icon{transition:transform .2s}.pkt-accordion-item__content{border-top:none;display:none;font-size:1.125rem;font-weight:300;letter-spacing:-0.2px;line-height:1.75rem;padding:1.5rem}.pkt-accordion-item[open] .pkt-accordion-item__title{border-bottom:none}.pkt-accordion-item[open] .pkt-accordion-item__title:hover .pkt-accordion-item__icon{transform:rotate(180deg) translateY(0.25rem)}.pkt-accordion-item[open] .pkt-accordion-item__content{display:block}.pkt-accordion-item[open] .pkt-accordion-item__icon{transform:rotate(180deg) translateY(0)}.pkt-icon.pkt-accordion-item__icon>svg{min-height:2rem;min-width:2rem}
|
|
@@ -74,7 +74,7 @@
|
|
|
74
74
|
padding-right: 3rem;
|
|
75
75
|
}
|
|
76
76
|
.pkt-input:is(select):not([multiple]), .pkt-textinput__input:is(select):not([multiple]) {
|
|
77
|
-
--svg: url(https://punkt-cdn.oslo.kommune.no/11.
|
|
77
|
+
--svg: url(https://punkt-cdn.oslo.kommune.no/11.11/icons/chevron-thin-down.svg);
|
|
78
78
|
background-image: var(--svg);
|
|
79
79
|
background-repeat: no-repeat;
|
|
80
80
|
background-position: right 0.7rem top 50%;
|
|
@@ -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{font-size:1.125rem;font-weight:300;letter-spacing:-0.2px;line-height:1.75rem;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}.pkt-input:not(textarea[cols]):not(input[size]):not(.pkt-input--fullwidth),.pkt-textinput__input:not(textarea[cols]):not(input[size]):not(.pkt-input--fullwidth),.pkt-input__container:not(:is(:has(textarea[cols]))):not(:is(:has(input[size]))):not(:is(:has(.pkt-input--fullwidth))){width:min(100%,31rem)}.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/11.
|
|
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{font-size:1.125rem;font-weight:300;letter-spacing:-0.2px;line-height:1.75rem;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}.pkt-input:not(textarea[cols]):not(input[size]):not(.pkt-input--fullwidth),.pkt-textinput__input:not(textarea[cols]):not(input[size]):not(.pkt-input--fullwidth),.pkt-input__container:not(:is(:has(textarea[cols]))):not(:is(:has(input[size]))):not(:is(:has(.pkt-input--fullwidth))){width:min(100%,31rem)}.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/11.11/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{font-size:1.125rem;font-weight:300;letter-spacing:-0.2px;line-height:1.75rem;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;margin-left:.5rem}.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:none}.pkt-input__container :last-child:not(:only-child){border-left:none}.pkt-input__container :not(:first-child):not(:last-child){border-left:none;border-right:none}.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{font-size:.875rem;font-weight:300;letter-spacing:-0.2px;line-height:1.375rem;width:min(100%,31rem);text-align:right}.pkt-input__counter--error{font-size:.875rem;font-weight:500;letter-spacing:-0.2px;line-height:1.375rem;color:var(--pkt-color-input-text-error)}
|
package/dist/css/pkt-base.css
CHANGED
|
@@ -13345,7 +13345,7 @@ a:active, a.pkt-link--active,
|
|
|
13345
13345
|
}
|
|
13346
13346
|
.pkt-link--external::after {
|
|
13347
13347
|
content: " ";
|
|
13348
|
-
--svg: url(https://punkt-cdn.oslo.kommune.no/11.
|
|
13348
|
+
--svg: url(https://punkt-cdn.oslo.kommune.no/11.11/icons/new-window-small.svg);
|
|
13349
13349
|
background-image: var(--svg);
|
|
13350
13350
|
background-repeat: no-repeat;
|
|
13351
13351
|
background-size: 18px 18px;
|