fortitude-sass 0.3.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 63f35a2c3be05caf94aaa1df32e27c3f5d9bbf59
+  data.tar.gz: 104240afcecd8a834b26b69fe2b94df1750a3e44
+SHA512:
+  metadata.gz: eb19a0f19c1166661a2ede820870d9dc379a6ef9eb95928a7138b0043bb4c1335a29d00d116ad45f6d051ffc7c9889b60c37202b6e7f70bc904e5b1716c10515
+  data.tar.gz: af726f7d48abdf7008779cefe88674651e2098bf6d50946e0803b225523580b6292f79a8ab7d51889bf60bbb91f1c24bf114ea024805da67c3004d73c32f9cac

data/.gitignore

@@ -0,0 +1,7 @@
+*swp
+*gem
+.sass-cache/
+/fortitude/
+demo/
+tmp/
+tags

data/.npmignore

@@ -0,0 +1,9 @@
+app/
+bin/
+features/
+lib/
+bower.json
+fortitude.gemspec
+Rakefile
+Gemfile.lock
+Gemfile

data/.scss-lint.yml

@@ -0,0 +1,13 @@
+linters:
+  SpaceBeforeBrace:
+    enabled: false
+
+  Indentation:
+    enabled: true
+    width: 2
+
+  StringQuotes:
+    style: double_quotes
+
+  LeadingZero:
+    style: include_zero

data/Gemfile

@@ -0,0 +1,4 @@
+source "http://rubygems.org"
+
+# Specify your gem's dependencies in sass-mixins.gemspec
+gemspec

data/Gemfile.lock

@@ -0,0 +1,48 @@
+PATH
+  remote: .
+  specs:
+    fortitude-sass (0.2.2)
+      autoprefixer-rails
+      sass
+      thor
+
+GEM
+  remote: http://rubygems.org/
+  specs:
+    aruba (0.6.0)
+      childprocess (>= 0.3.6)
+      cucumber (>= 1.1.1)
+      rspec-expectations (>= 2.7.0)
+    autoprefixer-rails (2.2.0.20140727)
+      execjs
+    builder (3.2.2)
+    childprocess (0.5.3)
+      ffi (~> 1.0, >= 1.0.11)
+    cucumber (1.3.16)
+      builder (>= 2.1.2)
+      diff-lcs (>= 1.1.3)
+      gherkin (~> 2.12)
+      multi_json (>= 1.7.5, < 2.0)
+      multi_test (>= 0.1.1)
+    diff-lcs (1.2.5)
+    execjs (2.2.1)
+    ffi (1.9.3)
+    gherkin (2.12.2)
+      multi_json (~> 1.3)
+    multi_json (1.10.1)
+    multi_test (0.1.1)
+    rake (10.3.2)
+    rspec-expectations (3.0.3)
+      diff-lcs (>= 1.2.0, < 2.0)
+      rspec-support (~> 3.0.0)
+    rspec-support (3.0.3)
+    sass (3.3.14)
+    thor (0.19.1)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  aruba (~> 0.4)
+  fortitude-sass!
+  rake

data/README.md

@@ -0,0 +1,19 @@
+fortitude-sass
+==============
+
+Rock Solid CSS Framework
+
+if you want you can check out our style guide to see how we're using certain fortitude components.
+
+https://hired.com/library
+
+
+## Open Source by Hired
+
+[Hired](https://hired.com/?utm_source=opensource&utm_medium=fortitude&utm_campaign=readme) is a marketplace for top engineering talent to find full-time technology jobs. Talented Ruby developers (like yourself) are in extremely high demand! On Hired, apply once and receive 5 to 15 competing job offers in one week from 800+ technology companies. Average Ruby engineer salaries on Hired are around $120,000 per year!
+
+<a href="https://hired.com/?utm_source=opensource&utm_medium=fortitude&utm_campaign=readme-banner" target="_blank">
+<img src="https://dmrxx81gnj0ct.cloudfront.net/public/hired-banner-light-1-728x90.png" alt="Hired" width="728" height="90" align="center"/>
+</a>
+
+We are Ruby developers ourselves, and we use all of our open source projects in production. We always encourge forks, pull requests, and issues. Get in touch with the Hired Engineering team at _opensource@hired.com_.

data/app/assets/javascripts/fortitude/jquery/blocks/flashbar.js

@@ -0,0 +1,13 @@
+(function($) {
+    'use strict';
+
+    $(document).
+      on('close:ft:flashbar', '.flashbar', function() {
+        $(this).remove();
+      }).
+      on('click.ft.flashbar.data-api', '.flashbar__close', function(event) {
+        $(this).closest('.flashbar').trigger('close:ft:flashbar');
+        event.preventDefault();
+      });
+
+})(jQuery);

data/app/assets/javascripts/fortitude/jquery/blocks/select-input.js

@@ -0,0 +1,26 @@
+(function($) {
+  'use strict';
+
+  var $document = $(document);
+
+  function setClassName() {
+    var $this = $(this),
+        className = $this.find(':selected').attr('class') || "",
+        data = $this.data('ft.select') || {};
+
+    if (className !== data.previousClass) {
+      $this.
+        addClass(className).
+        removeClass(data.previousClass).
+        data('ft.select', $.merge({previousClass: className}, data));
+    }
+
+  }
+
+  $document.on('change.ft.select.data-api', 'select:not([multiple])', setClassName);
+
+  $document.on('DOMContentLoaded', function() {
+    $document.find('select').data('ft.select', {previousClass: ""}).each(setClassName);
+  });
+
+})(jQuery);

data/app/assets/javascripts/fortitude/jquery/blocks/shade.js

@@ -0,0 +1,48 @@
+(function($) {
+    'use strict';
+    var $html = $('html');
+
+    function transitionEndOpen() {
+      var $html = $('html');
+      $html.removeClass('html--shade--is-transitioning');
+    }
+
+    function transitionEndClose() {
+      var $html = $('html');
+      $html.removeClass('html--shade--is-transitioning');
+      $(document).trigger('close:ft:shade');
+    }
+
+    $(document).
+      on('open:ft:shade', '.shade', function(event) {
+        if(!$html.hasClass('html--shade--is-active')) {
+          var $this = $(this);
+
+          // set the transitioning class
+          $html.addClass('html--shade--is-transitioning');
+
+          // set additional class in seperate event queue.
+          setTimeout(function() {
+            $html.addClass('html--shade--is-active');
+          }, 0);
+
+          // watch the transitionEnd event to remove the transitioning class.
+          $this.transitionEnd(transitionEndOpen);
+        }
+      }).
+      on('close:ft:shade', '.shade', function(event) {
+        if($html.hasClass('html--shade--is-active')) {
+          var $this = $(this);
+          $html.
+            addClass('html--shade--is-transitioning').
+            removeClass('html--shade--is-active')
+
+          $this.transitionEnd(transitionEndOpen);
+        }
+      }).
+      on('click.ft.shade.data-api', '.shade', function(event) {
+        $(this).trigger('close:ft:shade');
+        event.preventDefault();
+    });
+
+})(jQuery);

data/app/assets/javascripts/fortitude/jquery/generic/transition-end.js

@@ -0,0 +1,50 @@
+(function ($) {
+  'use strict';
+
+  function transitionEnd() {
+    var el = document.createElement('fortitude');
+
+    var transEndEventNames = {
+      WebkitTransition : 'webkitTransitionEnd',
+      MozTransition    : 'transitionend',
+      OTransition      : 'oTransitionEnd otransitionend',
+      transition       : 'transitionend'
+    };
+
+    for (var name in transEndEventNames) {
+      if (el.style[name] !== undefined) {
+        return { end: transEndEventNames[name] };
+      }
+    }
+
+    return false;
+  }
+
+  function parseTansitionDuration(duration) {
+    var split = duration.split(/(ms|s)/, 2);
+    var result = split[1] === "ms" ? parseFloat(split[0]) : parseFloat(split[0]) * 1000;
+    return result || 0;
+  }
+
+
+  $.support.transition = transitionEnd()
+
+  $.fn.transitionEnd = function (callback) {
+    var self = this;
+    var called = false;
+    var $this = $(self);
+    var duration = parseTansitionDuration(getComputedStyle($this.get(0), null).transitionDuration);
+    var _callback = function () {
+        called = true;
+        $this.off($.support.transition.end, _callback);
+        if (timeoutId) {
+            clearTimeout(timeoutId);
+        }
+
+        callback.apply(self, arguments);
+    };
+    $this.on($.support.transition.end, _callback);
+    var timeoutId = setTimeout(_callback, duration);
+  };
+
+})(jQuery);

data/app/assets/javascripts/fortitude/jquery/generic/viewport.js

@@ -0,0 +1,7 @@
+(function($) {
+  // zoom fix on input elements
+  var $viewport = $('meta[name="viewport"]');
+  $(document).on('focus blur', ':input', function(event) {
+    $viewport.attr('content', 'width=device-width,initial-scale=1,maximum-scale=' + (event.type === 'focusout' || event.type === 'blur' ? 5 : 1));
+  });
+})(jQuery);

data/app/assets/javascripts/fortitude/jquery/index.js

@@ -0,0 +1,3 @@
+//= require_self
+//= require_tree ./blocks
+//= require_tree ./generic

data/app/assets/javascripts/fortitude.jquery.js

@@ -0,0 +1,45 @@
+(function($) {
+    'use strict';
+
+    $(document).on('click.ft.flashbar.data-api', '.flashbar__close', function(event) {
+      var $this = $(this);
+
+      $this.closest('.flashbar').remove();
+
+      event.preventDefault();
+
+    });
+
+})(jQuery);
+
+(function($) {
+    'use strict';
+    // select placeholder polyfill
+    $(document).on('change.ft.select.data-api', 'select:not([multiple])', function(event) {
+      var $this = $(this),
+          optionClassName = $this.find(':selected').attr('class'),
+          lastOptionClassName = $this.data('lastOptionClassName');
+
+      if (optionClassName !== lastOptionClassName) {
+        $this.addClass(optionClassName);
+        $this.removeClass(lastOptionClassName);
+        $this.data('lastOptionClassName', optionClassName || '');
+      }
+
+      event.preventDefault();
+
+    });
+
+    setTimeout(function() {
+      $(document).find('.select-input').trigger('change');
+    }, 0);
+
+})(jQuery);
+
+(function($) {
+  // zoom fix on input elements
+  var $viewport = $('meta[name="viewport"]');
+  $(document).on('focus blur', ':input', function(event) {
+    $viewport.attr('content', 'width=device-width,initial-scale=1,maximum-scale=' + (event.type === 'focusout' || event.type === 'blur' ? 5 : 1));
+  });
+})(jQuery);

data/app/assets/stylesheets/fortitude/base/_hr.scss

@@ -0,0 +1,10 @@
+/*------------------------------------*\
+    #HORIZONTAL RULE
+\*------------------------------------*/
+
+hr {
+    border-top: halve($fortitude-base-spacing-unit) - 0.1rem solid transparent;
+    border-bottom: 0.1rem solid;
+    border-right-color: transparent;
+    border-left-color: transparent;
+}

data/app/assets/stylesheets/fortitude/base/_images.scss

@@ -0,0 +1,32 @@
+/*------------------------------------*\
+    #IMAGES
+\*------------------------------------*/
+
+/**
+ * 1. Fluid images for responsive purposes.
+ * 2. Offset `alt` text from surrounding copy.
+ * 3. fix 2px pseudo margin with vertical-align.
+ */
+img {
+    max-width: 100%; /* [1] */
+    font-style: italic; /* [2] */
+    vertical-align: middle; /* [3] */
+}
+
+
+
+
+
+/**
+ * If a `width` and/or `height` attribute have been explicitly defined, let’s
+ * not make the image fluid.
+ */
+img[width],
+img[height] {
+    max-width: none;
+}
+
+
+img.responsive {
+  width: 100%;
+}

data/app/assets/stylesheets/fortitude/base/_lists.scss

@@ -0,0 +1,15 @@
+/*------------------------------------*\
+    #LISTS
+\*------------------------------------*/
+
+/**
+ * Remove extra vertical spacing when nesting lists.
+ */
+li {
+
+    > ul,
+    > ol {
+        margin-bottom: 0;
+    }
+
+}

data/app/assets/stylesheets/fortitude/base/_page.scss

@@ -0,0 +1,28 @@
+/*------------------------------------*\
+    #PAGE
+\*------------------------------------*/
+
+/**
+ * High-, page-level styling.
+ *
+ * 1. Set the default `font-size` and `line-height` for the entire project,
+ *    sourced from our default variables. The `font-size` is calculated to exist
+ *    in ems, the `line-height` is calculated to exist unitlessly.
+ * 2. Force scrollbars to always be visible to prevent awkward ‘jumps’ when
+ *    navigating between pages that do/do not have enough content to produce
+ *    scrollbars naturally.
+ * 3. Ensure the page always fills at least the entire height of the viewport.
+ */
+html {
+    font-size: $fortitude-base-rem-font-size; /* [1] */
+    line-height: $fortitude-base-line-height / $fortitude-base-font-size; /* [1] */
+    background-color: $fortitude-base-background-color;
+    color: $fortitude-base-color;
+    overflow-y: scroll; /* [2] */
+    min-height: 100%; /* [3] */
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
+}
+
+body {
+    @include fortitude-font-size($fortitude-base-font-size, true);
+}

data/app/assets/stylesheets/fortitude/blocks/_badge.scss

@@ -0,0 +1,141 @@
+/*------------------------------------*\
+    #BADGE
+\*------------------------------------*/
+
+/**
+ * A simple badge object.
+ */
+
+// Predefine the variables below in order to alter and enable specific features.
+$fortitude-badge-height:          $fortitude-base-spacing-unit * 1.3 !default;
+$fortitude-badge-height--small:   $fortitude-base-spacing-unit !default;
+$fortitude-badge-height--large:   double($fortitude-base-spacing-unit) !default;
+$fortitude-badge-font-size:       $fortitude-base-font-size !default;
+
+$fortitude-badge-border-width:    0.1rem !default;
+$fortitude-badge-border-style:    solid !default;
+$fortitude-badge-border-radius:   0 !default;
+
+$fortitude-enable-badge--small:   false !default;
+$fortitude-enable-badge--large:   false !default;
+$fortitude-enable-badge--pill:    false !default;
+
+
+
+
+
+@mixin fortitude-badge($extension: null) {
+    /**
+     * 1. Allow us to style box model properties.
+     * 2. Line different sized badges up with text.
+     * 3. Make badges inherit font styles (often necessary when styling `input`s as
+     *    badges).
+     * 4. Reset/normalize some styles.
+     * 6. Fixes odd inner spacing in IE7.
+     * 7. Subtract the border size from the padding value so that badges do not
+     *    grow larger as we add borders.
+     * 8. Set badge text to nowrap.
+     */
+    display: inline-block; /* [1] */
+    vertical-align: middle; /* [2] */
+    font: inherit; /* [3] */
+    text-align: center; /* [4] */
+    font-size: $fortitude-badge-font-size;
+    margin: -0.2rem 0 0; /* [4] */
+    height: $fortitude-badge-height;
+    overflow: visible; /* [6] */
+    white-space: nowrap; /* [8] */
+    line-height: $fortitude-base-line-height;
+
+    @if ($extension == small) {
+        @include fortitude-badge--small;        
+    } @else if ($extension == large) {
+        @include fortitude-badge--large;
+    } @else {
+        padding: fortitude-block-padding($fortitude-badge-height, $fortitude-badge-border-width) quarter($fortitude-base-spacing-unit); /* [7] */
+    }
+
+    @if($fortitude-badge-border-width != 0) {
+        border: $fortitude-badge-border-width $fortitude-badge-border-style transparent;
+    } @else {
+        border: 0; /* [4] */
+    }
+
+    @if ($extension == pill) {
+        @include fortitude-badge--pill;
+    } @else if($fortitude-badge-border-radius != 0) {
+        border-radius: $fortitude-badge-border-radius;
+    }
+}
+
+@mixin fortitude-badge--small {
+    padding: fortitude-block-padding($fortitude-badge-height--small, $fortitude-badge-border-width) quarter($fortitude-base-spacing-unit); /* [7] */
+}
+
+@mixin fortitude-badge--large {
+    padding: fortitude-block-padding($fortitude-badge-height--large, $fortitude-badge-border-width) quarter($fortitude-base-spacing-unit); /* [7] */
+    @if ($fortitude-block-height > $fortitude-block-line-height) {
+        line-height: ceil($fortitude-block-height / $fortitude-block-line-height) * $fortitude-block-line-height;
+    }
+}
+
+@mixin fortitude-badge--pill {
+    /**
+     * 1. Overly-large value to ensure the radius rounds the whole end of the
+     *    badge.
+     */
+
+    border-radius: 10rem; /* [1] */
+}
+
+.#{$fortitude-namespace}badge {
+    @include fortitude-badge;
+}
+
+
+
+
+
+@if ($fortitude-enable-badge--small == true) {
+
+    /**
+     * Small badges.
+     */
+
+    .#{$fortitude-namespace}badge--small {
+        @include fortitude-badge--small;
+    }
+
+}
+
+
+
+
+
+@if ($fortitude-enable-badge--large == true) {
+
+    /**
+     * Large badges.
+     */
+
+    .#{$fortitude-namespace}badge--large {
+        @include fortitude-badge--large;
+    }
+
+}
+
+
+
+
+
+@if ($fortitude-enable-badge--pill == true) {
+
+    /**
+     * Round-ended badges.
+     */
+
+    .#{$fortitude-namespace}badge--pill {
+        @include fortitude-badge--pill;
+    }
+
+}