@sb1/ffe-core 27.3.4 → 27.3.6

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 (2) hide show
  1. package/less/typography.less +34 -28
  2. package/package.json +2 -2
package/less/typography.less CHANGED
@@ -168,21 +168,21 @@
168
168
  font-size: var(--ffe-fontsize-h6);
169
169
  }
170
170
 
171
- .ffe-small-text {
171
+ .ffe-small-text,
172
+ .ffe-micro-text {
172
173
  color: var(--ffe-g-text-color);
173
174
  font-family: var(--ffe-g-font);
174
175
  font-weight: normal;
175
176
  font-variant-numeric: tabular-nums;
176
177
  line-height: 1.25rem;
178
+ margin: 0;
179
+ }
180
+
181
+ .ffe-small-text {
177
182
  font-size: var(--ffe-fontsize-small-text);
178
183
  }
179
184
 
180
185
  .ffe-micro-text {
181
- color: var(--ffe-g-text-color);
182
- font-family: var(--ffe-g-font);
183
- font-weight: normal;
184
- font-variant-numeric: tabular-nums;
185
- line-height: 1.25rem;
186
186
  font-size: var(--ffe-fontsize-micro-text);
187
187
  }
188
188
 
@@ -194,7 +194,7 @@
194
194
  .ffe-h6 {
195
195
  color: var(--ffe-g-heading-color);
196
196
  font-weight: normal;
197
- margin-bottom: @ffe-spacing-xs;
197
+ margin-bottom: var(--ffe-spacing-xs);
198
198
  margin-top: 0;
199
199
  text-wrap: balance;
200
200
  overflow-wrap: anywhere;
@@ -212,11 +212,11 @@
212
212
  }
213
213
 
214
214
  &--with-border {
215
- border-bottom: 1px solid @ffe-farge-lysgraa;
216
- padding-bottom: @ffe-spacing-xs;
215
+ border-bottom: 1px solid var(--ffe-farge-lysgraa);
216
+ padding-bottom: var(--ffe-spacing-xs);
217
217
  .native & {
218
218
  @media (prefers-color-scheme: dark) {
219
- border-color: @ffe-farge-graa;
219
+ border-color: var(--ffe-farge-graa);
220
220
  }
221
221
  }
222
222
  }
@@ -297,12 +297,14 @@
297
297
  text-decoration: none;
298
298
  word-wrap: break-all;
299
299
  line-height: 1em;
300
- transition: all @ffe-transition-duration @ffe-ease;
300
+ transition: all var(--ffe-transition-duration) var(--ffe-ease);
301
301
 
302
- &:hover {
303
- border-bottom-color: var(--ffe-g-link-color-hover);
304
- color: var(--ffe-g-link-color-hover);
305
- text-decoration: none;
302
+ @media (hover: hover) and (pointer: fine) {
303
+ &:hover {
304
+ border-bottom-color: var(--ffe-g-link-color-hover);
305
+ color: var(--ffe-g-link-color-hover);
306
+ text-decoration: none;
307
+ }
306
308
  }
307
309
 
308
310
  &:visited {
@@ -316,17 +318,17 @@
316
318
  }
317
319
 
318
320
  &:focus {
319
- border-color: @ffe-farge-hvit;
321
+ border-color: var(--ffe-farge-hvit);
322
+ color: var(--ffe-farge-hvit);
320
323
  border-radius: 1px;
321
324
  background-color: var(--ffe-g-link-color);
322
325
  box-shadow: 0 0 0 2px var(--ffe-g-link-color);
323
- color: @ffe-farge-hvit;
324
326
  outline: none;
325
327
 
326
328
  .native & {
327
329
  @media (prefers-color-scheme: dark) {
328
- border-color: @ffe-farge-svart !important;
329
- color: @ffe-farge-svart !important;
330
+ border-color: var(--ffe-farge-svart) !important;
331
+ color: var(--ffe-farge-svart) !important;
330
332
  }
331
333
  }
332
334
  }
@@ -338,10 +340,14 @@
338
340
  border-radius: 1.5rem;
339
341
  border: 2px solid transparent;
340
342
  outline: 0;
341
- padding: @ffe-spacing-2xs;
342
- &:hover {
343
- fill: var(--ffe-g-link-icon-color-hover);
343
+ padding: var(--ffe-spacing-2xs);
344
+
345
+ @media (hover: hover) and (pointer: fine) {
346
+ &:hover {
347
+ fill: var(--ffe-g-link-icon-color-hover);
348
+ }
344
349
  }
350
+
345
351
  &:focus {
346
352
  box-shadow: 0 0 0 2px var(--ffe-g-link-icon-color-focus);
347
353
  }
@@ -349,13 +355,13 @@
349
355
 
350
356
  .ffe-divider-line {
351
357
  border: none;
352
- border-bottom: solid 1px @ffe-farge-lysgraa;
358
+ border-bottom: solid 1px var(--ffe-farge-lysgraa);
353
359
  padding-top: 1px;
354
360
  padding-bottom: 1px;
355
361
  width: 100%;
356
362
  .native & {
357
363
  @media (prefers-color-scheme: dark) {
358
- border-color: @ffe-farge-graa;
364
+ border-color: var(--ffe-farge-graa);
359
365
  }
360
366
  }
361
367
  }
@@ -374,13 +380,13 @@
374
380
  }
375
381
 
376
382
  .ffe-pre-text {
377
- background-color: @ffe-farge-sand-70;
383
+ background-color: var(--ffe-farge-sand-70);
378
384
  font-family: consolas, menlo, monaco, monospace;
379
385
  margin: 0;
380
386
  text-align: left;
381
387
  .native & {
382
388
  @media (prefers-color-scheme: dark) {
383
- background-color: @ffe-farge-koksgraa;
389
+ background-color: var(--ffe-farge-koksgraa);
384
390
  }
385
391
  }
386
392
  }
@@ -420,7 +426,7 @@
420
426
  .ffe-h4,
421
427
  .ffe-h5,
422
428
  .ffe-h6 {
423
- margin-bottom: @ffe-spacing-sm;
429
+ margin-bottom: var(--ffe-spacing-sm);
424
430
 
425
431
  &--no-margin {
426
432
  margin: 0;
@@ -456,7 +462,7 @@
456
462
  .ffe-h4,
457
463
  .ffe-h5,
458
464
  .ffe-h6 {
459
- margin-bottom: @ffe-spacing-md;
465
+ margin-bottom: var(--ffe-spacing-md);
460
466
 
461
467
  &--no-margin {
462
468
  margin: 0;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sb1/ffe-core",
3
- "version": "27.3.4",
3
+ "version": "27.3.6",
4
4
  "description": "Rammeverk for Felles Front End",
5
5
  "license": "MIT",
6
6
  "author": "SpareBank 1",
@@ -31,5 +31,5 @@
31
31
  "publishConfig": {
32
32
  "access": "public"
33
33
  },
34
- "gitHead": "530c07f3d613834eb4d5309f53ec715a9ef83936"
34
+ "gitHead": "d9726eae887f19598f051c2f205506a0710b89e8"
35
35
  }