diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 00000000..a4d2a320 --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,27 @@ +module.exports = { + "env": { + "browser": true, + "es6": true + }, + "overrides": [ + { + "env": { + "node": true + }, + "files": [ + ".eslintrc.{js,cjs}" + ], + "parserOptions": { + "sourceType": "script" + } + } + ], + "parserOptions": { + "ecmaVersion": "latest" + }, + "plugins": [ + "unicorn" + ], + "rules": { + } +} \ No newline at end of file diff --git a/Makefile b/Makefile index 55d30a6e..5aed716b 100644 --- a/Makefile +++ b/Makefile @@ -18,7 +18,7 @@ ASSETS_DIR := $(srcDir)/htdocs/static installDirs ?= /usr/bin/install -d installFiles ?= /usr/bin/install -p -m 644 DOCKER ?= docker -ESCHECK ?= es-check +ESCHECK ?= eslint NPM ?= npm PIP ?= pip PYTHON ?= python @@ -186,11 +186,10 @@ $(installTop)/.npm/$(APP_NAME)-packages: $(srcDir)/package.json $(installFiles) $(libDir)/node_modules/jquery/dist/jquery.js $(ASSETS_DIR)/vendor $(installFiles) $(libDir)/node_modules/moment/moment.js $(ASSETS_DIR)/vendor $(installFiles) $(libDir)/node_modules/moment-timezone/builds/moment-timezone-with-data.js $(ASSETS_DIR)/vendor - $(installFiles) $(libDir)/node_modules/popper.js/dist/umd/popper.js $(ASSETS_DIR)/vendor - $(installFiles) $(libDir)/node_modules/popper.js/dist/umd/popper-utils.js $(ASSETS_DIR)/vendor + $(installFiles) $(libDir)/node_modules/@popperjs/core/dist/umd/popper.min.js* $(ASSETS_DIR)/vendor $(installFiles) $(libDir)/node_modules/vue/dist/vue.js $(ASSETS_DIR)/vendor $(installFiles) $(libDir)/node_modules/lodash/lodash.js $(ASSETS_DIR)/vendor - [ -f $(binDir)/es-check ] || (cd $(binDir) && ln -s ../lib/node_modules/.bin/es-check es-check) + [ -e $(binDir)/eslint ] || (cd $(binDir) && ln -s ../lib/node_modules/.bin/eslint eslint) [ -f $(binDir)/sassc ] || (cd $(binDir) && ln -s ../lib/node_modules/.bin/sass sassc) [ -f $(binDir)/swagger-cli ] || (cd $(binDir) && ln -s ../lib/node_modules/.bin/swagger-cli swagger-cli) [ -f $(binDir)/webpack ] || (cd $(binDir) && ln -s ../lib/node_modules/.bin/webpack webpack) diff --git a/README.md b/README.md index 917c22db..b0251018 100644 --- a/README.md +++ b/README.md @@ -57,7 +57,7 @@ Development You will want to toggle `DEBUG` on in the site.conf file. 

-    $ diff -u installTop/etc/djaoapp/site.conf
+    $ diff -u installTop/etc/djaopsp/site.conf
     -DEBUG = False
     +DEBUG = True
 
@@ -72,6 +72,8 @@ You will want to toggle `DEBUG` on in the site.conf file.
     $ python manage.py runserver --nostatic
+The app will be accessible at http://localhost:8000/djaopsp + Release Notes ============= diff --git a/djaopsp/static/scss/base/base.scss b/djaopsp/static/scss/base/base.scss index 8960658a..45f6e49d 100644 --- a/djaopsp/static/scss/base/base.scss +++ b/djaopsp/static/scss/base/base.scss @@ -1,4 +1,7 @@ // Core variables and mixins + +// has to be imported first +@import "variables.scss"; @import "../vendor/bootstrap/bootstrap.scss"; @import "../vendor/font-awesome.scss"; @import "../vendor/matrix-chart.scss"; diff --git a/djaopsp/static/scss/base/custom.scss b/djaopsp/static/scss/base/custom.scss index 612f1f00..2919e2b0 100644 --- a/djaopsp/static/scss/base/custom.scss +++ b/djaopsp/static/scss/base/custom.scss @@ -56,7 +56,12 @@ $jumbotron-shadow-end-color-dark: $jumbotron-shadow-start-color; //.tick line {display: none;} header .nav-item { - border-left: 1px solid #fff; + border-left: 1px solid $white; + padding: 0 10px; +} + +header .nav-item>.nav-link { + color: $white; } .navbar-top { @@ -74,11 +79,16 @@ header .nav-item { } .table-assessment { - tbody:nth-of-type(#{$table-striped-order}) { + $table-accent-bg: rgba(0, 0, 0, 0.05); + tbody:nth-of-type(#{$table-striped-order}) td { background-color: $table-accent-bg; } } +.tile-link { + text-decoration: none; +} + .practice-required { border-right: 1px solid #FF2020 !important; } @@ -124,6 +134,7 @@ header .nav-item { .progressbar li a { color: white; + text-decoration: none; } .progressbar li a>.progressbar-step { @@ -260,7 +271,7 @@ h2.icon-row-title { .improvement-planning .inner { background: #eafcd4; - border: 1px theme-color(primary) solid; + border: 1px map-get($theme-colors, "primary") solid; } .chart-title { @@ -312,15 +323,11 @@ b, strong{ sticking the footer to the bottom while introducing a "border" above it. */ #main{ /*overflow:auto;*/ + min-height: 100%; padding-bottom: $footer-height;/* stick to bottom must be in pixel (see comment abolve) */ } -header { - background: #3ca65b; - color: white; -} - #scroll-page { position:relative; text-align: center; @@ -1034,6 +1041,13 @@ a.text-grey{ color:#54BAD8; } +.bestpractice>a { + text-decoration: none; + &:hover { + text-decoration: underline; + } +} + .bestpractice>a.title, .bestpractice-0>a.title, .bestpractice-1>a.title, @@ -1123,14 +1137,14 @@ a.text-grey{ } .navbar-light .navbar-nav > .login > a:hover, .login > a:focus { - background-color:#79c84a; /* darken(@login-bg, 6.5%) */ + background-color:#79c84a; /* shade-color(@login-bg, 6.5%) */ } .navbar .divider-vertical { border-right: 1px solid #ffffff; } -@include media-breakpoint-down(sm) { +@include media-breakpoint-down(md) { .navbar-collapse .nav > .divider-vertical { display: none; } @@ -1659,7 +1673,7 @@ thead{ } .choice-selected { - background-color: $secondary; + background-color: $secondary !important; } .table tr > th.sticky-cell { @@ -1713,7 +1727,7 @@ thead{ } .report-measurements-link { - color: theme-color(primary); + color: map-get($theme-colors, "primary"); } /****** Best practice detail ********/ @@ -2078,11 +2092,11 @@ color: #000; } .supplier-initiated { - background: theme-color(primary); + background: map-get($theme-colors, "primary"); } .table-striped tbody tr:nth-of-type(odd).supplier-initiated { - background: darken(theme-color(primary), 5%); + background: shade-color(map-get($theme-colors, "primary"), 5%); } .supplier-initiated a, @@ -2091,6 +2105,7 @@ color: #000; color: white; } + .verifier-notes { // background: rgb(123,233,255); background: #c4dbfa; @@ -2278,3 +2293,32 @@ pre.code{ @media print { .pagebreak { page-break-before: always; } } + + +.breadcrumb-item > a { + &, + &:active, + &:hover, + &:visited { + color: $breadcrumb-divider-color; + text-decoration: none; + } +} + +.btn-primary, +.btn-secondary { + --#{$prefix}btn-color: var(--bs-white); + --#{$prefix}btn-hover-color: var(--bs-white); +} + +.navbar-nav .nav-link { + --#{$prefix}nav-link-padding-x: 1.5rem; +} + +.pages-card-link { + text-decoration: none; + + &:hover { + text-decoration: underline; + } +} diff --git a/djaopsp/static/scss/base/pricing.scss b/djaopsp/static/scss/base/pricing.scss index 18eceab1..0329e846 100644 --- a/djaopsp/static/scss/base/pricing.scss +++ b/djaopsp/static/scss/base/pricing.scss @@ -16,7 +16,7 @@ $plan-footer-height: 70px; .plan-short:hover { cursor: pointer; - background-color: lighten(theme-color(primary), 75%); + background-color: tint-color(map-get($theme-colors, "primary"), 75%); } .plan-wrap { @@ -36,7 +36,7 @@ $plan-footer-height: 70px; .plan-pricing { - color: #111; //theme-color(secondary); + color: #111; //map-get($theme-colors, "secondary"); font-weight: bold; text-align: center !important; margin-bottom: 2rem; @@ -54,5 +54,5 @@ $plan-footer-height: 70px; font-family: 'FontAwesome'; content: "\f058"; margin: 0 18px 0 -15px; - color: theme-color(secondary); + color: map-get($theme-colors, "secondary"); } diff --git a/djaopsp/static/scss/base/variables.scss b/djaopsp/static/scss/base/variables.scss new file mode 100644 index 00000000..51f30a7e --- /dev/null +++ b/djaopsp/static/scss/base/variables.scss @@ -0,0 +1,4 @@ +$primary: #f0ad4e; +$secondary: #3ca65b; +$link-color: $secondary; +$breadcrumb-divider-color: white; \ No newline at end of file diff --git a/djaopsp/static/scss/email/email-theme.scss b/djaopsp/static/scss/email/email-theme.scss index 10c8feda..aa3a638b 100644 --- a/djaopsp/static/scss/email/email-theme.scss +++ b/djaopsp/static/scss/email/email-theme.scss @@ -98,7 +98,7 @@ ol li { .page-header { padding:10px; - border-bottom:2px solid theme-color(primary); + border-bottom:2px solid map-get($theme-colors, "primary"); } .page-header > h3 { @@ -110,7 +110,7 @@ ol li { .page-footer { text-align:center; padding-top:20px; - border-top: 2px solid theme-color(primary); + border-top: 2px solid map-get($theme-colors, "primary"); } .poweredby-logo { diff --git a/djaopsp/static/scss/vendor/bootstrap/_accordion.scss b/djaopsp/static/scss/vendor/bootstrap/_accordion.scss new file mode 100644 index 00000000..75588a5a --- /dev/null +++ b/djaopsp/static/scss/vendor/bootstrap/_accordion.scss @@ -0,0 +1,158 @@ +// +// Base styles +// + +.accordion { + // scss-docs-start accordion-css-vars + --#{$prefix}accordion-color: #{$accordion-color}; + --#{$prefix}accordion-bg: #{$accordion-bg}; + --#{$prefix}accordion-transition: #{$accordion-transition}; + --#{$prefix}accordion-border-color: #{$accordion-border-color}; + --#{$prefix}accordion-border-width: #{$accordion-border-width}; + --#{$prefix}accordion-border-radius: #{$accordion-border-radius}; + --#{$prefix}accordion-inner-border-radius: #{$accordion-inner-border-radius}; + --#{$prefix}accordion-btn-padding-x: #{$accordion-button-padding-x}; + --#{$prefix}accordion-btn-padding-y: #{$accordion-button-padding-y}; + --#{$prefix}accordion-btn-color: #{$accordion-button-color}; + --#{$prefix}accordion-btn-bg: #{$accordion-button-bg}; + --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon)}; + --#{$prefix}accordion-btn-icon-width: #{$accordion-icon-width}; + --#{$prefix}accordion-btn-icon-transform: #{$accordion-icon-transform}; + --#{$prefix}accordion-btn-icon-transition: #{$accordion-icon-transition}; + --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon)}; + --#{$prefix}accordion-btn-focus-border-color: #{$accordion-button-focus-border-color}; + --#{$prefix}accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow}; + --#{$prefix}accordion-body-padding-x: #{$accordion-body-padding-x}; + --#{$prefix}accordion-body-padding-y: #{$accordion-body-padding-y}; + --#{$prefix}accordion-active-color: #{$accordion-button-active-color}; + --#{$prefix}accordion-active-bg: #{$accordion-button-active-bg}; + // scss-docs-end accordion-css-vars +} + +.accordion-button { + position: relative; + display: flex; + align-items: center; + width: 100%; + padding: var(--#{$prefix}accordion-btn-padding-y) var(--#{$prefix}accordion-btn-padding-x); + @include font-size($font-size-base); + color: var(--#{$prefix}accordion-btn-color); + text-align: left; // Reset button style + background-color: var(--#{$prefix}accordion-btn-bg); + border: 0; + @include border-radius(0); + overflow-anchor: none; + @include transition(var(--#{$prefix}accordion-transition)); + + &:not(.collapsed) { + color: var(--#{$prefix}accordion-active-color); + background-color: var(--#{$prefix}accordion-active-bg); + box-shadow: inset 0 calc(-1 * var(--#{$prefix}accordion-border-width)) 0 var(--#{$prefix}accordion-border-color); // stylelint-disable-line function-disallowed-list + + &::after { + background-image: var(--#{$prefix}accordion-btn-active-icon); + transform: var(--#{$prefix}accordion-btn-icon-transform); + } + } + + // Accordion icon + &::after { + flex-shrink: 0; + width: var(--#{$prefix}accordion-btn-icon-width); + height: var(--#{$prefix}accordion-btn-icon-width); + margin-left: auto; + content: ""; + background-image: var(--#{$prefix}accordion-btn-icon); + background-repeat: no-repeat; + background-size: var(--#{$prefix}accordion-btn-icon-width); + @include transition(var(--#{$prefix}accordion-btn-icon-transition)); + } + + &:hover { + z-index: 2; + } + + &:focus { + z-index: 3; + border-color: var(--#{$prefix}accordion-btn-focus-border-color); + outline: 0; + box-shadow: var(--#{$prefix}accordion-btn-focus-box-shadow); + } +} + +.accordion-header { + margin-bottom: 0; +} + +.accordion-item { + color: var(--#{$prefix}accordion-color); + background-color: var(--#{$prefix}accordion-bg); + border: var(--#{$prefix}accordion-border-width) solid var(--#{$prefix}accordion-border-color); + + &:first-of-type { + @include border-top-radius(var(--#{$prefix}accordion-border-radius)); + + .accordion-button { + @include border-top-radius(var(--#{$prefix}accordion-inner-border-radius)); + } + } + + &:not(:first-of-type) { + border-top: 0; + } + + // Only set a border-radius on the last item if the accordion is collapsed + &:last-of-type { + @include border-bottom-radius(var(--#{$prefix}accordion-border-radius)); + + .accordion-button { + &.collapsed { + @include border-bottom-radius(var(--#{$prefix}accordion-inner-border-radius)); + } + } + + .accordion-collapse { + @include border-bottom-radius(var(--#{$prefix}accordion-border-radius)); + } + } +} + +.accordion-body { + padding: var(--#{$prefix}accordion-body-padding-y) var(--#{$prefix}accordion-body-padding-x); +} + + +// Flush accordion items +// +// Remove borders and border-radius to keep accordion items edge-to-edge. + +.accordion-flush { + .accordion-collapse { + border-width: 0; + } + + .accordion-item { + border-right: 0; + border-left: 0; + @include border-radius(0); + + &:first-child { border-top: 0; } + &:last-child { border-bottom: 0; } + + .accordion-button { + &, + &.collapsed { + @include border-radius(0); + } + } + } +} + +@if $enable-dark-mode { + @include color-mode(dark) { + .accordion-button::after { + --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon-dark)}; + --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon-dark)}; + } + } +} diff --git a/djaopsp/static/scss/vendor/bootstrap/_ads.scss b/djaopsp/static/scss/vendor/bootstrap/_ads.scss deleted file mode 100644 index 375a9e01..00000000 --- a/djaopsp/static/scss/vendor/bootstrap/_ads.scss +++ /dev/null @@ -1,38 +0,0 @@ -// stylelint-disable declaration-no-important, selector-max-id - -// -// Carbon ads -// - -#carbonads { - position: static; - display: block; - max-width: 400px; - padding: 15px 15px 15px 160px; - margin: 2rem 0; - overflow: hidden; - font-size: 13px; - line-height: 1.4; - text-align: left; - background-color: rgba(0, 0, 0, .05); - - a { - color: #333; - text-decoration: none; - } - - @include media-breakpoint-up(sm) { - max-width: 330px; - border-radius: 4px; - } -} - -.carbon-img { - float: left; - margin-left: -145px; -} - -.carbon-poweredby { - display: block; - color: #777 !important; -} diff --git a/djaopsp/static/scss/vendor/bootstrap/_alert.scss b/djaopsp/static/scss/vendor/bootstrap/_alert.scss index da2a98af..b8cff9b7 100644 --- a/djaopsp/static/scss/vendor/bootstrap/_alert.scss +++ b/djaopsp/static/scss/vendor/bootstrap/_alert.scss @@ -3,11 +3,25 @@ // .alert { + // scss-docs-start alert-css-vars + --#{$prefix}alert-bg: transparent; + --#{$prefix}alert-padding-x: #{$alert-padding-x}; + --#{$prefix}alert-padding-y: #{$alert-padding-y}; + --#{$prefix}alert-margin-bottom: #{$alert-margin-bottom}; + --#{$prefix}alert-color: inherit; + --#{$prefix}alert-border-color: transparent; + --#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color); + --#{$prefix}alert-border-radius: #{$alert-border-radius}; + --#{$prefix}alert-link-color: inherit; + // scss-docs-end alert-css-vars + position: relative; - padding: $alert-padding-y $alert-padding-x; - margin-bottom: $alert-margin-bottom; - border: $alert-border-width solid transparent; - @include border-radius($alert-border-radius); + padding: var(--#{$prefix}alert-padding-y) var(--#{$prefix}alert-padding-x); + margin-bottom: var(--#{$prefix}alert-margin-bottom); + color: var(--#{$prefix}alert-color); + background-color: var(--#{$prefix}alert-bg); + border: var(--#{$prefix}alert-border); + @include border-radius(var(--#{$prefix}alert-border-radius)); } // Headings for larger alerts @@ -19,6 +33,7 @@ // Provide class for links that match alerts .alert-link { font-weight: $alert-link-font-weight; + color: var(--#{$prefix}alert-link-color); } @@ -27,25 +42,27 @@ // Expand the right padding and account for the close button's positioning. .alert-dismissible { - padding-right: $close-font-size + $alert-padding-x * 2; + padding-right: $alert-dismissible-padding-r; // Adjust close link position - .close { + .btn-close { position: absolute; top: 0; right: 0; - padding: $alert-padding-y $alert-padding-x; - color: inherit; + z-index: $stretched-link-z-index + 1; + padding: $alert-padding-y * 1.25 $alert-padding-x; } } -// Alternate styles -// -// Generate contextual modifier classes for colorizing the alert. - -@each $color, $value in $theme-colors { - .alert-#{$color} { - @include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), theme-color-level($color, $alert-color-level)); +// scss-docs-start alert-modifiers +// Generate contextual modifier classes for colorizing the alert +@each $state in map-keys($theme-colors) { + .alert-#{$state} { + --#{$prefix}alert-color: var(--#{$prefix}#{$state}-text-emphasis); + --#{$prefix}alert-bg: var(--#{$prefix}#{$state}-bg-subtle); + --#{$prefix}alert-border-color: var(--#{$prefix}#{$state}-border-subtle); + --#{$prefix}alert-link-color: var(--#{$prefix}#{$state}-text-emphasis); } } +// scss-docs-end alert-modifiers diff --git a/djaopsp/static/scss/vendor/bootstrap/_algolia.scss b/djaopsp/static/scss/vendor/bootstrap/_algolia.scss deleted file mode 100644 index 4014ab97..00000000 --- a/djaopsp/static/scss/vendor/bootstrap/_algolia.scss +++ /dev/null @@ -1,141 +0,0 @@ -// stylelint-disable declaration-no-important - -// Docsearch overrides -// -// `!important` indicates overridden properties. -.algolia-autocomplete { - display: block !important; - flex: 1; - - // Menu container - .ds-dropdown-menu { - width: 100%; - min-width: 0 !important; - max-width: none !important; - padding: .75rem 0 !important; - background-color: #fff; - background-clip: padding-box; - border: 1px solid rgba(0, 0, 0, .1); - box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .175); - - @include media-breakpoint-up(md) { - width: 175%; - } - - // Caret - &::before { - display: none !important; - } - - [class^="ds-dataset-"] { - padding: 0 !important; - overflow: visible !important; - background-color: transparent !important; - border: 0 !important; - } - - .ds-suggestions { - margin-top: 0 !important; - } - } - - .algolia-docsearch-suggestion { - padding: 0 !important; - overflow: visible !important; - } - - .algolia-docsearch-suggestion--category-header { - padding: .125rem 1rem !important; - margin-top: 0 !important; - font-size: .875rem !important; - font-weight: 500 !important; - color: $bd-purple-bright !important; - border-bottom: 0 !important; - } - - .algolia-docsearch-suggestion--wrapper { - float: none !important; - padding-top: 0 !important; - } - - // Section header - .algolia-docsearch-suggestion--subcategory-column { - float: none !important; - width: auto !important; - padding: 0 !important; - text-align: left !important; - } - - .algolia-docsearch-suggestion--content { - float: none !important; - width: auto !important; - padding: 0 !important; - - // Vertical divider between column header and content - &::before { - display: none !important; - } - } - - .ds-suggestion { - &:not(:first-child) { - .algolia-docsearch-suggestion--category-header { - padding-top: .75rem !important; - margin-top: .75rem !important; - border-top: 1px solid rgba(0, 0, 0, .1); - } - } - - .algolia-docsearch-suggestion--subcategory-column { - display: none !important; - } - } - - .algolia-docsearch-suggestion--title { - display: block; - padding: .25rem 1rem !important; - margin-bottom: 0 !important; - font-size: .875rem !important; - font-weight: 400 !important; - } - - .algolia-docsearch-suggestion--text { - padding: 0 1rem .5rem !important; - margin-top: -.25rem; - font-size: .875rem !important; - font-weight: 400; - line-height: 1.25 !important; - } - - .algolia-docsearch-footer { - float: none !important; - width: auto !important; - height: auto !important; - padding: .75rem 1rem 0; - font-size: .75rem !important; - line-height: 1 !important; - color: #767676 !important; - border-top: 1px solid rgba(0, 0, 0, .1); - } - - .algolia-docsearch-footer--logo { - display: inline !important; - overflow: visible !important; - color: inherit !important; - text-indent: 0 !important; - background: none !important; - } - - .algolia-docsearch-suggestion--highlight { - color: #5f2dab; - background-color: rgba(154, 132, 187, .12); - } - - .algolia-docsearch-suggestion--text .algolia-docsearch-suggestion--highlight { - box-shadow: inset 0 -2px 0 0 rgba(95, 45, 171, .5) !important; - } - - .ds-suggestion.ds-cursor .algolia-docsearch-suggestion--content { - background-color: rgba(208, 189, 236, .15) !important; - } -} diff --git a/djaopsp/static/scss/vendor/bootstrap/_anchor.scss b/djaopsp/static/scss/vendor/bootstrap/_anchor.scss deleted file mode 100644 index 2e02390e..00000000 --- a/djaopsp/static/scss/vendor/bootstrap/_anchor.scss +++ /dev/null @@ -1,10 +0,0 @@ -.anchorjs-link { - font-weight: 400; - color: rgba($link-color, .5); - transition: color .16s linear; - - &:hover { - color: $link-color; - text-decoration: none; - } -} diff --git a/djaopsp/static/scss/vendor/bootstrap/_badge.scss b/djaopsp/static/scss/vendor/bootstrap/_badge.scss index 2082f058..cc3d2695 100644 --- a/djaopsp/static/scss/vendor/bootstrap/_badge.scss +++ b/djaopsp/static/scss/vendor/bootstrap/_badge.scss @@ -4,22 +4,26 @@ // `background-color`. .badge { + // scss-docs-start badge-css-vars + --#{$prefix}badge-padding-x: #{$badge-padding-x}; + --#{$prefix}badge-padding-y: #{$badge-padding-y}; + @include rfs($badge-font-size, --#{$prefix}badge-font-size); + --#{$prefix}badge-font-weight: #{$badge-font-weight}; + --#{$prefix}badge-color: #{$badge-color}; + --#{$prefix}badge-border-radius: #{$badge-border-radius}; + // scss-docs-end badge-css-vars + display: inline-block; - padding: $badge-padding-y $badge-padding-x; - @include font-size($badge-font-size); - font-weight: $badge-font-weight; + padding: var(--#{$prefix}badge-padding-y) var(--#{$prefix}badge-padding-x); + @include font-size(var(--#{$prefix}badge-font-size)); + font-weight: var(--#{$prefix}badge-font-weight); line-height: 1; + color: var(--#{$prefix}badge-color); text-align: center; white-space: nowrap; vertical-align: baseline; - @include border-radius($badge-border-radius); - @include transition($badge-transition); - - @at-root a#{&} { - @include hover-focus { - text-decoration: none; - } - } + @include border-radius(var(--#{$prefix}badge-border-radius)); + @include gradient-bg(); // Empty badges collapse automatically &:empty { @@ -32,23 +36,3 @@ position: relative; top: -1px; } - -// Pill badges -// -// Make them extra rounded with a modifier to replace v3's badges. - -.badge-pill { - padding-right: $badge-pill-padding-x; - padding-left: $badge-pill-padding-x; - @include border-radius($badge-pill-border-radius); -} - -// Colors -// -// Contextual variations (linked badges get darker on :hover). - -@each $color, $value in $theme-colors { - .badge-#{$color} { - @include badge-variant($value); - } -} diff --git a/djaopsp/static/scss/vendor/bootstrap/_brand.scss b/djaopsp/static/scss/vendor/bootstrap/_brand.scss deleted file mode 100644 index 2d5c5a4c..00000000 --- a/djaopsp/static/scss/vendor/bootstrap/_brand.scss +++ /dev/null @@ -1,110 +0,0 @@ -// stylelint-disable no-duplicate-selectors - -// -// Brand guidelines -// - -// Logo series wrapper -.bd-brand-logos { - display: table; - width: 100%; - margin-bottom: 1rem; - overflow: hidden; - color: #563d7c; - background-color: #f9f9f9; - border-radius: .25rem; -} - -// Individual items -.bd-brand-item { - padding: 4rem 0; - text-align: center; -} -.bd-brand-item + .bd-brand-item { - border-top: 1px solid #fff; -} -.bd-brand-logos .inverse { - color: #fff; - background-color: #563d7c; -} - -// Heading content within -.bd-brand-item h1, -.bd-brand-item h3 { - margin-top: 0; - margin-bottom: 0; -} -.bd-brand-item .bd-booticon { - margin-right: auto; - margin-left: auto; -} - -// Make the icons stand out on what is/isn't okay -// .bd-brand-item .glyphicon { -// width: 30px; -// height: 30px; -// margin: 10px auto -10px; -// line-height: 30px; -// color: #fff; -// border-radius: 50%; -// } -// .bd-brand-item .glyphicon-ok { -// background-color: #5cb85c; -// } -// .bd-brand-item .glyphicon-remove { -// background-color: #d9534f; -// } - -@media (min-width: 768px) { - .bd-brand-item { - display: table-cell; - width: 1%; - } - .bd-brand-item + .bd-brand-item { - border-top: 0; - border-left: 1px solid #fff; - } - .bd-brand-item h1 { - font-size: 4rem; - } -} - - -// -// Color swatches -// - -.color-swatches { - margin: 0 -5px; - overflow: hidden; // clearfix -} - -.color-swatch { - float: left; - width: 4rem; - height: 4rem; - margin-right: .25rem; - margin-left: .25rem; - border-radius: .25rem; - - @media (min-width: 768px) { - width: 6rem; - height: 6rem; - } -} - -// Docs colors -.color-swatches { - .bd-purple { - background-color: $bd-purple; - } - .bd-purple-light { - background-color: $bd-purple-light; - } - .bd-purple-lighter { - background-color: #e5e1ea; - } - .bd-gray { - background-color: #f9f9f9; - } -} diff --git a/djaopsp/static/scss/vendor/bootstrap/_breadcrumb.scss b/djaopsp/static/scss/vendor/bootstrap/_breadcrumb.scss index c880d305..b8252ff2 100644 --- a/djaopsp/static/scss/vendor/bootstrap/_breadcrumb.scss +++ b/djaopsp/static/scss/vendor/bootstrap/_breadcrumb.scss @@ -1,55 +1,40 @@ .breadcrumb { + // scss-docs-start breadcrumb-css-vars + --#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x}; + --#{$prefix}breadcrumb-padding-y: #{$breadcrumb-padding-y}; + --#{$prefix}breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom}; + @include rfs($breadcrumb-font-size, --#{$prefix}breadcrumb-font-size); + --#{$prefix}breadcrumb-bg: #{$breadcrumb-bg}; + --#{$prefix}breadcrumb-border-radius: #{$breadcrumb-border-radius}; + --#{$prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color}; + --#{$prefix}breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x}; + --#{$prefix}breadcrumb-item-active-color: #{$breadcrumb-active-color}; + // scss-docs-end breadcrumb-css-vars + display: flex; flex-wrap: wrap; - padding: $breadcrumb-padding-y $breadcrumb-padding-x; - margin-bottom: $breadcrumb-margin-bottom; + padding: var(--#{$prefix}breadcrumb-padding-y) var(--#{$prefix}breadcrumb-padding-x); + margin-bottom: var(--#{$prefix}breadcrumb-margin-bottom); + @include font-size(var(--#{$prefix}breadcrumb-font-size)); list-style: none; - background-color: $breadcrumb-bg; - @include border-radius($breadcrumb-border-radius); -} - -.breadcrumb-item > a, -.breadcrumb-item > a:active, -.breadcrumb-item > a:hover, -.breadcrumb-item > a:visited { - color: $breadcrumb-divider-color; + background-color: var(--#{$prefix}breadcrumb-bg); + @include border-radius(var(--#{$prefix}breadcrumb-border-radius)); } .breadcrumb-item { // The separator between breadcrumbs (by default, a forward-slash: "/") + .breadcrumb-item { - padding-left: $breadcrumb-item-padding; + padding-left: var(--#{$prefix}breadcrumb-item-padding-x); &::before { - display: inline-block; // Suppress underlining of the separator in modern browsers - padding-right: $breadcrumb-item-padding; - color: $breadcrumb-divider-color; - content: $breadcrumb-divider; + float: left; // Suppress inline spacings and underlining of the separator + padding-right: var(--#{$prefix}breadcrumb-item-padding-x); + color: var(--#{$prefix}breadcrumb-divider-color); + content: var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{"/* rtl:"} var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped)) #{"*/"}; } } - // IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built - // without ` -
- -
+ @@ -173,7 +163,7 @@

  ‐   Email » - [[tag]] @@ -225,9 +215,7 @@

-
- Expired before -
+ Expired before
diff --git a/djaopsp/templates/app/scorecard/history.html b/djaopsp/templates/app/scorecard/history.html index 22c407d9..2170ca5f 100644 --- a/djaopsp/templates/app/scorecard/history.html +++ b/djaopsp/templates/app/scorecard/history.html @@ -10,10 +10,10 @@
-
+
-
+

{% trans %}Questionnaires{% endtrans %}

{{profile.printable_name}}

@@ -85,16 +85,16 @@

{% trans %}Previously Completed{% endtrans %}

-
+
[[ $globals.humanizeDate(item.created_at) ]] {% if verification_enabled %} {% endif %}
-
+
[[item.campaign.title]]
-
+
diff --git a/djaopsp/templates/app/scorecard/index.html b/djaopsp/templates/app/scorecard/index.html index ecfd151c..3dbee3b4 100644 --- a/djaopsp/templates/app/scorecard/index.html +++ b/djaopsp/templates/app/scorecard/index.html @@ -16,10 +16,10 @@
-
+
-
+

{{sample.account.printable_name}}

{{sample.campaign.title}}

{{sample.created_at|date}}
@@ -29,7 +29,7 @@

{{sample.campaign.title}}

{% for highlight in highlights %} -
+
@@ -39,7 +39,7 @@

{{sample.campaign.title}}

{% endfor %}
-
+
Contact Information
    @@ -83,7 +83,7 @@

    {{sample.campaign.title}}

    {% endif %} - for {{profile.printable_name}}
{% if urls.api_grant_allowed_candidates %} -
+
@@ -227,15 +225,13 @@

for {{profile.printable_name}}

{% if urls.api_grant_allowed_candidates %}