compass-rainbows 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +7 -0
- data/README.md +41 -0
- data/lib/rainbows.rb +3 -0
- data/stylesheets/_rainbows.sass +44 -0
- metadata +59 -0
checksums.yaml
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
---
|
|
2
|
+
SHA1:
|
|
3
|
+
metadata.gz: aab160d85a9c7a5ff3c21df68bdf804c76a5c8b6
|
|
4
|
+
data.tar.gz: 339403d8d0f85148c8c70ea3db436d09553bf06a
|
|
5
|
+
SHA512:
|
|
6
|
+
metadata.gz: 9b08df78b6e8f8e04d109ef739523911ad07d63e593461a6b5b964b325123632cb54e77088560eb6c95871b034ab3c3abed72121ef8a6f981439f0feaf20e6e9
|
|
7
|
+
data.tar.gz: 9cf81889c93aa379424fecba6bee99d93b54016764154d92f9ddc1de8c585ce2583fb29b46ca2df32ff23cf3bc787d37a65f4cd051d71750ff889bfb64f18811
|
data/README.md
ADDED
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
# compass-rainbows
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
`compass-rainbows` is a [Compass](http://compass-style.org) extension that allows you to create multi-colored borders on elements like on the [Creative Mornings](http://creativemornings.com) site.
|
|
6
|
+
|
|
7
|
+
## Usage
|
|
8
|
+
|
|
9
|
+
Install the Gem or add it to your `Gemfile`.
|
|
10
|
+
|
|
11
|
+
```
|
|
12
|
+
$ gem install compass-rainbows
|
|
13
|
+
|
|
14
|
+
gem 'compass-rainbows'
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
Then, `require` it in your Compass `config.rb` file.
|
|
18
|
+
|
|
19
|
+
```ruby
|
|
20
|
+
require 'compass-rainbows'
|
|
21
|
+
|
|
22
|
+
# other config goes here
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
Finally, `@import` the extension and use the mixin.
|
|
26
|
+
|
|
27
|
+
```scss
|
|
28
|
+
@import "rainbows";
|
|
29
|
+
|
|
30
|
+
body {
|
|
31
|
+
@include rainbows(top, 10px, green, blue);
|
|
32
|
+
}
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
## Documentation
|
|
36
|
+
|
|
37
|
+
The only mixin that you should use is `+rainbows`. It takes the following arguments:
|
|
38
|
+
|
|
39
|
+
- `$position`: Positioning of the border (`top` or `bottom`).
|
|
40
|
+
- `$size`: The size of the border.
|
|
41
|
+
- `$colors...`: A list of colors. This should be comma-separated (`blue, green, red`)
|
data/lib/rainbows.rb
ADDED
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
@import compass/css3/images
|
|
2
|
+
|
|
3
|
+
// Create a rainbow-style border before or after an element.
|
|
4
|
+
//
|
|
5
|
+
// rainbows([$position, $size, $colors...])
|
|
6
|
+
@mixin rainbows($position, $size, $colors...)
|
|
7
|
+
$stripe-width: 100% / length($colors)
|
|
8
|
+
$gradient: ()
|
|
9
|
+
|
|
10
|
+
@for $i from 1 through length($colors)
|
|
11
|
+
$item: nth($colors, $i)
|
|
12
|
+
$dump: ()
|
|
13
|
+
|
|
14
|
+
$dump: $item $stripe-width * ($i - 1), $item $stripe-width * $i
|
|
15
|
+
|
|
16
|
+
$gradient: join($gradient, $dump, comma)
|
|
17
|
+
|
|
18
|
+
@if $position == top
|
|
19
|
+
&:before
|
|
20
|
+
+rainbows-generic($position, $size)
|
|
21
|
+
+background(linear-gradient(left, $gradient))
|
|
22
|
+
@else if $position == bottom
|
|
23
|
+
&:after
|
|
24
|
+
+rainbows-generic($position, $size)
|
|
25
|
+
+background(linear-gradient(left, $gradient))
|
|
26
|
+
|
|
27
|
+
// Styles for all borders, independent of what colors are being used
|
|
28
|
+
//
|
|
29
|
+
// rainbows-generic([$position, $size])
|
|
30
|
+
@mixin rainbows-generic($position, $size)
|
|
31
|
+
content: ''
|
|
32
|
+
display: block
|
|
33
|
+
height: $size
|
|
34
|
+
position: absolute
|
|
35
|
+
left: 0
|
|
36
|
+
right: 0
|
|
37
|
+
line-height: 1
|
|
38
|
+
z-index: 1
|
|
39
|
+
|
|
40
|
+
@if $position == top
|
|
41
|
+
top: 0
|
|
42
|
+
@else if $position == bottom
|
|
43
|
+
bottom: 0
|
|
44
|
+
|
metadata
ADDED
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
|
2
|
+
name: compass-rainbows
|
|
3
|
+
version: !ruby/object:Gem::Version
|
|
4
|
+
version: 0.1.0
|
|
5
|
+
platform: ruby
|
|
6
|
+
authors:
|
|
7
|
+
- Ethan Turkeltaub
|
|
8
|
+
autorequire:
|
|
9
|
+
bindir: bin
|
|
10
|
+
cert_chain: []
|
|
11
|
+
date: 2013-10-02 00:00:00.000000000 Z
|
|
12
|
+
dependencies:
|
|
13
|
+
- !ruby/object:Gem::Dependency
|
|
14
|
+
name: compass
|
|
15
|
+
requirement: !ruby/object:Gem::Requirement
|
|
16
|
+
requirements:
|
|
17
|
+
- - '>='
|
|
18
|
+
- !ruby/object:Gem::Version
|
|
19
|
+
version: '0.12'
|
|
20
|
+
type: :runtime
|
|
21
|
+
prerelease: false
|
|
22
|
+
version_requirements: !ruby/object:Gem::Requirement
|
|
23
|
+
requirements:
|
|
24
|
+
- - '>='
|
|
25
|
+
- !ruby/object:Gem::Version
|
|
26
|
+
version: '0.12'
|
|
27
|
+
description: Multi-colored borders with Compass.
|
|
28
|
+
email: ethan.turkeltaub@gmail.com
|
|
29
|
+
executables: []
|
|
30
|
+
extensions: []
|
|
31
|
+
extra_rdoc_files: []
|
|
32
|
+
files:
|
|
33
|
+
- README.md
|
|
34
|
+
- lib/rainbows.rb
|
|
35
|
+
- stylesheets/_rainbows.sass
|
|
36
|
+
homepage: http://ethnt.me
|
|
37
|
+
licenses: []
|
|
38
|
+
metadata: {}
|
|
39
|
+
post_install_message:
|
|
40
|
+
rdoc_options: []
|
|
41
|
+
require_paths:
|
|
42
|
+
- lib
|
|
43
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
|
44
|
+
requirements:
|
|
45
|
+
- - '>='
|
|
46
|
+
- !ruby/object:Gem::Version
|
|
47
|
+
version: '0'
|
|
48
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
|
49
|
+
requirements:
|
|
50
|
+
- - '>='
|
|
51
|
+
- !ruby/object:Gem::Version
|
|
52
|
+
version: '0'
|
|
53
|
+
requirements: []
|
|
54
|
+
rubyforge_project:
|
|
55
|
+
rubygems_version: 2.1.3
|
|
56
|
+
signing_key:
|
|
57
|
+
specification_version: 4
|
|
58
|
+
summary: Multi-colored borders with Compass.
|
|
59
|
+
test_files: []
|