@c8y/style
Version:
Styles for Cumulocity IoT applications
118 lines (111 loc) • 2.25 kB
text/less
/**
* Navs - Base navigation component (Bootstrap 3 legacy)
*
* Note: Uses @navlink-* variables for colors and padding, component tokens for styling.
*
* Intentionally hardcoded values:
* - Border widths (2px): Standard borders and outlines
* - Negative offsets (-2px): Fine-tuning
* - Percentages (100%): Layout
* - Opacity values: Visual states
*/
.nav {
margin-bottom: 0;
padding-left: 0; // Override default ul/ol
list-style: none;
> li {
position: relative;
display: block;
> a {
position: relative;
display: block;
padding: @navlink-padding;
color: @navlink-color-default;
&:hover,
&:focus {
background-color: @navlink-background-hover;
color: @navlink-color-hover;
text-decoration: none;
}
&:focus {
outline: 2px solid @component-color-focus;
outline-offset: -2px;
border-radius: @component-border-radius-focus;
}
}
&.disabled > a {
opacity: @component-disabled-opacity;
&:hover,
&:focus {
cursor: @cursor-disabled;
}
}
} // Open dropdowns
.open > a {
&,
&:hover,
&:focus {
background-color: @navlink-background-hover;
}
}
}
// Pills
.nav-pills {
> li {
float: left;
// Links rendered as pills
> a {
margin: 0;
padding: @nav-pills-padding;
border-radius: @nav-pills-border-radius;
}
+ li {
margin-left: 2px;
}
// Active state
&.active > a {
&,
&:hover,
&:focus {
background-color: @nav-pills-background-active;
color: @nav-pills-color-active;
}
}
&:focus {
outline: 2px solid @component-color-focus;
outline-offset: -2px;
border-radius: @component-border-radius-focus;
}
}
}
// Stacked pills
.nav-stacked {
> li {
float: none;
+ li {
margin-top: 2px;
margin-left: 0;
}
}
}
.nav-justified {
width: 100%;
> li {
float: none;
flex: 1 1 auto;
> a {
text-align: center;
}
}
> .dropdown .dropdown-menu {
top: auto;
left: auto;
}
@media (min-width: @screen-sm-min) {
> li {
> a {
margin-bottom: 0;
}
}
}
}