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.3KB

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