mekari-ui-toolkit
Version:
Mekari ui toolkit
158 lines (133 loc) • 3 kB
CSS
.tooltip {
font-size: 0.75rem;
line-height: 16px;
letter-spacing: 0.2px;
}
.fade {
transition: opacity 0.15s linear;
}
@media (prefers-reduced-motion: reduce) {
.fade {
transition: none;
}
}
.fade:not(.show) {
opacity: 0;
}
.collapse:not(.show) {
display: none;
}
.collapsing {
position: relative;
height: 0;
overflow: hidden;
transition: height 0.35s ease;
}
@media (prefers-reduced-motion: reduce) {
.collapsing {
transition: none;
}
}
.tooltip {
position: absolute;
z-index: 1070;
display: block;
margin: 0.5rem;
font-family: "Roboto", "Oxygen", "Ubuntu", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-style: normal;
font-weight: 400;
line-height: 1.4285;
text-align: left;
text-align: start;
text-decoration: none;
text-shadow: none;
text-transform: none;
letter-spacing: normal;
word-break: normal;
word-spacing: normal;
white-space: normal;
line-break: auto;
font-size: 0.75rem;
word-wrap: break-word;
opacity: 0;
}
.tooltip.show {
opacity: 0.9;
}
.tooltip .arrow {
position: absolute;
display: block;
width: 0;
height: 0.5rem;
}
.tooltip .arrow::before {
position: absolute;
content: "";
border-color: transparent;
border-style: solid;
}
.bs-tooltip-top, .bs-tooltip-auto[x-placement^="top"] {
padding: 0.5rem 0;
}
.bs-tooltip-top .arrow, .bs-tooltip-auto[x-placement^="top"] .arrow {
bottom: 0;
}
.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before {
top: 0;
border-width: 0.5rem 0 0;
border-top-color: #212121;
}
.bs-tooltip-right, .bs-tooltip-auto[x-placement^="right"] {
padding: 0 0.5rem;
}
.bs-tooltip-right .arrow, .bs-tooltip-auto[x-placement^="right"] .arrow {
left: 0;
width: 0.5rem;
height: 0;
}
.bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before {
right: 0;
border-width: 0 0.5rem 0 0;
border-right-color: #212121;
}
.bs-tooltip-bottom, .bs-tooltip-auto[x-placement^="bottom"] {
padding: 0.5rem 0;
}
.bs-tooltip-bottom .arrow, .bs-tooltip-auto[x-placement^="bottom"] .arrow {
top: 0;
}
.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
bottom: 0;
border-width: 0 0 0.5rem;
border-bottom-color: #212121;
}
.bs-tooltip-left, .bs-tooltip-auto[x-placement^="left"] {
padding: 0 0.5rem;
}
.bs-tooltip-left .arrow, .bs-tooltip-auto[x-placement^="left"] .arrow {
right: 0;
width: 0.5rem;
height: 0;
}
.bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before {
left: 0;
border-width: 0 0 0 0.5rem;
border-left-color: #212121;
}
.tooltip-inner {
max-width: 200px;
padding: 0.25rem 0.5rem;
color: #fff;
text-align: center;
background-color: #212121;
border-radius: 4px;
}
.tooltip {
margin: 0;
opacity: .9;
}
.tooltip-inner {
text-align: left;
box-shadow: 0 2px 4px 0 rgba(65, 64, 66, 0.2);
}
/*# sourceMappingURL=mekari-ui-tooltip.css.map */