@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; } }