Ohm-Management - Projektarbeit B-ME
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

hero.sass 3.1KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  1. // Main container
  2. .hero
  3. align-items: stretch
  4. display: flex
  5. flex-direction: column
  6. justify-content: space-between
  7. .navbar
  8. background: none
  9. .tabs
  10. ul
  11. border-bottom: none
  12. // Colors
  13. @each $name, $pair in $colors
  14. $color: nth($pair, 1)
  15. $color-invert: nth($pair, 2)
  16. &.is-#{$name}
  17. background-color: $color
  18. color: $color-invert
  19. a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current),
  20. strong
  21. color: inherit
  22. .title
  23. color: $color-invert
  24. .subtitle
  25. color: rgba($color-invert, 0.9)
  26. a:not(.button),
  27. strong
  28. color: $color-invert
  29. .navbar-menu
  30. +touch
  31. background-color: $color
  32. .navbar-item,
  33. .navbar-link
  34. color: rgba($color-invert, 0.7)
  35. a.navbar-item,
  36. .navbar-link
  37. &:hover,
  38. &.is-active
  39. background-color: darken($color, 5%)
  40. color: $color-invert
  41. .tabs
  42. a
  43. color: $color-invert
  44. opacity: 0.9
  45. &:hover
  46. opacity: 1
  47. li
  48. &.is-active a
  49. opacity: 1
  50. &.is-boxed,
  51. &.is-toggle
  52. a
  53. color: $color-invert
  54. &:hover
  55. background-color: rgba($black, 0.1)
  56. li.is-active a
  57. &,
  58. &:hover
  59. background-color: $color-invert
  60. border-color: $color-invert
  61. color: $color
  62. // Modifiers
  63. &.is-bold
  64. $gradient-top-left: darken(saturate(adjust-hue($color, -10deg), 10%), 10%)
  65. $gradient-bottom-right: lighten(saturate(adjust-hue($color, 10deg), 5%), 5%)
  66. background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
  67. +mobile
  68. .navbar-menu
  69. background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
  70. // Sizes
  71. &.is-small
  72. .hero-body
  73. padding-bottom: 1.5rem
  74. padding-top: 1.5rem
  75. &.is-medium
  76. +tablet
  77. .hero-body
  78. padding-bottom: 9rem
  79. padding-top: 9rem
  80. &.is-large
  81. +tablet
  82. .hero-body
  83. padding-bottom: 18rem
  84. padding-top: 18rem
  85. &.is-halfheight,
  86. &.is-fullheight,
  87. &.is-fullheight-with-navbar
  88. .hero-body
  89. align-items: center
  90. display: flex
  91. & > .container
  92. flex-grow: 1
  93. flex-shrink: 1
  94. &.is-halfheight
  95. min-height: 50vh
  96. &.is-fullheight
  97. min-height: 100vh
  98. // Components
  99. .hero-video
  100. @extend %overlay
  101. overflow: hidden
  102. video
  103. left: 50%
  104. min-height: 100%
  105. min-width: 100%
  106. position: absolute
  107. top: 50%
  108. transform: translate3d(-50%, -50%, 0)
  109. // Modifiers
  110. &.is-transparent
  111. opacity: 0.3
  112. // Responsiveness
  113. +mobile
  114. display: none
  115. .hero-buttons
  116. margin-top: 1.5rem
  117. // Responsiveness
  118. +mobile
  119. .button
  120. display: flex
  121. &:not(:last-child)
  122. margin-bottom: 0.75rem
  123. +tablet
  124. display: flex
  125. justify-content: center
  126. .button:not(:last-child)
  127. margin-right: 1.5rem
  128. // Containers
  129. .hero-head,
  130. .hero-foot
  131. flex-grow: 0
  132. flex-shrink: 0
  133. .hero-body
  134. flex-grow: 1
  135. flex-shrink: 0
  136. padding: 3rem 1.5rem