titon-toolkit 1.1.0 → 1.2.0

data/scss/toolkit/components/drop.scss

@@ -10,18 +10,18 @@
 .#{$vendor-prefix}drop--up,
 .#{$vendor-prefix}drop--left,
 .#{$vendor-prefix}drop--right {
+    @include reset-list;
     display: none;
     text-align: left;
     position: absolute;
     top: 100%;
     left: 0;
     width: 200px;
-    background: $gray;
     line-height: 100%;
     z-index: 500;
     opacity: 0;
     visibility: hidden;
-    @include transition(opacity .3s);
+    @include transition(opacity $drop-transition);
 
     // Nested
     .#{$vendor-prefix}drop--down,
@@ -30,12 +30,12 @@
         top: 0;
         left: 90%;
         z-index: 510;
-        @include transition(left .3s, opacity .3s);
+        @include transition(left $drop-transition, opacity $drop-transition);
     }
 
     // Apply to self
-    &,
-    ul {
+    ul,
+    ol {
         @include reset-list;
     }
 
@@ -58,8 +58,6 @@
 
         // Show nested dropdown
         &:hover {
-            > a { background: $gray-lightest; }
-
             .#{$vendor-prefix}drop--down,
             .#{$vendor-prefix}drop--up {
                 visibility: visible;
@@ -82,7 +80,6 @@
 
 .#{$vendor-prefix}drop-heading {
     padding: $small-padding;
-    background-color: $gray-dark;
 }
 
 //-------------------- Modifiers --------------------//

data/scss/toolkit/components/flyout.scss

@@ -13,7 +13,6 @@
     z-index: 500;
     opacity: 0;
     visibility: hidden;
-    background: $gray;
     @include box-sizing(content-box); // required by MooTools for multi columns
     @include transition(opacity $flyout-transition);
 
@@ -37,9 +36,7 @@
 
         // Hover states
         > a:hover,
-        &.#{$state-is-prefix}open > a {
-            background: $gray-lightest;
-        }
+        &.#{$state-is-prefix}open > a {}
 
         // Display caret arrow
         &.#{$state-has-prefix}children > a .caret-right {
@@ -81,5 +78,4 @@
     line-height: 100%;
     display: block;
     text-decoration: none;
-    background: $gray-dark;
 }

data/scss/toolkit/components/grid.scss

@@ -11,11 +11,6 @@
     @include grid-row;
 }
 
-.col.end {
-    margin-right: 0 !important;
-    float: right !important;
-}
-
 // These should be the same for all sizes
 .col[class*="span-"] {
     @include grid-column;
@@ -42,8 +37,11 @@
             $span: grid-span($i, $grid-columns-mobile);
 
             .col.mobile-#{$i} { width: $span; }
-            .col.mobile-push-#{$i} { left: $span; }
-            .col.mobile-pull-#{$i} { right: $span; }
+
+            @if $grid-push-pull {
+                .col.mobile-push-#{$i} { left: $span; }
+                .col.mobile-pull-#{$i} { right: $span; }
+            }
         }
     }
 
@@ -57,8 +55,11 @@
             $span: grid-span($i, $grid-columns-tablet);
 
             .col.tablet-#{$i} { width: $span; }
-            .col.tablet-push-#{$i} { left: $span; }
-            .col.tablet-pull-#{$i} { right: $span; }
+
+            @if $grid-push-pull {
+                .col.tablet-push-#{$i} { left: $span; }
+                .col.tablet-pull-#{$i} { right: $span; }
+            }
         }
     }
 
@@ -72,8 +73,11 @@
             $span: grid-span($i, $grid-columns-desktop);
 
             .col.desktop-#{$i} { width: $span; }
-            .col.desktop-push-#{$i} { left: $span; }
-            .col.desktop-pull-#{$i} { right: $span; }
+
+            @if $grid-push-pull {
+                .col.desktop-push-#{$i} { left: $span; }
+                .col.desktop-pull-#{$i} { right: $span; }
+            }
         }
     }
 
@@ -91,8 +95,11 @@
             $span: grid-span($i, $grid-columns-small);
 
             .col.small-#{$i} { width: $span; }
-            .col.small-push-#{$i} { left: $span; }
-            .col.small-pull-#{$i} { right: $span; }
+
+            @if $grid-push-pull {
+                .col.small-push-#{$i} { left: $span; }
+                .col.small-pull-#{$i} { right: $span; }
+            }
         }
     }
 
@@ -106,8 +113,11 @@
             $span: grid-span($i, $grid-columns-medium);
 
             .col.medium-#{$i} { width: $span; }
-            .col.medium-push-#{$i} { left: $span; }
-            .col.medium-pull-#{$i} { right: $span; }
+
+            @if $grid-push-pull {
+                .col.medium-push-#{$i} { left: $span; }
+                .col.medium-pull-#{$i} { right: $span; }
+            }
         }
     }
 
@@ -121,9 +131,17 @@
             $span: grid-span($i, $grid-columns-large);
 
             .col.large-#{$i} { width: $span; }
-            .col.large-push-#{$i} { left: $span; }
-            .col.large-pull-#{$i} { right: $span; }
+
+            @if $grid-push-pull {
+                .col.large-push-#{$i} { left: $span; }
+                .col.large-pull-#{$i} { right: $span; }
+            }
         }
     }
 
+}
+
+.col.end {
+    margin-right: 0 !important;
+    float: right !important;
 }

data/scss/toolkit/components/icon.scss

@@ -19,23 +19,10 @@
 [class*="icon-32"] { width: 32px; height: 32px; }
 [class*="icon-64"] { width: 64px; height: 64px; }
 
-.#{$vendor-prefix}button {
-    [class*="icon-"] { margin-top: -1px; }
-}
-
 //-------------------- Modifiers --------------------//
 
 .icon--90deg { @include transform(rotate(90deg)); }
 .icon--180deg { @include transform(rotate(180deg)); }
 .icon--270deg { @include transform(rotate(270deg)); }
 .icon--flip { @include transform(rotateY(180deg)); }
-.icon--flip-vert { @include transform(rotateX(180deg)); }
-
-@include keyframes(rotate) {
-    from { @include transform(rotate(0deg)); }
-    to { @include transform(rotate(360deg)); }
-}
-
-.icon--rotate {
-    @include animation(rotate $icon-animation infinite linear);
-}
+.icon--flip-vert { @include transform(rotateX(180deg)); }

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

@@ -11,10 +11,7 @@
     vertical-align: middle;
     white-space: nowrap;
 
-    > .#{$vendor-prefix}input,
-    > .#{$vendor-prefix}input-addon,
-    > .#{$vendor-prefix}button,
-    > .#{$vendor-prefix}button-group {
+    > * {
         float: left;
         display: inline-block;
         position: relative;
@@ -33,29 +30,23 @@
 }
 
 .#{$vendor-prefix}input-addon {
-    border: 1px solid $gray-dark;
-    background: $gray;
     vertical-align: middle;
-    padding: $medium-padding;
     line-height: normal;
-    font-size: inherit;
+    @include size-medium;
+
+    @include is-small(false, true) { @include size-small; }
+    @include is-large(false, true) { @include size-large; }
 }
 
 //-------------------- Modifiers --------------------//
 
 .#{$vendor-prefix}input-group.#{$shape-round-class} {
-    > .#{$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 {
+    > *:first-child {
         border-top-left-radius: $round;
         border-bottom-left-radius: $round;
     }
 
-    > .#{$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 {
+    > *:last-child {
         border-top-right-radius: $round;
         border-bottom-right-radius: $round;
     }

data/scss/toolkit/components/input.scss

@@ -31,17 +31,11 @@
     input {
         display: none;
 
-        // Style when the associated label is being hovered
-        &:hover + .#{$vendor-prefix}checkbox,
-        &:hover + .#{$vendor-prefix}radio {
-            border-color: $gray-darkest;
-        }
-
         // Style when the checkbox is checked
         &:checked + .#{$vendor-prefix}checkbox,
         &:checked + .#{$vendor-prefix}radio {
             border-color: $info;
-            background-color: $info-light;
+            background: $info-light;
         }
 
         // Style when input is disabled

data/scss/toolkit/components/label.scss

@@ -23,11 +23,6 @@
         padding: .2rem .35rem;
     }
 
-    @include is-medium() {
-        font-size: .7rem;
-        padding: .275rem .425rem;
-    }
-
     @include is-large {
         font-size: .8rem;
         padding: .35rem .5rem;

data/scss/toolkit/components/lazy-load.scss

@@ -8,5 +8,5 @@
 
 .#{$vendor-prefix}lazy-load {
     background-image: none !important;
-    @include transition(background $lazyLoad-transition);
+    @include transition(background-image $lazyLoad-transition);
 }

data/scss/toolkit/components/loader.scss

@@ -95,7 +95,7 @@
     }
 
     .#{$vendor-prefix}loader.bubble-spinner {
-        .spinner {
+        .#{$vendor-prefix}loader-spinner {
             width: 100px;
             height: 100px;
             position: relative;

data/scss/toolkit/components/matrix.scss

@@ -11,20 +11,14 @@
     position: relative;
     @include clear-fix;
 
-    &.#{$state-has-prefix}no-columns .#{$vendor-prefix}matrix-item {
-        position: relative !important;
+    > li {
+        float: left;
+        margin: 0;
+        padding: 0;
+        @include transition(top $matrix-transition, left $matrix-transition, bottom $matrix-transition, right $matrix-transition, opacity $matrix-transition);
     }
-}
-
-.#{$vendor-prefix}matrix-item {
-    margin: 0;
-    padding: 0;
-    @include transition(top $matrix-transition, left $matrix-transition, bottom $matrix-transition, right $matrix-transition, opacity $matrix-transition);
 
-    img {
-        max-width: 100%;
-        width: 100%;
-        height: auto;
-        display: block;
+    &.#{$state-has-prefix}no-columns > li {
+        position: relative !important;
     }
 }

data/scss/toolkit/components/modal.scss

@@ -8,18 +8,15 @@
 
 .#{$vendor-prefix}modal {
     position: fixed;
-    top: 50%;
-    left: 50%;
-    width: 50%;
-    height: auto;
-    margin: 0;
-    padding: 0;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
     z-index: 610; // higher than blackout
-    max-width: 700px;
-    min-width: 350px;
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
     visibility: hidden;
-    backface-visibility: hidden;
-    @include transform(translateX(-50%) translateY(-50%));
+    pointer-events: none; // fall through to blackout
 
     &.#{$state-is-prefix}loading {
         .#{$vendor-prefix}modal-close { display: none; }
@@ -33,6 +30,8 @@
 
 .#{$vendor-prefix}modal-close {
     position: absolute;
+    background: none;
+    border: 0;
     top: $padding;
     right: $padding;
     line-height: 1rem;
@@ -42,28 +41,31 @@
     &:hover { opacity: 1; }
 }
 
+.#{$vendor-prefix}modal-outer {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    width: 50%;
+    height: auto;
+    margin: $margin;
+    pointer-events: auto; // allow within modal
+    @include transform(translateX(-50%));
+}
+
 .#{$vendor-prefix}modal-inner {
     position: relative;
     margin: 0 auto;
-    background: $gray;
 }
 
 .#{$vendor-prefix}modal-head,
 .#{$vendor-prefix}modal-body,
-.#{$vendor-prefix}modal-foot,
-.#{$vendor-prefix}modal-loading,
-.#{$vendor-prefix}modal-error {
+.#{$vendor-prefix}modal-foot {
     padding: $padding;
 }
 
-// Remove margins from text elements
-.#{$vendor-prefix}modal-body {
-    @include content-spacing;
-}
-
 //-------------------- Modifiers --------------------//
 
-.#{$vendor-prefix}modal.#{$state-is-prefix}fullscreen {
+.#{$vendor-prefix}modal.#{$state-is-prefix}fullscreen .#{$vendor-prefix}modal-outer {
     top: 0;
     left: 0;
     margin: 0;
@@ -77,14 +79,7 @@
 //-------------------- Animations --------------------//
 
 .#{$vendor-prefix}modal {
-    &.from-above,
-    &.from-below,
-    &.slide-in-top,
-    &.slide-in-bottom,
-    &.slide-in-left,
-    &.slide-in-right,
-    &.flip,
-    &.flip-vert {
+    #{join-classes($modal-animation)} {
         .#{$vendor-prefix}modal-handle {
             opacity: 0;
             @include transition(all $modal-transition);
@@ -95,146 +90,143 @@
         }
     }
 
-    &.fade {
-        opacity: 0;
-        @include transition(opacity $modal-transition, visibility $modal-transition);
-    }
-
-    &.from-above {
-        .#{$vendor-prefix}modal-handle {
-            @include transform(scale(1.3));
-        }
-
-        &.show .#{$vendor-prefix}modal-handle {
-            @include transform(scale(1));
-        }
-    }
-
-    &.from-below {
-        .#{$vendor-prefix}modal-handle {
-            @include transform(scale(0.7));
-        }
-
-        &.show .#{$vendor-prefix}modal-handle {
-            @include transform(scale(1));
-        }
-    }
-
-    &.slide-in-top {
-        .#{$vendor-prefix}modal-handle {
-            @include transform(translateY(-50%));
-        }
+    @if index($modal-animation, "from-above") {
+        &.from-above {
+            .#{$vendor-prefix}modal-handle {
+                @include transform(scale(1.3));
+            }
 
-        &.show .#{$vendor-prefix}modal-handle {
-            @include transform(translateY(0));
+            &.show .#{$vendor-prefix}modal-handle {
+                @include transform(scale(1));
+            }
         }
     }
 
-    &.slide-in-bottom {
-        .#{$vendor-prefix}modal-handle {
-            @include transform(translateY(50%));
-        }
+    @if index($modal-animation, "from-below") {
+        &.from-below {
+            .#{$vendor-prefix}modal-handle {
+                @include transform(scale(0.7));
+            }
 
-        &.show .#{$vendor-prefix}modal-handle {
-            @include transform(translateY(0));
+            &.show .#{$vendor-prefix}modal-handle {
+                @include transform(scale(1));
+            }
         }
     }
 
-    &.slide-in-left {
-        .#{$vendor-prefix}modal-handle {
-            @include transition(all $modal-transition cubic-bezier(0.25, 0.5, 0.5, 0.9));
-            @include transform(translateX(-50%));
-        }
+    @if index($modal-animation, "slide-in-top") {
+        &.slide-in-top {
+            .#{$vendor-prefix}modal-handle {
+                @include transform(translateY(-50%));
+            }
 
-        &.show .#{$vendor-prefix}modal-handle {
-            @include transform(translateX(0));
+            &.show .#{$vendor-prefix}modal-handle {
+                @include transform(translateY(0));
+            }
         }
     }
 
-    &.slide-in-right {
-        .#{$vendor-prefix}modal-handle {
-            @include transition(all $modal-transition cubic-bezier(0.25, 0.5, 0.5, 0.9));
-            @include transform(translateX(50%));
-        }
+    @if index($modal-animation, "slide-in-bottom") {
+        &.slide-in-bottom {
+            .#{$vendor-prefix}modal-handle {
+                @include transform(translateY(50%));
+            }
 
-        &.show .#{$vendor-prefix}modal-handle {
-            @include transform(translateX(0));
+            &.show .#{$vendor-prefix}modal-handle {
+                @include transform(translateY(0));
+            }
         }
     }
 
-    &.sticky-top {
-        top: -100%;
-        opacity: 0;
-        @include transition(all $modal-transition);
-        @include transform(translateX(-50%)); // reset to x
+    @if index($modal-animation, "slide-in-left") {
+        &.slide-in-left {
+            .#{$vendor-prefix}modal-handle {
+                @include transition(all $modal-transition cubic-bezier(0.25, 0.5, 0.5, 0.9));
+                @include transform(translateX(-50%));
+            }
 
-        &.show {
-            top: 0;
-            opacity: 1;
+            &.show .#{$vendor-prefix}modal-handle {
+                @include transform(translateX(0));
+            }
         }
     }
 
-    &.sticky-bottom {
-        top: auto;
-        bottom: -100%;
-        opacity: 0;
-        @include transition(all $modal-transition);
-        @include transform(translateX(-50%)); // reset to x
+    @if index($modal-animation, "slide-in-right") {
+        &.slide-in-right {
+            .#{$vendor-prefix}modal-handle {
+                @include transition(all $modal-transition cubic-bezier(0.25, 0.5, 0.5, 0.9));
+                @include transform(translateX(50%));
+            }
 
-        &.show {
-            bottom: 0;
-            opacity: 1;
+            &.show .#{$vendor-prefix}modal-handle {
+                @include transform(translateX(0));
+            }
         }
     }
 
-    &.sticky-left {
-        left: -100%;
-        opacity: 0;
-        @include transition(all $modal-transition);
-        @include transform(translate(0, -50%));
+    @if index($modal-animation, "sticky-top") {
+        &.sticky-top {
+            .#{$vendor-prefix}modal-outer {
+                top: -100%;
+                opacity: 0;
+                @include transition(all $modal-transition);
+            }
 
-        &.show {
-            left: 0;
-            opacity: 1;
+            &.show .#{$vendor-prefix}modal-outer {
+                top: 0;
+                opacity: 1;
+            }
         }
     }
 
-    &.sticky-right {
-        left: auto;
-        right: -100%;
-        opacity: 0;
-        @include transition(all $modal-transition);
-        @include transform(translate(0, -50%));
+    @if index($modal-animation, "sticky-bottom") {
+        &.sticky-bottom {
+            .#{$vendor-prefix}modal-outer {
+                top: auto;
+                bottom: -100%;
+                opacity: 0;
+                @include transition(all $modal-transition);
+            }
 
-        &.show {
-            right: 0;
-            opacity: 1;
+            &.show .#{$vendor-prefix}modal-outer {
+                bottom: 0;
+                opacity: 1;
+            }
         }
     }
 
-    &.flip {
-        @include perspective(1300px);
-
-        .#{$vendor-prefix}modal-handle {
-            @include transform-style(preserve-3d);
-            @include transform(rotateY(-70deg));
-        }
+    @if index($modal-animation, "sticky-left") {
+        &.sticky-left {
+            .#{$vendor-prefix}modal-outer {
+                left: -100%;
+                opacity: 0;
+                top: 50%;
+                @include transition(all $modal-transition);
+                @include transform(translate(0, -50%));
+            }
 
-        &.show .#{$vendor-prefix}modal-handle {
-            @include transform(rotateY(0deg));
+            &.show .#{$vendor-prefix}modal-outer {
+                left: 0;
+                opacity: 1;
+            }
         }
     }
 
-    &.flip-vert {
-        @include perspective(1300px);
+    @if index($modal-animation, "sticky-right") {
+        &.sticky-right {
+            .#{$vendor-prefix}modal-outer {
+                left: auto;
+                right: -100%;
+                top: 50%;
+                opacity: 0;
+                @include transition(all $modal-transition);
+                @include transform(translate(0, -50%));
+            }
 
-        .#{$vendor-prefix}modal-handle {
-            @include transform-style(preserve-3d);
-            @include transform(rotateX(-70deg));
-        }
-
-        &.show .#{$vendor-prefix}modal-handle {
-            @include transform(rotateX(0deg));
+            &.show .#{$vendor-prefix}modal-outer {
+                right: 0;
+                opacity: 1;
+            }
         }
     }
 }