simple-button-generator 0.0.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 202921d85474f217a4135a6f7226130b1c8a4857
+  data.tar.gz: e144509c4d7a21ec3dbf136be4883e82dcebe50b
+SHA512:
+  metadata.gz: cfb266ae4bcc50127f0bc00f5b2156278297540d7f5eeabdeb5c744bd919a2f9c582387300a8c33bfb3b8768309d0a77c9b97d4242c8ba36ebef85831d10e601
+  data.tar.gz: 1145ae2f4b6bf8d28d9562129aba14a34e4d4aa37646109e474bdbf2ea36213dec4f067c88b45d2069fc47a8eda495220600d46f898c37e6ee9e56c7eedaeffe

data/button/button-generator.scss

@@ -0,0 +1,78 @@
+/* ==|== button classes ========================================
+	Classes to style buttons
+================================================================ */
+@import "../mixins/helper-mixins"
+		, "../mixins/decoration-mixins"
+		, "../functions/linear-gradient-colors"
+		, "../functions/responsive-size";
+
+// Button Variables
+$blue: #002868 !default;
+$lightened-blue: lighten($blue, 15%) !default;
+$white: darken(#fff, 4%) !default;
+$button-default-bg-color: $lightened-blue, $blue !default;
+$button-default-font-color: $white !default;
+$button-default-border-positions: top, right, bottom, left;
+$button-default-border-colors: desaturate(lighten($blue, 21%), 37%), lighten($blue, 10%), lighten($blue, 10%), desaturate(lighten($blue, 21%), 37%);
+
+%button-props {
+  width: auto;
+  min-width: 100px;
+  height: 30px;
+  @include opacity(100);
+  text-align: center;
+  font-size: 1.0em;
+  line-height: rs(16px);
+  margin: 10px;
+  display: inline-block;
+  position: relative;  
+  @include add-border-radius($border-radius: 5px);
+}
+
+@mixin generateButton($bg-color: $button-default-bg-color, 
+                    $font-color: $button-default-font-color, 
+                    $border-colors: $button-default-border-colors,
+                    $disabled-opacity: 40) {
+	//determine the dominant color of the button, this is needed for the determination of the font color
+	$button-major-color: $bg-color;
+  	//if the background color has more than one color, the colors are to be used to create a linear
+  	//gradient
+  	@if length($bg-color) > 1 {
+    	@include linear-gradient(top, $bg-color);
+    		&:hover {
+      			$hover-bg-color: darken(nth($bg-color, 1), 15%), nth($bg-color, 2);
+      			@include linear-gradient(top, $hover-bg-color);
+    		}
+    		&:active {
+      			background-color: nth($bg-color, 2);
+    		}
+    		$button-major-color: nth($bg-color, 2);
+  	} @else {
+    	background-color: $bg-color;
+  	}
+
+  	//use the different border settings to set the colors
+  	$idx: 1;
+  	@if length($border-colors) > 1 {
+      	@each $border-color in $border-colors {
+        	@include add-border(nth($button-default-border-positions, $idx), 1px, solid, $border-color);
+        	$idx: $idx + 1;
+      	}
+    } @else {
+      	@include add-border($border-color: $border-colors);      
+    }
+
+  	//calculate the lightness of the background color and set the font color
+  	@if lightness($button-major-color) < 80% {
+    	color: $font-color;
+  	} @else {
+    	color: invert($font-color);
+  	}
+    
+    @extend %button-props;
+    
+  	&.button-disabled {
+    	@include opacity($disabled-opacity);
+    	cursor: default;    
+  	}
+}

data/functions/_linear-gradient-colors.scss

@@ -0,0 +1,25 @@
+// ==|===Linear gradient color processing====================
+//	Function that will process the given number of colors
+//  and return the correct color strings
+// =========================================================*/
+@function linearGradientColors($stop-colors...) {
+	$full: false;	
+	@each $stop-color in $stop-colors{
+		@if $full {
+			$full: $full + ',' + $stop-color;
+		} @else {
+			$full: $stop-color;
+		}
+	}
+	
+	$full: unquote($full);
+
+	//If using COMPASS uncomment the line below and remove line 10 - 17
+	//$full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
+	
+	@return $full;
+}
+
+@function lgc($stop-colors...) {
+	@return linearGradientColors($stop-colors...);
+}

data/functions/_responsive-size.scss

@@ -0,0 +1,15 @@
+// ==|=== Responsive Size calculator====================
+//	Function that will calculate the responsive size
+//	return the em value to be used.
+// =========================================================
+$default-browser-size: 16px !default;
+
+@function responsive-size($fontSize: $default-browser-size) {
+	@return $fontSize/$default-browser-size * 1em;
+}
+
+
+@function rs($fontSize: $default-browser-size) {
+	@return responsive-size($fontSize);
+}
+// ==|=== End Responsive Size calculator====================

data/mixins/_decoration-mixins.scss

@@ -0,0 +1,101 @@
+//==|== decoration mixin =====================================================
+// For more information on mixins go here:
+// http://sass-lang.com/#mixins
+// or here:
+// http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#mixins
+// Author:
+// ========================================================================== */
+@import "../functions/linear-gradient-colors";
+
+//This mixin will add border at given position. If no position is given (or position is all)
+//then the border will be applied to all sides
+@mixin add-border($border-position: all, $border-size: 1px, $border-pattern: solid, $border-color: #000) {
+	@if $border-position == 'all' {
+		border: $border-size $border-pattern $border-color;
+	} @else {
+		border-#{$border-position}: $border-size $border-pattern $border-color;
+	}
+}
+
+//this mixin will set the border-radius for either all sides or a specified
+//side
+@mixin add-border-radius($border-radius-position: all, $border-radius: 2px) {
+	@if $border-radius-position == 'all' {
+		border-radius: $border-radius;
+	} @else {
+		border-#{$border-radius-position}-radius: $border-radius;
+	}
+}
+
+//this mixin will create a linear-gradient. The parameters passed here are:
+//$pos: position of the gradient which defaults to top but can take bottom, left, or right
+//$stop-colors: these allow for any number of color stops values, color and length/percentage
+@mixin linear-gradient($pos, $stop-colors...) {
+                       
+  // Detect what type of value exists in $pos
+  $pos-type: type-of(nth($pos, 1));
+
+  // If $pos is missing from mixin, reassign vars and add default position
+  @if ($pos-type == color) or (nth($pos, 1) == "transparent")  {
+    $pos: top; // Default position
+	}
+	
+  $pos: unquote($pos);
+
+  $full: lgc($stop-colors...);
+  
+  // Set the first stop-color as the default fallback color
+  $fallback-color: nth(nth($stop-colors, 1), 1);
+
+  background: $fallback-color;
+  background:  -webkit-linear-gradient($pos, $full); // Safari 5.1+, Chrome
+  background:     -moz-linear-gradient($pos, $full);
+  background:      -ms-linear-gradient($pos, $full);
+  background:       -o-linear-gradient($full);
+  background: unquote("linear-gradient(#{$full})"); 
+}
+
+//this mixin will create background image attached to a linear gradient background
+@mixin add-background-image-gradient($url, $position, $repeat, $gradient-pos, $stop-colors...){
+  $full: lgc($stop-colors...);
+  background: $url $position $repeat, nth(nth($stop-colors, 1), 1);
+  background: $url $position $repeat, -webkit-linear-gradient($gradient-pos, $full);
+  background: $url $position $repeat, -moz-linear-gradient($gradient-pos, $full);
+  background: $url $position $repeat, -ms-linear-gradient($gradient-pos, $full);
+  background: $url $position $repeat, -o-linear-gradient($full);
+  background: $url $position $repeat, unquote("linear-gradient(#{$full})");
+}
+
+//this mixin will set the box-shadow values. It will also allow for the felxibility of
+//doing an inset shadow.
+@mixin box-shadow ($isInset: false, $hOffset: 0, $vOffset: 0, $blur: 0, $spread: 0, $color: #ccc) {
+	@if $isInset {
+		-moz-box-shadow: inset $hOffset $vOffset $blur $spread $color;
+		-webkit-box-shadow: inset $hOffset $vOffset $blur $spread $color;
+		box-shadow: inset $hOffset $vOffset $blur $spread $color;
+	} @else {
+		-moz-box-shadow: $hOffset $vOffset $blur $spread $color;
+		-webkit-box-shadow: $hOffset $vOffset $blur $spread $color;
+		box-shadow: $hOffset $vOffset $blur $spread $color;
+	}
+}
+
+// Background clipping
+// Heads up: FF 3.6 and under need "padding" instead of "padding-box"
+@mixin background-clip($clip) {
+  -webkit-background-clip: $clip;
+     -moz-background-clip: $clip;
+          background-clip: $clip;
+}
+
+//A mixin that creates a text stroke
+@mixin text-stroke ($stroke-width: 1px, $stroke-color: #000) {
+  -webkit-text-stroke: $stroke-width $stroke-color;
+  $negative-stroke-width: $stroke-width * -1;
+  text-shadow: 
+    $negative-stroke-width $negative-stroke-width 0 #000,  
+    $stroke-width $negative-stroke-width 0 #000,
+    $negative-stroke-width $stroke-width 0 #000,
+    $stroke-width $stroke-width 0 #000;  
+}
+

data/mixins/_helper-mixins.scss

@@ -0,0 +1,40 @@
+//==|== Helper mixin =====================================================
+// For more information on mixins go here:
+// http://sass-lang.com/#mixins
+// or here:
+// http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#mixins
+// Author:
+// ========================================================================== */
+
+//this mixin will set the  list-style-type to none and remove any padding
+@mixin no-list-style {
+  list-style-type: none;
+	list-style-image: none;
+	padding: 0;
+	margin: 0;
+}
+
+//this mixin will add the hand/pointer cursor to any element that
+//will be treated as a link/clickable
+@mixin hand-cursor {
+	cursor: hand;
+	cursor: pointer;
+}
+
+// FORMS
+// --------------------------------------------------
+
+// Block level inputs
+@mixin input-block-level {
+  display: block;
+  width: 100%;
+  min-height: $inputHeight; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
+  @include box-sizing(border-box); // Makes inputs behave like true block-level elements
+}
+
+// Opacity
+@mixin opacity($opacity) {
+  opacity: $opacity / 100;
+  filter: alpha(opacity=$opacity);
+}
+

metadata

@@ -0,0 +1,62 @@
+--- !ruby/object:Gem::Specification
+name: simple-button-generator
+version: !ruby/object:Gem::Version
+  version: 0.0.1
+platform: ruby
+authors:
+- Kianosh Pourian
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2014-01-28 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: sass
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - '>='
+      - !ruby/object:Gem::Version
+        version: 3.3.0.rc.2
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - '>='
+      - !ruby/object:Gem::Version
+        version: 3.3.0.rc.2
+description: This gem was created for a presentation around Sass
+email: kianoshp@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- button/button-generator.scss
+- functions/_linear-gradient-colors.scss
+- functions/_responsive-size.scss
+- mixins/_decoration-mixins.scss
+- mixins/_helper-mixins.scss
+homepage: http://rubygems.org/gems/simple-button-generator
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.0.3
+signing_key: 
+specification_version: 4
+summary: A simple button generator
+test_files: []