From fc03da2b23846e15ee92e7c70cd1547f11e36700 Mon Sep 17 00:00:00 2001
From: jawad khan <jawad-khan@users.noreply.github.com>
Date: Wed, 23 Sep 2020 18:47:25 +0500
Subject: [PATCH] Added Apple sign-in button branding (#25015)

* Added Apple sign-in button branding

LEARNER-7926
---
 lms/static/sass/multicourse/_account.scss     | 10 +++++++
 .../partials/lms/theme/_variables-v1.scss     |  2 ++
 lms/static/sass/views/_login-register.scss    | 28 +++++++++++++++++++
 3 files changed, 40 insertions(+)

diff --git a/lms/static/sass/multicourse/_account.scss b/lms/static/sass/multicourse/_account.scss
index a9e6595a98..7a635ab899 100644
--- a/lms/static/sass/multicourse/_account.scss
+++ b/lms/static/sass/multicourse/_account.scss
@@ -611,6 +611,16 @@
         box-shadow: 0 2px 1px 0 $facebook-focus-blue;
       }
 
+      &.button-oa2-apple-id:hover,
+      &.button-oa2-apple-id:focus {
+        background-color: $apple-focus-black;
+        border: 1px solid $apple-focus-black;
+      }
+
+      &.button-oa2-apple-id:hover {
+        box-shadow: 0 2px 1px 0 $apple-focus-black;
+      }
+
       &.button-oa2-linkedin-oauth2:hover,
       &.button-oa2-linkedin-oauth2:focus {
         background-color: $linkedin-blue;
diff --git a/lms/static/sass/partials/lms/theme/_variables-v1.scss b/lms/static/sass/partials/lms/theme/_variables-v1.scss
index b00ef42a00..a9e016cc9c 100644
--- a/lms/static/sass/partials/lms/theme/_variables-v1.scss
+++ b/lms/static/sass/partials/lms/theme/_variables-v1.scss
@@ -193,6 +193,8 @@ $google-blue: #4285f4;
 $google-focus-blue: #287ae6;
 $microsoft-black: #2f2f2f;
 $microsoft-focus-black: #000;
+$apple-black: #000000;
+$apple-focus-black: $apple-black;
 
 // shadows
 $shadow: rgba(0, 0, 0, 0.2) !default;
diff --git a/lms/static/sass/views/_login-register.scss b/lms/static/sass/views/_login-register.scss
index 42e23f098b..cabf933c0d 100644
--- a/lms/static/sass/views/_login-register.scss
+++ b/lms/static/sass/views/_login-register.scss
@@ -619,6 +619,34 @@ ul.fa-ul{
       }
     }
 
+    &.button-oa2-apple-id {
+      color: white;
+      border-color: $apple-black;
+      background-color: $apple-black;
+
+      span {
+        vertical-align: middle;
+        @include font-size(16);
+      }
+
+      .icon {
+        background: transparent;
+
+        .icon-image {
+          max-height: 2.2em;
+          max-width: 2.5em;
+          margin-top: 0px;
+        }
+      }
+
+      &:hover,
+      &:focus {
+        background-color: $apple-focus-black;
+        border: 1px solid $apple-focus-black;
+        color: $white;
+      }
+    }
+
     &.button-oa2-linkedin-oauth2 {
       color: $linkedin-blue;