fomantic-ui 2.9.1-beta.4 → 2.9.1-beta.40

package/dist/components/grid.css

@@ -1,5 +1,5 @@
 /*!
- * # Fomantic-UI 2.9.1-beta.4+9773a1d - Grid
+ * # Fomantic-UI 2.9.1-beta.40+0bffb4a - Grid
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -14,30 +14,17 @@
 *******************************/
 
 .ui.grid {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
-  -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
-  -webkit-box-align: stretch;
-      -ms-flex-align: stretch;
-          align-items: stretch;
+  flex-flow: row wrap;
+  align-items: stretch;
   padding: 0;
 }
 
-/*----------------------
+/* ----------------------
       Remove Gutters
------------------------*/
-
+----------------------- */
 .ui.grid {
-  margin-top: -1rem;
-  margin-bottom: -1rem;
-  margin-left: -1rem;
-  margin-right: -1rem;
+  margin: -1rem -1rem;
 }
 .ui.relaxed.grid {
   margin-left: -1.5rem;
@@ -53,10 +40,9 @@
   margin-top: 1rem;
 }
 
-/*-------------------
+/* -------------------
        Columns
---------------------*/
-
+-------------------- */
 
 /* Standard 16 column */
 .ui.grid > .column:not(.row),
@@ -73,37 +59,24 @@
   padding-right: 1rem;
 }
 
-/*-------------------
+/* -------------------
         Rows
---------------------*/
-
+-------------------- */
 .ui.grid > .row {
   position: relative;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
-  -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
-  -webkit-box-pack: inherit;
-      -ms-flex-pack: inherit;
-          justify-content: inherit;
-  -webkit-box-align: stretch;
-      -ms-flex-align: stretch;
-          align-items: stretch;
+  flex-flow: row wrap;
+  justify-content: inherit;
+  align-items: stretch;
   width: 100% !important;
   padding: 0;
   padding-top: 1rem;
   padding-bottom: 1rem;
 }
 
-/*-------------------
+/* -------------------
        Columns
---------------------*/
-
+-------------------- */
 
 /* Vertical padding when no rows */
 .ui.grid > .column:not(.row) {
@@ -115,19 +88,17 @@
   margin-bottom: 0;
 }
 
-/*-------------------
+/* -------------------
       Content
---------------------*/
-
+-------------------- */
 .ui.grid > .row > img,
 .ui.grid > .row > .column > img {
   max-width: 100%;
 }
 
-/*-------------------
+/* -------------------
     Loose Coupling
---------------------*/
-
+-------------------- */
 
 /* Collapse Margin on Consecutive Grid */
 .ui.grid > .ui.grid:first-child {
@@ -145,9 +116,7 @@
 
 /* Align Dividers with Gutter */
 .ui.grid .row + .ui.divider {
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
+  flex-grow: 1;
   margin: 1rem 1rem;
 }
 .ui.grid .column + .ui.vertical.divider {
@@ -157,8 +126,7 @@
 /* Remove Border on Last Horizontal Segment */
 .ui.grid > .row > .column:last-child > .horizontal.segment,
 .ui.grid > .column:last-child > .horizontal.segment {
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
 }
 
 
@@ -167,10 +135,9 @@
 *******************************/
 
 
-/*-----------------------
-         Page Grid
-  -------------------------*/
-
+/* -----------------------
+           Page Grid
+    ------------------------- */
 @media only screen and (max-width: 767.98px) {
   .ui.page.grid {
     width: auto;
@@ -217,10 +184,9 @@
   }
 }
 
-/*-------------------
+/* -------------------
      Column Count
---------------------*/
-
+-------------------- */
 
 /* Assume full width with one column */
 .ui.grid > .column:only-child,
@@ -346,14 +312,12 @@
 
 /* Celled Page */
 .ui.celled.page.grid {
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
 }
 
-/*-------------------
-      Column Width
-  --------------------*/
-
+/* -------------------
+        Column Width
+    -------------------- */
 
 /* Sizing Combinations */
 .ui.grid > .row > [class*="one wide"].column,
@@ -453,10 +417,9 @@
   width: 100% !important;
 }
 
-/*----------------------
-      Width per Device
-  -----------------------*/
-
+/* ----------------------
+        Width per Device
+    ----------------------- */
 
 /* Mobile Sizing Combinations */
 @media only screen and (min-width: 320px) and (max-width: 767.98px) {
@@ -958,17 +921,14 @@
   }
 }
 
-/*----------------------
-          Centered
-  -----------------------*/
-
+/* ----------------------
+            Centered
+    ----------------------- */
 .ui.centered.grid,
 .ui.centered.grid > .row,
 .ui.grid > .centered.row {
   text-align: center;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  justify-content: center;
 }
 .ui.centered.grid > .column:not(.aligned):not(.justified):not(.row),
 .ui.centered.grid > .row > .column:not(.aligned):not(.justified),
@@ -982,10 +942,9 @@
   margin-right: auto;
 }
 
-/*----------------------
-          Relaxed
-  -----------------------*/
-
+/* ----------------------
+            Relaxed
+    ----------------------- */
 .ui.relaxed.grid > .column:not(.row),
 .ui.relaxed.grid > .row > .column,
 .ui.grid > .relaxed.row > .column {
@@ -1011,26 +970,24 @@
   margin-right: 2.5rem;
 }
 
-/*----------------------
-          Padded
-  -----------------------*/
-
+/* ----------------------
+            Padded
+    ----------------------- */
 .ui.padded.grid:not(.vertically):not(.horizontally) {
-  margin: 0 !important;
+  margin: 0;
 }
 [class*="horizontally padded"].ui.grid {
-  margin-left: 0 !important;
-  margin-right: 0 !important;
+  margin-left: 0;
+  margin-right: 0;
 }
 [class*="vertically padded"].ui.grid {
-  margin-top: 0 !important;
-  margin-bottom: 0 !important;
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
-/*----------------------
-         "Floated"
-  -----------------------*/
-
+/* ----------------------
+           "Floated"
+    ----------------------- */
 .ui.grid [class*="left floated"].column {
   margin-right: auto;
 }
@@ -1038,14 +995,12 @@
   margin-left: auto;
 }
 
-/*----------------------
-          Divided
-  -----------------------*/
-
+/* ----------------------
+            Divided
+    ----------------------- */
 .ui.divided.grid:not([class*="vertically divided"]) > .column:not(.row),
 .ui.divided.grid:not([class*="vertically divided"]) > .row > .column {
-  -webkit-box-shadow: -1px 0 0 0 rgba(34, 36, 38, 0.15);
-          box-shadow: -1px 0 0 0 rgba(34, 36, 38, 0.15);
+  box-shadow: -1px 0 0 0 rgba(34, 36, 38, 0.15);
 }
 
 /* Swap from padding to margin on columns to have dividers align */
@@ -1064,8 +1019,7 @@
 /* No divider on first column on row */
 .ui.divided.grid:not([class*="vertically divided"]) > .column:first-child,
 .ui.divided.grid:not([class*="vertically divided"]) > .row > .column:first-child {
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
 }
 
 /* No space on top of first row */
@@ -1075,12 +1029,10 @@
 
 /* Divided Row */
 .ui.grid > .divided.row > .column {
-  -webkit-box-shadow: -1px 0 0 0 rgba(34, 36, 38, 0.15);
-          box-shadow: -1px 0 0 0 rgba(34, 36, 38, 0.15);
+  box-shadow: -1px 0 0 0 rgba(34, 36, 38, 0.15);
 }
 .ui.grid > .divided.row > .column:first-child {
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
 }
 
 /* Vertically Divided */
@@ -1095,8 +1047,7 @@
   width: calc(100% - 2rem);
   height: 1px;
   margin: 0 1rem;
-  -webkit-box-shadow: 0 -1px 0 0 rgba(34, 36, 38, 0.15);
-          box-shadow: 0 -1px 0 0 rgba(34, 36, 38, 0.15);
+  box-shadow: 0 -1px 0 0 rgba(34, 36, 38, 0.15);
 }
 
 /* Padded Horizontally Divided */
@@ -1107,24 +1058,20 @@
 
 /* First Row Vertically Divided */
 .ui[class*="vertically divided"].grid > .row:first-child::before {
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
 }
 
 /* Inverted Divided */
 .ui.inverted.divided.grid:not([class*="vertically divided"]) > .column:not(.row),
 .ui.inverted.divided.grid:not([class*="vertically divided"]) > .row > .column {
-  -webkit-box-shadow: -1px 0 0 0 rgba(255, 255, 255, 0.1);
-          box-shadow: -1px 0 0 0 rgba(255, 255, 255, 0.1);
+  box-shadow: -1px 0 0 0 rgba(255, 255, 255, 0.1);
 }
 .ui.inverted.divided.grid:not([class*="vertically divided"]) > .column:not(.row):first-child,
 .ui.inverted.divided.grid:not([class*="vertically divided"]) > .row > .column:first-child {
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
 }
 .ui.inverted[class*="vertically divided"].grid > .row::before {
-  -webkit-box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.1);
-          box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.1);
+  box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.1);
 }
 
 /* Relaxed */
@@ -1139,32 +1086,27 @@
   width: calc(100% - 5rem);
 }
 
-/*----------------------
-           Celled
-  -----------------------*/
-
+/* ----------------------
+             Celled
+    ----------------------- */
 .ui.celled.grid {
   width: 100%;
   margin: 1em 0;
-  -webkit-box-shadow: 0 0 0 1px #D4D4D5;
-          box-shadow: 0 0 0 1px #D4D4D5;
+  box-shadow: 0 0 0 1px #d4d4d5;
 }
 .ui.celled.grid > .row {
   width: 100% !important;
   margin: 0;
   padding: 0;
-  -webkit-box-shadow: 0 -1px 0 0 #D4D4D5;
-          box-shadow: 0 -1px 0 0 #D4D4D5;
+  box-shadow: 0 -1px 0 0 #d4d4d5;
 }
 .ui.celled.grid > .column:not(.row),
 .ui.celled.grid > .row > .column {
-  -webkit-box-shadow: -1px 0 0 0 #D4D4D5;
-          box-shadow: -1px 0 0 0 #D4D4D5;
+  box-shadow: -1px 0 0 0 #d4d4d5;
 }
 .ui.celled.grid > .column:first-child,
 .ui.celled.grid > .row > .column:first-child {
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
 }
 .ui.celled.grid > .column:not(.row),
 .ui.celled.grid > .row > .column {
@@ -1181,23 +1123,19 @@
 
 /* Internally Celled */
 .ui[class*="internally celled"].grid {
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
   margin: 0;
 }
 .ui[class*="internally celled"].grid > .row:first-child {
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
 }
 .ui[class*="internally celled"].grid > .row > .column:first-child {
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
 }
 
-/*----------------------
-     Vertically Aligned
-  -----------------------*/
-
+/* ----------------------
+       Vertically Aligned
+    ----------------------- */
 
 /* Top Aligned */
 .ui[class*="top aligned"].grid > .column:not(.row),
@@ -1205,13 +1143,9 @@
 .ui.grid > [class*="top aligned"].row > .column,
 .ui.grid > [class*="top aligned"].column:not(.row),
 .ui.grid > .row > [class*="top aligned"].column {
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
+  flex-direction: column;
   vertical-align: top;
-  -ms-flex-item-align: start !important;
-      align-self: flex-start !important;
+  align-self: flex-start !important;
 }
 
 /* Middle Aligned */
@@ -1220,13 +1154,9 @@
 .ui.grid > [class*="middle aligned"].row > .column,
 .ui.grid > [class*="middle aligned"].column:not(.row),
 .ui.grid > .row > [class*="middle aligned"].column {
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
+  flex-direction: column;
   vertical-align: middle;
-  -ms-flex-item-align: center !important;
-      align-self: center !important;
+  align-self: center !important;
 }
 
 /* Bottom Aligned */
@@ -1235,13 +1165,9 @@
 .ui.grid > [class*="bottom aligned"].row > .column,
 .ui.grid > [class*="bottom aligned"].column:not(.row),
 .ui.grid > .row > [class*="bottom aligned"].column {
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
+  flex-direction: column;
   vertical-align: bottom;
-  -ms-flex-item-align: end !important;
-      align-self: flex-end !important;
+  align-self: flex-end !important;
 }
 
 /* Stretched */
@@ -1250,30 +1176,21 @@
 .ui.grid > .stretched.row > .column,
 .ui.grid > .stretched.column:not(.row),
 .ui.grid > .row > .stretched.column {
-  display: -webkit-inline-box !important;
-  display: -ms-inline-flexbox !important;
   display: inline-flex !important;
-  -ms-flex-item-align: stretch;
-      align-self: stretch;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
+  align-self: stretch;
+  flex-direction: column;
 }
 .ui.stretched.grid > .row > .column > *,
 .ui.stretched.grid > .column > *,
 .ui.grid > .stretched.row > .column > *,
 .ui.grid > .stretched.column:not(.row) > *,
 .ui.grid > .row > .stretched.column > * {
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
+  flex-grow: 1;
 }
 
-/*----------------------
-    Horizontally Centered
-  -----------------------*/
-
+/* ----------------------
+      Horizontally Centered
+    ----------------------- */
 
 /* Left Aligned */
 .ui[class*="left aligned"].grid > .column,
@@ -1282,8 +1199,7 @@
 .ui.grid > [class*="left aligned"].column.column,
 .ui.grid > .row > [class*="left aligned"].column.column {
   text-align: left;
-  -ms-flex-item-align: inherit;
-      align-self: inherit;
+  align-self: inherit;
 }
 
 /* Center Aligned */
@@ -1293,13 +1209,10 @@
 .ui.grid > [class*="center aligned"].column.column,
 .ui.grid > .row > [class*="center aligned"].column.column {
   text-align: center;
-  -ms-flex-item-align: inherit;
-      align-self: inherit;
+  align-self: inherit;
 }
 .ui[class*="center aligned"].grid {
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  justify-content: center;
 }
 
 /* Right Aligned */
@@ -1309,8 +1222,7 @@
 .ui.grid > [class*="right aligned"].column.column,
 .ui.grid > .row > [class*="right aligned"].column.column {
   text-align: right;
-  -ms-flex-item-align: inherit;
-      align-self: inherit;
+  align-self: inherit;
 }
 
 /* Justified */
@@ -1325,174 +1237,155 @@
           hyphens: auto;
 }
 
-/*----------------------
+/* ----------------------
          Colored
------------------------*/
-
+----------------------- */
 .ui.grid > .primary.row,
 .ui.grid > .primary.column,
 .ui.grid > .row > .primary.column {
-  background-color: #2185D0;
-  color: #FFFFFF;
+  background-color: #2185d0;
+  color: #fff;
 }
 .ui.grid > .secondary.row,
 .ui.grid > .secondary.column,
 .ui.grid > .row > .secondary.column {
-  background-color: #1B1C1D;
-  color: #FFFFFF;
+  background-color: #1b1c1d;
+  color: #fff;
 }
 .ui.grid > .red.row,
 .ui.grid > .red.column,
 .ui.grid > .row > .red.column {
-  background-color: #DB2828;
-  color: #FFFFFF;
+  background-color: #db2828;
+  color: #fff;
 }
 .ui.grid > .orange.row,
 .ui.grid > .orange.column,
 .ui.grid > .row > .orange.column {
-  background-color: #F2711C;
-  color: #FFFFFF;
+  background-color: #f2711c;
+  color: #fff;
 }
 .ui.grid > .yellow.row,
 .ui.grid > .yellow.column,
 .ui.grid > .row > .yellow.column {
-  background-color: #FBBD08;
-  color: #FFFFFF;
+  background-color: #fbbd08;
+  color: #fff;
 }
 .ui.grid > .olive.row,
 .ui.grid > .olive.column,
 .ui.grid > .row > .olive.column {
-  background-color: #B5CC18;
-  color: #FFFFFF;
+  background-color: #b5cc18;
+  color: #fff;
 }
 .ui.grid > .green.row,
 .ui.grid > .green.column,
 .ui.grid > .row > .green.column {
-  background-color: #21BA45;
-  color: #FFFFFF;
+  background-color: #21ba45;
+  color: #fff;
 }
 .ui.grid > .teal.row,
 .ui.grid > .teal.column,
 .ui.grid > .row > .teal.column {
-  background-color: #00B5AD;
-  color: #FFFFFF;
+  background-color: #00b5ad;
+  color: #fff;
 }
 .ui.grid > .blue.row,
 .ui.grid > .blue.column,
 .ui.grid > .row > .blue.column {
-  background-color: #2185D0;
-  color: #FFFFFF;
+  background-color: #2185d0;
+  color: #fff;
 }
 .ui.grid > .violet.row,
 .ui.grid > .violet.column,
 .ui.grid > .row > .violet.column {
-  background-color: #6435C9;
-  color: #FFFFFF;
+  background-color: #6435c9;
+  color: #fff;
 }
 .ui.grid > .purple.row,
 .ui.grid > .purple.column,
 .ui.grid > .row > .purple.column {
-  background-color: #A333C8;
-  color: #FFFFFF;
+  background-color: #a333c8;
+  color: #fff;
 }
 .ui.grid > .pink.row,
 .ui.grid > .pink.column,
 .ui.grid > .row > .pink.column {
-  background-color: #E03997;
-  color: #FFFFFF;
+  background-color: #e03997;
+  color: #fff;
 }
 .ui.grid > .brown.row,
 .ui.grid > .brown.column,
 .ui.grid > .row > .brown.column {
-  background-color: #A5673F;
-  color: #FFFFFF;
+  background-color: #a5673f;
+  color: #fff;
 }
 .ui.grid > .grey.row,
 .ui.grid > .grey.column,
 .ui.grid > .row > .grey.column {
   background-color: #767676;
-  color: #FFFFFF;
+  color: #fff;
 }
 .ui.grid > .black.row,
 .ui.grid > .black.column,
 .ui.grid > .row > .black.column {
-  background-color: #1B1C1D;
-  color: #FFFFFF;
+  background-color: #1b1c1d;
+  color: #fff;
 }
 
-/*----------------------
-        Equal Width
-  -----------------------*/
-
+/* ----------------------
+          Equal Width
+    ----------------------- */
 .ui[class*="equal width"].grid > .column:not(.row),
 .ui[class*="equal width"].grid > .row > .column,
 .ui.grid > [class*="equal width"].row > .column {
   display: inline-block;
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
+  flex-grow: 1;
 }
 .ui[class*="equal width"].grid > .wide.column,
 .ui[class*="equal width"].grid > .row > .wide.column,
 .ui.grid > [class*="equal width"].row > .wide.column {
-  -webkit-box-flex: 0;
-      -ms-flex-positive: 0;
-          flex-grow: 0;
+  flex-grow: 0;
 }
 
-/*----------------------
-          Reverse
-  -----------------------*/
-
+/* ----------------------
+            Reverse
+    ----------------------- */
 
 /* Mobile */
 @media only screen and (max-width: 767.98px) {
   .ui[class*="mobile reversed"].grid,
   .ui[class*="mobile reversed"].grid > .row,
   .ui.grid > [class*="mobile reversed"].row {
-    -webkit-box-orient: horizontal;
-    -webkit-box-direction: reverse;
-        -ms-flex-direction: row-reverse;
-            flex-direction: row-reverse;
+    flex-direction: row-reverse;
   }
   .ui[class*="mobile vertically reversed"].grid,
   .ui.stackable[class*="mobile reversed"] {
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: reverse;
-        -ms-flex-direction: column-reverse;
-            flex-direction: column-reverse;
+    flex-direction: column-reverse;
   }
   
 /* Divided Reversed */
   .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .column:first-child,
   .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:first-child {
-    -webkit-box-shadow: -1px 0 0 0 rgba(34, 36, 38, 0.15);
-            box-shadow: -1px 0 0 0 rgba(34, 36, 38, 0.15);
+    box-shadow: -1px 0 0 0 rgba(34, 36, 38, 0.15);
   }
   .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .column:last-child,
   .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:last-child {
-    -webkit-box-shadow: none;
-            box-shadow: none;
+    box-shadow: none;
   }
   
 /* Vertically Divided Reversed */
   .ui.grid[class*="vertically divided"][class*="mobile vertically reversed"] > .row:first-child::before {
-    -webkit-box-shadow: 0 -1px 0 0 rgba(34, 36, 38, 0.15);
-            box-shadow: 0 -1px 0 0 rgba(34, 36, 38, 0.15);
+    box-shadow: 0 -1px 0 0 rgba(34, 36, 38, 0.15);
   }
   .ui.grid[class*="vertically divided"][class*="mobile vertically reversed"] > .row:last-child::before {
-    -webkit-box-shadow: none;
-            box-shadow: none;
+    box-shadow: none;
   }
   
 /* Celled Reversed */
   .ui[class*="mobile reversed"].celled.grid > .row > .column:first-child {
-    -webkit-box-shadow: -1px 0 0 0 #D4D4D5;
-            box-shadow: -1px 0 0 0 #D4D4D5;
+    box-shadow: -1px 0 0 0 #d4d4d5;
   }
   .ui[class*="mobile reversed"].celled.grid > .row > .column:last-child {
-    -webkit-box-shadow: none;
-            box-shadow: none;
+    box-shadow: none;
   }
 }
 
@@ -1501,48 +1394,36 @@
   .ui[class*="tablet reversed"].grid,
   .ui[class*="tablet reversed"].grid > .row,
   .ui.grid > [class*="tablet reversed"].row {
-    -webkit-box-orient: horizontal;
-    -webkit-box-direction: reverse;
-        -ms-flex-direction: row-reverse;
-            flex-direction: row-reverse;
+    flex-direction: row-reverse;
   }
   .ui[class*="tablet vertically reversed"].grid {
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: reverse;
-        -ms-flex-direction: column-reverse;
-            flex-direction: column-reverse;
+    flex-direction: column-reverse;
   }
   
 /* Divided Reversed */
   .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .column:first-child,
   .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:first-child {
-    -webkit-box-shadow: -1px 0 0 0 rgba(34, 36, 38, 0.15);
-            box-shadow: -1px 0 0 0 rgba(34, 36, 38, 0.15);
+    box-shadow: -1px 0 0 0 rgba(34, 36, 38, 0.15);
   }
   .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .column:last-child,
   .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:last-child {
-    -webkit-box-shadow: none;
-            box-shadow: none;
+    box-shadow: none;
   }
   
 /* Vertically Divided Reversed */
   .ui.grid[class*="vertically divided"][class*="tablet vertically reversed"] > .row:first-child::before {
-    -webkit-box-shadow: 0 -1px 0 0 rgba(34, 36, 38, 0.15);
-            box-shadow: 0 -1px 0 0 rgba(34, 36, 38, 0.15);
+    box-shadow: 0 -1px 0 0 rgba(34, 36, 38, 0.15);
   }
   .ui.grid[class*="vertically divided"][class*="tablet vertically reversed"] > .row:last-child::before {
-    -webkit-box-shadow: none;
-            box-shadow: none;
+    box-shadow: none;
   }
   
 /* Celled Reversed */
   .ui[class*="tablet reversed"].celled.grid > .row > .column:first-child {
-    -webkit-box-shadow: -1px 0 0 0 #D4D4D5;
-            box-shadow: -1px 0 0 0 #D4D4D5;
+    box-shadow: -1px 0 0 0 #d4d4d5;
   }
   .ui[class*="tablet reversed"].celled.grid > .row > .column:last-child {
-    -webkit-box-shadow: none;
-            box-shadow: none;
+    box-shadow: none;
   }
 }
 
@@ -1551,55 +1432,42 @@
   .ui[class*="computer reversed"].grid,
   .ui[class*="computer reversed"].grid > .row,
   .ui.grid > [class*="computer reversed"].row {
-    -webkit-box-orient: horizontal;
-    -webkit-box-direction: reverse;
-        -ms-flex-direction: row-reverse;
-            flex-direction: row-reverse;
+    flex-direction: row-reverse;
   }
   .ui[class*="computer vertically reversed"].grid {
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: reverse;
-        -ms-flex-direction: column-reverse;
-            flex-direction: column-reverse;
+    flex-direction: column-reverse;
   }
   
 /* Divided Reversed */
   .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .column:first-child,
   .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:first-child {
-    -webkit-box-shadow: -1px 0 0 0 rgba(34, 36, 38, 0.15);
-            box-shadow: -1px 0 0 0 rgba(34, 36, 38, 0.15);
+    box-shadow: -1px 0 0 0 rgba(34, 36, 38, 0.15);
   }
   .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .column:last-child,
   .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:last-child {
-    -webkit-box-shadow: none;
-            box-shadow: none;
+    box-shadow: none;
   }
   
 /* Vertically Divided Reversed */
   .ui.grid[class*="vertically divided"][class*="computer vertically reversed"] > .row:first-child::before {
-    -webkit-box-shadow: 0 -1px 0 0 rgba(34, 36, 38, 0.15);
-            box-shadow: 0 -1px 0 0 rgba(34, 36, 38, 0.15);
+    box-shadow: 0 -1px 0 0 rgba(34, 36, 38, 0.15);
   }
   .ui.grid[class*="vertically divided"][class*="computer vertically reversed"] > .row:last-child::before {
-    -webkit-box-shadow: none;
-            box-shadow: none;
+    box-shadow: none;
   }
   
 /* Celled Reversed */
   .ui[class*="computer reversed"].celled.grid > .row > .column:first-child {
-    -webkit-box-shadow: -1px 0 0 0 #D4D4D5;
-            box-shadow: -1px 0 0 0 #D4D4D5;
+    box-shadow: -1px 0 0 0 #d4d4d5;
   }
   .ui[class*="computer reversed"].celled.grid > .row > .column:last-child {
-    -webkit-box-shadow: none;
-            box-shadow: none;
+    box-shadow: none;
   }
 }
 
-/*-------------------
-        Doubling
-  --------------------*/
-
+/* -------------------
+          Doubling
+    -------------------- */
 
 /* Tablet Only */
 @media only screen and (min-width: 768px) and (max-width: 991.98px) {
@@ -1615,8 +1483,7 @@
   .ui.doubling.grid > .row > .column {
     padding-top: 1rem !important;
     padding-bottom: 1rem !important;
-    -webkit-box-shadow: none !important;
-            box-shadow: none !important;
+    box-shadow: none !important;
     margin: 0;
   }
   .ui.grid:not(.stretched) > .doubling.row:not(.stretched) > .column:not(.stretched),
@@ -1712,8 +1579,7 @@
     padding-top: 1rem !important;
     padding-bottom: 1rem !important;
     margin: 0 !important;
-    -webkit-box-shadow: none !important;
-            box-shadow: none !important;
+    box-shadow: none !important;
   }
   .ui[class*="two column"].doubling:not(.stackable).grid > .row > .column,
   .ui[class*="two column"].doubling:not(.stackable).grid > .column:not(.row),
@@ -1792,15 +1658,15 @@
   }
 }
 
-/*-------------------
-        Stackable
-  --------------------*/
-
+/* -------------------
+          Stackable
+    -------------------- */
 @media only screen and (max-width: 767.98px) {
-  .ui.ui.ui.ui.stackable.grid {
+  body > .ui.stackable.grid,
+  .ui:not(.segment):not(.grid) .ui.stackable.grid {
     width: auto;
-    margin-left: 0 !important;
-    margin-right: 0 !important;
+    margin-left: 0;
+    margin-right: 0;
   }
   .ui.stackable.grid > .row > .wide.column,
   .ui.stackable.grid > .wide.column,
@@ -1810,9 +1676,8 @@
   .ui.stackable.grid > .column:not(.row),
   .ui.grid > .stackable.stackable.stackable.row > .column {
     width: 100% !important;
-    margin: 0 0 !important;
-    -webkit-box-shadow: none !important;
-            box-shadow: none !important;
+    margin: 0 !important;
+    box-shadow: none !important;
     padding: 1rem 1rem;
   }
   .ui.stackable.grid:not(.vertically) > .row {
@@ -1830,8 +1695,8 @@
 /* Don't pad inside segment or nested grid */
   .ui.grid .ui.stackable.grid,
   .ui.segment:not(.vertical) .ui.stackable.page.grid {
-    margin-left: -1rem !important;
-    margin-right: -1rem !important;
+    margin-left: -1rem;
+    margin-right: -1rem;
   }
   
 /* Divided Stackable */
@@ -1852,14 +1717,12 @@
   .ui.stackable.celled.grid > .row > .column,
   .ui.stackable.divided:not(.vertically).grid > .row > .column {
     border-top: 1px solid rgba(34, 36, 38, 0.15);
-    -webkit-box-shadow: none !important;
-            box-shadow: none !important;
+    box-shadow: none !important;
     padding-top: 2rem !important;
     padding-bottom: 2rem !important;
   }
   .ui.stackable.celled.grid > .row {
-    -webkit-box-shadow: none !important;
-            box-shadow: none !important;
+    box-shadow: none !important;
   }
   .ui.stackable.divided:not(.vertically).grid > .column:not(.row),
   .ui.stackable.divided:not(.vertically).grid > .row > .column {
@@ -1868,10 +1731,9 @@
   }
 }
 
-/*----------------------
+/* ----------------------
      Only (Device)
------------------------*/
-
+----------------------- */
 
 /* These include arbitrary class repetitions for forced specificity */
 
@@ -1997,10 +1859,9 @@
   }
 }
 
-/*-----------------
-        Compact
-  -----------------*/
-
+/* -----------------
+          Compact
+    ----------------- */
 .ui.ui.ui.compact.grid {
   margin: -0.5rem;
 }
@@ -2016,10 +1877,7 @@
 
 /* Row */
 .ui.ui.ui.compact.grid > .row {
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  padding-left: 0;
-  padding-right: 0;
+  padding: 0.5rem 0;
 }
 
 /* Columns */
@@ -2038,10 +1896,9 @@
   padding: 1em;
 }
 
-/*-----------------
-      Very compact
-  -----------------*/
-
+/* -----------------
+        Very compact
+    ----------------- */
 .ui.ui.ui[class*="very compact"].grid {
   margin: -0.25rem;
 }
@@ -2057,10 +1914,7 @@
 
 /* Row */
 .ui.ui.ui[class*="very compact"].grid > .row {
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
-  padding-left: 0;
-  padding-right: 0;
+  padding: 0.25rem 0;
 }
 
 /* Columns */