Permalink
Fetching contributors…
Cannot retrieve contributors at this time
139 lines (115 sloc) 3.2 KB
/// Global namespace for title bubble component
/// @access public
/// @group title button
/// @type string
$DBtitlebubble-namespace: "c-title-bubble" !default;
/// Background color for title bubble component
/// @access public
/// @group title button
/// @type string
$DBtitlebubble-background: color(gray, dark) !default;
/// Point width for title bubble component
/// @access public
/// @group title button
/// @type string
$DBtitlebubble-point-width: 5px !default;
// Title-bubble component. A tipsy-like tooltip component with default south direction
// @example html
// <div class="c-title-bubble [c-title-bubble--n | --e | --w]" data-title="Some text">
// {{content}}
// </div>
.#{$DBtitlebubble-namespace} {
display: inline-block;
position: relative;
&:before, &:after {
z-index: 500;
}
&:after {
content: attr(data-title);
display: none;
position: absolute;
top: 100%;
left: 50%;
white-space: nowrap;
margin-top: $DBtitlebubble-point-width;
padding: 7px 9px;
font-size: 11px;
font-weight: 500;
line-height: 1.4;
color: color(white);
border-radius: 3px;
background-color: $DBtitlebubble-background;
transform: translateX(-50%);
transform-origin: 50% 50%;
}
&:before {
content: "";
display: none;
position: absolute;
top: 100%;
left: 50%;
margin-top: -($DBtitlebubble-point-width);
margin-left: -$DBtitlebubble-point-width;
border: 5px solid transparent;
border-bottom-color: $DBtitlebubble-background;
}
&--respect-line-break {
&:after {
white-space: pre-line;
}
}
&--n {
&:after {
top: auto;
bottom: 100%;
margin-bottom: $DBtitlebubble-point-width;
}
&:before {
top: auto;
bottom: 100%;
margin-bottom: -$DBtitlebubble-point-width;
border-top-color: $DBtitlebubble-background;
border-bottom-color: transparent;
}
}
&--e {
&:after {
top: 50%;
left: 100%;
margin-top: 0;
margin-left: $DBtitlebubble-point-width;
transform: translateY(-50%);
}
&:before {
top: 50%;
left: 100%;
margin-top: -$DBtitlebubble-point-width;
border-right-color: $DBtitlebubble-background;
border-bottom-color: transparent;
}
}
&--w {
&:after {
top: 50%;
right: 100%;
left: auto;
margin-top: 0;
margin-right: $DBtitlebubble-point-width;
transform: translateY(-50%);
}
&:before {
top: 50%;
right: 100%;
left: auto;
margin-top: -$DBtitlebubble-point-width;
margin-right: -$DBtitlebubble-point-width;
border-bottom-color: transparent;
border-left-color: $DBtitlebubble-background;
}
}
&:hover, &:focus, &.is-child-focused {
&:before, &:after {
display: block;
}
}
}