@shortfuse/materialdesignweb 0.2.0 → 0.5.0

package/components/menu/_spec.scss

@@ -0,0 +1,329 @@
+// 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: 56px !default;
+
+:root {
+  --mdw-menu__transform-origin-inline-start: left;
+  --mdw-menu__transform-origin-inline-end: right;
+
+  &[dir="rtl"] {
+    --mdw-menu__transform-origin-inline-start: right;
+    --mdw-menu__transform-origin-inline-end: left;
+  }
+}
+
+/* @deprecated */
+.mdw-menu__wrapper {
+  display: inline-flex;
+  position: relative;
+}
+
+.mdw-menu__close {
+  position: fixed;
+  inset-block: 0 auto;
+  inset-inline: 0 auto;
+
+  block-size: 100%;
+  inline-size: 100%;
+
+  cursor: default;
+
+  pointer-events: inherit;
+
+  z-index: 8;
+}
+
+.mdw-menu {
+  --mdw-menu__transform-origin-x: var(--mdw-menu__transform-origin-inline-start); // Normal
+  --mdw-menu__transform-origin-y: top; // Down
+  display: block;
+  position: absolute;
+
+  // Default position is bottom
+  // Default direction is start
+
+  inset-block: 100% auto;
+  inset-inline: auto 0;
+
+  // Hide scrollbar
+  -ms-overflow-style: none;
+
+  // Scroll mask
+  overscroll-behavior: none;
+  overscroll-behavior: contain;
+  scrollbar-width: none;
+
+  pointer-events: none;
+
+  transition-duration: motion.$fadeOutDuration;
+  transition-property: none;
+  transition-timing-function: motion.$decelerateEasing;
+
+  transform-origin: var(--mdw-menu__transform-origin-x) var(--mdw-menu__transform-origin-y);
+  // visibility: visible;
+
+  &::after {
+    content: '';
+
+    display: block;
+
+    block-size: 200%;
+    inline-size: 200%;
+  }
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  /** Vertical Position */
+  &[mdw-position~="top"] {
+    inset-block: 0 auto;
+  }
+
+  &[mdw-position~="bottom"] {
+    inset-block: auto 0;
+  }
+
+  &[mdw-position~="vcenter"] {
+    inset-block: 50% auto;
+  }
+
+  /** Horizontal Position */
+  &[mdw-position~="start"] {
+    inset-inline: auto 100%;
+  }
+
+  &[mdw-position~="end"] {
+    inset-inline: 100% auto;
+  }
+
+  &[mdw-position~="left"] {
+    /* stylelint-disable-next-line liberty/use-logical-spec */
+    right: 100%;
+    /* stylelint-disable-next-line liberty/use-logical-spec */
+    left: auto;
+  }
+
+  &[mdw-position~="right"] {
+    /* stylelint-disable-next-line liberty/use-logical-spec */
+    right: auto;
+    left: 100%;
+  }
+
+  &[mdw-position~="hcenter"] {
+    inset-inline: 50% auto;
+  }
+
+  /** Vertical Direction */
+  &[mdw-direction~="down"] {
+    // --mdw-menu__transform-origin-y: top;
+  }
+
+  &[mdw-direction~="up"] {
+    --mdw-menu__transform-origin-y: bottom;
+  }
+
+  /** Horizontal Direction */
+  &[mdw-direction~="normal"] {
+    // --mdw-menu__transform-origin-x: var(--mdw-menu__transform-origin-inline-start);
+  }
+
+  &[mdw-direction~="reverse"] {
+    --mdw-menu__transform-origin-x: var(--mdw-menu__transform-origin-inline-end);
+  }
+
+  &[mdw-direction~="ltr"] {
+    --mdw-menu__transform-origin-x: left;
+  }
+
+  &[mdw-direction~="rtl"] {
+    --mdw-menu__transform-origin-x: right;
+  }
+
+  @for $i from 3 to 8 {
+    &[mdw-width-units="#{$i}"] {
+      .mdw-menu__popup {
+        inline-size: #{$unit-width * $i};
+      }
+    }
+  }
+}
+
+.mdw-menu__item-group {
+  display: flex;
+  flex-direction: column;
+}
+
+.mdw-menu__popup {
+  display: inline-flex;
+  position: absolute;
+  inset: inherit;
+  flex-direction: column;
+  -ms-overflow-style: -ms-autohiding-scrollbar;
+  overflow-y: auto;
+  overscroll-behavior: none;
+  overscroll-behavior: contain;
+  -ms-scroll-chaining: none;
+
+  max-block-size: 50vh;
+  min-inline-size: $unit-width * 2;
+  max-inline-size: $unit-width * 7;
+  margin-inline: 8px;
+  padding-block: 8px;
+
+  outline: none;
+  pointer-events: inherit;
+
+  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;
+  transform: scale(0);
+  transform-origin: inherit;
+  z-index: 8;
+
+  border-radius: 4px;
+  box-shadow: elevation.boxShadow(0);
+}
+
+.mdw-menu[mdw-menu-js] {
+  position: fixed;
+  inset-block: 0 auto;
+  inset-inline: 0 auto;
+  overflow-y: scroll;
+
+  block-size: 100%;
+  inline-size: 100%;
+  margin: 0;
+
+  cursor: default;
+
+  z-index: 8;
+
+  .mdw-menu__close {
+    display: none;
+  }
+
+  .mdw-menu__popup {
+    margin: 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-inline-size: 40px;
+}
+
+.mdw-menu__check,
+.mdw-menu__radio {
+  visibility: hidden;
+
+  &[aria-hidden="true"] {
+    display: none;
+  }
+
+  .mdw-menu__item[aria-checked="true"] & {
+    visibility: visible;
+  }
+}
+
+.mdw-menu__popup > .mdw-divider {
+  block-size: 1px;
+  margin-block: 7px 8px;
+}
+
+.mdw-menu__item {
+  @include type.addRules('body');
+  display: flex;
+  position: relative;
+  align-items: center;
+  flex-direction: row;
+  overflow: hidden;
+
+  box-sizing: border-box;
+
+  min-block-size: 48px;
+  padding-inline: 16px;
+
+  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"] {
+    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+    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-block-size: 32px;
+    padding-inline: 24px;
+  }
+}
+
+@include platform.ifNoTouch() {
+  .mdw-menu:not([mdw-dense="never"]) {
+    .mdw-menu__item {
+      min-block-size: 32px;
+      padding-inline: 24px;
+    }
+  }
+}
+
+.mdw-menu__info {
+  padding-inline: 16px 0;
+
+  text-align: end;
+}
+
+.mdw-menu[aria-hidden="false"],
+.mdw-menu[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;
+    }
+  }
+
+}