media.sass 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. .media-number
  2. background-color: $background
  3. border-radius: 290486px
  4. display: inline-block
  5. font-size: $size-medium
  6. height: 32px
  7. line-height: 24px
  8. min-width: 32px
  9. padding: 4px 8px
  10. text-align: center
  11. vertical-align: top
  12. // Responsiveness
  13. +mobile
  14. margin-bottom: 10px
  15. +tablet
  16. margin-right: 10px
  17. .media-left
  18. margin-right: 10px
  19. .media-right
  20. margin-left: 10px
  21. .media-content
  22. flex-grow: 1
  23. text-align: left
  24. .media
  25. align-items: flex-start
  26. display: flex
  27. text-align: left
  28. .content:not(:last-child)
  29. margin-bottom: 10px
  30. .media
  31. border-top: 1px solid rgba($border, 0.5)
  32. display: flex
  33. padding-top: 10px
  34. .content:not(:last-child),
  35. .control:not(:last-child)
  36. margin-bottom: 5px
  37. .media
  38. padding-top: 5px
  39. & + .media
  40. margin-top: 5px
  41. & + .media
  42. border-top: 1px solid rgba($border, 0.5)
  43. margin-top: 10px
  44. padding-top: 10px
  45. // Sizes
  46. &.is-large
  47. & + .media
  48. margin-top: 20px
  49. padding-top: 20px
  50. // Responsiveness
  51. +tablet
  52. &.is-large
  53. .media-number
  54. margin-right: 20px