Iterating on word order dependencies across all UI #396

src/definitions/collections/grid.less

@@ -558,7 +558,7 @@
   margin-right: (@relaxedGutterWidth / 2);
   width: ~"calc(100% - "@relaxedGutterWidth~")";
 }
-.ui.very.relaxed[class*="vertically divided"].grid > .row:before {
+.ui[class*="very relaxed"][class*="vertically divided"].grid > .row:before {
   margin-left: @veryRelaxedGutterWidth;
   margin-right: @veryRelaxedGutterWidth;
   width: ~"calc(100% - "@veryRelaxedGutterWidth~")";

src/definitions/collections/table.less

@@ -681,17 +681,17 @@
 }
 
 /* Very Basic */
-.ui.very.basic.table {
+.ui[class*="very basic"].table {
   border: none;
 }
-.ui.very.basic.table:not(.sortable):not(.striped) th,
-.ui.very.basic.table:not(.sortable):not(.striped) td {
+.ui[class*="very basic"].table:not(.sortable):not(.striped) th,
+.ui[class*="very basic"].table:not(.sortable):not(.striped) td {
   padding: @basicTableCellVerticalPadding @basicTableCellHorizontalPadding;
 }
-.ui.very.basic.table:not(.sortable):not(.striped) thead th {
+.ui[class*="very basic"].table:not(.sortable):not(.striped) thead th {
   padding-top: 0em;
 }
-.ui.very.basic.table:not(.sortable):not(.striped) tbody tr:last-child td {
+.ui[class*="very basic"].table:not(.sortable):not(.striped) tbody tr:last-child td {
   padding-bottom: 0em;
 }
 
@@ -709,11 +709,11 @@
 }
 
 /* Very */
-.ui.very.padded.table th {
+.ui[class*="very padded"].table th {
   padding-left: @veryPaddedHorizontalPadding;
   padding-right: @veryPaddedHorizontalPadding;
 }
-.ui.very.padded.table td {
+.ui[class*="very padded"].table td {
   padding: @veryPaddedVerticalPadding @veryPaddedHorizontalPadding;
 }
 
@@ -730,11 +730,11 @@
 }
 
 /* Very */
-.ui.very.compact.table th {
+.ui[class*="very compact"].table th {
   padding-left: @veryCompactHorizontalPadding;
   padding-right: @veryCompactHorizontalPadding;
 }
-.ui.very.compact.table td {
+.ui[class*="very compact"].table td {
   padding: @veryCompactVerticalPadding @veryCompactHorizontalPadding;
 }
 

src/definitions/elements/button.less

@@ -480,14 +480,14 @@
        Floated
 --------------------*/
 
-.ui.left.floated.buttons,
-.ui.left.floated.button {
+.ui[class*="left floated"].buttons,
+.ui[class*="left floated"].button {
   float: left;
   margin-left: 0em;
   margin-right: @floatedMargin;
 }
-.ui.right.floated.buttons,
-.ui.right.floated.button {
+.ui[class*="right floated"].buttons,
+.ui[class*="right floated"].button {
   float: right;
   margin-right: 0em;
   margin-left: @floatedMargin;
@@ -918,41 +918,41 @@
 }
 
 /* Bottom Side */
-.bottom.attached.ui.buttons {
+[class*="bottom attached"].ui.buttons {
   margin-top: @attachedOffset;
   border-radius: 0em 0em @borderRadius @borderRadius;
 }
-.bottom.attached.ui.buttons .button:first-child {
+[class*="bottom attached"].ui.buttons .button:first-child {
   border-radius: 0em 0em 0em @borderRadius;
 }
-.bottom.attached.ui.buttons .button:last-child {
+[class*="bottom attached"].ui.buttons .button:last-child {
   border-radius: 0em 0em @borderRadius 0em;
 }
 
 /* Left Side */
-.left.attached.ui.buttons {
+[class*="left attached"].ui.buttons {
   margin-left: @attachedOffset;
   border-radius: 0em @borderRadius @borderRadius 0em;
 }
-.left.attached.ui.buttons .button:first-child {
+[class*="left attached"].ui.buttons .button:first-child {
   margin-left: @attachedOffset;
   border-radius: 0em @borderRadius 0em 0em;
 }
-.left.attached.ui.buttons .button:last-child {
+[class*="left attached"].ui.buttons .button:last-child {
   margin-left: @attachedOffset;
   border-radius: 0em 0em @borderRadius 0em;
 }
 /* Right Side */
-.right.attached.ui.buttons,
-.right.attached.ui.buttons .button {
+[class*="right attached"].ui.buttons,
+[class*="right attached"].ui.buttons .button {
   margin-right: @attachedOffset;
   border-radius: @borderRadius 0em 0em @borderRadius;
 }
-.right.attached.ui.buttons .button:first-child {
+[class*="right attached"].ui.buttons .button:first-child {
   margin-left: @attachedOffset;
   border-radius: @borderRadius 0em 0em 0em;
 }
-.right.attached.ui.buttons .button:last-child {
+[class*="right attached"].ui.buttons .button:last-child {
   margin-left: @attachedOffset;
   border-radius: 0em 0em 0em @borderRadius;
 }

src/definitions/elements/list.less

@@ -100,7 +100,7 @@ ol.ui.list ol,
   vertical-align: @iconContentVerticalAlign;
   transition: @iconTransition;
 }
-.ui.list .item > .top.aligned.icon {
+.ui.list .item > [class*="top aligned"].icon {
   vertical-align: top;
 }
 .ui.list .item > .icon:only-child {
@@ -117,7 +117,7 @@ ol.ui.list ol,
   padding-right: @imageDistance;
   vertical-align: @imageAlign;
 }
-.ui.list .item > .top.aligned.image {
+.ui.list .item > [class*="top aligned"].image {
   vertical-align: top;
 }
 .ui.list .item > .image img {
@@ -672,14 +672,14 @@ ol.ui.horizontal.list li:before,
   padding-left: @relaxedHorizontalPadding;
   padding-right: @relaxedHorizontalPadding;
 }
-.ui.very.relaxed.list:not(.horizontal) .item {
+.ui[class*="very relaxed"].list:not(.horizontal) .item {
   padding-top: @veryRelaxedVerticalPadding;
   padding-bottom: @veryRelaxedVerticalPadding;
 }
-.ui.very.relaxed.list .header {
+.ui[class*="very relaxed"].list .header {
   /*margin-bottom: @veryRelaxedHeaderMargin;*/
 }
-.ui.horizontal.very.relaxed.list .item {
+.ui.horizontal[class*="very relaxed"].list .item {
   padding-left: @veryRelaxedHorizontalPadding;
   padding-right: @veryRelaxedHorizontalPadding;
 }

src/definitions/elements/segment.less

@@ -26,16 +26,11 @@
 .ui.segment {
   position: relative;
   background-color: @background;
-
   box-shadow: @boxShadow;
-
   margin: @margin 0em;
   padding: @verticalPadding @horizontalPadding;
-
   border-radius: @borderRadius;
   border: @border;
-  box-sizing: border-box;
-
 }
 
 .ui.segment:first-child {
@@ -98,19 +93,19 @@
 }
 
 /* Label */
-.ui.bottom.attached.segment > .top.attached.label {
+.ui[class*="bottom attached"].segment > [class*="top attached"].label {
   border-top-left-radius: 0em;
   border-top-right-radius: 0em;
 }
-.ui.top.attached.segment > .bottom.attached.label {
+.ui[class*="top attached"].segment > [class*="bottom attached"].label {
   border-bottom-left-radius: 0em;
   border-bottom-right-radius: 0em;
 }
-.ui.attached.segment:not(.top):not(.bottom) > .top.attached.label {
+.ui.attached.segment:not(.top):not(.bottom) > [class*="top attached"].label {
   border-top-left-radius: 0em;
   border-top-right-radius: 0em;
 }
-.ui.attached.segment:not(.top):not(.bottom) > .bottom.attached.label {
+.ui.attached.segment:not(.top):not(.bottom) > [class*="bottom attached"].label {
   border-bottom-left-radius: 0em;
   border-bottom-right-radius: 0em;
 }
@@ -135,7 +130,7 @@
   border: @border;
   box-shadow: @boxShadow;
 }
-.ui.very.basic.table.segment {
+.ui[class*="very basic"].table.segment {
   padding: @verticalPadding @horizontalPadding;
 }
 
@@ -369,13 +364,13 @@
        Aligned
 --------------------*/
 
-.ui.left.aligned.segment {
+.ui[class*="left aligned"].segment {
   text-align: left;
 }
-.ui.right.aligned.segment {
+.ui[class*="right aligned"].segment {
   text-align: right;
 }
-.ui.center.aligned.segment {
+.ui[class*="center aligned"].segment {
   text-align: center;
 }
 
@@ -384,10 +379,10 @@
 --------------------*/
 
 .ui.floated.segment,
-.ui.left.floated.segment {
+.ui[class*="left floated"].segment {
   float: left;
 }
-.ui.right.floated.segment {
+.ui[class*="right floated"].segment {
   float: right;
 }
 
@@ -455,7 +450,7 @@
   box-shadow: @attachedBoxShadow;
 }
 
-.ui.top.attached.segment {
+.ui[class*="top attached"].segment {
   top: @attachedTopOffset;
   bottom: 0px;
 
@@ -463,11 +458,11 @@
   margin-bottom: 0em;
   border-radius: @borderRadius @borderRadius 0em 0em;
 }
-.ui.segment.top.attached:first-child {
+.ui.segment[class*="top attached"]:first-child {
   margin-top: 0em;
 }
 
-.ui.segment.bottom.attached {
+.ui.segment[class*="bottom attached"] {
   top: @attachedBottomOffset;
   bottom: 0px;
   margin-top: 0em;
@@ -475,7 +470,7 @@
   box-shadow: @attachedBottomBoxShadow;
   border-radius: 0em 0em @borderRadius @borderRadius;
 }
-.ui.segment.bottom.attached:last-child {
+.ui.segment[class*="bottom attached"]:last-child {
   margin-bottom: 0em;
 }
 

src/definitions/modules/popup.less

@@ -209,7 +209,7 @@
   width: @wideWidth;
   max-width: @wideWidth;
 }
-.ui.very.wide.popup {
+.ui[class*="very wide"].popup {
   width: @veryWideWidth;
   max-width: @veryWideWidth;
 }

src/definitions/views/card.less

@@ -172,12 +172,12 @@
      Floated
 ---------------*/
 
-.ui.cards > .card  .left.floated,
-.ui.card .left.floated {
+.ui.cards > .card  [class*="left floated"],
+.ui.card [class*="left floated"] {
   float: left;
 }
-.ui.cards > .card .right.floated,
-.ui.card .right.floated {
+.ui.cards > .card [class*="right floated"],
+.ui.card [class*="right floated"] {
   float: right;
 }
 
@@ -242,8 +242,8 @@
   margin-right: 0em;
 }
 
-.ui.cards > .card .meta .right.floated,
-.ui.card .meta .right.floated {
+.ui.cards > .card .meta [class*="right floated"],
+.ui.card .meta [class*="right floated"] {
   margin-right: 0em;
   margin-left: @metaSpacing;
 }

src/definitions/views/item.less

@@ -170,7 +170,7 @@
 .ui.items > .item  .left.floated {
   float: left;
 }
-.ui.items > .item .right.floated {
+.ui.items > .item [class*="right floated"] {
   float: right;
 }
 
@@ -228,7 +228,7 @@
   margin-right: 0em;
 }
 
-.ui.items > .item .meta .right.floated {
+.ui.items > .item .meta [class*="right floated"] {
   margin-right: 0em;
   margin-left: @metaSpacing;
 }
@@ -321,7 +321,7 @@
 .ui.items > .item .extra > * {
   margin-right: @extraSpacing;
 }
-.ui.items > .item .extra > .right.floated {
+.ui.items > .item .extra > [class*="right floated"] {
   margin-left: @extraSpacing;
 }
 
@@ -343,13 +343,13 @@
        Aligned
 --------------------*/
 
-.ui.items > .item > .image + .top.aligned.content {
+.ui.items > .item > .image + [class*="top aligned"].content {
   vertical-align: top;
 }
-.ui.items > .item > .image + .middle.aligned.content {
+.ui.items > .item > .image + [class*="middle aligned"].content {
   vertical-align: middle;
 }
-.ui.items > .item > .image + .bottom.aligned.content {
+.ui.items > .item > .image + [class*="bottom aligned"].content {
   vertical-align: bottom;
 }