NIFI-6247 - FDS theming updates for input elements.
diff --git a/src/platform/core/common/styles/_inputs.scss b/src/platform/core/common/styles/_inputs.scss
index 5c534ad..7b976b3 100644
--- a/src/platform/core/common/styles/_inputs.scss
+++ b/src/platform/core/common/styles/_inputs.scss
@@ -16,85 +16,92 @@
*/
/* Inputs */
+@mixin fds-input-element-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-input-container {
- min-width: 200px;
- width: 100%;
-}
+ body[fds] .mat-input-container {
+ min-width: 200px;
+ width: 100%;
+ }
-body[fds] .mat-input-wrapper {
- margin: 0;
- padding-bottom: 0;
-}
+ body[fds] .mat-input-wrapper {
+ margin: 0;
+ padding-bottom: 0;
+ }
-body[fds] input.mat-input-element, body[fds] textarea.mat-input-element {
- border-radius: 2px;
- color: $grey2;
- border: 1px solid $grey8;
- height: 32px;
- padding: 0px 10px;
- width: calc(100% - 20px);
-}
+ body[fds] input.mat-input-element, body[fds] textarea.mat-input-element {
+ border-radius: 2px;
+ color: $grey2;
+ border: 1px solid $grey8;
+ height: 32px;
+ padding: 0px 10px;
+ width: calc(100% - 20px);
+ background-color: white;
+ }
-body[fds] textarea.mat-input-element {
- padding: 10px 10px;
-}
+ body[fds] textarea.mat-input-element {
+ padding: 10px 10px;
+ }
-body[fds] input.mat-input-element[disabled], body[fds] textarea.mat-input-element[disabled] {
- background: $grey9;
- color: $grey10;
- border: 1px solid $grey9;
-}
+ body[fds] input.mat-input-element[disabled], body[fds] textarea.mat-input-element[disabled] {
+ background: $grey9;
+ color: $grey10;
+ border: 1px solid $grey9;
+ }
-body[fds] .mat-input-subscript-wrapper {
- margin-top: 18px;
- width: calc(100% - 23px);
-}
+ body[fds] .mat-input-subscript-wrapper {
+ margin-top: 18px;
+ width: calc(100% - 23px);
+ }
-body[fds] input.mat-input-element:focus, body[fds] textarea.mat-input-element:focus {
- border-color: $blue-grey1;
-}
+ body[fds] input.mat-input-element:focus, body[fds] textarea.mat-input-element:focus {
+ border-color: $accentColor;
+ }
-body[fds] .mat-input-underline {
- display: none;
-}
+ body[fds] .mat-input-underline {
+ display: none;
+ }
-body[fds] .mat-input-placeholder {
- font-size: 14px;
- color: $grey3;
- font-weight: 300;
-}
+ body[fds] .mat-input-placeholder {
+ font-size: 14px;
+ color: $grey3;
+ font-weight: 300;
+ }
-body[fds] .mat-input-placeholder {
- top: 27px;
- left: 10px;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- width: calc(100% - 44px);
-}
+ body[fds] .mat-input-placeholder {
+ top: 29px;
+ left: 10px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ width: calc(100% - 44px);
+ }
-body[fds] mat-input-container.mat-focused .mat-input-placeholder {
- transform: translateY(-26px) translateX(-10px) scale(0.75);
-}
+ body[fds] mat-input-container.mat-focused .mat-input-placeholder {
+ transform: translateY(-26px) translateX(-10px) scale(0.75);
+ }
-body[fds] .mat-form-field-can-float.mat-form-field-should-float .mat-form-field-placeholder {
- transform: translateY(-26px) translateX(-10px) scale(.75);
-}
+ body[fds] .mat-form-field-can-float.mat-form-field-should-float .mat-form-field-placeholder {
+ transform: translateY(-26px) translateX(-10px) scale(.75);
+ }
-body[fds] .mat-form-field-can-float .mat-form-field-autofill-control:-webkit-autofill+.mat-form-field-placeholder-wrapper .mat-form-field-placeholder {
- transform: translateY(-26px) translateX(-10px) scale(.75);
-}
+ body[fds] .mat-form-field-can-float .mat-form-field-autofill-control:-webkit-autofill + .mat-form-field-placeholder-wrapper .mat-form-field-placeholder {
+ transform: translateY(-26px) translateX(-10px) scale(.75);
+ }
-body[fds] .input-button {
- top: 5px;
- border-left: none !important;
-}
+ body[fds] .input-button {
+ top: 5px;
+ border-left: none !important;
+ }
-body[fds] .input-button.mat-raised-button[disabled] {
- opacity: 1;
-}
+ body[fds] .input-button.mat-raised-button[disabled] {
+ opacity: 1;
+ }
-body[fds] .mat-hint {
- color: $grey3;
+ body[fds] .mat-hint {
+ color: $grey3;
+ }
}
diff --git a/src/platform/core/theming/_all-theme.scss b/src/platform/core/theming/_all-theme.scss
index 296c987..16fa1cd 100644
--- a/src/platform/core/theming/_all-theme.scss
+++ b/src/platform/core/theming/_all-theme.scss
@@ -20,6 +20,7 @@
@import '../common/styles/buttons';
@import '../common/styles/expansionPanels';
@import '../common/styles/menus';
+@import '../common/styles/inputs';
@import '../common/styles/checkboxes';
// Create a theme.
@@ -33,6 +34,6 @@
@include fds-buttons-theme($theme);
@include fds-expansion-panels-theme($theme);
@include fds-menus-theme($theme);
+ @include fds-input-element-theme($theme);
@include fds-checkboxes-theme($theme);
-
}
