legalesign-document-viewer 0.7.2 → 0.7.3

package/dist/collection/components/ls-recipient-card/ls-recipient-card.css

@@ -1,464 +0,0 @@
-:host {
-  display: block;
-}
-
-* {
-  box-sizing: border-box;
-  margin: 0;
-}
-
-.participant-card {
-  display: flex;
-  padding: 0.75rem;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 0.5rem;
-  align-self: stretch;
-  max-height: 6.25rem;
-  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
-  overflow: hidden;
-  transform-origin: top;
-}
-
-.participant-card.expand-up {
-  transform-origin: bottom;
-}
-.participant-card.expand-down {
-  transform-origin: top;
-}
-
-.participant-card.expanded {
-  max-height: 125rem; /* large enough for any content */
-}
-
-.dot {
-  width: 0.5rem;
-  height: 0.5rem;
-  background: var(--red-50, #ff706b);
-  border-radius: 50%;
-  margin-right: 0.25rem;
-}
-
-.top-card {
-  border-radius: 1rem 1rem 0 0;
-}
-
-.full-card {
-  border-radius: 1.5rem;
-}
-
-.bottom-card {
-  border-radius: 0 0 1rem 1rem;
-}
-
-.participant-card-inner {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.hidden {
-  visibility: hidden;
-  display: none;
-}
-
-.form-button-set {
-  display: flex;
-  gap: 0.5rem;
-}
-
-.role-label {
-  display: flex;
-  padding: 0.125rem 0.5rem;
-  justify-content: center;
-  align-items: center;
-  gap: 0.25rem;
-  border-radius: 0.5rem;
-  font-size: 0.875rem;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 1.25rem; /* 142.857% */
-}
-
-.fields-box {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  width: 100%;
-}
-
-.role-label.fields {
-  border-radius: 1rem;
-  margin-top: 0.5rem;
-}
-
-.innerButton {
-  margin: 0px;
-  padding: 0px;
-  max-height: 1.25rem !important;
-  max-width: 1.25rem !important;
-  background-color: transparent;
-  border: none;
-  cursor: pointer;
-  color: var(--default-button-colour);
-}
-
-.innerButton:hover {
-  color: var(--hover-button-colour);
-}
-
-.participant-card-top-items {
-  display: flex;
-  width: 100%;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.button-set {
-  display: flex;
-  gap: 0.125rem;
-}
-
-.participant-text-description {
-  font-size: 0.875rem;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 1.25rem; /* 142.857% */
-}
-
-.participant-text-type {
-  font-style: normal;
-  font-weight: 400;
-  line-height: 1.25rem; /* 142.857% */
-}
-
-.titleButton {
-  width: 100%;
-  text-align: left;
-  background-color: transparent;
-  border: none;
-}
-
-/* Global Styles */
-
-.full-width {
-  width: 100%;
-}
-
-.participant-card-text {
-  padding: 0 0.125rem 0.125rem 0.125rem;
-}
-
-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: 2.25rem;
-  width: 100%;
-}
-
-.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:not(:disabled),
-select:hover:not(:disabled),
-textarea:hover:not(:disabled) {
-  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%;
-}
-
-.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.tertiary {
-  border: 1px solid var(--primary-60, #4456f6);
-  background: transparent;
-  color: var(--primary-70, #2134dc);
-}
-
-button.tertiary:hover {
-  border: 1px solid var(--primary-70, #2134dc);
-  border: 1px solid var(--primary-80, #0c34b8);
-}
-
-button.destructive {
-  border: 1px solid var(--red-60, #f04438);
-  background: transparent;
-  color: var(--red-60);
-}
-
-button.destructive:hover {
-  border: 1px solid var(--red-70, #d92d20);
-  background: var(--red-10, #fff1f0);
-  background-color: var(--red-10, #fff1f0);
-}
-
-button.secondary {
-  border: 1px solid var(--gray-50, #c8c9cc);
-  background: var(--white, #fff);
-  color: var(--gray-90, #5e6066);
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);
-}
-
-button.secondary: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);
-}