So, as usual, npx gulp or npx gulp sass or npx gulp watch are your tools for working with SASS in this extension.
Of course, this means new npm dependencies:
Styling
A separate page partial was created. Please note, not all the code is presented in the snippet below.
// we use this border a lot in this file, so a var was created
$pivot-report-border: solid 1px $gray-light;
// same as above
$crm-standard-half-gap: $crm-standard-gap / 2;
#pivot-report-config {
// we'd like content be on a white background
background-color: $crm-white;
border-radius: $border-radius-child;
padding: $crm-standard-half-gap;
.report-config-save-new-btn,
.report-config-save-btn,
.report-config-delete-btn {
// Aligns the top of the button with the top of the selector
margin-bottom: -14px;
.pivot-report-export-button {
margin-left: $crm-standard-half-gap;
// Makes the gap exactly 20px between buttons and bottom edge
margin-top: -$crm-standard-half-gap;
#pivot-report-preloader {
...
.progress {
box-shadow: none;
margin-bottom: 0;
margin-top: $crm-standard-half-gap;
#pivot-report-table {
border: 0;
margin-top: $crm-standard-gap;
.pvtUi {
border: 0;
.pvtAxisContainer,
.pvtVals,
.pvtRendererArea {
background-color: $crm-white;
border: 0;
.pvtAxisContainer {
> li {
background-color: $gray-lighter;
border: $pivot-report-border;
border: 0;
margin-bottom: $padding-base-vertical;
&:last-of-type {
margin-bottom: 0;
// hovering is very important, this tells you that the elem is interactive
&:hover {
background-color: $gray-light;
// to feel the depth while dragging
&.ui-sortable-helper {
box-shadow: $box-shadow;
&.pvtPlaceholder {
background-color: transparent;
// dashed because it is a placeholder for a drop
border: dashed 1px $crm-gray-matte;
// has the same height as 1 text-line elem, so no UI jumping
height: $font-size-medium + $crm-standard-gap;
&.pvtRows {
// this is a TD so we need to explicitly say where the rounding is
border-radius: 0 0 0 4px;
// also add a border so it is separated from other TD
border-right: $pivot-report-border;
Conditional styling inclusion
We include the styling only if Shoreditch is enabled:
Overview
This PR:
Note: please use NodeJS v8.9.4 for building SASS files.
Before
After
Technical Details
Gulp & SASS
Gulp file was added for SASS compilation, minification etc + linters. We have 2 standard tasks here:
sass
andwatch
:So, as usual,
npx gulp
ornpx gulp sass
ornpx gulp watch
are your tools for working with SASS in this extension.Of course, this means new npm dependencies:
Styling
A separate page partial was created. Please note, not all the code is presented in the snippet below.
Conditional styling inclusion
We include the styling only if Shoreditch is enabled:
Refactoring
Existing CSS files were automatically fixed with a linter. No manual changes were applied.
Testing
The styling is isolated to specific IDs and classes, so only manual tests were performed.