Files
the-example-app-nodejs/assets/stylesheets/header.css
2017-11-07 17:33:32 +01:00

82 lines
1.4 KiB
CSS

@block header {
display: flex;
flex-wrap: wrap;
margin: var(--grid-gutter) 0;
padding-bottom: var(--grid-gutter);
border-bottom: 2px solid var(--color-bg-separator);
@media (--breakpoint-desktop) {
flex-wrap: nowrap;
}
@element logo {
display: flex;
flex: 0 0 100%;
align-items: center;
@media (--breakpoint-desktop) {
flex: 0 0 200px;
}
& img {
width: 100%;
height: auto;
max-width: 169px;
}
}
@element navarea {
display: flex;
flex: 0 0 100%;
flex-direction: column;
justify-content: space-around;
@media (--breakpoint-desktop) {
flex: 1 0 auto;
min-height: 90px;
}
}
@element navarea {
& form {
display: flex;
flex-wrap: wrap;
@media (--breakpoint-desktop) {
justify-content: flex-end;
}
& > * {
flex: 0 0 auto;
}
& fieldset {
padding: 0.2em 1em;
margin: 0;
border: none;
background: var(--color-bg-grey);
color: var(--color-text-grey);
border-radius: var(--border-radius);
font-size: 0.8em;
& + fieldset {
margin-left: var(--grid-gutter)
}
& label + select {
margin-left: 0.5em;
}
& select,
& label {
display: inline-block;
margin-top: 0;
margin-bottom: 0;
}
}
}
}
}