UNPKG

4.64 kBCSSView Raw
1.next-sr-only {
2 position: absolute;
3 width: 1px;
4 height: 1px;
5 padding: 0;
6 overflow: hidden;
7 clip: rect(0, 0, 0, 0);
8 white-space: nowrap;
9 border: 0;
10 top: 0;
11 margin: -1px; }
12
13.next-badge {
14 box-sizing: border-box;
15 /* @include global-font; */
16 position: relative;
17 display: inline-block;
18 vertical-align: middle;
19 line-height: 1; }
20 .next-badge *,
21 .next-badge *:before,
22 .next-badge *:after {
23 box-sizing: border-box; }
24 .next-badge .next-badge-count {
25 color: #FFFFFF;
26 color: var(--badge-color, #FFFFFF);
27 background: #FF3000;
28 background: var(--badge-color-bg, #FF3000);
29 text-align: center;
30 white-space: nowrap;
31 border-radius: 8px;
32 border-radius: var(--badge-size-count-border-radius, 8px);
33 position: absolute;
34 width: auto;
35 width: var(--badge-size-count-width, auto);
36 height: 16px;
37 height: var(--badge-size-count-height, 16px);
38 min-width: 16px;
39 min-width: var(--badge-size-count-min-width, 16px);
40 padding: 0 4px 0 4px;
41 padding: var(--badge-size-count-padding, 0 4px 0 4px);
42 font-size: 12px;
43 font-size: var(--badge-size-count-font, 12px);
44 line-height: 16px;
45 line-height: var(--badge-size-count-lineheight, 16px);
46 transform: translateX(-50%);
47 top: -.5em; }
48 .next-badge .next-badge-count a,
49 .next-badge .next-badge-count a:hover {
50 color: #FFFFFF;
51 color: var(--badge-color, #FFFFFF); }
52 .next-badge .next-badge-dot {
53 color: #FFFFFF;
54 color: var(--badge-dot-color, #FFFFFF);
55 background: #FF3000;
56 background: var(--badge-dot-color-bg, #FF3000);
57 text-align: center;
58 white-space: nowrap;
59 border-radius: 8px;
60 border-radius: var(--badge-size-dot-border-radius, 8px);
61 position: absolute;
62 width: 8px;
63 width: var(--badge-size-dot-width, 8px);
64 height: 8px;
65 height: var(--badge-size-dot-height, 8px);
66 min-width: 8px;
67 min-width: var(--badge-size-dot-min-width, 8px);
68 padding: 0px;
69 padding: var(--badge-size-dot-padding, 0px);
70 font-size: 1px;
71 line-height: 1;
72 transform: translateX(-50%);
73 top: -.5em; }
74 .next-badge .next-badge-dot a,
75 .next-badge .next-badge-dot a:hover {
76 color: #FFFFFF;
77 color: var(--badge-dot-color, #FFFFFF); }
78 .next-badge .next-badge-custom {
79 line-height: 1.166667;
80 white-space: nowrap;
81 font-size: 12px;
82 font-size: var(--font-size-caption, 12px);
83 padding-left: 4px;
84 padding-left: var(--badge-size-custom-padding-lr, 4px);
85 padding-right: 4px;
86 padding-right: var(--badge-size-custom-padding-lr, 4px);
87 border-radius: 3px;
88 border-radius: var(--badge-size-custom-border-radius, 3px);
89 transform: translateX(-50%); }
90 .next-badge .next-badge-custom > * {
91 line-height: 1; }
92 .next-badge .next-badge-custom > i:before,
93 .next-badge .next-badge-custom > .next-icon:before {
94 font-size: inherit;
95 width: auto;
96 vertical-align: top; }
97 .next-badge .next-badge-scroll-number {
98 position: absolute;
99 top: -4px;
100 z-index: 10;
101 overflow: hidden;
102 transform-origin: left center; }
103 .next-badge-scroll-number-only {
104 position: relative;
105 display: inline-block;
106 transition: transform 100ms linear, -webkit-transform 100ms linear;
107 transition: transform var(--motion-duration-immediately, 100ms) var(--motion-linear, linear), -webkit-transform var(--motion-duration-immediately, 100ms) var(--motion-linear, linear);
108 min-width: 8px;
109 min-width: var(--badge-size-dot-min-width, 8px); }
110 .next-badge-scroll-number-only span {
111 display: block;
112 height: 16px;
113 height: var(--badge-size-count-height, 16px);
114 line-height: 16px;
115 line-height: var(--badge-size-count-height, 16px);
116 font-size: 12px;
117 font-size: var(--badge-size-count-font, 12px); }
118 .next-badge-not-a-wrapper .next-badge-count,
119 .next-badge-not-a-wrapper .next-badge-custom {
120 position: relative;
121 display: block;
122 top: auto;
123 transform: translateX(0); }
124 .next-badge-not-a-wrapper .next-badge-dot {
125 position: relative;
126 display: block;
127 top: auto;
128 transform: translateX(0); }
129 .next-badge-list-wrapper {
130 margin-left: 0; }
131 .next-badge-list-wrapper li {
132 margin-bottom: 0px;
133 margin-bottom: var(--badge-size-list-margin, 0px);
134 list-style: none; }
135
136.next-badge[dir="rtl"] .next-badge-custom {
137 padding-right: 4px;
138 padding-right: var(--badge-size-custom-padding-lr, 4px);
139 padding-left: 4px;
140 padding-left: var(--badge-size-custom-padding-lr, 4px); }
141
142.next-badge[dir="rtl"] .next-badge-scroll-number {
143 left: 0;
144 transform-origin: right center; }