Skip to content
GitLab
Commit 6cf71f29 authored by Mark Otto's avatar Mark Otto
Browse files

Merge branch 'fix-arrows' of https://github.com/simonihmig/bootstrap into simonihmig-fix-arrows

parents be6fbf53 9600ab10
6 merge requests!28721Hot test,!27561Adds font-weight-medium to font weight classes,!25494web pack,!25326Adjust examples,!23207#22402 : modal: new autofocus & keyboardBtnNav options,!17021v4
Hide whitespace changes
Inline Side-by-side
Showing
with 50 additions and 53 deletions
+50 -53
scss/_popover.scss
+ 30
- 36
View file @ 6cf71f29
......@@ -26,96 +26,88 @@
display: block;
width: $popover-arrow-width;
height: $popover-arrow-height;
margin: 0 $border-radius-lg;
}
.arrow::before,
.arrow::after {
position: absolute;
display: block;
content: "";
border-color: transparent;
border-style: solid;
}
.arrow::before {
content: "";
border-width: $popover-arrow-width;
}
.arrow::after {
content: "";
border-width: $popover-arrow-width;
}
// Popover directions
&.bs-popover-top {
margin-bottom: $popover-arrow-width;
margin-bottom: $popover-arrow-height;
.arrow {
bottom: 0;
bottom: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
}
.arrow::before,
.arrow::after {
border-bottom-width: 0;
border-width: $popover-arrow-height $popover-arrow-width/2 0;
}
.arrow::before {
bottom: -$popover-arrow-width;
margin-left: -$popover-arrow-width;
bottom: 0;
border-top-color: $popover-arrow-outer-color;
}
.arrow::after {
bottom: calc((#{$popover-arrow-width} - #{$popover-border-width}) * -1);
margin-left: -$popover-arrow-width;
bottom: $popover-border-width;
border-top-color: $popover-arrow-color;
}
}
&.bs-popover-right {
margin-left: $popover-arrow-width;
margin-left: $popover-arrow-height;
.arrow {
left: 0;
left: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
width: $popover-arrow-height;
height: $popover-arrow-width;
margin: $border-radius-lg 0; // make sure the arrow does not touch the popover's rounded corners
}
.arrow::before,
.arrow::after {
margin-top: -$popover-arrow-width;
border-left-width: 0;
border-width: $popover-arrow-width/2 $popover-arrow-height $popover-arrow-width/2 0;
}
.arrow::before {
left: -$popover-arrow-width;
left: 0;
border-right-color: $popover-arrow-outer-color;
}
.arrow::after {
left: calc((#{$popover-arrow-width} - #{$popover-border-width}) * -1);
left: $popover-border-width;
border-right-color: $popover-arrow-color;
}
}
&.bs-popover-bottom {
margin-top: $popover-arrow-width;
margin-top: $popover-arrow-height;
.arrow {
top: 0;
top: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
}
.arrow::before,
.arrow::after {
margin-left: -$popover-arrow-width;
border-top-width: 0;
border-width: 0 $popover-arrow-width/2 $popover-arrow-height $popover-arrow-width/2;
}
.arrow::before {
top: -$popover-arrow-width;
top: 0;
border-bottom-color: $popover-arrow-outer-color;
}
.arrow::after {
top: calc((#{$popover-arrow-width} - #{$popover-border-width}) * -1);
top: $popover-border-width;
border-bottom-color: $popover-arrow-color;
}
......@@ -125,33 +117,35 @@
top: 0;
left: 50%;
display: block;
width: 20px;
margin-left: -10px;
width: $popover-arrow-width;
margin-left: -$popover-arrow-width/2;
content: "";
border-bottom: $popover-border-width solid $popover-header-bg;
}
}
&.bs-popover-left {
margin-right: $popover-arrow-width;
margin-right: $popover-arrow-height;
.arrow {
right: 0;
right: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
width: $popover-arrow-height;
height: $popover-arrow-width;
margin: $border-radius-lg 0; // make sure the arrow does not touch the popover's rounded corners
}
.arrow::before,
.arrow::after {
margin-top: -$popover-arrow-width;
border-right-width: 0;
border-width: $popover-arrow-width/2 0 $popover-arrow-width/2 $popover-arrow-height;
}
.arrow::before {
right: -$popover-arrow-width;
right: 0;
border-left-color: $popover-arrow-outer-color;
}
.arrow::after {
right: calc((#{$popover-arrow-width} - #{$popover-border-width}) * -1);
right: $popover-border-width;
border-left-color: $popover-arrow-color;
}
}
......
scss/_tooltip.scss
+ 16
- 13
View file @ 6cf71f29
......@@ -28,55 +28,58 @@
}
&.bs-tooltip-top {
padding: $tooltip-arrow-width 0;
padding: $tooltip-arrow-height 0;
.arrow {
bottom: 0;
}
.arrow::before {
margin-left: -$tooltip-arrow-width;
top: 0;
content: "";
border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
border-width: $tooltip-arrow-height $tooltip-arrow-width/2 0;
border-top-color: $tooltip-arrow-color;
}
}
&.bs-tooltip-right {
padding: 0 $tooltip-arrow-width;
padding: 0 $tooltip-arrow-height;
.arrow {
left: 0;
width: $tooltip-arrow-height;
height: $tooltip-arrow-width;
}
.arrow::before {
margin-top: -$tooltip-arrow-width;
right: 0;
content: "";
border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0;
border-width: $tooltip-arrow-width/2 $tooltip-arrow-height $tooltip-arrow-width/2 0;
border-right-color: $tooltip-arrow-color;
}
}
&.bs-tooltip-bottom {
padding: $tooltip-arrow-width 0;
padding: $tooltip-arrow-height 0;
.arrow {
top: 0;
}
.arrow::before {
margin-left: -$tooltip-arrow-width;
bottom: 0;
content: "";
border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
border-width: 0 $tooltip-arrow-width/2 $tooltip-arrow-height;
border-bottom-color: $tooltip-arrow-color;
}
}
&.bs-tooltip-left {
padding: 0 $tooltip-arrow-width;
padding: 0 $tooltip-arrow-height;
.arrow {
right: 0;
width: $tooltip-arrow-height;
height: $tooltip-arrow-width;
}
.arrow::before {
right: 0;
margin-top: -($tooltip-arrow-width);
left: 0;
content: "";
border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width;
border-width: $tooltip-arrow-width/2 0 $tooltip-arrow-width/2 $tooltip-arrow-height;
border-left-color: $tooltip-arrow-color;
}
}
......
scss/_variables.scss
+ 4
- 4
View file @ 6cf71f29
......@@ -680,8 +680,8 @@ $tooltip-padding-y: .25rem !default;
$tooltip-padding-x: .5rem !default;
$tooltip-margin: 0 !default;
$tooltip-arrow-width: .4rem !default;
$tooltip-arrow-height: $tooltip-arrow-width !default;
$tooltip-arrow-width: .8rem !default;
$tooltip-arrow-height: .4rem !default;
$tooltip-arrow-color: $tooltip-bg !default;
......@@ -702,8 +702,8 @@ $popover-body-color: $body-color !default;
$popover-body-padding-y: $popover-header-padding-y !default;
$popover-body-padding-x: $popover-header-padding-x !default;
$popover-arrow-width: .8rem !default;
$popover-arrow-height: .4rem !default;
$popover-arrow-width: 1.6rem !default;
$popover-arrow-height: .8rem !default;
$popover-arrow-color: $popover-bg !default;
$popover-arrow-outer-color: fade-in($popover-border-color, .05) !default;
......
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