diff --git a/src/scss/cdb-components/tooltips.scss b/src/scss/cdb-components/tooltips.scss index 8eed3b7..49cd210 100644 --- a/src/scss/cdb-components/tooltips.scss +++ b/src/scss/cdb-components/tooltips.scss @@ -1,57 +1,57 @@ -// Tooltip +// Info Tooltip // ---------------------------------------------- /* SG -# Tooltip +# Info Tooltip ```
-
-

627K Transactions

+
+

627K Transactions

-
-

627K Transactions

+
+

627K Transactions

-
-

627K Transactions

+
+

627K Transactions

-
-

627K Transactions

+
+

627K Transactions

-
-

627K Transactions

+
+

627K Transactions

-
-

627K Transactions

+
+

627K Transactions

-
-

627K Transactions

+
+

627K Transactions

-
-

627K Transactions

+
+

627K Transactions

@@ -65,14 +65,14 @@ @import '../cdb-variables/sizes'; -.CDB-Tooltip { +.CDB-InfoTooltip { display: inline-block; position: absolute; padding: $baseSize; border-radius: $halfBaseSize; background: rgba($cMainBg, 0.8); } -.CDB-Tooltip::after { +.CDB-InfoTooltip::after { display: block; position: absolute; width: 0; @@ -82,67 +82,67 @@ } .is-black { - &.CDB-Tooltip.CDB-Tooltip--up::after { + &.CDB-InfoTooltip.CDB-InfoTooltip--up::after { border-bottom-color: rgba($cMainBg, 0.8); } - &.CDB-Tooltip.CDB-Tooltip--down::after { + &.CDB-InfoTooltip.CDB-InfoTooltip--down::after { border-top-color: rgba($cMainBg, 0.8); } - &.CDB-Tooltip.CDB-Tooltip--left::after { + &.CDB-InfoTooltip.CDB-InfoTooltip--left::after { border-right-color: rgba($cMainBg, 0.8); } - &.CDB-Tooltip.CDB-Tooltip--right::after { + &.CDB-InfoTooltip.CDB-InfoTooltip--right::after { border-left-color: rgba($cMainBg, 0.8); } } .is-error { - &.CDB-Tooltip.CDB-Tooltip--up::after { + &.CDB-InfoTooltip.CDB-InfoTooltip--up::after { border-bottom-color: $cError; } - &.CDB-Tooltip.CDB-Tooltip--down::after { + &.CDB-InfoTooltip.CDB-InfoTooltip--down::after { border-top-color: $cError; } - &.CDB-Tooltip.CDB-Tooltip--left::after { + &.CDB-InfoTooltip.CDB-InfoTooltip--left::after { border-right-color: $cError; } - &.CDB-Tooltip.CDB-Tooltip--right::after { + &.CDB-InfoTooltip.CDB-InfoTooltip--right::after { border-left-color: $cError; } } -.CDB-Tooltip.CDB-Tooltip--up::after { +.CDB-InfoTooltip.CDB-InfoTooltip--up::after { top: -$baseSize; left: calc(50% - #{$halfBaseSize}); border-top-width: $halfBaseSize; border-top-style: solid; } -.CDB-Tooltip.CDB-Tooltip--down::after { +.CDB-InfoTooltip.CDB-InfoTooltip--down::after { bottom: -$baseSize; left: calc(50% - #{$halfBaseSize}); border-top-width: $halfBaseSize; border-top-style: solid; } -.CDB-Tooltip.CDB-Tooltip--left::after { +.CDB-InfoTooltip.CDB-InfoTooltip--left::after { top: calc(50% - #{$halfBaseSize}); left: -$baseSize; border-right-width: $halfBaseSize; border-right-style: solid; } -.CDB-Tooltip.CDB-Tooltip--right::after { +.CDB-InfoTooltip.CDB-InfoTooltip--right::after { top: calc(50% - #{$halfBaseSize}); right: -$baseSize; border-right-width: $halfBaseSize; border-right-style: solid; } -.CDB-Tooltip.is-error { +.CDB-InfoTooltip.is-error { background: $cError; } -.CDB-Tooltip-text { +.CDB-InfoTooltip-text { color: $cWhite; }