fix auto clear issue for custom 2 colum mode
[ryf-theme.git] / css / style.css
1 /**
2 * If using a CSS pre-processor, tell it to overwrite this file. If not, place
3 * your custom CSS modifications here.
4 */
5
6 body { margin: 0; min-width: 320px; }
7
8 a { transition: 0.3s; }
9
10
11 /* etcetera */
12
13
14 .feed-icons,
15 .more-link {
16 margin-top: 15px;
17 clear: both;
18 }
19 .more-link {
20 font-weight: bold;
21 }
22
23 .block-views {
24 margin-top: 20px;
25 }
26
27 /* Navbar */
28
29
30 .navbar-default {
31 background: #000;
32 color: #FFF;
33 border: none;
34 border-radius: 0px;
35 box-sizing: content-box;
36 align-items: center;
37 margin-bottom: 100px;
38 min-height: 100px;
39 }
40
41 .navbar-header,
42 #navbar-collapse {
43 max-width: 1150px;
44 padding: 0;
45 margin: 0 auto;
46 border: none;
47 overflow: hidden;
48 }
49
50 .navbar-default .navbar-toggle { display: none; }
51
52 .navbar-header {
53 position: absolute;
54 top: 5px;
55 }
56
57 .navbar-brand { display: none; }
58
59 #block-ryf-main-menu .navbar-nav { margin-left: 180px; }
60
61 .navbar-default .navbar-nav > li > a:focus {
62 outline: none;
63 }
64
65 .navbar-default .navbar-nav > li > a,
66 .navbar-default .navbar-nav > .active > a,
67 .navbar-default .navbar-nav > li > a:link,
68 .navbar-default .navbar-nav > .active > a:link,
69 .navbar-default .navbar-nav > li > a:visited,
70 .navbar-default .navbar-nav > .active > a:visited {
71 color: #FFF;
72 background: #000;
73 border-bottom: 2px solid transparent;
74 padding-bottom: 10px;
75 margin-bottom: 5px;
76 }
77
78 .navbar-default .navbar-nav > li > a:hover,
79 .navbar-default .navbar-nav > .active > a:hover,
80 .navbar-default .navbar-nav > li > a:active,
81 .navbar-default .navbar-nav > .active > a:active {
82 color: #edd400;
83 background: #000;
84 border-bottom: 2px solid #edd400;
85 padding-bottom: 5px;
86 margin-bottom: 10px;
87 }
88
89 .page-header {
90 border-bottom: 2px solid #000;
91 font-size: 2em;
92 }
93
94 .region-header .search-block-form {
95 width: 300px;
96 float: right;
97 }
98
99 @media screen and (min-width: 520px) and (max-width: 599px) {
100 .logo img { margin-left: 50px; }
101 #block-ryf-main-menu .navbar-nav { margin-left: 230px; }
102 }
103
104 @media screen and (min-width: 600px) and (max-width: 767px) {
105 .logo img { margin-left: 100px; }
106 #block-ryf-main-menu .navbar-nav { margin-left: 280px; }
107 }
108
109 @media screen and (max-width: 767px) {
110 .logo img { height: 150px; margin-top: 25px; }
111 .navbar-default { min-height: 230px; margin-bottom: 30px; }
112 #block-ryf-main-menu .navbar-nav { max-width: 130px; }
113 }
114
115 @media screen and (min-width: 768px) {
116 .navbar-nav { margin-top: 40px; }
117 }
118
119
120 /* Selectors */
121
122
123 @media screen and (min-width: 768px) {
124 .form-inline .form-item .select-wrapper {
125 display: block;
126 }
127 .form-inline .form-actions {
128 margin-top: 21px;
129 }
130 }
131
132
133 /* RYF List */
134
135
136 .ryf-list-row {
137 padding: 0;
138 margin: 0 auto;
139 overflow: auto;
140 }
141
142 .ryf-list {
143 float: left;
144 margin: 0;
145 padding: 0.5em;
146 position:relative;
147 list-style: none;
148 }
149
150 .ryf-list article {
151 border: 1px solid #ececec;
152 border-radius: 5px;
153 padding: 1em;
154 box-shadow: 2px 2px 5px #ddd;
155 transition: 0.3s;
156 }
157
158 .ryf-list article:hover {
159 box-shadow: 0px 0px 5px #aaa;
160 }
161
162 .ryf-list .field--type-image {
163 width: 150px;
164 height: 150px;
165 background: #fff;
166 border-radius: 10px;
167 display: flex;
168 align-items: center;
169 }
170
171 .ryf-list .field--name-field-image {
172 margin: 0 auto 10px auto;
173 }
174
175 .ryf-list img {
176 max-width: 150px;
177 max-height: 150px;
178 object-fit: contain;
179 overflow: hidden;
180 }
181
182 .ryf-list img:hover {
183 border-radius: 0;
184 }
185
186 .ryf-list h2 {
187 text-align: left;
188 font-size: 1.5em;
189 font-weight: 500;
190 line-height: 1.2em;
191 margin: 0;
192 padding: 0;
193 padding-bottom: 1em;
194 }
195
196 .ryf-list a {
197 color: #118991;
198 text-decoration: none;
199 }
200
201 .ryf-list a:hover {
202 color: #000;
203 }
204
205 .ryf-list .node-readmore,
206 .ryf-list .tags,
207 .ryf-list .supplier {
208 width: 100%;
209 float: left;
210 font-size: 0.9em;
211 border-top: 1px solid #ccc4c4;
212 margin-top: 5px;
213 padding-top: 5px;
214 color: #afadad;
215 }
216
217 .ryf-list .node-readmore {
218 text-align: right;
219 }
220
221 @media screen and (min-width: 450px) and (max-width: 659px) {
222 .ryf-list-row {
223 max-width: 600px;
224 }
225 .ryf-list {
226 max-width: 300px;
227 float: none;
228 margin: 0 auto;
229 }
230 }
231 @media screen and (min-width: 660px) and (max-width: 767px) {
232 .ryf-list-row {
233 max-width: 600px;
234 }
235 .ryf-list-row {
236 margin: 0 auto;
237 max-width: 660px;
238 }
239 .ryf-list {
240 max-width: 300px;
241 float: left;
242 }
243 .auto-clear .col-xs-12:nth-child(odd){clear:left;}
244 }
245
246
247 /* Vendors list */
248
249
250 .vendors-list-row {
251 padding: 10px;
252 margin: 0 auto;
253 overflow: auto;
254 }
255
256 @media screen and (max-width: 767px) {
257 .vendors-list-row {
258 margin: 0px auto;
259 }
260
261 .vendors-list {
262 margin-bottom: 40px;
263 list-style: none;
264
265 overflow: auto;
266 }
267
268 .vendors-list .views-field-field-icon {
269 width: 220px;
270
271 margin: 0px auto 20px auto;
272 }
273
274 .vendors-list .views-field-field-icon img {
275 margin: 0 auto;
276 }
277
278 .vendors-list .views-field-name,
279 .vendors-list .views-field-description__value {
280 max-width: 300px;
281 margin: 0 auto 10px auto;
282 }
283
284 .vendors-list .views-field-name {
285 font-weight: bold;
286 font-size: 18px;
287 text-align: center;
288 }
289
290 }
291
292 @media screen and (min-width: 768px) {
293 .vendors-list-row {
294 width: 600px;
295 margin: 0px auto;
296 }
297
298 .vendors-list {
299 list-style: none;
300 clear: left;
301
302 overflow: auto;
303 }
304
305 .vendors-list .views-field-field-icon {
306 width: 220px;
307 height: 220px;
308
309 margin-bottom: 40px;
310
311 float: left;
312 }
313
314 .vendors-list .views-field-field-icon img {
315 margin: 0 auto;
316 }
317
318 .vendors-list .views-field-name,
319 .vendors-list .views-field-description__value {
320 margin-left: 300px;
321 }
322
323 .vendors-list .views-field-name {
324 margin-bottom: 10px;
325 font-weight: bold;
326 font-size: 18px;
327 }
328 }
329
330
331 /* Sidebars */
332
333
334 @media screen and (max-width: 767px) {
335 .path-products #block-views-block-categories-categories-block { display: none; }
336 }
337
338
339 /* Vendor and Category taxonomy term pages */
340
341
342 .view-taxonomy-term .view-header .field--name-field-icon img {
343 margin: 0 auto;
344 }
345
346 .view-filters {
347 clear: left;
348 }
349
350 @media screen and (max-width: 559px) {
351 .view-taxonomy-term .view-header {
352 margin: 0 auto 40px auto;
353
354 overflow: auto;
355 }
356
357 .view-taxonomy-term .view-header .field--name-field-icon {
358 margin: 0 auto 20px auto;
359 width: 220px;
360 }
361
362 .view-taxonomy-term .view-header .field--name-description {
363 max-width: 360px;
364 margin: 0 auto;
365 padding: 0 10px;
366 }
367
368 }
369
370 @media screen and (min-width: 560px) {
371 .view-taxonomy-term .view-header {
372 margin: 0 0 40px 0;
373
374 overflow: auto;
375 }
376
377 .view-taxonomy-term .view-header .field--name-field-icon {
378 width: 220px;
379
380 float: left;
381 }
382
383 .view-taxonomy-term .view-header .field--name-description {
384 margin-left: 260px;
385 }
386
387 }
388
389 @media screen and (min-width: 768px) {
390 .view-taxonomy-term .view-header {
391 max-width: 700px;
392 }
393 }
394
395
396 /* Product */
397
398
399 @media screen and (max-width: 767px) {
400 .page-node-type-product .product {
401 max-width: 382px;
402 margin: 0 auto;
403 }
404 }
405
406 @media screen and (min-width: 768px) and (max-width: 991px) {
407 .page-node-type-product .product {
408 width: 700px;
409 margin: 0 auto;
410 }
411 }
412
413 @media screen and (min-width: 992px) {
414 .page-node-type-product .product {
415 width: 800px;
416 margin: 0 auto;
417 }
418 }
419
420 .page-node-type-product .product .field--name-field-image {
421 padding: 10px;
422
423 border: 1px solid #888;
424 border-radius: 10px;
425 }
426
427 .page-node-type-product .product .field--name-field-image img {
428 margin: 0 auto;
429 }
430
431 .page-node-type-product .product .field--name-field-extra-images {
432 padding: 5px;
433
434 display: flex;
435 align-items: center;
436
437 border: 1px solid #888;
438 border-radius: 10px;
439 }
440
441 .page-node-type-product .product .field--name-field-extra-images .field--item {
442 display: inline-block;
443 margin: auto;
444 padding: 5px;
445 }
446
447 .page-node-type-product .product .field--name-field-categories,
448 .page-node-type-product .product .field--name-field-vendor {
449 margin: 10px 10px 20px 0px;
450 padding: 10px;
451 border: 1px solid #888;
452 border-radius: 10px;
453 }
454
455 .page-node-type-product .product .field--name-field-categories .field--item {
456 display: list-item;
457 list-style: circle;
458 margin-left: 15px;
459 }
460
461 /* product page colors */
462 .page-node-type-product .product .field--name-field-image {
463 background-color: #fff;
464 border-color: #aaa;
465 }
466 .page-node-type-product .product .field--name-field-extra-images {
467 background-color: #f3f3f3;
468 border-color: #aaa;
469 }
470 .page-node-type-product .product .field--name-field-categories {
471 background-color: #def;
472 border-color: #8ad;
473 }
474 .page-node-type-product .product .field--name-field-vendor {
475 background-color: #dfe;
476 border-color: #8da;
477 }
478
479 @media screen and (max-width: 767px) {
480 .page-node-type-product .product .field--name-field-extra-images {
481 margin: 10px auto 0px auto;
482 }
483
484 .page-node-type-product .product .field--name-body,
485 .page-node-type-product .product .field--name-field-vendor-product-link,
486 .page-node-type-product .product .field--name-field-certification-details,
487 .page-node-type-product .product .field--name-field-certification-date,
488 .page-node-type-product .product .field--name-field-source-code-links {
489 margin-bottom: 20px;
490 }
491
492 .page-node-type-product .product .field--name-field-categories,
493 .page-node-type-product .product .field--name-field-vendor {
494 margin-bottom: 0px;
495 float: left;
496 }
497
498 .page-node-type-product .product .field--name-body {
499 padding-top: 20px;
500 clear: both;
501 }
502 }
503
504
505 @media screen and (min-width: 768px) {
506 .page-node-type-product .product .field--name-field-image {
507 width: 382px;
508 float: left;
509 }
510
511 .page-node-type-product .product .field--name-field-extra-images {
512 float: left;
513 clear: left;
514
515 width: 382px;
516 margin-top: 10px;
517 }
518
519 .page-node-type-product .product .field--name-body,
520 .page-node-type-product .product .field--name-field-vendor-product-link,
521 .page-node-type-product .product .field--name-field-certification-details,
522 .page-node-type-product .product .field--name-field-certification-date,
523 .page-node-type-product .product .field--name-field-source-code-links {
524 margin-left: 400px;
525 margin-bottom: 20px;
526 }
527
528 .page-node-type-product .product .field--name-field-categories {
529 float: left;
530 clear: left;
531 }
532
533 .page-node-type-product .product .field--name-field-vendor {
534 float: left;
535 }
536
537 }
538
539
540 /* News and Product Announcements */
541
542
543 .page-node-type-product-announcement .page-header,
544 .page-node-type-product-announcement .tabs--primary,
545 .page-node-type-product-announcement .region-content,
546 .page-node-type-general-news-item .page-header,
547 .page-node-type-general-news-item .tabs--primary,
548 .page-node-type-general-news-item .region-content,
549 .page-node-type-page .page-header,
550 .page-node-type-page .tabs--primary,
551 .page-node-type-page .region-content,
552 .path-news .page-header,
553 .path-news .tabs--primary,
554 .path-news .region-content {
555 max-width: 800px;
556 margin: 0 auto;
557 }
558
559 /* don't apply above max-width rule to main page */
560 .path-frontpage .page-header,
561 .path-frontpage .tabs--primary,
562 .path-frontpage .region-content {
563 max-width: 2000px; /* high number beyond the max */
564 }
565
566 .page-node-type-page .page-header {
567 margin-bottom: 20px;
568 }
569
570 .path-news h2,
571 .block-views-blocknews-news-block article h2 {
572 font-size: 25px;
573 }
574
575 .page-node-type-product-announcement .author,
576 .page-node-type-general-news-item .author {
577 margin: 10px 0 20px 0;
578 font-style: oblique;
579 }
580
581 .page-node-type-product-announcement .field--name-body,
582 .page-node-type-general-news-item .field--name-body {
583 margin-bottom: 20px;
584 }
585
586 .page-node-type-product-announcement .field--name-field-external-news-link,
587 .page-node-type-general-news-item .field--name-field-external-news-link {
588 margin-bottom: 20px;
589 }
590
591 .page-node-type-product-announcement .field--name-field-vendor-page,
592 .page-node-type-product-announcement .field--name-field-announced-products {
593 margin-bottom: 20px;
594 }
595
596
597 /* Search Results */
598
599
600 @media screen and (max-width: 600px) {
601 .path-search .region-content > ol {
602 width: 300px;
603 }
604 }
605 @media screen and (min-width: 601px) and (max-width 1000px) {
606 .path-search .region-content > ol {
607 width: 560px;
608 }
609 }
610 @media screen and (min-width: 1001px) {
611 .path-search .region-content > ol {
612 width: 900px;
613 }
614 }
615
616 .path-search .region-content > ol {
617 margin: 0 auto;
618 padding-left: 0;
619 overflow: auto;
620 }
621
622 .path-search .region-content > ol li {
623 width: 280px;
624 height: 280px;
625 margin: 0px auto;
626 padding: 10px;
627
628 float: left;
629
630 list-style: none;
631 overflow: hidden;
632 }
633
634 .path-search .region-content > ol li h3 {
635 text-align: center;
636 }
637
638 .path-search .region-content > ol li .search-image {
639 width: 100px;
640 height: 100px;
641
642 margin: 0 auto;
643
644 display: flex;
645 align-items: center;
646 }
647
648 .path-search .region-content > ol li img {
649 }
650
651
652 /* Footer */
653
654
655 .footer {
656 background: #333;
657 color: #FFF;
658 }
659
660 /* full page width for footer */
661 .footer {
662 width: 100%;
663 }
664
665 .footer a { color: #edd400; }
666
667 .footer a:hover { color: #FFF; }
668
669 .footer h4 { font-weight: bold; }
670
671 .footer .copyright { font-size: 0.9em; text-align: center; width: 80%; margin-top: 1em; border-top: 1px solid #111; padding: 1em; }
672
673 #fsf-logo-footer { margin-bottom: 10px; }
674
675 @media print { #fsf-logo-footer { filter: invert(100%) } }
676