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();