src/scss/header.scss
/**
* http://www.google.com/design/spec/layout/metrics-keylines.html#metrics-keylines-keylines-spacing
*/
/**
* HTML5 header element
*/
.mdc-Header {
height: 48px;
background: $blue-dark;
color: #fff;
display: flex;
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 102;
transition: box-shadow 0.5s ease;
justify-content: space-between;
padding-left: 16px;
padding-right: 16px;
@include medium {
height: $header-height;
}
@include xlarge {
left: $navigation-width;
}
}
/**
* Add shadow to header when scrolling down.
*/
.mdc-Header.has--shadow {
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
}
.mdc-Header-left {
display: flex;
align-items: center;
overflow: hidden;
}
.mdc-Header-block {
display: flex;
align-items: center;
}
.mdc-Header-title {
margin-left: 40px;
font-size: 20px;
display: none;
@include medium {
font-size: 24px;
display: block;
}
}
.mdc-Header-chevron {
fill: #fff;
margin: 0 10px;
width: 30px;
height: 30px;
display: none;
@include medium {
display: block;
}
}
.mdc-Header-subtitle {
margin-left: 56px;
font-size: 20px;
display: flex;
align-items: center;
min-width: 0;
@include medium {
font-size: 24px;
margin-left: 0;
}
}
.mdc-Header-subtitle-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}