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