spinners 1.0.3 → 1.1.0

checksums.yaml

@@ -1,15 +1,15 @@
 ---
 !binary "U0hBMQ==":
   metadata.gz: !binary |-
-    NjAyOTAzODJiNDhlM2EwNjcwNGI2OThhZmRmNmVkYjdlMTExMGIwNQ==
+    MWRiODFlZTVjNjE3OWE1ZDhjODczODZlN2NjMTZiMmJjNGQ5ZGQ0MQ==
   data.tar.gz: !binary |-
-    Mjk0ZmMwYzE5NjA4ZjU2ZTlkZmM0ZmQ2YmZmOTEwYjc3MWVlN2Y3ZA==
+    MWE1Njc2ZjhkYzgyN2U3ZTQxYjYyOGI3NmYxOGNlMTdjYmQ4MjM0MA==
 !binary "U0hBNTEy":
   metadata.gz: !binary |-
-    Y2YwZDZmYTgyMzEwOWZhYTViZWIxMDdmZGNkNWFjMTM3ODI3YWQzOGVmYzlm
-    MmY0YmIxYTg1MDg1NDQ1ZWRlZWFkZTg4MzE1YmY5Yzk1MGQ3MjExNWNkYTRl
-    ZGVlZTM0OTUzNTk3ZWFhN2JmNDUxYWI5ODhmOTE5ZjdiOTI0YTU=
+    ODI1N2Q4ODYxZTY2MmY3ZGEyMTIzOGMxM2YzZjRhNmE4NWQ1NTUzOGEwNTRm
+    MmQ4ZWI2ZjQ0YmIxNTJlNGIyOGZjYjcyNjUxYjk5NjE0NWU5ZjY2MTZkY2Uw
+    ZDQxZWZkYmVlNjY4YTQzNmNhZmZiMTRkOTU1MjllNzFlNWUxYzg=
   data.tar.gz: !binary |-
-    MGI2MTFjMDQ2NmRlMjJkZTY0YjJjMWU1NGM0ZWNmZDU0YmZmNTEwNjEwNWQ2
-    ZWE2ODg5ZDRkMmE5OTMxN2ExNzM1MGUwNTUxM2I2MjU0MDM4NDZjMzFjNmE4
-    YmE4NjNlM2ZkN2FmNDFlMmE3MzE3YzhjODIwNjE3NTliOTc5MjU=
+    MTRhZjhlN2UxY2JiYTAxZWJjNmM0MGY3YzAzN2QyYTVmZmY5YTRjNjNmZTM1
+    ODhmNDI3MDFlM2VmZTVhMThlMzdhYWY2NzlkOGIzNzQ0YzgxODY3M2YzMjk1
+    ZjdhNmQyOTllNDUwNDdlNTAzN2IyOTU0MWZkN2Y0MjY2YTlmZWE=

data/README.md

@@ -1,18 +1,26 @@
-#spinner
+# Spinners
 
 [![Bower version](https://badge.fury.io/bo/spinners.svg)](http://badge.fury.io/bo/spinners) [![Gem Version](https://badge.fury.io/rb/spinners.svg)](http://badge.fury.io/rb/spinners)
 
 
+
 A Sass mixin to generate pure CSS3 loading/busy indicators.
 Uses a single rotating element and a partial border.
 Fully customizable.
 Works with plain Sass or [Compass](http://compass-style.org).
 
+*** [Spinners Demo & Documentation](http://franzheidl.github.io/spinners/)***
+
+*** New with v1.1.0 ***
+
+* Spinners does not require Compass anymore (but will be installed as a Compass extension if you already have Compass installed)
+
+* Spinners can now have a background
 
 ##Install
 
 ### Download
-To use Spinners straightaway without any package manager, the only file you'll need is `stylesheets/_spinner.scss`. Place this in the appropriate `sass` folder of your project, import it into your main .scss file or -module you deem fit, and you're good to go:
+To use Spinners straightaway without any package manager, the only file you'll need is `stylesheets/_spinners.scss`. Place this in the appropriate `sass` folder of your project, import it into your main .scss file or -module you deem fit, and you're good to go:
 
     @import "spinners";
 
@@ -20,18 +28,53 @@ To use Spinners straightaway without any package manager, the only file you'll n
 ### Bower
 To install in your current project using bower run:
 
-    bower install --save-dev spinners
+    $ bower install --save-dev spinners
 
 
-### Compass Extension
+### Ruby Gem / Compass Extension
 
 To install the Compass extension as a Ruby Gem:
 
-    gem install spinners
+    $ gem install spinners
     
 and require it in your `config.rb`:
 
     require 'spinners'
+    
+If you're using Grunt or Gulp with grunt-contrib-sass or grunt-contrib-compass without a `config.rb` file and have the Ruby Gem installed, you can add Spinners as a dependency to your configuration object:
+
+With grunt-contrib-sass:
+ 
+    sass: {
+      [...]
+      options: {
+        require: 'spinners'
+      }
+    }
+
+
+With grunt-contrib-compass:
+
+    compass: {
+      compile: {
+        options: {
+          [...]
+          require: 'spinners'     
+        }
+      }
+    }
+
+
+With gulp:
+
+      [...]
+        .pipe(compass({
+          [...]
+          require: 'spinners'
+        }))
+      [...]
+
+  
 
 
 Spinners is also on [Sache](http://www.sache.in/).
@@ -51,7 +94,7 @@ Then declare a selector of your choice and call the mixin:
 In your html, you can use any markup element you want, a `div`, `span`, `i`, or what have you.
 
 
-Spinners come set to `display: inline-block` and `vertical-align: middle` by default so you can put it inside buttons, alerts and the like and have it aligned. If this doesn't work for you, declare you overrides ***after*** calling the mixin:
+Spinners come set to `display: inline-block` and `vertical-align: middle` by default so you can put it inside buttons, alerts and the like and have it aligned. If the defaults don't work for you, declare your overrides ***after*** calling the mixin:
 
 	.my-spinner {
     	@include spinner();
@@ -90,6 +133,14 @@ To customize a spinner's animation speed, pass the number of seconds for one ful
 		@include spinner(.6s);
 	}
 	
+	
+#### Adjusting the Background
+The background, i.e. the perceived non-rotating part of a spinner, is set to be transparent by default. To adjust the background, pass a color as background argument:
+
+    .my-spinner {
+      @include spinner(background rgba(0, 0, 0, .2));
+    }
+	
 All arguments are optional. When using mulitple customizations, pass your arguments comma-separated:
 
 	.my-spinner {
@@ -106,6 +157,9 @@ Works in any modern browser and IE 10+.
 Spinners does not come with a fallback for IE < 10, so if you need one, roll your own!
 
 
+
+
+
 The MIT License (MIT)
 ---
 

data/lib/spinners.rb

@@ -1,8 +1,19 @@
-require 'compass'
 extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
-Compass::Frameworks.register('Spinners', :path => extension_path)
+stylesheets_path = File.join(extension_path, 'stylesheets')
+
+
+if (defined? Compass)
+  Compass::Frameworks.register('Spinners', :path => extension_path)
+else
+  # compass not found, register on the Sass path via the environment.
+  if ENV.has_key?("SASS_PATH")
+    ENV["SASS_PATH"] = ENV["SASS_PATH"] + File::PATH_SEPARATOR + stylesheets_path
+  else
+    ENV["SASS_PATH"] = stylesheets_path
+  end
+end
 
 module Spinners
-  VERSION = "1.0.3"
-  DATE = "2014-05-16"
+  VERSION = "1.1.0"
+  DATE = "2014-12-12"
 end

data/stylesheets/_spinners.scss

@@ -1,9 +1,9 @@
 /*
 ================================================================================
-SPINNER
+SPINNERS
 ================================================================================
 A Sass mixin to generate a pure CSS3 loading/busy indicator.
-https://github.com/franzheidl/spinner
+https://github.com/franzheidl/spinners
 Franz Heidl 2014
 MIT License
 --------------------------------------------------------------------------------
@@ -19,7 +19,7 @@ Default:
 Custom:
 
 .my-spinner {
- @include spinner(1.25em, 3px solid #555, .7s);
+ @include spinner(1.25em, 3px solid #555, .7s, background rgba(0, 0, 0, .2);
 }
 
 All arguments are optional.
@@ -91,9 +91,10 @@ Pass any number of seconds referring to the duration of one full rotation for an
   $size: 1em;
   $border-width: 3px;
   $border-style: solid;
-  $border-color: #4285f4;
+  $border-color: #1277c2;
   $border: $border-width $border-style $border-color;
   $duration: .65s;
+  $background: transparent; //
   
   // Parse arguments:
   @if $args {
@@ -145,6 +146,14 @@ Pass any number of seconds referring to the duration of one full rotation for an
             }
           }
         }
+        @else if $prop == 'background' {
+          @if type-of($val) == color {
+            $background: $val;
+          }
+          @else {
+            @warn "Spinner: \"#{nth($val)}\" is not a valid color for background! Using default \"transparent\".";
+          }
+        }
         @else {
           @warn "Spinner: \"#{nth($arg, 1)}\" is not a valid border property! Using default border.";
         }
@@ -166,8 +175,8 @@ Pass any number of seconds referring to the duration of one full rotation for an
   background-color: transparent;
   border: $border;
   border-radius: 50%;
-  border-top-color: transparent;
-  border-right-color: transparent;
+  border-top-color: $background;
+  border-right-color: $background;
   width: $size;
   height: $size;
   display: inline-block;

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: spinners
 version: !ruby/object:Gem::Version
-  version: 1.0.3
+  version: 1.1.0
 platform: ruby
 authors:
 - Franz Heidl
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-05-16 00:00:00.000000000 Z
+date: 2014-12-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
@@ -24,20 +24,6 @@ dependencies:
     - - ~>
       - !ruby/object:Gem::Version
         version: '3.2'
-- !ruby/object:Gem::Dependency
-  name: compass
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - ~>
-      - !ruby/object:Gem::Version
-        version: 1.0.0.alpha
-  type: :runtime
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - ~>
-      - !ruby/object:Gem::Version
-        version: 1.0.0.alpha
 description: A Sass mixin and Compass extension to generate pure CSS3 loading/busy
   indicators
 email: 
@@ -48,7 +34,6 @@ files:
 - README.md
 - lib/spinners.rb
 - stylesheets/_spinners.scss
-- stylesheets/test.scss
 homepage: https://github.com/franzheidl/spinners
 licenses:
 - MIT

data/stylesheets/test.scss

@@ -1,82 +0,0 @@
-@import "spinners";
-
-
-/* Default:
-
-.my-spinner {
-  @include spinner();
-}
-
-*/
-
-.my-spinner {
-  @include spinner();
-}
-
-/*
-Border-width:
-
-.my-fat-spinner {
-  @include spinner(border-width 12px);
-}
-
-*/
-
-.my-fat-spinner {
-  @include spinner(border-width 12px);
-}
-
-/*
-Color:
-
-.my-blue-spinner {
-  @include spinner(border-color blue);
-}
-
-*/
-
-.my-blue-spinner {
-  @include spinner(border-color blue);
-}
-
-
-/*
-Duration/Speed:
-
-.my-fast-spinner {
-  @include spinner(.4s);
-}
-
-*/
-
-.my-fast-spinner {
-  @include spinner(.4s);
-}
-
-/*
-Full config w/ shorthand border declaration:
-
-.my-custom-spinner {
-  @include spinner(23px, 2px dotted #456789, .5s);
-}
-
-*/
-
-.my-custom-spinner-shorthand {
-  @include spinner(23px, 2px dotted #456789, .5s);
-}
-
-/*
-Full config w/ individual border statements:
-
-.my-custom-spinner {
-  @include spinner(1.3rem, border-width 5px, border-style dashed, border-color rgba(0, 0, 0, .5), .7s);
-}
-
-*/
-
-.my-custom-spinner {
-  @include spinner(1.3rem, border-width 5px, border-style dashed, border-color rgba(0, 0, 0, .5), .7s);
-}
-
-