From c0e1500ded51de8fb143a3a720122a350a50a628 Mon Sep 17 00:00:00 2001 From: jbridson Date: Wed, 7 Mar 2012 14:48:00 +1300 Subject: [PATCH] ENHANCEMENT:SSF-30 - changed the SCSS so that the styling on the view tabs is more specific to pages and files. --- admin/css/screen.css | 32 ++++++--- admin/scss/_style.scss | 153 +++++++++++++++++++++++++++++------------ 2 files changed, 132 insertions(+), 53 deletions(-) diff --git a/admin/css/screen.css b/admin/css/screen.css index 59a5c19aa..842d1c83f 100644 --- a/admin/css/screen.css +++ b/admin/css/screen.css @@ -243,27 +243,21 @@ body.cms { overflow: hidden; } .cms-preview, .cms-menu, .cms-content, .cms-content-header, .cms-content-tools, .cms-content-fields, .cms-edit-form, .cms-preview, .cms-preview iframe, .cms-preview-controls { display: -moz-inline-box; -moz-box-orient: vertical; display: inline-block; vertical-align: middle; *vertical-align: auto; } .cms-preview, .cms-menu, .cms-content, .cms-content-header, .cms-content-tools, .cms-content-fields, .cms-edit-form, .cms-preview, .cms-preview iframe, .cms-preview-controls { *display: inline; } -.cms-edit-form .cms-content-header-tabs .ui-tabs-nav li a { text-indent: 0; } -.cms-edit-form .cms-content-header-tabs .ui-tabs-nav .ui-state-default a, .cms-edit-form .cms-content-header-tabs .ui-tabs-nav .ui-widget-content .ui-state-default a, .cms-edit-form .cms-content-header-tabs .ui-tabs-nav .ui-widget-header .ui-state-default a { color: #1f1f1f; } - .cms-content-header { padding: 0px 8px 8px; height: 32px; z-index: 60; background-image: url(../images/textures/cms_content_header.png); background-repeat: repeat; } .cms-content-header a { color: #1556b2; } .cms-content-header .backlink { float: left; margin-top: 7px; } .cms-content-header h2 { float: left; padding: 8px 8px 0 8px; 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 .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 li a { font-weight: bold; line-height: 16px; padding: 12px 20px 11px; } .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; } .cms-content-header .cms-content-header-tabs .ui-tabs-nav .ui-corner-all, .cms-content-header .cms-content-header-tabs .ui-tabs-nav .ui-corner-top, .cms-content-header .cms-content-header-tabs .ui-tabs-nav .ui-corner-right, .cms-content-header .cms-content-header-tabs .ui-tabs-nav .ui-corner-tr { border-radius: 0; } .cms-content-header .cms-content-header-tabs .ui-tabs-nav .ui-corner-all, .cms-content-header .cms-content-header-tabs .ui-tabs-nav .ui-corner-top, .cms-content-header .cms-content-header-tabs .ui-tabs-nav .ui-corner-left, .cms-content-header .cms-content-header-tabs .ui-tabs-nav .ui-corner-tl { border-radius: 0; } +.cms-edit-form .cms-content-header-tabs .ui-tabs-nav li a { text-indent: 0; } +.cms-edit-form .cms-content-header-tabs .ui-tabs-nav .ui-state-default a, .cms-edit-form .cms-content-header-tabs .ui-tabs-nav .ui-widget-content .ui-state-default a, .cms-edit-form .cms-content-header-tabs .ui-tabs-nav .ui-widget-header .ui-state-default a { color: #1f1f1f; } + /** -------------------------------------------- Tabs -------------------------------------------- */ .ui-tabs .cms-content-header .ui-tabs-nav li, .cms-dialog .ui-tabs-nav li { margin: 0; } .ui-tabs .cms-content-header .ui-tabs-nav li a, .cms-dialog .ui-tabs-nav li a { font-weight: bold; line-height: 16px; padding: 12px 20px 11px; } @@ -271,6 +265,24 @@ body.cms { overflow: hidden; } .ui-tabs .cms-content-header .ui-tabs-nav .ui-state-active, .ui-tabs .cms-content-header .ui-tabs-nav .ui-widget-content .ui-state-active, .ui-tabs .cms-content-header .ui-tabs-nav .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-tabs-nav .ui-state-active a, .ui-tabs .cms-content-header .ui-tabs-nav .ui-widget-content .ui-state-active a, .ui-tabs .cms-content-header .ui-tabs-nav .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; } +.CMSPagesController .cms-content-header-tabs .ui-tabs-nav li a { font-weight: bold; line-height: 16px; padding: 12px 20px 11px; text-indent: -9999em; } +.CMSPagesController .cms-content-header-tabs .ui-tabs-nav li a.content-treeview { background: url(../images/content-header-tabs-sprite.png) no-repeat 2px 0px; } +.CMSPagesController .cms-content-header-tabs .ui-tabs-nav li a.content-galleryview { background: url(../images/content-header-tabs-sprite.png) no-repeat -87px 0px; } +.CMSPagesController .cms-content-header-tabs .ui-tabs-nav li a.content-listview { background: url(../images/content-header-tabs-sprite.png) no-repeat -38px 0px; } +.CMSPagesController .cms-content-header-tabs .ui-tabs-nav .ui-state-active, .CMSPagesController .cms-content-header-tabs .ui-tabs-nav .ui-widget-content .ui-state-active, .CMSPagesController .cms-content-header-tabs .ui-tabs-nav .ui-widget-header .ui-state-active { border-top: none; } +.CMSPagesController .cms-content-header-tabs .ui-tabs-nav .ui-state-active a.content-treeview, .CMSPagesController .cms-content-header-tabs .ui-tabs-nav .ui-widget-content .ui-state-active a.content-treeview, .CMSPagesController .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; } +.CMSPagesController .cms-content-header-tabs .ui-tabs-nav .ui-state-active a.content-galleryview, .CMSPagesController .cms-content-header-tabs .ui-tabs-nav .ui-widget-content .ui-state-active a.content-galleryview, .CMSPagesController .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; } +.CMSPagesController .cms-content-header-tabs .ui-tabs-nav .ui-state-active a.content-listview, .CMSPagesController .cms-content-header-tabs .ui-tabs-nav .ui-widget-content .ui-state-active a.content-listview, .CMSPagesController .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; } + +.AssetAdmin .cms-content-header-tabs .ui-tabs-nav li a { font-weight: bold; line-height: 16px; padding: 12px 20px 11px; text-indent: -9999em; } +.AssetAdmin .cms-content-header-tabs .ui-tabs-nav li a.content-treeview { background: url(../images/content-header-tabs-sprite.png) no-repeat 2px 0px; } +.AssetAdmin .cms-content-header-tabs .ui-tabs-nav li a.content-galleryview { background: url(../images/content-header-tabs-sprite.png) no-repeat -87px 0px; } +.AssetAdmin .cms-content-header-tabs .ui-tabs-nav li a.content-listview { background: url(../images/content-header-tabs-sprite.png) no-repeat -38px 0px; } +.AssetAdmin .cms-content-header-tabs .ui-tabs-nav .ui-state-active, .AssetAdmin .cms-content-header-tabs .ui-tabs-nav .ui-widget-content .ui-state-active, .AssetAdmin .cms-content-header-tabs .ui-tabs-nav .ui-widget-header .ui-state-active { border-top: none; } +.AssetAdmin .cms-content-header-tabs .ui-tabs-nav .ui-state-active a.content-treeview, .AssetAdmin .cms-content-header-tabs .ui-tabs-nav .ui-widget-content .ui-state-active a.content-treeview, .AssetAdmin .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; } +.AssetAdmin .cms-content-header-tabs .ui-tabs-nav .ui-state-active a.content-galleryview, .AssetAdmin .cms-content-header-tabs .ui-tabs-nav .ui-widget-content .ui-state-active a.content-galleryview, .AssetAdmin .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; } +.AssetAdmin .cms-content-header-tabs .ui-tabs-nav .ui-state-active a.content-listview, .AssetAdmin .cms-content-header-tabs .ui-tabs-nav .ui-widget-content .ui-state-active a.content-listview, .AssetAdmin .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; } + /** ------------------------------------------------------- Loading Interface ------------------------------------------------------- */ .cms-content-loading-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9998; } diff --git a/admin/scss/_style.scss b/admin/scss/_style.scss index d47918ede..e3e6a252d 100644 --- a/admin/scss/_style.scss +++ b/admin/scss/_style.scss @@ -80,25 +80,6 @@ body.cms { @include inline-block; } -.cms-edit-form { - .cms-content-header-tabs { - .ui-tabs-nav { - li { - a { - text-indent:0; - } - } - .ui-state-default, - .ui-widget-content .ui-state-default, - .ui-widget-header .ui-state-default { - a { - color:$color-text-dark; - } - } - } - } -} - .cms-content-header { padding: ($grid-y - 8) $grid-x $grid-y; height: $grid-y * 4; @@ -144,17 +125,6 @@ body.cms { 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; - } } } @@ -172,18 +142,6 @@ body.cms { 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-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { border-radius:0; @@ -196,6 +154,25 @@ body.cms { } } +.cms-edit-form { + .cms-content-header-tabs { + .ui-tabs-nav { + li { + a { + text-indent:0; + } + } + .ui-state-default, + .ui-widget-content .ui-state-default, + .ui-widget-header .ui-state-default { + a { + color:$color-text-dark; + } + } + } + } +} + /** -------------------------------------------- * Tabs * -------------------------------------------- */ @@ -244,6 +221,96 @@ body.cms { } } +.CMSPagesController { + .cms-content-header-tabs { + .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-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; + } + } + } + } + } +} + +.AssetAdmin { + .cms-content-header-tabs { + .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-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; + } + } + } + } + } +} + /** ------------------------------------------------------- * Loading Interface * ------------------------------------------------------- */ @@ -1328,4 +1395,4 @@ form.small { } } } - } \ No newline at end of file +} \ No newline at end of file