File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
@charset "utf-8";
.user-wrap header {
width: 100%;
background-color: var(--sky-green);
position: relative;
z-index: 2;
}
.user-wrap header.company-header {
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
z-index: 2;
border-bottom: 1px solid #aaa;
}
.mobile-menu {
display: none;
position: relative;
/* top: 50px;
left: 50px; */
z-index: 1;
-webkit-user-select: none;
user-select: none;
}
.mobile-menu input[type="checkbox"] {
display: block;
width: 32px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0;
z-index: 2;
-webkit-touch-callout: none;
}
.mobile-menu span {
display: block;
width: 32px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: #fff;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
opacity 0.55s ease;
}
.mobile-menue span:first-child {
transform-origin: 0% 0%;
}
.mobile-menu span:nth-last-child(2) {
transform-origin: 0% 100%;
}
.mobile-menu input:checked~span {
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #000;
}
.mobile-menu input:checked~span:nth-last-child(3) {
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
.mobile-menu input:checked~span:nth-last-child(2) {
transform: rotate(-45deg) translate(0, -1px);
}
.mobile-menu .main-menu {
position: absolute;
overflow: hidden;
width: 0;
height: 100vh;
background-color: #fff;
right: -1rem;
top: -2rem;
padding-top: 125px;
-webkit-font-smoothing: antialiased;
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
}
.user-wrap header.company-header .mobile-menu .main-menu {
background-color: #000;
}
.user-wrap header.company-header .mobile-menu input:checked~span {
background-color: var(--white);
}
.mobile-menu input:checked~ul.main-menu {
width: 300px;
}