디자인 변경

src/scss/components/_custom-contract.scss

@@ -0,0 +1,162 @@
+.form-outer {
+  .columns {
+    border: 1px solid #ccc;
+    .column {
+      padding: 0 !important;
+      .field {
+        padding: 0 !important;
+        .label {
+          padding: 8px !important;
+          //padding: 0 !important;
+          margin: 0 !important;
+          background-color: var(--primary);
+          color: #fff !important;
+        }
+        .control {
+          padding: 8px !important;
+        }
+      }
+    }
+  }
+}
+
+.form-layout {
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+.form-fieldset {
+  max-width: 786px;
+  animation: fadeInLeft 0.5s;
+}
+
+input {
+  width: 120px !important;
+}
+
+.file-cta {
+  padding-left:0em;
+  padding-right:0em;
+}
+
+.file-icon {
+  margin: 0px;
+}
+
+.datatable-table {
+  th {
+    padding: 10px !important;
+    border: 1px solid #ededed;
+  }
+  tr {
+    padding: 10px !important;
+    border: 1px solid var(--fade-grey);
+    td {
+      padding: 5px 10px !important;
+      border: 1px solid #ededed;
+      input {
+        height: 2.5em;
+      }
+    }
+  }
+}
+
+ul {
+  list-style-type: none;
+}
+
+.file-delete {
+  font-size: 10px;
+  padding-left:5px;
+}
+
+a.mouse-pointer {
+  text-decoration: none;
+}
+
+.file-download {
+  color: var(--light-text);
+  &:hover {
+    color: var(--primary);
+  }
+}
+
+.label {
+  font-size: 1rem;
+  font-weight: bold;
+}
+
+.fieldset-heading {
+  border-bottom: 1px solid var(--fade-grey) !important;
+  padding-bottom: 10px !important;
+  h4 {
+    font-size: 1.3em;
+    color: var(--modal-text) !important;
+  }
+}
+
+.form-outer {
+  padding: 20px !important;
+  border: 1px solid var(--fade-grey) !important;
+  background-color: var(--modal-background) !important;
+}
+
+.form-fieldset {
+  max-width: 90%;
+}
+
+.field{
+  label {
+    color: var(--modal-text) !important;
+    font-weight:bold !important;
+  }
+  p {
+    font-weight: lighter !important;
+  }
+}
+
+.is-horizontal {
+  padding: 10px 0;
+  label {
+    width: 100px;
+  }
+}
+
+.estimate-file-wrapper {
+  display:flex;
+  justify-content: space-between;
+  border:1px solid #ccc;
+  border-radius:5px;
+  padding:0px 20px;
+  margin-bottom:10px;
+  .estimate-file-download, .estimate-file-delete {
+    font-size: 20px;
+    line-height: 40px;
+    padding-left: 30px;
+    cursor: pointer;
+  }
+  .estimate-file-img {
+    font-size: 40px;
+    padding-right: 50px;
+  }
+  .estimate-file-name {
+    width: 400px;
+    line-height: 40px;
+  }
+  .estimate-file-size {
+    width: 150px;
+    line-height: 40px;
+  }
+}
+
+.estimate-file-download, .estimate-file-delete, .fa-plus-circle {
+  &:hover {
+    color: var(--primary);
+  }
+}
+
+.file-trigger {
+  margin-left: 10px;
+  height:15px;
+  padding:10px 10px;
+}

src/scss/css-variables/_colors.scss

@@ -70,6 +70,7 @@
   --dark-text: #283252;
   --light-text: #a2a5b9;
   --modal-text: #283252;
+  --modal-text-reverse: #fff;
   // Additional colors
   --secondary: #336aeb;
   --purple: #8168b1;
@@ -90,6 +91,7 @@
   --border: color-mix(in oklab, var(--dark-sidebar), white 12%);
   --dark-text: #0b0d13;
   --modal-text: #fff;
+  --modal-text-reverse: #283252;
   --placeload-nuance-from: rgb(255 255 255 / 15%);
   --placeload-nuance-to: rgb(255 255 255 / 24%);
 

src/scss/css-variables/_rtl.scss

@@ -2,7 +2,7 @@
 
 :root {
   --transform-direction: 1;
-  zoom:1.2;
+  zoom:1.1;
 }
 
 [dir='rtl'] {