mithril-materialized 1.4.2 → 2.0.0-beta.10

package/sass/components/_sidenav.scss

@@ -0,0 +1,370 @@
+@use 'sass:math';
+@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;
+  left: 0;
+  top: 0;
+  margin: 0;
+  transform: translateX(-100%);
+  height: 100%;
+  height: calc(100% + 60px);
+  height: -moz-calc(100%); //Temporary Firefox Fix
+  padding-bottom: 60px;
+  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 {
+    right: 0;
+    transform: translateX(105%);
+    left: auto;
+    transform: translateX(100%);
+  }
+
+  .collapsible {
+    margin: 0;
+  }
+
+
+  li {
+    float: none;
+    line-height: variables.$sidenav-line-height;
+
+    &.active { background-color: rgba(0,0,0,.05); }
+  }
+
+  // Style non btn anchors
+  li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) {
+    &:hover { background-color: var(--mm-border-color, rgba(0,0,0,.05));}
+
+    color: var(--mm-text-primary, variables.$sidenav-font-color);
+    display: block;
+    font-size: variables.$sidenav-font-size;
+    font-weight: 500;
+    height: variables.$sidenav-item-height;
+    line-height: variables.$sidenav-line-height;
+    padding: 0 (variables.$sidenav-padding * 2);
+
+    & > i,
+    & > [class^="mdi-"], li > a > [class*="mdi-"],
+    & > i.material-icons {
+      float: left;
+      height: variables.$sidenav-item-height;
+      line-height: variables.$sidenav-line-height;
+      margin: 0 (variables.$sidenav-padding * 2) 0 0;
+      width: math.div(variables.$sidenav-item-height, 2);
+      color: var(--mm-text-secondary, rgba(0,0,0,.54));
+    }
+  }
+
+  // Stlye btn anchors
+  li > .btn, li > .btn-large, li > .btn-flat, li > .btn-floating {
+    margin: 10px (variables.$sidenav-padding * 2);
+  }
+
+  .divider {
+    margin: math.div(variables.$sidenav-padding, 2) 0 0 0;
+  }
+
+  .subheader {
+    &:hover {
+      background-color: transparent;
+    }
+
+    cursor: initial;
+    pointer-events: none;
+    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 {
+    position: relative;
+    padding: (variables.$sidenav-padding * 2) (variables.$sidenav-padding * 2) 0;
+    margin-bottom: math.div(variables.$sidenav-padding, 2);
+
+    & > a {
+      &:hover { background-color: transparent; }
+      height: auto;
+      padding: 0;
+    }
+
+    .background {
+      overflow: hidden;
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      z-index: -1;
+    }
+
+    .circle, .name, .email {
+      display: block;
+    }
+
+    .circle {
+      height: 64px;
+      width: 64px;
+    }
+
+    .name,
+    .email {
+      font-size: variables.$sidenav-font-size;
+      line-height: math.div(variables.$sidenav-line-height, 2);
+    }
+
+    .name {
+      margin-top: 16px;
+      font-weight: 500;
+    }
+
+    .email {
+      padding-bottom: 16px;
+      font-weight: 400;
+    }
+  }
+}
+
+
+// Touch interaction
+.drag-target {
+  // Right Align
+  &.right-aligned {
+    right: 0;
+  }
+
+  height: 100%;
+  width: 10px;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 998;
+}
+
+
+// Fixed Sidenav shown
+.sidenav.sidenav-fixed {
+  // Right Align
+  &.right-aligned {
+    right: 0;
+    left: auto;
+  }
+
+  left: 0;
+  transform: translateX(0);
+  position: fixed;
+}
+
+// Fixed Sidenav hide on smaller
+@media #{variables.$medium-and-down} {
+  .sidenav {
+    &.sidenav-fixed {
+      transform: translateX(-105%);
+
+      &.right-aligned {
+        transform: translateX(105%);
+      }
+    }
+
+    > a {
+      padding: 0 variables.$sidenav-padding;
+    }
+
+    .user-view {
+      padding: variables.$sidenav-padding variables.$sidenav-padding 0;
+    }
+  }
+}
+
+
+.sidenav .collapsible-body > ul:not(.collapsible) > li.active,
+.sidenav.sidenav-fixed .collapsible-body > ul:not(.collapsible) > li.active {
+  background-color: variables.$primary-color;
+  a {
+    color: variables.$sidenav-bg-color;
+  }
+}
+.sidenav .collapsible-body {
+  padding: 0;
+}
+
+
+.sidenav-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  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/_slider.scss

@@ -0,0 +1,94 @@
+@use "variables";
+
+.slider {
+  position: relative;
+  height: 400px;
+  width: 100%;
+
+  // Fullscreen slider
+  &.fullscreen {
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+
+    ul.slides {
+      height: 100%;
+    }
+
+    ul.indicators {
+      z-index: 2;
+      bottom: 30px;
+    }
+  }
+
+  .slides {
+    background-color: variables.$slider-bg-color;
+    margin: 0;
+    height: 400px;
+
+    li {
+      opacity: 0;
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 1;
+      width: 100%;
+      height: inherit;
+      overflow: hidden;
+
+      img {
+        height: 100%;
+        width: 100%;
+        background-size: cover;
+        background-position: center;
+      }
+
+      .caption {
+        color: #fff;
+        position: absolute;
+        top: 15%;
+        left: 15%;
+        width: 70%;
+        opacity: 0;
+
+        p { color: variables.$slider-bg-color-light; }
+      }
+
+      &.active {
+        z-index: 2;
+      }
+    }
+  }
+
+
+  .indicators {
+    position: absolute;
+    text-align: center;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    margin: 0;
+
+    .indicator-item {
+      display: inline-block;
+      position: relative;
+      cursor: pointer;
+      height: 16px;
+      width: 16px;
+      margin: 0 12px;
+      background-color: variables.$slider-bg-color-light;
+
+      transition: background-color .3s;
+      border-radius: 50%;
+
+      &.active {
+        background-color: variables.$slider-indicator-color;
+      }
+    }
+  }
+
+}

package/sass/components/_table_of_contents.scss

@@ -0,0 +1,36 @@
+@use "sass:color";
+@use "variables";
+
+/***************
+    Nav List
+***************/
+.table-of-contents {
+  &.fixed {
+      position: fixed;
+    }
+
+  li {
+    padding: 2px 0;
+  }
+  a {
+    display: inline-block;
+    font-weight: 300;
+    color: #757575;
+    padding-left: 16px;
+    height: 1.5rem;
+    line-height: 1.5rem;
+    letter-spacing: .4;
+    display: inline-block;
+
+    &:hover {
+      color: color.adjust(#757575, $lightness: 20%);
+      padding-left: 15px;
+      border-left: 1px solid variables.$primary-color;
+    }
+    &.active {
+      font-weight: 500;
+      padding-left: 14px;
+      border-left: 2px solid variables.$primary-color;
+    }
+  }
+}

package/sass/components/_tabs.scss

@@ -0,0 +1,103 @@
+@use "sass:color";
+@use "variables";
+
+.tabs {
+  &.tabs-transparent {
+    background-color: transparent;
+
+    .tab a,
+    .tab.disabled a,
+    .tab.disabled a:hover {
+      color: rgba(255,255,255,0.7);
+    }
+
+    .tab a:hover,
+    .tab a.active {
+      color: #fff;
+    }
+
+    .indicator {
+      background-color: #fff;
+    }
+  }
+
+  &.tabs-fixed-width {
+    display: flex;
+
+    .tab {
+      flex-grow: 1;
+    }
+  }
+
+  position: relative;
+  overflow-x: auto;
+  overflow-y: hidden;
+  height: 48px;
+  width: 100%;
+  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;
+
+  .tab {
+    display: inline-block;
+    text-align: center;
+    line-height: 48px;
+    height: 48px;
+    padding: 0;
+    margin: 0;
+    text-transform: uppercase;
+
+    a {
+      &:focus,
+      &:focus.active {
+        background-color: color.adjust(variables.$tabs-underline-color, $alpha: -.8);
+        outline: none;
+      }
+
+      &:hover,
+      &.active {
+        background-color: transparent;
+        color: var(--mm-primary-color, variables.$tabs-text-color);
+      }
+
+      color: var(--mm-text-secondary, rgba(variables.$tabs-text-color, .7));
+      display: block;
+      width: 100%;
+      height: 100%;
+      padding: 0 24px;
+      font-size: 14px;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      transition: color .28s ease, background-color .28s ease;
+    }
+
+    &.disabled a,
+    &.disabled a:hover {
+      color: var(--mm-text-disabled, rgba(variables.$tabs-text-color, .4));
+      cursor: default;
+    }
+  }
+  .indicator {
+    position: absolute;
+    bottom: 0;
+    height: 2px;
+    background-color: variables.$tabs-underline-color;
+    will-change: left, right;
+  }
+}
+
+// Fixed Sidenav hide on smaller
+@media #{variables.$medium-and-down} {
+  .tabs {
+    display: flex;
+
+    .tab {
+      flex-grow: 1;
+
+      a {
+        padding: 0 12px;
+      }
+    }
+  }
+}

package/sass/components/_tapTarget.scss

@@ -0,0 +1,105 @@
+@use "variables";
+
+.tap-target-wrapper {
+  width: 800px;
+  height: 800px;
+  position: fixed;
+  z-index: 1000;
+  visibility: hidden;
+  transition: visibility 0s .3s;
+}
+
+.tap-target-wrapper.open {
+  visibility: visible;
+  transition: visibility 0s;
+
+  .tap-target {
+    transform: scale(1);
+    opacity: .95;
+    transition:
+      transform .3s cubic-bezier(.42,0,.58,1),
+      opacity .3s cubic-bezier(.42,0,.58,1);
+  }
+
+  .tap-target-wave::before {
+    transform: scale(1);
+  }
+  .tap-target-wave::after {
+    visibility: visible;
+    animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite;
+    transition:
+      opacity .3s,
+      transform .3s,
+      visibility 0s 1s;
+  }
+}
+
+.tap-target {
+  position: absolute;
+  font-size: 1rem;
+  border-radius: 50%;
+  background-color: variables.$primary-color;
+  box-shadow: 0 20px 20px 0 rgba(0,0,0,0.14), 0 10px 50px 0 rgba(0,0,0,0.12), 0 30px 10px -20px rgba(0,0,0,0.2);
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  transform: scale(0);
+  transition:
+    transform .3s cubic-bezier(.42,0,.58,1),
+    opacity .3s cubic-bezier(.42,0,.58,1);
+}
+
+.tap-target-content {
+  position: relative;
+  display: table-cell;
+}
+
+.tap-target-wave {
+  &::before,
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background-color: #ffffff;
+  }
+  &::before {
+    transform: scale(0);
+    transition: transform .3s;
+  }
+  &::after {
+    visibility: hidden;
+    transition:
+      opacity .3s,
+      transform .3s,
+      visibility 0s;
+    z-index: -1;
+  }
+
+  position: absolute;
+  border-radius: 50%;
+  z-index: 10001;
+}
+
+.tap-target-origin {
+  &:not(.btn),
+  &:not(.btn):hover {
+    background: none;
+  }
+
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%,-50%);
+
+  z-index: 10002;
+  position: absolute !important;
+}
+
+@media only screen and (max-width: 600px) {
+  .tap-target, .tap-target-wrapper {
+    width: 600px;
+    height: 600px;
+  }
+}