fortitude-sass 0.6.1 → 0.6.3

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

@@ -2,30 +2,34 @@
     #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;
+$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 {
+@mixin fortitude-container($extensions: ()) {
   @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;
   }

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

@@ -1,17 +1,10 @@
-/*------------------------------------*\
-    #FLAG
-\*------------------------------------*/
+$fortitude-flag-gutter--default: $fortitude-base-spacing-unit !default;
 
-/**
- * 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
-**/
+$fortitude-flag-gutter--small: halve($fortitude-flag-gutter--default) !default;
 
-// 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-flag-gutter--large: double($fortitude-flag-gutter--default) !default;
+
+$fortitude-flag-collapse-at--responsive: 720px !default;
 
 $fortitude-enable-flag--small: false !default;
 $fortitude-enable-flag--large: false !default;
@@ -20,179 +13,113 @@ $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.
-  **/
+
+@mixin fortitude-flag($extensions: ()) {
   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 {
+@mixin fortitude-flag--rev {
+  direction: rtl;
+}
+
+@mixin fortitude-flag--responsive {
+  @media screen and (max-width: $fortitude-flag-collapse-at) {
+    @if $fortitude-enable-flag--rev == true {
+      direction: ltr;
+
+      @content;
+    }
+
     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.
-  **/
+@mixin fortitude-flag__object($extensions: ()) {
   display: table-cell;
-  width: 100%;
-  /* [1] */
   vertical-align: middle;
-  /* [2] */
+  padding-right: $fortitude-flag-gutter--default;
 }
 
-@mixin fortitude-flag--small__object {
-  padding-right: $fortitude-flag-gutter--small;
+@mixin fortitude-flag__object--top {
+  vertical-align: top;
 }
 
-@mixin fortitude-flag--small--rev__object {
-  padding-right: 0;
-  padding-left: $fortitude-flag-gutter--small;
+@mixin fortitude-flag__object--bottom {
+  vertical-align: bottom;
 }
 
-@mixin fortitude-flag--large__object {
-  padding-right: $fortitude-flag-gutter--large;
+@mixin fortitude-flag__object--flush {
+  padding-right: 0;
+  padding-left: 0;
 }
 
-@mixin fortitude-flag--large--rev__object {
-  padding-right: 0;
-  padding-left: $fortitude-flag-gutter--large;
+@mixin fortitude-flag__object--small {
+  padding-right: $fortitude-flag-gutter--small;
 }
 
-@mixin fortitude-flag--rev {
-  /**
-   * 1. Swap the rendered direction of the object…
-  **/
-  direction: rtl;
-  /* [1] */
+@mixin fortitude-flag__object--large {
+  padding-right: $fortitude-flag-gutter--large;
 }
 
-@mixin fortitude-flag--rev__object {
-  /**
-   * 1. Swap the rendered direction of the object…
-   * 2. …and reset it.
-   * 3. Reassign margins to the correct sides.
-  **/
+@mixin fortitude-flag__object--rev {
   direction: ltr;
-  /* [2] */
   padding-right: 0;
-  /* [3] */
-  padding-left: $fortitude-flag-gutter;
-  /* [3] */
+  padding-left: $fortitude-flag-gutter--default;
 }
 
-@mixin fortitude-flag--rev__body {
-  /**
-   * 2. …and reset it.
-  **/
-  direction: ltr;
-  /* [2] */
+@mixin fortitude-flag__object--rev--small {
+  padding-right: 0;
+  padding-left: $fortitude-flag-gutter--small;
 }
 
-@mixin fortitude-flag--flush__object {
+@mixin fortitude-flag__object--rev--large {
   padding-right: 0;
-  padding-left: 0;
+  padding-left: $fortitude-flag-gutter--large;
 }
 
-@mixin fortitude-flag--top__object {
-  vertical-align: top;
+@mixin fortitude-flag__object--responsive {
+  display: block;
+  padding-right: 0;
+  padding-left: 0;
+  margin-bottom: $fortitude-flag-gutter--default;
 }
 
-@mixin fortitude-flag--top__body {
-  vertical-align: top;
+@mixin fortitude-flag__object--responsive--small {
+  padding-right: 0;
+  padding-left: 0;
 }
 
-@mixin fortitude-flag--bottom__object {
-  vertical-align: bottom;
+@mixin fortitude-flag__object--responsive--large {
+  padding-right: 0;
+  padding-left: 0;
 }
 
-@mixin fortitude-flag--bottom__body {
-  vertical-align: bottom;
+@mixin fortitude-flag__object__content($extensions: ()) {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: none;
 }
 
-@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__body($extensions: ()) {
+  display: table-cell;
+  width: 100%;
+  vertical-align: middle;
 }
 
-@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__body--top {
+  vertical-align: top;
 }
 
-@mixin fortitude-flag--responsive__body {
-  display: block;
+@mixin fortitude-flag__body--bottom {
+  vertical-align: bottom;
 }
 
-@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__body--rev {
+  direction: ltr;
 }
 
-@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;
+@mixin fortitude-flag__body--responsive {
+  display: block;
 }

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

@@ -6,12 +6,12 @@
  * A simple flashbar object.
 **/
 
-@mixin fortitude-flashbar {
+@mixin fortitude-flashbar($extensions: ()) {
   @include fortitude-clearfix;
   position: relative;
 }
 
-@mixin fortitude-flashbar__close {
+@mixin fortitude-flashbar__close($extensions: ()) {
   position: absolute;
   right: halve($fortitude-base-spacing-unit);
 }

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

@@ -2,7 +2,7 @@
     #FLUID-CONTAINER
 \*------------------------------------*/
 
-@mixin fortitude-fluid-container {
+@mixin fortitude-fluid-container($extensions: ()) {
   @include fortitude-clearfix;
   width: 100%;
 }

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

@@ -2,10 +2,10 @@
     #INLINE-LIST
 \*------------------------------------*/
 
-@mixin fortitude-inline-list {
+@mixin fortitude-inline-list($extensions: ()) {
   display: inline;
 }
 
-@mixin fortitude-inline-list__item {
+@mixin fortitude-inline-list__item($extensions: ()) {
   display: inline;
 }

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

@@ -2,334 +2,332 @@
     #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-field-input-border-style: solid !default;
+$fortitude-field-input-border-width: 0.1rem !default;
+$fortitude-field-input-height: double($fortitude-base-spacing-unit) !default;
+$fortitude-field-input-placeholder-color: #a9a9a9 !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-text-input-border-style: $fortitude-field-input-border-style !default;
+$fortitude-text-input-border-width: $fortitude-field-input-border-width !default;
+$fortitude-text-input-height: $fortitude-field-input-height !default;
+$fortitude-text-input-placeholder-color: $fortitude-field-input-placeholder-color !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-textarea-input-border-style: $fortitude-field-input-border-style !default;
+$fortitude-textarea-input-border-width: $fortitude-field-input-border-width !default;
+$fortitude-textarea-input-height: $fortitude-field-input-height !default;
+$fortitude-textarea-input-placeholder-color: $fortitude-field-input-placeholder-color !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-select-input-border-style: $fortitude-field-input-border-style !default;
+$fortitude-select-input-border-width: $fortitude-field-input-border-width !default;
+$fortitude-select-input-height: $fortitude-field-input-height !default;
+$fortitude-select-input-placeholder-color: $fortitude-field-input-placeholder-color !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-color-input-border-style: $fortitude-field-input-border-style !default;
+$fortitude-color-input-border-width: $fortitude-field-input-border-width !default;
+$fortitude-color-input-height: $fortitude-field-input-height !default;
+$fortitude-color-input-placeholder-color: $fortitude-field-input-placeholder-color !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-range-input-border-style: $fortitude-field-input-border-style !default;
+$fortitude-range-input-border-width: 0 !default;
+$fortitude-range-input-height: $fortitude-field-input-height !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-switch-input-border-style: solid !default;
+$fortitude-switch-input-border-width: 0.1rem !default;
+$fortitude-switch-input-size: $fortitude-base-spacing-unit - 0.4rem !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-checkbox-input-border-style: $fortitude-switch-input-border-style !default;
+$fortitude-checkbox-input-border-width: $fortitude-switch-input-border-width !default;
+$fortitude-checkbox-input-size: $fortitude-switch-input-size !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-radio-input-border-style: $fortitude-switch-input-border-style !default;
+$fortitude-radio-input-border-width: $fortitude-switch-input-border-width !default;
+$fortitude-radio-input-size: $fortitude-switch-input-size !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.
-**/
+@mixin fortitude-input($extensions: ()) {
   @include fortitude-font-size($fortitude-base-font-size);
-  /* [3] */
+
   display: inline-block;
-  /* [1] */
+  position: relative;
   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.
-  **/
+@mixin fortitude-text-input($extensions: ()) {
+  $is-full: fortitude-contains($extensions, full);
+  $is-pill: fortitude-contains($extensions, pill);
+
+  @include fortitude-input($extensions);
+
   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 {
+  } @else {
     border: 0;
-    /* [5] */
   }
-  @if $fortitude-text-input-border-radius != 0 {
+
+  @if $is-pill {
+    @include fortitude-input--pill;
+  } @else if $fortitude-text-input-border-radius != 0 {
     border-radius: $fortitude-text-input-border-radius;
-  }
-  @else {
+  } @else {
     border-radius: 0;
-    /* [5] */
   }
+
   @if $fortitude-text-input-background-color {
     background-color: $fortitude-text-input-background-color;
   }
+
+  @if $is-full {
+    @include fortitude-input--full;
+  }
+
   &::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.
-  **/
+@mixin fortitude-textarea-input($extensions: ()) {
+  $is-full: fortitude-contains($extensions, full);
+  $is-pill: fortitude-contains($extensions, pill);
+
+  @include fortitude-input($extensions);
+
   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 {
+  } @else {
     border: 0;
-    /* [5] */
   }
-  @if $fortitude-textarea-input-border-radius != 0 {
+
+  @if $is-pill {
+    @include fortitude-input--pill;
+  } @else if $fortitude-textarea-input-border-radius != 0 {
     border-radius: $fortitude-textarea-input-border-radius;
-  }
-  @else {
+  } @else {
     border-radius: 0;
-    /* [5] */
   }
+
   @if $fortitude-textarea-input-background-color {
     background-color: $fortitude-textarea-input-background-color;
   }
+
+  @if $is-full {
+    @include fortitude-input--full;
+  }
+
   &::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.
-  **/
+@mixin fortitude-select-input($extensions: ()) {
+  $is-full: fortitude-contains($extensions, full);
+  $is-pill: fortitude-contains($extensions, pill);
+
+  @include fortitude-input($extensions);
+
   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 {
+  } @else {
     border: 0;
-    /* [5] */
   }
-  @if $fortitude-select-input-border-radius != 0 {
+
+  @if $is-pill {
+    @include fortitude-input--pill;
+  } @else if $fortitude-select-input-border-radius != 0 {
     border-radius: $fortitude-select-input-border-radius;
-  }
-  @else {
+  } @else {
     border-radius: 0;
-    /* [5] */
   }
+
   @if $fortitude-select-input-background-color {
     background-color: $fortitude-select-input-background-color;
   }
+
+  @if $is-full {
+    @include fortitude-input--full;
+  }
+
   &.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.
-  **/
+@mixin fortitude-checkbox-input($extensions: ()) {
+  $is-pill: fortitude-contains($extensions, pill);
+
+  @include fortitude-input($extensions);
+
   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 {
+  } @else {
     border: 0;
-    /* [5] */
   }
-  @if $fortitude-checkbox-input-border-radius != 0 {
+
+  @if $is-pill {
+    @include fortitude-input--pill;
+  } @else if $fortitude-checkbox-input-border-radius != 0 {
     border-radius: $fortitude-checkbox-input-border-radius;
-  }
-  @else {
+  } @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.
-  **/
+@mixin fortitude-radio-input($extensions: ()) {
+  $is-pill: fortitude-contains($extensions, pill);
+
+  @include fortitude-input($extensions);
+
   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 {
+  } @else {
     border: 0;
-    /* [5] */
   }
-  @if $fortitude-radio-input-border-radius != 0 {
+
+  @if $is-pill {
+    @include fortitude-input--pill;
+  } @else if $fortitude-radio-input-border-radius != 0 {
     border-radius: $fortitude-radio-input-border-radius;
-  }
-  @else {
+  } @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.
-  **/
+@mixin fortitude-range-input($extensions: ()) {
+  $is-full: fortitude-contains($extensions, full);
+  $is-pill: fortitude-contains($extensions, pill);
+
+  @include fortitude-input($extensions);
+
   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 {
+  } @else {
     border: 0;
-    /* [5] */
   }
-  @if $fortitude-range-input-border-radius != 0 {
+
+  @if $is-pill {
+    @include fortitude-input--pill;
+  } @else if $fortitude-range-input-border-radius != 0 {
     border-radius: $fortitude-range-input-border-radius;
-  }
-  @else {
+  } @else {
     border-radius: 0;
-    /* [5] */
   }
+
   @if $fortitude-range-input-background-color {
     background-color: $fortitude-range-input-background-color;
   }
+
+  @if $is-full {
+    @include fortitude-input--full;
+  }
 }
 
-@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.
-  **/
+@mixin fortitude-color-input($extensions: ()) {
+  $is-full: fortitude-contains($extensions, full);
+  $is-pill: fortitude-contains($extensions, pill);
+
+  @include fortitude-input($extensions);
+
   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 {
+  } @else {
     border: 0;
-    /* [5] */
   }
-  @if $fortitude-color-input-border-radius != 0 {
+
+  @if $is-pill {
+    @include fortitude-input--pill;
+  } @else if $fortitude-color-input-border-radius != 0 {
     border-radius: $fortitude-color-input-border-radius;
-  }
-  @else {
+  } @else {
     border-radius: 0;
-    /* [5] */
   }
+
   @if $fortitude-color-input-background-color {
     background-color: $fortitude-color-input-background-color;
   }
+
+  @if $is-full {
+    @include fortitude-input--full;
+  }
+
   &::placeholder {
     color: $fortitude-color-input-placeholder-color;
   }
@@ -340,5 +338,25 @@ $fortitude-global-border-box: false !default;
 }
 
 @mixin fortitude-input--pill {
-  border-radius: 10rem;
+  border-radius: 100rem;
 }
+
+
+@mixin fortitude-input__target {
+  background-color: transparent;
+  border: 0;
+  border-radius: 0;
+  padding: 0;
+  margin: 0;
+  outline: 0;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+}