tonyair/silverstripe-framework
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-framework synced 2024-10-22 14:05:37 +02:00
Code Issues Projects Releases Wiki Activity

MINOR Fixing button whitespace gaps and "interrupted" buttonsets

Browse Source
This commit is contained in:
Ingo Schommer 2012-01-23 10:23:49 +01:00
parent 0444d4ea16
commit 8ba585be27
3 changed files with 13 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
admin/css/screen.css
View File

@ -122,7 +122,7 @@ form.stacked .field .middleColumn, .field.stacked .middleColumn { margin-left: 0
.cms input.loading, .cms input.ui-state-default.loading, .cms .ui-widget-content input.ui-state-default.loading, .cms .ui-widget-header input.ui-state-default.loading { padding-left: 24px; color: #525252; background: #eeeded url(../../images/network-save.gif) no-repeat 4px center; border-color: #d5d3d3; cursor: default; text-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; } .cms input.loading, .cms input.ui-state-default.loading, .cms .ui-widget-content input.ui-state-default.loading, .cms .ui-widget-header input.ui-state-default.loading { padding-left: 24px; color: #525252; background: #eeeded url(../../images/network-save.gif) no-repeat 4px center; border-color: #d5d3d3; cursor: default; text-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; }
.cms .ss-ui-button { /* all buttons */ padding: 5px 12px; font-weight: bold; text-decoration: none; margin: 0; line-height: 16px; color: #393939; background-color: #e6e6e6; border: 1px solid #c0c0c2; border-bottom: 1px solid #a6a6a9; cursor: pointer; text-shadow: white 0 1px 1px; background: #e6e6e6; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: -webkit-linear-gradient(#ffffff, #d9d9d9); background: -moz-linear-gradient(#ffffff, #d9d9d9); background: -o-linear-gradient(#ffffff, #d9d9d9); background: -ms-linear-gradient(#ffffff, #d9d9d9); background: linear-gradient(#ffffff, #d9d9d9); /* constructive */ /* destructive */ /* generic action buttons */ } .cms .ss-ui-button { /* all buttons */ padding: 5px 12px; font-weight: bold; text-decoration: none; margin: 0; line-height: 16px; color: #393939; background-color: #e6e6e6; border: 1px solid #c0c0c2; border-bottom: 1px solid #a6a6a9; cursor: pointer; text-shadow: white 0 1px 1px; background: #e6e6e6; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: -webkit-linear-gradient(#ffffff, #d9d9d9); background: -moz-linear-gradient(#ffffff, #d9d9d9); background: -o-linear-gradient(#ffffff, #d9d9d9); background: -ms-linear-gradient(#ffffff, #d9d9d9); background: linear-gradient(#ffffff, #d9d9d9); /* constructive */ /* destructive */ /* generic action buttons */ }
.cms .ss-ui-button.buttonset { margin: 0 -2px; } .cms .ss-ui-button.buttonset { margin: 0 -1px; }
.cms .ss-ui-button.ui-state-hover, .cms .ss-ui-button:hover { background: white; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: -webkit-linear-gradient(#ffffff, #e6e6e6); background: -moz-linear-gradient(#ffffff, #e6e6e6); background: -o-linear-gradient(#ffffff, #e6e6e6); background: -ms-linear-gradient(#ffffff, #e6e6e6); background: linear-gradient(#ffffff, #e6e6e6); -moz-box-shadow: 0 0 5px #b3b3b3; -webkit-box-shadow: 0 0 5px #b3b3b3; -o-box-shadow: 0 0 5px #b3b3b3; box-shadow: 0 0 5px #b3b3b3; } .cms .ss-ui-button.ui-state-hover, .cms .ss-ui-button:hover { background: white; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: -webkit-linear-gradient(#ffffff, #e6e6e6); background: -moz-linear-gradient(#ffffff, #e6e6e6); background: -o-linear-gradient(#ffffff, #e6e6e6); background: -ms-linear-gradient(#ffffff, #e6e6e6); background: linear-gradient(#ffffff, #e6e6e6); -moz-box-shadow: 0 0 5px #b3b3b3; -webkit-box-shadow: 0 0 5px #b3b3b3; -o-box-shadow: 0 0 5px #b3b3b3; box-shadow: 0 0 5px #b3b3b3; }
.cms .ss-ui-button:active, .cms .ss-ui-button:focus, .cms .ss-ui-button.ui-state-active, .cms .ss-ui-button.ui-state-focus { border: 1px solid #b3b3b3; background: white no-repeat; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: -webkit-linear-gradient(#ffffff, #e6e6e6); background: -moz-linear-gradient(#ffffff, #e6e6e6); background: -o-linear-gradient(#ffffff, #e6e6e6); background: -ms-linear-gradient(#ffffff, #e6e6e6); background: linear-gradient(#ffffff, #e6e6e6); -moz-box-shadow: 0 0 5px #b3b3b3 inset; -webkit-box-shadow: 0 0 5px #b3b3b3 inset; -o-box-shadow: 0 0 5px #b3b3b3 inset; box-shadow: 0 0 5px #b3b3b3 inset; } .cms .ss-ui-button:active, .cms .ss-ui-button:focus, .cms .ss-ui-button.ui-state-active, .cms .ss-ui-button.ui-state-focus { border: 1px solid #b3b3b3; background: white no-repeat; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: -webkit-linear-gradient(#ffffff, #e6e6e6); background: -moz-linear-gradient(#ffffff, #e6e6e6); background: -o-linear-gradient(#ffffff, #e6e6e6); background: -ms-linear-gradient(#ffffff, #e6e6e6); background: linear-gradient(#ffffff, #e6e6e6); -moz-box-shadow: 0 0 5px #b3b3b3 inset; -webkit-box-shadow: 0 0 5px #b3b3b3 inset; -o-box-shadow: 0 0 5px #b3b3b3 inset; box-shadow: 0 0 5px #b3b3b3 inset; }
.cms .ss-ui-button.ss-ui-action-constructive { background-image: none; padding-left: 24px; padding-right: 6px; font-weight: bold; margin-left: 8px; color: white; border-color: #78a127; border-bottom-color: #59781d; background: #669933 url('../images/btn_icons-sb7da7f8cce.png') 5px 5px no-repeat; background: url('../images/btn_icons-sb7da7f8cce.png') 5px 5px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #80bf40), color-stop(100%, #59862d)); background: url('../images/btn_icons-sb7da7f8cce.png') 5px 5px no-repeat, -webkit-linear-gradient(#80bf40, #59862d); background: url('../images/btn_icons-sb7da7f8cce.png') 5px 5px no-repeat, -moz-linear-gradient(#80bf40, #59862d); background: url('../images/btn_icons-sb7da7f8cce.png') 5px 5px no-repeat, -o-linear-gradient(#80bf40, #59862d); background: url('../images/btn_icons-sb7da7f8cce.png') 5px 5px no-repeat, -ms-linear-gradient(#80bf40, #59862d); background: url('../images/btn_icons-sb7da7f8cce.png') 5px 5px no-repeat, linear-gradient(#80bf40, #59862d); text-shadow: #4d7326 0 1px 1px; } .cms .ss-ui-button.ss-ui-action-constructive { background-image: none; padding-left: 24px; padding-right: 6px; font-weight: bold; margin-left: 8px; color: white; border-color: #78a127; border-bottom-color: #59781d; background: #669933 url('../images/btn_icons-sb7da7f8cce.png') 5px 5px no-repeat; background: url('../images/btn_icons-sb7da7f8cce.png') 5px 5px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #80bf40), color-stop(100%, #59862d)); background: url('../images/btn_icons-sb7da7f8cce.png') 5px 5px no-repeat, -webkit-linear-gradient(#80bf40, #59862d); background: url('../images/btn_icons-sb7da7f8cce.png') 5px 5px no-repeat, -moz-linear-gradient(#80bf40, #59862d); background: url('../images/btn_icons-sb7da7f8cce.png') 5px 5px no-repeat, -o-linear-gradient(#80bf40, #59862d); background: url('../images/btn_icons-sb7da7f8cce.png') 5px 5px no-repeat, -ms-linear-gradient(#80bf40, #59862d); background: url('../images/btn_icons-sb7da7f8cce.png') 5px 5px no-repeat, linear-gradient(#80bf40, #59862d); text-shadow: #4d7326 0 1px 1px; }

13
admin/javascript/LeftAndMain.js
View File

@ -452,7 +452,12 @@
redraw: function() { redraw: function() {
// Needs to be in the same execution frame as the buttonset logic below, // Needs to be in the same execution frame as the buttonset logic below,
// to avoid re-adding rounded corners (default button styling) after removing them // to avoid re-adding rounded corners (default button styling) after removing them
this.find('.ss-ui-button').button() this.find('.ss-ui-button').button();
// Remove whitespace to avoid gaps with inline elements
this.contents().filter(function() {
return (this.nodeType == 3 && !/\S/.test(this.nodeValue));
}).remove();
// Emulate jQuery UI buttonsets based on HTML5 data attributes // Emulate jQuery UI buttonsets based on HTML5 data attributes
var sets = [], self = this; var sets = [], self = this;
@ -461,7 +466,11 @@
if($.inArray(cl, sets) == -1) sets.push(cl); if($.inArray(cl, sets) == -1) sets.push(cl);
}); });
$.each(sets, function(i, set) { $.each(sets, function(i, set) {
self.find('.action[buttonset="' + set + '"]').removeClass('ui-corner-all').addClass('buttonset') // Gather buttons in set until no siblings are matched.
// This avoids "split" sets where a new button without a buttonset is inserted somewhere in the middle.
self.find('.action[buttonset="' + set + '"]:first')
.nextUntil('.action[buttonset!="' + set + '"]').andSelf()
.removeClass('ui-corner-all').addClass('buttonset')
.first().addClass('ui-corner-left').end() .first().addClass('ui-corner-left').end()
.last().addClass('ui-corner-right'); .last().addClass('ui-corner-right');
}); });

4
admin/scss/_forms.scss
View File

@ -313,11 +313,9 @@ form.stacked .field, .field.stacked {
.ss-ui-button { .ss-ui-button {
&.buttonset { &.buttonset {
margin: 0 -2px; margin: 0 -1px; // hack to avoid double borders
} }
/* all buttons */ /* all buttons */
padding: ($grid-vertical - 3) ($grid-horizontal + 4); padding: ($grid-vertical - 3) ($grid-horizontal + 4);
font-weight: bold; font-weight: bold;