org.eclipse.osbp.themes/scss/layout/_dialog.scss

////
/// @group layout/dialog
////
@mixin os-dialog {
	
	/* table and grid headers inside form/dialog */
   	.v-caption-on-top >.v-caption >.v-captiontext {
		font-size: $v-font-size * $v-scaling-factor--large;
		}
	
	.v-caption-on-top >.v-caption-l-control >.v-captiontext,
	.v-slot-os-single-selection > .v-caption-on-top >.v-caption >.v-captiontext,
	.v-slot-os-multi-selection > .v-caption-on-top >.v-caption >.v-captiontext {
		font-size: $v-font-size;
		}
			 
	.v-slot-os-single-selection, .v-slot-os-multi-selection {
		background-color: $os-light-contrast;
		 > .v-caption-on-top {
			>.v-caption {
				padding-bottom: 0px;
				 >.v-captiontext {
					margin: floor($v-unit-size/3);
					margin-bottom: 0px;
					}
				}
			> .v-filterselect {
				margin-top: 0px;
				}
			}
		}
	
	/* checkbox workaround */
	.v-formlayout-row {
		:root & .v-checkbox {
			@include os-checkbox();
			padding-top: inherit;
			> input ~ label:before, > input~ label:after {
				margin-top: inherit;
				}
			> input ~ label:before {
				margin-top: inherit;
				border-width: 0px;
				}		
			}			
		.v-gridlayout {
			}
		}
	
	.v-gridlayout-slot .v-checkbox-os-box {
		@include os-checkbox();
		
		padding-top: floor($v-unit-size * 1.2);
		> input ~ label:before, > input~ label:after {
			margin-top: floor($v-unit-size * 1.2);
			}
		> input ~ label:before {
			margin-top: floor($v-unit-size * 1.2);
			}	
		} 

	/* Multiselect */
	select.v-select-select {
		color: inherit !important;
		border: $v-border
		}
	select.v-select-select option:checked {
 	   	box-shadow: 0 0 10px 100px $v-focus-color inset;
 	   	color: valo-font-color($v-focus-color) !important;	//? no effect
		}
		 
	.l-controlbase {
		overflow: auto;
		
		.v-grid-os-box {	
			//width: 800px !important; //needs fixed size as of now
			}
		}
		
	.v-panel-os-has-focus {
		@include os-panel-focus;
		}		
	
	.l-control { 
		//table and grid inside dialog
		.v-table {
			border-bottom: $v-border;
			}
		.v-table-header-wrap {
			border-top: none;
			height: $v-unit-size;
			}
			
		/* grid inside dialog */
		.v-grid-os-box {
			.v-grid-tablewrapper {
				border-top: 0px;
				}
			}
		.v-gridlayout-slot {
			.v-grid-os-box {
				.v-grid-tablewrapper {
					border-top: $v-border;
					}	
				}
			}			
		}
	
	.l-control, .toptrimbar, .os-selection-area {
		.v-panel {
			border-width: first-number($v-border);
			}

		.v-widget {
		 	&.os-group-panel {
		 		width: 100%;
				border-top-width: first-number($v-border) * 2; 		
				}
			&.os-group-panel.os-caption-large, .os-caption-large {
				.v-caption {
					width: $v-unit-size * 6; 
					white-space: nowrap; 
    				overflow: -moz-hidden-unscrollable;
					text-overflow: ellipsis;
					
					.v-caption:hover {
	    				overflow: visible;
						}
					}

			 	.v-formlayout-contentcell { 
					padding: 0px;
					}
				}
			}			
					

/* 		.v-panel { */
/* 			border-width: 1px; */
			
/* 			&.os-group-panel { */
/* 				//border-width: 3px !important; */
/* 				width: 100% !important; */
/* 				} */
/* 			} */
/* 		.v-panel.os-group-panel.os-caption-large, .v-widget.os-caption-large { */
/* 			.v-formlayout-captioncell { */
/* 				width: $v-unit-size * 6; */
/* 				white-space: nowrap;  */
/*    				overflow: -moz-hidden-unscrollable; */
/* 				text-overflow: ellipsis; */
				
/* 				.v-caption:hover { */
/*     				overflow: visible; */
/* 					} */
/* 				} */
/* 			} */
/* 		.v-panel.os-group-panel .v-formlayout-contentcell { */
/* 			padding: 0px; */
/* 			}			 */
			
		.os-no-padding {
			padding: 0px !important;
			} 
		
		.v-caption {
			font-size: $v-font-size;
			}
			
		.v-caption-on-top >.v-caption, 
		.v-gridlayout-slot >.v-caption {
	    	padding-bottom: round($v-unit-size*0.05);
	    	padding-top: round($v-unit-size*0.5);
	    	}
	    
	    .v-caption-os-has-focus {
	    	@include os-caption-focus;
	    	}
	    	   
	    
	    /* should accomplish that groups of fields fill the entire width of a formlayout row */
	    .v-component-group, .l-beansearchfield {
	    	display: flex;
	    	width: $v-default-field-width;
	    	> .v-slot:first-of-type {
	    		width: 100%;
	    		}
	    	.v-datefield, .v-filterselect {	    	
		    	 width: 100% !important;
		    	 > .v-textfield {
		    	 	width: 100% !important;
	    			}
		    	 }
	    	}
	    	
		.v-formlayout-row .v-customcomponent .v-label {
			/* ? */
			
			}
	    	
		.v-formlayout-captioncell, 
		.v-formlayout-errorcell {
			border-bottom: $v-border;
			vertical-align: bottom;
			}
		.v-formlayout-captioncell, 
		.v-formlayout-errorcell,
		.v-formlayout-contentcell {
			padding-top: 0px !important; /* overrides $v-layout-spacing-vertical */
			}
		
		.v-formlayout-contentcell >.v-customcomponent {
			width: 100%;
/* 			.v-filterselect-input, .v-filterselect [class*="input"] { */
/* 				border-bottom-width: 0px; */
/* 				}			 */
		    .v-label {
				border-bottom: $v-border;
		    	}
			}
				
		.v-textfield {
			width: $v-default-field-width;
			@include os-textfield;
			}
			
		.v-filterselect {
/* 			border-bottom: $v-border; */
			}
		.v-filterselect-input, .v-filterselect [class*="input"] {
			@include os-textfield;
/* 			border-bottom: $v-border; */
			@include box-shadow(none);
			}		
		.v-filterselect.v-widget.os-combobox-with-icon .v-icon, .v-filterselect-os-box .v-icon {
			/* language selection icon position (header) */
			z-index: 999;
			}	 	
		
		.v-textfield-readonly, .v-disabled {
			@include os-textfield-readonly;
			}
		
		.l-beansearchfield {
			button, .v-nativebutton {
    			@include os-button-l-beansearch;
				}
    		}
    		 
		.v-datefield-error {
			.v-datefield-textfield {
				@include os-error-textfield;
				&.v-textfield-focus {
					color: valo-font-color($os-focus-color);
					}
				}
			.v-datefield-button {
				@include os-button-error;
				}
			}
		.v-textfield-error {
			@include os-error-textfield;
			}
    	
    	.v-button {
    		height: $v-unit-size;
    		}
    		
    	.v-upload-immediate .v-button {
    		@include os-button-formlayout;
			}

		    	
    	.v-gridlayout-slot > .v-label > img {
    		@if $os-img-size-override == true {
        		height: $v-unit-size * 3;
        		}
    		}
    	
    	
		/* panel margins */
		[class*="margin-bottom"] > tbody > [class*="lastrow"] > td {
			padding-bottom: 0px;
			}
		[class*="margin-top"] > tbody > [class*="firstrow"] > td {
		    padding-top: 0px; 
			}
		}
		
	.v-filterselect-os-single-selection, .os-single-selection {
		color: valo-font-color($os-sub-header-bg);
		margin: floor($v-unit-size/3);
/* 		width: $os-button-width; */
		}    
	    
	.os-multi-selection select.v-select-select {
		color: inherit !important;
		border: $v-border;
		margin: floor($v-unit-size/3);
		width: $os-button-width;
		option:checked{
	 	   	box-shadow: 0 0 10px 100px $v-focus-color inset;
			}	
		}		
	}
	
	/*.v-panel .os-group-panel {
		border-width: 3px !important;
		width: 100% !important;
	}*/