diff options
author | Jan Stevens <jan@playpass.be> | 2015-08-19 22:34:56 +0300 |
---|---|---|
committer | Jan Stevens <jan@playpass.be> | 2015-08-19 22:34:56 +0300 |
commit | 7397065e0daf73ac84e0846b0278736163b147a2 (patch) | |
tree | e8d2f8d4fabd6c08ffce6e71663289d8aec925b4 /assets/stylesheets/bootstrap/_tooltip.scss | |
parent | 2bab961e660b59462fa05868facb1e7cf298ffe9 (diff) |
New assets update for bootstrap 4
Diffstat (limited to 'assets/stylesheets/bootstrap/_tooltip.scss')
-rw-r--r-- | assets/stylesheets/bootstrap/_tooltip.scss | 130 |
1 files changed, 57 insertions, 73 deletions
diff --git a/assets/stylesheets/bootstrap/_tooltip.scss b/assets/stylesheets/bootstrap/_tooltip.scss index f0c1658..941579e 100644 --- a/assets/stylesheets/bootstrap/_tooltip.scss +++ b/assets/stylesheets/bootstrap/_tooltip.scss @@ -1,8 +1,3 @@ -// -// Tooltips -// -------------------------------------------------- - - // Base class .tooltip { position: absolute; @@ -10,16 +5,64 @@ display: block; // 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; - font-size: $font-size-small; + @include reset-text(); + font-size: $font-size-sm; + opacity: 0; + + &.in { opacity: $tooltip-opacity; } + + &.tooltip-top, + &.bs-tether-element-attached-bottom { + padding: $tooltip-arrow-width 0; + margin-top: -3px; + + .tooltip-arrow { + bottom: 0; + left: 50%; + margin-left: -$tooltip-arrow-width; + border-width: $tooltip-arrow-width $tooltip-arrow-width 0; + border-top-color: $tooltip-arrow-color; + } + } + &.tooltip-right, + &.bs-tether-element-attached-left { + padding: 0 $tooltip-arrow-width; + margin-left: 3px; - @include opacity(0); + .tooltip-arrow { + top: 50%; + left: 0; + margin-top: -$tooltip-arrow-width; + border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0; + border-right-color: $tooltip-arrow-color; + } + } + &.tooltip-bottom, + &.bs-tether-element-attached-top { + padding: $tooltip-arrow-width 0; + margin-top: 3px; - &.in { @include opacity($tooltip-opacity); } - &.top { margin-top: -3px; padding: $tooltip-arrow-width 0; } - &.right { margin-left: 3px; padding: 0 $tooltip-arrow-width; } - &.bottom { margin-top: 3px; padding: $tooltip-arrow-width 0; } - &.left { margin-left: -3px; padding: 0 $tooltip-arrow-width; } + .tooltip-arrow { + top: 0; + left: 50%; + margin-left: -$tooltip-arrow-width; + border-width: 0 $tooltip-arrow-width $tooltip-arrow-width; + border-bottom-color: $tooltip-arrow-color; + } + } + &.tooltip-left, + &.bs-tether-element-attached-right { + padding: 0 $tooltip-arrow-width; + margin-left: -3px; + + .tooltip-arrow { + top: 50%; + right: 0; + margin-top: -$tooltip-arrow-width; + border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width; + border-left-color: $tooltip-arrow-color; + } + } } // Wrapper for the tooltip content @@ -29,7 +72,7 @@ color: $tooltip-color; text-align: center; background-color: $tooltip-bg; - border-radius: $border-radius-base; + @include border-radius($border-radius); } // Arrows @@ -40,62 +83,3 @@ border-color: transparent; border-style: solid; } -// Note: Deprecated .top-left, .top-right, .bottom-left, and .bottom-right as of v3.3.1 -.tooltip { - &.top .tooltip-arrow { - bottom: 0; - left: 50%; - margin-left: -$tooltip-arrow-width; - border-width: $tooltip-arrow-width $tooltip-arrow-width 0; - border-top-color: $tooltip-arrow-color; - } - &.top-left .tooltip-arrow { - bottom: 0; - right: $tooltip-arrow-width; - margin-bottom: -$tooltip-arrow-width; - border-width: $tooltip-arrow-width $tooltip-arrow-width 0; - border-top-color: $tooltip-arrow-color; - } - &.top-right .tooltip-arrow { - bottom: 0; - left: $tooltip-arrow-width; - margin-bottom: -$tooltip-arrow-width; - border-width: $tooltip-arrow-width $tooltip-arrow-width 0; - border-top-color: $tooltip-arrow-color; - } - &.right .tooltip-arrow { - top: 50%; - left: 0; - margin-top: -$tooltip-arrow-width; - border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0; - border-right-color: $tooltip-arrow-color; - } - &.left .tooltip-arrow { - top: 50%; - right: 0; - margin-top: -$tooltip-arrow-width; - border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width; - border-left-color: $tooltip-arrow-color; - } - &.bottom .tooltip-arrow { - top: 0; - left: 50%; - margin-left: -$tooltip-arrow-width; - border-width: 0 $tooltip-arrow-width $tooltip-arrow-width; - border-bottom-color: $tooltip-arrow-color; - } - &.bottom-left .tooltip-arrow { - top: 0; - right: $tooltip-arrow-width; - margin-top: -$tooltip-arrow-width; - border-width: 0 $tooltip-arrow-width $tooltip-arrow-width; - border-bottom-color: $tooltip-arrow-color; - } - &.bottom-right .tooltip-arrow { - top: 0; - left: $tooltip-arrow-width; - margin-top: -$tooltip-arrow-width; - border-width: 0 $tooltip-arrow-width $tooltip-arrow-width; - border-bottom-color: $tooltip-arrow-color; - } -} |