style-guide 0.2.1 → 0.3.0
Sign up to get free protection for your applications and to get access to all the features.
- data/Gemfile.lock +3 -2
- data/app/assets/stylesheets/style_guide/example.css +55 -6
- data/app/assets/stylesheets/style_guide/header.css +5 -5
- data/app/assets/stylesheets/style_guide/layout.css +3 -33
- data/app/assets/stylesheets/style_guide/navbar.css +25 -22
- data/app/assets/stylesheets/style_guide/sidebar.css +2 -0
- data/app/views/layouts/style_guide/application.html.erb +1 -1
- data/app/views/style_guide/{partials/_button_disabled_state.erb → bootstrap_base/_button:_disabled_anchor.erb} +0 -0
- data/app/views/style_guide/{partials/_button_element.erb → bootstrap_base/_button:_disabled_element.erb} +0 -0
- data/app/views/style_guide/{partials → bootstrap_base}/_button_sizes.erb +0 -0
- data/app/views/style_guide/{partials/_buttons.erb → bootstrap_base/_button_types.erb} +0 -0
- data/app/views/style_guide/bootstrap_base/_code:_blocks.erb +8 -0
- data/app/views/style_guide/{partials/_code_inline.erb → bootstrap_base/_code:_inline.erb} +0 -0
- data/app/views/style_guide/bootstrap_base/_form_controls:_checkbox_and_radio.erb +13 -0
- data/app/views/style_guide/bootstrap_base/_form_controls:_input.erb +1 -0
- data/app/views/style_guide/bootstrap_base/_form_controls:_select.erb +15 -0
- data/app/views/style_guide/bootstrap_base/_form_controls:_textarea.erb +1 -0
- data/app/views/style_guide/bootstrap_base/_forms:_default_styles.erb +12 -0
- data/app/views/style_guide/bootstrap_base/_forms:_horizontal.erb +22 -0
- data/app/views/style_guide/bootstrap_base/_forms:_inline.erb +8 -0
- data/app/views/style_guide/bootstrap_base/_forms:_search.erb +4 -0
- data/app/views/style_guide/bootstrap_base/_images.erb +136 -0
- data/app/views/style_guide/{partials → bootstrap_base}/_tables.erb +0 -0
- data/app/views/style_guide/{partials → bootstrap_base}/_typography.erb +0 -0
- data/app/views/style_guide/style/_example.erb +10 -0
- data/app/views/style_guide/style/show.html.erb +1 -6
- data/config/locales/en.yml +57 -0
- data/lib/style_guide/config.rb +1 -1
- data/lib/style_guide/engine.rb +2 -0
- data/lib/style_guide/section.rb +1 -1
- data/lib/style_guide/version.rb +1 -1
- data/spec/dummy/app/assets/stylesheets/application.css +0 -37
- data/spec/dummy/app/assets/stylesheets/swatches.css +26 -1
- data/spec/dummy/app/assets/stylesheets/three_dee.css +4 -0
- data/spec/dummy/app/views/styles/_00swatches.erb +8 -8
- data/spec/dummy/app/views/styles/_three_dee.erb +1 -0
- data/spec/dummy/config/locales/en.yml +6 -4
- data/spec/lib/style_guide/config_spec.rb +1 -1
- data/spec/lib/style_guide/section_spec.rb +3 -3
- data/style-guide.gemspec +1 -0
- metadata +41 -16
- data/app/assets/stylesheets/docs.css +0 -153
- data/app/assets/stylesheets/responsive.css +0 -164
- data/app/views/style_guide/partials/_code_blocks.erb +0 -12
- data/app/views/style_guide/partials/_forms.erb +0 -714
- data/app/views/style_guide/partials/_images.erb +0 -318
- data/spec/dummy/app/views/styles/_info-header.erb +0 -1
data/Gemfile.lock
CHANGED
@@ -1,7 +1,8 @@
|
|
1
1
|
PATH
|
2
2
|
remote: .
|
3
3
|
specs:
|
4
|
-
style-guide (0.
|
4
|
+
style-guide (0.3.0)
|
5
|
+
i18n
|
5
6
|
jquery-rails
|
6
7
|
rails
|
7
8
|
|
@@ -59,7 +60,7 @@ GEM
|
|
59
60
|
em-websocket (>= 0.2.0)
|
60
61
|
guard (>= 1.5.0)
|
61
62
|
multi_json (~> 1.0)
|
62
|
-
guard-rspec (2.3.
|
63
|
+
guard-rspec (2.3.1)
|
63
64
|
guard (>= 1.1)
|
64
65
|
rspec (~> 2.11)
|
65
66
|
hike (1.2.1)
|
@@ -1,20 +1,69 @@
|
|
1
1
|
.style-guide-partial {
|
2
|
+
padding-top: 30px;
|
3
|
+
background-color: white;
|
4
|
+
margin: 10px 0;
|
5
|
+
padding: 10px;
|
6
|
+
}
|
7
|
+
|
8
|
+
.style-guide-example-header {
|
9
|
+
font-weight:100;
|
10
|
+
color: #888;
|
11
|
+
font-size: 24px;
|
12
|
+
line-height: 40px;
|
13
|
+
margin-top: 0;
|
14
|
+
margin-bottom: 20px;
|
15
|
+
border-bottom: 1px solid #ddd;
|
16
|
+
}
|
17
|
+
|
18
|
+
.style-guide-example-description {
|
19
|
+
margin-bottom: 15px;
|
20
|
+
color: #5D5C5C;
|
21
|
+
}
|
22
|
+
|
23
|
+
.style-guide-example-description code {
|
24
|
+
white-space: nowrap;
|
25
|
+
color: #d14;
|
26
|
+
background-color: #f5f5f5;
|
27
|
+
padding: 2px 4px;
|
28
|
+
border: 1px solid #ddd;
|
29
|
+
font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
|
30
|
+
-webkit-border-radius: 0;
|
31
|
+
-moz-border-radius: 0;
|
32
|
+
border-radius: 0;
|
33
|
+
}
|
34
|
+
|
35
|
+
.style-guide-example {
|
2
36
|
position: relative;
|
3
|
-
padding:
|
4
|
-
|
37
|
+
padding: 10px 20px;
|
38
|
+
padding-top: 32px;
|
5
39
|
background-color: #fff;
|
6
|
-
border: 1px solid #
|
40
|
+
border: 1px solid #f5f5f5;
|
41
|
+
overflow: hidden;
|
7
42
|
}
|
8
43
|
|
9
|
-
.style-guide-
|
44
|
+
.style-guide-example:after {
|
10
45
|
content: "Example";
|
11
46
|
position: absolute;
|
12
47
|
top: -1px;
|
13
48
|
left: -1px;
|
14
|
-
padding:
|
15
|
-
font-size:
|
49
|
+
padding: 0 5px;
|
50
|
+
font-size: 11px;
|
51
|
+
line-height: 18px;
|
52
|
+
height: 18px;
|
16
53
|
font-weight: 100;
|
17
54
|
background-color: #f5f5f5;
|
18
55
|
border: 1px solid #ddd;
|
19
56
|
color: #888;
|
57
|
+
opacity: 0.75;
|
58
|
+
}
|
59
|
+
|
60
|
+
.style-guide-partial .style-guide-example-source {
|
61
|
+
margin-top: 0;
|
62
|
+
padding: 10px 20px;
|
63
|
+
background: #f5f5f5;
|
64
|
+
border-color: #ddd;
|
65
|
+
overflow-x: scroll;
|
66
|
+
-webkit-border-radius: 0;
|
67
|
+
-moz-border-radius: 0;
|
68
|
+
border-radius: 0;
|
20
69
|
}
|
@@ -1,12 +1,13 @@
|
|
1
1
|
.style-guide-header {
|
2
|
-
padding: 40px 0;
|
2
|
+
padding: 60px 0 40px 0;
|
3
3
|
color: white;
|
4
4
|
text-align: center;
|
5
5
|
text-shadow: 0 1px 3px rgba(0,0,0,.3), 0 0 20px rgba(0,0,0,.075);
|
6
6
|
background: #f5f5f5;
|
7
|
-
|
8
|
-
|
9
|
-
|
7
|
+
overflow: hidden;
|
8
|
+
-webkit-box-shadow: inset 0 0 10px rgba(0,0,0,.1);
|
9
|
+
-moz-box-shadow: inset 0 0 10px rgba(0,0,0,.1);
|
10
|
+
box-shadow: inset 0 0 10px rgba(0,0,0,.1);
|
10
11
|
}
|
11
12
|
|
12
13
|
.style-guide-header h1 {
|
@@ -20,7 +21,6 @@
|
|
20
21
|
@media (min-width: 480px) {
|
21
22
|
.style-guide-header h1 {
|
22
23
|
text-align: left;
|
23
|
-
text-indent: 60px;
|
24
24
|
}
|
25
25
|
}
|
26
26
|
|
@@ -1,6 +1,7 @@
|
|
1
1
|
body {
|
2
2
|
position: relative;
|
3
|
-
padding:
|
3
|
+
padding: 0;
|
4
|
+
margin: 0;
|
4
5
|
font-family: "ars-maquette-web";
|
5
6
|
}
|
6
7
|
|
@@ -9,37 +10,6 @@ body {
|
|
9
10
|
margin: 0 auto;
|
10
11
|
}
|
11
12
|
|
12
|
-
section {
|
13
|
-
padding-top: 30px;
|
14
|
-
background-color: white;
|
15
|
-
margin: 10px 0;
|
16
|
-
padding: 10px;
|
17
|
-
}
|
18
|
-
|
19
|
-
section h1 {
|
20
|
-
font-weight:100;
|
21
|
-
color: #888;
|
22
|
-
font-size: 24px;
|
23
|
-
line-height: 40px;
|
24
|
-
margin-top: 0;
|
25
|
-
margin-bottom: 20px;
|
26
|
-
border-bottom: 1px solid #ddd;
|
27
|
-
}
|
28
|
-
|
29
|
-
section > ul li {
|
30
|
-
margin-bottom: 5px;
|
31
|
-
}
|
32
|
-
|
33
|
-
hr.soften {
|
34
|
-
height: 1px;
|
35
|
-
margin: 70px 0;
|
36
|
-
background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
|
37
|
-
background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
|
38
|
-
background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
|
39
|
-
background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
|
40
|
-
border: 0;
|
41
|
-
}
|
42
|
-
|
43
13
|
@media (min-width: 480px) {
|
44
14
|
.style-guide-content .style-guide-sidebar {
|
45
15
|
width: 288px;
|
@@ -62,7 +32,7 @@ hr.soften {
|
|
62
32
|
}
|
63
33
|
|
64
34
|
.style-guide-content .style-guide-sections {
|
65
|
-
width:
|
35
|
+
width: 672px;
|
66
36
|
margin-left: 288px;
|
67
37
|
float: left;
|
68
38
|
}
|
@@ -1,7 +1,3 @@
|
|
1
|
-
|
2
|
-
/* Tweak navbar brand link to be super sleek
|
3
|
-
-------------------------------------------------- */
|
4
|
-
|
5
1
|
.style-guide-bar {
|
6
2
|
font-size: 13px;
|
7
3
|
position: absolute;
|
@@ -23,34 +19,33 @@
|
|
23
19
|
}
|
24
20
|
|
25
21
|
.style-guide-bar a {
|
26
|
-
color:
|
22
|
+
color: #888;
|
23
|
+
text-decoration: none;
|
27
24
|
}
|
28
25
|
|
29
26
|
.style-guide-bar a.brand {
|
30
|
-
|
31
|
-
text-shadow: 0
|
32
|
-
line-height: 20px;
|
33
|
-
font-size: 20px;
|
34
|
-
height: 20px;
|
27
|
+
color: #ddd;
|
28
|
+
text-shadow: 0 0 10px rgba(0,0,0,.05);
|
35
29
|
}
|
36
30
|
|
37
31
|
.style-guide-bar a.brand,
|
38
32
|
.style-guide-bar label {
|
39
33
|
display: block;
|
40
|
-
|
34
|
+
height: 20px;
|
35
|
+
font-size: 20px;
|
36
|
+
line-height: 20px;
|
37
|
+
font-weight: normal;
|
41
38
|
margin: 5px 10px;
|
42
39
|
padding: 5px 10px;
|
43
|
-
font-weight: bold;
|
44
40
|
}
|
45
41
|
|
46
42
|
.style-guide-bar label {
|
47
|
-
line-height: 16px;
|
48
|
-
font-size: 16px;
|
49
|
-
height: 16px;
|
50
|
-
float: right;
|
51
43
|
color: #888;
|
44
|
+
position: absolute;
|
45
|
+
top: 0;
|
46
|
+
right: 0;
|
52
47
|
cursor: pointer;
|
53
|
-
|
48
|
+
text-shadow: 0 -1px 0 rgba(0,0,0,.1), 0 1px 0 rgba(255, 255, 255, 0.9);
|
54
49
|
-webkit-user-select: none;
|
55
50
|
-moz-user-select: -moz-none;
|
56
51
|
-khtml-user-select: none;
|
@@ -72,18 +67,27 @@
|
|
72
67
|
background: #ddd;
|
73
68
|
clear: both;
|
74
69
|
margin: 0;
|
75
|
-
|
70
|
+
padding: 0;
|
76
71
|
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1), 0 3px 3px rgba(0, 0, 0, .15);
|
77
72
|
-moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1), 0 3px 3px rgba(0, 0, 0, .15);
|
78
73
|
box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1), 0 3px 3px rgba(0, 0, 0, .15);
|
79
74
|
}
|
80
75
|
|
81
76
|
.style-guide-bar li {
|
82
|
-
|
83
|
-
margin: 5px 0;
|
77
|
+
margin: 10px 0;
|
84
78
|
font-size: 14px;
|
85
79
|
}
|
86
80
|
|
81
|
+
.style-guide-bar li a {
|
82
|
+
padding: 2px 5px;
|
83
|
+
}
|
84
|
+
|
85
|
+
.style-guide-bar .active a,
|
86
|
+
.style-guide-bar li a:hover {
|
87
|
+
background-color: #888;
|
88
|
+
color: #f5f5f5;
|
89
|
+
}
|
90
|
+
|
87
91
|
@media (min-width: 480px) {
|
88
92
|
.style-guide-bar label {
|
89
93
|
display: none;
|
@@ -99,7 +103,6 @@
|
|
99
103
|
|
100
104
|
.style-guide-bar ul {
|
101
105
|
margin: 0;
|
102
|
-
|
103
106
|
height: auto;
|
104
107
|
clear: none;
|
105
108
|
background: transparent;
|
@@ -111,7 +114,7 @@
|
|
111
114
|
.style-guide-bar li {
|
112
115
|
display: inline-block;
|
113
116
|
margin: 0;
|
114
|
-
padding:0;
|
117
|
+
padding: 0;
|
115
118
|
}
|
116
119
|
|
117
120
|
.style-guide-bar li a {
|
@@ -3,6 +3,7 @@
|
|
3
3
|
}
|
4
4
|
|
5
5
|
.style-guide-sidebar ul {
|
6
|
+
list-style: none;
|
6
7
|
padding: 0;
|
7
8
|
margin: 30px 20px;
|
8
9
|
border: 1px solid #ddd;
|
@@ -26,6 +27,7 @@
|
|
26
27
|
}
|
27
28
|
|
28
29
|
.style-guide-sidebar a i {
|
30
|
+
font-style: normal;
|
29
31
|
float: right;
|
30
32
|
font-size: 30px;
|
31
33
|
line-height: 18px;
|
@@ -17,7 +17,7 @@
|
|
17
17
|
<label for="style-guide-checkbox">Sections</label>
|
18
18
|
<a class="brand" href="/">Style Guide</a>
|
19
19
|
<input id="style-guide-checkbox" type="checkbox" />
|
20
|
-
<ul
|
20
|
+
<ul>
|
21
21
|
<% @sections.each_with_index do |section, index| %>
|
22
22
|
<li<%= (section == @active) ? ' class="active"'.html_safe : '' %>>
|
23
23
|
<a href="<%= style_path(section.id) %>"><%= section.title %></a>
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
@@ -0,0 +1,13 @@
|
|
1
|
+
<label class="checkbox">
|
2
|
+
<input type="checkbox" value="">
|
3
|
+
Option one is this and that—be sure to include why it's great
|
4
|
+
</label>
|
5
|
+
|
6
|
+
<label class="radio">
|
7
|
+
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
|
8
|
+
Option one is this and that—be sure to include why it's great
|
9
|
+
</label>
|
10
|
+
<label class="radio">
|
11
|
+
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
|
12
|
+
Option two can be something else and selecting it will deselect option one
|
13
|
+
</label>
|
@@ -0,0 +1 @@
|
|
1
|
+
<input type="text" placeholder="Text input">
|
@@ -0,0 +1,15 @@
|
|
1
|
+
<select>
|
2
|
+
<option>1</option>
|
3
|
+
<option>2</option>
|
4
|
+
<option>3</option>
|
5
|
+
<option>4</option>
|
6
|
+
<option>5</option>
|
7
|
+
</select>
|
8
|
+
|
9
|
+
<select multiple="multiple">
|
10
|
+
<option>1</option>
|
11
|
+
<option>2</option>
|
12
|
+
<option>3</option>
|
13
|
+
<option>4</option>
|
14
|
+
<option>5</option>
|
15
|
+
</select>
|
@@ -0,0 +1 @@
|
|
1
|
+
<textarea rows="3"></textarea>
|
@@ -0,0 +1,12 @@
|
|
1
|
+
<form>
|
2
|
+
<fieldset>
|
3
|
+
<legend>Legend</legend>
|
4
|
+
<label>Label name</label>
|
5
|
+
<input type="text" placeholder="Type something…">
|
6
|
+
<span class="help-block">Example block-level help text here.</span>
|
7
|
+
<label class="checkbox">
|
8
|
+
<input type="checkbox"> Check me out
|
9
|
+
</label>
|
10
|
+
<button type="submit" class="btn">Submit</button>
|
11
|
+
</fieldset>
|
12
|
+
</form>
|
@@ -0,0 +1,22 @@
|
|
1
|
+
<form class="form-horizontal">
|
2
|
+
<div class="control-group">
|
3
|
+
<label class="control-label" for="inputEmail">Email</label>
|
4
|
+
<div class="controls">
|
5
|
+
<input type="text" id="inputEmail" placeholder="Email">
|
6
|
+
</div>
|
7
|
+
</div>
|
8
|
+
<div class="control-group">
|
9
|
+
<label class="control-label" for="inputPassword">Password</label>
|
10
|
+
<div class="controls">
|
11
|
+
<input type="password" id="inputPassword" placeholder="Password">
|
12
|
+
</div>
|
13
|
+
</div>
|
14
|
+
<div class="control-group">
|
15
|
+
<div class="controls">
|
16
|
+
<label class="checkbox">
|
17
|
+
<input type="checkbox"> Remember me
|
18
|
+
</label>
|
19
|
+
<button type="submit" class="btn">Sign in</button>
|
20
|
+
</div>
|
21
|
+
</div>
|
22
|
+
</form>
|
@@ -0,0 +1,8 @@
|
|
1
|
+
<form class="form-inline">
|
2
|
+
<input type="text" class="input-small" placeholder="Email">
|
3
|
+
<input type="password" class="input-small" placeholder="Password">
|
4
|
+
<label class="checkbox">
|
5
|
+
<input type="checkbox"> Remember me
|
6
|
+
</label>
|
7
|
+
<button type="submit" class="btn">Sign in</button>
|
8
|
+
</form>
|
@@ -0,0 +1,136 @@
|
|
1
|
+
|
2
|
+
|
3
|
+
<!-- Images
|
4
|
+
================================================== -->
|
5
|
+
<section id="images">
|
6
|
+
<div class="page-header">
|
7
|
+
<h1>Images</h1>
|
8
|
+
</div>
|
9
|
+
|
10
|
+
<p>Add classes to an <code><img></code> element to easily style images in any project.</p>
|
11
|
+
<div class="bs-docs-example bs-docs-example-images">
|
12
|
+
<img src="http://placehold.it/140x140" class="img-rounded">
|
13
|
+
<img src="http://placehold.it/140x140" class="img-circle">
|
14
|
+
<img src="http://placehold.it/140x140" class="img-polaroid">
|
15
|
+
</div>
|
16
|
+
<pre class="prettyprint linenums">
|
17
|
+
<img src="..." class="img-rounded">
|
18
|
+
<img src="..." class="img-circle">
|
19
|
+
<img src="..." class="img-polaroid">
|
20
|
+
</pre>
|
21
|
+
<p><span class="label label-info">Heads up!</span> <code>.img-rounded</code> and <code>.img-circle</code> do not work in IE7-8 due to lack of <code>border-radius</code> support.</p>
|
22
|
+
|
23
|
+
|
24
|
+
</section>
|
25
|
+
|
26
|
+
|
27
|
+
<h2>Icon examples</h2>
|
28
|
+
<p>Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.</p>
|
29
|
+
|
30
|
+
<h4>Buttons</h4>
|
31
|
+
|
32
|
+
<h5>Button group in a button toolbar</h5>
|
33
|
+
<div class="bs-docs-example">
|
34
|
+
<div class="btn-toolbar">
|
35
|
+
<div class="btn-group">
|
36
|
+
<a class="btn" href="#"><i class="icon-align-left"></i></a>
|
37
|
+
<a class="btn" href="#"><i class="icon-align-center"></i></a>
|
38
|
+
<a class="btn" href="#"><i class="icon-align-right"></i></a>
|
39
|
+
<a class="btn" href="#"><i class="icon-align-justify"></i></a>
|
40
|
+
</div>
|
41
|
+
</div>
|
42
|
+
</div>
|
43
|
+
<pre class="prettyprint linenums">
|
44
|
+
<div class="btn-toolbar">
|
45
|
+
<div class="btn-group">
|
46
|
+
|
47
|
+
<a class="btn" href="#"><i class="icon-align-left"></i></a>
|
48
|
+
<a class="btn" href="#"><i class="icon-align-center"></i></a>
|
49
|
+
<a class="btn" href="#"><i class="icon-align-right"></i></a>
|
50
|
+
<a class="btn" href="#"><i class="icon-align-justify"></i></a>
|
51
|
+
</div>
|
52
|
+
</div>
|
53
|
+
</pre>
|
54
|
+
|
55
|
+
<h5>Dropdown in a button group</h5>
|
56
|
+
<div class="bs-docs-example">
|
57
|
+
<div class="btn-group">
|
58
|
+
<a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a>
|
59
|
+
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
|
60
|
+
<ul class="dropdown-menu">
|
61
|
+
<li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
|
62
|
+
<li><a href="#"><i class="icon-trash"></i> Delete</a></li>
|
63
|
+
<li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
|
64
|
+
<li class="divider"></li>
|
65
|
+
<li><a href="#"><i class="i"></i> Make admin</a></li>
|
66
|
+
</ul>
|
67
|
+
</div>
|
68
|
+
</div>
|
69
|
+
<pre class="prettyprint linenums">
|
70
|
+
<div class="btn-group">
|
71
|
+
<a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a>
|
72
|
+
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
|
73
|
+
<ul class="dropdown-menu">
|
74
|
+
<li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
|
75
|
+
<li><a href="#"><i class="icon-trash"></i> Delete</a></li>
|
76
|
+
<li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
|
77
|
+
<li class="divider"></li>
|
78
|
+
<li><a href="#"><i class="i"></i> Make admin</a></li>
|
79
|
+
</ul>
|
80
|
+
</div>
|
81
|
+
</pre>
|
82
|
+
|
83
|
+
<h5>Small button</h5>
|
84
|
+
<div class="bs-docs-example">
|
85
|
+
<a class="btn btn-small" href="#"><i class="icon-star"></i></a>
|
86
|
+
</div>
|
87
|
+
<pre class="prettyprint linenums">
|
88
|
+
<a class="btn btn-small" href="#"><i class="icon-star"></i></a>
|
89
|
+
</pre>
|
90
|
+
|
91
|
+
|
92
|
+
<h4>Navigation</h4>
|
93
|
+
<div class="bs-docs-example">
|
94
|
+
<div class="well" style="padding: 8px 0; margin-bottom: 0;">
|
95
|
+
<ul class="nav nav-list">
|
96
|
+
<li class="active"><a href="#"><i class="icon-home icon-white"></i> Home</a></li>
|
97
|
+
<li><a href="#"><i class="icon-book"></i> Library</a></li>
|
98
|
+
<li><a href="#"><i class="icon-pencil"></i> Applications</a></li>
|
99
|
+
<li><a href="#"><i class="i"></i> Misc</a></li>
|
100
|
+
</ul>
|
101
|
+
</div>
|
102
|
+
</div>
|
103
|
+
<pre class="prettyprint linenums">
|
104
|
+
<ul class="nav nav-list">
|
105
|
+
<li class="active"><a href="#"><i class="icon-home icon-white"></i> Home</a></li>
|
106
|
+
<li><a href="#"><i class="icon-book"></i> Library</a></li>
|
107
|
+
<li><a href="#"><i class="icon-pencil"></i> Applications</a></li>
|
108
|
+
<li><a href="#"><i class="i"></i> Misc</a></li>
|
109
|
+
</ul>
|
110
|
+
</pre>
|
111
|
+
|
112
|
+
<h4>Form fields</h4>
|
113
|
+
<form class="bs-docs-example form-horizontal">
|
114
|
+
<div class="control-group">
|
115
|
+
<label class="control-label" for="inputIcon">Email address</label>
|
116
|
+
<div class="controls">
|
117
|
+
<div class="input-prepend">
|
118
|
+
<span class="add-on"><i class="icon-envelope"></i></span><input class="span2" id="inputIcon" type="text">
|
119
|
+
</div>
|
120
|
+
</div>
|
121
|
+
</div>
|
122
|
+
</form>
|
123
|
+
<pre class="prettyprint linenums">
|
124
|
+
<div class="control-group">
|
125
|
+
<label class="control-label" for="inputIcon">Email address</label>
|
126
|
+
<div class="controls">
|
127
|
+
<div class="input-prepend">
|
128
|
+
<span class="add-on"><i class="icon-envelope"></i></span>
|
129
|
+
<input class="span2" id="inputIcon" type="text">
|
130
|
+
</div>
|
131
|
+
</div>
|
132
|
+
</div>
|
133
|
+
</pre>
|
134
|
+
|
135
|
+
</section>
|
136
|
+
|