titon-toolkit 1.3.2 → 1.4.0

data/scss/toolkit/components/pagination.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/pin.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/popover.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/progress.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/showcase.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,10 +14,9 @@
     height: auto;
     margin: 0;
     padding: 0;
-    z-index: $showcase-zindex;
     opacity: 0;
+    z-index: $showcase-zindex;
     visibility: hidden;
-    -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
     transform: translate(-50%, -50%);
     transition: opacity $showcase-transition, visibility $showcase-transition;
@@ -39,25 +38,28 @@
 }
 
 .#{$vendor-prefix}showcase-close {
-    position: absolute;
-    top: $padding;
-    right: $padding;
+    float: right;
     line-height: 1rem;
-    padding: $padding;
     background: none;
     border: 0;
+    padding: 0;
+    margin-left: 1rem;
+}
+
+.#{$vendor-prefix}showcase-caption {
+    opacity: 0;
+    transition: opacity $showcase-transition, visibility $showcase-transition;
 }
 
 .#{$vendor-prefix}showcase-inner {
     position: relative;
-    padding: $padding;
+    margin-bottom: $padding;
 }
 
 .#{$vendor-prefix}showcase-items {
     @include reset-list;
     width: 100px;
     height: 100px;
-    max-width: 1024px;
     position: relative;
     overflow: hidden;
     transition: width $showcase-transition, height $showcase-transition;
@@ -67,7 +69,7 @@
         top: 0;
         left: 0;
         opacity: 0;
-        transition: opacity $showcase-transition;
+        transition: opacity $showcase-transition, visibility $showcase-transition;
 
         > img {
             max-width: 100%;
@@ -75,27 +77,6 @@
             height: auto;
             display: block;
         }
-
-        &.show {
-            .#{$vendor-prefix}showcase-caption {
-                display: block;
-            }
-        }
-    }
-}
-
-.#{$vendor-prefix}showcase-caption {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    padding: $padding;
-    color: #fff;
-    background: black(.70);
-    display: none;
-
-    @include in-small {
-        @include size-small;
     }
 }
 
@@ -103,12 +84,10 @@
 .#{$vendor-prefix}showcase-next {
     display: block;
     position: absolute;
-    padding: $padding;
-    width: auto;
-    height: auto;
     z-index: 5;
     top: 50%;
     background: none;
+    padding: 0;
     border: 0;
     transform: translateY(-50%); // move up 50% of their height
 
@@ -120,7 +99,9 @@
 
 .#{$vendor-prefix}showcase-tabs {
     position: absolute;
-    top: ($padding * 2);
-    left: 50%;
-    transform: translateX(-50%); // move left 50% of their width
+    top: 0;
+    left: 0;
+    width: 100%;
+    padding: $padding;
+    text-align: center;
 }

data/scss/toolkit/components/step.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/switch.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/table.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/tabs.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/toast.scss

@@ -0,0 +1,129 @@
+/**
+ * @copyright   2010-2014, The Titon Project
+ * @license     http://opensource.org/licenses/BSD-3-Clause
+ * @link        http://titon.io
+ */
+
+@import "../common";
+
+.#{$vendor-prefix}toasts {
+    position: fixed;
+    margin: $margin;
+    width: 20%;
+    z-index: $toast-zindex;
+
+    @if index($toast-position, "top-left") {
+        &.top-left {
+            top: 0;
+            left: 0;
+        }
+    }
+
+    @if index($toast-position, "top-center") {
+        &.top-center {
+            top: 0;
+            left: 50%;
+        }
+    }
+
+    @if index($toast-position, "top-right") {
+        &.top-right {
+            top: 0;
+            right: 0;
+        }
+    }
+
+    @if index($toast-position, "center-left") {
+        &.center-left {
+            top: 50%;
+            left: 0;
+        }
+    }
+
+    @if index($toast-position, "center-right") {
+        &.center-right {
+            top: 50%;
+            right: 0;
+        }
+    }
+
+    @if index($toast-position, "bottom-left") {
+        &.bottom-left {
+            bottom: 0;
+            left: 0;
+        }
+    }
+
+    @if index($toast-position, "bottom-center") {
+        &.bottom-center {
+            bottom: 0;
+            left: 50%;
+        }
+    }
+
+    @if index($toast-position, "bottom-right") {
+        &.bottom-right {
+            bottom: 0;
+            right: 0;
+        }
+    }
+
+    @if index($toast-position, "top-center") or index($toast-position, "bottom-center") {
+        &.top-center,
+        &.bottom-center {
+            transform: translateX(-50%);
+        }
+    }
+
+    @if index($toast-position, "center-left") or index($toast-position, "center-right") {
+        &.center-left,
+        &.center-right {
+            transform: translateY(-50%);
+        }
+    }
+}
+
+.#{$vendor-prefix}toast {
+    margin-top: 1rem;
+    transition: opacity $toast-transition, visibility $toast-transition, transform $toast-transition;
+    opacity: 0;
+
+    &.show { opacity: 1; }
+    &:first-child { margin-top: 0; }
+}
+
+//-------------------- Animations --------------------//
+
+.#{$vendor-prefix}toast {
+    @if index($toast-animation, "slide-up") {
+        &.slide-up {
+            transform: translateY(50%);
+
+            &.show { transform: translateY(0); }
+        }
+    }
+
+    @if index($toast-animation, "slide-down") {
+        &.slide-down {
+            transform: translateY(-50%);
+
+            &.show { transform: translateY(0); }
+        }
+    }
+
+    @if index($toast-animation, "slide-left") {
+        &.slide-left {
+            transform: translateX(25%);
+
+            &.show { transform: translateX(0); }
+        }
+    }
+
+    @if index($toast-animation, "slide-right") {
+        &.slide-right {
+            transform: translateX(-25%);
+
+            &.show { transform: translateX(0); }
+        }
+    }
+}

data/scss/toolkit/components/tooltip.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
  */
 
@@ -76,7 +76,7 @@ $tooltip-arrow-width-double: ($tooltip-arrow-width * 2);
     @if index($popover-tooltip-animation, "fade") {
         &.fade {
             opacity: 0;
-            transition: opacity 0.5s;
+            transition: opacity $tooltip-transition, visibility $tooltip-transition;
         }
     }
 

data/scss/toolkit/components/type-ahead.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
  */
 
@@ -13,7 +13,7 @@
     z-index: $typeAhead-zindex;
     opacity: 0;
     visibility: hidden;
-    transition: opacity 0.3s;
+    transition: opacity 0.3s, visibility 0.3s;
 
     ul {
         @include reset-list;

data/scss/toolkit/effects/oval.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/effects/pill.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/effects/skew.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/effects/visual.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/layout/base.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
  */
 
@@ -27,6 +27,28 @@
 .shown { display: block; }
 .hidden { display: none; }
 .no-scroll { overflow: hidden; }
+.no-transition { transition: none !important; }
+
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    border: 0;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+
+    &.is-focusable:active,
+    &.is-focusable:focus {
+        position: static;
+        width: auto;
+        height: auto;
+        margin: 0;
+        overflow: visible;
+        clip: auto;
+    }
+}
 
 // Layout
 .vertical-center {

data/scss/toolkit/layout/code.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
  */
 
@@ -33,6 +33,7 @@ pre {
     word-spacing: normal;
     font-size: .9rem;
     overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
 
     code {
         padding: 0;