liquid_feedback_frontend
diff style/mdl/snackbar/_snackbar.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 diff
1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 1.2 +++ b/style/mdl/snackbar/_snackbar.scss Sun Jul 15 14:07:29 2018 +0200 1.3 @@ -0,0 +1,89 @@ 1.4 +/** 1.5 + * Copyright 2015 Google Inc. All Rights Reserved. 1.6 + * 1.7 + * Licensed under the Apache License, Version 2.0 (the "License"); 1.8 + * you may not use this file except in compliance with the License. 1.9 + * You may obtain a copy of the License at 1.10 + * 1.11 + * http://www.apache.org/licenses/LICENSE-2.0 1.12 + * 1.13 + * Unless required by applicable law or agreed to in writing, software 1.14 + * distributed under the License is distributed on an "AS IS" BASIS, 1.15 + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 1.16 + * See the License for the specific language governing permissions and 1.17 + * limitations under the License. 1.18 + */ 1.19 + 1.20 +@import "../variables"; 1.21 +@import "../mixins"; 1.22 + 1.23 +.mdl-snackbar { 1.24 + position: fixed; 1.25 + bottom: 0; 1.26 + left: 50%; 1.27 + cursor: default; 1.28 + background-color: $snackbar-background-color; 1.29 + z-index: 3; 1.30 + display: block; 1.31 + display: flex; 1.32 + justify-content: space-between; 1.33 + font-family: $preferred_font; 1.34 + will-change: transform; 1.35 + transform: translate(0, 80px); 1.36 + transition: transform 0.25s $animation-curve-fast-out-linear-in; 1.37 + pointer-events: none; 1.38 + @media(max-width: $snackbar-tablet-breakpoint - 1) { 1.39 + width: 100%; 1.40 + left: 0; 1.41 + min-height: 48px; 1.42 + max-height: 80px; 1.43 + } 1.44 + @media(min-width: $snackbar-tablet-breakpoint) { 1.45 + min-width: 288px; 1.46 + max-width: 568px; 1.47 + border-radius: 2px; 1.48 + transform: translate(-50%, 80px); 1.49 + } 1.50 + &--active { 1.51 + transform: translate(0, 0); 1.52 + pointer-events: auto; 1.53 + transition: transform 0.25s $animation-curve-linear-out-slow-in; 1.54 + 1.55 + @media(min-width: $snackbar-tablet-breakpoint) { 1.56 + transform: translate(-50%, 0); 1.57 + } 1.58 + } 1.59 + 1.60 + &__text { 1.61 + padding: 14px 12px 14px 24px; 1.62 + vertical-align: middle; 1.63 + color: white; 1.64 + float: left; 1.65 + } 1.66 + 1.67 + &__action { 1.68 + background: transparent; 1.69 + border: none; 1.70 + color: $snackbar-action-color; 1.71 + float: right; 1.72 + text-transform: uppercase; 1.73 + padding: 14px 24px 14px 12px; 1.74 + @include typo-button(); 1.75 + overflow: hidden; 1.76 + outline: none; 1.77 + opacity: 0; 1.78 + pointer-events: none; 1.79 + cursor: pointer; 1.80 + text-decoration: none; 1.81 + text-align: center; 1.82 + align-self: center; 1.83 + 1.84 + &::-moz-focus-inner { 1.85 + border: 0; 1.86 + } 1.87 + &:not([aria-hidden]) { 1.88 + opacity: 1; 1.89 + pointer-events: auto; 1.90 + } 1.91 + } 1.92 +}