146 lines
3.1 KiB
SCSS
146 lines
3.1 KiB
SCSS
.topnav {
|
|
display: flex;
|
|
padding: .75rem .75rem .65rem;
|
|
justify-content: space-between;
|
|
|
|
.influx-home {
|
|
font-family: 'icomoon';
|
|
font-size: 1.9rem;
|
|
color: $topnav-link;
|
|
text-decoration: none;
|
|
vertical-align: middle;
|
|
&:hover {
|
|
color: $topnav-link-hover;
|
|
}
|
|
.icon-influx-logotype {
|
|
margin-left: -.8rem;
|
|
}
|
|
}
|
|
|
|
.divider {
|
|
height: 100%; border-left: 1px solid rgba($topnav-link, .5);
|
|
margin-right: 1rem;
|
|
}
|
|
|
|
.docs-home {
|
|
display: inline-block;
|
|
vertical-align: text-top;
|
|
font-family: $klavika;
|
|
font-style: italic;
|
|
font-weight: 300;
|
|
font-size: 1.2rem;
|
|
color: $topnav-link;
|
|
text-decoration: none;
|
|
&:hover {
|
|
color: $topnav-link-hover;
|
|
}
|
|
}
|
|
|
|
.version-selector {
|
|
display: inline-block;
|
|
position: absolute;
|
|
z-index: 100;
|
|
right: 3.5rem;
|
|
color: $g20-white;
|
|
height: 2rem;
|
|
background: $version-selector-top;
|
|
font-weight: 700;
|
|
border-radius: $border-radius;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
transition: right .2s;
|
|
|
|
.selected {
|
|
padding: 0 1.5rem 0 .75rem;
|
|
line-height: 0;
|
|
}
|
|
|
|
&:after {
|
|
content: '';
|
|
position: absolute;
|
|
top: .75rem;
|
|
right: .5rem;
|
|
width: 0;
|
|
height: 0;
|
|
border-style: solid;
|
|
border-width: 7px 5px 0 5px;
|
|
border-color: $g20-white transparent transparent transparent;
|
|
transition: all .4s;
|
|
}
|
|
|
|
&.open {
|
|
height: auto;
|
|
background: linear-gradient($version-selector-top, $version-selector-bottom);
|
|
&:after {
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|
|
|
|
ul.version-list {
|
|
padding: 0;
|
|
margin: 0;
|
|
list-style: none;
|
|
}
|
|
a {
|
|
display: block;
|
|
text-decoration: none;
|
|
color: $g20-white;
|
|
padding: .5rem 1.5rem .5rem .75rem;
|
|
background: rgba($g20-white, 0);
|
|
&:hover {
|
|
background: rgba($g20-white, .2)
|
|
}
|
|
&:last-child {
|
|
border-radius: 0 0 $border-radius $border-radius;
|
|
position: relative;
|
|
}
|
|
&.legacy {
|
|
position: relative;
|
|
&:after {
|
|
content: "\e911";
|
|
font-family: "icomoon";
|
|
position: absolute;
|
|
opacity: .4;
|
|
margin-left: .25rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.theme-switcher, #search-btn {
|
|
display: inline-block;
|
|
padding: 0;
|
|
font-size: 1.8rem;
|
|
color: rgba($topnav-link, .5);
|
|
background: none;
|
|
height: 30px;
|
|
width: 30px;
|
|
margin-top: 2px;
|
|
border: none;
|
|
transition: color .2s, opacity .2s;
|
|
appearance: none;
|
|
overflow: visible;
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
&:hover {
|
|
color: rgba($topnav-link, 1);
|
|
cursor: pointer;
|
|
}
|
|
&#theme-switch-dark { display: $theme-switch-dark; }
|
|
&#theme-switch-light { display: $theme-switch-light; }
|
|
}
|
|
|
|
#search-btn {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
///////////////////////////////// MEDIA QUERIES ////////////////////////////////
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
|
|
@include media(small) {
|
|
.icon-influx-logotype { display: none; }
|
|
}
|