hero.scss 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. /* Hero
  2. ==================================*/
  3. .hero {
  4. background-size: cover;
  5. box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.26);
  6. color: #fff;
  7. height: 200px;
  8. position: relative;
  9. text-align: center;
  10. -webkit-transition: all 1s cubic-bezier(0.55, 0, 0.1, 1);
  11. transition: all 1s cubic-bezier(0.55, 0, 0.1, 1);
  12. -webkit-transform: translate3d(0, 0, 0);
  13. transform: translate3d(0, 0, 0);
  14. width: 100%;
  15. }
  16. .hero > * {
  17. -webkit-transition: opacity 2.5s cubic-bezier(0.55, 0, 0.1, 1);
  18. transition: opacity 2.5s cubic-bezier(0.55, 0, 0.1, 1);
  19. opacity: 1;
  20. filter: alpha(opacity=100);
  21. }
  22. .hero + .mid-bar {
  23. -webkit-transform: translate3d(0, 0, 0);
  24. transform: translate3d(0, 0, 0);
  25. -webkit-transition: all 1s cubic-bezier(0.55, 0, 0.1, 1);
  26. transition: all 1s cubic-bezier(0.55, 0, 0.1, 1);
  27. height: initial;
  28. opacity: 1;
  29. filter: alpha(opacity=100);
  30. }
  31. .hero .hero-icon {
  32. box-shadow: 0px 0 2px 0 rgba(0, 0, 0, 0.26);
  33. border-radius: 50%;
  34. display: inline-block;
  35. font-size: 65px;
  36. height: 150px;
  37. padding: 10px 30px;
  38. line-height: 136px;
  39. width: 150px;
  40. }
  41. .hero.no-header {
  42. height: 244px;
  43. }
  44. .hero > .content {
  45. bottom: 0;
  46. position: absolute;
  47. text-align: center;
  48. width: 100%;
  49. z-index: 1;
  50. }
  51. .hero > .content > .avatar {
  52. background-position: center;
  53. background-size: cover;
  54. border: solid 1px rgba(255, 255, 255, 0.8);
  55. border-radius: 50%;
  56. display: inline-block;
  57. height: 88px;
  58. left: auto;
  59. margin-bottom: 10px;
  60. position: relative;
  61. width: 88px;
  62. }
  63. .hero h1 .hero h2, .hero h3, .hero h4, .hero h5, .hero h6 {
  64. color: #fff;
  65. margin: 0;
  66. }
  67. .hero h4 {
  68. color: rgba(255, 255, 255, 0.7);
  69. margin: 3px 0 16px;
  70. }
  71. .hero h1 > a, .hero h2 > a, .hero h3 > a, .hero h4 > a, .hero h5 > a, .hero h6 > a {
  72. text-decoration: none;
  73. }
  74. .hero + .button-bar {
  75. border-radius: 0;
  76. margin-top: 0;
  77. }
  78. .hero + .button-bar > .button:first-child, .hero + .button-bar > .button:last-child {
  79. border-radius: 0;
  80. }
  81. .hero .hero-icon {
  82. color: #fff;
  83. font-size: 96px;
  84. }
  85. .hero .hero-icon + h1 {
  86. color: rgb(255, 255, 255);
  87. letter-spacing: 0.15rem;
  88. }
  89. .hero .button, .hero .button.button-large, .hero .button.button-flat {
  90. margin: 0;
  91. }
  92. .hero h1.title {
  93. color: #fff;
  94. font-size: 23px;
  95. margin: 0;
  96. text-align: left;
  97. padding-left: 80px;
  98. line-height: 59px;
  99. }
  100. .hero + .mid-bar {
  101. -webkit-transform: translate3d(0, 0, 0);
  102. transform: translate3d(0, 0, 0);
  103. -webkit-transition: all 1s cubic-bezier(0.55, 0, 0.1, 1);
  104. transition: all 1s cubic-bezier(0.55, 0, 0.1, 1);
  105. height: initial;
  106. opacity: 1;
  107. filter: alpha(opacity=100);
  108. }
  109. .hero > * {
  110. -webkit-transition: opacity 2.5s cubic-bezier(0.55, 0, 0.1, 1);
  111. transition: opacity 2.5s cubic-bezier(0.55, 0, 0.1, 1);
  112. opacity: 1;
  113. filter: alpha(opacity=100);
  114. }