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

//// 
/// @group components/bits
/// - test this formatting
////

/// Progress bar style inside "grid" components
@mixin os-progress-gridview {
	.v-progressbar-wrapper {
		outline: $v-border;
		outline-color: $v-app-background-color;

		.v-progressbar-indicator {
			border: 0px;
			}
		}
	}

/// Small progress bar in login panel area
/// @todo please refine the CSS ...
///  - smaller font size, so that a long message can be displayed
///  - bolder font color like the login caption text
@mixin os-progress-login {
	.v-caption-initialization-progress .v-captiontext {
		font-size: $v-font-size * $v-scaling-factor--small !important;
		color: valo-font-color($v-app-background-color) !important;
		}
	}


/// @param {string} $type
/// Deactivate transitions with "none"; Include a transition by setting its type.
@mixin os-transition($type) {
    -moz-transition:    $type;
    -o-transition:      $type;
    -webkit-transition: $type;
    transition:         $type;
	}

/// @param {number} $top
/// @param {number} $left
/// @param {number} $blur
/// @param {number} $color
/// @param {boolean} $inset
/// Some elements need box-shadow despite box-shadow being deactivated. Sass/Valo box-shadow function doesn't work in this case.'
/// Needed for tooltips.
@mixin os-important-box-shadow($top, $left, $blur, $color, $inset: false) {
  @if $inset {
    -webkit-box-shadow:inset $top $left $blur $color !important;
    -moz-box-shadow:inset $top $left $blur $color !important;
    box-shadow:inset $top $left $blur $color !important;
  } @else {
    -webkit-box-shadow: $top $left $blur $color !important;
    -moz-box-shadow: $top $left $blur $color !important;
    box-shadow: $top $left $blur $color !important;
  }
}

/// Set spacing between elements (POS/Cash-Area)
/// @todo needs separate definitions for vertical and horizontal spacing
@mixin os-spacer($direction, $size-mod ) {	
	$size-mod: $size-mod * 0.5;
	margin-#{$direction}: ($v-unit-size * 2 * $os-cash-zoom-factor * $size-mod) + ($size-mod * $v-layout-spacing-horizontal) !important;
	}


/// @deprecated Attempt at styling scrollbars, but completely useless as no browser supports it properly. Don't try again.
@mixin os-scrollbar {
	::-webkit-scrollbar {
    	background: $os-light-contrast;
		}
	::-webkit-scrollbar-thumb {
	    background: $os-mid-contrast;
	    border: $v-app-background-color solid 2px;
		}
	::-webkit-scrollbar-button {
    	background: $os-light-contrast;
		}
	::-webkit-scrollbar-button:vertical:decrement {
		background: white;
		content: '123';
		@include os-icon-font($content: '12',
							  $placement: after);
		color: black;
		}
	/*
	::-webkit-scrollbar-corner {
	    background: $os-dark-contrast;
	    border: $v-border;
		}*/
	}

@mixin os-constraint-shade ($mode, $zoom) { 
/*     @include linear-gradient(135deg, $os-textfield-shade 0px, $os-textfield-shade 10%,  */
/*                              $os-focus-color 10%, $os-focus-color 90%,  */
/*                              $os-textfield-shade 90%, $os-textfield-shade 100%); */


    $corner-size: sqrt(($v-unit-size * $v-unit-size) + ($v-unit-size * $v-unit-size)) / 2;    
   
    $corner-size: make_even($corner-size) / 3;
/*     $corner-size: first-number($v-border); */
    

    $bg: $os-textfield-shade;
    $fg:  $v-error-indicator-color;
    $fg-1: $v-error-indicator-color;
    $fg-2: $v-friendly-color;
    
    
    @if $mode == 1 {
/*         @include linear-gradient(90deg, $fg-1 0px, $fg-1 $corner-size,  */
/*                                  $bg $corner-size); */
        border-left: first-number($v-border) solid $fg;
        }

    @if $mode == 2 {
        @include linear-gradient(135deg, $fg 0px, $fg $corner-size, 
                                         $bg $corner-size);
        }
    @if mode == 12 {
        border-left: first-number($v-border) solid $fg;
        @include linear-gradient(135deg, $fg 0px, $fg $corner-size, 
                                        $bg $corner-size);
        
        }
    
                             
/*     @include linear-gradient(135deg, $fg 0px, $fg $corner-size,  */
/*                              $bg $corner-size, $bg calc(100% - $corner-size),  */
/*                              $fg calc(100% - $corner-size), $fg 100%); */

/*     @include linear-gradient(90deg, $fg 0px, $fg $corner-size,  */
/*                              $bg $corner-size); */


                             
/*     @include linear-gradient(135deg, $bg 0px, $bg $corner-size,  */
/*                              $fg $corner-size, $fg calc(100% - $corner-size),  */
/*                              $bg calc(100% - $corner-size), $bg 100%); */

     
     
/*      $strength: $v-unit-size * $zoom / 6; */
/*      @if ($right-shift == 1) { $l-strength: $strength + ($v-unit-size * $zoom); } */
/*      @else                   { $l-strength: $strength - 1; } */
      
/*      $this-box-shadow: inset -1*$strength 0 $os-textfield-shade,  */
/*                        inset 0 $strength $os-textfield-shade,  */
/*                        inset ($l-strength) 0 $os-textfield-shade,  */
/*                        inset 0 -1*$strength  $os-textfield-shade; */
     
/*      @include box-shadow($this-box-shadow); */
     
     
     
/*      background-color: $os-textfield-shade;                              */
                             
/*     color: valo-font-color($os-textfield-shade); */
/*     text-shadow:  1px  1px 1px $os-textfield-shade , */
/*                   1px -1px 1px $os-textfield-shade , */
/*                  -1px  1px 1px $os-textfield-shade , */
/*                  -1px -1px 1px $os-textfield-shade ; */
    
    /*      .v-caption-os-constraint.v-caption-os-domainkey:after { */
/*          content: ""; */
/*             @include linear-gradient(180deg ,  $v-error-indicator-color 0px,  $v-error-indicator-color 5px,  */
/*                                         $os-base-color 5px, $os-base-color 10px); */
/*             width: 10px; */
/*             height: 10px; */
/*             margin-left: 10px; */
/*             display: inline-grid; */
/*             border-radius: 3px; */
/*             opacity: 0.7; */
/*          } */
/*         .v-caption-os-domainkey:after { */
/*             content: ""; */
/*             background: $os-base-color; */
/*             width: 10px; */
/*             height: 5px; */
/*             margin-left: 10px; */
/*             display: inline-grid; */
/*             border-radius: 3px; */
/*             opacity: 0.7; */
/*             } */
/*         .v-caption-os-constraint:after { */
/*             content: ""; */
/*             background: $v-error-indicator-color; */
/*             width: 10px; */
/*             height: 5px; */
/*             margin-left: 10px; */
/*             display: inline-grid; */
/*             border-radius: 3px; */
/*             opacity: 0.7; */
/*             }                  */
    }