Update spacing to be consistent throughout

Uses bootstrap $gutters rather than $spacer even though they are based
of the same value.
Improves alignment of a few things but mostly unnoticeable.
This commit is contained in:
Paul Clarke 2016-05-10 14:49:09 +12:00
parent 2b1c01bbc0
commit 26b84ab488
8 changed files with 42 additions and 40 deletions

File diff suppressed because one or more lines are too long

View File

@ -6,9 +6,9 @@
.accordion__title {
margin-bottom: 0;
margin-left: -$spacer-y;
margin-right: -$spacer-y;
padding: $spacer-x * .75 $spacer-y;
margin-left: -$grid-gutter-width / 2;
margin-right: -$grid-gutter-width / 2;
padding: $spacer-y * .75 $grid-gutter-width / 2;
position: relative;
display: block;
font-size: $font-size-sm;
@ -20,7 +20,7 @@
border-bottom: 1px solid $border-color;
&::before {
padding: $spacer-x * .75 $spacer-y;
padding: $spacer-y * .75 $grid-gutter-width / 2;
position: absolute;
right: 0;
top: 0;

View File

@ -1,4 +1,4 @@
.form-component {
padding-top: $spacer-y;
margin-top: $spacer-y / 2;
padding-bottom: $spacer-y;
}

View File

@ -1,16 +1,18 @@
// List-group, based on Bootstraps list-group
.list-group {
margin-left: -$spacer-y;
margin-right: -$spacer-y;
margin-left: -$grid-gutter-width / 2;
margin-right: -$grid-gutter-width / 2;
border-bottom: 1px solid $border-color-light;
margin-bottom: $spacer-y * .75;
}
.list-group-item {
padding-left: $spacer-y;
padding-right: $spacer-y;
min-height: 64px;
padding-top: $spacer-y * .625;
padding-right: $grid-gutter-width / 2;
padding-bottom: $spacer-y * .625;
padding-left: $grid-gutter-width / 2;
min-height: 65px; // img height plus border
cursor: pointer;
text-decoration: none;
transition: opacity .2s ease-in-out;
@ -48,7 +50,7 @@
display: block;
background: $gray-lighter;
float: left;
margin: -12px 12px 0 #{0 - $spacer-y};
margin: -12px 12px 0 #{0 - $grid-gutter-width / 2};
}
.list-group-item__info {

View File

@ -24,7 +24,7 @@
// Secondary content actions eg. Add page button
.toolbar--content {
padding: $spacer-y * .625 $spacer-x * .75;
padding: $spacer-y * .625 $spacer-x * .625;
margin-bottom: $spacer-y / 2;
}

View File

@ -8,9 +8,9 @@
// Used as a base for components: GridField.
.table {
margin-left: -$spacer-x;
margin-right: -$spacer-x;
min-width: calc(100% + #{$spacer-x * 2});
margin-left: #{0 - $grid-gutter-width / 2};
margin-right: #{0 - $grid-gutter-width / 2};
min-width: calc(100% + #{$grid-gutter-width});
margin-bottom: $spacer-y * 2;
border-top: 0;
@ -29,11 +29,11 @@
line-height: 20px;
&:first-child {
padding-left: #{$spacer-x + $spacer-x * .25};
padding-left: #{$grid-gutter-width / 2};
}
&:last-child {
padding-right: #{$spacer-x + $spacer-x * .25};
padding-right: #{$grid-gutter-width / 2};
}
}

View File

@ -147,8 +147,8 @@ $container-max-widths: (
//
// Set the number of columns and specify the width of the gutters.
// $grid-columns: 12;
$grid-gutter-width: $spacer * 2;
$grid-columns: 12;
$grid-gutter-width: $spacer * 2.5; // 40px
// Typography
@ -190,11 +190,11 @@ $line-height: 1.539;
$line-height-base: 20px; // can be used with varying font-sizes, holds grid sizing
$headings-margin-bottom: $spacer;
// $headings-font-family: inherit;
// $headings-font-weight: 500;
// $headings-line-height: 1.1;
// $headings-color: inherit;
//
$headings-font-family: inherit;
$headings-font-weight: 500;
$headings-line-height: 1.1;
$headings-color: inherit;
// $lead-font-size: 1.25rem;
// $lead-font-weight: 300;
//
@ -264,7 +264,7 @@ $btn-primary-bg: $brand-success;
$btn-primary-border: $btn-primary-bg;
$btn-primary-shadow: darken($btn-primary-bg, 6%);
$btn-secondary-color: $body-color;
$btn-secondary-color: $body-color-light;
$btn-secondary-bg: $gray-lighter;
$btn-secondary-border: $border-color-dark;

View File

@ -71,17 +71,17 @@ body.cms {
}
.cms-content-header { // Todo: should add .container-fluid to markup or extend .container-fluid
padding-left: $spacer-x;
padding-right: $spacer-x;
min-width: 100%;
z-index: 60;
min-height: 52px;
background: {
image: url(../images/textures/cms_content_header.png);
repeat: repeat;
position: left bottom;
color: $color-darker-bg;
}
padding-left: $grid-gutter-width / 2;
padding-right: $grid-gutter-width / 2;
min-width: 100%;
z-index: 60;
min-height: 52px;
background: {
image: url(../images/textures/cms_content_header.png);
repeat: repeat;
position: left bottom;
color: $color-darker-bg;
}
a {
color: $color-text-blue-link;
@ -678,7 +678,7 @@ body.cms {
.cms-content-header-tabs {
float: right;
margin-top: $grid-y*1.5;
margin-top: $spacer-y * .625;
&.icon-button-group-tabs {
margin-top: 12px;
@ -1037,7 +1037,7 @@ body.cms {
.cms-content-toolbar {
min-height: 29px;
display: block;
margin: $grid-y*1.5 0 0;
margin: $spacer-y * .625 0 0;
padding-bottom: 0;
@include legacy-pie-clearfix();
border-bottom: 0;