fortitude-sass 0.4.9 → 0.5.0

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

@@ -1,4 +1,4 @@
-.modal {
+.#{$fortitude-namespace}modal {
   position: fixed;
   top: 0;
   right: 0;
@@ -13,7 +13,7 @@
   overflow-scrolling: touch;
 }
 
-.modal__content {
+.#{$fortitude-namespace}modal__content {
   position: relative;
   width: auto;
   margin: halve($fortitude-base-spacing-unit);

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

@@ -1,55 +1,52 @@
 $fortitude-navigationbar-height: 4rem !default;
 
-.navigationbar {
+.#{$fortitude-namespace}navigationbar {
   position: relative;
   line-height: $fortitude-navigationbar-height;
   min-height: $fortitude-navigationbar-height;
 }
 
-.navigationbar__header {
+.#{$fortitude-namespace}navigationbar__header {
   float: left;
 }
 
-.navigationbar__header__logo {
+.#{$fortitude-namespace}navigationbar__header__logo {
   display: inline-block;
   margin-top: -0.1rem;
   vertical-align: middle;
 }
 
-.navigationbar__toggle {
+.#{$fortitude-namespace}navigationbar__toggle {
   float: right;
-  > .icon {
+  > .#{$fortitude-namespace}icon {
     display: none;
   }
 }
 
-.navigationbar__toggle__helper {
+.#{$fortitude-namespace}navigationbar__toggle__helper {
   display: none;
 }
 
-.navigationbar__navigation {
+.#{$fortitude-namespace}navigationbar__navigation {
   margin-right: -1rem;
-
-  .fluid-container & {
+  .#{$fortitude-namespace}fluid-container & {
     margin-right: 0;
   }
 }
 
-.navigationbar__item {
+.#{$fortitude-namespace}navigationbar__item {
   display: inline-block;
   position: relative;
-
-  &:hover .navigationbar__dropdown {
+  &:hover .#{$fortitude-namespace}navigationbar__dropdown {
     display: block;
   }
-
   a {
     display: block;
     padding: 0 1rem;
   }
 }
 
-.navigationbar__dropdown {
+.#{$fortitude-namespace}navigationbar__dropdown {
   display: none;
   position: absolute;
   right: 0;
@@ -58,46 +55,37 @@ $fortitude-navigationbar-height: 4rem !default;
 }
 
 @include fortitude-breakpoint(xs, $fortitude-breakpoints) {
-  .navigationbar__header {
+  .#{$fortitude-namespace}navigationbar__header {
     float: none;
   }
-
-  .navigationbar__header__logo {
+  .#{$fortitude-namespace}navigationbar__header__logo {
     padding-left: 2rem;
   }
-
-  .navigationbar__toggle {
+  .#{$fortitude-namespace}navigationbar__toggle {
     float: none;
-
-    > .icon {
+    > .#{$fortitude-namespace}icon {
       display: inline-block;
     }
   }
-
-  .navigationbar__toggle__helper {
+  .#{$fortitude-namespace}navigationbar__toggle__helper {
     display: inline-block;
   }
-
-  .navigationbar__dropdown {
+  .#{$fortitude-namespace}navigationbar__dropdown {
     display: block;
     position: static;
   }
-
-  .navigationbar__item {
+  .#{$fortitude-namespace}navigationbar__item {
     display: block;
   }
-
-  .navigationbar__toggle {
+  .#{$fortitude-namespace}navigationbar__toggle {
     @include fortitude-clearfix;
     margin-top: -$fortitude-navigationbar-height;
-
-    > .icon {
+    > .#{$fortitude-namespace}icon {
       float: right;
       display: block;
     }
   }
-
-  .navigationbar__toggle__helper {
+  .#{$fortitude-namespace}navigationbar__toggle__helper {
     float: right;
     position: relative;
     outline: 0;
@@ -105,29 +93,24 @@ $fortitude-navigationbar-height: 4rem !default;
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
-
-    + .navigationbar__navigation {
+    + .#{$fortitude-namespace}navigationbar__navigation {
       display: none;
       position: absolute;
       top: 100%;
       width: 100%;
     }
-
-    &:checked + .navigationbar__navigation {
+    &:checked + .#{$fortitude-namespace}navigationbar__navigation {
       display: block;
     }
   }
-
-  .navigationbar__navigation {
+  .#{$fortitude-namespace}navigationbar__navigation {
     clear: both;
     margin-right: 0;
   }
-
-  .navigationbar__item {
-    + .navigationbar__item {
+  .#{$fortitude-namespace}navigationbar__item {
+    + .#{$fortitude-namespace}navigationbar__item {
       margin-top: -0.1rem;
     }
-
     a {
       display: block;
       padding: 0 2rem;

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

@@ -1,22 +1,3 @@
-/*------------------------------------*\
-    #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;
-    }
-}
-
 .#{$fortitude-namespace}shade {
-    @include fortitude-shade;
-}
+  @include fortitude-shade;
+}

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

@@ -3,29 +3,19 @@
 \*------------------------------------*/
 
 // Predefine the variables below in order to alter and enable specific features.
-$fortitude-enable-table--fixed:     false !default;
-
-
-
-
+$fortitude-enable-table--fixed: false !default;
 
 .#{$fortitude-namespace}table,
 %#{$fortitude-namespace}table {
-    width: 100%;
+  width: 100%;
 }
 
-
-
-
-
-@if ($fortitude-enable-table--fixed == true) {
-
-    /**
-     * Force tables into having equal-width columns.
-     */
-    .#{$fortitude-namespace}table--fixed,
-    %#{$fortitude-namespace}table--fixed {
-        table-layout: fixed;
-    }
-
-}
+@if $fortitude-enable-table--fixed == true {
+  /**
+   * Force tables into having equal-width columns.
+  **/
+  .#{$fortitude-namespace}table--fixed,
+  %#{$fortitude-namespace}table--fixed {
+    table-layout: fixed;
+  }
+}

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

@@ -1,58 +1,15 @@
-/*------------------------------------*\
-    #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] */
+.#{$fortitude-namespace}tabs-navigation {
+  @include fortitude-tabs-navigation;
 }
 
-@mixin fortitude-tabs-navigation__item {
-    /**
-     * 1. Tables for layout!
-     */
-
-    display: table-cell; /* [1] */
+.#{$fortitude-namespace}tabs-navigation--fixed {
+  @include fortitude-tabs-navigation--fixed;
 }
 
-@mixin fortitude-tabs-navigation__link {
-    display: block;
+.#{$fortitude-namespace}tabs-navigation__item {
+  @include fortitude-tabs-navigation__item;
 }
 
-.#{$fortitude-namespace}tabs-navigation {
-    @include fortitude-tabs-navigation;
-
-    &--fixed {
-        @include fortitude-tabs-navigation--fixed;
-    }
+.#{$fortitude-namespace}tabs-navigation__link {
+  @include fortitude-tabs-navigation__link;
 }
-
-    .#{$fortitude-namespace}tabs-navigation__item {
-        @include fortitude-tabs-navigation__item;
-    }
-
-        .#{$fortitude-namespace}tabs-navigation__link {
-            @include fortitude-tabs-navigation__link;
-        }

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

@@ -1,19 +1,7 @@
-/*------------------------------------*\
-    #TABS
-\*------------------------------------*/
-
-@mixin fortitude-tabs__target {
-    display: none;
-}
-
-@mixin fortitude-tabs__target--is-active {
-    display: block;
-}
-
 .#{$fortitude-namespace}tabs__target {
   @include fortitude-tabs__target;
 }
 
 .#{$fortitude-namespace}tabs__target--is-active {
   @include fortitude-tabs__target--is-active;
-}
+}

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

@@ -3,25 +3,25 @@
 \*------------------------------------*/
 
 .#{$fortitude-namespace}text-italic {
-    font-style: italic;
+  font-style: italic;
 }
 
 .#{$fortitude-namespace}text-underline {
-    text-decoration: underline;
+  text-decoration: underline;
 }
 
 .#{$fortitude-namespace}text-line-through {
-    text-decoration: line-through;
+  text-decoration: line-through;
 }
 
 .#{$fortitude-namespace}text-lowercase {
-    text-transform: lowercase;
+  text-transform: lowercase;
 }
 
 .#{$fortitude-namespace}text-uppercase {
-    text-transform: uppercase;
+  text-transform: uppercase;
 }
 
 .#{$fortitude-namespace}text-capitalize {
-    text-transform: capitalize;
-}
+  text-transform: capitalize;
+}

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

@@ -1,173 +1,3 @@
-/*------------------------------------*\
-    #TOOLTIP
-\*------------------------------------*/
-
-$fortitude-tooltip-width:              18rem !default;
-$fortitude-tooltip-border-radius:      0.2rem !default;
-$fortitude-tooltip-arrow-size:         0.6rem !default;
-$fortitude-tooltip-color:              #ffffff !default;
-$fortitude-tooltip-background-color:   rgba(30,30,30, 0.9) !default;
-$fortitude-tooltip-padding:            0.8rem !default;
-$fortitude-tooltip-font-size:          1rem !default;
-$fortitude-tooltip-line-height:        1.4rem !default;
-$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 {
-  position: relative;
-  cursor: pointer;
-
-  &::before,
-  &::after {
-    position: absolute;
-    visibility: hidden;
-    opacity: 0;
-    transform: translate3d(0, 0, 0);
-    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;
-    width: $fortitude-tooltip-width;
-    background-color: $fortitude-tooltip-background-color;
-    border-radius: $fortitude-tooltip-border-radius;
-    color: $fortitude-tooltip-color;
-    content: attr(data-tooltip);
-    font-size: $fortitude-tooltip-font-size;
-    line-height: $fortitude-tooltip-line-height;
-  }
-}
-
-@mixin fortitude-tooltip--top {
-   &::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);
-  }
-
-  &:hover::before,
-  &:hover::after,
-  &:focus::before,
-  &:focus::after {
-    transform: translateY(-(($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;
-    margin-left: -($fortitude-tooltip-arrow-size * 2);
-    border-top-color: transparent;
-    border-right-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));
-  }
-}
-
-@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);
-  }
-
-  &:hover::before,
-  &:hover::after,
-  &:focus::before,
-  &:focus::after {
-    transform: translateY((($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;
-    margin-right: -($fortitude-tooltip-arrow-size * 2);
-    margin-bottom: 0;
-    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));
-  }
-}
-
 .#{$fortitude-namespace}tooltip {
   @include fortitude-tooltip;
 }
@@ -186,4 +16,4 @@ $fortitude-tooltip-min-height:         $fortitude-tooltip-line-height + ($fortit
 
 .#{$fortitude-namespace}tooltip--left {
   @include fortitude-tooltip--left;
-}
+}