123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144 |
- /**
- * 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;
- pre {
- margin: 0px;
- }
- }
-
- .v-errormessage[aria-hidden="true"] + .v-tooltip-text {
- margin-top: 0;
- }
-
- h1,
- h2,
- h3,
- h4 {
- color: inherit;
- }
-
- pre.v-tooltip-pre {
- font: inherit;
- white-space: pre-wrap;
- }
- }
- }
-
- /**
- * Outputs the main styles for tooltip elements.
- *
- * @group tooltip
- */
- @mixin valo-tooltip-style {
- 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;
- }
|