Skip to content
GitLab
Commit a0edcc92 authored by Chris Rebert's avatar Chris Rebert
Browse files

refactor tooltip+popover CSS to decrease chaining+nesting

parent 05d18779
Hide whitespace changes
Inline Side-by-side
Showing
with 96 additions and 103 deletions
+96 -103
scss/_popover.scss
+ 53
- 55
View file @ a0edcc92
...@@ -24,14 +24,14 @@ ...@@ -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 @@ ...@@ -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;
content: "";
border-top-color: $popover-arrow-color;
border-bottom-width: 0;
}
} }
&.popover-right > .popover-arrow { }
top: 50%; .popover-right > .popover-arrow {
left: -$popover-arrow-outer-width; top: 50%;
margin-top: -$popover-arrow-outer-width; left: -$popover-arrow-outer-width;
border-right-color: $popover-arrow-outer-color; margin-top: -$popover-arrow-outer-width;
border-right-color: $popover-arrow-outer-color;
border-left-width: 0;
&:after {
bottom: -$popover-arrow-width;
left: 1px;
content: "";
border-right-color: $popover-arrow-color;
border-left-width: 0; border-left-width: 0;
&:after {
bottom: -$popover-arrow-width;
left: 1px;
content: "";
border-right-color: $popover-arrow-color;
border-left-width: 0;
}
} }
&.popover-bottom > .popover-arrow { }
top: -$popover-arrow-outer-width; .popover-bottom > .popover-arrow {
left: 50%; top: -$popover-arrow-outer-width;
margin-left: -$popover-arrow-outer-width; left: 50%;
margin-left: -$popover-arrow-outer-width;
border-top-width: 0;
border-bottom-color: $popover-arrow-outer-color;
&:after {
top: 1px;
margin-left: -$popover-arrow-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: "";
border-top-width: 0;
border-bottom-color: $popover-arrow-color;
}
} }
}
&.popover-left > .popover-arrow { .popover-left > .popover-arrow {
top: 50%; top: 50%;
right: -$popover-arrow-outer-width; right: -$popover-arrow-outer-width;
margin-top: -$popover-arrow-outer-width; margin-top: -$popover-arrow-outer-width;
border-right-width: 0;
border-left-color: $popover-arrow-outer-color;
&:after {
right: 1px;
bottom: -$popover-arrow-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;
}
} }
} }
scss/_tooltip.scss
+ 43
- 48
View file @ a0edcc92
...@@ -17,26 +17,23 @@ ...@@ -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 @@ ...@@ -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;
}
} }
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment