@i-cell/ids-styles 0.0.1 → 0.0.2

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