mirror of
https://github.com/kidoman/embd
synced 2025-02-10 12:43:18 +01:00
99 lines
2.6 KiB
SCSS
99 lines
2.6 KiB
SCSS
// CSS Tooltips
|
|
|
|
@mixin tooltip($tt-min-width, $tt-bgcolor, $tt-position, $tt-align) {
|
|
position: relative;
|
|
|
|
&:after {
|
|
display: block;
|
|
background: $tt-bgcolor;
|
|
border: 1px solid $tt-bgcolor;
|
|
border-bottom: 0;
|
|
@include border-radius(3px);
|
|
padding: em(8) em(12);
|
|
width: auto;
|
|
min-width: $tt-min-width;
|
|
max-width: 500px;
|
|
position: absolute;
|
|
@if $tt-position == "bottom" {
|
|
@if $tt-align == "right" { right: 0 } @else { left: 0; }
|
|
top: 101%;
|
|
margin-top: 8px;
|
|
} @else if $tt-position == "top" {
|
|
@if $tt-align == "right" { right: 0 } @else { left: 0; }
|
|
bottom: 101%;
|
|
margin-bottom: 8px;
|
|
} @else if $tt-position == "left" {
|
|
right: 101%;
|
|
top: -35%;
|
|
margin-right: 8px;
|
|
} @else if $tt-position == "right" {
|
|
left: 101%;
|
|
top: -35%;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
@if $tt-align == "right" {
|
|
text-align: right;
|
|
} @else if $tt-align == "left" {
|
|
text-align: left;
|
|
}
|
|
|
|
color: #fff;
|
|
content: attr(data-tooltip);
|
|
line-height: 1.5;
|
|
font-size: $norm;
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
|
|
@include transition(opacity 0.1s ease);
|
|
@include opacity(0);
|
|
pointer-events: none;
|
|
|
|
@if $tt-pretty != "no" {
|
|
@include background-image(linear-gradient($tt-position, lighten($tt-bgcolor, 12.5%), $tt-bgcolor));
|
|
@include box-shadow(0 0 5px 0 rgba($tt-bgcolor,.25));
|
|
}
|
|
}
|
|
|
|
&:before {
|
|
content: " ";
|
|
width: 0;
|
|
height: 0;
|
|
position: absolute;
|
|
@if $tt-position == "bottom" {
|
|
top: 101%;
|
|
@if $tt-align == "right" { right: 8px } @else { left: 8px; }
|
|
border-bottom: 9px solid $tt-bgcolor !important;
|
|
border-left: 9px solid transparent;
|
|
border-right: 9px solid transparent;
|
|
} @else if $tt-position == "top" {
|
|
bottom: 101%;
|
|
@if $tt-align == "right" { right: 8px } @else { left: 8px; }
|
|
border-top: 9px solid $tt-bgcolor !important;
|
|
border-left: 9px solid transparent;
|
|
border-right: 9px solid transparent;
|
|
} @else if $tt-position == "left" {
|
|
top: 3px;
|
|
right: 101%;
|
|
border-left: 9px solid $tt-bgcolor !important;
|
|
border-top: 9px solid transparent;
|
|
border-bottom: 9px solid transparent;
|
|
} @else if $tt-position == "right" {
|
|
top: 3px;
|
|
left: 101%;
|
|
border-right: 9px solid $tt-bgcolor !important;
|
|
border-top: 9px solid transparent;
|
|
border-bottom: 9px solid transparent;
|
|
}
|
|
@include transition(opacity 0.1s ease);
|
|
@include opacity(0);
|
|
pointer-events: none;
|
|
}
|
|
|
|
&:hover:after,
|
|
&:hover:before {
|
|
@include transition(opacity 0.1s ease);
|
|
@include opacity(1);
|
|
}
|
|
}
|