123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124 |
- /* Select
- *
- * Styling Select mainly includes:
- *
- * 1. Containers
- * .dijitSelect - for border, background-color
- * .dijitButtonContents - for border
- *
- * 2. Arrow
- * .dijitArrowButton - for border, padding and background-color|image
- * .dijitArrowButtonInner - for border, background-color|image, display and width|height
- *
- * 3. Menu
- * .dijitSelectMenu .* - for border, padding
- *
- * 4. Various states
- * .dijitSelectHover|.dijitSelectFocused|.dijitSelectDisabled .* - for border, padding and background-color|image
- */
- @import "../variables";
- .claro .dijitSelect .dijitButtonText {
- padding: @textbox-padding;
- }
- /* normal status */
- .claro .dijitSelect {
- border: 1px solid @border-color;
- background-color: @textbox-background-color;
- border-collapse: separate;
- }
- .dj_ie6 .claro .dijitSelect,
- .dj_ie6 .claro .dijitSelect .dijitButtonNode {
- background-image:none;
- }
- .claro .dijitSelect .dijitButtonContents {
- border: 0 solid @border-color;
- border-right-width: 1px;
- }
- .claro .dijitSelect .dijitArrowButton {
- padding: 0;
- border: 1px solid @arrowbutton-inner-border-color;
- border-top:none;
- background-color: @arrowbutton-background-color;
- background-image: url("images/formHighlight.png");
- background-repeat:repeat-x;
- }
- .claro .dijitSelect .dijitArrowButton .dijitArrowButtonInner {
- background-image: url("images/commonFormArrows.png");
- background-position:-35px 70%;
- background-repeat: no-repeat;
- width:16px;
- height:16px;
- }
- /* hover status */
- .claro .dijitSelectHover {
- border: 1px solid @hovered-border-color;
- background-color: @textbox-hovered-background-color;
- background-image: url('images/textBox_back.png');
- background-repeat: repeat-x;
- }
- .claro .dijitSelectHover .dijitButtonContents {
- border-color:@hovered-border-color;
- }
- .claro .dijitSelectHover .dijitArrowButton {
- background-color:@arrowbutton-hovered-background-color;
- }
- .claro .dijitSelectHover .dijitArrowButton .dijitArrowButtonInner {
- background-position:-70px 70%;
- }
- /* focused status */
- .claro .dijitSelectFocused {
- border: 1px solid @focused-border-color;
- }
- .claro .dijitSelectFocused .dijitButtonContents {
- border-color:@focused-border-color;
- }
- .claro .dijitSelectFocused .dijitArrowButton {
- background-color:#7dbefa; // TODO. Mailed Jason about inconsistent ComboBox/Spinner behavior.
- background-position:0 -177px;
- border: none;
- padding: 0 1px;
- }
- .claro .dijitSelectFocused .dijitArrowButton .dijitArrowButtonInner {
- background-position:-70px 70%;
- margin-bottom: 1px;
- }
- /* disable status */
- .claro .dijitSelectDisabled {
- border: 1px solid @disabled-border-color;
- background-color: @disabled-background-color;
- background-image: none;
- color: @disabled-text-color;
- }
- .claro .dijitSelectDisabled .dijitArrowButton {
- background-color: @disabled-background-color;
- }
- .claro .dijitSelectDisabled .dijitArrowButton .dijitArrowButtonInner {
- background-position:0 70%
- }
- /* Dropdown menu style for select */
- .claro .dijitSelectMenu td.dijitMenuItemIconCell,
- .claro .dijitSelectMenu td.dijitMenuArrowCell {
- /* so that arrow and icon cells from MenuItem are not displayed */
- display: none;
- }
- .claro .dijitSelectMenu td.dijitMenuItemLabel {
- /* line up menu text with text in select box (in LTR and RTL modes) */
- padding: @textbox-padding;
- }
- .claro .dijitSelectMenu .dijitMenuSeparatorTop {
- border-bottom:1px solid @focused-border-color;
- }
|