From baee492d53d2d3eae8bcae2c3b1ffd5fb3346751 Mon Sep 17 00:00:00 2001
From: Lucas <hello@lucascm.dev>
Date: Tue, 4 Jul 2023 05:54:11 +0100
Subject: [PATCH] [Scorecards] Tidy up Bootstrap

---
 scoring/static/scoring/scss/background.scss |  38 --
 scoring/static/scoring/scss/buttons.scss    | 442 --------------------
 scoring/static/scoring/scss/input.scss      |  70 ----
 scoring/static/scoring/scss/main.scss       |  54 +--
 scoring/static/scoring/scss/typo.scss       | 156 +------
 scoring/static/scoring/scss/variables.scss  |   4 +-
 vendor/bootstrap5/scss/_buttons.scss        |   2 +-
 7 files changed, 31 insertions(+), 735 deletions(-)

diff --git a/scoring/static/scoring/scss/background.scss b/scoring/static/scoring/scss/background.scss
index b3ff67208..8b1378917 100644
--- a/scoring/static/scoring/scss/background.scss
+++ b/scoring/static/scoring/scss/background.scss
@@ -1,39 +1 @@
-.bg-green-gradient {
-    background: linear-gradient(90deg, $green 0%, #DEF8F6 100%);
-}
 
-.bg-grey-gradient {
-    background: linear-gradient(180deg, transparentize($color-scorecard-grey-900, 0.85) 1%, transparentize($black, 0.95) 90%);
-}
-
-.bg-grey-gradient-darker {
-    background: linear-gradient(0deg, #EEEEEE -5%, rgba(187, 187, 187, 0.30) 100%) !important;
-}
-
-.bg-blue-gradient {
-    background: linear-gradient(90deg, $color-scorecard-blue-l2 0.01%, rgba(216, 242, 254, 0.3) 99%);
-}
-
-.bg-blue-l2 {
-    background-color: $color-scorecard-blue-l2 !important;
-}
-
-.bg-green-l2 {
-    background-color: $color-scorecard-green-l1 !important;
-}
-
-.bg-inherit {
-    background-color: inherit !important;
-}
-
-.bg-grey {
-    background-color: #eceff5 !important;
-}
-
-.bg-green {
-    background-color: $green !important;
-}
-
-.bg-dark-grey {
-    background-color: $color-scorecard-grey-900 !important;
-}
diff --git a/scoring/static/scoring/scss/buttons.scss b/scoring/static/scoring/scss/buttons.scss
index f80a2c107..e69de29bb 100644
--- a/scoring/static/scoring/scss/buttons.scss
+++ b/scoring/static/scoring/scss/buttons.scss
@@ -1,442 +0,0 @@
-// Reset styles
-button {
-    // reset 
-    border-radius: $border-radius;
-    background-color: transparent;
-    border: none;
-    text-align: left;
-    padding-left: 0;
-    letter-spacing: 0.05em;
-    white-space: nowrap;
-    &:focus {
-        outline: none;
-    }
-}
-
-input::-webkit-input-placeholder {
-    color: $black !important;
-}
-
-::-moz-placeholder {
-    color: $black !important;
-}
-
-:-ms-input-placeholder {
-    color: $black !important;
-}
-
-::-webkit-input-placeholder {
-    color: $black !important;
-}
-
-::placeholder {
-    color: $black !important;
-}
-
-a {
-    font-family: $font-family-sans-serif;
-    font-style: normal;
-    font-weight: normal;
-    line-height: 130%;
-    color: $color-scorecard-blue-d1;
-    text-decoration: underline;
-    @include transition(color 0.3s ease-in-out);
-    @include responsive(font-size, 14, 15);
-    letter-spacing: 0.05em;
-    text-underline-offset: 3px;
- 
-    &:hover {
-        color: $color-scorecard-grey-900;
-        text-decoration-thickness: 3px;
-    }
-
-    &:focus {
-        background-color: $color-scorecard-yellow;
-        color: $black;
-        text-decoration-thickness: 3px;
-    }
-
-    &:visited {
-        color: darken($color-scorecard-purple, 10%);
-    }
-}
-
-table a {
-    @include responsive(font-size, 14, 15);
-    color: $color-scorecard-grey-900;
-    @include hover-focus {
-        color: $color-scorecard-green-d1;
-        text-decoration: none;
-    }
-}
-
-// CTA
-
-a.cta {
-    padding-right: 30px;
-    background-image: url('../img/chevron-right-blue.svg');
-    background-size: 7px auto;
-    background-repeat: no-repeat;
-    background-position: right 18px bottom 40%;
-    opacity: 0.9;
-    @include transition(background-position, transform, opacity 0.3s ease-in-out);
-
-    @include hover-focus {
-        color: $color-scorecard-blue-d1;
-        background-position: right 12px bottom 40%; ;
-        transform: translateX(3px);
-        opacity: 1;
-    }
-
-    &.white {
-        color: $white;
-    }
-
-    &.reverse {
-        padding-right: 0;
-        padding-left: 23px;
-        background-image: url('../img/chevron-white-left.svg');
-        background-size: 11px auto;
-        background-position: left 3px center;
-        opacity: 0.7;
-
-        @include hover-focus {
-            background-position: left 0px center;
-            transform: translateX(-3px);
-        }
-    }
-}
-
-.btn {
-    @include responsive(font-size, 14, 15);
-    border-radius: $border-radius;
-    box-sizing: border-box;
-    @include transition(background-color, border, color 0.3s ease-in-out);
-    color: $black;
-    font-family: $headings-font-family;
-    font-style: normal;
-    font-weight: normal;
-    font-size: 13px;
-    line-height: 100%;
-    letter-spacing: 0.03em;
-    padding: 7px;
-    text-decoration: none;
-
-    &:focus {
-        background-color:$color-scorecard-yellow !important;
-        color: $black !important;
-        border-color: $black !important;
-        text-decoration: underline;
-        text-underline-offset: 3px;
-    }
-
-    &:visited {
-        color: inherit;
-    }
-}
-
-// Color button
-
-.btn-blue {
-    background-color: $color-scorecard-blue-l1;
-    border: 1px solid $color-scorecard-blue;
-
-    &:hover {
-        color: $color-scorecard-blue-d1;
-        background-color: $color-scorecard-blue-l2;
-        border: 1px solid $color-scorecard-blue;
-    }
-
-    &.is--light {
-        background-color: $color-scorecard-blue-l2;
-        &:hover {
-            color: $black;
-            background-color: $color-scorecard-blue-l1;
-            border: 1px solid $color-scorecard-blue;
-        }
-    }
-}
-
-.btn-green {
-    background-color: $color-scorecard-green-d1;
-    border: 1px solid $color-scorecard-green-d1;
-
-    &:hover {
-        color: $black;
-        background-color: $color-scorecard-green-l1;
-        border: 1px solid $green;
-    }
-
-    &.is--light {
-        background-color: transparentize($color-scorecard-green-l1, 0.7);
-        border: 1px solid $white;
-        color: $color-scorecard-grey-900;
-        &:hover {
-            color: $white;
-            background-color: $color-scorecard-green-d1;
-            border: 1px solid $color-scorecard-green;
-        }
-    }
-}
-
-// Donation button
-.btn.donation {
-    background-image: url('../img/donate-black.svg');
-    background-size: 18px;
-    background-repeat: no-repeat;
-    background-position: right 8px top 5px;
-    background-color: transparentize($color-scorecard-blue, 0.1);
-    text-decoration: none;
-    padding-right: 30px;
-    border: 1px solid $blue;
-    @include transition(background-color, background-image, color 0.3s ease-in-out);
-    &:hover {
-        background-image: url('../img/donate-black.svg');
-        background-color: $white;
-        color: #045C88;   
-    }
-}
-
-// Searchbar
-.searchbar {
-    background-image: url('../img/search-icon.svg');
-    background-size: 20px;
-    background-repeat: no-repeat;
-    background-position: 10px 50%;
-    padding-left: 40px;
-    width: 230px;
-    color: $black;
-    font-size: 14px;
-    border-radius: $border-radius;
-    border: 1px solid $color-scorecard-green-d1;
-    @include transition(background-color, background-image 0.3s ease-in-out);
-    @include placeholder {
-        @include transition(color 0.3s ease-in-out);
-    }
-
-    &:focus {
-        outline: 3px solid $color-scorecard-yellow;
-        @include box-shadow(0px, 0px, 0px, 5px, $black);
-        background-color: $white !important;
-    }
-
-    &.green.dark {
-        background-color: $color-scorecard-green-d1;
-        &:hover {
-            background-color: $white;
-            color: $color-scorecard-grey-900;
-            border: 1px solid $color-scorecard-green-d1;
-            @include placeholder {
-                color: $color-scorecard-grey-900 !important;
-            }
-        }
-        &:active {
-            background-color: $green;
-        }
-    }
-
-    &.blue.light {
-        background-color: $color-scorecard-blue-l1;
-        border: 1px solid $blue;
-        &:hover {
-            background-color: $white;
-            color: $color-scorecard-blue-d1;
-            border: 1px solid $color-scorecard-blue-d1;
-        }
-        &:active {
-            background-color: $color-scorecard-blue-d1;
-            color: $white;
-            background-image: url('../img/search-icon-white.svg');
-            @include placeholder {
-                color: $white !important;
-            }
-        }
-    }
-
-    &.blue.dark {
-        background-image: url('../img/search-icon-white.svg');
-        color: $white;
-        background-color: darken($blue, 5%);
-        border: 1px solid $blue;
-        @include placeholder {
-            color: $white !important;
-        }
-
-        &:hover {
-            background-image: url('../img/search-icon.svg');
-            background-color: #7BD2F8;
-            color: $color-scorecard-grey-900;
-            border: 1px solid $color-scorecard-blue-d1;
-            @include placeholder {
-                color: $black !important;
-            }
-        }
-
-        &:active {
-            background-image: url('../img/search-icon.svg');
-            background-color: $white;
-            color: $color-scorecard-blue-d1;
-            @include placeholder {
-                color: $black !important;
-            }
-        }
-    }
-}
-
-// Open div
-.btn-open-question, .btn-open-div {
-    position: relative;
-    opacity: 0.9;
-    white-space: normal;
-    font-weight: 500;
-    color: $color-scorecard-grey-900;
-    text-transform: uppercase;
-    @include responsive(font-size, 13, 14);
-    @include transition(opacity 0.2s ease-in-out);
-    
-    &::after {
-        content:" ";
-        width: 25px;
-        height: 25px;
-        background-image: url('../img/chevron-thin-black-down.svg');
-        background-size: 13px;
-        background-repeat: no-repeat;
-        background-position: right 8px top 6px;
-        transform-origin: center;
-        position: absolute;
-        @include transition(transform 0.2s ease-in-out);
-    }
-
-    @include hover-focus {
-        opacity: 1;
-        color: $color-scorecard-green-d1;
-        &::after {
-            background-image: url('../img/chevron-thin-green-down.svg');
-            transform: translateY(1px);
-        }
-    }
-
-    &.active {
-        opacity: 1;
-        &::after {
-            transform: rotate(180deg);
-            background-position: right 8px top 9px;
-        }
-    }
-
-    &.is--smaller {
-        &::after {
-            content:" ";
-            width: 20px;
-            height: 20px;
-            background-position: right 1px top 7px;
-        }
-        &.active {
-            &::after {
-                background-position: right 6px top 6px;
-            }
-        }
-    }
-}
-
-.open-div {
-    overflow: hidden;
-    @include transition(height, 0.3s ease-in-out);
-}
-
-.open-div:not(.active) {
-    display: none;
-}
-
-// Accordion
-
-.btn-open-accordion {
-    width: 44px;
-    height: 44px;
-    position: relative;
-    opacity: 0.8;
-    padding-right: 0;
-    @include transition(opacity, transform 0.2s ease-in-out);
-
-    &::after {
-        content:" ";
-        width: 25px;
-        height: 25px;
-        background-image: url('../img/plus-black.svg');
-        background-size: 15px;
-        background-repeat: no-repeat;
-        background-position: center;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        @include transition(background-image 0.2s ease-in-out);
-    }
-    &:hover {
-        opacity: 1;
-        transform: rotate(180deg);
-    }
-
-    &.active {
-        transform: rotate(45deg);
-        opacity: 1;
-        &::after {
-            background-image: url('../img/plus-white.svg');
-        }
-
-        &:hover {
-            opacity: 0.8;
-            transform: rotate(180deg);
-            &::after {
-                background-image: url('../img/plus-white.svg');
-            }
-        }
-    }
-}
-
-// Modal
-.close-icon {
-    width: 30px;
-    height: 30px;
-    background-image: url('../img/close-grey.svg');
-    background-size: 20px;
-    background-repeat: no-repeat;
-    background-position: center;
-    opacity: 0.8;
-    @include transition(background-image, 0.3s ease-in-out);
-    &:hover {
-        background-image: url('../img/close-green.svg');
-    }
-}
-
-// Advanced filters
-.advanced-filter {
-    height: 32px;
-    padding-top: 8px;
-    padding-left: 6px;
-    padding-right: 30px;
-    background-image: url('../img/advanced-filter-grey.svg');
-    background-position: right 10px top 53%;
-    background-repeat: no-repeat;
-    border: 1px solid $color-scorecard-grey-900;
-    @include transition(background-image, background-color, color,  0.3s ease-in-out);
-    &:hover {
-        background-image: url('../img/advanced-filter-white.svg'); 
-        color: $white;
-        background-color: $color-scorecard-grey-900; 
-    }
-}
-
-// Advanced filter for council table
-.advanced-filter-simple {
-    width: 16px;
-    height: 16px;
-    background-image: url('../img/advanced-filter-black.svg');
-    background-size: contain;
-    background-repeat: no-repeat;
-    background-position: center;
-    @include transition(background-image 0.3s ease-in-out);
-    &:hover {
-        background-image: url('../img/advanced-filter-green.svg');
-    }
-}
diff --git a/scoring/static/scoring/scss/input.scss b/scoring/static/scoring/scss/input.scss
index 34b4c46f5..e69de29bb 100644
--- a/scoring/static/scoring/scss/input.scss
+++ b/scoring/static/scoring/scss/input.scss
@@ -1,70 +0,0 @@
-input {
-    border-radius: $border-radius;
-    border: none;
-    padding: 7px 7px 5px 7px;
-    border: 1px solid transparent; 
-    @include transition(border, background-color, color 0.3s ease-in-out);
-
-    @include hover-focus {
-        color: $white;
-        border: 1px solid $white;
-        background-color: $color-scorecard-green-d1;
-        outline: none;
-    }
-}
-
-input[type="checkbox"], input[type="radio"] {
-    // Improve accessibility
-    height: 25px;
-    width: 25px;
-}
-
-// Radio buttons
-.radio-btn.is--with-label {
-    @include responsive(font-size, 12, 13);
-    line-height: 130%;
-    color: $color-scorecard-grey-900;
-    text-decoration: none;
-    cursor: pointer;
-    border-radius: $border-radius;
-    padding: 7px 8px;
-    border: 1px solid $blue;
-    background-color: $white;
-    @include transition(background-color, color 0.3s ease-in-out);
-    margin-top: 10px;
-
-    &:hover {
-        background-color: $color-scorecard-blue-l1;
-    }
-
-    &:focus {
-        background-color: $color-scorecard-yellow;
-        outline: 2px solid $black;
-        border-color: $black;
-    }
-
-    &.active {
-        background-color: $blue;
-        color: $white;
-
-        @include hover-focus {
-            color: $blue;
-            background-color: $white;
-        }
-    }
-}
-
-.radio-btn.is--with-label.is--with-closed-icon {
-    padding-right: 40px;
-    background-image: url('../img/close-background-blue.svg');
-    background-size: 20px;
-    background-repeat: no-repeat;
-    background-position: right 10px center;
-}
-
-// CEUK donate button
-input#ceuk-donate {
-    background: none;
-    color: inherit;
-    border: none;
-}
diff --git a/scoring/static/scoring/scss/main.scss b/scoring/static/scoring/scss/main.scss
index 3526481b6..055cbef54 100644
--- a/scoring/static/scoring/scss/main.scss
+++ b/scoring/static/scoring/scss/main.scss
@@ -18,7 +18,7 @@
 // so we are using a fork with the patch from the above issue
 
 @import "../../bootstrap5/functions";
-@import "variables";
+
 
 @import "../../bootstrap5/mixins/banner";
 @include bsBanner("");
@@ -29,7 +29,7 @@
 @import "../../bootstrap5/mixins";
 @import "../../bootstrap5/utilities";
 
-// @import "utils";
+//  @import "utils";
 
 @import "../../bootstrap5/root";
 @import "../../bootstrap5/reboot";
@@ -39,7 +39,7 @@
 @import "../../bootstrap5/grid";
 @import "../../bootstrap5/tables";
 @import "../../bootstrap5/forms";
-//@import "../../bootstrap5/buttons";
+@import "../../bootstrap5/buttons";
 @import "../../bootstrap5/transitions";
 // @import "../../bootstrap5/dropdown";
 @import "../../bootstrap5/button-group";
@@ -67,29 +67,29 @@
 
 @import "mixins";
 @import "containers";
-@import "background";
-@import "typo";
+// @import "background";
+// @import "typo";
 @import "icons";
 @import "buttons";
-@import "input";
-@import "navbar";
-@import "footer";
-@import "label";
-@import "tables";
-@import "scoring-table";
-@import "table-section-council";
-@import "table-question-council";
-@import "filter-home-filter-advanced";
-@import "filter-council-to-compare";
-@import "scoring-source-links";
-@import "question-page-about";
-@import "table-question-question";
-@import "awesomplete";
-@import "alerts";
-@import "methodology";
-@import "utilities";
-@import "down-message";
-@import "login-form";
-@import "how-to-use";
-@import "about";
-@import "toggle-section";
+// @import "input";
+// @import "navbar";
+// @import "footer";
+// @import "label";
+// @import "tables";
+// @import "scoring-table";
+// @import "table-section-council";
+// @import "table-question-council";
+// @import "filter-home-filter-advanced";
+// @import "filter-council-to-compare";
+// @import "scoring-source-links";
+// @import "question-page-about";
+// @import "table-question-question";
+// @import "awesomplete";
+// @import "alerts";
+// @import "methodology";
+// @import "utilities";
+// @import "down-message";
+// @import "login-form";
+// @import "how-to-use";
+// @import "about";
+// @import "toggle-section";
diff --git a/scoring/static/scoring/scss/typo.scss b/scoring/static/scoring/scss/typo.scss
index f6b690ea1..440197453 100644
--- a/scoring/static/scoring/scss/typo.scss
+++ b/scoring/static/scoring/scss/typo.scss
@@ -4,160 +4,6 @@ body, .body {
     font-weight: normal;
     line-height: 150%;
     letter-spacing: 0.02em;
-    color:$color-scorecard-grey-900;
+    color:$black;
     @include responsive(font-size, 14, 15);
 }
-
-p {
-    color: transparentize($color-scorecard-grey-900, 0.1);
-}
-
-ul {
-    margin-block-end: 0;
-    li {
-        margin-bottom: 10px;
-    }
-}
-
-// HEADINGS
-.subtitle {
-    font-family: $font-family-sans-serif;
-    font-style: normal;
-    font-weight: 300;
-    font-size: 18px;
-    line-height: 130%;
-    letter-spacing: 0.04em;
-    text-transform: uppercase;
-}
-
-h1, .h1 {
-    @include responsive(font-size, 30, 40);
-    font-family: $headings-font-family;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 120%;
-    letter-spacing: 0em;
-    color: $color-scorecard-grey-900;
-}
-
-.hero-sub {
-    font-family: $font-family-sans-serif;
-    font-style: normal;
-    font-weight: 300;
-    @include responsive(font-size, 15, 17);
-    line-height: 130%;
-    letter-spacing: 0.06em;
-    text-transform: uppercase;
-    color: $white;
-
-    &.top-performer {
-        background-image: url('../img/star.svg');
-        background-size: contain;
-        background-repeat: no-repeat;
-        background-position: left 0 center;
-        padding-left: 28px;
-    }
-}
-
-h2, .h2 {
-    font-family: $font-family-sans-serif;
-    font-weight: 700;
-    color: $color-scorecard-grey-800;
-}
-
-h3, .h3 {
-    font-family: $headings-font-family;
-    font-style: normal;
-    font-weight: 500;
-    @include responsive(font-size, 22, 25);
-    line-height: 130%;
-    /* or 31px */
-
-    letter-spacing: 0.04em;
-    color: $color-scorecard-grey-900;
-}
-
-h3.exclamation {
-    padding-left: 25px;
-    background-image: url('../img/exclamation-white.svg');
-    background-position: top 5px left 0;
-    background-size: 18px;
-    background-repeat: no-repeat;
- }
-
-h4, .h4 {
-    font-family: $headings-font-family;
-    font-style: normal;
-    font-weight: normal;
-    @include responsive(font-size, 18, 23);
-    line-height: 130%;
-    letter-spacing: 0.04em;
-    color: $color-scorecard-grey-900;
-    text-transform: none;
-}
-
-h5, .h5 {
-    font-family: $font-family-sans-serif;
-    font-style: normal;
-    font-weight: 500;
-    @include responsive(font-size, 15, 19);
-    line-height: 150%;
-    letter-spacing: 0.03em;
-    color: $color-scorecard-grey-900;
-    font-weight: 600;
-    text-transform: none;
-}
-
-h6, .h6 {
-    font-family: $font-family-sans-serif;
-    font-style: normal;
-    font-weight: 500;
-    @include responsive(font-size, 14, 17);
-    line-height: 130%;
-    letter-spacing: 0.02em;
-    text-transform: uppercase;
-    color: $color-scorecard-grey-900;
-
-    @include media-breakpoint-down('xs') {
-        text-transform: none;
-    }
-}
-
-//Filter title
-.filter-title {
-    @include responsive(font-size, 16, 17);
-    letter-spacing: 0.03em;
-    line-height: 160%;
-}
-
-// Underline
-.underline-green {
-    display: inline;
-    box-shadow: inset 0 10px 0 white, inset 0 -10px 0 transparentize($color: $green, $amount: 0.4)
-}
-
-.underline-grey {
-    display: inline;
-    box-shadow: inset 0 10px 0 white, inset 0 -4px 0 transparentize($color: $black, $amount: 0.9)
-}
-
-// Custom messages
-.warning-message {
-    padding-left: 32px;
-    background-image: url('../img/exclamation-black.svg');
-    background-size: 25px;
-    background-repeat: no-repeat;
-    background-position: left 0 center;
-    max-width: 100% !important;
-    margin-bottom: 0;
-}
-
-// Across tables
-table {
-    p {
-        color: $color-scorecard-grey-900;
-        &:last-child {
-            margin-bottom: 0;
-        }
-    }
-}
diff --git a/scoring/static/scoring/scss/variables.scss b/scoring/static/scoring/scss/variables.scss
index 7f7b64002..3bcb80f54 100644
--- a/scoring/static/scoring/scss/variables.scss
+++ b/scoring/static/scoring/scss/variables.scss
@@ -5,7 +5,7 @@ $color-scorecard-blue-d1: #045C88;
 $color-scorecard-navy: #005cab;
 $color-scorecard-purple: #7360eb;
 $color-scorecard-pink: #d92b85;
-$color-scorecard-red: #EB1924;
+$color-scorecard-red: #7c0006;
 $color-scorecard-orange: #f29e1a;
 $color-scorecard-yellow: #ffd80b;
 $color-scorecard-green-l1: #E4FAF5;
@@ -48,7 +48,7 @@ $theme-colors: (
 
 $primary: $color-scorecard-blue;
 $secondary: $color-scorecard-grey-600;
-$success: $color-scorecard-red;
+$success: $color-scorecard-green-d1;
 $dark: $color-scorecard-navy;
 
 $body-bg: $white;
diff --git a/vendor/bootstrap5/scss/_buttons.scss b/vendor/bootstrap5/scss/_buttons.scss
index f2c4c13a9..901c834b6 100644
--- a/vendor/bootstrap5/scss/_buttons.scss
+++ b/vendor/bootstrap5/scss/_buttons.scss
@@ -18,7 +18,7 @@
   --#{$prefix}btn-hover-border-color: transparent;
   --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
   --#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity};
-  --#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5);
+  --#{$prefix}btn-focus-box-shadow: 0;
   // scss-docs-end btn-css-vars
 
   display: inline-block;