Contents

/**
 * @copyright	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.9.4	src/scss/toolkit/effects/visual.scss
titon-toolkit-0.9.3	src/scss/toolkit/effects/visual.scss
titon-toolkit-0.9.2	src/scss/toolkit/effects/visual.scss