Skip to content

Commit cd4c036

Browse files
themepixelsthemepixels
committed
building radio box and adding demos and docs
1 parent ab785ef commit cd4c036

File tree

10 files changed

+442
-1
lines changed

10 files changed

+442
-1
lines changed

‎.editorconfig‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# editorconfig.org
2+
3+
root = true
4+
5+
[*]
6+
indent_style = space
7+
indent_size = 2
8+
end_of_line = lf
9+
charset = utf-8
10+
trim_trailing_whitespace = true
11+
insert_final_newline = true

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
.DS_Store
2+
node_modules/

‎Gruntfile.js‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
module.exports = function(grunt) {
2+
3+
'use strict';
4+
5+
// Project configuration.
6+
grunt.initConfig({
7+
8+
pkg: grunt.file.readJSON("package.json"),
9+
10+
less: {
11+
dev: {
12+
files: {
13+
"<%= pkg.name %>.css" : "<%= pkg.name %>.less"
14+
}
15+
},
16+
17+
prod: {
18+
options: {
19+
compress: true
20+
},
21+
files: {
22+
"<%= pkg.name %>.min.css" : "<%= pkg.name %>.less"
23+
}
24+
}
25+
},
26+
27+
watch: {
28+
scripts: {
29+
files: ["<%= pkg.name %>.less"],
30+
tasks: ["less"]
31+
}
32+
},
33+
34+
connect: {
35+
server: {
36+
options: {
37+
port: 9000,
38+
base: [".", "docs"]
39+
}
40+
}
41+
}
42+
43+
});
44+
45+
require('load-grunt-tasks')(grunt);
46+
47+
grunt.registerTask('default', ['less', 'connect', 'watch']);
48+
49+
};

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,4 @@ tpxForms
33

44
tpxForms is an enhanced version of some of the form elements (checkbox and radio) using only css.
55

6-
[View Demo &amp; Documentation](http://ui.themepixels.com/tpxForms)
6+
[View Demo &amp; Documentation](http://ui.themepixels.com/tpxforms)

‎docs/docs.css‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
/**
2+
* Start of docs styles
3+
**/
4+
5+
* {
6+
box-sizing: border-box;
7+
}
8+
9+
body {
10+
background-color: #333;
11+
color: #444;
12+
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
13+
font-weight: 300;
14+
font-size: 16px;
15+
}
16+
17+
a {
18+
color: #066EFB;
19+
text-decoration: none;
20+
}
21+
22+
a:hover { color: #0766e7; }
23+
24+
p { line-height: 23px; }
25+
26+
pre {
27+
background-color: #eee;
28+
padding: 10px;
29+
border: 1px solid #ddd;
30+
border-radius: 3px;
31+
}
32+
33+
hr {
34+
border: 0;
35+
border-bottom: 1px dotted #ddd;
36+
height: 1px;
37+
margin: 40px 0;
38+
}
39+
40+
section { padding: 20px; }
41+
42+
.mainpanel {
43+
max-width: 720px;
44+
margin: auto;
45+
padding: 20px 30px;
46+
box-sizing: border-box;
47+
background-color: #fff;
48+
-webkit-border-radius: 3px;
49+
-moz-border-radius: 3px;
50+
border-radius: 3px;
51+
}
52+
53+
.tpx-logo {
54+
font-size: 50px;
55+
color: #066efb;
56+
font-weight: 500;
57+
margin-bottom: 20px;
58+
margin-top: 0;
59+
}
60+
61+
.tpx-logo span {
62+
color: #000;
63+
font-weight: 300;
64+
}
65+
66+
.tpx-desc {
67+
font-weight: 200;
68+
font-size: 20px;
69+
}
70+
71+
.tpx-social {
72+
font-size: 32px;
73+
margin: 0;
74+
}
75+
76+
.tpx-social .github { color: #333; }
77+
.tpx-social .github:hover { color: #000; }
78+
.tpx-social .twitter { color: #1AB2E8; }
79+
.tpx-social .twitter:hover { color: #189fcf; }
80+
.tpx-social .dribbble { color: #C32361; }
81+
.tpx-social .dribbble:hover { color: #ad1e55; }
82+
83+
.sectitle {
84+
font-size: 36px;
85+
font-weight: 300;
86+
margin-bottom: 15px;
87+
color: #333;
88+
}
89+
90+
.secdesc { margin-top: 0; }
91+
92+
.subtitle {
93+
font-size: 20px;
94+
font-weight: 300;
95+
color: #333;
96+
}
97+
98+
.tpx-radio {
99+
margin-right: 20px;
100+
}

‎docs/index.html‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<!DOCTYPE html>
2+
3+
<html lang="en-us">
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
8+
9+
<title>TPX Forms</title>
10+
11+
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
12+
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.3/styles/default.min.css">
13+
<!--<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> -->
14+
15+
<link rel="stylesheet" href="docs.css">
16+
<link rel="stylesheet" href="tpxforms.min.css">
17+
18+
</head>
19+
20+
<body>
21+
22+
<section>
23+
<div class="mainpanel">
24+
<h1 class="tpx-logo">tpx<span>Forms</span></h1>
25+
<h3 class="tpx-desc">An enhanced version of some of the html form elements written only in css.</h3>
26+
<p>Created by: <a href="http://themepixels.com/">@themepixels</a>
27+
28+
<p class="tpx-social">
29+
<a href="https://github.com/themepixels/tpxforms" class="github"><i class="fa fa-github"></i></a>
30+
<a href="http://twitter.com/themepixels" class="twitter"><i class="fa fa-twitter"></i></a>
31+
<a href="https://dribbble.com/themepixels" class="dribbble"><i class="fa fa-dribbble"></i></a>
32+
<a href="https://www.behance.net/themepixels" class="behance"><i class="fa fa-behance"></i></a>
33+
</p>
34+
35+
<hr>
36+
37+
<h2 class="sectitle">Radios</h2>
38+
<p class="secdesc">Use the available syntax below to use the enhanced radio box.</p>
39+
40+
<pre><code class="html">&lt;label class="tpx-radio"&gt;
41+
&lt;input type="radio"&gt;
42+
&lt;span&gt;&lt;/span&gt;
43+
Default Radio
44+
&lt;/label&gt;</code></pre>
45+
46+
<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>
47+
48+
<h4 class="subtitle">Examples:</h4>
49+
<div>
50+
<label class="tpx-radio">
51+
<input type="radio" name="radio1" value="1">
52+
<span></span>
53+
Default Radio 1
54+
</label>
55+
<label class="tpx-radio">
56+
<input type="radio" name="radio1" value="2">
57+
<span></span>
58+
Default Radio 2
59+
</label>
60+
<label class="tpx-radio">
61+
<input type="radio" name="radio1" value="3">
62+
<span></span>
63+
Default Radio 3
64+
</label>
65+
</div>
66+
67+
</div>
68+
</section>
69+
70+
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.3/highlight.min.js"></script>
71+
<script>hljs.initHighlightingOnLoad();</script>
72+
73+
</body>
74+
</html>

‎package.json‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"name": "tpxforms",
3+
"version": "1.0.0",
4+
"repository": {
5+
"type": "git",
6+
"url": "https://github.com/themepixels/tpxForms.git"
7+
},
8+
"author": "Mienard Lumaad",
9+
"license": "MIT",
10+
"homepage": "https://github.com/themepixels/tpxForms",
11+
"devDependencies": {
12+
"grunt": "^0.4.5",
13+
"grunt-contrib-connect": "^0.8.0",
14+
"grunt-contrib-less": "^0.11.4",
15+
"grunt-contrib-watch": "^0.6.1",
16+
"load-grunt-tasks": "^0.6.0"
17+
}
18+
}

‎tpxforms.css‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
/*!
2+
* TPX Forms
3+
* Released under MIT. Copyright 2014 Mienard Lumaad
4+
* http://ui.themepixels.com/tpxForms
5+
*
6+
* Github Repository: https://github.com/themepixels/tpxForms
7+
*/
8+
.tpx-radio {
9+
display: inline-block;
10+
position: relative;
11+
padding-left: 28px;
12+
line-height: 21px;
13+
margin-bottom: 5px;
14+
font-weight: 300;
15+
}
16+
.tpx-radio span {
17+
position: absolute;
18+
top: 2px;
19+
left: 0;
20+
width: 18px;
21+
height: 18px;
22+
display: inline-block;
23+
border: 1px solid #ccc;
24+
background-color: #fff;
25+
box-sizing: border-box;
26+
-webkit-border-radius: 50px;
27+
-moz-border-radius: 50px;
28+
border-radius: 50px;
29+
}
30+
.tpx-radio span:before {
31+
content: '';
32+
position: absolute;
33+
top: 3px;
34+
left: 3px;
35+
width: 10px;
36+
height: 10px;
37+
background-color: #333;
38+
-webkit-border-radius: 50px;
39+
-moz-border-radius: 50px;
40+
border-radius: 50px;
41+
display: none;
42+
}
43+
.tpx-radio > input[type="radio"] {
44+
position: absolute;
45+
opacity: 0;
46+
margin: 0;
47+
}
48+
.tpx-radio > input[type="radio"]:checked + span {
49+
border-color: #333;
50+
background-color: #ddd;
51+
}
52+
.tpx-radio > input[type="radio"]:checked + span:before {
53+
display: block;
54+
}
55+
.tpx-radio-sm {
56+
padding-left: 26px;
57+
}
58+
.tpx-radio-sm span {
59+
width: 16px;
60+
height: 16px;
61+
}
62+
.tpx-radio-sm span:before {
63+
width: 8px;
64+
height: 8px;
65+
}
66+
.tpx-radio-xs {
67+
padding-left: 24px;
68+
line-height: 18px;
69+
font-size: 14px;
70+
}
71+
.tpx-radio-xs span {
72+
width: 14px;
73+
height: 14px;
74+
}
75+
.tpx-radio-xs span:before {
76+
width: 6px;
77+
height: 6px;
78+
}

0 commit comments

Comments
 (0)