image.sass 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. @import "../utilities/mixins"
  2. $dimensions: 16 24 32 48 64 96 128 !default
  3. .image
  4. display: block
  5. position: relative
  6. img
  7. display: block
  8. height: auto
  9. width: 100%
  10. &.is-rounded
  11. border-radius: $radius-rounded
  12. &.is-fullwidth
  13. width: 100%
  14. // Ratio
  15. &.is-square,
  16. &.is-1by1,
  17. &.is-5by4,
  18. &.is-4by3,
  19. &.is-3by2,
  20. &.is-5by3,
  21. &.is-16by9,
  22. &.is-2by1,
  23. &.is-3by1,
  24. &.is-4by5,
  25. &.is-3by4,
  26. &.is-2by3,
  27. &.is-3by5,
  28. &.is-9by16,
  29. &.is-1by2,
  30. &.is-1by3
  31. img,
  32. .has-ratio
  33. @extend %overlay
  34. height: 100%
  35. width: 100%
  36. &.is-square,
  37. &.is-1by1
  38. padding-top: 100%
  39. &.is-5by4
  40. padding-top: 80%
  41. &.is-4by3
  42. padding-top: 75%
  43. &.is-3by2
  44. padding-top: 66.6666%
  45. &.is-5by3
  46. padding-top: 60%
  47. &.is-16by9
  48. padding-top: 56.25%
  49. &.is-2by1
  50. padding-top: 50%
  51. &.is-3by1
  52. padding-top: 33.3333%
  53. &.is-4by5
  54. padding-top: 125%
  55. &.is-3by4
  56. padding-top: 133.3333%
  57. &.is-2by3
  58. padding-top: 150%
  59. &.is-3by5
  60. padding-top: 166.6666%
  61. &.is-9by16
  62. padding-top: 177.7777%
  63. &.is-1by2
  64. padding-top: 200%
  65. &.is-1by3
  66. padding-top: 300%
  67. // Sizes
  68. @each $dimension in $dimensions
  69. &.is-#{$dimension}x#{$dimension}
  70. height: $dimension * 1px
  71. width: $dimension * 1px