tiles.sass 808 B

123456789101112131415161718192021222324252627282930313233343536
  1. @import "../utilities/mixins"
  2. $tile-spacing: 0.75rem !default
  3. .tile
  4. align-items: stretch
  5. display: block
  6. flex-basis: 0
  7. flex-grow: 1
  8. flex-shrink: 1
  9. min-height: min-content
  10. // Modifiers
  11. &.is-ancestor
  12. margin-left: $tile-spacing * -1
  13. margin-right: $tile-spacing * -1
  14. margin-top: $tile-spacing * -1
  15. &:last-child
  16. margin-bottom: $tile-spacing * -1
  17. &:not(:last-child)
  18. margin-bottom: $tile-spacing
  19. &.is-child
  20. margin: 0 !important
  21. &.is-parent
  22. padding: $tile-spacing
  23. &.is-vertical
  24. flex-direction: column
  25. & > .tile.is-child:not(:last-child)
  26. margin-bottom: 1.5rem !important
  27. // Responsiveness
  28. +tablet
  29. &:not(.is-child)
  30. display: flex
  31. @for $i from 1 through 12
  32. &.is-#{$i}
  33. flex: none
  34. width: ($i / 12) * 100%