diff options
author | Johann-S <johann.servoire@gmail.com> | 2017-04-19 11:59:10 +0300 |
---|---|---|
committer | Johann-S <johann.servoire@gmail.com> | 2017-05-14 12:41:19 +0300 |
commit | fc8b85b62670b8396cac7fb821c025c58fa77a78 (patch) | |
tree | 0d21ed48546813920a28f97d7c6216106f8189e7 /scss | |
parent | 18e4e851e2829aedc6d1ff2b703ba5cae2c0a288 (diff) |
Fix some css for the arrow of Popover/Tooltip + update documentation
Diffstat (limited to 'scss')
-rw-r--r-- | scss/_popover.scss | 78 | ||||
-rw-r--r-- | scss/_tooltip.scss | 16 |
2 files changed, 46 insertions, 48 deletions
diff --git a/scss/_popover.scss b/scss/_popover.scss index d763039ff3..8af1c1fab8 100644 --- a/scss/_popover.scss +++ b/scss/_popover.scss @@ -18,25 +18,47 @@ @include border-radius($border-radius-lg); @include box-shadow($popover-box-shadow); + // Arrows + // + // .popover-arrow is outer, .popover-arrow::after is inner + + .arrow::before, + .arrow::after { + position: absolute; + display: block; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + } + + .arrow::before { + content: ""; + border-width: $popover-arrow-outer-width; + } + .arrow::after { + content: ""; + border-width: $popover-arrow-width; + } // Popover directions &.bs-popover-top { margin-bottom: $popover-arrow-width; - ::before, - ::after { + .arrow::before, + .arrow::after { left: 50%; border-bottom-width: 0; } - ::before { + .arrow::before { bottom: -$popover-arrow-outer-width; margin-left: -$popover-arrow-outer-width; border-top-color: $popover-arrow-outer-color; } - ::after { + .arrow::after { bottom: -($popover-arrow-outer-width - 1); margin-left: -$popover-arrow-width; border-top-color: $popover-arrow-color; @@ -46,19 +68,19 @@ &.bs-popover-right { margin-left: $popover-arrow-width; - ::before, - ::after { + .arrow::before, + .arrow::after { top: 50%; border-left-width: 0; } - ::before { + .arrow::before { left: -$popover-arrow-outer-width; margin-top: -$popover-arrow-outer-width; border-right-color: $popover-arrow-outer-color; } - ::after { + .arrow::after { left: -($popover-arrow-outer-width - 1); margin-top: -($popover-arrow-outer-width - 1); border-right-color: $popover-arrow-color; @@ -68,19 +90,19 @@ &.bs-popover-bottom { margin-top: $popover-arrow-width; - ::before, - ::after { + .arrow::before, + .arrow::after { left: 50%; border-top-width: 0; } - ::before { + .arrow::before { top: -$popover-arrow-outer-width; margin-left: -$popover-arrow-outer-width; border-bottom-color: $popover-arrow-outer-color; } - ::after { + .arrow::after { top: -($popover-arrow-outer-width - 1); margin-left: -$popover-arrow-width; border-bottom-color: $popover-arrow-color; @@ -102,19 +124,19 @@ &.bs-popover-left { margin-right: $popover-arrow-width; - ::before, - ::after { + .arrow::before, + .arrow::after { top: 50%; border-right-width: 0; } - ::before { + .arrow::before { right: -$popover-arrow-outer-width; margin-top: -$popover-arrow-outer-width; border-left-color: $popover-arrow-outer-color; } - ::after { + .arrow::after { right: -($popover-arrow-outer-width - 1); margin-top: -($popover-arrow-outer-width - 1); border-left-color: $popover-arrow-color; @@ -143,27 +165,3 @@ padding: $popover-content-padding-y $popover-content-padding-x; color: $popover-content-color; } - - -// Arrows -// -// .popover-arrow is outer, .popover-arrow::after is inner - -.arrow::before, -.arrow::after { - position: absolute; - display: block; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; -} - -.arrow::before { - content: ""; - border-width: $popover-arrow-outer-width; -} -.arrow::after { - content: ""; - border-width: $popover-arrow-width; -} diff --git a/scss/_tooltip.scss b/scss/_tooltip.scss index 4006b46d96..d67dc4460a 100644 --- a/scss/_tooltip.scss +++ b/scss/_tooltip.scss @@ -65,6 +65,14 @@ border-left-color: $tooltip-arrow-color; } } + + .arrow::before { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + } } // Wrapper for the tooltip content @@ -75,12 +83,4 @@ text-align: center; background-color: $tooltip-bg; @include border-radius($border-radius); - - .arrow::before { - position: absolute; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; - } } |