rtfdoc 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,18 @@
1
+ require 'thor'
2
+ require 'rtfdoc/generators/bootstrap'
3
+
4
+ module RTFDoc
5
+ class CLI < Thor
6
+ def self.exit_on_failure?
7
+ true
8
+ end
9
+
10
+ register(Bootstrap, 'bootstrap', 'bootstrap NAME', "Scaffolds a new project")
11
+
12
+ desc 'convert', 'Convert your markdown content into HTML'
13
+ option 'config', aliases: '-c', type: 'string', required: true
14
+ def convert
15
+ ::RTFDoc::Generator.new(options[:config]).run
16
+ end
17
+ end
18
+ end
@@ -0,0 +1,42 @@
1
+ require 'thor/group'
2
+ require 'fileutils'
3
+
4
+ module RTFDoc
5
+ class Bootstrap < Thor::Group
6
+ include Thor::Actions
7
+
8
+ argument :name, type: :string, desc: 'Name of the directory to bootstrap', required: true
9
+
10
+ source_root(File.expand_path('../templates', __dir__))
11
+
12
+ def create_root_directory
13
+ FileUtils.mkdir_p(name)
14
+ end
15
+
16
+ def create_skeleton
17
+ FileUtils.mkdir_p("#{name}/content")
18
+ FileUtils.mkdir_p("#{name}/dist")
19
+ copy_file('gitignore', "#{name}/.gitignore")
20
+ end
21
+
22
+ def create_gemfile
23
+ template('Gemfile.erb', "#{name}/Gemfile")
24
+ end
25
+
26
+ def create_webpack_config
27
+ template('package.json.erb', "#{name}/package.json")
28
+ template('webpack.config.js.erb', "#{name}/webpack.config.js")
29
+ end
30
+
31
+ def create_config
32
+ template('config.yml.erb', "#{name}/config.yml")
33
+ end
34
+
35
+ private
36
+
37
+ def gem_dir
38
+ File.expand_path('../../../', __dir__)
39
+ end
40
+
41
+ end
42
+ end
@@ -0,0 +1,5 @@
1
+ # frozen_string_literal: true
2
+
3
+ source "https://rubygems.org"
4
+
5
+ gem 'rtfdoc', '~> <%= RTFDoc::VERSION %>'
@@ -0,0 +1,3 @@
1
+ app_name: <%= name.downcase %>
2
+ title: RTFDoc - <%= name.upcase %> API
3
+ content_dir: ./content
@@ -0,0 +1,3 @@
1
+ dist/
2
+ bin/
3
+ node_modules/
@@ -0,0 +1,20 @@
1
+ {
2
+ "name": "<%= name %>",
3
+ "private": true,
4
+ "devDependencies": {
5
+ "clean-webpack-plugin": "^3.0.0",
6
+ "css-loader": "^4.0.0",
7
+ "html-webpack-plugin": "^4.3.0",
8
+ "mini-css-extract-plugin": "^0.9.0",
9
+ "sass": "^1.26.10",
10
+ "sass-loader": "^9.0.2",
11
+ "webpack": "^4.44.0",
12
+ "webpack-cli": "^3.3.12"
13
+ },
14
+ "dependencies": {
15
+ "lodash.throttle": "^4.1.1"
16
+ },
17
+ "scripts": {
18
+ "build": "./bin/rtfdoc convert -c config.yml && npx webpack"
19
+ }
20
+ }
@@ -0,0 +1,40 @@
1
+ const path = require('path');
2
+ const os = require('os');
3
+ const { CleanWebpackPlugin } = require('clean-webpack-plugin');
4
+ const HtmlWebpackPlugin = require('html-webpack-plugin');
5
+ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
6
+
7
+ const devMode = process.env.NODE_ENV != 'production'
8
+
9
+ module.exports = {
10
+ mode: devMode ? "development" : "production",
11
+ entry: "<%= gem_dir %>/src/js/index.js",
12
+ output: {
13
+ filename: devMode ? "main.js" : "main.[contenthash].js",
14
+ path: __dirname + "/dist",
15
+ },
16
+ plugins: [
17
+ new CleanWebpackPlugin(),
18
+ new MiniCssExtractPlugin({
19
+ filename: devMode ? '[name].css' : '[name].[contenthash].css'
20
+ }),
21
+ new HtmlWebpackPlugin({
22
+ template: os.tmpdir() + "/rtfdoc_output.html"
23
+ })
24
+ ],
25
+ devtool: devMode ? "inline-source-map" : "source-map",
26
+ module: {
27
+ rules: [
28
+ {
29
+ test: /\.scss$/,
30
+ use: [
31
+ MiniCssExtractPlugin.loader,
32
+ // Translates CSS into CommonJS
33
+ 'css-loader',
34
+ // Compiles Sass to CSS
35
+ 'sass-loader',
36
+ ]
37
+ }
38
+ ]
39
+ }
40
+ };
@@ -0,0 +1,3 @@
1
+ module RTFDoc
2
+ VERSION = "0.1.0"
3
+ end
@@ -0,0 +1,47 @@
1
+
2
+ lib = File.expand_path("../lib", __FILE__)
3
+ $LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
4
+ require "rtfdoc/version"
5
+
6
+ Gem::Specification.new do |spec|
7
+ spec.name = "rtfdoc"
8
+ spec.version = RTFDoc::VERSION
9
+ spec.authors = ["ccocchi"]
10
+ spec.email = ["cocchi.c@gmail.com"]
11
+
12
+ spec.summary = "Generate beautiful static documention for your APIs from markdown"
13
+ #spec.description = %q{TODO: Write a longer description or delete this line.}
14
+ spec.homepage = "https://github.com/ccocchi/rtfdoc"
15
+ spec.license = "MIT"
16
+
17
+ # Prevent pushing this gem to RubyGems.org. To allow pushes either set the 'allowed_push_host'
18
+ # to allow pushing to a single host or delete this section to allow pushing to any host.
19
+ # if spec.respond_to?(:metadata)
20
+ # spec.metadata["allowed_push_host"] = "TODO: Set to 'http://mygemserver.com'"
21
+ #
22
+ # spec.metadata["homepage_uri"] = spec.homepage
23
+ # spec.metadata["source_code_uri"] = "TODO: Put your gem's public repo URL here."
24
+ # spec.metadata["changelog_uri"] = "TODO: Put your gem's CHANGELOG.md URL here."
25
+ # else
26
+ # raise "RubyGems 2.0 or newer is required to protect against " \
27
+ # "public gem pushes."
28
+ # end
29
+
30
+ # Specify which files should be added to the gem when it is released.
31
+ # The `git ls-files -z` loads the files in the RubyGem that have been added into git.
32
+ spec.files = Dir.chdir(File.expand_path('..', __FILE__)) do
33
+ `git ls-files -z`.split("\x0").reject { |f| f.match(%r{^test/}) }
34
+ end
35
+ spec.bindir = "bin"
36
+ spec.executables = ['rtfdoc']
37
+ spec.require_paths = ["lib"]
38
+
39
+ spec.add_dependency "erubi", "~> 1.9.0"
40
+ spec.add_dependency "rouge", "~> 3.20.0"
41
+ spec.add_dependency "redcarpet", "~> 3.5.0"
42
+ spec.add_dependency "thor", "~> 1.0.1"
43
+
44
+ spec.add_development_dependency "bundler", "~> 1.17"
45
+ spec.add_development_dependency "rake", "~> 10.0"
46
+ spec.add_development_dependency "minitest", "~> 5.0"
47
+ end
@@ -0,0 +1,47 @@
1
+ <div class="section-list">
2
+ <h5 class="section-list-title"><%= @title.capitalize %></h5>
3
+ <ul>
4
+ <% @attributes.each do |name, hash| %>
5
+ <li class="list-item">
6
+ <div class="list-item-label">
7
+ <div class="list-item-name"><%= name %></div>
8
+ <div class="list-item-type"><%= hash['type'] %></div>
9
+ <% if hash['required'] %>
10
+ <div class="list-item-req">required</div>
11
+ <% end %>
12
+ </div>
13
+ <div class="list-item-description">
14
+ <p><%= hash['desc'] %></p>
15
+ </div>
16
+ <% if hash['children']&.any? %>
17
+ <div class="section-list section-list-child">
18
+ <h5
19
+ class="section-list-title section-list-title-child"
20
+ data-content="Hide child attributes"
21
+ >
22
+ <span class="svg-icon svg-plus">
23
+ <svg height="32" style="height: 10px; width: 10px;" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
24
+ <path d="M28,14H18V4c0-1.104-0.896-2-2-2s-2,0.896-2,2v10H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h10v10c0,1.104,0.896,2,2,2 s2-0.896,2-2V18h10c1.104,0,2-0.896,2-2S29.104,14,28,14z"/>
25
+ </svg>
26
+ </span>
27
+ <span>Show child attributes</span>
28
+ </h5>
29
+ <ul class="child-list hidden">
30
+ <% hash['children'].each do |child_name, child_hash| %>
31
+ <li class="list-item">
32
+ <div class="list-item-label">
33
+ <div class="list-item-name"><%= name %></div>
34
+ <div class="list-item-type"><%= hash['type'] %> </div>
35
+ </div>
36
+ <div class="list-item-description">
37
+ <p><%= hash['desc'] %></p>
38
+ </div>
39
+ </li>
40
+ <% end %>
41
+ </ul>
42
+ </div>
43
+ <% end %>
44
+ </li>
45
+ <% end %>
46
+ </ul>
47
+ </div>
@@ -0,0 +1,529 @@
1
+ :root {
2
+ --sail-gray50: #f7fafc;
3
+ --sail-gray100: #e3e8ee;
4
+ --sail-gray200: #c1c9d2;
5
+ --sail-gray300: #a3acb9;
6
+ --sail-gray400: #8792a2;
7
+ --sail-gray500: #697386;
8
+ --sail-gray600: #4f566b;
9
+ --sail-gray700: #3c4257;
10
+ --sail-gray800: #2a2f45;
11
+ --sail-gray900: #1a1f36;
12
+ --sail-blue400: #6c8eef;
13
+ --sail-blue700: #2f3d89;
14
+ --sail-cyan500: #067ab8;
15
+ --redish: #e06c75;
16
+ --sidebar-width: 220px;
17
+ --content-width: calc(100vw - var(--sidebar-width));
18
+ --section-padding: 5vw;
19
+ --example-width: 40vw;
20
+ --sp20: 20px;
21
+ --sp24: 24px;
22
+ --monospace-font: "SFMono-Regular", "Consolas", "Menlo", monospace;
23
+ --title-font-size: 24px;
24
+ --title-line-height: 40px;
25
+ --main-font-size: 16px;
26
+ --main-line-height: 24px;
27
+ --nav-font-size: 14px;
28
+ --endpoints-font-size: 14px;
29
+ --endpoints-line-height: 22px;
30
+ --table-font-size: 14px;
31
+ --table-line-height: 18px;
32
+ --code-font-size: 14px; }
33
+
34
+ * {
35
+ box-sizing: border-box;
36
+ word-wrap: break-word; }
37
+
38
+ html {
39
+ overflow: auto; }
40
+
41
+ body {
42
+ margin: 0;
43
+ padding: 0;
44
+ font-family: -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", Helvetica, Arial, sans-serif;
45
+ overflow-x: hidden;
46
+ overflow-y: scroll;
47
+ max-width: 100%;
48
+ -moz-osx-font-smoothing: grayscale;
49
+ background-color: var(--background-color); }
50
+
51
+ body[data-theme="dark"] {
52
+ --background-color: var(--sail-gray900);
53
+ --shrinked-section-color: var(--sail-gray800);
54
+ --response-background-color: var(--sail-gray800);
55
+ --response-shadow-color: hsla(0,0%,100%,.15);
56
+ --response-header-color: var(--sail-gray200);
57
+ --block-header-background-color: var(--sail-gray700);
58
+ --endpoints-def-color: var(--sail-gray200);
59
+ --endpoints-def-hover-color: var(--sail-gray50);
60
+ --divider-color: var(--sail-gray700);
61
+ --title-color: var(--sail-gray50);
62
+ --main-text-color: var(--sail-gray200);
63
+ --attribute-name-color: var(--sail-gray100);
64
+ --attribute-type-color: var(--sail-gray500);
65
+ --attribute-required-color: var(--redish);
66
+ --attribute-desc-color: var(--sail-gray200);
67
+ --filter-ratio: 15%;
68
+ --table-header-color: var(--sail-gray100);
69
+ --code-color: var(--sail-gray200);
70
+ --inline-code-color: var(--sail-gray100);
71
+ --inline-code-border: hsla(0, 0%, 100%, .1);
72
+ --inline-code-background: hsla(0, 0%, 100%, .08);
73
+ --nav-color: var(--sail-gray300);
74
+ --nav-hover-color: var(--sail-gray50);
75
+ --nav-header-color: var(--sail-gray50);
76
+ --brand-color: var(--sail-cyan500);
77
+ --switch-background-color: #212d63;
78
+ --code-strings: #98c379;
79
+ --code-numbers: #56b6c2;
80
+ --code-booleans: #d19a66;
81
+ --child-list-title-color: var(--sail-gray500);
82
+ --child-list-title-hover-color: var(--sail-gray100); }
83
+
84
+ body[data-theme="light"] {
85
+ --background-color: #fff;
86
+ --main-text-color: #24292e;
87
+ --title-color: #24292e;
88
+ --filter-ratio: -15%;
89
+ --shrinked-section-color: #f6f8fa;
90
+ --response-background-color: #f6f8fa;
91
+ --response-shadow-color: rgba(0,0,0,.07);
92
+ --response-header-color: #586069;
93
+ --block-header-background-color: var(--sail-gray100);
94
+ --endpoints-def-color: #586069;
95
+ --endpoints-def-hover-color: #24292e;
96
+ --divider-color: #e1e4e8;
97
+ --attribute-name-color: var(--sail-gray700);
98
+ --attribute-type-color: var(--sail-gray400);
99
+ --attribute-required-color: #d73a49;
100
+ --attribute-desc-color: #586069;
101
+ --table-header-color: #24292e;
102
+ --code-color: #586069;
103
+ --inline-code-color: #24292e;
104
+ --inline-code-border: #fff;
105
+ --inline-code-background: rgba(27,31,35,.05);
106
+ --nav-color: #586069;
107
+ --nav-hover-color: #24292e;
108
+ --nav-header-color: #24292e;
109
+ --brand-color: var(--sail-cyan500);
110
+ --switch-background-color: var(--sail-gray100);
111
+ --code-strings: #1ea672;
112
+ --code-numbers: #005cc5;
113
+ --code--booleans: #e36209;
114
+ --child-list-title-color: #586069;
115
+ --child-list-title-hover-color: #24292e; }
116
+
117
+ #sidebar {
118
+ width: var(--sidebar-width);
119
+ height: 100%;
120
+ position: fixed;
121
+ top: 0;
122
+ left: 0;
123
+ bottom: 0;
124
+ z-index: 10;
125
+ box-shadow: -1px 0 0 0 var(--divider-color) inset; }
126
+
127
+ .sidebar-header {
128
+ color: var(--nav-header-color);
129
+ padding: 16px;
130
+ display: flex;
131
+ flex-direction: row;
132
+ justify-content: space-between; }
133
+ .sidebar-header .sidebar-title {
134
+ font-size: 15px;
135
+ line-height: 20px; }
136
+ .sidebar-header .api {
137
+ text-transform: uppercase;
138
+ color: var(--brand-color); }
139
+
140
+ .sidebar-nav {
141
+ margin-top: 16px; }
142
+ .sidebar-nav a {
143
+ text-decoration: none;
144
+ color: var(--nav-color);
145
+ transition: color .2s ease;
146
+ font-size: var(--nav-font-size);
147
+ font-weight: 500;
148
+ display: block;
149
+ padding: 5px 16px; }
150
+ .sidebar-nav a:hover {
151
+ color: var(--nav-hover-color); }
152
+ .sidebar-nav a.current span {
153
+ border-bottom: 2px solid var(--brand-color); }
154
+ .sidebar-nav li > ul {
155
+ display: none;
156
+ padding-left: 16px;
157
+ transition: all 2s ease; }
158
+ .sidebar-nav li.expanded > ul,
159
+ .sidebar-nav li.current > ul {
160
+ display: block; }
161
+
162
+ /*Simple css to style it like a toggle switch*/
163
+ .theme-switch-wrapper {
164
+ display: flex;
165
+ align-items: center;
166
+ height: 20px; }
167
+ .theme-switch-wrapper .theme-switch {
168
+ display: inline-block;
169
+ height: 20px;
170
+ position: relative;
171
+ width: 40px; }
172
+ .theme-switch-wrapper .theme-switch input {
173
+ display: none; }
174
+ .theme-switch-wrapper .slider {
175
+ background-color: #ccc;
176
+ bottom: 0;
177
+ cursor: pointer;
178
+ left: 0;
179
+ position: absolute;
180
+ right: 0;
181
+ top: 4px;
182
+ height: 14px;
183
+ transition: .4s; }
184
+ .theme-switch-wrapper .slider:before {
185
+ background-color: #fff;
186
+ bottom: -2px;
187
+ content: "";
188
+ height: 18px;
189
+ left: 0;
190
+ box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.07), 0 1px 3px 0 rgba(59, 65, 94, 0.1);
191
+ position: absolute;
192
+ transition: .4s;
193
+ width: 18px; }
194
+ .theme-switch-wrapper input:checked + .slider {
195
+ background-color: var(--switch-background-color); }
196
+ .theme-switch-wrapper input:checked + .slider:before {
197
+ transform: translateX(22px); }
198
+ .theme-switch-wrapper .slider.round {
199
+ border-radius: 20px; }
200
+ .theme-switch-wrapper .slider.round:before {
201
+ border-radius: 50%; }
202
+
203
+ #content {
204
+ position: absolute;
205
+ top: 0;
206
+ bottom: 0;
207
+ right: 0;
208
+ left: var(--sidebar-width);
209
+ overflow-x: hidden;
210
+ overflow-y: scroll; }
211
+
212
+ /** Sections **/
213
+ section {
214
+ width: 100%;
215
+ display: flex;
216
+ flex-direction: column;
217
+ align-items: center; }
218
+
219
+ .section-divider {
220
+ height: 1px;
221
+ margin-top: -1px;
222
+ border-bottom: 1px solid var(--divider-color);
223
+ width: 100%;
224
+ margin: 0 auto; }
225
+
226
+ /* First section should not have a divider */
227
+ #content > section:first-of-type > .section-divider {
228
+ display: none; }
229
+
230
+ /* Section within section represent resources, so the first sub-section should have
231
+ ** a full width divider to separate itself from the previous resource.
232
+ */
233
+ section > section:first-of-type .section-divider {
234
+ width: 100%; }
235
+
236
+ /* But following subsections should have padded divider to mark resource inclusion */
237
+ section > section .section-divider {
238
+ width: calc(100% - 2 * var(--section-padding)); }
239
+
240
+ /* Resource's subsections are hidden by default */
241
+ .head-section > section {
242
+ display: none;
243
+ background-color: var(--background-color); }
244
+
245
+ /* Except the first one that uses a specific background color when shrinked */
246
+ .head-section > section:first-child {
247
+ display: block;
248
+ background-color: var(--shrinked-section-color); }
249
+
250
+ /* When expanded, we show the subsections and hide the button. */
251
+ .head-section.expanded > section {
252
+ display: block;
253
+ background-color: var(--background-color); }
254
+ .head-section.expanded .button-wrapper {
255
+ display: none; }
256
+
257
+ .button-wrapper {
258
+ display: flex;
259
+ width: 100%;
260
+ justify-content: center; }
261
+ .button-wrapper .button {
262
+ display: flex;
263
+ justify-content: center;
264
+ background: var(--background-color);
265
+ border-radius: 24px;
266
+ padding: 4px 12px;
267
+ color: var(--brand-color);
268
+ text-transform: uppercase;
269
+ cursor: pointer;
270
+ font-size: 12px;
271
+ line-height: 18px;
272
+ border: 1px solid var(--divider-color);
273
+ font-weight: 600;
274
+ transform: translateY(-28px); }
275
+ .button-wrapper .button > div {
276
+ margin-right: 4px; }
277
+ .button-wrapper .button:hover {
278
+ filter: brightness(calc(100% + var(--filter-ratio))); }
279
+ .button-wrapper svg {
280
+ margin: 2px 0;
281
+ fill: var(--sail-gray400); }
282
+
283
+ .section-area {
284
+ width: 100%;
285
+ padding: var(--section-padding);
286
+ display: flex;
287
+ flex-direction: row; }
288
+
289
+ .section-body {
290
+ flex-shrink: 0;
291
+ width: calc(var(--example-width) - var(--section-padding));
292
+ margin-right: var(--section-padding); }
293
+
294
+ .section-example {
295
+ position: sticky;
296
+ align-self: flex-start;
297
+ top: 0;
298
+ flex-grow: 1;
299
+ max-width: 600px;
300
+ padding-top: calc(40px + var(--sp20)); }
301
+
302
+ p {
303
+ margin-top: var(--sp20);
304
+ font-size: var(--main-font-size);
305
+ line-height: var(--main-line-height);
306
+ font-weight: 400;
307
+ color: var(--main-text-color);
308
+ --moz-osx-font-smoothing: grayscale; }
309
+
310
+ /* Sub-sections uses a smaller font */
311
+ section section:not(:first-of-type) p {
312
+ font-size: var(--endpoints-font-size);
313
+ line-height: var(--endpoints-line-height); }
314
+
315
+ ul {
316
+ list-style: none;
317
+ margin: 0;
318
+ padding: 0; }
319
+
320
+ .hidden {
321
+ display: none; }
322
+
323
+ .section-body h1 {
324
+ font-size: var(--title-font-size);
325
+ font-weight: 500;
326
+ color: var(--title-color);
327
+ line-height: var(--title-line-height);
328
+ margin: 0; }
329
+
330
+ .section-response {
331
+ background: var(--response-background-color);
332
+ border-radius: 8px;
333
+ box-shadow: 0 0 0 1px var(--response-shadow-color); }
334
+ .section-response .response-topbar {
335
+ background: var(--block-header-background-color);
336
+ padding: 10px 12px;
337
+ font-weight: 500;
338
+ font-size: 12px;
339
+ color: var(--response-header-color);
340
+ border-radius: 8px 8px 0 0; }
341
+ .section-response p {
342
+ margin: 0;
343
+ padding: 12px var(--sp20); }
344
+ .section-response pre {
345
+ margin: 0;
346
+ padding: 12px;
347
+ color: var(--code-color);
348
+ font-family: var(--monospace-font);
349
+ font-size: var(--code-font-size);
350
+ font-weight: 400;
351
+ line-height: 18px; }
352
+
353
+ .section-endpoints {
354
+ padding: 12px 22px; }
355
+ .section-endpoints .endpoint-def {
356
+ display: flex;
357
+ flex-direction: row;
358
+ font-family: var(--monospace-font);
359
+ font-size: var(--code-font-size);
360
+ font-weight: 500;
361
+ line-height: 22px;
362
+ color: var(--endpoints-def-color); }
363
+ .section-endpoints .method {
364
+ text-align: right;
365
+ width: 55px;
366
+ margin-right: 7px; }
367
+ .section-endpoints .method__get {
368
+ color: var(--sail-blue400); }
369
+ .section-endpoints .method__post {
370
+ color: #50b573; }
371
+ .section-endpoints .method__patch,
372
+ .section-endpoints .method__put {
373
+ color: #50b573; }
374
+ .section-endpoints .method__delete {
375
+ color: var(--redish); }
376
+ .section-endpoints a {
377
+ text-decoration: none; }
378
+ .section-endpoints a:hover .method {
379
+ filter: brightness(calc(100% + var(--filter-ratio))); }
380
+ .section-endpoints a:hover .path {
381
+ color: var(--endpoints-def-hover-color); }
382
+
383
+ h3 {
384
+ margin-top: 20px;
385
+ padding-top: 16px; }
386
+
387
+ h3,
388
+ .section-list .section-list-title {
389
+ font-size: 16px;
390
+ font-weight: 500;
391
+ padding-bottom: 12px;
392
+ border-bottom: 1px solid var(--divider-color);
393
+ display: flex;
394
+ align-items: baseline;
395
+ color: var(--title-color);
396
+ margin: 0;
397
+ margin-top: var(--sp20);
398
+ width: 100%; }
399
+
400
+ .section-list {
401
+ margin-top: 32px; }
402
+ .section-list .list-item {
403
+ padding-top: 16px;
404
+ padding-bottom: 15px;
405
+ border-bottom: 1px solid var(--divider-color); }
406
+ .section-list .list-item:last-child {
407
+ border-bottom: none; }
408
+ .section-list .list-item-label {
409
+ display: flex;
410
+ margin: 0;
411
+ padding: 0 0 8px;
412
+ align-items: baseline;
413
+ margin-bottom: -8px; }
414
+ .section-list .list-item-label > div {
415
+ margin-right: 6px; }
416
+ .section-list .list-item-name {
417
+ font-family: var(--monospace-font);
418
+ font-size: 14px;
419
+ color: var(--attribute-name-color);
420
+ font-weight: 600; }
421
+ .section-list .list-item-type {
422
+ font-size: 12px;
423
+ font-weight: 600;
424
+ color: var(--attribute-type-color); }
425
+ .section-list .list-item-req {
426
+ font-size: 10px;
427
+ font-weight: 600;
428
+ color: var(--attribute-required-color);
429
+ text-transform: uppercase; }
430
+ .section-list .list-item-description p {
431
+ margin: 0;
432
+ margin-top: 4px;
433
+ color: var(--attribute-desc-color);
434
+ font-size: var(--endpoints-font-size);
435
+ line-height: var(--endpoints-line-height); }
436
+ .section-list .section-list-child {
437
+ border: 1px solid var(--divider-color);
438
+ border-radius: 16px;
439
+ display: inline-block;
440
+ transition: all .2s ease;
441
+ margin-top: 8px; }
442
+ .section-list .section-list-child.list-shown {
443
+ width: 100%; }
444
+ .section-list .section-list-title-child {
445
+ margin: 0;
446
+ border-bottom: none;
447
+ display: inline-block;
448
+ padding: 6px 10px;
449
+ color: var(--child-list-title-color);
450
+ text-transform: none;
451
+ font-size: 13px; }
452
+ .section-list .section-list-title-child:hover {
453
+ cursor: pointer;
454
+ color: var(--child-list-title-hover-color); }
455
+ .section-list .section-list-title-child.child-revealed {
456
+ border-bottom: 1px solid var(--divider-color); }
457
+ .section-list .section-list-title-child.child-revealed .svg-plus {
458
+ transform: rotate(45deg); }
459
+ .section-list .section-list-title-child .svg-plus {
460
+ color: var(--child-list-title-color);
461
+ transition: transform .2s ease;
462
+ display: inline-block;
463
+ transform: rotate(0deg);
464
+ transform-origin: center;
465
+ margin-right: 6px; }
466
+ .section-list .child-list .list-item {
467
+ padding: 12px; }
468
+
469
+ .svg-icon {
470
+ fill: currentColor; }
471
+
472
+ /** Tables **/
473
+ .header-table {
474
+ padding: 14px;
475
+ color: var(--table-header-color);
476
+ font-size: 12px;
477
+ font-weight: 600;
478
+ line-height: 18px;
479
+ text-transform: uppercase;
480
+ border-bottom: 1px solid var(--divider-color); }
481
+
482
+ .table-wrapper {
483
+ border: 1px solid var(--divider-color);
484
+ border-radius: 8px; }
485
+
486
+ table td {
487
+ padding: 9px 14px 9px 10px;
488
+ color: var(--main-text-color);
489
+ font-weight: 400;
490
+ font-size: var(--table-font-size);
491
+ line-height: var(--table-line-height);
492
+ vertical-align: baseline; }
493
+
494
+ table tr td:first-child {
495
+ padding: 9px 10px 9px 14px;
496
+ width: 40%; }
497
+
498
+ table .cell-property {
499
+ font-weight: 600;
500
+ text-align: right; }
501
+
502
+ table .cell-definition {
503
+ text-align: left; }
504
+
505
+ /** Inline code **/
506
+ p code {
507
+ color: var(--inline-code-color);
508
+ border-radius: 4px;
509
+ border: 1px solid var(--inline-code-border);
510
+ padding: 2px 3px 0;
511
+ margin: 0 1px;
512
+ font-size: 15px;
513
+ font-family: var(--monospace-font);
514
+ font-weight: 500;
515
+ background: var(--inline-code-background); }
516
+
517
+ /** Code highlighting **/
518
+ pre code,
519
+ pre code .w {
520
+ color: var(--code-color); }
521
+
522
+ pre code .s2 {
523
+ color: var(--code-strings); }
524
+
525
+ pre code .kc {
526
+ color: var(--code-booleans); }
527
+
528
+ pre code .mi {
529
+ color: var(--code-numbers); }