2023-01-11 10:53:01 +00:00
|
|
|
.tool-btn {
|
|
|
|
margin: 0;
|
|
|
|
padding: 0.5rem;
|
|
|
|
|
|
|
|
width: 2.5rem;
|
|
|
|
height: 2.5rem;
|
|
|
|
|
2023-01-11 15:25:35 +00:00
|
|
|
position: relative;
|
|
|
|
|
2023-01-11 10:53:01 +00:00
|
|
|
border: none;
|
|
|
|
background-color: transparent;
|
|
|
|
color: $white100;
|
|
|
|
|
|
|
|
svg {
|
|
|
|
width: 1.25rem;
|
|
|
|
height: 1.25rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
|
|
color: $green;
|
2023-01-11 15:25:35 +00:00
|
|
|
|
|
|
|
.tool-tip {
|
|
|
|
opacity: 1;
|
|
|
|
top: -2.5rem;
|
|
|
|
//transition-delay: 0.5s;
|
|
|
|
}
|
2023-01-11 10:53:01 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
.tool-btn--evil {
|
|
|
|
color: $red;
|
|
|
|
|
2023-01-11 15:25:35 +00:00
|
|
|
span {
|
|
|
|
background-color: $red;
|
|
|
|
}
|
|
|
|
|
2023-01-11 10:53:01 +00:00
|
|
|
&:hover {
|
|
|
|
color: $white100;
|
|
|
|
}
|
2023-01-11 15:25:35 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.tool-tip {
|
|
|
|
margin: 0;
|
|
|
|
padding: 0.5rem 0.75rem;
|
|
|
|
|
|
|
|
width: auto;
|
|
|
|
|
|
|
|
display: block;
|
|
|
|
|
|
|
|
position: absolute;
|
|
|
|
top: -1.7rem;
|
|
|
|
left: 0;
|
|
|
|
transform: translateX(calc(-50% + 1.25rem ));
|
|
|
|
|
|
|
|
font-family: $font-body;
|
|
|
|
font-size: 1rem;
|
|
|
|
font-weight: 600;
|
|
|
|
|
|
|
|
background-color: $black300;
|
|
|
|
color: $white100;
|
|
|
|
opacity: 0;
|
|
|
|
border-radius: $rad;
|
|
|
|
|
|
|
|
transition: opacity 0.2s cubic-bezier(.76,0,.17,1), top 0.2s cubic-bezier(.76,0,.17,1);
|
|
|
|
|
|
|
|
pointer-events: none;
|
2023-01-11 10:53:01 +00:00
|
|
|
}
|