aboutsummaryrefslogtreecommitdiffstats
path: root/site/static/styles/scss/bootstrap/_popovers.scss
diff options
context:
space:
mode:
authorStephane Desneux <stephane.desneux@iot.bzh>2016-11-11 13:14:53 +0100
committerStephane Desneux <stephane.desneux@iot.bzh>2016-11-11 13:15:01 +0100
commit80d9194c56e4cecc3a00acd71033ca7ff35064cf (patch)
treee412cd48bd6a1017ea0ac6abd1b62b984b6ebb06 /site/static/styles/scss/bootstrap/_popovers.scss
parent777f9afc5f5a3d8ff90a8046314635404dcdcd99 (diff)
webdocs-agl: upgrade bootstrap to 3.3.7
Using the bootstrap-sass version available at: https://github.com/twbs/bootstrap-sass/archive/v3.3.7.tar.gz Change-Id: I04dbedda13f6ab6987d4b61afd10bbd60dfb70e6 Signed-off-by: Stephane Desneux <stephane.desneux@iot.bzh>
Diffstat (limited to 'site/static/styles/scss/bootstrap/_popovers.scss')
-rw-r--r--site/static/styles/scss/bootstrap/_popovers.scss131
1 files changed, 131 insertions, 0 deletions
diff --git a/site/static/styles/scss/bootstrap/_popovers.scss b/site/static/styles/scss/bootstrap/_popovers.scss
new file mode 100644
index 0000000..9b90a2e
--- /dev/null
+++ b/site/static/styles/scss/bootstrap/_popovers.scss
@@ -0,0 +1,131 @@
+//
+// Popovers
+// --------------------------------------------------
+
+
+.popover {
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: $zindex-popover;
+ display: none;
+ max-width: $popover-max-width;
+ padding: 1px;
+ // Our parent element can be arbitrary since popovers are by default inserted as a sibling of their target element.
+ // So reset our font and text properties to avoid inheriting weird values.
+ @include reset-text;
+ font-size: $font-size-base;
+
+ 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));
+
+ // 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;
+ background-color: $popover-title-bg;
+ border-bottom: 1px solid darken($popover-title-bg, 5%);
+ border-radius: ($border-radius-large - 1) ($border-radius-large - 1) 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 > .arrow {
+ border-width: $popover-arrow-outer-width;
+}
+.popover > .arrow:after {
+ border-width: $popover-arrow-width;
+ content: "";
+}
+
+.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;
+ }
+ }
+ &.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;
+ }
+ }
+}