.link-top-posts { $bgcolor:#fff59e; position: relative; height: 67px; background: $bgcolor url("../images/catalog-post-img/cat-post-bg.png")0 100% no-repeat; overflow: hidden; display: table; border-radius: 4px; &:hover { background: $bgcolor; } div { position: absolute; width: 82px; height: 67px; text-align: center; left: 0; top: 0; z-index: 1; img { vertical-align: top; max-height: 100%; max-width: 100%; @include Transition(0.05); } } a { position: relative; z-index: 2; padding-left: 90px; vertical-align: middle; display: table-cell; font-weight: 700; text-decoration: none !important; span { display: block; width: 100%; float: left; font-weight: normal; font-style: italic; color: $main-color; } } &:active { div { img { @include Scale(1.05); } } } } .title-catalog { line-height: 22px; font-size: 18px; font-weight: 700; margin-top: -6px; span { display: block; @include wfl; } } .tags-catalog { margin-top: 16px; a { float: left; margin-right: 15px; color: $color2; line-height: 16px; &.disabled { color: $colorStock; cursor: default; text-decoration: none; } } } .sort-cat-wr-line { position: relative; margin-top: 9px; } .sort-line { padding: 0 15px; width: 100%; position: absolute; height: 1px; top: 50%; right: 0; margin-top: -2px; z-index: 1; &:before { width: 100%; height: 1px; background: $seo-border; content: ''; display: block; } } $sortPaddingTop:10; .sort-cat-wr { height: 43px; position: relative; float: left; background: #fff; z-index: 2; p { color: $color2; float: left; padding-top: $sortPaddingTop + px; } } .sort-cat { z-index: 2; background: #fff; margin-left: 7px; float: left; position: relative; padding: $sortPaddingTop + px 28px 15px 10px; > a { color: $link-color; position: relative; @include svgIcon; font-family: inherit !important; &:before { $w:9; $h:5; width: 9 + px; height: $h + px; position: absolute; content: "\e9012"; top: 50%; margin-top: -($h / 2) + px; left: -13px; @include Transition(0.3); font-size: 5px; font-family: icomoon; } } ul { display: none; li { list-style: none; a { display: block; margin-top: 13px; color: $link-color; cursor: pointer; &.desc { display: none; } } } } &.active { background: #fff; border-radius: 4px; box-shadow: 0 0 12px 0 rgba(149,149,149,.75); > a { color: $main-color; cursor: default; text-decoration: none !important; &:before { display: none; } } ul { display: block; } } } .cat_it_wr { position: relative; &:after { width: 100%; height: 1px; background: $seo-border; content: ''; display: block; margin-top: 30px; } } .menu_all_page { display: none; opacity: 0.3; position: absolute; left: 0; top: 0; padding: 0 15px; ul { @include Shadow3; li { a { padding: 0 45px 0 20px } } } &.show_menu_all { display: block !important; } &.opacity_off { opacity: 1; @include Transition(0.05); ul { li { a { padding: 14px 45px 14px 20px; @include Transition(0.25); } } } } } @import "filters"; .close_mob_filters { width: 40px; height: 40px; position: absolute; top: 0; right: 6px; cursor: pointer; text-align: center; @include svgIcon; line-height: 40px; font-size: 20px; color: $link-color; &:before { content: '\e9008'; color: inherit; } } @media (max-width: 992px) { .close_mob_filters { display: block !important; } .mob_filters_wr { width: 100%; height: 100%; background: #fff; position: fixed !important; top: 0; left: -100%; z-index: 99999; overflow-y: scroll; opacity: 0; } } @media (max-width: 767px) { .link-top-posts { margin-top: 23px; } } @media (max-width: 550px) { .sort-line { display: none; } }