social_colors_rails 0.1.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/MIT-LICENSE +20 -0
- data/README.md +187 -0
- data/Rakefile +26 -0
- data/app/assets/config/social_colors_rails_manifest.js +2 -0
- data/app/assets/javascripts/social_colors_rails/application.js +13 -0
- data/app/assets/stylesheets/social_colors_rails/_classes.scss +120 -0
- data/app/assets/stylesheets/social_colors_rails/_mixins.scss +117 -0
- data/app/assets/stylesheets/social_colors_rails/_variables.scss +96 -0
- data/app/assets/stylesheets/social_colors_rails/init.scss +3 -0
- data/app/assets/stylesheets/social_colors_rails.css +879 -0
- data/app/assets/stylesheets/social_colors_rails.min.css +1 -0
- data/app/controllers/social_colors_rails/application_controller.rb +5 -0
- data/app/helpers/social_colors_rails/application_helper.rb +60 -0
- data/app/jobs/social_colors_rails/application_job.rb +4 -0
- data/app/mailers/social_colors_rails/application_mailer.rb +6 -0
- data/app/models/social_colors_rails/application_record.rb +5 -0
- data/app/views/layouts/social_colors_rails/application.html.erb +14 -0
- data/config/routes.rb +2 -0
- data/lib/social_colors_rails/engine.rb +17 -0
- data/lib/social_colors_rails/version.rb +3 -0
- data/lib/social_colors_rails.rb +5 -0
- data/lib/tasks/social_colors_rails_tasks.rake +4 -0
- metadata +95 -0
checksums.yaml
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
---
|
2
|
+
SHA1:
|
3
|
+
metadata.gz: 81e120c1208b1343eaf0f6c918a69f82cff50864
|
4
|
+
data.tar.gz: 3db13c1a5f62c9a3d5a015068415a6aca2a3c1db
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: 57014280853a952618e67ac59fbe7ef8ff99467abf9ceac6ad613b0da357f0f60efac5ba183460731230ec7de31391198f124f455691915cf371a4aa5e4abad6
|
7
|
+
data.tar.gz: 72630251584ec0b2c994a4bcb4dc36ac8f52529f26f15b1b747b4c6ed51bbcc271fed1afb11967e281471f7245ec3967078961fbaa2de112d92ffeb902814716
|
data/MIT-LICENSE
ADDED
@@ -0,0 +1,20 @@
|
|
1
|
+
Copyright 2017 Timothée Ville
|
2
|
+
|
3
|
+
Permission is hereby granted, free of charge, to any person obtaining
|
4
|
+
a copy of this software and associated documentation files (the
|
5
|
+
"Software"), to deal in the Software without restriction, including
|
6
|
+
without limitation the rights to use, copy, modify, merge, publish,
|
7
|
+
distribute, sublicense, and/or sell copies of the Software, and to
|
8
|
+
permit persons to whom the Software is furnished to do so, subject to
|
9
|
+
the following conditions:
|
10
|
+
|
11
|
+
The above copyright notice and this permission notice shall be
|
12
|
+
included in all copies or substantial portions of the Software.
|
13
|
+
|
14
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
15
|
+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
16
|
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
17
|
+
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
18
|
+
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
19
|
+
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
20
|
+
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
data/README.md
ADDED
@@ -0,0 +1,187 @@
|
|
1
|
+
# Social-colors-rails
|
2
|
+
Based on [font-awesome](http://fontawesome.io/), rails-social-colors provide official colors of social brand icons
|
3
|
+
|
4
|
+
## Installation
|
5
|
+
Add this line to your application's Gemfile:
|
6
|
+
|
7
|
+
```ruby
|
8
|
+
gem 'social_colors_rails'
|
9
|
+
```
|
10
|
+
|
11
|
+
And then execute `bundle install`
|
12
|
+
|
13
|
+
### -- Simple use --
|
14
|
+
|
15
|
+
For simple use, add it to your rails asset-pipeline
|
16
|
+
|
17
|
+
```css
|
18
|
+
/*
|
19
|
+
*= require social_colors_rails
|
20
|
+
* Or for production
|
21
|
+
*= require social_colors_rails.min
|
22
|
+
*/
|
23
|
+
```
|
24
|
+
in your `application.css` file
|
25
|
+
|
26
|
+
Or if you work with SASS
|
27
|
+
```scss
|
28
|
+
@import "social_colors_rails";
|
29
|
+
```
|
30
|
+
|
31
|
+
### -- Customized --
|
32
|
+
You can customize the social_colors rails plugin by importing the sass file and overwrite variables.
|
33
|
+
```scss
|
34
|
+
// Import your custom variables before the social_colors lib
|
35
|
+
@import "_custom_variables";
|
36
|
+
|
37
|
+
@import "social_colors_rails/init";
|
38
|
+
```
|
39
|
+
|
40
|
+
---
|
41
|
+
|
42
|
+
## Usage
|
43
|
+
|
44
|
+
The prefered method is to use the `social_tag` helper
|
45
|
+
```ruby
|
46
|
+
|
47
|
+
social_tag "github", "https://github.com/TimVille"
|
48
|
+
# => <a class="icon-stack stack-circle github" target="_blank" rel="external nofollow" href="https://github.com/TimVille">
|
49
|
+
# <i class="fa fa-github"></i>
|
50
|
+
# </a>
|
51
|
+
|
52
|
+
social_tag "github", "https://github.com/TimVille", style: "square"
|
53
|
+
# => <a class="icon-stack stack-square github" target="_blank" rel="external nofollow" href="https://github.com/TimVille">
|
54
|
+
# <i class="fa fa-github"></i>
|
55
|
+
# </a>
|
56
|
+
|
57
|
+
social_tag "github", "https://github.com/TimVille", size: "2x"
|
58
|
+
# => <a class="icon-stack stack-circle github stack-2x" target="_blank" rel="external nofollow" href="https://github.com/TimVille">
|
59
|
+
# <i class="fa fa-github"></i>
|
60
|
+
# </a>
|
61
|
+
|
62
|
+
social_tag "github", "https://github.com/TimVille", style: "square-o", size: "3x"
|
63
|
+
# => <a class="icon-stack stack-square-o github stack-3x" target="_blank" rel="external nofollow" href="https://github.com/TimVille">
|
64
|
+
# <i class="fa fa-github"></i>
|
65
|
+
# </a>
|
66
|
+
|
67
|
+
social_tag "github", "https://github.com/TimVille", size: "3x", title: "My awesome link title"
|
68
|
+
# => <a class="icon-stack stack-square-o github stack-3x" target="_blank" rel="external nofollow" title="My awesome link title" href="https://github.com/TimVille">
|
69
|
+
# <i class="fa fa-github"></i>
|
70
|
+
# </a>
|
71
|
+
```
|
72
|
+
|
73
|
+
In order to provide a context to the icons, you need to wrap your font-awesome icon with
|
74
|
+
```html
|
75
|
+
<div class="icon-stack |brand-name|"></div>
|
76
|
+
```
|
77
|
+
### -- Options --
|
78
|
+
|
79
|
+
Options are available for stack style and stack size.
|
80
|
+
Add them next to `icon-stack` class to apply them!
|
81
|
+
|
82
|
+
#### Stack styles
|
83
|
+
`stack-circle`
|
84
|
+
`stack-square`
|
85
|
+
`stack-square-o`
|
86
|
+
|
87
|
+
#### Stack sizes
|
88
|
+
`stack-2x`
|
89
|
+
`stack-3x`
|
90
|
+
`stack-4x`
|
91
|
+
|
92
|
+
|
93
|
+
### -- Sass variables --
|
94
|
+
```scss
|
95
|
+
//
|
96
|
+
// Stack parameters
|
97
|
+
//
|
98
|
+
$stack-lighten-amount: 10%;
|
99
|
+
$stack-darken-amount: 10%;
|
100
|
+
$stack-alpha-amount: 0;
|
101
|
+
$stack-hover-color: #424242;
|
102
|
+
$stack-hover-color-inverse: #424242;
|
103
|
+
|
104
|
+
$stack-shadow-color: transparentize(#000, 0.8);
|
105
|
+
$stack-shadow-length: 6;
|
106
|
+
$stack-shadow-blur: 4px;
|
107
|
+
|
108
|
+
$stack-square-o-width: 3px;
|
109
|
+
$stack-square-o-width-2x: 4px;
|
110
|
+
$stack-square-o-width-3x: 5px;
|
111
|
+
$stack-square-o-width-4x: 6px;
|
112
|
+
|
113
|
+
$stack-square-radius: 20%;
|
114
|
+
|
115
|
+
$stack-4x: 3em;
|
116
|
+
$stack-3x: 2.5em;
|
117
|
+
$stack-2x: 2em;
|
118
|
+
|
119
|
+
$stack-anim-duration: .25s;
|
120
|
+
$stack-anim-ease: ease;
|
121
|
+
|
122
|
+
|
123
|
+
//
|
124
|
+
// Font-awesome icon shadow parameters
|
125
|
+
//
|
126
|
+
$icon-shadow-blur: 1px;
|
127
|
+
$icon-shadow-lighten-amount: 20%;
|
128
|
+
$icon-shadow-darken-amount: 30%;
|
129
|
+
$icon-shadow-alpha-amount: 0.7;
|
130
|
+
$icon-shadow-color: #000;
|
131
|
+
$icon-shadow-color-inverse: #000;
|
132
|
+
$icon-shadow-length: 100;
|
133
|
+
$icon-shadow-length-o: 6;
|
134
|
+
|
135
|
+
$icon-color: #fff;
|
136
|
+
$icon-color-lighten-amount: 10%;
|
137
|
+
|
138
|
+
$icon-anim-duration: .25s;
|
139
|
+
$icon-anim-ease: ease;
|
140
|
+
```
|
141
|
+
|
142
|
+
---
|
143
|
+
|
144
|
+
## Exemple
|
145
|
+
|
146
|
+
```html
|
147
|
+
<div class="icon-stack stack-circle github stack-4x">
|
148
|
+
<i class="fa fa-github"></i>
|
149
|
+
</div>
|
150
|
+
```
|
151
|
+
|
152
|
+
---
|
153
|
+
|
154
|
+
## Available brand colors
|
155
|
+
Brand names | | |
|
156
|
+
:----------------:|:-------------:|:-------------:|
|
157
|
+
Amazon | Android |
|
158
|
+
Behance | Bitbucket |
|
159
|
+
Codepen | |
|
160
|
+
Delicious | Deviantart | Dropbox
|
161
|
+
Etsy | |
|
162
|
+
Facebook | Firefox | Flickr
|
163
|
+
Github | Gitlab | Google-plus
|
164
|
+
Houzz | |
|
165
|
+
Instagram | |
|
166
|
+
Lastfm | Linkedin |
|
167
|
+
Pinterest | |
|
168
|
+
Reddit | Rss |
|
169
|
+
Skype | Slack | Snapchat
|
170
|
+
Soundcloud | Spotify | Stack-Exchange
|
171
|
+
Stack-Overflow | Steam | Stumbleupon
|
172
|
+
Trello | Tripadvisor | Tumblr
|
173
|
+
Twitter | |
|
174
|
+
Viadeo | Vimeo | Vine
|
175
|
+
Wechat | Whatsapp |
|
176
|
+
Yahoo | Yelp | Youtube
|
177
|
+
Envelope | |
|
178
|
+
|
179
|
+
|
180
|
+
---
|
181
|
+
|
182
|
+
## Contributing
|
183
|
+
You can contribute by forking this project.
|
184
|
+
Enjoy!
|
185
|
+
|
186
|
+
## License
|
187
|
+
The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).
|
data/Rakefile
ADDED
@@ -0,0 +1,26 @@
|
|
1
|
+
begin
|
2
|
+
require 'bundler/setup'
|
3
|
+
rescue LoadError
|
4
|
+
puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
|
5
|
+
end
|
6
|
+
|
7
|
+
require 'rdoc/task'
|
8
|
+
|
9
|
+
RDoc::Task.new(:rdoc) do |rdoc|
|
10
|
+
rdoc.rdoc_dir = 'rdoc'
|
11
|
+
rdoc.title = 'SocialColorsRails'
|
12
|
+
rdoc.options << '--line-numbers'
|
13
|
+
rdoc.rdoc_files.include('README.md')
|
14
|
+
rdoc.rdoc_files.include('lib/**/*.rb')
|
15
|
+
end
|
16
|
+
|
17
|
+
APP_RAKEFILE = File.expand_path("../spec/test_app/Rakefile", __FILE__)
|
18
|
+
load 'rails/tasks/engine.rake'
|
19
|
+
|
20
|
+
|
21
|
+
load 'rails/tasks/statistics.rake'
|
22
|
+
|
23
|
+
|
24
|
+
|
25
|
+
require 'bundler/gem_tasks'
|
26
|
+
|
@@ -0,0 +1,13 @@
|
|
1
|
+
// This is a manifest file that'll be compiled into application.js, which will include all the files
|
2
|
+
// listed below.
|
3
|
+
//
|
4
|
+
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
|
5
|
+
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
|
6
|
+
//
|
7
|
+
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
|
8
|
+
// compiled file. JavaScript code in this file should be added after the last require_* statement.
|
9
|
+
//
|
10
|
+
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
|
11
|
+
// about supported directives.
|
12
|
+
//
|
13
|
+
//= require_tree .
|
@@ -0,0 +1,120 @@
|
|
1
|
+
.icon-stack {
|
2
|
+
|
3
|
+
display: flex;
|
4
|
+
justify-content: center;
|
5
|
+
align-items: center;
|
6
|
+
|
7
|
+
width: 2em;
|
8
|
+
height: 2em;
|
9
|
+
|
10
|
+
overflow: hidden;
|
11
|
+
|
12
|
+
@include prefix(transition, all $stack-anim-duration $stack-anim-ease, webkit moz o);
|
13
|
+
|
14
|
+
}
|
15
|
+
|
16
|
+
.icon-stack .fa {
|
17
|
+
@include prefix(transition, all $icon-anim-duration $icon-anim-ease, webkit moz o);
|
18
|
+
color: $icon-color;
|
19
|
+
}
|
20
|
+
|
21
|
+
.stack-circle {
|
22
|
+
border-radius: 50%;
|
23
|
+
}
|
24
|
+
|
25
|
+
.stack-square {
|
26
|
+
border-radius: $stack-square-radius;
|
27
|
+
}
|
28
|
+
|
29
|
+
.stack-square-o {
|
30
|
+
border-radius: $stack-square-radius;
|
31
|
+
border-width: $stack-square-o-width;
|
32
|
+
border-style: solid;
|
33
|
+
background-color: transparent;
|
34
|
+
}
|
35
|
+
|
36
|
+
.stack-4x {
|
37
|
+
font-size: $stack-4x;
|
38
|
+
border-width: $stack-square-o-width-4x;
|
39
|
+
}
|
40
|
+
|
41
|
+
.stack-3x {
|
42
|
+
font-size: $stack-3x;
|
43
|
+
border-width: $stack-square-o-width-3x;
|
44
|
+
}
|
45
|
+
|
46
|
+
.stack-2x {
|
47
|
+
font-size: $stack-2x;
|
48
|
+
border-width: $stack-square-o-width-2x;
|
49
|
+
}
|
50
|
+
|
51
|
+
#{list_to_classes(normal-brand-names($social-list))} {
|
52
|
+
&.stack-circle,
|
53
|
+
&.stack-square {
|
54
|
+
&:hover,
|
55
|
+
&:focus {
|
56
|
+
background-color: $stack-hover-color;
|
57
|
+
}
|
58
|
+
}
|
59
|
+
}
|
60
|
+
|
61
|
+
#{list_to_classes(brand-names($social-list))} {
|
62
|
+
&.stack-circle,
|
63
|
+
&.stack-square {
|
64
|
+
|
65
|
+
&:hover,
|
66
|
+
&:focus {
|
67
|
+
|
68
|
+
box-shadow: long-shadow($stack-shadow-color, $stack-shadow-length, "inset", $stack-shadow-blur);
|
69
|
+
|
70
|
+
.fa {
|
71
|
+
text-shadow: long-shadow($icon-shadow-color, $icon-shadow-length);
|
72
|
+
}
|
73
|
+
}
|
74
|
+
}
|
75
|
+
}
|
76
|
+
|
77
|
+
@each $name in $social-list {
|
78
|
+
|
79
|
+
// Set default shadow and stack color
|
80
|
+
$is-inverse: false;
|
81
|
+
|
82
|
+
@if contains(inverted-brand-names($social-list), nth($name, 1)) {
|
83
|
+
$is-inverse: true;
|
84
|
+
}
|
85
|
+
|
86
|
+
// for each brand names
|
87
|
+
.#{nth($name, 1)} {
|
88
|
+
&.stack-circle,
|
89
|
+
&.stack-square {
|
90
|
+
|
91
|
+
background-color: nth($name, 2);
|
92
|
+
|
93
|
+
&:hover .fa-#{nth($name, 1)} ,
|
94
|
+
&:focus .fa-#{nth($name, 1)} {
|
95
|
+
@if $is-inverse == false {
|
96
|
+
color: lighten(nth($name, 2), $icon-color-lighten-amount);
|
97
|
+
}
|
98
|
+
}
|
99
|
+
}
|
100
|
+
|
101
|
+
&.stack-square-o {
|
102
|
+
|
103
|
+
border-color: nth($name, 2);
|
104
|
+
|
105
|
+
.fa-#{nth($name, 1)} {
|
106
|
+
color: nth($name, 2);
|
107
|
+
}
|
108
|
+
|
109
|
+
&:hover,
|
110
|
+
&:focus {
|
111
|
+
|
112
|
+
box-shadow: long-shadow(transparentize(lighten(nth($name, 2), $icon-shadow-lighten-amount), $icon-shadow-alpha-amount), $icon-shadow-length-o, "inset");
|
113
|
+
|
114
|
+
.fa-#{nth($name, 1)} {
|
115
|
+
text-shadow: long-shadow(transparentize(lighten(nth($name, 2), $icon-shadow-lighten-amount), $icon-shadow-alpha-amount), $icon-shadow-length-o);
|
116
|
+
}
|
117
|
+
}
|
118
|
+
}
|
119
|
+
}
|
120
|
+
}
|
@@ -0,0 +1,117 @@
|
|
1
|
+
//
|
2
|
+
// Check if var is in list
|
3
|
+
// params => list, var
|
4
|
+
//
|
5
|
+
// output => boolean
|
6
|
+
//
|
7
|
+
@function contains($list,$var) {
|
8
|
+
@return (null != index($list, $var));
|
9
|
+
}
|
10
|
+
|
11
|
+
|
12
|
+
//
|
13
|
+
// Prefix property with vendor names
|
14
|
+
// params => property, values, vendors
|
15
|
+
//
|
16
|
+
// output => -vendor-property: values
|
17
|
+
// ...
|
18
|
+
// property: values
|
19
|
+
//
|
20
|
+
@mixin prefix($property, $values, $prefixes: ()) {
|
21
|
+
@each $prefix in $prefixes {
|
22
|
+
#{'-' + $prefix + '-' + $property}: $values;
|
23
|
+
}
|
24
|
+
|
25
|
+
// Output standard non-prefixed declaration
|
26
|
+
#{$property}: $values;
|
27
|
+
}
|
28
|
+
|
29
|
+
|
30
|
+
//
|
31
|
+
// Shadow list generator
|
32
|
+
// params => color, length(number), inset?(str), blur?(px)
|
33
|
+
//
|
34
|
+
// output => inset? 1px 1px blur color,
|
35
|
+
// ...,
|
36
|
+
// inset? (length-1)px (length-1)px blur color,
|
37
|
+
// inset? (length)px (length)px blur color
|
38
|
+
//
|
39
|
+
@function long-shadow($scolor, $length, $inset:"", $blur: $icon-shadow-blur) {
|
40
|
+
$list: ();
|
41
|
+
@for $i from 1 through $length {
|
42
|
+
$list: append($list ,unquote($inset) $i+px $i+px $blur $scolor, comma);
|
43
|
+
}
|
44
|
+
@return $list;
|
45
|
+
}
|
46
|
+
|
47
|
+
|
48
|
+
//
|
49
|
+
// Extract all names
|
50
|
+
// params => ( (name, color, inverted?), ...)
|
51
|
+
//
|
52
|
+
// output => (name, ...)
|
53
|
+
//
|
54
|
+
@function brand-names($list) {
|
55
|
+
$l: ();
|
56
|
+
@each $name in $list {
|
57
|
+
$l: append($l, #{nth($name, 1)}, comma);
|
58
|
+
}
|
59
|
+
@return $l;
|
60
|
+
}
|
61
|
+
|
62
|
+
|
63
|
+
//
|
64
|
+
// Extract all not-inverted names
|
65
|
+
// params => ( (name, color, inverted?), ...)
|
66
|
+
//
|
67
|
+
// output => (name, ...)
|
68
|
+
//
|
69
|
+
@function normal-brand-names($list) {
|
70
|
+
@return nth(classified-brand-names($list), 1);
|
71
|
+
}
|
72
|
+
|
73
|
+
|
74
|
+
//
|
75
|
+
// Retrieve all inverted names
|
76
|
+
// params => ( (name, color, inverted?), ...)
|
77
|
+
//
|
78
|
+
// output => (name, ...)
|
79
|
+
//
|
80
|
+
@function inverted-brand-names($list) {
|
81
|
+
@return nth(classified-brand-names($list), 2);
|
82
|
+
}
|
83
|
+
|
84
|
+
|
85
|
+
//
|
86
|
+
// Classify not-inverted and inverted names
|
87
|
+
// params => ( (name, color, inverted?), ...)
|
88
|
+
//
|
89
|
+
// output => ( (not-inverted-name, ...), (inverted-name, ...) )
|
90
|
+
//
|
91
|
+
@function classified-brand-names($list) {
|
92
|
+
$inverse: ();
|
93
|
+
$normal: ();
|
94
|
+
@each $name in $list {
|
95
|
+
@if length($name) == 3 {
|
96
|
+
$inverse: append($inverse, nth($name, 1), comma);
|
97
|
+
} @else {
|
98
|
+
$normal: append($normal, nth($name, 1), comma);
|
99
|
+
}
|
100
|
+
}
|
101
|
+
@return ($normal $inverse);
|
102
|
+
}
|
103
|
+
|
104
|
+
|
105
|
+
//
|
106
|
+
// Transform name-list to class-list
|
107
|
+
// params => (name, ...)
|
108
|
+
//
|
109
|
+
// output => (".name", ...)
|
110
|
+
//
|
111
|
+
@function list_to_classes($list) {
|
112
|
+
$l: ();
|
113
|
+
@each $name in $list {
|
114
|
+
$l: append($l, ".#{$name}", comma);
|
115
|
+
}
|
116
|
+
@return $l;
|
117
|
+
}
|
@@ -0,0 +1,96 @@
|
|
1
|
+
//
|
2
|
+
// Brand name list ( (name, color, inverted?), ... )
|
3
|
+
//
|
4
|
+
$social-list: (
|
5
|
+
amazon #ff9900,
|
6
|
+
android #a4c639,
|
7
|
+
behance #1769ff,
|
8
|
+
bitbucket #205081,
|
9
|
+
codepen #0ebeff,
|
10
|
+
delicious #3399ff,
|
11
|
+
deviantart #05cc47,
|
12
|
+
dropbox #007ee5,
|
13
|
+
etsy #d5641c,
|
14
|
+
facebook #3b5998,
|
15
|
+
firefox #e66000,
|
16
|
+
flickr #0063dc,
|
17
|
+
github #333333 inverted,
|
18
|
+
gitlab #fca326,
|
19
|
+
google-plus #db3236,
|
20
|
+
houzz #7ac142,
|
21
|
+
instagram #405de6,
|
22
|
+
lastfm #d51007,
|
23
|
+
linkedin #0077b5,
|
24
|
+
pinterest #cb2027,
|
25
|
+
reddit #ff4500,
|
26
|
+
rss #f26522,
|
27
|
+
skype #00aff0,
|
28
|
+
slack #6ecadc,
|
29
|
+
snapchat #fffc00,
|
30
|
+
soundcloud #ff8800,
|
31
|
+
spotify #2ebd59,
|
32
|
+
stack-exchange #1e5397,
|
33
|
+
stack-overflow #f48024,
|
34
|
+
steam #00adee,
|
35
|
+
stumbleupon #eb4924,
|
36
|
+
trello #0079bf,
|
37
|
+
tripadvisor #589442,
|
38
|
+
tumblr #35465c inverted,
|
39
|
+
twitter #1da1f2,
|
40
|
+
viadeo #f07355,
|
41
|
+
vimeo #162221 inverted,
|
42
|
+
vine #00b488,
|
43
|
+
wechat #7bb32e,
|
44
|
+
whatsapp #075e54 inverted,
|
45
|
+
yahoo #410093 inverted,
|
46
|
+
yelp #af0606,
|
47
|
+
youtube #e52d27,
|
48
|
+
envelope #333333 inverted
|
49
|
+
);
|
50
|
+
|
51
|
+
|
52
|
+
//
|
53
|
+
// Stack parameters
|
54
|
+
//
|
55
|
+
$stack-lighten-amount: 10% !default;
|
56
|
+
$stack-darken-amount: 10% !default;
|
57
|
+
$stack-alpha-amount: 0 !default;
|
58
|
+
$stack-hover-color: #424242 !default;
|
59
|
+
$stack-hover-color-inverse: #424242 !default;
|
60
|
+
|
61
|
+
$stack-shadow-color: transparentize(#000, 0.8) !default;
|
62
|
+
$stack-shadow-length: 6 !default;
|
63
|
+
$stack-shadow-blur: 4px !default;
|
64
|
+
|
65
|
+
$stack-square-o-width: 3px !default;
|
66
|
+
$stack-square-o-width-2x: 4px !default;
|
67
|
+
$stack-square-o-width-3x: 5px !default;
|
68
|
+
$stack-square-o-width-4x: 6px !default;
|
69
|
+
|
70
|
+
$stack-square-radius: 20% !default;
|
71
|
+
|
72
|
+
$stack-4x: 3em !default;
|
73
|
+
$stack-3x: 2.5em !default;
|
74
|
+
$stack-2x: 2em !default;
|
75
|
+
|
76
|
+
$stack-anim-duration: .25s !default;
|
77
|
+
$stack-anim-ease: ease !default;
|
78
|
+
|
79
|
+
|
80
|
+
//
|
81
|
+
// Font-awesome icon shadow parameters
|
82
|
+
//
|
83
|
+
$icon-shadow-blur: 1px !default;
|
84
|
+
$icon-shadow-lighten-amount: 20% !default;
|
85
|
+
$icon-shadow-darken-amount: 30% !default;
|
86
|
+
$icon-shadow-alpha-amount: 0.7 !default;
|
87
|
+
$icon-shadow-color: #000 !default;
|
88
|
+
$icon-shadow-color-inverse: #000 !default;
|
89
|
+
$icon-shadow-length: 100 !default;
|
90
|
+
$icon-shadow-length-o: 6 !default;
|
91
|
+
|
92
|
+
$icon-color: #fff !default;
|
93
|
+
$icon-color-lighten-amount: 10% !default;
|
94
|
+
|
95
|
+
$icon-anim-duration: .25s !default;
|
96
|
+
$icon-anim-ease: ease !default;
|