From 70364b825ca5e3a5152d36d618970d12aca8cb55 Mon Sep 17 00:00:00 2001 From: catherine meng Date: Mon, 16 Oct 2023 12:19:02 -0700 Subject: [PATCH 1/8] fix: adjust the style to support the latest primevue version v3.36.0 --- style-sheets/primevue-components-overrides.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/style-sheets/primevue-components-overrides.scss b/style-sheets/primevue-components-overrides.scss index 1c14646..c23d6bc 100644 --- a/style-sheets/primevue-components-overrides.scss +++ b/style-sheets/primevue-components-overrides.scss @@ -207,6 +207,7 @@ label { .#{variables.$primevue-prefix}-inputtext { width: 100%; height: 100%; + padding-left: 2.5rem; } /* -------------------------------------- primevue dropdown ------------------------------------ */ @@ -223,6 +224,8 @@ label { .#{variables.$primevue-prefix}-dropdown .#{variables.$primevue-prefix}-dropdown-label { @extend %body-compact-01; + border: 0 none; + background: transparent; } .#{variables.$primevue-prefix}-dropdown .#{variables.$primevue-prefix}-icon { @@ -258,6 +261,7 @@ label { .#{variables.$primevue-prefix}-dropdown-panel .#{variables.$primevue-prefix}-dropdown-items { padding: 0; + margin: 0; } .#{variables.$primevue-prefix}-dropdown-panel .#{variables.$primevue-prefix}-dropdown-items From ccd6c547848f5f6b81a512e86e80262485c0a2dc Mon Sep 17 00:00:00 2001 From: catherine meng Date: Mon, 16 Oct 2023 13:46:06 -0700 Subject: [PATCH 2/8] fix: fix the primevue message style and confirmation button to suppoet the latest v3.36.0 --- .../primevue-components-overrides.scss | 43 +++++++++++-------- 1 file changed, 26 insertions(+), 17 deletions(-) diff --git a/style-sheets/primevue-components-overrides.scss b/style-sheets/primevue-components-overrides.scss index c23d6bc..f49c0b8 100644 --- a/style-sheets/primevue-components-overrides.scss +++ b/style-sheets/primevue-components-overrides.scss @@ -140,6 +140,7 @@ label { lightButton.$light-button-token-overrides, 'button-tertiary' ); + background-color: transparent; } .#{variables.$primevue-prefix}-button.#{variables.$primevue-prefix}-button-outlined:enabled:hover { background: map.get( @@ -609,12 +610,15 @@ label { .#{variables.$primevue-prefix}-dialog-footer { border-top: none; padding-bottom: 4rem !important; + border-bottom-right-radius: 0.5rem; + border-bottom-left-radius: 0.5rem; } .#{variables.$primevue-prefix}-dialog - .#{variables.$primevue-prefix}-dialog-footer { - border-bottom-right-radius: 0.5rem; - border-bottom-left-radius: 0.5rem; + .#{variables.$primevue-prefix}-dialog-footer + button { + margin: 0 0.5rem 0 0; + width: auto; } /* ------------------------------------ dialog confirm header -------------------------- */ @@ -634,12 +638,6 @@ label { } } -.#{variables.$primevue-prefix}-dialog - .#{variables.$primevue-prefix}-dialog-footer { - border-top: none; - padding-bottom: 4rem !important; -} - .#{variables.$primevue-prefix}-dialog .#{variables.$primevue-prefix}-dialog-header-icons { float: right; @@ -672,6 +670,11 @@ label { map.get(lightButton.$light-button-token-overrides, 'button-tertiary') !important; } +.#{variables.$primevue-prefix}-dialog + .#{variables.$primevue-prefix}-confirm-dialog-reject { + background: transparent; +} + .#{variables.$primevue-prefix}-button .#{variables.$primevue-prefix}-confirm-dialog-reject, .#{variables.$primevue-prefix}-button-text:enabled:hover { @@ -777,12 +780,22 @@ label { /* ------------------------------------ primevue message --------------------------------- */ +.#{variables.$primevue-prefix}-icon { + height: 0.75rem; + width: 0.75rem; +} + .#{variables.$primevue-prefix}-message { position: absolute; left: 0; right: 0; } +.#{variables.$primevue-prefix}-message + .#{variables.$primevue-prefix}-message-wrapper { + padding: 0.5rem 0.5rem 0.5rem 0; +} + .#{variables.$primevue-prefix}-message .#{variables.$primevue-prefix}-message-text { @extend %body-compact-01; @@ -806,9 +819,10 @@ label { vertical-align: middle; } -.#{variables.$primevue-prefix}-message - .#{variables.$primevue-prefix}-message-wrapper { - padding: 0.5rem 0.5rem 0.5rem 0; +.#{variables.$primevue-prefix}-message-close.#{variables.$primevue-prefix}-link { + margin-left: auto; + overflow: hidden; + position: relative; } .#{variables.$primevue-prefix}-message-wrapper @@ -823,11 +837,6 @@ label { background: none; } -.#{variables.$primevue-prefix}-icon { - height: 0.75rem; - width: 0.75rem; -} - .#{variables.$primevue-prefix}-message-wrapper .#{variables.$primevue-prefix}-message-close:focus { box-shadow: 0 0 0 0.1rem map.get(lightTheme.$light-theme, 'support-success') !important; From 216bc812d81922eedd3829b60259f5eccfe22b73 Mon Sep 17 00:00:00 2001 From: catherine meng Date: Thu, 19 Oct 2023 15:33:32 -0700 Subject: [PATCH 3/8] fix: fix the primevue button on focus event white space --- style-sheets/primevue-components-overrides.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/style-sheets/primevue-components-overrides.scss b/style-sheets/primevue-components-overrides.scss index f49c0b8..4367bef 100644 --- a/style-sheets/primevue-components-overrides.scss +++ b/style-sheets/primevue-components-overrides.scss @@ -125,8 +125,8 @@ label { lightButton.$light-button-token-overrides, 'button-primary' ); - outline: 0.125rem solid #ffffff !important; - outline-offset: -0.25rem; + outline: 0.075rem solid #ffffff !important; + outline-offset: -0.2rem; box-shadow: unset !important; } @@ -170,8 +170,8 @@ label { 'button-tertiary-active' ) !important; color: map.get(lightTheme.$light-theme, 'text-on-color'); - outline: 0.125rem solid #ffffff; - outline-offset: -0.25rem; + outline: 0.075rem solid #ffffff; + outline-offset: -0.2rem; box-shadow: unset; } .#{variables.$primevue-prefix}-button.#{variables.$primevue-prefix}-button-outlined:disabled { From 313708205013315fa2c78e6b69af35abc3ec8000 Mon Sep 17 00:00:00 2001 From: catherine meng Date: Mon, 23 Oct 2023 09:54:56 -0700 Subject: [PATCH 4/8] fix: fix primevue dialog footer border --- style-sheets/primevue-components-overrides.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style-sheets/primevue-components-overrides.scss b/style-sheets/primevue-components-overrides.scss index ee774ff..820defe 100644 --- a/style-sheets/primevue-components-overrides.scss +++ b/style-sheets/primevue-components-overrides.scss @@ -608,7 +608,7 @@ label { } .#{variables.$primevue-prefix}-dialog-footer { - border-top: none; + border-top: none !important; padding-bottom: 4rem !important; border-bottom-right-radius: 0.5rem; border-bottom-left-radius: 0.5rem; From dcb6b816b2748bc9376f010b0d9089a2a024902a Mon Sep 17 00:00:00 2001 From: catherine meng Date: Thu, 4 Jan 2024 15:22:35 -0800 Subject: [PATCH 5/8] fix(primevue): update tab style to work in latest primevue version v3.45.0 --- style-sheets/primevue-components-overrides.scss | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/style-sheets/primevue-components-overrides.scss b/style-sheets/primevue-components-overrides.scss index a23013b..f7dfc5e 100644 --- a/style-sheets/primevue-components-overrides.scss +++ b/style-sheets/primevue-components-overrides.scss @@ -1155,12 +1155,13 @@ label { .#{variables.$primevue-prefix}-tabview .#{variables.$primevue-prefix}-tabview-panels { padding: 0; - background-color: transparent; } .#{variables.$primevue-prefix}-tabview .#{variables.$primevue-prefix}-tabview-nav { border: none; + padding: 0; + margin: 0; } .#{variables.$primevue-prefix}-tabview @@ -1175,7 +1176,9 @@ label { border-radius: 0; border: none; border-top: 0.125rem solid transparent; - border-bottom: 0.125rem solid transparent; + border-bottom: 0.0625rem solid transparent; + text-decoration: none; + color: map.get(lightTheme.$light-theme, 'text-primary') } .#{variables.$primevue-prefix}-tabview @@ -1209,6 +1212,7 @@ label { font-weight: 700; border-top: solid 0.125rem map.get(lightTheme.$light-theme, 'border-interactive') !important; + background-color: #ffffff; } .#{variables.$primevue-prefix}-tabview @@ -1240,7 +1244,7 @@ label { box-shadow: none !important; outline: 0.125rem solid map.get(lightTheme.$light-theme, 'border-interactive') !important; - outline-offset: -0.12rem !important; + outline-offset: -0.125rem !important; } @media (min-width: 500px) { From ae4a489253b18b00414b263417176cf4c311d03d Mon Sep 17 00:00:00 2001 From: catherine meng Date: Thu, 4 Jan 2024 15:57:37 -0800 Subject: [PATCH 6/8] fix(primevue): fix primevue message for new primevue version --- .../primevue-components-overrides.scss | 32 +++++++++---------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/style-sheets/primevue-components-overrides.scss b/style-sheets/primevue-components-overrides.scss index f7dfc5e..d0107a3 100644 --- a/style-sheets/primevue-components-overrides.scss +++ b/style-sheets/primevue-components-overrides.scss @@ -845,13 +845,6 @@ label { right: 0; } -.#{variables.$primevue-prefix}-message - .#{variables.$primevue-prefix}-message-wrapper { - display: flex; - align-items: baseline; - padding: 0.5rem 0.5rem 0.5rem 0; -} - .#{variables.$primevue-prefix}-message .#{variables.$primevue-prefix}-message-text { @extend %body-compact-01; @@ -876,24 +869,31 @@ label { flex-shrink: 0; } -.#{variables.$primevue-prefix}-message-close.#{variables.$primevue-prefix}-link { - margin-left: auto; - overflow: hidden; - position: relative; +.#{variables.$primevue-prefix}-message + .#{variables.$primevue-prefix}-message-wrapper { + display: flex; + align-items: baseline; + padding: 0 0.5rem 0 0; } .#{variables.$primevue-prefix}-message-wrapper .#{variables.$primevue-prefix}-message-close { - align-self: flex-start; - margin-top: 0.5rem; + align-self: flex-start; + margin-top: 0.5rem; } .#{variables.$primevue-prefix}-message-wrapper .#{variables.$primevue-prefix}-message-close svg { - color: colors.$gray-100 !important; - margin: 0.55rem 0 0; - align-self: baseline !important; + color: colors.$gray-100 !important; + margin: 0.55rem 0 0; + align-self: baseline !important; +} + +.#{variables.$primevue-prefix}-message-close.#{variables.$primevue-prefix}-link { + margin-left: auto; + overflow: hidden; + position: relative; } .#{variables.$primevue-prefix}-message From 385c2e539adb7c6aa3e6e3cc0cf78e2a368ff3a4 Mon Sep 17 00:00:00 2001 From: catherine meng Date: Thu, 4 Jan 2024 16:07:52 -0800 Subject: [PATCH 7/8] fix primevue message style --- .../primevue-components-overrides.scss | 26 +++++++------------ 1 file changed, 10 insertions(+), 16 deletions(-) diff --git a/style-sheets/primevue-components-overrides.scss b/style-sheets/primevue-components-overrides.scss index ea95d3e..d0107a3 100644 --- a/style-sheets/primevue-components-overrides.scss +++ b/style-sheets/primevue-components-overrides.scss @@ -845,13 +845,6 @@ label { right: 0; } -.#{variables.$primevue-prefix}-message - .#{variables.$primevue-prefix}-message-wrapper { - display: flex; - align-items: baseline; - padding: 0.5rem 0.5rem 0.5rem 0; -} - .#{variables.$primevue-prefix}-message .#{variables.$primevue-prefix}-message-text { @extend %body-compact-01; @@ -876,24 +869,25 @@ label { flex-shrink: 0; } -.#{variables.$primevue-prefix}-message-close.#{variables.$primevue-prefix}-link { - margin-left: auto; - overflow: hidden; - position: relative; +.#{variables.$primevue-prefix}-message + .#{variables.$primevue-prefix}-message-wrapper { + display: flex; + align-items: baseline; + padding: 0 0.5rem 0 0; } .#{variables.$primevue-prefix}-message-wrapper .#{variables.$primevue-prefix}-message-close { - align-self: flex-start; - margin-top: 0.5rem; + align-self: flex-start; + margin-top: 0.5rem; } .#{variables.$primevue-prefix}-message-wrapper .#{variables.$primevue-prefix}-message-close svg { - color: colors.$gray-100 !important; - margin: 0.55rem 0 0; - align-self: baseline !important; + color: colors.$gray-100 !important; + margin: 0.55rem 0 0; + align-self: baseline !important; } .#{variables.$primevue-prefix}-message-close.#{variables.$primevue-prefix}-link { From 9ba8ea67dffb650f0de964e544f1809e0471f424 Mon Sep 17 00:00:00 2001 From: catherine meng Date: Thu, 4 Jan 2024 16:14:25 -0800 Subject: [PATCH 8/8] fix(primevue): fix style for breadcrumb to support newer primevue version --- .../primevue-components-overrides.scss | 25 ++++++++++++------- 1 file changed, 16 insertions(+), 9 deletions(-) diff --git a/style-sheets/primevue-components-overrides.scss b/style-sheets/primevue-components-overrides.scss index d0107a3..f05ae55 100644 --- a/style-sheets/primevue-components-overrides.scss +++ b/style-sheets/primevue-components-overrides.scss @@ -871,23 +871,23 @@ label { .#{variables.$primevue-prefix}-message .#{variables.$primevue-prefix}-message-wrapper { - display: flex; - align-items: baseline; - padding: 0 0.5rem 0 0; + display: flex; + align-items: baseline; + padding: 0 0.5rem 0 0; } .#{variables.$primevue-prefix}-message-wrapper .#{variables.$primevue-prefix}-message-close { - align-self: flex-start; - margin-top: 0.5rem; + align-self: flex-start; + margin-top: 0.5rem; } .#{variables.$primevue-prefix}-message-wrapper .#{variables.$primevue-prefix}-message-close svg { - color: colors.$gray-100 !important; - margin: 0.55rem 0 0; - align-self: baseline !important; + color: colors.$gray-100 !important; + margin: 0.55rem 0 0; + align-self: baseline !important; } .#{variables.$primevue-prefix}-message-close.#{variables.$primevue-prefix}-link { @@ -1024,6 +1024,12 @@ label { display: none; } +.#{variables.$primevue-prefix}-breadcrumb + .#{variables.$primevue-prefix}-breadcrumb-list { + padding: 0; + margin: 0; +} + .#{variables.$primevue-prefix}-breadcrumb .#{variables.$primevue-prefix}-breadcrumb-list .#{variables.$primevue-prefix}-menuitem { @@ -1037,6 +1043,7 @@ label { .#{variables.$primevue-prefix}-menuitem-link { padding: 0.2rem; border-radius: 0; + text-decoration: none; } .#{variables.$primevue-prefix}-breadcrumb @@ -1178,7 +1185,7 @@ label { border-top: 0.125rem solid transparent; border-bottom: 0.0625rem solid transparent; text-decoration: none; - color: map.get(lightTheme.$light-theme, 'text-primary') + color: map.get(lightTheme.$light-theme, 'text-primary'); } .#{variables.$primevue-prefix}-tabview