From 235e8c8138e5f5af184ce45061820879956d2297 Mon Sep 17 00:00:00 2001 From: Naomi Guyer Date: Thu, 29 Nov 2012 16:26:50 +1300 Subject: [PATCH] CSS fixes for the ActionTabSet. Thanks for contributing @clarkepaul! --- admin/css/ie7.css | 78 ++++++++++++++++++++ admin/css/screen.css | 115 ++++++++++++++++------------- admin/scss/_actionTabs.scss | 141 ++++++------------------------------ admin/scss/_mixins.scss | 92 ++++++++++++++++++++++- admin/scss/ie7.scss | 22 +++++- javascript/TabSet.js | 40 +++++++--- 6 files changed, 307 insertions(+), 181 deletions(-) diff --git a/admin/css/ie7.css b/admin/css/ie7.css index 20d35cd50..f82b5b2a3 100644 --- a/admin/css/ie7.css +++ b/admin/css/ie7.css @@ -52,6 +52,79 @@ fieldset.switch-states .switch .slide-button { display: none; } /* Hide size controls in IE - they won't work as intended */ .cms-content-controls .preview-size-selector { display: none; } +/** Helper SCSS file for generating sprites for the interface. */ +.btn-icon-sprite, .ui-state-default .btn-icon-accept, .ui-widget-content .btn-icon-accept, .ui-state-default .btn-icon-accept_disabled, .ui-widget-content .btn-icon-accept_disabled, .ui-state-default .btn-icon-add, .ui-widget-content .btn-icon-add, .ui-state-default .btn-icon-addMedia, .ui-widget-content .btn-icon-addMedia, .ui-state-default .btn-icon-add_disabled, .ui-widget-content .btn-icon-add_disabled, .ui-state-default .btn-icon-addpage, .ui-widget-content .btn-icon-addpage, .ui-state-default .btn-icon-addpage_disabled, .ui-widget-content .btn-icon-addpage_disabled, .ui-state-default .btn-icon-arrow-circle-135-left, .ui-widget-content .btn-icon-arrow-circle-135-left, .ui-state-default .btn-icon-arrow-circle-double, .ui-widget-content .btn-icon-arrow-circle-double, .ui-state-default .btn-icon-back, .ui-widget-content .btn-icon-back, .ui-state-default .btn-icon-back_disabled, .ui-widget-content .btn-icon-back_disabled, .ui-state-default .btn-icon-chain--arrow, .ui-widget-content .btn-icon-chain--arrow, .ui-state-default .btn-icon-chain--exclamation, .ui-widget-content .btn-icon-chain--exclamation, .ui-state-default .btn-icon-chain--minus, .ui-widget-content .btn-icon-chain--minus, .ui-state-default .btn-icon-chain--pencil, .ui-widget-content .btn-icon-chain--pencil, .ui-state-default .btn-icon-chain--plus, .ui-widget-content .btn-icon-chain--plus, .ui-state-default .btn-icon-chain-small, .ui-widget-content .btn-icon-chain-small, .ui-state-default .btn-icon-chain-unchain, .ui-widget-content .btn-icon-chain-unchain, .ui-state-default .btn-icon-chain, .ui-widget-content .btn-icon-chain, .ui-state-default .btn-icon-cross-circle, .ui-widget-content .btn-icon-cross-circle, .ui-state-default .btn-icon-cross-circle_disabled, .ui-widget-content .btn-icon-cross-circle_disabled, .ui-state-default .btn-icon-cross, .ui-widget-content .btn-icon-cross, .ui-state-default .btn-icon-decline, .ui-widget-content .btn-icon-decline, .ui-state-default .btn-icon-decline_disabled, .ui-widget-content .btn-icon-decline_disabled, .ui-state-default .btn-icon-delete, .ui-widget-content .btn-icon-delete, .ui-state-default .btn-icon-deleteLight, .ui-widget-content .btn-icon-deleteLight, .ui-state-default .btn-icon-disk, .ui-widget-content .btn-icon-disk, .ui-state-default .btn-icon-document--pencil, .ui-widget-content .btn-icon-document--pencil, .ui-state-default .btn-icon-download-csv, .ui-widget-content .btn-icon-download-csv, .ui-state-default .btn-icon-drive-upload, .ui-widget-content .btn-icon-drive-upload, .ui-state-default .btn-icon-drive-upload_disabled, .ui-widget-content .btn-icon-drive-upload_disabled, .ui-state-default .btn-icon-grid_print, .ui-widget-content .btn-icon-grid_print, .ui-state-default .btn-icon-magnifier, .ui-widget-content .btn-icon-magnifier, .ui-state-default .btn-icon-minus-circle, .ui-widget-content .btn-icon-minus-circle, .ui-state-default .btn-icon-minus-circle_disabled, .ui-widget-content .btn-icon-minus-circle_disabled, .ui-state-default .btn-icon-navigation, .ui-widget-content .btn-icon-navigation, .ui-state-default .btn-icon-navigation_disabled, .ui-widget-content .btn-icon-navigation_disabled, .ui-state-default .btn-icon-network-cloud, .ui-widget-content .btn-icon-network-cloud, .ui-state-default .btn-icon-network-cloud_disabled, .ui-widget-content .btn-icon-network-cloud_disabled, .ui-state-default .btn-icon-pencil, .ui-widget-content .btn-icon-pencil, .ui-state-default .btn-icon-pencil_disabled, .ui-widget-content .btn-icon-pencil_disabled, .ui-state-default .btn-icon-plug-disconnect-prohibition, .ui-widget-content .btn-icon-plug-disconnect-prohibition, .ui-state-default .btn-icon-plug-disconnect-prohibition_disabled, .ui-widget-content .btn-icon-plug-disconnect-prohibition_disabled, .ui-state-default .btn-icon-preview, .ui-widget-content .btn-icon-preview, .ui-state-default .btn-icon-preview_disabled, .ui-widget-content .btn-icon-preview_disabled, .ui-state-default .btn-icon-settings, .ui-widget-content .btn-icon-settings, .ui-state-default .btn-icon-settings_disabled, .ui-widget-content .btn-icon-settings_disabled, .ui-state-default .btn-icon-unpublish, .ui-widget-content .btn-icon-unpublish, .ui-state-default .btn-icon-unpublish_disabled, .ui-widget-content .btn-icon-unpublish_disabled { background: url('../images/btn-icon-s5a3074ba2a.png') no-repeat; } + +.ui-state-default .btn-icon-accept, .ui-widget-content .btn-icon-accept { background-position: 0 -96px; } +.ui-state-default .btn-icon-accept_disabled, .ui-widget-content .btn-icon-accept_disabled { background-position: 0 -80px; } +.ui-state-default .btn-icon-add, .ui-widget-content .btn-icon-add { background-position: 0 0; } +.ui-state-default .btn-icon-addMedia, .ui-widget-content .btn-icon-addMedia { background-position: 0 -208px; } +.ui-state-default .btn-icon-add_disabled, .ui-widget-content .btn-icon-add_disabled { background-position: 0 -32px; } +.ui-state-default .btn-icon-addpage, .ui-widget-content .btn-icon-addpage { background-position: 0 -144px; } +.ui-state-default .btn-icon-addpage_disabled, .ui-widget-content .btn-icon-addpage_disabled { background-position: 0 -500px; } +.ui-state-default .btn-icon-arrow-circle-135-left, .ui-widget-content .btn-icon-arrow-circle-135-left { background-position: 0 -356px; } +.ui-state-default .btn-icon-arrow-circle-double, .ui-widget-content .btn-icon-arrow-circle-double { background-position: 0 -340px; } +.ui-state-default .btn-icon-back, .ui-widget-content .btn-icon-back { background-position: 0 -372px; } +.ui-state-default .btn-icon-back_disabled, .ui-widget-content .btn-icon-back_disabled { background-position: 0 -16px; } +.ui-state-default .btn-icon-chain--arrow, .ui-widget-content .btn-icon-chain--arrow { background-position: 0 -724px; } +.ui-state-default .btn-icon-chain--exclamation, .ui-widget-content .btn-icon-chain--exclamation { background-position: 0 -516px; } +.ui-state-default .btn-icon-chain--minus, .ui-widget-content .btn-icon-chain--minus { background-position: 0 -740px; } +.ui-state-default .btn-icon-chain--pencil, .ui-widget-content .btn-icon-chain--pencil { background-position: 0 -676px; } +.ui-state-default .btn-icon-chain--plus, .ui-widget-content .btn-icon-chain--plus { background-position: 0 -708px; } +.ui-state-default .btn-icon-chain-small, .ui-widget-content .btn-icon-chain-small { background-position: 0 -772px; } +.ui-state-default .btn-icon-chain-unchain, .ui-widget-content .btn-icon-chain-unchain { background-position: 0 -484px; } +.ui-state-default .btn-icon-chain, .ui-widget-content .btn-icon-chain { background-position: 0 -756px; } +.ui-state-default .btn-icon-cross-circle, .ui-widget-content .btn-icon-cross-circle { background-position: 0 -452px; } +.ui-state-default .btn-icon-cross-circle_disabled, .ui-widget-content .btn-icon-cross-circle_disabled { background-position: 0 -564px; } +.ui-state-default .btn-icon-cross, .ui-widget-content .btn-icon-cross { background-position: 0 -276px; } +.ui-state-default .btn-icon-decline, .ui-widget-content .btn-icon-decline { background-position: 0 -128px; } +.ui-state-default .btn-icon-decline_disabled, .ui-widget-content .btn-icon-decline_disabled { background-position: 0 -192px; } +.ui-state-default .btn-icon-delete, .ui-widget-content .btn-icon-delete { background-position: 0 -468px; } +.ui-state-default .btn-icon-deleteLight, .ui-widget-content .btn-icon-deleteLight { background-position: 0 -307px; } +.ui-state-default .btn-icon-disk, .ui-widget-content .btn-icon-disk { background-position: 0 -291px; } +.ui-state-default .btn-icon-document--pencil, .ui-widget-content .btn-icon-document--pencil { background-position: 0 -548px; } +.ui-state-default .btn-icon-download-csv, .ui-widget-content .btn-icon-download-csv { background-position: 0 -48px; } +.ui-state-default .btn-icon-drive-upload, .ui-widget-content .btn-icon-drive-upload { background-position: 0 -420px; } +.ui-state-default .btn-icon-drive-upload_disabled, .ui-widget-content .btn-icon-drive-upload_disabled { background-position: 0 -580px; } +.ui-state-default .btn-icon-grid_print, .ui-widget-content .btn-icon-grid_print { background-position: 0 -260px; } +.ui-state-default .btn-icon-magnifier, .ui-widget-content .btn-icon-magnifier { background-position: 0 -532px; } +.ui-state-default .btn-icon-minus-circle, .ui-widget-content .btn-icon-minus-circle { background-position: 0 -628px; } +.ui-state-default .btn-icon-minus-circle_disabled, .ui-widget-content .btn-icon-minus-circle_disabled { background-position: 0 -644px; } +.ui-state-default .btn-icon-navigation, .ui-widget-content .btn-icon-navigation { background-position: 0 -388px; } +.ui-state-default .btn-icon-navigation_disabled, .ui-widget-content .btn-icon-navigation_disabled { background-position: 0 -436px; } +.ui-state-default .btn-icon-network-cloud, .ui-widget-content .btn-icon-network-cloud { background-position: 0 -612px; } +.ui-state-default .btn-icon-network-cloud_disabled, .ui-widget-content .btn-icon-network-cloud_disabled { background-position: 0 -692px; } +.ui-state-default .btn-icon-pencil, .ui-widget-content .btn-icon-pencil { background-position: 0 -228px; } +.ui-state-default .btn-icon-pencil_disabled, .ui-widget-content .btn-icon-pencil_disabled { background-position: 0 -596px; } +.ui-state-default .btn-icon-plug-disconnect-prohibition, .ui-widget-content .btn-icon-plug-disconnect-prohibition { background-position: 0 -244px; } +.ui-state-default .btn-icon-plug-disconnect-prohibition_disabled, .ui-widget-content .btn-icon-plug-disconnect-prohibition_disabled { background-position: 0 -660px; } +.ui-state-default .btn-icon-preview, .ui-widget-content .btn-icon-preview { background-position: 0 -64px; } +.ui-state-default .btn-icon-preview_disabled, .ui-widget-content .btn-icon-preview_disabled { background-position: 0 -160px; } +.ui-state-default .btn-icon-settings, .ui-widget-content .btn-icon-settings { background-position: 0 -324px; } +.ui-state-default .btn-icon-settings_disabled, .ui-widget-content .btn-icon-settings_disabled { background-position: 0 -404px; } +.ui-state-default .btn-icon-unpublish, .ui-widget-content .btn-icon-unpublish { background-position: 0 -112px; } +.ui-state-default .btn-icon-unpublish_disabled, .ui-widget-content .btn-icon-unpublish_disabled { background-position: 0 -176px; } + +.icon { text-indent: -9999px; border: none; outline: none; } +.icon.icon-24 { width: 24px; height: 24px; background: url('../images/menu-icons/24x24-sedfac01ed1.png'); } +.icon.icon-24.icon-assetadmin { background-position: 0 -120px; } +.icon.icon-24.icon-cmsmain { background-position: 0 -48px; } +.icon.icon-24.icon-cmspagescontroller { background-position: 0 -192px; } +.icon.icon-24.icon-cmssettingscontroller { background-position: 0 0; } +.icon.icon-24.icon-securityadmin { background-position: 0 -24px; } +.icon.icon-24.icon-reportadmin { background-position: 0 -72px; } +.icon.icon-24.icon-commentadmin { background-position: 0 -168px; } +.icon.icon-24.icon-help { background-position: 0 -96px; } +.icon.icon-16 { width: 16px; height: 16px; background: url('../images/menu-icons/16x16-sb173d358c2.png'); } +.icon.icon-16.icon-assetadmin { background-position: 0 -80px; } +.icon.icon-16.icon-cmsmain { background-position: 0 -16px; } +.icon.icon-16.icon-cmspagescontroller { background-position: 0 -112px; } +.icon.icon-16.icon-cmssettingscontroller { background-position: 0 0; } +.icon.icon-16.icon-securityadmin { background-position: 0 -48px; } +.icon.icon-16.icon-reportadmin { background-position: 0 -32px; } +.icon.icon-16.icon-commentadmin { background-position: 0 -128px; } +.icon.icon-16.icon-help { background-position: 0 -64px; } + html { overflow: hidden; } .field input.text, .field textarea, .field .TreeDropdownField { width: 94%; } @@ -116,5 +189,10 @@ table.ss-gridfield-table tr.ss-gridfield-item.even { background: #F0F4F7; } .cms .Actions > .cms-preview-toggle-link { display: block; } +.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset a.ui-tabs-anchor { background: url('../images/sprites-32x32-sf6890c994e.png') 0 -1189px no-repeat; padding-left: 20px; } +.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset a.ui-tabs-anchor:hover { background: url('../images/sprites-32x32-sf6890c994e.png') 0 -1163px no-repeat; } +.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-state-active a.ui-tabs-anchor { background: url('../images/sprites-32x32-sf6890c994e.png') 0 -1215px no-repeat; } +.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-state-active a.ui-tabs-anchor:hover { background: url('../images/sprites-32x32-sf6890c994e.png') 0 -1137px no-repeat; } + .cms-panel-content-collapsed { position: relative; width: 40px; } .cms-panel-content-collapsed h2.cms-panel-header, .cms-panel-content-collapsed h3.cms-panel-header { zoom: 1; position: absolute; top: 10px; right: 10px; writing-mode: tb-rl; float: right; z-index: 5000; } diff --git a/admin/css/screen.css b/admin/css/screen.css index bcb41826a..4fdc710d0 100644 --- a/admin/css/screen.css +++ b/admin/css/screen.css @@ -196,10 +196,10 @@ form.small .field input.text, form.small .field textarea, form.small .field sele .field.remove-splitter { border-bottom: none; box-shadow: none; } /** ---------------------------------------------------- Buttons ---------------------------------------------------- */ -.cms .button-no-style button, .cms .south .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel button { background: none; border: none; display: block; margin: 0; outline: none; color: #0073c1; font-weight: normal; width: 210px; /* same as width of surrounding panel */ text-align: left; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; text-shadow: none; margin-left: -10px; } -.cms .button-no-style button.ss-ui-action-destructive, .cms .south .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel button.ss-ui-action-destructive { color: #c22730; } -.cms .button-no-style button span, .cms .south .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel button span { padding-left: 0; padding-right: 0; } -.cms .button-no-style button:hover, .cms .south .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel button:hover, .cms .button-no-style button:focus, .cms .south .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel button:focus, .cms .button-no-style button:active, .cms .south .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel button:active { outline: none; background: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border: none; } +.cms .button-no-style button, .cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel button { background: none; border: none; display: block; margin: 0; outline: none; color: #0073c1; font-weight: normal; width: 210px; /* same as width of surrounding panel */ text-align: left; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; text-shadow: none; margin-left: -10px; } +.cms .button-no-style button.ss-ui-action-destructive, .cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel button.ss-ui-action-destructive { color: #c22730; } +.cms .button-no-style button span, .cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel button span { padding-left: 0; padding-right: 0; } +.cms .button-no-style button:hover, .cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel button:hover, .cms .button-no-style button:focus, .cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel button:focus, .cms .button-no-style button:active, .cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel button:active { outline: none; background: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border: none; } .cms .Actions > *, .cms .cms-actions-row > * { display: block; float: left; margin-right: 8px; } .cms .Actions > *:last-child, .cms .cms-actions-row > *:last-child { margin-right: 0; } .cms .Actions { min-height: 30px; overflow: auto; padding: 8px 12px; } @@ -946,12 +946,12 @@ use case of tabs, so the default tab styling should not apply **********************************************/ .cms { /********************** -Styles for pop-up tabs in bottom panel +Styles for edit page action menus ************************/ /* Styles for the cms-actions in tree view, to use more limited space. Title hidden in tree view, until hover/active state added. Active is applied to the first tab within the template, so there should always be one title visible. Added and removed with js in TabSet.js */ } -.cms .ss-ui-action-tabset { position: relative; float: left; /*Style the "tabs" navigation for multiple tabs*/ /* Style the tab panels */ } +.cms .ss-ui-action-tabset { position: relative; float: left; /*Style the "tabs" navigation for action tabs (as in the sitetree batch actions)*/ /* Style the tab panels */ } .cms .ss-ui-action-tabset ul.ui-tabs-nav { overflow: hidden; *zoom: 1; padding: 0; overflow: visible; float: left; height: 28px; border: 1px solid #b3b3b3; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; } .cms .ss-ui-action-tabset ul.ui-tabs-nav:focus, .cms .ss-ui-action-tabset ul.ui-tabs-nav:active { outline: none; box-shadow: none; -webkit-box-shadow: none; } .cms .ss-ui-action-tabset ul.ui-tabs-nav li { width: 110px; overflow: visible; background: #eaeaea; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y4ZjhmOCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Q5ZDlkOSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f8f8f8), color-stop(100%, #d9d9d9)); background-image: -webkit-linear-gradient(top, #f8f8f8, #d9d9d9); background-image: -moz-linear-gradient(top, #f8f8f8, #d9d9d9); background-image: -o-linear-gradient(top, #f8f8f8, #d9d9d9); background-image: linear-gradient(top, #f8f8f8, #d9d9d9); border-radius: none; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; border: none; border-right: 1px solid #eee; border-left: 1px solid #b3b3b3; margin: 0; } @@ -969,32 +969,32 @@ visible. Added and removed with js in TabSet.js */ } .cms .ss-ui-action-tabset.tabset-open-last ul.ui-tabs-nav li.last { -moz-border-radius-bottomright: 0; -webkit-border-bottom-right-radius: 0; border-bottom-right-radius: 0; } .cms .ss-ui-action-tabset .batch-check, .cms .ss-ui-action-tabset .ui-icon { /* position a checkbox & icon within a tab */ display: inline-block; float: left; margin-left: -2px; padding-right: 6px; } .cms .ss-ui-action-tabset .batch-check { margin: 6px 0px 5px 9px; position: absolute; } -.cms .ss-ui-action-tabset.single ul.ui-tabs-nav { background: none; border: none; display: inline; padding: 0; float: left; } -.cms .ss-ui-action-tabset.single ul.ui-tabs-nav li { display: inline; background: none; border: none; padding: 0; border-bottom: none !important; } -.cms .ss-ui-action-tabset.single ul.ui-tabs-nav li:hover, .cms .ss-ui-action-tabset.single ul.ui-tabs-nav li:focus, .cms .ss-ui-action-tabset.single ul.ui-tabs-nav li:active { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; outline: none; } -.cms .ss-ui-action-tabset.single ul.ui-tabs-nav li a { color: #0073c1; text-shadow: white 0 1px 1px; padding: 0 0 0 10px; line-height: 24px; } -.cms .ss-ui-action-tabset.single ul.ui-tabs-nav li a:hover, .cms .ss-ui-action-tabset.single ul.ui-tabs-nav li a:focus, .cms .ss-ui-action-tabset.single ul.ui-tabs-nav li a:active { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; outline: none; } -.cms .ss-ui-action-tabset.single ul.ui-tabs-nav li a:hover { text-shadow: white 0 10px 10px; color: #005b98; } -.cms .ss-ui-action-tabset.single ul.ui-tabs-nav li a:hover:after { border-bottom: 4px solid #005b98; } -.cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel { display: block; clear: both; background: #f8f8f8 !important; position: absolute; top: 30px; border: 1px solid #b3b3b3; border-top: none; width: 202px; z-index: 1; padding: 10px; padding-top: 15px; margin: 0; float: left; } +.cms .ss-ui-action-tabset.action-menus ul.ui-tabs-nav { background: none; border: none; display: inline; padding: 0; float: left; } +.cms .ss-ui-action-tabset.action-menus ul.ui-tabs-nav li { display: inline; background: none; border: none; padding: 0; border-bottom: none !important; } +.cms .ss-ui-action-tabset.action-menus ul.ui-tabs-nav li:hover, .cms .ss-ui-action-tabset.action-menus ul.ui-tabs-nav li:focus, .cms .ss-ui-action-tabset.action-menus ul.ui-tabs-nav li:active { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; outline: none; } +.cms .ss-ui-action-tabset.action-menus ul.ui-tabs-nav li a { color: #0073c1; text-shadow: white 0 1px 1px; padding: 0 0 0 10px; line-height: 24px; } +.cms .ss-ui-action-tabset.action-menus ul.ui-tabs-nav li a:hover, .cms .ss-ui-action-tabset.action-menus ul.ui-tabs-nav li a:focus, .cms .ss-ui-action-tabset.action-menus ul.ui-tabs-nav li a:active { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; outline: none; } +.cms .ss-ui-action-tabset.action-menus ul.ui-tabs-nav li a:hover { text-shadow: white 0 10px 10px; color: #005b98; } +.cms .ss-ui-action-tabset.action-menus ul.ui-tabs-nav li a:hover:after { border-bottom: 4px solid #005b98; } +.cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel { /* Restyle for smaller area*/ background: #f8f8f8 !important; border: 1px solid #b3b3b3; border-top: none; clear: both; display: block; float: left; margin: 0; padding: 10px; padding-top: 15px; position: absolute; top: 30px; width: 202px; z-index: 1; } .cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel h3, .cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel h4, .cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel h5 { font-weight: bold; line-height: 16px; } .cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel h3 { font-size: 13px; } .cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel h4 { font-size: 12px; margin: 5px 0; } .cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .ui-widget-content { background: none; } -.cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .field { /* Fields are more compressed in the sidebar compared to the main content editing window so the below alters the internal spacing of the fields so we can move that spacing to between the form fields rather than padding */ } -.cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .field label { float: none; width: auto; font-size: 11px; padding: 0 8px 4px 0; } +.cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .field { /* Fields are more compressed in some areas compared to the main content editing window so the below alters the internal spacing of the fields so we can move that spacing to between the form fields rather than padding */ border-bottom: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } +.cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .field label { float: none; width: auto; font-size: 12px; padding: 0 8px 4px 0; } +.cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .field label.extra-details { overflow: hidden; margin-top: 10px; display: block; color: #9d9d9d; font-style: italic; font-weight: normal; font-size: 1em; float: left; text-shadow: none; } +.cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .field label.extra-details.fill:before { color: #fff; content: '?'; font-size: 12px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-left: 3px; padding-right: 3px; display: block; float: left; text-shadow: none; -webkit-border-radius: 50px; -moz-border-radius: 50px; -ms-border-radius: 50px; -o-border-radius: 50px; border-radius: 50px; background-color: #b7b7b7; width: 15px; height: 15px; margin-right: 5px; margin-bottom: 5px; } .cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .field .middleColumn { margin: 0; } .cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .field input.text, .cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .field select, .cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .field textarea { padding: 5px; font-size: 11px; } .cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .field.checkbox { padding: 0 8px 0; } .cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .field.checkbox input { margin: 2px 0; } .cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .fieldgroup .fieldgroup-field { padding: 0; } .cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .fieldgroup .fieldgroup-field .field { margin: 0; padding: 0; } -.cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .field label { font-size: 12px; } .cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .cms-content-fields { overflow: visible; } .cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .chzn-container-single { width: 100% !important; } .cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .chzn-container-single .chzn-single { padding: 0 0 0 5px; float: none; } .cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .cms-content-actions, .cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .cms-preview-controls { padding: 0; height: auto; border: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } -.cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .field { border-bottom: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .cms-edit-form { width: 100%; } .cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .CompositeField { margin: 0; padding: 0; float: none; } .cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .parent-mode { padding-top: 0; } @@ -1003,45 +1003,58 @@ visible. Added and removed with js in TabSet.js */ } .cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .treedropdown .treedropdownfield-panel, .cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .SelectionGroup li.selected div.field .treedropdownfield-panel { margin-top: 11px; } .cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .treedropdown .treedropdownfield-toggle-panel-link, .cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .SelectionGroup li.selected div.field .treedropdownfield-toggle-panel-link { background: none; border-left: none; padding: 5px 3px; } .cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .treedropdown .treedropdownfield-toggle-panel-link .ui-icon, .cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .SelectionGroup li.selected div.field .treedropdownfield-toggle-panel-link .ui-icon { float: right; opacity: 0.7; } -.cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel #PageType ul { padding: 0; } -.cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel #PageType ul li { padding: 4px 5px; } .cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .cms-add-form ul.SelectionGroup { padding-left: 0; padding-right: 0; overflow: visible; border-bottom: none; } -.cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel label.extra-details { overflow: hidden; margin-top: 10px; display: block; color: #9d9d9d; font-style: italic; font-weight: normal; font-size: 1em; float: left; text-shadow: none; } -.cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel label.extra-details.fill:before { color: #fff; content: '?'; font-size: 12px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-left: 3px; padding-right: 3px; display: block; float: left; text-shadow: none; -webkit-border-radius: 50px; -moz-border-radius: 50px; -ms-border-radius: 50px; -o-border-radius: 50px; border-radius: 50px; background-color: #b7b7b7; width: 15px; height: 15px; margin-right: 5px; margin-bottom: 5px; } .cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel.first { left: 0; width: 203px; } .cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .ui-icon { padding-right: 0; } .cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .tab-nav-link, .cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .ss-ui-button { font-size: 12px; } +.cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel #PageType ul { padding: 0; } +.cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel #PageType ul li { padding: 4px 5px; } .cms .ss-ui-action-tabset .last .ss-ui-action-tab { right: -1px; left: auto; } -.cms .south .Actions { overflow: visible; } -.cms .south .Actions .rise-up.ss-ui-action-tabset ul.ui-tabs-nav { margin: 0; } -.cms .south .Actions .rise-up.ss-ui-action-tabset ul.ui-tabs-nav li a.ui-tabs-anchor { font-weight: normal; font-size: 13px; line-height: 24px; padding-right: 25px; } -.cms .south .Actions .rise-up.ss-ui-action-tabset ul.ui-tabs-nav li a.ui-tabs-anchor:after { background: url('../images/sprites-32x32-sf6890c994e.png') 0 -1189px no-repeat; width: 16px; height: 16px; content: ""; display: inline-block; margin-left: 6px; border-bottom: 0; } -.cms .south .Actions .rise-up.ss-ui-action-tabset ul.ui-tabs-nav li a.ui-tabs-anchor:hover:after { border-bottom: 0; background: url('../images/sprites-32x32-sf6890c994e.png') 0 -1163px no-repeat; } -.cms .south .Actions .rise-up.ss-ui-action-tabset ul.ui-tabs-nav li.ui-state-active a.ui-tabs-anchor:after { background: url('../images/sprites-32x32-sf6890c994e.png') 0 -1215px no-repeat; } -.cms .south .Actions .rise-up.ss-ui-action-tabset ul.ui-tabs-nav li.ui-state-active a.ui-tabs-anchor:hover:after { background: url('../images/sprites-32x32-sf6890c994e.png') 0 -1137px no-repeat; } -.cms .south .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel { overflow: hidden; *zoom: 1; -moz-border-radius-topleft: 3px; -webkit-border-top-left-radius: 3px; border-top-left-radius: 3px; -moz-border-radius-topright: 3px; -webkit-border-top-right-radius: 3px; border-top-right-radius: 3px; -moz-border-radius-bottomleft: 0; -webkit-border-bottom-left-radius: 0; border-bottom-left-radius: 0; -moz-border-radius-bottomright: 0; -webkit-border-bottom-right-radius: 0; border-bottom-right-radius: 0; background-color: #eceff1; border: 1px solid #ccc; border-bottom: 1px solid #eceff1; clear: both; display: block; position: absolute; top: -204px; width: 190px; /* same width as buttons within panel */ z-index: 1; padding: 10px; margin: 0; margin-top: 1px; } -.cms .south .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel h3, .cms .south .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel h4, .cms .south .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel h5 { font-weight: bold; line-height: 16px; } -.cms .south .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel h3 { font-size: 13px; } -.cms .south .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel h4 { font-size: 12px; margin: 5px 0; } -.cms .south .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .ui-widget-content { background: none; } -.cms .south .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .field { /* Fields are more compressed in the sidebar compared to the main content editing window so the below alters the internal spacing of the fields so we can move that spacing to between the form fields rather than padding */ } -.cms .south .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .field label { float: none; width: auto; font-size: 11px; padding: 0 8px 4px 0; } -.cms .south .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .field .middleColumn { margin: 0; } -.cms .south .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .field input.text, .cms .south .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .field select, .cms .south .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .field textarea { padding: 5px; font-size: 11px; } -.cms .south .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .field.checkbox { padding: 0 8px 0; } -.cms .south .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .field.checkbox input { margin: 2px 0; } -.cms .south .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .fieldgroup .fieldgroup-field { padding: 0; } -.cms .south .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .fieldgroup .fieldgroup-field .field { margin: 0; padding: 0; } -.cms .south .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .chzn-container-single .chzn-single { padding: 0 0 0 5px; float: none; } -.cms .south .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel button.ss-ui-button:hover, .cms .south .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel button.ss-ui-button:focus, .cms .south .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel button.ss-ui-button:active { /*text-decoration:underline;*/ background-color: #e0e5e8; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; outline: none; } -.cms .south .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .cms-sitetree-information { border-bottom: 1px solid #d0d3d5; margin-bottom: 8px; } -.cms .south .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .cms-sitetree-information p.meta-info { color: #999; font-size: 11px; line-height: 16px; margin-bottom: 8px; } -.cms .south .Actions .rise-up.ss-ui-action-tabset .last .ui-tabs-panel.ss-ui-action-tab { right: -1px; left: auto; } +.cms .cms-content-actions .Actions { overflow: visible; } +.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset ul.ui-tabs-nav { margin: 0; } +.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset ul.ui-tabs-nav li a.ui-tabs-anchor { font-weight: normal; font-size: 13px; line-height: 24px; padding-right: 25px; } +.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset ul.ui-tabs-nav li a.ui-tabs-anchor:after { background: url('../images/sprites-32x32-sf6890c994e.png') 0 -1189px no-repeat; width: 16px; height: 16px; content: ""; display: inline-block; margin-left: 6px; border-bottom: 0; } +.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset ul.ui-tabs-nav li a.ui-tabs-anchor:hover:after { border-bottom: 0; background: url('../images/sprites-32x32-sf6890c994e.png') 0 -1163px no-repeat; } +.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset ul.ui-tabs-nav li.ui-state-active a.ui-tabs-anchor:after { background: url('../images/sprites-32x32-sf6890c994e.png') 0 -1215px no-repeat; } +.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset ul.ui-tabs-nav li.ui-state-active a.ui-tabs-anchor:hover:after { background: url('../images/sprites-32x32-sf6890c994e.png') 0 -1137px no-repeat; } +.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel { overflow: hidden; *zoom: 1; -moz-border-radius-topleft: 3px; -webkit-border-top-left-radius: 3px; border-top-left-radius: 3px; -moz-border-radius-topright: 3px; -webkit-border-top-right-radius: 3px; border-top-right-radius: 3px; -moz-border-radius-bottomleft: 0; -webkit-border-bottom-left-radius: 0; border-bottom-left-radius: 0; -moz-border-radius-bottomright: 0; -webkit-border-bottom-right-radius: 0; border-bottom-right-radius: 0; /* Restyle for smaller area*/ background-color: #eceff1; border: 1px solid #ccc; border-bottom: 1px solid #eceff1; clear: both; display: block; position: absolute; top: -204px; width: 190px; /* same width as buttons within panel */ z-index: 1; padding: 10px; margin: 0; margin-top: 1px; } +.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel h3, .cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel h4, .cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel h5 { font-weight: bold; line-height: 16px; } +.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel h3 { font-size: 13px; } +.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel h4 { font-size: 12px; margin: 5px 0; } +.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .ui-widget-content { background: none; } +.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .field { /* Fields are more compressed in some areas compared to the main content editing window so the below alters the internal spacing of the fields so we can move that spacing to between the form fields rather than padding */ border-bottom: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } +.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .field label { float: none; width: auto; font-size: 12px; padding: 0 8px 4px 0; } +.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .field label.extra-details { overflow: hidden; margin-top: 10px; display: block; color: #9d9d9d; font-style: italic; font-weight: normal; font-size: 1em; float: left; text-shadow: none; } +.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .field label.extra-details.fill:before { color: #fff; content: '?'; font-size: 12px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-left: 3px; padding-right: 3px; display: block; float: left; text-shadow: none; -webkit-border-radius: 50px; -moz-border-radius: 50px; -ms-border-radius: 50px; -o-border-radius: 50px; border-radius: 50px; background-color: #b7b7b7; width: 15px; height: 15px; margin-right: 5px; margin-bottom: 5px; } +.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .field .middleColumn { margin: 0; } +.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .field input.text, .cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .field select, .cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .field textarea { padding: 5px; font-size: 11px; } +.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .field.checkbox { padding: 0 8px 0; } +.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .field.checkbox input { margin: 2px 0; } +.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .fieldgroup .fieldgroup-field { padding: 0; } +.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .fieldgroup .fieldgroup-field .field { margin: 0; padding: 0; } +.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .cms-content-fields { overflow: visible; } +.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .chzn-container-single { width: 100% !important; } +.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .chzn-container-single .chzn-single { padding: 0 0 0 5px; float: none; } +.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .cms-content-actions, .cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .cms-preview-controls { padding: 0; height: auto; border: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } +.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .cms-edit-form { width: 100%; } +.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .CompositeField { margin: 0; padding: 0; float: none; } +.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .parent-mode { padding-top: 0; } +.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .treedropdown, .cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .SelectionGroup li.selected div.field { margin: 10px 0 0 0; } +.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .treedropdown .treedropdownfield-title, .cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .SelectionGroup li.selected div.field .treedropdownfield-title { position: absolute; z-index: 2; padding: 5px; } +.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .treedropdown .treedropdownfield-panel, .cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .SelectionGroup li.selected div.field .treedropdownfield-panel { margin-top: 11px; } +.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .treedropdown .treedropdownfield-toggle-panel-link, .cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .SelectionGroup li.selected div.field .treedropdownfield-toggle-panel-link { background: none; border-left: none; padding: 5px 3px; } +.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .treedropdown .treedropdownfield-toggle-panel-link .ui-icon, .cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .SelectionGroup li.selected div.field .treedropdownfield-toggle-panel-link .ui-icon { float: right; opacity: 0.7; } +.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .cms-add-form ul.SelectionGroup { padding-left: 0; padding-right: 0; overflow: visible; border-bottom: none; } +.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .chzn-container-single .chzn-single { padding: 0 0 0 5px; float: none; } +.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel button.ss-ui-button:hover, .cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel button.ss-ui-button:focus, .cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel button.ss-ui-button:active { /*text-decoration:underline;*/ background-color: #e0e5e8; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; outline: none; } +.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .cms-sitetree-information { border-bottom: 1px solid #d0d3d5; margin-bottom: 8px; } +.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .cms-sitetree-information p.meta-info { color: #999; font-size: 11px; line-height: 16px; margin-bottom: 8px; } +.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .last .ui-tabs-panel.ss-ui-action-tab { right: -1px; left: auto; } .cms .cms-tree-view-sidebar { min-width: 176px; /* for when the scrollbar is present & find dropdown open */ } -.cms .cms-tree-view-sidebar .ss-ui-action-tabset.ss-tabset.multi ul.ui-tabs-nav > li { width: auto; } -.cms .cms-tree-view-sidebar .ss-ui-action-tabset.ss-tabset.multi ul.ui-tabs-nav > li a.tab-nav-link { width: 30px; overflow: hidden; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-right: 0; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s; } -.cms .cms-tree-view-sidebar .ss-ui-action-tabset.ss-tabset.multi ul.ui-tabs-nav > li a.tab-nav-link.active { width: 110px; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s; } -.cms .cms-tree-view-sidebar .ss-ui-action-tabset.ss-tabset.multi.tabset-open ul.ui-tabs-nav, .cms .cms-tree-view-sidebar .ss-ui-action-tabset.ss-tabset.multi.tabset-open ul.ui-tabs-nav li.first, .cms .cms-tree-view-sidebar .ss-ui-action-tabset.ss-tabset.multi.tabset-open ul.ui-tabs-nav li.last, .cms .cms-tree-view-sidebar .ss-ui-action-tabset.ss-tabset.multi.tabset-open-last ul.ui-tabs-nav, .cms .cms-tree-view-sidebar .ss-ui-action-tabset.ss-tabset.multi.tabset-open-last ul.ui-tabs-nav li.first, .cms .cms-tree-view-sidebar .ss-ui-action-tabset.ss-tabset.multi.tabset-open-last ul.ui-tabs-nav li.last { -moz-border-radius-bottomright: 0; -webkit-border-bottom-right-radius: 0; border-bottom-right-radius: 0; -moz-border-radius-bottomleft: 0; -webkit-border-bottom-left-radius: 0; border-bottom-left-radius: 0; } +.cms .cms-tree-view-sidebar .ss-ui-action-tabset ul.ui-tabs-nav > li { width: auto; } +.cms .cms-tree-view-sidebar .ss-ui-action-tabset ul.ui-tabs-nav > li a.tab-nav-link { width: 30px; overflow: hidden; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-right: 0; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s; } +.cms .cms-tree-view-sidebar .ss-ui-action-tabset ul.ui-tabs-nav > li a.tab-nav-link.active { width: 110px; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s; } +.cms .cms-tree-view-sidebar .ss-ui-action-tabset.tabset-open ul.ui-tabs-nav, .cms .cms-tree-view-sidebar .ss-ui-action-tabset.tabset-open ul.ui-tabs-nav li.first, .cms .cms-tree-view-sidebar .ss-ui-action-tabset.tabset-open ul.ui-tabs-nav li.last, .cms .cms-tree-view-sidebar .ss-ui-action-tabset.tabset-open-last ul.ui-tabs-nav, .cms .cms-tree-view-sidebar .ss-ui-action-tabset.tabset-open-last ul.ui-tabs-nav li.first, .cms .cms-tree-view-sidebar .ss-ui-action-tabset.tabset-open-last ul.ui-tabs-nav li.last { -moz-border-radius-bottomright: 0; -webkit-border-bottom-right-radius: 0; border-bottom-right-radius: 0; -moz-border-radius-bottomleft: 0; -webkit-border-bottom-left-radius: 0; border-bottom-left-radius: 0; } .cms .cms-tree-view-sidebar .ui-tabs .ui-tabs-panel.ss-ui-action-tab { width: 162px; padding: 10px 6px; } .cms .cms-tree-view-sidebar .ui-tabs .ui-tabs-panel.ss-ui-action-tab .field { max-width: 160px; } .cms .cms-tree-view-sidebar .ui-tabs .ui-tabs-panel.ss-ui-action-tab .ui-icon { padding-right: 0; } diff --git a/admin/scss/_actionTabs.scss b/admin/scss/_actionTabs.scss index 592327527..804589aaf 100644 --- a/admin/scss/_actionTabs.scss +++ b/admin/scss/_actionTabs.scss @@ -15,7 +15,7 @@ $border: 1px solid darken(#D9D9D9, 15%); position:relative; float:left; - /*Style the "tabs" navigation for multiple tabs*/ + /*Style the "tabs" navigation for action tabs (as in the sitetree batch actions)*/ ul.ui-tabs-nav{ @include clearfix; padding:0; @@ -115,7 +115,7 @@ $border: 1px solid darken(#D9D9D9, 15%); margin: 6px 0px 5px 9px; position: absolute; } - &.single{ + &.action-menus{ //Styles for actions-menu implementation ul.ui-tabs-nav{ background:none; border:none; @@ -127,7 +127,7 @@ $border: 1px solid darken(#D9D9D9, 15%); background:none; border:none; padding:0; - border-bottom:none !important; //jquery-ui style has important on it + border-bottom:none !important; //over-ride jquery-ui style (which also has important) &:hover, &:focus, &:active{ @include box-shadow(none); @@ -157,119 +157,20 @@ $border: 1px solid darken(#D9D9D9, 15%); /* Style the tab panels */ .ss-ui-action-tab.ui-tabs-panel{ - display:block; - clear:both; - background:#f8f8f8 !important; //Because ie7 doesn't understanding what the 'C' in CSS stands for - position:absolute; - top:30px; + @include tightSpacing; + background:#f8f8f8 !important; //Because ie7 doesn't understand what the 'C' in CSS stands for border:$border; border-top:none; - width:202px; - z-index:1; + clear:both; + display:block; + float:left; + margin:0; padding:10px; padding-top:15px; - @include tightSpacing; - margin:0; - float:left; - .field label{ - font-size:12px; - } - .cms-content-fields{ - overflow:visible; - } - .chzn-container-single{ - width:100% !important; - .chzn-single{ - padding: 0 0 0 5px; - float:none; - } - } - .cms-content-actions, .cms-preview-controls{ - padding:0; - height:auto; - border:none; - @include box-shadow(none); - - } - .field{ - border-bottom:none; - @include box-shadow(none); - } - .cms-edit-form{ - width:100%; - } - .CompositeField{ - margin:0; - padding:0; - float:none; - } - .parent-mode{ - padding-top:0; - } - - .treedropdown, .SelectionGroup li.selected div.field{ - margin:10px 0 0 0; - //@include box-shadow(inset 0 1px 0 #fff, 0 1px 1px rgba(0,0,0,0.1)); - .treedropdownfield-title{ - position:absolute; - z-index:2; - padding:5px; - } - .treedropdownfield-panel{ - margin-top:11px; - } - .treedropdownfield-toggle-panel-link{ - background:none; - border-left:none; - padding:5px 3px; - .ui-icon{ - float:right; - opacity:0.7; - } - } - } - #PageType ul{ - padding:0; - li{ - padding:4px 5px; - } - } - .cms-add-form ul.SelectionGroup{ - padding-left:0; - padding-right:0; - overflow:visible; - border-bottom:none; - } - label.extra-details{ - overflow:hidden; - margin-top:10px; - display: block; - color: lighten($color-text, 35%); - font-style:italic; - font-weight:normal; - font-size:1em; - float:left; - @include text-shadow(none); - &.fill{ - &:before{ - color:#fff; - content: '?'; - font-size:12px; - @include box-sizing('border-box'); - padding-left:3px; - padding-right:3px; - display:block; - float:left; - @include text-shadow(none); - @include border-radius(50px); - background-color:lighten($color-text, 45%); - width:15px; - height:15px; - margin-right:5px; - margin-bottom:5px; - } - } - } + position:absolute; + top:30px; + width:202px; + z-index:1; &.first { left: 0; width: 203px; @@ -279,7 +180,13 @@ $border: 1px solid darken(#D9D9D9, 15%); } .tab-nav-link, .ss-ui-button { font-size: 12px; - } + } + #PageType ul{ + padding:0; + li{ + padding:4px 5px; + } + } } .last .ss-ui-action-tab{ right:-1px; @@ -288,10 +195,10 @@ $border: 1px solid darken(#D9D9D9, 15%); } /********************** - Styles for pop-up tabs in bottom panel + Styles for edit page action menus ************************/ - .south .Actions{ - overflow:visible; //put this somewhere else/more generic + .cms-content-actions .Actions{ + overflow:visible; //for testing (changed in another branch) .rise-up.ss-ui-action-tabset{ ul.ui-tabs-nav { @@ -384,7 +291,7 @@ $border: 1px solid darken(#D9D9D9, 15%); visible. Added and removed with js in TabSet.js */ .cms-tree-view-sidebar{ min-width: 176px; /* for when the scrollbar is present & find dropdown open */ - .ss-ui-action-tabset.ss-tabset.multi{ + .ss-ui-action-tabset{ ul.ui-tabs-nav{ >li{ width: auto; diff --git a/admin/scss/_mixins.scss b/admin/scss/_mixins.scss index 3fd97769d..a18ff7553 100644 --- a/admin/scss/_mixins.scss +++ b/admin/scss/_mixins.scss @@ -141,16 +141,48 @@ Used in side panels and action tabs .field { /* - * Fields are more compressed in the sidebar compared to the + * Fields are more compressed in some areas compared to the * main content editing window so the below alters the internal * spacing of the fields so we can move that spacing to between * the form fields rather than padding */ + border-bottom:none; + @include box-shadow(none); label { float: none; width: auto; - font-size: 11px; + font-size: 12px; padding: 0 $grid-x 4px 0; + &.extra-details{ + overflow:hidden; + margin-top:10px; + display: block; + color: lighten($color-text, 35%); + font-style:italic; + font-weight:normal; + font-size:1em; + float:left; + @include text-shadow(none); + &.fill{ + &:before{ + color:#fff; + content: '?'; + font-size:12px; + @include box-sizing('border-box'); + padding-left:3px; + padding-right:3px; + display:block; + float:left; + @include text-shadow(none); + @include border-radius(50px); + background-color:lighten($color-text, 45%); + width:15px; + height:15px; + margin-right:5px; + margin-bottom:5px; + } + } + } } .middleColumn { @@ -183,4 +215,60 @@ Used in side panels and action tabs } } } + + /* Restyle for smaller area*/ + .cms-content-fields{ + overflow:visible; + } + .chzn-container-single{ + width:100% !important; + .chzn-single{ + padding: 0 0 0 5px; + float:none; + } + } + .cms-content-actions, .cms-preview-controls{ + padding:0; + height:auto; + border:none; + @include box-shadow(none); + } + .cms-edit-form{ + width:100%; + } + .CompositeField{ + margin:0; + padding:0; + float:none; + } + .parent-mode{ + padding-top:0; + } + .treedropdown, .SelectionGroup li.selected div.field{ + margin:10px 0 0 0; + //@include box-shadow(inset 0 1px 0 #fff, 0 1px 1px rgba(0,0,0,0.1)); + .treedropdownfield-title{ + position:absolute; + z-index:2; + padding:5px; + } + .treedropdownfield-panel{ + margin-top:11px; + } + .treedropdownfield-toggle-panel-link{ + background:none; + border-left:none; + padding:5px 3px; + .ui-icon{ + float:right; + opacity:0.7; + } + } + } + .cms-add-form ul.SelectionGroup{ + padding-left:0; + padding-right:0; + overflow:visible; + border-bottom:none; + } } diff --git a/admin/scss/ie7.scss b/admin/scss/ie7.scss index 4d84b5b2c..dc83c9617 100644 --- a/admin/scss/ie7.scss +++ b/admin/scss/ie7.scss @@ -1,5 +1,7 @@ @import 'themes/default'; @import 'ieShared'; +@import "compass/utilities/sprites/sprite-img"; +@import "sprites.scss"; html { overflow: hidden; @@ -222,4 +224,22 @@ table.ss-gridfield-table { .cms .Actions > .cms-preview-toggle-link{ display:block; } -@include IEVerticalPanelText; \ No newline at end of file + +//IE7 can't use before and after. Compromise +.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset{ + a.ui-tabs-anchor{ + background: sprite($sprites32, arrow_down_lighter) no-repeat; + padding-left:20px; + &:hover { + background: sprite($sprites32, arrow_down_darker) no-repeat; + } + } + .ui-state-active a.ui-tabs-anchor { + background: sprite($sprites32, arrow_up_lighter) no-repeat; + &:hover { + background: sprite($sprites32, arrow_up_darker) no-repeat; + } + } +} + +@include IEVerticalPanelText; diff --git a/javascript/TabSet.js b/javascript/TabSet.js index 7b0609f52..3adcbf6d0 100644 --- a/javascript/TabSet.js +++ b/javascript/TabSet.js @@ -64,14 +64,33 @@ } }); } - }else if(this.parents('.south')){ + }else if(this.parents('.cms-content-actions')){ + var that = this; + var closeHandler = function(event){ + if (!$(event.target).closest(that).length) { + that.tabs('option', 'active', false); + var frame = $('.cms').find('iframe'); + frame.each(function(index, iframe){ + $(iframe).contents().off('click', closeHandler); + }); + $(document).off('click', closeHandler); + }; + } this.tabs({ beforeActivate:function(event, ui){ var activePanel = ui.newPanel; - var activeTab = ui.newTab; + var activeTab = ui.newTab; + var frame = $('.cms').find('iframe'); if($(activePanel).length > 0){ $(activePanel).attr("style","left: "+activeTab.position().left+"px"); - } + } + $(document).on('click', closeHandler); + //Make sure iframe click also closes tab + if(frame.length > 0){ + frame.each(function(index, iframe){ + $(iframe).contents().on('click', closeHandler); + }); + } } }); } @@ -95,6 +114,7 @@ var trigger = $(this).find('.ui-tabs-nav').outerHeight(); var endOfWindow = ($(window).height() + $(document).scrollTop()) - trigger; var elPos = $(this).find('.ui-tabs-nav').offset().top; + var that = this; if(elPos + elHeight >= endOfWindow && elPos - elHeight > 0){ this.addClass('rise-up'); @@ -103,16 +123,16 @@ activate:function(event, ui){ var activePanel = ui.newPanel; var activeTab = ui.newTab; - if(activeTab.position()!=null){ - var top = -activePanel.outerHeight(); + if(activeTab.position() != null){ + var topPosition = -activePanel.outerHeight(); var containerSouth = activePanel.parents('.south'); if(containerSouth){ - var padding = activeTab.offset().top-containerSouth.offset().top; - top = top-padding; - } - var style = $(activePanel).attr("style"); + //If container is the southern panel, make tab appear from the top of the container + var padding = activeTab.offset().top - containerSouth.offset().top; + topPosition = topPosition-padding; + } - $(activePanel).attr("style", style+"top: "+top+"px;"); + $(activePanel).css('top',topPosition+"px"); } } });