@inera/ids-design 5.1.3 → 5.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (103) hide show
  1. package/components/alert/alert-lit.js +1 -1
  2. package/components/alert/alert.css +45 -43
  3. package/components/alert-global/alert-global-lit.js +1 -1
  4. package/components/alert-global/alert-global.css +14 -6
  5. package/components/breadcrumbs/breadcrumbs-lit.js +1 -1
  6. package/components/breadcrumbs/breadcrumbs.css +9 -5
  7. package/components/card/card.css +0 -8
  8. package/components/data-table/data-table-lit.js +1 -1
  9. package/components/data-table/data-table.css +76 -321
  10. package/components/dialog/dialog-lit.js +1 -1
  11. package/components/dialog/dialog.css +44 -38
  12. package/components/expandable/expandable-lit.js +1 -1
  13. package/components/expandable/expandable.css +16 -13
  14. package/components/footer/footer-lit.js +1 -1
  15. package/components/footer/footer.css +49 -53
  16. package/components/footer-1177/footer-1177-lit.js +1 -1
  17. package/components/footer-1177/footer-1177.css +46 -50
  18. package/components/footer-1177-admin/footer-1177-admin-lit.js +1 -1
  19. package/components/footer-1177-admin/footer-1177-admin.css +46 -50
  20. package/components/footer-1177-pro/footer-1177-pro-lit.js +1 -1
  21. package/components/footer-1177-pro/footer-1177-pro.css +38 -41
  22. package/components/footer-inera/footer-inera-lit.js +1 -1
  23. package/components/footer-inera/footer-inera.css +46 -50
  24. package/components/footer-inera-admin/footer-inera-admin-lit.js +1 -1
  25. package/components/footer-inera-admin/footer-inera-admin.css +46 -50
  26. package/components/form/group/group-lit.js +1 -1
  27. package/components/form/group/group.css +26 -8
  28. package/components/form/select-multiple/select-multiple-lit.js +1 -1
  29. package/components/form/select-multiple/select-multiple.css +90 -115
  30. package/components/grid/column/column.css +1 -1
  31. package/components/header-1177/composite-header-1177.css +12 -100
  32. package/components/header-1177/header-1177-avatar.css +0 -8
  33. package/components/header-1177/header-1177-item.css +7 -3
  34. package/components/header-1177/header-1177-nav-item-mobile.css +12 -8
  35. package/components/header-1177/header-1177-nav-item.css +7 -3
  36. package/components/header-1177/header-1177.css +7 -3
  37. package/components/header-1177-admin/header-1177-admin-avatar-mobile.css +7 -3
  38. package/components/header-1177-admin/header-1177-admin-avatar.css +11 -7
  39. package/components/header-1177-admin/header-1177-admin-item.css +7 -3
  40. package/components/header-1177-admin/header-1177-admin-nav-item-lit.js +1 -1
  41. package/components/header-1177-admin/header-1177-admin-nav-item.css +63 -23
  42. package/components/header-1177-admin/header-1177-admin.css +8 -4
  43. package/components/header-1177-pro/header-1177-pro-avatar-mobile.css +7 -3
  44. package/components/header-1177-pro/header-1177-pro-avatar.css +11 -7
  45. package/components/header-1177-pro/header-1177-pro-item.css +7 -3
  46. package/components/header-1177-pro/header-1177-pro-nav-item.css +7 -3
  47. package/components/header-1177-pro/header-1177-pro-nav-menu-mobile-lit.js +1 -1
  48. package/components/header-1177-pro/header-1177-pro-nav-menu-mobile.css +15 -11
  49. package/components/header-1177-pro/header-1177-pro-region-picker.css +11 -7
  50. package/components/header-1177-pro/header-1177-pro.css +7 -3
  51. package/components/header-inera/header-inera-item-lit.js +1 -1
  52. package/components/header-inera/header-inera-item.css +7 -17
  53. package/components/header-inera/header-inera-nav-item-lit.js +1 -1
  54. package/components/header-inera/header-inera-nav-item.css +13 -9
  55. package/components/header-inera/header-inera-nav-mobile.css +0 -8
  56. package/components/header-inera/header-inera-nav.css +0 -8
  57. package/components/header-inera/header-inera.css +7 -3
  58. package/components/header-inera-admin/composite-header-inera-admin.css +20 -137
  59. package/components/header-inera-admin/header-inera-admin-avatar-mobile.css +0 -8
  60. package/components/header-inera-admin/header-inera-admin-avatar.css +0 -8
  61. package/components/header-inera-admin/header-inera-admin-item-lit.js +1 -1
  62. package/components/header-inera-admin/header-inera-admin-item.css +12 -21
  63. package/components/header-inera-admin/header-inera-admin-nav-item-lit.js +1 -1
  64. package/components/header-inera-admin/header-inera-admin-nav-item.css +13 -9
  65. package/components/header-inera-admin/header-inera-admin-nav-mobile.css +0 -8
  66. package/components/header-inera-admin/header-inera-admin-nav.css +0 -8
  67. package/components/header-inera-admin/header-inera-admin.css +7 -3
  68. package/components/list/list-lit.js +1 -1
  69. package/components/list/list.css +10 -18
  70. package/components/mobile-menu/mobile-menu.css +7 -3
  71. package/components/pagination/data-pagination/data-pagination.css +0 -8
  72. package/components/pagination/list-pagination/list-pagination.css +7 -3
  73. package/components/popover/popover-content-lit.js +1 -1
  74. package/components/popover/popover-content.css +47 -25
  75. package/components/popover/popover-lit.js +1 -1
  76. package/components/popover/popover.css +1 -8
  77. package/components/side-panel/side-panel-lit.js +7 -0
  78. package/components/side-panel/side-panel.css +198 -0
  79. package/components/stepper/stepper.css +7 -3
  80. package/components/table/table.css +14 -12
  81. package/components/tabs/tab-panel.css +0 -8
  82. package/components/tabs/tab.css +7 -3
  83. package/components/tabs/tabs-lit.js +3 -5
  84. package/components/tabs/tabs.css +0 -8
  85. package/components/tag/tag.css +7 -3
  86. package/components/tooltip/tooltip-lit.js +1 -1
  87. package/components/tooltip/tooltip.css +4 -32
  88. package/global/_partials.css +8 -4
  89. package/global/global.css +772 -452
  90. package/global/util/util.css +4 -0
  91. package/package.json +1 -1
  92. package/themes/1177/1177.css +971 -765
  93. package/themes/1177-pro/1177-pro.css +979 -781
  94. package/themes/inera/inera-tokens.css +1 -0
  95. package/themes/inera/inera.css +978 -757
  96. package/themes/inera-admin/inera-admin.css +980 -761
  97. package/themes/reset.css +1 -1
  98. package/components/description-list/description-list-lit.js +0 -7
  99. package/components/description-list/description-list.css +0 -98
  100. package/components/form/toggle/toggle-lit.d.ts +0 -2
  101. package/components/form/toggle/toggle-lit.js +0 -7
  102. package/components/form/toggle/toggle.css +0 -154
  103. /package/components/{description-list/description-list-lit.d.ts → side-panel/side-panel-lit.d.ts} +0 -0
package/themes/reset.css CHANGED
@@ -21,7 +21,7 @@ body.ids,
21
21
 
22
22
  body.ids {
23
23
  background-color: var(--IDS-COLOR-NEUTRAL-100);
24
- color: black;
24
+ color: var(--IDS-COLOR-NEUTRAL-20);
25
25
  font-family: var(--font-family_1);
26
26
  font-size: 1rem;
27
27
  min-height: 100%;
@@ -1,7 +0,0 @@
1
- import { css, unsafeCSS } from 'lit';
2
-
3
- var css_248z = "@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-description-list{border:var(--IDS-DESCRIPTION-LIST__BORDER);border-radius:var(--IDS-DESCRIPTION-LIST__BORDER-RADIUS);display:var(--IDS-DESCRIPTION-LIST__DISPLAY);flex-direction:column;grid-template-columns:40% 60%;margin:0;padding:0;width:100%}.ids-description-list .ids-description-list__term{background-color:var(--IDS-DESCRIPTION-LIST-TERM__BACKGROUND-COLOR);border-bottom:var(--IDS-DESCRIPTION-LIST__BORDER);border-right:var(--IDS-DESCRIPTION-LIST__BORDER);color:var(--IDS-COLOR-NEUTRAL-20);font-family:var(--font-family_1);font-size:16px;font-style:normal;font-weight:700;line-height:24px;overflow-wrap:break-word;padding:var(--IDS-DESCRIPTION-LIST-TERM__PADDING)}.ids-description-list .ids-description-list__term:first-child{border-top-left-radius:var(--IDS-DESCRIPTION-LIST__BORDER-RADIUS)}.ids-description-list .ids-description-list__term:nth-last-child(2){border-bottom:0;border-bottom-left-radius:var(--IDS-DESCRIPTION-LIST__BORDER-RADIUS)}.ids-description-list .ids-description-list__description{border-bottom:var(--IDS-DESCRIPTION-LIST__BORDER);color:var(--IDS-COLOR-NEUTRAL-20);margin-bottom:var(--IDS-DESCRIPTION-LIST-DESCRIPTION__MARGIN-BOTTOM);padding:var(--IDS-DESCRIPTION-LIST-DESCRIPTION__PADDING)}.ids-description-list .ids-description-list__description:first-child{border-top-right-radius:var(--IDS-DESCRIPTION-LIST__BORDER-RADIUS)}.ids-description-list .ids-description-list__description:last-child{border-bottom:0;border-bottom-left-radius:var(--IDS-DESCRIPTION-LIST__BORDER-RADIUS)}.ids-description-list.ids-description-list--column{border:var(--IDS-DESCRIPTION-LIST__BORDER--COLUMN);border-radius:var(--IDS-DESCRIPTION-LIST__BORDER-RADIUS--COLUMN);display:var(--IDS-DESCRIPTION-LIST__DISPLAY--COLUMN)}.ids-description-list.ids-description-list--column .ids-description-list__term{background-color:var(--IDS-DESCRIPTION-LIST-TERM__BACKGROUND-COLOR--COLUMN);border-bottom:var(--IDS-DESCRIPTION-LIST__BORDER--COLUMN);border-right:var(--IDS-DESCRIPTION-LIST__BORDER--COLUMN);padding:var(--IDS-DESCRIPTION-LIST-TERM__PADDING--COLUMN)}.ids-description-list.ids-description-list--column .ids-description-list__term:first-child{border-top-left-radius:var(--IDS-DESCRIPTION-LIST__BORDER-RADIUS--COLUMN)}.ids-description-list.ids-description-list--column .ids-description-list__term:nth-last-child(2){border-bottom:0;border-bottom-left-radius:var(--IDS-DESCRIPTION-LIST__BORDER-RADIUS--COLUMN)}.ids-description-list.ids-description-list--column .ids-description-list__description{border-bottom:var(--IDS-DESCRIPTION-LIST__BORDER--COLUMN);margin-bottom:var(--IDS-DESCRIPTION-LIST-DESCRIPTION__MARGIN-BOTTOM--COLUMN);padding:var(--IDS-DESCRIPTION-LIST-DESCRIPTION__PADDING--COLUMN)}.ids-description-list.ids-description-list--column .ids-description-list__description:first-child{border-top-right-radius:var(--IDS-DESCRIPTION-LIST__BORDER-RADIUS--COLUMN)}.ids-description-list.ids-description-list--column .ids-description-list__description:last-child{border-bottom:0;border-bottom-left-radius:var(--IDS-DESCRIPTION-LIST__BORDER-RADIUS--COLUMN)}@media only screen and (min-width:640px){.ids-description-list{grid-template-columns:25% 75%}}";
4
-
5
- var descriptionListLit = css`${unsafeCSS(css_248z)}`;
6
-
7
- export { descriptionListLit as default };
@@ -1,98 +0,0 @@
1
- @media (max-width: 1023px) {
2
- .ids-desktop {
3
- display: none !important;
4
- }
5
- }
6
-
7
- @media (min-width: 1024px) {
8
- .ids-mobile {
9
- display: none !important;
10
- }
11
- }
12
-
13
- /* 1177 Typography - no margins */
14
- /*******
15
- * FORM
16
- ********/
17
- /*******
18
- * Accessibility
19
- ********/
20
- /* headings */
21
- .ids-description-list {
22
- margin: 0;
23
- padding: 0;
24
- width: 100%;
25
- border: var(--IDS-DESCRIPTION-LIST__BORDER);
26
- border-radius: var(--IDS-DESCRIPTION-LIST__BORDER-RADIUS);
27
- display: var(--IDS-DESCRIPTION-LIST__DISPLAY);
28
- flex-direction: column;
29
- grid-template-columns: 40% 60%;
30
- }
31
- .ids-description-list .ids-description-list__term {
32
- border-right: var(--IDS-DESCRIPTION-LIST__BORDER);
33
- border-bottom: var(--IDS-DESCRIPTION-LIST__BORDER);
34
- padding: var(--IDS-DESCRIPTION-LIST-TERM__PADDING);
35
- background-color: var(--IDS-DESCRIPTION-LIST-TERM__BACKGROUND-COLOR);
36
- color: var(--IDS-COLOR-NEUTRAL-20);
37
- font-family: var(--font-family_1);
38
- font-size: 16px;
39
- font-style: normal;
40
- font-weight: 700;
41
- line-height: 24px;
42
- overflow-wrap: break-word;
43
- }
44
- .ids-description-list .ids-description-list__term:first-child {
45
- border-top-left-radius: var(--IDS-DESCRIPTION-LIST__BORDER-RADIUS);
46
- }
47
- .ids-description-list .ids-description-list__term:nth-last-child(2) {
48
- border-bottom: 0;
49
- border-bottom-left-radius: var(--IDS-DESCRIPTION-LIST__BORDER-RADIUS);
50
- }
51
- .ids-description-list .ids-description-list__description {
52
- color: var(--IDS-COLOR-NEUTRAL-20);
53
- border-bottom: var(--IDS-DESCRIPTION-LIST__BORDER);
54
- padding: var(--IDS-DESCRIPTION-LIST-DESCRIPTION__PADDING);
55
- margin-bottom: var(--IDS-DESCRIPTION-LIST-DESCRIPTION__MARGIN-BOTTOM);
56
- }
57
- .ids-description-list .ids-description-list__description:first-child {
58
- border-top-right-radius: var(--IDS-DESCRIPTION-LIST__BORDER-RADIUS);
59
- }
60
- .ids-description-list .ids-description-list__description:last-child {
61
- border-bottom: 0;
62
- border-bottom-left-radius: var(--IDS-DESCRIPTION-LIST__BORDER-RADIUS);
63
- }
64
- .ids-description-list.ids-description-list--column {
65
- border: var(--IDS-DESCRIPTION-LIST__BORDER--COLUMN);
66
- border-radius: var(--IDS-DESCRIPTION-LIST__BORDER-RADIUS--COLUMN);
67
- display: var(--IDS-DESCRIPTION-LIST__DISPLAY--COLUMN);
68
- }
69
- .ids-description-list.ids-description-list--column .ids-description-list__term {
70
- border-right: var(--IDS-DESCRIPTION-LIST__BORDER--COLUMN);
71
- border-bottom: var(--IDS-DESCRIPTION-LIST__BORDER--COLUMN);
72
- padding: var(--IDS-DESCRIPTION-LIST-TERM__PADDING--COLUMN);
73
- background-color: var(--IDS-DESCRIPTION-LIST-TERM__BACKGROUND-COLOR--COLUMN);
74
- }
75
- .ids-description-list.ids-description-list--column .ids-description-list__term:first-child {
76
- border-top-left-radius: var(--IDS-DESCRIPTION-LIST__BORDER-RADIUS--COLUMN);
77
- }
78
- .ids-description-list.ids-description-list--column .ids-description-list__term:nth-last-child(2) {
79
- border-bottom: 0;
80
- border-bottom-left-radius: var(--IDS-DESCRIPTION-LIST__BORDER-RADIUS--COLUMN);
81
- }
82
- .ids-description-list.ids-description-list--column .ids-description-list__description {
83
- border-bottom: var(--IDS-DESCRIPTION-LIST__BORDER--COLUMN);
84
- padding: var(--IDS-DESCRIPTION-LIST-DESCRIPTION__PADDING--COLUMN);
85
- margin-bottom: var(--IDS-DESCRIPTION-LIST-DESCRIPTION__MARGIN-BOTTOM--COLUMN);
86
- }
87
- .ids-description-list.ids-description-list--column .ids-description-list__description:first-child {
88
- border-top-right-radius: var(--IDS-DESCRIPTION-LIST__BORDER-RADIUS--COLUMN);
89
- }
90
- .ids-description-list.ids-description-list--column .ids-description-list__description:last-child {
91
- border-bottom: 0;
92
- border-bottom-left-radius: var(--IDS-DESCRIPTION-LIST__BORDER-RADIUS--COLUMN);
93
- }
94
- @media only screen and (min-width: 640px) {
95
- .ids-description-list {
96
- grid-template-columns: 25% 75%;
97
- }
98
- }
@@ -1,2 +0,0 @@
1
- declare const _default: import("lit").CSSResult;
2
- export default _default;
@@ -1,7 +0,0 @@
1
- import { css, unsafeCSS } from 'lit';
2
-
3
- var css_248z = ".ids-label-wrapper,.ids-toggle-wrapper{align-items:center;display:inline-flex;gap:10px}.ids-toggle-wrapper .ids-toggle-control{border-radius:100px;display:inline-flex;height:30px;position:relative;width:60px}.ids-toggle-wrapper .ids-toggle-control:focus-within{outline:var(--focus_outline);outline-offset:var(--focus_outline-offset)}.ids-toggle-wrapper .ids-toggle-control ::slotted(input),.ids-toggle-wrapper .ids-toggle-control input{cursor:pointer;height:100%;opacity:0;position:absolute;width:100%;z-index:1}.ids-toggle-wrapper .ids-toggle-control.ids-toggle-control--disabled ::slotted(input),.ids-toggle-wrapper .ids-toggle-control.ids-toggle-control--disabled input{cursor:default}.ids-toggle-wrapper .ids-toggle-control.ids-toggle-control--disabled.ids-toggle-control--checked .ids-toggle-control-knob{-webkit-transform:translateX(28px);-ms-transform:translateX(28px);transform:translateX(28px)}.ids-toggle-wrapper .ids-toggle-control.ids-toggle-control--disabled.ids-toggle-control--checked:hover{cursor:default}.ids-toggle-wrapper .ids-toggle-control.ids-toggle-control--disabled .ids-toggle-control-slider{background-color:var(--IDS-TOGGLE--DISABLED__BACKGROUND-COLOR)!important;border:var(--IDS-TOGGLE-SLIDER--DISABLED__BORDER)}.ids-toggle-wrapper .ids-toggle-control.ids-toggle-control--disabled .ids-toggle-control-knob{background-color:var(--IDS-TOGGLE-KNOB--DISABLED__BACKGROUND-COLOR);bottom:2px}.ids-toggle-wrapper .ids-toggle-control .ids-toggle-control-slider{background-color:#ccc;background-color:var(--IDS-TOGGLE__BACKGROUND-COLOR);border-radius:100px;bottom:0;cursor:pointer;left:0;position:absolute;right:0;top:0;-webkit-transition:.4s;transition:.4s}.ids-toggle-wrapper .ids-toggle-control .ids-toggle-control-knob{align-items:center;background-color:#fff;border-radius:100px;bottom:3px;content:\"\";display:flex;height:24px;justify-content:center;left:3px;max-height:24px;max-width:24px;position:absolute;-webkit-transition:.3s;transition:all .3s;width:24px}.ids-toggle-wrapper .ids-toggle-control .ids-toggle-control-knob .ids-icon{right:auto;top:auto;transform:none}.ids-toggle-wrapper .ids-toggle-control .ids-toggle-control-knob .ids-toggle-control-know--inactive{display:block}.ids-toggle-wrapper .ids-toggle-control .ids-toggle-control-knob .ids-toggle-control-know--active{display:none}.ids-toggle-wrapper .ids-label,.ids-toggle-wrapper .ids-toggle-label,.ids-toggle-wrapper ::slotted(.ids-label),.ids-toggle-wrapper label{cursor:pointer}.ids-toggle-wrapper .ids-label.ids-label--disabled,.ids-toggle-wrapper .ids-toggle-label.ids-toggle-label--disabled,.ids-toggle-wrapper ::slotted(.ids-label.ids-label--disabled){cursor:default}.ids-toggle-control input:checked+.ids-toggle-control-slider{background-color:var(--IDS-TOGGLE--ACTIVE__BACKGROUND-COLOR)}.ids-toggle-control input:checked+.ids-toggle-control-slider:before{-webkit-transform:translateX(26px);-ms-transform:translateX(26px);transform:translateX(26px)}.ids-toggle-control input:checked+.ids-toggle-control-slider .ids-toggle-control-knob{-webkit-transform:translateX(29px);-ms-transform:translateX(29px);transform:translateX(29px)}.ids-toggle-control input:checked+.ids-toggle-control-slider .ids-toggle-control-knob .ids-toggle-control-know--inactive{display:none}.ids-toggle-control input:checked+.ids-toggle-control-slider .ids-toggle-control-knob .ids-toggle-control-know--active{display:block}.ids-toggle-control.ids-toggle-control--checked .ids-toggle-control-knob,.ids-toggle-control.ids-toggle-control--checked input:checked+.ids-toggle-control-knob{-webkit-transform:translateX(29px);-ms-transform:translateX(29px);transform:translateX(29px)}.ids-toggle-control.ids-toggle-control--checked .ids-toggle-control-knob .ids-toggle-control-know--inactive,.ids-toggle-control.ids-toggle-control--checked input:checked+.ids-toggle-control-knob .ids-toggle-control-know--inactive{display:none}.ids-toggle-control.ids-toggle-control--checked .ids-toggle-control-knob .ids-toggle-control-know--active,.ids-toggle-control.ids-toggle-control--checked input:checked+.ids-toggle-control-knob .ids-toggle-control-know--active{display:block}.ids-toggle-control.ids-toggle-control--checked .ids-toggle-control-slider{background-color:var(--IDS-TOGGLE--ACTIVE__BACKGROUND-COLOR)}.ids-toggle-control.ids-toggle-control--checked .ids-toggle-control-slider:before{-webkit-transform:translateX(26px);-ms-transform:translateX(26px);transform:translateX(26px)}";
4
-
5
- var toggleLit = css`${unsafeCSS(css_248z)}`;
6
-
7
- export { toggleLit as default };
@@ -1,154 +0,0 @@
1
- /* 1177 Typography - no margins */
2
- /*******
3
- * FORM
4
- ********/
5
- .ids-label-wrapper {
6
- display: inline-flex;
7
- gap: 10px;
8
- align-items: center;
9
- }
10
-
11
- /*******
12
- * Accessibility
13
- ********/
14
- /* headings */
15
- .ids-toggle-wrapper {
16
- display: inline-flex;
17
- align-items: center;
18
- gap: 10px;
19
- }
20
- .ids-toggle-wrapper .ids-toggle-control {
21
- display: inline-flex;
22
- width: 60px;
23
- height: 30px;
24
- border-radius: 100px;
25
- position: relative;
26
- }
27
- .ids-toggle-wrapper .ids-toggle-control:focus-within {
28
- outline: var(--focus_outline);
29
- outline-offset: var(--focus_outline-offset);
30
- }
31
- .ids-toggle-wrapper .ids-toggle-control ::slotted(input),
32
- .ids-toggle-wrapper .ids-toggle-control input {
33
- position: absolute;
34
- cursor: pointer;
35
- opacity: 0;
36
- width: 100%;
37
- height: 100%;
38
- z-index: 1;
39
- }
40
- .ids-toggle-wrapper .ids-toggle-control.ids-toggle-control--disabled ::slotted(input),
41
- .ids-toggle-wrapper .ids-toggle-control.ids-toggle-control--disabled input {
42
- cursor: default;
43
- }
44
- .ids-toggle-wrapper .ids-toggle-control.ids-toggle-control--disabled.ids-toggle-control--checked .ids-toggle-control-knob {
45
- -webkit-transform: translateX(28px);
46
- -ms-transform: translateX(28px);
47
- transform: translateX(28px);
48
- }
49
- .ids-toggle-wrapper .ids-toggle-control.ids-toggle-control--disabled.ids-toggle-control--checked:hover {
50
- cursor: default;
51
- }
52
- .ids-toggle-wrapper .ids-toggle-control.ids-toggle-control--disabled .ids-toggle-control-slider {
53
- background-color: var(--IDS-TOGGLE--DISABLED__BACKGROUND-COLOR) !important;
54
- border: var(--IDS-TOGGLE-SLIDER--DISABLED__BORDER);
55
- }
56
- .ids-toggle-wrapper .ids-toggle-control.ids-toggle-control--disabled .ids-toggle-control-knob {
57
- background-color: var(--IDS-TOGGLE-KNOB--DISABLED__BACKGROUND-COLOR);
58
- bottom: 2px;
59
- }
60
- .ids-toggle-wrapper .ids-toggle-control .ids-toggle-control-slider {
61
- position: absolute;
62
- cursor: pointer;
63
- top: 0;
64
- left: 0;
65
- right: 0;
66
- bottom: 0;
67
- border-radius: 100px;
68
- background-color: #ccc;
69
- background-color: var(--IDS-TOGGLE__BACKGROUND-COLOR);
70
- -webkit-transition: 0.4s;
71
- transition: 0.4s;
72
- }
73
- .ids-toggle-wrapper .ids-toggle-control .ids-toggle-control-knob {
74
- position: absolute;
75
- content: "";
76
- max-height: 24px;
77
- max-width: 24px;
78
- height: 24px;
79
- width: 24px;
80
- display: flex;
81
- align-items: center;
82
- justify-content: center;
83
- left: 3px;
84
- bottom: 3px;
85
- border-radius: 100px;
86
- background-color: white;
87
- -webkit-transition: 0.3s;
88
- transition: all 0.3s;
89
- }
90
- .ids-toggle-wrapper .ids-toggle-control .ids-toggle-control-knob .ids-icon {
91
- right: auto;
92
- top: auto;
93
- transform: none;
94
- }
95
- .ids-toggle-wrapper .ids-toggle-control .ids-toggle-control-knob .ids-toggle-control-know--inactive {
96
- display: block;
97
- }
98
- .ids-toggle-wrapper .ids-toggle-control .ids-toggle-control-knob .ids-toggle-control-know--active {
99
- display: none;
100
- }
101
- .ids-toggle-wrapper .ids-label,
102
- .ids-toggle-wrapper label,
103
- .ids-toggle-wrapper .ids-toggle-label,
104
- .ids-toggle-wrapper ::slotted(.ids-label) {
105
- cursor: pointer;
106
- }
107
- .ids-toggle-wrapper .ids-label.ids-label--disabled,
108
- .ids-toggle-wrapper .ids-toggle-label.ids-toggle-label--disabled,
109
- .ids-toggle-wrapper ::slotted(.ids-label.ids-label--disabled) {
110
- cursor: default;
111
- }
112
-
113
- /* The slider */
114
- .ids-toggle-control input:checked + .ids-toggle-control-slider {
115
- background-color: var(--IDS-TOGGLE--ACTIVE__BACKGROUND-COLOR);
116
- }
117
- .ids-toggle-control input:checked + .ids-toggle-control-slider:before {
118
- -webkit-transform: translateX(26px);
119
- -ms-transform: translateX(26px);
120
- transform: translateX(26px);
121
- }
122
- .ids-toggle-control input:checked + .ids-toggle-control-slider .ids-toggle-control-knob {
123
- -webkit-transform: translateX(29px);
124
- -ms-transform: translateX(29px);
125
- transform: translateX(29px);
126
- }
127
- .ids-toggle-control input:checked + .ids-toggle-control-slider .ids-toggle-control-knob .ids-toggle-control-know--inactive {
128
- display: none;
129
- }
130
- .ids-toggle-control input:checked + .ids-toggle-control-slider .ids-toggle-control-knob .ids-toggle-control-know--active {
131
- display: block;
132
- }
133
- .ids-toggle-control.ids-toggle-control--checked input:checked + .ids-toggle-control-knob,
134
- .ids-toggle-control.ids-toggle-control--checked .ids-toggle-control-knob {
135
- -webkit-transform: translateX(29px);
136
- -ms-transform: translateX(29px);
137
- transform: translateX(29px);
138
- }
139
- .ids-toggle-control.ids-toggle-control--checked input:checked + .ids-toggle-control-knob .ids-toggle-control-know--inactive,
140
- .ids-toggle-control.ids-toggle-control--checked .ids-toggle-control-knob .ids-toggle-control-know--inactive {
141
- display: none;
142
- }
143
- .ids-toggle-control.ids-toggle-control--checked input:checked + .ids-toggle-control-knob .ids-toggle-control-know--active,
144
- .ids-toggle-control.ids-toggle-control--checked .ids-toggle-control-knob .ids-toggle-control-know--active {
145
- display: block;
146
- }
147
- .ids-toggle-control.ids-toggle-control--checked .ids-toggle-control-slider {
148
- background-color: var(--IDS-TOGGLE--ACTIVE__BACKGROUND-COLOR);
149
- }
150
- .ids-toggle-control.ids-toggle-control--checked .ids-toggle-control-slider:before {
151
- -webkit-transform: translateX(26px);
152
- -ms-transform: translateX(26px);
153
- transform: translateX(26px);
154
- }