mithril-materialized 1.4.2 → 2.0.0-beta.10

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;
+        }
+      }
+    }
+  }
+}

package/sass/components/_theme-variables.scss

@@ -0,0 +1,205 @@
+// Theme Variables using CSS Custom Properties
+// This enables runtime theme switching including dark mode
+
+:root {
+  // Light theme (default)
+  --mm-primary-color: #26a69a;
+  --mm-primary-color-light: #80cbc4;
+  --mm-primary-color-dark: #00695c;
+  
+  --mm-secondary-color: #ff6f00;
+  --mm-secondary-color-light: #ffa726;
+  --mm-secondary-color-dark: #ef6c00;
+  
+  // Background colors
+  --mm-background-color: #ffffff;
+  --mm-surface-color: #ffffff;
+  --mm-card-background: #ffffff;
+  
+  // Text colors
+  --mm-text-primary: rgba(0, 0, 0, 0.87);
+  --mm-text-secondary: rgba(0, 0, 0, 0.6);
+  --mm-text-disabled: rgba(0, 0, 0, 0.38);
+  --mm-text-hint: rgba(0, 0, 0, 0.38);
+  
+  // Border and divider colors
+  --mm-border-color: rgba(0, 0, 0, 0.12);
+  --mm-divider-color: rgba(0, 0, 0, 0.12);
+  
+  // Input colors
+  --mm-input-background: #ffffff;
+  --mm-input-border: rgba(0, 0, 0, 0.42);
+  --mm-input-border-focus: var(--mm-primary-color);
+  --mm-input-text: var(--mm-text-primary);
+  
+  // Button colors
+  --mm-button-background: var(--mm-primary-color);
+  --mm-button-text: #ffffff;
+  --mm-button-flat-text: var(--mm-primary-color);
+  
+  // Navigation colors
+  --mm-nav-background: var(--mm-primary-color);
+  --mm-nav-text: #ffffff;
+  --mm-nav-active-text: #ffffff;
+  
+  // Modal and overlay colors
+  --mm-modal-background: #ffffff;
+  --mm-overlay-background: rgba(0, 0, 0, 0.5);
+  
+  // Shadow colors
+  --mm-shadow-color: rgba(0, 0, 0, 0.16);
+  
+  // Chip colors
+  --mm-chip-bg: #e4e4e4;
+  --mm-chip-text: var(--mm-text-secondary);
+  
+  // Dropdown colors
+  --mm-dropdown-hover: #eee;
+  --mm-dropdown-focus: #ddd;
+  --mm-dropdown-selected: #e3f2fd;
+  --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);
+  
+  // Switch colors
+  --mm-switch-checked-track: rgba(38, 166, 154, 0.3);
+  --mm-switch-checked-thumb: #26a69a;
+  --mm-switch-unchecked-track: rgba(0, 0, 0, 0.6);
+  --mm-switch-unchecked-thumb: #f5f5f5;
+  --mm-switch-disabled-track: rgba(0, 0, 0, 0.12);
+  --mm-switch-disabled-thumb: #bdbdbd;
+}
+
+// Apply theme variables to body and main containers
+body {
+  background-color: var(--mm-background-color);
+  color: var(--mm-text-primary);
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+.container, .main {
+  color: var(--mm-text-primary);
+}
+
+// Dark theme
+[data-theme="dark"] {
+  --mm-primary-color: #80cbc4;
+  --mm-primary-color-light: #b2dfdb;
+  --mm-primary-color-dark: #4db6ac;
+  
+  --mm-secondary-color: #ffa726;
+  --mm-secondary-color-light: #ffcc02;
+  --mm-secondary-color-dark: #ff8f00;
+  
+  // Background colors
+  --mm-background-color: #121212;
+  --mm-surface-color: #1e1e1e;
+  --mm-card-background: #2d2d2d;
+  
+  // Text colors
+  --mm-text-primary: rgba(255, 255, 255, 0.87);
+  --mm-text-secondary: rgba(255, 255, 255, 0.6);
+  --mm-text-disabled: rgba(255, 255, 255, 0.38);
+  --mm-text-hint: rgba(255, 255, 255, 0.38);
+  
+  // Border and divider colors
+  --mm-border-color: rgba(255, 255, 255, 0.12);
+  --mm-divider-color: rgba(255, 255, 255, 0.12);
+  
+  // Input colors
+  --mm-input-background: #2d2d2d;
+  --mm-input-border: rgba(255, 255, 255, 0.42);
+  --mm-input-border-focus: var(--mm-primary-color);
+  --mm-input-text: var(--mm-text-primary);
+  
+  // Button colors
+  --mm-button-background: var(--mm-primary-color);
+  --mm-button-text: #000000;
+  --mm-button-flat-text: var(--mm-primary-color);
+  
+  // Navigation colors
+  --mm-nav-background: #1e1e1e;
+  --mm-nav-text: #ffffff;
+  --mm-nav-active-text: #000000;
+  
+  // Modal and overlay colors
+  --mm-modal-background: #2d2d2d;
+  --mm-overlay-background: rgba(0, 0, 0, 0.8);
+  
+  // Shadow colors
+  --mm-shadow-color: rgba(0, 0, 0, 0.5);
+  --mm-shadow-umbra: rgba(0, 0, 0, 0.5);
+  --mm-shadow-penumbra: rgba(0, 0, 0, 0.36);
+  --mm-shadow-ambient: rgba(0, 0, 0, 0.3);
+  
+  // Chip colors
+  --mm-chip-bg: #424242;
+  --mm-chip-text: var(--mm-text-secondary);
+  
+  // Dropdown colors
+  --mm-dropdown-hover: #444;
+  --mm-dropdown-focus: #555;
+  --mm-dropdown-selected: #1e3a8a;
+  
+  // Switch colors (dark theme)
+  --mm-switch-checked-track: rgba(128, 203, 196, 0.3);
+  --mm-switch-checked-thumb: #80cbc4;
+  --mm-switch-unchecked-track: rgba(255, 255, 255, 0.6);
+  --mm-switch-unchecked-thumb: #616161;
+  --mm-switch-disabled-track: rgba(255, 255, 255, 0.12);
+  --mm-switch-disabled-thumb: #424242;
+}
+
+// Auto dark mode based on user preference
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    --mm-primary-color: #80cbc4;
+    --mm-primary-color-light: #b2dfdb;
+    --mm-primary-color-dark: #4db6ac;
+    
+    --mm-secondary-color: #ffa726;
+    --mm-secondary-color-light: #ffcc02;
+    --mm-secondary-color-dark: #ff8f00;
+    
+    --mm-background-color: #121212;
+    --mm-surface-color: #1e1e1e;
+    --mm-card-background: #2d2d2d;
+    
+    --mm-text-primary: rgba(255, 255, 255, 0.87);
+    --mm-text-secondary: rgba(255, 255, 255, 0.6);
+    --mm-text-disabled: rgba(255, 255, 255, 0.38);
+    --mm-text-hint: rgba(255, 255, 255, 0.38);
+    
+    --mm-border-color: rgba(255, 255, 255, 0.12);
+    --mm-divider-color: rgba(255, 255, 255, 0.12);
+    
+    --mm-input-background: #2d2d2d;
+    --mm-input-border: rgba(255, 255, 255, 0.42);
+    --mm-input-border-focus: var(--mm-primary-color);
+    --mm-input-text: var(--mm-text-primary);
+    
+    --mm-button-background: var(--mm-primary-color);
+    --mm-button-text: #000000;
+    --mm-button-flat-text: var(--mm-primary-color);
+    
+    --mm-nav-background: #1e1e1e;
+    --mm-nav-text: #ffffff;
+    --mm-nav-active-text: #000000;
+    
+    --mm-modal-background: #2d2d2d;
+    --mm-overlay-background: rgba(0, 0, 0, 0.8);
+    
+    --mm-shadow-color: rgba(0, 0, 0, 0.5);
+    --mm-shadow-umbra: rgba(0, 0, 0, 0.5);
+    --mm-shadow-penumbra: rgba(0, 0, 0, 0.36);
+    --mm-shadow-ambient: rgba(0, 0, 0, 0.3);
+    
+    // Switch colors (auto dark theme)
+    --mm-switch-checked-track: rgba(128, 203, 196, 0.3);
+    --mm-switch-checked-thumb: #80cbc4;
+    --mm-switch-unchecked-track: rgba(255, 255, 255, 0.6);
+    --mm-switch-unchecked-thumb: #616161;
+    --mm-switch-disabled-track: rgba(255, 255, 255, 0.12);
+    --mm-switch-disabled-thumb: #424242;
+  }
+}

package/sass/components/_timepicker.scss

@@ -0,0 +1,262 @@
+@use "sass:color";
+@use "variables";
+
+/* Enhanced TimePicker Styles */
+.input-field.timepicker {
+  input[disabled] {
+    cursor: not-allowed;
+  }
+}
+
+.timepicker-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 4px;
+  font-size: 12px;
+
+  .btn-flat {
+    padding: 2px 8px;
+    min-width: auto;
+    height: 24px;
+    line-height: 20px;
+    font-size: 11px;
+    text-transform: none;
+
+    i.material-icons {
+      font-size: 14px;
+      margin-right: 4px;
+    }
+  }
+}
+
+.inline-time-controls {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 8px;
+  padding: 12px;
+  background-color: var(--mm-border-color, #f5f5f5);
+  border-radius: 4px;
+  font-size: 14px;
+
+  .time-controls-12h {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+
+    input[type="number"] {
+      width: 50px;
+      text-align: center;
+      padding: 4px;
+      border: 1px solid var(--mm-border-color, #ccc);
+      border-radius: 4px;
+    }
+
+    select {
+      padding: 4px;
+      border: 1px solid var(--mm-border-color, #ccc);
+      border-radius: 4px;
+      margin-left: 4px;
+    }
+  }
+
+  input[type="time"] {
+    font-size: 16px;
+    padding: 4px 8px;
+    border: 1px solid var(--mm-border-color, #ccc);
+    border-radius: 4px;
+    min-width: 120px;
+  }
+
+  .btn-flat {
+    padding: 4px 8px;
+    font-size: 11px;
+    background-color: var(--mm-border-color, #e0e0e0);
+    border-radius: 4px;
+    min-width: auto;
+  }
+}
+
+/* Timepicker Containers */
+.timepicker-modal {
+  max-width: 325px;
+  max-height: none;
+}
+
+.timepicker-container.modal-content {
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+}
+
+.text-primary {
+	color: rgba(255, 255, 255, 1);
+}
+
+
+/* Clock Digital Display */
+.timepicker-digital-display {
+  flex: 1 auto;
+  background-color: variables.$secondary-color;
+  padding: 10px;
+  font-weight: 300;
+}
+
+.timepicker-text-container {
+	font-size: 4rem;
+	font-weight: bold;
+	text-align: center;
+	color: rgba(255, 255, 255, 0.6);
+  font-weight: 400;
+	position: relative;
+  user-select: none;
+}
+
+.timepicker-span-hours,
+.timepicker-span-minutes,
+.timepicker-span-am-pm div {
+	cursor: pointer;
+}
+
+.timepicker-span-hours {
+  margin-right: 3px;
+}
+
+.timepicker-span-minutes {
+  margin-left: 3px;
+}
+
+.timepicker-display-am-pm {
+  font-size: 1.3rem;
+  position: absolute;
+  right: 1rem;
+  bottom: 1rem;
+  font-weight: 400;
+}
+
+
+/* Analog Clock Display */
+.timepicker-analog-display {
+  flex: 2.5 auto;
+}
+
+.timepicker-plate {
+	background-color: variables.$timepicker-clock-plate-bg;
+	border-radius: 50%;
+	width: 270px;
+	height: 270px;
+	overflow: visible;
+	position: relative;
+  margin: auto;
+  margin-top: 25px;
+  margin-bottom: 5px;
+	user-select: none;
+}
+
+.timepicker-canvas,
+.timepicker-dial {
+	position: absolute;
+	left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+.timepicker-minutes {
+	visibility: hidden;
+}
+
+.timepicker-tick {
+	border-radius: 50%;
+	color: variables.$timepicker-clock-color;
+	line-height: 40px;
+	text-align: center;
+	width: 40px;
+	height: 40px;
+	position: absolute;
+	cursor: pointer;
+  font-size: 15px;
+}
+
+.timepicker-tick.active,
+.timepicker-tick:hover {
+	background-color: color.scale(variables.$secondary-color, $alpha: -75%);
+}
+.timepicker-dial {
+	transition: transform 350ms, opacity 350ms;
+}
+.timepicker-dial-out {
+  &.timepicker-hours {
+	  transform: scale(1.1, 1.1);
+  }
+
+  &.timepicker-minutes {
+	  transform: scale(.8, .8);
+  }
+
+	opacity: 0;
+}
+.timepicker-canvas {
+	transition: opacity 175ms;
+
+  line {
+	  stroke: variables.$secondary-color;
+	  stroke-width: 4;
+	  stroke-linecap: round;
+  }
+}
+.timepicker-canvas-out {
+	opacity: 0.25;
+}
+.timepicker-canvas-bearing {
+	stroke: none;
+	fill: variables.$secondary-color;
+}
+.timepicker-canvas-bg {
+	stroke: none;
+	fill: variables.$secondary-color;
+}
+
+
+/* Footer */
+.timepicker-footer {
+  margin: 0 auto;
+  padding: 5px 1rem;
+  display: flex;
+  justify-content: space-between;
+}
+
+.timepicker-clear {
+  color: variables.$error-color;
+}
+
+.timepicker-close {
+  color: variables.$secondary-color;
+}
+
+.timepicker-clear,
+.timepicker-close {
+  padding: 0 20px;
+}
+
+/* Media Queries */
+@media #{variables.$medium-and-up} {
+  .timepicker-modal {
+    max-width: 600px;
+  }
+
+  .timepicker-container.modal-content {
+    flex-direction: row;
+  }
+
+  .timepicker-text-container {
+		top: 32%;
+	}
+
+	.timepicker-display-am-pm {
+	  position: relative;
+	  right: auto;
+	  bottom: auto;
+	  text-align: center;
+	  margin-top: 1.2rem;
+	}
+}

package/sass/components/_toast.scss

@@ -0,0 +1,61 @@
+@use "variables";
+@use "global";
+
+#toast-container {
+  display:block;
+  position: fixed;
+  z-index: 10000;
+
+  @media #{variables.$small-and-down} {
+    min-width: 100%;
+    bottom: 0%;
+  }
+  @media #{variables.$medium-only} {
+    left: 5%;
+    bottom: 7%;
+    max-width: 90%;
+  }
+  @media #{variables.$large-and-up} {
+    top: 10%;
+    right: 7%;
+    max-width: 86%;
+  }
+}
+
+.toast {
+  @extend .z-depth-1 !optional;
+  border-radius: 2px;
+  top: 35px;
+  width: auto;
+  margin-top: 10px;
+  position: relative;
+  max-width:100%;
+  height: auto;
+  min-height: variables.$toast-height;
+  line-height: 1.5em;
+  background-color: variables.$toast-color;
+  padding: 10px 25px;
+  font-size: 1.1rem;
+  font-weight: 300;
+  color: variables.$toast-text-color;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: default;
+
+  .toast-action {
+    color: variables.$toast-action-color;
+    font-weight: 500;
+    margin-right: -25px;
+    margin-left: 3rem;
+  }
+
+  &.rounded{
+    border-radius: 24px;
+  }
+
+  @media #{variables.$small-and-down} {
+    width: 100%;
+    border-radius: 0;
+  }
+}

package/sass/components/_tooltip.scss

@@ -0,0 +1,32 @@
+.material-tooltip {
+  padding: 10px 8px;
+  font-size: 1rem;
+  z-index: 2000;
+  background-color: transparent;
+  border-radius: 2px;
+  color: #fff;
+  min-height: 36px;
+  line-height: 120%;
+  opacity: 0;
+  position: absolute;
+  text-align: center;
+  max-width: calc(100% - 4px);
+  overflow: hidden;
+  left: 0;
+  top: 0;
+  pointer-events: none;
+  visibility: hidden;
+  background-color: #323232;
+}
+
+.backdrop {
+  position: absolute;
+  opacity: 0;
+  height: 7px;
+  width: 14px;
+  border-radius: 0 0 50% 50%;
+  background-color: #323232;
+  z-index: -1;
+  transform-origin: 50% 0%;
+  visibility: hidden;
+}

package/sass/components/_transitions.scss

@@ -0,0 +1,13 @@
+// Scale transition
+.scale-transition {
+  &.scale-out {
+    transform: scale(0);
+    transition: transform .2s !important;
+  }
+
+  &.scale-in {
+    transform: scale(1);
+  }
+
+  transition: transform .3s cubic-bezier(0.53, 0.01, 0.36, 1.63) !important;
+}