uniform-ui 0.5.1 → 0.6
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/index.html +900 -389
- data/preview/_buttons.html.erb +59 -0
- data/preview/_cards.html.erb +82 -0
- data/preview/_colors.html.erb +12 -0
- data/preview/_forms.html.erb +196 -0
- data/preview/_grid.html.erb +49 -0
- data/preview/_helpers.html.erb +158 -0
- data/preview/_inputs.html.erb +93 -0
- data/preview/_installation.html.erb +4 -0
- data/preview/_lists.html.erb +53 -0
- data/preview/_loaders.html.erb +72 -0
- data/preview/_nav.html.erb +46 -0
- data/preview/_philosophy.html.erb +33 -0
- data/preview/_rows.html.erb +35 -0
- data/preview/_tables.html.erb +1 -0
- data/preview/_tabs.html.erb +1 -0
- data/preview/_tiles.html.erb +1 -0
- data/preview/_uniform.html.erb +4 -0
- data/preview/index.html.erb +39 -473
- data/preview/preview.scss +5 -0
- data/site/index.html +23 -23
- data/site/preview.css +1 -1
- data/site/site/uniform.css +1 -1
- data/site/uniform.css +1 -1
- data/uniform.gemspec +1 -1
- data/vendor/assets/stylesheets/uniform/components/buttons.scss +9 -9
- data/vendor/assets/stylesheets/uniform/components/card.scss +1 -1
- data/vendor/assets/stylesheets/uniform/components/form.scss +16 -130
- data/vendor/assets/stylesheets/uniform/components/inputs.scss +21 -0
- data/vendor/assets/stylesheets/uniform/components/lists.scss +52 -52
- data/vendor/assets/stylesheets/uniform/components/nav.scss +65 -29
- data/vendor/assets/stylesheets/uniform/components/row.scss +20 -61
- data/vendor/assets/stylesheets/uniform/components/table-form.scss +141 -246
- data/vendor/assets/stylesheets/uniform/components/tabs.scss +1 -1
- data/vendor/assets/stylesheets/uniform/components/tile.scss +1 -1
- data/vendor/assets/stylesheets/uniform/helpers.scss +1 -6
- data/vendor/assets/stylesheets/uniform/mixins.scss +38 -0
- metadata +20 -3
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
<p>Mix and match styles to make the right button, all colors are available as well.</p>
|
|
2
|
+
<p><code><%= CGI::escapeHTML "<a href='#' class='uniform-btn'></a>" %></code></p>
|
|
3
|
+
<table class="table" cellspacing="0" cellpadding="0">
|
|
4
|
+
<tr>
|
|
5
|
+
<th></th>
|
|
6
|
+
<th>Normal</th>
|
|
7
|
+
<th><code>.green</code></th>
|
|
8
|
+
</tr>
|
|
9
|
+
<tr>
|
|
10
|
+
<th></th>
|
|
11
|
+
<td><a class="uniform-btn">Button</a></td>
|
|
12
|
+
<td><a class="uniform-btn green">Button</a></td>
|
|
13
|
+
</tr>
|
|
14
|
+
<tr>
|
|
15
|
+
<th><code>:hover</code> or <code>.hover</code></th>
|
|
16
|
+
<td><a class="uniform-btn hover">Button</a></td>
|
|
17
|
+
<td><a class="uniform-btn green hover">Button</a></td>
|
|
18
|
+
</tr>
|
|
19
|
+
<tr>
|
|
20
|
+
<th><code>:active</code> or <code>.active</code></th>
|
|
21
|
+
<td><a class="uniform-btn active">Button</a></td>
|
|
22
|
+
<td><a class="uniform-btn green active">Button</a></td>
|
|
23
|
+
</tr>
|
|
24
|
+
<tr>
|
|
25
|
+
<th><code>:disabled</code> or <code>.disabled</code></th>
|
|
26
|
+
<td><a class="uniform-btn disabled">Button</a></td>
|
|
27
|
+
<td><a class="uniform-btn green disabled">Button</a></td>
|
|
28
|
+
</tr>
|
|
29
|
+
<tr>
|
|
30
|
+
<th><code>.subtle</code></th>
|
|
31
|
+
<td><a class="uniform-btn subtle">Button</a></td>
|
|
32
|
+
<td><a class="uniform-btn green subtle">Button</a></td>
|
|
33
|
+
</tr>
|
|
34
|
+
<tr>
|
|
35
|
+
<th><code>.small</code></th>
|
|
36
|
+
<td><a class="uniform-btn small">Button</a></td>
|
|
37
|
+
<td><a class="uniform-btn green small">Button</a></td>
|
|
38
|
+
</tr>
|
|
39
|
+
<tr>
|
|
40
|
+
<th><code>.large</code></th>
|
|
41
|
+
<td><a class="uniform-btn large">Button</a></td>
|
|
42
|
+
<td><a class="uniform-btn green large">Button</a></td>
|
|
43
|
+
</tr>
|
|
44
|
+
<tr>
|
|
45
|
+
<th><code>.outline</code></th>
|
|
46
|
+
<td><a class="uniform-btn outline">Button</a></td>
|
|
47
|
+
<td><a class="uniform-btn green outline">Button</a></td>
|
|
48
|
+
</tr>
|
|
49
|
+
<tr>
|
|
50
|
+
<th><code>.circle</code></th>
|
|
51
|
+
<td><a class="uniform-btn circle">Button</a></td>
|
|
52
|
+
<td><a class="uniform-btn green circle">Button</a></td>
|
|
53
|
+
</tr>
|
|
54
|
+
<tr>
|
|
55
|
+
<th><code>.block</code></th>
|
|
56
|
+
<td><a class="uniform-btn block">Button</a></td>
|
|
57
|
+
<td><a class="uniform-btn green block">Button</a></td>
|
|
58
|
+
</tr>
|
|
59
|
+
</table>
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
<div class="row">
|
|
2
|
+
<div class="col-sm-6">
|
|
3
|
+
<div class="uniform-card">
|
|
4
|
+
<div class="uniform-card-title">
|
|
5
|
+
<span class="type">Sample Card</span>
|
|
6
|
+
</div>
|
|
7
|
+
<div class="uniform-card-body">Put Content In Here</div>
|
|
8
|
+
</div>
|
|
9
|
+
</div>
|
|
10
|
+
<div class="col-sm-6">
|
|
11
|
+
<pre><xmp><div class="uniform-card">
|
|
12
|
+
<div class="uniform-card-title">
|
|
13
|
+
<span class="type">Sample Card</span>
|
|
14
|
+
</div>
|
|
15
|
+
<div class="uniform-card-body">Put Content In Here</div>
|
|
16
|
+
</div></xmp></pre>
|
|
17
|
+
</div>
|
|
18
|
+
</div>
|
|
19
|
+
<div class="row">
|
|
20
|
+
<div class="col-sm-6">
|
|
21
|
+
<div class="uniform-card">
|
|
22
|
+
<div class="uniform-card-avatar">
|
|
23
|
+
<img src="https://unsplash.it/166/166/?random" style="display:block;" height="166" width="166">
|
|
24
|
+
</div>
|
|
25
|
+
<div class="uniform-card-container">
|
|
26
|
+
<div class="uniform-card-title">
|
|
27
|
+
<span class="type">John Dozer</span>
|
|
28
|
+
<div class="actions">
|
|
29
|
+
<a class="uniform-btn">Edit</a>
|
|
30
|
+
</div>
|
|
31
|
+
</div>
|
|
32
|
+
<div class="uniform-card-body">
|
|
33
|
+
<div class="uniform-card-attributes">
|
|
34
|
+
<div>
|
|
35
|
+
<div>Company</div>
|
|
36
|
+
<div>Friendly Associates</div>
|
|
37
|
+
</div>
|
|
38
|
+
<div>
|
|
39
|
+
<div>Title</div>
|
|
40
|
+
<div>Head Dude</div>
|
|
41
|
+
</div>
|
|
42
|
+
<div>
|
|
43
|
+
<div>Skills</div>
|
|
44
|
+
<div>Stapling, Jogging</div>
|
|
45
|
+
</div>
|
|
46
|
+
</div>
|
|
47
|
+
</div>
|
|
48
|
+
</div>
|
|
49
|
+
</div>
|
|
50
|
+
</div>
|
|
51
|
+
<div class="col-sm-6">
|
|
52
|
+
<pre><xmp><div class="uniform-card">
|
|
53
|
+
<div class="uniform-card-avatar">
|
|
54
|
+
<img src="https://unsplash.it/166/166/?random" style="display:block;" height="166" width="166">
|
|
55
|
+
</div>
|
|
56
|
+
<div class="uniform-card-container">
|
|
57
|
+
<div class="uniform-card-title">
|
|
58
|
+
<span class="type">John Dozer</span>
|
|
59
|
+
<div class="actions">
|
|
60
|
+
<a class="uniform-btn">Edit</a>
|
|
61
|
+
</div>
|
|
62
|
+
</div>
|
|
63
|
+
<div class="uniform-card-body">
|
|
64
|
+
<div class="uniform-card-attributes">
|
|
65
|
+
<div>
|
|
66
|
+
<div>Company</div>
|
|
67
|
+
<div>Friendly Associates</div>
|
|
68
|
+
</div>
|
|
69
|
+
<div>
|
|
70
|
+
<div>Title</div>
|
|
71
|
+
<div>Head Dude</div>
|
|
72
|
+
</div>
|
|
73
|
+
<div>
|
|
74
|
+
<div>Skills</div>
|
|
75
|
+
<div>Stapling, Jogging</div>
|
|
76
|
+
</div>
|
|
77
|
+
</div>
|
|
78
|
+
</div>
|
|
79
|
+
</div>
|
|
80
|
+
</div></xmp></pre>
|
|
81
|
+
</div>
|
|
82
|
+
</div>
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
<table>
|
|
2
|
+
<% %w(green blue red gray yellow).each do |color| %>
|
|
3
|
+
<% ["-light", "", "-dark"].each do |style| %>
|
|
4
|
+
<tr>
|
|
5
|
+
<td><span class='swatch <%= color %><%= style %>-bg'></span></td>
|
|
6
|
+
<td><code>sass// $<%= color %><%= style %></code></td>
|
|
7
|
+
<td><code>class// .<%= color %><%= style %></code></td>
|
|
8
|
+
</tr>
|
|
9
|
+
<% end %>
|
|
10
|
+
<tr><td colspan='3'> </td></tr>
|
|
11
|
+
<% end %>
|
|
12
|
+
</table>
|
|
@@ -0,0 +1,196 @@
|
|
|
1
|
+
<div class="row">
|
|
2
|
+
<div class="col-sm-6">
|
|
3
|
+
<form class="uniform-form">
|
|
4
|
+
<div class="row">
|
|
5
|
+
<div class="uniform-form-group col-sm-4">
|
|
6
|
+
<label>Name</label>
|
|
7
|
+
<input type="text">
|
|
8
|
+
</div>
|
|
9
|
+
<div class="uniform-form-group col-sm-4">
|
|
10
|
+
<label>Email</label>
|
|
11
|
+
<input type="text">
|
|
12
|
+
</div>
|
|
13
|
+
<div class="uniform-form-group col-sm-4">
|
|
14
|
+
<label>Phone</label>
|
|
15
|
+
<input type="text">
|
|
16
|
+
</div>
|
|
17
|
+
</div>
|
|
18
|
+
<div class="row">
|
|
19
|
+
<div class="uniform-form-group col-sm-4">
|
|
20
|
+
<label>Twitter</label>
|
|
21
|
+
<input type="text">
|
|
22
|
+
<label>Facebook</label>
|
|
23
|
+
<input type="text">
|
|
24
|
+
<label>Instagram</label>
|
|
25
|
+
<input type="text">
|
|
26
|
+
</div>
|
|
27
|
+
<div class="uniform-form-group col-sm-8">
|
|
28
|
+
<label>Details</label>
|
|
29
|
+
<textarea rows="9"></textarea>
|
|
30
|
+
</div>
|
|
31
|
+
</div>
|
|
32
|
+
</form>
|
|
33
|
+
</div>
|
|
34
|
+
<div class="col-sm-6">
|
|
35
|
+
<pre><xmp><form class="uniform-form">
|
|
36
|
+
<div class="row">
|
|
37
|
+
<div class="uniform-form-group col-sm-4">
|
|
38
|
+
<label>Name</label>
|
|
39
|
+
<input type="text">
|
|
40
|
+
</div>
|
|
41
|
+
<div class="uniform-form-group col-sm-4">
|
|
42
|
+
<label>Email</label>
|
|
43
|
+
<input type="text">
|
|
44
|
+
</div>
|
|
45
|
+
<div class="uniform-form-group col-sm-4">
|
|
46
|
+
<label>Phone</label>
|
|
47
|
+
<input type="text">
|
|
48
|
+
</div>
|
|
49
|
+
</div>
|
|
50
|
+
<div class="row">
|
|
51
|
+
<div class="uniform-form-group col-sm-4">
|
|
52
|
+
<label>Twitter</label>
|
|
53
|
+
<input type="text">
|
|
54
|
+
<label>Facebook</label>
|
|
55
|
+
<input type="text">
|
|
56
|
+
<label>Instagram</label>
|
|
57
|
+
<input type="text">
|
|
58
|
+
</div>
|
|
59
|
+
<div class="uniform-form-group col-sm-8">
|
|
60
|
+
<label>Details</label>
|
|
61
|
+
<textarea rows="9"></textarea>
|
|
62
|
+
</div>
|
|
63
|
+
</div>
|
|
64
|
+
</form></xmp></pre>
|
|
65
|
+
</div>
|
|
66
|
+
</div>
|
|
67
|
+
|
|
68
|
+
<h3>Has Error</h3>
|
|
69
|
+
<div class="row">
|
|
70
|
+
<div class="col-sm-6">
|
|
71
|
+
<form class="uniform-form">
|
|
72
|
+
<div class="row">
|
|
73
|
+
<div class="uniform-form-group col-sm-12">
|
|
74
|
+
<div class="has-error">
|
|
75
|
+
<label>Name</label>
|
|
76
|
+
<input type="text">
|
|
77
|
+
</div>
|
|
78
|
+
</div>
|
|
79
|
+
</div>
|
|
80
|
+
</form>
|
|
81
|
+
</div>
|
|
82
|
+
<div class="col-sm-6">
|
|
83
|
+
<pre><xmp><form class="uniform-form">
|
|
84
|
+
<div class="row">
|
|
85
|
+
<div class="uniform-form-group col-sm-4">
|
|
86
|
+
<div class="has-error">
|
|
87
|
+
<label>Name</label>
|
|
88
|
+
<input type="text">
|
|
89
|
+
</div>
|
|
90
|
+
</div>
|
|
91
|
+
</div>
|
|
92
|
+
</form></xmp></pre>
|
|
93
|
+
</div>
|
|
94
|
+
</div>
|
|
95
|
+
|
|
96
|
+
<div class="row">
|
|
97
|
+
<div class="col-sm-6">
|
|
98
|
+
<form class="uniform-form uniform-form-table">
|
|
99
|
+
<div class="row">
|
|
100
|
+
<div class="uniform-form-group col-sm-4">
|
|
101
|
+
<label>Name</label>
|
|
102
|
+
<input type="text">
|
|
103
|
+
</div>
|
|
104
|
+
<div class="uniform-form-group col-sm-4">
|
|
105
|
+
<label>Email</label>
|
|
106
|
+
<input type="text">
|
|
107
|
+
</div>
|
|
108
|
+
<div class="uniform-form-group col-sm-4">
|
|
109
|
+
<label>Phone</label>
|
|
110
|
+
<input type="text">
|
|
111
|
+
</div>
|
|
112
|
+
</div>
|
|
113
|
+
<div class="row">
|
|
114
|
+
<div class="uniform-form-group col-sm-4">
|
|
115
|
+
<label>Twitter</label>
|
|
116
|
+
<input type="text">
|
|
117
|
+
<label>Facebook</label>
|
|
118
|
+
<input type="text">
|
|
119
|
+
<label>Instagram</label>
|
|
120
|
+
<input type="text">
|
|
121
|
+
</div>
|
|
122
|
+
<div class="uniform-form-group col-sm-8 col-span-2">
|
|
123
|
+
<label>Details</label>
|
|
124
|
+
<textarea rows="6"></textarea>
|
|
125
|
+
</div>
|
|
126
|
+
</div>
|
|
127
|
+
</form>
|
|
128
|
+
<br>
|
|
129
|
+
<form class="uniform-form uniform-form-table">
|
|
130
|
+
<div class="row">
|
|
131
|
+
<div class="uniform-form-group col-sm-4">
|
|
132
|
+
<label>Name</label>
|
|
133
|
+
<input type="text">
|
|
134
|
+
</div>
|
|
135
|
+
<div class="uniform-form-group col-sm-4">
|
|
136
|
+
<div class="has-error">
|
|
137
|
+
<label>Email</label>
|
|
138
|
+
<input type="text">
|
|
139
|
+
</div>
|
|
140
|
+
</div>
|
|
141
|
+
<div class="uniform-form-group col-sm-4">
|
|
142
|
+
<label>Phone</label>
|
|
143
|
+
<input type="text">
|
|
144
|
+
</div>
|
|
145
|
+
</div>
|
|
146
|
+
<div class="row">
|
|
147
|
+
<div class="uniform-form-group col-sm-4">
|
|
148
|
+
<label>Twitter</label>
|
|
149
|
+
<input type="text">
|
|
150
|
+
<label>Facebook</label>
|
|
151
|
+
<input type="text">
|
|
152
|
+
<div class="has-error">
|
|
153
|
+
<label>Instagram</label>
|
|
154
|
+
<input type="text">
|
|
155
|
+
</div>
|
|
156
|
+
</div>
|
|
157
|
+
<div class="uniform-form-group col-sm-8 col-span-2">
|
|
158
|
+
<label>Details</label>
|
|
159
|
+
<textarea rows="6"></textarea>
|
|
160
|
+
</div>
|
|
161
|
+
</div>
|
|
162
|
+
</form>
|
|
163
|
+
</div>
|
|
164
|
+
<div class="col-sm-6">
|
|
165
|
+
<pre><xmp><form class="uniform-form uniform-form-table">
|
|
166
|
+
<div class="row">
|
|
167
|
+
<div class="uniform-form-group col-sm-4">
|
|
168
|
+
<label>Name</label>
|
|
169
|
+
<input type="text">
|
|
170
|
+
</div>
|
|
171
|
+
<div class="uniform-form-group col-sm-4">
|
|
172
|
+
<label>Email</label>
|
|
173
|
+
<input type="text">
|
|
174
|
+
</div>
|
|
175
|
+
<div class="uniform-form-group col-sm-4">
|
|
176
|
+
<label>Phone</label>
|
|
177
|
+
<input type="text">
|
|
178
|
+
</div>
|
|
179
|
+
</div>
|
|
180
|
+
<div class="row">
|
|
181
|
+
<div class="uniform-form-group col-sm-4">
|
|
182
|
+
<label>Twitter</label>
|
|
183
|
+
<input type="text">
|
|
184
|
+
<label>Facebook</label>
|
|
185
|
+
<input type="text">
|
|
186
|
+
<label>Instagram</label>
|
|
187
|
+
<input type="text">
|
|
188
|
+
</div>
|
|
189
|
+
<div class="uniform-form-group col-sm-8 col-span-2">
|
|
190
|
+
<label>Details</label>
|
|
191
|
+
<textarea rows="6"></textarea>
|
|
192
|
+
</div>
|
|
193
|
+
</div>
|
|
194
|
+
</form></xmp></pre>
|
|
195
|
+
</div>
|
|
196
|
+
</div>
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
<p>Uses Bootstrap3 grid notation</p>
|
|
2
|
+
<div class="row">
|
|
3
|
+
<div class="col-sm-4">
|
|
4
|
+
<div class="green-light-bg">col-sm-4</div>
|
|
5
|
+
</div>
|
|
6
|
+
<div class="col-sm-4">
|
|
7
|
+
<div class="green-light-bg">col-sm-4</div>
|
|
8
|
+
</div>
|
|
9
|
+
<div class="col-sm-4">
|
|
10
|
+
<div class="green-light-bg">col-sm-4</div>
|
|
11
|
+
</div>
|
|
12
|
+
</div>
|
|
13
|
+
<br>
|
|
14
|
+
<div class="row">
|
|
15
|
+
<div class="col-sm-2">
|
|
16
|
+
<div class="green-light-bg">col-sm-2</div>
|
|
17
|
+
</div>
|
|
18
|
+
<div class="col-sm-6">
|
|
19
|
+
<div class="green-light-bg">col-sm-6</div>
|
|
20
|
+
</div>
|
|
21
|
+
<div class="col-sm-4">
|
|
22
|
+
<div class="green-light-bg">col-sm-4</div>
|
|
23
|
+
</div>
|
|
24
|
+
</div>
|
|
25
|
+
<br>
|
|
26
|
+
<pre><xmp><div class="row">
|
|
27
|
+
<div class="col-sm-4">
|
|
28
|
+
<div class="green-light-bg">col-sm-4</div>
|
|
29
|
+
</div>
|
|
30
|
+
<div class="col-sm-4">
|
|
31
|
+
<div class="green-light-bg">col-sm-4</div>
|
|
32
|
+
</div>
|
|
33
|
+
<div class="col-sm-4">
|
|
34
|
+
<div class="green-light-bg">col-sm-4</div>
|
|
35
|
+
</div>
|
|
36
|
+
</div></xmp></pre>
|
|
37
|
+
<br>
|
|
38
|
+
<div class="row">
|
|
39
|
+
<div class="col-sm-3 col-sm-push-2">
|
|
40
|
+
<div class="green-light-bg">.col-sm-3 .col-sm-push-2</div>
|
|
41
|
+
</div>
|
|
42
|
+
</div>
|
|
43
|
+
<br>
|
|
44
|
+
|
|
45
|
+
<h3>Breakpoints</h3>
|
|
46
|
+
<p><code>xs</code> = 480px</p>
|
|
47
|
+
<p><code>sm</code> = 768px</p>
|
|
48
|
+
<p><code>md</code> = 992px</p>
|
|
49
|
+
<p><code>lg</code> = 1200px</p>
|
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
<div class="row">
|
|
2
|
+
<div class="col-sm-6">
|
|
3
|
+
<vr>
|
|
4
|
+
</div>
|
|
5
|
+
<div class="col-sm-6">
|
|
6
|
+
<pre><xmp><vr></xmp></pre>
|
|
7
|
+
</div>
|
|
8
|
+
</div>
|
|
9
|
+
<br>
|
|
10
|
+
<br>
|
|
11
|
+
<div class="row">
|
|
12
|
+
<div class="col-sm-6">
|
|
13
|
+
<code>.rounded</code>, <code>.round</code>
|
|
14
|
+
</div>
|
|
15
|
+
<div class="col-sm-6">
|
|
16
|
+
<pre><xmp>border-radius: 50%</xmp></pre>
|
|
17
|
+
</div>
|
|
18
|
+
</div>
|
|
19
|
+
<div class="row">
|
|
20
|
+
<div class="col-sm-6">
|
|
21
|
+
<code>.handle</code>
|
|
22
|
+
</div>
|
|
23
|
+
<div class="col-sm-6">
|
|
24
|
+
<pre><xmp>cursor: hand;</xmp></pre>
|
|
25
|
+
</div>
|
|
26
|
+
</div>
|
|
27
|
+
<div class="row">
|
|
28
|
+
<div class="col-sm-6">
|
|
29
|
+
<code>.pointer</code>
|
|
30
|
+
</div>
|
|
31
|
+
<div class="col-sm-6">
|
|
32
|
+
<pre><xmp>cursor: pointer;</xmp></pre>
|
|
33
|
+
</div>
|
|
34
|
+
</div>
|
|
35
|
+
<div class="row">
|
|
36
|
+
<div class="col-sm-6">
|
|
37
|
+
<code>.honeypot</code>
|
|
38
|
+
</div>
|
|
39
|
+
<div class="col-sm-6">
|
|
40
|
+
<pre><xmp>position:absolute !important;
|
|
41
|
+
left:-999999px !important;
|
|
42
|
+
width:1px !important;
|
|
43
|
+
display:block !important;
|
|
44
|
+
</xmp></pre>
|
|
45
|
+
</div>
|
|
46
|
+
</div>
|
|
47
|
+
<div class="row">
|
|
48
|
+
<div class="col-sm-6">
|
|
49
|
+
<code>.hidden, .hide</code>
|
|
50
|
+
</div>
|
|
51
|
+
<div class="col-sm-6">
|
|
52
|
+
<pre><xmp>display:none;</xmp></pre>
|
|
53
|
+
</div>
|
|
54
|
+
</div>
|
|
55
|
+
<div class="row">
|
|
56
|
+
<div class="col-sm-6">
|
|
57
|
+
<code>.right</code>
|
|
58
|
+
</div>
|
|
59
|
+
<div class="col-sm-6">
|
|
60
|
+
<pre><xmp>float:right;</xmp></pre>
|
|
61
|
+
</div>
|
|
62
|
+
</div>
|
|
63
|
+
<div class="row">
|
|
64
|
+
<div class="col-sm-6">
|
|
65
|
+
<code>.text-right</code>
|
|
66
|
+
</div>
|
|
67
|
+
<div class="col-sm-6">
|
|
68
|
+
<pre><xmp>text-align: right;</xmp></pre>
|
|
69
|
+
</div>
|
|
70
|
+
</div>
|
|
71
|
+
<div class="row">
|
|
72
|
+
<div class="col-sm-6">
|
|
73
|
+
<code>.text-center</code>
|
|
74
|
+
</div>
|
|
75
|
+
<div class="col-sm-6">
|
|
76
|
+
<pre><xmp>text-align: center;</xmp></pre>
|
|
77
|
+
</div>
|
|
78
|
+
</div>
|
|
79
|
+
<div class="row">
|
|
80
|
+
<div class="col-sm-6">
|
|
81
|
+
<code>.clear</code>
|
|
82
|
+
</div>
|
|
83
|
+
<div class="col-sm-6">
|
|
84
|
+
<pre><xmp>clear:both;</xmp></pre>
|
|
85
|
+
</div>
|
|
86
|
+
</div>
|
|
87
|
+
<div class="row">
|
|
88
|
+
<div class="col-sm-6">
|
|
89
|
+
<code>.pad</code>
|
|
90
|
+
</div>
|
|
91
|
+
<div class="col-sm-6">
|
|
92
|
+
<pre><xmp>padding:10px;</xmp></pre>
|
|
93
|
+
</div>
|
|
94
|
+
</div>
|
|
95
|
+
<div class="row">
|
|
96
|
+
<div class="col-sm-6">
|
|
97
|
+
<code>.text-overflow</code>
|
|
98
|
+
</div>
|
|
99
|
+
<div class="col-sm-6">
|
|
100
|
+
<pre><xmp>text-overflow: inherit;
|
|
101
|
+
white-space: inherit;
|
|
102
|
+
overflow: inherit;</xmp></pre>
|
|
103
|
+
</div>
|
|
104
|
+
</div>
|
|
105
|
+
<div class="row">
|
|
106
|
+
<div class="col-sm-6">
|
|
107
|
+
<code>.strong, .bold</code>
|
|
108
|
+
</div>
|
|
109
|
+
<div class="col-sm-6">
|
|
110
|
+
<pre><xmp>font-weight: 700;</xmp></pre>
|
|
111
|
+
</div>
|
|
112
|
+
</div>
|
|
113
|
+
<div class="row">
|
|
114
|
+
<div class="col-sm-6">
|
|
115
|
+
<code>.light, .text-light</code>
|
|
116
|
+
</div>
|
|
117
|
+
<div class="col-sm-6">
|
|
118
|
+
<pre><xmp>font-weight: 300;</xmp></pre>
|
|
119
|
+
</div>
|
|
120
|
+
</div>
|
|
121
|
+
<div class="row">
|
|
122
|
+
<div class="col-sm-6">
|
|
123
|
+
<code>.text-normal</code>
|
|
124
|
+
</div>
|
|
125
|
+
<div class="col-sm-6">
|
|
126
|
+
<pre><xmp>font-weight: normal;</xmp></pre>
|
|
127
|
+
</div>
|
|
128
|
+
</div>
|
|
129
|
+
<div class="row">
|
|
130
|
+
<div class="col-sm-6">
|
|
131
|
+
<code>.warn</code>
|
|
132
|
+
</div>
|
|
133
|
+
<div class="col-sm-6">
|
|
134
|
+
<pre><xmp>color:lighten($gray, 20);
|
|
135
|
+
&:hover{
|
|
136
|
+
color:$red;
|
|
137
|
+
}</xmp></pre>
|
|
138
|
+
</div>
|
|
139
|
+
</div>
|
|
140
|
+
<div class="row">
|
|
141
|
+
<div class="col-sm-6">
|
|
142
|
+
<code>p.large</code>
|
|
143
|
+
</div>
|
|
144
|
+
<div class="col-sm-6">
|
|
145
|
+
<pre><xmp>font-size:1.5em;
|
|
146
|
+
font-weight:300;
|
|
147
|
+
margin-bottom:20px;</xmp></pre>
|
|
148
|
+
</div>
|
|
149
|
+
</div>
|
|
150
|
+
<div class="row">
|
|
151
|
+
<div class="col-sm-6">
|
|
152
|
+
<code>.nowrap</code>
|
|
153
|
+
</div>
|
|
154
|
+
<div class="col-sm-6">
|
|
155
|
+
<pre><xmp>white-space: nowrap;
|
|
156
|
+
overflow:hidden;</xmp></pre>
|
|
157
|
+
</div>
|
|
158
|
+
</div>
|