mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-14 18:42:30 +03:00
Code Activity

Fix arrow for tooltip and popover

Browse Source
This commit is contained in:
Johann-S
2017-04-08 21:13:15 +02:00
parent b40b1bc396
commit d8996a7e0a
5 changed files with 73 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files
scss/_popover.scss
+26 -30
View File
@@ -21,69 +21,66 @@
// Popover directions
&.popover-top,
&.bs-tether-element-attached-bottom {
margin-top: -$popover-arrow-width;
&.bs-popover-top {
margin-bottom: $popover-arrow-width;
&::before,
&::after {
::before,
::after {
left: 50%;
border-bottom-width: 0;
}
&::before {
::before {
bottom: -$popover-arrow-outer-width;
margin-left: -$popover-arrow-outer-width;
border-top-color: $popover-arrow-outer-color;
}
&::after {
::after {
bottom: -($popover-arrow-outer-width - 1);
margin-left: -$popover-arrow-width;
border-top-color: $popover-arrow-color;
}
}
&.popover-right,
&.bs-tether-element-attached-left {
&.bs-popover-right {
margin-left: $popover-arrow-width;
&::before,
&::after {
::before,
::after {
top: 50%;
border-left-width: 0;
}
&::before {
::before {
left: -$popover-arrow-outer-width;
margin-top: -$popover-arrow-outer-width;
border-right-color: $popover-arrow-outer-color;
}
&::after {
::after {
left: -($popover-arrow-outer-width - 1);
margin-top: -($popover-arrow-outer-width - 1);
border-right-color: $popover-arrow-color;
}
}
&.popover-bottom,
&.bs-tether-element-attached-top {
&.bs-popover-bottom {
margin-top: $popover-arrow-width;
&::before,
&::after {
::before,
::after {
left: 50%;
border-top-width: 0;
}
&::before {
::before {
top: -$popover-arrow-outer-width;
margin-left: -$popover-arrow-outer-width;
border-bottom-color: $popover-arrow-outer-color;
}
&::after {
::after {
top: -($popover-arrow-outer-width - 1);
margin-left: -$popover-arrow-width;
border-bottom-color: $popover-arrow-color;
@@ -102,23 +99,22 @@
}
}
&.popover-left,
&.bs-tether-element-attached-right {
margin-left: -$popover-arrow-width;
&.bs-popover-left {
margin-right: $popover-arrow-width;
&::before,
&::after {
::before,
::after {
top: 50%;
border-right-width: 0;
}
&::before {
::before {
right: -$popover-arrow-outer-width;
margin-top: -$popover-arrow-outer-width;
border-left-color: $popover-arrow-outer-color;
}
&::after {
::after {
right: -($popover-arrow-outer-width - 1);
margin-top: -($popover-arrow-outer-width - 1);
border-left-color: $popover-arrow-color;
@@ -153,8 +149,8 @@
//
// .popover-arrow is outer, .popover-arrow::after is inner
.popover::before,
.popover::after {
.arrow::before,
.arrow::after {
position: absolute;
display: block;
width: 0;
@@ -163,11 +159,11 @@
border-style: solid;
}
.popover::before {
.arrow::before {
content: "";
border-width: $popover-arrow-outer-width;
}
.popover::after {
.arrow::after {
content: "";
border-width: $popover-arrow-width;
}
scss/_tooltip.scss
+9 -13
View File
@@ -13,12 +13,11 @@
&.show { opacity: $tooltip-opacity; }
&.tooltip-top,
&.bs-tether-element-attached-bottom {
&.bs-tooltip-top {
padding: $tooltip-arrow-width 0;
margin-top: -$tooltip-margin;
.tooltip-inner::before {
.arrow::before {
bottom: 0;
left: 50%;
margin-left: -$tooltip-arrow-width;
@@ -27,12 +26,11 @@
border-top-color: $tooltip-arrow-color;
}
}
&.tooltip-right,
&.bs-tether-element-attached-left {
&.bs-tooltip-right {
padding: 0 $tooltip-arrow-width;
margin-left: $tooltip-margin;
.tooltip-inner::before {
.arrow::before {
top: 50%;
left: 0;
margin-top: -$tooltip-arrow-width;
@@ -41,12 +39,11 @@
border-right-color: $tooltip-arrow-color;
}
}
&.tooltip-bottom,
&.bs-tether-element-attached-top {
&.bs-tooltip-bottom {
padding: $tooltip-arrow-width 0;
margin-top: $tooltip-margin;
.tooltip-inner::before {
.arrow::before {
top: 0;
left: 50%;
margin-left: -$tooltip-arrow-width;
@@ -55,12 +52,11 @@
border-bottom-color: $tooltip-arrow-color;
}
}
&.tooltip-left,
&.bs-tether-element-attached-right {
&.bs-tooltip-left {
padding: 0 $tooltip-arrow-width;
margin-left: -$tooltip-margin;
.tooltip-inner::before {
.arrow::before {
top: 50%;
right: 0;
margin-top: -$tooltip-arrow-width;
@@ -80,7 +76,7 @@
background-color: $tooltip-bg;
@include border-radius($border-radius);
&::before {
.arrow::before {
position: absolute;
width: 0;
height: 0;