jekyll-theme-prettydocs 0.0.6 → 1.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (195) hide show
  1. checksums.yaml +5 -5
  2. data/LICENSE.txt +0 -0
  3. data/README.md +59 -178
  4. data/_includes/footer.html +6 -6
  5. data/_includes/home.html +122 -0
  6. data/_includes/promo-block.html +29 -86
  7. data/_layouts/home.html +36 -53
  8. data/_layouts/page.html +51 -5
  9. data/assets/.DS_Store +0 -0
  10. data/assets/css/.DS_Store +0 -0
  11. data/assets/css/styles.css +1373 -1267
  12. data/assets/images/.DS_Store +0 -0
  13. data/assets/images/demo/.DS_Store +0 -0
  14. data/assets/images/demo/fontawesome-icons.png +0 -0
  15. data/assets/images/demo/instance-promo.jpg +0 -0
  16. data/assets/images/demo/theme-atom.png +0 -0
  17. data/assets/images/demo/theme-decibel.png +0 -0
  18. data/assets/images/demo/theme-delta.png +0 -0
  19. data/assets/images/demo/theme-devstudio.png +0 -0
  20. data/assets/images/demo/theme-instance.png +0 -0
  21. data/assets/images/demo/theme-onboard.png +0 -0
  22. data/assets/images/demo/theme-orbit.png +0 -0
  23. data/assets/images/demo/theme-pillar.png +0 -0
  24. data/assets/images/demo/theme-sphere.png +0 -0
  25. data/assets/images/demo/theme-startupkit.png +0 -0
  26. data/assets/images/demo/theme-tempo.png +0 -0
  27. data/assets/images/demo/theme-trades.png +0 -0
  28. data/assets/images/empty.gif +0 -0
  29. data/assets/images/untitled folder/.DS_Store +0 -0
  30. data/assets/images/untitled folder/bootstrap-template-for-schools-academy.png +0 -0
  31. data/assets/images/untitled folder/crowdfunding-landing-page-onboard.png +0 -0
  32. data/assets/images/untitled folder/free-bootstrap-portfolio-theme-for-developers.png +0 -0
  33. data/assets/images/untitled folder/free-bootstrap-theme-appkit-landing.png +0 -0
  34. data/assets/images/untitled folder/free-bootstrap-theme-for-developers-devaid.png +0 -0
  35. data/assets/images/untitled folder/free-bootstrap-theme-for-develpers-prettydocs.png +0 -0
  36. data/assets/images/untitled folder/free-bootstrap-theme-for-documentation-prettydedocs.png +0 -0
  37. data/assets/images/untitled folder/free-bootstrap-theme-for-startups-developers-appkit-landing.png +0 -0
  38. data/assets/images/untitled folder/html5-website-template-college-green.png +0 -0
  39. data/assets/images/untitled folder/html5-website-template-placeholder.png +0 -0
  40. data/assets/images/untitled folder/restaurant-landing-page-epicure.png +0 -0
  41. data/assets/images/untitled folder/wedding-invitation-landing-page-matrimony.png +0 -0
  42. data/assets/js/.DS_Store +0 -0
  43. data/assets/js/main.js +42 -46
  44. data/assets/plugins/.DS_Store +0 -0
  45. data/assets/plugins/bootstrap/css/bootstrap-grid.css +1912 -0
  46. data/assets/plugins/bootstrap/css/bootstrap-grid.css.map +0 -0
  47. data/assets/plugins/bootstrap/css/bootstrap-grid.min.css +7 -0
  48. data/assets/plugins/bootstrap/css/bootstrap-grid.min.css.map +0 -0
  49. data/assets/plugins/bootstrap/css/bootstrap-reboot.css +331 -0
  50. data/assets/plugins/bootstrap/css/bootstrap-reboot.css.map +0 -0
  51. data/assets/plugins/bootstrap/css/bootstrap-reboot.min.css +8 -0
  52. data/assets/plugins/bootstrap/css/bootstrap-reboot.min.css.map +0 -0
  53. data/assets/plugins/bootstrap/css/bootstrap.css +7946 -5683
  54. data/assets/plugins/bootstrap/css/bootstrap.css.map +0 -0
  55. data/assets/plugins/bootstrap/css/bootstrap.min.css +4 -3
  56. data/assets/plugins/bootstrap/css/bootstrap.min.css.map +0 -0
  57. data/assets/plugins/bootstrap/js/bootstrap.bundle.js +6461 -0
  58. data/assets/plugins/bootstrap/js/bootstrap.bundle.js.map +0 -0
  59. data/assets/plugins/bootstrap/js/bootstrap.bundle.min.js +7 -0
  60. data/assets/plugins/bootstrap/js/bootstrap.bundle.min.js.map +0 -0
  61. data/assets/plugins/bootstrap/js/bootstrap.js +3448 -1867
  62. data/assets/plugins/bootstrap/js/bootstrap.js.map +0 -0
  63. data/assets/plugins/bootstrap/js/bootstrap.min.js +6 -6
  64. data/assets/plugins/bootstrap/js/bootstrap.min.js.map +0 -0
  65. data/assets/plugins/jquery-3.3.1.min.js +2 -0
  66. data/assets/plugins/lightbox/Gruntfile.js +84 -83
  67. data/assets/plugins/lightbox/ISSUE_TEMPLATE.md +9 -0
  68. data/assets/plugins/lightbox/LICENSE +21 -0
  69. data/assets/plugins/lightbox/README.md +15 -10
  70. data/assets/plugins/lightbox/bower.json +29 -38
  71. data/assets/plugins/lightbox/dist/ekko-lightbox.css +2 -62
  72. data/assets/plugins/lightbox/dist/ekko-lightbox.js +668 -400
  73. data/assets/plugins/lightbox/dist/ekko-lightbox.js.map +1 -0
  74. data/assets/plugins/lightbox/dist/ekko-lightbox.min.js +2 -7
  75. data/assets/plugins/lightbox/dist/ekko-lightbox.min.js.map +1 -0
  76. data/assets/plugins/lightbox/ekko-lightbox.js +671 -0
  77. data/assets/plugins/lightbox/ekko-lightbox.less +139 -64
  78. data/assets/plugins/lightbox/examples/bs3.html +596 -0
  79. data/assets/plugins/lightbox/index.html +659 -0
  80. data/assets/plugins/lightbox/package.json +57 -46
  81. data/assets/plugins/lightbox/webpack.config.js +89 -0
  82. data/assets/plugins/lightbox/yarn.lock +6683 -0
  83. data/assets/plugins/prism/min/prism-min.js +0 -0
  84. data/assets/plugins/stickyfill/.editorconfig +9 -0
  85. data/assets/plugins/stickyfill/.gitignore +1 -0
  86. data/assets/plugins/stickyfill/Gruntfile.js +106 -0
  87. data/assets/plugins/stickyfill/LICENSE +21 -0
  88. data/assets/plugins/stickyfill/README.md +229 -0
  89. data/assets/plugins/stickyfill/dist/stickyfill.es6.js +507 -0
  90. data/assets/plugins/stickyfill/dist/stickyfill.js +520 -0
  91. data/assets/plugins/stickyfill/dist/stickyfill.min.js +7 -0
  92. data/assets/plugins/stickyfill/package-lock.json +2109 -0
  93. data/assets/plugins/stickyfill/package.json +32 -0
  94. data/assets/plugins/stickyfill/src/stickyfill.js +500 -0
  95. data/assets/plugins/stickyfill/test/index.html +941 -0
  96. data/assets/plugins/stickyfill/test/js/jquery-3.1.1.min.js +4 -0
  97. data/assets/plugins/stickyfill/types/index.d.ts +17 -0
  98. data/assets/plugins/stickyfill/yarn.lock +1475 -0
  99. data/assets/scss/.DS_Store +0 -0
  100. data/assets/{less/base.less → scss/_base.scss} +283 -307
  101. data/assets/{less/doc.less → scss/_doc.scss} +747 -747
  102. data/assets/{less/landing.less → scss/_landing.scss} +231 -244
  103. data/assets/scss/_mixins.scss +175 -0
  104. data/assets/scss/config.codekit3 +2243 -0
  105. data/assets/scss/styles.scss +45 -0
  106. metadata +76 -96
  107. data/_includes/blue-doc-wrapper.html +0 -293
  108. data/_includes/blue-header.html +0 -17
  109. data/_includes/card-charts.html +0 -10
  110. data/_includes/card-components.html +0 -10
  111. data/_includes/card-faqs.html +0 -10
  112. data/_includes/card-license.html +0 -10
  113. data/_includes/card-quick.html +0 -10
  114. data/_includes/card-showcase.html +0 -10
  115. data/_includes/cards-section.html +0 -47
  116. data/_includes/doc-wrapper.html +0 -170
  117. data/_includes/fb-root.html +0 -9
  118. data/_includes/green-doc-wrapper.html +0 -484
  119. data/_includes/green-header.html +0 -17
  120. data/_includes/header-home.html +0 -21
  121. data/_includes/header.html +0 -70
  122. data/_includes/icon-github.html +0 -1
  123. data/_includes/landing-header.html +0 -22
  124. data/_includes/orange-doc-wrapper.html +0 -65
  125. data/_includes/orange-header.html +0 -17
  126. data/_includes/pink-doc-wrapper.html +0 -281
  127. data/_includes/pink-header.html +0 -17
  128. data/_includes/purple-doc-wrapper.html +0 -138
  129. data/_includes/purple-header.html +0 -17
  130. data/_layouts/blue.html +0 -53
  131. data/_layouts/default.html +0 -53
  132. data/_layouts/green.html +0 -53
  133. data/_layouts/orange.html +0 -53
  134. data/_layouts/pink.html +0 -53
  135. data/_layouts/post.html +0 -5
  136. data/_layouts/purple.html +0 -53
  137. data/assets/images/demo/a-complete-example-of-page.png +0 -0
  138. data/assets/less/mixins.less +0 -185
  139. data/assets/less/styles.less +0 -13
  140. data/assets/less/theme-default.less +0 -115
  141. data/assets/plugins/bootstrap/css/bootstrap-theme.css +0 -587
  142. data/assets/plugins/bootstrap/css/bootstrap-theme.css.map +0 -0
  143. data/assets/plugins/bootstrap/css/bootstrap-theme.min.css +0 -6
  144. data/assets/plugins/bootstrap/css/bootstrap-theme.min.css.map +0 -0
  145. data/assets/plugins/bootstrap/fonts/glyphicons-halflings-regular.eot +0 -0
  146. data/assets/plugins/bootstrap/fonts/glyphicons-halflings-regular.svg +0 -288
  147. data/assets/plugins/bootstrap/fonts/glyphicons-halflings-regular.ttf +0 -0
  148. data/assets/plugins/bootstrap/fonts/glyphicons-halflings-regular.woff +0 -0
  149. data/assets/plugins/bootstrap/fonts/glyphicons-halflings-regular.woff2 +0 -0
  150. data/assets/plugins/bootstrap/js/npm.js +0 -13
  151. data/assets/plugins/font-awesome/HELP-US-OUT.txt +0 -7
  152. data/assets/plugins/font-awesome/css/font-awesome.css +0 -2199
  153. data/assets/plugins/font-awesome/css/font-awesome.min.css +0 -4
  154. data/assets/plugins/font-awesome/fonts/FontAwesome.otf +0 -0
  155. data/assets/plugins/font-awesome/fonts/fontawesome-webfont.eot +0 -0
  156. data/assets/plugins/font-awesome/fonts/fontawesome-webfont.svg +0 -685
  157. data/assets/plugins/font-awesome/fonts/fontawesome-webfont.ttf +0 -0
  158. data/assets/plugins/font-awesome/fonts/fontawesome-webfont.woff +0 -0
  159. data/assets/plugins/font-awesome/fonts/fontawesome-webfont.woff2 +0 -0
  160. data/assets/plugins/font-awesome/less/animated.less +0 -34
  161. data/assets/plugins/font-awesome/less/bordered-pulled.less +0 -25
  162. data/assets/plugins/font-awesome/less/core.less +0 -12
  163. data/assets/plugins/font-awesome/less/fixed-width.less +0 -6
  164. data/assets/plugins/font-awesome/less/font-awesome.less +0 -18
  165. data/assets/plugins/font-awesome/less/icons.less +0 -733
  166. data/assets/plugins/font-awesome/less/larger.less +0 -13
  167. data/assets/plugins/font-awesome/less/list.less +0 -19
  168. data/assets/plugins/font-awesome/less/mixins.less +0 -60
  169. data/assets/plugins/font-awesome/less/path.less +0 -15
  170. data/assets/plugins/font-awesome/less/rotated-flipped.less +0 -20
  171. data/assets/plugins/font-awesome/less/screen-reader.less +0 -5
  172. data/assets/plugins/font-awesome/less/stacked.less +0 -20
  173. data/assets/plugins/font-awesome/less/variables.less +0 -744
  174. data/assets/plugins/font-awesome/scss/_animated.scss +0 -34
  175. data/assets/plugins/font-awesome/scss/_bordered-pulled.scss +0 -25
  176. data/assets/plugins/font-awesome/scss/_core.scss +0 -12
  177. data/assets/plugins/font-awesome/scss/_fixed-width.scss +0 -6
  178. data/assets/plugins/font-awesome/scss/_icons.scss +0 -733
  179. data/assets/plugins/font-awesome/scss/_larger.scss +0 -13
  180. data/assets/plugins/font-awesome/scss/_list.scss +0 -19
  181. data/assets/plugins/font-awesome/scss/_mixins.scss +0 -60
  182. data/assets/plugins/font-awesome/scss/_path.scss +0 -15
  183. data/assets/plugins/font-awesome/scss/_rotated-flipped.scss +0 -20
  184. data/assets/plugins/font-awesome/scss/_screen-reader.scss +0 -5
  185. data/assets/plugins/font-awesome/scss/_stacked.scss +0 -20
  186. data/assets/plugins/font-awesome/scss/_variables.scss +0 -744
  187. data/assets/plugins/font-awesome/scss/font-awesome.scss +0 -18
  188. data/assets/plugins/jquery-1.12.3.min.js +0 -5
  189. data/assets/plugins/lightbox/LICENSE.txt +0 -339
  190. data/assets/plugins/lightbox/dist/ekko-lightbox.min.css +0 -6
  191. data/assets/plugins/lightbox/ekko-lightbox.coffee +0 -353
  192. data/assets/plugins/lightbox/examples/index.html +0 -559
  193. data/assets/plugins/lightbox/examples/remote/page1.html +0 -9
  194. data/assets/plugins/lightbox/examples/remote/page2.html +0 -9
  195. data/assets/plugins/lightbox/examples/remote/readme.md +0 -1
data/_layouts/home.html CHANGED
@@ -1,53 +1,36 @@
1
- <!DOCTYPE html>
2
- <!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
3
- <!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
4
- <!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
5
- <head>
6
- <title>{{ site.title | prepend: " - " | prepend: page.title }}</title>
7
- <!-- Meta -->
8
- <meta charset="utf-8">
9
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
10
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
11
- <meta name="description" content="">
12
- <meta name="author" content="">
13
- <link rel="shortcut icon" href="favicon.ico">
14
- <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
15
- <!-- Global CSS -->
16
- <link rel="stylesheet" href="{{ "/assets/plugins/bootstrap/css/bootstrap.min.css" | prepend: site.baseurl }}">
17
- <!-- Plugins CSS -->
18
- <link rel="stylesheet" href="{{ "/assets/plugins/font-awesome/css/font-awesome.css" | prepend: site.baseurl }}">
19
- <link rel="stylesheet" href="{{ "/assets/plugins/elegant_font/css/style.css" | prepend: site.baseurl }}">
20
-
21
- <!-- Theme CSS -->
22
- <link id="theme-style" rel="stylesheet" href="{{ "/assets/css/styles.css" | prepend: site.baseurl }}">
23
- <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
24
- <!--[if lt IE 9]>
25
- <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
26
- <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
27
- <![endif]-->
28
- </head>
29
-
30
- <body class="landing-page">
31
-
32
- {% include fb-root.html %}
33
-
34
- <div class="page-wrapper">
35
- {% include header-home.html %}
36
-
37
- {% include cards-section.html %}
38
-
39
- {{ content }}
40
-
41
- </div><!--//page-wrapper-->
42
-
43
- {% include footer.html %}
44
-
45
- <!-- Main Javascript -->
46
- <script type="text/javascript" src="{{ "/assets/plugins/jquery-1.12.3.min.js" | prepend: site.baseurl }}"></script>
47
- <script type="text/javascript" src="{{ "/assets/plugins/bootstrap/js/bootstrap.min.js" | prepend: site.baseurl }}"></script>
48
- <script type="text/javascript" src="{{ "/assets/plugins/jquery-match-height/jquery.matchHeight-min.js" | prepend: site.baseurl }}"></script>
49
- <script type="text/javascript" src="{{ "/assets/js/main.js" | prepend: site.baseurl }}"></script>
50
-
51
- </body>
52
- </html>
53
-
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <title>{{ site.title | prepend: " - " | prepend: page.title }}</title>
5
+ <!-- Meta -->
6
+ <meta charset="utf-8">
7
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
8
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
9
+ <meta name="description" content="{{ site.description }}">
10
+ <meta name="author" content="{{ site.email }}">
11
+ <link rel="shortcut icon" href="favicon.ico">
12
+ <link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
13
+ <!-- FontAwesome JS -->
14
+ <script defer src="https://use.fontawesome.com/releases/v5.1.1/js/all.js" integrity="sha384-BtvRZcyfv4r0x/phJt9Y9HhnN5ur1Z+kZbKVgzVBAlQZX4jvAuImlIz+bG7TS00a" crossorigin="anonymous"></script>
15
+ <!-- Global CSS -->
16
+ <link rel="stylesheet" href="{{ 'assets/plugins/bootstrap/css/bootstrap.min.css' | prepend: site.baseurl }}">
17
+ <!-- Plugins CSS -->
18
+ <link rel="stylesheet" href="{{ 'assets/plugins/elegant_font/css/style.css' | prepend: site.baseurl }}">
19
+ <!-- Theme CSS -->
20
+ <link id="theme-style" rel="stylesheet" href="{{ 'assets/css/styles.css' | prepend: site.baseurl }}">
21
+
22
+ </head>
23
+
24
+ <body class="landing-page">
25
+
26
+ {% include home.html %}
27
+
28
+ <!-- Main Javascript -->
29
+ <script type="text/javascript" src="{{ 'assets/plugins/jquery-3.3.1.min.js' | prepend: site.baseurl }}"></script>
30
+ <script type="text/javascript" src="{{ 'assets/plugins/bootstrap/js/bootstrap.min.js' | prepend: site.baseurl }}"></script>
31
+ <script type="text/javascript" src="{{ 'assets/plugins/stickyfill/dist/stickyfill.min.js' | prepend: site.baseurl }}"></script>
32
+ <script type="text/javascript" src="{{ 'assets/js/main.js' | prepend: site.baseurl }}"></script>
33
+
34
+ </body>
35
+ </html>
36
+
data/_layouts/page.html CHANGED
@@ -1,5 +1,51 @@
1
- ---
2
- layout: default
3
- ---
4
-
5
- {{ content }}
1
+ {% if page.color != null %}
2
+ {% assign color = page.color | prepend: 'body-' %}
3
+ {% else %}
4
+ {% assign color = '' %}
5
+ {% endif %}
6
+ <!DOCTYPE html>
7
+ <html lang="en">
8
+ <head>
9
+ <title>{{ site.title | prepend: " - " | prepend: page.title }}</title>
10
+ <!-- Meta -->
11
+ <meta charset="utf-8">
12
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
13
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
14
+ <meta name="description" content="{{ site.description }}">
15
+ <meta name="author" content="{{ site.email }}">
16
+ <link rel="shortcut icon" href="favicon.ico">
17
+ <link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
18
+ <!-- FontAwesome JS -->
19
+ <script defer src="https://use.fontawesome.com/releases/v5.1.1/js/all.js" integrity="sha384-BtvRZcyfv4r0x/phJt9Y9HhnN5ur1Z+kZbKVgzVBAlQZX4jvAuImlIz+bG7TS00a" crossorigin="anonymous"></script>
20
+ <!-- Global CSS -->
21
+ <link rel="stylesheet" href="{{ 'assets/plugins/bootstrap/css/bootstrap.min.css' | prepend: site.baseurl }}">
22
+ <!-- Plugins CSS -->
23
+ <link rel="stylesheet" href="{{ 'assets/plugins/elegant_font/css/style.css' | prepend: site.baseurl }}">
24
+ <link rel="stylesheet" href="{{ 'assets/plugins/prism/prism.css' | prepend: site.baseurl }}">
25
+ <link rel="stylesheet" href="{{ 'assets/plugins/lightbox/dist/ekko-lightbox.css' | prepend: site.baseurl }}">
26
+
27
+ <!-- Theme CSS -->
28
+ <link id="theme-style" rel="stylesheet" href="{{ 'assets/css/styles.css' | prepend: site.baseurl }}">
29
+
30
+ </head>
31
+
32
+ <body class="{{ color }}">
33
+ <div class="page-wrapper">
34
+
35
+ {{ content }}
36
+
37
+ </div><!--//page-wrapper-->
38
+
39
+ {% include footer.html %}
40
+
41
+ <!-- Main Javascript -->
42
+ <script type="text/javascript" src="{{ 'assets/plugins/jquery-3.3.1.min.js' | prepend: site.baseurl }}"></script>
43
+ <script type="text/javascript" src="{{ 'assets/plugins/bootstrap/js/bootstrap.min.js' | prepend: site.baseurl }}"></script>
44
+ <script type="text/javascript" src="{{ 'assets/plugins/prism/prism.js' | prepend: site.baseurl }}"></script>
45
+ <script type="text/javascript" src="{{ 'assets/plugins/jquery-scrollTo/jquery.scrollTo.min.js' | prepend: site.baseurl }}"></script>
46
+ <script type="text/javascript" src="{{ 'assets/plugins/stickyfill/dist/stickyfill.min.js' | prepend: site.baseurl }}"></script>
47
+ <script type="text/javascript" src="{{ 'assets/js/main.js' | prepend: site.baseurl }}"></script>
48
+
49
+ </body>
50
+ </html>
51
+
data/assets/.DS_Store ADDED
Binary file
data/assets/css/.DS_Store ADDED
Binary file
data/assets/css/styles.css CHANGED
@@ -1,1267 +1,1373 @@
1
- /*
2
- * Template Name: PrettyDocs - Responsive Website Template for documentations
3
- * Version: 1.0
4
- * Author: Xiaoying Riley
5
- * License: Creative Commons Attribution 3.0 License - https://creativecommons.org/licenses/by/3.0/
6
- * Twitter: @3rdwave_themes
7
- * Website: http://themes.3rdwavemedia.com/
8
- */
9
- /* Theme default */
10
- /* ======= Base ======= */
11
- body {
12
- font-family: 'Open Sans', arial, sans-serif;
13
- color: #494d55;
14
- font-size: 14px;
15
- -webkit-font-smoothing: antialiased;
16
- -moz-osx-font-smoothing: grayscale;
17
- }
18
- html,
19
- body {
20
- height: 100%;
21
- }
22
- .page-wrapper {
23
- min-height: 100%;
24
- /* equal to footer height */
25
- margin-bottom: -50px;
26
- }
27
- .page-wrapper:after {
28
- content: "";
29
- display: block;
30
- height: 50px;
31
- }
32
- .footer {
33
- height: 50px;
34
- }
35
- p {
36
- line-height: 1.5;
37
- }
38
- a {
39
- color: #3aa7aa;
40
- -webkit-transition: all 0.4s ease-in-out;
41
- -moz-transition: all 0.4s ease-in-out;
42
- -ms-transition: all 0.4s ease-in-out;
43
- -o-transition: all 0.4s ease-in-out;
44
- }
45
- a:hover {
46
- text-decoration: underline;
47
- color: #339597;
48
- }
49
- a:focus {
50
- text-decoration: none;
51
- }
52
- code {
53
- background: #222;
54
- color: #fff;
55
- font-size: 14px;
56
- font-weight: bold;
57
- font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
58
- padding: 2px 8px;
59
- padding-top: 4px;
60
- display: inline-block;
61
- }
62
- .btn,
63
- a.btn {
64
- -webkit-transition: all 0.4s ease-in-out;
65
- -moz-transition: all 0.4s ease-in-out;
66
- -ms-transition: all 0.4s ease-in-out;
67
- -o-transition: all 0.4s ease-in-out;
68
- font-weight: 600;
69
- font-size: 14px;
70
- line-height: 1.5;
71
- }
72
- .btn .fa,
73
- a.btn .fa {
74
- margin-right: 5px;
75
- }
76
- .btn-primary,
77
- a.btn-primary {
78
- background: #40babd;
79
- border: 1px solid #40babd;
80
- color: #fff !important;
81
- }
82
- .btn-primary:hover,
83
- a.btn-primary:hover,
84
- .btn-primary:focus,
85
- a.btn-primary:focus,
86
- .btn-primary:active,
87
- a.btn-primary:active,
88
- .btn-primary.active,
89
- a.btn-primary.active,
90
- .btn-primary.hover,
91
- a.btn-primary.hover {
92
- background: #3aa7aa;
93
- color: #fff !important;
94
- border: 1px solid #3aa7aa;
95
- }
96
- .btn-green,
97
- a.btn-green {
98
- background: #75c181;
99
- border: 1px solid #75c181;
100
- color: #fff !important;
101
- }
102
- .btn-green:hover,
103
- a.btn-green:hover,
104
- .btn-green:focus,
105
- a.btn-green:focus,
106
- .btn-green:active,
107
- a.btn-green:active,
108
- .btn-green.active,
109
- a.btn-green.active,
110
- .btn-green.hover,
111
- a.btn-green.hover {
112
- background: #63b971;
113
- color: #fff !important;
114
- border: 1px solid #63b971;
115
- }
116
- .body-green .btn-green,
117
- .body-green a.btn-green {
118
- color: #fff !important;
119
- }
120
- .body-green .btn-green:hover,
121
- .body-green a.btn-green:hover,
122
- .body-green .btn-green:focus,
123
- .body-green a.btn-green:focus,
124
- .body-green .btn-green:active,
125
- .body-green a.btn-green:active,
126
- .body-green .btn-green.active,
127
- .body-green a.btn-green.active,
128
- .body-green .btn-green.hover,
129
- .body-green a.btn-green.hover {
130
- color: #fff !important;
131
- }
132
- .btn-blue,
133
- a.btn-blue {
134
- background: #58bbee;
135
- border: 1px solid #58bbee;
136
- color: #fff !important;
137
- }
138
- .btn-blue:hover,
139
- a.btn-blue:hover,
140
- .btn-blue:focus,
141
- a.btn-blue:focus,
142
- .btn-blue:active,
143
- a.btn-blue:active,
144
- .btn-blue.active,
145
- a.btn-blue.active,
146
- .btn-blue.hover,
147
- a.btn-blue.hover {
148
- background: #41b2ec;
149
- color: #fff !important;
150
- border: 1px solid #41b2ec;
151
- }
152
- .btn-orange,
153
- a.btn-orange {
154
- background: #F88C30;
155
- border: 1px solid #F88C30;
156
- color: #fff !important;
157
- }
158
- .btn-orange:hover,
159
- a.btn-orange:hover,
160
- .btn-orange:focus,
161
- a.btn-orange:focus,
162
- .btn-orange:active,
163
- a.btn-orange:active,
164
- .btn-orange.active,
165
- a.btn-orange.active,
166
- .btn-orange.hover,
167
- a.btn-orange.hover {
168
- background: #f77e17;
169
- color: #fff !important;
170
- border: 1px solid #f77e17;
171
- }
172
- .btn-red,
173
- a.btn-red {
174
- background: #f77b6b;
175
- border: 1px solid #f77b6b;
176
- color: #fff !important;
177
- }
178
- .btn-red:hover,
179
- a.btn-red:hover,
180
- .btn-red:focus,
181
- a.btn-red:focus,
182
- .btn-red:active,
183
- a.btn-red:active,
184
- .btn-red.active,
185
- a.btn-red.active,
186
- .btn-red.hover,
187
- a.btn-red.hover {
188
- background: #f66553;
189
- color: #fff !important;
190
- border: 1px solid #f66553;
191
- }
192
- .btn-pink,
193
- a.btn-pink {
194
- background: #EA5395;
195
- border: 1px solid #EA5395;
196
- color: #fff !important;
197
- }
198
- .btn-pink:hover,
199
- a.btn-pink:hover,
200
- .btn-pink:focus,
201
- a.btn-pink:focus,
202
- .btn-pink:active,
203
- a.btn-pink:active,
204
- .btn-pink.active,
205
- a.btn-pink.active,
206
- .btn-pink.hover,
207
- a.btn-pink.hover {
208
- background: #e73c87;
209
- color: #fff !important;
210
- border: 1px solid #e73c87;
211
- }
212
- .btn-purple,
213
- a.btn-purple {
214
- background: #8A40A7;
215
- border: 1px solid #8A40A7;
216
- color: #fff !important;
217
- }
218
- .btn-purple:hover,
219
- a.btn-purple:hover,
220
- .btn-purple:focus,
221
- a.btn-purple:focus,
222
- .btn-purple:active,
223
- a.btn-purple:active,
224
- .btn-purple.active,
225
- a.btn-purple.active,
226
- .btn-purple.hover,
227
- a.btn-purple.hover {
228
- background: #7b3995;
229
- color: #fff !important;
230
- border: 1px solid #7b3995;
231
- }
232
- .btn-cta {
233
- padding: 7px 15px;
234
- }
235
- .form-control {
236
- -webkit-box-shadow: none;
237
- -moz-box-shadow: none;
238
- box-shadow: none;
239
- height: 40px;
240
- border-color: #f0f0f0;
241
- }
242
- .form-control::-webkit-input-placeholder {
243
- /* WebKit browsers */
244
- color: #afb3bb;
245
- }
246
- .form-control:-moz-placeholder {
247
- /* Mozilla Firefox 4 to 18 */
248
- color: #afb3bb;
249
- }
250
- .form-control::-moz-placeholder {
251
- /* Mozilla Firefox 19+ */
252
- color: #afb3bb;
253
- }
254
- .form-control:-ms-input-placeholder {
255
- /* Internet Explorer 10+ */
256
- color: #afb3bb;
257
- }
258
- .form-control:focus {
259
- border-color: #e3e3e3;
260
- -webkit-box-shadow: none;
261
- -moz-box-shadow: none;
262
- box-shadow: none;
263
- }
264
- input[type="text"],
265
- input[type="email"],
266
- input[type="password"],
267
- input[type="submit"],
268
- input[type="button"],
269
- textarea,
270
- select {
271
- appearance: none;
272
- /* for mobile safari */
273
- -webkit-appearance: none;
274
- }
275
- #topcontrol {
276
- background: #40babd;
277
- color: #fff;
278
- text-align: center;
279
- display: inline-block;
280
- width: 35px;
281
- height: 35px;
282
- border: none;
283
- -webkit-border-radius: 4px;
284
- -moz-border-radius: 4px;
285
- -ms-border-radius: 4px;
286
- -o-border-radius: 4px;
287
- border-radius: 4px;
288
- -moz-background-clip: padding;
289
- -webkit-background-clip: padding-box;
290
- background-clip: padding-box;
291
- -webkit-transition: all 0.4s ease-in-out;
292
- -moz-transition: all 0.4s ease-in-out;
293
- -ms-transition: all 0.4s ease-in-out;
294
- -o-transition: all 0.4s ease-in-out;
295
- z-index: 30;
296
- }
297
- #topcontrol:hover {
298
- background: #52c2c4;
299
- }
300
- #topcontrol .fa {
301
- position: relative;
302
- top: 3px;
303
- font-size: 25px;
304
- }
305
- .video-container iframe {
306
- max-width: 100%;
307
- }
308
- /* ====== Header ====== */
309
- .header {
310
- background: #494d55;
311
- color: rgba(255, 255, 255, 0.85);
312
- border-top: 5px solid #40babd;
313
- padding: 30px 0;
314
- }
315
- .header a {
316
- color: #fff;
317
- }
318
- .branding {
319
- text-transform: uppercase;
320
- margin-bottom: 10px;
321
- }
322
- .branding .logo {
323
- font-size: 28px;
324
- margin-top: 0;
325
- margin-bottom: 0;
326
- }
327
- .branding .logo a {
328
- text-decoration: none;
329
- }
330
- .branding .text-highlight {
331
- color: #40babd;
332
- }
333
- .body-green .branding .text-highlight {
334
- color: #75c181;
335
- }
336
- .body-blue .branding .text-highlight {
337
- color: #58bbee;
338
- }
339
- .body-orange .branding .text-highlight {
340
- color: #F88C30;
341
- }
342
- .body-red .branding .text-highlight {
343
- color: #f77b6b;
344
- }
345
- .body-pink .branding .text-highlight {
346
- color: #EA5395;
347
- }
348
- .body-purple .branding .text-highlight {
349
- color: #8A40A7;
350
- }
351
- .branding .text-bold {
352
- font-weight: 800;
353
- color: #fff;
354
- }
355
- .branding .icon {
356
- font-size: 24px;
357
- color: #40babd;
358
- }
359
- .body-green .branding .icon {
360
- color: #75c181;
361
- }
362
- .body-blue .branding .icon {
363
- color: #58bbee;
364
- }
365
- .body-orange .branding .icon {
366
- color: #F88C30;
367
- }
368
- .body-red .branding .icon {
369
- color: #f77b6b;
370
- }
371
- .body-pink .branding .icon {
372
- color: #EA5395;
373
- }
374
- .body-purple .branding .icon {
375
- color: #8A40A7;
376
- }
377
- .breadcrumb {
378
- background: none;
379
- margin-bottom: 0;
380
- padding: 0;
381
- }
382
- .breadcrumb li {
383
- color: rgba(255, 255, 255, 0.5);
384
- }
385
- .breadcrumb li.active {
386
- color: rgba(255, 255, 255, 0.5);
387
- }
388
- .breadcrumb li a {
389
- color: rgba(255, 255, 255, 0.5);
390
- }
391
- .breadcrumb li a:hover {
392
- color: #fff;
393
- }
394
- .breadcrumb > li + li:before {
395
- color: rgba(0, 0, 0, 0.4);
396
- }
397
- /* ====== Footer ====== */
398
- .footer {
399
- background: #26282c;
400
- color: rgba(255, 255, 255, 0.6);
401
- padding: 15px 0;
402
- }
403
- .footer a {
404
- color: #40babd;
405
- }
406
- .footer .fa-heart {
407
- color: #EA5395;
408
- }
409
- /* ======= Doc Styling ======= */
410
- .doc-wrapper {
411
- padding: 45px 0;
412
- background: #f9f9fb;
413
- }
414
- .doc-body {
415
- position: relative;
416
- }
417
- .doc-header {
418
- margin-bottom: 30px;
419
- }
420
- .doc-header .doc-title {
421
- color: #40babd;
422
- margin-top: 0;
423
- font-size: 36px;
424
- }
425
- .body-green .doc-header .doc-title {
426
- color: #75c181;
427
- }
428
- .body-blue .doc-header .doc-title {
429
- color: #58bbee;
430
- }
431
- .body-orange .doc-header .doc-title {
432
- color: #F88C30;
433
- }
434
- .body-red .doc-header .doc-title {
435
- color: #f77b6b;
436
- }
437
- .body-pink .doc-header .doc-title {
438
- color: #EA5395;
439
- }
440
- .body-purple .doc-header .doc-title {
441
- color: #8A40A7;
442
- }
443
- .doc-header .icon {
444
- font-size: 30px;
445
- }
446
- .doc-header .meta {
447
- color: #a2a6af;
448
- }
449
- .doc-content {
450
- margin-left: 230px;
451
- }
452
- .doc-section {
453
- padding-top: 15px;
454
- padding-bottom: 15px;
455
- }
456
- .doc-section .section-title {
457
- font-size: 26px;
458
- margin-top: 0;
459
- margin-bottom: 0;
460
- font-weight: bold;
461
- padding-bottom: 10px;
462
- border-bottom: 1px solid #d7d7d7;
463
- }
464
- .doc-section h1 {
465
- font-size: 24px;
466
- font-weight: bold;
467
- }
468
- .doc-section h2 {
469
- font-size: 22px;
470
- font-weight: bold;
471
- }
472
- .doc-section h3 {
473
- font-size: 20px;
474
- font-weight: bold;
475
- }
476
- .doc-section h4 {
477
- font-size: 18px;
478
- font-weight: bold;
479
- }
480
- .doc-section h5 {
481
- font-size: 16px;
482
- font-weight: bold;
483
- }
484
- .doc-section h6 {
485
- font-size: 14px;
486
- font-weight: bold;
487
- }
488
- .section-block {
489
- padding-top: 15px;
490
- padding-bottom: 15px;
491
- }
492
- .section-block .block-title {
493
- margin-top: 0;
494
- }
495
- .section-block .list > li {
496
- margin-bottom: 10px;
497
- }
498
- .section-block .list ul > li {
499
- margin-top: 5px;
500
- }
501
- .question {
502
- font-weight: 400 !important;
503
- color: #3aa7aa;
504
- }
505
- .question .body-green {
506
- color: #63b971;
507
- }
508
- .body-blue .question {
509
- color: #41b2ec;
510
- }
511
- .body-orange .question {
512
- color: #f77e17;
513
- }
514
- .body-pink .question {
515
- color: #e73c87;
516
- }
517
- .body-purple .question {
518
- color: #7b3995;
519
- }
520
- .question .fa {
521
- -webkit-opacity: 0.6;
522
- -moz-opacity: 0.6;
523
- opacity: 0.6;
524
- }
525
- .question .label {
526
- font-size: 11px;
527
- vertical-align: middle;
528
- }
529
- .answer {
530
- color: #616670;
531
- }
532
- .code-block {
533
- margin-top: 30px;
534
- margin-bottom: 30px;
535
- }
536
- .callout-block {
537
- padding: 30px;
538
- -webkit-border-radius: 4px;
539
- -moz-border-radius: 4px;
540
- -ms-border-radius: 4px;
541
- -o-border-radius: 4px;
542
- border-radius: 4px;
543
- -moz-background-clip: padding;
544
- -webkit-background-clip: padding-box;
545
- background-clip: padding-box;
546
- position: relative;
547
- margin-bottom: 30px;
548
- }
549
- .callout-block a {
550
- color: rgba(0, 0, 0, 0.55) !important;
551
- }
552
- .callout-block a:hover {
553
- color: rgba(0, 0, 0, 0.65) !important;
554
- }
555
- .callout-block .icon-holder {
556
- font-size: 30px;
557
- position: absolute;
558
- left: 30px;
559
- top: 30px;
560
- color: rgba(0, 0, 0, 0.25);
561
- }
562
- .callout-block .content {
563
- margin-left: 60px;
564
- }
565
- .callout-block .content p:last-child {
566
- margin-bottom: 0;
567
- }
568
- .callout-block .callout-title {
569
- margin-top: 0;
570
- margin-bottom: 5px;
571
- color: rgba(0, 0, 0, 0.65);
572
- }
573
- .callout-info {
574
- background: #58bbee;
575
- color: #fff;
576
- }
577
- .callout-success {
578
- background: #75c181;
579
- color: #fff;
580
- }
581
- .callout-warning {
582
- background: #F88C30;
583
- color: #fff;
584
- }
585
- .callout-danger {
586
- background: #f77b6b;
587
- color: #fff;
588
- }
589
- .table > thead > tr > th {
590
- border-bottom-color: #8bd6d8;
591
- }
592
- .body-green .table > thead > tr > th {
593
- border-bottom-color: #bbe1c1;
594
- }
595
- .body-blue .table > thead > tr > th {
596
- border-bottom-color: #b5e1f7;
597
- }
598
- .body-orange .table > thead > tr > th {
599
- border-bottom-color: #fbc393;
600
- }
601
- .body-pink .table > thead > tr > th {
602
- border-bottom-color: #f5aecd;
603
- }
604
- .body-purple .table > thead > tr > th {
605
- border-bottom-color: #b87fce;
606
- }
607
- .table-bordered > thead > tr > th {
608
- border-bottom-color: inherit;
609
- }
610
- .table-striped > tbody > tr:nth-of-type(odd) {
611
- background-color: #f5f5f5;
612
- }
613
- .screenshot-holder {
614
- margin-top: 15px;
615
- margin-bottom: 15px;
616
- position: relative;
617
- text-align: center;
618
- }
619
- .screenshot-holder img {
620
- border: 1px solid #f0f0f0;
621
- }
622
- .screenshot-holder .mask {
623
- display: block;
624
- visibility: hidden;
625
- position: absolute;
626
- width: 100%;
627
- height: 100%;
628
- left: 0;
629
- top: 0;
630
- background: rgba(0, 0, 0, 0.25);
631
- cursor: pointer;
632
- text-decoration: none;
633
- }
634
- .screenshot-holder .mask .icon {
635
- color: #fff;
636
- font-size: 42px;
637
- display: block;
638
- position: absolute;
639
- width: 100%;
640
- height: 100%;
641
- top: 50%;
642
- margin-top: -21px;
643
- }
644
- .screenshot-holder:hover .mask {
645
- visibility: visible;
646
- }
647
- .jumbotron h1 {
648
- font-size: 28px;
649
- margin-top: 0;
650
- margin-bottom: 30px;
651
- }
652
- .author-profile {
653
- margin-top: 30px;
654
- }
655
- .author-profile img {
656
- width: 100px;
657
- height: 100px;
658
- }
659
- .speech-bubble {
660
- background: #fff;
661
- -webkit-border-radius: 4px;
662
- -moz-border-radius: 4px;
663
- -ms-border-radius: 4px;
664
- -o-border-radius: 4px;
665
- border-radius: 4px;
666
- -moz-background-clip: padding;
667
- -webkit-background-clip: padding-box;
668
- background-clip: padding-box;
669
- padding: 30px;
670
- margin-top: 20px;
671
- margin-bottom: 30px;
672
- position: relative;
673
- }
674
- .speech-bubble .speech-title {
675
- font-size: 16px;
676
- }
677
- .jumbotron .speech-bubble p {
678
- font-size: 14px;
679
- font-weight: normal;
680
- color: #616670;
681
- }
682
- .speech-bubble:before {
683
- content: "";
684
- display: inline-block;
685
- position: absolute;
686
- left: 50%;
687
- top: -10px;
688
- margin-left: -10px;
689
- width: 0;
690
- height: 0;
691
- border-left: 10px solid transparent;
692
- border-right: 10px solid transparent;
693
- border-bottom: 10px solid #fff;
694
- }
695
- .card {
696
- text-align: center;
697
- border: 1px solid #e3e3e3;
698
- -webkit-border-radius: 4px;
699
- -moz-border-radius: 4px;
700
- -ms-border-radius: 4px;
701
- -o-border-radius: 4px;
702
- border-radius: 4px;
703
- -moz-background-clip: padding;
704
- -webkit-background-clip: padding-box;
705
- background-clip: padding-box;
706
- margin-bottom: 30px;
707
- position: relative;
708
- }
709
- .card .card-block {
710
- padding: 15px;
711
- }
712
- .card .mask {
713
- display: block;
714
- visibility: hidden;
715
- position: absolute;
716
- width: 100%;
717
- height: 100%;
718
- left: 0;
719
- top: 0;
720
- background: rgba(0, 0, 0, 0.25);
721
- cursor: pointer;
722
- text-decoration: none;
723
- }
724
- .card .mask .icon {
725
- color: #fff;
726
- font-size: 42px;
727
- margin-top: 25%;
728
- }
729
- .card:hover .mask {
730
- visibility: visible;
731
- }
732
- /* Color Schemes */
733
- .body-green .header {
734
- border-color: #75c181;
735
- }
736
- .body-green a {
737
- color: #75c181;
738
- }
739
- .body-green a:hover {
740
- color: #52b161;
741
- }
742
- .body-blue .header {
743
- border-color: #58bbee;
744
- }
745
- .body-blue a {
746
- color: #58bbee;
747
- }
748
- .body-blue a:hover {
749
- color: #2aa8e9;
750
- }
751
- .body-orange .header {
752
- border-color: #F88C30;
753
- }
754
- .body-orange a {
755
- color: #F88C30;
756
- }
757
- .body-orange a:hover {
758
- color: #ed7108;
759
- }
760
- .body-pink .header {
761
- border-color: #EA5395;
762
- }
763
- .body-pink a {
764
- color: #EA5395;
765
- }
766
- .body-pink a:hover {
767
- color: #e42679;
768
- }
769
- .body-purple .header {
770
- border-color: #8A40A7;
771
- }
772
- .body-purple a {
773
- color: #8A40A7;
774
- }
775
- .body-purple a:hover {
776
- color: #6c3282;
777
- }
778
- .body-red .header {
779
- border-color: #f77b6b;
780
- }
781
- .body-red a {
782
- color: #f77b6b;
783
- }
784
- .body-red a:hover {
785
- color: #f4503b;
786
- }
787
- /* Sidebar */
788
- .doc-sidebar {
789
- width: 200px;
790
- }
791
- .doc-menu {
792
- list-style: none;
793
- padding-left: 0;
794
- }
795
- .doc-menu > li {
796
- margin-bottom: 5px;
797
- }
798
- .doc-menu > li > a {
799
- display: block;
800
- padding: 5px 15px;
801
- border-left: 4px solid transparent;
802
- color: #616670;
803
- }
804
- .doc-menu > li > a:hover,
805
- .doc-menu > li > a:focus {
806
- color: #40babd;
807
- text-decoration: none;
808
- background: none;
809
- }
810
- .body-green .doc-menu > li > a:hover,
811
- .body-green .doc-menu > li > a:focus {
812
- color: #75c181;
813
- }
814
- .body-blue .doc-menu > li > a:hover,
815
- .body-blue .doc-menu > li > a:focus {
816
- color: #58bbee;
817
- }
818
- .body-orange .doc-menu > li > a:hover,
819
- .body-orange .doc-menu > li > a:focus {
820
- color: #F88C30;
821
- }
822
- .body-red .doc-menu > li > a:hover,
823
- .body-red .doc-menu > li > a:focus {
824
- color: #f77b6b;
825
- }
826
- .body-pink .doc-menu > li > a:hover,
827
- .body-pink .doc-menu > li > a:focus {
828
- color: #EA5395;
829
- }
830
- .body-purple .doc-menu > li > a:hover,
831
- .body-purple .doc-menu > li > a:focus {
832
- color: #8A40A7;
833
- }
834
- .doc-menu > li.active > a {
835
- background: none;
836
- border-left: 4px solid #40babd;
837
- color: #40babd;
838
- font-weight: 600;
839
- }
840
- .body-green .doc-menu > li.active > a {
841
- color: #75c181;
842
- border-color: #75c181;
843
- }
844
- .body-blue .doc-menu > li.active > a {
845
- color: #58bbee;
846
- border-color: #58bbee;
847
- }
848
- .body-orange .doc-menu > li.active > a {
849
- color: #F88C30;
850
- border-color: #F88C30;
851
- }
852
- .body-red .doc-menu > li.active > a {
853
- color: #f77b6b;
854
- border-color: #f77b6b;
855
- }
856
- .body-pink .doc-menu > li.active > a {
857
- color: #EA5395;
858
- border-color: #EA5395;
859
- }
860
- .body-purple .doc-menu > li.active > a {
861
- color: #8A40A7;
862
- border-color: #8A40A7;
863
- }
864
- .doc-sub-menu {
865
- list-style: none;
866
- padding-left: 0;
867
- }
868
- .doc-sub-menu > li {
869
- margin-bottom: 10px;
870
- font-size: 12px;
871
- }
872
- .doc-sub-menu > li:first-child {
873
- padding-top: 5px;
874
- }
875
- .doc-sub-menu > li > a {
876
- display: block;
877
- color: #616670;
878
- padding: 0;
879
- padding-left: 34px;
880
- background: none;
881
- }
882
- .doc-sub-menu > li > a:hover {
883
- color: #40babd;
884
- text-decoration: none;
885
- background: none;
886
- }
887
- .body-green .doc-sub-menu > li > a:hover {
888
- color: #75c181;
889
- }
890
- .body-blue .doc-sub-menu > li > a:hover {
891
- color: #58bbee;
892
- }
893
- .body-orange .doc-sub-menu > li > a:hover {
894
- color: #F88C30;
895
- }
896
- .body-red .doc-sub-menu > li > a:hover {
897
- color: #f77b6b;
898
- }
899
- .body-pink .doc-sub-menu > li > a:hover {
900
- color: #EA5395;
901
- }
902
- .body-purple .doc-sub-menu > li > a:hover {
903
- color: #8A40A7;
904
- }
905
- .doc-sub-menu > li > a:focus {
906
- background: none;
907
- }
908
- .doc-sub-menu > li.active > a {
909
- background: none;
910
- color: #40babd;
911
- }
912
- .body-green .doc-sub-menu > li.active > a {
913
- color: #75c181;
914
- }
915
- .body-blue .doc-sub-menu > li.active > a {
916
- color: #58bbee;
917
- }
918
- .body-orange .doc-sub-menu > li.active > a {
919
- color: #F88C30;
920
- }
921
- .body-red .doc-sub-menu > li.active > a {
922
- color: #f77b6b;
923
- }
924
- .body-pink .doc-sub-menu > li.active > a {
925
- color: #EA5395;
926
- }
927
- .body-purple .doc-sub-menu > li.active > a {
928
- color: #8A40A7;
929
- }
930
- .affix-top {
931
- position: absolute;
932
- top: 15px;
933
- }
934
- .affix {
935
- top: 15px;
936
- }
937
- .affix,
938
- .affix-bottom {
939
- width: 230px;
940
- }
941
- .affix-bottom {
942
- position: absolute;
943
- }
944
- /* ===== Promo block ===== */
945
- .promo-block {
946
- background: #3aa7aa;
947
- }
948
- .body-green .promo-block {
949
- background: #63b971;
950
- }
951
- .body-blue .promo-block {
952
- background: #41b2ec;
953
- }
954
- .body-orange .promo-block {
955
- background: #f77e17;
956
- }
957
- .body-pink .promo-block {
958
- background: #e73c87;
959
- }
960
- .body-purple .promo-block {
961
- background: #7b3995;
962
- }
963
- .promo-block a {
964
- color: rgba(0, 0, 0, 0.5);
965
- }
966
- .promo-block a:hover {
967
- color: rgba(0, 0, 0, 0.6);
968
- }
969
- .promo-block .promo-block-inner {
970
- padding: 45px;
971
- color: #fff;
972
- -webkit-border-radius: 4px;
973
- -moz-border-radius: 4px;
974
- -ms-border-radius: 4px;
975
- -o-border-radius: 4px;
976
- border-radius: 4px;
977
- -moz-background-clip: padding;
978
- -webkit-background-clip: padding-box;
979
- background-clip: padding-box;
980
- }
981
- .promo-block .promo-title {
982
- font-size: 20px;
983
- font-weight: 800;
984
- margin-top: 0;
985
- margin-bottom: 45px;
986
- }
987
- .promo-block .promo-title .fa {
988
- color: rgba(0, 0, 0, 0.5);
989
- }
990
- .promo-block .figure-holder-inner {
991
- background: #fff;
992
- margin-bottom: 30px;
993
- position: relative;
994
- text-align: center;
995
- }
996
- .promo-block .figure-holder-inner img {
997
- border: 5px solid #fff;
998
- }
999
- .promo-block .figure-holder-inner .mask {
1000
- display: block;
1001
- visibility: hidden;
1002
- position: absolute;
1003
- width: 100%;
1004
- height: 100%;
1005
- left: 0;
1006
- top: 0;
1007
- background: rgba(255, 255, 255, 0.65);
1008
- cursor: pointer;
1009
- text-decoration: none;
1010
- }
1011
- .promo-block .figure-holder-inner .mask .icon {
1012
- color: #fff;
1013
- font-size: 42px;
1014
- display: block;
1015
- position: absolute;
1016
- width: 100%;
1017
- height: 100%;
1018
- top: 50%;
1019
- margin-top: -21px;
1020
- }
1021
- .promo-block .figure-holder-inner .mask .icon.pink {
1022
- color: #EA5395;
1023
- }
1024
- .promo-block .figure-holder-inner:hover .mask {
1025
- visibility: visible;
1026
- }
1027
- .promo-block .content-holder-inner {
1028
- padding-left: 15px;
1029
- padding-right: 15px;
1030
- }
1031
- .promo-block .content-title {
1032
- font-size: 16px;
1033
- font-weight: 600;
1034
- margin-top: 0;
1035
- }
1036
- .promo-block .highlight {
1037
- color: rgba(0, 0, 0, 0.4);
1038
- }
1039
- .promo-block .btn-cta {
1040
- background: rgba(0, 0, 0, 0.35);
1041
- border: none;
1042
- color: #fff !important;
1043
- margin-bottom: 15px;
1044
- }
1045
- .promo-block .btn-cta:hover {
1046
- background: rgba(0, 0, 0, 0.5);
1047
- border: none;
1048
- color: #fff !important;
1049
- }
1050
- /* Extra small devices (phones, less than 768px) */
1051
- @media (max-width: 767px) {
1052
- .doc-content {
1053
- margin-left: 0;
1054
- }
1055
- .jumbotron {
1056
- padding: 30px 15px;
1057
- }
1058
- .jumbotron h1 {
1059
- font-size: 24px;
1060
- margin-bottom: 15px;
1061
- }
1062
- .jumbotron p {
1063
- font-size: 18px;
1064
- }
1065
- .promo-block .promo-block-inner {
1066
- padding: 30px 15px;
1067
- }
1068
- .promo-block .content-holder-inner {
1069
- padding: 0;
1070
- }
1071
- .promo-block .promo-title {
1072
- margin-bottom: 30px;
1073
- }
1074
- }
1075
- /* Small devices (tablets, 768px and up) */
1076
- /* Medium devices (desktops, 992px and up) */
1077
- /* Large devices (large desktops, 1200px and up) */
1078
- /* ======= Landing Page ======= */
1079
- .landing-page .header {
1080
- background: #494d55;
1081
- color: rgba(255, 255, 255, 0.85);
1082
- padding: 60px 0;
1083
- }
1084
- .landing-page .header a {
1085
- color: #fff;
1086
- }
1087
- .landing-page .branding {
1088
- text-transform: uppercase;
1089
- margin-bottom: 20px;
1090
- }
1091
- .landing-page .branding .logo {
1092
- font-size: 38px;
1093
- margin-top: 0;
1094
- margin-bottom: 0;
1095
- }
1096
- .landing-page .branding .text-bold {
1097
- font-weight: 800;
1098
- color: #fff;
1099
- }
1100
- .landing-page .branding .icon {
1101
- font-size: 32px;
1102
- color: #40babd;
1103
- }
1104
- .landing-page .tagline {
1105
- font-weight: 600;
1106
- font-size: 20px;
1107
- }
1108
- .landing-page .tagline p {
1109
- margin-bottom: 5px;
1110
- }
1111
- .landing-page .tagline .text-highlight {
1112
- color: #266f71;
1113
- }
1114
- .landing-page .fa-heart {
1115
- color: #EA5395;
1116
- }
1117
- .landing-page .cta-container {
1118
- margin-top: 30px;
1119
- }
1120
- .landing-page .social-container {
1121
- margin-top: 30px;
1122
- }
1123
- .landing-page .social-container .twitter-tweet {
1124
- display: inline-block;
1125
- margin-right: 5px;
1126
- position: relative;
1127
- top: 5px;
1128
- }
1129
- .landing-page .social-container .fab-like {
1130
- display: inline-block;
1131
- }
1132
- .cards-section {
1133
- padding: 60px 0;
1134
- background: #f9f9fb;
1135
- }
1136
- .cards-section .title {
1137
- margin-top: 0;
1138
- margin-bottom: 15px;
1139
- font-size: 24px;
1140
- font-weight: 600;
1141
- }
1142
- .cards-section .intro {
1143
- margin: 0 auto;
1144
- max-width: 800px;
1145
- margin-bottom: 60px;
1146
- color: #616670;
1147
- }
1148
- .cards-section .cards-wrapper {
1149
- max-width: 860px;
1150
- margin-left: auto;
1151
- margin-right: auto;
1152
- }
1153
- .cards-section .item {
1154
- margin-bottom: 30px;
1155
- }
1156
- .cards-section .item .icon-holder {
1157
- margin-bottom: 15px;
1158
- }
1159
- .cards-section .item .icon {
1160
- font-size: 36px;
1161
- }
1162
- .cards-section .item .title {
1163
- font-size: 16px;
1164
- font-weight: 600;
1165
- }
1166
- .cards-section .item .intro {
1167
- margin-bottom: 15px;
1168
- }
1169
- .cards-section .item-inner {
1170
- padding: 45px 30px;
1171
- background: #fff;
1172
- position: relative;
1173
- border: 1px solid #f0f0f0;
1174
- -webkit-border-radius: 4px;
1175
- -moz-border-radius: 4px;
1176
- -ms-border-radius: 4px;
1177
- -o-border-radius: 4px;
1178
- border-radius: 4px;
1179
- -moz-background-clip: padding;
1180
- -webkit-background-clip: padding-box;
1181
- background-clip: padding-box;
1182
- }
1183
- .cards-section .item-inner .link {
1184
- position: absolute;
1185
- width: 100%;
1186
- height: 100%;
1187
- top: 0;
1188
- left: 0;
1189
- z-index: 1;
1190
- background-image: url("../images/empty.gif");
1191
- /* for IE8 */
1192
- }
1193
- .cards-section .item-inner:hover {
1194
- background: #f5f5f5;
1195
- }
1196
- .cards-section .item-primary .item-inner {
1197
- border-top: 3px solid #40babd;
1198
- }
1199
- .cards-section .item-primary .item-inner:hover .title {
1200
- color: #2d8284;
1201
- }
1202
- .cards-section .item-primary .icon {
1203
- color: #40babd;
1204
- }
1205
- .cards-section .item-green .item-inner {
1206
- border-top: 3px solid #75c181;
1207
- }
1208
- .cards-section .item-green .item-inner:hover .title {
1209
- color: #48a156;
1210
- }
1211
- .cards-section .item-green .icon {
1212
- color: #75c181;
1213
- }
1214
- .cards-section .item-blue .item-inner {
1215
- border-top: 3px solid #58bbee;
1216
- }
1217
- .cards-section .item-blue .item-inner:hover .title {
1218
- color: #179de2;
1219
- }
1220
- .cards-section .item-blue .icon {
1221
- color: #58bbee;
1222
- }
1223
- .cards-section .item-orange .item-inner {
1224
- border-top: 3px solid #F88C30;
1225
- }
1226
- .cards-section .item-orange .item-inner:hover .title {
1227
- color: #d46607;
1228
- }
1229
- .cards-section .item-orange .icon {
1230
- color: #F88C30;
1231
- }
1232
- .cards-section .item-red .item-inner {
1233
- border-top: 3px solid #f77b6b;
1234
- }
1235
- .cards-section .item-red .item-inner:hover .title {
1236
- color: #f33a22;
1237
- }
1238
- .cards-section .item-red .icon {
1239
- color: #f77b6b;
1240
- }
1241
- .cards-section .item-pink .item-inner {
1242
- border-top: 3px solid #EA5395;
1243
- }
1244
- .cards-section .item-pink .item-inner:hover .title {
1245
- color: #d61a6c;
1246
- }
1247
- .cards-section .item-pink .icon {
1248
- color: #EA5395;
1249
- }
1250
- .cards-section .item-purple .item-inner {
1251
- border-top: 3px solid #8A40A7;
1252
- }
1253
- .cards-section .item-purple .item-inner:hover .title {
1254
- color: #5c2b70;
1255
- }
1256
- .cards-section .item-purple .icon {
1257
- color: #8A40A7;
1258
- }
1259
- /* Extra small devices (phones, less than 768px) */
1260
- @media (max-width: 767px) {
1261
- .cards-section .item-inner {
1262
- padding: 30px 15px;
1263
- }
1264
- }
1265
- /* Small devices (tablets, 768px and up) */
1266
- /* Medium devices (desktops, 992px and up) */
1267
- /* Large devices (large desktops, 1200px and up) */
1
+ /*
2
+ * Template Name: PrettyDocs - Bootstrap 4 Template for documentations
3
+ * Version: 2.0
4
+ * Author: Xiaoying Riley
5
+ * Copyright: 3rd Wave Media
6
+ * Twitter: @3rdwave_themes
7
+ * License: Creative Commons Attribution 3.0 License
8
+ * Website: http://themes.3rdwavemedia.com/
9
+ */
10
+ /* ======= Base ======= */
11
+ body {
12
+ font-family: 'Open Sans', arial, sans-serif;
13
+ color: #494d55;
14
+ font-size: 14px;
15
+ -webkit-font-smoothing: antialiased;
16
+ -moz-osx-font-smoothing: grayscale;
17
+ }
18
+
19
+ html, body {
20
+ height: 100%;
21
+ }
22
+
23
+ .page-wrapper {
24
+ min-height: 100%;
25
+ /* equal to footer height */
26
+ margin-bottom: -50px;
27
+ }
28
+
29
+ .page-wrapper:after {
30
+ content: "";
31
+ display: block;
32
+ height: 50px;
33
+ }
34
+
35
+ .footer {
36
+ height: 50px;
37
+ }
38
+
39
+ p {
40
+ line-height: 1.5;
41
+ }
42
+
43
+ a {
44
+ color: #3aa7aa;
45
+ -webkit-transition: all 0.4s ease-in-out;
46
+ -moz-transition: all 0.4s ease-in-out;
47
+ -ms-transition: all 0.4s ease-in-out;
48
+ -o-transition: all 0.4s ease-in-out;
49
+ }
50
+
51
+ a:hover {
52
+ text-decoration: underline;
53
+ color: #339597;
54
+ }
55
+
56
+ a:focus {
57
+ text-decoration: none;
58
+ }
59
+
60
+ code {
61
+ background: #222;
62
+ color: #fff;
63
+ font-size: 14px;
64
+ font-weight: bold;
65
+ font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
66
+ padding: 2px 8px;
67
+ padding-top: 4px;
68
+ display: inline-block;
69
+ }
70
+
71
+ .btn, a.btn {
72
+ -webkit-transition: all 0.4s ease-in-out;
73
+ -moz-transition: all 0.4s ease-in-out;
74
+ -ms-transition: all 0.4s ease-in-out;
75
+ -o-transition: all 0.4s ease-in-out;
76
+ font-weight: 600;
77
+ font-size: 14px;
78
+ line-height: 1.5;
79
+ }
80
+
81
+ .btn .svg-inline--fa, a.btn .svg-inline--fa {
82
+ margin-right: 5px;
83
+ position: relative;
84
+ top: -1px;
85
+ }
86
+
87
+ .btn-primary, a.btn-primary {
88
+ background: #40babd;
89
+ border: 1px solid #40babd;
90
+ color: #fff !important;
91
+ }
92
+
93
+ .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .btn-primary.hover, a.btn-primary:hover, a.btn-primary:focus, a.btn-primary:active, a.btn-primary.active, a.btn-primary.hover {
94
+ background: #3aa7aa;
95
+ color: #fff !important;
96
+ border: 1px solid #3aa7aa;
97
+ }
98
+
99
+ .btn-green, a.btn-green {
100
+ background: #75c181;
101
+ border: 1px solid #75c181;
102
+ color: #fff !important;
103
+ }
104
+
105
+ .btn-green:hover, .btn-green:focus, .btn-green:active, .btn-green.active, .btn-green.hover, a.btn-green:hover, a.btn-green:focus, a.btn-green:active, a.btn-green.active, a.btn-green.hover {
106
+ background: #63b971;
107
+ color: #fff !important;
108
+ border: 1px solid #63b971;
109
+ }
110
+
111
+ .body-green .btn-green, .body-green a.btn-green {
112
+ color: #fff !important;
113
+ }
114
+
115
+ .body-green .btn-green:hover, .body-green .btn-green:focus, .body-green .btn-green:active, .body-green .btn-green.active, .body-green .btn-green.hover, .body-green a.btn-green:hover, .body-green a.btn-green:focus, .body-green a.btn-green:active, .body-green a.btn-green.active, .body-green a.btn-green.hover {
116
+ color: #fff !important;
117
+ }
118
+
119
+ .btn-blue, a.btn-blue {
120
+ background: #58bbee;
121
+ border: 1px solid #58bbee;
122
+ color: #fff !important;
123
+ }
124
+
125
+ .btn-blue:hover, .btn-blue:focus, .btn-blue:active, .btn-blue.active, .btn-blue.hover, a.btn-blue:hover, a.btn-blue:focus, a.btn-blue:active, a.btn-blue.active, a.btn-blue.hover {
126
+ background: #41b2ec;
127
+ color: #fff !important;
128
+ border: 1px solid #41b2ec;
129
+ }
130
+
131
+ .btn-orange, a.btn-orange {
132
+ background: #F88C30;
133
+ border: 1px solid #F88C30;
134
+ color: #fff !important;
135
+ }
136
+
137
+ .btn-orange:hover, .btn-orange:focus, .btn-orange:active, .btn-orange.active, .btn-orange.hover, a.btn-orange:hover, a.btn-orange:focus, a.btn-orange:active, a.btn-orange.active, a.btn-orange.hover {
138
+ background: #f77e17;
139
+ color: #fff !important;
140
+ border: 1px solid #f77e17;
141
+ }
142
+
143
+ .btn-red, a.btn-red {
144
+ background: #f77b6b;
145
+ border: 1px solid #f77b6b;
146
+ color: #fff !important;
147
+ }
148
+
149
+ .btn-red:hover, .btn-red:focus, .btn-red:active, .btn-red.active, .btn-red.hover, a.btn-red:hover, a.btn-red:focus, a.btn-red:active, a.btn-red.active, a.btn-red.hover {
150
+ background: #f66553;
151
+ color: #fff !important;
152
+ border: 1px solid #f66553;
153
+ }
154
+
155
+ .btn-pink, a.btn-pink {
156
+ background: #EA5395;
157
+ border: 1px solid #EA5395;
158
+ color: #fff !important;
159
+ }
160
+
161
+ .btn-pink:hover, .btn-pink:focus, .btn-pink:active, .btn-pink.active, .btn-pink.hover, a.btn-pink:hover, a.btn-pink:focus, a.btn-pink:active, a.btn-pink.active, a.btn-pink.hover {
162
+ background: #e73c87;
163
+ color: #fff !important;
164
+ border: 1px solid #e73c87;
165
+ }
166
+
167
+ .btn-purple, a.btn-purple {
168
+ background: #8A40A7;
169
+ border: 1px solid #8A40A7;
170
+ color: #fff !important;
171
+ }
172
+
173
+ .btn-purple:hover, .btn-purple:focus, .btn-purple:active, .btn-purple.active, .btn-purple.hover, a.btn-purple:hover, a.btn-purple:focus, a.btn-purple:active, a.btn-purple.active, a.btn-purple.hover {
174
+ background: #7b3995;
175
+ color: #fff !important;
176
+ border: 1px solid #7b3995;
177
+ }
178
+
179
+ .btn-cta {
180
+ padding: 7px 15px;
181
+ }
182
+
183
+ .form-control {
184
+ -webkit-box-shadow: none;
185
+ -moz-box-shadow: none;
186
+ box-shadow: none;
187
+ height: 40px;
188
+ border-color: #f0f0f0;
189
+ }
190
+
191
+ .form-control::-webkit-input-placeholder {
192
+ /* WebKit browsers */
193
+ color: #afb3bb;
194
+ }
195
+
196
+ .form-control:-moz-placeholder {
197
+ /* Mozilla Firefox 4 to 18 */
198
+ color: #afb3bb;
199
+ }
200
+
201
+ .form-control::-moz-placeholder {
202
+ /* Mozilla Firefox 19+ */
203
+ color: #afb3bb;
204
+ }
205
+
206
+ .form-control:-ms-input-placeholder {
207
+ /* Internet Explorer 10+ */
208
+ color: #afb3bb;
209
+ }
210
+
211
+ .form-control:focus {
212
+ border-color: #e3e3e3;
213
+ -webkit-box-shadow: none;
214
+ -moz-box-shadow: none;
215
+ box-shadow: none;
216
+ }
217
+
218
+ input[type="text"],
219
+ input[type="email"],
220
+ input[type="password"],
221
+ input[type="submit"],
222
+ input[type="button"],
223
+ textarea,
224
+ select {
225
+ appearance: none;
226
+ /* for mobile safari */
227
+ -webkit-appearance: none;
228
+ }
229
+
230
+ /* ====== Header ====== */
231
+ .header {
232
+ background: #494d55;
233
+ color: rgba(255, 255, 255, 0.85);
234
+ border-top: 5px solid #40babd;
235
+ padding: 30px 0;
236
+ }
237
+
238
+ .header a {
239
+ color: #fff;
240
+ }
241
+
242
+ .branding {
243
+ text-transform: uppercase;
244
+ margin-bottom: 10px;
245
+ }
246
+
247
+ .branding .logo {
248
+ font-size: 28px;
249
+ margin-top: 0;
250
+ margin-bottom: 0;
251
+ }
252
+
253
+ .branding .logo a {
254
+ text-decoration: none;
255
+ }
256
+
257
+ .branding .text-highlight {
258
+ color: #40babd;
259
+ }
260
+
261
+ .body-green .branding .text-highlight {
262
+ color: #75c181;
263
+ }
264
+
265
+ .body-blue .branding .text-highlight {
266
+ color: #58bbee;
267
+ }
268
+
269
+ .body-orange .branding .text-highlight {
270
+ color: #F88C30;
271
+ }
272
+
273
+ .body-red .branding .text-highlight {
274
+ color: #f77b6b;
275
+ }
276
+
277
+ .body-pink .branding .text-highlight {
278
+ color: #EA5395;
279
+ }
280
+
281
+ .body-purple .branding .text-highlight {
282
+ color: #8A40A7;
283
+ }
284
+
285
+ .branding .text-bold {
286
+ font-weight: 800;
287
+ color: #fff;
288
+ }
289
+
290
+ .branding .icon {
291
+ font-size: 24px;
292
+ color: #40babd;
293
+ }
294
+
295
+ .body-green .branding .icon {
296
+ color: #75c181;
297
+ }
298
+
299
+ .body-blue .branding .icon {
300
+ color: #58bbee;
301
+ }
302
+
303
+ .body-orange .branding .icon {
304
+ color: #F88C30;
305
+ }
306
+
307
+ .body-red .branding .icon {
308
+ color: #f77b6b;
309
+ }
310
+
311
+ .body-pink .branding .icon {
312
+ color: #EA5395;
313
+ }
314
+
315
+ .body-purple .branding .icon {
316
+ color: #8A40A7;
317
+ }
318
+
319
+ .breadcrumb {
320
+ background: none;
321
+ margin-bottom: 0;
322
+ padding: 0;
323
+ }
324
+
325
+ .breadcrumb li {
326
+ color: rgba(255, 255, 255, 0.5);
327
+ }
328
+
329
+ .breadcrumb li.active {
330
+ color: rgba(255, 255, 255, 0.5);
331
+ }
332
+
333
+ .breadcrumb li a {
334
+ color: rgba(255, 255, 255, 0.5);
335
+ }
336
+
337
+ .breadcrumb li a:hover {
338
+ color: #fff;
339
+ }
340
+
341
+ .breadcrumb > li + li:before {
342
+ color: rgba(0, 0, 0, 0.4);
343
+ }
344
+
345
+ /* ====== Footer ====== */
346
+ .footer {
347
+ background: #26282c;
348
+ color: rgba(255, 255, 255, 0.6);
349
+ padding: 15px 0;
350
+ }
351
+
352
+ .footer a {
353
+ color: #40babd;
354
+ }
355
+
356
+ .footer .fa-heart {
357
+ color: #EA5395;
358
+ }
359
+
360
+ /* ======= Doc Styling ======= */
361
+ .doc-wrapper {
362
+ padding: 45px 0;
363
+ background: #f9f9fb;
364
+ }
365
+
366
+ .doc-body {
367
+ position: relative;
368
+ }
369
+
370
+ .doc-header {
371
+ margin-bottom: 30px;
372
+ }
373
+
374
+ .doc-header .doc-title {
375
+ color: #40babd;
376
+ margin-top: 0;
377
+ font-size: 36px;
378
+ }
379
+
380
+ .body-green .doc-header .doc-title {
381
+ color: #75c181;
382
+ }
383
+
384
+ .body-blue .doc-header .doc-title {
385
+ color: #58bbee;
386
+ }
387
+
388
+ .body-orange .doc-header .doc-title {
389
+ color: #F88C30;
390
+ }
391
+
392
+ .body-red .doc-header .doc-title {
393
+ color: #f77b6b;
394
+ }
395
+
396
+ .body-pink .doc-header .doc-title {
397
+ color: #EA5395;
398
+ }
399
+
400
+ .body-purple .doc-header .doc-title {
401
+ color: #8A40A7;
402
+ }
403
+
404
+ .doc-header .icon {
405
+ font-size: 30px;
406
+ }
407
+
408
+ .doc-header .meta {
409
+ color: #a2a6af;
410
+ }
411
+
412
+ .doc-section {
413
+ padding-top: 15px;
414
+ padding-bottom: 15px;
415
+ }
416
+
417
+ .doc-section .section-title {
418
+ font-size: 26px;
419
+ margin-top: 0;
420
+ margin-bottom: 0;
421
+ font-weight: bold;
422
+ padding-bottom: 10px;
423
+ border-bottom: 1px solid #d7d6d6;
424
+ }
425
+
426
+ .doc-section h1 {
427
+ font-size: 24px;
428
+ font-weight: bold;
429
+ }
430
+
431
+ .doc-section h2 {
432
+ font-size: 22px;
433
+ font-weight: bold;
434
+ }
435
+
436
+ .doc-section h3 {
437
+ font-size: 20px;
438
+ font-weight: bold;
439
+ }
440
+
441
+ .doc-section h4 {
442
+ font-size: 18px;
443
+ font-weight: bold;
444
+ }
445
+
446
+ .doc-section h5 {
447
+ font-size: 16px;
448
+ font-weight: bold;
449
+ }
450
+
451
+ .doc-section h6 {
452
+ font-size: 14px;
453
+ font-weight: bold;
454
+ }
455
+
456
+ .section-block {
457
+ padding-top: 15px;
458
+ padding-bottom: 15px;
459
+ }
460
+
461
+ .section-block .block-title {
462
+ margin-top: 0;
463
+ }
464
+
465
+ .section-block .list > li {
466
+ margin-bottom: 10px;
467
+ }
468
+
469
+ .section-block .list ul > li {
470
+ margin-top: 5px;
471
+ }
472
+
473
+ .question {
474
+ font-weight: 400 !important;
475
+ color: #3aa7aa;
476
+ }
477
+
478
+ .question .body-green {
479
+ color: #63b971;
480
+ }
481
+
482
+ .body-blue .question {
483
+ color: #41b2ec;
484
+ }
485
+
486
+ .body-orange .question {
487
+ color: #f77e17;
488
+ }
489
+
490
+ .body-pink .question {
491
+ color: #e73c87;
492
+ }
493
+
494
+ .body-purple .question {
495
+ color: #7b3995;
496
+ }
497
+
498
+ .question .svg-inline--fa {
499
+ -webkit-opacity: 0.6;
500
+ -moz-opacity: 0.6;
501
+ opacity: 0.6;
502
+ position: relative;
503
+ top: -2px;
504
+ }
505
+
506
+ .question .badge {
507
+ font-size: 11px;
508
+ vertical-align: middle;
509
+ }
510
+
511
+ .answer {
512
+ color: #616670;
513
+ }
514
+
515
+ .code-block {
516
+ margin-top: 30px;
517
+ margin-bottom: 30px;
518
+ }
519
+
520
+ .callout-block {
521
+ padding: 30px;
522
+ -webkit-border-radius: 4px;
523
+ -moz-border-radius: 4px;
524
+ -ms-border-radius: 4px;
525
+ -o-border-radius: 4px;
526
+ border-radius: 4px;
527
+ -moz-background-clip: padding;
528
+ -webkit-background-clip: padding-box;
529
+ background-clip: padding-box;
530
+ position: relative;
531
+ margin-bottom: 30px;
532
+ }
533
+
534
+ .callout-block a {
535
+ color: rgba(0, 0, 0, 0.55) !important;
536
+ }
537
+
538
+ .callout-block a:hover {
539
+ color: rgba(0, 0, 0, 0.65) !important;
540
+ }
541
+
542
+ .callout-block .icon-holder {
543
+ font-size: 30px;
544
+ position: absolute;
545
+ left: 30px;
546
+ top: 30px;
547
+ color: rgba(0, 0, 0, 0.25);
548
+ }
549
+
550
+ .callout-block .content {
551
+ margin-left: 60px;
552
+ }
553
+
554
+ .callout-block .content p:last-child {
555
+ margin-bottom: 0;
556
+ }
557
+
558
+ .callout-block .callout-title {
559
+ margin-top: 0;
560
+ margin-bottom: 5px;
561
+ color: rgba(0, 0, 0, 0.65);
562
+ }
563
+
564
+ .callout-info {
565
+ background: #58bbee;
566
+ color: #fff;
567
+ }
568
+
569
+ .callout-success {
570
+ background: #75c181;
571
+ color: #fff;
572
+ }
573
+
574
+ .callout-warning {
575
+ background: #F88C30;
576
+ color: #fff;
577
+ }
578
+
579
+ .callout-danger {
580
+ background: #f77b6b;
581
+ color: #fff;
582
+ }
583
+
584
+ .table > thead > tr > th {
585
+ border-bottom-color: #8bd6d8;
586
+ }
587
+
588
+ .body-green .table > thead > tr > th {
589
+ border-bottom-color: #bbe1c1;
590
+ }
591
+
592
+ .body-blue .table > thead > tr > th {
593
+ border-bottom-color: #b5e1f7;
594
+ }
595
+
596
+ .body-orange .table > thead > tr > th {
597
+ border-bottom-color: #fbc393;
598
+ }
599
+
600
+ .body-pink .table > thead > tr > th {
601
+ border-bottom-color: #f5aecd;
602
+ }
603
+
604
+ .body-purple .table > thead > tr > th {
605
+ border-bottom-color: #b87fce;
606
+ }
607
+
608
+ .table-bordered > thead > tr > th {
609
+ border-bottom-color: inherit;
610
+ }
611
+
612
+ .table-striped > tbody > tr:nth-of-type(odd) {
613
+ background-color: #f5f5f5;
614
+ }
615
+
616
+ .screenshot-holder {
617
+ margin-top: 15px;
618
+ margin-bottom: 15px;
619
+ position: relative;
620
+ text-align: center;
621
+ }
622
+
623
+ .screenshot-holder img {
624
+ border: 1px solid #f0f0f0;
625
+ }
626
+
627
+ .screenshot-holder .mask {
628
+ display: block;
629
+ visibility: hidden;
630
+ position: absolute;
631
+ width: 100%;
632
+ height: 100%;
633
+ left: 0;
634
+ top: 0;
635
+ background: rgba(0, 0, 0, 0.25);
636
+ cursor: pointer;
637
+ text-decoration: none;
638
+ }
639
+
640
+ .screenshot-holder .mask .svg-inline--fa {
641
+ color: #fff;
642
+ font-size: 42px;
643
+ display: block;
644
+ position: absolute;
645
+ left: 50%;
646
+ top: 50%;
647
+ margin-left: -21px;
648
+ margin-top: -21px;
649
+ }
650
+
651
+ .screenshot-holder:hover .mask {
652
+ visibility: visible;
653
+ }
654
+
655
+ .jumbotron h1 {
656
+ font-size: 28px;
657
+ margin-top: 0;
658
+ margin-bottom: 30px;
659
+ }
660
+
661
+ .author-profile {
662
+ margin-top: 30px;
663
+ }
664
+
665
+ .author-profile img {
666
+ width: 100px;
667
+ height: 100px;
668
+ }
669
+
670
+ .speech-bubble {
671
+ background: #fff;
672
+ -webkit-border-radius: 4px;
673
+ -moz-border-radius: 4px;
674
+ -ms-border-radius: 4px;
675
+ -o-border-radius: 4px;
676
+ border-radius: 4px;
677
+ -moz-background-clip: padding;
678
+ -webkit-background-clip: padding-box;
679
+ background-clip: padding-box;
680
+ padding: 30px;
681
+ margin-top: 20px;
682
+ margin-bottom: 30px;
683
+ position: relative;
684
+ }
685
+
686
+ .speech-bubble .speech-title {
687
+ font-size: 16px;
688
+ }
689
+
690
+ .jumbotron .speech-bubble p {
691
+ font-size: 14px;
692
+ font-weight: normal;
693
+ color: #616670;
694
+ }
695
+
696
+ .speech-bubble:before {
697
+ content: "";
698
+ display: inline-block;
699
+ position: absolute;
700
+ left: 50%;
701
+ top: -10px;
702
+ margin-left: -10px;
703
+ width: 0;
704
+ height: 0;
705
+ border-left: 10px solid transparent;
706
+ border-right: 10px solid transparent;
707
+ border-bottom: 10px solid #fff;
708
+ }
709
+
710
+ .theme-card {
711
+ text-align: center;
712
+ border: 1px solid #e3e3e3;
713
+ -webkit-border-radius: 4px;
714
+ -moz-border-radius: 4px;
715
+ -ms-border-radius: 4px;
716
+ -o-border-radius: 4px;
717
+ border-radius: 4px;
718
+ -moz-background-clip: padding;
719
+ -webkit-background-clip: padding-box;
720
+ background-clip: padding-box;
721
+ position: relative;
722
+ height: 100%;
723
+ }
724
+
725
+ .theme-card .card-block {
726
+ padding: 15px;
727
+ }
728
+
729
+ .theme-card .mask {
730
+ display: block;
731
+ visibility: hidden;
732
+ position: absolute;
733
+ width: 100%;
734
+ height: 100%;
735
+ left: 0;
736
+ top: 0;
737
+ background: rgba(0, 0, 0, 0.25);
738
+ cursor: pointer;
739
+ text-decoration: none;
740
+ }
741
+
742
+ .theme-card .mask .icon {
743
+ color: #fff;
744
+ font-size: 42px;
745
+ margin-top: 25%;
746
+ }
747
+
748
+ .theme-card:hover .mask {
749
+ visibility: visible;
750
+ }
751
+
752
+ /* Color Schemes */
753
+ .body-green .header {
754
+ border-color: #75c181;
755
+ }
756
+
757
+ .body-green a {
758
+ color: #75c181;
759
+ }
760
+
761
+ .body-green a:hover {
762
+ color: #52b161;
763
+ }
764
+
765
+ .body-blue .header {
766
+ border-color: #58bbee;
767
+ }
768
+
769
+ .body-blue a {
770
+ color: #58bbee;
771
+ }
772
+
773
+ .body-blue a:hover {
774
+ color: #2aa8e9;
775
+ }
776
+
777
+ .body-orange .header {
778
+ border-color: #F88C30;
779
+ }
780
+
781
+ .body-orange a {
782
+ color: #F88C30;
783
+ }
784
+
785
+ .body-orange a:hover {
786
+ color: #ed7108;
787
+ }
788
+
789
+ .body-pink .header {
790
+ border-color: #EA5395;
791
+ }
792
+
793
+ .body-pink a {
794
+ color: #EA5395;
795
+ }
796
+
797
+ .body-pink a:hover {
798
+ color: #e42679;
799
+ }
800
+
801
+ .body-purple .header {
802
+ border-color: #8A40A7;
803
+ }
804
+
805
+ .body-purple a {
806
+ color: #8A40A7;
807
+ }
808
+
809
+ .body-purple a:hover {
810
+ color: #6c3282;
811
+ }
812
+
813
+ .body-red .header {
814
+ border-color: #f77b6b;
815
+ }
816
+
817
+ .body-red a {
818
+ color: #f77b6b;
819
+ }
820
+
821
+ .body-red a:hover {
822
+ color: #f4503b;
823
+ }
824
+
825
+ /* Sidebar */
826
+ .doc-nav {
827
+ position: absolute;
828
+ top: 0;
829
+ left: 0;
830
+ width: 100%;
831
+ height: 100%;
832
+ }
833
+
834
+ .sticky {
835
+ position: -webkit-sticky;
836
+ position: -moz-sticky;
837
+ position: -ms-sticky;
838
+ position: -o-sticky;
839
+ position: sticky;
840
+ top: 0;
841
+ }
842
+
843
+ .doc-menu {
844
+ list-style: none;
845
+ }
846
+
847
+ .doc-menu .nav-link {
848
+ margin-bottom: 5px;
849
+ display: block;
850
+ padding: 5px 15px;
851
+ color: #616670;
852
+ }
853
+
854
+ .doc-menu .nav-link:hover, .doc-menu .nav-link:focus {
855
+ color: #494d55;
856
+ text-decoration: none;
857
+ background: none;
858
+ }
859
+
860
+ .doc-menu .nav-link.active {
861
+ background: none;
862
+ color: #40babd;
863
+ font-weight: 600;
864
+ }
865
+
866
+ .body-green .doc-menu .nav-link.active {
867
+ color: #75c181;
868
+ border-color: #75c181;
869
+ }
870
+
871
+ .body-blue .doc-menu .nav-link.active {
872
+ color: #58bbee;
873
+ border-color: #58bbee;
874
+ }
875
+
876
+ .body-orange .doc-menu .nav-link.active {
877
+ color: #F88C30;
878
+ border-color: #F88C30;
879
+ }
880
+
881
+ .body-red .doc-menu .nav-link.active {
882
+ color: #f77b6b;
883
+ border-color: #f77b6b;
884
+ }
885
+
886
+ .body-pink .doc-menu .nav-link.active {
887
+ color: #EA5395;
888
+ border-color: #EA5395;
889
+ }
890
+
891
+ .body-purple .doc-menu .nav-link.active {
892
+ color: #8A40A7;
893
+ border-color: #8A40A7;
894
+ }
895
+
896
+ .doc-sub-menu {
897
+ list-style: none;
898
+ padding-left: 0;
899
+ }
900
+
901
+ .doc-sub-menu .nav-link {
902
+ margin-bottom: 10px;
903
+ font-size: 12px;
904
+ display: block;
905
+ color: #616670;
906
+ padding: 0;
907
+ padding-left: 34px;
908
+ background: none;
909
+ }
910
+
911
+ .doc-sub-menu .nav-link:first-child {
912
+ padding-top: 5px;
913
+ }
914
+
915
+ .doc-sub-menu .nav-link:hover {
916
+ color: #494d55;
917
+ text-decoration: none;
918
+ background: none;
919
+ }
920
+
921
+ .doc-sub-menu .nav-link:focus {
922
+ background: none;
923
+ }
924
+
925
+ .doc-sub-menu .nav-link.active {
926
+ background: none;
927
+ color: #40babd;
928
+ }
929
+
930
+ .body-green .doc-sub-menu .nav-link.active {
931
+ color: #75c181;
932
+ }
933
+
934
+ .body-blue .doc-sub-menu .nav-link.active {
935
+ color: #58bbee;
936
+ }
937
+
938
+ .body-orange .doc-sub-menu .nav-link.active {
939
+ color: #F88C30;
940
+ }
941
+
942
+ .body-red .doc-sub-menu .nav-link.active {
943
+ color: #f77b6b;
944
+ }
945
+
946
+ .body-pink .doc-sub-menu .nav-link.active {
947
+ color: #EA5395;
948
+ }
949
+
950
+ .body-purple .doc-sub-menu .nav-link.active {
951
+ color: #8A40A7;
952
+ }
953
+
954
+ /*
955
+ .affix-top {
956
+ position: absolute;
957
+ top: 15px;
958
+ }
959
+
960
+ .affix {
961
+ top: 15px;
962
+ }
963
+
964
+ .affix,
965
+ .affix-bottom {
966
+ width: 230px;
967
+ }
968
+
969
+ .affix-bottom {
970
+ position: absolute;
971
+ }
972
+ */
973
+ /* ===== Promo block ===== */
974
+ .promo-block {
975
+ background: #3aa7aa;
976
+ }
977
+
978
+ .body-green .promo-block {
979
+ background: #63b971;
980
+ }
981
+
982
+ .body-blue .promo-block {
983
+ background: #41b2ec;
984
+ }
985
+
986
+ .body-orange .promo-block {
987
+ background: #f77e17;
988
+ }
989
+
990
+ .body-pink .promo-block {
991
+ background: #e73c87;
992
+ }
993
+
994
+ .body-purple .promo-block {
995
+ background: #7b3995;
996
+ }
997
+
998
+ .promo-block a {
999
+ color: rgba(0, 0, 0, 0.6);
1000
+ font-weight: bold;
1001
+ }
1002
+
1003
+ .promo-block a:hover {
1004
+ color: rgba(0, 0, 0, 0.7);
1005
+ }
1006
+
1007
+ .promo-block .promo-block-inner {
1008
+ padding: 45px;
1009
+ color: #fff;
1010
+ -webkit-border-radius: 4px;
1011
+ -moz-border-radius: 4px;
1012
+ -ms-border-radius: 4px;
1013
+ -o-border-radius: 4px;
1014
+ border-radius: 4px;
1015
+ -moz-background-clip: padding;
1016
+ -webkit-background-clip: padding-box;
1017
+ background-clip: padding-box;
1018
+ }
1019
+
1020
+ .promo-block .promo-title {
1021
+ font-size: 20px;
1022
+ font-weight: 800;
1023
+ margin-top: 0;
1024
+ margin-bottom: 45px;
1025
+ }
1026
+
1027
+ .promo-block .promo-title .svg-inline--fa {
1028
+ color: rgba(0, 0, 0, 0.6);
1029
+ }
1030
+
1031
+ .promo-block .figure-holder-inner {
1032
+ background: #fff;
1033
+ margin-bottom: 30px;
1034
+ position: relative;
1035
+ text-align: center;
1036
+ }
1037
+
1038
+ .promo-block .figure-holder-inner img {
1039
+ border: 5px solid #fff;
1040
+ }
1041
+
1042
+ .promo-block .figure-holder-inner .mask {
1043
+ display: block;
1044
+ visibility: hidden;
1045
+ position: absolute;
1046
+ width: 100%;
1047
+ height: 100%;
1048
+ left: 0;
1049
+ top: 0;
1050
+ background: rgba(0, 0, 0, 0.7);
1051
+ cursor: pointer;
1052
+ text-decoration: none;
1053
+ }
1054
+
1055
+ .promo-block .figure-holder-inner .mask .svg-inline--fa {
1056
+ color: #fff;
1057
+ font-size: 36px;
1058
+ display: inline-block;
1059
+ position: absolute;
1060
+ top: 50%;
1061
+ left: 50%;
1062
+ margin-left: -18px;
1063
+ margin-top: -18px;
1064
+ }
1065
+
1066
+ .promo-block .figure-holder-inner .mask .svg-inline--fa.pink {
1067
+ color: #EA5395;
1068
+ }
1069
+
1070
+ .promo-block .figure-holder-inner:hover .mask {
1071
+ visibility: visible;
1072
+ }
1073
+
1074
+ .promo-block .content-holder-inner {
1075
+ padding-left: 15px;
1076
+ padding-right: 15px;
1077
+ }
1078
+
1079
+ .promo-block .content-title {
1080
+ font-size: 16px;
1081
+ font-weight: 600;
1082
+ margin-top: 0;
1083
+ }
1084
+
1085
+ .promo-block .highlight {
1086
+ color: rgba(0, 0, 0, 0.6);
1087
+ }
1088
+
1089
+ .promo-block .btn-cta {
1090
+ background: rgba(0, 0, 0, 0.35);
1091
+ border: none;
1092
+ color: #fff !important;
1093
+ margin-bottom: 15px;
1094
+ }
1095
+
1096
+ .promo-block .btn-cta:hover {
1097
+ background: rgba(0, 0, 0, 0.5);
1098
+ border: none;
1099
+ color: #fff !important;
1100
+ }
1101
+
1102
+ /* Extra small devices (phones, less than 768px) */
1103
+ @media (max-width: 767px) {
1104
+ .jumbotron {
1105
+ padding: 30px 15px;
1106
+ }
1107
+ .jumbotron h1 {
1108
+ font-size: 24px;
1109
+ margin-bottom: 15px;
1110
+ }
1111
+ .jumbotron p {
1112
+ font-size: 18px;
1113
+ }
1114
+ .promo-block .promo-block-inner {
1115
+ padding: 30px 15px;
1116
+ }
1117
+ .promo-block .content-holder-inner {
1118
+ padding: 0;
1119
+ }
1120
+ .promo-block .promo-title {
1121
+ margin-bottom: 30px;
1122
+ }
1123
+ }
1124
+
1125
+ /* Small devices (tablets, 768px and up) */
1126
+ /* Medium devices (desktops, 992px and up) */
1127
+ /* Large devices (large desktops, 1200px and up) */
1128
+ .sticky {
1129
+ position: -webkit-sticky;
1130
+ position: sticky;
1131
+ top: 0;
1132
+ }
1133
+
1134
+ .sticky:before,
1135
+ .sticky:after {
1136
+ content: '';
1137
+ display: table;
1138
+ }
1139
+
1140
+ /* ======= Landing Page ======= */
1141
+ .landing-page .header {
1142
+ background: #494d55;
1143
+ color: rgba(255, 255, 255, 0.85);
1144
+ padding: 60px 0;
1145
+ }
1146
+
1147
+ .landing-page .header a {
1148
+ color: #fff;
1149
+ }
1150
+
1151
+ .landing-page .branding {
1152
+ text-transform: uppercase;
1153
+ margin-bottom: 20px;
1154
+ }
1155
+
1156
+ .landing-page .branding .logo {
1157
+ font-size: 38px;
1158
+ margin-top: 0;
1159
+ margin-bottom: 0;
1160
+ }
1161
+
1162
+ .landing-page .branding .text-bold {
1163
+ font-weight: 800;
1164
+ color: #fff;
1165
+ }
1166
+
1167
+ .landing-page .branding .icon {
1168
+ font-size: 32px;
1169
+ color: #40babd;
1170
+ }
1171
+
1172
+ .landing-page .tagline {
1173
+ font-weight: 600;
1174
+ font-size: 20px;
1175
+ }
1176
+
1177
+ .landing-page .tagline p {
1178
+ margin-bottom: 5px;
1179
+ }
1180
+
1181
+ .landing-page .tagline .text-highlight {
1182
+ color: #266f71;
1183
+ }
1184
+
1185
+ .landing-page .fa-heart {
1186
+ color: #EA5395;
1187
+ }
1188
+
1189
+ .landing-page .cta-container {
1190
+ margin-top: 30px;
1191
+ }
1192
+
1193
+ .landing-page .social-container {
1194
+ margin-top: 30px;
1195
+ }
1196
+
1197
+ .landing-page .social-container .twitter-tweet {
1198
+ display: inline-block;
1199
+ margin-right: 5px;
1200
+ position: relative;
1201
+ top: 5px;
1202
+ }
1203
+
1204
+ .landing-page .social-container .fab-like {
1205
+ display: inline-block;
1206
+ }
1207
+
1208
+ .cards-section {
1209
+ padding: 60px 0;
1210
+ background: #f9f9fb;
1211
+ }
1212
+
1213
+ .cards-section .title {
1214
+ margin-top: 0;
1215
+ margin-bottom: 15px;
1216
+ font-size: 24px;
1217
+ font-weight: 600;
1218
+ }
1219
+
1220
+ .cards-section .intro {
1221
+ margin: 0 auto;
1222
+ max-width: 800px;
1223
+ margin-bottom: 60px;
1224
+ color: #616670;
1225
+ }
1226
+
1227
+ .cards-section .cards-wrapper {
1228
+ max-width: 860px;
1229
+ margin-left: auto;
1230
+ margin-right: auto;
1231
+ }
1232
+
1233
+ .cards-section .item {
1234
+ margin-bottom: 30px;
1235
+ }
1236
+
1237
+ .cards-section .item .icon-holder {
1238
+ margin-bottom: 15px;
1239
+ }
1240
+
1241
+ .cards-section .item .icon {
1242
+ font-size: 36px;
1243
+ }
1244
+
1245
+ .cards-section .item .title {
1246
+ font-size: 16px;
1247
+ font-weight: 600;
1248
+ }
1249
+
1250
+ .cards-section .item .intro {
1251
+ margin-bottom: 15px;
1252
+ }
1253
+
1254
+ .cards-section .item-inner {
1255
+ padding: 45px 30px;
1256
+ background: #fff;
1257
+ position: relative;
1258
+ border: 1px solid #f0f0f0;
1259
+ -webkit-border-radius: 4px;
1260
+ -moz-border-radius: 4px;
1261
+ -ms-border-radius: 4px;
1262
+ -o-border-radius: 4px;
1263
+ border-radius: 4px;
1264
+ -moz-background-clip: padding;
1265
+ -webkit-background-clip: padding-box;
1266
+ background-clip: padding-box;
1267
+ height: 100%;
1268
+ }
1269
+
1270
+ .cards-section .item-inner .link {
1271
+ position: absolute;
1272
+ width: 100%;
1273
+ height: 100%;
1274
+ top: 0;
1275
+ left: 0;
1276
+ z-index: 1;
1277
+ background-image: url("../images/empty.gif");
1278
+ /* for IE8 */
1279
+ }
1280
+
1281
+ .cards-section .item-inner:hover {
1282
+ background: #f5f5f5;
1283
+ }
1284
+
1285
+ .cards-section .item-primary .item-inner {
1286
+ border-top: 3px solid #40babd;
1287
+ }
1288
+
1289
+ .cards-section .item-primary .item-inner:hover .title {
1290
+ color: #2d8284;
1291
+ }
1292
+
1293
+ .cards-section .item-primary .icon {
1294
+ color: #40babd;
1295
+ }
1296
+
1297
+ .cards-section .item-green .item-inner {
1298
+ border-top: 3px solid #75c181;
1299
+ }
1300
+
1301
+ .cards-section .item-green .item-inner:hover .title {
1302
+ color: #48a156;
1303
+ }
1304
+
1305
+ .cards-section .item-green .icon {
1306
+ color: #75c181;
1307
+ }
1308
+
1309
+ .cards-section .item-blue .item-inner {
1310
+ border-top: 3px solid #58bbee;
1311
+ }
1312
+
1313
+ .cards-section .item-blue .item-inner:hover .title {
1314
+ color: #179de2;
1315
+ }
1316
+
1317
+ .cards-section .item-blue .icon {
1318
+ color: #58bbee;
1319
+ }
1320
+
1321
+ .cards-section .item-orange .item-inner {
1322
+ border-top: 3px solid #F88C30;
1323
+ }
1324
+
1325
+ .cards-section .item-orange .item-inner:hover .title {
1326
+ color: #d46607;
1327
+ }
1328
+
1329
+ .cards-section .item-orange .icon {
1330
+ color: #F88C30;
1331
+ }
1332
+
1333
+ .cards-section .item-red .item-inner {
1334
+ border-top: 3px solid #f77b6b;
1335
+ }
1336
+
1337
+ .cards-section .item-red .item-inner:hover .title {
1338
+ color: #f33a22;
1339
+ }
1340
+
1341
+ .cards-section .item-red .icon {
1342
+ color: #f77b6b;
1343
+ }
1344
+
1345
+ .cards-section .item-pink .item-inner {
1346
+ border-top: 3px solid #EA5395;
1347
+ }
1348
+
1349
+ .cards-section .item-pink .item-inner:hover .title {
1350
+ color: #d61a6c;
1351
+ }
1352
+
1353
+ .cards-section .item-pink .icon {
1354
+ color: #EA5395;
1355
+ }
1356
+
1357
+ .cards-section .item-purple .item-inner {
1358
+ border-top: 3px solid #8A40A7;
1359
+ }
1360
+
1361
+ .cards-section .item-purple .item-inner:hover .title {
1362
+ color: #5c2b70;
1363
+ }
1364
+
1365
+ .cards-section .item-purple .icon {
1366
+ color: #8A40A7;
1367
+ }
1368
+
1369
+ @media (max-width: 767.98px) {
1370
+ .cards-section .item-inner {
1371
+ padding: 30px 15px;
1372
+ }
1373
+ }