Need help with keeping the space between a button and popup in CSS. The opacity property is sometimes not working as expected. Any tips on how to solve this? Check out the code here
<div class="timer-container">
test
</div>
<div class="auto-update-container">
<span class="active" title="Refresh every 10 seconds">10s</span>
<span title="Refresh every 30 seconds">30s</span>
<span title="Refresh every minute">1m</span>
<span title="Refresh every 5 minutes">5m</span>
<span title="Refresh every 15 minutes">15m</span>
</div>
.map-toggles {
background-color: #fff;
border-radius: 2px;
bottom: 36px;
display: flex;
flex-direction: column-reverse;
left: 17px;
max-height: 42px;
overflow: hidden;
position: absolute;
transition: all 200ms linear;
z-index: 1;
&.open,
&:hover {
max-height: 600px;
overflow: visible;
box-shadow: 2px 5px 16px rgba(51, 51, 51, 0.2) !important;
border-radius: 7px;
}
.toggle {
align-items: center;
color: #465b67;
cursor: pointer;
display: flex;
flex: 0 0 auto;
font-size: 24px;
height: 42px;
justify-content: center;
position: relative;
width: 42px;
&.off {
background-color: #495054;
color: #869096;
background-color: transparent;
color: #c3d4de;
}
&.disabled {
box-shadow: none !important;
&::after {
content: '';
width: 3px;
height: 30px;
transform: rotate(45deg);
background-color: rgb(212, 87, 87);
position: absolute;
}
}
}
.toggle-autoupdate {
.auto-update-container {
align-items: center;
background-color: #fff;
display: flex;
flex-wrap: wrap;
height: auto;
justify-content: center;
left: 42px;
opacity: 0;
position: absolute;
pointer-events: none;
top: 0;
transition: all 200ms linear;
width: 70px;
background: #fff;
margin-left: 10px;
box-shadow: 2px 5px 16px rgba(51, 51, 51, 0.2);
border-radius: 7px;
>span {
align-items: center;
display: flex;
font-size: 1rem;
height: 42px;
justify-content: center;
width: 100%;
&:hover {
background-color: #456994;
color: #fff;
box-shadow: none !important;
}
&.active {
color: #fff;
background-color: #456994;
}
}
}
&:hover {
>.auto-update-container {
opacity: 1;
pointer-events: all;
}
}
&.disabled {
&:hover {
>.auto-update-container {
opacity: 0;
pointer-events: none;
}
}
}
}
}
.autoupdatediv {
margin-top: 100px;
bottom: auto;
top: 36px;
left: 20px;
padding: 1px;
}