fortitude-sass 0.5.0 → 0.5.1

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

@@ -0,0 +1,344 @@
+/*------------------------------------*\
+    #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;
+}

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

@@ -0,0 +1,118 @@
+/*------------------------------------*\
+    #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($fortitude-extension: null) {
+  list-style: none;
+  display: block;
+  margin: 0;
+  padding: 0;
+  margin-left: -$fortitude-layout-gutter;
+}
+
+@mixin fortitude-layout__item($fortitude-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;
+}

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

@@ -0,0 +1,22 @@
+/*------------------------------------*\
+    #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;
+}

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

@@ -0,0 +1,86 @@
+/*------------------------------------*\
+    #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;
+}

data/app/assets/stylesheets/fortitude/api/blocks/_modal.scss

@@ -0,0 +1 @@
+

data/app/assets/stylesheets/fortitude/api/blocks/_navigationbar.scss

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,18 @@
+/*------------------------------------*\
+    #SHADE
+\*------------------------------------*/
+
+$fortitude-shade-background-color: rgba(0, 0, 0, 0.3) !default;
+$fortitude-shade-transition-speed: 0.3s !default;
+
+@mixin fortitude-shade {
+  display: none;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  @if $fortitude-shade-background-color {
+    background-color: $fortitude-shade-background-color;
+  }
+}

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

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,45 @@
+/*------------------------------------*\
+    #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;
+}

data/app/assets/stylesheets/fortitude/api/blocks/_tabs.scss

@@ -0,0 +1,11 @@
+/*------------------------------------*\
+    #TABS
+\*------------------------------------*/
+
+@mixin fortitude-tabs__target {
+  display: none;
+}
+
+@mixin fortitude-tabs__target--is-active {
+  display: block;
+}

data/app/assets/stylesheets/fortitude/api/blocks/_text.scss

@@ -0,0 +1 @@
+