@wise/dynamic-flow-client-internal 5.19.3 → 5.20.0-exp-box-cq-da65c19
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.
- package/build/main.css +93 -7
- package/package.json +1 -1
package/build/main.css
CHANGED
|
@@ -52,6 +52,92 @@
|
|
|
52
52
|
width: 66.66%;
|
|
53
53
|
}
|
|
54
54
|
}
|
|
55
|
+
@media screen and (width >=768px) {
|
|
56
|
+
/* container queries (when .df-prefer-container-queries is set on a parent) */
|
|
57
|
+
/* In container-query mode, ignore viewport-based width overrides by resetting to narrow defaults. */
|
|
58
|
+
.df-prefer-container-queries .df-box-renderer-border {
|
|
59
|
+
padding: var(--size-16);
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.df-prefer-container-queries .df-box-renderer-width-xs,
|
|
63
|
+
.df-prefer-container-queries .df-box-renderer-width-sm,
|
|
64
|
+
.df-prefer-container-queries .df-box-renderer-width-md,
|
|
65
|
+
.df-prefer-container-queries .df-box-renderer-width-lg {
|
|
66
|
+
width: 100%;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
@container (min-width: 480px) {
|
|
70
|
+
.df-prefer-container-queries .df-box-renderer-border {
|
|
71
|
+
padding: var(--size-24);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.df-prefer-container-queries .df-box-renderer-width-xs {
|
|
75
|
+
width: 33.33%;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.df-prefer-container-queries .df-box-renderer-width-sm {
|
|
79
|
+
width: 50%;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.df-prefer-container-queries .df-box-renderer-width-md {
|
|
83
|
+
width: 66.66%;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.df-prefer-container-queries .df-box-renderer-width-lg {
|
|
87
|
+
width: 83.33%;
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
@container (min-width: 576px) {
|
|
92
|
+
.df-prefer-container-queries .df-box-renderer-width-xs {
|
|
93
|
+
width: 25%;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.df-prefer-container-queries .df-box-renderer-width-sm {
|
|
97
|
+
width: 33.33%;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.df-prefer-container-queries .df-box-renderer-width-md {
|
|
101
|
+
width: 50%;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.df-prefer-container-queries .df-box-renderer-width-lg {
|
|
105
|
+
width: 66.66%;
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
@media screen and (width >=990px) {
|
|
110
|
+
/* container queries (when .df-prefer-container-queries is set on a parent) */
|
|
111
|
+
/* In container-query mode, ignore viewport-based width overrides by resetting to narrow defaults. */
|
|
112
|
+
.df-prefer-container-queries .df-box-renderer-border {
|
|
113
|
+
padding: var(--size-16);
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.df-prefer-container-queries .df-box-renderer-width-xs,
|
|
117
|
+
.df-prefer-container-queries .df-box-renderer-width-sm,
|
|
118
|
+
.df-prefer-container-queries .df-box-renderer-width-md,
|
|
119
|
+
.df-prefer-container-queries .df-box-renderer-width-lg {
|
|
120
|
+
width: 100%;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
@container (min-width: 480px) {
|
|
124
|
+
.df-prefer-container-queries .df-box-renderer-width-xs {
|
|
125
|
+
width: 25%;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.df-prefer-container-queries .df-box-renderer-width-sm {
|
|
129
|
+
width: 33.33%;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.df-prefer-container-queries .df-box-renderer-width-md {
|
|
133
|
+
width: 50%;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.df-prefer-container-queries .df-box-renderer-width-lg {
|
|
137
|
+
width: 66.66%;
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
}
|
|
55
141
|
.df-columns-renderer-container {
|
|
56
142
|
display: flex;
|
|
57
143
|
gap: var(--size-4);
|
|
@@ -137,13 +223,6 @@
|
|
|
137
223
|
width: 300px;
|
|
138
224
|
}
|
|
139
225
|
}
|
|
140
|
-
/**
|
|
141
|
-
* This speficies the container for container queries about width.
|
|
142
|
-
* We don't use it by default, but integrations can specify it using the className prop in the DF component.
|
|
143
|
-
*/
|
|
144
|
-
.df-prefer-container-queries {
|
|
145
|
-
container-type: inline-size;
|
|
146
|
-
}
|
|
147
226
|
/* narrow container */
|
|
148
227
|
@container (max-width: 576px) {
|
|
149
228
|
.df-image.xs img.df-reserve-space {
|
|
@@ -230,6 +309,13 @@
|
|
|
230
309
|
margin-left: auto;
|
|
231
310
|
margin-right: auto;
|
|
232
311
|
}
|
|
312
|
+
/**
|
|
313
|
+
* This specifies the container for container queries about width.
|
|
314
|
+
* We don't use it by default, but integrations can specify it using the className prop in the DF component.
|
|
315
|
+
*/
|
|
316
|
+
.df-prefer-container-queries {
|
|
317
|
+
container-type: inline-size;
|
|
318
|
+
}
|
|
233
319
|
.df-context-menu {
|
|
234
320
|
position: fixed;
|
|
235
321
|
z-index: 10;
|