diff options
author | Gleb Mazovetskiy <glex.spb@gmail.com> | 2017-05-29 16:41:20 +0300 |
---|---|---|
committer | Gleb Mazovetskiy <glex.spb@gmail.com> | 2017-05-29 16:41:20 +0300 |
commit | 096ade49a5ceff46c2db7f1b2aa5399853a2cb4a (patch) | |
tree | 7d11585f02203cde800143b4f2758105c29e34ac /assets/stylesheets/bootstrap/_popover.scss | |
parent | 9b92e0095994e5f26be8ce4a910e3701d277b6a0 (diff) |
rake update[v4-dev]
Diffstat (limited to 'assets/stylesheets/bootstrap/_popover.scss')
-rw-r--r-- | assets/stylesheets/bootstrap/_popover.scss | 150 |
1 files changed, 87 insertions, 63 deletions
diff --git a/assets/stylesheets/bootstrap/_popover.scss b/assets/stylesheets/bootstrap/_popover.scss index 1b63634..e3a0d9d 100644 --- a/assets/stylesheets/bootstrap/_popover.scss +++ b/assets/stylesheets/bootstrap/_popover.scss @@ -18,75 +18,106 @@ @include border-radius($border-radius-lg); @include box-shadow($popover-box-shadow); + // Arrows + // + // .arrow is outer, .arrow::after is inner + + .arrow { + position: absolute; + display: block; + width: $popover-arrow-width; + height: $popover-arrow-height; + } + + .arrow::before, + .arrow::after { + position: absolute; + display: block; + border-color: transparent; + border-style: solid; + } + + .arrow::before { + content: ""; + border-width: $popover-arrow-outer-width; + } + .arrow::after { + content: ""; + border-width: $popover-arrow-outer-width; + } // Popover directions - &.popover-top, - &.bs-tether-element-attached-bottom { - margin-top: -$popover-arrow-width; + &.bs-popover-top { + margin-bottom: $popover-arrow-width; - &::before, - &::after { - left: 50%; + .arrow { + bottom: 0; + } + + .arrow::before, + .arrow::after { border-bottom-width: 0; } - &::before { + .arrow::before { bottom: -$popover-arrow-outer-width; - margin-left: -$popover-arrow-outer-width; + margin-left: -($popover-arrow-outer-width - 5); border-top-color: $popover-arrow-outer-color; } - &::after { + .arrow::after { bottom: -($popover-arrow-outer-width - 1); - margin-left: -$popover-arrow-width; + margin-left: -($popover-arrow-outer-width - 5); border-top-color: $popover-arrow-color; } } - &.popover-right, - &.bs-tether-element-attached-left { + &.bs-popover-right { margin-left: $popover-arrow-width; - &::before, - &::after { - top: 50%; + .arrow { + left: 0; + } + + .arrow::before, + .arrow::after { + margin-top: -($popover-arrow-outer-width - 3); border-left-width: 0; } - &::before { + .arrow::before { left: -$popover-arrow-outer-width; - margin-top: -$popover-arrow-outer-width; border-right-color: $popover-arrow-outer-color; } - &::after { + .arrow::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 { - left: 50%; + .arrow { + top: 0; + } + + .arrow::before, + .arrow::after { + margin-left: -($popover-arrow-width - 3); border-top-width: 0; } - &::before { + .arrow::before { top: -$popover-arrow-outer-width; - margin-left: -$popover-arrow-outer-width; border-bottom-color: $popover-arrow-outer-color; } - &::after { + .arrow::after { top: -($popover-arrow-outer-width - 1); - margin-left: -$popover-arrow-width; - border-bottom-color: $popover-title-bg; + border-bottom-color: $popover-arrow-color; } // This will remove the popover-title's border just below the arrow @@ -102,28 +133,43 @@ } } - &.popover-left, - &.bs-tether-element-attached-right { - margin-left: -$popover-arrow-width; + &.bs-popover-left { + margin-right: $popover-arrow-width; - &::before, - &::after { - top: 50%; + .arrow { + right: 0; + } + + .arrow::before, + .arrow::after { + margin-top: -($popover-arrow-outer-width - 3); border-right-width: 0; } - &::before { + .arrow::before { right: -$popover-arrow-outer-width; - margin-top: -$popover-arrow-outer-width; border-left-color: $popover-arrow-outer-color; } - &::after { + .arrow::after { right: -($popover-arrow-outer-width - 1); - margin-top: -($popover-arrow-outer-width - 1); border-left-color: $popover-arrow-color; } } + &.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; + } + } } @@ -132,6 +178,7 @@ padding: $popover-title-padding-y $popover-title-padding-x; margin-bottom: 0; // Reset the default from Reboot font-size: $font-size-base; + color: $popover-title-color; background-color: $popover-title-bg; border-bottom: $popover-border-width solid darken($popover-title-bg, 5%); $offset-border-width: calc(#{$border-radius-lg} - #{$popover-border-width}); @@ -144,28 +191,5 @@ .popover-content { padding: $popover-content-padding-y $popover-content-padding-x; -} - - -// Arrows -// -// .popover-arrow is outer, .popover-arrow::after is inner - -.popover::before, -.popover::after { - position: absolute; - display: block; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; -} - -.popover::before { - content: ""; - border-width: $popover-arrow-outer-width; -} -.popover::after { - content: ""; - border-width: $popover-arrow-width; + color: $popover-content-color; } |