Skip to content

Commit c75ce1d

Browse files
themepixelsthemepixels
committed
added radio features and updated docs
1 parent cd4c036 commit c75ce1d

File tree

7 files changed

+402
-63
lines changed

7 files changed

+402
-63
lines changed

‎Gruntfile.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,4 +46,5 @@ module.exports = function(grunt) {
4646

4747
grunt.registerTask('default', ['less', 'connect', 'watch']);
4848

49+
4950
};

‎docs/docs.css‎

Lines changed: 37 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,9 @@
77
}
88

99
body {
10-
background-color: #333;
10+
margin: 0;
1111
color: #444;
12+
background-color: #fff;
1213
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
1314
font-weight: 300;
1415
font-size: 16px;
@@ -25,9 +26,10 @@ p { line-height: 23px; }
2526

2627
pre {
2728
background-color: #eee;
28-
padding: 10px;
29+
padding: 5px;
2930
border: 1px solid #ddd;
3031
border-radius: 3px;
32+
font-size: 13px;
3133
}
3234

3335
hr {
@@ -37,17 +39,18 @@ hr {
3739
margin: 40px 0;
3840
}
3941

40-
section { padding: 20px; }
42+
.code {
43+
color: #D54950;
44+
font-weight: 400;
45+
}
4146

4247
.mainpanel {
43-
max-width: 720px;
48+
max-width: 1024px;
4449
margin: auto;
4550
padding: 20px 30px;
4651
box-sizing: border-box;
47-
background-color: #fff;
48-
-webkit-border-radius: 3px;
49-
-moz-border-radius: 3px;
50-
border-radius: 3px;
52+
border-top: 0;
53+
border-bottom: 0;
5154
}
5255

5356
.tpx-logo {
@@ -84,17 +87,40 @@ section { padding: 20px; }
8487
font-size: 36px;
8588
font-weight: 300;
8689
margin-bottom: 15px;
87-
color: #333;
90+
color: #000;
8891
}
8992

9093
.secdesc { margin-top: 0; }
9194

9295
.subtitle {
93-
font-size: 20px;
96+
font-size: 24px;
9497
font-weight: 300;
95-
color: #333;
98+
color: #000;
99+
margin-bottom: 0;
100+
}
101+
102+
.subdesc {
103+
color: #666;
104+
font-size: 14px;
105+
margin: 2px 0 20px;
96106
}
97107

98108
.tpx-radio {
99109
margin-right: 20px;
100110
}
111+
112+
.inline-block { display: inline-block; }
113+
114+
.download-btn {
115+
display: block;
116+
margin-right: 20px;
117+
margin-bottom: 5px;
118+
padding: 12px 20px;
119+
border: 2px solid #066EFB;
120+
font-weight: 500;
121+
border-radius: 4px;
122+
}
123+
124+
.tpx-radio-xs {
125+
font-size: 14px;
126+
}

‎docs/index.html‎

Lines changed: 176 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<meta http-equiv="X-UA-Compatible" content="IE=edge">
77
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
88

9-
<title>TPX Forms</title>
9+
<title>tpxForms</title>
1010

1111
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
1212
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.3/styles/default.min.css">
@@ -34,6 +34,16 @@ <h3 class="tpx-desc">An enhanced version of some of the html form elements writt
3434

3535
<hr>
3636

37+
<div class="inline-block">
38+
<a href="" class="download-btn">Download CSS</a>
39+
<small>Compiled and minified CSS</small>
40+
</div>
41+
42+
<div class="inline-block">
43+
<a href="" class="download-btn">Download CSS</a>
44+
<small>Includes less files and docs</small>
45+
</div>
46+
3747
<h2 class="sectitle">Radios</h2>
3848
<p class="secdesc">Use the available syntax below to use the enhanced radio box.</p>
3949

@@ -45,25 +55,184 @@ <h2 class="sectitle">Radios</h2>
4555

4656
<p>To create a custom design, we use the <code>&lt;span&gt;</code> element as an indicator to the input radio which is hidden within the <code>&lt;label&gt;</code>.</p>
4757

48-
<h4 class="subtitle">Examples:</h4>
58+
<hr>
59+
60+
<h4 class="subtitle">Default Radio</h4>
61+
<p class="subdesc">Start with this basic radio by copying the syntax given above.</p>
62+
4963
<div>
5064
<label class="tpx-radio">
51-
<input type="radio" name="radio1" value="1">
65+
<input type="radio" name="radio1" value="1" checked>
5266
<span></span>
53-
Default Radio 1
67+
Default Radio
5468
</label>
5569
<label class="tpx-radio">
5670
<input type="radio" name="radio1" value="2">
5771
<span></span>
58-
Default Radio 2
72+
Default Radio
73+
</label>
74+
</div>
75+
76+
<br>
77+
<h4 class="subtitle">Inversed Radio</h4>
78+
<p class="subdesc">Create an inversed color of the default radio.</p>
79+
80+
<div>
81+
<label class="tpx-radio tpx-radio-inverse">
82+
<input type="radio" name="radio2" value="1" checked>
83+
<span></span>
84+
Inversed Radio
85+
</label>
86+
<label class="tpx-radio tpx-radio-inverse">
87+
<input type="radio" name="radio2" value="2">
88+
<span></span>
89+
Inversed Radio
90+
</label>
91+
</div>
92+
<pre><code class="html">&lt;label class="tpx-radio tpx-inverse"&gt;...&lt;/label&gt;</code></pre>
93+
94+
<br>
95+
<h4 class="subtitle">Radio Sizes</h4>
96+
<p class="subdesc">Make larger or smaller radio by adding <span class="code">.tpx-radio-sm</span>, <span class="code">.tpx-radio-xs</span>, or <span class="code">.tpx-radio-lg</span< for additional sizes.</p>
97+
98+
<div>
99+
<label class="tpx-radio tpx-radio-lg">
100+
<input type="radio" name="radio3" value="1" checked>
101+
<span></span>
102+
Radio Large
103+
</label>
104+
<label class="tpx-radio tpx-radio-lg">
105+
<input type="radio" name="radio3" value="2">
106+
<span></span>
107+
Radio Large
108+
</label>
109+
</div>
110+
111+
<pre><code class="html">&lt;label class="tpx-radio tpx-radio-lg"&gt;...&lt;/label&gt;</code></pre>
112+
113+
<br>
114+
115+
<div>
116+
<label class="tpx-radio tpx-radio-sm">
117+
<input type="radio" name="radio4" value="1" checked>
118+
<span></span>
119+
Radio Small
120+
</label>
121+
<label class="tpx-radio tpx-radio-sm">
122+
<input type="radio" name="radio4" value="2">
123+
<span></span>
124+
Radio Small
125+
</label>
126+
</div>
127+
128+
<pre><code class="html">&lt;label class="tpx-radio tpx-radio-sm"&gt;...&lt;/label&gt;</code></pre>
129+
130+
<br>
131+
132+
<div>
133+
<label class="tpx-radio tpx-radio-xs">
134+
<input type="radio" name="radio5" value="1" checked>
135+
<span></span>
136+
Radio Extra Small
137+
</label>
138+
<label class="tpx-radio tpx-radio-xs">
139+
<input type="radio" name="radio5" value="2">
140+
<span></span>
141+
Radio Extra Small
142+
</label>
143+
</div>
144+
145+
<pre><code class="html">&lt;label class="tpx-radio tpx-radio-xs"&gt;...&lt;/label&gt;</code></pre>
146+
147+
<br>
148+
<h4 class="subtitle">Radio Disabled</h4>
149+
<p class="subdesc">Add the <span class="code">disabled</span> attribute to <span class="code">&lt;input&gt;</span> within the label.</p>
150+
151+
<div>
152+
<label class="tpx-radio">
153+
<input type="radio" name="radio6" value="1" checked disabled>
154+
<span></span>
155+
Disabled Radio
59156
</label>
60157
<label class="tpx-radio">
61-
<input type="radio" name="radio1" value="3">
158+
<input type="radio" name="radio6" value="2" disabled>
159+
<span></span>
160+
Disabled Radio
161+
</label>
162+
</div>
163+
164+
<pre><code class="html">&lt;input type="radio" disabled&gt;</code></pre>
165+
166+
<br>
167+
<h4 class="subtitle">Colored Radio</h4>
168+
<p class="subdesc">Use any of the available radio classes to create a colored radio button..</p>
169+
170+
<div>
171+
<label class="tpx-radio tpx-radio-primary">
172+
<input type="radio" name="radio7" value="1" checked>
173+
<span></span>
174+
Primary Radio
175+
</label>
176+
<label class="tpx-radio tpx-radio-inverse tpx-radio-primary">
177+
<input type="radio" name="radio7" value="2">
178+
<span></span>
179+
Primary Radio Inverse
180+
</label>
181+
</div>
182+
183+
<pre><code class="html">&lt;label class="tpx-radio tpx-radio-primary"&gt;...&lt;/label&gt;
184+
&lt;label class="tpx-radio tpx-radio-primary tpx-radio-inverse"&gt;...&lt;/label&gt;</code></pre>
185+
186+
<div>
187+
<label class="tpx-radio tpx-radio-success">
188+
<input type="radio" name="radio8" value="1" checked>
62189
<span></span>
63-
Default Radio 3
190+
Success Radio
191+
</label>
192+
<label class="tpx-radio tpx-radio-inverse tpx-radio-success">
193+
<input type="radio" name="radio8" value="2">
194+
<span></span>
195+
Success Radio Inverse
64196
</label>
65197
</div>
66198

199+
<pre><code class="html">&lt;label class="tpx-radio tpx-radio-success"&gt;...&lt;/label&gt;
200+
&lt;label class="tpx-radio tpx-radio-success tpx-radio-inverse"&gt;...&lt;/label&gt;</code></pre>
201+
202+
<div>
203+
<label class="tpx-radio tpx-radio-warning">
204+
<input type="radio" name="radio9" value="1" checked>
205+
<span></span>
206+
Warning Radio
207+
</label>
208+
<label class="tpx-radio tpx-radio-inverse tpx-radio-warning">
209+
<input type="radio" name="radio9" value="2">
210+
<span></span>
211+
Warning Radio Inverse
212+
</label>
213+
</div>
214+
215+
<pre><code class="html">&lt;label class="tpx-radio tpx-radio-warning"&gt;...&lt;/label&gt;
216+
&lt;label class="tpx-radio tpx-radio-warning tpx-radio-inverse"&gt;...&lt;/label&gt;</code></pre>
217+
218+
<div>
219+
<label class="tpx-radio tpx-radio-danger">
220+
<input type="radio" name="radio10" value="1" checked>
221+
<span></span>
222+
Danger Radio
223+
</label>
224+
<label class="tpx-radio tpx-radio-inverse tpx-radio-danger">
225+
<input type="radio" name="radio10" value="2">
226+
<span></span>
227+
Danger Radio Inverse
228+
</label>
229+
</div>
230+
231+
<pre><code class="html">&lt;label class="tpx-radio tpx-radio-danger"&gt;...&lt;/label&gt;
232+
&lt;label class="tpx-radio tpx-radio-danger tpx-radio-inverse"&gt;...&lt;/label&gt;</code></pre>
233+
234+
235+
67236
</div>
68237
</section>
69238

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
"grunt-contrib-connect": "^0.8.0",
1414
"grunt-contrib-less": "^0.11.4",
1515
"grunt-contrib-watch": "^0.6.1",
16+
"grunt-ssh": "^0.12.0",
1617
"load-grunt-tasks": "^0.6.0"
1718
}
1819
}

0 commit comments

Comments
 (0)