fortitude-sass 0.3.0

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

@@ -0,0 +1,34 @@
+/*------------------------------------*\
+    #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__link {
+      @include fortitude-list-navigation__link;
+    }

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

@@ -0,0 +1,289 @@
+/*------------------------------------*\
+    #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;
+}
+
+@mixin fortitude-media--responsive--large__object {
+    margin-right: 0;
+    margin-left:  0;
+}
+
+
+
+.#{$fortitude-namespace}media {
+    @include fortitude-media;
+}
+
+    .#{$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--rev == true) {
+
+            /**
+             * Small reversed media objects.
+             */
+
+            &.#{$fortitude-namespace}media--rev {
+
+                > .#{$fortitude-namespace}media__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--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--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;
+                    }
+
+                }
+
+            }
+
+        }
+
+    }
+
+}

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

@@ -0,0 +1,51 @@
+/*------------------------------------*\
+    #SHADE
+\*------------------------------------*/
+
+$fortitude-shade-background-color:          rgba(0,0,0, 0.3) !default;
+$fortitude-shade-transition-speed:          0.3s !default;
+
+@mixin fortitude-shade {
+    transition: opacity $fortitude-shade-transition-speed ease-in-out;
+    display: none;
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    overflow: hidden;
+    -webkit-overflow-scrolling: touch;
+    -moz-overflow-scrolling: touch;
+    -ms-overflow-scrolling: touch;
+    overflow-scrolling: touch;
+    opacity: 0;
+    @if $fortitude-shade-background-color {
+        background-color: $fortitude-shade-background-color;
+    }
+}
+
+@mixin fortitude-html--shade--is-transitioning($selector: ".#{$fortitude-namespace}shade") {
+    #{$selector} {
+        display: block;
+        opacity: 0;
+    }
+}
+
+@mixin fortitude-html--shade--is-active($selector: ".#{$fortitude-namespace}shade") {
+    #{$selector} {
+        display: block;
+        opacity: 1;
+    }
+}
+
+.#{$fortitude-namespace}shade {
+    @include fortitude-shade;
+}
+
+.#{$fortitude-namespace}html--shade--is-transitioning {
+    @include fortitude-html--shade--is-transitioning;
+}
+
+.#{$fortitude-namespace}html--shade--is-active {
+    @include fortitude-html--shade--is-active;
+}

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

@@ -0,0 +1,31 @@
+/*------------------------------------*\
+    #TABLES
+\*------------------------------------*/
+
+// Predefine the variables below in order to alter and enable specific features.
+$fortitude-enable-table--fixed:     false !default;
+
+
+
+
+
+.#{$fortitude-namespace}table,
+%#{$fortitude-namespace}table {
+    width: 100%;
+}
+
+
+
+
+
+@if ($fortitude-enable-table--fixed == true) {
+
+    /**
+     * Force tables into having equal-width columns.
+     */
+    .#{$fortitude-namespace}table--fixed,
+    %#{$fortitude-namespace}table--fixed {
+        table-layout: fixed;
+    }
+
+}

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

@@ -0,0 +1,58 @@
+/*------------------------------------*\
+    #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!
+     */
+
+    margin:  0; /* [1] */
+    padding: 0; /* [1] */
+    list-style: none; /* [1] */
+    display: table; /* [2] */
+    text-align: center;
+}
+
+@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!
+     */
+
+    display: table-cell; /* [1] */
+}
+
+@mixin fortitude-tabs-navigation__link {
+    display: block;
+}
+
+.#{$fortitude-namespace}tabs-navigation {
+    @include fortitude-tabs-navigation;
+
+    &--fixed {
+        @include fortitude-tabs-navigation--fixed;
+    }
+}
+
+    .#{$fortitude-namespace}tabs-navigation__item {
+        @include fortitude-tabs-navigation__item;
+    }
+
+        .#{$fortitude-namespace}tabs-navigation__link {
+            @include fortitude-tabs-navigation__link;
+        }