_partners.sass 1.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. @import 'devices'
  2. .partners > h1
  3. text-align: center
  4. font-size: 4em
  5. .partner
  6. display: flex
  7. position: relative
  8. border: thin solid #eee
  9. border-radius: 5px
  10. height: 150px
  11. width: 300px
  12. margin: 20px auto
  13. cursor: pointer
  14. transition: transform .3s ease
  15. box-shadow: 0 0 3px 1px rgba(0,0,0,.1)
  16. &:hover .partner-description
  17. width: 100%
  18. .partner-logo
  19. margin: 10px
  20. flex-grow: 1
  21. background-size: contain
  22. background-position: center center
  23. background-repeat: no-repeat
  24. .partner-description
  25. background: linear-gradient(to top, #f5f5f5, #eee)
  26. position: absolute
  27. left: 0
  28. top: 0
  29. bottom: 0
  30. width: 0
  31. overflow: hidden
  32. transition: width .5s ease
  33. .partner-text
  34. width: 300px
  35. margin: 0 5px
  36. font-style: italic
  37. height: 80px
  38. display: flex
  39. justify-content: center
  40. align-items: center
  41. .partner-title
  42. margin: 0
  43. height: 50px
  44. line-height: 50px
  45. text-align: center
  46. overflow: hidden
  47. > a
  48. color: #222
  49. @media #{$lg}
  50. .center-content-lg
  51. display: flex
  52. justify-content: center