Adds responsive styles for tablet/mobile on item view

src/definitions/views/item.less

@@ -30,7 +30,7 @@
   table-layout: fixed;
 
   display: @display;
-  margin: @margin;
+  margin: @itemSpacing 0em;
   width: @width;
   min-height: @minHeight;
   background: @background;
@@ -51,14 +51,14 @@
 ---------------*/
 
 .ui.items {
-  margin: @itemsMargin;
+  margin: @groupMargin;
 }
 
 .ui.items:first-child {
-  margin-top: 0em;
+  margin-top: 0em !important;
 }
 .ui.items:last-child {
-  margin-bottom: 0em;
+  margin-bottom: 0em !important;
 }
 
 /*--------------
@@ -110,11 +110,6 @@
   border-radius: @borderRadius;
 }
 
-/* Default Image Width */
-.ui.items > .item > .image:not(.ui) {
-  width: @imageWidth;
-}
-
 
 /*--------------
      Content
@@ -144,7 +139,7 @@
   display: @contentDisplay;
   margin-left: @contentOffset;
   vertical-align: @contentVerticalAlign;
-  padding-left: @contentImagePadding;
+  padding-left: @contentImageDistance;
 }
 
 .ui.items > .item > .content > .header {
@@ -197,6 +192,7 @@
 ---------------*/
 
 .ui.items > .item > .content > .description {
+  max-width: @descriptionMaxWidth;
   font-size: @descriptionFontSize;
   line-height: @descriptionLineHeight;
   color: @descriptionColor;
@@ -219,6 +215,7 @@
 
 .ui.items > .item .meta {
   font-size: @metaFontSize;
+  line-height: @metaLineHeight;
   color: @metaColor;
 }
 .ui.items > .item .meta * {
@@ -319,10 +316,10 @@
   border-top: @extraDivider;
 }
 .ui.items > .item .extra > * {
-  margin-right: @extraSpacing;
+  margin: @extraRowSpacing @extraSpacing 0em 0em;
 }
 .ui.items > .item .extra > [class*="right floated"] {
-  margin-left: @extraSpacing;
+  margin: @extraRowSpacing 0em 0em @extraSpacing;
 }
 
 .ui.items > .item .extra:after {
@@ -335,6 +332,55 @@
 }
 
 
+/*******************************
+          Responsive
+*******************************/
+
+/* Default Image Width */
+.ui.items > .item > .image:not(.ui) {
+  width: @imageWidth;
+}
+
+
+/* Tablet Only */
+@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
+  .ui.items > .item {
+    margin: @tabletItemSpacing 0em;
+  }
+  .ui.items > .item > .image:not(.ui) {
+    width: @tabletImageWidth;
+  }
+  .ui.items > .item > .image + .content {
+    display: block;
+    padding: 0em 0em 0em @tabletContentImageDistance;
+  }
+
+}
+
+/* Mobily Only */
+@media only screen and (max-width: @largestMobileScreen) {
+  .ui.items > .item {
+    margin: @mobileItemSpacing 0em;
+  }
+  .ui.items > .item > .image {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+  }
+  .ui.items > .item > .image,
+  .ui.items > .item > .image > img {
+    max-width: 100% !important;
+    width: @mobileImageWidth !important;
+    max-height: @mobileImageMaxHeight !important;
+  }
+  .ui.items > .item > .image + .content {
+    display: block;
+    padding: @mobileContentImageDistance 0em 0em;
+  }
+
+}
+
+
 /*******************************
            Variations
 *******************************/

src/themes/packages/default/views/item.variables

@@ -6,14 +6,13 @@
          View
 --------------------*/
 
-/* Items */
-@itemsMargin: 1.5em 0em;
+/* Group */
+@groupMargin: 1.5em 0em;
 
 /* Item */
 @display: table;
 @background: transparent;
 @borderRadius: 0rem;
-@margin: 1em 0em;
 @minHeight: 0px;
 @padding: 0em;
 @width: 100%;
@@ -22,6 +21,19 @@
 @zIndex: '';
 @transition: box-shadow @transitionDuration @transitionEasing;
 
+/* Responsive */
+@itemSpacing: 1em;
+@imageWidth: 175px;
+@contentImageDistance: 1.5em;
+
+@tabletItemSpacing: 1em;
+@tabletImageWidth: 150px;
+@tabletContentImageDistance: 1em;
+
+@mobileItemSpacing: 2em;
+@mobileImageWidth: auto;
+@mobileImageMaxHeight: 250px;
+@mobileContentImageDistance: 1.5em;
 
 /*-------------------
        Content
@@ -30,7 +42,6 @@
 /* Image */
 @imageDisplay: table-cell;
 @imageFloat: none;
-@imageWidth: 175px;
 @imageMaxHeight: '';
 @imageVerticalAlign: top;
 @imageMargin: 0em;
@@ -43,7 +54,6 @@
 /* Content */
 @contentDisplay: table-cell;
 @contentVerticalAlign: top;
-@contentImagePadding: 1.5em;
 
 @contentOffset: 0em;
 @contentBackground: none;
@@ -55,13 +65,14 @@
 @contentBoxShadow: none;
 
 /* Header */
-@headerMargin: 0em;
+@headerMargin: -@lineHeightOffset 0em 0em;
 @headerFontWeight: bold;
 @headerFontSize: 1.2em;
 @headerColor: @darkTextColor;
 
 /* Metadata */
 @metaFontSize: 1em;
+@metaLineHeight: 1em;
 @metaSpacing: 0.3em;
 @metaColor: rgba(0, 0, 0, 0.6);
 
@@ -85,8 +96,9 @@
 
 /* Description */
 @descriptionDistance: 0.6em;
-@descriptionFontSize: 1.1em;
-@descriptionLineHeight: 1.2;
+@descriptionMaxWidth: 550px;
+@descriptionFontSize: 1em;
+@descriptionLineHeight: 1.33;
 @descriptionColor: @textColor;
 
 /* Content Image */
@@ -103,16 +115,17 @@
 
 /* Additional Content */
 @extraDivider: none;
-@extraSpacing: 0.5em;
+@extraSpacing: 0.5rem;
+@extraRowSpacing: 0.5rem;
 
 @extraBackground: none;
 @extraDisplay: block;
 @extraPosition: relative;
-@extraMargin: 1em 0em 0em;
+@extraMargin: (1rem - @extraRowSpacing) 0em 0em;
 @extraTop: 0em;
 @extraLeft: 0em;
 @extraWidth: 100%;
-@extraPadding: 0.25em 0em 0em;
+@extraPadding: 0em 0em 0em;
 @extraBoxShadow: none;
 @extraColor: @lightTextColor;
 @extraTransition: color @transitionDuration @transitionEasing;