mithril-materialized 3.5.8 → 3.5.10

package/sass/components/_materialbox.scss

@@ -16,28 +16,37 @@
   }
 }
 
-#materialbox-overlay {
-  position:fixed;
+.materialbox-overlay {
+  position: fixed;
   top: 0;
+  left: 0;
   right: 0;
   bottom: 0;
-  left: 0;
-  background-color: #292929;
+  background-color: rgba(0, 0, 0, 0.85);
   z-index: 1000;
+  opacity: 0;
+  cursor: zoom-out;
   will-change: opacity;
 }
 
+.materialbox-image {
+  position: fixed;
+  cursor: zoom-out;
+  max-width: none;
+  z-index: 1001;
+  will-change: top, left, width, height;
+}
+
 .materialbox-caption {
   position: fixed;
-  display: none;
-  color: #fff;
-  line-height: 50px;
-  bottom: 0;
-  left: 0;
-  width: 100%;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  color: white;
+  font-size: 16px;
   text-align: center;
-  padding: 0% 15%;
-  height: 50px;
-  z-index: 1000;
+  opacity: 0;
+  z-index: 1002;
+  pointer-events: none;
   -webkit-font-smoothing: antialiased;
-}
+}

package/sass/components/_theme-variables.scss

@@ -57,6 +57,9 @@
   --mm-dropdown-hover: #eee;
   --mm-dropdown-focus: #ddd;
   --mm-dropdown-selected: #e3f2fd;
+  
+  // Collection/Table hover (light theme)
+  --mm-row-hover: rgba(0, 0, 0, 0.04);
   --mm-shadow-umbra: rgba(0, 0, 0, 0.2);
   --mm-shadow-penumbra: rgba(0, 0, 0, 0.14);
   --mm-shadow-ambient: rgba(0, 0, 0, 0.12);
@@ -144,6 +147,10 @@ body {
   --mm-dropdown-focus: #555;
   --mm-dropdown-selected: #1e3a8a;
   
+  // Collection/Table hover (dark theme) - more subtle
+  --mm-row-hover: rgba(255, 255, 255, 0.04);
+  --mm-row-stripe: rgba(255, 255, 255, 0.02);
+  
   // Switch colors (dark theme)
   --mm-switch-checked-track: rgba(128, 203, 196, 0.3);
   --mm-switch-checked-thumb: #80cbc4;

package/sass/components/_timepicker.scss

@@ -100,6 +100,8 @@
   background-color: variables.$secondary-color;
   padding: 10px;
   font-weight: 300;
+  min-width: 200px;
+  position: relative;
 }
 
 .timepicker-text-container {
@@ -110,6 +112,8 @@
   font-weight: 400;
 	position: relative;
   user-select: none;
+  min-width: 180px;
+  width: 100%;
 }
 
 .timepicker-span-hours,
@@ -120,10 +124,16 @@
 
 .timepicker-span-hours {
   margin-right: 3px;
+  display: inline-block;
+  min-width: 2ch;
+  text-align: right;
 }
 
 .timepicker-span-minutes {
   margin-left: 3px;
+  display: inline-block;
+  min-width: 2ch;
+  text-align: left;
 }
 
 .timepicker-display-am-pm {

package/sass/components/forms/_input-fields.scss

@@ -131,7 +131,7 @@ textarea.materialize-textarea {
   &:-ms-input-placeholder {
     color: var(--mm-text-hint, variables.$placeholder-text-color) !important;
   }
-  
+
   &::-ms-input-placeholder {
     color: var(--mm-text-hint, variables.$placeholder-text-color) !important;
   }
@@ -340,12 +340,15 @@ textarea {
   background-color: transparent;
 
   &.materialize-textarea {
+    // Override base styles to match TextInput alignment
+    padding-top: 10px;
+    padding-bottom: 0;
+    height: 35px;
+    margin-bottom: 2.5px;
     line-height: 1.5;
     overflow-y: hidden; /* prevents scroll bar flash */
-    padding: .8rem 0 .8rem 0; /* prevents text jump on Enter keypress */
     resize: none;
-    min-height: variables.$input-height;
-    box-sizing: border-box;
+    min-height: calc(variables.$input-height - 10px);
   }
 }
 
@@ -355,7 +358,9 @@ textarea {
   white-space: pre-wrap;
   word-wrap: break-word;
   overflow-wrap: break-word; /* future version of deprecated 'word-wrap' */
-  padding-top: 1.2rem; /* prevents text jump on Enter keypress */
+  padding-top: 13px; /* match textarea padding-top */
+  padding-bottom: 0; /* match textarea padding-bottom */
+  line-height: 1.5; /* match textarea line-height */
 
   // Reduces repaints
   position: absolute;

package/sass/components/forms/_select.scss

@@ -150,9 +150,9 @@ body.keyboard-focused {
       background-color: var(--mm-dropdown-hover, variables.$select-option-hover);
     }
 
-    // &.selected {
-    //   background-color: var(--mm-dropdown-selected, variables.$select-option-selected);
-    // }
+    &.selected {
+      background-color: var(--mm-row-hover, variables.$select-option-hover);
+    }
   }
 }