bsw/jbe@1309: /**
bsw/jbe@1309:  * Copyright 2015 Google Inc. All Rights Reserved.
bsw/jbe@1309:  *
bsw/jbe@1309:  * Licensed under the Apache License, Version 2.0 (the "License");
bsw/jbe@1309:  * you may not use this file except in compliance with the License.
bsw/jbe@1309:  * You may obtain a copy of the License at
bsw/jbe@1309:  *
bsw/jbe@1309:  *      http://www.apache.org/licenses/LICENSE-2.0
bsw/jbe@1309:  *
bsw/jbe@1309:  * Unless required by applicable law or agreed to in writing, software
bsw/jbe@1309:  * distributed under the License is distributed on an "AS IS" BASIS,
bsw/jbe@1309:  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
bsw/jbe@1309:  * See the License for the specific language governing permissions and
bsw/jbe@1309:  * limitations under the License.
bsw/jbe@1309:  */
bsw/jbe@1309: 
bsw/jbe@1309: @import "../variables";
bsw/jbe@1309: @import "../mixins";
bsw/jbe@1309: 
bsw/jbe@1309: .mdl-menu__container {
bsw/jbe@1309:   display: block;
bsw/jbe@1309:   margin: 0;
bsw/jbe@1309:   padding: 0;
bsw/jbe@1309:   border: none;
bsw/jbe@1309:   position: absolute;
bsw/jbe@1309:   overflow: visible;
bsw/jbe@1309:   height: 0;
bsw/jbe@1309:   width: 0;
bsw/jbe@1309:   visibility: hidden;
bsw/jbe@1309:   z-index: -1;
bsw/jbe@1309: 
bsw/jbe@1309:   &.is-visible,
bsw/jbe@1309:   &.is-animating {
bsw/jbe@1309:     z-index: 999;
bsw/jbe@1309:     visibility: visible;
bsw/jbe@1309:   }
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: .mdl-menu__outline {
bsw/jbe@1309:   display: block;
bsw/jbe@1309:   background: $default-dropdown-bg-color;
bsw/jbe@1309:   margin: 0;
bsw/jbe@1309:   padding: 0;
bsw/jbe@1309:   border: none;
bsw/jbe@1309:   border-radius: 2px;
bsw/jbe@1309:   position: absolute;
bsw/jbe@1309:   top: 0;
bsw/jbe@1309:   left: 0;
bsw/jbe@1309:   overflow: hidden;
bsw/jbe@1309:   opacity: 0;
bsw/jbe@1309:   transform: scale(0);
bsw/jbe@1309:   transform-origin: 0 0;
bsw/jbe@1309:   @include shadow-2dp();
bsw/jbe@1309:   will-change: transform;
bsw/jbe@1309:   transition: transform $menu-expand-duration $animation-curve-default,
bsw/jbe@1309:       opacity $menu-fade-duration $animation-curve-default;
bsw/jbe@1309:   z-index: -1;
bsw/jbe@1309: 
bsw/jbe@1309:   .mdl-menu__container.is-visible & {
bsw/jbe@1309:     opacity: 1;
bsw/jbe@1309:     transform: scale(1);
bsw/jbe@1309:     z-index: 999;
bsw/jbe@1309:   }
bsw/jbe@1309: 
bsw/jbe@1309:   &.mdl-menu--bottom-right {
bsw/jbe@1309:     transform-origin: 100% 0;
bsw/jbe@1309:   }
bsw/jbe@1309: 
bsw/jbe@1309:   &.mdl-menu--top-left {
bsw/jbe@1309:     transform-origin: 0 100%;
bsw/jbe@1309:   }
bsw/jbe@1309: 
bsw/jbe@1309:   &.mdl-menu--top-right {
bsw/jbe@1309:     transform-origin: 100% 100%;
bsw/jbe@1309:   }
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: .mdl-menu {
bsw/jbe@1309:   position: absolute;
bsw/jbe@1309:   list-style: none;
bsw/jbe@1309:   top: 0;
bsw/jbe@1309:   left: 0;
bsw/jbe@1309:   height: auto;
bsw/jbe@1309:   width: auto;
bsw/jbe@1309:   min-width: 124px;
bsw/jbe@1309:   padding: 8px 0;
bsw/jbe@1309:   margin: 0;
bsw/jbe@1309:   opacity: 0;
bsw/jbe@1309:   clip: rect(0 0 0 0);
bsw/jbe@1309:   z-index: -1;
bsw/jbe@1309: 
bsw/jbe@1309:   .mdl-menu__container.is-visible & {
bsw/jbe@1309:     opacity: 1;
bsw/jbe@1309:     z-index: 999;
bsw/jbe@1309:   }
bsw/jbe@1309: 
bsw/jbe@1309:   &.is-animating {
bsw/jbe@1309:     transition: opacity $menu-fade-duration $animation-curve-default,
bsw/jbe@1309:         clip $menu-expand-duration $animation-curve-default;
bsw/jbe@1309:   }
bsw/jbe@1309: 
bsw/jbe@1309:   &.mdl-menu--bottom-right {
bsw/jbe@1309:     left: auto;
bsw/jbe@1309:     right: 0;
bsw/jbe@1309:   }
bsw/jbe@1309: 
bsw/jbe@1309:   &.mdl-menu--top-left {
bsw/jbe@1309:     top: auto;
bsw/jbe@1309:     bottom: 0;
bsw/jbe@1309:   }
bsw/jbe@1309: 
bsw/jbe@1309:   &.mdl-menu--top-right {
bsw/jbe@1309:     top: auto;
bsw/jbe@1309:     left: auto;
bsw/jbe@1309:     bottom: 0;
bsw/jbe@1309:     right: 0;
bsw/jbe@1309:   }
bsw/jbe@1309: 
bsw/jbe@1309:   &.mdl-menu--unaligned {
bsw/jbe@1309:     top: auto;
bsw/jbe@1309:     left: auto;
bsw/jbe@1309:   }
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: .mdl-menu__item {
bsw/jbe@1309:   display: block;
bsw/jbe@1309:   border: none;
bsw/jbe@1309:   color: $default-item-text-color;
bsw/jbe@1309:   background-color: transparent;
bsw/jbe@1309:   text-align: left;
bsw/jbe@1309:   margin: 0;
bsw/jbe@1309:   padding: 0 16px;
bsw/jbe@1309:   outline-color: $default-item-outline-color;
bsw/jbe@1309:   position: relative;
bsw/jbe@1309:   overflow: hidden;
bsw/jbe@1309:   @include typo-body-1();
bsw/jbe@1309:   text-decoration: none;
bsw/jbe@1309:   cursor: pointer;
bsw/jbe@1309:   height: 48px;
bsw/jbe@1309:   line-height: 48px;
bsw/jbe@1309:   white-space: nowrap;
bsw/jbe@1309:   opacity: 0;
bsw/jbe@1309:   transition: opacity $menu-fade-duration $animation-curve-default;
bsw/jbe@1309:   user-select: none;
bsw/jbe@1309: 
bsw/jbe@1309:   .mdl-menu__container.is-visible & {
bsw/jbe@1309:     opacity: 1;
bsw/jbe@1309:   }
bsw/jbe@1309: 
bsw/jbe@1309:   &::-moz-focus-inner {
bsw/jbe@1309:     border: 0;
bsw/jbe@1309:   }
bsw/jbe@1309: 
bsw/jbe@1309:   &--full-bleed-divider {
bsw/jbe@1309:     border-bottom: 1px solid $default-item-divider-color;
bsw/jbe@1309:   }
bsw/jbe@1309: 
bsw/jbe@1309:   &[disabled], &[data-mdl-disabled] {
bsw/jbe@1309:     color: $disabled-item-text-color;
bsw/jbe@1309:     background-color: transparent;
bsw/jbe@1309:     cursor: auto;
bsw/jbe@1309: 
bsw/jbe@1309:     &:hover {
bsw/jbe@1309:       background-color: transparent;
bsw/jbe@1309:     }
bsw/jbe@1309: 
bsw/jbe@1309:     &:focus {
bsw/jbe@1309:       background-color: transparent;
bsw/jbe@1309:     }
bsw/jbe@1309: 
bsw/jbe@1309:     & .mdl-ripple {
bsw/jbe@1309:       background: transparent;
bsw/jbe@1309:     }
bsw/jbe@1309:   }
bsw/jbe@1309: 
bsw/jbe@1309:   &:hover {
bsw/jbe@1309:     background-color: $default-item-hover-bg-color;
bsw/jbe@1309:   }
bsw/jbe@1309: 
bsw/jbe@1309:   &:focus {
bsw/jbe@1309:     outline: none;
bsw/jbe@1309:     background-color: $default-item-focus-bg-color;
bsw/jbe@1309:   }
bsw/jbe@1309: 
bsw/jbe@1309:   &:active {
bsw/jbe@1309:     background-color: $default-item-active-bg-color;
bsw/jbe@1309:   }
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: 
bsw/jbe@1309: .mdl-menu__item--ripple-container {
bsw/jbe@1309:   display: block;
bsw/jbe@1309:   height: 100%;
bsw/jbe@1309:   left: 0px;
bsw/jbe@1309:   position: absolute;
bsw/jbe@1309:   top: 0px;
bsw/jbe@1309:   width: 100%;
bsw/jbe@1309:   z-index: 0;
bsw/jbe@1309:   overflow: hidden;
bsw/jbe@1309: }