You cannot 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
Stylus
164 lines
3.1 KiB
Stylus
/* 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;
|
|
}
|
|
|
|
} |