fortitude-sass 0.3.0

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

@@ -0,0 +1,22 @@
+/*------------------------------------*\
+    #FLASHBAR
+\*------------------------------------*/
+
+
+@mixin fortitude-flashbar {
+    @include fortitude-clearfix;
+    position: relative;
+}
+
+@mixin fortitude-flashbar__close {
+    position: absolute;
+    right: halve($fortitude-base-spacing-unit);
+}
+
+.#{$fortitude-namespace}flashbar {
+  @include fortitude-flashbar;
+}
+
+.#{$fortitude-namespace}flashbar__close {
+  @include fortitude-flashbar__close;
+}

data/app/assets/stylesheets/fortitude/blocks/_fluid-container.scss

@@ -0,0 +1,12 @@
+/*------------------------------------*\
+    #FLUID-CONTAINER
+\*------------------------------------*/
+
+@mixin fortitude-fluid-container {
+    @include fortitude-clearfix;
+    width: 100%;
+}
+
+.#{$fortitude-namespace}fluid-container {
+    @include fortitude-fluid-container;
+}

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

@@ -0,0 +1,19 @@
+/*------------------------------------*\
+    #INLINE-LIST
+\*------------------------------------*/
+
+@mixin fortitude-inline-list {
+    display: inline;
+}
+
+@mixin fortitude-inline-list__item {
+    display: inline;
+}
+
+.#{$fortitude-namespace}inline-list {
+  @include fortitude-inline-list;
+}
+
+  .#{$fortitude-namespace}inline-list__item {
+    @include fortitude-inline-list__item;
+  }

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

@@ -0,0 +1,377 @@
+/*------------------------------------*\
+    #INPUT
+\*------------------------------------*/
+
+$fortitude-field-input-placeholder-color:         #a9a9a9 !default;
+$fortitude-field-input-height:                    double($fortitude-base-spacing-unit) !default;
+$fortitude-field-input-background-color:          white !default;
+$fortitude-field-input-border-width:              0.1rem !default;
+$fortitude-field-input-border-style:              solid !default;
+$fortitude-field-input-border-color:              #a9a9a9 !default;
+$fortitude-field-input-border-radius:             0.2rem !default;
+
+$fortitude-text-input-placeholder-color:          $fortitude-field-input-placeholder-color !default;
+$fortitude-text-input-height:                     $fortitude-field-input-height !default;
+$fortitude-text-input-background-color:           $fortitude-field-input-background-color !default;
+$fortitude-text-input-border-width:               $fortitude-field-input-border-width !default;
+$fortitude-text-input-border-style:               $fortitude-field-input-border-style !default;
+$fortitude-text-input-border-color:               $fortitude-field-input-border-color !default;
+$fortitude-text-input-border-radius:              $fortitude-field-input-border-radius !default;
+
+$fortitude-textarea-input-placeholder-color:      $fortitude-field-input-placeholder-color !default;
+$fortitude-textarea-input-height:                 $fortitude-field-input-height !default;
+$fortitude-textarea-input-background-color:       $fortitude-field-input-background-color !default;
+$fortitude-textarea-input-border-width:           $fortitude-field-input-border-width !default;
+$fortitude-textarea-input-border-style:           $fortitude-field-input-border-style !default;
+$fortitude-textarea-input-border-color:           $fortitude-field-input-border-color !default;
+$fortitude-textarea-input-border-radius:          $fortitude-field-input-border-radius !default;
+
+$fortitude-select-input-placeholder-color:        $fortitude-field-input-placeholder-color !default;
+$fortitude-select-input-height:                   $fortitude-field-input-height !default;
+$fortitude-select-input-background-color:         $fortitude-field-input-background-color !default;
+$fortitude-select-input-border-width:             $fortitude-field-input-border-width !default;
+$fortitude-select-input-border-style:             $fortitude-field-input-border-style !default;
+$fortitude-select-input-border-color:             $fortitude-field-input-border-color !default;
+$fortitude-select-input-border-radius:            $fortitude-field-input-border-radius !default;
+
+$fortitude-color-input-placeholder-color:         $fortitude-field-input-placeholder-color !default;
+$fortitude-color-input-height:                    $fortitude-field-input-height !default;
+$fortitude-color-input-background-color:          $fortitude-field-input-background-color !default;
+$fortitude-color-input-border-width:              $fortitude-field-input-border-width !default;
+$fortitude-color-input-border-style:              $fortitude-field-input-border-style !default;
+$fortitude-color-input-border-color:              $fortitude-field-input-border-color !default;
+$fortitude-color-input-border-radius:             $fortitude-field-input-border-radius !default;
+
+$fortitude-range-input-height:                    $fortitude-field-input-height !default;
+$fortitude-range-input-background-color:          false !default;
+$fortitude-range-input-border-width:              0 !default;
+$fortitude-range-input-border-style:              $fortitude-field-input-border-style !default;
+$fortitude-range-input-border-color:              $fortitude-field-input-border-color !default;
+$fortitude-range-input-border-radius:             $fortitude-field-input-border-radius !default;
+
+$fortitude-switch-input-size:                     $fortitude-base-spacing-unit - 0.4rem !default;
+$fortitude-switch-input-background-color:         false !default;
+$fortitude-switch-input-border-width:             0.1rem !default;
+$fortitude-switch-input-border-style:             solid !default;
+$fortitude-switch-input-border-color:             #a9a9a9 !default;
+$fortitude-switch-input-border-radius:            0.2rem !default;
+
+$fortitude-checkbox-input-size:                   $fortitude-switch-input-size !default;
+$fortitude-checkbox-input-background-color:       $fortitude-switch-input-background-color !default;
+$fortitude-checkbox-input-border-width:           $fortitude-switch-input-border-width !default;
+$fortitude-checkbox-input-border-style:           $fortitude-switch-input-border-style !default;
+$fortitude-checkbox-input-border-color:           $fortitude-switch-input-border-color !default;
+$fortitude-checkbox-input-border-radius:          $fortitude-switch-input-border-radius !default;
+
+$fortitude-radio-input-size:                      $fortitude-switch-input-size !default;
+$fortitude-radio-input-background-color:          $fortitude-switch-input-background-color !default;
+$fortitude-radio-input-border-width:              $fortitude-switch-input-border-width !default;
+$fortitude-radio-input-border-style:              $fortitude-switch-input-border-style !default;
+$fortitude-radio-input-border-color:              $fortitude-switch-input-border-color !default;
+$fortitude-radio-input-border-radius:             10rem !default;
+
+$fortitude-enable-input--full:                    false !default;
+$fortitude-enable-input--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-input {
+    /**
+     * 1. Allow us to style box model properties.
+     * 2. Line different sized inputs up a little nicer.
+     * 3. Make inputs inherit use their initial styles (fixes zooming on iOS).
+     * 4. Fixes odd inner spacing in IE7.
+    */
+    @include fortitude-font-size($fortitude-base-font-size); /* [3] */
+    display: inline-block; /* [1] */
+    vertical-align: middle; /* [2] */
+    font: inherit;
+    overflow: visible; /* [4] */
+    max-width: 100%;
+
+    @if $fortitude-global-border-box == false {
+        box-sizing: border-box; /* [10] */
+    }
+}
+
+@mixin fortitude-text-input {
+    @include fortitude-input;
+
+    /**
+     * 5. Reset/normalize some styles.
+     * 6. Subtract the border size from the padding value so that inputs do not
+     *    grow larger as we add borders.
+     */
+
+    height: $fortitude-text-input-height;
+    margin: fortitude-block-margin($fortitude-text-input-height, $fortitude-text-input-border-width, $fortitude-base-line-height) 0; /* [5] */
+    padding: fortitude-block-padding($fortitude-text-input-height, $fortitude-text-input-border-width, $fortitude-base-line-height); /* [6] */
+
+    @if ($fortitude-text-input-border-width != 0) {
+        border: $fortitude-text-input-border-width $fortitude-text-input-border-style $fortitude-text-input-border-color;
+    } @else {
+        border: 0; /* [5] */
+    }
+
+    @if ($fortitude-text-input-border-radius != 0) {
+        border-radius: $fortitude-text-input-border-radius;
+    } @else {
+        border-radius: 0; /* [5] */
+    }
+
+    @if ($fortitude-text-input-background-color) {
+        background-color: $fortitude-text-input-background-color;
+    }
+
+    &::placeholder {
+        color: $fortitude-text-input-placeholder-color;
+    }
+}
+
+@mixin fortitude-textarea-input {
+    @include fortitude-input;
+
+    /**
+     * 5. Reset/normalize some styles.
+     * 6. Subtract the border size from the padding value so that inputs do not
+     *    grow larger as we add borders.
+     */
+
+    min-height: $fortitude-textarea-input-height;
+    margin: fortitude-block-margin($fortitude-textarea-input-height, $fortitude-textarea-input-border-width, $fortitude-base-line-height) 0; /* [5] */
+    padding: fortitude-block-padding($fortitude-textarea-input-height, $fortitude-textarea-input-border-width, $fortitude-base-line-height); /* [6] */
+
+    @if($fortitude-textarea-input-border-width != 0) {
+        border: $fortitude-textarea-input-border-width $fortitude-textarea-input-border-style $fortitude-textarea-input-border-color;
+    } @else {
+        border: 0; /* [5] */
+    }
+
+    @if ($fortitude-textarea-input-border-radius != 0) {
+        border-radius: $fortitude-textarea-input-border-radius;
+    } @else {
+        border-radius: 0; /* [5] */
+    }
+
+    @if ($fortitude-textarea-input-background-color) {
+        background-color: $fortitude-textarea-input-background-color;
+    }
+
+    &::placeholder {
+        color: $fortitude-textarea-input-placeholder-color;
+    }
+}
+
+@mixin fortitude-select-input {
+    @include fortitude-input;
+
+    /**
+     * 5. Reset/normalize some styles.
+     * 6. Subtract the border size from the padding value so that inputs do not
+     *    grow larger as we add borders.
+     */
+
+    height: $fortitude-select-input-height;
+    margin: fortitude-block-margin($fortitude-select-input-height, $fortitude-select-input-border-width, $fortitude-base-line-height) 0; /* [5] */
+    padding: fortitude-block-padding($fortitude-select-input-height, $fortitude-select-input-border-width, $fortitude-base-line-height); /* [6] */
+
+    @if($fortitude-select-input-border-width != 0) {
+        border: $fortitude-select-input-border-width $fortitude-select-input-border-style $fortitude-select-input-border-color;
+    } @else {
+        border: 0; /* [5] */
+    }
+
+    @if ($fortitude-select-input-border-radius != 0) {
+        border-radius: $fortitude-select-input-border-radius;
+    } @else {
+        border-radius: 0; /* [5] */
+    }
+
+    @if ($fortitude-select-input-background-color) {
+        background-color: $fortitude-select-input-background-color;
+     }
+
+    &.placeholder {
+        color: $fortitude-select-input-placeholder-color;
+    }
+
+    &[multiple] {
+        height: auto;
+    }
+}
+
+@mixin fortitude-checkbox-input {
+    @include fortitude-input;
+
+    /**
+     * 5. Reset/normalize some styles.
+     * 6. Subtract the border size from the padding value so that inputs do not
+     *    grow larger as we add borders.
+     */
+
+    width: $fortitude-checkbox-input-size;
+    height: $fortitude-checkbox-input-size;
+    margin: fortitude-block-margin($fortitude-checkbox-input-size + 0.2rem, $fortitude-checkbox-input-border-width, $fortitude-base-line-height) 0; /* [5] */
+    padding: fortitude-block-padding($fortitude-checkbox-input-size, $fortitude-checkbox-input-border-width, $fortitude-base-line-height); /* [6] */
+
+    @if ($fortitude-checkbox-input-border-width != 0) {
+        border: $fortitude-checkbox-input-border-width $fortitude-checkbox-input-border-style $fortitude-checkbox-input-border-color;
+    } @else {
+        border: 0; /* [5] */
+    }
+
+    @if ($fortitude-checkbox-input-border-radius != 0) {
+        border-radius: $fortitude-checkbox-input-border-radius;
+    } @else {
+        border-radius: 0; /* [5] */
+    }
+
+    @if ($fortitude-checkbox-input-background-color) {
+        background-color: $fortitude-checkbox-input-background-color;
+    }
+}
+
+@mixin fortitude-radio-input {
+    @include fortitude-input;
+
+    /**
+     * 5. Reset/normalize some styles.
+     * 6. Subtract the border size from the padding value so that inputs do not
+     *    grow larger as we add borders.
+     */
+
+    width: $fortitude-radio-input-size;
+    height: $fortitude-radio-input-size;
+    margin: fortitude-block-margin($fortitude-radio-input-size + 0.4rem, $fortitude-radio-input-border-width, $fortitude-base-line-height) 0; /* [5] */
+    padding: fortitude-block-padding($fortitude-radio-input-size, $fortitude-radio-input-border-width, $fortitude-base-line-height); /* [6] */
+
+    @if ($fortitude-radio-input-border-width != 0) {
+        border: $fortitude-radio-input-border-width $fortitude-radio-input-border-style $fortitude-radio-input-border-color;
+    } @else {
+        border: 0; /* [5] */
+    }
+
+    @if ($fortitude-radio-input-border-radius != 0) {
+        border-radius: $fortitude-radio-input-border-radius;
+    } @else {
+        border-radius: 0; /* [5] */
+    }
+
+    @if ($fortitude-radio-input-background-color) {
+        background-color: $fortitude-radio-input-background-color;
+    }
+}
+
+@mixin fortitude-range-input {
+    @include fortitude-input;
+
+    /**
+     * 5. Reset/normalize some styles.
+     * 6. Subtract the border size from the padding value so that inputs do not
+     *    grow larger as we add borders.
+     */
+
+    height: $fortitude-range-input-height;
+    margin: fortitude-block-margin($fortitude-range-input-height, $fortitude-range-input-border-width, $fortitude-base-line-height) 0; /* [5] */
+    padding: fortitude-block-padding($fortitude-range-input-height, $fortitude-range-input-border-width, $fortitude-base-line-height) 0; /* [6] */
+
+    @if ($fortitude-range-input-border-width != 0) {
+        border: $fortitude-range-input-border-width $fortitude-range-input-border-style $fortitude-range-input-border-color;
+    } @else {
+        border: 0; /* [5] */
+    }
+
+    @if ($fortitude-range-input-border-radius != 0) {
+        border-radius: $fortitude-range-input-border-radius;
+    } @else {
+        border-radius: 0; /* [5] */
+    }
+
+    @if ($fortitude-range-input-background-color) {
+        background-color: $fortitude-range-input-background-color;
+    }
+}
+
+@mixin fortitude-color-input {
+    @include fortitude-input;
+
+    /**
+     * 5. Reset/normalize some styles.
+     * 6. Subtract the border size from the padding value so that inputs do not
+     *    grow larger as we add borders.
+     */
+
+    height: $fortitude-color-input-height;
+    margin: fortitude-block-margin($fortitude-color-input-height, $fortitude-color-input-border-width, $fortitude-base-line-height) 0; /* [5] */
+    padding: fortitude-block-padding($fortitude-color-input-height, $fortitude-color-input-border-width, $fortitude-base-line-height); /* [6] */
+
+    @if ($fortitude-color-input-border-width != 0) {
+        border: $fortitude-color-input-border-width $fortitude-color-input-border-style $fortitude-color-input-border-color;
+    } @else {
+        border: 0; /* [5] */
+    }
+
+    @if ($fortitude-color-input-border-radius != 0) {
+        border-radius: $fortitude-color-input-border-radius;
+    } @else {
+        border-radius: 0; /* [5] */
+    }
+
+    @if ($fortitude-color-input-background-color) {
+        background-color: $fortitude-color-input-background-color;
+    }
+
+    &::placeholder {
+        color: $fortitude-color-input-placeholder-color;
+    }
+}
+
+@mixin fortitude-input--full { width: 100%; }
+
+@mixin fortitude-input--pill { border-radius: 10rem; }
+
+.#{$fortitude-namespace}checkbox-input {
+    @include fortitude-checkbox-input;
+}
+
+.#{$fortitude-namespace}radio-input {
+    @include fortitude-radio-input;
+}
+
+.#{$fortitude-namespace}text-input {
+    @include fortitude-text-input;
+}
+
+.#{$fortitude-namespace}textarea-input {
+    @include fortitude-textarea-input;
+}
+
+.#{$fortitude-namespace}select-input {
+    @include fortitude-select-input;
+}
+
+.#{$fortitude-namespace}range-input {
+    @include fortitude-range-input;
+}
+
+.#{$fortitude-namespace}color-input {
+    @include fortitude-color-input;
+}
+
+
+.#{$fortitude-namespace}input {
+    &--full {
+        @include fortitude-input--full;
+    }
+
+    &--pill {
+        @include fortitude-input--pill;
+    }
+}

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

@@ -0,0 +1,288 @@
+/*------------------------------------*\
+    #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;
+}
+
+    .#{$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;
+        }
+
+    }
+
+}
+
+@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--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--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--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;
+        }
+
+    }
+
+}