@shortfuse/materialdesignweb 0.5.0 → 0.7.0

package/components/menu/_spec.scss

@@ -1,329 +0,0 @@
-// 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;
-    }
-  }
-
-}