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.
This commit is contained in:
Will Rossiter 2014-01-29 15:47:15 +13:00
parent 93085b9660
commit 6d9d53059c
2 changed files with 42 additions and 37 deletions

View File

@ -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?
}
}*/

View File

@ -216,6 +216,10 @@ body.cms {
// correctly right-align last tab
margin-right: 0;
}
&.ui-tabs-active {
margin-bottom: 0;
}
}
.ui-state-default {
@ -231,7 +235,7 @@ body.cms {
.ui-state-active {
padding-bottom: 1px;
border: 1px solid $color-button-generic-border;
background-color: $tab-panel-texture-color;
background-color: darken($tab-panel-texture-color, 2%);
a {
color: $color-text;