diff --git a/admin/css/screen.css b/admin/css/screen.css index d9f0f04d2..c992891ee 100644 --- a/admin/css/screen.css +++ b/admin/css/screen.css @@ -32,9 +32,12 @@ If more variables exist in the future, consider creating a variables file.*/ /** ----------------------------------------------- Grid Units (px) We have a vertical rhythm that the grid is based off both x (=horizontal) and y (=vertical). All internal padding and margins are scaled to this and accounting for paragraphs ------------------------------------------------ */ /** ----------------------------------------------- Application Logo (CMS Logo) Must be 24px x 24px ------------------------------------------------ */ /** ----------------------------- Custom mixins ------------------------------ */ +/*Mixin used to generate slightly smaller text and forms +Used in side panels and action tabs +*/ /** ----------------------------- Sprite images ----------------------------- */ /** 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-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-s37c6548b54.png') no-repeat; } +.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-s97372285ea.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; } @@ -47,14 +50,14 @@ If more variables exist in the future, consider creating a variables file.*/ .ui-state-default .btn-icon-arrow-circle-double, .ui-widget-content .btn-icon-arrow-circle-double { background-position: 0 -324px; } .ui-state-default .btn-icon-back, .ui-widget-content .btn-icon-back { background-position: 0 -356px; } .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 -708px; } +.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 -500px; } -.ui-state-default .btn-icon-chain--minus, .ui-widget-content .btn-icon-chain--minus { background-position: 0 -724px; } +.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 -660px; } -.ui-state-default .btn-icon-chain--plus, .ui-widget-content .btn-icon-chain--plus { background-position: 0 -692px; } -.ui-state-default .btn-icon-chain-small, .ui-widget-content .btn-icon-chain-small { background-position: 0 -756px; } +.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 -468px; } -.ui-state-default .btn-icon-chain, .ui-widget-content .btn-icon-chain { background-position: 0 -740px; } +.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 -436px; } .ui-state-default .btn-icon-cross-circle_disabled, .ui-widget-content .btn-icon-cross-circle_disabled { background-position: 0 -548px; } .ui-state-default .btn-icon-cross, .ui-widget-content .btn-icon-cross { background-position: 0 -276px; } @@ -62,6 +65,7 @@ If more variables exist in the future, consider creating a variables file.*/ .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 -452px; } .ui-state-default .btn-icon-deleteLight, .ui-widget-content .btn-icon-deleteLight { background-position: 0 -291px; } +.ui-state-default .btn-icon-disk, .ui-widget-content .btn-icon-disk { background-position: 0 -676px; } .ui-state-default .btn-icon-document--pencil, .ui-widget-content .btn-icon-document--pencil { background-position: 0 -532px; } .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 -404px; } @@ -73,7 +77,7 @@ If more variables exist in the future, consider creating a variables file.*/ .ui-state-default .btn-icon-navigation, .ui-widget-content .btn-icon-navigation { background-position: 0 -372px; } .ui-state-default .btn-icon-navigation_disabled, .ui-widget-content .btn-icon-navigation_disabled { background-position: 0 -420px; } .ui-state-default .btn-icon-network-cloud, .ui-widget-content .btn-icon-network-cloud { background-position: 0 -596px; } -.ui-state-default .btn-icon-network-cloud_disabled, .ui-widget-content .btn-icon-network-cloud_disabled { background-position: 0 -676px; } +.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 -580px; } .ui-state-default .btn-icon-plug-disconnect-prohibition, .ui-widget-content .btn-icon-plug-disconnect-prohibition { background-position: 0 -244px; } @@ -125,8 +129,8 @@ body, html { font-size: 12px; line-height: 16px; font-family: Arial, sans-serif; .ui-widget-header .ui-dialog-title { padding: 6px 0; text-shadow: #ced7dc 1px 1px 0; } .ui-widget-header a.ui-dialog-titlebar-close { position: absolute; top: -8px; right: -15px; width: 30px; height: 30px; z-index: 100000; } .ui-widget-header a.ui-state-hover { border-color: transparent; background: transparent; } -.ui-widget-header a.ui-state-hover .ui-icon-closethick { background: url('../images/sprites-32x32-se93fc83bf9.png') 0 -216px no-repeat; } -.ui-widget-header .ui-icon-closethick { background: url('../images/sprites-32x32-se93fc83bf9.png') 0 -318px no-repeat; width: 30px; height: 30px; } +.ui-widget-header a.ui-state-hover .ui-icon-closethick { background: url('../images/sprites-32x32-sf6890c994e.png') 0 -216px no-repeat; } +.ui-widget-header .ui-icon-closethick { background: url('../images/sprites-32x32-sf6890c994e.png') 0 -318px no-repeat; width: 30px; height: 30px; } .ui-state-hover { cursor: pointer; } @@ -192,21 +196,27 @@ 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 .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: visible; padding: 8px 12px; } +.cms .Actions { min-height: 30px; overflow: auto; padding: 8px 12px; } .cms .south .Actions, .cms .ui-tabs-panel .Actions, .cms .ui-tabs-panel iframe .Actions { padding: 0; } .cms input.loading, .cms button.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 { color: #525252; border-color: #d5d3d3; cursor: default; } .cms input.loading .ui-icon, .cms button.loading .ui-icon, .cms input.ui-state-default.loading .ui-icon, .cms .ui-widget-content input.ui-state-default.loading .ui-icon, .cms .ui-widget-header input.ui-state-default.loading .ui-icon { background: transparent url(../../images/network-save.gif) no-repeat 0 0; } .cms input.loading.ss-ui-action-constructive .ui-icon, .cms button.loading.ss-ui-action-constructive .ui-icon { background: transparent url(../../images/network-save-constructive.gif) no-repeat 0 0; } -.cms .ss-ui-button { margin-top: 0px; font-weight: bold; text-decoration: none; line-height: 16px; color: #393939; border: 1px solid #c0c0c2; border-bottom: 1px solid #a6a6a9; cursor: pointer; background-color: #e6e6e6; white-space: nowrap; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Q5ZDlkOSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: -webkit-linear-gradient(#ffffff, #d9d9d9); background: -moz-linear-gradient(#ffffff, #d9d9d9); background: -o-linear-gradient(#ffffff, #d9d9d9); background: linear-gradient(#ffffff, #d9d9d9); text-shadow: white 0 1px 1px; /* constructive */ /* destructive */ } +.cms .ss-ui-button { font-size: 12px; margin-top: 0px; padding: 5px 10px; font-weight: bold; text-decoration: none; line-height: 16px; color: #393939; border: 1px solid #c0c0c2; border-bottom: 1px solid #a6a6a9; cursor: pointer; background-color: #e6e6e6; white-space: nowrap; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Q5ZDlkOSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: -webkit-linear-gradient(#ffffff, #d9d9d9); background: -moz-linear-gradient(#ffffff, #d9d9d9); background: -o-linear-gradient(#ffffff, #d9d9d9); background: linear-gradient(#ffffff, #d9d9d9); text-shadow: white 0 1px 1px; /* constructive */ /* destructive */ } +.cms .ss-ui-button .ui-icon, .cms .ss-ui-button .ui-button-text { display: inline-block; line-height: 16px; padding: 0; } +.cms .ss-ui-button .ui-icon { width: 16px; padding: 0 2px; position: relative; left: -2px; margin-top: 0; top: 0; height: 16px; float: left; } .cms .ss-ui-button.ui-state-hover, .cms .ss-ui-button:hover { text-decoration: none; background-color: white; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2U2ZTZlNiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: -webkit-linear-gradient(#ffffff, #e6e6e6); background: -moz-linear-gradient(#ffffff, #e6e6e6); background: -o-linear-gradient(#ffffff, #e6e6e6); background: linear-gradient(#ffffff, #e6e6e6); -webkit-box-shadow: 0 0 5px #b3b3b3; -moz-box-shadow: 0 0 5px #b3b3b3; box-shadow: 0 0 5px #b3b3b3; } .cms .ss-ui-button:active, .cms .ss-ui-button:focus, .cms .ss-ui-button.ui-state-active, .cms .ss-ui-button.ui-state-focus { border: 1px solid #b3b3b3; background-color: white; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2U2ZTZlNiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: -webkit-linear-gradient(#ffffff, #e6e6e6); background: -moz-linear-gradient(#ffffff, #e6e6e6); background: -o-linear-gradient(#ffffff, #e6e6e6); background: linear-gradient(#ffffff, #e6e6e6); -webkit-box-shadow: 0 0 5px #b3b3b3 inset; -moz-box-shadow: 0 0 5px #b3b3b3 inset; box-shadow: 0 0 5px #b3b3b3 inset; } .cms .ss-ui-button.ss-ui-action-constructive { text-shadow: none; font-weight: bold; color: white; border-color: #1f9433; border-bottom-color: #166a24; background-color: #1f9433; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzkzYmU0MiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzFmOTQzMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #93be42), color-stop(100%, #1f9433)); background: -webkit-linear-gradient(#93be42, #1f9433); background: -moz-linear-gradient(#93be42, #1f9433); background: -o-linear-gradient(#93be42, #1f9433); background: linear-gradient(#93be42, #1f9433); text-shadow: #1c872f 0 -1px -1px; } .cms .ss-ui-button.ss-ui-action-constructive.ui-state-hover, .cms .ss-ui-button.ss-ui-action-constructive:hover { border-color: #166a24; background-color: #1f9433; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2E0Y2EzYSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzIzYTkzYSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #a4ca3a), color-stop(100%, #23a93a)); background: -webkit-linear-gradient(#a4ca3a, #23a93a); background: -moz-linear-gradient(#a4ca3a, #23a93a); background: -o-linear-gradient(#a4ca3a, #23a93a); background: linear-gradient(#a4ca3a, #23a93a); } .cms .ss-ui-button.ss-ui-action-constructive:active, .cms .ss-ui-button.ss-ui-action-constructive:focus, .cms .ss-ui-button.ss-ui-action-constructive.ui-state-active, .cms .ss-ui-button.ss-ui-action-constructive.ui-state-focus { background-color: #1d8c30; -webkit-box-shadow: inset 0 1px 3px #17181a, 0 1px 0 rgba(255, 255, 255, 0.6); -moz-box-shadow: inset 0 1px 3px #17181a, 0 1px 0 rgba(255, 255, 255, 0.6); box-shadow: inset 0 1px 3px #17181a, 0 1px 0 rgba(255, 255, 255, 0.6); } .cms .ss-ui-button.ss-ui-action-destructive { color: red; background-color: #e6e6e6; } -.cms .ss-ui-button.ss-ui-button-small .ui-button-text { padding: 2px 2px; font-size: 10px; } +.cms .ss-ui-button.ss-ui-button-small .ui-button-text { font-size: 10px; } .cms .ss-ui-button.ui-state-highlight { background-color: #e6e6e6; border: 1px solid #708284; } .cms .ss-ui-button.ss-ui-action-minor { background: none; border: 0; color: #393939; text-decoration: underline; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .cms .ss-ui-button.ss-ui-action-minor:hover { text-decoration: none; color: #1f1f1f; } @@ -338,9 +348,7 @@ body.cms { overflow: hidden; } .cms strong { font-weight: bold; } /** -------------------------------------------- Helpers -------------------------------------------- */ -.cms-helper-hide-actions .Actions { display: none; } - -.hide { display: none; } +.hide, .cms-helper-hide-actions .Actions { display: none; } /** -------------------------------------------- Panels Styles -------------------------------------------- */ .cms-container { height: 100%; /*background: $tab-panel-texture-background;*/ background: #eceff1; } @@ -388,6 +396,7 @@ body.cms { overflow: hidden; } .ui-tabs .ui-tabs-nav li.cms-tabset-icon.gallery.ui-state-active a { background: url('../images/sprites-64x64-s88957ee578.png') 0 -54px no-repeat; } .ui-tabs .ui-tabs-nav li.cms-tabset-icon.edit.ui-state-active a { background: url('../images/sprites-64x64-s88957ee578.png') 0 -404px no-repeat; } .ui-tabs .ui-tabs-nav li.cms-tabset-icon.search.ui-state-active a { background: url('../images/sprites-64x64-s88957ee578.png') 0 -104px no-repeat; } +.ui-tabs .cms-edit-form, .ui-tabs .cms-content-fields { /*not sure if .cms-content-fields effects other areas*/ } .ui-tabs .cms-edit-form .cms-panel-padded, .ui-tabs .cms-content-fields .cms-panel-padded { /* Has padded area inside it */ padding: 0; margin: 0; } .ui-tabs .cms-edit-form .ui-tabs-panel, .ui-tabs .cms-edit-form .ss-gridfield, .ui-tabs .cms-content-fields .ui-tabs-panel, .ui-tabs .cms-content-fields .ss-gridfield { margin: 12px; padding: 0 0 12px; } .ui-tabs .cms-edit-form .ui-tabs-panel .ss-gridfield, .ui-tabs .cms-edit-form .ss-gridfield .ss-gridfield, .ui-tabs .cms-content-fields .ui-tabs-panel .ss-gridfield, .ui-tabs .cms-content-fields .ss-gridfield .ss-gridfield { /* Files area & inside second level tabs */ padding: 0; /* should be zero ideally */ margin: 0 0 12px; } @@ -466,7 +475,7 @@ p.message { margin-bottom: 12px; } #PageType ul li .description { font-style: italic; } /** -------------------------------------------- Content toolbar -------------------------------------------- */ -.cms-content-toolbar { min-height: 29px; display: block; margin: 0 0 15px 0; border-bottom: 1px solid #d0d3d5; -webkit-box-shadow: 0 1px 0 rgba(248, 248, 248, 0.9); -moz-box-shadow: 0 1px 0 rgba(248, 248, 248, 0.9); -o-box-shadow: 0 1px 0 rgba(248, 248, 248, 0.9); box-shadow: 0 1px 0 rgba(248, 248, 248, 0.9); *zoom: 1; /* smaller treedropdown */ } +.cms-content-toolbar { min-height: 29px; display: block; margin: 0 0 15px 0; padding-bottom: 9px; border-bottom: 1px solid #d0d3d5; -webkit-box-shadow: 0 1px 0 rgba(248, 248, 248, 0.9); -moz-box-shadow: 0 1px 0 rgba(248, 248, 248, 0.9); -o-box-shadow: 0 1px 0 rgba(248, 248, 248, 0.9); box-shadow: 0 1px 0 rgba(248, 248, 248, 0.9); *zoom: 1; /* smaller treedropdown */ } .cms-content-toolbar:after { content: "\0020"; display: block; height: 0; clear: both; overflow: hidden; visibility: hidden; } .cms-content-toolbar .cms-tree-view-modes { float: right; padding-top: 5px; } .cms-content-toolbar .cms-tree-view-modes * { display: inline-block; } @@ -649,7 +658,7 @@ body.cms-dialog { overflow: auto; background: url("../images/textures/bg_cms_mai /** -------------------------------------------- Step labels -------------------------------------------- */ .step-label > * { display: inline-block; vertical-align: top; } .step-label .flyout { height: 18px; font-size: 14px; font-weight: bold; -moz-border-radius-topleft: 3px; -webkit-border-top-left-radius: 3px; border-top-left-radius: 3px; -moz-border-radius-bottomleft: 3px; -webkit-border-bottom-left-radius: 3px; border-bottom-left-radius: 3px; background-color: #667980; padding: 4px 3px 4px 6px; text-align: center; text-shadow: none; color: #fff; } -.step-label .arrow { height: 26px; width: 10px; background: url('../images/sprites-32x32-se93fc83bf9.png') 0 -256px no-repeat; margin-right: 4px; } +.step-label .arrow { height: 26px; width: 10px; background: url('../images/sprites-32x32-sf6890c994e.png') 0 -256px no-repeat; margin-right: 4px; } .step-label .title { height: 18px; padding: 4px; } /** -------------------------------------------- Item Edit Form -------------------------------------------- */ @@ -670,7 +679,6 @@ form.small .cms-file-info-data .field .middleColumn { margin-left: 120px; } /** -------------------------------------------- Users Members Admin -------------------------------------------- */ .members_grid span button#action_gridfield_relationfind { display: none; } .members_grid p button#action_export span.btn-icon-download-csv { height: 17px; } -.members_grid p button#action_export .ui-button-text { padding-left: 26px; } /** Import forms */ form.import-form ul { list-style: disc; } @@ -694,10 +702,10 @@ form.import-form label.left { width: 250px; } /** -------------------------------------------- Buttons for FileUpload -------------------------------------------- */ .ss-uploadfield-item-edit-all .ui-button-text { padding-right: 0; } -.toggle-details-icon { background: url('../images/sprites-32x32-se93fc83bf9.png') 0 -433px no-repeat; } -.ss-uploadfield-item-edit-all .toggle-details-icon { background: url('../images/sprites-32x32-se93fc83bf9.png') 0 -375px no-repeat; display: inline-block; width: 8px; height: 8px; padding-left: 5px; } -.toggle-details-icon.opened { background: url('../images/sprites-32x32-se93fc83bf9.png') 0 -1121px no-repeat; } -.ss-uploadfield-item-edit-all .toggle-details-icon.opened { background: url('../images/sprites-32x32-se93fc83bf9.png') 0 -359px no-repeat; } +.toggle-details-icon { background: url('../images/sprites-32x32-sf6890c994e.png') 0 -433px no-repeat; } +.ss-uploadfield-item-edit-all .toggle-details-icon { background: url('../images/sprites-32x32-sf6890c994e.png') 0 -375px no-repeat; display: inline-block; width: 8px; height: 8px; padding-left: 5px; } +.toggle-details-icon.opened { background: url('../images/sprites-32x32-sf6890c994e.png') 0 -1121px no-repeat; } +.ss-uploadfield-item-edit-all .toggle-details-icon.opened { background: url('../images/sprites-32x32-sf6890c994e.png') 0 -359px no-repeat; } /** -------------------------------------------- Hide preview toggle link by default. May be shown in IE7 stylesheet and forced to show with js if needed -------------------------------------------- */ .cms .Actions > .cms-preview-toggle-link, .cms .cms-navigator > .cms-preview-toggle-link { display: none; } @@ -812,7 +820,7 @@ li.class-ErrorPage > a a .jstree-pageicon { background-position: 0 -112px; } .cms-logo span { font-weight: bold; font-size: 12px; line-height: 16px; padding: 2px 0; margin-left: 30px; } .cms-login-status { border-top: 1px solid #19435c; padding: 12px 0 17px; line-height: 16px; font-size: 11px; } -.cms-login-status .logout-link { display: inline-block; height: 16px; width: 16px; float: left; margin: 0 8px 0 5px; background: url('../images/sprites-32x32-se93fc83bf9.png') 0 -292px no-repeat; text-indent: -9999em; } +.cms-login-status .logout-link { display: inline-block; height: 16px; width: 16px; float: left; margin: 0 8px 0 5px; background: url('../images/sprites-32x32-sf6890c994e.png') 0 -292px no-repeat; text-indent: -9999em; } .cms-menu { z-index: 80; background: #b0bec7; width: 160px; -webkit-box-shadow: rgba(0, 0, 0, 0.9) 0 0 3px; -moz-box-shadow: rgba(0, 0, 0, 0.9) 0 0 3px; box-shadow: rgba(0, 0, 0, 0.9) 0 0 3px; } .cms-menu a { text-decoration: none; } @@ -836,12 +844,12 @@ li.class-ErrorPage > a a .jstree-pageicon { background-position: 0 -112px; } .cms-menu-list li a .icon { display: inline-block; float: left; margin: 4px 10px 0 4px; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); opacity: 0.7; } .cms-menu-list li a .text { display: inline-block; float: left; } .cms-menu-list li a .toggle-children { display: inline-block; float: right; width: 20px; height: 100%; cursor: pointer; } -.cms-menu-list li a .toggle-children .toggle-children-icon { display: inline-block; width: 8px; height: 8px; background: url('../images/sprites-32x32-se93fc83bf9.png') 0 -375px no-repeat; vertical-align: middle; } -.cms-menu-list li a .toggle-children.opened .toggle-children-icon { background: url('../images/sprites-32x32-se93fc83bf9.png') 0 -359px no-repeat; } +.cms-menu-list li a .toggle-children .toggle-children-icon { display: inline-block; width: 8px; height: 8px; background: url('../images/sprites-32x32-sf6890c994e.png') 0 -375px no-repeat; vertical-align: middle; } +.cms-menu-list li a .toggle-children.opened .toggle-children-icon { background: url('../images/sprites-32x32-sf6890c994e.png') 0 -359px no-repeat; } .cms-menu-list li ul li a { border-top: 1px solid #b6c3cb; } .cms-menu-list li.current a { color: white; text-shadow: #1e5270 0 -1px 0; border-top: 1px solid #55a4d2; border-bottom: 1px solid #236184; background-color: #338dc1; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzMzOGRjMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzI4NzA5OSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; 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: linear-gradient(#338dc1, #287099); } -.cms-menu-list li.current a .toggle-children .toggle-children-icon { background: url('../images/sprites-32x32-se93fc83bf9.png') 0 -433px no-repeat; } -.cms-menu-list li.current a .toggle-children.opened .toggle-children-icon { background: url('../images/sprites-32x32-se93fc83bf9.png') 0 -1121px no-repeat; } +.cms-menu-list li.current a .toggle-children .toggle-children-icon { background: url('../images/sprites-32x32-sf6890c994e.png') 0 -433px no-repeat; } +.cms-menu-list li.current a .toggle-children.opened .toggle-children-icon { background: url('../images/sprites-32x32-sf6890c994e.png') 0 -1121px no-repeat; } .cms-menu-list li.current ul { border-top: none; display: block; } .cms-menu-list li.current li { background-color: #287099; } .cms-menu-list li.current li a { font-size: 11px; padding: 0 10px 0 40px; height: 32px; line-height: 32px; color: #e2f0f7; background: none; border-top: 1px solid #2f81b1; border-bottom: 1px solid #1e5270; } @@ -850,44 +858,7 @@ li.class-ErrorPage > a a .jstree-pageicon { background-position: 0 -112px; } .cms-menu-list li.current li.current { background: #2e7ead; border-top: 1px solid #2e7ead; border-top: none; } .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.collapse { display: none; /* // To specific - was overriding collapsed-flyout styles -#Menu-CMSPagesController { - a { - background-image:none; - font-size: 11px; - padding: 0 10px 0 40px; - height: 32px; - line-height: 32px; - } - } - #Menu-CMSPageAddController { - a { - background-image:none; - font-size: 11px; - padding: 0 10px 0 40px; - height: 32px; - line-height: 32px; - } - } - #Menu-AssetAdmin { - a { - background-image:none; - font-size: 11px; - padding: 0 10px 0 40px; - height: 32px; - line-height: 32px; - } - } - #Menu-CMSFileAddController { - a { - background-image:none; - font-size: 11px; - padding: 0 10px 0 40px; - height: 32px; - line-height: 32px; - } - } -*/ } +.cms-menu-list li ul.collapse { display: none; } .cms-menu-list li ul.collapse li a { background-image: none; font-size: 11px; padding: 0 10px 0 40px; height: 32px; line-height: 32px; } .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 16px; height: 32px; line-height: 32px; } @@ -901,14 +872,14 @@ li.class-ErrorPage > a a .jstree-pageicon { background-position: 0 -112px; } .cms-content-controls.cms-preview-controls { z-index: 1; background: #eceff1; height: 30px; /* should be set in js Layout to match page actions */ padding: 12px 12px; } .cms-content-controls .icon-view, .cms-content-controls .preview-selector.dropdown a.chzn-single { white-space: nowrap; } .cms-content-controls .icon-view:before, .cms-content-controls .preview-selector.dropdown a.chzn-single:before { display: inline-block; float: left; content: ''; width: 23px; height: 17px; overflow: hidden; } -.cms-content-controls .icon-auto:before { background: url('../images/sprites-32x32-se93fc83bf9.png') 0 -108px no-repeat; } -.cms-content-controls .icon-desktop:before { background: url('../images/sprites-32x32-se93fc83bf9.png') 0 -81px no-repeat; } -.cms-content-controls .icon-tablet:before { background: url('../images/sprites-32x32-se93fc83bf9.png') 0 -162px no-repeat; } -.cms-content-controls .icon-mobile:before { background: url('../images/sprites-32x32-se93fc83bf9.png') 0 -189px no-repeat; } -.cms-content-controls .icon-split:before { background: url('../images/sprites-32x32-se93fc83bf9.png') 0 -135px no-repeat; } -.cms-content-controls .icon-edit:before { background: url('../images/sprites-32x32-se93fc83bf9.png') 0 -27px no-repeat; } -.cms-content-controls .icon-preview:before { background: url('../images/sprites-32x32-se93fc83bf9.png') 0 0 no-repeat; } -.cms-content-controls .icon-window:before { background: url('../images/sprites-32x32-se93fc83bf9.png') 0 -54px no-repeat; } +.cms-content-controls .icon-auto:before { background: url('../images/sprites-32x32-sf6890c994e.png') 0 -108px no-repeat; } +.cms-content-controls .icon-desktop:before { background: url('../images/sprites-32x32-sf6890c994e.png') 0 -81px no-repeat; } +.cms-content-controls .icon-tablet:before { background: url('../images/sprites-32x32-sf6890c994e.png') 0 -162px no-repeat; } +.cms-content-controls .icon-mobile:before { background: url('../images/sprites-32x32-sf6890c994e.png') 0 -189px no-repeat; } +.cms-content-controls .icon-split:before { background: url('../images/sprites-32x32-sf6890c994e.png') 0 -135px no-repeat; } +.cms-content-controls .icon-edit:before { background: url('../images/sprites-32x32-sf6890c994e.png') 0 -27px no-repeat; } +.cms-content-controls .icon-preview:before { background: url('../images/sprites-32x32-sf6890c994e.png') 0 0 no-repeat; } +.cms-content-controls .icon-window:before { background: url('../images/sprites-32x32-sf6890c994e.png') 0 -54px no-repeat; } .cms-content-controls .cms-navigator { width: 100%; } .cms-content-controls .preview-selector.dropdown a.chzn-single { text-indent: -200px; } .cms-content-controls .preview-selector { float: right; border-bottom: none; position: relative; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; margin: 3px 0 0 4px; padding: 0; height: 28px; } @@ -966,6 +937,116 @@ li.class-ErrorPage > a a .jstree-pageicon { background-position: 0 -112px; } .cms-preview.tabletLandscape .preview-scroll .preview-device-outer .preview-device-inner { -webkit-transition: all 0.3s ease-out; -webkit-transition-delay: 1s; -moz-transition: all 0.3s ease-out 1s; -o-transition: all 0.3s ease-out 1s; transition: all 0.3s ease-out 1s; width: 1039px; } .cms-preview.desktop .preview-scroll .preview-device-outer { -webkit-transition: all 0.3s ease-out; -webkit-transition-delay: 1s; -moz-transition: all 0.3s ease-out 1s; -o-transition: all 0.3s ease-out 1s; transition: all 0.3s ease-out 1s; height: 800px; margin: 0 auto; width: 1024px; } +/******************************************** + +Defines the styles for the action tabset, found on the site tree, +and as a single (more options) tab in page view. This is a special +use case of tabs, so the default tab styling should not apply + + +**********************************************/ +.cms { /********************** +Styles for pop-up tabs in bottom panel +************************/ /* 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 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; } +.cms .ss-ui-action-tabset ul.ui-tabs-nav li:focus, .cms .ss-ui-action-tabset ul.ui-tabs-nav li:active { outline: none; box-shadow: none; -webkit-box-shadow: none; } +.cms .ss-ui-action-tabset ul.ui-tabs-nav li.ui-state-active { background: #f8f8f8; border-bottom: none !important; -moz-border-radius-bottomleft: 0px; -webkit-border-bottom-left-radius: 0px; border-bottom-left-radius: 0px; -moz-border-radius-bottomright: 0px; -webkit-border-bottom-right-radius: 0px; border-bottom-right-radius: 0px; } +.cms .ss-ui-action-tabset ul.ui-tabs-nav li.ui-state-active a { -moz-border-radius-bottomleft: 0px; -webkit-border-bottom-left-radius: 0px; border-bottom-left-radius: 0px; -moz-border-radius-bottomright: 0px; -webkit-border-bottom-right-radius: 0px; border-bottom-right-radius: 0px; } +.cms .ss-ui-action-tabset ul.ui-tabs-nav li.ui-state-active a:focus, .cms .ss-ui-action-tabset ul.ui-tabs-nav li.ui-state-active a span:focus, .cms .ss-ui-action-tabset ul.ui-tabs-nav li.ui-state-active a:active, .cms .ss-ui-action-tabset ul.ui-tabs-nav li.ui-state-active a span:active { outline: none; box-shadow: none; -webkit-box-shadow: none; } +.cms .ss-ui-action-tabset ul.ui-tabs-nav li.first { -moz-border-radius-topleft: 3px; -webkit-border-top-left-radius: 3px; border-top-left-radius: 3px; -moz-border-radius-bottomleft: 3px; -webkit-border-bottom-left-radius: 3px; border-bottom-left-radius: 3px; border-left: none; } +.cms .ss-ui-action-tabset ul.ui-tabs-nav li.last { -moz-border-radius-topright: 3px; -webkit-border-top-right-radius: 3px; border-top-right-radius: 3px; -moz-border-radius-bottomright: 3px; -webkit-border-bottom-right-radius: 3px; border-bottom-right-radius: 3px; border-right: none; } +.cms .ss-ui-action-tabset ul.ui-tabs-nav li a.tab-nav-link { color: #444444; font-weight: bold; line-height: 16px; display: inline-block; padding: 5px 10px; } +.cms .ss-ui-action-tabset ul.ui-tabs-nav li a.tab-nav-link .ui-no-icon { display: inline-block; float: left; padding: 0 2px; width: 16px; height: 16px; } +.cms .ss-ui-action-tabset ul.ui-tabs-nav li a.tab-nav-link .title { display: inline-block; line-height: 18px; } +.cms .ss-ui-action-tabset ul.ui-tabs-nav li a.tab-nav-link.view-mode-batchactions-wrapper .title { margin-left: 22px; } +.cms .ss-ui-action-tabset.tabset-open ul.ui-tabs-nav, .cms .ss-ui-action-tabset.tabset-open ul.ui-tabs-nav li.first { -moz-border-radius-bottomleft: 0; -webkit-border-bottom-left-radius: 0; border-bottom-left-radius: 0; } +.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 .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 .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; } +.cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .treedropdown, .cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .SelectionGroup li.selected div.field { margin: 10px 0 0 0; } +.cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .treedropdown .treedropdownfield-title, .cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .SelectionGroup li.selected div.field .treedropdownfield-title { position: absolute; z-index: 2; padding: 5px; } +.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 .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-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 .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; } +.cms .cms-tree-view-sidebar .last .ui-tabs-panel.ss-ui-action-tab { right: 0; left: auto; } + .ModelAdmin .cms-content-fields { overflow: hidden; } .ModelAdmin .cms-content-fields .cms-edit-form { overflow-y: auto; overflow-x: hidden; } .ModelAdmin .cms-content-fields .cms-content-tools .cms-panel-content .cms-search-form .resetformaction { margin-right: 0px; } diff --git a/admin/images/btn-icon-s37c6548b54.png b/admin/images/btn-icon-s37c6548b54.png deleted file mode 100644 index 3b2195bd8..000000000 Binary files a/admin/images/btn-icon-s37c6548b54.png and /dev/null differ diff --git a/admin/images/btn-icon-s97372285ea.png b/admin/images/btn-icon-s97372285ea.png new file mode 100644 index 000000000..217f08579 Binary files /dev/null and b/admin/images/btn-icon-s97372285ea.png differ diff --git a/admin/images/btn-icon/disk.png b/admin/images/btn-icon/disk.png new file mode 100755 index 000000000..99d532e8b Binary files /dev/null and b/admin/images/btn-icon/disk.png differ diff --git a/admin/images/link_arrows.png b/admin/images/link_arrows.png new file mode 100644 index 000000000..d1cc76c64 Binary files /dev/null and b/admin/images/link_arrows.png differ diff --git a/admin/images/sprites-32x32-se93fc83bf9.png b/admin/images/sprites-32x32-se93fc83bf9.png deleted file mode 100644 index a27e405a9..000000000 Binary files a/admin/images/sprites-32x32-se93fc83bf9.png and /dev/null differ diff --git a/admin/images/sprites-32x32-sf6890c994e.png b/admin/images/sprites-32x32-sf6890c994e.png new file mode 100644 index 000000000..0c02eb066 Binary files /dev/null and b/admin/images/sprites-32x32-sf6890c994e.png differ diff --git a/admin/images/sprites-32x32/arrow_down_darker.png b/admin/images/sprites-32x32/arrow_down_darker.png new file mode 100644 index 000000000..e4ca34c7f Binary files /dev/null and b/admin/images/sprites-32x32/arrow_down_darker.png differ diff --git a/admin/images/sprites-32x32/arrow_down_lighter.png b/admin/images/sprites-32x32/arrow_down_lighter.png new file mode 100644 index 000000000..357dcfac5 Binary files /dev/null and b/admin/images/sprites-32x32/arrow_down_lighter.png differ diff --git a/admin/images/sprites-32x32/arrow_up_darker.png b/admin/images/sprites-32x32/arrow_up_darker.png new file mode 100644 index 000000000..9de2abfa7 Binary files /dev/null and b/admin/images/sprites-32x32/arrow_up_darker.png differ diff --git a/admin/images/sprites-32x32/arrow_up_lighter.png b/admin/images/sprites-32x32/arrow_up_lighter.png new file mode 100644 index 000000000..d150a044b Binary files /dev/null and b/admin/images/sprites-32x32/arrow_up_lighter.png differ diff --git a/admin/javascript/LeftAndMain.Content.js b/admin/javascript/LeftAndMain.Content.js index 780108b50..1c2dfec29 100644 --- a/admin/javascript/LeftAndMain.Content.js +++ b/admin/javascript/LeftAndMain.Content.js @@ -15,9 +15,8 @@ // Force initialization of certain UI elements to avoid layout glitches this.find('.cms-tabset').redrawTabs(); - this.find('.ss-ui-tabs-nav').redraw(); - this._super(); + }, redraw: function() { diff --git a/admin/javascript/LeftAndMain.EditForm.js b/admin/javascript/LeftAndMain.EditForm.js index 4efc94e0a..227412dfc 100644 --- a/admin/javascript/LeftAndMain.EditForm.js +++ b/admin/javascript/LeftAndMain.EditForm.js @@ -205,14 +205,18 @@ }); /** - * Hide tabs when only one is available + * Hide tabs when only one is available. + * Special case is actiontabs - tabs between buttons, where we want to have + * extra options hidden within a tab (even if only one) by default. */ $('.cms-edit-form .ss-tabset').entwine({ onmatch: function() { - var tabs = this.find("> ul:first"); + if (!this.hasClass('ss-ui-action-tabset')) { + var tabs = this.find("> ul:first"); - if(tabs.children("li").length == 1) { - tabs.hide().parent().addClass("ss-tabset-tabshidden"); + if(tabs.children("li").length == 1) { + tabs.hide().parent().addClass("ss-tabset-tabshidden"); + } } this._super(); diff --git a/admin/javascript/LeftAndMain.js b/admin/javascript/LeftAndMain.js index dbfe0270c..dd11134dd 100644 --- a/admin/javascript/LeftAndMain.js +++ b/admin/javascript/LeftAndMain.js @@ -440,7 +440,7 @@ jQuery.noConflict(); * Can be hooked into an ajax 'success' callback. */ handleAjaxResponse: function(data, status, xhr) { - var self = this, url, activeTabs, guessFragment; + var self = this, url, selectedTabs, guessFragment; // Pseudo-redirects via X-ControllerURL might return empty data, in which // case we'll ignore the response @@ -571,19 +571,19 @@ jQuery.noConflict(); saveTabState: function() { if(typeof(window.sessionStorage)=="undefined" || window.sessionStorage == null) return; - var activeTabs = [], url = this._tabStateUrl(); + var selectedTabs = [], url = this._tabStateUrl(); this.find('.cms-tabset,.ss-tabset').each(function(i, el) { var id = $(el).attr('id'); if(!id) return; // we need a unique reference if(!$(el).data('tabs')) return; // don't act on uninit'ed controls if($(el).data('ignoreTabState')) return; // allow opt-out - activeTabs.push({id:id, active:$(el).tabs('option', 'active')}); + selectedTabs.push({id:id, selected:$(el).tabs('option', 'selected')}); }); - if(activeTabs) { + if(selectedTabs) { var tabsUrl = 'tabs-' + url; try { - window.sessionStorage.setItem(tabsUrl, JSON.stringify(activeTabs)); + window.sessionStorage.setItem(tabsUrl, JSON.stringify(selectedTabs)); } catch(err) { if (err.code === DOMException.QUOTA_EXCEEDED_ERR && window.sessionStorage.length === 0) { // If this fails we ignore the error as the only issue is that it @@ -606,12 +606,12 @@ jQuery.noConflict(); var self = this, url = this._tabStateUrl(), data = window.sessionStorage.getItem('tabs-' + url), - activeTabs = data ? JSON.parse(data) : false; - if(activeTabs) { - $.each(activeTabs, function(i, activeTab) { - var el = self.find('#' + activeTab.id); + selectedTabs = data ? JSON.parse(data) : false; + if(selectedTabs) { + $.each(selectedTabs, function(i, selectedTab) { + var el = self.find('#' + selectedTab.id); if(!el.data('tabs')) return; // don't act on uninit'ed controls - el.tabs('option', 'active', activeTab.active); + el.tabs('select', selectedTab.selected); }); } }, @@ -1012,7 +1012,7 @@ jQuery.noConflict(); }, redrawTabs: function() { this.rewriteHashlinks(); - + var id = this.attr('id'), activeTab = this.find('ul:first .ui-tabs-active'); if(!this.data('uiTabs')) this.tabs({ @@ -1025,7 +1025,7 @@ jQuery.noConflict(); activate: function(e, ui) { // Usability: Hide actions for "readonly" tabs (which don't contain any editable fields) var actions = $(this).closest('form').find('.Actions'); - if($(ui.tab).closest('li').hasClass('readonly')) { + if($(ui.newTab).closest('li').hasClass('readonly')) { actions.fadeOut(); } else { actions.show(); diff --git a/admin/javascript/ssui.core.js b/admin/javascript/ssui.core.js index 4e013ae83..bcdcd380f 100644 --- a/admin/javascript/ssui.core.js +++ b/admin/javascript/ssui.core.js @@ -83,17 +83,17 @@ } // Create missing elements. - if (this.options.alternate.text) { - this.buttonElement.append( - "" + this.options.alternate.text + "" - ); - } if (this.options.alternate.icon) { this.buttonElement.append( "" ); } + if (this.options.alternate.text) { + this.buttonElement.append( + "" + this.options.alternate.text + "" + ); + } this._refreshAlternate(); }, diff --git a/admin/scss/_actionTabs.scss b/admin/scss/_actionTabs.scss new file mode 100644 index 000000000..592327527 --- /dev/null +++ b/admin/scss/_actionTabs.scss @@ -0,0 +1,428 @@ +/******************************************** + +Defines the styles for the action tabset, found on the site tree, +and as a single (more options) tab in page view. This is a special +use case of tabs, so the default tab styling should not apply + + +**********************************************/ + + +$border: 1px solid darken(#D9D9D9, 15%); + +.cms { + .ss-ui-action-tabset{ + position:relative; + float:left; + + /*Style the "tabs" navigation for multiple tabs*/ + ul.ui-tabs-nav{ + @include clearfix; + padding:0; + overflow:visible; + float:left; + height: 28px; + border:$border; + @include border-radius(3px); + &:focus,&:active{ + outline:none; + box-shadow:none; + -webkit-box-shadow: none; + } + li{ + &:focus, &:active{ + outline:none; + box-shadow:none; + -webkit-box-shadow: none; + } + width: 110px; + overflow:visible; + background:#eaeaea; + @include background-image(linear-gradient(top, #f8f8f8, #D9D9D9)); + border-radius: none; + @include border-radius(0); + border: none; + border-right:1px solid #eee; + border-left: $border; + margin:0; + &.ui-state-active{ + background:#f8f8f8; + border-bottom:none !important; //jquery-ui style has important on it + @include border-bottom-left-radius(0px); + @include border-bottom-right-radius(0px); + a { + @include border-bottom-left-radius(0px); + @include border-bottom-right-radius(0px); + &:focus, span:focus,&:active, span:active{ + outline:none; + box-shadow:none; + -webkit-box-shadow: none; + } + } + } + &.first{ + @include border-top-left-radius(3px); + @include border-bottom-left-radius(3px); + border-left:none; + } + &.last{ + @include border-top-right-radius(3px); + @include border-bottom-right-radius(3px); + border-right:none; + } + a.tab-nav-link{ + color:$color-text; + font-weight:bold; + line-height:16px; + display:inline-block; + padding: 5px 10px; + .ui-no-icon { + display:inline-block; + float:left; + padding: 0 2px; + width:16px; + height:16px; + } + .title{ + display:inline-block; + line-height: 18px; + } + &.view-mode-batchactions-wrapper .title { + margin-left: 22px; + } + } + } + } + &.tabset-open { + ul.ui-tabs-nav, + ul.ui-tabs-nav li.first { + @include border-bottom-left-radius(0); + } + } + &.tabset-open-last { + ul.ui-tabs-nav li.last { + @include border-bottom-right-radius(0); + } + } + + .batch-check, .ui-icon { /* position a checkbox & icon within a tab */ + display: inline-block; + float:left; + margin-left: -2px; + padding-right: 6px; + } + .batch-check { + margin: 6px 0px 5px 9px; + position: absolute; + } + &.single{ + ul.ui-tabs-nav{ + background:none; + border:none; + display:inline; + padding:0; + float:left; + li{ + display:inline; + background:none; + border:none; + padding:0; + border-bottom:none !important; //jquery-ui style has important on it + + &:hover, &:focus, &:active{ + @include box-shadow(none); + outline:none; + } + a{ + color: $color-text-blue-link; + @include text-shadow(#fff 0 1px 1px); + padding:0 0 0 10px; + line-height:24px; + + &:hover, &:focus, &:active{ + @include box-shadow(none); + outline:none; + } + &:hover{ + @include text-shadow(#fff 0 10px 10px); + color: darken($color-text-blue-link,8%); + &:after{ + border-bottom: 4px solid darken($color-text-blue-link,8%); + } + } + } + } + } + } + + /* 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; + border:$border; + border-top:none; + width:202px; + z-index:1; + 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; + } + } + } + &.first { + left: 0; + width: 203px; + } + .ui-icon { + padding-right: 0; + } + .tab-nav-link, .ss-ui-button { + font-size: 12px; + } + } + .last .ss-ui-action-tab{ + right:-1px; + left:auto; + } + } + + /********************** + Styles for pop-up tabs in bottom panel + ************************/ + .south .Actions{ + overflow:visible; //put this somewhere else/more generic + + .rise-up.ss-ui-action-tabset{ + ul.ui-tabs-nav { + margin: 0; + li { + a.ui-tabs-anchor { + font-weight: normal; + font-size: 13px; + line-height: 24px; + padding-right: 25px; + &:after { + background: sprite($sprites32, arrow_down_lighter) no-repeat; + width: 16px; + height: 16px; + content: ""; + display: inline-block; + margin-left: 6px; + border-bottom: 0; + + } + &:hover:after { + border-bottom: 0; + background: sprite($sprites32, arrow_down_darker) no-repeat; + } + + } + &.ui-state-active a.ui-tabs-anchor { + &:after { + background: sprite($sprites32, arrow_up_lighter) no-repeat; + } + &:hover:after { + background: sprite($sprites32, arrow_up_darker) no-repeat; + } + } + } + } + .ui-tabs-panel{ + @include clearfix; + @include border-top-radius(3px); + @include border-bottom-radius(0); + @include tightSpacing; + background-color: $tab-panel-texture-color; + border:1px solid #ccc; + border-bottom:1px solid $tab-panel-texture-color; + 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; + .chzn-container-single .chzn-single{ + padding: 0 0 0 5px; + float:none; + } + @extend .button-no-style; + button.ss-ui-button{ + &:hover, &:focus, &:active{ + /*text-decoration:underline;*/ + background-color: darken($tab-panel-texture-color,4%); + @include box-shadow(none); + outline:none; + } + + } + .cms-sitetree-information { + border-bottom: 1px solid $color-light-separator; + margin-bottom: 8px; + p.meta-info { + color: #999; + font-size: 11px; + line-height: 16px; + margin-bottom: 8px; + } + } + } + .last .ui-tabs-panel.ss-ui-action-tab{ + right:-1px; + left:auto; + } + } + } + + + /* 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-tree-view-sidebar{ + min-width: 176px; /* for when the scrollbar is present & find dropdown open */ + .ss-ui-action-tabset.ss-tabset.multi{ + ul.ui-tabs-nav{ + >li{ + width: auto; + a.tab-nav-link{ + width:30px; + overflow:hidden; + @include box-sizing(border-box); + padding-right:0; + @include duration(0.5s); + &.active{ + width:110px; + @include duration(0.5s); + } + } + } + } + &.tabset-open, &.tabset-open-last { + ul.ui-tabs-nav, + ul.ui-tabs-nav li.first, + ul.ui-tabs-nav li.last { + @include border-bottom-right-radius(0); + @include border-bottom-left-radius(0); + } + } + } + .ui-tabs .ui-tabs-panel.ss-ui-action-tab { + width:162px; + padding:10px 6px; + .field { + max-width:160px; + } + .ui-icon { + padding-right: 0; + } + } + .last .ui-tabs-panel.ss-ui-action-tab { + right:0; + left:auto; + } + } +} \ No newline at end of file diff --git a/admin/scss/_forms.scss b/admin/scss/_forms.scss index 2bb2e3f9d..393c76d07 100644 --- a/admin/scss/_forms.scss +++ b/admin/scss/_forms.scss @@ -285,6 +285,36 @@ form.small .field, .field.small { * ---------------------------------------------------- */ .cms { + .button-no-style{ + button{ + background: none; + border: none; + display: block; + margin:0; + outline:none; + color: $color-text-blue-link; + font-weight:normal; + width: 210px; /* same as width of surrounding panel */ + text-align: left; + @include border-radius(0); + text-shadow: none; + margin-left:-10px; + + &.ss-ui-action-destructive{ + color: darken($color-error,25%); + } + span{ + padding-left:0; + padding-right:0; + } + &:hover, &:focus, &:active{ + outline:none; + background:none; + @include box-shadow(none); + border:none; + } + } + } .Actions, .cms-actions-row { > * { @@ -300,7 +330,7 @@ form.small .field, .field.small { .Actions { min-height: 30px; - overflow: visible; + overflow: auto; padding: $grid-x $grid-y * 1.5; } .south .Actions, .ui-tabs-panel .Actions, .ui-tabs-panel iframe .Actions { @@ -328,7 +358,9 @@ form.small .field, .field.small { } .ss-ui-button { + font-size: 12px; margin-top:0px; + padding: 5px 10px; font-weight: bold; text-decoration: none; line-height: $grid-y * 2; @@ -339,6 +371,22 @@ form.small .field, .field.small { background-color: $color-button-generic; white-space: nowrap; + .ui-icon, .ui-button-text { + display: inline-block; + line-height: $grid-x*2; + padding: 0; + } + .ui-icon { + width: 16px; + padding: 0 2px; + position: relative; + left: -2px; + margin-top: 0; + top: 0; + height: 16px; + float: left; + } + @include background( linear-gradient(color-stops( lighten($color-button-generic, 10%), @@ -412,7 +460,6 @@ form.small .field, .field.small { &.ss-ui-button-small { .ui-button-text { - padding: ($grid-y/4) ($grid-x/4); font-size: $font-base-size - 2; } } diff --git a/admin/scss/_menu.scss b/admin/scss/_menu.scss index 6e93297e0..e427589c9 100644 --- a/admin/scss/_menu.scss +++ b/admin/scss/_menu.scss @@ -319,44 +319,6 @@ line-height: 32px; } } - /* // To specific - was overriding collapsed-flyout styles -#Menu-CMSPagesController { - a { - background-image:none; - font-size: 11px; - padding: 0 10px 0 40px; - height: 32px; - line-height: 32px; - } - } - #Menu-CMSPageAddController { - a { - background-image:none; - font-size: 11px; - padding: 0 10px 0 40px; - height: 32px; - line-height: 32px; - } - } - #Menu-AssetAdmin { - a { - background-image:none; - font-size: 11px; - padding: 0 10px 0 40px; - height: 32px; - line-height: 32px; - } - } - #Menu-CMSFileAddController { - a { - background-image:none; - font-size: 11px; - padding: 0 10px 0 40px; - height: 32px; - line-height: 32px; - } - } -*/ } /* Style applied to the menu flyout only when the collapsed setting */ diff --git a/admin/scss/_mixins.scss b/admin/scss/_mixins.scss index 403629d43..3fd97769d 100644 --- a/admin/scss/_mixins.scss +++ b/admin/scss/_mixins.scss @@ -108,7 +108,79 @@ transition: $properties; } +@mixin duration($time, $webkit:true){ + @if($webkit){ + -webkit-transition-duration: $time; + } + -moz-transition-duration: $time; + -o-transition-duration: $time; + transition-duration: $time; +} +/*Mixin used to generate slightly smaller text and forms +Used in side panels and action tabs +*/ +@mixin tightSpacing{ + h3,h4,h5 { + font-weight: bold; + line-height: $grid-y * 2; + } + h3 { + font-size: $font-base-size + 1; + } + h4 { + font-size: $font-base-size; + margin:5px 0; + } + + .ui-widget-content { + background: none; + } + + .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 + */ + label { + float: none; + width: auto; + font-size: 11px; + padding: 0 $grid-x 4px 0; + } + + .middleColumn { + margin: 0; + } + + input.text, + select, + textarea { + padding: 5px; + font-size: 11px; + } + + &.checkbox { + padding: 0 8px 0; + + input { + margin: 2px 0; + } + } + } + .fieldgroup { + .fieldgroup-field { + padding: 0; + + .field { + margin: 0; + padding: 0; + } + } + } +} diff --git a/admin/scss/_style.scss b/admin/scss/_style.scss index 2219c522b..332ade848 100644 --- a/admin/scss/_style.scss +++ b/admin/scss/_style.scss @@ -54,16 +54,18 @@ body.cms { * Helpers * -------------------------------------------- */ -.cms-helper-hide-actions { - .Actions { - display: none; - } -} - .hide { display: none; } +.cms-helper-hide-actions { + .Actions { + @extend .hide; + } +} + + + /** -------------------------------------------- * Panels Styles * -------------------------------------------- */ @@ -248,7 +250,7 @@ body.cms { } } - .cms-edit-form, .cms-content-fields { + .cms-edit-form, .cms-content-fields { /*not sure if .cms-content-fields effects other areas*/ .cms-panel-padded { /* Has padded area inside it */ padding: 0; margin: 0; @@ -540,8 +542,9 @@ p.message { overflow: auto; } } + #PageType { - ul { + ul { padding-left: 20px; li { float: none; @@ -607,6 +610,7 @@ p.message { min-height: 29px; display: block; margin: 0 0 15px 0; + padding-bottom: 9px; @include doubleborder(bottom, $color-light-separator, $box-shadow-shine); @include legacy-pie-clearfix(); @@ -1579,9 +1583,6 @@ form.small { span.btn-icon-download-csv { height:17px; //exact height of icon } - .ui-button-text { - padding-left:26px; //to accomodate wider export icon - } } } diff --git a/admin/scss/_uitheme.scss b/admin/scss/_uitheme.scss index f6a9b5cb1..3c2e8f6f2 100644 --- a/admin/scss/_uitheme.scss +++ b/admin/scss/_uitheme.scss @@ -45,16 +45,16 @@ z-index: 100000; } - & a.ui-state-hover { + a.ui-state-hover { border-color: transparent; background: transparent; - & .ui-icon-closethick { + .ui-icon-closethick { background: sprite($sprites32, dialog-close-over) no-repeat; } } - & .ui-icon-closethick { + .ui-icon-closethick { background: sprite($sprites32, dialog-close) no-repeat; width: 30px; height: 30px; diff --git a/admin/scss/_uitheme.scss.orig b/admin/scss/_uitheme.scss.orig deleted file mode 100644 index 6fb3d3bd3..000000000 --- a/admin/scss/_uitheme.scss.orig +++ /dev/null @@ -1,116 +0,0 @@ -/** - * This file defines CMS-specific customizations to the jQuery UI theme. - * Every rule should contain ONLY overwritten jQuery UI rules (with 'ui-' prefix). - * - * This file should be fairly short, as we're using our own custom jQuery UI theme already. - * TODO Add theme reference - * - * Use _style.scss to add more generic style information, - * and read the jQuery UI theming API: http://jqueryui.com/docs/Theming/API - */ - -<<<<<<< HEAD -.cms { - .ui-tabs { - padding: 0; - background: none; - - .ui-widget-header { - border: 0; - background: none; - } - - .ui-tabs-nav { - margin: 0; - padding: 0; - - li { - top: 0; - border-bottom: 0 !important; - - a { - padding: 0 15px; - } - } - - &.ui-state-active { - border-color: $color-medium-separator; - } - } -======= -.ui-widget-content, -.ui-widget { - color: $color-text; - font-size: $font-base-size; - font-family: $font-family; - border: 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 background-image( - linear-gradient(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); ->>>>>>> ENHANCEMENT Tab style consolidation and design consistency - - & .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; - z-index: 100000; - } - - & a.ui-state-hover { - border-color: transparent; - background: transparent; - - & .ui-icon-closethick { - background: sprite($sprites32, dialog-close-over) no-repeat; - } - } - - & .ui-icon-closethick { - background: sprite($sprites32, dialog-close) no-repeat; - width: 30px; - height: 30px; - } -} - -.ui-state-hover { - cursor: pointer; -} - -.ui-widget input, -.ui-widget select, -.ui-widget textarea, -.ui-widget button { - color: $color-text; - font-size: $font-base-size; - font-family: $font-family; -} - -.ui-accordion { - .ui-accordion-header { - border-color: $color-button-generic-border; - margin-bottom: 0; - } - .ui-accordion-content { - border: 1px solid $color-button-generic-border; - border-top: none; - } -} diff --git a/admin/scss/screen.scss b/admin/scss/screen.scss index 8e1af8b4d..382c5ed54 100644 --- a/admin/scss/screen.scss +++ b/admin/scss/screen.scss @@ -55,5 +55,6 @@ $experimental-support-for-svg: true; @import "tree.scss"; @import "menu.scss"; @import "preview.scss"; +@import "actionTabs.scss"; @import "ModelAdmin.scss"; @import "SecurityAdmin.scss"; diff --git a/css/AssetUploadField.css b/css/AssetUploadField.css index e4c0b2b3a..ad090f63c 100644 --- a/css/AssetUploadField.css +++ b/css/AssetUploadField.css @@ -7,6 +7,9 @@ /** ----------------------------------------------- Typography. ------------------------------------------------ */ /** ----------------------------------------------- Grid Units (px) We have a vertical rhythm that the grid is based off both x (=horizontal) and y (=vertical). All internal padding and margins are scaled to this and accounting for paragraphs ------------------------------------------------ */ /** ----------------------------------------------- Application Logo (CMS Logo) Must be 24px x 24px ------------------------------------------------ */ +/*Mixin used to generate slightly smaller text and forms +Used in side panels and action tabs +*/ .ss-uploadfield-view-allowed-extensions { padding-top: 20px; clear: both; max-width: 750px; display: block; } #AssetUploadField { border-bottom: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; padding: 12px; } diff --git a/css/GridField.css b/css/GridField.css index 78f373cbe..ec6e5bddb 100644 --- a/css/GridField.css +++ b/css/GridField.css @@ -8,14 +8,15 @@ /** ----------------------------------------------- Typography. ------------------------------------------------ */ /** ----------------------------------------------- Grid Units (px) We have a vertical rhythm that the grid is based off both x (=horizontal) and y (=vertical). All internal padding and margins are scaled to this and accounting for paragraphs ------------------------------------------------ */ /** ----------------------------------------------- Application Logo (CMS Logo) Must be 24px x 24px ------------------------------------------------ */ -.cms .ss-gridfield > div { margin-bottom: 36px; } +/*Mixin used to generate slightly smaller text and forms +Used in side panels and action tabs +*/ .cms .ss-gridfield > div.addNewGridFieldButton { margin-bottom: 0; } .cms .ss-gridfield > div.addNewGridFieldButton .action { margin-bottom: 12px; } .cms .ss-gridfield[data-selectable] tr.ui-selected, .cms .ss-gridfield[data-selectable] tr.ui-selecting { background: #FFFAD6 !important; } .cms .ss-gridfield[data-selectable] td { cursor: pointer; } .cms .ss-gridfield span button#action_gridfield_relationfind { display: none; } .cms .ss-gridfield p button#action_export span.btn-icon-download-csv { height: 17px; } -.cms .ss-gridfield p button#action_export .ui-button-text { padding-left: 26px; } .cms .ss-gridfield .right { float: right; } .cms .ss-gridfield .right > * { float: right; margin-left: 8px; } .cms .ss-gridfield .right .pagination-records-number { font-size: 1.0em; padding: 6px 3px 6px 0; color: white; text-shadow: 0px -1px 0 rgba(0, 0, 0, 0.2); font-weight: normal; } diff --git a/css/UploadField.css b/css/UploadField.css index 2885c4320..6ef200f4f 100644 --- a/css/UploadField.css +++ b/css/UploadField.css @@ -7,10 +7,13 @@ /** ----------------------------------------------- Typography. ------------------------------------------------ */ /** ----------------------------------------------- Grid Units (px) We have a vertical rhythm that the grid is based off both x (=horizontal) and y (=vertical). All internal padding and margins are scaled to this and accounting for paragraphs ------------------------------------------------ */ /** ----------------------------------------------- Application Logo (CMS Logo) Must be 24px x 24px ------------------------------------------------ */ +/*Mixin used to generate slightly smaller text and forms +Used in side panels and action tabs +*/ .ss-uploadfield .clear { clear: both; } .ss-insert-media .ss-uploadfield { margin-top: 20px; } .ss-insert-media .ss-uploadfield h4 { float: left; } -.ss-uploadfield .middleColumn { width: 526px; padding: 0; background: #fff; border: 1px solid #b3b3b3; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #efefef), color-stop(10%, #ffffff), color-stop(90%, #ffffff), color-stop(100%, #efefef)); background-image: -webkit-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -moz-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -o-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); } +.ss-uploadfield .middleColumn { width: 510px; padding: 0; background: #fff; border: 1px solid #b3b3b3; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #efefef), color-stop(10%, #ffffff), color-stop(90%, #ffffff), color-stop(100%, #efefef)); background-image: -webkit-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -moz-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -o-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); } .ss-uploadfield .ss-uploadfield-item { margin: 0; padding: 15px; overflow: auto; } .ss-uploadfield .ss-uploadfield-item .ss-uploadfield-item-preview { height: 60px; line-height: 60px; width: 80px; text-align: center; font-weight: bold; float: left; overflow: hidden; } .ss-uploadfield .ss-uploadfield-item .ss-uploadfield-item-preview.ss-uploadfield-dropzone { -webkit-box-shadow: gray 0 0 4px 0 inset; -moz-box-shadow: gray 0 0 4px 0 inset; box-shadow: gray 0 0 4px 0 inset; border: 2px dashed gray; background: #d0d3d5; display: none; } diff --git a/docs/en/howto/extend-cms-interface.md b/docs/en/howto/extend-cms-interface.md index 1e03503a6..eac980dd5 100644 --- a/docs/en/howto/extend-cms-interface.md +++ b/docs/en/howto/extend-cms-interface.md @@ -22,8 +22,8 @@ We can use this to create a different base template with `LeftAndMain.ss` (which corresponds to the `LeftAndMain` PHP controller class). Copy the template markup of the base implementation at `framework/admin/templates/LeftAndMain.ss` into -`mysite/templates/LeftAndMain.ss`. It will automatically be picked up by the CMS logic. Add a new section after -the `$Content` tag: +`mysite/templates/LeftAndMain.ss`. It will automatically be picked up by the CMS logic. Add a new section after the +`$Content` tag: :::ss ... @@ -125,6 +125,55 @@ and replace it with the following: <% end_loop %> +## Extending the CMS actions + +CMS actions follow a principle similar to the CMS fields: they are built in the backend with the help of `FormFields` +and `FormActions`, and the frontend is responsible for applying a consistent styling. + +The following conventions apply: + +* New actions can be added by redefining `getCMSActions`, or adding an extension with `updateCMSActions`. +* It is required the actions are contained in a `FieldSet` (`getCMSActions` returns this already). +* Standalone buttons are created by adding a top-level `FormAction` (no such button is added by default). +* Button groups are created by adding a top-level `CompositeField` with `FormActions` in it. +* A `MajorActions` button group is already provided as a default. +* Drop ups with additional actions that appear as links are created via a `TabSet` and `Tabs` with `FormActions` inside. +* A `ActionMenus.MoreOptions` tab is already provided as a default and contains some minor actions. +* You can override the actions completely by providing your own `getAllCMSFields`. + +Let's walk through a couple of examples of adding new CMS actions in `getCMSActions`. + +First of all we can add a regular standalone button anywhere in the set. Here we are inserting it in the front of all +other actions. We could also add a button group (`CompositeField`) in a similar fashion. + + :::php + $fields->unshift(FormAction::create('normal', 'Normal button')); + +We can affect the existing button group by manipulating the `CompositeField` already present in the `FieldList`. + + :::php + $fields->fieldByName('MajorActions')->push(FormAction::create('grouped', 'New group button')); + +Another option is adding actions into the drop-up - best place for placing infrequently used minor actions. + + :::php + $fields->addFieldToTab('ActionMenus.MoreOptions', FormAction::create('minor', 'Minor action')); + +We can also easily create new drop-up menus by defining new tabs within the `TabSet`. + + :::php + $fields->addFieldToTab('ActionMenus.MyDropUp', FormAction::create('minor', 'Minor action in a new drop-up')); + +
+Empty tabs will be automatically removed from the `FieldList` to prevent clutter. +
+ +New actions will need associated controller handlers to work. You can use a `LeftAndMainExtension` to provide one. Refer +to [Controller documentation](../topics/controller) for instructions on setting up handlers. + +To make the actions more user-friendly you can also use alternating buttons as detailed in the [CMS Alternating +Button](../reference/cms-alternating-button) how-to. + ## Summary In a few lines of code, we've customized the look and feel of the CMS. @@ -136,3 +185,4 @@ blocks and concepts for more complex extensions as well. * [Reference: CMS Architecture](../reference/cms-architecture) * [Reference: Layout](../reference/layout) * [Topics: Rich Text Editing](../topics/rich-text-editing) + * [CMS Alternating Button](../reference/cms-alternating-button) diff --git a/javascript/TabSet.js b/javascript/TabSet.js index 2d30fcf58..7b0609f52 100644 --- a/javascript/TabSet.js +++ b/javascript/TabSet.js @@ -4,6 +4,80 @@ * Lightweight wrapper around jQuery UI tabs. */ $('.ss-tabset').entwine({ + + /*Custom functionality for special action tabsets*/ + actionTabs: function(){ + this.tabs( + 'option', + 'collapsible', + true + ).tabs('option', 'active', false); + + //Apply special behaviour to the cms actions row + if(this.hasClass('cms-actions-row')){ + + /* If actions panel is within the tree, apply active class + to help animate open/close on hover + Position must be reset else anyone coming from main sitetree + will see broken tabs */ + var container = this.parent().parent(); + if($(container).hasClass('cms-tree-view-sidebar')){ + $('.ui-tabs-nav li').hover(function(){ + $(this).parent().find('li .active').removeClass('active'); + $(this).find('a').addClass('active'); + }); + + this.tabs({ + beforeActivate:function(event, ui){ + var activePanel = ui.newPanel; + $(activePanel).attr("style","left : auto; right: auto"); + $(this).closest('.ss-ui-action-tabset').removeClass('tabset-open').removeClass('tabset-open-last'); + + if($(activePanel).length > 0){ + $(activePanel).parent().addClass('tabset-open'); + } + } + }); + }else{ + /* If the tabs are in the full site tree view, do some + positioning so tabPanel stays with relevent tab */ + this.tabs({ + beforeActivate:function(event, ui){ + var activePanel = ui.newPanel; + var activeTab = ui.newTab; + $(this).closest('.ss-ui-action-tabset').removeClass('tabset-open').removeClass('tabset-open-last'); + if($(activePanel).length > 0){ + if($(activeTab).hasClass("last")){ + $(activePanel).attr("style","left : auto; right: 0px"); + $(activePanel).parent().addClass('tabset-open-last');//last needs to be styled differently when open + }else{ + $(activePanel).attr("style","left: "+activeTab.position().left+"px"); + if($(activeTab).hasClass("first")){ + $(activePanel).attr("style","left: 0px"); + $(activePanel).parent().addClass('tabset-open'); + }else{ + $(activePanel).attr("style","left: "+activeTab.position().left+"px"); + } + } + } + + } + }); + } + }else if(this.parents('.south')){ + this.tabs({ + beforeActivate:function(event, ui){ + var activePanel = ui.newPanel; + var activeTab = ui.newTab; + if($(activePanel).length > 0){ + $(activePanel).attr("style","left: "+activeTab.position().left+"px"); + } + } + }); + } + //Check if tabs should open upwards, and adjust + this.riseUp(); + }, onadd: function() { // Can't name redraw() as it clashes with other CMS entwine classes this.redrawTabs(); @@ -13,9 +87,49 @@ if(this.data('uiTabs')) this.tabs('destroy'); this._super(); }, + riseUp: function(){ + /* Function checks to see if a tab should be opened upwards + (based on space concerns. If true, the rise-up class is applied + and the position is calculated and applied to the element */ + var elHeight = $(this).find('.ui-tabs-panel').outerHeight(); + var trigger = $(this).find('.ui-tabs-nav').outerHeight(); + var endOfWindow = ($(window).height() + $(document).scrollTop()) - trigger; + var elPos = $(this).find('.ui-tabs-nav').offset().top; + if(elPos + elHeight >= endOfWindow && elPos - elHeight > 0){ + this.addClass('rise-up'); + + /* Apply position to tab */ + this.tabs({ + activate:function(event, ui){ + var activePanel = ui.newPanel; + var activeTab = ui.newTab; + if(activeTab.position()!=null){ + var top = -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"); + + $(activePanel).attr("style", style+"top: "+top+"px;"); + } + } + }); + + }else{ + this.removeClass('rise-up'); + } + return false; + }, redrawTabs: function() { this.rewriteHashlinks(); this.tabs(); + + //Apply special behaviour to action tabs: closed by default, and collapsible + if(this.hasClass('ss-ui-action-tabset')){ + this.actionTabs(); + } }, /** diff --git a/scss/GridField.scss b/scss/GridField.scss index 73423e558..25d9995e4 100644 --- a/scss/GridField.scss +++ b/scss/GridField.scss @@ -39,14 +39,13 @@ $gf_grid_x: 16px; .cms { .ss-gridfield { & > div { - margin-bottom: $gf_grid_y*3; &.addNewGridFieldButton{ margin-bottom: 0; .action { - margin-bottom: $gf_grid_y; - } + margin-bottom:$gf_grid_y; } } + } &[data-selectable] { tr.ui-selected, tr.ui-selecting { @@ -66,9 +65,6 @@ $gf_grid_x: 16px; span.btn-icon-download-csv { height:17px; //exact height of icon } - .ui-button-text { - padding-left:26px; //to accomodate wider export icon - } } .right { float:right; @@ -95,8 +91,8 @@ $gf_grid_x: 16px; .ss-gridfield-buttonrow { font-size: $gf_grid_y*1.2; + } } - } .ss-gridfield { .grid-levelup { @@ -120,7 +116,7 @@ $gf_grid_x: 16px; margin-bottom: $gf_grid_y; @include inline-block(); } - } + } table.ss-gridfield-table { display: table; @include box-shadow-none; diff --git a/scss/UploadField.scss b/scss/UploadField.scss index d2474504e..cfbe8ffda 100644 --- a/scss/UploadField.scss +++ b/scss/UploadField.scss @@ -22,7 +22,7 @@ .middleColumn { // TODO .middleColumn styling should probably be theme specific (eg cms ui will look different than blackcandy) // so we should move this style into the cms and black candy files - width: 526px; + width: 510px; padding: 0; background: #fff; border: 1px solid lighten($color-medium-separator, 20%);