From c09e8473e2be483d3f53186840c002167647c44b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 28 Jun 2012 10:03:46 -0700 Subject: use variablef or wells background-color, update docs for glyphicons license mention, update popovers to remove that thick border and make them look mo betta --- less/mixins.less | 52 ++++++++++++++++++++++++++++++++++++++---------- less/popovers.less | 57 ++++++++++++++++++++++++++++++++--------------------- less/variables.less | 5 +++++ less/wells.less | 5 ++--- 4 files changed, 84 insertions(+), 35 deletions(-) (limited to 'less') diff --git a/less/mixins.less b/less/mixins.less index e1e06bd2a6..fd162a0491 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -509,37 +509,69 @@ // ------------------------- // For tipsies and popovers #popoverArrow { - .top(@arrowWidth: 5px, @color: @black) { - bottom: 0; + .top(@arrowWidth: 10px, @color: rgba(0,0,0,.2)) { + bottom: -@arrowWidth; left: 50%; margin-left: -@arrowWidth; border-left: @arrowWidth solid transparent; border-right: @arrowWidth solid transparent; + border-top: @arrowWidth solid #ccc; border-top: @arrowWidth solid @color; + &:after { + border-left: @arrowWidth - 1 solid transparent; + border-right: @arrowWidth - 1 solid transparent; + border-top: @arrowWidth - 1 solid #fff; + bottom: 1px; + left: -@arrowWidth + 1; + } } - .left(@arrowWidth: 5px, @color: @black) { + .right(@arrowWidth: 10px, @color: rgba(0,0,0,.2)) { top: 50%; - right: 0; + left: -@arrowWidth; margin-top: -@arrowWidth; border-top: @arrowWidth solid transparent; border-bottom: @arrowWidth solid transparent; - border-left: @arrowWidth solid @color; + border-right: @arrowWidth solid #ccc; + border-right: @arrowWidth solid @color; + &:after { + border-top: @arrowWidth - 1 solid transparent; + border-bottom: @arrowWidth - 1 solid transparent; + border-right: @arrowWidth - 1 solid #fff; + bottom: -@arrowWidth + 1; + left: 1px; + } } - .bottom(@arrowWidth: 5px, @color: @black) { - top: 0; + .bottom(@arrowWidth: 10px, @color: rgba(0,0,0,.2)) { + top: -@arrowWidth; left: 50%; margin-left: -@arrowWidth; border-left: @arrowWidth solid transparent; border-right: @arrowWidth solid transparent; + border-bottom: @arrowWidth solid #ccc; border-bottom: @arrowWidth solid @color; + &:after { + border-left: @arrowWidth - 1 solid transparent; + border-right: @arrowWidth - 1 solid transparent; + border-bottom: @arrowWidth - 1 solid #f5f5f5; + top: 1px; + left: -@arrowWidth + 1; + } } - .right(@arrowWidth: 5px, @color: @black) { + .left(@arrowWidth: 10px, @color: rgba(0,0,0,.2)) { top: 50%; - left: 0; + right: -@arrowWidth; margin-top: -@arrowWidth; border-top: @arrowWidth solid transparent; border-bottom: @arrowWidth solid transparent; - border-right: @arrowWidth solid @color; + border-left: @arrowWidth solid #ccc; + border-left: @arrowWidth solid @color; + &:after { + border-top: @arrowWidth - 1 solid transparent; + border-bottom: @arrowWidth - 1 solid transparent; + border-left: @arrowWidth - 1 solid #fff; + bottom: -@arrowWidth + 1; + right: 1px; + } } } diff --git a/less/popovers.less b/less/popovers.less index 558d99ec99..ca69ca8018 100644 --- a/less/popovers.less +++ b/less/popovers.less @@ -7,42 +7,55 @@ left: 0; z-index: @zindexPopover; display: none; - padding: 5px; - &.top { margin-top: -5px; } - &.right { margin-left: 5px; } - &.bottom { margin-top: 5px; } - &.left { margin-left: -5px; } + width: 218px; + background-color: #fff; + -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); + .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; } + + // Call the mixin for the arrows &.top .arrow { #popoverArrow > .top(); } &.right .arrow { #popoverArrow > .right(); } &.bottom .arrow { #popoverArrow > .bottom(); } &.left .arrow { #popoverArrow > .left(); } + + // Common arrow styles .arrow { position: absolute; width: 0; height: 0; + &:after { + position: absolute; + display: inline-block; + width: 0; + height: 0; + content: ""; + } } } -.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); - .border-radius(6px); - .box-shadow(0 3px 7px rgba(0,0,0,0.3)); -} + .popover-title { - padding: 9px 15px; - line-height: 1; + padding: 8px 14px; + font-size: 14px; + font-weight: normal; + line-height: 18px; background-color: #f5f5f5; - border-bottom:1px solid #eee; - .border-radius(3px 3px 0 0); + border-bottom: 1px solid #e5e5e5; + .border-radius(5px 5px 0 0); } + .popover-content { - padding: 14px; - background-color: @white; - .border-radius(0 0 3px 3px); - .background-clip(padding-box); + padding: 9px 14px; p, ul, ol { margin-bottom: 0; } diff --git a/less/variables.less b/less/variables.less index 25a032781d..bd3a2905d0 100644 --- a/less/variables.less +++ b/less/variables.less @@ -148,6 +148,11 @@ @hrBorder: @grayLighter; +// Wells +// ------------------------- +@wellBackground: #f5f5f5; + + // Navbar // ------------------------- @navbarHeight: 40px; diff --git a/less/wells.less b/less/wells.less index 9300061a50..bac3715a7d 100644 --- a/less/wells.less +++ b/less/wells.less @@ -5,9 +5,8 @@ min-height: 20px; padding: 19px; margin-bottom: 20px; - background-color: #f5f5f5; - border: 1px solid #eee; - border: 1px solid rgba(0,0,0,.05); + background-color: @wellBackground; + border: 1px solid darken(@wellBackground, 7%); .border-radius(4px); .box-shadow(inset 0 1px 1px rgba(0,0,0,.05)); blockquote { -- cgit v1.2.3