diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md index 234344410..26bb8ec7a 100644 --- a/RELEASE-NOTES.md +++ b/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 diff --git a/src/definitions/views/item.less b/src/definitions/views/item.less index cba0f4748..b31dd2eab 100755 --- a/src/definitions/views/item.less +++ b/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(); diff --git a/src/themes/default/views/item.variables b/src/themes/default/views/item.variables index f4746033e..96597e732 100644 --- a/src/themes/default/views/item.variables +++ b/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; \ No newline at end of file + +/* Unstackable */ +@unstackableMobileImageWidth: 125px; +