1 |
|
2 |
|
3 |
|
4 |
|
5 | white = #ffffff
|
6 | mongo_green = green = #13AA52
|
7 | dark_green = #116149
|
8 | charcoal = #212121
|
9 | slate = #42494F
|
10 | ash = #B3BBC1
|
11 | smoke = #F5F6F7
|
12 | blush = #F4758B
|
13 | sienna = #F58263
|
14 | marigold = #F4B65D
|
15 | air = #C2DEFF
|
16 | bluebird = #658D95
|
17 | dark_gray = #1A1A1A
|
18 | black = #000
|
19 |
|
20 | .white
|
21 | color: white
|
22 | .green
|
23 | .mongo-green
|
24 | color: green
|
25 | .dark-green
|
26 | color: dark_green
|
27 | .charcoal
|
28 | color: charcoal
|
29 | .slate
|
30 | color: slate
|
31 | .ash
|
32 | color: ash
|
33 | .smoke
|
34 | color: smoke
|
35 | .blush
|
36 | color: blush
|
37 | .sienna
|
38 | color: sienna
|
39 | .marigold
|
40 | color: marigold
|
41 | .air
|
42 | color: air
|
43 | .bluebird
|
44 | color: bluebird
|
45 | .dark-gray
|
46 | color: dark_gray
|
47 | .black
|
48 | color: black
|
49 |
|
50 |
|
51 | .bg-white
|
52 | background-color: white
|
53 | .bg-green
|
54 | .bg-mongo-green
|
55 | background-color: green
|
56 | .bg-dark-green
|
57 | background-color: dark_green
|
58 | .bg-charcoal
|
59 | background-color: charcoal
|
60 | .bg-slate
|
61 | background-color: slate
|
62 | .bg-ash
|
63 | background-color: ash
|
64 | .bg-smoke
|
65 | background-color: smoke
|
66 | .bg-blush
|
67 | background-color: blush
|
68 | .bg-sienna
|
69 | background-color: sienna
|
70 | .bg-marigold
|
71 | background-color: marigold
|
72 | .bg-air
|
73 | background-color: air
|
74 | .bg-bluebird
|
75 | background-color: bluebird
|
76 | .bg-black
|
77 | background-color: black
|
78 | .bg-dark-gray
|
79 | color: dark_gray
|
80 | .bg-black
|
81 | color: black
|
82 |
|
83 |
|
84 |
|
85 |
|
86 |
|
87 | @font-face
|
88 | font-family: 'Akzidenz Grotesk BQ Light'
|
89 | src: url('/assets/fonts/akzidenzgroteskbq_light-webfont.woff2') format('woff2'),url('/assets/fonts/akzidenzgroteskbq_light-webfont.woff') format('woff')
|
90 | font-weight: normal
|
91 | font-style: normal
|
92 |
|
93 | @font-face
|
94 | font-family: 'Akzidenz Grotesk BQ Medium'
|
95 | src: url('/assets/fonts/akzidenzgroteskbq_medium-webfont.woff2') format('woff2'),url('/assets/fonts/akzidenzgroteskbq_medium-webfont.woff') format('woff')
|
96 | font-weight: normal
|
97 | font-style: normal
|
98 |
|
99 | @font-face
|
100 | font-family: 'DIN'
|
101 | src: url('/assets/fonts/DINWeb-Light.woff')
|
102 |
|
103 | @font-face
|
104 | font-family: 'DIN'
|
105 | src: url('/assets/fonts/DINWeb-Bold.woff')
|
106 | font-weight: bold
|
107 |
|
108 | @font-face
|
109 | font-family: 'SourceCodePro'
|
110 | src: url('/assets/fonts/SourceCodePro-Regular.otf')
|
111 |
|
112 | @font-face
|
113 | font-family: 'SourceCodePro'
|
114 | src: url('/assets/fonts/SourceCodePro-Semibold.otf')
|
115 | font-weight: bold
|
116 |
|
117 | @font-face
|
118 | font-family: 'icomoon'
|
119 | src: url('/assets/fonts/icomoon.woff') format('woff')
|
120 | font-weight: normal
|
121 | font-style: normal
|
122 |
|
123 | *
|
124 | -webkit-font-smoothing: subpixel-antialiased
|
125 |
|
126 | @media (-webkit-min-device-pixel-ratio: 2)
|
127 | *
|
128 | -webkit-font-smoothing: antialiased
|
129 | -moz-osx-font-smoothing: grayscale
|
130 |
|
131 | body, input, button
|
132 | font-family: Akzidenz Grotesk BQ Light, Helvetica
|
133 | color: #42494F
|
134 | font-size: 16px
|
135 |
|
136 | h1, h2, h3, h4, h5, h6, p
|
137 | margin: 15px 0
|
138 |
|
139 | h1, h2, h3, h4, strong, button, b, .bold
|
140 | font-family: Akzidenz Grotesk BQ Medium, Helvetica, Arial
|
141 | font-weight: 400
|
142 |
|
143 | .fnt-light
|
144 | font-family: Akzidenz Grotesk BQ Light, Helvetica, Arial
|
145 |
|
146 | h5, h6, p, small, body, input
|
147 | font-family: Akzidenz Grotesk BQ Light, Helvetica, Arial
|
148 | font-weight: 500
|
149 |
|
150 | .fnt-14
|
151 | font-size: 14px
|
152 | line-height: 22px
|
153 |
|
154 | @media(max-width: phoneWidth)
|
155 | font-size: 12px
|
156 | line-height: 20px
|
157 |
|
158 | .fnt-14
|
159 | font-size: 14px
|
160 | line-height: 24px
|
161 |
|
162 | @media(max-width: phoneWidth)
|
163 | font-size: 12px
|
164 | line-height: 22px
|
165 |
|
166 | .fnt-14
|
167 | font-size: 14px
|
168 | line-height: 24px
|
169 |
|
170 | @media(max-width: phoneWidth)
|
171 | font-size: 12px
|
172 | line-height: 22px
|
173 |
|
174 | .fnt-18
|
175 | font-size: 18px
|
176 | line-height: 28px
|
177 |
|
178 | @media(max-width: phoneWidth)
|
179 | font-size: 16px
|
180 | line-height: 26px
|
181 |
|
182 | .fnt-20
|
183 | font-size: 20px
|
184 | line-height: 30px
|
185 |
|
186 | @media(max-width: phoneWidth)
|
187 | font-size: 18px
|
188 | line-height: 26px
|
189 |
|
190 | h1
|
191 | font-size: 48px
|
192 | line-height: 58px
|
193 |
|
194 | @media(max-width: phoneWidth)
|
195 | font-size: 34px
|
196 | line-height: 44px
|
197 |
|
198 | h2
|
199 | font-size: 34px
|
200 | line-height: 46px
|
201 |
|
202 | @media(max-width: phoneWidth)
|
203 | font-size: 26px
|
204 | line-height: 36px
|
205 |
|
206 | h3
|
207 | font-size: 24px
|
208 | line-height: 34px
|
209 |
|
210 | @media(max-width: phoneWidth)
|
211 | font-size: 22px
|
212 | line-height: 30px
|
213 |
|
214 | h4
|
215 | font-size: 20px
|
216 | line-height: 30px
|
217 |
|
218 | @media(max-width: phoneWidth)
|
219 | font-size: 18px
|
220 | line-height: 26px
|
221 |
|
222 | h5
|
223 | font-size: 24px
|
224 | line-height: 34px
|
225 |
|
226 | @media(max-width: phoneWidth)
|
227 | font-size: 22px
|
228 | line-height: 30px
|
229 |
|
230 | h6
|
231 | font-size: 18px
|
232 | line-height: 28px
|
233 |
|
234 | @media(max-width: phoneWidth)
|
235 | font-size: 16px
|
236 | line-height: 26px
|
237 |
|
238 | p
|
239 | font-size: 16px
|
240 | line-height: 24px
|
241 |
|
242 | @media(max-width: phoneWidth)
|
243 | font-size: 14px
|
244 | line-height: 22px
|
245 |
|
246 | small
|
247 | font-size: 14px
|
248 | line-height: 22px
|
249 |
|
250 | @media(max-width: phoneWidth)
|
251 | font-size: 12px
|
252 | line-height: 20px
|
253 |
|
254 | ul
|
255 | padding: 0
|
256 |
|
257 | li
|
258 | list-style-type: none
|
259 |
|
260 | .bullets
|
261 | padding-left: 15px
|
262 | li
|
263 | list-style-type: disc
|
264 |
|
265 | .txt-left
|
266 | text-align: left
|
267 |
|
268 | .txt-right
|
269 | text-align: right
|
270 |
|
271 | .txt-center
|
272 | text-align: center
|
273 |
|
274 | a
|
275 | color: green
|
276 |
|
277 | .overflow-hidden
|
278 | overflow: hidden
|
279 |
|
280 | .hover-green:hover
|
281 | color: green !important
|
282 |
|
283 | .hover-bold:hover
|
284 | font-family: Akzidenz Grotesk BQ Medium, Helvetica, Arial
|
285 | font-weight: 400
|
286 |
|
287 |
|
288 |
|
289 |
|
290 |
|
291 | .code
|
292 | overflow-y: auto
|
293 | display: block
|
294 | padding: 10px
|
295 | font-family: Menlo, Monaco, Consolas, "Courier New", monospace
|
296 | font-size: 14px
|
297 | line-height: 1.42857143
|
298 | border-radius: 4px
|
299 |
|
300 | code, .inline-code
|
301 | padding: 0
|
302 | font-size: inherit
|
303 | background-color: transparent
|
304 | border-radius: 0
|
305 |
|
306 | .code-dark
|
307 | .code-light
|
308 | overflow-y: auto
|
309 | display: block
|
310 | padding: 20px
|
311 | font-family: Menlo, Monaco, Consolas, "Courier New", monospace
|
312 | font-size: 12px
|
313 | line-height: 1.42857143
|
314 | word-break: break-all
|
315 | word-wrap: break-word
|
316 | border-radius: 4px
|
317 |
|
318 | .code-dark
|
319 | background-color: #2C303A
|
320 |
|
321 | .code-light
|
322 | background-color: #f0f0f0
|
323 |
|
324 |
|
325 |
|
326 |
|
327 |
|
328 | .btn-gray
|
329 | .btn-white
|
330 | .btn-slate
|
331 | .btn-blush
|
332 | .btn-marigold
|
333 | .btn-air
|
334 | .btn-bluebird
|
335 | .btn-green
|
336 | .btn-dark-green
|
337 | .btn-dark-gray
|
338 | .btn-black
|
339 | font-family: 'Akzidenz Grotesk BQ Medium'
|
340 | font-weight: 400
|
341 | cursor: pointer
|
342 | border-radius: 4px
|
343 | border: none
|
344 | font-size: 16px
|
345 | padding: 10px 30px
|
346 | box-shadow: 0 2px 7px 0 rgba(0,0,0,0.1)
|
347 | transform: translateY(0)
|
348 | transition: transform 150ms, box-shadow 150ms
|
349 | &:hover
|
350 | transform: translateY(-2px)
|
351 | box-shadow: 0 3px 9px 0 rgba(0,0,0,0.15)
|
352 |
|
353 | .btn-small
|
354 | padding: 8px 16px
|
355 | font-size: 13px
|
356 |
|
357 | .btn-med
|
358 | padding: 18px 30px
|
359 |
|
360 | .btn-lg
|
361 | padding: 25px 40px
|
362 |
|
363 | .btn-dark-green
|
364 | color: white
|
365 | background-color: dark_green
|
366 |
|
367 | .btn-dark-gray
|
368 | color: white
|
369 | background-color: dark_gray
|
370 |
|
371 | .btn-black
|
372 | color: white
|
373 | background-color: white
|
374 |
|
375 | .btn-gray
|
376 | color: ash
|
377 | background-color: smoke
|
378 | box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.1)
|
379 |
|
380 | .btn-gray.active
|
381 | color: darken(ash, 25%)
|
382 | background-color: darken(smoke, 10%)
|
383 |
|
384 | .btn-white
|
385 | color: green
|
386 | background-color: white
|
387 |
|
388 | .btn-slate
|
389 | color: white
|
390 | background-color: slate
|
391 |
|
392 | .btn-blush
|
393 | color: white
|
394 | background-color: blush
|
395 |
|
396 | .btn-marigold
|
397 | color: white
|
398 | background-color: marigold
|
399 |
|
400 | .btn-air
|
401 | color: white
|
402 | background-color: air
|
403 |
|
404 | .btn-bluebird
|
405 | color: white
|
406 | background-color: bluebird
|
407 |
|
408 | .btn-green
|
409 | color: white
|
410 | background-color: green
|
411 |
|
412 | .play-btn-green
|
413 | .play-btn-white
|
414 | border-radius: 100%
|
415 | width: 100%
|
416 | height: 100%
|
417 | position: relative
|
418 | box-shadow: 0 2px 7px 0 rgba(0,0,0,0.2)
|
419 | &:before
|
420 | content: '\25B6'
|
421 | position absolute
|
422 | top: calc(50% - 15px)
|
423 | left: calc(50% - 10px)
|
424 | width: 30px
|
425 | font-size: 30px
|
426 | line-height: 30px
|
427 |
|
428 | .play-btn-green
|
429 | background: green
|
430 | color: white
|
431 |
|
432 | .play-btn-white
|
433 | background: white
|
434 | color: green
|
435 |
|
436 | .play-btn-wide-green
|
437 | background: green
|
438 | color: white
|
439 |
|
440 | .play-btn-wide-white
|
441 | background: white
|
442 | color: green
|
443 |
|
444 | .play-btn-wide-green
|
445 | .play-btn-wide-white
|
446 | padding: 15px 25px
|
447 | border-radius: 25px
|
448 | box-shadow: 0 2px 7px 0 rgba(0,0,0,0.2);
|
449 | font-size: 16px
|
450 | display: flex
|
451 | align-items: center
|
452 | &:before
|
453 | content: '\25B6'
|
454 | font-size: 18px
|
455 | margin-right: 10px
|
456 | height: 19px
|
457 |
|
458 |
|
459 |
|
460 |
|
461 |
|
462 | .link
|
463 | font-family: 'Akzidenz Grotesk BQ Medium'
|
464 | font-size: 16px
|
465 | color: mongo_green
|
466 | line-height: 24px
|
467 |
|
468 |
|
469 |
|
470 |
|
471 |
|
472 |
|
473 | .input-elem
|
474 | padding: 12px
|
475 | font-size: 16px
|
476 | line-height: 19px
|
477 | width: 100%
|
478 | border-radius: 2px
|
479 | border: 1px solid #B3BBC1
|
480 | box-shadow: inset 0 0 2px 0 rgba(0,0,0,0.2)
|
481 | transition: all 300ms
|
482 | &:focus
|
483 | border: 1px solid #69B241
|
484 | box-shadow: 0 0 2px 0 rgba(0,0,0,0.2)
|
485 |
|
486 |
|
487 |
|
488 |
|
489 |
|
490 | [class^="icon-"], [class*=" icon-"]
|
491 | font-family: 'icomoon'
|
492 | speak: none
|
493 | font-style: normal
|
494 | font-weight: normal
|
495 | font-variant: normal
|
496 | text-transform: none
|
497 | line-height: 1
|
498 |
|
499 | .icon-presentation:before
|
500 | content: "\e609"
|
501 | .icon-lightbulb:before
|
502 | content: "\e60a"
|
503 | .icon-world:before
|
504 | content: "\e60b"
|
505 | .icon-in:before
|
506 | content: "\e600"
|
507 | .icon-library:before
|
508 | content: "\e611"
|
509 | .icon-phone:before
|
510 | content: "\e601"
|
511 | .icon-calendar:before
|
512 | content: "\e60c"
|
513 | .icon-share:before
|
514 | content: "\e613"
|
515 | .icon-google-plus-square:before
|
516 | content: "\e602"
|
517 | .icon-facebook:before
|
518 | content: "\e60d"
|
519 | .icon-facebook-square:before
|
520 | content: "\e603"
|
521 | .icon-twitter:before
|
522 | content: "\e60e"
|
523 | .icon-twitter-square:before
|
524 | content: "\e604"
|
525 | .icon-play:before
|
526 | content: "\e612"
|
527 | .icon-youtube:before
|
528 | content: "\e60f"
|
529 | .icon-github:before
|
530 | content: "\e610"
|
531 | .icon-linux:before
|
532 | content: "\e606"
|
533 | .icon-apple:before
|
534 | content: "\e607"
|
535 | .icon-windows:before
|
536 | content: "\e608"
|
537 | .icon-linkedin-square:before
|
538 | content: "\e605"
|
539 | .icon-angle-left:before
|
540 | content: "\f104"
|
541 | .icon-angle-right:before
|
542 | content: "\f105"
|
543 | .icon-angle-up:before
|
544 | content: "\f106"
|
545 | .icon-angle-down:before
|
546 | content: "\f107"
|
547 | .icon-life-bouy:before
|
548 | content: "\f1cd"
|
549 | .icon-monitor:before
|
550 | content: "\e021"
|
551 | .icon-search:before
|
552 | content: "\e036"
|
553 | .icon-circle-check:before
|
554 | content: "\e042"
|
555 | .icon-circle-cross:before
|
556 | content: "\e043"
|
557 | .icon-check:before
|
558 | content: "\e116"
|
559 | .icon-cross:before
|
560 | content: "\e117"
|
561 | .icon-menu:before
|
562 | content: "\e120"
|
563 | .icon-open:before
|
564 | content: "\e128"
|
565 |
|
566 | .no-decor
|
567 | text-decoration: none !important
|
568 | color: inherit
|
569 |
|
570 | .no-decor *
|
571 | text-decoration: none !important
|
572 |
|
573 | .hover-underline:hover
|
574 | text-decoration: underline !important
|
575 |
|
576 |
|
577 |
|
578 |
|
579 |
|
580 |
|
581 | .table:not(.table-striped)
|
582 | width: 100%
|
583 | font-size: 16px
|
584 | border-collapse: collapse
|
585 |
|
586 | td, th
|
587 | padding: 15px 10px
|
588 |
|
589 | th
|
590 | font-family: 'Akzidenz Grotesk BQ Medium'
|
591 | font-weight: 500
|
592 |
|
593 | td
|
594 | border-bottom: 1px solid #B3BBC1
|
595 | border-right: 1px solid #B3BBC1
|
596 | line-height: 23px
|
597 |
|
598 | td:last-child
|
599 | border-right: none
|
600 |
|
601 | th
|
602 | border-bottom: 2px solid #B3BBC1
|
603 |
|
604 | @media(max-width: 800px)
|
605 | font-size: 16px
|
606 |
|
607 | .table.inner-green td:nth-child(2n)
|
608 | background-color: #e7f6ee
|
609 |
|
610 | .table-align-top
|
611 | td
|
612 | vertical-align: top
|
613 |
|
614 |
|
615 |
|
616 |
|
617 | blockquote
|
618 | margin: 0
|
619 |
|
620 | .blockquote-lg
|
621 | padding: 50px
|
622 | .blockquote-sm
|
623 | padding: 10px 0px
|
624 | .blockquote-lg p
|
625 | font-size: 24px
|
626 | line-height: 34px
|
627 | .blockquote-sm p
|
628 | font-size: 20px
|
629 | line-height: 28px
|
630 |
|
631 | .blockquote-lg
|
632 | .blockquote-sm
|
633 | display: flex
|
634 | justify-content: center
|
635 | align-items: center
|
636 | width: 100%
|
637 | background: #F3F7FD
|
638 | position: relative
|
639 | margin: 0
|
640 | &:before
|
641 | position: absolute
|
642 | content: ' '
|
643 | width: 100%
|
644 | height: 100%
|
645 | background: url('/assets/images/style-guide/testimonial-bg.svg')
|
646 | background-size: 100%
|
647 | z-index: 0
|
648 |
|
649 | .blockquote-lg blockquote
|
650 | .blockquote-sm blockquote
|
651 | margin: 20px 15px
|
652 |
|
653 | .blockquote-lg img
|
654 | .blockquote-sm img
|
655 | width: 150px
|
656 | margin-right: 60px
|
657 | z-index: 1
|
658 |
|
659 | .blockquote-lg p
|
660 | .blockquote-sm p
|
661 | margin: 0px 0px 10px 0px
|
662 | color: #8D8D8E
|
663 | z-index: 1
|
664 | max-width: 500px
|
665 | position: relative
|
666 | &:after
|
667 | content: '”'
|
668 | &:before
|
669 | content: url('/assets/images/style-guide/quote.svg')
|
670 | position: absolute
|
671 | top: -15px
|
672 | left: -20px
|
673 |
|
674 | .blockquote-lg.no-bg
|
675 | .blockquote-sm.no-bg
|
676 | border-left: 3px solid green
|
677 | background: transparent
|
678 | &:before
|
679 | background: transparent
|
680 | p
|
681 | color: slate !important
|
682 | &:before
|
683 | position: absoute
|
684 | top: -15px
|
685 | content: url('/assets/images/style-guide/quote-green.svg') !important
|
686 |
|
687 |
|
688 |
|
689 |
|
690 |
|
691 | .screenshot-left
|
692 | .screenshot-right
|
693 | perspective: 300px
|
694 | img
|
695 | border-radius: 8px
|
696 | box-shadow: 0 20px 25px 0 rgba(0,0,0,0.1)
|
697 | transform-style: preserve-3d
|
698 |
|
699 | .screenshot-left img
|
700 | transform: rotate3d(0, 1, 0, 5deg) scale(0.9, 1)
|
701 | @media(max-width: 800px)
|
702 | transform: rotate3d(0, 0, 0, 5deg) scale(0.9, 1)
|
703 |
|
704 | .screenshot-right img
|
705 | transform: rotate3d(0, 1, 0, -5deg) scale(0.9, 1)
|
706 | @media(max-width: 800px)
|
707 | transform: rotate3d(0, 0, 0, 5deg) scale(0.9, 1)
|
708 |
|
709 |
|
710 |
|
711 |
|
712 |
|
713 | .callout
|
714 | margin-top: 16px
|
715 | padding: 15px
|
716 | background-color: smoke
|
717 | border-left: 5px solid mongo_green
|
718 | border-radius: 3px
|
719 |
|
720 |
|
721 |
|
722 |
|
723 | .border
|
724 | border: solid 1px #e0e7e8
|
725 |
|
726 | .border-green
|
727 | border: solid 1px mongo_green
|
728 |
|
729 | .border-green-2
|
730 | border: solid 2px mongo_green
|
731 |
|
732 | .border-t-green-5
|
733 | border-top: solid 5px mongo_green
|
734 |
|
735 | .border-b-green-5
|
736 | border-bottom: solid 5px mongo_green
|
737 |
|
738 | .border-l-green-5
|
739 | border-left: solid 5px mongo_green
|
740 |
|
741 | .border-r-green-5
|
742 | border-right: solid 5px mongo_green
|
743 |
|
744 | .radius
|
745 | border-radius: 4px
|
746 |
|
747 |
|
748 |
|
749 |
|
750 |
|
751 | .shadow
|
752 | box-shadow: 0 2px 7px 0 rgba(0,0,0,0.2)
|
753 |
|
754 | .no-shadow
|
755 | box-shadow: none
|
756 |
|
757 | .arrow-down
|
758 | width: 0;
|
759 | height: 0;
|
760 | border-left: 10px solid transparent
|
761 | border-right: 10px solid transparent
|
762 | border-top: 10px solid #fff
|
763 |
|
764 | .gradient-one
|
765 | background: linear-gradient(115.46deg, #FCFCFC 0%, #FCFDFD 49.07%, #F3F8FF 100%)
|
766 |
|
767 | .gradient-two
|
768 | background: linear-gradient(116.13deg, #FFFFFF 0%, #FCFDFD 49.18%, #F5F6F7 100%)
|
769 |
|
770 | .box-shadow-top
|
771 | width: 100%
|
772 | height: 15px
|
773 | position: absolute
|
774 | bottom: 20px
|
775 | box-shadow: 0 0px 70px 50px #fff
|
776 | background: #fff
|
777 |
|
778 | .list
|
779 | li
|
780 | line-height: 1.5em !important
|
781 | margin: 15px 0 15px 0 !important
|
782 |
|
783 | ol.list
|
784 | ul.list
|
785 | padding-left: 30px !important
|
786 |
|
787 | ul.list
|
788 | list-style-type: disc !important
|
789 |
|
790 | ol.list
|
791 | list-style-type: decimal !important
|
792 |
|