github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 17:28:26 -04:00
Code Issues Projects Releases Packages Wiki Activity

Lint Sass file

Browse source
This commit is contained in:
Bree Hall 2022-11-05 21:23:19 -04:00
parent cfbd4dedc9
commit 20e6ead571
1 changed files with 111 additions and 115 deletions
Download patch file Download diff file Expand all files Collapse all files

226
x-pack/plugins/infra/public/components/eui/tooltip/tooltip.scss
View file

@ -1,127 +1,123 @@
@import './mixins.scss';
/*
* 1. Shift arrow 1px more than half its size to account for border radius
*/
.euiToolTip {
@include euiToolTipStyle;
@include euiToolTipAnimation('top');
.euiToolTip {
@include euiToolTipStyle;
@include euiToolTipAnimation('top');
position: absolute;
opacity: 0;
// Custom sizing
$arrowSize: $euiSizeM;
$arrowPlusSize: (($arrowSize/2) + 1px) * -1; /* 1 */
$arrowMinusSize: (($arrowSize/2) - 1px) * -1; /* 1 */
.euiToolTip__arrow {
content: '';
position: absolute;
opacity: 0;
// Custom sizing
$arrowSize: $euiSizeM;
$arrowPlusSize: (($arrowSize/2) + 1px) * -1; /* 1 */
$arrowMinusSize: (($arrowSize/2) - 1px) * -1; /* 1 */
transform-origin: center;
border-radius: 2px;
background-color: $euiTooltipBackgroundColor;
width: $arrowSize;
height: $arrowSize;
transform: translateY($arrowPlusSize) rotateZ(45deg); /* 1 */
}
// Positions the arrow and animates in from the same side.
&.euiToolTip--right {
animation-name: euiToolTipRight;
.euiToolTip__arrow {
content: '';
position: absolute;
transform-origin: center;
border-radius: 2px;
background-color: $euiTooltipBackgroundColor;
width: $arrowSize;
height: $arrowSize;
transform: translateY($arrowPlusSize) rotateZ(45deg); /* 1 */
}
// Positions the arrow and animates in from the same side.
&.euiToolTip--right {
animation-name: euiToolTipRight;
.euiToolTip__arrow {
transform: translateX($arrowMinusSize) rotateZ(45deg); /* 1 */
}
}
&.euiToolTip--bottom {
animation-name: euiToolTipBottom;
.euiToolTip__arrow {
transform: translateY($arrowMinusSize) rotateZ(45deg); /* 1 */
}
}
&.euiToolTip--left {
animation-name: euiToolTipLeft;
.euiToolTip__arrow {
transform: translateX($arrowPlusSize) rotateZ(45deg); /* 1 */
}
}
.euiToolTip__title {
@include euiToolTipTitle;
}
}
.euiToolTipAnchor {
display: inline-block;
// disabled elements don't fire mouse events which means leaving a disabled element
// wouldn't trigger the onMouseOut and hide the tooltip; disabling pointer events
// on disabled elements means any mouse events remain handled by parent elements
// https://jakearchibald.com/2017/events-and-disabled-form-fields/
*[disabled] {
pointer-events: none;
}
&.euiToolTipAnchor--displayBlock {
display: block;
}
}
// Keyframes to animate in the tooltip.
@keyframes euiToolTipTop {
0% {
opacity: 0;
transform: translateY(-$euiSize);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes euiToolTipBottom {
0% {
opacity: 0;
transform: translateY($euiSize);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes euiToolTipLeft {
0% {
opacity: 0;
transform: translateX(-$euiSize);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes euiToolTipRight {
0% {
opacity: 0;
transform: translateX($euiSize);
}
100% {
opacity: 1;
transform: translateY(0);
transform: translateX($arrowMinusSize) rotateZ(45deg); /* 1 */
}
}
&.euiToolTip--bottom {
animation-name: euiToolTipBottom;
.euiToolTip__arrow {
transform: translateY($arrowMinusSize) rotateZ(45deg); /* 1 */
}
}
&.euiToolTip--left {
animation-name: euiToolTipLeft;
.euiToolTip__arrow {
transform: translateX($arrowPlusSize) rotateZ(45deg); /* 1 */
}
}
.euiToolTip__title {
@include euiToolTipTitle;
}
}
.euiToolTipAnchor {
display: inline-block;
// disabled elements don't fire mouse events which means leaving a disabled element
// wouldn't trigger the onMouseOut and hide the tooltip; disabling pointer events
// on disabled elements means any mouse events remain handled by parent elements
// https://jakearchibald.com/2017/events-and-disabled-form-fields/
*[disabled] {
pointer-events: none;
}
&.euiToolTipAnchor--displayBlock {
display: block;
}
}
// Keyframes to animate in the tooltip.
@keyframes euiToolTipTop {
0% {
opacity: 0;
transform: translateY(-$euiSize);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes euiToolTipBottom {
0% {
opacity: 0;
transform: translateY($euiSize);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes euiToolTipLeft {
0% {
opacity: 0;
transform: translateX(-$euiSize);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes euiToolTipRight {
0% {
opacity: 0;
transform: translateX($euiSize);
}
100% {
opacity: 1;
transform: translateY(0);
}
}