diff options
Diffstat (limited to 'xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_popovers.scss')
| -rw-r--r-- | xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_popovers.scss | 154 |
1 files changed, 119 insertions, 35 deletions
diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_popovers.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_popovers.scss index a0b200e..6d6bed5 100644 --- a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_popovers.scss +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_popovers.scss @@ -1,49 +1,133 @@ -// POPOVERS -// -------- +// +// Popovers +// -------------------------------------------------- + .popover { position: absolute; top: 0; left: 0; - z-index: $zindexPopover; + z-index: $zindex-popover; display: none; - padding: 5px; - &.top { margin-top: -5px; } - &.right { margin-left: 5px; } - &.bottom { margin-top: 5px; } - &.left { margin-left: -5px; } - &.top .arrow { @include popoverArrowTop(); } - &.right .arrow { @include popoverArrowRight(); } - &.bottom .arrow { @include popoverArrowBottom(); } - &.left .arrow { @include popoverArrowLeft(); } - .arrow { + max-width: $popover-max-width; + padding: 1px; + text-align: left; // Reset given new insertion method + background-color: $popover-bg; + background-clip: padding-box; + border: 1px solid $popover-fallback-border-color; + border: 1px solid $popover-border-color; + border-radius: $border-radius-large; + @include box-shadow(0 5px 10px rgba(0,0,0,.2)); + + // Overrides for proper insertion + white-space: normal; + + // Offset the popover to account for the popover arrow + &.top { margin-top: -$popover-arrow-width; } + &.right { margin-left: $popover-arrow-width; } + &.bottom { margin-top: $popover-arrow-width; } + &.left { margin-left: -$popover-arrow-width; } +} + +.popover-title { + margin: 0; // reset heading margin + padding: 8px 14px; + font-size: $font-size-base; + font-weight: normal; + line-height: 18px; + background-color: $popover-title-bg; + border-bottom: 1px solid darken($popover-title-bg, 5%); + border-radius: 5px 5px 0 0; +} + +.popover-content { + padding: 9px 14px; +} + +// Arrows +// +// .arrow is outer, .arrow:after is inner + +.popover > .arrow { + &, + &:after { position: absolute; + display: block; width: 0; height: 0; + border-color: transparent; + border-style: solid; } } -.popover-inner { - padding: 3px; - width: 280px; - overflow: hidden; - background: $black; // has to be full background declaration for IE fallback - background: rgba(0,0,0,.8); - @include border-radius(6px); - @include box-shadow(0 3px 7px rgba(0,0,0,0.3)); +.popover > .arrow { + border-width: $popover-arrow-outer-width; } -.popover-title { - padding: 9px 15px; - line-height: 1; - background-color: #f5f5f5; - border-bottom:1px solid #eee; - @include border-radius(3px 3px 0 0); +.popover > .arrow:after { + border-width: $popover-arrow-width; + content: ""; } -.popover-content { - padding: 14px; - background-color: $white; - @include border-radius(0 0 3px 3px); - @include background-clip(padding-box); - p, ul, ol { - margin-bottom: 0; + +.popover { + &.top > .arrow { + left: 50%; + margin-left: -$popover-arrow-outer-width; + border-bottom-width: 0; + border-top-color: $popover-arrow-outer-fallback-color; // IE8 fallback + border-top-color: $popover-arrow-outer-color; + bottom: -$popover-arrow-outer-width; + &:after { + content: " "; + bottom: 1px; + margin-left: -$popover-arrow-width; + border-bottom-width: 0; + border-top-color: $popover-arrow-color; + } + } + &.right > .arrow { + top: 50%; + left: -$popover-arrow-outer-width; + margin-top: -$popover-arrow-outer-width; + border-left-width: 0; + border-right-color: $popover-arrow-outer-fallback-color; // IE8 fallback + border-right-color: $popover-arrow-outer-color; + &:after { + content: " "; + left: 1px; + bottom: -$popover-arrow-width; + border-left-width: 0; + border-right-color: $popover-arrow-color; + } } -}
\ No newline at end of file + &.bottom > .arrow { + left: 50%; + margin-left: -$popover-arrow-outer-width; + border-top-width: 0; + border-bottom-color: $popover-arrow-outer-fallback-color; // IE8 fallback + border-bottom-color: $popover-arrow-outer-color; + top: -$popover-arrow-outer-width; + &:after { + content: " "; + top: 1px; + margin-left: -$popover-arrow-width; + border-top-width: 0; + border-bottom-color: $popover-arrow-color; + } + } + + &.left > .arrow { + top: 50%; + right: -$popover-arrow-outer-width; + margin-top: -$popover-arrow-outer-width; + border-right-width: 0; + border-left-color: $popover-arrow-outer-fallback-color; // IE8 fallback + border-left-color: $popover-arrow-outer-color; + &:after { + content: " "; + right: 1px; + border-right-width: 0; + border-left-color: $popover-arrow-color; + bottom: -$popover-arrow-width; + } + } + +} |