patternplate-client
Version:
Universal javascript client application for patternplate
92 lines (90 loc) • 1.56 kB
text/less
.main-header {
overflow: hidden;
position: relative;
z-index: 1;
display: flex;
flex-shrink: 0;
height: @headerHeight;
background-color: @root-background;
box-shadow: @shadow-down;
.logo {
display: none;
align-items: center;
min-width: @navWidthMedium;
@media screen and (min-width: 900px) {
display: flex;
min-width: @navWidthWide;
width: 100%;
}
.icon {
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: flex-start;
flex-wrap: nowrap;
}
.svg-icon {
flex-shrink: 0;
max-width: 100%;
margin: 0 5px 0 0;
min-width: 42.5px;
min-height: 42.5px;
}
.main-header__title {
flex: 1 0 auto;
margin-right: 5px;
align-content: center;
color: @root-color;
&:hover {
color: @hover-color;
}
}
a {
margin-right: 15px;
}
.version {
display: none;
flex-grow: 0;
flex-shrink: 0;
border-radius: 3px;
padding: 5px;
margin-left: auto;
margin-right: 10px;
line-height: 1.45;
background: @code-background;
border: 1px solid @border-color;
}
}
.menu {
display: flex;
align-items: center;
.svg-text {
color: @root-color;
&:hover {
color: @hover-color;
}
}
}
@media screen and (max-width: 500px) {
.menu {
margin: 0;
height: @headerHeight;
border: none;
vertical-align: middle;
.svg-icon {
min-width: 42.5px;
min-height: 42.5px;
padding: 5px;
}
}
}
@media screen and (min-width: 500px) {
padding: 0 5px;
.menu {
display: none;
}
.logo {
display: flex;
}
}
}