fortitude-sass 0.4.9 → 0.5.0

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

@@ -1,31 +1,5 @@
-/*------------------------------------*\
-    #BOX
-\*------------------------------------*/
-
-/**
- * The box object simply boxes off content.
- */
-// Predefine the variables below in order to alter and enable specific features.
-$fortitude-box-border-width:              0 !default;
-$fortitude-box-border-style:              solid !default;
-$fortitude-box-border-radius--rounded:    0.2rem !default;
-
-
-
-
-
-@mixin fortitude-box {
-    /**
-     * 1. So we can apply the `.box` class to naturally-inline elements.
-     * 2. So we can style the border colors in our extensions.
-     */
-    @include fortitude-clearfix;
-    display: block; /* [1] */
-    border: $fortitude-box-border-width $fortitude-box-border-style transparent; /* [2] */
-}
-
 @mixin fortitude-box--rounded {
-	border-radius: $fortitude-box-border-radius--rounded;
+  border-radius: $fortitude-box-border-radius--rounded;
 }
 
 .#{$fortitude-namespace}box {

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

@@ -1,224 +1,43 @@
-/*------------------------------------*\
-    #BUTTON
-\*------------------------------------*/
-
-/**
- * A simple button object.
- */
-
-// Predefine the variables below in order to alter and enable specific features.
-$fortitude-button-border-width:              0 !default;
-$fortitude-button-border-style:              solid !default;
-$fortitude-button-border-radius:             0.2rem !default;
-
-$fortitude-button-height:                    $fortitude-base-spacing-unit + 1.6rem !default;
-$fortitude-button-horizontal-padding:        fortitude-block-padding($fortitude-button-height, $fortitude-button-border-width) * 2 !default;
-$fortitude-button-height--small:             $fortitude-base-spacing-unit + 1.0rem !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) + 2.0rem !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;
-$fortitude-enable-button--large:             false !default;
-$fortitude-enable-button--full:              false !default;
-$fortitude-enable-button--pill:              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-button($extension: null) {
-    /**
-     * 1. Allow us to style box model properties.
-     * 2. Line different sized buttons up a little nicer.
-     * 3. Make buttons inherit font styles (often necessary when styling `input`s as
-     *    buttons).
-     * 4. Reset/normalize some styles.
-     * 5. Force all button-styled elements to appear clickable.
-     * 6. Fixes odd inner spacing in IE7.
-     * 7. Subtract the border size from the padding value so that buttons do not
-     *    grow larger as we add borders.
-     * 8. Set badge text to nowrap.
-     * 9. set position: relative in case if button has a `button__target`
-     *    the position of the target will be inside of the button.
-     * 10. Required to combine fluid widths and fixed gutters.
-     */
-    background-color: transparent;
-    border: $fortitude-button-border-width $fortitude-button-border-style transparent;
-    display: inline-block; /* [1] */
-    vertical-align: middle; /* [2] */
-    font: inherit; /* [3] */
-    font-size: $fortitude-base-font-size;
-    text-align: center; /* [4] */
-    cursor: pointer; /* [5] */
-    overflow: visible; /* [6] */
-    white-space: nowrap; /* [8] */
-    position: relative; /* [9] */
-
-    @if ($extension == small) {
-        @include fortitude-button--small;
-    } @else if ($extension == large) {
-        @include fortitude-button--large;
-    } @else {
-        margin: fortitude-block-margin($fortitude-button-height, $fortitude-button-border-width) 0; /* [4] */
-        padding: fortitude-block-padding($fortitude-button-height, $fortitude-button-border-width) $fortitude-button-horizontal-padding; /* [7] */
-    }
-
-    @if ($extension == pill) {
-        @include fortitude-button--pill;
-    } @else if($fortitude-button-border-radius != 0) {
-        border-radius: $fortitude-button-border-radius;
-    }
-
-    @if ($extension == full) {
-        @include fortitude-button--full;
-    }
-
-    @if $fortitude-global-border-box == false {
-        box-sizing: border-box; /* [10] */
-    }
-
-    &,
-    &:hover,
-    &:active,
-    &:focus,
-    &:visited {
-        text-decoration: none; /* [4] */
-    }
-
-    &::-moz-focus-inner {
-        /**
-         * Fix a Firefox bug whereby `input type="submit"` gains 0.2rem extra padding.
-         */
-        border:  0;
-        padding: 0;
-    }
-}
-
-@mixin fortitude-button--small {
-    /**
-     * 1. Reset/normalize some styles.
-     * 2. Subtract the border size from the padding value so that buttons do not
-     *    grow larger as we add borders.
-     */
-    margin: fortitude-block-margin($fortitude-button-height--small, $fortitude-button-border-width) 0; /* [1] */
-    padding: fortitude-block-padding($fortitude-button-height--small, $fortitude-button-border-width) $fortitude-button-horizontal-padding--small; /* [2] */
-}
-
-@mixin fortitude-button--large {
-    /**
-     * 1. Reset/normalize some styles.
-     * 2. Subtract the border size from the padding value so that buttons do not
-     *    grow larger as we add borders.
-     */
-    margin: fortitude-block-margin($fortitude-button-height--large, $fortitude-button-border-width) 0; /* [1] */
-    padding: fortitude-block-padding($fortitude-button-height--large, $fortitude-button-border-width) $fortitude-button-horizontal-padding--large; /* [2] */
-}
-
-@mixin fortitude-button--full {
-    width: 100%;
-
-    @if $fortitude-global-border-box == false {
-        /**
-         * Remove paddings so that widths and paddings don’t conflict.
-         */
-        padding-right: 0;
-        padding-left:  0;
-    }
-}
-
-@mixin fortitude-button--pill {
-    /**
-     * 1. Overly-large value to ensure the radius rounds the whole end of the
-     *    button.
-     */
-    border-radius: 10rem; /* [1] */
-}
-
-@mixin fortitude-button__target {
-    position: absolute;
-    opacity: 0;
-    border: 0;
-    margin: 0;
-    padding: 0;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    cursor: pointer;
-}
-
 .#{$fortitude-namespace}button {
-    @include fortitude-button;
+  @include fortitude-button;
 }
 
 .#{$fortitude-namespace}button__target {
-    @include fortitude-button__target;
-}
-
-
-
-
-
-@if ($fortitude-enable-button--small == true) {
-
-    /**
-     * Small buttons.
-     */
-
-    .#{$fortitude-namespace}button--small {
-        @include fortitude-button--small;
-    }
-
-}
-
-@if ($fortitude-enable-button--large == true) {
-
-    /**
-     * Large buttons.
-     */
-
-    .#{$fortitude-namespace}button--large {
-        @include fortitude-button--large;
-    }
-}
-
-
-
-
-
-@if ($fortitude-enable-button--full == true) {
-
-    /**
-     * Full-width buttons.
-     */
-
-    .#{$fortitude-namespace}button--full {
-        @include fortitude-button--full;
-    }
-
-}
-
-
-
-
-
-@if ($fortitude-enable-button--pill == true) {
-
-    /**
-     * Round-ended buttons.
-     */
-
-    .#{$fortitude-namespace}button--pill {
-        @include fortitude-button--pill;
-    }
-
+  @include fortitude-button__target;
+}
+
+@if $fortitude-enable-button--small == true {
+  /**
+   * Small buttons.
+  **/
+  .#{$fortitude-namespace}button--small {
+    @include fortitude-button--small;
+  }
+}
+
+@if $fortitude-enable-button--large == true {
+  /**
+   * Large buttons.
+  **/
+  .#{$fortitude-namespace}button--large {
+    @include fortitude-button--large;
+  }
+}
+
+@if $fortitude-enable-button--full == true {
+  /**
+   * Full-width buttons.
+  **/
+  .#{$fortitude-namespace}button--full {
+    @include fortitude-button--full;
+  }
+}
+
+@if $fortitude-enable-button--pill == true {
+  /**
+   * Round-ended buttons.
+  **/
+  .#{$fortitude-namespace}button--pill {
+    @include fortitude-button--pill;
+  }
 }

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

@@ -1,55 +1,7 @@
-/*------------------------------------*\
-    #CONTAINER
-\*------------------------------------*/
-
-$fortitude-container-breakpoints:   (xs: 100%,
-                                     sm: 72rem + $fortitude-base-spacing-unit,
-                                     md: 94rem + $fortitude-base-spacing-unit,
-                                     lg: 114rem + $fortitude-base-spacing-unit) !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-container {
-    @include fortitude-clearfix;
-
-    margin-right: auto;
-    margin-left: auto;
-    @each $alias, $breakpoint in $fortitude-breakpoints {
-        $query: fortitude-query($breakpoint);
-        // if there is no media query.
-        @if not $query {
-            width: map-get($fortitude-container-breakpoints, $alias);
-        }
-        // if there is a media query.
-        @else {
-            @media #{$query} {
-                width: map-get($fortitude-container-breakpoints, $alias);
-            }
-        }
-    }
-
-    @if $fortitude-global-border-box == false {
-        box-sizing: border-box; /* [10] */
-    }
-}
-
-@mixin fortitude-container--fixed-top {
-    z-index: 2;
-    position: fixed;
-    top: 0;
-}
-
 .#{$fortitude-namespace}container {
-    @include fortitude-container;
+  @include fortitude-container;
 }
 
 .#{$fortitude-namespace}container--fixed-top {
-    @include fortitude-container--fixed-top;
+  @include fortitude-container--fixed-top;
 }

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

@@ -1,426 +1,142 @@
-/*------------------------------------*\
-    #FLAG
-\*------------------------------------*/
-
-/**
- * The flag object is a design pattern similar to the media object, however it
- * utilises `display: table[-cell];` to give us control over the vertical
- * alignments of the text and image. csswizardry.com/2013/05/the-flag-object
- */
-
-// Predefine the variables below in order to alter and enable specific features.
-$fortitude-flag-gutter:             $fortitude-base-spacing-unit !default;
-$fortitude-flag-gutter--small:      halve($fortitude-flag-gutter) !default;
-$fortitude-flag-gutter--large:      double($fortitude-flag-gutter) !default;
-
-$fortitude-enable-flag--small:      false !default;
-$fortitude-enable-flag--large:      false !default;
-$fortitude-enable-flag--rev:        false !default;
-$fortitude-enable-flag--flush:      false !default;
-$fortitude-enable-flag--top:        false !default;
-$fortitude-enable-flag--bottom:     false !default;
-$fortitude-enable-flag--responsive: false !default;
-$fortitude-flag-collapse-at:        720px !default;
-
-
-
-
-
-@mixin fortitude-flag {
-    /**
-     * 1. Allows us to control vertical alignments
-     * 2. Force the object to be the full width of its parent. Combined with [1],
-     *    this makes the object behave in a quasi-`display: block;` manner.
-     */
-    display: table; /* [1] */
-    width: 100%; /* [2] */
-}
-
-@mixin fortitude-flag__object {
-    /**
-     * 1. Default to aligning content to their middles.
-     */
-    display: table-cell;
-    vertical-align: middle; /* [1] */
-    padding-right: $fortitude-flag-gutter;
-
-    > img {
-        display: block;
-        margin-left: auto;
-        margin-right: auto;
-        max-width: none;
-    }
-
-}
-
-@mixin fortitude-flag__body {
-    /**
-     * The container for the main content of the flag object.
-     *
-     * 1. Forces the `.flag__body` to take up all remaining space.
-     * 2. Default to aligning content to their middles.
-     */
-
-    display: table-cell;
-    width: 100%; /* [1] */
-    vertical-align: middle; /* [2] */
-}
-
-@mixin fortitude-flag--small__object {
-    padding-right: $fortitude-flag-gutter--small;
-}
-
-@mixin fortitude-flag--small--rev__object {
-    padding-right: 0;
-    padding-left:  $fortitude-flag-gutter--small;
-}
-
-@mixin fortitude-flag--large__object {
-    padding-right: $fortitude-flag-gutter--large;
-}
-
-@mixin fortitude-flag--large--rev__object {
-    padding-right: 0;
-    padding-left:  $fortitude-flag-gutter--large;
-}
-
-@mixin fortitude-flag--rev {
-    /**
-     * 1. Swap the rendered direction of the object…
-     */
-
-    direction: rtl; /* [1] */
-}
-
-@mixin fortitude-flag--rev__object {
-    /**
-     * 1. Swap the rendered direction of the object…
-     * 2. …and reset it.
-     * 3. Reassign margins to the correct sides.
-     */
-
-    direction: ltr; /* [2] */
-    padding-right: 0; /* [3] */
-    padding-left: $fortitude-flag-gutter; /* [3] */
-}
-
-@mixin fortitude-flag--rev__body {
-    /**
-     * 2. …and reset it.
-     */
-    direction: ltr; /* [2] */
-}
-
-@mixin fortitude-flag--flush__object {
-    padding-right: 0;
-    padding-left:  0;
-}
-
-@mixin fortitude-flag--top__object {
-    vertical-align: top;
-}
-
-@mixin fortitude-flag--top__body {
-    vertical-align: top;
-}
-
-@mixin fortitude-flag--bottom__object {
-    vertical-align: bottom;
-}
-
-@mixin fortitude-flag--bottom__body {
-    vertical-align: bottom;
-}
-
-@mixin fortitude-flag--responsive {
-    /**
-     * Responsive flag objects.
-     *
-     * There is a very pragmatic, simple implementation of a responsive flag
-     * 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 flag 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-flag-collapse-at) {
-        @if ($fortitude-enable-flag--rev == true) {
-            /**
-             * Disable reversal of content because there is no concept of
-             * ‘reversed’ in a stacked layout.
-             */
-            direction: ltr;
-        }
-
-        display: block;
-        @content;
-    }
-}
-
-@mixin fortitude-flag--responsive__object {
-    /**
-     * Rework the spacings on regular flag objects.
-     */
-    display: block;
-    padding-right: 0;
-    padding-left:  0;
-    margin-bottom: $fortitude-flag-gutter;
-}
-
-@mixin fortitude-flag--responsive__body {
-    display: block;
-}
-
-@mixin fortitude-flag--responsive--small__object {
-    /**
-     * Small responsive flags.
-     *
-     * Take a little more heavy-handed approach to reworking
-     * spacings on flags that are also small flags in their regular
-     * state.
-     */
-
-    padding-right: 0;
-    padding-left:  0;
+.#{$fortitude-namespace}flag {
+  @include fortitude-flag;
 }
 
-@mixin fortitude-flag--responsive--large__object {
-    /**
-     * Large responsive flags.
-     *
-     * Take a little more heavy-handed approach to reworking
-     * spacings on flags that are also large flags in their regular
-     * state.
-     */
+/**
+ * Items within a flag object. There should only ever be one of each.
+**/
 
-    padding-right: 0;
-    padding-left:  0;
+/**
+ * Flag images have a space between them and the body of the object.
+**/
+.#{$fortitude-namespace}flag__object {
+  @include fortitude-flag__object;
 }
 
-.#{$fortitude-namespace}flag {
-    @include fortitude-flag;
+.#{$fortitude-namespace}flag__body {
+  @include fortitude-flag__body;
 }
 
-    /**
-     * Items within a flag object. There should only ever be one of each.
-     */
-
-
-    /**
-     * Flag images have a space between them and the body of the object.
-     */
-    .#{$fortitude-namespace}flag__object {
-        @include fortitude-flag__object;
+@if $fortitude-enable-flag--small == true {
+  /**
+   * Small flags.
+  **/
+  .#{$fortitude-namespace}flag--small {
+    > .#{$fortitude-namespace}flag__object {
+      @include fortitude-flag--small__object;
     }
-
-    .#{$fortitude-namespace}flag__body {
-        @include fortitude-flag__body;
-    }
-
-
-
-
-
-@if ($fortitude-enable-flag--small == true) {
-
-    /**
-     * Small flags.
-     */
-
-    .#{$fortitude-namespace}flag--small {
-
+    @if $fortitude-enable-flag--rev == true {
+      /**
+       * Small reversed flags.
+      **/
+      &.#{$fortitude-namespace}flag--rev {
         > .#{$fortitude-namespace}flag__object {
-            @include fortitude-flag--small__object;
+          @include fortitude-flag--small--rev__object;
         }
-
-        @if ($fortitude-enable-flag--rev == true) {
-
-            /**
-             * Small reversed flags.
-             */
-
-            &.#{$fortitude-namespace}flag--rev {
-
-                > .#{$fortitude-namespace}flag__object {
-                    @include fortitude-flag--small--rev__object;
-                }
-
-            }
-
-        }
-
+      }
     }
-
+  }
 }
 
-@if ($fortitude-enable-flag--large == true) {
-
-    /**
-     * Large flags.
-     */
-
-    .#{$fortitude-namespace}flag--large {
-
-        > .#{$fortitude-namespace}flag__object {
-            @include fortitude-flag--large__object;
-        }
-
-        @if ($fortitude-enable-flag--rev == true) {
-
-            /**
-             * Large reversed flags.
-             */
-
-            &.#{$fortitude-namespace}flag--rev {
-
-                > .#{$fortitude-namespace}flag__object {
-                    @include fortitude-flag--large--rev__object;
-                }
-
-            }
-
-        }
-
+@if $fortitude-enable-flag--large == true {
+  /**
+   * Large flags.
+  **/
+  .#{$fortitude-namespace}flag--large {
+    > .#{$fortitude-namespace}flag__object {
+      @include fortitude-flag--large__object;
     }
-
-}
-
-
-
-
-
-@if ($fortitude-enable-flag--rev == true) {
-
-    /**
-     * Reversed flag objects have their image-content to the right, and text-content
-     * to the left.
-     */
-
-    .#{$fortitude-namespace}flag--rev {
-        @include fortitude-flag--rev;
-
+    @if $fortitude-enable-flag--rev == true {
+      /**
+       * Large reversed flags.
+      **/
+      &.#{$fortitude-namespace}flag--rev {
         > .#{$fortitude-namespace}flag__object {
-            @include fortitude-flag--rev__object;
-        }
-
-        > .#{$fortitude-namespace}flag__body {
-            @include fortitude-flag--rev__body;
+          @include fortitude-flag--large--rev__object;
         }
-
+      }
     }
-
-}
-
-
-
-
-
-@if ($fortitude-enable-flag--flush == true) {
-
-    /**
-     * Flush flag objects have no space between the image- and text-content.
-     */
-
-    .#{$fortitude-namespace}flag--flush {
-
-        > .#{$fortitude-namespace}flag__object {
-            @include fortitude-flag--flush__object;
-        }
-
+  }
+}
+
+@if $fortitude-enable-flag--rev == true {
+  /**
+   * Reversed flag objects have their image-content to the right, and text-content
+   * to the left.
+  **/
+  .#{$fortitude-namespace}flag--rev {
+    @include fortitude-flag--rev;
+    > .#{$fortitude-namespace}flag__object {
+      @include fortitude-flag--rev__object;
     }
-
+    > .#{$fortitude-namespace}flag__body {
+      @include fortitude-flag--rev__body;
+    }
+  }
 }
 
-
-
-
-
-@if ($fortitude-enable-flag--top == true) {
-
-    /**
-     * Vertically top aligned flag objects.
-     */
-
-    .#{$fortitude-namespace}flag--top {
-
-        .#{$fortitude-namespace}flag__object {
-            @include fortitude-flag--top__object;
-        }
-
-        .#{$fortitude-namespace}flag__body {
-            @include fortitude-flag--top__body;
-        }
-
+@if $fortitude-enable-flag--flush == true {
+  /**
+   * Flush flag objects have no space between the image- and text-content.
+  **/
+  .#{$fortitude-namespace}flag--flush {
+    > .#{$fortitude-namespace}flag__object {
+      @include fortitude-flag--flush__object;
     }
-
+  }
 }
 
-@if ($fortitude-enable-flag--bottom == true) {
-
-    /**
-     * Vertically bottom aligned flag objects.
-     */
-
-    .#{$fortitude-namespace}flag--bottom {
-
-        .#{$fortitude-namespace}flag__object {
-            @include fortitude-flag--bottom__object;
-        }
-
-        .#{$fortitude-namespace}flag__body {
-            @include fortitude-flag--bottom__body;
-        }
-
+@if $fortitude-enable-flag--top == true {
+  /**
+   * Vertically top aligned flag objects.
+  **/
+  .#{$fortitude-namespace}flag--top {
+    .#{$fortitude-namespace}flag__object {
+      @include fortitude-flag--top__object;
     }
-
+    .#{$fortitude-namespace}flag__body {
+      @include fortitude-flag--top__body;
+    }
+  }
 }
 
-
-
-
-@if ($fortitude-enable-flag--responsive == true) {
-
-    .#{$fortitude-namespace}flag--responsive {
-
-        @include fortitude-flag--responsive {
-
-            > .#{$fortitude-namespace}flag__object {
-                @include fortitude-flag--responsive__object;
-            }
-
-            > .#{$fortitude-namespace}flag__body {
-                @include fortitude-flag--responsive__body;
-            }
-
-            @if ($fortitude-enable-flag--small == true) {
-
-                &.#{$fortitude-namespace}flag--small {
-
-                    > .#{$fortitude-namespace}flag__object {
-                        @include fortitude-flag--responsive--small__object;
-                    }
-
-                }
-
-            }
-
-            @if ($fortitude-enable-flag--large == true) {
-
-                &.#{$fortitude-namespace}flag--large {
-
-                    > .#{$fortitude-namespace}flag__object {
-                        @include fortitude-flag--responsive--large__object;
-                    }
-
-                }
-
-            }
-
+@if $fortitude-enable-flag--bottom == true {
+  /**
+   * Vertically bottom aligned flag objects.
+  **/
+  .#{$fortitude-namespace}flag--bottom {
+    .#{$fortitude-namespace}flag__object {
+      @include fortitude-flag--bottom__object;
+    }
+    .#{$fortitude-namespace}flag__body {
+      @include fortitude-flag--bottom__body;
+    }
+  }
+}
+
+@if $fortitude-enable-flag--responsive == true {
+  .#{$fortitude-namespace}flag--responsive {
+    @include fortitude-flag--responsive {
+      > .#{$fortitude-namespace}flag__object {
+        @include fortitude-flag--responsive__object;
+      }
+      > .#{$fortitude-namespace}flag__body {
+        @include fortitude-flag--responsive__body;
+      }
+      @if $fortitude-enable-flag--small == true {
+        &.#{$fortitude-namespace}flag--small {
+          > .#{$fortitude-namespace}flag__object {
+            @include fortitude-flag--responsive--small__object;
+          }
         }
-
+      }
+      @if $fortitude-enable-flag--large == true {
+        &.#{$fortitude-namespace}flag--large {
+          > .#{$fortitude-namespace}flag__object {
+            @include fortitude-flag--responsive--large__object;
+          }
+        }
+      }
     }
-
+  }
 }