Fixed #1023 - Add responsive and breakpoint props to OrderList and PickList

public/themes/arya-blue/theme.css

@@ -12,16 +12,18 @@
   --primary-color-text:#212529;
   --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-0: #000000;
-  --surface-50: #030303;
+  --surface-50: #080808;
-  --surface-100: #060606;
+  --surface-100: #0c0c0c;
-  --surface-200: #0c0c0c;
+  --surface-200: #111;
-  --surface-300: #121212;
+  --surface-300: #1a1a1a;
-  --surface-400: #181818;
+  --surface-400: #1e1e1e;
-  --surface-500: #1e1e1e;
+  --surface-500: #151515;
-  --surface-600: #4b4b4b;
+  --surface-600: #404040;
-  --surface-700: #787878;
+  --surface-700: #626262;
-  --surface-800: #a5a5a5;
+  --surface-800: #838383;
-  --surface-900: #d2d2d2;
+  --surface-900: #a5a5a5;
+  --content-padding:1rem;
+  --inline-spacing:0.5rem;
 }
 
 * {
@@ -2543,22 +2545,6 @@
   background: rgba(100, 181, 246, 0.16);
 }
 
-@media screen and (max-width: 960px) {
-  .p-orderlist {
-    flex-direction: column;
-  }
-  .p-orderlist .p-orderlist-controls {
-    padding: 1rem;
-    flex-direction: row;
-  }
-  .p-orderlist .p-orderlist-controls .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-orderlist .p-orderlist-controls .p-button:last-child {
-    margin-right: 0;
-  }
-}
 .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background: rgba(255, 255, 255, 0.03);
   color: rgba(255, 255, 255, 0.87);
@@ -2718,34 +2704,6 @@
   background: rgba(100, 181, 246, 0.16);
 }
 
-@media screen and (max-width: 960px) {
-  .p-picklist {
-    flex-direction: column;
-  }
-  .p-picklist .p-picklist-buttons {
-    padding: 1rem;
-    flex-direction: row;
-  }
-  .p-picklist .p-picklist-buttons .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-picklist .p-picklist-buttons .p-button:last-child {
-    margin-right: 0;
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before {
-    content: "";
-  }
-}
 .p-timeline .p-timeline-event-marker {
   border: 2px solid #64B5F6;
   border-radius: 50%;

public/themes/arya-green/theme.css

@@ -12,16 +12,18 @@
   --primary-color-text:#212529;
   --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-0: #000000;
-  --surface-50: #030303;
+  --surface-50: #080808;
-  --surface-100: #060606;
+  --surface-100: #0c0c0c;
-  --surface-200: #0c0c0c;
+  --surface-200: #111;
-  --surface-300: #121212;
+  --surface-300: #1a1a1a;
-  --surface-400: #181818;
+  --surface-400: #1e1e1e;
-  --surface-500: #1e1e1e;
+  --surface-500: #151515;
-  --surface-600: #4b4b4b;
+  --surface-600: #404040;
-  --surface-700: #787878;
+  --surface-700: #626262;
-  --surface-800: #a5a5a5;
+  --surface-800: #838383;
-  --surface-900: #d2d2d2;
+  --surface-900: #a5a5a5;
+  --content-padding:1rem;
+  --inline-spacing:0.5rem;
 }
 
 * {
@@ -2543,22 +2545,6 @@
   background: rgba(129, 199, 132, 0.16);
 }
 
-@media screen and (max-width: 960px) {
-  .p-orderlist {
-    flex-direction: column;
-  }
-  .p-orderlist .p-orderlist-controls {
-    padding: 1rem;
-    flex-direction: row;
-  }
-  .p-orderlist .p-orderlist-controls .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-orderlist .p-orderlist-controls .p-button:last-child {
-    margin-right: 0;
-  }
-}
 .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background: rgba(255, 255, 255, 0.03);
   color: rgba(255, 255, 255, 0.87);
@@ -2718,34 +2704,6 @@
   background: rgba(129, 199, 132, 0.16);
 }
 
-@media screen and (max-width: 960px) {
-  .p-picklist {
-    flex-direction: column;
-  }
-  .p-picklist .p-picklist-buttons {
-    padding: 1rem;
-    flex-direction: row;
-  }
-  .p-picklist .p-picklist-buttons .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-picklist .p-picklist-buttons .p-button:last-child {
-    margin-right: 0;
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before {
-    content: "";
-  }
-}
 .p-timeline .p-timeline-event-marker {
   border: 2px solid #81C784;
   border-radius: 50%;

public/themes/arya-orange/theme.css

@@ -12,16 +12,18 @@
   --primary-color-text:#212529;
   --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-0: #000000;
-  --surface-50: #030303;
+  --surface-50: #080808;
-  --surface-100: #060606;
+  --surface-100: #0c0c0c;
-  --surface-200: #0c0c0c;
+  --surface-200: #111;
-  --surface-300: #121212;
+  --surface-300: #1a1a1a;
-  --surface-400: #181818;
+  --surface-400: #1e1e1e;
-  --surface-500: #1e1e1e;
+  --surface-500: #151515;
-  --surface-600: #4b4b4b;
+  --surface-600: #404040;
-  --surface-700: #787878;
+  --surface-700: #626262;
-  --surface-800: #a5a5a5;
+  --surface-800: #838383;
-  --surface-900: #d2d2d2;
+  --surface-900: #a5a5a5;
+  --content-padding:1rem;
+  --inline-spacing:0.5rem;
 }
 
 * {
@@ -2543,22 +2545,6 @@
   background: rgba(255, 213, 79, 0.16);
 }
 
-@media screen and (max-width: 960px) {
-  .p-orderlist {
-    flex-direction: column;
-  }
-  .p-orderlist .p-orderlist-controls {
-    padding: 1rem;
-    flex-direction: row;
-  }
-  .p-orderlist .p-orderlist-controls .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-orderlist .p-orderlist-controls .p-button:last-child {
-    margin-right: 0;
-  }
-}
 .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background: rgba(255, 255, 255, 0.03);
   color: rgba(255, 255, 255, 0.87);
@@ -2718,34 +2704,6 @@
   background: rgba(255, 213, 79, 0.16);
 }
 
-@media screen and (max-width: 960px) {
-  .p-picklist {
-    flex-direction: column;
-  }
-  .p-picklist .p-picklist-buttons {
-    padding: 1rem;
-    flex-direction: row;
-  }
-  .p-picklist .p-picklist-buttons .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-picklist .p-picklist-buttons .p-button:last-child {
-    margin-right: 0;
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before {
-    content: "";
-  }
-}
 .p-timeline .p-timeline-event-marker {
   border: 2px solid #FFD54F;
   border-radius: 50%;

public/themes/arya-purple/theme.css

@@ -12,16 +12,18 @@
   --primary-color-text:#ffffff;
   --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-0: #000000;
-  --surface-50: #030303;
+  --surface-50: #080808;
-  --surface-100: #060606;
+  --surface-100: #0c0c0c;
-  --surface-200: #0c0c0c;
+  --surface-200: #111;
-  --surface-300: #121212;
+  --surface-300: #1a1a1a;
-  --surface-400: #181818;
+  --surface-400: #1e1e1e;
-  --surface-500: #1e1e1e;
+  --surface-500: #151515;
-  --surface-600: #4b4b4b;
+  --surface-600: #404040;
-  --surface-700: #787878;
+  --surface-700: #626262;
-  --surface-800: #a5a5a5;
+  --surface-800: #838383;
-  --surface-900: #d2d2d2;
+  --surface-900: #a5a5a5;
+  --content-padding:1rem;
+  --inline-spacing:0.5rem;
 }
 
 * {
@@ -2543,22 +2545,6 @@
   background: rgba(186, 104, 200, 0.16);
 }
 
-@media screen and (max-width: 960px) {
-  .p-orderlist {
-    flex-direction: column;
-  }
-  .p-orderlist .p-orderlist-controls {
-    padding: 1rem;
-    flex-direction: row;
-  }
-  .p-orderlist .p-orderlist-controls .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-orderlist .p-orderlist-controls .p-button:last-child {
-    margin-right: 0;
-  }
-}
 .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background: rgba(255, 255, 255, 0.03);
   color: rgba(255, 255, 255, 0.87);
@@ -2718,34 +2704,6 @@
   background: rgba(186, 104, 200, 0.16);
 }
 
-@media screen and (max-width: 960px) {
-  .p-picklist {
-    flex-direction: column;
-  }
-  .p-picklist .p-picklist-buttons {
-    padding: 1rem;
-    flex-direction: row;
-  }
-  .p-picklist .p-picklist-buttons .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-picklist .p-picklist-buttons .p-button:last-child {
-    margin-right: 0;
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before {
-    content: "";
-  }
-}
 .p-timeline .p-timeline-event-marker {
   border: 2px solid #BA68C8;
   border-radius: 50%;

public/themes/bootstrap4-dark-blue/theme.css

@@ -12,16 +12,18 @@
   --primary-color-text:#151515;
   --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-0: #000000;
-  --surface-50: #212529;
+  --surface-50: #111418;
-  --surface-100: #343a40;
+  --surface-100: #171c22;
-  --surface-200: #495057;
+  --surface-200: #1d232b;
-  --surface-300: #6c757d;
+  --surface-300: #242b34;
-  --surface-400: #adb5bd;
+  --surface-400: #2a323d;
-  --surface-500: #ced4da;
+  --surface-500: #4a515a;
-  --surface-600: #dee2e6;
+  --surface-600: #6a7077;
-  --surface-700: #e9ecef;
+  --surface-700: #8a8e94;
-  --surface-800: #f8f9fa;
+  --surface-800: #aaadb1;
-  --surface-900: #f9fafb;
+  --surface-900: #cacccf;
+  --content-padding:1.25rem;
+  --inline-spacing:0.5rem;
 }
 
 * {
@@ -2555,22 +2557,6 @@
   background: #8dd0ff;
 }
 
-@media screen and (max-width: 769px) {
-  .p-orderlist {
-    flex-direction: column;
-  }
-  .p-orderlist .p-orderlist-controls {
-    padding: 1.25rem;
-    flex-direction: row;
-  }
-  .p-orderlist .p-orderlist-controls .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-orderlist .p-orderlist-controls .p-button:last-child {
-    margin-right: 0;
-  }
-}
 .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background: rgba(255, 255, 255, 0.04);
   color: rgba(255, 255, 255, 0.87);
@@ -2730,34 +2716,6 @@
   background: #8dd0ff;
 }
 
-@media screen and (max-width: 769px) {
-  .p-picklist {
-    flex-direction: column;
-  }
-  .p-picklist .p-picklist-buttons {
-    padding: 1.25rem;
-    flex-direction: row;
-  }
-  .p-picklist .p-picklist-buttons .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-picklist .p-picklist-buttons .p-button:last-child {
-    margin-right: 0;
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before {
-    content: "";
-  }
-}
 .p-timeline .p-timeline-event-marker {
   border: 0 none;
   border-radius: 50%;

public/themes/bootstrap4-dark-purple/theme.css

@@ -12,16 +12,18 @@
   --primary-color-text:#151515;
   --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-0: #000000;
-  --surface-50: #212529;
+  --surface-50: #111418;
-  --surface-100: #343a40;
+  --surface-100: #171c22;
-  --surface-200: #495057;
+  --surface-200: #1d232b;
-  --surface-300: #6c757d;
+  --surface-300: #242b34;
-  --surface-400: #adb5bd;
+  --surface-400: #2a323d;
-  --surface-500: #ced4da;
+  --surface-500: #4a515a;
-  --surface-600: #dee2e6;
+  --surface-600: #6a7077;
-  --surface-700: #e9ecef;
+  --surface-700: #8a8e94;
-  --surface-800: #f8f9fa;
+  --surface-800: #aaadb1;
-  --surface-900: #f9fafb;
+  --surface-900: #cacccf;
+  --content-padding:1.25rem;
+  --inline-spacing:0.5rem;
 }
 
 * {
@@ -2555,22 +2557,6 @@
   background: #c298d8;
 }
 
-@media screen and (max-width: 769px) {
-  .p-orderlist {
-    flex-direction: column;
-  }
-  .p-orderlist .p-orderlist-controls {
-    padding: 1.25rem;
-    flex-direction: row;
-  }
-  .p-orderlist .p-orderlist-controls .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-orderlist .p-orderlist-controls .p-button:last-child {
-    margin-right: 0;
-  }
-}
 .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background: rgba(255, 255, 255, 0.04);
   color: rgba(255, 255, 255, 0.87);
@@ -2730,34 +2716,6 @@
   background: #c298d8;
 }
 
-@media screen and (max-width: 769px) {
-  .p-picklist {
-    flex-direction: column;
-  }
-  .p-picklist .p-picklist-buttons {
-    padding: 1.25rem;
-    flex-direction: row;
-  }
-  .p-picklist .p-picklist-buttons .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-picklist .p-picklist-buttons .p-button:last-child {
-    margin-right: 0;
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before {
-    content: "";
-  }
-}
 .p-timeline .p-timeline-event-marker {
   border: 0 none;
   border-radius: 50%;

public/themes/bootstrap4-light-blue/theme.css

@@ -22,6 +22,8 @@
   --surface-700: #495057;
   --surface-800: #343a40;
   --surface-900: #212529;
+  --content-padding:1.25rem;
+  --inline-spacing:0.5rem;
 }
 
 * {
@@ -2555,22 +2557,6 @@
   background: #007bff;
 }
 
-@media screen and (max-width: 769px) {
-  .p-orderlist {
-    flex-direction: column;
-  }
-  .p-orderlist .p-orderlist-controls {
-    padding: 1.25rem;
-    flex-direction: row;
-  }
-  .p-orderlist .p-orderlist-controls .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-orderlist .p-orderlist-controls .p-button:last-child {
-    margin-right: 0;
-  }
-}
 .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background: #e9ecef;
   color: #212529;
@@ -2730,34 +2716,6 @@
   background: #007bff;
 }
 
-@media screen and (max-width: 769px) {
-  .p-picklist {
-    flex-direction: column;
-  }
-  .p-picklist .p-picklist-buttons {
-    padding: 1.25rem;
-    flex-direction: row;
-  }
-  .p-picklist .p-picklist-buttons .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-picklist .p-picklist-buttons .p-button:last-child {
-    margin-right: 0;
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before {
-    content: "";
-  }
-}
 .p-timeline .p-timeline-event-marker {
   border: 0 none;
   border-radius: 50%;

public/themes/bootstrap4-light-purple/theme.css

@@ -22,6 +22,8 @@
   --surface-700: #495057;
   --surface-800: #343a40;
   --surface-900: #212529;
+  --content-padding:1.25rem;
+  --inline-spacing:0.5rem;
 }
 
 * {
@@ -2555,22 +2557,6 @@
   background: #883cae;
 }
 
-@media screen and (max-width: 769px) {
-  .p-orderlist {
-    flex-direction: column;
-  }
-  .p-orderlist .p-orderlist-controls {
-    padding: 1.25rem;
-    flex-direction: row;
-  }
-  .p-orderlist .p-orderlist-controls .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-orderlist .p-orderlist-controls .p-button:last-child {
-    margin-right: 0;
-  }
-}
 .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background: #e9ecef;
   color: #212529;
@@ -2730,34 +2716,6 @@
   background: #883cae;
 }
 
-@media screen and (max-width: 769px) {
-  .p-picklist {
-    flex-direction: column;
-  }
-  .p-picklist .p-picklist-buttons {
-    padding: 1.25rem;
-    flex-direction: row;
-  }
-  .p-picklist .p-picklist-buttons .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-picklist .p-picklist-buttons .p-button:last-child {
-    margin-right: 0;
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before {
-    content: "";
-  }
-}
 .p-timeline .p-timeline-event-marker {
   border: 0 none;
   border-radius: 50%;

public/themes/fluent-light/theme.css

@@ -22,6 +22,8 @@
   --surface-700: #252423;
   --surface-800: #1b1a19;
   --surface-900: #11100f;
+  --content-padding:1rem;
+  --inline-spacing:0.5rem;
 }
 
 * {
@@ -2543,22 +2545,6 @@
   background: #edebe9;
 }
 
-@media screen and (max-width: 769px) {
-  .p-orderlist {
-    flex-direction: column;
-  }
-  .p-orderlist .p-orderlist-controls {
-    padding: 1rem;
-    flex-direction: row;
-  }
-  .p-orderlist .p-orderlist-controls .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-orderlist .p-orderlist-controls .p-button:last-child {
-    margin-right: 0;
-  }
-}
 .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background: #f3f2f1;
   color: #323130;
@@ -2718,34 +2704,6 @@
   background: #edebe9;
 }
 
-@media screen and (max-width: 769px) {
-  .p-picklist {
-    flex-direction: column;
-  }
-  .p-picklist .p-picklist-buttons {
-    padding: 1rem;
-    flex-direction: row;
-  }
-  .p-picklist .p-picklist-buttons .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-picklist .p-picklist-buttons .p-button:last-child {
-    margin-right: 0;
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before {
-    content: "";
-  }
-}
 .p-timeline .p-timeline-event-marker {
   border: 0 none;
   border-radius: 50%;

public/themes/luna-amber/theme.css

@@ -12,16 +12,18 @@
   --primary-color-text: #212529;
   --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-0: #000000;
-  --surface-50: #050505;
+  --surface-50: #141414;
-  --surface-100: #0a0a0a;
+  --surface-100: #1c1c1c;
-  --surface-200: #141414;
+  --surface-200: #232323;
-  --surface-300: #1e1e1e;
+  --surface-300: #2b2b2b;
-  --surface-400: #282828;
+  --surface-400: #323232;
-  --surface-500: #323232;
+  --surface-500: #515151;
-  --surface-600: #5b5b5b;
+  --surface-600: #707070;
-  --surface-700: #848484;
+  --surface-700: #8e8e8e;
   --surface-800: #adadad;
-  --surface-900: #d6d6d6;
+  --surface-900: #ccc;
+  --content-padding:0.571rem 1rem;
+  --inline-spacing:0.5rem;
 }
 
 * {
@@ -2555,22 +2557,6 @@
   background: #FFE082;
 }
 
-@media screen and (max-width: 960px) {
-  .p-orderlist {
-    flex-direction: column;
-  }
-  .p-orderlist .p-orderlist-controls {
-    padding: 0.571rem 1rem;
-    flex-direction: row;
-  }
-  .p-orderlist .p-orderlist-controls .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-orderlist .p-orderlist-controls .p-button:last-child {
-    margin-right: 0;
-  }
-}
 .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background: #4c4c4c;
   color: #dedede;
@@ -2730,34 +2716,6 @@
   background: #FFE082;
 }
 
-@media screen and (max-width: 960px) {
-  .p-picklist {
-    flex-direction: column;
-  }
-  .p-picklist .p-picklist-buttons {
-    padding: 0.571rem 1rem;
-    flex-direction: row;
-  }
-  .p-picklist .p-picklist-buttons .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-picklist .p-picklist-buttons .p-button:last-child {
-    margin-right: 0;
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before {
-    content: "";
-  }
-}
 .p-timeline .p-timeline-event-marker {
   border: 0 none;
   border-radius: 50%;

public/themes/luna-blue/theme.css

@@ -12,16 +12,18 @@
   --primary-color-text: #212529;
   --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-0: #000000;
-  --surface-50: #050505;
+  --surface-50: #141414;
-  --surface-100: #0a0a0a;
+  --surface-100: #1c1c1c;
-  --surface-200: #141414;
+  --surface-200: #232323;
-  --surface-300: #1e1e1e;
+  --surface-300: #2b2b2b;
-  --surface-400: #282828;
+  --surface-400: #323232;
-  --surface-500: #323232;
+  --surface-500: #515151;
-  --surface-600: #5b5b5b;
+  --surface-600: #707070;
-  --surface-700: #848484;
+  --surface-700: #8e8e8e;
   --surface-800: #adadad;
-  --surface-900: #d6d6d6;
+  --surface-900: #ccc;
+  --content-padding:0.571rem 1rem;
+  --inline-spacing:0.5rem;
 }
 
 * {
@@ -2555,22 +2557,6 @@
   background: #81D4FA;
 }
 
-@media screen and (max-width: 960px) {
-  .p-orderlist {
-    flex-direction: column;
-  }
-  .p-orderlist .p-orderlist-controls {
-    padding: 0.571rem 1rem;
-    flex-direction: row;
-  }
-  .p-orderlist .p-orderlist-controls .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-orderlist .p-orderlist-controls .p-button:last-child {
-    margin-right: 0;
-  }
-}
 .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background: #4c4c4c;
   color: #dedede;
@@ -2730,34 +2716,6 @@
   background: #81D4FA;
 }
 
-@media screen and (max-width: 960px) {
-  .p-picklist {
-    flex-direction: column;
-  }
-  .p-picklist .p-picklist-buttons {
-    padding: 0.571rem 1rem;
-    flex-direction: row;
-  }
-  .p-picklist .p-picklist-buttons .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-picklist .p-picklist-buttons .p-button:last-child {
-    margin-right: 0;
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before {
-    content: "";
-  }
-}
 .p-timeline .p-timeline-event-marker {
   border: 0 none;
   border-radius: 50%;

public/themes/luna-green/theme.css

@@ -12,16 +12,18 @@
   --primary-color-text: #212529;
   --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-0: #000000;
-  --surface-50: #050505;
+  --surface-50: #141414;
-  --surface-100: #0a0a0a;
+  --surface-100: #1c1c1c;
-  --surface-200: #141414;
+  --surface-200: #232323;
-  --surface-300: #1e1e1e;
+  --surface-300: #2b2b2b;
-  --surface-400: #282828;
+  --surface-400: #323232;
-  --surface-500: #323232;
+  --surface-500: #515151;
-  --surface-600: #5b5b5b;
+  --surface-600: #707070;
-  --surface-700: #848484;
+  --surface-700: #8e8e8e;
   --surface-800: #adadad;
-  --surface-900: #d6d6d6;
+  --surface-900: #ccc;
+  --content-padding:0.571rem 1rem;
+  --inline-spacing:0.5rem;
 }
 
 * {
@@ -2555,22 +2557,6 @@
   background: #C5E1A5;
 }
 
-@media screen and (max-width: 960px) {
-  .p-orderlist {
-    flex-direction: column;
-  }
-  .p-orderlist .p-orderlist-controls {
-    padding: 0.571rem 1rem;
-    flex-direction: row;
-  }
-  .p-orderlist .p-orderlist-controls .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-orderlist .p-orderlist-controls .p-button:last-child {
-    margin-right: 0;
-  }
-}
 .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background: #4c4c4c;
   color: #dedede;
@@ -2730,34 +2716,6 @@
   background: #C5E1A5;
 }
 
-@media screen and (max-width: 960px) {
-  .p-picklist {
-    flex-direction: column;
-  }
-  .p-picklist .p-picklist-buttons {
-    padding: 0.571rem 1rem;
-    flex-direction: row;
-  }
-  .p-picklist .p-picklist-buttons .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-picklist .p-picklist-buttons .p-button:last-child {
-    margin-right: 0;
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before {
-    content: "";
-  }
-}
 .p-timeline .p-timeline-event-marker {
   border: 0 none;
   border-radius: 50%;

public/themes/luna-pink/theme.css

@@ -12,16 +12,18 @@
   --primary-color-text: #212529;
   --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-0: #000000;
-  --surface-50: #050505;
+  --surface-50: #141414;
-  --surface-100: #0a0a0a;
+  --surface-100: #1c1c1c;
-  --surface-200: #141414;
+  --surface-200: #232323;
-  --surface-300: #1e1e1e;
+  --surface-300: #2b2b2b;
-  --surface-400: #282828;
+  --surface-400: #323232;
-  --surface-500: #323232;
+  --surface-500: #515151;
-  --surface-600: #5b5b5b;
+  --surface-600: #707070;
-  --surface-700: #848484;
+  --surface-700: #8e8e8e;
   --surface-800: #adadad;
-  --surface-900: #d6d6d6;
+  --surface-900: #ccc;
+  --content-padding:0.571rem 1rem;
+  --inline-spacing:0.5rem;
 }
 
 * {
@@ -2555,22 +2557,6 @@
   background: #F48FB1;
 }
 
-@media screen and (max-width: 960px) {
-  .p-orderlist {
-    flex-direction: column;
-  }
-  .p-orderlist .p-orderlist-controls {
-    padding: 0.571rem 1rem;
-    flex-direction: row;
-  }
-  .p-orderlist .p-orderlist-controls .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-orderlist .p-orderlist-controls .p-button:last-child {
-    margin-right: 0;
-  }
-}
 .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background: #4c4c4c;
   color: #dedede;
@@ -2730,34 +2716,6 @@
   background: #F48FB1;
 }
 
-@media screen and (max-width: 960px) {
-  .p-picklist {
-    flex-direction: column;
-  }
-  .p-picklist .p-picklist-buttons {
-    padding: 0.571rem 1rem;
-    flex-direction: row;
-  }
-  .p-picklist .p-picklist-buttons .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-picklist .p-picklist-buttons .p-button:last-child {
-    margin-right: 0;
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before {
-    content: "";
-  }
-}
 .p-timeline .p-timeline-event-marker {
   border: 0 none;
   border-radius: 50%;

public/themes/md-dark-deeppurple/theme.css

@@ -12,16 +12,18 @@
   --primary-color-text:#121212;
   --font-family:Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
   --surface-0: #000000;
-  --surface-50: #212121;
+  --surface-50: #0c0c0c;
-  --surface-100: #424242;
+  --surface-100: #111;
-  --surface-200: #616161;
+  --surface-200: #151515;
-  --surface-300: #757575;
+  --surface-300: #1a1a1a;
-  --surface-400: #9E9E9E;
+  --surface-400: #1E1E1E;
-  --surface-500: #BDBDBD;
+  --surface-500: #404040;
-  --surface-600: #E0E0E0;
+  --surface-600: #626262;
-  --surface-700: #EEEEEE;
+  --surface-700: #838383;
-  --surface-800: #F5F5F5;
+  --surface-800: #a5a5a5;
-  --surface-900: #FAFAFA;
+  --surface-900: #c7c7c7;
+  --content-padding:1rem;
+  --inline-spacing:0.5rem;
 }
 
 /* roboto-regular - latin-ext_latin */
@@ -2567,22 +2569,6 @@
   background: rgba(206, 147, 216, 0.16);
 }
 
-@media screen and (max-width: 769px) {
-  .p-orderlist {
-    flex-direction: column;
-  }
-  .p-orderlist .p-orderlist-controls {
-    padding: 1rem;
-    flex-direction: row;
-  }
-  .p-orderlist .p-orderlist-controls .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-orderlist .p-orderlist-controls .p-button:last-child {
-    margin-right: 0;
-  }
-}
 .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background: rgba(255, 255, 255, 0.04);
   color: rgba(255, 255, 255, 0.87);
@@ -2742,34 +2728,6 @@
   background: rgba(206, 147, 216, 0.16);
 }
 
-@media screen and (max-width: 769px) {
-  .p-picklist {
-    flex-direction: column;
-  }
-  .p-picklist .p-picklist-buttons {
-    padding: 1rem;
-    flex-direction: row;
-  }
-  .p-picklist .p-picklist-buttons .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-picklist .p-picklist-buttons .p-button:last-child {
-    margin-right: 0;
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before {
-    content: "";
-  }
-}
 .p-timeline .p-timeline-event-marker {
   border: 0 none;
   border-radius: 50%;

public/themes/md-dark-indigo/theme.css

@@ -12,16 +12,18 @@
   --primary-color-text:#121212;
   --font-family:Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
   --surface-0: #000000;
-  --surface-50: #212121;
+  --surface-50: #0c0c0c;
-  --surface-100: #424242;
+  --surface-100: #111;
-  --surface-200: #616161;
+  --surface-200: #151515;
-  --surface-300: #757575;
+  --surface-300: #1a1a1a;
-  --surface-400: #9E9E9E;
+  --surface-400: #1E1E1E;
-  --surface-500: #BDBDBD;
+  --surface-500: #404040;
-  --surface-600: #E0E0E0;
+  --surface-600: #626262;
-  --surface-700: #EEEEEE;
+  --surface-700: #838383;
-  --surface-800: #F5F5F5;
+  --surface-800: #a5a5a5;
-  --surface-900: #FAFAFA;
+  --surface-900: #c7c7c7;
+  --content-padding:1rem;
+  --inline-spacing:0.5rem;
 }
 
 /* roboto-regular - latin-ext_latin */
@@ -2567,22 +2569,6 @@
   background: rgba(159, 168, 218, 0.16);
 }
 
-@media screen and (max-width: 769px) {
-  .p-orderlist {
-    flex-direction: column;
-  }
-  .p-orderlist .p-orderlist-controls {
-    padding: 1rem;
-    flex-direction: row;
-  }
-  .p-orderlist .p-orderlist-controls .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-orderlist .p-orderlist-controls .p-button:last-child {
-    margin-right: 0;
-  }
-}
 .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background: rgba(255, 255, 255, 0.04);
   color: rgba(255, 255, 255, 0.87);
@@ -2742,34 +2728,6 @@
   background: rgba(159, 168, 218, 0.16);
 }
 
-@media screen and (max-width: 769px) {
-  .p-picklist {
-    flex-direction: column;
-  }
-  .p-picklist .p-picklist-buttons {
-    padding: 1rem;
-    flex-direction: row;
-  }
-  .p-picklist .p-picklist-buttons .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-picklist .p-picklist-buttons .p-button:last-child {
-    margin-right: 0;
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before {
-    content: "";
-  }
-}
 .p-timeline .p-timeline-event-marker {
   border: 0 none;
   border-radius: 50%;

public/themes/md-light-deeppurple/theme.css

@@ -22,6 +22,8 @@
   --surface-700: #616161;
   --surface-800: #424242;
   --surface-900: #212121;
+  --content-padding:1rem;
+  --inline-spacing:0.5rem;
 }
 
 /* roboto-regular - latin-ext_latin */
@@ -2567,22 +2569,6 @@
   background: rgba(103, 58, 183, 0.12);
 }
 
-@media screen and (max-width: 769px) {
-  .p-orderlist {
-    flex-direction: column;
-  }
-  .p-orderlist .p-orderlist-controls {
-    padding: 1rem;
-    flex-direction: row;
-  }
-  .p-orderlist .p-orderlist-controls .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-orderlist .p-orderlist-controls .p-button:last-child {
-    margin-right: 0;
-  }
-}
 .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background: rgba(0, 0, 0, 0.04);
   color: rgba(0, 0, 0, 0.87);
@@ -2742,34 +2728,6 @@
   background: rgba(103, 58, 183, 0.12);
 }
 
-@media screen and (max-width: 769px) {
-  .p-picklist {
-    flex-direction: column;
-  }
-  .p-picklist .p-picklist-buttons {
-    padding: 1rem;
-    flex-direction: row;
-  }
-  .p-picklist .p-picklist-buttons .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-picklist .p-picklist-buttons .p-button:last-child {
-    margin-right: 0;
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before {
-    content: "";
-  }
-}
 .p-timeline .p-timeline-event-marker {
   border: 0 none;
   border-radius: 50%;

public/themes/md-light-indigo/theme.css

@@ -22,6 +22,8 @@
   --surface-700: #616161;
   --surface-800: #424242;
   --surface-900: #212121;
+  --content-padding:1rem;
+  --inline-spacing:0.5rem;
 }
 
 /* roboto-regular - latin-ext_latin */
@@ -2567,22 +2569,6 @@
   background: rgba(63, 81, 181, 0.12);
 }
 
-@media screen and (max-width: 769px) {
-  .p-orderlist {
-    flex-direction: column;
-  }
-  .p-orderlist .p-orderlist-controls {
-    padding: 1rem;
-    flex-direction: row;
-  }
-  .p-orderlist .p-orderlist-controls .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-orderlist .p-orderlist-controls .p-button:last-child {
-    margin-right: 0;
-  }
-}
 .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background: rgba(0, 0, 0, 0.04);
   color: rgba(0, 0, 0, 0.87);
@@ -2742,34 +2728,6 @@
   background: rgba(63, 81, 181, 0.12);
 }
 
-@media screen and (max-width: 769px) {
-  .p-picklist {
-    flex-direction: column;
-  }
-  .p-picklist .p-picklist-buttons {
-    padding: 1rem;
-    flex-direction: row;
-  }
-  .p-picklist .p-picklist-buttons .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-picklist .p-picklist-buttons .p-button:last-child {
-    margin-right: 0;
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before {
-    content: "";
-  }
-}
 .p-timeline .p-timeline-event-marker {
   border: 0 none;
   border-radius: 50%;

public/themes/mdc-dark-deeppurple/theme.css

@@ -12,16 +12,18 @@
   --primary-color-text:#ffffff;
   --font-family:Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
   --surface-0: #000000;
-  --surface-50: #212121;
+  --surface-50: #0c0c0c;
-  --surface-100: #424242;
+  --surface-100: #111;
-  --surface-200: #616161;
+  --surface-200: #151515;
-  --surface-300: #757575;
+  --surface-300: #1a1a1a;
-  --surface-400: #9E9E9E;
+  --surface-400: #1E1E1E;
-  --surface-500: #BDBDBD;
+  --surface-500: #404040;
-  --surface-600: #E0E0E0;
+  --surface-600: #626262;
-  --surface-700: #EEEEEE;
+  --surface-700: #838383;
-  --surface-800: #F5F5F5;
+  --surface-800: #a5a5a5;
-  --surface-900: #FAFAFA;
+  --surface-900: #c7c7c7;
+  --content-padding:1rem;
+  --inline-spacing:0.5rem;
 }
 
 /* roboto-regular - latin-ext_latin */
@@ -2567,22 +2569,6 @@
   background: rgba(103, 58, 183, 0.16);
 }
 
-@media screen and (max-width: 769px) {
-  .p-orderlist {
-    flex-direction: column;
-  }
-  .p-orderlist .p-orderlist-controls {
-    padding: 0.75rem;
-    flex-direction: row;
-  }
-  .p-orderlist .p-orderlist-controls .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-orderlist .p-orderlist-controls .p-button:last-child {
-    margin-right: 0;
-  }
-}
 .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background: rgba(255, 255, 255, 0.04);
   color: rgba(255, 255, 255, 0.87);
@@ -2742,34 +2728,6 @@
   background: rgba(103, 58, 183, 0.16);
 }
 
-@media screen and (max-width: 769px) {
-  .p-picklist {
-    flex-direction: column;
-  }
-  .p-picklist .p-picklist-buttons {
-    padding: 0.75rem;
-    flex-direction: row;
-  }
-  .p-picklist .p-picklist-buttons .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-picklist .p-picklist-buttons .p-button:last-child {
-    margin-right: 0;
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before {
-    content: "";
-  }
-}
 .p-timeline .p-timeline-event-marker {
   border: 0 none;
   border-radius: 50%;

public/themes/mdc-dark-indigo/theme.css

@@ -12,16 +12,18 @@
   --primary-color-text:#ffffff;
   --font-family:Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
   --surface-0: #000000;
-  --surface-50: #212121;
+  --surface-50: #0c0c0c;
-  --surface-100: #424242;
+  --surface-100: #111;
-  --surface-200: #616161;
+  --surface-200: #151515;
-  --surface-300: #757575;
+  --surface-300: #1a1a1a;
-  --surface-400: #9E9E9E;
+  --surface-400: #1E1E1E;
-  --surface-500: #BDBDBD;
+  --surface-500: #404040;
-  --surface-600: #E0E0E0;
+  --surface-600: #626262;
-  --surface-700: #EEEEEE;
+  --surface-700: #838383;
-  --surface-800: #F5F5F5;
+  --surface-800: #a5a5a5;
-  --surface-900: #FAFAFA;
+  --surface-900: #c7c7c7;
+  --content-padding:1rem;
+  --inline-spacing:0.5rem;
 }
 
 /* roboto-regular - latin-ext_latin */
@@ -2567,22 +2569,6 @@
   background: rgba(63, 81, 181, 0.16);
 }
 
-@media screen and (max-width: 769px) {
-  .p-orderlist {
-    flex-direction: column;
-  }
-  .p-orderlist .p-orderlist-controls {
-    padding: 0.75rem;
-    flex-direction: row;
-  }
-  .p-orderlist .p-orderlist-controls .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-orderlist .p-orderlist-controls .p-button:last-child {
-    margin-right: 0;
-  }
-}
 .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background: rgba(255, 255, 255, 0.04);
   color: rgba(255, 255, 255, 0.87);
@@ -2742,34 +2728,6 @@
   background: rgba(63, 81, 181, 0.16);
 }
 
-@media screen and (max-width: 769px) {
-  .p-picklist {
-    flex-direction: column;
-  }
-  .p-picklist .p-picklist-buttons {
-    padding: 0.75rem;
-    flex-direction: row;
-  }
-  .p-picklist .p-picklist-buttons .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-picklist .p-picklist-buttons .p-button:last-child {
-    margin-right: 0;
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before {
-    content: "";
-  }
-}
 .p-timeline .p-timeline-event-marker {
   border: 0 none;
   border-radius: 50%;

public/themes/mdc-light-deeppurple/theme.css

@@ -22,6 +22,8 @@
   --surface-700: #616161;
   --surface-800: #424242;
   --surface-900: #212121;
+  --content-padding:1rem;
+  --inline-spacing:0.5rem;
 }
 
 /* roboto-regular - latin-ext_latin */
@@ -2567,22 +2569,6 @@
   background: rgba(103, 58, 183, 0.12);
 }
 
-@media screen and (max-width: 769px) {
-  .p-orderlist {
-    flex-direction: column;
-  }
-  .p-orderlist .p-orderlist-controls {
-    padding: 0.75rem;
-    flex-direction: row;
-  }
-  .p-orderlist .p-orderlist-controls .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-orderlist .p-orderlist-controls .p-button:last-child {
-    margin-right: 0;
-  }
-}
 .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background: rgba(0, 0, 0, 0.04);
   color: rgba(0, 0, 0, 0.87);
@@ -2742,34 +2728,6 @@
   background: rgba(103, 58, 183, 0.12);
 }
 
-@media screen and (max-width: 769px) {
-  .p-picklist {
-    flex-direction: column;
-  }
-  .p-picklist .p-picklist-buttons {
-    padding: 0.75rem;
-    flex-direction: row;
-  }
-  .p-picklist .p-picklist-buttons .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-picklist .p-picklist-buttons .p-button:last-child {
-    margin-right: 0;
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before {
-    content: "";
-  }
-}
 .p-timeline .p-timeline-event-marker {
   border: 0 none;
   border-radius: 50%;

public/themes/mdc-light-indigo/theme.css

@@ -22,6 +22,8 @@
   --surface-700: #616161;
   --surface-800: #424242;
   --surface-900: #212121;
+  --content-padding:1rem;
+  --inline-spacing:0.5rem;
 }
 
 /* roboto-regular - latin-ext_latin */
@@ -2567,22 +2569,6 @@
   background: rgba(63, 81, 181, 0.12);
 }
 
-@media screen and (max-width: 769px) {
-  .p-orderlist {
-    flex-direction: column;
-  }
-  .p-orderlist .p-orderlist-controls {
-    padding: 0.75rem;
-    flex-direction: row;
-  }
-  .p-orderlist .p-orderlist-controls .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-orderlist .p-orderlist-controls .p-button:last-child {
-    margin-right: 0;
-  }
-}
 .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background: rgba(0, 0, 0, 0.04);
   color: rgba(0, 0, 0, 0.87);
@@ -2742,34 +2728,6 @@
   background: rgba(63, 81, 181, 0.12);
 }
 
-@media screen and (max-width: 769px) {
-  .p-picklist {
-    flex-direction: column;
-  }
-  .p-picklist .p-picklist-buttons {
-    padding: 0.75rem;
-    flex-direction: row;
-  }
-  .p-picklist .p-picklist-buttons .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-picklist .p-picklist-buttons .p-button:last-child {
-    margin-right: 0;
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before {
-    content: "";
-  }
-}
 .p-timeline .p-timeline-event-marker {
   border: 0 none;
   border-radius: 50%;

public/themes/nova-accent/theme.css

@@ -22,6 +22,8 @@
   --surface-700: #324249;
   --surface-800: #222c31;
   --surface-900: #111618;
+  --content-padding:0.571rem 1rem;
+  --inline-spacing:0.5rem;
 }
 
 * {
@@ -2543,22 +2545,6 @@
   background: #e02365;
 }
 
-@media screen and (max-width: 960px) {
-  .p-orderlist {
-    flex-direction: column;
-  }
-  .p-orderlist .p-orderlist-controls {
-    padding: 0.571rem 1rem;
-    flex-direction: row;
-  }
-  .p-orderlist .p-orderlist-controls .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-orderlist .p-orderlist-controls .p-button:last-child {
-    margin-right: 0;
-  }
-}
 .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background: #eaeaea;
   color: #333333;
@@ -2718,34 +2704,6 @@
   background: #e02365;
 }
 
-@media screen and (max-width: 960px) {
-  .p-picklist {
-    flex-direction: column;
-  }
-  .p-picklist .p-picklist-buttons {
-    padding: 0.571rem 1rem;
-    flex-direction: row;
-  }
-  .p-picklist .p-picklist-buttons .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-picklist .p-picklist-buttons .p-button:last-child {
-    margin-right: 0;
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before {
-    content: "";
-  }
-}
 .p-timeline .p-timeline-event-marker {
   border: 0 none;
   border-radius: 50%;

public/themes/nova-alt/theme.css

@@ -22,6 +22,8 @@
   --surface-700: #324249;
   --surface-800: #222c31;
   --surface-900: #111618;
+  --content-padding:0.571rem 1rem;
+  --inline-spacing:0.5rem;
 }
 
 * {
@@ -2555,22 +2557,6 @@
   background: #007ad9;
 }
 
-@media screen and (max-width: 960px) {
-  .p-orderlist {
-    flex-direction: column;
-  }
-  .p-orderlist .p-orderlist-controls {
-    padding: 0.571rem 1rem;
-    flex-direction: row;
-  }
-  .p-orderlist .p-orderlist-controls .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-orderlist .p-orderlist-controls .p-button:last-child {
-    margin-right: 0;
-  }
-}
 .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background: #eaeaea;
   color: #333333;
@@ -2730,34 +2716,6 @@
   background: #007ad9;
 }
 
-@media screen and (max-width: 960px) {
-  .p-picklist {
-    flex-direction: column;
-  }
-  .p-picklist .p-picklist-buttons {
-    padding: 0.571rem 1rem;
-    flex-direction: row;
-  }
-  .p-picklist .p-picklist-buttons .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-picklist .p-picklist-buttons .p-button:last-child {
-    margin-right: 0;
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before {
-    content: "";
-  }
-}
 .p-timeline .p-timeline-event-marker {
   border: 0 none;
   border-radius: 50%;

public/themes/nova-vue/theme.css

@@ -22,6 +22,8 @@
   --surface-700: #324249;
   --surface-800: #222c31;
   --surface-900: #111618;
+  --content-padding:0.571rem 1rem;
+  --inline-spacing:0.5rem;
 }
 
 * {
@@ -2555,22 +2557,6 @@
   background: #41b883;
 }
 
-@media screen and (max-width: 960px) {
-  .p-orderlist {
-    flex-direction: column;
-  }
-  .p-orderlist .p-orderlist-controls {
-    padding: 0.571rem 1rem;
-    flex-direction: row;
-  }
-  .p-orderlist .p-orderlist-controls .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-orderlist .p-orderlist-controls .p-button:last-child {
-    margin-right: 0;
-  }
-}
 .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background: #eaeaea;
   color: #333333;
@@ -2730,34 +2716,6 @@
   background: #41b883;
 }
 
-@media screen and (max-width: 960px) {
-  .p-picklist {
-    flex-direction: column;
-  }
-  .p-picklist .p-picklist-buttons {
-    padding: 0.571rem 1rem;
-    flex-direction: row;
-  }
-  .p-picklist .p-picklist-buttons .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-picklist .p-picklist-buttons .p-button:last-child {
-    margin-right: 0;
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before {
-    content: "";
-  }
-}
 .p-timeline .p-timeline-event-marker {
   border: 0 none;
   border-radius: 50%;

public/themes/nova/theme.css

@@ -22,6 +22,8 @@
   --surface-700: #324249;
   --surface-800: #222c31;
   --surface-900: #111618;
+  --content-padding:0.571rem 1rem;
+  --inline-spacing:0.5rem;
 }
 
 * {
@@ -2555,22 +2557,6 @@
   background: #007ad9;
 }
 
-@media screen and (max-width: 960px) {
-  .p-orderlist {
-    flex-direction: column;
-  }
-  .p-orderlist .p-orderlist-controls {
-    padding: 0.571rem 1rem;
-    flex-direction: row;
-  }
-  .p-orderlist .p-orderlist-controls .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-orderlist .p-orderlist-controls .p-button:last-child {
-    margin-right: 0;
-  }
-}
 .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background: #eaeaea;
   color: #333333;
@@ -2730,34 +2716,6 @@
   background: #007ad9;
 }
 
-@media screen and (max-width: 960px) {
-  .p-picklist {
-    flex-direction: column;
-  }
-  .p-picklist .p-picklist-buttons {
-    padding: 0.571rem 1rem;
-    flex-direction: row;
-  }
-  .p-picklist .p-picklist-buttons .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-picklist .p-picklist-buttons .p-button:last-child {
-    margin-right: 0;
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before {
-    content: "";
-  }
-}
 .p-timeline .p-timeline-event-marker {
   border: 0 none;
   border-radius: 50%;

public/themes/rhea/theme.css

@@ -22,6 +22,8 @@
   --surface-700: #324249;
   --surface-800: #222c31;
   --surface-900: #111618;
+  --content-padding:0.571rem 1rem;
+  --inline-spacing:0.5rem;
 }
 
 * {
@@ -2543,22 +2545,6 @@
   background: #AFD3C8;
 }
 
-@media screen and (max-width: 960px) {
-  .p-orderlist {
-    flex-direction: column;
-  }
-  .p-orderlist .p-orderlist-controls {
-    padding: 0.571rem 1rem;
-    flex-direction: row;
-  }
-  .p-orderlist .p-orderlist-controls .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-orderlist .p-orderlist-controls .p-button:last-child {
-    margin-right: 0;
-  }
-}
 .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background: #f4f4f4;
   color: #666666;
@@ -2718,34 +2704,6 @@
   background: #AFD3C8;
 }
 
-@media screen and (max-width: 960px) {
-  .p-picklist {
-    flex-direction: column;
-  }
-  .p-picklist .p-picklist-buttons {
-    padding: 0.571rem 1rem;
-    flex-direction: row;
-  }
-  .p-picklist .p-picklist-buttons .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-picklist .p-picklist-buttons .p-button:last-child {
-    margin-right: 0;
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before {
-    content: "";
-  }
-}
 .p-timeline .p-timeline-event-marker {
   border: 0 none;
   border-radius: 50%;

public/themes/saga-blue/theme.css

@@ -22,6 +22,8 @@
   --surface-700: #616161;
   --surface-800: #424242;
   --surface-900: #212121;
+  --content-padding:1rem;
+  --inline-spacing:0.5rem;
 }
 
 * {
@@ -2543,22 +2545,6 @@
   background: #E3F2FD;
 }
 
-@media screen and (max-width: 769px) {
-  .p-orderlist {
-    flex-direction: column;
-  }
-  .p-orderlist .p-orderlist-controls {
-    padding: 1rem;
-    flex-direction: row;
-  }
-  .p-orderlist .p-orderlist-controls .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-orderlist .p-orderlist-controls .p-button:last-child {
-    margin-right: 0;
-  }
-}
 .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background: #e9ecef;
   color: #495057;
@@ -2718,34 +2704,6 @@
   background: #E3F2FD;
 }
 
-@media screen and (max-width: 769px) {
-  .p-picklist {
-    flex-direction: column;
-  }
-  .p-picklist .p-picklist-buttons {
-    padding: 1rem;
-    flex-direction: row;
-  }
-  .p-picklist .p-picklist-buttons .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-picklist .p-picklist-buttons .p-button:last-child {
-    margin-right: 0;
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before {
-    content: "";
-  }
-}
 .p-timeline .p-timeline-event-marker {
   border: 2px solid #2196F3;
   border-radius: 50%;

public/themes/saga-green/theme.css

@@ -22,6 +22,8 @@
   --surface-700: #616161;
   --surface-800: #424242;
   --surface-900: #212121;
+  --content-padding:1rem;
+  --inline-spacing:0.5rem;
 }
 
 * {
@@ -2543,22 +2545,6 @@
   background: #E8F5E9;
 }
 
-@media screen and (max-width: 769px) {
-  .p-orderlist {
-    flex-direction: column;
-  }
-  .p-orderlist .p-orderlist-controls {
-    padding: 1rem;
-    flex-direction: row;
-  }
-  .p-orderlist .p-orderlist-controls .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-orderlist .p-orderlist-controls .p-button:last-child {
-    margin-right: 0;
-  }
-}
 .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background: #e9ecef;
   color: #495057;
@@ -2718,34 +2704,6 @@
   background: #E8F5E9;
 }
 
-@media screen and (max-width: 769px) {
-  .p-picklist {
-    flex-direction: column;
-  }
-  .p-picklist .p-picklist-buttons {
-    padding: 1rem;
-    flex-direction: row;
-  }
-  .p-picklist .p-picklist-buttons .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-picklist .p-picklist-buttons .p-button:last-child {
-    margin-right: 0;
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before {
-    content: "";
-  }
-}
 .p-timeline .p-timeline-event-marker {
   border: 2px solid #4CAF50;
   border-radius: 50%;

public/themes/saga-orange/theme.css

@@ -22,6 +22,8 @@
   --surface-700: #616161;
   --surface-800: #424242;
   --surface-900: #212121;
+  --content-padding:1rem;
+  --inline-spacing:0.5rem;
 }
 
 * {
@@ -2543,22 +2545,6 @@
   background: #FFF3E0;
 }
 
-@media screen and (max-width: 769px) {
-  .p-orderlist {
-    flex-direction: column;
-  }
-  .p-orderlist .p-orderlist-controls {
-    padding: 1rem;
-    flex-direction: row;
-  }
-  .p-orderlist .p-orderlist-controls .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-orderlist .p-orderlist-controls .p-button:last-child {
-    margin-right: 0;
-  }
-}
 .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background: #e9ecef;
   color: #495057;
@@ -2718,34 +2704,6 @@
   background: #FFF3E0;
 }
 
-@media screen and (max-width: 769px) {
-  .p-picklist {
-    flex-direction: column;
-  }
-  .p-picklist .p-picklist-buttons {
-    padding: 1rem;
-    flex-direction: row;
-  }
-  .p-picklist .p-picklist-buttons .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-picklist .p-picklist-buttons .p-button:last-child {
-    margin-right: 0;
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before {
-    content: "";
-  }
-}
 .p-timeline .p-timeline-event-marker {
   border: 2px solid #FFC107;
   border-radius: 50%;

public/themes/saga-purple/theme.css

@@ -22,6 +22,8 @@
   --surface-700: #616161;
   --surface-800: #424242;
   --surface-900: #212121;
+  --content-padding:1rem;
+  --inline-spacing:0.5rem;
 }
 
 * {
@@ -2543,22 +2545,6 @@
   background: #F3E5F5;
 }
 
-@media screen and (max-width: 769px) {
-  .p-orderlist {
-    flex-direction: column;
-  }
-  .p-orderlist .p-orderlist-controls {
-    padding: 1rem;
-    flex-direction: row;
-  }
-  .p-orderlist .p-orderlist-controls .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-orderlist .p-orderlist-controls .p-button:last-child {
-    margin-right: 0;
-  }
-}
 .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background: #e9ecef;
   color: #495057;
@@ -2718,34 +2704,6 @@
   background: #F3E5F5;
 }
 
-@media screen and (max-width: 769px) {
-  .p-picklist {
-    flex-direction: column;
-  }
-  .p-picklist .p-picklist-buttons {
-    padding: 1rem;
-    flex-direction: row;
-  }
-  .p-picklist .p-picklist-buttons .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-picklist .p-picklist-buttons .p-button:last-child {
-    margin-right: 0;
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before {
-    content: "";
-  }
-}
 .p-timeline .p-timeline-event-marker {
   border: 2px solid #9C27B0;
   border-radius: 50%;

public/themes/vela-blue/theme.css

@@ -12,16 +12,18 @@
   --primary-color-text:#212529;
   --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-0: #000000;
-  --surface-50: #030406;
+  --surface-50: #0c121a;
-  --surface-100: #06090d;
+  --surface-100: #111923;
-  --surface-200: #0c121a;
+  --surface-200: #161f2d;
-  --surface-300: #131b26;
+  --surface-300: #1a2636;
-  --surface-400: #192433;
+  --surface-400: #1f2d40;
-  --surface-500: #1f2d40;
+  --surface-500: #1a2636;
-  --surface-600: #4c5766;
+  --surface-600: #414d5d;
-  --surface-700: #79818c;
+  --surface-700: #626c79;
-  --surface-800: #a5abb3;
+  --surface-800: #848c96;
-  --surface-900: #d2d5d9;
+  --surface-900: #a5abb3;
+  --content-padding:1rem;
+  --inline-spacing:0.5rem;
 }
 
 * {
@@ -2543,22 +2545,6 @@
   background: rgba(100, 181, 246, 0.16);
 }
 
-@media screen and (max-width: 960px) {
-  .p-orderlist {
-    flex-direction: column;
-  }
-  .p-orderlist .p-orderlist-controls {
-    padding: 1rem;
-    flex-direction: row;
-  }
-  .p-orderlist .p-orderlist-controls .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-orderlist .p-orderlist-controls .p-button:last-child {
-    margin-right: 0;
-  }
-}
 .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background: rgba(255, 255, 255, 0.03);
   color: rgba(255, 255, 255, 0.87);
@@ -2718,34 +2704,6 @@
   background: rgba(100, 181, 246, 0.16);
 }
 
-@media screen and (max-width: 960px) {
-  .p-picklist {
-    flex-direction: column;
-  }
-  .p-picklist .p-picklist-buttons {
-    padding: 1rem;
-    flex-direction: row;
-  }
-  .p-picklist .p-picklist-buttons .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-picklist .p-picklist-buttons .p-button:last-child {
-    margin-right: 0;
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before {
-    content: "";
-  }
-}
 .p-timeline .p-timeline-event-marker {
   border: 2px solid #64B5F6;
   border-radius: 50%;

public/themes/vela-green/theme.css

@@ -12,16 +12,18 @@
   --primary-color-text:#212529;
   --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-0: #000000;
-  --surface-50: #030406;
+  --surface-50: #0c121a;
-  --surface-100: #06090d;
+  --surface-100: #111923;
-  --surface-200: #0c121a;
+  --surface-200: #161f2d;
-  --surface-300: #131b26;
+  --surface-300: #1a2636;
-  --surface-400: #192433;
+  --surface-400: #1f2d40;
-  --surface-500: #1f2d40;
+  --surface-500: #1a2636;
-  --surface-600: #4c5766;
+  --surface-600: #414d5d;
-  --surface-700: #79818c;
+  --surface-700: #626c79;
-  --surface-800: #a5abb3;
+  --surface-800: #848c96;
-  --surface-900: #d2d5d9;
+  --surface-900: #a5abb3;
+  --content-padding:1rem;
+  --inline-spacing:0.5rem;
 }
 
 * {
@@ -2543,22 +2545,6 @@
   background: rgba(129, 199, 132, 0.16);
 }
 
-@media screen and (max-width: 960px) {
-  .p-orderlist {
-    flex-direction: column;
-  }
-  .p-orderlist .p-orderlist-controls {
-    padding: 1rem;
-    flex-direction: row;
-  }
-  .p-orderlist .p-orderlist-controls .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-orderlist .p-orderlist-controls .p-button:last-child {
-    margin-right: 0;
-  }
-}
 .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background: rgba(255, 255, 255, 0.03);
   color: rgba(255, 255, 255, 0.87);
@@ -2718,34 +2704,6 @@
   background: rgba(129, 199, 132, 0.16);
 }
 
-@media screen and (max-width: 960px) {
-  .p-picklist {
-    flex-direction: column;
-  }
-  .p-picklist .p-picklist-buttons {
-    padding: 1rem;
-    flex-direction: row;
-  }
-  .p-picklist .p-picklist-buttons .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-picklist .p-picklist-buttons .p-button:last-child {
-    margin-right: 0;
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before {
-    content: "";
-  }
-}
 .p-timeline .p-timeline-event-marker {
   border: 2px solid #81C784;
   border-radius: 50%;

public/themes/vela-orange/theme.css

@@ -12,16 +12,18 @@
   --primary-color-text:#212529;
   --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-0: #000000;
-  --surface-50: #030406;
+  --surface-50: #0c121a;
-  --surface-100: #06090d;
+  --surface-100: #111923;
-  --surface-200: #0c121a;
+  --surface-200: #161f2d;
-  --surface-300: #131b26;
+  --surface-300: #1a2636;
-  --surface-400: #192433;
+  --surface-400: #1f2d40;
-  --surface-500: #1f2d40;
+  --surface-500: #1a2636;
-  --surface-600: #4c5766;
+  --surface-600: #414d5d;
-  --surface-700: #79818c;
+  --surface-700: #626c79;
-  --surface-800: #a5abb3;
+  --surface-800: #848c96;
-  --surface-900: #d2d5d9;
+  --surface-900: #a5abb3;
+  --content-padding:1rem;
+  --inline-spacing:0.5rem;
 }
 
 * {
@@ -2543,22 +2545,6 @@
   background: rgba(255, 213, 79, 0.16);
 }
 
-@media screen and (max-width: 960px) {
-  .p-orderlist {
-    flex-direction: column;
-  }
-  .p-orderlist .p-orderlist-controls {
-    padding: 1rem;
-    flex-direction: row;
-  }
-  .p-orderlist .p-orderlist-controls .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-orderlist .p-orderlist-controls .p-button:last-child {
-    margin-right: 0;
-  }
-}
 .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background: rgba(255, 255, 255, 0.03);
   color: rgba(255, 255, 255, 0.87);
@@ -2718,34 +2704,6 @@
   background: rgba(255, 213, 79, 0.16);
 }
 
-@media screen and (max-width: 960px) {
-  .p-picklist {
-    flex-direction: column;
-  }
-  .p-picklist .p-picklist-buttons {
-    padding: 1rem;
-    flex-direction: row;
-  }
-  .p-picklist .p-picklist-buttons .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-picklist .p-picklist-buttons .p-button:last-child {
-    margin-right: 0;
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before {
-    content: "";
-  }
-}
 .p-timeline .p-timeline-event-marker {
   border: 2px solid #FFD54F;
   border-radius: 50%;

public/themes/vela-purple/theme.css

@@ -12,16 +12,18 @@
   --primary-color-text:#ffffff;
   --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-0: #000000;
-  --surface-50: #030406;
+  --surface-50: #0c121a;
-  --surface-100: #06090d;
+  --surface-100: #111923;
-  --surface-200: #0c121a;
+  --surface-200: #161f2d;
-  --surface-300: #131b26;
+  --surface-300: #1a2636;
-  --surface-400: #192433;
+  --surface-400: #1f2d40;
-  --surface-500: #1f2d40;
+  --surface-500: #1a2636;
-  --surface-600: #4c5766;
+  --surface-600: #414d5d;
-  --surface-700: #79818c;
+  --surface-700: #626c79;
-  --surface-800: #a5abb3;
+  --surface-800: #848c96;
-  --surface-900: #d2d5d9;
+  --surface-900: #a5abb3;
+  --content-padding:1rem;
+  --inline-spacing:0.5rem;
 }
 
 * {
@@ -2543,22 +2545,6 @@
   background: rgba(186, 104, 200, 0.16);
 }
 
-@media screen and (max-width: 960px) {
-  .p-orderlist {
-    flex-direction: column;
-  }
-  .p-orderlist .p-orderlist-controls {
-    padding: 1rem;
-    flex-direction: row;
-  }
-  .p-orderlist .p-orderlist-controls .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-orderlist .p-orderlist-controls .p-button:last-child {
-    margin-right: 0;
-  }
-}
 .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background: rgba(255, 255, 255, 0.03);
   color: rgba(255, 255, 255, 0.87);
@@ -2718,34 +2704,6 @@
   background: rgba(186, 104, 200, 0.16);
 }
 
-@media screen and (max-width: 960px) {
-  .p-picklist {
-    flex-direction: column;
-  }
-  .p-picklist .p-picklist-buttons {
-    padding: 1rem;
-    flex-direction: row;
-  }
-  .p-picklist .p-picklist-buttons .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-picklist .p-picklist-buttons .p-button:last-child {
-    margin-right: 0;
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before {
-    content: "";
-  }
-}
 .p-timeline .p-timeline-event-marker {
   border: 2px solid #BA68C8;
   border-radius: 50%;

src/components/orderlist/OrderList.d.ts

@@ -6,6 +6,8 @@ interface OrderListProps {
     selection?: any[];
     metaKeySelection?: boolean;
     listStyle?: any;
+    responsive?: boolean;
+    breakpoint?: string;
 }
 
 declare class OrderList {

src/components/orderlist/OrderList.vue

@@ -25,8 +25,7 @@
 
 <script>
 import Button from 'primevue/button';
-import {ObjectUtils} from 'primevue/utils';
+import {ObjectUtils,UniqueComponentId,DomHandler} from 'primevue/utils';
-import {DomHandler} from 'primevue/utils';
 import Ripple from 'primevue/ripple';
 
 export default {
@@ -51,21 +50,38 @@ export default {
         metaKeySelection: {
             type: Boolean,
             default: true
+        },
+        responsive: {
+            type: Boolean,
+            default: true
+        },
+        breakpoint: {
+            type: String,
+            default: '960px'
         }
     },
     itemTouched: false,
     reorderDirection: null,
+    styleElement: null,
     data() {
         return {
             d_selection: this.selection
         }
     },
+    beforeUnmount() {
+        this.destroyStyle();
+    },
     updated() {
         if (this.reorderDirection) {
             this.updateListScroll();
             this.reorderDirection = null;
         }
     },
+    mounted() {
+        if (this.responsive) {
+            this.createStyle();
+        }
+    },
     methods: {
         getItemKey(item, index) {
             return this.dataKey ? ObjectUtils.resolveFieldData(item, this.dataKey): index;
@@ -292,6 +308,49 @@ export default {
                     break;
                 }
             }
+        },
+        createStyle() {
+			if (!this.styleElement) {
+                this.$el.setAttribute(this.attributeSelector, '');
+				this.styleElement = document.createElement('style');
+				this.styleElement.type = 'text/css';
+				document.head.appendChild(this.styleElement);
+
+                let innerHTML = `
+@media screen and (max-width: ${this.breakpoint}) {
+    .p-orderlist[${this.attributeSelector}] {
+        flex-direction: column;
+    }
+
+    .p-orderlist[${this.attributeSelector}] .p-orderlist-controls {
+        padding: var(--content-padding);
+        flex-direction: row;
+    }
+
+    .p-orderlist[${this.attributeSelector}] .p-orderlist-controls .p-button {
+        margin-right: var(--inline-spacing);
+        margin-bottom: 0;
+    }
+
+    .p-orderlist[${this.attributeSelector}] .p-orderlist-controls .p-button:last-child {
+        margin-right: 0;
+    }
+}
+`;
+                
+                this.styleElement.innerHTML = innerHTML;
+			}
+		},
+        destroyStyle() {
+            if (this.styleElement) {
+                document.head.removeChild(this.styleElement);
+                this.styleElement = null;
+            }
+        }
+    },
+    computed: {
+        attributeSelector() {
+            return UniqueComponentId();
         }
     },
     components: {

src/components/picklist/PickList.d.ts

@@ -6,6 +6,8 @@ interface PickListProps {
     dataKey?: string;
     metaKeySelection?: boolean;
     listStyle?: any;
+    responsive?: boolean;
+    breakpoint?: string;
 }
 
 declare class PickList {

src/components/picklist/PickList.vue

@@ -49,8 +49,7 @@
 
 <script>
 import Button from 'primevue/button';
-import {ObjectUtils} from 'primevue/utils';
+import {ObjectUtils,UniqueComponentId,DomHandler} from 'primevue/utils';
-import {DomHandler} from 'primevue/utils';
 import Ripple from 'primevue/ripple';
 
 export default {
@@ -75,10 +74,19 @@ export default {
         metaKeySelection: {
             type: Boolean,
             default: true
+        },
+        responsive: {
+            type: Boolean,
+            default: true
+        },
+        breakpoint: {
+            type: String,
+            default: '960px'
         }
     },
     itemTouched: false,
     reorderDirection: null,
+    styleElement: null,
     data() {
         return {
             d_selection: this.selection
@@ -91,6 +99,14 @@ export default {
             this.reorderDirection = null;
         }
     },
+    beforeUnmount() {
+        this.destroyStyle();
+    },
+    mounted() {
+        if (this.responsive) {
+            this.createStyle();
+        }
+    },
     watch: {
         selection(newValue) {
             this.d_selection = newValue;
@@ -461,6 +477,60 @@ export default {
                     break;
                 }
             }
+        },
+        createStyle() {
+			if (!this.styleElement) {
+                this.$el.setAttribute(this.attributeSelector, '');
+				this.styleElement = document.createElement('style');
+				this.styleElement.type = 'text/css';
+				document.head.appendChild(this.styleElement);
+
+                let innerHTML = `
+@media screen and (max-width: ${this.breakpoint}) {
+    .p-picklist[${this.attributeSelector}] {
+        flex-direction: column;
+    }
+
+    .p-picklist[${this.attributeSelector}] .p-picklist-buttons {
+        padding: var(--content-padding);
+        flex-direction: row;
+    }
+
+    .p-picklist[${this.attributeSelector}] .p-picklist-buttons .p-button {
+        margin-right: var(--inline-spacing);
+        margin-bottom: 0;
+    }
+
+    .p-picklist[${this.attributeSelector}] .p-picklist-buttons .p-button:last-child {
+        margin-right: 0;
+    }
+
+    .p-picklist[${this.attributeSelector}] .pi-angle-right:before {
+        content: "e930"
+    }
+
+    .p-picklist[${this.attributeSelector}] .pi-angle-double-right:before {
+        content: "e92c"
+    }
+
+    .p-picklist[${this.attributeSelector}] .pi-angle-left:before {
+        content: "e933"
+    }
+
+    .p-picklist[${this.attributeSelector}] .pi-angle-double-left:before {
+        content: "e92f"
+    }
+}
+`;
+                
+                this.styleElement.innerHTML = innerHTML;
+			}
+		},
+        destroyStyle() {
+            if (this.styleElement) {
+                document.head.removeChild(this.styleElement);
+                this.styleElement = null;
+            }
         }
     },
     computed: {
@@ -469,6 +539,9 @@ export default {
         },
         targetList() {
             return this.modelValue && this.modelValue[1] ? this.modelValue[1] : null;
+        },
+        attributeSelector() {
+            return UniqueComponentId();
         }
     },
     components: {

src/views/orderlist/OrderListDoc.vue

@@ -104,6 +104,18 @@ import OrderList from 'primevue/orderlist';
                                 <td>object</td>
                                 <td>null</td>
                                 <td>Inline style of the the list element.</td>
+                            </tr>
+                            <tr>
+                                <td>responsive</td>
+                                <td>boolean</td>
+                                <td>true</td>
+                                <td>Whether the list optimizes layout based on screen size.</td>
+                            </tr>
+                            <tr>
+                                <td>breakpoint</td>
+                                <td>string</td>
+                                <td>960px</td>
+                                <td>The breakpoint to define the maximum width boundary when responsiveness is enabled.</td>
                             </tr>
 						</tbody>
 					</table>

src/views/picklist/PickListDoc.vue

@@ -117,6 +117,18 @@ import PickList from 'primevue/picklist';
                                 <td>object</td>
                                 <td>null</td>
                                 <td>Inline style of the the list element.</td>
+                            </tr>
+                            <tr>
+                                <td>responsive</td>
+                                <td>boolean</td>
+                                <td>true</td>
+                                <td>Whether the list optimizes layout based on screen size.</td>
+                            </tr>
+                            <tr>
+                                <td>breakpoint</td>
+                                <td>string</td>
+                                <td>960px</td>
+                                <td>The breakpoint to define the maximum width boundary when responsiveness is enabled.</td>
                             </tr>
 						</tbody>
 					</table>