media.sass 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. @import "../utilities/mixins"
  2. $media-border-color: bulmaRgba($border, 0.5) !default
  3. $media-border-size: 1px !default
  4. $media-spacing: 1rem !default
  5. $media-spacing-large: 1.5rem !default
  6. $media-content-spacing: 0.75rem !default
  7. $media-level-1-spacing: 0.75rem !default
  8. $media-level-1-content-spacing: 0.5rem !default
  9. $media-level-2-spacing: 0.5rem !default
  10. .media
  11. align-items: flex-start
  12. display: flex
  13. text-align: inherit
  14. .content:not(:last-child)
  15. margin-bottom: $media-content-spacing
  16. .media
  17. border-top: $media-border-size solid $media-border-color
  18. display: flex
  19. padding-top: $media-level-1-spacing
  20. .content:not(:last-child),
  21. .control:not(:last-child)
  22. margin-bottom: $media-level-1-content-spacing
  23. .media
  24. padding-top: $media-level-2-spacing
  25. & + .media
  26. margin-top: $media-level-2-spacing
  27. & + .media
  28. border-top: $media-border-size solid $media-border-color
  29. margin-top: $media-spacing
  30. padding-top: $media-spacing
  31. // Sizes
  32. &.is-large
  33. & + .media
  34. margin-top: $media-spacing-large
  35. padding-top: $media-spacing-large
  36. .media-left,
  37. .media-right
  38. flex-basis: auto
  39. flex-grow: 0
  40. flex-shrink: 0
  41. .media-left
  42. +ltr-property("margin", $media-spacing)
  43. .media-right
  44. +ltr-property("margin", $media-spacing, false)
  45. .media-content
  46. flex-basis: auto
  47. flex-grow: 1
  48. flex-shrink: 1
  49. text-align: inherit
  50. +mobile
  51. .media-content
  52. overflow-x: auto