tonyair/silverstripe-framework
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-framework synced 2024-09-29 12:49:06 +02:00
Code Issues Projects Releases Wiki Activity

Tidy up active tab styles to match background, border alignment on page tabs.

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
admin/css/screen.css
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?
}
}*/

66
admin/scss/_style.scss
View File

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