spinners 1.0.3 → 1.1.0

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,15 +1,15 @@
1
1
  ---
2
2
  !binary "U0hBMQ==":
3
3
  metadata.gz: !binary |-
4
- NjAyOTAzODJiNDhlM2EwNjcwNGI2OThhZmRmNmVkYjdlMTExMGIwNQ==
4
+ MWRiODFlZTVjNjE3OWE1ZDhjODczODZlN2NjMTZiMmJjNGQ5ZGQ0MQ==
5
5
  data.tar.gz: !binary |-
6
- Mjk0ZmMwYzE5NjA4ZjU2ZTlkZmM0ZmQ2YmZmOTEwYjc3MWVlN2Y3ZA==
6
+ MWE1Njc2ZjhkYzgyN2U3ZTQxYjYyOGI3NmYxOGNlMTdjYmQ4MjM0MA==
7
7
  !binary "U0hBNTEy":
8
8
  metadata.gz: !binary |-
9
- Y2YwZDZmYTgyMzEwOWZhYTViZWIxMDdmZGNkNWFjMTM3ODI3YWQzOGVmYzlm
10
- MmY0YmIxYTg1MDg1NDQ1ZWRlZWFkZTg4MzE1YmY5Yzk1MGQ3MjExNWNkYTRl
11
- ZGVlZTM0OTUzNTk3ZWFhN2JmNDUxYWI5ODhmOTE5ZjdiOTI0YTU=
9
+ ODI1N2Q4ODYxZTY2MmY3ZGEyMTIzOGMxM2YzZjRhNmE4NWQ1NTUzOGEwNTRm
10
+ MmQ4ZWI2ZjQ0YmIxNTJlNGIyOGZjYjcyNjUxYjk5NjE0NWU5ZjY2MTZkY2Uw
11
+ ZDQxZWZkYmVlNjY4YTQzNmNhZmZiMTRkOTU1MjllNzFlNWUxYzg=
12
12
  data.tar.gz: !binary |-
13
- MGI2MTFjMDQ2NmRlMjJkZTY0YjJjMWU1NGM0ZWNmZDU0YmZmNTEwNjEwNWQ2
14
- ZWE2ODg5ZDRkMmE5OTMxN2ExNzM1MGUwNTUxM2I2MjU0MDM4NDZjMzFjNmE4
15
- YmE4NjNlM2ZkN2FmNDFlMmE3MzE3YzhjODIwNjE3NTliOTc5MjU=
13
+ MTRhZjhlN2UxY2JiYTAxZWJjNmM0MGY3YzAzN2QyYTVmZmY5YTRjNjNmZTM1
14
+ ODhmNDI3MDFlM2VmZTVhMThlMzdhYWY2NzlkOGIzNzQ0YzgxODY3M2YzMjk1
15
+ ZjdhNmQyOTllNDUwNDdlNTAzN2IyOTU0MWZkN2Y0MjY2YTlmZWE=
data/README.md CHANGED
@@ -1,18 +1,26 @@
1
- #spinner
1
+ # Spinners
2
2
 
3
3
  [![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)
4
4
 
5
5
 
6
+
6
7
  A Sass mixin to generate pure CSS3 loading/busy indicators.
7
8
  Uses a single rotating element and a partial border.
8
9
  Fully customizable.
9
10
  Works with plain Sass or [Compass](http://compass-style.org).
10
11
 
12
+ *** [Spinners Demo & Documentation](http://franzheidl.github.io/spinners/)***
13
+
14
+ *** New with v1.1.0 ***
15
+
16
+ * Spinners does not require Compass anymore (but will be installed as a Compass extension if you already have Compass installed)
17
+
18
+ * Spinners can now have a background
11
19
 
12
20
  ##Install
13
21
 
14
22
  ### Download
15
- 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:
23
+ 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:
16
24
 
17
25
  @import "spinners";
18
26
 
@@ -20,18 +28,53 @@ To use Spinners straightaway without any package manager, the only file you'll n
20
28
  ### Bower
21
29
  To install in your current project using bower run:
22
30
 
23
- bower install --save-dev spinners
31
+ $ bower install --save-dev spinners
24
32
 
25
33
 
26
- ### Compass Extension
34
+ ### Ruby Gem / Compass Extension
27
35
 
28
36
  To install the Compass extension as a Ruby Gem:
29
37
 
30
- gem install spinners
38
+ $ gem install spinners
31
39
 
32
40
  and require it in your `config.rb`:
33
41
 
34
42
  require 'spinners'
43
+
44
+ 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:
45
+
46
+ With grunt-contrib-sass:
47
+
48
+ sass: {
49
+ [...]
50
+ options: {
51
+ require: 'spinners'
52
+ }
53
+ }
54
+
55
+
56
+ With grunt-contrib-compass:
57
+
58
+ compass: {
59
+ compile: {
60
+ options: {
61
+ [...]
62
+ require: 'spinners'
63
+ }
64
+ }
65
+ }
66
+
67
+
68
+ With gulp:
69
+
70
+ [...]
71
+ .pipe(compass({
72
+ [...]
73
+ require: 'spinners'
74
+ }))
75
+ [...]
76
+
77
+
35
78
 
36
79
 
37
80
  Spinners is also on [Sache](http://www.sache.in/).
@@ -51,7 +94,7 @@ Then declare a selector of your choice and call the mixin:
51
94
  In your html, you can use any markup element you want, a `div`, `span`, `i`, or what have you.
52
95
 
53
96
 
54
- 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:
97
+ 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:
55
98
 
56
99
  .my-spinner {
57
100
  @include spinner();
@@ -90,6 +133,14 @@ To customize a spinner's animation speed, pass the number of seconds for one ful
90
133
  @include spinner(.6s);
91
134
  }
92
135
 
136
+
137
+ #### Adjusting the Background
138
+ 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:
139
+
140
+ .my-spinner {
141
+ @include spinner(background rgba(0, 0, 0, .2));
142
+ }
143
+
93
144
  All arguments are optional. When using mulitple customizations, pass your arguments comma-separated:
94
145
 
95
146
  .my-spinner {
@@ -106,6 +157,9 @@ Works in any modern browser and IE 10+.
106
157
  Spinners does not come with a fallback for IE < 10, so if you need one, roll your own!
107
158
 
108
159
 
160
+
161
+
162
+
109
163
  The MIT License (MIT)
110
164
  ---
111
165
 
@@ -1,8 +1,19 @@
1
- require 'compass'
2
1
  extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
3
- Compass::Frameworks.register('Spinners', :path => extension_path)
2
+ stylesheets_path = File.join(extension_path, 'stylesheets')
3
+
4
+
5
+ if (defined? Compass)
6
+ Compass::Frameworks.register('Spinners', :path => extension_path)
7
+ else
8
+ # compass not found, register on the Sass path via the environment.
9
+ if ENV.has_key?("SASS_PATH")
10
+ ENV["SASS_PATH"] = ENV["SASS_PATH"] + File::PATH_SEPARATOR + stylesheets_path
11
+ else
12
+ ENV["SASS_PATH"] = stylesheets_path
13
+ end
14
+ end
4
15
 
5
16
  module Spinners
6
- VERSION = "1.0.3"
7
- DATE = "2014-05-16"
17
+ VERSION = "1.1.0"
18
+ DATE = "2014-12-12"
8
19
  end
@@ -1,9 +1,9 @@
1
1
  /*
2
2
  ================================================================================
3
- SPINNER
3
+ SPINNERS
4
4
  ================================================================================
5
5
  A Sass mixin to generate a pure CSS3 loading/busy indicator.
6
- https://github.com/franzheidl/spinner
6
+ https://github.com/franzheidl/spinners
7
7
  Franz Heidl 2014
8
8
  MIT License
9
9
  --------------------------------------------------------------------------------
@@ -19,7 +19,7 @@ Default:
19
19
  Custom:
20
20
 
21
21
  .my-spinner {
22
- @include spinner(1.25em, 3px solid #555, .7s);
22
+ @include spinner(1.25em, 3px solid #555, .7s, background rgba(0, 0, 0, .2);
23
23
  }
24
24
 
25
25
  All arguments are optional.
@@ -91,9 +91,10 @@ Pass any number of seconds referring to the duration of one full rotation for an
91
91
  $size: 1em;
92
92
  $border-width: 3px;
93
93
  $border-style: solid;
94
- $border-color: #4285f4;
94
+ $border-color: #1277c2;
95
95
  $border: $border-width $border-style $border-color;
96
96
  $duration: .65s;
97
+ $background: transparent; //
97
98
 
98
99
  // Parse arguments:
99
100
  @if $args {
@@ -145,6 +146,14 @@ Pass any number of seconds referring to the duration of one full rotation for an
145
146
  }
146
147
  }
147
148
  }
149
+ @else if $prop == 'background' {
150
+ @if type-of($val) == color {
151
+ $background: $val;
152
+ }
153
+ @else {
154
+ @warn "Spinner: \"#{nth($val)}\" is not a valid color for background! Using default \"transparent\".";
155
+ }
156
+ }
148
157
  @else {
149
158
  @warn "Spinner: \"#{nth($arg, 1)}\" is not a valid border property! Using default border.";
150
159
  }
@@ -166,8 +175,8 @@ Pass any number of seconds referring to the duration of one full rotation for an
166
175
  background-color: transparent;
167
176
  border: $border;
168
177
  border-radius: 50%;
169
- border-top-color: transparent;
170
- border-right-color: transparent;
178
+ border-top-color: $background;
179
+ border-right-color: $background;
171
180
  width: $size;
172
181
  height: $size;
173
182
  display: inline-block;
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: spinners
3
3
  version: !ruby/object:Gem::Version
4
- version: 1.0.3
4
+ version: 1.1.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Franz Heidl
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2014-05-16 00:00:00.000000000 Z
11
+ date: 2014-12-12 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: sass
@@ -24,20 +24,6 @@ dependencies:
24
24
  - - ~>
25
25
  - !ruby/object:Gem::Version
26
26
  version: '3.2'
27
- - !ruby/object:Gem::Dependency
28
- name: compass
29
- requirement: !ruby/object:Gem::Requirement
30
- requirements:
31
- - - ~>
32
- - !ruby/object:Gem::Version
33
- version: 1.0.0.alpha
34
- type: :runtime
35
- prerelease: false
36
- version_requirements: !ruby/object:Gem::Requirement
37
- requirements:
38
- - - ~>
39
- - !ruby/object:Gem::Version
40
- version: 1.0.0.alpha
41
27
  description: A Sass mixin and Compass extension to generate pure CSS3 loading/busy
42
28
  indicators
43
29
  email:
@@ -48,7 +34,6 @@ files:
48
34
  - README.md
49
35
  - lib/spinners.rb
50
36
  - stylesheets/_spinners.scss
51
- - stylesheets/test.scss
52
37
  homepage: https://github.com/franzheidl/spinners
53
38
  licenses:
54
39
  - MIT
@@ -1,82 +0,0 @@
1
- @import "spinners";
2
-
3
-
4
- /* Default:
5
-
6
- .my-spinner {
7
- @include spinner();
8
- }
9
-
10
- */
11
-
12
- .my-spinner {
13
- @include spinner();
14
- }
15
-
16
- /*
17
- Border-width:
18
-
19
- .my-fat-spinner {
20
- @include spinner(border-width 12px);
21
- }
22
-
23
- */
24
-
25
- .my-fat-spinner {
26
- @include spinner(border-width 12px);
27
- }
28
-
29
- /*
30
- Color:
31
-
32
- .my-blue-spinner {
33
- @include spinner(border-color blue);
34
- }
35
-
36
- */
37
-
38
- .my-blue-spinner {
39
- @include spinner(border-color blue);
40
- }
41
-
42
-
43
- /*
44
- Duration/Speed:
45
-
46
- .my-fast-spinner {
47
- @include spinner(.4s);
48
- }
49
-
50
- */
51
-
52
- .my-fast-spinner {
53
- @include spinner(.4s);
54
- }
55
-
56
- /*
57
- Full config w/ shorthand border declaration:
58
-
59
- .my-custom-spinner {
60
- @include spinner(23px, 2px dotted #456789, .5s);
61
- }
62
-
63
- */
64
-
65
- .my-custom-spinner-shorthand {
66
- @include spinner(23px, 2px dotted #456789, .5s);
67
- }
68
-
69
- /*
70
- Full config w/ individual border statements:
71
-
72
- .my-custom-spinner {
73
- @include spinner(1.3rem, border-width 5px, border-style dashed, border-color rgba(0, 0, 0, .5), .7s);
74
- }
75
-
76
- */
77
-
78
- .my-custom-spinner {
79
- @include spinner(1.3rem, border-width 5px, border-style dashed, border-color rgba(0, 0, 0, .5), .7s);
80
- }
81
-
82
-