titon-toolkit 0.14.0 → 1.0.0.rc1

data/scss/toolkit/mixins/_themes.scss

@@ -1,98 +0,0 @@
-
-@mixin alert-style($bg, $text) {
-    color: $text;
-    background: $bg;
-    border: 1px solid shade($bg, 10%);
-
-    hr { border-color: shade($bg, 10%); }
-
-    a { color: shade($text, 10%); }
-    a:hover { color: tint($text, 25%); }
-
-    @content;
-}
-
-@mixin button-style($base, $light, $dark) {
-    font-weight: bold;
-    background: shade($base, 5%);
-    text-shadow: 1px 1px black(.2);
-    border: 1px solid shade($base, 12%);
-
-    @include active-state {
-        color: #fff;
-        background-color: shade($base, 20%);
-        text-shadow: 1px 1px $dark;
-        border-color: shade($base, 30%);
-    }
-
-    @include disabled-state {
-        background: $base;
-        border-color: $base;
-        box-shadow: none;
-        text-shadow: none;
-        top: 0;
-        opacity: $disabled-opacity;
-    }
-
-    @content;
-}
-
-@mixin label-style($bg, $text) {
-    background: $bg;
-    color: $text;
-
-    @content;
-}
-
-@mixin progress-style($bg, $border) {
-    background: $bg;
-    text-shadow: 1px 1px $border;
-    border: 1px solid tint($border, 35%);
-    border-right: 0;
-
-    @content;
-}
-
-@mixin field-style() {
-    &.is-error {
-        .input,
-        .select {
-            border-color: $error;
-
-            &:focus { box-shadow: 0 0 5px $error-light; }
-        }
-
-        .radio,
-        .checkbox {
-            color: $error-dark;
-        }
-    }
-
-    &.is-warning {
-        .input,
-        .select {
-            border-color: $warning;
-
-            &:focus { box-shadow: 0 0 5px $warning-light; }
-        }
-
-        .radio,
-        .checkbox {
-            color: $warning-dark;
-        }
-    }
-
-    &.is-success {
-        .input,
-        .select {
-            border-color: $success;
-
-            &:focus { box-shadow: 0 0 5px $success-light; }
-        }
-
-        .radio,
-        .checkbox {
-            color: $success-dark;
-        }
-    }
-}

data/scss/toolkit/modules/carousel.scss

@@ -1,183 +0,0 @@
-/**
- * @copyright   2010-2013, The Titon Project
- * @license     http://opensource.org/licenses/bsd-license.php
- * @link        http://titon.io
- */
-
-@import "../common";
-
-$carousel-transition: 1s !default;
-
-/**
- * Should be used in conjunction with the JavaScript Titon.Carousel module.
- *
- *    <div class="carousel">
- *        <ul class="carousel-items">
- *            <li>
- *                <img src="/path/to/image.jpg">
- *                <div class="carousel-caption">Image caption</div>
- *            </li>
- *        </ul>
- *        <ol class="carousel-tabs">
- *            <li><a href=""></a></li>
- *        </ol>
- *        <a href="javascript:;" class="carousel-prev">
- *            <span class="icon-chevron-sign-left"></span>
- *        </a>
- *        <a href="javascript:;" class="carousel-next">
- *            <span class="icon-chevron-sign-right"></span>
- *        </a>
- *    </div>
- */
-
-.carousel {
-    // 16:9
-    max-width: 640px;
-    max-height: 360px;
-    width: 100%;
-    height: auto;
-    margin: 0 auto;
-    text-align: left;
-    position: relative;
-    overflow: hidden;
-}
-
-.carousel-items {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    position: relative;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: auto;
-    z-index: 1;
-    @include transition(left $carousel-transition, top $carousel-transition);
-
-    > li {
-        position: relative;
-        width: 100%;
-        height: auto;
-        z-index: 1;
-        display: block;
-
-        > img {
-            display: block;
-            width: 100%;
-            max-width: 100%;
-            height: auto;
-        }
-    }
-}
-
-.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;
-    }
-}
-
-.carousel-prev,
-.carousel-next {
-    display: block;
-    position: absolute;
-    padding: $padding;
-    width: auto;
-    height: auto;
-    z-index: 5;
-    font-size: 28px;
-    color: #fff;
-    opacity: .65;
-    top: 50%;
-    @include transform(translateY(-50%)); // move up 50% of their height
-
-    &:hover {
-        color: #fff;
-        opacity: 1;
-    }
-
-    &:focus {
-        outline: none;
-    }
-
-    // Large icons for large resolutions
-    @include if-tablet-landscape {
-        .carousel-prev,
-        .carousel-next {
-            font-size: 56px;
-        }
-    }
-}
-
-.carousel-prev { left: 0; }
-.carousel-next { right: 0; }
-
-.carousel-tabs {
-    list-style: none;
-    line-height: 100%;
-    margin: 0;
-    padding: $padding;
-    position: absolute;
-    top: 0;
-    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; }
-}
-
-//-------------------- Animations --------------------//
-
-.carousel.slide {
-    .carousel-items {
-        @include clear-fix;
-
-        > li {
-            float: left;
-        }
-    }
-}
-
-.carousel.fade {
-    .carousel-items {
-        padding-bottom: 56.25%; /* 16:9 ratio */
-
-        > li {
-            position: absolute;
-            top: 0;
-            left: 0;
-            opacity: 0;
-            z-index: 1;
-            @include transition(opacity $carousel-transition);
-
-            &.show { z-index: 2; }
-        }
-    }
-}