Created
June 15, 2020 23:46
-
-
Save kholodovz/f82605213dcb95d84b4c1cc3b1b6004a to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
// .categories | |
*/ | |
.categories { | |
width: 255px; | |
color: #fff; | |
position: relative; | |
} | |
.categories__button { | |
border: none; | |
background: transparent; | |
color: inherit; | |
font-size: 15px; | |
position: absolute; | |
z-index: 1; | |
width: 100%; | |
top: 0; | |
left: 0; | |
height: 42px; | |
line-height: 42px; | |
cursor: default; | |
font-weight: 500; | |
padding: 0; | |
} | |
[dir=ltr] .categories__button { | |
padding-right: 32px; | |
padding-left: 47px; | |
text-align: left; | |
} | |
[dir=rtl] .categories__button { | |
padding-left: 32px; | |
padding-right: 47px; | |
text-align: right; | |
} | |
.categories__button:focus { | |
outline: none; | |
} | |
.categories__button-icon { | |
position: absolute; | |
top: calc(50% - 7px); | |
fill: #859ba6; | |
-webkit-transition: fill .2s; | |
transition: fill .2s; | |
} | |
[dir=ltr] .categories__button-icon { | |
left: 16px; | |
} | |
[dir=rtl] .categories__button-icon { | |
right: 16px; | |
} | |
.categories__button-arrow { | |
position: absolute; | |
top: calc(50% - 3px); | |
fill: #859ba6; | |
-webkit-transition: fill .2s, -webkit-transform .2s; | |
transition: fill .2s, -webkit-transform .2s; | |
transition: fill .2s, transform .2s; | |
transition: fill .2s, transform .2s, -webkit-transform .2s; | |
} | |
[dir=ltr] .categories__button-arrow { | |
right: 13px; | |
} | |
[dir=rtl] .categories__button-arrow { | |
left: 13px; | |
} | |
.categories__body { | |
max-width: 320px; | |
position: relative; | |
background: #3d464d; | |
-webkit-box-shadow: none; | |
box-shadow: none; | |
border-radius: 2px; | |
top: 0; | |
} | |
.categories__links { | |
position: relative; | |
list-style: none; | |
padding: 0 0 14px; | |
margin: 0; | |
overflow-y: auto; | |
overscroll-behavior-y: contain; | |
-webkit-overflow-scrolling: touch; | |
overflow-scrolling: touch; | |
} | |
.categories__item-link { | |
font-weight: 400; | |
position: relative; | |
display: block; | |
padding: 10px 16px; | |
color: inherit; | |
font-size: 14px; | |
line-height: 16px; | |
letter-spacing: .02em; | |
} | |
.categories__item-link:hover { | |
color: inherit; | |
} | |
.categories__item--hover .categories__item-link { | |
background: #525d66; | |
} | |
.categories__item-arrow { | |
top: calc(50% - 5px); | |
position: absolute; | |
fill: #98aab3; | |
} | |
[dir=ltr] .categories__item-arrow { | |
right: 14px; | |
-webkit-transform: scaleX(1); | |
transform: scaleX(1); | |
} | |
[dir=rtl] .categories__item-arrow { | |
left: 14px; | |
-webkit-transform: scaleX(-1); | |
transform: scaleX(-1); | |
} | |
.categories__submenus-container { | |
position: relative; | |
height: calc(100% - 48px); | |
padding-top: 48px; | |
width: 100%; | |
} | |
.categories__submenu { | |
position: relative; | |
top: 0; | |
visibility: hidden; | |
display: none; | |
z-index: 100; | |
} | |
[dir=ltr] .categories__submenu { | |
left: 100%; | |
} | |
[dir=rtl] .categories__submenu { | |
right: 100%; | |
} | |
.categories__submenu--type--megamenu { | |
min-height: 100%; | |
-webkit-box-flex: 1; | |
-ms-flex-positive: 1; | |
flex-grow: 1; | |
} | |
.categories__submenu--open { | |
visibility: visible; | |
opacity: 1; | |
display: -webkit-box; | |
display: -ms-flexbox; | |
display: flex; | |
} | |
.categories__submenu--size--sm { | |
width: 237px; | |
} | |
.categories__submenu--size--nl { | |
width: 443px; | |
} | |
.categories__submenu--size--lg { | |
width: 649px; | |
} | |
.categories__submenu--size--xl { | |
width: 855px; | |
} | |
.categories__links-wrapper { | |
overflow: hidden; | |
height: 0; | |
opacity: 0; | |
-webkit-transition: height 0.25s ease-in-out, opacity 0.25s ease-in-out; | |
transition: height 0.25s ease-in-out, opacity 0.25s ease-in-out; | |
display: -webkit-box; | |
display: -ms-flexbox; | |
display: flex; | |
-webkit-box-orient: vertical; | |
-webkit-box-direction: normal; | |
-ms-flex-direction: column; | |
flex-direction: column; | |
max-height: 100%; | |
} | |
.categories__links-wrapper:before { | |
display: block; | |
content: ''; | |
height: 6px; | |
-ms-flex-negative: 0; | |
flex-shrink: 0; | |
} | |
.categories:not(.categories--fixed) .categories__button { | |
cursor: pointer; | |
} | |
.categories:not(.categories--fixed) .categories__button:hover .categories__button-icon, | |
.categories:not(.categories--fixed) .categories__button:hover .categories__button-arrow { | |
fill: currentColor; | |
} | |
.categories--open .categories__links-wrapper { | |
overflow: visible; | |
height: auto; | |
opacity: 1; | |
} | |
.categories--open .categories__button-arrow { | |
-webkit-transform: rotateZ(180deg); | |
transform: rotateZ(180deg); | |
} | |
.categories--transition .categories__links, | |
.categories--transition .categories__links-wrapper { | |
overflow: hidden; | |
} | |
@media (min-width: 992px) and (max-width: 1199px) { | |
.categories { | |
width: 210px; | |
} | |
.categories__submenu--size--sm { | |
width: 204px; | |
} | |
.categories__submenu--size--nl { | |
width: 376px; | |
} | |
.categories__submenu--size--lg { | |
width: 548px; | |
} | |
.categories__submenu--size--xl { | |
width: 720px; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment