Skip to content

Commit 3deb795

Browse files
lubber-delubber-de
authored
feat(chore): shorten specificity names
This PR shortens some of the repeated classname selectors but keeps specificity level.
1 parent 9f8725b commit 3deb795

File tree

8 files changed

+200
-200
lines changed

8 files changed

+200
-200
lines changed

‎src/definitions/collections/grid.less

Lines changed: 106 additions & 106 deletions
Large diffs are not rendered by default.

‎src/definitions/elements/button.less

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,7 @@
120120
--------------- */
121121

122122
/* Specificity hack */
123-
.ui.loading.loading.loading.loading.loading.loading.button {
123+
.ui.ui.ui.ui.ui.ui.loading.button {
124124
position: relative;
125125
cursor: default;
126126
text-shadow: none !important;

‎src/definitions/elements/input.less

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@
110110
Loading
111111
--------------------- */
112112

113-
.ui.loading.loading.input > i.icon::before {
113+
.ui.ui.loading.input > i.icon::before {
114114
position: absolute;
115115
content: "";
116116
top: 50%;
@@ -121,7 +121,7 @@
121121
border-radius: @circularRadius;
122122
border: @loaderLineWidth solid @loaderFillColor;
123123
}
124-
.ui.loading.loading.input > i.icon::after {
124+
.ui.ui.loading.input > i.icon::after {
125125
position: absolute;
126126
content: "";
127127
top: 50%;

‎src/definitions/elements/list.less

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -477,16 +477,16 @@ ol.ui.list ol li,
477477
color: @linkListItemColor;
478478
transition: @linkListTransition;
479479
}
480-
.ui.link.list.list a.item:hover,
481-
.ui.link.list.list .item a:not(.ui):hover {
480+
.ui.ui.link.list a.item:hover,
481+
.ui.ui.link.list .item a:not(.ui):hover {
482482
color: @linkListItemHoverColor;
483483
}
484-
.ui.link.list.list a.item:active,
485-
.ui.link.list.list .item a:not(.ui):active {
484+
.ui.ui.link.list a.item:active,
485+
.ui.ui.link.list .item a:not(.ui):active {
486486
color: @linkListItemDownColor;
487487
}
488-
.ui.link.list.list .active.item,
489-
.ui.link.list.list .active.item a:not(.ui) {
488+
.ui.ui.link.list .active.item,
489+
.ui.ui.link.list .active.item a:not(.ui) {
490490
color: @linkListItemActiveColor;
491491
}
492492
& when (@variationListInverted) {
@@ -496,16 +496,16 @@ ol.ui.list ol li,
496496
.ui.inverted.link.list .item a:not(.ui) {
497497
color: @invertedLinkListItemColor;
498498
}
499-
.ui.inverted.link.list.list a.item:hover,
500-
.ui.inverted.link.list.list .item a:not(.ui):hover {
499+
.ui.ui.inverted.link.list a.item:hover,
500+
.ui.ui.inverted.link.list .item a:not(.ui):hover {
501501
color: @invertedLinkListItemHoverColor;
502502
}
503-
.ui.inverted.link.list.list a.item:active,
504-
.ui.inverted.link.list.list .item a:not(.ui):active {
503+
.ui.ui.inverted.link.list a.item:active,
504+
.ui.ui.inverted.link.list .item a:not(.ui):active {
505505
color: @invertedLinkListItemDownColor;
506506
}
507-
.ui.inverted.link.list.list a.active.item,
508-
.ui.inverted.link.list.list .active.item a:not(.ui) {
507+
.ui.ui.inverted.link.list a.active.item,
508+
.ui.ui.inverted.link.list .active.item a:not(.ui) {
509509
color: @invertedLinkListItemActiveColor;
510510
}
511511
}

‎src/definitions/elements/loader.less

Lines changed: 71 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -62,16 +62,16 @@
6262
& when (@variationLoaderSpeeds) {
6363
/* Speeds */
6464

65-
.ui.fast.loading.loading::after,
66-
.ui.fast.loading.loading .input > i.icon::after,
67-
.ui.fast.loading.loading > i.icon::after,
65+
.ui.ui.fast.loading::after,
66+
.ui.ui.fast.loading .input > i.icon::after,
67+
.ui.ui.fast.loading > i.icon::after,
6868
.ui.fast.loader::after {
6969
animation-duration: @loaderSpeedFast;
7070
}
7171

72-
.ui.slow.loading.loading::after,
73-
.ui.slow.loading.loading .input > i.icon::after,
74-
.ui.slow.loading.loading > i.icon::after,
72+
.ui.ui.slow.loading::after,
73+
.ui.ui.slow.loading .input > i.icon::after,
74+
.ui.ui.slow.loading > i.icon::after,
7575
.ui.slow.loader::after {
7676
animation-duration: @loaderSpeedSlow;
7777
}
@@ -204,49 +204,49 @@
204204
@c: @colors[@@color][color];
205205
@l: @colors[@@color][light];
206206

207-
.ui.@{color}.elastic.loader.loader::before,
207+
.ui.ui.@{color}.elastic.loader::before,
208208
.ui.@{color}.basic.elastic.loading.button::before,
209209
.ui.@{color}.basic.elastic.loading.button::after,
210-
.ui.@{color}.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card)::before,
211-
.ui.@{color}.elastic.loading.loading.loading .input > i.icon::before,
212-
.ui.@{color}.elastic.loading.loading.loading.loading > i.icon::before,
213-
.ui.@{color}.loading.loading.loading.loading:not(.usual):not(.button)::after,
214-
.ui.@{color}.loading.loading.loading.loading .input > i.icon::after,
215-
.ui.@{color}.loading.loading.loading.loading > i.icon::after,
216-
.ui.@{color}.loader.loader.loader::after {
210+
.ui.ui.ui.@{color}.elastic.loading:not(.segment):not(.segments):not(.card)::before,
211+
.ui.ui.ui.@{color}.elastic.loading .input > i.icon::before,
212+
.ui.ui.ui.ui.@{color}.elastic.loading > i.icon::before,
213+
.ui.ui.ui.ui.@{color}.loading:not(.usual):not(.button)::after,
214+
.ui.ui.ui.ui.@{color}.loading .input > i.icon::after,
215+
.ui.ui.ui.ui.@{color}.loading > i.icon::after,
216+
.ui.ui.ui.@{color}.loader::after {
217217
color: @c;
218218
}
219219
.ui.inverted.@{color}.elastic.loader::before,
220-
.ui.inverted.@{color}.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card)::before,
221-
.ui.inverted.@{color}.elastic.loading.loading.loading .input > i.icon::before,
222-
.ui.inverted.@{color}.elastic.loading.loading.loading > i.icon::before,
223-
.ui.inverted.@{color}.loading.loading.loading.loading:not(.usual)::after,
224-
.ui.inverted.@{color}.loading.loading.loading.loading .input > i.icon::after,
225-
.ui.inverted.@{color}.loading.loading.loading.loading > i.icon::after,
226-
.ui.inverted.@{color}.loader.loader.loader::after {
220+
.ui.ui.ui.inverted.@{color}.elastic.loading:not(.segment):not(.segments):not(.card)::before,
221+
.ui.ui.ui.inverted.@{color}.elastic.loading .input > i.icon::before,
222+
.ui.ui.ui.inverted.@{color}.elastic.loading > i.icon::before,
223+
.ui.ui.ui.ui.inverted.@{color}.loading:not(.usual)::after,
224+
.ui.ui.ui.ui.inverted.@{color}.loading .input > i.icon::after,
225+
.ui.ui.ui.ui.inverted.@{color}.loading > i.icon::after,
226+
.ui.ui.ui.inverted.@{color}.loader::after {
227227
color: @l;
228228
}
229229
});
230230
}
231231

232-
.ui.elastic.loader.loader::before,
233-
.ui.elastic.loading.loading.loading::before,
234-
.ui.elastic.loading.loading.loading .input > i.icon::before,
235-
.ui.elastic.loading.loading.loading > i.icon::before,
236-
.ui.loading.loading.loading.loading:not(.usual)::after,
237-
.ui.loading.loading.loading.loading .input > i.icon::after,
238-
.ui.loading.loading.loading.loading > i.icon::after,
239-
.ui.loader.loader.loader::after {
232+
.ui.ui.elastic.loader::before,
233+
.ui.ui.ui.elastic.loading::before,
234+
.ui.ui.ui.elastic.loading .input > i.icon::before,
235+
.ui.ui.ui.elastic.loading > i.icon::before,
236+
.ui.ui.ui.ui.loading:not(.usual)::after,
237+
.ui.ui.ui.ui.loading .input > i.icon::after,
238+
.ui.ui.ui.ui.loading > i.icon::after,
239+
.ui.ui.ui.loader::after {
240240
border-color: currentColor;
241241
}
242-
.ui.elastic.loading.loading.loading.loading.button:not(.inverted):not(.basic)::before {
242+
.ui.ui.ui.ui.elastic.loading.button:not(.inverted):not(.basic)::before {
243243
color: @invertedLoaderLineColor;
244244
}
245245
.ui.elastic.basic.loading.button::before,
246246
.ui.elastic.basic.loading.button::after {
247247
color: @loaderLineColor;
248248
}
249-
.ui.double.loading.loading.loading.loading.button::after {
249+
.ui.ui.ui.ui.double.loading.button::after {
250250
border-bottom-color: currentColor;
251251
}
252252

@@ -278,30 +278,30 @@
278278
}
279279
}
280280

281-
.ui.loading.loading.loading.loading.loading.loading::after,
282-
.ui.loading.loading.loading.loading.loading.loading .input > i.icon::after,
283-
.ui.loading.loading.loading.loading.loading.loading > i.icon::after,
284-
.ui.loader.loader.loader.loader.loader::after {
281+
.ui.ui.ui.ui.ui.ui.loading::after,
282+
.ui.ui.ui.ui.ui.ui.loading .input > i.icon::after,
283+
.ui.ui.ui.ui.ui.ui.loading > i.icon::after,
284+
.ui.ui.ui.ui.ui.loader::after {
285285
border-left-color: transparent;
286286
border-right-color: transparent;
287287
}
288-
.ui.loading.loading.loading.loading.loading.loading.loading:not(.double)::after,
289-
.ui.loading.loading.loading.loading.loading.loading.loading:not(.double) .input > i.icon::after,
290-
.ui.loading.loading.loading.loading.loading.loading.loading:not(.double) > i.icon::after,
291-
.ui.loader.loader.loader.loader.loader.loader:not(.double)::after {
288+
.ui.ui.ui.ui.ui.ui.ui.loading:not(.double)::after,
289+
.ui.ui.ui.ui.ui.ui.ui.loading:not(.double) .input > i.icon::after,
290+
.ui.ui.ui.ui.ui.ui.ui.loading:not(.double) > i.icon::after,
291+
.ui.ui.ui.ui.ui.ui.loader:not(.double)::after {
292292
border-bottom-color: transparent;
293293
}
294-
.ui.loading.loading.loading.loading.loading.loading.card::after,
295-
.ui.loading.loading.loading.loading.loading.loading.segments::after,
296-
.ui.loading.loading.loading.loading.loading.loading.segment::after,
297-
.ui.loading.loading.loading.loading.loading.loading.form::after {
294+
.ui.ui.ui.ui.ui.ui.loading.card::after,
295+
.ui.ui.ui.ui.ui.ui.loading.segments::after,
296+
.ui.ui.ui.ui.ui.ui.loading.segment::after,
297+
.ui.ui.ui.ui.ui.ui.loading.form::after {
298298
border-left-color: @loaderFillColor;
299299
border-right-color: @loaderFillColor;
300300
}
301-
.ui.loading.loading.loading.loading.loading.loading.card:not(.double)::after,
302-
.ui.loading.loading.loading.loading.loading.loading.segments:not(.double)::after,
303-
.ui.loading.loading.loading.loading.loading.loading.segment:not(.double)::after,
304-
.ui.loading.loading.loading.loading.loading.loading.form:not(.double)::after {
301+
.ui.ui.ui.ui.ui.ui.loading.card:not(.double)::after,
302+
.ui.ui.ui.ui.ui.ui.loading.segments:not(.double)::after,
303+
.ui.ui.ui.ui.ui.ui.loading.segment:not(.double)::after,
304+
.ui.ui.ui.ui.ui.ui.loading.form:not(.double)::after {
305305
border-bottom-color: @loaderFillColor;
306306
}
307307

@@ -316,17 +316,17 @@
316316
.ui.inverted.dimmer > .ui.elastic.loader {
317317
color: @loaderLineColor;
318318
}
319-
.ui.elastic.loading.loading:not(.form):not(.segment):not(.segments):not(.card)::after,
320-
.ui.elastic.loading.loading .input > i.icon::after,
321-
.ui.elastic.loading.loading > i.icon::after,
322-
.ui.elastic.loader.loader::after {
319+
.ui.ui.elastic.loading:not(.form):not(.segment):not(.segments):not(.card)::after,
320+
.ui.ui.elastic.loading .input > i.icon::after,
321+
.ui.ui.elastic.loading > i.icon::after,
322+
.ui.ui.elastic.loader::after {
323323
animation: loader 1s infinite cubic-bezier(0.27, 1.05, 0.92, 0.61);
324324
animation-delay: 0.3s;
325325
}
326-
.ui.elastic.loading.loading.loading:not(.form):not(.segment):not(.segments):not(.card)::before,
327-
.ui.elastic.loading.loading.loading .input > i.icon::before,
328-
.ui.elastic.loading.loading.loading > i.icon::before,
329-
.ui.elastic.loader.loader::before {
326+
.ui.ui.ui.elastic.loading:not(.form):not(.segment):not(.segments):not(.card)::before,
327+
.ui.ui.ui.elastic.loading .input > i.icon::before,
328+
.ui.ui.ui.elastic.loading > i.icon::before,
329+
.ui.ui.elastic.loader::before {
330330
animation: elastic-loader 1s infinite cubic-bezier(0.27, 1.05, 0.92, 0.61);
331331
// https://github.com/fomantic/Fomantic-UI/pull/363
332332
// stylelint-disable-next-line property-no-vendor-prefix
@@ -339,30 +339,30 @@
339339
}
340340
}
341341
& when (@variationLoaderSpeeds) {
342-
.ui.slow.elastic.loading.loading:not(.form):not(.segment):not(.segments):not(.card)::after,
343-
.ui.slow.elastic.loading.loading .input > i.icon::after,
344-
.ui.slow.elastic.loading.loading > i.icon::after,
345-
.ui.slow.elastic.loader.loader::after {
342+
.ui.ui.slow.elastic.loading:not(.form):not(.segment):not(.segments):not(.card)::after,
343+
.ui.ui.slow.elastic.loading .input > i.icon::after,
344+
.ui.ui.slow.elastic.loading > i.icon::after,
345+
.ui.ui.slow.elastic.loader::after {
346346
animation-duration: 1.5s;
347347
animation-delay: 0.45s;
348348
}
349-
.ui.slow.elastic.loading.loading.loading:not(.form):not(.segment):not(.segments):not(.card)::before,
350-
.ui.slow.elastic.loading.loading.loading .input > i.icon::before,
351-
.ui.slow.elastic.loading.loading.loading > i.icon::before,
352-
.ui.slow.elastic.loader.loader::before {
349+
.ui.ui.ui.slow.elastic.loading:not(.form):not(.segment):not(.segments):not(.card)::before,
350+
.ui.ui.ui.slow.elastic.loading .input > i.icon::before,
351+
.ui.ui.ui.slow.elastic.loading > i.icon::before,
352+
.ui.ui.slow.elastic.loader::before {
353353
animation-duration: 1.5s;
354354
}
355-
.ui.fast.elastic.loading.loading:not(.form):not(.segment):not(.segments):not(.card)::after,
356-
.ui.fast.elastic.loading.loading .input > i.icon::after,
357-
.ui.fast.elastic.loading.loading > i.icon::after,
358-
.ui.fast.elastic.loader.loader::after {
355+
.ui.ui.fast.elastic.loading:not(.form):not(.segment):not(.segments):not(.card)::after,
356+
.ui.ui.fast.elastic.loading .input > i.icon::after,
357+
.ui.ui.fast.elastic.loading > i.icon::after,
358+
.ui.ui.fast.elastic.loader::after {
359359
animation-duration: 0.66s;
360360
animation-delay: 0.2s;
361361
}
362-
.ui.fast.elastic.loading.loading.loading:not(.form):not(.segment):not(.segments):not(.card)::before,
363-
.ui.fast.elastic.loading.loading.loading .input > i.icon::before,
364-
.ui.fast.elastic.loading.loading.loading > i.icon::before,
365-
.ui.fast.elastic.loader.loader::before {
362+
.ui.ui.ui.fast.elastic.loading:not(.form):not(.segment):not(.segments):not(.card)::before,
363+
.ui.ui.ui.fast.elastic.loading .input > i.icon::before,
364+
.ui.ui.ui.fast.elastic.loading > i.icon::before,
365+
.ui.ui.fast.elastic.loader::before {
366366
animation-duration: 0.66s;
367367
}
368368
}

‎src/definitions/elements/segment.less

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -368,13 +368,13 @@
368368
Raised
369369
-------------------- */
370370

371-
.ui.raised.raised.segments,
372-
.ui.raised.raised.segment {
371+
.ui.ui.raised.segments,
372+
.ui.ui.raised.segment {
373373
box-shadow: @raisedBoxShadow;
374374
}
375375
& when (@variationSegmentInverted) {
376-
.ui.inverted.raised.raised.segments,
377-
.ui.inverted.raised.raised.segment {
376+
.ui.ui.inverted.raised.segments,
377+
.ui.ui.inverted.raised.segment {
378378
box-shadow: @invertedRaisedBoxShadow;
379379
}
380380
}

‎src/definitions/modules/dimmer.less

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -220,7 +220,7 @@ body.dimmable > .dimmer {
220220
.light.light.light.light.light.dimmer {
221221
background: @lightBackgroundColor;
222222
}
223-
.very.light.light.light.light.dimmer {
223+
.very.very.very.very.light.dimmer {
224224
background: @veryLightBackgroundColor;
225225
}
226226
}
@@ -249,7 +249,7 @@ body.dimmable > .dimmer {
249249
.light.light.light.light.light.inverted.dimmer {
250250
background: @lightInvertedBackgroundColor;
251251
}
252-
.very.light.light.light.light.inverted.dimmer {
252+
.very.very.very.very.light.inverted.dimmer {
253253
background: @veryLightInvertedBackgroundColor;
254254
}
255255
}

‎src/definitions/modules/dropdown.less

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1328,8 +1328,8 @@ select.ui.dropdown {
13281328
margin: 0 !important;
13291329
border-top: @menuBorder;
13301330
}
1331-
.ui.scrolling.dropdown .menu .item.item.item,
1332-
.ui.dropdown .scrolling.menu > .item.item.item {
1331+
.ui.ui.ui.scrolling.dropdown .menu .item,
1332+
.ui.ui.ui.dropdown .scrolling.menu > .item {
13331333
border-top: @scrollingMenuItemBorder;
13341334
}
13351335
.ui.scrolling.dropdown .menu .item:first-child,

0 commit comments

Comments
 (0)