social_colors_rails 0.1.3 → 0.2.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.
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";