Skip to content

Commit 5bf395a

Browse files
lubber-delubber-de
authored
fix(multiple): make sure real icon selectors are adressed
In certain situations only .icon selectors were used to address icons incomponents. However this interferes with a possible icon button resulting in wrong sizes or wrong aligned margins and colors for those buttons. This PR adds the i tag to those selectors to make sure only a "real" icon is selected as it was supposed to be.
1 parent 5a18189 commit 5bf395a

File tree

13 files changed

+66
-66
lines changed

13 files changed

+66
-66
lines changed

‎src/definitions/collections/menu.less

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -253,7 +253,7 @@
253253
display: block;
254254
}
255255
.ui.menu .ui.dropdown .menu > .item > .icons,
256-
.ui.menu .ui.dropdown .menu > .item > .icon:not(.dropdown) {
256+
.ui.menu .ui.dropdown .menu > .item > i.icon:not(.dropdown) {
257257
display: inline-block;
258258
font-size: @dropdownItemIconFontSize !important;
259259
float: @dropdownItemIconFloat;
@@ -284,7 +284,7 @@
284284

285285
& when (@variationMenuVertical) {
286286
/* Vertical */
287-
.ui.vertical.menu .dropdown.item > .icon {
287+
.ui.vertical.menu .dropdown.item > i.icon {
288288
float: right;
289289
content: "\f0da";
290290
margin-left: 1em;
@@ -1225,24 +1225,24 @@ Floated Menu / Item
12251225
}
12261226

12271227
/* Icon */
1228-
.ui.icon.menu .item > .icon:not(.dropdown) {
1228+
.ui.icon.menu .item > i.icon:not(.dropdown) {
12291229
margin: 0;
12301230
opacity: 1;
12311231
}
12321232

12331233
/* Icon Gylph */
1234-
.ui.icon.menu .icon:before {
1234+
.ui.icon.menu i.icon:before {
12351235
opacity: 1;
12361236
}
12371237

12381238
/* (x) Item Icon */
1239-
.ui.menu .icon.item > .icon {
1239+
.ui.menu .icon.item > i.icon {
12401240
width: auto;
12411241
margin: 0 auto;
12421242
}
12431243

12441244
/* Vertical Icon */
1245-
.ui.vertical.icon.menu .item > .icon:not(.dropdown) {
1245+
.ui.vertical.icon.menu .item > i.icon:not(.dropdown) {
12461246
display: block;
12471247
opacity: 1;
12481248
margin: 0 auto;
@@ -1271,7 +1271,7 @@ Floated Menu / Item
12711271
}
12721272

12731273
/* Icon */
1274-
.ui.labeled.icon.menu > .item > .icon:not(.dropdown) {
1274+
.ui.labeled.icon.menu > .item > i.icon:not(.dropdown) {
12751275
height: 1em;
12761276
display: block;
12771277
font-size: @labeledIconSize !important;

‎src/definitions/collections/message.less

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@
107107

108108

109109
/* Icon */
110-
.ui.message > .icon {
110+
.ui.message > i.icon {
111111
margin-right: @iconDistance;
112112
}
113113

@@ -225,7 +225,7 @@
225225
width: 100%;
226226
align-items: center;
227227
}
228-
.ui.icon.message > .icon:not(.close) {
228+
.ui.icon.message > i.icon:not(.close) {
229229
display: block;
230230
flex: 0 0 auto;
231231
width: auto;
@@ -241,10 +241,10 @@
241241
}
242242

243243

244-
.ui.icon.message .icon:not(.close) + .content {
244+
.ui.icon.message > i.icon:not(.close) + .content {
245245
padding-left: @iconContentDistance;
246246
}
247-
.ui.icon.message .circular.icon {
247+
.ui.icon.message > i.circular.icon {
248248
width: 1em;
249249
}
250250
}

‎src/definitions/collections/table.less

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -154,10 +154,10 @@
154154
}
155155

156156
/* Icons */
157-
.ui.table > .icon {
157+
.ui.table > i.icon {
158158
vertical-align: @iconVerticalAlign;
159159
}
160-
.ui.table > .icon:only-child {
160+
.ui.table > i.icon:only-child {
161161
margin: 0;
162162
}
163163

‎src/definitions/elements/header.less

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@
6262
Icon
6363
---------------*/
6464

65-
.ui.header > .icon {
65+
.ui.header > i.icon {
6666
display: table-cell;
6767
opacity: @iconOpacity;
6868
font-size: @iconSize;
@@ -71,7 +71,7 @@
7171
}
7272

7373
/* With Text Node */
74-
.ui.header .icon:only-child {
74+
.ui.header > i.icon:only-child {
7575
display: inline-block;
7676
padding: 0;
7777
margin-right: @iconMargin;
@@ -111,7 +111,7 @@
111111
}
112112

113113
/* After Icon */
114-
.ui.header > .icon + .content {
114+
.ui.header > i.icon + .content {
115115
padding-left: @iconMargin;
116116
display: table-cell;
117117
vertical-align: @contentIconAlignment;
@@ -220,7 +220,7 @@
220220
.ui.icon.header:first-child {
221221
margin-top: @iconHeaderFirstMargin;
222222
}
223-
.ui.icon.header .icon {
223+
.ui.icon.header > i.icon {
224224
float: none;
225225
display: block;
226226
width: auto;
@@ -238,14 +238,14 @@
238238
display: block;
239239
padding: 0;
240240
}
241-
.ui.icon.header .circular.icon {
241+
.ui.icon.header > i.circular.icon {
242242
font-size: @circularHeaderIconSize;
243243
}
244-
.ui.icon.header .square.icon {
244+
.ui.icon.header > i.square.icon {
245245
font-size: @squareHeaderIconSize;
246246
}
247247
& when (@variationHeaderBlock) {
248-
.ui.block.icon.header .icon {
248+
.ui.block.icon.header > i.icon {
249249
margin-bottom: 0;
250250
}
251251
}
@@ -401,7 +401,7 @@ each(@colors, {
401401
.ui.dividing.header .sub.header {
402402
padding-bottom: @dividedSubHeaderPadding;
403403
}
404-
.ui.dividing.header .icon {
404+
.ui.dividing.header i.icon {
405405
margin-bottom: @dividedIconPadding;
406406
}
407407
& when (@variationHeaderInverted) {

‎src/definitions/elements/input.less

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -392,7 +392,7 @@
392392
.ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > input {
393393
padding-right: @labeledIconInputMargin !important;
394394
}
395-
.ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > .icon {
395+
.ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > i.icon {
396396
margin-right: @labeledIconMargin;
397397
}
398398

@@ -406,16 +406,16 @@
406406
.ui[class*="left corner labeled"].icon.input > input {
407407
padding-left: @labeledIconInputMargin !important;
408408
}
409-
.ui[class*="left corner labeled"].icon.input > .icon {
409+
.ui[class*="left corner labeled"].icon.input > i.icon {
410410
margin-left: @labeledIconMargin;
411411
}
412412
}
413413
}
414414
& when (@variationInputIcon) {
415-
.ui.icon.input > textarea ~ .icon {
415+
.ui.icon.input > textarea ~ i.icon {
416416
height: @textareaIconHeight;
417417
}
418-
:not(.field) > .ui.transparent.icon.input > textarea ~ .icon {
418+
:not(.field) > .ui.transparent.icon.input > textarea ~ i.icon {
419419
height: @transparentTextareaIconHeight;
420420
}
421421
}

‎src/definitions/elements/step.less

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -144,20 +144,20 @@
144144
}
145145

146146
/* Icon */
147-
.ui.steps .step > .icon {
147+
.ui.steps .step > i.icon {
148148
line-height: 1;
149149
font-size: @iconSize;
150150
margin: 0 @iconDistance 0 0;
151151
}
152-
.ui.steps .step > .icon,
153-
.ui.steps .step > .icon ~ .content {
152+
.ui.steps .step > i.icon,
153+
.ui.steps .step > i.icon ~ .content {
154154
display: block;
155155
flex: 0 1 auto;
156156
align-self: @iconAlign;
157157
}
158158

159159
/* Horizontal Icon */
160-
.ui.steps:not(.vertical) .step > .icon {
160+
.ui.steps:not(.vertical) .step > i.icon {
161161
width: auto;
162162
}
163163

@@ -299,7 +299,7 @@
299299
}
300300

301301
/* Icon */
302-
.ui.steps:not(.unstackable) .step > .icon,
302+
.ui.steps:not(.unstackable) .step > i.icon,
303303
.ui.ordered.steps:not(.unstackable) .step:before {
304304
margin: 0 0 @mobileIconDistance 0;
305305
}
@@ -340,7 +340,7 @@
340340
color: @activeColor;
341341
}
342342
.ui.ordered.steps .step.active:before,
343-
.ui.steps .active.step .icon {
343+
.ui.steps .active.step i.icon {
344344
color: @activeIconColor;
345345
}
346346

@@ -369,7 +369,7 @@
369369
}
370370

371371
/* Completed */
372-
.ui.steps .step.completed > .icon:before,
372+
.ui.steps .step.completed > i.icon:before,
373373
.ui.ordered.steps .step.completed:before {
374374
color: @completedColor;
375375
}
@@ -441,7 +441,7 @@
441441
}
442442

443443
/* Icon */
444-
.ui[class*="tablet stackable"].steps .step > .icon,
444+
.ui[class*="tablet stackable"].steps .step > i.icon,
445445
.ui[class*="tablet stackable"].ordered.steps .step:before {
446446
margin: 0 0 @mobileIconDistance 0;
447447
}
@@ -590,7 +590,7 @@
590590
background: @invertedActiveBackground;
591591
}
592592
.ui.inverted.ordered.steps .step.active:before,
593-
.ui.inverted.steps .active.step .icon {
593+
.ui.inverted.steps .active.step i.icon {
594594
color: @invertedSelectedTextColor;
595595
}
596596

‎src/definitions/modules/calendar.less

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@
8181
border-left: none;
8282
}
8383

84-
.ui.calendar .ui.table tr th .icon {
84+
.ui.calendar .ui.table tr th i.icon {
8585
margin: 0;
8686
}
8787

‎src/definitions/modules/dropdown.less

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -154,7 +154,7 @@
154154
margin-right: @floatedDistance !important;
155155
}
156156

157-
.ui.dropdown .menu .item > .icon.floated,
157+
.ui.dropdown .menu .item > i.icon.floated,
158158
.ui.dropdown .menu .item > .flag.floated,
159159
.ui.dropdown .menu .item > .image.floated,
160160
.ui.dropdown .menu .item > img.floated {
@@ -198,7 +198,7 @@
198198
padding: @menuInputPadding;
199199
}
200200
.ui.dropdown .menu > .input:not(.transparent) .button,
201-
.ui.dropdown .menu > .input:not(.transparent) .icon,
201+
.ui.dropdown .menu > .input:not(.transparent) i.icon,
202202
.ui.dropdown .menu > .input:not(.transparent) .label {
203203
padding-top: @menuInputVerticalPadding;
204204
padding-bottom: @menuInputVerticalPadding;
@@ -250,27 +250,27 @@
250250
---------------*/
251251

252252
/* Icons / Flags / Labels / Image */
253-
.ui.dropdown > .text > .icon,
253+
.ui.dropdown > .text > i.icon,
254254
.ui.dropdown > .text > .label,
255255
.ui.dropdown > .text > .flag,
256256
.ui.dropdown > .text > img,
257257
.ui.dropdown > .text > .image {
258258
margin-top: @textLineHeightOffset;
259259
}
260-
.ui.dropdown .menu > .item > .icon,
260+
.ui.dropdown .menu > .item > i.icon,
261261
.ui.dropdown .menu > .item > .label,
262262
.ui.dropdown .menu > .item > .flag,
263263
.ui.dropdown .menu > .item > .image,
264264
.ui.dropdown .menu > .item > img {
265265
margin-top: @itemLineHeightOffset;
266266
}
267267

268-
.ui.dropdown > .text > .icon,
268+
.ui.dropdown > .text > i.icon,
269269
.ui.dropdown > .text > .label,
270270
.ui.dropdown > .text > .flag,
271271
.ui.dropdown > .text > img,
272272
.ui.dropdown > .text > .image,
273-
.ui.dropdown .menu > .item > .icon,
273+
.ui.dropdown .menu > .item > i.icon,
274274
.ui.dropdown .menu > .item > .label,
275275
.ui.dropdown .menu > .item > .flag,
276276
.ui.dropdown .menu > .item > .image,
@@ -673,7 +673,7 @@ select.ui.dropdown {
673673
}
674674

675675
/* Filtered Text */
676-
.ui.active.search.dropdown input.search:focus + .text .icon,
676+
.ui.active.search.dropdown input.search:focus + .text i.icon,
677677
.ui.active.search.dropdown input.search:focus + .text .flag {
678678
opacity: @selectionTextUnderlayIconOpacity;
679679
}
@@ -1699,7 +1699,7 @@ select.ui.dropdown {
16991699
color: @invertedDefaultTextFocusColor;
17001700
}
17011701

1702-
.ui.inverted.active.search.dropdown input.search:focus + .text .icon,
1702+
.ui.inverted.active.search.dropdown input.search:focus + .text i.icon,
17031703
.ui.inverted.active.search.dropdown input.search:focus + .text .flag {
17041704
opacity: @invertedSelectionTextUnderlayIconOpacity;
17051705
}

‎src/definitions/modules/embed.less

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@
7676
Icon
7777
---------------*/
7878

79-
.ui.embed > .icon {
79+
.ui.embed > i.icon {
8080
cursor: pointer;
8181
position: absolute;
8282
top: 0;
@@ -85,7 +85,7 @@
8585
height: 100%;
8686
z-index: 2;
8787
}
88-
.ui.embed > .icon:after {
88+
.ui.embed > i.icon:after {
8989
position: absolute;
9090
top: 0;
9191
left: 0;
@@ -97,7 +97,7 @@
9797
opacity: @placeholderBackgroundOpacity;
9898
transition: @placeholderBackgroundTransition;
9999
}
100-
.ui.embed > .icon:before {
100+
.ui.embed > i.icon:before {
101101
position: absolute;
102102
top: 50%;
103103
left: 50%;
@@ -118,19 +118,19 @@
118118
Hover
119119
---------------*/
120120

121-
.ui.embed .icon:hover:after {
121+
.ui.embed i.icon:hover:after {
122122
background: @hoverPlaceholderBackground;
123123
opacity: @hoverPlaceholderBackgroundOpacity;
124124
}
125-
.ui.embed .icon:hover:before {
125+
.ui.embed i.icon:hover:before {
126126
color: @hoverIconColor;
127127
}
128128

129129
/*--------------
130130
Active
131131
---------------*/
132132

133-
.ui.active.embed > .icon,
133+
.ui.active.embed > i.icon,
134134
.ui.active.embed > .placeholder {
135135
display: none;
136136
}

0 commit comments

Comments
 (0)