From bfdec1e69d7f82dc21d9beff2e2166bbd7d26332 Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Sun, 9 Jun 2024 00:39:57 -0400 Subject: [PATCH] fix(styling): add missing btn-default text color & border color - the `btn-default` is no longer a valid CSS class in Bootstrap 5, but we can keep the class and provide our own text color & border for it - also add missing styling for dark mode as well --- packages/common/src/styles/_variables.scss | 14 ++++++++++---- packages/common/src/styles/slick-grid.scss | 18 ++++++++++++++++++ 2 files changed, 28 insertions(+), 4 deletions(-) diff --git a/packages/common/src/styles/_variables.scss b/packages/common/src/styles/_variables.scss index c2e163f5a..2fbd984de 100644 --- a/packages/common/src/styles/_variables.scss +++ b/packages/common/src/styles/_variables.scss @@ -25,7 +25,10 @@ $slick-font-size-base: $slick-font-size-base-v $slick-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default; $slick-primary-color: $primary-color !default; $slick-btn-default-bg-color: #fff !default; +$slick-btn-default-border: 1px solid #dbdbdb !default; $slick-btn-default-border-color: #ccc !default; +$slick-btn-default-border-hover-color: #b5b5b5 !default; +$slick-btn-default-text-color: #212529 !default; $slick-button-primary-bg-color: $slick-primary-color !default; $slick-button-primary-bg-color-disabled: #bebebe !default; $slick-button-primary-color: inherit !default; @@ -557,8 +560,8 @@ $slick-editor-modal-footer-border-top: 1px solid #c9c9c9 !d $slick-editor-modal-footer-padding: 8px !default; $slick-editor-modal-footer-status-text-width: 40% !default; $slick-editor-modal-footer-buttons-width: 60% !default; -$slick-editor-modal-footer-btn-border: 1px solid #dbdbdb !default; -$slick-editor-modal-footer-btn-border-hover-color: #b5b5b5 !default; +$slick-editor-modal-footer-btn-border: $slick-btn-default-border !default; +$slick-editor-modal-footer-btn-border-hover-color: $slick-btn-default-border-hover-color !default; $slick-editor-modal-footer-btn-height: inherit !default; $slick-editor-modal-footer-btn-margin: 0 5px 0 0 !default; $slick-editor-modal-footer-btn-radius: 4px !default; @@ -979,6 +982,8 @@ $slick-dark-text-color: #d4d4d4; --slick-button-primary-color: #bababa; --slick-button-style-bg-color: var(--slick-base-dark-menu-bg-color); --slick-btn-default-bg-color: #383838; + --slick-btn-default-text-color: #ffffff; + --slick-btn-default-border-color: #565656; --slick-cell-even-background-color: #141618; --slick-cell-odd-background-color: #2c3034; --slick-cell-text-color: #d4d4d4; @@ -1004,7 +1009,6 @@ $slick-dark-text-color: #d4d4d4; --slick-detail-view-icon-opacity-hover: 0.75; --slick-detail-view-container-border: 1px solid #525252; --slick-detail-view-container-bgcolor: #3c4349; - --slick-btn-default-border-color: #565656; --slick-grid-menu-icon-btn-color: #ededed; --slick-row-mouse-hover-color: #2c3034; --slick-header-background-color: #1c1c1c; @@ -1070,7 +1074,10 @@ $slick-dark-text-color: #d4d4d4; --slick-editor-modal-default-btn-disabled-bg-color: #3f3f3f; --slick-editor-modal-default-btn-disabled-color: #5b5b5b; --slick-editor-modal-detail-container-border-modified: 1px solid #cc8400; + --slick-btn-default-border: var(--slick-base-dark-menu-item-border); + --slick-btn-default-border-hover-color: var(--slick-button-hover-border-color); --slick-editor-modal-close-btn-border-left: var(--slick-base-dark-menu-border); + --slick-editor-modal-footer-btn-border: var(--slick-base-dark-menu-item-border); --slick-editor-modal-footer-btn-border-hover-color: var(--slick-button-hover-border-color); --slick-editor-modal-container-bg-color: #333333; --slick-editor-modal-header-bg-color: #333333; @@ -1082,7 +1089,6 @@ $slick-dark-text-color: #d4d4d4; --slick-editor-modal-footer-border-top: var(--slick-base-dark-menu-border); --slick-editor-modal-input-editor-border: var(--slick-base-dark-menu-border); --slick-editor-modal-checkbox-editor-border: var(--slick-base-dark-menu-border); - --slick-editor-modal-footer-btn-border: var(--slick-base-dark-menu-item-border); --slick-editor-modal-container-box-shadow: 0 0 2px #606060; --slick-editor-modal-reset-btn-bg-color: #383838; --slick-editor-modal-close-btn-bg-color: transparent; diff --git a/packages/common/src/styles/slick-grid.scss b/packages/common/src/styles/slick-grid.scss index 35f5d5f9c..592f24dc6 100644 --- a/packages/common/src/styles/slick-grid.scss +++ b/packages/common/src/styles/slick-grid.scss @@ -24,6 +24,24 @@ cursor: pointer; } +// default buttons used by SlickGrid and also when appended to body (e.g. LongText Editor) +.btn-default { + color: var(--slick-btn-default-text-color, $slick-btn-default-text-color); + border: var(--slick-btn-default-border, $slick-btn-default-border); + &:hover { + border-color: var(--slick-btn-default-border-hover-color, $slick-btn-default-border-hover-color); + } +} +.slick-dark-mode { + .btn-default { + color: var(--slick-btn-default-text-color, $slick-btn-default-text-color); + border: var(--slick-btn-default-border, $slick-btn-default-border); + &:hover { + border-color: var(--slick-btn-default-border-hover-color, $slick-btn-default-border-hover-color); + } + } +} + .slickgrid-container { overflow: hidden; outline: 0;