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