Permalink
Browse files

API Add action tabsets as a interface idiom.

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.
  • Loading branch information...
1 parent 236e335 commit fe08236f2103b2b05ac27f18309de3e69010809b @mateusz mateusz committed with chillu Nov 21, 2012
View
227 admin/css/screen.css
@@ -32,9 +32,12 @@ If more variables exist in the future, consider creating a variables file.*/
/** ----------------------------------------------- Grid Units (px) We have a vertical rhythm that the grid is based off both x (=horizontal) and y (=vertical). All internal padding and margins are scaled to this and accounting for paragraphs ------------------------------------------------ */
/** ----------------------------------------------- Application Logo (CMS Logo) Must be 24px x 24px ------------------------------------------------ */
/** ----------------------------- Custom mixins ------------------------------ */
+/*Mixin used to generate slightly smaller text and forms
+Used in side panels and action tabs
+*/
/** ----------------------------- Sprite images ----------------------------- */
/** Helper SCSS file for generating sprites for the interface. */
-.btn-icon-sprite, .ui-state-default .btn-icon-accept, .ui-widget-content .btn-icon-accept, .ui-state-default .btn-icon-accept_disabled, .ui-widget-content .btn-icon-accept_disabled, .ui-state-default .btn-icon-add, .ui-widget-content .btn-icon-add, .ui-state-default .btn-icon-addMedia, .ui-widget-content .btn-icon-addMedia, .ui-state-default .btn-icon-add_disabled, .ui-widget-content .btn-icon-add_disabled, .ui-state-default .btn-icon-addpage, .ui-widget-content .btn-icon-addpage, .ui-state-default .btn-icon-addpage_disabled, .ui-widget-content .btn-icon-addpage_disabled, .ui-state-default .btn-icon-arrow-circle-135-left, .ui-widget-content .btn-icon-arrow-circle-135-left, .ui-state-default .btn-icon-arrow-circle-double, .ui-widget-content .btn-icon-arrow-circle-double, .ui-state-default .btn-icon-back, .ui-widget-content .btn-icon-back, .ui-state-default .btn-icon-back_disabled, .ui-widget-content .btn-icon-back_disabled, .ui-state-default .btn-icon-chain--arrow, .ui-widget-content .btn-icon-chain--arrow, .ui-state-default .btn-icon-chain--exclamation, .ui-widget-content .btn-icon-chain--exclamation, .ui-state-default .btn-icon-chain--minus, .ui-widget-content .btn-icon-chain--minus, .ui-state-default .btn-icon-chain--pencil, .ui-widget-content .btn-icon-chain--pencil, .ui-state-default .btn-icon-chain--plus, .ui-widget-content .btn-icon-chain--plus, .ui-state-default .btn-icon-chain-small, .ui-widget-content .btn-icon-chain-small, .ui-state-default .btn-icon-chain-unchain, .ui-widget-content .btn-icon-chain-unchain, .ui-state-default .btn-icon-chain, .ui-widget-content .btn-icon-chain, .ui-state-default .btn-icon-cross-circle, .ui-widget-content .btn-icon-cross-circle, .ui-state-default .btn-icon-cross-circle_disabled, .ui-widget-content .btn-icon-cross-circle_disabled, .ui-state-default .btn-icon-cross, .ui-widget-content .btn-icon-cross, .ui-state-default .btn-icon-decline, .ui-widget-content .btn-icon-decline, .ui-state-default .btn-icon-decline_disabled, .ui-widget-content .btn-icon-decline_disabled, .ui-state-default .btn-icon-delete, .ui-widget-content .btn-icon-delete, .ui-state-default .btn-icon-deleteLight, .ui-widget-content .btn-icon-deleteLight, .ui-state-default .btn-icon-document--pencil, .ui-widget-content .btn-icon-document--pencil, .ui-state-default .btn-icon-download-csv, .ui-widget-content .btn-icon-download-csv, .ui-state-default .btn-icon-drive-upload, .ui-widget-content .btn-icon-drive-upload, .ui-state-default .btn-icon-drive-upload_disabled, .ui-widget-content .btn-icon-drive-upload_disabled, .ui-state-default .btn-icon-grid_print, .ui-widget-content .btn-icon-grid_print, .ui-state-default .btn-icon-magnifier, .ui-widget-content .btn-icon-magnifier, .ui-state-default .btn-icon-minus-circle, .ui-widget-content .btn-icon-minus-circle, .ui-state-default .btn-icon-minus-circle_disabled, .ui-widget-content .btn-icon-minus-circle_disabled, .ui-state-default .btn-icon-navigation, .ui-widget-content .btn-icon-navigation, .ui-state-default .btn-icon-navigation_disabled, .ui-widget-content .btn-icon-navigation_disabled, .ui-state-default .btn-icon-network-cloud, .ui-widget-content .btn-icon-network-cloud, .ui-state-default .btn-icon-network-cloud_disabled, .ui-widget-content .btn-icon-network-cloud_disabled, .ui-state-default .btn-icon-pencil, .ui-widget-content .btn-icon-pencil, .ui-state-default .btn-icon-pencil_disabled, .ui-widget-content .btn-icon-pencil_disabled, .ui-state-default .btn-icon-plug-disconnect-prohibition, .ui-widget-content .btn-icon-plug-disconnect-prohibition, .ui-state-default .btn-icon-plug-disconnect-prohibition_disabled, .ui-widget-content .btn-icon-plug-disconnect-prohibition_disabled, .ui-state-default .btn-icon-preview, .ui-widget-content .btn-icon-preview, .ui-state-default .btn-icon-preview_disabled, .ui-widget-content .btn-icon-preview_disabled, .ui-state-default .btn-icon-settings, .ui-widget-content .btn-icon-settings, .ui-state-default .btn-icon-settings_disabled, .ui-widget-content .btn-icon-settings_disabled, .ui-state-default .btn-icon-unpublish, .ui-widget-content .btn-icon-unpublish, .ui-state-default .btn-icon-unpublish_disabled, .ui-widget-content .btn-icon-unpublish_disabled { background: url('../images/btn-icon-s37c6548b54.png') no-repeat; }
+.btn-icon-sprite, .ui-state-default .btn-icon-accept, .ui-widget-content .btn-icon-accept, .ui-state-default .btn-icon-accept_disabled, .ui-widget-content .btn-icon-accept_disabled, .ui-state-default .btn-icon-add, .ui-widget-content .btn-icon-add, .ui-state-default .btn-icon-addMedia, .ui-widget-content .btn-icon-addMedia, .ui-state-default .btn-icon-add_disabled, .ui-widget-content .btn-icon-add_disabled, .ui-state-default .btn-icon-addpage, .ui-widget-content .btn-icon-addpage, .ui-state-default .btn-icon-addpage_disabled, .ui-widget-content .btn-icon-addpage_disabled, .ui-state-default .btn-icon-arrow-circle-135-left, .ui-widget-content .btn-icon-arrow-circle-135-left, .ui-state-default .btn-icon-arrow-circle-double, .ui-widget-content .btn-icon-arrow-circle-double, .ui-state-default .btn-icon-back, .ui-widget-content .btn-icon-back, .ui-state-default .btn-icon-back_disabled, .ui-widget-content .btn-icon-back_disabled, .ui-state-default .btn-icon-chain--arrow, .ui-widget-content .btn-icon-chain--arrow, .ui-state-default .btn-icon-chain--exclamation, .ui-widget-content .btn-icon-chain--exclamation, .ui-state-default .btn-icon-chain--minus, .ui-widget-content .btn-icon-chain--minus, .ui-state-default .btn-icon-chain--pencil, .ui-widget-content .btn-icon-chain--pencil, .ui-state-default .btn-icon-chain--plus, .ui-widget-content .btn-icon-chain--plus, .ui-state-default .btn-icon-chain-small, .ui-widget-content .btn-icon-chain-small, .ui-state-default .btn-icon-chain-unchain, .ui-widget-content .btn-icon-chain-unchain, .ui-state-default .btn-icon-chain, .ui-widget-content .btn-icon-chain, .ui-state-default .btn-icon-cross-circle, .ui-widget-content .btn-icon-cross-circle, .ui-state-default .btn-icon-cross-circle_disabled, .ui-widget-content .btn-icon-cross-circle_disabled, .ui-state-default .btn-icon-cross, .ui-widget-content .btn-icon-cross, .ui-state-default .btn-icon-decline, .ui-widget-content .btn-icon-decline, .ui-state-default .btn-icon-decline_disabled, .ui-widget-content .btn-icon-decline_disabled, .ui-state-default .btn-icon-delete, .ui-widget-content .btn-icon-delete, .ui-state-default .btn-icon-deleteLight, .ui-widget-content .btn-icon-deleteLight, .ui-state-default .btn-icon-disk, .ui-widget-content .btn-icon-disk, .ui-state-default .btn-icon-document--pencil, .ui-widget-content .btn-icon-document--pencil, .ui-state-default .btn-icon-download-csv, .ui-widget-content .btn-icon-download-csv, .ui-state-default .btn-icon-drive-upload, .ui-widget-content .btn-icon-drive-upload, .ui-state-default .btn-icon-drive-upload_disabled, .ui-widget-content .btn-icon-drive-upload_disabled, .ui-state-default .btn-icon-grid_print, .ui-widget-content .btn-icon-grid_print, .ui-state-default .btn-icon-magnifier, .ui-widget-content .btn-icon-magnifier, .ui-state-default .btn-icon-minus-circle, .ui-widget-content .btn-icon-minus-circle, .ui-state-default .btn-icon-minus-circle_disabled, .ui-widget-content .btn-icon-minus-circle_disabled, .ui-state-default .btn-icon-navigation, .ui-widget-content .btn-icon-navigation, .ui-state-default .btn-icon-navigation_disabled, .ui-widget-content .btn-icon-navigation_disabled, .ui-state-default .btn-icon-network-cloud, .ui-widget-content .btn-icon-network-cloud, .ui-state-default .btn-icon-network-cloud_disabled, .ui-widget-content .btn-icon-network-cloud_disabled, .ui-state-default .btn-icon-pencil, .ui-widget-content .btn-icon-pencil, .ui-state-default .btn-icon-pencil_disabled, .ui-widget-content .btn-icon-pencil_disabled, .ui-state-default .btn-icon-plug-disconnect-prohibition, .ui-widget-content .btn-icon-plug-disconnect-prohibition, .ui-state-default .btn-icon-plug-disconnect-prohibition_disabled, .ui-widget-content .btn-icon-plug-disconnect-prohibition_disabled, .ui-state-default .btn-icon-preview, .ui-widget-content .btn-icon-preview, .ui-state-default .btn-icon-preview_disabled, .ui-widget-content .btn-icon-preview_disabled, .ui-state-default .btn-icon-settings, .ui-widget-content .btn-icon-settings, .ui-state-default .btn-icon-settings_disabled, .ui-widget-content .btn-icon-settings_disabled, .ui-state-default .btn-icon-unpublish, .ui-widget-content .btn-icon-unpublish, .ui-state-default .btn-icon-unpublish_disabled, .ui-widget-content .btn-icon-unpublish_disabled { background: url('../images/btn-icon-s97372285ea.png') no-repeat; }
.ui-state-default .btn-icon-accept, .ui-widget-content .btn-icon-accept { background-position: 0 -96px; }
.ui-state-default .btn-icon-accept_disabled, .ui-widget-content .btn-icon-accept_disabled { background-position: 0 -80px; }
@@ -47,21 +50,22 @@ 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; }
.ui-state-default .btn-icon-decline, .ui-widget-content .btn-icon-decline { background-position: 0 -128px; }
.ui-state-default .btn-icon-decline_disabled, .ui-widget-content .btn-icon-decline_disabled { background-position: 0 -192px; }
.ui-state-default .btn-icon-delete, .ui-widget-content .btn-icon-delete { background-position: 0 -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; }
View
BIN admin/images/btn-icon-s37c6548b54.png
Deleted file not rendered
View
BIN admin/images/btn-icon-s97372285ea.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN admin/images/btn-icon/disk.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN admin/images/link_arrows.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN admin/images/sprites-32x32-se93fc83bf9.png
Deleted file not rendered
View
BIN admin/images/sprites-32x32-sf6890c994e.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN admin/images/sprites-32x32/arrow_down_darker.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN admin/images/sprites-32x32/arrow_down_lighter.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN admin/images/sprites-32x32/arrow_up_darker.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN admin/images/sprites-32x32/arrow_up_lighter.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
3 admin/javascript/LeftAndMain.Content.js
@@ -15,9 +15,8 @@
// Force initialization of certain UI elements to avoid layout glitches
this.find('.cms-tabset').redrawTabs();
- this.find('.ss-ui-tabs-nav').redraw();
-
this._super();
+
},
redraw: function() {
View
12 admin/javascript/LeftAndMain.EditForm.js
@@ -205,14 +205,18 @@
});
/**
- * Hide tabs when only one is available
+ * Hide tabs when only one is available.
+ * Special case is actiontabs - tabs between buttons, where we want to have
+ * extra options hidden within a tab (even if only one) by default.
*/
$('.cms-edit-form .ss-tabset').entwine({
onmatch: function() {
- var tabs = this.find("> ul:first");
+ if (!this.hasClass('ss-ui-action-tabset')) {
+ var tabs = this.find("> ul:first");
- if(tabs.children("li").length == 1) {
- tabs.hide().parent().addClass("ss-tabset-tabshidden");
+ if(tabs.children("li").length == 1) {
+ tabs.hide().parent().addClass("ss-tabset-tabshidden");
+ }
}
this._super();
View
24 admin/javascript/LeftAndMain.js
@@ -440,7 +440,7 @@ jQuery.noConflict();
* Can be hooked into an ajax 'success' callback.
*/
handleAjaxResponse: function(data, status, xhr) {
- var self = this, url, activeTabs, guessFragment;
+ var self = this, url, selectedTabs, guessFragment;
// Pseudo-redirects via X-ControllerURL might return empty data, in which
// case we'll ignore the response
@@ -571,19 +571,19 @@ jQuery.noConflict();
saveTabState: function() {
if(typeof(window.sessionStorage)=="undefined" || window.sessionStorage == null) return;
- var activeTabs = [], url = this._tabStateUrl();
+ var selectedTabs = [], url = this._tabStateUrl();
this.find('.cms-tabset,.ss-tabset').each(function(i, el) {
var id = $(el).attr('id');
if(!id) return; // we need a unique reference
if(!$(el).data('tabs')) return; // don't act on uninit'ed controls
if($(el).data('ignoreTabState')) return; // allow opt-out
- activeTabs.push({id:id, active:$(el).tabs('option', 'active')});
+ selectedTabs.push({id:id, selected:$(el).tabs('option', 'selected')});
});
- if(activeTabs) {
+ if(selectedTabs) {
var tabsUrl = 'tabs-' + url;
try {
- window.sessionStorage.setItem(tabsUrl, JSON.stringify(activeTabs));
+ window.sessionStorage.setItem(tabsUrl, JSON.stringify(selectedTabs));
} catch(err) {
if (err.code === DOMException.QUOTA_EXCEEDED_ERR && window.sessionStorage.length === 0) {
// If this fails we ignore the error as the only issue is that it
@@ -606,12 +606,12 @@ jQuery.noConflict();
var self = this, url = this._tabStateUrl(),
data = window.sessionStorage.getItem('tabs-' + url),
- activeTabs = data ? JSON.parse(data) : false;
- if(activeTabs) {
- $.each(activeTabs, function(i, activeTab) {
- var el = self.find('#' + activeTab.id);
+ selectedTabs = data ? JSON.parse(data) : false;
+ if(selectedTabs) {
+ $.each(selectedTabs, function(i, selectedTab) {
+ var el = self.find('#' + selectedTab.id);
if(!el.data('tabs')) return; // don't act on uninit'ed controls
- el.tabs('option', 'active', activeTab.active);
+ el.tabs('select', selectedTab.selected);
});
}
},
@@ -1012,7 +1012,7 @@ jQuery.noConflict();
},
redrawTabs: function() {
this.rewriteHashlinks();
-
+
var id = this.attr('id'), activeTab = this.find('ul:first .ui-tabs-active');
if(!this.data('uiTabs')) this.tabs({
@@ -1025,7 +1025,7 @@ jQuery.noConflict();
activate: function(e, ui) {
// Usability: Hide actions for "readonly" tabs (which don't contain any editable fields)
var actions = $(this).closest('form').find('.Actions');
- if($(ui.tab).closest('li').hasClass('readonly')) {
+ if($(ui.newTab).closest('li').hasClass('readonly')) {
actions.fadeOut();
} else {
actions.show();
View
10 admin/javascript/ssui.core.js
@@ -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();
},
View
428 admin/scss/_actionTabs.scss
@@ -0,0 +1,428 @@
+/********************************************
+
+Defines the styles for the action tabset, found on the site tree,
+and as a single (more options) tab in page view. This is a special
+use case of tabs, so the default tab styling should not apply
+
+
+**********************************************/
+
+
+$border: 1px solid darken(#D9D9D9, 15%);
+
+.cms {
+ .ss-ui-action-tabset{
+ position:relative;
+ float:left;
+
+ /*Style the "tabs" navigation for multiple tabs*/
+ ul.ui-tabs-nav{
+ @include clearfix;
+ padding:0;
+ overflow:visible;
+ float:left;
+ height: 28px;
+ border:$border;
+ @include border-radius(3px);
+ &:focus,&:active{
+ outline:none;
+ box-shadow:none;
+ -webkit-box-shadow: none;
+ }
+ li{
+ &:focus, &:active{
+ outline:none;
+ box-shadow:none;
+ -webkit-box-shadow: none;
+ }
+ width: 110px;
+ overflow:visible;
+ background:#eaeaea;
+ @include background-image(linear-gradient(top, #f8f8f8, #D9D9D9));
+ border-radius: none;
+ @include border-radius(0);
+ border: none;
+ border-right:1px solid #eee;
+ border-left: $border;
+ margin:0;
+ &.ui-state-active{
+ background:#f8f8f8;
+ border-bottom:none !important; //jquery-ui style has important on it
+ @include border-bottom-left-radius(0px);
+ @include border-bottom-right-radius(0px);
+ a {
+ @include border-bottom-left-radius(0px);
+ @include border-bottom-right-radius(0px);
+ &:focus, span:focus,&:active, span:active{
+ outline:none;
+ box-shadow:none;
+ -webkit-box-shadow: none;
+ }
+ }
+ }
+ &.first{
+ @include border-top-left-radius(3px);
+ @include border-bottom-left-radius(3px);
+ border-left:none;
+ }
+ &.last{
+ @include border-top-right-radius(3px);
+ @include border-bottom-right-radius(3px);
+ border-right:none;
+ }
+ a.tab-nav-link{
+ color:$color-text;
+ font-weight:bold;
+ line-height:16px;
+ display:inline-block;
+ padding: 5px 10px;
+ .ui-no-icon {
+ display:inline-block;
+ float:left;
+ padding: 0 2px;
+ width:16px;
+ height:16px;
+ }
+ .title{
+ display:inline-block;
+ line-height: 18px;
+ }
+ &.view-mode-batchactions-wrapper .title {
+ margin-left: 22px;
+ }
+ }
+ }
+ }
+ &.tabset-open {
+ ul.ui-tabs-nav,
+ ul.ui-tabs-nav li.first {
+ @include border-bottom-left-radius(0);
+ }
+ }
+ &.tabset-open-last {
+ ul.ui-tabs-nav li.last {
+ @include border-bottom-right-radius(0);
+ }
+ }
+
+ .batch-check, .ui-icon { /* position a checkbox & icon within a tab */
+ display: inline-block;
+ float:left;
+ margin-left: -2px;
+ padding-right: 6px;
+ }
+ .batch-check {
+ margin: 6px 0px 5px 9px;
+ position: absolute;
+ }
+ &.single{
+ ul.ui-tabs-nav{
+ background:none;
+ border:none;
+ display:inline;
+ padding:0;
+ float:left;
+ li{
+ display:inline;
+ background:none;
+ border:none;
+ padding:0;
+ border-bottom:none !important; //jquery-ui style has important on it
+
+ &:hover, &:focus, &:active{
+ @include box-shadow(none);
+ outline:none;
+ }
+ a{
+ color: $color-text-blue-link;
+ @include text-shadow(#fff 0 1px 1px);
+ padding:0 0 0 10px;
+ line-height:24px;
+
+ &:hover, &:focus, &:active{
+ @include box-shadow(none);
+ outline:none;
+ }
+ &:hover{
+ @include text-shadow(#fff 0 10px 10px);
+ color: darken($color-text-blue-link,8%);
+ &:after{
+ border-bottom: 4px solid darken($color-text-blue-link,8%);
+ }
+ }
+ }
+ }
+ }
+ }
+
+ /* Style the tab panels */
+ .ss-ui-action-tab.ui-tabs-panel{
+ display:block;
+ clear:both;
+ background:#f8f8f8 !important; //Because ie7 doesn't understanding what the 'C' in CSS stands for
+ position:absolute;
+ top:30px;
+ border:$border;
+ border-top:none;
+ width:202px;
+ z-index:1;
+ padding:10px;
+ padding-top:15px;
+ @include tightSpacing;
+ margin:0;
+ float:left;
+ .field label{
+ font-size:12px;
+ }
+ .cms-content-fields{
+ overflow:visible;
+ }
+ .chzn-container-single{
+ width:100% !important;
+ .chzn-single{
+ padding: 0 0 0 5px;
+ float:none;
+ }
+ }
+ .cms-content-actions, .cms-preview-controls{
+ padding:0;
+ height:auto;
+ border:none;
+ @include box-shadow(none);
+
+ }
+ .field{
+ border-bottom:none;
+ @include box-shadow(none);
+ }
+ .cms-edit-form{
+ width:100%;
+ }
+ .CompositeField{
+ margin:0;
+ padding:0;
+ float:none;
+ }
+ .parent-mode{
+ padding-top:0;
+ }
+
+ .treedropdown, .SelectionGroup li.selected div.field{
+ margin:10px 0 0 0;
+ //@include box-shadow(inset 0 1px 0 #fff, 0 1px 1px rgba(0,0,0,0.1));
+ .treedropdownfield-title{
+ position:absolute;
+ z-index:2;
+ padding:5px;
+ }
+ .treedropdownfield-panel{
+ margin-top:11px;
+ }
+ .treedropdownfield-toggle-panel-link{
+ background:none;
+ border-left:none;
+ padding:5px 3px;
+ .ui-icon{
+ float:right;
+ opacity:0.7;
+ }
+ }
+ }
+ #PageType ul{
+ padding:0;
+ li{
+ padding:4px 5px;
+ }
+ }
+ .cms-add-form ul.SelectionGroup{
+ padding-left:0;
+ padding-right:0;
+ overflow:visible;
+ border-bottom:none;
+ }
+ label.extra-details{
+ overflow:hidden;
+ margin-top:10px;
+ display: block;
+ color: lighten($color-text, 35%);
+ font-style:italic;
+ font-weight:normal;
+ font-size:1em;
+ float:left;
+ @include text-shadow(none);
+ &.fill{
+ &:before{
+ color:#fff;
+ content: '?';
+ font-size:12px;
+ @include box-sizing('border-box');
+ padding-left:3px;
+ padding-right:3px;
+ display:block;
+ float:left;
+ @include text-shadow(none);
+ @include border-radius(50px);
+ background-color:lighten($color-text, 45%);
+ width:15px;
+ height:15px;
+ margin-right:5px;
+ margin-bottom:5px;
+ }
+ }
+ }
+ &.first {
+ left: 0;
+ width: 203px;
+ }
+ .ui-icon {
+ padding-right: 0;
+ }
+ .tab-nav-link, .ss-ui-button {
+ font-size: 12px;
+ }
+ }
+ .last .ss-ui-action-tab{
+ right:-1px;
+ left:auto;
+ }
+ }
+
+ /**********************
+ Styles for pop-up tabs in bottom panel
+ ************************/
+ .south .Actions{
+ overflow:visible; //put this somewhere else/more generic
+
+ .rise-up.ss-ui-action-tabset{
+ ul.ui-tabs-nav {
+ margin: 0;
+ li {
+ a.ui-tabs-anchor {
+ font-weight: normal;
+ font-size: 13px;
+ line-height: 24px;
+ padding-right: 25px;
+ &:after {
+ background: sprite($sprites32, arrow_down_lighter) no-repeat;
+ width: 16px;
+ height: 16px;
+ content: "";
+ display: inline-block;
+ margin-left: 6px;
+ border-bottom: 0;
+
+ }
+ &:hover:after {
+ border-bottom: 0;
+ background: sprite($sprites32, arrow_down_darker) no-repeat;
+ }
+
+ }
+ &.ui-state-active a.ui-tabs-anchor {
+ &:after {
+ background: sprite($sprites32, arrow_up_lighter) no-repeat;
+ }
+ &:hover:after {
+ background: sprite($sprites32, arrow_up_darker) no-repeat;
+ }
+ }
+ }
+ }
+ .ui-tabs-panel{
+ @include clearfix;
+ @include border-top-radius(3px);
+ @include border-bottom-radius(0);
+ @include tightSpacing;
+ background-color: $tab-panel-texture-color;
+ border:1px solid #ccc;
+ border-bottom:1px solid $tab-panel-texture-color;
+ clear:both;
+ display:block;
+ position:absolute;
+ top:-204px;
+ width:190px; /* same width as buttons within panel */
+ z-index:1;
+ padding:10px;
+ margin:0;
+ margin-top:1px;
+ .chzn-container-single .chzn-single{
+ padding: 0 0 0 5px;
+ float:none;
+ }
+ @extend .button-no-style;
+ button.ss-ui-button{
+ &:hover, &:focus, &:active{
+ /*text-decoration:underline;*/
+ background-color: darken($tab-panel-texture-color,4%);
+ @include box-shadow(none);
+ outline:none;
+ }
+
+ }
+ .cms-sitetree-information {
+ border-bottom: 1px solid $color-light-separator;
+ margin-bottom: 8px;
+ p.meta-info {
+ color: #999;
+ font-size: 11px;
+ line-height: 16px;
+ margin-bottom: 8px;
+ }
+ }
+ }
+ .last .ui-tabs-panel.ss-ui-action-tab{
+ right:-1px;
+ left:auto;
+ }
+ }
+ }
+
+
+ /* Styles for the cms-actions in tree view, to use more limited space.
+ Title hidden in tree view, until hover/active state added. Active is applied
+ to the first tab within the template, so there should always be one title
+ visible. Added and removed with js in TabSet.js */
+ .cms-tree-view-sidebar{
+ min-width: 176px; /* for when the scrollbar is present & find dropdown open */
+ .ss-ui-action-tabset.ss-tabset.multi{
+ ul.ui-tabs-nav{
+ >li{
+ width: auto;
+ a.tab-nav-link{
+ width:30px;
+ overflow:hidden;
+ @include box-sizing(border-box);
+ padding-right:0;
+ @include duration(0.5s);
+ &.active{
+ width:110px;
+ @include duration(0.5s);
+ }
+ }
+ }
+ }
+ &.tabset-open, &.tabset-open-last {
+ ul.ui-tabs-nav,
+ ul.ui-tabs-nav li.first,
+ ul.ui-tabs-nav li.last {
+ @include border-bottom-right-radius(0);
+ @include border-bottom-left-radius(0);
+ }
+ }
+ }
+ .ui-tabs .ui-tabs-panel.ss-ui-action-tab {
+ width:162px;
+ padding:10px 6px;
+ .field {
+ max-width:160px;
+ }
+ .ui-icon {
+ padding-right: 0;
+ }
+ }
+ .last .ui-tabs-panel.ss-ui-action-tab {
+ right:0;
+ left:auto;
+ }
+ }
+}
View
51 admin/scss/_forms.scss
@@ -285,6 +285,36 @@ form.small .field, .field.small {
* ---------------------------------------------------- */
.cms {
+ .button-no-style{
+ button{
+ background: none;
+ border: none;
+ display: block;
+ margin:0;
+ outline:none;
+ color: $color-text-blue-link;
+ font-weight:normal;
+ width: 210px; /* same as width of surrounding panel */
+ text-align: left;
+ @include border-radius(0);
+ text-shadow: none;
+ margin-left:-10px;
+
+ &.ss-ui-action-destructive{
+ color: darken($color-error,25%);
+ }
+ span{
+ padding-left:0;
+ padding-right:0;
+ }
+ &:hover, &:focus, &:active{
+ outline:none;
+ background:none;
+ @include box-shadow(none);
+ border:none;
+ }
+ }
+ }
.Actions, .cms-actions-row {
> * {
@@ -300,7 +330,7 @@ form.small .field, .field.small {
.Actions {
min-height: 30px;
- overflow: visible;
+ overflow: auto;
padding: $grid-x $grid-y * 1.5;
}
.south .Actions, .ui-tabs-panel .Actions, .ui-tabs-panel iframe .Actions {
@@ -328,7 +358,9 @@ form.small .field, .field.small {
}
.ss-ui-button {
+ font-size: 12px;
margin-top:0px;
+ padding: 5px 10px;
font-weight: bold;
text-decoration: none;
line-height: $grid-y * 2;
@@ -339,6 +371,22 @@ form.small .field, .field.small {
background-color: $color-button-generic;
white-space: nowrap;
+ .ui-icon, .ui-button-text {
+ display: inline-block;
+ line-height: $grid-x*2;
+ padding: 0;
+ }
+ .ui-icon {
+ width: 16px;
+ padding: 0 2px;
+ position: relative;
+ left: -2px;
+ margin-top: 0;
+ top: 0;
+ height: 16px;
+ float: left;
+ }
+
@include background(
linear-gradient(color-stops(
lighten($color-button-generic, 10%),
@@ -412,7 +460,6 @@ form.small .field, .field.small {
&.ss-ui-button-small {
.ui-button-text {
- padding: ($grid-y/4) ($grid-x/4);
font-size: $font-base-size - 2;
}
}
View
38 admin/scss/_menu.scss
@@ -319,44 +319,6 @@
line-height: 32px;
}
}
- /* // To specific - was overriding collapsed-flyout styles
-#Menu-CMSPagesController {
- a {
- background-image:none;
- font-size: 11px;
- padding: 0 10px 0 40px;
- height: 32px;
- line-height: 32px;
- }
- }
- #Menu-CMSPageAddController {
- a {
- background-image:none;
- font-size: 11px;
- padding: 0 10px 0 40px;
- height: 32px;
- line-height: 32px;
- }
- }
- #Menu-AssetAdmin {
- a {
- background-image:none;
- font-size: 11px;
- padding: 0 10px 0 40px;
- height: 32px;
- line-height: 32px;
- }
- }
- #Menu-CMSFileAddController {
- a {
- background-image:none;
- font-size: 11px;
- padding: 0 10px 0 40px;
- height: 32px;
- line-height: 32px;
- }
- }
-*/
}
/* Style applied to the menu flyout only when the collapsed setting */
View
72 admin/scss/_mixins.scss
@@ -108,7 +108,79 @@
transition: $properties;
}
+@mixin duration($time, $webkit:true){
+ @if($webkit){
+ -webkit-transition-duration: $time;
+ }
+ -moz-transition-duration: $time;
+ -o-transition-duration: $time;
+ transition-duration: $time;
+}
+/*Mixin used to generate slightly smaller text and forms
+Used in side panels and action tabs
+*/
+@mixin tightSpacing{
+ h3,h4,h5 {
+ font-weight: bold;
+ line-height: $grid-y * 2;
+ }
+ h3 {
+ font-size: $font-base-size + 1;
+ }
+ h4 {
+ font-size: $font-base-size;
+ margin:5px 0;
+ }
+
+ .ui-widget-content {
+ background: none;
+ }
+
+ .field {
+ /*
+ * Fields are more compressed in the sidebar compared to the
+ * main content editing window so the below alters the internal
+ * spacing of the fields so we can move that spacing to between
+ * the form fields rather than padding
+ */
+ label {
+ float: none;
+ width: auto;
+ font-size: 11px;
+ padding: 0 $grid-x 4px 0;
+ }
+
+ .middleColumn {
+ margin: 0;
+ }
+
+ input.text,
+ select,
+ textarea {
+ padding: 5px;
+ font-size: 11px;
+ }
+
+ &.checkbox {
+ padding: 0 8px 0;
+
+ input {
+ margin: 2px 0;
+ }
+ }
+ }
+ .fieldgroup {
+ .fieldgroup-field {
+ padding: 0;
+
+ .field {
+ margin: 0;
+ padding: 0;
+ }
+ }
+ }
+}
View
19 admin/scss/_style.scss
@@ -54,15 +54,17 @@ body.cms {
* Helpers
* -------------------------------------------- */
+.hide {
+ display: none;
+}
+
.cms-helper-hide-actions {
.Actions {
- display: none;
+ @extend .hide;
}
}
-.hide {
- display: none;
-}
+
/** --------------------------------------------
* 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
- }
}
}
View
6 admin/scss/_uitheme.scss
@@ -45,16 +45,16 @@
z-index: 100000;
}
- & a.ui-state-hover {
+ a.ui-state-hover {
border-color: transparent;
background: transparent;
- & .ui-icon-closethick {
+ .ui-icon-closethick {
background: sprite($sprites32, dialog-close-over) no-repeat;
}
}
- & .ui-icon-closethick {
+ .ui-icon-closethick {
background: sprite($sprites32, dialog-close) no-repeat;
width: 30px;
height: 30px;
View
116 admin/scss/_uitheme.scss.orig
@@ -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;
- }
-}
View
1 admin/scss/screen.scss
@@ -55,5 +55,6 @@ $experimental-support-for-svg: true;
@import "tree.scss";
@import "menu.scss";
@import "preview.scss";
+@import "actionTabs.scss";
@import "ModelAdmin.scss";
@import "SecurityAdmin.scss";
View
3 css/AssetUploadField.css
@@ -7,6 +7,9 @@
/** ----------------------------------------------- Typography. ------------------------------------------------ */
/** ----------------------------------------------- Grid Units (px) We have a vertical rhythm that the grid is based off both x (=horizontal) and y (=vertical). All internal padding and margins are scaled to this and accounting for paragraphs ------------------------------------------------ */
/** ----------------------------------------------- Application Logo (CMS Logo) Must be 24px x 24px ------------------------------------------------ */
+/*Mixin used to generate slightly smaller text and forms
+Used in side panels and action tabs
+*/
.ss-uploadfield-view-allowed-extensions { padding-top: 20px; clear: both; max-width: 750px; display: block; }
#AssetUploadField { border-bottom: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; padding: 12px; }
View
5 css/GridField.css
@@ -8,14 +8,15 @@
/** ----------------------------------------------- Typography. ------------------------------------------------ */
/** ----------------------------------------------- Grid Units (px) We have a vertical rhythm that the grid is based off both x (=horizontal) and y (=vertical). All internal padding and margins are scaled to this and accounting for paragraphs ------------------------------------------------ */
/** ----------------------------------------------- Application Logo (CMS Logo) Must be 24px x 24px ------------------------------------------------ */
-.cms .ss-gridfield > div { margin-bottom: 36px; }
+/*Mixin used to generate slightly smaller text and forms
+Used in side panels and action tabs
+*/
.cms .ss-gridfield > div.addNewGridFieldButton { margin-bottom: 0; }
.cms .ss-gridfield > div.addNewGridFieldButton .action { margin-bottom: 12px; }
.cms .ss-gridfield[data-selectable] tr.ui-selected, .cms .ss-gridfield[data-selectable] tr.ui-selecting { background: #FFFAD6 !important; }
.cms .ss-gridfield[data-selectable] td { cursor: pointer; }
.cms .ss-gridfield span button#action_gridfield_relationfind { display: none; }
.cms .ss-gridfield p button#action_export span.btn-icon-download-csv { height: 17px; }
-.cms .ss-gridfield p button#action_export .ui-button-text { padding-left: 26px; }
.cms .ss-gridfield .right { float: right; }
.cms .ss-gridfield .right > * { float: right; margin-left: 8px; }
.cms .ss-gridfield .right .pagination-records-number { font-size: 1.0em; padding: 6px 3px 6px 0; color: white; text-shadow: 0px -1px 0 rgba(0, 0, 0, 0.2); font-weight: normal; }
View
5 css/UploadField.css
@@ -7,10 +7,13 @@
/** ----------------------------------------------- Typography. ------------------------------------------------ */
/** ----------------------------------------------- Grid Units (px) We have a vertical rhythm that the grid is based off both x (=horizontal) and y (=vertical). All internal padding and margins are scaled to this and accounting for paragraphs ------------------------------------------------ */
/** ----------------------------------------------- Application Logo (CMS Logo) Must be 24px x 24px ------------------------------------------------ */
+/*Mixin used to generate slightly smaller text and forms
+Used in side panels and action tabs
+*/
.ss-uploadfield .clear { clear: both; }
.ss-insert-media .ss-uploadfield { margin-top: 20px; }
.ss-insert-media .ss-uploadfield h4 { float: left; }
-.ss-uploadfield .middleColumn { width: 526px; padding: 0; background: #fff; border: 1px solid #b3b3b3; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #efefef), color-stop(10%, #ffffff), color-stop(90%, #ffffff), color-stop(100%, #efefef)); background-image: -webkit-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -moz-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -o-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); }
+.ss-uploadfield .middleColumn { width: 510px; padding: 0; background: #fff; border: 1px solid #b3b3b3; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #efefef), color-stop(10%, #ffffff), color-stop(90%, #ffffff), color-stop(100%, #efefef)); background-image: -webkit-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -moz-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -o-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); }
.ss-uploadfield .ss-uploadfield-item { margin: 0; padding: 15px; overflow: auto; }
.ss-uploadfield .ss-uploadfield-item .ss-uploadfield-item-preview { height: 60px; line-height: 60px; width: 80px; text-align: center; font-weight: bold; float: left; overflow: hidden; }
.ss-uploadfield .ss-uploadfield-item .ss-uploadfield-item-preview.ss-uploadfield-dropzone { -webkit-box-shadow: gray 0 0 4px 0 inset; -moz-box-shadow: gray 0 0 4px 0 inset; box-shadow: gray 0 0 4px 0 inset; border: 2px dashed gray; background: #d0d3d5; display: none; }
View
54 docs/en/howto/extend-cms-interface.md
@@ -22,8 +22,8 @@ We can use this to create a different base template with `LeftAndMain.ss`
(which corresponds to the `LeftAndMain` PHP controller class).
Copy the template markup of the base implementation at `framework/admin/templates/LeftAndMain.ss` into
-`mysite/templates/LeftAndMain.ss`. It will automatically be picked up by the CMS logic. Add a new section after
-the `$Content` tag:
+`mysite/templates/LeftAndMain.ss`. It will automatically be picked up by the CMS logic. Add a new section after the
+`$Content` tag:
:::ss
...
@@ -125,6 +125,55 @@ and replace it with the following:
<% end_loop %>
</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)
View
114 javascript/TabSet.js
@@ -4,6 +4,80 @@
* Lightweight wrapper around jQuery UI tabs.
*/
$('.ss-tabset').entwine({
+
+ /*Custom functionality for special action tabsets*/
+ actionTabs: function(){
+ this.tabs(
+ 'option',
+ 'collapsible',
+ true
+ ).tabs('option', 'active', false);
+
+ //Apply special behaviour to the cms actions row
+ if(this.hasClass('cms-actions-row')){
+
+ /* If actions panel is within the tree, apply active class
+ to help animate open/close on hover
+ Position must be reset else anyone coming from main sitetree
+ will see broken tabs */
+ var container = this.parent().parent();
+ if($(container).hasClass('cms-tree-view-sidebar')){
+ $('.ui-tabs-nav li').hover(function(){
+ $(this).parent().find('li .active').removeClass('active');
+ $(this).find('a').addClass('active');
+ });
+
+ this.tabs({
+ beforeActivate:function(event, ui){
+ var activePanel = ui.newPanel;
+ $(activePanel).attr("style","left : auto; right: auto");
+ $(this).closest('.ss-ui-action-tabset').removeClass('tabset-open').removeClass('tabset-open-last');
+
+ if($(activePanel).length > 0){
+ $(activePanel).parent().addClass('tabset-open');
+ }
+ }
+ });
+ }else{
+ /* If the tabs are in the full site tree view, do some
+ positioning so tabPanel stays with relevent tab */
+ this.tabs({
+ beforeActivate:function(event, ui){
+ var activePanel = ui.newPanel;
+ var activeTab = ui.newTab;
+ $(this).closest('.ss-ui-action-tabset').removeClass('tabset-open').removeClass('tabset-open-last');
+ if($(activePanel).length > 0){
+ if($(activeTab).hasClass("last")){
+ $(activePanel).attr("style","left : auto; right: 0px");
+ $(activePanel).parent().addClass('tabset-open-last');//last needs to be styled differently when open
+ }else{
+ $(activePanel).attr("style","left: "+activeTab.position().left+"px");
+ if($(activeTab).hasClass("first")){
+ $(activePanel).attr("style","left: 0px");
+ $(activePanel).parent().addClass('tabset-open');
+ }else{
+ $(activePanel).attr("style","left: "+activeTab.position().left+"px");
+ }
+ }
+ }
+
+ }
+ });
+ }
+ }else if(this.parents('.south')){
+ this.tabs({
+ beforeActivate:function(event, ui){
+ var activePanel = ui.newPanel;
+ var activeTab = ui.newTab;
+ if($(activePanel).length > 0){
+ $(activePanel).attr("style","left: "+activeTab.position().left+"px");
+ }
+ }
+ });
+ }
+ //Check if tabs should open upwards, and adjust
+ this.riseUp();
+ },
onadd: function() {
// Can't name redraw() as it clashes with other CMS entwine classes
this.redrawTabs();
@@ -13,9 +87,49 @@
if(this.data('uiTabs')) this.tabs('destroy');
this._super();
},
+ riseUp: function(){
+ /* Function checks to see if a tab should be opened upwards
+ (based on space concerns. If true, the rise-up class is applied
+ and the position is calculated and applied to the element */
+ var elHeight = $(this).find('.ui-tabs-panel').outerHeight();
+ var trigger = $(this).find('.ui-tabs-nav').outerHeight();
+ var endOfWindow = ($(window).height() + $(document).scrollTop()) - trigger;
+ var elPos = $(this).find('.ui-tabs-nav').offset().top;
+ if(elPos + elHeight >= endOfWindow && elPos - elHeight > 0){
+ this.addClass('rise-up');
+
+ /* Apply position to tab */
+ this.tabs({
+ activate:function(event, ui){
+ var activePanel = ui.newPanel;
+ var activeTab = ui.newTab;
+ if(activeTab.position()!=null){
+ var top = -activePanel.outerHeight();
+ var containerSouth = activePanel.parents('.south');
+ if(containerSouth){
+ var padding = activeTab.offset().top-containerSouth.offset().top;
+ top = top-padding;
+ }
+ var style = $(activePanel).attr("style");
+
+ $(activePanel).attr("style", style+"top: "+top+"px;");
+ }
+ }
+ });
+
+ }else{
+ this.removeClass('rise-up');
+ }
+ return false;
+ },
redrawTabs: function() {
this.rewriteHashlinks();
this.tabs();
+
+ //Apply special behaviour to action tabs: closed by default, and collapsible
+ if(this.hasClass('ss-ui-action-tabset')){
+ this.actionTabs();
+ }
},
/**
View
12 scss/GridField.scss
@@ -39,14 +39,13 @@ $gf_grid_x: 16px;
.cms {
.ss-gridfield {
& > div {
- margin-bottom: $gf_grid_y*3;
&.addNewGridFieldButton{
margin-bottom: 0;
.action {
- margin-bottom: $gf_grid_y;
- }
+ margin-bottom:$gf_grid_y;
}
}
+ }
&[data-selectable] {
tr.ui-selected, tr.ui-selecting {
@@ -66,9 +65,6 @@ $gf_grid_x: 16px;
span.btn-icon-download-csv {
height:17px; //exact height of icon
}
- .ui-button-text {
- padding-left:26px; //to accomodate wider export icon
- }
}
.right {
float:right;
@@ -95,8 +91,8 @@ $gf_grid_x: 16px;
.ss-gridfield-buttonrow {
font-size: $gf_grid_y*1.2;
+ }
}
- }
.ss-gridfield {
.grid-levelup {
@@ -120,7 +116,7 @@ $gf_grid_x: 16px;
margin-bottom: $gf_grid_y;
@include inline-block();
}
- }
+ }
table.ss-gridfield-table {
display: table;
@include box-shadow-none;
View
2 scss/UploadField.scss
@@ -22,7 +22,7 @@
.middleColumn {
// TODO .middleColumn styling should probably be theme specific (eg cms ui will look different than blackcandy)
// so we should move this style into the cms and black candy files
- width: 526px;
+ width: 510px;
padding: 0;
background: #fff;
border: 1px solid lighten($color-medium-separator, 20%);

0 comments on commit fe08236

Please sign in to comment.