titon-toolkit 1.5.3 → 2.0.0.pre.rc.1

data/scss/toolkit/themes/demo.scss

@@ -1,569 +0,0 @@
-/**
- * @copyright   2010-2014, The Titon Project
- * @license     http://opensource.org/licenses/BSD-3-Clause
- * @link        http://titon.io
- */
-
-@import "../common";
-
-html {
-    font: normal 16px/1.75rem "Helvetica Neue", Helvetica, Arial, sans-serif;
-}
-
-body {
-    background: $background-color;
-    color: $foreground-color;
-}
-
-//-------------------- Layout --------------------//
-
-a {
-    color: darken($info, 15%);
-    text-decoration: none;
-
-    &:hover { color: $info-dark; }
-}
-
-blockquote cite { color: $default; }
-
-//code { background: $info-light; color: $info-dark; }
-//var { background: $error-light; color: $error-dark; }
-mark { background: lighten($warning-light, 25%); }
-
-//-------------------- Accordion --------------------//
-
-.accordion-header {
-    background: $gray;
-    border: 1px solid $gray-dark;
-    margin: -1px;
-    transition: all .15s;
-
-    &:hover { background-color: $gray-light; }
-
-    .is-active & {
-        background: $info;
-        border-color: $info-dark;
-        color: #fff;
-
-        &:hover { background-color: lighten($info, 5%); }
-    }
-}
-
-//-------------------- Breadcrumbs --------------------//
-
-.breadcrumb {
-    border: 1px solid $gray-dark;
-    background: $gray;
-
-    ul, ol {
-        .caret { color: $gray-darkest; }
-    }
-}
-
-//-------------------- Button --------------------//
-
-@mixin button-style($base, $light, $dark) {
-    background: darken($base, 5%);
-    border: 1px solid darken($base, 12%);
-
-    &:hover {
-        color: #fff;
-        background-color: lighten($base, 5%);
-    }
-
-    @include is-active {
-        color: #fff;
-        background-color: darken($base, 20%);
-        text-shadow: 1px 1px $dark;
-        border-color: darken($base, 30%);
-    }
-
-    @include is-disabled {
-        background: $base;
-        border-color: $base;
-    }
-
-    @content;
-}
-
-.button {
-    color: #fff;
-    background: $gray;
-    font-weight: bold;
-    text-shadow: 1px 1px black(.2);
-    transition: color .2s, border .2s, background .2s;
-    @include button-style($default, $default-light, $default-dark);
-
-    &:active {
-        top: 1px;
-    }
-
-    @include is-disabled {
-        box-shadow: none;
-        text-shadow: none;
-        top: 0;
-        opacity: $disabled-opacity;
-    }
-
-    &.is-info { @include button-style($info, $info-light, $info-dark); }
-    &.is-error { @include button-style($error, $error-light, $error-dark); }
-    &.is-warning { @include button-style($warning, $warning-light, $warning-dark); }
-    &.is-success { @include button-style($success, $success-light, $success-dark); }
-}
-
-//-------------------- Carousel, Showcase --------------------//
-
-.carousel-prev,
-.carousel-next,
-.showcase-prev,
-.showcase-next {
-    opacity: $carousel-opacity;
-
-    .arrow-left,
-    .arrow-right {
-        color: #fff;
-        font-size: 2rem;
-    }
-
-    &:hover { opacity: 1; }
-}
-
-.showcase-close {
-    opacity: $showcase-opacity;
-
-    .x { color: #fff; }
-
-    &: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 {
-    background: $gray;
-    border: 1px solid $gray-dark;
-    box-shadow: 5px 5px black(.25);
-    padding: $small-padding;
-
-    ul { padding: $small-padding; }
-    > ul { padding: 0; }
-
-    li {
-        > a {
-            color: darken($info, 15%);
-
-            .caret-right { top: 2px; }
-        }
-
-        &:hover > a {
-            color: darken($info, 15%);
-            background: $info-light;
-        }
-
-        &.is-active > a {
-            color: #fff;
-            background: $info;
-
-            .drop-desc { color: #fff; }
-            .caret-right { border-left-color: #fff; }
-        }
-
-        &:nth-child(odd) {
-            background: $gray-lightest;
-        }
-    }
-}
-
-.drop-heading {
-    color: $default;
-    font-size: .8rem;
-    background-color: $gray-dark !important;
-}
-
-.drop--up {
-    box-shadow: 5px -5px black(.25);
-}
-
-.drop--left {
-    box-shadow: -5px 5px black(.25);
-}
-
-.drop-desc {
-    display: block;
-    color: $gray-darkest;
-    font-size: .7rem;
-}
-
-//-------------------- Flyout, TypeAhead --------------------//
-
-.flyout,
-.type-ahead {
-    background: $gray;
-    border: 1px solid $gray-dark;
-    box-shadow: 5px 5px black(.25);
-    padding: $small-padding;
-
-    li {
-        &:nth-child(odd) > a { background: $gray-lightest; }
-
-        > a:hover,
-        &.is-open > a,
-        &.is-active > a {
-            background: $info;
-            color: #fff;
-
-            .caret-right { border-left-color: #fff; }
-        }
-    }
-}
-
-.flyout-heading,
-.type-ahead-heading {
-    background: $gray-dark;
-}
-
-.type-ahead-highlight { background: $warning-light; }
-
-.type-ahead {
-    li {
-        > a:hover,
-        &.is-active a {
-            .type-ahead-desc { color: $gray-lightest; }
-            .type-ahead-highlight{ background: $info-light; color: $info-dark; }
-        }
-    }
-}
-
-//-------------------- Input --------------------//
-
-.custom-input {
-    .checkbox,
-    .radio,
-    .select {
-        transition: all $default-transition;
-    }
-
-    input {
-        &:checked + .checkbox,
-        &:checked + .radio {
-            box-shadow: 0 0 5px $info-light;
-        }
-    }
-
-    select:focus + .select,
-    .select.is-active {
-        box-shadow: 0 0 5px $info-light;
-    }
-
-    .select.is-active {
-        .caret-down {
-            top: -5px;
-            transform: rotate(-180deg);
-        }
-    }
-}
-
-/*.input-group {
-    > .button { height: 44px; }
-
-    &.small > .button { height: 30px; }
-    &.large > .button { height: 59px; }
-*/
-
-.input-addon {
-    background: $gray;
-    border: 1px solid $gray-dark;
-}
-
-//-------------------- Label --------------------//
-
-@mixin label-style($bg, $text) {
-    background: $bg;
-    color: $text;
-
-    @content;
-}
-
-.label,
-.label--badge {
-    @include label-style($default-light, $default-dark);
-
-    &.is-info { @include label-style($info-light, $info-dark); }
-    &.is-error { @include label-style($error-light, $error-dark); }
-    &.is-warning { @include label-style($warning-light, $warning-dark); }
-    &.is-success { @include label-style($success-light, $success-dark); }
-}
-
-.label--arrow-left {
-    @extend .label;
-
-    &:after { border-right-color: $default-light; }
-    &.is-info:after { border-right-color: $info-light; }
-    &.is-error:after { border-right-color: $error-light; }
-    &.is-warning:after { border-right-color: $warning-light; }
-    &.is-success:after { border-right-color: $success-light; }
-}
-
-.label--arrow-right {
-    @extend .label;
-
-    &:after { border-left-color: $default-light; }
-    &.is-info:after { border-left-color: $info-light; }
-    &.is-error:after { border-left-color: $error-light; }
-    &.is-warning:after { border-left-color: $warning-light; }
-    &.is-success:after { border-left-color: $success-light; }
-}
-
-.label--ribbon-left {
-    @extend .label;
-
-    &:after { border-right-color: darken($default, 15%); }
-    &.is-info:after { border-right-color: darken($info-light, 15%); }
-    &.is-error:after { border-right-color: darken($error-light, 15%); }
-    &.is-warning:after { border-right-color: darken($warning-light, 15%); }
-    &.is-success:after { border-right-color: darken($success-light, 15%); }
-}
-
-.label--ribbon-right {
-    @extend .label;
-
-    &:after { border-left-color: darken($default, 15%); }
-    &.is-info:after { border-left-color: darken($info-light, 15%); }
-    &.is-error:after { border-left-color: darken($error-light, 15%); }
-    &.is-warning:after { border-left-color: darken($warning-light, 15%); }
-    &.is-success:after { border-left-color: darken($success-light, 15%); }
-}
-
-//-------------------- Modal --------------------//
-
-.modal-inner {
-    background: $gray;
-    border: 1px solid $gray-dark;
-    box-shadow: 5px 5px black(.25);
-}
-
-.modal-head {
-    background: $gray-lightest;
-}
-
-.modal-body {
-    background: #fff;
-    border-top: 1px solid $gray-dark;
-    border-bottom: 1px solid $gray-dark;
-}
-
-.modal-foot {
-    text-align: center;
-}
-
-//-------------------- Notice --------------------//
-
-@mixin notice-style($bg, $text) {
-    color: $text;
-    background: lighten($bg, 5%);
-    border: 1px solid $bg;
-
-    hr { border-color: darken($bg, 10%); }
-
-    a { color: darken($text, 10%); }
-    a:hover { color: lighten($text, 25%); }
-
-    @content;
-}
-
-.notice {
-    @include notice-style($default-light, $default-dark);
-
-    &.is-info { @include notice-style($info-light, $info-dark); }
-    &.is-error { @include notice-style($error-light, $error-dark); }
-    &.is-warning { @include notice-style($warning-light, $warning-dark); }
-    &.is-success { @include notice-style($success-light, $success-dark); }
-}
-
-//-------------------- Popover --------------------//
-
-.popover {
-    margin: 15px;
-    background: #fff;
-    line-height: 115%;
-    border-radius: $round;
-    border: 1px solid $gray-dark;
-    box-shadow: 5px 5px black(.25);
-
-    &.top-center .popover-arrow {
-        border-top-color: black(.25);
-        transform: translateY(6px);
-
-        &:after {
-            margin-top: -8px;
-            border-top: 8px solid #fff;
-        }
-    }
-
-    &.center-left .popover-arrow {
-        border-left-color: black(.25);
-        transform: translateX(6px);
-
-        &:after {
-            margin-left: -8px;
-            border-left: 8px solid #fff;
-        }
-    }
-
-    &.center-right .popover-arrow {
-        border-right-color: $gray-dark;
-
-        &:after {
-            margin-left: 2px;
-            border-right-color: #fff;
-        }
-    }
-
-    &.bottom-center .popover-arrow {
-        border-bottom-color: $gray-dark;
-
-        &:after {
-            margin-top: 2px;
-            border-bottom-color: #fff;
-        }
-    }
-
-    &.top-left,
-    &.top-right,
-    &.bottom-left,
-    &.bottom-right {
-        margin: $margin / 2;
-    }
-}
-
-.popover-head {
-    font-weight: bold;
-    background: $gray;
-    border-bottom: 1px solid $gray-dark;
-}
-
-//-------------------- Progress --------------------//
-
-@mixin progress-style($bg, $border) {
-    background: $bg;
-    text-shadow: 1px 1px $border;
-    border: 1px solid darken($bg, 12%);
-
-    @content;
-}
-
-.progress {
-    background: $gray;
-    box-shadow: inset 1px 1px 2px $gray-darkest;
-}
-
-.progress-bar {
-    color: #fff;
-    font-weight: bold;
-    @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); }
-}
-
-//-------------------- Showcase --------------------//
-
-.showcase-inner {
-    background: $gray;
-    padding: 5px;
-    border-radius: .2rem;
-}
-
-.showcase-caption {
-    color: #fff;
-    line-height: 125%;
-    font-size: .9rem;
-}
-
-.showcase-items {
-    background: $gray;
-}
-
-//-------------------- Step --------------------//
-
-.steps ol {
-    border: 1px solid $gray-dark;
-    background: $gray;
-}
-
-.step:after {
-    background: $gray;
-    border-right: 1px solid $gray-dark;
-    border-bottom: 1px solid $gray-dark;
-}
-
-a.step:hover,
-a.step:hover:after {
-    background: $gray-lightest;
-}
-
-.steps li.is-complete {
-    a.step,
-    a.step:after {
-        background: $info;
-        color: #fff;
-    }
-}
-
-//-------------------- Switch --------------------//
-
-.switch {
-    overflow: hidden;
-    background: $gray-light;
-    border: 1px solid $gray-dark;
-
-    input:checked + .switch-bar {
-        background: $info;
-        color: #fff;
-    }
-}
-
-.switch-toggle {
-    background: #fff;
-}
-
-.switch--stacked input:not(:checked) + .switch-bar:before,
-.switch--stacked input:checked + .switch-bar:after {
-    color: $foreground-color;
-}
-
-//-------------------- Tooltip --------------------//
-
-.tooltip {
-    background: black(.85);
-    color: #fff;
-    border-radius: $round;
-    margin: 10px;
-    line-height: 115%;
-
-    &.top-center .tooltip-arrow { border-top-color: black(.70); }
-    &.center-left .tooltip-arrow { border-left-color: black(.70); }
-    &.center-right .tooltip-arrow { border-right-color: black(.70); }
-    &.bottom-center .tooltip-arrow { border-bottom-color: black(.70); }
-}
-
-.tooltip-head {
-    color: $info;
-    font-weight: bold;
-    margin-bottom:  $margin / 2;
-}