github.com/fanux/shipyard@v0.0.0-20161009071005-6515ce223235/controller/static/semantic/src/definitions/views/feed.less (about)

     1  /*!
     2   * # Semantic UI - Feed
     3   * http://github.com/semantic-org/semantic-ui/
     4   *
     5   *
     6   * Copyright 2014 Contributorss
     7   * Released under the MIT license
     8   * http://opensource.org/licenses/MIT
     9   *
    10   */
    11  
    12  /*******************************
    13              Theme
    14  *******************************/
    15  
    16  @type    : 'view';
    17  @element : 'feed';
    18  
    19  @import (multiple) '../../theme.config';
    20  
    21  /*******************************
    22           Activity Feed
    23  *******************************/
    24  
    25  .ui.feed {
    26    margin: @margin;
    27  }
    28  .ui.feed:first-child {
    29    margin-top: 0em;
    30  }
    31  .ui.feed:last-child {
    32    margin-top: 0em;
    33  }
    34  
    35  
    36  /*******************************
    37              Content
    38  *******************************/
    39  
    40  /* Event */
    41  .ui.feed > .event {
    42    display: @eventDisplay;
    43    width: @eventWidth;
    44    padding: @eventPadding;
    45    margin: @eventMargin;
    46    background: @eventBackground;
    47    border-top: @eventDivider;
    48  }
    49  .ui.feed > .event:first-child {
    50    border-top: 0px;
    51    padding-top: 0em;
    52  }
    53  .ui.feed > .event:last-child {
    54    padding-bottom: 0em;
    55  }
    56  
    57  /* Event Label */
    58  .ui.feed > .event > .label {
    59    display: @labelDisplay;
    60    width: @labelWidth;
    61    height: @labelHeight;
    62    vertical-align: @labelVerticalAlign;
    63    text-align: @labelTextAlign;
    64  }
    65  .ui.feed > .event > .label .icon {
    66    opacity: @iconLabelOpacity;
    67    font-size: @iconLabelSize;
    68    width: @iconLabelWidth;
    69    padding: @iconLabelPadding;
    70    background: @iconLabelBackground;
    71    border: @iconLabelBorder;
    72    border-radius: @iconLabelBorderRadius;
    73    color: @iconLabelColor;
    74  }
    75  .ui.feed > .event > .label img {
    76    width: @imageLabelWidth;
    77    height: @imageLabelHeight;
    78    border-radius: @imageLabelBorderRadius;
    79  }
    80  .ui.feed > .event > .label + .content {
    81    padding: @labeledContentPadding;
    82  }
    83  
    84  /* Content */
    85  .ui.feed > .event > .content {
    86    display: @contentDisplay;
    87    vertical-align: @contentVerticalAlign;
    88    text-align: @contentTextAlign;
    89    word-wrap: @contentWordWrap;
    90  }
    91  .ui.feed > .event:last-child > .content {
    92    padding-bottom: @lastLabeledContentPadding;
    93  }
    94  
    95  /* Link */
    96  .ui.feed > .event > .content a {
    97    cursor: pointer;
    98  }
    99  
   100  /*--------------
   101        Date
   102  ---------------*/
   103  
   104  .ui.feed > .event > .content .date {
   105    margin: @dateMargin;
   106    padding: @datePadding;
   107    color: @dateColor;
   108    font-weight: @dateFontWeight;
   109    font-size: @dateFontSize;
   110    font-style: @dateFontStyle;
   111    color: @dateColor;
   112  }
   113  
   114  /*--------------
   115       Summary
   116  ---------------*/
   117  
   118  .ui.feed > .event > .content .summary {
   119    margin: @summaryMargin;
   120    font-size: @summaryFontSize;
   121    font-weight: @summaryFontWeight;
   122    color: @summaryColor;
   123  }
   124  
   125  /* Summary Image */
   126  .ui.feed > .event > .content .summary img {
   127    display: inline-block;
   128    width: @summaryImageWidth;
   129    height: @summaryImageHeight;
   130    margin: @summaryImageMargin;
   131    border-radius: @summaryImageBorderRadius;
   132    vertical-align: @summaryImageVerticalAlign;
   133  }
   134  /*--------------
   135        User
   136  ---------------*/
   137  
   138  .ui.feed > .event > .content .user {
   139    display: inline-block;
   140    font-weight: @userFontWeight;
   141    margin-right: @userDistance;
   142    vertical-align: baseline;
   143  }
   144  .ui.feed > .event > .content .user img {
   145    margin: @userImageMargin;
   146    width: @userImageWidth;
   147    height: @userImageHeight;
   148    vertical-align: @userImageVerticalAlign;
   149  }
   150  /*--------------
   151     Inline Date
   152  ---------------*/
   153  
   154  /* Date inside Summary */
   155  .ui.feed > .event > .content .summary > .date {
   156    display: @summaryDateDisplay;
   157    float: @summaryDateFloat;
   158    font-weight: @summaryDateFontWeight;
   159    font-size: @summaryDateFontSize;
   160    font-style: @summaryDateFontStyle;
   161    margin: @summaryDateMargin;
   162    padding: @summaryDatePadding;
   163    color: @summaryDateColor;
   164  }
   165  
   166  /*--------------
   167    Extra Summary
   168  ---------------*/
   169  
   170  .ui.feed > .event > .content .extra {
   171    margin: @extraMargin;
   172    background: @extraBackground;
   173    padding: @extraPadding;
   174    color: @extraColor;
   175  }
   176  
   177  /* Images */
   178  .ui.feed > .event > .content .extra.images img {
   179    display: inline-block;
   180    margin: @extraImageMargin;
   181    width: @extraImageWidth;
   182  }
   183  
   184  /* Text */
   185  .ui.feed > .event > .content .extra.text {
   186    padding: @extraTextPadding;
   187    border-left: @extraTextPointer;
   188    font-size: @extraTextFontSize;
   189    max-width: @extraTextMaxWidth;
   190    line-height: @extraTextLineHeight;
   191  }
   192  
   193  /*--------------
   194        Meta
   195  ---------------*/
   196  
   197  .ui.feed > .event > .content .meta {
   198    display: @metadataDisplay;
   199    font-size: @metadataFontSize;
   200    margin: @metadataMargin;
   201    background: @metadataBackground;
   202    border: @metadataBorder;
   203    border-radius: @metadataBorderRadius;
   204    box-shadow: @metadataBoxShadow;
   205    padding: @metadataPadding;
   206    color: @metadataColor;
   207  }
   208  
   209  .ui.feed > .event > .content .meta > * {
   210    position: relative;
   211    margin-left: @metadataElementSpacing;
   212  }
   213  .ui.feed > .event > .content .meta > *:after {
   214    content: @metadataDivider;
   215    color: @metadataDividerColor;
   216    top: 0em;
   217    left: @metadataDividerOffset;
   218    opacity: 1;
   219    position: absolute;
   220    vertical-align: top;
   221  }
   222  
   223  .ui.feed > .event > .content .meta .like {
   224    color: @likeColor;
   225    transition: @likeTransition;
   226  }
   227  .ui.feed > .event > .content .meta .like:hover .icon {
   228    color: @likeHoverColor;
   229  }
   230  .ui.feed > .event > .content .meta .active.like .icon {
   231    color: @likeActiveColor;
   232  }
   233  
   234  /* First element */
   235  .ui.feed > .event > .content .meta > :first-child {
   236    margin-left: 0em;
   237  }
   238  .ui.feed > .event > .content .meta > :first-child::after {
   239    display: none;
   240  }
   241  
   242  /* Action */
   243  .ui.feed > .event > .content .meta a,
   244  .ui.feed > .event > .content .meta > .icon {
   245    cursor: @metadataActionCursor;
   246    opacity: @metadataActionOpacity;
   247    color: @metadataActionColor;
   248    transition: @metadataActionTransition;
   249  }
   250  .ui.feed > .event > .content .meta a:hover,
   251  .ui.feed > .event > .content .meta a:hover .icon,
   252  .ui.feed > .event > .content .meta > .icon:hover {
   253    color: @metadataActionHoverColor;
   254  }
   255  
   256  
   257  
   258  /*******************************
   259              Variations
   260  *******************************/
   261  
   262  .ui.small.feed {
   263    font-size: @small;
   264  }
   265  .ui.feed {
   266    font-size: @medium;
   267  }
   268  .ui.large.feed {
   269    font-size: @large;
   270  }
   271  
   272  .loadUIOverrides();