123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142 |
- // Foundation by ZURB
- // foundation.zurb.com
- // Licensed under MIT Open Source
- @import "global";
- //
- // Tooltip Variables
- //
- $include-html-tooltip-classes: $include-html-classes !default;
- $has-tip-border-bottom: dotted 1px $iron !default;
- $has-tip-font-weight: $font-weight-bold !default;
- $has-tip-font-color: $oil !default;
- $has-tip-border-bottom-hover: dotted 1px scale-color($primary-color, $lightness: -55%) !default;
- $has-tip-font-color-hover: $primary-color !default;
- $has-tip-cursor-type: help !default;
- $tooltip-padding: rem-calc(12) !default;
- $tooltip-bg: $oil !default;
- $tooltip-font-size: rem-calc(14) !default;
- $tooltip-font-weight: $font-weight-normal !default;
- $tooltip-font-color: $white !default;
- $tooltip-line-height: 1.3 !default;
- $tooltip-close-font-size: rem-calc(10) !default;
- $tooltip-close-font-weight: $font-weight-normal !default;
- $tooltip-close-font-color: $monsoon !default;
- $tooltip-font-size-sml: rem-calc(14) !default;
- $tooltip-radius: $global-radius !default;
- $tooltip-rounded: $global-rounded !default;
- $tooltip-pip-size: 5px !default;
- $tooltip-max-width: 300px !default;
- @include exports("tooltip") {
- @if $include-html-tooltip-classes {
- /* 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: 1006;
- font-weight: $tooltip-font-weight;
- font-size: $tooltip-font-size;
- line-height: $tooltip-line-height;
- padding: $tooltip-padding;
- max-width: $tooltip-max-width;
- #{$default-float}: 50%;
- width: 100%;
- color: $tooltip-font-color;
- background: $tooltip-bg;
- &>.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);
- pointer-events: none;
- &.rtl {
- left: auto;
- #{$opposite-direction}: $tooltip-pip-size;
- }
- }
- &.radius {
- @include radius($tooltip-radius);
- }
- &.round {
- @include radius($tooltip-rounded);
- &>.nub {
- left: 2rem;
- }
- }
- &.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;
- }
- }
- }
- }
- }
|