diff --git a/admin/client/src/sections/campaign-admin/list.js b/admin/client/src/sections/campaign-admin/list.js
index 9515f65a2..deeeb91b3 100644
--- a/admin/client/src/sections/campaign-admin/list.js
+++ b/admin/client/src/sections/campaign-admin/list.js
@@ -93,7 +93,7 @@ class CampaignListContainer extends SilverStripeComponent {
{accordionGroups}
-
+
{this.renderButtonToolbar()}
diff --git a/admin/client/src/sections/campaign-admin/styles.scss b/admin/client/src/sections/campaign-admin/styles.scss
index 98cfba991..b6a9e01c9 100644
--- a/admin/client/src/sections/campaign-admin/styles.scss
+++ b/admin/client/src/sections/campaign-admin/styles.scss
@@ -8,8 +8,8 @@
}
.list-group-item {
- padding-left: #{$spacer-y * 1.25};
- padding-right: #{$spacer-y * 1.25};
+ padding-left: $spacer-y;
+ padding-right: $spacer-y;
min-height: 64px;
cursor: pointer;
text-decoration: none;
diff --git a/admin/client/src/styles/_layout.scss b/admin/client/src/styles/_layout.scss
index 585f5fa6a..10ab3c5a8 100644
--- a/admin/client/src/styles/_layout.scss
+++ b/admin/client/src/styles/_layout.scss
@@ -43,23 +43,47 @@
}
}
}
-.south-actions {
- height: $toolbar-total-height;
- position: absolute;
- bottom: 0;
- width: 100%;
- border-top: 1px solid $border-color;
- background-color: $body-bg;
- padding: $spacer-y*.625 $spacer-x;
+
+
+// TOOLBARS
+.toolbar {
+ width: 100%; // Todo: replace with mixin @include make-container();
+ padding-left: $spacer-x; // Todo: replace with mixin @include make-container();
+ padding-right: $spacer-x; // Todo: replace with mixin @include make-container();
+ height: $toolbar-total-height;
+ background-color: $body-bg;
+
+ .btn-toolbar {
+ // TODO Remove '.cms .btn-toolbar' override
+ margin-top: 0;
+ margin-bottom: 0;
+ }
}
-.content-toolbar {
+// Northern bar containing breadcrum, tabs etc.
+.toolbar--north {
+ @extend .cms-content-header; // Todo: Remove dependency on .cms-content-header and use breadcrumb component
@extend .toolbar;
+ display: block;
+ background-image: none;
+ background-color: $background-north;
+ border-bottom: 1px solid $border-color;
+ z-index: 60;
+}
+
+// Secondary content actions eg. Add page button
+.toolbar--content {
+ @extend .toolbar;
+ padding-top: $spacer-y*.625;
+ padding-bottom: $spacer-y*.625;
margin-bottom: $spacer-y/2;
}
-.cms-south-actions {
+// Primary content actions
+.toolbar--south {
@extend .toolbar;
+ padding-top: $spacer-y*.625;
+ padding-bottom: $spacer-y*.625;
position: absolute;
bottom: 0;
border-top: 1px solid $border-color;
diff --git a/admin/client/src/styles/_variables.scss b/admin/client/src/styles/_variables.scss
index f5c8487f1..476a659ea 100644
--- a/admin/client/src/styles/_variables.scss
+++ b/admin/client/src/styles/_variables.scss
@@ -145,8 +145,8 @@ $container-max-widths: (
//
// Set the number of columns and specify the width of the gutters.
-// $grid-columns: 12;
-$grid-gutter-width: 2.4615rem; // now 32px, was 1.875rem; ~ 30px
+// $grid-columns: 12;
+$grid-gutter-width: $spacer*2;
// Typography
@@ -386,7 +386,7 @@ $btn-danger-border: transparent;
// Used for ui layout which contains main actions, seconday page action, top breadcrumbs and navigation bars.
$toolbar-height: 52px;
-$toolbar-total-height: $toolbar-height + 1px; // Add border
+$toolbar-total-height: $toolbar-height + 1px; // Include border
// Navbar
@@ -648,14 +648,8 @@ $navbar-padding-vertical: ($spacer / 2);
// Breadcrumbs
-// $breadcrumb-padding-vertical: .75rem;
-// $breadcrumb-padding-horizontal: 1rem;
-//
-// $breadcrumb-bg: $gray-lighter;
-// $breadcrumb-divider-color: $gray-light;
-// $breadcrumb-active-color: $gray-light;
-// $breadcrumb-divider: "/";
-
+$breadcrumb-padding-vertical: 7px;
+$breadcrumb-padding-horizontal: 0;
$breadcrumb-bg: transparent;
$breadcrumb-divider-color: $border-color-dark;
$breadcrumb-active-color: $body-color;
diff --git a/admin/client/src/styles/bundle.scss b/admin/client/src/styles/bundle.scss
index 3abe335b9..7ef44049c 100644
--- a/admin/client/src/styles/bundle.scss
+++ b/admin/client/src/styles/bundle.scss
@@ -33,7 +33,6 @@
@import "../components/form-action/styles";
@import "../components/grid-field/styles";
@import "../components/hidden-field/styles";
-@import "../components/north-header/styles";
@import "../components/preview/styles";
// Layout and sections
diff --git a/admin/client/src/styles/legacy/_menu.scss b/admin/client/src/styles/legacy/_menu.scss
index 80b2d6a7f..a9436d1ad 100644
--- a/admin/client/src/styles/legacy/_menu.scss
+++ b/admin/client/src/styles/legacy/_menu.scss
@@ -9,11 +9,12 @@
.cms-logo-header {
position: relative !important;
- top:auto !important;
- height:auto !important;
+ top: auto !important;
+ height: auto !important; // Required for JLayout
padding: 0;
line-height: 24px;
background-color: $color-brand-bg;
+ min-height: $toolbar-total-height*2;
span {
color: $color-text-light;
@@ -28,7 +29,7 @@
}
.cms-logo {
- box-shadow: inset 0 -1px darken($color-brand-bg, 4%);
+ border-bottom: 1px solid darken($color-brand-bg, 4%);
overflow: hidden;
padding: $grid-y*1.5 8px;
position: relative;
@@ -173,7 +174,7 @@
}
.cms-panel-toggle {
- height: 53px;
+ height: $toolbar-total-height;
&.south {
background-color: $color-theme-bg;
diff --git a/admin/client/src/styles/legacy/_style.scss b/admin/client/src/styles/legacy/_style.scss
index 6a990cd45..d1b97dcbb 100644
--- a/admin/client/src/styles/legacy/_style.scss
+++ b/admin/client/src/styles/legacy/_style.scss
@@ -251,6 +251,9 @@ body.cms {
padding-top: 0;
overflow-x: hidden;
}
+ .cms-panel-toggle.south {
+ border-top: 1px solid $color-light-separator;
+ }
}
}