-@import '_variables';
-@import '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
-@import '~primeng/resources/primeng.css';
+/* stylelint-disable */
+@use 'primeng/resources/primeng';
+
+// Override primeng style we don't want
+input[type=button] {
+ border-radius: inherit;
+}
+
+p-table .p-datatable-header .caption {
+ margin-bottom: 15px;
+}
// Taken from old nova light theme
box-shadow: 0 0 0 0.2em pvar(--mainColorLightest);
}
body .p-paginator .p-dropdown {
- margin-left: 0.5em;
+ @include margin-left(0.5em);
+
height: 2.286em;
min-width: auto;
}
border-color: pvar(--mainColor);
}
body .p-dropdown .p-dropdown-label {
- padding-right: 2em;
+ @include padding-right(2em);
}
body .p-dropdown .p-dropdown-trigger {
background-color: #ffffff;
color: #848484;
}
body .p-dropdown.p-dropdown-clearable .p-dropdown-label {
- padding-right: 4em;
+ @include padding-right(4em);
}
body .p-dropdown-panel {
padding: 0;
margin: 0;
}
body .p-dropdown-panel .p-dropdown-filter-container .p-dropdown-filter {
+ @include padding-right(2em);
+
width: 100%;
- padding-right: 2em;
}
body .p-dropdown-panel .p-dropdown-filter-container .p-dropdown-filter-icon {
top: 50%;
border-top: 0 none;
}
body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
+ @include padding-right(0.857em);
+ @include padding-left(0.857em);
+
border-right: 1px solid #d8dae2;
- padding-right: 0.857em;
- padding-left: 0.857em;
padding-top: 0;
padding-bottom: 0;
}
body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
- padding-left: 0;
+ @include padding-left(0);
}
body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
- padding-right: 0;
+ @include padding-right(0);
border-right: 0 none;
}
body .p-calendar.p-calendar-w-btn .p-inputtext {
border: 1px solid #a80000;
}
body .p-timepicker .p-separator {
- margin-left: 0;
+ @include margin-left(0);
min-width: 0.75rem;
}
align-items: center;
.left-buttons {
- padding-left: 15px;
- }
-
- .input-group-text {
- background-color: transparent;
+ @include padding-left(15px);
}
}
}
}
td {
- padding-left: 15px !important;
+ @include padding-left(15px !important);
&.expand-cell {
padding: 10px 15px;
height: 46px;
&.p-highlight {
- background-color: pvar(--submenuColor) !important;
+ background-color: pvar(--submenuBackgroundColor) !important;
td, td > a {
color: pvar(--mainForegroundColor) !important;
.p-datatable-tbody {
tr {
&:hover {
- background-color: pvar(--submenuColor) !important;
+ background-color: pvar(--submenuBackgroundColor) !important;
}
td {
th {
border: none !important;
border-bottom: 1px solid !important;
- border-color: pvar(--submenuColor) !important;
+ border-color: pvar(--submenuBackgroundColor) !important;
text-align: left !important;
padding: 5px 0 5px 15px !important;
font-weight: $font-semibold !important;
color: pvar(--mainForegroundColor) !important;
&.p-sortable-column:hover {
- background-color: pvar(--submenuColor) !important;
+ background-color: pvar(--submenuBackgroundColor) !important;
border: 1px solid !important;
- border-color: pvar(--submenuColor) !important;
+ border-color: pvar(--submenuBackgroundColor) !important;
border-width: 0 1px !important;
&:first-child {
}
&.p-highlight {
- background-color: pvar(--submenuColor) !important;
+ background-color: pvar(--submenuBackgroundColor) !important;
.pi {
- @extend .glyphicon;
+ @extend .glyphicon !optional;
color: #000 !important;
font-size: 11px !important;
top: 0 !important;
&.pi-sort-amount-up-alt {
- @extend .glyphicon-triangle-top;
+ @extend .glyphicon-triangle-top !optional;
color: pvar(--mainForegroundColor) !important;
}
&.pi-sort-amount-down {
- @extend .glyphicon-triangle-bottom;
+ @extend .glyphicon-triangle-bottom !optional;
color: pvar(--mainForegroundColor) !important;
}
my-delete-button,
my-button {
display: inline-block !important;
- margin-left: 5px;
+ @include margin-left(5px);
&:first-child {
- margin-left: 0
+ @include margin-left(0)
}
}
}
position: relative;
border: none;
border-top: 1px solid !important;
- border-color: pvar(--submenuColor) !important;
+ border-color: pvar(--submenuBackgroundColor) !important;
height: 40px;
display: flex;
justify-content: center;
}
&.p-paginator-first {
- @extend .glyphicon-step-backward;
+ @extend .glyphicon-step-backward !optional;
}
&.p-paginator-prev {
- @extend .glyphicon-chevron-left;
+ @extend .glyphicon-chevron-left !optional;
- margin-right: 10px;
+ @include margin-right(10px);
}
&.p-paginator-next {
- @extend .glyphicon-chevron-right;
+ @extend .glyphicon-chevron-right !optional;
- margin-left: 10px;
+ @include margin-left(10px);
}
&.p-paginator-last {
- @extend .glyphicon-step-forward;
+ @extend .glyphicon-step-forward !optional;
}
}
}
// overflow data table
-@mixin overflow-datatable ($table-min-width, $horizontal-margins, $mobile-paginator: true) {
- p-table {
- .p-datatable-wrapper {
- overflow-x: auto;
- max-width: calc(100vw - #{$horizontal-margins * 2});
-
- table {
- min-width: $table-min-width;
- }
- }
+p-table {
+ .p-datatable-wrapper {
+ overflow-x: auto;
+ max-width: 100%;
- @if $mobile-paginator {
- p-paginator .p-paginator-bottom {
- display: block;
+ table {
+ min-width: breakpoint(lg);
+ }
+ }
- .p-paginator-current {
- position: relative;
- display: block;
- }
+ @media screen and (max-width: #{breakpoint(lg)}) {
+ // Prevent overflow
+ p-paginator {
+ .p-paginator-current,
+ .p-dropdown {
+ top: 0;
+ margin-top: 30px;
+ }
+ }
+ }
- a, .p-paginator-pages {
- vertical-align: middle;
- }
+ @media screen and (max-width: $mobile-view) {
+ // Prevent overflow
+ p-paginator {
+ .p-paginator-pages > .p-paginator-page:not(.p-highlight) {
+ display: none;
}
}
}
.p-datepicker-header {
.p-datepicker-year {
- margin-left: 5px;
+ @include margin-left(5px);
}
.p-datepicker-next {
- @extend .glyphicon-chevron-right;
+ @extend .glyphicon-chevron-right !optional;
@include glyphicon-light;
color: #000 !important;
- text-align: right;
+ text-align: end;
.pi.pi-chevron-right {
display: none !important;
}
.p-datepicker-prev {
- @extend .glyphicon-chevron-left;
+ @extend .glyphicon-chevron-left !optional;
@include glyphicon-light;
color: #000 !important;
- text-align: left;
+ text-align: start;
.pi.pi-chevron-left {
display: none !important;
.p-timepicker {
.pi.pi-chevron-up {
- @extend .glyphicon-chevron-up;
+ @extend .glyphicon-chevron-up !optional;
@include glyphicon-light;
color: #000 !important;
}
.pi.pi-chevron-down {
- @extend .glyphicon-chevron-down;
+ @extend .glyphicon-chevron-down !optional;
@include glyphicon-light;
color: #000 !important;
.message {
flex-grow: 1;
- margin-right: 20px;
+ @include margin-right(20px);
h3 {
font-size: 21px;
.glyphicon {
font-size: 32px;
- margin-right: 5px;
+ @include margin-right(5px);
}
}
}