mithril-materialized 2.0.0-beta.1 → 2.0.0-beta.10

package/sass/components/_file-upload.scss

@@ -0,0 +1,228 @@
+// File Upload Component Styles
+
+.file-upload-container {
+  margin-bottom: 1rem;
+}
+
+.file-upload-area {
+  border: 2px dashed var(--mm-border-color, rgba(0, 0, 0, 0.12));
+  border-radius: 0.5rem;
+  padding: 2rem;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  background: var(--mm-input-background, #ffffff);
+  
+  &:hover:not(.disabled) {
+    border-color: var(--mm-primary-color, #26a69a);
+    background: var(--mm-surface-color, #f5f5f5);
+  }
+  
+  &.drag-over {
+    border-color: var(--mm-primary-color, #26a69a);
+    background: var(--mm-primary-color-light, rgba(38, 166, 154, 0.1));
+    transform: scale(1.02);
+  }
+  
+  &.disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    background: var(--mm-border-color, rgba(0, 0, 0, 0.05));
+  }
+  
+  &.error {
+    border-color: #f44336;
+  }
+  
+  &.has-files {
+    padding: 1rem;
+  }
+}
+
+.file-upload-content {
+  .file-upload-icon {
+    font-size: 3rem;
+    color: var(--mm-text-secondary, rgba(0, 0, 0, 0.6));
+    margin-bottom: 0.5rem;
+  }
+  
+  .file-upload-label {
+    font-size: 1.1rem;
+    font-weight: 500;
+    color: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
+    margin: 0.5rem 0;
+  }
+  
+  .file-upload-helper {
+    font-size: 0.875rem;
+    color: var(--mm-text-secondary, rgba(0, 0, 0, 0.6));
+    margin: 0.25rem 0;
+  }
+  
+  .file-upload-types {
+    font-size: 0.75rem;
+    color: var(--mm-text-hint, rgba(0, 0, 0, 0.38));
+    margin: 0.25rem 0 0 0;
+    font-style: italic;
+  }
+}
+
+.file-upload-error {
+  color: #f44336;
+  font-size: 0.875rem;
+  margin-top: 0.5rem;
+  text-align: left;
+}
+
+.file-upload-list {
+  margin-top: 1rem;
+  
+  h6 {
+    margin: 0 0 0.5rem 0;
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
+  }
+}
+
+.file-upload-item {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 0.75rem;
+  margin-bottom: 0.5rem;
+  background: var(--mm-surface-color, #ffffff);
+  border: 1px solid var(--mm-border-color, rgba(0, 0, 0, 0.12));
+  border-radius: 0.5rem;
+  transition: all 0.2s ease;
+  
+  &:hover {
+    background: var(--mm-card-background, #f5f5f5);
+  }
+  
+  .file-preview {
+    flex-shrink: 0;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 0.25rem;
+    overflow: hidden;
+    background: var(--mm-border-color, rgba(0, 0, 0, 0.05));
+    
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+  
+  .file-info {
+    flex: 1;
+    min-width: 0;
+    
+    .file-name {
+      font-weight: 500;
+      color: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
+      margin-bottom: 0.25rem;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    
+    .file-details {
+      display: flex;
+      gap: 1rem;
+      font-size: 0.75rem;
+      color: var(--mm-text-secondary, rgba(0, 0, 0, 0.6));
+    }
+    
+    .file-progress {
+      margin-top: 0.5rem;
+      
+      .progress {
+        height: 0.25rem;
+        background-color: var(--mm-border-color, rgba(0, 0, 0, 0.12));
+        border-radius: 0.125rem;
+        overflow: hidden;
+        
+        .determinate {
+          background-color: var(--mm-primary-color, #26a69a);
+          height: 100%;
+          transition: width 0.3s ease;
+        }
+      }
+    }
+    
+    .file-error {
+      color: #f44336;
+      font-size: 0.75rem;
+      margin-top: 0.25rem;
+    }
+  }
+  
+  .file-remove {
+    flex-shrink: 0;
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    border: none;
+    color: var(--mm-text-secondary, rgba(0, 0, 0, 0.6));
+    cursor: pointer;
+    transition: all 0.2s ease;
+    
+    &:hover {
+      background: rgba(244, 67, 54, 0.1);
+      color: #f44336;
+    }
+    
+    .material-icons {
+      font-size: 1.25rem;
+    }
+  }
+}
+
+// Responsive adjustments
+@media (max-width: 600px) {
+  .file-upload-area {
+    padding: 1.5rem 1rem;
+    
+    .file-upload-content {
+      .file-upload-icon {
+        font-size: 2.5rem;
+      }
+      
+      .file-upload-label {
+        font-size: 1rem;
+      }
+    }
+  }
+  
+  .file-upload-item {
+    gap: 0.75rem;
+    padding: 0.5rem;
+    
+    .file-preview {
+      width: 2.5rem;
+      height: 2.5rem;
+    }
+    
+    .file-info {
+      .file-details {
+        flex-direction: column;
+        gap: 0.25rem;
+      }
+    }
+  }
+}
+
+// Dark theme specific adjustments
+[data-theme="dark"] {
+  .file-upload-area {
+    &.drag-over {
+      background: var(--mm-primary-color-dark, rgba(38, 166, 154, 0.2));
+    }
+  }
+}

package/sass/components/_global.scss

@@ -523,17 +523,18 @@ td, th{
 // Collections
 .collection {
   margin: variables.$element-top-margin 0 variables.$element-bottom-margin 0;
-  border: 1px solid variables.$collection-border-color;
+  border: 1px solid var(--mm-border-color, variables.$collection-border-color);
   border-radius: 2px;
   overflow: hidden;
   position: relative;
 
   .collection-item {
-    background-color: variables.$collection-bg-color;
+    background-color: var(--mm-surface-color, variables.$collection-bg-color);
+    color: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
     line-height: variables.$collection-line-height;
     padding: 10px 20px;
     margin: 0;
-    border-bottom: 1px solid variables.$collection-border-color;
+    border-bottom: 1px solid var(--mm-border-color, variables.$collection-border-color);
 
     // Avatar Collection
     &.avatar {
@@ -604,8 +605,9 @@ td, th{
 
   &.with-header {
     .collection-header {
-      background-color: variables.$collection-bg-color;
-      border-bottom: 1px solid variables.$collection-border-color;
+      background-color: var(--mm-surface-color, variables.$collection-bg-color);
+      color: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
+      border-bottom: 1px solid var(--mm-border-color, variables.$collection-border-color);
       padding: 10px 20px;
     }
     .collection-item {

package/sass/components/_modal.scss

@@ -12,7 +12,8 @@
   position: fixed;
   left: 0;
   right: 0;
-  background-color: #fafafa;
+  background-color: var(--mm-modal-background, #fafafa);
+  color: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
   padding: 0;
   max-height: 70%;
   width: 55%;
@@ -32,6 +33,8 @@
 
   .modal-content {
     padding: 24px;
+    background-color: var(--mm-modal-background, #fafafa);
+    color: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
   }
   .modal-close {
     cursor: pointer;
@@ -39,7 +42,7 @@
 
   .modal-footer {
     border-radius: 0 0 2px 2px;
-    background-color: #fafafa;
+    background-color: var(--mm-modal-background, #fafafa);
     padding: 4px 6px;
     height: 56px;
     width: 100%;

package/sass/components/_navbar.scss

@@ -16,14 +16,14 @@ nav {
     }
   }
 
-  color: variables.$navbar-font-color;
+  color: var(--mm-nav-text, variables.$navbar-font-color);
   @extend .z-depth-1 !optional;
-  background-color: variables.$primary-color;
+  background-color: var(--mm-nav-background, variables.$primary-color);
   width: 100%;
   height: variables.$navbar-height-mobile;
   line-height: variables.$navbar-line-height-mobile;
 
-  a { color: variables.$navbar-font-color; }
+  a { color: var(--mm-nav-text, variables.$navbar-font-color); }
 
   i,
   [class^="mdi-"], [class*="mdi-"],
@@ -120,7 +120,15 @@ nav {
       padding: 0;
 
       &.active {
-        background-color: rgba(0,0,0,.1);
+        background-color: var(--mm-primary-color-light, rgba(0,0,0,.1));
+        
+        a {
+          color: var(--mm-nav-active-text, variables.$navbar-font-color);
+        }
+        
+        i, .material-icons {
+          color: var(--mm-nav-active-text, variables.$navbar-font-color);
+        }
       }
     }
     a {
@@ -182,7 +190,7 @@ nav {
         color: rgba(255,255,255,.7);
         transition: color .3s;
       }
-      &.active i { color: variables.$navbar-font-color; }
+      &.active i { color: var(--mm-nav-text, variables.$navbar-font-color); }
     }
   }
 }

package/sass/components/_sidenav.scss

@@ -2,6 +2,114 @@
 @use "variables";
 @use "global";
 
+// Modern Sidenav Component Styles (v2.0+)
+.sidenav-container {
+  position: relative;
+  z-index: 997;
+}
+
+.sidenav-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--mm-overlay-background, rgba(0, 0, 0, 0.5));
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.3s ease, visibility 0.3s ease;
+  z-index: 998;
+  cursor: pointer;
+  
+  &.show {
+    opacity: 1;
+    visibility: visible;
+  }
+}
+
+.sidenav-link {
+  display: flex;
+  align-items: center;
+  padding: 0.75rem 1rem;
+  color: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
+  text-decoration: none;
+  transition: background-color 0.2s ease, color 0.2s ease;
+  cursor: pointer;
+  min-height: 48px;
+  
+  &:hover:not(.disabled) {
+    background: var(--mm-border-color, rgba(0, 0, 0, 0.12));
+    color: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
+    text-decoration: none;
+  }
+  
+  &.active {
+    background: var(--mm-primary-color-light, rgba(38, 166, 154, 0.1));
+    color: var(--mm-primary-color, #26a69a);
+    
+    .sidenav-icon {
+      color: var(--mm-primary-color, #26a69a);
+    }
+  }
+  
+  &.disabled {
+    color: var(--mm-text-disabled, rgba(0, 0, 0, 0.38));
+    cursor: not-allowed;
+    
+    .sidenav-icon {
+      color: var(--mm-text-disabled, rgba(0, 0, 0, 0.38));
+    }
+  }
+}
+
+.sidenav-icon {
+  margin-right: 1rem;
+  font-size: 1.5rem;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--mm-text-secondary, rgba(0, 0, 0, 0.6));
+  flex-shrink: 0;
+}
+
+.sidenav-text {
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.5;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sidenav-divider {
+  height: 1px;
+  background: var(--mm-divider-color, rgba(0, 0, 0, 0.12));
+  margin: 0.5rem 0;
+}
+
+.sidenav-subheader {
+  padding: 1rem 1rem 0.5rem 1rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--mm-text-secondary, rgba(0, 0, 0, 0.6));
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  line-height: 1.5;
+}
+
+.sidenav-content {
+  padding: 0;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+// Legacy Sidenav Styles (maintain backward compatibility)
+
 .sidenav {
   position: fixed;
   width: variables.$sidenav-width;
@@ -13,14 +121,51 @@
   height: calc(100% + 60px);
   height: -moz-calc(100%); //Temporary Firefox Fix
   padding-bottom: 60px;
-  background-color: variables.$sidenav-bg-color;
+  background-color: var(--mm-surface-color, variables.$sidenav-bg-color);
   z-index: 999;
   overflow-y: auto;
   will-change: transform;
   backface-visibility: hidden;
   transform: translateX(-105%);
+  transition: transform 0.3s ease, left 0.3s ease, right 0.3s ease;
 
   @extend .z-depth-1 !optional;
+  
+  // New component position variants
+  &.sidenav-left {
+    left: 0;
+  }
+  
+  &.sidenav-right {
+    right: 0;
+    left: auto;
+    transform: translateX(100%);
+  }
+  
+  // New component mode variants
+  &.sidenav-overlay {
+    position: fixed;
+  }
+  
+  &.sidenav-push {
+    position: relative;
+    box-shadow: var(--mm-border-color, rgba(0, 0, 0, 0.12)) 1px 0 0 0;
+  }
+  
+  // New component state variants
+  &.closed {
+    &.sidenav-left {
+      transform: translateX(-100%);
+    }
+    
+    &.sidenav-right {
+      transform: translateX(100%);
+    }
+  }
+  
+  &.open {
+    transform: translateX(0);
+  }
 
   // Right Align
   &.right-aligned {
@@ -44,9 +189,9 @@
 
   // Style non btn anchors
   li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) {
-    &:hover { background-color: rgba(0,0,0,.05);}
+    &:hover { background-color: var(--mm-border-color, rgba(0,0,0,.05));}
 
-    color: variables.$sidenav-font-color;
+    color: var(--mm-text-primary, variables.$sidenav-font-color);
     display: block;
     font-size: variables.$sidenav-font-size;
     font-weight: 500;
@@ -62,7 +207,7 @@
       line-height: variables.$sidenav-line-height;
       margin: 0 (variables.$sidenav-padding * 2) 0 0;
       width: math.div(variables.$sidenav-item-height, 2);
-      color: rgba(0,0,0,.54);
+      color: var(--mm-text-secondary, rgba(0,0,0,.54));
     }
   }
 
@@ -82,10 +227,14 @@
 
     cursor: initial;
     pointer-events: none;
-    color: rgba(0,0,0,.54);
+    color: var(--mm-text-secondary, rgba(0,0,0,.54));
     font-size: variables.$sidenav-font-size;
     font-weight: 500;
     line-height: variables.$sidenav-line-height;
+    padding: 0 (variables.$sidenav-padding * 2);
+    height: variables.$sidenav-item-height;
+    display: flex;
+    align-items: center;
   }
 
   .user-view {
@@ -205,9 +354,17 @@
   top: 0;
   left: 0;
   right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
   opacity: 0;
-  height: 120vh;
-  background-color: rgba(0,0,0,.5);
+  background-color: var(--mm-overlay-background, rgba(0,0,0,.5));
   z-index: 997;
   display: none;
+  transition: opacity 0.3s ease;
+}
+
+// Ensure overlay sidenav doesn't affect main content layout
+.sidenav-overlay {
+  pointer-events: auto;
 }

package/sass/components/_tabs.scss

@@ -34,7 +34,8 @@
   overflow-y: hidden;
   height: 48px;
   width: 100%;
-  background-color: variables.$tabs-bg-color;
+  background-color: var(--mm-background-color, variables.$tabs-bg-color);
+  color: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
   margin: 0 auto;
   white-space: nowrap;
 
@@ -57,10 +58,10 @@
       &:hover,
       &.active {
         background-color: transparent;
-        color: variables.$tabs-text-color;
+        color: var(--mm-primary-color, variables.$tabs-text-color);
       }
 
-      color: rgba(variables.$tabs-text-color, .7);
+      color: var(--mm-text-secondary, rgba(variables.$tabs-text-color, .7));
       display: block;
       width: 100%;
       height: 100%;
@@ -73,7 +74,7 @@
 
     &.disabled a,
     &.disabled a:hover {
-      color: rgba(variables.$tabs-text-color, .4);
+      color: var(--mm-text-disabled, rgba(variables.$tabs-text-color, .4));
       cursor: default;
     }
   }

package/sass/components/_theme-switcher.scss

@@ -0,0 +1,120 @@
+// Theme Switcher Component Styles
+
+.theme-switcher {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  
+  .theme-switcher-label {
+    font-size: 0.875rem;
+    color: var(--mm-text-secondary, rgba(0, 0, 0, 0.6));
+    font-weight: 500;
+  }
+  
+  .theme-switcher-buttons {
+    display: flex;
+    background: var(--mm-surface-color, #ffffff);
+    border: 1px solid var(--mm-border-color, rgba(0, 0, 0, 0.12));
+    border-radius: 0.5rem;
+    overflow: hidden;
+    
+    .btn-flat {
+      display: flex;
+      align-items: center;
+      gap: 0.25rem;
+      padding: 0.5rem 0.75rem;
+      margin: 0;
+      border: none;
+      background: transparent;
+      color: var(--mm-text-secondary, rgba(0, 0, 0, 0.6));
+      font-size: 0.875rem;
+      border-radius: 0;
+      min-width: auto;
+      height: auto;
+      line-height: 1;
+      text-transform: none;
+      transition: all 0.2s ease;
+      cursor: pointer;
+      
+      &:hover {
+        background: var(--mm-border-color, rgba(0, 0, 0, 0.12));
+        color: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
+      }
+      
+      &.active {
+        background: var(--mm-primary-color, #26a69a);
+        color: var(--mm-button-text, #ffffff);
+        
+        &:hover {
+          background: var(--mm-primary-color-dark, #00695c);
+        }
+      }
+      
+      .material-icons {
+        font-size: 1rem;
+      }
+      
+      span {
+        font-size: 0.75rem;
+        font-weight: 500;
+      }
+    }
+  }
+}
+
+.theme-toggle {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--mm-surface-color, #ffffff);
+  border: 1px solid var(--mm-border-color, rgba(0, 0, 0, 0.12));
+  color: var(--mm-text-secondary, rgba(0, 0, 0, 0.6));
+  cursor: pointer;
+  transition: all 0.2s ease;
+  
+  &:hover {
+    background: var(--mm-primary-color, #26a69a);
+    color: var(--mm-button-text, #ffffff);
+    border-color: var(--mm-primary-color, #26a69a);
+  }
+  
+  .material-icons {
+    font-size: 1.25rem;
+  }
+}
+
+// Navbar theme toggle specific styles
+nav .theme-toggle {
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  width: 64px;
+  height: 64px;
+  
+  &:hover {
+    background: rgba(255, 255, 255, 0.1);
+    border: none;
+  }
+  
+  &:focus {
+    background: rgba(255, 255, 255, 0.1);
+  }
+}
+
+// Responsive adjustments
+@media (max-width: 600px) {
+  .theme-switcher {
+    .theme-switcher-buttons {
+      .btn-flat {
+        padding: 0.5rem;
+        
+        span {
+          display: none;
+        }
+      }
+    }
+  }
+}