@shortfuse/materialdesignweb 0.4.0 → 0.7.0

package/components/menu/_spec.scss

@@ -1,362 +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: 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;
-  }
-}