cartodb4/CartoAssets
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Changed class name of the tooltips

Browse Source
This commit is contained in:
xavijam 2016-03-17 16:54:58 +01:00
parent fd009fd68b
commit 6b684d46e2
1 changed files with 34 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
src/scss/cdb-components/tooltips.scss
View File

@ -1,57 +1,57 @@
// Tooltip // Info Tooltip
// ---------------------------------------------- // ----------------------------------------------
/* SG /* SG
# Tooltip # Info Tooltip
``` ```
<div style="position: relative; height: 100px;"> <div style="position: relative; height: 100px;">
<div class="CDB-Tooltip CDB-Tooltip--up is-black"> <div class="CDB-InfoTooltip CDB-InfoTooltip--up is-black">
<p class="CDB-Text CDB-Size-medium CDB-Tooltip-text">627K Transactions</p> <p class="CDB-Text CDB-Size-medium CDB-InfoTooltip-text">627K Transactions</p>
</div> </div>
</div> </div>
<div style="position: relative; height: 100px;"> <div style="position: relative; height: 100px;">
<div class="CDB-Tooltip CDB-Tooltip--up is-error"> <div class="CDB-InfoTooltip CDB-InfoTooltip--up is-error">
<p class="CDB-Text CDB-Size-medium CDB-Tooltip-text">627K Transactions</p> <p class="CDB-Text CDB-Size-medium CDB-InfoTooltip-text">627K Transactions</p>
</div> </div>
</div> </div>
<div style="position: relative; height: 100px;"> <div style="position: relative; height: 100px;">
<div class="CDB-Tooltip CDB-Tooltip--down is-black"> <div class="CDB-InfoTooltip CDB-InfoTooltip--down is-black">
<p class="CDB-Text CDB-Size-medium CDB-Tooltip-text">627K Transactions</p> <p class="CDB-Text CDB-Size-medium CDB-InfoTooltip-text">627K Transactions</p>
</div> </div>
</div> </div>
<div style="position: relative; height: 100px;"> <div style="position: relative; height: 100px;">
<div class="CDB-Tooltip CDB-Tooltip--down is-error"> <div class="CDB-InfoTooltip CDB-InfoTooltip--down is-error">
<p class="CDB-Text CDB-Size-medium CDB-Tooltip-text">627K Transactions</p> <p class="CDB-Text CDB-Size-medium CDB-InfoTooltip-text">627K Transactions</p>
</div> </div>
</div> </div>
<div style="position: relative; height: 100px;"> <div style="position: relative; height: 100px;">
<div class="CDB-Tooltip CDB-Tooltip--left is-black"> <div class="CDB-InfoTooltip CDB-InfoTooltip--left is-black">
<p class="CDB-Text CDB-Size-medium CDB-Tooltip-text">627K Transactions</p> <p class="CDB-Text CDB-Size-medium CDB-InfoTooltip-text">627K Transactions</p>
</div> </div>
</div> </div>
<div style="position: relative; height: 100px;"> <div style="position: relative; height: 100px;">
<div class="CDB-Tooltip CDB-Tooltip--left is-error"> <div class="CDB-InfoTooltip CDB-InfoTooltip--left is-error">
<p class="CDB-Text CDB-Size-medium CDB-Tooltip-text">627K Transactions</p> <p class="CDB-Text CDB-Size-medium CDB-InfoTooltip-text">627K Transactions</p>
</div> </div>
</div> </div>
<div style="position: relative; height: 100px;"> <div style="position: relative; height: 100px;">
<div class="CDB-Tooltip CDB-Tooltip--right is-black"> <div class="CDB-InfoTooltip CDB-InfoTooltip--right is-black">
<p class="CDB-Text CDB-Size-medium CDB-Tooltip-text">627K Transactions</p> <p class="CDB-Text CDB-Size-medium CDB-InfoTooltip-text">627K Transactions</p>
</div> </div>
</div> </div>
<div style="position: relative; height: 100px;"> <div style="position: relative; height: 100px;">
<div class="CDB-Tooltip CDB-Tooltip--right is-error"> <div class="CDB-InfoTooltip CDB-InfoTooltip--right is-error">
<p class="CDB-Text CDB-Size-medium CDB-Tooltip-text">627K Transactions</p> <p class="CDB-Text CDB-Size-medium CDB-InfoTooltip-text">627K Transactions</p>
</div> </div>
</div> </div>
@ -65,14 +65,14 @@
@import '../cdb-variables/sizes'; @import '../cdb-variables/sizes';
.CDB-Tooltip { .CDB-InfoTooltip {
display: inline-block; display: inline-block;
position: absolute; position: absolute;
padding: $baseSize; padding: $baseSize;
border-radius: $halfBaseSize; border-radius: $halfBaseSize;
background: rgba($cMainBg, 0.8); background: rgba($cMainBg, 0.8);
} }
.CDB-Tooltip::after { .CDB-InfoTooltip::after {
display: block; display: block;
position: absolute; position: absolute;
width: 0; width: 0;
@ -82,67 +82,67 @@
} }
.is-black { .is-black {
&.CDB-Tooltip.CDB-Tooltip--up::after { &.CDB-InfoTooltip.CDB-InfoTooltip--up::after {
border-bottom-color: rgba($cMainBg, 0.8); 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); 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); 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); border-left-color: rgba($cMainBg, 0.8);
} }
} }
.is-error { .is-error {
&.CDB-Tooltip.CDB-Tooltip--up::after { &.CDB-InfoTooltip.CDB-InfoTooltip--up::after {
border-bottom-color: $cError; border-bottom-color: $cError;
} }
&.CDB-Tooltip.CDB-Tooltip--down::after { &.CDB-InfoTooltip.CDB-InfoTooltip--down::after {
border-top-color: $cError; border-top-color: $cError;
} }
&.CDB-Tooltip.CDB-Tooltip--left::after { &.CDB-InfoTooltip.CDB-InfoTooltip--left::after {
border-right-color: $cError; border-right-color: $cError;
} }
&.CDB-Tooltip.CDB-Tooltip--right::after { &.CDB-InfoTooltip.CDB-InfoTooltip--right::after {
border-left-color: $cError; border-left-color: $cError;
} }
} }
.CDB-Tooltip.CDB-Tooltip--up::after { .CDB-InfoTooltip.CDB-InfoTooltip--up::after {
top: -$baseSize; top: -$baseSize;
left: calc(50% - #{$halfBaseSize}); left: calc(50% - #{$halfBaseSize});
border-top-width: $halfBaseSize; border-top-width: $halfBaseSize;
border-top-style: solid; border-top-style: solid;
} }
.CDB-Tooltip.CDB-Tooltip--down::after { .CDB-InfoTooltip.CDB-InfoTooltip--down::after {
bottom: -$baseSize; bottom: -$baseSize;
left: calc(50% - #{$halfBaseSize}); left: calc(50% - #{$halfBaseSize});
border-top-width: $halfBaseSize; border-top-width: $halfBaseSize;
border-top-style: solid; border-top-style: solid;
} }
.CDB-Tooltip.CDB-Tooltip--left::after { .CDB-InfoTooltip.CDB-InfoTooltip--left::after {
top: calc(50% - #{$halfBaseSize}); top: calc(50% - #{$halfBaseSize});
left: -$baseSize; left: -$baseSize;
border-right-width: $halfBaseSize; border-right-width: $halfBaseSize;
border-right-style: solid; border-right-style: solid;
} }
.CDB-Tooltip.CDB-Tooltip--right::after { .CDB-InfoTooltip.CDB-InfoTooltip--right::after {
top: calc(50% - #{$halfBaseSize}); top: calc(50% - #{$halfBaseSize});
right: -$baseSize; right: -$baseSize;
border-right-width: $halfBaseSize; border-right-width: $halfBaseSize;
border-right-style: solid; border-right-style: solid;
} }
.CDB-Tooltip.is-error { .CDB-InfoTooltip.is-error {
background: $cError; background: $cError;
} }
.CDB-Tooltip-text { .CDB-InfoTooltip-text {
color: $cWhite; color: $cWhite;
} }