hensei-web/components/Header/index.module.scss
2023-09-09 17:44:49 -07:00

75 lines
1.2 KiB
SCSS

.bahamut {
$negative-margin: $unit * -2;
align-items: center;
background: #2b4683;
box-sizing: border-box;
display: flex;
gap: $unit;
justify-content: center;
text-align: center;
font-weight: $bold;
padding: $unit-2x;
margin-top: $negative-margin;
margin-left: $negative-margin;
margin-right: $negative-margin;
margin-bottom: $unit-2x;
width: 100vw;
p {
color: white;
}
svg {
width: 1.2em;
fill: white;
}
}
.header {
display: flex;
flex-direction: row;
margin-bottom: $unit;
justify-content: space-between;
width: 100%;
section {
display: flex;
gap: $unit;
}
img,
.placeholder {
$diameter: 32px;
border-radius: calc($diameter / 2);
height: $diameter;
width: $diameter;
}
.placeholder {
background: var(--placeholder-bg);
}
.dropdownWrapper {
display: inline-block;
padding-bottom: $unit;
&:hover .Menu,
.Menu.open {
display: block;
}
&:hover {
.Button {
background: var(--button-bg-hover);
color: var(--button-text-hover);
}
}
}
@include breakpoint(phone) {
.Button .Text {
display: none;
}
}
}