]>
Commit | Line | Data |
---|---|---|
402b0346 A |
1 | /* Images */ |
2 | .pure-img-eliptical { | |
3 | border-radius: 80%; | |
4 | } | |
5 | .pure-img-rounded { | |
6 | border-radius: 3px; | |
7 | } | |
8 | .pure-img-bordered { | |
9 | background-color: #FFFFFF; | |
10 | border: 1px solid rgba(0, 0, 0, 0.2); | |
11 | padding: 5px; | |
12 | } | |
13 | ||
14 | ||
15 | /* Thumbnails */ | |
16 | .pure-thumbnails li { | |
17 | text-align: center; | |
18 | display: inline-block; | |
19 | *display: inline; | |
20 | /* IE7 inline-block hack */ | |
21 | *zoom: 1; | |
22 | vertical-align: top; | |
23 | -webkit-box-sizing: border-box; | |
24 | -moz-box-sizing: border-box; | |
25 | box-sizing: border-box; | |
26 | padding: 0.5em; | |
27 | } | |
28 | .pure-thumbnails { | |
29 | list-style: none; | |
30 | margin: 0; | |
31 | padding: 0; | |
32 | } | |
33 | ||
34 | .pure-thumbnails a:focus { | |
35 | outline: 0 none; | |
36 | } | |
37 | ||
38 | .pure-thumb { | |
39 | display: block; | |
40 | text-decoration: none; | |
41 | color: inherit; | |
42 | } | |
43 | .pure-thumb img { | |
44 | max-width: 100%; | |
45 | margin-right: auto; | |
46 | margin-left: auto; | |
47 | vertical-align: middle; /* this will remove a thin line below the image */ | |
48 | -webkit-box-sizing: border-box; | |
49 | -moz-box-sizing: border-box; | |
50 | box-sizing: border-box; | |
51 | } | |
52 | ||
53 | .pure-thumb-bordered { | |
54 | border: 1px solid rgba(0, 0, 0, 0.2); | |
55 | } | |
56 | .pure-thumb .caption { | |
57 | text-align: left; | |
58 | display: block; | |
59 | margin: 0 5px 6px; | |
60 | ||
61 | } | |
62 | .pure-thumb .caption p { | |
63 | margin: 0.3em 0 0; | |
64 | font-size: 75%; | |
65 | } | |
66 | .pure-thumb .caption .caption-head { | |
67 | font-weight: bold; | |
68 | margin-top: 0.3em; | |
69 | } | |
70 | ||
71 | .pure-thumb-eliptical img { | |
72 | border-radius: 50%; | |
73 | } | |
74 | .pure-thumb-rounded img { | |
75 | border-radius: 3px; | |
76 | } | |
77 | ||
78 | /* Badges/Pills */ | |
79 | .pure-badge, | |
80 | .pure-badge-error, | |
81 | .pure-badge-warning, | |
82 | .pure-badge-success, | |
83 | .pure-badge-info, | |
84 | .pure-badge-inverse { | |
85 | padding: 0.35em 0.9em 0.35em; | |
86 | background-color: #9D988E; | |
87 | color: #fff; | |
88 | display: inline-block; | |
89 | font-size: 11.844px; | |
90 | font-weight: bold; | |
91 | line-height: 1.2em; | |
92 | vertical-align: baseline; | |
93 | white-space: nowrap; | |
94 | border-radius: 20px; | |
95 | margin: 0.2em; | |
96 | } | |
97 | .pure-badge-error { | |
98 | background-color: #D13C38; | |
99 | } | |
100 | .pure-badge-warning { | |
101 | background-color: #E78C05; | |
102 | } | |
103 | .pure-badge-success { | |
104 | background-color: rgb(83, 180, 79); | |
105 | } | |
106 | .pure-badge-info { | |
107 | background-color: rgb(18, 169, 218); | |
108 | } | |
109 | .pure-badge-inverse { | |
110 | background-color: #4D370C; | |
111 | } | |
112 | ||
113 | /* Alerts */ | |
114 | .pure-alert { | |
115 | position: relative; | |
116 | margin-bottom: 1em; | |
117 | padding: 1em; | |
118 | background: #ccc; | |
119 | border-radius: 3px; | |
120 | } | |
121 | ||
122 | .pure-alert label { | |
123 | display: inline-block; | |
124 | *display: inline; | |
125 | /* IE7 inline-block hack */ | |
126 | *zoom: 1; | |
127 | white-space: nowrap; | |
128 | } | |
129 | ||
130 | .pure-alert { | |
131 | background-color: rgb(209, 235, 238); | |
132 | color: rgb(102, 131, 145); | |
133 | } | |
134 | .pure-alert-error { | |
135 | background-color: #D13C38; | |
136 | color: #fff; | |
137 | } | |
138 | ||
139 | .pure-alert-warning { | |
140 | background-color: rgb(250, 191, 103); | |
141 | color: rgb(151, 96, 13); | |
142 | } | |
143 | ||
144 | .pure-alert-success { | |
145 | background-color: rgb(83, 180, 79); | |
146 | color: #fff; | |
147 | } | |
148 | ||
149 | ||
150 | /* Contextual Modals */ | |
151 | ||
152 | .pure-popover { | |
153 | position: relative; | |
154 | width: 300px; | |
155 | background-color: #f0f1f3; | |
156 | color: #2f3034; | |
157 | padding: 15px; | |
158 | border: 1px solid #bfc0c8; | |
159 | border-radius: 2px; | |
160 | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); | |
161 | box-padding: border-box; | |
162 | -webkit-background-clip: padding-box; | |
163 | -moz-background-clip: padding; | |
164 | background-clip: padding-box; | |
165 | } | |
166 | ||
167 | .pure-arrow-border, .pure-arrow { | |
168 | border-style: solid; | |
169 | border-width: 10px; | |
170 | height:0; | |
171 | width:0; | |
172 | position:absolute; | |
173 | } | |
174 | ||
175 | ||
176 | /* POPOVER ARROW POSITIONING BOTTOM */ | |
177 | ||
178 | .pure-popover.bottom .pure-arrow-border { | |
179 | border-color: #bfc0c8 transparent transparent transparent; | |
180 | bottom: -20px; | |
181 | left: 50%; | |
182 | } | |
183 | .pure-popover.bottom .pure-arrow { | |
184 | border-color: #f0f1f3 transparent transparent transparent; | |
185 | bottom:-19px; | |
186 | left: 50%; | |
187 | } | |
188 | ||
189 | /* POPOVER ARROW POSITIONING TOP*/ | |
190 | ||
191 | .pure-popover.top .pure-arrow-border { | |
192 | border-color: transparent transparent #bfc0c8 transparent; | |
193 | top: -21px; | |
194 | left: 50%; | |
195 | } | |
196 | .pure-popover.top .pure-arrow { | |
197 | border-color: transparent transparent #f0f1f3 transparent; | |
198 | top:-20px; | |
199 | left: 50%; | |
200 | } | |
201 | ||
202 | /* POPOVER ARROW POSITIONING RIGHT*/ | |
203 | ||
204 | .pure-popover.right .pure-arrow-border { | |
205 | border-color: transparent transparent transparent #bfc0c8; | |
206 | top: 45%; | |
207 | right: -21px; | |
208 | } | |
209 | .pure-popover.right .pure-arrow { | |
210 | border-color: transparent transparent transparent #f0f1f3; | |
211 | top:45%; | |
212 | right: -20px; | |
213 | } | |
214 | ||
215 | ||
216 | /* POPOVER ARROW POSITIONING LEFT*/ | |
217 | ||
218 | .pure-popover.left .pure-arrow-border { | |
219 | border-color: transparent #bfc0c8 transparent transparent; | |
220 | top: 45%; | |
221 | left: -21px; | |
222 | } | |
223 | .pure-popover.left .pure-arrow { | |
224 | border-color: transparent #f0f1f3 transparent transparent; | |
225 | top:45%; | |
226 | left: -20px; | |
227 | } | |
228 | ||
229 | ||
230 | /* BUTTON IMPROVEMENTS */ | |
231 | .pure-button-block { | |
232 | display: block; | |
233 | } | |
234 | .pure-button-small { | |
235 | padding: .6em 2em .65em; | |
236 | font-size:70%; | |
237 | } | |
238 | .pure-button-large { | |
239 | padding: .8em 5em .9em; | |
240 | font-size:110%; | |
241 | } | |
242 | .pure-button-selected { | |
243 | background-color: #345fcb; | |
244 | color: #fff; | |
245 | } | |
246 | .pure-button-secondary { | |
247 | background: rgb(161, 195, 238); | |
248 | color: rgb(26, 88, 122); | |
249 | } | |
250 | .pure-button-error { | |
251 | background: rgb(214, 86, 75); | |
252 | color: white; | |
253 | } | |
254 | .pure-button-success { | |
255 | background: rgb(54, 197, 71); | |
256 | color: white; | |
257 | } | |
258 | .pure-button-warning { | |
259 | background: rgb(255, 163, 0); | |
260 | color: white; | |
261 | } | |
262 |