Ohm-Management - Projektarbeit B-ME
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

level.sass 1.4KB

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