titon-toolkit 1.0.0 → 1.0.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 255f3100b0f5ad48091522c492aeab278e8c9ae6
-  data.tar.gz: 7a201853a7209808156e21aae0cff3d9721a7cf1
+  metadata.gz: e40abd10a427e11e88e523dff1dd445e32b2a260
+  data.tar.gz: c292c05b10982b28b9501d81b4f8c2580285ca1a
 SHA512:
-  metadata.gz: 48713dfe0731c1c10bfc555bcab6b4c9716be9ef87bd202f52fb9ca6f02e57150a154491599f2b2a8aa8bb3b40e8483ac58fdc4fa4ce6e0850541ad887a9eb5c
-  data.tar.gz: 1e892c3ee6f266d0c4d1a8020ef0c97350d1c29e4eb9c20f5613ef1e416a05ad1b2902e13c2129ceb48107866026e13a18bfe47e41de406ea1495921825bafa6
+  metadata.gz: ba0e03fbeb51853f988b1882c82fda971f4852bf6c2bf8ae38267f09d726f88e23a3d197851194e0b8c3a7174873429e0a8746215760f531e07fba4d0d1a02af
+  data.tar.gz: 380c6e7306ef464048816d934932755f4fe51fdcb567060bac5ed680e5714ba438e7cda591752e8b242d5dbc04d784390fc5d614bd0addfb971f2193877a9c71

data/readme.md

@@ -6,8 +6,7 @@
                           \/_/  \/_____/\/_____/\/_____/\/_/\/_/ \/_/  \/_/
 ```
 
-# Toolkit v1.0.0 #
-
+# Toolkit v1.0.1 #
 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.
 
@@ -15,7 +14,6 @@ Titon makes use of the latest and greatest technology. This includes CSS3 for an
 Sass for CSS pre-processing, and Grunt for task and package management.
 
 #### Why Toolkit? ####
-
 Toolkit was built from the ground up with the following concepts and philosophies in mind.
 If any of these concepts align with your thought process or your projects requirements, than Toolkit is right for you.
 
@@ -44,7 +42,6 @@ An interactive demo can be found here: http://titon.io/toolkit
     * More/Element.Event.Pseudos (for LazyLoad, Pin, Stalker, Tooltip)
 
 #### Browser Support ####
-
 * Chrome 11+
 * Firefox 4+
 * Internet Explorer 10+

data/scss/toolkit/_common.scss

@@ -9,6 +9,15 @@ $experimental-support-for-khtml: false !default;
 
 $support-for-original-webkit-gradients: false !default;
 
+//-------------------- Toolkit --------------------//
+
+$vendor-prefix: "";
+$state-is-prefix: "is-";
+$state-has-prefix: "has-";
+$size-small-class: "small";
+$size-medium-class: "medium";
+$size-large-class: "large";
+
 //-------------------- Colors --------------------//
 
 $gray-lightest: #fbfbfb !default;

data/scss/toolkit/components/accordion.scss

@@ -6,31 +6,31 @@
 
 @import "../common";
 
-.accordion {
+.#{$vendor-prefix}accordion {
     list-style: none;
     text-align: left;
     margin: 0;
     padding: 0;
 }
 
-.accordion-head {
+.#{$vendor-prefix}accordion-head {
     padding: $padding;
     background: $gray;
     cursor: pointer;
 
-    .is-active & {
+    @include is-active-parent {
         background: $gray-dark;
     }
 }
 
-.accordion-body {
+.#{$vendor-prefix}accordion-body {
     padding: $padding;
 
     @include content-spacing;
 }
 
 // Handle is used for animations, do not style it!
-.accordion-handle {
+.#{$vendor-prefix}accordion-handle {
     overflow: hidden;
     position: relative;
     @include transition(all $accordion-transition ease-in-out);

data/scss/toolkit/components/blackout.scss

@@ -6,7 +6,7 @@
 
 @import "../common";
 
-.blackout {
+.#{$vendor-prefix}blackout {
     position: fixed;
     top: 0;
     left: 0;

data/scss/toolkit/components/breadcrumb.scss

@@ -6,7 +6,7 @@
 
 @import "../common";
 
-.breadcrumb {
+.#{$vendor-prefix}breadcrumb {
     text-align: left;
     margin: $margin 0;
     background: $gray;
@@ -42,17 +42,21 @@
         }
     }
 
-    &.small a {
-        @include size-small;
-        padding-right: 0;
+    @include is-small {
+        a {
+            @include size-small;
+            padding-right: 0;
 
-        .caret { margin-left: $small-padding; }
+            .caret { margin-left: $small-padding; }
+        }
     }
 
-    &.large a {
-        @include size-large;
-        padding-right: 0;
+    @include is-large {
+        a {
+            @include size-large;
+            padding-right: 0;
 
-        .caret { margin-left: $large-padding; }
+            .caret { margin-left: $large-padding; }
+        }
     }
 }

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

@@ -6,12 +6,28 @@
 
 @import "../common";
 
-.button-group {
+@mixin button-group-first-child {
+    > li:first-child .#{$vendor-prefix}button,
+    > .#{$vendor-prefix}button:first-child,
+    > .#{$vendor-prefix}button.first {
+        @content;
+    }
+}
+
+@mixin button-group-last-child {
+    > li:last-child .#{$vendor-prefix}button,
+    > .#{$vendor-prefix}button:last-child,
+    > .#{$vendor-prefix}button.last {
+        @content;
+    }
+}
+
+.#{$vendor-prefix}button-group {
     @include reset-inline-block;
     white-space: nowrap;
 
     > li,
-    > .button {
+    > .#{$vendor-prefix}button {
         float: left;
         margin-left: -1px !important;
         border-radius: 0;
@@ -19,14 +35,14 @@
         &:first-child { margin-left: 0; }
 
         &:hover,
-        &.is-active { z-index: 1; }
+        &.#{$state-is-prefix}active { z-index: 1; }
     }
 
     > li {
         position: relative;
         list-style: none;
 
-        .button {
+        .#{$vendor-prefix}button {
             display: block;
             border-radius: 0;
         }
@@ -35,16 +51,12 @@
     &.round {
         border-radius: $round;
 
-        > li:first-child .button,
-        > .button:first-child,
-        > .button.first {
+        @include button-group-first-child {
             border-top-left-radius: $round;
             border-bottom-left-radius: $round;
         }
 
-        > li:last-child .button,
-        > .button:last-child,
-        > .button.last {
+        @include button-group-last-child {
             border-top-right-radius: $round;
             border-bottom-right-radius: $round;
         }
@@ -54,18 +66,18 @@
 }
 
 // Space out groups
-.button-group + .button-group {
+.#{$vendor-prefix}button-group + .#{$vendor-prefix}button-group {
     margin-left: $margin;
 }
 
 //-------------------- Modifiers --------------------//
 
-.button-group--vertical {
-    @extend .button-group;
+.#{$vendor-prefix}button-group--vertical {
+    @extend .#{$vendor-prefix}button-group;
     vertical-align: top;
 
     > li,
-    > .button {
+    > .#{$vendor-prefix}button {
         float: none;
         display: block;
         margin: -1px 0 0 0 !important;
@@ -80,38 +92,34 @@
     &.pill,
     &.skew,
     &.skew-reverse {
-        .button { border-radius: 0; }
+        .#{$vendor-prefix}button { border-radius: 0; }
     }
 
     &.round {
-        > li:first-child .button,
-        > .button:first-child,
-        > .button.first {
+        @include button-group-first-child {
             border-top-left-radius: $round;
             border-top-right-radius: $round;
         }
 
-        > li:last-child .button,
-        > .button:last-child,
-        > .button.last {
+        @include button-group-last-child {
             border-bottom-left-radius: $round;
             border-bottom-right-radius: $round;
         }
     }
 }
 
-.button-group--justified {
-    @extend .button-group;
+.#{$vendor-prefix}button-group--justified {
+    @extend .#{$vendor-prefix}button-group;
     display: table;
     width: 100%;
 
     > li,
-    > .button {
+    > .#{$vendor-prefix}button {
         float: none;
         display: table-cell;
         margin: 0 !important;
     }
 
-    > li:not(:first-child) .button,
-    > .button:not(:first-child) { border-left: 0; }
+    > li:not(:first-child) .#{$vendor-prefix}button,
+    > .#{$vendor-prefix}button:not(:first-child) { border-left: 0; }
 }

data/scss/toolkit/components/button.scss

@@ -6,7 +6,7 @@
 
 @import "../common";
 
-.button {
+.#{$vendor-prefix}button {
     @include reset-inline-block;
     @include size-medium;
     cursor: pointer;
@@ -16,9 +16,9 @@
     white-space: nowrap;
     background: $gray;
 
-    &.small, .small & { @include size-small; }
-    &.medium, .medium & { @include size-medium; }
-    &.large, .large & { @include size-large; }
+    @include is-small(true, true) { @include size-small; }
+    @include is-medium(true, true) { @include size-medium; }
+    @include is-large(true, true) { @include size-large; }
 
     &.round { border-radius: $round; }
     &.square { border-radius: 0; }

data/scss/toolkit/components/carousel.scss

@@ -6,13 +6,13 @@
 
 @import "../common";
 
-.carousel {
+.#{$vendor-prefix}carousel {
     margin: 0 auto;
     text-align: left;
     position: relative;
 }
 
-.carousel-items {
+.#{$vendor-prefix}carousel-items {
     /* 4:3 ratio */
     padding-bottom: 75%;
     width: 100%;
@@ -44,7 +44,7 @@
     }
 }
 
-.carousel-caption {
+.#{$vendor-prefix}carousel-caption {
     position: absolute;
     bottom: 0;
     left: 0;
@@ -58,8 +58,8 @@
     }
 }
 
-.carousel-prev,
-.carousel-next {
+.#{$vendor-prefix}carousel-prev,
+.#{$vendor-prefix}carousel-next {
     display: block;
     position: absolute;
     padding: $padding;
@@ -72,10 +72,10 @@
     &:focus { outline: none; }
 }
 
-.carousel-prev { left: 0; }
-.carousel-next { right: 0; }
+.#{$vendor-prefix}carousel-prev { left: 0; }
+.#{$vendor-prefix}carousel-next { right: 0; }
 
-.carousel-tabs {
+.#{$vendor-prefix}carousel-tabs {
     position: absolute;
     top: $padding;
     left: 50%;
@@ -85,8 +85,8 @@
 
 //-------------------- Animations --------------------//
 
-.carousel.slide {
-    .carousel-items ul {
+.#{$vendor-prefix}carousel.slide {
+    .#{$vendor-prefix}carousel-items ul {
         @include clear-fix;
 
         > li {
@@ -95,8 +95,8 @@
     }
 }
 
-.carousel.fade {
-    .carousel-items ul {
+.#{$vendor-prefix}carousel.fade {
+    .#{$vendor-prefix}carousel-items ul {
         position: relative;
 
         > li {
@@ -114,19 +114,19 @@
 
 //-------------------- Modifiers --------------------//
 
-.carousel--wide {
-    @extend .carousel;
+.#{$vendor-prefix}carousel--wide {
+    @extend .#{$vendor-prefix}carousel;
 
-    .carousel-items {
+    .#{$vendor-prefix}carousel-items {
         /* 16:9 ratio */
         padding-bottom: 56.25%;
     }
 }
 
-.carousel--square {
-    @extend .carousel;
+.#{$vendor-prefix}carousel--square {
+    @extend .#{$vendor-prefix}carousel;
 
-    .carousel-items {
+    .#{$vendor-prefix}carousel-items {
         /* 1:1 ratio */
         padding-bottom: 100%;
     }

data/scss/toolkit/components/dropdown.scss

@@ -6,7 +6,7 @@
 
 @import "../common";
 
-.dropdown {
+.#{$vendor-prefix}dropdown {
     display: none;
     text-align: left;
     position: absolute;
@@ -21,7 +21,7 @@
     @include transition(opacity .3s);
 
     // Nested dropdowns
-    .dropdown {
+    .#{$vendor-prefix}dropdown {
         display: block;
         top: 0;
         left: 90%;
@@ -42,7 +42,7 @@
             }
         }
 
-        &.has-children {
+        &.#{$state-has-prefix}children {
             > a .caret-right { display: inline-block; }
         }
 
@@ -50,7 +50,7 @@
         &:hover {
             > a { background: $gray-lightest; }
 
-            .dropdown {
+            .#{$vendor-prefix}dropdown {
                 visibility: visible;
                 opacity: 1;
                 left: 100%;
@@ -64,46 +64,46 @@
     }
 }
 
-.dropdown,
-.dropdown ul {
+.#{$vendor-prefix}dropdown,
+.#{$vendor-prefix}dropdown ul {
     list-style: none;
     margin: 0;
     padding: 0;
 }
 
-.dropdown-divider {
+.#{$vendor-prefix}dropdown-divider {
     margin: ($margin / 2) 0;
     border-top: 1px solid $gray-dark;
 }
 
-.dropdown-heading {
+.#{$vendor-prefix}dropdown-heading {
     padding: $small-padding;
     background-color: $gray-dark;
 }
 
 //-------------------- Modifiers --------------------//
 
-.dropdown.on-top {
+.#{$vendor-prefix}dropdown.on-top {
     top: auto;
     bottom: 100%;
 }
 
-.dropdown.on-right {
+.#{$vendor-prefix}dropdown.on-right {
     top: auto;
     left: 100%;
 }
 
-.dropdown.on-left {
+.#{$vendor-prefix}dropdown.on-left {
     top: auto;
     left: auto;
     right: 100%;
 }
 
-.dropdown.push-over {
+.#{$vendor-prefix}dropdown.push-over {
     left: auto;
     right: 0;
 }
 
-.dropdown.pull-up {
+.#{$vendor-prefix}dropdown.pull-up {
     bottom: 0;
 }

data/scss/toolkit/components/flyout.scss

@@ -6,7 +6,7 @@
 
 @import "../common";
 
-.flyout {
+.#{$vendor-prefix}flyout {
     position: absolute;
     top: 0;
     left: 0;
@@ -39,19 +39,19 @@
 
         // Hover states
         > a:hover,
-        &.is-open > a {
+        &.#{$state-is-prefix}open > a {
             background: $gray-lightest;
         }
 
         // Display caret arrow
-        &.has-children > a .caret-right {
+        &.#{$state-has-prefix}children > a .caret-right {
             float: right;
             display: inline-block; // reveal
             margin-top: 3px;
         }
 
         // Nested flyouts
-        > .flyout {
+        > .#{$vendor-prefix}flyout {
             left: 90%;
             @include transition(left $flyout-transition, right $flyout-transition, opacity $flyout-transition);
 
@@ -63,7 +63,7 @@
             }
         }
 
-        &.is-open > .flyout {
+        &.#{$state-is-prefix}open > .#{$vendor-prefix}flyout {
             opacity: 1;
             visibility: visible;
             left: 100%;
@@ -78,7 +78,7 @@
     @include clear-fix;
 }
 
-.flyout-heading {
+.#{$vendor-prefix}flyout-heading {
     padding: $small-padding;
     line-height: 100%;
     display: block;

data/scss/toolkit/components/grid.scss

@@ -6,8 +6,8 @@
 
 @import "../common";
 
-.grid,
-.row {
+.#{$vendor-prefix}grid,
+.#{$vendor-prefix}row {
     @include grid-row;
 }
 

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

@@ -6,14 +6,15 @@
 
 @import "../common";
 
-.input-group {
+.#{$vendor-prefix}input-group {
     display: inline-block;
+    vertical-align: middle;
     white-space: nowrap;
 
-    > .input,
-    > .input-addon,
-    > .button,
-    > .button-group {
+    > .#{$vendor-prefix}input,
+    > .#{$vendor-prefix}input-addon,
+    > .#{$vendor-prefix}button,
+    > .#{$vendor-prefix}button-group {
         float: left;
         display: inline-block;
         position: relative;
@@ -31,7 +32,7 @@
     @include clear-fix;
 }
 
-.input-addon {
+.#{$vendor-prefix}input-addon {
     border: 1px solid $gray-dark;
     background: $gray;
     vertical-align: middle;
@@ -42,19 +43,19 @@
 
 //-------------------- Modifiers --------------------//
 
-.input-group.round {
-    > .input:first-child,
-    > .input-addon:first-child,
-    > .button:first-child,
-    > .button-group:first-child .button {
+.#{$vendor-prefix}input-group.round {
+    > .#{$vendor-prefix}input:first-child,
+    > .#{$vendor-prefix}input-addon:first-child,
+    > .#{$vendor-prefix}button:first-child,
+    > .#{$vendor-prefix}button-group:first-child .#{$vendor-prefix}button {
         border-top-left-radius: $round;
         border-bottom-left-radius: $round;
     }
 
-    > .input:last-child,
-    > .input-addon:last-child,
-    > .button:last-child,
-    > .button-group:last-child .button {
+    > .#{$vendor-prefix}input:last-child,
+    > .#{$vendor-prefix}input-addon:last-child,
+    > .#{$vendor-prefix}button:last-child,
+    > .#{$vendor-prefix}button-group:last-child .#{$vendor-prefix}button {
         border-top-right-radius: $round;
         border-bottom-right-radius: $round;
     }