1 |
|
2 |
|
3 |
|
4 | body {
|
5 | background-color: #fcfcfc;
|
6 | }
|
7 |
|
8 | p.box {
|
9 | padding: 20px;
|
10 | }
|
11 | p {
|
12 | color: rgba(0, 0, 0, 0.71);
|
13 | padding: 0;
|
14 | -webkit-font-smoothing: antialiased;
|
15 | }
|
16 |
|
17 | h1,h2,h3,h4,h5,h6 {
|
18 | -webkit-font-smoothing: antialiased;
|
19 | }
|
20 |
|
21 | nav {
|
22 |
|
23 |
|
24 | a {
|
25 | -webkit-font-smoothing: antialiased;
|
26 | }
|
27 | ul li:hover, ul li.active {
|
28 | background-color: color("materialize-red", "lighten-1");
|
29 | }
|
30 | }
|
31 |
|
32 | .header {
|
33 | color: color("materialize-red", "lighten-2");
|
34 | font-weight: 300;
|
35 | }
|
36 |
|
37 | .caption {
|
38 | font-size: 1.25rem;
|
39 | font-weight: 300;
|
40 | margin-bottom: 30px;
|
41 | }
|
42 |
|
43 | .preview {
|
44 | background-color: #FFF;
|
45 | border: 1px solid #eee;
|
46 | padding: 20px 20px;
|
47 | }
|
48 |
|
49 | header, main, footer {
|
50 | padding-left: 240px;
|
51 | }
|
52 | .parallax-demo header,
|
53 | .parallax-demo main,
|
54 | .parallax-demo footer {
|
55 | padding-left: 0;
|
56 | }
|
57 | footer.example {
|
58 | padding-left: 0;
|
59 | }
|
60 |
|
61 | @media #{$medium-and-down} {
|
62 | header, main, footer {
|
63 | padding-left: 0;
|
64 | }
|
65 | }
|
66 |
|
67 |
|
68 |
|
69 |
|
70 |
|
71 |
|
72 | ul.side-nav.fixed li.logo {
|
73 | text-align: center;
|
74 | margin-top: 32px;
|
75 | margin-bottom: 80px;
|
76 |
|
77 | &:hover {
|
78 | background-color: transparent;
|
79 | }
|
80 | }
|
81 | ul.side-nav.fixed {
|
82 | overflow: hidden;
|
83 |
|
84 | li {
|
85 | line-height: 44px;
|
86 |
|
87 | &:hover, &.active {
|
88 | background-color: rgba(0,0,0,.05);
|
89 | }
|
90 |
|
91 | a {
|
92 | font-size: 13px;
|
93 | line-height: 44px;
|
94 | height: 44px;
|
95 | }
|
96 | }
|
97 |
|
98 | ul.collapsible-accordion {
|
99 | background-color: #FFF;
|
100 | }
|
101 |
|
102 |
|
103 | &:hover {
|
104 | overflow-y: auto;
|
105 | }
|
106 | }
|
107 |
|
108 | .bold > a {
|
109 | font-weight: bold;
|
110 | }
|
111 |
|
112 | #logo-container {
|
113 | height: 57px;
|
114 | margin-bottom: 32px;
|
115 | }
|
116 |
|
117 | nav.top-nav {
|
118 | height: 122px;
|
119 | box-shadow: none;
|
120 |
|
121 | a.page-title {
|
122 | line-height: 122px;
|
123 | font-size: 48px;
|
124 | }
|
125 | }
|
126 | a.button-collapse.top-nav {
|
127 | position: absolute;
|
128 | text-align: center;
|
129 | height: 48px;
|
130 | width: 48px;
|
131 | left: 7.5%;
|
132 | top: 0;
|
133 | float: none;
|
134 | margin-left: 1.5rem;
|
135 | color: #fff;
|
136 | font-size: 32px;
|
137 | z-index: 2;
|
138 |
|
139 | &.full {
|
140 | line-height: 122px;
|
141 | }
|
142 | }
|
143 | @media #{$small-and-down} {
|
144 | a.button-collapse.top-nav {
|
145 | left: 5%;
|
146 | }
|
147 | }
|
148 |
|
149 | @media #{$medium-and-down} {
|
150 | nav .nav-wrapper {
|
151 | text-align: center;
|
152 |
|
153 | a.page-title {
|
154 | font-size: 36px;
|
155 | }
|
156 | }
|
157 | }
|
158 |
|
159 | @media #{$large-and-up} {
|
160 | .container {
|
161 | width: 85%;
|
162 | }
|
163 | }
|
164 |
|
165 |
|
166 | #front-page-logo {
|
167 | display: inline-block;
|
168 | height: 100%;
|
169 | pointer-events: none;
|
170 | }
|
171 |
|
172 | @media only screen and (max-width: 992px) {
|
173 | #front-page-nav ul.side-nav {
|
174 | li {
|
175 | float: none;
|
176 | padding: 0 15px;
|
177 |
|
178 | &:hover { background-color: #ddd; }
|
179 | .active { background-color: transparent; }
|
180 | }
|
181 | a {
|
182 | color: #444;
|
183 | }
|
184 | }
|
185 | }
|
186 |
|
187 |
|
188 | #responsive-img {
|
189 | width: 80%;
|
190 | display:block;
|
191 | margin: 0 auto;
|
192 | }
|
193 |
|
194 | #index-banner {
|
195 | background-color: color("materialize-red", "lighten-2");
|
196 | .container {
|
197 | position: relative;
|
198 | }
|
199 | .header {
|
200 | color: #FFF;
|
201 | }
|
202 | h4 {
|
203 | margin-bottom: 40px;
|
204 | }
|
205 | h1 {
|
206 | margin-top: 16px;
|
207 | }
|
208 | }
|
209 | @media #{$medium-and-down} {
|
210 | #index-banner {
|
211 | h1 {
|
212 | margin-top: 60px;
|
213 | }
|
214 | h4 {
|
215 | margin-bottom: 15px;
|
216 | }
|
217 | }
|
218 | }
|
219 | @media #{$small-and-down} {
|
220 | #index-banner {
|
221 | h4 {
|
222 | margin-bottom: 0;
|
223 | }
|
224 | }
|
225 | }
|
226 |
|
227 |
|
228 | .github-commit {
|
229 | padding: 14px 0;
|
230 | height: 64px;
|
231 | line-height: 36px;
|
232 | background-color: #5c5757;
|
233 | color: hsl(0, 0%, 90%);
|
234 | font-size: .9rem;
|
235 | }
|
236 | @media #{$medium-and-down} {
|
237 | .github-commit {
|
238 | text-align: center;
|
239 | }
|
240 | }
|
241 |
|
242 | #github-button {
|
243 | background-color: #6f6d6d;
|
244 | @include transition(.25s ease);
|
245 | &:hover {
|
246 | background-color: #797777;
|
247 | }
|
248 | }
|
249 |
|
250 | .sha {
|
251 | color: hsl(0, 0%, 94%) ;
|
252 | margin: 0 6px 0 6px;
|
253 | }
|
254 |
|
255 | #download-button {
|
256 | background-color: color("materialize-red", "lighten-3");
|
257 | width: 260px;
|
258 | height: 70px;
|
259 | line-height: 70px;
|
260 | font-size: 18px;
|
261 | font-weight: 400;
|
262 |
|
263 | &:hover {
|
264 | background-color: lighten(color("materialize-red", "base"), 30%);
|
265 | }
|
266 | }
|
267 |
|
268 | .promo{
|
269 | width: 100%;
|
270 | @media #{$medium-and-down} {
|
271 | width: 60%;
|
272 | margin: 0 auto;
|
273 | display: block;
|
274 | }
|
275 |
|
276 | i {
|
277 | margin: 40px 0;
|
278 | color: color("materialize-red", "lighten-2");
|
279 | font-size: 7rem;
|
280 | display: block;
|
281 | }
|
282 | }
|
283 |
|
284 | .promo-caption {
|
285 | font-size: 1.7rem;
|
286 | font-weight: 500;
|
287 | margin-top: 5px;
|
288 | margin-bottom: 0;
|
289 |
|
290 | }
|
291 |
|
292 | #front-page-nav {
|
293 | background-color: #FFF;
|
294 | position: relative;
|
295 | a {
|
296 | color: color("materialize-red", "lighten-2");
|
297 | }
|
298 | li {
|
299 | &:hover {
|
300 | background-color: color("materialize-red", "lighten-5");
|
301 | }
|
302 | &.active {
|
303 | background-color: color("materialize-red", "lighten-5");
|
304 | }
|
305 | }
|
306 | .container {
|
307 | height: inherit;
|
308 | }
|
309 | }
|
310 |
|
311 |
|
312 |
|
313 | .col.grid-example {
|
314 | border: 1px solid #eee;
|
315 | margin: 7px 0;
|
316 | text-align: center;
|
317 | line-height: 50px;
|
318 | font-size: 28px;
|
319 | background-color: tomato;
|
320 | color: white;
|
321 | padding: 0;
|
322 |
|
323 | span {
|
324 | font-weight: 200;
|
325 | line-height: 50px;
|
326 | }
|
327 | }
|
328 |
|
329 | .promo-example {
|
330 | overflow: hidden;
|
331 | }
|
332 |
|
333 |
|
334 |
|
335 |
|
336 |
|
337 |
|
338 | #site-layout-example-left {
|
339 | background-color: color("blue-grey", "lighten-2");
|
340 | height: 300px;
|
341 | }
|
342 | #site-layout-example-right {
|
343 | background-color: color("teal", "lighten-1");
|
344 | height: 300px;
|
345 | }
|
346 | #site-layout-example-top {
|
347 | background-color: color("red", "lighten-2");
|
348 | height: 42px;
|
349 | }
|
350 |
|
351 | .flat-text-header {
|
352 | height: 35px;
|
353 | width: 80%;
|
354 | background-color: rgba(255,255,255,.15);
|
355 | display: block;
|
356 | margin: 27px auto;
|
357 | }
|
358 | .flat-text {
|
359 | height: 25px;
|
360 | width: 80%;
|
361 | background-color: rgba(0,0,0,.15);
|
362 | display: block;
|
363 | margin: 27px auto;
|
364 | &.small {
|
365 | width: 25%;
|
366 | height: 25px;
|
367 | background-color: rgba(0,0,0,.15);
|
368 | }
|
369 | &.full-width {
|
370 | width: 100%;
|
371 | }
|
372 | }
|
373 |
|
374 |
|
375 |
|
376 |
|
377 |
|
378 |
|
379 |
|
380 | $bottomColor: #E2E2E1;
|
381 | $topColor: lighten($bottomColor, 2%);
|
382 |
|
383 | $border: $bottomColor;
|
384 |
|
385 | $width: 100%;
|
386 | $height: auto;
|
387 |
|
388 | .browser-window {
|
389 | text-align: left;
|
390 | width: $width;
|
391 | height: $height;
|
392 | display: inline-block;
|
393 | border-radius: 5px 5px 2px 2px;
|
394 | background-color: #fff;
|
395 | margin: 20px 0px;
|
396 | overflow: hidden;
|
397 |
|
398 | .top-bar {
|
399 | height: 30px;
|
400 | border-radius: 5px 5px 0 0;
|
401 | border-top: thin solid lighten($topColor, 1%);
|
402 | border-bottom: thin solid darken($bottomColor, 1%);
|
403 | background: linear-gradient($topColor, $bottomColor);
|
404 | }
|
405 | }
|
406 |
|
407 | .browser-window .circle {
|
408 | height: 10px;
|
409 | width: 10px;
|
410 | display: inline-block;
|
411 | border-radius: 50%;
|
412 | background-color: lighten($topColor, 10%);
|
413 | margin-right: 1px;
|
414 | }
|
415 | #close-circle {
|
416 | background-color: #FF5C5A;
|
417 | }
|
418 | #minimize-circle {
|
419 | background-color: #FFBB50;
|
420 | }
|
421 | #maximize-circle {
|
422 | background-color: #1BC656;
|
423 | }
|
424 | .browser-window .circles { margin: 5px 12px; }
|
425 | .browser-window .content {
|
426 | margin: 0;
|
427 | width: 100%;
|
428 |
|
429 | display: inline-block;
|
430 | border-radius: 0 0 5px 5px;
|
431 | background-color: #fafafa;
|
432 | }
|
433 | .browser-window .row {
|
434 | margin: 0;
|
435 | }
|
436 |
|
437 | .clear { clear: both; }
|
438 |
|
439 |
|
440 |
|
441 |
|
442 |
|
443 |
|
444 | .dynamic-color {
|
445 |
|
446 | .red, .pink, .purple, .deep-purple, .indigo, .blue, .light-blue, .cyan, .teal, .green, .light-green, .lime, .yellow, .amber, .orange, .deep-orange, .brown , .grey, .blue-grey, .black, .white, .transparent {
|
447 | height: 55px;
|
448 | width: 100%;
|
449 | padding: 0 15px;
|
450 | line-height: 55px;
|
451 | font-weight: 500;
|
452 | font-size: 12px;
|
453 | display: block;
|
454 | @include box-sizing(border-box);
|
455 | }
|
456 | .col {
|
457 | margin-bottom: 55px;
|
458 | }
|
459 | }
|
460 |
|
461 | .center {
|
462 | text-align: center;
|
463 | vertical-align: middle;
|
464 | }
|
465 |
|
466 |
|
467 | .material-icons.icon-demo {
|
468 | line-height: 50px;
|
469 | }
|
470 | .icon-container i {
|
471 | font-size: 3em;
|
472 | margin-bottom: 10px;
|
473 | }
|
474 | .icon-container .icon-preview {
|
475 | height: 120px;
|
476 | text-align: center;
|
477 | }
|
478 | .icon-container span {
|
479 | display: block;
|
480 | }
|
481 |
|
482 | .icon-holder {
|
483 | display: block;
|
484 | text-align: center;
|
485 | width: 150px;
|
486 | height: 115px;
|
487 |
|
488 | float: left;
|
489 | margin: 0 0px 15px 0px;
|
490 | p {
|
491 | margin: 0 0;
|
492 | }
|
493 | }
|
494 |
|
495 |
|
496 | .tabs-wrapper {
|
497 | position: relative;
|
498 | height: 48px;
|
499 | @extend .hide-on-small-only;
|
500 |
|
501 | .row.pinned {
|
502 | position: fixed;
|
503 | width: 100%;
|
504 | top: 0;
|
505 | z-index: 10;
|
506 | }
|
507 | }
|
508 |
|
509 |
|
510 |
|
511 | .shadow-demo {
|
512 | background-color: color("teal", "lighten-1");
|
513 | width: 100px;
|
514 | height: 100px;
|
515 | margin: 20px auto;
|
516 |
|
517 | @media only screen and (max-width: $small-screen) {
|
518 | width: 150px;
|
519 | height: 150px;
|
520 | }
|
521 | }
|
522 |
|
523 |
|
524 | .parallax-container {
|
525 |
|
526 | .text-center {
|
527 | position: absolute;
|
528 | top: 50%;
|
529 | left: 0;
|
530 | right: 0;
|
531 | margin-top: -27px;
|
532 | }
|
533 |
|
534 | }
|
535 |
|
536 |
|
537 | ul.table-of-contents {
|
538 | margin-top: 0;
|
539 | padding-top: 48px;
|
540 | }
|
541 |
|
542 |
|
543 | code, pre {
|
544 | position: relative;
|
545 | font-size: 1.1rem;
|
546 | }
|
547 |
|
548 | .directory-markup {
|
549 | font-size: 1rem;
|
550 | line-height: 1.1rem !important;
|
551 | }
|
552 | pre[class*="language-"] {
|
553 | &:before {
|
554 | position: absolute;
|
555 | padding: 1px 5px;
|
556 | background: hsl(30, 10%, 90%);
|
557 | top: 0;
|
558 | left: 0;
|
559 | font-family: "Roboto", sans-serif;
|
560 | -webkit-font-smoothing: antialiased;
|
561 | color: #555;
|
562 | content:attr(class);
|
563 | font-size: .9rem;
|
564 | border: solid 1px rgba(51, 51, 51, 0.12);
|
565 | border-top: none;
|
566 | border-left: none;
|
567 | }
|
568 | padding: 25px 12px 7px 12px;
|
569 | border: solid 1px rgba(51, 51, 51, 0.12);
|
570 | }
|
571 |
|
572 |
|
573 |
|
574 | .toc-wrapper {
|
575 | position: relative;
|
576 | margin-top: 42px;
|
577 | }
|
578 |
|
579 | #carbonads {
|
580 | max-width: 150px;
|
581 | display: inline-block;
|
582 | position: relative;
|
583 | text-align: left;
|
584 | -webkit-font-smoothing: antialiased;
|
585 |
|
586 | & > span,
|
587 | span.carbon-wrap {
|
588 | height: 100px;
|
589 | display: block;
|
590 | }
|
591 | a.carbon-img {
|
592 | height: 100px;
|
593 | display: inline-block;
|
594 | margin-right: 10px;
|
595 | }
|
596 | a.carbon-text,
|
597 | input[type="submit"] {
|
598 | position: relative;
|
599 | top: 0;
|
600 | width: 150px;
|
601 | vertical-align: top;
|
602 | display: inline-block;
|
603 | font-size: 13px;
|
604 | color: color("red", "lighten-2");
|
605 | }
|
606 | a.carbon-poweredby {
|
607 | position: relative;
|
608 | left: 28px;
|
609 | font-size: 11px;
|
610 | color: color("red", "lighten-3");
|
611 | }
|
612 | }
|
613 | .buysellads #carbonads {
|
614 |
|
615 | & > span,
|
616 | span.carbon-wrap { height: auto; }
|
617 |
|
618 | a.carbon-text {
|
619 | top: 5px;
|
620 | left: 0;
|
621 | width: 130px;
|
622 | display: block;
|
623 | font-size: 13px;
|
624 | -webkit-font-smoothing: antialiased;
|
625 | color: #E57373;
|
626 | }
|
627 | a.carbon-poweredby {
|
628 | top: 5px;
|
629 | }
|
630 | }
|
631 | .buysellads-header #carbonads {
|
632 | & > span,
|
633 | span.carbon-wrap { height: auto; }
|
634 | a.carbon-text { color: #fff; }
|
635 | a.carbon-poweredby { color: rgba(255,255,255,.8); }
|
636 | }
|
637 |
|
638 |
|
639 |
|
640 | .buysellads {
|
641 | -webkit-font-smoothing: antialiased;
|
642 | position: relative;
|
643 |
|
644 | .bsa_it.one {
|
645 | width: 130px;
|
646 | position: absolute;
|
647 | left: 0;
|
648 | top: 50px;
|
649 |
|
650 | .bsa_it_p {
|
651 | left: 0;
|
652 | bottom: -15px;
|
653 | }
|
654 | .bsa_it_ad .bsa_it_t { color: color("red", "lighten-2"); }
|
655 | .bsa_it_ad .bsa_it_d { color: color("red", "lighten-3"); }
|
656 | }
|
657 |
|
658 | .bsa_it_ad a {
|
659 | display: block;
|
660 | width: 130px;
|
661 | }
|
662 | }
|
663 |
|
664 | .buysellads-header {
|
665 | margin-top: 30px;
|
666 |
|
667 | .bsa_it.one .bsa_it_p { bottom: -20px; }
|
668 | }
|
669 |
|
670 | .bsa_it.one {
|
671 | min-width: 230px;
|
672 | max-width: 270px;
|
673 | display: inline-block;
|
674 | text-align: left;
|
675 |
|
676 | .bsa_it_ad {
|
677 | border: 0;
|
678 | padding: 0;
|
679 | background-color: transparent;
|
680 |
|
681 | .bsa_it_t { color: #fff; }
|
682 | .bsa_it_d { color: color("red", "lighten-4"); }
|
683 | }
|
684 |
|
685 | .bsa_it_p {
|
686 | right: auto;
|
687 | left: 40px;
|
688 | bottom: -5px;
|
689 |
|
690 | a { color: color("red", "lighten-4"); }
|
691 | }
|
692 | }
|
693 |
|
694 |
|
695 |
|
696 |
|
697 | footer{
|
698 | font-size: .9rem;
|
699 | }
|
700 | body.parallax-demo footer {
|
701 | margin-top: 0;
|
702 | }
|
703 |
|
704 |
|
705 | .image-container {
|
706 | width: 100%;
|
707 | img {
|
708 | max-width: 100%;
|
709 | }
|
710 | }
|
711 |
|
712 |
|
713 |
|
714 |
|
715 | .mobile-image {
|
716 | @media #{$small-and-down} {
|
717 | max-width: 100%;
|
718 | }
|
719 | }
|
720 |
|
721 |
|
722 | .waves-color-demo {
|
723 | .collection-item {
|
724 | height: 57px;
|
725 | line-height: 57px;
|
726 | code {
|
727 | line-height: 57px;
|
728 | }
|
729 | }
|
730 | .btn {
|
731 | &:not(.waves-light) {
|
732 | background-color: color("shades", "white");
|
733 | color: #212121;
|
734 | }
|
735 | }
|
736 | }
|
737 |
|
738 |
|
739 | .card-panel span, .card-content p{
|
740 | -webkit-font-smoothing: antialiased;
|
741 | }
|
742 |
|
743 | #images .card-panel .row {
|
744 | margin-bottom: 0;
|
745 | }
|
746 |
|
747 |
|
748 | .pushpin-demo {
|
749 | position: relative;
|
750 | height: 100px;
|
751 | }
|
752 | #pushpin-demo-1 {
|
753 | display: block;
|
754 | height: inherit;
|
755 | background-color: #ddd;
|
756 | }
|
757 |
|
758 |
|
759 | .valign-demo {
|
760 | height: 400px;
|
761 | background-color: #ddd;
|
762 | }
|
763 | .talign-demo {
|
764 | height: 100px;
|
765 | background-color: #ddd;
|
766 | }
|
767 |
|
768 |
|
769 | #staggered-test li,
|
770 | #image-test {
|
771 | opacity: 0;
|
772 |
|
773 | }
|
774 |
|
775 |
|
776 |
|
777 | #tx-live-lang-container {
|
778 | background-color: #fcfcfc;
|
779 | z-index: 999;
|
780 |
|
781 | #tx-live-lang-picker {
|
782 | background-color: #fcfcfc;
|
783 |
|
784 | li {
|
785 | color: $off-black;
|
786 | &:hover{
|
787 | color: inherit;
|
788 | background-color: color("materialize-red", "lighten-5");
|
789 | }
|
790 | }
|
791 |
|
792 | }
|
793 |
|
794 | .txlive-langselector-toggle {
|
795 | border-bottom: 2px solid color("materialize-red", "lighten-2");
|
796 | }
|
797 |
|
798 | .txlive-langselector-current {
|
799 | color: $off-black;
|
800 | }
|
801 |
|
802 | .txlive-langselector-marker {
|
803 | border-bottom: 4px solid rgba(0,0,0,.61);
|
804 | }
|
805 |
|
806 |
|
807 | }
|
808 |
|
809 |
|
810 |
|
811 |
|
812 | #download-thanks {
|
813 | display: none;
|
814 | }
|
815 |
|
816 |
|
817 |
|
818 | #twitter-widget-0 {
|
819 | width: 190px !important;
|
820 | }
|
821 |
|
822 |
|
823 | #nav-mobile li.search {
|
824 | &:hover { background-color: #fff; }
|
825 |
|
826 | position: absolute;
|
827 | left: 0;
|
828 | right: 0;
|
829 | top: 120px;
|
830 | margin-top: 1px;
|
831 | padding: 1px 0 0 0;
|
832 | z-index: 2;
|
833 |
|
834 | .search-wrapper {
|
835 | &.focused { margin: 0; }
|
836 |
|
837 | margin: 0 12px;
|
838 | @include transition(margin .25s ease);
|
839 |
|
840 | input#search {
|
841 | &:focus { outline: none; }
|
842 |
|
843 | display: block;
|
844 | font-size: 16px;
|
845 | font-weight: 300;
|
846 | width: 100%;
|
847 | height: 45px;
|
848 | padding: 0 45px 0 15px;
|
849 | border: 0;
|
850 | }
|
851 |
|
852 | i.material-icons {
|
853 | position: absolute;
|
854 | top: 10px;
|
855 | right: 10px;
|
856 | cursor: pointer;
|
857 | }
|
858 | }
|
859 |
|
860 |
|
861 | .search-results {
|
862 | margin: 0;
|
863 | border-top: 1px solid #e9e9e9;
|
864 | background-color: #fff;
|
865 |
|
866 | a {
|
867 | &:hover,
|
868 | &.focused {
|
869 | background-color: #eee;
|
870 | outline: none;
|
871 | }
|
872 |
|
873 | font-size: 12px;
|
874 | white-space: nowrap;
|
875 | }
|
876 | }
|
877 | }
|