| /** |
| * The backgound color for tooltips. |
| * |
| * @type color |
| * @group tooltip |
| */ |
| $v-tooltip-background-color: rgba(if(is-dark-color($v-background-color), scale-color($v-background-color, $lightness: 80%), scale-color($v-background-color, $lightness: -80%)), .9) !default; |
| |
| /** |
| * The font color for tooltips. |
| * |
| * @type color |
| * @group tooltip |
| */ |
| $v-tooltip-font-color: valo-font-color(opacify($v-tooltip-background-color, 1), 1) !default; |
| |
| /** |
| * The font size for tooltips. |
| * |
| * @type size |
| * @group tooltip |
| */ |
| $v-tooltip-font-size: max(12px, round($v-font-size * 0.86)) !default; |
| |
| /** |
| * The CSS box shadow for tooltips. |
| * |
| * @type list |
| * @group tooltip |
| */ |
| $v-tooltip-box-shadow: 0 2px 12px rgba(#000, .2) !default; |
| |
| /** |
| * The vertical padding for tooltips. |
| * |
| * @type size |
| * @group tooltip |
| */ |
| $v-tooltip-padding-vertical: round($v-unit-size/8) !default; |
| |
| /** |
| * The horizontal padding for tooltips. |
| * |
| * @type size |
| * @group tooltip |
| */ |
| $v-tooltip-padding-horizontal: round($v-unit-size/4) !default; |
| |
| /** |
| * The backgound color for error tooltips. |
| * |
| * @type color |
| * @group tooltip |
| */ |
| $v-tooltip-error-message-background-color: #fff !default; |
| |
| /** |
| * The font color for error tooltips. |
| * |
| * @type color |
| * @group tooltip |
| */ |
| $v-tooltip-error-message-font-color: $v-error-indicator-color !default; |
| |
| /** |
| * The corner radius for tooltips. |
| * |
| * @type size |
| * @group tooltip |
| */ |
| $v-tooltip-border-radius: $v-border-radius - 1px !default; |
| |
| |
| /** |
| * Outputs the selectors and styles for tooltip elements. |
| * |
| * @group tooltip |
| */ |
| @mixin valo-tooltip { |
| .v-tooltip { |
| @include valo-tooltip-style; |
| |
| div[style*="width"] { |
| width: auto !important; |
| } |
| |
| .v-errormessage { |
| background-color: opacify($v-tooltip-error-message-background-color, 1); |
| background-color: $v-tooltip-error-message-background-color; |
| color: $v-tooltip-error-message-font-color; |
| margin: -$v-tooltip-padding-vertical #{-$v-tooltip-padding-horizontal}; |
| padding: $v-tooltip-padding-vertical $v-tooltip-padding-horizontal; |
| max-height: 10em; |
| overflow: auto; |
| font-weight: $v-font-weight + 100; |
| |
| h2:only-child { |
| font: inherit; |
| line-height: inherit; |
| } |
| } |
| |
| .v-tooltip-text { |
| max-height: 10em; |
| overflow: auto; |
| margin-top: $v-tooltip-padding-vertical * 2; |
| } |
| |
| .v-errormessage[aria-hidden="true"] + .v-tooltip-text { |
| margin-top: 0; |
| } |
| |
| h1, |
| h2, |
| h3, |
| h4 { |
| color: inherit; |
| } |
| } |
| } |
| |
| /** |
| * Outputs the main styles for tooltip elements. |
| * |
| * @group tooltip |
| */ |
| @mixin valo-tooltip-style { |
| background-color: opacify($v-tooltip-background-color, 1); // For IE8 |
| background-color: $v-tooltip-background-color; |
| @include box-shadow($v-tooltip-box-shadow); |
| color: $v-tooltip-font-color; |
| padding: $v-tooltip-padding-vertical $v-tooltip-padding-horizontal; |
| border-radius: $v-tooltip-border-radius; |
| max-width: 35em; |
| overflow: hidden !important; |
| font-size: $v-tooltip-font-size; |
| } |