update readme and compile

README.md

@@ -18,7 +18,7 @@ You can use composer to install this package:
 
     $ composer require wpbones/pure-css-switch
 
-You may also to add `"wpbones/pure-css-switch": "^1.0"` in the `composer.json` file of your plugin:
+You may also to add `"wpbones/pure-css-switch": "~1.0"` in the `composer.json` file of your plugin:
 
 ```json
   "require": {
@@ -36,6 +36,11 @@ and run
 Alternatively, you can get the `src/resources/assets/less/wpbones-switch.less` and then compile it, or get directly the `src/public/css/wpbones-switch.css` files.    
 Also, you can get pre-compiled minified version `src/public/css/wpbones-switch.min.css`.
 
+## Development installation
+
+Use `yarn` to install the development tools. Next, use `gulp --production` to compile the resources.
+
+
 ## Enqueue for Controller
 
 You can use the provider to enqueue the styles.
@@ -69,6 +74,21 @@ PureCSSSwitchProvider::css();
 PureCSSSwitchProvider::css();   
 ```
 
+## Theme
+
+Of course, you can switch theme by using `theme` property ot its fluent version.
+Currently, we support two theme:
+
+* `flat-round` - defaul
+* `flat-square`
+
+You should use something lokk like:
+
+```php
+<?php echo WPKirk\PureCSSSwitch\Html\HtmlTagSwitchButton::name( 'test-switch-7' )->theme( 'flat-square' ); ?>
+```
+
+
 ## HTML markup
 
 In your view you can use the `WPKirk\PureCSSSwitch\Html\HtmlTagSwitchButton` class
@@ -99,4 +119,8 @@ In your view you can use the `WPKirk\PureCSSSwitch\Html\HtmlTagSwitchButton` cla
   <p>
     <?php echo WPKirk\PureCSSSwitch\Html\HtmlTagSwitchButton::name( 'test-switch-6' )->left_label( 'Swipe me' )->disabled( true ) ?>
   </p>
+
+  <p>
+    <?php echo WPKirk\PureCSSSwitch\Html\HtmlTagSwitchButton::name( 'test-switch-7' )->theme( 'flat-square' ); ?>
+  </p>
 ```

src/public/css/wpbones-switch-square.css

@@ -4,9 +4,9 @@
   height: 24px;
   vertical-align: middle;
   background-color: #aaa;
-  -webkit-border-radius: 60px;
-  -moz-border-radius: 60px;
-  border-radius: 60px;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
   -webkit-transition: background 0.4s;
   -moz-transition: background 0.4s;
   -o-transition: background 0.4s;
@@ -33,9 +33,9 @@
   bottom: 2px;
   right: 2px;
   background-color: #fff;
-  -webkit-border-radius: 60px;
-  -moz-border-radius: 60px;
-  border-radius: 60px;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
   -webkit-transition: background 0.4s;
   -moz-transition: background 0.4s;
   -o-transition: background 0.4s;
@@ -47,9 +47,9 @@
   bottom: 4px;
   width: 16px;
   background-color: #919191;
-  -webkit-border-radius: 52px;
-  -moz-border-radius: 52px;
-  border-radius: 52px;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
   -webkit-transition: margin 0.4s, background 0.4s;
   -moz-transition: margin 0.4s, background 0.4s;
   -o-transition: margin 0.4s, background 0.4s;

src/public/css/wpbones-switch-theme.css

@@ -122,9 +122,9 @@
   height: 24px;
   vertical-align: middle;
   background-color: #aaa;
-  -webkit-border-radius: 60px;
-  -moz-border-radius: 60px;
-  border-radius: 60px;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
   -webkit-transition: background 0.4s;
   -moz-transition: background 0.4s;
   -o-transition: background 0.4s;
@@ -151,9 +151,9 @@
   bottom: 2px;
   right: 2px;
   background-color: #fff;
-  -webkit-border-radius: 60px;
-  -moz-border-radius: 60px;
-  border-radius: 60px;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
   -webkit-transition: background 0.4s;
   -moz-transition: background 0.4s;
   -o-transition: background 0.4s;
@@ -165,9 +165,9 @@
   bottom: 4px;
   width: 16px;
   background-color: #919191;
-  -webkit-border-radius: 52px;
-  -moz-border-radius: 52px;
-  border-radius: 52px;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
   -webkit-transition: margin 0.4s, background 0.4s;
   -moz-transition: margin 0.4s, background 0.4s;
   -o-transition: margin 0.4s, background 0.4s;