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

////
///
/// @group components/button
///
////
/* extends .v-button */

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

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


/// Button style modifier for header-area (tab-style buttons).
@mixin os-button-perspectivepanel  {
	.v-button {
		@if $os-theme-desig == "cxo" {
			/* border-bottom bleeds across edges, thus using this workaround: */
/* 			@include linear-gradient(to top, $os-mid-contrast 1px, $os-button-as-tab-inactive 1px);*/
/* 			background: $os-button-as-tab-inactive; */
/* 			color: valo-font-color($os-button-as-tab-inactive); */
			border-radius: $v-border-radius*2 $v-border-radius*2 0px 0px;
			@include box-shadow(2px 1px 7px rgba(0,0,0,0.35));
			}
		@if $os-bordered==true {
/* 			height: ceil(1.6 * $v-unit-size); */
			height: ceil(1.6 * $v-unit-size) - $os-splitter-size;
			}
		@else {
			@include box-shadow($os-shadow-reversed);
			}
		}
	}


/// Button style modifier for toolbars inside views.
@mixin os-button-toolbar {
	background: $v-app-background-color;
	border: none;
	&:hover, &:focus, &:active {
		background: get_color_mix($v-focus-color, #fff, 50);
		}
		/*
	&.v-pressed {
		background: get_color_mix($v-focus-color, #fff, 70);
		}*/
	}

/// Button style modifier for header-area user-menu.
@mixin os-button-usermenu {

	@if $os-theme-desig == "cxo" or $os-theme-desig == "osbp"{
		border: none;
 		padding: 0px;
		height: $v-unit-size - 2 * first-number($v-border) !important;
		width: $v-unit-size - 2 * first-number($v-border) !important;
		margin: first-number($v-border);
		border-radius: 50% !important;
		}
	@else {
		//hover etc. on icon-font (can't use calculated valo-font-color color from above)
		&:after {
			transition: none;
			}
		&:hover, &:focus, &:active {
			color: $v-focus-color;
			background: transparent;
			}
		&:hover:after {
			transition: none;
			}
		&:focus:after {
			transition: none;
			}
		&:active:after {
			transition: none;
			}
		}
	}

/// Button style modifier for os-data-component
/// @todo find me!
@mixin os-button-data {
	margin-right: 12px;
	}

/// Button style modifier for Fileupload
/// @todo is it what I think it is?
@mixin os-button-no-margin {
	margin: 0px;
	}

/*/// Button style modifier for toolbars inside views.
/// @deprecated maybe...
@mixin os-button-trimbar($variant: os) {
	background: transparent;
	border-radius: 0px;
	border-color: $v-app-background-color;
	border-width: 0px;
	border-bottom-width: 1px;
	@if $variant == cx {
		height: $v-unit-size + floor($v-unit-size/3);
		}
	@else {
  		height: $os-button-height;
		}
	}
*/

/// Button style modifier for buttons appearing in a table's column filter row. They should look the same as inputs in the same row.  
@mixin os-button-filterspanel {
	color: valo-font-color($os-textfield-shade);
	white-space: normal;
	background: $os-textfield-shade;
	padding-top: 1px;
	border-right-width: 0px;
	border-top-width: 0px;
	border-left-width: 1px;
	border-left-color: $v-app-background-color;
	border-bottom: $v-border;
	margin-left: 0px;
	@include box-shadow(none);
	font-weight: normal;
	@if $os-button-uppercase == true {
		text-transform: none;
		}

	&:after {
		/* for some reason there's a second border on this element */
		border-bottom-width: 0px;
		}

	&:focus, &:hover {
		background-color: $os-focus-color;
		color: valo-font-color($os-focus-color);
		border-bottom-color: $v-focus-color;
		border-left: $v-border;
		border-left-color: $v-app-background-color;
		}
	&:focus:after {
		border-right-width: 0px;
		border-top-width: 0px;
		border-left: $v-border;
		border-left-color: $v-app-background-color;
		}
	&:hover:after {
		border-left: $v-border;
		border-left-color: $v-app-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: $v-font-size);
		&:after {
			font-style: normal;
			padding-left: $v-font-size *0.5;
			}
		@if $os-button-uppercase == true {
			text-transform: none;
			}
		}
	}


/// Button style modifier for sidebar component.
@mixin os-button-sidebar-table-variant {
	border: 0px;
	width: 100%;
	background-color: $v-app-background-color;
	cursor: pointer;
	height: $os-button-height;
	white-space: inherit;
	border-bottom: $v-border;
    font-weight: normal;
    text-align: left;

	.badge {
		position: relative;
		float: right;
		display: inline-block;
		line-height: $v-line-height;
		color: valo-font-color($v-focus-color);//$v-app-background-color;
		//text-shadow: 0 1px 1px rgba(0,0,0,.3);
		padding: 0em .4em 0em;
		background: $v-focus-color;
		}

	&:active {
		background: rgba(0,0,0,.1);
		}
	&:focus, &:hover {
		outline:0;
		border-bottom-color: $v-focus-color;
		}
	}


/// Button style modifier for buttons in line with textfields
@mixin os-button-formlayout {
   	height: $v-unit-size; 
   }

/// Button style modifier.
@mixin os-button-error {
	border-color: first-color($v-border) !important;
	/*
	border-style: dashed;
	*/
	color: $v-error-indicator-color;
	}


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


/// Button style modifier for buttons in dialog
@mixin os-button-l-beansearch {
	@include os-icon-font($content: '\f0b0');
	margin-left: 0px;
	padding: 0px;
	padding-left: make_even($v-unit-size/4);
	font-weight: normal;
	color: valo-font-color($os-light-contrast);
	border-width: 0px;
	background-color: $os-light-contrast;
	border-left: $v-border;
	border-bottom: $v-border;
	outline:0;
	height: $v-unit-size;
/* 	width: $v-unit-size !important; */
	cursor: pointer;
	img {display:none;}
	@include box-shadow(none);
	}

/// Sets button dimensions for POS/cash register application.
/// @param {number} $height-mod - [0] Factor 1-4 by which to increase the base height. 
/// @param {number} $width-mod - [0] Factor (1-4) by which to increase the base width. 
/// @param {string} $prefer	- [null] Set "\!important" if you need it.
/// @param {number} $set-font - [0] If this is set to 1, fonts will increase or decrease relative to button-size. 
/// Set 'os-font-flex' on buttons you want to have flexible font sizes. 
@mixin os-button-set-dimensions($height-mod: 0, $width-mod: 0, $prefer: null, $set-font: 0) {
	@if $height-mod !=0 {
		$calculated-button-height: $cash-button-base-height * $height-mod + ($height-mod - 1) * $v-layout-spacing-vertical;
   		height: $calculated-button-height  #{$prefer};
   		img.v-icon {
   			max-height: ($v-unit-size * $os-cash-zoom-factor * $height-mod) - (2 * first-number($v-border))  #{$prefer};
   			}
   		@if $set-font == 1 {	//.os-font-flex
   			@if $height-mod == 1 {
   				font-size: make_even($calculated-button-height / 2);
   				}
   			@else {
   				font-size: $calculated-button-height - $cash-button-base-height;
   				} 
   			}
   		}
   	@if $width-mod != 0 {
   		$new-width: $v-unit-size * 2 * $os-cash-zoom-factor * $width-mod + (($width-mod - 1) * $v-layout-spacing-horizontal);
   		width: $new-width #{$prefer};
/*    		.v-button-wrap {  if word-wrap active */
/*  			width: $v-unit-size * 2 * $os-cash-zoom-factor * $width-mod + (($width-mod - 1) * $v-layout-spacing-horizontal) #{$prefer}; */
/* 			} */
   		img.v-icon {
   			max-width:  ($v-unit-size * 2 * $os-cash-zoom-factor * $width-mod) - (2 * first-number($v-border))  #{$prefer};
   			}
   		}
	}
/* color, size and hover variant (so far only for os-cash)*/
/* extends .v-button */
/// Button style modifier for specific button field compositions as used in POS/cash register application.
/// @param {string|optional} $col-1 [''] - Modifies the button's background color.
/// @param {integer|optional} $height-mod modifies the button's height by a factor defined by the class descriptor this mod is called from.
/// Don't use height-mod and width-mod at the same time.
/// @param {integer|optional} $width-mod modifies the button's height by a factor defined by the class descriptor this mod is called from
/// Don't use height-mod and width-mod at the same time.
/// @todo describe this better.
@mixin os-button-mod($col-1:'', $height-mod: 0, $width-mod: 0, $primary-stylename: 'container') {
	/* possibly needs font-size, too */
	@if $col-1 != '' {
		background: $col-1;
		border-color: $col-1;
		color: valo-font-color($col-1);
		&.v-pressed {
			color: valo-font-color(get_color_mix($col-1, #fff, 70)) !important;
			background: get_color_mix($col-1, #fff, 70) !important;
			border-color: rgba(255,255,255,0.8);
			border-left-color:  rgba(0,0,0,0.5);
			border-top-color: rgba(0,0,0,0.5);

/* 			get_color_mix($col-1, #fff, 70) !important; */
			box-shadow: inset 0px -2px -2px rgba(255,255,255,0.8), /*bottom internal shadow*/
						inset 0px 2px 2px rgba(0,0,0,0.5); /*top internal highlight*/
			/*bordercolor:
			border-left-color:
			border-left-color:*/
			}
		&.os-pushed {
			background: mix($col-1, #000, 85%);
			color: get_contrast(25, mix($col-1, #000, 85%), $desaturate: false);
/* 			text-shadow: 2px 2px #ff0000; */
			$strength: 12px * $os-cash-zoom-factor;
			@include box-shadow(inset 0px 0px $strength rgba(0, 0, 0, 0.5));
/* 			.v-button-caption { */
/* 				outline: 1px solid black; */
/* 				}  */
			}	
		&:hover  /*, &:focus, &:active */{
			background: $os-odd-highlight;
			border-color: $os-odd-highlight;
			color: valo-font-color($os-odd-highlight);
			}
		}

	@if $primary-stylename == 'container' {
		/* set button style globally/for entire container. */
		> .v-gridlayout-slot > .v-button ,.v-button {
			@include os-button-set-dimensions($height-mod: $height-mod, $width-mod: $width-mod);
			}
		@if $height-mod != 0 {
			/// Button fonts zoom with button height. 
			&.os-font-flex > .v-gridlayout-slot > .v-button , .os-font-flex .v-button {
				@include os-button-set-dimensions($height-mod: $height-mod, $set-font: 1);
				}
			.os-font-flex.v-button {
				@include os-button-set-dimensions($height-mod: $height-mod, $set-font: 1, $prefer: \!important);
				}
			}
		}
	@else {
		/* set button style for specific button */
		.#{$primary-stylename} {
			@include os-button-set-dimensions($height-mod: $height-mod, $width-mod: $width-mod, $prefer: \!important);
			}
		}

    margin: 0px;
	}

/// Button style modifier for POS/cash register application.
/// This defines the base size/looks for cash register buttons, which can afterwards be refined/modified with os-button-mod.
@mixin os-button-cash () {
	/* basic button size that can be modded with os-button-mod mixin */
	.v-button {
		/* height slightly reduced for alignment with -double -triple etc. buttons */
		height: $cash-button-base-height;// - $v-layout-spacing-vertical/2;

		&:before {
			/* overrides valo-button-vertical-centering */
			content: none;
			}
		/* center and wrap text with this:*/
		white-space: normal;
/* 		word-wrap: break-word; needs v-button-wrap dimensions set */
		display: flex;
		justify-content: center;
		align-items: center;
		
		text-transform: none;
		
		.v-button-caption {
			/* add a bit of spacing between lines */
			line-height:  $v-font-size * $os-cash-zoom-factor;
			}
		

		min-width: $v-unit-size * 2 * $os-cash-zoom-factor;
		padding: make_even(($v-unit-size * 2 * $os-cash-zoom-factor) * 0.07) * $os-cash-zoom-factor;
		
		
		$font: $v-font-size * $os-cash-zoom-factor;
		@if $os-cash-zoom-factor < $v-scaling-factor--huge {$font: $v-font-size * $v-scaling-factor--huge; }
		@if $os-cash-zoom-factor < $v-scaling-factor--large {$font: $v-font-size * $v-scaling-factor--large; }
		@if $os-cash-zoom-factor <= 1 {$font: $v-font-size;}
		font-size: $font;
		}
		
	/* colors */
	.v-gridlayout-slot .v-button.os-color-1, .v-slot-l-control .v-button.os-color-1, .os-color-1 .v-button   {
	    @include os-button-mod($col-1: $os-color-1); 
	    }
	.v-gridlayout-slot .v-button.os-color-2, .v-slot-l-control .v-button.os-color-2, .os-color-2 .v-button   {
	    @include os-button-mod($col-1: $os-color-2); 
	    }
	.v-gridlayout-slot .v-button.os-color-3, .v-slot-l-control .v-button.os-color-3, .os-color-3 .v-button   {
	    @include os-button-mod($col-1: $os-color-3); 
	    }
	.v-gridlayout-slot .v-button.os-color-4, .v-slot-l-control .v-button.os-color-4, .os-color-4 .v-button   {
	    @include os-button-mod($col-1: $os-color-4); 
	    }
	.v-gridlayout-slot .v-button.os-color-5, .v-slot-l-control .v-button.os-color-5, .os-color-5 .v-button   {
	    @include os-button-mod($col-1: $os-color-5); 
	    }
	.v-gridlayout-slot .v-button.os-color-6, .v-slot-l-control .v-button.os-color-6, .os-color-6 .v-button   {
	    @include os-button-mod($col-1: $os-color-6); 
	    }
	.v-gridlayout-slot .v-button.os-color-7, .v-slot-l-control .v-button.os-color-7, .os-color-7 .v-button   {
	    @include os-button-mod($col-1: $os-color-7); 
	    }
	.v-gridlayout-slot .v-button.os-color-8, .v-slot-l-control .v-button.os-color-8, .os-color-8 .v-button   {
	    @include os-button-mod($col-1: $os-color-8); 
	    }
	.v-gridlayout-slot .v-button.os-color-9, .v-slot-l-control .v-button.os-color-9, .os-color-9 .v-button   {
	    @include os-button-mod($col-1: $os-color-9); 
	    }
	.v-gridlayout-slot .v-button.os-color-10, .v-slot-l-control .v-button.os-color-10, .os-color-10 .v-button {
	    @include os-button-mod($col-1: $os-color-10); 
	    }
	.v-gridlayout-slot .v-button.os-color-11, .v-slot-l-control .v-button.os-color-11, .os-color-11 .v-button {
	    @include os-button-mod($col-1: $os-color-11); 
	    }
	.v-gridlayout-slot .v-button.os-color-12, .v-slot-l-control .v-button.os-color-12, .os-color-12 .v-button {
	    @include os-button-mod($col-1: $os-color-12); 
	    }
	.v-gridlayout-slot .v-button.os-color-13, .v-slot-l-control .v-button.os-color-13, .os-color-13 .v-button {
	    @include os-button-mod($col-1: $os-color-13); 
	    }
	.v-gridlayout-slot .v-button.os-color-14, .v-slot-l-control .v-button.os-color-14, .os-color-14 .v-button {
	    @include os-button-mod($col-1: $os-color-14); 
	    }

	 .os-button-with-image {
		.v-button {
		 	@include os-button-mod($col-1: #cc5353);
			}
		}
	.os-button-no-text {
		.v-button {
			}
		}
	}