adjusted display of product thumbnail images
[ryf-theme.git] / css / drupal-bootstrap.css
CommitLineData
5f752142
VSB
1/**
2 * Alert styling.
3 */
4.alert-sm {
5 padding: 5px 10px;
6}
7.alert a {
8 font-weight: bold;
9}
10.alert-success a,
11.alert-success a:hover,
12.alert-success a:focus {
13 color: #2b542c;
14}
15.alert-info a,
16.alert-info a:hover,
17.alert-info a:focus {
18 color: #245269;
19}
20.alert-warning a,
21.alert-warning a:hover,
22.alert-warning a:focus {
23 color: #66512c;
24}
25.alert-danger a,
26.alert-danger a:hover,
27.alert-danger a:focus {
28 color: #843534;
29}
30/**
31 * AJAX (throbber) styling.
32 */
33@keyframes glyphicon-spin {
34 0% {
35 transform: rotate(0deg);
36 }
37 100% {
38 transform: rotate(359deg);
39 }
40}
41.glyphicon-spin {
42 display: inline-block;
43 animation: glyphicon-spin 1s infinite linear;
44}
45a .glyphicon-spin {
46 display: inline-block;
47 text-decoration: none;
48}
49html.js .btn .ajax-throbber {
50 margin-left: 0.5em;
51 margin-right: -0.25em;
52}
53html.js .form-item .input-group-addon .glyphicon {
54 color: #777777;
55 opacity: 0.5;
56 transition: 150ms color, 150ms opacity;
57}
58html.js .form-item .input-group-addon .glyphicon.glyphicon-spin {
59 color: #337ab7;
60 opacity: 1;
61}
62html.js .form-item .input-group-addon .input-group-addon {
63 background-color: #ffffff;
64}
65html.js .ajax-new-content:empty {
66 display: none !important;
67}
68/**
69 * @file
70 * Visual styles for fields.
71 */
72.field--label {
73 font-weight: bold;
74}
75.field--label-inline .field--label,
76.field--label-inline .field--items {
77 float: left;
78 /*LTR*/
79}
80.field--label-inline .field--label,
81.field--label-inline > .field--item,
82.field--label-inline .field--items {
83 padding-right: 0.5em;
84}
85[dir="rtl"] .field--label-inline .field--label,
86[dir="rtl"] .field--label-inline .field--items {
87 padding-left: 0.5em;
88 padding-right: 0;
89 float: right;
90 /*RTL*/
91}
92.field--label-inline .field--label::after {
93 content: ':';
94}
95/**
96 * File (and Image Widget) styles.
97 */
98.file {
99 display: table;
100 font-size: 75%;
101 font-weight: 700;
102 margin: 5px 0;
103 width: 100%;
104}
105.file > span {
106 background: #fff;
107 color: #337ab7;
108 border-bottom: 1px solid #ccc;
109 border-top: 1px solid #ccc;
110}
111.file > span:first-child {
112 border-left: 1px solid #ccc;
113}
114.file > span:last-child {
115 border-right: 1px solid #ccc;
116}
117.file > .tabledrag-changed {
118 background: #fcf8e3;
119 border-radius: 0;
120 color: #8a6d3b;
121 display: table-cell;
122 padding: 0 1em;
123 top: 0;
124 vertical-align: middle;
125 border-left: 1px solid inherit;
126}
127.file > .tabledrag-changed,
128.file > .tabledrag-changed:last-child {
129 border: 1px solid #f7e1b5;
130}
131.file-icon {
132 display: table-cell;
133 font-size: 150%;
134 padding: 0.25em 0.5em;
135 text-align: center;
136 vertical-align: middle;
137}
138.file-link {
139 display: table-cell;
140 vertical-align: middle;
141 width: 100%;
142}
143.file-link a,
144.file-link a:hover,
145.file-link a:focus,
146.file-link a:active {
147 color: inherit;
148}
149.file-size {
150 display: table-cell;
151 padding: 0 1em;
152 text-align: right;
153 white-space: pre;
154 vertical-align: middle;
155}
156.image-widget.row {
157 overflow: hidden;
158}
159/**
160 * Filter styles.
161 */
162.filter-wrapper {
163 background-color: #fff;
164 border: 1px solid #ddd;
165 border-top: 0;
166 border-radius: 0 0 4px 4px;
167 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
168 margin-bottom: 0;
169 padding: 10px;
170 height: 51px;
171}
172.filter-help {
173 float: right;
174 line-height: 1;
175 margin: 0.5em 0 0;
176}
177.nav.nav-tabs.filter-formats {
178 margin-bottom: 15px;
179}
180/**
181 * Form styles.
182 */
183table .checkbox.form-no-label,
184table .radio.form-no-label {
185 margin-bottom: 0;
186 margin-top: 0;
187}
188.select-wrapper {
189 display: inline-block;
190 position: relative;
191 width: 100%;
192}
193.form-inline .select-wrapper {
194 width: auto;
195}
196.input-group .select-wrapper {
197 display: table-cell;
198}
199.input-group .select-wrapper:first-child .form-control:first-child {
200 border-top-left-radius: 4px;
201 border-bottom-left-radius: 4px;
202}
203.input-group .select-wrapper:last-child .form-control:first-child {
204 border-top-right-radius: 4px;
205 border-bottom-right-radius: 4px;
206}
207.select-wrapper select {
208 -webkit-appearance: none;
209 -moz-appearance: none;
210 appearance: none;
211 line-height: 1;
212 padding-right: 2em;
213}
214.select-wrapper select::-ms-expand {
215 opacity: 0;
216}
217.select-wrapper:after {
218 color: #337ab7;
219 content: '▼';
220 font-style: normal;
221 font-weight: 400;
222 line-height: 1;
223 margin-top: -0.5em;
224 padding-right: 0.5em;
225 pointer-events: none;
226 position: absolute;
227 right: 0;
228 top: 50%;
229 z-index: 10;
230}
231.has-glyphicons .select-wrapper:after {
232 -webkit-font-smoothing: antialiased;
233 -moz-osx-font-smoothing: grayscale;
234 content: '\e114';
235 display: inline-block;
236 font-family: 'Glyphicons Halflings';
237}
238.has-error .select-wrapper:after {
239 color: #a94442;
240}
241.has-success .select-wrapper:after {
242 color: #3c763d;
243}
244.has-warning .select-wrapper:after {
245 color: #8a6d3b;
246}
247.form-required:after {
248 background-image: url('../images/required.svg');
249 background-size: 10px 7px;
250 content: "";
251 display: inline-block;
252 vertical-align: super;
253 line-height: 1;
254 height: 7px;
255 width: 10px;
256}
257.form-actions .btn,
258.form-actions .btn-group {
259 margin-right: 10px;
260}
261.form-actions .btn-group .btn {
262 margin-right: 0;
263}
264/**
265 * Icon styles.
266 */
267a.icon-before .glyphicon,
268a .glyphicon.icon-before {
269 margin-right: 0.25em;
270}
271a.icon-after .glyphicon,
272a .glyphicon.icon-after {
273 margin-left: 0.25em;
274}
275.btn.icon-before .glyphicon,
276.btn .glyphicon.icon-before {
277 margin-left: -0.25em;
278 margin-right: 0.25em;
279}
280.btn.icon-after .glyphicon,
281.btn .glyphicon.icon-after {
282 margin-left: 0.25em;
283 margin-right: -0.25em;
284}
285/**
286 * Navbar styling.
287 */
288body {
289 position: relative;
290}
291body.navbar-is-static-top {
292 margin-top: 0;
293}
294body.navbar-is-fixed-top {
295 margin-top: 65px;
296}
297body.navbar-is-fixed-bottom {
298 padding-bottom: 65px;
299}
300@media screen and (min-width: 768px) {
301 body {
302 margin-top: 15px;
303 }
304}
305@media screen and (max-width: 767px) {
306 body.toolbar-vertical.navbar-is-fixed-top .toolbar-bar,
307 body.toolbar-vertical.navbar-is-fixed-bottom .toolbar-bar {
308 position: fixed;
309 }
310 body.toolbar-vertical.navbar-is-fixed-top header,
311 body.toolbar-vertical.navbar-is-fixed-bottom header {
312 z-index: 500;
313 }
314 body.toolbar-vertical.navbar-is-fixed-top header {
315 top: 39px;
316 }
317}
318@media screen and (min-width: 768px) {
319 .navbar.container {
320 max-width: 720px;
321 }
322}
323@media screen and (min-width: 992px) {
324 .navbar.container {
325 max-width: 940px;
326 }
327}
328@media screen and (min-width: 1200px) {
329 .navbar.container {
330 max-width: 1140px;
331 }
332}
333.navbar .logo {
334 margin-right: -15px;
335 padding-left: 15px;
336 padding-right: 15px;
337}
338@media screen and (min-width: 768px) {
339 .navbar .logo {
340 margin-right: 0;
341 padding-left: 0;
342 }
343}
344/**
345 * Node styling.
346 */
347.is-unpublished {
348 background-color: #fff4f4;
349}
350.node-preview-container {
351 margin-top: -15px;
352}
353.node-preview-form-select {
354 padding: 15px;
355}
356/**
357 * Panel styling.
358 */
359.panel-title {
360 display: block;
361 margin: -10px -15px;
362 padding: 10px 15px;
363}
364.panel-title,
365.panel-title:hover,
366.panel-title:focus,
367.panel-title:hover:focus {
368 color: inherit;
369}
370.panel-title:focus,
371.panel-title:hover {
372 text-decoration: none;
373}
374/**
375 * Progress bar styles.
376 */
377.progress-wrapper {
378 margin-bottom: 15px;
379}
380.progress-wrapper:last-child .progress {
381 margin-bottom: 5px;
382}
383.progress-wrapper .message {
384 font-weight: 700;
385 margin-bottom: 5px;
386}
387.progress-wrapper .percentage,
388.progress-wrapper .progress-label {
389 font-size: 12px;
390}
391.progress-wrapper .progress-bar {
392 min-width: 2em;
393}
394/**
395 * Table drag styles.
396 */
397.tabledrag-toggle-weight {
398 float: right;
399 margin: 1px 2px 1px 10px;
400}
401.tabledrag-changed-warning {
402 margin: 0;
403 overflow: hidden;
404}
405.tabledrag-handle {
406 color: #777777;
407 cursor: move;
408 float: left;
409 font-size: 125%;
410 line-height: 1;
411 margin: -10px 0 0 -10px;
412 padding: 10px;
413}
414.tabledrag-handle:hover,
415.tabledrag-handle:focus {
416 color: #337ab7;
417}
418.indentation {
419 float: left;
420 /* LTR */
421 height: 1.7em;
422 margin: -0.4em 0.2em -0.4em -0.4em;
423 /* LTR */
424 padding: 0.42em 0 0.42em 0.6em;
425 /* LTR */
426 width: 20px;
427}
428[dir="rtl"] .indentation {
429 float: right;
430 margin: -0.4em -0.4em -0.4em 0.2em;
431 padding: 0.42em 0.6em 0.42em 0;
432}
433/**
434 * Tabs and local action styles.
435 */
436.local-actions {
437 margin: 10px 0 10px -5px;
438}
439.tabs--secondary {
440 margin: 10px 0 5px;
441}
442/**
443 * Missing Bootstrap 2 tab styling.
444 * @see http://stackoverflow.com/questions/18432577/stacked-tabs-in-bootstrap-3
445 * @see http://bootply.com/74926
446 */
447.tabbable {
448 margin-bottom: 20px;
449}
450.tabs-below > .nav-tabs,
451.tabs-left > .nav-tabs,
452.tabs-right > .nav-tabs {
453 border-bottom: 0;
454}
455.tabs-below > .nav-tabs .summary,
456.tabs-left > .nav-tabs .summary,
457.tabs-right > .nav-tabs .summary {
458 color: #777777;
459 font-size: 12px;
460}
461.tab-pane > .panel-heading {
462 display: none;
463}
464.tab-content > .active {
465 display: block;
466}
467.tabs-below > .nav-tabs {
468 border-top: 1px solid #ddd;
469}
470.tabs-below > .nav-tabs > li {
471 margin-top: -1px;
472 margin-bottom: 0;
473}
474.tabs-below > .nav-tabs > li > a {
475 border-radius: 0 0 4px 4px;
476}
477.tabs-below > .nav-tabs > li > a:hover,
478.tabs-below > .nav-tabs > li > a:focus {
479 border-top-color: #ddd;
480 border-bottom-color: transparent;
481}
482.tabs-below > .nav-tabs > .active > a,
483.tabs-below > .nav-tabs > .active > a:hover,
484.tabs-below > .nav-tabs > .active > a:focus {
485 border-color: transparent #ddd #ddd #ddd;
486}
487.tabs-left > .nav-tabs,
488.tabs-right > .nav-tabs {
489 padding-bottom: 20px;
490 width: 220px;
491}
492.tabs-left > .nav-tabs > li,
493.tabs-right > .nav-tabs > li {
494 float: none;
495}
496.tabs-left > .nav-tabs > li:focus,
497.tabs-right > .nav-tabs > li:focus {
498 outline: 0;
499}
500.tabs-left > .nav-tabs > li > a,
501.tabs-right > .nav-tabs > li > a {
502 margin-right: 0;
503 margin-bottom: 3px;
504}
505.tabs-left > .nav-tabs > li > a:focus,
506.tabs-right > .nav-tabs > li > a:focus {
507 outline: 0;
508}
509.tabs-left > .tab-content,
510.tabs-right > .tab-content {
511 border-radius: 0 4px 4px 4px;
512 border: 1px solid #ddd;
513 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
514 overflow: hidden;
515 padding: 10px 15px;
516}
517.tabs-left > .nav-tabs {
518 float: left;
519 margin-right: -1px;
520}
521.tabs-left > .nav-tabs > li > a {
522 border-radius: 4px 0 0 4px;
523}
524.tabs-left > .nav-tabs > li > a:hover,
525.tabs-left > .nav-tabs > li > a:focus {
526 border-color: #eeeeee #ddd #eeeeee #eeeeee;
527}
528.tabs-left > .nav-tabs > .active > a,
529.tabs-left > .nav-tabs > .active > a:hover,
530.tabs-left > .nav-tabs > .active > a:focus {
531 border-color: #ddd transparent #ddd #ddd;
532 box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.05);
533}
534.tabs-right > .nav-tabs {
535 float: right;
536 margin-left: -1px;
537}
538.tabs-right > .nav-tabs > li > a {
539 border-radius: 0 4px 4px 0;
540}
541.tabs-right > .nav-tabs > li > a:hover,
542.tabs-right > .nav-tabs > li > a:focus {
543 border-color: #eeeeee #eeeeee #eeeeee #ddd;
544 box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.05);
545}
546.tabs-right > .nav-tabs > .active > a,
547.tabs-right > .nav-tabs > .active > a:hover,
548.tabs-right > .nav-tabs > .active > a:focus {
549 border-color: #ddd #ddd #ddd transparent;
550}
551/**
552 * Toolbar module styling.
553 */
554body.toolbar-fixed .toolbar-oriented .toolbar-bar {
555 z-index: 1031;
556}
557body.toolbar-fixed .navbar-fixed-top {
558 top: 39px;
559}
560body.toolbar-fixed.toolbar-horizontal.toolbar-tray-open .navbar-fixed-top {
561 top: 79px;
562}
563body.toolbar-fixed.toolbar-vertical.toolbar-tray-open .navbar-fixed-top {
564 left: 240px;
565}
566body.toolbar-fixed.toolbar-vertical.toolbar-tray-open.toolbar-fixed {
567 margin-left: 240px;
568}
569body.toolbar-fixed.toolbar-vertical.toolbar-tray-open.toolbar-fixed .toolbar-tray {
570 padding-bottom: 40px;
571}
572body.toolbar-fixed.toolbar-vertical.toolbar-tray-open.toolbar-fixed .toolbar-tray,
573body.toolbar-fixed.toolbar-vertical.toolbar-tray-open.toolbar-fixed .toolbar-tray > .toolbar-lining:before {
574 width: 240px;
575}
576body.toolbar-loading {
577 margin-top: 0;
578}
579body.toolbar-loading.toolbar {
580 margin-bottom: 15px;
581}
582/**
583 * jQuery UI autocomplete widget style overrides.
584 *
585 * @todo Remove once jQuery UI is no longer used?
586 */
587.ui-autocomplete {
588 background: #fff;
589 background-clip: padding-box;
590 border: 1px solid #ccc;
591 border: 1px solid rgba(0, 0, 0, 0.15);
592 border-radius: 4px;
593 box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
594 color: inherit;
595 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
596 font-size: 14px;
597 list-style: none;
598 min-width: 160px;
599 padding: 5px 0;
600 text-align: left;
601 z-index: 1000;
602}
603.ui-autocomplete .ui-menu-item {
604 border: 0;
605 border-radius: 0;
606 clear: both;
607 color: #333333;
608 cursor: pointer;
609 display: block;
610 font-weight: normal;
611 line-height: 1.42857143;
612 margin: 0;
613 outline: 0;
614 padding: 3px 20px;
615 text-decoration: none;
616 white-space: nowrap;
617}
618.ui-autocomplete .ui-menu-item.ui-state-hover {
619 background: #f5f5f5;
620 color: #262626;
621}
622.ui-autocomplete .ui-menu-item.ui-state-active,
623.ui-autocomplete .ui-menu-item.ui-state-focus {
624 background: #337ab7;
625 color: #fff;
626}
627ol,
628ul {
629 padding-left: 1.5em;
630}
631.popover ol:last-child,
632.popover ul:last-child {
633 margin-bottom: 0;
634}
635.page-header {
636 margin-top: 0;
637}
638.footer {
639 margin-top: 45px;
640 padding-top: 35px;
641 padding-bottom: 36px;
642 border-top: 1px solid #E5E5E5;
643}
644p:last-child,
645.form-group:last-child,
646.panel:last-child {
647 margin-bottom: 0;
648}
649.region-help > .glyphicon {
650 font-size: 18px;
651 float: left;
652 margin: -0.05em 0.5em 0 0;
653}
654.region-help .block {
655 overflow: hidden;
656}
657.help-block,
658.control-group .help-inline {
659 color: #777777;
660 font-size: 12px;
661 margin: 5px 0 10px;
662 padding: 0;
663}
664.help-block:first-child,
665.control-group .help-inline:first-child {
666 margin-top: 0;
667}