social_colors_rails 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 81e120c1208b1343eaf0f6c918a69f82cff50864
+  data.tar.gz: 3db13c1a5f62c9a3d5a015068415a6aca2a3c1db
+SHA512:
+  metadata.gz: 57014280853a952618e67ac59fbe7ef8ff99467abf9ceac6ad613b0da357f0f60efac5ba183460731230ec7de31391198f124f455691915cf371a4aa5e4abad6
+  data.tar.gz: 72630251584ec0b2c994a4bcb4dc36ac8f52529f26f15b1b747b4c6ed51bbcc271fed1afb11967e281471f7245ec3967078961fbaa2de112d92ffeb902814716

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2017 Timothée Ville
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,187 @@
+# Social-colors-rails
+Based on [font-awesome](http://fontawesome.io/), rails-social-colors provide official colors of social brand icons
+
+## Installation
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'social_colors_rails'
+```
+
+And then execute `bundle install`
+
+### -- Simple use --
+
+For simple use, add it to your rails asset-pipeline
+
+```css
+/*
+ *= require social_colors_rails
+ * Or for production
+ *= require social_colors_rails.min
+ */
+```
+in your `application.css` file
+
+Or if you work with SASS
+```scss
+@import "social_colors_rails";
+```
+
+### -- Customized --
+You can customize the social_colors rails plugin by importing the sass file and overwrite variables.
+```scss
+// Import your custom variables before the social_colors lib
+@import "_custom_variables";
+
+@import "social_colors_rails/init";
+```
+
+---
+
+## Usage
+
+The prefered method is to use the `social_tag` helper
+```ruby
+
+social_tag "github", "https://github.com/TimVille"
+#  => <a class="icon-stack stack-circle github" target="_blank" rel="external nofollow" href="https://github.com/TimVille">
+#       <i class="fa fa-github"></i>
+#     </a>
+
+social_tag "github", "https://github.com/TimVille", style: "square"
+#  => <a class="icon-stack stack-square github" target="_blank" rel="external nofollow" href="https://github.com/TimVille">
+#       <i class="fa fa-github"></i>
+#     </a>
+
+social_tag "github", "https://github.com/TimVille", size: "2x"
+#  => <a class="icon-stack stack-circle github stack-2x" target="_blank" rel="external nofollow" href="https://github.com/TimVille">
+#       <i class="fa fa-github"></i>
+#     </a>
+
+social_tag "github", "https://github.com/TimVille", style: "square-o", size: "3x"
+#  => <a class="icon-stack stack-square-o github stack-3x" target="_blank" rel="external nofollow" href="https://github.com/TimVille">
+#       <i class="fa fa-github"></i>
+#     </a>
+
+social_tag "github", "https://github.com/TimVille", size: "3x", title: "My awesome link title"
+#  => <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">
+#       <i class="fa fa-github"></i>
+#     </a>
+```
+
+In order to provide a context to the icons, you need to wrap your font-awesome icon with
+```html
+<div class="icon-stack |brand-name|"></div>
+```
+### -- Options --
+
+Options are available for stack style and stack size.
+Add them next to `icon-stack` class to apply them!
+
+#### Stack styles
+`stack-circle`
+`stack-square`
+`stack-square-o`
+
+#### Stack sizes
+`stack-2x`
+`stack-3x`
+`stack-4x`
+
+
+### -- Sass variables --
+```scss
+//
+// Stack parameters
+//
+$stack-lighten-amount:       10%;
+$stack-darken-amount:        10%;
+$stack-alpha-amount:         0;
+$stack-hover-color:          #424242;
+$stack-hover-color-inverse:  #424242;
+
+$stack-shadow-color:         transparentize(#000, 0.8);
+$stack-shadow-length:        6;
+$stack-shadow-blur:          4px;
+
+$stack-square-o-width:       3px;
+$stack-square-o-width-2x:    4px;
+$stack-square-o-width-3x:    5px;
+$stack-square-o-width-4x:    6px;
+
+$stack-square-radius:        20%;
+
+$stack-4x:                   3em;
+$stack-3x:                   2.5em;
+$stack-2x:                   2em;
+
+$stack-anim-duration:        .25s;
+$stack-anim-ease:            ease;
+
+
+//
+// Font-awesome icon shadow parameters
+//
+$icon-shadow-blur:           1px;
+$icon-shadow-lighten-amount: 20%;
+$icon-shadow-darken-amount:  30%;
+$icon-shadow-alpha-amount:   0.7;
+$icon-shadow-color:          #000;
+$icon-shadow-color-inverse:  #000;
+$icon-shadow-length:         100;
+$icon-shadow-length-o:       6;
+
+$icon-color:                 #fff;
+$icon-color-lighten-amount:  10%;
+
+$icon-anim-duration:         .25s;
+$icon-anim-ease:             ease;
+```
+
+---
+
+## Exemple
+
+```html
+<div class="icon-stack stack-circle github stack-4x">
+  <i class="fa fa-github"></i>
+</div>
+```
+
+---
+
+## Available brand colors
+  Brand names       |               |               |
+  :----------------:|:-------------:|:-------------:|
+  Amazon            | Android       |
+  Behance           | Bitbucket     |
+  Codepen           |               |
+  Delicious         | Deviantart    | Dropbox
+  Etsy              |               |
+  Facebook          | Firefox       | Flickr
+  Github            | Gitlab        | Google-plus
+  Houzz             |               |
+  Instagram         |               |
+  Lastfm            | Linkedin      |
+  Pinterest         |               |
+  Reddit            | Rss           |
+  Skype             | Slack         | Snapchat
+  Soundcloud        | Spotify       | Stack-Exchange
+  Stack-Overflow    | Steam         | Stumbleupon
+  Trello            | Tripadvisor   | Tumblr
+  Twitter           |               |
+  Viadeo            | Vimeo         | Vine
+  Wechat            | Whatsapp      |
+  Yahoo             | Yelp          | Youtube
+  Envelope          |               |
+
+
+---
+
+## Contributing
+You can contribute by forking this project.
+Enjoy!
+
+## License
+The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).

data/Rakefile

@@ -0,0 +1,26 @@
+begin
+  require 'bundler/setup'
+rescue LoadError
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+end
+
+require 'rdoc/task'
+
+RDoc::Task.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = 'rdoc'
+  rdoc.title    = 'SocialColorsRails'
+  rdoc.options << '--line-numbers'
+  rdoc.rdoc_files.include('README.md')
+  rdoc.rdoc_files.include('lib/**/*.rb')
+end
+
+APP_RAKEFILE = File.expand_path("../spec/test_app/Rakefile", __FILE__)
+load 'rails/tasks/engine.rake'
+
+
+load 'rails/tasks/statistics.rake'
+
+
+
+require 'bundler/gem_tasks'
+

data/app/assets/config/social_colors_rails_manifest.js

@@ -0,0 +1,2 @@
+//= link_directory ../javascripts/social_colors_rails .js
+//= link_directory ../stylesheets/social_colors_rails .scss

data/app/assets/javascripts/social_colors_rails/application.js

@@ -0,0 +1,13 @@
+// This is a manifest file that'll be compiled into application.js, which will include all the files
+// listed below.
+//
+// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
+// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
+//
+// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
+// compiled file. JavaScript code in this file should be added after the last require_* statement.
+//
+// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
+// about supported directives.
+//
+//= require_tree .

data/app/assets/stylesheets/social_colors_rails/_classes.scss

@@ -0,0 +1,120 @@
+.icon-stack {
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  width: 2em;
+  height: 2em;
+
+  overflow: hidden;
+
+  @include prefix(transition, all $stack-anim-duration $stack-anim-ease, webkit moz o);
+
+}
+
+.icon-stack .fa {
+  @include prefix(transition, all $icon-anim-duration $icon-anim-ease, webkit moz o);
+  color: $icon-color;
+}
+
+.stack-circle {
+  border-radius: 50%;
+}
+
+.stack-square {
+  border-radius: $stack-square-radius;
+}
+
+.stack-square-o {
+  border-radius: $stack-square-radius;
+  border-width: $stack-square-o-width;
+  border-style: solid;
+  background-color: transparent;
+}
+
+.stack-4x {
+  font-size: $stack-4x;
+  border-width: $stack-square-o-width-4x;
+}
+
+.stack-3x {
+  font-size: $stack-3x;
+  border-width: $stack-square-o-width-3x;
+}
+
+.stack-2x {
+  font-size: $stack-2x;
+  border-width: $stack-square-o-width-2x;
+}
+
+#{list_to_classes(normal-brand-names($social-list))} {
+  &.stack-circle,
+  &.stack-square {
+    &:hover,
+    &:focus {
+      background-color: $stack-hover-color;
+    }
+  }
+}
+
+#{list_to_classes(brand-names($social-list))} {
+  &.stack-circle,
+  &.stack-square {
+
+    &:hover,
+    &:focus {
+
+      box-shadow: long-shadow($stack-shadow-color, $stack-shadow-length, "inset", $stack-shadow-blur);
+
+      .fa {
+        text-shadow: long-shadow($icon-shadow-color, $icon-shadow-length);
+      }
+    }
+  }
+}
+
+@each $name in $social-list {
+
+  // Set default shadow and stack color
+  $is-inverse: false;
+
+  @if contains(inverted-brand-names($social-list), nth($name, 1)) {
+    $is-inverse: true;
+  }
+
+  // for each brand names
+  .#{nth($name, 1)} {
+    &.stack-circle,
+    &.stack-square {
+
+      background-color: nth($name, 2);
+
+      &:hover .fa-#{nth($name, 1)} ,
+      &:focus .fa-#{nth($name, 1)} {
+        @if $is-inverse == false {
+          color: lighten(nth($name, 2), $icon-color-lighten-amount);
+        }
+      }
+    }
+
+    &.stack-square-o {
+
+      border-color: nth($name, 2);
+
+      .fa-#{nth($name, 1)} {
+        color: nth($name, 2);
+      }
+
+      &:hover,
+      &:focus {
+
+        box-shadow: long-shadow(transparentize(lighten(nth($name, 2), $icon-shadow-lighten-amount), $icon-shadow-alpha-amount), $icon-shadow-length-o, "inset");
+
+        .fa-#{nth($name, 1)} {
+          text-shadow: long-shadow(transparentize(lighten(nth($name, 2), $icon-shadow-lighten-amount), $icon-shadow-alpha-amount), $icon-shadow-length-o);
+        }
+      }
+    }
+  }
+}

data/app/assets/stylesheets/social_colors_rails/_mixins.scss

@@ -0,0 +1,117 @@
+//
+//  Check if var is in list
+//  params => list, var
+//
+//  output => boolean
+//
+@function contains($list,$var) {
+  @return (null != index($list, $var));
+}
+
+
+//
+//  Prefix property with vendor names
+//  params => property, values, vendors
+//
+//  output => -vendor-property: values
+//            ...
+//            property: values
+//
+@mixin prefix($property, $values, $prefixes: ()) {
+  @each $prefix in $prefixes {
+    #{'-' + $prefix + '-' + $property}: $values;
+  }
+
+  // Output standard non-prefixed declaration
+  #{$property}: $values;
+}
+
+
+//
+//  Shadow list generator
+//  params => color, length(number), inset?(str), blur?(px)
+//
+//  output => inset? 1px 1px blur color,
+//            ...,
+//            inset? (length-1)px (length-1)px blur color,
+//            inset? (length)px (length)px blur color
+//
+@function long-shadow($scolor, $length, $inset:"", $blur: $icon-shadow-blur) {
+  $list: ();
+  @for $i from 1 through $length {
+    $list: append($list ,unquote($inset) $i+px $i+px $blur $scolor, comma);
+  }
+  @return $list;
+}
+
+
+//
+//  Extract all names
+//  params => ( (name, color, inverted?), ...)
+//
+//  output => (name, ...)
+//
+@function brand-names($list) {
+  $l: ();
+  @each $name in $list {
+    $l: append($l, #{nth($name, 1)}, comma);
+  }
+  @return $l;
+}
+
+
+//
+//  Extract all not-inverted names
+//  params => ( (name, color, inverted?), ...)
+//
+//  output => (name, ...)
+//
+@function normal-brand-names($list) {
+  @return nth(classified-brand-names($list), 1);
+}
+
+
+//
+//  Retrieve all inverted names
+//  params => ( (name, color, inverted?), ...)
+//
+//  output => (name, ...)
+//
+@function inverted-brand-names($list) {
+  @return nth(classified-brand-names($list), 2);
+}
+
+
+//
+//  Classify not-inverted and inverted names
+//  params => ( (name, color, inverted?), ...)
+//
+//  output => ( (not-inverted-name, ...), (inverted-name, ...) )
+//
+@function classified-brand-names($list) {
+  $inverse: ();
+  $normal: ();
+  @each $name in $list {
+    @if length($name) == 3 {
+      $inverse: append($inverse, nth($name, 1), comma);
+    } @else {
+      $normal: append($normal, nth($name, 1), comma);
+    }
+  }
+  @return ($normal $inverse);
+}
+
+
+//
+//  Transform name-list to class-list
+//  params => (name, ...)
+//
+//  output => (".name", ...)
+//
+@function list_to_classes($list) {
+  $l: ();
+  @each $name in $list {
+    $l: append($l, ".#{$name}", comma);
+  }
+  @return $l;
+}

data/app/assets/stylesheets/social_colors_rails/_variables.scss

@@ -0,0 +1,96 @@
+//
+// Brand name list ( (name, color, inverted?), ... )
+//
+$social-list: (
+  amazon          #ff9900,
+  android         #a4c639,
+  behance         #1769ff,
+  bitbucket       #205081,
+  codepen         #0ebeff,
+  delicious       #3399ff,
+  deviantart      #05cc47,
+  dropbox         #007ee5,
+  etsy            #d5641c,
+  facebook        #3b5998,
+  firefox         #e66000,
+  flickr          #0063dc,
+  github          #333333  inverted,
+  gitlab          #fca326,
+  google-plus     #db3236,
+  houzz           #7ac142,
+  instagram       #405de6,
+  lastfm          #d51007,
+  linkedin        #0077b5,
+  pinterest       #cb2027,
+  reddit          #ff4500,
+  rss             #f26522,
+  skype           #00aff0,
+  slack           #6ecadc,
+  snapchat        #fffc00,
+  soundcloud      #ff8800,
+  spotify         #2ebd59,
+  stack-exchange  #1e5397,
+  stack-overflow  #f48024,
+  steam           #00adee,
+  stumbleupon     #eb4924,
+  trello          #0079bf,
+  tripadvisor     #589442,
+  tumblr          #35465c  inverted,
+  twitter         #1da1f2,
+  viadeo          #f07355,
+  vimeo           #162221  inverted,
+  vine            #00b488,
+  wechat          #7bb32e,
+  whatsapp        #075e54  inverted,
+  yahoo           #410093  inverted,
+  yelp            #af0606,
+  youtube         #e52d27,
+  envelope        #333333  inverted
+);
+
+
+//
+// Stack parameters
+//
+$stack-lighten-amount:       10%      !default;
+$stack-darken-amount:        10%      !default;
+$stack-alpha-amount:         0        !default;
+$stack-hover-color:          #424242  !default;
+$stack-hover-color-inverse:  #424242  !default;
+
+$stack-shadow-color:         transparentize(#000, 0.8) !default;
+$stack-shadow-length:        6        !default;
+$stack-shadow-blur:          4px      !default;
+
+$stack-square-o-width:       3px      !default;
+$stack-square-o-width-2x:    4px      !default;
+$stack-square-o-width-3x:    5px      !default;
+$stack-square-o-width-4x:    6px      !default;
+
+$stack-square-radius:        20%      !default;
+
+$stack-4x:                   3em      !default;
+$stack-3x:                   2.5em    !default;
+$stack-2x:                   2em      !default;
+
+$stack-anim-duration:        .25s     !default;
+$stack-anim-ease:            ease     !default;
+
+
+//
+// Font-awesome icon shadow parameters
+//
+$icon-shadow-blur:           1px      !default;
+$icon-shadow-lighten-amount: 20%      !default;
+$icon-shadow-darken-amount:  30%      !default;
+$icon-shadow-alpha-amount:   0.7      !default;
+$icon-shadow-color:          #000     !default;
+$icon-shadow-color-inverse:  #000     !default;
+$icon-shadow-length:         100      !default;
+$icon-shadow-length-o:       6        !default;
+
+$icon-color:                 #fff     !default;
+$icon-color-lighten-amount:  10%      !default;
+
+$icon-anim-duration:         .25s     !default;
+$icon-anim-ease:             ease     !default;

data/app/assets/stylesheets/social_colors_rails/init.scss

@@ -0,0 +1,3 @@
+@import "variables";
+@import "mixins";
+@import "classes";