88befcc1b9
* Fixes * Fix top result * Added icons to React component * Trying to get icons to work * Icons * add icon-custom.jsx with buildIcon function * Icon fixes * Fixed subscription screen
122 lines
2 KiB
SCSS
122 lines
2 KiB
SCSS
.tooltip {
|
|
display: inline-block;
|
|
position: relative;
|
|
|
|
&:not(:hover) {
|
|
.tooltip__body {
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
.tooltip__body {
|
|
visibility: visible;
|
|
}
|
|
}
|
|
|
|
.tooltip__body {
|
|
background-color: $lbry-gray-5;
|
|
border-radius: 8px;
|
|
color: $lbry-white;
|
|
font-size: 1rem;
|
|
font-weight: 500;
|
|
padding: var(--spacing-vertical-small);
|
|
position: absolute;
|
|
text-align: center;
|
|
white-space: pre-wrap;
|
|
width: 200px;
|
|
z-index: 1;
|
|
|
|
&::after {
|
|
width: 0;
|
|
height: 0;
|
|
|
|
border-style: solid;
|
|
border-width: 5px;
|
|
content: ' ';
|
|
position: absolute;
|
|
}
|
|
|
|
&--short {
|
|
width: 130px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tooltip--bottom .tooltip__body {
|
|
top: 90%;
|
|
left: 50%;
|
|
margin-left: -100px;
|
|
|
|
&.tooltip__body--short {
|
|
margin-left: -65px;
|
|
}
|
|
|
|
&::after {
|
|
bottom: 100%;
|
|
left: 50%;
|
|
|
|
border-color: transparent transparent $lbry-gray-5 transparent;
|
|
margin-left: -5px;
|
|
}
|
|
}
|
|
|
|
.tooltip--label {
|
|
// When there is a label for the tooltip and not just using a button or icon
|
|
font-size: 14px;
|
|
padding-left: $spacing-vertical * 1/3;
|
|
|
|
.tooltip__body {
|
|
margin-top: 5px;
|
|
}
|
|
}
|
|
|
|
.tooltip--on-component {
|
|
.tooltip__body {
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
|
|
.tooltip--left .tooltip__body {
|
|
top: -5px;
|
|
right: 105%;
|
|
|
|
&::after {
|
|
top: 17px;
|
|
left: 100%;
|
|
|
|
border-color: transparent transparent transparent $lbry-gray-5;
|
|
margin-top: -5px;
|
|
}
|
|
}
|
|
|
|
.tooltip--right .tooltip__body {
|
|
margin-top: -30px;
|
|
margin-left: 110%;
|
|
|
|
&::after {
|
|
top: 17px;
|
|
right: 100%; // To the left of the tooltip
|
|
|
|
border-color: transparent $lbry-gray-5 transparent transparent;
|
|
margin-top: -5px;
|
|
}
|
|
}
|
|
|
|
.tooltip--top .tooltip__body {
|
|
bottom: 100%;
|
|
left: 50%;
|
|
margin-left: -100px;
|
|
|
|
&.tooltip__body--short {
|
|
margin-left: -65px;
|
|
}
|
|
|
|
&::after {
|
|
top: 100%;
|
|
left: 50%;
|
|
|
|
border-color: $lbry-gray-5 transparent transparent transparent;
|
|
margin-left: -5px;
|
|
}
|
|
}
|