vaadin-framework/themes/src/main/themes/VAADIN/themes/chameleon/common/common.scss

// this file defines the common chameleon mixin any related variables etc.

$chameleon-app-background: transparent;

$chameleon-font-family: Arial, Helvetica, "Lucida Grande", "Lucida Sans Unicode", Tahoma, Verdana, sans-serif;
$chameleon-font-size: 13px;
$chameleon-font-size-small: 11.05px;
$chameleon-font-size-big: 15.6px;
$chameleon-line-height: 1.4;


// rules on the application level, above theme selection
@mixin chameleon-app {
	// App background & tooltip
	&.v-app {
		background: transparent;
		overflow: hidden;
		}
	
	.v-ui {
		margin-top: 0;
		border-top: none;
		}
	
	.v-tooltip {
		background: #fdfdee;
		border: 1px solid #c0c0b9;
		padding: 1px 5px;
		color: #222;
		font-size: 11.7px;
		line-height: normal;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		}
	
	.v-sa & .v-tooltip {
		outline-color: #000000; /* Fallback for browsers that does not support RGBA such as IE8 */
		outline-color: rgba(0,0,0,.2);
		outline: 1px solid;
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
		border: none;
		}

	// TODO move most of the rest to chameleon-common

	// Global fonts
	
	// First all the containers that have other components inside them, and are 
	// possibly overlay elements (which reside inside the BODY element, not the .v-app element)
	
	// Then come all other overlay elements, that do not have other arbitrary 
	// components inside them (from v-filterselect-suggestpopup onwards)
	
	&.v-app,
	.v-window,
	.v-popupview-popup,
	.v-tooltip,
	&.v-app input,
	&.v-app select,
	&.v-app button,
	&.v-app textarea,
	.v-window input,
	.v-window select,
	.v-window button,
	.v-window textarea,
	.v-popupview-popup input,
	.v-popupview-popup select,
	.v-popupview-popup button,
	.v-popupview-popup textarea,
	.v-filterselect-suggestpopup,
	.v-datefield-popup,
	.v-contextmenu,
	.v-Notification,
	.v-menubar-submenu,
	.v-table-header-drag,
	.v-menubar-submenu,
	.v-drag-element {
		font-family: $chameleon-font-family;
		font-size: $chameleon-font-size;
		line-height: $chameleon-line-height;
		color: #222;
		}
	
	
	
	// Generic overlay elements
	
	.v-window,
	.v-popupview-popup,
	.v-filterselect-suggestpopup,
	.v-datefield-popup,
	.v-contextmenu,
	.v-Notification,
	.v-menubar-submenu {
		border: 1px solid #adadad;
		border-color: #000000; /* Fallback for browsers that does not support RGBA such as IE8 */
		border-color: rgba(0,0,0,.4);
		border-radius: 4px;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		overflow: hidden;
		}
	.v-window,
	.v-popupview-popup,
	.v-filterselect-suggestpopup,
	.v-datefield-popup,
	.v-contextmenu,
	.v-menubar-submenu{
		background: #e8e8e8; /* Fallback for browsers that does not support RGBA such as IE8 */
		background: rgba(232,232,232,.90);
		background-image: url(../img/grad-light-top.png) repeat-x;
		}
	.v-filterselect-suggestpopup,
	.v-contextmenu,
	.v-menubar-submenu {
		padding: 3px 0;
		}
	
	.v-contextmenu .gwt-MenuItem,
	.v-filterselect-suggestpopup .gwt-MenuItem,
	.v-menubar-submenu .v-menubar-menuitem {
		padding: .05em .7em;
		user-select: none;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		cursor: default;
	    }
	.v-filterselect-suggestpopup .gwt-MenuItem {
		padding: 0 .7em;
	    }
	
	.v-contextmenu td.gwt-MenuItem-selected div,
	.v-filterselect-suggestpopup td.gwt-MenuItem-selected,
	.v-table .v-table-body .v-selected,
	.v-menubar-submenu span.v-menubar-menuitem-selected {
		text-shadow: none;
		}
	
	.v-contextmenu .gwt-MenuItem-selected,
	.v-filterselect-suggestpopup .gwt-MenuItem-selected,
	.v-table .v-selected,
	.v-menubar-submenu .v-menubar-menuitem-selected {
		background-color: #333;
		}
	
	.v-contextmenu .gwt-MenuItem-selected div {
		background: transparent;
		}
	
	
	// Misc. generics
	
	.v-tooltip .v-errormessage {
		color: #b2320b;
		padding-left: 14px;
		background: transparent url(../img/error-indicator.png) no-repeat 0 50%;
		}

}

@mixin chameleon-common {
	// Misc. generics
	
	.v-errorindicator {
		width: 13px;
		height: 1.4em;
		background: transparent url(../img/error-indicator.png) no-repeat right 50%;
		}
	
	.v-caption-small .v-errorindicator {
		height: 1.2em;
		}
	
	.v-caption-big .v-errorindicator {
		height: 1.8em;
		}	
}