Move shared classes from webapp custom.scss to server custom.scss

server/assets/src/scss/main/18201141_custom_webapp.scss

@@ -1,3 +1,21 @@
+html {
+  height: 100vh;
+  width: 100vw;
+  overflow: hidden;
+}
+
+body {
+  height: 100%;
+}
+
+.pointer {
+  cursor: pointer;
+}
+
+.grab {
+  cursor: grab;
+}
+
 .gap-1 {
   gap: 0.5rem;
 }
@@ -10,11 +28,29 @@
   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;
 }
@@ -45,7 +81,35 @@ a.btn:not(.btn-link) {
   }
 }
 
+.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;
@@ -57,6 +121,22 @@ a.btn:not(.btn-link) {
   }
 }
 
+fieldset.required {
+  label::after {
+    content: "*";
+    display: inline-block;
+    color: var(--primary);
+    width: 10px;
+    height: 18px;
+    overflow: hidden;
+  }
+}
+
+// Padding because of toolbar
+.b-toaster.b-toaster-bottom-right {
+  bottom: 75px;
+}
+
 // Fixes dropdowns in scrollable modals
 .modal-dialog-scrollable .modal-content {
   overflow: initial;
@@ -78,6 +158,106 @@ a.btn:not(.btn-link) {
   }
 }
 
+// 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: #23241f;
+    color: #f8f8f2;
+    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;
@@ -173,4 +353,24 @@ a.btn:not(.btn-link) {
   .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%;
+  }
 }