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.

127 lines
2.4 KiB

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