kmaterialize 2.0.0 → 2.3.3-1.0.0

package/components/navigation-drawer/_sidenav.scss

@@ -0,0 +1,247 @@
+@use '../../sass/variables' as *;
+@use '../../sass/global' as *;
+
+.sidenav {
+  --sidenav-width: 300px;
+  --sidenav-font-size: 14px;
+  --sidenav-padding: 16px;
+  --sidenav-item-height: 48px;
+  --sidenav-line-height: var(--sidenav-item-height);
+
+  position: fixed;
+  width: var(--sidenav-width);
+  left: 0;
+  top: 0;
+  margin: 0;
+  transform: translateX(-100%);
+  height: 100vh;
+  padding: 0;
+  z-index: 999;
+  overflow-y: auto;
+  will-change: transform;
+  backface-visibility: hidden;
+  transform: translateX(-105%); 
+  user-select: none;
+  
+  color: var(--md-sys-color-on-secondary-container);
+  background-color: var(--md-sys-color-surface);
+  @extend .z-depth-1;
+
+  // Right Align
+  &.right-aligned {
+    right: 0;
+    transform: translateX(105%);
+    left: auto;
+    transform: translateX(100%);
+  }
+
+  .collapsible {
+    margin: 0;
+  }
+
+  /* Hover only on top row */
+  /*a:hover {
+    //color: red;
+    //background-color: var(--md-sys-color-on-secondary-container);
+    //md.sys.color.on-secondary-container
+  }*/
+  a:focus {
+    background-color: rgba(0, 0, 0, 0.12);
+  }
+
+  li.active > a:not(.collapsible-header):not(.btn):not(.btn-large):not(.btn-small):not(.btn-flat):not(.btn-large):not(.btn-floating)  {
+    //color: var(--md-sys-color-on-secondary-container); //var(--md-sys-color-on-secondary-container);
+    //background-color: var(--md-sys-color-secondary-container);
+    background-color: color-mix(in srgb, var(--md-sys-color-secondary) 10%, transparent);
+  }
+
+  .collapsible-body > ul { padding-left: 10px; }
+
+  li {    
+    list-style: none;
+    display: grid;
+    align-content: center;
+  }
+  li > a {
+    /* https://stackoverflow.com/questions/5848090/full-width-hover-background-for-nested-lists */
+    //padding-left: calc(100% + var(--sidenav-padding));
+    //margin-left: -100%;
+    margin: 0 12px;
+    padding: 0 var(--sidenav-padding);
+    //padding-left: var(--sidenav-padding);
+    // Truncate too long text
+    /*
+    min-width: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    */
+    display: flex;
+    height: var(--sidenav-item-height);
+    font-size: var(--sidenav-font-size);
+    font-weight: 500;
+    align-items: center;
+    overflow: hidden;
+    border-radius: 100px;
+
+    &:not(.btn):not(.btn-flat):not(.btn-large):not(.btn-floating) {
+      color: var(--md-sys-color-on-secondary-container);
+      &:hover {
+        //color: var(--md-sys-color-on-secondary-container);
+        //md.sys.color.on-secondary-container
+        background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
+      }
+    }
+
+    &.btn, &.btn-large, &.btn-flat, &.btn-floating {
+      margin: 10px 15px;
+    }
+
+    /* TODO: Use special class in future like "mw-icon" */
+    & > .material-icons, & > .material-symbols-outlined,
+    & > .material-symbols-rounded, & > .material-symbols-sharp {
+      display: inline-flex;
+      vertical-align: middle;
+      margin-right: 12px;
+    }
+  }
+
+  .divider {
+    margin: calc(var(--sidenav-padding) * 0.5) 0 0 0;
+  }
+
+  .subheader {
+    cursor: initial;
+    pointer-events: none;
+    color: red;
+    font-size: var(--sidenav-font-size);
+    font-weight: 500;
+    line-height: var(--sidenav-line-height);
+  }
+
+  // Remove this? is very custom
+  .user-view {
+    position: relative;
+    padding: calc(var(--sidenav-padding) * 2) calc(var(--sidenav-padding) * 2) 0;
+    margin-bottom: calc(var(--sidenav-padding) * 0.5);
+
+    & > a {
+      height: auto;
+      padding: 0;
+
+      &:hover {
+        background-color: transparent;
+      }
+    }
+
+    .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: var(--sidenav-font-size);
+      line-height: calc(var(--sidenav-line-height) * 0.5);
+    }
+
+    .name {
+      margin-top: 16px;
+      font-weight: 500;
+    }
+
+    .email {
+      padding-bottom: 16px;
+      font-weight: 400;
+    }
+  }
+}
+
+// Touch interaction
+.drag-target {
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 998;
+
+  &.right-aligned {
+    right: 0;
+  }
+}
+
+// Fixed Sidenav shown
+.sidenav.sidenav-fixed {
+  left: 0;
+  transform: translateX(0);
+  position: fixed;
+
+  &.right-aligned {
+    right: 0;
+    left: auto;
+  }
+}
+
+// Fixed Sidenav hide on smaller
+@media #{$medium-and-down} {
+  .sidenav {
+    &.sidenav-fixed {
+      transform: translateX(-105%);
+
+      &.right-aligned {
+        transform: translateX(105%);
+      }
+    }
+    > a {
+      padding: 0 var(--sidenav-padding);
+    }
+    .user-view {
+      padding: var(--sidenav-padding) var(--sidenav-padding) 0;
+    }
+  }
+}
+
+.sidenav .collapsible-body {
+  padding: 0;
+}
+
+.sidenav-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  opacity: 0;
+  height: 120vh;
+  background-color: rgba(0, 0, 0, .5);
+  z-index: 997;
+  display: none;
+}
+
+// Sidenav collapsible styling (Taken from Collapsible.scss)
+.sidenav,
+.sidenav.sidenav-fixed {
+  .collapsible {
+    border: none;
+    box-shadow: none;
+  }
+  .collapsible-header {
+    border: none;
+  }
+  .collapsible-body {
+    border: none;
+  }
+}