fomantic-ui 2.9.0-beta.77 → 2.9.0-beta.80

package/src/definitions/views/item.less

@@ -78,31 +78,32 @@
 }
 
 
+& when (@variationItemImage) {
+  /*--------------
+       Images
+  ---------------*/
 
-/*--------------
-     Images
----------------*/
-
-.ui.items > .item > .image {
-  position: relative;
-  flex: 0 0 auto;
-  display: @imageDisplay;
-  float: @imageFloat;
-  margin: @imageMargin;
-  padding: @imagePadding;
-  max-height: @imageMaxHeight;
-  align-self: @imageVerticalAlign;
-}
-.ui.items > .item > .image > img {
-  display: block;
-  width: 100%;
-  height: auto;
-  border-radius: @imageBorderRadius;
-  border: @imageBorder;
-}
+  .ui.items > .item > .image {
+    position: relative;
+    flex: 0 0 auto;
+    display: @imageDisplay;
+    float: @imageFloat;
+    margin: @imageMargin;
+    padding: @imagePadding;
+    max-height: @imageMaxHeight;
+    align-self: @imageVerticalAlign;
+  }
+  .ui.items > .item > .image > img {
+    display: block;
+    width: 100%;
+    height: auto;
+    border-radius: @imageBorderRadius;
+    border: @imageBorder;
+  }
 
-.ui.items > .item > .image:only-child > img {
-  border-radius: @borderRadius;
+  .ui.items > .item > .image:only-child > img {
+    border-radius: @borderRadius;
+  }
 }
 
 
@@ -140,56 +141,64 @@
   padding-left: @contentImageDistance;
 }
 
-.ui.items > .item > .content > .header {
-  display: inline-block;
-  margin: @headerMargin;
-  font-family: @headerFont;
-  font-weight: @headerFontWeight;
-  color: @headerColor;
-}
-/* Default Header Size */
-.ui.items > .item > .content > .header:not(.ui) {
-  font-size: @headerFontSize;
+& when (@variationItemHeader) {
+  .ui.items > .item > .content > .header {
+    display: inline-block;
+    margin: @headerMargin;
+    font-family: @headerFont;
+    font-weight: @headerFontWeight;
+    color: @headerColor;
+  }
+  /* Default Header Size */
+  .ui.items > .item > .content > .header:not(.ui) {
+    font-size: @headerFontSize;
+  }
 }
 
-/*--------------
-     Floated
----------------*/
+& when (@variationItemFloated) {
+  /*--------------
+       Floated
+  ---------------*/
 
-.ui.items > .item [class*="left floated"] {
-  float: left;
-}
-.ui.items > .item [class*="right floated"] {
-  float: right;
+  .ui.items > .item [class*="left floated"] {
+    float: left;
+  }
+  .ui.items > .item [class*="right floated"] {
+    float: right;
+  }
 }
 
 
-/*--------------
-  Content Image
----------------*/
+& when (@variationItemImage) {
+  /*--------------
+    Content Image
+  ---------------*/
 
-.ui.items > .item .content img {
-  align-self: @contentImageVerticalAlign;
-  width: @contentImageWidth;
-}
-.ui.items > .item img.avatar,
-.ui.items > .item .avatar img {
-  width: @avatarSize;
-  height: @avatarSize;
-  border-radius: @avatarBorderRadius;
+  .ui.items > .item .content img {
+    align-self: @contentImageVerticalAlign;
+    width: @contentImageWidth;
+  }
+  .ui.items > .item img.avatar,
+  .ui.items > .item .avatar img {
+    width: @avatarSize;
+    height: @avatarSize;
+    border-radius: @avatarBorderRadius;
+  }
 }
 
 
-/*--------------
-   Description
----------------*/
+& when (@variationItemDescription) {
+  /*--------------
+     Description
+  ---------------*/
 
-.ui.items > .item > .content > .description {
-  margin-top: @descriptionDistance;
-  max-width: @descriptionMaxWidth;
-  font-size: @descriptionFontSize;
-  line-height: @descriptionLineHeight;
-  color: @descriptionColor;
+  .ui.items > .item > .content > .description {
+    margin-top: @descriptionDistance;
+    max-width: @descriptionMaxWidth;
+    font-size: @descriptionFontSize;
+    line-height: @descriptionLineHeight;
+    color: @descriptionColor;
+  }
 }
 
 /*--------------
@@ -203,26 +212,30 @@
   margin-bottom: 0;
 }
 
-/*--------------
-      Meta
----------------*/
+& when (@variationItemMeta) {
+  /*--------------
+        Meta
+  ---------------*/
 
-.ui.items > .item .meta {
-  margin: @metaMargin;
-  font-size: @metaFontSize;
-  line-height: @metaLineHeight;
-  color: @metaColor;
-}
-.ui.items > .item .meta * {
-  margin-right: @metaSpacing;
-}
-.ui.items > .item .meta :last-child {
-  margin-right: 0;
-}
+  .ui.items > .item .meta {
+    margin: @metaMargin;
+    font-size: @metaFontSize;
+    line-height: @metaLineHeight;
+    color: @metaColor;
+  }
+  .ui.items > .item .meta * {
+    margin-right: @metaSpacing;
+  }
+  .ui.items > .item .meta :last-child {
+    margin-right: 0;
+  }
 
-.ui.items > .item .meta [class*="right floated"] {
-  margin-right: 0;
-  margin-left: @metaSpacing;
+  & when (@variationItemFloated) {
+    .ui.items > .item .meta [class*="right floated"] {
+      margin-right: 0;
+      margin-left: @metaSpacing;
+    }
+  }
 }
 
 /*--------------
@@ -238,20 +251,24 @@
   color: @contentLinkHoverColor;
 }
 
-/* Header */
-.ui.items > .item > .content > a.header {
-  color: @headerLinkColor;
-}
-.ui.items > .item > .content > a.header:hover {
-  color: @headerLinkHoverColor;
+& when (@variationItemHeader) {
+  /* Header */
+  .ui.items > .item > .content > a.header {
+    color: @headerLinkColor;
+  }
+  .ui.items > .item > .content > a.header:hover {
+    color: @headerLinkHoverColor;
+  }
 }
 
-/* Meta */
-.ui.items > .item .meta > a:not(.ui) {
-  color: @metaLinkColor;
-}
-.ui.items > .item .meta > a:not(.ui):hover {
-  color: @metaLinkHoverColor;
+& when (@variationItemMeta) {
+  /* Meta */
+  .ui.items > .item .meta > a:not(.ui) {
+    color: @metaLinkColor;
+  }
+  .ui.items > .item .meta > a:not(.ui):hover {
+    color: @metaLinkHoverColor;
+  }
 }
 
 
@@ -262,68 +279,76 @@
 
 /*-----Star----- */
 
-/* Icon */
-.ui.items > .item > .content .favorite.icon {
-  cursor: pointer;
-  opacity: @actionOpacity;
-  transition: @actionTransition;
-}
-.ui.items > .item > .content .favorite.icon:hover {
-  opacity: @actionHoverOpacity;
-  color: @favoriteColor;
-}
-.ui.items > .item > .content .active.favorite.icon {
-  color: @favoriteActiveColor;
-}
-
-/*-----Like----- */
-
-/* Icon */
-.ui.items > .item > .content .like.icon {
-  cursor: pointer;
-  opacity: @actionOpacity;
-  transition: @actionTransition;
-}
-.ui.items > .item > .content .like.icon:hover {
-  opacity: @actionHoverOpacity;
-  color: @likeColor;
-}
-.ui.items > .item > .content .active.like.icon {
-  color: @likeActiveColor;
+& when (@variationItemFavorite) {
+  /* Icon */
+  .ui.items > .item > .content .favorite.icon {
+    cursor: pointer;
+    opacity: @actionOpacity;
+    transition: @actionTransition;
+  }
+  .ui.items > .item > .content .favorite.icon:hover {
+    opacity: @actionHoverOpacity;
+    color: @favoriteColor;
+  }
+  .ui.items > .item > .content .active.favorite.icon {
+    color: @favoriteActiveColor;
+  }
 }
 
-/*----------------
-  Extra Content
------------------*/
+& when (@variationItemLike) {
+  /*-----Like----- */
 
-.ui.items > .item .extra {
-  display: @extraDisplay;
-  position: @extraPosition;
-  background: @extraBackground;
-  margin: @extraMargin;
-  width: @extraWidth;
-  padding: @extraPadding;
-  top: @extraTop;
-  left: @extraLeft;
-  color: @extraColor;
-  box-shadow: @extraBoxShadow;
-  transition: @extraTransition;
-  border-top: @extraDivider;
-}
-.ui.items > .item .extra > * {
-  margin: (@extraRowSpacing / 2) @extraHorizontalSpacing (@extraRowSpacing / 2) 0;
-}
-.ui.items > .item .extra > [class*="right floated"] {
-  margin: (@extraRowSpacing / 2) 0 (@extraRowSpacing / 2) @extraHorizontalSpacing;
-}
+  /* Icon */
+  .ui.items > .item > .content .like.icon {
+    cursor: pointer;
+    opacity: @actionOpacity;
+    transition: @actionTransition;
+  }
+  .ui.items > .item > .content .like.icon:hover {
+    opacity: @actionHoverOpacity;
+    color: @likeColor;
+  }
+  .ui.items > .item > .content .active.like.icon {
+    color: @likeActiveColor;
+  }
+}
+
+& when (@variationItemExtra) {
+  /*----------------
+    Extra Content
+  -----------------*/
+
+  .ui.items > .item .extra {
+    display: @extraDisplay;
+    position: @extraPosition;
+    background: @extraBackground;
+    margin: @extraMargin;
+    width: @extraWidth;
+    padding: @extraPadding;
+    top: @extraTop;
+    left: @extraLeft;
+    color: @extraColor;
+    box-shadow: @extraBoxShadow;
+    transition: @extraTransition;
+    border-top: @extraDivider;
+  }
+  .ui.items > .item .extra > * {
+    margin: (@extraRowSpacing / 2) @extraHorizontalSpacing (@extraRowSpacing / 2) 0;
+  }
+  & when (@variationItemFloated) {
+    .ui.items > .item .extra > [class*="right floated"] {
+      margin: (@extraRowSpacing / 2) 0 (@extraRowSpacing / 2) @extraHorizontalSpacing;
+    }
+  }
 
-.ui.items > .item .extra:after {
-  display: block;
-  content: ' ';
-  height: 0;
-  clear: both;
-  overflow: hidden;
-  visibility: hidden;
+  .ui.items > .item .extra:after {
+    display: block;
+    content: ' ';
+    height: 0;
+    clear: both;
+    overflow: hidden;
+    visibility: hidden;
+  }
 }
 
 
@@ -404,8 +429,10 @@
   .ui.relaxed.items > .item {
     margin: @relaxedItemSpacing 0;
   }
-  .ui[class*="very relaxed"].items > .item {
-    margin: @veryRelaxedItemSpacing 0;
+  & when (@variationItemVeryRelaxed) {
+    .ui[class*="very relaxed"].items > .item {
+      margin: @veryRelaxedItemSpacing 0;
+    }
   }
 }
 
@@ -434,9 +461,11 @@
       margin: 0;
       padding: @relaxedItemSpacing 0;
     }
-    .ui[class*="very relaxed"].divided.items > .item {
-      margin: 0;
-      padding: @veryRelaxedItemSpacing 0;
+    & when (@variationItemVeryRelaxed) {
+      .ui[class*="very relaxed"].divided.items > .item {
+        margin: 0;
+        padding: @veryRelaxedItemSpacing 0;
+      }
     }
   }
 }
@@ -451,9 +480,11 @@
     cursor: pointer;
   }
 
-  .ui.items a.item:hover .content .header,
-  .ui.link.items > .item:hover .content .header {
-    color: @headerLinkHoverColor;
+  & when (@variationItemHeader) {
+    .ui.items a.item:hover .content .header,
+    .ui.link.items > .item:hover .content .header {
+      color: @headerLinkHoverColor;
+    }
   }
 }
 
@@ -499,17 +530,25 @@
     background: @invertedContentBackground;
     color: @invertedContentColor;
   }
-  .ui.inverted.items > .item .extra {
-    background: @invertedExtraBackground;
+  & when (@variationItemExtra) {
+    .ui.inverted.items > .item .extra {
+      background: @invertedExtraBackground;
+    }
   }
-  .ui.inverted.items > .item > .content > .header {
-    color: @invertedHeaderColor;
+  & when (@variationItemHeader) {
+    .ui.inverted.items > .item > .content > .header {
+      color: @invertedHeaderColor;
+    }
   }
-  .ui.inverted.items > .item > .content > .description {
-    color: @invertedDescriptionColor;
+  & when (@variationItemDescription) {
+    .ui.inverted.items > .item > .content > .description {
+      color: @invertedDescriptionColor;
+    }
   }
-  .ui.inverted.items > .item .meta {
-    color: @invertedMetaColor;
+  & when (@variationItemMeta) {
+    .ui.inverted.items > .item .meta {
+      color: @invertedMetaColor;
+    }
   }
   .ui.inverted.items > .item > .content a:not(.ui) {
     color: @invertedContentLinkColor;
@@ -517,42 +556,56 @@
   .ui.inverted.items > .item > .content a:not(.ui):hover {
     color: @invertedContentLinkHoverColor;
   }
-  .ui.inverted.items > .item > .content > a.header {
-    color: @invertedHeaderLinkColor;
-  }
-  .ui.inverted.items > .item > .content > a.header:hover {
-    color: @invertedHeaderLinkHoverColor;
-  }
-  .ui.inverted.items > .item .meta > a:not(.ui) {
-    color: @invertedMetaLinkColor;
-  }
-  .ui.inverted.items > .item .meta > a:not(.ui):hover {
-    color: @invertedMetaLinkHoverColor;
-  }
-  .ui.inverted.items > .item > .content .favorite.icon:hover {
-    color: @invertedFavoriteColor;
-  }
-  .ui.inverted.items > .item > .content .active.favorite.icon {
-    color: @invertedFavoriteActiveColor;
+  & when (@variationItemHeader) {
+    .ui.inverted.items > .item > .content > a.header {
+      color: @invertedHeaderLinkColor;
+    }
+    .ui.inverted.items > .item > .content > a.header:hover {
+      color: @invertedHeaderLinkHoverColor;
+    }
   }
-  .ui.inverted.items > .item > .content .like.icon:hover {
-    color: @invertedLikeColor;
+  & when (@variationItemMeta) {
+    .ui.inverted.items > .item .meta > a:not(.ui) {
+      color: @invertedMetaLinkColor;
+    }
+    .ui.inverted.items > .item .meta > a:not(.ui):hover {
+      color: @invertedMetaLinkHoverColor;
+    }
   }
-  .ui.inverted.items > .item > .content .active.like.icon {
-    color: @invertedLikeActiveColor;
+  & when (@variationItemFavorite) {
+    .ui.inverted.items > .item > .content .favorite.icon:hover {
+      color: @invertedFavoriteColor;
+    }
+    .ui.inverted.items > .item > .content .active.favorite.icon {
+      color: @invertedFavoriteActiveColor;
+    }
   }
-  .ui.inverted.items > .item .extra {
-    color: @invertedExtraColor;
+  & when (@variationItemLike) {
+    .ui.inverted.items > .item > .content .like.icon:hover {
+      color: @invertedLikeColor;
+    }
+    .ui.inverted.items > .item > .content .active.like.icon {
+      color: @invertedLikeActiveColor;
+    }
   }
-  .ui.inverted.items a.item:hover .content .header,
-  .ui.inverted.link.items > .item:hover .content .header {
-    color: @invertedHeaderLinkHoverColor;
+  & when (@variationItemExtra) {
+    .ui.inverted.items > .item .extra {
+      color: @invertedExtraColor;
+    }
   }
-  .ui.inverted.divided.items > .item {
-    border-top: @invertedDividedBorder;
+  & when (@variationItemHeader) {
+    .ui.inverted.items a.item:hover .content .header,
+    .ui.inverted.link.items > .item:hover .content .header {
+      color: @invertedHeaderLinkHoverColor;
+    }
   }
-  .ui.inverted.divided.items > .item:first-child {
-    border-top: none;
+  & when (@variationItemDivided) {
+    .ui.inverted.divided.items > .item {
+      border-top: @invertedDividedBorder;
+    }
+    .ui.inverted.divided.items > .item:first-child {
+      border-top: none;
+    }
   }
 }