@import "~bootstrap/scss/bootstrap.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:$black; } #top-l { fill:#d40000; } #top-r { fill:#ff0000; } #bottom-l { fill:#000000; } #bottom-r { fill:#666666; } div.compass:hover #top-l { fill:$white; } div.compass:hover #top-r { fill:$gray-300; } div.compass:hover #bottom-l { fill:$gray-300; } div.compass:hover #bottom-r { fill:$white; } div.compass:hover #north { fill:$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; }