diff options
author | Gleb Mazovetskiy <glex.spb@gmail.com> | 2016-10-22 09:20:53 +0300 |
---|---|---|
committer | Gleb Mazovetskiy <glex.spb@gmail.com> | 2016-10-22 09:20:53 +0300 |
commit | afd171105704c314bf699810875c72a612988a72 (patch) | |
tree | c6045a971c84ef6eadfe7d5b90044bd33f2b7cbe /assets/stylesheets/bootstrap/_popover.scss | |
parent | d527714693edb72688eb8c239228b2db66e56ded (diff) |
rake update[v4.0.0-alpha.5]
Diffstat (limited to 'assets/stylesheets/bootstrap/_popover.scss')
-rw-r--r-- | assets/stylesheets/bootstrap/_popover.scss | 124 |
1 files changed, 74 insertions, 50 deletions
diff --git a/assets/stylesheets/bootstrap/_popover.scss b/assets/stylesheets/bootstrap/_popover.scss index 6e6fe3c..86b489a 100644 --- a/assets/stylesheets/bootstrap/_popover.scss +++ b/assets/stylesheets/bootstrap/_popover.scss @@ -25,19 +25,22 @@ &.bs-tether-element-attached-bottom { margin-top: -$popover-arrow-width; - .popover-arrow { - bottom: -$popover-arrow-outer-width; + &::before, + &::after { left: 50%; + border-bottom-width: 0; + } + + &::before { + bottom: -$popover-arrow-outer-width; margin-left: -$popover-arrow-outer-width; 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; - } + } + + &::after { + bottom: -($popover-arrow-outer-width - 1); + margin-left: -$popover-arrow-width; + border-top-color: $popover-arrow-color; } } @@ -45,19 +48,22 @@ &.bs-tether-element-attached-left { margin-left: $popover-arrow-width; - .popover-arrow { + &::before, + &::after { top: 50%; + border-left-width: 0; + } + + &::before { left: -$popover-arrow-outer-width; 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; - } + } + + &::after { + left: -($popover-arrow-outer-width - 1); + margin-top: -($popover-arrow-outer-width - 1); + border-right-color: $popover-arrow-color; } } @@ -65,19 +71,34 @@ &.bs-tether-element-attached-top { margin-top: $popover-arrow-width; - .popover-arrow { - top: -$popover-arrow-outer-width; + &::before, + &::after { left: 50%; - margin-left: -$popover-arrow-outer-width; border-top-width: 0; + } + + &::before { + top: -$popover-arrow-outer-width; + margin-left: -$popover-arrow-outer-width; border-bottom-color: $popover-arrow-outer-color; - &::after { - top: 1px; - margin-left: -$popover-arrow-width; - content: ""; - border-top-width: 0; - border-bottom-color: $popover-arrow-color; - } + } + + &::after { + top: -($popover-arrow-outer-width - 1); + margin-left: -$popover-arrow-width; + border-bottom-color: $popover-title-bg; + } + + // This will remove the popover-title's border just below the arrow + .popover-title::before { + position: absolute; + top: 0; + left: 50%; + display: block; + width: 20px; + margin-left: -10px; + content: ""; + border-bottom: 1px solid $popover-title-bg; } } @@ -85,19 +106,22 @@ &.bs-tether-element-attached-right { margin-left: -$popover-arrow-width; - .popover-arrow { + &::before, + &::after { top: 50%; + border-right-width: 0; + } + + &::before { right: -$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-left-color: $popover-arrow-color; - } + } + + &::after { + right: -($popover-arrow-outer-width - 1); + margin-top: -($popover-arrow-outer-width - 1); + border-left-color: $popover-arrow-color; } } } @@ -127,21 +151,21 @@ // // .popover-arrow is outer, .popover-arrow::after is inner -.popover-arrow { - &, - &::after { - position: absolute; - display: block; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; - } +.popover::before, +.popover::after { + position: absolute; + display: block; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; } -.popover-arrow { + +.popover::before { + content: ""; border-width: $popover-arrow-outer-width; } -.popover-arrow::after { +.popover::after { content: ""; border-width: $popover-arrow-width; } |