titon-toolkit 1.4.1 → 1.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 195a933c7b9058f27df45b0d592f37a9932f5fd4
-  data.tar.gz: b58d6d2050d5a15b8213f1205145852c30b9ec98
+  metadata.gz: 959fa16dce559a416ede9981488647339afaeaf0
+  data.tar.gz: 4b7341c9f06fe1dff09ad129a32c333b3309a7fb
 SHA512:
-  metadata.gz: c26c3be835025c74083bc97cd9574a120f252f44ca84789692199232512db88f159b3278c1242163adb3ba9e7ca5c4b0b49f096279fe46c915c5b29b4b74f7ec
-  data.tar.gz: 136fa057c8c1c8c5b041a9cf01f878571c1bbf3c0ca92e31140f98d76320ae8416039c13be5829b8560a90796299d550ecc5baff2a5d5ec506802a7c5ffd7a5d
+  metadata.gz: 3b3d93fd3b1ac523ef602fd3e588246716c622064ea41350a7c3512394665513c46357a90e8717112f0f20c86d26b785cd0e578cddbfeacf51a673a4c1e7f8f8
+  data.tar.gz: 1e6d8f61a45f2938e3bdf74a46e0c959ed9cc48e211f6f8c6c57c9e113a620711a924ab354f68bb2faf8286d4c20252f75d79e741321ba907a6947dad20696f1

data/changelog.md

@@ -2,91 +2,46 @@
 
 Older versions can be found in the documentation changelogs.
 
-## 1.4.1 ##
-* Added `opacity: 0` to `.hide` for easier fade transitions
-* Improved fade transitions within all components
-* Fixed a bug with swipe not working on Android
-* Fixed a bug with certain elements not showing in iOS
-* OffCanvas
-    * Added `primary` and `secondary` properties
-    * Added `stopScroll` option
-* Popover, Tooltip
-    * Fixed a bug where the arrow was being removed before the transition ended
-* Type Ahead
-    * Added `$typeAhead-transition`
+## 1.5.0 ##
+This minor release includes a new responsive option, a major overhaul of the Carousel component,
+and a complete refactor of the demo system. It also marks the final minor release before the 2.0 major version.
 
-## 1.4.0 ##
-This minor release includes 3 new components, a new `destroy()` method,
-a cleanup of element and event options, expanded documentation, and a handful of optimization improvements.
-
-* Usage license has been updated to BSD-3 from BSD-2
-* MooTools support is slowly being phased out and new components are not supported
-* Added new Divider component for separating content
-* Added new Off Canvas component for displaying sidebars outside the viewport
-* Added new Toast component for notifying users with timed messages
-* Added `.no-transition` class to disable transitions
-* Added `.sr-only` class for screen readers
-* Added `suppression` setting for swipe events
-* Fixed a bug with `swipe` events where select dropdowns would stop working
-* Fixed a bug with `swipe` events where page scrolling gets disabled
-* Fixed a bug with certain fade animations
-* Fixed a bug where certain Sass variables were not customizable
-* Removed `$shape-square-class` Sass variable
-* Removed `*Element` options (CSS classes are now hardcoded)
-* Removed `*Event` options (CSS classes are now hardcoded)
-* Toolkit
-    * Added `toolkit(component, method, args)` support for triggering methods on the class instance
-    * Added `transitionEnd` flag
-    * Refactored `toolkit()` to return a single instance instead of multiple instances
-    * Removed `i()` and `item()` jQuery collection methods
-* Component
-    * Added a `initialize()` method that is triggered within all constructors
-    * Added a `destroy()` method that will unbind all events, remove elements, and delete the instance
-    * Added automatic `this` scope binding to all methods on a class instance
-    * Refactored `bindEvents()` with an easier lightweight syntax
-* Accordion
-    * Removed `headerElement`, `sectionElement` options
-* Blackout
-    * Fixed incorrect `.loader-spinner` class
+* MooTools support is slowly being phased out and JavaScript changes have not been ported
+* Added `$.fn.transitionend()` which will set a `transitionend` event if transitions have been defined on the element,
+    else it will execute the callback immediately
+* Added a global `responsive` component option that allows for different options to be set depending on breakpoints
+* Updated `$.fn.positionTo()` to re-position accordingly when a mouse event is being used as the offset
+* Button Group
+    * Fixed a bug with incorrect button widths when the `vertical` modifier is used
 * Carousel
-    * Removed `nextButton`, `prevButton` properties
-    * Removed `itemsElement`, `tabsElement`, `nextElement`, `prevElement` options
-* Code
-    * Added overflow scrolling for touch devices
-* Flyout
-    * Disabled automatically for touch devices
-    * Removed `contentElement` option
-* Input
-    * Added `hideOpened` option to selects to hide other opened selects
-    * Updated `native` option value to be `Toolkit.isTouch` by default
+    * Added a `container` property which is the parent element for `items`
+    * Added a `animating` property that represents whether the items are currently animating
+    * Added a `calculate()` method that resizes the carousel based on the window size and defined options
+    * Added a `infinite` option which allows for infinite cycling in either direction
+    * Added a `loop` option which rewinds the cycle pointer to the beginning or end when the opposite edge is reached
+        (only applicable when `infinite` is disabled)
+    * Added a `reverse` option to reverse the automatic cycle direction
+    * Added a `itemsToShow` option which is used for displaying a specific number of items at once
+    * Added a `itemsToCycle` option which is used as the number of items to move when a cycle occurs
+    * Added a `defaultIndex` option which displays that item on initial page load
+    * Added `.no-next` and `.no-prev` classes to the component to hide navigation buttons
+    * Added `.carousel-stop` and `.carousel-start` as elements to delegate events to
+    * Removed `.carousel-caption` styles
+* Form
+    * Added `.fields` which can be coupled with list elements to mimic `.field`
 * Lazy Load
-    * Removed `isLoaded` property
-* Mask
-    * Added `selector` option to bind toggle events to
-    * Renamed `.maskable` to `.mask-target`
-    * Removed `messageElement` option
-* Modal
-    * Added `$modal-mobile-breakpoint` to apply mobile widths to the modal
-    * Added `submit()` method for submitting forms
-    * Updated with new markup
-    * Renamed `.modal-event-submit` to `.modal-submit`
-    * Renamed `.modal-event-close` to `.modal-hide`
-    * Removed `.modal-handle` within the template
-    * Removed `elementBody` property
-    * Removed `contentElement`, `closeElement`, `closeEvent`, `submitEvent` options
-    * Removed `sticky-*` animations
-* Popover, Tooltip
-    * Removed `titleElement`, `contentElement` options
+    * Fixed a bug where offsets were incorrect when the parent with overflow was not the direct parent
+* Matrix
+    * Fixed a bug where multiple spanning items break when the span is larger than the column count
+    * Updated image pre-loading to use deferred promises
+    * Removed `imagesLoaded` property
+    * Removed `onLoad` method
+* Pin
+    * Fixed a bug where `yOffset` was not being applied for `fixed` pins
+* Popover
+    * Fixed a bug when no options were passed to the constructor
 * Showcase
-    * Updated with new markup
-    * Renamed `.showcase-event-prev` to `.showcase-prev`
-    * Renamed `.showcase-event-next` to `.showcase-next`
-    * Renamed `.showcase-event-close` to `.showcase-hide`
-    * Renamed `.showcase-event-jump` to `.showcase-tabs a`
-    * Removed `nextButton`, `prevButton` properties
-    * Removed `transition`, `itemsElement`, `tabsElement`, `prevElement`, `nextElement`,
-        `closeEvent`, `jumpEvent`, `prevEvent`, `nextEvent` options
-* Tabs
-    * Removed `navElement`, `sectionElement` options
-* Type Ahead
-    * Removed `contentElement` option
+    * Updated item cycling to use deferred promises
+    * Added a `animating` property that represents whether the items are currently animating
+    * Fixed a bug where gutter was not being applied correctly
+    * Fixed a bug where the incorrect item was being opened when a grouping is used

data/readme.md

@@ -6,7 +6,7 @@
                           \/_/  \/_____/\/_____/\/_____/\/_/\/_/ \/_/  \/_/
 ```
 
-# Toolkit v1.4.1 #
+# Toolkit v1.5.0 #
 
 Titon Toolkit is a collection of very powerful user interface components and utility classes
 for the responsive, mobile, and modern web. Each component represents encapsulated HTML, CSS,

data/roadmap.md

@@ -2,17 +2,6 @@
 
 All releases will contain bug fixing and polishing for current features.
 
-### 1.5.0 ###
-* Add more features support to Carousel.
-    * Use pixels instead of percentages for transitions.
-    * Add support for multiple items displayed at once.
-    * Add support for variable amount of items being cycled at once.
-    * Add support for infinite scrolling (move items around).
-* Add deferred/promise integration.
-* Make nested menus expandable on touch devices (drop).
-* Rename Tabs to Tab.
-* Remove cookie dependency.
-
 ### 2.0.0 ###
 * Remove the MooTools port.
 * Remove CSS dependencies from the JS layer, use the DOM (classes vs attributes, semantic tags).
@@ -27,6 +16,8 @@ All releases will contain bug fixing and polishing for current features.
 * Refactor events for before/after conditions.
 * RTL support.
 * Add debug option.
+* Rename Tabs to Tab.
+* Remove cookie dependency.
 * Take Google fundamentals into consideration - https://developers.google.com/web/fundamentals/
 
 ### 3.0.0 ###

data/scss/toolkit/_common.scss

@@ -109,7 +109,7 @@ $progress-transition: .5s !default;
 $showcase-transition: $default-transition !default;
 $switch-transition: $default-transition !default;
 $toast-transition: $default-transition !default;
-$tooltip-transition: $default-transition !default;
+$tooltip-transition: .15s !default;
 $typeAhead-transition: $default-transition !default;
 
 //-------------------- Z Index --------------------//

data/scss/toolkit/components/accordion.scss

@@ -25,5 +25,5 @@
     position: relative;
     transition: all $accordion-transition ease-in-out;
 
-    &.hide { max-height: 0; } // don't include on base styles
+    &.hide { max-height: 0; } // Don't include on base styles
 }

data/scss/toolkit/components/blackout.scss

@@ -21,7 +21,6 @@
     .#{$vendor-prefix}loader {
         opacity: 1;
         color: #fff;
-        transition: all $blackout-transition;
         @include position-center;
 
         > span,

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

@@ -66,7 +66,7 @@
         float: none;
         display: block;
         margin: -1px 0 0 0;
-        width: auto;
+        width: 100%;
         max-width: 100%;
 
         &:first-child { margin-top: 0; }

data/scss/toolkit/components/carousel.scss

@@ -10,6 +10,9 @@
     margin: 0 auto;
     text-align: left;
     position: relative;
+
+    &.no-next .#{$vendor-prefix}carousel-next { display: none; }
+    &.no-prev .#{$vendor-prefix}carousel-prev { display: none; }
 }
 
 .#{$vendor-prefix}carousel-items {
@@ -42,20 +45,6 @@
     }
 }
 
-.#{$vendor-prefix}carousel-caption {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    padding: $padding;
-    color: #fff;
-    background: black(.7);
-
-    @include in-small {
-        @include size-small;
-    }
-}
-
 .#{$vendor-prefix}carousel-prev,
 .#{$vendor-prefix}carousel-next {
     display: block;

data/scss/toolkit/components/tooltip.scss

@@ -73,7 +73,9 @@ $tooltip-arrow-width-double: ($tooltip-arrow-width * 2);
 
 .#{$vendor-prefix}tooltip,
 .#{$vendor-prefix}popover {
-    transition: opacity $tooltip-transition, visibility $tooltip-transition, transform $tooltip-transition;
+    #{join-classes($popover-tooltip-animation)} {
+        transition: opacity $tooltip-transition, visibility $tooltip-transition, transform $tooltip-transition;
+    }
 
     @if index($popover-tooltip-animation, "fade") {
         &.fade {

data/scss/toolkit/layout/form.scss

@@ -121,38 +121,43 @@ textarea.#{$vendor-prefix}input {
 
 //-------------------- Fields, Labels --------------------//
 
-.#{$vendor-prefix}field {
+.#{$vendor-prefix}fields {
+    @include reset-list;
+}
+
+.#{$vendor-prefix}field,
+.#{$vendor-prefix}fields li {
     margin-bottom: $margin;
 
     &.is-required {
         .#{$vendor-prefix}field-label { font-weight: bold; }
     }
-}
 
-.#{$vendor-prefix}field:not(.is-disabled) {
-    &.is-error {
-        .#{$vendor-prefix}input {
-            border-color: $error;
+    &:not(.is-disabled) {
+        &.is-error {
+            .#{$vendor-prefix}input {
+                border-color: $error;
 
-            &:focus { box-shadow: 0 0 5px $error-light; }
-        }
+                &:focus { box-shadow: 0 0 5px $error-light; }
+            }
 
-        .#{$vendor-prefix}input-radio,
-        .#{$vendor-prefix}input-checkbox {
-            color: $error-dark;
+            .#{$vendor-prefix}input-radio,
+            .#{$vendor-prefix}input-checkbox {
+                color: $error-dark;
+            }
         }
-    }
 
-    &.is-success {
-        .#{$vendor-prefix}input {
-            border-color: $success;
+        &.is-success {
+            .#{$vendor-prefix}input {
+                border-color: $success;
 
-            &:focus { box-shadow: 0 0 5px $success-light; }
-        }
+                &:focus { box-shadow: 0 0 5px $success-light; }
+            }
 
-        .#{$vendor-prefix}input-radio,
-        .#{$vendor-prefix}input-checkbox {
-            color: $success-dark;
+            .#{$vendor-prefix}input-radio,
+            .#{$vendor-prefix}input-checkbox {
+                color: $success-dark;
+            }
         }
     }
 }
@@ -175,7 +180,8 @@ textarea.#{$vendor-prefix}input {
 //-------------------- Modifiers --------------------//
 
 .#{$vendor-prefix}form--horizontal {
-    .#{$vendor-prefix}field { @include grid-row; }
+    .#{$vendor-prefix}field,
+    .#{$vendor-prefix}fields li { @include grid-row; }
 
     .#{$vendor-prefix}field-label {
         text-align: right;
@@ -190,6 +196,7 @@ textarea.#{$vendor-prefix}input {
     margin-bottom: -($margin / 2);
 
     .#{$vendor-prefix}field,
+    .#{$vendor-prefix}fields li,
     .#{$vendor-prefix}field-label,
     .#{$vendor-prefix}form-actions {
         display: inline-block;

data/scss/toolkit/themes/demo.scss

@@ -136,6 +136,20 @@ mark { background: lighten($warning-light, 25%); }
     &:hover { opacity: 1; }
 }
 
+.carousel-caption {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    padding: $padding;
+    color: #fff;
+    background: black(.7);
+
+    @include in-small {
+        @include size-small;
+    }
+}
+
 //-------------------- Drop --------------------//
 
 .drop {
@@ -482,7 +496,7 @@ mark { background: lighten($warning-light, 25%); }
 }
 
 .showcase-items {
-    background: #000;
+    background: $gray;
 }
 
 //-------------------- Step --------------------//
@@ -536,7 +550,7 @@ a.step:hover:after {
 //-------------------- Tooltip --------------------//
 
 .tooltip {
-    background: black(.70);
+    background: black(.85);
     color: #fff;
     border-radius: $round;
     margin: 10px;

data/version.md

@@ -1 +1 @@
-1.4.1
+1.5.0

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: titon-toolkit
 version: !ruby/object:Gem::Version
-  version: 1.4.1
+  version: 1.5.0
 platform: ruby
 authors:
 - Project Titon
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-05-06 00:00:00.000000000 Z
+date: 2014-06-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass