root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 11 Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

122
scss/_popover.scss
View File

@ -24,14 +24,14 @@
border: 1px solid $popover-border-color; border: 1px solid $popover-border-color;
@include border-radius($border-radius-lg); @include border-radius($border-radius-lg);
@include box-shadow(0 5px 10px rgba(0,0,0,.2)); @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; }
} }
// 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-title { .popover-title {
padding: 8px 14px; padding: 8px 14px;
margin: 0; // reset heading margin margin: 0; // reset heading margin
@ -68,62 +68,60 @@
border-width: $popover-arrow-width; border-width: $popover-arrow-width;
} }
.popover { .popover-top > .popover-arrow {
&.popover-top > .popover-arrow { bottom: -$popover-arrow-outer-width;
bottom: -$popover-arrow-outer-width; left: 50%;
left: 50%; margin-left: -$popover-arrow-outer-width;
margin-left: -$popover-arrow-outer-width; border-top-color: $popover-arrow-outer-color;
border-top-color: $popover-arrow-outer-color; border-bottom-width: 0;
&:after {
bottom: 1px;
margin-left: -$popover-arrow-width;
content: "";
border-top-color: $popover-arrow-color;
border-bottom-width: 0; border-bottom-width: 0;
&:after { }
bottom: 1px; }
margin-left: -$popover-arrow-width; .popover-right > .popover-arrow {
content: ""; top: 50%;
border-top-color: $popover-arrow-color; left: -$popover-arrow-outer-width;
border-bottom-width: 0; margin-top: -$popover-arrow-outer-width;
} border-right-color: $popover-arrow-outer-color;
} border-left-width: 0;
&.popover-right > .popover-arrow { &:after {
top: 50%; bottom: -$popover-arrow-width;
left: -$popover-arrow-outer-width; left: 1px;
margin-top: -$popover-arrow-outer-width; content: "";
border-right-color: $popover-arrow-outer-color; border-right-color: $popover-arrow-color;
border-left-width: 0; border-left-width: 0;
&:after { }
bottom: -$popover-arrow-width; }
left: 1px; .popover-bottom > .popover-arrow {
content: ""; top: -$popover-arrow-outer-width;
border-right-color: $popover-arrow-color; left: 50%;
border-left-width: 0; margin-left: -$popover-arrow-outer-width;
} border-top-width: 0;
} border-bottom-color: $popover-arrow-outer-color;
&.popover-bottom > .popover-arrow { &:after {
top: -$popover-arrow-outer-width; top: 1px;
left: 50%; margin-left: -$popover-arrow-width;
margin-left: -$popover-arrow-outer-width; content: "";
border-top-width: 0; border-top-width: 0;
border-bottom-color: $popover-arrow-outer-color; border-bottom-color: $popover-arrow-color;
&:after { }
top: 1px; }
margin-left: -$popover-arrow-width;
content: ""; .popover-left > .popover-arrow {
border-top-width: 0; top: 50%;
border-bottom-color: $popover-arrow-color; right: -$popover-arrow-outer-width;
} margin-top: -$popover-arrow-outer-width;
} border-right-width: 0;
border-left-color: $popover-arrow-outer-color;
&.popover-left > .popover-arrow { &:after {
top: 50%; right: 1px;
right: -$popover-arrow-outer-width; bottom: -$popover-arrow-width;
margin-top: -$popover-arrow-outer-width; content: "";
border-right-width: 0; border-right-width: 0;
border-left-color: $popover-arrow-outer-color; border-left-color: $popover-arrow-color;
&:after {
right: 1px;
bottom: -$popover-arrow-width;
content: "";
border-right-width: 0;
border-left-color: $popover-arrow-color;
}
} }
} }

91
scss/_tooltip.scss
View File

@ -17,26 +17,23 @@
opacity: 0; opacity: 0;
&.in { opacity: $tooltip-opacity; } &.in { opacity: $tooltip-opacity; }
}
&.tooltip-top { .tooltip-top {
padding: $tooltip-arrow-width 0; padding: $tooltip-arrow-width 0;
margin-top: -3px; margin-top: -3px;
} }
.tooltip-right {
&.tooltip-right { padding: 0 $tooltip-arrow-width;
padding: 0 $tooltip-arrow-width; margin-left: 3px;
margin-left: 3px; }
} .tooltip-bottom {
padding: $tooltip-arrow-width 0;
&.tooltip-bottom { margin-top: 3px;
padding: $tooltip-arrow-width 0; }
margin-top: 3px; .tooltip-left {
} padding: 0 $tooltip-arrow-width;
margin-left: -3px;
&.tooltip-left {
padding: 0 $tooltip-arrow-width;
margin-left: -3px;
}
} }
// Wrapper for the tooltip content // Wrapper for the tooltip content
@ -58,33 +55,31 @@
border-color: transparent; border-color: transparent;
border-style: solid; border-style: solid;
} }
.tooltip { .tooltip-top .tooltip-arrow {
&.tooltip-top .tooltip-arrow { bottom: 0;
bottom: 0; left: 50%;
left: 50%; margin-left: -$tooltip-arrow-width;
margin-left: -$tooltip-arrow-width; border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
border-width: $tooltip-arrow-width $tooltip-arrow-width 0; border-top-color: $tooltip-arrow-color;
border-top-color: $tooltip-arrow-color; }
} .tooltip-right .tooltip-arrow {
&.tooltip-right .tooltip-arrow { top: 50%;
top: 50%; left: 0;
left: 0; margin-top: -$tooltip-arrow-width;
margin-top: -$tooltip-arrow-width; border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0;
border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0; border-right-color: $tooltip-arrow-color;
border-right-color: $tooltip-arrow-color; }
} .tooltip-left .tooltip-arrow {
&.tooltip-left .tooltip-arrow { top: 50%;
top: 50%; right: 0;
right: 0; margin-top: -$tooltip-arrow-width;
margin-top: -$tooltip-arrow-width; border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width;
border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width; border-left-color: $tooltip-arrow-color;
border-left-color: $tooltip-arrow-color; }
} .tooltip-bottom .tooltip-arrow {
&.tooltip-bottom .tooltip-arrow { top: 0;
top: 0; left: 50%;
left: 50%; margin-left: -$tooltip-arrow-width;
margin-left: -$tooltip-arrow-width; border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
border-width: 0 $tooltip-arrow-width $tooltip-arrow-width; border-bottom-color: $tooltip-arrow-color;
border-bottom-color: $tooltip-arrow-color;
}
} }