cartodb/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
# Tooltip
# Info Tooltip
```
<div style="position: relative; height: 100px;">
<div class="CDB-Tooltip CDB-Tooltip--up is-black">
<p class="CDB-Text CDB-Size-medium CDB-Tooltip-text">627K Transactions</p>
<div class="CDB-InfoTooltip CDB-InfoTooltip--up is-black">
<p class="CDB-Text CDB-Size-medium CDB-InfoTooltip-text">627K Transactions</p>
</div>
</div>
<div style="position: relative; height: 100px;">
<div class="CDB-Tooltip CDB-Tooltip--up is-error">
<p class="CDB-Text CDB-Size-medium CDB-Tooltip-text">627K Transactions</p>
<div class="CDB-InfoTooltip CDB-InfoTooltip--up is-error">
<p class="CDB-Text CDB-Size-medium CDB-InfoTooltip-text">627K Transactions</p>
</div>
</div>
<div style="position: relative; height: 100px;">
<div class="CDB-Tooltip CDB-Tooltip--down is-black">
<p class="CDB-Text CDB-Size-medium CDB-Tooltip-text">627K Transactions</p>
<div class="CDB-InfoTooltip CDB-InfoTooltip--down is-black">
<p class="CDB-Text CDB-Size-medium CDB-InfoTooltip-text">627K Transactions</p>
</div>
</div>
<div style="position: relative; height: 100px;">
<div class="CDB-Tooltip CDB-Tooltip--down is-error">
<p class="CDB-Text CDB-Size-medium CDB-Tooltip-text">627K Transactions</p>
<div class="CDB-InfoTooltip CDB-InfoTooltip--down is-error">
<p class="CDB-Text CDB-Size-medium CDB-InfoTooltip-text">627K Transactions</p>
</div>
</div>
<div style="position: relative; height: 100px;">
<div class="CDB-Tooltip CDB-Tooltip--left is-black">
<p class="CDB-Text CDB-Size-medium CDB-Tooltip-text">627K Transactions</p>
<div class="CDB-InfoTooltip CDB-InfoTooltip--left is-black">
<p class="CDB-Text CDB-Size-medium CDB-InfoTooltip-text">627K Transactions</p>
</div>
</div>
<div style="position: relative; height: 100px;">
<div class="CDB-Tooltip CDB-Tooltip--left is-error">
<p class="CDB-Text CDB-Size-medium CDB-Tooltip-text">627K Transactions</p>
<div class="CDB-InfoTooltip CDB-InfoTooltip--left is-error">
<p class="CDB-Text CDB-Size-medium CDB-InfoTooltip-text">627K Transactions</p>
</div>
</div>
<div style="position: relative; height: 100px;">
<div class="CDB-Tooltip CDB-Tooltip--right is-black">
<p class="CDB-Text CDB-Size-medium CDB-Tooltip-text">627K Transactions</p>
<div class="CDB-InfoTooltip CDB-InfoTooltip--right is-black">
<p class="CDB-Text CDB-Size-medium CDB-InfoTooltip-text">627K Transactions</p>
</div>
</div>
<div style="position: relative; height: 100px;">
<div class="CDB-Tooltip CDB-Tooltip--right is-error">
<p class="CDB-Text CDB-Size-medium CDB-Tooltip-text">627K Transactions</p>
<div class="CDB-InfoTooltip CDB-InfoTooltip--right is-error">
<p class="CDB-Text CDB-Size-medium CDB-InfoTooltip-text">627K Transactions</p>
</div>
</div>
@ -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;
}