diff options
| -rw-r--r-- | scss/_popover.scss | 66 | ||||
| -rw-r--r-- | scss/_tooltip.scss | 29 | ||||
| -rw-r--r-- | scss/_variables.scss | 8 |
3 files changed, 50 insertions, 53 deletions
diff --git a/scss/_popover.scss b/scss/_popover.scss index 450376752b..00195323fe 100644 --- a/scss/_popover.scss +++ b/scss/_popover.scss @@ -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; } } diff --git a/scss/_tooltip.scss b/scss/_tooltip.scss index b03139c911..62d3e8a980 100644 --- a/scss/_tooltip.scss +++ b/scss/_tooltip.scss @@ -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; } } diff --git a/scss/_variables.scss b/scss/_variables.scss index be3dd69b5f..f44d975da6 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -682,8 +682,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; @@ -704,8 +704,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; |