0
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-29 21:52:22 +01:00

refactor tooltip+popover CSS to decrease chaining+nesting

This commit is contained in:
Chris Rebert 2014-12-19 19:10:10 -08:00
parent 05d1877985
commit a0edcc9225
2 changed files with 103 additions and 110 deletions

View File

@ -24,13 +24,13 @@
border: 1px solid $popover-border-color;
@include border-radius($border-radius-lg);
@include box-shadow(0 5px 10px rgba(0,0,0,.2));
}
// Offset the popover to account for the popover arrow
&.popover-top { margin-top: -$popover-arrow-width; }
&.popover-right { margin-left: $popover-arrow-width; }
&.popover-bottom { margin-top: $popover-arrow-width; }
&.popover-left { margin-left: -$popover-arrow-width; }
}
.popover-top { margin-top: -$popover-arrow-width; }
.popover-right { margin-left: $popover-arrow-width; }
.popover-bottom { margin-top: $popover-arrow-width; }
.popover-left { margin-left: -$popover-arrow-width; }
.popover-title {
padding: 8px 14px;
@ -68,8 +68,7 @@
border-width: $popover-arrow-width;
}
.popover {
&.popover-top > .popover-arrow {
.popover-top > .popover-arrow {
bottom: -$popover-arrow-outer-width;
left: 50%;
margin-left: -$popover-arrow-outer-width;
@ -83,7 +82,7 @@
border-bottom-width: 0;
}
}
&.popover-right > .popover-arrow {
.popover-right > .popover-arrow {
top: 50%;
left: -$popover-arrow-outer-width;
margin-top: -$popover-arrow-outer-width;
@ -97,7 +96,7 @@
border-left-width: 0;
}
}
&.popover-bottom > .popover-arrow {
.popover-bottom > .popover-arrow {
top: -$popover-arrow-outer-width;
left: 50%;
margin-left: -$popover-arrow-outer-width;
@ -112,7 +111,7 @@
}
}
&.popover-left > .popover-arrow {
.popover-left > .popover-arrow {
top: 50%;
right: -$popover-arrow-outer-width;
margin-top: -$popover-arrow-outer-width;
@ -126,4 +125,3 @@
border-left-color: $popover-arrow-color;
}
}
}

View File

@ -17,27 +17,24 @@
opacity: 0;
&.in { opacity: $tooltip-opacity; }
}
&.tooltip-top {
.tooltip-top {
padding: $tooltip-arrow-width 0;
margin-top: -3px;
}
&.tooltip-right {
.tooltip-right {
padding: 0 $tooltip-arrow-width;
margin-left: 3px;
}
&.tooltip-bottom {
.tooltip-bottom {
padding: $tooltip-arrow-width 0;
margin-top: 3px;
}
&.tooltip-left {
.tooltip-left {
padding: 0 $tooltip-arrow-width;
margin-left: -3px;
}
}
// Wrapper for the tooltip content
.tooltip-inner {
@ -58,33 +55,31 @@
border-color: transparent;
border-style: solid;
}
.tooltip {
&.tooltip-top .tooltip-arrow {
.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 {
.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 {
.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 {
.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;
}
}