From 6d9d53059c59aac8a866829e89926ba099f8b716 Mon Sep 17 00:00:00 2001 From: Will Rossiter Date: Wed, 29 Jan 2014 15:47:15 +1300 Subject: [PATCH] Tidy up active tab styles to match background, border alignment on page tabs. Before: https://www.evernote.com/shard/s6/sh/82f0a398-c80a-4cb7-81d7-a10b6e2c85ff/b1dfa1ae8ffcbd633b548fa3b2ea8951 After: https://www.evernote.com/shard/s6/sh/66cbe9d3-df0a-42c8-a6e8-a82c68161efe/27df7167802de9c3a267d40324972aa3 Tested throughout the CMS in IE8, Firefox and Chrome. --- admin/css/screen.css | 13 +++++---- admin/scss/_style.scss | 66 ++++++++++++++++++++++-------------------- 2 files changed, 42 insertions(+), 37 deletions(-) diff --git a/admin/css/screen.css b/admin/css/screen.css index d5a61be32..730381e30 100644 --- a/admin/css/screen.css +++ b/admin/css/screen.css @@ -317,11 +317,11 @@ fieldset.switch-states.size_2 input:checked:nth-of-type(2) ~ .slide-button { lef fieldset.switch-states.size_2 input:checked:nth-of-type(3) ~ .slide-button { left: 100%; } fieldset.switch-states.size_2 input:checked:nth-of-type(4) ~ .slide-button { left: 150%; } fieldset.switch-states.size_2 input:checked:nth-of-type(5) ~ .slide-button { left: 200%; } -fieldset.switch-states.size_3 label, fieldset.switch-states.size_3 .slide-button { width: 33.333%; } -fieldset.switch-states.size_3 input:checked:nth-of-type(2) ~ .slide-button { left: 33.333%; } -fieldset.switch-states.size_3 input:checked:nth-of-type(3) ~ .slide-button { left: 66.667%; } +fieldset.switch-states.size_3 label, fieldset.switch-states.size_3 .slide-button { width: 33.33333%; } +fieldset.switch-states.size_3 input:checked:nth-of-type(2) ~ .slide-button { left: 33.33333%; } +fieldset.switch-states.size_3 input:checked:nth-of-type(3) ~ .slide-button { left: 66.66667%; } fieldset.switch-states.size_3 input:checked:nth-of-type(4) ~ .slide-button { left: 100%; } -fieldset.switch-states.size_3 input:checked:nth-of-type(5) ~ .slide-button { left: 133.333%; } +fieldset.switch-states.size_3 input:checked:nth-of-type(5) ~ .slide-button { left: 133.33333%; } fieldset.switch-states.size_4 label, fieldset.switch-states.size_4 .slide-button { width: 25%; } fieldset.switch-states.size_4 input:checked:nth-of-type(2) ~ .slide-button { left: 25%; } fieldset.switch-states.size_4 input:checked:nth-of-type(3) ~ .slide-button { left: 50%; } @@ -393,9 +393,10 @@ body.cms { overflow: hidden; } .ui-tabs .ui-tabs-nav li { top: 0; float: left; border-bottom: 0 !important; } .ui-tabs .ui-tabs-nav li a { display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; zoom: 1; *display: inline; float: none; font-weight: bold; color: #444444; line-height: 32px; padding: 0 16px 0; } .ui-tabs .ui-tabs-nav li:last-child { margin-right: 0; } +.ui-tabs .ui-tabs-nav li.ui-tabs-active { margin-bottom: 0; } .ui-tabs .ui-tabs-nav .ui-state-default { border: 1px solid #c0c0c2; background: #ced7dc; } .ui-tabs .ui-tabs-nav .ui-state-default a { color: #5e5e5e; text-shadow: #e6e6e6 0 1px 0; } -.ui-tabs .ui-tabs-nav .ui-state-active { padding-bottom: 1px; border: 1px solid #c0c0c2; background-color: #eceff1; } +.ui-tabs .ui-tabs-nav .ui-state-active { padding-bottom: 1px; border: 1px solid #c0c0c2; background-color: #e6eaed; } .ui-tabs .ui-tabs-nav .ui-state-active a { color: #444444; } .ui-tabs .ui-tabs-nav.ui-state-active { border-color: gray; } .ui-tabs .ui-tabs-nav li.cms-tabset-icon { text-indent: -9999em; } @@ -724,7 +725,7 @@ form.import-form label.left { width: 250px; } /** -------------------------------------------- Page Edit Controller -------------------------------------------- */ /*.cms-container { .CMSPageEditController, .CMSPageSettingsController, .CMSPageHistoryController { - /* Fix pixel gap between nav tree and main page header */ + // Fix pixel gap between nav tree and main page header margin-left: -1px; // Removed to close gap far right of right tabs? } }*/ diff --git a/admin/scss/_style.scss b/admin/scss/_style.scss index ea8570cfd..1c5ea4db2 100644 --- a/admin/scss/_style.scss +++ b/admin/scss/_style.scss @@ -188,59 +188,63 @@ body.cms { } .ui-tabs-nav { - float: right; - margin: $grid-x*2 0 -1px 0; - padding: 0 $grid-x*1.5 0 0; - border-bottom: none; + float: right; + margin: $grid-x*2 0 -1px 0; + padding: 0 $grid-x*1.5 0 0; + border-bottom: none; - ~ .ui-tabs-panel { - border-top:1px solid $color-button-generic-border; - clear: both; - } - + ~ .ui-tabs-panel { + border-top:1px solid $color-button-generic-border; + clear: both; + } + li { - top: 0; - float: left; - border-bottom: 0 !important; + top: 0; + float: left; + border-bottom: 0 !important; a { @include inline-block; float: none; font-weight: bold; - color: $color-text; - line-height: $grid-y * 4; - padding: 0 $grid-x*2 0; - } + color: $color-text; + line-height: $grid-y * 4; + padding: 0 $grid-x*2 0; + } - &:last-child { - // correctly right-align last tab - margin-right: 0; -} + &:last-child { + // correctly right-align last tab + margin-right: 0; + } + + &.ui-tabs-active { + margin-bottom: 0; + } } .ui-state-default { border:1px solid $color-button-generic-border; - background:darken($color-widget-bg, 10%); + background: darken($color-widget-bg, 10%); a { color: lighten($color-text, 10%); text-shadow: lighten($color-tab, 5%) 0 1px 0; - } -} + } + } .ui-state-active { - padding-bottom:1px; - border:1px solid $color-button-generic-border; - background-color: $tab-panel-texture-color; + padding-bottom: 1px; + border: 1px solid $color-button-generic-border; + background-color: darken($tab-panel-texture-color, 2%); a { color: $color-text; + } } - } &.ui-state-active { border-color: $color-medium-separator; - } + } li.cms-tabset-icon { text-indent:-9999em; @@ -249,7 +253,7 @@ body.cms { display: block; padding-left: 40px; // icon width padding-right: 0; - } + } &.list a {background: sprite($sprites64, tab-list) no-repeat;} &.tree a {background: sprite($sprites64, tab-tree) no-repeat;} @@ -262,8 +266,8 @@ body.cms { &.gallery.ui-state-active a {background: sprite($sprites64, tab-gallery-hover) no-repeat;} &.edit.ui-state-active a {background: sprite($sprites64, tab-edit-hover) no-repeat;} &.search.ui-state-active a {background: sprite($sprites64, tab-search-hover) no-repeat;} + } } -} .cms-panel-padded { .ui-tabs-panel { @@ -1096,7 +1100,7 @@ form.member-profile-form { // can trigger longer pages and the extra scroll bar doesn't fire our sizing bar overflow-y: auto; overflow-x: auto; - background:darken($tab-panel-texture-color,2%); + background: darken($tab-panel-texture-color, 2%); width:100%; #Root_Main { .confirmedpassword {