talos

1
.popover {
2
  position: absolute;
3
  top: 0;
4
  left: 0;
5
  z-index: $zindex-popover;
6
  display: block;
7
  max-width: $popover-max-width;
8
  // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
9
  // So reset our font and text properties to avoid inheriting weird values.
10
  @include reset-text();
11
  @include font-size($popover-font-size);
12
  // Allow breaking very long words so they don't overflow the popover's bounds
13
  word-wrap: break-word;
14
  background-color: $popover-bg;
15
  background-clip: padding-box;
16
  border: $popover-border-width solid $popover-border-color;
17
  @include border-radius($popover-border-radius);
18
  @include box-shadow($popover-box-shadow);
19

20
  .arrow {
21
    position: absolute;
22
    display: block;
23
    width: $popover-arrow-width;
24
    height: $popover-arrow-height;
25
    margin: 0 $popover-border-radius;
26

27
    &::before,
28
    &::after {
29
      position: absolute;
30
      display: block;
31
      content: "";
32
      border-color: transparent;
33
      border-style: solid;
34
    }
35
  }
36
}
37

38
.bs-popover-top {
39
  margin-bottom: $popover-arrow-height;
40

41
  > .arrow {
42
    bottom: subtract(-$popover-arrow-height, $popover-border-width);
43

44
    &::before {
45
      bottom: 0;
46
      border-width: $popover-arrow-height ($popover-arrow-width * .5) 0;
47
      border-top-color: $popover-arrow-outer-color;
48
    }
49

50
    &::after {
51
      bottom: $popover-border-width;
52
      border-width: $popover-arrow-height ($popover-arrow-width * .5) 0;
53
      border-top-color: $popover-arrow-color;
54
    }
55
  }
56
}
57

58
.bs-popover-right {
59
  margin-left: $popover-arrow-height;
60

61
  > .arrow {
62
    left: subtract(-$popover-arrow-height, $popover-border-width);
63
    width: $popover-arrow-height;
64
    height: $popover-arrow-width;
65
    margin: $popover-border-radius 0; // make sure the arrow does not touch the popover's rounded corners
66

67
    &::before {
68
      left: 0;
69
      border-width: ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5) 0;
70
      border-right-color: $popover-arrow-outer-color;
71
    }
72

73
    &::after {
74
      left: $popover-border-width;
75
      border-width: ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5) 0;
76
      border-right-color: $popover-arrow-color;
77
    }
78
  }
79
}
80

81
.bs-popover-bottom {
82
  margin-top: $popover-arrow-height;
83

84
  > .arrow {
85
    top: subtract(-$popover-arrow-height, $popover-border-width);
86

87
    &::before {
88
      top: 0;
89
      border-width: 0 ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5);
90
      border-bottom-color: $popover-arrow-outer-color;
91
    }
92

93
    &::after {
94
      top: $popover-border-width;
95
      border-width: 0 ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5);
96
      border-bottom-color: $popover-arrow-color;
97
    }
98
  }
99

100
  // This will remove the popover-header's border just below the arrow
101
  .popover-header::before {
102
    position: absolute;
103
    top: 0;
104
    left: 50%;
105
    display: block;
106
    width: $popover-arrow-width;
107
    margin-left: -$popover-arrow-width * .5;
108
    content: "";
109
    border-bottom: $popover-border-width solid $popover-header-bg;
110
  }
111
}
112

113
.bs-popover-left {
114
  margin-right: $popover-arrow-height;
115

116
  > .arrow {
117
    right: subtract(-$popover-arrow-height, $popover-border-width);
118
    width: $popover-arrow-height;
119
    height: $popover-arrow-width;
120
    margin: $popover-border-radius 0; // make sure the arrow does not touch the popover's rounded corners
121

122
    &::before {
123
      right: 0;
124
      border-width: ($popover-arrow-width * .5) 0 ($popover-arrow-width * .5) $popover-arrow-height;
125
      border-left-color: $popover-arrow-outer-color;
126
    }
127

128
    &::after {
129
      right: $popover-border-width;
130
      border-width: ($popover-arrow-width * .5) 0 ($popover-arrow-width * .5) $popover-arrow-height;
131
      border-left-color: $popover-arrow-color;
132
    }
133
  }
134
}
135

136
.bs-popover-auto {
137
  &[x-placement^="top"] {
138
    @extend .bs-popover-top;
139
  }
140
  &[x-placement^="right"] {
141
    @extend .bs-popover-right;
142
  }
143
  &[x-placement^="bottom"] {
144
    @extend .bs-popover-bottom;
145
  }
146
  &[x-placement^="left"] {
147
    @extend .bs-popover-left;
148
  }
149
}
150

151

152
// Offset the popover to account for the popover arrow
153
.popover-header {
154
  padding: $popover-header-padding-y $popover-header-padding-x;
155
  margin-bottom: 0; // Reset the default from Reboot
156
  @include font-size($font-size-base);
157
  color: $popover-header-color;
158
  background-color: $popover-header-bg;
159
  border-bottom: $popover-border-width solid darken($popover-header-bg, 5%);
160
  @include border-top-radius($popover-inner-border-radius);
161

162
  &:empty {
163
    display: none;
164
  }
165
}
166

167
.popover-body {
168
  padding: $popover-body-padding-y $popover-body-padding-x;
169
  color: $popover-body-color;
170
}
171