Update selection radio card styling

jenkins-is-staging · Jan 18, 2021 · b7b8c3d · b7b8c3d
1 parent dda19dc
commit b7b8c3d
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
 --------------------------------*/