tonyair/silverstripe-framework
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-framework synced 2024-06-25 05:59:23 +02:00
Code Issues Projects Releases Wiki Activity

Fixed nested tab styling in other CMS interfaces.

Browse Source
This commit is contained in:
Andrew Short 2012-07-06 12:48:15 +10:00
parent 7ff2a79714
commit 2a9a4bede7
4 changed files with 72 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
admin/css/screen.css
View File

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

92
admin/scss/_style.scss
View File

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

18
admin/templates/CMSTabSet.ss
View File

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

2
admin/templates/Includes/LeftAndMain_EditForm.ss
View File

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