mirror of
https://github.com/Xevion/old.xevion.github.io.git
synced 2025-12-06 13:15:39 -06:00
65 lines
1.3 KiB
SCSS
65 lines
1.3 KiB
SCSS
#dot-nav {
|
|
position: fixed;
|
|
right: 34px;
|
|
z-index: 1;
|
|
@include center(y);
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
transition: visibility 0s, opacity 0.5s ease;
|
|
&.active {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
transition: visibility 0s, opacity 0.5s ease;
|
|
}
|
|
@include MQ(M) {
|
|
display: none;
|
|
}
|
|
.dot-container {
|
|
text-align: right;
|
|
}
|
|
a {
|
|
display: inline-block;
|
|
@include clearfix;
|
|
-webkit-backface-visibility: hidden;
|
|
span {
|
|
float: right;
|
|
display: inline-block;
|
|
transform: scale(0.6);
|
|
}
|
|
&:hover span,
|
|
&:focus span {
|
|
transform: scale(0.75);
|
|
}
|
|
&:hover .dot-label,
|
|
&:focus .dot-label {
|
|
opacity: 1;
|
|
}
|
|
&.is-selected .dot {
|
|
background-color: $blue;
|
|
}
|
|
}
|
|
.dot {
|
|
position: relative;
|
|
top: 7px;
|
|
height: 20px;
|
|
width: 20px;
|
|
border-radius: 50%;
|
|
background: rgba(255,255,255,0.25);
|
|
transition: transform 0.2s, background-color 0.5s;
|
|
transform-origin: 50% 50%;
|
|
}
|
|
.dot-label {
|
|
position: relative;
|
|
top: 3px;
|
|
padding: 0.4em .5em;
|
|
color: $white;
|
|
font-family: $Gotham, $sans-serif-stack;
|
|
font-size: 1em;
|
|
font-weight: 500;
|
|
text-transform: uppercase;
|
|
opacity: 0;
|
|
transition: transform 0.2s, opacity 0.2s;
|
|
transform-origin: 100% 50%;
|
|
}
|
|
}
|