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
commit 5eb3448ba17c095a77b7ad0943f1bdb4e9060e22 Author: RynoRn <[email protected]> AuthorDate: Fri May 3 11:07:41 2019 +0200 [NIFI-6258] Updating checkbox components to use the theme accent colors. --- src/platform/core/common/styles/_checkboxes.scss | 123 +++++++++++++---------- 1 file changed, 69 insertions(+), 54 deletions(-) diff --git a/src/platform/core/common/styles/_checkboxes.scss b/src/platform/core/common/styles/_checkboxes.scss index 0268fde..458f49f 100644 --- a/src/platform/core/common/styles/_checkboxes.scss +++ b/src/platform/core/common/styles/_checkboxes.scss @@ -17,69 +17,84 @@ /* Checkboxes */ -body[fds] .mat-checkbox-inner-container { - height: 10px !important; - width: 10px !important; -} +@mixin fds-checkboxes-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-checkbox-frame { - height: 10px; - width: 10px; - border-color: $grey7; -} + body[fds] { + .mat-checkbox-inner-container { + height: 10px !important; + width: 10px !important; + margin-right: 5px; -body[fds] .mat-checkbox-ripple { - left: -7px; - top: -7px; - right: -7px; - bottom: -7px; -} + &:hover { + background-color: $accentColor; + border-radius: 2px; + } + } -body[fds] .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background, -body[fds] .mat-checkbox-checked.mat-accent .mat-checkbox-background { - background-color: $blue-grey1; -} + .mat-checkbox-frame { + height: 10px; + width: 10px; + border-color: $grey7; + } -body[fds] .mat-checkbox-inner-container:hover { - background-color: $blue-grey1; - border-radius: 2px; -} + .mat-checkbox-ripple { + left: -19px; + top: -19px; + right: -7px; + bottom: -7px; + } -body[fds] .mat-checkbox-background { - height: 10px; - width: 10px; -} + .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background, + .mat-checkbox-checked.mat-accent .mat-checkbox-background { + background-color: $accentColor; + } -/* Covalent TdDataTableComponent 'selectable' property checkboxes */ + .mat-checkbox-background { + height: 10px; + width: 10px; + } -body[fds] .mat-pseudo-checkbox { - height: 10px !important; - width: 10px !important; - border: 1px solid $grey7; -} + /* Covalent TdDataTableComponent 'selectable' property checkboxes */ -body[fds] .mat-pseudo-checkbox:hover { - background-color: $blue-grey1; - border: 1px solid $blue-grey1; -} + .mat-pseudo-checkbox { + height: 10px !important; + width: 10px !important; + border: 1px solid $grey7; + } -body[fds] .mat-pseudo-checkbox-checked::after { - content: '\f00c'; - font-size: 8px; - font-family: fontawesome; - margin-top: -9px; - margin-left: -1px; - border: none; - transform: initial; -} + .mat-pseudo-checkbox:hover { + background-color: $blue-grey1; + border: 1px solid $blue-grey1; + } -body[fds] .mat-pseudo-checkbox-checked, body[fds] .mat-pseudo-checkbox-indeterminate { - background-color: $blue-grey1; - border: 1px solid $blue-grey1; - height: 10px; - width: 10px; -} + .mat-pseudo-checkbox-checked::after { + content: '\f00c'; + font-size: 8px; + font-family: fontawesome; + margin-top: -9px; + margin-left: -1px; + border: none; + transform: initial; + } + + .mat-pseudo-checkbox-checked, + .mat-pseudo-checkbox-indeterminate { + background-color: $blue-grey1; + border: 1px solid $blue-grey1; + height: 10px; + width: 10px; + } + + .mat-checkbox-disabled { + cursor: not-allowed; + } -body[fds] .mat-checkbox-disabled { - cursor: not-allowed; + .mat-checkbox-layout .mat-checkbox-label { + line-height: unset; + } + } }
