pusher_chameleon 1.0.0

data/lib/pusher_chameleon.rb

@@ -0,0 +1,71 @@
+module PusherChameleon
+  class << self
+    # Inspired by Kaminari
+    def load!
+
+      if rails?
+        register_rails_engine
+      elsif sprockets?
+        register_sprockets
+      end
+
+      configure_sass
+    end
+
+    # Paths
+    def gem_path
+      @gem_path ||= File.expand_path '..', File.dirname(__FILE__)
+    end
+
+    def stylesheets_path
+      File.join assets_path, 'stylesheets'
+    end
+
+    def javascripts_path
+      File.join assets_path, 'javascripts'
+    end
+
+    def images_path
+      File.join assets_path, 'images'
+    end
+
+    def assets_path
+      @assets_path ||= File.join gem_path, ''
+    end
+
+    # Environment detection helpers
+    def sprockets?
+      defined?(::Sprockets)
+    end
+
+    def rails?
+      defined?(::Rails)
+      autoload 'VERSION', 'pusher_chameleon/version'
+    end
+
+    private
+
+    def configure_sass
+      require 'sass'
+
+      ::Sass.load_paths << stylesheets_path
+
+      # bootstrap requires minimum precision of 8, see https://github.com/twbs/bootstrap-sass/issues/409
+      ::Sass::Script::Number.precision = [8, ::Sass::Script::Number.precision].max
+    end
+
+
+    def register_rails_engine
+      require 'pusher_chameleon/engine'
+    end
+
+
+    def register_sprockets
+      Sprockets.append_path(stylesheets_path)
+      Sprockets.append_path(javascripts_path)
+      Sprockets.append_path(images_path)
+    end
+  end
+end
+
+PusherChameleon.load!

data/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "pusher_chameleon",
+  "version": "1.0.0",
+  "description": "A collection of front-end patterns used across Pusher.",
+  "repository": "https://github.com/pusher/chameleon",
+  "keywords": [
+    "pattern",
+    "library",
+    "living",
+    "styleguide"
+  ],
+  "author": "Alex Pate",
+  "license": "MIT",
+  "files": [
+    "README.md",
+    "images",
+    "javascripts",
+    "stylesheets"
+  ],
+  "bugs": {
+    "url": "https://github.com/pusher/chameleon/issues"
+  },
+  "homepage": "https://github.com/pusher/chameleon#readme"
+}

data/pusher_chameleon.gemspec

@@ -0,0 +1,21 @@
+$:.push File.expand_path("../lib", __FILE__)
+
+require "pusher_chameleon/version"
+
+Gem::Specification.new do |s|
+  s.name         = "pusher_chameleon"
+  s.version      = PusherChameleon::VERSION
+  s.summary      = 'Pusher Chameleon front-end asset library'
+  s.description  = 'Chameleon holds various front-end assets that are shared across our products'
+  s.authors      = ['Alex Pate']
+  s.email        = 'ap@pusher.com'
+  s.homepage     = 'https://github.com/pusher/chameleon'
+  s.license      = 'MIT'
+
+  s.add_dependency "sass", ">= 3.2.0"
+  s.add_development_dependency "gem_publisher", "1.3.1"
+  s.add_development_dependency "rake", "0.9.2.2"
+
+  s.require_paths = ["lib", "app"]
+  s.files         = `git ls-files`.split($\) - %w(.gitignore docs gulpfile.js Rakefile)
+end

data/stylesheets/_base.scss

@@ -0,0 +1,400 @@
+@mixin CHAMELEON-base {
+
+  /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
+
+  /**
+   * 1. Set default font family to sans-serif.
+   * 2. Prevent iOS and IE text size adjust after device orientation change,
+   *    without disabling user zoom.
+   */
+
+  html {
+    -ms-text-size-adjust: 100%; /* 2 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+  }
+
+  /* HTML5 display definitions
+     ========================================================================== */
+
+  /**
+   * Correct `block` display not defined for any HTML5 element in IE 8/9.
+   * Correct `block` display not defined for `details` or `summary` in IE 10/11
+   * and Firefox.
+   * Correct `block` display not defined for `main` in IE 11.
+   */
+
+  article,
+  aside,
+  details,
+  figcaption,
+  figure,
+  footer,
+  header,
+  hgroup,
+  main,
+  menu,
+  nav,
+  section,
+  summary {
+    display: block;
+  }
+
+  /**
+   * 1. Correct `inline-block` display not defined in IE 8/9.
+   * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
+   */
+
+  audio,
+  canvas,
+  progress,
+  video {
+    display: inline-block; /* 1 */
+    vertical-align: baseline; /* 2 */
+  }
+
+  /**
+   * Prevent modern browsers from displaying `audio` without controls.
+   * Remove excess height in iOS 5 devices.
+   */
+
+  audio:not([controls]) {
+    display: none;
+    height: 0;
+  }
+
+  /**
+   * Address `[hidden]` styling not present in IE 8/9/10.
+   * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
+   */
+
+  [hidden],
+  template {
+    display: none;
+  }
+
+  /* Links
+     ========================================================================== */
+
+  /**
+   * Remove the gray background color from active links in IE 10.
+   */
+
+  a {
+    background-color: transparent;
+  }
+
+  /**
+   * Improve readability of focused elements when they are also in an
+   * active/hover state.
+   */
+
+  a:active,
+  a:hover {
+    outline: 0;
+  }
+
+  /* Text-level semantics
+     ========================================================================== */
+
+  /**
+   * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
+   */
+
+  abbr[title] {
+    border-bottom: 1px dotted;
+  }
+
+  /**
+   * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
+   */
+
+  b,
+  strong {
+    font-weight: bold;
+  }
+
+  /**
+   * Address styling not present in Safari and Chrome.
+   */
+
+  dfn {
+    font-style: italic;
+  }
+
+  /**
+   * Address styling not present in IE 8/9.
+   */
+
+  mark {
+    background: #ff0;
+    color: #000;
+  }
+
+  /**
+   * Address inconsistent and variable font size in all browsers.
+   */
+
+  /**
+   * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+   */
+
+  sub,
+  sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+
+  sup {
+    top: -0.5em;
+  }
+
+  sub {
+    bottom: -0.25em;
+  }
+
+  /* Embedded content
+     ========================================================================== */
+
+  /**
+   * Remove border when inside `a` element in IE 8/9/10.
+   */
+
+  img {
+    border: 0;
+  }
+
+  /**
+   * Correct overflow not hidden in IE 9/10/11.
+   */
+
+  svg:not(:root) {
+    overflow: hidden;
+  }
+
+  /* Grouping content
+     ========================================================================== */
+
+  /**
+   * Address margin not present in IE 8/9 and Safari.
+   */
+
+  figure {
+    margin: 1em 40px;
+  }
+
+  /**
+   * Address differences between Firefox and other browsers.
+   */
+
+  hr {
+    box-sizing: content-box;
+    height: 0;
+  }
+
+  /**
+   * Contain overflow in all browsers.
+   */
+
+  pre {
+    overflow: auto;
+  }
+
+  /**
+   * Address odd `em`-unit font size rendering in all browsers.
+   */
+
+  code,
+  kbd,
+  pre,
+  samp {
+    font-family: monospace, monospace;
+    font-size: 1em;
+  }
+
+  /* Forms
+     ========================================================================== */
+
+  /**
+   * Address `overflow` set to `hidden` in IE 8/9/10/11.
+   */
+
+  button {
+    overflow: visible;
+  }
+
+  /**
+   * Address inconsistent `text-transform` inheritance for `button` and `select`.
+   * All other form control elements do not inherit `text-transform` values.
+   * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+   * Correct `select` style inheritance in Firefox.
+   */
+
+  button,
+  select {
+    text-transform: none;
+  }
+
+  /**
+   * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+   *    and `video` controls.
+   * 2. Correct inability to style clickable `input` types in iOS.
+   * 3. Improve usability and consistency of cursor style between image-type
+   *    `input` and others.
+   */
+
+  button,
+  html input[type="button"], /* 1 */
+  input[type="reset"],
+  input[type="submit"] {
+    -webkit-appearance: button; /* 2 */
+    cursor: pointer; /* 3 */
+  }
+
+  /**
+   * Re-set default cursor for disabled elements.
+   */
+
+  button[disabled],
+  html input[disabled] {
+    cursor: default;
+  }
+
+  /**
+   * Remove inner padding and border in Firefox 4+.
+   */
+
+  button::-moz-focus-inner,
+  input::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+  }
+
+  /**
+   * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+   * the UA stylesheet.
+   */
+
+  input {
+    line-height: normal;
+  }
+
+  /**
+   * It's recommended that you don't attempt to style these elements.
+   * Firefox's implementation doesn't respect box-sizing, padding, or width.
+   *
+   * 1. Address box sizing set to `content-box` in IE 8/9/10.
+   * 2. Remove excess padding in IE 8/9/10.
+   */
+
+  input[type="checkbox"],
+  input[type="radio"] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+  }
+
+  /**
+   * Fix the cursor style for Chrome's increment/decrement buttons. For certain
+   * `font-size` values of the `input`, it causes the cursor style of the
+   * decrement button to change from `default` to `text`.
+   */
+
+  input[type="number"]::-webkit-inner-spin-button,
+  input[type="number"]::-webkit-outer-spin-button {
+    height: auto;
+  }
+
+  /**
+   * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
+   * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
+   */
+
+  input[type="search"] {
+    -webkit-appearance: textfield; /* 1 */
+    box-sizing: content-box; /* 2 */
+  }
+
+  /**
+   * Remove inner padding and search cancel button in Safari and Chrome on OS X.
+   * Safari (but not Chrome) clips the cancel button when the search input has
+   * padding (and `textfield` appearance).
+   */
+
+  input[type="search"]::-webkit-search-cancel-button,
+  input[type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+
+
+  /**
+   * 1. Correct `color` not being inherited in IE 8/9/10/11.
+   * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+   */
+
+  legend {
+    border: 0; /* 1 */
+    padding: 0; /* 2 */
+  }
+
+  /**
+   * Remove default vertical scrollbar in IE 8/9/10/11.
+   */
+
+  textarea {
+    overflow: auto;
+  }
+
+  /**
+   * Don't inherit the `font-weight` (applied by a rule above).
+   * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+   */
+
+  optgroup {
+    font-weight: bold;
+  }
+
+  /* Tables
+     ========================================================================== */
+
+  /**
+   * Remove most spacing between table cells.
+   */
+
+  table {
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+
+  td,
+  th {
+    padding: 0;
+  }
+
+  *,
+  *:before,
+  *:after {
+    box-sizing: border-box;
+
+    @if($global-font-smoothing) {
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+    }
+  }
+
+  html,
+  body {
+    @extend %font-family-secondary;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    min-height: 100%;
+  }
+
+  // Foundation MediaQuery Binder
+  // This is used to pass the media query sizes from CSS to JS
+
+  .foundation-mq {
+    font-family: '#{-zf-bp-serialize($breakpoints)}';
+  }
+}

data/stylesheets/_global.scss

@@ -0,0 +1,96 @@
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+// Global Variables & Styles
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+// Layout & Grid
+$global-width: 1200px !default;
+$global-left: left;
+$global-right: right;
+
+$breakpoints: (
+  small: 0,
+  medium: 640px,
+  large: 1024px,
+  xlarge: 1200px,
+  xxlarge: 1440px,
+) !default;
+
+$breakpoint-classes: (small medium large) !default;
+
+$grid-row-width: $global-width;
+$grid-column-count: 12 !default;
+$grid-column-gutter: (
+  small: 20px,
+  medium: 30px,
+) !default;
+
+$grid-column-align-edge: true;
+$block-grid-max: 8;
+
+// Base Colour Palette
+$color-palette: (
+  primary: #549eff,
+  secondary: #977fda,
+  developer: #58d794,
+  success: #2bc78a,
+  warning: #ffae00,
+  danger: #b74a48,
+  information: #34495e,
+  alert: #b74a48,
+  beta: #a57cec
+) !default;
+
+$color-primary: map-get($color-palette, primary);
+$color-secondary: map-get($color-palette, secondary);
+$color-developer: map-get($color-palette, developer);
+$color-success: map-get($color-palette, success);
+$color-warning: map-get($color-palette, warning);
+$color-danger: map-get($color-palette, danger);
+$color-information: map-get($color-palette, information);
+$color-beta: map-get($color-palette, beta);
+
+// Neutrals Colour Palette
+$color-neutrals: (
+  white: #ffffff,
+  black: #2b303b,
+  slate: #414859,
+  silver: #8690a6,
+  smoke: #d3dce7,
+  snow: #f4f8fb
+) !default;
+
+$color-white: map-get($color-neutrals, white);
+$color-black: map-get($color-neutrals, black);
+$color-slate: map-get($color-neutrals, slate);
+$color-silver: map-get($color-neutrals, silver);
+$color-smoke: map-get($color-neutrals, smoke);
+$color-snow: map-get($color-neutrals, snow);
+// Legacy
+$color-off-white: $color-snow;
+$color-grey-one: $color-silver;
+
+
+// Typography
+$global-font-size: 100% !default;
+$global-font-smoothing: false !default;
+
+$font-family-primary: 'pusher-realtime-text', Helmet, Freesans, sans-serif !default;
+$font-family-secondary: 'proxima-nova', Helmet, Freesans, sans-serif !default;
+$font-family-monospace: Menlo, Consolas, Monaco, 'Andale Mono', monospace !default;
+
+$syntax-highlighting-style: 'light' !default;
+
+
+%font-family-primary {
+  font-family: $font-family-primary;
+}
+
+%font-family-secondary {
+  font-family: $font-family-secondary;
+}
+
+$cdn-font-url: "https://d3ulslzrwa6w0a.cloudfront.net";
+
+// Misc
+$border-radius: 0px !default;
+$button-namespace: 'btn' !default;

data/stylesheets/chameleon.scss

@@ -0,0 +1,30 @@
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+//
+// PUSHER CHAMELEON
+// =-=-=-=-=-=-=-=-=
+// The base layer of front-end Pusher assets
+// Based on Foundation for Sites by ZURB
+//
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+// Utilities
+@import 'util/util';
+
+// Globals
+@import 'global';
+
+// Base
+@import 'base';
+@import 'typography/typography';
+@import 'grid/grid';
+@import 'forms/forms';
+
+@import 'components/code_box';
+@import 'components/signpost';
+@import 'components/statistic';
+@import 'components/flex_aligners';
+@import 'components/visibility';
+@import 'components/spacers';
+@import 'components/alert';
+@import 'components/tooltip';
+@import 'components/label';