com.alkacon.geranium.client.ui.css.button.css Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of geranium-client Show documentation
A GWT UI framework. This component is used as a part of OpenCms, an enterprise-ready, easy to use website content management system based on Java and XML technology. Offering a complete set of features, OpenCms helps content managers worldwide to create and maintain beautiful websites fast and efficiently.
There is a newer version: 2.1
Show newest version
@external html-face, cmsState, cmsState-up, cmsState-up-hovering, cmsState-up-disabled, cmsState-down, cmsState-down-hovering, cmsState-down-disabled;

.cmsState, .cmsHovering {}
.cmsState.cmsState-down-disabled, .cmsState.cmsState-up-disabled { cursor:auto; }

/** General styling for the html-face class and it's inner span, if an image is present. */
div.html-face {
	color:inherit;
	font-family:value("constants.css.fontFamily");
	font-weight:inherit;
	text-align:center;
	white-space:nowrap;
}
div.cmsMinWidth div.html-face {
	min-width:5em;
}
div.html-face span {
	display:inline-block;
    vertical-align:middle;
}
div.html-face span.spacerRight {
	margin-right:4px;
}
div.html-face span.spacerLeft {
	margin-left:4px;
}

/** Button size styles. */
div.cmsButtonMedium div.html-face {
	font-size: value("constants.css.fontSize");
	line-height: value("constants.css.lineHeight");
}
div.cmsButtonSmall div.html-face {
	font-size: value("constants.css.fontSizeSmall");
	line-height: value("constants.css.lineHeightSmall");
}
div.cmsButtonBig div.html-face {
	font-size: value("constants.css.fontSizeBig");
	line-height: value("constants.css.lineHeightBig");
}

/** General styling for all buttons (don't let the background expand the button height and position it in the middle). */
div.cmsTextButton, div.cmsTransparentButton, div.cmsMenuButton, div.cmsImageButton {
	height:auto !important;
	background-position:50% 50% !important;
	background-color:transparent;
	vertical-align:middle;
	outline:none;
	cursor:pointer;
	display:inline-block;
	text-align:center;
    font-weight:bold;
    user-select: none;
}
/* disables text selection */
@if user.agent gecko gecko1_8 {
	div.cmsTextButton, div.cmsTransparentButton, div.cmsMenuButton, div.cmsImageButton {
		-moz-user-select: none;
	}
} @elif user.agent safari {
	div.cmsTextButton, div.cmsTransparentButton, div.cmsMenuButton, div.cmsImageButton {
		-webkit-user-select: none;
	}
} @elif user.agent opera {
	div.cmsTextButton, div.cmsTransparentButton, div.cmsMenuButton, div.cmsImageButton {
		-o-user-select: none;
	}
} @elif user.agent ie9 {
	div.cmsTextButton, div.cmsTransparentButton, div.cmsMenuButton, div.cmsImageButton {
		-ms-user-select: none;
	}
}

/** Specific button styles (text-, transparent-, menu- and image-Button). */
@sprite div.cmsTextButton {
	gwt-image:"backgrounds.stateBackground";
    border:1px solid value("constants.css.borderColor");
    padding:3px 8px;
}
div.cmsMenuButton, div.cmsImageButton {
    border:1px solid transparent;
    padding:2px 4px; 
}
div.cmsTransparentButton {
    vertical-align:top;
}

/** IE correction. */
@if user.agent ie6 {
	div.cmsTextButton.cmsState, div.cmsTransparentButton.cmsState, div.cmsMenuButton.cmsState, div.cmsImageButton.cmsState {
		display:inline;
	}
	div.cmsMinWidth div.html-face {
		overflow:visible;
	}
}

/**
 * State depended styles.
 */

/** Set a general text color for all disabled buttons. */
div.cmsState-up-disabled div.html-face, div.cmsState-down-disabled div.html-face {
	color:value("constants.css.textColorDisabledButton") !important;
}
/** Text-Button:If no button style is set use the default state behavior. */
div.cmsTextButton.cmsState-up-disabled, div.cmsTextButton.cmsState-down-disabled {
    background-color:value("constants.css.backgroundColorStateDisabled");
}
div.cmsTextButton.cmsState-up {
	background-color:value("constants.css.backgroundColorStateStandard");
} 
div.cmsTextButton.cmsState-down-hovering, div.cmsTextButton.cmsState-up-hovering {
	background-color:value("constants.css.backgroundColorStateHover");
}
div.cmsTextButton.cmsState-down {
	background-color:value("constants.css.backgroundColorStateActive");
}
/** Image-Button:Only show a border and background for the hover- and the down-state. */
@sprite div.cmsImageButton.cmsState-down-hovering, div.cmsImageButton.cmsState-up-hovering {
	gwt-image:"backgrounds.stateBackground"; 
	background-color:value("constants.css.backgroundColorStateHover");
	border-color:value("constants.css.borderColor");
}
@sprite div.cmsImageButton.cmsState-down {
	gwt-image:"backgrounds.stateBackground"; 
	background-color:value("constants.css.backgroundColorStateActive");
	border-color:value("constants.css.borderColor");
}
/** Menu-Button:Only show a border and background for the hover-state. */
@sprite div.cmsMenuButton.cmsState-down-hovering, div.cmsMenuButton.cmsState-up-hovering {
	gwt-image:"backgrounds.stateBackground"; 
	background-color:value("constants.css.backgroundColorStateHover");
	border-color:value("constants.css.borderColor");
}

/**
 * Color sprites.
 */
div.red div.html-face {
	color:value("constants.css.textColorDarkButton");
}
@sprite div.red.cmsState-up {
	gwt-image:"inputImages.buttonRedUpBackground"; 
}
@sprite div.red.cmsState-down {
	gwt-image:"inputImages.buttonRedDownBackground";
}
@sprite div.red.cmsState-up-disabled, div.red.cmsState-down-disabled {
	gwt-image:"inputImages.buttonDisabledBackground";
}
@sprite div.red.cmsState-up-hovering, div.red.cmsState-down-hovering {
	gwt-image:"inputImages.buttonRedHoverBackground"; 
}

div.gray div.html-face {
	color:value("constants.css.textColorDarkButton");
}
@sprite div.gray.cmsState-up {
	gwt-image:"inputImages.buttonGrayUpBackground"; 
}
@sprite div.gray.cmsState-down {
	gwt-image:"inputImages.buttonGrayDownBackground";
}
@sprite div.gray.cmsState-up-disabled, div.gray.cmsState-down-disabled {
	gwt-image:"inputImages.buttonDisabledBackground";
}
@sprite div.gray.cmsState-up-hovering, div.gray.cmsState-down-hovering {
	gwt-image:"inputImages.buttonGrayHoverBackground"; 
}

div.blue div.html-face {
	color:value("constants.css.textColorDarkButton");
}
@sprite div.blue.cmsState-up {
	gwt-image:"inputImages.buttonBlueUpBackground"; 
}
@sprite div.blue.cmsState-down {
	gwt-image:"inputImages.buttonBlueDownBackground";
}
@sprite div.blue.cmsState-up-disabled, div.blue.cmsState-down-disabled {
	gwt-image:"inputImages.buttonDisabledBackground";
}
@sprite div.blue.cmsState-up-hovering, div.blue.cmsState-down-hovering {
	gwt-image:"inputImages.buttonBlueHoverBackground"; 
}

div.yellow div.html-face {
	color:value("constants.css.textColorLightButton");
}
@sprite div.yellow.cmsState-up {
	gwt-image:"inputImages.buttonYellowUpBackground"; 
}
@sprite div.yellow.cmsState-down {
	gwt-image:"inputImages.buttonYellowDownBackground";
}
@sprite div.yellow.cmsState-up-disabled, div.yellow.cmsState-down-disabled {
	gwt-image:"inputImages.buttonDisabledBackground";
}
@sprite div.yellow.cmsState-up-hovering, div.yellow.cmsState-down-hovering {
	gwt-image:"inputImages.buttonYellowHoverBackground"; 
}

div.green div.html-face {
	color:value("constants.css.textColorDarkButton");
}
@sprite div.green.cmsState-up {
	gwt-image:"inputImages.buttonGreenUpBackground"; 
}
@sprite div.green.cmsState-down {
	gwt-image:"inputImages.buttonGreenDownBackground";
}
@sprite div.green.cmsState-up-disabled, div.green.cmsState-down-disabled {
	gwt-image:"inputImages.buttonDisabledBackground";
}
@sprite div.green.cmsState-up-hovering, div.green.cmsState-down-hovering {
	gwt-image:"inputImages.buttonGreenHoverBackground"; 
}

div.black div.html-face {
	color:value("constants.css.textColorDarkButton");
}
@sprite div.black.cmsState-up {
	gwt-image:"inputImages.buttonBlackUpBackground"; 
}
@sprite div.black.cmsState-down {
	gwt-image:"inputImages.buttonBlackDownBackground";
}
@sprite div.black.cmsState-up-disabled, div.black.cmsState-down-disabled {
	gwt-image:"inputImages.buttonDisabledBackground";
}
@sprite div.black.cmsState-up-hovering, div.black.cmsState-down-hovering {
	gwt-image:"inputImages.buttonBlackHoverBackground"; 
}