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

MINOR:fixed bug with tabs - created more specific styling for the page view tabs so that they do not affect the tabs sitewide.

Browse Source
This commit is contained in:
jbridson 2012-02-17 12:40:19 +13:00
parent 5911abc0f6
commit 18131ae64a
2 changed files with 86 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
admin/css/screen.css
View File

@ -235,20 +235,25 @@ body.cms { overflow: hidden; }
.cms-content-header h2 { float: left; padding: 8px 8px 0 0; font-size: 14px; line-height: 24px; font-weight: bold; text-shadow: #bfcad2 1px 1px 0; max-width: 400px; margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; o-text-overflow: ellipsis; } .cms-content-header h2 { float: left; padding: 8px 8px 0 0; font-size: 14px; line-height: 24px; font-weight: bold; text-shadow: #bfcad2 1px 1px 0; max-width: 400px; margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; o-text-overflow: ellipsis; }
.cms-content-header > div { width: 9999em; overflow: hidden; } .cms-content-header > div { width: 9999em; overflow: hidden; }
.cms-content-header .cms-content-header-tabs { position: fixed; right: 40px; } .cms-content-header .cms-content-header-tabs { position: fixed; right: 40px; }
.cms-content-header .cms-content-header-tabs .ui-tabs-nav li a { font-weight: bold; line-height: 16px; padding: 12px 20px 11px; text-indent: -9999em; }
.cms-content-header .cms-content-header-tabs .ui-tabs-nav li a.content-treeview { background: url(../images/content-header-tabs-sprite.png) no-repeat 2px 0px; }
.cms-content-header .cms-content-header-tabs .ui-tabs-nav li a.content-galleryview { background: url(../images/content-header-tabs-sprite.png) no-repeat -87px 0px; }
.cms-content-header .cms-content-header-tabs .ui-tabs-nav li a.content-listview { background: url(../images/content-header-tabs-sprite.png) no-repeat -38px 0px; }
.cms-content-header .cms-content-header-tabs .ui-tabs-nav .ui-state-default, .cms-content-header .cms-content-header-tabs .ui-tabs-nav .ui-widget-content .ui-state-default, .cms-content-header .cms-content-header-tabs .ui-tabs-nav .ui-widget-header .ui-state-default { border-top: none; }
.cms-content-header .cms-content-header-tabs .ui-tabs-nav .ui-state-active, .cms-content-header .cms-content-header-tabs .ui-tabs-nav .ui-widget-content .ui-state-active, .cms-content-header .cms-content-header-tabs .ui-tabs-nav .ui-widget-header .ui-state-active { border-top: none; }
.cms-content-header .cms-content-header-tabs .ui-tabs-nav .ui-state-active a.content-treeview, .cms-content-header .cms-content-header-tabs .ui-tabs-nav .ui-widget-content .ui-state-active a.content-treeview, .cms-content-header .cms-content-header-tabs .ui-tabs-nav .ui-widget-header .ui-state-active a.content-treeview { background: url(../images/content-header-tabs-sprite.png) no-repeat 2px -40px; }
.cms-content-header .cms-content-header-tabs .ui-tabs-nav .ui-state-active a.content-galleryview, .cms-content-header .cms-content-header-tabs .ui-tabs-nav .ui-widget-content .ui-state-active a.content-galleryview, .cms-content-header .cms-content-header-tabs .ui-tabs-nav .ui-widget-header .ui-state-active a.content-galleryview { background: url(../images/content-header-tabs-sprite.png) no-repeat -87px -40px; }
.cms-content-header .cms-content-header-tabs .ui-tabs-nav .ui-state-active a.content-listview, .cms-content-header .cms-content-header-tabs .ui-tabs-nav .ui-widget-content .ui-state-active a.content-listview, .cms-content-header .cms-content-header-tabs .ui-tabs-nav .ui-widget-header .ui-state-active a.content-listview { background: url(../images/content-header-tabs-sprite.png) no-repeat -38px -40px; }
.ui-tabs .cms-content-header .ui-tabs-nav li, .cms-dialog .ui-tabs-nav .ui-tabs-nav li { margin: 0; } .cms-edit-form .cms-content-header-tabs .ui-tabs-nav li a { text-indent: 0; }
.ui-tabs .cms-content-header .ui-tabs-nav li a, .cms-dialog .ui-tabs-nav .ui-tabs-nav li a { font-weight: bold; line-height: 16px; padding: 12px 20px 11px; }
.ui-tabs .cms-content-header .ui-tabs-nav li a.content-treeview, .cms-dialog .ui-tabs-nav .ui-tabs-nav li a.content-treeview { background: url(../images/content-header-tabs-sprite.png) no-repeat 2px 0px; } .ui-tabs .ui-tabs-nav li, .cms-dialog .ui-tabs-nav .ui-tabs-nav li { margin: 0; }
.ui-tabs .cms-content-header .ui-tabs-nav li a.content-galleryview, .cms-dialog .ui-tabs-nav .ui-tabs-nav li a.content-galleryview { background: url(../images/content-header-tabs-sprite.png) no-repeat -87px 0px; } .ui-tabs .ui-tabs-nav li a, .cms-dialog .ui-tabs-nav .ui-tabs-nav li a { font-weight: bold; line-height: 16px; padding: 12px 20px 11px; }
.ui-tabs .cms-content-header .ui-tabs-nav li a.content-listview, .cms-dialog .ui-tabs-nav .ui-tabs-nav li a.content-listview { background: url(../images/content-header-tabs-sprite.png) no-repeat -38px 0px; } .ui-tabs .ui-state-default, .ui-tabs .ui-widget-content .ui-state-default, .ui-tabs .ui-widget-header .ui-state-default, .cms-dialog .ui-tabs-nav .ui-state-default, .cms-dialog .ui-tabs-nav .ui-widget-content .ui-state-default, .cms-dialog .ui-tabs-nav .ui-widget-header .ui-state-default { background-color: #b0bec7; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #b0bec7), color-stop(100%, #8ca1ae)); background-image: -webkit-linear-gradient(#b0bec7, #8ca1ae); background-image: -moz-linear-gradient(#b0bec7, #8ca1ae); background-image: -o-linear-gradient(#b0bec7, #8ca1ae); background-image: -ms-linear-gradient(#b0bec7, #8ca1ae); background-image: linear-gradient(#b0bec7, #8ca1ae); border-right-color: #a6a6a6; border-left-color: #d9d9d9; border-bottom: none; text-shadow: white 0 1px 0; }
.ui-tabs .cms-content-header .ui-state-default, .ui-tabs .cms-content-header .ui-widget-content .ui-state-default, .ui-tabs .cms-content-header .ui-widget-header .ui-state-default, .cms-dialog .ui-tabs-nav .ui-state-default, .cms-dialog .ui-tabs-nav .ui-widget-content .ui-state-default, .cms-dialog .ui-tabs-nav .ui-widget-header .ui-state-default { background-color: #b0bec7; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #b0bec7), color-stop(100%, #8ca1ae)); background-image: -webkit-linear-gradient(#b0bec7, #8ca1ae); background-image: -moz-linear-gradient(#b0bec7, #8ca1ae); background-image: -o-linear-gradient(#b0bec7, #8ca1ae); background-image: -ms-linear-gradient(#b0bec7, #8ca1ae); background-image: linear-gradient(#b0bec7, #8ca1ae); border-right-color: #a6a6a6; border-left-color: #d9d9d9; border-top: none; border-bottom: none; text-shadow: white 0 1px 0; } .ui-tabs .ui-state-active, .ui-tabs .ui-widget-content .ui-state-active, .ui-tabs .ui-widget-header .ui-state-active, .cms-dialog .ui-tabs-nav .ui-state-active, .cms-dialog .ui-tabs-nav .ui-widget-content .ui-state-active, .cms-dialog .ui-tabs-nav .ui-widget-header .ui-state-active { background: #eceff1; border-right-color: #a6a6a6; border-left-color: #a6a6a6; margin-right: -1px; margin-left: -1px; z-index: 2; }
.ui-tabs .cms-content-header .ui-state-active, .ui-tabs .cms-content-header .ui-widget-content .ui-state-active, .ui-tabs .cms-content-header .ui-widget-header .ui-state-active, .cms-dialog .ui-tabs-nav .ui-state-active, .cms-dialog .ui-tabs-nav .ui-widget-content .ui-state-active, .cms-dialog .ui-tabs-nav .ui-widget-header .ui-state-active { background: #eceff1; border-right-color: #a6a6a6; border-left-color: #a6a6a6; border-top: none; margin-right: -1px; margin-left: -1px; z-index: 2; } .ui-tabs .ui-state-active a, .ui-tabs .ui-widget-content .ui-state-active a, .ui-tabs .ui-widget-header .ui-state-active a, .cms-dialog .ui-tabs-nav .ui-state-active a, .cms-dialog .ui-tabs-nav .ui-widget-content .ui-state-active a, .cms-dialog .ui-tabs-nav .ui-widget-header .ui-state-active a { border-bottom: none; }
.ui-tabs .cms-content-header .ui-state-active a, .ui-tabs .cms-content-header .ui-widget-content .ui-state-active a, .ui-tabs .cms-content-header .ui-widget-header .ui-state-active a, .cms-dialog .ui-tabs-nav .ui-state-active a, .cms-dialog .ui-tabs-nav .ui-widget-content .ui-state-active a, .cms-dialog .ui-tabs-nav .ui-widget-header .ui-state-active a { border-bottom: none; } .ui-tabs .ui-corner-all, .ui-tabs .ui-corner-top, .ui-tabs .ui-corner-right, .ui-tabs .ui-corner-tr, .cms-dialog .ui-tabs-nav .ui-corner-all, .cms-dialog .ui-tabs-nav .ui-corner-top, .cms-dialog .ui-tabs-nav .ui-corner-right, .cms-dialog .ui-tabs-nav .ui-corner-tr { border-radius: 0; }
.ui-tabs .cms-content-header .ui-state-active a.content-treeview, .ui-tabs .cms-content-header .ui-widget-content .ui-state-active a.content-treeview, .ui-tabs .cms-content-header .ui-widget-header .ui-state-active a.content-treeview, .cms-dialog .ui-tabs-nav .ui-state-active a.content-treeview, .cms-dialog .ui-tabs-nav .ui-widget-content .ui-state-active a.content-treeview, .cms-dialog .ui-tabs-nav .ui-widget-header .ui-state-active a.content-treeview { background: url(../images/content-header-tabs-sprite.png) no-repeat 2px -40px; } .ui-tabs .ui-corner-all, .ui-tabs .ui-corner-top, .ui-tabs .ui-corner-left, .ui-tabs .ui-corner-tl, .cms-dialog .ui-tabs-nav .ui-corner-all, .cms-dialog .ui-tabs-nav .ui-corner-top, .cms-dialog .ui-tabs-nav .ui-corner-left, .cms-dialog .ui-tabs-nav .ui-corner-tl { border-radius: 0; }
.ui-tabs .cms-content-header .ui-state-active a.content-galleryview, .ui-tabs .cms-content-header .ui-widget-content .ui-state-active a.content-galleryview, .ui-tabs .cms-content-header .ui-widget-header .ui-state-active a.content-galleryview, .cms-dialog .ui-tabs-nav .ui-state-active a.content-galleryview, .cms-dialog .ui-tabs-nav .ui-widget-content .ui-state-active a.content-galleryview, .cms-dialog .ui-tabs-nav .ui-widget-header .ui-state-active a.content-galleryview { background: url(../images/content-header-tabs-sprite.png) no-repeat -87px -40px; }
.ui-tabs .cms-content-header .ui-state-active a.content-listview, .ui-tabs .cms-content-header .ui-widget-content .ui-state-active a.content-listview, .ui-tabs .cms-content-header .ui-widget-header .ui-state-active a.content-listview, .cms-dialog .ui-tabs-nav .ui-state-active a.content-listview, .cms-dialog .ui-tabs-nav .ui-widget-content .ui-state-active a.content-listview, .cms-dialog .ui-tabs-nav .ui-widget-header .ui-state-active a.content-listview { background: url(../images/content-header-tabs-sprite.png) no-repeat -38px -40px; }
.ui-tabs .cms-content-header .ui-corner-all, .ui-tabs .cms-content-header .ui-corner-top, .ui-tabs .cms-content-header .ui-corner-right, .ui-tabs .cms-content-header .ui-corner-tr, .cms-dialog .ui-tabs-nav .ui-corner-all, .cms-dialog .ui-tabs-nav .ui-corner-top, .cms-dialog .ui-tabs-nav .ui-corner-right, .cms-dialog .ui-tabs-nav .ui-corner-tr { border-radius: 0; }
.ui-tabs .cms-content-header .ui-corner-all, .ui-tabs .cms-content-header .ui-corner-top, .ui-tabs .cms-content-header .ui-corner-left, .ui-tabs .cms-content-header .ui-corner-tl, .cms-dialog .ui-tabs-nav .ui-corner-all, .cms-dialog .ui-tabs-nav .ui-corner-top, .cms-dialog .ui-tabs-nav .ui-corner-left, .cms-dialog .ui-tabs-nav .ui-corner-tl { border-radius: 0; }
/** ------------------------------------------------------- Loading Interface ------------------------------------------------------- */ /** ------------------------------------------------------- Loading Interface ------------------------------------------------------- */
.cms-content-loading-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9998; } .cms-content-loading-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9998; }
@ -374,6 +379,7 @@ form.member-profile-form .formattingHelpText li { font-size: 11px; color: #333;
form.member-profile-form #Groups .middleColumn { margin-left: 0; width: 100%; } form.member-profile-form #Groups .middleColumn { margin-left: 0; width: 100%; }
form.member-profile-form #Groups .middleColumn .TreeDropdownField { width: 90%; max-width: 90%; } form.member-profile-form #Groups .middleColumn .TreeDropdownField { width: 90%; max-width: 90%; }
form.member-profile-form #Permissions .optionset li { float: none; width: auto; } form.member-profile-form #Permissions .optionset li { float: none; width: auto; }
form.member-profile-form .ui-tabs-nav li { margin: 0 0 -1px 0; }
.cms .cms-content { border-right: 1px solid rgba(201, 205, 206, 0.8); -moz-box-shadow: 3px 0 4px rgba(0, 0, 0, 0.15); -webkit-box-shadow: 3px 0 4px rgba(0, 0, 0, 0.15); -o-box-shadow: 3px 0 4px rgba(0, 0, 0, 0.15); box-shadow: 3px 0 4px rgba(0, 0, 0, 0.15); -moz-border-radius: 0; -webkit-border-radius: 0; -o-border-radius: 0; -ms-border-radius: 0; -khtml-border-radius: 0; border-radius: 0; } .cms .cms-content { border-right: 1px solid rgba(201, 205, 206, 0.8); -moz-box-shadow: 3px 0 4px rgba(0, 0, 0, 0.15); -webkit-box-shadow: 3px 0 4px rgba(0, 0, 0, 0.15); -o-box-shadow: 3px 0 4px rgba(0, 0, 0, 0.15); box-shadow: 3px 0 4px rgba(0, 0, 0, 0.15); -moz-border-radius: 0; -webkit-border-radius: 0; -o-border-radius: 0; -ms-border-radius: 0; -khtml-border-radius: 0; border-radius: 0; }
.cms .cms-content-fields { /* always show a y scroll bar as popups like TreeDropdowns can trigger longer pages and the extra scroll bar doesn't fire our sizing bar */ overflow-y: auto; overflow-x: auto; background: none; -moz-box-shadow: rgba(107, 120, 123, 0.5) 0 0 4px; -webkit-box-shadow: rgba(107, 120, 123, 0.5) 0 0 4px; -o-box-shadow: rgba(107, 120, 123, 0.5) 0 0 4px; box-shadow: rgba(107, 120, 123, 0.5) 0 0 4px; } .cms .cms-content-fields { /* always show a y scroll bar as popups like TreeDropdowns can trigger longer pages and the extra scroll bar doesn't fire our sizing bar */ overflow-y: auto; overflow-x: auto; background: none; -moz-box-shadow: rgba(107, 120, 123, 0.5) 0 0 4px; -webkit-box-shadow: rgba(107, 120, 123, 0.5) 0 0 4px; -o-box-shadow: rgba(107, 120, 123, 0.5) 0 0 4px; box-shadow: rgba(107, 120, 123, 0.5) 0 0 4px; }

90
admin/scss/_style.scss
View File

@ -132,26 +132,76 @@ body.cms {
.cms-content-header-tabs { .cms-content-header-tabs {
position:fixed; position:fixed;
right:40px; right:40px;
.ui-tabs-nav {
li {
a {
font-weight: bold;
line-height: $grid-y * 2;
padding: ($grid-y * 2 - 4) ($grid-x * 2 + 4) $grid-y + 3;
text-indent:-9999em;
&.content-treeview {
background:url(../images/content-header-tabs-sprite.png) no-repeat 2px 0px;
}
&.content-galleryview {
background:url(../images/content-header-tabs-sprite.png) no-repeat -87px 0px;
}
&.content-listview {
background:url(../images/content-header-tabs-sprite.png) no-repeat -38px 0px;
}
}
}
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
border: {
top:none;
}
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
border: {
top:none;
}
a {
&.content-treeview {
background:url(../images/content-header-tabs-sprite.png) no-repeat 2px -40px;
}
&.content-galleryview {
background:url(../images/content-header-tabs-sprite.png) no-repeat -87px -40px;
}
&.content-listview {
background:url(../images/content-header-tabs-sprite.png) no-repeat -38px -40px;
}
}
}
}
} }
} }
.ui-tabs .cms-content-header, .cms-dialog .ui-tabs-nav { .cms-edit-form {
.cms-content-header-tabs {
.ui-tabs-nav {
li {
a {
text-indent:0;
}
}
}
}
}
.ui-tabs, .cms-dialog .ui-tabs-nav {
.ui-tabs-nav li { .ui-tabs-nav li {
margin:0; margin:0;
a { a {
font-weight: bold; font-weight: bold;
line-height: $grid-y * 2; line-height: $grid-y * 2;
padding: ($grid-y * 2 - 4) ($grid-x * 2 + 4) $grid-y + 3; padding: ($grid-y * 2 - 4) ($grid-x * 2 + 4) $grid-y + 3;
&.content-treeview {
background:url(../images/content-header-tabs-sprite.png) no-repeat 2px 0px;
}
&.content-galleryview {
background:url(../images/content-header-tabs-sprite.png) no-repeat -87px 0px;
}
&.content-listview {
background:url(../images/content-header-tabs-sprite.png) no-repeat -38px 0px;
}
} }
} }
@ -166,7 +216,6 @@ body.cms {
border: { border: {
right-color: darken($color-tab, 20%); right-color: darken($color-tab, 20%);
left-color: $color-tab; left-color: $color-tab;
top:none;
bottom:none; bottom:none;
} }
@ -180,7 +229,6 @@ body.cms {
border: { border: {
right-color: darken($color-tab, 20%); right-color: darken($color-tab, 20%);
left-color: darken($color-tab, 20%); left-color: darken($color-tab, 20%);
top:none;
} }
margin-right:-1px; margin-right:-1px;
margin-left:-1px; margin-left:-1px;
@ -188,16 +236,6 @@ body.cms {
a { a {
border-bottom:none; border-bottom:none;
&.content-treeview {
background:url(../images/content-header-tabs-sprite.png) no-repeat 2px -40px;
}
&.content-galleryview {
background:url(../images/content-header-tabs-sprite.png) no-repeat -87px -40px;
}
&.content-listview {
background:url(../images/content-header-tabs-sprite.png) no-repeat -38px -40px;
}
} }
} }
@ -834,6 +872,12 @@ form.member-profile-form {
} }
} }
} }
.ui-tabs-nav {
li {
margin:0 0 -1px 0;
}
}
} }
.cms { .cms {