titon-toolkit 1.4.0 → 1.4.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: f7acf78b6a86370cfa956707f66d5ae3904d1e8b
-  data.tar.gz: e708ce5bddbdfe2f928e3523abaf996e37b9e399
+  metadata.gz: 195a933c7b9058f27df45b0d592f37a9932f5fd4
+  data.tar.gz: b58d6d2050d5a15b8213f1205145852c30b9ec98
 SHA512:
-  metadata.gz: d1f61eb435a1884c57cb8d1dc312101e2c21a34d68a04f2c28ff5b38cf98d9b5973f9e1cd0fc0396b56f82c35b8ca845f0fdea8d6c0d0a9752622cac2f80def8
-  data.tar.gz: 7c0ef03b143f15bf79b01161e80e44fc9572cd3b09bdd9649bc9912d3a21d2d15a9da6277a4d80f4b07560dba68afdf983a0c9dc73ac921a7221efd0c58d3c9b
+  metadata.gz: c26c3be835025c74083bc97cd9574a120f252f44ca84789692199232512db88f159b3278c1242163adb3ba9e7ca5c4b0b49f096279fe46c915c5b29b4b74f7ec
+  data.tar.gz: 136fa057c8c1c8c5b041a9cf01f878571c1bbf3c0ca92e31140f98d76320ae8416039c13be5829b8560a90796299d550ecc5baff2a5d5ec506802a7c5ffd7a5d

data/changelog.md

@@ -2,6 +2,19 @@
 
 Older versions can be found in the documentation changelogs.
 
+## 1.4.1 ##
+* Added `opacity: 0` to `.hide` for easier fade transitions
+* Improved fade transitions within all components
+* Fixed a bug with swipe not working on Android
+* Fixed a bug with certain elements not showing in iOS
+* OffCanvas
+    * Added `primary` and `secondary` properties
+    * Added `stopScroll` option
+* Popover, Tooltip
+    * Fixed a bug where the arrow was being removed before the transition ended
+* Type Ahead
+    * Added `$typeAhead-transition`
+
 ## 1.4.0 ##
 This minor release includes 3 new components, a new `destroy()` method,
 a cleanup of element and event options, expanded documentation, and a handful of optimization improvements.

data/readme.md

@@ -6,7 +6,7 @@
                           \/_/  \/_____/\/_____/\/_____/\/_/\/_/ \/_/  \/_/
 ```
 
-# Toolkit v1.4.0 #
+# Toolkit v1.4.1 #
 
 Titon Toolkit is a collection of very powerful user interface components and utility classes
 for the responsive, mobile, and modern web. Each component represents encapsulated HTML, CSS,

data/roadmap.md

@@ -26,6 +26,7 @@ All releases will contain bug fixing and polishing for current features.
 * Updated to Sass 3.3 (maps for settings).
 * Refactor events for before/after conditions.
 * RTL support.
+* Add debug option.
 * Take Google fundamentals into consideration - https://developers.google.com/web/fundamentals/
 
 ### 3.0.0 ###

data/scss/toolkit/_common.scss

@@ -110,6 +110,7 @@ $showcase-transition: $default-transition !default;
 $switch-transition: $default-transition !default;
 $toast-transition: $default-transition !default;
 $tooltip-transition: $default-transition !default;
+$typeAhead-transition: $default-transition !default;
 
 //-------------------- Z Index --------------------//
 

data/scss/toolkit/components/drop.scss

@@ -8,7 +8,6 @@
 
 .#{$vendor-prefix}drop {
     @include reset-list;
-    display: none;
     text-align: left;
     position: absolute;
     top: 100%;
@@ -18,7 +17,7 @@
     z-index: $drop-zindex;
     opacity: 0;
     visibility: hidden;
-    transition: opacity $drop-transition, visibility $drop-transition;
+    transition: left $drop-transition, opacity $drop-transition, visibility $drop-transition;
 
     // Nested
     .#{$vendor-prefix}drop {
@@ -26,7 +25,6 @@
         top: 0;
         left: 90%;
         z-index: $drop-zindex + 1;
-        transition: left $drop-transition, opacity $drop-transition;
     }
 
     // Apply to self
@@ -61,11 +59,6 @@
             }
         }
     }
-
-    // Force display
-    &.show {
-        display: block;
-    }
 }
 
 .#{$vendor-prefix}drop-divider {

data/scss/toolkit/components/flyout.scss

@@ -48,7 +48,7 @@
         // Nested flyouts
         > .#{$vendor-prefix}flyout {
             left: 90%;
-            transition: left $flyout-transition, right $flyout-transition, opacity $flyout-transition;
+            transition: left $flyout-transition, right $flyout-transition, opacity $flyout-transition, visibility $flyout-transition;
 
             // Reverse menu to left side in case it goes outside the viewport
             // Will be set automatically from the Javascript layer

data/scss/toolkit/components/mask.scss

@@ -34,5 +34,5 @@
 
     // Fixes issues where mask does not display in iOS
     // Kind of hacky? Other solutions?
-    transform: translate3d(0, 0, 0);
+    -webkit-backface-visibility: hidden;
 }

data/scss/toolkit/components/modal.scss

@@ -12,11 +12,13 @@
     left: 0;
     width: 100%;
     height: 100%;
+    opacity: 0;
+    visibility: hidden;
     z-index: $modal-zindex;
     overflow: auto;
-    -webkit-overflow-scrolling: touch;
-    visibility: hidden;
+    transition: opacity $modal-transition, visibility $modal-transition;
     pointer-events: none; // fall through to blackout
+    -webkit-overflow-scrolling: touch;
 
     &.is-loading {
         .#{$vendor-prefix}modal-close { display: none; }
@@ -45,6 +47,7 @@
     position: relative;
     margin: $margin;
     pointer-events: auto; // allow within modal
+    transition: transform $modal-transition;
 
     @include if-min($modal-mobile-breakpoint) {
         width: 50%;
@@ -78,17 +81,6 @@
 //-------------------- Animations --------------------//
 
 .#{$vendor-prefix}modal {
-    #{join-classes($modal-animation)} {
-        .#{$vendor-prefix}modal-outer {
-            opacity: 0;
-            transition: all $modal-transition;
-        }
-
-        &.show .#{$vendor-prefix}modal-outer {
-            opacity: 1;
-        }
-    }
-
     @if index($modal-animation, "from-above") {
         &.from-above {
             .#{$vendor-prefix}modal-outer {

data/scss/toolkit/components/off-canvas.scss

@@ -7,13 +7,14 @@
 @import "../common";
 
 .#{$vendor-prefix}off-canvas {
-    visibility: visible;
     position: fixed;
     overflow: auto;
     top: 0;
     height: 100%;
     z-index: 1;
-    transition: transform $offCanvas-transition, visibility $offCanvas-transition;
+    opacity: 0;
+    visibility: hidden;
+    transition: transform $offCanvas-transition, opacity $offCanvas-transition, visibility $offCanvas-transition;
     -webkit-overflow-scrolling: touch;
 }
 

data/scss/toolkit/components/tabs.scss

@@ -23,7 +23,7 @@
     @include clear-fix;
 }
 
-// Display none on sections since visibility takes up DOM space
+// Add display none on sections since visibility takes up DOM space
 .#{$vendor-prefix}tabs-section.hide {
     display: none;
 }

data/scss/toolkit/components/toast.scss

@@ -87,6 +87,7 @@
     margin-top: 1rem;
     transition: opacity $toast-transition, visibility $toast-transition, transform $toast-transition;
     opacity: 0;
+    visibility: hidden;
 
     &.show { opacity: 1; }
     &:first-child { margin-top: 0; }

data/scss/toolkit/components/tooltip.scss

@@ -73,16 +73,16 @@ $tooltip-arrow-width-double: ($tooltip-arrow-width * 2);
 
 .#{$vendor-prefix}tooltip,
 .#{$vendor-prefix}popover {
+    transition: opacity $tooltip-transition, visibility $tooltip-transition, transform $tooltip-transition;
+
     @if index($popover-tooltip-animation, "fade") {
         &.fade {
             opacity: 0;
-            transition: opacity $tooltip-transition, visibility $tooltip-transition;
         }
     }
 
     @if index($popover-tooltip-animation, "from-above") {
         &.from-above {
-            transition: transform $tooltip-transition;
             transform: scale(1.2);
 
             &.show {
@@ -93,7 +93,6 @@ $tooltip-arrow-width-double: ($tooltip-arrow-width * 2);
 
     @if index($popover-tooltip-animation, "from-below") {
         &.from-below {
-            transition: transform $tooltip-transition;
             transform: scale(0.8);
 
             &.show {
@@ -104,7 +103,6 @@ $tooltip-arrow-width-double: ($tooltip-arrow-width * 2);
 
     @if index($popover-tooltip-animation, "flip-rotate") {
         &.flip-rotate {
-            transition: transform $tooltip-transition;
             transform: rotate(-15deg);
 
             &.show {

data/scss/toolkit/components/type-ahead.scss

@@ -13,7 +13,11 @@
     z-index: $typeAhead-zindex;
     opacity: 0;
     visibility: hidden;
-    transition: opacity 0.3s, visibility 0.3s;
+    transition: opacity $typeAhead-transition, visibility $typeAhead-transition;
+
+    // Fixes issues where menu does not display in iOS
+    // Kind of hacky? Other solutions?
+    -webkit-backface-visibility: hidden;
 
     ul {
         @include reset-list;

data/scss/toolkit/layout/base.scss

@@ -21,12 +21,12 @@
 
 // Animations
 .show { opacity: 1 !important; visibility: visible !important; }
-.hide { visibility: hidden !important; }
+.hide { opacity: 0 !important; visibility: hidden !important; }
 
 // Display
 .shown { display: block; }
 .hidden { display: none; }
-.no-scroll { overflow: hidden; }
+.no-scroll { overflow: hidden !important; }
 .no-transition { transition: none !important; }
 
 .sr-only {

data/version.md

@@ -1 +1 @@
-1.4.0
+1.4.1

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: titon-toolkit
 version: !ruby/object:Gem::Version
-  version: 1.4.0
+  version: 1.4.1
 platform: ruby
 authors:
 - Project Titon
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-05-01 00:00:00.000000000 Z
+date: 2014-05-06 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass