From 905dce2f4926dc259c05a1c714b83d2acb6ddd41 Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Tue, 15 Oct 2019 17:40:59 +0100
Subject: [PATCH] Replace removed global GOV.UK Template styles

GOV.UK Template included styles targeting elements
by their tag name, so affected all elements of
that type. Removing these files removes certain
styles from the top of the cascade.

Moving all components to GOV.UK Frontend (that are
possible) should fix this further down the
cascade. This adds them back to plug the gap in
the cascade until that work happens.
---
 app/assets/stylesheets/globals.scss | 59 +++++++++++++++++++++++++++++
 app/assets/stylesheets/main.scss    |  1 +
 2 files changed, 60 insertions(+)
 create mode 100644 app/assets/stylesheets/globals.scss

diff --git a/app/assets/stylesheets/globals.scss b/app/assets/stylesheets/globals.scss
new file mode 100644
index 000000000..fdca7d86d
--- /dev/null
+++ b/app/assets/stylesheets/globals.scss
@@ -0,0 +1,59 @@
+// needed for IE10 desktop snap mode: http://menacingcloud.com/?c=cssViewportOrMetaTag
+@-ms-viewport {
+  width: device-width;
+}
+
+b,
+strong {
+  font-weight: 600;
+}
+
+abbr[title] {
+  cursor: help;
+}
+
+// To be removed when all search inputs use the GOV.UK Frontend text input component:
+// https://design-system.service.gov.uk/components/text-input/
+/*
+ * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
+ * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
+ *    (include `-moz` to future-proof). 
+ */
+
+input[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box; /* 2 */
+  box-sizing: content-box;
+}
+input[type="search"]::-webkit-search-cancel-button {
+  -webkit-appearance: searchfield-cancel-button;
+  margin-right: 2px;
+}
+
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+// To be removed when all links follow the GOV.UK Frontend conventions:
+// https://design-system.service.gov.uk/styles/typography/#links
+a {
+  @extend %govuk-link;
+}
+
+// Each selector, and then the whole block when only one remains, to be removed when the
+// element comes from the corresponding GOV.UK Frontend component:
+// - https://design-system.service.gov.uk/components/text-input/
+// - https://design-system.service.gov.uk/components/textarea/
+// - https://design-system.service.gov.uk/components/select/
+// - https://design-system.service.gov.uk/components/button/
+
+// Global styles for form controls
+
+input:focus,
+textarea:focus,
+select:focus,
+button:focus {
+  outline: 3px solid $focus-colour;
+  outline-offset: 0;
+}
diff --git a/app/assets/stylesheets/main.scss b/app/assets/stylesheets/main.scss
index fb5af3667..a5dcef4ac 100644
--- a/app/assets/stylesheets/main.scss
+++ b/app/assets/stylesheets/main.scss
@@ -35,6 +35,7 @@ $path: '/static/images/';
 @import './govuk-frontend/all';
 
 // Specific to this application
+@import 'globals';
 @import 'grids';
 @import 'components/site-footer';
 @import 'components/placeholder';