• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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  // Reset font and text properties given new insertion method
15  font-family: @font-family-base;
16  font-size: @font-size-base;
17  font-weight: normal;
18  line-height: @line-height-base;
19  text-align: left;
20  background-color: @popover-bg;
21  background-clip: padding-box;
22  border: 1px solid @popover-fallback-border-color;
23  border: 1px solid @popover-border-color;
24  border-radius: @border-radius-large;
25  .box-shadow(0 5px 10px rgba(0,0,0,.2));
26
27  // Overrides for proper insertion
28  white-space: normal;
29
30  // Offset the popover to account for the popover arrow
31  &.top     { margin-top: -@popover-arrow-width; }
32  &.right   { margin-left: @popover-arrow-width; }
33  &.bottom  { margin-top: @popover-arrow-width; }
34  &.left    { margin-left: -@popover-arrow-width; }
35}
36
37.popover-title {
38  margin: 0; // reset heading margin
39  padding: 8px 14px;
40  font-size: @font-size-base;
41  background-color: @popover-title-bg;
42  border-bottom: 1px solid darken(@popover-title-bg, 5%);
43  border-radius: (@border-radius-large - 1) (@border-radius-large - 1) 0 0;
44}
45
46.popover-content {
47  padding: 9px 14px;
48}
49
50// Arrows
51//
52// .arrow is outer, .arrow:after is inner
53
54.popover > .arrow {
55  &,
56  &:after {
57    position: absolute;
58    display: block;
59    width: 0;
60    height: 0;
61    border-color: transparent;
62    border-style: solid;
63  }
64}
65.popover > .arrow {
66  border-width: @popover-arrow-outer-width;
67}
68.popover > .arrow:after {
69  border-width: @popover-arrow-width;
70  content: "";
71}
72
73.popover {
74  &.top > .arrow {
75    left: 50%;
76    margin-left: -@popover-arrow-outer-width;
77    border-bottom-width: 0;
78    border-top-color: @popover-arrow-outer-fallback-color; // IE8 fallback
79    border-top-color: @popover-arrow-outer-color;
80    bottom: -@popover-arrow-outer-width;
81    &:after {
82      content: " ";
83      bottom: 1px;
84      margin-left: -@popover-arrow-width;
85      border-bottom-width: 0;
86      border-top-color: @popover-arrow-color;
87    }
88  }
89  &.right > .arrow {
90    top: 50%;
91    left: -@popover-arrow-outer-width;
92    margin-top: -@popover-arrow-outer-width;
93    border-left-width: 0;
94    border-right-color: @popover-arrow-outer-fallback-color; // IE8 fallback
95    border-right-color: @popover-arrow-outer-color;
96    &:after {
97      content: " ";
98      left: 1px;
99      bottom: -@popover-arrow-width;
100      border-left-width: 0;
101      border-right-color: @popover-arrow-color;
102    }
103  }
104  &.bottom > .arrow {
105    left: 50%;
106    margin-left: -@popover-arrow-outer-width;
107    border-top-width: 0;
108    border-bottom-color: @popover-arrow-outer-fallback-color; // IE8 fallback
109    border-bottom-color: @popover-arrow-outer-color;
110    top: -@popover-arrow-outer-width;
111    &:after {
112      content: " ";
113      top: 1px;
114      margin-left: -@popover-arrow-width;
115      border-top-width: 0;
116      border-bottom-color: @popover-arrow-color;
117    }
118  }
119
120  &.left > .arrow {
121    top: 50%;
122    right: -@popover-arrow-outer-width;
123    margin-top: -@popover-arrow-outer-width;
124    border-right-width: 0;
125    border-left-color: @popover-arrow-outer-fallback-color; // IE8 fallback
126    border-left-color: @popover-arrow-outer-color;
127    &:after {
128      content: " ";
129      right: 1px;
130      border-right-width: 0;
131      border-left-color: @popover-arrow-color;
132      bottom: -@popover-arrow-width;
133    }
134  }
135}
136