Skip to content

Commit 4f3424e

Browse files
radenoradeno
authored
Use new pseudo selectors
before and after pseudo selectors are from CSS 2.1 defined with double colon.
1 parent ab1cc89 commit 4f3424e

File tree

1 file changed

+44
-44
lines changed

1 file changed

+44
-44
lines changed

‎microtip.css

+44-44
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,8 @@
2222
position: relative;
2323
}
2424

25-
[aria-label][role~="tooltip"]:before,
26-
[aria-label][role~="tooltip"]:after {
25+
[aria-label][role~="tooltip"]::before,
26+
[aria-label][role~="tooltip"]::after {
2727
transform: translate3d(0, 0, 0);
2828
-webkit-backface-visibility: hidden;
2929
backface-visibility: hidden;
@@ -37,12 +37,12 @@
3737
transform-origin: top;
3838
}
3939

40-
[aria-label][role~="tooltip"]:before {
40+
[aria-label][role~="tooltip"]::before {
4141
background-size: 100% auto !important;
4242
content: "";
4343
}
4444

45-
[aria-label][role~="tooltip"]:after {
45+
[aria-label][role~="tooltip"]::after {
4646
background: rgba(17, 17, 17, .9);
4747
border-radius: 4px;
4848
color: #ffffff;
@@ -55,10 +55,10 @@
5555
box-sizing: content-box;
5656
}
5757

58-
[aria-label][role~="tooltip"]:hover:before,
59-
[aria-label][role~="tooltip"]:hover:after,
60-
[aria-label][role~="tooltip"]:focus:before,
61-
[aria-label][role~="tooltip"]:focus:after {
58+
[aria-label][role~="tooltip"]:hover::before,
59+
[aria-label][role~="tooltip"]:hover::after,
60+
[aria-label][role~="tooltip"]:focus::before,
61+
[aria-label][role~="tooltip"]:focus::after {
6262
opacity: 1;
6363
pointer-events: auto;
6464
}
@@ -69,198 +69,198 @@
6969
[2] Position Modifiers
7070
-------------------------------------------------*/
7171

72-
[role~="tooltip"][data-microtip-position|="top"]:before {
72+
[role~="tooltip"][data-microtip-position|="top"]::before {
7373
background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
7474
height: 6px;
7575
width: 18px;
7676
margin-bottom: 5px;
7777
}
7878

79-
[role~="tooltip"][data-microtip-position|="top"]:after {
79+
[role~="tooltip"][data-microtip-position|="top"]::after {
8080
margin-bottom: 11px;
8181
}
8282

83-
[role~="tooltip"][data-microtip-position|="top"]:before {
83+
[role~="tooltip"][data-microtip-position|="top"]::before {
8484
transform: translate3d(-50%, 0, 0);
8585
bottom: 100%;
8686
left: 50%;
8787
}
8888

89-
[role~="tooltip"][data-microtip-position|="top"]:hover:before {
89+
[role~="tooltip"][data-microtip-position|="top"]:hover::before {
9090
transform: translate3d(-50%, -5px, 0);
9191
}
9292

93-
[role~="tooltip"][data-microtip-position|="top"]:after {
93+
[role~="tooltip"][data-microtip-position|="top"]::after {
9494
transform: translate3d(-50%, 0, 0);
9595
bottom: 100%;
9696
left: 50%;
9797
}
9898

99-
[role~="tooltip"][data-microtip-position="top"]:hover:after {
99+
[role~="tooltip"][data-microtip-position="top"]:hover::after {
100100
transform: translate3d(-50%, -5px, 0);
101101
}
102102

103103
/* ------------------------------------------------
104104
[2.1] Top Left
105105
-------------------------------------------------*/
106-
[role~="tooltip"][data-microtip-position="top-left"]:after {
106+
[role~="tooltip"][data-microtip-position="top-left"]::after {
107107
transform: translate3d(calc(-100% + 16px), 0, 0);
108108
bottom: 100%;
109109
}
110110

111-
[role~="tooltip"][data-microtip-position="top-left"]:hover:after {
111+
[role~="tooltip"][data-microtip-position="top-left"]:hover::after {
112112
transform: translate3d(calc(-100% + 16px), -5px, 0);
113113
}
114114

115115

116116
/* ------------------------------------------------
117117
[2.2] Top Right
118118
-------------------------------------------------*/
119-
[role~="tooltip"][data-microtip-position="top-right"]:after {
119+
[role~="tooltip"][data-microtip-position="top-right"]::after {
120120
transform: translate3d(calc(0% + -16px), 0, 0);
121121
bottom: 100%;
122122
}
123123

124-
[role~="tooltip"][data-microtip-position="top-right"]:hover:after {
124+
[role~="tooltip"][data-microtip-position="top-right"]:hover::after {
125125
transform: translate3d(calc(0% + -16px), -5px, 0);
126126
}
127127

128128

129129
/* ------------------------------------------------
130130
[2.3] Bottom
131131
-------------------------------------------------*/
132-
[role~="tooltip"][data-microtip-position|="bottom"]:before {
132+
[role~="tooltip"][data-microtip-position|="bottom"]::before {
133133
background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
134134
height: 6px;
135135
width: 18px;
136136
margin-top: 5px;
137137
margin-bottom: 0;
138138
}
139139

140-
[role~="tooltip"][data-microtip-position|="bottom"]:after {
140+
[role~="tooltip"][data-microtip-position|="bottom"]::after {
141141
margin-top: 11px;
142142
}
143143

144-
[role~="tooltip"][data-microtip-position|="bottom"]:before {
144+
[role~="tooltip"][data-microtip-position|="bottom"]::before {
145145
transform: translate3d(-50%, -10px, 0);
146146
bottom: auto;
147147
left: 50%;
148148
top: 100%;
149149
}
150150

151-
[role~="tooltip"][data-microtip-position|="bottom"]:hover:before {
151+
[role~="tooltip"][data-microtip-position|="bottom"]:hover::before {
152152
transform: translate3d(-50%, 0, 0);
153153
}
154154

155-
[role~="tooltip"][data-microtip-position|="bottom"]:after {
155+
[role~="tooltip"][data-microtip-position|="bottom"]::after {
156156
transform: translate3d(-50%, -10px, 0);
157157
top: 100%;
158158
left: 50%;
159159
}
160160

161-
[role~="tooltip"][data-microtip-position="bottom"]:hover:after {
161+
[role~="tooltip"][data-microtip-position="bottom"]:hover::after {
162162
transform: translate3d(-50%, 0, 0);
163163
}
164164

165165

166166
/* ------------------------------------------------
167167
[2.4] Bottom Left
168168
-------------------------------------------------*/
169-
[role~="tooltip"][data-microtip-position="bottom-left"]:after {
169+
[role~="tooltip"][data-microtip-position="bottom-left"]::after {
170170
transform: translate3d(calc(-100% + 16px), -10px, 0);
171171
top: 100%;
172172
}
173173

174-
[role~="tooltip"][data-microtip-position="bottom-left"]:hover:after {
174+
[role~="tooltip"][data-microtip-position="bottom-left"]:hover::after {
175175
transform: translate3d(calc(-100% + 16px), 0, 0);
176176
}
177177

178178

179179
/* ------------------------------------------------
180180
[2.5] Bottom Right
181181
-------------------------------------------------*/
182-
[role~="tooltip"][data-microtip-position="bottom-right"]:after {
182+
[role~="tooltip"][data-microtip-position="bottom-right"]::after {
183183
transform: translate3d(calc(0% + -16px), -10px, 0);
184184
top: 100%;
185185
}
186186

187-
[role~="tooltip"][data-microtip-position="bottom-right"]:hover:after {
187+
[role~="tooltip"][data-microtip-position="bottom-right"]:hover::after {
188188
transform: translate3d(calc(0% + -16px), 0, 0);
189189
}
190190

191191

192192
/* ------------------------------------------------
193193
[2.6] Left
194194
-------------------------------------------------*/
195-
[role~="tooltip"][data-microtip-position="left"]:before,
196-
[role~="tooltip"][data-microtip-position="left"]:after {
195+
[role~="tooltip"][data-microtip-position="left"]::before,
196+
[role~="tooltip"][data-microtip-position="left"]::after {
197197
bottom: auto;
198198
left: auto;
199199
right: 100%;
200200
top: 50%;
201201
transform: translate3d(10px, -50%, 0);
202202
}
203203

204-
[role~="tooltip"][data-microtip-position="left"]:before {
204+
[role~="tooltip"][data-microtip-position="left"]::before {
205205
background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
206206
height: 18px;
207207
width: 6px;
208208
margin-right: 5px;
209209
margin-bottom: 0;
210210
}
211211

212-
[role~="tooltip"][data-microtip-position="left"]:after {
212+
[role~="tooltip"][data-microtip-position="left"]::after {
213213
margin-right: 11px;
214214
}
215215

216-
[role~="tooltip"][data-microtip-position="left"]:hover:before,
217-
[role~="tooltip"][data-microtip-position="left"]:hover:after {
216+
[role~="tooltip"][data-microtip-position="left"]:hover::before,
217+
[role~="tooltip"][data-microtip-position="left"]:hover::after {
218218
transform: translate3d(0, -50%, 0);
219219
}
220220

221221

222222
/* ------------------------------------------------
223223
[2.7] Right
224224
-------------------------------------------------*/
225-
[role~="tooltip"][data-microtip-position="right"]:before,
226-
[role~="tooltip"][data-microtip-position="right"]:after {
225+
[role~="tooltip"][data-microtip-position="right"]::before,
226+
[role~="tooltip"][data-microtip-position="right"]::after {
227227
bottom: auto;
228228
left: 100%;
229229
top: 50%;
230230
transform: translate3d(-10px, -50%, 0);
231231
}
232232

233-
[role~="tooltip"][data-microtip-position="right"]:before {
233+
[role~="tooltip"][data-microtip-position="right"]::before {
234234
background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%2890%206%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
235235
height: 18px;
236236
width: 6px;
237237
margin-bottom: 0;
238238
margin-left: 5px;
239239
}
240240

241-
[role~="tooltip"][data-microtip-position="right"]:after {
241+
[role~="tooltip"][data-microtip-position="right"]::after {
242242
margin-left: 11px;
243243
}
244244

245-
[role~="tooltip"][data-microtip-position="right"]:hover:before,
246-
[role~="tooltip"][data-microtip-position="right"]:hover:after {
245+
[role~="tooltip"][data-microtip-position="right"]:hover::before,
246+
[role~="tooltip"][data-microtip-position="right"]:hover::after {
247247
transform: translate3d(0, -50%, 0);
248248
}
249249

250250
/* ------------------------------------------------
251251
[3] Size
252252
-------------------------------------------------*/
253-
[role~="tooltip"][data-microtip-size="small"]:after {
253+
[role~="tooltip"][data-microtip-size="small"]::after {
254254
white-space: initial;
255255
width: 80px;
256256
}
257257

258-
[role~="tooltip"][data-microtip-size="medium"]:after {
258+
[role~="tooltip"][data-microtip-size="medium"]::after {
259259
white-space: initial;
260260
width: 150px;
261261
}
262262

263-
[role~="tooltip"][data-microtip-size="large"]:after {
263+
[role~="tooltip"][data-microtip-size="large"]::after {
264264
white-space: initial;
265265
width: 260px;
266-
}
266+
}

0 commit comments

Comments
 (0)