fortitude-sass 0.3.0

data/app/assets/stylesheets/fortitude/blocks/_bare-list.scss

@@ -0,0 +1,17 @@
+/*------------------------------------*\
+    #BARE-LIST
+\*------------------------------------*/
+
+/**
+ * The bare-list object simply removes any indents and bullet points from lists.
+ */
+
+@mixin fortitude-bare-list {
+    margin:  0;
+    padding: 0;
+    list-style: none;
+}
+
+.#{$fortitude-namespace}bare-list {
+  @include fortitude-bare-list;
+}

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

@@ -0,0 +1,83 @@
+/*------------------------------------*\
+    #BLOCK-LIST
+\*------------------------------------*/
+
+/**
+ * The block list object creates blocky list items out of a `ul` or `ol`.
+ */
+
+// Predefine the variables below in order to alter and enable specific features.
+$fortitude-block-list-padding:          $fortitude-base-spacing-unit !default;
+$fortitude-block-list-padding--small:   halve($fortitude-block-list-padding) !default;
+$fortitude-block-list-padding--large:   double($fortitude-block-list-padding) !default;
+
+$fortitude-enable-block-list--small:    false !default;
+$fortitude-enable-block-list--large:    false !default;
+
+@mixin fortitude-block-list {
+    margin:  0;
+    padding: 0;
+    list-style: none;
+}
+
+@mixin fortitude-block-list__item($extension: null) {
+    @if ($extension == small) {
+        @include fortitude-block-list--small__item;
+    } @else if ($extension == large) {
+        @include fortitude-block-list--large__item;
+    } @else {
+        padding: $fortitude-block-list-padding;
+    }
+}
+
+@mixin fortitude-block-list--small__item {
+    padding: $fortitude-block-list-padding--small;
+}
+
+@mixin fortitude-block-list--large__item {
+    padding: $fortitude-block-list-padding--large;
+}
+
+.#{$fortitude-namespace}block-list {
+    @include fortitude-block-list;
+}
+
+    .#{$fortitude-namespace}block-list__item {
+        @include fortitude-block-list__item;
+    }
+
+
+
+
+
+@if ($fortitude-enable-block-list--small == true) {
+
+    /**
+     * Small block-lists.
+     */
+
+    .#{$fortitude-namespace}block-list--small {
+        > .#{$fortitude-namespace}block-list__item {
+            @include fortitude-block-list--small__item;
+        }
+    }
+
+}
+
+
+
+
+
+@if ($fortitude-enable-block-list--large == true) {
+
+    /**
+     * Large block-lists.
+     */
+
+    .#{$fortitude-namespace}block-list--large {
+        > .#{$fortitude-namespace}block-list__item {
+            @include fortitude-block-list--large__item;
+        }
+    }
+
+}

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

@@ -0,0 +1,23 @@
+/*------------------------------------*\
+    #BOX
+\*------------------------------------*/
+
+/**
+ * The box object simply boxes off content.
+ */
+
+
+
+
+
+@mixin fortitude-box {
+    /**
+     * 1. So we can apply the `.box` class to naturally-inline elements.
+     */
+    @include fortitude-clearfix;
+    display: block; /* [1] */
+}
+
+.#{$fortitude-namespace}box {
+  @include fortitude-box;
+}

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

@@ -0,0 +1,229 @@
+/*------------------------------------*\
+    #BUTTON
+\*------------------------------------*/
+
+/**
+ * A simple button object.
+ */
+
+// Predefine the variables below in order to alter and enable specific features.
+$fortitude-button-border-width:              0.1rem !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.
+     */
+    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($fortitude-button-border-width != 0) {
+        border: $fortitude-button-border-width $fortitude-button-border-style transparent;
+    } @else {
+        border: 0; /* [4] */
+    }
+    
+    @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;
+}
+
+.#{$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;
+    }
+
+}

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

@@ -0,0 +1,67 @@
+/*------------------------------------*\
+    #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;
+$fortitude-container-z-index:       2 !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 {
+    position: fixed;
+    z-index: $fortitude-container-z-index;
+    top: 0;
+}
+
+@mixin fortitude-container--absolute-top {
+    position: absolute;
+    z-index: $fortitude-container-z-index;
+    top: 0;
+}
+
+.#{$fortitude-namespace}container {
+    @include fortitude-container;
+}
+
+
+.#{$fortitude-namespace}container--fixed-top {
+    @include fortitude-container--fixed-top;
+}
+
+.#{$fortitude-namespace}container--absolute-top {
+    @include fortitude-container--absolute-top;
+}

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

@@ -0,0 +1,426 @@
+/*------------------------------------*\
+    #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;
+}
+
+@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.
+     */
+
+    padding-right: 0;
+    padding-left:  0;
+}
+
+.#{$fortitude-namespace}flag {
+    @include fortitude-flag;
+}
+
+    /**
+     * 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;
+    }
+
+    .#{$fortitude-namespace}flag__body {
+        @include fortitude-flag__body;
+    }
+
+
+
+
+
+@if ($fortitude-enable-flag--small == true) {
+
+    /**
+     * Small flags.
+     */
+
+    .#{$fortitude-namespace}flag--small {
+
+        > .#{$fortitude-namespace}flag__object {
+            @include fortitude-flag--small__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--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--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--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--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;
+                    }
+
+                }
+
+            }
+
+        }
+
+    }
+
+}