Updated pages

LICENSE

@@ -1,20 +1,19 @@
-The MIT License (MIT)
+Copyright (C) 2013 Hakim El Hattab, http://hakim.se
 
-Copyright (c) 2013 Maksim Surguy
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
 
-Permission is hereby granted, free of charge, to any person obtaining a copy of
-this software and associated documentation files (the "Software"), to deal in
-the Software without restriction, including without limitation the rights to
-use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
-the Software, and to permit persons to whom the Software is furnished to do so,
-subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
 
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
-FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
-COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
-IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
-CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

README.md

@@ -1,4 +1,91 @@
-ladda-bootstrap
-===============
+# Ladda
 
-Ladda buttons concept originally by @hakimel, example using Bootstrap 3 by @msurguy
+Buttons with built-in loading indicators, effectively bridging the gap between action and feedback. 
+
+[Check out the demo page](http://lab.hakim.se/ladda/).
+
+
+## Instructions
+
+Release downloads and change history is available here <https://github.com/hakimel/Ladda/releases>.
+
+The compiled files for the project that you should be using are available in the **/dist** directory. You will need to include both the **ladda.min.js** and **spin.min.js** files as well as ONE of the two style sheets. If you want the button styles used in the [Ladda example page](http://lab.hakim.se/ladda) use the **ladda.min.css** file, if you want to have the functional buttons without the visual style (colors, padding etc) use the **ladda-themeless.min.css** file.
+
+#### HTML
+
+Ladda buttons must be given the class ```ladda-button``` and the button label needs to have the ```ladda-label``` class. The ```ladda-label``` will be automatically created if it does not exist in the DOM. Below is an example of a button which will use the expand-right animation style.
+
+```html
+<button class="ladda-button" data-style="expand-right"><span class="ladda-label">Submit</span></button>
+```
+
+Buttons accepts three attributes:
+- **data-style**: one of the button styles, full list in [demo](http://lab.hakim.se/ladda/) *[required]*
+- **data-color**: green/red/blue/purple/mint
+- **data-size**: xs/s/l/xl, defaults to medium
+- **data-spinner-size**: 40, pixel dimensions of spinner, defaults to dynamic size based on the button height
+- **data-spinner-color**: A hex code or any [named CSS color](http://css-tricks.com/snippets/css/named-colors-and-hex-equivalents/). 
+
+#### JavaScript
+
+If you will be using the loading animation for a form that is submitted to the server (always resulting in a page reload) you can use the ```bind()``` method:
+
+```javascript
+// Automatically trigger the loading animation on click
+Ladda.bind( 'input[type=submit]' );
+
+// Same as the above but automatically stops after two seconds
+Ladda.bind( 'input[type=submit]', { timeout: 2000 } );
+```
+
+If you want JavaScript control over your buttons you can use the following approach:
+
+```javascript
+// Create a new instance of ladda for the specified button
+var l = Ladda.create( document.querySelector( '.my-button' ) );
+
+// Start loading
+l.start();
+
+// Will display a progress bar for 50% of the button width
+l.setProgress( 0.5 );
+
+// Stop loading
+l.stop();
+
+// Toggle between loading/not loading states
+l.toggle();
+
+// Check the current state
+l.isLoading();
+```
+
+All loading animations on the page can be stopped by using:
+
+```javascript
+Ladda.stopAll();
+```
+
+## Module
+
+The spinner and Ladda can be loaded as a module using either Common.js or AMD.
+
+```javascript
+// Using Require.js
+define(['ladda'], function(Ladda) {
+	// Make Buttons Here
+});
+```
+## Browser support
+
+The project is tested in Chrome and Firefox. It Should Work™ in the current stable releases of Chrome, Firefox, Safari as well as IE9 and up.
+
+## Changelog
+
+<https://github.com/hakimel/Ladda/releases>
+
+## License
+
+MIT licensed
+
+Copyright (C) 2013 Hakim El Hattab, http://hakim.se

css/ladda-theme.scss

@@ -0,0 +1,80 @@
+/** Contains the default Ladda button theme styles */
+
+
+/*************************************
+ * CONFIG
+ */
+
+$green: #2aca76;
+$blue: #53b5e6;
+$red: #ea8557;
+$purple: #9973C2;
+$mint: #16a085;
+
+
+/*************************************
+ * BUTTON THEME
+ */
+
+.ladda-button {
+	background: #666;
+	border: 0;
+	padding: 14px 18px;
+	font-size: 18px;
+	cursor: pointer;
+
+	color: #fff;
+	border-radius: 2px;
+	border: 1px solid transparent;
+
+	-webkit-appearance: none;
+	-webkit-font-smoothing: antialiased;
+	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+
+	&:hover {
+		border-color: rgba( 0, 0, 0, 0.07 );
+		background-color: #888;
+	}
+
+	@include buttonColor( 'green', $green );
+	@include buttonColor( 'blue', $blue );
+	@include buttonColor( 'red', $red );
+	@include buttonColor( 'purple', $purple );
+	@include buttonColor( 'mint', $mint );
+
+	&[disabled],
+	&[data-loading] {
+		border-color: rgba( 0, 0, 0, 0.07 );
+		cursor: default;
+		background-color: #999;
+
+		&:hover {
+			cursor: default;
+			background-color: #999;
+		}
+	}
+
+	&[data-size=xs] {
+		padding: 4px 8px;
+
+		.ladda-label {
+			font-size: 0.7em;
+		}
+	}
+
+	&[data-size=s] {
+		padding: 6px 10px;
+
+		.ladda-label {
+			font-size: 0.9em;
+		}
+	}
+
+	&[data-size=l] .ladda-label {
+		font-size: 1.2em;
+	}
+
+	&[data-size=xl] .ladda-label {
+		font-size: 1.5em;
+	}
+}