1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465 |
- .hamburger {
- display: none;
- position: absolute;
- top: 40px;
- right: 50px;
- cursor: pointer;
- flex-direction: column;
- align-items: flex-end;
- z-index: 20;
- span {
- display: block;
- margin-top: 6px;
- width: 30px;
- height: 3px;
- background: #151812;
- }
- span.long {
- width: 36px;
- }
- &_active {
- span {
- transform: rotate(-45deg);
- margin-top: -3px;
- background: #33382e;
- transition: all .6s;
- &:last-child {
- transform: rotate(45deg);
- }
- &:nth-child(2){
- display: none;
- }
- }
- }
- }
- .menu {
- position: fixed;
- top: 0;
- left: 100%;
- width: 40vw;
- height: 100vh;
- padding-top: 30px;
- z-index: 10;
- visibility: hidden;
- opacity: 0;
- transition: all 0.6s;
- list-style: none;
- background-color: #727272;;
- &_active {
- visibility: visible;
- opacity: 1;
- left: 0;
- }
- &__link {
- border: 1px blanchedalmond solid;
- border-radius: 10px;
- position: relative;
- margin-bottom: 15px;
- margin-right: 20px;
- a {
- color:rgb(255, 255, 255);
- padding: 0;
- }
- }
- }
|