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

API Add action tabsets as a interface idiom.

Browse Source 
Introduces the concept of action tabsets - usage of TabSet and Tabs
in between the action buttons to allow richer set of capabilities that
can be offered to the user.

Goes along with c8d0cdec99c95dbed3b58ebcc098cc9d22c58206 that implements
a change to the CMS actions.
This commit is contained in:
Mateusz Uzdowski 2012-11-22 10:01:02 +13:00 committed by Ingo Schommer
parent 236e335a0a
commit fe08236f21
30 changed files with 926 additions and 280 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

227
admin/css/screen.css
View File

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

BIN
admin/images/btn-icon-s37c6548b54.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 21 KiB

BIN
admin/images/btn-icon-s97372285ea.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

BIN
admin/images/btn-icon/disk.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 620 B

BIN
admin/images/link_arrows.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 342 B

BIN
admin/images/sprites-32x32-se93fc83bf9.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 18 KiB

BIN
admin/images/sprites-32x32-sf6890c994e.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
admin/images/sprites-32x32/arrow_down_darker.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 155 B

BIN
admin/images/sprites-32x32/arrow_down_lighter.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 155 B

BIN
admin/images/sprites-32x32/arrow_up_darker.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 156 B

BIN
admin/images/sprites-32x32/arrow_up_lighter.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 153 B

3
admin/javascript/LeftAndMain.Content.js
View File

@ -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() {

12
admin/javascript/LeftAndMain.EditForm.js
View File

@ -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();

24
admin/javascript/LeftAndMain.js
View File

@ -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();

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

@ -83,17 +83,17 @@
}
// Create missing elements.
if (this.options.alternate.text) {
this.buttonElement.append(
"<span class='ui-button-text-alternate ui-button-text'>" + this.options.alternate.text + "</span>"
);
}
if (this.options.alternate.icon) {
this.buttonElement.append(
"<span class='ui-button-icon-alternate ui-button-icon-primary ui-icon btn-icon-"
+ this.options.alternate.icon + "'></span>"
);
}
if (this.options.alternate.text) {
this.buttonElement.append(
"<span class='ui-button-text-alternate ui-button-text'>" + this.options.alternate.text + "</span>"
);
}
this._refreshAlternate();
},

428
admin/scss/_actionTabs.scss Normal file
View File

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

51
admin/scss/_forms.scss
View File

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

38
admin/scss/_menu.scss
View File

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

72
admin/scss/_mixins.scss
View File

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

23
admin/scss/_style.scss
View File

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

6
admin/scss/_uitheme.scss
View File

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

116
admin/scss/_uitheme.scss.orig
View File

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

1
admin/scss/screen.scss
View File

@ -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";

3
css/AssetUploadField.css
View File

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

5
css/GridField.css
View File

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

5
css/UploadField.css
View File

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

54
docs/en/howto/extend-cms-interface.md
View File

@ -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 %>
</ul>
## 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'));
<div class="hint" markdown='1'>
Empty tabs will be automatically removed from the `FieldList` to prevent clutter.
</div>
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)

114
javascript/TabSet.js
View File

@ -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();
}
},
/**

12
scss/GridField.scss
View File

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

2
scss/UploadField.scss
View File

@ -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%);