diff --git a/style-sheets/primevue-components-overrides.scss b/style-sheets/primevue-components-overrides.scss index 7b04900..0d11acd 100644 --- a/style-sheets/primevue-components-overrides.scss +++ b/style-sheets/primevue-components-overrides.scss @@ -127,7 +127,7 @@ label { ); outline: 0.125rem solid #ffffff !important; outline-offset: -0.25rem; - box-shadow: unset; + box-shadow: unset !important; } /* ------------------------------------ primevue button outlined--------------------------------- */ @@ -169,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; } @@ -218,7 +218,7 @@ outline: 0.125rem solid #ffffff; border-radius: 0.25rem 0.25rem 0 0; background: map.get(lightTheme.$light-theme, 'field-01'); width: 38rem !important; - height: 3rem !important; + // height: 3rem !important; } .#{variables.$primevue-prefix}-dropdown .#{variables.$primevue-prefix}-dropdown-label { @@ -397,8 +397,7 @@ outline: 0.125rem solid #ffffff; 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; @@ -411,7 +410,7 @@ outline: 0.125rem solid #ffffff; p { margin: 0; - padding: 0 0 0 1rem!important; + padding: 0 0 0 1rem !important; display: inline-flex; margin-bottom: 0; color: map.get(lightTheme.$light-theme, 'text-primary'); @@ -424,7 +423,7 @@ outline: 0.125rem solid #ffffff; } .#{variables.$primevue-prefix}-card -.#{variables.$primevue-prefix}-card-content { + .#{variables.$primevue-prefix}-card-content { display: flex; padding: 0; margin: 0; @@ -436,7 +435,7 @@ outline: 0.125rem solid #ffffff; } label { - color: map.get(lightTheme.$light-theme, 'text-primary');; + color: map.get(lightTheme.$light-theme, 'text-primary'); margin: 0 0 0.75rem !important; } @@ -448,8 +447,7 @@ outline: 0.125rem solid #ffffff; } } -.#{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; @@ -457,29 +455,28 @@ outline: 0.125rem solid #ffffff; } .#{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; @@ -491,9 +488,9 @@ outline: 0.125rem solid #ffffff; } .#{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; @@ -518,15 +515,15 @@ outline: 0.125rem solid #ffffff; } .#{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 { @@ -536,7 +533,7 @@ outline: 0.125rem solid #ffffff; } .#{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; @@ -545,19 +542,19 @@ outline: 0.125rem solid #ffffff; } .#{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; @@ -571,7 +568,7 @@ outline: 0.125rem solid #ffffff; } .#{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; @@ -589,7 +586,7 @@ outline: 0.125rem solid #ffffff; 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; @@ -601,7 +598,7 @@ outline: 0.125rem solid #ffffff; } .#{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; } @@ -609,7 +606,7 @@ outline: 0.125rem solid #ffffff; /* ------------------------------------ dialog confirm header -------------------------- */ .#{variables.$primevue-prefix}-dialog -.#{variables.$primevue-prefix}-dialog-header { + .#{variables.$primevue-prefix}-dialog-header { border-bottom: none; padding-bottom: 0; @@ -624,37 +621,37 @@ outline: 0.125rem solid #ffffff; } .#{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 @@ -662,7 +659,7 @@ outline: 0.125rem solid #ffffff; } .#{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, @@ -677,7 +674,7 @@ outline: 0.125rem solid #ffffff; /* ------------------------------------ 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( @@ -691,7 +688,7 @@ outline: 0.125rem solid #ffffff; } .#{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, @@ -710,7 +707,7 @@ outline: 0.125rem solid #ffffff; } .#{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, @@ -721,22 +718,22 @@ outline: 0.125rem solid #ffffff; } .#{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; } @@ -747,7 +744,7 @@ outline: 0.125rem solid #ffffff; } .#{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' @@ -760,7 +757,7 @@ outline: 0.125rem solid #ffffff; } .#{variables.$primevue-prefix}-toast -.#{variables.$primevue-prefix}-toast-message-text { + .#{variables.$primevue-prefix}-toast-message-text { margin: 0.29rem 0 0 1rem !important; } @@ -773,7 +770,7 @@ outline: 0.125rem solid #ffffff; } .#{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; @@ -796,19 +793,19 @@ outline: 0.125rem solid #ffffff; } .#{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; } @@ -830,11 +827,34 @@ outline: 0.125rem solid #ffffff; /* ------------------------------------ Tag --------------------------------- */ -.#{variables.$primevue-prefix}-badge-success { +.#{variables.$primevue-prefix}-tag-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; + border-radius: 62.5rem; +} + +.#{variables.$primevue-prefix}-tag-danger { 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; + color: map-get( + lightTags.$light-tag-token-overrides, + 'tag-color-red' + ) !important; + background-color: map-get( + lightTags.$light-tag-token-overrides, + 'tag-background-red' + ) !important; padding-top: 0.1rem; -} \ No newline at end of file + border-radius: 62.5rem; +}