diff --git a/themes/finc/scss/_customMixins.scss b/themes/finc/scss/_customMixins.scss new file mode 100644 index 0000000000000000000000000000000000000000..f37f52d777ae99c993725905f58226dfd0b5e6d5 --- /dev/null +++ b/themes/finc/scss/_customMixins.scss @@ -0,0 +1,21 @@ +// Right-hand border on Sidebar? Only activate when border butts right border, leave commented out for standard border +@mixin right-border-on-sidebar($border-right-width) { + border-right-width: $border-right-width; +} + +// for $border-right-width: SEE customVariables + +// Activate when Sidebar ought to be pulled to the right edge/border +@mixin pull-sidebar-to-right($margin-right-width) { + margin-right: $margin-right-width; +} + +// for $margin-right-width: SEE customVariables + +//// Pagination (Search results) AND searchtools (Search results) +//// Default is left, we use centered alignment. If left is desired, +//// comment out next mixing and '.pagination ...' and 'searchtools ...' in compiled.scss +@mixin content-centered-display-as-table { + display: table; + margin: 1.5em auto; +} diff --git a/themes/finc/scss/_customVariables.scss b/themes/finc/scss/_customVariables.scss index c85a24a6039b3d625215bfbef8153f023a7c585a..4bedb7d2ad6b88099412aa2f8cc11d640a999afa 100644 --- a/themes/finc/scss/_customVariables.scss +++ b/themes/finc/scss/_customVariables.scss @@ -88,6 +88,10 @@ $border-color: $iron !default; // Default border styles $border-default-styles: 1px solid $border-color !default; +// Width and position of Sidebar border (see customMixins.scss) -- change to "0" and "-15px" only for sidebar on the right, butting on right border +$border-right-width: 1px !default; +$margin-right-width: inherit !default; + //// PAGER $pagination-disabled-color: $gainsboro !default; @@ -176,6 +180,10 @@ $content-top-padding: $grid-gutter-width / 2 !default; //// Sidebar item padding $sidebar-item-padding: .75em 1em !default; +//// Table cell padding - adjust in themes to avoid content jumps when switching tabs +// $table-cell-padding: 5px !default; + + //// MODAL dimensions $modal-lg: 900px !default; $modal-md: 600px !default; diff --git a/themes/finc/scss/compiled.scss b/themes/finc/scss/compiled.scss index bbf32a464358bcddce10c2c31ba0c03860444132..9c8c6007249e38244a16d50dfe468732dcb5102f 100644 --- a/themes/finc/scss/compiled.scss +++ b/themes/finc/scss/compiled.scss @@ -7,7 +7,7 @@ // Do NOT EDIT compiled.css // 1. Define or re-define KEY VARIABLES and MIXINS (see 1.1 ff below) OR import your own @import 'customVariables'; -//@import 'customMixins'; +@import 'customMixins'; // 1.1 Unless imported, define standard colour variables here which are used in variables below prior to finc.scss import // e.g. $brand-primary: #008CBA !default; // bondi-blue // $brand-secondary: #e7e7e7 !default; // white-lilac @@ -1529,11 +1529,10 @@ footer { // MAIN CONTENT - END // SIDEBAR -//// pull content to right border +//// pull content to right border for sidebar right .container .sidebar { - margin-right: -15px; - &.right { + @include pull-sidebar-to-right($margin-right-width); padding-left: 0; } } @@ -1550,17 +1549,22 @@ footer { } } -//// Style facets to have the same height as items in myresearch-menu + remove right-hand borders +//// Style facets to have the same height as items in myresearch-menu .facet-group .facet, .facet-group .title { - border-right: 0; padding: $sidebar-item-padding; } -.facet-group .collapse, -.facet-group .collapsing, -.facet-group > .facet { - border-right: 0; +//// Remove right-hand borders for facets on the right only, +//// ONLY works when sidebar butts right border +.sidebar.right { + .facet-group .facet, + .facet-group .title, + .facet-group .collapse, + .facet-group .collapsing, + .facet-group > .facet { + @include right-border-on-sidebar($border-right-width); + } } ////// Pull exclude facets to the right, align with accordion/collapse triangles and headings @@ -1572,7 +1576,7 @@ footer { //// Offcanvas is used to widths of 767px ($screen-xs-max) @media only screen and (max-width: $screen-xs-max) { .offcanvas.active .sidebar { - padding-right: ($grid-gutter-width /2); + padding-right: ($grid-gutter-width / 2); } }