114 lines
2.9 KiB
SCSS
114 lines
2.9 KiB
SCSS
|
//
|
||
|
|
// Tooltip Variables
|
||
|
|
//
|
||
|
|
$has-tip-border-bottom: dotted 1px #ccc !default;
|
||
|
|
$has-tip-font-weight: bold !default;
|
||
|
|
$has-tip-font-color: #333 !default;
|
||
|
|
$has-tip-border-bottom-hover: dotted 1px darken($primary-color, 20%) !default;
|
||
|
|
$has-tip-font-color-hover: $primary-color !default;
|
||
|
|
$has-tip-cursor-type: help !default;
|
||
|
|
|
||
|
|
$tooltip-padding: emCalc(8px) !default;
|
||
|
|
$tooltip-bg: #000 !default;
|
||
|
|
$tooltip-font-size: emCalc(15px) !default;
|
||
|
|
$tooltip-font-weight: bold !default;
|
||
|
|
$tooltip-font-color: #fff !default;
|
||
|
|
$tooltip-line-height: 1.3 !default;
|
||
|
|
$tooltip-close-font-size: emCalc(10px) !default;
|
||
|
|
$tooltip-close-font-weight: normal !default;
|
||
|
|
$tooltip-close-font-color: #888 !default;
|
||
|
|
$tooltip-font-size-sml: emCalc(14px) !default;
|
||
|
|
$tooltip-radius: $global-radius !default;
|
||
|
|
$tooltip-pip-size: 5px !default;
|
||
|
|
|
||
|
|
|
||
|
|
/* Tooltips */
|
||
|
|
|
||
|
|
.has-tip {
|
||
|
|
border-bottom: $has-tip-border-bottom;
|
||
|
|
cursor: $has-tip-cursor-type;
|
||
|
|
font-weight: $has-tip-font-weight;
|
||
|
|
color: $has-tip-font-color;
|
||
|
|
|
||
|
|
&:hover,
|
||
|
|
&:focus {
|
||
|
|
border-bottom: $has-tip-border-bottom-hover;
|
||
|
|
color: $has-tip-font-color-hover;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.tip-left,
|
||
|
|
&.tip-right { float: none !important; }
|
||
|
|
}
|
||
|
|
|
||
|
|
.tooltip {
|
||
|
|
display: none;
|
||
|
|
position: absolute;
|
||
|
|
z-index: 999;
|
||
|
|
font-weight: $tooltip-font-weight;
|
||
|
|
font-size: $tooltip-font-size;
|
||
|
|
line-height: $tooltip-line-height;
|
||
|
|
padding: $tooltip-padding;
|
||
|
|
max-width: 85%;
|
||
|
|
#{$default-float}: 50%;
|
||
|
|
width: 100%;
|
||
|
|
color: $tooltip-font-color;
|
||
|
|
background: $tooltip-bg;
|
||
|
|
@include radius($tooltip-radius);
|
||
|
|
|
||
|
|
&>.nub {
|
||
|
|
display: block;
|
||
|
|
#{$default-float}: $tooltip-pip-size;
|
||
|
|
position: absolute;
|
||
|
|
width: 0;
|
||
|
|
height: 0;
|
||
|
|
border: solid $tooltip-pip-size;
|
||
|
|
border-color: transparent transparent $tooltip-bg transparent;
|
||
|
|
top: -($tooltip-pip-size * 2);
|
||
|
|
}
|
||
|
|
|
||
|
|
&.opened {
|
||
|
|
color: $has-tip-font-color-hover !important;
|
||
|
|
border-bottom: $has-tip-border-bottom-hover !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.tap-to-close {
|
||
|
|
display: block;
|
||
|
|
font-size: $tooltip-close-font-size;
|
||
|
|
color: $tooltip-close-font-color;
|
||
|
|
font-weight: $tooltip-close-font-weight;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media #{$small} {
|
||
|
|
.tooltip {
|
||
|
|
&>.nub {
|
||
|
|
border-color: transparent transparent $tooltip-bg transparent;
|
||
|
|
top: -($tooltip-pip-size * 2);
|
||
|
|
}
|
||
|
|
&.tip-top>.nub {
|
||
|
|
border-color: $tooltip-bg transparent transparent transparent;
|
||
|
|
top: auto;
|
||
|
|
bottom: -($tooltip-pip-size * 2);
|
||
|
|
}
|
||
|
|
|
||
|
|
&.tip-left,
|
||
|
|
&.tip-right { float: none !important; }
|
||
|
|
|
||
|
|
&.tip-left>.nub {
|
||
|
|
border-color: transparent transparent transparent $tooltip-bg;
|
||
|
|
right: -($tooltip-pip-size * 2);
|
||
|
|
left: auto;
|
||
|
|
top: 50%;
|
||
|
|
margin-top: -$tooltip-pip-size;
|
||
|
|
}
|
||
|
|
&.tip-right>.nub {
|
||
|
|
border-color: transparent $tooltip-bg transparent transparent;
|
||
|
|
right: auto;
|
||
|
|
left: -($tooltip-pip-size * 2);
|
||
|
|
top: 50%;
|
||
|
|
margin-top: -$tooltip-pip-size;
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|