Skip to content
This repository has been archived by the owner on Mar 31, 2024. It is now read-only.

Commit

Permalink
Lint Sass file
Browse files Browse the repository at this point in the history
  • Loading branch information
breehall committed Nov 6, 2022
1 parent cfbd4de commit 20e6ead
Showing 1 changed file with 104 additions and 108 deletions.
212 changes: 104 additions & 108 deletions x-pack/plugins/infra/public/components/eui/tooltip/tooltip.scss
Original file line number Diff line number Diff line change
@@ -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;
transform: translateX($arrowMinusSize) rotateZ(45deg); /* 1 */
}
}

.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;

&.euiToolTip--bottom {
animation-name: euiToolTipBottom;

.euiToolTip__arrow {
transform: translateY($arrowMinusSize) rotateZ(45deg); /* 1 */
}
}

// Keyframes to animate in the tooltip.
@keyframes euiToolTipTop {
0% {
opacity: 0;
transform: translateY(-$euiSize);
}

100% {
opacity: 1;
transform: translateY(0);

&.euiToolTip--left {
animation-name: euiToolTipLeft;

.euiToolTip__arrow {
transform: translateX($arrowPlusSize) rotateZ(45deg); /* 1 */
}
}

@keyframes euiToolTipBottom {
0% {
opacity: 0;
transform: translateY($euiSize);
}

100% {
opacity: 1;
transform: translateY(0);
}

.euiToolTip__title {
@include euiToolTipTitle;
}
@keyframes euiToolTipLeft {
0% {
opacity: 0;
transform: translateX(-$euiSize);
}

100% {
opacity: 1;
transform: translateY(0);
}
}

.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;
}

@keyframes euiToolTipRight {
0% {
opacity: 0;
transform: translateX($euiSize);
}

100% {
opacity: 1;
transform: translateY(0);
}

&.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);
}
}

0 comments on commit 20e6ead

Please sign in to comment.