@fattureincloud/fic-design-system 0.10.2 → 0.11.0

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,154 @@
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
+ }
@@ -0,0 +1,155 @@
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
+ }
@@ -0,0 +1,155 @@
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
+ }
@@ -0,0 +1,154 @@
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,5 +1,6 @@
1
+ import { SizeProp } from '@fortawesome/fontawesome-svg-core';
1
2
  import { ReactNode } from 'react';
2
- import { ButtonProps } from '../buttons/button/Button';
3
+ import { ButtonProps } from '../buttons';
3
4
  export interface ModalStateInterface {
4
5
  topAttachmentHeight: number;
5
6
  fullScreenHeight: number;
@@ -28,6 +29,8 @@ export interface ModalPropsInterface {
28
29
  contentEl: HTMLDivElement;
29
30
  }) => void;
30
31
  isConfirmModal?: boolean;
32
+ sizeCloseX?: SizeProp;
33
+ zIndex?: number;
31
34
  }
32
35
  export interface StyledModalBoxProps {
33
36
  isFullscreen?: boolean;
@@ -1,4 +1,4 @@
1
1
  /// <reference types="react" />
2
2
  import { SwitchProps } from '.';
3
- declare const Switch: ({ checked, onChange, color }: SwitchProps) => JSX.Element;
3
+ declare const Switch: ({ checked, color, onChange }: SwitchProps) => JSX.Element;
4
4
  export default Switch;
@@ -1,5 +1,4 @@
1
1
  import { colors } from '../../styles/types';
2
- export declare const Label: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {}, never>;
3
2
  export declare const SwitchButton: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
4
3
  export declare const Input: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {
5
4
  color: colors;
@@ -1,7 +1,6 @@
1
- import { InputHTMLAttributes } from 'react';
2
1
  export declare type switchColors = 'blue' | 'green';
3
2
  export interface SwitchProps {
4
3
  checked: boolean;
5
- onChange: InputHTMLAttributes<HTMLInputElement>['onChange'];
4
+ onChange: (e: boolean) => void;
6
5
  color?: switchColors;
7
6
  }