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

add first tooltips

Browse Source
This commit is contained in:
piensaenpixel 2016-02-26 12:58:18 +01:00
parent 5d432cf6ec
commit 6040d5e26f
1 changed files with 85 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -0,0 +1,85 @@
// Typography styles
// ----------------------------------------------
/* SG
# Tooltips
```
<div style="height: 100px; position: relative;">
<div class="CDB-Tooltip is-top u-iBlock CDB-Text CDB-Size-medium">
<p>627K Transactions</p>
</div>
</div>
<br/>
<br/>
<br/>
<br/>
<div style="height: 100px; position: relative;">
<div class="CDB-Tooltip is-top is-error u-iBlock CDB-Text CDB-Size-medium">
<p>Hello I am a Form error</p>
</div>
</div>
<br/>
<br/>
<br/>
<br/>
<div style="height: 100px; position: relative;">
<div class="CDB-Tooltip is-bottom u-iBlock CDB-Text CDB-Size-medium">
<p>627K Transactions</p>
</div>
</div>
<br/>
<br/>
<br/>
<br/>
<div style="height: 100px; position: relative;">
<div class="CDB-Tooltip is-bottom is-error u-iBlock CDB-Text CDB-Size-medium">
<p>Hello I am a Form error</p>
</div>
</div>
```
*/
@import '../cdb-variables/sizes';
@import '../cdb-variables/colors';
.CDB-Tooltip {
position: absolute;
padding: 8px;
border-radius: 4px;
background: rgba($cMainBg, 0.8);
color: $cWhite;
}
.CDB-Tooltip:before {
display: block;
position: absolute;
top: -12px;
left: calc(50% - 6px);
width: 0;
height: 0;
border: 6px solid transparent;
border-bottom: 6px solid rgba($cMainBg, 0.8);
content: '';
}
.CDB-Tooltip.is-error {
background: $cError;
}
.CDB-Tooltip.is-error:before {
border-bottom: 6px solid $cError;
}