fortitude-sass 0.6.1 → 0.6.3

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

@@ -2,17 +2,9 @@
     #LAYOUT
 \*------------------------------------*/
 
-/**
- * The Fortitude layout system uses `box-sizing: border-box;` and
- * `display: inline-block;` to create an extremely powerful, flexible
- * alternative to the traditional grid system. Combine the layout items with
- * the widths found in `trumps.widths`.
-**/
-
-// Predefine the variables below in order to alter and enable specific features.
-$fortitude-layout-gutter: $fortitude-base-spacing-unit !default;
-$fortitude-layout-gutter--small: halve($fortitude-layout-gutter) !default;
-$fortitude-layout-gutter--large: double($fortitude-layout-gutter) !default;
+$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-enable-layout--small: false !default;
 $fortitude-enable-layout--large: false !default;
@@ -23,64 +15,62 @@ $fortitude-enable-layout--bottom: false !default;
 $fortitude-enable-layout--right: false !default;
 $fortitude-enable-layout--center: false !default;
 
-// Here we set a variable assuming that `box-sizing: border-box;` is not set
-// globally. If it has been previously been defined, the following variable will
-// be overriden and will be set to `true`.
 $fortitude-global-border-box: false !default;
 
-@mixin fortitude-layout($fortitude-extension: null) {
+@mixin fortitude-layout($extensions: ()) {
+  $is-flush:  fortitude-contains($extensions, flush);
+  $is-small:  fortitude-contains($extensions, small);
+  $is-large:  fortitude-contains($extensions, large);
+  $is-center: fortitude-contains($extensions, center);
+  $is-right:  fortitude-contains($extensions, right);
+  $is-rev:    fortitude-contains($extensions, rev);
+
   list-style: none;
   display: block;
   margin: 0;
   padding: 0;
-  margin-left: -$fortitude-layout-gutter;
-}
 
-@mixin fortitude-layout__item($fortitude-extension: null) {
-  /**
-   * 1. Cause columns to stack side-by-side.
-   * 2. Space columns apart.
-   * 3. Align columns to the tops of each other.
-   * 4. Full-width unless told to behave otherwise.
-   * 5. Required to combine fluid widths and fixed gutters.
-  **/
-  display: inline-block;
-  /* [1] */
-  padding-left: $fortitude-layout-gutter;
-  /* [2] */
-  vertical-align: top;
-  /* [3] */
-  width: 100%;
-  /* [4] */
-  position: relative;
-  @if $fortitude-global-border-box == false {
-    box-sizing: border-box;
-    /* [5] */
+  @if $is-flush {
+    @include fortitude-layout--flush;
+  } @else if $is-small {
+    @include fortitude-layout--small;
+  } @else if $is-large {
+    @include fortitude-layout--large;
+  } @else {
+    margin-left: -$fortitude-layout-gutter--default;
+  }
+
+  @if $is-center {
+    @include fortitude-layout--center;
+  } @else if $is-right {
+    @include fortitude-layout--right;
+  } @else {
+    text-align: left;
+  }
+
+  @if $is-rev {
+    @include fortitude-layout--rev;
   }
 }
 
-@mixin fortitude-layout--small {
-  margin-left: -$fortitude-layout-gutter--small;
+@mixin fortitude-layout--flush {
+  margin-left: 0;
 }
 
-@mixin fortitude-layout--small__item {
-  padding-left: $fortitude-layout-gutter--small;
+@mixin fortitude-layout--small {
+  margin-left: -$fortitude-layout-gutter--small;
 }
 
 @mixin fortitude-layout--large {
   margin-left: -$fortitude-layout-gutter--large;
 }
 
-@mixin fortitude-layout--large__item {
-  padding-left: $fortitude-layout-gutter--large;
-}
-
-@mixin fortitude-layout--flush {
-  margin-left: 0;
+@mixin fortitude-layout--center {
+  text-align: center;
 }
 
-@mixin fortitude-layout--flush__item {
-  padding-left: 0;
+@mixin fortitude-layout--right {
+  text-align: right;
 }
 
 @mixin fortitude-layout--rev {
@@ -88,31 +78,82 @@ $fortitude-global-border-box: false !default;
   text-align: left;
 }
 
-@mixin fortitude-layout--rev__item {
-  direction: ltr;
-  text-align: left;
+@mixin fortitude-layout__item($extensions: ()) {
+  $is-flush:  fortitude-contains($extensions, flush);
+  $is-small:  fortitude-contains($extensions, small);
+  $is-large:  fortitude-contains($extensions, large);
+  $is-center: fortitude-contains($extensions, center);
+  $is-right:  fortitude-contains($extensions, right);
+  $is-middle: fortitude-contains($extensions, middle);
+  $is-bottom: fortitude-contains($extensions, bottom);
+  $is-rev:    fortitude-contains($extensions, rev);
+
+  display: inline-block;
+  width: 100%;
+  position: relative;
+  
+  @if $is-middle {
+    @include fortitude-layout__item--middle;
+  } @else if $is-bottom {
+    @include fortitude-layout__item--bottom;
+  } @else {
+    vertical-align: top;
+  }
+
+  @if $is-flush {
+    @include fortitude-layout__item--flush;
+  } @else if $is-small {
+    @include fortitude-layout__item--small;
+  } @else if $is-large {
+    @include fortitude-layout__item--large;
+  } @else {
+    padding-left: $fortitude-layout-gutter--default;
+  }
+
+  @if $is-center {
+    @include fortitude-layout__item--center;
+  } @else if $is-right {
+    @include fortitude-layout__item--right;
+  }
+
+  @if $is-rev {
+    @include fortitude-layout__item--rev;
+  }
+
+  @if $fortitude-global-border-box == false {
+    box-sizing: border-box;
+  }
 }
 
-@mixin fortitude-layout--middle__item {
-  vertical-align: middle;
+@mixin fortitude-layout__item--flush {
+  padding-left: 0;
 }
 
-@mixin fortitude-layout--bottom__item {
-  vertical-align: bottom;
+@mixin fortitude-layout__item--small {
+  padding-left: $fortitude-layout-gutter--small;
 }
 
-@mixin fortitude-layout--right {
-  text-align: right;
+@mixin fortitude-layout__item--large {
+  padding-left: $fortitude-layout-gutter--large;
 }
 
-@mixin fortitude-layout--right__item {
+@mixin fortitude-layout__item--center {
   text-align: left;
 }
 
-@mixin fortitude-layout--center {
-  text-align: center;
+@mixin fortitude-layout__item--right {
+  text-align: left;
 }
 
-@mixin fortitude-layout--center__item {
+@mixin fortitude-layout__item--middle {
+  vertical-align: middle;
+}
+
+@mixin fortitude-layout__item--bottom {
+  vertical-align: bottom;
+}
+
+@mixin fortitude-layout__item--rev {
+  direction: ltr;
   text-align: left;
 }

data/app/assets/stylesheets/fortitude/api/blocks/_list-navigation.scss

@@ -7,16 +7,16 @@
  * and sets the list-navigation__link to `display: block;`
 **/
 
-@mixin fortitude-list-navigation {
+@mixin fortitude-list-navigation($extensions: ()) {
   margin: 0;
   padding: 0;
   list-style: none;
 }
 
-@mixin fortitude-list-navigation__item {
+@mixin fortitude-list-navigation__item($extensions: ()) {
   display: block;
 }
 
-@mixin fortitude-list-navigation__link {
+@mixin fortitude-list-navigation__link($extensions: ()) {
   display: block;
 }

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

@@ -2,12 +2,6 @@
     #MEDIA
 \*------------------------------------*/
 
-/**
- * Place any image- and text-like content side-by-side, as per:
- * stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code
-**/
-
-// Predefine the variables below in order to alter and enable specific features.
 $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;
@@ -19,68 +13,116 @@ $fortitude-enable-media--flush: false !default;
 $fortitude-enable-media--responsive: false !default;
 $fortitude-media-collapse-at: 720px !default;
 
-@mixin fortitude-media {
+@mixin fortitude-media($extensions: ()) {
   @include fortitude-clearfix;
   display: block;
 }
 
-@mixin fortitude-media__object {
+@mixin fortitude-media__object($extensions: ()) {
+  $is-flush:      fortitude-contains($extensions, flush);
+  $is-small:      fortitude-contains($extensions, small);
+  $is-large:      fortitude-contains($extensions, large);
+  $is-rev:        fortitude-contains($extensions, rev);
+  $is-responsive: fortitude-contains($extensions, responsive);
+
   float: left;
-  margin-right: $fortitude-media-gutter;
-  > img {
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
+
+  @if $is-rev {
+    @include fortitude-media__object--rev;
+
+    @if $is-flush {
+      @include fortitude-media__object--rev--flush;
+    } @else if $is-small {
+      @include fortitude-media__object--rev--small;
+    } @else if $is-large {
+      @include fortitude-media__object--rev--large;
+    }
   }
-}
 
-@mixin fortitude-media__body {
-  overflow: hidden;
-  display: block;
-}
+  @if $is-responsive {
+    @include fortitude-media__object--responsive;
 
-@mixin fortitude-media--small__object {
-  margin-right: $fortitude-media-gutter--small;
+    @if $is-flush {
+      @include fortitude-media__object--responsive--flush;
+    } @else if $is-small {
+      @include fortitude-media__object--responsive--small;
+    } @else if $is-large {
+      @include fortitude-media__object--responsive--large;
+    }
+  }
+
+  @if not $is-responsive or not $is-flush {
+    @if $is-flush {
+      @include fortitude-media__object--flush;
+    } @else if $is-small {
+      @include fortitude-media__object--small;
+    } @else if $is-large {
+      @include fortitude-media__object--large;
+    } @else {
+      margin-right: $fortitude-media-gutter;
+    }
+  }
 }
 
-@mixin fortitude-media--small--rev__object {
+@mixin fortitude-media__object--flush {
   margin-right: 0;
-  margin-left: $fortitude-media-gutter--small;
 }
 
-@mixin fortitude-media--large__object {
-  margin-right: $fortitude-media-gutter--large;
+@mixin fortitude-media__object--small {
+  margin-right: $fortitude-media-gutter--small;
 }
 
-@mixin fortitude-media--large--rev__object {
-  margin-right: 0;
-  margin-left: $fortitude-media-gutter--large;
+@mixin fortitude-media__object--large {
+  margin-right: $fortitude-media-gutter--large;
 }
 
-@mixin fortitude-media--rev__object {
+@mixin fortitude-media__object--rev {
   float: right;
   margin-right: 0;
   margin-left: $fortitude-media-gutter;
 }
 
-@mixin fortitude-media--flush__object {
+@mixin fortitude-media__object--rev--flush {
   margin-right: 0;
   margin-left: 0;
 }
 
-@mixin fortitude-media--responsive__object {
+@mixin fortitude-media__object--rev--small {
+  margin-right: 0;
+  margin-left: $fortitude-media-gutter--small;
+}
+
+@mixin fortitude-media__object--rev--large {
+  margin-right: 0;
+  margin-left: $fortitude-media-gutter--large;
+}
+
+@mixin fortitude-media__object--responsive {
   float: none;
   margin-right: 0;
   margin-bottom: $fortitude-media-gutter;
   margin-left: 0;
 }
 
-@mixin fortitude-media--responsive--small__object {
+@mixin fortitude-media__object--responsive--small {
   margin-right: 0;
+  margin-bottom: $fortitude-media-gutter--small;
   margin-left: 0;
 }
 
-@mixin fortitude-media--responsive--large__object {
+@mixin fortitude-media__object--responsive--large {
   margin-right: 0;
+  margin-bottom: $fortitude-media-gutter--large;
   margin-left: 0;
 }
+
+@mixin fortitude-media__object__content($extensions: ()) {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+@mixin fortitude-media__body($extensions: ()) {
+  overflow: hidden;
+  display: block;
+}

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

@@ -1 +0,0 @@
-

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

@@ -1 +0,0 @@
-

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

@@ -2,17 +2,11 @@
     #SHADE
 \*------------------------------------*/
 
-$fortitude-shade-background-color: rgba(0, 0, 0, 0.3) !default;
-$fortitude-shade-transition-speed: 0.3s !default;
-
-@mixin fortitude-shade {
+@mixin fortitude-shade($extensions: ()) {
   display: none;
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
-  @if $fortitude-shade-background-color {
-    background-color: $fortitude-shade-background-color;
-  }
 }

data/app/assets/stylesheets/fortitude/api/blocks/_tabs-navigation.scss

@@ -2,44 +2,29 @@
     #TABS NAVIGATION
 \*------------------------------------*/
 
-@mixin fortitude-tabs-navigation {
-  /**
-   * A simple abstraction for making equal-width navigation tabs.
-   *
-   * 1. Reset any residual styles (most likely from lists).
-   * 2. Tables for layout!
-  **/
+@mixin fortitude-tabs-navigation($extensions: ()) {
+  $is-fixed: fortitude-contains($extensions, fixed);
+
   margin: 0;
-  /* [1] */
   padding: 0;
-  /* [1] */
   list-style: none;
-  /* [1] */
   display: table;
-  /* [2] */
   text-align: center;
+
+  @if $is-fixed {
+    @include fortitude-tabs-navigation--fixed;
+  }
 }
 
 @mixin fortitude-tabs-navigation--fixed {
-  /**
-   * 1. Force all `table-cell` children to have equal widths.
-   * 2. Force the object to be the full width of its parent. Combined with [2],
-   *    this makes the object behave in a quasi-`display: block;` manner.
-  **/
   table-layout: fixed;
-  /* [1] */
   width: 100%;
-  /* [2] */
 }
 
-@mixin fortitude-tabs-navigation__item {
-  /**
-   * 1. Tables for layout!
-  **/
+@mixin fortitude-tabs-navigation__item($extensions: ()) {
   display: table-cell;
-  /* [1] */
 }
 
-@mixin fortitude-tabs-navigation__link {
+@mixin fortitude-tabs-navigation__link($extensions: ()) {
   display: block;
 }