fortitude-sass 0.5.0 → 0.5.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: f621a202068e3e2c8b77bdd9c66bb79b1d908788
-  data.tar.gz: d921cb609dd98eca8391c90991e871c0cc4a2959
+  metadata.gz: 0774ffb923ccf750e6859d4a59c689fec01e5821
+  data.tar.gz: 0939a814be32028c173c7c9c4c8b4e3a24685971
 SHA512:
-  metadata.gz: 6a631fd01e34c5f51f6aa7bcbdeb1e91ccd305b86c601e3fac39d516aa7dd32f838a3155d3e2b672c42db3549ab58f0b413544e863cbe371a1dda46f1ec92550
-  data.tar.gz: be1b69b46f606cca3ec5c1b91d7e0dcc64ae3101c30b01d6cb139c5508bf380a8deb88cc9b097c44beffbc8ae14025a0ad49bf7f5a5d4b00408b63038e53372f
+  metadata.gz: 4b119e51e1aa20d645b989d9185bd6be147d3060958d1bd324e1d2e1e0a8c000dc9133ce19de379729b4d736ba811a247bcaaa21d98cdeb3efaaca938314bdec
+  data.tar.gz: 5cb852483f12f6482f34c4d372624b7d1dc6175ac64c011a5d999b034c650ff5917713cb7ab1f3e95fc5c2fec62aa74cbd8dfa580b497762a23e967e18b314a0

data/.gitignore

@@ -1,7 +1,6 @@
 *swp
 *gem
 .sass-cache
-fortitude
 demo
 tmp
 tags

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    fortitude-sass (0.5.0)
+    fortitude-sass (0.5.1)
       autoprefixer-rails
       sass (~> 3.3)
       thor

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

@@ -0,0 +1,97 @@
+/*------------------------------------*\
+    #BADGE
+\*------------------------------------*/
+
+/**
+ * A simple badge object.
+**/
+
+// Predefine the variables below in order to alter and enable specific features.
+$fortitude-badge-height: $fortitude-base-spacing-unit * 1.3 !default;
+$fortitude-badge-height--small: $fortitude-base-spacing-unit !default;
+$fortitude-badge-height--large: double($fortitude-base-spacing-unit) !default;
+$fortitude-badge-font-size: $fortitude-base-font-size !default;
+
+$fortitude-badge-border-width: 0 !default;
+$fortitude-badge-border-style: solid !default;
+$fortitude-badge-border-radius: 0 !default;
+
+$fortitude-enable-badge--small: false !default;
+$fortitude-enable-badge--large: false !default;
+$fortitude-enable-badge--pill: false !default;
+
+@mixin fortitude-badge($fortitude-extension: null) {
+  /**
+   * 1. Allow us to style box model properties.
+   * 2. Line different sized badges up a little nicer.
+   * 3. Make badges inherit font styles (often necessary when styling `input`s as
+   *    badges).
+   * 4. Reset/normalize some styles.
+   * 5. Fixes odd inner spacing in IE7.
+   * 6. Subtract the border size from the padding value so that badges do not
+   *    grow larger as we add borders.
+   * 7. Set badge text to nowrap.
+  **/
+  border: $fortitude-badge-border-width $fortitude-badge-border-style transparent;
+  display: inline-block;
+  /* [1] */
+  vertical-align: middle;
+  /* [2] */
+  font: inherit;
+  /* [3] */
+  background-color: transparent;
+  /* [4] */
+  text-align: center;
+  /* [4] */
+  font-size: $fortitude-badge-font-size;
+  height: $fortitude-badge-height;
+  overflow: visible;
+  /* [5] */
+  white-space: nowrap;
+  /* [7] */
+  line-height: $fortitude-base-line-height;
+  @if $fortitude-extension == small {
+    @include fortitude-badge--small;
+  }
+  @else if $fortitude-extension == large {
+    @include fortitude-badge--large;
+  }
+  @else {
+    margin: fortitude-block-margin($fortitude-badge-height, $fortitude-badge-border-width) 0;
+    /* [4] */
+    padding: fortitude-block-padding($fortitude-badge-height, $fortitude-badge-border-width) quarter($fortitude-base-spacing-unit);
+    /* [6] */
+  }
+  @if $fortitude-extension == pill {
+    @include fortitude-badge--pill;
+  }
+  @else if $fortitude-badge-border-radius != 0 {
+    border-radius: $fortitude-badge-border-radius;
+  }
+}
+
+@mixin fortitude-badge--small {
+  margin: fortitude-block-margin($fortitude-badge-height--small, $fortitude-badge-border-width) 0;
+  /* [4] */
+  padding: fortitude-block-padding($fortitude-badge-height--small, $fortitude-badge-border-width) quarter($fortitude-base-spacing-unit);
+  /* [6] */
+}
+
+@mixin fortitude-badge--large {
+  margin: fortitude-block-margin($fortitude-badge-height--large, $fortitude-badge-border-width) 0;
+  /* [4] */
+  padding: fortitude-block-padding($fortitude-badge-height--large, $fortitude-badge-border-width) quarter($fortitude-base-spacing-unit);
+  /* [6] */
+  @if $fortitude-block-height > $fortitude-block-line-height {
+    line-height: ceil($fortitude-block-height / $fortitude-block-line-height) * $fortitude-block-line-height;
+  }
+}
+
+@mixin fortitude-badge--pill {
+  /**
+   * 1. Overly-large value to ensure the radius rounds the whole end of the
+   *    badge.
+  **/
+  border-radius: 10rem;
+  /* [1] */
+}

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

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

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

@@ -0,0 +1,41 @@
+/*------------------------------------*\
+    #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($fortitude-extension: null) {
+  @if $fortitude-extension == small {
+    @include fortitude-block-list--small__item;
+  }
+  @else if $fortitude-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;
+}

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

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

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

@@ -0,0 +1,163 @@
+/*------------------------------------*\
+    #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 + 1rem !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) + 2rem !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($fortitude-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 $fortitude-extension == small {
+    @include fortitude-button--small;
+  }
+  @else if $fortitude-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-extension == pill {
+    @include fortitude-button--pill;
+  }
+  @else if $fortitude-button-border-radius != 0 {
+    border-radius: $fortitude-button-border-radius;
+  }
+  @if $fortitude-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;
+}

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

@@ -0,0 +1,38 @@
+/*------------------------------------*\
+    #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 $fortitude-alias, $fortitude-breakpoint in $fortitude-breakpoints {
+    $fortitude-query: fortitude-query($fortitude-breakpoint);
+    @if not $fortitude-query {
+      // if there is no media query.
+      width: map-get($fortitude-container-breakpoints, $fortitude-alias);
+    }
+    @else {
+      // if there is a media query.
+      @media #{$fortitude-query} {
+        width: map-get($fortitude-container-breakpoints, $fortitude-alias);
+      }
+    }
+  }
+  @if $fortitude-global-border-box == false {
+    box-sizing: border-box;
+  }
+}
+
+@mixin fortitude-container--fixed-top {
+  z-index: 2;
+  position: fixed;
+  top: 0;
+}

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

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

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

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

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

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

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

@@ -0,0 +1,11 @@
+/*------------------------------------*\
+    #INLINE-LIST
+\*------------------------------------*/
+
+@mixin fortitude-inline-list {
+  display: inline;
+}
+
+@mixin fortitude-inline-list__item {
+  display: inline;
+}