@dejwcake/craftable 0.1.10 → 2.0.0

package/scss/overrides/_tables.scss

@@ -1,64 +1,79 @@
 table th a:not([href]) {
-  cursor: pointer;
+    cursor: pointer;
 }
 
 .table-hover tbody tr:hover {
-  background-color: #edf3fe;
+    background-color: #edf3fe;
 }
 
 .table-listing thead th {
-  border: none;
+    border: none;
 }
 
 .table-listing thead tr {
-  border-bottom: 1px solid #f0f2f5;
-  border-top: 1px solid #dee3e7;
+    border-bottom: 1px solid #f0f2f5;
+    border-top: 1px solid #dee3e7;
 }
 
 .table-listing td {
-  border-top: 1px solid #f0f2f5;
-  vertical-align: middle;
+    border-top: 1px solid #f0f2f5;
+    vertical-align: middle;
 }
 
-.table-listing .row.no-gutters .btn {
-  margin-right: 10px;
-  @media (max-width: 1319px) {
-    margin-bottom: 10px;
-  }
+.table-listing .d-flex .btn {
+    @media (width <= 1319px) {
+        margin-bottom: 10px;
+    }
 }
 
 .table-listing td:last-of-type {
-  min-width: 95px;
-  display: flex;
-  justify-content: flex-end;
+    min-width: 95px;
+    text-align: end;
+    white-space: nowrap;
 }
 
 td > .switch {
-  top: 4px;
+    top: 4px;
 }
 
-@media (max-width: 991px) {
-  .table-listing {
-    th,
-    td {
-      display: none;
-    }
-    tr {
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
+.table-listing td .form-switch.form-switch-inline {
+    display: flex;
+    justify-content: center;
+    padding-left: 0;
+    min-width: 2.5em;
+}
+
+.table-listing td .form-switch.form-switch-inline .form-check-input {
+    margin-left: 0;
+    float: none;
+}
+
+@media (width <= 991px) {
+    .table-listing {
+        th,
+        td {
+            display: none;
+        }
+
+        tr {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+        }
+
+        th:last-of-type,
+        td:last-of-type,
+        th:nth-of-type(2),
+        td:nth-of-type(2) {
+            display: flex;
+        }
+
+        td:last-of-type {
+            padding-right: 0;
+        }
     }
-    th:last-of-type,
-    td:last-of-type,
-    th:nth-of-type(2),
+
     td:nth-of-type(2) {
-      display: flex;
-    }
-    td:last-of-type {
-      padding-right: 0;
+        overflow: hidden;
     }
-  }
-  td:nth-of-type(2) {
-    overflow: hidden;
-  }
 }

package/scss/overrides/_text.scss

@@ -1,5 +1,3 @@
-@use "../variables" as *;
-
 .text-success {
     color: $success !important;
 }
@@ -14,4 +12,4 @@
 
 .text-info {
     color: $primary !important;
-}
+}

package/scss/overrides/_wysiwyg.scss

@@ -1,65 +1,168 @@
-@use "../variables" as *;
-@use "../images" as *;
-
-.ql-editor {
-  min-height: 200px;
-  padding-right: 2.2rem !important;
-  color: #3e515b;
-  &:after {
-    content: '';
-    background-size: contain;
-    background-repeat: no-repeat;
-    width: 18px;
-    height: 18px;
-    position: absolute;
-    right: 8px;
-    top: 10px;
-    background-position: center;
-  }
+// Tiptap WYSIWYG editor styles
+.tiptap-editor {
+    border: 1px solid $mutedText;
+    border-radius: $border-radius;
+    overflow: hidden;
 }
 
-.ql-container .ql-editor.ql-blank::before {
-  font-style: normal;
-  font-size: 0.875rem;
-  line-height: 1.25;
-  color: #B2BDC5;
-}
+.tiptap-toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 2px;
+    padding: 6px 8px;
+    border-bottom: 1px solid $mutedText;
+    background: #f8f9fa;
 
-.quill-editor .ql-container.ql-snow {
-  border: 1px solid $mutedText;
-}
+    button {
+        background: none;
+        border: 1px solid transparent;
+        border-radius: 3px;
+        padding: 4px 8px;
+        cursor: pointer;
+        font-size: 14px;
+        line-height: 1;
+        color: #555;
 
-.has-danger .quill-editor .ql-container.ql-snow {
-  border: 1px solid $danger;
-}
+        &:hover {
+            background: #e9ecef;
+            border-color: #dee2e6;
+        }
 
-.quill-editor .ql-toolbar.ql-snow {
-  border: 1px solid $mutedText;
-  border-bottom: 1px solid #E9EDF2;
-}
+        &.is-active {
+            background: $primary;
+            color: white;
+            border-color: $primary;
+        }
+
+        &:disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+        }
+    }
 
-.has-danger .quill-editor .ql-toolbar.ql-snow {
-  border: 1px solid $danger;
-  border-bottom: 1px solid #E9EDF2;
+    select {
+        border: 1px solid #dee2e6;
+        border-radius: 3px;
+        padding: 4px 8px;
+        font-size: 13px;
+        background: white;
+        cursor: pointer;
+    }
 }
 
-.ql-snow .ql-picker-label {
-  color: #C7C7C7;
+.tiptap-toolbar-divider {
+    display: inline-block;
+    width: 1px;
+    height: 24px;
+    background: #dee2e6;
+    margin: 0 4px;
 }
 
-.quill-editor .ql-snow .ql-stroke {
-  stroke: #C7C7C7;
+.tiptap-content {
+    .tiptap {
+        min-height: 200px;
+        padding: 12px 16px;
+        outline: none;
+        color: #3e515b;
+
+        > * + * {
+            margin-top: 0.75em;
+        }
+
+        p.is-editor-empty:first-child::before {
+            content: attr(data-placeholder);
+            float: left;
+            color: $mutedText;
+            pointer-events: none;
+            height: 0;
+        }
+
+        img {
+            max-width: 100%;
+            height: auto;
+
+            &.ProseMirror-selectednode {
+                outline: 2px solid $primary;
+            }
+        }
+
+        table {
+            border-collapse: collapse;
+            margin: 0;
+            overflow: hidden;
+            width: 100%;
+
+            td,
+            th {
+                border: 1px solid #dee2e6;
+                min-width: 1em;
+                padding: 6px 8px;
+                position: relative;
+                vertical-align: top;
+
+                > * {
+                    margin-bottom: 0;
+                }
+            }
+
+            th {
+                background-color: #f8f9fa;
+                font-weight: bold;
+            }
+
+            .selectedCell {
+                background: rgba($primary, 0.1);
+            }
+        }
+
+        ul,
+        ol {
+            padding-inline-start: 24px;
+        }
+
+        blockquote {
+            border-left: 3px solid #dee2e6;
+            padding-left: 1rem;
+            color: #6c757d;
+        }
+
+        code {
+            background-color: #f5f5f5;
+            color: #e83e8c;
+            padding: 0.2em 0.4em;
+            border-radius: 3px;
+            font-size: 85%;
+        }
+
+        pre {
+            background: #2d2d2d;
+            color: #f8f8f2;
+            padding: 12px 16px;
+            border-radius: 4px;
+            overflow-x: auto;
+
+            code {
+                background: none;
+                color: inherit;
+                padding: 0;
+                font-size: 100%;
+            }
+        }
+    }
 }
 
-.quill-editor .ql-snow .ql-fill,
-.ql-snow .ql-stroke.ql-fill {
-  fill: #C7C7C7;
+.tiptap-heading-select {
+    margin-right: 4px;
 }
 
-.has-success .ql-editor:after {
-  background-image: $icon-correct;
+// CKEditor 5 overrides
+.ck-editor {
+    border: 1px solid $mutedText;
+    border-radius: $border-radius;
+    overflow: hidden;
 }
 
-.has-danger .ql-editor:after {
-  background-image: $icon-error;
+.ck-editor__editable {
+    min-height: 200px;
 }

package/scss/styles/_auth.scss

@@ -1,94 +1,89 @@
-@use "../variables" as *;
-
 // Auth specific styles
 .auth {
     min-height: 100vh;
+
     .auth-header {
-        border-bottom: 1px solid #F2F5F9;
+        border-bottom: 1px solid #f2f5f9;
         padding: 30px;
     }
+
     .auth-body {
         padding: 30px;
     }
+
     .auth-title {
         text-transform: uppercase;
-        color: #333D5D;
+        color: #333d5d;
         font-size: 25px;
         font-weight: bold;
         margin-bottom: 15px;
     }
+
     .auth-subtitle {
         text-transform: uppercase;
         font-weight: bold;
-        color: #B9BBC6;
+        color: #b9bbc6;
         font-size: 12px;
         letter-spacing: 0;
         margin-bottom: 0;
     }
-    .card-body,
-    .card-block {
+
+    .card-body {
         padding: 0;
     }
-    .form-group {
-        margin-bottom: 1.7rem;
+
+    .mb-3 {
+        margin-bottom: 1.7rem !important;
+
         &:last-of-type {
-            margin-bottom: 0;
+            margin-bottom: 0 !important;
         }
     }
+
     label {
-        color: #9FA6B9;
+        color: #9fa6b9;
         text-transform: uppercase;
         font-weight: bold;
     }
+
     .form-control {
-        border-radius: 4px;
         padding: 1.3rem 0.75rem;
         border-color: $mutedText;
         height: 46px;
     }
+
     .input-group .form-control {
         border: 1px solid $mutedText;
         border-bottom-left-radius: 0;
         border-top-left-radius: 0;
         border-left: none;
     }
-    .has-danger .input-group .form-control {
+
+    .is-invalid ~ .form-control,
+    .input-group:has(.is-invalid) .form-control {
         border-color: $danger;
     }
-    .input-group-addon {
-        border-bottom-left-radius: 4px;
-        border-top-left-radius: 4px;
-        padding: 0.5rem 0.75rem;
-        margin-bottom: 0;
-        font-size: 0.875rem;
-        font-weight: normal;
-        line-height: 1.25;
-        color: #3e515b;
-        text-align: center;
-        border: 1px solid $mutedText;
-        border-radius: 0.25rem;
-        min-width: 40px;
-        white-space: nowrap;
-        vertical-align: middle;
+
+    .input-group-text {
+        border-color: $mutedText;
         border-right: 0;
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
     }
-    .form-control-danger {
-        border: 1px solid $danger;
-    }
-    .form-control-feedback {
+
+    .invalid-feedback {
         color: $danger;
         font-weight: 500;
     }
-    .btn-block {
+
+    .btn.w-100 {
         padding: 1rem;
         font-size: 16px;
     }
+
     .auth-ghost-link {
-        color: #9FA6B9;
+        color: #9fa6b9;
     }
+
     .alert {
         margin-bottom: 1.4rem;
     }
-}
+}

package/scss/styles/_custom.scss

@@ -1 +1,44 @@
-// Write your project specific styles here
+// Write your project specific styles here
+
+// Colored toggle switches
+.form-check-input.form-switch-success:checked {
+    background-color: var(--cui-success, #2eb85c);
+    border-color: var(--cui-success, #2eb85c);
+}
+
+.form-check-input.form-switch-danger:checked {
+    background-color: var(--cui-danger, #e55353);
+    border-color: var(--cui-danger, #e55353);
+}
+
+.form-check-input.form-switch-success,
+.form-check-input.form-switch-danger {
+    width: 2em;
+    height: 1.2em;
+    border-radius: 2em;
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%288, 10, 12, 0.25%29'/%3e%3c/svg%3e");
+    background-position: left center;
+    cursor: pointer;
+    transition: background-position 0.15s ease-in-out;
+
+    &:checked {
+        background-position: right center;
+        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.87%29'/%3e%3c/svg%3e");
+    }
+}
+
+.publish-later-backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 1049;
+}
+
+.publish-later-modal {
+    position: absolute;
+    z-index: 1050;
+    background: #fff;
+    border: 1px solid #dee2e6;
+    border-radius: 0.375rem;
+    box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%);
+    padding: 0.75rem;
+}

package/scss/styles/_index.scss

@@ -1,5 +1,5 @@
 // Our own styles
-@use "auth" as *;
-@use "others" as *;
-@use "custom" as *;
-@use "legacy" as *;
+@import 'auth';
+@import 'others';
+@import 'custom';
+@import 'legacy';

package/scss/styles/_legacy.scss

@@ -1,87 +1,11 @@
-.input-group-addon {
-  display: flex;
-  box-align: center;
-  align-items: center;
-  padding: 0.5rem 0.75rem;
-  margin-bottom: 0;
-  font-size: 0.875rem;
-  font-weight: 400;
-  line-height: 1.25;
-  color: #3e515b;
-  text-align: center;
-  border: 1px solid #c2cfd6;
-  min-width: 40px;
-  white-space: nowrap;
-  vertical-align: middle;
-  background-color: #fff;
-  border-bottom-left-radius: 0;
-  border-top-left-radius: 0;
-  &:last-child {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-  &:not(:last-child) {
-    border-right: 0;
-  }
-}
+// Legacy BS4 compatibility shims removed — all templates now use BS5 patterns
 
 .translation-listing .table td:last-of-type {
-  min-width: 0;
-}
-
-.card-block {
-  flex: 1 1 auto;
-  padding: 1.25rem;
+    min-width: 0;
 }
 
-.input-group .btn-group.input-group-btn {
-  display: flex;
-  margin-left: -1px;
-  white-space: nowrap;
-  vertical-align: middle;
-  & > .btn {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-    position: relative;
-    z-index: 2;
-  }
-}
-
-.switch {
-  .switch-label {
-    position: relative;
-    display: block;
-    height: inherit;
-    cursor: pointer;
-    border: 1px solid #c8ced3;
-    transition: 0.15s ease-out;
-    background-color: #f0f3f5;
-    border-radius: 50em;
-    width: 40px;
-    &:before {
-      position: absolute;
-      box-sizing: border-box;
-      content: '';
-      background-color: #fff;
-      transition: 0.15s ease-out;
-      top: -1px;
-      left: -1px;
-      width: 26px;
-      height: 26px;
-      border: 0;
-      border-radius: 50em;
-      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
-      transform: translateX(14px);
-      border-color: transparent;
+@media (width <= 700px) {
+    .input-group button {
+        font-size: 0.875rem !important;
     }
-  }
-  .switch-handle {
-    display: none;
-  }
-}
-
-@media (max-width: 700px) {
-  .input-group button {
-    font-size: 0.875rem !important;
-  }
 }