docuseal/app/javascript/application.scss

@config "../../tailwind.application.config.js";

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

a[href],
input[type='checkbox'],
input[type='submit'],
input[type='image'],
input[type='radio'],
label[for],
select,
button {
  cursor: pointer;
}

button .disabled {
  display: none;
}

button[disabled] .disabled, button.btn-disabled .disabled {
  display: initial;
}

button .enabled {
  display: initial;
}

button[disabled] .enabled, button.btn-disabled .enabled {
  display: none;
}

.input-bordered {
  @apply border-base-content/20;
}

.select-bordered {
  @apply border-base-content/20;
}

.textarea-bordered {
  @apply border-base-content/20;
}

.btn {
  @apply no-animation;
}

.base-input {
  @apply input input-bordered bg-white;
}

.base-textarea {
  @apply textarea textarea-bordered bg-white rounded-3xl;
}

.base-button {
  @apply btn btn-neutral text-white text-base;
}

.white-button {
  @apply btn btn-outline text-base bg-white border-2;
}

.base-checkbox {
  @apply checkbox rounded bg-white checkbox-sm no-animation;
}

.base-radio {
  @apply radio bg-white radio-sm no-animation;
}

.base-select {
  @apply select base-input w-full font-normal;
}

.tooltip-bottom-end:before {
  transform: translateX(-95%);
  top: var(--tooltip-offset);
  left: 100%;
  right: auto;
  bottom: auto;
}

.tooltip-pre:before {
  white-space: pre;
  text-align: left;
}

.tooltip-bottom-end:after {
  transform: translateX(-25%);
  border-color: transparent transparent var(--tooltip-color) transparent;
  top: var(--tooltip-tail-offset);
  left: 50%;
  right: auto;
  bottom: auto;
}

.tooltip-bottom-start:before {
  transform: translateX(-31%);
  top: var(--tooltip-offset);
  left: 100%;
  right: auto;
  bottom: auto;
}

.tooltip-bottom-start:after {
  transform: translateX(-25%);
  border-color: transparent transparent var(--tooltip-color) transparent;
  top: var(--tooltip-tail-offset);
  left: 50%;
  right: auto;
  bottom: auto;
}

@media (hover: none), (pointer: coarse) {
  .tooltip-no-touch:before,
  .tooltip-no-touch:after {
    display: none;
  }
}

.autocomplete {
  background: white;
  z-index: 1000;
  font: 16px/25px "-apple-system", BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  overflow: auto;
  box-sizing: border-box;
  @apply border border-base-300 mt-1 rounded-md;
}

.autocomplete * {
  font: inherit;
}

.autocomplete > div {
  @apply px-2 py-1.5 font-normal;
}

.autocomplete .group {
  background: #eee;
}

.autocomplete > div:hover:not(.group),
.autocomplete > div.selected {
  @apply bg-base-300;
  cursor: pointer;
}

.input-outlined {
  outline-style: solid;
  outline-width: 1px;
  outline-offset: 3px;
  outline-color: hsl(var(--bc) / 0.2);
}

.font-times {
  font-family: "Times New Roman", Times, ui-serif, serif, Cambria, Georgia;
}

.font-courier {
  font-family: "Courier New", Consolas, "Liberation Mono", monospace, ui-monospace, SFMono-Regular, Menlo, Monaco;
}

markdown-editor [contenteditable] p {
  margin-bottom: 18px;
}

native-action {
  display: contents;
}

@media (max-width: 767px) {
  .table-stack,
  .table-stack tbody,
  .table-stack tr,
  .table-stack td {
    display: block;
  }

  .table-stack,
  div:has(> .table-stack) {
    overflow: visible;
  }

  .table-stack thead {
    display: none;
  }

  .table-stack tr {
    @apply bg-base-200 rounded-2xl py-3 mb-3 border-0;
  }

  .table-stack td {
    @apply px-4 py-1;
  }

  .table-stack td[data-label] {
    @apply flow-root text-right;
    overflow-wrap: anywhere;
  }

  .table-stack td[data-label]::before {
    content: attr(data-label);
    @apply float-left mr-4 text-sm leading-6 text-base-content/60;
  }

  .table-stack td:first-child {
    @apply font-semibold;
  }

  .table-stack td:last-child {
    @apply grid grid-cols-2 gap-2 pt-3;
  }

  .table-stack td:last-child:has(> .dropdown) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  }

  .table-stack td:last-child:not(:has(*)) {
    display: none;
  }

  .table-stack td:last-child > * {
    margin-left: 0 !important;
  }

  .table-stack td:last-child > :last-child:nth-child(odd):not(.dropdown) {
    @apply col-span-2;
  }

  .table-stack td:last-child .btn {
    @apply btn-sm w-full;
  }
}