Mercurial > wikked

comparison static/bootstrap/less/popovers.less @ 149:d29e2f337b00

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Updated to Bootstrap 3.0.
author Ludovic Chabant <ludovic@chabant.com>
date Thu, 12 Dec 2013 21:54:04 -0800
parents a5a3d454eac9
children
comparison
equal deleted inserted replaced
148:f02e049d6546 149:d29e2f337b00
5 5
6 .popover { 6 .popover {
7 position: absolute; 7 position: absolute;
8 top: 0; 8 top: 0;
9 left: 0; 9 left: 0;
10 z-index: @zindexPopover; 10 z-index: @zindex-popover;
11 display: none; 11 display: none;
12 max-width: 276px; 12 max-width: @popover-max-width;
13 padding: 1px; 13 padding: 1px;
14 text-align: left; // Reset given new insertion method 14 text-align: left; // Reset given new insertion method
15 background-color: @popoverBackground; 15 background-color: @popover-bg;
16 -webkit-background-clip: padding-box; 16 background-clip: padding-box;
17 -moz-background-clip: padding; 17 border: 1px solid @popover-fallback-border-color;
18 background-clip: padding-box; 18 border: 1px solid @popover-border-color;
19 border: 1px solid #ccc; 19 border-radius: @border-radius-large;
20 border: 1px solid rgba(0,0,0,.2);
21 .border-radius(6px);
22 .box-shadow(0 5px 10px rgba(0,0,0,.2)); 20 .box-shadow(0 5px 10px rgba(0,0,0,.2));
23 21
24 // Overrides for proper insertion 22 // Overrides for proper insertion
25 white-space: normal; 23 white-space: normal;
26 24
32 } 30 }
33 31
34 .popover-title { 32 .popover-title {
35 margin: 0; // reset heading margin 33 margin: 0; // reset heading margin
36 padding: 8px 14px; 34 padding: 8px 14px;
37 font-size: 14px; 35 font-size: @font-size-base;
38 font-weight: normal; 36 font-weight: normal;
39 line-height: 18px; 37 line-height: 18px;
40 background-color: @popoverTitleBackground; 38 background-color: @popover-title-bg;
41 border-bottom: 1px solid darken(@popoverTitleBackground, 5%); 39 border-bottom: 1px solid darken(@popover-title-bg, 5%);
42 .border-radius(5px 5px 0 0); 40 border-radius: 5px 5px 0 0;
43
44 &:empty {
45 display: none;
46 }
47 } 41 }
48 42
49 .popover-content { 43 .popover-content {
50 padding: 9px 14px; 44 padding: 9px 14px;
51 } 45 }
52 46
53 // Arrows 47 // Arrows
54 // 48 //
55 // .arrow is outer, .arrow:after is inner 49 // .arrow is outer, .arrow:after is inner
56 50
57 .popover .arrow, 51 .popover .arrow {
58 .popover .arrow:after { 52 &,
59 position: absolute; 53 &:after {
60 display: block; 54 position: absolute;
61 width: 0; 55 display: block;
62 height: 0; 56 width: 0;
63 border-color: transparent; 57 height: 0;
64 border-style: solid; 58 border-color: transparent;
59 border-style: solid;
60 }
65 } 61 }
66 .popover .arrow { 62 .popover .arrow {
67 border-width: @popoverArrowOuterWidth; 63 border-width: @popover-arrow-outer-width;
68 } 64 }
69 .popover .arrow:after { 65 .popover .arrow:after {
70 border-width: @popoverArrowWidth; 66 border-width: @popover-arrow-width;
71 content: ""; 67 content: "";
72 } 68 }
73 69
74 .popover { 70 .popover {
75 &.top .arrow { 71 &.top .arrow {
76 left: 50%; 72 left: 50%;
77 margin-left: -@popoverArrowOuterWidth; 73 margin-left: -@popover-arrow-outer-width;
78 border-bottom-width: 0; 74 border-bottom-width: 0;
79 border-top-color: #999; // IE8 fallback 75 border-top-color: @popover-arrow-outer-fallback-color; // IE8 fallback
80 border-top-color: @popoverArrowOuterColor; 76 border-top-color: @popover-arrow-outer-color;
81 bottom: -@popoverArrowOuterWidth; 77 bottom: -@popover-arrow-outer-width;
82 &:after { 78 &:after {
79 content: " ";
83 bottom: 1px; 80 bottom: 1px;
84 margin-left: -@popoverArrowWidth; 81 margin-left: -@popover-arrow-width;
85 border-bottom-width: 0; 82 border-bottom-width: 0;
86 border-top-color: @popoverArrowColor; 83 border-top-color: @popover-arrow-color;
87 } 84 }
88 } 85 }
89 &.right .arrow { 86 &.right .arrow {
90 top: 50%; 87 top: 50%;
91 left: -@popoverArrowOuterWidth; 88 left: -@popover-arrow-outer-width;
92 margin-top: -@popoverArrowOuterWidth; 89 margin-top: -@popover-arrow-outer-width;
93 border-left-width: 0; 90 border-left-width: 0;
94 border-right-color: #999; // IE8 fallback 91 border-right-color: @popover-arrow-outer-fallback-color; // IE8 fallback
95 border-right-color: @popoverArrowOuterColor; 92 border-right-color: @popover-arrow-outer-color;
96 &:after { 93 &:after {
94 content: " ";
97 left: 1px; 95 left: 1px;
98 bottom: -@popoverArrowWidth; 96 bottom: -@popover-arrow-width;
99 border-left-width: 0; 97 border-left-width: 0;
100 border-right-color: @popoverArrowColor; 98 border-right-color: @popover-arrow-color;
101 } 99 }
102 } 100 }
103 &.bottom .arrow { 101 &.bottom .arrow {
104 left: 50%; 102 left: 50%;
105 margin-left: -@popoverArrowOuterWidth; 103 margin-left: -@popover-arrow-outer-width;
106 border-top-width: 0; 104 border-top-width: 0;
107 border-bottom-color: #999; // IE8 fallback 105 border-bottom-color: @popover-arrow-outer-fallback-color; // IE8 fallback
108 border-bottom-color: @popoverArrowOuterColor; 106 border-bottom-color: @popover-arrow-outer-color;
109 top: -@popoverArrowOuterWidth; 107 top: -@popover-arrow-outer-width;
110 &:after { 108 &:after {
109 content: " ";
111 top: 1px; 110 top: 1px;
112 margin-left: -@popoverArrowWidth; 111 margin-left: -@popover-arrow-width;
113 border-top-width: 0; 112 border-top-width: 0;
114 border-bottom-color: @popoverArrowColor; 113 border-bottom-color: @popover-arrow-color;
115 } 114 }
116 } 115 }
117 116
118 &.left .arrow { 117 &.left .arrow {
119 top: 50%; 118 top: 50%;
120 right: -@popoverArrowOuterWidth; 119 right: -@popover-arrow-outer-width;
121 margin-top: -@popoverArrowOuterWidth; 120 margin-top: -@popover-arrow-outer-width;
122 border-right-width: 0; 121 border-right-width: 0;
123 border-left-color: #999; // IE8 fallback 122 border-left-color: @popover-arrow-outer-fallback-color; // IE8 fallback
124 border-left-color: @popoverArrowOuterColor; 123 border-left-color: @popover-arrow-outer-color;
125 &:after { 124 &:after {
125 content: " ";
126 right: 1px; 126 right: 1px;
127 border-right-width: 0; 127 border-right-width: 0;
128 border-left-color: @popoverArrowColor; 128 border-left-color: @popover-arrow-color;
129 bottom: -@popoverArrowWidth; 129 bottom: -@popover-arrow-width;
130 } 130 }
131 } 131 }
132 132
133 } 133 }