third_party/ot-br-posix/repo/third_party/mdl/repo/src/badge/_badge.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
  19 .mdl-badge {
  20   position : relative;
  21   white-space: nowrap;
  22   margin-right: ($badge-size + $badge-padding);
  23
  24   &:not([data-badge]) {
  25     margin-right: auto;
  26   }
  27
  28   &[data-badge]:after {
  29     content: attr(data-badge);
  30
  31     display: flex;
  32     flex-direction: row;
  33     flex-wrap: wrap;
  34     justify-content: center;
  35     align-content: center;
  36     align-items: center;
  37
  38     position: absolute;
  39     top: -($badge-size / 2);
  40     right: -($badge-size + $badge-padding);
  41
  42     .mdl-button & {
  43       top: -10px;
  44       right: -5px;
  45     }
  46
  47     font-family: $preferred_font;
  48     font-weight: 600;
  49     font-size: $badge-font-size;
  50     width: $badge-size;
  51     height: $badge-size;
  52     border-radius : 50%;
  53
  54     background: $badge-background;
  55     color: $badge-color;
  56   }
  57
  58   &.mdl-badge--no-background {
  59     &[data-badge]:after {
  60       color: $badge-color-inverse;
  61       background: $badge-background-inverse;
  62
  63       box-shadow: 0 0 1px gray;
  64     }
  65   }
  66   &.mdl-badge--overlap {
  67     margin-right: ($badge-size - $badge-overlap);
  68     &:after {
  69       right: -($badge-size - $badge-overlap);
  70     }
  71   }
  72 }