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 }