@shortfuse/materialdesignweb 0.0.9 → 0.4.0

package/components/menu/_spec.scss

@@ -0,0 +1,362 @@
+// https://material.io/guidelines/components/menus.html
+
+@use '../../core/_breakpoint.scss' as breakpoint;
+@use '../../core/_elevation.scss' as elevation;
+@use '../../core/_length.scss' as *;
+@use '../../core/_motion.scss' as motion;
+@use '../../core/_platform.scss' as platform;
+@use '../../core/_type.scss' as type;
+
+$unit-width: dp(56) !default;
+
+/* @deprecated */
+.mdw-menu__wrapper {
+  display: inline-flex;
+  position: relative;
+}
+
+.mdw-menu__close {
+  position: fixed;
+  top: 0;
+  left: 0;
+
+  height: 100%;
+  width: 100%;
+
+  cursor: default;
+
+  pointer-events: inherit;
+  z-index: 8;
+}
+
+.mdw-menu {
+  display: block;
+  position: absolute;
+
+  // Default position is bottom
+  // Default direction is start
+
+  top: 100%;
+  right: auto;
+  bottom: auto;
+  left: 0;
+
+  // Hide scrollbar
+  -ms-overflow-style: none;
+
+  // Scroll mask
+  overscroll-behavior: none;
+  overscroll-behavior: contain;
+  -ms-scroll-chaining: none;
+  scrollbar-width: none;
+
+  transition-duration: motion.$fadeOutDuration;
+  transition-property: none;
+  transition-timing-function: motion.$decelerateEasing;
+
+  pointer-events: none;
+  transform-origin: left top;
+  // visibility: visible;
+
+  :root[dir="rtl"] & {
+    right: 0;
+    left: auto;
+
+    transform-origin: right top;
+  }
+
+  &::after {
+    display: block;
+
+    height: 200%;
+    width: 200%;
+    content: '';
+  }
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  &[aria-hidden="false"],
+  &[id]:target {
+    
+
+    pointer-events: auto;
+
+    .mdw-menu__popup {
+      // Instant on desktop
+      transition-delay: 0s;
+      transition-duration: 0s;
+      transition-property: box-shadow, opacity, transform;
+      transition-timing-function: motion.$accelerateEasing;
+
+      opacity: 1;
+      transform: scale(1);
+
+      visibility: visible;
+
+      box-shadow: elevation.boxShadow(8);
+      @include breakpoint.maxTabletDevice {
+        transition-duration: motion.$expandDuration;
+      }
+    }
+    
+  }
+
+  &[mdw-position~="top"] {
+    top: 0;
+  }
+
+  &[mdw-position~="vcenter"] {
+    top: 50%;
+  }
+
+  &[mdw-position~="hcenter"] {
+    left: 50%;
+  }
+
+  &[mdw-position~="right"],
+  &[mdw-position~="end"] {
+    right: auto;
+    left: 100%;
+
+    :root[dir="rtl"] & {
+      right: 100%;
+      left: auto;
+    }
+  }
+
+  &[mdw-direction~="reverse"],
+  &[mdw-direction~="rtl"] {
+    right: 100%;
+    left: auto;
+
+    transform-origin: right top;
+
+    :root[dir="rtl"] & {
+      right: auto;
+      left: 100%;
+
+      transform-origin: left top;
+    }
+
+    &[mdw-position~="right"],
+    &[mdw-position~="end"] {
+      right: 0;
+      left: auto;
+
+      :root[dir="rtl"] & {
+        right: auto;
+        left: 0;
+      }
+    }
+  }
+
+  &[mdw-direction~="up"] {
+    top: auto;
+    bottom: 0;
+
+    transform-origin: left bottom;
+
+    :root[dir="rtl"] & {
+      transform-origin: right bottom;
+    }
+
+    &[mdw-position~="top"] {
+      bottom: 100%;
+    }
+
+    &[mdw-position~="vcenter"] {
+      bottom: 50%;
+    }
+
+    &[mdw-direction~="reverse"],
+    &[mdw-direction~="rtl"] {
+      transform-origin: right bottom;
+
+      :root[dir="rtl"] & {
+        transform-origin: left bottom;
+      }
+    }
+  }
+  @for $i from 3 to 8 {
+    &[mdw-width-units="#{$i}"] {
+      .mdw-menu__popup {
+        width: #{$unit-width * $i};
+      }
+    }
+  }
+}
+
+.mdw-menu[mdw-menu-js] {
+  position: fixed;
+  top: 0;
+  right: auto;
+  bottom: auto;
+  left: 0;
+  overflow-y: scroll;
+  
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  
+  cursor: default;
+  
+  z-index: 8;
+
+  :root[dir="rtl"] & {
+    right: 0;
+    left: auto;
+  }
+
+  .mdw-menu__close {
+    display: none;
+  }
+
+  .mdw-menu__popup {
+    margin: 0;
+  }
+}
+
+.mdw-menu__item-group {
+  display: flex;
+  flex-direction: column;
+}
+
+.mdw-menu__popup {
+  display: inline-flex;
+  position: absolute;
+  top: inherit;
+  right: inherit;
+  bottom: inherit;
+  left: inherit;
+  flex-direction: column;
+  -ms-overflow-style: -ms-autohiding-scrollbar;
+  overflow-y: auto;
+  overscroll-behavior: none;
+  overscroll-behavior: contain;
+  -ms-scroll-chaining: none;
+
+  max-height: 50vh;
+  min-width: $unit-width * 2;
+  max-width: $unit-width * 7;
+  margin-right: dp(8);
+  margin-left: dp(8);
+  padding-top: dp(8);
+  padding-bottom: dp(8);
+
+  outline: none;
+
+  transition-delay: 0s, 0s, motion.$fadeOutDuration, motion.$fadeOutDuration;
+  transition-duration: motion.$fadeOutDuration;
+  transition-property: box-shadow, opacity, transform, visibility;
+  transition-timing-function: motion.$accelerateEasing;
+
+  opacity: 0;
+  pointer-events: inherit;
+  transform: scale(0);
+  transform-origin: inherit;
+  z-index: 8;
+
+  border-radius: dp(4);
+  box-shadow: elevation.boxShadow(0);
+}
+
+.mdw-menu__text {
+  overflow-x: hidden;
+
+  flex: auto;
+
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mdw-menu__icon,
+.mdw-menu__check,
+.mdw-menu__radio {
+  min-width: dp(40);
+}
+
+.mdw-menu__check,
+.mdw-menu__radio {
+  &[aria-hidden="true"] {
+    display: none;
+  }
+  
+  visibility: hidden;
+
+  .mdw-menu__item[aria-checked="true"] & {
+    visibility: visible;
+  }
+}
+
+.mdw-menu__popup > .mdw-divider {
+  height: dp(1);
+  margin-top: dp(7);
+  margin-bottom: dp(8);
+}
+
+.mdw-menu__item {
+  @include type.addRules('body');
+  display: flex;
+  position: relative;
+  align-items: center;
+  flex-direction: row;
+  overflow: hidden;
+
+  box-sizing: border-box;
+
+
+  min-height: dp(48);
+  padding-right: dp(16);
+  padding-left: dp(16);
+
+  cursor: pointer;
+  outline: none;
+  -webkit-tap-highlight-color: transparent;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
+
+  z-index: 0;
+
+  &[aria-disabled="true"] {
+    cursor: not-allowed;
+  }
+}
+
+// Density based on dropdown, explicit attr, or no touch support
+.mdw-menu[mdw-dense]:not([mdw-dense="never"]),
+.mdw-menu[mdw-dropdown] {
+  .mdw-menu__item {
+    min-height: dp(32);
+    padding-right: dp(24);
+    padding-left: dp(24);
+  }
+}
+@include platform.ifNoTouch() {
+  .mdw-menu:not([mdw-dense="never"]) {
+    .mdw-menu__item {
+      min-height: dp(32);
+      padding-right: dp(24);
+      padding-left: dp(24);
+    }
+  }
+}
+
+.mdw-menu__info {
+  padding-right: 0;
+  padding-left: dp(16);
+
+  text-align: right;
+  text-align: end;
+
+  :root[dir="rtl"] & {
+    padding-right: dp(16);
+    padding-left: 0;
+
+    text-align: left;
+    text-align: end;
+  }
+}