Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Fixed nested tab styling in other CMS interfaces.

  • Loading branch information...
commit 2a9a4bede79bf5b1a489b860fb47593e974485b9 1 parent 7ff2a79
@ajshort ajshort authored
View
18 admin/css/screen.css
@@ -295,6 +295,14 @@ body.cms { overflow: hidden; }
.cms-content-header .ss-ui-button .ui-button-text { line-height: 1.4; }
.cms-edit-form .cms-content-header-tabs .ui-tabs-nav li a { text-indent: 0; }
+.cms-edit-form .cms-content-fields .ui-tabs-nav { border-bottom: none; float: right; margin: 8px 0 -1px 0; padding: 0 24px 0 0; }
+.cms-edit-form .cms-content-fields .ui-tabs-nav li { float: left; }
+.cms-edit-form .cms-content-fields .ui-tabs-nav li a { font-weight: bold; line-height: 16px; padding: 8px 20px 8px; }
+.cms-edit-form .cms-content-fields .ui-tabs-nav .ui-state-default, .cms-edit-form .cms-content-fields .ui-tabs-nav .ui-widget-content .ui-state-default, .cms-edit-form .cms-content-fields .ui-tabs-nav .ui-widget-header .ui-state-default { border: 1px solid #c0c0c2; }
+.cms-edit-form .cms-content-fields .ui-tabs-nav .ui-state-active, .cms-edit-form .cms-content-fields .ui-tabs-nav .ui-widget-content .ui-state-active, .cms-edit-form .cms-content-fields .ui-tabs-nav .ui-widget-header .ui-state-active { padding-bottom: 1px; background: #f0f3f4 url(../images/textures/bg_cms_main_content.png) repeat top left; border: 1px solid #c0c0c2; }
+.cms-edit-form .ss-tabset .ss-tabset { position: static; }
+.cms-edit-form .ss-tabset .ui-tabs-panel { border-top: 1px solid #c0c0c2; clear: both; }
+.cms-edit-form .ss-tabset.ss-tabset-tabshidden .ui-tabs-panel { border-top: none; }
/** -------------------------------------------- Tabs -------------------------------------------- */
.cms-content-header .ui-tabs-nav li, .cms-dialog .ui-tabs-nav li { margin: 0; }
@@ -624,14 +632,8 @@ form.import-form label.left { width: 250px; }
/** -------------------------------------------- Page Edit Controller -------------------------------------------- */
.cms-container .CMSPageEditController, .cms-container .CMSPageSettingsController, .cms-container .CMSPageHistoryController { margin-left: -1px; }
.cms-container .CMSPageEditController .cms-edit-form, .cms-container .CMSPageSettingsController .cms-edit-form, .cms-container .CMSPageHistoryController .cms-edit-form { background: #e6eaed; }
-.cms-container .CMSPageEditController .cms-edit-form .ui-tabs-nav, .cms-container .CMSPageSettingsController .cms-edit-form .ui-tabs-nav, .cms-container .CMSPageHistoryController .cms-edit-form .ui-tabs-nav { border-bottom: none; float: right; margin: 8px 0 -1px 0; padding: 0 24px 0 0; }
-.cms-container .CMSPageEditController .cms-edit-form .ui-tabs-nav li, .cms-container .CMSPageSettingsController .cms-edit-form .ui-tabs-nav li, .cms-container .CMSPageHistoryController .cms-edit-form .ui-tabs-nav li { float: left; }
-.cms-container .CMSPageEditController .cms-edit-form .ui-tabs-nav li a, .cms-container .CMSPageSettingsController .cms-edit-form .ui-tabs-nav li a, .cms-container .CMSPageHistoryController .cms-edit-form .ui-tabs-nav li a { font-weight: bold; line-height: 16px; padding: 8px 20px 8px; }
-.cms-container .CMSPageEditController .cms-edit-form .ui-tabs-nav .ui-state-default, .cms-container .CMSPageEditController .cms-edit-form .ui-tabs-nav .ui-widget-content .ui-state-default, .cms-container .CMSPageEditController .cms-edit-form .ui-tabs-nav .ui-widget-header .ui-state-default, .cms-container .CMSPageSettingsController .cms-edit-form .ui-tabs-nav .ui-state-default, .cms-container .CMSPageSettingsController .cms-edit-form .ui-tabs-nav .ui-widget-content .ui-state-default, .cms-container .CMSPageSettingsController .cms-edit-form .ui-tabs-nav .ui-widget-header .ui-state-default, .cms-container .CMSPageHistoryController .cms-edit-form .ui-tabs-nav .ui-state-default, .cms-container .CMSPageHistoryController .cms-edit-form .ui-tabs-nav .ui-widget-content .ui-state-default, .cms-container .CMSPageHistoryController .cms-edit-form .ui-tabs-nav .ui-widget-header .ui-state-default { border: 1px solid #c0c0c2; }
-.cms-container .CMSPageEditController .cms-edit-form .ui-tabs-nav .ui-state-active, .cms-container .CMSPageEditController .cms-edit-form .ui-tabs-nav .ui-widget-content .ui-state-active, .cms-container .CMSPageEditController .cms-edit-form .ui-tabs-nav .ui-widget-header .ui-state-active, .cms-container .CMSPageSettingsController .cms-edit-form .ui-tabs-nav .ui-state-active, .cms-container .CMSPageSettingsController .cms-edit-form .ui-tabs-nav .ui-widget-content .ui-state-active, .cms-container .CMSPageSettingsController .cms-edit-form .ui-tabs-nav .ui-widget-header .ui-state-active, .cms-container .CMSPageHistoryController .cms-edit-form .ui-tabs-nav .ui-state-active, .cms-container .CMSPageHistoryController .cms-edit-form .ui-tabs-nav .ui-widget-content .ui-state-active, .cms-container .CMSPageHistoryController .cms-edit-form .ui-tabs-nav .ui-widget-header .ui-state-active { padding-bottom: 1px; background: #e6eaed; border: 1px solid #c0c0c2; }
-.cms-container .CMSPageEditController .ss-tabset .ss-tabset, .cms-container .CMSPageSettingsController .ss-tabset .ss-tabset, .cms-container .CMSPageHistoryController .ss-tabset .ss-tabset { position: static; }
-.cms-container .CMSPageEditController .ss-tabset .ui-tabs-panel, .cms-container .CMSPageSettingsController .ss-tabset .ui-tabs-panel, .cms-container .CMSPageHistoryController .ss-tabset .ui-tabs-panel { background: #e6eaed; border-top: 1px solid #c0c0c2; clear: both; }
-.cms-container .CMSPageEditController .ss-tabset.ss-tabset-tabshidden .ui-tabs-panel, .cms-container .CMSPageSettingsController .ss-tabset.ss-tabset-tabshidden .ui-tabs-panel, .cms-container .CMSPageHistoryController .ss-tabset.ss-tabset-tabshidden .ui-tabs-panel { border-top: none; }
+.cms-container .CMSPageEditController .cms-edit-form .ui-tabs-nav .ui-state-active, .cms-container .CMSPageEditController .cms-edit-form .ui-tabs-nav .ui-widget-content .ui-state-active, .cms-container .CMSPageEditController .cms-edit-form .ui-tabs-nav .ui-widget-header .ui-state-active, .cms-container .CMSPageSettingsController .cms-edit-form .ui-tabs-nav .ui-state-active, .cms-container .CMSPageSettingsController .cms-edit-form .ui-tabs-nav .ui-widget-content .ui-state-active, .cms-container .CMSPageSettingsController .cms-edit-form .ui-tabs-nav .ui-widget-header .ui-state-active, .cms-container .CMSPageHistoryController .cms-edit-form .ui-tabs-nav .ui-state-active, .cms-container .CMSPageHistoryController .cms-edit-form .ui-tabs-nav .ui-widget-content .ui-state-active, .cms-container .CMSPageHistoryController .cms-edit-form .ui-tabs-nav .ui-widget-header .ui-state-active { background: #e6eaed; }
+.cms-container .CMSPageEditController .ss-tabset .ui-tabs-panel, .cms-container .CMSPageSettingsController .ss-tabset .ui-tabs-panel, .cms-container .CMSPageHistoryController .ss-tabset .ui-tabs-panel { background: #e6eaed; }
/** -------------------------------------------- Page Settings Controller -------------------------------------------- */
.cms-container .CMSMain.CMSPageSettingsController .tab#Root_Settings .optionset li { white-space: nowrap; padding-top: 8px; }
View
92 admin/scss/_style.scss
@@ -185,7 +185,51 @@ body.cms {
}
}
}
- }
+ }
+
+ .cms-content-fields .ui-tabs-nav {
+ border-bottom: none;
+ float: right;
+ margin: $grid-y 0 -1px 0;
+ padding: 0 $grid-x*3 0 0;
+
+ li {
+ float: left;
+
+ a {
+ font-weight: bold;
+ line-height: $grid-y * 2;
+ padding: $grid-y $grid-x*2.5 $grid-y;
+ }
+ }
+ .ui-state-default,
+ .ui-widget-content .ui-state-default,
+ .ui-widget-header .ui-state-default {
+ border:1px solid $color-button-generic-border;
+ }
+ .ui-state-active,
+ .ui-widget-content .ui-state-active,
+ .ui-widget-header .ui-state-active {
+ padding-bottom:1px;
+ background: $tab-panel-texture-background;
+ border:1px solid $color-button-generic-border;
+ }
+ }
+
+ .ss-tabset {
+ .ss-tabset {
+ position: static;
+ }
+
+ .ui-tabs-panel {
+ border-top:1px solid $color-button-generic-border;
+ clear: both;
+ }
+
+ &.ss-tabset-tabshidden .ui-tabs-panel {
+ border-top: none;
+ }
+ }
}
/** --------------------------------------------
@@ -1780,54 +1824,22 @@ form.import-form {
.cms-container {
.CMSPageEditController, .CMSPageSettingsController, .CMSPageHistoryController {
// Fix pixel gap between nav tree and main page header
- margin-left: -1px; // Removed to close gap far right of right tabs?
- //Styling of tabs on page edit
- .cms-edit-form {
- background:darken($color-widget-bg, 2%);
-
+ margin-left: -1px; // Removed to close gap far right of right tabs?
+
+ .cms-edit-form {
+ background:darken($color-widget-bg, 2%);
+
.ui-tabs-nav {
- border-bottom: none;
- float: right;
- margin: $grid-y 0 -1px 0;
- padding: 0 $grid-x*3 0 0;
-
- li {
- float: left;
-
- a {
- font-weight: bold;
- line-height: $grid-y * 2;
- padding: $grid-y $grid-x*2.5 $grid-y;
- }
- }
- .ui-state-default,
- .ui-widget-content .ui-state-default,
- .ui-widget-header .ui-state-default {
- border:1px solid $color-button-generic-border;
- }
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
- padding-bottom:1px;
background:darken($color-widget-bg, 2%);
- border:1px solid $color-button-generic-border;
}
}
}
- .ss-tabset {
- .ss-tabset {
- position: static;
- }
- .ui-tabs-panel {
- background: darken($color-widget-bg, 2%);
- border-top:1px solid $color-button-generic-border;
- clear: both;
- }
-
- &.ss-tabset-tabshidden .ui-tabs-panel {
- border-top: none;
- }
+ .ss-tabset .ui-tabs-panel {
+ background: darken($color-widget-bg, 2%);
}
}
}
View
18 admin/templates/CMSTabSet.ss
@@ -2,14 +2,14 @@
<%-- Tab nav is rendered in CMSEditForm.ss --%>
<% loop Tabs %>
- <div $AttributesHTML>
- <% if Tabs %>
- $FieldHolder
- <% else %>
- <% loop Fields %>
- $FieldHolder
- <% end_loop %>
- <% end_if %>
- </div>
+ <% if Tabs %>
+ $FieldHolder
+ <% else %>
+ <div $AttributesHTML>
+ <% loop Fields %>
+ $FieldHolder
+ <% end_loop %>
+ </div>
+ <% end_if %>
<% end_loop %>
</div>
View
2  admin/templates/Includes/LeftAndMain_EditForm.ss
@@ -29,7 +29,7 @@
$EditFormTools
<% end_with %>
- <div class="cms-content-fields center cms-panel-padded">
+ <div class="cms-content-fields center <% if not $Fields.hasTabset %>cms-panel-padded<% end_if %>">
<% if Message %>
<p id="{$FormName}_error" class="message $MessageType">$Message</p>
<% else %>
Please sign in to comment.
Something went wrong with that request. Please try again.