@i-cell/ids-styles 0.0.1 → 0.0.3

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 (43) hide show
  1. package/dist/accordion/accordion.css +78 -62
  2. package/dist/accordion/accordion.min.css +1 -1
  3. package/dist/accordion/accordion.plugin.js +189 -0
  4. package/dist/action-item/action-item.css +67 -55
  5. package/dist/action-item/action-item.min.css +1 -1
  6. package/dist/action-item/action-item.plugin.js +174 -0
  7. package/dist/action-panel/action-panel.css +29 -28
  8. package/dist/action-panel/action-panel.min.css +1 -1
  9. package/dist/action-panel/action-panel.plugin.js +90 -0
  10. package/dist/avatar/avatar.css +92 -173
  11. package/dist/avatar/avatar.min.css +1 -1
  12. package/dist/avatar/avatar.plugin.js +198 -0
  13. package/dist/button/button.css +241 -278
  14. package/dist/button/button.min.css +1 -1
  15. package/dist/button/button.plugin.js +762 -0
  16. package/dist/card/card.css +137 -184
  17. package/dist/card/card.min.css +1 -1
  18. package/dist/card/card.plugin.js +798 -0
  19. package/dist/checkbox/checkbox.css +554 -0
  20. package/dist/checkbox/checkbox.min.css +1 -0
  21. package/dist/checkbox/checkbox.plugin.js +539 -0
  22. package/dist/components.css +1895 -1574
  23. package/dist/components.min.css +1 -1
  24. package/dist/components.plugin.js +4148 -0
  25. package/dist/dialog/dialog.css +163 -110
  26. package/dist/dialog/dialog.min.css +1 -1
  27. package/dist/dialog/dialog.plugin.js +225 -0
  28. package/dist/divider/divider.css +21 -23
  29. package/dist/divider/divider.min.css +1 -1
  30. package/dist/divider/divider.plugin.js +31 -0
  31. package/dist/form-elements/message/message.css +165 -0
  32. package/dist/form-elements/message/message.min.css +1 -0
  33. package/dist/form-elements/message/message.plugin.js +116 -0
  34. package/dist/form-elements/required-marker/required-marker.css +6 -0
  35. package/dist/form-elements/required-marker/required-marker.min.css +1 -0
  36. package/dist/form-elements/required-marker/required-marker.plugin.js +15 -0
  37. package/dist/icon-button/icon-button.css +173 -196
  38. package/dist/icon-button/icon-button.min.css +1 -1
  39. package/dist/icon-button/icon-button.plugin.js +657 -0
  40. package/dist/tag/tag.css +166 -465
  41. package/dist/tag/tag.min.css +1 -1
  42. package/dist/tag/tag.plugin.js +462 -0
  43. package/package.json +16 -4
package/dist/dialog/dialog.css CHANGED
@@ -2,7 +2,7 @@
2
2
  box-sizing: border-box;
3
3
  border-style: solid;
4
4
  border-color: var(--ids-comp-dialog-container-color-border-surface-default);
5
- background-color: var(--ids-comp-dialog-container-color-bg-enabled);
5
+ background-color: var(--ids-comp-dialog-container-color-bg-default);
6
6
  box-shadow: var(--ids-smc-reference-container-effects-shadow-horizontal-none) var(--ids-smc-reference-container-effects-shadow-vertical-xxl) var(--ids-smc-reference-container-effects-shadow-blur-xxxl) var(--ids-smc-reference-container-effects-shadow-spread-xxs) var(--ids-smc-reference-container-effects-shadow-color-dark-default);
7
7
  }
8
8
  .ids-dialog::backdrop {
@@ -13,59 +13,56 @@
13
13
  background-color: var(--ids-comp-dialog-backdrop-background);
14
14
  }
15
15
  .ids-dialog .ids-dialog-container {
16
+ box-sizing: border-box;
16
17
  display: grid;
17
18
  grid-template-rows: auto 1fr auto;
18
19
  position: relative;
19
20
  max-height: 80vh;
20
21
  }
21
- .ids-dialog .ids-dialog-close-button {
22
- position: absolute;
23
- top: 12px;
24
- right: 12px;
25
- }
26
- .ids-dialog .ids-dialog-header {
22
+ .ids-dialog .ids-dialog-container .ids-dialog-header {
27
23
  display: flex;
28
24
  align-items: stretch;
29
25
  }
30
- .ids-dialog .ids-dialog-header-default-content {
26
+ .ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-title {
27
+ font-style: normal;
28
+ }
29
+ .ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-title.hidden {
30
+ display: none;
31
+ }
32
+ .ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle {
33
+ font-style: normal;
34
+ }
35
+ .ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-header-default-content {
31
36
  display: flex;
32
37
  flex-direction: column;
33
38
  flex: 1 0 0;
34
39
  align-items: flex-start;
35
40
  }
36
- .ids-dialog .ids-dialog-title {
37
- font-size: 28px;
38
- font-style: normal;
39
- font-weight: 700;
40
- line-height: 36px;
41
- }
42
- .ids-dialog .ids-dialog-subtitle {
43
- font-size: 16px;
44
- font-style: normal;
45
- font-weight: 400;
46
- line-height: 24px;
47
- letter-spacing: 0.5px;
41
+ .ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-close-button {
42
+ position: absolute;
43
+ top: 12px;
44
+ right: 12px;
48
45
  }
49
- .ids-dialog .ids-dialog-content {
46
+ .ids-dialog .ids-dialog-container .ids-dialog-content {
50
47
  display: flex;
51
48
  align-items: center;
52
49
  justify-content: center;
53
50
  overflow-y: auto;
54
- background: var(--ids-comp-dialog-content-color-bg-enabled);
51
+ background: var(--ids-comp-dialog-content-color-bg-default);
55
52
  }
56
- .ids-dialog .ids-dialog-content .ids-dialog-content-overflow {
53
+ .ids-dialog .ids-dialog-container .ids-dialog-content .ids-dialog-content-overflow {
57
54
  overflow-y: auto;
58
55
  height: 100%;
59
56
  }
60
- .ids-dialog .ids-dialog-content.ids-dialog-content-scrollable {
57
+ .ids-dialog .ids-dialog-container .ids-dialog-content.ids-dialog-content-scrollable {
61
58
  border-top-style: solid;
62
59
  border-bottom-style: solid;
63
60
  border-top-color: var(--ids-comp-dialog-content-color-border-surface-default);
64
61
  border-bottom-color: var(--ids-comp-dialog-content-color-border-surface-default);
65
62
  }
66
- .ids-dialog .ids-dialog-actions {
63
+ .ids-dialog .ids-dialog-container .ids-dialog-actions {
67
64
  display: flex;
68
- background: var(--ids-comp-dialog-footer-color-bg-enabled);
65
+ background: var(--ids-comp-dialog-footer-color-bg-default);
69
66
  justify-content: flex-end;
70
67
  align-items: flex-start;
71
68
  align-content: flex-start;
@@ -73,102 +70,158 @@
73
70
  flex-wrap: wrap;
74
71
  }
75
72
  .ids-dialog.ids-dialog-compact {
76
- border-radius: var(--ids-comp-size-dialog-container-size-border-radius-compact);
77
- border-width: var(--ids-comp-size-dialog-container-size-border-width-compact);
73
+ border-radius: var(--ids-comp-dialog-container-size-border-radius-compact);
74
+ border-width: var(--ids-comp-dialog-container-size-border-width-compact);
78
75
  }
79
76
  .ids-dialog.ids-dialog-compact .ids-dialog-container {
80
- width: var(--ids-comp-size-dialog-container-size-width-compact);
81
- min-height: var(--ids-comp-size-dialog-container-size-min-height-compact);
82
- padding: var(--ids-comp-size-dialog-container-size-padding-y-compact) var(--ids-comp-size-dialog-container-size-padding-x-compact);
83
- gap: var(--ids-comp-size-dialog-container-size-gap-compact);
84
- }
85
- .ids-dialog.ids-dialog-compact .ids-dialog-header-default-content {
86
- gap: var(--ids-comp-size-dialog-header-size-gap-compact);
87
- padding: var(--ids-comp-size-dialog-header-size-padding-y-compact) var(--ids-comp-size-dialog-header-size-padding-x-compact);
88
- }
89
- .ids-dialog.ids-dialog-compact .ids-dialog-content {
90
- padding: var(--ids-comp-size-dialog-content-fixed-size-padding-y-compact) var(--ids-comp-size-dialog-content-fixed-size-padding-x-compact);
91
- }
92
- .ids-dialog.ids-dialog-compact .ids-dialog-content.ids-dialog-content-scrollable {
93
- padding: var(--ids-comp-size-dialog-content-scrollable-size-padding-y-compact) var(--ids-comp-size-dialog-content-scrollable-size-padding-x-compact);
94
- border-top-width: var(--ids-comp-size-dialog-content-scrollable-size-border-width-compact);
95
- border-bottom-width: var(--ids-comp-size-dialog-content-scrollable-size-border-width-compact);
96
- }
97
- .ids-dialog.ids-dialog-compact .ids-dialog-actions {
98
- padding: var(--ids-comp-size-dialog-footer-padding-y-compact, 0px) var(--ids-comp-size-dialog-footer-padding-x-compact, 24px);
77
+ width: var(--ids-comp-dialog-container-size-width-compact);
78
+ min-height: var(--ids-comp-dialog-container-size-min-height-compact);
79
+ padding: var(--ids-comp-dialog-container-size-padding-y-compact) var(--ids-comp-dialog-container-size-padding-x-compact);
80
+ gap: var(--ids-comp-dialog-container-size-gap-compact);
81
+ }
82
+ .ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-header .ids-dialog-title {
83
+ font-family: var(--ids-comp-dialog-header-title-typography-font-family-compact);
84
+ font-size: var(--ids-comp-dialog-header-title-typography-font-size-compact);
85
+ font-weight: var(--ids-comp-dialog-header-title-typography-font-weight-compact);
86
+ letter-spacing: var(--ids-comp-dialog-header-title-typography-letter-spacing-compact);
87
+ line-height: var(--ids-comp-dialog-header-title-typography-line-height-compact);
88
+ }
89
+ .ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle {
90
+ font-family: var(--ids-comp-dialog-header-subtitle-typography-font-family-compact);
91
+ font-size: var(--ids-comp-dialog-header-subtitle-typography-font-size-compact);
92
+ font-weight: var(--ids-comp-dialog-header-subtitle-typography-font-weight-compact);
93
+ letter-spacing: var(--ids-comp-dialog-header-subtitle-typography-letter-spacing-compact);
94
+ line-height: var(--ids-comp-dialog-header-subtitle-typography-line-height-compact);
95
+ }
96
+ .ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-header .ids-dialog-header-default-content {
97
+ gap: var(--ids-comp-dialog-header-size-gap-compact);
98
+ padding: var(--ids-comp-dialog-header-size-padding-y-compact) var(--ids-comp-dialog-header-size-padding-x-compact);
99
+ }
100
+ .ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-content {
101
+ padding: var(--ids-comp-dialog-content-fixed-size-padding-y-compact) var(--ids-comp-dialog-content-fixed-size-padding-x-compact);
102
+ }
103
+ .ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-content.ids-dialog-content-scrollable {
104
+ padding: var(--ids-comp-dialog-content-scrollable-size-padding-y-compact) var(--ids-comp-dialog-content-scrollable-size-padding-x-compact);
105
+ border-top-width: var(--ids-comp-dialog-content-scrollable-size-border-width-compact);
106
+ border-bottom-width: var(--ids-comp-dialog-content-scrollable-size-border-width-compact);
107
+ }
108
+ .ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-actions {
109
+ padding: var(--ids-comp-dialog-footer-padding-y-compact) var(--ids-comp-dialog-footer-padding-x-compact);
99
110
  }
100
111
  .ids-dialog.ids-dialog-comfortable {
101
- border-radius: var(--ids-comp-size-dialog-container-size-border-radius-comfortable);
102
- border-width: var(--ids-comp-size-dialog-container-size-border-width-comfortable);
112
+ border-radius: var(--ids-comp-dialog-container-size-border-radius-comfortable);
113
+ border-width: var(--ids-comp-dialog-container-size-border-width-comfortable);
103
114
  }
104
115
  .ids-dialog.ids-dialog-comfortable .ids-dialog-container {
105
- width: var(--ids-comp-size-dialog-container-size-width-comfortable);
106
- min-height: var(--ids-comp-size-dialog-container-size-min-height-comfortable);
107
- padding: var(--ids-comp-size-dialog-container-size-padding-y-comfortable) var(--ids-comp-size-dialog-container-size-padding-x-comfortable);
108
- gap: var(--ids-comp-size-dialog-container-size-gap-comfortable);
109
- }
110
- .ids-dialog.ids-dialog-comfortable .ids-dialog-header-default-content {
111
- gap: var(--ids-comp-size-dialog-header-size-gap-comfortable);
112
- padding: var(--ids-comp-size-dialog-header-size-padding-y-comfortable) var(--ids-comp-size-dialog-header-size-padding-x-comfortable);
113
- }
114
- .ids-dialog.ids-dialog-comfortable .ids-dialog-content {
115
- padding: var(--ids-comp-size-dialog-content-fixed-size-padding-y-comfortable) var(--ids-comp-size-dialog-content-fixed-size-padding-x-comfortable);
116
- }
117
- .ids-dialog.ids-dialog-comfortable .ids-dialog-content.ids-dialog-content-scrollable {
118
- padding: var(--ids-comp-size-dialog-content-scrollable-size-padding-y-comfortable) var(--ids-comp-size-dialog-content-scrollable-size-padding-x-comfortable);
119
- border-top-width: var(--ids-comp-size-dialog-content-scrollable-size-border-width-comfortable);
120
- border-bottom-width: var(--ids-comp-size-dialog-content-scrollable-size-border-width-comfortable);
121
- }
122
- .ids-dialog.ids-dialog-comfortable .ids-dialog-actions {
123
- padding: var(--ids-comp-size-dialog-footer-padding-y-comfortable, 0px) var(--ids-comp-size-dialog-footer-padding-x-comfortable, 24px);
116
+ width: var(--ids-comp-dialog-container-size-width-comfortable);
117
+ min-height: var(--ids-comp-dialog-container-size-min-height-comfortable);
118
+ padding: var(--ids-comp-dialog-container-size-padding-y-comfortable) var(--ids-comp-dialog-container-size-padding-x-comfortable);
119
+ gap: var(--ids-comp-dialog-container-size-gap-comfortable);
120
+ }
121
+ .ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-header .ids-dialog-title {
122
+ font-family: var(--ids-comp-dialog-header-title-typography-font-family-comfortable);
123
+ font-size: var(--ids-comp-dialog-header-title-typography-font-size-comfortable);
124
+ font-weight: var(--ids-comp-dialog-header-title-typography-font-weight-comfortable);
125
+ letter-spacing: var(--ids-comp-dialog-header-title-typography-letter-spacing-comfortable);
126
+ line-height: var(--ids-comp-dialog-header-title-typography-line-height-comfortable);
127
+ }
128
+ .ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle {
129
+ font-family: var(--ids-comp-dialog-header-subtitle-typography-font-family-comfortable);
130
+ font-size: var(--ids-comp-dialog-header-subtitle-typography-font-size-comfortable);
131
+ font-weight: var(--ids-comp-dialog-header-subtitle-typography-font-weight-comfortable);
132
+ letter-spacing: var(--ids-comp-dialog-header-subtitle-typography-letter-spacing-comfortable);
133
+ line-height: var(--ids-comp-dialog-header-subtitle-typography-line-height-comfortable);
134
+ }
135
+ .ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-header .ids-dialog-header-default-content {
136
+ gap: var(--ids-comp-dialog-header-size-gap-comfortable);
137
+ padding: var(--ids-comp-dialog-header-size-padding-y-comfortable) var(--ids-comp-dialog-header-size-padding-x-comfortable);
138
+ }
139
+ .ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-content {
140
+ padding: var(--ids-comp-dialog-content-fixed-size-padding-y-comfortable) var(--ids-comp-dialog-content-fixed-size-padding-x-comfortable);
141
+ }
142
+ .ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-content.ids-dialog-content-scrollable {
143
+ padding: var(--ids-comp-dialog-content-scrollable-size-padding-y-comfortable) var(--ids-comp-dialog-content-scrollable-size-padding-x-comfortable);
144
+ border-top-width: var(--ids-comp-dialog-content-scrollable-size-border-width-comfortable);
145
+ border-bottom-width: var(--ids-comp-dialog-content-scrollable-size-border-width-comfortable);
146
+ }
147
+ .ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-actions {
148
+ padding: var(--ids-comp-dialog-footer-padding-y-comfortable) var(--ids-comp-dialog-footer-padding-x-comfortable);
124
149
  }
125
150
  .ids-dialog.ids-dialog-spacious {
126
- border-radius: var(--ids-comp-size-dialog-container-size-border-radius-spacious);
127
- border-width: var(--ids-comp-size-dialog-container-size-border-width-spacious);
151
+ border-radius: var(--ids-comp-dialog-container-size-border-radius-spacious);
152
+ border-width: var(--ids-comp-dialog-container-size-border-width-spacious);
128
153
  }
129
154
  .ids-dialog.ids-dialog-spacious .ids-dialog-container {
130
- width: var(--ids-comp-size-dialog-container-size-width-spacious);
131
- min-height: var(--ids-comp-size-dialog-container-size-min-height-spacious);
132
- padding: var(--ids-comp-size-dialog-container-size-padding-y-spacious) var(--ids-comp-size-dialog-container-size-padding-x-spacious);
133
- gap: var(--ids-comp-size-dialog-container-size-gap-spacious);
134
- }
135
- .ids-dialog.ids-dialog-spacious .ids-dialog-header-default-content {
136
- gap: var(--ids-comp-size-dialog-header-size-gap-spacious);
137
- padding: var(--ids-comp-size-dialog-header-size-padding-y-spacious) var(--ids-comp-size-dialog-header-size-padding-x-spacious);
138
- }
139
- .ids-dialog.ids-dialog-spacious .ids-dialog-content {
140
- padding: var(--ids-comp-size-dialog-content-fixed-size-padding-y-spacious) var(--ids-comp-size-dialog-content-fixed-size-padding-x-spacious);
141
- }
142
- .ids-dialog.ids-dialog-spacious .ids-dialog-content.ids-dialog-content-scrollable {
143
- padding: var(--ids-comp-size-dialog-content-scrollable-size-padding-y-spacious) var(--ids-comp-size-dialog-content-scrollable-size-padding-x-spacious);
144
- border-top-width: var(--ids-comp-size-dialog-content-scrollable-size-border-width-spacious);
145
- border-bottom-width: var(--ids-comp-size-dialog-content-scrollable-size-border-width-spacious);
146
- }
147
- .ids-dialog.ids-dialog-spacious .ids-dialog-actions {
148
- padding: var(--ids-comp-size-dialog-footer-padding-y-spacious, 0px) var(--ids-comp-size-dialog-footer-padding-x-spacious, 24px);
155
+ width: var(--ids-comp-dialog-container-size-width-spacious);
156
+ min-height: var(--ids-comp-dialog-container-size-min-height-spacious);
157
+ padding: var(--ids-comp-dialog-container-size-padding-y-spacious) var(--ids-comp-dialog-container-size-padding-x-spacious);
158
+ gap: var(--ids-comp-dialog-container-size-gap-spacious);
159
+ }
160
+ .ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-header .ids-dialog-title {
161
+ font-family: var(--ids-comp-dialog-header-title-typography-font-family-spacious);
162
+ font-size: var(--ids-comp-dialog-header-title-typography-font-size-spacious);
163
+ font-weight: var(--ids-comp-dialog-header-title-typography-font-weight-spacious);
164
+ letter-spacing: var(--ids-comp-dialog-header-title-typography-letter-spacing-spacious);
165
+ line-height: var(--ids-comp-dialog-header-title-typography-line-height-spacious);
166
+ }
167
+ .ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle {
168
+ font-family: var(--ids-comp-dialog-header-subtitle-typography-font-family-spacious);
169
+ font-size: var(--ids-comp-dialog-header-subtitle-typography-font-size-spacious);
170
+ font-weight: var(--ids-comp-dialog-header-subtitle-typography-font-weight-spacious);
171
+ letter-spacing: var(--ids-comp-dialog-header-subtitle-typography-letter-spacing-spacious);
172
+ line-height: var(--ids-comp-dialog-header-subtitle-typography-line-height-spacious);
173
+ }
174
+ .ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-header .ids-dialog-header-default-content {
175
+ gap: var(--ids-comp-dialog-header-size-gap-spacious);
176
+ padding: var(--ids-comp-dialog-header-size-padding-y-spacious) var(--ids-comp-dialog-header-size-padding-x-spacious);
177
+ }
178
+ .ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-content {
179
+ padding: var(--ids-comp-dialog-content-fixed-size-padding-y-spacious) var(--ids-comp-dialog-content-fixed-size-padding-x-spacious);
180
+ }
181
+ .ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-content.ids-dialog-content-scrollable {
182
+ padding: var(--ids-comp-dialog-content-scrollable-size-padding-y-spacious) var(--ids-comp-dialog-content-scrollable-size-padding-x-spacious);
183
+ border-top-width: var(--ids-comp-dialog-content-scrollable-size-border-width-spacious);
184
+ border-bottom-width: var(--ids-comp-dialog-content-scrollable-size-border-width-spacious);
185
+ }
186
+ .ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-actions {
187
+ padding: var(--ids-comp-dialog-footer-padding-y-spacious) var(--ids-comp-dialog-footer-padding-x-spacious);
149
188
  }
150
189
  .ids-dialog.ids-dialog-dense {
151
- border-radius: var(--ids-comp-size-dialog-container-size-border-radius-dense);
152
- border-width: var(--ids-comp-size-dialog-container-size-border-width-dense);
190
+ border-radius: var(--ids-comp-dialog-container-size-border-radius-dense);
191
+ border-width: var(--ids-comp-dialog-container-size-border-width-dense);
153
192
  }
154
193
  .ids-dialog.ids-dialog-dense .ids-dialog-container {
155
- width: var(--ids-comp-size-dialog-container-size-width-dense);
156
- min-height: var(--ids-comp-size-dialog-container-size-min-height-dense);
157
- padding: var(--ids-comp-size-dialog-container-size-padding-y-dense) var(--ids-comp-size-dialog-container-size-padding-x-dense);
158
- gap: var(--ids-comp-size-dialog-container-size-gap-dense);
159
- }
160
- .ids-dialog.ids-dialog-dense .ids-dialog-header-default-content {
161
- gap: var(--ids-comp-size-dialog-header-size-gap-dense);
162
- padding: var(--ids-comp-size-dialog-header-size-padding-y-dense) var(--ids-comp-size-dialog-header-size-padding-x-dense);
163
- }
164
- .ids-dialog.ids-dialog-dense .ids-dialog-content {
165
- padding: var(--ids-comp-size-dialog-content-fixed-size-padding-y-dense) var(--ids-comp-size-dialog-content-fixed-size-padding-x-dense);
166
- }
167
- .ids-dialog.ids-dialog-dense .ids-dialog-content.ids-dialog-content-scrollable {
168
- padding: var(--ids-comp-size-dialog-content-scrollable-size-padding-y-dense) var(--ids-comp-size-dialog-content-scrollable-size-padding-x-dense);
169
- border-top-width: var(--ids-comp-size-dialog-content-scrollable-size-border-width-dense);
170
- border-bottom-width: var(--ids-comp-size-dialog-content-scrollable-size-border-width-dense);
171
- }
172
- .ids-dialog.ids-dialog-dense .ids-dialog-actions {
173
- padding: var(--ids-comp-size-dialog-footer-padding-y-dense, 0px) var(--ids-comp-size-dialog-footer-padding-x-dense, 24px);
194
+ width: var(--ids-comp-dialog-container-size-width-dense);
195
+ min-height: var(--ids-comp-dialog-container-size-min-height-dense);
196
+ padding: var(--ids-comp-dialog-container-size-padding-y-dense) var(--ids-comp-dialog-container-size-padding-x-dense);
197
+ gap: var(--ids-comp-dialog-container-size-gap-dense);
198
+ }
199
+ .ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-header .ids-dialog-title {
200
+ font-family: var(--ids-comp-dialog-header-title-typography-font-family-dense);
201
+ font-size: var(--ids-comp-dialog-header-title-typography-font-size-dense);
202
+ font-weight: var(--ids-comp-dialog-header-title-typography-font-weight-dense);
203
+ letter-spacing: var(--ids-comp-dialog-header-title-typography-letter-spacing-dense);
204
+ line-height: var(--ids-comp-dialog-header-title-typography-line-height-dense);
205
+ }
206
+ .ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle {
207
+ font-family: var(--ids-comp-dialog-header-subtitle-typography-font-family-dense);
208
+ font-size: var(--ids-comp-dialog-header-subtitle-typography-font-size-dense);
209
+ font-weight: var(--ids-comp-dialog-header-subtitle-typography-font-weight-dense);
210
+ letter-spacing: var(--ids-comp-dialog-header-subtitle-typography-letter-spacing-dense);
211
+ line-height: var(--ids-comp-dialog-header-subtitle-typography-line-height-dense);
212
+ }
213
+ .ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-header .ids-dialog-header-default-content {
214
+ gap: var(--ids-comp-dialog-header-size-gap-dense);
215
+ padding: var(--ids-comp-dialog-header-size-padding-y-dense) var(--ids-comp-dialog-header-size-padding-x-dense);
216
+ }
217
+ .ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-content {
218
+ padding: var(--ids-comp-dialog-content-fixed-size-padding-y-dense) var(--ids-comp-dialog-content-fixed-size-padding-x-dense);
219
+ }
220
+ .ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-content.ids-dialog-content-scrollable {
221
+ padding: var(--ids-comp-dialog-content-scrollable-size-padding-y-dense) var(--ids-comp-dialog-content-scrollable-size-padding-x-dense);
222
+ border-top-width: var(--ids-comp-dialog-content-scrollable-size-border-width-dense);
223
+ border-bottom-width: var(--ids-comp-dialog-content-scrollable-size-border-width-dense);
224
+ }
225
+ .ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-actions {
226
+ padding: var(--ids-comp-dialog-footer-padding-y-dense) var(--ids-comp-dialog-footer-padding-x-dense);
174
227
  }
package/dist/dialog/dialog.min.css CHANGED
@@ -1 +1 @@
1
- .ids-dialog{box-sizing:border-box;border-style:solid;border-color:var(--ids-comp-dialog-container-color-border-surface-default);background-color:var(--ids-comp-dialog-container-color-bg-enabled);box-shadow:var(--ids-smc-reference-container-effects-shadow-horizontal-none) var(--ids-smc-reference-container-effects-shadow-vertical-xxl) var(--ids-smc-reference-container-effects-shadow-blur-xxxl) var(--ids-smc-reference-container-effects-shadow-spread-xxs) var(--ids-smc-reference-container-effects-shadow-color-dark-default)}.ids-dialog::backdrop{background-color:rgba(0,0,0,0)}.ids-dialog.ids-dialog-with-backdrop::backdrop{opacity:var(--ids-comp-dialog-backdrop-opacity);background-color:var(--ids-comp-dialog-backdrop-background)}.ids-dialog .ids-dialog-container{display:grid;grid-template-rows:auto 1fr auto;position:relative;max-height:80vh}.ids-dialog .ids-dialog-close-button{position:absolute;top:12px;right:12px}.ids-dialog .ids-dialog-header{display:flex;align-items:stretch}.ids-dialog .ids-dialog-header-default-content{display:flex;flex-direction:column;flex:1 0 0;align-items:flex-start}.ids-dialog .ids-dialog-title{font-size:28px;font-style:normal;font-weight:700;line-height:36px}.ids-dialog .ids-dialog-subtitle{font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.5px}.ids-dialog .ids-dialog-content{display:flex;align-items:center;justify-content:center;overflow-y:auto;background:var(--ids-comp-dialog-content-color-bg-enabled)}.ids-dialog .ids-dialog-content .ids-dialog-content-overflow{overflow-y:auto;height:100%}.ids-dialog .ids-dialog-content.ids-dialog-content-scrollable{border-top-style:solid;border-bottom-style:solid;border-top-color:var(--ids-comp-dialog-content-color-border-surface-default);border-bottom-color:var(--ids-comp-dialog-content-color-border-surface-default)}.ids-dialog .ids-dialog-actions{display:flex;background:var(--ids-comp-dialog-footer-color-bg-enabled);justify-content:flex-end;align-items:flex-start;align-content:flex-start;align-self:stretch;flex-wrap:wrap}.ids-dialog.ids-dialog-compact{border-radius:var(--ids-comp-size-dialog-container-size-border-radius-compact);border-width:var(--ids-comp-size-dialog-container-size-border-width-compact)}.ids-dialog.ids-dialog-compact .ids-dialog-container{width:var(--ids-comp-size-dialog-container-size-width-compact);min-height:var(--ids-comp-size-dialog-container-size-min-height-compact);padding:var(--ids-comp-size-dialog-container-size-padding-y-compact) var(--ids-comp-size-dialog-container-size-padding-x-compact);gap:var(--ids-comp-size-dialog-container-size-gap-compact)}.ids-dialog.ids-dialog-compact .ids-dialog-header-default-content{gap:var(--ids-comp-size-dialog-header-size-gap-compact);padding:var(--ids-comp-size-dialog-header-size-padding-y-compact) var(--ids-comp-size-dialog-header-size-padding-x-compact)}.ids-dialog.ids-dialog-compact .ids-dialog-content{padding:var(--ids-comp-size-dialog-content-fixed-size-padding-y-compact) var(--ids-comp-size-dialog-content-fixed-size-padding-x-compact)}.ids-dialog.ids-dialog-compact .ids-dialog-content.ids-dialog-content-scrollable{padding:var(--ids-comp-size-dialog-content-scrollable-size-padding-y-compact) var(--ids-comp-size-dialog-content-scrollable-size-padding-x-compact);border-top-width:var(--ids-comp-size-dialog-content-scrollable-size-border-width-compact);border-bottom-width:var(--ids-comp-size-dialog-content-scrollable-size-border-width-compact)}.ids-dialog.ids-dialog-compact .ids-dialog-actions{padding:var(--ids-comp-size-dialog-footer-padding-y-compact, 0px) var(--ids-comp-size-dialog-footer-padding-x-compact, 24px)}.ids-dialog.ids-dialog-comfortable{border-radius:var(--ids-comp-size-dialog-container-size-border-radius-comfortable);border-width:var(--ids-comp-size-dialog-container-size-border-width-comfortable)}.ids-dialog.ids-dialog-comfortable .ids-dialog-container{width:var(--ids-comp-size-dialog-container-size-width-comfortable);min-height:var(--ids-comp-size-dialog-container-size-min-height-comfortable);padding:var(--ids-comp-size-dialog-container-size-padding-y-comfortable) var(--ids-comp-size-dialog-container-size-padding-x-comfortable);gap:var(--ids-comp-size-dialog-container-size-gap-comfortable)}.ids-dialog.ids-dialog-comfortable .ids-dialog-header-default-content{gap:var(--ids-comp-size-dialog-header-size-gap-comfortable);padding:var(--ids-comp-size-dialog-header-size-padding-y-comfortable) var(--ids-comp-size-dialog-header-size-padding-x-comfortable)}.ids-dialog.ids-dialog-comfortable .ids-dialog-content{padding:var(--ids-comp-size-dialog-content-fixed-size-padding-y-comfortable) var(--ids-comp-size-dialog-content-fixed-size-padding-x-comfortable)}.ids-dialog.ids-dialog-comfortable .ids-dialog-content.ids-dialog-content-scrollable{padding:var(--ids-comp-size-dialog-content-scrollable-size-padding-y-comfortable) var(--ids-comp-size-dialog-content-scrollable-size-padding-x-comfortable);border-top-width:var(--ids-comp-size-dialog-content-scrollable-size-border-width-comfortable);border-bottom-width:var(--ids-comp-size-dialog-content-scrollable-size-border-width-comfortable)}.ids-dialog.ids-dialog-comfortable .ids-dialog-actions{padding:var(--ids-comp-size-dialog-footer-padding-y-comfortable, 0px) var(--ids-comp-size-dialog-footer-padding-x-comfortable, 24px)}.ids-dialog.ids-dialog-spacious{border-radius:var(--ids-comp-size-dialog-container-size-border-radius-spacious);border-width:var(--ids-comp-size-dialog-container-size-border-width-spacious)}.ids-dialog.ids-dialog-spacious .ids-dialog-container{width:var(--ids-comp-size-dialog-container-size-width-spacious);min-height:var(--ids-comp-size-dialog-container-size-min-height-spacious);padding:var(--ids-comp-size-dialog-container-size-padding-y-spacious) var(--ids-comp-size-dialog-container-size-padding-x-spacious);gap:var(--ids-comp-size-dialog-container-size-gap-spacious)}.ids-dialog.ids-dialog-spacious .ids-dialog-header-default-content{gap:var(--ids-comp-size-dialog-header-size-gap-spacious);padding:var(--ids-comp-size-dialog-header-size-padding-y-spacious) var(--ids-comp-size-dialog-header-size-padding-x-spacious)}.ids-dialog.ids-dialog-spacious .ids-dialog-content{padding:var(--ids-comp-size-dialog-content-fixed-size-padding-y-spacious) var(--ids-comp-size-dialog-content-fixed-size-padding-x-spacious)}.ids-dialog.ids-dialog-spacious .ids-dialog-content.ids-dialog-content-scrollable{padding:var(--ids-comp-size-dialog-content-scrollable-size-padding-y-spacious) var(--ids-comp-size-dialog-content-scrollable-size-padding-x-spacious);border-top-width:var(--ids-comp-size-dialog-content-scrollable-size-border-width-spacious);border-bottom-width:var(--ids-comp-size-dialog-content-scrollable-size-border-width-spacious)}.ids-dialog.ids-dialog-spacious .ids-dialog-actions{padding:var(--ids-comp-size-dialog-footer-padding-y-spacious, 0px) var(--ids-comp-size-dialog-footer-padding-x-spacious, 24px)}.ids-dialog.ids-dialog-dense{border-radius:var(--ids-comp-size-dialog-container-size-border-radius-dense);border-width:var(--ids-comp-size-dialog-container-size-border-width-dense)}.ids-dialog.ids-dialog-dense .ids-dialog-container{width:var(--ids-comp-size-dialog-container-size-width-dense);min-height:var(--ids-comp-size-dialog-container-size-min-height-dense);padding:var(--ids-comp-size-dialog-container-size-padding-y-dense) var(--ids-comp-size-dialog-container-size-padding-x-dense);gap:var(--ids-comp-size-dialog-container-size-gap-dense)}.ids-dialog.ids-dialog-dense .ids-dialog-header-default-content{gap:var(--ids-comp-size-dialog-header-size-gap-dense);padding:var(--ids-comp-size-dialog-header-size-padding-y-dense) var(--ids-comp-size-dialog-header-size-padding-x-dense)}.ids-dialog.ids-dialog-dense .ids-dialog-content{padding:var(--ids-comp-size-dialog-content-fixed-size-padding-y-dense) var(--ids-comp-size-dialog-content-fixed-size-padding-x-dense)}.ids-dialog.ids-dialog-dense .ids-dialog-content.ids-dialog-content-scrollable{padding:var(--ids-comp-size-dialog-content-scrollable-size-padding-y-dense) var(--ids-comp-size-dialog-content-scrollable-size-padding-x-dense);border-top-width:var(--ids-comp-size-dialog-content-scrollable-size-border-width-dense);border-bottom-width:var(--ids-comp-size-dialog-content-scrollable-size-border-width-dense)}.ids-dialog.ids-dialog-dense .ids-dialog-actions{padding:var(--ids-comp-size-dialog-footer-padding-y-dense, 0px) var(--ids-comp-size-dialog-footer-padding-x-dense, 24px)}
1
+ .ids-dialog{box-sizing:border-box;border-style:solid;border-color:var(--ids-comp-dialog-container-color-border-surface-default);background-color:var(--ids-comp-dialog-container-color-bg-default);box-shadow:var(--ids-smc-reference-container-effects-shadow-horizontal-none) var(--ids-smc-reference-container-effects-shadow-vertical-xxl) var(--ids-smc-reference-container-effects-shadow-blur-xxxl) var(--ids-smc-reference-container-effects-shadow-spread-xxs) var(--ids-smc-reference-container-effects-shadow-color-dark-default)}.ids-dialog::backdrop{background-color:rgba(0,0,0,0)}.ids-dialog.ids-dialog-with-backdrop::backdrop{opacity:var(--ids-comp-dialog-backdrop-opacity);background-color:var(--ids-comp-dialog-backdrop-background)}.ids-dialog .ids-dialog-container{box-sizing:border-box;display:grid;grid-template-rows:auto 1fr auto;position:relative;max-height:80vh}.ids-dialog .ids-dialog-container .ids-dialog-header{display:flex;align-items:stretch}.ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-title{font-style:normal}.ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-title.hidden{display:none}.ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle{font-style:normal}.ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-header-default-content{display:flex;flex-direction:column;flex:1 0 0;align-items:flex-start}.ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-close-button{position:absolute;top:12px;right:12px}.ids-dialog .ids-dialog-container .ids-dialog-content{display:flex;align-items:center;justify-content:center;overflow-y:auto;background:var(--ids-comp-dialog-content-color-bg-default)}.ids-dialog .ids-dialog-container .ids-dialog-content .ids-dialog-content-overflow{overflow-y:auto;height:100%}.ids-dialog .ids-dialog-container .ids-dialog-content.ids-dialog-content-scrollable{border-top-style:solid;border-bottom-style:solid;border-top-color:var(--ids-comp-dialog-content-color-border-surface-default);border-bottom-color:var(--ids-comp-dialog-content-color-border-surface-default)}.ids-dialog .ids-dialog-container .ids-dialog-actions{display:flex;background:var(--ids-comp-dialog-footer-color-bg-default);justify-content:flex-end;align-items:flex-start;align-content:flex-start;align-self:stretch;flex-wrap:wrap}.ids-dialog.ids-dialog-compact{border-radius:var(--ids-comp-dialog-container-size-border-radius-compact);border-width:var(--ids-comp-dialog-container-size-border-width-compact)}.ids-dialog.ids-dialog-compact .ids-dialog-container{width:var(--ids-comp-dialog-container-size-width-compact);min-height:var(--ids-comp-dialog-container-size-min-height-compact);padding:var(--ids-comp-dialog-container-size-padding-y-compact) var(--ids-comp-dialog-container-size-padding-x-compact);gap:var(--ids-comp-dialog-container-size-gap-compact)}.ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-header .ids-dialog-title{font-family:var(--ids-comp-dialog-header-title-typography-font-family-compact);font-size:var(--ids-comp-dialog-header-title-typography-font-size-compact);font-weight:var(--ids-comp-dialog-header-title-typography-font-weight-compact);letter-spacing:var(--ids-comp-dialog-header-title-typography-letter-spacing-compact);line-height:var(--ids-comp-dialog-header-title-typography-line-height-compact)}.ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle{font-family:var(--ids-comp-dialog-header-subtitle-typography-font-family-compact);font-size:var(--ids-comp-dialog-header-subtitle-typography-font-size-compact);font-weight:var(--ids-comp-dialog-header-subtitle-typography-font-weight-compact);letter-spacing:var(--ids-comp-dialog-header-subtitle-typography-letter-spacing-compact);line-height:var(--ids-comp-dialog-header-subtitle-typography-line-height-compact)}.ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-header .ids-dialog-header-default-content{gap:var(--ids-comp-dialog-header-size-gap-compact);padding:var(--ids-comp-dialog-header-size-padding-y-compact) var(--ids-comp-dialog-header-size-padding-x-compact)}.ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-content{padding:var(--ids-comp-dialog-content-fixed-size-padding-y-compact) var(--ids-comp-dialog-content-fixed-size-padding-x-compact)}.ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-content.ids-dialog-content-scrollable{padding:var(--ids-comp-dialog-content-scrollable-size-padding-y-compact) var(--ids-comp-dialog-content-scrollable-size-padding-x-compact);border-top-width:var(--ids-comp-dialog-content-scrollable-size-border-width-compact);border-bottom-width:var(--ids-comp-dialog-content-scrollable-size-border-width-compact)}.ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-actions{padding:var(--ids-comp-dialog-footer-padding-y-compact) var(--ids-comp-dialog-footer-padding-x-compact)}.ids-dialog.ids-dialog-comfortable{border-radius:var(--ids-comp-dialog-container-size-border-radius-comfortable);border-width:var(--ids-comp-dialog-container-size-border-width-comfortable)}.ids-dialog.ids-dialog-comfortable .ids-dialog-container{width:var(--ids-comp-dialog-container-size-width-comfortable);min-height:var(--ids-comp-dialog-container-size-min-height-comfortable);padding:var(--ids-comp-dialog-container-size-padding-y-comfortable) var(--ids-comp-dialog-container-size-padding-x-comfortable);gap:var(--ids-comp-dialog-container-size-gap-comfortable)}.ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-header .ids-dialog-title{font-family:var(--ids-comp-dialog-header-title-typography-font-family-comfortable);font-size:var(--ids-comp-dialog-header-title-typography-font-size-comfortable);font-weight:var(--ids-comp-dialog-header-title-typography-font-weight-comfortable);letter-spacing:var(--ids-comp-dialog-header-title-typography-letter-spacing-comfortable);line-height:var(--ids-comp-dialog-header-title-typography-line-height-comfortable)}.ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle{font-family:var(--ids-comp-dialog-header-subtitle-typography-font-family-comfortable);font-size:var(--ids-comp-dialog-header-subtitle-typography-font-size-comfortable);font-weight:var(--ids-comp-dialog-header-subtitle-typography-font-weight-comfortable);letter-spacing:var(--ids-comp-dialog-header-subtitle-typography-letter-spacing-comfortable);line-height:var(--ids-comp-dialog-header-subtitle-typography-line-height-comfortable)}.ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-header .ids-dialog-header-default-content{gap:var(--ids-comp-dialog-header-size-gap-comfortable);padding:var(--ids-comp-dialog-header-size-padding-y-comfortable) var(--ids-comp-dialog-header-size-padding-x-comfortable)}.ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-content{padding:var(--ids-comp-dialog-content-fixed-size-padding-y-comfortable) var(--ids-comp-dialog-content-fixed-size-padding-x-comfortable)}.ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-content.ids-dialog-content-scrollable{padding:var(--ids-comp-dialog-content-scrollable-size-padding-y-comfortable) var(--ids-comp-dialog-content-scrollable-size-padding-x-comfortable);border-top-width:var(--ids-comp-dialog-content-scrollable-size-border-width-comfortable);border-bottom-width:var(--ids-comp-dialog-content-scrollable-size-border-width-comfortable)}.ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-actions{padding:var(--ids-comp-dialog-footer-padding-y-comfortable) var(--ids-comp-dialog-footer-padding-x-comfortable)}.ids-dialog.ids-dialog-spacious{border-radius:var(--ids-comp-dialog-container-size-border-radius-spacious);border-width:var(--ids-comp-dialog-container-size-border-width-spacious)}.ids-dialog.ids-dialog-spacious .ids-dialog-container{width:var(--ids-comp-dialog-container-size-width-spacious);min-height:var(--ids-comp-dialog-container-size-min-height-spacious);padding:var(--ids-comp-dialog-container-size-padding-y-spacious) var(--ids-comp-dialog-container-size-padding-x-spacious);gap:var(--ids-comp-dialog-container-size-gap-spacious)}.ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-header .ids-dialog-title{font-family:var(--ids-comp-dialog-header-title-typography-font-family-spacious);font-size:var(--ids-comp-dialog-header-title-typography-font-size-spacious);font-weight:var(--ids-comp-dialog-header-title-typography-font-weight-spacious);letter-spacing:var(--ids-comp-dialog-header-title-typography-letter-spacing-spacious);line-height:var(--ids-comp-dialog-header-title-typography-line-height-spacious)}.ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle{font-family:var(--ids-comp-dialog-header-subtitle-typography-font-family-spacious);font-size:var(--ids-comp-dialog-header-subtitle-typography-font-size-spacious);font-weight:var(--ids-comp-dialog-header-subtitle-typography-font-weight-spacious);letter-spacing:var(--ids-comp-dialog-header-subtitle-typography-letter-spacing-spacious);line-height:var(--ids-comp-dialog-header-subtitle-typography-line-height-spacious)}.ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-header .ids-dialog-header-default-content{gap:var(--ids-comp-dialog-header-size-gap-spacious);padding:var(--ids-comp-dialog-header-size-padding-y-spacious) var(--ids-comp-dialog-header-size-padding-x-spacious)}.ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-content{padding:var(--ids-comp-dialog-content-fixed-size-padding-y-spacious) var(--ids-comp-dialog-content-fixed-size-padding-x-spacious)}.ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-content.ids-dialog-content-scrollable{padding:var(--ids-comp-dialog-content-scrollable-size-padding-y-spacious) var(--ids-comp-dialog-content-scrollable-size-padding-x-spacious);border-top-width:var(--ids-comp-dialog-content-scrollable-size-border-width-spacious);border-bottom-width:var(--ids-comp-dialog-content-scrollable-size-border-width-spacious)}.ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-actions{padding:var(--ids-comp-dialog-footer-padding-y-spacious) var(--ids-comp-dialog-footer-padding-x-spacious)}.ids-dialog.ids-dialog-dense{border-radius:var(--ids-comp-dialog-container-size-border-radius-dense);border-width:var(--ids-comp-dialog-container-size-border-width-dense)}.ids-dialog.ids-dialog-dense .ids-dialog-container{width:var(--ids-comp-dialog-container-size-width-dense);min-height:var(--ids-comp-dialog-container-size-min-height-dense);padding:var(--ids-comp-dialog-container-size-padding-y-dense) var(--ids-comp-dialog-container-size-padding-x-dense);gap:var(--ids-comp-dialog-container-size-gap-dense)}.ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-header .ids-dialog-title{font-family:var(--ids-comp-dialog-header-title-typography-font-family-dense);font-size:var(--ids-comp-dialog-header-title-typography-font-size-dense);font-weight:var(--ids-comp-dialog-header-title-typography-font-weight-dense);letter-spacing:var(--ids-comp-dialog-header-title-typography-letter-spacing-dense);line-height:var(--ids-comp-dialog-header-title-typography-line-height-dense)}.ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle{font-family:var(--ids-comp-dialog-header-subtitle-typography-font-family-dense);font-size:var(--ids-comp-dialog-header-subtitle-typography-font-size-dense);font-weight:var(--ids-comp-dialog-header-subtitle-typography-font-weight-dense);letter-spacing:var(--ids-comp-dialog-header-subtitle-typography-letter-spacing-dense);line-height:var(--ids-comp-dialog-header-subtitle-typography-line-height-dense)}.ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-header .ids-dialog-header-default-content{gap:var(--ids-comp-dialog-header-size-gap-dense);padding:var(--ids-comp-dialog-header-size-padding-y-dense) var(--ids-comp-dialog-header-size-padding-x-dense)}.ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-content{padding:var(--ids-comp-dialog-content-fixed-size-padding-y-dense) var(--ids-comp-dialog-content-fixed-size-padding-x-dense)}.ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-content.ids-dialog-content-scrollable{padding:var(--ids-comp-dialog-content-scrollable-size-padding-y-dense) var(--ids-comp-dialog-content-scrollable-size-padding-x-dense);border-top-width:var(--ids-comp-dialog-content-scrollable-size-border-width-dense);border-bottom-width:var(--ids-comp-dialog-content-scrollable-size-border-width-dense)}.ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-actions{padding:var(--ids-comp-dialog-footer-padding-y-dense) var(--ids-comp-dialog-footer-padding-x-dense)}
package/dist/dialog/dialog.plugin.js ADDED
@@ -0,0 +1,225 @@
1
+ // Tailwind CSS plugin for the dialog component in the i-Cell Design System
2
+ module.exports = function DialogPlugin() {
3
+ return function ({ addComponents }) {
4
+ const cssObj = {
5
+ '.ids-dialog': {
6
+ boxSizing: 'border-box',
7
+ borderStyle: 'solid',
8
+ borderColor: 'var(--ids-comp-dialog-container-color-border-surface-default)',
9
+ backgroundColor: 'var(--ids-comp-dialog-container-color-bg-default)',
10
+ boxShadow:
11
+ 'var(--ids-smc-reference-container-effects-shadow-horizontal-none) var(--ids-smc-reference-container-effects-shadow-vertical-xxl) var(--ids-smc-reference-container-effects-shadow-blur-xxxl) var(--ids-smc-reference-container-effects-shadow-spread-xxs) var(--ids-smc-reference-container-effects-shadow-color-dark-default)',
12
+ },
13
+ '.ids-dialog::backdrop': { backgroundColor: 'rgba(0,0,0,0)' },
14
+ '.ids-dialog.ids-dialog-with-backdrop::backdrop': {
15
+ opacity: 'var(--ids-comp-dialog-backdrop-opacity)',
16
+ backgroundColor: 'var(--ids-comp-dialog-backdrop-background)',
17
+ },
18
+ '.ids-dialog .ids-dialog-container': {
19
+ boxSizing: 'border-box',
20
+ display: 'grid',
21
+ gridTemplateRows: 'auto 1fr auto',
22
+ position: 'relative',
23
+ maxHeight: '80vh',
24
+ },
25
+ '.ids-dialog .ids-dialog-container .ids-dialog-header': { display: 'flex', alignItems: 'stretch' },
26
+ '.ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-title': { fontStyle: 'normal' },
27
+ '.ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-title.hidden': { display: 'none' },
28
+ '.ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle': { fontStyle: 'normal' },
29
+ '.ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-header-default-content': {
30
+ display: 'flex',
31
+ flexDirection: 'column',
32
+ flex: '1 0 0',
33
+ alignItems: 'flex-start',
34
+ },
35
+ '.ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-close-button': { position: 'absolute', top: '12px', right: '12px' },
36
+ '.ids-dialog .ids-dialog-container .ids-dialog-content': {
37
+ display: 'flex',
38
+ alignItems: 'center',
39
+ justifyContent: 'center',
40
+ overflowY: 'auto',
41
+ background: 'var(--ids-comp-dialog-content-color-bg-default)',
42
+ },
43
+ '.ids-dialog .ids-dialog-container .ids-dialog-content .ids-dialog-content-overflow': { overflowY: 'auto', height: '100%' },
44
+ '.ids-dialog .ids-dialog-container .ids-dialog-content.ids-dialog-content-scrollable': {
45
+ borderTopStyle: 'solid',
46
+ borderBottomStyle: 'solid',
47
+ borderTopColor: 'var(--ids-comp-dialog-content-color-border-surface-default)',
48
+ borderBottomColor: 'var(--ids-comp-dialog-content-color-border-surface-default)',
49
+ },
50
+ '.ids-dialog .ids-dialog-container .ids-dialog-actions': {
51
+ display: 'flex',
52
+ background: 'var(--ids-comp-dialog-footer-color-bg-default)',
53
+ justifyContent: 'flex-end',
54
+ alignItems: 'flex-start',
55
+ alignContent: 'flex-start',
56
+ alignSelf: 'stretch',
57
+ flexWrap: 'wrap',
58
+ },
59
+ '.ids-dialog.ids-dialog-compact': {
60
+ borderRadius: 'var(--ids-comp-dialog-container-size-border-radius-compact)',
61
+ borderWidth: 'var(--ids-comp-dialog-container-size-border-width-compact)',
62
+ },
63
+ '.ids-dialog.ids-dialog-compact .ids-dialog-container': {
64
+ width: 'var(--ids-comp-dialog-container-size-width-compact)',
65
+ minHeight: 'var(--ids-comp-dialog-container-size-min-height-compact)',
66
+ padding: 'var(--ids-comp-dialog-container-size-padding-y-compact) var(--ids-comp-dialog-container-size-padding-x-compact)',
67
+ gap: 'var(--ids-comp-dialog-container-size-gap-compact)',
68
+ },
69
+ '.ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-header .ids-dialog-title': {
70
+ fontFamily: 'var(--ids-comp-dialog-header-title-typography-font-family-compact)',
71
+ fontSize: 'var(--ids-comp-dialog-header-title-typography-font-size-compact)',
72
+ fontWeight: 'var(--ids-comp-dialog-header-title-typography-font-weight-compact)',
73
+ letterSpacing: 'var(--ids-comp-dialog-header-title-typography-letter-spacing-compact)',
74
+ lineHeight: 'var(--ids-comp-dialog-header-title-typography-line-height-compact)',
75
+ },
76
+ '.ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle': {
77
+ fontFamily: 'var(--ids-comp-dialog-header-subtitle-typography-font-family-compact)',
78
+ fontSize: 'var(--ids-comp-dialog-header-subtitle-typography-font-size-compact)',
79
+ fontWeight: 'var(--ids-comp-dialog-header-subtitle-typography-font-weight-compact)',
80
+ letterSpacing: 'var(--ids-comp-dialog-header-subtitle-typography-letter-spacing-compact)',
81
+ lineHeight: 'var(--ids-comp-dialog-header-subtitle-typography-line-height-compact)',
82
+ },
83
+ '.ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-header .ids-dialog-header-default-content': {
84
+ gap: 'var(--ids-comp-dialog-header-size-gap-compact)',
85
+ padding: 'var(--ids-comp-dialog-header-size-padding-y-compact) var(--ids-comp-dialog-header-size-padding-x-compact)',
86
+ },
87
+ '.ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-content': {
88
+ padding: 'var(--ids-comp-dialog-content-fixed-size-padding-y-compact) var(--ids-comp-dialog-content-fixed-size-padding-x-compact)',
89
+ },
90
+ '.ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-content.ids-dialog-content-scrollable': {
91
+ padding:
92
+ 'var(--ids-comp-dialog-content-scrollable-size-padding-y-compact) var(--ids-comp-dialog-content-scrollable-size-padding-x-compact)',
93
+ borderTopWidth: 'var(--ids-comp-dialog-content-scrollable-size-border-width-compact)',
94
+ borderBottomWidth: 'var(--ids-comp-dialog-content-scrollable-size-border-width-compact)',
95
+ },
96
+ '.ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-actions': {
97
+ padding: 'var(--ids-comp-dialog-footer-padding-y-compact) var(--ids-comp-dialog-footer-padding-x-compact)',
98
+ },
99
+ '.ids-dialog.ids-dialog-comfortable': {
100
+ borderRadius: 'var(--ids-comp-dialog-container-size-border-radius-comfortable)',
101
+ borderWidth: 'var(--ids-comp-dialog-container-size-border-width-comfortable)',
102
+ },
103
+ '.ids-dialog.ids-dialog-comfortable .ids-dialog-container': {
104
+ width: 'var(--ids-comp-dialog-container-size-width-comfortable)',
105
+ minHeight: 'var(--ids-comp-dialog-container-size-min-height-comfortable)',
106
+ padding: 'var(--ids-comp-dialog-container-size-padding-y-comfortable) var(--ids-comp-dialog-container-size-padding-x-comfortable)',
107
+ gap: 'var(--ids-comp-dialog-container-size-gap-comfortable)',
108
+ },
109
+ '.ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-header .ids-dialog-title': {
110
+ fontFamily: 'var(--ids-comp-dialog-header-title-typography-font-family-comfortable)',
111
+ fontSize: 'var(--ids-comp-dialog-header-title-typography-font-size-comfortable)',
112
+ fontWeight: 'var(--ids-comp-dialog-header-title-typography-font-weight-comfortable)',
113
+ letterSpacing: 'var(--ids-comp-dialog-header-title-typography-letter-spacing-comfortable)',
114
+ lineHeight: 'var(--ids-comp-dialog-header-title-typography-line-height-comfortable)',
115
+ },
116
+ '.ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle': {
117
+ fontFamily: 'var(--ids-comp-dialog-header-subtitle-typography-font-family-comfortable)',
118
+ fontSize: 'var(--ids-comp-dialog-header-subtitle-typography-font-size-comfortable)',
119
+ fontWeight: 'var(--ids-comp-dialog-header-subtitle-typography-font-weight-comfortable)',
120
+ letterSpacing: 'var(--ids-comp-dialog-header-subtitle-typography-letter-spacing-comfortable)',
121
+ lineHeight: 'var(--ids-comp-dialog-header-subtitle-typography-line-height-comfortable)',
122
+ },
123
+ '.ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-header .ids-dialog-header-default-content': {
124
+ gap: 'var(--ids-comp-dialog-header-size-gap-comfortable)',
125
+ padding: 'var(--ids-comp-dialog-header-size-padding-y-comfortable) var(--ids-comp-dialog-header-size-padding-x-comfortable)',
126
+ },
127
+ '.ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-content': {
128
+ padding:
129
+ 'var(--ids-comp-dialog-content-fixed-size-padding-y-comfortable) var(--ids-comp-dialog-content-fixed-size-padding-x-comfortable)',
130
+ },
131
+ '.ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-content.ids-dialog-content-scrollable': {
132
+ padding:
133
+ 'var(--ids-comp-dialog-content-scrollable-size-padding-y-comfortable) var(--ids-comp-dialog-content-scrollable-size-padding-x-comfortable)',
134
+ borderTopWidth: 'var(--ids-comp-dialog-content-scrollable-size-border-width-comfortable)',
135
+ borderBottomWidth: 'var(--ids-comp-dialog-content-scrollable-size-border-width-comfortable)',
136
+ },
137
+ '.ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-actions': {
138
+ padding: 'var(--ids-comp-dialog-footer-padding-y-comfortable) var(--ids-comp-dialog-footer-padding-x-comfortable)',
139
+ },
140
+ '.ids-dialog.ids-dialog-spacious': {
141
+ borderRadius: 'var(--ids-comp-dialog-container-size-border-radius-spacious)',
142
+ borderWidth: 'var(--ids-comp-dialog-container-size-border-width-spacious)',
143
+ },
144
+ '.ids-dialog.ids-dialog-spacious .ids-dialog-container': {
145
+ width: 'var(--ids-comp-dialog-container-size-width-spacious)',
146
+ minHeight: 'var(--ids-comp-dialog-container-size-min-height-spacious)',
147
+ padding: 'var(--ids-comp-dialog-container-size-padding-y-spacious) var(--ids-comp-dialog-container-size-padding-x-spacious)',
148
+ gap: 'var(--ids-comp-dialog-container-size-gap-spacious)',
149
+ },
150
+ '.ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-header .ids-dialog-title': {
151
+ fontFamily: 'var(--ids-comp-dialog-header-title-typography-font-family-spacious)',
152
+ fontSize: 'var(--ids-comp-dialog-header-title-typography-font-size-spacious)',
153
+ fontWeight: 'var(--ids-comp-dialog-header-title-typography-font-weight-spacious)',
154
+ letterSpacing: 'var(--ids-comp-dialog-header-title-typography-letter-spacing-spacious)',
155
+ lineHeight: 'var(--ids-comp-dialog-header-title-typography-line-height-spacious)',
156
+ },
157
+ '.ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle': {
158
+ fontFamily: 'var(--ids-comp-dialog-header-subtitle-typography-font-family-spacious)',
159
+ fontSize: 'var(--ids-comp-dialog-header-subtitle-typography-font-size-spacious)',
160
+ fontWeight: 'var(--ids-comp-dialog-header-subtitle-typography-font-weight-spacious)',
161
+ letterSpacing: 'var(--ids-comp-dialog-header-subtitle-typography-letter-spacing-spacious)',
162
+ lineHeight: 'var(--ids-comp-dialog-header-subtitle-typography-line-height-spacious)',
163
+ },
164
+ '.ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-header .ids-dialog-header-default-content': {
165
+ gap: 'var(--ids-comp-dialog-header-size-gap-spacious)',
166
+ padding: 'var(--ids-comp-dialog-header-size-padding-y-spacious) var(--ids-comp-dialog-header-size-padding-x-spacious)',
167
+ },
168
+ '.ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-content': {
169
+ padding:
170
+ 'var(--ids-comp-dialog-content-fixed-size-padding-y-spacious) var(--ids-comp-dialog-content-fixed-size-padding-x-spacious)',
171
+ },
172
+ '.ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-content.ids-dialog-content-scrollable': {
173
+ padding:
174
+ 'var(--ids-comp-dialog-content-scrollable-size-padding-y-spacious) var(--ids-comp-dialog-content-scrollable-size-padding-x-spacious)',
175
+ borderTopWidth: 'var(--ids-comp-dialog-content-scrollable-size-border-width-spacious)',
176
+ borderBottomWidth: 'var(--ids-comp-dialog-content-scrollable-size-border-width-spacious)',
177
+ },
178
+ '.ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-actions': {
179
+ padding: 'var(--ids-comp-dialog-footer-padding-y-spacious) var(--ids-comp-dialog-footer-padding-x-spacious)',
180
+ },
181
+ '.ids-dialog.ids-dialog-dense': {
182
+ borderRadius: 'var(--ids-comp-dialog-container-size-border-radius-dense)',
183
+ borderWidth: 'var(--ids-comp-dialog-container-size-border-width-dense)',
184
+ },
185
+ '.ids-dialog.ids-dialog-dense .ids-dialog-container': {
186
+ width: 'var(--ids-comp-dialog-container-size-width-dense)',
187
+ minHeight: 'var(--ids-comp-dialog-container-size-min-height-dense)',
188
+ padding: 'var(--ids-comp-dialog-container-size-padding-y-dense) var(--ids-comp-dialog-container-size-padding-x-dense)',
189
+ gap: 'var(--ids-comp-dialog-container-size-gap-dense)',
190
+ },
191
+ '.ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-header .ids-dialog-title': {
192
+ fontFamily: 'var(--ids-comp-dialog-header-title-typography-font-family-dense)',
193
+ fontSize: 'var(--ids-comp-dialog-header-title-typography-font-size-dense)',
194
+ fontWeight: 'var(--ids-comp-dialog-header-title-typography-font-weight-dense)',
195
+ letterSpacing: 'var(--ids-comp-dialog-header-title-typography-letter-spacing-dense)',
196
+ lineHeight: 'var(--ids-comp-dialog-header-title-typography-line-height-dense)',
197
+ },
198
+ '.ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle': {
199
+ fontFamily: 'var(--ids-comp-dialog-header-subtitle-typography-font-family-dense)',
200
+ fontSize: 'var(--ids-comp-dialog-header-subtitle-typography-font-size-dense)',
201
+ fontWeight: 'var(--ids-comp-dialog-header-subtitle-typography-font-weight-dense)',
202
+ letterSpacing: 'var(--ids-comp-dialog-header-subtitle-typography-letter-spacing-dense)',
203
+ lineHeight: 'var(--ids-comp-dialog-header-subtitle-typography-line-height-dense)',
204
+ },
205
+ '.ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-header .ids-dialog-header-default-content': {
206
+ gap: 'var(--ids-comp-dialog-header-size-gap-dense)',
207
+ padding: 'var(--ids-comp-dialog-header-size-padding-y-dense) var(--ids-comp-dialog-header-size-padding-x-dense)',
208
+ },
209
+ '.ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-content': {
210
+ padding: 'var(--ids-comp-dialog-content-fixed-size-padding-y-dense) var(--ids-comp-dialog-content-fixed-size-padding-x-dense)',
211
+ },
212
+ '.ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-content.ids-dialog-content-scrollable': {
213
+ padding:
214
+ 'var(--ids-comp-dialog-content-scrollable-size-padding-y-dense) var(--ids-comp-dialog-content-scrollable-size-padding-x-dense)',
215
+ borderTopWidth: 'var(--ids-comp-dialog-content-scrollable-size-border-width-dense)',
216
+ borderBottomWidth: 'var(--ids-comp-dialog-content-scrollable-size-border-width-dense)',
217
+ },
218
+ '.ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-actions': {
219
+ padding: 'var(--ids-comp-dialog-footer-padding-y-dense) var(--ids-comp-dialog-footer-padding-x-dense)',
220
+ },
221
+ };
222
+
223
+ addComponents(cssObj);
224
+ };
225
+ };