-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
ddff06f
commit a101d07
Showing
5 changed files
with
176 additions
and
25 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,27 +1,36 @@ | ||
| #Happy components | ||
| # Happy components | ||
|
|
||
| See [demo](http://happy.paveljanda.com) | ||
|
|
||
| ##Usage | ||
|
|
||
| 1) Make sure you are using happy components | ||
|
|
||
| <link rel="stylesheet" type="text/css" href="src/assets/css/happy.css"> | ||
|
|
||
| <script type="text/javascript" src="../src/assets/js/happy.js"></script> | ||
|
|
||
| 2) Use them: | ||
|
|
||
| * Simple: | ||
|
|
||
| <label> | ||
| <input class="happy" type="radio" name="animal" value="dog"> A dog | ||
| </label> | ||
|
|
||
| * Colored (as you are used to from Bootstrap) | ||
|
|
||
| <input class="happy primary"> | ||
|
|
||
| 3) In case you need to re-init Happy JS, call | ||
|
|
||
| window.happy.reset(); | ||
| ## Installation | ||
|
|
||
| ```bash | ||
| npm install happy-inputs | ||
| ``` | ||
|
|
||
| ## Usage | ||
|
|
||
| ```html | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>Happy</title> | ||
| <link rel="stylesheet" type="text/css" href="./node_modules/happy-inputs/src/happy.css"> | ||
|
|
||
| <script type="module"> | ||
| import Happy from './node_modules/happy-inputs/src/Happy.js'; | ||
| Happy.init(); | ||
| </script> | ||
| </head> | ||
| <body> | ||
| <!-- Default - black --> | ||
| <label> | ||
| <input class="happy" type="radio" name="animal" value="dog"> A dog | ||
| </label> | ||
|
|
||
| <!-- Colored (as you are used to from Bootstrap) --> | ||
| <input class="happy primary"> | ||
| </body> | ||
| </html> | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,105 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>Happy</title> | ||
| <link rel="stylesheet" type="text/css" href="./node_modules/happy-inputs/src/happy.css"> | ||
| <link rel="stylesheet" type="text/css" href="./styles.css"> | ||
|
|
||
| <script type="module"> | ||
| import Happy from './node_modules/happy-inputs/src/Happy.js'; | ||
|
|
||
| Happy.init(); | ||
| </script> | ||
| </head> | ||
| <body> | ||
| <h1>Happy components</h1> | ||
|
|
||
| <div class="container"> | ||
| <div class="example"> | ||
| <h2>Sad radio <span class="smiley">:(</span></h2> | ||
|
|
||
| <label> | ||
| <input type="radio" name="animal" value="dog"> A dog | ||
| </label> | ||
| <label> | ||
| <input type="radio" name="animal" value="cat"> A cat | ||
| </label> | ||
|
|
||
| <h2>Happy radio <span class="smiley">:)</span></h2> | ||
|
|
||
| <label> | ||
| <input class="happy" type="radio" name="animal1" value="dog"> A dog | ||
| </label> | ||
| <label> | ||
| <input class="happy" type="radio" name="animal1" value="cat"> A cat | ||
| </label> | ||
|
|
||
| <h2>Very Happy <span class="smiley">radio :) :)</span></h2> | ||
|
|
||
| <label> | ||
| <input class="happy primary" type="radio" name="animal2" value="dog"> A dog | ||
| </label> | ||
| <label> | ||
| <input class="happy success" type="radio" name="animal2" value="cat"> A cat | ||
| </label> | ||
| <label> | ||
| <input class="happy danger" type="radio" name="animal2" value="whale"> A whale | ||
| </label> | ||
| <label> | ||
| <input class="happy warning" type="radio" name="animal2" value="lion"> A lion | ||
| </label> | ||
| <label> | ||
| <input class="happy info" type="radio" name="animal2" value="mouse"> A mouse | ||
| </label> | ||
|
|
||
| <hr> | ||
|
|
||
| <input class="happy primary" type="radio" name="a1" value="a1" checked> | ||
| <input class="happy success" type="radio" name="a2" value="a2" checked> | ||
| <input class="happy danger" type="radio" name="a3" value="a3" checked> | ||
| <input class="happy warning" type="radio" name="a4" value="a4" checked> | ||
| <input class="happy info" type="radio" name="a5" value="a5" checked> | ||
| </div> | ||
|
|
||
| <div class="example"> | ||
| <h2>Sad checkbox <span class="smiley">:(</span></h2> | ||
|
|
||
| <label> | ||
| <input type="checkbox" name="hungry1"> Hungry | ||
| </label> | ||
| <label> | ||
| <input type="checkbox" name="remember_i_am_hungry2"> Remember that i am hungry | ||
| </label> | ||
|
|
||
| <h2>Happy checkbox <span class="smiley">:)</span></h2> | ||
|
|
||
| <label> | ||
| <input class="happy" type="checkbox" name="hungry"> Hungry | ||
| </label> | ||
| <label> | ||
| <input class="happy" type="checkbox" name="remember_i_am_hungry"> Remember that i am hungry | ||
| </label> | ||
|
|
||
| <h2>Colored border <span class="smiley">:) :)</span></h2> | ||
|
|
||
| <label> | ||
| <input class="happy primary primary-border" type="checkbox" name="12"> Primary border | ||
| </label> | ||
| <label> | ||
| <input class="happy primary danger-border" type="checkbox" name="13"> Red border | ||
| </label> | ||
| <label> | ||
| <input class="happy primary gray-border" type="checkbox" name="14"> + Gray border | ||
| </label> | ||
|
|
||
| <h2>Very happy checkbox <span class="smiley">:) :)</span></h2> | ||
|
|
||
| <input class="happy primary" type="checkbox" name="very_happy_checkbox_1" checked> | ||
| <input class="happy success" type="checkbox" name="very_happy_checkbox_2" checked> | ||
| <input class="happy danger" type="checkbox" name="very_happy_checkbox_3" checked> | ||
| <input class="happy warning" type="checkbox" name="very_happy_checkbox_4" checked> | ||
| <input class="happy info" type="checkbox" name="very_happy_checkbox_5" checked> | ||
| </div> | ||
| </div> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| body { | ||
| margin: 0; | ||
| text-align: center; | ||
| font-family: 'Helvetica-neue', Helvetica, Arial; | ||
| } | ||
|
|
||
| .container { | ||
| position: relative; | ||
| margin: auto; | ||
| width: 500px; | ||
| } | ||
|
|
||
| .example { | ||
| padding: 2em; | ||
| margin: 0 0 1em; | ||
| border: 1px solid #E6E6E6; | ||
| text-align: left; | ||
| } | ||
|
|
||
| h1, h2, h3 { | ||
| font-weight: normal; | ||
| opacity: 0.6; | ||
| } | ||
|
|
||
| h2 { | ||
| margin: 1em 1em; | ||
| text-align: center; | ||
| color: red; | ||
| } | ||
|
|
||
| h2:first-child { | ||
| margin-top: 0; | ||
| } | ||
|
|
||
| label { | ||
| display: block; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.