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

Merge pull request #81 from CartoDB/add-tooltips

Browse Source 
Add tooltips
This commit is contained in:
piensaenpixel 2016-03-10 17:17:32 +01:00
commit fd009fd68b
4 changed files with 148 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/fonts/cartoIcon.eot
View File

Binary file not shown.

BIN
src/fonts/cartoIcon.ttf
View File

Binary file not shown.

BIN
src/fonts/cartoIcon.woff
View File

Binary file not shown.

148
src/scss/cdb-components/tooltips.scss Normal file
View File

@ -0,0 +1,148 @@
// Tooltip
// ----------------------------------------------
/* SG
# 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>
</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>
</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>
</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>
</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>
</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>
</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>
</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>
</div>
```
*/
@import '../cdb-utilities/mixins';
@import '../cdb-variables/colors';
@import '../cdb-variables/sizes';
.CDB-Tooltip {
display: inline-block;
position: absolute;
padding: $baseSize;
border-radius: $halfBaseSize;
background: rgba($cMainBg, 0.8);
}
.CDB-Tooltip::after {
display: block;
position: absolute;
width: 0;
height: 0;
border: 4px solid transparent;
content: '';
}
.is-black {
&.CDB-Tooltip.CDB-Tooltip--up::after {
border-bottom-color: rgba($cMainBg, 0.8);
}
&.CDB-Tooltip.CDB-Tooltip--down::after {
border-top-color: rgba($cMainBg, 0.8);
}
&.CDB-Tooltip.CDB-Tooltip--left::after {
border-right-color: rgba($cMainBg, 0.8);
}
&.CDB-Tooltip.CDB-Tooltip--right::after {
border-left-color: rgba($cMainBg, 0.8);
}
}
.is-error {
&.CDB-Tooltip.CDB-Tooltip--up::after {
border-bottom-color: $cError;
}
&.CDB-Tooltip.CDB-Tooltip--down::after {
border-top-color: $cError;
}
&.CDB-Tooltip.CDB-Tooltip--left::after {
border-right-color: $cError;
}
&.CDB-Tooltip.CDB-Tooltip--right::after {
border-left-color: $cError;
}
}
.CDB-Tooltip.CDB-Tooltip--up::after {
top: -$baseSize;
left: calc(50% - #{$halfBaseSize});
border-top-width: $halfBaseSize;
border-top-style: solid;
}
.CDB-Tooltip.CDB-Tooltip--down::after {
bottom: -$baseSize;
left: calc(50% - #{$halfBaseSize});
border-top-width: $halfBaseSize;
border-top-style: solid;
}
.CDB-Tooltip.CDB-Tooltip--left::after {
top: calc(50% - #{$halfBaseSize});
left: -$baseSize;
border-right-width: $halfBaseSize;
border-right-style: solid;
}
.CDB-Tooltip.CDB-Tooltip--right::after {
top: calc(50% - #{$halfBaseSize});
right: -$baseSize;
border-right-width: $halfBaseSize;
border-right-style: solid;
}
.CDB-Tooltip.is-error {
background: $cError;
}
.CDB-Tooltip-text {
color: $cWhite;
}