level.sass 977 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. .level-item
  2. .title,
  3. .subtitle
  4. margin-bottom: 0
  5. // Responsiveness
  6. +mobile
  7. &:not(:last-child)
  8. margin-bottom: 10px
  9. .level-left,
  10. .level-right
  11. .level-item
  12. &:not(:last-child)
  13. margin-right: 10px
  14. // Modifiers
  15. &.is-flexible
  16. flex-grow: 1
  17. .level-left
  18. // Responsiveness
  19. +mobile
  20. & + .level-right
  21. margin-top: 20px
  22. +tablet
  23. align-items: center
  24. display: flex
  25. .level-right
  26. // Responsiveness
  27. +tablet
  28. align-items: center
  29. display: flex
  30. justify-content: flex-end
  31. .level
  32. @extend .block
  33. align-items: center
  34. justify-content: space-between
  35. code
  36. border-radius: $radius
  37. img
  38. display: inline-block
  39. vertical-align: top
  40. // Modifiers
  41. &.is-mobile
  42. display: flex
  43. & > .level-item
  44. &:not(:last-child)
  45. margin-bottom: 0
  46. &:not(.is-narrow)
  47. flex-grow: 1
  48. // Responsiveness
  49. +tablet
  50. display: flex
  51. & > .level-item
  52. &:not(.is-narrow)
  53. flex-grow: 1