mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-20 20:31:26 +02:00
Code Issues Releases Wiki Activity

refactor tooltip+popover CSS to decrease chaining+nesting

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

91
scss/_tooltip.scss
View File

@@ -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;
}