Sha256: 55554f58940c579786e21ad9e6eb255232edc6fda4f8bd77a7de4ac96cc5c27e
Contents?: true
Size: 1.63 KB
Versions: 31
Compression:
Stored size: 1.63 KB
Contents
// NAVIGATION
// -----------------------------------------------------------------------------
.nav {
display: flex;
}
.nav__list {
list-style-type: none;
margin: 0;
padding: 0;
}
.nav__list--primary {
flex-grow: 1;
}
.nav__list__item {
display: inline-block;
cursor: pointer;
color: $blue;
padding-bottom: spacing(loose);
+ .nav__list__item {
margin-left: spacing(loose);
}
}
.nav__list__sub__item {
list-style: none;
white-space: nowrap;
+ .nav__list__sub__item {
margin-top: spacing(tight);
}
}
$tool-tip-size: 12px;
$tool-tip-offset: $tool-tip-size / 2 + 1;
$sub-nav-offset: -10px;
.nav__sub__list {
position: absolute;
top: calc(100% - #{spacing(tight)});
z-index: 10;
background-color: white;
padding: spacing(tight);
opacity: 0;
pointer-events: none;
transform: translateY($sub-nav-offset);
border: 1px solid $grey-light;
border-radius: 3px;
transition:
opacity 0.2s ease-in-out,
transform 0.2s ease-in-out;
&::after {
content: '';
display: block;
position: absolute;
top: -1 * $tool-tip-offset;
background-color: white;
border: 1px solid $grey-light;
border-right-color: transparent;
border-bottom-color: transparent;
height: $tool-tip-size;
width: $tool-tip-size;
transform: rotate(45deg);
}
}
.nav__list__item--has-children {
position: relative;
display: inline-flex;
&::after {
display: inline-block;
content: '';
background-image: asset-data-url('caret-down.svg');
width: 20px;
height: 20px;
}
&:hover .nav__sub__list {
opacity: 1;
pointer-events: initial;
transform: translateY(0);
}
}
Version data entries
31 entries across 31 versions & 1 rubygems