titon-toolkit 1.5.3 → 2.0.0.pre.rc.1

data/scss/toolkit/components/tooltip.scss

@@ -1,5 +1,5 @@
 /**
- * @copyright   2010-2014, The Titon Project
+ * @copyright   2010-2015, The Titon Project
  * @license     http://opensource.org/licenses/BSD-3-Clause
  * @link        http://titon.io
  */
@@ -8,7 +8,7 @@
 
 $tooltip-arrow-width-double: ($tooltip-arrow-width * 2);
 
-.#{$vendor-prefix}tooltip {
+#{$tooltip-class} {
     position: absolute;
     top: 0;
     left: 0;
@@ -20,49 +20,48 @@ $tooltip-arrow-width-double: ($tooltip-arrow-width * 2);
     visibility: hidden;
     background: #000;
     color: #fff;
-    box-sizing: content-box; // Required or else MooTools position() is off
 
-    &.center-left .#{$vendor-prefix}tooltip-arrow,
-    &.center-right .#{$vendor-prefix}tooltip-arrow {
+    &.center-left #{$tooltip-class-arrow},
+    &.center-right #{$tooltip-class-arrow} {
         top: 50%;
         margin-top: -#{$tooltip-arrow-width}px;
     }
 
-    &.center-left .#{$vendor-prefix}tooltip-arrow {
+    &.center-left #{$tooltip-class-arrow} {
         border-left-color: #000;
         right: -#{$tooltip-arrow-width-double}px;
     }
 
-    &.center-right .#{$vendor-prefix}tooltip-arrow {
+    &.center-right #{$tooltip-class-arrow} {
         border-right-color: #000;
         left: -#{$tooltip-arrow-width-double}px;
     }
 
-    &.top-center .#{$vendor-prefix}tooltip-arrow,
-    &.bottom-center .#{$vendor-prefix}tooltip-arrow {
+    &.top-center #{$tooltip-class-arrow},
+    &.bottom-center #{$tooltip-class-arrow} {
         left: 50%;
         margin-left: -#{$tooltip-arrow-width}px;
     }
 
-    &.top-center .#{$vendor-prefix}tooltip-arrow {
+    &.top-center #{$tooltip-class-arrow} {
         border-top-color: #000;
         bottom: -#{$tooltip-arrow-width-double}px;
     }
 
-    &.bottom-center .#{$vendor-prefix}tooltip-arrow {
+    &.bottom-center #{$tooltip-class-arrow} {
         border-bottom-color: #000;
         top: -#{$tooltip-arrow-width-double}px;
     }
 }
 
-.#{$vendor-prefix}tooltip-arrow,
-.#{$vendor-prefix}popover-arrow {
+#{$tooltip-class-arrow},
+#{$popover-class-arrow} {
     width: 0;
     height: 0;
     border: #{$tooltip-arrow-width}px solid transparent;
     position: absolute;
 
-    &:after {
+    &::after {
         content: "";
         border: #{($tooltip-arrow-width - 2)}px solid transparent;
         position: absolute;
@@ -71,8 +70,8 @@ $tooltip-arrow-width-double: ($tooltip-arrow-width * 2);
 
 //-------------------- Animations --------------------//
 
-.#{$vendor-prefix}tooltip,
-.#{$vendor-prefix}popover {
+#{$tooltip-class},
+#{$popover-class} {
     #{join-classes($popover-tooltip-animation)} {
         transition: opacity $tooltip-transition, visibility $tooltip-transition, transform $tooltip-transition;
     }

data/scss/toolkit/components/type-ahead.scss

@@ -1,12 +1,12 @@
 /**
- * @copyright   2010-2014, The Titon Project
+ * @copyright   2010-2015, The Titon Project
  * @license     http://opensource.org/licenses/BSD-3-Clause
  * @link        http://titon.io
  */
 
 @import "../common";
 
-.#{$vendor-prefix}type-ahead {
+#{$typeAhead-class} {
     position: absolute;
     top: 0;
     left: 0;
@@ -37,24 +37,24 @@
     }
 }
 
-.#{$vendor-prefix}type-ahead-heading {
+#{$typeAhead-class-heading} {
     padding: $small-padding;
     line-height: 100%;
     display: block;
     text-decoration: none;
 }
 
-.#{$vendor-prefix}type-ahead-highlight {
+#{$typeAhead-class-highlight} {
     background: #fff;
     padding: 0;
 }
 
-.#{$vendor-prefix}type-ahead-desc {
+#{$typeAhead-class-description} {
     display: block;
     font-size: .7rem;
 }
 
-.#{$vendor-prefix}type-ahead-shadow {
+#{$typeAhead-class-shadow} {
     position: relative;
 
     .is-shadow {

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

@@ -1,5 +1,5 @@
 /**
- * @copyright   2010-2014, The Titon Project
+ * @copyright   2010-2015, The Titon Project
  * @license     http://opensource.org/licenses/BSD-3-Clause
  * @link        http://titon.io
  */
@@ -43,7 +43,7 @@ blockquote {
     border-left: 5px solid $gray;
 
     cite { display: block; font-size: $small-size; }
-    cite:before { content: "\2014 \00A0"; /* em dash */ }
+    cite::before { content: "\2014 \00A0"; /* em dash */ }
 }
 
 mark {

data/scss/toolkit/mixins/_components.scss

@@ -1,16 +1,22 @@
 
 @mixin button-group-first-child {
-    > li:first-child .#{$vendor-prefix}button,
-    > .#{$vendor-prefix}button:first-child,
-    > .#{$vendor-prefix}button.first {
+    > li:first-child #{$button-class},
+    > #{$button-class}:first-child {
         @content;
     }
 }
 
 @mixin button-group-last-child {
-    > li:last-child .#{$vendor-prefix}button,
-    > .#{$vendor-prefix}button:last-child,
-    > .#{$vendor-prefix}button.last {
+    > li:last-child #{$button-class},
+    > #{$button-class}:last-child {
         @content;
     }
+}
+
+@mixin responsive-display-block($class) {
+    #{$class} { display: block !important; }
+    table#{$class} { display: table !important; }
+    tr#{$class} { display: table-row !important; }
+    td#{$class},
+    th#{$class} { display: table-cell !important; }
 }

data/scss/toolkit/mixins/_grid.scss

@@ -49,4 +49,8 @@
 
         &:last-child { margin-right: 0; }
     }
-}
+}
+
+// Placeholder styles to extend from
+%row { @include grid-row; }
+%col { @include grid-column; }

data/scss/toolkit/mixins/_helper.scss

@@ -9,17 +9,56 @@
     @return rgba(255, 255, 255, $opacity);
 }
 
-// Take a list of classes (without .) and generate a selector list
+// Take a list of classes and generate a selector list
 @function join-classes($classes, $inherit: true) {
     $selectors: ();
 
     @each $class in $classes {
+        @if str-index($class, ".") != 0 {
+            $class: "." + $class;
+        }
+
         @if $inherit {
-            $selectors: $selectors, unquote("&." + $class);
+            $selectors: $selectors, unquote("&" + $class);
         } @else {
-            $selectors: $selectors, unquote("." + $class);
+            $selectors: $selectors, unquote($class);
         }
     }
 
     @return $selectors;
+}
+
+// Remove the first selector character (#, ., etc) from the class name or ID
+@function remove-selector-char($selector) {
+    @return str-slice($selector, 2, str-length($selector));
+}
+
+// Generate a class name and apply an optional prefix
+@function class-name($class, $prefix: $vendor-prefix, $selector: ".") {
+    $name: $class;
+
+    @if str_slice($class, 1, 1) == $selector {
+        $name: remove-selector-char($name);
+    }
+
+    @if $prefix != "" {
+        $name: $prefix + $name;
+    }
+
+    @return $selector + $name;
+}
+
+// Format a class name into the BEM format
+@function bem($block: "", $element: "", $modifier: "", $element-separator: $bem-element-separator, $modifier-separator: $bem-modifier-separator) {
+    $name: $block;
+
+    @if $element != "" {
+        $name: $name + $element-separator + $element;
+    }
+
+    @if $modifier != "" {
+        $name: $name + $modifier-separator + $modifier;
+    }
+
+    @return $name;
 }

data/scss/toolkit/mixins/_layout.scss

@@ -1,7 +1,7 @@
 
 // Container clear fix for floats
 @mixin clear-fix {
-    &:after {
+    &::after {
         content: "";
         display: table;
         clear: both;
@@ -22,6 +22,17 @@
     padding: 0;
 }
 
+// Position an element to take up the whole screen
+@mixin full-screen($position: fixed) {
+    @if ($position != "") {
+        position: $position;
+    }
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+}
+
 // Align an element in the center of another element
 @mixin position-center {
     position: absolute;
@@ -50,11 +61,11 @@
     $selectors: ();
 
     @if $self {
-        $selectors: $selectors, unquote("&." + $size);
+        $selectors: $selectors, unquote("&" + $size);
     }
 
     @if $parent {
-        $selectors: $selectors, unquote("." + $size + " &");
+        $selectors: $selectors, unquote($size + " &");
     }
 
     #{$selectors} {
@@ -63,19 +74,17 @@
 }
 
 @mixin is-small($self: true, $parent: false) {
-    @include is-size($size-small-class, $self, $parent) {
-        @content;
-    }
-}
-
-@mixin is-medium($self: true, $parent: false) {
-    @include is-size($size-medium-class, $self, $parent) {
-        @content;
+    @if $enable-small-size {
+        @include is-size($size-small-class, $self, $parent) {
+            @content;
+        }
     }
 }
 
 @mixin is-large($self: true, $parent: false) {
-    @include is-size($size-large-class, $self, $parent) {
-        @content;
+    @if $enable-large-size {
+        @include is-size($size-large-class, $self, $parent) {
+            @content;
+        }
     }
 }

data/scss/toolkit/mixins/_responsive.scss

@@ -67,88 +67,88 @@
 
 //-------------------- Breakpoints --------------------//
 
-// Uses min or max
-@mixin if-desktop {
-    @include do-responsive(null, $breakpoint-tablet-landscape) {
+@mixin if-xlarge() {
+    @include do-responsive(nth($breakpoint-range-xlarge, 2), nth($breakpoint-range-xlarge, 1)) {
         @content;
     }
 }
 
-@mixin if-tablet-landscape {
-    @include do-responsive($breakpoint-tablet-landscape, $breakpoint-tablet-portrait) {
+@mixin if-large() {
+    @include do-responsive(nth($breakpoint-range-large, 2), nth($breakpoint-range-large, 1)) {
         @content;
     }
 }
 
-@mixin if-tablet-portrait {
-    @include do-responsive($breakpoint-tablet-portrait, $breakpoint-mobile-landscape) {
+@mixin if-medium() {
+    @include do-responsive(nth($breakpoint-range-medium, 2), nth($breakpoint-range-medium, 1)) {
         @content;
     }
 }
 
-@mixin if-mobile-landscape {
-    @include do-responsive($breakpoint-mobile-landscape, $breakpoint-mobile-portrait) {
+@mixin if-small() {
+    @include do-responsive(nth($breakpoint-range-small, 2), nth($breakpoint-range-small, 1)) {
         @content;
     }
 }
 
-@mixin if-mobile-portrait {
-    @include do-responsive($breakpoint-mobile-portrait, null) {
+@mixin if-xsmall() {
+    @include do-responsive(nth($breakpoint-range-xsmall, 2), nth($breakpoint-range-xsmall, 1)) {
         @content;
     }
 }
 
-@mixin if-large() {
-    @include do-responsive($breakpoint-large, $breakpoint-medium) {
-        @content;
+// Within 2 ranges
+@mixin in-range($range) {
+    @if type-of($range) != 'list' {
+        @warn "in-range() requires a list with a min and max value";
     }
-}
 
-@mixin if-medium() {
-    @include do-responsive($breakpoint-medium, $breakpoint-small) {
-        @content;
-    }
-}
+    $min: nth($range, 1);
+    $max: nth($range, 2);
 
-@mixin if-small() {
-    @include do-responsive($breakpoint-small, null) {
-        @content;
-    }
-}
+    @if $min and $max {
+        @include if-min-max($min, $max) {
+            @content;
+        }
 
-// Within 2 ranges
-@mixin in-desktop {
-    @include if-min($breakpoint-tablet-landscape + 1) {
-        @content;
-    }
-}
+    } @else if $min {
+        @include if-min($min) {
+            @content;
+        }
 
-@mixin in-tablet {
-    @include if-min-max($breakpoint-mobile-landscape + 1, $breakpoint-tablet-landscape) {
-        @content;
+    } @else if $max {
+        @include if-max($max) {
+            @content;
+        }
     }
 }
 
-@mixin in-mobile {
-    @include if-max($breakpoint-mobile-landscape)  {
+@mixin in-xlarge {
+    @include in-range($breakpoint-range-xlarge) {
         @content;
     }
 }
 
 @mixin in-large {
-    @include if-min($breakpoint-medium + 1) {
+    @include in-range($breakpoint-range-large) {
         @content;
     }
 }
 
 @mixin in-medium {
-    @include if-min-max($breakpoint-small + 1, $breakpoint-medium) {
+    @include in-range($breakpoint-range-medium) {
         @content;
     }
 }
 
 @mixin in-small {
-    @include if-max($breakpoint-small) {
+    @include in-range($breakpoint-range-small) {
+        @content;
+    }
+}
+
+@mixin in-xsmall {
+    @include in-range($breakpoint-range-xsmall) {
         @content;
     }
 }

data/scss/toolkit.scss

@@ -1,5 +1,5 @@
 /**
- * @copyright   2010-2014, The Titon Project
+ * @copyright   2010-2015, The Titon Project
  * @license     http://opensource.org/licenses/BSD-3-Clause
  * @link        http://titon.io
  */
@@ -7,19 +7,19 @@
 @import "normalize";
 @import "toolkit/common";
 
-// Basic layout styles should come first
-@import "toolkit/layout/base";
-@import "toolkit/layout/typography";
-@import "toolkit/layout/form";
-@import "toolkit/layout/code";
+// Shared layout styles
+@import "toolkit/base";
+@import "toolkit/components/typography";
+@import "toolkit/components/form";
+@import "toolkit/components/code";
 
-// Then basic UI styles
-@import "toolkit/components/grid";
+// Basic UI styles
 @import "toolkit/components/breadcrumb";
 @import "toolkit/components/button";
 @import "toolkit/components/button-group";
 @import "toolkit/components/divider";
 @import "toolkit/components/drop";
+@import "toolkit/components/grid";
 @import "toolkit/components/icon";
 @import "toolkit/components/input";
 @import "toolkit/components/input-group";
@@ -32,7 +32,7 @@
 @import "toolkit/components/switch";
 @import "toolkit/components/table";
 
-// And more advanced UI styles last
+// Advanced UI styles
 @import "toolkit/components/accordion";
 @import "toolkit/components/blackout";
 @import "toolkit/components/carousel";
@@ -45,16 +45,10 @@
 @import "toolkit/components/pin";
 @import "toolkit/components/popover";
 @import "toolkit/components/showcase";
-@import "toolkit/components/tabs";
+@import "toolkit/components/tab";
 @import "toolkit/components/toast";
 @import "toolkit/components/tooltip";
 @import "toolkit/components/type-ahead";
 
-// 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";
+// Responsive should be last to override previous styles
+@import "toolkit/components/responsive";

data/version.md

@@ -1 +1 @@
-1.5.3
+2.0.0-rc.1

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: titon-toolkit
 version: !ruby/object:Gem::Version
-  version: 1.5.3
+  version: 2.0.0.pre.rc.1
 platform: ruby
 authors:
 - Project Titon
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-09-30 00:00:00.000000000 Z
+date: 2014-11-20 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
@@ -17,30 +17,30 @@ dependencies:
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 3.2.0
+        version: 3.4.0
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 3.2.0
+        version: 3.4.0
 - !ruby/object:Gem::Dependency
   name: compass
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: '0.11'
+        version: 1.0.0
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: '0.11'
-description: A collection of extensible front-end UI components for the responsive
-  and mobile web.
+        version: 1.0.0
+description: A collection of extensible front-end UI components and behaviors for
+  the responsive and mobile web.
 email: 
 executables: []
 extensions: []
@@ -54,15 +54,18 @@ files:
 - scss/normalize.scss
 - scss/toolkit.scss
 - scss/toolkit/_common.scss
+- scss/toolkit/base.scss
 - scss/toolkit/components/accordion.scss
 - scss/toolkit/components/blackout.scss
 - scss/toolkit/components/breadcrumb.scss
 - scss/toolkit/components/button-group.scss
 - scss/toolkit/components/button.scss
 - scss/toolkit/components/carousel.scss
+- scss/toolkit/components/code.scss
 - scss/toolkit/components/divider.scss
 - scss/toolkit/components/drop.scss
 - scss/toolkit/components/flyout.scss
+- scss/toolkit/components/form.scss
 - scss/toolkit/components/grid.scss
 - scss/toolkit/components/icon.scss
 - scss/toolkit/components/input-group.scss
@@ -79,31 +82,22 @@ files:
 - scss/toolkit/components/pin.scss
 - scss/toolkit/components/popover.scss
 - scss/toolkit/components/progress.scss
+- scss/toolkit/components/responsive.scss
 - scss/toolkit/components/showcase.scss
 - scss/toolkit/components/step.scss
 - scss/toolkit/components/switch.scss
+- scss/toolkit/components/tab.scss
 - scss/toolkit/components/table.scss
-- scss/toolkit/components/tabs.scss
 - scss/toolkit/components/toast.scss
 - scss/toolkit/components/tooltip.scss
 - scss/toolkit/components/type-ahead.scss
-- scss/toolkit/effects/oval.scss
-- scss/toolkit/effects/pill.scss
-- scss/toolkit/effects/skew.scss
-- scss/toolkit/effects/visual.scss
-- scss/toolkit/layout/base.scss
-- scss/toolkit/layout/code.scss
-- scss/toolkit/layout/form.scss
-- scss/toolkit/layout/responsive.scss
-- scss/toolkit/layout/typography.scss
+- scss/toolkit/components/typography.scss
 - scss/toolkit/mixins/_components.scss
 - scss/toolkit/mixins/_grid.scss
 - scss/toolkit/mixins/_helper.scss
 - scss/toolkit/mixins/_layout.scss
 - scss/toolkit/mixins/_responsive.scss
-- scss/toolkit/mixins/_state.scss
 - scss/toolkit/mixins/_unit.scss
-- scss/toolkit/themes/demo.scss
 - version.md
 homepage: http://titon.io
 licenses:
@@ -120,9 +114,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">="
+  - - ">"
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 1.3.1
 requirements: []
 rubyforge_project: 
 rubygems_version: 2.4.1

data/scss/toolkit/components/tabs.scss

@@ -1,43 +0,0 @@
-/**
- * @copyright   2010-2014, The Titon Project
- * @license     http://opensource.org/licenses/BSD-3-Clause
- * @link        http://titon.io
- */
-
-@import "../common";
-
-// Need a property for @extend to work
-.#{$vendor-prefix}tabs {
-    text-align: left;
-}
-
-.#{$vendor-prefix}tabs-nav {
-    display: block;
-    margin-bottom: $margin;
-
-    ul, ol, li {
-        @include reset-list;
-        display: inline-block;
-    }
-
-    @include clear-fix;
-}
-
-// Add display none on sections since visibility takes up DOM space
-.#{$vendor-prefix}tabs-section.hide {
-    display: none;
-}
-
-//-------------------- Modifiers --------------------//
-
-.#{$vendor-prefix}tabs--horizontal {
-    @extend .#{$vendor-prefix}tabs;
-
-    .#{$vendor-prefix}tabs-nav {
-        ul, ol, li, a, button {
-            display: block;
-            float: none;
-            text-align: left;
-        }
-    }
-}