mithril-materialized 3.5.10 → 3.7.0

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.
@@ -145,6 +145,10 @@ body.keyboard-focused {
145
145
  }
146
146
 
147
147
  .select-dropdown.dropdown-content {
148
+ // Set a reasonable default max-height to prevent overly tall dropdowns
149
+ max-height: 400px;
150
+ overflow-y: auto;
151
+
148
152
  li {
149
153
  &:hover {
150
154
  background-color: var(--mm-dropdown-hover, variables.$select-option-hover);
@@ -199,7 +203,7 @@ body.keyboard-focused {
199
203
  .dropdown-content li.active {
200
204
  background-color: #444 !important;
201
205
  }
202
-
206
+
203
207
  .chip {
204
208
  background-color: #424242 !important;
205
209
  color: var(--mm-text-secondary) !important;
@@ -214,7 +218,7 @@ body.keyboard-focused {
214
218
  .dropdown-content li.active {
215
219
  background-color: #444 !important;
216
220
  }
217
-
221
+
218
222
  .chip {
219
223
  background-color: #424242 !important;
220
224
  color: var(--mm-text-secondary) !important;
@@ -242,11 +246,11 @@ body.keyboard-focused {
242
246
  border-bottom: 1px solid var(--mm-input-border, #9e9e9e);
243
247
  background-color: transparent;
244
248
  color: var(--mm-text-primary, inherit);
245
-
249
+
246
250
  &:focus {
247
251
  border-bottom-color: var(--mm-primary-color, #2196F3);
248
252
  }
249
-
253
+
250
254
  &::placeholder {
251
255
  color: var(--mm-text-hint, #9e9e9e);
252
256
  }
@@ -259,7 +263,7 @@ body.keyboard-focused {
259
263
  font-style: italic;
260
264
  text-align: center;
261
265
  border-bottom: none;
262
-
266
+
263
267
  &:hover {
264
268
  background-color: transparent;
265
269
  cursor: default;
@@ -276,7 +280,7 @@ body.keyboard-focused {
276
280
  margin: 0;
277
281
  // Ensure it inherits the same padding as regular dropdown items
278
282
  min-height: var(--mm-dropdown-item-height, 50px);
279
-
283
+
280
284
  input[type="checkbox"] {
281
285
  margin-right: 8px;
282
286
  position: relative;
@@ -287,11 +291,11 @@ body.keyboard-focused {
287
291
  border: 2px solid var(--mm-border-color, #9e9e9e);
288
292
  border-radius: 2px;
289
293
  background-color: transparent;
290
-
294
+
291
295
  &:checked {
292
296
  background-color: var(--mm-primary-color, #2196F3);
293
297
  border-color: var(--mm-primary-color, #2196F3);
294
-
298
+
295
299
  &:after {
296
300
  content: '✓';
297
301
  color: white;
@@ -301,13 +305,13 @@ body.keyboard-focused {
301
305
  left: 2px;
302
306
  }
303
307
  }
304
-
308
+
305
309
  &:focus {
306
310
  outline: 2px solid var(--mm-primary-color, #2196F3);
307
311
  outline-offset: 2px;
308
312
  }
309
313
  }
310
-
314
+
311
315
  span {
312
316
  flex: 1;
313
317
  }
@@ -323,32 +327,32 @@ body.keyboard-focused {
323
327
  position: relative;
324
328
  min-height: var(--mm-input-height, 3rem);
325
329
  padding: 4px 0;
326
-
330
+
327
331
  .chip {
328
332
  margin: 2px 4px 2px 0;
329
333
  // Let existing chip system handle background colors for theme compatibility
330
-
334
+
331
335
  .material-icons.close {
332
336
  cursor: pointer;
333
337
  font-size: 16px;
334
338
  margin-left: 4px;
335
-
339
+
336
340
  &:hover {
337
341
  color: var(--mm-error-color, #f44336);
338
342
  }
339
343
  }
340
344
  }
341
-
345
+
342
346
  .placeholder {
343
347
  color: var(--mm-text-hint, #9e9e9e);
344
348
  flex-grow: 1;
345
349
  padding: 8px 0;
346
350
  }
347
-
351
+
348
352
  .spacer {
349
353
  flex-grow: 1;
350
354
  }
351
-
355
+
352
356
  .caret {
353
357
  margin-left: auto;
354
358
  cursor: pointer;