titon-toolkit 1.0.0.rc.2 → 1.0.0.rc.3

data/readme.md

@@ -1,6 +1,6 @@
-# Toolkit v1.0.0 RC2 #
+# Toolkit v1.0.0 RC3 #
 
-Titon Toolkit is a collection of very powerful user-interface components and utility classes.
+Titon Toolkit is a collection of very powerful user interface components and utility classes.
 Each component represents encapsulated HTML, CSS and JS functionality for role specific page elements.
 
 Titon makes use of the latest and greatest technology. This includes CSS3 for animation (fade, slide, etc),
@@ -37,14 +37,6 @@ A temporary demo can be found here: http://titon.io/toolkit
 
 #### Browser Support ####
 
-**Tested Against**
-* Chrome 26, 28
-* Firefox 20, 23
-* Internet Explorer 10
-* Opera 12
-* Safari 5
-
-**Suggested**
 * Chrome 11+
 * Firefox 4+
 * Internet Explorer 10+
@@ -53,10 +45,11 @@ A temporary demo can be found here: http://titon.io/toolkit
 
 **What about IE8 and 9?**
 
-IE9 does not support CSS3 transitions and any type of animation will fallback to a simple show/hide.
+IE9 does not support CSS3 transitions; all animations will fallback to a simple show/hide.
 
-IE8 does not support CSS3 transitions, rem scaling, media queries and specific HTML 5 elements. To support IE8, the Toolkit `ie8.css` file must be included.
-To support media queries and responsiveness, use [respond.js](https://github.com/scottjehl/Respond). To support HTML 5 features, use [modernizr](http://modernizr.com).
+IE8 does not support CSS3 transitions, rem/em scaling, media queries and specific HTML 5 elements.
+To support media queries and responsiveness, use [respond.js](https://github.com/scottjehl/Respond).
+To support HTML 5 features, use [modernizr](http://modernizr.com).
 
 Furthermore, the following Toolkit components do not work in IE8: Input, Matrix.
 

data/roadmap.md

@@ -3,17 +3,17 @@
 All releases will contain bug fixing and polishing for current features.
 
 ### 1.1.0 - December 2013 ###
-* Guide - A component that displays introduction guides (popovers) in a sequential order. Useful for show casing new features and functionality.
-* Divider - A component for dividing content horizontally or vertically.
-
-### 1.2.0 - January 2014 ###
 * Marquee - A component that displays multiple slides at once and allows for cycling through a variable amount. A sister component to the carousel.
 * Mask - A component that will mask a target element with a blackout.
 
-### 1.3.0 - February 2014 ###
+### 1.2.0 - January 2014 ###
 * Step - A component that highlights a step in a series of consecutive steps (represented by an arrow based navigation).
 * Dialog - A component that prompts the user for an action. Sister to the modal component.
 
+### 1.3.0 - February 2014 ###
+* Guide - A component that displays introduction guides (popovers) in a sequential order. Useful for show casing new features and functionality.
+* Divider - A component for dividing content horizontally or vertically.
+
 ### 2.0.0 - TBD ###
 * Remove the MooTools port.
 * Drop IE 8/9 support and upgrade to jQuery 2.

data/scss/toolkit/_common.scss

@@ -23,7 +23,6 @@ $foreground-color: #2d2d2d !default;
 //-------------------- Sizes --------------------//
 
 $base-size: 14px !default;
-$base-size-width: ($base-size * 100) / 1px;
 
 $padding: .75rem !default;
 $margin: 1.25rem !default;
@@ -127,11 +126,14 @@ $grid-columns-tablet: 6 !default;
 $grid-columns-mobile: 3 !default;
 
 $grid-width: 100% !default;
-$grid-gutter: 0 !default;
+$grid-gutter: false !default;
 
 //-------------------- Imports --------------------//
 
+@import "mixins/helper";
+@import "mixins/unit";
 @import "mixins/layout";
+@import "mixins/state";
 @import "mixins/grid";
 @import "mixins/responsive";
 @import "compass/css3/box-sizing";

data/scss/toolkit/components/accordion.scss

@@ -16,13 +16,10 @@
 .accordion-head {
     padding: $padding;
     background: $gray;
-    border: 1px solid $gray-dark;
-    margin: -1px;
     cursor: pointer;
 
     .is-active & {
         background: $gray-dark;
-        border-color: $gray-darkest;
     }
 }
 

data/scss/toolkit/components/breadcrumbs.scss

@@ -10,7 +10,6 @@
     text-align: left;
     margin: $margin 0;
     background: $gray;
-    border: 1px solid $gray-dark;
 
     ul, ol {
         margin: 0;
@@ -25,7 +24,7 @@
         float: left;
 
         &:last-child {
-            .divider { display: none; }
+            .caret { display: none; }
         }
     }
 
@@ -35,7 +34,7 @@
         line-height: 100%;
         padding-right: 0;
 
-        .divider {
+        .caret {
             margin-left: $medium-padding;
             color: $gray-darkest;
             position: relative;
@@ -47,13 +46,13 @@
         @include size-small;
         padding-right: 0;
 
-        .divider { margin-left: $small-padding; }
+        .caret { margin-left: $small-padding; }
     }
 
     &.large a {
         @include size-large;
         padding-right: 0;
 
-        .divider { margin-left: $large-padding; }
+        .caret { margin-left: $large-padding; }
     }
 }

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

@@ -15,15 +15,21 @@
         float: left;
         margin-left: -1px !important;
         border-radius: 0;
-        display: block;
 
         &:first-child { margin-left: 0; }
-        &:hover { z-index: 1; }
+
+        &:hover,
+        &.is-active { z-index: 1; }
     }
 
-    > li .button {
-        display: block;
-        border-radius: 0;
+    > li {
+        position: relative;
+        list-style: none;
+
+        .button {
+            display: block;
+            border-radius: 0;
+        }
     }
 
     &.round {
@@ -54,7 +60,8 @@
 
 //-------------------- Modifiers --------------------//
 
-.button-group.button-group--vertical {
+.button-group--vertical {
+    @extend .button-group;
     vertical-align: top;
 
     > li,
@@ -78,20 +85,23 @@
 
     &.round {
         > li:first-child .button,
-        > .button:first-child {
+        > .button:first-child,
+        > .button.first {
             border-top-left-radius: $round;
             border-top-right-radius: $round;
         }
 
         > li:last-child .button,
-        > .button:last-child {
+        > .button:last-child,
+        > .button.last {
             border-bottom-left-radius: $round;
             border-bottom-right-radius: $round;
         }
     }
 }
 
-.button-group.button-group--justified {
+.button-group--justified {
+    @extend .button-group;
     display: table;
     width: 100%;
 
@@ -99,5 +109,9 @@
     > .button {
         float: none;
         display: table-cell;
+        margin: 0 !important;
     }
+
+    > li:not(:first-child) .button,
+    > .button:not(:first-child) { border-left: 0; }
 }

data/scss/toolkit/components/button.scss

@@ -11,21 +11,20 @@
     @include size-medium;
     cursor: pointer;
     text-align: center;
-    overflow: hidden;
     font-weight: normal;
     line-height: normal;
-    user-select: none;
     white-space: nowrap;
     background: $gray;
-    border: 1px solid $gray-dark;
 
     &.small, .small & { @include size-small; }
+    &.medium, .medium & { @include size-medium; }
     &.large, .large & { @include size-large; }
+
     &.round { border-radius: $round; }
+    &.square { border-radius: 0; }
 
-    @include disabled-state {
+    @include is-disabled {
         cursor: not-allowed;
-        pointer-events: none;
     }
 }
 

data/scss/toolkit/components/carousel.scss

@@ -9,7 +9,6 @@
 .carousel {
     margin: 0 auto;
     text-align: left;
-    background-color: #000;
     position: relative;
 }
 
@@ -55,8 +54,7 @@
     background: black(.7);
 
     @include in-small {
-        font-size: $small-size;
-        padding: $small-padding;
+        @include size-small;
     }
 }
 
@@ -68,26 +66,10 @@
     width: auto;
     height: auto;
     z-index: 5;
-    opacity: $carousel-opacity;
     top: 50%;
     @include transform(translateY(-50%)); // move up 50% of their height
 
-    .arrow-left,
-    .arrow-right {
-        color: #fff;
-        font-size: 2rem;
-    }
-
-    &:hover { opacity: 1; }
     &:focus { outline: none; }
-
-    // Large icons for large resolutions
-    @include if-tablet-landscape {
-        .arrow-left,
-        .arrow-right {
-            font-size: 3rem;
-        }
-    }
 }
 
 .carousel-prev { left: 0; }
@@ -132,14 +114,18 @@
 
 //-------------------- Modifiers --------------------//
 
-.carousel.carousel--wide {
+.carousel--wide {
+    @extend .carousel;
+
     .carousel-items {
         /* 16:9 ratio */
         padding-bottom: 56.25%;
     }
 }
 
-.carousel.carousel--square {
+.carousel--square {
+    @extend .carousel;
+
     .carousel-items {
         /* 1:1 ratio */
         padding-bottom: 100%;

data/scss/toolkit/components/dropdown.scss

@@ -14,7 +14,6 @@
     left: 0;
     width: 200px;
     background: $gray;
-    border: 1px solid $gray-dark;
     line-height: 100%;
     z-index: 500;
     opacity: 0;
@@ -49,7 +48,7 @@
 
         // Show nested dropdown
         &:hover {
-            > a { background: #fff; }
+            > a { background: $gray-lightest; }
 
             .dropdown {
                 visibility: visible;
@@ -84,27 +83,27 @@
 
 //-------------------- Modifiers --------------------//
 
-.dropdown.dropdown--top {
+.dropdown.on-top {
     top: auto;
     bottom: 100%;
 }
 
-.dropdown.dropdown--right {
+.dropdown.on-right {
     top: auto;
     left: 100%;
 }
 
-.dropdown.dropdown--left {
+.dropdown.on-left {
     top: auto;
     left: auto;
     right: 100%;
 }
 
-.dropdown.dropdown--push {
+.dropdown.push-over {
     left: auto;
     right: 0;
 }
 
-.dropdown.dropdown--pull {
+.dropdown.pull-up {
     bottom: 0;
 }

data/scss/toolkit/components/flyout.scss

@@ -14,7 +14,6 @@
     opacity: 0;
     visibility: hidden;
     background: $gray;
-    border: 1px solid $gray-dark;
     @include box-sizing(content-box); // required by MooTools for multi columns
     @include transition(opacity $flyout-transition);
 
@@ -24,51 +23,65 @@
         padding: 0;
         float: left;
         width: 200px;
+    }
 
-        li {
-            position: relative;
+    li {
+        position: relative;
 
-            > a,
-            > .divider {
-                padding: $small-padding;
-                line-height: 100%;
-                display: block;
-                text-decoration: none;
-            }
+        > a {
+            padding: $small-padding;
+            line-height: 100%;
+            display: block;
+            text-decoration: none;
 
-            > a .caret-right { display: none; }
+            .caret-right { display: none; }
+        }
 
-            &.has-children > a .caret-right {
-                float: right;
-                display: inline-block; // reveal
-                margin-top: 3px;
-            }
+        // Hover states
+        > a:hover,
+        &.is-open > a {
+            background: $gray-lightest;
+        }
 
-            // Sub-flyouts
-            > .flyout {
-                left: 90%;
-                @include transition(left $flyout-transition, right $flyout-transition, opacity $flyout-transition);
+        // Display caret arrow
+        &.has-children > a .caret-right {
+            float: right;
+            display: inline-block; // reveal
+            margin-top: 3px;
+        }
+
+        // Nested flyouts
+        > .flyout {
+            left: 90%;
+            @include transition(left $flyout-transition, right $flyout-transition, opacity $flyout-transition);
 
-                // Reverse menu to left side incase it goes outside the viewport
-                // Will be set automatically from the Javascript layer
-                &.flyout--left {
-                    left: auto;
-                    right: 90%;
-                }
+            // Reverse menu to left side in case it goes outside the viewport
+            // Will be set automatically from the Javascript layer
+            &.push-left {
+                left: auto;
+                right: 90%;
             }
+        }
 
-            &.is-open > .flyout {
-                opacity: 1;
-                visibility: visible;
-                left: 100%;
+        &.is-open > .flyout {
+            opacity: 1;
+            visibility: visible;
+            left: 100%;
 
-                &.flyout--left {
-                    left: auto;
-                    right: 100%;
-                }
+            &.push-left {
+                left: auto;
+                right: 100%;
             }
         }
     }
 
     @include clear-fix;
+}
+
+.flyout-heading {
+    padding: $small-padding;
+    line-height: 100%;
+    display: block;
+    text-decoration: none;
+    background: $gray-dark;
 }