titon-toolkit 0.14.0 → 1.0.0.rc1

data/scss/toolkit/{ui → components}/dropdown.scss

@@ -6,18 +6,6 @@
 
 @import "../common";
 
-$dropdown-transition: $default-transition !default;
-
-/**
- *    <ul class="dropdown">
- *        <li class="heading>Heading</li>
- *        <li><a href="">Some Action</a></li>
- *        <li><a href="">Some Action</a></li>
- *        <li class="divider"></li>
- *        <li><a href="">Some Action</a></li>
- *    </ul>
- */
-
 .dropdown {
     display: none;
     text-align: left;
@@ -25,7 +13,7 @@ $dropdown-transition: $default-transition !default;
     top: 100%;
     left: 0;
     width: 200px;
-    background: $gray-light;
+    background: $gray;
     border: 1px solid $gray-dark;
     line-height: 100%;
     z-index: 500;
@@ -45,7 +33,7 @@ $dropdown-transition: $default-transition !default;
     li {
         position: relative;
 
-         > a {
+        > a {
             padding: $small-padding;
             display: block;
 
@@ -55,11 +43,6 @@ $dropdown-transition: $default-transition !default;
             }
         }
 
-        &.divider {
-            margin: ($margin / 2) 0;
-            border-top: 1px solid $gray-dark;
-        }
-
         &.has-children {
             > a .caret-right { display: inline-block; }
         }
@@ -74,11 +57,6 @@ $dropdown-transition: $default-transition !default;
                 left: 100%;
             }
         }
-
-        &.heading {
-            font-weight: bold;
-            padding: $small-padding;
-        }
     }
 
     // Force display
@@ -94,14 +72,39 @@ $dropdown-transition: $default-transition !default;
     padding: 0;
 }
 
+.dropdown-divider {
+    margin: ($margin / 2) 0;
+    border-top: 1px solid $gray-dark;
+}
+
+.dropdown-heading {
+    padding: $small-padding;
+    background-color: $gray-dark;
+}
+
 //-------------------- Modifiers --------------------//
 
+.dropdown.dropdown--top {
+    top: auto;
+    bottom: 100%;
+}
+
 .dropdown.dropdown--right {
+    top: auto;
+    left: 100%;
+}
+
+.dropdown.dropdown--left {
+    top: auto;
+    left: auto;
+    right: 100%;
+}
+
+.dropdown.dropdown--push {
     left: auto;
     right: 0;
 }
 
-.dropdown.dropdown--top {
-    top: auto;
-    bottom: 100%;
+.dropdown.dropdown--pull {
+    bottom: 0;
 }

data/scss/toolkit/{modules → components}/flyout.scss

@@ -6,12 +6,6 @@
 
 @import "../common";
 
-$flyout-transition: $default-transition !default;
-
-/**
- * Should be used in conjunction with the JavaScript Titon.Flyout module.
- */
-
 .flyout {
     position: absolute;
     top: 0;

data/scss/toolkit/{layout → components}/grid.scss

@@ -4,7 +4,7 @@
  * @link        http://titon.io
  */
 
-@import "../common";
+@import "../_common";
 
 .grid,
 .row {

data/scss/toolkit/components/icon.scss

@@ -0,0 +1,60 @@
+/**
+ * @copyright   2010-2013, The Titon Project
+ * @license     http://opensource.org/licenses/bsd-license.php
+ * @link        http://titon.io
+ */
+
+@import "../common";
+
+[class*="icon-"] {
+    @include reset-inline-block;
+    @include disabled-state { opacity: $disabled-opacity; }
+}
+
+[class*="icon-12"] { width: 12px; height: 12px; }
+[class*="icon-16"] { width: 16px; height: 16px; }
+[class*="icon-24"] { width: 24px; height: 24px; }
+[class*="icon-32"] { width: 32px; height: 32px; }
+[class*="icon-64"] { width: 64px; height: 64px; }
+
+.button {
+    [class*="icon-"] { margin-top: -1px; }
+}
+
+//-------------------- Modifiers --------------------//
+
+.icon--90deg { @include transform(rotate(90deg)); }
+.icon--180deg { @include transform(rotate(180deg)); }
+.icon--270deg { @include transform(rotate(270deg)); }
+.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); }
+}
+
+.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;
+}

data/scss/toolkit/{layout → components}/input-group.scss

@@ -8,6 +8,7 @@
 
 .input-group {
     display: inline-block;
+    white-space: nowrap;
 
     > .input,
     > .input-addon,
@@ -23,7 +24,8 @@
         vertical-align: middle;
 
         &:last-child { margin-right: 0; }
-        &:hover, &:focus { z-index: 1; }
+        &:hover { z-index: 1; }
+        &:focus { z-index: 2; }
     }
 
     @include clear-fix;

data/scss/toolkit/components/input.scss

@@ -0,0 +1,112 @@
+/**
+ * @copyright   2010-2013, The Titon Project
+ * @license     http://opensource.org/licenses/bsd-license.php
+ * @link        http://titon.io
+ */
+
+@import "../common";
+
+.custom-input {
+    @include reset-inline-block;
+}
+
+// Checkbox, radio
+.custom-input {
+    .checkbox,
+    .radio {
+        @include reset-inline-block;
+        background: $gray-lightest;
+        border: 1px solid $gray-dark;
+        width: 16px;
+        height: 16px;
+        top: -3px;
+        line-height: 1rem;
+        border-radius: $round;
+        @include transition(all $default-transition);
+
+        &:hover { border-color: $gray-darkest; }
+    }
+
+    .radio { border-radius: 50%; }
+
+    input {
+        display: none;
+
+        // Style when the associated label is being hovered
+        &:hover + .checkbox,
+        &:hover + .radio {
+            border-color: $gray-darkest;
+        }
+
+        // Style when the checkbox is checked
+        &:checked + .checkbox,
+        &:checked + .radio {
+            border-color: $info;
+            box-shadow: 0 0 5px $info-light;
+        }
+
+        // Style when input is disabled
+        &[disabled] + .checkbox,
+        &[disabled] + .radio {
+            cursor: not-allowed;
+            border-color: $gray;
+        }
+    }
+}
+
+// Select
+.custom-input {
+    .select {
+        @include reset-inline-block;
+        cursor: pointer;
+        background: $gray-lightest;
+        border: 1px solid $gray-dark;
+        border-radius: $round;
+        white-space: nowrap;
+        line-height: 1rem;
+        @include transition(all $default-transition);
+    }
+
+    .select-label,
+    .select-arrow {
+        display: inline-block;
+        vertical-align: middle;
+        line-height: normal;
+        font-size: $medium-size;
+        padding: $medium-padding;
+    }
+
+    .select-arrow {
+        float: right;
+
+        .caret-down { border-top-color: #000; }
+    }
+
+    // Position the real select over the custom one
+    select {
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 1;
+        opacity: 0;
+        width: 100%;
+
+        // Style when the select is hovered
+        &:hover + .select {
+            border-color: $gray-darkest;
+        }
+
+        // Style when the select is focused
+        &:focus + .select {
+            border-color: $info;
+            box-shadow: 0 0 5px $info-light;
+        }
+
+        // Style when select is disabled
+        &[disabled] + .select {
+            cursor: not-allowed;
+            color: $gray-darkest;
+            border-color: $gray;
+        }
+    }
+}

data/scss/toolkit/components/label.scss

@@ -0,0 +1,106 @@
+/**
+ * @copyright   2010-2013, The Titon Project
+ * @license     http://opensource.org/licenses/bsd-license.php
+ * @link        http://titon.io
+ */
+
+@import "../common";
+
+.label {
+    @include reset-inline-block;
+    font-size: .7rem;
+    line-height: 100%;
+    background: $gray-dark;
+    padding: .275rem .425rem;
+    text-transform: uppercase;
+    border-radius: 2px;
+    white-space: nowrap;
+    top: -1px;
+    letter-spacing: 1px;
+
+    &.small {
+        font-size: .6rem;
+        padding: .2rem .35rem;
+    }
+
+    &.large {
+        font-size: .8rem;
+        padding: .35rem .5rem;
+    }
+
+    &:empty { display: none; }
+    &:after {
+        content: "";
+        height: 0;
+        width: 0;
+        position: absolute;
+    }
+}
+
+//-------------------- Modifiers --------------------//
+
+.label.label--badge {
+    border-radius: 1rem;
+}
+
+.label.label--arrow-left {
+    border-top-left-radius: 1px;
+    border-bottom-left-radius: 1px;
+    padding-left: 2px;
+    margin-left: 10px;
+
+    &:after {
+        top: 0;
+        right: 100%;
+        border: .65rem solid transparent;
+        border-right-color: $gray-dark;
+    }
+
+    &.small:after { border-width: .5rem; }
+    &.large:after { border-width: .75rem; }
+}
+
+.label.label--arrow-right {
+    border-top-right-radius: 1px;
+    border-bottom-right-radius: 1px;
+    padding-right: 2px;
+    margin-right: 10px;
+
+    &:after {
+        top: 0;
+        left: 100%;
+        border: .65rem solid transparent;
+        border-left-color: $gray-dark;
+    }
+
+    &.small:after { border-width: .5rem; }
+    &.large:after { border-width: .75rem; }
+}
+
+.label.label--ribbon-left {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+
+    &:after {
+        top: 100%;
+        left: 0;
+        border: 1em solid transparent;
+        border-top-width: 0 !important;
+        border-left-width: 0 !important;
+        border-right-color: $gray-darkest;
+    }
+}
+
+.label.label--ribbon-right {
+     border-top-right-radius: 0;
+     border-bottom-right-radius: 0;
+
+     &:after {
+         top: 100%;
+         right: 0;
+         border: 1em solid transparent;
+         border-top-width: 0 !important;
+         border-right-width: 0 !important;
+         border-left-color: $gray-darkest;
+     }
+ }

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

@@ -0,0 +1,12 @@
+/**
+ * @copyright   2010-2013, The Titon Project
+ * @license     http://opensource.org/licenses/bsd-license.php
+ * @link        http://titon.io
+ */
+
+@import "../common";
+
+.lazy-load {
+    background-image: none !important;
+    @include transition(background $lazyLoad-transition);
+}

data/scss/toolkit/{ui → components}/matrix.scss

@@ -6,12 +6,6 @@
 
 @import "../common";
 
-$matrix-transition: $default-transition !default;
-
-/**
- * Should be used in conjunction with the JavaScript Titon.Matrix component.
- */
-
 .matrix {
     position: relative;
     list-style: none;
@@ -28,7 +22,6 @@ $matrix-transition: $default-transition !default;
 .matrix-item {
     margin: 0;
     padding: 0;
-    position: absolute;
     @include transition(top $matrix-transition, left $matrix-transition, bottom $matrix-transition, right $matrix-transition, opacity $matrix-transition);
 
     img {

data/scss/toolkit/{modules → components}/modal.scss

@@ -6,21 +6,6 @@
 
 @import "../common";
 
-$modal-transition: $default-transition !default;
-
-/**
- * Should be used in conjunction with the JavaScript Titon.Modal module.
- *
- *    <div class="modal">
- *        <div class="modal-outer">
- *            <div class="modal-inner">
- *                Custom content here
- *            </div>
- *            <button type="button" class="modal-close"></button>
- *        </div>
- *    </div>
- */
-
 .modal {
     position: fixed;
     top: 50%;
@@ -36,23 +21,25 @@ $modal-transition: $default-transition !default;
     backface-visibility: hidden;
     @include transform(translateX(-50%) translateY(-50%));
 
-    .close {
-        position: absolute;
-        top: -1px;
-        right: -35px;
+    &.is-loading {
+        .modal-close { display: none; }
+        .modal-handle { background: $gray; }
     }
+}
 
-    &.is-loading {
-        .close { display: none; }
+.modal-close {
+    position: absolute;
+    top: $padding;
+    right: $padding;
+    line-height: 1rem;
+    opacity: $default-opacity;
+    padding: 5px;
 
-        .modal-outer {
-            background: $gray;
-        }
-    }
+    &:hover { opacity: 1; }
 }
 
 // Used for animations, should also contain the styles
-.modal-outer {
+.modal-handle {
     position: relative;
     margin: 0 auto;
     background: $gray;
@@ -79,6 +66,19 @@ $modal-transition: $default-transition !default;
     @include content-spacing;
 }
 
+//-------------------- Modifiers --------------------//
+
+.modal.modal--fullscreen {
+    width: 100%;
+    top: 0;
+    left: 0;
+    margin: 0;
+    max-width: 100%;
+    max-height: auto;
+    border-radius: 0;
+    @include transform(translateX(0) translateY(0));
+}
+
 //-------------------- Animations --------------------//
 
 .modal {
@@ -90,12 +90,12 @@ $modal-transition: $default-transition !default;
     &.slide-in-right,
     &.flip,
     &.flip-vert {
-        .modal-outer {
+        .modal-handle {
             opacity: 0;
             @include transition(all $modal-transition);
         }
 
-        &.show .modal-outer {
+        &.show .modal-handle {
             opacity: 1;
         }
     }
@@ -106,63 +106,63 @@ $modal-transition: $default-transition !default;
     }
 
     &.from-above {
-        .modal-outer {
+        .modal-handle {
             @include transform(scale(1.3));
         }
 
-        &.show .modal-outer {
+        &.show .modal-handle {
             @include transform(scale(1));
         }
     }
 
     &.from-below {
-        .modal-outer {
+        .modal-handle {
             @include transform(scale(0.7));
         }
 
-        &.show .modal-outer {
+        &.show .modal-handle {
             @include transform(scale(1));
         }
     }
 
     &.slide-in-top {
-        .modal-outer {
+        .modal-handle {
             @include transform(translateY(-50%));
         }
 
-        &.show .modal-outer {
+        &.show .modal-handle {
             @include transform(translateY(0));
         }
     }
 
     &.slide-in-bottom {
-        .modal-outer {
+        .modal-handle {
             @include transform(translateY(50%));
         }
 
-        &.show .modal-outer {
+        &.show .modal-handle {
             @include transform(translateY(0));
         }
     }
 
     &.slide-in-left {
-        .modal-outer {
+        .modal-handle {
             @include transition(all $modal-transition cubic-bezier(0.25, 0.5, 0.5, 0.9));
             @include transform(translateX(-50%));
         }
 
-        &.show .modal-outer {
+        &.show .modal-handle {
             @include transform(translateX(0));
         }
     }
 
     &.slide-in-right {
-        .modal-outer {
+        .modal-handle {
             @include transition(all $modal-transition cubic-bezier(0.25, 0.5, 0.5, 0.9));
             @include transform(translateX(50%));
         }
 
-        &.show .modal-outer {
+        &.show .modal-handle {
             @include transform(translateX(0));
         }
     }
@@ -220,12 +220,12 @@ $modal-transition: $default-transition !default;
     &.flip {
         @include perspective(1300px);
 
-        .modal-outer {
+        .modal-handle {
             @include transform-style(preserve-3d);
             @include transform(rotateY(-70deg));
         }
 
-        &.show .modal-outer {
+        &.show .modal-handle {
             @include transform(rotateY(0deg));
         }
     }
@@ -233,12 +233,12 @@ $modal-transition: $default-transition !default;
     &.flip-vert {
         @include perspective(1300px);
 
-        .modal-outer {
+        .modal-handle {
             @include transform-style(preserve-3d);
             @include transform(rotateX(-70deg));
         }
 
-        &.show .modal-outer {
+        &.show .modal-handle {
             @include transform(rotateX(0deg));
         }
     }

data/scss/toolkit/{ui/alert.scss → components/notice.scss}

@@ -6,21 +6,10 @@
 
 @import "../common";
 
-/**
- *    <div class="alert is-info">
- *        <button type="button" class="close">
- *            <span class="x">&times;</span>
- *        </button>
- *
- *        <h3 class="alert-title">Title</h3>
- *        <p>This is an information message!</p>
- *    </div>
- */
-
-.alert {
+.notice {
     margin: $margin 0;
     padding: $padding;
-    background: $gray;
+    background: $gray-light;
     border: 1px solid $gray-dark;
     text-align: left;
 
@@ -33,16 +22,20 @@
         font-weight: bold;
     }
 
-    .close {
-        float: right;
-        margin-left: $margin;
+    @include content-spacing;
+}
 
-        & ~ p { margin: 0; }
-    }
+.notice-close {
+    float: right;
+    margin-left: $margin;
+    line-height: 1rem;
+    opacity: $default-opacity;
+    padding: 5px;
 
-    @include content-spacing;
+    & ~ p { margin: 0; }
+    &:hover { opacity: 1; }
 }
 
-.alert-title {
+.notice-title {
     margin: 0 0 ($margin / 2) 0;
 }