/* 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 * */ .flat .dijitSelect .dijitArrowButtonInner, .flat .dijitComboBox .dijitArrowButtonInner { margin: 0; width: 0; height: 0; } .flat .dijitSelect { border-style: solid; border-width: 1px; border-color: #ccc; padding: 4px; border-radius: 4px; line-height: 20px; cursor: pointer; -webkit-transition: all 0.05s linear; -moz-transition: all 0.05s linear; -o-transition: all 0.05s linear; -ms-transition: all 0.05s linear; transition: all 0.05s linear; background: #fff; table-layout: fixed; } .flat .dijitSelect .dijitButtonContents, .flat .dijitSelect .dijitArrowButton { line-height: 20px; padding: 4px 12px; border: 0; border-radius: 0 2.666666666666668px 2.666666666666668px 0; } .flat .dijitSelect .dijitButtonContents { padding: 0; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; border-radius: 2.666666666666668px 0 0 2.666666666666668px; } .flat .dijitSelect .dijitInputField { padding: 0 0 0 12px; } .flat .dijitSelect .dijitArrowButton { width: 20px; padding: 4px; } .flat .dijitSelectHover { -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: #f2f2f2; border-color: #d9d9d9; } .flat .dijitSelectActive { -webkit-transition: none; -moz-transition: none; -o-transition: none; -ms-transition: none; transition: none; outline: none; -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.05); box-shadow: inset 0 3px 5px rgba(0,0,0,0.05); background: #e0e0e0; border-color: #b3b3b3; } .flat .dijitSelectFocused { border: 1px solid #ccc; } .flat .dijitSelectDisabled { cursor: default; color: #9e9e9e; background-color: #f5f5f5; border-color: #e3e3e3; } .flat .dijitComboBox .dijitButtonNode { border-style: solid; border-width: 1px; border-color: #ccc; padding: 4px; border-radius: 4px; line-height: 20px; cursor: pointer; -webkit-transition: all 0.05s linear; -moz-transition: all 0.05s linear; -o-transition: all 0.05s linear; -ms-transition: all 0.05s linear; transition: all 0.05s linear; background: #fff; border-radius: 0 2.666666666666668px 2.666666666666668px 0; } .flat .dijitComboBoxOpenHover .dijitButtonNode, .flat .dijitComboBox .dijitDownArrowButtonHover { -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: #f2f2f2; border-color: #d9d9d9; -webkit-box-shadow: none; box-shadow: none; } .flat .dijitComboBoxDisabled .dijitButtonNode { cursor: default; color: #9e9e9e; background-color: #f5f5f5; border-color: #e3e3e3; } .flat .dijitComboBox .dijitArrowButton { width: 20px; padding: 4px; } .flat .dijitToolbar .dijitComboBox .dijitArrowButtonInner { border: none; } .flat .dijitDateTextBox .dijitArrowButton:before { content: "\f01e"; } .flat .dijitTimeTextBox .dijitArrowButton:before { content: "\f01f"; } .flat select { padding: 4px 0; border: 1px solid #ccc; -webkit-box-shadow: 0 1px 0.5px rgba(0,0,0,0.3), 0 2px 2px rgba(0,0,0,0.2); box-shadow: 0 1px 0.5px rgba(0,0,0,0.3), 0 2px 2px rgba(0,0,0,0.2); } .flat select option { padding: 4px 8px; } .flat .dijitSelectMenu td.dijitMenuItemIconCell, .flat .dijitSelectMenu td.dijitMenuArrowCell { /* so that arrow and icon cells from MenuItem are not displayed */ display: none; }