misuzu/assets/less/mio/classes/header.less
2018-03-22 02:56:41 +00:00

90 lines
1.7 KiB
Text

@mio-header-mobile: 700px;
.mio__header {
display: flex;
margin: 4px 0;
@media (max-width: @mio-header-mobile) {
flex-direction: column;
align-items: center;
}
&__logo {
flex-grow: 0;
flex-shrink: 0;
&__link {
color: inherit;
text-decoration: none;
cursor: pointer;
display: block;
}
&__image {
vertical-align: bottom;
@media (max-width: @mio-header-mobile) {
max-width: 200px;
max-height: 100px;
}
}
}
&__menu {
flex-grow: 1;
flex-shrink: 1;
display: flex;
align-items: flex-start;
justify-content: flex-end;
@media (max-width: @mio-header-mobile) {
width: 100%;
}
}
&__user {
border: 1px solid #9475b2;
display: inline-block;
&__content {
margin: 2px;
display: flex;
}
&__avatar {
width: 60px;
height: 60px;
}
&__links {
text-align: right;
list-style: none;
margin: 0 2px;
line-height: 1.5em;
&__container {
flex-grow: 1;
}
@media (max-width: @mio-header-mobile) {
font-size: 1.5em;
}
}
&__link {
color: inherit;
text-decoration: none;
display: block;
min-width: 70px;
&:hover {
text-decoration: underline;
}
}
@media (max-width: @mio-header-mobile) {
width: 100%;
margin: 0;
}
}
}