@navikt/aksel-stylelint 4.6.1 → 4.7.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/dist/index.css +248 -1
- package/dist/tokens.json +15 -0
- package/package.json +3 -3
package/dist/index.css
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
@charset "UTF-8";
|
|
2
2
|
/**
|
|
3
3
|
* Do not edit directly
|
|
4
|
-
* Generated on Mon,
|
|
4
|
+
* Generated on Mon, 17 Jul 2023 20:38:11 GMT
|
|
5
5
|
*/
|
|
6
6
|
:root, :host {
|
|
7
7
|
--a-spacing-05: 0.125rem;
|
|
@@ -3307,6 +3307,253 @@ body,
|
|
|
3307
3307
|
z-index: 1;
|
|
3308
3308
|
}
|
|
3309
3309
|
}
|
|
3310
|
+
.navds-combobox__wrapper {
|
|
3311
|
+
display: flex;
|
|
3312
|
+
flex-direction: column;
|
|
3313
|
+
width: 100%;
|
|
3314
|
+
position: relative;
|
|
3315
|
+
}
|
|
3316
|
+
.navds-combobox__wrapper-inner {
|
|
3317
|
+
position: relative;
|
|
3318
|
+
display: flex;
|
|
3319
|
+
flex-direction: row;
|
|
3320
|
+
justify-content: space-between;
|
|
3321
|
+
width: 100%;
|
|
3322
|
+
border: 1px solid black;
|
|
3323
|
+
}
|
|
3324
|
+
.navds-combobox__wrapper-inner > :first-child {
|
|
3325
|
+
flex: 2;
|
|
3326
|
+
}
|
|
3327
|
+
.navds-combobox__wrapper-inner > :last-child {
|
|
3328
|
+
display: flex;
|
|
3329
|
+
flex-flow: row nowrap;
|
|
3330
|
+
}
|
|
3331
|
+
.navds-form-field--small .navds-combobox__wrapper-inner {
|
|
3332
|
+
padding: var(--a-spacing-1) calc(var(--a-spacing-3) / 2);
|
|
3333
|
+
}
|
|
3334
|
+
.navds-combobox__wrapper-inner:hover {
|
|
3335
|
+
cursor: text;
|
|
3336
|
+
}
|
|
3337
|
+
.navds-combobox__selected-options {
|
|
3338
|
+
gap: var(--a-spacing-2);
|
|
3339
|
+
}
|
|
3340
|
+
.navds-combobox__selected-options > li {
|
|
3341
|
+
margin: auto 0;
|
|
3342
|
+
border-radius: var(--a-border-radius-full);
|
|
3343
|
+
}
|
|
3344
|
+
.navds-combobox__selected-options > li:last-of-type {
|
|
3345
|
+
display: flex;
|
|
3346
|
+
flex: 1;
|
|
3347
|
+
}
|
|
3348
|
+
.navds-combobox__selected-options--no-bg {
|
|
3349
|
+
font-family: inherit;
|
|
3350
|
+
font-size: var(--a-font-size-large);
|
|
3351
|
+
font-weight: var(--a-font-weight-regular);
|
|
3352
|
+
letter-spacing: 0;
|
|
3353
|
+
line-height: var(--a-font-line-height-large);
|
|
3354
|
+
margin: 0;
|
|
3355
|
+
padding-left: calc(0.5rem - 4px);
|
|
3356
|
+
}
|
|
3357
|
+
.navds-combobox__input-wrapper {
|
|
3358
|
+
width: 100%;
|
|
3359
|
+
}
|
|
3360
|
+
.navds-combobox__input {
|
|
3361
|
+
z-index: 1;
|
|
3362
|
+
flex: 1;
|
|
3363
|
+
border: none;
|
|
3364
|
+
padding: 0;
|
|
3365
|
+
margin: 0;
|
|
3366
|
+
min-width: 10ch;
|
|
3367
|
+
width: 100%;
|
|
3368
|
+
}
|
|
3369
|
+
.navds-combobox__input:focus-visible {
|
|
3370
|
+
outline: none;
|
|
3371
|
+
border: none;
|
|
3372
|
+
box-shadow: none;
|
|
3373
|
+
}
|
|
3374
|
+
.navds-combobox__wrapper-inner:has(.navds-combobox__input:focus-visible) {
|
|
3375
|
+
box-shadow: 0 0 0 1px var(--a-surface-default) inset, var(--a-shadow-focus);
|
|
3376
|
+
box-shadow: var(--a-shadow-focus);
|
|
3377
|
+
}
|
|
3378
|
+
.navds-combobox__wrapper-inner:has(.navds-combobox__input:focus-visible).navds-combobox__wrapper-inner--virtually-unfocused {
|
|
3379
|
+
box-shadow: none;
|
|
3380
|
+
}
|
|
3381
|
+
@supports not selector(:focus-visible) {
|
|
3382
|
+
.navds-combobox__input:focus-visible {
|
|
3383
|
+
outline: none;
|
|
3384
|
+
border: none;
|
|
3385
|
+
box-shadow: none;
|
|
3386
|
+
}
|
|
3387
|
+
|
|
3388
|
+
.navds-combobox__wrapper-inner:has(.navds-combobox__input:focus) {
|
|
3389
|
+
box-shadow: 0 0 0 1px var(--a-surface-default) inset, var(--a-shadow-focus);
|
|
3390
|
+
box-shadow: var(--a-shadow-focus);
|
|
3391
|
+
}
|
|
3392
|
+
|
|
3393
|
+
.navds-combobox__wrapper-inner:has(.navds-combobox__input:focus).navds-combobox__wrapper-inner--virtually-unfocused {
|
|
3394
|
+
box-shadow: none;
|
|
3395
|
+
}
|
|
3396
|
+
}
|
|
3397
|
+
.navds-combobox__button-clear {
|
|
3398
|
+
border-radius: var(--a-border-radius-medium);
|
|
3399
|
+
color: var(--ac-combobox-clear-icon, var(--a-text-subtle));
|
|
3400
|
+
display: flex;
|
|
3401
|
+
justify-content: center;
|
|
3402
|
+
align-items: center;
|
|
3403
|
+
cursor: pointer;
|
|
3404
|
+
background: none;
|
|
3405
|
+
border: none;
|
|
3406
|
+
font-size: 1rem;
|
|
3407
|
+
padding: 0;
|
|
3408
|
+
}
|
|
3409
|
+
.navds-combobox__button-clear svg {
|
|
3410
|
+
width: 1.5rem;
|
|
3411
|
+
height: 1.5rem;
|
|
3412
|
+
}
|
|
3413
|
+
.navds-combobox__input::-webkit-search-cancel-button {
|
|
3414
|
+
display: none;
|
|
3415
|
+
}
|
|
3416
|
+
.navds-combobox__button-toggle-list {
|
|
3417
|
+
border-radius: var(--a-border-radius-medium);
|
|
3418
|
+
color: var(--a-text-default);
|
|
3419
|
+
display: flex;
|
|
3420
|
+
justify-content: center;
|
|
3421
|
+
align-items: center;
|
|
3422
|
+
cursor: pointer;
|
|
3423
|
+
background: none;
|
|
3424
|
+
border: none;
|
|
3425
|
+
font-size: 1rem;
|
|
3426
|
+
padding: 0;
|
|
3427
|
+
}
|
|
3428
|
+
.navds-combobox__button-clear:active:hover,
|
|
3429
|
+
.navds-combobox__button-toggle-list:active:hover {
|
|
3430
|
+
color: var(--ac-combobox-clear-icon-active, var(--a-text-action));
|
|
3431
|
+
}
|
|
3432
|
+
.navds-combobox__button-clear:hover,
|
|
3433
|
+
.navds-combobox__button-toggle-list:hover {
|
|
3434
|
+
color: var(--ac-combobox-clear-icon-hover, var(--a-text-action-selected));
|
|
3435
|
+
}
|
|
3436
|
+
.navds-combobox__button-toggle-list:focus-visible {
|
|
3437
|
+
box-shadow: 0 0 0 1px var(--a-surface-default) inset, var(--a-shadow-focus);
|
|
3438
|
+
box-shadow: var(--a-shadow-focus);
|
|
3439
|
+
outline: none;
|
|
3440
|
+
}
|
|
3441
|
+
@supports not selector(:focus-visible) {
|
|
3442
|
+
.navds-combobox__button-toggle-list:focus {
|
|
3443
|
+
box-shadow: 0 0 0 1px var(--a-surface-default) inset, var(--a-shadow-focus);
|
|
3444
|
+
box-shadow: var(--a-shadow-focus);
|
|
3445
|
+
outline: none;
|
|
3446
|
+
}
|
|
3447
|
+
}
|
|
3448
|
+
.navds-combobox__button-toggle-list svg {
|
|
3449
|
+
width: 1.5rem;
|
|
3450
|
+
height: 1.5rem;
|
|
3451
|
+
pointer-events: none;
|
|
3452
|
+
}
|
|
3453
|
+
.navds-form-field--small .navds-combobox__button-toggle-list svg,
|
|
3454
|
+
.navds-form-field--small .navds-combobox__button-clear svg {
|
|
3455
|
+
width: 1.25rem;
|
|
3456
|
+
height: 1.25rem;
|
|
3457
|
+
}
|
|
3458
|
+
/* dropdown list */
|
|
3459
|
+
.navds-combobox__list {
|
|
3460
|
+
max-height: 290px;
|
|
3461
|
+
overflow-y: auto;
|
|
3462
|
+
position: absolute;
|
|
3463
|
+
left: 0;
|
|
3464
|
+
right: 0;
|
|
3465
|
+
z-index: 9999;
|
|
3466
|
+
top: calc(100% + var(--a-spacing-2));
|
|
3467
|
+
list-style: none;
|
|
3468
|
+
margin: 0;
|
|
3469
|
+
border: 1px solid var(--ac-combobox-list-border-color, var(--a-border-divider));
|
|
3470
|
+
display: flex;
|
|
3471
|
+
flex-direction: column;
|
|
3472
|
+
align-items: flex-start;
|
|
3473
|
+
padding: 0;
|
|
3474
|
+
box-shadow: var(--a-shadow-small);
|
|
3475
|
+
border-radius: 4px;
|
|
3476
|
+
gap: 4px 0;
|
|
3477
|
+
background-color: var(--ac-combobox-list-bg, var(--a-surface-default));
|
|
3478
|
+
color: var(--ac-combobox-list-text, var(--a-text-default));
|
|
3479
|
+
}
|
|
3480
|
+
.navds-combobox__list--closed {
|
|
3481
|
+
display: none;
|
|
3482
|
+
}
|
|
3483
|
+
.navds-combobox__list svg {
|
|
3484
|
+
height: 1.5rem;
|
|
3485
|
+
width: 1.5rem;
|
|
3486
|
+
}
|
|
3487
|
+
.navds-combobox__list-item,
|
|
3488
|
+
.navds-combobox__list-item__no-options,
|
|
3489
|
+
.navds-combobox__list-item__new-option {
|
|
3490
|
+
display: flex;
|
|
3491
|
+
flex-direction: row;
|
|
3492
|
+
justify-content: space-between;
|
|
3493
|
+
align-items: center;
|
|
3494
|
+
padding: var(--a-spacing-3);
|
|
3495
|
+
width: 100%;
|
|
3496
|
+
background-color: var(--ac-combobox-list-item-bg, var(--a-surface-default));
|
|
3497
|
+
}
|
|
3498
|
+
.navds-form-field--small .navds-combobox__list-item,
|
|
3499
|
+
.navds-form-field--small .navds-combobox__list-item__no-options,
|
|
3500
|
+
.navds-form-field--small .navds-combobox__list-item__new-option {
|
|
3501
|
+
padding: calc(var(--a-spacing-3) / 2) var(--a-spacing-2);
|
|
3502
|
+
}
|
|
3503
|
+
.navds-combobox__list-item--loading {
|
|
3504
|
+
display: flex;
|
|
3505
|
+
justify-content: center;
|
|
3506
|
+
padding: var(--a-spacing-3);
|
|
3507
|
+
background-color: var(--ac-combobox-list-item-loading-bg, var(--a-surface-default));
|
|
3508
|
+
width: 100%;
|
|
3509
|
+
}
|
|
3510
|
+
.navds-combobox__list-item--focus,
|
|
3511
|
+
.navds-combobox__list-item:hover {
|
|
3512
|
+
background-color: var(--ac-combobox-list-item-hover-bg, var(--a-surface-hover));
|
|
3513
|
+
cursor: pointer;
|
|
3514
|
+
border-left: 4px solid var(--ac-combobox-list-item-hover-border-left, var(--a-border-strong));
|
|
3515
|
+
padding-left: calc(var(--a-spacing-3) - 4px);
|
|
3516
|
+
}
|
|
3517
|
+
.navds-combobox__list-item--selected {
|
|
3518
|
+
background-color: var(--ac-combobox-list-item-selected-bg, var(--a-surface-selected));
|
|
3519
|
+
}
|
|
3520
|
+
.navds-combobox__list-item--selected.navds-combobox__list-item--focus,
|
|
3521
|
+
.navds-combobox__list-item--selected:hover {
|
|
3522
|
+
background-color: var(--ac-combobox-list-item-selected-hover-bg, var(--a-surface-action-subtle-hover));
|
|
3523
|
+
border-left: 4px solid var(--ac-combobox-list-item-selected-hover-border-left, var(--a-border-focus));
|
|
3524
|
+
padding-left: calc(var(--a-spacing-3) - 4px);
|
|
3525
|
+
}
|
|
3526
|
+
.navds-combobox__list-item__new-option {
|
|
3527
|
+
border-bottom: 1px solid var(--a-border-divider);
|
|
3528
|
+
background: var(--a-surface-neutral-subtle);
|
|
3529
|
+
cursor: pointer;
|
|
3530
|
+
justify-content: flex-start;
|
|
3531
|
+
gap: 0.25rem;
|
|
3532
|
+
}
|
|
3533
|
+
.navds-combobox__list-item__new-option:hover {
|
|
3534
|
+
border-bottom: 1px solid var(--a-border-divider);
|
|
3535
|
+
background: var(--a-surface-neutral-subtle-hover);
|
|
3536
|
+
}
|
|
3537
|
+
.navds-combobox__list-item__new-option--focus {
|
|
3538
|
+
box-shadow: var(--a-shadow-focus) inset, var(--a-border-action) 0 0 0 5px inset;
|
|
3539
|
+
border-radius: 3px;
|
|
3540
|
+
}
|
|
3541
|
+
/* Mobile */
|
|
3542
|
+
@media (max-width: 479px) {
|
|
3543
|
+
.navds-combobox__button-toggle-list {
|
|
3544
|
+
right: 0.5rem;
|
|
3545
|
+
}
|
|
3546
|
+
|
|
3547
|
+
/* add bigger click area for input */
|
|
3548
|
+
.navds-combobox__input {
|
|
3549
|
+
min-width: min-content;
|
|
3550
|
+
padding: 0.75rem 0;
|
|
3551
|
+
}
|
|
3552
|
+
|
|
3553
|
+
.navds-combobox__selected-options {
|
|
3554
|
+
gap: var(--a-spacing-1);
|
|
3555
|
+
}
|
|
3556
|
+
}
|
|
3310
3557
|
.navds-help-text__button {
|
|
3311
3558
|
margin: 0;
|
|
3312
3559
|
padding: 0;
|
package/dist/tokens.json
CHANGED
|
@@ -372,6 +372,21 @@
|
|
|
372
372
|
"--ac-search-button-focus-active-border": "--a-surface-default",
|
|
373
373
|
"--ac-search-error-border": "--a-border-danger"
|
|
374
374
|
},
|
|
375
|
+
"combobox": {
|
|
376
|
+
"--ac-combobox-clear-icon": "--a-text-subtle",
|
|
377
|
+
"--ac-combobox-clear-icon-hover": "--a-text-action-selected",
|
|
378
|
+
"--ac-combobox-clear-icon-active": "--a-text-action",
|
|
379
|
+
"--ac-combobox-list-bg": "--a-surface-default",
|
|
380
|
+
"--ac-combobox-list-text": "--a-text-default",
|
|
381
|
+
"--ac-combobox-list-border-color": "--a-border-divider",
|
|
382
|
+
"--ac-combobox-list-item-bg": "--a-surface-default",
|
|
383
|
+
"--ac-combobox-list-item-hover-bg": "--a-surface-hover",
|
|
384
|
+
"--ac-combobox-list-item-selected-bg": "--a-surface-default",
|
|
385
|
+
"--ac-combobox-list-item-selected-hover-bg": "--a-surface-action-subtle-hover",
|
|
386
|
+
"--ac-combobox-list-item-loading-bg": "--a-surface-default",
|
|
387
|
+
"--ac-combobox-list-item-hover-border-left": "--a-border-strong",
|
|
388
|
+
"--ac-combobox-list-item-selected-hover-border-left": "--a-border-focus"
|
|
389
|
+
},
|
|
375
390
|
"select": {
|
|
376
391
|
"--ac-select-bg": "--a-surface-default",
|
|
377
392
|
"--ac-select-text": "--a-text-default",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@navikt/aksel-stylelint",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.7.0",
|
|
4
4
|
"author": "Aksel | NAV",
|
|
5
5
|
"homepage": "https://aksel.nav.no/grunnleggende/kode/stylelint",
|
|
6
6
|
"repository": {
|
|
@@ -35,8 +35,8 @@
|
|
|
35
35
|
"dev": "yarn watch:lint"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
|
-
"@navikt/ds-css": "^4.
|
|
39
|
-
"@navikt/ds-tokens": "^4.
|
|
38
|
+
"@navikt/ds-css": "^4.7.0",
|
|
39
|
+
"@navikt/ds-tokens": "^4.7.0",
|
|
40
40
|
"@types/jest": "^29.0.0",
|
|
41
41
|
"concurrently": "7.2.1",
|
|
42
42
|
"copyfiles": "2.4.1",
|