titon-toolkit 1.0.5 → 1.1.0.rc.1

data/scss/toolkit/components/flyout.scss

@@ -18,9 +18,7 @@
     @include transition(opacity $flyout-transition);
 
     ul {
-        list-style: none;
-        margin: 0;
-        padding: 0;
+        @include reset-list;
         float: left;
         width: 200px;
     }

data/scss/toolkit/components/grid.scss

@@ -11,6 +11,11 @@
     @include grid-row;
 }
 
+.col.end {
+    margin-right: 0 !important;
+    float: right !important;
+}
+
 // These should be the same for all sizes
 .col[class*="span-"] {
     @include grid-column;

data/scss/toolkit/components/icon.scss

@@ -19,7 +19,7 @@
 [class*="icon-32"] { width: 32px; height: 32px; }
 [class*="icon-64"] { width: 64px; height: 64px; }
 
-.button {
+.#{$vendor-prefix}button {
     [class*="icon-"] { margin-top: -1px; }
 }
 
@@ -31,32 +31,11 @@
 .icon--flip { @include transform(rotateY(180deg)); }
 .icon--flip-vert { @include transform(rotateX(180deg)); }
 
-@-webkit-keyframes rotate {
-    from { -webkit-transform: rotate(0deg); }
-    to { -webkit-transform: rotate(360deg); }
-}
-
-@-moz-keyframes rotate {
-    from { -moz-transform: rotate(0deg); }
-    to { -moz-transform: rotate(360deg); }
-}
-
-@keyframes rotate {
-    from { transform: rotate(0deg); }
-    to { transform: rotate(360deg); }
+@include keyframes(rotate) {
+    from { @include transform(rotate(0deg)); }
+    to { @include transform(rotate(360deg)); }
 }
 
 .icon--rotate {
-    -webkit-animation-name: rotate;
-    -webkit-animation-duration: $icon-animation;
-    -webkit-animation-iteration-count: infinite;
-    -webkit-animation-timing-function: linear;
-    -moz-animation-name: rotate;
-    -moz-animation-duration: $icon-animation;
-    -moz-animation-iteration-count: infinite;
-    -moz-animation-timing-function: linear;
-    animation-name: rotate;
-    animation-duration: $icon-animation;
-    animation-iteration-count: infinite;
-    animation-timing-function: linear;
+    @include animation(rotate $icon-animation infinite linear);
 }

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

@@ -43,7 +43,7 @@
 
 //-------------------- Modifiers --------------------//
 
-.#{$vendor-prefix}input-group.round {
+.#{$vendor-prefix}input-group.#{$shape-round-class} {
     > .#{$vendor-prefix}input:first-child,
     > .#{$vendor-prefix}input-addon:first-child,
     > .#{$vendor-prefix}button:first-child,

data/scss/toolkit/components/input.scss

@@ -63,6 +63,11 @@
         border-radius: $round;
         white-space: nowrap;
         line-height: 1rem;
+        z-index: 3;
+
+        &.#{$state-is-prefix}active {
+            border-color: $info;
+        }
     }
 
     .#{$vendor-prefix}select-label,
@@ -84,7 +89,7 @@
         position: absolute;
         top: 0;
         left: 0;
-        z-index: 1;
+        z-index: 5;
         opacity: 0;
         width: 100%;
 
@@ -103,6 +108,31 @@
             cursor: not-allowed;
             color: $gray-darkest;
             border-color: $gray;
+
+            .#{$vendor-prefix}select-arrow { opacity: $default-opacity; }
+        }
+    }
+
+    // Select dropdown
+    .#{$vendor-prefix}select-options {
+        max-height: 300px;
+        overflow: auto;
+
+        li.#{$state-is-prefix}disabled {
+            > a,
+            > a:hover {
+                background: none;
+                color: $gray-darkest;
+                cursor: default;
+            }
+        }
+
+        &.hide-selected {
+            li.#{$state-is-prefix}active { display: none !important; }
+        }
+
+        &.hide-first {
+            li:first-child:not(.#{$vendor-prefix}drop-heading) { display: none !important; }
         }
     }
 }

data/scss/toolkit/components/loader.scss

@@ -0,0 +1,163 @@
+/**
+ * @copyright   2010-2013, The Titon Project
+ * @license     http://opensource.org/licenses/bsd-license.php
+ * @link        http://titon.io
+ */
+
+@import "../common";
+
+// Based on SpinKit
+// http://tobiasahlin.com/spinkit/
+
+.#{$vendor-prefix}loader {
+    @include reset-inline-block;
+    margin: 0 auto;
+    text-align: center;
+
+    > span {
+        display: inline-block;
+        margin: 0 2px;
+    }
+}
+
+.#{$vendor-prefix}loader-message {
+    margin-top: 1rem;
+}
+
+//-------------------- Bar Wave --------------------//
+
+@if $loader-type == "bar-wave" or $loader-type == "all" {
+    @include keyframes(bar-wave) {
+        0%, 50%, 100% {
+            @include transform(scaleY(1.0));
+        }
+        25% {
+            @include transform(scaleY(2.0));
+        }
+    }
+
+    .#{$vendor-prefix}loader.bar-wave {
+        > span {
+            background: $loader-color;
+            height: $loader-bar-height;
+            width: $loader-bar-width;
+            @include animation(bar-wave 1.2s infinite ease-in-out);
+
+            @for $i from 2 through $loader-wave-count {
+                &:nth-child(#{$i}) { @include animation-delay(-#{(1.3 - ($i * 0.1))}s); }
+            }
+        }
+
+        .#{$vendor-prefix}loader-message {
+            margin-top: 1.5rem;
+        }
+    }
+}
+
+//-------------------- Bubble Wave --------------------//
+
+@if $loader-type == "bubble-wave" or $loader-type == "all" {
+    @include keyframes(bubble-wave) {
+        0%, 80%, 100% {
+            @include transform(scale(0.0));
+        }
+        30% {
+            @include transform(scale(1.0));
+        }
+    }
+
+    .#{$vendor-prefix}loader.bubble-wave {
+        > span {
+            background: $loader-color;
+            width: $loader-bubble-size;
+            height: $loader-bubble-size;
+            border-radius: 100%;
+            @include animation(bubble-wave 1.5s infinite ease-in-out);
+            @include animation-fill-mode(both);
+
+            @for $i from 2 through $loader-wave-count {
+                &:nth-child(#{$i}) { @include animation-delay(-#{(1.6 - ($i * 0.1))}s); }
+            }
+        }
+    }
+}
+
+//-------------------- Bubble Spinner --------------------//
+
+@if $loader-type == "bubble-spinner" or $loader-type == "all" {
+    @include keyframes(bubble-spinner) {
+        0%, 80%, 100% {
+            @include transform(scale(0.0));
+        }
+        30% {
+            @include transform(scale(1.3));
+        }
+    }
+
+    .#{$vendor-prefix}loader.bubble-spinner {
+        .spinner {
+            width: 100px;
+            height: 100px;
+            position: relative;
+            margin: 0 auto;
+
+            > span {
+                background: $loader-color;
+                width: 14px;
+                height: 14px;
+                position: absolute;
+                border-radius: 100%;
+                @include animation(bubble-spinner 1.6s infinite ease-in-out);
+                @include animation-fill-mode(both);
+
+                &:nth-child(1) {
+                    top: 0;
+                    left: 43px;
+                    @include animation-delay(-1.4s);
+                }
+
+                &:nth-child(2) {
+                    top: 12px;
+                    right: 12px;
+                    @include animation-delay(-1.2s);
+                }
+
+                &:nth-child(3) {
+                    top: 43px;
+                    right: 0;
+                    @include animation-delay(-1.0s);
+                }
+
+                &:nth-child(4) {
+                    bottom: 12px;
+                    right: 12px;
+                    @include animation-delay(-0.8s);
+                }
+
+                &:nth-child(5) {
+                    bottom: 0;
+                    left: 43px;
+                    @include animation-delay(-0.6s);
+                }
+
+                &:nth-child(6) {
+                    bottom: 12px;
+                    left: 12px;
+                    @include animation-delay(-0.4s);
+                }
+
+                &:nth-child(7) {
+                    top: 43px;
+                    left: 0;
+                    @include animation-delay(-0.2s);
+                }
+
+                &:nth-child(8) {
+                    top: 12px;
+                    left: 12px;
+                    @include animation-delay(-0.0s);
+                }
+            }
+        }
+    }
+}

data/scss/toolkit/components/mask.scss

@@ -0,0 +1,35 @@
+/**
+ * @copyright   2010-2013, The Titon Project
+ * @license     http://opensource.org/licenses/bsd-license.php
+ * @link        http://titon.io
+ */
+
+@import "../common";
+
+.#{$vendor-prefix}mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    z-index: 600;
+    opacity: 0;
+    visibility: hidden;
+    background: black($mask-opacity);
+    @include transition(all $mask-transition);
+    color: #fff;
+}
+
+.#{$vendor-prefix}mask-message {
+    text-align: center;
+    max-width: 80%;
+    opacity: 1;
+    @include position-center;
+    @include transition(all $mask-transition);
+
+    &:empty { display: none; }
+}
+
+.#{$vendor-prefix}maskable {
+    overflow: hidden;
+}

data/scss/toolkit/components/matrix.scss

@@ -7,14 +7,11 @@
 @import "../common";
 
 .#{$vendor-prefix}matrix {
+    @include reset-list;
     position: relative;
-    list-style: none;
-    margin: 0;
-    padding: 0;
-
     @include clear-fix;
 
-    &.no-columns .#{$vendor-prefix}matrix-item {
+    &.#{$state-has-prefix}no-columns .#{$vendor-prefix}matrix-item {
         position: relative !important;
     }
 }

data/scss/toolkit/components/modal.scss

@@ -97,7 +97,7 @@
 
     &.fade {
         opacity: 0;
-        @include transition(opacity $modal-transition);
+        @include transition(opacity $modal-transition, visibility $modal-transition);
     }
 
     &.from-above {

data/scss/toolkit/components/pagination.scss

@@ -11,15 +11,12 @@
     margin: $margin 0;
 
     ul, ol {
-        margin: 0;
-        padding: 0;
-
+        @include reset-list;
         @include clear-fix;
     }
 
     li {
         position: relative;
-        list-style: none;
         float: left;
         margin-right: $padding / 2;
 
@@ -53,7 +50,7 @@
         }
     }
 
-    &.round {
+    &.#{$shape-round-class} {
         ul {
             border-radius: $round;
         }

data/scss/toolkit/components/progress.scss

@@ -55,7 +55,7 @@
     @include transition(width .6s, background $progress-transition);
 }
 
-.#{$vendor-prefix}progress.round {
+.#{$vendor-prefix}progress.#{$shape-round-class} {
     border-radius: $round;
 
     .#{$vendor-prefix}progress-bar {

data/scss/toolkit/components/showcase.scss

@@ -15,9 +15,11 @@
     margin: 0;
     padding: 0;
     z-index: 610; // higher than blackout
+    opacity: 0;
     visibility: hidden;
     backface-visibility: hidden;
     @include transform(translateX(-50%) translateY(-50%));
+    @include transition(opacity $showcase-transition, visibility $showcase-transition);
 
     &.#{$state-is-prefix}loading,
     &.#{$state-is-prefix}single {
@@ -51,9 +53,7 @@
 }
 
 .#{$vendor-prefix}showcase-items {
-    list-style: none;
-    padding: 0;
-    margin: 0;
+    @include reset-list;
     width: 100px;
     height: 100px;
     max-width: 1024px;

data/scss/toolkit/components/table.scss

@@ -22,6 +22,10 @@
     thead th {
         vertical-align: bottom;
         text-align: left;
+
+        .sorter {
+            margin: -.5rem .25rem;
+        }
     }
 
     // Allow for multiple tbody's

data/scss/toolkit/components/tabs.scss

@@ -15,8 +15,8 @@
     margin-bottom: $margin;
 
     ul, ol, li {
-        @include reset-inline-block;
-        list-style: none;
+        @include reset-list;
+        display: inline-block;
     }
 
     @include clear-fix;