From 72bdb543759b5ffbdf5c2cc71294ad4f1f2996b2 Mon Sep 17 00:00:00 2001 From: Arun Persaud Date: Sat, 8 Mar 2014 22:02:34 -0800 Subject: updated css/js libraries * bootstrap 3.1.1 * jquery 2.1.0 * less 1.7.0 mostly bootstrap had to be adjusted, e.g. different names like hero-unit->jumbotron, etc. --- css/bootstrap/popovers.less | 150 ++++++++++++++++++++++++-------------------- 1 file changed, 83 insertions(+), 67 deletions(-) (limited to 'css/bootstrap/popovers.less') diff --git a/css/bootstrap/popovers.less b/css/bootstrap/popovers.less index 2b3f1b0..696d74c 100644 --- a/css/bootstrap/popovers.less +++ b/css/bootstrap/popovers.less @@ -7,111 +7,127 @@ position: absolute; top: 0; left: 0; - z-index: @zindexPopover; + z-index: @zindex-popover; display: none; - width: 236px; + max-width: @popover-max-width; padding: 1px; - background-color: @popoverBackground; - -webkit-background-clip: padding-box; - -moz-background-clip: padding; - background-clip: padding-box; - border: 1px solid #ccc; - border: 1px solid rgba(0,0,0,.2); - .border-radius(6px); + 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; .box-shadow(0 5px 10px rgba(0,0,0,.2)); - // Offset the popover to account for the popover arrow - &.top { margin-bottom: 10px; } - &.right { margin-left: 10px; } - &.bottom { margin-top: 10px; } - &.left { margin-right: 10px; } + // 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: 14px; + font-size: @font-size-base; font-weight: normal; line-height: 18px; - background-color: @popoverTitleBackground; - border-bottom: 1px solid darken(@popoverTitleBackground, 5%); - .border-radius(5px 5px 0 0); + 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; - p, ul, ol { - margin-bottom: 0; - } } // Arrows -.popover .arrow, -.popover .arrow:after { - position: absolute; - display: inline-block; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; +// +// .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 { +.popover > .arrow:after { + border-width: @popover-arrow-width; content: ""; - z-index: -1; } .popover { - &.top .arrow { - bottom: -@popoverArrowWidth; + &.top > .arrow { left: 50%; - margin-left: -@popoverArrowWidth; - border-width: @popoverArrowWidth @popoverArrowWidth 0; - border-top-color: @popoverArrowColor; + 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 { - border-width: @popoverArrowOuterWidth @popoverArrowOuterWidth 0; - border-top-color: @popoverArrowOuterColor; - bottom: -1px; - left: -@popoverArrowOuterWidth; + content: " "; + bottom: 1px; + margin-left: -@popover-arrow-width; + border-bottom-width: 0; + border-top-color: @popover-arrow-color; } } - &.right .arrow { + &.right > .arrow { top: 50%; - left: -@popoverArrowWidth; - margin-top: -@popoverArrowWidth; - border-width: @popoverArrowWidth @popoverArrowWidth @popoverArrowWidth 0; - border-right-color: @popoverArrowColor; + 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 { - border-width: @popoverArrowOuterWidth @popoverArrowOuterWidth @popoverArrowOuterWidth 0; - border-right-color: @popoverArrowOuterColor; - bottom: -@popoverArrowOuterWidth; - left: -1px; + content: " "; + left: 1px; + bottom: -@popover-arrow-width; + border-left-width: 0; + border-right-color: @popover-arrow-color; } } - &.bottom .arrow { - top: -@popoverArrowWidth; + &.bottom > .arrow { left: 50%; - margin-left: -@popoverArrowWidth; - border-width: 0 @popoverArrowWidth @popoverArrowWidth; - border-bottom-color: @popoverArrowColor; + 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 { - border-width: 0 @popoverArrowOuterWidth @popoverArrowOuterWidth; - border-bottom-color: @popoverArrowOuterColor; - top: -1px; - left: -@popoverArrowOuterWidth; + content: " "; + top: 1px; + margin-left: -@popover-arrow-width; + border-top-width: 0; + border-bottom-color: @popover-arrow-color; } } - &.left .arrow { + + &.left > .arrow { top: 50%; - right: -@popoverArrowWidth; - margin-top: -@popoverArrowWidth; - border-width: @popoverArrowWidth 0 @popoverArrowWidth @popoverArrowWidth; - border-left-color: @popoverArrowColor; + 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 { - border-width: @popoverArrowOuterWidth 0 @popoverArrowOuterWidth @popoverArrowOuterWidth; - border-left-color: @popoverArrowOuterColor; - bottom: -@popoverArrowOuterWidth; - right: -1px; + content: " "; + right: 1px; + border-right-width: 0; + border-left-color: @popover-arrow-color; + bottom: -@popover-arrow-width; } } + } -- cgit v1.2.3-18-g5258