fix: fix the primevue message style and confirmation button to suppoe…

…t the latest v3.36.0
bcgov · Oct 16, 2023 · ccd6c54 · ccd6c54
1 parent 70364b8
commit ccd6c54
Showing 1 changed file with 26 additions and 17 deletions.
diff --git 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;