@oslokommune/punkt-css 3.1.2 → 3.2.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 +2 -2
- package/README.md +27 -0
- package/dist/css/components/alert.css +3 -0
- package/dist/css/components/alert.min.css +1 -1
- package/dist/css/components/linkcard.css +60 -0
- package/dist/css/components/linkcard.min.css +1 -0
- package/dist/css/pkt-base.css +70 -12
- package/dist/css/pkt-base.min.css +1 -1
- package/dist/css/pkt-components.css +64 -0
- package/dist/css/pkt-components.min.css +1 -1
- package/dist/css/pkt.css +134 -12
- package/dist/css/pkt.min.css +1 -1
- package/dist/scss/base/_typography.scss +112 -12
- package/dist/scss/components/_alert.scss +3 -0
- package/dist/scss/components/_index.scss +1 -0
- package/dist/scss/components/_linkcard.scss +75 -0
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -35,8 +35,8 @@ Ingen
|
|
|
35
35
|
Ingen
|
|
36
36
|
|
|
37
37
|
### Chores
|
|
38
|
-
* [670](https://github.com/oslokommune/punkt/issues/670) Generer changelog automatisk (#746). Changelog genereres nå automatisk utifra commits, så lenge de følger Convential commits malen.
|
|
39
|
-
|
|
38
|
+
* [670](https://github.com/oslokommune/punkt/issues/670) Generer changelog automatisk (#746). Changelog genereres nå automatisk utifra commits, så lenge de følger Convential commits malen.
|
|
39
|
+
|
|
40
40
|
Dette er dokumentert i [CONTRIBUTING.md](https://github.com/oslokommune/punkt/blob/main/CONTRIBUTING.md) og i [scriptet som gjør dette ved publisering](https://github.com/oslokommune/punkt/blob/main/scripts/update-changelog.js).
|
|
41
41
|
|
|
42
42
|
|
package/README.md
CHANGED
|
@@ -134,6 +134,33 @@ Legg til logo -->
|
|
|
134
134
|
</style>
|
|
135
135
|
```
|
|
136
136
|
|
|
137
|
+
## 🏎️ Kom i gang - cdn
|
|
138
|
+
Ved å inkludere Punkts css via vår cdn på
|
|
139
|
+
[punkt-cdn.oslo.kommune.no](https://punkt-cdn.oslo.kommune.no/),
|
|
140
|
+
er du kjapt igang uten noe byggesteg.
|
|
141
|
+
|
|
142
|
+
Link til ønsket CSS-fil i `<head>`-taggen din. Vi anbefaler å bruke
|
|
143
|
+
`pkt.min.css` for å få den minifiserte versjonen av hele css-rammeverket.
|
|
144
|
+
Du kan også velge å importere enkelte moduler, eller bare base-modulen.
|
|
145
|
+
|
|
146
|
+
Se tilgjengelige filer på [cdn](https://punkt-cdn.oslo.kommune.no/).
|
|
147
|
+
|
|
148
|
+
```html
|
|
149
|
+
<!doctype html>
|
|
150
|
+
<html lang="no">
|
|
151
|
+
<head>
|
|
152
|
+
<meta charset="utf-8">
|
|
153
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
154
|
+
<title>Punkt</title>
|
|
155
|
+
<link href="https://punkt-cdn.oslo.kommune.no/3.1/css/pkt.min.css" rel="stylesheet">
|
|
156
|
+
</head>
|
|
157
|
+
<body>
|
|
158
|
+
<h1>Velkommen til Oslo Origo</h1>
|
|
159
|
+
<img src="https://punkt-cdn.oslo.kommune.no/3.1/logos/oslologo.svg" alt="Oslo kommune logo" height="64" />
|
|
160
|
+
</body>
|
|
161
|
+
</html>
|
|
162
|
+
```
|
|
163
|
+
|
|
137
164
|
## 🎨 CSS-rammeverket
|
|
138
165
|
|
|
139
166
|
- Modulært - import modulene du selv ønsker.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.pkt-alert{--pkt-alert-bc: var(--color-blue);--pkt-alert-bg: var(--color-blue-60);--pkt-alert-txt: var(--color-blue-dark);--pkt-alert-icon-fg: var(--color-blue-dark);--pkt-alert-close-fg: var(--color-blue-dark)}.pkt-alert--error{--pkt-alert-bc: var(--color-red);--pkt-alert-bg: var(--color-red-30)}.pkt-alert--success{--pkt-alert-bc: var(--color-green);--pkt-alert-bg: var(--color-green-30)}.pkt-alert--warning{--pkt-alert-bc: var(--color-yellow);--pkt-alert-bg: var(--color-yellow-50)}.pkt-alert{padding:1.5rem 1.5rem 1.5rem 1.25rem;display:block;position:relative;border-left:.25rem solid var(--pkt-alert-bc);background-color:var(--pkt-alert-bg);color:var(--pkt-alert-txt)}.pkt-alert__title{font-size:1.125rem;font-weight:500;letter-spacing:-0.2px;line-height:1.5em;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.5em;margin:0 0 0 2.5rem}.pkt-alert__text p{margin-bottom:1rem}.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.5em;margin-top:1.5rem}.pkt-alert__icon{--fg-color: var(--pkt-alert-icon-fg);height:2rem;width:2rem;position:absolute;top:22px;left:20px}.pkt-alert__close{--fg-color: var(--pkt-alert-close-fg);position:absolute;right:1.125rem;top:.625rem}
|
|
1
|
+
.pkt-alert{--pkt-alert-bc: var(--color-blue);--pkt-alert-bg: var(--color-blue-60);--pkt-alert-txt: var(--color-blue-dark);--pkt-alert-icon-fg: var(--color-blue-dark);--pkt-alert-close-fg: var(--color-blue-dark)}.pkt-alert--error{--pkt-alert-bc: var(--color-red);--pkt-alert-bg: var(--color-red-30)}.pkt-alert--success{--pkt-alert-bc: var(--color-green);--pkt-alert-bg: var(--color-green-30)}.pkt-alert--warning{--pkt-alert-bc: var(--color-yellow);--pkt-alert-bg: var(--color-yellow-50)}.pkt-alert{padding:1.5rem 1.5rem 1.5rem 1.25rem;display:block;position:relative;border-left:.25rem solid var(--pkt-alert-bc);background-color:var(--pkt-alert-bg);color:var(--pkt-alert-txt)}.pkt-alert__title{font-size:1.125rem;font-weight:500;letter-spacing:-0.2px;line-height:1.5em;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.5em;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.5em;margin-top:1.5rem}.pkt-alert__icon{--fg-color: var(--pkt-alert-icon-fg);height:2rem;width:2rem;position:absolute;top:22px;left:20px}.pkt-alert__close{--fg-color: var(--pkt-alert-close-fg);position:absolute;right:1.125rem;top:.625rem}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Linkcard component
|
|
3
|
+
*/
|
|
4
|
+
.pkt-linkcard {
|
|
5
|
+
align-items: flex-start;
|
|
6
|
+
padding: 1rem;
|
|
7
|
+
text-decoration: none;
|
|
8
|
+
}
|
|
9
|
+
@media screen and (min-width: 80rem) {
|
|
10
|
+
.pkt-linkcard {
|
|
11
|
+
padding: 1.5rem;
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
.pkt-linkcard:hover {
|
|
15
|
+
text-decoration: none;
|
|
16
|
+
}
|
|
17
|
+
.pkt-linkcard:hover .pkt-linkcard__title {
|
|
18
|
+
text-decoration: underline;
|
|
19
|
+
}
|
|
20
|
+
.pkt-linkcard__title {
|
|
21
|
+
font-size: 1.5rem;
|
|
22
|
+
font-weight: 500;
|
|
23
|
+
letter-spacing: -0.2px;
|
|
24
|
+
line-height: 1.5em;
|
|
25
|
+
margin-bottom: 0.5rem;
|
|
26
|
+
}
|
|
27
|
+
.pkt-linkcard__text p:first-of-type {
|
|
28
|
+
margin-top: 0;
|
|
29
|
+
}
|
|
30
|
+
.pkt-linkcard__text p:last-of-type {
|
|
31
|
+
margin-bottom: 0;
|
|
32
|
+
}
|
|
33
|
+
.pkt-linkcard svg {
|
|
34
|
+
margin-top: 0.313rem;
|
|
35
|
+
}
|
|
36
|
+
.pkt-linkcard--beige {
|
|
37
|
+
background-color: var(--color-beige-light);
|
|
38
|
+
}
|
|
39
|
+
.pkt-linkcard--blue {
|
|
40
|
+
background-color: var(--color-blue-5);
|
|
41
|
+
}
|
|
42
|
+
.pkt-linkcard--grey-outline {
|
|
43
|
+
border: 4px solid var(--color-gray);
|
|
44
|
+
}
|
|
45
|
+
.pkt-linkcard--beige-outline {
|
|
46
|
+
border: 4px solid var(--color-beige-light);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
[data-mode=dark] .pkt-linkcard--beige {
|
|
50
|
+
color: var(--color-blue-dark) !important;
|
|
51
|
+
}
|
|
52
|
+
[data-mode=dark] .pkt-linkcard--beige:focus {
|
|
53
|
+
color: var(--color-hover) !important;
|
|
54
|
+
}
|
|
55
|
+
[data-mode=dark] .pkt-linkcard--blue {
|
|
56
|
+
color: var(--color-blue-dark) !important;
|
|
57
|
+
}
|
|
58
|
+
[data-mode=dark] .pkt-linkcard--blue:focus {
|
|
59
|
+
color: var(--color-hover) !important;
|
|
60
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.pkt-linkcard{align-items:flex-start;padding:1rem;text-decoration:none}@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__title{font-size:1.5rem;font-weight:500;letter-spacing:-0.2px;line-height:1.5em;margin-bottom:.5rem}.pkt-linkcard__text p:first-of-type{margin-top:0}.pkt-linkcard__text p:last-of-type{margin-bottom:0}.pkt-linkcard svg{margin-top:.313rem}.pkt-linkcard--beige{background-color:var(--color-beige-light)}.pkt-linkcard--blue{background-color:var(--color-blue-5)}.pkt-linkcard--grey-outline{border:4px solid var(--color-gray)}.pkt-linkcard--beige-outline{border:4px solid var(--color-beige-light)}[data-mode=dark] .pkt-linkcard--beige{color:var(--color-blue-dark) !important}[data-mode=dark] .pkt-linkcard--beige:focus{color:var(--color-hover) !important}[data-mode=dark] .pkt-linkcard--blue{color:var(--color-blue-dark) !important}[data-mode=dark] .pkt-linkcard--blue:focus{color:var(--color-hover) !important}
|
package/dist/css/pkt-base.css
CHANGED
|
@@ -9197,34 +9197,92 @@ a {
|
|
|
9197
9197
|
word-wrap: break-word;
|
|
9198
9198
|
}
|
|
9199
9199
|
a:visited {
|
|
9200
|
-
color: var(--color-
|
|
9201
|
-
}
|
|
9202
|
-
a:focus {
|
|
9203
|
-
color: var(--color-active);
|
|
9200
|
+
color: var(--color-blue-dark);
|
|
9204
9201
|
}
|
|
9205
|
-
a:hover {
|
|
9202
|
+
a:hover, a.pkt-link--hover {
|
|
9206
9203
|
color: var(--color-hover);
|
|
9207
9204
|
text-decoration: underline;
|
|
9208
9205
|
}
|
|
9209
|
-
a:
|
|
9206
|
+
a:focus-visible, a.pkt-link--focus {
|
|
9207
|
+
box-shadow: 0px 0px 0px 0.125rem var(--color-active), 0px 0px 0px 0.375rem var(--color-visited-light);
|
|
9208
|
+
outline: none;
|
|
9209
|
+
color: var(--color-hover);
|
|
9210
|
+
}
|
|
9211
|
+
a:focus:not(:focus-visible) {
|
|
9212
|
+
box-shadow: none;
|
|
9213
|
+
outline: 0.125rem solid var(--color-active);
|
|
9214
|
+
color: var(--color-hover);
|
|
9215
|
+
}
|
|
9216
|
+
a:active, a.pkt-link--active {
|
|
9210
9217
|
color: var(--color-active);
|
|
9211
9218
|
}
|
|
9212
|
-
[data-mode=dark] a {
|
|
9219
|
+
[data-mode=dark] a:link, [data-mode=dark] a.pkt-link--link {
|
|
9213
9220
|
color: var(--color-white);
|
|
9221
|
+
text-decoration: underline;
|
|
9222
|
+
word-wrap: break-word;
|
|
9214
9223
|
}
|
|
9215
9224
|
[data-mode=dark] a:visited {
|
|
9216
|
-
color: var(--color-
|
|
9225
|
+
color: var(--color-white);
|
|
9217
9226
|
}
|
|
9218
|
-
[data-mode=dark] a:
|
|
9219
|
-
color: var(--color-
|
|
9227
|
+
[data-mode=dark] a:hover, [data-mode=dark] a.pkt-link--hover {
|
|
9228
|
+
color: var(--color-hover-light);
|
|
9220
9229
|
}
|
|
9221
|
-
[data-mode=dark] a:
|
|
9230
|
+
[data-mode=dark] a:focus-visible, [data-mode=dark] a.pkt-link--focus {
|
|
9231
|
+
box-shadow: 0px 0px 0px 0.125rem var(--color-active-light), 0px 0px 0px 0.375rem var(--color-visited-light);
|
|
9232
|
+
outline: none;
|
|
9222
9233
|
color: var(--color-hover-light);
|
|
9223
9234
|
}
|
|
9224
|
-
[data-mode=dark] a:
|
|
9235
|
+
[data-mode=dark] a:focus:not(:focus-visible) {
|
|
9236
|
+
box-shadow: none;
|
|
9237
|
+
outline: 0.125rem solid var(--color-visited-light);
|
|
9238
|
+
color: var(--color-hover-light);
|
|
9239
|
+
}
|
|
9240
|
+
[data-mode=dark] a:active, [data-mode=dark] a.pkt-link--active {
|
|
9225
9241
|
color: var(--color-active-light);
|
|
9226
9242
|
}
|
|
9227
9243
|
|
|
9244
|
+
.pkt-link {
|
|
9245
|
+
display: inline-flex;
|
|
9246
|
+
text-align: left;
|
|
9247
|
+
align-items: center;
|
|
9248
|
+
}
|
|
9249
|
+
.pkt-link__icon {
|
|
9250
|
+
--fg-color: currentColor;
|
|
9251
|
+
width: 1.5rem;
|
|
9252
|
+
height: 1.5rem;
|
|
9253
|
+
flex-shrink: 0;
|
|
9254
|
+
margin-right: 0.5rem;
|
|
9255
|
+
}
|
|
9256
|
+
.pkt-link--icon-left {
|
|
9257
|
+
flex-direction: row;
|
|
9258
|
+
text-decoration: none;
|
|
9259
|
+
}
|
|
9260
|
+
.pkt-link--icon-right {
|
|
9261
|
+
flex-direction: row-reverse;
|
|
9262
|
+
text-decoration: none;
|
|
9263
|
+
}
|
|
9264
|
+
.pkt-link--external::after {
|
|
9265
|
+
content: " ";
|
|
9266
|
+
background-image: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" id="new-window-small" fill="none" data-category="ui" viewBox="0 0 32 32"%3e%3cg fill="%232a2859"%3e%3cpath d="M23.03 21.11v2.06H8.97V9.18h2.06v-2H8.97v-.01h-2v18h18.06v-4.06h-2Z"/%3e%3cpath d="M18 7.16v2h3.62l-7.26 7.28 1.38 1.39 7.27-7.29v3.63h2.02V7.16H18Z"/%3e%3c/g%3e%3c/svg%3e');
|
|
9267
|
+
background-repeat: no-repeat;
|
|
9268
|
+
background-size: 18px 18px;
|
|
9269
|
+
width: 1.125rem;
|
|
9270
|
+
height: 1.125rem;
|
|
9271
|
+
}
|
|
9272
|
+
.pkt-link--external:hover::after {
|
|
9273
|
+
background-image: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" id="new-window-small" fill="none" data-category="ui" viewBox="0 0 32 32"%3e%3cg fill="%231f42aa"%3e%3cpath d="M23.03 21.11v2.06H8.97V9.18h2.06v-2H8.97v-.01h-2v18h18.06v-4.06h-2Z"/%3e%3cpath d="M18 7.16v2h3.62l-7.26 7.28 1.38 1.39 7.27-7.29v3.63h2.02V7.16H18Z"/%3e%3c/g%3e%3c/svg%3e');
|
|
9274
|
+
background-repeat: no-repeat;
|
|
9275
|
+
}
|
|
9276
|
+
|
|
9277
|
+
[data-mode=dark] .pkt-link--external::after {
|
|
9278
|
+
background-image: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" id="new-window-small" fill="none" data-category="ui" viewBox="0 0 32 32"%3e%3cg fill="white"%3e%3cpath d="M23.03 21.11v2.06H8.97V9.18h2.06v-2H8.97v-.01h-2v18h18.06v-4.06h-2Z"/%3e%3cpath d="M18 7.16v2h3.62l-7.26 7.28 1.38 1.39 7.27-7.29v3.63h2.02V7.16H18Z"/%3e%3c/g%3e%3c/svg%3e');
|
|
9279
|
+
background-repeat: no-repeat;
|
|
9280
|
+
}
|
|
9281
|
+
[data-mode=dark] .pkt-link--external:hover::after {
|
|
9282
|
+
background-image: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" id="new-window-small" fill="none" data-category="ui" viewBox="0 0 32 32"%3e%3cg fill="%23b3f5ff"%3e%3cpath d="M23.03 21.11v2.06H8.97V9.18h2.06v-2H8.97v-.01h-2v18h18.06v-4.06h-2Z"/%3e%3cpath d="M18 7.16v2h3.62l-7.26 7.28 1.38 1.39 7.27-7.29v3.63h2.02V7.16H18Z"/%3e%3c/g%3e%3c/svg%3e');
|
|
9283
|
+
background-repeat: no-repeat;
|
|
9284
|
+
}
|
|
9285
|
+
|
|
9228
9286
|
/*
|
|
9229
9287
|
* origo typography
|
|
9230
9288
|
* prefix pkt
|