67 lines
934 B
SCSS
67 lines
934 B
SCSS
.compass {
|
|
width:2.5em;
|
|
height:2.5em;
|
|
background-color: white;
|
|
opacity: 1;
|
|
border-radius:1.75em;
|
|
padding:0;
|
|
margin-top:0.5em;
|
|
display: block;
|
|
}
|
|
|
|
#north {
|
|
display: none;
|
|
fill:var(--bs-black);
|
|
}
|
|
|
|
#top-l {
|
|
fill:#d40000;
|
|
}
|
|
|
|
#top-r {
|
|
fill:#ff0000;
|
|
}
|
|
|
|
#bottom-l {
|
|
fill:#000000;
|
|
}
|
|
|
|
#bottom-r {
|
|
fill:#666666;
|
|
}
|
|
|
|
div.compass:hover #top-l {
|
|
fill:var(--bs-white);
|
|
}
|
|
|
|
div.compass:hover #top-r {
|
|
fill:var(--bs-gray-300);
|
|
}
|
|
|
|
div.compass:hover #bottom-l {
|
|
fill:var(--bs-gray-300);
|
|
}
|
|
|
|
div.compass:hover #bottom-r {
|
|
fill:var(--bs-white);
|
|
}
|
|
|
|
div.compass:hover #north {
|
|
fill:var(--bs-white);
|
|
}
|
|
|
|
.compass-n {
|
|
transition: opacity 1s ease-out 2s,height 1s ease-out 3s,margin-top 1s ease-out 3s;
|
|
opacity:0;
|
|
height:0;
|
|
margin-top:0;
|
|
}
|
|
|
|
.compass-n #bottom-l, .compass-n #bottom-r {
|
|
display: none;
|
|
}
|
|
|
|
.compass-n #north {
|
|
display: inline;
|
|
}
|