diff options
| author | Chris Rebert <[email protected]> | 2014-12-19 19:10:10 -0800 |
|---|---|---|
| committer | Chris Rebert <[email protected]> | 2014-12-29 12:37:11 -0800 |
| commit | a0edcc9225b3f83d172b39070892fc96476c1b0c (patch) | |
| tree | 53535322d1729ad74434987d69ad7fc091466e7a /scss/_tooltip.scss | |
| parent | 05d1877985de2dcd0538f08d7924518eba3dfc22 (diff) | |
| download | bootstrap-a0edcc9225b3f83d172b39070892fc96476c1b0c.tar.xz bootstrap-a0edcc9225b3f83d172b39070892fc96476c1b0c.zip | |
refactor tooltip+popover CSS to decrease chaining+nesting
Diffstat (limited to 'scss/_tooltip.scss')
| -rw-r--r-- | scss/_tooltip.scss | 91 |
1 files changed, 43 insertions, 48 deletions
diff --git a/scss/_tooltip.scss b/scss/_tooltip.scss index 0d5658d9f..49af2b288 100644 --- a/scss/_tooltip.scss +++ b/scss/_tooltip.scss @@ -17,26 +17,23 @@ opacity: 0; &.in { opacity: $tooltip-opacity; } +} - &.tooltip-top { - padding: $tooltip-arrow-width 0; - margin-top: -3px; - } - - &.tooltip-right { - padding: 0 $tooltip-arrow-width; - margin-left: 3px; - } - - &.tooltip-bottom { - padding: $tooltip-arrow-width 0; - margin-top: 3px; - } - - &.tooltip-left { - padding: 0 $tooltip-arrow-width; - margin-left: -3px; - } +.tooltip-top { + padding: $tooltip-arrow-width 0; + margin-top: -3px; +} +.tooltip-right { + padding: 0 $tooltip-arrow-width; + margin-left: 3px; +} +.tooltip-bottom { + padding: $tooltip-arrow-width 0; + margin-top: 3px; +} +.tooltip-left { + padding: 0 $tooltip-arrow-width; + margin-left: -3px; } // Wrapper for the tooltip content @@ -58,33 +55,31 @@ border-color: transparent; border-style: solid; } -.tooltip { - &.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; - } - &.tooltip-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; - } - &.tooltip-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; - } - &.tooltip-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; - } +.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; +} +.tooltip-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; +} +.tooltip-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; +} +.tooltip-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; } |