diff options
Diffstat (limited to 'lib/dijit/themes/claro/form/Button.css')
| -rw-r--r-- | lib/dijit/themes/claro/form/Button.css | 185 |
1 files changed, 110 insertions, 75 deletions
diff --git a/lib/dijit/themes/claro/form/Button.css b/lib/dijit/themes/claro/form/Button.css index a2a15c0cc..e01a1d313 100644 --- a/lib/dijit/themes/claro/form/Button.css +++ b/lib/dijit/themes/claro/form/Button.css @@ -1,125 +1,160 @@ - +/* 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 + */ .claro .dijitButtonNode { - - -webkit-transition-property:background-color; - -webkit-transition-duration:.3s; + /* rules for dijit.form.*Button widgets and arrow nodes on ComboBox, Spinner etc. */ + + -webkit-transition-property: background-color; + -moz-transition-property: background-color; + transition-property: background-color; + -webkit-transition-duration: 0.3s; + -moz-transition-duration: 0.3s; + transition-duration: 0.3s; } .claro .dijitButton .dijitButtonNode, .claro .dijitDropDownButton .dijitButtonNode, .claro .dijitComboButton .dijitButtonNode, .claro .dijitToggleButton .dijitButtonNode { - - border: 1px solid #769dc0; - padding:2px 4px 4px 4px; - background-image: url("images/button.png"); - background-position: center top; - background-repeat: repeat-x; - background-color: #e4f2ff; - border-radius: 4px; - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - box-shadow:0px 1px 1px rgba(0,0,0,0.15); - -webkit-box-shadow:0px 1px 1px rgba(0,0,0,0.15); - -moz-box-shadow: 0px 1px 1px rgba(0,0,0,0.15); + /* rules for the dijit.form.*Button widgets (see also ComboButton section below) */ + + border: 1px solid #769dc0; + padding: 2px 4px 4px 4px; + background-image: url("images/button.png"); + background-position: center top; + background-repeat: repeat-x; + background-color: #e9f4fe; + -moz-border-radius: 4px; + border-radius: 4px; + -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); + -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); } .claro .dijitComboButton .dijitArrowButton { - border-left-width: 0px; - padding: 4px 2px 4px 2px; + 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("images/buttonArrows.png"); - background-repeat:no-repeat; - background-position:-51px 53%; + width: 15px; + height: 15px; + margin: 0 auto; + background-image: url("images/buttonArrows.png"); + background-repeat: no-repeat; + background-position: -51px 53%; } .claro .dijitLeftArrowButton .dijitArrowButtonInner { - background-position: -77px 53%; + background-position: -77px 53%; } .claro .dijitRightArrowButton .dijitArrowButtonInner { - background-position: -26px 53%; + background-position: -26px 53%; } .claro .dijitUpArrowButton .dijitArrowButtonInner { - background-position: 0px 53%; + background-position: 0 53%; } .claro .dijitDisabled .dijitArrowButtonInner { - background-position: -151px 53%; + background-position: -151px 53%; } .claro .dijitDisabled .dijitLeftArrowButton .dijitArrowButtonInner { - background-position: -177px 53%; + background-position: -177px 53%; } .claro .dijitDisabled .dijitRightArrowButton .dijitArrowButtonInner { - background-position: -126px 53%; + background-position: -126px 53%; } .claro .dijitDisabled .dijitUpArrowButton .dijitArrowButtonInner { - background-position: -100px 53%; + background-position: -100px 53%; } .claro .dijitButtonText { - padding: 0 0.3em; - text-align: center; -} -.claro .dijitDisabled .dijitButtonText { - color: #7F7F7F; + padding: 0 0.3em; + text-align: center; } +/* hover status */ .claro .dijitButtonHover .dijitButtonNode, .claro .dijitDropDownButtonHover .dijitButtonNode, -.claro .dijitComboButton .dijitButtonNodeHover, +.claro .dijitComboButton .dijitButtonNodeHover, .claro .dijitComboButton .dijitDownArrowButtonHover, .claro .dijitToggleButtonHover .dijitButtonNode { - background-color: #afd9ff; - color:#000; - -webkit-transition-duration:.2s; -} -.claro .dijitButtonActive .dijitButtonNode, + background-color: #abd6ff; + color: #000000; + -webkit-transition-duration: 0.2s; + -moz-transition-duration: 0.2s; + transition-duration: 0.2s; +} +/* checked status */ +.claro .dijitButtonActive .dijitButtonNode, .claro .dijitDropDownButtonActive .dijitButtonNode, .claro .dijitComboButtonActive .dijitButtonNode, .claro .dijitToggleButtonActive .dijitButtonNode { - background-color: #99cfff; - box-shadow:0px 0px 0px rgba(0,0,0,0); - -webkit-box-shadow:0px 0px 0px rgba(0,0,0,0); - -moz-box-shadow: 0px 0px 0px rgba(0,0,0,0); - -webkit-transition-duration:.1s; -} + background-color: #abd6ff; + -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0); + -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0); + box-shadow: 0 0 0 rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.1s; + -moz-transition-duration: 0.1s; + transition-duration: 0.1s; +} +/* disabled status */ .claro .dijitButtonDisabled, .claro .dijitDropDownButtonDisabled, .claro .dijitComboButtonDisabled, .claro .dijitToggleButtonDisabled { - background-image: none; - outline: none; + background-image: none; + outline: none; } .claro .dijitButtonDisabled .dijitButtonNode, .claro .dijitDropDownButtonDisabled .dijitButtonNode, .claro .dijitComboButtonDisabled .dijitButtonNode, -.claro .dijitToggleButtonDisabled .dijitButtonNode { - background-position:0px -149px; - background-color: #e3e3e3; - border: solid 1px #c9c9c9; - color: #696969; - box-shadow:0px 0px 0px rgba(0,0,0,0); - -webkit-box-shadow:0px 0px 0px rgba(0,0,0,0); - -moz-box-shadow: 0px 0px 0px rgba(0,0,0,0); -} -.claro .dijitComboButtonDisabled .dijitArrowButton{ - border-left-width: 0px; -} +.claro .dijitToggleButtonDisabled .dijitButtonNode { + background-position: 0 -149px; + background-color: #efefef; + border: solid 1px #d3d3d3; + color: #818181; + -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0); + -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0); + box-shadow: 0 0 0 rgba(0, 0, 0, 0); +} +.claro .dijitComboButtonDisabled .dijitArrowButton { + border-left-width: 0; +} +/* for ComboButton */ .claro table.dijitComboButton { - border-collapse: separate; + border-collapse: separate; + /* override dijit.css so that ComboBox rounded corners work */ + } .dj_ie6 .claro .dijitButtonNode { - background-image: none; + background-image: none; } .claro .dijitComboButton .dijitStretch { - -moz-border-radius: 4px 0px 0px 4px; - -webkit-border-top-left-radius: 4px; - -webkit-border-top-right-radius: 0px; - -webkit-border-bottom-right-radius: 0px; - -webkit-border-bottom-left-radius: 4px; + -moz-border-radius: 4px 0 0 4px; + border-radius: 4px 0 0 4px; } .claro .dijitComboButton .dijitArrowButton { - -moz-border-radius: 0px 4px 4px 0px; - -webkit-border-top-left-radius: 0px; - -webkit-border-top-right-radius: 4px; - -webkit-border-bottom-right-radius: 4px; - -webkit-border-bottom-left-radius: 0px; + -moz-border-radius: 0 4px 4px 0; + border-radius: 0 4px 4px 0; } |