styles/sass/navs.scss
// NAVIGATIONS
// -----------
// BASE CLASS
// ----------
.nav {
margin-inline-start: 0;
list-style: none;
}
// Make links block level
.nav > li > a,
.nav > li > button {
display: block;
}
.nav > li > a:hover {
text-decoration: none;
background-color: $grayLighter;
}
// NAV LIST
// --------
.nav-list {
padding-inline-start: 15px;
padding-inline-end: 15px;
margin-block-end: 0;
}
.nav-list > li > button {
border: 0;
background: 0;
}
.nav-list > li > a,
.nav-list > li > button {
margin-inline-start: -15px;
margin-inline-end: -15px;
}
.nav-list > li > a, .nav-list > li > button {
padding: 3px 15px;
}
.nav-list > .active > a,
.nav-list > .active > button,
.nav-list > .active > a:hover {
color: $white;
background-color: $linkColor;
}
.nav-list [class^="icon-"] {
margin-inline-end: 2px;
}
// Dividers (basically an hr) within the dropdown
.nav-list .divider {
@include nav-divider();
}
// TABS
// ----
//Make the list-items overlay the bottom border
.nav-tabs {
height: $nav-height;
> li {
margin-block-end: -1px;
}
}
// Actual tabs (as links)
.nav-tabs > li > a,
.nav-tabs > li > button {
padding: 8px 0px;
margin: 0 10px;
line-height: 30px;
font-size: 14px;
height: $nav-height;
background: none;
color: $sd-text-light;
border:0;
border-block-end: 3px solid transparent;
&:hover {
border-bottom-color: var(--sd-colour-line--strong);
background: none;
text-decoration: none;
}
}
//Active state, and it's :hover to override normal :hover
.nav-tabs > .active > a,
.nav-tabs > .active > a:hover,
.nav-tabs > .active > button,
.nav-tabs > .active > button:hover {
background: none;
border-bottom-color: var(--sd-colour-interactive);
cursor: default;
color: $sd-text;
}
// PILLS
// -----
// Links rendered as pills
.nav-pills > li > a {
padding-block-start: 8px;
padding-block-end: 8px;
margin-block-start: 2px;
margin-block-end: 2px;
border-radius: 5px;
}
// Active state
.nav-pills > .active > a,
.nav-pills > .active > a:hover {
color: $white;
background-color: var(--sd-colour-interactive);
}
// STACKED NAV
// -----------
// Stacked tabs and pills
.nav-stacked > li {
float: none;
}
.nav-stacked > li > a {
margin-inline-end: 0; // no need for the gap between nav items
}
// Tabs
.nav-tabs.nav-stacked {
border-block-end: 0;
height: auto;
}
.nav-tabs.nav-stacked > li {
> a {
border: 1px solid #ddd;
@include border-radius(0);
margin: 0;
}
&.active a {
background: #fff;
}
}
.nav-tabs.nav-stacked > li:first-child > a {
@include border-radius(4px 4px 0 0);
}
.nav-tabs.nav-stacked > li:last-child > a {
@include border-radius(0 0 4px 4px);
}
.nav-tabs.nav-stacked > li > a:hover {
border-color: #ddd;
z-index: 2;
}
// Pills
.nav-pills.nav-stacked > li > a {
margin-block-end: 3px;
}
.nav-pills.nav-stacked > li:last-child > a {
margin-block-end: 1px; // decrease margin to match sizing of stacked tabs
}
// DROPDOWNS
// ---------
// Position the menu
.nav-tabs .dropdown__menu,
.nav-pills .dropdown__menu {
margin-block-start: 1px;
border-width: 1px;
}
.nav-pills .dropdown__menu {
@include border-radius(4px);
}
// Default dropdown links
// -------------------------
// Make carets use linkColor to start
.nav-tabs .dropdown__toggle .dropdown__caret,
.nav-pills .dropdown__toggle .dropdown__caret {
border-top-color: $linkColor;
border-bottom-color: $linkColor;
margin-block-start: 6px;
}
.nav-tabs .dropdown__toggle:hover .dropdown__caret,
.nav-pills .dropdown__toggle:hover .dropdown__caret {
border-top-color: $linkColorHover;
border-bottom-color: $linkColorHover;
}
// Active dropdown links
// -------------------------
.nav-tabs .active .dropdown__toggle .dropdown__caret,
.nav-pills .active .dropdown__toggle .dropdown__caret {
border-top-color: $grayDark;
border-bottom-color: $grayDark;
}
// Active:hover dropdown links
// -------------------------
.nav > .dropdown.active > a:hover {
color: $black;
cursor: pointer;
}
// Open dropdowns
// -------------------------
.nav-tabs .open .dropdown__toggle,
.nav-pills .open .dropdown__toggle,
.nav > .open.active > a:hover {
color: $white;
background-color: $grayLight;
border-color: $grayLight;
}
.nav .open .dropdown__caret,
.nav .open.active .dropdown__caret,
.nav .open a:hover .dropdown__caret {
border-top-color: $white;
border-bottom-color: $white;
@include opacity(100);
}
// Dropdowns in stacked tabs
.tabs-stacked .open > a:hover {
border-color: $grayLight;
}
// TABBABLE
// --------
// COMMON STYLES
// -------------
// Clear any floats
.tabbable {
@include clearfix();
}
.tab-content {
display: table; // prevent content from running below tabs
width: 100%;
}
// Remove border on bottom, left, right
.tabs-below .nav-tabs,
.tabs-right .nav-tabs,
.tabs-left .nav-tabs {
border-block-end: 0;
}
// Show/hide tabbable areas
.tab-content > .tab-pane,
.pill-content > .pill-pane {
display: none;
}
.tab-content > .active,
.pill-content > .active {
display: block;
}
// LEFT & RIGHT
// ------------
// Common styles
.tabs-left .nav-tabs > li{
float: none;
}
.tabs-left .nav-tabs > li > a{
min-width: 74px;
margin-inline-end: 0;
margin-block-end: 3px;
}
// Tabs on the left
.tabs-left .nav-tabs {
float: inline-start;
margin-inline-end: 19px;
border-inline-end: 1px solid #ddd;
}
.tabs-left .nav-tabs > li > a {
margin-inline-end: -1px;
@include border-radius(4px 0 0 4px);
}
.tabs-left .nav-tabs > li > a:hover {
border-color: $grayLighter #ddd $grayLighter $grayLighter;
}
.tabs-left .nav-tabs .active > a,
.tabs-left .nav-tabs .active > a:hover {
border-color: #ddd transparent #ddd #ddd;
*border-right-color: $white;
}
// SUBNAV
// ------------
.subnav {
align-items: center;
&--padded {
padding: 10px 20px;
}
}
.subnav--absolute {
position: absolute;
inset-block-start:48px;
inset-inline-start:0;
inset-inline-end:0;
z-index: 10;
}
.subnav--top {
inset-block-start: 48px;
}
.subnav__page-title,
.page-nav-title {
padding: 10px 20px;
color: $sd-text;
opacity: 0.8;
font-size: 18px;
line-height: 28px;
flex-grow: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: 400;
&--text-light {
font-weight: 300;
}
.sd-checkbox {
font-size: 1.4rem;
}
&:empty {
display: contents !important;
padding: 0 !important;
}
&.page-nav-title--flex {
display: flex;
align-items: center;
}
}
.subnav__desk-stage {
flex-grow: 1;
}
.subnav--white-background {
background-color: $white;
}
.subnav.level2 {
position: absolute;
background: #f5f5f5;
inset-block-start:0;
inset-inline-start: 0 !important;
height: $subnav-height;
z-index: 2;
@include box-shadow(none);
}
.monitoring{
.subnav {
.page-nav-title {
padding-inline-start: 20px;
}
}
}
.button-stack {
height:$subnav-height !important;
position: relative;
margin: 0 20px 0 0;
float: inline-start;
> .btn {
margin-inline-start: 20px;
margin-block-start: 10px;
}
&.right-stack {
float: inline-end;
margin: 0 0 0 5px;
.navbtn {
border-inline-start: 1px solid rgba(0,0,0,0.1) !important;
border-inline-end: 0 !important;
.dropdown__toggle {
width: 100%;
}
}
> .btn {
margin-inline-end: 12px;
margin-inline-start: 0;
}
}
.dropdown {
[class^="filetype-icon-"], [class*="filetype-icon-"] {
vertical-align: middle;
}
}
}
.navbtn--white {
[class^="icon-"], [class*=" icon-"] {
color: white!important;
}
}
.subnav__stretch-bar {
display: flex;
flex-grow: 1;
flex-shrink: 1;
margin: 0 16px;
}
.subnav__button-stack {
position: relative;
max-width: 100%;
&--square-buttons {
height:48px;
margin: 0 0 0 16px;
display: flex;
flex-wrap: nowrap;
flex-grow: 0;
flex-shrink: 1;
max-width: 100%;
}
&--custom-buttons {
margin: 0 auto;
padding: 10px 12px;
border: 1px solid rgba(0,0,0,0.1);
border-width: 0 1px;
box-sizing: border-box;
display: flex;
max-width: 100%;
.btn {
flex-grow: 0;
margin:0 4px;
}
.btn__text--short {
display: none;
}
.btn__text {
display: inline;
}
}
}
.subnav__button-stack--custom-buttons {
.btn__text--short {
display: none;
}
.btn__text {
display: inline;
}
}
.compact {
.subnav__button-stack--custom-buttons {
.btn__text--short {
display: inline;
}
.btn__text {
display: none;
}
}
}
.subnav__button-stack--default {
display: flex;
flex-grow: 1;
justify-content: flex-end;
padding: 10px 0;
.btn {
flex-grow: 0;
margin:0 4px;
}
.btn__text--short {
display: none;
}
.btn__text {
display: inline;
}
}
.compact .subnav__button-stack--default {
.btn__text--short {
display: inline;
}
.btn__text {
display: none;
}
}
.shortcut {
font-style: italic;
opacity: 0.5;
}