icon.sass 925 B

12345678910111213141516171819202122232425262728293031323334353637383940
  1. $icon-dimensions: 1.5rem !default
  2. $icon-dimensions-small: 1rem !default
  3. $icon-dimensions-medium: 2rem !default
  4. $icon-dimensions-large: 3rem !default
  5. $icon-text-spacing: 0.25em !default
  6. .icon
  7. align-items: center
  8. display: inline-flex
  9. justify-content: center
  10. height: $icon-dimensions
  11. width: $icon-dimensions
  12. // Sizes
  13. &.is-small
  14. height: $icon-dimensions-small
  15. width: $icon-dimensions-small
  16. &.is-medium
  17. height: $icon-dimensions-medium
  18. width: $icon-dimensions-medium
  19. &.is-large
  20. height: $icon-dimensions-large
  21. width: $icon-dimensions-large
  22. .icon-text
  23. align-items: flex-start
  24. color: inherit
  25. display: inline-flex
  26. flex-wrap: wrap
  27. line-height: $icon-dimensions
  28. vertical-align: top
  29. .icon
  30. flex-grow: 0
  31. flex-shrink: 0
  32. &:not(:last-child)
  33. margin-right: $icon-text-spacing
  34. &:not(:first-child)
  35. margin-left: $icon-text-spacing
  36. div.icon-text
  37. display: flex