From 2ae5fdf9ddbff98c55e47b81d7150b8d960ad342 Mon Sep 17 00:00:00 2001 From: Bernardo Gurgel Filho Date: Sun, 23 Aug 2015 01:59:48 -0300 Subject: [PATCH 1/2] Convert tooltip's arrows to generated CSS content via :before --- js/src/tooltip.js | 1 - scss/_tooltip.scss | 27 +++++++++++++++------------ 2 files changed, 15 insertions(+), 13 deletions(-) diff --git a/js/src/tooltip.js b/js/src/tooltip.js index aa5c739457..099a474829 100644 --- a/js/src/tooltip.js +++ b/js/src/tooltip.js @@ -28,7 +28,6 @@ const Tooltip = (($) => { const Default = { animation : true, template : '', trigger : 'hover focus', title : '', diff --git a/scss/_tooltip.scss b/scss/_tooltip.scss index 941579ec97..23a18e7dee 100644 --- a/scss/_tooltip.scss +++ b/scss/_tooltip.scss @@ -16,10 +16,11 @@ padding: $tooltip-arrow-width 0; margin-top: -3px; - .tooltip-arrow { + .tooltip-inner:before { bottom: 0; left: 50%; margin-left: -$tooltip-arrow-width; + content: ""; border-width: $tooltip-arrow-width $tooltip-arrow-width 0; border-top-color: $tooltip-arrow-color; } @@ -29,10 +30,11 @@ padding: 0 $tooltip-arrow-width; margin-left: 3px; - .tooltip-arrow { + .tooltip-inner:before { top: 50%; left: 0; margin-top: -$tooltip-arrow-width; + content: ""; border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0; border-right-color: $tooltip-arrow-color; } @@ -42,10 +44,11 @@ padding: $tooltip-arrow-width 0; margin-top: 3px; - .tooltip-arrow { + .tooltip-inner:before { top: 0; left: 50%; margin-left: -$tooltip-arrow-width; + content: ""; border-width: 0 $tooltip-arrow-width $tooltip-arrow-width; border-bottom-color: $tooltip-arrow-color; } @@ -55,10 +58,11 @@ padding: 0 $tooltip-arrow-width; margin-left: -3px; - .tooltip-arrow { + .tooltip-inner:before { top: 50%; right: 0; margin-top: -$tooltip-arrow-width; + content: ""; border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width; border-left-color: $tooltip-arrow-color; } @@ -73,13 +77,12 @@ text-align: center; background-color: $tooltip-bg; @include border-radius($border-radius); -} -// Arrows -.tooltip-arrow { - position: absolute; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; + &:before { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + } } From 8ef66df6d793afbda487c1a4505d0a6576252ec4 Mon Sep 17 00:00:00 2001 From: Bernardo Gurgel Filho Date: Sun, 23 Aug 2015 17:54:38 -0300 Subject: [PATCH 2/2] Convert popover's arrows to generated CSS content via :before/:after --- js/src/popover.js | 4 +- scss/_popover.scss | 124 +++++++++++++++++++++++++++------------------ 2 files changed, 75 insertions(+), 53 deletions(-) diff --git a/js/src/popover.js b/js/src/popover.js index 99e48e64f9..6ea8b00fb8 100644 --- a/js/src/popover.js +++ b/js/src/popover.js @@ -28,7 +28,6 @@ const Popover = (($) => { trigger : 'click', content : '', template : '' }) @@ -44,8 +43,7 @@ const Popover = (($) => { const Selector = { TITLE : '.popover-title', - CONTENT : '.popover-content', - ARROW : '.popover-arrow' + CONTENT : '.popover-content' } const Event = { diff --git a/scss/_popover.scss b/scss/_popover.scss index 674a8f31f6..5ff8bd5328 100644 --- a/scss/_popover.scss +++ b/scss/_popover.scss @@ -23,19 +23,22 @@ &.bs-tether-element-attached-bottom { margin-top: -$popover-arrow-width; - .popover-arrow { - bottom: -$popover-arrow-outer-width; + &::before, + &::after { left: 50%; + border-bottom-width: 0; + } + + &::before { + bottom: -$popover-arrow-outer-width; margin-left: -$popover-arrow-outer-width; border-top-color: $popover-arrow-outer-color; - border-bottom-width: 0; - &::after { - bottom: 1px; - margin-left: -$popover-arrow-width; - content: ""; - border-top-color: $popover-arrow-color; - border-bottom-width: 0; - } + } + + &::after { + bottom: -($popover-arrow-outer-width - 1); + margin-left: -$popover-arrow-width; + border-top-color: $popover-arrow-color; } } @@ -43,19 +46,22 @@ &.bs-tether-element-attached-left { margin-left: $popover-arrow-width; - .popover-arrow { + &::before, + &::after { top: 50%; + border-left-width: 0; + } + + &::before { left: -$popover-arrow-outer-width; margin-top: -$popover-arrow-outer-width; border-right-color: $popover-arrow-outer-color; - border-left-width: 0; - &::after { - bottom: -$popover-arrow-width; - left: 1px; - content: ""; - border-right-color: $popover-arrow-color; - border-left-width: 0; - } + } + + &::after { + left: -($popover-arrow-outer-width - 1); + margin-top: -($popover-arrow-outer-width - 1); + border-right-color: $popover-arrow-color; } } @@ -63,19 +69,34 @@ &.bs-tether-element-attached-top { margin-top: $popover-arrow-width; - .popover-arrow { - top: -$popover-arrow-outer-width; + &::before, + &::after { left: 50%; - margin-left: -$popover-arrow-outer-width; border-top-width: 0; + } + + &::before { + top: -$popover-arrow-outer-width; + margin-left: -$popover-arrow-outer-width; border-bottom-color: $popover-arrow-outer-color; - &::after { - top: 1px; - margin-left: -$popover-arrow-width; - content: ""; - border-top-width: 0; - border-bottom-color: $popover-arrow-color; - } + } + + &::after { + top: -($popover-arrow-outer-width - 1); + margin-left: -$popover-arrow-width; + border-bottom-color: $popover-title-bg; + } + + // This will remove the popover-title's border just below the arrow + .popover-title::before { + position: absolute; + top: 0; + left: 50%; + display: block; + width: 20px; + margin-left: -10px; + content: ""; + border-bottom: 1px solid $popover-title-bg; } } @@ -83,19 +104,22 @@ &.bs-tether-element-attached-right { margin-left: -$popover-arrow-width; - .popover-arrow { + &::before, + &::after { top: 50%; + border-right-width: 0; + } + + &::before { right: -$popover-arrow-outer-width; margin-top: -$popover-arrow-outer-width; - border-right-width: 0; border-left-color: $popover-arrow-outer-color; - &::after { - right: 1px; - bottom: -$popover-arrow-width; - content: ""; - border-right-width: 0; - border-left-color: $popover-arrow-color; - } + } + + &::after { + right: -($popover-arrow-outer-width - 1); + margin-top: -($popover-arrow-outer-width - 1); + border-left-color: $popover-arrow-color; } } } @@ -120,21 +144,21 @@ // // .popover-arrow is outer, .popover-arrow::after is inner -.popover-arrow { - &, - &::after { - position: absolute; - display: block; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; - } +.popover::before, +.popover::after { + position: absolute; + display: block; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; } -.popover-arrow { + +.popover::before { + content: ""; border-width: $popover-arrow-outer-width; } -.popover-arrow::after { +.popover::after { content: ""; border-width: $popover-arrow-width; }