From 8f83bccb3b578d90c2ef152f7740db0bb38346f1 Mon Sep 17 00:00:00 2001
From: davidtrussler <mail@davidtrussler.net>
Date: Mon, 30 Sep 2024 13:26:50 +0100
Subject: [PATCH] Add over-rides for some bootstrap styles after Dart Sass
 upgrade - navbar crown missing - select2 dropdown: remove and arrow icons -
 select2 search bar: search icon and gradients - select2 search bar (active
 state): spinner icon - select2 styles on low resolution devices - select2
 more results (not used in Publisher) - select2 multi container (not used in
 Publisher) - select2 search choice close (not used in Publisher)

---
 .../stylesheets/bootstrap_and_overrides.scss  | 88 ++++++++++++++++++-
 1 file changed, 87 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/bootstrap_and_overrides.scss b/app/assets/stylesheets/bootstrap_and_overrides.scss
index c05407245..7ef6f2b05 100644
--- a/app/assets/stylesheets/bootstrap_and_overrides.scss
+++ b/app/assets/stylesheets/bootstrap_and_overrides.scss
@@ -1,4 +1,5 @@
-// stylelint-disable selector-no-qualifying-type
+// stylelint-disable scss/comment-no-loud, selector-no-qualifying-type
+
 .alert .modal {
   color: $text-color;
 }
@@ -108,3 +109,88 @@ legend p {
     width: 100%;
   }
 }
+
+// Adds an over-ride style for the crown logo after the upgrade to Dart Sass which requires `background: url` in place of `background: image-url`
+.navbar-brand {
+  background: url("govuk_admin_template/header-crown.png") 0 .67em no-repeat;
+}
+
+// Adds over-ride styles for the select2 component after the upgrade to Dart Sass which requires `background: url` in place of `background: image-url`
+.select2-choice {
+  abbr {
+    background: url("select2.png") right top no-repeat;
+  }
+
+  .select2-arrow {
+    b {
+      background: url("select2.png") no-repeat 0 1px
+    }
+  }
+}
+
+/* stylelint-disable function-linear-gradient-no-nonstandard-direction */
+.select2-search {
+  input {
+    background: #ffffff url("select2.png") no-repeat 100% -22px;
+    background: url("select2.png") no-repeat 100% -22px,-webkit-gradient(linear, left bottom, left top, color-stop(0.85, #ffffff), color-stop(0.99, #eeeeee));
+    background: url("select2.png") no-repeat 100% -22px,-webkit-linear-gradient(center bottom, #ffffff 85%, #eeeeee 99%);
+    background: url("select2.png") no-repeat 100% -22px,-moz-linear-gradient(center bottom, #ffffff 85%, #eeeeee 99%);
+    background: url("select2.png") no-repeat 100% -22px,linear-gradient(to bottom, #ffffff 85%, #eeeeee 99%) 0 0
+  }
+
+  input.select2-active {
+    background: #ffffff url("select2-spinner.gif") no-repeat 100%;
+    background: url("select2-spinner.gif") no-repeat 100%,-webkit-gradient(linear, left bottom, left top, color-stop(0.85, #ffffff), color-stop(0.99, #eeeeee));
+    background: url("select2-spinner.gif") no-repeat 100%,-webkit-linear-gradient(center bottom, #ffffff 85%, #eeeeee 99%);
+    background: url("select2-spinner.gif") no-repeat 100%,-moz-linear-gradient(center bottom, #ffffff 85%, #eeeeee 99%);
+    background: url("select2-spinner.gif") no-repeat 100%,linear-gradient(to bottom, #ffffff 85%, #eeeeee 99%) 0 0
+  }
+}
+
+html[dir="rtl"] {
+  .select2-search {
+    input {
+      background: #ffffff url("select2.png") no-repeat -37px -22px;
+      background: url("select2.png") no-repeat -37px -22px,-webkit-gradient(linear, left bottom, left top, color-stop(0.85, #ffffff), color-stop(0.99, #eeeeee));
+      background: url("select2.png") no-repeat -37px -22px,-webkit-linear-gradient(center bottom, #ffffff 85%, #eeeeee 99%);
+      background: url("select2.png") no-repeat -37px -22px,-moz-linear-gradient(center bottom, #ffffff 85%, #eeeeee 99%);
+      background: url("select2.png") no-repeat -37px -22px,linear-gradient(to bottom, #ffffff 85%, #eeeeee 99%) 0 0
+    }
+  }
+}
+/* stylelint-enable function-linear-gradient-no-nonstandard-direction */
+
+.select2-more-results {
+  &.select2-active {
+    background: #f4f4f4 url("select2-spinner.gif") no-repeat 100%;
+  }
+}
+
+.select2-search-choice-close {
+  background: url("select2.png") right top no-repeat
+}
+
+/* stylelint-disable declaration-no-important */
+.select2-container-multi {
+  .select2-choices {
+    .select2-search-field input.select2-active {
+      background: #ffffff url("select2-spinner.gif") no-repeat 100% !important;
+    }
+  }
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 2dppx) {
+  .select2-search input,
+  .select2-search-choice-close,
+  .select2-container .select2-choice abbr,
+  .select2-container .select2-choice .select2-arrow b {
+    background-image: url("select2x2.png") !important;
+    background-repeat: no-repeat !important;
+    background-size: 60px 40px !important
+  }
+
+  .select2-search input {
+    background-position: 100% -21px !important
+  }
+}
+/* stylelint-enable declaration-no-important */