@medplum/react 0.9.16 → 0.9.17

package/dist/cjs/styles.css

@@ -106,6 +106,7 @@ select.medplum-select:disabled {
 
 .medplum-button:hover {
   background: var(--medplum-gray-200);
+  text-decoration: none;
 }
 
 .medplum-button:active {
@@ -779,6 +780,245 @@ table.medplum-diff-table td {
   width: 100%;
 }
 
+.modal-dialog {
+  background: var(--medplum-gray-600);
+  border: 0.1px solid var(--medplum-gray-700);
+  color: var(--medplum-foreground);
+  padding: 0;
+  position: absolute;
+  z-index: 21;
+  box-shadow: var(--medplum-shadow) 0 2px 6px;
+  outline: 0;
+}
+
+.modal-dialog a,
+.modal-dialog a:link,
+.modal-dialog a:visited {
+  color: var(--medplum-blue-800);
+  cursor: pointer;
+}
+
+.modal-dialog-bg {
+  background: rgba(0, 0, 0, 0.5);
+  left: 0;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 20;
+}
+
+.modal-dialog-title {
+  background: var(--medplum-gray-800);
+  color: var(--medplum-surface);
+  cursor: pointer;
+  padding: 6px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.modal-dialog-title-close {
+  cursor: pointer;
+  vertical-align: middle;
+}
+
+.modal-dialog-title-close:hover {
+  background-color: var(--medplum-gray-700);
+}
+
+.modal-dialog-title-close > svg {
+  width: 20px;
+  height: 20px;
+}
+
+.modal-dialog-content {
+  text-align: center;
+  background-color: var(--medplum-surface);
+  padding: 8px;
+}
+
+.modal-dialog-buttons {
+  text-align: right;
+  background-color: var(--medplum-gray-100);
+  border-top: 1px solid var(--medplum-gray-400);
+  padding: 8px;
+}
+
+.modal-dialog-buttons button {
+  padding: 1px 6px;
+}
+
+.medplum-filter-editor {
+  text-align: left;
+  width: 900px;
+  max-width: 900px;
+}
+
+.medplum-filter-editor-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.medplum-menu-separator {
+  border-top: 0.1px solid var(--medplum-gray-400);
+  margin: 4px 0;
+  padding: 0;
+}
+
+.medplum-submenu-arrow {
+  color: var(--medplum-foreground);
+  left: auto;
+  padding-right: 6px;
+  position: absolute;
+  right: 0;
+  text-align: right;
+  user-select: none;
+}
+
+.medplum-title-bar {
+  display: flex;
+  width: 100%;
+  height: 50px;
+  padding: 15px;
+  justify-content: space-between;
+  background: var(--medplum-surface);
+  border-bottom: 2px solid var(--medplum-gray-200);
+  color: var(--medplum-gray-800);
+}
+
+.medplum-title-bar > div {
+  display: flex;
+  align-items: center;
+}
+
+.medplum-title-bar h1 {
+  font-size: 14px;
+  font-weight: bold;
+  padding: 0 4px 0 1px;
+  margin: 0 4px 0 1px;
+  color: var(--medplum-gray-800);
+}
+
+.medplum-search-control {
+  max-width: 100%;
+  overflow: auto;
+  text-align: left;
+  margin-bottom: 20px;
+  background: var(--medplum-surface);
+}
+
+.medplum-search-control .medplum-search-summary {
+  line-height: 28px;
+  padding: 2px 6px;
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+/*
+ * Table styles
+ */
+
+.medplum-search-control > table {
+  width: 100%;
+  clear: both;
+  border-top: 0.1px solid var(--medplum-gray-300);
+  border-collapse: collapse;
+}
+
+.medplum-search-control > table tr {
+  border-bottom: 0.1px solid var(--medplum-gray-300);
+}
+
+.medplum-search-control > table td,
+.medplum-search-control > table th {
+  padding: 7px 10px;
+  cursor: pointer;
+}
+
+.medplum-search-control > table td.c {
+  text-align: center;
+}
+
+.medplum-search-control > table td.r {
+  text-align: right;
+}
+
+/* Header cells */
+
+.medplum-search-control > table thead th {
+  text-align: left;
+  background-color: var(--medplum-blue-50);
+  white-space: nowrap;
+  color: var(--medplum-gray-700);
+  border: 0.1px solid var(--medplum-gray-300);
+  position: relative;
+}
+
+.medplum-search-control > table thead th:hover {
+  background-color: var(--medplum-blue-200);
+}
+
+.medplum-search-control > table thead th.filters {
+  background-color: var(--medplum-gray-100);
+  text-align: center;
+  color: var(--medplum-gray-600);
+}
+
+.medplum-search-control > table thead th svg {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  width: 14px;
+  height: 14px;
+}
+
+/* Body cells */
+
+.medplum-search-control > table tbody tr {
+  background-color: var(--medplum-surface);
+}
+
+.medplum-search-control > table tbody tr.high-priority {
+  background-color: var(--medplum-gray-300);
+}
+
+.medplum-search-control > table tbody tr.duplicate {
+  background-color: var(--medplum-gray-100);
+}
+
+.medplum-search-control > table tbody tr:hover {
+  background-color: var(--medplum-yellow-100);
+}
+
+.medplum-search-control > table tbody td {
+  color: var(--medplum-gray-800);
+  border-right: 0.1px solid var(--medplum-gray-100);
+}
+
+.medplum-search-control .medplum-empty-search {
+  background: var(--medplum-gray-100);
+  border: 0.1px solid var(--medplum-gray-300);
+  color: var(--medplum-gray-500);
+  text-align: center;
+  padding: 40px;
+  font-size: var(--medplum-font-big);
+}
+
+.medplum-search-icon-cell {
+  padding: 0 !important;
+  text-align: center !important;
+  width: 32px !important;
+  min-width: 32px !important;
+  max-width: 32px !important;
+}
+
+.medplum-search-icon-cell input[type='checkbox'] {
+  margin: 0;
+  padding: 0;
+  border: 0.1px solid var(--medplum-gray-600);
+  outline: 0;
+}
+
 .medplum-footer {
   text-align: center;
   font-size: 12px;
@@ -1114,292 +1354,145 @@ div.medplum-nav-menu-container {
   color: var(--medplum-blue-500);
 }
 
-.medplum-blame-container {
-  overflow-x: auto;
+.medplum-status {
+  padding: 1px 6px;
+  font-size: 80%;
+  line-height: 1;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  border-radius: 8px;
 }
 
-.medplum-blame {
-  border: 0.1px solid var(--medplum-gray-100);
-  border-collapse: collapse;
-  border-radius: 4px;
-  border-spacing: 0;
-  width: 100%;
+/*
+ * Request status: https://hl7.org/fhir/valueset-request-status.html
+ * draft, active, on-hold, revoked, completed, entered-in-error, unknown
+ *
+ * Publication status: https://hl7.org/fhir/valueset-publication-status.html
+ * draft, active, retired, unknown
+ *
+ * Observation status: https://www.hl7.org/fhir/valueset-observation-status.html
+ * registered, preliminary, final, amended, cancelled, entered-in-error, unknown
+ *
+ * DiagnosticReport status: https://hl7.org/fhir/valueset-diagnostic-report-status.html
+ * registered, preliminary, final, amended, corrected, appended, cancelled, entered-in-error, unknown
+ *
+ * Task status: https://hl7.org/fhir/valueset-task-status.html
+ * draft, requested, received, accepted, rejected, ready, cancelled, in-progress, on-hold, failed, completed, entered-in-error
+ */
+
+.medplum-status-active,
+.medplum-status-draft,
+.medplum-status-preliminary,
+.medplum-status-registered,
+.medplum-status-requested {
+  background-color: var(--medplum-blue-50);
+  border: 0.01px solid var(--medplum-blue-300);
+  color: var(--medplum-blue-800);
 }
 
-.medplum-blame .start-row {
-  border-top: 0.1px solid var(--medplum-gray-100);
+.medplum-status-on-hold {
+  background-color: var(--medplum-orange-50);
+  border: 0.01px solid var(--medplum-orange-300);
+  color: var(--medplum-orange-800);
 }
 
-.medplum-blame .normal-row {
-  border-top: 0;
+.medplum-status-completed {
+  background-color: var(--medplum-green-50);
+  border: 0.01px solid var(--medplum-green-300);
+  color: var(--medplum-green-800);
 }
 
-.medplum-blame .details {
-  border-right: 0.1px solid var(--medplum-gray-100);
-  padding: 4px;
-  font-size: 10px;
-  line-height: 10px;
-  vertical-align: top;
+.medplum-status-cancelled,
+.medplum-status-rejected,
+.medplum-status-revoked,
+.medplum-status-entered-in-error {
+  background-color: var(--medplum-red-50);
+  border: 0.01px solid var(--medplum-red-300);
+  color: var(--medplum-red-800);
 }
 
-.medplum-blame .line-number {
+.medplum-status-unknown {
   background-color: var(--medplum-gray-50);
-  border: 0;
-  color: var(--medplum-gray-500);
-  font-family: monospace;
-  padding: 4px 8px;
-  text-align: right;
-}
-
-.medplum-blame .line {
-  font-family: monospace;
-  padding: 4px 8px;
-}
-
-.medplum-blame .line-pre {
-  margin: 0;
-}
-
-.medplum-search-control {
-  max-width: 100%;
-  overflow: auto;
-  text-align: left;
-  margin-bottom: 20px;
-  background: var(--medplum-surface);
+  border: 0.01px solid var(--medplum-gray-500);
+  color: var(--medplum-gray-800);
 }
 
-.medplum-search-control .medplum-search-summary {
-  line-height: 28px;
-  padding: 2px 6px;
-  font-size: 12px;
-  white-space: nowrap;
+.medplum-request-group {
+  padding: 4px;
 }
 
-/*
- * Table styles
- */
-
-.medplum-search-control > table {
+.medplum-request-group-task {
+  display: flex;
+  flex-direction: row;
   width: 100%;
-  clear: both;
-  border-top: 0.1px solid var(--medplum-gray-300);
-  border-collapse: collapse;
-}
-
-.medplum-search-control > table tr {
-  border-bottom: 0.1px solid var(--medplum-gray-300);
-}
-
-.medplum-search-control > table td,
-.medplum-search-control > table th {
-  padding: 7px 10px;
-  cursor: pointer;
-}
-
-.medplum-search-control > table td.c {
-  text-align: center;
-}
-
-.medplum-search-control > table td.r {
-  text-align: right;
+  margin-bottom: 16px;
 }
 
-/* Header cells */
-
-.medplum-search-control > table thead th {
-  text-align: left;
-  background-color: var(--medplum-blue-50);
-  white-space: nowrap;
+.medplum-request-group-task-checkmark {
   color: var(--medplum-gray-700);
-  border: 0.1px solid var(--medplum-gray-300);
-  position: relative;
+  font-size: 24px;
+  width: 40px;
 }
 
-.medplum-search-control > table thead th:hover {
-  background-color: var(--medplum-blue-200);
+.medplum-request-group-task-details {
+  flex: 1;
+  line-height: 1.75;
 }
 
-.medplum-search-control > table thead th.filters {
-  background-color: var(--medplum-gray-100);
-  text-align: center;
-  color: var(--medplum-gray-600);
+.medplum-request-group-task-title {
+  font-size: 14px;
+  font-weight: bold;
 }
 
-.medplum-search-control > table thead th svg {
-  position: absolute;
-  top: 2px;
-  right: 2px;
-  width: 14px;
-  height: 14px;
+.medplum-request-grou-task-actions {
+  width: 100px;
 }
 
-/* Body cells */
-
-.medplum-search-control > table tbody tr {
-  background-color: var(--medplum-surface);
+.medplum-blame-container {
+  overflow-x: auto;
 }
 
-.medplum-search-control > table tbody tr.high-priority {
-  background-color: var(--medplum-gray-300);
+.medplum-blame {
+  border: 0.1px solid var(--medplum-gray-100);
+  border-collapse: collapse;
+  border-radius: 4px;
+  border-spacing: 0;
+  width: 100%;
 }
 
-.medplum-search-control > table tbody tr.duplicate {
-  background-color: var(--medplum-gray-100);
+.medplum-blame .start-row {
+  border-top: 0.1px solid var(--medplum-gray-100);
 }
 
-.medplum-search-control > table tbody tr:hover {
-  background-color: var(--medplum-yellow-100);
+.medplum-blame .normal-row {
+  border-top: 0;
 }
 
-.medplum-search-control > table tbody td {
-  color: var(--medplum-gray-800);
+.medplum-blame .details {
   border-right: 0.1px solid var(--medplum-gray-100);
+  padding: 4px;
+  font-size: 10px;
+  line-height: 10px;
+  vertical-align: top;
 }
 
-.medplum-search-control .medplum-empty-search {
-  background: var(--medplum-gray-100);
-  border: 0.1px solid var(--medplum-gray-300);
+.medplum-blame .line-number {
+  background-color: var(--medplum-gray-50);
+  border: 0;
   color: var(--medplum-gray-500);
-  text-align: center;
-  padding: 40px;
-  font-size: var(--medplum-font-big);
-}
-
-.medplum-search-icon-cell {
-  padding: 0 !important;
-  text-align: center !important;
-  width: 32px !important;
-  min-width: 32px !important;
-  max-width: 32px !important;
-}
-
-.medplum-search-icon-cell input[type='checkbox'] {
-  margin: 0;
-  padding: 0;
-  border: 0.1px solid var(--medplum-gray-600);
-  outline: 0;
-}
-
-/*
- * Filter editor
- */
-
-.medplum-filter-editor {
-  text-align: left;
-  min-width: 800px;
-}
-
-.medplum-filter-editor-table {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.modal-dialog {
-  background: var(--medplum-gray-600);
-  border: 0.1px solid var(--medplum-gray-700);
-  color: var(--medplum-foreground);
-  padding: 0;
-  position: absolute;
-  z-index: 21;
-  box-shadow: var(--medplum-shadow) 0 2px 6px;
-  outline: 0;
-}
-
-.modal-dialog a,
-.modal-dialog a:link,
-.modal-dialog a:visited {
-  color: var(--medplum-blue-800);
-  cursor: pointer;
-}
-
-.modal-dialog-bg {
-  background: rgba(0, 0, 0, 0.5);
-  left: 0;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 20;
-}
-
-.modal-dialog-title {
-  background: var(--medplum-gray-800);
-  color: var(--medplum-surface);
-  cursor: pointer;
-  padding: 6px;
-  display: flex;
-  justify-content: space-between;
-}
-
-.modal-dialog-title-close {
-  cursor: pointer;
-  vertical-align: middle;
-}
-
-.modal-dialog-title-close:hover {
-  background-color: var(--medplum-gray-700);
-}
-
-.modal-dialog-title-close > svg {
-  width: 20px;
-  height: 20px;
-}
-
-.modal-dialog-content {
-  text-align: center;
-  background-color: var(--medplum-surface);
-  padding: 8px;
-}
-
-.modal-dialog-buttons {
-  text-align: right;
-  background-color: var(--medplum-gray-100);
-  border-top: 1px solid var(--medplum-gray-400);
-  padding: 8px;
-}
-
-.modal-dialog-buttons button {
-  padding: 1px 6px;
-}
-
-.medplum-menu-separator {
-  border-top: 0.1px solid var(--medplum-gray-400);
-  margin: 4px 0;
-  padding: 0;
-}
-
-.medplum-submenu-arrow {
-  color: var(--medplum-foreground);
-  left: auto;
-  padding-right: 6px;
-  position: absolute;
-  right: 0;
+  font-family: monospace;
+  padding: 4px 8px;
   text-align: right;
-  user-select: none;
 }
 
-.medplum-title-bar {
-  display: flex;
-  width: 100%;
-  height: 50px;
-  padding: 15px;
-  justify-content: space-between;
-  background: var(--medplum-surface);
-  border-bottom: 2px solid var(--medplum-gray-200);
-  color: var(--medplum-gray-800);
-}
-
-.medplum-title-bar > div {
-  display: flex;
-  align-items: center;
+.medplum-blame .line {
+  font-family: monospace;
+  padding: 4px 8px;
 }
 
-.medplum-title-bar h1 {
-  font-size: 14px;
-  font-weight: bold;
-  padding: 0 4px 0 1px;
-  margin: 0 4px 0 1px;
-  color: var(--medplum-gray-800);
+.medplum-blame .line-pre {
+  margin: 0;
 }
 
 .medplum-signin {