@oslokommune/punkt-css 11.13.0 → 11.13.2
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 +22 -0
- package/dist/css/components/linkcard.css +14 -1
- package/dist/css/components/linkcard.min.css +1 -1
- package/dist/css/pkt-base.css +4 -1
- package/dist/css/pkt-base.min.css +1 -1
- package/dist/css/pkt-components.css +14 -1
- package/dist/css/pkt-components.min.css +1 -1
- package/dist/css/pkt.css +18 -2
- package/dist/css/pkt.min.css +1 -1
- package/dist/scss/base/_typography.scss +10 -13
- package/dist/scss/components/_linkcard.scss +23 -5
- package/package.json +3 -3
|
@@ -79,7 +79,7 @@ a,
|
|
|
79
79
|
}
|
|
80
80
|
|
|
81
81
|
.pkt-link {
|
|
82
|
-
display: inline
|
|
82
|
+
display: inline;
|
|
83
83
|
text-align: left;
|
|
84
84
|
align-items: center;
|
|
85
85
|
|
|
@@ -92,16 +92,19 @@ a,
|
|
|
92
92
|
}
|
|
93
93
|
|
|
94
94
|
&--icon-left {
|
|
95
|
+
display: inline-flex;
|
|
95
96
|
flex-direction: row;
|
|
96
97
|
text-decoration: none;
|
|
97
98
|
}
|
|
98
99
|
|
|
99
100
|
&--icon-right {
|
|
101
|
+
display: inline-flex;
|
|
100
102
|
flex-direction: row-reverse;
|
|
101
103
|
text-decoration: none;
|
|
102
104
|
}
|
|
103
105
|
|
|
104
106
|
&--external::after {
|
|
107
|
+
display: inline-block;
|
|
105
108
|
content: ' ';
|
|
106
109
|
--svg: url(#{variables.$icon-path}/new-window-small.svg);
|
|
107
110
|
background-image: var(--svg);
|
|
@@ -113,8 +116,8 @@ a,
|
|
|
113
116
|
|
|
114
117
|
&--external:hover::after {
|
|
115
118
|
// #1f42aa
|
|
116
|
-
filter: brightness(0) saturate(100%) invert(16%) sepia(99%) saturate(2420%)
|
|
117
|
-
|
|
119
|
+
filter: brightness(0) saturate(100%) invert(16%) sepia(99%) saturate(2420%) hue-rotate(222deg) brightness(93%)
|
|
120
|
+
contrast(90%);
|
|
118
121
|
}
|
|
119
122
|
}
|
|
120
123
|
|
|
@@ -136,8 +139,8 @@ button.pkt-link {
|
|
|
136
139
|
|
|
137
140
|
&--external:hover::after {
|
|
138
141
|
// #b3f5ff
|
|
139
|
-
filter: brightness(0) saturate(100%) invert(80%) sepia(54%) saturate(502%)
|
|
140
|
-
|
|
142
|
+
filter: brightness(0) saturate(100%) invert(80%) sepia(54%) saturate(502%) hue-rotate(173deg) brightness(109%)
|
|
143
|
+
contrast(105%);
|
|
141
144
|
}
|
|
142
145
|
}
|
|
143
146
|
}
|
|
@@ -158,18 +161,12 @@ button.pkt-link {
|
|
|
158
161
|
@each $bp-name, $bp-value in variables.$breakpoints {
|
|
159
162
|
@each $name, $style in variables.$pkt-styles {
|
|
160
163
|
@include bp('#{$bp-value}') {
|
|
161
|
-
@include typography.generate-text-class(
|
|
162
|
-
'#{$name}--#{$bp-name}-up',
|
|
163
|
-
$style
|
|
164
|
-
);
|
|
164
|
+
@include typography.generate-text-class('#{$name}--#{$bp-name}-up', $style);
|
|
165
165
|
}
|
|
166
166
|
}
|
|
167
167
|
@each $name, $style in variables.$pkt-font-weight {
|
|
168
168
|
@include bp('#{$bp-value}') {
|
|
169
|
-
@include typography.generate-text-class(
|
|
170
|
-
'#{$name}--#{$bp-name}-up',
|
|
171
|
-
$style
|
|
172
|
-
);
|
|
169
|
+
@include typography.generate-text-class('#{$name}--#{$bp-name}-up', $style);
|
|
173
170
|
}
|
|
174
171
|
}
|
|
175
172
|
}
|
|
@@ -51,11 +51,17 @@ $-linkcard-spacing-big: map.get(variables.$spacing, 'size-24');
|
|
|
51
51
|
@include get-text('pkt-txt-24-medium');
|
|
52
52
|
}
|
|
53
53
|
|
|
54
|
-
&.pkt-link--external
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
54
|
+
&.pkt-link--external {
|
|
55
|
+
display: inline-flex;
|
|
56
|
+
&::after {
|
|
57
|
+
height: 2.25rem;
|
|
58
|
+
width: 1.5rem;
|
|
59
|
+
background-size: 1.5rem 1.5rem;
|
|
60
|
+
background-position: center;
|
|
61
|
+
margin-left: 0.5rem;
|
|
62
|
+
flex: 1 0 auto;
|
|
63
|
+
align-self: flex-start;
|
|
64
|
+
}
|
|
59
65
|
}
|
|
60
66
|
}
|
|
61
67
|
|
|
@@ -105,6 +111,18 @@ $-linkcard-spacing-big: map.get(variables.$spacing, 'size-24');
|
|
|
105
111
|
}
|
|
106
112
|
}
|
|
107
113
|
|
|
114
|
+
&--green {
|
|
115
|
+
background-color: var(--pkt-color-surface-strong-light-green);
|
|
116
|
+
color: var(--pkt-color-text-body-dark) !important;
|
|
117
|
+
|
|
118
|
+
&:hover,
|
|
119
|
+
&:focus,
|
|
120
|
+
&:focus-visible,
|
|
121
|
+
&:active {
|
|
122
|
+
color: var(--pkt-color-brand-warm-blue-1000) !important;
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
|
|
108
126
|
&--grey-outline {
|
|
109
127
|
border: 4px solid var(--pkt-color-border-subtle);
|
|
110
128
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@oslokommune/punkt-css",
|
|
3
|
-
"version": "11.13.
|
|
3
|
+
"version": "11.13.2",
|
|
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",
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
"preview": "astro preview"
|
|
21
21
|
},
|
|
22
22
|
"devDependencies": {
|
|
23
|
-
"@oslokommune/punkt-assets": "^11.
|
|
23
|
+
"@oslokommune/punkt-assets": "^11.13.2",
|
|
24
24
|
"astro": "^2.8.1",
|
|
25
25
|
"edit-json-file": "^1.7.0",
|
|
26
26
|
"fs-extra": "^11.1.0",
|
|
@@ -55,5 +55,5 @@
|
|
|
55
55
|
"url": "https://github.com/oslokommune/punkt/issues"
|
|
56
56
|
},
|
|
57
57
|
"license": "MIT",
|
|
58
|
-
"gitHead": "
|
|
58
|
+
"gitHead": "6f42516f8ea54808ba227247a390d119aef1fbe5"
|
|
59
59
|
}
|