1 | @charset "UTF-8";
|
2 |
|
3 | @import "../core/index-noreset.scss";
|
4 | @import "scss/function";
|
5 | @import "scss/mixin";
|
6 | @import "scss/placeholder";
|
7 | @import "scss/variable";
|
8 |
|
9 | .#{$css-prefix} {
|
10 | &badge {
|
11 | @include box-sizing;
|
12 |
|
13 |
|
14 | @include badge-bounding();
|
15 |
|
16 | .#{$css-prefix}badge-count {
|
17 | @include badge-state(
|
18 | $color: $badge-color,
|
19 | $bgColor: $badge-color-bg,
|
20 | $borderRadius: $badge-size-count-border-radius
|
21 | );
|
22 | @include badge-size(
|
23 | $width: $badge-size-count-width,
|
24 | $minWidth: $badge-size-count-min-width,
|
25 | $height: $badge-size-count-height,
|
26 | $padding: $badge-size-count-padding,
|
27 | $fontSize: $badge-size-count-font,
|
28 | $lineHeight: $badge-size-count-lineheight
|
29 | );
|
30 | top: -.5em;
|
31 | }
|
32 |
|
33 | .#{$css-prefix}badge-dot {
|
34 | @include badge-state(
|
35 | $color: $badge-dot-color,
|
36 | $bgColor: $badge-dot-color-bg,
|
37 | $borderRadius: $badge-size-dot-border-radius
|
38 | );
|
39 | @include badge-size(
|
40 | $width: $badge-size-dot-width,
|
41 | $minWidth: $badge-size-dot-min-width,
|
42 | $height: $badge-size-dot-height,
|
43 | $padding: $badge-size-dot-padding,
|
44 | $fontSize: 1px,
|
45 | $lineHeight: 1
|
46 | );
|
47 | top: -.5em;
|
48 | }
|
49 |
|
50 | .#{$css-prefix}badge-custom {
|
51 | line-height: 1.166667;
|
52 | white-space: nowrap;
|
53 | font-size: $font-size-caption;
|
54 | padding-left: $badge-size-custom-padding-lr;
|
55 | padding-right: $badge-size-custom-padding-lr;
|
56 | border-radius: $badge-size-custom-border-radius;
|
57 | transform: translateX(-50%);
|
58 |
|
59 | > * {
|
60 | line-height: 1;
|
61 | }
|
62 |
|
63 | > i,
|
64 | > .#{$css-prefix}icon {
|
65 | &:before {
|
66 | font-size: inherit;
|
67 | width: auto;
|
68 | vertical-align: top;
|
69 | }
|
70 | }
|
71 | }
|
72 |
|
73 | .#{$css-prefix}badge-scroll-number {
|
74 | position: absolute;
|
75 | top: -4px;
|
76 | z-index: 10;
|
77 | overflow: hidden;
|
78 | transform-origin: left center;
|
79 | }
|
80 |
|
81 | &-scroll-number-only {
|
82 | position: relative;
|
83 | display: inline-block;
|
84 | transition: transform $motion-duration-immediately $motion-linear, -webkit-transform $motion-duration-immediately $motion-linear;
|
85 | min-width: $badge-size-dot-min-width;
|
86 |
|
87 | span {
|
88 | display: block;
|
89 | height: $badge-size-count-height;
|
90 | line-height: $badge-size-count-height;
|
91 | font-size: $badge-size-count-font;
|
92 | }
|
93 | }
|
94 |
|
95 | &-not-a-wrapper &-count,
|
96 | &-not-a-wrapper &-custom {
|
97 | position: relative;
|
98 | display: block;
|
99 | top: auto;
|
100 | transform: translateX(0);
|
101 | }
|
102 |
|
103 | &-not-a-wrapper &-dot {
|
104 | position: relative;
|
105 | display: block;
|
106 | top: auto;
|
107 | transform: translateX(0);
|
108 | }
|
109 |
|
110 | &-list-wrapper {
|
111 | margin-left: 0;
|
112 | li {
|
113 | margin-bottom: $badge-size-list-margin;
|
114 | list-style: none;
|
115 | }
|
116 | }
|
117 | }
|
118 | }
|
119 |
|
120 | @import './rtl.scss';
|