org.eclipse.osbp.themes/scss/layout/_cash-register.scss - osbp/org.eclipse.osbp.vaadin.widgetset - Git at Google

 ////
 /// @group layout/cash-register
 ////

 /// Styles related to POS/Cash register application. To receive these styles, components need to be placed inside a global layout with style name "os-cash-register".
 @mixin os-cash-register {
 	/* cash-field-width set in _textfield */
 	.os-cash-register {
         @if $font-size-adjustment < 1 { $font-size-adjustment: 1; }


 		/* font-size in anything not affected by font-size-adjustment (?)
 		   stuff that would get too small depending on $os-cash-zoom-factor
 		*/
 		.v-gridlayout-slot, .v-slot-l-control {
 			$font: $v-font-size;
 			@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;}
 			line-height: $font;
 			}


         $header-footer-height: make_even($v-font-size * $font-size-adjustment * 1.6);
         $caption-height: $v-unit-size * $os-cash-zoom-factor;

         /* Remove paddings around containers in POS/Cash area. */
 		.v-verticallayout, .v-horizontallayout, .v-gridlayout {
 			padding: 0px;
 			left: 0px !important;
 			&.os-no-spacing >.v-spacing {
 				height: 0px;
 				}
 			@include os-context-group;
 			}

 		@include os-button-cash;


 		/* basic textfield size */
 		.v-textfield, .v-datefield ,.o-XSuggestBox, .v-filterselect, .v-filterselect-input, .v-filterselect [class*="input"] {
 			@include os-textfield-cash;
       		}
       	.v-datefield [class*="textfield"] {
 /*           padding-left: $unit-size * 1.2;  VALO DEFAULT */
              padding-left: $v-unit-size * $os-cash-zoom-factor * 1.2;
           	 }

         .v-filterselect-button, .v-datefield button {
             width:  $cash-button-base-height + $half-spacing;
             &:before {
                 width:  $cash-button-base-height + $half-spacing;
                 }
         	}


         /* should accomplish that groups of fields fill the entire width of a formlayout row */
         .os-alt-button > .v-component-group, .os-alt-button > .l-beansearchfield {
             display: block;
             > .v-slot > .v-button {
                 position: relative;
                 height: $cash-button-base-height;
                 width: $cash-button-base-height;
                 min-width: $cash-button-base-height;
                 top: -1 * $cash-button-base-height;
                 left: -1 * $cash-button-base-height;
                 }
             }

         .v-component-group > .v-slot > .v-button {
             height: $cash-button-base-height + $half-spacing;
             }


       	.v-textarea {
   			font-size: $v-font-size * $os-cash-zoom-factor;
 			&.v-disabled, &.v-disabled > .v-textfield {
 				@include os-textfield-readonly;
 				opacity: 0.75;
 				}
 			}
       	.v-textarea.os-monospace {
       		font-size: $v-font-size * $os-cash-zoom-factor;
       		}

 		.o-XSuggestBox {
             @include o-XSuggestBox-mod($os-cash-zoom-factor);
 			}

       	/* basic textfield width and  o-XSuggestBox */
 	    @include os-textfield-mod($width-mod: 1);
         @include os-textfield-mod($width-mod: 1);


         /* local */
         /* ALSO COVERS o-XSuggestBox !! */
         @include os-textfield-mod($width-mod: 0.5,$secondary-stylename: os-span-h-half);
         @include os-textfield-mod($width-mod: 1,  $secondary-stylename: os-span-h-single);
         @include os-textfield-mod($width-mod: 2,  $secondary-stylename: os-span-h-double);
         @include os-textfield-mod($width-mod: 3,  $secondary-stylename: os-span-h-triple);
         @include os-textfield-mod($width-mod: 4,  $secondary-stylename: os-span-h-quad);


         /* single button styles */
         @include os-button-mod($width-mod: 1, $primary-stylename: v-button\.os-span-h-single);
 		@include os-button-mod($width-mod: 1.5, $primary-stylename: v-button\.os-span-h-odd);
 		@include os-button-mod($width-mod: 2, $primary-stylename: v-button\.os-span-h-double);
 		@include os-button-mod($width-mod: 3, $primary-stylename: v-button\.os-span-h-triple);
 		@include os-button-mod($width-mod: 4, $primary-stylename: v-button\.os-span-h-quad);
 		@include os-button-mod($height-mod: 1, $primary-stylename: v-button\.os-span-v-single);
 		@include os-button-mod($height-mod: 2, $primary-stylename: v-button\.os-span-v-double);
 		@include os-button-mod($height-mod: 3, $primary-stylename: v-button\.os-span-v-triple);
 		@include os-button-mod($height-mod: 4, $primary-stylename: v-button\.os-span-v-quad);


 /* Height and width modifications for all components (table, textfield, button, textarea...)
          to put components in a grid-like size relation to each other. */

 /*         horizontal mods */
         .os-field-h-half {
             @include os-textfield-mod($width-mod: 0.5);
             }

 		.os-button-h-single {
 			@include os-button-mod($width-mod: 1);
             }
         .os-table-h-single, .v-table.os-span-h-single {
             @include os-table-mod($width-mod: 1);
             &.os-table-h-extend {
                 @include os-table-mod($width-mod: 1, $modify: 1);
                 }
             &.os-table-h-reduce {
                 @include os-table-mod($width-mod: 1, $modify: -1);
                 }
         	}

         .os-button-h-odd {
         	@include os-button-mod($width-mod: 1.5);
         	}

 		.os-field-h-double {
             @include os-textfield-mod($width-mod:2);
             @include os-textarea-mod($width-mod: 2);
             }
         .os-table-h-double, .v-table.os-span-h-double {
             @include os-table-mod($width-mod: 2);
             &.os-table-h-extend {
                 @include os-table-mod($width-mod: 2, $modify: 1);
                 }
             &.os-table-h-reduce {
                 @include os-table-mod($width-mod: 2, $modify: -1);
                 }
             }
         .os-button-h-double {
             @include os-button-mod($width-mod: 2);
             }

         .os-field-h-triple {
             @include os-textfield-mod($width-mod: 3);
             @include os-textarea-mod($width-mod: 3);
             }
         .os-table-h-triple, .v-table.os-span-h-triple {
             @include os-table-mod($width-mod: 3);
             &.os-table-h-extend {
                 @include os-table-mod($width-mod: 3, $modify: 1);
                 }
             &.os-table-h-reduce {
                 @include os-table-mod($width-mod: 3, $modify: -1);
                 }
             }
         .os-button-h-triple {
             @include os-button-mod($width-mod: 3);
             }

         .os-field-h-quad {
             @include os-textfield-mod($width-mod: 4);
             @include os-textarea-mod($width-mod: 4);
             }
         .os-table-h-quad, .v-table.os-span-h-quad {
             @include os-table-mod($width-mod: 4);
             &.os-table-h-extend {
                 @include os-table-mod($width-mod: 4, $modify: 1);
                 }
             &.os-table-h-reduce {
                 @include os-table-mod($width-mod: 4, $modify: -1);
                 }
             }
         .os-button-h-quad {
             @include os-button-mod($width-mod: 4);
             }

 /*         vertical mods */
 		.os-field-v-single {
             @include os-textarea-mod($height-mod: 1);
             }
         .os-table-frame-v-single {
 /*             @include os-table-mod($height-mod: 1, $header-footer-height: $header-footer-height, $layout-level: 1); */
             }
 		.os-table-v-single, .os-span-v-single {
             @include os-table-mod($height-mod: 1, $header-footer-height: $header-footer-height);
             }
 		/* reduce actual component height when it has a caption on top (must be after other height definitions) */
 		/* applies to table, textarea... */
 		.os-table-v-single .v-caption-on-top, .v-caption-on-top .v-table.os-span-v-single {
 			@include os-table-mod ($height-mod: 1, $has-caption: 1, $header-footer-height: $header-footer-height);
             }
         .os-button-v-single {
         	@include os-button-mod($height-mod: 1);
         	}

         .os-field-v-double {
             @include os-textarea-mod($height-mod: 2);
             .v-caption-on-top {
                	@include os-textarea-mod ($height-mod: 2, $has-caption: 1);
 				}
             }
         .os-table-frame-v-double {
 /*             @include os-table-mod($height-mod: 2, $header-footer-height: $header-footer-height, $layout-level: 1); */
             }
 		.os-table-v-double, .os-span-v-double {
             @include os-table-mod($height-mod: 2, $header-footer-height: $header-footer-height);
 			}
 		.os-table-v-double .v-caption-on-top, .v-caption-on-top .v-table.os-span-v-double {
             @include os-table-mod ($height-mod: 2, $has-caption: 1, $header-footer-height: $header-footer-height);
             }

 		.os-button-v-double {
             @include os-button-mod($height-mod: 2);
             }

         .os-field-v-triple {
             @include os-textarea-mod($height-mod: 3);
             .v-caption-on-top {
                	@include os-textarea-mod ($height-mod: 3, $has-caption: 1);
 				}
             }
         .os-table-frame-v-triple {
 /*             @include os-table-mod($height-mod: 3, $header-footer-height: $header-footer-height, $layout-level: 1); */
             }
 		.os-table-v-triple, .os-span-v-triple {
             @include os-table-mod($height-mod: 3, $header-footer-height: $header-footer-height);
 			}
 		.os-table-v-triple .v-caption-on-top, .v-caption-on-top .v-table.os-span-v-triple {
             @include os-table-mod ($height-mod: 3, $has-caption: 1, $header-footer-height: $header-footer-height);
             }

 		.os-button-v-triple {
             @include os-button-mod($height-mod: 3);
             }

         .os-field-v-quad {
             @include os-textarea-mod($height-mod: 4);
             .v-caption-on-top {
                	@include os-textarea-mod ($height-mod: 4, $has-caption: 1);
 				}
             }
         .os-table-frame-v-quad {
 /*             @include os-table-mod($height-mod: 4, $header-footer-height: $header-footer-height, $layout-level: 1); */
             }
 		.os-table-v-quad, .os-span-v-quad {
             @include os-table-mod($height-mod: 4, $header-footer-height: $header-footer-height);
 			}
 		.os-table-v-quad .v-caption-on-top, .v-caption-on-top .v-table.os-span-v-quad {
             @include os-table-mod ($height-mod: 4, $has-caption: 1, $header-footer-height: $header-footer-height);
             }

 		.os-button-v-quad {
             @include os-button-mod($height-mod: 4);
             }


 		.os-cash-total, .os-cash-xl {
 			.v-textfield, .v-caption {
 				font-weight: bold;
 				}
 			.v-captiontext {
 				font-weight: normal;
 				}
 			.v-formlayout > table {
 				width: 100%;
 				}
 			.v-textfield {
 				@include os-textfield-cash-total;
 			    text-align: right;
 				}
 			.v-formlayout-row>.v-formlayout-captioncell>.v-caption {
 				height: $v-unit-size * (1.5 * $os-cash-zoom-factor) - first-number($v-border) !important;
 				line-height: $v-unit-size * (1.5 * $os-cash-zoom-factor);
 				}

 			.os-span-h-half .v-textfield {
 				width: $cash-field-width / 2;
 				}

 			.v-button {
 				@include os-button-mod($col-1: #4caf6a);
 				&.v-disabled {
 					}
 				}
 			}


 		.v-caption-on-top > .v-caption {
 			@if $os-cash-zoom-factor != 1 {
 				$caption-padd: make_even($v-unit-size * 0.5);
 				height: $v-unit-size * $os-cash-zoom-factor - $caption-padd;
 				padding-top: $caption-padd;
 				padding-bottom: 0px;
 				}
 			@else {
 				padding-top: 0px;
 				}
 			}
 		.v-caption, .v-captiontext, .v-caption-on-top > .v-caption-l-control > .v-captiontext {
 			font-size: $v-font-size * $font-size-adjustment;
 			line-height: $v-unit-size * $font-size-adjustment - first-number($v-border);
 			}
 		.v-formlayout {
 			.v-caption, .v-captiontext {
 				font-size: $v-font-size * $os-cash-zoom-factor;
 				line-height: $v-unit-size * $os-cash-zoom-factor - first-number($v-border);
 				}
 			}

 		.v-table-header-wrap, .v-table-caption-container, .v-table-sort-indicator, .v-table-resizer {
 /* 			table header height specified (also overwrites height-definition in _dialog)  */
 			height: $header-footer-height;
 /* 			line-height: $v-font-size * $font-size-adjustment * 1.6; */
 			font-size: $v-font-size * $font-size-adjustment;
 			}
 		.v-table-cell-content {
 /* 			height: floor($v-unit-size * $font-size-adjustment) * 3; */
 			height: floor($v-unit-size * $font-size-adjustment);
 			font-size: $v-font-size * $font-size-adjustment;
 			}


         /* OLD */
 /*         .os-row-odd .v-table-cell-content { */
 /*         	@include os-row-mod($rows-in-one: 1.5);		 */
 /*             } */
 /* 		.os-row-double .v-table-cell-content { */
 /*             @include os-row-mod($rows-in-one: 2); */
 /* 		    } */
 /*         .os-table-bigrow .v-table-cell-content, .os-row-triple .v-table-cell-content { */
 /*             @include os-row-mod($rows-in-one: 3);  */
 /*             } */

 		/* NEW */
         .os-row-odd .v-table-cell-content {
             @include os-row-mod($rows-in-one: 2, $font-adjust: 1.5);
             }
         .os-row-double .v-table-cell-content {
             @include os-row-mod($rows-in-one: 2.5, $font-adjust: 2);
             }
         .os-row-triple .v-table-cell-content {
             @include os-row-mod($rows-in-one: 3.5, $font-adjust: 3);
             }
         .os-table-bigrow .v-table-cell-content {
             $rows-in-one: 3;
             $bigrow-factor: $rows-in-one/2.25;

             height: floor($v-unit-size * $bigrow-factor) * $rows-in-one;
             font-size: $v-font-size * $font-size-adjustment * $bigrow-factor;
             }


 		/* LINE BREAK IN TABLE CELLS
 		.v-table-cell-wrapper {
 			white-space: normal;
 			}*/

 		/* fixed width font */
 		.os-monospace {
 			font-family: monospace;
 			}


 /*
         /// sets spacer width for os-table-frame-* workaround
         .v-slot-os-table-frame-v-single, .v-slot-os-table-frame-v-double,
         .v-slot-os-table-frame-v-triple, .v-slot-os-table-frame-v-quad {
             + .v-spacing {
                 width: 0px;
                 }
             }

 */

 		/* some spacers */
 		.os-spacer-top    { @include os-spacer(top, 1); }
 		.os-spacer-left   { @include os-spacer(left, 1); }
 		.os-spacer-right  { @include os-spacer(right, 1); }
 		.os-spacer-bottom { @include os-spacer(bottom, 1); }
 		.os-spacer-top-double    { @include os-spacer(top, 2); }
 		.os-spacer-left-double   { @include os-spacer(left, 2); }
 		.os-spacer-right-double  { @include os-spacer(right, 2); }
 		.os-spacer-bottom-double { @include os-spacer(bottom, 2); }
 		.os-spacer-top-triple    { @include os-spacer(top, 3); }
 		.os-spacer-left-triple   { @include os-spacer(left, 3); }
 		.os-spacer-right-triple  { @include os-spacer(right, 3); }
 		.os-spacer-bottom-triple { @include os-spacer(bottom, 3); }
 		.os-spacer-top-quad    { @include os-spacer(top, 4); }
 		.os-spacer-left-quad   { @include os-spacer(left, 4); }
 		.os-spacer-right-quad  { @include os-spacer(right, 4); }
 		.os-spacer-bottom-quad { @include os-spacer(bottom, 4); }


         /// Styles related to the external cash display (800x600).
         /// Zoom can be set seperately by using $os-cash-display-zoom-factor in _variables
         &.os-cash-display {
             .os-cash-total, .os-cash-xl {
                 .v-formlayout-captioncell {
                     vertical-align: inherit;
                     }
                 .v-textfield {
                     @include os-textfield-cash-total($os-cash-display-zoom-factor);
                     width: $cash-display-field-width;
                     }
                 .v-caption {
                     $cap-slightly-smaller: make_even($os-cash-display-zoom-factor * 0.25);
                     @include os-textfield-cash-total($cap-slightly-smaller);
                     min-width: $cash-display-field-width;
 /*                     line-height: $v-unit-size * (1.5 * $os-cash-display-zoom-factor); */
                     }
                 }

     /* Height and width modifications for all components (table, textfield, button, textarea...)
              to put components in a grid-like size relation to each other. */

     /*         horizontal mods */
             .os-table-h-single, .v-table.os-span-h-single {
                 @include os-table-mod($width-mod: 1, $external-display: 1);
                 &.os-table-h-extend {
                     @include os-table-mod($width-mod: 1, $modify: 1, $external-display: 1 );
                     }
                 &.os-table-h-reduce {
                     @include os-table-mod($width-mod: 1, $modify: -1, $external-display: 1);
                     }
                 }
             .os-table-h-double, .v-table.os-span-h-double {
                 @include os-table-mod($width-mod: 2, $external-display: 1);
                 &.os-table-h-extend {
                     @include os-table-mod($width-mod: 2, $modify: 1, $external-display: 1);
                     }
                 &.os-table-h-reduce {
                     @include os-table-mod($width-mod: 2, $modify: -1, $external-display: 1);
                     }
                 }
             .os-table-h-triple, .v-table.os-span-h-triple {
                 @include os-table-mod($width-mod: 3, $external-display: 1);
                 &.os-table-h-extend {
                     @include os-table-mod($width-mod: 3, $modify: 1, $external-display: 1);
                     }
                 &.os-table-h-reduce {
                     @include os-table-mod($width-mod: 3, $modify: -1, $external-display: 1);
                     }
                 }
             .os-table-h-quad, .v-table.os-span-h-quad {
                 @include os-table-mod($width-mod: 4, $external-display: 1);
                 &.os-table-h-extend {
                     @include os-table-mod($width-mod: 4, $modify: 1, $external-display: 1);
                     }
                 &.os-table-h-reduce {
                     @include os-table-mod($width-mod: 4, $modify: -1, $external-display: 1);
                     }
                 }

 /*             vertical mods */
             .os-table-frame-v-single {
                 @include os-table-mod($height-mod: 1, $header-footer-height: $header-footer-height, $layout-level: 1, $external-display: 1);
                 }
             .os-table-v-single, .os-span-v-single {
                 @include os-table-mod($height-mod: 1, $header-footer-height: $header-footer-height, $external-display: 1);
                 }
 /*             reduce actual component height when it has a caption on top (must be after other height definitions)
                applies to table, textarea...      */
             .os-table-v-single .v-caption-on-top, .v-caption-on-top .v-table.os-span-v-single {
                 @include os-table-mod ($height-mod: 1, $has-caption: 1, $header-footer-height: $header-footer-height, $external-display: 1);
                 }

             .os-table-frame-v-double {
                 @include os-table-mod($height-mod: 2, $header-footer-height: $header-footer-height, $layout-level: 1, $external-display: 1);
                 }
             .os-table-v-double, .os-span-v-double {
                 @include os-table-mod($height-mod: 2, $header-footer-height: $header-footer-height, $external-display: 1);
                 }
             .os-table-v-double .v-caption-on-top, .v-caption-on-top .v-table.os-span-v-double {
                 @include os-table-mod ($height-mod: 2, $has-caption: 1, $header-footer-height: $header-footer-height, $external-display: 1);
                 }

             .os-table-frame-v-triple {
                 @include os-table-mod($height-mod: 3, $header-footer-height: $header-footer-height, $layout-level: 1, $external-display: 1);
                 }
             .os-table-v-triple, .os-span-v-triple {
                 @include os-table-mod($height-mod: 3, $header-footer-height: $header-footer-height, $external-display: 1);
                 }
             .os-table-v-triple .v-caption-on-top, .v-caption-on-top .v-table.os-span-v-triple {
                 @include os-table-mod ($height-mod: 3, $has-caption: 1, $header-footer-height: $header-footer-height, $external-display: 1);
                 }

             .os-table-frame-v-quad {
                 @include os-table-mod($height-mod: 4, $header-footer-height: $header-footer-height, $layout-level: 1, $external-display: 1);
                 }
             .os-table-v-quad, .os-span-v-quad {
                 @include os-table-mod($height-mod: 4, $header-footer-height: $header-footer-height, $external-display: 1);
                 }
             .os-table-v-quad .v-caption-on-top, .v-caption-on-top .v-table.os-span-v-quad {
                 @include os-table-mod ($height-mod: 4, $has-caption: 1, $header-footer-height: $header-footer-height, $external-display: 1);
                 }
             }
         }

 	/// This should make popup content appear larger than in other views, but it doesn't work because
 	/// suggesttext popup containers are rendered outside of osbp's main container and therefore
 	/// outside of os-cash-register. As it can't be put into context, these popups can only be styled globally for now.
 	.o-SuggestBoxPopup {
 		//@include os-popup-suggest(2);
 		}

 	}
	////
	/// @group layout/cash-register
	////

	/// Styles related to POS/Cash register application. To receive these styles, components need to be placed inside a global layout with style name "os-cash-register".
	@mixin os-cash-register {
	/* cash-field-width set in _textfield */
	.os-cash-register {
	@if $font-size-adjustment < 1 { $font-size-adjustment: 1; }


	/* font-size in anything not affected by font-size-adjustment (?)
	stuff that would get too small depending on $os-cash-zoom-factor
	*/
	.v-gridlayout-slot, .v-slot-l-control {
	$font: $v-font-size;
	@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;}
	line-height: $font;
	}


	$header-footer-height: make_even($v-font-size * $font-size-adjustment * 1.6);
	$caption-height: $v-unit-size * $os-cash-zoom-factor;

	/* Remove paddings around containers in POS/Cash area. */
	.v-verticallayout, .v-horizontallayout, .v-gridlayout {
	padding: 0px;
	left: 0px !important;
	&.os-no-spacing >.v-spacing {
	height: 0px;
	}
	@include os-context-group;
	}

	@include os-button-cash;


	/* basic textfield size */
	.v-textfield, .v-datefield ,.o-XSuggestBox, .v-filterselect, .v-filterselect-input, .v-filterselect [class*="input"] {
	@include os-textfield-cash;
	}
	.v-datefield [class*="textfield"] {
	/* padding-left: $unit-size * 1.2; VALO DEFAULT */
	padding-left: $v-unit-size * $os-cash-zoom-factor * 1.2;
	}

	.v-filterselect-button, .v-datefield button {
	width: $cash-button-base-height + $half-spacing;
	&:before {
	width: $cash-button-base-height + $half-spacing;
	}
	}


	/* should accomplish that groups of fields fill the entire width of a formlayout row */
	.os-alt-button > .v-component-group, .os-alt-button > .l-beansearchfield {
	display: block;
	> .v-slot > .v-button {
	position: relative;
	height: $cash-button-base-height;
	width: $cash-button-base-height;
	min-width: $cash-button-base-height;
	top: -1 * $cash-button-base-height;
	left: -1 * $cash-button-base-height;
	}
	}

	.v-component-group > .v-slot > .v-button {
	height: $cash-button-base-height + $half-spacing;
	}


	.v-textarea {
	font-size: $v-font-size * $os-cash-zoom-factor;
	&.v-disabled, &.v-disabled > .v-textfield {
	@include os-textfield-readonly;
	opacity: 0.75;
	}
	}
	.v-textarea.os-monospace {
	font-size: $v-font-size * $os-cash-zoom-factor;
	}

	.o-XSuggestBox {
	@include o-XSuggestBox-mod($os-cash-zoom-factor);
	}

	/* basic textfield width and o-XSuggestBox */
	@include os-textfield-mod($width-mod: 1);
	@include os-textfield-mod($width-mod: 1);


	/* local */
	/* ALSO COVERS o-XSuggestBox !! */
	@include os-textfield-mod($width-mod: 0.5,$secondary-stylename: os-span-h-half);
	@include os-textfield-mod($width-mod: 1, $secondary-stylename: os-span-h-single);
	@include os-textfield-mod($width-mod: 2, $secondary-stylename: os-span-h-double);
	@include os-textfield-mod($width-mod: 3, $secondary-stylename: os-span-h-triple);
	@include os-textfield-mod($width-mod: 4, $secondary-stylename: os-span-h-quad);


	/* single button styles */
	@include os-button-mod($width-mod: 1, $primary-stylename: v-button\.os-span-h-single);
	@include os-button-mod($width-mod: 1.5, $primary-stylename: v-button\.os-span-h-odd);
	@include os-button-mod($width-mod: 2, $primary-stylename: v-button\.os-span-h-double);
	@include os-button-mod($width-mod: 3, $primary-stylename: v-button\.os-span-h-triple);
	@include os-button-mod($width-mod: 4, $primary-stylename: v-button\.os-span-h-quad);
	@include os-button-mod($height-mod: 1, $primary-stylename: v-button\.os-span-v-single);
	@include os-button-mod($height-mod: 2, $primary-stylename: v-button\.os-span-v-double);
	@include os-button-mod($height-mod: 3, $primary-stylename: v-button\.os-span-v-triple);
	@include os-button-mod($height-mod: 4, $primary-stylename: v-button\.os-span-v-quad);


	/* Height and width modifications for all components (table, textfield, button, textarea...)
	to put components in a grid-like size relation to each other. */

	/* horizontal mods */
	.os-field-h-half {
	@include os-textfield-mod($width-mod: 0.5);
	}

	.os-button-h-single {
	@include os-button-mod($width-mod: 1);
	}
	.os-table-h-single, .v-table.os-span-h-single {
	@include os-table-mod($width-mod: 1);
	&.os-table-h-extend {
	@include os-table-mod($width-mod: 1, $modify: 1);
	}
	&.os-table-h-reduce {
	@include os-table-mod($width-mod: 1, $modify: -1);
	}
	}

	.os-button-h-odd {
	@include os-button-mod($width-mod: 1.5);
	}

	.os-field-h-double {
	@include os-textfield-mod($width-mod:2);
	@include os-textarea-mod($width-mod: 2);
	}
	.os-table-h-double, .v-table.os-span-h-double {
	@include os-table-mod($width-mod: 2);
	&.os-table-h-extend {
	@include os-table-mod($width-mod: 2, $modify: 1);
	}
	&.os-table-h-reduce {
	@include os-table-mod($width-mod: 2, $modify: -1);
	}
	}
	.os-button-h-double {
	@include os-button-mod($width-mod: 2);
	}

	.os-field-h-triple {
	@include os-textfield-mod($width-mod: 3);
	@include os-textarea-mod($width-mod: 3);
	}
	.os-table-h-triple, .v-table.os-span-h-triple {
	@include os-table-mod($width-mod: 3);
	&.os-table-h-extend {
	@include os-table-mod($width-mod: 3, $modify: 1);
	}
	&.os-table-h-reduce {
	@include os-table-mod($width-mod: 3, $modify: -1);
	}
	}
	.os-button-h-triple {
	@include os-button-mod($width-mod: 3);
	}

	.os-field-h-quad {
	@include os-textfield-mod($width-mod: 4);
	@include os-textarea-mod($width-mod: 4);
	}
	.os-table-h-quad, .v-table.os-span-h-quad {
	@include os-table-mod($width-mod: 4);
	&.os-table-h-extend {
	@include os-table-mod($width-mod: 4, $modify: 1);
	}
	&.os-table-h-reduce {
	@include os-table-mod($width-mod: 4, $modify: -1);
	}
	}
	.os-button-h-quad {
	@include os-button-mod($width-mod: 4);
	}

	/* vertical mods */
	.os-field-v-single {
	@include os-textarea-mod($height-mod: 1);
	}
	.os-table-frame-v-single {
	/* @include os-table-mod($height-mod: 1, $header-footer-height: $header-footer-height, $layout-level: 1); */
	}
	.os-table-v-single, .os-span-v-single {
	@include os-table-mod($height-mod: 1, $header-footer-height: $header-footer-height);
	}
	/* reduce actual component height when it has a caption on top (must be after other height definitions) */
	/* applies to table, textarea... */
	.os-table-v-single .v-caption-on-top, .v-caption-on-top .v-table.os-span-v-single {
	@include os-table-mod ($height-mod: 1, $has-caption: 1, $header-footer-height: $header-footer-height);
	}
	.os-button-v-single {
	@include os-button-mod($height-mod: 1);
	}

	.os-field-v-double {
	@include os-textarea-mod($height-mod: 2);
	.v-caption-on-top {
	@include os-textarea-mod ($height-mod: 2, $has-caption: 1);
	}
	}
	.os-table-frame-v-double {
	/* @include os-table-mod($height-mod: 2, $header-footer-height: $header-footer-height, $layout-level: 1); */
	}
	.os-table-v-double, .os-span-v-double {
	@include os-table-mod($height-mod: 2, $header-footer-height: $header-footer-height);
	}
	.os-table-v-double .v-caption-on-top, .v-caption-on-top .v-table.os-span-v-double {
	@include os-table-mod ($height-mod: 2, $has-caption: 1, $header-footer-height: $header-footer-height);
	}

	.os-button-v-double {
	@include os-button-mod($height-mod: 2);
	}

	.os-field-v-triple {
	@include os-textarea-mod($height-mod: 3);
	.v-caption-on-top {
	@include os-textarea-mod ($height-mod: 3, $has-caption: 1);
	}
	}
	.os-table-frame-v-triple {
	/* @include os-table-mod($height-mod: 3, $header-footer-height: $header-footer-height, $layout-level: 1); */
	}
	.os-table-v-triple, .os-span-v-triple {
	@include os-table-mod($height-mod: 3, $header-footer-height: $header-footer-height);
	}
	.os-table-v-triple .v-caption-on-top, .v-caption-on-top .v-table.os-span-v-triple {
	@include os-table-mod ($height-mod: 3, $has-caption: 1, $header-footer-height: $header-footer-height);
	}

	.os-button-v-triple {
	@include os-button-mod($height-mod: 3);
	}

	.os-field-v-quad {
	@include os-textarea-mod($height-mod: 4);
	.v-caption-on-top {
	@include os-textarea-mod ($height-mod: 4, $has-caption: 1);
	}
	}
	.os-table-frame-v-quad {
	/* @include os-table-mod($height-mod: 4, $header-footer-height: $header-footer-height, $layout-level: 1); */
	}
	.os-table-v-quad, .os-span-v-quad {
	@include os-table-mod($height-mod: 4, $header-footer-height: $header-footer-height);
	}
	.os-table-v-quad .v-caption-on-top, .v-caption-on-top .v-table.os-span-v-quad {
	@include os-table-mod ($height-mod: 4, $has-caption: 1, $header-footer-height: $header-footer-height);
	}

	.os-button-v-quad {
	@include os-button-mod($height-mod: 4);
	}


	.os-cash-total, .os-cash-xl {
	.v-textfield, .v-caption {
	font-weight: bold;
	}
	.v-captiontext {
	font-weight: normal;
	}
	.v-formlayout > table {
	width: 100%;
	}
	.v-textfield {
	@include os-textfield-cash-total;
	text-align: right;
	}
	.v-formlayout-row>.v-formlayout-captioncell>.v-caption {
	height: $v-unit-size * (1.5 * $os-cash-zoom-factor) - first-number($v-border) !important;
	line-height: $v-unit-size * (1.5 * $os-cash-zoom-factor);
	}

	.os-span-h-half .v-textfield {
	width: $cash-field-width / 2;
	}

	.v-button {
	@include os-button-mod($col-1: #4caf6a);
	&.v-disabled {
	}
	}
	}


	.v-caption-on-top > .v-caption {
	@if $os-cash-zoom-factor != 1 {
	$caption-padd: make_even($v-unit-size * 0.5);
	height: $v-unit-size * $os-cash-zoom-factor - $caption-padd;
	padding-top: $caption-padd;
	padding-bottom: 0px;
	}
	@else {
	padding-top: 0px;
	}
	}
	.v-caption, .v-captiontext, .v-caption-on-top > .v-caption-l-control > .v-captiontext {
	font-size: $v-font-size * $font-size-adjustment;
	line-height: $v-unit-size * $font-size-adjustment - first-number($v-border);
	}
	.v-formlayout {
	.v-caption, .v-captiontext {
	font-size: $v-font-size * $os-cash-zoom-factor;
	line-height: $v-unit-size * $os-cash-zoom-factor - first-number($v-border);
	}
	}

	.v-table-header-wrap, .v-table-caption-container, .v-table-sort-indicator, .v-table-resizer {
	/* table header height specified (also overwrites height-definition in _dialog) */
	height: $header-footer-height;
	/* line-height: $v-font-size * $font-size-adjustment * 1.6; */
	font-size: $v-font-size * $font-size-adjustment;
	}
	.v-table-cell-content {
	/* height: floor($v-unit-size * $font-size-adjustment) * 3; */
	height: floor($v-unit-size * $font-size-adjustment);
	font-size: $v-font-size * $font-size-adjustment;
	}


	/* OLD */
	/* .os-row-odd .v-table-cell-content { */
	/* @include os-row-mod($rows-in-one: 1.5); */
	/* } */
	/* .os-row-double .v-table-cell-content { */
	/* @include os-row-mod($rows-in-one: 2); */
	/* } */
	/* .os-table-bigrow .v-table-cell-content, .os-row-triple .v-table-cell-content { */
	/* @include os-row-mod($rows-in-one: 3); */
	/* } */

	/* NEW */
	.os-row-odd .v-table-cell-content {
	@include os-row-mod($rows-in-one: 2, $font-adjust: 1.5);
	}
	.os-row-double .v-table-cell-content {
	@include os-row-mod($rows-in-one: 2.5, $font-adjust: 2);
	}
	.os-row-triple .v-table-cell-content {
	@include os-row-mod($rows-in-one: 3.5, $font-adjust: 3);
	}
	.os-table-bigrow .v-table-cell-content {
	$rows-in-one: 3;
	$bigrow-factor: $rows-in-one/2.25;

	height: floor($v-unit-size * $bigrow-factor) * $rows-in-one;
	font-size: $v-font-size * $font-size-adjustment * $bigrow-factor;
	}


	/* LINE BREAK IN TABLE CELLS
	.v-table-cell-wrapper {
	white-space: normal;
	}*/

	/* fixed width font */
	.os-monospace {
	font-family: monospace;
	}


	/*
	/// sets spacer width for os-table-frame-* workaround
	.v-slot-os-table-frame-v-single, .v-slot-os-table-frame-v-double,
	.v-slot-os-table-frame-v-triple, .v-slot-os-table-frame-v-quad {
	+ .v-spacing {
	width: 0px;
	}
	}

	*/

	/* some spacers */
	.os-spacer-top { @include os-spacer(top, 1); }
	.os-spacer-left { @include os-spacer(left, 1); }
	.os-spacer-right { @include os-spacer(right, 1); }
	.os-spacer-bottom { @include os-spacer(bottom, 1); }
	.os-spacer-top-double { @include os-spacer(top, 2); }
	.os-spacer-left-double { @include os-spacer(left, 2); }
	.os-spacer-right-double { @include os-spacer(right, 2); }
	.os-spacer-bottom-double { @include os-spacer(bottom, 2); }
	.os-spacer-top-triple { @include os-spacer(top, 3); }
	.os-spacer-left-triple { @include os-spacer(left, 3); }
	.os-spacer-right-triple { @include os-spacer(right, 3); }
	.os-spacer-bottom-triple { @include os-spacer(bottom, 3); }
	.os-spacer-top-quad { @include os-spacer(top, 4); }
	.os-spacer-left-quad { @include os-spacer(left, 4); }
	.os-spacer-right-quad { @include os-spacer(right, 4); }
	.os-spacer-bottom-quad { @include os-spacer(bottom, 4); }


	/// Styles related to the external cash display (800x600).
	/// Zoom can be set seperately by using $os-cash-display-zoom-factor in _variables
	&.os-cash-display {
	.os-cash-total, .os-cash-xl {
	.v-formlayout-captioncell {
	vertical-align: inherit;
	}
	.v-textfield {
	@include os-textfield-cash-total($os-cash-display-zoom-factor);
	width: $cash-display-field-width;
	}
	.v-caption {
	$cap-slightly-smaller: make_even($os-cash-display-zoom-factor * 0.25);
	@include os-textfield-cash-total($cap-slightly-smaller);
	min-width: $cash-display-field-width;
	/* line-height: $v-unit-size * (1.5 * $os-cash-display-zoom-factor); */
	}
	}

	/* Height and width modifications for all components (table, textfield, button, textarea...)
	to put components in a grid-like size relation to each other. */

	/* horizontal mods */
	.os-table-h-single, .v-table.os-span-h-single {
	@include os-table-mod($width-mod: 1, $external-display: 1);
	&.os-table-h-extend {
	@include os-table-mod($width-mod: 1, $modify: 1, $external-display: 1 );
	}
	&.os-table-h-reduce {
	@include os-table-mod($width-mod: 1, $modify: -1, $external-display: 1);
	}
	}
	.os-table-h-double, .v-table.os-span-h-double {
	@include os-table-mod($width-mod: 2, $external-display: 1);
	&.os-table-h-extend {
	@include os-table-mod($width-mod: 2, $modify: 1, $external-display: 1);
	}
	&.os-table-h-reduce {
	@include os-table-mod($width-mod: 2, $modify: -1, $external-display: 1);
	}
	}
	.os-table-h-triple, .v-table.os-span-h-triple {
	@include os-table-mod($width-mod: 3, $external-display: 1);
	&.os-table-h-extend {
	@include os-table-mod($width-mod: 3, $modify: 1, $external-display: 1);
	}
	&.os-table-h-reduce {
	@include os-table-mod($width-mod: 3, $modify: -1, $external-display: 1);
	}
	}
	.os-table-h-quad, .v-table.os-span-h-quad {
	@include os-table-mod($width-mod: 4, $external-display: 1);
	&.os-table-h-extend {
	@include os-table-mod($width-mod: 4, $modify: 1, $external-display: 1);
	}
	&.os-table-h-reduce {
	@include os-table-mod($width-mod: 4, $modify: -1, $external-display: 1);
	}
	}

	/* vertical mods */
	.os-table-frame-v-single {
	@include os-table-mod($height-mod: 1, $header-footer-height: $header-footer-height, $layout-level: 1, $external-display: 1);
	}
	.os-table-v-single, .os-span-v-single {
	@include os-table-mod($height-mod: 1, $header-footer-height: $header-footer-height, $external-display: 1);
	}
	/* reduce actual component height when it has a caption on top (must be after other height definitions)
	applies to table, textarea... */
	.os-table-v-single .v-caption-on-top, .v-caption-on-top .v-table.os-span-v-single {
	@include os-table-mod ($height-mod: 1, $has-caption: 1, $header-footer-height: $header-footer-height, $external-display: 1);
	}

	.os-table-frame-v-double {
	@include os-table-mod($height-mod: 2, $header-footer-height: $header-footer-height, $layout-level: 1, $external-display: 1);
	}
	.os-table-v-double, .os-span-v-double {
	@include os-table-mod($height-mod: 2, $header-footer-height: $header-footer-height, $external-display: 1);
	}
	.os-table-v-double .v-caption-on-top, .v-caption-on-top .v-table.os-span-v-double {
	@include os-table-mod ($height-mod: 2, $has-caption: 1, $header-footer-height: $header-footer-height, $external-display: 1);
	}

	.os-table-frame-v-triple {
	@include os-table-mod($height-mod: 3, $header-footer-height: $header-footer-height, $layout-level: 1, $external-display: 1);
	}
	.os-table-v-triple, .os-span-v-triple {
	@include os-table-mod($height-mod: 3, $header-footer-height: $header-footer-height, $external-display: 1);
	}
	.os-table-v-triple .v-caption-on-top, .v-caption-on-top .v-table.os-span-v-triple {
	@include os-table-mod ($height-mod: 3, $has-caption: 1, $header-footer-height: $header-footer-height, $external-display: 1);
	}

	.os-table-frame-v-quad {
	@include os-table-mod($height-mod: 4, $header-footer-height: $header-footer-height, $layout-level: 1, $external-display: 1);
	}
	.os-table-v-quad, .os-span-v-quad {
	@include os-table-mod($height-mod: 4, $header-footer-height: $header-footer-height, $external-display: 1);
	}
	.os-table-v-quad .v-caption-on-top, .v-caption-on-top .v-table.os-span-v-quad {
	@include os-table-mod ($height-mod: 4, $has-caption: 1, $header-footer-height: $header-footer-height, $external-display: 1);
	}
	}
	}

	/// This should make popup content appear larger than in other views, but it doesn't work because
	/// suggesttext popup containers are rendered outside of osbp's main container and therefore
	/// outside of os-cash-register. As it can't be put into context, these popups can only be styled globally for now.
	.o-SuggestBoxPopup {
	//@include os-popup-suggest(2);
	}

	}