fomantic-ui 2.9.0-beta.30 → 2.9.0-beta.300

package/src/definitions/views/comment.less

@@ -66,7 +66,7 @@
   margin: @nestedCommentsMargin;
   padding: @nestedCommentsPadding;
 }
-.ui.comments .comment > .comments:before{
+.ui.comments .comment > .comments::before{
   position: absolute;
   top: 0;
   left: 0;
@@ -76,25 +76,26 @@
   border-top: @nestedCommentDivider;
   background: @nestedCommentBackground;
 }
-
-/*--------------
-     Avatar
----------------*/
-
-.ui.comments .comment .avatar {
-  display: @avatarDisplay;
-  width: @avatarWidth;
-  height: @avatarHeight;
-  float: @avatarFloat;
-  margin: @avatarMargin;
-}
-.ui.comments .comment img.avatar,
-.ui.comments .comment .avatar img {
-  display: block;
-  margin: 0 auto;
-  width: 100%;
-  height: 100%;
-  border-radius: @avatarBorderRadius;
+& when (@variationCommentAvatar) {
+  /*--------------
+       Avatar
+  ---------------*/
+
+  .ui.comments .comment .avatar {
+    display: @avatarDisplay;
+    width: @avatarWidth;
+    height: @avatarHeight;
+    float: @avatarFloat;
+    margin: @avatarMargin;
+  }
+  .ui.comments .comment img.avatar,
+  .ui.comments .comment .avatar img {
+    display: block;
+    margin: 0 auto;
+    width: 100%;
+    height: 100%;
+    border-radius: @avatarBorderRadius;
+  }
 }
 
 /*--------------
@@ -104,43 +105,49 @@
 .ui.comments .comment > .content {
   display: block;
 }
-/* If there is an avatar move content over */
-.ui.comments .comment > .avatar ~ .content {
-  margin-left: @contentMargin;
+& when (@variationCommentAvatar) {
+  /* If there is an avatar move content over */
+  .ui.comments .comment > .avatar ~ .content {
+    margin-left: @contentMargin;
+  }
 }
 
-/*--------------
-     Author
----------------*/
+& when (@variationCommentAuthor) {
+  /*--------------
+       Author
+  ---------------*/
 
-.ui.comments .comment .author {
-  font-size: @authorFontSize;
-  color: @authorColor;
-  font-weight: @authorFontWeight;
-}
-.ui.comments .comment a.author {
-  cursor: pointer;
-}
-.ui.comments .comment a.author:hover {
-  color: @authorHoverColor;
+  .ui.comments .comment .author {
+    font-size: @authorFontSize;
+    color: @authorColor;
+    font-weight: @authorFontWeight;
+  }
+  .ui.comments .comment a.author {
+    cursor: pointer;
+  }
+  .ui.comments .comment a.author:hover {
+    color: @authorHoverColor;
+  }
 }
 
-/*--------------
-     Metadata
----------------*/
+& when (@variationCommentMeta) {
+  /*--------------
+       Metadata
+  ---------------*/
 
-.ui.comments .comment .metadata {
-  display: @metadataDisplay;
-  margin-left: @metadataSpacing;
-  color: @metadataColor;
-  font-size: @metadataFontSize;
-}
-.ui.comments .comment .metadata > * {
-  display: inline-block;
-  margin: 0 @metadataContentSpacing 0 0;
-}
-.ui.comments .comment .metadata > :last-child {
-  margin-right: 0;
+  .ui.comments .comment .metadata {
+    display: @metadataDisplay;
+    margin-left: @metadataSpacing;
+    color: @metadataColor;
+    font-size: @metadataFontSize;
+  }
+  .ui.comments .comment .metadata > * {
+    display: inline-block;
+    margin: 0 @metadataContentSpacing 0 0;
+  }
+  .ui.comments .comment .metadata > :last-child {
+    margin-right: 0;
+  }
 }
 
 /*--------------------
@@ -156,41 +163,45 @@
 }
 
 
-/*--------------------
-     User Actions
----------------------*/
+& when (@variationCommentActions) {
+  /*--------------------
+       User Actions
+  ---------------------*/
 
-.ui.comments .comment .actions {
-  font-size: @actionFontSize;
-}
-.ui.comments .comment .actions a {
-  cursor: pointer;
-  display: inline-block;
-  margin: 0 @actionContentDistance 0 0;
-  color: @actionLinkColor;
-}
-.ui.comments .comment .actions a:last-child {
-  margin-right: 0;
-}
-.ui.comments .comment .actions a.active,
-.ui.comments .comment .actions a:hover {
-  color: @actionLinkHoverColor;
+  .ui.comments .comment .actions {
+    font-size: @actionFontSize;
+  }
+  .ui.comments .comment .actions a {
+    cursor: pointer;
+    display: inline-block;
+    margin: 0 @actionContentDistance 0 0;
+    color: @actionLinkColor;
+  }
+  .ui.comments .comment .actions a:last-child {
+    margin-right: 0;
+  }
+  .ui.comments .comment .actions a.active,
+  .ui.comments .comment .actions a:hover {
+    color: @actionLinkHoverColor;
+  }
 }
 
-/*--------------------
-      Reply Form
----------------------*/
+& when (@variationCommentReply) {
+  /*--------------------
+        Reply Form
+  ---------------------*/
 
-.ui.comments > .reply.form {
-  margin-top: @replyDistance;
-}
-.ui.comments .comment .reply.form {
-  width: 100%;
-  margin-top: @commentReplyDistance;
-}
-.ui.comments .reply.form textarea {
-  font-size: @replyFontSize;
-  height: @replyHeight;
+  .ui.comments > .reply.form {
+    margin-top: @replyDistance;
+  }
+  .ui.comments .comment .reply.form {
+    width: 100%;
+    margin-top: @commentReplyDistance;
+  }
+  .ui.comments .reply.form textarea {
+    font-size: @replyFontSize;
+    height: @replyHeight;
+  }
 }
 
 /*******************************

package/src/definitions/views/feed.less

@@ -103,159 +103,173 @@
   cursor: pointer;
 }
 
-/*--------------
-      Date
----------------*/
-
-.ui.feed > .event > .content .date {
-  margin: @dateMargin;
-  padding: @datePadding;
-  color: @dateColor;
-  font-weight: @dateFontWeight;
-  font-size: @dateFontSize;
-  font-style: @dateFontStyle;
+& when (@variationFeedDate) {
+  /*--------------
+        Date
+  ---------------*/
+
+  .ui.feed > .event > .content .date {
+    margin: @dateMargin;
+    padding: @datePadding;
+    color: @dateColor;
+    font-weight: @dateFontWeight;
+    font-size: @dateFontSize;
+    font-style: @dateFontStyle;
+  }
 }
 
-/*--------------
-     Summary
----------------*/
-
-.ui.feed > .event > .content .summary {
-  margin: @summaryMargin;
-  font-size: @summaryFontSize;
-  font-weight: @summaryFontWeight;
-  color: @summaryColor;
-}
+& when (@variationFeedSummary) {
+  /*--------------
+       Summary
+  ---------------*/
 
-/* Summary Image */
-.ui.feed > .event > .content .summary img {
-  display: inline-block;
-  width: @summaryImageWidth;
-  height: @summaryImageHeight;
-  margin: @summaryImageMargin;
-  border-radius: @summaryImageBorderRadius;
-  vertical-align: @summaryImageVerticalAlign;
-}
-/*--------------
-      User
----------------*/
+  .ui.feed > .event > .content .summary {
+    margin: @summaryMargin;
+    font-size: @summaryFontSize;
+    font-weight: @summaryFontWeight;
+    color: @summaryColor;
+  }
 
-.ui.feed > .event > .content .user {
-  display: inline-block;
-  font-weight: @userFontWeight;
-  margin-right: @userDistance;
-  vertical-align: baseline;
-}
-.ui.feed > .event > .content .user img {
-  margin: @userImageMargin;
-  width: @userImageWidth;
-  height: @userImageHeight;
-  vertical-align: @userImageVerticalAlign;
+  /* Summary Image */
+  .ui.feed > .event > .content .summary img {
+    display: inline-block;
+    width: @summaryImageWidth;
+    height: @summaryImageHeight;
+    margin: @summaryImageMargin;
+    border-radius: @summaryImageBorderRadius;
+    vertical-align: @summaryImageVerticalAlign;
+  }
+  & when (@variationFeedDate) {
+    /*--------------
+       Inline Date
+    ---------------*/
+
+    /* Date inside Summary */
+    .ui.feed > .event > .content .summary > .date {
+      display: @summaryDateDisplay;
+      float: @summaryDateFloat;
+      font-weight: @summaryDateFontWeight;
+      font-size: @summaryDateFontSize;
+      font-style: @summaryDateFontStyle;
+      margin: @summaryDateMargin;
+      padding: @summaryDatePadding;
+      color: @summaryDateColor;
+    }
+  }
 }
-/*--------------
-   Inline Date
----------------*/
+& when (@variationFeedUser) {
+  /*--------------
+        User
+  ---------------*/
 
-/* Date inside Summary */
-.ui.feed > .event > .content .summary > .date {
-  display: @summaryDateDisplay;
-  float: @summaryDateFloat;
-  font-weight: @summaryDateFontWeight;
-  font-size: @summaryDateFontSize;
-  font-style: @summaryDateFontStyle;
-  margin: @summaryDateMargin;
-  padding: @summaryDatePadding;
-  color: @summaryDateColor;
+  .ui.feed > .event > .content .user {
+    display: inline-block;
+    font-weight: @userFontWeight;
+    margin-right: @userDistance;
+    vertical-align: baseline;
+  }
+  .ui.feed > .event > .content .user img {
+    margin: @userImageMargin;
+    width: @userImageWidth;
+    height: @userImageHeight;
+    vertical-align: @userImageVerticalAlign;
+  }
 }
 
-/*--------------
-  Extra Summary
----------------*/
+& when (@variationFeedExtra) {
+  /*--------------
+    Extra Summary
+  ---------------*/
 
-.ui.feed > .event > .content .extra {
-  margin: @extraMargin;
-  background: @extraBackground;
-  padding: @extraPadding;
-  color: @extraColor;
-}
+  .ui.feed > .event > .content .extra {
+    margin: @extraMargin;
+    background: @extraBackground;
+    padding: @extraPadding;
+    color: @extraColor;
+  }
 
-/* Images */
-.ui.feed > .event > .content .extra.images img {
-  display: inline-block;
-  margin: @extraImageMargin;
-  width: @extraImageWidth;
-}
+  /* Images */
+  .ui.feed > .event > .content .extra.images img {
+    display: inline-block;
+    margin: @extraImageMargin;
+    width: @extraImageWidth;
+  }
 
-/* Text */
-.ui.feed > .event > .content .extra.text {
-  padding: @extraTextPadding;
-  border-left: @extraTextPointer;
-  font-size: @extraTextFontSize;
-  max-width: @extraTextMaxWidth;
-  line-height: @extraTextLineHeight;
+  /* Text */
+  .ui.feed > .event > .content .extra.text {
+    padding: @extraTextPadding;
+    border-left: @extraTextPointer;
+    font-size: @extraTextFontSize;
+    max-width: @extraTextMaxWidth;
+    line-height: @extraTextLineHeight;
+  }
 }
 
-/*--------------
-      Meta
----------------*/
-
-.ui.feed > .event > .content .meta {
-  display: @metadataDisplay;
-  font-size: @metadataFontSize;
-  margin: @metadataMargin;
-  background: @metadataBackground;
-  border: @metadataBorder;
-  border-radius: @metadataBorderRadius;
-  box-shadow: @metadataBoxShadow;
-  padding: @metadataPadding;
-  color: @metadataColor;
-}
+& when (@variationFeedMeta) {
+  /*--------------
+        Meta
+  ---------------*/
+
+  .ui.feed > .event > .content .meta {
+    display: @metadataDisplay;
+    font-size: @metadataFontSize;
+    margin: @metadataMargin;
+    background: @metadataBackground;
+    border: @metadataBorder;
+    border-radius: @metadataBorderRadius;
+    box-shadow: @metadataBoxShadow;
+    padding: @metadataPadding;
+    color: @metadataColor;
+  }
 
-.ui.feed > .event > .content .meta > * {
-  position: relative;
-  margin-left: @metadataElementSpacing;
-}
-.ui.feed > .event > .content .meta > *:after {
-  content: @metadataDivider;
-  color: @metadataDividerColor;
-  top: 0;
-  left: @metadataDividerOffset;
-  opacity: 1;
-  position: absolute;
-  vertical-align: top;
-}
+  .ui.feed > .event > .content .meta > * {
+    position: relative;
+    margin-left: @metadataElementSpacing;
+  }
+  .ui.feed > .event > .content .meta > *::after {
+    content: @metadataDivider;
+    color: @metadataDividerColor;
+    top: 0;
+    left: @metadataDividerOffset;
+    opacity: 1;
+    position: absolute;
+    vertical-align: top;
+  }
 
-.ui.feed > .event > .content .meta .like {
-  color: @likeColor;
-  transition: @likeTransition;
-}
-.ui.feed > .event > .content .meta .like:hover i.icon {
-  color: @likeHoverColor;
-}
-.ui.feed > .event > .content .meta .active.like i.icon {
-  color: @likeActiveColor;
-}
+  & when (@variationFeedLike) {
+    .ui.feed > .event > .content .meta .like {
+      color: @likeColor;
+      transition: @likeTransition;
+    }
+    .ui.feed > .event > .content .meta .like:hover i.icon {
+      color: @likeHoverColor;
+    }
+    .ui.feed > .event > .content .meta .active.like i.icon {
+      color: @likeActiveColor;
+    }
+  }
 
-/* First element */
-.ui.feed > .event > .content .meta > :first-child {
-  margin-left: 0;
-}
-.ui.feed > .event > .content .meta > :first-child::after {
-  display: none;
-}
+  /* First element */
+  .ui.feed > .event > .content .meta > :first-child {
+    margin-left: 0;
+  }
+  .ui.feed > .event > .content .meta > :first-child::after {
+    display: none;
+  }
 
-/* Action */
-.ui.feed > .event > .content .meta a,
-.ui.feed > .event > .content .meta > i.icon {
-  cursor: @metadataActionCursor;
-  opacity: @metadataActionOpacity;
-  color: @metadataActionColor;
-  transition: @metadataActionTransition;
-}
-.ui.feed > .event > .content .meta a:hover,
-.ui.feed > .event > .content .meta a:hover i.icon,
-.ui.feed > .event > .content .meta > i.icon:hover {
-  color: @metadataActionHoverColor;
+  /* Action */
+  .ui.feed > .event > .content .meta a,
+  .ui.feed > .event > .content .meta > i.icon {
+    cursor: @metadataActionCursor;
+    opacity: @metadataActionOpacity;
+    color: @metadataActionColor;
+    transition: @metadataActionTransition;
+  }
+  .ui.feed > .event > .content .meta a:hover,
+  .ui.feed > .event > .content .meta a:hover i.icon,
+  .ui.feed > .event > .content .meta > i.icon:hover {
+    color: @metadataActionHoverColor;
+  }
 }
 
 
@@ -285,18 +299,24 @@
     background: @black;
   }
 
-  .ui.inverted.feed > .event > .content .date,
-  .ui.inverted.feed > .event > .content .meta .like {
-    color: @invertedLightTextColor;
+  & when (@variationFeedDate) or (@variationFeedLike) {
+    .ui.inverted.feed > .event > .content .date,
+    .ui.inverted.feed > .event > .content .meta .like {
+      color: @invertedLightTextColor;
+    }
   }
 
-  .ui.inverted.feed > .event > .content .summary,
-  .ui.inverted.feed > .event > .content .extra.text {
-    color: @invertedTextColor;
+  & when (@variationFeedSummary) or (@variationFeedExtra) {
+    .ui.inverted.feed > .event > .content .summary,
+    .ui.inverted.feed > .event > .content .extra.text {
+      color: @invertedTextColor;
+    }
   }
 
-  .ui.inverted.feed > .event > .content .meta .like:hover {
-    color: @invertedSelectedTextColor;
+  & when (@variationFeedLike) {
+    .ui.inverted.feed > .event > .content .meta .like:hover {
+      color: @invertedSelectedTextColor;
+    }
   }
 }