GPG/redesign (#8360)

* Install django-libsass - implement test .scss on grants page

* Replaces bootstrap.min.css with bootstrap.scss

* Replaces bootstrap-vue.min.css with an import to bootstrap-vue/index.scss

* Replaces vue-select.css with vue-select.scss

* Drops main.scss example from grants page

* Adds minification rules

* Moves bootstrap, bootstrap-vue, vue-select to v3/lib

* Updates bootstrap v4.3.1 -> v4.6.0

* move files

* Move all scss libs to scss/lib/*

Co-authored-by: octavioamu <[email protected]>

app/app/settings.py

@@ -79,6 +79,7 @@
 # Application definition
 INSTALLED_APPS = [
     'csp',
+    'compressor',
     'corsheaders',
     'django.contrib.admin',
     'taskapp.celery.CeleryConfig',
@@ -196,6 +197,27 @@
     },
 }]
 
+# Sass precompiler settings
+COMPRESS_PRECOMPILERS = (
+    ('text/x-scss', 'django_libsass.SassCompiler'),
+)
+STATICFILES_FINDERS = [
+    'django.contrib.staticfiles.finders.FileSystemFinder',
+    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
+    'compressor.finders.CompressorFinder'
+]
+# number of demicals allowed in sass numbers
+LIBSASS_PRECISION = 8
+# minify sass output in production
+if ENV not in ['local', 'test', 'staging', 'preview']:
+    # drop line comments
+    LIBSASS_SOURCE_COMMENTS = False
+    # minification of sass output
+    COMPRESS_CSS_FILTERS = [
+        'compressor.filters.css_default.CssAbsoluteFilter',
+        'compressor.filters.cssmin.rCSSMinFilter'
+    ]
+
 SITE_ID = env.int('SITE_ID', default=1)
 WSGI_APPLICATION = env('WSGI_APPLICATION', default='app.wsgi.application')
 

app/assets/v2/scss/lib/bootstrap-vue/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016-2020 - BootstrapVue
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

app/assets/v2/scss/lib/bootstrap-vue/_custom-controls.scss

@@ -0,0 +1,30 @@
+// Special styling for some BootstrapVue custom form controls that do
+// not have a native HTML input type root element (or tabindex)
+// Used by BFormSpinbutton, BFormDatepicker, BFormTimepicker, BTime, BCalendar
+.form-control {
+  // Adds focus styling to the form-control class (via the focus class)
+  // Specifically when we are using non focusable elements, or when true focus
+  // is within the `.form-control` element.
+  // Mimics the `.form-control:focus` styling
+  &.focus {
+    color: $input-focus-color;
+    background-color: $input-focus-bg;
+    border-color: $input-focus-border-color;
+    outline: 0;
+    @if $enable-shadows {
+      box-shadow: $input-box-shadow, $input-focus-box-shadow;
+    } @else {
+      box-shadow: $input-focus-box-shadow;
+    }
+
+    &.is-valid {
+      border-color: $form-feedback-valid-color;
+      box-shadow: 0 0 0 $input-focus-width rgba($form-feedback-valid-color, 0.25);
+    }
+
+    &.is-invalid {
+      border-color: $form-feedback-invalid-color;
+      box-shadow: 0 0 0 $input-focus-width rgba($form-feedback-invalid-color, 0.25);
+    }
+  }
+}

app/assets/v2/scss/lib/bootstrap-vue/_utilities.scss

@@ -0,0 +1,22 @@
+// --- BootstrapVue utility / helper classes ---
+
+$bv-utility-classes-defined: false !default;
+
+// Make sure to include these style definitions only once
+@if $bv-utility-classes-defined == false {
+  $bv-utility-classes-defined: true;
+
+  // No focus outline helper (use sparingly)
+  .bv-no-focus-ring:focus {
+    outline: none;
+  }
+
+  // Create `.bv-d-<bp>-down-none` helper classes
+  @each $breakpoint in map-keys($grid-breakpoints) {
+    @include media-breakpoint-down($breakpoint) {
+      .bv-d-#{$breakpoint}-down-none {
+        display: none !important;
+      }
+    }
+  }
+}

app/assets/v2/scss/lib/bootstrap-vue/_variables.scss

@@ -0,0 +1,170 @@
+// --- BootstrapVue custom SCSS variables ---
+//
+// Users can override these variables in their custom SCSS
+//
+// Variables beginning with `$bv-` are used to enable/disable specific section CSS generation
+// Variables beginning with `$b-` are used to control values within the CSS generation
+
+// --- Custom inputs (adds sizing support) ---
+
+// Indicator height (and sometimes width)
+$b-custom-control-indicator-size-lg: $custom-control-indicator-size * 1.25 !default;
+$b-custom-control-indicator-size-sm: $custom-control-indicator-size * 0.875 !default;
+
+// Indicator background
+$b-custom-control-indicator-bg-size-lg: $custom-control-indicator-bg-size !default;
+$b-custom-control-indicator-bg-size-sm: $custom-control-indicator-bg-size !default;
+
+// Gutter widths
+$b-custom-control-gutter-lg: $custom-control-gutter * 1.25 !default;
+$b-custom-control-gutter-sm: $custom-control-gutter * 0.875 !default;
+
+// Custom radio sizes (uses defaults of 50%, since radios are round)
+$b-custom-radio-indicator-border-radius-lg: $custom-radio-indicator-border-radius !default;
+$b-custom-radio-indicator-border-radius-sm: $custom-radio-indicator-border-radius !default;
+
+// Custom checkbox sizes
+$b-custom-checkbox-indicator-border-radius-lg: $border-radius-lg !default;
+$b-custom-checkbox-indicator-border-radius-sm: $border-radius-sm !default;
+
+// Custom switch sizes
+$b-custom-switch-width-lg: $b-custom-control-indicator-size-lg * 1.75 !default;
+$b-custom-switch-width-sm: $b-custom-control-indicator-size-sm * 1.75 !default;
+$b-custom-switch-indicator-border-radius-lg: $b-custom-control-indicator-size-lg / 2 !default;
+$b-custom-switch-indicator-border-radius-sm: $b-custom-control-indicator-size-sm / 2 !default;
+$b-custom-switch-indicator-size-lg: calc(
+  #{$b-custom-control-indicator-size-lg} - #{$custom-control-indicator-border-width * 4}
+) !default;
+$b-custom-switch-indicator-size-sm: calc(
+  #{$b-custom-control-indicator-size-sm} - #{$custom-control-indicator-border-width * 4}
+) !default;
+
+// Custom file sizes
+$b-custom-file-font-size-lg: $input-font-size-lg !default;
+$b-custom-file-font-size-sm: $input-font-size-sm !default;
+$b-custom-file-line-height-lg: $input-line-height-lg !default;
+$b-custom-file-line-height-sm: $input-line-height-sm !default;
+$b-custom-file-height-lg: $input-height-lg !default;
+$b-custom-file-height-sm: $input-height-sm !default;
+$b-custom-file-border-radius-lg: $input-border-radius-lg !default;
+$b-custom-file-border-radius-sm: $input-border-radius-sm !default;
+$b-custom-file-padding-y-lg: $input-padding-y-lg !default;
+$b-custom-file-padding-y-sm: $input-padding-y-sm !default;
+$b-custom-file-padding-x-lg: $input-padding-x-lg !default;
+$b-custom-file-padding-x-sm: $input-padding-x-sm !default;
+$b-custom-file-height-inner-lg: calc(
+  #{$b-custom-file-line-height-lg * 1em} + #{$b-custom-file-padding-y-lg * 2}
+) !default;
+$b-custom-file-height-inner-sm: calc(
+  #{$b-custom-file-line-height-sm * 1em} + #{$b-custom-file-padding-y-sm * 2}
+) !default;
+
+// --- Icons ---
+
+$b-icon-vertical-offset: -0.15em;
+
+// Animations
+$b-icon-animation-cylon-duration: 0.75s !default;
+$b-icon-animation-cylon-vertical-duration: $b-icon-animation-cylon-duration !default;
+$b-icon-animation-fade-duration: 0.75s !default;
+$b-icon-animation-spin-duration: 2s !default;
+$b-icon-animation-spin-reverse-duration: $b-icon-animation-spin-duration !default;
+$b-icon-animation-spin-pulse-duration: 1s !default;
+$b-icon-animation-spin-reverse-pulse-duration: $b-icon-animation-spin-pulse-duration !default;
+$b-icon-animation-throb-duration: 0.75s !default;
+
+// --- Sidebar ---
+
+$b-sidebar-width: 320px !default;
+$b-sidebar-transition-duration: 0.3s !default;
+$b-sidebar-zindex: calc(#{$zindex-fixed} + 5) !default;
+$b-sidebar-header-font-size: 1.5rem !default;
+$b-sidebar-header-padding-y: $navbar-padding-y !default;
+$b-sidebar-header-padding-x: $navbar-padding-x !default;
+
+// --- Tables ---
+
+// Table busy state
+$b-table-busy-opacity: 0.55 !default;
+
+// Table sorting
+$b-table-sort-icon-bg-width: 0.65em !default;
+$b-table-sort-icon-bg-height: 1em !default;
+// Sort icons are square, but "squished" horizontally by the above variables
+$b-table-sort-icon-bg-not-sorted: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'><path fill='black' opacity='.3' d='M51 1l25 23 24 22H1l25-22zM51 101l25-23 24-22H1l25 22z'/></svg>") !default;
+$b-table-sort-icon-bg-ascending: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'><path fill='black' d='M51 1l25 23 24 22H1l25-22z'/><path fill='black' opacity='.3' d='M51 101l25-23 24-22H1l25 22z'/></svg>") !default;
+$b-table-sort-icon-bg-descending: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'><path fill='black' opacity='.3' d='M51 1l25 23 24 22H1l25-22z'/><path fill='black' d='M51 101l25-23 24-22H1l25 22z'/></svg>") !default;
+// Icons to use on dark table or dark header/footer (lighter color icons)
+// We simply just replace the fill color 'black' white 'white'
+$b-table-sort-icon-bg-dark-not-sorted: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'><path fill='white' opacity='.3' d='M51 1l25 23 24 22H1l25-22zM51 101l25-23 24-22H1l25 22z'/></svg>") !default;
+$b-table-sort-icon-bg-dark-ascending: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'><path fill='white' d='M51 1l25 23 24 22H1l25-22z'/><path fill='white' opacity='.3' d='M51 101l25-23 24-22H1l25 22z'/></svg>") !default;
+$b-table-sort-icon-bg-dark-descending: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'><path fill='white' opacity='.3' d='M51 1l25 23 24 22H1l25-22z'/><path fill='white' d='M51 101l25-23 24-22H1l25 22z'/></svg>") !default;
+
+// Flag to enable sticky table header and column CSS generation
+$bv-enable-table-sticky: true !default;
+// Default max-height for tables with sticky headers
+$b-table-sticky-header-max-height: 300px !default;
+
+// Flag to enable table stacked CSS generation
+$bv-enable-table-stacked: true !default;
+// Table stacked defaults
+$b-table-stacked-heading-width: 40% !default;
+$b-table-stacked-gap: 1rem !default;
+
+// Bootstrap v4.3 is missing the "active" variant for dark tables
+// Which translates to `bg-active`, but only for tables
+$table-dark-active-bg: $table-dark-hover-bg !default;
+
+// --- Toasts ---
+
+// Toaster defaults
+$b-toaster-zindex: 1100 !default;
+$b-toaster-offset-top: 0.5rem !default;
+$b-toaster-offset-bottom: $b-toaster-offset-top !default;
+$b-toaster-offset-left: $b-toaster-offset-top !default;
+$b-toaster-offset-right: $b-toaster-offset-top !default;
+
+// Default toast opacity
+// Value from 0 to 1, or 0% to 100%
+// Bootstrap default is 0.85 (extracted from the `$toast-background-color` value)
+// Bootstrap does not have this as a variable, so we add it in.
+$b-toast-background-opacity: alpha($toast-background-color) !default;
+
+// Toast variant levels wrt theme color value
+$b-toast-bg-level: $alert-bg-level !default;
+$b-toast-border-level: $alert-border-level !default;
+$b-toast-color-level: $alert-color-level !default;
+
+// --- Tooltips ---
+
+// Flag to enable tooltip variant CSS generation
+$bv-enable-tooltip-variants: true !default;
+
+// Tooltip background variant level wrt theme color value
+$b-tooltip-bg-level: 0 !default;
+
+// --- Popovers ---
+
+// Flag to enable popover variant CSS generation
+$bv-enable-popover-variants: true !default;
+
+// Popover variant levels wrt theme color value
+$b-popover-bg-level: $alert-bg-level !default;
+$b-popover-border-level: $alert-border-level !default;
+$b-popover-color-level: $alert-color-level !default;
+
+// --- Avatar ---
+
+$b-avatar-size: 2.5rem !default;
+$b-avatar-size-sm: 1.5rem !default;
+$b-avatar-size-lg: 3.5rem !default;
+$b-avatar-font-size-scale: 0.4 !default;
+$b-avatar-badge-font-size-scale: $b-avatar-font-size-scale * 0.7 !default;
+
+// --- Skeleton ---
+
+$b-skeleton-background-color: rgba(0, 0, 0, 0.12) !default;
+$b-skeleton-loading-cursor: wait !default;
+$b-skeleton-animation-duration: 1.75s !default;
+$b-skeleton-text-spacing: map-get($spacers, 1) !default;
+$b-skeleton-btn-width: 75px !default;