@inera/ids-design 5.2.2 → 5.3.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/components/breadcrumbs/breadcrumbs-lit.js +1 -1
- package/components/breadcrumbs/breadcrumbs.css +1 -1
- package/components/data-table/data-table-lit.js +1 -1
- package/components/data-table/data-table.css +1 -0
- package/components/dialog/dialog-lit.js +1 -1
- package/components/dialog/dialog.css +5 -1
- package/components/dropdown/dropdown-lit.js +1 -1
- package/components/dropdown/dropdown.css +2 -2
- package/components/expandable/expandable-lit.js +1 -1
- package/components/expandable/expandable.css +3 -0
- package/components/form/error-message/error-message-lit.js +1 -1
- package/components/form/error-message/error-message.css +2 -2
- package/components/form/select-multiple/select-multiple-lit.js +1 -1
- package/components/form/select-multiple/select-multiple.css +38 -38
- package/components/form/spinner/spinner-lit.js +1 -1
- package/components/form/spinner/spinner.css +2 -2
- package/components/header-1177/composite-header-1177.css +26 -18
- package/components/header-1177/header-1177-avatar-lit.js +1 -1
- package/components/header-1177/header-1177-avatar.css +8 -8
- package/components/header-1177/header-1177-item-lit.js +1 -1
- package/components/header-1177/header-1177-item.css +8 -0
- package/components/header-1177/header-1177-lit.js +1 -1
- package/components/header-1177/header-1177-nav-item-mobile-lit.js +1 -1
- package/components/header-1177/header-1177-nav-item-mobile.css +2 -2
- package/components/header-1177/header-1177.css +8 -8
- package/components/header-1177-admin/header-1177-admin-avatar-mobile-lit.js +1 -1
- package/components/header-1177-admin/header-1177-admin-avatar-mobile.css +3 -3
- package/components/header-1177-admin/header-1177-admin-item-lit.js +1 -1
- package/components/header-1177-admin/header-1177-admin-item.css +8 -0
- package/components/header-1177-admin/header-1177-admin-lit.js +1 -1
- package/components/header-1177-admin/header-1177-admin.css +2 -2
- package/components/header-1177-pro/header-1177-pro-avatar-mobile-lit.js +1 -1
- package/components/header-1177-pro/header-1177-pro-avatar-mobile.css +3 -3
- package/components/header-1177-pro/header-1177-pro-item-lit.js +1 -1
- package/components/header-1177-pro/header-1177-pro-item.css +8 -0
- package/components/header-1177-pro/header-1177-pro-nav-menu-mobile-lit.js +1 -1
- package/components/header-1177-pro/header-1177-pro-nav-menu-mobile.css +2 -2
- package/components/header-inera/header-inera-lit.js +1 -1
- package/components/header-inera/header-inera.css +4 -4
- package/components/header-inera-admin/composite-header-inera-admin.css +4 -4
- package/components/header-inera-admin/header-inera-admin-lit.js +1 -1
- package/components/header-inera-admin/header-inera-admin.css +4 -4
- package/components/list/list-lit.js +1 -1
- package/components/list/list.css +14 -15
- package/components/navigation/content/navigation-content-lit.js +1 -1
- package/components/navigation/content/navigation-content.css +19 -19
- package/components/navigation/local/navigation-local-lit.js +1 -1
- package/components/navigation/local/navigation-local.css +20 -18
- package/components/pagination/data-pagination/data-pagination-lit.js +1 -1
- package/components/pagination/data-pagination/data-pagination.css +5 -5
- package/components/pagination/list-pagination/list-pagination-lit.js +1 -1
- package/components/pagination/list-pagination/list-pagination.css +7 -7
- package/components/progressbar/progressbar-lit.js +1 -1
- package/components/progressbar/progressbar.css +3 -3
- package/components/side-menu/side-menu-lit.d.ts +2 -0
- package/components/side-menu/side-menu-lit.js +7 -0
- package/components/side-menu/side-menu.css +178 -0
- package/components/side-panel/side-panel-lit.js +1 -1
- package/components/side-panel/side-panel.css +286 -35
- package/components/stepper/stepper-lit.js +1 -1
- package/components/stepper/stepper.css +19 -19
- package/components/tabs/tabs-lit.js +1 -1
- package/components/tooltip/tooltip-lit.js +1 -1
- package/components/tooltip/tooltip.css +2 -2
- package/global/global.css +344 -307
- package/package.json +1 -1
- package/themes/1177/1177.css +662 -674
- package/themes/1177-pro/1177-pro.css +689 -691
- package/themes/inera/inera.css +632 -602
- package/themes/inera-admin/inera-admin.css +645 -602
package/themes/1177/1177.css
CHANGED
|
@@ -2348,8 +2348,8 @@ body.ids {
|
|
|
2348
2348
|
|
|
2349
2349
|
.ids-link {
|
|
2350
2350
|
font-family: var(--IDS-LINK--FONT-FAMILY);
|
|
2351
|
-
color: var(--
|
|
2352
|
-
text-decoration-color: var(--
|
|
2351
|
+
color: var(--IDS-LINK--COLORPRESET-1__COLOR);
|
|
2352
|
+
text-decoration-color: var(--IDS-LINK--COLORPRESET-1__COLOR);
|
|
2353
2353
|
line-height: 1.5rem;
|
|
2354
2354
|
gap: 8px;
|
|
2355
2355
|
cursor: pointer;
|
|
@@ -2361,13 +2361,13 @@ body.ids {
|
|
|
2361
2361
|
.ids-link:not(:has(.ids-icon)) {
|
|
2362
2362
|
text-decoration: underline;
|
|
2363
2363
|
}
|
|
2364
|
-
.ids-link:focus
|
|
2364
|
+
.ids-link:focus {
|
|
2365
2365
|
outline: var(--IDS-FOCUS_OUTLINE);
|
|
2366
2366
|
outline-offset: var(--IDS-FOCUS_OUTLINE-OFFSET) !important;
|
|
2367
2367
|
}
|
|
2368
2368
|
.ids-link:hover, .ids-link:focus {
|
|
2369
2369
|
text-decoration: underline !important;
|
|
2370
|
-
color: var(--
|
|
2370
|
+
color: var(--IDS-LINK--COLORPRESET-1__HOVER-COLOR);
|
|
2371
2371
|
}
|
|
2372
2372
|
.ids-link:hover .ids-link__icon:has(+ .ids-link__icon--hover), .ids-link:focus .ids-link__icon:has(+ .ids-link__icon--hover) {
|
|
2373
2373
|
display: none;
|
|
@@ -2395,10 +2395,10 @@ body.ids {
|
|
|
2395
2395
|
padding: 0.188rem;
|
|
2396
2396
|
}
|
|
2397
2397
|
.ids-link.ids-link--active-icon.ids-link--active .ids-icon {
|
|
2398
|
-
background-color: var(--
|
|
2398
|
+
background-color: var(--IDS-LINK-ICON--COLORPRESET-1-ACTIVE__BACKGROUND-COLOR);
|
|
2399
2399
|
}
|
|
2400
2400
|
.ids-link.ids-link--active-icon:hover .ids-icon, .ids-link.ids-link--active-icon:focus-within .ids-icon {
|
|
2401
|
-
background-color: var(--
|
|
2401
|
+
background-color: var(--IDS-LINK-ICON--COLORPRESET-1-ACTIVE__HOVER-BACKGROUND-COLOR);
|
|
2402
2402
|
}
|
|
2403
2403
|
.ids-link.ids-link--active-icon.ids-link--color-2 .ids-icon {
|
|
2404
2404
|
margin-top: 0.25rem;
|
|
@@ -2411,18 +2411,18 @@ body.ids {
|
|
|
2411
2411
|
padding: 0.188rem;
|
|
2412
2412
|
}
|
|
2413
2413
|
.ids-link.ids-link--active-icon.ids-link--color-2.ids-link--active .ids-icon {
|
|
2414
|
-
background-color: var(--
|
|
2414
|
+
background-color: var(--IDS-LINK-ICON--COLORPRESET-2-ACTIVE__ACTIVE-BACKGROUND-COLOR);
|
|
2415
2415
|
}
|
|
2416
2416
|
.ids-link.ids-link--active-icon.ids-link--color-2:hover .ids-icon, .ids-link.ids-link--active-icon.ids-link--color-2:focus-within .ids-icon {
|
|
2417
|
-
background-color: var(--
|
|
2417
|
+
background-color: var(--IDS-LINK-ICON--COLORPRESET-2-ACTIVE__HOVER-BACKGROUND-COLOR);
|
|
2418
2418
|
}
|
|
2419
2419
|
.ids-link.ids-link--color-2 {
|
|
2420
|
-
color: var(--
|
|
2421
|
-
text-decoration-color: var(--
|
|
2420
|
+
color: var(--IDS-LINK--COLORPRESET-2__COLOR);
|
|
2421
|
+
text-decoration-color: var(--IDS-LINK--COLORPRESET-2__COLOR);
|
|
2422
2422
|
}
|
|
2423
2423
|
.ids-link.ids-link--color-2:hover, .ids-link.ids-link--color-2:focus {
|
|
2424
|
-
color: var(--
|
|
2425
|
-
text-decoration-color: var(--
|
|
2424
|
+
color: var(--IDS-LINK--COLORPRESET-2__HOVER-COLOR);
|
|
2425
|
+
text-decoration-color: var(--IDS-LINK--COLORPRESET-2__HOVER-COLOR);
|
|
2426
2426
|
}
|
|
2427
2427
|
.ids-link.ids-link--light {
|
|
2428
2428
|
color: white !important;
|
|
@@ -2456,9 +2456,9 @@ body.ids {
|
|
|
2456
2456
|
.ids-button[disabled],
|
|
2457
2457
|
.ids button.ids-button.ids-button--disabled,
|
|
2458
2458
|
.ids button.ids-button[disabled] {
|
|
2459
|
-
color: var(--
|
|
2460
|
-
border: var(--
|
|
2461
|
-
background-color:
|
|
2459
|
+
color: var(--IDS-BUTTON--DISABLED__COLOR) !important;
|
|
2460
|
+
border: var(--IDS-BUTTON--DISABLED__BORDER) !important;
|
|
2461
|
+
background-color: var(--IDS-COLOR-NEUTRAL-100) !important;
|
|
2462
2462
|
}
|
|
2463
2463
|
|
|
2464
2464
|
.ids button.ids-button {
|
|
@@ -2486,29 +2486,28 @@ body.ids {
|
|
|
2486
2486
|
.ids-button,
|
|
2487
2487
|
.ids button.ids-button {
|
|
2488
2488
|
text-align: center;
|
|
2489
|
-
background-color: var(--
|
|
2490
|
-
border: var(--
|
|
2491
|
-
border-radius: var(--
|
|
2489
|
+
background-color: var(--IDS-BUTTON__BACKGROUND-COLOR);
|
|
2490
|
+
border: var(--IDS-BUTTON__BORDER);
|
|
2491
|
+
border-radius: var(--IDS-BUTTON__BORDER-RADIUS);
|
|
2492
2492
|
text-decoration: none;
|
|
2493
2493
|
box-sizing: border-box;
|
|
2494
|
-
color:
|
|
2494
|
+
color: var(--IDS-COLOR-NEUTRAL-100);
|
|
2495
2495
|
cursor: pointer;
|
|
2496
|
-
padding: var(--btn-m_padding);
|
|
2497
2496
|
gap: 8px;
|
|
2498
2497
|
display: inline-flex;
|
|
2499
2498
|
justify-content: center;
|
|
2500
2499
|
align-items: center;
|
|
2501
|
-
|
|
2502
|
-
|
|
2500
|
+
padding: var(--IDS-BUTTON--M__PADDING);
|
|
2501
|
+
line-height: var(--IDS-BUTTON--M__LINE-HEIGHT);
|
|
2502
|
+
font-size: var(--IDS-BUTTON--M__FONT-SIZE);
|
|
2503
|
+
font-family: var(--IDS-BUTTON__FONT-FAMILY);
|
|
2504
|
+
font-weight: var(--IDS-BUTTON__FONT-WEIGHT);
|
|
2503
2505
|
text-transform: uppercase;
|
|
2504
2506
|
user-select: none;
|
|
2505
2507
|
-webkit-user-select: none;
|
|
2506
2508
|
-khtml-user-select: none;
|
|
2507
2509
|
-moz-user-select: none;
|
|
2508
2510
|
-ms-user-select: none;
|
|
2509
|
-
font-size: 1rem;
|
|
2510
|
-
min-height: var(--btn-m_height);
|
|
2511
|
-
line-height: 22px;
|
|
2512
2511
|
}
|
|
2513
2512
|
.ids .ids-button:hover, .ids .ids-button:active, .ids .ids-button:focus, .ids .ids-button.ids-button--active,
|
|
2514
2513
|
.ids-button:hover,
|
|
@@ -2519,22 +2518,22 @@ body.ids {
|
|
|
2519
2518
|
.ids button.ids-button:active,
|
|
2520
2519
|
.ids button.ids-button:focus,
|
|
2521
2520
|
.ids button.ids-button.ids-button--active {
|
|
2522
|
-
background-color: var(--
|
|
2523
|
-
box-shadow: var(--
|
|
2521
|
+
background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
|
|
2522
|
+
box-shadow: var(--IDS-BUTTON--ACTIVE__BOX-SHADOW);
|
|
2524
2523
|
}
|
|
2525
2524
|
.ids .ids-button.ids-button--s,
|
|
2526
2525
|
.ids-button.ids-button--s,
|
|
2527
2526
|
.ids button.ids-button.ids-button--s {
|
|
2528
|
-
font-size:
|
|
2529
|
-
|
|
2530
|
-
padding: var(--
|
|
2527
|
+
font-size: var(--IDS-BUTTON--S__FONT-SIZE);
|
|
2528
|
+
line-height: var(--IDS-BUTTON--S__LINE-HEIGHT);
|
|
2529
|
+
padding: var(--IDS-BUTTON--S__PADDING);
|
|
2531
2530
|
}
|
|
2532
2531
|
.ids .ids-button.ids-button--l,
|
|
2533
2532
|
.ids-button.ids-button--l,
|
|
2534
2533
|
.ids button.ids-button.ids-button--l {
|
|
2535
|
-
font-size:
|
|
2536
|
-
|
|
2537
|
-
padding: var(--
|
|
2534
|
+
font-size: var(--IDS-BUTTON--L__FONT-SIZE);
|
|
2535
|
+
line-height: var(--IDS-BUTTON--L__LINE-HEIGHT);
|
|
2536
|
+
padding: var(--IDS-BUTTON--L__PADDING);
|
|
2538
2537
|
}
|
|
2539
2538
|
.ids .ids-button.ids-button--loading,
|
|
2540
2539
|
.ids-button.ids-button--loading,
|
|
@@ -2544,23 +2543,23 @@ body.ids {
|
|
|
2544
2543
|
.ids .ids-button.ids-button--secondary,
|
|
2545
2544
|
.ids-button.ids-button--secondary,
|
|
2546
2545
|
.ids button.ids-button.ids-button--secondary {
|
|
2547
|
-
background-color:
|
|
2548
|
-
border: var(--
|
|
2549
|
-
color: var(--
|
|
2550
|
-
|
|
2551
|
-
padding: var(--
|
|
2546
|
+
background-color: var(--IDS-COLOR-NEUTRAL-100);
|
|
2547
|
+
border: var(--IDS-BUTTON--SECONDARY__BORDER);
|
|
2548
|
+
color: var(--IDS-BUTTON--SECONDARY__COLOR);
|
|
2549
|
+
line-height: var(--IDS-BUTTON--M__LINE-HEIGHT);
|
|
2550
|
+
padding: var(--IDS-BUTTON--M__PADDING);
|
|
2552
2551
|
}
|
|
2553
2552
|
.ids .ids-button.ids-button--secondary.ids-button--s,
|
|
2554
2553
|
.ids-button.ids-button--secondary.ids-button--s,
|
|
2555
2554
|
.ids button.ids-button.ids-button--secondary.ids-button--s {
|
|
2556
|
-
|
|
2557
|
-
padding: var(--
|
|
2555
|
+
line-height: var(--IDS-BUTTON--S__LINE-HEIGHT);
|
|
2556
|
+
padding: var(--IDS-BUTTON--S__PADDING);
|
|
2558
2557
|
}
|
|
2559
2558
|
.ids .ids-button.ids-button--secondary.ids-button--l,
|
|
2560
2559
|
.ids-button.ids-button--secondary.ids-button--l,
|
|
2561
2560
|
.ids button.ids-button.ids-button--secondary.ids-button--l {
|
|
2562
|
-
|
|
2563
|
-
padding: var(--
|
|
2561
|
+
line-height: var(--IDS-BUTTON--L__LINE-HEIGHT);
|
|
2562
|
+
padding: var(--IDS-BUTTON--L__PADDING);
|
|
2564
2563
|
}
|
|
2565
2564
|
.ids .ids-button.ids-button--secondary.ids-button--active, .ids .ids-button.ids-button--secondary:hover, .ids .ids-button.ids-button--secondary:focus, .ids .ids-button.ids-button--secondary:active,
|
|
2566
2565
|
.ids-button.ids-button--secondary.ids-button--active,
|
|
@@ -2571,22 +2570,33 @@ body.ids {
|
|
|
2571
2570
|
.ids button.ids-button.ids-button--secondary:hover,
|
|
2572
2571
|
.ids button.ids-button.ids-button--secondary:focus,
|
|
2573
2572
|
.ids button.ids-button.ids-button--secondary:active {
|
|
2574
|
-
background-color: var(--
|
|
2575
|
-
color:
|
|
2576
|
-
border: 1px solid var(--
|
|
2573
|
+
background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
|
|
2574
|
+
color: var(--IDS-COLOR-NEUTRAL-100);
|
|
2575
|
+
border: 1px solid var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
|
|
2577
2576
|
}
|
|
2578
2577
|
.ids .ids-button.ids-button--tertiary,
|
|
2579
2578
|
.ids-button.ids-button--tertiary,
|
|
2580
2579
|
.ids button.ids-button.ids-button--tertiary {
|
|
2581
2580
|
background: transparent;
|
|
2582
|
-
border-radius:
|
|
2583
|
-
border:
|
|
2584
|
-
color: var(--
|
|
2581
|
+
border-radius: 0;
|
|
2582
|
+
border: 1px solid transparent;
|
|
2583
|
+
color: var(--IDS-BUTTON--TERTIARY__COLOR);
|
|
2585
2584
|
box-shadow: none;
|
|
2586
|
-
line-height: 22px;
|
|
2587
2585
|
font-family: var(--font-family_2);
|
|
2588
2586
|
text-decoration: underline;
|
|
2589
2587
|
}
|
|
2588
|
+
.ids .ids-button.ids-button--tertiary.ids-button--s,
|
|
2589
|
+
.ids-button.ids-button--tertiary.ids-button--s,
|
|
2590
|
+
.ids button.ids-button.ids-button--tertiary.ids-button--s {
|
|
2591
|
+
line-height: var(--IDS-BUTTON--S__LINE-HEIGHT);
|
|
2592
|
+
padding: var(--IDS-BUTTON--S__PADDING);
|
|
2593
|
+
}
|
|
2594
|
+
.ids .ids-button.ids-button--tertiary.ids-button--l,
|
|
2595
|
+
.ids-button.ids-button--tertiary.ids-button--l,
|
|
2596
|
+
.ids button.ids-button.ids-button--tertiary.ids-button--l {
|
|
2597
|
+
line-height: var(--IDS-BUTTON--L__LINE-HEIGHT);
|
|
2598
|
+
padding: var(--IDS-BUTTON--L__PADDING);
|
|
2599
|
+
}
|
|
2590
2600
|
.ids .ids-button.ids-button--tertiary.ids-button--active, .ids .ids-button.ids-button--tertiary:hover, .ids .ids-button.ids-button--tertiary:active, .ids .ids-button.ids-button--tertiary:focus,
|
|
2591
2601
|
.ids-button.ids-button--tertiary.ids-button--active,
|
|
2592
2602
|
.ids-button.ids-button--tertiary:hover,
|
|
@@ -2596,9 +2606,10 @@ body.ids {
|
|
|
2596
2606
|
.ids button.ids-button.ids-button--tertiary:hover,
|
|
2597
2607
|
.ids button.ids-button.ids-button--tertiary:active,
|
|
2598
2608
|
.ids button.ids-button.ids-button--tertiary:focus {
|
|
2599
|
-
background-color: var(--
|
|
2600
|
-
color:
|
|
2601
|
-
border-radius: var(--
|
|
2609
|
+
background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
|
|
2610
|
+
color: var(--IDS-COLOR-NEUTRAL-100);
|
|
2611
|
+
border-radius: var(--IDS-BUTTON__BORDER-RADIUS);
|
|
2612
|
+
border: 1px solid var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
|
|
2602
2613
|
}
|
|
2603
2614
|
.ids .ids-button.ids-button--tertiary.ids-button--disabled, .ids .ids-button.ids-button--tertiary[disabled],
|
|
2604
2615
|
.ids-button.ids-button--tertiary.ids-button--disabled,
|
|
@@ -2607,15 +2618,9 @@ body.ids {
|
|
|
2607
2618
|
.ids button.ids-button.ids-button--tertiary[disabled] {
|
|
2608
2619
|
border: none !important;
|
|
2609
2620
|
text-decoration: underline !important;
|
|
2610
|
-
color: var(--
|
|
2621
|
+
color: var(--IDS-BUTTON--DISABLED__COLOR);
|
|
2611
2622
|
text-decoration: none;
|
|
2612
2623
|
}
|
|
2613
|
-
.ids .ids-button.ids-button--submit,
|
|
2614
|
-
.ids-button.ids-button--submit,
|
|
2615
|
-
.ids button.ids-button.ids-button--submit {
|
|
2616
|
-
height: 3.75em !important;
|
|
2617
|
-
border-radius: var(--btn-submit_border-radius);
|
|
2618
|
-
}
|
|
2619
2624
|
.ids .ids-button.ids-button--icon, .ids .ids-button.ids-button--fab,
|
|
2620
2625
|
.ids-button.ids-button--icon,
|
|
2621
2626
|
.ids-button.ids-button--fab,
|
|
@@ -2626,9 +2631,9 @@ body.ids {
|
|
|
2626
2631
|
border-radius: 100%;
|
|
2627
2632
|
font-style: normal;
|
|
2628
2633
|
font-weight: 400;
|
|
2629
|
-
line-height:
|
|
2634
|
+
line-height: 0 !important;
|
|
2630
2635
|
font-size: 20px;
|
|
2631
|
-
padding:
|
|
2636
|
+
padding: 0 !important;
|
|
2632
2637
|
justify-content: center;
|
|
2633
2638
|
}
|
|
2634
2639
|
.ids .ids-button.ids-button--icon.ids-button--s, .ids .ids-button.ids-button--fab.ids-button--s,
|
|
@@ -2650,14 +2655,14 @@ body.ids {
|
|
|
2650
2655
|
.ids .ids-button.ids-button--fab,
|
|
2651
2656
|
.ids-button.ids-button--fab,
|
|
2652
2657
|
.ids button.ids-button.ids-button--fab {
|
|
2653
|
-
background-color:
|
|
2654
|
-
border: var(--
|
|
2655
|
-
filter: drop-shadow(
|
|
2658
|
+
background-color: var(--IDS-COLOR-NEUTRAL-100);
|
|
2659
|
+
border: var(--IDS-BUTTON--FAB__BORDER);
|
|
2660
|
+
filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.3));
|
|
2656
2661
|
}
|
|
2657
2662
|
.ids .ids-button.ids-button--icon.ids-button--secondary,
|
|
2658
2663
|
.ids-button.ids-button--icon.ids-button--secondary,
|
|
2659
2664
|
.ids button.ids-button.ids-button--icon.ids-button--secondary {
|
|
2660
|
-
background-color: var(--
|
|
2665
|
+
background-color: var(--IDS-BUTTON--SECONDARY__ICON-BACKGROUND-COLOR);
|
|
2661
2666
|
}
|
|
2662
2667
|
.ids .ids-button.ids-button--icon.ids-button--active, .ids .ids-button.ids-button--icon:hover, .ids .ids-button.ids-button--icon:active, .ids .ids-button.ids-button--icon:focus,
|
|
2663
2668
|
.ids-button.ids-button--icon.ids-button--active,
|
|
@@ -2668,37 +2673,69 @@ body.ids {
|
|
|
2668
2673
|
.ids button.ids-button.ids-button--icon:hover,
|
|
2669
2674
|
.ids button.ids-button.ids-button--icon:active,
|
|
2670
2675
|
.ids button.ids-button.ids-button--icon:focus {
|
|
2671
|
-
background-color: var(--
|
|
2672
|
-
color:
|
|
2676
|
+
background-color: var(--IDS-BUTTON--SECONDARY-HOVER__ICON-BACKGROUND-COLOR);
|
|
2677
|
+
color: var(--IDS-COLOR-NEUTRAL-100);
|
|
2673
2678
|
}
|
|
2674
2679
|
.ids .ids-button.ids-button--submit,
|
|
2675
2680
|
.ids-button.ids-button--submit,
|
|
2676
2681
|
.ids button.ids-button.ids-button--submit {
|
|
2677
|
-
|
|
2678
|
-
|
|
2679
|
-
|
|
2682
|
+
border-radius: var(--IDS-BUTTON--SUBMIT__BORDER-RADIUS);
|
|
2683
|
+
font-size: var(--IDS-BUTTON--SUBMIT-S__FONT-SIZE);
|
|
2684
|
+
height: var(--IDS-BUTTON--SUBMIT-S__HEIGHT);
|
|
2685
|
+
padding: var(--IDS-BUTTON--SUBMIT-S__PADDING);
|
|
2686
|
+
}
|
|
2687
|
+
.ids .ids-button.ids-button--submit.ids-button--s,
|
|
2688
|
+
.ids-button.ids-button--submit.ids-button--s,
|
|
2689
|
+
.ids button.ids-button.ids-button--submit.ids-button--s {
|
|
2690
|
+
height: var(--IDS-BUTTON--SEARCH-M__HEIGHT);
|
|
2691
|
+
font-size: var(--IDS-BUTTON--SEARCH-M__FONT-SIZE);
|
|
2692
|
+
padding: var(--IDS-BUTTON--SEARCH-M__PADDING);
|
|
2693
|
+
}
|
|
2694
|
+
@media (min-width: 1024px) {
|
|
2695
|
+
.ids .ids-button.ids-button--submit,
|
|
2696
|
+
.ids-button.ids-button--submit,
|
|
2697
|
+
.ids button.ids-button.ids-button--submit {
|
|
2698
|
+
height: var(--IDS-BUTTON--SUBMIT-L__HEIGHT);
|
|
2699
|
+
padding: var(--IDS-BUTTON--SUBMIT-L__PADDING);
|
|
2700
|
+
font-size: var(--IDS-BUTTON--SUBMIT-L__FONT-SIZE);
|
|
2701
|
+
}
|
|
2702
|
+
.ids .ids-button.ids-button--submit.ids-button--s,
|
|
2703
|
+
.ids-button.ids-button--submit.ids-button--s,
|
|
2704
|
+
.ids button.ids-button.ids-button--submit.ids-button--s {
|
|
2705
|
+
height: var(--IDS-BUTTON--SEARCH-M__HEIGHT);
|
|
2706
|
+
font-size: var(--IDS-BUTTON--SEARCH-M__FONT-SIZE);
|
|
2707
|
+
padding: var(--IDS-BUTTON--SEARCH-M__PADDING);
|
|
2708
|
+
}
|
|
2680
2709
|
}
|
|
2681
2710
|
.ids .ids-button.ids-button--search,
|
|
2682
2711
|
.ids-button.ids-button--search,
|
|
2683
2712
|
.ids button.ids-button.ids-button--search {
|
|
2684
|
-
|
|
2685
|
-
|
|
2686
|
-
|
|
2687
|
-
|
|
2713
|
+
border-radius: var(--IDS-BUTTON--SEARCH__BORDER-RADIUS);
|
|
2714
|
+
font-size: var(--IDS-BUTTON--SEARCH-S__FONT-SIZE);
|
|
2715
|
+
height: var(--IDS-BUTTON--SEARCH-S__HEIGHT);
|
|
2716
|
+
padding: var(--IDS-BUTTON--SEARCH-S__PADDING);
|
|
2688
2717
|
}
|
|
2689
2718
|
.ids .ids-button.ids-button--search.ids-button--s,
|
|
2690
2719
|
.ids-button.ids-button--search.ids-button--s,
|
|
2691
2720
|
.ids button.ids-button.ids-button--search.ids-button--s {
|
|
2692
|
-
height: var(--
|
|
2693
|
-
font-size: var(--
|
|
2721
|
+
height: var(--IDS-BUTTON--SEARCH-M__HEIGHT);
|
|
2722
|
+
font-size: var(--IDS-BUTTON--SEARCH-M__FONT-SIZE);
|
|
2723
|
+
padding: var(--IDS-BUTTON--SEARCH-M__PADDING);
|
|
2694
2724
|
}
|
|
2695
|
-
@media (
|
|
2725
|
+
@media (min-width: 1024px) {
|
|
2696
2726
|
.ids .ids-button.ids-button--search,
|
|
2697
2727
|
.ids-button.ids-button--search,
|
|
2698
2728
|
.ids button.ids-button.ids-button--search {
|
|
2699
|
-
|
|
2700
|
-
padding:
|
|
2701
|
-
|
|
2729
|
+
height: var(--IDS-BUTTON--SEARCH-L__HEIGHT);
|
|
2730
|
+
padding: var(--IDS-BUTTON--SEARCH-L__PADDING);
|
|
2731
|
+
font-size: var(--IDS-BUTTON--SEARCH-L__FONT-SIZE);
|
|
2732
|
+
}
|
|
2733
|
+
.ids .ids-button.ids-button--search.ids-button--s,
|
|
2734
|
+
.ids-button.ids-button--search.ids-button--s,
|
|
2735
|
+
.ids button.ids-button.ids-button--search.ids-button--s {
|
|
2736
|
+
height: var(--IDS-BUTTON--SEARCH-M__HEIGHT);
|
|
2737
|
+
font-size: var(--IDS-BUTTON--SEARCH-M__FONT-SIZE);
|
|
2738
|
+
padding: var(--IDS-BUTTON--SEARCH-M__PADDING);
|
|
2702
2739
|
}
|
|
2703
2740
|
}
|
|
2704
2741
|
.ids .ids-button.ids-button--block,
|
|
@@ -2767,7 +2804,6 @@ body.ids {
|
|
|
2767
2804
|
border: 1px solid var(--IDS-COLOR-ACCENT-40);
|
|
2768
2805
|
background-color: var(--IDS-RADIO__BACKGROUND-COLOR);
|
|
2769
2806
|
border-radius: 50%;
|
|
2770
|
-
margin-top: 3px;
|
|
2771
2807
|
position: relative;
|
|
2772
2808
|
flex-shrink: 0;
|
|
2773
2809
|
}
|
|
@@ -2808,16 +2844,15 @@ body.ids {
|
|
|
2808
2844
|
.ids-radio input[type=radio]:disabled {
|
|
2809
2845
|
cursor: default;
|
|
2810
2846
|
background-color: var(--IDS-RADIO--DISABLED__BACKGROUND-COLOR);
|
|
2811
|
-
|
|
2812
|
-
border: 0;
|
|
2847
|
+
border: var(--IDS-FORM--DISABLED__BORDER);
|
|
2813
2848
|
}
|
|
2814
2849
|
.ids-radio input:disabled::before,
|
|
2815
2850
|
.ids-radio input[type=radio]:disabled::before {
|
|
2816
2851
|
cursor: default;
|
|
2817
2852
|
background-color: var(--IDS-RADIO--DISABLED__BACKGROUND-COLOR);
|
|
2818
2853
|
border: 2px solid var(--IDS-RADIO--DISABLED__BACKGROUND-COLOR);
|
|
2819
|
-
top:
|
|
2820
|
-
left:
|
|
2854
|
+
top: 0;
|
|
2855
|
+
left: 0;
|
|
2821
2856
|
}
|
|
2822
2857
|
.ids-radio input:disabled:checked::before,
|
|
2823
2858
|
.ids-radio input[type=radio]:disabled:checked::before {
|
|
@@ -2827,18 +2862,14 @@ body.ids {
|
|
|
2827
2862
|
.ids-radio input[aria-invalid=true]:not(:checked),
|
|
2828
2863
|
.ids-radio input[type=radio][aria-invalid=true]:not(:checked) {
|
|
2829
2864
|
background-color: var(--IDS-RADIO--INVALID__BACKGROUND-COLOR);
|
|
2830
|
-
|
|
2831
|
-
border: 0;
|
|
2865
|
+
border: var(--IDS-FORM--INVALID__BORDER);
|
|
2832
2866
|
}
|
|
2833
2867
|
.ids-radio input[aria-invalid=true]:not(:checked)::before,
|
|
2834
2868
|
.ids-radio input[type=radio][aria-invalid=true]:not(:checked)::before {
|
|
2835
2869
|
border: 2px solid var(--IDS-RADIO--INVALID__BACKGROUND-COLOR);
|
|
2836
2870
|
background-color: var(--IDS-RADIO--INVALID__BACKGROUND-COLOR);
|
|
2837
|
-
top:
|
|
2838
|
-
left:
|
|
2839
|
-
}
|
|
2840
|
-
.ids-radio .ids-label-tooltip-wrapper:nth-child(2) {
|
|
2841
|
-
margin-top: 3px;
|
|
2871
|
+
top: 0;
|
|
2872
|
+
left: 0;
|
|
2842
2873
|
}
|
|
2843
2874
|
.ids-radio.ids-radio--compact {
|
|
2844
2875
|
margin: 0 !important;
|
|
@@ -2864,7 +2895,7 @@ body.ids {
|
|
|
2864
2895
|
}
|
|
2865
2896
|
.ids-checkbox input[type=checkbox],
|
|
2866
2897
|
.ids-checkbox input {
|
|
2867
|
-
margin:
|
|
2898
|
+
margin: 0;
|
|
2868
2899
|
position: relative;
|
|
2869
2900
|
height: 1.25rem;
|
|
2870
2901
|
width: 1.25rem;
|
|
@@ -2892,7 +2923,7 @@ input:focus + .ids-checkbox input::before {
|
|
|
2892
2923
|
.ids-checkbox input:checked::after {
|
|
2893
2924
|
content: "";
|
|
2894
2925
|
display: inline-block;
|
|
2895
|
-
background-image: var(--IDS-CHECKBOX
|
|
2926
|
+
background-image: var(--IDS-CHECKBOX-CHECK__BACKGROUND-IMAGE);
|
|
2896
2927
|
min-height: 1.25rem;
|
|
2897
2928
|
min-width: 1.25rem;
|
|
2898
2929
|
position: absolute;
|
|
@@ -2906,25 +2937,21 @@ input:focus + .ids-checkbox input::before {
|
|
|
2906
2937
|
.ids-checkbox input[type=checkbox]:disabled::before,
|
|
2907
2938
|
.ids-checkbox input:disabled::before {
|
|
2908
2939
|
cursor: default;
|
|
2940
|
+
border: var(--IDS-FORM--DISABLED__BORDER);
|
|
2909
2941
|
background-color: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR) !important;
|
|
2910
|
-
border: none !important;
|
|
2911
|
-
background-image: var(--IDS-CHECKBOX--DISABLED_BACKGROUND-IMAGE) !important;
|
|
2912
2942
|
}
|
|
2913
2943
|
.ids-checkbox input[type=checkbox]:disabled:after,
|
|
2914
2944
|
.ids-checkbox input:disabled:after {
|
|
2915
2945
|
cursor: default;
|
|
2916
2946
|
}
|
|
2917
|
-
.ids-checkbox input[type=checkbox]:disabled:checked
|
|
2918
|
-
.ids-checkbox input
|
|
2919
|
-
.ids-checkbox input:disabled:checked + .ids-checkbox input[type=checkbox]:disabled::after,
|
|
2920
|
-
.ids-checkbox input:disabled:checked + .ids-checkbox input:disabled::after {
|
|
2947
|
+
.ids-checkbox input[type=checkbox]:disabled:checked::after,
|
|
2948
|
+
.ids-checkbox input:disabled:checked::after {
|
|
2921
2949
|
background-image: var(--IDS-CHECKBOX-CHECK--DISABLED_BACKGROUND-IMAGE) !important;
|
|
2922
2950
|
}
|
|
2923
2951
|
.ids-checkbox input[type=checkbox].ids-input--invalid::before,
|
|
2924
2952
|
.ids-checkbox input.ids-input--invalid::before {
|
|
2925
|
-
border:
|
|
2926
|
-
background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
|
|
2927
|
-
background-image: var(--IDS-CHECKBOX--INVALID_BACKGROUND-IMAGE);
|
|
2953
|
+
border: var(--IDS-FORM--INVALID__BORDER);
|
|
2954
|
+
background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
|
|
2928
2955
|
}
|
|
2929
2956
|
.ids-checkbox input[type=checkbox].ids-input--invalid::before:checked + .ids-checkbox input[type=checkbox].ids-input--invalid::before::after,
|
|
2930
2957
|
.ids-checkbox input[type=checkbox].ids-input--invalid::before:checked + .ids-checkbox input.ids-input--invalid::before::after,
|
|
@@ -2940,8 +2967,11 @@ input:focus + .ids-checkbox input::before {
|
|
|
2940
2967
|
.ids-checkbox.ids-checkbox--light input.ids-input--invalid::before {
|
|
2941
2968
|
background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
|
|
2942
2969
|
}
|
|
2943
|
-
.ids-checkbox
|
|
2944
|
-
|
|
2970
|
+
.ids-checkbox.ids-checkbox--block {
|
|
2971
|
+
width: 100%;
|
|
2972
|
+
}
|
|
2973
|
+
.ids-checkbox.ids-checkbox--block .ids-label {
|
|
2974
|
+
width: 100%;
|
|
2945
2975
|
}
|
|
2946
2976
|
.ids-checkbox.ids-checkbox--compact {
|
|
2947
2977
|
margin: 0 !important;
|
|
@@ -2951,129 +2981,115 @@ input:focus + .ids-checkbox input::before {
|
|
|
2951
2981
|
margin-bottom: -2px !important;
|
|
2952
2982
|
}
|
|
2953
2983
|
|
|
2954
|
-
.ids-input {
|
|
2955
|
-
font-family: var(--font-family_1) !important;
|
|
2956
|
-
padding: 0.75rem 1.25rem;
|
|
2957
|
-
background-color: var(--IDS-INPUT_BACKGROUND);
|
|
2958
|
-
border: var(--IDS-INPUT_BORDER);
|
|
2959
|
-
border-bottom: var(--IDS-INPUT_BORDER-BOTTOM);
|
|
2960
|
-
border-radius: var(--IDS-INPUT_BORDER-RADIUS);
|
|
2961
|
-
font-size: 16px;
|
|
2962
|
-
color: var(--IDS-INPUT_COLOR);
|
|
2963
|
-
display: block;
|
|
2964
|
-
width: 100%;
|
|
2965
|
-
}
|
|
2966
|
-
.ids-input:disabled {
|
|
2967
|
-
background: var(--IDS-INPUT--DISABLED_BACKGROUND-COLOR);
|
|
2968
|
-
border: none;
|
|
2969
|
-
background-image: var(--IDS-INPUT--DISABLED_BACKGROUND-IMAGE);
|
|
2970
|
-
}
|
|
2971
|
-
|
|
2972
|
-
.ids-input__hint {
|
|
2973
|
-
margin-top: 5px;
|
|
2974
|
-
font-family: var(--font-family_1);
|
|
2975
|
-
color: var(--IDS-FORM__LABEL__COLOR);
|
|
2976
|
-
display: flex;
|
|
2977
|
-
justify-content: end;
|
|
2978
|
-
line-height: 1.5rem;
|
|
2979
|
-
font-size: 1rem;
|
|
2980
|
-
font-style: italic;
|
|
2981
|
-
}
|
|
2982
|
-
|
|
2983
2984
|
.ids-input-wrapper {
|
|
2984
2985
|
position: relative;
|
|
2985
2986
|
display: flex;
|
|
2986
|
-
gap:
|
|
2987
|
-
}
|
|
2988
|
-
.ids-input-wrapper .ids-input {
|
|
2989
|
-
width: 100%;
|
|
2990
|
-
min-height: 3rem;
|
|
2987
|
+
gap: 8px;
|
|
2991
2988
|
}
|
|
2992
2989
|
.ids-input-wrapper .ids-input__icon {
|
|
2993
2990
|
pointer-events: none;
|
|
2994
2991
|
position: absolute;
|
|
2995
2992
|
top: 50%;
|
|
2996
|
-
right:
|
|
2993
|
+
right: var(--IDS-INPUT__ICON-RIGHT);
|
|
2997
2994
|
transform: translateY(-50%);
|
|
2998
2995
|
}
|
|
2999
|
-
.ids-input-wrapper .ids-
|
|
2996
|
+
.ids-input-wrapper .ids-input__inner-wrapper {
|
|
2997
|
+
position: relative;
|
|
2998
|
+
width: 100%;
|
|
2999
|
+
}
|
|
3000
|
+
.ids-input-wrapper .ids-input__inner-wrapper .ids-input__search-icon {
|
|
3000
3001
|
pointer-events: none;
|
|
3001
3002
|
position: absolute;
|
|
3002
3003
|
top: 50%;
|
|
3003
3004
|
left: 20px;
|
|
3004
3005
|
transform: translateY(-50%);
|
|
3005
3006
|
}
|
|
3006
|
-
.ids-input-wrapper .ids-
|
|
3007
|
-
padding-left:
|
|
3007
|
+
.ids-input-wrapper .ids-input__inner-wrapper .ids-input {
|
|
3008
|
+
padding-left: var(--IDS-INPUT--SEARCH__PADDING-LEFT);
|
|
3008
3009
|
}
|
|
3009
|
-
|
|
3010
|
-
|
|
3011
|
-
position: relative;
|
|
3012
|
-
display: flex;
|
|
3013
|
-
width: 100%;
|
|
3010
|
+
.ids-input-wrapper.ids-input--icon .ids-input {
|
|
3011
|
+
padding-right: var(--IDS-INPUT__ICON-PADDING-RIGHT);
|
|
3014
3012
|
}
|
|
3015
|
-
|
|
3016
|
-
|
|
3017
|
-
|
|
3018
|
-
|
|
3019
|
-
position: absolute;
|
|
3020
|
-
right: 20px;
|
|
3021
|
-
top: 50%;
|
|
3022
|
-
transform: translateY(-50%);
|
|
3023
|
-
cursor: pointer;
|
|
3024
|
-
height: 20px;
|
|
3025
|
-
width: 20px;
|
|
3026
|
-
background-image: var(--IDS-INPUT--SEARCH__CANCEL-ICON);
|
|
3013
|
+
@media (min-width: 1024px) {
|
|
3014
|
+
.ids-input-wrapper {
|
|
3015
|
+
gap: 20px;
|
|
3016
|
+
}
|
|
3027
3017
|
}
|
|
3028
|
-
|
|
3018
|
+
|
|
3019
|
+
.ids-input {
|
|
3020
|
+
font-family: var(--font-family_1) !important;
|
|
3021
|
+
padding: var(--IDS-INPUT__PADDING);
|
|
3022
|
+
background-color: var(--IDS-INPUT__BACKGROUND-COLOR);
|
|
3023
|
+
border: var(--IDS-INPUT__BORDER);
|
|
3024
|
+
border-bottom: var(--IDS-INPUT__BORDER);
|
|
3025
|
+
border-radius: var(--IDS-INPUT__BORDER-RADIUS);
|
|
3026
|
+
font-size: 1rem;
|
|
3027
|
+
color: var(--IDS-INPUT__COLOR);
|
|
3029
3028
|
display: block;
|
|
3029
|
+
width: 100% !important;
|
|
3030
|
+
height: var(--IDS-INPUT__HEIGHT);
|
|
3031
|
+
line-height: 1.5rem;
|
|
3032
|
+
font-size: 1rem;
|
|
3030
3033
|
}
|
|
3031
|
-
.ids-
|
|
3032
|
-
|
|
3033
|
-
|
|
3034
|
+
.ids-input:disabled {
|
|
3035
|
+
color: var(--IDS-FORM--DISABLED__COLOR);
|
|
3036
|
+
font-style: italic !important;
|
|
3037
|
+
background: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
|
|
3038
|
+
border: var(--IDS-FORM--DISABLED__BORDER);
|
|
3034
3039
|
}
|
|
3035
|
-
|
|
3036
3040
|
.ids-input.ids-input--invalid {
|
|
3037
3041
|
background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
|
|
3038
|
-
border:
|
|
3039
|
-
background-image: var(--IDS-INPUT--INVALID_BACKGROUND-IMAGE);
|
|
3042
|
+
border: var(--IDS-FORM--INVALID__BORDER);
|
|
3040
3043
|
}
|
|
3041
3044
|
.ids-input:disabled {
|
|
3042
|
-
|
|
3043
|
-
|
|
3044
|
-
background
|
|
3045
|
+
color: var(--IDS-FORM--DISABLED__COLOR);
|
|
3046
|
+
font-style: italic !important;
|
|
3047
|
+
background: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
|
|
3048
|
+
border: var(--IDS-FORM--DISABLED__BORDER);
|
|
3045
3049
|
}
|
|
3046
3050
|
.ids-input:focus {
|
|
3047
|
-
box-shadow: var(--IDS-
|
|
3051
|
+
box-shadow: var(--IDS-INPUT__BOX-SHADOW);
|
|
3048
3052
|
}
|
|
3049
|
-
.ids-input
|
|
3050
|
-
|
|
3053
|
+
.ids-input.ids-input--light, .ids-input.ids-input--light:required {
|
|
3054
|
+
background-color: var(--IDS-COLOR-NEUTRAL-100);
|
|
3051
3055
|
}
|
|
3052
|
-
.ids-input.ids-input--light:
|
|
3053
|
-
background
|
|
3056
|
+
.ids-input.ids-input--light.ids-input--invalid, .ids-input.ids-input--light:required.ids-input--invalid {
|
|
3057
|
+
background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
|
|
3058
|
+
border: var(--IDS-FORM--INVALID__BORDER);
|
|
3054
3059
|
}
|
|
3055
|
-
.ids-input.ids-input--light:required {
|
|
3056
|
-
|
|
3060
|
+
.ids-input.ids-input--light:disabled, .ids-input.ids-input--light:required:disabled {
|
|
3061
|
+
color: var(--IDS-FORM--DISABLED__COLOR);
|
|
3062
|
+
font-style: italic !important;
|
|
3063
|
+
background: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
|
|
3064
|
+
border: var(--IDS-FORM--DISABLED__BORDER);
|
|
3057
3065
|
}
|
|
3058
|
-
.ids-input.ids-input--search {
|
|
3059
|
-
margin-top: 0
|
|
3060
|
-
margin-bottom: 0
|
|
3061
|
-
|
|
3062
|
-
|
|
3063
|
-
|
|
3066
|
+
.ids-input.ids-input--search, .ids-input[type=search] {
|
|
3067
|
+
margin-top: 0;
|
|
3068
|
+
margin-bottom: 0;
|
|
3069
|
+
padding-left: var(--IDS-INPUT--SEARCH__PADDING-LEFT);
|
|
3070
|
+
font-size: var(--IDS-INPUT--SEARCH__FONT-SIZE-MOBILE);
|
|
3071
|
+
border-radius: var(--IDS-INPUT--SEARCH__BORDER-RADIUS);
|
|
3072
|
+
height: var(--IDS-INPUT--SEARCH__HEIGHT-MOBILE);
|
|
3064
3073
|
}
|
|
3065
|
-
@media (
|
|
3066
|
-
.ids-input.ids-input--search {
|
|
3067
|
-
|
|
3068
|
-
font-size: 16px !important;
|
|
3069
|
-
margin-right: var(--input-search-mobile_margin-right);
|
|
3070
|
-
border-radius: var(--IDS-INPUT--SEARCH__BORDER-RADIUS);
|
|
3071
|
-
height: 3.125rem;
|
|
3074
|
+
@media (min-width: 1024px) {
|
|
3075
|
+
.ids-input.ids-input--search, .ids-input[type=search] {
|
|
3076
|
+
height: var(--IDS-INPUT--SEARCH__HEIGHT-DESKTOP);
|
|
3072
3077
|
}
|
|
3073
3078
|
}
|
|
3074
3079
|
|
|
3075
|
-
.ids-
|
|
3076
|
-
-
|
|
3080
|
+
.ids-input__hint {
|
|
3081
|
+
margin-top: 5px;
|
|
3082
|
+
font-family: var(--font-family_1);
|
|
3083
|
+
color: var(--IDS-FORM__LABEL__COLOR);
|
|
3084
|
+
display: flex;
|
|
3085
|
+
justify-content: end;
|
|
3086
|
+
line-height: 1.5rem;
|
|
3087
|
+
font-size: 1rem;
|
|
3088
|
+
font-style: italic;
|
|
3089
|
+
}
|
|
3090
|
+
|
|
3091
|
+
input.ids-range {
|
|
3092
|
+
appearance: none;
|
|
3077
3093
|
width: 100%;
|
|
3078
3094
|
height: 8px;
|
|
3079
3095
|
background-color: var(--IDS-RANGE__BACKGROUND-COLOR);
|
|
@@ -3082,29 +3098,18 @@ input:focus + .ids-checkbox input::before {
|
|
|
3082
3098
|
border: 1px;
|
|
3083
3099
|
cursor: pointer;
|
|
3084
3100
|
display: block;
|
|
3085
|
-
padding:
|
|
3086
|
-
border-radius: 16px;
|
|
3087
|
-
}
|
|
3088
|
-
.ids-range:disabled {
|
|
3089
|
-
cursor: default;
|
|
3090
|
-
-webkit-appearance: none;
|
|
3091
|
-
width: 100%;
|
|
3092
|
-
height: 8px;
|
|
3093
|
-
background-color: var(--IDS-RANGE__BACKGROUND-COLOR);
|
|
3094
|
-
background-image: linear-gradient(var(--IDS-RANGE-SELECTION--DISABLED__COLOR), var(--IDS-RANGE-SELECTION--DISABLED__COLOR));
|
|
3095
|
-
background-repeat: no-repeat;
|
|
3096
|
-
border: 1px;
|
|
3097
|
-
padding: 0px;
|
|
3101
|
+
padding: 0;
|
|
3098
3102
|
border-radius: 16px;
|
|
3103
|
+
margin: 0;
|
|
3099
3104
|
}
|
|
3100
|
-
.ids-range::-ms-track {
|
|
3105
|
+
input.ids-range::-ms-track {
|
|
3101
3106
|
width: 100%;
|
|
3102
3107
|
cursor: pointer;
|
|
3103
3108
|
background: transparent;
|
|
3104
3109
|
border-color: transparent;
|
|
3105
3110
|
color: transparent;
|
|
3106
3111
|
}
|
|
3107
|
-
.ids-range::-webkit-slider-thumb {
|
|
3112
|
+
input.ids-range::-webkit-slider-thumb {
|
|
3108
3113
|
-webkit-appearance: none;
|
|
3109
3114
|
border: 2px solid white;
|
|
3110
3115
|
height: 24px;
|
|
@@ -3113,63 +3118,82 @@ input:focus + .ids-checkbox input::before {
|
|
|
3113
3118
|
background: var(--IDS-RANGE-THUMB__BACKGROUND-COLOR);
|
|
3114
3119
|
cursor: pointer;
|
|
3115
3120
|
}
|
|
3116
|
-
.ids-range
|
|
3117
|
-
cursor: default;
|
|
3118
|
-
background: var(--IDS-RANGE-SELECTION--DISABLED__COLOR);
|
|
3119
|
-
}
|
|
3120
|
-
.ids-range::-ms-thumb {
|
|
3121
|
+
input.ids-range::-ms-thumb {
|
|
3121
3122
|
border: 2px solid white;
|
|
3122
3123
|
height: 22px;
|
|
3123
3124
|
width: 24px;
|
|
3124
3125
|
border-radius: 100%;
|
|
3125
3126
|
cursor: pointer;
|
|
3126
3127
|
}
|
|
3127
|
-
.ids-range:disabled
|
|
3128
|
+
input.ids-range:disabled {
|
|
3129
|
+
cursor: default;
|
|
3130
|
+
appearance: none;
|
|
3131
|
+
width: 100%;
|
|
3132
|
+
height: 8px;
|
|
3133
|
+
background-color: var(--IDS-RANGE__BACKGROUND-COLOR);
|
|
3134
|
+
background-image: linear-gradient(var(--IDS-RANGE-SELECTION--DISABLED__COLOR), var(--IDS-RANGE-SELECTION--DISABLED__COLOR));
|
|
3135
|
+
background-repeat: no-repeat;
|
|
3136
|
+
border: 1px;
|
|
3137
|
+
padding: 0px;
|
|
3138
|
+
border-radius: 16px;
|
|
3139
|
+
}
|
|
3140
|
+
input.ids-range:disabled::-webkit-slider-thumb {
|
|
3141
|
+
cursor: default;
|
|
3142
|
+
background: var(--IDS-RANGE-SELECTION--DISABLED__COLOR);
|
|
3143
|
+
}
|
|
3144
|
+
input.ids-range:disabled::-ms-thumb {
|
|
3128
3145
|
cursor: default;
|
|
3129
3146
|
}
|
|
3130
3147
|
|
|
3131
3148
|
.ids-select {
|
|
3132
|
-
font-family: var(--font-family_1) !important;
|
|
3133
|
-
padding: 0.75rem 1.25rem;
|
|
3134
|
-
background-color: var(--IDS-INPUT_BACKGROUND);
|
|
3135
|
-
border: var(--IDS-INPUT_BORDER);
|
|
3136
|
-
border-bottom: var(--IDS-INPUT_BORDER-BOTTOM);
|
|
3137
|
-
border-radius: var(--IDS-INPUT_BORDER-RADIUS);
|
|
3138
|
-
font-size: 16px;
|
|
3139
|
-
color: var(--IDS-INPUT_COLOR);
|
|
3140
|
-
display: block;
|
|
3141
|
-
cursor: pointer;
|
|
3142
3149
|
appearance: none !important;
|
|
3143
3150
|
-webkit-appearance: none !important;
|
|
3144
3151
|
-moz-appearance: none !important;
|
|
3152
|
+
font-family: var(--font-family_1) !important;
|
|
3153
|
+
padding: var(--IDS-INPUT__PADDING);
|
|
3154
|
+
background-color: var(--IDS-INPUT__BACKGROUND-COLOR);
|
|
3155
|
+
border: var(--IDS-INPUT__BORDER);
|
|
3156
|
+
border-bottom: var(--IDS-INPUT__BORDER);
|
|
3157
|
+
border-radius: var(--IDS-INPUT__BORDER-RADIUS);
|
|
3158
|
+
font-size: 1rem;
|
|
3159
|
+
color: var(--IDS-INPUT__COLOR);
|
|
3160
|
+
display: block;
|
|
3161
|
+
height: var(--IDS-INPUT__HEIGHT);
|
|
3162
|
+
cursor: pointer;
|
|
3145
3163
|
display: inline-block !important;
|
|
3146
|
-
padding-right:
|
|
3164
|
+
padding-right: var(--IDS-INPUT__ICON-PADDING-RIGHT) !important;
|
|
3147
3165
|
text-align: left;
|
|
3148
3166
|
overflow: hidden;
|
|
3149
3167
|
text-overflow: ellipsis;
|
|
3150
|
-
border: var(--
|
|
3151
|
-
border-bottom: var(--IDS-INPUT_BORDER-BOTTOM);
|
|
3168
|
+
border: var(--IDS-INPUT__BORDER);
|
|
3152
3169
|
width: 100% !important;
|
|
3153
3170
|
}
|
|
3154
3171
|
.ids-select:disabled {
|
|
3155
|
-
|
|
3156
|
-
|
|
3157
|
-
background
|
|
3172
|
+
color: var(--IDS-FORM--DISABLED__COLOR);
|
|
3173
|
+
font-style: italic !important;
|
|
3174
|
+
background: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
|
|
3175
|
+
border: var(--IDS-FORM--DISABLED__BORDER);
|
|
3158
3176
|
}
|
|
3159
3177
|
.ids-select.ids-input--invalid {
|
|
3160
|
-
background
|
|
3161
|
-
|
|
3162
|
-
|
|
3178
|
+
background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
|
|
3179
|
+
border: var(--IDS-FORM--INVALID__BORDER);
|
|
3180
|
+
}
|
|
3181
|
+
.ids-select.ids-input--light {
|
|
3182
|
+
background-color: var(--IDS-COLOR-NEUTRAL-100);
|
|
3183
|
+
}
|
|
3184
|
+
.ids-select.ids-input--light.ids-input--invalid {
|
|
3185
|
+
background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
|
|
3186
|
+
border: var(--IDS-FORM--INVALID__BORDER);
|
|
3163
3187
|
}
|
|
3164
3188
|
.ids-select:disabled {
|
|
3189
|
+
cursor: default;
|
|
3190
|
+
}
|
|
3191
|
+
.ids-select:disabled.ids-input--light {
|
|
3192
|
+
background-color: var(--IDS-COLOR-NEUTRAL-100);
|
|
3165
3193
|
color: var(--IDS-FORM--DISABLED__COLOR);
|
|
3166
|
-
background-color: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR) !important;
|
|
3167
|
-
border: var(--IDS-FORM-DISABLED_BORDER);
|
|
3168
3194
|
font-style: italic !important;
|
|
3169
|
-
background
|
|
3170
|
-
|
|
3171
|
-
.ids-select.ids-input--light {
|
|
3172
|
-
background-color: white;
|
|
3195
|
+
background: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
|
|
3196
|
+
border: var(--IDS-FORM--DISABLED__BORDER);
|
|
3173
3197
|
}
|
|
3174
3198
|
.ids-select:focus {
|
|
3175
3199
|
outline: var(--IDS-FOCUS_OUTLINE);
|
|
@@ -3187,9 +3211,9 @@ input:focus + .ids-checkbox input::before {
|
|
|
3187
3211
|
display: block;
|
|
3188
3212
|
position: absolute;
|
|
3189
3213
|
transform: rotate(90deg);
|
|
3190
|
-
right:
|
|
3191
|
-
top:
|
|
3192
|
-
bottom:
|
|
3214
|
+
right: var(--IDS-INPUT__ICON-RIGHT);
|
|
3215
|
+
top: 0;
|
|
3216
|
+
bottom: 0;
|
|
3193
3217
|
background-position: center;
|
|
3194
3218
|
background-repeat: no-repeat;
|
|
3195
3219
|
background-image: var(--IDS-SELECT__CHEVRON-ICON);
|
|
@@ -3202,29 +3226,28 @@ input:focus + .ids-checkbox input::before {
|
|
|
3202
3226
|
background-image: var(--IDS-SELECT--DISABLED__CHEVRON-ICON);
|
|
3203
3227
|
}
|
|
3204
3228
|
|
|
3205
|
-
.ids-select:disabled {
|
|
3206
|
-
cursor: default;
|
|
3207
|
-
}
|
|
3208
|
-
|
|
3209
3229
|
.ids-textarea {
|
|
3210
3230
|
display: inline-block;
|
|
3211
3231
|
}
|
|
3212
3232
|
.ids-textarea textarea {
|
|
3213
3233
|
font-family: var(--font-family_1) !important;
|
|
3214
|
-
padding:
|
|
3215
|
-
background-color: var(--IDS-
|
|
3216
|
-
border: var(--IDS-
|
|
3217
|
-
border-bottom: var(--IDS-
|
|
3218
|
-
border-radius: var(--IDS-
|
|
3219
|
-
font-size:
|
|
3220
|
-
color: var(--IDS-
|
|
3234
|
+
padding: var(--IDS-INPUT__PADDING);
|
|
3235
|
+
background-color: var(--IDS-INPUT__BACKGROUND-COLOR);
|
|
3236
|
+
border: var(--IDS-INPUT__BORDER);
|
|
3237
|
+
border-bottom: var(--IDS-INPUT__BORDER);
|
|
3238
|
+
border-radius: var(--IDS-INPUT__BORDER-RADIUS);
|
|
3239
|
+
font-size: 1rem;
|
|
3240
|
+
color: var(--IDS-INPUT__COLOR);
|
|
3221
3241
|
display: block;
|
|
3242
|
+
padding-top: var(--IDS-TEXTAREA-PADDING-Y);
|
|
3243
|
+
padding-bottom: var(--IDS-TEXTAREA-PADDING-Y);
|
|
3222
3244
|
box-sizing: border-box;
|
|
3223
3245
|
}
|
|
3224
3246
|
.ids-textarea textarea:disabled {
|
|
3225
|
-
|
|
3226
|
-
|
|
3227
|
-
background
|
|
3247
|
+
color: var(--IDS-FORM--DISABLED__COLOR);
|
|
3248
|
+
font-style: italic !important;
|
|
3249
|
+
background: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
|
|
3250
|
+
border: var(--IDS-FORM--DISABLED__BORDER);
|
|
3228
3251
|
}
|
|
3229
3252
|
.ids-textarea textarea::-webkit-scrollbar {
|
|
3230
3253
|
width: 14px;
|
|
@@ -3259,15 +3282,25 @@ input:focus + .ids-checkbox input::before {
|
|
|
3259
3282
|
background: var(--IDS-SCROLL_HOVER-COLOR);
|
|
3260
3283
|
}
|
|
3261
3284
|
.ids-textarea textarea:focus {
|
|
3262
|
-
box-shadow: var(--IDS-
|
|
3285
|
+
box-shadow: var(--IDS-INPUT__BOX-SHADOW);
|
|
3263
3286
|
}
|
|
3264
|
-
.ids-textarea textarea
|
|
3265
|
-
|
|
3287
|
+
.ids-textarea textarea:disabled {
|
|
3288
|
+
color: var(--IDS-FORM--DISABLED__COLOR);
|
|
3289
|
+
background-color: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
|
|
3266
3290
|
}
|
|
3267
3291
|
.ids-textarea textarea.ids-input--invalid {
|
|
3268
3292
|
background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
|
|
3269
|
-
border:
|
|
3270
|
-
|
|
3293
|
+
border: var(--IDS-FORM--INVALID__BORDER);
|
|
3294
|
+
}
|
|
3295
|
+
.ids-textarea textarea.ids-input--light {
|
|
3296
|
+
background-color: var(--IDS-COLOR-NEUTRAL-100);
|
|
3297
|
+
}
|
|
3298
|
+
.ids-textarea textarea.ids-input--light:disabled {
|
|
3299
|
+
color: var(--IDS-FORM--DISABLED__COLOR);
|
|
3300
|
+
background-color: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
|
|
3301
|
+
}
|
|
3302
|
+
.ids-textarea textarea.ids-input--light.ids-input--invalid {
|
|
3303
|
+
background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
|
|
3271
3304
|
}
|
|
3272
3305
|
.ids-textarea.ids-textarea--block {
|
|
3273
3306
|
display: block;
|
|
@@ -3285,40 +3318,34 @@ input:focus + .ids-checkbox input::before {
|
|
|
3285
3318
|
overflow: hidden;
|
|
3286
3319
|
}
|
|
3287
3320
|
|
|
3288
|
-
.ids-time-
|
|
3321
|
+
.ids-time .ids-time__input-wrapper {
|
|
3289
3322
|
position: relative;
|
|
3290
|
-
display: flex;
|
|
3291
|
-
gap: 10px;
|
|
3292
|
-
}
|
|
3293
|
-
.ids-time-input-wrapper .ids-input {
|
|
3294
|
-
width: 100%;
|
|
3295
|
-
min-height: 3rem;
|
|
3296
3323
|
}
|
|
3297
|
-
.ids-time
|
|
3324
|
+
.ids-time .ids-input__icon {
|
|
3298
3325
|
pointer-events: none;
|
|
3299
3326
|
position: absolute;
|
|
3300
3327
|
top: 50%;
|
|
3301
|
-
right:
|
|
3328
|
+
right: var(--IDS-INPUT__ICON-RIGHT);
|
|
3302
3329
|
transform: translateY(-50%);
|
|
3303
3330
|
}
|
|
3304
|
-
.ids-time
|
|
3305
|
-
.ids-time
|
|
3331
|
+
.ids-time ::slotted(input),
|
|
3332
|
+
.ids-time input {
|
|
3306
3333
|
cursor: pointer;
|
|
3307
3334
|
}
|
|
3308
|
-
.ids-time
|
|
3309
|
-
.ids-time
|
|
3335
|
+
.ids-time ::slotted(input:disabled),
|
|
3336
|
+
.ids-time input:disabled {
|
|
3310
3337
|
cursor: default;
|
|
3311
3338
|
}
|
|
3312
3339
|
|
|
3313
|
-
input.ids-
|
|
3340
|
+
input.ids-time__input {
|
|
3314
3341
|
font-family: var(--font-family_1) !important;
|
|
3315
|
-
padding:
|
|
3316
|
-
background-color: var(--IDS-
|
|
3317
|
-
border: var(--IDS-
|
|
3318
|
-
border-bottom: var(--IDS-
|
|
3319
|
-
border-radius: var(--IDS-
|
|
3320
|
-
font-size:
|
|
3321
|
-
color: var(--IDS-
|
|
3342
|
+
padding: var(--IDS-INPUT__PADDING);
|
|
3343
|
+
background-color: var(--IDS-INPUT__BACKGROUND-COLOR);
|
|
3344
|
+
border: var(--IDS-INPUT__BORDER);
|
|
3345
|
+
border-bottom: var(--IDS-INPUT__BORDER);
|
|
3346
|
+
border-radius: var(--IDS-INPUT__BORDER-RADIUS);
|
|
3347
|
+
font-size: 1rem;
|
|
3348
|
+
color: var(--IDS-INPUT__COLOR);
|
|
3322
3349
|
display: block;
|
|
3323
3350
|
cursor: pointer;
|
|
3324
3351
|
appearance: none;
|
|
@@ -3326,38 +3353,41 @@ input.ids-time {
|
|
|
3326
3353
|
-moz-appearance: none;
|
|
3327
3354
|
display: inline-block;
|
|
3328
3355
|
box-sizing: border-box;
|
|
3329
|
-
|
|
3330
|
-
|
|
3331
|
-
|
|
3332
|
-
|
|
3333
|
-
padding-left: var(--time-padding-left);
|
|
3334
|
-
padding-top: var(--time-padding-top);
|
|
3335
|
-
padding-bottom: var(--time-padding-bottom);
|
|
3336
|
-
}
|
|
3337
|
-
input.ids-time:disabled {
|
|
3338
|
-
background: var(--IDS-INPUT--DISABLED_BACKGROUND-COLOR);
|
|
3339
|
-
border: none;
|
|
3340
|
-
background-image: var(--IDS-INPUT--DISABLED_BACKGROUND-IMAGE);
|
|
3356
|
+
width: 100%;
|
|
3357
|
+
height: var(--IDS-INPUT__HEIGHT);
|
|
3358
|
+
padding: var(--IDS-INPUT__PADDING);
|
|
3359
|
+
padding-right: var(--IDS-INPUT__ICON-PADDING-RIGHT);
|
|
3341
3360
|
}
|
|
3342
|
-
input.ids-
|
|
3343
|
-
|
|
3344
|
-
|
|
3345
|
-
background
|
|
3361
|
+
input.ids-time__input:disabled {
|
|
3362
|
+
color: var(--IDS-FORM--DISABLED__COLOR);
|
|
3363
|
+
font-style: italic !important;
|
|
3364
|
+
background: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
|
|
3365
|
+
border: var(--IDS-FORM--DISABLED__BORDER);
|
|
3346
3366
|
}
|
|
3347
|
-
input.ids-
|
|
3367
|
+
input.ids-time__input::-webkit-calendar-picker-indicator {
|
|
3348
3368
|
opacity: 0;
|
|
3349
|
-
|
|
3350
|
-
margin-top: -3px;
|
|
3351
|
-
position: absolute;
|
|
3352
|
-
right: var(--IDS-INPUT__CALENDAR-ICON__RIGHT);
|
|
3353
|
-
top: 25px;
|
|
3369
|
+
appearance: none;
|
|
3354
3370
|
}
|
|
3355
|
-
input.ids-
|
|
3356
|
-
background
|
|
3371
|
+
input.ids-time__input.ids-input--invalid {
|
|
3372
|
+
background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
|
|
3373
|
+
border: var(--IDS-FORM--INVALID__BORDER);
|
|
3357
3374
|
}
|
|
3358
|
-
|
|
3359
|
-
|
|
3375
|
+
input.ids-time__input.ids-input--light:not(:invalid) {
|
|
3376
|
+
background-color: var(--IDS-COLOR-NEUTRAL-100);
|
|
3377
|
+
}
|
|
3378
|
+
input.ids-time__input.ids-input--light:not(:invalid):disabled {
|
|
3379
|
+
cursor: default;
|
|
3380
|
+
color: var(--IDS-FORM--DISABLED__COLOR);
|
|
3381
|
+
font-style: italic !important;
|
|
3382
|
+
background: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
|
|
3383
|
+
border: var(--IDS-FORM--DISABLED__BORDER);
|
|
3384
|
+
}
|
|
3385
|
+
input.ids-time__input:disabled {
|
|
3360
3386
|
cursor: default;
|
|
3387
|
+
color: var(--IDS-FORM--DISABLED__COLOR);
|
|
3388
|
+
font-style: italic !important;
|
|
3389
|
+
background: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
|
|
3390
|
+
border: var(--IDS-FORM--DISABLED__BORDER);
|
|
3361
3391
|
}
|
|
3362
3392
|
|
|
3363
3393
|
.ids-toggle {
|
|
@@ -3906,6 +3936,13 @@ select::placeholder {
|
|
|
3906
3936
|
outline-color: var(--focus-outline_color);
|
|
3907
3937
|
}
|
|
3908
3938
|
|
|
3939
|
+
input[type=search]::-webkit-search-decoration,
|
|
3940
|
+
input[type=search]::-webkit-search-cancel-button,
|
|
3941
|
+
input[type=search]::-webkit-search-results-button,
|
|
3942
|
+
input[type=search]::-webkit-search-results-decoration {
|
|
3943
|
+
-webkit-appearance: none;
|
|
3944
|
+
}
|
|
3945
|
+
|
|
3909
3946
|
:root, :host {
|
|
3910
3947
|
--IDS-COLOR-PRIMARY-30: #6a0032;
|
|
3911
3948
|
--IDS-COLOR-PRIMARY-35: #a00b36;
|
|
@@ -4018,19 +4055,30 @@ select::placeholder {
|
|
|
4018
4055
|
**********************/
|
|
4019
4056
|
--IDS-BORDER-RADIUS: 10px;
|
|
4020
4057
|
--IDS-BASE__FONT-COLOR: var(--IDS-COLOR-NEUTRAL-20);
|
|
4058
|
+
--IDS-OVERLAY__BACKGROUND-COLOR: rgba(53, 53, 53, 0.6);
|
|
4059
|
+
/* Focus */
|
|
4060
|
+
--IDS-FOCUS_OUTLINE: 2px solid var(--IDS-COLOR-NEUTRAL-40);
|
|
4061
|
+
--IDS-FOCUS_OUTLINE--LIGHT: 2px solid var(--IDS-COLOR-NEUTRAL-100);
|
|
4062
|
+
--IDS-FOCUS_OUTLINE-OFFSET: 2px;
|
|
4063
|
+
--focus_outline: 2px solid var(--IDS-COLOR-NEUTRAL-40);
|
|
4064
|
+
--focus_outline-offset: 2px;
|
|
4065
|
+
--focus-outline_color: var(--IDS-COLOR-NEUTRAL-40);
|
|
4066
|
+
--focus-outline-bright_color: var(--IDS-COLOR-NEUTRAL-100);
|
|
4067
|
+
/* Scroll*/
|
|
4021
4068
|
--IDS-SCROLL_COLOR: var(--IDS-COLOR-ACCENT-40);
|
|
4022
4069
|
--IDS-SCROLL_HOVER-COLOR: var(--IDS-COLOR-ACCENT-30);
|
|
4023
4070
|
--IDS-SCROLL_TRACK-COLOR: var(--IDS-COLOR-NEUTRAL-99);
|
|
4024
|
-
--IDS-
|
|
4071
|
+
--IDS-SCROLL_BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-95);
|
|
4072
|
+
--IDS-SCROLL_COLOR: var(--IDS-COLOR-ACCENT-40);
|
|
4025
4073
|
/**********************
|
|
4026
4074
|
* FORM
|
|
4027
4075
|
**********************/
|
|
4028
|
-
/*
|
|
4029
|
-
--IDS-FORM--DISABLED__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-99);
|
|
4030
|
-
--IDS-FORM--DISABLED__BACKGROUND-IMAGE: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='10' ry='10' stroke='%23353535' stroke-width='1' stroke-dasharray='3' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
|
|
4076
|
+
/* Form tokens */
|
|
4031
4077
|
--IDS-FORM--DISABLED__COLOR: var(--IDS-COLOR-NEUTRAL-40);
|
|
4078
|
+
--IDS-FORM--DISABLED__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-99);
|
|
4079
|
+
--IDS-FORM--DISABLED__BORDER: 1px dashed var(--IDS-COLOR-NEUTRAL-40);
|
|
4080
|
+
--IDS-FORM--INVALID__BORDER: 1px dashed var(--IDS-COLOR-PRIMARY-40);
|
|
4032
4081
|
--IDS-FORM--INVALID__BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-90);
|
|
4033
|
-
--IDS-FORM--INVALID__BACKGROUND-IMAGE: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='10' ry='10' stroke='%23c12143' stroke-width='1' stroke-dasharray='5' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
|
|
4034
4082
|
--IDS-FORM__PLACEHOLDER__COLOR: var(--IDS-COLOR-NEUTRAL-40);
|
|
4035
4083
|
--IDS-FORM__LABEL__COLOR: var(--IDS-COLOR-NEUTRAL-20);
|
|
4036
4084
|
--IDS-FORM__LABEL--DISABLED__COLOR: var(--IDS-COLOR-NEUTRAL-40);
|
|
@@ -4039,72 +4087,59 @@ select::placeholder {
|
|
|
4039
4087
|
--IDS-FORM__LABEL__FONT-WEIGHT: 400;
|
|
4040
4088
|
--IDS-FORM__LABEL__LETTER-SPACING: 0px;
|
|
4041
4089
|
--IDS-FORM__LABEL__HEIGHT: 1.25rem;
|
|
4042
|
-
/*
|
|
4090
|
+
/* Error message */
|
|
4043
4091
|
--IDS-ERROR-MESSAGE__COLOR: var(--IDS-COLOR-ERROR-40);
|
|
4044
4092
|
--IDS-ERROR-MESSAGE__MARGIN-TOP: 0.8rem;
|
|
4045
|
-
--IDS-ERROR-MESSAGE__BACKGROUND-COLOR:
|
|
4093
|
+
--IDS-ERROR-MESSAGE__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-100);
|
|
4046
4094
|
--IDS-ERROR-MESSAGE__BORDER-COLOR: var(--IDS-COLOR-ERROR-40);
|
|
4047
4095
|
--IDS-ERROR-MESSAGE__BORDER: 1px solid var(--IDS-ERROR-MESSAGE__BORDER-COLOR);
|
|
4048
4096
|
--IDS-ERROR-MESSAGE__PADDING: 13px 20px;
|
|
4049
4097
|
--IDS-ERROR-MESSAGE__ICON__BACKGROUND-IMAGE: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" role="img" fill="none" width="100%" height="100%" style="" viewBox="0 0 40 40" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M22.5134 12.7567C22.5134 12.7889 22.5129 12.821 22.5118 12.8529C22.5129 12.8828 22.5134 12.913 22.5134 12.9436C22.5134 13.1581 22.4809 13.4575 22.4158 13.8419L20.3119 24.2492C20.2585 24.5129 20.0268 24.7025 19.7577 24.7025C19.4877 24.7025 19.2554 24.5117 19.2031 24.2468L17.1463 13.8419C17.0857 13.5476 17.0439 13.2999 17.021 13.0987C17.007 12.976 17 12.8707 17 12.7827L17 12.7713L17 12.7567C17 11.2342 18.2342 10 19.7567 10C21.2792 10 22.5134 11.2342 22.5134 12.7567ZM21.0564 29.572C20.6977 29.9324 20.2644 30.1126 19.7567 30.1126C19.2489 30.1126 18.8157 29.9324 18.457 29.572C18.0982 29.2117 17.9189 28.7765 17.9189 28.2664C17.9189 27.7675 18.0982 27.3378 18.457 26.9775C18.8157 26.6171 19.2489 26.4369 19.7567 26.4369C20.2644 26.4369 20.6977 26.6171 21.0564 26.9775C21.4151 27.3378 21.5945 27.7675 21.5945 28.2664C21.5945 28.7765 21.4151 29.2117 21.0564 29.572Z" fill="%236a0032"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M39.2886 18.5C39.8245 19.4282 39.8245 20.5718 39.2886 21.5L30.9433 35.9545C30.4074 36.8827 29.417 37.4545 28.3452 37.4545H11.6546C10.5828 37.4545 9.59245 36.8827 9.05655 35.9545L0.711251 21.5C0.175351 20.5718 0.175351 19.4282 0.711251 18.5L9.05655 4.04553C9.59245 3.11733 10.5828 2.54553 11.6546 2.54553L28.3452 2.54553C29.417 2.54553 30.4074 3.11733 30.9433 4.04553L39.2886 18.5ZM37.5565 20.5C37.7352 20.1906 37.7352 19.8094 37.5565 19.5L29.2112 5.04553C29.0326 4.73613 28.7025 4.54553 28.3452 4.54553L11.6546 4.54553C11.2974 4.54553 10.9672 4.73613 10.7886 5.04553L2.4433 19.5C2.26467 19.8094 2.26467 20.1906 2.4433 20.5L10.7886 34.9545C10.9672 35.2639 11.2974 35.4545 11.6546 35.4545H28.3452C28.7025 35.4545 29.0326 35.2639 29.2112 34.9545L37.5565 20.5Z" fill="%23c12143"></path></svg>');
|
|
4050
|
-
/*
|
|
4051
|
-
--IDS-
|
|
4052
|
-
--IDS-ALERT__HEADLINE__FONT-FAMILY: var(--font-family_1);
|
|
4053
|
-
--IDS-ALERT__HEADLINE__FONT-WEIGHT: 700;
|
|
4054
|
-
--IDS-ALERT--INFO__COLOR: var(--IDS-COLOR-NEUTRAL-20);
|
|
4055
|
-
--IDS-ALERT--INFO__BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-95);
|
|
4056
|
-
--IDS-ALERT--INFO__BORDER-COLOR: var(--IDS-COLOR-ACCENT-40);
|
|
4057
|
-
--IDS-ALERT--INFO__ICON__COLOR-1: var(--IDS-COLOR-ACCENT-30);
|
|
4058
|
-
--IDS-ALERT--INFO__ICON__COLOR-2: var(--IDS-COLOR-ACCENT-40);
|
|
4059
|
-
--IDS-ALERT--ATTENTION__BACKGROUND-COLOR: var(--IDS-COLOR-ATTENTION-95);
|
|
4060
|
-
--IDS-ALERT--ATTENTION__BORDER-COLOR: var(--IDS-COLOR-NEUTRAL-50);
|
|
4061
|
-
--IDS-ALERT--ATTENTION__ICON__COLOR-1: var(--IDS-COLOR-ACCENT-30);
|
|
4062
|
-
--IDS-ALERT--ATTENTION__ICON__COLOR-2: var(--IDS-COLOR-NEUTRAL-40);
|
|
4063
|
-
--IDS-ALERT--SUCCESS__BACKGROUND-COLOR: var(--IDS-COLOR-SUCCESS-99);
|
|
4064
|
-
--IDS-ALERT--SUCCESS__BORDER-COLOR: var(--IDS-COLOR-SUCCESS-40);
|
|
4065
|
-
--IDS-ALERT--SUCCESS__ICON__COLOR-1: var(--IDS-COLOR-SUCCESS-30);
|
|
4066
|
-
--IDS-ALERT--SUCCESS__ICON__COLOR-2: var(--IDS-COLOR-SUCCESS-40);
|
|
4067
|
-
--IDS-ALERT--ERROR__BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-90);
|
|
4068
|
-
--IDS-ALERT--ERROR__BORDER-COLOR: var(--IDS-COLOR-PRIMARY-40);
|
|
4069
|
-
--IDS-ALERT--ERROR__ICON__COLOR-1: var(--IDS-COLOR-PRIMARY-30);
|
|
4070
|
-
--IDS-ALERT--ERROR__ICON__COLOR-2: var(--IDS-COLOR-PRIMARY-40);
|
|
4071
|
-
/* CHECKBOX */
|
|
4072
|
-
--IDS-CHECKBOX_BORDER: 0.0625rem solid var(--IDS-COLOR-ACCENT-40);
|
|
4098
|
+
/* Checkbox */
|
|
4099
|
+
--IDS-CHECKBOX_BORDER: 1px solid var(--IDS-COLOR-ACCENT-40);
|
|
4073
4100
|
--IDS-CHECKBOX_BORDER-RADIUS: 0.25rem;
|
|
4074
4101
|
--IDS-CHECKBOX_BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-95);
|
|
4075
|
-
--IDS-CHECKBOX
|
|
4076
|
-
--IDS-CHECKBOX--INVALID_BACKGROUND-IMAGE: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='4' ry='4' stroke='%23c12143' stroke-width='1' stroke-dasharray='4%2c 4%2c 4%2c 4' stroke-dashoffset='16' stroke-linecap='butt'/%3e%3c/svg%3e");
|
|
4102
|
+
--IDS-CHECKBOX-CHECK__BACKGROUND-IMAGE: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="11" viewBox="0 0 40 32" fill="none"><path xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" d="M39.1772 0.674536C40.2151 1.62733 40.2798 3.23649 39.3218 4.26869L14.343 31.1817C13.8554 31.7071 13.1679 32.0041 12.4489 32C11.73 31.9958 11.046 31.6909 10.5646 31.1598L0.658175 20.2339C-0.287695 19.1907 -0.20415 17.5824 0.844778 16.6417C1.8937 15.7009 3.51081 15.784 4.45668 16.8273L12.4859 25.6828L35.5634 0.818302C36.5214 -0.213896 38.1394 -0.278263 39.1772 0.674536Z" fill="%23396291"></path></svg>');
|
|
4077
4103
|
--IDS-CHECKBOX-CHECK--INVALID_BACKGROUND-IMAGE: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="11" viewBox="0 0 40 32" fill="none"><path xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" d="M39.1772 0.674536C40.2151 1.62733 40.2798 3.23649 39.3218 4.26869L14.343 31.1817C13.8554 31.7071 13.1679 32.0041 12.4489 32C11.73 31.9958 11.046 31.6909 10.5646 31.1598L0.658175 20.2339C-0.287695 19.1907 -0.20415 17.5824 0.844778 16.6417C1.8937 15.7009 3.51081 15.784 4.45668 16.8273L12.4859 25.6828L35.5634 0.818302C36.5214 -0.213896 38.1394 -0.278263 39.1772 0.674536Z" fill="%23c12143"></path></svg>');
|
|
4078
|
-
--IDS-CHECKBOX--DISABLED_BACKGROUND-IMAGE: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='4' ry='4' stroke='%23808285' stroke-width='1' stroke-dasharray='3%2c 3%2c 3%2c 3' stroke-dashoffset='16' stroke-linecap='butt'/%3e%3c/svg%3e");
|
|
4079
4104
|
--IDS-CHECKBOX-CHECK--DISABLED_BACKGROUND-IMAGE: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="11" viewBox="0 0 40 32" fill="none"><path xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" d="M39.1772 0.674536C40.2151 1.62733 40.2798 3.23649 39.3218 4.26869L14.343 31.1817C13.8554 31.7071 13.1679 32.0041 12.4489 32C11.73 31.9958 11.046 31.6909 10.5646 31.1598L0.658175 20.2339C-0.287695 19.1907 -0.20415 17.5824 0.844778 16.6417C1.8937 15.7009 3.51081 15.784 4.45668 16.8273L12.4859 25.6828L35.5634 0.818302C36.5214 -0.213896 38.1394 -0.278263 39.1772 0.674536Z" fill="%23808285"></path></svg>');
|
|
4080
|
-
|
|
4081
|
-
--IDS-
|
|
4082
|
-
|
|
4083
|
-
--IDS-
|
|
4084
|
-
--IDS-
|
|
4085
|
-
--IDS-
|
|
4086
|
-
--IDS-
|
|
4087
|
-
--IDS-
|
|
4088
|
-
--IDS-
|
|
4089
|
-
--IDS-
|
|
4090
|
-
--IDS-
|
|
4091
|
-
--IDS-INPUT_COLOR: var(--IDS-COLOR-NEUTRAL-20);
|
|
4092
|
-
--IDS-INPUT__ICON--DISABLED__FILL: var(--IDS-COLOR-NEUTRAL-50);
|
|
4105
|
+
--IDS-CHECKBOX--INVALID_BACKGROUND-IMAGE: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='4' ry='4' stroke='%23c12143' stroke-width='1' stroke-dasharray='4%2c 4%2c 4%2c 4' stroke-dashoffset='16' stroke-linecap='butt'/%3e%3c/svg%3e");
|
|
4106
|
+
--IDS-CHECKBOX--DISABLED_BACKGROUND-IMAGE: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='4' ry='4' stroke='%23808285' stroke-width='1' stroke-dasharray='3%2c 3%2c 3%2c 3' stroke-dashoffset='16' stroke-linecap='butt'/%3e%3c/svg%3e");
|
|
4107
|
+
/* Input */
|
|
4108
|
+
--IDS-INPUT__COLOR: var(--IDS-COLOR-NEUTRAL-20);
|
|
4109
|
+
--IDS-INPUT__BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-95);
|
|
4110
|
+
--IDS-INPUT__BORDER: 1px solid var(--IDS-COLOR-ACCENT-40);
|
|
4111
|
+
--IDS-INPUT__BORDER-RADIUS: 0.625rem;
|
|
4112
|
+
--IDS-INPUT__BOX-SHADOW: inset 0 5px 10px rgba(99, 100, 102, 0.2);
|
|
4113
|
+
--IDS-INPUT__HEIGHT: 3rem;
|
|
4114
|
+
--IDS-INPUT__PADDING: 0 1.25rem;
|
|
4115
|
+
--IDS-INPUT--DISABLED__ICON-FILL: var(--IDS-COLOR-NEUTRAL-50);
|
|
4093
4116
|
--IDS-INPUT--SEARCH__BORDER-RADIUS: 0.625rem;
|
|
4094
|
-
|
|
4117
|
+
--IDS-INPUT--SEARCH__HEIGHT-MOBILE: 3rem;
|
|
4118
|
+
--IDS-INPUT--SEARCH__HEIGHT-DESKTOP: 3.75rem;
|
|
4119
|
+
--IDS-INPUT--SEARCH__FONT-SIZE-MOBILE: 1rem;
|
|
4120
|
+
--IDS-INPUT--SEARCH__FONT-SIZE-DESKTOP: 1.125rem;
|
|
4121
|
+
--IDS-INPUT--SEARCH__PADDING-LEFT: 3.625rem;
|
|
4122
|
+
--IDS-INPUT__ICON-RIGHT: 1.25rem;
|
|
4123
|
+
--IDS-INPUT__ICON-PADDING-RIGHT: 2.75rem;
|
|
4124
|
+
/* Textarea */
|
|
4125
|
+
--IDS-TEXTAREA__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-90);
|
|
4126
|
+
--IDS-TEXTAREA-RESIZER-IMAGE: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' version='1.1' id='svg3' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs3' /%3E%3Cpath d='m 32.750455,4.7161113 c 0.976302,0.9763023 0.529818,2.224356 -0.446491,3.2006654 L 7.8342826,32.274835 c -0.9763016,0.976302 -2.3917967,1.70185 -3.3680997,0.725548 -0.9763016,-0.976303 -0.9763016,-2.559232 0,-3.535533 L 29.214921,4.7161113 c 0.976309,-0.9763094 2.559232,-0.9763023 3.535534,0 z' fill='%23396291' id='path2' /%3E%3Cpath d='m 32.876716,22.751757 c 0.384143,-0.71897 0.316192,-1.636374 -0.299366,-2.19609 -0.663607,-0.603405 -1.851199,-0.577406 -2.545108,-0.158033 l -10.906246,10.66159 c -0.440031,0.431082 -0.426797,1.850489 0.270247,2.410027 0.620863,0.498385 2.193013,0.576181 2.633044,0.145099 z' fill='%23396291' id='path1' style='fill:%23396291;fill-opacity:1;stroke-width:0.446104' /%3E%3C/svg%3E%0A");
|
|
4127
|
+
--IDS-TEXTAREA-PADDING-Y: 0.75rem;
|
|
4128
|
+
/* Radio */
|
|
4095
4129
|
--IDS-RADIO__BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-95);
|
|
4096
4130
|
--IDS-RADIO__BORDER: 0.0625rem solid var(--IDS-COLOR-ACCENT-40);
|
|
4097
4131
|
--IDS-RADIO--CHECKED__BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-40);
|
|
4098
4132
|
--IDS-RADIO--DISABLED__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-99);
|
|
4099
4133
|
--IDS-RADIO--CHECKED-DISABLED__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-50);
|
|
4100
4134
|
--IDS-RADIO--INVALID__BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-90);
|
|
4101
|
-
|
|
4102
|
-
--IDS-RADIO--INVALID_BACKGROUND-IMAGE: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='100' ry='100' stroke='%23c12143' stroke-width='1' stroke-dasharray='4%2c 4%2c 4%2c 4' stroke-dashoffset='16' stroke-linecap='butt'/%3e%3c/svg%3e");
|
|
4103
|
-
/* SELECT */
|
|
4135
|
+
/* Select */
|
|
4104
4136
|
--IDS-SELECT__CHEVRON-ICON: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" role="img" fill="none" width="7" height="12" style="" viewBox="0 0 7 12" aria-hidden="true"><!--%3Flit$300635863$--><g><path d="M4.1627 5.57692L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683418 0.292893 0.292893C0.683418 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L6.28403 4.86982C6.67456 5.26034 6.67455 5.89351 6.28402 6.28404L1.7071 10.8609C1.31657 11.2514 0.683406 11.2514 0.292886 10.8608C-0.0976345 10.4703 -0.0976276 9.83715 0.292901 9.44663L4.1627 5.57692Z" fill="%23396291"></path></g></svg>');
|
|
4105
4137
|
--IDS-SELECT--INVALID__CHEVRON-ICON: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" role="img" fill="none" width="7" height="12" style="" viewBox="0 0 7 12" aria-hidden="true"><!--%3Flit$300635863$--><g><path d="M4.1627 5.57692L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683418 0.292893 0.292893C0.683418 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L6.28403 4.86982C6.67456 5.26034 6.67455 5.89351 6.28402 6.28404L1.7071 10.8609C1.31657 11.2514 0.683406 11.2514 0.292886 10.8608C-0.0976345 10.4703 -0.0976276 9.83715 0.292901 9.44663L4.1627 5.57692Z" fill="%23c12143"></path></g></svg>');
|
|
4106
4138
|
--IDS-SELECT--DISABLED__CHEVRON-ICON: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" role="img" fill="none" width="7" height="12" style="" viewBox="0 0 7 12" aria-hidden="true"><!--%3Flit$300635863$--><g><path d="M4.1627 5.57692L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683418 0.292893 0.292893C0.683418 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L6.28403 4.86982C6.67456 5.26034 6.67455 5.89351 6.28402 6.28404L1.7071 10.8609C1.31657 11.2514 0.683406 11.2514 0.292886 10.8608C-0.0976345 10.4703 -0.0976276 9.83715 0.292901 9.44663L4.1627 5.57692Z" fill="%23808285"></path></g></svg>');
|
|
4107
4139
|
--IDS-SELECT__CHEVRON-ICON--HOVER: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" role="img" fill="none" width="7" height="12" style="" viewBox="0 0 7 12" aria-hidden="true"><!--%3Flit$300635863$--><g><path d="M4.1627 5.57692L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683418 0.292893 0.292893C0.683418 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L6.28403 4.86982C6.67456 5.26034 6.67455 5.89351 6.28402 6.28404L1.7071 10.8609C1.31657 11.2514 0.683406 11.2514 0.292886 10.8608C-0.0976345 10.4703 -0.0976276 9.83715 0.292901 9.44663L4.1627 5.57692Z" fill="rgb(59,66,102)"></path></g></svg>');
|
|
4140
|
+
--IDS-SELECT__LINE-HEIGHT: 2.875rem;
|
|
4141
|
+
/* Select multiple */
|
|
4142
|
+
--IDS-SELECT-MULTIPLE-DROPDOWN__BORDER-RADIUS: 10px;
|
|
4108
4143
|
/* Toggle */
|
|
4109
4144
|
--IDS-TOGGLE__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-50);
|
|
4110
4145
|
--IDS-TOGGLE--CHECKED__BACKGROUND-COLOR: var(--IDS-COLOR-SUCCESS-40);
|
|
@@ -4115,9 +4150,6 @@ select::placeholder {
|
|
|
4115
4150
|
--IDS-TOGGLE--DISABLED__BACKGROUND-COLOR: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
|
|
4116
4151
|
--IDS-TOGGLE--DISABLED__BORDER: 1px dashed var(--IDS-COLOR-NEUTRAL-40);
|
|
4117
4152
|
--IDS-TOGGLE-KNOB--DISABLED_BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-90);
|
|
4118
|
-
/* Textarea */
|
|
4119
|
-
--IDS-TEXTAREA__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-90);
|
|
4120
|
-
--IDS-TEXTAREA-RESIZER-IMAGE: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' version='1.1' id='svg3' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs3' /%3E%3Cpath d='m 32.750455,4.7161113 c 0.976302,0.9763023 0.529818,2.224356 -0.446491,3.2006654 L 7.8342826,32.274835 c -0.9763016,0.976302 -2.3917967,1.70185 -3.3680997,0.725548 -0.9763016,-0.976303 -0.9763016,-2.559232 0,-3.535533 L 29.214921,4.7161113 c 0.976309,-0.9763094 2.559232,-0.9763023 3.535534,0 z' fill='%23396291' id='path2' /%3E%3Cpath d='m 32.876716,22.751757 c 0.384143,-0.71897 0.316192,-1.636374 -0.299366,-2.19609 -0.663607,-0.603405 -1.851199,-0.577406 -2.545108,-0.158033 l -10.906246,10.66159 c -0.440031,0.431082 -0.426797,1.850489 0.270247,2.410027 0.620863,0.498385 2.193013,0.576181 2.633044,0.145099 z' fill='%23396291' id='path1' style='fill:%23396291;fill-opacity:1;stroke-width:0.446104' /%3E%3C/svg%3E%0A");
|
|
4121
4153
|
/* Range */
|
|
4122
4154
|
--IDS-RANGE__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-90);
|
|
4123
4155
|
--IDS-RANGE-SELECTION__BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-40);
|
|
@@ -4125,69 +4157,30 @@ select::placeholder {
|
|
|
4125
4157
|
--IDS-RANGE-TICK-LINE__COLOR: var(--IDS-COLOR-NEUTRAL-50);
|
|
4126
4158
|
--IDS-RANGE-TICK__COLOR: var(--IDS-COLOR-NEUTRAL-20);
|
|
4127
4159
|
--IDS-RANGE-SELECTION--DISABLED__COLOR: var(--IDS-COLOR-NEUTRAL-50);
|
|
4128
|
-
/* Description list*/
|
|
4129
|
-
--IDS-DESCRIPTION-LIST__DISPLAY: flex;
|
|
4130
|
-
--IDS-DESCRIPTION-LIST__BORDER: 0;
|
|
4131
|
-
--IDS-DESCRIPTION-LIST__BORDER-RADIUS: 0;
|
|
4132
|
-
--IDS-DESCRIPTION-LIST__PADDING: 0;
|
|
4133
|
-
--IDS-DESCRIPTION-LIST-TERM__BACKGROUND-COLOR: transparent;
|
|
4134
|
-
--IDS-DESCRIPTION-LIST-DESCRIPTION__MARGIN-BOTTOM: 12px;
|
|
4135
|
-
--IDS-DESCRIPTION-LIST__DISPLAY--COLUMN: grid;
|
|
4136
|
-
--IDS-DESCRIPTION-LIST__BORDER--COLUMN: 1px solid var(--IDS-COLOR-PRIMARY-30);
|
|
4137
|
-
--IDS-DESCRIPTION-LIST__BORDER-RADIUS--COLUMN: 5px;
|
|
4138
|
-
--IDS-DESCRIPTION-LIST__PADDING--COLUMN: 8px 16px;
|
|
4139
|
-
--IDS-DESCRIPTION-LIST-TERM__BACKGROUND-COLOR--COLUMN: var(--IDS-COLOR-PRIMARY-90);
|
|
4140
|
-
--IDS-DESCRIPTION-LIST-DESCRIPTION__MARGIN-BOTTOM--COLUMN: 0;
|
|
4141
|
-
/* Side panel */
|
|
4142
|
-
--IDS-SIDE-PANEL__BORDER-COLOR: var(--IDS-COLOR-NEUTRAL-50);
|
|
4143
|
-
/********************************************************************
|
|
4144
|
-
/* Font families */
|
|
4145
|
-
--font-family_1: "Open Sans";
|
|
4146
|
-
--font-family_2: "Inter";
|
|
4147
|
-
--heading-1-font-family: var(--font-family_2);
|
|
4148
|
-
--heading-1-font-size: 3rem;
|
|
4149
|
-
--heading-1-font-size-small: 2.125rem;
|
|
4150
|
-
--heading-1-font-weight: 700;
|
|
4151
|
-
--heading-1-letter-spacing: -0.051875rem;
|
|
4152
|
-
--heading-1-line-height: 3.25rem;
|
|
4153
|
-
--heading-1-line-height-small: 2.5rem;
|
|
4154
|
-
--heading-1-small-font-family: var(--font-family_2);
|
|
4155
|
-
--heading-1-small-font-size: 2.25rem;
|
|
4156
|
-
--heading-1-small-font-size-small: 1.625rem;
|
|
4157
|
-
--heading-1-small-font-weight: 700;
|
|
4158
|
-
--heading-1-small-letter-spacing: -0.0625rem;
|
|
4159
|
-
--heading-1-small-line-height: 2.875rem;
|
|
4160
|
-
--heading-1-small-line-height-small: 2.125rem;
|
|
4161
|
-
--heading-2-font-family: var(--font-family_2);
|
|
4162
|
-
--heading-2-font-size: 1.5rem;
|
|
4163
|
-
--heading-2-font-size-small: 1.375rem;
|
|
4164
|
-
--heading-2-font-weight: 700;
|
|
4165
|
-
--heading-2-letter-spacing: -0.01875rem;
|
|
4166
|
-
--heading-2-line-height: 1.875rem;
|
|
4167
|
-
--heading-2-line-height-small: 1.75rem;
|
|
4168
|
-
--heading-3-font-family: var(--font-family_2);
|
|
4169
|
-
--heading-3-font-size: 1.25rem;
|
|
4170
|
-
--heading-3-font-weight: 700;
|
|
4171
|
-
--heading-3-letter-spacing: -0.025rem;
|
|
4172
|
-
--heading-3-line-height: 1.875rem;
|
|
4173
|
-
--heading-4-font-family: var(--font-family_2);
|
|
4174
|
-
--heading-4-font-size: 1rem;
|
|
4175
|
-
--heading-4-font-weight: 700;
|
|
4176
|
-
--heading-4-letter-spacing: 0;
|
|
4177
|
-
--heading-4-line-height: 1.25rem;
|
|
4178
|
-
--bullet-list-marker-color: var(--IDS-COLOR-PRIMARY-40);
|
|
4179
|
-
--bullet-list-marker-font-weight: bold;
|
|
4180
|
-
/**********************
|
|
4181
|
-
* General
|
|
4182
|
-
**********************/
|
|
4183
|
-
--IDS-BORDER-RADIUS: 10px;
|
|
4184
|
-
--IDS-BASE__FONT-COLOR: var(--IDS-COLOR-NEUTRAL-20);
|
|
4185
|
-
--IDS-SCROLL_BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-95);
|
|
4186
|
-
--IDS-SCROLL_COLOR: var(--IDS-COLOR-ACCENT-40);
|
|
4187
4160
|
/**********************
|
|
4188
|
-
*
|
|
4161
|
+
* COMPONENTS
|
|
4189
4162
|
**********************/
|
|
4190
4163
|
/* Alert */
|
|
4164
|
+
--IDS-ALERT__BUTTON__ICON__COLOR: var(--IDS-COLOR-NEUTRAL-20);
|
|
4165
|
+
--IDS-ALERT__HEADLINE__FONT-FAMILY: var(--font-family_1);
|
|
4166
|
+
--IDS-ALERT__HEADLINE__FONT-WEIGHT: 700;
|
|
4167
|
+
--IDS-ALERT--INFO__COLOR: var(--IDS-COLOR-NEUTRAL-20);
|
|
4168
|
+
--IDS-ALERT--INFO__BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-95);
|
|
4169
|
+
--IDS-ALERT--INFO__BORDER-COLOR: var(--IDS-COLOR-ACCENT-40);
|
|
4170
|
+
--IDS-ALERT--INFO__ICON__COLOR-1: var(--IDS-COLOR-ACCENT-30);
|
|
4171
|
+
--IDS-ALERT--INFO__ICON__COLOR-2: var(--IDS-COLOR-ACCENT-40);
|
|
4172
|
+
--IDS-ALERT--ATTENTION__BACKGROUND-COLOR: var(--IDS-COLOR-ATTENTION-95);
|
|
4173
|
+
--IDS-ALERT--ATTENTION__BORDER-COLOR: var(--IDS-COLOR-NEUTRAL-50);
|
|
4174
|
+
--IDS-ALERT--ATTENTION__ICON__COLOR-1: var(--IDS-COLOR-ACCENT-30);
|
|
4175
|
+
--IDS-ALERT--ATTENTION__ICON__COLOR-2: var(--IDS-COLOR-NEUTRAL-40);
|
|
4176
|
+
--IDS-ALERT--SUCCESS__BACKGROUND-COLOR: var(--IDS-COLOR-SUCCESS-99);
|
|
4177
|
+
--IDS-ALERT--SUCCESS__BORDER-COLOR: var(--IDS-COLOR-SUCCESS-40);
|
|
4178
|
+
--IDS-ALERT--SUCCESS__ICON__COLOR-1: var(--IDS-COLOR-SUCCESS-30);
|
|
4179
|
+
--IDS-ALERT--SUCCESS__ICON__COLOR-2: var(--IDS-COLOR-SUCCESS-40);
|
|
4180
|
+
--IDS-ALERT--ERROR__BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-90);
|
|
4181
|
+
--IDS-ALERT--ERROR__BORDER-COLOR: var(--IDS-COLOR-PRIMARY-40);
|
|
4182
|
+
--IDS-ALERT--ERROR__ICON__COLOR-1: var(--IDS-COLOR-PRIMARY-30);
|
|
4183
|
+
--IDS-ALERT--ERROR__ICON__COLOR-2: var(--IDS-COLOR-PRIMARY-40);
|
|
4191
4184
|
/* Alert global */
|
|
4192
4185
|
--IDS-ALERT-GLOBAL__BACKGROUND-COLOR: var(--IDS-COLOR-ATTENTION-95);
|
|
4193
4186
|
--IDS-ALERT-GLOBAL__COLOR: var(--IDS-COLOR-NEUTRAL-20);
|
|
@@ -4203,7 +4196,7 @@ select::placeholder {
|
|
|
4203
4196
|
--IDS-BADGE__COLOR: var(--IDS-COLOR-NEUTRAL-20);
|
|
4204
4197
|
--IDS-BADGE--PRIMARY__BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-40);
|
|
4205
4198
|
--IDS-BADGE--PRIMARY__BORDER: 1px solid var(--IDS-COLOR-PRIMARY-40);
|
|
4206
|
-
--IDS-BADGE--PRIMARY__COLOR:
|
|
4199
|
+
--IDS-BADGE--PRIMARY__COLOR: var(--IDS-COLOR-NEUTRAL-100);
|
|
4207
4200
|
--IDS-BADGE--NEUTRAL__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-90);
|
|
4208
4201
|
--IDS-BADGE--NEUTRAL__BORDER: 1px solid var(--IDS-COLOR-NEUTRAL-90);
|
|
4209
4202
|
--IDS-BADGE--INFO__BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-95);
|
|
@@ -4214,92 +4207,74 @@ select::placeholder {
|
|
|
4214
4207
|
--IDS-BADGE--SUCCESS__BORDER: 1px solid var(--IDS-COLOR-SUCCESS-40);
|
|
4215
4208
|
--IDS-BADGE--ERROR__BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-90);
|
|
4216
4209
|
--IDS-BADGE--ERROR__BORDER: 1px solid var(--IDS-COLOR-PRIMARY-40);
|
|
4217
|
-
--IDS-BADGE--SECONDARY__BACKGROUND-COLOR:
|
|
4210
|
+
--IDS-BADGE--SECONDARY__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-100);
|
|
4218
4211
|
--IDS-BADGE--SECONDARY__BORDER: 1px solid var(--IDS-COLOR-NEUTRAL-50);
|
|
4219
4212
|
/* Button */
|
|
4220
|
-
--
|
|
4221
|
-
--
|
|
4222
|
-
--
|
|
4223
|
-
--
|
|
4224
|
-
--
|
|
4225
|
-
--
|
|
4226
|
-
--
|
|
4227
|
-
--
|
|
4228
|
-
--
|
|
4229
|
-
--
|
|
4230
|
-
--
|
|
4231
|
-
--
|
|
4232
|
-
--
|
|
4233
|
-
--
|
|
4234
|
-
--
|
|
4235
|
-
--
|
|
4236
|
-
--
|
|
4237
|
-
--
|
|
4238
|
-
--
|
|
4239
|
-
--
|
|
4240
|
-
--
|
|
4241
|
-
--
|
|
4242
|
-
--
|
|
4243
|
-
--
|
|
4244
|
-
--
|
|
4245
|
-
--
|
|
4246
|
-
--
|
|
4247
|
-
--
|
|
4248
|
-
--
|
|
4249
|
-
--
|
|
4250
|
-
--
|
|
4251
|
-
--
|
|
4252
|
-
--
|
|
4253
|
-
--
|
|
4254
|
-
--
|
|
4255
|
-
--
|
|
4256
|
-
--
|
|
4257
|
-
--
|
|
4258
|
-
--
|
|
4259
|
-
--
|
|
4260
|
-
--
|
|
4261
|
-
--
|
|
4262
|
-
--
|
|
4263
|
-
--
|
|
4264
|
-
--
|
|
4265
|
-
--
|
|
4266
|
-
--
|
|
4267
|
-
--
|
|
4268
|
-
--
|
|
4269
|
-
--
|
|
4270
|
-
--
|
|
4271
|
-
--
|
|
4272
|
-
--
|
|
4273
|
-
--
|
|
4274
|
-
--
|
|
4275
|
-
--
|
|
4213
|
+
--IDS-BUTTON--S__FONT-SIZE: 0.875rem;
|
|
4214
|
+
--IDS-BUTTON--S__LINE-HEIGHT: 1rem;
|
|
4215
|
+
--IDS-BUTTON--S__PADDING: 5px 23px;
|
|
4216
|
+
--IDS-BUTTON--M__LINE-HEIGHT: 1.25rem;
|
|
4217
|
+
--IDS-BUTTON--M__FONT-SIZE: 1rem;
|
|
4218
|
+
--IDS-BUTTON--M__PADDING: 7px 27px;
|
|
4219
|
+
--IDS-BUTTON--L__FONT-SIZE: 1.125rem;
|
|
4220
|
+
--IDS-BUTTON--L__LINE-HEIGHT: 1.5rem;
|
|
4221
|
+
--IDS-BUTTON--L__PADDING: 11px 31px;
|
|
4222
|
+
--IDS-BUTTON__FONT-FAMILY: var(--font-family_2);
|
|
4223
|
+
--IDS-BUTTON__FONT-WEIGHT: 700;
|
|
4224
|
+
--IDS-BUTTON__BORDER: 1px solid var(--IDS-COLOR-ACCENT-40);
|
|
4225
|
+
--IDS-BUTTON__BORDER-RADIUS: 30px;
|
|
4226
|
+
--IDS-BUTTON__BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-40);
|
|
4227
|
+
--IDS-BUTTON__ICON-COLOR: var(--IDS-COLOR-NEUTRAL-100);
|
|
4228
|
+
--IDS-BUTTON__ICON-COLOR-2: var(--IDS-COLOR-NEUTRAL-100);
|
|
4229
|
+
--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-30);
|
|
4230
|
+
--IDS-BUTTON--ACTIVE__BOX-SHADOW: 0 2px 6px rgba(0, 0, 0, 0.2);
|
|
4231
|
+
--IDS-BUTTON--ACTIVE__ICON-COLOR: var(--IDS-COLOR-NEUTRAL-100);
|
|
4232
|
+
--IDS-BUTTON--ACTIVE__ICON-COLOR-2: var(--IDS-COLOR-NEUTRAL-100);
|
|
4233
|
+
--IDS-BUTTON--SECONDARY__COLOR: var(--IDS-COLOR-ACCENT-40);
|
|
4234
|
+
--IDS-BUTTON--SECONDARY__BORDER: 1px solid var(--IDS-COLOR-ACCENT-40);
|
|
4235
|
+
--IDS-BUTTON--SECONDARY__ICON-COLOR: var(--IDS-COLOR-ACCENT-40);
|
|
4236
|
+
--IDS-BUTTON--SECONDARY__ICON-COLOR-2: var(--IDS-COLOR-ACCENT-40);
|
|
4237
|
+
--IDS-BUTTON--SECONDARY__ICON-BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-95);
|
|
4238
|
+
--IDS-BUTTON--SECONDARY-HOVER__ICON-COLOR: var(--IDS-COLOR-ACCENT-40);
|
|
4239
|
+
--IDS-BUTTON--SECONDARY-HOVER__ICON-BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-30);
|
|
4240
|
+
--IDS-BUTTON--SECONDARY-ACTIVE__ICON-COLOR: var(--IDS-COLOR-NEUTRAL-100);
|
|
4241
|
+
--IDS-BUTTON--SECONDARY-ACTIVE__ICON-COLOR-2: var(--IDS-COLOR-NEUTRAL-100);
|
|
4242
|
+
--IDS-BUTTON--SECONDARY-ACTIVE__COLOR: var(--IDS-COLOR-ACCENT-40);
|
|
4243
|
+
--IDS-BUTTON--SECONDARY-ACTIVE__BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-95);
|
|
4244
|
+
--IDS-BUTTON--TERTIARY__COLOR: var(--IDS-COLOR-ACCENT-40);
|
|
4245
|
+
--IDS-BUTTON--TERTIARY-ACTIVE__COLOR: var(--IDS-COLOR-ACCENT-30);
|
|
4246
|
+
--IDS-BUTTON--TERTIARY__ICON-COLOR: var(--IDS-COLOR-ACCENT-40);
|
|
4247
|
+
--IDS-BUTTON--TERTIARY__ICON-COLOR-2: var(--IDS-COLOR-ACCENT-40);
|
|
4248
|
+
--IDS-BUTTON--TERTIARY-ACTIVE__ICON-COLOR: var(--IDS-COLOR-NEUTRAL-100);
|
|
4249
|
+
--IDS-BUTTON--TERTIARY-ACTIVE__ICON-COLOR-2: var(--IDS-COLOR-NEUTRAL-100);
|
|
4250
|
+
--IDS-BUTTON--DISABLED__COLOR: var(--IDS-COLOR-NEUTRAL-40);
|
|
4251
|
+
--IDS-BUTTON--DISABLED__BORDER: 1px solid var(--IDS-COLOR-NEUTRAL-50);
|
|
4252
|
+
--IDS-BUTTON--SEARCH__BORDER-RADIUS: 10px;
|
|
4253
|
+
--IDS-BUTTON--SEARCH-S__HEIGHT: 3rem;
|
|
4254
|
+
--IDS-BUTTON--SEARCH-S__FONT-SIZE: 1.125rem;
|
|
4255
|
+
--IDS-BUTTON--SEARCH-S__PADDING: 0.75rem 1.75rem;
|
|
4256
|
+
--IDS-BUTTON--SEARCH-M__HEIGHT: 3rem;
|
|
4257
|
+
--IDS-BUTTON--SEARCH-M__FONT-SIZE: 1.125rem;
|
|
4258
|
+
--IDS-BUTTON--SEARCH-M__PADDING: 0.75rem 1.75rem;
|
|
4259
|
+
--IDS-BUTTON--SEARCH-L__HEIGHT: 3.75rem;
|
|
4260
|
+
--IDS-BUTTON--SEARCH-L__FONT-SIZE: 1.5rem;
|
|
4261
|
+
--IDS-BUTTON--SEARCH-L__PADDING: 1rem 2rem;
|
|
4262
|
+
--IDS-BUTTON--SUBMIT__BORDER-RADIUS: 10px;
|
|
4263
|
+
--IDS-BUTTON--SUBMIT-S__HEIGHT: 3rem;
|
|
4264
|
+
--IDS-BUTTON--SUBMIT-S__FONT-SIZE: 1.125rem;
|
|
4265
|
+
--IDS-BUTTON--SUBMIT-S__PADDING: 0.75rem 1.75rem;
|
|
4266
|
+
--IDS-BUTTON--SUBMIT-M__HEIGHT: 3rem;
|
|
4267
|
+
--IDS-BUTTON--SUBMIT-M__FONT-SIZE: 1.125rem;
|
|
4268
|
+
--IDS-BUTTON--SUBMIT-M__PADDING: 0.75rem 1.75rem;
|
|
4269
|
+
--IDS-BUTTON--SUBMIT-L__HEIGHT: 3.75rem;
|
|
4270
|
+
--IDS-BUTTON--SUBMIT-L__FONT-SIZE: 1.5rem;
|
|
4271
|
+
--IDS-BUTTON--SUBMIT-L__PADDING: 1rem 2rem;
|
|
4272
|
+
--IDS-BUTTON--FAB__ICON-COLOR: var(--IDS-COLOR-PRIMARY-40);
|
|
4276
4273
|
/* Breadcrumbs */
|
|
4277
4274
|
--IDS-BREADCRUMBS__CHEVRON__COLOR: var(--IDS-COLOR-ACCENT-40);
|
|
4278
4275
|
--IDS-BREADCRUMBS__COLOR: var(--IDS-COLOR-NEUTRAL-20);
|
|
4279
|
-
/* Carousel */
|
|
4280
|
-
--carousel_background-color: white;
|
|
4281
|
-
--carousel_border: 1px solid #808285;
|
|
4282
|
-
--carousel_color: var(--IDS-COLOR-NEUTRAL-20);
|
|
4283
|
-
--carousel-icon_color: var(--IDS-COLOR-ACCENT-40);
|
|
4284
|
-
--carousel-icon_background-color: var(--IDS-COLOR-ACCENT-40);
|
|
4285
|
-
--carousel-headline_font-family: var(--font-family_2);
|
|
4286
|
-
--carousel_font-family: var(--font-family_1);
|
|
4287
|
-
--carousel-slides_background-color: var(--IDS-COLOR-NEUTRAL-99);
|
|
4288
|
-
--carousel-description_background-color: white;
|
|
4289
|
-
--carousel-description_color: var(--IDS-COLOR-NEUTRAL-40);
|
|
4290
|
-
/* Content navigation */
|
|
4291
|
-
--content-navigation_border: none;
|
|
4292
|
-
--content-navigation_border-radius: 10px;
|
|
4293
|
-
--content-navigation_border-top: 4px solid var(---IDS-COLOR-ACCENT-40);
|
|
4294
|
-
--content-navigation_font-family: var(--font-family_2);
|
|
4295
|
-
--content-navigation_font-weight: 700;
|
|
4296
|
-
--content-navigation_font-size: 1.25rem;
|
|
4297
|
-
--content-navigation_line-height: 24px;
|
|
4298
|
-
--content-navigation_letter-spacing: -0.4px;
|
|
4299
|
-
--content-navigation-separator_background-color: var(--IDS-COLOR-ACCENT-90);
|
|
4300
|
-
--content-navigation_color: var(--IDS-COLOR-NEUTRAL-20);
|
|
4301
4276
|
/* Card */
|
|
4302
|
-
--IDS-CARD__BACKGROUND:
|
|
4277
|
+
--IDS-CARD__BACKGROUND: var(--IDS-COLOR-NEUTRAL-100);
|
|
4303
4278
|
--IDS-CARD__BORDER: 1px solid rgba(218, 219, 220, 1);
|
|
4304
4279
|
--IDS-CARD__BORDER-RADIUS: 10px;
|
|
4305
4280
|
--IDS-CARD__BOX-SHADOW: 0px 0px 2px 0px rgba(0, 0, 0, 0.3);
|
|
@@ -4316,15 +4291,24 @@ select::placeholder {
|
|
|
4316
4291
|
--IDS-CARD--FILL__INNER__BORDER-INTERACTIVE: 1px solid var(--IDS-COLOR-ACCENT-30);
|
|
4317
4292
|
--IDS-CARD--FILL-2__INNER__BACKGROUND: var(--IDS-COLOR-ACCENT-95);
|
|
4318
4293
|
--IDS-CARD--FILL-2__INNER__BORDER: 1px solid var(--IDS-COLOR-ACCENT-30);
|
|
4319
|
-
/*
|
|
4320
|
-
|
|
4321
|
-
--
|
|
4322
|
-
--
|
|
4323
|
-
--
|
|
4324
|
-
--
|
|
4325
|
-
--
|
|
4326
|
-
--
|
|
4327
|
-
--
|
|
4294
|
+
/* Carousel */
|
|
4295
|
+
--carousel_background-color: var(--IDS-COLOR-NEUTRAL-100);
|
|
4296
|
+
--carousel_border: 1px solid #808285;
|
|
4297
|
+
--carousel_color: var(--IDS-COLOR-NEUTRAL-20);
|
|
4298
|
+
--carousel-icon_color: var(--IDS-COLOR-ACCENT-40);
|
|
4299
|
+
--carousel-icon_background-color: var(--IDS-COLOR-ACCENT-40);
|
|
4300
|
+
--carousel-headline_font-family: var(--font-family_2);
|
|
4301
|
+
--carousel_font-family: var(--font-family_1);
|
|
4302
|
+
--carousel-slides_background-color: var(--IDS-COLOR-NEUTRAL-99);
|
|
4303
|
+
--carousel-description_background-color: var(--IDS-COLOR-NEUTRAL-100);
|
|
4304
|
+
--carousel-description_color: var(--IDS-COLOR-NEUTRAL-40);
|
|
4305
|
+
/* Data Table */
|
|
4306
|
+
--IDS-DATA-TABLE-HEAD__BACKGROUND_COLOR: var(--IDS-COLOR-ACCENT-95);
|
|
4307
|
+
--IDS-DATA-TABLE-CELL__BACKGROUND_COLOR: var(--IDS-COLOR-NEUTRAL-100);
|
|
4308
|
+
--IDS-DATA-TABLE-CELL--SELECTED: var(--IDS-COLOR-ACCENT-95);
|
|
4309
|
+
--IDS-DATA-TABLE-CELL__BORDER_COLOR: var(--IDS-COLOR-ACCENT-30);
|
|
4310
|
+
--IDS-DATA-TABLE__BORDER-RADIUS: 10px 10px 5px 5px;
|
|
4311
|
+
--IDS-DATA-TABLE-HEAD__FONT-FAMILY: var(--font-family_2);
|
|
4328
4312
|
/* Date label */
|
|
4329
4313
|
--IDS-DATE-LABEL__DAY__FONT-FAMILY: var(--font-family_2);
|
|
4330
4314
|
--IDS-DATE-LABEL__DAY__COLOR: var(--IDS-COLOR-NEUTRAL-20);
|
|
@@ -4332,6 +4316,19 @@ select::placeholder {
|
|
|
4332
4316
|
--IDS-DATE-LABEL__MONTH__COLOR: var(--IDS-COLOR-NEUTRAL-40);
|
|
4333
4317
|
--IDS-DATE-LABEL__YEAR__FONT-FAMILY: var(--font-family_1);
|
|
4334
4318
|
--IDS-DATE-LABEL__YEAR__COLOR: var(--IDS-COLOR-NEUTRAL-40);
|
|
4319
|
+
/* Description list*/
|
|
4320
|
+
--IDS-DESCRIPTION-LIST__DISPLAY: flex;
|
|
4321
|
+
--IDS-DESCRIPTION-LIST__BORDER: 0;
|
|
4322
|
+
--IDS-DESCRIPTION-LIST__BORDER-RADIUS: 0;
|
|
4323
|
+
--IDS-DESCRIPTION-LIST__PADDING: 0;
|
|
4324
|
+
--IDS-DESCRIPTION-LIST-TERM__BACKGROUND-COLOR: transparent;
|
|
4325
|
+
--IDS-DESCRIPTION-LIST-DESCRIPTION__MARGIN-BOTTOM: 12px;
|
|
4326
|
+
--IDS-DESCRIPTION-LIST__DISPLAY--COLUMN: grid;
|
|
4327
|
+
--IDS-DESCRIPTION-LIST__BORDER--COLUMN: 1px solid var(--IDS-COLOR-PRIMARY-30);
|
|
4328
|
+
--IDS-DESCRIPTION-LIST__BORDER-RADIUS--COLUMN: 5px;
|
|
4329
|
+
--IDS-DESCRIPTION-LIST__PADDING--COLUMN: 8px 16px;
|
|
4330
|
+
--IDS-DESCRIPTION-LIST-TERM__BACKGROUND-COLOR--COLUMN: var(--IDS-COLOR-PRIMARY-90);
|
|
4331
|
+
--IDS-DESCRIPTION-LIST-DESCRIPTION__MARGIN-BOTTOM--COLUMN: 0;
|
|
4335
4332
|
/* Dialog */
|
|
4336
4333
|
--dialog_color: var(--IDS-COLOR-NEUTRAL-20);
|
|
4337
4334
|
--dialog_border-color: var(--IDS-COLOR-NEUTRAL-50);
|
|
@@ -4342,7 +4339,6 @@ select::placeholder {
|
|
|
4342
4339
|
/* Dropdown */
|
|
4343
4340
|
--IDS-DROPDOWN__BORDER-COLOR: var(--IDS-COLOR-NEUTRAL-50);
|
|
4344
4341
|
--IDS-DROPDOWN__LINK__BORDER-RADIUS: 5px;
|
|
4345
|
-
/* Error message content */
|
|
4346
4342
|
/* Expandable */
|
|
4347
4343
|
--expandable_border-bottom: 1px solid var(--IDS-COLOR-NEUTRAL-90);
|
|
4348
4344
|
--expandable-headline_color: var(--IDS-COLOR-ACCENT-40);
|
|
@@ -4373,7 +4369,7 @@ select::placeholder {
|
|
|
4373
4369
|
--footer-sub_padding-bottom: 20px;
|
|
4374
4370
|
--footer-sub_padding-top: 5px;
|
|
4375
4371
|
--footer-sub-text_color: var(--IDS-COLOR-NEUTRAL-100);
|
|
4376
|
-
--footer-sub-mobile_color:
|
|
4372
|
+
--footer-sub-mobile_color: var(--IDS-COLOR-NEUTRAL-100);
|
|
4377
4373
|
--footer-sub-mobile_background-color: var(--IDS-COLOR-PRIMARY-40);
|
|
4378
4374
|
--footer-sub-mobile_padding-top: 0px;
|
|
4379
4375
|
--footer-sub-link_color: var(--IDS-COLOR-NEUTRAL-100);
|
|
@@ -4405,45 +4401,157 @@ select::placeholder {
|
|
|
4405
4401
|
--header-nav-item-link_color: var(--IDS-COLOR-PRIMARY-35);
|
|
4406
4402
|
--header-nav-item-link_border-bottom: 1px solid #dfa9b8;
|
|
4407
4403
|
--header-nav-item-active_border-bottom: solid var(--IDS-COLOR-PRIMARY-40);
|
|
4404
|
+
/* Icons */
|
|
4405
|
+
--icon-color: var(--IDS-COLOR-ACCENT-40);
|
|
4406
|
+
--icon-color2: var(--IDS-COLOR-ACCENT-30);
|
|
4407
|
+
--icon-disabled-color: var(--IDS-COLOR-NEUTRAL-40);
|
|
4408
|
+
--icon-color-preset1: var(--IDS-COLOR-ACCENT-40);
|
|
4409
|
+
--icon-color2-preset1: var(--IDS-COLOR-ACCENT-30);
|
|
4410
|
+
--icon-color-preset2: var(--IDS-COLOR-PRIMARY-40);
|
|
4411
|
+
--icon-color2-preset2: var(--IDS-COLOR-PRIMARY-30);
|
|
4412
|
+
--icon-color-preset3: var(--IDS-COLOR-NEUTRAL-40);
|
|
4413
|
+
--icon-color2-preset3: var(--IDS-COLOR-NEUTRAL-20);
|
|
4414
|
+
--icon-color-preset4: var(--IDS-COLOR-NEUTRAL-100);
|
|
4415
|
+
--icon-color2-preset4: var(--IDS-COLOR-NEUTRAL-100);
|
|
4416
|
+
--IDS-ICON-COLOR: var(--IDS-COLOR-ACCENT-40);
|
|
4417
|
+
--IDS-ICON-ACTIVE-COLOR: var(--IDS-COLOR-ACCENT-30);
|
|
4408
4418
|
/* Link */
|
|
4409
4419
|
--IDS-LINK--FONT-FAMILY: var(--font-family_1);
|
|
4410
|
-
--
|
|
4411
|
-
--
|
|
4412
|
-
--
|
|
4413
|
-
--
|
|
4414
|
-
--
|
|
4415
|
-
--
|
|
4416
|
-
--
|
|
4417
|
-
--
|
|
4418
|
-
--
|
|
4419
|
-
--
|
|
4420
|
-
--
|
|
4421
|
-
--
|
|
4420
|
+
--IDS-LINK__COLOR: var(--IDS-COLOR-ACCENT-40);
|
|
4421
|
+
--IDS-LINK__HOVER-COLOR: var(--IDS-COLOR-ACCENT-30);
|
|
4422
|
+
--IDS-LINK-ICON__HOVER-BACKGROUND-COLOR: var(--header-nav-item-link_color);
|
|
4423
|
+
--IDS-LINK-ICON__HOVER-COLOR: var(--IDS-COLOR-NEUTRAL-100);
|
|
4424
|
+
--IDS-LINK--COLORPRESET-1__COLOR: var(--IDS-COLOR-ACCENT-40);
|
|
4425
|
+
--IDS-LINK--COLORPRESET-1__HOVER-COLOR: var(--IDS-COLOR-ACCENT-30);
|
|
4426
|
+
--IDS-LINK-ICON--COLORPRESET-1-ACTIVE__HOVER-BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-40);
|
|
4427
|
+
--IDS-LINK-ICON--COLORPRESET-1-ACTIVE__BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-30);
|
|
4428
|
+
--IDS-LINK--COLORPRESET-2__COLOR: var(--IDS-COLOR-PRIMARY-35);
|
|
4429
|
+
--IDS-LINK--COLORPRESET-2__HOVER-COLOR: var(--IDS-COLOR-PRIMARY-30);
|
|
4430
|
+
--IDS-LINK-ICON--COLORPRESET-2-ACTIVE__HOVER-BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-35);
|
|
4431
|
+
--IDS-LINK-ICON--COLORPRESET-2-ACTIVE__ACTIVE-BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-30);
|
|
4422
4432
|
/* List */
|
|
4423
|
-
--
|
|
4424
|
-
--
|
|
4425
|
-
--
|
|
4426
|
-
--
|
|
4427
|
-
|
|
4428
|
-
/* List pagniation */
|
|
4433
|
+
--IDS-LIST-HEADING__COLOR: var(--IDS-COLOR-ACCENT-40);
|
|
4434
|
+
--IDS-LIST__BORDER: var(--IDS-COLOR-NEUTRAL-90);
|
|
4435
|
+
--IDS-LIST__COLOR: var(--IDS-COLOR-NEUTRAL-20);
|
|
4436
|
+
--IDS-LIST-ITEM-INFO__COLOR: var(--IDS-COLOR-NEUTRAL-20);
|
|
4437
|
+
/* List pagination */
|
|
4429
4438
|
--IDS-LIST-PAGINATION-LINK--FONT-FAMILY: var(--font-family_2);
|
|
4439
|
+
/* Navigation content */
|
|
4440
|
+
--IDS-NAVIGATION-CONTENT__BORDER-RADIUS: 10px;
|
|
4441
|
+
--IDS-NAVIGATION-CONTENT__BORDER-TOP: 4px solid var(---IDS-COLOR-ACCENT-40);
|
|
4442
|
+
--IDS-NAVIGATION-CONTENT__COLOR: var(--IDS-COLOR-NEUTRAL-20);
|
|
4443
|
+
--IDS-NAVIGATION-CONTENT__FONT-FAMILY: var(--font-family_2);
|
|
4444
|
+
--IDS-NAVIGATION-CONTENT__FONT-WEIGHT: 700;
|
|
4445
|
+
--IDS-NAVIGATION-CONTENT__FONT-SIZE: 1.25rem;
|
|
4446
|
+
--IDS-NAVIGATION-CONTENT__LINE-HEIGHT: 24px;
|
|
4447
|
+
--IDS-NAVIGATION-CONTENT-SEPARATOR__BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-90);
|
|
4448
|
+
/* Navigation local */
|
|
4449
|
+
--IDS-NAVIGATION-LOCAL__BORDER: 1px solid rgba(193, 33, 67, 0.3);
|
|
4450
|
+
--IDS-NAVIGATION-LOCAL__HOVER-BORDER: 1px solid rgba(106, 0, 50, 0.3);
|
|
4451
|
+
--IDS-NAVIGATION-LOCAL--ACTIVE-BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-40);
|
|
4452
|
+
--IDS-NAVIGATION-LOCAL--ACTIVE-HOVER-BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-30);
|
|
4453
|
+
--IDS-NAVIGATION-LOCAL-LINK__COLOR: var(--IDS-LINK--COLORPRESET-2__COLOR);
|
|
4454
|
+
--IDS-NAVIGATION-LOCAL-LINK__HOVER-COLOR: var(--IDS-LINK--COLORPRESET-2__HOVER-COLOR);
|
|
4455
|
+
/* Notification */
|
|
4456
|
+
--IDS-NOTIFICATION-BADGE__BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-40);
|
|
4457
|
+
--IDS-NOTIFICATION-BADGE__COLOR: var(--IDS-COLOR-NEUTRAL-100);
|
|
4458
|
+
/* Progressbar */
|
|
4459
|
+
--IDS-PROGRESSBAR__BORDER-COLOR: 1px solid var(--IDS-COLOR-ACCENT-40);
|
|
4460
|
+
--IDS-PROGRESSBAR__PROGRESS-COLOR: var(--IDS-COLOR-ACCENT-40);
|
|
4461
|
+
--IDS-PROGRESSBAR__LABEL-COLOR: var(--IDS-COLOR-NEUTRAL-40);
|
|
4462
|
+
/* Popover */
|
|
4463
|
+
--popover_border: var(--IDS-COLOR-NEUTRAL-50);
|
|
4464
|
+
--popover-content_border-radius: 10px;
|
|
4465
|
+
--popover-icon_color: var(--IDS-COLOR-ACCENT-40);
|
|
4466
|
+
--popover-scroll-track_background: var(--IDS-COLOR-ACCENT-95);
|
|
4467
|
+
--popover-scroll-thumb_background: var(--IDS-COLOR-ACCENT-40);
|
|
4468
|
+
/* Side menu */
|
|
4469
|
+
--IDS-SIDE-MENU__ICON-COLOR: var(--IDS-COLOR-ACCENT-40);
|
|
4470
|
+
--IDS-SIDE-MENU--ACTIVE__HEADER-BORDER-COLOR: var(--IDS-COLOR-ACCENT-40);
|
|
4471
|
+
--IDS-SIDE-MENU__LINK-COLOR: var(--IDS-COLOR-ACCENT-40);
|
|
4472
|
+
--IDS-SIDE-MENU__LINK--HOVER-COLOR: var(--IDS-COLOR-ACCENT-30);
|
|
4473
|
+
--IDS-SIDE-MENU__LABEL--ACTIVE-BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-95);
|
|
4474
|
+
/* Side panel */
|
|
4475
|
+
--IDS-SIDE-PANEL__BORDER-COLOR: var(--IDS-COLOR-NEUTRAL-50);
|
|
4476
|
+
--IDS-SIDE-PANEL__FOOTER-BORDER-TOP-COLOR: var(--IDS-COLOR-NEUTRAL-90);
|
|
4477
|
+
--IDS-SIDE-PANEL__FOOTER-BORDER-BOTTOM-COLOR: var(--IDS-COLOR-ACCENT-40);
|
|
4478
|
+
/* Stepper */
|
|
4479
|
+
--IDS-STEP__BORDER: 1px solid var(--IDS-COLOR-NEUTRAL-50);
|
|
4480
|
+
--IDS-STEP__HEADLINE-COLOR: var(--IDS-COLOR-ACCENT-40);
|
|
4481
|
+
--IDS-STEP__HEADLINE-FONT-FAMILY: var(--font-family_2);
|
|
4482
|
+
--IDS-STEP__HEADLINE-LETTER-SPACING: -0.4px;
|
|
4483
|
+
--IDS-STEP__LABEL-COLOR: var(--IDS-COLOR-NEUTRAL-20);
|
|
4484
|
+
--IDS-STEP--DISABLED__HEADLINE-COLOR: var(--IDS-COLOR-NEUTRAL-40);
|
|
4485
|
+
--IDS-STEP--DISABLED__LABEL-COLOR: var(--IDS-COLOR-NEUTRAL-40);
|
|
4486
|
+
--IDS-STEP__AFTER-BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-50);
|
|
4487
|
+
--IDS-STEP__INDICATOR-BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-95);
|
|
4488
|
+
--IDS-STEP__INDICATOR-BORDER: 1px solid var(--IDS-COLOR-ACCENT-40);
|
|
4489
|
+
--IDS-STEP__INDICATOR-COLOR: var(--IDS-COLOR-ACCENT-40);
|
|
4490
|
+
--IDS-STEP__INDICATOR-FONT-FAMILY: var(--font-family_2);
|
|
4491
|
+
--IDS-STEP__CHEVRON-COLOR: var(--IDS-COLOR-ACCENT-40);
|
|
4492
|
+
--IDS-STEP--SELECTED__INDICATOR-BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-40);
|
|
4493
|
+
--IDS-STEP--VALID__INDICATOR-ICON-COLOR: var(--IDS-COLOR-SUCCESS-30);
|
|
4494
|
+
--IDS-STEP--VALID__INDICATOR-BACKGROUND-COLOR: var(--IDS-COLOR-SUCCESS-99);
|
|
4495
|
+
--IDS-STEP--VALID__INDICATOR-BORDER: 1px solid var(--IDS-COLOR-SUCCESS-40);
|
|
4496
|
+
--IDS-STEP--INVALID__INDICATOR-ICON-COLOR: var(--IDS-COLOR-PRIMARY-40);
|
|
4497
|
+
--IDS-STEP--INVALID__INDICATOR-BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-90);
|
|
4498
|
+
--IDS-STEP--INVALID__INDICATOR-BORDER: 1px dashed var(--IDS-COLOR-PRIMARY-40);
|
|
4499
|
+
/* Spinner */
|
|
4500
|
+
--IDS-SPINNER__COLOR: var(--IDS-COLOR-ACCENT-40);
|
|
4501
|
+
/* Table */
|
|
4502
|
+
--IDS-TABLE-HEAD__BACKGROUND_COLOR: var(--IDS-COLOR-PRIMARY-90);
|
|
4503
|
+
--IDS-TABLE-CELL__BORDER: 1px solid var(--IDS-COLOR-PRIMARY-40);
|
|
4504
|
+
--IDS-TABLE__BORDER-BOTTOM: 1px solid var(--IDS-COLOR-PRIMARY-40);
|
|
4505
|
+
--IDS-TABLE__BORDER-RADIUS: 10px 10px 0 0;
|
|
4506
|
+
/* Tab */
|
|
4507
|
+
--IDS-TABS_BORDER-BOTTOM: 4px solid var(--IDS-COLOR-ACCENT-90);
|
|
4508
|
+
--IDS-TAB_BORDER: 1px solid transparent;
|
|
4509
|
+
--IDS-TAB--SELECTED-BORDER: 1px solid var(--IDS-COLOR-NEUTRAL-50);
|
|
4510
|
+
--IDS-TAB_BORDER-RADIUS: 10px 10px 0px 0px;
|
|
4511
|
+
--IDS-TAB_COLOR: var(--IDS-COLOR-ACCENT-40);
|
|
4512
|
+
--IDS-TAB--SELECTED_COLOR: var(--IDS-COLOR-ACCENT-30);
|
|
4513
|
+
--IDS-TAB-ICON_COLOR: var(--IDS-COLOR-ACCENT-40);
|
|
4514
|
+
--IDS-TAB-ICON_COLOR2: var(--IDS-COLOR-ACCENT-30);
|
|
4515
|
+
--IDS-TAB--SELECTED_BOX-SHADOW: 0px 0px 4px rgba(0, 0, 0, 0.3);
|
|
4516
|
+
--IDS-TAB--SELECTED--AFTER_BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-30);
|
|
4517
|
+
--IDS-TAB--SELECTED--AFTER_HEIGHT: 5px;
|
|
4518
|
+
--IDS-TAB--SELECTED--AFTER_BOTTOM: -5px;
|
|
4519
|
+
--IDS-TAB--SELECTED--BEFORE_CONTENT: none;
|
|
4520
|
+
/* Tag */
|
|
4521
|
+
--IDS-TAG__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-100);
|
|
4522
|
+
--IDS-TAG__FONT-FAMILY: var(--font-family_2);
|
|
4523
|
+
--IDS-TAG__BORDER-COLOR: var(--IDS-COLOR-NEUTRAL-50);
|
|
4524
|
+
--IDS-TAG__BORDER-RADIUS: 5px;
|
|
4525
|
+
--IDS-TAG__PADDING: 7px 15px;
|
|
4526
|
+
--IDS-TAG__ICON__COLOR: var(--IDS-COLOR-ACCENT-40);
|
|
4527
|
+
--IDS-TAG__COLOR: var(--IDS-COLOR-NEUTRAL-20);
|
|
4528
|
+
--IDS-TAG--INTERACTIVE__COLOR: var(--IDS-COLOR-ACCENT-40);
|
|
4529
|
+
--IDS-TAG--INTERACTIVE__COLOR--HOVER: var(--IDS-COLOR-ACCENT-30);
|
|
4530
|
+
--IDS-TAG--INTERACTIVE__FONT-WEIGHT: 700;
|
|
4531
|
+
--IDS-TAG--INTERACTIVE__BORDER-COLOR: var(--IDS-COLOR-ACCENT-40);
|
|
4532
|
+
/* Tooltip */
|
|
4533
|
+
--IDS-TOOLTIP__COLOR: var(--IDS-COLOR-NEUTRAL-20);
|
|
4534
|
+
--IDS-TOOLTIP__BORDER-COLOR: var(--IDS-COLOR-NEUTRAL-40);
|
|
4535
|
+
/**********************
|
|
4536
|
+
* MOBILE MENU
|
|
4537
|
+
**********************/
|
|
4430
4538
|
/* Mobile Menu Remake */
|
|
4431
4539
|
/* Level 1 */
|
|
4432
4540
|
--IDS-MOBILE-MENU-ITEM--FONT-FAMILY: var(--font-family_1);
|
|
4433
4541
|
--IDS-MOBILE-MENU-ITEM__INNER__BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-40);
|
|
4434
|
-
--IDS-MOBILE-MENU-ITEM__INNER__COLOR:
|
|
4435
|
-
--IDS-MOBILE-MENU-ITEM__INNER__BORDER-BOTTOM: 1px solid
|
|
4542
|
+
--IDS-MOBILE-MENU-ITEM__INNER__COLOR: var(--IDS-COLOR-NEUTRAL-100);
|
|
4543
|
+
--IDS-MOBILE-MENU-ITEM__INNER__BORDER-BOTTOM: 1px solid var(--IDS-COLOR-NEUTRAL-100);
|
|
4436
4544
|
--IDS-MOBILE-MENU-ITEM__INNER__FONT-WEIGHT: 700;
|
|
4437
|
-
--IDS-MOBILE-MENU-ITEM__ICON__COLOR:
|
|
4545
|
+
--IDS-MOBILE-MENU-ITEM__ICON__COLOR: var(--IDS-COLOR-NEUTRAL-100);
|
|
4438
4546
|
/* Level 1 - ACTIVE */
|
|
4439
|
-
--IDS-MOBILE-MENU-ITEM--ACTIVE__INNER__BEFORE__BACKGROUND-COLOR:
|
|
4547
|
+
--IDS-MOBILE-MENU-ITEM--ACTIVE__INNER__BEFORE__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-100);
|
|
4440
4548
|
--IDS-MOBILE-MENU-ITEM--ACTIVE__INNER__BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-40);
|
|
4441
4549
|
/* Level 1 - HAS-CHILDREN */
|
|
4442
4550
|
--IDS-MOBILE-MENU-ITEM--HAS-CHILDREN__INNER__BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-40);
|
|
4443
4551
|
/* Level 1 - EXPANDED */
|
|
4444
4552
|
--IDS-MOBILE-MENU-ITEM--EXPANDED__INNER__BEFORE__BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-40);
|
|
4445
4553
|
/* Level 1 - OUTLINE */
|
|
4446
|
-
--IDS-MOBILE-MENU-ITEM--FOCUS--OUTLINE-COLOR:
|
|
4554
|
+
--IDS-MOBILE-MENU-ITEM--FOCUS--OUTLINE-COLOR: var(--IDS-COLOR-NEUTRAL-100);
|
|
4447
4555
|
/* Level 1 - SECONDARY */
|
|
4448
4556
|
--IDS-MOBILE-MENU-ITEM--SECONDARY--FOCUS--OUTLINE-COLOR: var(--focus-outline_color);
|
|
4449
4557
|
--IDS-MOBILE-MENU-ITEM--SECONDARY__INNER__COLOR: var(--IDS-COLOR-PRIMARY-40);
|
|
@@ -4453,22 +4561,22 @@ select::placeholder {
|
|
|
4453
4561
|
);
|
|
4454
4562
|
/* Level 1 - Variation 2 */
|
|
4455
4563
|
--IDS-MOBILE-MENU--2-ITEM__INNER__BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-40);
|
|
4456
|
-
--IDS-MOBILE-MENU--2-ITEM__INNER__COLOR:
|
|
4457
|
-
--IDS-MOBILE-MENU--2-ITEM__INNER__BORDER-BOTTOM: 1px solid
|
|
4564
|
+
--IDS-MOBILE-MENU--2-ITEM__INNER__COLOR: var(--IDS-COLOR-NEUTRAL-100);
|
|
4565
|
+
--IDS-MOBILE-MENU--2-ITEM__INNER__BORDER-BOTTOM: 1px solid var(--IDS-COLOR-NEUTRAL-100);
|
|
4458
4566
|
--IDS-MOBILE-MENU--2-ITEM__INNER__FONT-WEIGHT: 700;
|
|
4459
|
-
--IDS-MOBILE-MENU--2-ITEM__ICON__COLOR:
|
|
4460
|
-
--IDS-MOBILE-MENU--2-ITEM__INNER__BORDER-BOTTOM-COLOR:
|
|
4567
|
+
--IDS-MOBILE-MENU--2-ITEM__ICON__COLOR: var(--IDS-COLOR-NEUTRAL-100);
|
|
4568
|
+
--IDS-MOBILE-MENU--2-ITEM__INNER__BORDER-BOTTOM-COLOR: var(--IDS-COLOR-NEUTRAL-100);
|
|
4461
4569
|
/* Level 1 - ACTIVE */
|
|
4462
|
-
--IDS-MOBILE-MENU--2-ITEM--ACTIVE__INNER__BEFORE__BACKGROUND-COLOR:
|
|
4570
|
+
--IDS-MOBILE-MENU--2-ITEM--ACTIVE__INNER__BEFORE__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-100);
|
|
4463
4571
|
--IDS-MOBILE-MENU--2-ITEM--ACTIVE__INNER__BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-40);
|
|
4464
4572
|
/* Level 1 - HAS-CHILDREN */
|
|
4465
4573
|
--IDS-MOBILE-MENU--2-ITEM--HAS-CHILDREN__INNER__BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-40);
|
|
4466
4574
|
/* Level 1 - EXPANDED */
|
|
4467
4575
|
--IDS-MOBILE-MENU--2-ITEM--EXPANDED__INNER__BEFORE__BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-40);
|
|
4468
4576
|
/* Level 1 - OUTLINE */
|
|
4469
|
-
--IDS-MOBILE-MENU--2-ITEM--FOCUS--OUTLINE-COLOR:
|
|
4577
|
+
--IDS-MOBILE-MENU--2-ITEM--FOCUS--OUTLINE-COLOR: var(--IDS-COLOR-NEUTRAL-100);
|
|
4470
4578
|
/* Level 2 */
|
|
4471
|
-
--IDS-MOBILE-MENU-ITEM--2__INNER__BACKGROUND-COLOR:
|
|
4579
|
+
--IDS-MOBILE-MENU-ITEM--2__INNER__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-100);
|
|
4472
4580
|
--IDS-MOBILE-MENU-ITEM--2__INNER__COLOR: var(--IDS-COLOR-PRIMARY-40);
|
|
4473
4581
|
--IDS-MOBILE-MENU-ITEM--2__INNER__BORDER-BOTTOM: 1px solid var(--IDS-COLOR-PRIMARY-40);
|
|
4474
4582
|
--IDS-MOBILE-MENU-ITEM--2__INNER__FONT-WEIGHT: normal;
|
|
@@ -4485,12 +4593,12 @@ select::placeholder {
|
|
|
4485
4593
|
--IDS-MOBILE-MENU-ITEM--2--FOCUS--OUTLINE-COLOR: var(--focus-outline_color);
|
|
4486
4594
|
/* Level 2 - Variation 2 */
|
|
4487
4595
|
--IDS-MOBILE-MENU--2-ITEM--2__INNER__BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-40);
|
|
4488
|
-
--IDS-MOBILE-MENU--2-ITEM--2__INNER__COLOR:
|
|
4489
|
-
--IDS-MOBILE-MENU--2-ITEM--2__INNER__BORDER-BOTTOM-COLOR:
|
|
4490
|
-
--IDS-MOBILE-MENU--2-ITEM--2__ICON__COLOR:
|
|
4596
|
+
--IDS-MOBILE-MENU--2-ITEM--2__INNER__COLOR: var(--IDS-COLOR-NEUTRAL-100);
|
|
4597
|
+
--IDS-MOBILE-MENU--2-ITEM--2__INNER__BORDER-BOTTOM-COLOR: var(--IDS-COLOR-NEUTRAL-100);
|
|
4598
|
+
--IDS-MOBILE-MENU--2-ITEM--2__ICON__COLOR: var(--IDS-COLOR-NEUTRAL-100);
|
|
4491
4599
|
--IDS-MOBILE-MENU--2-ITEM--2__INNER__FONT-WEIGHT: normal;
|
|
4492
4600
|
/* Level 2 - VARIATION 2 - ACTIVE */
|
|
4493
|
-
--IDS-MOBILE-MENU--2-ITEM--2--ACTIVE__INNER__BACKGROUND-COLOR:
|
|
4601
|
+
--IDS-MOBILE-MENU--2-ITEM--2--ACTIVE__INNER__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-100);
|
|
4494
4602
|
--IDS-MOBILE-MENU--2-ITEM--2--ACTIVE__INNER__FONT-WEIGHT: normal;
|
|
4495
4603
|
/* Level 2 - VARIATION 2 - HAS-CHILDREN */
|
|
4496
4604
|
--IDS-MOBILE-MENU--2-ITEM--2--HAS-CHILDREN__INNER__FONT-WEIGHT: normal;
|
|
@@ -4499,21 +4607,21 @@ select::placeholder {
|
|
|
4499
4607
|
--IDS-COLOR-PRIMARY-35
|
|
4500
4608
|
);
|
|
4501
4609
|
/* Level 2 - OUTLINE */
|
|
4502
|
-
--IDS-MOBILE-MENU--2-ITEM--2--FOCUS--OUTLINE-COLOR:
|
|
4610
|
+
--IDS-MOBILE-MENU--2-ITEM--2--FOCUS--OUTLINE-COLOR: var(--IDS-COLOR-NEUTRAL-100);
|
|
4503
4611
|
--IDS-MOBILE-MENU--2-ITEM--2__INNER__BEFORE__BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-40);
|
|
4504
4612
|
/* Level 3 - OUTLINE */
|
|
4505
4613
|
--IDS-MOBILE-MENU-ITEM--3--FOCUS--OUTLINE-COLOR: var(--focus-outline_color);
|
|
4506
4614
|
/* Level 3 - VARIATION 2 */
|
|
4507
4615
|
--IDS-MOBILE-MENU--2-ITEM--3__INNER__BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-40);
|
|
4508
|
-
--IDS-MOBILE-MENU--2-ITEM--3__INNER__COLOR:
|
|
4509
|
-
--IDS-MOBILE-MENU--2-ITEM--3__INNER__BORDER-BOTTOM-COLOR:
|
|
4510
|
-
--IDS-MOBILE-MENU--2-ITEM--3__ICON__COLOR:
|
|
4616
|
+
--IDS-MOBILE-MENU--2-ITEM--3__INNER__COLOR: var(--IDS-COLOR-NEUTRAL-100);
|
|
4617
|
+
--IDS-MOBILE-MENU--2-ITEM--3__INNER__BORDER-BOTTOM-COLOR: var(--IDS-COLOR-NEUTRAL-100);
|
|
4618
|
+
--IDS-MOBILE-MENU--2-ITEM--3__ICON__COLOR: var(--IDS-COLOR-NEUTRAL-100);
|
|
4511
4619
|
--IDS-MOBILE-MENU--2-ITEM-3__INNER__FONT-WEIGHT: normal;
|
|
4512
4620
|
/* Level 3 - VARIATION 2 - ACTIVE */
|
|
4513
4621
|
--IDS-MOBILE-MENU--2-ITEM--3--ACTIVE__INNER__BEFORE__BACKGROUND-COLOR: var(
|
|
4514
4622
|
--IDS-COLOR-PRIMARY-40
|
|
4515
4623
|
);
|
|
4516
|
-
--IDS-MOBILE-MENU--2-ITEM--3--ACTIVE__INNER__BACKGROUND-COLOR:
|
|
4624
|
+
--IDS-MOBILE-MENU--2-ITEM--3--ACTIVE__INNER__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-100);
|
|
4517
4625
|
--IDS-MOBILE-MENU--2-ITEM--3--ACTIVE__INNER__FONT-WEIGHT: normal;
|
|
4518
4626
|
/* Level 3 - VARIATION 2 - HAS-CHILDREN */
|
|
4519
4627
|
--IDS-MOBILE-MENU--2-ITEM--3--HAS-CHILDREN__INNER__FONT-WEIGHT: normal;
|
|
@@ -4522,136 +4630,16 @@ select::placeholder {
|
|
|
4522
4630
|
--IDS-COLOR-PRIMARY-40
|
|
4523
4631
|
);
|
|
4524
4632
|
--IDS-MOBILE-MENU--2-ITEM--3__INNER__BEFORE__BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-40);
|
|
4525
|
-
/* Progressbar */
|
|
4526
|
-
--progressbar_border: 1px solid var(--IDS-COLOR-ACCENT-40);
|
|
4527
|
-
--progressbar-fill_background-color: var(--IDS-COLOR-ACCENT-40);
|
|
4528
|
-
--progressbar_color: var(--IDS-COLOR-NEUTRAL-40);
|
|
4529
|
-
/* Popover */
|
|
4530
|
-
--popover_border: var(--IDS-COLOR-NEUTRAL-50);
|
|
4531
|
-
--popover-content_border-radius: 10px;
|
|
4532
|
-
--popover-icon_color: var(--IDS-COLOR-ACCENT-40);
|
|
4533
|
-
--popover-scroll-track_background: var(--IDS-COLOR-ACCENT-95);
|
|
4534
|
-
--popover-scroll-thumb_background: var(--IDS-COLOR-ACCENT-40);
|
|
4535
4633
|
/*Variation 2*/
|
|
4536
4634
|
--mobile-MENU-ITEM--2_box-shadow: inset rgb(53 53 53 / 20%) 0px 2px 4px 0px;
|
|
4537
4635
|
--mobile-MENU-ITEM--2-first_box-shadow: 0 2px 4px 0 rgb(53 53 53 / 20%);
|
|
4538
4636
|
--mobile-menu-sub-item-2_background-color: var(--IDS-COLOR-NEUTRAL-100);
|
|
4539
4637
|
--mobile-menu-sub-item-2-no-children_border-left: var(--IDS-COLOR-NEUTRAL-100);
|
|
4540
4638
|
--mobile-menu-avatar-link: var(--IDS-COLOR-PRIMARY-35);
|
|
4541
|
-
/* Local navigation */
|
|
4542
|
-
--navigation-local_border-top: 1px solid rgba(193, 33, 67, 0.3);
|
|
4543
|
-
--navigation-local-hover_border-top: 1px solid rgba(106, 0, 50, 0.3);
|
|
4544
|
-
--navigation-local-focus_border-left: var(--IDS-COLOR-PRIMARY-40);
|
|
4545
|
-
--navigation-local-selected_border-left: var(--IDS-COLOR-PRIMARY-40);
|
|
4546
|
-
--navigation-local-active_border-left: var(--IDS-COLOR-PRIMARY-30);
|
|
4547
|
-
--navigation-link_color: var(--link-colorpreset-2_color);
|
|
4548
|
-
--navigation-link-hover_color: var(--link-colorpreset-2-hover_color);
|
|
4549
|
-
--navigation-local_letter-spacing: -0.03125rem;
|
|
4550
|
-
/* Notification */
|
|
4551
|
-
--IDS-NOTIFICATION-BADGE__BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-40);
|
|
4552
|
-
--IDS-NOTIFICATION-BADGE__COLOR: white;
|
|
4553
|
-
/* Tag */
|
|
4554
|
-
--IDS-TAG__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-100);
|
|
4555
|
-
--IDS-TAG__FONT-FAMILY: var(--font-family_2);
|
|
4556
|
-
--IDS-TAG__BORDER-COLOR: var(--IDS-COLOR-NEUTRAL-50);
|
|
4557
|
-
--IDS-TAG__BORDER-RADIUS: 5px;
|
|
4558
|
-
--IDS-TAG__PADDING: 7px 15px;
|
|
4559
|
-
--IDS-TAG__ICON__COLOR: var(--IDS-COLOR-ACCENT-40);
|
|
4560
|
-
--IDS-TAG__COLOR: var(--IDS-COLOR-NEUTRAL-20);
|
|
4561
|
-
--IDS-TAG--INTERACTIVE__COLOR: var(--IDS-COLOR-ACCENT-40);
|
|
4562
|
-
--IDS-TAG--INTERACTIVE__COLOR--HOVER: var(--IDS-COLOR-ACCENT-30);
|
|
4563
|
-
--IDS-TAG--INTERACTIVE__FONT-WEIGHT: 700;
|
|
4564
|
-
--IDS-TAG--INTERACTIVE__BORDER-COLOR: var(--IDS-COLOR-ACCENT-40);
|
|
4565
|
-
/* Tooltip */
|
|
4566
|
-
--tooltip_color: var(--IDS-COLOR-NEUTRAL-20);
|
|
4567
|
-
--tooltip_border-color: var(--IDS-COLOR-NEUTRAL-40);
|
|
4568
|
-
/* Select */
|
|
4569
|
-
--select_border: 1px solid var(--IDS-COLOR-ACCENT-40);
|
|
4570
|
-
--select_padding-right: 60px;
|
|
4571
|
-
--select-multiple-dropdown_border-radius: 10px;
|
|
4572
|
-
/* Stepper */
|
|
4573
|
-
--stepper-step_border: 1px solid var(--IDS-COLOR-NEUTRAL-50);
|
|
4574
|
-
--stepper-step-headline_color: var(--IDS-COLOR-ACCENT-40);
|
|
4575
|
-
--stepper-step-headline_font-family: var(--font-family_2);
|
|
4576
|
-
--stepper-step-headline_letter-spacing: -0.4px;
|
|
4577
|
-
--stepper-step-headline--disabled_color: var(--IDS-COLOR-NEUTRAL-40);
|
|
4578
|
-
--stepper-step-label_color: var(--IDS-COLOR-NEUTRAL-20);
|
|
4579
|
-
--stepper-step-label--disabled_color: var(--IDS-COLOR-NEUTRAL-40);
|
|
4580
|
-
--stepper-step--after_background-color: var(--IDS-COLOR-NEUTRAL-50);
|
|
4581
|
-
--stepper-step-indicator_background-color: var(--IDS-COLOR-ACCENT-95);
|
|
4582
|
-
--stepper-step-indicator_border: 1px solid var(--IDS-COLOR-ACCENT-40);
|
|
4583
|
-
--stepper-step-indicator_color: var(--IDS-COLOR-ACCENT-40);
|
|
4584
|
-
--stepper-step-indicator_font-family: var(--font-family_2);
|
|
4585
|
-
--stepper-step-chevron_color: var(--IDS-COLOR-ACCENT-40);
|
|
4586
|
-
--stepper-step-indicator-selected_background-color: var(--IDS-COLOR-ACCENT-40);
|
|
4587
|
-
--stepper-step-indicator-valid-icon_color: var(--IDS-COLOR-SUCCESS-30);
|
|
4588
|
-
--stepper-step-indicator-valid_background-color: var(--IDS-COLOR-SUCCESS-99);
|
|
4589
|
-
--stepper-step-indicator-valid_border: 1px solid var(--IDS-COLOR-SUCCESS-40);
|
|
4590
|
-
--stepper-step-indicator-invalid-icon_color: var(--IDS-COLOR-PRIMARY-40);
|
|
4591
|
-
--stepper-step-indicator-invalid_background-color: var(--IDS-COLOR-PRIMARY-90);
|
|
4592
|
-
--stepper-step-indicator-invalid_border: 1px dashed var(--IDS-COLOR-PRIMARY-40);
|
|
4593
|
-
/* Spinner */
|
|
4594
|
-
--spinner_color: var(--IDS-COLOR-ACCENT-40);
|
|
4595
|
-
/* Tab */
|
|
4596
|
-
--IDS-TABS_BORDER-BOTTOM: 4px solid var(--IDS-COLOR-ACCENT-90);
|
|
4597
|
-
--IDS-TAB_BORDER: 1px solid transparent;
|
|
4598
|
-
--IDS-TAB--SELECTED-BORDER: 1px solid var(--IDS-COLOR-NEUTRAL-50);
|
|
4599
|
-
--IDS-TAB_BORDER-RADIUS: 10px 10px 0px 0px;
|
|
4600
|
-
--IDS-TAB_COLOR: var(--IDS-COLOR-ACCENT-40);
|
|
4601
|
-
--IDS-TAB--SELECTED_COLOR: var(--IDS-COLOR-ACCENT-30);
|
|
4602
|
-
--IDS-TAB-ICON_COLOR: var(--IDS-COLOR-ACCENT-40);
|
|
4603
|
-
--IDS-TAB-ICON_COLOR2: var(--IDS-COLOR-ACCENT-30);
|
|
4604
|
-
--IDS-TAB--SELECTED_BOX-SHADOW: 0px 0px 4px rgba(0, 0, 0, 0.3);
|
|
4605
|
-
--IDS-TAB--SELECTED--AFTER_BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-30);
|
|
4606
|
-
--IDS-TAB--SELECTED--AFTER_HEIGHT: 5px;
|
|
4607
|
-
--IDS-TAB--SELECTED--AFTER_BOTTOM: -5px;
|
|
4608
|
-
--IDS-TAB--SELECTED--BEFORE_CONTENT: none;
|
|
4609
|
-
/* Table */
|
|
4610
|
-
--IDS-TABLE-HEAD__BACKGROUND_COLOR: var(--IDS-COLOR-PRIMARY-90);
|
|
4611
|
-
--IDS-TABLE-CELL__BORDER: 1px solid var(--IDS-COLOR-PRIMARY-40);
|
|
4612
|
-
--IDS-TABLE__BORDER-BOTTOM: 1px solid var(--IDS-COLOR-PRIMARY-40);
|
|
4613
|
-
--IDS-TABLE__BORDER-RADIUS: 10px 10px 0 0;
|
|
4614
|
-
/* Data Table */
|
|
4615
|
-
--IDS-DATA-TABLE-HEAD__BACKGROUND_COLOR: var(--IDS-COLOR-ACCENT-95);
|
|
4616
|
-
--IDS-DATA-TABLE-CELL__BACKGROUND_COLOR: var(--IDS-COLOR-NEUTRAL-100);
|
|
4617
|
-
--IDS-DATA-TABLE-CELL--SELECTED: var(--IDS-COLOR-ACCENT-95);
|
|
4618
|
-
--IDS-DATA-TABLE-CELL__BORDER_COLOR: var(--IDS-COLOR-ACCENT-30);
|
|
4619
|
-
--IDS-DATA-TABLE__BORDER-RADIUS: 10px 10px 5px 5px;
|
|
4620
|
-
--IDS-DATA-TABLE-HEAD__FONT-FAMILY: var(--font-family_2);
|
|
4621
|
-
/* Time */
|
|
4622
|
-
--time-width: 100%;
|
|
4623
|
-
--time-height: 50px;
|
|
4624
|
-
--time-padding-left: 20px;
|
|
4625
|
-
--time-padding-right: 10px;
|
|
4626
|
-
--time-padding-top: 13px;
|
|
4627
|
-
--time-padding-bottom: 13px;
|
|
4628
|
-
--time-moz-padding-right: 50px;
|
|
4629
|
-
/* Focus */
|
|
4630
|
-
--IDS-FOCUS_OUTLINE: 2px solid var(--IDS-COLOR-NEUTRAL-40);
|
|
4631
|
-
--IDS-FOCUS_OUTLINE--LIGHT: 2px solid white;
|
|
4632
|
-
--IDS-FOCUS_OUTLINE-OFFSET: 2px;
|
|
4633
|
-
--focus_outline: 2px solid var(--IDS-COLOR-NEUTRAL-40);
|
|
4634
|
-
--focus_outline-offset: 2px;
|
|
4635
|
-
--focus-outline_color: var(--IDS-COLOR-NEUTRAL-40);
|
|
4636
|
-
--focus-outline-bright_color: white;
|
|
4637
|
-
/* Icons */
|
|
4638
|
-
--icon-color: var(--IDS-COLOR-ACCENT-40);
|
|
4639
|
-
--icon-color2: var(--IDS-COLOR-ACCENT-30);
|
|
4640
|
-
--icon-disabled-color: var(--IDS-COLOR-NEUTRAL-40);
|
|
4641
|
-
--icon-color-preset1: var(--IDS-COLOR-ACCENT-40);
|
|
4642
|
-
--icon-color2-preset1: var(--IDS-COLOR-ACCENT-30);
|
|
4643
|
-
--icon-color-preset2: var(--IDS-COLOR-PRIMARY-40);
|
|
4644
|
-
--icon-color2-preset2: var(--IDS-COLOR-PRIMARY-30);
|
|
4645
|
-
--icon-color-preset3: var(--IDS-COLOR-NEUTRAL-40);
|
|
4646
|
-
--icon-color2-preset3: var(--IDS-COLOR-NEUTRAL-20);
|
|
4647
|
-
--icon-color-preset4: white;
|
|
4648
|
-
--icon-color2-preset4: white;
|
|
4649
|
-
--IDS-ICON-COLOR: var(--IDS-COLOR-ACCENT-40);
|
|
4650
|
-
--IDS-ICON-ACTIVE-COLOR: var(--IDS-COLOR-ACCENT-30);
|
|
4651
4639
|
}
|
|
4652
4640
|
|
|
4653
4641
|
/**********************
|
|
4654
|
-
*
|
|
4642
|
+
* BASE
|
|
4655
4643
|
* Note that this CSS only affects the core components
|
|
4656
4644
|
**********************/
|
|
4657
4645
|
/* Input Search cancel icon */
|
|
@@ -4712,9 +4700,9 @@ ids-input input[type=search]::-webkit-search-results-decoration {
|
|
|
4712
4700
|
font-weight: var(--IDS-FORM__LABEL__FONT-WEIGHT);
|
|
4713
4701
|
letter-spacing: var(--IDS-FORM__LABEL__LETTER-SPACING);
|
|
4714
4702
|
line-height: var(--IDS-FORM__LABEL__HEIGHT);
|
|
4715
|
-
|
|
4716
|
-
min-height: 24px;
|
|
4703
|
+
min-height: 20px;
|
|
4717
4704
|
min-width: 24px;
|
|
4705
|
+
margin-bottom: 4px;
|
|
4718
4706
|
}
|
|
4719
4707
|
.ids-label.ids-label--clickable {
|
|
4720
4708
|
cursor: pointer;
|