@i-cell/ids-styles 0.0.25 → 0.0.27

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/dist/button/button-group.css +22 -0
  2. package/dist/button/button-group.min.css +1 -0
  3. package/dist/button/button-group.plugin.js +26 -0
  4. package/dist/button/button.css +74 -74
  5. package/dist/button/button.min.css +1 -1
  6. package/dist/button/button.plugin.js +74 -74
  7. package/dist/components.css +267 -507
  8. package/dist/components.min.css +1 -1
  9. package/dist/components.plugin.js +306 -560
  10. package/dist/form-elements/message/message.css +12 -12
  11. package/dist/form-elements/message/message.min.css +1 -1
  12. package/dist/form-elements/message/message.plugin.js +12 -12
  13. package/dist/radio/radio.css +154 -154
  14. package/dist/radio/radio.min.css +1 -1
  15. package/dist/radio/radio.plugin.js +199 -222
  16. package/dist/segmented-control/segmented-control-toggle.css +117 -228
  17. package/dist/segmented-control/segmented-control-toggle.min.css +1 -1
  18. package/dist/segmented-control/segmented-control-toggle.plugin.js +206 -334
  19. package/dist/segmented-control/segmented-control.css +4 -267
  20. package/dist/segmented-control/segmented-control.min.css +1 -1
  21. package/dist/segmented-control/segmented-control.plugin.js +4 -252
  22. package/dist/segmented-control-toggle/segmented-control-toggle.css +563 -0
  23. package/dist/segmented-control-toggle/segmented-control-toggle.min.css +1 -0
  24. package/dist/segmented-control-toggle/segmented-control-toggle.plugin.js +558 -0
  25. package/package.json +2 -2
package/dist/button/button-group.css ADDED
@@ -0,0 +1,22 @@
1
+ .ids-button-group {
2
+ display: inline-flex;
3
+ align-items: flex-start;
4
+ align-content: flex-start;
5
+ flex-wrap: wrap;
6
+ }
7
+ .ids-button-group.ids-button-group-compact {
8
+ padding: var(--ids-comp-button-group-size-padding-y-compact) var(--ids-comp-button-group-size-padding-x-compact);
9
+ gap: var(--ids-comp-button-group-size-column-gap-compact) var(--ids-comp-button-group-size-row-gap-compact);
10
+ }
11
+ .ids-button-group.ids-button-group-comfortable {
12
+ padding: var(--ids-comp-button-group-size-padding-y-comfortable) var(--ids-comp-button-group-size-padding-x-comfortable);
13
+ gap: var(--ids-comp-button-group-size-column-gap-comfortable) var(--ids-comp-button-group-size-row-gap-comfortable);
14
+ }
15
+ .ids-button-group.ids-button-group-spacious {
16
+ padding: var(--ids-comp-button-group-size-padding-y-spacious) var(--ids-comp-button-group-size-padding-x-spacious);
17
+ gap: var(--ids-comp-button-group-size-column-gap-spacious) var(--ids-comp-button-group-size-row-gap-spacious);
18
+ }
19
+ .ids-button-group.ids-button-group-dense {
20
+ padding: var(--ids-comp-button-group-size-padding-y-dense) var(--ids-comp-button-group-size-padding-x-dense);
21
+ gap: var(--ids-comp-button-group-size-column-gap-dense) var(--ids-comp-button-group-size-row-gap-dense);
22
+ }
package/dist/button/button-group.min.css ADDED
@@ -0,0 +1 @@
1
+ .ids-button-group{display:inline-flex;align-items:flex-start;align-content:flex-start;flex-wrap:wrap}.ids-button-group.ids-button-group-compact{padding:var(--ids-comp-button-group-size-padding-y-compact) var(--ids-comp-button-group-size-padding-x-compact);gap:var(--ids-comp-button-group-size-column-gap-compact) var(--ids-comp-button-group-size-row-gap-compact)}.ids-button-group.ids-button-group-comfortable{padding:var(--ids-comp-button-group-size-padding-y-comfortable) var(--ids-comp-button-group-size-padding-x-comfortable);gap:var(--ids-comp-button-group-size-column-gap-comfortable) var(--ids-comp-button-group-size-row-gap-comfortable)}.ids-button-group.ids-button-group-spacious{padding:var(--ids-comp-button-group-size-padding-y-spacious) var(--ids-comp-button-group-size-padding-x-spacious);gap:var(--ids-comp-button-group-size-column-gap-spacious) var(--ids-comp-button-group-size-row-gap-spacious)}.ids-button-group.ids-button-group-dense{padding:var(--ids-comp-button-group-size-padding-y-dense) var(--ids-comp-button-group-size-padding-x-dense);gap:var(--ids-comp-button-group-size-column-gap-dense) var(--ids-comp-button-group-size-row-gap-dense)}
package/dist/button/button-group.plugin.js ADDED
@@ -0,0 +1,26 @@
1
+ // Tailwind CSS plugin for the button-group component in the i-Cell Design System
2
+ module.exports = function ButtonGroupPlugin() {
3
+ return function ({ addComponents }) {
4
+ const cssObj = {
5
+ '.ids-button-group': { display: 'inline-flex', alignItems: 'flex-start', alignContent: 'flex-start', flexWrap: 'wrap' },
6
+ '.ids-button-group.ids-button-group-compact': {
7
+ padding: 'var(--ids-comp-button-group-size-padding-y-compact) var(--ids-comp-button-group-size-padding-x-compact)',
8
+ gap: 'var(--ids-comp-button-group-size-column-gap-compact) var(--ids-comp-button-group-size-row-gap-compact)',
9
+ },
10
+ '.ids-button-group.ids-button-group-comfortable': {
11
+ padding: 'var(--ids-comp-button-group-size-padding-y-comfortable) var(--ids-comp-button-group-size-padding-x-comfortable)',
12
+ gap: 'var(--ids-comp-button-group-size-column-gap-comfortable) var(--ids-comp-button-group-size-row-gap-comfortable)',
13
+ },
14
+ '.ids-button-group.ids-button-group-spacious': {
15
+ padding: 'var(--ids-comp-button-group-size-padding-y-spacious) var(--ids-comp-button-group-size-padding-x-spacious)',
16
+ gap: 'var(--ids-comp-button-group-size-column-gap-spacious) var(--ids-comp-button-group-size-row-gap-spacious)',
17
+ },
18
+ '.ids-button-group.ids-button-group-dense': {
19
+ padding: 'var(--ids-comp-button-group-size-padding-y-dense) var(--ids-comp-button-group-size-padding-x-dense)',
20
+ gap: 'var(--ids-comp-button-group-size-column-gap-dense) var(--ids-comp-button-group-size-row-gap-dense)',
21
+ },
22
+ };
23
+
24
+ addComponents(cssObj);
25
+ };
26
+ };