tonyair/silverstripe-framework
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-framework synced 2024-10-22 12:05:37 +00:00
Code Issues Projects Releases Wiki Activity

Increase consistency of tab styles across legacy and bootstrap tabs

Browse Source 
Using BS variables where possible for all tabs
This commit is contained in:
Paul Clarke 2016-09-14 12:44:41 +12:00 committed by Ingo Schommer
parent 660aa20dad
commit d51c46dc89
4 changed files with 50 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
admin/client/src/components/Tabs/Tabs.scss
View File

@ -1,9 +1,10 @@
// Tabs, styles built on top of Bootstrap 4 tab functionality
.nav-tabs {
margin-bottom: $grid-gutter-width-half; // TODO Change to $panel-padding-y; variable when merged
//Spacing between items
.nav-item+.nav-item {
margin-left: .462rem; // 6px
margin-left: $spacer-x / 2;
}
.nav-link {

6
admin/client/src/containers/ReduxForm/ReduxForm.js Normal file
View File

@ -0,0 +1,6 @@
import { reduxForm } from 'redux-form';
import Form from 'components/Form/Form';
export default reduxForm({
// configured at runtime
})(Form);

2
admin/client/src/styles/_variables.scss
View File

@ -431,7 +431,7 @@ $navbar-padding-vertical: ($spacer / 2);
$nav-tabs-link-border-width: .1538rem; // 2px
$nav-tabs-link-hover-border-color: $gray-light;
$nav-link-padding: $spacer-y #{$spacer-x / 2} #{$spacer-y - $nav-tabs-link-border-width};
$nav-link-padding: $spacer-y #{$spacer-x / 4} #{$spacer-y - $nav-tabs-link-border-width};
$nav-link-hover-bg: transparent;
// $nav-disabled-link-color: $gray-light;

86
admin/client/src/styles/legacy/_style.scss
View File

@ -377,9 +377,13 @@ body.cms {
}
}
.cms-content-header-tabs .icon-button-group > .ui-tabs-nav.cms-tabset-nav-primary {
margin-top: 0;
}
.icon-button-group {
display: inline-block;
margin-top: 1px;
vertical-align: middle;
border: 1px solid #CDCCD0;
border-radius: 4px;
@ -472,20 +476,12 @@ body.cms {
padding: 0;
}
.ui-tabs {
.ui-tabs-nav {
margin-left: $panel-padding-x;
margin-right: $panel-padding-x;
float: none;
border-bottom: 1px solid $nav-tabs-link-hover-border-color;
margin-bottom: $spacer-y;
}
.first .ui-tabs-anchor {
margin-left: 0;
padding-left: 0;
}
.ui-tabs .ui-tabs-nav {
margin-left: $panel-padding-x;
margin-right: $panel-padding-x;
float: none;
border-bottom: 1px solid $nav-tabs-link-hover-border-color;
margin-bottom: $spacer-y;
}
}
@ -494,7 +490,6 @@ body.cms {
margin-right: -20px;
}
.ui-widget-header {
border: 0;
background: none;
@ -525,8 +520,8 @@ body.cms {
float: none;
font-weight: normal;
color: $color-text;
line-height: $grid-y * 4;
padding: 0 $grid-x*1.5 0;
padding: $nav-link-padding;
line-height: $line-height-base;
&.icon-button {
@extend a.icon-button;
@ -537,6 +532,10 @@ body.cms {
// correctly right-align last tab
margin-right: 0;
}
&+li {
margin-left: $spacer-x / 2;
}
}
//jquery UI override
@ -552,11 +551,8 @@ body.cms {
background: transparent;
a {
line-height: 28px;
padding-top: 12px;
padding-bottom: 5px;
color: lighten($color-text, 10%);
border-bottom: 3px solid transparent;
border-bottom: $nav-tabs-link-border-width solid transparent;
&:hover {
color: $color-text;
@ -570,9 +566,8 @@ body.cms {
a {
border-color: #66727d;
padding-left: 0;
padding-right: 0;
margin: 0 12px 0;
padding-left: $spacer-x / 4;
padding-right: $spacer-x / 4;
color: $color-text;
}
}
@ -620,19 +615,17 @@ body.cms {
.ui-tabs.cms-tabset-primary .ui-tabs-nav,
.ui-tabs .ui-tabs-nav.cms-tabset-nav-primary,
.ui-tabs .cms-content-header-tabs .ui-tabs-nav {
margin-top: 0;
margin-top: -$spacer-y * .625; // Same as toolbar padding
float: none; // parent container is already right floated
li {
margin-right: 0; // tabs are directly adjacent
margin-top: 0;
a {
a {
margin: 0;
line-height: 41px;
padding-top: 0;
padding-bottom: 0;
}
}
}
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr, .ui-corner-tl {
border-radius:0;
@ -640,28 +633,27 @@ body.cms {
.ui-state-default {
background: none;
border-top: none;
border: none;
border-top: 0;
border: 0;
}
.ui-state-active {
box-shadow: none;
background: transparent;
border-top: none;
border: none;
z-index:2;
border: 0;
z-index: 2;
a {
border-bottom: 3px solid #66727d;
padding: 0;
margin: 0 12px 0;
a,
.nav-link {
border-bottom: $nav-tabs-link-border-width solid $nav-tabs-active-link-hover-color;
padding: $nav-link-padding;
}
}
}
.cms-content-header-tabs {
float: right;
margin-top: 9px;
margin-top: $spacer-y * .625; // Same as toolbar padding
&.icon-button-group-tabs {
margin-top: 12px;
@ -673,16 +665,20 @@ body.cms {
float: none;
padding: 0;
border-bottom: 1px solid $color-button-generic-border;
margin: 0 16px;
margin: 0 $grid-gutter-width-half;
li {
// Align tab content with gutter (supports multiple rows of tabs)
margin: 0 ($grid-x * .5) -1px ($grid-x * -1.5);
margin: 0 0 -1px;
&:first-child {
margin-left: 0;
&+li {
margin-left: $spacer-x / 2;
}
}
.nav-link {
padding: $nav-link-padding;
}
}
/** -------------------------------------------------------