hologram 0.6.0 → 1.0.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.
- checksums.yaml +4 -4
- data/README.md +7 -4
- data/Rakefile +5 -0
- data/hologram.gemspec +1 -1
- data/lib/hologram.rb +13 -445
- data/lib/hologram/display_message.rb +79 -0
- data/lib/hologram/doc_block_collection.rb +48 -0
- data/lib/hologram/doc_builder.rb +196 -0
- data/lib/hologram/doc_parser.rb +125 -0
- data/lib/hologram/document_block.rb +36 -0
- data/lib/hologram/template_variables.rb +21 -0
- data/lib/hologram/version.rb +1 -1
- data/lib/template/doc_assets/_header.html +7 -2
- data/lib/template/hologram_config.yml +3 -0
- data/spec/display_message_spec.rb +115 -0
- data/spec/doc_block_collection_spec.rb +80 -0
- data/spec/doc_builder_spec.rb +92 -0
- data/spec/doc_parser_spec.rb +89 -0
- data/spec/document_block_spec.rb +62 -0
- data/spec/fixtures/source/components/background/backgrounds.css +46 -0
- data/spec/fixtures/source/components/button/buttons.css +87 -0
- data/spec/fixtures/source/components/button/skin/buttonSkins.css +113 -0
- data/spec/fixtures/source/components/index.md +23 -0
- data/spec/fixtures/source/config.yml +17 -0
- data/spec/fixtures/source/extra/css/screen.css +1 -0
- data/spec/fixtures/source/templates/_footer.html +9 -0
- data/spec/fixtures/source/templates/_header.html +57 -0
- data/spec/fixtures/source/templates/static/css/doc.css +132 -0
- data/spec/fixtures/styleguide/base_css.html +170 -0
- data/spec/fixtures/styleguide/extra/css/screen.css +1 -0
- data/spec/fixtures/styleguide/index.html +84 -0
- data/spec/fixtures/styleguide/static/css/doc.css +132 -0
- data/spec/spec_helper.rb +7 -0
- metadata +66 -22
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
require 'spec_helper'
|
|
2
|
+
|
|
3
|
+
describe Hologram::DocumentBlock do
|
|
4
|
+
|
|
5
|
+
let(:config) do
|
|
6
|
+
{ 'name' => 'foo', 'category' => 'bar', 'title' => 'baz', 'parent' => 'pop' }
|
|
7
|
+
end
|
|
8
|
+
let(:markdown){ 'blah' }
|
|
9
|
+
let(:doc_block){ subject.class.new(config, markdown) }
|
|
10
|
+
|
|
11
|
+
context '#set_members' do
|
|
12
|
+
it 'sets accessors for the the block config' do
|
|
13
|
+
config.each do |k, v|
|
|
14
|
+
expect(doc_block.send(k)).to eql v
|
|
15
|
+
end
|
|
16
|
+
end
|
|
17
|
+
end
|
|
18
|
+
|
|
19
|
+
context '#get_hash' do
|
|
20
|
+
let(:meta) do
|
|
21
|
+
{ :name => 'foo', :category => 'bar', :title => 'baz', :parent => 'pop' }
|
|
22
|
+
end
|
|
23
|
+
|
|
24
|
+
it 'returns a hash of meta info' do
|
|
25
|
+
expect(doc_block.get_hash).to eql meta
|
|
26
|
+
end
|
|
27
|
+
end
|
|
28
|
+
|
|
29
|
+
context '#is_valid?' do
|
|
30
|
+
context 'when name and markdown is present' do
|
|
31
|
+
it 'returns true' do
|
|
32
|
+
expect(doc_block.is_valid?).to eql true
|
|
33
|
+
end
|
|
34
|
+
end
|
|
35
|
+
|
|
36
|
+
context 'when name is not present' do
|
|
37
|
+
let(:invalid_doc_block) do
|
|
38
|
+
subject.class.new(config.merge(:name => nil))
|
|
39
|
+
end
|
|
40
|
+
|
|
41
|
+
it 'returns false' do
|
|
42
|
+
expect(invalid_doc_block.is_valid?).to eql false
|
|
43
|
+
end
|
|
44
|
+
end
|
|
45
|
+
|
|
46
|
+
context 'when markdown is not present' do
|
|
47
|
+
let(:invalid_doc_block) do
|
|
48
|
+
subject.class.new(config)
|
|
49
|
+
end
|
|
50
|
+
|
|
51
|
+
it 'returns false' do
|
|
52
|
+
expect(invalid_doc_block.is_valid?).to eql false
|
|
53
|
+
end
|
|
54
|
+
end
|
|
55
|
+
end
|
|
56
|
+
|
|
57
|
+
context '#markdown_with_heading' do
|
|
58
|
+
it 'returns markdown with a specified header' do
|
|
59
|
+
expect(doc_block.markdown_with_heading(2)).to eql "\n\n<h2 id=\"foo\">baz</h2>blah"
|
|
60
|
+
end
|
|
61
|
+
end
|
|
62
|
+
end
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
/*doc
|
|
2
|
+
---
|
|
3
|
+
title: Background Colors
|
|
4
|
+
name: background
|
|
5
|
+
category: Base CSS
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
We have a few background colors that can be used in various contexts.
|
|
9
|
+
These are not for use as the entire page background but instead for
|
|
10
|
+
specific components and modules on the page.
|
|
11
|
+
|
|
12
|
+
<div class="line txtC">
|
|
13
|
+
<div class="col cols6 ">
|
|
14
|
+
<div class="docSwatch backgroundLowlight"></div>
|
|
15
|
+
<code>backgroundLowlight</code>
|
|
16
|
+
</div>
|
|
17
|
+
<div class="col cols6 ">
|
|
18
|
+
<div class="docSwatch backgroundHighlight"></div>
|
|
19
|
+
<code>backgroundHighlight</code>
|
|
20
|
+
</div>
|
|
21
|
+
<div class="col cols6 ">
|
|
22
|
+
<div class="docSwatch backgroundBasic"></div>
|
|
23
|
+
<code>backgroundBasic</code>
|
|
24
|
+
</div>
|
|
25
|
+
<div class="col cols6 lastCol">
|
|
26
|
+
<div class="docSwatch backgroundInverse"></div>
|
|
27
|
+
<code>backgroundInverse</code>
|
|
28
|
+
</div>
|
|
29
|
+
</div>
|
|
30
|
+
*/
|
|
31
|
+
|
|
32
|
+
.backgroundBasic {
|
|
33
|
+
background-color: white;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.backgroundLowlight {
|
|
37
|
+
background-color: #f9f9f9;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.backgroundHighlight {
|
|
41
|
+
background-color: #5eab1f;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.backgroundInverse {
|
|
45
|
+
background-color: #222222;
|
|
46
|
+
}
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
/*doc
|
|
2
|
+
---
|
|
3
|
+
title: Buttons
|
|
4
|
+
name: button
|
|
5
|
+
category: Base CSS
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
Button styles can be applied to any element. Typically you'll want to
|
|
9
|
+
use either a `<button>` or an `<a>` element:
|
|
10
|
+
|
|
11
|
+
```html_example
|
|
12
|
+
<button class="btn btnDefault">Click</button>
|
|
13
|
+
<a class="btn btnDefault" href="http://trulia.com">Don't click</a>
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
If your button is actually a link to another page, please use the
|
|
17
|
+
`<a>` element, while if your button performs an action, such as submitting
|
|
18
|
+
a form or triggering some javascript event, then use a `<button>` element.
|
|
19
|
+
|
|
20
|
+
##Button Sizes
|
|
21
|
+
There are three 3 sizes for buttons: Large, medium (default)
|
|
22
|
+
and small. Simply apply the size modifier class for the desired size.
|
|
23
|
+
There is also an additional modifier that will make the button take the
|
|
24
|
+
full width of the container. It may be used with the any of the button
|
|
25
|
+
size and style modifiers.
|
|
26
|
+
|
|
27
|
+
Button | Modifier Class
|
|
28
|
+
----------------------------------------------------------------- | -----------------
|
|
29
|
+
<button class="btn btnDefault btnLrg">Large</button> | `btn btnDefault btnLrg`
|
|
30
|
+
<button class="btn btnDefault">Default</button> | `btn btnDefault`
|
|
31
|
+
<button class="btn btnDefault btnSml">Small</button> | `btn btnDefault btnSml`
|
|
32
|
+
<button class="btn btnDefault btnFullWidth">Full width</button> | `btn btnDefault btnFullWidth`
|
|
33
|
+
|
|
34
|
+
*/
|
|
35
|
+
|
|
36
|
+
button {
|
|
37
|
+
background: none;
|
|
38
|
+
border: 0;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
/* Base button */
|
|
42
|
+
.btn {
|
|
43
|
+
padding: .5em 1em;
|
|
44
|
+
margin: 0;
|
|
45
|
+
display: inline-block;
|
|
46
|
+
font-weight: normal;
|
|
47
|
+
line-height: normal;
|
|
48
|
+
font-size: 14px;
|
|
49
|
+
font-size: 0.875rem;
|
|
50
|
+
text-decoration: none;
|
|
51
|
+
cursor: pointer;
|
|
52
|
+
border: 0;
|
|
53
|
+
background: none;
|
|
54
|
+
text-align: center;
|
|
55
|
+
border: 1px solid #cccccc;
|
|
56
|
+
-webkit-border-radius: 4px;
|
|
57
|
+
-moz-border-radius: 4px;
|
|
58
|
+
-ms-border-radius: 4px;
|
|
59
|
+
-o-border-radius: 4px;
|
|
60
|
+
border-radius: 4px;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
/* Button sizes */
|
|
64
|
+
.btnSml {
|
|
65
|
+
font-size: 10px;
|
|
66
|
+
font-size: 0.625rem;
|
|
67
|
+
-webkit-border-radius: 4px;
|
|
68
|
+
-moz-border-radius: 4px;
|
|
69
|
+
-ms-border-radius: 4px;
|
|
70
|
+
-o-border-radius: 4px;
|
|
71
|
+
border-radius: 4px;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.btnLrg {
|
|
75
|
+
font-size: 16px;
|
|
76
|
+
font-size: 1rem;
|
|
77
|
+
line-height: 1.6;
|
|
78
|
+
-webkit-border-radius: 4px;
|
|
79
|
+
-moz-border-radius: 4px;
|
|
80
|
+
-ms-border-radius: 4px;
|
|
81
|
+
-o-border-radius: 4px;
|
|
82
|
+
border-radius: 4px;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.btnFullWidth {
|
|
86
|
+
width: 100%;
|
|
87
|
+
}
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
/*doc
|
|
2
|
+
---
|
|
3
|
+
parent: button
|
|
4
|
+
name: buttonSkins
|
|
5
|
+
title: Button Styles
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
Button | Class | Description
|
|
9
|
+
------------------------------------------------- | ----------------- | -----------
|
|
10
|
+
<button class="btn btnDefault">Default</button> | `btn btnDefault` | This is what buttons look like, this is the go to button style.
|
|
11
|
+
<button class="btn btnPrimary">Primary</button> | `btn btnPrimary` | Use this button as the primary call to action
|
|
12
|
+
<button class="btn btnDanger">Delete</button> | `btn btnDanger` | This button is for delete actions, these actions should also have a confirmation dialog
|
|
13
|
+
<button class="btn btnDisabled">Disabled</button> | `btn btnDisabled` | I'm afraid I can't let you do that, yet.
|
|
14
|
+
|
|
15
|
+
*/
|
|
16
|
+
|
|
17
|
+
.btnDefault,
|
|
18
|
+
a.btnDefault {
|
|
19
|
+
border: 1px #d7d7d7 solid;
|
|
20
|
+
background: #f3f3f3;
|
|
21
|
+
color: #222222;
|
|
22
|
+
text-shadow: 0 1px 0 white;
|
|
23
|
+
-webkit-box-shadow: 0 1px 0px #cccccc;
|
|
24
|
+
-moz-box-shadow: 0 1px 0px #cccccc;
|
|
25
|
+
box-shadow: 0 1px 0px #cccccc;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.btnDefault:hover,
|
|
29
|
+
.btnDefault:focus {
|
|
30
|
+
background: #f6f6f6;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.btnDefault:active {
|
|
34
|
+
position: relative;
|
|
35
|
+
top: 1px;
|
|
36
|
+
-webkit-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
37
|
+
-moz-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
38
|
+
box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.btnPrimary,
|
|
42
|
+
a.btnPrimary, .btnDanger,
|
|
43
|
+
a.btnDanger {
|
|
44
|
+
color: white;
|
|
45
|
+
text-shadow: 0 0 0;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.btnPrimary,
|
|
49
|
+
a.btnPrimary {
|
|
50
|
+
border: 1px #d14b00 solid;
|
|
51
|
+
background: #ff5c00;
|
|
52
|
+
-webkit-box-shadow: 0 1px 0px #d35500;
|
|
53
|
+
-moz-box-shadow: 0 1px 0px #d35500;
|
|
54
|
+
box-shadow: 0 1px 0px #d35500;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.btnPrimary:hover,
|
|
58
|
+
.btnPrimary:focus {
|
|
59
|
+
background: #ff660f;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.btnPrimary:active {
|
|
63
|
+
position: relative;
|
|
64
|
+
top: 1px;
|
|
65
|
+
-webkit-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
66
|
+
-moz-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
67
|
+
box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.btnDanger,
|
|
71
|
+
a.btnDanger {
|
|
72
|
+
border: 1px #a21a10 solid;
|
|
73
|
+
background: #cc2114;
|
|
74
|
+
-webkit-box-shadow: 0 1px 0px #d35500;
|
|
75
|
+
-moz-box-shadow: 0 1px 0px #d35500;
|
|
76
|
+
box-shadow: 0 1px 0px #d35500;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.btnDanger:hover,
|
|
80
|
+
.btnDanger:focus {
|
|
81
|
+
background: #da2315;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.btnDanger:active {
|
|
85
|
+
position: relative;
|
|
86
|
+
top: 1px;
|
|
87
|
+
-webkit-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
88
|
+
-moz-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
89
|
+
box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.btn[disabled],
|
|
93
|
+
.btn[disabled]:hover,
|
|
94
|
+
.btn[disabled]:focus
|
|
95
|
+
.btn[disabled]:active,
|
|
96
|
+
.btnDisabled,
|
|
97
|
+
a.btnDisabled,
|
|
98
|
+
.btnDisabled:hover,
|
|
99
|
+
.btnDisabled:focus,
|
|
100
|
+
.btnDisabled:active {
|
|
101
|
+
border: 0px;
|
|
102
|
+
background: #cccccc;
|
|
103
|
+
color: #999999;
|
|
104
|
+
text-shadow: 0 0 0;
|
|
105
|
+
cursor: default;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.btn[disabled]:active,
|
|
109
|
+
.btnDisabled:active {
|
|
110
|
+
position: static;
|
|
111
|
+
color: #999999;
|
|
112
|
+
box-shadow: none;
|
|
113
|
+
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
#Welcome
|
|
2
|
+
|
|
3
|
+
This style guide is an example of what
|
|
4
|
+
[hologram](http://trulia.github.io/hologram) can help you build and
|
|
5
|
+
maintain.
|
|
6
|
+
|
|
7
|
+
The goal of hologram is to make it easy to document your CSS and to
|
|
8
|
+
display the code examples to use that CSS. Hologram has no
|
|
9
|
+
opinions about how you should actually organize/style your style guide.
|
|
10
|
+
You could do everything as a single file with no header/footer and it
|
|
11
|
+
would work just fine. Or, you could break it up into an individual file
|
|
12
|
+
for each component. Top navigation, left navigation, no
|
|
13
|
+
navigation....that's up to you. Build it however you'd like.
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
We've borrowed some of [Trulia](http://trulia.com)'s own CSS library to
|
|
17
|
+
demonstrate how hologram can be used. If you want more details about
|
|
18
|
+
hologram see the [git repository](http://github.com/trulia/hologram).
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
This is a work in progress, please consider contributing to
|
|
22
|
+
[hologram](http://github.com/trulia/hologram).
|
|
23
|
+
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
# Hologram config
|
|
2
|
+
|
|
3
|
+
# The directory containing the source files to parse
|
|
4
|
+
source: ./components
|
|
5
|
+
|
|
6
|
+
# The assets needed to build the docs (includes header.html, footer.html, etc)
|
|
7
|
+
documentation_assets: ./templates
|
|
8
|
+
|
|
9
|
+
# This is a custom markdown renderer (see Redcarpet documentation for
|
|
10
|
+
# how to do this)
|
|
11
|
+
# custom_markdown: trulia_markdown_renderer.rb
|
|
12
|
+
|
|
13
|
+
# Any other asset folders that need to be copied to the destination folder
|
|
14
|
+
# This where you should include your full stylesheets, component javascript,
|
|
15
|
+
# libraries and any other dependencies your style guide will have
|
|
16
|
+
dependencies:
|
|
17
|
+
- ./extra
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@charset "UTF-8";article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}b,strong{font-weight:bold}dfn{font-style:italic}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:'';content:none}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}dl,dt,dd,menu,ol,ul{margin:0;padding:0;list-style-type:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}fieldset{margin:0;padding:0}legend{border:0;padding:0;white-space:normal;*margin-left:-7px}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;*overflow:visible}button[disabled],input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;*height:13px;*width:13px}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}th{font-weight:normal}.main{overflow:hidden;*overflow:visible;zoom:1}.line .lastCol{display:table-cell;vertical-align:top;width:10000px!important;*display:block;*zoom:1;*width:auto!important}.line,.box,.box .boxHead,.box .boxFoot,.content>section,.container{zoom:1}.line:before,.box:before,.box .boxHead:before,.box .boxFoot:before,.content>section:before,.container:before,.line:after,.box:after,.box .boxHead:after,.box .boxFoot:after,.content>section:after,.container:after{content:" ";display:table}.line:after,.box:after,.box .boxHead:after,.box .boxFoot:after,.content>section:after,.container:after{clear:both}.listInline>li{display:inline-block;*display:inline;*zoom:1}.hideVisually{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.hideVisually.focusable:active,.hideVisually.focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto}.hideText{background-color:transparent;border:0;overflow:hidden;*text-indent:-9999px}.hideText:before{content:"";display:block;width:0;height:100%}.hideFully{display:none!important;visibility:hidden}.txtC,table .txtC,table tr .txtC{text-align:center}.txtL,table .txtL,table tr .txtL{text-align:left}.txtR,table .txtR,table tr .txtR{text-align:right}.txtT,table .txtT,table tr .txtT{vertical-align:top}.txtB,table .txtB,table tr .txtB{vertical-align:bottom}.txtM,table .txtM,table tr .txtM{vertical-align:middle}p,.headingDoubleSub,ol,ul,.table{margin-top:5px;margin-bottom:5px}.box{margin-top:21px;margin-bottom:21px}table h1,table h2,table h3,table h4,table h5,table h6,table p,table ul,table ol,table dl,table blockquote,table .media,table pre{margin-left:0;margin-right:0}.pan{padding:0!important}.man{margin:0!important}.pas{padding:5px!important}.mas{margin:5px!important}.pam{padding:10px!important}.mam{margin:10px!important}.pal{padding:21px!important}.mal{margin:21px!important}.pvn{padding-top:0!important;padding-bottom:0!important}.mvn{margin-top:0!important;margin-bottom:0!important}.pvs{padding-top:5px!important;padding-bottom:5px!important}.mvs{margin-top:5px!important;margin-bottom:5px!important}.pvm{padding-top:10px!important;padding-bottom:10px!important}.mvm{margin-top:10px!important;margin-bottom:10px!important}.pvl{padding-top:21px!important;padding-bottom:21px!important}.mvl{margin-top:21px!important;margin-bottom:21px!important}.phn{padding-left:0!important;padding-right:0!important}.mhn{margin-left:0!important;margin-right:0!important}.phs{padding-left:5px!important;padding-right:5px!important}.mhs{margin-left:5px!important;margin-right:5px!important}.phm{padding-left:10px!important;padding-right:10px!important}.mhm{margin-left:10px!important;margin-right:10px!important}.phl{padding-left:21px!important;padding-right:21px!important}.mhl{margin-left:21px!important;margin-right:21px!important}.ptn{padding-top:0!important}.mtn{margin-top:0!important}.pts{padding-top:5px!important}.mts{margin-top:5px!important}.ptm{padding-top:10px!important}.mtm{margin-top:10px!important}.ptl{padding-top:21px!important}.mtl{margin-top:21px!important}.prn{padding-right:0!important}.mrn{margin-right:0!important}.prs{padding-right:5px!important}.mrs{margin-right:5px!important}.prm{padding-right:10px!important}.mrm{margin-right:10px!important}.prl{padding-right:21px!important}.mrl{margin-right:21px!important}.pbn{padding-bottom:0!important}.mbn{margin-bottom:0!important}.pbs{padding-bottom:5px!important}.mbs{margin-bottom:5px!important}.pbm{padding-bottom:10px!important}.mbm{margin-bottom:10px!important}.pbl{padding-bottom:21px!important}.mbl{margin-bottom:21px!important}.pln{padding-left:0!important}.mln{margin-left:0!important}.pls{padding-left:5px!important}.mls{margin-left:5px!important}.plm{padding-left:10px!important}.mlm{margin-left:10px!important}.pll{padding-left:21px!important}.mll{margin-left:21px!important}@font-face{font-family:"OpenSans";src:url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Light-webfont.eot");src:url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Light-webfont.eot?#iefix") format("embedded-opentype"),url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Light-webfont.woff") format("woff"),url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Light-webfont.ttf") format("truetype"),url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Light-webfont.svg#OpenSansLight") format("svg");font-weight:300;font-style:normal}@font-face{font-family:"OpenSans";src:url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Regular-webfont.eot");src:url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Regular-webfont.eot?#iefix") format("embedded-opentype"),url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Regular-webfont.woff") format("woff"),url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Regular-webfont.ttf") format("truetype"),url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Regular-webfont.svg#OpenSansRegular") format("svg");font-weight:400;font-style:normal}@font-face{font-family:"OpenSans";src:url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Bold-webfont.eot");src:url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Bold-webfont.eot?#iefix") format("embedded-opentype"),url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Bold-webfont.woff") format("woff"),url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Bold-webfont.ttf") format("truetype"),url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Bold-webfont.svg#OpenSansBold") format("svg");font-weight:600;font-style:normal}body{font-size:14px;font-size:.875rem;line-height:1.5em;color:#222}body,input,select,textarea,button{font-family:OpenSans,sans-serif}h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6{font-weight:300;font-style:normal}h1,.h1{font-size:36px;font-size:2.25rem;line-height:1.3;margin:5px 0;font-weight:bold}h2,.h2{font-size:28px;font-size:1.75rem;line-height:1.4;margin:5px 0}h3,.h3{font-size:24px;font-size:1.5rem;line-height:1.4;margin:5px 0}h4,.h4{font-size:20px;font-size:1.25rem;line-height:1.4;margin:5px 0}h5,.h5{font-size:16px;font-size:1rem;line-height:1.5;margin:5px 0;font-weight:bold}h6,.h6{font-size:14px;font-size:.875rem;line-height:1.5;margin:5px 0;font-weight:bold}.h7{font-size:12px;font-size:.75rem;line-height:1.6;margin:5px 0}.headingDoubleSuper{display:block;clear:both;min-width:10px}.headingDoubleSub{font-size:14px;font-size:.875rem;display:block;float:left;font-weight:normal;line-height:1.5}.headingDoubleInline{display:inline-block}pre,code{font-family:Menlo,Consolas,Monaco,"Lucida Console",monospace}.typeWarning{color:#cc2114}.typeHighlight{color:#5eab1f}.typeLowlight{color:#999}.typeReversed1{color:white}.typeReversed2{color:#eff6e9}.typeDeemphasize{font-weight:300!important}.typeWeightNormal{font-weight:normal!important}.typeEmphasize{font-weight:bold!important}.cols1{width:4.16667%!important;*width:2.30496%!important}.cols2{width:8.33333%!important;*width:6.47163%!important}.cols3{width:12.5%!important;*width:10.6383%!important}.cols4{width:16.66667%!important;*width:14.80496%!important}.cols5{width:20.83333%!important;*width:18.97163%!important}.cols6{width:25%!important;*width:23.1383%!important}.cols7{width:29.16667%!important;*width:27.30496%!important}.cols8{width:33.33333%!important;*width:31.47163%!important}.cols9{width:37.5%!important;*width:35.6383%!important}.cols10{width:41.66667%!important;*width:39.80496%!important}.cols11{width:45.83333%!important;*width:43.97163%!important}.cols12{width:50%!important;*width:48.1383%!important}.cols13{width:54.16667%!important;*width:52.30496%!important}.cols14{width:58.33333%!important;*width:56.47163%!important}.cols15{width:62.5%!important;*width:60.6383%!important}.cols16{width:66.66667%!important;*width:64.80496%!important}.cols17{width:70.83333%!important;*width:68.97163%!important}.cols18{width:75%!important;*width:73.1383%!important}.cols19{width:79.16667%!important;*width:77.30496%!important}.cols20{width:83.33333%!important;*width:81.47163%!important}.cols21{width:87.5%!important;*width:85.6383%!important}.cols22{width:91.66667%!important;*width:89.80496%!important}.cols23{width:95.83333%!important;*width:93.97163%!important}.cols24{width:100%!important;*width:98.1383%!important}.line{margin-left:-21px}.line .col{min-height:1px;float:left;zoom:1;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding-left:21px}.line .colExt{float:right;zoom:1;padding:0 0 0 21px}.line .lastCol{float:none;*display:block;*width:auto!important;*zoom:1}.line .col:last-child{display:table-cell;float:none;vertical-align:top;width:10000px!important}a,a:hover,a:focus,.linkLowlight{text-decoration:none}a{color:#1885f0}a:hover,a:focus{color:#5eab1f}.linkLowlight{color:#999}.linkLowlight:hover,.linkLowlight:focus{color:#5eab1f}.linkForward:after{margin-left:.35714em;content:"\00BB"}.linkBack:before{margin-right:.35714em;content:"\00AB"}.backgroundBasic{background-color:white}.backgroundLowlight{background-color:#f9f9f9}.backgroundHighlight{background-color:#5eab1f}.backgroundInverse{background-color:#222}.box{position:relative}.box .boxHead,.box .boxFoot{padding:0;margin:0 21px}.box .boxBody{padding:0 21px 1px}.boxHighlight{border:1px solid #e9e9e9;-webkit-border-radius:6px;-moz-border-radius:6px;-ms-border-radius:6px;-o-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 0 5px rgba(0,0,0,0.17);-moz-box-shadow:0 0 5px rgba(0,0,0,0.17);box-shadow:0 0 5px rgba(0,0,0,0.17)}.boxBasic{border:1px solid #e9e9e9;-webkit-border-radius:6px;-moz-border-radius:6px;-ms-border-radius:6px;-o-border-radius:6px;border-radius:6px}.boxHeadBasic{border-bottom:solid 1px #e9e9e9}.boxFootBasic{border-top:solid 1px #e9e9e9}.boxClose{border:0;position:absolute;cursor:pointer;background-color:transparent}.boxClose{top:3px;right:6px;width:20px;height:20px;text-align:center;color:#999;font-size:14px;font-size:.875rem}.boxClose:hover,.boxClose:focus{color:#222}ol,ul{list-style-type:none}ol>li,ul>li{margin:.2em 0}.listBordered>li,.listBorderedHover>li{padding:10px;border-top:1px solid #e9e9e9}.listBordered>li:first-child,.listBorderedHover>li:first-child{border-top:1px solid transparent}.listBorderedHover>li{margin:0}.listBorderedHover>li:hover{background-color:#f9f9f9}.listInline>li{vertical-align:middle;padding-right:10px}.lvn>li{padding-top:0;padding-bottom:0}.lvs>li{padding-top:5px;padding-bottom:5px}.lvm>li{padding-top:10px;padding-bottom:10px}.lvl>li{padding-top:21px;padding-bottom:21px}.lhn>li{padding-left:0;padding-right:0}.lhs>li{padding-left:5px;padding-right:5px}.lhm>li{padding-left:10px;padding-right:10px}.lhl>li{padding-left:21px;padding-right:21px}.toggle{position:relative;cursor:pointer}.toggleArrow .before,.toggleArrow:before{content:"\25BA";display:inline-block;width:1.3em;font-size:.9em;text-align:center}.toggleArrowActive:before{content:"\25BC"}.toggleArrow:hover .before{text-decoration:none}.toggleArrow .active,.toggleActive .inactive{display:none}.toggleActive .active{display:inline-block}.toggleActive .inactive{display:none}.frameThumb,.frameSmall,.frameStandard,.frameStacked{display:inline-block;*display:inline;*zoom:1;*border:1px solid #e9e9e9;-webkit-box-shadow:0 0 1px 1px rgba(0,0,0,0.2);-moz-box-shadow:0 0 1px 1px rgba(0,0,0,0.2);box-shadow:0 0 1px 1px rgba(0,0,0,0.2)}.frameThumb img,.frameSmall img,.frameStandard img,.frameStacked img{display:block}.frameThumb .polaroid,.frameSmall .polaroid,.frameStandard .polaroid,.frameStacked .polaroid{margin-top:5px}.frameThumb{padding:2px}.frameSmall{padding:6px}.frameStandard{padding:8px}.frameStacked{padding:8px;position:relative;background-color:#fff}.frameStacked:before,.frameStacked:after{-webkit-box-shadow:0 0 1px 1px rgba(0,0,0,0.2);-moz-box-shadow:0 0 1px 1px rgba(0,0,0,0.2);box-shadow:0 0 1px 1px rgba(0,0,0,0.2);width:100%;height:100%;position:absolute;z-index:-999;content:"";background-color:#f9f9f9}.frameStacked:before{left:5px;top:0;-webkit-transform:rotate(1deg);-moz-transform:rotate(1deg);-ms-transform:rotate(1deg);-o-transform:rotate(1deg);transform:rotate(1deg)}.frameStacked:after{right:5px;top:0;-webkit-transform:rotate(-1deg);-moz-transform:rotate(-1deg);-ms-transform:rotate(-1deg);-o-transform:rotate(-1deg);transform:rotate(-1deg)}.badgeStandard,.badgePrimary,.badgeSecondary,.badgeTertiary{-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;border-radius:3px;font-size:12px;font-size:.75rem;padding:.35714em .42857em .21429em;display:inline-block;color:white;line-height:1;text-transform:uppercase}.badgeStandard{background-color:#999}.badgePrimary{background-color:#ff5c00}.badgeSecondary{background-color:#5eab1f}.badgeTertiary{background-color:#cc2114}button{background:0;border:0}.btn{padding:.5em 1em;margin:0;display:inline-block;font-weight:normal;line-height:normal;font-size:14px;font-size:.875rem;text-decoration:none;cursor:pointer;border:0;background:0;text-align:center;border:1px solid #ccc;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;-o-border-radius:4px;border-radius:4px}.btnSml{font-size:12px;font-size:.75rem;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;-o-border-radius:4px;border-radius:4px}.btnLrg{font-size:16px;font-size:1rem;line-height:1.6;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;-o-border-radius:4px;border-radius:4px}.btnFullWidth{width:100%}.btnDefault,a.btnDefault{border:1px #d7d7d7 solid;background:#f3f3f3;color:#222;text-shadow:0 1px 0 white;-webkit-box-shadow:0 1px 0 #ccc;-moz-box-shadow:0 1px 0 #ccc;box-shadow:0 1px 0 #ccc}.btnDefault:hover,.btnDefault:focus{background:#f6f6f6}.btnDefault:active{position:relative;top:1px;-webkit-box-shadow:inset 0 3px 7px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.05);-moz-box-shadow:inset 0 3px 7px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.05);box-shadow:inset 0 3px 7px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.05)}.btnPrimary,a.btnPrimary,.btnDanger,a.btnDanger{color:white;text-shadow:0}.btnPrimary,a.btnPrimary{border:1px #d14b00 solid;background:#ff5c00;-webkit-box-shadow:0 1px 0 #d35500;-moz-box-shadow:0 1px 0 #d35500;box-shadow:0 1px 0 #d35500}.btnPrimary:hover,.btnPrimary:focus{background:#ff660f}.btnPrimary:active{position:relative;top:1px;-webkit-box-shadow:inset 0 3px 7px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.05);-moz-box-shadow:inset 0 3px 7px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.05);box-shadow:inset 0 3px 7px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.05)}.btnDanger,a.btnDanger{border:1px #a21a10 solid;background:#cc2114;-webkit-box-shadow:0 1px 0 #d35500;-moz-box-shadow:0 1px 0 #d35500;box-shadow:0 1px 0 #d35500}.btnDanger:hover,.btnDanger:focus{background:#da2315}.btnDanger:active{position:relative;top:1px;-webkit-box-shadow:inset 0 3px 7px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.05);-moz-box-shadow:inset 0 3px 7px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.05);box-shadow:inset 0 3px 7px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.05)}.btn[disabled],.btn[disabled]:hover,.btn[disabled]:focus .btn[disabled]:active,.btnDisabled,a.btnDisabled,.btnDisabled:hover,.btnDisabled:focus,.btnDisabled:active{border:0;background:#ccc;color:#999;text-shadow:0;cursor:default}.btn[disabled]:active,.btnDisabled:active{position:static;color:#999;box-shadow:none}.btnLink{color:#1885f0;border:1px solid transparent}.btnLink:hover,.btnLink:focus{color:#5eab1f}.table{width:100%}.table thead th{font-weight:bold;color:#222}.table th,.table td{padding:8px}.tableBasic th,.tableBasic td{border:1px solid #e9e9e9}.tan td,.tan th{padding:0}.tas td,.tas th{padding:5px}.tam td,.tam th{padding:10px}.tal td,.tal th{padding:21px}.tvn td,.tvn th{padding-top:0;padding-bottom:0}.tvs td,.tvs th{padding-top:5px;padding-bottom:5px}.tvm td,.tvm th{padding-top:10px;padding-bottom:10px}.tvl td,.tvl th{padding-top:21px;padding-bottom:21px}.thn td,.thn th{padding-left:0;padding-right:0}.ths td,.ths th{padding-left:5px;padding-right:5px}.thm td,.thm th{padding-left:10px;padding-right:10px}.thl td,.thl th{padding-left:21px;padding-right:21px}body{background:white}.content>section,.container{width:1128px;margin:0 auto}.main[role="main"]{position:relative;top:-10px}.content>section,.content .container{margin-top:0}.skipLink:focus{width:100%;padding:5px 0;display:block;position:absolute;z-index:100;text-indent:5px;color:#fff;background:#5eab1f}.header{padding-bottom:15px;*position:relative;*z-index:100;background:white;border-bottom:1px solid #ccc}.headerSubSection{margin:1px 0;font-size:11px;font-size:.6875rem;text-align:right;line-height:1}.headerSubSection a{color:#222}.headerSubSection .highlight{display:inline-block;padding:2px 10px;color:#fff;-webkit-border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;-ms-border-radius:5px 5px 0 0;-o-border-radius:5px 5px 0 0;border-radius:5px 5px 0 0;background:#888}.headerSubSection .listInline{margin:0}.headerMainSection{position:relative}.headerMainSection .logo{position:absolute;left:0;top:-1px}.menuWrap{margin-left:97px}.content{padding-top:5px}.content>section{margin-top:5px}.sideBar{width:185px;margin-right:20px;float:left}.main{float:none;*display:block;*width:auto;*zoom:1}.aside{width:300px;margin-left:20px;float:right}.footer{clear:both;margin-top:40px;font-size:12px;font-size:.75rem}.footerBox{border-top:5px solid #5eab1f}.footerBox .boxBody{margin:10px 0}.footerGroup a{color:#222}.footerGroup a:hover,.footerGroup a:focus{color:#5eab1f;text-decoration:underline}.footerCol{width:125px}.footerGroupHeading{float:left}.footerGroupHeading{width:120px;margin:0;clear:right;font-weight:bold}.footerGroupList{margin:0}.footerGroupList>li{margin:0}.footerDisclaimer{float:left}.footerNoteAside{float:right}
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width">
|
|
6
|
+
|
|
7
|
+
<title>My Style Guide <%= title %></title>
|
|
8
|
+
|
|
9
|
+
<!-- Styleguide CSS -->
|
|
10
|
+
<link rel="stylesheet" href="static/css/doc.css">
|
|
11
|
+
<link rel="stylesheet" href="static/css/github.css">
|
|
12
|
+
|
|
13
|
+
<!-- CSS to be documented -->
|
|
14
|
+
<link rel="stylesheet" href="extra/css/screen.css">
|
|
15
|
+
</head>
|
|
16
|
+
|
|
17
|
+
<body>
|
|
18
|
+
<header class="header pbn" role="banner">
|
|
19
|
+
<div class="backgroundHighlight typeReversed1">
|
|
20
|
+
<div class="container">
|
|
21
|
+
<h1 class="h2 mvs">My Style Guide</h1>
|
|
22
|
+
</div>
|
|
23
|
+
</div>
|
|
24
|
+
<div class="backgroundLowlight typeReversed1">
|
|
25
|
+
<div class="container">
|
|
26
|
+
<span>
|
|
27
|
+
<ul class="docNav listInline">
|
|
28
|
+
<!-- Add you pages here -->
|
|
29
|
+
<li><a href="index.html">Intro</a></li>
|
|
30
|
+
<li><a href="base_css.html">Base CSS</a></li>
|
|
31
|
+
</ul>
|
|
32
|
+
</span>
|
|
33
|
+
</div>
|
|
34
|
+
</div>
|
|
35
|
+
<!-- //header/container -->
|
|
36
|
+
</header>
|
|
37
|
+
|
|
38
|
+
<div class="content">
|
|
39
|
+
<section>
|
|
40
|
+
<div class="line">
|
|
41
|
+
|
|
42
|
+
<div class="col cols4">
|
|
43
|
+
<div class="componentMenu box boxBasic backgroundBasic">
|
|
44
|
+
<div class="boxBody pan">
|
|
45
|
+
<ul class="componentList listBorderedHover">
|
|
46
|
+
<% @blocks.each do |block| %>
|
|
47
|
+
<li><a href="#<%= block[:name] %>"><%= block[:title] %></a></li>
|
|
48
|
+
<% end %>
|
|
49
|
+
</ul>
|
|
50
|
+
</div>
|
|
51
|
+
</div>
|
|
52
|
+
</div>
|
|
53
|
+
|
|
54
|
+
<div class="main col cols20 lastCol">
|
|
55
|
+
|
|
56
|
+
|
|
57
|
+
|
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
.container {
|
|
2
|
+
max-width: 1128px;
|
|
3
|
+
width: auto;
|
|
4
|
+
margin: 0 auto;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
.content {
|
|
8
|
+
margin-top: 5px;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
.main > h1 {
|
|
13
|
+
margin-top: 30px;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.main > h1:first-child {
|
|
17
|
+
margin-top: 0;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
footer {
|
|
21
|
+
margin-top: 20px;
|
|
22
|
+
text-align: center;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
.componentMenu {
|
|
27
|
+
max-height: 535px;
|
|
28
|
+
width: 175px;
|
|
29
|
+
overflow-y: auto;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
blockquote:before {
|
|
33
|
+
content: "Design Note:";
|
|
34
|
+
font-weight: bold;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
blockquote {
|
|
38
|
+
border: 1px solid #eee;
|
|
39
|
+
border-radius: 4px;
|
|
40
|
+
font-family: "Comic Sans MS";
|
|
41
|
+
font-size:16px;
|
|
42
|
+
margin: 10px 0;
|
|
43
|
+
padding: 5px;
|
|
44
|
+
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
code {
|
|
49
|
+
padding: 2px 4px;
|
|
50
|
+
color: #d14;
|
|
51
|
+
white-space: nowrap;
|
|
52
|
+
background-color: #f9f9f9;
|
|
53
|
+
border: 1px solid #ccc;
|
|
54
|
+
border-radius: 4px;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
div.codeExample, div.jsExample {
|
|
58
|
+
border: 1px solid #ccc;
|
|
59
|
+
border-radius: 4px;
|
|
60
|
+
margin: 10px 0;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
div.jsExample {
|
|
64
|
+
border-top: 0px;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
div.codeExample:before, div.jsExample:before {
|
|
68
|
+
font-family: "OpenSans", sans-serif;
|
|
69
|
+
color: #222;
|
|
70
|
+
border: 1px solid #ccc;
|
|
71
|
+
border-radius: 4px;
|
|
72
|
+
border-bottom-left-radius: 0;
|
|
73
|
+
border-top-right-radius: 0;
|
|
74
|
+
position: relative;
|
|
75
|
+
padding: 2px;
|
|
76
|
+
display: block;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
div.codeExample:before {
|
|
80
|
+
content: "Example";
|
|
81
|
+
background-color: #f9f9f9;
|
|
82
|
+
width: 60px;
|
|
83
|
+
top: -1px;
|
|
84
|
+
left: -1px;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
div.jsExample:before {
|
|
88
|
+
content: "JS Example";
|
|
89
|
+
background-color: #fff;
|
|
90
|
+
width: 80px;
|
|
91
|
+
top: -11px;
|
|
92
|
+
left: -11px;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
div.codeBlock, div.exampleOutput {
|
|
96
|
+
padding: 10px;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
div.codeBlock {
|
|
100
|
+
background-color: #f9f9f9;
|
|
101
|
+
border-top: 1px solid #ccc;
|
|
102
|
+
border-bottom-left-radius: 4px;
|
|
103
|
+
border-bottom-right-radius: 4px;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.docSwatch {
|
|
107
|
+
min-height: 218.21px;
|
|
108
|
+
border: 1px solid #ccc;
|
|
109
|
+
padding: 10px 0 0 10px;
|
|
110
|
+
font-size: 12px;
|
|
111
|
+
margin-bottom: 5px;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.codeExample .line > div:after {
|
|
115
|
+
content: attr(class);
|
|
116
|
+
display: block;
|
|
117
|
+
min-height: 40px;
|
|
118
|
+
line-height: 40px;
|
|
119
|
+
background-color: #EEE;
|
|
120
|
+
text-align: center;
|
|
121
|
+
border-radius: 3px;
|
|
122
|
+
font-size: 12px;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
table, table tr, table td, table th {
|
|
126
|
+
padding: 7px;
|
|
127
|
+
border: 1px solid #ccc;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
table th {
|
|
131
|
+
font-weight: bold;
|
|
132
|
+
}
|