@dejwcake/craftable 0.1.10 → 2.0.1

package/scss/overrides/_checkboxes.scss

@@ -1,86 +1,81 @@
-@use "../variables" as *;
-
 /* Base for label styling */
-[type="checkbox"]:not(:checked),
-[type="checkbox"]:checked {
-  position: absolute;
-  left: -9999px;
+[type='checkbox']:not(:checked, [role='switch']),
+[type='checkbox']:checked:not([role='switch']) {
+    position: absolute;
+    left: -9999px;
 }
 
-[type="checkbox"]:not(:checked)+label,
-[type="checkbox"]:checked+label {
-  position: relative;
-  padding-left: 1.95em;
-  cursor: pointer;
+[type='checkbox']:not(:checked) + label,
+[type='checkbox']:checked + label {
+    position: relative;
+    padding-left: 1.95em;
+    cursor: pointer;
 }
 
 /* checkbox aspect */
-[type="checkbox"]:not(:checked)+label:before,
-[type="checkbox"]:checked+label:before {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 20px;
-  height: 20px;
-  border: 1px solid #C3CEDE;
-  background: white;
-  border-radius: 4px;
-  box-shadow: none;
+[type='checkbox']:not(:checked) + label::before,
+[type='checkbox']:checked + label::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 20px;
+    height: 20px;
+    border: 1px solid #c3cede;
+    background: white;
+    border-radius: 4px;
+    box-shadow: none;
 }
 
-
 /* checked mark aspect */
-[type="checkbox"]:not(:checked)+label:after,
-[type="checkbox"]:checked+label:after {
-  content: '';
-  position: absolute;
-  width: 10px;
-  height: 10px;
-  background-color: #4273FA;
-  top: 5px;
-  left: 5px;
-  border-radius: 3px;
-  color: #4273FA;
-  transition: all .2s;
+[type='checkbox']:not(:checked) + label::after,
+[type='checkbox']:checked + label::after {
+    content: '';
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    background-color: #4273fa;
+    top: 5px;
+    left: 5px;
+    border-radius: 3px;
+    color: #4273fa;
+    transition: all 0.2s;
 }
 
-
 /* checked mark aspect changes */
-[type="checkbox"]:not(:checked)+label:after {
-  opacity: 0;
-  transform: scale(0);
+[type='checkbox']:not(:checked) + label::after {
+    opacity: 0;
+    transform: scale(0);
 }
 
-[type="checkbox"]:checked+label:after {
-  opacity: 1;
-  transform: scale(1);
+[type='checkbox']:checked + label::after {
+    opacity: 1;
+    transform: scale(1);
 }
 
-
 /* disabled checkbox */
-[type="checkbox"]:disabled:not(:checked)+label:before,
-[type="checkbox"]:disabled:checked+label:before {
-  box-shadow: none;
-  border-color: #bbb;
-  background-color: #ddd;
+[type='checkbox']:disabled:not(:checked) + label::before,
+[type='checkbox']:disabled:checked + label::before {
+    box-shadow: none;
+    border-color: #bbb;
+    background-color: #ddd;
 }
 
-[type="checkbox"]:disabled:checked+label:after {
-  color: #999;
+[type='checkbox']:disabled:checked + label::after {
+    color: #999;
 }
 
-[type="checkbox"]:disabled+label {
-  color: #aaa;
+[type='checkbox']:disabled + label {
+    color: #aaa;
 }
 
 /* accessibility */
-[type="checkbox"]:checked:focus+label:before,
-[type="checkbox"]:not(:checked):focus+label:before {
-  //border: 1px solid $primary;
+[type='checkbox']:checked:focus + label::before,
+[type='checkbox']:not(:checked):focus + label::before {
+    // border: 1px solid $primary;
 }
 
 /* hover style just for information */
-label:hover:before {
-  border: 1px solid $primary!important;
-}
+label:hover::before {
+    border: 1px solid $primary !important;
+}

package/scss/overrides/_forms.scss

@@ -1,234 +1,328 @@
-@use "../variables" as *;
-@use "../images" as *;
+// Datepicker compatibility
+.dp__input {
+    background-color: white;
+}
 
-.form-control.flatpickr {
-  background-color: white;
+// Datepicker inside input-group: zero left radius (prepend icon), keep right radius
+.input-group .dp__input {
+    border-radius: 0 $border-radius $border-radius 0;
 }
 
 .form-control {
-  border: 1px solid $mutedText;
-  border-radius: 0;
-  padding-right: 2.2rem !important;
-  background-repeat: no-repeat;
-  background-position: center right 0.52344rem;
-  background-size: 1.04688rem 1.04688rem;
-  &:focus {
     border: 1px solid $mutedText;
-  }
-}
+    padding-right: 2.2rem !important;
+    background-repeat: no-repeat;
+    background-position: center right 0.52344rem;
+    background-size: 1.04688rem 1.04688rem;
 
-.has-success .form-control {
-  background-image: $icon-correct;
+    &:focus {
+        border: 1px solid $mutedText;
+    }
 }
 
-.has-danger .form-control {
-  background-image: $icon-error;
-  border-color: $danger;
-}
+// BS5 validation (class on input pattern)
+.form-control.is-valid {
+    background-image: $icon-correct;
+    border-color: $mutedText;
 
-.has-danger .form-control-feedback {
-  color: $danger;
-  font-weight: 500;
+    &:focus {
+        border-color: $mutedText;
+        box-shadow: none;
+    }
 }
 
-label {
-  color: $mutedText;
+.form-control.is-invalid {
+    background-image: $icon-error;
+    border-color: $danger;
+
+    &:focus {
+        border-color: $danger;
+        box-shadow: none;
+    }
 }
 
-.form-check-label {
-  color: #3e515b;
+.invalid-feedback {
+    color: $danger;
+    font-weight: 500;
 }
 
-.input-group--custom {
-  .input-group-addon {
-    background-color: white;
-    border-bottom-left-radius: 0;
-    border-top-left-radius: 0;
-    i.fa {
-      color: #c7c7c7;
-    }
-  }
-  .form-control {
-    border-left: none;
-    padding-left: 0;
-  }
+label {
+    color: $mutedText;
 }
 
-.has-danger .input-group--custom {
-  .input-group-addon {
-    border-color: $danger;
-  }
+.form-check-label {
+    color: #3e515b;
+    margin-bottom: 0.5rem;
 }
 
 .input-icon {
-  display: inline-block;
-  background-size: contain;
-  background-repeat: no-repeat;
-  background-position: center;
-  width: 15px;
-  height: 25px;
+    display: inline-block;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+    width: 15px;
+    height: 25px;
 }
 
 .input-icon--mail {
-  width: 20px;
-  background-image: $icon-envelope;
+    width: 20px;
+    background-image: $icon-envelope;
 }
 
 .input-icon--lock {
-  margin: 0 3px;
-  background-image: $icon-lock;
+    margin: 0 3px;
+    background-image: $icon-lock;
 }
 
 .form-control::placeholder {
-  color: $mutedText;
+    color: $mutedText;
 }
 
-.form-check-label {
-  margin-bottom: 0.5rem;
-}
-
-.flatpickr-day.selected,
-.flatpickr-day.startRange,
-.flatpickr-day.endRange,
-.flatpickr-day.selected.inRange,
-.flatpickr-day.startRange.inRange,
-.flatpickr-day.endRange.inRange,
-.flatpickr-day.selected:focus,
-.flatpickr-day.startRange:focus,
-.flatpickr-day.endRange:focus,
-.flatpickr-day.selected:hover,
-.flatpickr-day.startRange:hover,
-.flatpickr-day.endRange:hover,
-.flatpickr-day.selected.prevMonthDay,
-.flatpickr-day.startRange.prevMonthDay,
-.flatpickr-day.endRange.prevMonthDay,
-.flatpickr-day.selected.nextMonthDay,
-.flatpickr-day.startRange.nextMonthDay,
-.flatpickr-day.endRange.nextMonthDay {
-  background: $primary !important;
-  border-color: $primary !important;
+.form-check {
+    padding-inline-start: 0;
 }
 
-small select {
-  margin: 0 10px;
+// Vue Datepicker (@vuepic/vue-datepicker) theme
+.dp__active_date {
+    background: $primary !important;
+    border-color: $primary !important;
 }
 
-.vue-dropzone.dropzone {
-  border: 1px solid $mutedText !important;
-  &:hover, &.dz-drag-hover {
-    border: 1px dashed $primary !important;
-  }
+.dp__range_start,
+.dp__range_end {
+    background: $primary !important;
+    border-color: $primary !important;
+}
 
-  i {
-    color: #c7c7c7 !important;
-    font-size: 40px !important;
-    margin-bottom: 10px;
-  }
+.dp__today {
+    border-color: $primary !important;
+}
 
-  .dz-message {
-    color: $mutedText !important;
-  }
+.base-upload {
+    margin-bottom: 1rem;
+}
 
-  //fixes https://github.com/rowanwins/vue-dropzone/issues/127
-  .dz-error-message {
-    top: calc(100% + 10px) !important;
-    left: calc(50% - 70px) !important;
-  }
+.upload-label-title {
+    color: $primary;
+}
 
-  .dz-preview {
-    .dz-image {
-      width: 200px !important;
-      height: 200px !important;
+small select {
+    margin: 0 10px;
+}
 
-      img {
-        width: 100%;
-        height: 100%;
-        -webkit-object-fit: cover;
-        object-fit: cover;
-      }
+.dropzone,
+.vue3-dropzone {
+    border: 2px dashed #b8c4ce !important;
+    border-radius: $border-radius;
+    min-height: 200px;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    align-content: flex-start;
 
-      i {
-        width: 100%;
-        height: 100%;
-        line-height: 200px;
-        font-size: 70px !important;
-        text-align: center;
+    &:hover,
+    &.dz-drag-hover {
+        border: 2px dashed $primary !important;
+    }
+
+    i {
+        color: #c7c7c7 !important;
+        font-size: 40px !important;
         margin-bottom: 10px;
+    }
 
-        &+p {
-          position: absolute;
-          bottom: 0px;
-          width: 100%;
-          text-align: center;
-          height: 20px;
-          overflow: hidden;
-          white-space: nowrap;
-          text-overflow: ellipsis;
-          font-size: 12px;
-          line-height: 1.2;
-          padding: 0 15px;
-        }
-      }
+    .dz-message {
+        width: 100%;
+        min-height: 180px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        color: $mutedText !important;
     }
 
-    .dz-details {
-      .dz-filename {
-        a {
-          cursor: pointer;
-          color:white;
-        }
-      }
+    // fixes https://github.com/rowanwins/vue-dropzone/issues/127
+    .dz-error-message {
+        top: calc(100% + 10px) !important;
+        left: calc(50% - 70px) !important;
     }
 
-    //fixes https://github.com/rowanwins/vue-dropzone/issues/127
-    .dz-error-mark {
-      text-align: center;
-      top: 25%!important;
+    .dz-preview {
+        position: relative;
+        width: 200px;
+        height: 200px;
+        overflow: hidden;
+        margin: 8px;
+
+        &.dz-deleted {
+            display: none;
+        }
+
+        .dz-image {
+            width: 200px !important;
+            height: 200px !important;
+
+            img {
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+            }
+
+            .dz-file-icon {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+                width: 100%;
+                height: 100%;
+                background: #f0f3f5;
+
+                i {
+                    font-size: 60px !important;
+                    color: #b8c4ce !important;
+                    margin-bottom: 8px;
+                    line-height: 1;
+                }
+
+                p {
+                    width: 100%;
+                    text-align: center;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                    font-size: 12px;
+                    line-height: 1.2;
+                    padding: 0 12px;
+                    margin: 0;
+                    color: $mutedText;
+                }
+            }
+        }
+
+        .dz-hover-overlay {
+            position: absolute;
+            inset: 0;
+            background: rgba($primary, 0.85);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            padding: 16px;
+            opacity: 0;
+            transition: opacity 0.2s ease;
+
+            .dz-file-size {
+                color: white;
+                font-weight: 700;
+                font-size: 16px;
+                margin-bottom: 8px;
+            }
+
+            .dz-file-name {
+                color: white;
+                font-size: 13px;
+                text-align: center;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                width: 100%;
+                margin-bottom: 16px;
+            }
+
+            .dz-remove-btn {
+                background: transparent;
+                color: white;
+                border: 2px solid white;
+                padding: 6px 20px;
+                font-size: 13px;
+                font-weight: 700;
+                letter-spacing: 0.5px;
+                cursor: pointer;
+                transition:
+                    background 0.15s ease,
+                    color 0.15s ease;
+
+                &:hover {
+                    background: white;
+                    color: $primary;
+                }
+            }
+        }
+
+        &:hover .dz-hover-overlay {
+            opacity: 1;
+        }
+
+        .dz-success-mark,
+        .dz-error-mark {
+            position: absolute;
+            inset: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            animation: dz-fade-in 0.3s ease;
+
+            i {
+                color: white !important;
+                font-size: 50px !important;
+                animation: dz-check-pop 0.4s ease;
+                margin-bottom: 0;
+            }
+        }
+
+        .dz-success-mark {
+            background: rgb(40 167 69 / 60%);
+        }
+
+        .dz-error-mark {
+            background: rgb(220 53 69 / 70%);
+        }
+
+        .dz-progress {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            height: 6px;
+            background: rgb(0 0 0 / 20%);
+
+            .dz-upload {
+                display: block;
+                height: 100%;
+                background: white;
+                transition: width 0.2s ease;
+            }
+        }
     }
-  }
 }
 
 .language-mobile {
-  select {
-    margin-left: 0;
-    margin-top: 5px;
-    margin-bottom: 25px;
-  }
-  span, a {
-    display: none;
-  }
-  &.has-error {
-    small {
-      color: $danger;
+    select {
+        margin-left: 0;
+        margin-top: 5px;
+        margin-bottom: 25px;
     }
-  }
-}
 
-@media (max-width: 700px) {
-  select,
-  textarea,
-  input,
-  .ql-editor,
-  .input-group button {
-    font-size: 16px !important;
-  }
+    span,
+    a {
+        display: none;
+    }
 }
 
-
-@media (min-width: 576px) {
-  .control-label {
-    margin-top: 7px;
-  }
-  .language-mobile {
-    select {
-      margin: 0;
-      margin-left: 10px;
+@media (width <= 700px) {
+    select,
+    textarea,
+    input,
+    .input-group button {
+        font-size: 16px !important;
     }
-  }
 }
 
-@media (max-width: 500px) {
-  .input-group-btn--search-filter {
-    display: none;
-  }
-}
+@media (width >= 576px) {
+    .language-mobile {
+        select {
+            margin: 0;
+            margin-left: 10px;
+        }
+    }
+}

package/scss/overrides/_index.scss

@@ -1,19 +1,19 @@
 // All styles we are overriding (mostly CoreUI)
-@use "keyframes" as *;
-@use "buttons" as *;
-@use "checkboxes" as *;
-@use "forms" as *;
-@use "multiselect" as *;
-@use "switches" as *;
-@use "wysiwyg" as *;
-@use "cards" as *;
-@use "nav" as *;
-@use "tables" as *;
-@use "modal" as *;
-@use "pagination" as *;
-@use "badges" as *;
-@use "layout" as *;
-@use "text" as *;
-@use "alerts" as *;
-@use "notifications" as *;
-@use "media-wysiwyg" as *;
+@import 'keyframes';
+@import 'buttons';
+@import 'checkboxes';
+@import 'forms';
+@import 'multiselect';
+@import 'wysiwyg';
+@import 'cards';
+@import 'nav';
+@import 'sidebar';
+@import 'tables';
+@import 'modal';
+@import 'pagination';
+@import 'badges';
+@import 'layout';
+@import 'text';
+@import 'alerts';
+@import 'notifications';
+@import 'media-wysiwyg';