Contents

/**
 * @copyright   2010-2013, The Titon Project
 * @license     http://opensource.org/licenses/bsd-license.php
 * @link        http://titon.io
 */

@import "../common";

//-------------------- Gloss --------------------//

.visual-gloss {
    &:after {
        content: "";
        position: absolute;
        width: 100%;
        height: 60%;
        top: 1%;
        left: 0;
        border-radius: 0 0 2rem 2rem / 0 0 1rem 1rem;
        @include background-image(linear-gradient(left, white(.3) 0%, white(0) 50%, white(.3) 100%));
    }

    &.round:after {
        border-radius: .2rem .2rem 2rem 2rem / .5rem .5rem 1rem 1rem;
        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 --------------------//

.visual-reflect:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 50%;
    top: 0;
    left: 0;
    @include background-image(linear-gradient(top, white(0), white(.3)));
}

//-------------------- Glare --------------------//

.visual-glare:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    @include background-image(linear-gradient(160deg, white(.5) 0%, white(.1) 50%, white(0) 50%, white(.3) 100%));
}

//-------------------- Popout --------------------//

.visual-popout {
    box-shadow: 0 6px 0 0 black(.25) !important;
    top: -3px;

    &:active {
        box-shadow: 0 3px 0 0 black(.5) !important;
        top: 0;
    }
}

Version data entries

3 entries across 3 versions & 1 rubygems

Version	Path
titon-toolkit-0.12.0	scss/toolkit/effects/visual.scss
titon-toolkit-0.11.2	scss/toolkit/effects/visual.scss
titon-toolkit-0.10.0	src/scss/toolkit/effects/visual.scss