From bfa0181d784525172da927389733b5d10e104829 Mon Sep 17 00:00:00 2001 From: Julian Seidenberg Date: Thu, 29 Sep 2011 15:15:12 +1300 Subject: [PATCH 01/15] ENHANCEMENT: Icons for all core CMS actions like "Save draft" (SSO-26) --- admin/css/screen.css | 22 +++++++++++------- admin/scss/_forms.scss | 53 ++++++++++++++++++++++++++++++------------ 2 files changed, 52 insertions(+), 23 deletions(-) diff --git a/admin/css/screen.css b/admin/css/screen.css index d5d131af7..f773cfc9a 100644 --- a/admin/css/screen.css +++ b/admin/css/screen.css @@ -222,14 +222,20 @@ form.nostyle .middleColumn { margin-left: 0; } .cms-preview-toggle-link { display: block; float: right; font-size: 11px; } .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; text-shadow: white 0 1px 1px; -moz-box-shadow: #ced7dc 0 1px 2px; -webkit-box-shadow: #ced7dc 0 1px 2px; -o-box-shadow: #ced7dc 0 1px 2px; box-shadow: #ced7dc 0 1px 2px; background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 999px 999px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 999px 999px, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 999px 999px, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 999px 999px, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 999px 999px, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 999px 999px, linear-gradient(#ffffff, #d9d9d9); /* constructive */ /* destructive */ } -.cms .ss-ui-button.ui-state-hover { border: 1px solid #a6a6a9; text-shadow: white 0 1px 1px; -moz-box-shadow: #b0bec7 0 1px 2px; -webkit-box-shadow: #b0bec7 0 1px 2px; -o-box-shadow: #b0bec7 0 1px 2px; box-shadow: #b0bec7 0 1px 2px; background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 999px 999px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 999px 999px, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 999px 999px, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 999px 999px, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 999px 999px, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 999px 999px, linear-gradient(#ffffff, #d9d9d9); } -.cms .ss-ui-button:focus, .cms .ss-ui-button:active { border: 1px solid #b3b3b5; -moz-box-shadow: #b0bec7 0 1px 2px; -webkit-box-shadow: #b0bec7 0 1px 2px; -o-box-shadow: #b0bec7 0 1px 2px; box-shadow: #b0bec7 0 1px 2px; background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 999px 999px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e6e6e6), color-stop(100%, #ffffff)); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 999px 999px, -webkit-linear-gradient(#e6e6e6, #ffffff); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 999px 999px, -moz-linear-gradient(#e6e6e6, #ffffff); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 999px 999px, -o-linear-gradient(#e6e6e6, #ffffff); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 999px 999px, -ms-linear-gradient(#e6e6e6, #ffffff); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 999px 999px, linear-gradient(#e6e6e6, #ffffff); } -.cms .ss-ui-button.ss-ui-action-constructive { padding-left: 24px; font-weight: bold; margin-left: 8px; color: white; border-color: #78a127; background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 5px 5px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #80bf40), color-stop(100%, #59862d)); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 5px 5px, -webkit-linear-gradient(#80bf40, #59862d); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 5px 5px, -moz-linear-gradient(#80bf40, #59862d); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 5px 5px, -o-linear-gradient(#80bf40, #59862d); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 5px 5px, -ms-linear-gradient(#80bf40, #59862d); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 5px 5px, linear-gradient(#80bf40, #59862d); background-color: #669933; text-shadow: #4d7326 0 1px 1px; -moz-box-shadow: #748d9d 1px 1px 2px; -webkit-box-shadow: #748d9d 1px 1px 2px; -o-box-shadow: #748d9d 1px 1px 2px; box-shadow: #748d9d 1px 1px 2px; } -.cms .ss-ui-button.ss-ui-action-constructive.ui-state-hover { border-color: #59781d; background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 5px 5px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #8cc653), color-stop(100%, #669933)); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 5px 5px, -webkit-linear-gradient(#8cc653, #669933); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 5px 5px, -moz-linear-gradient(#8cc653, #669933); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 5px 5px, -o-linear-gradient(#8cc653, #669933); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 5px 5px, -ms-linear-gradient(#8cc653, #669933); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 5px 5px, linear-gradient(#8cc653, #669933); background-color: #4d7326; } +.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; text-shadow: white 0 1px 1px; -moz-box-shadow: #ced7dc 0 1px 2px; -webkit-box-shadow: #ced7dc 0 1px 2px; -o-box-shadow: #ced7dc 0 1px 2px; box-shadow: #ced7dc 0 1px 2px; background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 999px 999px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 999px 999px, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 999px 999px, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 999px 999px, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 999px 999px, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 999px 999px, linear-gradient(#ffffff, #d9d9d9); /* CMS action button sprite mix-in (used for all the buttons in the bottom row */ /* constructive */ /* destructive */ /* generic action buttons */ } +.cms .ss-ui-button.ui-state-hover { border: 1px solid #a6a6a9; text-shadow: white 0 1px 1px; -moz-box-shadow: #b0bec7 0 1px 2px; -webkit-box-shadow: #b0bec7 0 1px 2px; -o-box-shadow: #b0bec7 0 1px 2px; box-shadow: #b0bec7 0 1px 2px; background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 999px 999px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 999px 999px, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 999px 999px, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 999px 999px, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 999px 999px, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 999px 999px, linear-gradient(#ffffff, #d9d9d9); } +.cms .ss-ui-button:focus, .cms .ss-ui-button:active { border: 1px solid #b3b3b5; -moz-box-shadow: #b0bec7 0 1px 2px; -webkit-box-shadow: #b0bec7 0 1px 2px; -o-box-shadow: #b0bec7 0 1px 2px; box-shadow: #b0bec7 0 1px 2px; background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 999px 999px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e6e6e6), color-stop(100%, #ffffff)); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 999px 999px, -webkit-linear-gradient(#e6e6e6, #ffffff); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 999px 999px, -moz-linear-gradient(#e6e6e6, #ffffff); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 999px 999px, -o-linear-gradient(#e6e6e6, #ffffff); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 999px 999px, -ms-linear-gradient(#e6e6e6, #ffffff); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 999px 999px, linear-gradient(#e6e6e6, #ffffff); } +.cms .ss-ui-button.ss-ui-action-constructive { padding-left: 24px; padding-right: 6px; font-weight: bold; margin-left: 8px; color: white; border-color: #78a127; background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 5px 5px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #80bf40), color-stop(100%, #59862d)); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 5px 5px, -webkit-linear-gradient(#80bf40, #59862d); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 5px 5px, -moz-linear-gradient(#80bf40, #59862d); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 5px 5px, -o-linear-gradient(#80bf40, #59862d); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 5px 5px, -ms-linear-gradient(#80bf40, #59862d); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 5px 5px, linear-gradient(#80bf40, #59862d); background-color: #669933; text-shadow: #4d7326 0 1px 1px; -moz-box-shadow: #748d9d 1px 1px 2px; -webkit-box-shadow: #748d9d 1px 1px 2px; -o-box-shadow: #748d9d 1px 1px 2px; box-shadow: #748d9d 1px 1px 2px; } +.cms .ss-ui-button.ss-ui-action-constructive.ui-state-hover { border-color: #59781d; background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 5px 5px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #8cc653), color-stop(100%, #669933)); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 5px 5px, -webkit-linear-gradient(#8cc653, #669933); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 5px 5px, -moz-linear-gradient(#8cc653, #669933); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 5px 5px, -o-linear-gradient(#8cc653, #669933); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 5px 5px, -ms-linear-gradient(#8cc653, #669933); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 5px 5px, linear-gradient(#8cc653, #669933); background-color: #4d7326; } .cms .ss-ui-button.ss-ui-action-destructive { color: red; background-color: #e6e6e6; } -.cms .ss-ui-button.ss-ui-action-destructive.delete { padding-left: 26px; background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 6px -27px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 6px -27px, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 6px -27px, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 6px -27px, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 6px -27px, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 6px -27px, linear-gradient(#ffffff, #d9d9d9); } -.cms .ss-ui-button.ss-ui-action-destructive.delete.ui-state-hover { background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 6px -27px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 6px -27px, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 6px -27px, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 6px -27px, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 6px -27px, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 6px -27px, linear-gradient(#ffffff, #e6e6e6); } +.cms .ss-ui-button.ss-ui-action-destructive.delete { padding-left: 24px; padding-right: 6px; background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -26px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -26px, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -26px, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -26px, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -26px, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -26px, linear-gradient(#ffffff, #d9d9d9); } +.cms .ss-ui-button.ss-ui-action-destructive.delete.ui-state-hover { background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -26px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -26px, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -26px, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -26px, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -26px, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -26px, linear-gradient(#ffffff, #e6e6e6); } +.cms .ss-ui-button.ss-ui-action-destructive.unpublish { padding-left: 24px; padding-right: 6px; background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -58px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -58px, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -58px, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -58px, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -58px, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -58px, linear-gradient(#ffffff, #d9d9d9); } +.cms .ss-ui-button.ss-ui-action-destructive.unpublish.ui-state-hover { background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -58px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -58px, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -58px, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -58px, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -58px, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -58px, linear-gradient(#ffffff, #e6e6e6); } +.cms .ss-ui-button.save-draft { padding-left: 24px; padding-right: 6px; background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -90px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -90px, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -90px, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -90px, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -90px, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -90px, linear-gradient(#ffffff, #d9d9d9); } +.cms .ss-ui-button.save-draft.ui-state-hover { background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -90px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -90px, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -90px, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -90px, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -90px, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -90px, linear-gradient(#ffffff, #e6e6e6); } +.cms .ss-ui-button.cms-preview-toggle-link { padding-left: 24px !important; margin-left: 4px !important; padding-left: 24px; padding-right: 6px; background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -124px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -124px, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -124px, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -124px, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -124px, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -124px, linear-gradient(#ffffff, #d9d9d9); } +.cms .ss-ui-button.cms-preview-toggle-link.ui-state-hover { background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -124px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -124px, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -124px, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -124px, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -124px, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -124px, linear-gradient(#ffffff, #e6e6e6); } .cms .ss-ui-button.ss-ui-button-small { padding: 4px 4px; } .cms .ss-ui-button.ui-state-highlight { background-color: #e6e6e6; border: 1px solid #708284; } .cms .ss-ui-button.ss-ui-action-minor { background: none; padding: 0; border: 0; color: #393939; text-decoration: underline; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; } @@ -315,7 +321,7 @@ html article, html aside, html details, html figcaption, html figure, html foote .cms-logo { border-bottom: 1px solid #03090c; height: 31px; overflow: hidden; padding: 0 0 0 4px; vertical-align: middle; font-size: 12px; } .cms-logo .version { display: none; } -.cms-logo a { display: inline-block; height: 24px; width: 24px; float: left; margin-right: 8px; background: url('../images/logo_small.png?1316445742') no-repeat; text-indent: -9999em; padding-right: 7px; border-right: 1px solid #19435c; } +.cms-logo a { display: inline-block; height: 24px; width: 24px; float: left; margin-right: 8px; background: url('../images/logo_small.png?1317095003') no-repeat; text-indent: -9999em; padding-right: 7px; border-right: 1px solid #19435c; } .cms-logo span { font-weight: bold; font-size: 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; o-text-overflow: ellipsis; } .cms-login-status { border-top: 1px solid #19435c; height: 24px; padding: 7px 4px 0 4px; overflow: hidden; line-height: 16px; font-size: 11px; } diff --git a/admin/scss/_forms.scss b/admin/scss/_forms.scss index 35297c70a..51d147b67 100644 --- a/admin/scss/_forms.scss +++ b/admin/scss/_forms.scss @@ -247,9 +247,31 @@ form.nostyle { )) ); } + + /* CMS action button sprite mix-in (used for all the buttons in the bottom row */ + @mixin actionButtonSprite($horizontalOffset, $verticalOffset) { + padding-left: 24px; + padding-right: 6px; + @include background(image-url("../images/btn_icons_sprite.png") no-repeat $horizontalOffset $verticalOffset, + linear-gradient(color-stops( + lighten($color-button-generic, 10%), + darken($color-button-generic, 5%) + )) + ); + &.ui-state-hover { + @include background(image-url("../images/btn_icons_sprite.png") no-repeat $horizontalOffset $verticalOffset, + linear-gradient(color-stops( + lighten($color-button-generic, 20%), + $color-button-generic + )) + ); + } + } + /* constructive */ &.ss-ui-action-constructive { padding-left: 24px; + padding-right: 6px; font-weight: bold; margin-left: $grid-horizontal; color: $color-text-light; @@ -285,22 +307,23 @@ form.nostyle { background-color: $color-button-generic; &.delete { - padding-left: 26px; - @include background(image-url("../images/btn_icons_sprite.png") no-repeat 6px -27px, - linear-gradient(color-stops( - lighten($color-button-generic, 10%), - darken($color-button-generic, 5%) - )) - ); - &.ui-state-hover { - @include background(image-url("../images/btn_icons_sprite.png") no-repeat 6px -27px, - linear-gradient(color-stops( - lighten($color-button-generic, 20%), - $color-button-generic - )) - ); - } + @include actionButtonSprite(6px, -26px); } + + &.unpublish { + @include actionButtonSprite(6px, -58px); + } + } + + /* generic action buttons */ + &.save-draft { + @include actionButtonSprite(6px, -90px); + } + + &.cms-preview-toggle-link { + padding-left: 24px !important; + margin-left: 4px !important; + @include actionButtonSprite(6px, -124px); } &.ss-ui-button-small { From cdc8d8b9764f5f70239d262c3a3d9cc784b57b65 Mon Sep 17 00:00:00 2001 From: Julian Seidenberg Date: Thu, 29 Sep 2011 15:37:51 +1300 Subject: [PATCH 02/15] ENHANCEMENT: merging of Ed Knight's changes from: https://github.com/Silverstriper/sapphire/commit/52acf3532fce8e560a6ccd8a1bd235e6315d7316. (SSO-12) --- admin/images/dialog_close.png | Bin 0 -> 1582 bytes admin/scss/_forms.scss | 9 ++++ admin/scss/_style.scss | 72 ++++++++++++++++++++++++++++---- admin/scss/_tree.scss | 8 ++-- admin/scss/_uitheme.scss | 48 ++++++++++++++++++--- admin/scss/themes/_default.scss | 3 +- 6 files changed, 123 insertions(+), 17 deletions(-) create mode 100644 admin/images/dialog_close.png diff --git a/admin/images/dialog_close.png b/admin/images/dialog_close.png new file mode 100644 index 0000000000000000000000000000000000000000..439adaf9b15331590f3628eb681dcf1fd2937f82 GIT binary patch literal 1582 zcmV+}2GRM6P)uD9pXQgln)le{_YxjpAO?>X;1@B35%z9ScHH=2>R zXuf|Mt(~`@(Y}Wb0GYfTZ3=D0N1NiuM6Z`L*H1!k3&{1Cv^D@jPpkDtpkRF1hiEKv zg~yqmpC@Me5@Fw_7>o=>z!n=4g6=7x8P6UOj^;$WKs}zK-rgA&3XSOo zrUwHHPS_G2c0=Fd$_m(VJEMbxnd2Vn=z<}qi+UZSv;=+V@T&dElHQVf9-~ zw9n-RxQIu1B~cGkOK#>^GOy@ZbCvuxDBuBg6yRJE>qk#hE2|;rgJWFVWSavgdfJE& zpD=v|1z&#yJxO}6W8M6`BJ5W3_pX5Ch)DdQLSpyl<-@l8eC{`-O{=Vede;)SyIpBqx9@?W9YNYiLBq2mvKa5Tx)5D zhTqy`#}X4m$%nT9j2Exwa<4$svKyYNGYOtjq-5=d^!F>_*O^)7cw!<QSf%p6mEsk`|SsjvGpo;;wEm z+wB1rTVy<$M}$K9`UZ(Qdq`~2yW8b9_^lE3^H*=;7s=8Tf8w1V*n160_L5Y31!LSJ40K5=L>eM4J+BQQTIG|E*di zMgEHkaj=u9MU{+NoS%m#R1Bxa{-(wI`qg4dk`4}`r12LY4UfXd!z2Ey#VC{`pQWZi zN<_rEBeTchfET)ZV0LNAcePlTo{niTBH-7;Vt2s7jt<|{V$tT!@JL+Tn&ql5784qZ zVo|{*4_URS#Y}WMldUEOF@W?Q0Y=oK11lGej9M&cZ3U~S^pU7VlKxmAs}9<;hpt{A zZChM~YY7Q3vwD^ii01XK7LAy5S)T5!sDJ}CHC#)`De1Fybx?#g_pp}zUx~-OQnkoR z^qF~ikhy>V_0QN6@?RDfI8xo#t)N16aqz?mCb7r7#$Zok7RJt<15HK-#Ajy<UnQHwOE2nOmx>xt5Ys(s>kdJ%j+6$H%0n$0va*DL^AS?D$bt*sT^dOAOeY!}SA!4F{L!i^Ux}q^k(8+3 z5Uv`kO4)#6%L=6d1n$|N{We?T7A4i0W8DVfi@sw|Gnrp3>VMp?Py zE6CXvwYU4O77ulHG6T&YQZkR a .jstree-pageicon { background-position: 0 -48px; } -li.class-RedirectorPage a .jstree-pageicon { +li.class-RedirectorPage > a .jstree-pageicon { background-position: 0 -16px; } -li.class-VirtualPage a .jstree-pageicon { +li.class-VirtualPage > a .jstree-pageicon { background-position: 0 -32px; } -li.class-ErrorPage a .jstree-pageicon { +li.class-ErrorPage > a .jstree-pageicon { background-position: 0 -112px; } \ No newline at end of file diff --git a/admin/scss/_uitheme.scss b/admin/scss/_uitheme.scss index 39e5ccfea..3187e79db 100644 --- a/admin/scss/_uitheme.scss +++ b/admin/scss/_uitheme.scss @@ -50,11 +50,49 @@ font-family: $font-family; border: 0; } - - .ui-widget-header { - background: $color-widget-bg; - border: 0; - padding: 0; + + .ui-widget-header { + background-color: darken($color-widget-bg, 20%); + padding: 8px 8px 6px 8px; + border-bottom: 2px solid darken($color-widget-bg, 35%); + @include linear-gradient(color-stops( + darken($color-widget-bg, 5%), + darken($color-widget-bg, 30%) + )); + border-bottom: 3px solid darken($color-widget-bg, 50%); + padding: 8px; + @include border-radius(0); + + & .ui-dialog-title { + padding: 6px 0; + text-shadow: lighten($color-base, 10%) 1px 1px 0; + } + + + + & a.ui-dialog-titlebar-close { + position: absolute; + top: -8px; + right: -15px; + width: 30px; + height: 30px; + } + + & a.ui-state-hover { + border-color: transparent; + background: transparent; + + & .ui-icon-closethick { + background-position: 0 -30px; + } + } + + & .ui-icon-closethick { + background-image: url(../images/dialog_close.png); + background-position: 0 0; + width: 30px; + height: 30px; + } } .ui-state-hover { diff --git a/admin/scss/themes/_default.scss b/admin/scss/themes/_default.scss index 1cb123891..b9bd7ba0e 100644 --- a/admin/scss/themes/_default.scss +++ b/admin/scss/themes/_default.scss @@ -21,6 +21,7 @@ $color-shadow-light: rgba(201, 205, 206, 0.8); $color-shadow-dark: rgba(107, 120, 123, 0.5); $color-highlight: #FFFF66; +$color-highlight-opacity: rgba(255, 255, 102, 0.3); $color-menu-button: #338DC1; $color-menu-background: #c6d7df; @@ -78,4 +79,4 @@ $grid-horizontal: 8px; /** ----------------------------------------------- * Application Logo (CMS Logo) Must be 24px x 24px * ------------------------------------------------ */ -$application-logo-small: image-url("logo_small.png"); \ No newline at end of file +$application-logo-small: image-url("logo_small.png"); From b2af1bfda9adcbd51c934fe95cdf61df17108592 Mon Sep 17 00:00:00 2001 From: Julian Seidenberg Date: Thu, 29 Sep 2011 16:24:21 +1300 Subject: [PATCH 03/15] BUGFIX: fixing "outside" close button on dialogs (SSO-12) --- admin/scss/_uitheme.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/admin/scss/_uitheme.scss b/admin/scss/_uitheme.scss index 3187e79db..4b1eba949 100644 --- a/admin/scss/_uitheme.scss +++ b/admin/scss/_uitheme.scss @@ -76,6 +76,7 @@ right: -15px; width: 30px; height: 30px; + z-index: 100000; } & a.ui-state-hover { From f50a2817599bb39d7b23b1ba5494e22178b453b1 Mon Sep 17 00:00:00 2001 From: Julian Seidenberg Date: Thu, 29 Sep 2011 16:25:31 +1300 Subject: [PATCH 04/15] ENHANCEMENT: styling of popup with Ed Knight's changes and moving them from CMS to sapphire, because that is where all the image assets live (SSO-12) --- admin/css/screen.css | 52 +++++++++++++++---- admin/scss/_style.scss | 114 +++++++++++++++++++++++++++++++---------- 2 files changed, 127 insertions(+), 39 deletions(-) diff --git a/admin/css/screen.css b/admin/css/screen.css index f773cfc9a..f4cadf8b0 100644 --- a/admin/css/screen.css +++ b/admin/css/screen.css @@ -147,13 +147,13 @@ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, a .jstree-pageicon { display: block; float: left; width: 16px; height: 16px; margin-right: 4px; background-color: transparent; background-image: url(../images/sitetree_ss_pageclass_icons_default.png); background-repeat: no-repeat; } -li.class-HomePage a .jstree-pageicon { background-position: 0 -48px; } +li.class-HomePage > a .jstree-pageicon { background-position: 0 -48px; } -li.class-RedirectorPage a .jstree-pageicon { background-position: 0 -16px; } +li.class-RedirectorPage > a .jstree-pageicon { background-position: 0 -16px; } -li.class-VirtualPage a .jstree-pageicon { background-position: 0 -32px; } +li.class-VirtualPage > a .jstree-pageicon { background-position: 0 -32px; } -li.class-ErrorPage a .jstree-pageicon { background-position: 0 -112px; } +li.class-ErrorPage > a .jstree-pageicon { background-position: 0 -112px; } /** Styles for the left hand side menu @package sapphire @subpackage admin */ /** ------------------------------------------------------- CMS Menu Bar -------------------------------------------------------- */ @@ -191,7 +191,7 @@ form.nostyle .field { padding: 0; border: 0; } form.nostyle label { float: none; width: auto; } form.nostyle .middleColumn { margin-left: 0; } -.field { display: block; padding: 0 8px 7px 8px; margin: 0 -8px 8px -8px; border-bottom: 1px solid rgba(201, 205, 206, 0.8); *zoom: 1; /* TreeDropdowns */ /* dropdowns */ /* chzn override */ /* Date Fields */ } +.field { display: block; padding: 10px 0; border-bottom-width: 2px; border-bottom: 2px groove rgba(255, 255, 255, 0.8); -webkit-border-image: url(../images/textures/bg_fieldset_elements_border.png) 2 stretch stretch; border-image: url(../images/textures/bg_fieldset_elements_border.png) 2 stretch stretch; padding: 0 8px 7px 8px; margin: 0 -8px 8px -8px; border-bottom: 1px solid rgba(201, 205, 206, 0.8); *zoom: 1; /* TreeDropdowns */ /* dropdowns */ /* chzn override */ /* Date Fields */ } .field:after { content: "\0020"; display: block; height: 0; clear: both; overflow: hidden; visibility: hidden; } .field.noLabel .middleColumn { margin-left: 0; } .field label.left { float: left; display: block; width: 168px; padding: 8px 8px 8px 0; line-height: 16px; } @@ -270,7 +270,12 @@ form.nostyle .middleColumn { margin-left: 0; } .cms .ui-tabs .ui-tabs-nav.ui-state-active { border-color: gray; } .cms .ui-tabs .ui-tabs-panel { background: transparent; padding: 16px 16px; } .cms .ui-widget-content, .cms .ui-widget { color: #444444; font-size: 12px; font-family: Arial, sans-serif; border: 0; } -.cms .ui-widget-header { background: #eceff1; border: 0; padding: 0; } +.cms .ui-widget-header { background-color: #b0bec7; padding: 8px 8px 6px 8px; border-bottom: 2px solid #8399a7; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dde3e7), color-stop(100%, #92a5b2)); background-image: -webkit-linear-gradient(top, #dde3e7, #92a5b2); background-image: -moz-linear-gradient(top, #dde3e7, #92a5b2); background-image: -o-linear-gradient(top, #dde3e7, #92a5b2); background-image: -ms-linear-gradient(top, #dde3e7, #92a5b2); background-image: linear-gradient(top, #dde3e7, #92a5b2); border-bottom: 3px solid #5c7382; padding: 8px; -moz-border-radius: 0; -webkit-border-radius: 0; -o-border-radius: 0; -ms-border-radius: 0; -khtml-border-radius: 0; border-radius: 0; } +.cms .ui-widget-header .ui-dialog-title { padding: 6px 0; text-shadow: #ced7dc 1px 1px 0; } +.cms .ui-widget-header a.ui-dialog-titlebar-close { position: absolute; top: -8px; right: -15px; width: 30px; height: 30px; z-index: 100000; } +.cms .ui-widget-header a.ui-state-hover { border-color: transparent; background: transparent; } +.cms .ui-widget-header a.ui-state-hover .ui-icon-closethick { background-position: 0 -30px; } +.cms .ui-widget-header .ui-icon-closethick { background-image: url(../images/dialog_close.png); background-position: 0 0; width: 30px; height: 30px; } .cms .ui-state-hover { cursor: pointer; } .cms .ui-widget input, .cms .ui-widget select, .cms .ui-widget textarea, .cms .ui-widget button { color: #444444; font-size: 12px; font-family: Arial, sans-serif; } @@ -350,11 +355,15 @@ html article, html aside, html details, html figcaption, html figure, html foote .ModelAdmin .ResultAssemblyBlock { display: none; } /** -------------------------------------------- "Add page" dialog -------------------------------------------- */ -.cms-page-add-form-dialog #PageType li { clear: left; height: 40px; border-bottom: 1px solid rgba(107, 120, 123, 0.5); } -.cms-page-add-form-dialog #PageType li:hover, .cms-page-add-form-dialog #PageType li.selected { background-color: #ffff99; } -.cms-page-add-form-dialog #PageType li input, .cms-page-add-form-dialog #PageType li label, .cms-page-add-form-dialog #PageType li .icon, .cms-page-add-form-dialog #PageType li .title { float: left; } -.cms-page-add-form-dialog #PageType li .icon { width: 20px; } -.cms-page-add-form-dialog #PageType li .title { width: 100px; font-weight: bold; } +.cms-page-add-form-dialog #PageType li { padding: 9px 0 9px 15px; overflow: hidden; border-bottom-width: 2px; border-bottom: 2px groove rgba(255, 255, 255, 0.8); -webkit-border-image: url(../images/textures/bg_fieldset_elements_border.png) 2 stretch stretch; border-image: url(../images/textures/bg_fieldset_elements_border.png) 2 stretch stretch; } +.cms-page-add-form-dialog #PageType li:hover, .cms-page-add-form-dialog #PageType li.selected { background-color: rgba(255, 255, 102, 0.3); } +.cms-page-add-form-dialog #PageType li input, .cms-page-add-form-dialog #PageType li label, .cms-page-add-form-dialog #PageType li .icon, .cms-page-add-form-dialog #PageType li .title { float: left; line-height: 1.3em; } +.cms-page-add-form-dialog #PageType li .icon { width: 20px; display: block; width: 16px; height: 16px; margin: 0 4px; background-color: transparent; background-image: url(../images/sitetree_ss_pageclass_icons_default.png); background-repeat: no-repeat; } +.cms-page-add-form-dialog #PageType li .class-HomePage { background-position: 0 -48px; } +.cms-page-add-form-dialog #PageType li .class-RedirectorPage { background-position: 0 -16px; } +.cms-page-add-form-dialog #PageType li .class-VirtualPage { background-position: 0 -32px; } +.cms-page-add-form-dialog #PageType li .class-ErrorPage { background-position: 0 -112px; } +.cms-page-add-form-dialog #PageType li .title { width: 120px; font-weight: bold; padding-right: 10px; } .cms-page-add-form-dialog #PageType li .description { font-style: italic; } /** -------------------------------------------- Content toolbar -------------------------------------------- */ @@ -443,3 +452,24 @@ form.member-profile-form .formattingHelpText li { font-size: 11px; color: #333; .cms-preview.is-collapsed .cms-preview-toggle a { left: -15px; } .cms-switch-view a { padding-right: 1em; } + +/** ------------------------------------------------------------------ +* Modal - JQuery UI Dialog pop-up +* ----------------------------------------------------------------- */ +/* default overlay for the CMS */ +/* Adjusting the color of the background overlay to be darker. */ +.cms .ui-widget-overlay { background-color: #000; background-image: none; } + +.ui-dialog { background: url("../images/textures/bg_cms_main_content.png") repeat left top #f0f3f4; border: 3px solid #000 !important; border-radius: 8px; overflow: visible; padding: 0; /* Labels for all the Dialogs of the pop-up form */ /* Exception for a label that is inline with the selector dropdown box */ } +.ui-dialog #PageType .middleColumn { margin: 0; padding: 0; } +.ui-dialog #PageType .middleColumn .optionset li { width: 100%; } +.ui-dialog #PageType li.selected { background-color: rgba(255, 255, 153, 0.5); /*background-color: #FFFF99;*/ } +.ui-dialog #PageType li:hover { background-color: #FFFF99 !important; /* lighter highlight on hover */ } +.ui-dialog .field label.left { font-size: 14px; font-weight: bold; width: 100%; float: none; color: #5f6160; } +.ui-dialog #ParentID label.left { padding: 8px 0 8px 0; float: right !important; } +.ui-dialog .Actions { float: right; margin: 0; } + +/** ------------------------------------------------------------------ +* Titlebar for pop-up dialog. +* ----------------------------------------------------------------- */ +.ui-dialog-titlebar.ui-widget-header { font-size: 14px; background-color: #b0bec7; padding: 8px 8px 6px 16px; border-bottom: 2px solid #8399a7; border-radius: 4px 8px 0 0; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ced7dc), color-stop(100%, #92a5b2)); background-image: -webkit-linear-gradient(#ced7dc, #92a5b2); background-image: -moz-linear-gradient(#ced7dc, #92a5b2); background-image: -o-linear-gradient(#ced7dc, #92a5b2); background-image: -ms-linear-gradient(#ced7dc, #92a5b2); background-image: linear-gradient(#ced7dc, #92a5b2); } diff --git a/admin/scss/_style.scss b/admin/scss/_style.scss index f307ed917..2479353bd 100644 --- a/admin/scss/_style.scss +++ b/admin/scss/_style.scss @@ -838,31 +838,89 @@ form.member-profile-form { } } -/** ------------------------------------------------------- - * Modal - JQuery UI Dialog - * -------------------------------------------------------- */ - .cms .ui-widget-overlay { - background-color: #000; - background-image: none; - } - - .cms .ui-dialog { - background: #fafafa url(../images/textures/bg_cms_main_content.png) repeat top left; - padding: 0; - border: 3px solid #000; - overflow: visible; - - & .ui-dialog-content { - padding: 0.5em 0; - } - - .Actions { - float: right; - padding: 15px; - } - - .field { - border-bottom: none; - border-image: none; - } - } + +/** ------------------------------------------------------------------ +* Modal - JQuery UI Dialog pop-up +* ----------------------------------------------------------------- */ + +/* default overlay for the CMS */ +.cms .ui-widget-overlay-default { + +} + +/* Adjusting the color of the background overlay to be darker. */ +.cms .ui-widget-overlay { + background-color: #000; + background-image: none; +} + + +$DialogHeaderColor: #5F6160; +$DialogHeaderFontSize: 14px; +$DialogBorderRadius: 8px; +.ui-dialog { + background: url("../images/textures/bg_cms_main_content.png") repeat left top #F0F3F4; + border: 3px solid #000 !important; + border-radius: $DialogBorderRadius; + overflow: visible; + padding: 0; + + #PageType { + .middleColumn { + margin: 0; + padding: 0; + + .optionset li { + width: 100%; + } + } + + li { + &.selected { + background-color: rgba(255,255,153, 0.5); /*background-color: #FFFF99;*/ + } + + &:hover { + background-color: #FFFF99 !important; /* lighter highlight on hover */ + } + } + } + + /* Labels for all the Dialogs of the pop-up form */ + .field label.left { + font-size: $DialogHeaderFontSize; + font-weight: bold; + width: 100%; + float: none; + color: $DialogHeaderColor; + } + + /* Exception for a label that is inline with the selector dropdown box */ + #ParentID { + label.left { + padding: 8px 0 8px 0; + float: right !important; + } + } + + .Actions { + float: right; + margin: 0; + } +} + +/** ------------------------------------------------------------------ +* Titlebar for pop-up dialog. +* ----------------------------------------------------------------- */ +@import "compass"; +@import "compass/css3"; +@import "compass/utilities"; +.ui-dialog-titlebar.ui-widget-header { + font-size: $DialogHeaderFontSize; + background-color: #b0bec7; + padding: 8px 8px 6px 16px; + + border-bottom: 2px solid #8399a7; + border-radius: $DialogBorderRadius/2 $DialogBorderRadius 0 0; + @include background-image(linear-gradient(#ced7dc, #92a5b2)); +} From 90d4321c52c30cd8a05ad6e2ca8980484a45eba0 Mon Sep 17 00:00:00 2001 From: Julian Seidenberg Date: Thu, 29 Sep 2011 17:09:36 +1300 Subject: [PATCH 05/15] ENHANCEMENT: adding an additional overlay-light div that is used when switching between pages by ajax. The dialog pop-up uses the default "ui-widget-overlay", but that overlay is darker than "ui-widget-overlay-light". Having two overlays prevents weird graphic effects when switching pages using the darker overlay (SSO-12) --- admin/css/screen.css | 6 ++++-- admin/javascript/LeftAndMain.Content.js | 2 +- admin/javascript/LeftAndMain.Preview.js | 4 ++-- admin/scss/_style.scss | 9 +++++---- 4 files changed, 12 insertions(+), 9 deletions(-) diff --git a/admin/css/screen.css b/admin/css/screen.css index f4cadf8b0..ed045b150 100644 --- a/admin/css/screen.css +++ b/admin/css/screen.css @@ -456,8 +456,10 @@ form.member-profile-form .formattingHelpText li { font-size: 11px; color: #333; /** ------------------------------------------------------------------ * Modal - JQuery UI Dialog pop-up * ----------------------------------------------------------------- */ -/* default overlay for the CMS */ -/* Adjusting the color of the background overlay to be darker. */ +/* overlay for switching between CMS panes */ +.cms .ui-widget-overlay-light { background: #aaaaaa url(../../thirdparty/jquery-ui-themes/smoothness/images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; opacity: 0.3; } + +/* Adjusting the color of the background overlay to be darker for pop-up dialogs (created by jQuery-UI) */ .cms .ui-widget-overlay { background-color: #000; background-image: none; } .ui-dialog { background: url("../images/textures/bg_cms_main_content.png") repeat left top #f0f3f4; border: 3px solid #000 !important; border-radius: 8px; overflow: visible; padding: 0; /* Labels for all the Dialogs of the pop-up form */ /* Exception for a label that is inline with the selector dropdown box */ } diff --git a/admin/javascript/LeftAndMain.Content.js b/admin/javascript/LeftAndMain.Content.js index f531559f5..35cef2ce8 100644 --- a/admin/javascript/LeftAndMain.Content.js +++ b/admin/javascript/LeftAndMain.Content.js @@ -266,7 +266,7 @@ $('.cms-content.loading').entwine({ onmatch: function() { - this.append('
'); + this.append('
'); }, onunmatch: function() { this.find('.cms-content-loading-overlay').remove(); diff --git a/admin/javascript/LeftAndMain.Preview.js b/admin/javascript/LeftAndMain.Preview.js index f9cf8fad3..e3b846168 100644 --- a/admin/javascript/LeftAndMain.Preview.js +++ b/admin/javascript/LeftAndMain.Preview.js @@ -71,8 +71,8 @@ else this.collapse(); // Preview might not be available in all admin interfaces - block/disable when necessary - this.append('
'); - this.find('.cms-preview-overlay').hide(); + this.append('
'); + this.find('.cms-preview-overlay-light').hide(); this._super(); }, diff --git a/admin/scss/_style.scss b/admin/scss/_style.scss index 2479353bd..e0453ad91 100644 --- a/admin/scss/_style.scss +++ b/admin/scss/_style.scss @@ -843,12 +843,13 @@ form.member-profile-form { * Modal - JQuery UI Dialog pop-up * ----------------------------------------------------------------- */ -/* default overlay for the CMS */ -.cms .ui-widget-overlay-default { - +/* overlay for switching between CMS panes */ +.cms .ui-widget-overlay-light { + background: #aaaaaa url(../../thirdparty/jquery-ui-themes/smoothness/images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; + opacity: 0.3; } -/* Adjusting the color of the background overlay to be darker. */ +/* Adjusting the color of the background overlay to be darker for pop-up dialogs (created by jQuery-UI) */ .cms .ui-widget-overlay { background-color: #000; background-image: none; From fb364bcc2507d096fb0356141129ab3b69259ae9 Mon Sep 17 00:00:00 2001 From: Julian Seidenberg Date: Fri, 30 Sep 2011 12:48:27 +1300 Subject: [PATCH 06/15] ENHANCEMENT: using CSS3 to do number label in dialog box (SSO-8) --- admin/css/screen.css | 11 +++++---- admin/scss/_style.scss | 52 +++++++++++++++++++++++++++++++++++++----- 2 files changed, 53 insertions(+), 10 deletions(-) diff --git a/admin/css/screen.css b/admin/css/screen.css index ed045b150..513eb5066 100644 --- a/admin/css/screen.css +++ b/admin/css/screen.css @@ -462,16 +462,19 @@ form.member-profile-form .formattingHelpText li { font-size: 11px; color: #333; /* Adjusting the color of the background overlay to be darker for pop-up dialogs (created by jQuery-UI) */ .cms .ui-widget-overlay { background-color: #000; background-image: none; } -.ui-dialog { background: url("../images/textures/bg_cms_main_content.png") repeat left top #f0f3f4; border: 3px solid #000 !important; border-radius: 8px; overflow: visible; padding: 0; /* Labels for all the Dialogs of the pop-up form */ /* Exception for a label that is inline with the selector dropdown box */ } +.ui-dialog { background: url("../images/textures/bg_cms_main_content.png") repeat left top #f0f3f4; border: 3px solid #000 !important; border-radius: 8px; overflow: visible; padding: 0; /* Labels for all the Dialogs of the pop-up form */ /* Numeric labels in the sitetree */ /* Exception for a label that is inline with the selector dropdown box */ } .ui-dialog #PageType .middleColumn { margin: 0; padding: 0; } .ui-dialog #PageType .middleColumn .optionset li { width: 100%; } .ui-dialog #PageType li.selected { background-color: rgba(255, 255, 153, 0.5); /*background-color: #FFFF99;*/ } .ui-dialog #PageType li:hover { background-color: #FFFF99 !important; /* lighter highlight on hover */ } -.ui-dialog .field label.left { font-size: 14px; font-weight: bold; width: 100%; float: none; color: #5f6160; } -.ui-dialog #ParentID label.left { padding: 8px 0 8px 0; float: right !important; } +.ui-dialog .field label.left { font-size: 14px; font-weight: bold; width: 100%; float: none; color: #5f6160; margin-top: -4px; margin-left: 36px; } +.ui-dialog label.numeric-label { font-size: 14px; font-weight: bold; float: left; -moz-border-radius-topleft: 3px; -webkit-border-top-left-radius: 3px; -o-border-top-left-radius: 3px; -ms-border-top-left-radius: 3px; -khtml-border-top-left-radius: 3px; border-top-left-radius: 3px; -moz-border-radius-bottomleft: 3px; -webkit-border-bottom-left-radius: 3px; -o-border-bottom-left-radius: 3px; -ms-border-bottom-left-radius: 3px; -khtml-border-bottom-left-radius: 3px; border-bottom-left-radius: 3px; background-color: #7b8c91; padding: 4px 8px 4px 3px; text-align: right; color: #fff; position: absolute; width: 15px; /* Numeric label icon (supports up to two-digit numbers) */ } +.ui-dialog label.numeric-label .label-triangle { position: absolute; left: 26px; margin-top: -18px; overflow: visible; display: block; width: 0; height: 0; border-top: 11px solid transparent; border-left: 7px dashed #7b8c91; border-bottom: 11px solid transparent; } +.ui-dialog #ParentID label.left { padding: 8px 0 8px 0; float: left !important; width: 125px; } +.ui-dialog #ParentID .middleColumn { width: 320px; } .ui-dialog .Actions { float: right; margin: 0; } /** ------------------------------------------------------------------ * Titlebar for pop-up dialog. * ----------------------------------------------------------------- */ -.ui-dialog-titlebar.ui-widget-header { font-size: 14px; background-color: #b0bec7; padding: 8px 8px 6px 16px; border-bottom: 2px solid #8399a7; border-radius: 4px 8px 0 0; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ced7dc), color-stop(100%, #92a5b2)); background-image: -webkit-linear-gradient(#ced7dc, #92a5b2); background-image: -moz-linear-gradient(#ced7dc, #92a5b2); background-image: -o-linear-gradient(#ced7dc, #92a5b2); background-image: -ms-linear-gradient(#ced7dc, #92a5b2); background-image: linear-gradient(#ced7dc, #92a5b2); } +.ui-dialog-titlebar.ui-widget-header { font-size: 14px; background-color: #b0bec7; padding: 4px 4px 3px 16px; border-bottom: 2px solid #8399a7; -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; -o-border-top-left-radius: 4px; -ms-border-top-left-radius: 4px; -khtml-border-top-left-radius: 4px; border-top-left-radius: 4px; /* /2 need to eliminate visual artifact */ -moz-border-radius-topright: 8px; -webkit-border-top-right-radius: 8px; -o-border-top-right-radius: 8px; -ms-border-top-right-radius: 8px; -khtml-border-top-right-radius: 8px; border-top-right-radius: 8px; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ced7dc), color-stop(100%, #92a5b2)); background-image: -webkit-linear-gradient(#ced7dc, #92a5b2); background-image: -moz-linear-gradient(#ced7dc, #92a5b2); background-image: -o-linear-gradient(#ced7dc, #92a5b2); background-image: -ms-linear-gradient(#ced7dc, #92a5b2); background-image: linear-gradient(#ced7dc, #92a5b2); margin-bottom: 7px; } diff --git a/admin/scss/_style.scss b/admin/scss/_style.scss index e0453ad91..38160db65 100644 --- a/admin/scss/_style.scss +++ b/admin/scss/_style.scss @@ -10,6 +10,9 @@ * create new SCSS files for larger components like the CMS menu or tree * (see _tree.scss and _menu.scss). */ +@import "compass"; +@import "compass/css3"; +@import "compass/utilities"; /** ---------------------------------------------------- * Core Styles. @@ -859,6 +862,7 @@ form.member-profile-form { $DialogHeaderColor: #5F6160; $DialogHeaderFontSize: 14px; $DialogBorderRadius: 8px; +$DialogLabelColor: #7B8C91; .ui-dialog { background: url("../images/textures/bg_cms_main_content.png") repeat left top #F0F3F4; border: 3px solid #000 !important; @@ -894,13 +898,50 @@ $DialogBorderRadius: 8px; width: 100%; float: none; color: $DialogHeaderColor; + margin-top: -4px; + margin-left: 36px; + } + + /* Numeric labels in the sitetree */ + label.numeric-label { + font-size: $DialogHeaderFontSize; + font-weight: bold; + float: left; + @include border-top-left-radius(3px); + @include border-bottom-left-radius(3px); + background-color: $DialogLabelColor; + padding: 4px 8px 4px 3px; + text-align: right; + color: #fff; + position: absolute; + width: 15px; + + /* Numeric label icon (supports up to two-digit numbers) */ + .label-triangle { + position: absolute; + left: 26px; + margin-top: -18px; + overflow: visible; + display: block; + width: 0; + height: 0; + border-top: 11px solid transparent; + border-left: 7px dashed $DialogLabelColor; + border-bottom: 11px solid transparent; + } + } /* Exception for a label that is inline with the selector dropdown box */ #ParentID { label.left { padding: 8px 0 8px 0; - float: right !important; + float: left !important; + width: 125px; + } + + .middleColumn { + width: 320px; } } @@ -913,15 +954,14 @@ $DialogBorderRadius: 8px; /** ------------------------------------------------------------------ * Titlebar for pop-up dialog. * ----------------------------------------------------------------- */ -@import "compass"; -@import "compass/css3"; -@import "compass/utilities"; .ui-dialog-titlebar.ui-widget-header { font-size: $DialogHeaderFontSize; background-color: #b0bec7; - padding: 8px 8px 6px 16px; + padding: 4px 4px 3px 16px; border-bottom: 2px solid #8399a7; - border-radius: $DialogBorderRadius/2 $DialogBorderRadius 0 0; + @include border-top-left-radius($DialogBorderRadius/2); /* /2 need to eliminate visual artifact */ + @include border-top-right-radius($DialogBorderRadius); @include background-image(linear-gradient(#ced7dc, #92a5b2)); + margin-bottom: 7px; } From 6837baea38efdada87b6b84436c2299f366e3b97 Mon Sep 17 00:00:00 2001 From: Julian Seidenberg Date: Fri, 30 Sep 2011 12:52:00 +1300 Subject: [PATCH 07/15] MINOR: adjust distances and fallback colors (SSO-8) --- admin/css/screen.css | 4 ++-- admin/scss/_style.scss | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/admin/css/screen.css b/admin/css/screen.css index 513eb5066..465427da3 100644 --- a/admin/css/screen.css +++ b/admin/css/screen.css @@ -467,7 +467,7 @@ form.member-profile-form .formattingHelpText li { font-size: 11px; color: #333; .ui-dialog #PageType .middleColumn .optionset li { width: 100%; } .ui-dialog #PageType li.selected { background-color: rgba(255, 255, 153, 0.5); /*background-color: #FFFF99;*/ } .ui-dialog #PageType li:hover { background-color: #FFFF99 !important; /* lighter highlight on hover */ } -.ui-dialog .field label.left { font-size: 14px; font-weight: bold; width: 100%; float: none; color: #5f6160; margin-top: -4px; margin-left: 36px; } +.ui-dialog .field label.left { font-size: 14px; font-weight: bold; width: 100%; float: none; color: #5f6160; margin-top: -4px; margin-left: 38px; } .ui-dialog label.numeric-label { font-size: 14px; font-weight: bold; float: left; -moz-border-radius-topleft: 3px; -webkit-border-top-left-radius: 3px; -o-border-top-left-radius: 3px; -ms-border-top-left-radius: 3px; -khtml-border-top-left-radius: 3px; border-top-left-radius: 3px; -moz-border-radius-bottomleft: 3px; -webkit-border-bottom-left-radius: 3px; -o-border-bottom-left-radius: 3px; -ms-border-bottom-left-radius: 3px; -khtml-border-bottom-left-radius: 3px; border-bottom-left-radius: 3px; background-color: #7b8c91; padding: 4px 8px 4px 3px; text-align: right; color: #fff; position: absolute; width: 15px; /* Numeric label icon (supports up to two-digit numbers) */ } .ui-dialog label.numeric-label .label-triangle { position: absolute; left: 26px; margin-top: -18px; overflow: visible; display: block; width: 0; height: 0; border-top: 11px solid transparent; border-left: 7px dashed #7b8c91; border-bottom: 11px solid transparent; } .ui-dialog #ParentID label.left { padding: 8px 0 8px 0; float: left !important; width: 125px; } @@ -477,4 +477,4 @@ form.member-profile-form .formattingHelpText li { font-size: 11px; color: #333; /** ------------------------------------------------------------------ * Titlebar for pop-up dialog. * ----------------------------------------------------------------- */ -.ui-dialog-titlebar.ui-widget-header { font-size: 14px; background-color: #b0bec7; padding: 4px 4px 3px 16px; border-bottom: 2px solid #8399a7; -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; -o-border-top-left-radius: 4px; -ms-border-top-left-radius: 4px; -khtml-border-top-left-radius: 4px; border-top-left-radius: 4px; /* /2 need to eliminate visual artifact */ -moz-border-radius-topright: 8px; -webkit-border-top-right-radius: 8px; -o-border-top-right-radius: 8px; -ms-border-top-right-radius: 8px; -khtml-border-top-right-radius: 8px; border-top-right-radius: 8px; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ced7dc), color-stop(100%, #92a5b2)); background-image: -webkit-linear-gradient(#ced7dc, #92a5b2); background-image: -moz-linear-gradient(#ced7dc, #92a5b2); background-image: -o-linear-gradient(#ced7dc, #92a5b2); background-image: -ms-linear-gradient(#ced7dc, #92a5b2); background-image: linear-gradient(#ced7dc, #92a5b2); margin-bottom: 7px; } +.ui-dialog-titlebar.ui-widget-header { font-size: 14px; background-color: #92a5b2; padding: 4px 4px 3px 16px; border-bottom: 2px solid #8399a7; -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; -o-border-top-left-radius: 4px; -ms-border-top-left-radius: 4px; -khtml-border-top-left-radius: 4px; border-top-left-radius: 4px; /* /2 need to eliminate visual artifact */ -moz-border-radius-topright: 8px; -webkit-border-top-right-radius: 8px; -o-border-top-right-radius: 8px; -ms-border-top-right-radius: 8px; -khtml-border-top-right-radius: 8px; border-top-right-radius: 8px; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ced7dc), color-stop(100%, #92a5b2)); background-image: -webkit-linear-gradient(#ced7dc, #92a5b2); background-image: -moz-linear-gradient(#ced7dc, #92a5b2); background-image: -o-linear-gradient(#ced7dc, #92a5b2); background-image: -ms-linear-gradient(#ced7dc, #92a5b2); background-image: linear-gradient(#ced7dc, #92a5b2); margin-bottom: 12px; } diff --git a/admin/scss/_style.scss b/admin/scss/_style.scss index 38160db65..55275c14c 100644 --- a/admin/scss/_style.scss +++ b/admin/scss/_style.scss @@ -899,7 +899,7 @@ $DialogLabelColor: #7B8C91; float: none; color: $DialogHeaderColor; margin-top: -4px; - margin-left: 36px; + margin-left: 38px; } /* Numeric labels in the sitetree */ @@ -956,12 +956,12 @@ $DialogLabelColor: #7B8C91; * ----------------------------------------------------------------- */ .ui-dialog-titlebar.ui-widget-header { font-size: $DialogHeaderFontSize; - background-color: #b0bec7; + background-color: #92a5b2; padding: 4px 4px 3px 16px; border-bottom: 2px solid #8399a7; @include border-top-left-radius($DialogBorderRadius/2); /* /2 need to eliminate visual artifact */ @include border-top-right-radius($DialogBorderRadius); @include background-image(linear-gradient(#ced7dc, #92a5b2)); - margin-bottom: 7px; + margin-bottom: 12px; } From 9beef8525906f5edc69e910816edb65ea80177e2 Mon Sep 17 00:00:00 2001 From: Julian Seidenberg Date: Fri, 30 Sep 2011 13:49:05 +1300 Subject: [PATCH 08/15] BUGFIX: creating green fallback color for "Save and Publish" button in IE7 (SSO-8) --- admin/css/screen.css | 2 +- admin/scss/_forms.scss | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/admin/css/screen.css b/admin/css/screen.css index 465427da3..df62d65f0 100644 --- a/admin/css/screen.css +++ b/admin/css/screen.css @@ -225,7 +225,7 @@ form.nostyle .middleColumn { margin-left: 0; } .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; text-shadow: white 0 1px 1px; -moz-box-shadow: #ced7dc 0 1px 2px; -webkit-box-shadow: #ced7dc 0 1px 2px; -o-box-shadow: #ced7dc 0 1px 2px; box-shadow: #ced7dc 0 1px 2px; background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 999px 999px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 999px 999px, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 999px 999px, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 999px 999px, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 999px 999px, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 999px 999px, linear-gradient(#ffffff, #d9d9d9); /* CMS action button sprite mix-in (used for all the buttons in the bottom row */ /* constructive */ /* destructive */ /* generic action buttons */ } .cms .ss-ui-button.ui-state-hover { border: 1px solid #a6a6a9; text-shadow: white 0 1px 1px; -moz-box-shadow: #b0bec7 0 1px 2px; -webkit-box-shadow: #b0bec7 0 1px 2px; -o-box-shadow: #b0bec7 0 1px 2px; box-shadow: #b0bec7 0 1px 2px; background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 999px 999px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 999px 999px, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 999px 999px, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 999px 999px, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 999px 999px, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 999px 999px, linear-gradient(#ffffff, #d9d9d9); } .cms .ss-ui-button:focus, .cms .ss-ui-button:active { border: 1px solid #b3b3b5; -moz-box-shadow: #b0bec7 0 1px 2px; -webkit-box-shadow: #b0bec7 0 1px 2px; -o-box-shadow: #b0bec7 0 1px 2px; box-shadow: #b0bec7 0 1px 2px; background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 999px 999px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e6e6e6), color-stop(100%, #ffffff)); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 999px 999px, -webkit-linear-gradient(#e6e6e6, #ffffff); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 999px 999px, -moz-linear-gradient(#e6e6e6, #ffffff); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 999px 999px, -o-linear-gradient(#e6e6e6, #ffffff); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 999px 999px, -ms-linear-gradient(#e6e6e6, #ffffff); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 999px 999px, linear-gradient(#e6e6e6, #ffffff); } -.cms .ss-ui-button.ss-ui-action-constructive { padding-left: 24px; padding-right: 6px; font-weight: bold; margin-left: 8px; color: white; border-color: #78a127; background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 5px 5px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #80bf40), color-stop(100%, #59862d)); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 5px 5px, -webkit-linear-gradient(#80bf40, #59862d); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 5px 5px, -moz-linear-gradient(#80bf40, #59862d); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 5px 5px, -o-linear-gradient(#80bf40, #59862d); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 5px 5px, -ms-linear-gradient(#80bf40, #59862d); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 5px 5px, linear-gradient(#80bf40, #59862d); background-color: #669933; text-shadow: #4d7326 0 1px 1px; -moz-box-shadow: #748d9d 1px 1px 2px; -webkit-box-shadow: #748d9d 1px 1px 2px; -o-box-shadow: #748d9d 1px 1px 2px; box-shadow: #748d9d 1px 1px 2px; } +.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; background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 5px 5px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #80bf40), color-stop(100%, #59862d)); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 5px 5px, -webkit-linear-gradient(#80bf40, #59862d); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 5px 5px, -moz-linear-gradient(#80bf40, #59862d); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 5px 5px, -o-linear-gradient(#80bf40, #59862d); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 5px 5px, -ms-linear-gradient(#80bf40, #59862d); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 5px 5px, linear-gradient(#80bf40, #59862d); background-color: #669933; text-shadow: #4d7326 0 1px 1px; -moz-box-shadow: #748d9d 1px 1px 2px; -webkit-box-shadow: #748d9d 1px 1px 2px; -o-box-shadow: #748d9d 1px 1px 2px; box-shadow: #748d9d 1px 1px 2px; } .cms .ss-ui-button.ss-ui-action-constructive.ui-state-hover { border-color: #59781d; background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 5px 5px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #8cc653), color-stop(100%, #669933)); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 5px 5px, -webkit-linear-gradient(#8cc653, #669933); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 5px 5px, -moz-linear-gradient(#8cc653, #669933); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 5px 5px, -o-linear-gradient(#8cc653, #669933); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 5px 5px, -ms-linear-gradient(#8cc653, #669933); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 5px 5px, linear-gradient(#8cc653, #669933); background-color: #4d7326; } .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: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -26px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -26px, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -26px, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -26px, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -26px, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -26px, linear-gradient(#ffffff, #d9d9d9); } diff --git a/admin/scss/_forms.scss b/admin/scss/_forms.scss index eef68b769..06b8f73af 100644 --- a/admin/scss/_forms.scss +++ b/admin/scss/_forms.scss @@ -279,6 +279,7 @@ form.nostyle { /* constructive */ &.ss-ui-action-constructive { + background-image: none; padding-left: 24px; padding-right: 6px; font-weight: bold; From e58b0320dd74a71390e5d90f4582dc295d3f9f88 Mon Sep 17 00:00:00 2001 From: Julian Seidenberg Date: Fri, 30 Sep 2011 14:29:19 +1300 Subject: [PATCH 09/15] ENHANCEMENT: adding ui-state-disabled icons for CMS buttons (SSO-8) --- admin/css/screen.css | 4 ++++ admin/images/btn_icons_sprite_disabled.png | Bin 0 -> 5270 bytes admin/scss/_forms.scss | 9 +++++++++ 3 files changed, 13 insertions(+) create mode 100644 admin/images/btn_icons_sprite_disabled.png diff --git a/admin/css/screen.css b/admin/css/screen.css index df62d65f0..cb66aef83 100644 --- a/admin/css/screen.css +++ b/admin/css/screen.css @@ -230,12 +230,16 @@ form.nostyle .middleColumn { margin-left: 0; } .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: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -26px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -26px, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -26px, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -26px, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -26px, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -26px, linear-gradient(#ffffff, #d9d9d9); } .cms .ss-ui-button.ss-ui-action-destructive.delete.ui-state-hover { background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -26px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -26px, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -26px, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -26px, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -26px, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -26px, linear-gradient(#ffffff, #e6e6e6); } +.cms .ss-ui-button.ss-ui-action-destructive.delete.ui-state-disabled { background-image: none; background: url('../images/../images/btn_icons_sprite_disabled.png?1317345241') no-repeat 6px -26px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/../images/btn_icons_sprite_disabled.png?1317345241') no-repeat 6px -26px, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1317345241') no-repeat 6px -26px, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1317345241') no-repeat 6px -26px, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1317345241') no-repeat 6px -26px, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1317345241') no-repeat 6px -26px, linear-gradient(#ffffff, #e6e6e6); } .cms .ss-ui-button.ss-ui-action-destructive.unpublish { padding-left: 24px; padding-right: 6px; background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -58px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -58px, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -58px, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -58px, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -58px, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -58px, linear-gradient(#ffffff, #d9d9d9); } .cms .ss-ui-button.ss-ui-action-destructive.unpublish.ui-state-hover { background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -58px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -58px, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -58px, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -58px, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -58px, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -58px, linear-gradient(#ffffff, #e6e6e6); } +.cms .ss-ui-button.ss-ui-action-destructive.unpublish.ui-state-disabled { background-image: none; background: url('../images/../images/btn_icons_sprite_disabled.png?1317345241') no-repeat 6px -58px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/../images/btn_icons_sprite_disabled.png?1317345241') no-repeat 6px -58px, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1317345241') no-repeat 6px -58px, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1317345241') no-repeat 6px -58px, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1317345241') no-repeat 6px -58px, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1317345241') no-repeat 6px -58px, linear-gradient(#ffffff, #e6e6e6); } .cms .ss-ui-button.save-draft { padding-left: 24px; padding-right: 6px; background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -90px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -90px, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -90px, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -90px, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -90px, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -90px, linear-gradient(#ffffff, #d9d9d9); } .cms .ss-ui-button.save-draft.ui-state-hover { background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -90px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -90px, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -90px, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -90px, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -90px, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -90px, linear-gradient(#ffffff, #e6e6e6); } +.cms .ss-ui-button.save-draft.ui-state-disabled { background-image: none; background: url('../images/../images/btn_icons_sprite_disabled.png?1317345241') no-repeat 6px -90px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/../images/btn_icons_sprite_disabled.png?1317345241') no-repeat 6px -90px, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1317345241') no-repeat 6px -90px, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1317345241') no-repeat 6px -90px, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1317345241') no-repeat 6px -90px, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1317345241') no-repeat 6px -90px, linear-gradient(#ffffff, #e6e6e6); } .cms .ss-ui-button.cms-preview-toggle-link { padding-left: 24px !important; margin-left: 4px !important; padding-left: 24px; padding-right: 6px; background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -124px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -124px, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -124px, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -124px, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -124px, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -124px, linear-gradient(#ffffff, #d9d9d9); } .cms .ss-ui-button.cms-preview-toggle-link.ui-state-hover { background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -124px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -124px, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -124px, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -124px, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -124px, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -124px, linear-gradient(#ffffff, #e6e6e6); } +.cms .ss-ui-button.cms-preview-toggle-link.ui-state-disabled { background-image: none; background: url('../images/../images/btn_icons_sprite_disabled.png?1317345241') no-repeat 6px -124px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/../images/btn_icons_sprite_disabled.png?1317345241') no-repeat 6px -124px, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1317345241') no-repeat 6px -124px, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1317345241') no-repeat 6px -124px, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1317345241') no-repeat 6px -124px, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1317345241') no-repeat 6px -124px, linear-gradient(#ffffff, #e6e6e6); } .cms .ss-ui-button.ss-ui-button-small { padding: 4px 4px; } .cms .ss-ui-button.ui-state-highlight { background-color: #e6e6e6; border: 1px solid #708284; } .cms .ss-ui-button.ss-ui-action-minor { background: none; padding: 0; border: 0; color: #393939; text-decoration: underline; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; } diff --git a/admin/images/btn_icons_sprite_disabled.png b/admin/images/btn_icons_sprite_disabled.png new file mode 100644 index 0000000000000000000000000000000000000000..e702a8962f3d094e6db948dc6b4831298c25e831 GIT binary patch literal 5270 zcmcJT_g53lm&Vfw2{nMy6bM~jkgjwHMSAh2Dj-CP^rG}0YUlxxCQ<~!f`FnRASD3= z6r?FdrPt6ykF;#Q`xorlvpeU^%(*jXe!4UF`8<zGq#47Cr# zpww~borfv_aOs|bj;3WOaO+-#ztvbXWzYbl^B54DK!TMe=;>%)N?~tkNdH)toeI0- z2ezm~_8l@8%#RN$a$uEhuG0Sy|I%n0aqFE{*gYN1Vp}PW1o}xkeAb;laHk-@RBYC> z1fkWbS-<5?=TNyHALQJM_iGBJyo%e7?%ti(_7+_S} z?u-~~)=sh>wBQW$gum_2?82<2wRP~x-VV_%f`#<)7;p|f>fd@g8AO zF)`WN$uTWfHt_PQ_B&5HOl)XqNE0`;x(1ij>>FfG0(f|MM6rDqY0sxN3rELN;_+$S z@XA1;+~dcO1-^d$+8(qqzU8xbL(RgJGf2L|{rH;;^)t&4)nkuG-Pni z=;)}x{>orZTg36V-aqPjWU^@w84ib!HV3$IY20t!WiT)>=u6{>){8%fae_j1Of4-f z)hI?Fs?uZBM7&@2fxlXRd+mXPA%zotJQ>q}f0%hvqF)B<__ z`>E}$TWOSa@-zur|+QhL3%wzgvB@9OF*2*ox8 zt*)nbi}(K|2Xmi#Hr#|@HdYtWX8Kb4(DXB8D*@IWHIRR1o@pJ!=^G=eZlm=EImXG* zSP*&cd>zCDRAg@wzGic#6khcx0H$UeLAR^uv`OF*onC zXGy|>hIn}#_Jrl)7Ssy3HnVAXcU=w#`}Ds!WkG5$^*kl?y!rO+HwKc5N_D*sEM}RS z&wI4SmjpvC(n?ROs9jgPVnkqVR{R*HZ*2U8oeT(y!gULs!PqoXaD`d2kBx8^z64AY&^N**n{=4{l-UVVkdKF8_)~V2(&R6o>_g&dum` z{hgInI(}btTXHzLC@=<7g!*UHPsSN=@YjCB5j>Gee4s-zMIF;72QJPSpECf-Nz8(+ zPLYHV!Tl~Hvb3Ru>}+!(rR-Qo9^}JYwsp8I8wgGmA~blWuL4@Zh?%a4!(37Wrk)s1 zG(m0*e2R7dMUPLF!0DOCS41sAxbKr~moD?0Invm<%w4e>3uEgepxt8toPRYBb_Eed z=Rh?1Q6M9hW#a;%p!Ksp5({|Ou+5Av-0C!+Hfq7Vd-5vrP9ngrJ&98n1xIxCyj(W~ z2&2*k5sT~9w6{UsiXfTV_VEAN5{6S0BX|9*3XLD#jc&>oP0G`1kDX%tRk;t2jjNom zf+OTF0=qS02_13ms>)Eg-le*{_1ZBgXhIl}KFxQm3RnZKVTYQt=JlBY@ImCojf4_Z zd?n02A27V8Cr$S5ZhOr)I?WQKo6gnMx#qITq#pZIOa4wWJ_ClzT|oPXV@&hcIIu(Z zdgTNsi0{FrcQiGTHxjCowDh{?19%dyQ$i5;kgPrsbQ(52)?t-@hsNM`>SPu`2A5&S z{3|UG?8KNSfLI5i{nZy9;%$HiN&d{3MQIXzsYY|47R|m8+cdaSY`F-g>DNvM3_Hs* zsM6|IeqODZrp*dKY%`cAwOS>=4fg=l_P7bDp#0j1Y0T#=G%HZ6l&({GnV8B<%|FZE5Ls1#~4_CnsIg!6Z>MK5jqiUUT2QcR#f8 zh=*)EF|-=R1QpNfeUDk=l(;6&&eh1q=-#<>kH8-JR&G9|j`lF4Ksh0mf?-lPksjL=H}j-_%^YTCx9=! zr-*!HYGh;t5KW>Tud(A$bhP16j5zYvx30D4no|=K6VnduFg!q`TQF5C4{)@;Y$P1KrzHj9A^CY7P*78CIem zWFGG30)vl;0PlWy5Trk?(Yim_A3Hwom>}ui=}FbCg@pwNRJCKQFRIaRRuZSWm;7+w zL{WQk_V+)nrm|)9SwDaN{998~GsUH&eF=$%#twG{kcRo;_&x^-CdJ4m0K{Jv!-idn zdo+(px~7TL!F<-uVEyPVrV(YUo59Vs4pN*8P}S4|<e4~k^oqGy7YM^5hRcZpSd{yV{RE}sT`703O&!)V}Z)lq-p~~F)A7FGiaOkO*z#N zp65ER-flJxl&IM;@v2U0RI#MVE^9;39YZMQtQfMiN{pPyo%YDWOPAOST2D^GU;Di} zesQ4xS9X}2>^1$jMM*@PawiR=4H)7HnYwSQS_;zb1P>p|ot^j1x}F@YiDXQ4?X62W zEI%+mkG>ck`hMfwS%Ipq3-rS~DzP3NrM!5l!gIOhPaPhAEjV%g8K32*0@0 z9BEH|h5l&;fvP7#&F4pdGX8lv4eE{xwa`7%|w)BL*gYaz*@Y|VC>!kGWl&23}&B4OD6sOxXEssd3$B*Id$p~Imh0M`>N zFgybuCa0k{9R*6l3zeVIU9j%Wpw7Bo!%jw=AnCNQMiL=ePc!NHVX4*tSSZYU^ZKyV z6&dEdr5n5=zi4HKxJId^Ad?nN9|P5r8m57^)9$9pD=+XNSI#IUSvoHQ5N5IN$soux z833coQsW=r4M$tsZ@Z|Qfg8|=Q&CRV*4DH2^|IRnojy+bml*%WP}BKlVLn)zfUj`+ zC0u}$ZhG?MNx`y{v7ll}*U|=G1PeYI!ON|}_V~7ig|j@IySa^EqWnr^h`dS#WyMtWTd4+i)BzG z0^Xi}=4JMm{~$#3el;iAvuCB@2$#jKjre0F3Y=^SlWp4FA>>7;j6D3l3msfUYV7L? zGUf^5t&O$o7dza;DK`@*=RcKE%yb7F;ZcYSk+}qRAu`i*w!V=~`=68Q5PbmmzJ==c z?)%K^rO#O&0c2rXao&2-P$%f#3t(p?tIjbD0BeMDw~8k?10M4)t!KAeBZ1^Tlt&UR z@~-@yRE#g;{_FWptF0oB-T4zoTT_TY86+815$KZp1i+IL47rdJMnSkM1*=~`i25G| zNikwTf#GXBcZG#fdgVN^6eBnyR(GxMA2FaZ>lWfDdQ8>&;QjK{{ps zD%TqtVls79K$Lt|Bq(Dv+p5LMf$zaz(p<9lGtsFlGHwvLXT5Ld<&x=lPh)bM%VWwx zu?QeK)bxxmZE?Q0?Qq;qWAN+O<{yQ0nLoa`4wa}melJ!z#x?EGPkmz6aZja#IN8JH z_!D~c(n_=P^A&5N|JdO2N4&{pHH{qT`&2ymk?I3S8EG82R-o-Xl&xRmy+%BC6hNLNaVVkz+4X zz0_^7C&S*bwQH&@=It%~{=pBkV+X3^3OGI9aop>vS9oDosy?EJ<3X8nc<;ZSvE4#~c8UF`ncO!#yNf!aEy52CbHKEUf39Fb z<6~SE0VBkc>CcHtZgYR*ij{*NzqY8##NYVvV#jrD(1e7Z8VXODFiAhEeF?32! zH0hC&BBN=SN{<^uXF)_fF8M@23{qK~66$?oiEXz(IocAP59U(PKk7v~Bw7k^h{6X`ji+q?lGc(zrUPWd_+ z+%d^Pznpv4ckxHGJM=k+QFZe$ymzovBSyf1k-2B}_MOkcKD()x#hZ*H`6MqC z5{l?g*f@~qMXNU}|!#Xv2p zQ|4WX)xS>!MD6u$Z8KT%{~a1){P{gRlnenzj2yL|;=suM0 z@+u(je)`Y9X=FwIFAsiDCa3Pbb2*DPX1?;3!5FNPP^b}6+hibh2ZtAiU`9H?6}UKp z1}c&xFR{+s+xtn0TEw8X16QqDW@|jM%Xj034GjYo9RN_?{JgxITf~tH@%zNWzQad8 z=v%jF{JMpAj8}GfXS~{LV&3W@U`X^ZTQRn4QuD;Anl!NW|pn0r%9IQ8(>$SBKx9#x1w8v9U+MOvma#vT!*#w9vYwS>Dp z=U8AIK?767#R`G)vBz;A+s;{)2gh@9|H4ukAd|)y wZrCSoug$Yfi_h0&L}GlI9x`TmH=j|~|LK8LN8Eo*{ci*q+%nav)k4Sp7c+|9UjP6A literal 0 HcmV?d00001 diff --git a/admin/scss/_forms.scss b/admin/scss/_forms.scss index 06b8f73af..6ab29090f 100644 --- a/admin/scss/_forms.scss +++ b/admin/scss/_forms.scss @@ -275,6 +275,15 @@ form.nostyle { )) ); } + &.ui-state-disabled { + background-image: none; + @include background(image-url("../images/btn_icons_sprite_disabled.png") no-repeat $horizontalOffset $verticalOffset, + linear-gradient(color-stops( + lighten($color-button-generic, 20%), + $color-button-generic + )) + ); + } } /* constructive */ From 665956284da18d77df560261d14394eb06a571a1 Mon Sep 17 00:00:00 2001 From: Julian Seidenberg Date: Fri, 30 Sep 2011 14:29:53 +1300 Subject: [PATCH 10/15] MINOR: adding .gitignore --- .gitignore | 1 + 1 file changed, 1 insertion(+) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 000000000..496ee2ca6 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.DS_Store \ No newline at end of file From d378a86c495e3a5b73310cc3588c1d7a7a5a05e7 Mon Sep 17 00:00:00 2001 From: Julian Seidenberg Date: Fri, 30 Sep 2011 16:08:32 +1300 Subject: [PATCH 11/15] BUGFIX: using Will's grid variables for spacing of dialog --- admin/css/screen.css | 10 +++++----- admin/scss/_style.scss | 6 +++--- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/admin/css/screen.css b/admin/css/screen.css index cb66aef83..40e0b39f6 100644 --- a/admin/css/screen.css +++ b/admin/css/screen.css @@ -230,16 +230,16 @@ form.nostyle .middleColumn { margin-left: 0; } .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: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -26px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -26px, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -26px, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -26px, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -26px, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -26px, linear-gradient(#ffffff, #d9d9d9); } .cms .ss-ui-button.ss-ui-action-destructive.delete.ui-state-hover { background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -26px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -26px, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -26px, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -26px, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -26px, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -26px, linear-gradient(#ffffff, #e6e6e6); } -.cms .ss-ui-button.ss-ui-action-destructive.delete.ui-state-disabled { background-image: none; background: url('../images/../images/btn_icons_sprite_disabled.png?1317345241') no-repeat 6px -26px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/../images/btn_icons_sprite_disabled.png?1317345241') no-repeat 6px -26px, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1317345241') no-repeat 6px -26px, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1317345241') no-repeat 6px -26px, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1317345241') no-repeat 6px -26px, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1317345241') no-repeat 6px -26px, linear-gradient(#ffffff, #e6e6e6); } +.cms .ss-ui-button.ss-ui-action-destructive.delete.ui-state-disabled { background-image: none; background: url('../images/../images/btn_icons_sprite_disabled.png?1317346079') no-repeat 6px -26px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/../images/btn_icons_sprite_disabled.png?1317346079') no-repeat 6px -26px, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1317346079') no-repeat 6px -26px, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1317346079') no-repeat 6px -26px, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1317346079') no-repeat 6px -26px, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1317346079') no-repeat 6px -26px, linear-gradient(#ffffff, #e6e6e6); } .cms .ss-ui-button.ss-ui-action-destructive.unpublish { padding-left: 24px; padding-right: 6px; background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -58px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -58px, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -58px, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -58px, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -58px, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -58px, linear-gradient(#ffffff, #d9d9d9); } .cms .ss-ui-button.ss-ui-action-destructive.unpublish.ui-state-hover { background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -58px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -58px, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -58px, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -58px, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -58px, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -58px, linear-gradient(#ffffff, #e6e6e6); } -.cms .ss-ui-button.ss-ui-action-destructive.unpublish.ui-state-disabled { background-image: none; background: url('../images/../images/btn_icons_sprite_disabled.png?1317345241') no-repeat 6px -58px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/../images/btn_icons_sprite_disabled.png?1317345241') no-repeat 6px -58px, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1317345241') no-repeat 6px -58px, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1317345241') no-repeat 6px -58px, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1317345241') no-repeat 6px -58px, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1317345241') no-repeat 6px -58px, linear-gradient(#ffffff, #e6e6e6); } +.cms .ss-ui-button.ss-ui-action-destructive.unpublish.ui-state-disabled { background-image: none; background: url('../images/../images/btn_icons_sprite_disabled.png?1317346079') no-repeat 6px -58px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/../images/btn_icons_sprite_disabled.png?1317346079') no-repeat 6px -58px, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1317346079') no-repeat 6px -58px, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1317346079') no-repeat 6px -58px, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1317346079') no-repeat 6px -58px, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1317346079') no-repeat 6px -58px, linear-gradient(#ffffff, #e6e6e6); } .cms .ss-ui-button.save-draft { padding-left: 24px; padding-right: 6px; background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -90px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -90px, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -90px, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -90px, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -90px, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -90px, linear-gradient(#ffffff, #d9d9d9); } .cms .ss-ui-button.save-draft.ui-state-hover { background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -90px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -90px, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -90px, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -90px, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -90px, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -90px, linear-gradient(#ffffff, #e6e6e6); } -.cms .ss-ui-button.save-draft.ui-state-disabled { background-image: none; background: url('../images/../images/btn_icons_sprite_disabled.png?1317345241') no-repeat 6px -90px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/../images/btn_icons_sprite_disabled.png?1317345241') no-repeat 6px -90px, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1317345241') no-repeat 6px -90px, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1317345241') no-repeat 6px -90px, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1317345241') no-repeat 6px -90px, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1317345241') no-repeat 6px -90px, linear-gradient(#ffffff, #e6e6e6); } +.cms .ss-ui-button.save-draft.ui-state-disabled { background-image: none; background: url('../images/../images/btn_icons_sprite_disabled.png?1317346079') no-repeat 6px -90px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/../images/btn_icons_sprite_disabled.png?1317346079') no-repeat 6px -90px, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1317346079') no-repeat 6px -90px, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1317346079') no-repeat 6px -90px, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1317346079') no-repeat 6px -90px, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1317346079') no-repeat 6px -90px, linear-gradient(#ffffff, #e6e6e6); } .cms .ss-ui-button.cms-preview-toggle-link { padding-left: 24px !important; margin-left: 4px !important; padding-left: 24px; padding-right: 6px; background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -124px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -124px, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -124px, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -124px, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -124px, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -124px, linear-gradient(#ffffff, #d9d9d9); } .cms .ss-ui-button.cms-preview-toggle-link.ui-state-hover { background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -124px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -124px, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -124px, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -124px, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -124px, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1314743735') no-repeat 6px -124px, linear-gradient(#ffffff, #e6e6e6); } -.cms .ss-ui-button.cms-preview-toggle-link.ui-state-disabled { background-image: none; background: url('../images/../images/btn_icons_sprite_disabled.png?1317345241') no-repeat 6px -124px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/../images/btn_icons_sprite_disabled.png?1317345241') no-repeat 6px -124px, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1317345241') no-repeat 6px -124px, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1317345241') no-repeat 6px -124px, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1317345241') no-repeat 6px -124px, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1317345241') no-repeat 6px -124px, linear-gradient(#ffffff, #e6e6e6); } +.cms .ss-ui-button.cms-preview-toggle-link.ui-state-disabled { background-image: none; background: url('../images/../images/btn_icons_sprite_disabled.png?1317346079') no-repeat 6px -124px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/../images/btn_icons_sprite_disabled.png?1317346079') no-repeat 6px -124px, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1317346079') no-repeat 6px -124px, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1317346079') no-repeat 6px -124px, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1317346079') no-repeat 6px -124px, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite_disabled.png?1317346079') no-repeat 6px -124px, linear-gradient(#ffffff, #e6e6e6); } .cms .ss-ui-button.ss-ui-button-small { padding: 4px 4px; } .cms .ss-ui-button.ui-state-highlight { background-color: #e6e6e6; border: 1px solid #708284; } .cms .ss-ui-button.ss-ui-action-minor { background: none; padding: 0; border: 0; color: #393939; text-decoration: underline; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; } @@ -481,4 +481,4 @@ form.member-profile-form .formattingHelpText li { font-size: 11px; color: #333; /** ------------------------------------------------------------------ * Titlebar for pop-up dialog. * ----------------------------------------------------------------- */ -.ui-dialog-titlebar.ui-widget-header { font-size: 14px; background-color: #92a5b2; padding: 4px 4px 3px 16px; border-bottom: 2px solid #8399a7; -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; -o-border-top-left-radius: 4px; -ms-border-top-left-radius: 4px; -khtml-border-top-left-radius: 4px; border-top-left-radius: 4px; /* /2 need to eliminate visual artifact */ -moz-border-radius-topright: 8px; -webkit-border-top-right-radius: 8px; -o-border-top-right-radius: 8px; -ms-border-top-right-radius: 8px; -khtml-border-top-right-radius: 8px; border-top-right-radius: 8px; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ced7dc), color-stop(100%, #92a5b2)); background-image: -webkit-linear-gradient(#ced7dc, #92a5b2); background-image: -moz-linear-gradient(#ced7dc, #92a5b2); background-image: -o-linear-gradient(#ced7dc, #92a5b2); background-image: -ms-linear-gradient(#ced7dc, #92a5b2); background-image: linear-gradient(#ced7dc, #92a5b2); margin-bottom: 12px; } +.ui-dialog-titlebar.ui-widget-header { font-size: 14px; background-color: #92a5b2; padding: 4px 4px 4px 16px; border-bottom: 2px solid #8399a7; -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; -o-border-top-left-radius: 4px; -ms-border-top-left-radius: 4px; -khtml-border-top-left-radius: 4px; border-top-left-radius: 4px; /* /2 need to eliminate visual artifact */ -moz-border-radius-topright: 8px; -webkit-border-top-right-radius: 8px; -o-border-top-right-radius: 8px; -ms-border-top-right-radius: 8px; -khtml-border-top-right-radius: 8px; border-top-right-radius: 8px; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ced7dc), color-stop(100%, #92a5b2)); background-image: -webkit-linear-gradient(#ced7dc, #92a5b2); background-image: -moz-linear-gradient(#ced7dc, #92a5b2); background-image: -o-linear-gradient(#ced7dc, #92a5b2); background-image: -ms-linear-gradient(#ced7dc, #92a5b2); background-image: linear-gradient(#ced7dc, #92a5b2); margin-bottom: 12px; } diff --git a/admin/scss/_style.scss b/admin/scss/_style.scss index 55275c14c..6da66a5af 100644 --- a/admin/scss/_style.scss +++ b/admin/scss/_style.scss @@ -935,7 +935,7 @@ $DialogLabelColor: #7B8C91; /* Exception for a label that is inline with the selector dropdown box */ #ParentID { label.left { - padding: 8px 0 8px 0; + padding: $grid-vertical 0 $grid-vertical 0; float: left !important; width: 125px; } @@ -957,11 +957,11 @@ $DialogLabelColor: #7B8C91; .ui-dialog-titlebar.ui-widget-header { font-size: $DialogHeaderFontSize; background-color: #92a5b2; - padding: 4px 4px 3px 16px; + padding: $grid-vertical/2 $grid-horizontal/2 $grid-vertical/2 $grid-horizontal*2; border-bottom: 2px solid #8399a7; @include border-top-left-radius($DialogBorderRadius/2); /* /2 need to eliminate visual artifact */ @include border-top-right-radius($DialogBorderRadius); @include background-image(linear-gradient(#ced7dc, #92a5b2)); - margin-bottom: 12px; + margin-bottom: $grid-vertical*1.5; } From 9fb1b32e0153f98de883d0048d75c9cf0603ddd3 Mon Sep 17 00:00:00 2001 From: Julian Seidenberg Date: Fri, 7 Oct 2011 17:48:53 +1300 Subject: [PATCH 12/15] ENHANCEMENT: Collapsed main menu view (SSO-7) --- admin/css/screen.css | 13 ++++++-- admin/javascript/LeftAndMain.Panel.js | 48 +++++++++++++++++++++++++++ admin/scss/_menu.scss | 35 ++++++++++++++++--- admin/scss/_style.scss | 27 ++++++++++++++- 4 files changed, 116 insertions(+), 7 deletions(-) diff --git a/admin/css/screen.css b/admin/css/screen.css index 40e0b39f6..818b340dc 100644 --- a/admin/css/screen.css +++ b/admin/css/screen.css @@ -165,9 +165,10 @@ li.class-ErrorPage > a .jstree-pageicon { background-position: 0 -112px; } .cms-menu.collapsed .cms-header span { display: none; } .cms-menu.collapsed .cms-menu-list { overflow-x: hidden; overflow-y: auto; } .cms-menu.collapsed .cms-menu-list li span.text { display: none; } -.cms-menu.collapsed .cms-menu-list li ul { display: none !important; } +.cms-menu.collapsed .cms-menu-list li ul { display: none; } .cms-menu.collapsed.cms-panel .cms-panel-content { display: block; } +.cms-menu-list li { /* Style applied to the menu flyout only when the collapsed setting */ } .cms-menu-list li a { display: block; height: 24px; line-height: 24px; font-size: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-shadow: #bfcad2 1px 1px 0; color: #1f1f1f; padding: 7px 5px 7px 8px; background-color: #b0bec7; cursor: pointer; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #b0bec7), color-stop(100%, #8ca1ae)); background-image: -webkit-linear-gradient(#b0bec7, #8ca1ae); background-image: -moz-linear-gradient(#b0bec7, #8ca1ae); background-image: -o-linear-gradient(#b0bec7, #8ca1ae); background-image: -ms-linear-gradient(#b0bec7, #8ca1ae); background-image: linear-gradient(#b0bec7, #8ca1ae); border-top: 1px solid #ced7dc; border-bottom: 1px solid #748d9d; } .cms-menu-list li a:hover { text-decoration: none; background-color: #b6c3cb; border-bottom: 1px solid #8399a7; color: #2c2c2c; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #bfcad2), color-stop(100%, #b0bec7)); background-image: -webkit-linear-gradient(#bfcad2, #b0bec7); background-image: -moz-linear-gradient(#bfcad2, #b0bec7); background-image: -o-linear-gradient(#bfcad2, #b0bec7); background-image: -ms-linear-gradient(#bfcad2, #b0bec7); background-image: linear-gradient(#bfcad2, #b0bec7); } .cms-menu-list li a:focus, .cms-menu-list li a:active { border-top: 1px solid #a1b2bc; text-decoration: none; background-color: #a1b2bc; color: #393939; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #92a5b2), color-stop(100%, #a1b2bc)); background-image: -webkit-linear-gradient(#92a5b2, #a1b2bc); background-image: -moz-linear-gradient(#92a5b2, #a1b2bc); background-image: -o-linear-gradient(#92a5b2, #a1b2bc); background-image: -ms-linear-gradient(#92a5b2, #a1b2bc); background-image: linear-gradient(#92a5b2, #a1b2bc); } @@ -175,13 +176,18 @@ li.class-ErrorPage > a .jstree-pageicon { background-position: 0 -112px; } .cms-menu-list li a .text { display: block; } .cms-menu-list li ul { display: none; } .cms-menu-list li.current a { color: white; text-shadow: #1e5270 0 -1px 0; border-top: 1px solid #55a4d2; border-bottom: 1px solid #1e5270; background-color: #338dc1; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #338dc1), color-stop(100%, #287099)); background-image: -webkit-linear-gradient(#338dc1, #287099); background-image: -moz-linear-gradient(#338dc1, #287099); background-image: -o-linear-gradient(#338dc1, #287099); background-image: -ms-linear-gradient(#338dc1, #287099); background-image: linear-gradient(#338dc1, #287099); } -.cms-menu-list li.current ul { border-top: 1px solid #1e5270; display: block; } +.cms-menu-list li.current ul { border-top: none; display: block; } .cms-menu-list li.current li { background-color: #287099; } .cms-menu-list li.current li a { font-size: 11px; padding: 0 10px 0 40px; height: 32px; line-height: 32px; color: #e2f0f7; background: none; border-top: 1px solid #338dc1; border-bottom: 1px solid #1e5270; } .cms-menu-list li.current li a.current, .cms-menu-list li.current li a:hover { background: #2e7ead; border-top: 1px solid #2e7ead; color: white; } .cms-menu-list li.current li a:focus { background: #236184; border-top: 1px solid #1e5270; color: white; } .cms-menu-list li.current li.current a { font-weight: bold; color: white; } .cms-menu-list li.current li.first a { border-top: none; } +.cms-menu-list li ul.collapsed-flyout { display: block; } +.cms-menu-list li ul.collapsed-flyout li a { font-size: 11px; padding: 0 10px 0 40px; height: 32px; line-height: 32px; } +.cms-menu-list li ul.collapsed-flyout li a.current, .cms-menu-list li ul.collapsed-flyout li a:hover { font-weight: bold; } +.cms-menu-list li ul.collapsed-flyout li.current a { font-weight: bold; } +.cms-menu-list li ul.collapsed-flyout li.first a { border-top: 1px solid #92a5b2; } .cms-menu-list.collapsed li .text { display: none; } .cms-menu-list.collapsed li > li { display: none; } @@ -447,6 +453,9 @@ form.member-profile-form .formattingHelpText li { font-size: 11px; color: #333; .cms-panel .toggle-expand { width: 40px; } .cms-panel.collapsed .cms-panel-content { display: none; } .cms-panel.collapsed .cms-panel-header { -moz-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -o-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); position: relative; top: 80px; border: none; padding: 0; } +.cms-panel .child-triangle { width: 0; height: 0; border-right: 3px dashed #1f1f1f; border-top: 3px solid transparent; border-left: 3px solid transparent; border-bottom: 3px dashed #1f1f1f; position: absolute; right: 1px; margin-top: -8px; display: none; /* To be shown by javascript, see LeftAndMain.Panel.js */ } +.cms-panel .collapsed-flyout { display: block !important; left: 41px; margin-top: -40px; position: fixed; width: 191px; } +.cms-panel .collapsed-flyout li a span { display: block !important; } .cms-content .cms-panel.collapsed { cursor: pointer; } diff --git a/admin/javascript/LeftAndMain.Panel.js b/admin/javascript/LeftAndMain.Panel.js index 382917031..c9c61f588 100644 --- a/admin/javascript/LeftAndMain.Panel.js +++ b/admin/javascript/LeftAndMain.Panel.js @@ -57,6 +57,34 @@ togglePanel: function(bool) { // if((!bool && this.hasClass('collapsed')) || (bool && !this.hasClass('collapsed'))) return; + + //apply or unapply the flyout formatting + $('.cms-panel-content ul li.link, .cms-panel-content ul li.opened').each(function(){ + if (bool) { //expand + $(this).children('ul').removeClass('collapsed-flyout').addClass('collapsed'); + } else { //collapse + + $(this).children('ul').addClass('collapsed-flyout').removeClass('collapsed'); + } + }); + if (bool) { //expand + //show the flyout + $('.collapsed').find('li').show(); + + //hide all the triangle + $('.cms-menu-list').find('.child-triangle').hide(); + } else { //collapse + //hide the flyout only if it is not the current section + $('.collapsed-flyout').find('li').each(function() { + //if (!$(this).hasClass('current')) + $(this).hide(); + }); + + //show all the triangles + var par = $('.cms-menu-list ul.collapsed-flyout').parent(); + if (par.children('.child-triangle').length == 0) par.append('').fadeIn(); + par.children('.child-triangle').fadeIn(); + } this.toggleClass('collapsed', !bool); var newWidth = bool ? this.getWidthExpanded() : this.getWidthCollapsed(); @@ -84,6 +112,26 @@ this.togglePanel(false); } }); + + /** Toggle the flyout panel to appear/disappear when mouse over */ + $('.cms-menu-list li').entwine({ + toggleFlyout: function(bool) { + fly = $(this); + if (fly.children('ul').first().hasClass('collapsed-flyout')) { + if (bool) { //expand + fly.children('ul').find('li').fadeIn('fast'); + } else { //collapse + fly.children('ul').find('li').hide(); + } + } + }, + onmouseenter: function(){ + $(this).toggleFlyout(true); + }, + onmouseleave: function(){ + $(this).toggleFlyout(false); + } + }); $('.cms-panel *').entwine({ getPanel: function() { diff --git a/admin/scss/_menu.scss b/admin/scss/_menu.scss index ec65a6408..4f231cc05 100644 --- a/admin/scss/_menu.scss +++ b/admin/scss/_menu.scss @@ -47,10 +47,10 @@ display: none; } li ul { - display: none !important; + display: none; } } - + &.cms-panel .cms-panel-content { display: block; // override panel defaults } @@ -122,7 +122,7 @@ display: none; } - &.current { + &.current { //need to apply current stlye to flyout also (at least line height) a { color: $color-text-light; text-shadow: darken($color-menu-button, 20%) 0 -1px 0; @@ -136,7 +136,7 @@ } ul { - border-top: 1px solid darken($color-menu-button, 20%); + border-top: none; display: block; } @@ -178,6 +178,33 @@ } } } + + /* Style applied to the menu flyout only when the collapsed setting */ + ul.collapsed-flyout { + display: block; + + li { + a { + font-size: $font-base-size - 1; + padding: 0 10px 0 40px; + height: 32px; + line-height: 32px; + + &.current, + &:hover { + font-weight: bold; + } + } + + &.current a { + font-weight: bold; + } + + &.first a { + border-top: 1px solid darken($color-base, 10%); + } + } + } } &.collapsed { diff --git a/admin/scss/_style.scss b/admin/scss/_style.scss index 6da66a5af..3ff4f8983 100644 --- a/admin/scss/_style.scss +++ b/admin/scss/_style.scss @@ -791,7 +791,32 @@ form.member-profile-form { padding: 0; } } - + + .child-triangle { + width:0; + height:0; + border-right:3px dashed $color-text-dark; + border-top:3px solid transparent; + border-left:3px solid transparent; + border-bottom:3px dashed $color-text-dark; + position: absolute; + right: 1px; + margin-top: -8px; + display: none; /* To be shown by javascript, see LeftAndMain.Panel.js */ + } + + .collapsed-flyout { + display: block !important; + left: 41px; + margin-top: -40px; + position: fixed; + width: 191px; + + li a span { + display: block !important; + } + } + } .cms-content .cms-panel.collapsed { From df1de11a63cfbb7aa5663c5b7476cb6e9b80d138 Mon Sep 17 00:00:00 2001 From: Julian Seidenberg Date: Mon, 10 Oct 2011 13:24:27 +1300 Subject: [PATCH 13/15] BUGFIX: renaming "triangle" to "flyout-indicator" and fixing bug when switching between pages in the CMS after collapsing left-hand side menu --- admin/css/screen.css | 4 +-- admin/javascript/LeftAndMain.Panel.js | 51 +++++++++++++++++---------- admin/scss/_style.scss | 4 +-- 3 files changed, 37 insertions(+), 22 deletions(-) diff --git a/admin/css/screen.css b/admin/css/screen.css index 818b340dc..69c008d9c 100644 --- a/admin/css/screen.css +++ b/admin/css/screen.css @@ -453,7 +453,7 @@ form.member-profile-form .formattingHelpText li { font-size: 11px; color: #333; .cms-panel .toggle-expand { width: 40px; } .cms-panel.collapsed .cms-panel-content { display: none; } .cms-panel.collapsed .cms-panel-header { -moz-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -o-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); position: relative; top: 80px; border: none; padding: 0; } -.cms-panel .child-triangle { width: 0; height: 0; border-right: 3px dashed #1f1f1f; border-top: 3px solid transparent; border-left: 3px solid transparent; border-bottom: 3px dashed #1f1f1f; position: absolute; right: 1px; margin-top: -8px; display: none; /* To be shown by javascript, see LeftAndMain.Panel.js */ } +.cms-panel .child-flyout-indicator { width: 0; height: 0; border-right: 3px dashed #1f1f1f; border-top: 3px solid transparent; border-left: 3px solid transparent; border-bottom: 3px dashed #1f1f1f; position: absolute; right: 1px; margin-top: -8px; display: none; /* To be shown by javascript, see LeftAndMain.Panel.js */ } .cms-panel .collapsed-flyout { display: block !important; left: 41px; margin-top: -40px; position: fixed; width: 191px; } .cms-panel .collapsed-flyout li a span { display: block !important; } @@ -482,7 +482,7 @@ form.member-profile-form .formattingHelpText li { font-size: 11px; color: #333; .ui-dialog #PageType li:hover { background-color: #FFFF99 !important; /* lighter highlight on hover */ } .ui-dialog .field label.left { font-size: 14px; font-weight: bold; width: 100%; float: none; color: #5f6160; margin-top: -4px; margin-left: 38px; } .ui-dialog label.numeric-label { font-size: 14px; font-weight: bold; float: left; -moz-border-radius-topleft: 3px; -webkit-border-top-left-radius: 3px; -o-border-top-left-radius: 3px; -ms-border-top-left-radius: 3px; -khtml-border-top-left-radius: 3px; border-top-left-radius: 3px; -moz-border-radius-bottomleft: 3px; -webkit-border-bottom-left-radius: 3px; -o-border-bottom-left-radius: 3px; -ms-border-bottom-left-radius: 3px; -khtml-border-bottom-left-radius: 3px; border-bottom-left-radius: 3px; background-color: #7b8c91; padding: 4px 8px 4px 3px; text-align: right; color: #fff; position: absolute; width: 15px; /* Numeric label icon (supports up to two-digit numbers) */ } -.ui-dialog label.numeric-label .label-triangle { position: absolute; left: 26px; margin-top: -18px; overflow: visible; display: block; width: 0; height: 0; border-top: 11px solid transparent; border-left: 7px dashed #7b8c91; border-bottom: 11px solid transparent; } +.ui-dialog label.numeric-label .label-flyout-indicator { position: absolute; left: 26px; margin-top: -18px; overflow: visible; display: block; width: 0; height: 0; border-top: 11px solid transparent; border-left: 7px dashed #7b8c91; border-bottom: 11px solid transparent; } .ui-dialog #ParentID label.left { padding: 8px 0 8px 0; float: left !important; width: 125px; } .ui-dialog #ParentID .middleColumn { width: 320px; } .ui-dialog .Actions { float: right; margin: 0; } diff --git a/admin/javascript/LeftAndMain.Panel.js b/admin/javascript/LeftAndMain.Panel.js index c9c61f588..6bba60c4e 100644 --- a/admin/javascript/LeftAndMain.Panel.js +++ b/admin/javascript/LeftAndMain.Panel.js @@ -54,25 +54,14 @@ this.expandPanel(); } }, - - togglePanel: function(bool) { - // if((!bool && this.hasClass('collapsed')) || (bool && !this.hasClass('collapsed'))) return; - //apply or unapply the flyout formatting - $('.cms-panel-content ul li.link, .cms-panel-content ul li.opened').each(function(){ - if (bool) { //expand - $(this).children('ul').removeClass('collapsed-flyout').addClass('collapsed'); - } else { //collapse - - $(this).children('ul').addClass('collapsed-flyout').removeClass('collapsed'); - } - }); + toggleFlyoutState: function(bool) { if (bool) { //expand //show the flyout $('.collapsed').find('li').show(); - //hide all the triangle - $('.cms-menu-list').find('.child-triangle').hide(); + //hide all the flyout-indicator + $('.cms-menu-list').find('.child-flyout-indicator').hide(); } else { //collapse //hide the flyout only if it is not the current section $('.collapsed-flyout').find('li').each(function() { @@ -80,12 +69,38 @@ $(this).hide(); }); - //show all the triangles + //show all the flyout-indicators var par = $('.cms-menu-list ul.collapsed-flyout').parent(); - if (par.children('.child-triangle').length == 0) par.append('').fadeIn(); - par.children('.child-triangle').fadeIn(); + if (par.children('.child-flyout-indicator').length == 0) par.append('').fadeIn(); + par.children('.child-flyout-indicator').fadeIn(); } - + }, + + togglePanel: function(bool) { + // if((!bool && this.hasClass('collapsed')) || (bool && !this.hasClass('collapsed'))) return; + + //apply or unapply the flyout formatting + $('.cms-menu-list').children('li').each(function(){ + if (bool) { //expand + $(this).children('ul').each(function() { + $(this).removeClass('collapsed-flyout'); + if ($(this).data('collapse')) { + $(this).removeData('collapse'); + $(this).addClass('collapse'); + } + }); + } else { //collapse + $(this).children('ul').each(function() { + $(this).addClass('collapsed-flyout'); + $(this).hasClass('collapse'); + $(this).removeClass('collapse'); + $(this).data('collapse', true); + }); + } + }); + + this.toggleFlyoutState(bool); + this.toggleClass('collapsed', !bool); var newWidth = bool ? this.getWidthExpanded() : this.getWidthCollapsed(); diff --git a/admin/scss/_style.scss b/admin/scss/_style.scss index 3ff4f8983..9f387d2dc 100644 --- a/admin/scss/_style.scss +++ b/admin/scss/_style.scss @@ -792,7 +792,7 @@ form.member-profile-form { } } - .child-triangle { + .child-flyout-indicator { width:0; height:0; border-right:3px dashed $color-text-dark; @@ -942,7 +942,7 @@ $DialogLabelColor: #7B8C91; width: 15px; /* Numeric label icon (supports up to two-digit numbers) */ - .label-triangle { + .label-flyout-indicator { position: absolute; left: 26px; margin-top: -18px; From f807aa01b2cb73b9a00fb8a202a14776ce9d02e8 Mon Sep 17 00:00:00 2001 From: Julian Seidenberg Date: Mon, 10 Oct 2011 14:00:47 +1300 Subject: [PATCH 14/15] ENHANCEMENT: introducing a flight delay (using the jQuery HoverIntent plug-in) to prevent "sloppy mouse movement" from instantly closing the flyout menu when the mouse leaves the area. Also fixes problem with the menu in IE7. --- admin/code/LeftAndMain.php | 3 + admin/javascript/LeftAndMain.Panel.js | 9 +- .../jquery-hoverIntent/jquery.hoverIntent.js | 106 ++++++++++++++++++ .../jquery.hoverIntent.minified.js | 9 ++ 4 files changed, 121 insertions(+), 6 deletions(-) create mode 100644 admin/thirdparty/jquery-hoverIntent/jquery.hoverIntent.js create mode 100644 admin/thirdparty/jquery-hoverIntent/jquery.hoverIntent.minified.js diff --git a/admin/code/LeftAndMain.php b/admin/code/LeftAndMain.php index d9e99d033..a0e0626cb 100644 --- a/admin/code/LeftAndMain.php +++ b/admin/code/LeftAndMain.php @@ -263,6 +263,9 @@ class LeftAndMain extends Controller { Requirements::javascript(THIRDPARTY_DIR . '/jstree/jquery.jstree.js'); Requirements::css(THIRDPARTY_DIR . '/jstree/themes/apple/style.css'); + + //Plug-in to delay or prevent the accidental firing of the flyout menu in the CMS + Requirements::javascript(SAPPHIRE_ADMIN_DIR . '/thirdparty/jquery-hoverIntent/jquery.hoverIntent.minified.js'); Requirements::javascript(SAPPHIRE_ADMIN_DIR . '/javascript/LeftAndMain.js'); Requirements::javascript(SAPPHIRE_ADMIN_DIR . '/javascript/LeftAndMain.Panel.js'); diff --git a/admin/javascript/LeftAndMain.Panel.js b/admin/javascript/LeftAndMain.Panel.js index 6bba60c4e..06365c9c1 100644 --- a/admin/javascript/LeftAndMain.Panel.js +++ b/admin/javascript/LeftAndMain.Panel.js @@ -139,14 +139,11 @@ fly.children('ul').find('li').hide(); } } - }, - onmouseenter: function(){ - $(this).toggleFlyout(true); - }, - onmouseleave: function(){ - $(this).toggleFlyout(false); } }); + //slight delay to prevent flyout closing from "sloppy mouse movement" + $('.cms-menu-list li').hoverIntent(function(){$(this).toggleFlyout(true);},function(){$(this).toggleFlyout(false);}); + $('.cms-panel *').entwine({ getPanel: function() { diff --git a/admin/thirdparty/jquery-hoverIntent/jquery.hoverIntent.js b/admin/thirdparty/jquery-hoverIntent/jquery.hoverIntent.js new file mode 100644 index 000000000..7bb0e1eff --- /dev/null +++ b/admin/thirdparty/jquery-hoverIntent/jquery.hoverIntent.js @@ -0,0 +1,106 @@ +/** +* hoverIntent is similar to jQuery's built-in "hover" function except that +* instead of firing the onMouseOver event immediately, hoverIntent checks +* to see if the user's mouse has slowed down (beneath the sensitivity +* threshold) before firing the onMouseOver event. +* +* hoverIntent r6 // 2011.02.26 // jQuery 1.5.1+ +* +* +* hoverIntent is currently available for use in all personal or commercial +* projects under both MIT and GPL licenses. This means that you can choose +* the license that best suits your project, and use it accordingly. +* +* // basic usage (just like .hover) receives onMouseOver and onMouseOut functions +* $("ul li").hoverIntent( showNav , hideNav ); +* +* // advanced usage receives configuration object only +* $("ul li").hoverIntent({ +* sensitivity: 7, // number = sensitivity threshold (must be 1 or higher) +* interval: 100, // number = milliseconds of polling interval +* over: showNav, // function = onMouseOver callback (required) +* timeout: 350, // number = milliseconds delay before onMouseOut function call +* out: hideNav // function = onMouseOut callback (required) +* }); +* +* @param f onMouseOver function || An object with configuration options +* @param g onMouseOut function || Nothing (use configuration options object) +* @author Brian Cherne brian(at)cherne(dot)net +*/ +(function($) { + $.fn.hoverIntent = function(f,g) { + // default configuration options + var cfg = { + sensitivity: 7, + interval: 100, + timeout: 350 + }; + // override configuration options with user supplied object + cfg = $.extend(cfg, g ? { over: f, out: g } : f ); + + // instantiate variables + // cX, cY = current X and Y position of mouse, updated by mousemove event + // pX, pY = previous X and Y position of mouse, set by mouseover and polling interval + var cX, cY, pX, pY; + + // A private function for getting mouse position + var track = function(ev) { + cX = ev.pageX; + cY = ev.pageY; + }; + + // A private function for comparing current and previous mouse position + var compare = function(ev,ob) { + ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t); + // compare mouse positions to see if they've crossed the threshold + if ( ( Math.abs(pX-cX) + Math.abs(pY-cY) ) < cfg.sensitivity ) { + $(ob).unbind("mousemove",track); + // set hoverIntent state to true (so mouseOut can be called) + ob.hoverIntent_s = 1; + return cfg.over.apply(ob,[ev]); + } else { + // set previous coordinates for next time + pX = cX; pY = cY; + // use self-calling timeout, guarantees intervals are spaced out properly (avoids JavaScript timer bugs) + ob.hoverIntent_t = setTimeout( function(){compare(ev, ob);} , cfg.interval ); + } + }; + + // A private function for delaying the mouseOut function + var delay = function(ev,ob) { + ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t); + ob.hoverIntent_s = 0; + return cfg.out.apply(ob,[ev]); + }; + + // A private function for handling mouse 'hovering' + var handleHover = function(e) { + // copy objects to be passed into t (required for event object to be passed in IE) + var ev = jQuery.extend({},e); + var ob = this; + + // cancel hoverIntent timer if it exists + if (ob.hoverIntent_t) { ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t); } + + // if e.type == "mouseenter" + if (e.type == "mouseenter") { + // set "previous" X and Y position based on initial entry point + pX = ev.pageX; pY = ev.pageY; + // update "current" X and Y position based on mousemove + $(ob).bind("mousemove",track); + // start polling interval (self-calling timeout) to compare mouse coordinates over time + if (ob.hoverIntent_s != 1) { ob.hoverIntent_t = setTimeout( function(){compare(ev,ob);} , cfg.interval );} + + // else e.type == "mouseleave" + } else { + // unbind expensive mousemove event + $(ob).unbind("mousemove",track); + // if hoverIntent state is true, then call the mouseOut function after the specified delay + if (ob.hoverIntent_s == 1) { ob.hoverIntent_t = setTimeout( function(){delay(ev,ob);} , cfg.timeout );} + } + }; + + // bind the function to the two event listeners + return this.bind('mouseenter',handleHover).bind('mouseleave',handleHover); + }; +})(jQuery); \ No newline at end of file diff --git a/admin/thirdparty/jquery-hoverIntent/jquery.hoverIntent.minified.js b/admin/thirdparty/jquery-hoverIntent/jquery.hoverIntent.minified.js new file mode 100644 index 000000000..f25471dea --- /dev/null +++ b/admin/thirdparty/jquery-hoverIntent/jquery.hoverIntent.minified.js @@ -0,0 +1,9 @@ +/** +* hoverIntent r6 // 2011.02.26 // jQuery 1.5.1+ +* +* +* @param f onMouseOver function || An object with configuration options +* @param g onMouseOut function || Nothing (use configuration options object) +* @author Brian Cherne brian(at)cherne(dot)net +*/ +(function($){$.fn.hoverIntent=function(f,g){var cfg={sensitivity:7,interval:100,timeout:350};cfg=$.extend(cfg,g?{over:f,out:g}:f);var cX,cY,pX,pY;var track=function(ev){cX=ev.pageX;cY=ev.pageY};var compare=function(ev,ob){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);if((Math.abs(pX-cX)+Math.abs(pY-cY)) Date: Tue, 11 Oct 2011 12:12:46 +1300 Subject: [PATCH 15/15] ENHANCEMENT: adding hoverIntent plug-in to the js combined_files (SSO-7) --- admin/code/LeftAndMain.php | 1 + 1 file changed, 1 insertion(+) diff --git a/admin/code/LeftAndMain.php b/admin/code/LeftAndMain.php index a0e0626cb..ac38e2c44 100644 --- a/admin/code/LeftAndMain.php +++ b/admin/code/LeftAndMain.php @@ -331,6 +331,7 @@ class LeftAndMain extends Controller { Requirements::combine_files( 'leftandmain.js', array( + SAPPHIRE_ADMIN_DIR . '/thirdparty/jquery-hoverIntent/jquery.hoverIntent.minified.js', SAPPHIRE_ADMIN_DIR . '/javascript/LeftAndMain.js', SAPPHIRE_ADMIN_DIR . '/javascript/LeftAndMain.Panel.js', SAPPHIRE_ADMIN_DIR . '/javascript/LeftAndMain.Tree.js',