add tooltips
This commit is contained in:
piensaenpixel
parent
cc6005407d
commit
aa922b2886
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -1,85 +1,148 @@
|
||||
// Typography styles
|
||||
// Tooltip
|
||||
// ----------------------------------------------
|
||||
|
||||
/* SG
|
||||
# Tooltips
|
||||
# Tooltip
|
||||
|
||||
|
||||
```
|
||||
<div style="height: 100px; position: relative;">
|
||||
<div class="CDB-Tooltip is-top u-iBlock CDB-Text CDB-Size-medium">
|
||||
<p>627K Transactions</p>
|
||||
<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>
|
||||
|
||||
<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 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>
|
||||
|
||||
<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 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>
|
||||
|
||||
<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 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-variables/sizes';
|
||||
@import '../cdb-utilities/mixins';
|
||||
@import '../cdb-variables/colors';
|
||||
@import '../cdb-variables/sizes';
|
||||
|
||||
|
||||
.CDB-Tooltip {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
padding: $baseSize;
|
||||
border-radius: $halfBaseSize;
|
||||
background: rgba($cMainBg, 0.8);
|
||||
color: $cWhite;
|
||||
}
|
||||
|
||||
.CDB-Tooltip:before {
|
||||
.CDB-Tooltip:after {
|
||||
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);
|
||||
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.is-error:before {
|
||||
border-bottom: 6px solid $cError;
|
||||
.CDB-Tooltip-text {
|
||||
color: $cWhite;
|
||||
}
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user