@oslokommune/punkt-css 17.0.1 → 17.0.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 +36 -0
- package/dist/css/components/bodytext.css +3 -3
- package/dist/css/components/bodytext.min.css +1 -1
- package/dist/css/components/breadcrumbs.css +5 -5
- package/dist/css/components/breadcrumbs.min.css +1 -1
- package/dist/css/components/heading.css +5 -5
- package/dist/css/components/heading.min.css +1 -1
- package/dist/css/components/linkcard.css +1 -1
- package/dist/css/components/linkcard.min.css +1 -1
- package/dist/css/elements/section.css +7 -7
- package/dist/css/elements/section.min.css +1 -1
- package/dist/css/pkt-base.css +5537 -7374
- package/dist/css/pkt-base.min.css +1 -1
- package/dist/css/pkt-components.css +14 -14
- package/dist/css/pkt-components.min.css +1 -1
- package/dist/css/pkt-docs.css +5557 -7394
- package/dist/css/pkt-docs.min.css +1 -1
- package/dist/css/pkt-elements.css +7 -7
- package/dist/css/pkt-elements.min.css +1 -1
- package/dist/css/pkt.css +5557 -7394
- package/dist/css/pkt.min.css +1 -1
- package/dist/scss/abstracts/mixins/_breakpoints.scss +22 -7
- package/dist/scss/base/_grid.scss +6 -10
- package/dist/scss/base/_spacing.scss +52 -105
- package/dist/scss/base/_typography.scss +5 -8
- package/dist/scss/base/_visibility.scss +2 -2
- package/package.json +5 -5
|
@@ -6,6 +6,21 @@
|
|
|
6
6
|
// the verbose thing
|
|
7
7
|
// - TODO: reflect current media queries for use in javascript.
|
|
8
8
|
// https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia
|
|
9
|
+
|
|
10
|
+
// Ny breakpoint-mixin, veldig forenklet. Tar bare verdi, og lager media query
|
|
11
|
+
// for min-width. Hvis verdien er 0, så blir det ingen min-width.
|
|
12
|
+
@mixin bp-up($value) {
|
|
13
|
+
@if $value == 0 {
|
|
14
|
+
@media screen {
|
|
15
|
+
@content;
|
|
16
|
+
}
|
|
17
|
+
} @else {
|
|
18
|
+
@media screen and (min-width: $value) {
|
|
19
|
+
@content;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
|
|
9
24
|
@mixin bp($name) {
|
|
10
25
|
@if $name== 'mobile' {
|
|
11
26
|
// 0px to 575px
|
|
@@ -14,17 +29,17 @@
|
|
|
14
29
|
}
|
|
15
30
|
} @else if $name== 'mobile-up' {
|
|
16
31
|
// 0px and up
|
|
17
|
-
@media screen
|
|
32
|
+
@media screen {
|
|
18
33
|
@content;
|
|
19
34
|
}
|
|
20
35
|
} @else if $name== 'phablet' {
|
|
21
|
-
//
|
|
22
|
-
@media screen and (min-width:
|
|
36
|
+
// 576px to 767px
|
|
37
|
+
@media screen and (min-width: 36rem) and (max-width: 47.938rem) {
|
|
23
38
|
@content;
|
|
24
39
|
}
|
|
25
40
|
} @else if $name== 'phablet-up' {
|
|
26
|
-
//
|
|
27
|
-
@media screen and (min-width:
|
|
41
|
+
// 576px and up
|
|
42
|
+
@media screen and (min-width: 36rem) {
|
|
28
43
|
@content;
|
|
29
44
|
}
|
|
30
45
|
} @else if $name== 'tablet' {
|
|
@@ -83,8 +98,8 @@
|
|
|
83
98
|
@content;
|
|
84
99
|
}
|
|
85
100
|
} @else if $name== 'phablet-to-tablet-big' {
|
|
86
|
-
//
|
|
87
|
-
@media screen and (min-width:
|
|
101
|
+
// 576px to 1023px
|
|
102
|
+
@media screen and (min-width: 36rem) and (max-width: 63.938rem) {
|
|
88
103
|
@content;
|
|
89
104
|
}
|
|
90
105
|
} @else if $name== 'tablet-to-laptop' {
|
|
@@ -13,8 +13,7 @@ $gapsMedium: map.get(variables.$spacing, 'size-32');
|
|
|
13
13
|
display: grid;
|
|
14
14
|
gap: $gapsSmall;
|
|
15
15
|
grid-template-columns: repeat(12, 1fr);
|
|
16
|
-
margin-
|
|
17
|
-
margin-right: auto;
|
|
16
|
+
margin-inline: auto;
|
|
18
17
|
width: 100%;
|
|
19
18
|
|
|
20
19
|
@include bp('tablet-up') {
|
|
@@ -22,11 +21,9 @@ $gapsMedium: map.get(variables.$spacing, 'size-32');
|
|
|
22
21
|
}
|
|
23
22
|
|
|
24
23
|
&--padding {
|
|
25
|
-
padding-
|
|
26
|
-
padding-right: $gapsSmall;
|
|
24
|
+
padding-inline: $gapsSmall;
|
|
27
25
|
@include bp('tablet-up') {
|
|
28
|
-
padding-
|
|
29
|
-
padding-right: $gapsMedium;
|
|
26
|
+
padding-inline: $gapsMedium;
|
|
30
27
|
}
|
|
31
28
|
}
|
|
32
29
|
|
|
@@ -66,8 +63,7 @@ $gapsMedium: map.get(variables.$spacing, 'size-32');
|
|
|
66
63
|
margin-right: auto;
|
|
67
64
|
}
|
|
68
65
|
&--center {
|
|
69
|
-
margin-
|
|
70
|
-
margin-right: auto;
|
|
66
|
+
margin-inline: auto;
|
|
71
67
|
}
|
|
72
68
|
&--right {
|
|
73
69
|
margin-left: auto;
|
|
@@ -88,7 +84,7 @@ $gapsMedium: map.get(variables.$spacing, 'size-32');
|
|
|
88
84
|
}
|
|
89
85
|
|
|
90
86
|
@each $bp-name, $bp-value in variables.$breakpoints {
|
|
91
|
-
@include bp(
|
|
87
|
+
@include bp-up($bp-value) {
|
|
92
88
|
@each $sp-name, $sp-value in variables.$spacing {
|
|
93
89
|
&--gap-#{$sp-name}-#{$bp-name}-up {
|
|
94
90
|
gap: $sp-value;
|
|
@@ -135,7 +131,7 @@ $gapsMedium: map.get(variables.$spacing, 'size-32');
|
|
|
135
131
|
}
|
|
136
132
|
|
|
137
133
|
@each $bp-name, $bp-value in variables.$breakpoints {
|
|
138
|
-
@include bp(
|
|
134
|
+
@include bp-up($bp-value) {
|
|
139
135
|
@for $i from 2 through 12 {
|
|
140
136
|
&.pkt-cell--span#{$i}-#{$bp-name}-up {
|
|
141
137
|
grid-column-end: span $i;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/*
|
|
1
|
+
/*
|
|
2
2
|
* Spacing
|
|
3
3
|
*/
|
|
4
4
|
|
|
@@ -6,114 +6,61 @@
|
|
|
6
6
|
@use '../abstracts/variables';
|
|
7
7
|
@use '../abstracts/mixins/breakpoints' as *;
|
|
8
8
|
|
|
9
|
-
@
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
}
|
|
9
|
+
@mixin spacing-utilities($suffix: '') {
|
|
10
|
+
@each $sp-name, $sp-value in variables.$spacing {
|
|
11
|
+
.m-#{$sp-name}#{$suffix} {
|
|
12
|
+
margin: $sp-value !important;
|
|
13
|
+
}
|
|
14
|
+
.mt-#{$sp-name}#{$suffix} {
|
|
15
|
+
margin-block-start: $sp-value !important;
|
|
16
|
+
}
|
|
17
|
+
.mr-#{$sp-name}#{$suffix} {
|
|
18
|
+
margin-inline-end: $sp-value !important;
|
|
19
|
+
}
|
|
20
|
+
.mb-#{$sp-name}#{$suffix} {
|
|
21
|
+
margin-block-end: $sp-value !important;
|
|
22
|
+
}
|
|
23
|
+
.ml-#{$sp-name}#{$suffix} {
|
|
24
|
+
margin-inline-start: $sp-value !important;
|
|
25
|
+
}
|
|
26
|
+
.mx-#{$sp-name}#{$suffix} {
|
|
27
|
+
margin-inline: $sp-value !important;
|
|
28
|
+
}
|
|
29
|
+
.my-#{$sp-name}#{$suffix} {
|
|
30
|
+
margin-block: $sp-value !important;
|
|
31
|
+
}
|
|
33
32
|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
padding-bottom: $sp-value !important;
|
|
56
|
-
}
|
|
33
|
+
.p-#{$sp-name}#{$suffix} {
|
|
34
|
+
padding: $sp-value !important;
|
|
35
|
+
}
|
|
36
|
+
.pt-#{$sp-name}#{$suffix} {
|
|
37
|
+
padding-block-start: $sp-value !important;
|
|
38
|
+
}
|
|
39
|
+
.pr-#{$sp-name}#{$suffix} {
|
|
40
|
+
padding-inline-end: $sp-value !important;
|
|
41
|
+
}
|
|
42
|
+
.pb-#{$sp-name}#{$suffix} {
|
|
43
|
+
padding-block-end: $sp-value !important;
|
|
44
|
+
}
|
|
45
|
+
.pl-#{$sp-name}#{$suffix} {
|
|
46
|
+
padding-inline-start: $sp-value !important;
|
|
47
|
+
}
|
|
48
|
+
.px-#{$sp-name}#{$suffix} {
|
|
49
|
+
padding-inline: $sp-value !important;
|
|
50
|
+
}
|
|
51
|
+
.py-#{$sp-name}#{$suffix} {
|
|
52
|
+
padding-block: $sp-value !important;
|
|
53
|
+
}
|
|
57
54
|
|
|
58
|
-
|
|
59
|
-
|
|
55
|
+
.gap-#{$sp-name}#{$suffix} {
|
|
56
|
+
gap: $sp-value !important;
|
|
57
|
+
}
|
|
60
58
|
}
|
|
61
59
|
}
|
|
62
60
|
|
|
63
|
-
@
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
margin: $sp-value !important;
|
|
68
|
-
}
|
|
69
|
-
.mt-#{$sp-name}--#{$bp-name}-up {
|
|
70
|
-
margin-top: $sp-value !important;
|
|
71
|
-
}
|
|
72
|
-
.mr-#{$sp-name}--#{$bp-name}-up {
|
|
73
|
-
margin-right: $sp-value !important;
|
|
74
|
-
}
|
|
75
|
-
.mb-#{$sp-name}--#{$bp-name}-up {
|
|
76
|
-
margin-bottom: $sp-value !important;
|
|
77
|
-
}
|
|
78
|
-
.ml-#{$sp-name}--#{$bp-name}-up {
|
|
79
|
-
margin-left: $sp-value !important;
|
|
80
|
-
}
|
|
81
|
-
.mx-#{$sp-name}--#{$bp-name}-up {
|
|
82
|
-
margin-right: $sp-value !important;
|
|
83
|
-
margin-left: $sp-value !important;
|
|
84
|
-
}
|
|
85
|
-
.my-#{$sp-name}--#{$bp-name}-up {
|
|
86
|
-
margin-top: $sp-value !important;
|
|
87
|
-
margin-bottom: $sp-value !important;
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
.p-#{$sp-name}--#{$bp-name}-up {
|
|
91
|
-
padding: $sp-value !important;
|
|
92
|
-
}
|
|
93
|
-
.pt-#{$sp-name}--#{$bp-name}-up {
|
|
94
|
-
padding-top: $sp-value !important;
|
|
95
|
-
}
|
|
96
|
-
.pr-#{$sp-name}--#{$bp-name}-up {
|
|
97
|
-
padding-right: $sp-value !important;
|
|
98
|
-
}
|
|
99
|
-
.pb-#{$sp-name}--#{$bp-name}-up {
|
|
100
|
-
padding-bottom: $sp-value !important;
|
|
101
|
-
}
|
|
102
|
-
.pl-#{$sp-name}--#{$bp-name}-up {
|
|
103
|
-
padding-left: $sp-value !important;
|
|
104
|
-
}
|
|
105
|
-
.px-#{$sp-name}--#{$bp-name}-up {
|
|
106
|
-
padding-right: $sp-value !important;
|
|
107
|
-
padding-left: $sp-value !important;
|
|
108
|
-
}
|
|
109
|
-
.py-#{$sp-name}--#{$bp-name}-up {
|
|
110
|
-
padding-top: $sp-value !important;
|
|
111
|
-
padding-bottom: $sp-value !important;
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
.gap-#{$sp-name}--#{$bp-name}-up {
|
|
115
|
-
gap: $sp-value !important;
|
|
116
|
-
}
|
|
117
|
-
}
|
|
61
|
+
@include spacing-utilities();
|
|
62
|
+
@each $bp-name, $bp-value in variables.$breakpoints {
|
|
63
|
+
@include bp-up($bp-value) {
|
|
64
|
+
@include spacing-utilities('--#{$bp-name}-up');
|
|
118
65
|
}
|
|
119
66
|
}
|
|
@@ -102,8 +102,7 @@ a,
|
|
|
102
102
|
width: 1.5rem;
|
|
103
103
|
height: 1.5rem;
|
|
104
104
|
flex-shrink: 0;
|
|
105
|
-
margin-
|
|
106
|
-
margin-left: 0.25rem;
|
|
105
|
+
margin-inline: 0.25rem;
|
|
107
106
|
align-self: center;
|
|
108
107
|
}
|
|
109
108
|
|
|
@@ -160,7 +159,7 @@ button.pkt-link {
|
|
|
160
159
|
|
|
161
160
|
&--external:hover::after,
|
|
162
161
|
&:hover:not(.pkt-btn) pkt-icon,
|
|
163
|
-
&:hover:not(.pkt-btn) .pkt-icon
|
|
162
|
+
&:hover:not(.pkt-btn) .pkt-icon {
|
|
164
163
|
// #b3f5ff
|
|
165
164
|
filter: brightness(0) saturate(100%) invert(80%) sepia(54%) saturate(502%) hue-rotate(173deg) brightness(109%)
|
|
166
165
|
contrast(105%);
|
|
@@ -182,13 +181,11 @@ button.pkt-link {
|
|
|
182
181
|
}
|
|
183
182
|
|
|
184
183
|
@each $bp-name, $bp-value in variables.$breakpoints {
|
|
185
|
-
@
|
|
186
|
-
@
|
|
184
|
+
@include bp-up($bp-value) {
|
|
185
|
+
@each $name, $style in variables.$pkt-styles {
|
|
187
186
|
@include typography.generate-text-class('#{$name}--#{$bp-name}-up', $style);
|
|
188
187
|
}
|
|
189
|
-
|
|
190
|
-
@each $name, $style in variables.$pkt-font-weight {
|
|
191
|
-
@include bp('#{$bp-value}') {
|
|
188
|
+
@each $name, $style in variables.$pkt-font-weight {
|
|
192
189
|
@include typography.generate-text-class('#{$name}--#{$bp-name}-up', $style);
|
|
193
190
|
}
|
|
194
191
|
}
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
@each $name, $value in $breakpoints {
|
|
26
26
|
.pkt-hide-#{$name}-up,
|
|
27
27
|
.pkt-show.pkt-hide-#{$name}-up {
|
|
28
|
-
@include bp($value) {
|
|
28
|
+
@include bp-up($value) {
|
|
29
29
|
display: none !important;
|
|
30
30
|
}
|
|
31
31
|
}
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
.pkt-show-#{$name}-up,
|
|
34
34
|
.pkt-hide.pkt-show-#{$name}-up {
|
|
35
35
|
display: none !important;
|
|
36
|
-
@include bp(
|
|
36
|
+
@include bp-up($value) {
|
|
37
37
|
display: block !important;
|
|
38
38
|
}
|
|
39
39
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@oslokommune/punkt-css",
|
|
3
|
-
"version": "17.0.
|
|
3
|
+
"version": "17.0.4",
|
|
4
4
|
"description": "CSS-rammeverket til Punkt, et designsystem laget av Oslo Origo",
|
|
5
5
|
"homepage": "https://punkt.oslo.kommune.no",
|
|
6
6
|
"author": "Team Designsystem, Oslo Origo",
|
|
@@ -25,12 +25,12 @@
|
|
|
25
25
|
]
|
|
26
26
|
},
|
|
27
27
|
"devDependencies": {
|
|
28
|
-
"@oslokommune/punkt-assets": "^17.0.
|
|
28
|
+
"@oslokommune/punkt-assets": "^17.0.3",
|
|
29
29
|
"edit-json-file": "^1.8.1",
|
|
30
30
|
"fs-extra": "^11.3.5",
|
|
31
31
|
"prettier": "^3.8.4",
|
|
32
32
|
"sass": "^1.101.0",
|
|
33
|
-
"svgo": "^4.0.
|
|
33
|
+
"svgo": "^4.0.2",
|
|
34
34
|
"svgson": "^5.3.1"
|
|
35
35
|
},
|
|
36
36
|
"peerDependencies": {
|
|
@@ -60,7 +60,7 @@
|
|
|
60
60
|
},
|
|
61
61
|
"license": "MIT",
|
|
62
62
|
"dependencies": {
|
|
63
|
-
"astro": "^7.
|
|
63
|
+
"astro": "^7.2.0"
|
|
64
64
|
},
|
|
65
|
-
"gitHead": "
|
|
65
|
+
"gitHead": "13e41d75e4930d5903d126e4e6f592e15369076a"
|
|
66
66
|
}
|