titon-toolkit 0.14.0 → 1.0.0.rc1

data/scss/toolkit/{ui → components}/pagination.scss

@@ -6,20 +6,6 @@
 
 @import "../common";
 
-/**
- *    <nav class="pagination small pill">
- *        <ul>
- *            <li><a href="" class="button">Previous</a></li>
- *            <li><a href="" class="button">1</a></li>
- *            <li><a href="" class="button">2</a></li>
- *            <li class="active"><a href="" class="button">3</a></li>
- *            <li><a href="" class="button">4</a></li>
- *            <li><a href="" class="button">5</a></li>
- *            <li class="disabled"><a href="" class="button">Next</a></li>
- *        </ul>
- *    </nav>
- */
-
 .pagination {
     display: block;
     margin: $margin 0;

data/scss/toolkit/{ui → components}/pin.scss

@@ -6,11 +6,6 @@
 
 @import "../common";
 
-/**
- * Adds a sliding effect to pinned elements.
- * Should be used in conjunction with the JavaScript Titon.Pin component.
- */
-
 .pin {
     @include transition(top 1s, right .5s, left .5s);
 }

data/scss/toolkit/{modules → components}/popover.scss

@@ -6,18 +6,6 @@
 
 @import "../common";
 
-/**
- * Should be used in conjunction with the JavaScript Titon.Popover module.
- *
- *    <div class="popover">
- *        <div class="popover-inner">
- *            <div class="popover-head">Popover Title</div>
- *            <div class="popover-body">Popover Content</div>
- *        </div>
- *        <div class="popover-arrow"></div>
- *    </div>
- */
-
 .popover {
     position: absolute;
     top: 0;
@@ -37,12 +25,12 @@
     }
 
     &.center-left .popover-arrow {
-        border-left-color: #000;
+        border-left-color: $gray-dark;
         right: -16px;
     }
 
     &.center-right .popover-arrow {
-        border-right-color: #000;
+        border-right-color: $gray-dark;
         left: -16px;
     }
 
@@ -53,12 +41,12 @@
     }
 
     &.top-center .popover-arrow {
-        border-top-color: #000;
+        border-top-color: $gray-dark;
         bottom: -16px;
     }
 
     &.bottom-center .popover-arrow {
-        border-bottom-color: #000;
+        border-bottom-color: $gray-dark;
         top: -16px;
     }
 }

data/scss/toolkit/{ui → components}/progress.scss

@@ -6,30 +6,33 @@
 
 @import "../common";
 
-$progress-transition: $default-transition !default;
-
-/**
- *    <div class="progress">
- *        <div class="progress-bar" style="width: 50%">50%</div>
- *    </div>
- */
-
 .progress {
-    height: 20px;
     overflow: hidden;
     position: relative;
     background: $gray;
 
+    &.small .progress-bar {
+        height: 1rem;
+        line-height: .75rem;
+        font-size: $small-size;
+    }
+
+    &.large .progress-bar {
+        height: 2rem;
+        line-height: 1.75rem;
+        font-size: $large-size;
+    }
+
     @include clear-fix;
 }
 
 .progress-bar {
-    height: 20px;
-    line-height: 18px;
+    height: 1.5rem;
+    line-height: 1.25rem;
     overflow: hidden;
     position: relative;
     text-align: center;
-    font-size: .7rem;
+    font-size: $medium-size;
     background: $gray-darkest;
     float: left;
     @include transition(width .6s, background $progress-transition);

data/scss/toolkit/{modules → components}/showcase.scss

@@ -6,24 +6,6 @@
 
 @import "../common";
 
-$showcase-transition: $default-transition !default;
-
-/**
- * Should be used in conjunction with the JavaScript Titon.Showcase module.
- *
- *    <div class="showcase">
- *        <div class="showcase-inner">
- *            <ul class="showcase-items"></u>
- *            <ol class="showcase-tabs"></ol>
- *            <a href="javascript:;" class="showcase-prev showcase-event-prev"><span class="icon-chevron-sign-left"></span></a>
- *            <a href="javascript:;" class="showcase-next showcase-event-next"><span class="icon-chevron-sign-right"></span></a>
- *            <button type="button" class="close showcase-event-close">
- *                <span class="x">&times;</span>
- *            </button>
- *        </div>
- *    </div>
- */
-
 .showcase {
     position: fixed;
     top: 50%;
@@ -37,12 +19,6 @@ $showcase-transition: $default-transition !default;
     backface-visibility: hidden;
     @include transform(translateX(-50%) translateY(-50%));
 
-    .close {
-        position: absolute;
-        top: -1px;
-        right: -35px;
-    }
-
     &.is-loading,
     &.is-single {
         .showcase-prev,
@@ -50,13 +26,27 @@ $showcase-transition: $default-transition !default;
         .showcase-tabs {
             display: none !important;
         }
+    }
 
-        .showcase-inner {
-            background: $gray;
+    &.is-loading {
+        .showcase-close {
+            display: none !important;
         }
     }
 }
 
+.showcase-close {
+    position: absolute;
+    top: $padding;
+    right: $padding;
+    line-height: 1rem;
+    opacity: $showcase-opacity;
+    padding: $padding;
+
+    .x { color: #fff; }
+    &:hover { opacity: 1; }
+}
+
 .showcase-inner {
     position: relative;
     padding: $padding;
@@ -121,19 +111,25 @@ $showcase-transition: $default-transition !default;
     width: auto;
     height: auto;
     z-index: 5;
-    font-size: 28px;
-    color: #fff;
-    opacity: .65;
+    opacity: $showcase-opacity;
     top: 50%;
     @include transform(translateY(-50%)); // move up 50% of their height
 
-    &:hover {
+    .arrow-left,
+    .arrow-right {
         color: #fff;
-        opacity: 1;
+        font-size: 2rem;
     }
 
-    &:focus {
-        outline: none;
+    &:hover { opacity: 1; }
+    &:focus { outline: none; }
+
+    // Large icons for large resolutions
+    @include if-tablet-landscape {
+        .arrow-left,
+        .arrow-right {
+            font-size: 3rem;
+        }
     }
 }
 
@@ -141,34 +137,8 @@ $showcase-transition: $default-transition !default;
 .showcase-next { right: $padding; }
 
 .showcase-tabs {
-    list-style: none;
-    line-height: 100%;
-    margin: 0;
-    padding: $padding;
     position: absolute;
-    top: $padding;
+    top: ($padding * 2);
     left: 50%;
-    z-index: 5;
     @include transform(translateX(-50%)); // move left 50% of their width
-
-    li {
-        display: inline-block;
-        margin: 0 3px;
-    }
-
-    a {
-        display: inline-block;
-        border: 2px solid #fff;
-        height: 10px;
-        width: 10px;
-        border-radius: 50%;
-        opacity: .65;
-        background: black(0);
-
-        &:hover { opacity: 1; }
-        &.is-active { background: #fff; }
-    }
-
-    // Hide if no tabs
-    &:empty { display: none; }
 }

data/scss/toolkit/{modules → components}/tabs.scss

@@ -6,22 +6,6 @@
 
 @import "../common";
 
-/**
- * Should be used in conjunction with the JavaScript Titon.Tabs module.
- *
- *     <div id="tabs" class="tabs">
- *        <nav class="tabs-nav">
- *            <ul>
- *                <li><a href="#tab-1">Tab 1</a></li>
- *                <li><a href="#tab-2">Tab 2</a></li>
- *            </ul>
- *        </nav>
- *
- *        <section id="tab-1" class="tabs-section"></section>
- *        <section id="tab-2" class="tabs-section"></section>
- *     </div>
- */
-
 .tabs {
     text-align: left;
 }

data/scss/toolkit/{modules → components}/tooltip.scss

@@ -6,20 +6,6 @@
 
 @import "../common";
 
-$tooltip-transition: $default-transition !default;
-
-/**
- * Should be used in conjunction with the JavaScript Titon.Tooltip module.
- *
- *    <div class="tooltip">
- *        <div class="tooltip-inner">
- *            <div class="tooltip-head">Tooltip Title</div>
- *            <div class="tooltip-body">Tooltip Content</div>
- *        </div>
- *        <div class="tooltip-arrow"></div>
- *    </div>
- */
-
 .tooltip {
     position: absolute;
     top: 0;
@@ -108,7 +94,7 @@ $tooltip-transition: $default-transition !default;
 
     &.flip-rotate {
         @include transition(transform $tooltip-transition);
-        @include transform(rotate(-90deg));
+        @include transform(rotate(-15deg));
 
         &.show {
             @include transform(rotate(0deg));

data/scss/toolkit/{modules → components}/type-ahead.scss

@@ -6,10 +6,6 @@
 
 @import "../common";
 
-/**
- * Should be used in conjunction with the JavaScript Titon.TypeAhead module.
- */
-
 .type-ahead {
     position: absolute;
     top: 0;
@@ -49,6 +45,7 @@
 
 .type-ahead-shadow {
     position: relative;
+    height: 2rem;
 
     input {
         position: absolute;

data/scss/toolkit/effects/pill.scss

@@ -33,16 +33,18 @@
 .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;
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
     }
 
     > li:last-child .button,
     > .button:last-child {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
         border-bottom-left-radius: $pill;
         border-bottom-right-radius: $pill;
     }

data/scss/toolkit/layout/base.scss

@@ -7,7 +7,7 @@
 @import "../common";
 
 // Use border-box for everything
-*, *:after, *:before { @include box-sizing(border-box); }
+*, *:after, *:before { @include box-sizing("border-box"); }
 
 // Alignment
 .align-left { text-align: left; }
@@ -35,14 +35,20 @@
 .static { position: static; }
 
 // Layout
-.clear { clear: both; display: block; margin: 0; padding: 0; }
 .clear-fix { @include clear-fix; }
+.clear {
+    clear: both;
+    display: block;
+    margin: 0;
+    padding: 0;
+}
 
 // Styles
 .round { border-radius: $round; }
 .is-draggable { cursor: move; }
+.is-dragging { cursor: grabbing; }
 .is-disabled,
-button[disabled] { cursor: not-allowed !important; pointer-events: none; }
+[disabled] { cursor: not-allowed !important; }
 
 // Carets
 .caret-up,
@@ -56,38 +62,70 @@ button[disabled] { cursor: not-allowed !important; pointer-events: none; }
     width: 0;
 }
 
-.caret-up { border-bottom-color: $foreground-color; }
-.caret-down { border-top-color: $foreground-color; }
-.caret-left { border-right-color: $foreground-color; }
-.caret-right { border-left-color: $foreground-color; }
-
-// Close
-.x {
+.caret-up { border-bottom-color: inherit; top: -2px; }
+.caret-down { border-top-color: inherit; bottom: -2px; }
+.caret-left { border-right-color: inherit; }
+.caret-right { border-left-color: inherit; }
+
+// Arrows, Characters
+.x,
+.arrow-up,
+.arrow-down,
+.arrow-left,
+.arrow-right {
     @include reset-inline-block;
-    color: $foreground-color;
-    font: bold 1.5rem/100% Arial, sans-serif;
+    font: bold 1.5rem/1rem Arial, sans-serif;
     text-transform: uppercase;
 }
 
-.close {
-    @include reset-inline-block;
-    width: 30px;
-    height: 30px;
-    line-height: 32px;
-    text-align: center;
-    background: white(.5);
-    border-radius: 2px;
-    cursor: pointer;
-
-    .x {
-        color: black(.5);
-        position: relative;
-        top: -1px;
-    }
+.x:before { content: "\00D7"; /* times */ }
+
+.arrow-up:before,
+.arrow-left:before,
+.arrow-down:before,
+.arrow-right:before {
+    display: inline-block;
+    position: relative;
+}
+
+.arrow-up:before,
+.arrow-left:before { content: "\000AB"; /* laquo */ }
+.arrow-down:before,
+.arrow-right:before { content: "\000BB"; /* raquo */ }
 
-    &:hover {
-        background: white(.8);
+.arrow-left:before,
+.arrow-right:before { top: -2px; }
 
-        .x { color: black(.75); }
+.arrow-up:before,
+.arrow-down:before {
+    right: -2px;
+    @include transform(rotate(90deg));
+}
+
+// Bullets
+.bullets {
+    list-style: none;
+    line-height: 100%;
+    margin: 0;
+    padding: 0;
+
+    li {
+        display: inline-block;
+        margin: 0 3px;
     }
+
+    a {
+        display: inline-block;
+        border: 3px solid #fff;
+        height: 10px;
+        width: 10px;
+        border-radius: 50%;
+        opacity: $default-opacity;
+        background: black(0);
+
+        &:hover { opacity: 1; border-width: 2px; }
+        @include active-state { background: #fff; }
+    }
+
+    &:empty { display: none; }
 }

data/scss/toolkit/layout/code.scss

@@ -18,8 +18,8 @@ var,
 kbd {
     display: inline-block;
     background: $gray-dark;
-    border-radius: 2px;
-    padding: 2px 4px;
+    border-radius: $round;
+    padding: .2em .4em;
 }
 
 pre {
@@ -27,7 +27,6 @@ pre {
     margin: $margin 0;
     background: $gray-light;
     border: 1px solid $gray-dark;
-    border-radius: 3px;
     text-align: left;
     direction: ltr;
     white-space: pre;

data/scss/toolkit/layout/form.scss

@@ -48,7 +48,9 @@ label,
 //-------------------- Inputs --------------------//
 
 .input,
-.input-static {
+.input-static,
+.input-radio,
+.input-checkbox {
     @include reset-inline-block;
     border: 1px solid $gray-dark;
     font-size: $medium-size;
@@ -58,15 +60,14 @@ label,
 .input {
     background: $gray-lightest;
     border-radius: $round;
-    @include transition(all .3s);
+    @include transition(all $default-transition);
 
     &:hover { border-color: $gray-darkest; }
-    &:focus { border-color: $info; box-shadow: 0 0 5px $info-light; outline: none; }
 
-    @include disabled-state {
-        cursor: not-allowed;
-        color: $gray-darkest;
-        border-color: $gray;
+    &:focus {
+        border-color: $info;
+        box-shadow: 0 0 5px $info-light;
+        outline: none;
     }
 
     &[readonly] {
@@ -74,38 +75,51 @@ label,
         border: 1px solid $gray-dark;
         box-shadow: none;
     }
+
+    @include disabled-state {
+        cursor: not-allowed;
+        color: $gray-darkest;
+        border-color: $gray;
+    }
 }
 
-.input-static {
+.input-static,
+.input-radio,
+.input-checkbox {
     background: transparent;
     border-color: transparent;
     padding-left: 0;
     padding-right: 0;
 }
 
-select.input { padding: $medium-padding - .05; } // fixes vertical alignment
-select.input[multiple] { min-height: 150px; max-height: 500px; }
-
-textarea.input {
-    line-height: 135%;
-    min-height: 150px;
-}
-
-.radio,
-.checkbox {
-    display: inline-block;
-    vertical-align: middle;
-    cursor: pointer;
+.input-radio,
+.input-checkbox {
+    padding: 0;
 
     input[type="checkbox"],
     input[type="radio"] {
         vertical-align: middle;
         position: relative;
         top: -1px;
-        margin-right: 3px;
+        margin-right: 5px;
     }
 }
 
+select.input {
+    -webkit-appearance: none;
+    padding: $medium-padding - .05rem; // fixes vertical alignment
+}
+
+select.input[multiple] {
+    min-height: 150px;
+    max-height: 500px;
+}
+
+textarea.input {
+    line-height: 135%;
+    min-height: 150px;
+}
+
 //-------------------- Fields, Labels --------------------//
 
 .field {
@@ -114,18 +128,44 @@ textarea.input {
     &.is-required {
         .field-label { font-weight: bold; }
     }
+}
+
+.field:not(.is-disabled) {
+    &.is-error {
+        .input {
+            border-color: $error;
+
+            &:focus { box-shadow: 0 0 5px $error-light; }
+        }
+
+        .input-radio,
+        .input-checkbox {
+            color: $error-dark;
+        }
+    }
 
-    @include field-style;
+    &.is-success {
+        .input {
+            border-color: $success;
+
+            &:focus { box-shadow: 0 0 5px $success-light; }
+        }
+
+        .input-radio,
+        .input-checkbox {
+            color: $success-dark;
+        }
+    }
 }
 
 .field-label {
     display: block;
     vertical-align: middle;
-    margin-bottom: 7px;
+    margin-bottom: .5em;
 }
 
 .field-help {
-    margin-top: 7px;
+    margin-top: .5em;
     font-size: $small-size;
 }
 
@@ -153,10 +193,16 @@ textarea.input {
     .form-actions {
         display: inline-block;
         vertical-align: middle;
+        line-height: normal;
         margin-right: $margin;
         margin-bottom: $margin / 2;
     }
 
     .field-label { margin: 0 ($margin / 2) 0 0; }
     .field-help { display: none; }
+
+    .input-radio,
+    .input-checkbox {
+        padding: $medium-padding 0;
+    }
 }