org.eclipse.osbp.themes/scss/components/_button.scss

/* extends .v-button */
@mixin os-button($variant: os) {
	@include valo-button-style(
		$unit-size: $os-button-height, 
		$padding: null, // floor($os-unit-size/5), 
		$font-color: valo-font-color($os-button-color), //$os-background-color, 
		$font-weight: $v-font-weight + 300, 
		$font-size: null, 
		$cursor: null, 
		$background-color: $os-button-color, 
		$border: $os-border, 
		$border-radius: $v-border-radius, 
		$gradient: null, 
		$bevel: $v-bevel, 
		$shadow: $os-shadow, 
		$states: normal disabled);// hover focus active disabled );
	@if $os-button-uppercase == true {
		text-transform: uppercase;
	    //letter-spacing: floor($os-font-size/10);
		}
	border-color: $os-button-color;
	margin-left: floor($os-unit-size/5);
	

	@if $variant == os {
		&.v-pressed {
			background: get_color_mix($os-highlight-color, #fff, 70) !important;
			border-color: get_color_mix($os-highlight-color, #fff, 70) !important;
			//color: valo-font-color(get_color_mix($os-highlight-color, #fff, 70)) !important;
			}
		&:after {
			transition: none;
			}
		&:hover  /*, &:focus, &:active */{
			background: $os-odd-highlight;
			border-color: $os-odd-highlight;
			color: valo-font-color($os-odd-highlight);
			
			@if $web == true {
				background: $os-highlight-color;
				border-color: $os-highlight-color;
				color: valo-font-color($os-highlight-color);
				}
			}
		&:focus:after {
			border-color: transparent;
			transition: none;
			@if $web == true {
				border-color: $os-highlight-color;			
				}
			}
		}
	}

@mixin os-button-perspectivepanel  {
	.v-button {
		@if $web==true {
			background-color: $os-button-as-tab-inactive;
			color: valo-font-color($os-button-as-tab-inactive);
			}
		@if $os-bordered==true {
			height: ceil(1.6 * $os-unit-size);
			}
		@else {
			@include box-shadow($os-shadow-reversed);
			}
		}
	}

@mixin os-button-toolbar {
	background: $os-background-color;
	border: none;
	&:hover, &:focus, &:active {
		background: get_color_mix($os-highlight-color, #fff, 50); 
		}
		/*
	&.v-pressed {
		background: get_color_mix($os-highlight-color, #fff, 70);
		}*/
	}
	
@mixin os-button-usermenu {
	//hover etc. on icon-font (can't use calculated valo-font-color color from above)
	&:after {
		transition: none;
		}
	&:hover, &:focus, &:active {
		color: $os-highlight-color;
		}
	&:hover:after {
		transition: none;
		}
	&:focus:after {
		transition: none;
		}
	&:active:after {
		transition: none;
		}	
	}
	
@mixin os-button-data {
	margin-right: 12px;
	}

@mixin os-button-no-margin {
	margin: 0px;
	}
	
@mixin os-button-trimbar($variant: os) {
	background: transparent;
	border-radius: 0px;
	border-color: $os-background-color;
	border-width: 0px;
	border-bottom-width: 1px;
	@if $variant == cx {
		height: $os-unit-size + floor($os-unit-size/3);
		}			
	@else {
  		height: $os-button-height;
		}	

	}
			
@mixin os-button-filterspanel {
	color: valo-font-color($os-light-contrast);
	white-space: normal;
	background: $os-light-contrast;
	padding-top: $os-filters-padding;
	border-right-width: 0px;
	border-top-width: 0px;
	border-left-width: 1px;
	border-left-color: $os-background-color;
	border-bottom: $os-border;
	margin-left: 0px;
	font-weight: normal;
	@if $os-button-uppercase == true {
		text-transform: none;
		}
	
	&:focus {
		background-color: $os-focus-color;
		color: valo-font-color($os-focus-color);
		border-bottom-color: $os-highlight-color;
		border-bottom-width: 1px;
		border-left: $os-border;
		border-left-color: $os-background-color;
		}
	&:focus:after {
		border-right-width: 0px;
		border-top-width: 0px;
		border-left: $os-border;
		border-left-color: $os-background-color;
		border-bottom-width: 1px;
		}
	&:hover:after {
		border-bottom-width: 1px;
		border-left: $os-border;
		border-left-color: $os-background-color;
		}
	/*
	&:nth-child(1) {
		border-left-color: transparent;
		}*/

	.v-popup-indicator {
		display: none;
		}
	.v-button-caption {
		@include os-icon-font($content: '\F078', 
							  $placement: after, 
							  $size: $os-font-size);
		&:after {
			font-style: normal;
			padding-left: $os-font-size *0.5;
			}
		@if $os-button-uppercase == true {
			text-transform: none;
			}					  
		}
	}

@mixin os-button-sidebar-table-variant {
	border: 0px;
	width: 100%;
	background-color: $os-background-color;
	cursor: pointer;
	height: $os-button-height;
	white-space: inherit;
	border-bottom: $os-border;
    font-weight: normal;
    text-align: left;
	
	.badge {
		position: relative;
		float: right;
		display: inline-block;
		line-height: $os-line-height;
		color: valo-font-color($os-highlight-color);//$os-background-color;
		//text-shadow: 0 1px 1px rgba(0,0,0,.3);
		padding: 0em .4em 0em;
		background: $os-highlight-color;
		}
		
	&:active {
		background: rgba(0,0,0,.1);
		}
	&:focus, &:hover {
		outline:0;
		border-bottom-color: $os-highlight-color;
		}			
	}
	
@mixin os-button-formlayout {	
    .v-upload-immediate .v-button {
    	margin-left: 0px;
    	//@include os-input-base-style;
    	}
   }

@mixin os-button-gridlayout {
	margin: 4px 0px 4px 0px; //trbl
	
	}   


@mixin os-button-l-beansearch {
	button {
		@include os-icon-font($content: '\f0b0');
		margin-left: 0px;
		font-weight: normal;
		color: valo-font-color($os-light-contrast);
		border-width: 0px;
		background-color: $os-light-contrast;
		border-left: $os-border;
		border-bottom: $os-border;
		outline:0;
		height: $os-unit-size;
		width: $os-unit-size !important;
		cursor: pointer;
		img {display:none;}
		}
	}

@mixin os-button-cash ($button-size-factor: 2.1) {

	.v-button {
		height: $os-unit-size * $button-size-factor;
		font-size: $os-font-size * ceil($button-size-factor/2);
		margin-bottom: ceil($os-unit-size / 3);
		}
	.os-numkeys {
		.v-button {
			@include os-button;	/* tree too specific. hovers don't work without os-button include */
			font-size: $os-font-size * 2;
			margin-bottom: ceil($os-unit-size / 3);
			height: $os-unit-size * 4;	
			width: $os-unit-size * 4;
			background: $os-dark-contrast; 
			border-color: $os-dark-contrast;
			color: valo-font-color($os-dark-contrast);
			&.v-pressed {
				color: valo-font-color(get_color_mix($os-highlight-color, #fff, 70)) !important;
				}
			}
		}
	.os-funckeys, .os-extrakeys { 		
		.v-button {
			min-width: $os-unit-size * 6;
			&:before {
				height: 100%;
				}
			img.v-icon {
				height: ($os-unit-size * 4) - $os-border-width; 	 
				}
			}
		}
	.os-alphakeys {
		.v-button {
			width: $os-unit-size *2.5;
			height: $os-unit-size *2.5;
			}
		}
	}