fortitude-sass 0.6.5 → 0.7.0

data/app/assets/javascripts/fortitude/blocks/tabs.js

@@ -0,0 +1,50 @@
+(function($){
+  'use strict';
+
+  var itemActive = 'tabs-navigation__item--is-active',
+      targetActive = 'tabs__target--is-active',
+      tabItem = '.tabs-navigation__item[data-ft-tab]';
+
+  var selectTab = function($element){
+    var $target = $.ftGetTarget($element, 'ftTab'),
+        $siblings, activeClass;
+
+    $element.siblings().each(function(){
+      var $this = $(this),
+          $otherTarget = $.ftGetTarget($this, 'ftTab');
+
+      $this.ftTransitionWith({
+        dataAttr: 'ftHideClass',
+        removeClass: itemActive,
+        endEvent: 'deselected.ft.tab'
+      });
+
+      $otherTarget.ftTransitionWith({
+        dataAttr: 'ftHideClass',
+        removeClass: targetActive,
+        endEvent: 'closed.ft.tabtarget'
+      });
+    });
+
+    $element.ftTransitionWith({
+      dataAttr: 'ftShowClass',
+      addClass: itemActive,
+      endEvent: 'opened.ft.tab'
+    });
+
+    return $target.ftTransitionWith({
+      dataAttr: 'ftShowClass',
+      addClass: targetActive,
+      endEvent: 'opened.ft.tabtarget'
+    });
+  };
+
+  $(document).on('select.ft.tab', tabItem, function(event){
+    selectTab($(this));
+  });
+
+  $(document).on('click', tabItem, function(){
+    $(this).trigger('select.ft.tab');
+  });
+
+})(jQuery);

data/app/assets/javascripts/fortitude/generic/get-target.js

@@ -0,0 +1,13 @@
+(function($){
+  $.ftGetTarget = function($element, field){
+    field = field || 'ft-target';
+    
+    var targetId = $element.data(field) || '';
+    
+    if( !targetId.match(/^#/) ){
+      targetId = '#' + targetId;
+    }
+    
+    return $(targetId);
+  };
+})(jQuery);

data/app/assets/javascripts/fortitude/generic/measure-scrollbar.js

@@ -0,0 +1,21 @@
+(function($) {
+  'use strict';
+
+  $.measureScrollBar = function() {
+    var $body = $('body'),
+        element = document.createElement('div'),
+        scrollbarWidth = element.offsetWidth - element.clientWidth;
+    
+    element.setAttribute('style', 
+      'position: absolute; ' +
+      'top: -9999px; ' + 
+      'width: 50px; ' +
+      'height: 50px; ' + 
+      'overflow: scroll;'
+    );
+    
+    $body.append(element);
+    $body.get(0).removeChild(element);
+    return scrollbarWidth;
+  };
+})(jQuery);

data/app/assets/javascripts/fortitude/{jquery/generic → generic}/screen-lock.js

@@ -2,9 +2,13 @@
   'use strict';
 
   $.screenLock = function(locking) {
-    var $html = $('html');
-    var $body = $('body');
+    var $html = $('html'),
+        $body = $('body');
 
+    if(typeof(locking) === 'undefined'){
+      locking = true;
+    }
+    
     if (locking) {
       $html.addClass('html--is-locked');
       $body.css({paddingRight: $.measureScrollBar()});

data/app/assets/javascripts/fortitude/generic/transition-with.js

@@ -0,0 +1,57 @@
+(function($){
+  'use strict';
+
+  $.fn.ftTransitionWith = function(opts){
+    opts = opts || {};
+
+    var $this = $(this),
+        deferred = $.Deferred(),
+        endEvent = opts.endEvent,
+        addClass = opts.addClass,
+        removeClass = opts.removeClass,
+        dataAttr = opts.dataAttr,
+        callback = opts.callback,
+        existing = $this.data('ftTransitionWith'),
+        transitionClass;
+
+    if(existing) {
+      existing.reject('Initiated another ftTransitionWith');
+    }
+
+    transitionClass = $this.data(dataAttr);
+
+    if(transitionClass){
+      $this.addClass(transitionClass + ' ' + addClass)
+           .waitForAnimation()
+           .then(function(){
+             if(deferred.state() !== 'rejected'){
+               $this.removeClass(transitionClass);
+               if(addClass)    { $this.addClass(addClass); }
+               if(removeClass) { $this.removeClass(removeClass); }
+               if(endEvent)    { $this.trigger(endEvent); }
+               deferred.resolveWith($this);
+             }
+           });
+
+      deferred.fail(function(){
+        $this.removeClass(transitionClass);
+      });
+
+    } else {
+
+      // 1ms timeout so we can keep the promise interface
+      setTimeout(function(){
+        if(deferred.state() !== 'rejected'){
+          if(addClass)    { $this.addClass(addClass); }
+          if(removeClass) { $this.removeClass(removeClass); }
+          if(endEvent)    { $this.trigger(endEvent); }
+          deferred.resolveWith($this);
+        }
+      }, 1);
+    }
+
+    $this.data('ftTransitionWith', deferred);
+    return deferred.promise();
+  };
+
+})(jQuery);

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

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

data/app/assets/javascripts/fortitude/generic/wait-for-animation.js

@@ -0,0 +1,27 @@
+(function($){
+  'use strict';
+
+  $.fn.waitForAnimation = function(){
+    var deferred = $.Deferred(),
+        $this = $(this),
+        existing = $this.data('ft-waiting');
+
+
+    if(existing){
+      existing.reject('Added second animation wait.');
+    }
+
+    $this.data('ft-waiting', deferred);
+
+    $this.one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
+      deferred.resolveWith($this);
+    });
+
+    $this.one("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){
+      deferred.resolveWith($this);
+    });
+
+    return deferred.promise();
+  };
+
+})(jQuery);

data/app/assets/javascripts/fortitude.js

@@ -0,0 +1 @@
+//= require_tree ./fortitude

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

@@ -13,7 +13,7 @@ $fortitude-badge-horizontal-padding--default: 1rem !default;
 $fortitude-badge-height--small: $fortitude-base-spacing-unit !default;
 $fortitude-badge-horizontal-padding--small: 0.5rem !default;
 
-$fortitude-badge-height--large: double($fortitude-base-spacing-unit) !default;
+$fortitude-badge-height--large: fortitude-double($fortitude-base-spacing-unit) !default;
 $fortitude-badge-horizontal-padding--large: 2rem !default;
 
 $fortitude-enable-badge--small: false !default;

data/app/assets/stylesheets/fortitude/api/blocks/_block-list.scss

@@ -4,9 +4,9 @@
 
 $fortitude-block-list-padding--default: $fortitude-base-spacing-unit !default;
 
-$fortitude-block-list-padding--small: halve($fortitude-block-list-padding--default) !default;
+$fortitude-block-list-padding--small: fortitude-halve($fortitude-block-list-padding--default) !default;
 
-$fortitude-block-list-padding--large: double($fortitude-block-list-padding--default) !default;
+$fortitude-block-list-padding--large: fortitude-double($fortitude-block-list-padding--default) !default;
 
 $fortitude-enable-block-list--small: false !default;
 $fortitude-enable-block-list--large: false !default;

data/app/assets/stylesheets/fortitude/api/blocks/_button.scss

@@ -12,7 +12,7 @@ $fortitude-button-horizontal-padding--default: fortitude-block-padding($fortitud
 $fortitude-button-height--small: $fortitude-base-spacing-unit + 1rem !default;
 $fortitude-button-horizontal-padding--small: fortitude-block-padding($fortitude-button-height--small, $fortitude-button-border-width) * 2 !default;
 
-$fortitude-button-height--large: double($fortitude-base-spacing-unit) + 2rem !default;
+$fortitude-button-height--large: fortitude-double($fortitude-base-spacing-unit) + 2rem !default;
 $fortitude-button-horizontal-padding--large: fortitude-block-padding($fortitude-button-height--large, $fortitude-button-border-width) * 2 !default;
 
 $fortitude-enable-button--small: false !default;

data/app/assets/stylesheets/fortitude/api/blocks/_dropdown.scss

@@ -0,0 +1,45 @@
+/*------------------------------------*\
+    #DROPDOWN
+\*------------------------------------*/
+
+@mixin fortitude-dropdown {
+  @include fortitude-clearfix;
+}
+
+@mixin fortitude-dropdown__navigation {
+  display: none;
+  position: absolute;
+  z-index: 1;
+  top: 100%;  
+}
+
+@mixin fortitude-dropdown__text--is-checked {
+  display: none;
+}
+
+@mixin fortitude-dropdown__toggle {
+  cursor: pointer;
+  z-index: 1;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  outline: 0;
+  opacity: 0;
+  @include fortitude-appearance(none);
+
+  &:checked ~ .dropdown__navigation {
+    display: block;
+  }
+
+  &:checked ~ .dropdown__text {
+    display: none;
+  }
+
+  &:checked ~ .dropdown__text--is-checked {
+    display: block;
+  }
+}

data/app/assets/stylesheets/fortitude/api/blocks/_flag.scss

@@ -1,8 +1,8 @@
 $fortitude-flag-gutter--default: $fortitude-base-spacing-unit !default;
 
-$fortitude-flag-gutter--small: halve($fortitude-flag-gutter--default) !default;
+$fortitude-flag-gutter--small: fortitude-halve($fortitude-flag-gutter--default) !default;
 
-$fortitude-flag-gutter--large: double($fortitude-flag-gutter--default) !default;
+$fortitude-flag-gutter--large: fortitude-double($fortitude-flag-gutter--default) !default;
 
 $fortitude-flag-collapse-at--responsive: 720px !default;
 

data/app/assets/stylesheets/fortitude/api/blocks/_flashbar.scss

@@ -6,12 +6,22 @@
  * A simple flashbar object.
 **/
 
+$fortitude-flashbar-border-style: solid !default;
+$fortitude-flashbar-border-width: 0 !default;
+$fortitude-flashbar__close-text-decoration: none !default;
+
 @mixin fortitude-flashbar($extensions: ()) {
   @include fortitude-clearfix;
+  border: $fortitude-flashbar-border-width $fortitude-flashbar-border-style transparent;
   position: relative;
 }
 
+@mixin fortitude-flashbar--closed($extensions: ()) {
+  display: none;
+}
+
 @mixin fortitude-flashbar__close($extensions: ()) {
   position: absolute;
-  right: halve($fortitude-base-spacing-unit);
+  right: fortitude-halve($fortitude-base-spacing-unit);
+  text-decoration: $fortitude-flashbar__close-text-decoration;
 }

data/app/assets/stylesheets/fortitude/api/blocks/_input.scss

@@ -7,7 +7,7 @@ $fortitude-field-input-border-color: #a9a9a9 !default;
 $fortitude-field-input-border-radius: 0.2rem !default;
 $fortitude-field-input-border-style: solid !default;
 $fortitude-field-input-border-width: 0.1rem !default;
-$fortitude-field-input-height: double($fortitude-base-spacing-unit) !default;
+$fortitude-field-input-height: fortitude-double($fortitude-base-spacing-unit) !default;
 $fortitude-field-input-placeholder-color: #a9a9a9 !default;
 
 $fortitude-text-input-background-color: $fortitude-field-input-background-color !default;
@@ -348,7 +348,6 @@ $fortitude-global-border-box: false !default;
   border-radius: 0;
   padding: 0;
   margin: 0;
-  outline: 0;
   position: absolute;
   top: 0;
   right: 0;
@@ -359,4 +358,8 @@ $fortitude-global-border-box: false !default;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+
+  &:focus {
+    outline: 0;
+  }
 }

data/app/assets/stylesheets/fortitude/api/blocks/_layout.scss

@@ -3,8 +3,8 @@
 \*------------------------------------*/
 
 $fortitude-layout-gutter--default: $fortitude-base-spacing-unit !default;
-$fortitude-layout-gutter--small: halve($fortitude-layout-gutter--default) !default;
-$fortitude-layout-gutter--large: double($fortitude-layout-gutter--default) !default;
+$fortitude-layout-gutter--small: fortitude-halve($fortitude-layout-gutter--default) !default;
+$fortitude-layout-gutter--large: fortitude-double($fortitude-layout-gutter--default) !default;
 
 $fortitude-enable-layout--small: false !default;
 $fortitude-enable-layout--large: false !default;

data/app/assets/stylesheets/fortitude/api/blocks/_media.scss

@@ -3,8 +3,8 @@
 \*------------------------------------*/
 
 $fortitude-media-gutter: $fortitude-base-spacing-unit !default;
-$fortitude-media-gutter--small: halve($fortitude-media-gutter) !default;
-$fortitude-media-gutter--large: double($fortitude-media-gutter) !default;
+$fortitude-media-gutter--small: fortitude-halve($fortitude-media-gutter) !default;
+$fortitude-media-gutter--large: fortitude-double($fortitude-media-gutter) !default;
 
 $fortitude-enable-media--small: false !default;
 $fortitude-enable-media--large: false !default;

data/app/assets/stylesheets/fortitude/api/blocks/_modal.scss

@@ -0,0 +1,28 @@
+@mixin fortitude-modal($extensions: ()){
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 3;
+  display: none;
+  overflow: hidden;
+  overflow-y: auto;
+
+  @if $fortitude-enable-vendor-optimizations {
+    -webkit-overflow-scrolling: touch;
+    -moz-overflow-scrolling: touch;
+    overflow-scrolling: touch;
+  }
+}
+
+@mixin fortitude-modal--is-active($extensions: ()){
+  display: block;
+}
+
+@mixin fortitude-modal__content($extensions: ()){
+  position: relative;
+  width: auto;
+  margin: fortitude-halve($fortitude-base-spacing-unit);
+  // set width in extending class
+}

data/app/assets/stylesheets/fortitude/api/blocks/_navigationbar.scss

@@ -0,0 +1 @@
+$fortitude-navigationbar-height: 4rem !default;

data/app/assets/stylesheets/fortitude/api/blocks/_shade.scss

@@ -3,10 +3,20 @@
 \*------------------------------------*/
 
 @mixin fortitude-shade($extensions: ()) {
-  display: none;
+  $is-active: map-get($extensions, 'active');
+  
+  @if($is-active){
+    @include fortitude-shade--is-active;
+  } @else {
+    display: none;
+  }
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
 }
+
+@mixin fortitude-shade--is-active($extensions: ()) {
+  display: block;
+}

data/app/assets/stylesheets/fortitude/api/blocks/_table.scss

@@ -1 +1,6 @@
+/*------------------------------------*\
+    #TABLES
+\*------------------------------------*/
 
+// Predefine the variables below in order to alter and enable specific features.
+$fortitude-enable-table--fixed: false !default;