From b7b8c3d1b3e50a8fdd9b23f175a7e79132fa8dea Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Sat, 16 Jan 2021 16:34:42 +0530
Subject: [PATCH] Update selection radio card styling

---
 .../src/themes/default/globals/site.variables |  1 +
 .../src/themes/default/views/card.overrides   | 25 +++++++++++++++----
 .../src/themes/default/views/card.variables   | 12 +++++++++
 3 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/modules/theme/src/themes/default/globals/site.variables b/modules/theme/src/themes/default/globals/site.variables
index c2dde26eea0..a878c6a792d 100644
--- a/modules/theme/src/themes/default/globals/site.variables
+++ b/modules/theme/src/themes/default/globals/site.variables
@@ -81,6 +81,7 @@
 @doveGray         : #616161;
 @aliceBlue        : #f7fcff;
 @alabaster        : #f7f7f7;
+@pureBlack        : #000000;
 
 /*-------------------
         Page
diff --git a/modules/theme/src/themes/default/views/card.overrides b/modules/theme/src/themes/default/views/card.overrides
index 93e2f6ad3ec..916601b5356 100644
--- a/modules/theme/src/themes/default/views/card.overrides
+++ b/modules/theme/src/themes/default/views/card.overrides
@@ -355,7 +355,8 @@
         &.radio-selection-card {
             border: none !important;
             box-shadow: none !important;
-            background: transparent;
+            background: @selectionCardWithRadioBackground;
+            border-left: @selectionCardWithRadioBorderLeft !important;
 
             .integrate-radio {
                 flex-grow: 0;
@@ -379,20 +380,33 @@
                 .ui.radio.checkbox label::before {
                     width: 20px !important;
                     height: 20px !important;
-                    border-color: @nobel !important;
+                    border-color: #c8c8c8 !important;
                     border-width: 2px !important;
                 }
             }
 
              &.card-selected {
                  box-shadow: none !important;
-                 background: @galleryGray;
+                 background: @selectionCardWithRadioSelectedBackground;
+                 border-left: @selectionCardWithRadioSelectedBorderLeft !important;
 
                  .integrate-radio {
                      .ui.radio.checkbox label::before {
                          border-color: @primaryColor !important;
                      }
                  }
+
+                 .selection-card-content {
+                    .meta {
+                        span {
+                            color: @selectionCardWithRadioSelectedSubheaderColor;
+                        }
+                    }
+                 }
+
+                 &:hover {
+                    background: @selectionCardWithRadioSelectedBackground;
+                 }
              }
 
              .selection-card-content {
@@ -405,7 +419,8 @@
                      font-size: 1.4em;
 
                      span {
-                         color: @primaryColor;
+                         color: @selectionCardWithRadioHighlightedHeaderColor;
+                         font-weight: @selectionCardWithRadioHighlightedHeaderFontWeight;
                      }
                  }
 
@@ -417,7 +432,7 @@
              }
 
              &:hover {
-                background: @galleryGray;
+                background: @selectionCardWithRadioHoverBackground;
              }
         }
     }
diff --git a/modules/theme/src/themes/default/views/card.variables b/modules/theme/src/themes/default/views/card.variables
index f8079fa4666..2541a097e49 100644
--- a/modules/theme/src/themes/default/views/card.variables
+++ b/modules/theme/src/themes/default/views/card.variables
@@ -79,6 +79,18 @@ Recent Application Card
 @selectionCardDescriptionMinHeight: 20px;
 @settingsCardTopActionPanelBackground: @lightPageBackground;
 
+/* Selection card with radio button */
+@selectionCardWithRadioBackground: @galleryGray;
+@selectionCardWithRadioBorderLeft: 4px solid transparent;
+
+@selectionCardWithRadioSelectedBackground: #d6d6d6;
+@selectionCardWithRadioSelectedBorderLeft: 4px solid @primaryColor;
+@selectionCardWithRadioHoverBackground: @selectionCardWithRadioSelectedBackground;
+@selectionCardWithRadioHighlightedHeaderColor: @pureBlack;
+@selectionCardWithRadioHighlightedHeaderFontWeight: 600;
+@selectionCardWithRadioSubheaderColor: #4d4d4d;
+@selectionCardWithRadioSelectedSubheaderColor: #4d4d4d;
+
 /*-------------------------------
           Template Card
 --------------------------------*/