165 lines
3.5 KiB
Stylus
Executable File
165 lines
3.5 KiB
Stylus
Executable File
/* Button | DropDownButton | ComboButton | ToggleButton
|
|
*
|
|
* Styling Buttons mainly includes:
|
|
*
|
|
* 1. Containers
|
|
* .dijitButton
|
|
* .dijitDropDownButton
|
|
* .dijitComboButton
|
|
* .dijitButtonNode - common button/arrow wrapper shared across all three button types
|
|
*
|
|
* 2. Button text
|
|
* .dijitButtonText
|
|
*
|
|
* 3. Arrows - only for DropDownButton and ComboButton
|
|
* There are total four directions arrows - down, left, right, up:
|
|
* .dijitArrowButtonInner - down arrow by default
|
|
* .dijitLeftArrowButton .dijitArrowButtonInner - left arrow
|
|
* .dijitRightArrowButton .dijitArrowButtonInner - right arrow
|
|
* .dijitUpArrowButton .dijitArrowButtonInner - up arrow
|
|
*
|
|
* 4. States - Hover, Active, Disabled, e.g.
|
|
* .dijitButtonHover .dijitButtonNode
|
|
* .dijitButtonActive .dijitButtonNode
|
|
* .dijitButtonDisabled .dijitButtonNode
|
|
*
|
|
* .dijitDisabled .dijitArrowButtonInner - disabled arrow states
|
|
*/
|
|
|
|
@import 'dijit_form_variables';
|
|
|
|
.{$theme-name} {
|
|
/* ----- Button ----- */
|
|
.dijitButtonText {
|
|
padding: 0 $padding;
|
|
text-align: center;
|
|
}
|
|
|
|
.dijitButton,
|
|
.dijitDropDownButton,
|
|
.dijitComboButton,
|
|
.dijitToggleButton {
|
|
.dijitButtonNode {
|
|
button-style();
|
|
}
|
|
}
|
|
|
|
create-alternative-buttons($button-alternative-colors);
|
|
|
|
// hover
|
|
.dijitButtonHover,
|
|
.dijitDropDownButtonHover,
|
|
.dijitToggleButtonHover {
|
|
.dijitButtonNode {
|
|
button-hover-style();
|
|
}
|
|
}
|
|
.dijitComboButton {
|
|
.dijitButtonNodeHover,
|
|
.dijitDownArrowButtonHover {
|
|
button-hover-style();
|
|
}
|
|
}
|
|
|
|
create-alternative-buttons-hover($button-alternative-colors);
|
|
|
|
// active and checked
|
|
.dijitButtonActive,
|
|
.dijitDropDownButtonActive,
|
|
.dijitToggleButtonActive,
|
|
.dijitToggleButtonChecked {
|
|
.dijitButtonNode {
|
|
button-active-style();
|
|
}
|
|
}
|
|
.dijitComboButton {
|
|
.dijitButtonNodeActive,
|
|
.dijitDownArrowButtonActive {
|
|
button-active-style();
|
|
}
|
|
}
|
|
|
|
create-alternative-buttons-active($button-alternative-colors);
|
|
|
|
// disabled
|
|
.dijitButtonDisabled,
|
|
.dijitDropDownButtonDisabled,
|
|
.dijitComboButtonDisabled,
|
|
.dijitToggleButtonDisabled {
|
|
outline: none;
|
|
}
|
|
|
|
.dijitButtonDisabled,
|
|
.dijitDropDownButtonDisabled,
|
|
.dijitComboButtonDisabled,
|
|
.dijitToggleButtonDisabled {
|
|
.dijitButtonNode {
|
|
button-disabled-style();
|
|
}
|
|
}
|
|
|
|
create-alternative-buttons-disabled($button-alternative-colors);
|
|
|
|
.dijitComboButtonDisabled .dijitArrowButton {
|
|
border-left-width: 0;
|
|
}
|
|
|
|
/* ----- DropDownButton ----- */
|
|
.dijitDropDownButton .dijitButtonNode {
|
|
padding-right: $padding * 2;
|
|
}
|
|
|
|
/* ----- ComboButton ----- */
|
|
table.dijitComboButton {
|
|
border-collapse: separate; /* override dijit.css so that ComboBox rounded corners work */
|
|
.dijitStretch {
|
|
border-radius: $border-radius 0 0 $border-radius;
|
|
}
|
|
.dijitArrowButton {
|
|
padding: $padding;
|
|
width: $button-arrow-width;
|
|
border-radius: 0 $border-radius $border-radius 0;
|
|
border-left-width: 0;
|
|
}
|
|
}
|
|
|
|
/* ----- ToggleButton ----- */
|
|
.dijitToggleButton {
|
|
.dijitCheckBoxIcon {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.dijitToggleButtonChecked {
|
|
.dijitIcon {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
// arrow styles for down/up/left/right directions
|
|
.dijitDropDownButton .dijitArrowButtonInner{
|
|
margin-left: $padding * 0.75;
|
|
}
|
|
|
|
.dijitDropDownButton .dijitArrowButtonInner,
|
|
.dijitArrowButton {
|
|
_icon-core-style();
|
|
}
|
|
|
|
.dijitDropDownButton .dijitArrowButtonInner:before,
|
|
.dijitArrowButton:before {
|
|
content: $icon-drop-down;
|
|
}
|
|
|
|
.dijitLeftArrowButton:before {
|
|
content: $icon-drop-left;
|
|
}
|
|
|
|
.dijitRightArrowButton:before {
|
|
content: $icon-drop-right;
|
|
}
|
|
|
|
.dijitUpArrowButton:before {
|
|
content: $icon-drop-up;
|
|
}
|
|
} |