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: 
bsw/jbe@1309: .mdl-badge {
bsw/jbe@1309:   position : relative;
bsw/jbe@1309:   white-space: nowrap;
bsw/jbe@1309:   margin-right: ($badge-size + $badge-padding);
bsw/jbe@1309: 
bsw/jbe@1309:   &:not([data-badge]) {
bsw/jbe@1309:     margin-right: auto;
bsw/jbe@1309:   }
bsw/jbe@1309: 
bsw/jbe@1309:   &[data-badge]:after {
bsw/jbe@1309:     content: attr(data-badge);
bsw/jbe@1309: 
bsw/jbe@1309:     display: flex;
bsw/jbe@1309:     flex-direction: row;
bsw/jbe@1309:     flex-wrap: wrap;
bsw/jbe@1309:     justify-content: center;
bsw/jbe@1309:     align-content: center;
bsw/jbe@1309:     align-items: center;
bsw/jbe@1309: 
bsw/jbe@1309:     position: absolute;
bsw/jbe@1309:     top: -($badge-size / 2);
bsw/jbe@1309:     right: -($badge-size + $badge-padding);
bsw/jbe@1309: 
bsw/jbe@1309:     .mdl-button & {
bsw/jbe@1309:       top: -10px;
bsw/jbe@1309:       right: -5px;
bsw/jbe@1309:     }
bsw/jbe@1309: 
bsw/jbe@1309:     font-family: $preferred_font;
bsw/jbe@1309:     font-weight: 600;
bsw/jbe@1309:     font-size: $badge-font-size;
bsw/jbe@1309:     width: $badge-size;
bsw/jbe@1309:     height: $badge-size;
bsw/jbe@1309:     border-radius : 50%;
bsw/jbe@1309: 
bsw/jbe@1309:     background: $badge-background;
bsw/jbe@1309:     color: $badge-color;
bsw/jbe@1309:   }
bsw/jbe@1309: 
bsw/jbe@1309:   &.mdl-badge--no-background {
bsw/jbe@1309:     &[data-badge]:after {
bsw/jbe@1309:       color: $badge-color-inverse;
bsw/jbe@1309:       background: $badge-background-inverse;
bsw/jbe@1309: 
bsw/jbe@1309:       box-shadow: 0 0 1px gray;
bsw/jbe@1309:     }
bsw/jbe@1309:   }
bsw/jbe@1309:   &.mdl-badge--overlap {
bsw/jbe@1309:     margin-right: ($badge-size - $badge-overlap);
bsw/jbe@1309:     &:after {
bsw/jbe@1309:       right: -($badge-size - $badge-overlap);
bsw/jbe@1309:     }
bsw/jbe@1309:   }
bsw/jbe@1309: }