From b07fab059a3e89463a1c4ecc02967a408e85ba8e Mon Sep 17 00:00:00 2001
From: jlukic <jacklukic@gmail.com>
Date: Tue, 16 Sep 2014 14:40:04 -0400
Subject: [PATCH] Iterating on word order dependencies across all UI #396

---
 src/definitions/collections/grid.less  |  2 +-
 src/definitions/collections/table.less | 18 +++++++-------
 src/definitions/elements/button.less   | 28 +++++++++++-----------
 src/definitions/elements/list.less     | 10 ++++----
 src/definitions/elements/segment.less  | 33 +++++++++++---------------
 src/definitions/modules/popup.less     |  2 +-
 src/definitions/views/card.less        | 12 +++++-----
 src/definitions/views/item.less        | 12 +++++-----
 8 files changed, 56 insertions(+), 61 deletions(-)

diff --git a/src/definitions/collections/grid.less b/src/definitions/collections/grid.less
index 119fab57a..16b26a5fa 100755
--- a/src/definitions/collections/grid.less
+++ b/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~")";
diff --git a/src/definitions/collections/table.less b/src/definitions/collections/table.less
index 2ed6fffd4..723882889 100755
--- a/src/definitions/collections/table.less
+++ b/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;
 }
 
diff --git a/src/definitions/elements/button.less b/src/definitions/elements/button.less
index 77e2111da..dda9c6c43 100755
--- a/src/definitions/elements/button.less
+++ b/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;
 }
diff --git a/src/definitions/elements/list.less b/src/definitions/elements/list.less
index ab9a0ff5d..67da6bd9d 100755
--- a/src/definitions/elements/list.less
+++ b/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;
 }
diff --git a/src/definitions/elements/segment.less b/src/definitions/elements/segment.less
index 35b7bb5ef..6c2125cbb 100755
--- a/src/definitions/elements/segment.less
+++ b/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;
 }
 
diff --git a/src/definitions/modules/popup.less b/src/definitions/modules/popup.less
index f65a0d1b4..9687ae0ce 100755
--- a/src/definitions/modules/popup.less
+++ b/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;
 }
diff --git a/src/definitions/views/card.less b/src/definitions/views/card.less
index 9c12c0f9d..e5993a18b 100644
--- a/src/definitions/views/card.less
+++ b/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;
 }
diff --git a/src/definitions/views/item.less b/src/definitions/views/item.less
index 156f9927b..d4722de97 100755
--- a/src/definitions/views/item.less
+++ b/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;
 }