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

Go to download
Show more of this group Show more artifacts with this name
Show all versions of alkacon-geranium-client Show documentation
geranium is a GWT JavaScript Library for OpenCms Acacia Editor. OpenCms is a Content Management System that is based on Open Source Software. Complex Intranet and Internet websites can be quickly and cost-effectively created, maintained and managed.
The newest version!
@external gwt-ToggleButton, cmsState-up-disabled, cmsState-down-disabled, cmsState-up, cmsState-up-hovering, cmsState-down-hovering, cmsState-down, cmsState-up-disabled, cmsState-down-disabled;

/* inner text box of the text box widget */
input.textBox {
	border: none;
	width: 100%;
	background: transparent;
}

.highTextBoxes .textBox {
	height: 20px;
}

.textboxGhostMode {
	font-style: oblique;
	color: value("constants.css.textColorDisabled") !important;
}

.textBoxWidget, .checkBox {}

input.textBoxReadOnly {
	background-color: value("constants.css.backgroundColorDisabled");
}

.textBoxPanel, .textAreaContainer {
	border: 1px solid value("constants.css.borderColor");
	overflow:hidden;
}

/* inner text area of the text area widget */
.textArea {
    border: none;
}

.checkBox .gwt-ToggleButton {
	outline: none;
}

@if user.agent ie6 {
	.checkBox * {
		display: inline;
	}
}

@sprite .cmsState-up-disabled .checkBoxImage {
	gwt-image: "inputImages.checkboxUncheckedDisabled";
}

@sprite .linkEdit {
	gwt-image: "baseImages.icons.editIconActive";
}

@sprite .inherited {
	gwt-image: "baseImages.icons.inheritedIcon";
}

@sprite .cmsState-down-disabled .checkBoxImage {
	gwt-image: "inputImages.checkboxCheckedDisabled";
}
@sprite .cmsState-up .checkBoxImage, .checkBoxImageUnchecked {
	gwt-image: "inputImages.checkboxUnchecked";
}
@sprite .cmsState-down .checkBoxImage, .checkBoxImageChecked {
	gwt-image: "inputImages.checkboxChecked";
}
@sprite .cmsState-up-hovering .checkBoxImage {
	gwt-image: "inputImages.checkboxUncheckedHover";
}
@sprite .cmsState-down-hovering .checkBoxImage {
	gwt-image: "inputImages.checkboxCheckedHover";
}



.radioButton .gwt-ToggleButton {
	outline: none;
}

@if user.agent ie6 {
	.checkBox * {
		display: inline;
	}
}



@sprite .cmsState-up-disabled .radioButtonImage {
	gwt-image: "inputImages.radioUncheckedDisabled";
}

@sprite .cmsState-down-disabled .radioButtonImage {
	gwt-image: "inputImages.radioCheckedDisabled";
}

@sprite .cmsState-up .radioButtonImage {
	gwt-image: "inputImages.radioUnchecked";
}

@sprite .cmsState-down .radioButtonImage {
	gwt-image: "inputImages.radioChecked";
}

@sprite .cmsState-up-hovering .radioButtonImage {
	gwt-image: "inputImages.radioUncheckedHover";
}

@sprite .cmsState-down-hovering .radioButtonImage {
	gwt-image: "inputImages.radioCheckedHover";
}
	
/* Style for edited text box */
.changed{
	color: value("constants.css.textColorChanged") !important;
}




.radioButtonGroup *, .multiCheckBox *, .textBoxPanel *, .formLabel, .formWidgetContainer * {
	font-size: inherit;
	font-family: inherit;
	color: value("constants.css.textColor");
}


.textBoxPanelDisabled {
	background-color: value("constants.css.backgroundColorDisabled");
}

.textBoxPanelDisabled * {
	color: value("constants.css.textColorDisabled");
	cursor: default;
}

.textBoxPanelError {
	border: 1px solid value("constants.css.borderColorHighlight");
	background-color: value("constants.css.backgroundColorInputError");
	overflow:hidden;
}

.formLabel {
	font-weight: normal;
}

.selectBoxRoot *, .selectBoxSelector * {
	font-family: value("constants.css.fontFamily");
	font-size: value("constants.css.fontSize");
}



@if user.agent gecko1_8 gecko{
	/** firefox **/
	.selectBoxSelector div{
		-moz-border-radius: value("constants.css.borderRadius");
	}
} @elif user.agent safari {
	/** chrome, safari etc. **/
	.selectBoxSelector div{
		-webkit-border-radius: value("constants.css.borderRadius");
	}
} @elif user.agent opera ie9{
	/** opera, ie9 */
	.selectBoxSelector div{
		border-radius: value("constants.css.borderRadius");
	}
} @elif user.agent ie8 {
	/** ie7, ie8 and the rest, add new @elif block if necessary **/
	
	.selectBoxSelector div{
		border-radius: value("constants.css.borderRadius");
	}
}

.error {
	text-align: left;
	border: 1px solid value("constants.css.borderColorHighlight");
	background-color: value("constants.css.backgroundColorInfo");
	color: value("constants.css.textColor");
    margin-top: 2px;
    padding: 3px;
    position: absolute;
    z-index: value("constants.css.zIndexInline");
}

.selectBoxRoot.selectBoxDisabled .selectBoxSelected{
	background-color: value("constants.css.backgroundColorStateDisabled");
	color: value("constants.css.textColorDisabled");
}
.selectBoxRoot.selectBoxDisabled .selectBoxSelected *{
	color: value("constants.css.textColorDisabled");
}

@sprite .openerNoHover.selectBoxSelected {
	width: auto; 
	height:auto;
	min-height: 0px;
	border: 1px solid value("constants.css.borderColor");
	gwt-image: "backgrounds.stateBackground";
	background-position: 50% 50%;
	outline: none;
	background-color: value("constants.css.backgroundColorStateStandard");
}

@sprite .openerHover.selectBoxSelected {
	width: auto;
	height: auto;
	min-height: 0px;
	border: 1px solid value("constants.css.borderColor");
	gwt-image: "backgrounds.stateBackground";
	background-position: 50% 50%;
	outline: none;
	background-color: value("constants.css.backgroundColorStateHover");
}

div.selectBoxSelector, div.selectorPopup div.selectBoxSelector{
	border: 1px solid value("constants.css.borderColor");
	background-color: value("constants.css.backgroundColorDialog");
	padding-bottom: 2px;
	z-index: value("constants.css.zIndexPopup");
}



div.selectorPopup, .selectorPopup * {
	margin: 0;
	padding: 0;
	border: none;
	color: value("constants.css.textColor");
	font-family: value("constants.css.fontFamily");
	font-size: value("constants.css.fontSize");
	line-height: value("constants.css.lineHeight");
	background: transparent;
	text-align: left;
	height: auto;
	width: auto;
	min-height: 0;
	max-height: none;
	min-width: 0;
	max-width: none;
}

.selectorPopup{
	z-index: value("constants.css.zIndexPopup");
}

div.selectBoxCell, div.selectorPopup div.selectBoxSelector div.selectBoxCell{
	color: value("constants.css.textColor");
	background-color: value("constants.css.backgroundColorDialog");
	padding: 0 5px;
	cursor: pointer;
	font-family: value("constants.css.fontFamily");
	font-size: value("constants.css.fontSize");
}

div.selectHover, div.selectorPopup div.selectBoxSelector div.selectBoxCell.selectHover{
	background-color: value("constants.css.backgroundColorHighlight");
}

.selectIcon { 
	position: absolute;
	right: 0;
	top: 3px;
}

.selectBoxRoot {
	/* needed to enable hasLayout in IE (required for reading clientHeight) */
	min-height: 0px;
	width: 100%;
	position: relative;
}

div.selectBoxOpener {
	margin: 3px 12px 3px 5px;
}

.openerNoHover {}
.openerHover {
}

@if user.agent ie6 {
	.inlineBlock {
		display: inline;
	}
} @else {
	.inlineBlock {
		display: inline-block;
	}
}

.label {
	overflow: hidden;
	white-space: nowrap;
}

.labelTruncated {
	overflow: hidden;
	white-space: nowrap;
}

.labelInput {
	background: transparent;
	border: none;
	vertical-align: middle;
}

.alignBottom {
	vertical-align: bottom;
}

div.formRow {
	margin: 2px 0;
	position: relative;
	min-height: 22px;
}

@sprite .formRowOpenerClosed {
	gwt-image: "baseImages.plusImage";
}



@sprite .formRowOpenerOpen {
	gwt-image: "baseImages.minusImage";
}

@def fieldOpenerWidth 32px ; 
@def formLabelWidth 160px ;

@eval openerWidth org.opencms.gwt.client.ui.input.form.CmsFormRow.getOpenerWidth();
@eval widgetContainerMargin org.opencms.gwt.client.ui.input.form.CmsFormRow.getWidgetContainerLeftMargin();  

.formOpener {
	width: openerWidth;
	float: left;
	vertical-align: top; 
}

.formInfo {
	margin-left: 5px;
	margin-top: 5px;
	margin-bottom: 12px;
	font-weight: bold; 
}

.formLabel { 
	width: formLabelWidth;
	overflow: hidden;
	vertical-align: top;
	margin-top: 2px;
/*	margin-left: openerWidth; */ 
	float: left;
	width: widgetContainerMargin;
}

.formWidgetContainer {
	width: 356px;
	margin-left: widgetContainerMargin;
}

.separator {
	width: 100%;
	height: 1px;
	margin-top: 5px;
	margin-bottom: 5px;
	/** Use the border color as background because this CSS class behaves like a border. */
	background-color: value("constants.css.borderColor");
}

.formDescriptionLabel {
	margin-bottom: 5px;
	margin-top: 5px;
}

.weakText { 
	color: value("constants.css.textColorDisabled"); 
}

.subtitleSuffix {
	font-weight: bold;
	margin-left: 8px;
}