fortitude-sass 0.6.5 → 0.7.0

data/app/assets/stylesheets/fortitude/theme.scss

@@ -0,0 +1,9 @@
+@import "../fortitude";
+@import "theme/settings/colors";
+@import "theme/base/page";
+@import "theme/extensions/badge";
+@import "theme/extensions/box";
+@import "theme/extensions/button";
+@import "theme/extensions/flashbar";
+@import "theme/extensions/navigationbar";
+@import "theme/extensions/wings";

data/app/assets/stylesheets/fortitude/tools/_functions.scss

@@ -10,22 +10,31 @@
 // Halve and double numbers, returning rounded integers. E.g.:
 //
 // .foo {
-//     padding: halve(3.2px);
+//     padding: fortitude-halve(3.2px);
 // }
 //
-@function quarter($value) {
+
+@function fortitude-tint($color, $percent){
+  @return mix(white, $color, $percent);
+}
+
+@function fortitude-shade($color, $percent){
+  @return mix(black, $color, $percent);
+}
+
+@function fortitude-quarter($value) {
   @return $value / 4;
 }
 
-@function halve($value) {
+@function fortitude-halve($value) {
   @return $value / 2;
 }
 
-@function double($value) {
+@function fortitude-double($value) {
   @return $value * 2;
 }
 
-@function quadruple($value) {
+@function fortitude-quadruple($value) {
   @return $value * 4;
 }
 
@@ -41,12 +50,12 @@
   @return if(fortitude-strip-unit($value) == 0, 0, $value);
 }
 
-@function fortitude-px-to-rem($value) {
-  @return fortitude-strip-unit($value) * 0.1rem;
+@function fortitude-px-to-rem($value, $conversion-unit: 0.1rem) {
+  @return fortitude-strip-unit($value) * $conversion-unit;
 }
 
-@function fortitude-rem-to-px($value) {
-  @return fortitude-strip-unit($value) * 10px;
+@function fortitude-rem-to-px($value, $conversion-unit: 10px) {
+  @return fortitude-strip-unit($value) * $conversion-unit;
 }
 
 @function fortitude-block-spacing-unit-height($block-height, $block-spacing-unit: $fortitude-base-spacing-unit) {
@@ -56,18 +65,18 @@
 
 @function fortitude-block-spacing-unit-delta($block-height, $block-spacing-unit: $fortitude-base-spacing-unit) {
   $block-spacing-unit-height: fortitude-block-spacing-unit-height($block-height, $block-spacing-unit);
-  $value: halve($block-spacing-unit-height - $block-height);
+  $value: fortitude-halve($block-spacing-unit-height - $block-height);
   @return fortitude-strip-unit-if-zero($value);
 }
 
 @function fortitude-block-negitive-padding($block-height, $block-border-width: 0rem, $block-spacing-unit: $fortitude-base-spacing-unit) {
-  $value: halve($block-height - $block-spacing-unit - double($block-border-width));
+  $value: fortitude-halve($block-height - $block-spacing-unit - fortitude-double($block-border-width));
   @return fortitude-strip-unit-if-zero($value);
 }
 
 @function fortitude-block-margin($block-height, $block-border-width: 0rem, $block-spacing-unit: $fortitude-base-spacing-unit) {
   $block-spacing-unit-height: fortitude-block-spacing-unit-height($block-height, $block-spacing-unit);
-  $value: halve($block-spacing-unit-height - $block-height);
+  $value: fortitude-halve($block-spacing-unit-height - $block-height);
 
   @if $value < 0 {
     $value: fortitude-block-negitive-padding($block-height, $block-border-width, $block-spacing-unit) + fortitude-block-spacing-unit-delta($block-height, $block-spacing-unit);
@@ -77,7 +86,7 @@
 }
 
 @function fortitude-block-padding($block-height, $block-border-width: 0rem, $block-line-height: $fortitude-base-line-height) {
-  $value: halve($block-height - $block-line-height - double($block-border-width));
+  $value: fortitude-halve($block-height - $block-line-height - fortitude-double($block-border-width));
   @return fortitude-strip-unit-if-zero($value);
 }
 

data/app/assets/stylesheets/fortitude/tools/_mixins.scss

@@ -6,7 +6,6 @@
 // working with it, can make use of.
 
 // Predefine the variables below in order to alter and enable specific features.
-$fortitude-enable-classes: false !default;
 
 @mixin fortitude-breakpoint($alias, $breakpoints: $fortitude-class-breakpoints) {
   $query: fortitude-query(map-get($breakpoints, $alias));
@@ -39,9 +38,9 @@ $fortitude-enable-classes: false !default;
   }
 }
 
-@mixin fortitude-font-size($font-size, $line-height: true, $line-height: $fortitude-base-line-height) {
+@mixin fortitude-font-size($font-size, $enable-line-height: true, $line-height: $fortitude-base-line-height) {
   font-size: $font-size;
-  @if $line-height == true {
+  @if $enable-line-height == true {
     line-height: ceil($font-size / $line-height) * $line-height;
   }
 }
@@ -53,3 +52,11 @@ $fortitude-enable-classes: false !default;
     clear: both;
   }
 }
+
+@mixin fortitude-appearance($appearance){
+  -webkit-appearance: $appearance;
+  -moz-appearance: $appearance;
+  -ms-appearance: $appearance;
+  -o-appearance: $appearance;
+  appearance: $appearance;
+}

data/app/assets/stylesheets/fortitude/trumps/_responsive-column.scss

@@ -2,7 +2,7 @@ $fortitude-responsive-column-total: 12 !default;
 
 @include fortitude-breakpoint-classes {
   @for $index from 0 through $fortitude-responsive-column-total {
-    $value: percentage($index / $fortitude-responsive-column-total) !important;
+    $value: fortitude-strip-unit-if-zero(percentage($index / $fortitude-responsive-column-total)) !important;
 
     &-#{$index}of#{$fortitude-responsive-column-total} {
       width: $value;

data/app/assets/stylesheets/fortitude/trumps/_responsive-line-height.scss

@@ -3,7 +3,7 @@ $fortitude-responsive-line-height-unit-total: 2 !default;
 @include fortitude-breakpoint-classes {
   @for $index from 0 through $fortitude-responsive-line-height-unit-total {
     $value: fortitude-strip-unit-if-zero($fortitude-base-line-height * $index) !important;
-    $value-and-half: fortitude-strip-unit-if-zero($fortitude-base-line-height * $index + halve($fortitude-base-line-height)) !important;
+    $value-and-half: fortitude-strip-unit-if-zero($fortitude-base-line-height * $index + fortitude-halve($fortitude-base-line-height)) !important;
 
     &-inset#{$index} {
       line-height: $value;

data/app/assets/stylesheets/fortitude/trumps/_responsive-margin.scss

@@ -4,7 +4,7 @@ $fortitude-responsive-negative-margin-unit-total: 10 !default;
 @include fortitude-breakpoint-classes {
   @for $index from 0 through $fortitude-responsive-margin-unit-total {
     $value: fortitude-strip-unit-if-zero($fortitude-base-spacing-unit * $index) !important;
-    $value-and-half: fortitude-strip-unit-if-zero($fortitude-base-spacing-unit * $index + halve($fortitude-base-spacing-unit)) !important;
+    $value-and-half: fortitude-strip-unit-if-zero($fortitude-base-spacing-unit * $index + fortitude-halve($fortitude-base-spacing-unit)) !important;
 
     &-mt#{$index},
     &-m#{$index},
@@ -56,8 +56,8 @@ $fortitude-responsive-negative-margin-unit-total: 10 !default;
   }
 
   @for $index from 0 through $fortitude-responsive-negative-margin-unit-total {
-    $value: -($fortitude-base-spacing-unit * $index) !important;
-    $value-and-half: -($fortitude-base-spacing-unit * $index + halve($fortitude-base-spacing-unit)) !important;
+    $value: fortitude-strip-unit-if-zero(-($fortitude-base-spacing-unit * $index)) !important;
+    $value-and-half: fortitude-strip-unit-if-zero(-($fortitude-base-spacing-unit * $index + fortitude-halve($fortitude-base-spacing-unit))) !important;
 
     &-mt-#{$index},
     &-m-#{$index},

data/app/assets/stylesheets/fortitude/trumps/_responsive-padding.scss

@@ -3,7 +3,7 @@ $fortitude-responsive-padding-unit-total: 10 !default;
 @include fortitude-breakpoint-classes {
   @for $index from 0 through $fortitude-responsive-padding-unit-total {
     $value: fortitude-strip-unit-if-zero($fortitude-base-spacing-unit * $index) !important;
-    $value-and-half: fortitude-strip-unit-if-zero($fortitude-base-spacing-unit * $index + halve($fortitude-base-spacing-unit)) !important;
+    $value-and-half: fortitude-strip-unit-if-zero($fortitude-base-spacing-unit * $index + fortitude-halve($fortitude-base-spacing-unit)) !important;
 
     &-pt#{$index},
     &-p#{$index},

data/app/assets/stylesheets/fortitude.scss

@@ -7,6 +7,7 @@
 @import "fortitude/api/blocks/box";
 @import "fortitude/api/blocks/button";
 @import "fortitude/api/blocks/container";
+@import "fortitude/api/blocks/dropdown";
 @import "fortitude/api/blocks/flag";
 @import "fortitude/api/blocks/flashbar";
 @import "fortitude/api/blocks/fluid-container";
@@ -39,6 +40,7 @@
 @import "fortitude/blocks/box";
 @import "fortitude/blocks/button";
 @import "fortitude/blocks/container";
+@import "fortitude/blocks/dropdown";
 @import "fortitude/blocks/flag";
 @import "fortitude/blocks/flashbar";
 @import "fortitude/blocks/fluid-container";

data/bower.json

@@ -1,7 +1,7 @@
 {
   "name": "fortitude-sass",
   "homepage": "http://fortitude.io/",
-  "version": "0.6.5",
+  "version": "0.7.0",
   "main": [
     "app/assets/stylesheets/fortitude/tools/_functions.scss",
     "app/assets/stylesheets/fortitude/tools/_mixins.scss",

data/jasmine/fixtures/animations.css

@@ -0,0 +1,85 @@
+.animated {
+  -webkit-animation-duration: 0.1s;
+          animation-duration: 0.1s;
+  -webkit-animation-fill-mode: both;
+          animation-fill-mode: both;
+}
+
+.fadeIn {
+  -webkit-animation-name: fadeIn;
+          animation-name: fadeIn;
+}
+
+@-webkit-keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opactiy: 1;
+  }
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opactiy: 1;
+  }
+}
+@-webkit-keyframes fadeOut {
+  0% {
+    opactiy: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+.fadeOut {
+  -webkit-animation-name: fadeOut;
+          animation-name: fadeOut;
+}
+
+@-webkit-keyframes fadeOut {
+  0% {
+    opactiy: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes fadeOut {
+  0% {
+    opactiy: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+.grow {
+  -webkit-animation-name: grow;
+          animation-name: grow;
+}
+
+@-webkit-keyframes grow {
+  0% {
+    width: 1px;
+  }
+  100% {
+    width: 100px;
+  }
+}
+
+@keyframes grow {
+  0% {
+    width: 1px;
+  }
+  100% {
+    width: 100px;
+  }
+}
+
+.tiny { width: 1px; }

data/jasmine/fixtures/dropdownFixture.html

@@ -0,0 +1,91 @@
+<div class="dropdown" data-ft-dropdown="menu" id="dropdown-one">
+  <input type="checkbox" class="dropdown__toggle">
+  
+  <div class="dropdown__text">
+    More ▾
+  </div>
+  
+  <div class="dropdown__text dropdown__text--is-checked">
+    Less ▴
+  </div>
+  
+  <div class="dropdown__navigation">
+    <ul>
+      <li>Item One</li>
+      <li>Item Two</li>
+      <li>Item Three</li>
+    </ul>
+  </div>
+</div>
+
+<div class="dropdown" data-ft-dropdown="menu" id="dropdown-two">
+  <input type="checkbox" class="dropdown__toggle">
+  
+  <div class="dropdown__text">
+    More ▾
+  </div>
+  
+  <div class="dropdown__text dropdown__text--is-checked">
+    Less ▴
+  </div>
+  
+  <ul class="dropdown__navigation">
+    <li>Item One</li>
+    <li>Item Two</li>
+    <li>Item Three</li>
+  </ul>
+</div>
+
+<div class="dropdown" id="dropdown-three">
+  <input type="checkbox" class="dropdown__toggle">
+  
+  <div class="dropdown__text">
+    More ▾
+  </div>
+  
+  <div class="dropdown__text dropdown__text--is-checked">
+    Less ▴
+  </div>
+  
+  <ul class="dropdown__navigation">
+    <li>Item One</li>
+    <li>Item Two</li>
+    <li>Item Three</li>
+  </ul>
+</div>
+
+<div class="dropdown" data-ft-dropdown="other-menu" id="dropdown-four">
+  <input type="checkbox" class="dropdown__toggle">
+  
+  <div class="dropdown__text">
+    More ▾
+  </div>
+  
+  <div class="dropdown__text dropdown__text--is-checked">
+    Less ▴
+  </div>
+  
+  <ul class="dropdown__navigation">
+    <li>Item One</li>
+    <li>Item Two</li>
+    <li>Item Three</li>
+  </ul>
+</div>
+
+<div class="dropdown" data-ft-dropdown="other-menu" id="dropdown-five">
+  <input type="checkbox" class="dropdown__toggle">
+  
+  <div class="dropdown__text">
+    More ▾
+  </div>
+  
+  <div class="dropdown__text dropdown__text--is-checked">
+    Less ▴
+  </div>
+  
+  <ul class="dropdown__navigation">
+    <li>Item One</li>
+    <li>Item Two</li>
+    <li>Item Three</li>
+  </ul>
+</div>

data/jasmine/fixtures/flashbarFixture.html

@@ -0,0 +1,6 @@
+<div class="flashbar">
+  Some flashbar text
+  <button type="button" class="flashbar__close">
+    &times;
+  </button>
+</div>

data/jasmine/fixtures/getTargetFixture.html

@@ -0,0 +1,11 @@
+<div id="without-pound" data-ft-example="target-id">
+</div>
+
+<div id="with-pound" data-ft-example="target-id">
+</div>
+
+<div id="missing-field">
+</div>
+
+<div id="target-id">
+</div>

data/jasmine/fixtures/measureScrollBarFixture.html

@@ -0,0 +1 @@
+<div style="height: 10000px;"></div>

data/jasmine/fixtures/modalFixture.html

@@ -0,0 +1,20 @@
+<div class="modal" id="example-modal">
+  <div class="modal__content">
+    <div class="box">
+      <div class="layout">
+        <div class="layout__item.xs-12of12">
+          Some modal content in a layout
+
+          <button type="button" data-ft-modal-close="example-modal">
+            &times;
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="shade">
+</div>
+
+<button type="button" data-ft-modal="example-modal"></button>

data/jasmine/fixtures/navigationbarFixture.html

@@ -0,0 +1,20 @@
+<nav class="navigationbar">
+  <div class="fluid-container">
+    <div class="navigationbar__header">
+      <a href="javascript:void(0);" class="navigationbar__header__logo">
+        Brand Name
+      </a>
+    </div>
+
+    <div class="navigationbar__toggle">
+      <input type="checkbox" class="navigationbar__toggle__helper" />
+    </div>
+
+    <ul class="navigationbar__navigation">
+      <li class="navigationbar__item">Item 1</li>
+      <li class="navigationbar__item">Item 2</li>
+      <li class="navigationbar__item">Item 3</li>
+    </ul>
+  </div>
+</nav>
+<div class="shade"></div>