mirror of https://github.com/juliancwirko/abc.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
142 lines
3.7 KiB
142 lines
3.7 KiB
// 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; |
|
} |
|
|
|
} |
|
} |
|
|
|
} |
|
}
|
|
|