mirror of
https://github.com/Hopiu/vue-material.git
synced 2026-05-16 19:21:07 +00:00
79 lines
1.4 KiB
SCSS
79 lines
1.4 KiB
SCSS
@import '../../core/stylesheets/variables.scss';
|
|
|
|
$tooltip-height: 20px;
|
|
|
|
.md-tooltip {
|
|
height: $tooltip-height;
|
|
padding: 0 8px;
|
|
position: fixed;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
background-color: rgba(#616161, .87);
|
|
transform-origin: center top;
|
|
color: #fff;
|
|
font-family: $font-roboto;
|
|
font-size: 10px;
|
|
line-height: $tooltip-height;
|
|
text-transform: none;
|
|
white-space: nowrap;
|
|
|
|
&.md-tooltip-created {
|
|
display: none !important;
|
|
}
|
|
|
|
&.md-active-transition {
|
|
opacity: 1;
|
|
transition: $swift-ease-out;
|
|
border-radius: 2px;
|
|
|
|
&.md-active-leave {
|
|
transition: $swift-ease-in;
|
|
transition-delay: 0s !important;
|
|
}
|
|
}
|
|
|
|
&.md-active-enter,
|
|
&.md-active-leave {
|
|
opacity: 0;
|
|
}
|
|
|
|
&.md-tooltip-top {
|
|
margin-top: -14px;
|
|
transform: translate(-50%, 0);
|
|
|
|
&.md-active-enter,
|
|
&.md-active-leave {
|
|
transform: translate(-50%, 8px);
|
|
}
|
|
}
|
|
|
|
&.md-tooltip-right {
|
|
margin-left: 14px;
|
|
transform: translate(0, 50%);
|
|
|
|
&.md-active-enter,
|
|
&.md-active-leave {
|
|
transform: translate(-8px, 50%);
|
|
}
|
|
}
|
|
|
|
&.md-tooltip-bottom {
|
|
margin-top: 14px;
|
|
transform: translate(-50%, 0);
|
|
|
|
&.md-active-enter,
|
|
&.md-active-leave {
|
|
transform: translate(-50%, -8px);
|
|
}
|
|
}
|
|
|
|
&.md-tooltip-left {
|
|
margin-left: -14px;
|
|
transform: translate(0, 50%);
|
|
|
|
&.md-active-enter,
|
|
&.md-active-leave {
|
|
transform: translate(8px, 50%);
|
|
}
|
|
}
|
|
}
|