From 5d5c23ecae5299d0237252b676959a107338f5a5 Mon Sep 17 00:00:00 2001 From: eugene-sinitsyn Date: Mon, 9 Mar 2020 19:06:15 +0300 Subject: [PATCH] Override select styles for material themes --- .../styles/material/_material-dark.scss | 76 +++++++++++++++++-- .../styles/material/_material-light.scss | 69 +++++++++++++++-- 2 files changed, 132 insertions(+), 13 deletions(-) diff --git a/src/app/@theme/styles/material/_material-dark.scss b/src/app/@theme/styles/material/_material-dark.scss index a0439bbb..c2c3b943 100644 --- a/src/app/@theme/styles/material/_material-dark.scss +++ b/src/app/@theme/styles/material/_material-dark.scss @@ -375,7 +375,8 @@ $theme: ( footer-text-highlight-color: footer-text-color, sidebar-background-color: background-basic-color-2, - menu-text-font-weight: 400, + material-regular-font-weight: 400, + menu-text-font-weight: material-regular-font-weight, menu-text-color: rgba(255, 255, 255, 0.7), menu-item-hover-text-color: rgba(255, 255, 255, 0.7), menu-item-hover-background-color: rgba(255, 255, 255, 0.04), @@ -395,12 +396,12 @@ $theme: ( input-border-width: 0 0 1px 0, input-basic-border-color: rgba(255, 255, 255, 0.7), input-basic-focus-border-color: color-primary-focus, - input-basic-disabled-border-color: rgba(255, 255, 255, 0.7), - input-basic-hover-border-color: rgba(255, 255, 255, 0.7), - input-basic-background-color: transparent, - input-basic-focus-background-color: transparent, - input-basic-disabled-background-color: transparent, - input-basic-hover-background-color: transparent, + input-basic-disabled-border-color: input-basic-border-color, + input-basic-hover-border-color: input-basic-border-color, + input-basic-background-color: card-background-color, + input-basic-focus-background-color: card-background-color, + input-basic-disabled-background-color: card-background-color, + input-basic-hover-background-color: card-background-color, input-rectangle-border-radius: 0, input-semi-round-border-radius: 0, input-round-border-radius: 0, @@ -427,7 +428,66 @@ $theme: ( input-control-background-color: input-basic-background-color, input-control-focus-background-color: input-basic-focus-background-color, input-control-disabled-background-color: input-basic-disabled-background-color, - input-control-hover-background-color: input-basic-hover-background-color + input-control-hover-background-color: input-basic-hover-background-color, + + select-tiny-text-font-weight: material-regular-font-weight, + select-small-text-font-weight: material-regular-font-weight, + select-medium-text-font-weight: material-regular-font-weight, + select-large-text-font-weight: material-regular-font-weight, + select-giant-text-font-weight: material-regular-font-weight, + select-rectangle-border-radius: 0, + select-semi-round-border-radius: 0, + select-round-border-radius: 0, + select-outline-border-width: 0 0 1px 0, + select-outline-basic-border-color: rgba(255, 255, 255, 0.7), + select-outline-basic-focus-border-color: color-primary-focus, + select-outline-basic-hover-border-color: select-outline-basic-border-color, + select-outline-basic-disabled-border-color: select-outline-basic-border-color, + select-outline-basic-background-color: card-background-color, + select-outline-basic-focus-background-color: card-background-color, + select-outline-basic-hover-background-color: card-background-color, + select-outline-basic-disabled-background-color: card-background-color, + select-outline-primary-background-color: select-outline-basic-background-color, + select-outline-primary-focus-background-color: select-outline-basic-focus-background-color, + select-outline-primary-hover-background-color: select-outline-basic-hover-background-color, + select-outline-primary-disabled-background-color: select-outline-basic-disabled-background-color, + select-outline-success-background-color: select-outline-basic-background-color, + select-outline-success-focus-background-color: select-outline-basic-focus-background-color, + select-outline-success-hover-background-color: select-outline-basic-hover-background-color, + select-outline-success-disabled-background-color: select-outline-basic-disabled-background-color, + select-outline-info-background-color: select-outline-basic-background-color, + select-outline-info-focus-background-color: select-outline-basic-focus-background-color, + select-outline-info-hover-background-color: select-outline-basic-hover-background-color, + select-outline-info-disabled-background-color: select-outline-basic-disabled-background-color, + select-outline-warning-background-color: select-outline-basic-background-color, + select-outline-warning-focus-background-color: select-outline-basic-focus-background-color, + select-outline-warning-hover-background-color: select-outline-basic-hover-background-color, + select-outline-warning-disabled-background-color: select-outline-basic-disabled-background-color, + select-outline-danger-background-color: select-outline-basic-background-color, + select-outline-danger-focus-background-color: select-outline-basic-focus-background-color, + select-outline-danger-hover-background-color: select-outline-basic-hover-background-color, + select-outline-danger-disabled-background-color: select-outline-basic-disabled-background-color, + select-outline-control-background-color: select-outline-basic-background-color, + select-outline-control-focus-background-color: select-outline-basic-focus-background-color, + select-outline-control-hover-background-color: select-outline-basic-hover-background-color, + select-outline-control-disabled-background-color: select-outline-basic-disabled-background-color, + option-list-shadow: shadow, + option-list-border-style: none, + option-list-adjacent-border-style: none, + option-background-color: color-basic-700, + option-hover-background-color: #4A4A4A, + option-focus-background-color: option-hover-background-color, + option-selected-background-color: #525252, + option-selected-hover-background-color: option-selected-background-color, + option-selected-focus-background-color: option-selected-background-color, + option-selected-text-color: text-primary-color, + option-selected-hover-text-color: text-primary-color, + option-selected-focus-text-color: text-primary-color, + option-tiny-text-font-weight: material-regular-font-weight, + option-small-text-font-weight: material-regular-font-weight, + option-medium-text-font-weight: material-regular-font-weight, + option-large-text-font-weight: material-regular-font-weight, + option-giant-text-font-weight: material-regular-font-weight ); $nb-themes: nb-register-theme($theme, material-dark, dark); diff --git a/src/app/@theme/styles/material/_material-light.scss b/src/app/@theme/styles/material/_material-light.scss index e7958af2..d0ee4421 100644 --- a/src/app/@theme/styles/material/_material-light.scss +++ b/src/app/@theme/styles/material/_material-light.scss @@ -396,10 +396,10 @@ $theme: ( input-basic-focus-border-color: color-primary-focus, input-basic-disabled-border-color: rgba(0, 0, 0, 0.42), input-basic-hover-border-color: rgba(0, 0, 0, 0.42), - input-basic-background-color: transparent, - input-basic-focus-background-color: transparent, - input-basic-disabled-background-color: transparent, - input-basic-hover-background-color: transparent, + input-basic-background-color: background-basic-color-1, + input-basic-focus-background-color: background-basic-color-1, + input-basic-disabled-background-color: background-basic-color-1, + input-basic-hover-background-color: background-basic-color-1, input-rectangle-border-radius: 0, input-semi-round-border-radius: 0, input-round-border-radius: 0, @@ -426,7 +426,66 @@ $theme: ( input-control-background-color: input-basic-background-color, input-control-focus-background-color: input-basic-focus-background-color, input-control-disabled-background-color: input-basic-disabled-background-color, - input-control-hover-background-color: input-basic-hover-background-color + input-control-hover-background-color: input-basic-hover-background-color, + + select-tiny-text-font-weight: material-regular-font-weight, + select-small-text-font-weight: material-regular-font-weight, + select-medium-text-font-weight: material-regular-font-weight, + select-large-text-font-weight: material-regular-font-weight, + select-giant-text-font-weight: material-regular-font-weight, + select-rectangle-border-radius: 0, + select-semi-round-border-radius: 0, + select-round-border-radius: 0, + select-outline-border-width: 0 0 1px 0, + select-outline-basic-border-color: rgba(0, 0, 0, 0.42), + select-outline-basic-focus-border-color: color-primary-focus, + select-outline-basic-hover-border-color: select-outline-basic-border-color, + select-outline-basic-disabled-border-color: select-outline-basic-border-color, + select-outline-basic-background-color: background-basic-color-1, + select-outline-basic-focus-background-color: background-basic-color-1, + select-outline-basic-hover-background-color: background-basic-color-1, + select-outline-basic-disabled-background-color: background-basic-color-1, + select-outline-primary-background-color: select-outline-basic-background-color, + select-outline-primary-focus-background-color: select-outline-basic-focus-background-color, + select-outline-primary-hover-background-color: select-outline-basic-hover-background-color, + select-outline-primary-disabled-background-color: select-outline-basic-disabled-background-color, + select-outline-success-background-color: select-outline-basic-background-color, + select-outline-success-focus-background-color: select-outline-basic-focus-background-color, + select-outline-success-hover-background-color: select-outline-basic-hover-background-color, + select-outline-success-disabled-background-color: select-outline-basic-disabled-background-color, + select-outline-info-background-color: select-outline-basic-background-color, + select-outline-info-focus-background-color: select-outline-basic-focus-background-color, + select-outline-info-hover-background-color: select-outline-basic-hover-background-color, + select-outline-info-disabled-background-color: select-outline-basic-disabled-background-color, + select-outline-warning-background-color: select-outline-basic-background-color, + select-outline-warning-focus-background-color: select-outline-basic-focus-background-color, + select-outline-warning-hover-background-color: select-outline-basic-hover-background-color, + select-outline-warning-disabled-background-color: select-outline-basic-disabled-background-color, + select-outline-danger-background-color: select-outline-basic-background-color, + select-outline-danger-focus-background-color: select-outline-basic-focus-background-color, + select-outline-danger-hover-background-color: select-outline-basic-hover-background-color, + select-outline-danger-disabled-background-color: select-outline-basic-disabled-background-color, + select-outline-control-background-color: select-outline-basic-background-color, + select-outline-control-focus-background-color: select-outline-basic-focus-background-color, + select-outline-control-hover-background-color: select-outline-basic-hover-background-color, + select-outline-control-disabled-background-color: select-outline-basic-disabled-background-color, + option-list-shadow: shadow, + option-list-border-style: none, + option-list-adjacent-border-style: none, + option-background-color: color-basic-100, + option-hover-background-color: color-basic-200, + option-focus-background-color: option-hover-background-color, + option-selected-background-color: color-basic-300, + option-selected-hover-background-color: option-selected-background-color, + option-selected-focus-background-color: option-selected-background-color, + option-selected-text-color: text-primary-color, + option-selected-hover-text-color: text-primary-color, + option-selected-focus-text-color: text-primary-color, + option-tiny-text-font-weight: material-regular-font-weight, + option-small-text-font-weight: material-regular-font-weight, + option-medium-text-font-weight: material-regular-font-weight, + option-large-text-font-weight: material-regular-font-weight, + option-giant-text-font-weight: material-regular-font-weight ); $nb-themes: nb-register-theme($theme, material-light, default);