primevue card and tag styles

bcgov · Sep 29, 2023 · d2eae96 · d2eae96
1 parent 4bee819
commit d2eae96
Showing 1 changed file with 86 additions and 55 deletions.
diff --git a/style-sheets/primevue-components-overrides.scss b/style-sheets/primevue-components-overrides.scss
@@ -3,6 +3,7 @@
 @use '../design-tokens/variables.scss' as variables;
 @use '../design-tokens/colors.scss' as colors;
 @use '../design-tokens/light-theme.scss' as lightTheme;
+@use '../design-tokens/light-tags.scss' as lightTags;
 @use '../design-tokens/dark-theme.scss' as darkTheme;
 @use '../design-tokens/light-buttons.scss' as lightButton;
 @use '../design-tokens/dark-buttons.scss' as darkButton;
@@ -168,7 +169,7 @@ label {
         'button-tertiary-active'
     ) !important;
     color: map.get(lightTheme.$light-theme, 'text-on-color');
-    outline: 0.125rem solid #ffffff;
+outline: 0.125rem solid #ffffff;
     outline-offset: -0.25rem;
     box-shadow: unset;
 }
@@ -396,19 +397,22 @@ label {
     border: 0.0625rem solid map.get(lightTheme.$light-theme, 'border-subtle-00');
 }
 
-.#{variables.$primevue-prefix}-card .#{variables.$primevue-prefix}-card-header {
+.#{variables.$primevue-prefix}-card
+.#{variables.$primevue-prefix}-card-header {
     background-color: map.get(lightTheme.$light-theme, 'layer-01');
     display: flex;
     padding: 1.5rem;
     align-items: center;
 
     svg {
         color: map.get(lightTheme.$light-theme, 'support-success');
+        margin-bottom: 0.1rem;
     }
 
     p {
-        display: inline;
-        padding-left: 1rem;
+        margin: 0;
+        padding: 0 0 0 1rem!important;
+        display: inline-flex;
         margin-bottom: 0;
         color: map.get(lightTheme.$light-theme, 'text-primary');
         font-size: 0.875rem;
@@ -419,47 +423,63 @@ label {
     }
 }
 
-.#{variables.$primevue-prefix}-card .#{variables.$primevue-prefix}-card-body {
-    padding: 1.5rem 3.7rem;
-}
-
 .#{variables.$primevue-prefix}-card
-    .#{variables.$primevue-prefix}-card-content {
+.#{variables.$primevue-prefix}-card-content {
     display: flex;
     padding: 0;
     margin: 0;
+
+    div {
+        display: flex;
+        flex-direction: column;
+        align-self: center;
+    }
+
+    label {
+        color: map.get(lightTheme.$light-theme, 'text-primary');;
+        margin: 0 0 0.75rem !important;
+    }
+
+    span {
+        margin: 0 !important;
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+        letter-spacing: 0.01rem;
+    }
 }
 
-.#{variables.$primevue-prefix}-card .#{variables.$primevue-prefix}-card-title {
+.#{variables.$primevue-prefix}-card
+.#{variables.$primevue-prefix}-card-title {
     font-size: 1rem;
     line-height: 1.5rem;
     font-weight: 400;
     margin-bottom: 0;
 }
 
 .#{variables.$primevue-prefix}-card
-    .#{variables.$primevue-prefix}-card-subtitle {
+.#{variables.$primevue-prefix}-card-subtitle {
     @extend %body-compact-01;
     padding-left: 0;
     padding-right: 0;
     color: map.get(lightTheme.$light-theme, 'text-secondary');
 }
 
-.#{variables.$primevue-prefix}-card .#{variables.$primevue-prefix}-card-footer {
+.#{variables.$primevue-prefix}-card
+.#{variables.$primevue-prefix}-card-footer {
     padding: 0;
 }
 
 /* ------------------------------------ primevue table --------------------------------- */
 
 .#{variables.$primevue-prefix}-column-header-content
-    .#{variables.$primevue-prefix}-column-title {
+.#{variables.$primevue-prefix}-column-title {
     padding: 1rem 0 1.4rem;
 }
 
 .#{variables.$primevue-prefix}-datatable
-    .#{variables.$primevue-prefix}-datatable-thead
-    > tr
-    > th {
+.#{variables.$primevue-prefix}-datatable-thead
+> tr
+> th {
     @extend %body-compact-01;
     background: map.get(lightTheme.$light-theme, 'layer-accent-hover-01');
     height: 3rem;
@@ -471,9 +491,9 @@ label {
 }
 
 .#{variables.$primevue-prefix}-datatable
-    .#{variables.$primevue-prefix}-datatable-tbody
-    > tr
-    > td {
+.#{variables.$primevue-prefix}-datatable-tbody
+> tr
+> td {
     @extend %body-compact-01;
     height: 3rem;
     text-align: left;
@@ -498,15 +518,15 @@ label {
 }
 
 .#{variables.$primevue-prefix}-datatable
-    .#{variables.$primevue-prefix}-paginator-bottom
-    .#{variables.$primevue-prefix}-dropdown
-    .#{variables.$primevue-prefix}-dropdown-label.#{variables.$primevue-prefix}-inputtext {
+.#{variables.$primevue-prefix}-paginator-bottom
+.#{variables.$primevue-prefix}-dropdown
+.#{variables.$primevue-prefix}-dropdown-label.#{variables.$primevue-prefix}-inputtext {
     padding: 0 0.2rem 0 1.4rem;
     align-self: center;
 }
 
 .#{variables.$primevue-prefix}-paginator
-    .#{variables.$primevue-prefix}-inputwrapper,
+.#{variables.$primevue-prefix}-inputwrapper,
 .#{variables.$primevue-prefix}-paginator-current,
 .#{variables.$primevue-prefix}-paginator-prev,
 .#{variables.$primevue-prefix}-paginator-next {
@@ -516,7 +536,7 @@ label {
 }
 
 .#{variables.$primevue-prefix}-paginator
-    .#{variables.$primevue-prefix}-paginator-current,
+.#{variables.$primevue-prefix}-paginator-current,
 .#{variables.$primevue-prefix}-paginator-prev,
 .#{variables.$primevue-prefix}-paginator-next {
     color: map.get(lightTheme.$light-theme, 'text-secondary') !important;
@@ -525,19 +545,19 @@ label {
 }
 
 .#{variables.$primevue-prefix}-paginator
-    .#{variables.$primevue-prefix}-dropdown {
+.#{variables.$primevue-prefix}-dropdown {
     width: 5rem !important;
     background-color: transparent !important;
 }
 
 .#{variables.$primevue-prefix}-datatable
-    .#{variables.$primevue-prefix}-paginator-bottom
-    .#{variables.$primevue-prefix}-dropdown-trigger {
+.#{variables.$primevue-prefix}-paginator-bottom
+.#{variables.$primevue-prefix}-dropdown-trigger {
     padding-right: 1.1rem;
 }
 
 .#{variables.$primevue-prefix}-paginator
-    .#{variables.$primevue-prefix}-paginator-current {
+.#{variables.$primevue-prefix}-paginator-current {
     padding-right: 1rem;
     margin-right: auto;
     cursor: auto;
@@ -551,7 +571,7 @@ label {
 }
 
 .#{variables.$primevue-prefix}-dialog
-    .#{variables.$primevue-prefix}-dialog-header {
+.#{variables.$primevue-prefix}-dialog-header {
     border-top-right-radius: 0.5rem;
     border-top-left-radius: 0.5rem;
 
@@ -569,7 +589,7 @@ label {
     margin: 0;
 }
 .#{variables.$primevue-prefix}-dialog
-    .#{variables.$primevue-prefix}-dialog-content:last-of-type {
+.#{variables.$primevue-prefix}-dialog-content:last-of-type {
     padding-bottom: 7.5rem;
     border-bottom-right-radius: 0.5rem;
     border-bottom-left-radius: 0.5rem;
@@ -581,15 +601,15 @@ label {
 }
 
 .#{variables.$primevue-prefix}-dialog
-    .#{variables.$primevue-prefix}-dialog-footer {
+.#{variables.$primevue-prefix}-dialog-footer {
     border-bottom-right-radius: 0.5rem;
     border-bottom-left-radius: 0.5rem;
 }
 
 /* ------------------------------------ dialog confirm header -------------------------- */
 
 .#{variables.$primevue-prefix}-dialog
-    .#{variables.$primevue-prefix}-dialog-header {
+.#{variables.$primevue-prefix}-dialog-header {
     border-bottom: none;
     padding-bottom: 0;
 
@@ -604,45 +624,45 @@ label {
 }
 
 .#{variables.$primevue-prefix}-dialog
-    .#{variables.$primevue-prefix}-dialog-footer {
+.#{variables.$primevue-prefix}-dialog-footer {
     border-top: none;
     padding-bottom: 4rem !important;
 }
 
 .#{variables.$primevue-prefix}-dialog
-    .#{variables.$primevue-prefix}-dialog-header-icons {
+.#{variables.$primevue-prefix}-dialog-header-icons {
     float: right;
 }
 
 .#{variables.$primevue-prefix}-dialog
-    .#{variables.$primevue-prefix}dialog-header
-    .#{variables.$primevue-prefix}-dialog-header-icon:focus {
+.#{variables.$primevue-prefix}dialog-header
+.#{variables.$primevue-prefix}-dialog-header-icon:focus {
     box-shadow: none;
 }
 
 .#{variables.$primevue-prefix}-dialog-header-icon
-    .#{variables.$primevue-prefix}-icon {
+.#{variables.$primevue-prefix}-icon {
     height: 0.6rem;
     width: 0.6rem;
 }
 
 .#{variables.$primevue-prefix}-dialog
-    .#{variables.$primevue-prefix}-confirm-dialog-reject,
+.#{variables.$primevue-prefix}-confirm-dialog-reject,
 .#{variables.$primevue-prefix}-confirm-dialog-accept {
     padding: 0.75rem 5.1875rem;
 }
 
 /* ------------------------------------ dialog confirm button reject --------------------------         */
 .#{variables.$primevue-prefix}-dialog
-    .#{variables.$primevue-prefix}-confirm-dialog-reject,
+.#{variables.$primevue-prefix}-confirm-dialog-reject,
 .#{variables.$primevue-prefix}-confirm-dialog-reject:enabled:hover,
 .#{variables.$primevue-prefix}-confirm-dialog-reject:enabled:focus {
     border: 0.0625rem solid
         map.get(lightButton.$light-button-token-overrides, 'button-tertiary') !important;
 }
 
 .#{variables.$primevue-prefix}-button
-    .#{variables.$primevue-prefix}-confirm-dialog-reject,
+.#{variables.$primevue-prefix}-confirm-dialog-reject,
 .#{variables.$primevue-prefix}-button-text:enabled:hover {
     background: map.get(
         lightButton.$light-button-token-overrides,
@@ -657,7 +677,7 @@ label {
 
 /* ------------------------------------ dialog confirm button accept -------------------------- */
 .#{variables.$primevue-prefix}-dialog
-    .#{variables.$primevue-prefix}-confirm-dialog-accept {
+.#{variables.$primevue-prefix}-confirm-dialog-accept {
     color: colors.$white !important;
     border: 0.0625rem solid
         map.get(
@@ -671,7 +691,7 @@ label {
 }
 
 .#{variables.$primevue-prefix}-dialog
-    .#{variables.$primevue-prefix}-confirm-dialog-accept:hover {
+.#{variables.$primevue-prefix}-confirm-dialog-accept:hover {
     border: 0.0625rem solid
         map.get(
             lightButton.$light-button-token-overrides,
@@ -690,7 +710,7 @@ label {
 }
 
 .#{variables.$primevue-prefix}-toast
-    .#{variables.$primevue-prefix}-toast-detail,
+.#{variables.$primevue-prefix}-toast-detail,
 .#{variables.$primevue-prefix}-toast-summary {
     color: map.get(
         lightNotifications.$light-notification-token-overrides,
@@ -701,22 +721,22 @@ label {
 }
 
 .#{variables.$primevue-prefix}-toast
-    .#{variables.$primevue-prefix}-toast-summary {
+.#{variables.$primevue-prefix}-toast-summary {
     margin-right: 0.4rem;
 }
 
 .#{variables.$primevue-prefix}-toast
-    .#{variables.$primevue-prefix}-toast-icon-close
+.#{variables.$primevue-prefix}-toast-icon-close
     svg {
-    color: map.get(
-        lightNotifications.$light-notification-token-overrides,
-        'notification-action-tertiary-inverse-text'
+        color: map.get(
+            lightNotifications.$light-notification-token-overrides,
+            'notification-action-tertiary-inverse-text'
     ) !important;
     margin-top: 0 !important;
 }
 
 .#{variables.$primevue-prefix}-toast
-    .#{variables.$primevue-prefix}-toast-icon-close:focus {
+.#{variables.$primevue-prefix}-toast-icon-close:focus {
     box-shadow: 0 0 0 0.1rem map.get(lightTheme.$light-theme, 'support-error') !important;
 }
 
@@ -727,7 +747,7 @@ label {
 }
 
 .#{variables.$primevue-prefix}-toast
-    .#{variables.$primevue-prefix}-toast-message-error {
+.#{variables.$primevue-prefix}-toast-message-error {
     background: map.get(
         lightNotifications.$light-notification-token-overrides,
         'notification-background-error'
@@ -740,7 +760,7 @@ label {
 }
 
 .#{variables.$primevue-prefix}-toast
-    .#{variables.$primevue-prefix}-toast-message-text {
+.#{variables.$primevue-prefix}-toast-message-text {
     margin: 0.29rem 0 0 1rem !important;
 }
 
@@ -753,7 +773,7 @@ label {
 }
 
 .#{variables.$primevue-prefix}-message
-    .#{variables.$primevue-prefix}-message-text {
+.#{variables.$primevue-prefix}-message-text {
     @extend %body-compact-01;
     padding-left: 0.5rem;
     padding-right: 0.3125rem;
@@ -776,19 +796,19 @@ label {
 }
 
 .#{variables.$primevue-prefix}-message
-    .#{variables.$primevue-prefix}-message-wrapper {
+.#{variables.$primevue-prefix}-message-wrapper {
     padding: 0.5rem 0.5rem 0.5rem 0;
 }
 
 .#{variables.$primevue-prefix}-message-wrapper
-    .#{variables.$primevue-prefix}-message-close
+.#{variables.$primevue-prefix}-message-close
     svg {
     color: colors.$gray-100 !important;
     margin: 0;
 }
 
 .#{variables.$primevue-prefix}-message
-    .#{variables.$primevue-prefix}-message-close:hover {
+.#{variables.$primevue-prefix}-message-close:hover {
     background: none;
 }
 
@@ -807,3 +827,14 @@ label {
     border-left: solid 0.3125rem
         map.get(lightTheme.$light-theme, 'support-success') !important;
 }
+
+/* ------------------------------------ Tag --------------------------------- */
+
+.#{variables.$primevue-prefix}-badge-success {
+    font-size: 0.75rem !important;
+    font-weight: 400 !important;
+    letter-spacing: 0.02rem !important;
+    color: map-get(lightTags.$light-tag-token-overrides, 'tag-color-green') !important;
+    background-color: map-get(lightTags.$light-tag-token-overrides, 'tag-background-green') !important;
+    padding-top: 0.1rem;
+}