liquid_feedback_frontend
annotate style/mdl/tooltip/_tooltip.scss @ 1345:4ad5104c0cb5
Open registration image in new window
| author | bsw |
|---|---|
| date | Fri Aug 03 17:50:26 2018 +0200 (2018-08-03) |
| 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 |
| bsw/jbe@1309 | 19 .mdl-tooltip { |
| bsw/jbe@1309 | 20 transform: scale(0); |
| bsw/jbe@1309 | 21 transform-origin: top center; |
| bsw/jbe@1309 | 22 z-index: 999; |
| bsw/jbe@1309 | 23 background: $tooltip-background-color; |
| bsw/jbe@1309 | 24 border-radius: 2px; |
| bsw/jbe@1309 | 25 color: $tooltip-text-color; |
| bsw/jbe@1309 | 26 display: inline-block; |
| bsw/jbe@1309 | 27 font-size: $tooltip-font-size; |
| bsw/jbe@1309 | 28 font-weight: 500; |
| bsw/jbe@1309 | 29 line-height: 14px; |
| bsw/jbe@1309 | 30 max-width: 170px; |
| bsw/jbe@1309 | 31 position: fixed; |
| bsw/jbe@1309 | 32 top: -500px; |
| bsw/jbe@1309 | 33 left: -500px; |
| bsw/jbe@1309 | 34 padding: 8px; |
| bsw/jbe@1309 | 35 text-align: center; |
| bsw/jbe@1309 | 36 } |
| bsw/jbe@1309 | 37 .mdl-tooltip.is-active { |
| bsw/jbe@1309 | 38 animation: pulse 200ms $animation-curve-linear-out-slow-in forwards; |
| bsw/jbe@1309 | 39 } |
| bsw/jbe@1309 | 40 |
| bsw/jbe@1309 | 41 .mdl-tooltip--large { |
| bsw/jbe@1309 | 42 line-height: 14px; |
| bsw/jbe@1309 | 43 font-size: $tooltip-font-size-large; |
| bsw/jbe@1309 | 44 padding: 16px; |
| bsw/jbe@1309 | 45 } |
| bsw/jbe@1309 | 46 |
| bsw/jbe@1309 | 47 @keyframes pulse { |
| bsw/jbe@1309 | 48 0% { |
| bsw/jbe@1309 | 49 transform: scale(0); |
| bsw/jbe@1309 | 50 opacity: 0; |
| bsw/jbe@1309 | 51 } |
| bsw/jbe@1309 | 52 50% { |
| bsw/jbe@1309 | 53 // Fixes a weird bug with the interaction between Safari and the result of |
| bsw/jbe@1309 | 54 // the SASS compilation for the animation. |
| bsw/jbe@1309 | 55 // Essentially, we need to make sure that "50%" and "100%" don't get merged |
| bsw/jbe@1309 | 56 // into a single "50%, 100%" entry, so we need to avoid them having any |
| bsw/jbe@1309 | 57 // matching properties. |
| bsw/jbe@1309 | 58 transform: scale(0.99); |
| bsw/jbe@1309 | 59 } |
| bsw/jbe@1309 | 60 100% { |
| bsw/jbe@1309 | 61 transform: scale(1); |
| bsw/jbe@1309 | 62 opacity: 1; |
| bsw/jbe@1309 | 63 visibility: visible; |
| bsw/jbe@1309 | 64 } |
| bsw/jbe@1309 | 65 } |