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