_spotlights.scss 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
  1. ///
  2. /// Hyperspace by HTML5 UP
  3. /// html5up.net | @ajlkn
  4. /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
  5. ///
  6. /* Spotlights */
  7. .spotlights {
  8. > section {
  9. @include vendor('display', 'flex');
  10. @include vendor('flex-direction', 'row');
  11. min-height: 22.5em;
  12. body.is-ie & {
  13. min-height: 0;
  14. }
  15. > .image {
  16. background-position: center center;
  17. background-size: cover;
  18. border-radius: 0;
  19. display: block;
  20. position: relative;
  21. width: 25em;
  22. img {
  23. border-radius: 0;
  24. display: block;
  25. }
  26. &:before {
  27. @include vendor('transition', 'opacity #{_duration(activation)} ease');
  28. background: transparentize(_palette(bg), 0.1);
  29. content: '';
  30. display: block;
  31. height: 100%;
  32. left: 0;
  33. opacity: 0;
  34. position: absolute;
  35. top: 0;
  36. width: 100%;
  37. }
  38. }
  39. > .content {
  40. @include padding(4em, 5em);
  41. @include vendor('display', 'flex');
  42. @include vendor('flex-direction', 'column');
  43. @include vendor('justify-content', 'center');
  44. width: #{_size(inner-width) - 25em};
  45. -ms-flex: 1;
  46. > .inner {
  47. @include vendor('transform', 'translateX(0) translateY(0)');
  48. @include vendor('transition', (
  49. 'opacity #{_duration(activation)} ease',
  50. 'transform #{_duration(activation)} ease'
  51. ));
  52. opacity: 1;
  53. }
  54. }
  55. &:nth-child(1) {
  56. }
  57. &:nth-child(2) {
  58. background-color: rgba(0,0,0,0.05);
  59. }
  60. &:nth-child(3) {
  61. background-color: rgba(0,0,0,0.1);
  62. }
  63. &.inactive,
  64. body.is-loading & {
  65. > .image {
  66. &:before {
  67. opacity: 1;
  68. }
  69. }
  70. > .content {
  71. > .inner {
  72. @include vendor('transform', 'translateX(-1em)');
  73. opacity: 0;
  74. }
  75. }
  76. }
  77. @include breakpoint(xlarge) {
  78. > .content {
  79. @include padding(4em, 4em);
  80. }
  81. }
  82. @include breakpoint(medium) {
  83. display: block;
  84. > .image {
  85. width: 100%;
  86. height: 50vh;
  87. }
  88. > .content {
  89. width: 100%;
  90. }
  91. &.inactive,
  92. body.is-loading & {
  93. > .content {
  94. > .inner {
  95. @include vendor('transform', 'translateY(1em)');
  96. }
  97. }
  98. }
  99. }
  100. @include breakpoint(small) {
  101. > .image {
  102. height: 50vh;
  103. min-height: 15em;
  104. }
  105. > .content {
  106. @include padding(3em, 2em);
  107. }
  108. }
  109. }
  110. }