You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

151 lines
2.4 KiB

11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
  1. /*
  2. * # Activity Feed View
  3. * http://github.com/jlukic/semantic-ui/
  4. *
  5. *
  6. * Copyright 2014 Contributors
  7. * Released under the MIT license
  8. * http://opensource.org/licenses/MIT
  9. *
  10. * Released: May 22, 2014
  11. */
  12. /*******************************
  13. Activity Feed
  14. *******************************/
  15. .ui.feed {
  16. }
  17. .ui.feed a {
  18. cursor: pointer;
  19. }
  20. .ui.feed,
  21. .ui.feed .event,
  22. .ui.feed .label,
  23. .ui.feed .content,
  24. .ui.feed .extra {
  25. -webkit-box-sizing: border-box;
  26. -moz-box-sizing: border-box;
  27. -ms-box-sizing: border-box;
  28. box-sizing: border-box;
  29. }
  30. /*******************************
  31. Content
  32. *******************************/
  33. /* Event */
  34. .ui.feed .event {
  35. width: 100%;
  36. display: table;
  37. padding: 1em;
  38. }
  39. .ui.feed .event:first-child {
  40. border-top: 0px;
  41. }
  42. .ui.feed .event:last-child {
  43. margin-bottom: 1em;
  44. }
  45. /* Event Label */
  46. .ui.feed .label {
  47. width: 3em;
  48. display: table-cell;
  49. vertical-align: top;
  50. text-align: left;
  51. }
  52. .ui.feed .label .icon {
  53. font-size: 1.5em;
  54. padding: 0.5em;
  55. margin: 0em;
  56. }
  57. .ui.feed .label img {
  58. width: 3em;
  59. margin: 0em;
  60. border-radius: 50em;
  61. }
  62. .ui.feed .label + .content {
  63. padding: 0.75em 1em 0em;
  64. }
  65. /* Content */
  66. .ui.feed .content {
  67. display: table-cell;
  68. vertical-align: top;
  69. text-align: left;
  70. word-wrap: break-word;
  71. }
  72. /* Date */
  73. .ui.feed .content .date {
  74. float: right;
  75. padding-left: 1em;
  76. color: rgba(0, 0, 0, 0.4);
  77. }
  78. /* Summary */
  79. .ui.feed .content .summary {
  80. color: rgba(0, 0, 0, 0.75);
  81. }
  82. .ui.feed .content .summary img {
  83. display: inline-block;
  84. margin-right: 0.25em;
  85. width: 4em;
  86. border-radius: 500px;
  87. }
  88. /* Additional Information */
  89. .ui.feed .content .extra {
  90. margin: 1em 0em 0em;
  91. padding: 0.5em 0em 0em;
  92. color: rgba(0, 0, 0, 0.5);
  93. }
  94. .ui.feed .content .extra.images {
  95. }
  96. .ui.feed .content .extra.images img {
  97. display: inline-block;
  98. margin-right: 0.25em;
  99. width: 6em;
  100. }
  101. .ui.feed .content .extra.text {
  102. padding: 0.5em 1em;
  103. border-left: 0.2em solid rgba(0, 0, 0, 0.1);
  104. }
  105. /*******************************
  106. Variations
  107. *******************************/
  108. .ui.small.feed {
  109. font-size: 0.875em;
  110. }
  111. .ui.small.feed .label img {
  112. width: 2.5em;
  113. }
  114. .ui.small.feed .label .icon {
  115. font-size: 1.25em;
  116. }
  117. .ui.feed .event {
  118. padding: 0.75em 0em;
  119. }
  120. .ui.small.feed .label + .content {
  121. padding: 0.5em 0.5em 0;
  122. }
  123. .ui.small.feed .content .extra.images img {
  124. width: 5em;
  125. }
  126. .ui.small.feed .content .extra {
  127. margin: 0.5em 0em 0em;
  128. }
  129. .ui.small.feed .content .extra.text {
  130. padding: 0.25em 0.5em;
  131. }