You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
164 lines
3.1 KiB
164 lines
3.1 KiB
/* 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 |
|
* |
|
*/ |
|
|
|
@import 'dijit_form_variables'; |
|
|
|
.{$theme-name} { |
|
|
|
/* arrows */ |
|
|
|
.dijitSelect, |
|
.dijitComboBox { |
|
.dijitArrowButtonInner { |
|
margin: 0; |
|
width:0; |
|
height: 0; |
|
} |
|
} |
|
|
|
/* ----- Select ----- */ |
|
|
|
.dijitSelect { |
|
button-style(); |
|
table-layout: fixed; |
|
|
|
.dijitButtonContents, |
|
.dijitArrowButton { |
|
line-height: 20px; |
|
padding: $button-padding; |
|
border: 0; |
|
border-radius: 0 $select-button-border-radius $select-button-border-radius 0; |
|
} |
|
.dijitButtonContents { |
|
padding:0; |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
border-radius: $select-button-border-radius 0 0 $select-button-border-radius; |
|
} |
|
.dijitInputField { |
|
padding: 0 0 0 $input-padding*3; |
|
} |
|
.dijitArrowButton { |
|
width: $button-arrow-width; |
|
padding: $button-arrow-padding; |
|
} |
|
} |
|
|
|
/* hover */ |
|
|
|
.dijitSelectHover { |
|
button-hover-style(); |
|
} |
|
|
|
.dijitSelectActive { |
|
button-active-style(); |
|
} |
|
|
|
/* focused */ |
|
|
|
.dijitSelectFocused { |
|
border: $select-focus-border; |
|
} |
|
|
|
/* disabled */ |
|
|
|
.dijitSelectDisabled { |
|
button-disabled-style(); |
|
} |
|
|
|
/* ----- Combobox ----- */ |
|
|
|
.dijitComboBox .dijitButtonNode { |
|
button-style(); |
|
border-radius: 0 $select-button-border-radius $select-button-border-radius 0; |
|
} |
|
|
|
/* hover */ |
|
|
|
.dijitComboBoxOpenHover .dijitButtonNode, |
|
.dijitComboBox .dijitDownArrowButtonHover { |
|
button-hover-style(); |
|
box-shadow: none; |
|
} |
|
|
|
/* disabled */ |
|
|
|
.dijitComboBoxDisabled .dijitButtonNode { |
|
button-disabled-style(); |
|
} |
|
|
|
.dijitComboBox .dijitArrowButton { |
|
width: $button-arrow-width; |
|
padding: $button-arrow-padding; |
|
} |
|
|
|
// remove arrow when wrapped in a toolbar dijit |
|
.dijitToolbar .dijitComboBox .dijitArrowButtonInner { |
|
border: none; |
|
} |
|
|
|
/* ----- DateTextBox ----- */ |
|
|
|
.dijitDateTextBox .dijitArrowButton:before { |
|
content: $select-date-icon; |
|
} |
|
/* ----- TimeTextBox ----- */ |
|
|
|
.dijitTimeTextBox .dijitArrowButton:before { |
|
content: $select-time-icon; |
|
} |
|
|
|
/* ----- Multiple Select ----- */ |
|
|
|
select { |
|
padding: $input-padding 0; |
|
border: 1px solid $input-border-color; |
|
box-shadow: $shadow-depth1; |
|
} |
|
|
|
select option { |
|
padding: $input-padding $input-padding * 2; |
|
} |
|
|
|
/* Dropdown menu styles for "Select" |
|
* Most of menu styles are defined in Menu.styl |
|
*/ |
|
|
|
.dijitSelectMenu td.dijitMenuItemIconCell, |
|
.dijitSelectMenu td.dijitMenuArrowCell { |
|
/* so that arrow and icon cells from MenuItem are not displayed */ |
|
display: none; |
|
} |
|
|
|
} |