@bi-digital/css 0.12.3 → 0.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.
Files changed (4) hide show
  1. package/dist/components/card.css +41 -6
  2. package/dist/components.css +41 -6
  3. package/dist/salesforce.css +41 -6
  4. package/package.json +5 -5
package/dist/components/card.css CHANGED
@@ -17,7 +17,13 @@
17
17
  --bic-card-actions-icon-color: var(--bi-color-contrast);
18
18
  --bic-card-border-hover-color: var(--bi-color-stroke-contrast);
19
19
  --bic-card-box-shadow-hover-color: #0000000d;
20
+ --bic-card-box-shadow-hover: 0px 0px 0px var(--bi-stroke-thick) var(--bic-card-border-hover-color),
21
+ 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-hover-color),
22
+ 0px 0px 10px 0px var(--bic-card-box-shadow-hover-color);
20
23
  --bic-card-box-shadow-active-color: #0000000d;
24
+ --bic-card-box-shadow-active: 0px 0px 0px var(--bi-stroke-medium) var(--bi-states-focus),
25
+ 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-active-color),
26
+ 0px 0px 10px 0px var(--bic-card-box-shadow-active-color);
21
27
  width: 100%;
22
28
  box-shadow: var(--bic-card-box-shadow);
23
29
  border-radius: var(--bic-card-border-radius);
@@ -127,16 +133,12 @@
127
133
 
128
134
  @media (hover: hover) and (pointer: fine) {
129
135
  &:hover {
130
- box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bic-card-border-hover-color),
131
- 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-hover-color),
132
- 0px 0px 10px 0px var(--bic-card-box-shadow-hover-color);
136
+ box-shadow: var(--bic-card-box-shadow-hover);
133
137
  }
134
138
  }
135
139
 
136
140
  &:active {
137
- box-shadow: 0px 0px 0px var(--bi-stroke-medium) var(--bi-states-focus),
138
- 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-active-color),
139
- 0px 0px 10px 0px var(--bic-card-box-shadow-active-color);
141
+ box-shadow: var(--bic-card-box-shadow-active);
140
142
  }
141
143
  }
142
144
 
@@ -146,6 +148,33 @@
146
148
  }
147
149
  }
148
150
 
151
+ &[data-clickdelegatefor]:not([data-clickdelegatefor=""]), & .bi-card--content[data-clickdelegatefor]:not([data-clickdelegatefor=""]) {
152
+ cursor: pointer;
153
+ transition: box-shadow .25s ease-in-out;
154
+ position: relative;
155
+
156
+ @media (hover: hover) and (pointer: fine) {
157
+ &:has(.\:click-delegate-hover) {
158
+ box-shadow: var(--bic-card-box-shadow-hover);
159
+ }
160
+ }
161
+
162
+ &:has(.\:click-delegate-hover):active {
163
+ box-shadow: var(--bic-card-box-shadow-active);
164
+ }
165
+
166
+ &:has(.bi-card--header-title :is(a, button):focus-visible) {
167
+ box-shadow: var(--bic-card-box-shadow),
168
+ 0 0 0 4.5px var(--bi-states-focus-background);
169
+ outline: 3px solid var(--bi-states-focus);
170
+ outline-offset: 2px;
171
+
172
+ & * {
173
+ --_bi--focus: ;
174
+ }
175
+ }
176
+ }
177
+
149
178
  & .bi-card--actions {
150
179
  flex-direction: var(--bic-card-actions-flex-direction, column);
151
180
  justify-content: center;
@@ -218,6 +247,12 @@
218
247
  display: -webkit-box;
219
248
  overflow: hidden;
220
249
 
250
+ & a {
251
+ color: inherit;
252
+ outline: none;
253
+ text-decoration: none;
254
+ }
255
+
221
256
  @media (width < 768px) {
222
257
  font: var(--bi-font-title-bold-xs);
223
258
  }
package/dist/components.css CHANGED
@@ -343,7 +343,13 @@
343
343
  --bic-card-actions-icon-color: var(--bi-color-contrast);
344
344
  --bic-card-border-hover-color: var(--bi-color-stroke-contrast);
345
345
  --bic-card-box-shadow-hover-color: #0000000d;
346
+ --bic-card-box-shadow-hover: 0px 0px 0px var(--bi-stroke-thick) var(--bic-card-border-hover-color),
347
+ 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-hover-color),
348
+ 0px 0px 10px 0px var(--bic-card-box-shadow-hover-color);
346
349
  --bic-card-box-shadow-active-color: #0000000d;
350
+ --bic-card-box-shadow-active: 0px 0px 0px var(--bi-stroke-medium) var(--bi-states-focus),
351
+ 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-active-color),
352
+ 0px 0px 10px 0px var(--bic-card-box-shadow-active-color);
347
353
  width: 100%;
348
354
  box-shadow: var(--bic-card-box-shadow);
349
355
  border-radius: var(--bic-card-border-radius);
@@ -453,16 +459,12 @@
453
459
 
454
460
  @media (hover: hover) and (pointer: fine) {
455
461
  &:hover {
456
- box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bic-card-border-hover-color),
457
- 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-hover-color),
458
- 0px 0px 10px 0px var(--bic-card-box-shadow-hover-color);
462
+ box-shadow: var(--bic-card-box-shadow-hover);
459
463
  }
460
464
  }
461
465
 
462
466
  &:active {
463
- box-shadow: 0px 0px 0px var(--bi-stroke-medium) var(--bi-states-focus),
464
- 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-active-color),
465
- 0px 0px 10px 0px var(--bic-card-box-shadow-active-color);
467
+ box-shadow: var(--bic-card-box-shadow-active);
466
468
  }
467
469
  }
468
470
 
@@ -472,6 +474,33 @@
472
474
  }
473
475
  }
474
476
 
477
+ &[data-clickdelegatefor]:not([data-clickdelegatefor=""]), & .bi-card--content[data-clickdelegatefor]:not([data-clickdelegatefor=""]) {
478
+ cursor: pointer;
479
+ transition: box-shadow .25s ease-in-out;
480
+ position: relative;
481
+
482
+ @media (hover: hover) and (pointer: fine) {
483
+ &:has(.\:click-delegate-hover) {
484
+ box-shadow: var(--bic-card-box-shadow-hover);
485
+ }
486
+ }
487
+
488
+ &:has(.\:click-delegate-hover):active {
489
+ box-shadow: var(--bic-card-box-shadow-active);
490
+ }
491
+
492
+ &:has(.bi-card--header-title :is(a, button):focus-visible) {
493
+ box-shadow: var(--bic-card-box-shadow),
494
+ 0 0 0 4.5px var(--bi-states-focus-background);
495
+ outline: 3px solid var(--bi-states-focus);
496
+ outline-offset: 2px;
497
+
498
+ & * {
499
+ --_bi--focus: ;
500
+ }
501
+ }
502
+ }
503
+
475
504
  & .bi-card--actions {
476
505
  flex-direction: var(--bic-card-actions-flex-direction, column);
477
506
  justify-content: center;
@@ -544,6 +573,12 @@
544
573
  display: -webkit-box;
545
574
  overflow: hidden;
546
575
 
576
+ & a {
577
+ color: inherit;
578
+ outline: none;
579
+ text-decoration: none;
580
+ }
581
+
547
582
  @media (width < 768px) {
548
583
  font: var(--bi-font-title-bold-xs);
549
584
  }
package/dist/salesforce.css CHANGED
@@ -1066,7 +1066,13 @@
1066
1066
  --bic-card-actions-icon-color: var(--bi-color-contrast);
1067
1067
  --bic-card-border-hover-color: var(--bi-color-stroke-contrast);
1068
1068
  --bic-card-box-shadow-hover-color: #0000000d;
1069
+ --bic-card-box-shadow-hover: 0px 0px 0px var(--bi-stroke-thick) var(--bic-card-border-hover-color),
1070
+ 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-hover-color),
1071
+ 0px 0px 10px 0px var(--bic-card-box-shadow-hover-color);
1069
1072
  --bic-card-box-shadow-active-color: #0000000d;
1073
+ --bic-card-box-shadow-active: 0px 0px 0px var(--bi-stroke-medium) var(--bi-states-focus),
1074
+ 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-active-color),
1075
+ 0px 0px 10px 0px var(--bic-card-box-shadow-active-color);
1070
1076
  width: 100%;
1071
1077
  box-shadow: var(--bic-card-box-shadow);
1072
1078
  border-radius: var(--bic-card-border-radius);
@@ -1176,16 +1182,12 @@
1176
1182
 
1177
1183
  @media (hover: hover) and (pointer: fine) {
1178
1184
  &:hover {
1179
- box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bic-card-border-hover-color),
1180
- 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-hover-color),
1181
- 0px 0px 10px 0px var(--bic-card-box-shadow-hover-color);
1185
+ box-shadow: var(--bic-card-box-shadow-hover);
1182
1186
  }
1183
1187
  }
1184
1188
 
1185
1189
  &:active {
1186
- box-shadow: 0px 0px 0px var(--bi-stroke-medium) var(--bi-states-focus),
1187
- 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-active-color),
1188
- 0px 0px 10px 0px var(--bic-card-box-shadow-active-color);
1190
+ box-shadow: var(--bic-card-box-shadow-active);
1189
1191
  }
1190
1192
  }
1191
1193
 
@@ -1195,6 +1197,33 @@
1195
1197
  }
1196
1198
  }
1197
1199
 
1200
+ &[data-clickdelegatefor]:not([data-clickdelegatefor=""]), & .bi-card--content[data-clickdelegatefor]:not([data-clickdelegatefor=""]) {
1201
+ cursor: pointer;
1202
+ transition: box-shadow .25s ease-in-out;
1203
+ position: relative;
1204
+
1205
+ @media (hover: hover) and (pointer: fine) {
1206
+ &:has(.\:click-delegate-hover) {
1207
+ box-shadow: var(--bic-card-box-shadow-hover);
1208
+ }
1209
+ }
1210
+
1211
+ &:has(.\:click-delegate-hover):active {
1212
+ box-shadow: var(--bic-card-box-shadow-active);
1213
+ }
1214
+
1215
+ &:has(.bi-card--header-title :is(a, button):focus-visible) {
1216
+ box-shadow: var(--bic-card-box-shadow),
1217
+ 0 0 0 4.5px var(--bi-states-focus-background);
1218
+ outline: 3px solid var(--bi-states-focus);
1219
+ outline-offset: 2px;
1220
+
1221
+ & * {
1222
+ --_bi--focus: ;
1223
+ }
1224
+ }
1225
+ }
1226
+
1198
1227
  & .bi-card--actions {
1199
1228
  flex-direction: var(--bic-card-actions-flex-direction, column);
1200
1229
  justify-content: center;
@@ -1267,6 +1296,12 @@
1267
1296
  display: -webkit-box;
1268
1297
  overflow: hidden;
1269
1298
 
1299
+ & a {
1300
+ color: inherit;
1301
+ outline: none;
1302
+ text-decoration: none;
1303
+ }
1304
+
1270
1305
  @media (width < 768px) {
1271
1306
  font: var(--bi-font-title-bold-xs);
1272
1307
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@bi-digital/css",
3
3
  "type": "module",
4
- "version": "0.12.3",
4
+ "version": "0.12.4",
5
5
  "description": "CSS for the BI Design System",
6
6
  "author": "BI Digital",
7
7
  "homepage": "https://designsystem.bi.no/",
@@ -27,10 +27,10 @@
27
27
  "/dist"
28
28
  ],
29
29
  "devDependencies": {
30
- "browserslist": "^4.28.1",
31
- "lightningcss": "^1.32.0",
32
- "modern-normalize": "^3.0.1",
33
- "@bi-digital/tokens": "0.12.3"
30
+ "browserslist": "4.28.4",
31
+ "lightningcss": "1.33.0",
32
+ "modern-normalize": "3.0.1",
33
+ "@bi-digital/tokens": "0.12.4"
34
34
  },
35
35
  "scripts": {
36
36
  "build": "node config.js",