@i-cell/ids-styles 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (25) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +2 -0
  3. package/dist/accordion/accordion.css +165 -0
  4. package/dist/accordion/accordion.min.css +1 -0
  5. package/dist/action-item/action-item.css +167 -0
  6. package/dist/action-item/action-item.min.css +1 -0
  7. package/dist/action-panel/action-panel.css +90 -0
  8. package/dist/action-panel/action-panel.min.css +1 -0
  9. package/dist/avatar/avatar.css +296 -0
  10. package/dist/avatar/avatar.min.css +1 -0
  11. package/dist/button/button.css +799 -0
  12. package/dist/button/button.min.css +1 -0
  13. package/dist/card/card.css +850 -0
  14. package/dist/card/card.min.css +1 -0
  15. package/dist/components.css +4060 -0
  16. package/dist/components.min.css +1 -0
  17. package/dist/dialog/dialog.css +174 -0
  18. package/dist/dialog/dialog.min.css +1 -0
  19. package/dist/divider/divider.css +73 -0
  20. package/dist/divider/divider.min.css +1 -0
  21. package/dist/icon-button/icon-button.css +676 -0
  22. package/dist/icon-button/icon-button.min.css +1 -0
  23. package/dist/tag/tag.css +761 -0
  24. package/dist/tag/tag.min.css +1 -0
  25. package/package.json +38 -0
package/dist/dialog/dialog.css ADDED
@@ -0,0 +1,174 @@
1
+ .ids-dialog {
2
+ box-sizing: border-box;
3
+ border-style: solid;
4
+ border-color: var(--ids-comp-dialog-container-color-border-surface-default);
5
+ background-color: var(--ids-comp-dialog-container-color-bg-enabled);
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
+ }
8
+ .ids-dialog::backdrop {
9
+ background-color: transparent;
10
+ }
11
+ .ids-dialog.ids-dialog-with-backdrop::backdrop {
12
+ opacity: var(--ids-comp-dialog-backdrop-opacity);
13
+ background-color: var(--ids-comp-dialog-backdrop-background);
14
+ }
15
+ .ids-dialog .ids-dialog-container {
16
+ display: grid;
17
+ grid-template-rows: auto 1fr auto;
18
+ position: relative;
19
+ max-height: 80vh;
20
+ }
21
+ .ids-dialog .ids-dialog-close-button {
22
+ position: absolute;
23
+ top: 12px;
24
+ right: 12px;
25
+ }
26
+ .ids-dialog .ids-dialog-header {
27
+ display: flex;
28
+ align-items: stretch;
29
+ }
30
+ .ids-dialog .ids-dialog-header-default-content {
31
+ display: flex;
32
+ flex-direction: column;
33
+ flex: 1 0 0;
34
+ align-items: flex-start;
35
+ }
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;
48
+ }
49
+ .ids-dialog .ids-dialog-content {
50
+ display: flex;
51
+ align-items: center;
52
+ justify-content: center;
53
+ overflow-y: auto;
54
+ background: var(--ids-comp-dialog-content-color-bg-enabled);
55
+ }
56
+ .ids-dialog .ids-dialog-content .ids-dialog-content-overflow {
57
+ overflow-y: auto;
58
+ height: 100%;
59
+ }
60
+ .ids-dialog .ids-dialog-content.ids-dialog-content-scrollable {
61
+ border-top-style: solid;
62
+ border-bottom-style: solid;
63
+ border-top-color: var(--ids-comp-dialog-content-color-border-surface-default);
64
+ border-bottom-color: var(--ids-comp-dialog-content-color-border-surface-default);
65
+ }
66
+ .ids-dialog .ids-dialog-actions {
67
+ display: flex;
68
+ background: var(--ids-comp-dialog-footer-color-bg-enabled);
69
+ justify-content: flex-end;
70
+ align-items: flex-start;
71
+ align-content: flex-start;
72
+ align-self: stretch;
73
+ flex-wrap: wrap;
74
+ }
75
+ .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);
78
+ }
79
+ .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);
99
+ }
100
+ .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);
103
+ }
104
+ .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);
124
+ }
125
+ .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);
128
+ }
129
+ .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);
149
+ }
150
+ .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);
153
+ }
154
+ .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);
174
+ }
package/dist/dialog/dialog.min.css ADDED
@@ -0,0 +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)}
package/dist/divider/divider.css ADDED
@@ -0,0 +1,73 @@
1
+ .ids-divider {
2
+ flex-shrink: 0;
3
+ display: flex;
4
+ flex-shrink: 0;
5
+ align-items: center;
6
+ justify-content: center;
7
+ align-self: stretch;
8
+ width: var(--ids-divider-width, 100%);
9
+ height: var(--ids-divider-height, 100%);
10
+ }
11
+ .ids-divider.ids-divider-compact {
12
+ border-radius: var(--ids-comp-size-divider-size-border-radius-compact);
13
+ }
14
+ .ids-divider.ids-divider-compact.ids-divider-horizontal {
15
+ height: var(--ids-comp-size-divider-size-height-compact);
16
+ }
17
+ .ids-divider.ids-divider-compact.ids-divider-vertical {
18
+ width: var(--ids-comp-size-divider-size-width-compact);
19
+ }
20
+ .ids-divider.ids-divider-comfortable {
21
+ border-radius: var(--ids-comp-size-divider-size-border-radius-comfortable);
22
+ }
23
+ .ids-divider.ids-divider-comfortable.ids-divider-horizontal {
24
+ height: var(--ids-comp-size-divider-size-height-comfortable);
25
+ }
26
+ .ids-divider.ids-divider-comfortable.ids-divider-vertical {
27
+ width: var(--ids-comp-size-divider-size-width-comfortable);
28
+ }
29
+ .ids-divider.ids-divider-spacious {
30
+ border-radius: var(--ids-comp-size-divider-size-border-radius-spacious);
31
+ }
32
+ .ids-divider.ids-divider-spacious.ids-divider-horizontal {
33
+ height: var(--ids-comp-size-divider-size-height-spacious);
34
+ }
35
+ .ids-divider.ids-divider-spacious.ids-divider-vertical {
36
+ width: var(--ids-comp-size-divider-size-width-spacious);
37
+ }
38
+ .ids-divider.ids-divider-dense {
39
+ border-radius: var(--ids-comp-size-divider-size-border-radius-dense);
40
+ }
41
+ .ids-divider.ids-divider-dense.ids-divider-horizontal {
42
+ height: var(--ids-comp-size-divider-size-height-dense);
43
+ }
44
+ .ids-divider.ids-divider-dense.ids-divider-vertical {
45
+ width: var(--ids-comp-size-divider-size-width-dense);
46
+ }
47
+ .ids-divider.ids-divider-primary {
48
+ background: var(--ids-comp-divider-color-bg-primary-enabled);
49
+ }
50
+ .ids-divider.ids-divider-secondary {
51
+ background: var(--ids-comp-divider-color-bg-secondary-enabled);
52
+ }
53
+ .ids-divider.ids-divider-brand {
54
+ background: var(--ids-comp-divider-color-bg-brand-enabled);
55
+ }
56
+ .ids-divider.ids-divider-error {
57
+ background: var(--ids-comp-divider-color-bg-error-enabled);
58
+ }
59
+ .ids-divider.ids-divider-success {
60
+ background: var(--ids-comp-divider-color-bg-success-enabled);
61
+ }
62
+ .ids-divider.ids-divider-warning {
63
+ background: var(--ids-comp-divider-color-bg-warning-enabled);
64
+ }
65
+ .ids-divider.ids-divider-light {
66
+ background: var(--ids-comp-divider-color-bg-light-enabled);
67
+ }
68
+ .ids-divider.ids-divider-dark {
69
+ background: var(--ids-comp-divider-color-bg-dark-enabled);
70
+ }
71
+ .ids-divider.ids-divider-surface {
72
+ background: var(--ids-comp-divider-color-bg-surface-enabled);
73
+ }
package/dist/divider/divider.min.css ADDED
@@ -0,0 +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)}