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

ENHANCEMENT Buttonsets for CMS (fixes #6631), using new jQuery UI button() to style buttons in CMS, moved JavaScript to LeftAndMain.js as the button styles only apply with an .Actions container now

Browse Source
This commit is contained in:
Wolf Vollprecht 2012-01-23 09:01:30 +01:00 committed by Ingo Schommer
parent d456e86cbd
commit 0444d4ea16
4 changed files with 114 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
admin/css/screen.css
View File

@ -121,28 +121,33 @@ form.stacked .field .middleColumn, .field.stacked .middleColumn { margin-left: 0
.cms-preview-toggle-link { display: block; float: right; font-size: 12px; text-decoration: none; } .cms-preview-toggle-link { display: block; float: right; font-size: 12px; text-decoration: none; }
.cms input.loading, .cms input.ui-state-default.loading, .cms .ui-widget-content input.ui-state-default.loading, .cms .ui-widget-header input.ui-state-default.loading { padding-left: 24px; color: #525252; background: #eeeded url(../../images/network-save.gif) no-repeat 4px center; border-color: #d5d3d3; cursor: default; text-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; } .cms 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: 7px 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; text-shadow: white 0 1px 1px; background: #e6e6e6; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: -webkit-linear-gradient(#ffffff, #d9d9d9); background: -moz-linear-gradient(#ffffff, #d9d9d9); background: -o-linear-gradient(#ffffff, #d9d9d9); background: -ms-linear-gradient(#ffffff, #d9d9d9); background: linear-gradient(#ffffff, #d9d9d9); /* constructive */ /* destructive */ /* generic action buttons */ } .cms .ss-ui-button { /* all buttons */ padding: 5px 12px; font-weight: bold; text-decoration: none; margin: 0; line-height: 16px; color: #393939; background-color: #e6e6e6; border: 1px solid #c0c0c2; border-bottom: 1px solid #a6a6a9; cursor: pointer; text-shadow: white 0 1px 1px; background: #e6e6e6; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: -webkit-linear-gradient(#ffffff, #d9d9d9); background: -moz-linear-gradient(#ffffff, #d9d9d9); background: -o-linear-gradient(#ffffff, #d9d9d9); background: -ms-linear-gradient(#ffffff, #d9d9d9); background: linear-gradient(#ffffff, #d9d9d9); /* constructive */ /* destructive */ /* generic action buttons */ }
.cms .ss-ui-button.ui-state-hover { border: 1px solid #a6a6a9; text-shadow: white 0 1px 1px; background: white; 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); } .cms .ss-ui-button.buttonset { margin: 0 -2px; }
.cms .ss-ui-button:focus, .cms .ss-ui-button:active { border: 1px solid white; -moz-box-shadow: 0 3px 3px gray inset; -webkit-box-shadow: 0 3px 3px gray inset; -o-box-shadow: 0 3px 3px gray inset; box-shadow: 0 3px 3px gray inset; background: #9a9a9a; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e6e6e6), color-stop(100%, #9a9a9a)); background: -webkit-linear-gradient(#e6e6e6, #9a9a9a); background: -moz-linear-gradient(#e6e6e6, #9a9a9a); background: -o-linear-gradient(#e6e6e6, #9a9a9a); background: -ms-linear-gradient(#e6e6e6, #9a9a9a); background: linear-gradient(#e6e6e6, #9a9a9a); } .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.ss-ui-action-constructive { 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/btn_icons-sb7da7f8cce.png') 6px 6px no-repeat; background: url('../images/btn_icons-sb7da7f8cce.png') 6px 6px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #80bf40), color-stop(100%, #59862d)); background: url('../images/btn_icons-sb7da7f8cce.png') 6px 6px no-repeat, -webkit-linear-gradient(#80bf40, #59862d); background: url('../images/btn_icons-sb7da7f8cce.png') 6px 6px no-repeat, -moz-linear-gradient(#80bf40, #59862d); background: url('../images/btn_icons-sb7da7f8cce.png') 6px 6px no-repeat, -o-linear-gradient(#80bf40, #59862d); background: url('../images/btn_icons-sb7da7f8cce.png') 6px 6px no-repeat, -ms-linear-gradient(#80bf40, #59862d); background: url('../images/btn_icons-sb7da7f8cce.png') 6px 6px no-repeat, linear-gradient(#80bf40, #59862d); text-shadow: #4d7326 0 1px 1px; } .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.ui-state-hover { border-color: #59781d; background: #80bf40 url('../images/btn_icons-sb7da7f8cce.png') 6px 6px no-repeat; background: url('../images/btn_icons-sb7da7f8cce.png') 6px 6px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #8cc653), color-stop(100%, #669933)); background: url('../images/btn_icons-sb7da7f8cce.png') 6px 6px no-repeat, -webkit-linear-gradient(#8cc653, #669933); background: url('../images/btn_icons-sb7da7f8cce.png') 6px 6px no-repeat, -moz-linear-gradient(#8cc653, #669933); background: url('../images/btn_icons-sb7da7f8cce.png') 6px 6px no-repeat, -o-linear-gradient(#8cc653, #669933); background: url('../images/btn_icons-sb7da7f8cce.png') 6px 6px no-repeat, -ms-linear-gradient(#8cc653, #669933); background: url('../images/btn_icons-sb7da7f8cce.png') 6px 6px no-repeat, linear-gradient(#8cc653, #669933); } .cms .ss-ui-button.ss-ui-action-constructive { background-image: none; padding-left: 24px; padding-right: 6px; font-weight: bold; margin-left: 8px; color: white; border-color: #78a127; border-bottom-color: #59781d; background: #669933 url('../images/btn_icons-sb7da7f8cce.png') 5px 5px no-repeat; background: url('../images/btn_icons-sb7da7f8cce.png') 5px 5px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #80bf40), color-stop(100%, #59862d)); background: url('../images/btn_icons-sb7da7f8cce.png') 5px 5px no-repeat, -webkit-linear-gradient(#80bf40, #59862d); background: url('../images/btn_icons-sb7da7f8cce.png') 5px 5px no-repeat, -moz-linear-gradient(#80bf40, #59862d); background: url('../images/btn_icons-sb7da7f8cce.png') 5px 5px no-repeat, -o-linear-gradient(#80bf40, #59862d); background: url('../images/btn_icons-sb7da7f8cce.png') 5px 5px no-repeat, -ms-linear-gradient(#80bf40, #59862d); background: url('../images/btn_icons-sb7da7f8cce.png') 5px 5px no-repeat, linear-gradient(#80bf40, #59862d); text-shadow: #4d7326 0 1px 1px; }
.cms .ss-ui-button.ss-ui-action-constructive:active, .cms .ss-ui-button.ss-ui-action-constructive:focus { padding: 8px 8px 8px 26px; border: none; background: #619130 url('../images/btn_icons-sb7da7f8cce.png') 7px 7px 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.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-sb7da7f8cce.png') 6px 6px no-repeat; background: url('../images/btn_icons-sb7da7f8cce.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-sb7da7f8cce.png') 5px 5px no-repeat, -webkit-linear-gradient(#8cc653, #669933); background: url('../images/btn_icons-sb7da7f8cce.png') 5px 5px no-repeat, -moz-linear-gradient(#8cc653, #669933); background: url('../images/btn_icons-sb7da7f8cce.png') 5px 5px no-repeat, -o-linear-gradient(#8cc653, #669933); background: url('../images/btn_icons-sb7da7f8cce.png') 5px 5px no-repeat, -ms-linear-gradient(#8cc653, #669933); background: url('../images/btn_icons-sb7da7f8cce.png') 5px 5px no-repeat, linear-gradient(#8cc653, #669933); }
.cms .ss-ui-button.cms-page-add-button { 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/btn_icons-sb7da7f8cce.png') 6px -48px no-repeat; background: url('../images/btn_icons-sb7da7f8cce.png') 6px -48px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #80bf40), color-stop(100%, #59862d)); background: url('../images/btn_icons-sb7da7f8cce.png') 6px -48px no-repeat, -webkit-linear-gradient(#80bf40, #59862d); background: url('../images/btn_icons-sb7da7f8cce.png') 6px -48px no-repeat, -moz-linear-gradient(#80bf40, #59862d); background: url('../images/btn_icons-sb7da7f8cce.png') 6px -48px no-repeat, -o-linear-gradient(#80bf40, #59862d); background: url('../images/btn_icons-sb7da7f8cce.png') 6px -48px no-repeat, -ms-linear-gradient(#80bf40, #59862d); background: url('../images/btn_icons-sb7da7f8cce.png') 6px -48px no-repeat, linear-gradient(#80bf40, #59862d); text-shadow: #4d7326 0 1px 1px; } .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-sb7da7f8cce.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.ui-state-hover { border-color: #59781d; background: #80bf40 url('../images/btn_icons-sb7da7f8cce.png') 6px -48px no-repeat; background: url('../images/btn_icons-sb7da7f8cce.png') 6px -48px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #8cc653), color-stop(100%, #669933)); background: url('../images/btn_icons-sb7da7f8cce.png') 6px -48px no-repeat, -webkit-linear-gradient(#8cc653, #669933); background: url('../images/btn_icons-sb7da7f8cce.png') 6px -48px no-repeat, -moz-linear-gradient(#8cc653, #669933); background: url('../images/btn_icons-sb7da7f8cce.png') 6px -48px no-repeat, -o-linear-gradient(#8cc653, #669933); background: url('../images/btn_icons-sb7da7f8cce.png') 6px -48px no-repeat, -ms-linear-gradient(#8cc653, #669933); background: url('../images/btn_icons-sb7da7f8cce.png') 6px -48px no-repeat, linear-gradient(#8cc653, #669933); } .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-sb7da7f8cce.png') 5px -49px no-repeat; background: url('../images/btn_icons-sb7da7f8cce.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-sb7da7f8cce.png') 5px -49px no-repeat, -webkit-linear-gradient(#80bf40, #59862d); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -49px no-repeat, -moz-linear-gradient(#80bf40, #59862d); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -49px no-repeat, -o-linear-gradient(#80bf40, #59862d); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -49px no-repeat, -ms-linear-gradient(#80bf40, #59862d); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -49px no-repeat, linear-gradient(#80bf40, #59862d); text-shadow: #4d7326 0 1px 1px; }
.cms .ss-ui-button.cms-page-add-button:active, .cms .ss-ui-button.cms-page-add-button:focus { padding: 8px 8px 8px 26px; border: none; background: #619130 url('../images/btn_icons-sb7da7f8cce.png') 7px -47px 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.ui-state-hover, .cms .ss-ui-button.cms-page-add-button:hover { border-color: #59781d; background: #80bf40 url('../images/btn_icons-sb7da7f8cce.png') 6px -48px no-repeat; background: url('../images/btn_icons-sb7da7f8cce.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-sb7da7f8cce.png') 5px -49px no-repeat, -webkit-linear-gradient(#8cc653, #669933); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -49px no-repeat, -moz-linear-gradient(#8cc653, #669933); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -49px no-repeat, -o-linear-gradient(#8cc653, #669933); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -49px no-repeat, -ms-linear-gradient(#8cc653, #669933); background: url('../images/btn_icons-sb7da7f8cce.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-sb7da7f8cce.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.ss-ui-action-destructive { color: red; background-color: #e6e6e6; } .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-sb7da7f8cce.png') 5px -158px no-repeat; background: url('../images/btn_icons-sb7da7f8cce.png') 5px -158px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -158px no-repeat, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -158px no-repeat, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -158px no-repeat, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -158px no-repeat, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -158px no-repeat, linear-gradient(#ffffff, #d9d9d9); } .cms .ss-ui-button.ss-ui-action-destructive.delete { padding-left: 24px; padding-right: 6px; background: #e6e6e6 url('../images/btn_icons-sb7da7f8cce.png') 5px -158px no-repeat; background: url('../images/btn_icons-sb7da7f8cce.png') 5px -159px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -159px no-repeat, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -159px no-repeat, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -159px no-repeat, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -159px no-repeat, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -159px no-repeat, linear-gradient(#ffffff, #d9d9d9); }
.cms .ss-ui-button.ss-ui-action-destructive.delete.ui-state-hover { background: white url('../images/btn_icons-sb7da7f8cce.png') 5px -158px no-repeat; background: url('../images/btn_icons-sb7da7f8cce.png') 5px -158px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -158px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -158px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -158px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -158px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -158px no-repeat, linear-gradient(#ffffff, #e6e6e6); } .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-sb7da7f8cce.png') 5px -158px no-repeat; background: url('../images/btn_icons-sb7da7f8cce.png') 5px -159px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -159px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -159px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -159px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -159px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -159px 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.ui-state-disabled { background-image: none; background: white url('../images/btn_icons-sb7da7f8cce.png') 5px -185px no-repeat; background: url('../images/btn_icons-sb7da7f8cce.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-sb7da7f8cce.png') 5px -185px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -185px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -185px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -185px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -185px no-repeat, linear-gradient(#ffffff, #e6e6e6); } .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-sb7da7f8cce.png') 5px -158px no-repeat; background: url('../images/btn_icons-sb7da7f8cce.png') 5px -159px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -159px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -159px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -159px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -159px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -159px 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 { padding-left: 24px; padding-right: 6px; background: #e6e6e6 url('../images/btn_icons-sb7da7f8cce.png') 5px -318px no-repeat; background: url('../images/btn_icons-sb7da7f8cce.png') 5px -318px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -318px no-repeat, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -318px no-repeat, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -318px no-repeat, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -318px no-repeat, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -318px no-repeat, linear-gradient(#ffffff, #d9d9d9); } .cms .ss-ui-button.ss-ui-action-destructive.delete.ui-state-disabled { background-image: none; background: white url('../images/btn_icons-sb7da7f8cce.png') 5px -185px no-repeat; background: url('../images/btn_icons-sb7da7f8cce.png') 5px -186px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -186px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -186px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -186px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -186px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -186px no-repeat, linear-gradient(#ffffff, #e6e6e6); }
.cms .ss-ui-button.ss-ui-action-destructive.unpublish.ui-state-hover { background: white url('../images/btn_icons-sb7da7f8cce.png') 5px -318px no-repeat; background: url('../images/btn_icons-sb7da7f8cce.png') 5px -318px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -318px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -318px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -318px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -318px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -318px 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-sb7da7f8cce.png') 5px -318px no-repeat; background: url('../images/btn_icons-sb7da7f8cce.png') 5px -319px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -319px no-repeat, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -319px no-repeat, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -319px no-repeat, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -319px no-repeat, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -319px no-repeat, linear-gradient(#ffffff, #d9d9d9); }
.cms .ss-ui-button.ss-ui-action-destructive.unpublish.ui-state-disabled { background-image: none; background: white url('../images/btn_icons-sb7da7f8cce.png') 5px -346px no-repeat; background: url('../images/btn_icons-sb7da7f8cce.png') 5px -346px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -346px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -346px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -346px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -346px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -346px no-repeat, linear-gradient(#ffffff, #e6e6e6); } .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-sb7da7f8cce.png') 5px -318px no-repeat; background: url('../images/btn_icons-sb7da7f8cce.png') 5px -319px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -319px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -319px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -319px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -319px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -319px 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 { padding-left: 24px; padding-right: 6px; background: #e6e6e6 url('../images/btn_icons-sb7da7f8cce.png') 5px -104px no-repeat; background: url('../images/btn_icons-sb7da7f8cce.png') 5px -104px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -104px no-repeat, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -104px no-repeat, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -104px no-repeat, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -104px no-repeat, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -104px no-repeat, linear-gradient(#ffffff, #d9d9d9); } .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-sb7da7f8cce.png') 5px -318px no-repeat; background: url('../images/btn_icons-sb7da7f8cce.png') 5px -319px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -319px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -319px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -319px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -319px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -319px 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-hover { background: white url('../images/btn_icons-sb7da7f8cce.png') 5px -104px no-repeat; background: url('../images/btn_icons-sb7da7f8cce.png') 5px -104px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -104px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -104px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -104px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -104px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -104px no-repeat, linear-gradient(#ffffff, #e6e6e6); } .cms .ss-ui-button.ss-ui-action-destructive.unpublish.ui-state-disabled { background-image: none; background: white url('../images/btn_icons-sb7da7f8cce.png') 5px -346px no-repeat; background: url('../images/btn_icons-sb7da7f8cce.png') 5px -347px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -347px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -347px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -347px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -347px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -347px no-repeat, linear-gradient(#ffffff, #e6e6e6); }
.cms .ss-ui-button.save-draft.ui-state-disabled { background-image: none; background: white url('../images/btn_icons-sb7da7f8cce.png') 5px -132px no-repeat; background: url('../images/btn_icons-sb7da7f8cce.png') 5px -132px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -132px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -132px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -132px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -132px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -132px no-repeat, linear-gradient(#ffffff, #e6e6e6); } .cms .ss-ui-button.save-draft { padding-left: 24px; padding-right: 6px; background: #e6e6e6 url('../images/btn_icons-sb7da7f8cce.png') 5px -104px no-repeat; background: url('../images/btn_icons-sb7da7f8cce.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-sb7da7f8cce.png') 5px -105px no-repeat, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -105px no-repeat, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -105px no-repeat, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -105px no-repeat, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -105px no-repeat, linear-gradient(#ffffff, #d9d9d9); }
.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-sb7da7f8cce.png') 5px -212px no-repeat; background: url('../images/btn_icons-sb7da7f8cce.png') 5px -212px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -212px no-repeat, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -212px no-repeat, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -212px no-repeat, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -212px no-repeat, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -212px 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-sb7da7f8cce.png') 5px -104px no-repeat; background: url('../images/btn_icons-sb7da7f8cce.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-sb7da7f8cce.png') 5px -105px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -105px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -105px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -105px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.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.cms-preview-toggle-link.ui-state-hover { background: white url('../images/btn_icons-sb7da7f8cce.png') 5px -212px no-repeat; background: url('../images/btn_icons-sb7da7f8cce.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-sb7da7f8cce.png') 5px -212px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -212px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -212px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -212px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -212px no-repeat, linear-gradient(#ffffff, #e6e6e6); } .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-sb7da7f8cce.png') 5px -104px no-repeat; background: url('../images/btn_icons-sb7da7f8cce.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-sb7da7f8cce.png') 5px -105px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -105px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -105px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -105px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.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.cms-preview-toggle-link.ui-state-disabled { background-image: none; background: white url('../images/btn_icons-sb7da7f8cce.png') 5px -239px no-repeat; background: url('../images/btn_icons-sb7da7f8cce.png') 5px -239px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -239px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -239px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -239px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -239px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -239px no-repeat, linear-gradient(#ffffff, #e6e6e6); } .cms .ss-ui-button.save-draft.ui-state-disabled { background-image: none; background: white url('../images/btn_icons-sb7da7f8cce.png') 5px -132px no-repeat; background: url('../images/btn_icons-sb7da7f8cce.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-sb7da7f8cce.png') 5px -133px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -133px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -133px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -133px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.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-sb7da7f8cce.png') 5px -212px no-repeat; background: url('../images/btn_icons-sb7da7f8cce.png') 5px -213px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -213px no-repeat, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -213px no-repeat, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -213px no-repeat, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -213px no-repeat, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -213px 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-sb7da7f8cce.png') 5px -212px no-repeat; background: url('../images/btn_icons-sb7da7f8cce.png') 5px -213px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -213px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -213px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -213px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -213px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -213px 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-sb7da7f8cce.png') 5px -212px no-repeat; background: url('../images/btn_icons-sb7da7f8cce.png') 5px -213px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -213px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -213px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -213px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -213px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -213px 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-sb7da7f8cce.png') 5px -239px no-repeat; background: url('../images/btn_icons-sb7da7f8cce.png') 5px -240px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -240px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -240px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -240px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -240px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-sb7da7f8cce.png') 5px -240px no-repeat, linear-gradient(#ffffff, #e6e6e6); }
.cms .ss-ui-button.ss-ui-button-small { padding: 4px 4px; } .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.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; padding: 0; border: 0; color: #393939; text-decoration: underline; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; }

39
admin/javascript/LeftAndMain.js
View File

@ -429,6 +429,45 @@
} }
} }
}); });
/**
* Add styling to all contained buttons, and create buttonsets if required.
*/
$('.cms-container .Actions').entwine({
onmatch: function() {
this.find('.ss-ui-button').click(function() {
var form = this.form;
// forms don't natively store the button they've been triggered with
if(form) {
form.clickedButton = this;
// Reset the clicked button shortly after the onsubmit handlers
// have fired on the form
setTimeout(function() {form.clickedButton = null;}, 10);
}
});
this.redraw();
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()
// 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) {
self.find('.action[buttonset="' + set + '"]').removeClass('ui-corner-all').addClass('buttonset')
.first().addClass('ui-corner-left').end()
.last().addClass('ui-corner-right');
});
}
});
/** /**
* Duplicates functionality in DateField.js, but due to using entwine we can match * Duplicates functionality in DateField.js, but due to using entwine we can match

44
admin/javascript/ssui.core.js
View File

@ -1,47 +1,5 @@
(function($) { (function($) {
$('.ss-ui-button').entwine({
/**
* Constructor: onmatch
*/
onmatch: function() {
this.redraw();
this._super();
},
redraw: function() {
this.addClass(
'ui-state-default ' +
'ui-corner-all'
)
.hover(
function() {
$(this).addClass('ui-state-hover');
},
function() {
$(this).removeClass('ui-state-hover');
}
)
.focus(function() {
$(this).addClass('ui-state-focus');
})
.blur(function() {
$(this).removeClass('ui-state-focus');
})
.click(function() {
var form = this.form;
// forms don't natively store the button they've been triggered with
if(form) {
form.clickedButton = this;
// Reset the clicked button shortly after the onsubmit handlers
// have fired on the form
setTimeout(function() {form.clickedButton = null;}, 10);
}
});
}
});
/** /**
* Creates a jQuery UI tab navigation bar, detached from the container DOM structure. * Creates a jQuery UI tab navigation bar, detached from the container DOM structure.
*/ */
@ -162,4 +120,4 @@
return 'ui-dialog-title-' + ($el.attr('id') || ++this.uuid); return 'ui-dialog-title-' + ($el.attr('id') || ++this.uuid);
} }
}); });
}(jQuery)); }(jQuery));

79
admin/scss/_forms.scss
View File

@ -16,25 +16,37 @@
padding-right: 6px; padding-right: 6px;
@include background($color-button-generic sprite($btn_icons, $name, 5px, 6px) no-repeat); @include background($color-button-generic sprite($btn_icons, $name, 5px, 6px) no-repeat);
@include background(sprite($btn_icons, $name, 5px, 6px) no-repeat, @include background(sprite($btn_icons, $name, 5px, 5px) no-repeat,
linear-gradient(color-stops( linear-gradient(color-stops(
lighten($color-button-generic, 10%), lighten($color-button-generic, 10%),
darken($color-button-generic, 5%) darken($color-button-generic, 5%)
)) ))
); );
&.ui-state-hover { &.ui-state-hover, &:hover {
@include background(lighten($color-button-generic, 10%) sprite($btn_icons, $name, 5px, 6px) no-repeat); @include background(lighten($color-button-generic, 10%) sprite($btn_icons, $name, 5px, 6px) no-repeat);
@include background(sprite($btn_icons, $name, 5px, 6px) no-repeat, @include background(sprite($btn_icons, $name, 5px, 5px) no-repeat,
linear-gradient(color-stops( linear-gradient(color-stops(
lighten($color-button-generic, 20%), lighten($color-button-generic, 20%),
$color-button-generic $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 { &.ui-state-disabled {
background-image: none; background-image: none;
@include background(lighten($color-button-generic, 20%) sprite($btn_icons, $name+_disabled, 5px, 6px) no-repeat); @include background(lighten($color-button-generic, 20%) sprite($btn_icons, $name+_disabled, 5px, 6px) no-repeat);
@include background(sprite($btn_icons, $name+_disabled, 5px, 6px) no-repeat, @include background(sprite($btn_icons, $name+_disabled, 5px, 5px) no-repeat,
linear-gradient(color-stops( linear-gradient(color-stops(
lighten($color-button-generic, 20%), lighten($color-button-generic, 20%),
$color-button-generic $color-button-generic
@ -45,16 +57,15 @@
@mixin actionButtonSpriteConstructive($name) { @mixin actionButtonSpriteConstructive($name) {
background-image: none; background-image: none;
padding-left: 25px; padding-left: 24px;
padding-right: 7px; padding-right: 6px;
font-weight: bold; font-weight: bold;
margin-left: $grid-horizontal; margin-left: $grid-horizontal;
color: $color-text-light; color: $color-text-light;
border-color: $color-button-constructive-border; border-color: $color-button-constructive-border;
border-bottom-color: darken($color-button-constructive-border, 10%); border-bottom-color: darken($color-button-constructive-border, 10%);
@include background($color-button-constructive sprite($btn_icons, $name, 6, 6) no-repeat); @include background($color-button-constructive sprite($btn_icons, $name, 5, 5) no-repeat);
@include background(sprite($btn_icons, $name @include background(sprite($btn_icons, $name, 5, 5) no-repeat,
, 6, 6) no-repeat,
linear-gradient(color-stops( linear-gradient(color-stops(
lighten($color-button-constructive, 10%), lighten($color-button-constructive, 10%),
darken($color-button-constructive, 5%) darken($color-button-constructive, 5%)
@ -63,20 +74,19 @@
@include text-shadow(darken($color-button-constructive, 10%) 0 1px 1px); @include text-shadow(darken($color-button-constructive, 10%) 0 1px 1px);
&.ui-state-hover { &.ui-state-hover, &:hover {
border-color: darken($color-button-constructive-border, 10%); 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(lighten($color-button-constructive, 10%) sprite($btn_icons, $name, 6, 6) no-repeat);
@include background(sprite($btn_icons, $name, 6, 6) no-repeat, @include background(sprite($btn_icons, $name, 5, 5) no-repeat,
linear-gradient(color-stops( linear-gradient(color-stops(
lighten($color-button-constructive, 15%), lighten($color-button-constructive, 15%),
$color-button-constructive $color-button-constructive
)) ))
); );
} }
&:active, &:focus { &:active, &:focus, &.ui-state-active, &.ui-state-focus {
padding: $grid-vertical 8px $grid_vertical 26px;
border: none; @include background(darken($color-button-constructive, 2%) sprite($btn_icons, $name, 5, 5) no-repeat);
@include background(darken($color-button-constructive, 2%) sprite($btn_icons, $name, 7, 7) no-repeat);
@include box-shadow(inset 0 1px 3px rgb(23, 24, 26), 0 1px 0 rgba(255, 255, 255, .6)); @include box-shadow(inset 0 1px 3px rgb(23, 24, 26), 0 1px 0 rgba(255, 255, 255, .6));
} }
} }
@ -301,8 +311,15 @@ form.stacked .field, .field.stacked {
} }
.ss-ui-button { .ss-ui-button {
&.buttonset {
margin: 0 -2px;
}
/* all buttons */ /* all buttons */
padding: ($grid-vertical - 1) ($grid-horizontal + 4); padding: ($grid-vertical - 3) ($grid-horizontal + 4);
font-weight: bold; font-weight: bold;
text-decoration: none; text-decoration: none;
margin: 0; margin: 0;
@ -311,6 +328,8 @@ form.stacked .field, .field.stacked {
background-color: $color-button-generic; background-color: $color-button-generic;
border: 1px solid $color-button-generic-border; border: 1px solid $color-button-generic-border;
border-bottom: 1px solid darken($color-button-generic-border, 10%); border-bottom: 1px solid darken($color-button-generic-border, 10%);
cursor: pointer;
@include text-shadow(lighten($color-button-generic, 20%) 0 1px 1px); @include text-shadow(lighten($color-button-generic, 20%) 0 1px 1px);
@include background($color-button-generic); @include background($color-button-generic);
@ -320,28 +339,26 @@ form.stacked .field, .field.stacked {
darken($color-button-generic, 5%) darken($color-button-generic, 5%)
)) ))
); );
&.ui-state-hover { &.ui-state-hover, &:hover {
border: 1px solid darken($color-button-generic-border, 10%);
@include text-shadow(lighten($color-button-generic, 30%) 0 1px 1px);
@include background(lighten($color-button-generic, 10%)); @include background(lighten($color-button-generic, 10%));
@include background( @include background(
linear-gradient(color-stops( linear-gradient(color-stops(
lighten($color-button-generic, 20%), lighten($color-button-generic, 20%),
darken($color-button-generic, 5%) $color-button-generic
)) ))
); );
@include box-shadow(0 0 5px darken($color-button-generic, 20%));
} }
&:focus, &:active, &:focus, &.ui-state-active, &.ui-state-focus {
&:active { border: 1px solid darken($color-button-generic, 20%);
border: 1px solid lighten($color-button-generic, 40%); @include background(lighten($color-button-generic, 10%) no-repeat);
@include box-shadow(0 3px 3px darken($color-button-generic, 40%) inset);
@include background(darken($color-button-generic, 30%));
@include background( @include background(
linear-gradient(color-stops( linear-gradient(color-stops(
$color-button-generic, lighten($color-button-generic, 20%),
darken($color-button-generic, 30%) $color-button-generic
)) ))
); );
@include box-shadow(0 0 5px darken($color-button-generic, 20%) inset);
} }
/* constructive */ /* constructive */
@ -372,7 +389,7 @@ form.stacked .field, .field.stacked {
} }
&.cms-preview-toggle-link { &.cms-preview-toggle-link {
padding-left: 24px !important; padding-left: 24px !important;
margin-left: 4px !important; margin-left: 4px !important;
text-decoration: none; text-decoration: none;
@include actionButtonSprite('preview'); @include actionButtonSprite('preview');