Skip to content

Commit

Permalink
feat(chore): shorten specificity names
Browse files Browse the repository at this point in the history 
This PR shortens some of the repeated classname selectors but keeps specificity level.
  • Loading branch information
@lubber-de
lubber-de authored Apr 11, 2023
1 parent 9f8725b commit 3deb795
Show file tree
Hide file tree
Showing 8 changed files with 200 additions and 200 deletions.
212 changes: 106 additions & 106 deletions src/definitions/collections/grid.less
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion src/definitions/elements/button.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,7 @@
--------------- */

/* Specificity hack */
.ui.loading.loading.loading.loading.loading.loading.button {
.ui.ui.ui.ui.ui.ui.loading.button {
position: relative;
cursor: default;
text-shadow: none !important;
Expand Down
4 changes: 2 additions & 2 deletions src/definitions/elements/input.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@
Loading
--------------------- */

.ui.loading.loading.input > i.icon::before {
.ui.ui.loading.input > i.icon::before {
position: absolute;
content: "";
top: 50%;
Expand All @@ -121,7 +121,7 @@
border-radius: @circularRadius;
border: @loaderLineWidth solid @loaderFillColor;
}
.ui.loading.loading.input > i.icon::after {
.ui.ui.loading.input > i.icon::after {
position: absolute;
content: "";
top: 50%;
Expand Down
24 changes: 12 additions & 12 deletions src/definitions/elements/list.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -477,16 +477,16 @@ ol.ui.list ol li,
color: @linkListItemColor;
transition: @linkListTransition;
}
.ui.link.list.list a.item:hover,
.ui.link.list.list .item a:not(.ui):hover {
.ui.ui.link.list a.item:hover,
.ui.ui.link.list .item a:not(.ui):hover {
color: @linkListItemHoverColor;
}
.ui.link.list.list a.item:active,
.ui.link.list.list .item a:not(.ui):active {
.ui.ui.link.list a.item:active,
.ui.ui.link.list .item a:not(.ui):active {
color: @linkListItemDownColor;
}
.ui.link.list.list .active.item,
.ui.link.list.list .active.item a:not(.ui) {
.ui.ui.link.list .active.item,
.ui.ui.link.list .active.item a:not(.ui) {
color: @linkListItemActiveColor;
}
& when (@variationListInverted) {
Expand All @@ -496,16 +496,16 @@ ol.ui.list ol li,
.ui.inverted.link.list .item a:not(.ui) {
color: @invertedLinkListItemColor;
}
.ui.inverted.link.list.list a.item:hover,
.ui.inverted.link.list.list .item a:not(.ui):hover {
.ui.ui.inverted.link.list a.item:hover,
.ui.ui.inverted.link.list .item a:not(.ui):hover {
color: @invertedLinkListItemHoverColor;
}
.ui.inverted.link.list.list a.item:active,
.ui.inverted.link.list.list .item a:not(.ui):active {
.ui.ui.inverted.link.list a.item:active,
.ui.ui.inverted.link.list .item a:not(.ui):active {
color: @invertedLinkListItemDownColor;
}
.ui.inverted.link.list.list a.active.item,
.ui.inverted.link.list.list .active.item a:not(.ui) {
.ui.ui.inverted.link.list a.active.item,
.ui.ui.inverted.link.list .active.item a:not(.ui) {
color: @invertedLinkListItemActiveColor;
}
}
Expand Down
142 changes: 71 additions & 71 deletions src/definitions/elements/loader.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,16 +62,16 @@
& when (@variationLoaderSpeeds) {
/* Speeds */

.ui.fast.loading.loading::after,
.ui.fast.loading.loading .input > i.icon::after,
.ui.fast.loading.loading > i.icon::after,
.ui.ui.fast.loading::after,
.ui.ui.fast.loading .input > i.icon::after,
.ui.ui.fast.loading > i.icon::after,
.ui.fast.loader::after {
animation-duration: @loaderSpeedFast;
}

.ui.slow.loading.loading::after,
.ui.slow.loading.loading .input > i.icon::after,
.ui.slow.loading.loading > i.icon::after,
.ui.ui.slow.loading::after,
.ui.ui.slow.loading .input > i.icon::after,
.ui.ui.slow.loading > i.icon::after,
.ui.slow.loader::after {
animation-duration: @loaderSpeedSlow;
}
Expand Down Expand Up @@ -204,49 +204,49 @@
@c: @colors[@@color][color];
@l: @colors[@@color][light];

.ui.@{color}.elastic.loader.loader::before,
.ui.ui.@{color}.elastic.loader::before,
.ui.@{color}.basic.elastic.loading.button::before,
.ui.@{color}.basic.elastic.loading.button::after,
.ui.@{color}.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card)::before,
.ui.@{color}.elastic.loading.loading.loading .input > i.icon::before,
.ui.@{color}.elastic.loading.loading.loading.loading > i.icon::before,
.ui.@{color}.loading.loading.loading.loading:not(.usual):not(.button)::after,
.ui.@{color}.loading.loading.loading.loading .input > i.icon::after,
.ui.@{color}.loading.loading.loading.loading > i.icon::after,
.ui.@{color}.loader.loader.loader::after {
.ui.ui.ui.@{color}.elastic.loading:not(.segment):not(.segments):not(.card)::before,
.ui.ui.ui.@{color}.elastic.loading .input > i.icon::before,
.ui.ui.ui.ui.@{color}.elastic.loading > i.icon::before,
.ui.ui.ui.ui.@{color}.loading:not(.usual):not(.button)::after,
.ui.ui.ui.ui.@{color}.loading .input > i.icon::after,
.ui.ui.ui.ui.@{color}.loading > i.icon::after,
.ui.ui.ui.@{color}.loader::after {
color: @c;
}
.ui.inverted.@{color}.elastic.loader::before,
.ui.inverted.@{color}.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card)::before,
.ui.inverted.@{color}.elastic.loading.loading.loading .input > i.icon::before,
.ui.inverted.@{color}.elastic.loading.loading.loading > i.icon::before,
.ui.inverted.@{color}.loading.loading.loading.loading:not(.usual)::after,
.ui.inverted.@{color}.loading.loading.loading.loading .input > i.icon::after,
.ui.inverted.@{color}.loading.loading.loading.loading > i.icon::after,
.ui.inverted.@{color}.loader.loader.loader::after {
.ui.ui.ui.inverted.@{color}.elastic.loading:not(.segment):not(.segments):not(.card)::before,
.ui.ui.ui.inverted.@{color}.elastic.loading .input > i.icon::before,
.ui.ui.ui.inverted.@{color}.elastic.loading > i.icon::before,
.ui.ui.ui.ui.inverted.@{color}.loading:not(.usual)::after,
.ui.ui.ui.ui.inverted.@{color}.loading .input > i.icon::after,
.ui.ui.ui.ui.inverted.@{color}.loading > i.icon::after,
.ui.ui.ui.inverted.@{color}.loader::after {
color: @l;
}
});
}

.ui.elastic.loader.loader::before,
.ui.elastic.loading.loading.loading::before,
.ui.elastic.loading.loading.loading .input > i.icon::before,
.ui.elastic.loading.loading.loading > i.icon::before,
.ui.loading.loading.loading.loading:not(.usual)::after,
.ui.loading.loading.loading.loading .input > i.icon::after,
.ui.loading.loading.loading.loading > i.icon::after,
.ui.loader.loader.loader::after {
.ui.ui.elastic.loader::before,
.ui.ui.ui.elastic.loading::before,
.ui.ui.ui.elastic.loading .input > i.icon::before,
.ui.ui.ui.elastic.loading > i.icon::before,
.ui.ui.ui.ui.loading:not(.usual)::after,
.ui.ui.ui.ui.loading .input > i.icon::after,
.ui.ui.ui.ui.loading > i.icon::after,
.ui.ui.ui.loader::after {
border-color: currentColor;
}
.ui.elastic.loading.loading.loading.loading.button:not(.inverted):not(.basic)::before {
.ui.ui.ui.ui.elastic.loading.button:not(.inverted):not(.basic)::before {
color: @invertedLoaderLineColor;
}
.ui.elastic.basic.loading.button::before,
.ui.elastic.basic.loading.button::after {
color: @loaderLineColor;
}
.ui.double.loading.loading.loading.loading.button::after {
.ui.ui.ui.ui.double.loading.button::after {
border-bottom-color: currentColor;
}

Expand Down Expand Up @@ -278,30 +278,30 @@
}
}

.ui.loading.loading.loading.loading.loading.loading::after,
.ui.loading.loading.loading.loading.loading.loading .input > i.icon::after,
.ui.loading.loading.loading.loading.loading.loading > i.icon::after,
.ui.loader.loader.loader.loader.loader::after {
.ui.ui.ui.ui.ui.ui.loading::after,
.ui.ui.ui.ui.ui.ui.loading .input > i.icon::after,
.ui.ui.ui.ui.ui.ui.loading > i.icon::after,
.ui.ui.ui.ui.ui.loader::after {
border-left-color: transparent;
border-right-color: transparent;
}
.ui.loading.loading.loading.loading.loading.loading.loading:not(.double)::after,
.ui.loading.loading.loading.loading.loading.loading.loading:not(.double) .input > i.icon::after,
.ui.loading.loading.loading.loading.loading.loading.loading:not(.double) > i.icon::after,
.ui.loader.loader.loader.loader.loader.loader:not(.double)::after {
.ui.ui.ui.ui.ui.ui.ui.loading:not(.double)::after,
.ui.ui.ui.ui.ui.ui.ui.loading:not(.double) .input > i.icon::after,
.ui.ui.ui.ui.ui.ui.ui.loading:not(.double) > i.icon::after,
.ui.ui.ui.ui.ui.ui.loader:not(.double)::after {
border-bottom-color: transparent;
}
.ui.loading.loading.loading.loading.loading.loading.card::after,
.ui.loading.loading.loading.loading.loading.loading.segments::after,
.ui.loading.loading.loading.loading.loading.loading.segment::after,
.ui.loading.loading.loading.loading.loading.loading.form::after {
.ui.ui.ui.ui.ui.ui.loading.card::after,
.ui.ui.ui.ui.ui.ui.loading.segments::after,
.ui.ui.ui.ui.ui.ui.loading.segment::after,
.ui.ui.ui.ui.ui.ui.loading.form::after {
border-left-color: @loaderFillColor;
border-right-color: @loaderFillColor;
}
.ui.loading.loading.loading.loading.loading.loading.card:not(.double)::after,
.ui.loading.loading.loading.loading.loading.loading.segments:not(.double)::after,
.ui.loading.loading.loading.loading.loading.loading.segment:not(.double)::after,
.ui.loading.loading.loading.loading.loading.loading.form:not(.double)::after {
.ui.ui.ui.ui.ui.ui.loading.card:not(.double)::after,
.ui.ui.ui.ui.ui.ui.loading.segments:not(.double)::after,
.ui.ui.ui.ui.ui.ui.loading.segment:not(.double)::after,
.ui.ui.ui.ui.ui.ui.loading.form:not(.double)::after {
border-bottom-color: @loaderFillColor;
}

Expand All @@ -316,17 +316,17 @@
.ui.inverted.dimmer > .ui.elastic.loader {
color: @loaderLineColor;
}
.ui.elastic.loading.loading:not(.form):not(.segment):not(.segments):not(.card)::after,
.ui.elastic.loading.loading .input > i.icon::after,
.ui.elastic.loading.loading > i.icon::after,
.ui.elastic.loader.loader::after {
.ui.ui.elastic.loading:not(.form):not(.segment):not(.segments):not(.card)::after,
.ui.ui.elastic.loading .input > i.icon::after,
.ui.ui.elastic.loading > i.icon::after,
.ui.ui.elastic.loader::after {
animation: loader 1s infinite cubic-bezier(0.27, 1.05, 0.92, 0.61);
animation-delay: 0.3s;
}
.ui.elastic.loading.loading.loading:not(.form):not(.segment):not(.segments):not(.card)::before,
.ui.elastic.loading.loading.loading .input > i.icon::before,
.ui.elastic.loading.loading.loading > i.icon::before,
.ui.elastic.loader.loader::before {
.ui.ui.ui.elastic.loading:not(.form):not(.segment):not(.segments):not(.card)::before,
.ui.ui.ui.elastic.loading .input > i.icon::before,
.ui.ui.ui.elastic.loading > i.icon::before,
.ui.ui.elastic.loader::before {
animation: elastic-loader 1s infinite cubic-bezier(0.27, 1.05, 0.92, 0.61);
// https://github.com/fomantic/Fomantic-UI/pull/363
// stylelint-disable-next-line property-no-vendor-prefix
Expand All @@ -339,30 +339,30 @@
}
}
& when (@variationLoaderSpeeds) {
.ui.slow.elastic.loading.loading:not(.form):not(.segment):not(.segments):not(.card)::after,
.ui.slow.elastic.loading.loading .input > i.icon::after,
.ui.slow.elastic.loading.loading > i.icon::after,
.ui.slow.elastic.loader.loader::after {
.ui.ui.slow.elastic.loading:not(.form):not(.segment):not(.segments):not(.card)::after,
.ui.ui.slow.elastic.loading .input > i.icon::after,
.ui.ui.slow.elastic.loading > i.icon::after,
.ui.ui.slow.elastic.loader::after {
animation-duration: 1.5s;
animation-delay: 0.45s;
}
.ui.slow.elastic.loading.loading.loading:not(.form):not(.segment):not(.segments):not(.card)::before,
.ui.slow.elastic.loading.loading.loading .input > i.icon::before,
.ui.slow.elastic.loading.loading.loading > i.icon::before,
.ui.slow.elastic.loader.loader::before {
.ui.ui.ui.slow.elastic.loading:not(.form):not(.segment):not(.segments):not(.card)::before,
.ui.ui.ui.slow.elastic.loading .input > i.icon::before,
.ui.ui.ui.slow.elastic.loading > i.icon::before,
.ui.ui.slow.elastic.loader::before {
animation-duration: 1.5s;
}
.ui.fast.elastic.loading.loading:not(.form):not(.segment):not(.segments):not(.card)::after,
.ui.fast.elastic.loading.loading .input > i.icon::after,
.ui.fast.elastic.loading.loading > i.icon::after,
.ui.fast.elastic.loader.loader::after {
.ui.ui.fast.elastic.loading:not(.form):not(.segment):not(.segments):not(.card)::after,
.ui.ui.fast.elastic.loading .input > i.icon::after,
.ui.ui.fast.elastic.loading > i.icon::after,
.ui.ui.fast.elastic.loader::after {
animation-duration: 0.66s;
animation-delay: 0.2s;
}
.ui.fast.elastic.loading.loading.loading:not(.form):not(.segment):not(.segments):not(.card)::before,
.ui.fast.elastic.loading.loading.loading .input > i.icon::before,
.ui.fast.elastic.loading.loading.loading > i.icon::before,
.ui.fast.elastic.loader.loader::before {
.ui.ui.ui.fast.elastic.loading:not(.form):not(.segment):not(.segments):not(.card)::before,
.ui.ui.ui.fast.elastic.loading .input > i.icon::before,
.ui.ui.ui.fast.elastic.loading > i.icon::before,
.ui.ui.fast.elastic.loader::before {
animation-duration: 0.66s;
}
}
Expand Down
8 changes: 4 additions & 4 deletions src/definitions/elements/segment.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -368,13 +368,13 @@
Raised
-------------------- */

.ui.raised.raised.segments,
.ui.raised.raised.segment {
.ui.ui.raised.segments,
.ui.ui.raised.segment {
box-shadow: @raisedBoxShadow;
}
& when (@variationSegmentInverted) {
.ui.inverted.raised.raised.segments,
.ui.inverted.raised.raised.segment {
.ui.ui.inverted.raised.segments,
.ui.ui.inverted.raised.segment {
box-shadow: @invertedRaisedBoxShadow;
}
}
Expand Down
4 changes: 2 additions & 2 deletions src/definitions/modules/dimmer.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -220,7 +220,7 @@ body.dimmable > .dimmer {
.light.light.light.light.light.dimmer {
background: @lightBackgroundColor;
}
.very.light.light.light.light.dimmer {
.very.very.very.very.light.dimmer {
background: @veryLightBackgroundColor;
}
}
Expand Down Expand Up @@ -249,7 +249,7 @@ body.dimmable > .dimmer {
.light.light.light.light.light.inverted.dimmer {
background: @lightInvertedBackgroundColor;
}
.very.light.light.light.light.inverted.dimmer {
.very.very.very.very.light.inverted.dimmer {
background: @veryLightInvertedBackgroundColor;
}
}
Expand Down
4 changes: 2 additions & 2 deletions src/definitions/modules/dropdown.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1328,8 +1328,8 @@ select.ui.dropdown {
margin: 0 !important;
border-top: @menuBorder;
}
.ui.scrolling.dropdown .menu .item.item.item,
.ui.dropdown .scrolling.menu > .item.item.item {
.ui.ui.ui.scrolling.dropdown .menu .item,
.ui.ui.ui.dropdown .scrolling.menu > .item {
border-top: @scrollingMenuItemBorder;
}
.ui.scrolling.dropdown .menu .item:first-child,
Expand Down

0 comments on commit 3deb795

Please sign in to comment.