1.1 --- /dev/null	Thu Jan 01 00:00:00 1970 +0000
     1.2 +++ b/style/mdl/badge/_badge.scss	Sun Jul 15 14:07:29 2018 +0200
     1.3 @@ -0,0 +1,72 @@
     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 +
    1.22 +.mdl-badge {
    1.23 +  position : relative;
    1.24 +  white-space: nowrap;
    1.25 +  margin-right: ($badge-size + $badge-padding);
    1.26 +
    1.27 +  &:not([data-badge]) {
    1.28 +    margin-right: auto;
    1.29 +  }
    1.30 +
    1.31 +  &[data-badge]:after {
    1.32 +    content: attr(data-badge);
    1.33 +
    1.34 +    display: flex;
    1.35 +    flex-direction: row;
    1.36 +    flex-wrap: wrap;
    1.37 +    justify-content: center;
    1.38 +    align-content: center;
    1.39 +    align-items: center;
    1.40 +
    1.41 +    position: absolute;
    1.42 +    top: -($badge-size / 2);
    1.43 +    right: -($badge-size + $badge-padding);
    1.44 +
    1.45 +    .mdl-button & {
    1.46 +      top: -10px;
    1.47 +      right: -5px;
    1.48 +    }
    1.49 +
    1.50 +    font-family: $preferred_font;
    1.51 +    font-weight: 600;
    1.52 +    font-size: $badge-font-size;
    1.53 +    width: $badge-size;
    1.54 +    height: $badge-size;
    1.55 +    border-radius : 50%;
    1.56 +
    1.57 +    background: $badge-background;
    1.58 +    color: $badge-color;
    1.59 +  }
    1.60 +
    1.61 +  &.mdl-badge--no-background {
    1.62 +    &[data-badge]:after {
    1.63 +      color: $badge-color-inverse;
    1.64 +      background: $badge-background-inverse;
    1.65 +
    1.66 +      box-shadow: 0 0 1px gray;
    1.67 +    }
    1.68 +  }
    1.69 +  &.mdl-badge--overlap {
    1.70 +    margin-right: ($badge-size - $badge-overlap);
    1.71 +    &:after {
    1.72 +      right: -($badge-size - $badge-overlap);
    1.73 +    }
    1.74 +  }
    1.75 +}