liquid_feedback_frontend
view style/mdl/menu/_menu.scss @ 1309:32cc544d5a5b
Cumulative patch for upcoming frontend version 4
| author | bsw/jbe |
|---|---|
| date | Sun Jul 15 14:07:29 2018 +0200 (2018-07-15) |
| parents | |
| children |
line source
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 */
17 @import "../variables";
18 @import "../mixins";
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;
32 &.is-visible,
33 &.is-animating {
34 z-index: 999;
35 visibility: visible;
36 }
37 }
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;
59 .mdl-menu__container.is-visible & {
60 opacity: 1;
61 transform: scale(1);
62 z-index: 999;
63 }
65 &.mdl-menu--bottom-right {
66 transform-origin: 100% 0;
67 }
69 &.mdl-menu--top-left {
70 transform-origin: 0 100%;
71 }
73 &.mdl-menu--top-right {
74 transform-origin: 100% 100%;
75 }
76 }
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;
92 .mdl-menu__container.is-visible & {
93 opacity: 1;
94 z-index: 999;
95 }
97 &.is-animating {
98 transition: opacity $menu-fade-duration $animation-curve-default,
99 clip $menu-expand-duration $animation-curve-default;
100 }
102 &.mdl-menu--bottom-right {
103 left: auto;
104 right: 0;
105 }
107 &.mdl-menu--top-left {
108 top: auto;
109 bottom: 0;
110 }
112 &.mdl-menu--top-right {
113 top: auto;
114 left: auto;
115 bottom: 0;
116 right: 0;
117 }
119 &.mdl-menu--unaligned {
120 top: auto;
121 left: auto;
122 }
123 }
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;
146 .mdl-menu__container.is-visible & {
147 opacity: 1;
148 }
150 &::-moz-focus-inner {
151 border: 0;
152 }
154 &--full-bleed-divider {
155 border-bottom: 1px solid $default-item-divider-color;
156 }
158 &[disabled], &[data-mdl-disabled] {
159 color: $disabled-item-text-color;
160 background-color: transparent;
161 cursor: auto;
163 &:hover {
164 background-color: transparent;
165 }
167 &:focus {
168 background-color: transparent;
169 }
171 & .mdl-ripple {
172 background: transparent;
173 }
174 }
176 &:hover {
177 background-color: $default-item-hover-bg-color;
178 }
180 &:focus {
181 outline: none;
182 background-color: $default-item-focus-bg-color;
183 }
185 &:active {
186 background-color: $default-item-active-bg-color;
187 }
188 }
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 }