ENHANCEMENT Using native jQuery UI buttons and icon styling for a less coupled implementation (e.g. assuming that a "constructive" button always has a specific icon, or one at all). All CMS UI buttons switched to use <button> markup, which allows for inline icons and correctly aligned multi-line button labels.

admin/code/LeftAndMain.php

@@ -863,15 +863,23 @@ class LeftAndMain extends Controller {
 				// add default actions if none are defined
 				if(!$actions || !$actions->Count()) {
 					if($record->hasMethod('canDelete') && $record->canDelete()) {
-						$actions->push($deleteAction = new FormAction('delete',_t('ModelAdmin.DELETE','Delete')));
-						$deleteAction->addExtraClass('ss-ui-action-destructive');
+						$actions->push(
+							FormAction::create('delete',_t('ModelAdmin.DELETE','Delete'))
+								->addExtraClass('ss-ui-action-destructive')
+						);
 					}
 					if($record->hasMethod('canEdit') && $record->canEdit()) {
-						$actions->push($saveAction = new FormAction('save',_t('CMSMain.SAVE','Save')));
-						$saveAction->addExtraClass('ss-ui-action-constructive');
+						$actions->push(
+							FormAction::create('save',_t('CMSMain.SAVE','Save'))
+								->addExtraClass('ss-ui-action-constructive')->setAttribute('data-icon', 'accept')
+						);
 					}
 				}
 			}
+
+			// Use <button> to allow full jQuery UI styling
+			$actionsFlattened = $actions->dataFields();
+			if($actionsFlattened) foreach($actionsFlattened as $action) $action->setUseButtonTag(true);
 			
 			$form = new Form($this, "EditForm", $fields, $actions);
 			$form->addExtraClass('cms-edit-form');
@@ -964,10 +972,10 @@ class LeftAndMain extends Controller {
 				new HiddenField('ParentID')
 			),
 			new FieldList(
-				$addAction = new FormAction('doAdd', _t('AssetAdmin_left.ss.GO','Go'))
+				FormAction::create('doAdd', _t('AssetAdmin_left.ss.GO','Go'))
+					->addExtraClass('ss-ui-action-constructive')->setAttribute('data-icon', 'accept')
 			)
 		);
-		$addAction->addExtraClass('ss-ui-action-constructive');
 		$form->addExtraClass('add-form');
 		
 		return $form;

admin/code/ModelAdmin.php

@@ -411,7 +411,7 @@ class ModelAdmin_CollectionController extends Controller {
 		$form->setFormMethod('get');
 		$form->setHTMLID("Form_SearchForm_" . $this->modelClass);
 		$form->disableSecurityToken();
-		$clearAction->useButtonTag = true;
+		$clearAction->setUseButtonTag(true);
 		$clearAction->addExtraClass('ss-ui-action-minor');
 
 		return $form;
@@ -434,10 +434,12 @@ class ModelAdmin_CollectionController extends Controller {
 
 		$form = new Form($this, "CreateForm",
 						new FieldList(),
-						new FieldList($createButton = new FormAction('add', $buttonLabel)),
+						new FieldList(
+							$createButton = FormAction::create('add', $buttonLabel)
+								->addExtraClass('ss-ui-action-constructive')->setAttribute('data-icon', 'accept')
+						),
 						$validator = new RequiredFields()
 				);
-		$createButton->addExtraClass('ss-ui-action-constructive');
 		$createButton->dontEscape = true;
 		$validator->setJavascriptValidationHandler('none');
 		$form->setHTMLID("Form_CreateForm_" . $this->modelClass);
@@ -839,7 +841,8 @@ class ModelAdmin_CollectionController extends Controller {
 			$validator->setJavascriptValidationHandler('none');
 			
 			$actions = new FieldList (
-				new FormAction("doCreate", _t('ModelAdmin.ADDBUTTON', "Add"))
+				FormAction::create("doCreate", _t('ModelAdmin.ADDBUTTON', "Add"))
+					->addExtraClass('ss-ui-action-constructive')->setAttribute('data-icon', 'accept')
 			);
 
 			$form = new Form($this, "AddForm", $fields, $actions, $validator);
@@ -951,8 +954,10 @@ class ModelAdmin_RecordController extends Controller {
 		$actions = $this->currentRecord->getCMSActions();
 		if($this->currentRecord->canEdit(Member::currentUser())){
 			if(!$actions->fieldByName('action_doSave') && !$actions->fieldByName('action_save')) {
-				$actions->push($saveAction = new FormAction("doSave", _t('ModelAdmin.SAVE', "Save")));
-				$saveAction->addExtraClass('ss-ui-action-constructive');
+				$actions->push(
+					FormAction::create("doSave", _t('ModelAdmin.SAVE', "Save"))
+						->addExtraClass('ss-ui-action-constructive')->setAttribute('data-icon', 'accept')
+				);
 			}
 		}else{
 			$fields = $fields->makeReadonly();
@@ -960,9 +965,11 @@ class ModelAdmin_RecordController extends Controller {
 		
 		if($this->currentRecord->canDelete(Member::currentUser())) {
 			if(!$actions->fieldByName('action_doDelete')) {
-				$actions->unshift($deleteAction = new FormAction('doDelete', _t('ModelAdmin.DELETE', 'Delete')));
+				$actions->unshift(
+					FormAction::create('doDelete', _t('ModelAdmin.DELETE', 'Delete'))
+						->addExtraClass('ss-ui-action-destructive')->setAttribute('data-icon', 'delete')
+				);
 			}
-			$deleteAction->addExtraClass('delete ss-ui-action-destructive');
 		}
 
 		$form = new Form($this, "EditForm", $fields, $actions, $validator);

admin/css/ie7.css

@@ -4,7 +4,7 @@ html { overflow: hidden; }
 
 .ss-ui-button.cms-page-add-button { float: left; }
 
-.ss-ui-button.cms-page-add-button.ui-state-hover, .cms .ss-ui-button.cms-page-add-button:hover { background: #80bf40 url("../images/btn_icons-saaa1989272.png") 5px -49px no-repeat; }
+.ss-ui-button.cms-page-add-button.ui-state-hover, .cms .ss-ui-button.cms-page-add-button:hover { background: #80bf40 url("../images/btn-icon-saaa1989272.png") 5px -49px no-repeat; }
 
 .cms-tree-view-modes div { float: left; }
 .cms-tree-view-modes span { float: left; padding-top: 5px; }
@@ -12,3 +12,5 @@ html { overflow: hidden; }
 .cms-content-toolbar { border-bottom: 1px solid #c9cdce; padding-bottom: 5px; }
 
 .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { background-image: none; }
+
+.jstree li a .ui-icon { text-indent: 0px !important; }

admin/css/ie8.css

@@ -5,6 +5,6 @@
 
 .cms-content-toolbar { border-bottom: 1px solid #c9cdce; }
 
-.ss-ui-button.cms-page-add-button.ui-state-hover, .cms .ss-ui-button.cms-page-add-button:hover { background: #80bf40 url("../images/btn_icons-saaa1989272.png") 5px -49px no-repeat; }
+.ss-ui-button.cms-page-add-button.ui-state-hover, .cms .ss-ui-button.cms-page-add-button:hover { background: #80bf40 url("../images/btn-icon-saaa1989272.png") 5px -49px no-repeat; }
 
 .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { background-image: none; }

admin/css/screen.css

@@ -30,9 +30,42 @@ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav,
 /** ---------------------------------------------------- Clear the properties of sub form fields.   Often needed for nested form fields and  ----------------------------------------------------- */
 /** ---------------------------------------------------- Double tone borders  http://daverupert.com/2011/06/two-tone-borders-with-css3/ ----------------------------------------------------- */
 /** ----------------------------- Sprite images ----------------------------- */
-/** Helper SCSS file for generating sprites for the interface.  S */
+/** Helper SCSS file for generating sprites for the interface. */
+.btn-icon-sprite, .ui-state-default .btn-icon-accept, .ui-state-default .btn-icon-accept_disabled, .ui-state-default .btn-icon-add, .ui-state-default .btn-icon-add_disabled, .ui-state-default .btn-icon-addpage, .ui-state-default .btn-icon-addpage_disabled, .ui-state-default .btn-icon-arrow-circle-135-left, .ui-state-default .btn-icon-cross-circle, .ui-state-default .btn-icon-cross-circle_disabled, .ui-state-default .btn-icon-decline, .ui-state-default .btn-icon-decline_disabled, .ui-state-default .btn-icon-drive-upload, .ui-state-default .btn-icon-drive-upload_disabled, .ui-state-default .btn-icon-magnifier, .ui-state-default .btn-icon-minus-circle, .ui-state-default .btn-icon-minus-circle_disabled, .ui-state-default .btn-icon-navigation, .ui-state-default .btn-icon-navigation_disabled, .ui-state-default .btn-icon-network-cloud, .ui-state-default .btn-icon-network-cloud_disabled, .ui-state-default .btn-icon-pencil, .ui-state-default .btn-icon-pencil_disabled, .ui-state-default .btn-icon-plug-disconnect-prohibition, .ui-state-default .btn-icon-plug-disconnect-prohibition_disabled, .ui-state-default .btn-icon-preview, .ui-state-default .btn-icon-preview_disabled, .ui-state-default .btn-icon-settings, .ui-state-default .btn-icon-settings_disabled, .ui-state-default .btn-icon-unpublish, .ui-state-default .btn-icon-unpublish_disabled { background: url('../images/btn-icon-s1c742dc591.png') no-repeat; }
+
+.ui-state-default .btn-icon-accept { background-position: 0 0; }
+.ui-state-default .btn-icon-accept_disabled { background-position: 0 -17px; }
+.ui-state-default .btn-icon-add { background-position: 0 -34px; }
+.ui-state-default .btn-icon-add_disabled { background-position: 0 -52px; }
+.ui-state-default .btn-icon-addpage { background-position: 0 -70px; }
+.ui-state-default .btn-icon-addpage_disabled { background-position: 0 -88px; }
+.ui-state-default .btn-icon-arrow-circle-135-left { background-position: 0 -104px; }
+.ui-state-default .btn-icon-cross-circle { background-position: 0 -120px; }
+.ui-state-default .btn-icon-cross-circle_disabled { background-position: 0 -136px; }
+.ui-state-default .btn-icon-decline { background-position: 0 -152px; }
+.ui-state-default .btn-icon-decline_disabled { background-position: 0 -169px; }
+.ui-state-default .btn-icon-drive-upload { background-position: 0 -186px; }
+.ui-state-default .btn-icon-drive-upload_disabled { background-position: 0 -202px; }
+.ui-state-default .btn-icon-magnifier { background-position: 0 -218px; }
+.ui-state-default .btn-icon-minus-circle { background-position: 0 -234px; }
+.ui-state-default .btn-icon-minus-circle_disabled { background-position: 0 -250px; }
+.ui-state-default .btn-icon-navigation { background-position: 0 -266px; }
+.ui-state-default .btn-icon-navigation_disabled { background-position: 0 -282px; }
+.ui-state-default .btn-icon-network-cloud { background-position: 0 -298px; }
+.ui-state-default .btn-icon-network-cloud_disabled { background-position: 0 -314px; }
+.ui-state-default .btn-icon-pencil { background-position: 0 -330px; }
+.ui-state-default .btn-icon-pencil_disabled { background-position: 0 -346px; }
+.ui-state-default .btn-icon-plug-disconnect-prohibition { background-position: 0 -362px; }
+.ui-state-default .btn-icon-plug-disconnect-prohibition_disabled { background-position: 0 -378px; }
+.ui-state-default .btn-icon-preview { background-position: 0 -394px; }
+.ui-state-default .btn-icon-preview_disabled { background-position: 0 -411px; }
+.ui-state-default .btn-icon-settings { background-position: 0 -428px; }
+.ui-state-default .btn-icon-settings_disabled { background-position: 0 -444px; }
+.ui-state-default .btn-icon-unpublish { background-position: 0 -460px; }
+.ui-state-default .btn-icon-unpublish_disabled { background-position: 0 -478px; }
+
 .icon { text-indent: -9999px; border: none; outline: none; }
-.icon.icon-24 { width: 24px; height: 24px; background: url('../images/menu_icons/24x24-s0cb1fe1c77.png'); }
+.icon.icon-24 { width: 24px; height: 24px; background: url('../images/menu-icons/24x24-s546fcae8fd.png'); }
 .icon.icon-24.icon-assetadmin { background-position: 0 -192px; }
 .icon.icon-24.icon-cmsmain { background-position: 0 -168px; }
 .icon.icon-24.icon-cmspagescontroller { background-position: 0 -144px; }
@@ -41,7 +74,7 @@ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav,
 .icon.icon-24.icon-reportadmin { background-position: 0 -216px; }
 .icon.icon-24.icon-commentadmin { background-position: 0 0; }
 .icon.icon-24.icon-help { background-position: 0 -120px; }
-.icon.icon-16 { width: 16px; height: 16px; background: url('../images/menu_icons/16x16-s2ac647f5ef.png'); }
+.icon.icon-16 { width: 16px; height: 16px; background: url('../images/menu-icons/16x16-s170d9d69bb.png'); }
 .icon.icon-16.icon-assetadmin { background-position: 0 -128px; }
 .icon.icon-16.icon-cmsmain { background-position: 0 -112px; }
 .icon.icon-16.icon-cmspagescontroller { background-position: 0 -96px; }
@@ -74,14 +107,13 @@ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav,
 .cms .ui-widget-header .ui-dialog-title { padding: 6px 0; text-shadow: #ced7dc 1px 1px 0; }
 .cms .ui-widget-header a.ui-dialog-titlebar-close { position: absolute; top: -8px; right: -15px; width: 30px; height: 30px; z-index: 100000; }
 .cms .ui-widget-header a.ui-state-hover { border-color: transparent; background: transparent; }
-.cms .ui-widget-header a.ui-state-hover .ui-icon-closethick { background: url('../images/sprites_32x32-s98eda4974b.png') 0 0 no-repeat; }
-.cms .ui-widget-header .ui-icon-closethick { background: url('../images/sprites_32x32-s98eda4974b.png') 0 -40px no-repeat; width: 30px; height: 30px; }
+.cms .ui-widget-header a.ui-state-hover .ui-icon-closethick { background: url('../images/sprites-32x32-s5fb04c068a.png') 0 0 no-repeat; }
+.cms .ui-widget-header .ui-icon-closethick { background: url('../images/sprites-32x32-s5fb04c068a.png') 0 -40px no-repeat; width: 30px; height: 30px; }
 .cms .ui-state-hover { cursor: pointer; }
 .cms .ui-widget input, .cms .ui-widget select, .cms .ui-widget textarea, .cms .ui-widget button { color: #444444; font-size: 12px; font-family: Arial, sans-serif; }
 
 /** This file defines common styles for form elements used throughout the CMS interface. It is an addition to the base styles defined in sapphire/css/Form.css.  @package sapphire @subpackage admin */
 /** ---------------------------------------------------- Basic form fields ---------------------------------------------------- */
-/* CMS action button sprite mix-in (used for all the buttons in the bottom row */
 form.nostyle .field { padding: 0; border: 0; }
 form.nostyle label { float: none; width: auto; }
 form.nostyle .middleColumn { margin-left: 0; }
@@ -120,43 +152,22 @@ form.small .field input.text, form.small .field textarea, form.small .field sele
 .field input.hasDatepicker { width: 50%; max-width: 96px; }
 
 /** ---------------------------------------------------- Buttons ---------------------------------------------------- */
-.Actions { min-height: 30px; }
-.Actions > div { overflow: auto; }
-
-.cms-preview-toggle-link { display: block; float: right; font-size: 12px; text-decoration: none; }
-.cms-preview-toggle-link span.ui-button-text { padding: 0; }
-
+.cms .Actions > *, .cms .cms-actions-row > * { display: block; float: left; margin-right: 8px; }
+.cms .Actions > *:last-child, .cms .cms-actions-row > *:last-child { margin-right: 0; }
+.cms .Actions { min-height: 30px; }
+.cms .Actions > div { overflow: auto; }
 .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 { font-weight: bold; text-decoration: none; line-height: 16px; color: #393939; border: 1px solid #c0c0c2; border-bottom: 1px solid #a6a6a9; cursor: pointer; text-shadow: white 0 1px 1px; background-color: #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 */ }
 .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: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-saaa1989272.png') 5px 5px no-repeat; background: url('../images/btn_icons-saaa1989272.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-saaa1989272.png') 5px 5px no-repeat, -webkit-linear-gradient(#80bf40, #59862d); background: url('../images/btn_icons-saaa1989272.png') 5px 5px no-repeat, -moz-linear-gradient(#80bf40, #59862d); background: url('../images/btn_icons-saaa1989272.png') 5px 5px no-repeat, -o-linear-gradient(#80bf40, #59862d); background: url('../images/btn_icons-saaa1989272.png') 5px 5px no-repeat, -ms-linear-gradient(#80bf40, #59862d); background: url('../images/btn_icons-saaa1989272.png') 5px 5px no-repeat, linear-gradient(#80bf40, #59862d); text-shadow: #4d7326 0 1px 1px; }
-.cms .ss-ui-button.ss-ui-action-constructive.ui-state-hover, .cms .ss-ui-button.ss-ui-action-constructive:hover { border-color: #59781d; background: #80bf40 url('../images/btn_icons-saaa1989272.png') 6px 6px no-repeat; background: url('../images/btn_icons-saaa1989272.png') 5px 5px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #8cc653), color-stop(100%, #669933)); background: url('../images/btn_icons-saaa1989272.png') 5px 5px no-repeat, -webkit-linear-gradient(#8cc653, #669933); background: url('../images/btn_icons-saaa1989272.png') 5px 5px no-repeat, -moz-linear-gradient(#8cc653, #669933); background: url('../images/btn_icons-saaa1989272.png') 5px 5px no-repeat, -o-linear-gradient(#8cc653, #669933); background: url('../images/btn_icons-saaa1989272.png') 5px 5px no-repeat, -ms-linear-gradient(#8cc653, #669933); background: url('../images/btn_icons-saaa1989272.png') 5px 5px no-repeat, linear-gradient(#8cc653, #669933); }
-.cms .ss-ui-button.ss-ui-action-constructive:active, .cms .ss-ui-button.ss-ui-action-constructive:focus, .cms .ss-ui-button.ss-ui-action-constructive.ui-state-active, .cms .ss-ui-button.ss-ui-action-constructive.ui-state-focus { background: #619130 url('../images/btn_icons-saaa1989272.png') 5px 5px no-repeat; -moz-box-shadow: inset 0 1px 3px #17181a, 0 1px 0 rgba(255, 255, 255, 0.6); -webkit-box-shadow: inset 0 1px 3px #17181a, 0 1px 0 rgba(255, 255, 255, 0.6); -o-box-shadow: inset 0 1px 3px #17181a, 0 1px 0 rgba(255, 255, 255, 0.6); box-shadow: inset 0 1px 3px #17181a, 0 1px 0 rgba(255, 255, 255, 0.6); }
-.cms .ss-ui-button.cms-page-add-button { 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-saaa1989272.png') 5px -49px no-repeat; background: url('../images/btn_icons-saaa1989272.png') 5px -49px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #80bf40), color-stop(100%, #59862d)); background: url('../images/btn_icons-saaa1989272.png') 5px -49px no-repeat, -webkit-linear-gradient(#80bf40, #59862d); background: url('../images/btn_icons-saaa1989272.png') 5px -49px no-repeat, -moz-linear-gradient(#80bf40, #59862d); background: url('../images/btn_icons-saaa1989272.png') 5px -49px no-repeat, -o-linear-gradient(#80bf40, #59862d); background: url('../images/btn_icons-saaa1989272.png') 5px -49px no-repeat, -ms-linear-gradient(#80bf40, #59862d); background: url('../images/btn_icons-saaa1989272.png') 5px -49px no-repeat, linear-gradient(#80bf40, #59862d); text-shadow: #4d7326 0 1px 1px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; }
-.cms .ss-ui-button.cms-page-add-button.ui-state-hover, .cms .ss-ui-button.cms-page-add-button:hover { border-color: #59781d; background: #80bf40 url('../images/btn_icons-saaa1989272.png') 6px -48px no-repeat; background: url('../images/btn_icons-saaa1989272.png') 5px -49px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #8cc653), color-stop(100%, #669933)); background: url('../images/btn_icons-saaa1989272.png') 5px -49px no-repeat, -webkit-linear-gradient(#8cc653, #669933); background: url('../images/btn_icons-saaa1989272.png') 5px -49px no-repeat, -moz-linear-gradient(#8cc653, #669933); background: url('../images/btn_icons-saaa1989272.png') 5px -49px no-repeat, -o-linear-gradient(#8cc653, #669933); background: url('../images/btn_icons-saaa1989272.png') 5px -49px no-repeat, -ms-linear-gradient(#8cc653, #669933); background: url('../images/btn_icons-saaa1989272.png') 5px -49px no-repeat, linear-gradient(#8cc653, #669933); }
-.cms .ss-ui-button.cms-page-add-button:active, .cms .ss-ui-button.cms-page-add-button:focus, .cms .ss-ui-button.cms-page-add-button.ui-state-active, .cms .ss-ui-button.cms-page-add-button.ui-state-focus { background: #619130 url('../images/btn_icons-saaa1989272.png') 5px -49px no-repeat; -moz-box-shadow: inset 0 1px 3px #17181a, 0 1px 0 rgba(255, 255, 255, 0.6); -webkit-box-shadow: inset 0 1px 3px #17181a, 0 1px 0 rgba(255, 255, 255, 0.6); -o-box-shadow: inset 0 1px 3px #17181a, 0 1px 0 rgba(255, 255, 255, 0.6); box-shadow: inset 0 1px 3px #17181a, 0 1px 0 rgba(255, 255, 255, 0.6); }
+.cms .ss-ui-button.ui-state-hover, .cms .ss-ui-button:hover { text-decoration: none; background-color: 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-color: 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 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 { font-weight: bold; color: white; border-color: #78a127; border-bottom-color: #59781d; background-color: #669933; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #80bf40), color-stop(100%, #59862d)); background: -webkit-linear-gradient(#80bf40, #59862d); background: -moz-linear-gradient(#80bf40, #59862d); background: -o-linear-gradient(#80bf40, #59862d); background: -ms-linear-gradient(#80bf40, #59862d); background: linear-gradient(#80bf40, #59862d); text-shadow: #4d7326 0 1px 1px; }
+.cms .ss-ui-button.ss-ui-action-constructive.ui-state-hover, .cms .ss-ui-button.ss-ui-action-constructive:hover { border-color: #59781d; background-color: #80bf40; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #8cc653), color-stop(100%, #669933)); background: -webkit-linear-gradient(#8cc653, #669933); background: -moz-linear-gradient(#8cc653, #669933); background: -o-linear-gradient(#8cc653, #669933); background: -ms-linear-gradient(#8cc653, #669933); background: linear-gradient(#8cc653, #669933); }
+.cms .ss-ui-button.ss-ui-action-constructive:active, .cms .ss-ui-button.ss-ui-action-constructive:focus, .cms .ss-ui-button.ss-ui-action-constructive.ui-state-active, .cms .ss-ui-button.ss-ui-action-constructive.ui-state-focus { background-color: #619130; -moz-box-shadow: inset 0 1px 3px #17181a, 0 1px 0 rgba(255, 255, 255, 0.6); -webkit-box-shadow: inset 0 1px 3px #17181a, 0 1px 0 rgba(255, 255, 255, 0.6); -o-box-shadow: inset 0 1px 3px #17181a, 0 1px 0 rgba(255, 255, 255, 0.6); box-shadow: inset 0 1px 3px #17181a, 0 1px 0 rgba(255, 255, 255, 0.6); }
 .cms .ss-ui-button.ss-ui-action-destructive { color: red; background-color: #e6e6e6; }
-.cms .ss-ui-button.ss-ui-action-destructive.delete { padding-left: 24px; padding-right: 6px; background: #e6e6e6 url('../images/btn_icons-saaa1989272.png') 5px -184px no-repeat; background: url('../images/btn_icons-saaa1989272.png') 5px -185px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/btn_icons-saaa1989272.png') 5px -185px no-repeat, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/btn_icons-saaa1989272.png') 5px -185px no-repeat, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/btn_icons-saaa1989272.png') 5px -185px no-repeat, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/btn_icons-saaa1989272.png') 5px -185px no-repeat, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/btn_icons-saaa1989272.png') 5px -185px no-repeat, linear-gradient(#ffffff, #d9d9d9); }
-.cms .ss-ui-button.ss-ui-action-destructive.delete.ui-state-hover, .cms .ss-ui-button.ss-ui-action-destructive.delete:hover { background: white url('../images/btn_icons-saaa1989272.png') 5px -184px no-repeat; background: url('../images/btn_icons-saaa1989272.png') 5px -185px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/btn_icons-saaa1989272.png') 5px -185px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -185px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -185px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -185px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -185px no-repeat, 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.ss-ui-action-destructive.delete:active, .cms .ss-ui-button.ss-ui-action-destructive.delete:focus, .cms .ss-ui-button.ss-ui-action-destructive.delete.ui-state-active, .cms .ss-ui-button.ss-ui-action-destructive.delete.ui-state-focus { border: 1px solid #b3b3b3; background: white url('../images/btn_icons-saaa1989272.png') 5px -184px no-repeat; background: url('../images/btn_icons-saaa1989272.png') 5px -185px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/btn_icons-saaa1989272.png') 5px -185px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -185px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -185px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -185px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -185px no-repeat, linear-gradient(#ffffff, #e6e6e6); -moz-box-shadow: 0 0 5px #9a9a9a inset; -webkit-box-shadow: 0 0 5px #9a9a9a inset; -o-box-shadow: 0 0 5px #9a9a9a inset; box-shadow: 0 0 5px #9a9a9a inset; }
-.cms .ss-ui-button.ss-ui-action-destructive.delete.ui-state-disabled { background-image: none; background: white url('../images/btn_icons-saaa1989272.png') 5px -211px no-repeat; background: url('../images/btn_icons-saaa1989272.png') 5px -212px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/btn_icons-saaa1989272.png') 5px -212px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -212px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -212px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -212px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -212px no-repeat, linear-gradient(#ffffff, #e6e6e6); }
-.cms .ss-ui-button.ss-ui-action-destructive.unpublish { padding-left: 24px; padding-right: 6px; background: #e6e6e6 url('../images/btn_icons-saaa1989272.png') 5px -370px no-repeat; background: url('../images/btn_icons-saaa1989272.png') 5px -371px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/btn_icons-saaa1989272.png') 5px -371px no-repeat, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/btn_icons-saaa1989272.png') 5px -371px no-repeat, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/btn_icons-saaa1989272.png') 5px -371px no-repeat, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/btn_icons-saaa1989272.png') 5px -371px no-repeat, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/btn_icons-saaa1989272.png') 5px -371px no-repeat, linear-gradient(#ffffff, #d9d9d9); }
-.cms .ss-ui-button.ss-ui-action-destructive.unpublish.ui-state-hover, .cms .ss-ui-button.ss-ui-action-destructive.unpublish:hover { background: white url('../images/btn_icons-saaa1989272.png') 5px -370px no-repeat; background: url('../images/btn_icons-saaa1989272.png') 5px -371px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/btn_icons-saaa1989272.png') 5px -371px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -371px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -371px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -371px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -371px no-repeat, 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.ss-ui-action-destructive.unpublish:active, .cms .ss-ui-button.ss-ui-action-destructive.unpublish:focus, .cms .ss-ui-button.ss-ui-action-destructive.unpublish.ui-state-active, .cms .ss-ui-button.ss-ui-action-destructive.unpublish.ui-state-focus { border: 1px solid #b3b3b3; background: white url('../images/btn_icons-saaa1989272.png') 5px -370px no-repeat; background: url('../images/btn_icons-saaa1989272.png') 5px -371px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/btn_icons-saaa1989272.png') 5px -371px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -371px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -371px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -371px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -371px no-repeat, linear-gradient(#ffffff, #e6e6e6); -moz-box-shadow: 0 0 5px #9a9a9a inset; -webkit-box-shadow: 0 0 5px #9a9a9a inset; -o-box-shadow: 0 0 5px #9a9a9a inset; box-shadow: 0 0 5px #9a9a9a inset; }
-.cms .ss-ui-button.ss-ui-action-destructive.unpublish.ui-state-disabled { background-image: none; background: white url('../images/btn_icons-saaa1989272.png') 5px -398px no-repeat; background: url('../images/btn_icons-saaa1989272.png') 5px -399px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/btn_icons-saaa1989272.png') 5px -399px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -399px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -399px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -399px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -399px no-repeat, linear-gradient(#ffffff, #e6e6e6); }
-.cms .ss-ui-button.save-draft { padding-left: 24px; padding-right: 6px; background: #e6e6e6 url('../images/btn_icons-saaa1989272.png') 5px -104px no-repeat; background: url('../images/btn_icons-saaa1989272.png') 5px -105px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/btn_icons-saaa1989272.png') 5px -105px no-repeat, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/btn_icons-saaa1989272.png') 5px -105px no-repeat, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/btn_icons-saaa1989272.png') 5px -105px no-repeat, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/btn_icons-saaa1989272.png') 5px -105px no-repeat, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/btn_icons-saaa1989272.png') 5px -105px no-repeat, linear-gradient(#ffffff, #d9d9d9); }
-.cms .ss-ui-button.save-draft.ui-state-hover, .cms .ss-ui-button.save-draft:hover { background: white url('../images/btn_icons-saaa1989272.png') 5px -104px no-repeat; background: url('../images/btn_icons-saaa1989272.png') 5px -105px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/btn_icons-saaa1989272.png') 5px -105px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -105px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -105px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -105px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -105px no-repeat, 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.save-draft:active, .cms .ss-ui-button.save-draft:focus, .cms .ss-ui-button.save-draft.ui-state-active, .cms .ss-ui-button.save-draft.ui-state-focus { border: 1px solid #b3b3b3; background: white url('../images/btn_icons-saaa1989272.png') 5px -104px no-repeat; background: url('../images/btn_icons-saaa1989272.png') 5px -105px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/btn_icons-saaa1989272.png') 5px -105px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -105px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -105px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -105px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -105px no-repeat, linear-gradient(#ffffff, #e6e6e6); -moz-box-shadow: 0 0 5px #9a9a9a inset; -webkit-box-shadow: 0 0 5px #9a9a9a inset; -o-box-shadow: 0 0 5px #9a9a9a inset; box-shadow: 0 0 5px #9a9a9a inset; }
-.cms .ss-ui-button.save-draft.ui-state-disabled { background-image: none; background: white url('../images/btn_icons-saaa1989272.png') 5px -132px no-repeat; background: url('../images/btn_icons-saaa1989272.png') 5px -133px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/btn_icons-saaa1989272.png') 5px -133px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -133px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -133px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -133px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -133px no-repeat, linear-gradient(#ffffff, #e6e6e6); }
-.cms .ss-ui-button.cms-preview-toggle-link { padding-left: 24px !important; margin-left: 4px !important; text-decoration: none; padding-left: 24px; padding-right: 6px; background: #e6e6e6 url('../images/btn_icons-saaa1989272.png') 5px -264px no-repeat; background: url('../images/btn_icons-saaa1989272.png') 5px -265px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/btn_icons-saaa1989272.png') 5px -265px no-repeat, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/btn_icons-saaa1989272.png') 5px -265px no-repeat, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/btn_icons-saaa1989272.png') 5px -265px no-repeat, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/btn_icons-saaa1989272.png') 5px -265px no-repeat, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/btn_icons-saaa1989272.png') 5px -265px no-repeat, linear-gradient(#ffffff, #d9d9d9); }
-.cms .ss-ui-button.cms-preview-toggle-link.ui-state-hover, .cms .ss-ui-button.cms-preview-toggle-link:hover { background: white url('../images/btn_icons-saaa1989272.png') 5px -264px no-repeat; background: url('../images/btn_icons-saaa1989272.png') 5px -265px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/btn_icons-saaa1989272.png') 5px -265px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -265px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -265px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -265px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -265px no-repeat, 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.cms-preview-toggle-link:active, .cms .ss-ui-button.cms-preview-toggle-link:focus, .cms .ss-ui-button.cms-preview-toggle-link.ui-state-active, .cms .ss-ui-button.cms-preview-toggle-link.ui-state-focus { border: 1px solid #b3b3b3; background: white url('../images/btn_icons-saaa1989272.png') 5px -264px no-repeat; background: url('../images/btn_icons-saaa1989272.png') 5px -265px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/btn_icons-saaa1989272.png') 5px -265px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -265px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -265px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -265px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -265px no-repeat, linear-gradient(#ffffff, #e6e6e6); -moz-box-shadow: 0 0 5px #9a9a9a inset; -webkit-box-shadow: 0 0 5px #9a9a9a inset; -o-box-shadow: 0 0 5px #9a9a9a inset; box-shadow: 0 0 5px #9a9a9a inset; }
-.cms .ss-ui-button.cms-preview-toggle-link.ui-state-disabled { background-image: none; background: white url('../images/btn_icons-saaa1989272.png') 5px -291px no-repeat; background: url('../images/btn_icons-saaa1989272.png') 5px -292px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/btn_icons-saaa1989272.png') 5px -292px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -292px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -292px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -292px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -292px no-repeat, linear-gradient(#ffffff, #e6e6e6); }
 .cms .ss-ui-button.ss-ui-button-small { padding: 4px 4px; }
 .cms .ss-ui-button.ui-state-highlight { background-color: #e6e6e6; border: 1px solid #708284; }
-.cms .ss-ui-button.ss-ui-action-minor { background: none; padding: 0; border: 0; color: #393939; text-decoration: underline; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; }
+.cms .ss-ui-button.ss-ui-action-minor { background: none; border: 0; color: #393939; text-decoration: underline; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; }
 .cms .ss-ui-button.ss-ui-action-minor:hover { text-decoration: none; color: #1f1f1f; }
 .cms .ss-ui-button.ss-ui-action-minor:focus, .cms .ss-ui-button.ss-ui-action-minor:active { text-decoration: none; color: #525252; }
 
@@ -218,8 +229,6 @@ body.cms { overflow: hidden; }
 .cms a:hover, .cms a:focus { text-decoration: underline; }
 .cms body .ui-widget { font-family: Arial, sans-serif; font-size: 12px; }
 .cms strong { font-weight: bold; }
-.cms .ss-ui-button.cms-page-add-button { margin-left: 0px; font-size: 13px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; }
-.cms .ss-ui-button.cms-page-add-button:hover { text-decoration: none; }
 
 /** -------------------------------------------- Helpers -------------------------------------------- */
 .cms-helper-hide-actions .Actions { display: none; }
@@ -303,11 +312,11 @@ body.cms { overflow: hidden; }
 .cms-content-toolbar .chzn-container-single .chzn-single:hover { -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; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ebebeb), color-stop(100%, #d2d2d2)); background-image: -webkit-linear-gradient(#ebebeb, #d2d2d2); background-image: -moz-linear-gradient(#ebebeb, #d2d2d2); background-image: -o-linear-gradient(#ebebeb, #d2d2d2); background-image: -ms-linear-gradient(#ebebeb, #d2d2d2); background-image: linear-gradient(#ebebeb, #d2d2d2); }
 .cms-content-toolbar .chzn-container-single .chzn-single:active { -moz-box-shadow: inset 0 1px 3px #4d4d4d; -webkit-box-shadow: inset 0 1px 3px #4d4d4d; -o-box-shadow: inset 0 1px 3px #4d4d4d; box-shadow: inset 0 1px 3px #4d4d4d; }
 .cms-content-toolbar .chzn-container-single .chzn-single span { padding-top: 1px; }
-.cms-content-toolbar .chzn-container-single .chzn-single div { background: url(../images/btn_icons/settings.png) 5px 4px no-repeat; border-left: none; width: 100%; }
-.cms-content-toolbar .chzn-container-single .chzn-single div b { background: url(../images/sprites_32x32/menu-arrow-deselected-down.png) no-repeat 9px 11px; float: right; width: 24px; }
+.cms-content-toolbar .chzn-container-single .chzn-single div { background: url(../images/btn-icon/settings.png) 5px 4px no-repeat; border-left: none; width: 100%; }
+.cms-content-toolbar .chzn-container-single .chzn-single div b { background: url(../images/sprites-32x32/menu-arrow-deselected-down.png) no-repeat 9px 11px; float: right; width: 24px; }
 
 /* -------------------------------------------------------- Content Tools is the sidebar on the left of the main content panel */
-.cms-content-tools { background-color: #dde3e7; width: 192px; border-right: 1px solid #bfcad2; overflow-y: auto; overflow-x: hidden; z-index: 70; -moz-box-shadow: rgba(107, 120, 123, 0.5) 0 0 4px; -webkit-box-shadow: rgba(107, 120, 123, 0.5) 0 0 4px; -o-box-shadow: rgba(107, 120, 123, 0.5) 0 0 4px; box-shadow: rgba(107, 120, 123, 0.5) 0 0 4px; float: left; position: relative; /* buttons now need to line with with reduced input sizes */ }
+.cms-content-tools { background-color: #dde3e7; width: 192px; border-right: 1px solid #bfcad2; overflow-y: auto; overflow-x: hidden; z-index: 70; -moz-box-shadow: rgba(107, 120, 123, 0.5) 0 0 4px; -webkit-box-shadow: rgba(107, 120, 123, 0.5) 0 0 4px; -o-box-shadow: rgba(107, 120, 123, 0.5) 0 0 4px; box-shadow: rgba(107, 120, 123, 0.5) 0 0 4px; float: left; position: relative; }
 .cms-content-tools .cms-panel-header { padding: 0; margin: 0 0 7px; line-height: 24px; border-bottom: 1px solid rgba(201, 205, 206, 0.8); -webkit-box-shadow: 0 1px 0 rgba(228, 230, 230, 0.8); -moz-box-shadow: 0 1px 0 rgba(228, 230, 230, 0.8); -o-box-shadow: 0 1px 0 rgba(228, 230, 230, 0.8); box-shadow: 0 1px 0 rgba(228, 230, 230, 0.8); }
 .cms-content-tools .cms-panel-content { width: 176px; padding: 8px 8px; overflow: auto; }
 .cms-content-tools .cms-content-header { background-color: #748d9d; border-bottom: 2px solid #5c7382; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #b0bec7), color-stop(100%, #748d9d)); background-image: -webkit-linear-gradient(#b0bec7, #748d9d); background-image: -moz-linear-gradient(#b0bec7, #748d9d); background-image: -o-linear-gradient(#b0bec7, #748d9d); background-image: -ms-linear-gradient(#b0bec7, #748d9d); background-image: linear-gradient(#b0bec7, #748d9d); }
@@ -321,7 +330,6 @@ body.cms { overflow: hidden; }
 .cms-content-tools .field input.text, .cms-content-tools .field select, .cms-content-tools .field textarea { padding: 5px; font-size: 11px; }
 .cms-content-tools .field.checkbox { padding: 0 8px 0; }
 .cms-content-tools .field.checkbox input { margin: 2px 0; }
-.cms-content-tools .ss-ui-button { padding: 5px 8px; }
 .cms-content-tools .fieldgroup .fieldgroup-field { width: auto; padding: 0; }
 .cms-content-tools .fieldgroup .fieldgroup-field .field { margin: 0; padding: 0; }
 .cms-content-tools table { margin: 8px -4px; }
@@ -333,15 +341,11 @@ body.cms { overflow: hidden; }
 .cms-content-tools td { border-bottom: 1px solid #ced7dc; padding: 7px 2px; font-size: 11px; }
 
 /**  CMS Batch actions */
-.cms-content-constructive-actions { float: left; }
-
 .cms-content-batchactions { float: left; position: relative; display: block; margin-left: 8px; }
 .cms-content-batchactions form > * { display: block; float: left; }
 .cms-content-batchactions form.cms-batch-actions { float: left; }
 .cms-content-batchactions .Actions { display: none; }
 
-.cms-content-constructive-actions a { display: block; float: right; }
-
 #Form_BatchActionsForm select { width: 200px; }
 
 /** -------------------------------------------- Preview -------------------------------------------- */
@@ -358,7 +362,8 @@ body.cms { overflow: hidden; }
 .cms-preview .cms-preview-controls .cms-preview-states { margin-right: 10px; }
 .cms-preview .cms-preview-controls .cms-preview-popup-link { display: inline-block; }
 .cms-preview .cms-preview-controls .cms-preview-toggle-link { float: right; }
-.cms-preview .cms-preview-controls .cms-preview-toggle-link .ui-button-text { padding: 0; }
+
+.cms-preview-toggle-link { display: block; float: right; font-size: 12px; text-decoration: none; }
 
 .cms-preview-header { background-color: #FFBE66; padding: 10px; font-weight: bold; }
 
@@ -440,7 +445,7 @@ body.cms-dialog { overflow: auto; background: url("../images/textures/bg_cms_mai
 /** -------------------------------------------- Step labels -------------------------------------------- */
 .step-label > * { display: inline-block; vertical-align: top; }
 .step-label .flyout { height: 18px; font-size: 14px; font-weight: bold; -moz-border-radius-topleft: 3px; -webkit-border-top-left-radius: 3px; -o-border-top-left-radius: 3px; -ms-border-top-left-radius: 3px; -khtml-border-top-left-radius: 3px; border-top-left-radius: 3px; -moz-border-radius-bottomleft: 3px; -webkit-border-bottom-left-radius: 3px; -o-border-bottom-left-radius: 3px; -ms-border-bottom-left-radius: 3px; -khtml-border-bottom-left-radius: 3px; border-bottom-left-radius: 3px; background-color: #667980; padding: 4px 3px 4px 6px; text-align: center; text-shadow: none; color: #fff; }
-.step-label .arrow { height: 26px; width: 10px; background: url('../images/sprites_32x32-s98eda4974b.png') 0 -171px no-repeat; margin-right: 4px; }
+.step-label .arrow { height: 26px; width: 10px; background: url('../images/sprites-32x32-s5fb04c068a.png') 0 -171px no-repeat; margin-right: 4px; }
 .step-label .title { height: 18px; padding: 4px; }
 
 /** This file defines the jstree base styling (see http://jstree.com), as well as any customizations (see bottom of file).  The styles are usually added through jstree.js on DOM load,  but we need it earlier in order to correctly display the uninitialized tree. */
@@ -557,7 +562,7 @@ li.class-ErrorPage > a .jstree-pageicon { background-position: 0 -112px; }
 .cms-logo span { font-weight: bold; font-size: 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; o-text-overflow: ellipsis; }
 
 .cms-login-status { border-top: 1px solid #19435c; height: 24px; padding: 7px 4px 0 4px; overflow: hidden; line-height: 16px; font-size: 11px; }
-.cms-login-status .logout-link { display: inline-block; height: 16px; width: 16px; float: left; margin: 0 8px 0 3px; background: url('../images/sprites_32x32-s98eda4974b.png') 0 -81px no-repeat; text-indent: -9999em; }
+.cms-login-status .logout-link { display: inline-block; height: 16px; width: 16px; float: left; margin: 0 8px 0 3px; background: url('../images/sprites-32x32-s5fb04c068a.png') 0 -81px no-repeat; text-indent: -9999em; }
 
 .cms-menu { z-index: 80; background: #c6d7df; border-right: 1px solid #8c99a1; width: 191px; /* 8x24 - 1 */ -moz-box-shadow: rgba(107, 120, 123, 0.5) 0 0 8px; -webkit-box-shadow: rgba(107, 120, 123, 0.5) 0 0 8px; -o-box-shadow: rgba(107, 120, 123, 0.5) 0 0 8px; box-shadow: rgba(107, 120, 123, 0.5) 0 0 8px; }
 .cms-menu a { text-decoration: none; }
@@ -577,12 +582,12 @@ li.class-ErrorPage > a .jstree-pageicon { background-position: 0 -112px; }
 .cms-menu-list li a .icon { display: inline-block; float: left; margin: 4px 10px 0 4px; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); opacity: 0.7; }
 .cms-menu-list li a .text { display: inline-block; float: left; }
 .cms-menu-list li a .toggle-children { display: inline-block; float: right; width: 20px; height: 100%; cursor: pointer; }
-.cms-menu-list li a .toggle-children .toggle-children-icon { display: inline-block; width: 8px; height: 8px; background: url('../images/sprites_32x32-s98eda4974b.png') 0 -107px no-repeat; vertical-align: middle; }
-.cms-menu-list li a .toggle-children.opened .toggle-children-icon { background: url('../images/sprites_32x32-s98eda4974b.png') 0 -123px no-repeat; }
+.cms-menu-list li a .toggle-children .toggle-children-icon { display: inline-block; width: 8px; height: 8px; background: url('../images/sprites-32x32-s5fb04c068a.png') 0 -107px no-repeat; vertical-align: middle; }
+.cms-menu-list li a .toggle-children.opened .toggle-children-icon { background: url('../images/sprites-32x32-s5fb04c068a.png') 0 -123px no-repeat; }
 .cms-menu-list li ul { display: none; }
 .cms-menu-list li.current a { color: white; text-shadow: #1e5270 0 -1px 0; border-top: 1px solid #55a4d2; border-bottom: 1px solid #1e5270; background-color: #338dc1; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #338dc1), color-stop(100%, #287099)); background-image: -webkit-linear-gradient(#338dc1, #287099); background-image: -moz-linear-gradient(#338dc1, #287099); background-image: -o-linear-gradient(#338dc1, #287099); background-image: -ms-linear-gradient(#338dc1, #287099); background-image: linear-gradient(#338dc1, #287099); }
-.cms-menu-list li.current a .toggle-children .toggle-children-icon { background: url('../images/sprites_32x32-s98eda4974b.png') 0 -139px no-repeat; }
-.cms-menu-list li.current a .toggle-children.opened .toggle-children-icon { background: url('../images/sprites_32x32-s98eda4974b.png') 0 -155px no-repeat; }
+.cms-menu-list li.current a .toggle-children .toggle-children-icon { background: url('../images/sprites-32x32-s5fb04c068a.png') 0 -139px no-repeat; }
+.cms-menu-list li.current a .toggle-children.opened .toggle-children-icon { background: url('../images/sprites-32x32-s5fb04c068a.png') 0 -155px no-repeat; }
 .cms-menu-list li.current ul { border-top: none; display: block; }
 .cms-menu-list li.current li { background-color: #287099; }
 .cms-menu-list li.current li a { font-size: 11px; padding: 0 10px 0 40px; height: 32px; line-height: 32px; color: #e2f0f7; background: none; border-top: 1px solid #338dc1; border-bottom: 1px solid #1e5270; }

admin/javascript/LeftAndMain.js

@@ -257,13 +257,20 @@ jQuery.noConflict();
 		 */
 		$('.cms input[type="submit"], .cms button, .cms input[type="reset"]').entwine({
 			onmatch: function() {
-				this.addClass('ss-ui-button');
-				this.redraw();
+				if(!this.hasClass('ss-ui-button')) this.addClass('ss-ui-button');
 				
 				this._super();
 			}
 		});
 
+		$('.cms .ss-ui-button').entwine({
+			onmatch: function() {
+				if(!this.data('button')) this.button();
+
+				this._super();
+			}
+		});
+
 		/**
 		 * Trigger dialogs with iframe based on the links href attribute (see ssui-core.js).
 		 */
@@ -292,7 +299,7 @@ jQuery.noConflict();
 		/**
 		 * Add styling to all contained buttons, and create buttonsets if required.
 		 */
-		$('.cms-container .Actions').entwine({
+		$('.cms .Actions').entwine({
 		onmatch: function() {
 			this.find('.ss-ui-button').click(function() {
 					var form = this.form;
@@ -309,31 +316,21 @@ jQuery.noConflict();
 			this._super();
 		},
 		redraw: function() {
-			// 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
-			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
-			var sets = [], self = this;
-			this.find('.action[buttonset]').each(function() {
-				cl = $(this).attr('buttonset');
-				if($.inArray(cl, sets) == -1) sets.push(cl);
-			});
-			$.each(sets, function(i, set) {
-				// 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()
-					.last().addClass('ui-corner-right');
+
+			// Init buttons if required
+			this.find('.ss-ui-button').each(function() {
+				if(!$(this).data('button')) $(this).button();
 			});
 			
+			// Mark up buttonsets
+			this.find('.ss-ui-buttonset').buttonset();
+				// .children().removeClass('ui-corner-all').addClass('buttonset')
+				// 	.first().addClass('ui-corner-left').end()
+				// 	.last().addClass('ui-corner-right');;
 		}
 	});
 		

admin/javascript/ssui.core.js

@@ -29,6 +29,21 @@
 		}
 	});
 
+	/**
+	 * Allows icon definition via HTML5 data attrs for easier handling in PHP
+	 */
+	$.widget('ssui.button', $.ui.button, {
+		_resetButton: function() {
+			var iconPrimary = this.element.data('iconPrimary') ? this.element.data('iconPrimary') : this.element.data('icon'),
+				iconSecondary = this.element.data('iconSecondary');
+			// TODO Move prefix out of this method, without requriing it for every icon definition in a data attr
+			if(iconPrimary) this.options.icons.primary = 'btn-icon-' + iconPrimary;
+			if(iconSecondary) this.options.icons.secondary = 'btn-icon-' + iconSecondary;
+
+			$.ui.button.prototype._resetButton.call(this);
+		}
+	});
+
 	/**
 	 * Extends jQueryUI dialog with iframe abilities (and related resizing logic),
 	 * and sets some CMS-wide defaults.

admin/scss/_forms.scss

@@ -10,87 +10,6 @@
  * Basic form fields
  * ---------------------------------------------------- */	
 
-/* CMS action button sprite mix-in (used for all the buttons in the bottom row */
-@mixin actionButtonSprite($name) {
-  padding-left: 24px;
-	padding-right: 6px;
-
-	@include background($color-button-generic sprite($btn_icons, $name, 5px, 6px) no-repeat);
-	@include background(sprite($btn_icons, $name, 5px, 5px) no-repeat,
-		linear-gradient(color-stops(
-			lighten($color-button-generic, 10%),
-			darken($color-button-generic, 5%)
-		))
-	);
-	&.ui-state-hover, &:hover {
-		@include background(lighten($color-button-generic, 10%) sprite($btn_icons, $name, 5px, 6px) no-repeat);
-		@include background(sprite($btn_icons, $name, 5px, 5px) no-repeat,
-			linear-gradient(color-stops(
-				lighten($color-button-generic, 20%),
-				$color-button-generic
-			))
-		);
-		@include box-shadow(0 0 5px darken($color-button-generic, 20%));
-	}
-	&:active, &:focus, &.ui-state-active, &.ui-state-focus {
-		border: 1px solid darken($color-button-generic, 20%);
-		@include background(lighten($color-button-generic, 10%) sprite($btn_icons, $name, 5px, 6px) no-repeat);
-		@include background(sprite($btn_icons, $name, 5px, 5px) no-repeat,
-			linear-gradient(color-stops(
-				lighten($color-button-generic, 20%),
-				$color-button-generic
-			))
-		);
-		@include box-shadow(0 0 5px darken($color-button-generic, 30%) inset);
-	}
-	&.ui-state-disabled {
-    background-image: none;
-  	@include background(lighten($color-button-generic, 20%) sprite($btn_icons, $name+_disabled, 5px, 6px) no-repeat);
-		@include background(sprite($btn_icons, $name+_disabled, 5px, 5px) no-repeat,
-			linear-gradient(color-stops(
-				lighten($color-button-generic, 20%),
-				$color-button-generic
-			))
-		);
-	}
-}
-
-@mixin actionButtonSpriteConstructive($name) {
-  background-image: none;
-  padding-left: 24px;
-	padding-right: 6px;
-	font-weight: bold;
-	margin-left: $grid-x;
-	color: $color-text-light;
-	border-color: $color-button-constructive-border;
-	border-bottom-color: darken($color-button-constructive-border, 10%);			
-	@include background($color-button-constructive sprite($btn_icons, $name, 5, 5) no-repeat);
-	@include background(sprite($btn_icons, $name, 5, 5) no-repeat,
-		linear-gradient(color-stops(
-			lighten($color-button-constructive, 10%),
-			darken($color-button-constructive, 5%)
-		))
-	);
-
-	@include text-shadow(darken($color-button-constructive, 10%) 0 1px 1px);
-
-	&.ui-state-hover, &:hover {
-		border-color: darken($color-button-constructive-border, 10%);
-		@include background(lighten($color-button-constructive, 10%) sprite($btn_icons, $name, 6, 6) no-repeat);
-		@include background(sprite($btn_icons, $name, 5, 5) no-repeat,
-			linear-gradient(color-stops(
-				lighten($color-button-constructive, 15%),
-				$color-button-constructive
-			))
-		);
-	}
-	&:active, &:focus, &.ui-state-active, &.ui-state-focus {
-
-		@include background(darken($color-button-constructive, 2%) sprite($btn_icons, $name, 5, 5) no-repeat);
-		@include box-shadow(inset 0 1px 3px rgb(23, 24, 26), 0 1px 0 rgba(255, 255, 255, .6));
-	}
-}
-
 form.nostyle {
 	@include clear-form-field-styles();
 }
@@ -307,26 +226,28 @@ form.small .field, .field.small {
  * Buttons
  * ---------------------------------------------------- */
 
-.Actions {
-	min-height: 30px;
-
-	& > div {
-		overflow: auto;
-	}
-}
-
-.cms-preview-toggle-link {
-	display: block;
-	float: right;
-	font-size: 12px;
-	text-decoration: none;
-	span.ui-button-text{
-		padding:0;
-	}
-}
-
 .cms {
 
+	.Actions, .cms-actions-row {
+		> * {
+			display: block;
+			float: left;
+			margin-right: $grid-x;
+		}
+
+		> *:last-child {
+			margin-right: 0;
+		}
+	}
+
+	.Actions {
+		min-height: 30px;
+
+		& > div {
+			overflow: auto;
+		}
+	}
+
 	input.loading,
 	input.ui-state-default.loading, .ui-widget-content input.ui-state-default.loading, 
 	.ui-widget-header input.ui-state-default.loading {
@@ -341,34 +262,30 @@ form.small .field, .field.small {
 	}
 
 	.ss-ui-button {
-		
+
 		&.buttonset {
 			margin: 0 -1px; // hack to avoid double borders
 		}
 		
-		/* all buttons */
-		padding: ($grid-y - 3) ($grid-x + 4);
 		font-weight: bold;
 		text-decoration: none;
-		margin: 0;
 		line-height: $grid-y * 2;
 		color: lighten($color-text-dark, 10%);
-		background-color: $color-button-generic;
 		border: 1px solid $color-button-generic-border;
 		border-bottom: 1px solid darken($color-button-generic-border, 10%);
 		cursor: pointer;
-		
 		@include text-shadow(lighten($color-button-generic, 20%) 0 1px 1px);
-		
-		@include background($color-button-generic);
+		background-color: $color-button-generic;
 		@include background(
 			linear-gradient(color-stops(
 				lighten($color-button-generic, 10%),
 				darken($color-button-generic, 5%)
 			))
 		);
+
 		&.ui-state-hover, &:hover {
-			@include background(lighten($color-button-generic, 10%));
+			text-decoration: none;
+			background-color: lighten($color-button-generic, 10%);
 			@include background(
 				linear-gradient(color-stops(
 					lighten($color-button-generic, 20%),
@@ -377,9 +294,10 @@ form.small .field, .field.small {
 			);
 			@include box-shadow(0 0 5px darken($color-button-generic, 20%));
 		}
+
 		&:active, &:focus, &.ui-state-active, &.ui-state-focus {
 			border: 1px solid darken($color-button-generic, 20%);
-			@include background(lighten($color-button-generic, 10%) no-repeat);
+			background-color: lighten($color-button-generic, 10%);
 			@include background(
 				linear-gradient(color-stops(
 					lighten($color-button-generic, 20%),
@@ -391,38 +309,39 @@ form.small .field, .field.small {
 
 		/* constructive */
 		&.ss-ui-action-constructive {
-			@include actionButtonSpriteConstructive('accept');
+			font-weight: bold;
+			color: $color-text-light;
+			border-color: $color-button-constructive-border;
+			border-bottom-color: darken($color-button-constructive-border, 10%);			
+			background-color: $color-button-constructive;
+			@include background(
+				linear-gradient(color-stops(
+					lighten($color-button-constructive, 10%),
+					darken($color-button-constructive, 5%)
+				))
+			);
+			@include text-shadow(darken($color-button-constructive, 10%) 0 1px 1px);
+
+			&.ui-state-hover, &:hover {
+				border-color: darken($color-button-constructive-border, 10%);
+				background-color: lighten($color-button-constructive, 10%);
+				@include background(
+					linear-gradient(color-stops(
+						lighten($color-button-constructive, 15%),
+						$color-button-constructive
+					))
+				);
+			}
+			&:active, &:focus, &.ui-state-active, &.ui-state-focus {
+				background-color: darken($color-button-constructive, 2%);
+				@include box-shadow(inset 0 1px 3px rgb(23, 24, 26), 0 1px 0 rgba(255, 255, 255, .6));
+			}
 		}
 		
-		&.cms-page-add-button {
-			@include actionButtonSpriteConstructive('add');
-			@include border-radius(4px);
-
-		}
 		/* destructive */
 		&.ss-ui-action-destructive {
 			color: $color-button-destructive;
 			background-color: $color-button-generic;
-		
-			&.delete {
-				@include actionButtonSprite('decline');
-			}
-
-			&.unpublish {
-			    @include actionButtonSprite('unpublish');
-			}
-		}
-
-		/* generic action buttons */
-		&.save-draft {
-		    @include actionButtonSprite('addpage');
-		}
-
-		&.cms-preview-toggle-link {
-		  padding-left: 24px !important;
-			margin-left: 4px !important;
-			text-decoration: none;
-			@include actionButtonSprite('preview');
 		}
 
 		&.ss-ui-button-small {
@@ -436,7 +355,6 @@ form.small .field, .field.small {
 
 		&.ss-ui-action-minor {
 			background: none;
-			padding: 0;
 			border: 0;
 			color: lighten($color-text-dark, 10%);
 			text-decoration: underline;

admin/scss/_sprites.scss

@@ -1,15 +1,18 @@
 /**
  * Helper SCSS file for generating sprites for the interface.
- *
- * S
  */
 @import "compass/utilities/sprites/base";
 
-$icon24: sprite-map("menu_icons/24x24/*.png");
-$icon16: sprite-map("menu_icons/16x16/*.png");
+@import "btn-icon/*.png";
+.ui-state-default {
+	@include all-btn-icon-sprites;
+}
 
-$btn_icons: sprite-map("btn_icons/*.png", $spacing: 10px);
-$sprites32: sprite-map("sprites_32x32/*.png", $spacing: 10px);
+$icon24: sprite-map("menu-icons/24x24/*.png");
+$icon16: sprite-map("menu-icons/16x16/*.png");
+
+$btn-icon: sprite-map("btn-icon/*.png", $spacing: 10px);
+$sprites32: sprite-map("sprites-32x32/*.png", $spacing: 10px);
 
 @mixin icons($sprite) {
 	background: $sprite;

admin/scss/_style.scss

@@ -53,16 +53,6 @@ body.cms {
 	strong {
 		font-weight: bold;
 	}
-
-	.ss-ui-button.cms-page-add-button {
-		margin-left:0px;
-		font-size:13px;
-		@include border-radius(4px);
-	}
-
-	.ss-ui-button.cms-page-add-button:hover {
-		text-decoration:none;
-	}
 }
 
 /** --------------------------------------------
@@ -297,7 +287,6 @@ body.cms {
 	@include box-shadow($tab-panel-texture-color 0 $grid-y*-2 $grid-y*2);
 }
 
-
 /** --------------------------------------------
  * Messages
  * -------------------------------------------- */
@@ -480,13 +469,13 @@ body.cms {
  		}
 
 		div {
-			background:url(../images/btn_icons/settings.png) 5px 4px no-repeat;
+			background:url(../images/btn-icon/settings.png) 5px 4px no-repeat;
 			border-left:none;
 			width:100%;
 		}
 
 		div b {
-			background: url(../images/sprites_32x32/menu-arrow-deselected-down.png) no-repeat 9px 11px;
+			background: url(../images/sprites-32x32/menu-arrow-deselected-down.png) no-repeat 9px 11px;
 			float:right;
 			width:24px;
 		}	
@@ -586,13 +575,6 @@ body.cms {
 		}
 	}
 
-
-		
-	/* buttons now need to line with with reduced input sizes */
-	.ss-ui-button {
-		padding: 5px $grid-x;
-	}
-		
 	.fieldgroup {
 		.fieldgroup-field {
 			width: auto;
@@ -648,9 +630,6 @@ body.cms {
 /** 
  * CMS Batch actions
  */
-.cms-content-constructive-actions {
-	float: left;
-}
 
 .cms-content-batchactions {
 	float: left;
@@ -671,11 +650,6 @@ body.cms {
 	}
 }
 
-.cms-content-constructive-actions a {
-	display: block;
-	float: right;
-}
-
 #Form_BatchActionsForm select {
 	width: 200px;
 }
@@ -753,15 +727,18 @@ body.cms {
 
 		.cms-preview-toggle-link {
 			float: right;
-			.ui-button-text{
-				padding:0;
-			}
-
 		}
 	}
 	
 }
 
+.cms-preview-toggle-link {
+	display: block;
+	float: right;
+	font-size: 12px;
+	text-decoration: none;
+}
+
 .cms-preview-header {
 	background-color: #FFBE66;
 	padding: 10px;

admin/scss/ie7.scss

@@ -19,7 +19,7 @@ html {
 }
 
 .ss-ui-button.cms-page-add-button.ui-state-hover, .cms .ss-ui-button.cms-page-add-button:hover { 
-	background: #80bf40 url('../images/btn_icons-saaa1989272.png') 5px -49px no-repeat; 
+	background: #80bf40 url('../images/btn-icon-saaa1989272.png') 5px -49px no-repeat; 
 }
 
 //fix for the tree view modes not displaying inline

admin/scss/ie8.scss

@@ -19,7 +19,7 @@
 
 //fix for the button icon shifting on hover
 .ss-ui-button.cms-page-add-button.ui-state-hover, .cms .ss-ui-button.cms-page-add-button:hover { 
-	background: #80bf40 url('../images/btn_icons-saaa1989272.png') 5px -49px no-repeat; 
+	background: #80bf40 url('../images/btn-icon-saaa1989272.png') 5px -49px no-repeat; 
 }
 
 //fix for background color on default tabs

admin/templates/Includes/LeftAndMain_EditForm.ss

@@ -51,7 +51,7 @@
 				$Field
 			<% end_control %>
 			<% if CurrentPage.PreviewLink %>
-			<a href="$CurrentPage.PreviewLink" class="cms-preview-toggle-link ss-ui-button">
+			<a href="$CurrentPage.PreviewLink" class="cms-preview-toggle-link ss-ui-button" data-icon="preview">
 				<% _t('LeftAndMain.PreviewButton', 'Preview') %> &raquo;
 			</a>
 			<% end_if %>

admin/templates/Includes/LeftAndMain_SilverStripeNavigator.ss

@@ -1,5 +1,5 @@
 <div class="cms-navigator">
-	<a href="#" class="ss-ui-button cms-preview-toggle-link">
+	<a href="#" class="ss-ui-button cms-preview-toggle-link" data-icon="preview">
 		&laquo; <% _t('SilverStripeNavigator.Edit', 'Edit') %>
 	</a>
 	<ul class="cms-preview-states">

css/AssetUploadField.css

@@ -4,8 +4,6 @@
 /** ----------------------------------------------- Typography.  ------------------------------------------------ */
 /** ----------------------------------------------- Grid Units (px)  We have a vertical rhythm that the grid is based off both x (=horizontal) and y (=vertical). All internal padding and margins are scaled to this and accounting for paragraphs ------------------------------------------------ */
 /** ----------------------------------------------- Application Logo (CMS Logo) Must be 24px x 24px ------------------------------------------------ */
-/** Helper SCSS file for generating sprites for the interface. */
-/* CMS action button sprite mix-in for UploadField, copied from admin/scss/_forms.scss */
 #AssetUploadField { border-bottom: 0; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; }
 
 .ss-assetuploadfield h3 { border-bottom: 1px solid rgba(201, 205, 206, 0.8); -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); -o-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); margin: 0 0 8px; padding: 0 0 7px; clear: both; }
@@ -20,22 +18,21 @@
 .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-status { float: right; padding: 0 0 0 5px; }
 .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-status.ui-state-error-text { color: red; font-weight: bold; }
 .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-actions { position: absolute; top: 0; right: 0; left: 0; z-index: 0; }
-.ss-assetuploadfield .ss-uploadfield-files label.ss-ui-button { background: none; border: 0; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; text-shadow: none; color: white; float: right; }
-.ss-assetuploadfield .ss-uploadfield-files label.ss-ui-button.ss-uploadfield-item-delete { display: none; }
-.ss-assetuploadfield .ss-uploadfield-files label.ss-ui-button.ss-uploadfield-item-edit { padding-top: 0; padding-bottom: 0; line-height: 30px; }
+.ss-assetuploadfield .ss-uploadfield-files .ss-ui-button { background: none; border: 0; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; text-shadow: none; color: white; float: right; }
+.ss-assetuploadfield .ss-uploadfield-files .ss-ui-button.ss-uploadfield-item-delete { display: none; }
+.ss-assetuploadfield .ss-uploadfield-files .ss-ui-button.ss-uploadfield-item-edit { padding-top: 0; padding-bottom: 0; line-height: 30px; }
+.ss-assetuploadfield .ss-uploadfield-files .ss-ui-button .ui-icon { display: none; }
 .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-progress { width: 100%; }
 .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-progress div { -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; height: 30px; padding: 0; margin: 0; overflow: hidden; width: 100%; }
 .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-progress .ss-uploadfield-item-progressbar { background-color: #92a6b3; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #92a6b3), color-stop(11%, #90aab8), color-stop(22%, #96b1bf), color-stop(33%, #9eb4c1), color-stop(44%, #a7bac7), color-stop(100%, #c1d5dc)); background-image: -webkit-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: -moz-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: -o-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: -ms-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); }
 .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-progress .ss-uploadfield-item-progressbarvalue { width: 0; background: #60b3dd url(../images/progressbar_blue.gif) repeat left center; }
 .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-cancel { position: absolute; top: 7px; right: 7px; }
-.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-cancel button { display: block; overflow: hidden; text-indent: -9999px; padding: 0; margin: 0; border: 0; width: 16px; height: 16px; cursor: pointer; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; background: url('../images/sprites_16x16-scf81c570f3.png') 0 0 no-repeat; }
+.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-cancel button { display: block; overflow: hidden; text-indent: -9999px; padding: 0; margin: 0; border: 0; width: 16px; height: 16px; cursor: pointer; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; }
 .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-editform { /* don't use display none, for it will break jQuery('iframe').contents().height() */ height: 0; overflow: hidden; clear: both; }
 .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-editform iframe { width: 100%; }
 .ss-assetuploadfield .ss-uploadfield-addfile { height: 70px; padding: 5px 15px 15px; }
 .ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-item-info { float: left; margin: 19px 0 0; }
-.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-fromcomputer { position: relative; overflow: hidden; display: block; margin: 0 10px 0 0; background-image: none; padding-left: 25px; padding-right: 7px; font-weight: bold; margin-left: 8px; color: white; border-color: #78a127; border-bottom-color: #59781d; background: #669933 url('../images/sprites_16x16-scf81c570f3.png') 6px -46px no-repeat; background: url('../images/sprites_16x16-scf81c570f3.png') 6px -46px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #80bf40), color-stop(100%, #59862d)); background: url('../images/sprites_16x16-scf81c570f3.png') 6px -46px no-repeat, -webkit-linear-gradient(#80bf40, #59862d); background: url('../images/sprites_16x16-scf81c570f3.png') 6px -46px no-repeat, -moz-linear-gradient(#80bf40, #59862d); background: url('../images/sprites_16x16-scf81c570f3.png') 6px -46px no-repeat, -o-linear-gradient(#80bf40, #59862d); background: url('../images/sprites_16x16-scf81c570f3.png') 6px -46px no-repeat, -ms-linear-gradient(#80bf40, #59862d); background: url('../images/sprites_16x16-scf81c570f3.png') 6px -46px no-repeat, linear-gradient(#80bf40, #59862d); text-shadow: #4d7326 0 1px 1px; }
-.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-fromcomputer.ui-state-hover { border-color: #59781d; background: #80bf40 url('../images/sprites_16x16-scf81c570f3.png') 6px -46px no-repeat; background: url('../images/sprites_16x16-scf81c570f3.png') 6px -46px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #8cc653), color-stop(100%, #669933)); background: url('../images/sprites_16x16-scf81c570f3.png') 6px -46px no-repeat, -webkit-linear-gradient(#8cc653, #669933); background: url('../images/sprites_16x16-scf81c570f3.png') 6px -46px no-repeat, -moz-linear-gradient(#8cc653, #669933); background: url('../images/sprites_16x16-scf81c570f3.png') 6px -46px no-repeat, -o-linear-gradient(#8cc653, #669933); background: url('../images/sprites_16x16-scf81c570f3.png') 6px -46px no-repeat, -ms-linear-gradient(#8cc653, #669933); background: url('../images/sprites_16x16-scf81c570f3.png') 6px -46px no-repeat, linear-gradient(#8cc653, #669933); }
-.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-fromcomputer:active, .ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-fromcomputer:focus { padding: 8px 8px 8px 26px; border: none; background: #619130 url('../images/sprites_16x16-scf81c570f3.png') 7px -45px no-repeat; -moz-box-shadow: inset 0 1px 3px #17181a, 0 1px 0 rgba(255, 255, 255, 0.6); -webkit-box-shadow: inset 0 1px 3px #17181a, 0 1px 0 rgba(255, 255, 255, 0.6); -o-box-shadow: inset 0 1px 3px #17181a, 0 1px 0 rgba(255, 255, 255, 0.6); box-shadow: inset 0 1px 3px #17181a, 0 1px 0 rgba(255, 255, 255, 0.6); }
+.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-fromcomputer { position: relative; overflow: hidden; display: block; margin: 0 10px 0 0; }
 .ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-item-uploador { float: left; font-weight: bold; font-size: 22px; padding: 0 20px; line-height: 70px; display: none; }
 .ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone { -moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; -moz-box-shadow: #9a9a9a 0 0 3px 3px inset; -webkit-box-shadow: #9a9a9a 0 0 3px 3px inset; -o-box-shadow: #9a9a9a 0 0 3px 3px inset; box-shadow: #9a9a9a 0 0 3px 3px inset; border: 2px dashed gray; background: rgba(201, 205, 206, 0.8); display: none; height: 66px; width: 300px; float: left; }
 .ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone div { padding: 15px 0 0; line-height: 22px; font-size: 20px; font-weight: bold; text-align: center; }

css/UploadField.css

@@ -4,8 +4,6 @@
 /** ----------------------------------------------- Typography.  ------------------------------------------------ */
 /** ----------------------------------------------- Grid Units (px)  We have a vertical rhythm that the grid is based off both x (=horizontal) and y (=vertical). All internal padding and margins are scaled to this and accounting for paragraphs ------------------------------------------------ */
 /** ----------------------------------------------- Application Logo (CMS Logo) Must be 24px x 24px ------------------------------------------------ */
-/** Helper SCSS file for generating sprites for the interface. */
-/* CMS action button sprite mix-in for UploadField, copied from admin/scss/_forms.scss */
 .ss-uploadfield .clear { clear: both; }
 .ss-uploadfield .middleColumn { width: 526px; padding: 0; background: #fff; border: 1px solid #b3b3b3; -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #efefef), color-stop(10%, #ffffff), color-stop(90%, #ffffff), color-stop(100%, #efefef)); background-image: -webkit-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -moz-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -o-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -ms-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); }
 .ss-uploadfield .ss-uploadfield-item { margin: 0; padding: 15px; overflow: auto; }
@@ -17,25 +15,8 @@
 .ss-uploadfield .ss-uploadfield-item-name span { font-size: 11px; color: #848484; }
 .ss-uploadfield .ss-uploadfield-item-status { float: right; padding: 0 0 0 5px; }
 .ss-uploadfield .ss-uploadfield-item-status.ui-state-error-text { color: red; font-weight: bold; }
-.ss-uploadfield label.ss-ui-button { display: block; float: left; margin: 0 10px 0 0; }
-.ss-uploadfield label.ss-ui-button.ss-uploadfield-fromcomputer { position: relative; overflow: hidden; padding-left: 24px; padding-right: 6px; background: #e6e6e6 url('../images/sprites_16x16-scf81c570f3.png') 5px -46px no-repeat; background: url('../images/sprites_16x16-scf81c570f3.png') 5px -46px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -46px no-repeat, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -46px no-repeat, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -46px no-repeat, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -46px no-repeat, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -46px no-repeat, linear-gradient(#ffffff, #d9d9d9); }
-.ss-uploadfield label.ss-ui-button.ss-uploadfield-fromcomputer.ui-state-hover, .ss-uploadfield label.ss-ui-button.ss-uploadfield-fromcomputer:hover { background: white url('../images/sprites_16x16-scf81c570f3.png') 5px -46px no-repeat; background: url('../images/sprites_16x16-scf81c570f3.png') 5px -46px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -46px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -46px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -46px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -46px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -46px no-repeat, linear-gradient(#ffffff, #e6e6e6); }
-.ss-uploadfield label.ss-ui-button.ss-uploadfield-fromcomputer.ui-state-disabled { background-image: none; color: #444444; background: white url('../images/sprites_16x16-scf81c570f3.png') 5px -72px no-repeat; background: url('../images/sprites_16x16-scf81c570f3.png') 5px -72px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -72px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -72px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -72px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -72px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -72px no-repeat, linear-gradient(#ffffff, #e6e6e6); }
-.ss-uploadfield label.ss-ui-button.ss-uploadfield-fromfiles { padding-left: 24px; padding-right: 6px; background: #e6e6e6 url('../images/sprites_16x16-scf81c570f3.png') 5px -202px no-repeat; background: url('../images/sprites_16x16-scf81c570f3.png') 5px -202px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -202px no-repeat, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -202px no-repeat, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -202px no-repeat, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -202px no-repeat, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -202px no-repeat, linear-gradient(#ffffff, #d9d9d9); }
-.ss-uploadfield label.ss-ui-button.ss-uploadfield-fromfiles.ui-state-hover, .ss-uploadfield label.ss-ui-button.ss-uploadfield-fromfiles:hover { background: white url('../images/sprites_16x16-scf81c570f3.png') 5px -202px no-repeat; background: url('../images/sprites_16x16-scf81c570f3.png') 5px -202px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -202px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -202px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -202px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -202px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -202px no-repeat, linear-gradient(#ffffff, #e6e6e6); }
-.ss-uploadfield label.ss-ui-button.ss-uploadfield-fromfiles.ui-state-disabled { background-image: none; color: #444444; background: white url('../images/sprites_16x16-scf81c570f3.png') 5px -228px no-repeat; background: url('../images/sprites_16x16-scf81c570f3.png') 5px -228px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -228px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -228px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -228px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -228px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -228px no-repeat, linear-gradient(#ffffff, #e6e6e6); }
-.ss-uploadfield label.ss-ui-button.ss-uploadfield-startall { padding-left: 24px; padding-right: 6px; background: #e6e6e6 url('../images/sprites_16x16-scf81c570f3.png') 5px -150px no-repeat; background: url('../images/sprites_16x16-scf81c570f3.png') 5px -150px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -150px no-repeat, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -150px no-repeat, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -150px no-repeat, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -150px no-repeat, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -150px no-repeat, linear-gradient(#ffffff, #d9d9d9); }
-.ss-uploadfield label.ss-ui-button.ss-uploadfield-startall.ui-state-hover, .ss-uploadfield label.ss-ui-button.ss-uploadfield-startall:hover { background: white url('../images/sprites_16x16-scf81c570f3.png') 5px -150px no-repeat; background: url('../images/sprites_16x16-scf81c570f3.png') 5px -150px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -150px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -150px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -150px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -150px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -150px no-repeat, linear-gradient(#ffffff, #e6e6e6); }
-.ss-uploadfield label.ss-ui-button.ss-uploadfield-startall.ui-state-disabled { background-image: none; color: #444444; background: white url('../images/sprites_16x16-scf81c570f3.png') 5px -176px no-repeat; background: url('../images/sprites_16x16-scf81c570f3.png') 5px -176px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -176px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -176px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -176px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -176px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -176px no-repeat, linear-gradient(#ffffff, #e6e6e6); }
-.ss-uploadfield label.ss-ui-button.ss-uploadfield-item-delete { color: red; padding-left: 24px; padding-right: 6px; background: #e6e6e6 url('../images/sprites_16x16-scf81c570f3.png') 5px -98px no-repeat; background: url('../images/sprites_16x16-scf81c570f3.png') 5px -98px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -98px no-repeat, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -98px no-repeat, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -98px no-repeat, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -98px no-repeat, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -98px no-repeat, linear-gradient(#ffffff, #d9d9d9); }
-.ss-uploadfield label.ss-ui-button.ss-uploadfield-item-delete.ui-state-hover, .ss-uploadfield label.ss-ui-button.ss-uploadfield-item-delete:hover { background: white url('../images/sprites_16x16-scf81c570f3.png') 5px -98px no-repeat; background: url('../images/sprites_16x16-scf81c570f3.png') 5px -98px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -98px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -98px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -98px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -98px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -98px no-repeat, linear-gradient(#ffffff, #e6e6e6); }
-.ss-uploadfield label.ss-ui-button.ss-uploadfield-item-delete.ui-state-disabled { background-image: none; color: #444444; background: white url('../images/sprites_16x16-scf81c570f3.png') 5px -124px no-repeat; background: url('../images/sprites_16x16-scf81c570f3.png') 5px -124px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -124px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -124px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -124px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -124px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -124px no-repeat, linear-gradient(#ffffff, #e6e6e6); }
-.ss-uploadfield label.ss-ui-button.ss-uploadfield-item-remove { padding-left: 24px; padding-right: 6px; background: #e6e6e6 url('../images/sprites_16x16-scf81c570f3.png') 5px -306px no-repeat; background: url('../images/sprites_16x16-scf81c570f3.png') 5px -306px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -306px no-repeat, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -306px no-repeat, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -306px no-repeat, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -306px no-repeat, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -306px no-repeat, linear-gradient(#ffffff, #d9d9d9); }
-.ss-uploadfield label.ss-ui-button.ss-uploadfield-item-remove.ui-state-hover, .ss-uploadfield label.ss-ui-button.ss-uploadfield-item-remove:hover { background: white url('../images/sprites_16x16-scf81c570f3.png') 5px -306px no-repeat; background: url('../images/sprites_16x16-scf81c570f3.png') 5px -306px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -306px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -306px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -306px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -306px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -306px no-repeat, linear-gradient(#ffffff, #e6e6e6); }
-.ss-uploadfield label.ss-ui-button.ss-uploadfield-item-remove.ui-state-disabled { background-image: none; color: #444444; background: white url('../images/sprites_16x16-scf81c570f3.png') 5px -332px no-repeat; background: url('../images/sprites_16x16-scf81c570f3.png') 5px -332px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -332px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -332px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -332px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -332px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -332px no-repeat, linear-gradient(#ffffff, #e6e6e6); }
-.ss-uploadfield label.ss-ui-button.ss-uploadfield-item-edit { padding-left: 24px; padding-right: 6px; background: #e6e6e6 url('../images/sprites_16x16-scf81c570f3.png') 5px -254px no-repeat; background: url('../images/sprites_16x16-scf81c570f3.png') 5px -254px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -254px no-repeat, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -254px no-repeat, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -254px no-repeat, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -254px no-repeat, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -254px no-repeat, linear-gradient(#ffffff, #d9d9d9); }
-.ss-uploadfield label.ss-ui-button.ss-uploadfield-item-edit.ui-state-hover, .ss-uploadfield label.ss-ui-button.ss-uploadfield-item-edit:hover { background: white url('../images/sprites_16x16-scf81c570f3.png') 5px -254px no-repeat; background: url('../images/sprites_16x16-scf81c570f3.png') 5px -254px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -254px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -254px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -254px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -254px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -254px no-repeat, linear-gradient(#ffffff, #e6e6e6); }
-.ss-uploadfield label.ss-ui-button.ss-uploadfield-item-edit.ui-state-disabled { background-image: none; color: #444444; background: white url('../images/sprites_16x16-scf81c570f3.png') 5px -280px no-repeat; background: url('../images/sprites_16x16-scf81c570f3.png') 5px -280px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -280px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -280px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -280px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -280px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -280px no-repeat, linear-gradient(#ffffff, #e6e6e6); }
+.ss-uploadfield .ss-ui-button { display: block; float: left; margin: 0 10px 0 0; }
+.ss-uploadfield .ss-ui-button.ss-uploadfield-fromcomputer { position: relative; overflow: hidden; }
 .ss-uploadfield .ss-uploadfield-files { margin: 0; padding: 0; max-height: 272px; overflow: auto; position: relative; }
 .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item, .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item.ui-state-error { border: 0; border-bottom: 1px solid #b3b3b3; background: none; color: #444444; }
 .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item:last-child, .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item.ui-state-error:last-child { border-bottom: 0; }
@@ -45,9 +26,8 @@
 .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-progressbar { border: 1px solid gray; background-color: #92a6b3; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #92a6b3), color-stop(11%, #90aab8), color-stop(22%, #96b1bf), color-stop(33%, #9eb4c1), color-stop(44%, #a7bac7), color-stop(100%, #c1d5dc)); background-image: -webkit-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: -moz-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: -o-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: -ms-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); }
 .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-progressbarvalue { border: 0; width: 0%; background: #60b3dd url(../images/progressbar_blue.gif) repeat-x left center; }
 .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-cancel, .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-start { position: absolute; top: 10px; right: 0; }
-.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-cancel button, .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-start button { display: block; overflow: hidden; text-indent: -9999px; padding: 0; margin: 0; border: 0; width: 16px; height: 16px; cursor: pointer; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; background: url('../images/sprites_16x16-scf81c570f3.png') 0 0 no-repeat; }
+.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-cancel button, .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-start button { display: block; overflow: hidden; text-indent: -9999px; padding: 0; margin: 0; border: 0; width: 16px; height: 16px; cursor: pointer; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; }
 .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-start { right: 20px; }
-.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-start button { background: url('../images/sprites_16x16-scf81c570f3.png') 0 -156px no-repeat; }
 .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-editform { /* don't use display none, for it will break jQuery('iframe').contents().height() */ height: 0; overflow: hidden; clear: both; margin-top: 8px; }
 .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-editform iframe { width: 100%; }
 .ss-uploadfield .ss-uploadfield-addfile.borderTop { border-top: 1px solid #b3b3b3; }

filesystem/Folder.php

@@ -443,31 +443,42 @@ class Folder extends File {
 		));
 
 		$titleField = ($this->ID && $this->ID != "root") ? new TextField("Title", _t('Folder.TITLE')) : new HiddenField("Title");
+
+		if($this->canCreate()) {
+			$uploadBtn = new LiteralField(
+				'UploadButton', 
+				sprintf(
+					'<a class="ss-ui-button ss-ui-action-constructive icon-accept cms-panel-link" data-target-panel=".cms-content" href="%s">%s</a>',
+					Controller::join_links(singleton('CMSFileAddController')->Link(), '?ID=' . $this->ID),
+					_t('Folder.UploadFilesButton', 'Upload')
+				)
+			);	
+		} else {
+			$uploadBtn = null;
+		}
+
+		if(!$this->hasMethod('canAddChildren') || ($this->hasMethod('canAddChildren') && $this->canAddChildren())) {
+			$addFolderBtn = new LiteralField(
+				'AddFolderButton', 
+				sprintf(
+					'<a class="ss-ui-button ss-ui-action-constructive icon-accept cms-page-add-button" href="%s">%s</a>',
+					singleton('CMSFileAddController')->Link(),
+					_t('Folder.AddFolderButton', 'Add folder')
+				)
+			);
+		} else {
+			$addFolderBtn = '';
+		}
+		
 		
 		$fields = new FieldList(
 			// The tabs of Root are used to generate the top tabs 
 			new TabSet('Root',
 				new Tab('listview', _t('AssetAdmin.ListView', 'List View'),
 					$titleField,
-					new LiteralField(
-						'UploadButton', 
-						sprintf(
-							'<div class="cms-content-constructive-actions">' .
-							'<a class="ss-ui-button ss-ui-action-constructive cms-panel-link" data-target-panel=".cms-content" href="%s">%s</a>' . 
-							'</div>',
-							Controller::join_links(singleton('CMSFileAddController')->Link(), '?ID=' . $this->ID),
-							_t('Folder.UploadFilesButton', 'Upload')
-						)
-					),
-					new LiteralField(
-						'AddFolderButton', 
-						sprintf(
-							'<div class="cms-content-constructive-actions">' .
-							'<a class="ss-ui-button ss-ui-action-constructive cms-page-add-button" href="%s">%s</a>' . 
-							'</div>',
-							singleton('CMSFileAddController')->Link(),
-							_t('Folder.AddFolderButton', 'Add folder')
-						)
+					$actionsComposite = new CompositeField(
+						$uploadBtn,
+						$addFolderBtn
 					),
 					$gridField,
 					new HiddenField("ID"),
@@ -476,6 +487,8 @@ class Folder extends File {
 			)			
 		);
 		
+		$actionsComposite->addExtraClass('cms-actions-row');
+
 		$this->extend('updateCMSFields', $fields);
 		
 		return $fields;

forms/HtmlEditorField.php

@@ -315,13 +315,17 @@ class HtmlEditorField_Toolbar extends RequestHandler {
 				)
 			),
 			new FieldList(
-				$removeAction = new ResetFormAction('remove', _t('HtmlEditorField.BUTTONREMOVELINK', 'Remove link')),
-				$insertAction = new FormAction('insert', _t('HtmlEditorField.BUTTONINSERTLINK', 'Insert link'))
+				Object::create('ResetFormAction', 'remove', _t('HtmlEditorField.BUTTONREMOVELINK', 'Remove link'))
+					->addExtraClass('ss-ui-action-destructive')
+					->setUseButtonTag(true)
+				,
+				FormAction::create('insert', _t('HtmlEditorField.BUTTONINSERTLINK', 'Insert link'))
+					->addExtraClass('ss-ui-action-constructive')
+					->setAttribute('data-icon', 'accept')
+					->setUseButtonTag(true)
 			)
 		);
 		
-		$insertAction->addExtraClass('ss-ui-action-constructive');
-		$removeAction->addExtraClass('ss-ui-action-destructive');
 		$contentComposite->addExtraClass('content');
 		
 		$form->unsetValidator();
@@ -380,9 +384,11 @@ class HtmlEditorField_Toolbar extends RequestHandler {
 		);
 		
 		$actions = new FieldList(
-			$insertAction = new FormAction('insertimage', _t('HtmlEditorField.BUTTONINSERT', 'Insert'))
+			FormAction::create('insertimage', _t('HtmlEditorField.BUTTONINSERT', 'Insert'))
+				->addExtraClass('ss-ui-action-constructive')
+				->setAttribute('data-icon', 'accept')
+				->setUseButtonTag(true)
 		);
-		$insertAction->addExtraClass('ss-ui-action-constructive');
 
 		$form = new Form(
 			$this->controller,

forms/UploadField.php

@@ -738,7 +738,7 @@ class UploadField_ItemHandler extends RequestHandler {
 			$actions = $file->{$this->parent->getConfig('fileEditActions')}();
 		} else {
 			$actions = new FieldList($saveAction = new FormAction('doEdit', _t('UploadField.DOEDIT', 'Save')));
-			$saveAction->addExtraClass('ss-ui-action-constructive');
+			$saveAction->addExtraClass('ss-ui-action-constructive icon-accept');
 		}
 		if (is_a($this->parent->getConfig('fileEditValidator'), 'Validator')) {
 			$validator = $this->parent->getConfig('fileEditValidator');
@@ -830,7 +830,7 @@ class UploadField_SelectHandler extends RequestHandler {
 	 */
 	function Form() {
 		$action = new FormAction('doAttach', _t('UploadField.AttachFile', 'Attach file(s)'));
-		$action->addExtraClass('ss-ui-action-constructive');
+		$action->addExtraClass('ss-ui-action-constructive icon-accept');
 		return new Form(
 			$this,
 			'Form',

forms/gridfield/GridFieldPopupForms.php

@@ -180,7 +180,7 @@ class GridFieldPopupForm_ItemRequest extends RequestHandler {
 				$saveAction = new FormAction('doSave', _t('GridFieldDetailsForm.Save', 'Save'))
 			)
 		);
-		$saveAction->addExtraClass('ss-ui-action-constructive');
+		$saveAction->addExtraClass('ss-ui-action-constructive icon-accept');
 		$form->loadDataFrom($this->record);
 		return $form;
 	}

scss/AssetUploadField.scss

@@ -2,7 +2,6 @@
 
 // TODO we need a seperated file for styles that are used in both cms and front end (such as buttons)
 @import "../admin/scss/themes/default.scss";
-@import "sprites.scss";
 
 #AssetUploadField {
 	border-bottom: 0;
@@ -89,7 +88,7 @@
 			left: 0;
 			z-index: 0;
 		}
-		label.ss-ui-button {
+		.ss-ui-button {
 			background: none;
 			border: 0;
 			@include box-shadow(none);
@@ -101,18 +100,15 @@
 				// TODO tmp hack until we have permissions and can disable delete
 				display: none;
 			}
-			&.ss-uploadfield-fromfiles {
-				//@include actionButtonSprite('network-cloud');
-			}
-			&.ss-uploadfield-item-delete {
-				//color: $color-button-destructive;
-				//@include actionButtonSprite('minus-circle');
-			}
 			&.ss-uploadfield-item-edit {
 				padding-top: 0;
 				padding-bottom: 0;
 				line-height: 30px;
 			}
+
+			.ui-icon {
+				display: none;
+			}
 		}
 		.ss-uploadfield-item-progress {
 			width: 100%;
@@ -151,7 +147,7 @@
 				height: 16px;
 				cursor: pointer;
 				@include single-box-shadow(none);
-				background: sprite($sprites16, cross-circle) no-repeat;
+				// background: sprite($sprites16, cross-circle) no-repeat;
 			}
 		}
 		
@@ -178,7 +174,6 @@
 			overflow: hidden;
 			display: block;
 			margin: 0 10px 0 0;
-			@include actionButtonSpriteConstructive('drive-upload');
 		}
 		.ss-uploadfield-item-uploador {
 			float: left;

scss/UploadField.scss

@@ -2,7 +2,6 @@
 
 // TODO we need a seperated file for styles that are used in both cms and front end (such as buttons)
 @import "../admin/scss/themes/default.scss";
-@import "sprites.scss";
 
 
 .ss-uploadfield {
@@ -67,7 +66,7 @@
 			font-weight: bold;
 		}
 	}
-	label.ss-ui-button {
+	.ss-ui-button {
 		display: block;
 		float: left;
 		margin: 0 10px 0 0;
@@ -75,23 +74,6 @@
 		&.ss-uploadfield-fromcomputer {
 			position: relative;
 			overflow: hidden;
-			@include actionButtonSprite('drive-upload');
-		}
-		&.ss-uploadfield-fromfiles {
-			@include actionButtonSprite('network-cloud');
-		}
-		&.ss-uploadfield-startall {
-			@include actionButtonSprite('navigation');
-		}
-		&.ss-uploadfield-item-delete {
-			color: $color-button-destructive;
-			@include actionButtonSprite('minus-circle');
-		}
-		&.ss-uploadfield-item-remove {
-			@include actionButtonSprite('plug-disconnect-prohibition');
-		}
-		&.ss-uploadfield-item-edit {
-			@include actionButtonSprite('pencil');
 		}
 	}
 	.ss-uploadfield-files {
@@ -160,13 +142,13 @@
 				height: 16px;
 				cursor: pointer;
 				@include single-box-shadow(none);
-				background: sprite($sprites16, cross-circle) no-repeat;
+				// background: sprite($sprites16, cross-circle) no-repeat;
 			}
 		}
 		.ss-uploadfield-item-start {
 			right: 20px;
 			button {
-				background: sprite($sprites16, navigation) no-repeat;
+				// background: sprite($sprites16, navigation) no-repeat;
 			}
 		}
 		.ss-uploadfield-item-editform {

scss/_sprites.scss

@@ -1,80 +0,0 @@
-/**
- * Helper SCSS file for generating sprites for the interface.
- */
-@import "compass/utilities/sprites/base";
-
-//$sprites32: sprite-map("sprites_32x32/*.png", $spacing: 10px);
-	
-$sprites16: sprite-map("sprites_16x16/*.png", $spacing: 10px);
-	
-/* CMS action button sprite mix-in for UploadField, copied from admin/scss/_forms.scss */
-@mixin actionButtonSprite($name) {
-  	padding-left: 24px;
-	padding-right: 6px;
-
-	@include background($color-button-generic sprite($sprites16, $name, 5px, 6px) no-repeat);
-	@include background(sprite($sprites16, $name, 5px, 6px) no-repeat,
-		linear-gradient(color-stops(
-			lighten($color-button-generic, 10%),
-			darken($color-button-generic, 5%)
-		))
-	);
-	&.ui-state-hover,
-	&:hover {
-		@include background(lighten($color-button-generic, 10%) sprite($sprites16, $name, 5px, 6px) no-repeat);
-		@include background(sprite($sprites16, $name, 5px, 6px) no-repeat,
-			linear-gradient(color-stops(
-				lighten($color-button-generic, 20%),
-				$color-button-generic
-			))
-		);
-	}
-	&.ui-state-disabled {
-	    background-image: none;
-	    color: $color-text;
-	    @include background(lighten($color-button-generic, 20%) sprite($sprites16, $name+_disabled, 5px, 6px) no-repeat);
-		@include background(sprite($sprites16, $name+_disabled, 5px, 6px) no-repeat,
-			linear-gradient(color-stops(
-				lighten($color-button-generic, 20%),
-				$color-button-generic
-			))
-		);
-	}
-}
-@mixin actionButtonSpriteConstructive($name) {
-  	background-image: none;
-	padding-left: 25px;
-	padding-right: 7px;
-	font-weight: bold;
-	margin-left: $grid-x;
-	color: $color-text-light;
-	border-color: $color-button-constructive-border;
-	border-bottom-color: darken($color-button-constructive-border, 10%);			
-	@include background($color-button-constructive sprite($sprites16, $name, 6, 6) no-repeat);
-	@include background(sprite($sprites16, $name
-	, 6, 6) no-repeat,
-		linear-gradient(color-stops(
-			lighten($color-button-constructive, 10%),
-			darken($color-button-constructive, 5%)
-		))
-	);
-
-	@include text-shadow(darken($color-button-constructive, 10%) 0 1px 1px);
-
-	&.ui-state-hover {
-		border-color: darken($color-button-constructive-border, 10%);
-		@include background(lighten($color-button-constructive, 10%) sprite($sprites16, $name, 6, 6) no-repeat);
-		@include background(sprite($sprites16, $name, 6, 6) no-repeat,
-			linear-gradient(color-stops(
-				lighten($color-button-constructive, 15%),
-				$color-button-constructive
-			))
-		);
-	}
-	&:active, &:focus {
-		padding: $grid-y 8px $grid-y 26px;
-		border: none;
-		@include background(darken($color-button-constructive, 2%) sprite($sprites16, $name, 7, 7) no-repeat);
-		@include box-shadow(inset 0 1px 3px rgb(23, 24, 26), 0 1px 0 rgba(255, 255, 255, .6));
-	}
-}

security/Member.php

@@ -1557,9 +1557,11 @@ class Member_ProfileForm extends Form {
 		$fields->push(new HiddenField('ID','ID',$member->ID));
 
 		$actions = new FieldList(
- 			$saveAction = new FormAction('dosave',_t('CMSMain.SAVE', 'Save'), null, null, "ss-ui-button ss-ui-action-constructive")
+ 			FormAction::create('dosave',_t('CMSMain.SAVE', 'Save'))
+ 				->addExtraClass('ss-ui-button ss-ui-action-constructive')
+ 				->setAttribute('data-icon', 'accept')
+ 				->setUseButtonTag(true)
 		);
-		$saveAction->addExtraClass('ss-ui-action-constructive');
 		
 		$validator = new Member_Validator();
 		

templates/AssetUploadField.ss

@@ -1,9 +1,10 @@
 <div class="ss-uploadfield-item ss-uploadfield-addfile">
 	<div class="ss-uploadfield-item-info">
-		<label class="ss-uploadfield-fromcomputer ss-ui-button ui-corner-all" title="<% _t('AssetUploadField.FROMCOMPUTERINFO', 'Upload from your computer') %>" for="$id">
-			<input id="$id" name="$getName" class="$extraClass" data-config="$configString" type="file"<% if $multiple %> multiple="multiple"<% end_if %><% if $TabIndex %> tabindex="$TabIndex"<% end_if %> />
-			<span><% _t('AssetUploadField.FROMCOMPUTER', 'Choose files from your computer') %></span>
+		<label class="ss-uploadfield-fromcomputer ss-ui-button ss-ui-action-constructive" title="<% _t('AssetUploadField.FROMCOMPUTERINFO', 'Upload from your computer') %>" data-icon="drive-upload">
+			<% _t('AssetUploadField.FROMCOMPUTER', 'Choose files from your computer') %>
+			<input id="$id" name="$getName" class="$extraClass ss-uploadfield-fromcomputer-fileinput" data-config="$configString" type="file"<% if $multiple %> multiple="multiple"<% end_if %><% if $TabIndex %> tabindex="$TabIndex"<% end_if %> title="<% _t('AssetUploadField.FROMCOMPUTER', 'Choose files from your computer') %>" />
 		</label>
+		
 		<div class="clear"><!-- --></div>
 	</div>
 	<div class="ss-uploadfield-item-uploador">

templates/Includes/UploadField_FileButtons.ss

@@ -1,9 +1,9 @@
 <% if canEdit %>
-	<label class="ss-uploadfield-item-edit ss-ui-button ui-corner-all" title="<% _t('UploadField.EDITINFO', 'Edit this file') %>"><% _t('UploadField.EDIT', 'Edit') %></label>
+	<button class="ss-uploadfield-item-edit ss-ui-button ui-corner-all" title="<% _t('UploadField.EDITINFO', 'Edit this file') %>" data-icon="pencil"><% _t('UploadField.EDIT', 'Edit') %></button>
 	<% if UploadFieldHasRelation %>
-	<label data-href="$UploadFieldRemoveLink" class="ss-uploadfield-item-remove ss-ui-button ui-corner-all" title="<% _t('UploadField.REMOVEINFO', 'Remove this file from here, but do not delete it from the file store') %>"><% _t('UploadField.REMOVE', 'Remove') %></label>
+	<button data-href="$UploadFieldRemoveLink" class="ss-uploadfield-item-remove ss-ui-button ui-corner-all" title="<% _t('UploadField.REMOVEINFO', 'Remove this file from here, but do not delete it from the file store') %>" data-icon="plug-disconnect-prohibition"><% _t('UploadField.REMOVE', 'Remove') %></button>
 <% end_if %>
 <% end_if %>
 <% if canDelete %>
-	<label data-href="$UploadFieldDeleteLink" class="ss-uploadfield-item-delete ss-ui-button ui-corner-all" title="<% _t('UploadField.DELETEINFO', 'Permanently delete this file from the file store') %>"><% _t('UploadField.DELETE', 'Delete from files') %></label>
+	<button data-href="$UploadFieldDeleteLink" class="ss-uploadfield-item-delete ss-ui-button ui-corner-all" title="<% _t('UploadField.DELETEINFO', 'Permanently delete this file from the file store') %>" data-icon="minus-circle"><% _t('UploadField.DELETE', 'Delete from files') %></button>
 <% end_if %>

templates/UploadField.ss

@@ -43,13 +43,13 @@
 					<% _t('UploadField.ATTACHFILE', 'Attach a file') %>
 				<% end_if %>
 			</b></label>
-			<label class="ss-uploadfield-fromcomputer ss-ui-button ui-corner-all" title="<% _t('UploadField.FROMCOMPUTERINFO', 'Upload from your computer') %>" for="$id">
-				<input id="$id" name="$getName" class="$extraClass" data-config="$configString" type="file"<% if $multiple %> multiple="multiple"<% end_if %><% if $TabIndex %> tabindex="$TabIndex"<% end_if %> />
-				<span><% _t('UploadField.FROMCOMPUTER', 'From your computer') %></span>
+			<label class="ss-uploadfield-fromcomputer ss-ui-button ui-corner-all" title="<% _t('UploadField.FROMCOMPUTERINFO', 'Upload from your computer') %>" data-icon="drive-upload">
+				<% _t('UploadField.FROMCOMPUTER', 'From your computer') %>
+				<input id="$id" name="$getName" class="$extraClass ss-uploadfield-fromcomputer-fileinput" data-config="$configString" type="file"<% if $multiple %> multiple="multiple"<% end_if %><% if $TabIndex %> tabindex="$TabIndex"<% end_if %> />
 			</label>
-			<label class="ss-uploadfield-fromfiles ss-ui-button ui-corner-all" title="<% _t('UploadField.FROMCOMPUTERINFO', 'Select from from files') %>"><% _t('UploadField.FROMCOMPUTER', 'From files') %></label>
+			<button class="ss-uploadfield-fromfiles ss-ui-button ui-corner-all" title="<% _t('UploadField.FROMCOMPUTERINFO', 'Select from from files') %>" data-icon="network-cloud"><% _t('UploadField.FROMCOMPUTER', 'From files') %></button>
 			<% if not $config.autoUpload %>
-				<label class="ss-uploadfield-startall ss-ui-button ui-corner-all" title="<% _t('UploadField.STARTALLINFO', 'Start all uploads') %>"><% _t('UploadField.STARTALL', 'Start all') %></label>
+				<button class="ss-uploadfield-startall ss-ui-button ui-corner-all" title="<% _t('UploadField.STARTALLINFO', 'Start all uploads') %>" data-icon="navigation"><% _t('UploadField.STARTALL', 'Start all') %></button>
 			<% end_if %>
 			<div class="clear"><!-- --></div>
 		</div>