fortitude-sass 0.6.1 → 0.6.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 2a5adc340645e6f1b280f8bbe346363c9ebd0a4a
-  data.tar.gz: 3567c40cb455d91631853935536a023a7052b927
+  metadata.gz: 731bcb5d145e27096d45146dde3e1b8272451234
+  data.tar.gz: 0e989205a6f18e1a951fc7953110038510b84ca2
 SHA512:
-  metadata.gz: b17e6ed930db0c7cb436a3170bac1a5e5393399913cfcbe43a2055e8d9f7c4f33c823f5758711b01da7e89a18bb27fe5fffd2284fd0cb17f91763795c6f141fb
-  data.tar.gz: 5ae75c9818639223b65478b262c721aadbff7da4f97485bfefe036116053388e02f7d75edea23fe46fa6d93e3fe3443c3d461915391792b31ac551643f9ac04a
+  metadata.gz: a4ce4346cfff8519f5d0ca811359cdc73ee8c01f658ea1cff4c6334be56aa36dcd694630124efe351787897c97aff90de1fa35d8d1a075d95b755a4a772ea2cf
+  data.tar.gz: d398abbed8870bfb4ddc4b76867f6cb9f7d86517adb663913b6c9e0359d18beda869cd6c8b73fc8292e034a43b3c5db60a064ae50ed1215ff9d78fcdab008939

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    fortitude-sass (0.6.1)
+    fortitude-sass (0.6.3)
       autoprefixer-rails
       execjs
       sass (~> 3.3)
@@ -13,7 +13,7 @@ GEM
     autoprefixer-rails (5.1.7)
       execjs
       json
-    execjs (2.3.0)
+    execjs (2.4.0)
     json (1.8.2)
     rake (10.4.2)
     sass (3.4.13)

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

@@ -2,96 +2,74 @@
     #BADGE
 \*------------------------------------*/
 
-/**
- * A simple badge object.
-**/
+$fortitude-badge-border-radius: 0 !default;
+$fortitude-badge-border-style: solid !default;
+$fortitude-badge-border-width: 0 !default;
+$fortitude-badge-font-size: $fortitude-base-font-size !default;
+
+$fortitude-badge-height--default: $fortitude-base-spacing-unit * 1.3 !default;
+$fortitude-badge-horizontal-padding--default: 1rem !default;
 
-// 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-horizontal-padding--small: 0.5rem !default;
 
-$fortitude-badge-border-width: 0 !default;
-$fortitude-badge-border-style: solid !default;
-$fortitude-badge-border-radius: 0 !default;
+$fortitude-badge-height--large: double($fortitude-base-spacing-unit) !default;
+$fortitude-badge-horizontal-padding--large: 2rem !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.
-  **/
+@mixin fortitude-badge($extensions: ()) {
+  $is-small: fortitude-contains($extensions, small);
+  $is-large: fortitude-contains($extensions, large);
+  $is-pill: fortitude-contains($extensions, pill);
+
   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;
+  height: $fortitude-badge-height--default;
   overflow: visible;
-  /* [5] */
   white-space: nowrap;
-  /* [7] */
-  line-height: $fortitude-base-line-height;
-  @if $fortitude-extension == small {
+
+  @if $is-small {
     @include fortitude-badge--small;
-  }
-  @else if $fortitude-extension == large {
+  } @else if $is-large {
     @include fortitude-badge--large;
+  } @else {
+    margin: fortitude-block-margin($fortitude-badge-height--default, $fortitude-badge-border-width) 0;
+    padding: fortitude-block-padding($fortitude-badge-height--default, $fortitude-badge-border-width) $fortitude-badge-horizontal-padding--default;
   }
-  @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 not $is-large {
+    line-height: $fortitude-base-line-height;
   }
-  @if $fortitude-extension == pill {
+  
+  @if $is-pill {
     @include fortitude-badge--pill;
-  }
-  @else if $fortitude-badge-border-radius != 0 {
+  } @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] */
+  padding: fortitude-block-padding($fortitude-badge-height--small, $fortitude-badge-border-width) $fortitude-badge-horizontal-padding--small;
 }
 
 @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] */
+  padding: fortitude-block-padding($fortitude-badge-height--large, $fortitude-badge-border-width) $fortitude-badge-horizontal-padding--large;
+
   @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] */
+  border-radius: 100rem;
 }

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

@@ -2,11 +2,7 @@
     #BARE-LIST
 \*------------------------------------*/
 
-/**
- * The bare-list object simply removes any indents and bullet points from lists.
-**/
-
-@mixin fortitude-bare-list {
+@mixin fortitude-bare-list($extensions: ()) {
   list-style: none;
   margin: 0;
   padding: 0;

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

@@ -2,40 +2,38 @@
     #BLOCK-LIST
     \*------------------------------------*/
 
-/**
- * The block list object creates blocky list items out of a `ul` or `ol`.
-**/
+$fortitude-block-list-padding--default: $fortitude-base-spacing-unit !default;
 
-// 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-block-list-padding--small: halve($fortitude-block-list-padding--default) !default;
+
+$fortitude-block-list-padding--large: double($fortitude-block-list-padding--default) !default;
 
 $fortitude-enable-block-list--small: false !default;
 $fortitude-enable-block-list--large: false !default;
 
-@mixin fortitude-block-list {
+@mixin fortitude-block-list($extensions: ()) {
   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__item($extensions: ()) {
+  $is-small: fortitude-contains($extensions, small);
+  $is-large: fortitude-contains($extensions, large);
+
+  @if $is-small {
+    @include fortitude-block-list__item--small;
+  } @else if $is-large {
+    @include fortitude-block-list__item--large;
+  } @else {
+    padding: $fortitude-block-list-padding--default;
   }
 }
 
-@mixin fortitude-block-list--small__item {
+@mixin fortitude-block-list__item--small {
   padding: $fortitude-block-list-padding--small;
 }
 
-@mixin fortitude-block-list--large__item {
+@mixin fortitude-block-list__item--large {
   padding: $fortitude-block-list-padding--large;
 }

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

@@ -2,22 +2,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-width: 0 !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.
-  **/
+@mixin fortitude-box($extensions: ()) {
+  $is-rounded: fortitude-contains($extensions, rounded);
+
   @include fortitude-clearfix;
   display: block;
-  /* [1] */
   border: $fortitude-box-border-width $fortitude-box-border-style transparent;
-  /* [2] */
+
+  @if $is-rounded {
+    @include fortitude-box--rounded;
+  }
+}
+
+@mixin fortitude-box--rounded {
+  border-radius: $fortitude-box-border-radius--rounded;
 }

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

@@ -2,19 +2,16 @@
     #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-border-style: solid !default;
+$fortitude-button-border-width: 0 !default;
+
+$fortitude-button-height--default: $fortitude-base-spacing-unit + 1.6rem !default;
+$fortitude-button-horizontal-padding--default: fortitude-block-padding($fortitude-button-height--default, $fortitude-button-border-width) * 2 !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;
 
@@ -23,133 +20,85 @@ $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.
-  **/
+@mixin fortitude-button($extensions: ()) {
+  $is-small: fortitude-contains($extensions, small);
+  $is-large: fortitude-contains($extensions, large);
+  $is-full: fortitude-contains($extensions, full);
+  $is-pill: fortitude-contains($extensions, pill);
+
   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 {
+
+  @if $is-small {
     @include fortitude-button--small;
-  }
-  @else if $fortitude-extension == large {
+  } @else if $is-large {
     @include fortitude-button--large;
+  } @else {
+    margin: fortitude-block-margin($fortitude-button-height--default, $fortitude-button-border-width) 0;
+    padding: fortitude-block-padding($fortitude-button-height--default, $fortitude-button-border-width) $fortitude-button-horizontal-padding--default;
   }
-  @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 $is-full {
+    @include fortitude-button--full;
   }
-  @if $fortitude-extension == pill {
+
+  @if $is-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 {
+@mixin fortitude-button__target($extensions: ()) {
   position: absolute;
   opacity: 0;
   border: 0;