fortitude-sass 0.6.1 → 0.6.3

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

@@ -2,8 +2,14 @@
     #TABS
 \*------------------------------------*/
 
-@mixin fortitude-tabs__target {
-  display: none;
+@mixin fortitude-tabs__target($extensions: ()) {
+  $is-active: fortitude-contains($extensions, active);
+
+  @if $is-active {
+    @include fortitude-tabs__target--is-active;
+  } @else {
+    display: none;
+  }
 }
 
 @mixin fortitude-tabs__target--is-active {

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

@@ -1 +0,0 @@
-

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

@@ -14,9 +14,21 @@ $fortitude-tooltip-padding-vertical: $fortitude-tooltip-padding !default;
 $fortitude-tooltip-padding-horizontal: $fortitude-tooltip-padding !default;
 $fortitude-tooltip-min-height: $fortitude-tooltip-line-height + $fortitude-tooltip-padding * 2 !default;
 
-@mixin fortitude-tooltip {
+@mixin fortitude-tooltip($extensions: ()) {
+  $is-top: fortitude-contains($extensions, top);
+  $is-right: fortitude-contains($extensions, right);
+  $is-bottom: fortitude-contains($extensions, bottom);
+  $is-left: fortitude-contains($extensions, left);
+
   position: relative;
   cursor: pointer;
+
+  &:hover::before,
+  &:hover::after {
+    visibility: visible;
+    opacity: 1;
+  }
+
   &::before,
   &::after {
     position: absolute;
@@ -26,17 +38,14 @@ $fortitude-tooltip-min-height: $fortitude-tooltip-line-height + $fortitude-toolt
     transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out, transform 0.15s cubic-bezier(0.71, 1.7, 0.77, 1.24);
     pointer-events: none;
   }
-  &:hover::before,
-  &:hover::after {
-    visibility: visible;
-    opacity: 1;
-  }
+
   &::before {
     z-index: 1001;
     border: $fortitude-tooltip-arrow-size solid transparent;
     background: transparent;
     content: "";
   }
+
   &::after {
     z-index: 1000;
     padding: $fortitude-tooltip-padding-vertical $fortitude-tooltip-padding-horizontal;
@@ -48,36 +57,57 @@ $fortitude-tooltip-min-height: $fortitude-tooltip-line-height + $fortitude-toolt
     font-size: $fortitude-tooltip-font-size;
     line-height: $fortitude-tooltip-line-height;
   }
+
+  @if $is-top {
+    @include fortitude-tooltip--top;
+  } @else if $is-right {
+    @include fortitude-tooltip--right;
+  } @else if $is-bottom {
+    @include fortitude-tooltip--bottom;
+  } @else if $is-left {
+    @include fortitude-tooltip--left;
+  }
 }
 
 @mixin fortitude-tooltip--top {
+  &:hover::before,
+  &:hover::after,
+  &:focus::before,
+  &:focus::after {
+    transform: translateY(-($fortitude-base-spacing-unit / 4 + $fortitude-tooltip-arrow-size));
+  }
+
   &::before,
   &::after {
     bottom: 100%;
     left: 50%;
   }
+
   &::before {
     margin-left: -$fortitude-tooltip-arrow-size;
     margin-bottom: -($fortitude-tooltip-arrow-size * 2);
     border-top-color: $fortitude-tooltip-background-color;
   }
+
   &::after {
     margin-left: -($fortitude-tooltip-width / 2);
   }
+}
+
+@mixin fortitude-tooltip--right {
   &:hover::before,
   &:hover::after,
   &:focus::before,
   &:focus::after {
-    transform: translateY(-($fortitude-base-spacing-unit / 4 + $fortitude-tooltip-arrow-size));
+    transform: translateX($fortitude-base-spacing-unit / 4 + $fortitude-tooltip-arrow-size);
   }
-}
 
-@mixin fortitude-tooltip--right {
   &::before,
   &::after {
     bottom: 50%;
     left: 100%;
   }
+
   &::before {
     top: $fortitude-tooltip-padding-vertical - ($fortitude-tooltip-arrow-size / 2 + $fortitude-tooltip-padding-vertical / 2);
     margin-bottom: 0;
@@ -85,49 +115,55 @@ $fortitude-tooltip-min-height: $fortitude-tooltip-line-height + $fortitude-toolt
     border-top-color: transparent;
     border-right-color: $fortitude-tooltip-background-color;
   }
+
   &::after {
     margin-left: 0;
     margin-bottom: -($fortitude-tooltip-padding-vertical + 0.7rem);
   }
+}
+
+@mixin fortitude-tooltip--bottom {
   &:hover::before,
   &:hover::after,
   &:focus::before,
   &:focus::after {
-    transform: translateX($fortitude-base-spacing-unit / 4 + $fortitude-tooltip-arrow-size);
+    transform: translateY($fortitude-base-spacing-unit / 4 + $fortitude-tooltip-arrow-size);
   }
-}
 
-@mixin fortitude-tooltip--bottom {
   &::before,
   &::after {
     top: 100%;
     bottom: auto;
     left: 50%;
   }
+
   &::before {
     margin-top: -($fortitude-tooltip-arrow-size * 2);
     margin-bottom: 0;
     border-top-color: transparent;
     border-bottom-color: $fortitude-tooltip-background-color;
   }
+
   &::after {
     margin-left: -($fortitude-tooltip-width / 2);
   }
+}
+
+@mixin fortitude-tooltip--left {
   &:hover::before,
   &:hover::after,
   &:focus::before,
   &:focus::after {
-    transform: translateY($fortitude-base-spacing-unit / 4 + $fortitude-tooltip-arrow-size);
+    transform: translateX(-($fortitude-base-spacing-unit / 4 + $fortitude-tooltip-arrow-size));
   }
-}
 
-@mixin fortitude-tooltip--left {
   &::before,
   &::after {
     right: 100%;
     bottom: 50%;
     left: auto;
   }
+
   &::before {
     top: $fortitude-tooltip-padding-vertical - ($fortitude-tooltip-arrow-size / 2 + $fortitude-tooltip-padding-vertical / 2);
     margin-left: 0;
@@ -136,14 +172,9 @@ $fortitude-tooltip-min-height: $fortitude-tooltip-line-height + $fortitude-toolt
     border-top-color: transparent;
     border-left-color: $fortitude-tooltip-background-color;
   }
+
   &::after {
     margin-left: 0;
     margin-bottom: -($fortitude-tooltip-padding-vertical + 0.7rem);
   }
-  &:hover::before,
-  &:hover::after,
-  &:focus::before,
-  &:focus::after {
-    transform: translateX(-($fortitude-base-spacing-unit / 4 + $fortitude-tooltip-arrow-size));
-  }
 }

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

@@ -2,16 +2,9 @@
     #UI-LIST
 \*------------------------------------*/
 
-/**
- * The UI list object creates blocky list items with a keyline separator out of
- * a `ul` or `ol`.
-**/
-
-// Predefine the variables below in order to alter and enable specific features.
-$fortitude-ui-list-padding: $fortitude-base-spacing-unit !default;
-$fortitude-ui-list-padding--small: halve($fortitude-ui-list-padding) !default;
-$fortitude-ui-list-padding--large: double($fortitude-ui-list-padding) !default;
-
+$fortitude-ui-list-padding--default: $fortitude-base-spacing-unit !default;
+$fortitude-ui-list-padding--small: halve($fortitude-ui-list-padding--default) !default;
+$fortitude-ui-list-padding--large: double($fortitude-ui-list-padding--default) !default;
 $fortitude-ui-list-border-width: 0.1rem !default;
 $fortitude-ui-list-border-style: solid !default;
 $fortitude-ui-list-border-color: #ccc !default;
@@ -19,7 +12,7 @@ $fortitude-ui-list-border-color: #ccc !default;
 $fortitude-enable-ui-list--small: false !default;
 $fortitude-enable-ui-list--large: false !default;
 
-@mixin fortitude-ui-list {
+@mixin fortitude-ui-list($extensions: ()) {
   border: 0 $fortitude-ui-list-border-style $fortitude-ui-list-border-color;
   margin: 0;
   padding: 0;
@@ -27,24 +20,26 @@ $fortitude-enable-ui-list--large: false !default;
   border-top-width: $fortitude-ui-list-border-width;
 }
 
-@mixin fortitude-ui-list__item($fortitude-extension: null) {
+@mixin fortitude-ui-list__item($extensions: ()) {
+  $is-small: fortitude-contains($extensions, small);
+  $is-large: fortitude-contains($extensions, large);
+
   border: 0 $fortitude-ui-list-border-style $fortitude-ui-list-border-color;
   border-bottom-width: $fortitude-ui-list-border-width;
-  @if $fortitude-extension == small {
-    @include fortitude-ui-list--small__item;
-  }
-  @else if $fortitude-extension == large {
-    @include fortitude-ui-list--large__item;
-  }
-  @else {
-    padding: $fortitude-ui-list-padding;
+
+  @if $is-small {
+    @include fortitude-ui-list__item--small;
+  } @else if $is-large {
+    @include fortitude-ui-list__item--small;
+  } @else {
+    padding: $fortitude-ui-list-padding--default;
   }
 }
 
-@mixin fortitude-ui-list--small__item {
+@mixin fortitude-ui-list__item--small {
   padding: $fortitude-ui-list-padding--small;
 }
 
-@mixin fortitude-ui-list--large__item {
+@mixin fortitude-ui-list__item--large {
   padding: $fortitude-ui-list-padding--large;
 }

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

@@ -1 +0,0 @@
-

data/app/assets/stylesheets/fortitude/base/_lists.scss

@@ -2,13 +2,6 @@
     #LISTS
 \*------------------------------------*/
 
-/**
- * Remove extra vertical spacing when nesting lists.
-**/
-li {
-  > ul,
-  > ol {
-    margin-bottom: 0;
-    margin-left: $fortitude-base-spacing-unit;
-  }
+ul, ol {
+  margin-left: $fortitude-base-spacing-unit;
 }

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

@@ -1,7 +1,3 @@
-@mixin fortitude-box--rounded {
-  border-radius: $fortitude-box-border-radius--rounded;
-}
-
 .#{$fortitude-namespace}box {
   @include fortitude-box;
 }

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

@@ -13,104 +13,112 @@
   @include fortitude-flag__object;
 }
 
+.#{$fortitude-namespace}flag__object > img,
+.#{$fortitude-namespace}flag__object > video {
+  @include fortitude-flag__object__content;
+}
+
 .#{$fortitude-namespace}flag__body {
   @include fortitude-flag__body;
 }
 
-@if $fortitude-enable-flag--small == true {
+@if $fortitude-enable-flag--top == true {
   /**
-   * Small flags.
+   * Vertically top aligned flag objects.
   **/
-  .#{$fortitude-namespace}flag--small {
-    > .#{$fortitude-namespace}flag__object {
-      @include fortitude-flag--small__object;
+  .#{$fortitude-namespace}flag--top {
+    .#{$fortitude-namespace}flag__object {
+      @include fortitude-flag__object--top;
     }
-    @if $fortitude-enable-flag--rev == true {
-      /**
-       * Small reversed flags.
-      **/
-      &.#{$fortitude-namespace}flag--rev {
-        > .#{$fortitude-namespace}flag__object {
-          @include fortitude-flag--small--rev__object;
-        }
-      }
+    .#{$fortitude-namespace}flag__body {
+      @include fortitude-flag__body--top;
     }
   }
 }
 
-@if $fortitude-enable-flag--large == true {
+@if $fortitude-enable-flag--bottom == true {
   /**
-   * Large flags.
+   * Vertically bottom aligned flag objects.
   **/
-  .#{$fortitude-namespace}flag--large {
-    > .#{$fortitude-namespace}flag__object {
-      @include fortitude-flag--large__object;
+  .#{$fortitude-namespace}flag--bottom {
+    .#{$fortitude-namespace}flag__object {
+      @include fortitude-flag__object--bottom;
     }
-    @if $fortitude-enable-flag--rev == true {
-      /**
-       * Large reversed flags.
-      **/
-      &.#{$fortitude-namespace}flag--rev {
-        > .#{$fortitude-namespace}flag__object {
-          @include fortitude-flag--large--rev__object;
-        }
-      }
+    .#{$fortitude-namespace}flag__body {
+      @include fortitude-flag__body--bottom;
     }
   }
 }
 
-@if $fortitude-enable-flag--rev == true {
+@if $fortitude-enable-flag--flush == true {
   /**
-   * Reversed flag objects have their image-content to the right, and text-content
-   * to the left.
+   * Flush flag objects have no space between the image- and text-content.
   **/
-  .#{$fortitude-namespace}flag--rev {
-    @include fortitude-flag--rev;
+  .#{$fortitude-namespace}flag--flush {
     > .#{$fortitude-namespace}flag__object {
-      @include fortitude-flag--rev__object;
-    }
-    > .#{$fortitude-namespace}flag__body {
-      @include fortitude-flag--rev__body;
+      @include fortitude-flag__object--flush;
     }
   }
 }
 
-@if $fortitude-enable-flag--flush == true {
+@if $fortitude-enable-flag--small == true {
   /**
-   * Flush flag objects have no space between the image- and text-content.
+   * Small flags.
   **/
-  .#{$fortitude-namespace}flag--flush {
+  .#{$fortitude-namespace}flag--small {
     > .#{$fortitude-namespace}flag__object {
-      @include fortitude-flag--flush__object;
+      @include fortitude-flag__object--small;
     }
   }
 }
 
-@if $fortitude-enable-flag--top == true {
+@if $fortitude-enable-flag--large == true {
   /**
-   * Vertically top aligned flag objects.
+   * Large flags.
   **/
-  .#{$fortitude-namespace}flag--top {
-    .#{$fortitude-namespace}flag__object {
-      @include fortitude-flag--top__object;
-    }
-    .#{$fortitude-namespace}flag__body {
-      @include fortitude-flag--top__body;
+  .#{$fortitude-namespace}flag--large {
+    > .#{$fortitude-namespace}flag__object {
+      @include fortitude-flag__object--large;
     }
   }
 }
 
-@if $fortitude-enable-flag--bottom == true {
+@if $fortitude-enable-flag--rev == true {
   /**
-   * Vertically bottom aligned flag objects.
+   * Reversed flag objects have their image-content to the right, and text-content
+   * to the left.
   **/
-  .#{$fortitude-namespace}flag--bottom {
-    .#{$fortitude-namespace}flag__object {
-      @include fortitude-flag--bottom__object;
+  .#{$fortitude-namespace}flag--rev {
+    @include fortitude-flag--rev;
+    > .#{$fortitude-namespace}flag__object {
+      @include fortitude-flag__object--rev;
     }
-    .#{$fortitude-namespace}flag__body {
-      @include fortitude-flag--bottom__body;
+    > .#{$fortitude-namespace}flag__body {
+      @include fortitude-flag__body--rev;
     }
+
+    @if $fortitude-enable-flag--small == true {
+      /**
+       * Reversed Small flags.
+      **/
+      &.#{$fortitude-namespace}flag--small {
+        > .#{$fortitude-namespace}flag__object {
+          @include fortitude-flag__object--rev--small;
+        }
+      }
+    }
+
+    @if $fortitude-enable-flag--large == true {
+      /**
+       * Large reversed flags.
+      **/
+      &.#{$fortitude-namespace}flag--large {
+        > .#{$fortitude-namespace}flag__object {
+          @include fortitude-flag__object--rev--large;
+        }
+      }
+    }
+
   }
 }
 
@@ -118,15 +126,15 @@
   .#{$fortitude-namespace}flag--responsive {
     @include fortitude-flag--responsive {
       > .#{$fortitude-namespace}flag__object {
-        @include fortitude-flag--responsive__object;
+        @include fortitude-flag__object--responsive;
       }
       > .#{$fortitude-namespace}flag__body {
-        @include fortitude-flag--responsive__body;
+        @include fortitude-flag__body--responsive;
       }
       @if $fortitude-enable-flag--small == true {
         &.#{$fortitude-namespace}flag--small {
           > .#{$fortitude-namespace}flag__object {
-            @include fortitude-flag--responsive--small__object;
+            @include fortitude-flag__object--responsive--small;
           }
         }
       }