diff options
Diffstat (limited to 'less/mixins.less')
-rw-r--r-- | less/mixins.less | 52 |
1 files changed, 42 insertions, 10 deletions
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; + } } } |