@fattureincloud/fic-design-system 0.11.0 → 0.11.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (107) hide show
  1. package/dist/components/banner/utils.d.ts +8 -0
  2. package/dist/components/chips/chips.d.ts +7 -0
  3. package/dist/components/chips/chips.stories.d.ts +6 -0
  4. package/dist/components/chips/components/styledChipWrapper.d.ts +4 -0
  5. package/dist/components/chips/index.d.ts +2 -0
  6. package/dist/components/chips/types.d.ts +11 -0
  7. package/dist/components/drawer/types.d.ts +14 -0
  8. package/dist/components/form/checkbox/components/Input.d.ts +9 -0
  9. package/dist/components/form/checkbox/components/Label.d.ts +8 -0
  10. package/dist/components/form/datepicker/StyledDatePicker.d.ts +1 -0
  11. package/dist/components/form/datepicker/hooks/useDatePickerValues.d.ts +13 -0
  12. package/dist/components/form/inputText/components/codeInput/CodeInput.d.ts +4 -0
  13. package/dist/components/form/inputText/components/codeInput/styled.d.ts +29 -0
  14. package/dist/components/form/inputText/components/codeInput/useCodeInputHooks.d.ts +11 -0
  15. package/dist/components/form/inputText/components/telephoneInput/TelephoneInput.d.ts +4 -0
  16. package/dist/components/form/inputText/components/telephoneInput/countriesTelephonePrefixes.d.ts +7 -0
  17. package/dist/components/form/inputText/components/telephoneInput/styled.d.ts +2 -0
  18. package/dist/components/form/select/components/Placeholder.d.ts +4 -0
  19. package/dist/components/gridCard/GridCard.d.ts +4 -0
  20. package/dist/components/gridCard/gridCard.stories.d.ts +8 -0
  21. package/dist/components/gridCard/index.d.ts +2 -0
  22. package/dist/components/gridCard/stories/data.d.ts +3 -0
  23. package/dist/components/gridCard/styled.d.ts +15 -0
  24. package/dist/components/gridCard/types.d.ts +16 -0
  25. package/dist/components/gridCard/utils.d.ts +2 -0
  26. package/dist/components/groupRadioButton/index.d.ts +23 -0
  27. package/dist/components/groupRadioButton/radio-group.stories.d.ts +6 -0
  28. package/dist/components/inlineMessages/components/styledInlineMessageWrapper.d.ts +8 -0
  29. package/dist/components/inlineMessages/index.d.ts +2 -0
  30. package/dist/components/inlineMessages/inlineMessages.d.ts +4 -0
  31. package/dist/components/inlineMessages/inlineMessages.stories.d.ts +7 -0
  32. package/dist/components/inlineMessages/types.d.ts +29 -0
  33. package/dist/components/newTable/components/header/styled.d.ts +1 -0
  34. package/dist/components/pagination/paginationStyledWrapper.d.ts +1 -0
  35. package/dist/components/progressbar/components/styledProgressbarWrapper.d.ts +2 -0
  36. package/dist/components/radioButton/components/label.d.ts +2 -0
  37. package/dist/components/radioButton/components/radio.d.ts +2 -0
  38. package/dist/components/radioButton/index.d.ts +2 -0
  39. package/dist/components/radioButton/radio.stories.d.ts +6 -0
  40. package/dist/components/radioButton/typings/radioButton.d.ts +21 -0
  41. package/dist/components/table/Table.d.ts +57 -0
  42. package/dist/components/table/components/ActionsCell.d.ts +10 -0
  43. package/dist/components/table/components/EmptyState.d.ts +7 -0
  44. package/dist/components/table/components/Pagination.d.ts +8 -0
  45. package/dist/components/table/components/SelectedRowsCount.d.ts +7 -0
  46. package/dist/components/table/components/SortIndicator.d.ts +6 -0
  47. package/dist/components/table/components/TableBody.d.ts +14 -0
  48. package/dist/components/table/components/TableFoot.d.ts +2 -0
  49. package/dist/components/table/components/TableHeader.d.ts +7 -0
  50. package/dist/components/table/components/actions/ActionsCell.d.ts +10 -0
  51. package/dist/components/table/components/actions/DropdownActions.d.ts +10 -0
  52. package/dist/components/table/components/actions/PrimaryAction.d.ts +12 -0
  53. package/dist/components/table/components/checkboxes/Cell.d.ts +5 -0
  54. package/dist/components/table/components/checkboxes/Header.d.ts +5 -0
  55. package/dist/components/table/components/checkboxes/useHeaderCheckboxProps.d.ts +12 -0
  56. package/dist/components/table/components/loadingCell/LoadingCell.d.ts +8 -0
  57. package/dist/components/table/components/pagination/PageButton.d.ts +10 -0
  58. package/dist/components/table/components/pagination/PaginationButtons.d.ts +10 -0
  59. package/dist/components/table/components/pagination/utils.d.ts +14 -0
  60. package/dist/components/table/components/tableBody/TableBody.d.ts +17 -0
  61. package/dist/components/table/components/tableBody/TableBodyLoader.d.ts +7 -0
  62. package/dist/components/table/components/tableBody/TableBodyTr.d.ts +8 -0
  63. package/dist/components/table/components/tableBody/styled.d.ts +3 -0
  64. package/dist/components/table/components/tableHeader/SortIndicator.d.ts +7 -0
  65. package/dist/components/table/components/tableHeader/TableHeader.d.ts +12 -0
  66. package/dist/components/table/components/tableParts/TableTd.d.ts +8 -0
  67. package/dist/components/table/components/tableParts/TableTh.d.ts +4 -0
  68. package/dist/components/table/components/tableParts/styled.d.ts +17 -0
  69. package/dist/components/table/constants.d.ts +2 -0
  70. package/dist/components/table/hooks/useCheckboxesComponents.d.ts +4 -0
  71. package/dist/components/table/hooks/useRowsSelection.d.ts +4 -0
  72. package/dist/components/table/hooks/useTableHooks.d.ts +6 -0
  73. package/dist/components/table/hooks/useTableValues.d.ts +14 -0
  74. package/dist/components/table/index.d.ts +7 -0
  75. package/dist/components/table/stories/columns.d.ts +3 -0
  76. package/dist/components/table/stories/components/CustomPerson.d.ts +7 -0
  77. package/dist/components/table/stories/components/Role.d.ts +8 -0
  78. package/dist/components/table/stories/components/types.d.ts +14 -0
  79. package/dist/components/table/stories/data.d.ts +2 -0
  80. package/dist/components/table/table.stories.d.ts +6 -0
  81. package/dist/components/table/tablePalette.d.ts +33 -0
  82. package/dist/components/table/types.d.ts +28 -0
  83. package/dist/components/table/utils.d.ts +16 -0
  84. package/dist/components/tip/components/styledTip.d.ts +4 -0
  85. package/dist/components/toast/ToastContainer.d.ts +9 -0
  86. package/dist/components/toast/typings/toast.d.ts +34 -0
  87. package/dist/index.css +104 -130
  88. package/dist/index.esm.css +128 -0
  89. package/dist/index.esm.js +7 -7
  90. package/dist/index.esm.js.map +1 -1
  91. package/dist/index.js +7 -7
  92. package/dist/index.js.map +1 -1
  93. package/dist/styles/defaultPalette/colors/azure.d.ts +2 -0
  94. package/dist/styles/defaultPalette/colors/purple.d.ts +2 -0
  95. package/package.json +1 -1
  96. package/dist/assets/index-7ee742e8.css +0 -154
  97. package/dist/assets/index-9fc4893a.css +0 -155
  98. package/dist/assets/index.esm-bff8cd71.css +0 -155
  99. package/dist/assets/index.esm-c9d742c9.css +0 -154
  100. /package/dist/components/floatingBadge/{FloatingBadge.d.ts → floatingBadge.d.ts} +0 -0
  101. /package/dist/components/floatingBadge/{WithBadge.d.ts → withBadge.d.ts} +0 -0
  102. /package/dist/components/progressbar/{ProgressBar.d.ts → progressbar.d.ts} +0 -0
  103. /package/dist/components/progressbar/{progressBar.stories.d.ts → progressbar.stories.d.ts} +0 -0
  104. /package/dist/components/tip/{ShortcutTip.d.ts → shortcutTip.d.ts} +0 -0
  105. /package/dist/components/tip/{Tip.d.ts → tip.d.ts} +0 -0
  106. /package/dist/components/toast/components/{ToastContent.d.ts → toastContent.d.ts} +0 -0
  107. /package/dist/components/toast/{Toast.d.ts → toast.d.ts} +0 -0
@@ -0,0 +1,2 @@
1
+ import { color } from '../../types';
2
+ export declare const azure: color;
@@ -0,0 +1,2 @@
1
+ import { color } from '../../types';
2
+ export declare const purple: color;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fattureincloud/fic-design-system",
3
- "version": "0.11.0",
3
+ "version": "0.11.1",
4
4
  "description": "Fatture in Cloud and Danea design system",
5
5
  "repository": "git@bitbucket.org:fattureincloud/design-system.git",
6
6
  "license": "MIT",
@@ -1,154 +0,0 @@
1
- :root {
2
- --columns-breakpoint-width: 100px; /* default value */
3
- --table-breakpoint: px100; /* relates to TableBreakpoints enum */
4
- }
5
-
6
- .Table-container {
7
- container-type: inline-size;
8
- container-name: var(--table-breakpoint);
9
- }
10
-
11
- /* width breakpoints corresponds to TableBreakpoints enum */
12
- @container px100 (width < 100px) {
13
- .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
14
- min-width: var(--columns-breakpoint-width);
15
- max-width: var(--columns-breakpoint-width);
16
- }
17
-
18
- .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
19
- min-width: var(--columns-breakpoint-width);
20
- max-width: var(--columns-breakpoint-width);
21
- }
22
- }
23
-
24
- @container px200 (width < 200px) {
25
- .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
26
- min-width: var(--columns-breakpoint-width);
27
- max-width: var(--columns-breakpoint-width);
28
- }
29
-
30
- .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
31
- min-width: var(--columns-breakpoint-width);
32
- max-width: var(--columns-breakpoint-width);
33
- }
34
- }
35
-
36
- @container px300 (width < 300px) {
37
- .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
38
- min-width: var(--columns-breakpoint-width);
39
- max-width: var(--columns-breakpoint-width);
40
- }
41
-
42
- .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
43
- min-width: var(--columns-breakpoint-width);
44
- max-width: var(--columns-breakpoint-width);
45
- }
46
- }
47
-
48
- @container px400 (width < 400px) {
49
- .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
50
- min-width: var(--columns-breakpoint-width);
51
- max-width: var(--columns-breakpoint-width);
52
- }
53
-
54
- .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
55
- min-width: var(--columns-breakpoint-width);
56
- max-width: var(--columns-breakpoint-width);
57
- }
58
- }
59
-
60
- @container px500 (width < 500px) {
61
- .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
62
- min-width: var(--columns-breakpoint-width);
63
- max-width: var(--columns-breakpoint-width);
64
- }
65
-
66
- .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
67
- min-width: var(--columns-breakpoint-width);
68
- max-width: var(--columns-breakpoint-width);
69
- }
70
- }
71
-
72
- @container px600 (width < 600px) {
73
- .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
74
- min-width: var(--columns-breakpoint-width);
75
- max-width: var(--columns-breakpoint-width);
76
- }
77
-
78
- .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
79
- min-width: var(--columns-breakpoint-width);
80
- max-width: var(--columns-breakpoint-width);
81
- }
82
- }
83
-
84
- @container px700 (width < 700px) {
85
- .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
86
- min-width: var(--columns-breakpoint-width);
87
- max-width: var(--columns-breakpoint-width);
88
- }
89
-
90
- .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
91
- min-width: var(--columns-breakpoint-width);
92
- max-width: var(--columns-breakpoint-width);
93
- }
94
- }
95
-
96
- @container px800 (width < 800px) {
97
- .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
98
- min-width: var(--columns-breakpoint-width);
99
- max-width: var(--columns-breakpoint-width);
100
- }
101
-
102
- .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
103
- min-width: var(--columns-breakpoint-width);
104
- max-width: var(--columns-breakpoint-width);
105
- }
106
- }
107
-
108
- @container px900 (width < 900px) {
109
- .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
110
- min-width: var(--columns-breakpoint-width);
111
- max-width: var(--columns-breakpoint-width);
112
- }
113
-
114
- .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
115
- min-width: var(--columns-breakpoint-width);
116
- max-width: var(--columns-breakpoint-width);
117
- }
118
- }
119
-
120
- @container px1000 (width < 1000px) {
121
- .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
122
- min-width: var(--columns-breakpoint-width);
123
- max-width: var(--columns-breakpoint-width);
124
- }
125
-
126
- .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
127
- min-width: var(--columns-breakpoint-width);
128
- max-width: var(--columns-breakpoint-width);
129
- }
130
- }
131
-
132
- @container px1100 (width < 1100px) {
133
- .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
134
- min-width: var(--columns-breakpoint-width);
135
- max-width: var(--columns-breakpoint-width);
136
- }
137
-
138
- .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
139
- min-width: var(--columns-breakpoint-width);
140
- max-width: var(--columns-breakpoint-width);
141
- }
142
- }
143
-
144
- @container px1200 (width < 1200px) {
145
- .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
146
- min-width: var(--columns-breakpoint-width);
147
- max-width: var(--columns-breakpoint-width);
148
- }
149
-
150
- .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
151
- min-width: var(--columns-breakpoint-width);
152
- max-width: var(--columns-breakpoint-width);
153
- }
154
- }
@@ -1,155 +0,0 @@
1
- :root {
2
- --columns-breakpoint-width: 100px; /* default value */
3
- --table-breakpoint: px100; /* relates to TableBreakpoints enum */
4
- }
5
-
6
- .Table-container {
7
- container-type: inline-size;
8
- container-name: var(--table-breakpoint);
9
- background: red;
10
- }
11
-
12
- /* width breakpoints corresponds to TableBreakpoints enum */
13
- @container px100 (width < 100px) {
14
- .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
15
- min-width: var(--columns-breakpoint-width);
16
- max-width: var(--columns-breakpoint-width);
17
- }
18
-
19
- .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
20
- min-width: var(--columns-breakpoint-width);
21
- max-width: var(--columns-breakpoint-width);
22
- }
23
- }
24
-
25
- @container px200 (width < 200px) {
26
- .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
27
- min-width: var(--columns-breakpoint-width);
28
- max-width: var(--columns-breakpoint-width);
29
- }
30
-
31
- .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
32
- min-width: var(--columns-breakpoint-width);
33
- max-width: var(--columns-breakpoint-width);
34
- }
35
- }
36
-
37
- @container px300 (width < 300px) {
38
- .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
39
- min-width: var(--columns-breakpoint-width);
40
- max-width: var(--columns-breakpoint-width);
41
- }
42
-
43
- .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
44
- min-width: var(--columns-breakpoint-width);
45
- max-width: var(--columns-breakpoint-width);
46
- }
47
- }
48
-
49
- @container px400 (width < 400px) {
50
- .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
51
- min-width: var(--columns-breakpoint-width);
52
- max-width: var(--columns-breakpoint-width);
53
- }
54
-
55
- .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
56
- min-width: var(--columns-breakpoint-width);
57
- max-width: var(--columns-breakpoint-width);
58
- }
59
- }
60
-
61
- @container px500 (width < 500px) {
62
- .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
63
- min-width: var(--columns-breakpoint-width);
64
- max-width: var(--columns-breakpoint-width);
65
- }
66
-
67
- .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
68
- min-width: var(--columns-breakpoint-width);
69
- max-width: var(--columns-breakpoint-width);
70
- }
71
- }
72
-
73
- @container px600 (width < 600px) {
74
- .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
75
- min-width: var(--columns-breakpoint-width);
76
- max-width: var(--columns-breakpoint-width);
77
- }
78
-
79
- .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
80
- min-width: var(--columns-breakpoint-width);
81
- max-width: var(--columns-breakpoint-width);
82
- }
83
- }
84
-
85
- @container px700 (width < 700px) {
86
- .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
87
- min-width: var(--columns-breakpoint-width);
88
- max-width: var(--columns-breakpoint-width);
89
- }
90
-
91
- .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
92
- min-width: var(--columns-breakpoint-width);
93
- max-width: var(--columns-breakpoint-width);
94
- }
95
- }
96
-
97
- @container px800 (width < 800px) {
98
- .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
99
- min-width: var(--columns-breakpoint-width);
100
- max-width: var(--columns-breakpoint-width);
101
- }
102
-
103
- .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
104
- min-width: var(--columns-breakpoint-width);
105
- max-width: var(--columns-breakpoint-width);
106
- }
107
- }
108
-
109
- @container px900 (width < 900px) {
110
- .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
111
- min-width: var(--columns-breakpoint-width);
112
- max-width: var(--columns-breakpoint-width);
113
- }
114
-
115
- .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
116
- min-width: var(--columns-breakpoint-width);
117
- max-width: var(--columns-breakpoint-width);
118
- }
119
- }
120
-
121
- @container px1000 (width < 1000px) {
122
- .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
123
- min-width: var(--columns-breakpoint-width);
124
- max-width: var(--columns-breakpoint-width);
125
- }
126
-
127
- .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
128
- min-width: var(--columns-breakpoint-width);
129
- max-width: var(--columns-breakpoint-width);
130
- }
131
- }
132
-
133
- @container px1100 (width < 1100px) {
134
- .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
135
- min-width: var(--columns-breakpoint-width);
136
- max-width: var(--columns-breakpoint-width);
137
- }
138
-
139
- .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
140
- min-width: var(--columns-breakpoint-width);
141
- max-width: var(--columns-breakpoint-width);
142
- }
143
- }
144
-
145
- @container px1200 (width < 1200px) {
146
- .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
147
- min-width: var(--columns-breakpoint-width);
148
- max-width: var(--columns-breakpoint-width);
149
- }
150
-
151
- .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
152
- min-width: var(--columns-breakpoint-width);
153
- max-width: var(--columns-breakpoint-width);
154
- }
155
- }
@@ -1,155 +0,0 @@
1
- :root {
2
- --columns-breakpoint-width: 100px; /* default value */
3
- --table-breakpoint: px100; /* relates to TableBreakpoints enum */
4
- }
5
-
6
- .Table-container {
7
- container-type: inline-size;
8
- container-name: var(--table-breakpoint);
9
- background: red;
10
- }
11
-
12
- /* width breakpoints corresponds to TableBreakpoints enum */
13
- @container px100 (width < 100px) {
14
- .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
15
- min-width: var(--columns-breakpoint-width);
16
- max-width: var(--columns-breakpoint-width);
17
- }
18
-
19
- .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
20
- min-width: var(--columns-breakpoint-width);
21
- max-width: var(--columns-breakpoint-width);
22
- }
23
- }
24
-
25
- @container px200 (width < 200px) {
26
- .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
27
- min-width: var(--columns-breakpoint-width);
28
- max-width: var(--columns-breakpoint-width);
29
- }
30
-
31
- .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
32
- min-width: var(--columns-breakpoint-width);
33
- max-width: var(--columns-breakpoint-width);
34
- }
35
- }
36
-
37
- @container px300 (width < 300px) {
38
- .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
39
- min-width: var(--columns-breakpoint-width);
40
- max-width: var(--columns-breakpoint-width);
41
- }
42
-
43
- .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
44
- min-width: var(--columns-breakpoint-width);
45
- max-width: var(--columns-breakpoint-width);
46
- }
47
- }
48
-
49
- @container px400 (width < 400px) {
50
- .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
51
- min-width: var(--columns-breakpoint-width);
52
- max-width: var(--columns-breakpoint-width);
53
- }
54
-
55
- .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
56
- min-width: var(--columns-breakpoint-width);
57
- max-width: var(--columns-breakpoint-width);
58
- }
59
- }
60
-
61
- @container px500 (width < 500px) {
62
- .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
63
- min-width: var(--columns-breakpoint-width);
64
- max-width: var(--columns-breakpoint-width);
65
- }
66
-
67
- .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
68
- min-width: var(--columns-breakpoint-width);
69
- max-width: var(--columns-breakpoint-width);
70
- }
71
- }
72
-
73
- @container px600 (width < 600px) {
74
- .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
75
- min-width: var(--columns-breakpoint-width);
76
- max-width: var(--columns-breakpoint-width);
77
- }
78
-
79
- .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
80
- min-width: var(--columns-breakpoint-width);
81
- max-width: var(--columns-breakpoint-width);
82
- }
83
- }
84
-
85
- @container px700 (width < 700px) {
86
- .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
87
- min-width: var(--columns-breakpoint-width);
88
- max-width: var(--columns-breakpoint-width);
89
- }
90
-
91
- .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
92
- min-width: var(--columns-breakpoint-width);
93
- max-width: var(--columns-breakpoint-width);
94
- }
95
- }
96
-
97
- @container px800 (width < 800px) {
98
- .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
99
- min-width: var(--columns-breakpoint-width);
100
- max-width: var(--columns-breakpoint-width);
101
- }
102
-
103
- .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
104
- min-width: var(--columns-breakpoint-width);
105
- max-width: var(--columns-breakpoint-width);
106
- }
107
- }
108
-
109
- @container px900 (width < 900px) {
110
- .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
111
- min-width: var(--columns-breakpoint-width);
112
- max-width: var(--columns-breakpoint-width);
113
- }
114
-
115
- .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
116
- min-width: var(--columns-breakpoint-width);
117
- max-width: var(--columns-breakpoint-width);
118
- }
119
- }
120
-
121
- @container px1000 (width < 1000px) {
122
- .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
123
- min-width: var(--columns-breakpoint-width);
124
- max-width: var(--columns-breakpoint-width);
125
- }
126
-
127
- .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
128
- min-width: var(--columns-breakpoint-width);
129
- max-width: var(--columns-breakpoint-width);
130
- }
131
- }
132
-
133
- @container px1100 (width < 1100px) {
134
- .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
135
- min-width: var(--columns-breakpoint-width);
136
- max-width: var(--columns-breakpoint-width);
137
- }
138
-
139
- .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
140
- min-width: var(--columns-breakpoint-width);
141
- max-width: var(--columns-breakpoint-width);
142
- }
143
- }
144
-
145
- @container px1200 (width < 1200px) {
146
- .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
147
- min-width: var(--columns-breakpoint-width);
148
- max-width: var(--columns-breakpoint-width);
149
- }
150
-
151
- .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
152
- min-width: var(--columns-breakpoint-width);
153
- max-width: var(--columns-breakpoint-width);
154
- }
155
- }
@@ -1,154 +0,0 @@
1
- :root {
2
- --columns-breakpoint-width: 100px; /* default value */
3
- --table-breakpoint: px100; /* relates to TableBreakpoints enum */
4
- }
5
-
6
- .Table-container {
7
- container-type: inline-size;
8
- container-name: var(--table-breakpoint);
9
- }
10
-
11
- /* width breakpoints corresponds to TableBreakpoints enum */
12
- @container px100 (width < 100px) {
13
- .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
14
- min-width: var(--columns-breakpoint-width);
15
- max-width: var(--columns-breakpoint-width);
16
- }
17
-
18
- .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
19
- min-width: var(--columns-breakpoint-width);
20
- max-width: var(--columns-breakpoint-width);
21
- }
22
- }
23
-
24
- @container px200 (width < 200px) {
25
- .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
26
- min-width: var(--columns-breakpoint-width);
27
- max-width: var(--columns-breakpoint-width);
28
- }
29
-
30
- .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
31
- min-width: var(--columns-breakpoint-width);
32
- max-width: var(--columns-breakpoint-width);
33
- }
34
- }
35
-
36
- @container px300 (width < 300px) {
37
- .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
38
- min-width: var(--columns-breakpoint-width);
39
- max-width: var(--columns-breakpoint-width);
40
- }
41
-
42
- .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
43
- min-width: var(--columns-breakpoint-width);
44
- max-width: var(--columns-breakpoint-width);
45
- }
46
- }
47
-
48
- @container px400 (width < 400px) {
49
- .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
50
- min-width: var(--columns-breakpoint-width);
51
- max-width: var(--columns-breakpoint-width);
52
- }
53
-
54
- .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
55
- min-width: var(--columns-breakpoint-width);
56
- max-width: var(--columns-breakpoint-width);
57
- }
58
- }
59
-
60
- @container px500 (width < 500px) {
61
- .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
62
- min-width: var(--columns-breakpoint-width);
63
- max-width: var(--columns-breakpoint-width);
64
- }
65
-
66
- .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
67
- min-width: var(--columns-breakpoint-width);
68
- max-width: var(--columns-breakpoint-width);
69
- }
70
- }
71
-
72
- @container px600 (width < 600px) {
73
- .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
74
- min-width: var(--columns-breakpoint-width);
75
- max-width: var(--columns-breakpoint-width);
76
- }
77
-
78
- .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
79
- min-width: var(--columns-breakpoint-width);
80
- max-width: var(--columns-breakpoint-width);
81
- }
82
- }
83
-
84
- @container px700 (width < 700px) {
85
- .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
86
- min-width: var(--columns-breakpoint-width);
87
- max-width: var(--columns-breakpoint-width);
88
- }
89
-
90
- .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
91
- min-width: var(--columns-breakpoint-width);
92
- max-width: var(--columns-breakpoint-width);
93
- }
94
- }
95
-
96
- @container px800 (width < 800px) {
97
- .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
98
- min-width: var(--columns-breakpoint-width);
99
- max-width: var(--columns-breakpoint-width);
100
- }
101
-
102
- .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
103
- min-width: var(--columns-breakpoint-width);
104
- max-width: var(--columns-breakpoint-width);
105
- }
106
- }
107
-
108
- @container px900 (width < 900px) {
109
- .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
110
- min-width: var(--columns-breakpoint-width);
111
- max-width: var(--columns-breakpoint-width);
112
- }
113
-
114
- .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
115
- min-width: var(--columns-breakpoint-width);
116
- max-width: var(--columns-breakpoint-width);
117
- }
118
- }
119
-
120
- @container px1000 (width < 1000px) {
121
- .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
122
- min-width: var(--columns-breakpoint-width);
123
- max-width: var(--columns-breakpoint-width);
124
- }
125
-
126
- .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
127
- min-width: var(--columns-breakpoint-width);
128
- max-width: var(--columns-breakpoint-width);
129
- }
130
- }
131
-
132
- @container px1100 (width < 1100px) {
133
- .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
134
- min-width: var(--columns-breakpoint-width);
135
- max-width: var(--columns-breakpoint-width);
136
- }
137
-
138
- .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
139
- min-width: var(--columns-breakpoint-width);
140
- max-width: var(--columns-breakpoint-width);
141
- }
142
- }
143
-
144
- @container px1200 (width < 1200px) {
145
- .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
146
- min-width: var(--columns-breakpoint-width);
147
- max-width: var(--columns-breakpoint-width);
148
- }
149
-
150
- .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
151
- min-width: var(--columns-breakpoint-width);
152
- max-width: var(--columns-breakpoint-width);
153
- }
154
- }
File without changes