Merge branch '5.3' into 5

# Conflicts:
#	yarn.lock

.github/workflows/add-prs-to-project.yml

@@ -0,0 +1,22 @@
+name: Add new PRs to github project
+
+on:
+  pull_request_target:
+    types:
+      - opened
+      - ready_for_review
+
+permissions: {}
+
+jobs:
+  addprtoproject:
+    name: Add PR to GitHub Project
+    # Only run on the silverstripe account
+    if: github.repository_owner == 'silverstripe'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Add PR to github project
+        uses: silverstripe/gha-add-pr-to-project@v1
+        with:
+          app_id: ${{ vars.PROJECT_PERMISSIONS_APP_ID }}
+          private_key: ${{ secrets.PROJECT_PERMISSIONS_APP_PRIVATE_KEY }}

client/src/styles/_base.scss

@@ -21,10 +21,12 @@
    */
   *zoom: 1;
 }
+
 .realme_widget:before, .realme_secondary_login:before, .realme_login_lockup:before, .realme_popup:before, .realme_widget:after, .realme_secondary_login:after, .realme_login_lockup:after, .realme_popup:after {
   content: " ";
   display: table;
 }
+
 .realme_widget:after, .realme_secondary_login:after, .realme_login_lockup:after, .realme_popup:after {
   clear: both;
 }
@@ -59,16 +61,6 @@
   border-style: solid;
 }
 
-.realme_icon_new_window {
-  _overflow: hidden;
-  /*ie6*/
-}
-
-.realme_primary_login, .realme_alternative_login, .realme_assert {
-  _width: 320px;
-  /*ie6*/
-}
-
 /*
 	The base RealMe widget
 	-----------------------------------------------------
@@ -79,15 +71,19 @@ color: $brand-color-text;
   padding: 0.76923em 1.07692em;
   font-family: sans-serif;
   font-size: 13px;
+
   /* Set font-size explicitly to avoid cascade from the page. */
   line-height: 1.53846;
+
   /* Reset the line-height to something senisble inside the widget */
 }
+
 .realme_widget p {
   margin-top: 0.5em;
   margin-bottom: 1em;
   font-family: sans-serif;
 }
+
 .realme_widget a {
   text-decoration: none;
   font-family: sans-serif;
@@ -96,6 +92,7 @@ color: $brand-color-text;
 .realme_widget .realme_login, .realme_widget .realme_create_account, .realme_widget .realme_link {
   color: $brand-color-main-accessible;
 }
+
 .realme_widget .realme_login:hover, .realme_widget .realme_create_account:hover, .realme_widget .realme_link:hover, .realme_widget .realme_login:active, .realme_widget .realme_create_account:active, .realme_widget .realme_link:active {
   text-decoration: underline;
   border: 0;

client/src/styles/_buttons.scss

@@ -1,14 +1,13 @@
 .realme_button {
   cursor: pointer;
-  line-height: 1;
   margin-top: 1px;
   color: $brand-color-main-contrast;
   background-color: $brand-color-main-accessible;
   border-radius: $btn-border-radius;
-  border: none;
+  border: 0;
   -webkit-appearance: none;
   -webkit-border-image: none;
-  font-size: 1.107692308rem;
+  font-size: 1.10769rem;
   line-height: 1.2em;
 
   /**

client/src/styles/_components.scss

@@ -1,4 +1,4 @@
-/* Used to separate elements vertically. Can be themed*/
+/* Used to separate elements vertically. Can be themed */
 .realme_hr {
   margin: 0;
   border: 0;
@@ -10,7 +10,8 @@
 .realme_login_lockup {
   margin-bottom: 1em;
   _position: relative;
-  /*ie6*/
+
+  /* ie6 */
 }
 
 .realme_login_lockup form {

client/src/styles/_icons.scss

@@ -14,7 +14,8 @@
   background-image: url('../images/icon-new-window-blue.png');
   background-position: right center;
   _margin-bottom: 2px;
-  /*ie6*/
+
+  /* ie6 */
 }
 
 .realme_icon_new_window {

client/src/styles/_popup.scss

@@ -13,46 +13,45 @@
   left: -1px;
   top: -22px;
 }
+
 .ie6 .realme_arrow_top_left .arrow, .realme_arrow_top_left .ie6 .arrow, .ie6 .realme_arrow_top_right .arrow, .realme_arrow_top_right .ie6 .arrow {
-  border-right-color: pink;
-  border-left-color: pink;
-  border-top-color: pink;
+  border-right-color: $color-pink;
+  border-left-color: $color-pink;
+  border-top-color: $color-pink;
   border-top-width: 0;
-}
-.ie6 .realme_arrow_top_left .arrow, .realme_arrow_top_left .ie6 .arrow, .ie6 .realme_arrow_top_right .arrow, .realme_arrow_top_right .ie6 .arrow {
-  filter: chroma(color=pink);
+  filter: chroma(color=$color-pink);
   font-size: 0;
   line-height: 0;
 }
+
 .realme_arrow_top_left .arrow .front, .realme_arrow_top_right .arrow .front {
   width: 0;
   height: 0;
   border-style: solid;
   border-color: transparent;
   border-width: 10px;
   display: block;
-  border-bottom-color: white;
+  border-bottom-color: #fff;
   position: absolute;
   left: -10px;
   bottom: -11px;
 }
+
 .ie6 .realme_arrow_top_left .arrow .front, .realme_arrow_top_left .ie6 .arrow .front, .ie6 .realme_arrow_top_right .arrow .front, .realme_arrow_top_right .ie6 .arrow .front {
-  border-right-color: pink;
-  border-left-color: pink;
-  border-top-color: pink;
+  border-right-color: $color-pink;
+  border-left-color: $color-pink;
+  border-top-color: $color-pink;
   border-top-width: 0;
-}
-.ie6 .realme_arrow_top_left .arrow .front, .realme_arrow_top_left .ie6 .arrow .front, .ie6 .realme_arrow_top_right .arrow .front, .realme_arrow_top_right .ie6 .arrow .front {
-  filter: chroma(color=pink);
+  filter: chroma(color=$color-pink);
   font-size: 0;
   line-height: 0;
-}
-.ie6 .realme_arrow_top_left .arrow .front, .realme_arrow_top_left .ie6 .arrow .front, .ie6 .realme_arrow_top_right .arrow .front, .realme_arrow_top_right .ie6 .arrow .front {
   top: 1px;
 }
+
 .ie6 label.radio .realme_arrow_top_left .arrow .front, .realme_arrow_top_left .ie6 label.radio .arrow .front, .ie6 label.radio .realme_arrow_top_right .arrow .front, .realme_arrow_top_right .ie6 label.radio .arrow .front {
   display: none;
 }
+
 .ie6 label.radio .realme_arrow_top_left .arrow, .realme_arrow_top_left .ie6 label.radio .arrow, .ie6 label.radio .realme_arrow_top_right .arrow, .realme_arrow_top_right .ie6 label.radio .arrow {
   display: none;
 }
@@ -66,13 +65,15 @@
   visibility: hidden;
   z-index: 2;
   _display: none;
-  /*ie6*/
+
+  /* ie6 */
 }
 
 .realme_arrow_top_left {
   top: 1.6em;
   left: -1.7em;
 }
+
 .realme_arrow_top_left .arrow {
   left: 1.35em;
   right: auto;
@@ -82,6 +83,7 @@
   top: 1.6em;
   right: -1.7em;
 }
+
 .realme_arrow_top_right .arrow {
   left: auto;
   right: 1.35em;
@@ -91,6 +93,7 @@
   top: -26em;
   left: calc(100% + 25px);
 }
+
 .realme_arrow_side_left .arrow {
   width: 0;
   height: 0;
@@ -99,33 +102,35 @@
   border-width: 11px;
   display: block;
   border-right-color: #d0d0d0;
-  left: -1px;
-  top: -22px;
   top: 1.25em;
   left: -22px;
 }
+
 .ie6 .realme_arrow_side_left .arrow {
-  filter: chroma(color=pink);
+  filter: chroma(color=$color-pink);
   font-size: 0;
   line-height: 0;
 }
+
 .realme_arrow_side_left .arrow .front {
   width: 0;
   height: 0;
   border-style: solid;
   border-color: transparent;
   border-width: 10px;
   display: block;
-  border-right-color: white;
+  border-right-color: #fff;
   position: absolute;
   left: -9px;
   top: -10px;
 }
+
 .ie6 .realme_arrow_side_left .arrow .front {
-  filter: chroma(color=pink);
+  filter: chroma(color=$color-pink);
   font-size: 0;
   line-height: 0;
 }
+
 .ie6 label.radio .realme_arrow_side_left .arrow {
   display: none;
 }
@@ -134,6 +139,7 @@
   top: -1em;
   right: 100%;
 }
+
 .realme_arrow_side_right .arrow {
   width: 0;
   height: 0;
@@ -142,40 +148,42 @@
   border-width: 11px;
   display: block;
   border-left-color: #d0d0d0;
-  left: -1px;
-  top: -22px;
   top: 1.25em;
   left: auto;
   right: -22px;
 }
+
 .ie6 .realme_arrow_side_right .arrow {
-  filter: chroma(color=pink);
+  filter: chroma(color=$color-pink);
   font-size: 0;
   line-height: 0;
 }
+
 .realme_arrow_side_right .arrow .front {
   width: 0;
   height: 0;
   border-style: solid;
   border-color: transparent;
   border-width: 10px;
   display: block;
-  border-left-color: white;
+  border-left-color: #fff;
   position: absolute;
   right: -9px;
   top: -10px;
 }
+
 .ie6 .realme_arrow_side_right .arrow .front {
-  filter: chroma(color=pink);
+  filter: chroma(color=$color-pink);
   font-size: 0;
   line-height: 0;
 }
+
 .ie6 label.radio .realme_arrow_side_right .arrow {
   display: none;
 }
 
 .realme_popup {
-  padding: 0.5em 1.5em 0.5em;
+  padding: 0.5em 1.5em;
   background-color: #fff;
   border: solid 1px #ddd;
   -webkit-border-radius: 3px;
@@ -184,16 +192,20 @@
   -o-border-radius: 3px;
   border-radius: 3px;
 }
+
 .realme_popup p, .realme_popup ul, .realme_popup strong, .realme_popup b {
   color: #333;
 }
+
 .realme_popup p, .realme_popup ul, .realme_popup a {
   line-height: 1.35em;
 }
+
 .realme_popup ul {
   padding-left: 1em;
   margin-bottom: 1em;
 }
+
 .realme_popup a,
 .realme_popup a:hover,
 .realme_popup a:active {