dojox/form/resources/CheckedMultiSelect.css

Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.

/*
**----------------------------------------------------------------------------
**  CheckedMultiSelect
**----------------------------------------------------------------------------
*/

.dojoxCheckedMultiSelectHidden{
	display: none;
}

.dojoxCheckedMultiSelect .dojoxCheckedMultiSelectWrapper {
	border: solid black 1px;
	margin: 1px 0;
	overflow: scroll;
	overflow-y: scroll;
	overflow-x: hidden;
	height: 100px;
}

.dj_ie .dojoxCheckedMultiSelectWrapper,
.dj_webkit .dojoxCheckedMultiSelectWrapper {
	/* So that the scroll bar doesn't cover stuff up */
	padding-right: 15px;
}

.dojoxMultiSelectItem {
	cursor: default;
	padding: 0.1em 0.2em;
	white-space: nowrap;
}

.dojoxCheckedMultiSelectItem {
	white-space: nowrap;
	padding:.1em .2em;
	cursor:default;
}

.dojoxCheckedMultiSelectDisabled *,
.dojoxCheckedMultiSelectReadOnly * {
	color:gray !important;
}

.dojoxCheckedMultiSelectItemLabel {
	margin-left: .2em;
}

.dojoxCheckedMultiSelect .dojoxCheckedMultiSelectWrapper {
	margin: 0em 0.1em;
}

.dojoxCheckedMultiSelectCheckBoxInput {
	opacity: 0.01;
}

.dj_ie .dojoxCheckedMultiSelectCheckBoxInput {
	filter: alpha(opacity=0);
	width: 15px;
	height: 16px;
}

.dijit_a11y .dojoxCheckedMultiSelectCheckBoxInput {
	opacity: 1;
	filter: none;
}

.dojoxCheckedMultiSelectMenu td.dijitMenuArrowCell {
	display: none;
}

.dojoxCheckedMultiSelectMenu td.dijitMenuItemLabel {
	position: static;
	padding: 2px;
}

/*
**----------------------------------------------------------------------------
**  Tundra theme (make look similar to text box)
**----------------------------------------------------------------------------
*/
.tundra .dojoxCheckedMultiSelect .dojoxCheckedMultiSelectWrapper {
	background:#fff url("../../../dijit/themes/tundra/images/validationInputBg.png") repeat-x top left;
	#background:#fff url('../../../dijit/themes/tundra/images/validationInputBg.gif') repeat-x top left;
	border:1px solid #b3b3b3;
	line-height: normal;
}

.tundra .dojoxCheckedMultiSelectFocused .dojoxCheckedMultiSelectWrapper {
	/* input field when focused (ie: typing affects it) */
	border-color:#406b9b;
}

/*
**----------------------------------------------------------------------------
**  Soria theme (make look similar to text box)
**----------------------------------------------------------------------------
*/
.soria .dojoxCheckedMultiSelect .dojoxCheckedMultiSelectWrapper {
	background:#fff url("../../../dijit/themes/soria/images/validationInputBg.png") repeat-x top left;
	#background:#fff url('../../../dijit/themes/soria/images/validationInputBg.gif') repeat-x top left;
	border:1px solid #8ba0bd;
	line-height: normal;
}

.soria .dojoxCheckedMultiSelectFocused .dojoxCheckedMultiSelectWrapper {
	/* input field when focused (ie: typing affects it) */
	border-color:#406b9b;
}

/*
**----------------------------------------------------------------------------
**  Nihilo theme (make look similar to text box)
**----------------------------------------------------------------------------
*/
.nihilo .dojoxCheckedMultiSelect .dojoxCheckedMultiSelectWrapper {
	background:#fff url("../../../dijit/themes/nihilo/images/validationInputBg.png") repeat-x top left;
	#background:#fff url('../../../dijit/themes/nihilo/images/validationInputBg.gif') repeat-x top left;
	border:1px solid #d3d3d3;
	line-height: normal;
}

.nihilo .dojoxCheckedMultiSelectFocused .dojoxCheckedMultiSelectWrapper {
	/* input field when focused (ie: typing affects it) */
	border-color:#b3b3b3;
}

/*
**----------------------------------------------------------------------------
**  Claro theme (make look similar to text box)
**----------------------------------------------------------------------------
*/
.claro .dojoxCheckedMultiSelect .dojoxCheckedMultiSelectWrapper {
	border: 1px solid #b5bcc7;
	background-color: #f7fcff;
	line-height: normal;
	-webkit-transition-property:background-color, border;
	-webkit-transition-duration:.35s;
}

.claro .dojoxCheckedMultiSelectHover .dojoxCheckedMultiSelectWrapper {
	border-color: #769dc0;
	background-color: #e9f4fe;
	background-image: -moz-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px);
	background-image: -webkit-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px);
	background-image: linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px);
	background-repeat: repeat-x;
	-webkit-transition-duration:.25s;
}

.claro .dojoxCheckedMultiSelectFocused .dojoxCheckedMultiSelectWrapper {
	border: 1px solid #769dc0;
	-webkit-transition-duration:.1s;
}

.claro .dojoxCheckedMultiSelectMenuCheckBoxItemIcon {
	background-image: url('../../../dijit/themes/claro/form/images/checkboxRadioButtonStates.png');
	background-repeat: no-repeat;
	background-position: -15px;
	width: 15px;
	height: 16px;
}

.claro .dojoxCheckedMultiSelectMenuRadioItemIcon {
	background-image: url('../../../dijit/themes/claro/form/images/checkboxRadioButtonStates.png');
	background-repeat: no-repeat;
	background-position: -105px;
	width: 15px;
	height: 16px;
}

.dj_ie6 .claro .dojoxCheckedMultiSelectMenuItemIcon {
	background-image: url('../../../dijit/themes/claro/form/images/checkboxRadioButtonStates.png');
}

.claro .dojoxCheckedMultiSelectMenuItemChecked .dojoxCheckedMultiSelectMenuCheckBoxItemIcon {
	background-position: 0;
}

.claro .dojoxCheckedMultiSelectMenuItemChecked .dojoxCheckedMultiSelectMenuRadioItemIcon {
	background-position: -90px;
}

/* Drop down button */
.claro .dojoxCheckedMultiSelect .dojoxCheckedMultiSelectButton .dijitButtonText {
	padding: 2px;
}

/* normal status */
.claro .dojoxCheckedMultiSelectButton {
	border: 1px solid #b5bcc7;
	background-color: #ffffff;
	border-collapse: separate;
}

.claro .dojoxCheckedMultiSelect .dijitButtonNode {
	border: 0 solid #b5bcc7;
	border-width: 0 0 0 0;
}

.dj_ie6 .claro .dojoxCheckedMultiSelectButton, .dj_ie6 .claro .dojoxCheckedMultiSelect .dojoxCheckedMultiSelectButton .dijitButtonNode {
	background-image: none;
}

.claro .dojoxCheckedMultiSelectButton .dijitButtonContents {
	border: 0 solid #b5bcc7;
	border-right-width: 1px;
}

.claro .dojoxCheckedMultiSelectButton .dijitArrowButton {
	padding: 0;
	border: 1px solid #ffffff;
	border-top: none;
	background-color: #efefef;
	background-image: url("../../../dijit/themes/claro/images/standardGradient.png");
	background-repeat: repeat-x;
}

.claro .dojoxCheckedMultiSelectButton .dijitArrowButton .dijitArrowButtonInner {
	background-image: url("../../../dijit/themes/claro/form/images/commonFormArrows.png");
	background-position: -35px;
	background-repeat: no-repeat;
	width: 16px;
	height: 16px;
}

/* hover status */
.claro .dojoxCheckedMultiSelectButtonHover {
	border: 1px solid #769dc0;
	background-color: #e9f4fe;
	background-image: -moz-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px);
	background-image: -webkit-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px);
	background-image: linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px);
	background-repeat: repeat-x;
}

.claro .dojoxCheckedMultiSelectButtonHover .dijitButtonContents {
	border-color: #769dc0;
}

.claro .dojoxCheckedMultiSelectButtonHover .dijitArrowButton {
	background-color: #abd6ff;
}

.claro .dojoxCheckedMultiSelectButtonHover .dijitArrowButton .dijitArrowButtonInner {
	background-position: -70px ;
}

/* focused status */
.claro .dojoxCheckedMultiSelectButtonFocused {
	border: 1px solid #769dc0;
}

.claro .dojoxCheckedMultiSelectButtonFocused .dijitButtonContents {
	border-color: #769dc0;
}

.claro .dojoxCheckedMultiSelectButtonFocused .dijitArrowButton {
	background-color: #7dbefa;
	background-position: 0 -177px;
	border: none;
	padding: 0 1px;
}

.claro .dojoxCheckedMultiSelectButtonFocused .dijitArrowButton .dijitArrowButtonInner {
	background-position: -70px;
	margin-bottom: 1px;
}

/* disable status */
.claro .dojoxCheckedMultiSelectButtonDisabled {
	border: 1px solid #d3d3d3;
	background-color: #efefef;
	background-image: none;
	color: #818181;
}

.claro .dojoxCheckedMultiSelectButtonDisabled .dijitArrowButton {
	background-color: #efefef;
}

.claro .dojoxCheckedMultiSelectButtonDisabled .dijitArrowButton .dijitArrowButtonInner {
	background-position: 0;
}