MNT Fix scss lint warnings

silverstripe · Jun 11, 2024 · 95fb994 · 95fb994
1 parent 5c09680
commit 95fb994
Show file tree

Hide file tree

Showing 10 changed files with 521 additions and 894 deletions.
diff --git a/client/dist/styles/realme.css b/client/dist/styles/realme.css
diff --git a/client/src/styles/_base.scss b/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;

diff --git a/client/src/styles/_buttons.scss b/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;
 
   /**

diff --git a/client/src/styles/_components.scss b/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 {

diff --git a/client/src/styles/_icons.scss b/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 {

diff --git a/client/src/styles/_popup.scss b/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 {

diff --git a/client/src/styles/_typography.scss b/client/src/styles/_typography.scss
@@ -2,7 +2,7 @@
   margin-top: 0;
   margin-bottom: 0;
   font-size: 2.3125rem;
-  font-family: inter, sans-serif;
+  font-family: "inter", sans-serif;
   font-weight: 300;
   line-height: 1.46;
   color: $brand-color-main;
@@ -13,18 +13,20 @@
 }
 
 .realme_mini_title {
-  font-size: 1.076923077em;
   /* 14px */
+  font-size: 1.07692em;
 }
 
 .realme_primary_login {
   max-width: 28em;
   min-width: 16.30769em;
   padding: 1.38462em;
 }
+
 .realme_primary_login p {
   font-size: 14px;
 }
+
 .realme_primary_login .realme_create_account {
   float: right;
 }
@@ -33,8 +35,9 @@
   max-width: 18em;
   min-width: 10.30769em;
 }
+
 .realme_alternative_login .realme_title {
-  font-size: 1.076923077em;
+  font-size: 1.07692em;
   margin-bottom: 0.5em;
 }
 
@@ -52,27 +55,32 @@
   background-repeat: no-repeat;
   background-position: right center;
 }
+
 .realme_secondary_login .realme_login, .realme_secondary_login .realme_link, .realme_secondary_login .realme_create_account {
   padding-right: 1.75em;
   padding-top: 0;
 }
+
 .realme_secondary_login .realme_pipe {
   border-right: solid 1px;
   padding-left: 0.5em;
 }
+
 .realme_secondary_login .realme_pipe:first-child {
   padding-left: 0;
 }
+
 .realme_secondary_login .whats_realme {
   font-weight: bold;
   padding-right: 0.3em;
-  padding-left: 0.3em;
   *padding-left: 0.5em;
   padding-top: 0;
 }
+
 .realme_secondary_login .realme_link {
   margin-right: 0.75em;
 }
+
 .realme_secondary_login .realme_icon_link {
-  right: .615384615em;
+  right: .61538em;
 }