org.eclipse.osbp.themes/scss/addons/_designer.scss

@mixin os-designer {
	$font-size: 16px;
	$unit-size: 30px;
	$gen-margins: $unit-size * 0.1;
	$main-color: $os-dark-contrast;
	
	.osbee-designer-active-selection {
		border-radius: 3px !important;
		border: 2px solid blue !important;
	}
	
	.o-designer-active .l-control {
		border: $os-border;
	    border-color: lightblue;
	}
	
	.o-designer-active .l-control .v-gridlayout-slot {
		border: $os-border;
	    border-color: lightpink;
	}
	.o-designer-overlay .popupContent {
		height: $unit-size + $gen-margins + $gen-margins;
		width: 100%;
		display: block;
		background-color: $main-color;
		border-radius: 3px; 
		border: 2px solid $main-color;
		/*padding: $gen-margins; */
		>div {
    		height: 100%;
		}
	}
	
	.o-designer-overlayed {
		border-radius: 3px !important;
		border: 2px solid blue !important;
	}
	
	.o-designer-overlay .o-alignment-widget {
		position: relative;
		width: $unit-size;
		height: $unit-size;
		background-color: valo-font-color($main-color);
		float: left;
		padding: $gen-margins;
		margin-right: $gen-margins;
		/*margin: $unit-size * 0.1 $unit-size * 0.2 $unit-size * 0.1 $unit-size * 0.2; //o r u l*/
	}
	
	.o-alignment-widget .alignment {
		//top: 0px;
		//left: 0px;
		display: block;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		height: $unit-size;
		width: $unit-size;
		position: absolute;
		z-index: 10;
	}
	
	.o-alignment-widget .alignment .singles {
		position: absolute;
		top: 0px;
		left: 0px;
		bottom: 0px;
		cursor: pointer;
		height: 22px;
		width: 22px;
		overflow: hidden;
	}
	
	.o-alignment-widget .singles .topleft, .o-alignment-widget .singles .topcenter,
		.o-alignment-widget .singles .topright, .o-alignment-widget .singles .middleleft,
		.o-alignment-widget .singles .middlecenter, .o-alignment-widget .singles .middleright,
		.o-alignment-widget .singles .bottomleft, .o-alignment-widget .singles .bottomcenter,
		.o-alignment-widget .singles .bottomright {
		background-color: $main-color;
		height: 6px;
		width: 6px;
		display: block;
		overflow: visible;
		position: absolute;
		z-index: 30;
	}
	
	.o-alignment-widget .singles .o-selected {
		background-color: $os-highlight-color;
	}
	
	.o-alignment-widget .singles .topleft {
		top: 0px;
		left: 0px;
	}
	
	.o-alignment-widget .singles .topcenter {
		top: 0px;
		left: 0px;
		margin-left: 8px;
	}
	
	.o-alignment-widget .singles .topright {
		top: 0px;
		right: 0px;
	}
	
	.o-alignment-widget .singles .middleleft {
		top: 0px;
		left: 0px;
		margin-top: 8px;
	}
	
	.o-alignment-widget .singles .middlecenter {
		top: 0px;
		margin-top: 8px;
		left: 0px;
		margin-left: 8px;
	}
	
	.o-alignment-widget .singles .middleright {
		top: 0px;
		margin-top: 8px;
		right: 0px;
	}
	
	.o-alignment-widget .singles .bottomleft {
		bottom: 0px;
		left: 0px;
	}
	
	.o-alignment-widget .singles .bottomcenter {
		bottom: 0px;
		margin-left: 8px;
		left: 0px;
	}
	
	.o-alignment-widget .singles .bottomright {
		bottom: 0px;
		right: 0px;
	}
	
	.o-alignment-widget .alignment .hfill {
		position: absolute;
		bottom: 0px;
		left: 0px;
		width: 22px;
		height: 6px;
		background-color: $main-color;
	}
	
	.o-alignment-widget .alignment .vfill {
		position: absolute;
		top: 0px;
		left: 24px;
		width: 6px;
		height: 22px;
		background-color: $main-color;
	}
	
	.o-alignment-widget .alignment .vfill .o-selected, .o-alignment-widget .alignment .hfill .o-selected
		{
		background-color: $os-highlight-color !important;
	}
	
	.o-designer-overlay .o-button-widget {
		position: relative;
		overflow: hidden;
		cursor: pointer;
		background-color: $main-color; //#efeef1;
		background-repeat: no-repeat;
		background-position: center;
		/*border-radius: 2px;
		border: 0px;
		width: 20px;
		height: 20px;
		float: left;
		margin-left: 3px;
		margin-top: 6px;*/
	}
	
	.o-designer-overlay .v-image {
		position: relative;
		overflow: hidden;
		cursor: pointer;
		/*background-color: #efeef1;
		
		border-style: solid;
		border-color: silver;
		border-width: 4px;
		width: 30px;*/
		height: $font-size;
		float: left;
		padding: ($unit-size - $font-size);
		padding-top: ($unit-size - $font-size) - ($gen-margins);	//11px bei 16px fontgröße	wäre gut
		/*margin-left: -3px;
		margin-top: -3px;
		margin-right: 8px;*/
	}
	
	.o-designer-overlay .switchEditable {
		padding-top: ($unit-size - $font-size) - ($gen-margins);
		//margin: $gen-margins;
		@include os-icon-font ($font-family: Vaadin-Icons, $content: '\e771',
							   $size: $font-size, 
							   $line-height: $font-size);
		color: valo-font-color($main-color);
		//background-image: url("edit_properties.gif");
	}
	
	.o-designer-overlay .removeChild {
 		padding-top: ($unit-size - $font-size) - ($gen-margins);
		//margin: $unit-size * 0.1;
		@include os-icon-font ($font-family: Vaadin-Icons, $content: '\e80b',
							   $size: $font-size, 
							   $line-height: $font-size);
		color: valo-font-color($main-color);
		//background-image: url("delete.gif");
	}
	
	.o-designer-overlay .addChild {
		padding-top: ($unit-size - $font-size) - ($gen-margins);
		//margin: $unit-size * 0.1;
		@include os-icon-font ($font-family: Vaadin-Icons, $content: '\e801',
							   $size: $font-size, 
							   $line-height: $font-size);
		color: valo-font-color($main-color);
		//background-image: url("add.png");
	}
	
	.o-designer-overlay .openProperties {
		padding-top: ($unit-size - $font-size) - ($gen-margins);
		//margin: $unit-size * 0.1;
		@include os-icon-font ($font-family: Vaadin-Icons, $content: '\e6cf',
							   $size: $font-size, 
							   $line-height: $font-size);
		color: valo-font-color($main-color);
		//background-image: url("openProperties.gif");
	}
	
	.o-designer-overlay .switchMargin {
		padding-top: ($unit-size - $font-size) - ($gen-margins);
		//margin: $unit-size * 0.1;
		@include os-icon-font ($font-family: Vaadin-Icons, 
							   $content: '\e65b',
							   $size: $font-size, 
							   $line-height: $font-size);
		color: valo-font-color($main-color);
		//background-image: url("margin.gif");
	}
	
	.o-designer-overlay .switchSpacing  {
		padding-top: ($unit-size - $font-size) - ($gen-margins);
		//margin: $unit-size * 0.1;
		@include os-icon-font ($font-family: Vaadin-Icons, $content: '\e665',
							   $size: $font-size, 
							   $line-height: $font-size);
		color: valo-font-color($main-color);
		//background-image: url("spacing.gif");
	}	
}