updated less and docs

Author: themepixels

README.md

@@ -1,6 +1,14 @@
 tpxForms
 =========
 
-tpxForms is an enhanced version of some of the form elements (checkbox and radio) using only css.
+tpxForms is an enhanced version of some of the html form elements written in LESS and compiled in css. Available elements for this version are radios and checkbox only.
 
 [View Demo & Documentation](http://ui.themepixels.com/tpxforms)
+
+### Contributing
+
+Open an issue or a pull request to suggest changes or additions **develop** branch.
+
+### License
+
+[MIT licensed.](LICENSE.md) Copyright 2014 @themepixels.

docs/docs.css

@@ -9,10 +9,10 @@
 body {
   margin: 0;
   color: #444;
-  background-color: #fff;
   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-weight: 300;
   font-size: 16px;
+  position: relative;
 }
 
 a {
@@ -21,6 +21,7 @@ a {
 }
 
 a:hover { color: #0766e7; }
+a:focus { outline: none; }
 
 p { line-height: 23px; }
 
@@ -32,6 +33,8 @@ pre {
   font-size: 13px;
 }
 
+.link-pre { margin-bottom: 60px; }
+
 hr {
   border: 0;
   border-bottom: 1px dotted #ddd;
@@ -44,44 +47,122 @@ hr {
   font-weight: 400;
 }
 
+.leftpanel {
+  position: fixed;
+  z-index: 100;
+  top: 0;
+  left: 0;
+  width: 220px;
+  padding: 20px;
+}
+
+.leftpanel:before {
+  content: '';
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 220px;
+  background-color: #656971;
+  z-index: -1;
+}
+
+@media screen and (max-width: 640px) {
+  .leftpanel {
+    position: static;
+    background-color: #656971;
+    width: auto;
+  }
+
+  .leftpanel:before {
+    display: none;
+  }
+}
+
+.leftpanel .themepixels-logo {
+  color: #fff;
+  font-weight: 100;
+  margin: 0 0 20px;
+  font-size: 30px;
+  border-bottom: 1px solid rgba(255,255,255,.1);
+  padding-bottom: 20px;
+}
+
+.leftpanel .themepixels-logo a,
+.leftpanel .themepixels-logo a:hover {
+  color: #fff;
+  text-decoration: none;
+}
+
+.leftpanel .nav {
+  border-top: 1px solid rgba(255,255,255,.1);
+  margin-top: 20px;
+  padding-top: 20px;
+}
+
+@media screen and (max-width: 640px) {
+  .leftpanel .nav {
+    display: none;
+  }
+}
+
+.leftpanel .nav > li {
+  padding: 5px 0;
+}
+
+.leftpanel .nav > li > a {
+  color: #fff;
+  padding: 0;
+  opacity: .5;
+}
+
+.leftpanel .nav > li > a:hover,
+.leftpanel .nav > li > a:active,
+.leftpanel .nav > li > a:focus,
+.leftpanel .nav > li.active > a,
+.leftpanel .nav > li.active > a:hover,
+.leftpanel .nav > li.active > a:active,
+.leftpanel .nav > li.active > a:focus {
+  background: none;
+  opacity: 1;
+}
+
 .mainpanel {
-  max-width: 1024px;
-  margin: auto;
+  max-width: 720px;
+  margin-left: 220px;
   padding: 20px 30px;
   box-sizing: border-box;
   border-top: 0;
   border-bottom: 0;
 }
 
-.tpx-logo {
-  font-size: 50px;
-  color: #066efb;
-  font-weight: 500;
-  margin-bottom: 20px;
-  margin-top: 0;
-}
-
-.tpx-logo span {
-  color: #000;
-  font-weight: 300;
+@media screen and (max-width: 640px) {
+  .mainpanel {
+    margin-left: 0;
+  }
 }
 
 .tpx-desc {
   font-weight: 200;
   font-size: 20px;
+  margin: 0;
+  line-height: 30px;
+  margin-bottom: 20px;
 }
 
 .tpx-social {
   font-size: 32px;
   margin: 0;
 }
 
-.tpx-social .github { color: #333; }
-.tpx-social .github:hover { color: #000; }
-.tpx-social .twitter { color: #1AB2E8; }
-.tpx-social .twitter:hover { color: #189fcf; }
-.tpx-social .dribbble { color: #C32361; }
-.tpx-social .dribbble:hover { color: #ad1e55; }
+.tpx-social a {
+  color: #fff;
+  opacity: .5;
+}
+
+.tpx-social a:hover {
+  opacity: 1;
+}
 
 .sectitle {
   font-size: 36px;
@@ -105,14 +186,34 @@ hr {
   margin: 2px 0 20px;
 }
 
+.radio-wrapper,
+.checkbox-wrapper {
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
 .tpx-radio {
   margin-right: 20px;
 }
 
-.inline-block { display: inline-block; }
+.btn-wrapper { display: inline-block; }
+.btn-wrapper small { display: block; }
+
+@media screen and (max-width: 480px) {
+  .btn-wrapper {
+    display: block;
+    margin-bottom: 20px;
+    text-align: center;
+  }
+
+  .btn-wrapper a {
+    display: block;
+    text-align: center;
+  }
+}
 
 .download-btn {
-  display: block;
+  display: inline-block;
   margin-right: 20px;
   margin-bottom: 5px;
   padding: 12px 20px;
@@ -121,6 +222,20 @@ hr {
   border-radius: 4px;
 }
 
+.download-btn:hover,
+.download-btn:active,
+.download-btn:focus {
+  border-color: #333;
+  color: #333;
+  text-decoration: none;
+}
+
 .tpx-radio-xs {
   font-size: 14px;
 }
+
+.footer {
+  margin-top: 30px;
+  padding-top: 20px;
+  border-top: 1px dotted #ddd;
+}