_popovers.scss (3633B)
1 // 2 // Popovers 3 // -------------------------------------------------- 4 5 6 .popover { 7 position: absolute; 8 top: 0; 9 left: 0; 10 z-index: $zindex-popover; 11 display: none; 12 max-width: $popover-max-width; 13 padding: 1px; 14 // Our parent element can be arbitrary since popovers are by default inserted as a sibling of their target element. 15 // So reset our font and text properties to avoid inheriting weird values. 16 @include reset-text; 17 font-size: $font-size-base; 18 19 background-color: $popover-bg; 20 background-clip: padding-box; 21 border: 1px solid $popover-fallback-border-color; 22 border: 1px solid $popover-border-color; 23 border-radius: $border-radius-large; 24 @include box-shadow(0 5px 10px rgba(0,0,0,.2)); 25 26 // Offset the popover to account for the popover arrow 27 &.top { margin-top: -$popover-arrow-width; } 28 &.right { margin-left: $popover-arrow-width; } 29 &.bottom { margin-top: $popover-arrow-width; } 30 &.left { margin-left: -$popover-arrow-width; } 31 } 32 33 .popover-title { 34 margin: 0; // reset heading margin 35 padding: 8px 14px; 36 font-size: $font-size-base; 37 background-color: $popover-title-bg; 38 border-bottom: 1px solid darken($popover-title-bg, 5%); 39 border-radius: ($border-radius-large - 1) ($border-radius-large - 1) 0 0; 40 } 41 42 .popover-content { 43 padding: 9px 14px; 44 } 45 46 // Arrows 47 // 48 // .arrow is outer, .arrow:after is inner 49 50 .popover > .arrow { 51 &, 52 &:after { 53 position: absolute; 54 display: block; 55 width: 0; 56 height: 0; 57 border-color: transparent; 58 border-style: solid; 59 } 60 } 61 .popover > .arrow { 62 border-width: $popover-arrow-outer-width; 63 } 64 .popover > .arrow:after { 65 border-width: $popover-arrow-width; 66 content: ""; 67 } 68 69 .popover { 70 &.top > .arrow { 71 left: 50%; 72 margin-left: -$popover-arrow-outer-width; 73 border-bottom-width: 0; 74 border-top-color: $popover-arrow-outer-fallback-color; // IE8 fallback 75 border-top-color: $popover-arrow-outer-color; 76 bottom: -$popover-arrow-outer-width; 77 &:after { 78 content: " "; 79 bottom: 1px; 80 margin-left: -$popover-arrow-width; 81 border-bottom-width: 0; 82 border-top-color: $popover-arrow-color; 83 } 84 } 85 &.right > .arrow { 86 top: 50%; 87 left: -$popover-arrow-outer-width; 88 margin-top: -$popover-arrow-outer-width; 89 border-left-width: 0; 90 border-right-color: $popover-arrow-outer-fallback-color; // IE8 fallback 91 border-right-color: $popover-arrow-outer-color; 92 &:after { 93 content: " "; 94 left: 1px; 95 bottom: -$popover-arrow-width; 96 border-left-width: 0; 97 border-right-color: $popover-arrow-color; 98 } 99 } 100 &.bottom > .arrow { 101 left: 50%; 102 margin-left: -$popover-arrow-outer-width; 103 border-top-width: 0; 104 border-bottom-color: $popover-arrow-outer-fallback-color; // IE8 fallback 105 border-bottom-color: $popover-arrow-outer-color; 106 top: -$popover-arrow-outer-width; 107 &:after { 108 content: " "; 109 top: 1px; 110 margin-left: -$popover-arrow-width; 111 border-top-width: 0; 112 border-bottom-color: $popover-arrow-color; 113 } 114 } 115 116 &.left > .arrow { 117 top: 50%; 118 right: -$popover-arrow-outer-width; 119 margin-top: -$popover-arrow-outer-width; 120 border-right-width: 0; 121 border-left-color: $popover-arrow-outer-fallback-color; // IE8 fallback 122 border-left-color: $popover-arrow-outer-color; 123 &:after { 124 content: " "; 125 right: 1px; 126 border-right-width: 0; 127 border-left-color: $popover-arrow-color; 128 bottom: -$popover-arrow-width; 129 } 130 } 131 }