138 lines
4.1 KiB
CSS
138 lines
4.1 KiB
CSS
|
/* Toolbar
|
||
|
|
*
|
||
|
|
* Styling Toolbar means styling the toolbar container and the widget inside toolbar (dijitToolbar)
|
||
|
|
*
|
||
|
|
* 1. toolbar (default styling):
|
||
|
|
* .dijitToolbar - styles for outer container
|
||
|
|
*
|
||
|
|
* 2. widget inside toolbar
|
||
|
|
* .dijitToolbar .dijitButtonNode - Button widget
|
||
|
|
* .dijitComboButton - ComboButton widget
|
||
|
|
* .dijitDropDownButton - DropDownButton widget
|
||
|
|
* .dijitToggleButton - ToggleButton widget
|
||
|
|
*
|
||
|
|
* 3. hovered widget inside toolbar (ie, mouse hover on the widget inside)
|
||
|
|
* .dijitToolbar .dijitButtonNodeHover - styles for hovered Button widget
|
||
|
|
*
|
||
|
|
* 4. actived widget inside toolbar (ie, mouse down on the widget inside)
|
||
|
|
* .dijitToolbar .dijitButtonNodeActive - mouse down on Button widget
|
||
|
|
*/
|
||
|
|
.flat .dijitToolbar {
|
||
|
|
background-color: #f5f5f5;
|
||
|
|
padding: 4px;
|
||
|
|
zoom: 1;
|
||
|
|
/* Override default button styles */
|
||
|
|
/* Hover */
|
||
|
|
/*
|
||
|
|
.dijitComboButtonHover {
|
||
|
|
.dijitButtonNode,
|
||
|
|
.dijitDownArrowButton {
|
||
|
|
}
|
||
|
|
|
||
|
|
.dijitButtonNodeHover,
|
||
|
|
.dijitDownArrowButtonHover {
|
||
|
|
}
|
||
|
|
}
|
||
|
|
*/
|
||
|
|
/* Active */
|
||
|
|
/* Toggle button checked status */
|
||
|
|
}
|
||
|
|
.flat .dijitToolbar label {
|
||
|
|
padding: 8px;
|
||
|
|
}
|
||
|
|
.flat .dijitToolbar .dijitToggleButton,
|
||
|
|
.flat .dijitToolbar .dijitButton,
|
||
|
|
.flat .dijitToolbar .dijitDropDownButton,
|
||
|
|
.flat .dijitToolbar .dijitComboButton {
|
||
|
|
margin-right: 4px;
|
||
|
|
}
|
||
|
|
.flat .dijitToolbar .dijitButton .dijitButtonNode,
|
||
|
|
.flat .dijitToolbar .dijitDropDownButton .dijitButtonNode,
|
||
|
|
.flat .dijitToolbar .dijitComboButton .dijitButtonNode,
|
||
|
|
.flat .dijitToolbar .dijitToggleButton .dijitButtonNode,
|
||
|
|
.flat .dijitToolbar .dijitComboBox .dijitButtonNode {
|
||
|
|
border-color: transparent;
|
||
|
|
padding: 4px;
|
||
|
|
background-color: transparent;
|
||
|
|
border-radius: 4px;
|
||
|
|
-webkit-transition-property: background-color;
|
||
|
|
-moz-transition-property: background-color;
|
||
|
|
-o-transition-property: background-color;
|
||
|
|
-ms-transition-property: background-color;
|
||
|
|
transition-property: background-color;
|
||
|
|
-webkit-transition-duration: 0.3s;
|
||
|
|
-moz-transition-duration: 0.3s;
|
||
|
|
-o-transition-duration: 0.3s;
|
||
|
|
-ms-transition-duration: 0.3s;
|
||
|
|
transition-duration: 0.3s;
|
||
|
|
}
|
||
|
|
.flat .dijitToolbar .dijitComboButton .dijitStretch {
|
||
|
|
/* no rounded border on side adjacent to arrow */
|
||
|
|
border-radius: 4px 0 0 4px;
|
||
|
|
}
|
||
|
|
.flat .dijitToolbar .dijitComboButton .dijitArrowButton {
|
||
|
|
/* no rounded border on side adjacent to button */
|
||
|
|
border-radius: 0 4px 4px 0;
|
||
|
|
}
|
||
|
|
.flat .dijitToolbar .dijitComboBox .dijitButtonNode {
|
||
|
|
padding: 0 8px;
|
||
|
|
}
|
||
|
|
.flat .dijitToolbar .dijitComboBox .dijitInputInner {
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
.flat .dijitToolbar .dijitDropDownButton .dijitArrowButtonInner {
|
||
|
|
margin-left: 4px;
|
||
|
|
}
|
||
|
|
.flat .dijitToolbar .dijitButtonHover .dijitButtonNode,
|
||
|
|
.flat .dijitToolbar .dijitDropDownButtonHover .dijitButtonNode,
|
||
|
|
.flat .dijitToolbar .dijitToggleButtonHover .dijitButtonNode,
|
||
|
|
.flat .dijitToolbar .dijitComboButtonHover .dijitButtonNode {
|
||
|
|
-webkit-transition: all 0.1s;
|
||
|
|
-moz-transition: all 0.1s;
|
||
|
|
-o-transition: all 0.1s;
|
||
|
|
-ms-transition: all 0.1s;
|
||
|
|
transition: all 0.1s;
|
||
|
|
background: #f2f2f2;
|
||
|
|
border-color: #d9d9d9;
|
||
|
|
border: 1px solid #ccc;
|
||
|
|
}
|
||
|
|
.flat .dijitToolbar .dijitButtonActive .dijitButtonNode,
|
||
|
|
.flat .dijitToolbar .dijitDropDownButtonActive .dijitButtonNode,
|
||
|
|
.flat .dijitToolbar .dijitToggleButtonActive .dijitButtonNode {
|
||
|
|
-webkit-transition: none;
|
||
|
|
-moz-transition: none;
|
||
|
|
-o-transition: none;
|
||
|
|
-ms-transition: none;
|
||
|
|
transition: none;
|
||
|
|
outline: none;
|
||
|
|
-webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.05);
|
||
|
|
box-shadow: inset 0 3px 5px rgba(0,0,0,0.05);
|
||
|
|
background: #e0e0e0;
|
||
|
|
border-color: #b3b3b3;
|
||
|
|
border: 1px solid #ccc;
|
||
|
|
}
|
||
|
|
.flat .dijitToolbar .dijitToggleButtonChecked .dijitButtonNode {
|
||
|
|
-webkit-transition: none;
|
||
|
|
-moz-transition: none;
|
||
|
|
-o-transition: none;
|
||
|
|
-ms-transition: none;
|
||
|
|
transition: none;
|
||
|
|
outline: none;
|
||
|
|
-webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.05);
|
||
|
|
box-shadow: inset 0 3px 5px rgba(0,0,0,0.05);
|
||
|
|
background: #e0e0e0;
|
||
|
|
border-color: #b3b3b3;
|
||
|
|
border: 1px solid #ccc;
|
||
|
|
}
|
||
|
|
.flat .dijitToolbarSeparator {
|
||
|
|
width: 1px;
|
||
|
|
height: 20px;
|
||
|
|
background-color: #ccc;
|
||
|
|
padding: 0;
|
||
|
|
margin: 0 4px;
|
||
|
|
}
|
||
|
|
.flat .dijitDisabled .dijitToolbar {
|
||
|
|
background-color: #f5f5f5;
|
||
|
|
border-bottom: 1px solid #ccc;
|
||
|
|
}
|