%PDF- %PDF-
Direktori : /home/bitrix/www/bitrix/components/bitrix/menu/templates/bootstrap_v4/ |
Current File : /home/bitrix/www/bitrix/components/bitrix/menu/templates/bootstrap_v4/style.css |
.bx-top-nav-container { position: relative; padding: 0 10px; border-radius: 2px; background: var(--theme-color-primary); color: #fff; } /*region 1 lvl*/ .bx-nav-list-1-lvl { display: flex; margin: 0; padding: 0; list-style: none; flex-wrap: wrap; } .bx-nav-1-lvl { position: relative; } .bx-nav-1-lvl-link { display: block; padding-top: 6px; padding-bottom: 2px; border-bottom: none; border-radius: 1px; text-decoration: none; transition: 250ms linear all; } .bx-nav-1-lvl-link:hover { text-decoration: none; } .bx-nav-1-lvl.bx-hover > .bx-nav-1-lvl-link, .bx-nav-1-lvl.bx-active > .bx-nav-1-lvl-link, .bx-nav-1-lvl:hover > .bx-nav-1-lvl-link { border-bottom: none; background: var(--theme-color-second); } .bx-nav-1-lvl-link-text { display: block; padding: 10px 14px 14px; color: #fff; text-decoration: none; text-transform: uppercase; font-weight: 600; font-size: 14px; transition: 250ms linear all; } .bx-nav-1-lvl.bx-nav-parent.bx-hover > .bx-nav-1-lvl-link .bx-nav-1-lvl-link-text, .bx-nav-1-lvl.bx-nav-parent:hover > .bx-nav-1-lvl-link .bx-nav-1-lvl-link-text { background-color: transparent; color: var(--theme-color-primary); } .bx-nav-1-lvl.bx-nav-parent.hover > .bx-nav-1-lvl-link, .bx-nav-1-lvl.bx-nav-parent.bx-hover > .bx-nav-1-lvl-link { z-index: 250; box-shadow: 0 6px 13px 0 rgba(0, 0, 0, .13) } .bx-nav-1-lvl.bx-nav-parent.bx-hover > .bx-nav-1-lvl-link .bx-nav-1-lvl-link-text, .bx-nav-1-lvl.bx-nav-parent.hover > .bx-nav-1-lvl-link .bx-nav-1-lvl-link-text { background: #fff; } .bx-nav-parent-arrow { display: none; } /*endregion*/ /*region 2 lvl*/ .bx-nav-2-lvl-container, .bx-nav-2-lvl-container-advanced { z-index: 999; display: none; padding: 0; min-width: 100%; border-top: none; box-shadow: 0 6px 13px 0 rgba(0, 0, 0, .13); color: #000; opacity: 0; } .bx-nav-2-lvl-container > ul, .bx-nav-2-lvl-container > div, .bx-nav-2-lvl-container-advanced > ul, .bx-nav-2-lvl-container-advanced > div { flex: 1 } .bx-nav-1-lvl.bx-hover .bx-nav-2-lvl-container-advanced, .bx-nav-1-lvl.hover .bx-nav-2-lvl-container-advanced, .bx-nav-1-lvl.bx-hover .bx-nav-2-lvl-container, .bx-nav-1-lvl.hover .bx-nav-2-lvl-container { position: absolute; top: calc(100% - 5px); z-index: 999; display: flex; background: #fff; opacity: 1; align-items: stretch; } .bx-nav-list-2-lvl { margin: 0; padding: 5px 0 12px; } .bx-nav-2-lvl { display: block; padding: 0; min-width: 180px; } .bx-nav-2-lvl-link { display: block; padding: 5px 15px 5px; border-bottom: none !important; text-decoration: none !important; } .bx-nav-2-lvl-link-text { color: var(--theme-color-primary); text-decoration: none; font-weight: bold; font-size: 13px; line-height: 16px; } /*.bx-nav-list-2-lvl .bx-nav-2-lvl:first-child a { margin-top: 0; border-top: none; }*/ .bx-nav-2-lvl > .bx-nav-list-2-lvl.bx-active .bx-nav-list-2-lvl-text, .bx-nav-2-lvl > .bx-nav-list-2-lvl:hover .bx-nav-list-2-lvl-text { background: var(--theme-color-light); color: var(--theme-color-primary); } /*endregion*/ /*region 3 lvl*/ .bx-nav-3-lvl-container-advanced:before, .bx-nav-3-lvl-container:before { position: absolute; top: -5px; right: 0; left: 0; display: block; height: 5px; background: #fff; content: " "; } .bx-nav-list-3-lvl { margin: 0; padding: 0 0 14px 0; } .bx-nav-3-lvl { display: block; box-sizing: border-box; margin: 0; padding: 0; min-width: 180px; } .bx-nav-3-lvl-link { display: block; padding: 3px 15px 3px 20px; border-bottom: none; color: #555; text-decoration: none; font-size: 13px; line-height: 14px; } .bx-nav-3-lvl-link.bx-active, .bx-nav-3-lvl-link:hover { background: #f0f0f0; color: var(--theme-color-primary); text-decoration: none; } /*endregion*/ /*region col 4 */ .bx-nav-list-4-col { position: static; } .bx-nav-list-4-col .bx-nav-2-lvl-container-advanced { top: 100%; right: 0; left: 0; } .bx-nav-list-4-col .bx-nav-2-lvl-container, .bx-nav-list-4-col .bx-nav-2-lvl-container-advanced { right: 0; left: 0; } /*endregion*/ /*region catinfo*/ .bx-nav-catinfo { position: relative; z-index: 120; padding: 15px 15px 5px; min-width: 200px; border-left: 1px solid #ecefef; background: #f7fafb; } .bx-nav-catinfo img { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; max-width: 100%; max-height: 100%; width: auto; height: auto; border: 1px solid #e7e9ea; } .bx-nav-catinfo p { padding: 20px 5px 0; font-size: 13px; } /*endregion*/ /*region ASIDE */ .bx-aside-nav-control { position: fixed; top: 5px; left: 5px; z-index: 1750; width: 40px; height: 40px; color: #fff; text-align: center; font-size: 28px; line-height: 40px; cursor: pointer; transition: left .15s linear; } .bx-aside-nav-control .fa { position: relative; z-index: 2100; vertical-align: middle; line-height: 40px; } .bx-wrapper, .bx-aside-nav { transition: transform .15s linear; } /**/ .bx-opened .bx-footer, .bx-opened .workarea { overflow: hidden; } /**/ .bx-aside-nav { position: fixed; top: 50px; bottom: 0; left: 0; z-index: 1600; display: none; width: 100%; background: #4c5c65; -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } .bx-aside-nav.bx-opened { overflow-y: scroll; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .bx-aside-nav ul { margin: 0; padding: 0; list-style: none; } .bx-aside-nav a { display: block; overflow: hidden; padding-left: 15px; max-width: 100%; height: 48px; border-bottom: 1px solid #3d4b53 !important; color: #fff; vertical-align: middle; -ms-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; line-height: 48px; } .bx-aside-nav .bx-nav-list-1-lvl { z-index: 1700; flex-direction: column; } .bx-aside-nav .bx-nav-1-lvl-link-text { padding: 0 0 0 15px; } .bx-aside-nav .bx-nav-1-lvl-link { padding: 0; } .bx-aside-nav .bx-nav-1-lvl.bx-nav-parent.hover > .bx-nav-1-lvl-link, .bx-aside-nav .bx-nav-1-lvl.bx-nav-parent.bx-hover > .bx-nav-1-lvl-link { box-shadow: none !important; } .bx-aside-nav .bx-nav-1-lvl.bx-nav-parent.bx-hover > .bx-nav-1-lvl-link .bx-nav-1-lvl-link-text, .bx-aside-nav .bx-nav-1-lvl.bx-nav-parent:hover > .bx-nav-1-lvl-link .bx-nav-1-lvl-link-text { background: transparent; color: #fff; } .bx-aside-nav .bx-nav-1-lvl.bx-opened .bx-nav-2-lvl-container-advanced, .bx-aside-nav .bx-nav-1-lvl.bx-opened .bx-nav-2-lvl-container { display: block; opacity: 1; } .bx-nav-1-lvl.bx-opened, .bx-aside-nav .bx-nav-1-lvl:hover > a, .bx-aside-nav .bx-nav-1-lvl.bx-hover > a { background: #44535c; } .bx-aside-nav .bx-nav-2-lvl-link-text, .bx-aside-nav .bx-nav-3-lvl-link-text, .bx-aside-nav .bx-nav-4-lvl-link-text { color: #fff; font-weight: 500; font-size: 14px; } .bx-aside-nav .bx-nav-list-2-lvl { background: #44535c; } .bx-aside-nav .bx-nav-2-lvl-link { padding: 0 0 0 30px; } .bx-aside-nav .bx-nav-2-lvl-link:hover { background-color: #3b4851; } .bx-aside-nav .bx-nav-3-lvl-link { padding: 0 0 0 45px; } .bx-aside-nav .bx-nav-3-lvl-link:hover { background-color: #3b4851; } .bx-aside-nav .bx-nav-4-lvl-link { padding: 0 0 0 60px; } .bx-aside-nav .bx-nav-4-lvl-link:hover { background-color: #3b4851; } .bx-aside-nav .bx-nav-parent { position: relative; } .bx-aside-nav .bx-nav-parent-arrow { position: absolute; top: 0; right: 0; z-index: 200; margin-top: 6px; width: 46px; height: 34px; border-left: 1px solid #5a6971; text-align: center; } .bx-aside-nav .bx-nav-parent-arrow i { color: #fff; font-style: normal; font-size: 17px; line-height: 34px; } .bx-aside-nav .bx-nav-parent.bx-opened .bx-nav-parent-arrow i { transition: all .15s linear; } .bx-aside-nav .bx-nav-parent .bx-nav-2-lvl-container-advanced, .bx-aside-nav .bx-nav-parent .bx-nav-2-lvl-container, .bx-aside-nav .bx-nav-parent > ul { overflow: hidden; height: 0; } .bx-aside-nav .bx-nav-parent.bx-opened .bx-nav-2-lvl-container-advanced, .bx-aside-nav .bx-nav-parent.bx-opened .bx-nav-2-lvl-container, .bx-aside-nav .bx-nav-parent.bx-opened > ul { height: auto; } .bx-aside-nav .bx-nav-catinfo { display: none; } @media (min-width: 1200px) { .bx-nav-1-lvl > a { font-size: 15px; } .bx-nav-1-lvl > a span { padding: 12px 14px 15px } } @media (min-width: 992px) and (max-width: 1199px) { .bx-nav-1-lvl > a { font-size: 13px; } .bx-nav-1-lvl > a span { padding: 9px 11px 12px } } @media (min-width: 768px) and (max-width: 991px) { .bx-nav-1-lvl > a { font-size: 11px; } .bx-nav-1-lvl > a span { padding: 5px 6px 9px } } @media (min-width: 768px) { .bx-aside-nav-control, .bx-aside-nav { display: none; } .bx-top-nav-container { display: block; } } @media (max-width: 767px) { .bx-aside-nav-control { display: flex; align-items: center; justify-content: center; } .bx-aside-nav { display: block; } .bx-top-nav-container { display: none; } .bx-aside-nav .bx-nav-parent-arrow { display: block; } .bx-aside-nav .bx-nav-1-lvl.bx-nav-parent > a > span > .fa { display: none; } }