diff options
Diffstat (limited to 'sass/partials/_header.scss')
| -rw-r--r-- | sass/partials/_header.scss | 140 |
1 files changed, 140 insertions, 0 deletions
diff --git a/sass/partials/_header.scss b/sass/partials/_header.scss new file mode 100644 index 0000000..fb6680e --- /dev/null +++ b/sass/partials/_header.scss @@ -0,0 +1,140 @@ +#header{ + height: 68px; + margin: 30px auto; + text-transform: uppercase; + line-height: 1; + h1{ + a{ + background: #000; + color: #fff; + padding: 30px 10px 10px 100px; + margin-right: 5px; + display: block; + } + } + ul{ + background: $black; + font-size: 14px; + li{ + display: inline-block; + position: relative; + >a{ + color: #fff; + position: relative; + padding: 44px 20px 7px; + display: block; + border-bottom: 3px solid transparent; + &:after{ + font: 13px/1 $symbol; + color: #666; + content: "["; + margin-left: 10px; + } + &:only-child{ + &:after{ + display: none; + } + } + } + &:hover{ + >a{ + background: #000; + border-bottom: 3px solid $main; + &:after{ + color: #ccc; + } + } + >.sub-menu{ + display: block; + } + } + .sub-menu{ + position: absolute; + top: 100%; + left: 0; + background: $main; + white-space: nowrap; + z-index: 5; + text-transform: none; + display: none; + font-size: 13px; + @include box-shadow(0 12px 16px $shadow); + li{ + display: block; + a{ + padding: 10px 40px 10px 20px; + border-bottom: 1px solid lighten($main, 5%); + border-top: 1px solid darken($main, 5%); + &:hover{ + background: darken($main, 10%); + } + &:after{ + content: ">"; + position: absolute; + right: 10px; + font: 13px/1 $symbol; + color: lighten($main, 10%); + } + &:only-child{ + padding-right: 20px; + &:after{ + content: ""; + } + } + } + &:hover{ + >a{ + background: darken($main, 10%); + } + } + &:first-of-type{ + a{ + border-top: none; + } + } + &:last-of-type{ + a{ + border-bottom: none; + } + } + } + .sub-menu{ + top: 0; + left: 100%; + } + } + } + } + .search{ + margin-top: 25px; + input[type="text"]{ + background: rgba(0,0,0,0.2); + border-style: solid; + border-width: 1px 0; + border-color: rgba(0,0,0,0.5) transparent #555; + color: #ccc; + padding: 5px 15px; + margin: 2px 10px 0 0; + width: 150px; + font-size: 13px; + font-family: inherit; + @include border-radius(15px); + &:active, &:focus{ + background: $black; + } + } + input[type="submit"]{ + font: 18px/1 $symbol; + width: 24px; + height: 24px; + @include square(24px); + border: none; + background: none; + color: #fff; + cursor: pointer; + &:hover{ + color: $main; + } + } + } +}
\ No newline at end of file |