Skip to content

Commit

Permalink
sidebar and some responsive styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@J0taFerreira
J0taFerreira committed Oct 3, 2023
1 parent 4bee819 commit 7f5fb27
Showing 1 changed file with 95 additions and 47 deletions.
142 changes: 95 additions & 47 deletions style-sheets/primevue-components-overrides.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -168,7 +168,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;
}
Expand Down Expand Up @@ -430,36 +430,38 @@ label {
margin: 0;
}

.#{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;
Expand All @@ -471,9 +473,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;
Expand All @@ -498,15 +500,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 {
Expand All @@ -516,7 +518,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;
Expand All @@ -525,19 +527,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;
Expand All @@ -551,7 +553,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;

Expand All @@ -569,7 +571,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;
Expand All @@ -581,15 +583,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;

Expand All @@ -604,45 +606,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,
Expand All @@ -657,7 +659,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(
Expand All @@ -671,7 +673,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,
Expand All @@ -690,7 +692,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,
Expand All @@ -701,22 +703,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;
}

Expand All @@ -727,7 +729,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'
Expand All @@ -740,7 +742,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;
}

Expand All @@ -753,7 +755,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;
Expand All @@ -776,19 +778,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;
}

Expand All @@ -807,3 +809,49 @@ label {
border-left: solid 0.3125rem
map.get(lightTheme.$light-theme, 'support-success') !important;
}

/* ------------------------------------ Sidebar --------------------------------- */

.#{variables.$primevue-prefix}-sidebar-left
.#{variables.$primevue-prefix}-sidebar {
width: 66% ;
}
.#{variables.$primevue-prefix}-sidebar-header {
align-items: flex-start !important;
justify-content: space-between !important;
padding: 1rem 1.25rem 1rem 0 !important;
}

.#{variables.$primevue-prefix}-sidebar-mask {
top: 3rem !important; //header height
}

.#{variables.$primevue-prefix}-sidebar-visible > div {
border: none;
border-right: 0.063rem solid map.get(lightTheme.$light-theme, 'layer-selected-01'); ;
}

@media (min-device-width: 768px) {
.#{variables.$primevue-prefix}-sidebar-left
.#{variables.$primevue-prefix}-sidebar {
width: 33.3% !important;
}

}

@media (min-device-width: 1366px) {

.#{variables.$primevue-prefix}-sidebar-mask,
.#{variables.$primevue-prefix}-sidebar-left
.#{variables.$primevue-prefix}-sidebar {
width: 16rem !important;
}
.#{variables.$primevue-prefix}-sidebar-close {
display: none !important;
}

.#{variables.$primevue-prefix}-sidebar-visible > div {
transition-duration: 0ms !important;
}
}

0 comments on commit 7f5fb27

Please sign in to comment.