social_colors_rails 0.1.3 → 0.2.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (16) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +72 -37
  3. data/app/assets/config/social_colors_rails_manifest.js +0 -1
  4. data/app/assets/stylesheets/social_colors_rails/_button.scss +20 -0
  5. data/app/assets/stylesheets/social_colors_rails/_common.scss +138 -0
  6. data/app/assets/stylesheets/social_colors_rails/_mixins.scss +5 -5
  7. data/app/assets/stylesheets/social_colors_rails/_stack.scss +27 -0
  8. data/app/assets/stylesheets/social_colors_rails/_variables.scss +41 -30
  9. data/app/assets/stylesheets/social_colors_rails/init.scss +3 -1
  10. data/app/assets/stylesheets/social_colors_rails.css +767 -291
  11. data/app/assets/stylesheets/social_colors_rails.min.css +1 -1
  12. data/app/helpers/social_colors_rails/application_helper.rb +1 -1
  13. data/lib/social_colors_rails/version.rb +1 -1
  14. metadata +5 -4
  15. data/app/assets/javascripts/social_colors_rails/application.js +0 -13
  16. data/app/assets/stylesheets/social_colors_rails/_classes.scss +0 -120
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 1d498d467af2db98912a34763d6fcc933f836996
4
- data.tar.gz: 2e5daeb9057d10a05eb73c737163b82df9337c53
3
+ metadata.gz: 25d6bacbac1d1221e6a35c06bea8a4712bb51a00
4
+ data.tar.gz: d6ad44a6409627f58da6d21296bde41ec647af3c
5
5
  SHA512:
6
- metadata.gz: cd19265fbe0e29428433830d75d69523069d82053dd33cfaa36db16b9e0fa53e10895e9c318f7ea238a6f03a35eccd7de26cd52c88d6afa61e5e02bdbb3c0b8a
7
- data.tar.gz: 5ab63e7d58db117b44e0cf05ff164b16aa62e734452c8560652c75b7615818ae4bdbb785a5566e5997e6d0bbf5e58d1c0d9c209dd8637de07a6960c939742197
6
+ metadata.gz: f4909e3f7c5fec1f9a38a1ab0c1ef315396d30868553fedccfafc31524fed56b96bc347c05fc93fc6996fe0530f5c0abe6e7dad9df344af38bdfda309a306d99
7
+ data.tar.gz: 840e409ef872d68082ce67647a6597d88fa620c501245320c5b739728d69c472359835c43723a5be3aa16e38284ba10e365594e22e60b7c02b5740bd911bc31f
data/README.md CHANGED
@@ -1,5 +1,9 @@
1
+ [![Gem Version](https://badge.fury.io/rb/social_colors_rails.svg)](https://badge.fury.io/rb/social_colors_rails)
2
+ [![Build Status](https://travis-ci.org/TimVille/social_colors_rails.svg?branch=master)](https://travis-ci.org/TimVille/social_colors_rails)
3
+
1
4
  # Social-colors-rails
2
- Based on [font-awesome](http://fontawesome.io/), rails-social-colors provide official colors of social brand icons
5
+ Based on [font-awesome](http://fontawesome.io/), rails-social-colors provide official colors of social brand icons.
6
+ See them on the [Rails social colors](https://timville.github.io/social_colors_rails/) official page.
3
7
 
4
8
  ## Installation
5
9
  Add these line to your application's Gemfile:
@@ -93,6 +97,26 @@ In order to provide a context to the icons, you need to wrap your font-awesome i
93
97
  ```html
94
98
  <div class="icon-stack |brand-name|"></div>
95
99
  ```
100
+
101
+ ## --NEW!--
102
+ New button are available with text possibilities.
103
+ To add it with a rails helper, just use a link_to
104
+ ```ruby
105
+ link_to "Your text", "#", class: "btn btn-social btn-|size| |brand-name|"
106
+ ```
107
+
108
+ ```html
109
+ <!-- Plain button -->
110
+ <a href="#" class="btn btn-social |brand-name| btn-|size|">
111
+ Your text here <i class="fa fa-|brand-name|"></i>
112
+ </a>
113
+
114
+ <!-- Outline button -->
115
+ <a href="#" class="btn btn-social-outline |brand-name| btn-|size|">
116
+ Your text here <i class="fa fa-|brand-name|"></i>
117
+ </a>
118
+ ```
119
+
96
120
  ### -- Options --
97
121
 
98
122
  Options are available for stack style and stack size.
@@ -103,10 +127,10 @@ Add them next to `icon-stack` class to apply them!
103
127
  `stack-square`
104
128
  `stack-square-o`
105
129
 
106
- #### Stack sizes
107
- `stack-2x`
108
- `stack-3x`
109
- `stack-4x`
130
+ #### Stack & button Sizes
131
+ `(stack||btn)-2x`
132
+ `(stack||btn)-3x`
133
+ `(stack||btn)-4x`
110
134
 
111
135
 
112
136
  ### -- Sass variables --
@@ -114,48 +138,59 @@ Add them next to `icon-stack` class to apply them!
114
138
  //
115
139
  // Stack parameters
116
140
  //
117
- $stack-lighten-amount: 10%;
118
- $stack-darken-amount: 10%;
119
- $stack-alpha-amount: 0;
120
- $stack-hover-color: #424242;
121
- $stack-hover-color-inverse: #424242;
141
+ $stack-lighten-amount: 10%;
142
+ $stack-darken-amount: 10%;
143
+ $stack-alpha-amount: 0;
144
+ $stack-hover-color: #424242;
145
+ $stack-hover-color-inverse: #424242;
122
146
 
123
- $stack-shadow-color: transparentize(#000, 0.8);
124
- $stack-shadow-length: 6;
125
- $stack-shadow-blur: 4px;
147
+ $stack-shadow-color: transparentize(#000, 0.8);
148
+ $stack-shadow-length: 6;
149
+ $stack-shadow-blur: 4px;
126
150
 
127
- $stack-square-o-width: 3px;
128
- $stack-square-o-width-2x: 4px;
129
- $stack-square-o-width-3x: 5px;
130
- $stack-square-o-width-4x: 6px;
151
+ $border-width: 3px;
152
+ $border-width-2x: 4px;
153
+ $border-width-3x: 5px;
154
+ $border-width-4x: 6px;
131
155
 
132
- $stack-square-radius: 20%;
156
+ $stack-square-radius: 20%;
157
+ $btn-outline-radius: 8px;
133
158
 
134
- $stack-4x: 3em;
135
- $stack-3x: 2.5em;
136
- $stack-2x: 2em;
159
+ $stack-4x: 3em;
160
+ $stack-3x: 2.5em;
161
+ $stack-2x: 2em;
137
162
 
138
- $stack-anim-duration: .25s;
139
- $stack-anim-ease: ease;
163
+ $stack-anim-duration: .3s;
164
+ $stack-anim-ease: ease;
140
165
 
141
166
 
142
167
  //
143
168
  // Font-awesome icon shadow parameters
144
169
  //
145
- $icon-shadow-blur: 1px;
146
- $icon-shadow-lighten-amount: 20%;
147
- $icon-shadow-darken-amount: 30%;
148
- $icon-shadow-alpha-amount: 0.7;
149
- $icon-shadow-color: #000;
150
- $icon-shadow-color-inverse: #000;
151
- $icon-shadow-length: 100;
152
- $icon-shadow-length-o: 6;
153
-
154
- $icon-color: #fff;
155
- $icon-color-lighten-amount: 10%;
156
-
157
- $icon-anim-duration: .25s;
158
- $icon-anim-ease: ease;
170
+ $icon-shadow-blur: 1px;
171
+ $icon-shadow-lighten-amount: 20%;
172
+ $icon-shadow-darken-amount: 30%;
173
+ $icon-shadow-alpha-amount: 0.7;
174
+ $icon-shadow-color: #000;
175
+ $icon-shadow-color-inverse: #000;
176
+ $icon-shadow-length: 100;
177
+ $icon-shadow-length-o: 6;
178
+
179
+ $icon-color: #fff;
180
+
181
+ $icon-hover-lighten-amount: 10%;
182
+ $icon-bg-hover-lighten-amount: 3%;
183
+
184
+ $icon-anim-duration: .4s;
185
+ $icon-anim-ease: ease;
186
+
187
+
188
+ //
189
+ // Button parameters
190
+ //
191
+
192
+ $btn-hover-lighten-amount: 10%;
193
+ $btn-bg-hover-lighten-amount: 3%;
159
194
  ```
160
195
 
161
196
  ---
data/app/assets/config/social_colors_rails_manifest.js CHANGED
@@ -1,2 +1 @@
1
- //= link_directory ../javascripts/social_colors_rails .js
2
1
  //= link_directory ../stylesheets/social_colors_rails .scss
data/app/assets/stylesheets/social_colors_rails/_button.scss ADDED
@@ -0,0 +1,20 @@
1
+ .btn-social {
2
+
3
+ border: none;
4
+
5
+ color: #fff;
6
+ overflow: hidden;
7
+ }
8
+
9
+ .btn-social,
10
+ .btn-social-outline {
11
+ padding: .5rem .75rem;
12
+ border-radius: $btn-outline-radius;
13
+ }
14
+
15
+ #{list_to_classes(inverted-brand-names($social-list), "btn-social.")} {
16
+ &:hover,
17
+ &:focus {
18
+ color: #fff;
19
+ }
20
+ }
data/app/assets/stylesheets/social_colors_rails/_common.scss ADDED
@@ -0,0 +1,138 @@
1
+ .btn-social,
2
+ .stack-circle,
3
+ .stack-square {
4
+ &:hover,
5
+ &:focus {
6
+ background-color: $stack-hover-color !important;
7
+ }
8
+ }
9
+
10
+ .btn-social,
11
+ .icon-stack.stack-circle,
12
+ .icon-stack.stack-square {
13
+ &:hover,
14
+ &:focus {
15
+
16
+ box-shadow: long-shadow($stack-shadow-color, $stack-shadow-length, "inset", $stack-shadow-blur);
17
+
18
+ &,
19
+ .fa {
20
+ text-shadow: long-shadow($icon-shadow-color, $icon-shadow-length);
21
+ }
22
+ }
23
+ }
24
+
25
+ .icon-stack,
26
+ .btn-social,
27
+ .btn-social-outline {
28
+ &,
29
+ &:hover,
30
+ &:focus {
31
+ @include prefix(transition,
32
+ (
33
+ box-shadow $stack-anim-duration $stack-anim-ease,
34
+ text-shadow $icon-anim-duration $icon-anim-ease,
35
+ color $stack-anim-duration $stack-anim-ease
36
+ ),
37
+ webkit moz o);
38
+ }
39
+
40
+ &:hover .fa,
41
+ &:focus .fa {
42
+ @include prefix(transition,
43
+ (
44
+ text-shadow $icon-anim-duration $icon-anim-ease,
45
+ color $stack-anim-duration $stack-anim-ease
46
+ ),
47
+ webkit moz o);
48
+ }
49
+
50
+ }
51
+
52
+ .icon-stack,
53
+ .btn-social,
54
+ .btn-social-outline {
55
+ color: $icon-color;
56
+ }
57
+
58
+ .btn-social-outline,
59
+ .stack-square-o {
60
+ border-width: $border-width;
61
+ border-style: solid;
62
+ background-color: transparent;
63
+ }
64
+
65
+ .btn-4x,
66
+ .stack-4x {
67
+ font-size: $stack-4x;
68
+ border-width: $border-width-4x;
69
+ }
70
+
71
+ .btn-3x,
72
+ .stack-3x {
73
+ font-size: $stack-3x;
74
+ border-width: $border-width-3x;
75
+ }
76
+
77
+ .btn-2x,
78
+ .stack-2x {
79
+ font-size: $stack-2x;
80
+ border-width: $border-width-2x;
81
+ }
82
+
83
+ @each $name in $social-list {
84
+
85
+ // Set default shadow and stack color
86
+ $is-inverse: false;
87
+
88
+ @if contains(inverted-brand-names($social-list), nth($name, 1)) {
89
+ $is-inverse: true;
90
+ }
91
+
92
+ .#{nth($name, 1)}.btn-social,
93
+ .#{nth($name, 1)}.stack-circle,
94
+ .#{nth($name, 1)}.stack-square {
95
+ background-color: nth($name, 2);
96
+ }
97
+
98
+ // for each brand names
99
+ .#{nth($name, 1)} {
100
+ &.btn-social,
101
+ &.stack-circle,
102
+ &.stack-square {
103
+
104
+ &:hover,
105
+ &:focus {
106
+ @if $is-inverse == false {
107
+ &, .fa {
108
+ color: lighten(nth($name, 2), $icon-hover-lighten-amount);
109
+ }
110
+ } @else {
111
+ background-color: lighten(nth($name, 2), $icon-bg-hover-lighten-amount);
112
+ }
113
+ }
114
+ }
115
+
116
+ &.stack-square-o,
117
+ &.btn-social-outline {
118
+
119
+ border-color: nth($name, 2);
120
+
121
+ &,
122
+ .fa-#{nth($name, 1)} {
123
+ color: nth($name, 2);
124
+ }
125
+
126
+ &:hover,
127
+ &:focus {
128
+
129
+ box-shadow: long-shadow(transparentize(lighten(nth($name, 2), $icon-shadow-lighten-amount), $icon-shadow-alpha-amount), $icon-shadow-length-o, "inset");
130
+
131
+ &,
132
+ .fa-#{nth($name, 1)} {
133
+ text-shadow: long-shadow(transparentize(lighten(nth($name, 2), $icon-shadow-lighten-amount), $icon-shadow-alpha-amount), $icon-shadow-length-o);
134
+ }
135
+ }
136
+ }
137
+ }
138
+ }
data/app/assets/stylesheets/social_colors_rails/_mixins.scss CHANGED
@@ -17,13 +17,13 @@
17
17
  // ...
18
18
  // property: values
19
19
  //
20
- @mixin prefix($property, $values, $prefixes: ()) {
20
+ @mixin prefix( $property, $values, $prefixes: () ) {
21
21
  @each $prefix in $prefixes {
22
- #{'-' + $prefix + '-' + $property}: $values;
22
+ #{'-' + $prefix + '-' + $property}: #{$values};
23
23
  }
24
24
 
25
25
  // Output standard non-prefixed declaration
26
- #{$property}: $values;
26
+ #{$property}: #{$values};
27
27
  }
28
28
 
29
29
 
@@ -108,10 +108,10 @@
108
108
  //
109
109
  // output => (".name", ...)
110
110
  //
111
- @function list_to_classes($list) {
111
+ @function list_to_classes($list, $prefix: "") {
112
112
  $l: ();
113
113
  @each $name in $list {
114
- $l: append($l, ".#{$name}", comma);
114
+ $l: append($l, ".#{$prefix}#{$name}", comma);
115
115
  }
116
116
  @return $l;
117
117
  }
data/app/assets/stylesheets/social_colors_rails/_stack.scss ADDED
@@ -0,0 +1,27 @@
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
+
13
+ .icon-stack .fa {
14
+ color: inherit;
15
+ }
16
+
17
+ .stack-circle {
18
+ border-radius: 50%;
19
+ }
20
+
21
+ .stack-square {
22
+ border-radius: $stack-square-radius;
23
+ }
24
+
25
+ .stack-square-o {
26
+ border-radius: $stack-square-radius;
27
+ }
data/app/assets/stylesheets/social_colors_rails/_variables.scss CHANGED
@@ -52,45 +52,56 @@ $social-list: (
52
52
  //
53
53
  // Stack parameters
54
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;
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
60
 
61
- $stack-shadow-color: transparentize(#000, 0.8) !default;
62
- $stack-shadow-length: 6 !default;
63
- $stack-shadow-blur: 4px !default;
61
+ $stack-shadow-color: transparentize(#000, 0.8) !default;
62
+ $stack-shadow-length: 6 !default;
63
+ $stack-shadow-blur: 4px !default;
64
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;
65
+ $border-width: 3px !default;
66
+ $border-width-2x: 4px !default;
67
+ $border-width-3x: 5px !default;
68
+ $border-width-4x: 6px !default;
69
69
 
70
- $stack-square-radius: 20% !default;
70
+ $stack-square-radius: 20% !default;
71
+ $btn-outline-radius: 8px !default;
71
72
 
72
- $stack-4x: 3em !default;
73
- $stack-3x: 2.5em !default;
74
- $stack-2x: 2em !default;
73
+ $stack-4x: 3em !default;
74
+ $stack-3x: 2.5em !default;
75
+ $stack-2x: 2em !default;
75
76
 
76
- $stack-anim-duration: .25s !default;
77
- $stack-anim-ease: ease !default;
77
+ $stack-anim-duration: .3s !default;
78
+ $stack-anim-ease: ease !default;
78
79
 
79
80
 
80
81
  //
81
82
  // Font-awesome icon shadow parameters
82
83
  //
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;
84
+ $icon-shadow-blur: 1px !default;
85
+ $icon-shadow-lighten-amount: 20% !default;
86
+ $icon-shadow-darken-amount: 30% !default;
87
+ $icon-shadow-alpha-amount: 0.7 !default;
88
+ $icon-shadow-color: #000 !default;
89
+ $icon-shadow-color-inverse: #000 !default;
90
+ $icon-shadow-length: 100 !default;
91
+ $icon-shadow-length-o: 6 !default;
91
92
 
92
- $icon-color: #fff !default;
93
- $icon-color-lighten-amount: 10% !default;
93
+ $icon-color: #fff !default;
94
94
 
95
- $icon-anim-duration: .25s !default;
96
- $icon-anim-ease: ease !default;
95
+ $icon-hover-lighten-amount: 10% !default;
96
+ $icon-bg-hover-lighten-amount: 3% !default;
97
+
98
+ $icon-anim-duration: .4s !default;
99
+ $icon-anim-ease: ease !default;
100
+
101
+
102
+ //
103
+ // Button parameters
104
+ //
105
+
106
+ $btn-hover-lighten-amount: 10% !default;
107
+ $btn-bg-hover-lighten-amount: 3% !default;
data/app/assets/stylesheets/social_colors_rails/init.scss CHANGED
@@ -1,3 +1,5 @@
1
1
  @import "variables";
2
2
  @import "mixins";
3
- @import "classes";
3
+ @import "common";
4
+ @import "stack";
5
+ @import "button";