fortitude-sass 0.4.9 → 0.5.0

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

@@ -1,288 +1,102 @@
-/*------------------------------------*\
-    #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-enable-layout--small:    false !default;
-$fortitude-enable-layout--large:    false !default;
-$fortitude-enable-layout--flush:    false !default;
-$fortitude-enable-layout--rev:      false !default;
-$fortitude-enable-layout--middle:   false !default;
-$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($extension: null) {
-    list-style: none;
-    display: block;
-    margin:  0;
-    padding: 0;
-    margin-left: -$fortitude-layout-gutter;
-}
-
-@mixin fortitude-layout__item($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] */
-    }
-}
-
-@mixin fortitude-layout--small {
-    margin-left: -($fortitude-layout-gutter--small);
-}
-
-@mixin fortitude-layout--small__item {
-    padding-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--flush__item {
-    padding-left: 0;
-}
-
-@mixin fortitude-layout--rev {
-    direction: rtl;
-    text-align: left;
-}
-
-@mixin fortitude-layout--rev__item {
-    direction: ltr;
-    text-align: left;
-}
-
-@mixin fortitude-layout--middle__item {
-    vertical-align: middle;
-}
-
-@mixin fortitude-layout--bottom__item {
-    vertical-align: bottom;
-}
-
-@mixin fortitude-layout--right {
-    text-align: right;
-}
-
-@mixin fortitude-layout--right__item {
-    text-align: left;
-}
-
-@mixin fortitude-layout--center {
-    text-align: center;
-}
-
-@mixin fortitude-layout--center__item {
-    text-align: left;
-}
-
-/**
- * Begin a layout group.
- */
-
 .#{$fortitude-namespace}layout {
-    @include fortitude-layout;
+  @include fortitude-layout;
 }
 
-    .#{$fortitude-namespace}layout__item {
-        @include fortitude-layout__item;
-    }
-
-
-
-
-
-@if ($fortitude-enable-layout--small == true) {
-
-    /**
-     * Layouts with small gutters.
-     */
-
-    .#{$fortitude-namespace}layout--small {
-        @include fortitude-layout--small;
-        > .#{$fortitude-namespace}layout__item {
-            @include fortitude-layout--small__item;
-        }
-
-    }
-
+.#{$fortitude-namespace}layout__item {
+  @include fortitude-layout__item;
 }
 
-@if ($fortitude-enable-layout--large == true) {
-
-    /**
-     * Layouts with large gutters.
-     */
-
-    .#{$fortitude-namespace}layout--large {
-        @include fortitude-layout--large;
-
-        > .#{$fortitude-namespace}layout__item {
-            @include fortitude-layout--large__item;
-        }
-
+@if $fortitude-enable-layout--small == true {
+  /**
+   * Layouts with small gutters.
+  **/
+  .#{$fortitude-namespace}layout--small {
+    @include fortitude-layout--small;
+    > .#{$fortitude-namespace}layout__item {
+      @include fortitude-layout--small__item;
     }
-
+  }
 }
 
-
-
-
-
-@if ($fortitude-enable-layout--flush == true) {
-
-    /**
-     * Layouts with no gutters.
-     */
-
-    .#{$fortitude-namespace}layout--flush {
-        @include fortitude-layout--flush;
-
-        > .#{$fortitude-namespace}layout__item {
-            @include fortitude-layout--flush__item;
-        }
-
+@if $fortitude-enable-layout--large == true {
+  /**
+   * Layouts with large gutters.
+  **/
+  .#{$fortitude-namespace}layout--large {
+    @include fortitude-layout--large;
+    > .#{$fortitude-namespace}layout__item {
+      @include fortitude-layout--large__item;
     }
-
+  }
 }
 
-
-
-
-
-@if ($fortitude-enable-layout--rev == true) {
-
-    /**
-     * Reversed rendered order of layout items, e.g. items 1, 2, 3, 4 in your
-     * markup will display in order 4, 3, 2, 1 on your page.
-     */
-
-    .#{$fortitude-namespace}layout--rev {
-        @include fortitude-layout--rev;
-
-        > .#{$fortitude-namespace}layout__item {
-            @include fortitude-layout--rev__item;
-        }
-
+@if $fortitude-enable-layout--flush == true {
+  /**
+   * Layouts with no gutters.
+  **/
+  .#{$fortitude-namespace}layout--flush {
+    @include fortitude-layout--flush;
+    > .#{$fortitude-namespace}layout__item {
+      @include fortitude-layout--flush__item;
     }
-
+  }
+}
+
+@if $fortitude-enable-layout--rev == true {
+  /**
+   * Reversed rendered order of layout items, e.g. items 1, 2, 3, 4 in your
+   * markup will display in order 4, 3, 2, 1 on your page.
+  **/
+  .#{$fortitude-namespace}layout--rev {
+    @include fortitude-layout--rev;
+    > .#{$fortitude-namespace}layout__item {
+      @include fortitude-layout--rev__item;
+    }
+  }
 }
 
-
-
-
-
-@if ($fortitude-enable-layout--middle == true) {
-
-    /**
-     * Align layout items to the vertical centers of each other.
-     */
-
-    .#{$fortitude-namespace}layout--middle {
-
-        > .#{$fortitude-namespace}layout__item {
-            @include fortitude-layout--middle__item;
-        }
-
+@if $fortitude-enable-layout--middle == true {
+  /**
+   * Align layout items to the vertical centers of each other.
+  **/
+  .#{$fortitude-namespace}layout--middle {
+    > .#{$fortitude-namespace}layout__item {
+      @include fortitude-layout--middle__item;
     }
-
+  }
 }
 
-@if ($fortitude-enable-layout--bottom == true) {
-
-    /**
-     * Align layout items to the vertical bottoms of each other.
-     */
-
-    .#{$fortitude-namespace}layout--bottom {
-
-        > .#{$fortitude-namespace}layout__item {
-            @include fortitude-layout--bottom__item;
-        }
-
+@if $fortitude-enable-layout--bottom == true {
+  /**
+   * Align layout items to the vertical bottoms of each other.
+  **/
+  .#{$fortitude-namespace}layout--bottom {
+    > .#{$fortitude-namespace}layout__item {
+      @include fortitude-layout--bottom__item;
     }
-
+  }
 }
 
-
-
-
-
-@if ($fortitude-enable-layout--right == true) {
-
-    /**
-     * Make the layout items fill up from the right hand side.
-     */
-
-    .#{$fortitude-namespace}layout--right {
-        @include fortitude-layout--right;
-
-        > .#{$fortitude-namespace}layout__item {
-            @include fortitude-layout--right__item;
-        }
-
+@if $fortitude-enable-layout--right == true {
+  /**
+   * Make the layout items fill up from the right hand side.
+  **/
+  .#{$fortitude-namespace}layout--right {
+    @include fortitude-layout--right;
+    > .#{$fortitude-namespace}layout__item {
+      @include fortitude-layout--right__item;
     }
-
+  }
 }
 
-@if ($fortitude-enable-layout--center == true) {
-
-    /**
-     * Make the layout items fill up from the center outward.
-     */
-
-    .#{$fortitude-namespace}layout--center {
-        @include fortitude-layout--center;
-
-        > .#{$fortitude-namespace}layout__item {
-            @include fortitude-layout--center__item;
-        }
-
+@if $fortitude-enable-layout--center == true {
+  /**
+   * Make the layout items fill up from the center outward.
+  **/
+  .#{$fortitude-namespace}layout--center {
+    @include fortitude-layout--center;
+    > .#{$fortitude-namespace}layout__item {
+      @include fortitude-layout--center__item;
     }
-
+  }
 }

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

@@ -1,34 +1,11 @@
-/*------------------------------------*\
-    #list-navigation
-\*------------------------------------*/
-
-/**
- * The list-navigation object simply removes any indents and bullet points from lists.
- * and sets the list-navigation__link to `display: block;`
- */
-
-@mixin fortitude-list-navigation {
-    margin:  0;
-    padding: 0;
-    list-style: none;
-}
-
-@mixin fortitude-list-navigation__item {
-  display: block;
-}
-
-@mixin fortitude-list-navigation__link {
-  display: block;
-}
-
 .#{$fortitude-namespace}list-navigation {
   @include fortitude-list-navigation;
 }
 
-  .#{$fortitude-namespace}list-navigation__item {
-    @include fortitude-list-navigation__item;
-  }
+.#{$fortitude-namespace}list-navigation__item {
+  @include fortitude-list-navigation__item;
+}
 
-    .#{$fortitude-namespace}list-navigation__link {
-      @include fortitude-list-navigation__link;
-    }
+.#{$fortitude-namespace}list-navigation__link {
+  @include fortitude-list-navigation__link;
+}

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

@@ -1,289 +1,128 @@
-/*------------------------------------*\
-    #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;
-
-$fortitude-enable-media--small:         false !default;
-$fortitude-enable-media--large:         false !default;
-$fortitude-enable-media--rev:           false !default;
-$fortitude-enable-media--flush:         false !default;
-$fortitude-enable-media--responsive:    false !default;
-$fortitude-media-collapse-at:           720px !default;
-
-
-
-
-
-@mixin fortitude-media {
-    @include fortitude-clearfix;
-    display: block;
-}
-
-@mixin fortitude-media__object {
-    float: left;
-    margin-right: $fortitude-media-gutter;
-
-    > img {
-        display: block;
-        margin-left: auto;
-        margin-right: auto;
-    }
-}
-
-@mixin fortitude-media__body {
-    overflow: hidden;
-    display: block;
-}
-
-@mixin fortitude-media--small__object {
-    margin-right: $fortitude-media-gutter--small;
-}
-
-@mixin fortitude-media--small--rev__object {
-    margin-right: 0;
-    margin-left:  $fortitude-media-gutter--small;
-}
-
-@mixin fortitude-media--large__object {
-    margin-right: $fortitude-media-gutter--large;
-}
-
-@mixin fortitude-media--large--rev__object {
-    margin-right: 0;
-    margin-left:  $fortitude-media-gutter--large;
-}
-
-@mixin fortitude-media--rev__object {
-    float: right;
-    margin-right: 0;
-    margin-left: $fortitude-media-gutter;
-}
-
-@mixin fortitude-media--flush__object {
-    margin-right: 0;
-    margin-left:  0;
-}
-
-@mixin fortitude-media--responsive__object {
-    float: none;
-    margin-right: 0;
-    margin-bottom: $fortitude-media-gutter;
-    margin-left:  0;
-}
-
-@mixin fortitude-media--responsive--small__object {
-    margin-right: 0;
-    margin-left:  0;
+.#{$fortitude-namespace}media {
+  @include fortitude-media;
 }
 
-@mixin fortitude-media--responsive--large__object {
-    margin-right: 0;
-    margin-left:  0;
+.#{$fortitude-namespace}media__object {
+  @include fortitude-media__object;
 }
 
-
-
-.#{$fortitude-namespace}media {
-    @include fortitude-media;
+.#{$fortitude-namespace}media__body {
+  @include fortitude-media__body;
 }
 
-    .#{$fortitude-namespace}media__object {
-        @include fortitude-media__object;
-    }
-
-    .#{$fortitude-namespace}media__body {
-        @include fortitude-media__body;
+@if $fortitude-enable-media--small == true {
+  /**
+   * Small media objects.
+  **/
+  .#{$fortitude-namespace}media--small {
+    > .#{$fortitude-namespace}media__object {
+      @include fortitude-media--small__object;
     }
-
-
-
-
-
-@if ($fortitude-enable-media--small == true) {
-
-    /**
-     * Small media objects.
-     */
-
-    .#{$fortitude-namespace}media--small {
-
+    @if $fortitude-enable-media--rev == true {
+      /**
+       * Small reversed media objects.
+      **/
+      &.#{$fortitude-namespace}media--rev {
         > .#{$fortitude-namespace}media__object {
-            @include fortitude-media--small__object;
-        }
-
-        @if ($fortitude-enable-media--rev == true) {
-
-            /**
-             * Small reversed media objects.
-             */
-
-            &.#{$fortitude-namespace}media--rev {
-
-                > .#{$fortitude-namespace}media__object {
-                    @include fortitude-media--small--rev__object;
-                }
-
-            }
-
+          @include fortitude-media--small--rev__object;
         }
-
+      }
     }
-
+  }
 }
 
-@if ($fortitude-enable-media--large == true) {
-
-    /**
-     * Large media objects.
-     */
-
-    .#{$fortitude-namespace}media--large {
-
-        > .#{$fortitude-namespace}media__object {
-            @include fortitude-media--large__object;
-        }
-
-        @if ($fortitude-enable-media--rev == true) {
-
-            /**
-             * Large reversed media objects.
-             */
-
-            &.#{$fortitude-namespace}media--rev {
-
-                > .#{$fortitude-namespace}media__object {
-                    @include fortitude-media--large--rev__object;
-                }
-
-            }
-
-        }
-
+@if $fortitude-enable-media--large == true {
+  /**
+   * Large media objects.
+  **/
+  .#{$fortitude-namespace}media--large {
+    > .#{$fortitude-namespace}media__object {
+      @include fortitude-media--large__object;
     }
-
-}
-
-
-
-
-
-@if ($fortitude-enable-media--rev == true) {
-
-    /**
-     * Reversed image location (right instead of left). Extends `.media`.
-     */
-
-    .#{$fortitude-namespace}media--rev {
-
+    @if $fortitude-enable-media--rev == true {
+      /**
+       * Large reversed media objects.
+      **/
+      &.#{$fortitude-namespace}media--rev {
         > .#{$fortitude-namespace}media__object {
-            @include fortitude-media--rev__object;
+          @include fortitude-media--large--rev__object;
         }
-
+      }
     }
-
+  }
 }
 
-
-
-
-
-@if ($fortitude-enable-media--flush == true) {
-
-    /**
-     * Flush media objects have no space between the image- and text-content.
-     */
-
-    .#{$fortitude-namespace}media--flush {
-
-        > .#{$fortitude-namespace}media__object {
-            @include fortitude-media--flush__object;
-        }
-
+@if $fortitude-enable-media--rev == true {
+  /**
+   * Reversed image location (right instead of left). Extends `.media`.
+  **/
+  .#{$fortitude-namespace}media--rev {
+    > .#{$fortitude-namespace}media__object {
+      @include fortitude-media--rev__object;
     }
-
+  }
 }
 
-
-
-
-
-@if ($fortitude-enable-media--responsive == true) {
-
-    /**
-     * Responsive media objects.
-     *
-     * There is a very pragmatic, simple implementation of a responsive media
-     * object, which simply places the text-content beneath the image-content.
-     *
-     * We use a `max-width` media query because:
-     *
-     * a) it is the least verbose method in terms of amount of code required.
-     * b) the media object’s default state is image-next-to-text, so its stacked
-     *    state is the exception, rather than the rule.
-     */
-
-    @media screen and (max-width: $fortitude-media-collapse-at) {
-
-        .#{$fortitude-namespace}media--responsive {
-
-            /**
-             * Rework the spacings on regular media objects.
-             */
-            > .#{$fortitude-namespace}media__object {
-                @include fortitude-media--responsive__object;
-            }
-
-            @if ($fortitude-enable-media--small == true) {
-
-                /**
-                 * Small responsive media objects.
-                 *
-                 * Take a little more heavy-handed approach to reworking
-                 * spacings on media objects that are also small media objects
-                 * in their regular state.
-                 */
-
-                &.#{$fortitude-namespace}media--small {
-
-                    > .#{$fortitude-namespace}media__object {
-                        @include fortitude-media--responsive--small__object;
-                    }
-
-                }
-
-            }
-
-            @if ($fortitude-enable-media--large == true) {
-
-                /**
-                 * Large responsive media objects.
-                 *
-                 * Take a little more heavy-handed approach to reworking
-                 * spacings on media objects that are also large media objects
-                 * in their regular state.
-                 */
-
-                &.#{$fortitude-namespace}media--large {
-
-                    > .#{$fortitude-namespace}media__object {
-                        @include fortitude-media--responsive--large__object;
-                    }
-
-                }
-
-            }
-
+@if $fortitude-enable-media--flush == true {
+  /**
+   * Flush media objects have no space between the image- and text-content.
+  **/
+  .#{$fortitude-namespace}media--flush {
+    > .#{$fortitude-namespace}media__object {
+      @include fortitude-media--flush__object;
+    }
+  }
+}
+
+@if $fortitude-enable-media--responsive == true {
+  /**
+   * Responsive media objects.
+   *
+   * There is a very pragmatic, simple implementation of a responsive media
+   * object, which simply places the text-content beneath the image-content.
+   *
+   * We use a `max-width` media query because:
+   *
+   * a) it is the least verbose method in terms of amount of code required.
+   * b) the media object’s default state is image-next-to-text, so its stacked
+   *    state is the exception, rather than the rule.
+  **/
+  @media screen and (max-width: $fortitude-media-collapse-at) {
+    .#{$fortitude-namespace}media--responsive {
+      /**
+       * Rework the spacings on regular media objects.
+      **/
+      > .#{$fortitude-namespace}media__object {
+        @include fortitude-media--responsive__object;
+      }
+      @if $fortitude-enable-media--small == true {
+        /**
+         * Small responsive media objects.
+         *
+         * Take a little more heavy-handed approach to reworking
+         * spacings on media objects that are also small media objects
+         * in their regular state.
+        **/
+        &.#{$fortitude-namespace}media--small {
+          > .#{$fortitude-namespace}media__object {
+            @include fortitude-media--responsive--small__object;
+          }
         }
-
+      }
+      @if $fortitude-enable-media--large == true {
+        /**
+         * Large responsive media objects.
+         *
+         * Take a little more heavy-handed approach to reworking
+         * spacings on media objects that are also large media objects
+         * in their regular state.
+        **/
+        &.#{$fortitude-namespace}media--large {
+          > .#{$fortitude-namespace}media__object {
+            @include fortitude-media--responsive--large__object;
+          }
+        }
+      }
     }
-
+  }
 }