// Table of Contents // ================================================== // Navbar // Media Queries // scss-lint:disable NestingDepth // Navbar // ================================================== .navbar { background: color(white); border-collapse: separate; border-top: 1px solid color(haze); box-sizing: border-box; display: table; height: 54px; height: calc(54px + constant(safe-area-inset-bottom)); height: calc(54px + env(safe-area-inset-bottom)); line-height: 1; table-layout: fixed; width: 100%; > a { display: table-cell; float: none; font-size: text-size(xxs); font-weight: text-weight(semibold); padding-top: 9px; text-align: center; vertical-align: top; width: 1%; &.primary { color: text-color-on(primary); background: color(primary); &:hover, &.active, &:active, &:focus { background: darkish-color(primary); } } > i { font-size: 22px; display: block; margin-bottom: 3px; } } &.fixed { bottom: 0; left: 0; position: fixed; right: 0; z-index: 1040; } } // Media Queries // ================================================== @media only screen and (min-width: breakpoint-min-width(s)) { .navbar { display: none; } }