commit 24025684cc407d48e7655ea3ebafd9790dd256a9
author Rob Fellows <rob.fellows@gmail.com> Thu Jul 18 08:47:16 2019 -0400
committer Scott Aslan <scottyaslan@gmail.com> Thu Jul 18 10:19:41 2019 -0400
tree e036f84c22d29338756dc584615510ff87957b54
parent d5c84fce528cec3fd710e9ded135fe517eb12155

NIFI-6445 - FDS - Update Radio button component to be themeable

This closes #38

Signed-off-by: Scott Aslan <scottyaslan@gmail.com>

platform/core/common/styles/_radios.scss

diff --git a/platform/core/common/styles/_radios.scss b/platform/core/common/styles/_radios.scss
index 8ccc309..f100b76 100644
--- a/platform/core/common/styles/_radios.scss
+++ b/platform/core/common/styles/_radios.scss
@@ -17,40 +17,47 @@
 
 /* Radios */
 
-body[fds] .mat-radio-container {
-  height: 12px;
-  width: 12px;
-}
+@mixin fds-radios-theme($theme) {
+    $primaryColor: map-get(map-get($theme, primary), 500);
+    $primaryColorHover: map-get(map-get($theme, primary), 100);
+    $accentColor: map-get(map-get($theme, accent), 500);
+    $accentColorHover: map-get(map-get($theme, accent), 100);
 
-body[fds] .mat-radio-outer-circle {
-  height: 12px;
-  width: 12px;
-  background-color: #fff;
-  border: 1px solid $grey7;
-}
+    body[fds] .mat-radio-container {
+        height: 12px;
+        width: 12px;
+    }
 
-body[fds] .mat-radio-outer-circle:hover {
-  background-color: $blue-grey1;
-  border-color: $blue-grey1;
-}
+    body[fds] .mat-radio-outer-circle {
+        height: 12px;
+        width: 12px;
+        background-color: #fff;
+        border: 1px solid $grey7;
+    }
 
-body[fds] .mat-radio-checked .mat-radio-outer-circle {
-  border: 1px solid $blue-grey1;
-  background-color: $blue-grey1;
-}
+    body[fds] .mat-radio-outer-circle:hover {
+        background-color: $accentColorHover;
+        border-color: $accentColorHover;
+    }
 
-body[fds] .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
-  border-color: $blue-grey1;
-}
+    body[fds] .mat-radio-checked .mat-radio-outer-circle {
+        border: 1px solid $accentColor;
+        background-color: $accentColor;
+    }
 
-body[fds] .mat-radio-inner-circle {
-  height: 10px;
-  width: 10px;
-  left: 1px;
-  top: 1px;
-  background-color: #fff;
-}
+    body[fds] .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
+        border-color: $accentColor;
+    }
 
-body[fds] .mat-radio-checked .mat-radio-inner-circle {
-  background-color: #fff;
+    body[fds] .mat-radio-inner-circle {
+        height: 10px;
+        width: 10px;
+        left: 1px;
+        top: 1px;
+        background-color: #fff;
+    }
+
+    body[fds] .mat-radio-checked .mat-radio-inner-circle {
+        background-color: #fff;
+    }
 }

platform/core/theming/_all-theme.scss

diff --git a/platform/core/theming/_all-theme.scss b/platform/core/theming/_all-theme.scss
index 27682ca..690d792 100644
--- a/platform/core/theming/_all-theme.scss
+++ b/platform/core/theming/_all-theme.scss
@@ -24,6 +24,7 @@
 @import '../common/styles/checkboxes';
 @import '../common/styles/tables';
 @import '../common/styles/links';
+@import '../common/styles/radios';
 
 // Create a theme.
 @mixin fds-theme($theme) {
@@ -39,4 +40,5 @@
   @include fds-checkboxes-theme($theme);
   @include fds-tables-theme($theme);
   @include fds-links-theme($theme);
+  @include fds-radios-theme($theme);
 }