87 lines
1.5 KiB
CSS
87 lines
1.5 KiB
CSS
.header {
|
|
position: sticky;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 5rem;
|
|
background-color: var(--color-white);
|
|
box-shadow: var(--header-shadow),var(--shadow-inset);
|
|
margin-bottom: -5rem;
|
|
z-index: 10;
|
|
}
|
|
|
|
.header.is-open {
|
|
box-shadow: unset;
|
|
}
|
|
|
|
.header.is-open .header__mobile {
|
|
display: block;
|
|
position: fixed;
|
|
}
|
|
|
|
.header__section {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 100%;
|
|
}
|
|
|
|
.header__mobile {
|
|
display: none;
|
|
width: 100%;
|
|
height: calc(100% - 4.75rem);
|
|
background-color: var(--color-white);
|
|
z-index: 20;
|
|
}
|
|
|
|
.header__button {
|
|
position: relative;
|
|
border: 0;
|
|
background: transparent;
|
|
padding: 2rem 2rem;
|
|
}
|
|
|
|
.header__button > span{
|
|
display: block;
|
|
position: absolute;
|
|
height: 0.125rem;
|
|
width: 1.625rem;
|
|
background: var(--color-black);
|
|
opacity: 1;
|
|
left: calc(50% - 0.8125rem);
|
|
border-radius: 10rem;
|
|
transform: rotate(0deg);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.header__button > span:nth-child(1) {
|
|
top: calc(50% - 0.4375rem);
|
|
}
|
|
|
|
.header__button > span:nth-child(2) {
|
|
top: calc(50% - 0.0625rem);
|
|
}
|
|
|
|
.header__button > span:nth-child(3) {
|
|
top: calc(50% - 0.0625rem);
|
|
}
|
|
|
|
.header__button > span:nth-child(4) {
|
|
top: calc(50% + 0.3125rem);
|
|
}
|
|
|
|
.header__button.is-active > span:nth-child(1),
|
|
.header__button.is-active > span:nth-child(4) {
|
|
width: 0%;
|
|
left: 50%;
|
|
}
|
|
|
|
.header__button.is-active > span:nth-child(2) {
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
.header__button.is-active > span:nth-child(3) {
|
|
transform: rotate(-45deg);
|
|
}
|