18201141_custom_webapp.scss

html {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

body {
  height: 100%;
}

.pointer {
  cursor: pointer;
}

.grab {
  cursor: grab;
}

.gap-1 {
  gap: 0.5rem;
}

.gap-2 {
  gap: 1rem;
}

.gap-3 {
  gap: 1.5rem;
}

@media (max-width: 576px) {
  .flex-fill-child > * {
    flex: 1 1 auto !important;
  }
}

:disabled, .disabled {
  cursor: not-allowed !important;
  pointer-events: auto !important;
}

thead th,
legend,
label {
  font-family: var(--font-medium);
}

strong,
b,
.font-weight-bold {
  font-family: var(--font-semibold);
}

a.btn:not(.btn-link) {
  text-decoration: none;
}

.tabs > .card-header {
  border-bottom: 1px solid var(--extra-light) !important;
  padding-top: 0 !important;
  padding-left: 0.8rem !important;
  padding-right: 0.8rem !important;

  .card-header-tabs {
    border-bottom: 0 !important;
  }
}

.card-header {
  .nav-item {
    font-family: var(--font-medium) !important;
    margin-bottom: 0 !important;

    .nav-link {
      padding: 0.5rem !important;

      &:not(.active):not(.disabled) {
        color: var(--dark) !important;
      }
    }
  }
}

.b-form-tag {
  align-items: center !important;
}

// Used for back button
.back {
  &:hover {
    text-decoration: none;

    .back-icon {
      transition: transform 0.3s ease-out;
      transform: translateX(-4px);
    }
  }
}

[dir="rtl"] {
  .back {
    .back-icon {
      display: none;
    }
  }
}

.table.b-table {
  th {
    white-space: nowrap;
  }

  tr {
    &:first-child td {
      border: none;
    }

    th {
      border: 0;
    }
  }
}

fieldset.required {
  legend > div:first-child::after {
    content: "*";
    color: var(--danger);
    max-width: 0.125rem;
  }
}

// Padding because of toolbar
.b-toaster.b-toaster-bottom-right {
  bottom: 75px;
}

// Fixes dropdowns in scrollable modals
.modal-dialog-scrollable .modal-content {
  overflow: initial;
}

.dropdown-menu * {
  font-family: var(--font-regular) !important;

  .dropdown-item {
    * {
      border: 0 !important;
      box-shadow: none !important;
      background-color: transparent !important;
    }

    &:active * {
      color: var(--white) !important;
    }
  }
}

// Rich text content styling
.rt-content {
  &.editor {
    border-radius: 4px;
    border: 2px solid var(--light);
  }

  .editor__content {
    min-height: 200px;
  }

  .btn {
    width: 60px;
  }

  p {
    margin: 0;
    padding: 0;
  }

  // blockquote
  blockquote {
    border-left: 3px solid rgba(var(--black), 0.1);
    padding-left: 0.8rem;
    font-style: italic;
  }

  // Code
  pre {
    background-color: var(--black);
    color: var(--white);
    overflow: visible;
    white-space: pre-wrap;
    margin-bottom: 5px;
    margin-top: 5px;
    padding: 5px 10px;
    border-radius: 3px;
  }

  // todo list - https://github.com/scrumpy/tiptap/blob/master/examples/Components/Routes/TodoList/index.vue
  li[data-type="todo_item"] {
    display: flex;
    flex-direction: row;
  }

  .todo-checkbox {
    border: 2px solid var(--black);
    height: 0.9em;
    width: 0.9em;
    box-sizing: border-box;
    margin-right: 10px;
    margin-top: 0.3rem;
    user-select: none;
    cursor: pointer;
    border-radius: 0.2em;
    background-color: transparent;
    transition: 0.4s background;
  }

  .todo-content {
    flex: 1;

    > p:last-of-type {
      margin-bottom: 0;
    }

    > ul[data-type="todo_list"] {
      margin: 0.5rem 0;
    }
  }

  li[data-done="true"] {
    > .todo-content {
      > p {
        text-decoration: line-through;
      }
    }

    > .todo-checkbox {
      background-color: var(--black);
    }
  }

  li[data-done="false"] {
    text-decoration: none;
  }
}

.ProseMirror.ProseMirror-focused {
  outline: none;
}

.vue-grid-layout {
  transition: none !important;
}

.vue-grid-item {
  transition: none !important;
}

::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}

::-webkit-scrollbar-track {
  border-radius: 6px;
}

::-webkit-scrollbar-thumb {
  background: var(--secondary);
  background-clip: content-box;
  border: 3px solid transparent;
  border-radius: 7px;

  &:hover {
    background-color: var(--primary);
  }
}

::-webkit-scrollbar-corner {
  background: transparent;
}

.sidebar-spacer {
  min-width: 0px;
  -webkit-transition: min-width 0.15s ease-in-out;
  -moz-transition: min-width 0.15s ease-in-out;
  -o-transition: min-width 0.15s ease-in-out;
  transition: min-width 0.15s ease-in-out;

  &.expanded {
    min-width: calc(var(--sidebar-width));
    -webkit-transition: min-width 0.2s ease-in-out;
    -moz-transition: min-width 0.2s ease-in-out;
    -o-transition: min-width 0.2s ease-in-out;
    transition: min-width 0.2s ease-in-out;
  }
}

// Remove from here when all ace-editors use c-ace-editor
.ace_editor {
  color: var(--black) !important;
  background-color: var(--white) !important;
  border-radius: 0.25rem;
  border: 2px solid var(--extra-light);

  .ace_cursor {
    border-left: 2px solid var(--black);
  }

  .ace_gutter {
    background-color: var(--light) !important;
    color: var(--black) !important;

    .ace_gutter-active-line {
      background-color: var(--extra-light) !important;
    }
  }

  .ace_text {
    color: var(--black) !important;
  }

  .ace_keyword {
    color: var(--primary) !important;
  }

  .ace_string {
    color: var(--secondary) !important;
  }

  .ace_variable {
    color: var(--warning) !important;
  }

  .ace_type {
    color: var(--secondary) !important;
  }

  .ace_constant {
    color: var(--primary) !important;
  }

  .ace_tag {
    color: var(--primary) !important;
  }

  .ace_attribute {
    color: var(--warning) !important;
  }

  .ace_comment {
    color: var(--extra-light) !important;
  }
}

// Supporting CSS to improve print-to-PDF option
@media print {
  @page {
    size: auto;
  }

  body {
    margin: 0;
  }

  header, footer, aside, nav {
    display: none;
  }

  .block {
    break-inside: avoid;
    width: 100%;
  }
}