biofriction-wp-theme/node_modules/foundation-sites/scss/components/_tooltip.scss

161 lines
3.2 KiB
SCSS
Raw Normal View History

2021-10-26 14:18:09 +02:00
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group tooltip
////
/// Default cursor of the defined term.
/// @type Keyword
$has-tip-cursor: help !default;
/// Default font weight of the defined term.
/// @type Keyword | Number
$has-tip-font-weight: $global-weight-bold !default;
/// Default border bottom of the defined term.
/// @type List
$has-tip-border-bottom: dotted 1px $dark-gray !default;
/// Default color of the tooltip background.
/// @type Color
$tooltip-background-color: $black !default;
/// Default color of the tooltip font.
/// @type Color
$tooltip-color: $white !default;
/// Default padding of the tooltip background.
/// @type Number
$tooltip-padding: 0.75rem !default;
/// Default max width for tooltips.
/// @type Number
$tooltip-max-width: 10rem !default;
/// Default font size of the tooltip text. By default, we recommend a smaller font size than the body copy.
/// @type Number
$tooltip-font-size: $small-font-size !default;
/// Default pip width for tooltips.
/// @type Number
$tooltip-pip-width: 0.75rem !default;
/// Default pip height for tooltips. This is helpful for calculating the distance of the tooltip from the tooltip word.
/// @type Number
$tooltip-pip-height: $tooltip-pip-width * 0.866 !default;
/// Default radius for tooltips.
/// @type Number
$tooltip-radius: $global-radius !default;
@mixin has-tip {
position: relative;
display: inline-block;
border-bottom: $has-tip-border-bottom;
font-weight: $has-tip-font-weight;
cursor: $has-tip-cursor;
}
@mixin tooltip {
position: absolute;
top: calc(100% + #{$tooltip-pip-height});
z-index: 1200;
max-width: $tooltip-max-width;
padding: $tooltip-padding;
border-radius: $tooltip-radius;
background-color: $tooltip-background-color;
font-size: $tooltip-font-size;
color: $tooltip-color;
&::before {
position: absolute;
}
&.bottom {
&::before {
@include css-triangle($tooltip-pip-width, $tooltip-background-color, up);
bottom: 100%;
}
&.align-center::before {
left: 50%;
transform: translateX(-50%);
}
}
&.top {
&::before {
@include css-triangle($tooltip-pip-width, $tooltip-background-color, down);
top: 100%;
bottom: auto;
}
&.align-center::before {
left: 50%;
transform: translateX(-50%);
}
}
&.left {
&::before {
@include css-triangle($tooltip-pip-width, $tooltip-background-color, right);
left: 100%;
}
&.align-center::before {
bottom: auto;
top: 50%;
transform: translateY(-50%);
}
}
&.right {
&::before {
@include css-triangle($tooltip-pip-width, $tooltip-background-color, left);
right: 100%;
left: auto;
}
&.align-center::before {
bottom: auto;
top: 50%;
transform: translateY(-50%);
}
}
&.align-top::before {
bottom: auto;
top: 10%;
}
&.align-bottom::before {
bottom: 10%;
top: auto;
}
&.align-left::before {
left: 10%;
right: auto;
}
&.align-right::before {
left: auto;
right: 10%;
}
}
@mixin foundation-tooltip {
.has-tip {
@include has-tip;
}
.tooltip {
@include tooltip;
}
}