third_party/ot-br-posix/repo/third_party/mdl/repo/src/snackbar/_snackbar.scss

   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  */
  16
  17 @import "../variables";
  18 @import "../mixins";
  19
  20 .mdl-snackbar {
  21   position: fixed;
  22   bottom: 0;
  23   left: 50%;
  24   cursor: default;
  25   background-color: $snackbar-background-color;
  26   z-index: 3;
  27   display: block;
  28   display: flex;
  29   justify-content: space-between;
  30   font-family: $preferred_font;
  31   will-change: transform;
  32   transform: translate(0, 80px);
  33   transition: transform 0.25s $animation-curve-fast-out-linear-in;
  34   pointer-events: none;
  35   @media(max-width: $snackbar-tablet-breakpoint - 1) {
  36     width: 100%;
  37     left: 0;
  38     min-height: 48px;
  39     max-height: 80px;
  40   }
  41   @media(min-width: $snackbar-tablet-breakpoint) {
  42     min-width: 288px;
  43     max-width: 568px;
  44     border-radius: 2px;
  45     transform: translate(-50%, 80px);
  46   }
  47   &--active {
  48     transform: translate(0, 0);
  49     pointer-events: auto;
  50     transition: transform 0.25s $animation-curve-linear-out-slow-in;
  51
  52     @media(min-width: $snackbar-tablet-breakpoint) {
  53       transform: translate(-50%, 0);
  54     }
  55   }
  56
  57   &__text {
  58     padding: 14px 12px 14px 24px;
  59     vertical-align: middle;
  60     color: white;
  61     float: left;
  62   }
  63
  64   &__action {
  65     background: transparent;
  66     border: none;
  67     color: $snackbar-action-color;
  68     float: right;
  69     text-transform: uppercase;
  70     padding: 14px 24px 14px 12px;
  71     @include typo-button();
  72     overflow: hidden;
  73     outline: none;
  74     opacity: 0;
  75     pointer-events: none;
  76     cursor: pointer;
  77     text-decoration: none;
  78     text-align: center;
  79     align-self: center;
  80
  81     &::-moz-focus-inner {
  82       border: 0;
  83     }
  84     &:not([aria-hidden]) {
  85       opacity: 1;
  86       pointer-events: auto;
  87     }
  88   }
  89 }