Welcome to mirror list, hosted at ThFree Co, Russian Federation.

github.com/twbs/bootstrap-rubygem.git - Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorGleb Mazovetskiy <glex.spb@gmail.com>2017-05-29 16:41:20 +0300
committerGleb Mazovetskiy <glex.spb@gmail.com>2017-05-29 16:41:20 +0300
commit096ade49a5ceff46c2db7f1b2aa5399853a2cb4a (patch)
tree7d11585f02203cde800143b4f2758105c29e34ac /assets/stylesheets/bootstrap/_popover.scss
parent9b92e0095994e5f26be8ce4a910e3701d277b6a0 (diff)
rake update[v4-dev]
Diffstat (limited to 'assets/stylesheets/bootstrap/_popover.scss')
-rw-r--r--assets/stylesheets/bootstrap/_popover.scss150
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;
}