corrade-http-templates – Blame information for rev 38

Subversion Repositories:
Rev:
Rev Author Line No. Line
38 office 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 .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 .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 }