legalesign-document-viewer 0.1.1 → 0.1.3

package/dist/collection/components/ls-document-viewer/ls-document-viewer.css

@@ -1,5 +1,7 @@
 /* 1. Use a more-intuitive box-sizing model */
-*, *::before, *::after {
+*,
+*::before,
+*::after {
   box-sizing: border-box;
 }
 
@@ -23,18 +25,31 @@ body {
 }
 
 /* 6. Improve media defaults */
-img, picture, video, canvas, svg {
+img,
+picture,
+video,
+canvas,
+svg {
   display: block;
   max-width: 100%;
 }
 
 /* 7. Inherit fonts for form controls */
-input, button, textarea, select {
+input,
+button,
+textarea,
+select {
   font: inherit;
 }
 
 /* 8. Avoid text overflows */
-p, h1, h2, h3, h4, h5, h6 {
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   overflow-wrap: break-word;
 }
 
@@ -42,18 +57,23 @@ p, h1, h2, h3, h4, h5, h6 {
 p {
   text-wrap: pretty;
 }
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   text-wrap: balance;
 }
 
 /*
   10. Create a root stacking context
 */
-#root, #__next {
+#root,
+#__next {
   isolation: isolate;
 }
 
-
 :host {
   display: flex;
   flex-direction: row;
@@ -63,63 +83,96 @@ h1, h2, h3, h4, h5, h6 {
   padding: 0px;
 }
 
+#my-field-panel {
+  position: relative;
+  height: calc(100% - 4.313rem);
+}
+
 .leftBox {
+  border-radius: 16px;
+  border: 1px solid var(--gray-30, #edeff2);
+  background: var(--white, #fff);
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  width: 21.25rem;
+  margin: 1rem;
+  min-width: 21.25rem;
+  max-height: 100%;
+}
+
+.left-box-inner {
+  position: relative;
   display: flex;
-  flex-direction: row;
-  min-width: 250px;
-  width: 250px;
-  border: 1px gray solid;
+  height: 100%;
+  padding: 0.75rem;
+  gap: 0.75rem;
 }
 
 .rightBox {
   width: 200px;
   border: 1px gray solid;
-    width: 470px;
+  width: 470px;
   min-width: 390px;
   padding: 4px;
-  font-family: inherit;  
+  font-family: inherit;
 }
 
 .toolbox {
   display: flex;
   flex-direction: column;
-  width: 250px;
-  left: 0px;
+  width: 100%;
+  height: 100%;
+  border-radius: 8px;
+  border: 1px solid var(--gray-30, #e0e2e5);
+  background: var(--gray-10, #f7f8fa);
+  padding: 0.75rem;
+  gap: 1rem;
+  overflow-y: auto;
 }
 
 .ls-editor-infobox {
   padding: 2px 8px 2px 8px;
-  color: #727272;
 }
 
 #pdf-canvas {
   top: 0px;
   left: 0px;
   width: 100px;
-  height:100px;  
+  height: 100px;
 }
 
 #ls-mid-area {
   display: flex;
   flex-direction: column;
-   overflow-x: scroll;
-  overflow-y: scroll;
+  width: 100%;
 }
 
-#ls-document-frame {
-  background-image: repeating-linear-gradient(rgba(175, 176, 178, 0.4) 0px, rgba(175, 176, 178, 0.4) 1px, transparent 1px, transparent 100%), repeating-linear-gradient(90deg, rgba(175, 176, 178, 0.4) 0px, rgba(175, 176, 178, 0.4) 1px, transparent 1px, transparent 100%);
-  border: 0px  rgb(136, 80, 80) solid;
+.document-frame-wrapper {
   position: relative;
-  min-width: 100%;
+  padding: 0 1.25rem;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+  align-items: center;
+  overflow-y: auto;
+}
+
+.spacer {
+  min-height: 5.5rem;
   width: 100%;
+}
+
+#ls-document-frame {
+  /* background-image: repeating-linear-gradient(rgba(175, 176, 178, 0.4) 0px, rgba(175, 176, 178, 0.4) 1px, transparent 1px, transparent 100%),
+    repeating-linear-gradient(90deg, rgba(175, 176, 178, 0.4) 0px, rgba(175, 176, 178, 0.4) 1px, transparent 1px, transparent 100%);
+  border: 0px rgb(136, 80, 80) solid; */
+  position: relative;
   height: 98vh;
   max-width: 100%;
-  max-height:100%;
+  max-height: 100%;
   margin: 0px;
   padding: 2px;
-  overflow-x: scroll;
-  overflow-y: scroll;
-  background-color: rgb(181, 181, 181);
+  /* background-color: rgb(181, 181, 181); */
   scrollbar-width: auto;
   scrollbar-color: auto;
 }
@@ -146,8 +199,11 @@ h1, h2, h3, h4, h5, h6 {
 
 #ls-editor-form {
   display: flex;
-  flex-direction: row;
   width: 100vw;
+  max-height: calc(100vh - 2.25rem);
+  position: relative;
+  background: var(--gray-10, #f7f8fa);
+  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.04) inset, 0 10px 15px 0 rgba(0, 0, 0, 0.04) inset;
 }
 
 .hidden {
@@ -155,3 +211,386 @@ h1, h2, h3, h4, h5, h6 {
   display: none;
   width: 0px;
 }
+
+.toolbox-section-title {
+  color: var(--gray-100, #45484d);
+  font-size: 1.125rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1.75rem; /* 155.556% */
+}
+
+.toolbox-section-description {
+  color: var(--gray-80, #5e6066);
+  font-size: 0.75rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1rem;
+}
+
+.fields-box {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.page-header {
+  display: flex;
+  height: 2.25rem;
+  gap: 0.5rem;
+  padding: 0.25rem 0.75rem;
+  justify-content: center;
+  align-items: center;
+}
+
+.header-text-1 {
+  color: var(--gray-100, #45484d);
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1.25rem;
+}
+
+.header-text-2 {
+  color: var(--gray-100, #45484d);
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1.25rem;
+}
+
+.properties-header {
+  display: flex;
+  padding: 1rem;
+  gap: 0.75rem;
+  align-items: center;
+  border-bottom: 1px solid var(--gray-20, #edeff2);
+}
+
+.properties-header-title {
+  color: var(--gray-100, #45484d);
+  width: 100%;
+  font-size: 1.5rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 2rem; /* 133.333% */
+}
+
+.properties-header-icon {
+  display: flex;
+  padding: 0.5rem;
+  border-radius: 0.625rem;
+  background: var(--primary-10, #eff4ff);
+  color: var(--primary-60, #4456f6);
+}
+
+.expand-fields-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  cursor: pointer;
+  color: var(--gray-80, #6c6e73);
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1.25rem; /* 142.857% */
+}
+
+.expand-fields-row p {
+  color: var(--gray-100, #45484d);
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1.5rem; /* 150% */
+}
+
+/* @media (min-width: 1200px) {
+  #ls-mid-area {
+    max-width: 40vw;
+  }
+} */
+
+/* Global Styles */
+
+p {
+  color: var(--gray-80, #6c6e73);
+  font-family: var(--font-family);
+  font-size: var(--text-sm);
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--text-sm-line-height);
+}
+
+a {
+  color: var(--primary-60, #4456f6);
+  font-size: var(--text-sm);
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--text-sm-line-height);
+  cursor: pointer;
+}
+
+a:hover {
+  text-decoration: underline;
+  color: var(--primary-70, #2134dc);
+}
+
+.button-link,
+.button-link:hover {
+  all: unset;
+}
+
+select {
+  appearance: none;
+  height: 36px;
+}
+
+.input-wrapper {
+  position: relative;
+  width: fit-content;
+}
+
+#selectorIcon {
+  position: absolute;
+  top: 50%;
+  right: 0.675rem;
+  transform: translateY(-50%);
+  pointer-events: none;
+  color: var(--gray-80, #6c6e73);
+}
+
+#selectLeadingIcon {
+  position: absolute;
+  top: 50%;
+  left: 0.675rem;
+  transform: translateY(-50%);
+  pointer-events: none;
+  color: var(--gray-80, #6c6e73);
+}
+
+.has-leading-icon {
+  padding-left: 2.5rem;
+}
+
+input,
+select,
+textarea {
+  border: 1px solid var(--gray-40, #d8d9dc);
+  box-shadow: 0 1px 0.125rem rgba(0, 0, 0, 0.05);
+  padding: 0.5rem 0.75rem;
+  font-family: var(--font-family);
+  font-size: var(--text-sm);
+  border-radius: 0.5rem;
+  color: var(--gray-100, #45484d);
+  font-weight: 400;
+}
+
+input::placeholder,
+select::placeholder,
+textarea::placeholder {
+  color: var(--gray-60, #afb0b2);
+}
+
+input:hover,
+select:hover,
+textarea:hover {
+  border-color: var(--gray-50, #c8c9cc);
+  background-color: var(--white, #fff);
+}
+
+input:focus,
+select:focus,
+textarea:focus {
+  outline: none;
+  box-shadow: 0 0 0 0.25rem var(--primary-40, #79adfc);
+  border-color: var(--primary-60, #4456f6);
+  background-color: var(--white, #fff);
+}
+
+input:active,
+select:active,
+textarea:active {
+  border-color: var(--primary-50, #5185ff);
+}
+
+input:disabled,
+select:disabled,
+textarea:disabled {
+  cursor: not-allowed;
+  background-color: var(--gray-10, #f7f8fa);
+}
+
+input[type='checkbox'] {
+  appearance: none;
+  position: relative;
+  height: 1rem;
+  width: 1rem;
+  padding: 0.25rem;
+  border-radius: var(--radius-sm);
+  border: 1px solid #d1d5db;
+  background-color: #ffffff;
+  cursor: pointer;
+}
+
+input[type='checkbox']:checked,
+input[type='checkbox'].indeterminate {
+  background-color: var(--primary-60, #4456f6);
+  border: none;
+}
+
+input[type='checkbox']:checked::after {
+  content: '';
+  position: absolute;
+  top: 45%;
+  left: 50%;
+  transform: translate(-50%, -50%) rotate(-45deg) scale(-1, 1);
+  width: 0.5rem;
+  height: 0.25rem;
+  border-bottom: 0.125rem solid white;
+  border-right: 0.125rem solid white;
+}
+
+input[type='checkbox'].indeterminate::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 0.5rem;
+  height: 0.125rem;
+  background-color: white;
+}
+
+input[type='checkbox']:checked:hover,
+input[type='checkbox'].indeterminate:hover {
+  background-color: var(--primary-70, #2134dc);
+  border: none;
+}
+
+input[type='checkbox']:hover {
+  border: 1px solid #9ca3af;
+}
+
+input[type='checkbox']:focus,
+input[type='checkbox']:active {
+  outline: none;
+  box-shadow: 0 0 0 0.25rem var(--primary-20, #c7ddff);
+  background-color: #f0f4f8;
+}
+
+input[type='checkbox']:disabled {
+  background-color: #f3f4f6;
+  outline: none;
+  cursor: not-allowed;
+}
+
+input[type='checkbox']:disabled:checked {
+  background-color: #e5e7eb;
+  border: none;
+  outline: none;
+  cursor: not-allowed;
+}
+
+.checkbox-container {
+  display: flex;
+  gap: 0.5rem;
+  width: 100%;
+}
+
+.checkbox-label {
+  color: var(--gray-100, #45484d);
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1rem;
+}
+
+.form-label {
+  color: var(--gray-100, #45484d);
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1.5rem;
+}
+
+.form-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  width: 100%;
+}
+.field-properties-outer {
+  position: relative;
+  height: 100%;
+
+}
+
+.loading-box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100vh;
+  color: var(--primary-60, #0c7cba);
+}
+
+button {
+  border: 0;
+  appearance: button;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-lg);
+  background-color: var(--primary-60, #4456f6);
+  color: white;
+  text-transform: capitalize;
+  min-height: 2.25rem;
+  min-width: 2.25rem;
+}
+
+button.tertiaryGrey {
+  border: 1px solid var(--gray-40, #d8d9dc);
+  background-color: white;
+  color: var(--gray-80, #787a80);
+}
+
+button.tertiaryGrey:hover {
+  border: 1px solid var(--gray-50, #c8c9cc);
+  background: var(--gray-10, #f7f8fa);
+}
+
+.button-group {
+  display: flex;
+  border-radius: 0.5rem;
+  border: 1px solid var(--gray-30, #e0e2e5);
+  background: var(--white, #ffffff);
+  overflow: clip;
+}
+
+.button-group button {
+  display: flex;
+  background: transparent;
+  border-radius: unset;
+  padding: 0.25rem 0.75rem;
+  min-width: 2.156rem;
+  min-height: unset;
+  color: var(--gray-80, #6c6e73);
+}
+
+.button-group button:hover {
+  background: var(--gray-10, #f7f8fa);
+}
+
+.button-group > :first-child {
+  border-radius: 0.5rem 0 0 0.5rem;
+}
+
+.button-group > :last-child {
+  border-radius: 0 0.5rem 0.5rem 0;
+}
+
+.button-group > :not(:first-child) {
+  border-left: 1px solid var(--gray-30, #e0e2e5);
+}