third_party/ot-br-posix/repo/third_party/mdl/repo/src/menu/_menu.scss

   1 /**
   2  * Copyright 2015 Google Inc. All Rights Reserved.
   3  *
   4  * Licensed under the Apache License, Version 2.0 (the "License");
   5  * you may not use this file except in compliance with the License.
   6  * You may obtain a copy of the License at
   7  *
   8  *      http://www.apache.org/licenses/LICENSE-2.0
   9  *
  10  * Unless required by applicable law or agreed to in writing, software
  11  * distributed under the License is distributed on an "AS IS" BASIS,
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13  * See the License for the specific language governing permissions and
  14  * limitations under the License.
  15  */
  16
  17 @import "../variables";
  18 @import "../mixins";
  19
  20 .mdl-menu__container {
  21   display: block;
  22   margin: 0;
  23   padding: 0;
  24   border: none;
  25   position: absolute;
  26   overflow: visible;
  27   height: 0;
  28   width: 0;
  29   visibility: hidden;
  30   z-index: -1;
  31
  32   &.is-visible,
  33   &.is-animating {
  34     z-index: 999;
  35     visibility: visible;
  36   }
  37 }
  38
  39 .mdl-menu__outline {
  40   display: block;
  41   background: $default-dropdown-bg-color;
  42   margin: 0;
  43   padding: 0;
  44   border: none;
  45   border-radius: 2px;
  46   position: absolute;
  47   top: 0;
  48   left: 0;
  49   overflow: hidden;
  50   opacity: 0;
  51   transform: scale(0);
  52   transform-origin: 0 0;
  53   @include shadow-2dp();
  54   will-change: transform;
  55   transition: transform $menu-expand-duration $animation-curve-default,
  56       opacity $menu-fade-duration $animation-curve-default;
  57   z-index: -1;
  58
  59   .mdl-menu__container.is-visible & {
  60     opacity: 1;
  61     transform: scale(1);
  62     z-index: 999;
  63   }
  64
  65   &.mdl-menu--bottom-right {
  66     transform-origin: 100% 0;
  67   }
  68
  69   &.mdl-menu--top-left {
  70     transform-origin: 0 100%;
  71   }
  72
  73   &.mdl-menu--top-right {
  74     transform-origin: 100% 100%;
  75   }
  76 }
  77
  78 .mdl-menu {
  79   position: absolute;
  80   list-style: none;
  81   top: 0;
  82   left: 0;
  83   height: auto;
  84   width: auto;
  85   min-width: 124px;
  86   padding: 8px 0;
  87   margin: 0;
  88   opacity: 0;
  89   clip: rect(0 0 0 0);
  90   z-index: -1;
  91
  92   .mdl-menu__container.is-visible & {
  93     opacity: 1;
  94     z-index: 999;
  95   }
  96
  97   &.is-animating {
  98     transition: opacity $menu-fade-duration $animation-curve-default,
  99         clip $menu-expand-duration $animation-curve-default;
 100   }
 101
 102   &.mdl-menu--bottom-right {
 103     left: auto;
 104     right: 0;
 105   }
 106
 107   &.mdl-menu--top-left {
 108     top: auto;
 109     bottom: 0;
 110   }
 111
 112   &.mdl-menu--top-right {
 113     top: auto;
 114     left: auto;
 115     bottom: 0;
 116     right: 0;
 117   }
 118
 119   &.mdl-menu--unaligned {
 120     top: auto;
 121     left: auto;
 122   }
 123 }
 124
 125 .mdl-menu__item {
 126   display: block;
 127   border: none;
 128   color: $default-item-text-color;
 129   background-color: transparent;
 130   text-align: left;
 131   margin: 0;
 132   padding: 0 16px;
 133   outline-color: $default-item-outline-color;
 134   position: relative;
 135   overflow: hidden;
 136   @include typo-body-1();
 137   text-decoration: none;
 138   cursor: pointer;
 139   height: 48px;
 140   line-height: 48px;
 141   white-space: nowrap;
 142   opacity: 0;
 143   transition: opacity $menu-fade-duration $animation-curve-default;
 144   user-select: none;
 145
 146   .mdl-menu__container.is-visible & {
 147     opacity: 1;
 148   }
 149
 150   &::-moz-focus-inner {
 151     border: 0;
 152   }
 153
 154   &--full-bleed-divider {
 155     border-bottom: 1px solid $default-item-divider-color;
 156   }
 157
 158   &[disabled], &[data-mdl-disabled] {
 159     color: $disabled-item-text-color;
 160     background-color: transparent;
 161     cursor: auto;
 162
 163     &:hover {
 164       background-color: transparent;
 165     }
 166
 167     &:focus {
 168       background-color: transparent;
 169     }
 170
 171     & .mdl-ripple {
 172       background: transparent;
 173     }
 174   }
 175
 176   &:hover {
 177     background-color: $default-item-hover-bg-color;
 178   }
 179
 180   &:focus {
 181     outline: none;
 182     background-color: $default-item-focus-bg-color;
 183   }
 184
 185   &:active {
 186     background-color: $default-item-active-bg-color;
 187   }
 188 }
 189
 190
 191 .mdl-menu__item--ripple-container {
 192   display: block;
 193   height: 100%;
 194   left: 0px;
 195   position: absolute;
 196   top: 0px;
 197   width: 100%;
 198   z-index: 0;
 199   overflow: hidden;
 200 }