titon-toolkit 0.12.0 → 0.13.2

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: de992c1916431b26684330ab1df388574d0ae49d
+  data.tar.gz: 0e17ab2af7435aeda9850eccad211a7afe821c7a
+SHA512:
+  metadata.gz: 4746b6feaac6014da48d36ae8c9093ace77898a9343fb8368d0ce9cc5924ee69f8731eab44c6bca6f1b7bd16055a3f23c35306eb1b96dd63b687f4e2967deb9e
+  data.tar.gz: eb3b5bc46f1fbaa51175397a18a48137602dd03dd24c0f1bdfd687dfa970a90b45080b9c8dacb24c8230879d4d4dffd34c9c53ebaea0ee6468ad37333dd1ad89

data/readme.md

@@ -1,4 +1,4 @@
-# Toolkit v0.12.0 #
+# Toolkit v0.13.2 #
 
 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.
@@ -7,7 +7,6 @@ Titon makes use of the latest and greatest technology. This includes CSS3 for an
 Sass for CSS pre-processing, Grunt for task and package management, and Intern for unit testing.
 
 #### Demo ####
-
 A temporary demo can be found here: http://titon.io/toolkit
 
 It's literally the examples folder within this repository.
@@ -43,10 +42,10 @@ It's literally the examples folder within this repository.
 
 **What about IE8 and 9?**
 
-Toolkit works in older versions of IE, but...
-IE8 does not support em/rem scaling, media queries, and other CSS3 properties, so default styles and functionality look janky.
-Both IE8 and IE9 do not support CSS transitions or animations, so animation falls back to a simple show/hide.
-Compatibility for these browsers will be added in due time.
+IE9 does not support CSS3 transitions and any type of animation 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).
 
 ## Javascript Components ##
 #### Modules ####
@@ -100,7 +99,7 @@ Titon also provides classes that build upon MooTools itself. These classes do no
 * `TomorrowNight` - Tomorrow Night theme for all Titon components
 
 ## Authors ##
-* Miles Johnson - https://github.com/milesj
+* [Miles Johnson](https://github.com/milesj)
 
 #### Third Party ####
 * `Normalize.css` provided by Nicolas Gallagher
@@ -109,5 +108,4 @@ Titon also provides classes that build upon MooTools itself. These classes do no
 ## Known Issues ##
 * Zepto is currently not supported (too different of an API)
 * Slide in modal animations do not work correctly in Chrome/IE
-* Flip modal animations do not work in Opera
-* Tooltip positioning does not work in Opera
+* Flip modal animations do not work in Opera

data/scss/ie8.scss

@@ -0,0 +1,177 @@
+/**
+ * @copyright   2010-2013, The Titon Project
+ * @license     http://opensource.org/licenses/bsd-license.php
+ * @link        http://titon.io
+ */
+
+$padding-small: 8px;
+$padding: 12px;
+$padding-large: 16px;
+$margin: 20px;
+
+$font-small: 12px;
+$font: 16px;
+$font-large: 20px;
+
+// IE8 does not support em/rem
+// So update padding, margin and font-size
+
+html, body { font-size: 14px; line-height: 150%; }
+
+h1 { font-size: 48px; }
+h2 { font-size: 40px; }
+h3 { font-size: 34px; }
+h4 { font-size: 28px; }
+h5 { font-size: 24px; }
+h6 { font-size: 18px; }
+
+.x { font-size: 24px; }
+
+.input,
+.input-static,
+.breadcrumbs a,
+.button {
+    font-size: $font;
+}
+
+code,
+var,
+kbd,
+pre,
+blockquote cite,
+.field-help,
+.breadcrumbs.small a,
+.button.small,
+.small .button {
+    font-size: $font-small;
+}
+
+legend,
+.breadcrumbs.large a,
+.button.large,
+.large .button {
+    font-size: $font-large;
+}
+
+.type-ahead-desc,
+.label,
+.badge,
+.progress-bar {
+    font-size: 9px;
+}
+
+pre,
+.input,
+.input-static,
+.form--horizontal .field-label,
+.input-addon,
+.table td,
+.table th,
+.table.table--sortable thead th a,
+.table.table--sortable thead th span,
+.accordion-head,
+.accordion-body,
+.carousel-caption,
+.carousel-prev,
+.carousel-next,
+.carousel-tabs,
+.modal-head,
+.modal-body,
+.modal-foot,
+.modal-loading,
+.modal-error,
+.showcase-inner,
+.showcase-caption,
+.showcase-prev,
+.showcase-next,
+.showcase-tabs,
+.alert,
+.breadcrumbs a,
+.button {
+    padding: $padding;
+}
+
+.table.table--compact thead th,
+.table.table--compact thead td,
+.table.table--compact.table--sortable thead th a,
+.table.table--compact.table--sortable thead th span,
+.flyout ul li > a,
+.flyout ul li > .divider,
+.popover-head,
+.popover-body,
+.tooltip,
+.type-ahead ul li a
+.type-ahead ul li.heading,
+.breadcrumbs.small a,
+.button.small,
+.small .button,
+.dropdown li > a,
+.dropdown li.heading,
+.type-ahead ul a {
+    padding: $padding-small;
+}
+
+.breadcrumbs.large a,
+.button.large,
+.large .button {
+    padding: $padding-large;
+}
+
+fieldset { padding: $padding 0; }
+blockquote { padding: 0 $padding; }
+legend { padding-right: $padding; }
+
+pre, p, ul, ol, hr,
+.alert,
+.breadcrumbs,
+.pagination {
+    margin: $margin 0;
+}
+
+blockquote { margin: $margin; }
+
+.alert .close,
+.button-group + .button-group {
+    margin-left: $margin;
+}
+
+.field,
+.tabs-nav {
+    margin-bottom: $margin;
+}
+
+.form--inline .field,
+.form--inline .field-label,
+.form--inline .form-actions {
+    margin-right: $margin;
+    margin-bottom: $margin / 2;
+}
+
+.form--inline  .field-label { margin: 0 ($margin / 2) 0 0; }
+.form--horizontal .field-col { padding-left: $margin; }
+.alert-title { margin: 0 0 ($margin / 2) 0; }
+.dropdown li.divider { margin: ($margin / 2) 0; }
+.pagination li { margin-right: $padding / 2; }
+
+.showcase-tabs { top: $padding; }
+.showcase-prev { left: $padding; }
+.showcase-next { right: $padding; }
+
+// IE8 does not support rgba
+// So use solid colors instead
+
+.close .x { color: #000; }
+.close:hover { background: #fff; }
+
+.blackout { background: #000; filter: alpha(opacity=50); }
+
+.carousel-caption,
+.showcase-caption { background: #000; filter: alpha(opacity=70); }
+
+.carousel-tabs,
+.showcase-tabs { left: auto; right: auto; }
+
+.showcase-next,
+.showcase-prev,
+.carousel-next,
+.carousel-prev { margin-top: -20px; }

data/scss/toolkit.scss

@@ -6,6 +6,8 @@
 
 @import "normalize";
 @import "toolkit/common";
+
+// Basic layout styles should come first
 @import "toolkit/layout/base";
 @import "toolkit/layout/typography";
 @import "toolkit/layout/grid";
@@ -13,7 +15,8 @@
 @import "toolkit/layout/input-group";
 @import "toolkit/layout/code";
 @import "toolkit/layout/table";
-@import "toolkit/layout/responsive";
+
+// Then basic UI styles
 @import "toolkit/ui/alert";
 @import "toolkit/ui/breadcrumbs";
 @import "toolkit/ui/button";
@@ -26,6 +29,8 @@
 @import "toolkit/ui/pagination";
 @import "toolkit/ui/pin";
 @import "toolkit/ui/progress";
+
+// And more advanced UI styles last
 @import "toolkit/modules/accordion";
 @import "toolkit/modules/blackout";
 @import "toolkit/modules/carousel";
@@ -36,4 +41,12 @@
 @import "toolkit/modules/tabs";
 @import "toolkit/modules/tooltip";
 @import "toolkit/modules/type-ahead";
-@import "toolkit/effects/visual";
+
+// And visual effects very last
+@import "toolkit/effects/visual";
+@import "toolkit/effects/pill";
+@import "toolkit/effects/oval";
+@import "toolkit/effects/skew";
+
+// Place it last so it overrides other elements
+@import "toolkit/layout/responsive";

data/scss/toolkit/_variables.scss

@@ -56,4 +56,8 @@ $oval-y: 2.75rem !default;
 $skew-x: 1rem !default;
 $skew-y: 3rem !default;
 $skew: $skew-x $skew-y;
-$skew-reverse: $skew-y $skew-x;
+$skew-reverse: $skew-y $skew-x;
+
+//-------------------- Misc --------------------//
+
+$default-transition: .3s !default;

data/scss/toolkit/effects/oval.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";
+
+//-------------------- Button --------------------//
+
+.button.oval { border-radius: #{$oval-x} / #{$oval-y}; }
+
+//-------------------- Pagination --------------------//
+
+.pagination.pagination--grouped.oval {
+    ul {
+        border-radius: #{$oval-x} / #{$oval-y};
+    }
+
+    li:first-child .button {
+        border-radius: #{$oval-x} 0 0 #{$oval-x} / #{$oval-y} 0 0 #{$oval-y};
+    }
+
+    li:last-child .button {
+        border-radius: 0 #{$oval-x} #{$oval-x} 0 / 0 #{$oval-y} #{$oval-y} 0;
+    }
+}
+
+//-------------------- Visual --------------------//
+
+.visual-gloss.oval:after {
+    width: 90%;
+    left: 5.5%;
+    border-radius: 5rem 5rem 4rem 4rem / 1.5rem 1.5rem 1.5rem 1.5rem;
+}

data/scss/toolkit/effects/pill.scss

@@ -0,0 +1,75 @@
+/**
+ * @copyright   2010-2013, The Titon Project
+ * @license     http://opensource.org/licenses/bsd-license.php
+ * @link        http://titon.io
+ */
+
+@import "../common";
+
+//-------------------- Button --------------------//
+
+.button.pill { border-radius: $pill; }
+
+//-------------------- ButtonGroup --------------------//
+
+.button-group.pill {
+    border-radius: $pill;
+
+    > li:first-child .button,
+    > .button:first-child,
+    > .button.first {
+        border-top-left-radius: $pill;
+        border-bottom-left-radius: $pill;
+    }
+
+    > li:last-child .button,
+    > .button:last-child,
+    > .button.last {
+        border-top-right-radius: $pill;
+        border-bottom-right-radius: $pill;
+    }
+}
+
+.button-group.button-group--vertical.pill {
+    border-radius: $pill;
+
+    .button { border-radius: 0; }
+
+    > li:first-child .button,
+    > .button:first-child {
+        border-top-left-radius: $pill;
+        border-top-right-radius: $pill;
+    }
+
+    > li:last-child .button,
+    > .button:last-child {
+        border-bottom-left-radius: $pill;
+        border-bottom-right-radius: $pill;
+    }
+}
+
+//-------------------- Pagination --------------------//
+
+.pagination.pagination--grouped.pill {
+    ul {
+        border-radius: $pill;
+    }
+
+    li:first-child .button {
+        border-top-left-radius: $pill;
+        border-bottom-left-radius: $pill;
+    }
+
+    li:last-child .button {
+        border-top-right-radius: $pill;
+        border-bottom-right-radius: $pill;
+    }
+}
+
+//-------------------- Visual --------------------//
+
+.visual-gloss.pill:after {
+    width: 90%;
+    left: 5.5%;
+    border-radius: 1rem 1rem 2rem 2rem / 1rem 1rem 1rem 1rem;
+}

data/scss/toolkit/effects/skew.scss

@@ -0,0 +1,91 @@
+/**
+ * @copyright   2010-2013, The Titon Project
+ * @license     http://opensource.org/licenses/bsd-license.php
+ * @link        http://titon.io
+ */
+
+@import "../common";
+
+//-------------------- Button --------------------//
+
+.button.skew { border-radius: #{$skew-x $skew-x} 0 0 / #{$skew-y $skew-y} 0 0; }
+
+//-------------------- ButtonGroup --------------------//
+
+.button-group.skew {
+    border-top-left-radius: $skew;
+    border-top-right-radius: $skew;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+
+    > li:first-child .button,
+    > .button:first-child,
+    > .button.first {
+        border-top-left-radius: $skew;
+        border-bottom-left-radius: 0;
+    }
+
+    > li:last-child .button,
+    > .button:last-child,
+    > .button.last {
+        border-top-right-radius: $skew;
+        border-bottom-right-radius: 0;
+    }
+}
+
+.button-group.button-group--vertical {
+    &.skew {
+        border-top-left-radius: $skew-y 1.5rem;
+        border-bottom-left-radius: $skew-y 1.5rem;
+
+        > li:first-child .button,
+        > .button:first-child {
+            border-top-left-radius: $skew-reverse;
+        }
+
+        > li:last-child .button,
+        > .button:last-child {
+            border-bottom-left-radius: $skew-reverse;
+            border-top-right-radius: 0;
+        }
+    }
+
+    &.skew-reverse {
+        border-top-right-radius: $skew-y 1.25rem;
+        border-bottom-right-radius: $skew-y 1.25rem;
+
+        > li:first-child .button,
+        > .button:first-child {
+            border-top-right-radius: $skew-reverse;
+        }
+
+        > li:last-child .button,
+        > .button:last-child {
+            border-bottom-right-radius: $skew-reverse;
+        }
+    }
+}
+
+//-------------------- Pagination --------------------//
+
+.pagination.pagination--grouped.skew {
+    ul {
+        border-radius: #{$skew-x $skew-x} 0 0 / #{$skew-y $skew-y} 0 0;
+    }
+
+    li:first-child .button {
+        border-radius: #{$skew-x} 0 0 0 / #{$skew-y} 0 0 0;
+    }
+
+    li:last-child .button {
+        border-radius: 0 #{$skew-x} 0 0 / 0 #{$skew-y} 0 0;
+    }
+}
+
+//-------------------- Visual --------------------//
+
+.visual-gloss.skew:after {
+    width: 90%;
+    left: 5.5%;
+    border-radius: 1rem 1rem 3rem 3rem / 1rem 1rem 2rem 2rem;
+}