hologram 0.6.0 → 1.0.0
Sign up to get free protection for your applications and to get access to all the features.
- 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
|
+
}
|