Merge pull request #1 from CastleCSS/develop

Release 1.0

Author: dariusrosendahl

README.md

@@ -1,5 +1,5 @@
-# CastleCSS Icons Files
-CastleCSS basic button module
+# CastleCSS Buttons
+This is a subpackage for CastleCSS with example buttons to help you get started.
 
 ![CastleCSS logo @CastleCss.com](https://www.doordarius.nl/castlecss-logo-250.png)
 
@@ -17,7 +17,7 @@ Even easier: Download the [CastleCSS Boilerplate](https://www.github.com/CastleC
 - Download or clone the package
 
 ## Updating files
-CastleCSS is built so it's easy to update, you can just download make it your own as long as you don't ovewrite the core files. 
+CastleCSS is built so it's easy to update, you can just download make it your own as long as you don't ovewrite the core files.
 
 ```npm update castlecss-buttons```
 
@@ -31,12 +31,12 @@ With this you make sure your own variables overwrite the castle-core variables a
 ```
 | Your project/
 |
-|-- scss/ 
+|-- scss/
 | |-- /* Custom project specific scss files here */
 | |-- Main.scss
 | |
 |-- node_modules/
-| | 
+| |
 | | /*	CastleCSS files included automatically here */
 | | castlecss-core/
 | | castlecss-buttons/
@@ -57,7 +57,7 @@ Your main.scss should have a setup similair to this (included in the [CastleCSS
 @import "node_modules/castlecss-core/sass/main";
 @import "node_modules/castlecss-buttons/sass/main";
 
- 
+
 /*  Include your own files below this line
     --------------------------------------
 */

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "castlecss-buttons",
-  "version": "0.5.0",
+  "version": "1.0.0",
   "description": "Buttons module for CastleCSS",
   "main": "index.js",
   "scripts": {

package.json

@@ -1,50 +1,82 @@
 /* 	Buttons */
-
-.btn {
-    display: inline-block;
-    padding: 1rem 1.5rem;
-    height: 4rem; /* same as form element height */
+%btn {
+	display: inline-block;
+	padding: 1rem 1.5rem;
+	min-height: 4rem; /* same as form element height */
 	font-family: $font-sec;
-    line-height: 1.3;
+	line-height: 1.3;
 	text-align: center;
-    text-decoration: none;
+	text-decoration: none;
 	cursor: pointer;
-    background-color: $theme01; color: $color01;
-    border: none; /* necessary for type button */
+	color: $color01;
+	background-color: $theme01;
+	border: none; /* necessary for type button */
 	transition: all .2s ease-out;
-	border-radius: $radius;
+	border-radius: 3px;
 
 	&:hover {
-	    background: $color02; 
-	    color: $color01;
+		color: $color01;
+		background-color: darken($theme01, 20);
 	}
 }
-.btn-theme01 {
-	@extend .btn;
-	background-color: $theme01;
-	color: $color01;
-}
-.btn-theme02 {
-	@extend .btn;
-	background-color: $theme02;
-	color: $color01;
-}
-.btn-theme03 {
-	@extend .btn;
-	background-color: $theme03;
-	color: $color01;
-}
-.btn-theme04 {
-	@extend .btn;
-	background-color: $theme04;
-	color: $color02;
-}
-.btn-theme05 {
-	@extend .btn;
-	background-color: $theme05;
-	color: $color02;
-}
-.btn-full {
-	clear: both;
-	width: 100%;
+
+.btn {
+	@extend %btn;
+
+	&-theme01 {
+		@extend %btn;
+		background-color: $theme01;
+		color: $color01;
+
+		&:hover {
+			background-color: darken($theme01, 20);
+		}
+	}
+
+	&-theme02 {
+		@extend %btn;
+		background-color: $theme02;
+		color: $color01;
+
+		&:hover {
+			background-color: darken($theme02, 20);
+		}
+	}
+
+	&-theme03 {
+		@extend %btn;
+		background-color: $theme03;
+		color: $color01;
+
+		&:hover {
+			background-color: darken($theme03, 20);
+		}
+	}
+
+	&-theme04 {
+		@extend %btn;
+		background-color: $theme04;
+		color: $color02;
+
+		&:hover {
+			background-color: darken($theme04, 20);
+		}
+	}
+
+	&-theme05 {
+		@extend %btn;
+		color: $color02;
+		background-color: $theme05;
+
+		&:hover {
+			background-color: darken($theme05, 20);
+		}
+
+	}
+
+	// extra utility class to make buttons full width
+	&-full {
+		clear: both;
+		width: 100%;
+	}
 }