@unifylib/ui-lib 1.0.3 → 1.1.3

package/src/lib/components/base-form-canvas/base-form-canvas.component.css

@@ -1,22 +1,196 @@
-.chipList {
-  display: inline-block !important;
-}
-
-
-
-::ng-deep .mdc-floating-label--required:not(.mdc-floating-label--hide-required-marker)::after {
-  color: red !important; /* asterisk */
-  font-size: 20px;
-  margin-left: 2px;
-
-}
-
-
-.arrow_drop_down_autocomplete {
-  position: absolute;
-  right: 0;
-  top: 7px;
-  color: rgba(0, 0, 0, 0.54);
-  cursor: pointer;
-  font-size: 28px !important;
-}
+
+.main-form-canvas {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  align-items: flex-start;
+  justify-content: flex-start;
+  margin-top: 3vh;
+  width: 100%;
+  flex-wrap: wrap;
+}
+
+.form-wrapper {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.form-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.row-container {
+  display: flex;
+  flex-direction: row;
+  gap: 20px;
+  flex-wrap: wrap;
+  width: 100%;
+}
+
+.field-column {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+
+.label-and-asterisk-container {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.full-width {
+  width: 100%;
+}
+
+.readonly-item {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+  font-size: 14px;
+  padding: 4px 0;
+  width: 100%;
+
+  .readonly-label {
+    font-weight: 500;
+    color: #9B9B9B;
+    font-size: 14px;
+  }
+
+  .readonly-value {
+    font-weight: 500;
+    color: #222;
+    word-break: break-word;
+    font-size: 14px;
+  }
+
+  .json-viewer {
+    width: 100%;
+  }
+
+  .chipList {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+  }
+
+  mat-icon {
+    font-size: 18px;
+    vertical-align: middle;
+  }
+}
+
+
+.row-wrapper {
+  display: flex;
+  flex-direction: row;
+  gap: 20px;
+  width: 100%;
+  flex-wrap: wrap;
+}
+
+.column-wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  align-items: flex-start;
+}
+
+.row-container {
+  display: flex;
+  flex-direction: row;
+  gap: 20px;
+  width: 100%;
+  flex-wrap: wrap;
+}
+
+.field-column {
+  display: flex;
+  flex-direction: column;
+  min-width: 50px !important;
+}
+
+.field-row {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  width: 100%;
+  align-items: flex-start;
+}
+
+.field-label {
+  flex: 0 0 40%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.field-input {
+  flex: 0 0 60%;
+  display: flex;
+  flex-direction: column;
+}
+
+
+.radio-group-custom {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+
+@media (max-width: 600px) {
+  .main-form-canvas {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .row-container {
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .field-column {
+    width: 100%;
+    flex: 1 1 100% !important;
+  }
+
+  .column-wrapper {
+    align-items: center;
+  }
+
+  .field-row {
+    flex-direction: column;
+  }
+
+  .field-label,
+  .field-input {
+    flex: 1 1 100%;
+  }
+
+  .radio-group-custom {
+    flex-direction: column;
+    gap: 5px;
+  }
+}
+
+@media (max-width: 960px) {
+  .row-wrapper,
+  .row-container {
+    flex-direction: column;
+  }
+
+  .row-container {
+    gap: 15px;
+  }
+
+  .field-column {
+    flex: 1 1 100% !important;
+  }
+}