_activityfeed.scss 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. .activity-feed {
  2. padding: 15px;
  3. list-style: none;
  4. .feed-item {
  5. position: relative;
  6. padding-bottom: 20px;
  7. padding-left: 30px;
  8. border-left: 2px solid #e4e8eb;
  9. &:last-child {
  10. border-color: transparent;
  11. }
  12. &::after {
  13. content: "";
  14. display: block;
  15. position: absolute;
  16. top: 0;
  17. left: -7px;
  18. width: 12px;
  19. height: 12px;
  20. border-radius: 50%;
  21. background: #177dff;
  22. }
  23. }
  24. }
  25. @mixin feed-item-state($color) {
  26. background: $color !important;
  27. }
  28. .feed-item-default::after {
  29. @include feed-item-state($dark-color);
  30. }
  31. .feed-item-primary::after {
  32. @include feed-item-state($primary-color);
  33. }
  34. .feed-item-secondary::after {
  35. @include feed-item-state($secondary-color);
  36. }
  37. .feed-item-success::after {
  38. @include feed-item-state($success-color);
  39. }
  40. .feed-item-danger::after {
  41. @include feed-item-state($danger-color);
  42. }
  43. .feed-item-info::after {
  44. @include feed-item-state($info-color);
  45. }
  46. .feed-item-warning::after {
  47. @include feed-item-state($warning-color);
  48. }
  49. .activity-feed .feed-item {
  50. .date {
  51. display: block;
  52. position: relative;
  53. top: -5px;
  54. color: #8c96a3;
  55. text-transform: uppercase;
  56. font-size: 13px;
  57. }
  58. .text {
  59. position: relative;
  60. top: -3px;
  61. }
  62. }