[Scorecards 2023] Added Styling for homepage

mysociety · Jul 18, 2023 · a3675a2 · a3675a2
1 parent 5b43151
commit a3675a2
Show file tree

Hide file tree

Showing 16 changed files with 275 additions and 368 deletions.
diff --git a/caps/templates/caps/icons/council-climate-logo-2023.html b/caps/templates/caps/icons/council-climate-logo-2023.html
diff --git a/scoring/static/scoring/scss/footer.scss b/scoring/static/scoring/scss/footer.scss
@@ -48,7 +48,6 @@ footer {
     // Second Column
 
     .footer-link {
-        font-family: $font-family-sans-serif;
         font-style: normal;
         font-weight: normal;
         @include responsive(font-size, 13, 14);
@@ -77,13 +76,13 @@ footer {
     #can_embed_form {
         border-radius: $border-radius;
 
-        h1, h2, h3, h4, h5, h6, {
+        h1, h2, h3, h4, h5, h6 {
             font-family: $headings-font-family !important;
             letter-spacing: 0 !important;
         }
 
         input, textarea, select, p, * {
-            font-family: $font-family-sans-serif !important;
+            font-family: $body-font-family !important;
             letter-spacing: 0 !important;
         }
 

diff --git a/scoring/static/scoring/scss/input.scss b/scoring/static/scoring/scss/input.scss
@@ -0,0 +1,6 @@
+.form-select {
+
+  &.text-bg-primary {
+    $form-select-indicator-color: $white;
+  }
+}
diff --git a/scoring/static/scoring/scss/label.scss b/scoring/static/scoring/scss/label.scss
@@ -1,6 +1,6 @@
 .label {
     display: inline-block;
-    font-family: $font-family-sans-serif;
+    font-family: $body-font-family;
     font-style: normal;
     font-weight: 300;
     @include responsive(font-size, 13, 14);

diff --git a/scoring/static/scoring/scss/main.scss b/scoring/static/scoring/scss/main.scss
@@ -35,7 +35,7 @@ $spacers: map-merge((
 @import "../../bootstrap5/utilities";
 
 // Currently not working
-$all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);
+$all-colors: map-merge-multiple($grays, $blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);
 
 $utilities: map-merge(
   $utilities,
@@ -51,9 +51,27 @@ $utilities: map-merge(
         ),
       ),
     ),
+
+    "background-color": map-merge(
+      map-get($utilities, "background-color"),
+      (
+          values: map-merge(
+              map-get(map-get($utilities, "background-color"), "values"),
+              $all-colors,
+          ),
+      ),
+    ),
   )
 );
 
+@each $color, $value in $all-colors {
+  $color-rgb: to-rgb($value);
+  .text-bg-#{$color} {
+      color: color-contrast($value) if($enable-important-utilities, !important, null);
+      background-color: RGBA($color-rgb, var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
+  }
+}
+
 @import "../../bootstrap5/utilities/api";
 
 @import "../../bootstrap5/root";
@@ -96,7 +114,7 @@ $utilities: map-merge(
 // @import "typo";
 @import "icons";
 @import "buttons";
-// @import "input";
+@import "input";
 // @import "navbar";
 @import "footer";
 // @import "label";

diff --git a/scoring/static/scoring/scss/methodology.scss b/scoring/static/scoring/scss/methodology.scss
@@ -99,7 +99,7 @@
         }
 
         .question-header {
-            font-family: $font-family-sans-serif;
+            font-family: $body-font-family;
             font-style: normal;
             font-weight: 600;
             @include responsive(font-size, 13, 14);

diff --git a/scoring/static/scoring/scss/mixins.scss b/scoring/static/scoring/scss/mixins.scss
@@ -56,7 +56,6 @@ $max-viewport: 1792;
 
 // Scorecard Table
 @mixin table-category-color-header($color) {
-    border-right: 1px solid transparentize($color: $black, $amount: 0.9);
     background-color: lighten($color: $color, $amount: 65%);
     a {
         color: $color;
@@ -67,27 +66,24 @@ $max-viewport: 1792;
 }
 
 @mixin progress-bar-header($color) {
-    border-right: 1px solid transparentize($color: $black, $amount: 0.9);
     .score-bar {
         border-color: $color;
+        font-weight: 600;
         .progress-bar {
-            background-color: lighten($color: $color, $amount: 62%);
-            border-right: 1px solid transparentize($color: $color, $amount: 0.9);
+            background-color: mix($color, $white, 10%);
         }
     }
 }
 
 @mixin progress-bar-body($color) {
-    border-right: 1px solid transparentize($color: $black, $amount: 0.9);
     span {
         opacity: 0.8;
         @include responsive(font-size, 13, 14);
     }
     .score-bar {
         border-color: $color;
         .progress-bar {
-            background-color: lighten($color: $color, $amount: 66%);
-            border-right: 1px solid transparentize($color: $color, $amount: 0.9);
+            background-color: mix($color, $white, 10%);
         }
     }
 }
@@ -96,7 +92,7 @@ $max-viewport: 1792;
 //usage thead th {@include table-header;}
 @mixin table-header {
     background-color: $white;
-    font-family: $font-family-sans-serif;
+    font-family: $body-font-family;
     font-style: normal;
     font-weight: normal;
     font-size: 14px;
@@ -193,3 +189,18 @@ $max-viewport: 1792;
         @content;
     }
 }
+
+
+//does not work with colors containing alpha
+@function encodecolor($string) {
+	@if type-of($string) == 'color' {
+        $hex: str-slice(ie-hex-str($string), 4);
+        $string:unquote("#{$hex}");
+    }
+    $string: '%23' + $string;
+	@return $string;
+}
+
+@mixin chevron-down($color) {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='#{encodecolor($color)}' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
+  }
diff --git a/scoring/static/scoring/scss/navbar.scss b/scoring/static/scoring/scss/navbar.scss
@@ -28,7 +28,6 @@ $navbar-mobile-breakpoint: 1200px;
     $nav-link-font-size: 14px;
     $nav-item-border-size: 2px;
     .nav-item .nav-link {
-        font-family: $font-family-sans-serif;
         font-style: normal;
         font-weight: normal;
         line-height: 100%;
@@ -115,7 +114,6 @@ nav.subheader {
     border: 0.5px solid transparentize($color: $blue, $amount: 0.8);
 
     span {
-        font-family: $font-family-sans-serif;
         font-style: normal;
         font-weight: normal;
         @include responsive(font-size, 13, 15);