99070f2983
- Adds full set of svg icons as CSS/Sass variables to the source - Starts picking out some frame-grays, whilst commenting in possibles - Remove color prefixing The prefixes `ui-` and `brand-` for colors hav been removed. This makes colors slightly easier to type. In order to differentiate between brand colors and 'normal' colors, normal colors are named as 'true colors' i.e. blue, red, green etc etc whereas the brand colors used a more premium sounding name such as 'steel' for vault gray, 'magenta' for consul, 'cobalt' for vagrant etc etc.
177 lines
3.4 KiB
SCSS
177 lines
3.4 KiB
SCSS
%primary-nav ul ul {
|
|
@extend %header-drop-nav;
|
|
}
|
|
%primary-nav,
|
|
%secondary-nav {
|
|
@extend %header-nav;
|
|
}
|
|
%header-nav-toggle-button::before,
|
|
%header-nav-toggle-button::after,
|
|
%header-nav-toggle-button span::before {
|
|
@extend %with-dot;
|
|
}
|
|
%header-nav-toggle-button span {
|
|
visibility: hidden;
|
|
}
|
|
%header-drop-nav {
|
|
border: $decor-border-100;
|
|
box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.21);
|
|
}
|
|
%header-drop-nav li {
|
|
border-bottom: $decor-border-100;
|
|
}
|
|
%header-drop-nav li {
|
|
border-color: $gray-300;
|
|
}
|
|
%header-drop-nav {
|
|
border-color: $gray-300;
|
|
background-color: $white;
|
|
}
|
|
%header-drop-nav a {
|
|
color: $gray-900 !important;
|
|
}
|
|
%header-nav > ul > li > a:hover,
|
|
%header-nav > ul > li > a:focus,
|
|
%header-nav > ul > li > a:active,
|
|
%header-nav > ul > li.is-active > a {
|
|
color: $white;
|
|
}
|
|
%header-nav-toggle-button::before,
|
|
%header-nav-toggle-button::after,
|
|
%header-nav-toggle-button span::before {
|
|
right: 10px;
|
|
left: auto !important;
|
|
top: 23px !important;
|
|
}
|
|
%header-nav-toggle-button::before {
|
|
margin-top: -6px;
|
|
}
|
|
%header-nav-toggle-button::after {
|
|
margin-top: 6px;
|
|
}
|
|
%header-nav-toggle {
|
|
display: none;
|
|
}
|
|
%header-nav-toggle-button {
|
|
top: 0;
|
|
position: absolute;
|
|
}
|
|
@media #{$--lt-horizontal-nav} {
|
|
%header-nav-panel label span {
|
|
visibility: visible !important;
|
|
display: inline-block;
|
|
padding-right: 47px;
|
|
padding-top: 13px;
|
|
}
|
|
%header-nav-panel {
|
|
transition-timing-function: cubic-bezier(0.1, 0.1, 0.25, 0.9);
|
|
transition-duration: 0.2s;
|
|
transition-property: width right;
|
|
}
|
|
%header-nav-panel {
|
|
box-sizing: border-box;
|
|
padding: 15px 35px;
|
|
z-index: 10000;
|
|
text-align: right;
|
|
}
|
|
%header-nav-toggle-button {
|
|
position: absolute;
|
|
right: 0px;
|
|
width: 100px;
|
|
height: 40px;
|
|
z-index: 2;
|
|
cursor: pointer;
|
|
}
|
|
%header-nav-panel {
|
|
width: 0%;
|
|
overflow: auto;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0px;
|
|
z-index: 3;
|
|
padding: 0;
|
|
padding-top: 15px;
|
|
right: -100%;
|
|
}
|
|
%header-nav-toggle:checked ~ div {
|
|
width: 250px;
|
|
right: 0;
|
|
padding: 15px 35px;
|
|
}
|
|
%header-nav-toggle:checked + label {
|
|
background-color: rgba($black, 0.4);
|
|
width: 100vw;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
%primary-nav {
|
|
margin-top: 45px;
|
|
}
|
|
}
|
|
@media #{$--horizontal-nav} {
|
|
%header-nav-panel {
|
|
display: flex;
|
|
}
|
|
%header-nav-panel {
|
|
justify-content: space-between;
|
|
flex-grow: 1;
|
|
}
|
|
%header-nav-toggle-button {
|
|
display: none;
|
|
}
|
|
}
|
|
%header-drop-nav a:hover,
|
|
%header-drop-nav a:focus,
|
|
%header-drop-nav a:active,
|
|
%header-drop-nav a.selected {
|
|
background-color: $gray-050;
|
|
}
|
|
%header-nav a {
|
|
display: block;
|
|
padding: 3px 12px;
|
|
border-radius: $radius;
|
|
white-space: nowrap;
|
|
}
|
|
@media #{$--lt-horizontal-nav} {
|
|
%secondary-nav li:first-child {
|
|
display: none;
|
|
}
|
|
%header-drop-nav {
|
|
width: 180px;
|
|
}
|
|
%header-nav > ul > li > a {
|
|
padding-top: 15px;
|
|
padding-bottom: 15px;
|
|
display: block;
|
|
}
|
|
%primary-nav > ul > li.is-active > a {
|
|
font-weight: $typo-weight-bold;
|
|
}
|
|
}
|
|
@media #{$--horizontal-nav} {
|
|
%header-nav ul {
|
|
display: flex;
|
|
}
|
|
%header-drop-nav {
|
|
min-width: 266px;
|
|
}
|
|
}
|
|
%header-drop-nav .is-active a::after {
|
|
@extend %with-inverted-tick;
|
|
position: absolute;
|
|
top: 50%;
|
|
margin-top: -8px;
|
|
right: 10px;
|
|
}
|
|
%header-drop-nav {
|
|
display: block;
|
|
position: absolute;
|
|
z-index: 100;
|
|
}
|
|
%header-drop-nav a {
|
|
text-align: left;
|
|
position: relative;
|
|
padding: 12px 25px;
|
|
}
|