From a910196b80fbccbc33635e70594e17257e00e8b3 Mon Sep 17 00:00:00 2001 From: Wikiki Date: Tue, 13 Feb 2018 21:02:46 +0100 Subject: [PATCH] fix(loading): Keep loading style --- dist/bulma-tooltip.min.css | 2 +- dist/bulma-tooltip.sass | 42 +++++++++++++++++++------------------- src/extension.sass | 42 +++++++++++++++++++------------------- 3 files changed, 43 insertions(+), 43 deletions(-) diff --git a/dist/bulma-tooltip.min.css b/dist/bulma-tooltip.min.css index 9058583..f238f2f 100644 --- a/dist/bulma-tooltip.min.css +++ b/dist/bulma-tooltip.min.css @@ -1 +1 @@ -@-webkit-keyframes spinAround{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes spinAround{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.tooltip{position:relative}.tooltip.is-tooltip-active::after,.tooltip.is-tooltip-active::before,.tooltip:hover::after,.tooltip:hover::before{z-index:99999;position:absolute;display:inline-block;pointer-events:none}.tooltip.is-tooltip-active:before,.tooltip:hover:before{content:"";border-style:solid;border-width:.5rem}.tooltip.is-tooltip-active::after,.tooltip:hover::after{opacity:0;content:attr(data-tooltip);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:.75rem;padding:.4rem .8rem;-webkit-transform:translate(-50%,1rem);transform:translate(-50%,1rem);background:rgba(74,74,74,.9);border-radius:3px;color:#fff;max-width:24rem}.tooltip.is-tooltip-active::before,.tooltip:focus::before,.tooltip:hover::before{top:0;bottom:auto;left:50%;opacity:1;margin-left:-.5rem;margin-top:-.5rem;border-color:rgba(74,74,74,.9) transparent transparent transparent}.tooltip.is-tooltip-active::after,.tooltip:focus::after,.tooltip:hover::after{top:auto;bottom:100%;left:50%;opacity:1;-webkit-transform:translate(-50%,-.5rem);transform:translate(-50%,-.5rem)}.tooltip.is-tooltip-right::after{top:auto;bottom:50%;left:100%;right:auto;-webkit-transform:translate(-1rem,50%);transform:translate(-1rem,50%)}.tooltip.is-tooltip-right.is-tooltip-active::before,.tooltip.is-tooltip-right:focus::before,.tooltip.is-tooltip-right:hover::before{top:50%;left:100%;right:auto;border-color:transparent rgba(74,74,74,.9) transparent transparent}.tooltip.is-tooltip-right.is-tooltip-active::after,.tooltip.is-tooltip-right:focus::after,.tooltip.is-tooltip-right:hover::after{-webkit-transform:translate(.5rem,50%);transform:translate(.5rem,50%)}.tooltip.is-tooltip-bottom::after{top:100%;bottom:auto;left:50%;right:auto;-webkit-transform:translate(-50%,-1rem);transform:translate(-50%,-1rem)}.tooltip.is-tooltip-bottom.is-tooltip-active::before,.tooltip.is-tooltip-bottom:focus::before,.tooltip.is-tooltip-bottom:hover::before{top:100%;bottom:auto;left:50%;right:auto;border-color:transparent transparent rgba(74,74,74,.9) transparent}.tooltip.is-tooltip-bottom.is-tooltip-active::after,.tooltip.is-tooltip-bottom:focus::after,.tooltip.is-tooltip-bottom:hover::after{-webkit-transform:translate(-50%,.5rem);transform:translate(-50%,.5rem)}.tooltip.is-tooltip-left::after{top:auto;bottom:50%;left:auto;right:100%;-webkit-transform:translate(1rem,50%);transform:translate(1rem,50%)}.tooltip.is-tooltip-left.is-tooltip-active::before,.tooltip.is-tooltip-left:focus::before,.tooltip.is-tooltip-left:hover::before{top:50%;left:auto;right:calc(100% - .5rem);border-color:transparent transparent transparent rgba(74,74,74,.9)}.tooltip.is-tooltip-left.is-tooltip-active::after,.tooltip.is-tooltip-left:focus::after,.tooltip.is-tooltip-left:hover::after{-webkit-transform:translate(-.5rem,50%);transform:translate(-.5rem,50%)}.tooltip.is-tooltip-multiline::after{min-width:24rem;text-overflow:clip;white-space:normal;word-break:break-word}.tooltip.is-tooltip-white::before{border-color:rgba(255,255,255,.9) transparent transparent transparent}.tooltip.is-tooltip-white.is-tooltip-right::before{border-color:transparent rgba(255,255,255,.9) transparent transparent}.tooltip.is-tooltip-white.is-tooltip-bottom::before{border-color:transparent transparent rgba(255,255,255,.9) transparent}.tooltip.is-tooltip-white.is-tooltip-left::before{border-color:transparent transparent transparent rgba(255,255,255,.9)}.tooltip.is-tooltip-white::after{background:rgba(255,255,255,.9);color:#0a0a0a}.tooltip.is-tooltip-black::before{border-color:rgba(10,10,10,.9) transparent transparent transparent}.tooltip.is-tooltip-black.is-tooltip-right::before{border-color:transparent rgba(10,10,10,.9) transparent transparent}.tooltip.is-tooltip-black.is-tooltip-bottom::before{border-color:transparent transparent rgba(10,10,10,.9) transparent}.tooltip.is-tooltip-black.is-tooltip-left::before{border-color:transparent transparent transparent rgba(10,10,10,.9)}.tooltip.is-tooltip-black::after{background:rgba(10,10,10,.9);color:#fff}.tooltip.is-tooltip-light::before{border-color:rgba(245,245,245,.9) transparent transparent transparent}.tooltip.is-tooltip-light.is-tooltip-right::before{border-color:transparent rgba(245,245,245,.9) transparent transparent}.tooltip.is-tooltip-light.is-tooltip-bottom::before{border-color:transparent transparent rgba(245,245,245,.9) transparent}.tooltip.is-tooltip-light.is-tooltip-left::before{border-color:transparent transparent transparent rgba(245,245,245,.9)}.tooltip.is-tooltip-light::after{background:rgba(245,245,245,.9);color:#363636}.tooltip.is-tooltip-dark::before{border-color:rgba(54,54,54,.9) transparent transparent transparent}.tooltip.is-tooltip-dark.is-tooltip-right::before{border-color:transparent rgba(54,54,54,.9) transparent transparent}.tooltip.is-tooltip-dark.is-tooltip-bottom::before{border-color:transparent transparent rgba(54,54,54,.9) transparent}.tooltip.is-tooltip-dark.is-tooltip-left::before{border-color:transparent transparent transparent rgba(54,54,54,.9)}.tooltip.is-tooltip-dark::after{background:rgba(54,54,54,.9);color:#f5f5f5}.tooltip.is-tooltip-primary::before{border-color:rgba(0,209,178,.9) transparent transparent transparent}.tooltip.is-tooltip-primary.is-tooltip-right::before{border-color:transparent rgba(0,209,178,.9) transparent transparent}.tooltip.is-tooltip-primary.is-tooltip-bottom::before{border-color:transparent transparent rgba(0,209,178,.9) transparent}.tooltip.is-tooltip-primary.is-tooltip-left::before{border-color:transparent transparent transparent rgba(0,209,178,.9)}.tooltip.is-tooltip-primary::after{background:rgba(0,209,178,.9);color:#fff}.tooltip.is-tooltip-link::before{border-color:rgba(50,115,220,.9) transparent transparent transparent}.tooltip.is-tooltip-link.is-tooltip-right::before{border-color:transparent rgba(50,115,220,.9) transparent transparent}.tooltip.is-tooltip-link.is-tooltip-bottom::before{border-color:transparent transparent rgba(50,115,220,.9) transparent}.tooltip.is-tooltip-link.is-tooltip-left::before{border-color:transparent transparent transparent rgba(50,115,220,.9)}.tooltip.is-tooltip-link::after{background:rgba(50,115,220,.9);color:#fff}.tooltip.is-tooltip-info::before{border-color:rgba(32,156,238,.9) transparent transparent transparent}.tooltip.is-tooltip-info.is-tooltip-right::before{border-color:transparent rgba(32,156,238,.9) transparent transparent}.tooltip.is-tooltip-info.is-tooltip-bottom::before{border-color:transparent transparent rgba(32,156,238,.9) transparent}.tooltip.is-tooltip-info.is-tooltip-left::before{border-color:transparent transparent transparent rgba(32,156,238,.9)}.tooltip.is-tooltip-info::after{background:rgba(32,156,238,.9);color:#fff}.tooltip.is-tooltip-success::before{border-color:rgba(35,209,96,.9) transparent transparent transparent}.tooltip.is-tooltip-success.is-tooltip-right::before{border-color:transparent rgba(35,209,96,.9) transparent transparent}.tooltip.is-tooltip-success.is-tooltip-bottom::before{border-color:transparent transparent rgba(35,209,96,.9) transparent}.tooltip.is-tooltip-success.is-tooltip-left::before{border-color:transparent transparent transparent rgba(35,209,96,.9)}.tooltip.is-tooltip-success::after{background:rgba(35,209,96,.9);color:#fff}.tooltip.is-tooltip-warning::before{border-color:rgba(255,221,87,.9) transparent transparent transparent}.tooltip.is-tooltip-warning.is-tooltip-right::before{border-color:transparent rgba(255,221,87,.9) transparent transparent}.tooltip.is-tooltip-warning.is-tooltip-bottom::before{border-color:transparent transparent rgba(255,221,87,.9) transparent}.tooltip.is-tooltip-warning.is-tooltip-left::before{border-color:transparent transparent transparent rgba(255,221,87,.9)}.tooltip.is-tooltip-warning::after{background:rgba(255,221,87,.9);color:rgba(0,0,0,.7)}.tooltip.is-tooltip-danger::before{border-color:rgba(255,56,96,.9) transparent transparent transparent}.tooltip.is-tooltip-danger.is-tooltip-right::before{border-color:transparent rgba(255,56,96,.9) transparent transparent}.tooltip.is-tooltip-danger.is-tooltip-bottom::before{border-color:transparent transparent rgba(255,56,96,.9) transparent}.tooltip.is-tooltip-danger.is-tooltip-left::before{border-color:transparent transparent transparent rgba(255,56,96,.9)}.tooltip.is-tooltip-danger::after{background:rgba(255,56,96,.9);color:#fff} \ No newline at end of file +@-webkit-keyframes spinAround{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes spinAround{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.tooltip{position:relative}.tooltip.is-tooltip-active::after,.tooltip.is-tooltip-active::before,.tooltip:hover::after,.tooltip:hover::before{z-index:99999;position:absolute;display:inline-block;pointer-events:none}.tooltip.is-tooltip-active::after,.tooltip:hover::after{content:"";border-style:solid;border-width:.5rem}.tooltip.is-tooltip-active::before,.tooltip:hover::before{opacity:0;content:attr(data-tooltip);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:.75rem;padding:.4rem .8rem;-webkit-transform:translate(-50%,1rem);transform:translate(-50%,1rem);background:rgba(74,74,74,.9);border-radius:3px;color:#fff;max-width:24rem}.tooltip.is-tooltip-active::after,.tooltip:focus::after,.tooltip:hover::after{top:0;bottom:auto;left:50%;opacity:1;margin-left:-.5rem;margin-top:-.5rem;border-color:rgba(74,74,74,.9) transparent transparent transparent}.tooltip.is-tooltip-active::before,.tooltip:focus::before,.tooltip:hover::before{top:auto;bottom:100%;left:50%;opacity:1;-webkit-transform:translate(-50%,-.5rem);transform:translate(-50%,-.5rem)}.tooltip.is-tooltip-right::before{top:auto;bottom:50%;left:100%;right:auto;-webkit-transform:translate(-1rem,50%);transform:translate(-1rem,50%)}.tooltip.is-tooltip-right.is-tooltip-active::after,.tooltip.is-tooltip-right:focus::after,.tooltip.is-tooltip-right:hover::after{top:50%;left:100%;right:auto;border-color:transparent rgba(74,74,74,.9) transparent transparent}.tooltip.is-tooltip-right.is-tooltip-active::before,.tooltip.is-tooltip-right:focus::before,.tooltip.is-tooltip-right:hover::before{-webkit-transform:translate(.5rem,50%);transform:translate(.5rem,50%)}.tooltip.is-tooltip-bottom::before{top:100%;bottom:auto;left:50%;right:auto;-webkit-transform:translate(-50%,-1rem);transform:translate(-50%,-1rem)}.tooltip.is-tooltip-bottom.is-tooltip-active::after,.tooltip.is-tooltip-bottom:focus::after,.tooltip.is-tooltip-bottom:hover::after{top:100%;bottom:auto;left:50%;right:auto;border-color:transparent transparent rgba(74,74,74,.9) transparent}.tooltip.is-tooltip-bottom.is-tooltip-active::before,.tooltip.is-tooltip-bottom:focus::before,.tooltip.is-tooltip-bottom:hover::before{-webkit-transform:translate(-50%,.5rem);transform:translate(-50%,.5rem)}.tooltip.is-tooltip-left::before{top:auto;bottom:50%;left:auto;right:100%;-webkit-transform:translate(1rem,50%);transform:translate(1rem,50%)}.tooltip.is-tooltip-left.is-tooltip-active::after,.tooltip.is-tooltip-left:focus::after,.tooltip.is-tooltip-left:hover::after{top:50%;left:auto;right:calc(100% - .5rem);border-color:transparent transparent transparent rgba(74,74,74,.9)}.tooltip.is-tooltip-left.is-tooltip-active::before,.tooltip.is-tooltip-left:focus::before,.tooltip.is-tooltip-left:hover::before{-webkit-transform:translate(-.5rem,50%);transform:translate(-.5rem,50%)}.tooltip.is-tooltip-multiline::before{min-width:24rem;text-overflow:clip;white-space:normal;word-break:break-word}.tooltip.is-tooltip-white::after{border-color:rgba(255,255,255,.9) transparent transparent transparent}.tooltip.is-tooltip-white.is-tooltip-right::after{border-color:transparent rgba(255,255,255,.9) transparent transparent}.tooltip.is-tooltip-white.is-tooltip-bottom::after{border-color:transparent transparent rgba(255,255,255,.9) transparent}.tooltip.is-tooltip-white.is-tooltip-left::after{border-color:transparent transparent transparent rgba(255,255,255,.9)}.tooltip.is-tooltip-white::before{background:rgba(255,255,255,.9);color:#0a0a0a}.tooltip.is-tooltip-black::after{border-color:rgba(10,10,10,.9) transparent transparent transparent}.tooltip.is-tooltip-black.is-tooltip-right::after{border-color:transparent rgba(10,10,10,.9) transparent transparent}.tooltip.is-tooltip-black.is-tooltip-bottom::after{border-color:transparent transparent rgba(10,10,10,.9) transparent}.tooltip.is-tooltip-black.is-tooltip-left::after{border-color:transparent transparent transparent rgba(10,10,10,.9)}.tooltip.is-tooltip-black::before{background:rgba(10,10,10,.9);color:#fff}.tooltip.is-tooltip-light::after{border-color:rgba(245,245,245,.9) transparent transparent transparent}.tooltip.is-tooltip-light.is-tooltip-right::after{border-color:transparent rgba(245,245,245,.9) transparent transparent}.tooltip.is-tooltip-light.is-tooltip-bottom::after{border-color:transparent transparent rgba(245,245,245,.9) transparent}.tooltip.is-tooltip-light.is-tooltip-left::after{border-color:transparent transparent transparent rgba(245,245,245,.9)}.tooltip.is-tooltip-light::before{background:rgba(245,245,245,.9);color:#363636}.tooltip.is-tooltip-dark::after{border-color:rgba(54,54,54,.9) transparent transparent transparent}.tooltip.is-tooltip-dark.is-tooltip-right::after{border-color:transparent rgba(54,54,54,.9) transparent transparent}.tooltip.is-tooltip-dark.is-tooltip-bottom::after{border-color:transparent transparent rgba(54,54,54,.9) transparent}.tooltip.is-tooltip-dark.is-tooltip-left::after{border-color:transparent transparent transparent rgba(54,54,54,.9)}.tooltip.is-tooltip-dark::before{background:rgba(54,54,54,.9);color:#f5f5f5}.tooltip.is-tooltip-primary::after{border-color:rgba(0,209,178,.9) transparent transparent transparent}.tooltip.is-tooltip-primary.is-tooltip-right::after{border-color:transparent rgba(0,209,178,.9) transparent transparent}.tooltip.is-tooltip-primary.is-tooltip-bottom::after{border-color:transparent transparent rgba(0,209,178,.9) transparent}.tooltip.is-tooltip-primary.is-tooltip-left::after{border-color:transparent transparent transparent rgba(0,209,178,.9)}.tooltip.is-tooltip-primary::before{background:rgba(0,209,178,.9);color:#fff}.tooltip.is-tooltip-link::after{border-color:rgba(50,115,220,.9) transparent transparent transparent}.tooltip.is-tooltip-link.is-tooltip-right::after{border-color:transparent rgba(50,115,220,.9) transparent transparent}.tooltip.is-tooltip-link.is-tooltip-bottom::after{border-color:transparent transparent rgba(50,115,220,.9) transparent}.tooltip.is-tooltip-link.is-tooltip-left::after{border-color:transparent transparent transparent rgba(50,115,220,.9)}.tooltip.is-tooltip-link::before{background:rgba(50,115,220,.9);color:#fff}.tooltip.is-tooltip-info::after{border-color:rgba(32,156,238,.9) transparent transparent transparent}.tooltip.is-tooltip-info.is-tooltip-right::after{border-color:transparent rgba(32,156,238,.9) transparent transparent}.tooltip.is-tooltip-info.is-tooltip-bottom::after{border-color:transparent transparent rgba(32,156,238,.9) transparent}.tooltip.is-tooltip-info.is-tooltip-left::after{border-color:transparent transparent transparent rgba(32,156,238,.9)}.tooltip.is-tooltip-info::before{background:rgba(32,156,238,.9);color:#fff}.tooltip.is-tooltip-success::after{border-color:rgba(35,209,96,.9) transparent transparent transparent}.tooltip.is-tooltip-success.is-tooltip-right::after{border-color:transparent rgba(35,209,96,.9) transparent transparent}.tooltip.is-tooltip-success.is-tooltip-bottom::after{border-color:transparent transparent rgba(35,209,96,.9) transparent}.tooltip.is-tooltip-success.is-tooltip-left::after{border-color:transparent transparent transparent rgba(35,209,96,.9)}.tooltip.is-tooltip-success::before{background:rgba(35,209,96,.9);color:#fff}.tooltip.is-tooltip-warning::after{border-color:rgba(255,221,87,.9) transparent transparent transparent}.tooltip.is-tooltip-warning.is-tooltip-right::after{border-color:transparent rgba(255,221,87,.9) transparent transparent}.tooltip.is-tooltip-warning.is-tooltip-bottom::after{border-color:transparent transparent rgba(255,221,87,.9) transparent}.tooltip.is-tooltip-warning.is-tooltip-left::after{border-color:transparent transparent transparent rgba(255,221,87,.9)}.tooltip.is-tooltip-warning::before{background:rgba(255,221,87,.9);color:rgba(0,0,0,.7)}.tooltip.is-tooltip-danger::after{border-color:rgba(255,56,96,.9) transparent transparent transparent}.tooltip.is-tooltip-danger.is-tooltip-right::after{border-color:transparent rgba(255,56,96,.9) transparent transparent}.tooltip.is-tooltip-danger.is-tooltip-bottom::after{border-color:transparent transparent rgba(255,56,96,.9) transparent}.tooltip.is-tooltip-danger.is-tooltip-left::after{border-color:transparent transparent transparent rgba(255,56,96,.9)}.tooltip.is-tooltip-danger::before{background:rgba(255,56,96,.9);color:#fff} \ No newline at end of file diff --git a/dist/bulma-tooltip.sass b/dist/bulma-tooltip.sass index 79a34b1..09cb961 100644 --- a/dist/bulma-tooltip.sass +++ b/dist/bulma-tooltip.sass @@ -5,17 +5,17 @@ $tooltip-max-width: 24rem !default position: relative &:hover, &.is-tooltip-active - &::before, - &::after + &::after, + &::before z-index: 99999 position: absolute display: inline-block pointer-events: none - &:before + &::after content: "" border-style: solid border-width: .5rem - &::after + &::before opacity: 0 content: attr(data-tooltip) overflow: hidden @@ -32,7 +32,7 @@ $tooltip-max-width: 24rem !default &:focus, &:hover, &.is-tooltip-active - &::before + &::after top: 0 bottom: auto left: 50% @@ -40,7 +40,7 @@ $tooltip-max-width: 24rem !default margin-left: -.5rem margin-top: -.5rem border-color: rgba($tooltip-background-color, 0.9) transparent transparent transparent - &::after + &::before top: auto bottom: 100% left: 50% @@ -48,7 +48,7 @@ $tooltip-max-width: 24rem !default transform: translate(-50%, -0.5rem) &.is-tooltip-right - &::after + &::before top: auto bottom: 50% left: 100% @@ -57,16 +57,16 @@ $tooltip-max-width: 24rem !default &:focus, &:hover, &.is-tooltip-active - &::before + &::after top: 50% left: 100% right: auto border-color: transparent rgba($tooltip-background-color, 0.9) transparent transparent - &::after + &::before transform: translate(0.5rem, 50%) &.is-tooltip-bottom - &::after + &::before top: 100% bottom: auto left: 50% @@ -75,17 +75,17 @@ $tooltip-max-width: 24rem !default &:focus, &:hover, &.is-tooltip-active - &::before + &::after top: 100% bottom: auto left: 50% right: auto border-color: transparent transparent rgba($tooltip-background-color, 0.9) transparent - &::after + &::before transform: translate(-50%, 0.5rem) &.is-tooltip-left - &::after + &::before top: auto bottom: 50% left: auto @@ -94,16 +94,16 @@ $tooltip-max-width: 24rem !default &:focus, &:hover, &.is-tooltip-active - &::before + &::after top: 50% left: auto right: calc(100% - .5rem) border-color: transparent transparent transparent rgba($tooltip-background-color, 0.9) - &::after + &::before transform: translate(-0.5rem, 50%) &.is-tooltip-multiline - &::after + &::before min-width: $tooltip-max-width text-overflow: clip white-space: normal @@ -113,17 +113,17 @@ $tooltip-max-width: 24rem !default $color: nth($pair, 1) $color-invert: nth($pair, 2) &.is-tooltip-#{$name} - &::before + &::after border-color: rgba($color, 0.9) transparent transparent transparent &.is-tooltip-right - &::before + &::after border-color: transparent rgba($color, 0.9) transparent transparent &.is-tooltip-bottom - &::before + &::after border-color: transparent transparent rgba($color, 0.9) transparent &.is-tooltip-left - &::before + &::after border-color: transparent transparent transparent rgba($color, 0.9) - &::after + &::before background: rgba($color, 0.9) color: $color-invert diff --git a/src/extension.sass b/src/extension.sass index 79a34b1..09cb961 100644 --- a/src/extension.sass +++ b/src/extension.sass @@ -5,17 +5,17 @@ $tooltip-max-width: 24rem !default position: relative &:hover, &.is-tooltip-active - &::before, - &::after + &::after, + &::before z-index: 99999 position: absolute display: inline-block pointer-events: none - &:before + &::after content: "" border-style: solid border-width: .5rem - &::after + &::before opacity: 0 content: attr(data-tooltip) overflow: hidden @@ -32,7 +32,7 @@ $tooltip-max-width: 24rem !default &:focus, &:hover, &.is-tooltip-active - &::before + &::after top: 0 bottom: auto left: 50% @@ -40,7 +40,7 @@ $tooltip-max-width: 24rem !default margin-left: -.5rem margin-top: -.5rem border-color: rgba($tooltip-background-color, 0.9) transparent transparent transparent - &::after + &::before top: auto bottom: 100% left: 50% @@ -48,7 +48,7 @@ $tooltip-max-width: 24rem !default transform: translate(-50%, -0.5rem) &.is-tooltip-right - &::after + &::before top: auto bottom: 50% left: 100% @@ -57,16 +57,16 @@ $tooltip-max-width: 24rem !default &:focus, &:hover, &.is-tooltip-active - &::before + &::after top: 50% left: 100% right: auto border-color: transparent rgba($tooltip-background-color, 0.9) transparent transparent - &::after + &::before transform: translate(0.5rem, 50%) &.is-tooltip-bottom - &::after + &::before top: 100% bottom: auto left: 50% @@ -75,17 +75,17 @@ $tooltip-max-width: 24rem !default &:focus, &:hover, &.is-tooltip-active - &::before + &::after top: 100% bottom: auto left: 50% right: auto border-color: transparent transparent rgba($tooltip-background-color, 0.9) transparent - &::after + &::before transform: translate(-50%, 0.5rem) &.is-tooltip-left - &::after + &::before top: auto bottom: 50% left: auto @@ -94,16 +94,16 @@ $tooltip-max-width: 24rem !default &:focus, &:hover, &.is-tooltip-active - &::before + &::after top: 50% left: auto right: calc(100% - .5rem) border-color: transparent transparent transparent rgba($tooltip-background-color, 0.9) - &::after + &::before transform: translate(-0.5rem, 50%) &.is-tooltip-multiline - &::after + &::before min-width: $tooltip-max-width text-overflow: clip white-space: normal @@ -113,17 +113,17 @@ $tooltip-max-width: 24rem !default $color: nth($pair, 1) $color-invert: nth($pair, 2) &.is-tooltip-#{$name} - &::before + &::after border-color: rgba($color, 0.9) transparent transparent transparent &.is-tooltip-right - &::before + &::after border-color: transparent rgba($color, 0.9) transparent transparent &.is-tooltip-bottom - &::before + &::after border-color: transparent transparent rgba($color, 0.9) transparent &.is-tooltip-left - &::before + &::after border-color: transparent transparent transparent rgba($color, 0.9) - &::after + &::before background: rgba($color, 0.9) color: $color-invert