modified: sites/all/themes/ofcmboilerplate/css/compiled/style.css
[ofcm:ofcmweb-v0_3.git] / sites / all / themes / ofcmboilerplate / sass / _custom.scss
1 //
2 // Typography _base.css
3 //
4
5 // LAYOUT Structure
6 .plecagdf {
7         width:100%;
8         height:$navigation_height;
9         img {
10                 height:90%;
11         }
12         .secculleft {
13                 float:left;
14                 @include breakpoint($mobile) {
15                         display:none;
16                 }
17         }
18         .gdfleft {
19                 float:left;
20         }
21         .gdfright {
22                 float:right;
23         }
24 }
25
26 #header {
27         height:$navigation_height;
28         background:$header_bg;
29 }
30
31 #navigation {
32         width:auto;
33         float:right;
34         margin-top:$navigation_height * -1;
35 }
36
37
38 #header.scrolled {
39         width:100%;
40         height:$navigation_height;
41         z-index:30;
42         position:fixed;
43         left:0;top:0;
44 }
45
46 #navigation.scrolled {
47         margin-top:0;
48         position:fixed;
49         z-index:40;
50         right:0;
51 }
52
53
54 #content-header {
55         #highlight {
56                 position:relative;
57                 height:$highlight_height;
58                 #block-views-conciertoilustracion-block,
59                 #block-views-frontmosaic-block {
60                         position:relative;
61                         margin:-10px;
62                 }
63                 #block-views-fronthighlights-block {
64                         height:$fronthighlight_height;
65                         position:relative;
66                         margin-top:$highlight_height - $fronthighlight_height + 16;
67                 }
68         }
69 }
70
71 #content, #content-area {
72         width:100%;
73 }
74
75 .not-front #content {
76         margin-top:$navigation_height * 2 + 15;
77
78 }
79
80 #content-area {
81         width:$page_width;
82         margin:auto;
83         margin-top:40px;
84   @include breakpoint($tablet) {
85         width:80%;
86         }
87         #block-views-conciertodirector-block {
88                 width:auto;
89                 float:left;
90         }
91         #block-views-conciertosolistas-block {
92                 width:auto;
93                 float:left;
94         }
95 }
96
97 .front #content-area {
98         width:auto;
99 }
100
101
102 // STYLES
103
104 body {
105     @include font-size(15);
106                 //background:url('../../images/fondo.jpg') center $highlight_height repeat-x;
107                 //background:#dbe0e5;
108 }
109
110 body.not-front {
111     @include font-size(18);
112 }
113
114
115 h1, h2, h3, h4, h5, h6 {
116   line-height: 1.3em;
117   color: $header_text_color;
118         font-family:$title_font;
119         font-weight:bolder;
120   @include breakpoint($mobile) {
121     @include font-size(16);
122     line-height: 1.5;
123     color: #000;
124     word-wrap: break-word;
125     -webkit-text-size-adjust: none;
126   }
127 }
128
129 h1{
130         @include font-size(32);
131         text-transform:uppercase;
132         @include breakpoint($tablet) {
133                 text-align:center;
134                 width:100%;
135         }
136 }
137
138 h2,h3 {
139   @include font-size(18);
140   font-weight: 700;
141   margin-top: 0.75em;
142   margin-bottom: 0;
143         text-transform:uppercase;
144 }
145
146
147 .not-front h1{
148         color:$header_bg;
149 }
150
151 a:link {
152         text-decoration:none;
153 }
154
155 header#header {
156         a#logo img {
157                 height:$navigation_height - 16;
158         }
159 }
160
161 nav#navigation {
162         ul {
163                 float:right;
164                 width:auto;
165                 padding:5px 5px 0 0;
166         }
167         li {
168                 list-style: none;
169                 float: left;
170                 margin:0;
171         }
172         a {
173                 border-bottom:transparent 4px solid;
174                 height:$navigation_height;
175     @include font-size(16);
176                 font-family: $title_font;
177                 padding: 0 10px 18px;
178                 text-transform:uppercase;
179                 font-weight:700;
180                 color:$selection_text_color;
181                 &:hover {
182                 border-color:$selection_text_color;
183                 transition:border-color $hover_time ease-in;
184                 }
185         }
186 }
187
188 .botondark {
189         display:block;
190         border-radius:4px;
191         color:$selection_text_color;
192         background:$selection_bg_color;
193         font-family:$title_font;
194         font-weight:700;
195         text-align:center;
196         text-transform:uppercase;
197         padding:12px;
198         margin:auto;
199         &:hover {
200                 background:$selection_text_color;
201                 color:$selection_bg_color;
202                 transition:background $hover_time ease-in;
203         }
204 }
205
206 .botonlight {
207         display:block;
208         border-radius:4px;
209         font-family:$title_font;
210         font-weight:700;
211         text-align:center;
212         text-transform:uppercase;
213         padding:12px;
214         margin:auto;
215         background:$selection_text_color;
216         color:$selection_bg_color;
217         &:hover {
218                 background:$selection_bg_color;
219                 color:$selection_text_color;
220                 transition:background $hover_time ease-in;
221         }
222 }
223
224 .breadcrumb {
225         display:none;
226 }
227
228
229 // FRONTAL
230
231 .frontmosaicitem {
232         height:$highlight_height;
233         position:absolute;
234         width:100%;
235         .ilustracion {
236                 overflow:hidden;
237                 height:$highlight_height;
238                 background:#000;
239                 text-align:right;
240                 img {
241                         margin-left:20% * -1;
242                         opacity:0.4;
243                         height:100%;
244                 }
245         }
246         .ficha {
247                 max-width:50%;
248                 position:relative;
249                 height:$highlight_height;
250                 margin:auto;
251                 margin-top:$highlight_height * -1;
252                 text-align:center;
253                 color:$selection_text_color;
254                 padding-top:60px;
255                 .fechas {
256                         @include font-size(14);
257                         text-transform:uppercase;
258                 }
259                 .titulo a {
260                         text-transform:uppercase;
261                         width:70%;
262                         @include font-size(36);
263                         font-family: $title_font;
264                         font-weight:700;
265                         color:$selection_text_color;
266                 }
267                 .resumen {
268                         @include font-size(16);
269                 }
270                 .botonzuelo {
271                         width:120px;
272                         margin:auto;
273                         a {
274                                 @extend .botondark;
275                         }
276                         @include font-size(14);
277                         width:120px;
278                 }
279         }
280 }
281
282
283
284 .view-fronthighlights {
285         width:100%;
286         display:block;
287         .view-content {
288                 border-top:2px dotted $selection_text_color;
289                 padding-top:30px;
290                 color:$selection_text_color;
291                 height:$fronthighlight_height;
292                 clear:both;
293                 width:80%;
294                 margin:auto;
295                 .title {
296                         height:$navigation_height;
297                         a {
298                                 @extend h2;
299                                 color:$selection_text_color;
300                         }
301                 }
302                 .dates {
303                         height:$navigation_height;
304                         margin-bottom:16px;
305                 }
306                 .fhleermas a {
307                         @extend .botondark;
308                         @include font-size(14);
309                         width:50%;
310                         float:left;
311                 }
312                 .highlightitem {
313                         float:left;
314                         width:33.33%;
315                         padding:0 2%;
316                 }
317         }
318 }
319
320
321 #block-sharethis-sharethis_block{
322         float:right;
323 }
324
325 section#block-views-noticiasfrontal-block,
326 section#block-block-3 {
327         height:$navigation_height * 7;
328         width:40%;
329         @include breakpoint($tablet){
330         }
331 }
332
333 section#block-views-noticiasfrontal-block {
334         float:left;
335         margin:0 3%;
336         @include font-size(18);
337         display:block;
338         .field-name-image {
339                 width:auto;
340                 float:left;
341         }
342         h2.block-title {
343                 border-bottom:dotted 2px #ccc;
344                 margin-bottom:16px;
345         }
346
347         .field, .node h2 {
348                 float:right;
349                 width:48%;
350         }
351         .submitted {
352                 display:none;
353         }
354         .field-name-field-image {
355                 float:left;
356                 width:42%;
357         }
358 }
359
360 section#block-block-3 {
361         margin:0 3%;
362         @include font-size(18);
363         display:block;
364                 float:right;
365         .field-name-image {
366                 width:auto;
367                 float:left;
368         }
369         h2.block-title {
370                 border-bottom:dotted 2px #ccc;
371                 margin-bottom:16px;
372         }
373
374         .field, .node h2 {
375                 float:right;
376                 width:48%;
377         }
378         .submitted {
379                 display:none;
380         }
381         .field-name-field-image {
382                 float:left;
383                 width:42%;
384         }
385         .fotosala img {
386                 width:100%;
387         }
388 }
389
390 .view-conciertosfrontal {
391         margin-top:$navigation_height * 2;
392         .views-row {
393                 width:25%;
394                 height:400px;
395                 float:left;
396                 @include breakpoint($tablet) {
397                 width:33.33%;
398                 }
399                 @include breakpoint($mobile) {
400                         width:100%;
401                 }
402         }
403         ul.concertdates {
404                 display:none;
405         & :hover {
406                         display:block;
407                 }
408         }
409 }
410 .page-node .field-name-field-image {
411         float:left;
412         margin:0 $navigation_height $navigation_height 0;
413 }
414
415 .front .node-concierto.node-teaser {
416         width:$first_sidebar_width - 8;
417         position:relative;
418         display:table;
419         margin: 0 auto;
420         overflow:hidden;
421         border:#ddd 1px solid;
422         @include breakpoint($tablet) {
423                 width:80%;
424                 height:auto;
425         }
426   ul.concertdates {
427                 float:left;
428                 margin:0;padding:0;
429                 li {
430                         list-style:none;
431                         & :hover{
432                                 padding:4px;
433                                 transition:padding $hover_time;
434                         }
435                 }
436         }
437         .field-name-field-ilustracion {
438                 float:left;
439         }
440         header {
441                 display:block;
442                 width:100%;
443                 position:absolute;
444                 bottom:37%;left:0;
445                 a {
446                         display:block;
447                         color:$selection_text_color;
448                         padding:8px;
449                         text-shadow: 1px 1px 3px #000;
450                         background:rgba(0,0,0,0.4);
451                 }
452         }
453         div.content {
454                 background:$visited_link_color;
455                 display:block;
456                 top:0;
457                 img {
458                         width:100%;
459                         height:100%;
460                         background:$selection_bg_color;
461                 }
462                 .date {
463                         width:70%;
464                         float:left;
465                         background:$visited_link_color;
466                 }
467                 .boletos a {
468                         font-family:$title_font;
469                         font-weight:700;
470                         text-align:center;
471                         text-transform:uppercase;
472                         width:30%;
473                         float:left;
474                         color:$selection_text_color;
475                         background:$selection_bg_color;
476                 }
477         }
478         footer {
479                 display:none;
480         }
481 }
482
483 // Redes sociales
484
485 #block-block-2 {
486         width:36px;
487         z-index:1000;
488         display:block;
489         background:#fff;
490         position:fixed;
491         left:0;
492         top:$navigation_height * 4;
493         box-shadow: 1px 3px 6px 0px #000;
494         span {
495                 display:none;
496         }
497         ul#redessociales {
498                 list-style:none;
499                 display:block;
500                 padding:0;margin:0;
501                 li a {
502                         background-opacity:0.5;
503                         display:block;
504                         width:100%;
505                         height:36px;
506                         margin:10px 0;
507                         &:hover {
508                                 margin-left:10px;
509                                 transition:margin-left $hover_time ease-in-out;
510                         }
511                 }
512                 li.facebookL a {
513                         background:url('../../images/facebook.png') center;
514                 }
515                 li.twitterL a {
516                         background:url('../../images/twitter.png') center;
517                 }
518                 li.rssl a {
519                         background:url('../../images/rss.png') center;
520                 }
521         }
522 }
523
524
525 // PAGE: concierto
526
527
528 h1.title, .tabs {
529         width:$page_width;
530         margin:auto;
531 }
532
533 .node-type-concierto {
534         #block-block-1.scrolled {
535                 z-index:40;
536                 position:fixed;
537                 top:$navigation_height;left:0;
538                 width:100%;
539                 background:#fff;
540                 margin-top:0;
541                 transition:position;
542         }
543         #block-block-1 {
544                 z-index:40;
545                 position:absolute;
546                 width:100%;
547                 background:#fff;
548                 margin-top:$navigation_height * 3 * -1 - 16;
549                 ul {
550                         width:70%;
551                         margin: 23px auto;
552                         li {
553                                 text-transform:uppercase;
554                                 font-weight:700;
555                                 font-family:$title_font;
556                                 float:left;
557                                 margin:0;padding:0;
558                                 list-style:none;
559                                 width:20%;
560                         }
561                 }
562                 @include breakpoint($tablet){
563                         ul {
564                                 width:100%;
565                                 margin: 23px auto;
566                                 li {
567                                         @include font-size(14);
568                                         list-style:none;
569                                         padding:0 2%;
570                                 }
571                         }
572                 }
573         }
574         section {
575                 padding-top:$navigation_height * 3;
576                 .field-label {
577                         @extend h1;
578                         border-top:dotted 2px #666;
579                         padding-top:20px;
580                         text-align:center;
581                 } 
582         }
583         .conciertoilustracion {
584                 height:$highlight_height;
585                 position:absolute;
586                 top:0;
587                 margin-top:-120px;
588                 width:100%;
589                 z-index:-1000;
590                 .ilustracion {
591                         float:left;
592                         overflow:hidden;
593                         width:100%;
594                         height:500px;
595                         background:#fff;
596                         text-align:right;
597                         img {
598                         overflow:hidden;
599                                 opacity:0.3;
600                                 min-width:100%;
601                                 min-height:100%;
602                         }
603                 }
604         }
605         ul.concertdates {
606                 position:absolute;
607                 z-index:20;
608                 top:$navigation_height * 6;
609                 list-style-type:none;
610                 margin:0;
611                 padding:0;
612                 &.scrolled {
613                         top:$navigation_height * 7;
614                 }
615                 @include font-size(15);
616                 @include breakpoint($mobile) {
617                         left:0;
618                         position:relative;
619                 }
620         }
621         .concertdates li {
622                 float:left;
623                 height:118px;
624                 width:$first_sidebar_width / 1.5;
625                 line-height:1.3em;
626                 padding:1em;
627                 @include breakpoint($mobile) {
628                         width:100%;
629                         margin:0;
630                 }
631                 a {
632                         width:100%;
633                         @extend .botondark;
634                 }
635                 @include breakpoint($tablet) {
636                         float:left;
637                 }
638                 @include breakpoint($mobile) {
639                         width:100%;
640                 }
641         }
642         div#block-views-conciertoencabezado-block {
643                 height:$navigation_height * 2;
644                 display:block;
645                 overflow:hidden;
646                 margin-top:$highlight_height * -1;
647                 margin-bottom:310px;
648                 @include breakpoint($tablet){
649                         margin-bottom:280px;
650                 }
651         }
652
653
654         .block-system{
655                 width:auto;
656                 margin:auto;
657         }
658 }
659
660 #block-views-conciertodirector-block {
661                 @include font-size(14);
662                 text-align:center;
663                 float:left;
664                 display:block;
665                 width:$page_width;
666 }
667
668 #block-views-conciertosolistas-block {
669         .views-row {
670                 @extend  #block-views-conciertodirector-block;
671         }
672 }
673
674 // Taxonomy Page ARTISTA
675
676 .page-taxonomy-term     {
677         .node-concierto {
678                 .concertdates {
679                         display:none;
680                 }
681                 .links {
682                         display:none;
683                 }
684                 .field-name-field-ilustracion {
685                         display:none;
686                 }
687         }
688         h1.title {
689                 text-align:center;
690         }
691 }
692
693
694 .page-taxonomy-term .vocabulary-int-rpretes {
695         #taxonomy_term_int_rpretes_full_group_ficha_artista {
696                 width:auto;
697                 margin:auto;
698                 text-align:center;
699         }
700 }
701
702 // Taxonomy Page SEDES
703
704 .page-taxonomy-term .vocabulary-sedes {
705         .field-name-field-ilustracion{ 
706                 float:right;
707                 margin:0 0 $navigation_height;
708         }
709 }
710
711 .page-taxonomy-term-13 {
712         article, .pager {
713                 display:none;
714         }
715 }
716
717 div.messages {
718         display:none;
719         position:fixed;
720         top:0;
721 }