blob: c3b42ecb311a186c5c88f226acff3ebc5c445474 [file] [log] [blame]
Copybara botbe50d492023-11-30 00:16:42 +01001/**
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}