Current Path : /var/www/www-root/data/www/info.monolith-realty.ru/local/templates/monolitsochi/css/blocks/ |
Current File : /var/www/www-root/data/www/info.monolith-realty.ru/local/templates/monolitsochi/css/blocks/tabs.css |
.tabs { margin-bottom: 40px; } .tabs--in-section { margin-bottom: 48px; } .tabs .tab-content { background-color: white; background-color: var(--black_bg_black); border: none; padding: 40px 0 0; } .tabs .tab-content.not_tabs { padding-top: 0; } .tabs .nav-tabs + .tab-content { border-top: 0; } .tabs .nav-tabs li { margin: 3px; background: #fafafa; background: var(--light2_bg_black); -moz-transition: background-color 0.3s; -ms-transition: background-color 0.3s, box-shadow 0.3s ease; -o-transition: background-color 0.3s, box-shadow 0.3s ease; -webkit-transition: background-color 0.3s, box-shadow 0.3s ease; transition: background-color 0.3s, box-shadow 0.3s ease; } .tabs .nav-tabs li:hover { background: #fff; background: var(--black_bg_black); } .tabs .nav-tabs li a, .tabs .nav-tabs li > span { cursor: pointer; display: block; margin: 0; padding: 14px 21px 14px 22px; color: #666; color: var(--light_basic_text_black); border: none; border-radius: 3px; font-weight: 600; /* background-color: var(--card_bg_black); */ } .tabs .nav-tabs li span { padding-top: 11px; padding-bottom: 11px; } .tabs .nav-tabs li a:hover, .tabs .nav-tabs li span:hover { border-color: transparent; color: #333; color: var(--white_text_black); } .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover { border: none; background: none; } .nav-tabs > li.active:after { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; z-index: 1; height: 2px; -moz-border-radius-topleft: 3px; -webkit-border-top-left-radius: 3px; border-top-left-radius: 3px; -moz-border-radius-topright: 3px; -webkit-border-top-right-radius: 3px; border-top-right-radius: 3px; background: #9e9e9e; background: var(--theme-more-color); } .tabs .nav-tabs li.active > span { color: #333; color: var(--white_text_black); cursor: default; } .tabs .nav-tabs a:hover, .tabs .nav-tabs a:active, .tabs .nav-tabs a:focus { background: #fff; background: var(--card_bg_hover_black); } .tabs .nav-tabs li.active a { color: #9e9e9e; color: var(--fill_dark_light_white_hover); background: var(--black_bg_black); } .tabs .nav-tabs li.active:hover { box-shadow: none; transform: none; border-color: #e5e5e5; border-color: var(--stroke_black); } .tabs .tab-content .content { margin: -8px 0 0; } .tabs .nav-tabs > li:before, .pagination > li:before { margin: 0; padding: 0; } .nav-tabs { border: none; margin: -3px; padding: 0; } .nav-tabs li { margin: 0; padding: 0; } .nav-tabs li:before { display: none !important; } .tabs.horizontal-scrolling { margin: 0px; position: relative; overflow: hidden; } .tabs.horizontal-scrolling:before, .tabs.horizontal-scrolling:after { content: ""; width: 10px; height: 48px; background: #fff; background: var(--black_bg_black); position: absolute; top: 0px; opacity: 0; } .tabs.horizontal-scrolling:before { left: 0px; } .tabs.horizontal-scrolling:after { right: 0px; } .tabs.horizontal-scrolling .nav { margin: 0px; white-space: nowrap; padding: 0px; } .tabs.horizontal-scrolling .nav > li { float: none; display: inline-block; margin: 0px; } .tabs.horizontal-scrolling .nav > li:not(:last-of-type) { margin-right: 4px; } .tabs.horizontal-scrolling + .tab-content { margin-top: 2.666rem; } .tabs.horizontal-scrolling.bottom-line .nav > li:not(:last-of-type) { margin-right: 2.266rem; } .tabs.bottom-line li { background: none; } .tabs.bottom-line li a { padding: 0px 0px 0.466rem; } .tabs.bottom-line li.active:after { left: 0px; right: 0px; top: auto; bottom: 0px; border-radius: 0px; } .tabs.bottom-line + .tab-content { margin-top: 1.666rem; } .tab-nav-wrapper { margin: 0px 70px; } .tab-nav { display: flex; justify-content: center; margin: 0px -6px; position: relative; } .tab-nav__item { margin: 0px 6px; padding: 5px 11px 6px 11px; cursor: pointer; color: #666666; color: var(--light_basic_text_black); } .tab-nav__item::first-letter { text-transform: capitalize; } .tab-nav__item:hover { border-radius: 4px; } .tab-nav__item.active { cursor: default; color: #fff; border-radius: 4px; } @media (max-width: 767px) { .index-block__title-wrapper--with-center-block .tab-nav-wrapper { margin-top: 25px; margin-bottom: 7px; padding-right: 6px; } .tab-nav { margin: 0px -6px; } .tab-nav__item { margin: 0px 6px; line-height: 18px; } .tab-nav__item.active { font-weight: normal; } .index-block__title-wrapper--with-center-block .index-block__part--left { margin-bottom: 16px; } } @media (max-width: 600px) { .arrow_scroll_init .arrows_wrapper { opacity: 0; } .tab-nav { margin-left: -3px; margin-right: -3px; } .tab-nav__item { margin-left: 3px; margin-right: 3px; } .index-block__title-wrapper--with-center-block .index-block__part--center { margin-bottom: 8px; } } /*scroll*/ .arrow_scroll { max-height: 55px; overflow: hidden; } .arrow_scroll .nav.nav-tabs { white-space: nowrap; min-width: 300%; z-index: 1; position: relative; } .arrow_scroll .nav.nav-tabs > li { float: none; display: inline-block; vertical-align: top; } .arrow_scroll_init .arrows_wrapper { position: absolute; top: 0; bottom: 0; width: 100%; } .arrow_scroll_init .arrows_wrapper .arrow { position: absolute; width: 38px; height: 100%; display: flex; align-items: center; justify-content: center; background: #fff; background: var(--black_bg_black); z-index: 1; cursor: pointer; } .grey_block .arrow_scroll_init .arrows_wrapper .arrow { background-color: #f9f9fa; background-color: var(--darkerblack_bg_black); } .arrow_scroll_init .arrows_wrapper .arrow.arrow_left { left: -14px; border-right: 1px solid #ececec; border-color: var(--stroke_black); } .arrow_scroll_init .arrows_wrapper .arrow.arrow_left svg { transform: rotate(-90deg); } .arrow_scroll_init .arrows_wrapper .arrow.arrow_right { right: -14px; border-left: 1px solid #ececec; border-color: var(--stroke_black); } .dropdown-select .arrow_scroll_init .arrows_wrapper .arrow.arrow_right{right: 14px;} .dropdown-select .arrow_scroll_init .arrows_wrapper{right: -14px;} .arrow_scroll_init .arrows_wrapper .arrow.arrow_right svg { transform: rotate(90deg); } .arrow_scroll_init .arrows_wrapper .arrow.disabled { display: none; } .dropdown-select .line-block{ position: relative; }