/* Select | Combobox
|
* And minor style for DateTextBox | MultiSelect
|
*
|
* Styling Select mainly includes:
|
*
|
* 1. Containers
|
* Select:
|
* .dijitSelect
|
* .dijitButtonContents
|
* Combobox:
|
* .dijitComboBox
|
*
|
* 2. Arrow Button
|
* .dijitArrowButton
|
* .dijitArrowButtonInner
|
* .dijitComboBox .dijitButtonNode
|
*
|
* 3. Menu
|
* .dijitSelectMenu
|
*
|
* 4. States - Hover, Active, Focused, Disabled, e.g.
|
*
|
* Select: Hover, Active, Focused, Disabled
|
* .dijitSelectHover
|
* .dijitSelectFocused
|
* .dijitSelectDisabled
|
*
|
* Combobox: Hover, Focused (Open), Disabled
|
* .dijitComboBox .dijitDownArrowButtonHover
|
* .dijitComboBoxOpenHover .dijitButtonNode
|
* .dijitComboBoxDisabled .dijitButtonNode
|
*
|
*/
|
.claro .dijitSelect .dijitArrowButtonInner,
|
.claro .dijitComboBox .dijitArrowButtonInner {
|
margin: 0;
|
width: 0;
|
height: 0;
|
}
|
.claro .dijitSelect {
|
background-color: rgba(0,0,0,0.25);
|
border: 1px solid rgba(255,255,255,0.5);
|
-webkit-border-radius: 2px;
|
border-radius: 2px;
|
table-layout: fixed;
|
}
|
.claro .dijitSelect .dijitButtonContents,
|
.claro .dijitSelect .dijitArrowButton {
|
padding: 0;
|
border: 0;
|
-webkit-border-radius: 0 2px 2px 0;
|
border-radius: 0 2px 2px 0;
|
}
|
.claro .dijitSelect .dijitButtonContents {
|
padding: 2px 8px;
|
overflow: hidden;
|
-o-text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
-webkit-border-radius: 2px 0 0 2px;
|
border-radius: 2px 0 0 2px;
|
}
|
.claro .dijitSelect .dijitInputField {
|
line-height: 20px;
|
padding: 0;
|
}
|
.claro .dijitComboBox .dijitArrowButtonInner {
|
border: none;
|
}
|
.claro .dijitSelect .dijitArrowButton {
|
width: 24px;
|
background: #4c4c4c;
|
background-image: url("icons/Icon_Dropdown_16.png");
|
background-repeat: no-repeat;
|
background-position: center center;
|
border-left: 1px solid #7f8183;
|
}
|
.claro .dijitSelectFocused {
|
border: 1px solid #7f8183;
|
}
|
.claro .dijitSelectDisabled {
|
cursor: default;
|
opacity: 0.65;
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
|
filter: alpha(opacity=65);
|
}
|
.claro .dijitComboBox .dijitButtonNode {
|
border-style: solid;
|
border-width: 1px;
|
padding: 4px 12px;
|
-webkit-border-radius: 2px;
|
border-radius: 2px;
|
-webkit-box-shadow: none;
|
box-shadow: none;
|
line-height: 20px;
|
text-shadow: 0 1px 1px rgba(255,255,255,0.75);
|
cursor: pointer;
|
border-color: #d0d0d0;
|
background: #f5f5f5;
|
/*background: -webkit-linear-gradient(#f5f5f5, #f5f5f5);
|
background: -moz-linear-gradient(#f5f5f5, #f5f5f5);
|
background: -o-linear-gradient(#f5f5f5, #f5f5f5);
|
background: -ms-linear-gradient(#f5f5f5, #f5f5f5);
|
background: linear-gradient(#f5f5f5, #f5f5f5);*/
|
-webkit-border-radius: 0 2px 2px 0;
|
border-radius: 0 2px 2px 0;
|
background-image: url("icons/Icon_Dropdown_16.png");
|
background-repeat: no-repeat;
|
background-position: center center;
|
}
|
.claro .dijitComboBoxOpenHover .dijitButtonNode,
|
.claro .dijitComboBox .dijitDownArrowButtonHover {
|
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.2);
|
box-shadow: 0 1px 1px rgba(0,0,0,0.2);
|
-webkit-transition: all 0.1s;
|
-moz-transition: all 0.1s;
|
-o-transition: all 0.1s;
|
-ms-transition: all 0.1s;
|
transition: all 0.1s;
|
background-color: #e1e1e1;
|
/*background: -webkit-linear-gradient(#f6f6f6, #e1e1e1);
|
background: -moz-linear-gradient(#f6f6f6, #e1e1e1);
|
background: -o-linear-gradient(#f6f6f6, #e1e1e1);
|
background: -ms-linear-gradient(#f6f6f6, #e1e1e1);
|
background: linear-gradient(#f6f6f6, #e1e1e1);*/
|
-webkit-box-shadow: none;
|
box-shadow: none;
|
}
|
.claro .dijitComboBoxDisabled .dijitButtonNode {
|
cursor: default;
|
opacity: 0.65;
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
|
filter: alpha(opacity=65);
|
}
|
.claro .dijitToolbar .dijitComboBox .dijitArrowButtonInner {
|
border: none;
|
}
|
.claro .dijitDateTextBox .dijitArrowButton:before {
|
content: "\f073";
|
}
|
.claro select {
|
padding: 2px 8px 0;
|
border: 1px solid #7f8183;
|
-webkit-box-shadow: none;
|
box-shadow: none;
|
}
|
.claro select option {
|
padding: 2px 8px 4px;
|
}
|
.claro .dijitSelectMenu td.dijitMenuItemIconCell,
|
.claro .dijitSelectMenu td.dijitMenuArrowCell {
|
/* so that arrow and icon cells from MenuItem are not displayed */
|
display: none;
|
}
|
|
.claro .dojoxCheckedMultiSelectFocused .dojoxCheckedMultiSelectWrapper {
|
border: 1px solid #b5bcc7;
|
}
|
|
.claro .dojoxCheckedMultiSelect .dojoxCheckedMultiSelectWrapper {
|
background-color: #222;
|
}
|
|
.claro .dojoxCheckedMultiSelectHover .dojoxCheckedMultiSelectWrapper {
|
background-color: #666;
|
}
|
