titon-toolkit 1.3.2 → 1.4.0

data/scss/toolkit/components/divider.scss

@@ -0,0 +1,46 @@
+/**
+ * @copyright   2010-2014, The Titon Project
+ * @license     http://opensource.org/licenses/BSD-3-Clause
+ * @link        http://titon.io
+ */
+
+@import "../common";
+
+.#{$vendor-prefix}divider {
+    position: relative;
+    text-align: center;
+    margin: $margin 0;
+    user-select: none;
+    overflow: hidden;
+    clear: both;
+    min-height: 2px;
+
+    &:after,
+    &:before {
+        position: absolute;
+        content: " ";
+        width: 50%;
+        top: 50%;
+        margin-top: -1px;
+        border-top: 1px solid black(.1);
+        border-bottom: 1px solid white(.75);
+    }
+
+    &:before {
+        left: 0;
+        margin-left: -1.5rem;
+    }
+
+    &:after {
+        right: 0;
+        margin-right: -1.5rem;
+    }
+
+    // Collapse the middle when there is no content
+    &:empty {
+        &:before,
+        &:after {
+            margin: -1px 0 0 0 !important;
+        }
+    }
+}

data/scss/toolkit/components/drop.scss

@@ -1,6 +1,6 @@
 /**
- * @copyright   2010-2013, The Titon Project
- * @license     http://opensource.org/licenses/bsd-license.php
+ * @copyright   2010-2014, The Titon Project
+ * @license     http://opensource.org/licenses/BSD-3-Clause
  * @link        http://titon.io
  */
 
@@ -18,7 +18,7 @@
     z-index: $drop-zindex;
     opacity: 0;
     visibility: hidden;
-    transition: opacity $drop-transition;
+    transition: opacity $drop-transition, visibility $drop-transition;
 
     // Nested
     .#{$vendor-prefix}drop {

data/scss/toolkit/components/flyout.scss

@@ -1,6 +1,6 @@
 /**
- * @copyright   2010-2013, The Titon Project
- * @license     http://opensource.org/licenses/bsd-license.php
+ * @copyright   2010-2014, The Titon Project
+ * @license     http://opensource.org/licenses/BSD-3-Clause
  * @link        http://titon.io
  */
 
@@ -14,7 +14,7 @@
     opacity: 0;
     visibility: hidden;
     box-sizing: content-box; // required by MooTools for multi columns
-    transition: opacity $flyout-transition;
+    transition: opacity $flyout-transition, visibility $flyout-transition;
 
     ul {
         @include reset-list;

data/scss/toolkit/components/grid.scss

@@ -1,6 +1,6 @@
 /**
- * @copyright   2010-2013, The Titon Project
- * @license     http://opensource.org/licenses/bsd-license.php
+ * @copyright   2010-2014, The Titon Project
+ * @license     http://opensource.org/licenses/BSD-3-Clause
  * @link        http://titon.io
  */
 

data/scss/toolkit/components/icon.scss

@@ -1,6 +1,6 @@
 /**
- * @copyright   2010-2013, The Titon Project
- * @license     http://opensource.org/licenses/bsd-license.php
+ * @copyright   2010-2014, The Titon Project
+ * @license     http://opensource.org/licenses/BSD-3-Clause
  * @link        http://titon.io
  */
 

data/scss/toolkit/components/input-group.scss

@@ -1,6 +1,6 @@
 /**
- * @copyright   2010-2013, The Titon Project
- * @license     http://opensource.org/licenses/bsd-license.php
+ * @copyright   2010-2014, The Titon Project
+ * @license     http://opensource.org/licenses/BSD-3-Clause
  * @link        http://titon.io
  */
 

data/scss/toolkit/components/input.scss

@@ -1,6 +1,6 @@
 /**
- * @copyright   2010-2013, The Titon Project
- * @license     http://opensource.org/licenses/bsd-license.php
+ * @copyright   2010-2014, The Titon Project
+ * @license     http://opensource.org/licenses/BSD-3-Clause
  * @link        http://titon.io
  */
 

data/scss/toolkit/components/label.scss

@@ -1,6 +1,6 @@
 /**
- * @copyright   2010-2013, The Titon Project
- * @license     http://opensource.org/licenses/bsd-license.php
+ * @copyright   2010-2014, The Titon Project
+ * @license     http://opensource.org/licenses/BSD-3-Clause
  * @link        http://titon.io
  */
 

data/scss/toolkit/components/lazy-load.scss

@@ -1,6 +1,6 @@
 /**
- * @copyright   2010-2013, The Titon Project
- * @license     http://opensource.org/licenses/bsd-license.php
+ * @copyright   2010-2014, The Titon Project
+ * @license     http://opensource.org/licenses/BSD-3-Clause
  * @link        http://titon.io
  */
 

data/scss/toolkit/components/loader.scss

@@ -1,6 +1,6 @@
 /**
- * @copyright   2010-2013, The Titon Project
- * @license     http://opensource.org/licenses/bsd-license.php
+ * @copyright   2010-2014, The Titon Project
+ * @license     http://opensource.org/licenses/BSD-3-Clause
  * @link        http://titon.io
  */
 

data/scss/toolkit/components/mask.scss

@@ -1,6 +1,6 @@
 /**
- * @copyright   2010-2013, The Titon Project
- * @license     http://opensource.org/licenses/bsd-license.php
+ * @copyright   2010-2014, The Titon Project
+ * @license     http://opensource.org/licenses/BSD-3-Clause
  * @link        http://titon.io
  */
 
@@ -18,18 +18,21 @@
     background: black($mask-opacity);
     transition: all $mask-transition;
     color: #fff;
+    user-select: none;
 }
 
 .#{$vendor-prefix}mask-message {
     text-align: center;
     max-width: 80%;
-    opacity: 1;
-    transition: all $mask-transition;
     @include position-center;
 
     &:empty { display: none; }
 }
 
-.#{$vendor-prefix}maskable {
+.#{$vendor-prefix}mask-target {
     overflow: hidden;
+
+    // Fixes issues where mask does not display in iOS
+    // Kind of hacky? Other solutions?
+    transform: translate3d(0, 0, 0);
 }

data/scss/toolkit/components/matrix.scss

@@ -1,6 +1,6 @@
 /**
- * @copyright   2010-2013, The Titon Project
- * @license     http://opensource.org/licenses/bsd-license.php
+ * @copyright   2010-2014, The Titon Project
+ * @license     http://opensource.org/licenses/BSD-3-Clause
  * @link        http://titon.io
  */
 

data/scss/toolkit/components/modal.scss

@@ -1,6 +1,6 @@
 /**
- * @copyright   2010-2013, The Titon Project
- * @license     http://opensource.org/licenses/bsd-license.php
+ * @copyright   2010-2014, The Titon Project
+ * @license     http://opensource.org/licenses/BSD-3-Clause
  * @link        http://titon.io
  */
 
@@ -42,26 +42,18 @@
 }
 
 .#{$vendor-prefix}modal-outer {
-    position: absolute;
-    top: 0;
-    left: 50%;
-    width: 50%;
-    height: auto;
+    position: relative;
     margin: $margin;
     pointer-events: auto; // allow within modal
-    transform: translateX(-50%);
 
-    @include if-max($breakpoint-mobile-landscape) {
-        width: auto;
-        left: auto;
-        right: auto;
-        transform: translateX(0);
+    @include if-min($modal-mobile-breakpoint) {
+        width: 50%;
+        margin: $margin auto;
     }
 }
 
 .#{$vendor-prefix}modal-inner {
     position: relative;
-    margin: 0 auto;
 }
 
 .#{$vendor-prefix}modal-head,
@@ -87,23 +79,23 @@
 
 .#{$vendor-prefix}modal {
     #{join-classes($modal-animation)} {
-        .#{$vendor-prefix}modal-handle {
+        .#{$vendor-prefix}modal-outer {
             opacity: 0;
             transition: all $modal-transition;
         }
 
-        &.show .#{$vendor-prefix}modal-handle {
+        &.show .#{$vendor-prefix}modal-outer {
             opacity: 1;
         }
     }
 
     @if index($modal-animation, "from-above") {
         &.from-above {
-            .#{$vendor-prefix}modal-handle {
+            .#{$vendor-prefix}modal-outer {
                 transform: scale(1.3);
             }
 
-            &.show .#{$vendor-prefix}modal-handle {
+            &.show .#{$vendor-prefix}modal-outer {
                 transform: scale(1);
             }
         }
@@ -111,11 +103,11 @@
 
     @if index($modal-animation, "from-below") {
         &.from-below {
-            .#{$vendor-prefix}modal-handle {
+            .#{$vendor-prefix}modal-outer {
                 transform: scale(0.7);
             }
 
-            &.show .#{$vendor-prefix}modal-handle {
+            &.show .#{$vendor-prefix}modal-outer {
                 transform: scale(1);
             }
         }
@@ -123,11 +115,11 @@
 
     @if index($modal-animation, "slide-in-top") {
         &.slide-in-top {
-            .#{$vendor-prefix}modal-handle {
+            .#{$vendor-prefix}modal-outer {
                 transform: translateY(-50%);
             }
 
-            &.show .#{$vendor-prefix}modal-handle {
+            &.show .#{$vendor-prefix}modal-outer {
                 transform: translateY(0);
             }
         }
@@ -135,11 +127,11 @@
 
     @if index($modal-animation, "slide-in-bottom") {
         &.slide-in-bottom {
-            .#{$vendor-prefix}modal-handle {
+            .#{$vendor-prefix}modal-outer {
                 transform: translateY(50%);
             }
 
-            &.show .#{$vendor-prefix}modal-handle {
+            &.show .#{$vendor-prefix}modal-outer {
                 transform: translateY(0);
             }
         }
@@ -147,12 +139,11 @@
 
     @if index($modal-animation, "slide-in-left") {
         &.slide-in-left {
-            .#{$vendor-prefix}modal-handle {
-                transition: all $modal-transition cubic-bezier(0.25, 0.5, 0.5, 0.9);
-                transform: translateX(-50%);
+            .#{$vendor-prefix}modal-outer {
+                transform: translateX(-25%);
             }
 
-            &.show .#{$vendor-prefix}modal-handle {
+            &.show .#{$vendor-prefix}modal-outer {
                 transform: translateX(0);
             }
         }
@@ -160,79 +151,12 @@
 
     @if index($modal-animation, "slide-in-right") {
         &.slide-in-right {
-            .#{$vendor-prefix}modal-handle {
-                transition: all $modal-transition cubic-bezier(0.25, 0.5, 0.5, 0.9);
-                transform: translateX(50%);
-            }
-
-            &.show .#{$vendor-prefix}modal-handle {
-                transform: translateX(0);
-            }
-        }
-    }
-
-    @if index($modal-animation, "sticky-top") {
-        &.sticky-top {
             .#{$vendor-prefix}modal-outer {
-                top: -100%;
-                opacity: 0;
-                transition: all $modal-transition;
+                transform: translateX(25%);
             }
 
             &.show .#{$vendor-prefix}modal-outer {
-                top: 0;
-                opacity: 1;
-            }
-        }
-    }
-
-    @if index($modal-animation, "sticky-bottom") {
-        &.sticky-bottom {
-            .#{$vendor-prefix}modal-outer {
-                top: auto;
-                bottom: -100%;
-                opacity: 0;
-                transition: all $modal-transition;
-            }
-
-            &.show .#{$vendor-prefix}modal-outer {
-                bottom: 0;
-                opacity: 1;
-            }
-        }
-    }
-
-    @if index($modal-animation, "sticky-left") {
-        &.sticky-left {
-            .#{$vendor-prefix}modal-outer {
-                left: -100%;
-                opacity: 0;
-                top: 50%;
-                transition: all $modal-transition;
-                transform: translate(0, -50%);
-            }
-
-            &.show .#{$vendor-prefix}modal-outer {
-                left: 0;
-                opacity: 1;
-            }
-        }
-    }
-
-    @if index($modal-animation, "sticky-right") {
-        &.sticky-right {
-            .#{$vendor-prefix}modal-outer {
-                left: auto;
-                right: -100%;
-                top: 50%;
-                opacity: 0;
-                transition: all $modal-transition;
-                transform: translate(0, -50%);
-            }
-
-            &.show .#{$vendor-prefix}modal-outer {
-                right: 0;
-                opacity: 1;
+                transform: translateX(0);
             }
         }
     }

data/scss/toolkit/components/notice.scss

@@ -1,6 +1,6 @@
 /**
- * @copyright   2010-2013, The Titon Project
- * @license     http://opensource.org/licenses/bsd-license.php
+ * @copyright   2010-2014, The Titon Project
+ * @license     http://opensource.org/licenses/BSD-3-Clause
  * @link        http://titon.io
  */
 

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

@@ -0,0 +1,145 @@
+/**
+ * @copyright   2010-2014, The Titon Project
+ * @license     http://opensource.org/licenses/BSD-3-Clause
+ * @link        http://titon.io
+ */
+
+@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;
+    -webkit-overflow-scrolling: touch;
+}
+
+.#{$vendor-prefix}on-canvas {
+    position: relative;
+    width: 100%;
+    max-width: 100%;
+    z-index: 2;
+    transition: transform $offCanvas-transition, padding $offCanvas-transition;
+}
+
+.#{$vendor-prefix}canvas {
+    position: relative;
+    overflow-x: hidden;
+}
+
+//-------------------- Modifiers --------------------//
+
+.#{$vendor-prefix}off-canvas--left {
+    @extend .#{$vendor-prefix}off-canvas;
+
+    left: 0;
+    width: $offCanvas-left-width;
+    transform: translate3d(-100%, 0, 0);
+
+    &.show { transform: translate3d(0, 0, 0) !important; }
+}
+
+.#{$vendor-prefix}off-canvas--right {
+    @extend .#{$vendor-prefix}off-canvas;
+
+    right: 0;
+    width: $offCanvas-right-width;
+    transform: translate3d(100%, 0, 0);
+
+    &.show { transform: translate3d(0, 0, 0) !important; }
+}
+
+//-------------------- Animations --------------------//
+
+.#{$vendor-prefix}canvas {
+    &.on-top,
+    &.squish {
+        .#{$vendor-prefix}off-canvas { z-index: 3; }
+    }
+
+    &.push-reveal {
+        .#{$vendor-prefix}off-canvas--left { transform: translate3d(-50%, 0, 0); }
+        .#{$vendor-prefix}off-canvas--right { transform: translate3d(50%, 0, 0); }
+    }
+
+    &.reverse-push {
+        .#{$vendor-prefix}off-canvas--left { transform: translate3d(100%, 0, 0); }
+        .#{$vendor-prefix}off-canvas--right { transform: translate3d(-100%, 0, 0); }
+    }
+
+    &.reveal {
+        .#{$vendor-prefix}off-canvas { transform: translate3d(0, 0, 0); }
+    }
+
+    &.push-down {
+        .#{$vendor-prefix}off-canvas--left,
+        .#{$vendor-prefix}off-canvas--right { transform: translate3d(0, -100%, 0); }
+    }
+
+    &.push,
+    &.push-reveal,
+    &.push-down,
+    &.reverse-push,
+    &.reveal {
+        &.move-left {
+            .#{$vendor-prefix}on-canvas {
+                transform: translate3d(-$offCanvas-right-width, 0, 0);
+            }
+        }
+
+        &.move-right {
+            .#{$vendor-prefix}on-canvas {
+                transform: translate3d($offCanvas-left-width, 0, 0);
+            }
+        }
+    }
+
+    &.squish {
+        &.move-left {
+            .#{$vendor-prefix}on-canvas {
+                padding-right: $offCanvas-right-width;
+            }
+        }
+
+        &.move-right {
+            .#{$vendor-prefix}on-canvas {
+                padding-left: $offCanvas-left-width;
+            }
+        }
+    }
+}
+
+//-------------------- Responsive --------------------//
+
+@include if-max($offCanvas-mobile-breakpoint) {
+    .#{$vendor-prefix}off-canvas--left {
+        width: $offCanvas-left-width-mobile;
+    }
+
+    .#{$vendor-prefix}off-canvas--right {
+        width: $offCanvas-right-width-mobile;
+    }
+
+    .#{$vendor-prefix}canvas {
+        &.push,
+        &.push-reveal,
+        &.push-down,
+        &.reverse-push,
+        &.reveal {
+            &.move-left {
+                .#{$vendor-prefix}on-canvas {
+                    transform: translate3d(-$offCanvas-right-width-mobile, 0, 0);
+                }
+            }
+
+            &.move-right {
+                .#{$vendor-prefix}on-canvas {
+                    transform: translate3d($offCanvas-left-width-mobile, 0, 0);
+                }
+            }
+        }
+    }
+}