silverstripe-dms/scss/_mixins.scss

@import "compass/css3";
$color-button-generic: #e6e6e6 !default;


@mixin tabButtons{
	.middleColumn{
		overflow:auto;
		min-width: 800px;
		ul{
			padding:0;
			input[type="radio"]{
				display:none;
			}
			li{
				display:table;
				padding: 0;
				width:125px;
				height:40px;
				white-space:normal;
				margin-right: -1px;
				border-radius: 0;
				&:first-child{
					border-radius: 6px 0 0 6px;
					border-left: 1px solid #C0C0C2;
				}
				&:last-child{
					border-radius: 0 6px 6px 0;
				}
				&.selected, .ie8 &.selected{
					border-bottom:1px solid #C0C0C2;
					@include background(
						linear-gradient(color-stops(
							darken($color-button-generic, 15%),
							$color-button-generic
						))
					);
					background-color: darken($color-button-generic, 15%);
					filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C0C0C2', endColorstr='#E6E6E6'); /* IE6 & IE7 */
					-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C0C0C2', endColorstr='#E6E6E6')"; /* IE8 */
					box-shadow: 0 1px 1px 0 #A0A0A0 inset;
					:after{
						box-shadow: 0 1px 1px 0 #DDD;
					}
				}
				label{
					display: table-cell;
					vertical-align: middle;
					text-align: center;
					padding: 0 10px;
				}
			}
		}
	}
}

@mixin active-actions-btn{
	border-bottom:1px solid #C0C0C2;
	@include background(
		linear-gradient(color-stops(
			darken($color-button-generic, 15%),
			$color-button-generic
		))
	);
	background-color: darken($color-button-generic, 15%);
	filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C0C0C2', endColorstr='#E6E6E6'); /* IE6 & IE7 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C0C0C2', endColorstr='#E6E6E6')"; /* IE8 */
	box-shadow: 0 1px 1px 0 #A0A0A0 inset;
	&:after{
		content: '';
		display: block;
		position: absolute;
		top: 33px;
		left: 50%;
		margin-left: -6px;
		width: 12px;
		height: 12px;
		background: #F8F8F8;
		border-right: 1px solid #B3B3B3;
		border-top: 1px solid #B3B3B3;
		-moz-transform:rotate(-45deg);
		-webkit-transform:rotate(-45deg);
		pointer-events:none;
		z-index: 10;
	}
}