guild_front/src/components/SideBar/sidebar.scss

197 lines
2.9 KiB
SCSS
Raw Normal View History

2023-03-08 13:27:02 +03:00
.auth-menu {
2023-03-08 20:01:57 +03:00
z-index: 99;
2023-03-22 15:33:12 +03:00
position: fixed;
2023-03-08 13:27:02 +03:00
top: 0;
left: 0;
width: 141px;
height: 100%;
background: #e1fccf;
2023-03-09 18:44:31 +03:00
2023-04-10 18:08:41 +03:00
@media (max-width: 1375px) {
2023-03-09 18:44:31 +03:00
position: fixed;
2023-03-14 18:07:45 +03:00
width: 100% !important;
2023-03-09 18:44:31 +03:00
height: 80px;
margin-bottom: 50px;
}
2023-03-14 18:07:45 +03:00
@media (max-width: 1440px) {
width: 80px;
}
2023-03-08 13:27:02 +03:00
}
.auth-title {
2023-04-28 18:07:34 +03:00
position: relative;
2023-03-08 20:01:57 +03:00
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
height: 80%;
2023-04-28 18:07:34 +03:00
z-index: 9999;
2023-03-08 20:01:57 +03:00
2023-03-08 13:27:02 +03:00
.text {
2023-03-08 20:01:57 +03:00
display: flex;
flex-direction: column;
margin: 70px 0 0 0;
2023-03-08 20:01:57 +03:00
h3 {
transform: rotate(270deg);
font-size: 25px;
line-height: 32px;
text-transform: uppercase;
color: #222222;
}
.burger {
2023-03-09 18:44:31 +03:00
cursor: pointer;
2023-03-08 20:01:57 +03:00
margin-bottom: 70px;
&__line {
width: 32px;
border-radius: 33px;
height: 5px;
background-color: #333;
margin: 5px 0 0 27px;
transition: 0.4s;
}
2023-03-09 18:44:31 +03:00
.l1.change {
transform: rotate(-45deg) translate(-7px, 6px);
}
.l2.change {
opacity: 0;
}
.l3.change {
transform: rotate(45deg) translate(-8px, -8px);
}
2023-03-08 20:01:57 +03:00
}
2023-03-08 13:27:02 +03:00
}
2023-03-08 20:01:57 +03:00
.outstaffing {
2023-03-09 18:44:31 +03:00
transform: rotate(270deg);
2023-03-08 20:01:57 +03:00
font-size: 18px;
line-height: 32px;
width: 200px;
img {
margin-right: 15px;
2023-03-08 13:27:02 +03:00
}
}
2023-03-09 18:44:31 +03:00
2023-04-10 18:08:41 +03:00
@media (max-width: 1375px) {
2023-03-09 18:44:31 +03:00
flex-direction: row;
height: 100%;
.text {
margin: 0;
flex-direction: row;
.burger {
margin-bottom: 5px;
}
h3 {
display: none;
}
}
.outstaffing {
margin: 0;
width: 150px;
font-size: 12px;
transform: none;
img {
margin-right: 5px;
width: 15px;
}
}
}
2023-03-08 13:27:02 +03:00
}
2023-03-08 20:01:57 +03:00
.auth-body {
2023-03-09 18:44:31 +03:00
padding: 40px;
2023-04-28 18:07:34 +03:00
visibility: hidden;
transition: 0.2s ease-in-out;
opacity: 0;
z-index: 99;
2023-03-08 20:01:57 +03:00
position: absolute;
top: 0;
left: 0;
height: 100%;
background: #e1fccf;
width: 0;
2023-03-09 18:44:31 +03:00
flex-direction: column;
align-items: stretch;
&__title {
display: flex;
2023-04-10 18:08:41 +03:00
margin-top: 24px;
2023-03-09 18:44:31 +03:00
}
&__navigation {
margin-top: 28px;
padding: 0;
list-style: none;
font-size: 20px;
line-height: 33px;
a,
a:hover,
a:active {
color: #000000;
}
}
&__politic {
margin-top: 42px;
font-size: 12px;
line-height: 22px;
color: #000000;
}
&__contacts {
margin-top: 127px;
color: #000000;
h4 {
font-size: 20px;
line-height: 33px;
}
p {
font-size: 12px;
}
}
2023-04-10 18:08:41 +03:00
@media (max-width: 1375px) {
2023-03-09 18:44:31 +03:00
&__title {
margin-top: 35px;
}
&__politic {
margin-top: 35px;
}
&__contacts {
margin: 50px 0 25px 0;
}
}
2023-03-08 20:01:57 +03:00
}
.auth-body.active {
2023-04-28 18:07:34 +03:00
visibility: visible;
transition: 0.1s ease-in-out;
opacity: 1;
2023-03-09 18:44:31 +03:00
display: flex;
width: 424px;
left: 140px;
2023-03-27 19:08:01 +03:00
@media (max-width: 1440px) {
left: 79px;
}
2023-04-10 18:08:41 +03:00
@media (max-width: 1375px) {
2023-03-09 18:44:31 +03:00
left: 0;
width: 100%;
2023-05-02 15:27:24 +03:00
height: 605px;
2023-03-09 18:44:31 +03:00
}
2023-03-08 20:01:57 +03:00
}