bsw/jbe@1309: /**
bsw/jbe@1309:  * Copyright 2015 Google Inc. All Rights Reserved.
bsw/jbe@1309:  *
bsw/jbe@1309:  * Licensed under the Apache License, Version 2.0 (the "License");
bsw/jbe@1309:  * you may not use this file except in compliance with the License.
bsw/jbe@1309:  * You may obtain a copy of the License at
bsw/jbe@1309:  *
bsw/jbe@1309:  *      http://www.apache.org/licenses/LICENSE-2.0
bsw/jbe@1309:  *
bsw/jbe@1309:  * Unless required by applicable law or agreed to in writing, software
bsw/jbe@1309:  * distributed under the License is distributed on an "AS IS" BASIS,
bsw/jbe@1309:  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
bsw/jbe@1309:  * See the License for the specific language governing permissions and
bsw/jbe@1309:  * limitations under the License.
bsw/jbe@1309:  */
bsw/jbe@1309: 
bsw/jbe@1309: @import "../variables";
bsw/jbe@1309: @import "../mixins";
bsw/jbe@1309: 
bsw/jbe@1309: .mdl-snackbar {
bsw/jbe@1309:   position: fixed;
bsw/jbe@1309:   bottom: 0;
bsw/jbe@1309:   left: 50%;
bsw/jbe@1309:   cursor: default;
bsw/jbe@1309:   background-color: $snackbar-background-color;
bsw/jbe@1309:   z-index: 3;
bsw/jbe@1309:   display: block;
bsw/jbe@1309:   display: flex;
bsw/jbe@1309:   justify-content: space-between;
bsw/jbe@1309:   font-family: $preferred_font;
bsw/jbe@1309:   will-change: transform;
bsw/jbe@1309:   transform: translate(0, 80px);
bsw/jbe@1309:   transition: transform 0.25s $animation-curve-fast-out-linear-in;
bsw/jbe@1309:   pointer-events: none;
bsw/jbe@1309:   @media(max-width: $snackbar-tablet-breakpoint - 1) {
bsw/jbe@1309:     width: 100%;
bsw/jbe@1309:     left: 0;
bsw/jbe@1309:     min-height: 48px;
bsw/jbe@1309:     max-height: 80px;
bsw/jbe@1309:   }
bsw/jbe@1309:   @media(min-width: $snackbar-tablet-breakpoint) {
bsw/jbe@1309:     min-width: 288px;
bsw/jbe@1309:     max-width: 568px;
bsw/jbe@1309:     border-radius: 2px;
bsw/jbe@1309:     transform: translate(-50%, 80px);
bsw/jbe@1309:   }
bsw/jbe@1309:   &--active {
bsw/jbe@1309:     transform: translate(0, 0);
bsw/jbe@1309:     pointer-events: auto;
bsw/jbe@1309:     transition: transform 0.25s $animation-curve-linear-out-slow-in;
bsw/jbe@1309: 
bsw/jbe@1309:     @media(min-width: $snackbar-tablet-breakpoint) {
bsw/jbe@1309:       transform: translate(-50%, 0);
bsw/jbe@1309:     }
bsw/jbe@1309:   }
bsw/jbe@1309: 
bsw/jbe@1309:   &__text {
bsw/jbe@1309:     padding: 14px 12px 14px 24px;
bsw/jbe@1309:     vertical-align: middle;
bsw/jbe@1309:     color: white;
bsw/jbe@1309:     float: left;
bsw/jbe@1309:   }
bsw/jbe@1309: 
bsw/jbe@1309:   &__action {
bsw/jbe@1309:     background: transparent;
bsw/jbe@1309:     border: none;
bsw/jbe@1309:     color: $snackbar-action-color;
bsw/jbe@1309:     float: right;
bsw/jbe@1309:     text-transform: uppercase;
bsw/jbe@1309:     padding: 14px 24px 14px 12px;
bsw/jbe@1309:     @include typo-button();
bsw/jbe@1309:     overflow: hidden;
bsw/jbe@1309:     outline: none;
bsw/jbe@1309:     opacity: 0;
bsw/jbe@1309:     pointer-events: none;
bsw/jbe@1309:     cursor: pointer;
bsw/jbe@1309:     text-decoration: none;
bsw/jbe@1309:     text-align: center;
bsw/jbe@1309:     align-self: center;
bsw/jbe@1309: 
bsw/jbe@1309:     &::-moz-focus-inner {
bsw/jbe@1309:       border: 0;
bsw/jbe@1309:     }
bsw/jbe@1309:     &:not([aria-hidden]) {
bsw/jbe@1309:       opacity: 1;
bsw/jbe@1309:       pointer-events: auto;
bsw/jbe@1309:     }
bsw/jbe@1309:   }
bsw/jbe@1309: }