fomantic-ui 2.9.1-beta.3 → 2.9.1-beta.30

package/src/definitions/views/feed.less

@@ -12,313 +12,309 @@
             Theme
 *******************************/
 
-@type    : 'view';
-@element : 'feed';
+@type: "view";
+@element: "feed";
 
-@import (multiple) '../../theme.config';
+@import (multiple) "../../theme.config";
 
 /*******************************
          Activity Feed
 *******************************/
 
 .ui.feed {
-  margin: @margin;
+    margin: @margin;
 }
 .ui.feed:first-child {
-  margin-top: 0;
+    margin-top: 0;
 }
 .ui.feed:last-child {
-  margin-bottom: 0;
+    margin-bottom: 0;
 }
 
-
 /*******************************
             Content
 *******************************/
 
 /* Event */
 .ui.feed > .event {
-  display: flex;
-  flex-direction: row;
-  width: @eventWidth;
-  padding: @eventPadding;
-  margin: @eventMargin;
-  background: @eventBackground;
-  border-top: @eventDivider;
+    display: flex;
+    flex-direction: row;
+    width: @eventWidth;
+    padding: @eventPadding;
+    margin: @eventMargin;
+    background: @eventBackground;
+    border-top: @eventDivider;
 }
 .ui.feed > .event:first-child {
-  border-top: 0;
-  padding-top: 0;
+    border-top: 0;
+    padding-top: 0;
 }
 .ui.feed > .event:last-child {
-  padding-bottom: 0;
+    padding-bottom: 0;
 }
 
 /* Event Label */
 .ui.feed > .event > .label {
-  display: block;
-  flex: 0 0 auto;
-  width: @labelWidth;
-  height: @labelHeight;
-  align-self: @labelAlignSelf;
-  text-align: @labelTextAlign;
+    display: block;
+    flex: 0 0 auto;
+    width: @labelWidth;
+    height: @labelHeight;
+    align-self: @labelAlignSelf;
+    text-align: @labelTextAlign;
 }
 .ui.feed > .event > .label .icon {
-  opacity: @iconLabelOpacity;
-  font-size: @iconLabelSize;
-  width: @iconLabelWidth;
-  padding: @iconLabelPadding;
-  background: @iconLabelBackground;
-  border: @iconLabelBorder;
-  border-radius: @iconLabelBorderRadius;
-  color: @iconLabelColor;
+    opacity: @iconLabelOpacity;
+    font-size: @iconLabelSize;
+    width: @iconLabelWidth;
+    padding: @iconLabelPadding;
+    background: @iconLabelBackground;
+    border: @iconLabelBorder;
+    border-radius: @iconLabelBorderRadius;
+    color: @iconLabelColor;
 }
 .ui.feed > .event > .label img {
-  width: @imageLabelWidth;
-  height: @imageLabelHeight;
-  border-radius: @imageLabelBorderRadius;
+    width: @imageLabelWidth;
+    height: @imageLabelHeight;
+    border-radius: @imageLabelBorderRadius;
 }
 .ui.feed > .event > .label + .content {
-  margin: @labeledContentMargin;
+    margin: @labeledContentMargin;
 }
 
-/*--------------
+/* --------------
      Content
----------------*/
+--------------- */
 
 /* Content */
 .ui.feed > .event > .content {
-  display: block;
-  flex: 1 1 auto;
-  align-self: @contentAlignSelf;
-  text-align: @contentTextAlign;
-  word-wrap: @contentWordWrap;
+    display: block;
+    flex: 1 1 auto;
+    align-self: @contentAlignSelf;
+    text-align: @contentTextAlign;
+    word-wrap: @contentWordWrap;
 }
 .ui.feed > .event:last-child > .content {
-  padding-bottom: @lastLabeledContentPadding;
+    padding-bottom: @lastLabeledContentPadding;
 }
 
 /* Link */
 .ui.feed > .event > .content a {
-  cursor: pointer;
+    cursor: pointer;
 }
 
 & when (@variationFeedDate) {
-  /*--------------
-        Date
-  ---------------*/
-
-  .ui.feed > .event > .content .date {
-    margin: @dateMargin;
-    padding: @datePadding;
-    color: @dateColor;
-    font-weight: @dateFontWeight;
-    font-size: @dateFontSize;
-    font-style: @dateFontStyle;
-  }
+    /* --------------
+          Date
+    --------------- */
+
+    .ui.feed > .event > .content .date {
+        margin: @dateMargin;
+        padding: @datePadding;
+        color: @dateColor;
+        font-weight: @dateFontWeight;
+        font-size: @dateFontSize;
+        font-style: @dateFontStyle;
+    }
 }
 
 & when (@variationFeedSummary) {
-  /*--------------
-       Summary
-  ---------------*/
-
-  .ui.feed > .event > .content .summary {
-    margin: @summaryMargin;
-    font-size: @summaryFontSize;
-    font-weight: @summaryFontWeight;
-    color: @summaryColor;
-  }
-
-  /* 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;
+    /* --------------
+         Summary
+    --------------- */
+
+    .ui.feed > .event > .content .summary {
+        margin: @summaryMargin;
+        font-size: @summaryFontSize;
+        font-weight: @summaryFontWeight;
+        color: @summaryColor;
+    }
+
+    /* 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;
+        }
     }
-  }
 }
 & when (@variationFeedUser) {
-  /*--------------
-        User
-  ---------------*/
-
-  .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;
-  }
+    /* --------------
+          User
+    --------------- */
+
+    .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;
+    }
 }
 
 & when (@variationFeedExtra) {
-  /*--------------
-    Extra Summary
-  ---------------*/
-
-  .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;
-  }
-
-  /* Text */
-  .ui.feed > .event > .content .extra.text {
-    padding: @extraTextPadding;
-    border-left: @extraTextPointer;
-    font-size: @extraTextFontSize;
-    max-width: @extraTextMaxWidth;
-    line-height: @extraTextLineHeight;
-  }
+    /* --------------
+      Extra Summary
+    --------------- */
+
+    .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;
+    }
+
+    /* Text */
+    .ui.feed > .event > .content .extra.text {
+        padding: @extraTextPadding;
+        border-left: @extraTextPointer;
+        font-size: @extraTextFontSize;
+        max-width: @extraTextMaxWidth;
+        line-height: @extraTextLineHeight;
+    }
 }
 
 & 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;
-  }
-
-  & when (@variationFeedLike) {
-    .ui.feed > .event > .content .meta .like {
-      color: @likeColor;
-      transition: @likeTransition;
+    /* --------------
+          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 .like:hover i.icon {
-      color: @likeHoverColor;
+    .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 .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;
-  }
-
-  /* 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;
-  }
-}
 
+    /* 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;
+    }
+}
 
 /*******************************
             Variations
 *******************************/
 
 .ui.feed {
-  font-size: @medium;
+    font-size: @medium;
 }
 & when not (@variationFeedSizes = false) {
-  each(@variationFeedSizes, {
-    @s: @@value;
-    .ui.@{value}.feed  {
-      font-size: @s;
-    }
-  })
+    each(@variationFeedSizes, {
+        @s: @@value;
+        .ui.@{value}.feed {
+            font-size: @s;
+        }
+    });
 }
 
 & when (@variationFeedInverted) {
-  /*------------------
-        Inverted
-  -------------------*/
-
-  .ui.inverted.feed > .event {
-    background: @black;
-  }
-
-  & when (@variationFeedDate) or (@variationFeedLike) {
-    .ui.inverted.feed > .event > .content .date,
-    .ui.inverted.feed > .event > .content .meta .like {
-      color: @invertedLightTextColor;
+    /* ------------------
+          Inverted
+    ------------------- */
+
+    .ui.inverted.feed > .event {
+        background: @black;
     }
-  }
 
-  & when (@variationFeedSummary) or (@variationFeedExtra) {
-    .ui.inverted.feed > .event > .content .summary,
-    .ui.inverted.feed > .event > .content .extra.text {
-      color: @invertedTextColor;
+    & when (@variationFeedDate) or (@variationFeedLike) {
+        .ui.inverted.feed > .event > .content .date,
+        .ui.inverted.feed > .event > .content .meta .like {
+            color: @invertedLightTextColor;
+        }
     }
-  }
 
-  & when (@variationFeedLike) {
-    .ui.inverted.feed > .event > .content .meta .like:hover {
-      color: @invertedSelectedTextColor;
+    & when (@variationFeedSummary) or (@variationFeedExtra) {
+        .ui.inverted.feed > .event > .content .summary,
+        .ui.inverted.feed > .event > .content .extra.text {
+            color: @invertedTextColor;
+        }
     }
-  }
-}
 
+    & when (@variationFeedLike) {
+        .ui.inverted.feed > .event > .content .meta .like:hover {
+            color: @invertedSelectedTextColor;
+        }
+    }
+}
 
 .loadUIOverrides();