diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2023-01-24 12:33:51 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2023-01-24 12:33:51 +0000 |
commit | 3ea39841c8049525e31e9f4d6300f0c60cdb42de (patch) | |
tree | 855de60a8872eafb5911acd303aedcdbfe713a73 /scss/_tooltip.scss | |
parent | Inital commit. (diff) | |
download | bootstrap-html-3ea39841c8049525e31e9f4d6300f0c60cdb42de.tar.xz bootstrap-html-3ea39841c8049525e31e9f4d6300f0c60cdb42de.zip |
Adding upstream version 5.2.3+dfsg.upstream/5.2.3+dfsg
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to '')
-rw-r--r-- | scss/_tooltip.scss | 120 |
1 files changed, 120 insertions, 0 deletions
diff --git a/scss/_tooltip.scss b/scss/_tooltip.scss new file mode 100644 index 0000000..7da3df3 --- /dev/null +++ b/scss/_tooltip.scss @@ -0,0 +1,120 @@ +// Base class +.tooltip { + // scss-docs-start tooltip-css-vars + --#{$prefix}tooltip-zindex: #{$zindex-tooltip}; + --#{$prefix}tooltip-max-width: #{$tooltip-max-width}; + --#{$prefix}tooltip-padding-x: #{$tooltip-padding-x}; + --#{$prefix}tooltip-padding-y: #{$tooltip-padding-y}; + --#{$prefix}tooltip-margin: #{$tooltip-margin}; + @include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size); + --#{$prefix}tooltip-color: #{$tooltip-color}; + --#{$prefix}tooltip-bg: #{$tooltip-bg}; + --#{$prefix}tooltip-border-radius: #{$tooltip-border-radius}; + --#{$prefix}tooltip-opacity: #{$tooltip-opacity}; + --#{$prefix}tooltip-arrow-width: #{$tooltip-arrow-width}; + --#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height}; + // scss-docs-end tooltip-css-vars + + z-index: var(--#{$prefix}tooltip-zindex); + display: block; + padding: var(--#{$prefix}tooltip-arrow-height); + margin: var(--#{$prefix}tooltip-margin); + @include deprecate("`$tooltip-margin`", "v5", "v5.x", true); + // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element. + // So reset our font and text properties to avoid inheriting weird values. + @include reset-text(); + @include font-size(var(--#{$prefix}tooltip-font-size)); + // Allow breaking very long words so they don't overflow the tooltip's bounds + word-wrap: break-word; + opacity: 0; + + &.show { opacity: var(--#{$prefix}tooltip-opacity); } + + .tooltip-arrow { + display: block; + width: var(--#{$prefix}tooltip-arrow-width); + height: var(--#{$prefix}tooltip-arrow-height); + + &::before { + position: absolute; + content: ""; + border-color: transparent; + border-style: solid; + } + } +} + +.bs-tooltip-top .tooltip-arrow { + bottom: 0; + + &::before { + top: -1px; + border-width: var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list + border-top-color: var(--#{$prefix}tooltip-bg); + } +} + +/* rtl:begin:ignore */ +.bs-tooltip-end .tooltip-arrow { + left: 0; + width: var(--#{$prefix}tooltip-arrow-height); + height: var(--#{$prefix}tooltip-arrow-width); + + &::before { + right: -1px; + border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list + border-right-color: var(--#{$prefix}tooltip-bg); + } +} + +/* rtl:end:ignore */ + +.bs-tooltip-bottom .tooltip-arrow { + top: 0; + + &::before { + bottom: -1px; + border-width: 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list + border-bottom-color: var(--#{$prefix}tooltip-bg); + } +} + +/* rtl:begin:ignore */ +.bs-tooltip-start .tooltip-arrow { + right: 0; + width: var(--#{$prefix}tooltip-arrow-height); + height: var(--#{$prefix}tooltip-arrow-width); + + &::before { + left: -1px; + border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list + border-left-color: var(--#{$prefix}tooltip-bg); + } +} + +/* rtl:end:ignore */ + +.bs-tooltip-auto { + &[data-popper-placement^="top"] { + @extend .bs-tooltip-top; + } + &[data-popper-placement^="right"] { + @extend .bs-tooltip-end; + } + &[data-popper-placement^="bottom"] { + @extend .bs-tooltip-bottom; + } + &[data-popper-placement^="left"] { + @extend .bs-tooltip-start; + } +} + +// Wrapper for the tooltip content +.tooltip-inner { + max-width: var(--#{$prefix}tooltip-max-width); + padding: var(--#{$prefix}tooltip-padding-y) var(--#{$prefix}tooltip-padding-x); + color: var(--#{$prefix}tooltip-color); + text-align: center; + background-color: var(--#{$prefix}tooltip-bg); + @include border-radius(var(--#{$prefix}tooltip-border-radius)); +} |