mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-10-22 14:05:37 +02:00
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:
parent
93085b9660
commit
6d9d53059c
@ -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?
|
||||
}
|
||||
}*/
|
||||
|
@ -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 {
|
||||
|
Loading…
Reference in New Issue
Block a user