@bathiran212/esm-patient-chart-app 7.0.0

package/src/visit/visit-form/visit-form.scss

@@ -0,0 +1,167 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.container {
+  margin: layout.$spacing-05;
+
+  & section {
+    margin: layout.$spacing-05 0 layout.$spacing-03;
+
+    &:first-of-type {
+      margin-top: 0;
+    }
+
+    &:last-of-type {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.heading {
+  @include type.type-style('heading-03');
+  margin: layout.$spacing-05;
+}
+
+.sectionTitle {
+  @include type.type-style('heading-compact-02');
+  color: colors.$gray-70;
+  margin: 0 0 layout.$spacing-03 0;
+}
+
+.dateTimeSection {
+  display: flex;
+  margin: layout.$spacing-05 0;
+  align-items: center;
+}
+
+.radioButton {
+  margin: layout.$spacing-05 0;
+}
+
+.headerGridRow {
+  border-bottom: 0.0625rem solid colors.$gray-20;
+  margin: 0;
+}
+
+.dataGridRow {
+  display: grid;
+  grid-template-columns: 50% 10% 1fr;
+  margin: layout.$spacing-03 layout.$spacing-05;
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+  height: 100%;
+}
+
+.buttonSet {
+  margin-top: auto;
+  justify-self: end;
+}
+
+.button {
+  height: layout.$spacing-10;
+  display: flex;
+  align-content: flex-start;
+  align-items: baseline;
+  min-width: 50%;
+}
+
+.tablet {
+  padding: layout.$spacing-06 layout.$spacing-05;
+  background-color: white;
+}
+
+.desktop {
+  padding: 0;
+}
+
+@media screen and (max-width: 600px) {
+  .dateTimeSection {
+    flex-direction: column;
+  }
+}
+
+.inlineNotification {
+  width: 100%;
+  max-width: unset;
+  padding: '0';
+}
+
+.label {
+  @include type.type-style('label-01');
+  color: colors.$gray-70;
+}
+
+:global(.omrs-breakpoint-lt-desktop) {
+  .container {
+    & section {
+      display: flex;
+      gap: layout.$spacing-10;
+
+      .sectionTitle {
+        flex-basis: 30%;
+        min-width: 8rem;
+        text-align: left;
+      }
+
+      .sectionField {
+        flex-basis: 70%;
+      }
+    }
+  }
+
+  .form {
+    height: 100%;
+  }
+}
+
+.spinner {
+  &:global(.cds--inline-loading) {
+    min-height: layout.$spacing-05 !important;
+  }
+}
+
+.bodyShort02 {
+  @include type.type-style('body-compact-02');
+}
+
+.timePicker {
+  display: flex;
+  align-items: baseline;
+
+  :global(.cds--form-requirement) {
+    max-width: layout.$spacing-12;
+    max-height: 0 !important;
+  }
+}
+
+.timePickerSelectError {
+  outline: 2px solid colors.$red-50;
+  outline-offset: -2px;
+}
+
+.timerPickerError {
+  color: colors.$red-60;
+  display: flex;
+  align-self: flex-end;
+  max-width: layout.$spacing-11;
+  font-size: layout.$spacing-04;
+  margin: 0;
+  letter-spacing: 0.02rem;
+  line-height: 1.33333;
+}
+
+.timePickerContainer {
+  display: flex;
+  flex-direction: column;
+}
+
+.datePicker {
+  :global(.cds--date-picker-input__wrapper) {
+    inline-size: layout.$spacing-13;
+  }
+}