@mixin glyphicon-light {
font-family: 'Glyphicons Halflings';
text-decoration: none !important;
- color: var(--mainForegroundColor) !important;
+ color: pvar(--mainForegroundColor) !important;
font-display: swap;
}
// focus box-shadow for primeng
.ui-inputtext:enabled:focus:not(.ui-state-error) {
- box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest) !important;
+ box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest) !important;
}
// data table customizations
p-table {
.ui-table-caption {
border: none !important;
- background-color: var(--mainBackgroundColor) !important;
+ background-color: pvar(--mainBackgroundColor) !important;
.caption {
height: 40px;
- display: flex;
+ width: 100%;
+ display: inline-flex;
align-items: center;
+
+ .input-group-text {
+ background-color: transparent;
+ }
}
}
th {
- background-color: var(--mainBackgroundColor) !important;
+ background-color: pvar(--mainBackgroundColor) !important;
outline: 0;
}
td, th {
font-family: $main-fonts;
font-size: 15px !important;
- color: var(--mainForegroundColor) !important;
+ color: pvar(--mainForegroundColor) !important;
}
td {
tr {
outline: 0;
- background-color: var(--mainBackgroundColor) !important;
+ background-color: pvar(--mainBackgroundColor) !important;
height: 46px;
&.ui-state-highlight {
- background-color: var(--submenuColor) !important;
+ background-color: pvar(--submenuColor) !important;
td, td > a {
- color: var(--mainForegroundColor) !important;
+ color: pvar(--mainForegroundColor) !important;
}
}
}
.ui-table-tbody {
tr {
&:hover {
- background-color: var(--submenuColor) !important;
-
- .action-cell {
- .dropdown-root,
- my-edit-button,
- my-delete-button,
- my-button {
- display: inline-block !important;
- }
- }
+ background-color: pvar(--submenuColor) !important;
}
td {
&:last-child td {
border-bottom: none !important;
}
+
+ &:focus + tr > td,
+ &:focus > td {
+ box-shadow: none !important;
+ }
}
.expander {
th {
border: none !important;
border-bottom: 1px solid !important;
- border-color: var(--submenuColor) !important;
+ border-color: pvar(--submenuColor) !important;
text-align: left !important;
padding: 5px 0 5px 15px !important;
font-weight: $font-semibold !important;
- color: var(--mainForegroundColor) !important;
+ color: pvar(--mainForegroundColor) !important;
&.ui-sortable-column:hover {
- background-color: var(--submenuColor) !important;
+ background-color: pvar(--submenuColor) !important;
border: 1px solid !important;
- border-color: var(--submenuColor) !important;
+ border-color: pvar(--submenuColor) !important;
border-width: 0 1px !important;
&:first-child {
}
&.ui-state-highlight {
- background-color: var(--submenuColor) !important;
+ background-color: pvar(--submenuColor) !important;
.pi {
@extend .glyphicon;
font-size: 11px !important;
top: 0 !important;
- &.pi-sort-up {
+ &.pi-sort-amount-up-alt {
@extend .glyphicon-triangle-top;
- color: var(--mainForegroundColor) !important;
+ color: pvar(--mainForegroundColor) !important;
}
- &.pi-sort-down {
+ &.pi-sort-amount-down {
@extend .glyphicon-triangle-bottom;
- color: var(--mainForegroundColor) !important;
+ color: pvar(--mainForegroundColor) !important;
}
}
}
my-edit-button,
my-delete-button,
my-button {
- display: none !important;
+ display: inline-block !important;
margin-left: 5px;
- &.show {
- display: inline-block !important;
- }
-
- // keep displaying on touchscreen
- @media not all and (hover: hover) and (pointer: fine) {
- display: inline-block !important;
- }
-
:first-child {
margin-left: 0
}
p-paginator {
.ui-paginator-bottom {
- background-color: var(--mainBackgroundColor) !important;
+ background-color: pvar(--mainBackgroundColor) !important;
position: relative;
border: none;
border-top: 1px solid !important;
- border-color: var(--submenuColor) !important;
+ border-color: pvar(--submenuColor) !important;
height: 40px;
display: flex;
justify-content: center;
.ui-dropdown {
position: absolute;
+ top: 3px;
left: 0;
+
+ &.ui-state-focus {
+ box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
+ }
+
+ .ui-dropdown-label {
+ color: pvar(--inputPlaceholderColor);
+ }
}
.ui-paginator-current {
position: absolute;
right: 0;
+ color: pvar(--inputPlaceholderColor);
}
.ui-paginator-first,
&.focus-within,
&:focus {
- box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
+ box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
}
&.ui-state-disabled:hover {
.ui-paginator-page {
&.focus-within,
&:focus {
- box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest) !important;
+ box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest) !important;
}
}
a {
- color: var(--mainForegroundColor) !important;
+ color: pvar(--mainForegroundColor) !important;
font-weight: $font-semibold !important;
margin: 0 5px !important;
outline: 0 !important;
&.ui-state-active {
&, &:hover, &:active, &:focus {
color: #fff !important;
- background-color: var(--mainColor) !important;
+ background-color: pvar(--mainColor) !important;
}
}
}
}
// overflow data table
-@mixin overflow-datatable ($table-min-width, $horizontal-margins) {
+@mixin overflow-datatable ($table-min-width, $horizontal-margins, $mobile-paginator: true) {
p-table {
.ui-table-wrapper {
overflow-x: auto;
}
}
- p-paginator .ui-paginator-bottom {
- display: block;
-
- .ui-paginator-current {
- position: relative;
+ @if $mobile-paginator {
+ p-paginator .ui-paginator-bottom {
display: block;
- }
- a, .ui-paginator-pages {
- vertical-align: middle;
+ .ui-paginator-current {
+ position: relative;
+ display: block;
+ }
+
+ a, .ui-paginator-pages {
+ vertical-align: middle;
+ }
}
}
}
&:focus,
&.ui-state-focus {
- box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
+ box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
}
}
}
}
}
- .pi.pi-chevron-down{
+ .pi.pi-chevron-down {
margin-left: 0 !important;
&::after {
}
.ui-multiselect-panel .ui-multiselect-items .ui-multiselect-item.ui-state-highlight {
- background-color: var(--mainColorLighter);
+ background-color: pvar(--mainColorLighter);
}
.ui-inputtext:enabled:focus:not(.ui-state-error) {
- border-color: var(--mainColorLighter) !important;
+ border-color: pvar(--mainColorLighter) !important;
box-shadow: none;
}
}
.ui-chkbox-box {
&.ui-state-active {
- border-color: var(--mainColor) !important;
- background-color: var(--mainColor) !important;
+ border-color: pvar(--mainColor) !important;
+ background-color: pvar(--mainColor) !important;
}
.ui-chkbox-icon {
height: 12px;
opacity: 0;
transform: rotate(45deg) scale(0);
- border-right: 2px solid var(--mainBackgroundColor);
- border-bottom: 2px solid var(--mainBackgroundColor);
+ border-right: 2px solid pvar(--mainBackgroundColor);
+ border-bottom: 2px solid pvar(--mainBackgroundColor);
}
&.pi-check:after {
height: 26px;
.ui-inputswitch-checked .ui-inputswitch-slider {
- background-color: var(--mainColor) !important;
+ background-color: pvar(--mainColor) !important;
}
&.small {
.ui-toast-message {
font-family: $main-fonts;
- background-color: var(--mainBackgroundColor) !important;
+ background-color: pvar(--mainBackgroundColor) !important;
+ color: pvar(--mainForegroundColor) !important;
border-radius: 5px;
box-sizing: border-box;
border: 1px solid #EBEEF5 !important;