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

////
/// @group components/typeface
////

/// Some sizes in font-icons are crisper than others. This function tries to scale the desired 
/// size of an icon to its next-best most-crisp size, depending on font-family. 
/// @param {string} font-family
/// @param {integer} initial-font-size
@function get_crisp_size ($font-family: '', $initial-font-size: 14px) {
	$size: $initial-font-size;
	@if $font-family == '' {$font-family: FontAwesome; }
	
	@if $font-family == FontAwesome and $os-font-unit == px { //multiples of 8 // no need for duplicate anymore @TODO  
        @if      $initial-font-size <= 16 {$size: 1em;}
        @else if $initial-font-size > 16 and $initial-font-size <= 24 {$size: 2em}
        @else if $initial-font-size > 24 and $initial-font-size <= 32 {$size: 3en}
        @else if $initial-font-size > 32 {$size: 4em}
		} 
	@else if $font-family == Vaadin-Icons and $os-font-unit == px { //multiples of 8
		@if 	 $initial-font-size <= 16 {$size: 16px;}
		@else if $initial-font-size > 16 and $initial-font-size <= 24 {$size: 24px}
		@else if $initial-font-size > 24 and $initial-font-size <= 32 {$size: 32px}
		@else if $initial-font-size > 32 {$size: 40px}
		} 	
	@return $size;
	}


/// Draws the selected font icon according to parameters.
/// @param font-family FontAwesome
/// @param size v-font-size
/// @param line-height 0
/// @param float none
/// @param content 'need content'
/// @param placement before
/// @param mirror false
/// @param flip false
/// @param background ''		 
@mixin os-icon-font ($font-family: FontAwesome, 
					 $size: $v-font-size, 
					 $line-height: 0, 
					 $float: none,
					 $content: 'need content',
					 $placement: before, 
					 $mirror: false,
					 $flip: false, 
					 $background: '') 
	{
	@if $background == '' {
		background: transparent;
		}
		
   	border: 0px;
   	float: $float;
   	
	$size: get_crisp_size($font-family, $size);
	@if $line-height == 0 {
		$line-height: get_crisp_size($font-family, $size);
		}
   	
   	
   	@if $placement == after {
	   	&:after {
	   	  	font-family: $font-family;
			font-size: $size;
			line-height: $line-height;
			content: $content;
			text-shadow: $os-text-shadow;
			text-shadow: valo-text-shadow();
			}
	   	}
	@else {
		&:before {
	   	  	font-family: $font-family;
			font-size: $size;
			line-height: $line-height;
			content: $content  !important;
			text-shadow: $os-text-shadow;
			text-shadow: valo-text-shadow();
			}
		}
	@if $mirror == true {
		-moz-transform: scale(-1, 1);
		-webkit-transform: scale(-1, 1);
		-o-transform: scale(-1, 1);
		-ms-transform: scale(-1, 1);
		transform: scale(-1, 1);
		}
	@if $flip == true {
		-moz-transform: scale(1, -1);
		-webkit-transform: scale(1, -1);
		-o-transform: scale(1, -1);
		-ms-transform: scale(1, -1);
		transform: scale(1, -1);
		}
	}

/// @todo unused
@mixin os-typeface-h3 {}


/// Headings inside views.
@mixin os-typeface-view-h2 {
	font-size: $v-font-size * $v-scaling-factor--large;
  	padding: floor($v-unit-size/3);
  	font-weight: bold;
  	text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
	color: valo-font-color($os-sub-header-bg); 
    line-height: 100% * $v-scaling-factor--large;
    letter-spacing: 0em !important;
    /* min-width: $os-button-width;        */
	@if $os-theme-desig == "cxo" {
		color: $os-h2-shade;
		}
	}

/// Sidebar font style.
@mixin os-typeface-sidebar {
	padding-bottom: $v-unit-size * 0.4;
	padding-top: $v-unit-size * 0.4;
	.v-label {
	  	padding: 0px;
	  	padding-left: $v-unit-size * 0.4;
		line-height: $v-line-height * $v-scaling-factor--large;
		font-size: $v-font-size * $v-scaling-factor--large;
		font-weight: bold; 
		span {
			font-size: $v-font-size * $v-scaling-factor--large;
		  	//padding-top: $v-unit-size * 0.4;
			//line-height: $v-line-height * $v-scaling-factor--large;
		  	margin: 0px !important;
		  	font-weight: bold;
		  	text-overflow: ellipsis;
		    overflow: hidden;
		    white-space: nowrap;
			color: valo-font-color($os-splitter-shade);
			letter-spacing: 0em !important;
		    min-height: $os-button-height;
			//font-weight: initial !important;
			display: block;
			}
		}
	}

/// Headings e.g. on welcome-page.
@mixin os-typeface-h1 {
	background: $os-light-contrast;
	padding: $v-unit-size * 0.25 $v-unit-size * 0.5; 
	border: $v-border;
	font-size: $v-font-size * $v-scaling-factor--huge;
	font-weight: bold;
	color: valo-font-color($os-light-contrast);
	text-align: center;
	}