Adds unstackable variation to items #2901

RELEASE-NOTES.md

@@ -9,6 +9,7 @@
 
 
 **Enhancements**
+- **Items** - Added `unstackable` variation to prevent items from stacking on mobile #2901
 - **Search** - Added callback as a parameter to behaviors `query`, `show results`, `hide results`, and `search remote`.
 - **Search** - `escape` key now prevents search results from displaying until input is blurred
 

src/definitions/views/item.less

@@ -353,26 +353,25 @@
 
 /* Mobile Only */
 @media only screen and (max-width: @largestMobileScreen) {
-  .ui.items > .item {
+  .ui.items:not(.unstackable) > .item {
     flex-direction: column;
     margin: @mobileItemSpacing 0em;
   }
-  .ui.items > .item > .image {
+  .ui.items:not(.unstackable) > .item > .image {
     display: block;
     margin-left: auto;
     margin-right: auto;
   }
-  .ui.items > .item > .image,
-  .ui.items > .item > .image > img {
+  .ui.items:not(.unstackable) > .item > .image,
+  .ui.items:not(.unstackable) > .item > .image > img {
     max-width: 100% !important;
     width: @mobileImageWidth !important;
     max-height: @mobileImageMaxHeight !important;
   }
-  .ui.items > .item > .image + .content {
+  .ui.items:not(.unstackable) > .item > .image + .content {
     display: block;
     padding: @mobileContentImageDistance 0em 0em;
   }
-
 }
 
 
@@ -458,7 +457,18 @@
 ---------------*/
 
 .ui.items > .item {
-  font-size: @medium;
+  font-size: @relativeMedium;
+}
+
+/*---------------
+   Unstackable
+----------------*/
+
+@media only screen and (max-width: @largestMobileScreen) {
+  .ui.unstackable.items > .item > .image,
+  .ui.unstackable.items > .item > .image > img {
+    width: @unstackableMobileImageWidth !important;
+  }
 }
 
 .loadUIOverrides();

src/themes/default/views/item.variables

@@ -35,6 +35,7 @@
 @mobileImageMaxHeight: 250px;
 @mobileContentImageDistance: 1.5em;
 
+
 /*-------------------
        Content
 --------------------*/
@@ -150,5 +151,7 @@
 @dividedFirstLastMargin: 0em;
 @dividedFirstLastPadding: 0em;
 
-/* Sizes */
-@medium: 1em;
+
+/* Unstackable */
+@unstackableMobileImageWidth: 125px;
+