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

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

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; }

View File

@ -430,6 +430,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
* the DOM element on creation, rather than onclick - which allows us to decorate * the DOM element on creation, rather than onclick - which allows us to decorate

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.
*/ */

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 */