mithril-materialized 2.0.0-beta.9 → 2.0.0-rc.2

package/sass/components/forms/_range-enhanced.scss

@@ -0,0 +1,406 @@
+@use "../variables";
+@use "../global";
+
+/* Enhanced Range Sliders
+   ========================================================================== */
+
+.range-slider {
+  &.vertical {
+    -webkit-appearance: none;
+    appearance: none;
+    writing-mode: vertical-lr;
+    direction: rtl;
+    width: 6px;
+    transform: none;
+    
+    &::-webkit-slider-runnable-track {
+      width: 6px;
+      height: 100%;
+    }
+    
+    &::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      width: variables.$range-height;
+      height: variables.$range-width;
+      margin-left: -4px;
+      margin-top: 0;
+    }
+    
+    &::-moz-range-track {
+      width: 6px;
+      height: 100%;
+    }
+    
+    &::-moz-range-thumb {
+      width: variables.$range-height;
+      height: variables.$range-width;
+      margin-left: -12px;
+      margin-top: 0;
+    }
+  }
+  
+  &.disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    
+    &::-webkit-slider-thumb {
+      cursor: not-allowed;
+    }
+    
+    &::-moz-range-thumb {
+      cursor: not-allowed;
+    }
+  }
+}
+
+.single-range-slider {
+  // Container styles
+  outline: none; // Remove default focus outline
+  // border-radius: 4px; // Slight rounding for focus indicator
+  
+  &.horizontal {
+    height: 40px;
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  
+  &.vertical {
+    width: 40px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    height: 100%;
+  }
+  
+  .track {
+    background-color: var(--mm-border-color, #c2c0c2);
+    border-radius: 2px;
+    
+    &.horizontal {
+      position: absolute;
+      top: 25%;
+      left: 0;
+      transform: translateY(-50%);
+      width: 100%;
+      height: 4px;
+    }
+    
+    &.vertical {
+      position: absolute;
+      bottom: 10px;
+      width: 4px;
+      height: 100%;
+    }
+  }
+  
+  .range-progress {
+    background-color: var(--mm-primary-color, #26a69a);
+    border-radius: 2px;
+    
+    &.horizontal {
+      position: absolute;
+      top: 25%;
+      transform: translateY(-50%);
+      height: 4px;
+    }
+    
+    &.vertical {
+      position: absolute;
+      bottom: 10px;
+      width: 4px;
+    }
+  }
+  
+  .thumb {
+    background-color: var(--mm-primary-color, #26a69a);
+    transition: transform 0.1s ease, box-shadow 0.1s ease;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    cursor: pointer;
+    outline: none;
+    
+    &.horizontal {
+      position: absolute;
+      transform: translateY(-50%);
+    }
+    
+    &.vertical {
+      position: absolute;
+    }
+    
+    &:hover {
+      box-shadow: 0 4px 8px rgba(0,0,0,0.3);
+    }
+    
+    .value-tooltip {
+      position: absolute;
+      background: var(--mm-primary-color, #26a69a);
+      color: white;
+      padding: 4px 8px;
+      border-radius: 4px;
+      font-size: 12px;
+      white-space: nowrap;
+      min-width: 24px;
+      text-align: center;
+      pointer-events: none;
+      z-index: 20;
+      
+      &.top {
+        bottom: 100%;
+        left: 50%;
+        transform: translateX(-50%);
+        margin-bottom: 8px;
+        
+        &::after {
+          content: '';
+          position: absolute;
+          top: 100%;
+          left: 50%;
+          transform: translateX(-50%);
+          border: 4px solid transparent;
+          border-top-color: var(--mm-primary-color, #26a69a);
+        }
+      }
+      
+      &.bottom {
+        top: 100%;
+        left: 50%;
+        transform: translateX(-50%);
+        margin-top: 8px;
+        
+        &::after {
+          content: '';
+          position: absolute;
+          bottom: 100%;
+          left: 50%;
+          transform: translateX(-50%);
+          border: 4px solid transparent;
+          border-bottom-color: var(--mm-primary-color, #26a69a);
+        }
+      }
+      
+      &.left {
+        right: 100%;
+        top: 50%;
+        transform: translateY(-50%);
+        margin-right: 8px;
+        
+        &::after {
+          content: '';
+          position: absolute;
+          top: 50%;
+          left: 100%;
+          transform: translateY(-50%);
+          border: 4px solid transparent;
+          border-left-color: var(--mm-primary-color, #26a69a);
+        }
+      }
+      
+      &.right {
+        left: 100%;
+        top: 50%;
+        transform: translateY(-50%);
+        margin-left: 8px;
+        
+        &::after {
+          content: '';
+          position: absolute;
+          top: 50%;
+          right: 100%;
+          transform: translateY(-50%);
+          border: 4px solid transparent;
+          border-right-color: var(--mm-primary-color, #26a69a);
+        }
+      }
+    }
+  }
+  
+  // Focus styling - show outline only on thumb when slider has focus
+  &:focus .thumb,
+  &:focus-visible .thumb {
+    box-shadow: 0 0 0 3px var(--mm-primary-color-alpha-30, rgba(38, 166, 154, 0.3)), 0 4px 8px rgba(0,0,0,0.2);
+  }
+  
+  &:focus .thumb:hover,
+  &:focus-visible .thumb:hover {
+    box-shadow: 0 0 0 3px var(--mm-primary-color-alpha-30, rgba(38, 166, 154, 0.3)), 0 4px 8px rgba(0,0,0,0.3);
+  }
+}
+
+.double-range-slider {
+  // Container styles
+  outline: none; // Remove default focus outline
+  border-radius: 4px; // Slight rounding for focus indicator
+  
+  &.horizontal {
+    height: 40px;
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  
+  &.vertical {
+    width: 40px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+    
+  .track {
+    background-color: var(--mm-border-color, #c2c0c2);
+    border-radius: 2px;
+    
+    &.horizontal {
+      position: absolute;
+      top: 50%;
+      left: 0;
+      transform: translateY(-50%);
+      width: 100%;
+      height: 4px;
+    }
+    
+    &.vertical {
+      position: absolute;
+      left: 50%;
+      top: 0;
+      transform: translateX(-50%);
+      width: 4px;
+      height: 100%;
+    }
+  }
+  
+  .range {
+    background-color: var(--mm-primary-color, #26a69a);
+    border-radius: 2px;
+    
+    &.horizontal {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      height: 4px;
+    }
+    
+    &.vertical {
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 4px;
+    }
+  }
+  
+  .thumb {
+    background-color: var(--mm-primary-color, #26a69a);
+    transition: transform 0.1s ease, box-shadow 0.1s ease;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    cursor: pointer;
+    outline: none;
+    
+    &.horizontal {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+    
+    &.vertical {
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+    
+    &:hover {
+      box-shadow: 0 4px 8px rgba(0,0,0,0.3);
+    }
+    
+    .value {
+      position: absolute;
+      background: var(--mm-primary-color, #26a69a);
+      color: white;
+      padding: 2px 6px;
+      border-radius: 4px;
+      font-size: 12px;
+      white-space: nowrap;
+      min-width: 24px;
+      text-align: center;
+      pointer-events: none;
+      z-index: 20;
+      
+      &.horizontal {
+        top: -30px;
+        left: 50%;
+        transform: translateX(-50%);
+        
+        &::after {
+          content: '';
+          position: absolute;
+          top: 100%;
+          left: 50%;
+          transform: translateX(-50%);
+          border: 4px solid transparent;
+          border-top-color: var(--mm-primary-color, #26a69a);
+        }
+      }
+      
+      &.vertical {
+        top: 50%;
+        left: -35px;
+        transform: translateY(-50%);
+        
+        &::after {
+          content: '';
+          position: absolute;
+          top: 50%;
+          left: 100%;
+          transform: translateY(-50%);
+          border: 4px solid transparent;
+          border-left-color: var(--mm-primary-color, #26a69a);
+        }
+      }
+    }
+  }
+  
+  // Focus styling for individual thumbs (improved accessibility)
+  .thumb {
+    &:focus,
+    &:focus-visible {
+      box-shadow: 0 0 0 3px var(--mm-primary-color-alpha-30, rgba(38, 166, 154, 0.3)), 0 4px 8px rgba(0,0,0,0.2);
+    }
+    
+    &:focus:hover,
+    &:focus-visible:hover {
+      box-shadow: 0 0 0 3px var(--mm-primary-color-alpha-30, rgba(38, 166, 154, 0.3)), 0 4px 8px rgba(0,0,0,0.3);
+    }
+  }
+  
+  // Legacy focus styling for active thumb (fallback)
+  &:focus .thumb.min-thumb.active,
+  &:focus .thumb.max-thumb.active,
+  &:focus-visible .thumb.min-thumb.active,
+  &:focus-visible .thumb.max-thumb.active {
+    box-shadow: 0 0 0 3px var(--mm-primary-color-alpha-30, rgba(38, 166, 154, 0.3)), 0 4px 8px rgba(0,0,0,0.2);
+  }
+  
+  &:focus .thumb.min-thumb.active:hover,
+  &:focus .thumb.max-thumb.active:hover,
+  &:focus-visible .thumb.min-thumb.active:hover,
+  &:focus-visible .thumb.max-thumb.active:hover {
+    box-shadow: 0 0 0 3px var(--mm-primary-color-alpha-30, rgba(38, 166, 154, 0.3)), 0 4px 8px rgba(0,0,0,0.3);
+  }
+}
+
+.range-field.vertical {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-height: 100px;
+  padding-top: 20px;
+  
+  .double-range-slider {
+    height: 100%;
+  }
+}

package/sass/components/forms/_range.scss

@@ -66,7 +66,7 @@ input[type=range] + .thumb {
 // Shared
 @mixin range-track {
   height: variables.$track-height;
-  background: #c2c0c2;
+  background: var(--mm-border-color, #c2c0c2);
   border: none;
 }
 
@@ -104,7 +104,7 @@ input[type=range]::-webkit-slider-thumb {
 // FireFox
 input[type=range] {
   /* fix for FF unable to apply focus style bug  */
-  border: 1px solid white;
+  border: 1px solid var(--mm-card-background, white);
 
   /*required for proper track sizing in FF*/
 }
@@ -124,7 +124,7 @@ input[type=range]::-moz-range-thumb {
 
 // hide the outline behind the border
 input[type=range]:-moz-focusring {
-  outline: 1px solid #fff;
+  outline: 1px solid var(--mm-card-background, #fff);
   outline-offset: -1px;
 }
 
@@ -148,11 +148,11 @@ input[type=range]::-ms-track {
 }
 
 input[type=range]::-ms-fill-lower {
-  background: #777;
+  background: var(--mm-text-secondary, #777);
 }
 
 input[type=range]::-ms-fill-upper {
-  background: #ddd;
+  background: var(--mm-surface-color, #ddd);
 }
 
 input[type=range]::-ms-thumb {

package/sass/components/forms/_select.scss

@@ -128,7 +128,7 @@ select:disabled {
 }
 
 .select-wrapper i {
-  color: variables.$select-disabled-color;
+  color: var(--mm-text-primary, rgba(0,0,0,.87))
 }
 
 .select-dropdown li.disabled,

package/sass/materialize.scss

@@ -33,6 +33,7 @@
 @use "components/chips";
 @use "components/materialbox";
 @use "components/forms/forms";
+@use "components/forms/range-enhanced"; // Enhanced custom range sliders with vertical and double-thumb support
 @use "components/table_of_contents";
 @use "components/sidenav";
 @use "components/preloader";
@@ -46,3 +47,8 @@
 @use "components/file-upload";
 @use "components/breadcrumb";
 @use "components/wizard";
+@use "components/datatable";
+@use "components/treeview";
+@use "components/timeline";
+@use "components/masonry";
+@use "components/image-list";