diff options
| author | Bernardo Gurgel Filho <bernardogfilho@gmail.com> | 2015-08-23 07:59:48 +0300 |
|---|---|---|
| committer | Bernardo Gurgel Filho <bernardogfilho@gmail.com> | 2015-08-26 23:20:01 +0300 |
| commit | 2ae5fdf9ddbff98c55e47b81d7150b8d960ad342 (patch) | |
| tree | 7b4a3a9654bbee6f2c68ba30ed8d94b1fb411c47 /scss/_tooltip.scss | |
| parent | 7ff9b1979c56f8da5eab77c755778e8f9c323526 (diff) | |
Convert tooltip's arrows to generated CSS content via :before
Diffstat (limited to 'scss/_tooltip.scss')
| -rw-r--r-- | scss/_tooltip.scss | 27 |
1 files changed, 15 insertions, 12 deletions
diff --git a/scss/_tooltip.scss b/scss/_tooltip.scss index 941579ec97..23a18e7dee 100644 --- a/scss/_tooltip.scss +++ b/scss/_tooltip.scss @@ -16,10 +16,11 @@ padding: $tooltip-arrow-width 0; margin-top: -3px; - .tooltip-arrow { + .tooltip-inner:before { bottom: 0; left: 50%; margin-left: -$tooltip-arrow-width; + content: ""; border-width: $tooltip-arrow-width $tooltip-arrow-width 0; border-top-color: $tooltip-arrow-color; } @@ -29,10 +30,11 @@ padding: 0 $tooltip-arrow-width; margin-left: 3px; - .tooltip-arrow { + .tooltip-inner:before { top: 50%; left: 0; margin-top: -$tooltip-arrow-width; + content: ""; border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0; border-right-color: $tooltip-arrow-color; } @@ -42,10 +44,11 @@ padding: $tooltip-arrow-width 0; margin-top: 3px; - .tooltip-arrow { + .tooltip-inner:before { top: 0; left: 50%; margin-left: -$tooltip-arrow-width; + content: ""; border-width: 0 $tooltip-arrow-width $tooltip-arrow-width; border-bottom-color: $tooltip-arrow-color; } @@ -55,10 +58,11 @@ padding: 0 $tooltip-arrow-width; margin-left: -3px; - .tooltip-arrow { + .tooltip-inner:before { top: 50%; right: 0; margin-top: -$tooltip-arrow-width; + content: ""; border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width; border-left-color: $tooltip-arrow-color; } @@ -73,13 +77,12 @@ text-align: center; background-color: $tooltip-bg; @include border-radius($border-radius); -} -// Arrows -.tooltip-arrow { - position: absolute; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; + &:before { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + } } |