diff options
author | Mark Otto <markdotto@gmail.com> | 2017-12-27 08:58:57 +0300 |
---|---|---|
committer | Mark Otto <markdotto@gmail.com> | 2017-12-27 08:58:57 +0300 |
commit | 28fd9deb549af2943500edbb527b22fe6936c4d2 (patch) | |
tree | 9f8359f18b07af9dc7869fd07328050e2019a045 /scss | |
parent | fa2cc20e920a0f8c34e4ebe26c561603187a4656 (diff) |
un-nest and un-chain popover classes
Diffstat (limited to 'scss')
-rw-r--r-- | scss/_popover.scss | 213 |
1 files changed, 106 insertions, 107 deletions
diff --git a/scss/_popover.scss b/scss/_popover.scss index 00195323fe..6682f141af 100644 --- a/scss/_popover.scss +++ b/scss/_popover.scss @@ -27,141 +27,140 @@ width: $popover-arrow-width; height: $popover-arrow-height; margin: 0 $border-radius-lg; + + &::before, + &::after { + position: absolute; + display: block; + content: ""; + border-color: transparent; + border-style: solid; + } + } +} + +.bs-popover-top { + margin-bottom: $popover-arrow-height; + + .arrow { + bottom: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1); } .arrow::before, .arrow::after { - position: absolute; - display: block; - content: ""; - border-color: transparent; - border-style: solid; + border-width: $popover-arrow-height $popover-arrow-width/2 0; } - // Popover directions - - &.bs-popover-top { - margin-bottom: $popover-arrow-height; - - .arrow { - bottom: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1); - } + .arrow::before { + bottom: 0; + border-top-color: $popover-arrow-outer-color; + } - .arrow::before, - .arrow::after { - border-width: $popover-arrow-height $popover-arrow-width/2 0; - } + .arrow::after { + bottom: $popover-border-width; + border-top-color: $popover-arrow-color; + } +} - .arrow::before { - bottom: 0; - border-top-color: $popover-arrow-outer-color; - } +.bs-popover-right { + margin-left: $popover-arrow-height; - .arrow::after { - bottom: $popover-border-width; - border-top-color: $popover-arrow-color; - } + .arrow { + 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 } - &.bs-popover-right { - margin-left: $popover-arrow-height; + .arrow::before, + .arrow::after { + border-width: $popover-arrow-width/2 $popover-arrow-height $popover-arrow-width/2 0; + } - .arrow { - 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 { + left: 0; + border-right-color: $popover-arrow-outer-color; + } - .arrow::before, - .arrow::after { - border-width: $popover-arrow-width/2 $popover-arrow-height $popover-arrow-width/2 0; - } + .arrow::after { + left: $popover-border-width; + border-right-color: $popover-arrow-color; + } +} - .arrow::before { - left: 0; - border-right-color: $popover-arrow-outer-color; - } +.bs-popover-bottom { + margin-top: $popover-arrow-height; - .arrow::after { - left: $popover-border-width; - border-right-color: $popover-arrow-color; - } + .arrow { + top: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1); } - &.bs-popover-bottom { - margin-top: $popover-arrow-height; + .arrow::before, + .arrow::after { + border-width: 0 $popover-arrow-width/2 $popover-arrow-height $popover-arrow-width/2; + } - .arrow { - top: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1); - } + .arrow::before { + top: 0; + border-bottom-color: $popover-arrow-outer-color; + } - .arrow::before, - .arrow::after { - border-width: 0 $popover-arrow-width/2 $popover-arrow-height $popover-arrow-width/2; - } + .arrow::after { + top: $popover-border-width; + border-bottom-color: $popover-arrow-color; + } - .arrow::before { - top: 0; - border-bottom-color: $popover-arrow-outer-color; - } + // This will remove the popover-header's border just below the arrow + .popover-header::before { + position: absolute; + top: 0; + left: 50%; + display: block; + width: $popover-arrow-width; + margin-left: -$popover-arrow-width/2; + content: ""; + border-bottom: $popover-border-width solid $popover-header-bg; + } +} - .arrow::after { - top: $popover-border-width; - border-bottom-color: $popover-arrow-color; - } +.bs-popover-left { + margin-right: $popover-arrow-height; - // This will remove the popover-header's border just below the arrow - .popover-header::before { - position: absolute; - top: 0; - left: 50%; - display: block; - width: $popover-arrow-width; - margin-left: -$popover-arrow-width/2; - content: ""; - border-bottom: $popover-border-width solid $popover-header-bg; - } + .arrow { + 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 } - &.bs-popover-left { - margin-right: $popover-arrow-height; - - .arrow { - 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 { + border-width: $popover-arrow-width/2 0 $popover-arrow-width/2 $popover-arrow-height; + } - .arrow::before, - .arrow::after { - border-width: $popover-arrow-width/2 0 $popover-arrow-width/2 $popover-arrow-height; - } + .arrow::before { + right: 0; + border-left-color: $popover-arrow-outer-color; + } - .arrow::before { - right: 0; - border-left-color: $popover-arrow-outer-color; - } + .arrow::after { + right: $popover-border-width; + border-left-color: $popover-arrow-color; + } +} - .arrow::after { - right: $popover-border-width; - border-left-color: $popover-arrow-color; - } +.bs-popover-auto { + &[x-placement^="top"] { + @extend .bs-popover-top; } - &.bs-popover-auto { - &[x-placement^="top"] { - @extend .bs-popover-top; - } - &[x-placement^="right"] { - @extend .bs-popover-right; - } - &[x-placement^="bottom"] { - @extend .bs-popover-bottom; - } - &[x-placement^="left"] { - @extend .bs-popover-left; - } + &[x-placement^="right"] { + @extend .bs-popover-right; + } + &[x-placement^="bottom"] { + @extend .bs-popover-bottom; + } + &[x-placement^="left"] { + @extend .bs-popover-left; } } |