rename lib, reorganize css, update readme license

flatlogic · Mar 31, 2014 · e310e6e · e310e6e
1 parent e50e1f5
commit e310e6e
Show file tree

Hide file tree

Showing 7 changed files with 155 additions and 66 deletions.
diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2014 
+Copyright (c) 2014 flatlogic.com
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/README.md b/README.md
@@ -1,4 +1,88 @@
-awesome-bootstrap-checkbox
+Awesome Bootstrap Checkbox
 ==========================
 
-Font Awesome Bootstrap Checkboxes &amp; Radios. Pure css way to make inputs look prettier.
+Font Awesome Bootstrap Checkboxes &amp; Radios plugin. Pure css way to make inputs look prettier. **No javascript**!
+
+**[Demo](#)**
+
+Use
+------------
+
+First just include **awesome-bootstrap-checkbox.css** somewhere in your html. Or **awesome-bootstrap-checkbox.scss** if you use sass.
+Next everything is based on code convention. Here is checkbox markup from Bootstrap site:
+
+    <form role="form">
+      ...
+      <div class="checkbox">
+        <label>
+          <input type="checkbox"> Check me out
+        </label>
+      </div>
+      ...
+    </form>
+
+We have to alter it a bit:
+
+    <form role="form">
+      ...
+      <div class="checkbox">
+        <input type="checkbox" id="checkbox1">
+        <label for="checkbox1">
+            Check me out
+        </label>
+      </div>
+      ...
+    </form>
+
+That's it. It will work. But it **will not** work if you nest input inside label or put label before input.
+
+Radios
+------------
+
+It's the same for radios. Markup has to be the following:
+
+    <form role="form">
+      ...
+      <div class="radio">
+          <input type="radio" name="radio2" id="radio3" value="option1">
+          <label for="radio3">
+              One
+          </label>
+      </div>
+      <div class="radio">
+          <input type="radio" name="radio2" id="radio4" value="option2" checked>
+          <label for="radio4">
+              Two
+          </label>
+      </div>
+      ...
+    </form>
+
+Brand Colors
+------------
+
+You may use `checkbox-primary`, `checkbox-danger`, `radio-info`, etc to style checkboxes and radios with brand bootstrap colors.
+
+`checkbox-circle` is for rounded checkboxes.
+
+Glyphicons way (Opt-out Font Awesome)
+------------
+
+If you want to use glyphicons instead of font-awesome then override `.checkbox` class:
+
+    .checkbox input[type=checkbox]:checked + label:after {
+        font-family: 'Glyphicons Halflings';
+        content: "\e013";
+    }
+    .checkbox label:after {
+        padding-left: 4px;
+        padding-top: 2px;
+        font-size: 9px;
+    }
+
+Credits
+------------
+
+Based on [Official Bootstrap Sass port](https://github.com/twbs/bootstrap-sass) and awesome [Font Awesome](https://github.com/FortAwesome/Font-Awesome).
+
+Inspired by [Web Arch Template](http://www.revox.io/webarchv2/form_elements.html)
diff --git a/font-awesome-checkbox.css → awesome-bootstrap-checkbox.css b/font-awesome-checkbox.css → awesome-bootstrap-checkbox.css
@@ -1,8 +1,8 @@
 .checkbox label {
-    display: inline-block;
-    position: relative;
-    padding-left: 5px; }
-.checkbox label:before {
+  display: inline-block;
+  position: relative;
+  padding-left: 5px; }
+  .checkbox label:before {
     content: "";
     display: inline-block;
     width: 17px;
@@ -15,7 +15,7 @@
     background-color: #fff;
     -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
     transition: border 0.15s ease-in-out, color 0.15s ease-in-out; }
-.checkbox label:after {
+  .checkbox label:after {
     display: inline-block;
     width: 16px;
     height: 16px;
@@ -28,53 +28,53 @@
     font-size: 11px;
     color: #555555; }
 .checkbox input[type=checkbox] {
-    display: none; }
-.checkbox input[type=checkbox]:checked + label:after {
+  display: none; }
+  .checkbox input[type=checkbox]:checked + label:after {
     font-family: 'FontAwesome';
     content: "\f00c"; }
-.checkbox input[type=checkbox]:disabled + label {
+  .checkbox input[type=checkbox]:disabled + label {
     opacity: 0.65; }
-.checkbox input[type=checkbox]:disabled + label:before {
-    background-color: #eeeeee;
-    cursor: not-allowed; }
+    .checkbox input[type=checkbox]:disabled + label:before {
+      background-color: #eeeeee;
+      cursor: not-allowed; }
 .checkbox.checkbox-circle label:before {
-    border-radius: 50%; }
+  border-radius: 50%; }
 
 .checkbox-primary input[type=checkbox]:checked + label:before {
-    background-color: #428bca;
-    border-color: #428bca; }
+  background-color: #428bca;
+  border-color: #428bca; }
 .checkbox-primary input[type=checkbox]:checked + label:after {
-    color: #fff; }
+  color: #fff; }
 
 .checkbox-danger input[type=checkbox]:checked + label:before {
-    background-color: #d9534f;
-    border-color: #d9534f; }
+  background-color: #d9534f;
+  border-color: #d9534f; }
 .checkbox-danger input[type=checkbox]:checked + label:after {
-    color: #fff; }
+  color: #fff; }
 
 .checkbox-info input[type=checkbox]:checked + label:before {
-    background-color: #5bc0de;
-    border-color: #5bc0de; }
+  background-color: #5bc0de;
+  border-color: #5bc0de; }
 .checkbox-info input[type=checkbox]:checked + label:after {
-    color: #fff; }
+  color: #fff; }
 
 .checkbox-warning input[type=checkbox]:checked + label:before {
-    background-color: #f0ad4e;
-    border-color: #f0ad4e; }
+  background-color: #f0ad4e;
+  border-color: #f0ad4e; }
 .checkbox-warning input[type=checkbox]:checked + label:after {
-    color: #fff; }
+  color: #fff; }
 
 .checkbox-success input[type=checkbox]:checked + label:before {
-    background-color: #5cb85c;
-    border-color: #5cb85c; }
+  background-color: #5cb85c;
+  border-color: #5cb85c; }
 .checkbox-success input[type=checkbox]:checked + label:after {
-    color: #fff; }
+  color: #fff; }
 
 .radio label {
-    display: inline-block;
-    position: relative;
-    padding-left: 5px; }
-.radio label:before {
+  display: inline-block;
+  position: relative;
+  padding-left: 5px; }
+  .radio label:before {
     content: "";
     display: inline-block;
     width: 17px;
@@ -87,7 +87,7 @@
     background-color: #fff;
     -webkit-transition: border 0.15s ease-in-out;
     transition: border 0.15s ease-in-out; }
-.radio label:after {
+  .radio label:after {
     display: inline-block;
     content: " ";
     width: 11px;
@@ -106,47 +106,47 @@
     -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
     transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); }
 .radio input[type=radio] {
-    display: none; }
-.radio input[type=radio]:checked + label:after {
+  display: none; }
+  .radio input[type=radio]:checked + label:after {
     -webkit-transform: scale(1);
     -ms-transform: scale(1);
     transform: scale(1); }
-.radio input[type=radio]:disabled + label {
+  .radio input[type=radio]:disabled + label {
     opacity: 0.65; }
-.radio input[type=radio]:disabled + label:before {
-    cursor: not-allowed; }
+    .radio input[type=radio]:disabled + label:before {
+      cursor: not-allowed; }
 
 .radio-primary input[type=radio] + label:after {
-    background-color: #428bca; }
+  background-color: #428bca; }
 .radio-primary input[type=radio]:checked + label:before {
-    border-color: #428bca; }
+  border-color: #428bca; }
 .radio-primary input[type=radio]:checked + label:after {
-    background-color: #428bca; }
+  background-color: #428bca; }
 
 .radio-danger input[type=radio] + label:after {
-    background-color: #d9534f; }
+  background-color: #d9534f; }
 .radio-danger input[type=radio]:checked + label:before {
-    border-color: #d9534f; }
+  border-color: #d9534f; }
 .radio-danger input[type=radio]:checked + label:after {
-    background-color: #d9534f; }
+  background-color: #d9534f; }
 
 .radio-info input[type=radio] + label:after {
-    background-color: #5bc0de; }
+  background-color: #5bc0de; }
 .radio-info input[type=radio]:checked + label:before {
-    border-color: #5bc0de; }
+  border-color: #5bc0de; }
 .radio-info input[type=radio]:checked + label:after {
-    background-color: #5bc0de; }
+  background-color: #5bc0de; }
 
 .radio-warning input[type=radio] + label:after {
-    background-color: #f0ad4e; }
+  background-color: #f0ad4e; }
 .radio-warning input[type=radio]:checked + label:before {
-    border-color: #f0ad4e; }
+  border-color: #f0ad4e; }
 .radio-warning input[type=radio]:checked + label:after {
-    background-color: #f0ad4e; }
+  background-color: #f0ad4e; }
 
 .radio-success input[type=radio] + label:after {
-    background-color: #5cb85c; }
+  background-color: #5cb85c; }
 .radio-success input[type=radio]:checked + label:before {
-    border-color: #5cb85c; }
+  border-color: #5cb85c; }
 .radio-success input[type=radio]:checked + label:after {
-    background-color: #5cb85c; }
+  background-color: #5cb85c; }
diff --git a/font-awesome-checkbox.scss → awesome-bootstrap-checkbox.scss b/font-awesome-checkbox.scss → awesome-bootstrap-checkbox.scss
@@ -25,9 +25,9 @@
     &:before{
       content: "";
       display: inline-block;
+      position: absolute;
       width: 17px;
       height: 17px;
-      position: absolute;
       left: 0;
       margin-left: -20px;
       border: 1px solid $input-border;
@@ -38,14 +38,14 @@
 
     &:after{
       display: inline-block;
+      position: absolute;
       width: 16px;
       height: 16px;
       left: 0;
       top: 0;
       margin-left: -20px;
       padding-left: 3px;
       padding-top: 1px;
-      position: absolute;
       font-size: 11px;
       color: $gray;
     }
@@ -104,7 +104,7 @@
 }
 
 .radio{
-  
+
   label{
     display: inline-block;
     position: relative;
@@ -113,9 +113,9 @@
     &:before{
       content: "";
       display: inline-block;
+      position: absolute;
       width: 17px;
       height: 17px;
-      position: absolute;
       left: 0;
       margin-left: -20px;
       border: 1px solid $input-border;
@@ -126,13 +126,13 @@
 
     &:after{
       display: inline-block;
+      position: absolute;
       content: " ";
       width: 11px;
       height: 11px;
       left: 3px;
       top: 3px;
       margin-left: -20px;
-      position: absolute;
       border-radius: 50%;
       background-color: $gray;
       @include scale(0);

diff --git a/demo/build.css b/demo/build.css
@@ -5,9 +5,9 @@
   .checkbox label:before {
     content: "";
     display: inline-block;
+    position: absolute;
     width: 17px;
     height: 17px;
-    position: absolute;
     left: 0;
     margin-left: -20px;
     border: 1px solid #cccccc;
@@ -17,14 +17,14 @@
     transition: border 0.15s ease-in-out, color 0.15s ease-in-out; }
   .checkbox label:after {
     display: inline-block;
+    position: absolute;
     width: 16px;
     height: 16px;
     left: 0;
     top: 0;
     margin-left: -20px;
     padding-left: 3px;
     padding-top: 1px;
-    position: absolute;
     font-size: 11px;
     color: #555555; }
 .checkbox input[type=checkbox] {
@@ -77,9 +77,9 @@
   .radio label:before {
     content: "";
     display: inline-block;
+    position: absolute;
     width: 17px;
     height: 17px;
-    position: absolute;
     left: 0;
     margin-left: -20px;
     border: 1px solid #cccccc;
@@ -89,13 +89,13 @@
     transition: border 0.15s ease-in-out; }
   .radio label:after {
     display: inline-block;
+    position: absolute;
     content: " ";
     width: 11px;
     height: 11px;
     left: 3px;
     top: 3px;
     margin-left: -20px;
-    position: absolute;
     border-radius: 50%;
     background-color: #555555;
     -webkit-transform: scale(0);