diff options
author | Richard Beales <[email protected]> | 2013-03-18 07:32:01 +0000 |
---|---|---|
committer | Richard Beales <[email protected]> | 2013-03-18 07:32:01 +0000 |
commit | 7c97d17aaf373339a8bcd917ad59ca6018148f0d (patch) | |
tree | 5a3c04f0f9529be392c1263d3feb75806eb43797 /lib/dijit/themes/claro/form/Button.less | |
parent | 70db7424e7068701e60cc5bcdfe8f858be508179 (diff) | |
parent | c670a80ddd9b03bd4ea6d940a9ed682fd26248d7 (diff) |
Merge remote-tracking branch 'upstream/master'
Diffstat (limited to 'lib/dijit/themes/claro/form/Button.less')
-rw-r--r-- | lib/dijit/themes/claro/form/Button.less | 38 |
1 files changed, 23 insertions, 15 deletions
diff --git a/lib/dijit/themes/claro/form/Button.less b/lib/dijit/themes/claro/form/Button.less index 208e4de52..5d5953237 100644 --- a/lib/dijit/themes/claro/form/Button.less +++ b/lib/dijit/themes/claro/form/Button.less @@ -40,16 +40,22 @@ .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; - background-image: url("../@{image-form-button}"); - background-position: center top; - background-repeat: repeat-x; - background-color: @button-background-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? */ @@ -101,7 +107,7 @@ .claro .dijitComboButton .dijitButtonNodeHover, .claro .dijitComboButton .dijitDownArrowButtonHover, .claro .dijitToggleButtonHover .dijitButtonNode { - background-color: @button-hovered-background-color; + background-color: desaturate(darken(@button-hovered-background-color, 10), 20); color:@text-color; .transition-duration(.2s); } @@ -111,9 +117,9 @@ .claro .dijitDropDownButtonActive .dijitButtonNode, .claro .dijitComboButtonActive .dijitButtonNode, .claro .dijitToggleButtonActive .dijitButtonNode, -.claro .dijitStackController .dijitToggleButtonChecked .dijitButtonNode { - background-color: @button-pressed-background-color; - .box-shadow(0 0 0 rgba(0,0,0,0)); +.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); } @@ -129,13 +135,19 @@ .claro .dijitButtonDisabled .dijitButtonNode, .claro .dijitDropDownButtonDisabled .dijitButtonNode, .claro .dijitComboButtonDisabled .dijitButtonNode, -.claro .dijitToggleButtonDisabled .dijitButtonNode { - background-position:0 -149px; +.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; } @@ -144,10 +156,6 @@ border-collapse: separate; /* override dijit.css so that ComboBox rounded corners work */ } -.dj_ie6 .claro .dijitButtonNode { - background-image: none; -} - .claro .dijitComboButton .dijitStretch { .border-radius(@button-border-radius 0 0 @button-border-radius); } |