prelude-framework 0.7

data/scss/prelude/modules/_buttons.scss

@@ -0,0 +1,126 @@
+// =============================================================================
+// Buttons
+//
+// Basic button styles.
+//
+// Table of contents:
+// 1. Button class
+// 2. States
+// 3. Sizes
+// 4. Styles
+// 5. Button groups
+//
+// =============================================================================
+
+@import "../mixins/button-style",
+		"../mixins/rem";
+
+// =============================================================================
+// 1. Button class
+// =============================================================================
+
+.btn {
+
+	@include btn-style($btn-background);
+
+	// Use a gradient
+	@if $btn-use-gradient == true {
+		box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
+	}
+
+	// Add a shadow
+	@if $btn-use-shadow == true {
+		box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 1px rgba(0,0,0,.25);
+	}
+
+	display: inline-block;
+	margin-bottom: 0; // For input.btn
+  	padding: $btn-padding;
+	font-weight: $btn-font-weight;
+	line-height: 1.25;
+	text-align: center;
+	text-decoration: none;
+	vertical-align: middle;
+	border-radius: $btn-border-radius;
+	border: 1px solid darken($white,10%);
+	cursor: pointer;
+	-webkit-tap-highlight-color: rgba(0,0,0,0);
+
+
+// =============================================================================
+// 2. States
+// =============================================================================
+
+	&:hover {
+		@if $btn-use-gradient == true {
+			@include transition(background-position .1s linear);
+			background-position: 0 -15px;
+		} @else {
+			@include transition(background-color .1s linear);
+		}
+		color: $gray-dark;
+		text-decoration: none;
+	}
+
+	&.is-active,
+	&:active {
+		// Disabled inset shadow as it's a performance hog when having multiple buttons on the same screen on the iPhone 4
+		//box-shadow: inset 0 1px 1px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
+		box-shadow: inset 0 1px 1px 0 rgba(0,0,0,.5);
+  		background-image: none !important;
+  		outline: 0;
+	}
+
+	&.btn--disabled,
+	&[disabled] {
+  		@include opacity(.65);
+		box-shadow: none;
+  		cursor: default;
+  		background-color: darken($white, 10%);
+  		background-image: none;
+	}
+
+
+// =============================================================================
+// 3. Sizes
+// =============================================================================
+
+	&.btn--large	{ @include rem(font-size, $gamma); }
+	&.btn--medium	{ @include rem(font-size, $delta); }
+	&.btn--small	{ @include rem(font-size, $micro); }
+	&.btn--tiny     { @include rem(font-size, $nano); }
+	&.btn--expand	{ width: 100%; }
+
+
+// =============================================================================
+// 4. Styles
+// =============================================================================
+
+	@if $create-btn-styles == true {
+		&.btn--primary	{ @include btn-style($btn-primary-background); }
+		&.btn--info     { @include btn-style($btn-info-background); }
+		&.btn--success	{ @include btn-style($btn-success-background); }
+		&.btn--warning	{ @include btn-style($btn-warning-background); }
+		&.btn--danger	{ @include btn-style($btn-danger-background); }
+		&.btn--inverse	{ @include btn-style($btn-inverse-background); }
+	}
+}
+
+
+// =============================================================================
+// 5. Button groups
+// =============================================================================
+
+.btn-group {
+	.btn {
+		padding-left: $half-spacing-unit;
+        padding-right: $half-spacing-unit;
+		border-radius: 0;
+
+		@if ($btn-border-radius != none) {
+			&:first-child { border-radius: $btn-border-radius 0 0 $btn-border-radius; }
+			&:last-child { border-radius: 0 $btn-border-radius $btn-border-radius 0; }
+		}
+
+	}
+}