nav { ul { padding-left: 0; } li { margin-bottom: $basic_space; list-style: none; } } .nav__horizontal { ul { @extend .overflow; ul { margin: $basic_space 0; } li { @extend .float_space_left; margin-right: $basic_space; margin-bottom: 0; &:last-child { margin-right: 0; } } } } .nav__right { float: right; margin-left: $basic_space; .align_parent { margin-right: $basic_space * -1; } } .nav__separate { li { position: relative; padding-left: $tiny_space; &:not(:first-child) { &::before { content: ""; position: absolute; width: $tiny_space; height: 100%; left: 0; top: 0; background-color: $darkest_color; } } } } .nav__separate_right { float: right; li { position: relative; &:first-child { padding-left: $basic_space * 2 + $tiny_space; &::before { content: ""; position: absolute; width: $tiny_space; height: 100%; left: 0; top: 0; background-color: $brightest_color; margin: 0 $basic_space; } } } } .nav__center_old { @extend .nav__horizontal; float: right; position: relative; left: -50%; ul { position: relative; left: 50%; text-align: center; } } .nav__column { position: relative; margin: $basic_space 0; ul { @extend .flex; margin: 0 $space_5; li { @extend .flex__child; flex-grow: 1; margin: 0; text-align: center; a { display: block; } } } } .nav__page_meta { position: fixed; // display: table; // width: 3em; right: 0; bottom: $double_space; ul { margin: $basic_space 0; } li { margin-bottom: 0; } .a_button_meta { // display: table-cell; display: inline-block; &:active, &:focus { background-color: transparent; } &:hover { background-color: $basic_action_color; } } } .header__page { nav { @extend .nav__horizontal; a { &:active, &:focus, &:hover { background-color: rgba($basic_font_color, 0.2); color: $basic_font_color; } } } }