titon-toolkit 0.14.0 → 1.0.0.rc1

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

@@ -1,582 +0,0 @@
-/**
- * @copyright   2010-2013, The Titon Project
- * @license     http://opensource.org/licenses/bsd-license.php
- * @link        http://titon.io
- */
-
-/**
- * Based on the Tomorrow Night theme by Chris Kempson.
- * https://github.com/chriskempson/tomorrow-theme
- */
-
-@import "../common";
-
-$gray-lightest: #72757b;
-$gray-light: #575b62;
-$gray: #373b41;
-$gray-dark: #282a2e;
-$gray-darkest: #1d1f21;
-
-$background-color: #1d1f21;
-$foreground-color: #c5c8c6;
-$middleground-color: #373b41;
-
-$default: #969896;
-$default-light: #e2e3e2;
-$default-dark: #515251;
-
-$info: #81a2be;
-$info-light: #d2e9f4;
-$info-dark: #45586d;
-
-$warning: #f0c674;
-$warning-light: #fdf7c5;
-$warning-dark: #b1753e;
-
-$success: #b5bd68;
-$success-light: #f1f4b8;
-$success-dark: #666d37;
-
-$error: #cc6666;
-$error-light: #f8b5b5;
-$error-dark: #7a3636;
-
-//-------------------- Layout --------------------//
-
-body {
-    color: $foreground-color;
-    background: $background-color;
-}
-
-.close {
-    width: 20px;
-    height: 20px;
-    line-height: 22px;
-}
-
-.input-group {
-    > .input,
-    > .input-addon,
-    > .button,
-    > .button-group .button { height: 42px; }
-}
-
-//-------------------- Typography --------------------//
-
-.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; }
-.x { color: $foreground-color; }
-
-.text-muted { color: $default; }
-.text-info { color: $info; }
-.text-error { color: $error; }
-.text-warning { color: $warning; }
-.text-success { color: $success; }
-
-a {
-    color: $info;
-    text-decoration: none;
-
-    &:hover { color: $info-light; }
-}
-
-blockquote { border-color: $info; }
-blockquote cite { color: $default; }
-
-pre, code, var, kbd { color: $default-dark; }
-code { background: $info-light; color: $info-dark; }
-var { background: $error-light; color: $error-dark; }
-
-//-------------------- Layout --------------------//
-
-.table {
-    background: $gray;
-
-    td, th {
-        border-color: $gray-light;
-    }
-
-    thead tr,
-    tfoot tr {
-        background: $gray-light;
-
-        th { border-color: $gray-lightest; }
-    }
-
-    tbody tr {
-        background: $gray;
-
-        &:nth-child(odd) { background: $gray-dark; }
-        &.divider { background: $gray-light; }
-    }
-}
-
-.table.table--hover {
-    tbody tr:not(.divider):hover { background: $gray-darkest; }
-}
-
-.table.table--sortable thead th a {
-    background: $gray-light;
-    color: #fff;
-
-    &:hover { background: shade($gray-light, 5%); }
-}
-
-fieldset {
-    border-color: $gray-light;
-}
-
-.input {
-    background: $gray;
-    border-color: $gray-light;
-    color: $foreground-color;
-
-    &:hover { border-color: $gray-lightest; }
-    &:focus { border-color: $info; box-shadow: 0 0 5px $info-light; }
-
-    @include disabled-state {
-        color: $default;
-        border-color: $gray;
-    }
-
-    &[readonly] {
-        color: $default;
-        border-color: $gray;
-        box-shadow: none;
-    }
-}
-
-.input-addon {
-    border-color: $gray-light;
-    background-color: $gray-dark;
-}
-
-.input-group {
-    .input-addon,
-    .button,
-    .button-group {
-        box-shadow: none;
-        margin-right: -5px;
-    }
-}
-
-.field {
-    @include field-style;
-}
-
-//-------------------- Accordion --------------------//
-
-.accordion {
-    border-color: $gray-light;
-    border-radius: 3px;
-    background: $gray-dark;
-
-    li {
-        &:first-child .accordion-head {
-            border-top-left-radius: 3px;
-            border-top-right-radius: 3px;
-        }
-
-        &:last-child {
-            .accordion-head {
-                border-bottom-left-radius: 3px;
-                border-bottom-right-radius: 3px;
-            }
-
-            .accordion-body {
-                border: 0;
-            }
-        }
-
-        &.is-active .accordion-head {
-            background: $gray-light;
-            border-color: $gray-lightest;
-            color: $success;
-        }
-    }
-}
-
-.accordion-head {
-    color: $info;
-    background: $gray;
-    border-color: $gray-light;
-    padding: 1rem;
-    text-align: center;
-    cursor: pointer;
-    @include transition(all .3s);
-}
-
-.accordion-body { padding: $padding; }
-
-//-------------------- Alert --------------------//
-
-.alert {
-    text-shadow: 0 1px 0 white(.50);
-    box-shadow: 0 0 3px #000;
-    @include alert-style($default-light, $default-dark);
-
-    &.is-info { @include alert-style($info-light, $info-dark); }
-    &.is-warning { @include alert-style($warning-light, $warning-dark); }
-    &.is-error { @include alert-style($error-light, $error-dark); }
-    &.is-success { @include alert-style($success-light, $success-dark); }
-}
-
-//-------------------- Button --------------------//
-
-.breadcrumbs {
-    background: $gray;
-    border-color: $gray-light;
-
-    a {
-        padding-right: 0 !important;
-
-        .caret-right {
-            top: -1px;
-            margin-left: $medium-padding;
-            opacity: .5;
-            display: inline-block;
-        }
-    };
-
-    &.small a .caret-right { margin-left: $small-padding; }
-    &.large a .caret-right { margin-left: $large-padding; }
-
-    li:last-child a {
-        color: $default;
-        .caret-right { display: none; }
-    }
-}
-
-//-------------------- Button --------------------//
-
-$button-shadow: 0 1px 0 white(.5) inset, 0 0 3px #000;
-
-@mixin button-style($color) {
-    color: shade($color, 75%);
-    background: $color;
-    border: 1px solid #000;
-    @include background-image(linear-gradient($color, shade($color, 30%)));
-
-    @include active-state {
-        color: #000;
-        background: tint($color, 30%);
-        @include background-image(linear-gradient(tint($color, 30%), $color));
-    }
-
-    @include disabled-state { background: $color; }
-    &:active { background: $color; }
-}
-
-.button {
-    font-weight: bold;
-    text-shadow: 0 1px white(.35);
-    box-shadow: $button-shadow;
-    @include transition(all .3s);
-
-    &.small, .small & { text-shadow: 0 1px white(.25); }
-    &.large, .large & { font-weight: normal; }
-
-    @include button-style($default);
-    @include disabled-state {
-        opacity: .35;
-    }
-
-    &.is-info { @include button-style($info); }
-    &.is-warning { @include button-style($warning); }
-    &.is-error { @include button-style($error); }
-    &.is-success { @include button-style($success); }
-}
-
-.button.visual-popout {
-    box-shadow: $button-shadow, 0 6px 0 0 black(.25) !important;
-
-    &:active {
-        box-shadow: $button-shadow, 0 3px 0 0 black(.5) !important;
-    }
-}
-
-//-------------------- ButtonGroup, Pagination --------------------//
-
-.button-group,
-.pagination.pagination--grouped ul {
-    box-shadow: 0 0 3px #000;
-
-    li .button,
-    > .button {
-        box-shadow: 0 1px 0 white(0.5) inset;
-        border-left: 1px solid black(.35);
-        border-right: 1px solid black(.35);
-    }
-}
-
-.button-group {
-    > li:first-child .button,
-    > .button:first-child { border-left: 0; }
-
-    > li:last-child .button,
-    > .button:last-child { border-right: 0; }
-}
-
-.pagination.pagination--grouped li {
-    &:first-child .button { border-left: 0; }
-    &:last-child .button { border-right: 0; }
-}
-
-.button-group.button-group--vertical {
-    .button {
-        box-shadow: none;
-        border: 1px solid black(.35);
-    }
-
-    > li:first-child .button,
-    > .button:first-child { border-top: 0; }
-
-    > li:last-child .button,
-    > .button:last-child { border-bottom: 0; }
-}
-
-//-------------------- Label, Badge --------------------//
-
-.label,
-.badge {
-    color: #000;
-    box-shadow: 0 0 3px #000;
-    text-shadow: 0 1px white(.35);
-    background-color: $default;
-
-    &.is-info { background-color: $info; }
-    &.is-warning { background-color: $warning; }
-    &.is-error { background-color: $error; }
-    &.is-success { background-color: $success; }
-}
-
-.label.label--left {
-    &:after { border-right-color: $default; }
-    &.is-info:after { border-right-color: $info; }
-    &.is-warning:after { border-right-color: $warning; }
-    &.is-error:after { border-right-color: $error; }
-    &.is-success:after { border-right-color: $success; }
-}
-
-.label.label--right {
-    &:after { border-left-color: $default; }
-    &.is-info:after { border-left-color: $info; }
-    &.is-warning:after { border-left-color: $warning; }
-    &.is-error:after { border-left-color: $error; }
-    &.is-success:after { border-left-color: $success; }
-}
-
-//-------------------- Dropdown, TypeAhead, Flyout --------------------//
-
-.dropdown,
-.flyout,
-.type-ahead {
-    border: 3px solid white(.75);
-    border-radius: 3px;
-    background: $gray-dark;
-    box-shadow: 0 0 3px #000;
-
-    li {
-        border-top: 1px solid $gray;
-
-        &:first-child { border: 0; }
-
-        a {
-            .caret-right {
-                float: right;
-                margin-top: 3px;
-            }
-        }
-
-        a:hover,
-        &.is-open > a,
-        &.is-active > a,
-        &:hover > a {
-            background: $gray-darkest;
-            color: #fff;
-        }
-
-        &.heading {
-            background: $gray;
-            font-size: .9em;
-            color: #fff;
-        }
-
-        &.divider {
-            background: $gray-darkest;
-            border-top: 1px solid $gray;
-            height: 10px;
-            margin: 0;
-        }
-    }
-}
-
-.type-ahead-desc {
-    display: block;
-    color: $default;
-    font-size: .7rem;
-}
-
-.type-ahead-highlight {
-    color: $warning;
-}
-
-//-------------------- Modal --------------------//
-
-.modal {
-    .close {
-        top: -11px;
-        right: -35px;
-    }
-}
-
-.modal-outer {
-    border: 10px solid white(.75);
-    border-radius: 3px;
-    background: $gray-dark;
-    margin: 10px;
-}
-
-.modal-head,
-.modal-foot,
-.modal-loading,
-.modal-error {
-    background: $gray-darkest;
-}
-
-.modal-head {
-    font-size: 1rem;
-    font-weight: normal;
-    color: $info;
-}
-
-.modal-foot {
-    text-align: center;
-}
-
-.modal-body {
-    border-top: 1px solid $gray;
-    border-bottom: 1px solid $gray;
-}
-
-//-------------------- Popover --------------------//
-
-.popover {
-    border: 3px solid white(.75);
-    border-radius: 3px;
-    background: $gray-dark;
-    box-shadow: 0 0 3px #000;
-    margin: 10px;
-
-    .popover-head {
-        font-size: 1rem;
-        font-weight: bold;
-        color: $info;
-        background: $gray-darkest;
-        border-bottom: 1px solid $gray;
-    }
-
-    &.center-left .popover-arrow {
-        right: -19px;
-        border-left-color: $gray-darkest;
-
-        &:after {
-            margin-left: -2px;
-            border-left-color: white(.75);
-        }
-    }
-
-    &.center-right .popover-arrow {
-        left: -19px;
-        border-right-color: $gray-darkest;
-
-        &:after {
-            margin-left: 2px;
-            border-right-color: white(.75);
-        }
-    }
-
-    &.top-center .popover-arrow {
-        bottom: -19px;
-        border-top-color: $gray-darkest;
-
-        &:after {
-            margin-top: -2px;
-            border-top-color: white(.75);
-        }
-    }
-
-    &.bottom-center .popover-arrow {
-        top: -19px;
-        border-bottom-color: $gray-darkest;
-
-        &:after {
-            margin-top: 2px;
-            border-bottom-color: white(.75);
-        }
-    }
-}
-
-//-------------------- Progress --------------------//
-
-.progress {
-    background: $gray;
-    box-shadow: inset 1px 1px 2px $gray-darkest;
-    border-radius: $round;
-}
-
-.progress-bar {
-    color: #fff;
-    font-weight: bold;
-    border-top-left-radius: $round;
-    border-bottom-left-radius: $round;
-    @include progress-style($default, $default-dark);
-
-    &.is-info { @include progress-style($info, $info-dark); }
-    &.is-error { @include progress-style($error, $error-dark); }
-    &.is-warning { @include progress-style($warning, $warning-dark); }
-    &.is-success { @include progress-style($success, $success-dark); }
-}
-
-.progress-bar + .progress-bar {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-}
-
-//-------------------- Showcase --------------------//
-
-.showcase {
-    border: 10px solid white(.75);
-    border-radius: 3px;
-
-    .close {
-        top: -11px;
-        right: -35px;
-    }
-}
-
-.showcase-inner {
-    padding: 0;
-}
-
-//-------------------- Tooltip --------------------//
-
-.tooltip {
-    background: white(.90);
-    color: #000;
-    border-radius: 3px;
-    margin: $margin / 2;
-
-    .tooltip-head {
-        padding-bottom: $small-padding;
-        font-weight: bold;
-        font-size: 1rem;
-    }
-
-    &.top-center .tooltip-arrow { border-top-color: white(.90); }
-    &.center-left .tooltip-arrow { border-left-color: white(.90); }
-    &.center-right .tooltip-arrow { border-right-color: white(.90); }
-    &.bottom-center .tooltip-arrow { border-bottom-color: white(.90); }
-}

data/scss/toolkit/ui/icon.scss

@@ -1,22 +0,0 @@
-/**
- * @copyright   2010-2013, The Titon Project
- * @license     http://opensource.org/licenses/bsd-license.php
- * @link        http://titon.io
- */
-
-@import "../common";
-
-/**
- *    <span class="icon-16-delete"></span>
- */
-
-[class*="icon-"] { @include reset-inline-block; }
-[class*="icon-12"] { width: 12px; height: 12px; }
-[class*="icon-16"] { width: 16px; height: 16px; }
-[class*="icon-24"] { width: 24px; height: 24px; }
-[class*="icon-32"] { width: 32px; height: 32px; }
-[class*="icon-64"] { width: 64px; height: 64px; }
-
-.button {
-    [class*="icon-"] { margin-top: -1px; }
-}

data/scss/toolkit/ui/label-badge.scss

@@ -1,76 +0,0 @@
-/**
- * @copyright   2010-2013, The Titon Project
- * @license     http://opensource.org/licenses/bsd-license.php
- * @link        http://titon.io
- */
-
-@import "../common";
-
-/**
- *    <span class="badge is-success">15</span>
- *    <span class="label is-error">Required</span>
- */
-
-.badge,
-.label {
-    @include reset-inline-block;
-    color: #fff;
-    // Shorthand doesn't work in IE
-    font-weight: bold;
-    font-size: .6rem;
-    line-height: 100%;
-    background: #282a2e;
-    padding: 3px 5px;
-    text-transform: uppercase;
-    border-radius: 2px;
-    white-space: nowrap;
-    top: -1px;
-
-    &:empty { display: none; }
-}
-
-.label {
-    letter-spacing: 1px;
-}
-
-.badge {
-    border-radius: 10px;
-}
-
-//-------------------- Modifiers --------------------//
-
-.label.label--left {
-    border-top-left-radius: 1px;
-    border-bottom-left-radius: 1px;
-    padding-left: 2px;
-    margin-left: 10px;
-
-    &:after {
-        top: 0;
-        right: 100%;
-        content: "";
-        height: 0;
-        width: 0;
-        position: absolute;
-        border: .85em solid transparent;
-        border-right-color: #282a2e;
-    }
-}
-
-.label.label--right {
-    border-top-right-radius: 1px;
-    border-bottom-right-radius: 1px;
-    padding-right: 2px;
-    margin-right: 10px;
-
-    &:after {
-        top: 0;
-        left: 100%;
-        content: "";
-        height: 0;
-        width: 0;
-        position: absolute;
-        border: .85em solid transparent;
-        border-left-color: #282a2e;
-    }
-}

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

@@ -1,19 +0,0 @@
-/**
- * @copyright   2010-2013, The Titon Project
- * @license     http://opensource.org/licenses/bsd-license.php
- * @link        http://titon.io
- */
-
-@import "../common";
-
-$lazyLoad-transition: $default-transition !default;
-
-/**
- * Will hide background images and defer image loading until they are within viewport.
- * Should be used in conjunction with the JavaScript Titon.LazyLoad component.
- */
-
-.lazy-load {
-    background-image: none !important;
-    @include transition(background-image $lazyLoad-transition);
-}