//// /// @group default-navigation-bar //// /// Background color of page detail and menu boxes $navigation-menu-box-background-color: $navigation-background-color !default; /// Text color of page detail and menu boxes $navigation-menu-box-text-color: #fff !default; /// Transparency of page detail and menu boxes $navigation-menu-box-opacity: $navigation-opacity !default; /// Style of navigation menu boxes. /// /// - `"triangle"`: Box without border and small triangle arrow at the right side /// /// - `"border"`: Box with a border $navigation-menu-box-style: "triangle" !default; /// Width of border if `$navigation-menu-box-style` is `"border"`. $navigation-menu-box-border-width: 2px !default; /// Color of border if `$navigation-menu-box-style` is `"border"`. $navigation-menu-box-border-color: #9c9c9c !default; // Pictogram visibility. $navigation-menu-box-pictogram-visibility: $standard-page-pictogram-visibility !default; .navigation_site_detail, .navigation_menu_box { color: $navigation-menu-box-text-color; background-color: $navigation-menu-box-background-color; background-image: $navigation-background-image; @if $navigation-menu-box-style == "border" { right: 90px; border: $navigation-menu-box-border-width solid $navigation-menu-box-border-color; } @else { right: 94px; &:before { content: ""; display: block; position: absolute; left: 100%; @include triangle(16px, $navigation-menu-box-background-color, right); } } // Ensure element remains hovered even when cursor moves between // navigation bar and menu box. &:after { content: ""; display: block; position: absolute; bottom: 0; left: 100%; width: 10px; height: 40px; } hr { border: 0; border-bottom: 1px solid $navigation-menu-box-text-color; } } .navigation_site_detail { .thumbnail { @if $navigation-menu-box-pictogram-visibility == visible { @extend %pageflow_page_type_thumbnail; } position: relative; width: 170px; height: 95px; margin-top: 12px; &:after { content: ""; position: absolute; top: 28px; left: 66px; width: 38px; height: 38px; background-size: 76px 38px; background-repeat: no-repeat; } } &:before { top: 18px; } } .navigation_menu_box:before { bottom: 8px; }