Merge pull request #2350 from alphagov/454_Customise-select2-styles

454 customise select2 styles
alphagov · Oct 1, 2024 · c1adbe6 · c1adbe6
2 parents 177b339 + 8f83bcc
commit c1adbe6
Showing 1 changed file with 87 additions and 1 deletion.
diff --git 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 */