dijit/themes/claro/form/Button.less

Dijit provides a complete collection of user interface controls based on Dojo, giving you the power to create web applications that are highly optimized for usability, performance, internationalization, accessibility, but above all deliver an incredible u

/* 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 "../variables";

.claro .dijitButtonNode {
	/* rules for dijit.form.*Button widgets and arrow nodes on ComboBox, Spinner etc. */
	.transition-property(background-color);
 	.transition-duration(.3s);
}

.claro .dijitButton .dijitButtonNode,
.claro .dijitDropDownButton .dijitButtonNode,
.claro .dijitComboButton .dijitButtonNode,
.claro .dijitToggleButton .dijitButtonNode {
	/* rules for the dijit.form.*Button widgets (see also ComboButton section below) */
	border: 1px solid @button-border-color;
	padding: 2px 4px 4px 4px;
	color: @text-color;
	.border-radius(@button-border-radius);
	.box-shadow(0 1px 1px rgba(0,0,0,0.15));

	background-color: desaturate(darken(@button-background-color, 10), 20);

	// Alpha transparency layer to add gradient to above background color.
	// Use CSS gradient with fallback to image for IE.
	background-image: url("images/buttonEnabled.png");
	background-repeat: repeat-x;
	.alpha-white-gradient(1, 0px, 0, 3px, 0.75, 100%);
	_background-image: none;	// IE6 can't handle background-color and background-image at once.
}


.claro .dijitComboButton .dijitArrowButton {
	border-left-width: 0;
	padding: 4px 2px 4px 2px;	/* TODO: still needed? */
}

/*arrow styles for down/up/left/right directions*/
.claro .dijitArrowButtonInner {
	width: 15px;
	height: 15px;
	margin: 0 auto;
	background-image:url("../@{image-form-button-arrows}");
	background-repeat:no-repeat;
	background-position:-51px 53%;
}
.claro .dijitLeftArrowButton .dijitArrowButtonInner {
	background-position: -77px 53%;
}
.claro .dijitRightArrowButton .dijitArrowButtonInner {
	background-position: -26px 53%;
}
.claro .dijitUpArrowButton .dijitArrowButtonInner {
	background-position: 0 53%;
}
.claro .dijitDisabled .dijitArrowButtonInner {
	background-position: -151px 53%;
}
.claro .dijitDisabled .dijitLeftArrowButton .dijitArrowButtonInner {
	background-position: -177px 53%;
}
.claro .dijitDisabled .dijitRightArrowButton .dijitArrowButtonInner {
	background-position: -126px 53%;
}
.claro .dijitDisabled .dijitUpArrowButton .dijitArrowButtonInner {
	background-position: -100px 53%;
}

.claro .dijitButtonText {
	padding: 0 0.3em;
	text-align: center;
}





/* hover status */
.claro .dijitButtonHover .dijitButtonNode,
.claro .dijitDropDownButtonHover .dijitButtonNode,
.claro .dijitComboButton .dijitButtonNodeHover, 
.claro .dijitComboButton .dijitDownArrowButtonHover,
.claro .dijitToggleButtonHover .dijitButtonNode {
	background-color: desaturate(darken(@button-hovered-background-color, 10), 20);
	color:@text-color;
 	.transition-duration(.2s);
}

/* active, checked status */
.claro .dijitButtonActive .dijitButtonNode, 
.claro .dijitDropDownButtonActive .dijitButtonNode,
.claro .dijitComboButtonActive .dijitButtonNode,
.claro .dijitToggleButtonActive .dijitButtonNode,
.claro .dijitToggleButtonChecked .dijitButtonNode {
	background-color: desaturate(darken(@button-pressed-background-color, 10), 20);
	.box-shadow(inset 0px 1px 1px rgba(0, 0, 0, 0.2));
 	.transition-duration(.1s);
}

/* disabled status */
.claro .dijitButtonDisabled,
.claro .dijitDropDownButtonDisabled,
.claro .dijitComboButtonDisabled,
.claro .dijitToggleButtonDisabled {
	background-image: none;
	outline: none;
}

.claro .dijitButtonDisabled .dijitButtonNode,
.claro .dijitDropDownButtonDisabled .dijitButtonNode,
.claro .dijitComboButtonDisabled .dijitButtonNode,
.claro .dijitToggleButtonDisabled .dijitButtonNode {
	background-color: @disabled-background-color;
	border: solid 1px @disabled-border-color;
	color: @disabled-text-color;
	.box-shadow(0 0 0 rgba(0,0,0,0));

	// Change the gradient from light to dark.
	// Again using CSS gradient with fallback to image for IE.
	background-image: url("images/buttonDisabled.png");
	.alpha-white-gradient(1, 0%, 0, 40%);
	_background-image: none;	// IE6 can't handle background-color and background-image at once.
}

.claro .dijitComboButtonDisabled .dijitArrowButton{ 
	border-left-width: 0;
}
/* for ComboButton */
.claro table.dijitComboButton {
	border-collapse: separate;	/* override dijit.css so that ComboBox rounded corners work */
}

.claro .dijitComboButton .dijitStretch {
	.border-radius(@button-border-radius 0 0 @button-border-radius);
}
.claro .dijitComboButton .dijitArrowButton {
	.border-radius(0 @button-border-radius @button-border-radius 0);
}