Skip to content

Instantly share code, notes, and snippets.

@megalithic
Forked from gaassa/gist:49d598ff32df09407dc1
Created January 20, 2016 02:36
Show Gist options
  • Save megalithic/66540111f625a952a569 to your computer and use it in GitHub Desktop.
Save megalithic/66540111f625a952a569 to your computer and use it in GitHub Desktop.
// Header styles.
//
// - Main wrapper
// - Search box
// - Message center
// - Main nav
// - User wallet
// Main wrapper.
.header {
$logo-width: $spacing-double * 8;
$logo-height: $spacing-double * 2.5;
$logo-margin: $spacing-base;
@include position(fixed, 0 null null 0);
background-color: $white;
box-shadow: 0 $box-shadow-small $spacing-small rgba($black, .15);
color: $gray-coal;
width: 100%;
z-index: map-get($z-index, header);
@at-root #{&}__wrapper { border-bottom: 1px solid $gray-gainsboro; }
@at-root {
#{&}__main,
#{&}__sub {
@include outer-container;
@include row();
}
}
@at-root #{&}__focus { @include span-columns(9); }
@at-root #{&}__sponsor {
float: left;
padding: $spacing-medium 0;
width: ($logo-width + $logo-margin) * 3;
}
@at-root #{&}__sponsor-logo {
margin-right: $logo-margin;
max-height: $logo-height;
max-width: $logo-width;
}
}
// Search box.
.search-box {
@at-root #{&}__prompt {
float: right;
padding-top: $spacing-medium * 2;
a { color: $gray-coal; }
}
@at-root #{&}__form {
padding-top: $spacing-medium;
}
// No other easy way to override default input bottom margin.
// scss-lint:disable ImportantRule
@at-root #{&}__input {
$search-field-width: 85%;
@include font-size(1.8, 1.8);
background: none;
border: 0;
font-family: $proxima-reg;
margin-bottom: 0 !important;
width: $search-field-width !important;
}
// scss-lint:enable ImportantRule
@at-root #{&}__button {
margin-left: $spacing-small;
padding: $spacing-medium - ceil($spacing-small / 2) $spacing-medium;
}
}
// Message center.
.message-center {
@include span-columns(3);
background-color: $gray-light;
box-sizing: border-box;
min-height: $spacing-large * 2;
padding: $spacing-base 0 0 $spacing-base;
@at-root #{&}__photo {
display: inline-block;
position: relative;
}
@at-root #{&}__info {
display: inline-block;
vertical-align: middle;
}
@at-root #{&}__notification {
@include position(absolute, ceil($spacing-small / 2) ceil($spacing-small / 2) null null);
@include size($spacing-base);
background-color: $red-main;
border: 2px solid $white;
border-radius: 100%;
}
@at-root #{&}__name {
@include font-size(2.2, 2.2);
cursor: pointer;
display: inline-block;
float: left;
font-family: $proxima-light;
margin-bottom: -$spacing-small;
max-width: $spacing-medium * 6;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
white-space: nowrap;
<<<<<<< HEAD
=======
}
// We need to override those values in this particular case only.
// scss-lint:disable ImportantRule
@at-root #{&}__icon {
float: left;
line-height: 2.2rem !important;
top: 0 !important;
>>>>>>> origin
}
// scss-lint:enable ImportantRule
// We need to override those values in this particular case only.
// scss-lint:disable ImportantRule
@at-root #{&}__icon {
float: left;
line-height: 2.2rem !important;
top: 0 !important;
}
// scss-lint:enable ImportantRule
@at-root #{&}__signout { @include text-link(1.1, 1.1); }
}
// Main nav.
.main-nav {
@include font-size(1.4);
@include span-columns(9);
@at-root #{&}__item {
margin: 0 $spacing-medium * 2;
&:first-child { margin-left: 0; }
}
@at-root #{&}__link--lead {
padding-left: $spacing-medium;
&:after { display: none; }
}
}
.main-nav__link {
color: $gray-coal;
display: block;
padding: $spacing-base 0;
position: relative;
&:after {
@include position(absolute, null null 0 0);
@include transition(all ease $transition-duration / 2);
background-color: $gray-dark;
content: '';
height: 0;
visibility: hidden;
width: 100%;
}
@at-root #{&}--is-active,
&:hover,
&:focus {
color: $gray-coal;
&:after {
height: 3px;
visibility: visible;
}
}
}
// User wallet.
.user-wallet {
@include font-size(1.4);
@include span-columns(3);
border-left: 1px solid $gray-smoke;
box-sizing: border-box;
line-height: .1rem;
padding-left: $spacing-base;
<<<<<<< HEAD
@at-root #{&}--indicator {
line-height: 2.1rem;
}
@at-root #{&}__item {
color: $blue-main;
display: inline-block;
font-family: $proxima-smbd;
margin-left: $spacing-medium;
}
}
.wallet-nav__link {
color: $gray-coal;
display: inline-block;
padding: $spacing-base 0;
position: relative;
&:after {
@include position(absolute, null null 0 0);
@include transition(all ease $transition-duration / 2);
background-color: $gray-dark;
content: '';
height: 0;
visibility: hidden;
width: 100%;
}
@at-root #{&}--is-active,
&:hover,
&:focus {
color: $gray-coal;
&:after {
height: 3px;
visibility: visible;
}
=======
@at-root #{&}__item {
color: $blue-main;
display: inline-block;
font-family: $proxima-smbd;
margin-left: $spacing-medium;
>>>>>>> origin
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment