Add normal header, Fix hero colors

This commit is contained in:
Jeremy Thomas
2016-02-27 13:29:54 +00:00
parent b1156abcd1
commit 354cecb05f
2 changed files with 17 additions and 14 deletions

View File

@@ -1,23 +1,28 @@
.header .header
+clearfix +clearfix
background: white background: white
box-shadow: 0 1px 2px rgba(black, 0.1)
display: flex display: flex
height: 50px
line-height: 24px line-height: 24px
position: relative position: relative
text-align: center text-align: center
z-index: 2 z-index: 2
.container .container
align-items: stretch align-items: stretch
box-shadow: 0 1px 0 rgba($border, 0.3)
display: flex display: flex
width: 100% width: 100%
&.has-shadow
box-shadow: 0 1px 2px rgba(black, 0.1)
+mobile
.container
flex-direction: column
+tablet +tablet
height: $header-height height: $header-height
.header-toggle .header-toggle
@extend .hamburger @extend .hamburger
position: absolute
right: 0
top: 0
+tablet +tablet
display: none display: none
@@ -31,6 +36,7 @@
max-height: 24px max-height: 24px
a a
color: $text color: $text
flex: 1
&:hover &:hover
color: $link-hover color: $link-hover
&.is-active &.is-active
@@ -38,6 +44,10 @@
.fa .fa
font-size: 21px font-size: 21px
line-height: 24px line-height: 24px
.button + .button
margin-left: 10px
+mobile
text-align: left
.header-icon .header-icon
+fa(14px, 24px) +fa(14px, 24px)
@@ -69,6 +79,8 @@
overflow: hidden overflow: hidden
overflow-x: auto overflow-x: auto
white-space: nowrap white-space: nowrap
+mobile
height: $header-height
+desktop +desktop
.header-item:first-child .header-item:first-child
padding-left: 0 padding-left: 0
@@ -101,14 +113,8 @@
.header-menu .header-menu
+mobile +mobile
background: white
box-shadow: 0 4px 7px rgba(black, 0.1) box-shadow: 0 4px 7px rgba(black, 0.1)
display: none display: none
min-width: 120px
position: absolute
right: 0
top: 50px
z-index: 100
.header-item .header-item
border-top: 1px solid rgba($border, 0.5) border-top: 1px solid rgba($border, 0.5)
padding: 10px padding: 10px

View File

@@ -36,7 +36,8 @@
text-align: center text-align: center
.header .header
background: none background: none
box-shadow: none .container
box-shadow: 0 1px 0 rgba($border, 0.3)
.tabs .tabs
a a
border: none border: none
@@ -45,9 +46,6 @@
&.is-boxed &.is-boxed
a a
padding: 8px 15px padding: 8px 15px
&.is-alt
background: $background
color: $text-light
@each $name, $pair in $colors @each $name, $pair in $colors
$color: nth($pair, 1) $color: nth($pair, 1)
$color-invert: nth($pair, 2) $color-invert: nth($pair, 2)
@@ -105,7 +103,6 @@
span span
background: $color-invert background: $color-invert
.header-menu .header-menu
background: $color
.header-item .header-item
border-top-color: rgba($color-invert, 0.2) border-top-color: rgba($color-invert, 0.2)
&.is-fullheight, &.is-fullheight,