titon-toolkit 0.12.0 → 0.13.2

data/scss/toolkit/effects/visual.scss

@@ -25,17 +25,6 @@
         width: 98%;
         left: 1.5%;
     }
-
-    &.pill:after,
-    &.oval:after,
-    &.skew:after {
-        width: 90%;
-        left: 5.5%;
-    }
-
-    &.pill:after { border-radius: 1rem 1rem 2rem 2rem / 1rem 1rem 1rem 1rem; }
-    &.oval:after { border-radius: 5rem 5rem 4rem 4rem / 1.5rem 1.5rem 1.5rem 1.5rem; }
-    &.skew:after { border-radius: 1rem 1rem 3rem 3rem / 1rem 1rem 2rem 2rem; }
 }
 
 //-------------------- Reflection --------------------//

data/scss/toolkit/layout/form.scss

@@ -34,6 +34,10 @@ input::-moz-focus-inner {
     border: 0;
 }
 
+input[type="search"] {
+    @include box-sizing("border-box");
+}
+
 // Required values to match browser restrictions
 label,
 .input-static {
@@ -57,7 +61,7 @@ label,
     @include transition(all .3s);
 
     &:hover { border-color: $gray-darkest; }
-    &:focus { border-color: $info; box-shadow: 0 0 5px $info-light; outline: 0; }
+    &:focus { border-color: $info; box-shadow: 0 0 5px $info-light; outline: none; }
 
     @include disabled-state {
         cursor: not-allowed;

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

@@ -13,17 +13,20 @@
     > .input-addon,
     > .button,
     > .button-group {
+        float: left;
         display: inline-block;
         position: relative;
         border-radius: 0;
-        margin-right: -6px; // Remove whitespace and overlap borders
+        margin-right: -1px;
         white-space: nowrap;
         height: auto;
         vertical-align: middle;
+
+        &:last-child { margin-right: 0; }
+        &:hover, &:focus { z-index: 1; }
     }
 
-    // Inputs should always be above everything else
-    > .input { z-index: 1; }
+    @include clear-fix;
 }
 
 .input-addon {

data/scss/toolkit/layout/table.scss

@@ -44,6 +44,12 @@
     }
 }
 
+.table-responsive {
+    width: 100%;
+    max-width: 100%;
+    overflow-x: auto;
+}
+
 //-------------------- Modifiers --------------------//
 
 .table.table--hover {

data/scss/toolkit/layout/typography.scss

@@ -20,7 +20,7 @@ h1, h2, h3, h4, h5, h6 {
     font-weight: normal;
 }
 
-p, ul, ol, hr, blockquote {
+p, ul, ol, hr {
     margin: $margin 0;
 }
 

data/scss/toolkit/modules/accordion.scss

@@ -6,6 +6,8 @@
 
 @import "../common";
 
+$accordion-transition: $default-transition !default;
+
 /**
  * Should be used in conjunction with the JavaScript Titon.Tooltip module.
  *
@@ -55,7 +57,7 @@
 .accordion-inner {
     overflow: hidden;
     position: relative;
-    @include transition(all .3s ease-in-out);
+    @include transition(all $accordion-transition ease-in-out);
 
     &.show { height: auto; }
     &.hide { max-height: 0; } // don't include on base styles

data/scss/toolkit/modules/blackout.scss

@@ -6,6 +6,9 @@
 
 @import "../common";
 
+$blackout-opacity: .5 !default;
+$blackout-transition: $default-transition !default;
+
 /**
  * Should be used in conjunction with the JavaScript Titon.Blackout module.
  */
@@ -19,6 +22,6 @@
     z-index: 600;
     opacity: 0;
     visibility: hidden;
-    background: black(.5);
-    @include transition(all 0.3s);
+    background: black($blackout-opacity);
+    @include transition(all $blackout-transition);
 }

data/scss/toolkit/modules/carousel.scss

@@ -6,6 +6,8 @@
 
 @import "../common";
 
+$carousel-transition: 1s !default;
+
 /**
  * Should be used in conjunction with the JavaScript Titon.Carousel module.
  *
@@ -50,7 +52,7 @@
     width: 100%;
     height: auto;
     z-index: 1;
-    @include transition(left 1s, top 1s);
+    @include transition(left $carousel-transition, top $carousel-transition);
 
     > li {
         position: relative;
@@ -65,16 +67,21 @@
             max-width: 100%;
             height: auto;
         }
+    }
+}
 
-        .carousel-caption {
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            width: 100%;
-            padding: $padding;
-            color: #fff;
-            background: black(.70);
-        }
+.carousel-caption {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    padding: $padding;
+    color: #fff;
+    background: black(.70);
+
+    @include in-small {
+        font-size: $small-size;
+        padding: $small-padding;
     }
 }
 
@@ -136,6 +143,7 @@
         width: 10px;
         border-radius: 50%;
         opacity: .65;
+        background: black(0);
 
         &:hover { opacity: 1; }
         &.is-active { background: #fff; }
@@ -167,7 +175,7 @@
             left: 0;
             opacity: 0;
             z-index: 1;
-            @include transition(opacity 1s);
+            @include transition(opacity $carousel-transition);
 
             &.show { z-index: 2; }
         }

data/scss/toolkit/modules/flyout.scss

@@ -6,6 +6,8 @@
 
 @import "../common";
 
+$flyout-transition: $default-transition !default;
+
 /**
  * Should be used in conjunction with the JavaScript Titon.Flyout module.
  */
@@ -20,7 +22,7 @@
     background: $gray;
     border: 1px solid $gray-dark;
     @include box-sizing(content-box); // required by MooTools for multi columns
-    @include transition(opacity 0.3s);
+    @include transition(opacity $flyout-transition);
 
     ul {
         list-style: none;
@@ -51,7 +53,7 @@
             // Sub-flyouts
             > .flyout {
                 left: 90%;
-                @include transition(left .3s, right .3s, opacity .3s);
+                @include transition(left $flyout-transition, right $flyout-transition, opacity $flyout-transition);
 
                 // Reverse menu to left side incase it goes outside the viewport
                 // Will be set automatically from the Javascript layer

data/scss/toolkit/modules/modal.scss

@@ -6,6 +6,8 @@
 
 @import "../common";
 
+$modal-transition: $default-transition !default;
+
 /**
  * Should be used in conjunction with the JavaScript Titon.Modal module.
  *
@@ -44,7 +46,7 @@
         .close { display: none; }
 
         .modal-outer {
-            background: $gray url("../../../img/loader.gif") 50% 50% no-repeat;
+            background: $gray;
         }
     }
 }
@@ -90,7 +92,7 @@
     &.flip-vert {
         .modal-outer {
             opacity: 0;
-            @include transition(all 0.3s);
+            @include transition(all $modal-transition);
         }
 
         &.show .modal-outer {
@@ -100,7 +102,7 @@
 
     &.fade {
         opacity: 0;
-        @include transition(opacity 0.3s);
+        @include transition(opacity $modal-transition);
     }
 
     &.from-above {
@@ -145,7 +147,7 @@
 
     &.slide-in-left {
         .modal-outer {
-            @include transition(all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9));
+            @include transition(all $modal-transition cubic-bezier(0.25, 0.5, 0.5, 0.9));
             @include transform(translateX(-50%));
         }
 
@@ -156,7 +158,7 @@
 
     &.slide-in-right {
         .modal-outer {
-            @include transition(all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9));
+            @include transition(all $modal-transition cubic-bezier(0.25, 0.5, 0.5, 0.9));
             @include transform(translateX(50%));
         }
 
@@ -168,7 +170,7 @@
     &.sticky-top {
         top: -100%;
         opacity: 0;
-        @include transition(all 0.3s);
+        @include transition(all $modal-transition);
         @include transform(translateX(-50%)); // reset to x
 
         &.show {
@@ -181,7 +183,7 @@
         top: auto;
         bottom: -100%;
         opacity: 0;
-        @include transition(all 0.3s);
+        @include transition(all $modal-transition);
         @include transform(translateX(-50%)); // reset to x
 
         &.show {
@@ -193,7 +195,7 @@
     &.sticky-left {
         left: -100%;
         opacity: 0;
-        @include transition(all 0.3s);
+        @include transition(all $modal-transition);
         @include transform(translate(0, -50%));
 
         &.show {
@@ -206,7 +208,7 @@
         left: auto;
         right: -100%;
         opacity: 0;
-        @include transition(all 0.3s);
+        @include transition(all $modal-transition);
         @include transform(translate(0, -50%));
 
         &.show {

data/scss/toolkit/modules/showcase.scss

@@ -6,6 +6,8 @@
 
 @import "../common";
 
+$showcase-transition: $default-transition !default;
+
 /**
  * Should be used in conjunction with the JavaScript Titon.Showcase module.
  *
@@ -50,7 +52,7 @@
         }
 
         .showcase-inner {
-            background: $gray url("../../../img/loader.gif") 50% 50% no-repeat;
+            background: $gray;
         }
     }
 }
@@ -71,14 +73,14 @@
     max-width: 1024px;
     position: relative;
     overflow: hidden;
-    @include transition(width .3s, height .3s);
+    @include transition(width $showcase-transition, height $showcase-transition);
 
     > li {
         position: absolute;
         top: 0;
         left: 0;
         opacity: 0;
-        @include transition(opacity .3s);
+        @include transition(opacity $showcase-transition);
 
         > img {
             max-width: 100%;
@@ -104,6 +106,11 @@
     color: #fff;
     background: black(.70);
     display: none;
+
+    @include in-small {
+        font-size: $small-size;
+        padding: $small-padding;
+    }
 }
 
 .showcase-prev,
@@ -156,6 +163,7 @@
         width: 10px;
         border-radius: 50%;
         opacity: .65;
+        background: black(0);
 
         &:hover { opacity: 1; }
         &.is-active { background: #fff; }

data/scss/toolkit/modules/tooltip.scss

@@ -6,6 +6,8 @@
 
 @import "../common";
 
+$tooltip-transition: $default-transition !default;
+
 /**
  * Should be used in conjunction with the JavaScript Titon.Tooltip module.
  *
@@ -87,7 +89,7 @@
     }
 
     &.from-above {
-        @include transition(transform 0.3s);
+        @include transition(transform $tooltip-transition);
         @include transform(scale(1.2));
 
         &.show {
@@ -96,7 +98,7 @@
     }
 
     &.from-below {
-        @include transition(transform 0.3s);
+        @include transition(transform $tooltip-transition);
         @include transform(scale(0.8));
 
         &.show {
@@ -105,7 +107,7 @@
     }
 
     &.flip-rotate {
-        @include transition(transform 0.3s);
+        @include transition(transform $tooltip-transition);
         @include transform(rotate(-90deg));
 
         &.show {
@@ -114,7 +116,7 @@
     }
 
     &.slide-in {
-        @include transition(transform 0.3s);
+        @include transition(transform $tooltip-transition);
 
         &.top-left { @include transform(translate(-25%, -25%)); }
         &.top-center { @include transform(translateY(-50%)); }

data/scss/toolkit/themes/titon.scss

@@ -6,8 +6,11 @@
 
 @import "../common";
 
-body {
+html {
     font: normal 16px/1.75rem "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
+body {
     background: $background-color;
     color: $foreground-color;
 }
@@ -27,6 +30,13 @@ code { background: $info-light; color: $info-dark; }
 var { background: $error-light; color: $error-dark; }
 mark { background: tint($warning-light, 25%); }
 
+.input-group {
+    > .input,
+    > .input-addon,
+    > .button,
+    > .button-group .button { height: 46px; }
+}
+
 //-------------------- Accordion --------------------//
 
 .accordion-head {
@@ -247,6 +257,7 @@ mark { background: tint($warning-light, 25%); }
 .modal-foot {
     background: $gray-lightest;
     text-align: center;
+    margin-bottom: -1px;
 }
 
 //-------------------- Popover --------------------//

data/scss/toolkit/themes/tomorrow-night.scss

@@ -54,6 +54,13 @@ body {
     line-height: 22px;
 }
 
+.input-group {
+    > .input,
+    > .input-addon,
+    > .button,
+    > .button-group .button { height: 42px; }
+}
+
 //-------------------- Typography --------------------//
 
 .caret-up { border-bottom-color: $foreground-color; }