@inera/ids-design 5.1.2 → 5.2.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/alert/alert-lit.js +1 -1
- package/components/alert/alert.css +45 -43
- package/components/alert-global/alert-global-lit.js +1 -1
- package/components/alert-global/alert-global.css +14 -6
- package/components/breadcrumbs/breadcrumbs-lit.js +1 -1
- package/components/breadcrumbs/breadcrumbs.css +9 -5
- package/components/card/card.css +0 -8
- package/components/data-table/data-table-lit.js +1 -1
- package/components/data-table/data-table.css +76 -321
- package/components/dialog/dialog-lit.js +1 -1
- package/components/dialog/dialog.css +44 -38
- package/components/expandable/expandable-lit.js +1 -1
- package/components/expandable/expandable.css +16 -13
- package/components/footer/footer-lit.js +1 -1
- package/components/footer/footer.css +49 -53
- package/components/footer-1177/footer-1177-lit.js +1 -1
- package/components/footer-1177/footer-1177.css +46 -50
- package/components/footer-1177-admin/footer-1177-admin-lit.js +1 -1
- package/components/footer-1177-admin/footer-1177-admin.css +46 -50
- package/components/footer-1177-pro/footer-1177-pro-lit.js +1 -1
- package/components/footer-1177-pro/footer-1177-pro.css +38 -41
- package/components/footer-inera/footer-inera-lit.js +1 -1
- package/components/footer-inera/footer-inera.css +46 -50
- package/components/footer-inera-admin/footer-inera-admin-lit.js +1 -1
- package/components/footer-inera-admin/footer-inera-admin.css +46 -50
- package/components/form/group/group-lit.js +1 -1
- package/components/form/group/group.css +26 -8
- package/components/form/select-multiple/select-multiple-lit.js +1 -1
- package/components/form/select-multiple/select-multiple.css +90 -115
- package/components/grid/column/column.css +1 -1
- package/components/header-1177/composite-header-1177.css +40 -112
- package/components/header-1177/header-1177-avatar.css +0 -8
- package/components/header-1177/header-1177-item.css +7 -3
- package/components/header-1177/header-1177-nav-item-lit.js +1 -1
- package/components/header-1177/header-1177-nav-item-mobile.css +12 -8
- package/components/header-1177/header-1177-nav-item.css +35 -15
- package/components/header-1177/header-1177.css +7 -3
- package/components/header-1177-admin/header-1177-admin-avatar-mobile.css +7 -3
- package/components/header-1177-admin/header-1177-admin-avatar.css +11 -7
- package/components/header-1177-admin/header-1177-admin-item.css +7 -3
- package/components/header-1177-admin/header-1177-admin-nav-item-lit.js +1 -1
- package/components/header-1177-admin/header-1177-admin-nav-item.css +67 -27
- package/components/header-1177-admin/header-1177-admin.css +8 -4
- package/components/header-1177-pro/header-1177-pro-avatar-mobile.css +7 -3
- package/components/header-1177-pro/header-1177-pro-avatar.css +11 -7
- package/components/header-1177-pro/header-1177-pro-item.css +7 -3
- package/components/header-1177-pro/header-1177-pro-nav-item-lit.js +1 -1
- package/components/header-1177-pro/header-1177-pro-nav-item.css +11 -7
- 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 +15 -11
- package/components/header-1177-pro/header-1177-pro-region-picker.css +11 -7
- package/components/header-1177-pro/header-1177-pro.css +7 -3
- package/components/header-inera/header-inera-item-lit.js +1 -1
- package/components/header-inera/header-inera-item.css +7 -17
- package/components/header-inera/header-inera-nav-item-lit.js +1 -1
- package/components/header-inera/header-inera-nav-item.css +14 -10
- package/components/header-inera/header-inera-nav-mobile.css +0 -8
- package/components/header-inera/header-inera-nav.css +0 -8
- package/components/header-inera/header-inera.css +7 -3
- package/components/header-inera-admin/composite-header-inera-admin.css +21 -138
- package/components/header-inera-admin/header-inera-admin-avatar-mobile.css +0 -8
- package/components/header-inera-admin/header-inera-admin-avatar.css +0 -8
- package/components/header-inera-admin/header-inera-admin-item-lit.js +1 -1
- package/components/header-inera-admin/header-inera-admin-item.css +12 -21
- package/components/header-inera-admin/header-inera-admin-nav-item-lit.js +1 -1
- package/components/header-inera-admin/header-inera-admin-nav-item.css +14 -10
- package/components/header-inera-admin/header-inera-admin-nav-mobile.css +0 -8
- package/components/header-inera-admin/header-inera-admin-nav.css +0 -8
- package/components/header-inera-admin/header-inera-admin.css +7 -3
- package/components/list/list-lit.js +1 -1
- package/components/list/list.css +10 -18
- package/components/mobile-menu/mobile-menu.css +7 -3
- package/components/pagination/data-pagination/data-pagination.css +0 -8
- package/components/pagination/list-pagination/list-pagination.css +7 -3
- package/components/popover/popover-content-lit.js +1 -1
- package/components/popover/popover-content.css +47 -25
- package/components/popover/popover-lit.js +1 -1
- package/components/popover/popover.css +1 -8
- package/components/side-panel/side-panel-lit.js +7 -0
- package/components/side-panel/side-panel.css +198 -0
- package/components/stepper/stepper.css +7 -3
- package/components/table/table.css +14 -12
- package/components/tabs/tab-panel.css +0 -8
- package/components/tabs/tab.css +7 -3
- package/components/tabs/tabs-lit.js +3 -5
- package/components/tabs/tabs.css +0 -8
- package/components/tag/tag.css +7 -3
- package/components/tooltip/tooltip-lit.js +1 -1
- package/components/tooltip/tooltip.css +4 -32
- package/global/_partials.css +8 -4
- package/global/global.css +767 -453
- package/global/util/util.css +4 -0
- package/package.json +1 -1
- package/themes/1177/1177.css +965 -765
- package/themes/1177-pro/1177-pro.css +973 -781
- package/themes/inera/inera-tokens.css +1 -0
- package/themes/inera/inera.css +973 -758
- package/themes/inera-admin/inera-admin.css +975 -762
- package/themes/reset.css +1 -1
- package/components/description-list/description-list-lit.js +0 -7
- package/components/description-list/description-list.css +0 -98
- package/components/form/toggle/toggle-lit.d.ts +0 -2
- package/components/form/toggle/toggle-lit.js +0 -7
- package/components/form/toggle/toggle.css +0 -154
- /package/components/{description-list/description-list-lit.d.ts → side-panel/side-panel-lit.d.ts} +0 -0
|
@@ -1,11 +1,3 @@
|
|
|
1
|
-
/* 1177 Typography - no margins */
|
|
2
|
-
/*******
|
|
3
|
-
* FORM
|
|
4
|
-
********/
|
|
5
|
-
/*******
|
|
6
|
-
* Accessibility
|
|
7
|
-
********/
|
|
8
|
-
/* headings */
|
|
9
1
|
@media (max-width: 1023px) {
|
|
10
2
|
.ids-desktop {
|
|
11
3
|
display: none !important;
|
|
@@ -18,6 +10,18 @@
|
|
|
18
10
|
}
|
|
19
11
|
}
|
|
20
12
|
|
|
13
|
+
/*******
|
|
14
|
+
* BUTTONS
|
|
15
|
+
********/
|
|
16
|
+
/*******
|
|
17
|
+
* SCROLLBAR
|
|
18
|
+
********/
|
|
19
|
+
/*******
|
|
20
|
+
* FORM
|
|
21
|
+
********/
|
|
22
|
+
/*******
|
|
23
|
+
* A11Y
|
|
24
|
+
********/
|
|
21
25
|
.ids-header-inera-admin-nav-item {
|
|
22
26
|
display: none;
|
|
23
27
|
}
|
|
@@ -49,7 +53,7 @@
|
|
|
49
53
|
.ids-header-inera-admin-nav-item .ids-header-inera-admin-nav-item__link {
|
|
50
54
|
display: block;
|
|
51
55
|
position: relative;
|
|
52
|
-
padding: 8px
|
|
56
|
+
padding: 8px 10px;
|
|
53
57
|
outline-offset: -2px !important;
|
|
54
58
|
text-decoration: none;
|
|
55
59
|
font-size: 18px;
|
|
@@ -191,7 +195,7 @@
|
|
|
191
195
|
padding: 40px 88px 50px;
|
|
192
196
|
}
|
|
193
197
|
}
|
|
194
|
-
@media only screen and (max-width:
|
|
198
|
+
@media only screen and (max-width: 1024px) {
|
|
195
199
|
.ids-header-inera-admin-nav-item .nav-item {
|
|
196
200
|
font-size: 1.0625rem !important;
|
|
197
201
|
}
|
|
@@ -1,11 +1,15 @@
|
|
|
1
|
-
|
|
1
|
+
/*******
|
|
2
|
+
* BUTTONS
|
|
3
|
+
********/
|
|
4
|
+
/*******
|
|
5
|
+
* SCROLLBAR
|
|
6
|
+
********/
|
|
2
7
|
/*******
|
|
3
8
|
* FORM
|
|
4
9
|
********/
|
|
5
10
|
/*******
|
|
6
|
-
*
|
|
11
|
+
* A11Y
|
|
7
12
|
********/
|
|
8
|
-
/* headings */
|
|
9
13
|
@media (max-width: 1023px) {
|
|
10
14
|
.ids-desktop {
|
|
11
15
|
display: none !important;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { css, unsafeCSS } from 'lit';
|
|
2
2
|
|
|
3
|
-
var css_248z = "
|
|
3
|
+
var css_248z = ".ids-list{border-top:1px solid var(--list_border);display:flex;flex-direction:column}.ids-list-item{border-bottom:1px solid var(--list_border);color:var(--list_color)!important;display:flex;gap:20px;padding:20px 0;position:relative}.ids-list-item .ids-list-item__icon--hover{display:none}.ids-list-item .ids-icon,.ids-list-item .ids-list-item__icon,.ids-list-item .ids-list-item__icon--hover{align-self:flex-start;margin-right:8px;margin-top:.525rem}.ids-list-item .ids-list-item__date{font-family:Open Sans;font-size:.875rem;font-style:normal;font-weight:400;letter-spacing:1px;line-height:19px;text-transform:uppercase}.ids-list-item .date-label-col{padding-right:20px}.ids-list-item .ids-list-item__header,.ids-list-item ::slotted([slot=headline]){align-items:center!important;color:var(--link-colorpreset-1_color)!important;cursor:pointer;display:inline-flex!important;font-family:var(--heading-s-font-family)!important;font-size:1.375rem!important;font-style:normal!important;font-weight:var(--heading-s-font-weight)!important;letter-spacing:var(--heading-s-letter-spacing-desktop)!important;line-height:1.875rem!important;margin-bottom:0!important;margin-top:0!important;text-decoration:none}.ids-list-item .ids-list-item__body{margin-top:15px}.ids-list-item.ids-list-item--interactive{cursor:pointer}.ids-list-item.ids-list-item--interactive ::slotted([slot=interactive]){bottom:0!important;left:0!important;opacity:0!important;position:absolute!important;right:0!important;top:0!important}.ids-list-item.ids-list-item--interactive:focus-within{outline:var(--focus_outline);outline-offset:var(--focus_outline-offset)}.ids-list-item.ids-list-item--interactive:focus-within .ids-list-item__icon{display:none}.ids-list-item.ids-list-item--interactive:focus-within .ids-list-item__icon--hover{display:flex}.ids-list-item.ids-list-item--interactive:hover .ids-list-item__header,.ids-list-item.ids-list-item--interactive:hover ::slotted([slot=headline]){color:var(--link-colorpreset-1-hover_color)!important;text-decoration:underline!important}.ids-list-item.ids-list-item--interactive:hover .ids-list-item__icon{display:none}.ids-list-item.ids-list-item--interactive:hover .ids-list-item__icon--hover{display:flex}.ids-list-item.ids-list-item--interactive .ids-list-item__header{outline:none}.ids-list-item:not(.ids-list-item--interactive) .ids-list-item__header:focus{outline:var(--focus_outline);outline-offset:var(--focus_outline-offset)}.ids-list-item:not(.ids-list-item--interactive) .ids-list-item__header:hover{color:var(--link-colorpreset-1-hover_color)!important;text-decoration:underline!important}.ids-list-item:not(.ids-list-item--interactive) .ids-list-item__header:hover .ids-list-item__icon{display:none}.ids-list-item:not(.ids-list-item--interactive) .ids-list-item__header:hover .ids-list-item__icon--hover{display:flex}.ids-list-item__info{color:var(--list-item-info_color);display:block;font-family:Open Sans;font-size:1rem;font-style:italic;font-weight:400;margin-bottom:10px;margin-top:10px}";
|
|
4
4
|
|
|
5
5
|
var listLit = css`${unsafeCSS(css_248z)}`;
|
|
6
6
|
|
package/components/list/list.css
CHANGED
|
@@ -1,23 +1,15 @@
|
|
|
1
|
-
|
|
1
|
+
/*******
|
|
2
|
+
* BUTTONS
|
|
3
|
+
********/
|
|
4
|
+
/*******
|
|
5
|
+
* SCROLLBAR
|
|
6
|
+
********/
|
|
2
7
|
/*******
|
|
3
8
|
* FORM
|
|
4
9
|
********/
|
|
5
10
|
/*******
|
|
6
|
-
*
|
|
11
|
+
* A11Y
|
|
7
12
|
********/
|
|
8
|
-
/* headings */
|
|
9
|
-
@media (max-width: 1023px) {
|
|
10
|
-
.ids-desktop {
|
|
11
|
-
display: none !important;
|
|
12
|
-
}
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
@media (min-width: 1024px) {
|
|
16
|
-
.ids-mobile {
|
|
17
|
-
display: none !important;
|
|
18
|
-
}
|
|
19
|
-
}
|
|
20
|
-
|
|
21
13
|
.ids-list {
|
|
22
14
|
border-top: 1px solid var(--list_border);
|
|
23
15
|
display: flex;
|
|
@@ -64,9 +56,9 @@
|
|
|
64
56
|
margin-top: 0px !important;
|
|
65
57
|
color: var(--link-colorpreset-1_color) !important;
|
|
66
58
|
font-style: normal !important;
|
|
67
|
-
font-family: var(--heading-
|
|
68
|
-
font-weight: var(--heading-
|
|
69
|
-
letter-spacing: var(--heading-
|
|
59
|
+
font-family: var(--heading-s-font-family) !important;
|
|
60
|
+
font-weight: var(--heading-s-font-weight) !important;
|
|
61
|
+
letter-spacing: var(--heading-s-letter-spacing-desktop) !important;
|
|
70
62
|
font-size: 1.375rem !important;
|
|
71
63
|
line-height: 1.875rem !important;
|
|
72
64
|
}
|
|
@@ -1,11 +1,15 @@
|
|
|
1
|
-
|
|
1
|
+
/*******
|
|
2
|
+
* BUTTONS
|
|
3
|
+
********/
|
|
4
|
+
/*******
|
|
5
|
+
* SCROLLBAR
|
|
6
|
+
********/
|
|
2
7
|
/*******
|
|
3
8
|
* FORM
|
|
4
9
|
********/
|
|
5
10
|
/*******
|
|
6
|
-
*
|
|
11
|
+
* A11Y
|
|
7
12
|
********/
|
|
8
|
-
/* headings */
|
|
9
13
|
.ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner ::slotted([slot=link]), .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__link, .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner > a, .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner ::slotted([slot=link]), .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__link, .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner > a, .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item > .ids-mobile-menu-item__inner ::slotted([slot=link]), .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__link, .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item > .ids-mobile-menu-item__inner > a, .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner ::slotted([slot=link]), .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__link, .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner > a, .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner ::slotted([slot=link]), .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__link, .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner > a, .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item > .ids-mobile-menu-item__inner ::slotted([slot=link]), .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__link, .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item > .ids-mobile-menu-item__inner > a, .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item.ids-mobile-menu-item--secondary > .ids-mobile-menu-item__inner ::slotted([slot=link]), .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item.ids-mobile-menu-item--secondary > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__link, .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item.ids-mobile-menu-item--secondary > .ids-mobile-menu-item__inner > a {
|
|
10
14
|
width: 100%;
|
|
11
15
|
flex-grow: 1;
|
|
@@ -1,11 +1,3 @@
|
|
|
1
|
-
/* 1177 Typography - no margins */
|
|
2
|
-
/*******
|
|
3
|
-
* FORM
|
|
4
|
-
********/
|
|
5
|
-
/*******
|
|
6
|
-
* Accessibility
|
|
7
|
-
********/
|
|
8
|
-
/* headings */
|
|
9
1
|
.ids-data-pagination .ids-data-pagination__next-button button,
|
|
10
2
|
.ids-data-pagination .ids-data-pagination__next-button ::slotted(button), .ids-data-pagination .ids-data-pagination__prev-button button,
|
|
11
3
|
.ids-data-pagination .ids-data-pagination__prev-button ::slotted(button) {
|
|
@@ -1,11 +1,15 @@
|
|
|
1
|
-
|
|
1
|
+
/*******
|
|
2
|
+
* BUTTONS
|
|
3
|
+
********/
|
|
4
|
+
/*******
|
|
5
|
+
* SCROLLBAR
|
|
6
|
+
********/
|
|
2
7
|
/*******
|
|
3
8
|
* FORM
|
|
4
9
|
********/
|
|
5
10
|
/*******
|
|
6
|
-
*
|
|
11
|
+
* A11Y
|
|
7
12
|
********/
|
|
8
|
-
/* headings */
|
|
9
13
|
.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button button,
|
|
10
14
|
.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button ::slotted(button), .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button button,
|
|
11
15
|
.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button ::slotted(button) {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { css, unsafeCSS } from 'lit';
|
|
2
2
|
|
|
3
|
-
var css_248z = ":host([show]){display:block}:host{color:var(--IDS-BASE__FONT-COLOR);display:none;position:absolute;width:max-content}.ids-popover-content{background:#fff;border:1px solid var(--popover_border);border-radius:var(--popover-content_border-radius);box-shadow:0 0 10px rgba(0,0,0,.3);box-sizing:border-box;max-height:260px;padding:20px;position:relative;width:260px;z-index:2}.ids-popover-content ::slotted(*){color:var(--IDS-BASE__FONT-COLOR)}.ids-popover-content ::slotted(h3),.ids-popover-content h3{color:var(--IDS-BASE__FONT-COLOR);font-family:var(--heading-
|
|
3
|
+
var css_248z = "@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}:host([show]){display:block}:host{color:var(--IDS-BASE__FONT-COLOR);display:none;position:absolute;width:max-content}.ids-popover-content{background:#fff;border:1px solid var(--popover_border);border-radius:var(--popover-content_border-radius);box-shadow:0 0 10px rgba(0,0,0,.3);box-sizing:border-box;max-height:260px;padding:20px;position:relative;width:260px;z-index:2}.ids-popover-content ::slotted(*){color:var(--IDS-BASE__FONT-COLOR)}.ids-popover-content ::slotted(h3),.ids-popover-content h3{color:var(--IDS-BASE__FONT-COLOR)!important;color:var(--heading-xs-color);font-family:var(--heading-xs-font-family)!important;font-size:var(--heading-xs-font-size)!important;font-style:normal!important;font-weight:var(--heading-xs-font-weight)!important;letter-spacing:var(--heading-xs-letter-spacing)!important;line-height:var(--heading-xs-line-height)!important;margin-bottom:8px!important}.ids-popover-content .ids-popover-content__caret{position:absolute}.ids-popover-content .ids-popover-content__caret.hide{display:none}.ids-popover-content .ids-popover-content__caret.ids-popover-content--top{bottom:-27px;left:50%}.ids-popover-content .ids-popover-content__caret.ids-popover-content--top-left{bottom:-28px;left:2px}.ids-popover-content .ids-popover-content__caret.ids-popover-content--top-right{bottom:-28px;right:2px}.ids-popover-content .ids-popover-content__caret.ids-popover-content--left{right:-28px;top:50%}.ids-popover-content .ids-popover-content__caret.ids-popover-content--left-top{bottom:2px;right:-28px}.ids-popover-content .ids-popover-content__caret.ids-popover-content--left-bottom{right:-28px;top:2px}.ids-popover-content .ids-popover-content__caret.ids-popover-content--right{left:-28px;top:50%}.ids-popover-content .ids-popover-content__caret.ids-popover-content--right-top{bottom:2px;left:-28px}.ids-popover-content .ids-popover-content__caret.ids-popover-content--right-bottom{left:-28px;top:2px}.ids-popover-content .ids-popover-content__caret.ids-popover-content--bottom{left:50%;top:-28px}.ids-popover-content .ids-popover-content__caret.ids-popover-content--bottom-left{left:2px;top:-28px}.ids-popover-content .ids-popover-content__caret.ids-popover-content--bottom-right{right:2px;top:-28px}.ids-popover-content .ids-popover-content__caret-body{background:#fff;display:block;position:absolute;z-index:4}.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--top,.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--top-left,.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--top-right{bottom:0;clip-path:polygon(0 0,50% 100%,100% 0);height:.6rem;transform:translateX(-50%);width:1.2rem}.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--left,.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--left-bottom,.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--left-top{clip-path:polygon(0 0,100% 50%,0 100%);height:1.2rem;right:0;transform:translateY(-50%);width:.6rem}.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--right,.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--right-bottom,.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--right-top{clip-path:polygon(0 50%,100% 0,100% 100%);height:1.2rem;left:0;transform:translateY(-50%);width:.6rem}.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--bottom,.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--bottom-left,.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--bottom-right{clip-path:polygon(0 100%,50% 0,100% 100%);height:.6rem;top:0;transform:translateX(-50%);width:1.2rem}.ids-popover-content .ids-popover-content__caret-border{background-color:var(--popover_border);position:absolute;z-index:1}.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--top,.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--top-left,.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--top-right{background-color:var(--popover_border);bottom:-2px;clip-path:polygon(0 0,50% 100%,100% 0);height:.6rem;transform:translateX(-50%);width:1.2rem}.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--left,.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--left-bottom,.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--left-top{background-color:var(--popover_border);clip-path:polygon(0 0,100% 50%,0 100%);height:1.2rem;right:-2px;transform:translateY(-50%);width:.6rem}.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--right,.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--right-bottom,.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--right-top{background-color:var(--popover_border);clip-path:polygon(0 50%,100% 0,100% 100%);height:1.2rem;left:-2px;transform:translateY(-50%);width:.6rem}.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--bottom,.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--bottom-left,.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--bottom-right{clip-path:polygon(0 100%,50% 0,100% 100%);height:.6rem;top:-2px;transform:translateX(-50%);width:1.2rem}.ids-popover-content .ids-popover-content__caret-shadow{filter:blur(3px);height:0;position:absolute;width:0;z-index:1}.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--top,.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--top-left,.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--top-right{border-left:.625rem solid transparent;border-right:.625rem solid transparent;border-top:.625rem solid rgba(0,0,0,.15);bottom:-7px;transform:translateX(-50%)}.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--left,.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--left-bottom,.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--left-top{border-bottom:.5625rem solid transparent;border-right:.5625rem solid rgba(53,53,53,.15);border-top:.5625rem solid transparent;right:-7px;transform:translateY(-50%)}.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--right,.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--right-bottom,.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--right-top{border-bottom:.5625rem solid transparent;border-right:.5625rem solid rgba(53,53,53,.15);border-top:.5625rem solid transparent;left:-7px;transform:translateY(-50%)}.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--bottom,.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--bottom-left,.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--bottom-right{border-bottom:.625rem solid rgba(0,0,0,.15);border-left:.625rem solid transparent;border-right:.625rem solid transparent;top:-7px;transform:translateX(-50%)}.ids-popover-content .ids-popover-content__inner-wrapper{box-sizing:border-box;display:flex;flex:1 1 auto;flex-direction:row-reverse;flex-wrap:wrap;position:relative;z-index:4}.ids-popover-content .ids-popover-content__close-btn-wrapper{display:block;height:20px;max-width:100%;z-index:1}.ids-popover-content .ids-popover-content__text-wrapper{display:block;flex-basis:0;flex-grow:1;height:100%;height:calc(100% - 20px);margin-right:-17px;max-width:100%;overflow:auto;overflow-x:hidden;padding-right:20px;position:relative;text-align:left;width:100%;width:calc(100% - 20px)}.ids-popover-content .ids-popover-content__text-wrapper::-webkit-scrollbar{margin-left:-20px;margin-top:30px;position:absolute;width:14px}.ids-popover-content .ids-popover-content__text-wrapper::-webkit-scrollbar-track{background:var(--IDS-SCROLL_TRACK-COLOR);border-radius:10px;margin-bottom:0;margin-top:30px}.ids-popover-content .ids-popover-content__text-wrapper::-webkit-resizer{appearance:none;background-image:var(--IDS-TEXTAREA-RESIZER-IMAGE);background-position:50%;background-repeat:no-repeat;background-size:cover}.ids-popover-content .ids-popover-content__text-wrapper::-webkit-scrollbar-corner{background-color:transparent}.ids-popover-content .ids-popover-content__text-wrapper::-webkit-scrollbar-thumb{background:var(--IDS-SCROLL_COLOR);border:3px solid var(--IDS-SCROLL_TRACK-COLOR);border-radius:10px;box-sizing:border-box;cursor:auto}.ids-popover-content .ids-popover-content__text-wrapper::-webkit-scrollbar-thumb:hover{background:var(--IDS-SCROLL_HOVER-COLOR)}.ids-popover-content .ids-popover-content__text-wrapper:focus{outline:var(--focus_outline);outline-offset:10px}.ids-popover-content .ids-popover-content__close-btn{background:none;border:none;color:inherit;cursor:pointer;outline:inherit;padding:0}.ids-popover-content .ids-popover-content__close-btn:focus{outline:var(--IDS-FOCUS_OUTLINE);outline-offset:var(--IDS-FOCUS_OUTLINE-OFFSET)!important}.ids-popover-content .ids-popover-content__close-btn:focus,.ids-popover-content .ids-popover-content__close-icon:focus{outline:var(--focus_outline);outline-offset:var(--focus_outline-offset)}";
|
|
4
4
|
|
|
5
5
|
var popoverContentLit = css`${unsafeCSS(css_248z)}`;
|
|
6
6
|
|
|
@@ -1,11 +1,27 @@
|
|
|
1
|
-
|
|
1
|
+
/*******
|
|
2
|
+
* BUTTONS
|
|
3
|
+
********/
|
|
4
|
+
/*******
|
|
5
|
+
* SCROLLBAR
|
|
6
|
+
********/
|
|
2
7
|
/*******
|
|
3
8
|
* FORM
|
|
4
9
|
********/
|
|
5
10
|
/*******
|
|
6
|
-
*
|
|
11
|
+
* A11Y
|
|
7
12
|
********/
|
|
8
|
-
|
|
13
|
+
@media (max-width: 1023px) {
|
|
14
|
+
.ids-desktop {
|
|
15
|
+
display: none !important;
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
@media (min-width: 1024px) {
|
|
20
|
+
.ids-mobile {
|
|
21
|
+
display: none !important;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
|
|
9
25
|
:host([show]) {
|
|
10
26
|
display: block;
|
|
11
27
|
}
|
|
@@ -28,11 +44,6 @@
|
|
|
28
44
|
max-height: 260px;
|
|
29
45
|
width: 260px;
|
|
30
46
|
box-sizing: border-box;
|
|
31
|
-
/* width */
|
|
32
|
-
/* Track */
|
|
33
|
-
/* Handle */
|
|
34
|
-
/* Handle on hover */
|
|
35
|
-
/* Handle on hover */
|
|
36
47
|
}
|
|
37
48
|
.ids-popover-content ::slotted(*) {
|
|
38
49
|
color: var(--IDS-BASE__FONT-COLOR);
|
|
@@ -40,13 +51,14 @@
|
|
|
40
51
|
.ids-popover-content h3,
|
|
41
52
|
.ids-popover-content ::slotted(h3) {
|
|
42
53
|
margin-bottom: 8px !important;
|
|
43
|
-
color: var(--IDS-BASE__FONT-COLOR);
|
|
54
|
+
color: var(--IDS-BASE__FONT-COLOR) !important;
|
|
44
55
|
font-style: normal !important;
|
|
45
|
-
|
|
46
|
-
font-
|
|
47
|
-
font-
|
|
48
|
-
|
|
49
|
-
|
|
56
|
+
color: var(--heading-xs-color);
|
|
57
|
+
font-family: var(--heading-xs-font-family) !important;
|
|
58
|
+
font-size: var(--heading-xs-font-size) !important;
|
|
59
|
+
line-height: var(--heading-xs-line-height) !important;
|
|
60
|
+
letter-spacing: var(--heading-xs-letter-spacing) !important;
|
|
61
|
+
font-weight: var(--heading-xs-font-weight) !important;
|
|
50
62
|
}
|
|
51
63
|
.ids-popover-content .ids-popover-content__caret {
|
|
52
64
|
position: absolute;
|
|
@@ -262,31 +274,41 @@
|
|
|
262
274
|
height: calc(100% - 20px);
|
|
263
275
|
width: calc(100% - 20px);
|
|
264
276
|
}
|
|
265
|
-
.ids-popover-content .ids-popover-content__text-wrapper:focus {
|
|
266
|
-
outline: var(--focus_outline);
|
|
267
|
-
outline-offset: 10px;
|
|
268
|
-
}
|
|
269
277
|
.ids-popover-content .ids-popover-content__text-wrapper::-webkit-scrollbar {
|
|
270
278
|
width: 14px;
|
|
271
279
|
position: absolute;
|
|
272
280
|
margin-left: -20px;
|
|
281
|
+
margin-top: 30px;
|
|
273
282
|
}
|
|
274
283
|
.ids-popover-content .ids-popover-content__text-wrapper::-webkit-scrollbar-track {
|
|
275
|
-
background: var(--IDS-
|
|
276
|
-
margin-top: 10px;
|
|
277
|
-
margin-bottom: 10px;
|
|
284
|
+
background: var(--IDS-SCROLL_TRACK-COLOR);
|
|
278
285
|
border-radius: 10px;
|
|
279
|
-
margin-top:
|
|
286
|
+
margin-top: 30px;
|
|
287
|
+
margin-bottom: 0;
|
|
288
|
+
}
|
|
289
|
+
.ids-popover-content .ids-popover-content__text-wrapper::-webkit-resizer {
|
|
290
|
+
appearance: none;
|
|
291
|
+
background-image: var(--IDS-TEXTAREA-RESIZER-IMAGE);
|
|
292
|
+
background-repeat: no-repeat;
|
|
293
|
+
background-position: center center;
|
|
294
|
+
background-size: cover;
|
|
295
|
+
}
|
|
296
|
+
.ids-popover-content .ids-popover-content__text-wrapper::-webkit-scrollbar-corner {
|
|
297
|
+
background-color: transparent;
|
|
280
298
|
}
|
|
281
299
|
.ids-popover-content .ids-popover-content__text-wrapper::-webkit-scrollbar-thumb {
|
|
300
|
+
cursor: auto;
|
|
282
301
|
background: var(--IDS-SCROLL_COLOR);
|
|
283
302
|
border-radius: 10px;
|
|
303
|
+
box-sizing: border-box;
|
|
304
|
+
border: 3px solid var(--IDS-SCROLL_TRACK-COLOR);
|
|
284
305
|
}
|
|
285
306
|
.ids-popover-content .ids-popover-content__text-wrapper::-webkit-scrollbar-thumb:hover {
|
|
286
|
-
background:
|
|
307
|
+
background: var(--IDS-SCROLL_HOVER-COLOR);
|
|
287
308
|
}
|
|
288
|
-
.ids-popover-content .ids-popover-content__text-wrapper
|
|
289
|
-
|
|
309
|
+
.ids-popover-content .ids-popover-content__text-wrapper:focus {
|
|
310
|
+
outline: var(--focus_outline);
|
|
311
|
+
outline-offset: 10px;
|
|
290
312
|
}
|
|
291
313
|
.ids-popover-content .ids-popover-content__close-btn {
|
|
292
314
|
cursor: pointer;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { css, unsafeCSS } from 'lit';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".ids-popover{position:relative}.ids-popover
|
|
3
|
+
var css_248z = ".ids-popover{display:inline-block;position:relative}.ids-popover .ids-popover-trigger{cursor:pointer;display:inline-block}";
|
|
4
4
|
|
|
5
5
|
var popoverLit = css`${unsafeCSS(css_248z)}`;
|
|
6
6
|
|
|
@@ -1,15 +1,8 @@
|
|
|
1
|
-
/* 1177 Typography - no margins */
|
|
2
|
-
/*******
|
|
3
|
-
* FORM
|
|
4
|
-
********/
|
|
5
|
-
/*******
|
|
6
|
-
* Accessibility
|
|
7
|
-
********/
|
|
8
|
-
/* headings */
|
|
9
1
|
.ids-popover {
|
|
10
2
|
position: relative;
|
|
11
3
|
display: inline-block;
|
|
12
4
|
}
|
|
13
5
|
.ids-popover .ids-popover-trigger {
|
|
14
6
|
display: inline-block;
|
|
7
|
+
cursor: pointer;
|
|
15
8
|
}
|
|
@@ -0,0 +1,7 @@
|
|
|
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}}:host{display:contents}.ids-side-panel{background-color:var(--IDS-OVERLAY__BACKGROUND-COLOR);bottom:0;height:0;left:0;opacity:0;position:fixed;right:0;top:0;transition:opacity 0s linear .2s,visibility .3s,width 0s linear .4s,height 0s linear .4s;visibility:hidden;width:0;z-index:2}.ids-side-panel .ids-side-panel__panel{background-color:var(--IDS-COLOR-NEUTRAL-100);border-left:0;box-sizing:border-box;display:flex;flex-direction:column;height:70vh;overflow-x:hidden;padding:20px 16px 0;position:relative;transform:translateY(100vh);transition:transform .3s cubic-bezier(.4,0,.2,1);width:100%}.ids-side-panel .ids-side-panel__content{box-sizing:border-box;order:1;overflow-x:hidden;overflow-y:auto;padding-bottom:20px;width:100%}.ids-side-panel .ids-side-panel__content::-webkit-scrollbar{margin-left:-20px;margin-top:4px;position:absolute;width:14px}.ids-side-panel .ids-side-panel__content::-webkit-scrollbar-track{background:var(--IDS-SCROLL_TRACK-COLOR);border-radius:10px;margin-bottom:0;margin-top:4px}.ids-side-panel .ids-side-panel__content::-webkit-resizer{appearance:none;background-image:var(--IDS-TEXTAREA-RESIZER-IMAGE);background-position:50%;background-repeat:no-repeat;background-size:cover}.ids-side-panel .ids-side-panel__content::-webkit-scrollbar-corner{background-color:transparent}.ids-side-panel .ids-side-panel__content::-webkit-scrollbar-thumb{background:var(--IDS-SCROLL_COLOR);border:3px solid var(--IDS-SCROLL_TRACK-COLOR);border-radius:10px;box-sizing:border-box;cursor:auto}.ids-side-panel .ids-side-panel__content::-webkit-scrollbar-thumb:hover{background:var(--IDS-SCROLL_HOVER-COLOR)}.ids-side-panel .ids-side-panel__inner{padding:8px}.ids-side-panel .ids-side-panel__actions{margin-right:5px;order:0;text-align:right;width:100%}.ids-side-panel .ids-side-panel__actions .ids-side-panel__close-button{background:none;border:none;color:inherit;cursor:pointer;font:inherit;outline:inherit;padding:0}.ids-side-panel .ids-side-panel__actions .ids-side-panel__close-button:focus{outline:var(--IDS-FOCUS_OUTLINE);outline-offset:var(--IDS-FOCUS_OUTLINE-OFFSET)!important}.ids-side-panel.ids-side-panel--show{height:100vh;opacity:1;transition:width 0s,height 0s;visibility:visible;width:100%}.ids-side-panel.ids-side-panel--show .ids-side-panel__panel{transform:translateY(30vh);transition:transform .6s cubic-bezier(.4,0,.2,1)}@media (min-width:640px){.ids-side-panel .ids-side-panel__panel{height:50vh}.ids-side-panel.ids-side-panel--show .ids-side-panel__panel{transform:translateY(50vh)}}@media (min-width:1024px){.ids-side-panel{display:flex;overflow-x:hidden;position:relative;transform:none;transition:width .3s ease-in-out,opacity 0s linear .3s,height .4s,visibility .4s,transform 0s linear;width:0}.ids-side-panel .ids-side-panel__panel{border-left:1px solid var(--IDS-SIDE-PANEL__BORDER-COLOR);height:100%;padding:20px 0 0 16px;top:0;transform:none;transition:none}.ids-side-panel .ids-side-panel__actions,.ids-side-panel .ids-side-panel__content{width:350px}.ids-side-panel.ids-side-panel--show{height:100%;transform:none;transition:width .3s ease-in-out,visibility 0s,opacity 0s,transform 0s linear;width:380px}.ids-side-panel.ids-side-panel--show .ids-side-panel__panel{transform:none;transition:none}.ids-side-panel.ids-side-panel--left .ids-side-panel__panel{border-left:0;border-right:1px solid var(--IDS-SIDE-PANEL__BORDER-COLOR);direction:rtl;padding:20px 16px 20px 0}.ids-side-panel.ids-side-panel--left .ids-side-panel__panel .ids-side-panel__content{direction:ltr}.ids-side-panel.ids-side-panel--elevated{bottom:0;height:100%;left:auto;position:fixed;right:0;top:0;width:0;z-index:2}.ids-side-panel.ids-side-panel--elevated.ids-side-panel--left{left:0;right:auto}.ids-side-panel.ids-side-panel--elevated.ids-side-panel--left .ids-side-panel__panel{padding:20px 16px 20px 0}.ids-side-panel.ids-side-panel--elevated.ids-side-panel--show{width:380px}}";
|
|
4
|
+
|
|
5
|
+
var sidePanelLit = css`${unsafeCSS(css_248z)}`;
|
|
6
|
+
|
|
7
|
+
export { sidePanelLit as default };
|
|
@@ -0,0 +1,198 @@
|
|
|
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
|
+
/*******
|
|
14
|
+
* BUTTONS
|
|
15
|
+
********/
|
|
16
|
+
/*******
|
|
17
|
+
* SCROLLBAR
|
|
18
|
+
********/
|
|
19
|
+
/*******
|
|
20
|
+
* FORM
|
|
21
|
+
********/
|
|
22
|
+
/*******
|
|
23
|
+
* A11Y
|
|
24
|
+
********/
|
|
25
|
+
:host {
|
|
26
|
+
display: contents;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.ids-side-panel {
|
|
30
|
+
opacity: 0;
|
|
31
|
+
visibility: hidden;
|
|
32
|
+
position: fixed;
|
|
33
|
+
top: 0;
|
|
34
|
+
left: 0;
|
|
35
|
+
right: 0;
|
|
36
|
+
bottom: 0;
|
|
37
|
+
z-index: 2;
|
|
38
|
+
width: 0;
|
|
39
|
+
height: 0;
|
|
40
|
+
background-color: var(--IDS-OVERLAY__BACKGROUND-COLOR);
|
|
41
|
+
transition: opacity 0s linear 0.2s, visibility 0.3s, width 0s linear 0.4s, height 0s linear 0.4s;
|
|
42
|
+
}
|
|
43
|
+
.ids-side-panel .ids-side-panel__panel {
|
|
44
|
+
background-color: var(--IDS-COLOR-NEUTRAL-100);
|
|
45
|
+
border-left: 0;
|
|
46
|
+
box-sizing: border-box;
|
|
47
|
+
padding: 20px 16px 0 16px;
|
|
48
|
+
display: flex;
|
|
49
|
+
flex-direction: column;
|
|
50
|
+
overflow-x: hidden;
|
|
51
|
+
position: relative;
|
|
52
|
+
width: 100%;
|
|
53
|
+
height: 70vh;
|
|
54
|
+
transform: translateY(100vh);
|
|
55
|
+
transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
56
|
+
}
|
|
57
|
+
.ids-side-panel .ids-side-panel__content {
|
|
58
|
+
width: 100%;
|
|
59
|
+
padding-bottom: 20px;
|
|
60
|
+
box-sizing: border-box;
|
|
61
|
+
overflow-x: hidden;
|
|
62
|
+
overflow-y: auto;
|
|
63
|
+
order: 1;
|
|
64
|
+
}
|
|
65
|
+
.ids-side-panel .ids-side-panel__content::-webkit-scrollbar {
|
|
66
|
+
width: 14px;
|
|
67
|
+
position: absolute;
|
|
68
|
+
margin-left: -20px;
|
|
69
|
+
margin-top: 4px;
|
|
70
|
+
}
|
|
71
|
+
.ids-side-panel .ids-side-panel__content::-webkit-scrollbar-track {
|
|
72
|
+
background: var(--IDS-SCROLL_TRACK-COLOR);
|
|
73
|
+
border-radius: 10px;
|
|
74
|
+
margin-top: 4px;
|
|
75
|
+
margin-bottom: 0;
|
|
76
|
+
}
|
|
77
|
+
.ids-side-panel .ids-side-panel__content::-webkit-resizer {
|
|
78
|
+
appearance: none;
|
|
79
|
+
background-image: var(--IDS-TEXTAREA-RESIZER-IMAGE);
|
|
80
|
+
background-repeat: no-repeat;
|
|
81
|
+
background-position: center center;
|
|
82
|
+
background-size: cover;
|
|
83
|
+
}
|
|
84
|
+
.ids-side-panel .ids-side-panel__content::-webkit-scrollbar-corner {
|
|
85
|
+
background-color: transparent;
|
|
86
|
+
}
|
|
87
|
+
.ids-side-panel .ids-side-panel__content::-webkit-scrollbar-thumb {
|
|
88
|
+
cursor: auto;
|
|
89
|
+
background: var(--IDS-SCROLL_COLOR);
|
|
90
|
+
border-radius: 10px;
|
|
91
|
+
box-sizing: border-box;
|
|
92
|
+
border: 3px solid var(--IDS-SCROLL_TRACK-COLOR);
|
|
93
|
+
}
|
|
94
|
+
.ids-side-panel .ids-side-panel__content::-webkit-scrollbar-thumb:hover {
|
|
95
|
+
background: var(--IDS-SCROLL_HOVER-COLOR);
|
|
96
|
+
}
|
|
97
|
+
.ids-side-panel .ids-side-panel__inner {
|
|
98
|
+
padding: 8px;
|
|
99
|
+
}
|
|
100
|
+
.ids-side-panel .ids-side-panel__actions {
|
|
101
|
+
text-align: right;
|
|
102
|
+
width: 100%;
|
|
103
|
+
margin-right: 5px;
|
|
104
|
+
order: 0;
|
|
105
|
+
}
|
|
106
|
+
.ids-side-panel .ids-side-panel__actions .ids-side-panel__close-button {
|
|
107
|
+
background: none;
|
|
108
|
+
color: inherit;
|
|
109
|
+
border: none;
|
|
110
|
+
padding: 0;
|
|
111
|
+
font: inherit;
|
|
112
|
+
cursor: pointer;
|
|
113
|
+
outline: inherit;
|
|
114
|
+
}
|
|
115
|
+
.ids-side-panel .ids-side-panel__actions .ids-side-panel__close-button:focus {
|
|
116
|
+
outline: var(--IDS-FOCUS_OUTLINE);
|
|
117
|
+
outline-offset: var(--IDS-FOCUS_OUTLINE-OFFSET) !important;
|
|
118
|
+
}
|
|
119
|
+
.ids-side-panel.ids-side-panel--show {
|
|
120
|
+
opacity: 1;
|
|
121
|
+
visibility: visible;
|
|
122
|
+
width: 100%;
|
|
123
|
+
height: 100vh;
|
|
124
|
+
transition: width 0s, height 0s;
|
|
125
|
+
}
|
|
126
|
+
.ids-side-panel.ids-side-panel--show .ids-side-panel__panel {
|
|
127
|
+
transform: translateY(30vh);
|
|
128
|
+
transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
129
|
+
}
|
|
130
|
+
@media (min-width: 640px) {
|
|
131
|
+
.ids-side-panel .ids-side-panel__panel {
|
|
132
|
+
height: 50vh;
|
|
133
|
+
}
|
|
134
|
+
.ids-side-panel.ids-side-panel--show .ids-side-panel__panel {
|
|
135
|
+
transform: translateY(50vh);
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
@media (min-width: 1024px) {
|
|
139
|
+
.ids-side-panel {
|
|
140
|
+
display: flex;
|
|
141
|
+
position: relative;
|
|
142
|
+
overflow-x: hidden;
|
|
143
|
+
width: 0;
|
|
144
|
+
transform: none;
|
|
145
|
+
transition: width 0.3s ease-in-out, opacity 0s linear 0.3s, height 0.4s, visibility 0.4s, transform linear 0s;
|
|
146
|
+
}
|
|
147
|
+
.ids-side-panel .ids-side-panel__panel {
|
|
148
|
+
border-left: 1px solid var(--IDS-SIDE-PANEL__BORDER-COLOR);
|
|
149
|
+
top: 0;
|
|
150
|
+
padding: 20px 0 0 16px;
|
|
151
|
+
transform: none;
|
|
152
|
+
transition: none;
|
|
153
|
+
height: 100%;
|
|
154
|
+
}
|
|
155
|
+
.ids-side-panel .ids-side-panel__content,
|
|
156
|
+
.ids-side-panel .ids-side-panel__actions {
|
|
157
|
+
width: 350px;
|
|
158
|
+
}
|
|
159
|
+
.ids-side-panel.ids-side-panel--show {
|
|
160
|
+
width: 380px;
|
|
161
|
+
height: 100%;
|
|
162
|
+
transform: none;
|
|
163
|
+
transition: width 0.3s ease-in-out, visibility 0s, opacity 0s, transform linear 0s;
|
|
164
|
+
}
|
|
165
|
+
.ids-side-panel.ids-side-panel--show .ids-side-panel__panel {
|
|
166
|
+
transform: none;
|
|
167
|
+
transition: none;
|
|
168
|
+
}
|
|
169
|
+
.ids-side-panel.ids-side-panel--left .ids-side-panel__panel {
|
|
170
|
+
border-left: 0;
|
|
171
|
+
border-right: 1px solid var(--IDS-SIDE-PANEL__BORDER-COLOR);
|
|
172
|
+
direction: rtl;
|
|
173
|
+
padding: 20px 16px 20px 0;
|
|
174
|
+
}
|
|
175
|
+
.ids-side-panel.ids-side-panel--left .ids-side-panel__panel .ids-side-panel__content {
|
|
176
|
+
direction: ltr;
|
|
177
|
+
}
|
|
178
|
+
.ids-side-panel.ids-side-panel--elevated {
|
|
179
|
+
position: fixed;
|
|
180
|
+
top: 0;
|
|
181
|
+
right: 0;
|
|
182
|
+
bottom: 0;
|
|
183
|
+
width: 0;
|
|
184
|
+
height: 100%;
|
|
185
|
+
left: auto;
|
|
186
|
+
z-index: 2;
|
|
187
|
+
}
|
|
188
|
+
.ids-side-panel.ids-side-panel--elevated.ids-side-panel--left {
|
|
189
|
+
left: 0;
|
|
190
|
+
right: auto;
|
|
191
|
+
}
|
|
192
|
+
.ids-side-panel.ids-side-panel--elevated.ids-side-panel--left .ids-side-panel__panel {
|
|
193
|
+
padding: 20px 16px 20px 0;
|
|
194
|
+
}
|
|
195
|
+
.ids-side-panel.ids-side-panel--elevated.ids-side-panel--show {
|
|
196
|
+
width: 380px;
|
|
197
|
+
}
|
|
198
|
+
}
|
|
@@ -10,14 +10,18 @@
|
|
|
10
10
|
}
|
|
11
11
|
}
|
|
12
12
|
|
|
13
|
-
|
|
13
|
+
/*******
|
|
14
|
+
* BUTTONS
|
|
15
|
+
********/
|
|
16
|
+
/*******
|
|
17
|
+
* SCROLLBAR
|
|
18
|
+
********/
|
|
14
19
|
/*******
|
|
15
20
|
* FORM
|
|
16
21
|
********/
|
|
17
22
|
/*******
|
|
18
|
-
*
|
|
23
|
+
* A11Y
|
|
19
24
|
********/
|
|
20
|
-
/* headings */
|
|
21
25
|
:host([last]) .ids-step::after {
|
|
22
26
|
content: none;
|
|
23
27
|
}
|