Mercurial > minori

comparison dep/fmt/doc/bootstrap/popovers.less @ 343:1faa72660932

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
*: transfer back to cmake from autotools autotools just made lots of things more complicated than they should have and many things broke (i.e. translations)
author Paper <paper@paper.us.eu.org>
date Thu, 20 Jun 2024 05:56:06 -0400
parents
children
comparison
equal deleted inserted replaced
342:adb79bdde329 343:1faa72660932
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 }