From 5dfdf4f43fff543df16bb1e72024f8add7697feb Mon Sep 17 00:00:00 2001 From: Guy Sartorelli <36352093+GuySartorelli@users.noreply.github.com> Date: Mon, 26 Jun 2023 16:27:19 +1200 Subject: [PATCH] ENH Update styles to match new RealME branding (#113) --- .gitignore | 1 + .nvmrc | 1 + client/css/realme.css | 627 +- client/dist/css/realme.css | 1 + client/images/RealMe-Face-Symbol_Web-RGB.png | Bin 0 -> 11746 bytes client/images/RealMe-Face-Symbol_Web-RGB.svg | 13 + client/images/RealMe-Face-Symbol_White.png | Bin 0 -> 11224 bytes client/images/RealMe-Face-Symbol_White.svg | 13 + client/images/RealMe-logo@2x.png | Bin 8071 -> 0 bytes client/images/btn-primary-repeat-x.jpg | Bin 1222 -> 0 bytes client/images/logo-simple-login-dark.png | Bin 1858 -> 0 bytes client/images/logo-simple-login.png | Bin 1935 -> 0 bytes client/images/logo.png | Bin 4055 -> 0 bytes client/images/padlock-blue.png | Bin 214 -> 0 bytes client/images/padlock-white.png | Bin 1063 -> 0 bytes client/src/styles/_base.scss | 102 + client/src/styles/_buttons.scss | 37 + client/src/styles/_components.scss | 18 + client/src/styles/_icons.scss | 35 + client/src/styles/_links.scss | 7 + client/src/styles/_popup.scss | 219 + client/src/styles/_typography.scss | 78 + client/src/styles/_variables.scss | 7 + client/src/styles/bundle.scss | 8 + package.json | 24 + .../RealMe/Authenticator/LoginForm.ss | 11 +- .../LoginForm/RealMeAssertForm.ss | 5 +- .../LoginForm/RealMeLoginButton.ss | 6 +- .../Authenticator/LoginForm_secondary.ss | 2 +- .../RealMe/Authenticator/MiniLoginForm.ss | 4 +- webpack.config.js | 59 + yarn.lock | 9264 +++++++++++++++++ 32 files changed, 9902 insertions(+), 640 deletions(-) create mode 100644 .gitignore create mode 100644 .nvmrc mode change 100755 => 100644 client/css/realme.css create mode 100644 client/dist/css/realme.css create mode 100644 client/images/RealMe-Face-Symbol_Web-RGB.png create mode 100644 client/images/RealMe-Face-Symbol_Web-RGB.svg create mode 100644 client/images/RealMe-Face-Symbol_White.png create mode 100644 client/images/RealMe-Face-Symbol_White.svg delete mode 100644 client/images/RealMe-logo@2x.png delete mode 100755 client/images/btn-primary-repeat-x.jpg delete mode 100755 client/images/logo-simple-login-dark.png delete mode 100755 client/images/logo-simple-login.png delete mode 100755 client/images/logo.png delete mode 100755 client/images/padlock-blue.png delete mode 100755 client/images/padlock-white.png create mode 100644 client/src/styles/_base.scss create mode 100644 client/src/styles/_buttons.scss create mode 100644 client/src/styles/_components.scss create mode 100644 client/src/styles/_icons.scss create mode 100644 client/src/styles/_links.scss create mode 100644 client/src/styles/_popup.scss create mode 100644 client/src/styles/_typography.scss create mode 100644 client/src/styles/_variables.scss create mode 100755 client/src/styles/bundle.scss create mode 100644 package.json create mode 100644 webpack.config.js create mode 100644 yarn.lock diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..3c3629e --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +node_modules diff --git a/.nvmrc b/.nvmrc new file mode 100644 index 0000000..f599e28 --- /dev/null +++ b/.nvmrc @@ -0,0 +1 @@ +10 diff --git a/client/css/realme.css b/client/css/realme.css old mode 100755 new mode 100644 index 1bd22a5..8e7a520 --- a/client/css/realme.css +++ b/client/css/realme.css @@ -1,626 +1 @@ -/* - ------------------------------------------------------ - RealMe agency assets - ------------------------------------------------------ - - Table of contents: - - 1. Base widget - 2. Typography - 2. Links - 3. Icons - 4. Colour themes - -*/ -.realme_widget, .realme_button, .realme_popup_position, .realme_login, .realme_create_account, .whats_realme, .realme_link, .realme_popup, .realme_find_out_more { - position: relative; -} - -.realme_login_lockup img, .realme_arrow_top_left .arrow, .realme_arrow_top_right .arrow, .realme_popup_wrapper, .realme_arrow_side_left .arrow, .realme_arrow_side_right .arrow, .realme_icon_find_out_more, .realme_icon_link, .realme_icon_padlock { - position: absolute; -} - -.realme_login_lockup form img { - border: 0; - margin: 0; - padding: 0; - background: transparent; -} - -/* Clearfix */ -.realme_widget, .realme_secondary_login, .realme_login_lockup, .realme_popup { - /** - * For IE 6/7 only - * Include this rule to trigger hasLayout and contain floats. - */ - *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; -} - -.realme_title, .realme_mini_title, .realme_button { - font-weight: bold; -} - -.realme_secondary_login, .realme_secondary_login .realme_popup_position, .realme_login, .realme_create_account, .realme_link, .realme_icon_new_window, .realme_text_icon_new_window { - display: inline-block; - vertical-align: bottom; -} - -.realme_button, .realme_button_padding, .realme_icon_find_out_more, .realme_icon_link, .realme_icon_padlock { - display: block; -} - -.realme_icon_find_out_more, .realme_icon_link, .realme_icon_padlock, .realme_icon_new_window, .realme_text_icon_new_window { - background-color: transparent; - background-repeat: no-repeat; - background-position: 0 0; -} - -/* hasLayout hack for IE7 */ -.realme_secondary_login, .realme_secondary_login .realme_popup_position, .realme_login, .realme_create_account, .realme_link, .realme_find_out_more, .realme_icon_new_window, .realme_text_icon_new_window { - *display: inline; - *zoom: 1; -} - -.realme_primary_login, .realme_alternative_login, .realme_assert { - border-width: 1px; - border-style: solid; -} - -.realme_icon_padlock, .realme_icon_new_window { - _overflow: hidden; - /*ie6*/ -} - -.realme_primary_login, .realme_alternative_login, .realme_assert { - _width: 320px; - /*ie6*/ -} - -/* - The base RealMe widget - ----------------------------------------------------- -*/ -.realme_widget { - padding: 0.76923em 1.07692em; - border-color: transparent; - /* The border-color is modified by each theme */ - font-family: sans-serif; - color: inherit; - 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; -} - -.realme_widget .realme_login, .realme_widget .realme_create_account, .realme_widget .whats_realme, .realme_widget .realme_link { - color: #2c5897; -} -.realme_widget .realme_login:hover, .realme_widget .realme_create_account:hover, .realme_widget .whats_realme:hover, .realme_widget .realme_link:hover, .realme_widget .realme_login:active, .realme_widget .realme_create_account:active, .realme_widget .whats_realme:active, .realme_widget .realme_link:active { - color: #204170; - text-decoration: underline; - border: 0; -} - -/* - Typography - ----------------------------------------------------- -*/ -.realme_widget .realme_title { - margin-top: 0; - margin-bottom: 0; - font-size: 1.230769231em; - font-family: sans-serif; - font-weight: bold; - /* 16px */ -} - -.realme_mini_title { - font-size: 1.076923077em; - /* 14px */ -} - -/* - Buttons - ----------------------------------------------------- -*/ -.realme_button { - line-height: 1; - margin-top: 1px; - cursor: pointer; - color: white; - border-width: 1px; - border-style: solid; - background-color: #3871ae; - background-repeat: repeat-x; - /* Things that fancy browsers get */ - background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #3a78bb), color-stop(100%, #3871ae)); - background-image: -webkit-linear-gradient(#3a78bb, #3871ae); - background-image: -moz-linear-gradient(#3a78bb, #3871ae); - background-image: -o-linear-gradient(#3a78bb, #3871ae); - background-image: linear-gradient(#3a78bb, #3871ae); - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - -ms-border-radius: 3px; - -o-border-radius: 3px; - border-radius: 3px; - border-color: #1d5794; - -webkit-appearance: none; - -webkit-border-image: none; - - /** - * Added for SilverStripe module: - * SilverStripe uses