level.sass 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. @import "../utilities/mixins"
  2. $level-item-spacing: ($block-spacing / 2) !default
  3. .level
  4. @extend %block
  5. align-items: center
  6. justify-content: space-between
  7. code
  8. border-radius: $radius
  9. img
  10. display: inline-block
  11. vertical-align: top
  12. // Modifiers
  13. &.is-mobile
  14. display: flex
  15. .level-left,
  16. .level-right
  17. display: flex
  18. .level-left + .level-right
  19. margin-top: 0
  20. .level-item
  21. &:not(:last-child)
  22. margin-bottom: 0
  23. +ltr-property("margin", $level-item-spacing)
  24. &:not(.is-narrow)
  25. flex-grow: 1
  26. // Responsiveness
  27. +tablet
  28. display: flex
  29. & > .level-item
  30. &:not(.is-narrow)
  31. flex-grow: 1
  32. .level-item
  33. align-items: center
  34. display: flex
  35. flex-basis: auto
  36. flex-grow: 0
  37. flex-shrink: 0
  38. justify-content: center
  39. .title,
  40. .subtitle
  41. margin-bottom: 0
  42. // Responsiveness
  43. +mobile
  44. &:not(:last-child)
  45. margin-bottom: $level-item-spacing
  46. .level-left,
  47. .level-right
  48. flex-basis: auto
  49. flex-grow: 0
  50. flex-shrink: 0
  51. .level-item
  52. // Modifiers
  53. &.is-flexible
  54. flex-grow: 1
  55. // Responsiveness
  56. +tablet
  57. &:not(:last-child)
  58. +ltr-property("margin", $level-item-spacing)
  59. .level-left
  60. align-items: center
  61. justify-content: flex-start
  62. // Responsiveness
  63. +mobile
  64. & + .level-right
  65. margin-top: 1.5rem
  66. +tablet
  67. display: flex
  68. .level-right
  69. align-items: center
  70. justify-content: flex-end
  71. // Responsiveness
  72. +tablet
  73. display: flex