@omnigrid/style 0.1.4 → 0.1.6
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/dist/index.css +96 -6
- package/package.json +1 -1
package/dist/index.css
CHANGED
|
@@ -101,34 +101,89 @@
|
|
|
101
101
|
|
|
102
102
|
.omnigrid-slot {
|
|
103
103
|
display: flex;
|
|
104
|
+
box-sizing: border-box;
|
|
104
105
|
}
|
|
105
106
|
|
|
106
107
|
.omnigrid-slot-top,
|
|
107
108
|
.omnigrid-slot-bottom {
|
|
109
|
+
flex-direction: row;
|
|
110
|
+
align-items: center;
|
|
111
|
+
justify-content: space-between;
|
|
108
112
|
width: 100%;
|
|
109
113
|
padding: 4px 8px;
|
|
110
114
|
background: var(--omnigrid-slot-background);
|
|
111
115
|
}
|
|
112
116
|
|
|
117
|
+
.omnigrid-slot-top .omnigrid-slot-pos-start,
|
|
118
|
+
.omnigrid-slot-bottom .omnigrid-slot-pos-start {
|
|
119
|
+
flex: 1 1 0;
|
|
120
|
+
display: flex;
|
|
121
|
+
justify-content: flex-start;
|
|
122
|
+
align-items: center;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.omnigrid-slot-top .omnigrid-slot-pos-center,
|
|
126
|
+
.omnigrid-slot-bottom .omnigrid-slot-pos-center {
|
|
127
|
+
flex: 1 1 0;
|
|
128
|
+
display: flex;
|
|
129
|
+
justify-content: center;
|
|
130
|
+
align-items: center;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.omnigrid-slot-top .omnigrid-slot-pos-end,
|
|
134
|
+
.omnigrid-slot-bottom .omnigrid-slot-pos-end {
|
|
135
|
+
flex: 1 1 0;
|
|
136
|
+
display: flex;
|
|
137
|
+
justify-content: flex-end;
|
|
138
|
+
align-items: center;
|
|
139
|
+
}
|
|
140
|
+
|
|
113
141
|
.omnigrid-slot-left,
|
|
114
142
|
.omnigrid-slot-right {
|
|
143
|
+
flex-direction: column;
|
|
144
|
+
align-items: center;
|
|
145
|
+
justify-content: space-between;
|
|
115
146
|
flex-shrink: 0;
|
|
116
|
-
padding:
|
|
147
|
+
padding: 8px 4px;
|
|
117
148
|
background: var(--omnigrid-slot-background);
|
|
118
149
|
align-self: stretch;
|
|
119
150
|
}
|
|
120
151
|
|
|
121
|
-
.omnigrid-slot-
|
|
152
|
+
.omnigrid-slot-left .omnigrid-slot-pos-start,
|
|
153
|
+
.omnigrid-slot-right .omnigrid-slot-pos-start {
|
|
154
|
+
flex: 1 1 0;
|
|
122
155
|
display: flex;
|
|
123
|
-
|
|
156
|
+
flex-direction: column;
|
|
157
|
+
justify-content: flex-start;
|
|
158
|
+
align-items: center;
|
|
124
159
|
}
|
|
125
160
|
|
|
126
|
-
.omnigrid-slot-pos-center
|
|
161
|
+
.omnigrid-slot-left .omnigrid-slot-pos-center,
|
|
162
|
+
.omnigrid-slot-right .omnigrid-slot-pos-center {
|
|
163
|
+
flex: 1 1 0;
|
|
164
|
+
display: flex;
|
|
165
|
+
flex-direction: column;
|
|
127
166
|
justify-content: center;
|
|
167
|
+
align-items: center;
|
|
128
168
|
}
|
|
129
169
|
|
|
130
|
-
.omnigrid-slot-pos-end
|
|
170
|
+
.omnigrid-slot-left .omnigrid-slot-pos-end,
|
|
171
|
+
.omnigrid-slot-right .omnigrid-slot-pos-end {
|
|
172
|
+
flex: 1 1 0;
|
|
173
|
+
display: flex;
|
|
174
|
+
flex-direction: column;
|
|
131
175
|
justify-content: flex-end;
|
|
176
|
+
align-items: center;
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
.omnigrid-slot-item-group {
|
|
180
|
+
display: flex;
|
|
181
|
+
gap: 8px;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
.omnigrid-slot-left .omnigrid-slot-item-group,
|
|
185
|
+
.omnigrid-slot-right .omnigrid-slot-item-group {
|
|
186
|
+
flex-direction: column;
|
|
132
187
|
}
|
|
133
188
|
|
|
134
189
|
.omnigrid-slot-item {
|
|
@@ -150,6 +205,12 @@
|
|
|
150
205
|
}
|
|
151
206
|
|
|
152
207
|
.omnigrid-popup-control {
|
|
208
|
+
align-items: center;
|
|
209
|
+
display: inline-flex;
|
|
210
|
+
gap: 6px;
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
.omnigrid-popup-anchor {
|
|
153
214
|
position: relative;
|
|
154
215
|
}
|
|
155
216
|
|
|
@@ -163,9 +224,33 @@
|
|
|
163
224
|
}
|
|
164
225
|
|
|
165
226
|
.omnigrid-control-button {
|
|
227
|
+
align-items: center;
|
|
228
|
+
border: 1px solid var(--omnigrid-grid-border, #ccc);
|
|
229
|
+
border-radius: 3px;
|
|
230
|
+
display: inline-flex;
|
|
231
|
+
gap: 8px;
|
|
232
|
+
padding: 3px 8px;
|
|
166
233
|
white-space: nowrap;
|
|
167
234
|
}
|
|
168
235
|
|
|
236
|
+
.omnigrid-control-button::after {
|
|
237
|
+
border-bottom: 1px solid currentColor;
|
|
238
|
+
border-right: 1px solid currentColor;
|
|
239
|
+
content: "";
|
|
240
|
+
height: 5px;
|
|
241
|
+
transform: translateY(-1px) rotate(45deg);
|
|
242
|
+
width: 5px;
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
.omnigrid-control-button:hover {
|
|
246
|
+
background: var(--omnigrid-cell-hover-background, #eee);
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
.omnigrid-control-button:focus-visible {
|
|
250
|
+
outline: 2px solid currentColor;
|
|
251
|
+
outline-offset: 1px;
|
|
252
|
+
}
|
|
253
|
+
|
|
169
254
|
.omnigrid-popup-menu {
|
|
170
255
|
background: var(--omnigrid-grid-background, #fff);
|
|
171
256
|
border: 1px solid var(--omnigrid-grid-border, #ccc);
|
|
@@ -174,12 +259,17 @@
|
|
|
174
259
|
display: flex;
|
|
175
260
|
flex-direction: column;
|
|
176
261
|
left: 0;
|
|
177
|
-
min-width:
|
|
262
|
+
min-width: 50px;
|
|
178
263
|
padding: 4px;
|
|
179
264
|
position: absolute;
|
|
180
265
|
z-index: 10;
|
|
181
266
|
}
|
|
182
267
|
|
|
268
|
+
.omnigrid-popup-menu-below {
|
|
269
|
+
bottom: auto;
|
|
270
|
+
top: calc(100% + 6px);
|
|
271
|
+
}
|
|
272
|
+
|
|
183
273
|
.omnigrid-popup-option {
|
|
184
274
|
padding: 4px 8px;
|
|
185
275
|
text-align: left;
|