You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@nifi.apache.org by sc...@apache.org on 2019/07/18 14:20:21 UTC
[nifi-fds] branch master updated: NIFI-6445 - FDS - Update Radio
button component to be themeable
This is an automated email from the ASF dual-hosted git repository.
scottyaslan pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/nifi-fds.git
The following commit(s) were added to refs/heads/master by this push:
new 2402568 NIFI-6445 - FDS - Update Radio button component to be themeable
2402568 is described below
commit 24025684cc407d48e7655ea3ebafd9790dd256a9
Author: Rob Fellows <ro...@gmail.com>
AuthorDate: Thu Jul 18 08:47:16 2019 -0400
NIFI-6445 - FDS - Update Radio button component to be themeable
This closes #38
Signed-off-by: Scott Aslan <sc...@gmail.com>
---
platform/core/common/styles/_radios.scss | 79 +++++++++++++++++---------------
platform/core/theming/_all-theme.scss | 2 +
2 files changed, 45 insertions(+), 36 deletions(-)
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;
-}
-
-body[fds] .mat-radio-outer-circle {
- height: 12px;
- width: 12px;
- background-color: #fff;
- border: 1px solid $grey7;
-}
-
-body[fds] .mat-radio-outer-circle:hover {
- background-color: $blue-grey1;
- border-color: $blue-grey1;
-}
-
-body[fds] .mat-radio-checked .mat-radio-outer-circle {
- border: 1px solid $blue-grey1;
- background-color: $blue-grey1;
-}
-
-body[fds] .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
- border-color: $blue-grey1;
-}
-
-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;
+@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-container {
+ height: 12px;
+ width: 12px;
+ }
+
+ body[fds] .mat-radio-outer-circle {
+ height: 12px;
+ width: 12px;
+ background-color: #fff;
+ border: 1px solid $grey7;
+ }
+
+ body[fds] .mat-radio-outer-circle:hover {
+ background-color: $accentColorHover;
+ border-color: $accentColorHover;
+ }
+
+ body[fds] .mat-radio-checked .mat-radio-outer-circle {
+ border: 1px solid $accentColor;
+ background-color: $accentColor;
+ }
+
+ body[fds] .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
+ border-color: $accentColor;
+ }
+
+ 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;
+ }
}
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);
}