@dejwcake/craftable 0.1.9 → 2.0.0

package/scss/overrides/_keyframes.scss

@@ -1,5 +1,3 @@
-@use "../variables" as *;
-
 @keyframes spin {
     100% {
         transform: rotate(360deg);
@@ -10,16 +8,20 @@
     20% {
         transform: rotate3d(0, 0, 1, 15deg);
     }
+
     40% {
         transform: rotate3d(0, 0, 1, -10deg);
     }
+
     60% {
         transform: rotate3d(0, 0, 1, 5deg);
     }
+
     80% {
         transform: rotate3d(0, 0, 1, -5deg);
     }
-    to {
+
+    100% {
         transform: rotate3d(0, 0, 1, 0deg);
     }
-}
+}

package/scss/overrides/_layout.scss

@@ -1,49 +1,43 @@
-@use "../variables" as *;
-
 body {
-  background-color: #F5F8FF;
+    background-color: #f5f8ff;
 }
 
-main.main {
-  margin-top: 1.5rem;
+.body {
+    margin-top: 1.5rem;
 }
 
 [v-cloak] {
-  display: none;
+    display: none;
 }
 
-.app-footer {
-  background: none;
-  border: none;
-  color: #7e878c;
-  font-size: 13px;
-  margin-top: -1.5rem;
-  a {
-    color: $primary;
-  }
-}
+.footer {
+    background: none;
+    border: none;
+    color: #7e878c;
+    font-size: 13px;
 
-.hidden {
-  display: none;
+    a {
+        color: $primary;
+    }
 }
 
-.hidden-xs-up {
-  display: none;
+.hidden {
+    display: none;
 }
 
 .width-auto {
-  width: auto;
+    width: auto;
 }
 
 .breadcrumb {
-  display: none;
+    display: none;
 }
 
-@media (min-width: 1200px) {
-  .container-xl {
-    margin-right: auto;
-    margin-left: auto;
-    width: 1140px;
-    max-width: 100%;
-  }
-}
+@media (width >= 1200px) {
+    .container-xl {
+        margin-right: auto;
+        margin-left: auto;
+        width: 1140px;
+        max-width: 100%;
+    }
+}

package/scss/overrides/_media-wysiwyg.scss

@@ -1,114 +1,12 @@
-@use "../variables" as *;
-@use "../images" as *;
-
-// Write (or import) your styles here
-.trumbowyg-editor table.table td {
-  min-width: unset;
-  display: table-cell;
-}
-
-div.trumbowyg-button-pane {
-  background: #ffffff;
-  border-bottom: 1px solid $mutedText;
-  .trumbowyg-button-group::after {
-    background: rgba(0, 0, 0, 0);
-  }
-}
-div.trumbowyg-box {
-  border: 1px solid $mutedText;
-  &:after {
-    content: '';
-    background-size: contain;
-    background-repeat: no-repeat;
-    width: 18px;
-    height: 18px;
-    position: absolute;
-    right: 10px;
-    top: 45px;
-    background-position: center;
-  }
-}
-
-div.trumbowyg-modal-box {
-  .trumbowyg-modal-button {
-    border-radius: 4px;
-    &.trumbowyg-modal-submit {
-      background: $success;
-      &:hover, &:focus {
-        background: darken($success, 10);
-      }
-      &:before {
-        content: '\f00c';
-        font-family: FontAwesome;
-        padding-right: 5px;
-        font-size: 14px;
-      }
-    }
-    &.trumbowyg-modal-reset {
-      background: #fbfbfb;
-      &:hover, &:focus {
-        background: #e6e6e6;
-      }
-      &:before {
-        content: '\f00d';
-        font-family: FontAwesome;
-        padding-right: 5px;
-        font-size: 14px;
-      }
-    }
-
-  }
-  label {
-    overflow: visible;
-    .trumbowyg-input-infos span {
-      color: #555;
-      background: white;
-      border: none;
-    }
-    input {
-      border: 1px solid $mutedText;
-      &:hover, &:focus {
-        border: 1px solid $mutedText;
-        background: white;
-      }
-      &[type="file"] {
-        height: 38px;
-        padding-top: 2px;
-        padding-left: 2px;
-      }
-    }
-  }
-  .trumbowyg-modal-title {
-    background: white;
-  }
-
+// Tiptap media wysiwyg overrides
+.tiptap-editor table.table td {
+    min-width: unset;
+    display: table-cell;
 }
 
-div.trumbowyg-dropdown button:hover, .trumbowyg-dropdown button:focus {
-  background: rgba(185, 200, 222, 0.18);
+.tiptap-image {
+    max-width: 100%;
+    height: auto;
+    display: block;
+    margin: 0.5em 0;
 }
-
-div.trumbowyg-dropdown-table table td.active {
-  background-color: $success;
-}
-
-.has-danger {
-  div.trumbowyg-box {
-    border: 1px solid $danger;
-    &:after {
-      background-image: $icon-error;
-    }
-  }
-}
-
-.has-success {
-  div.trumbowyg-box {
-    &:after {
-      background-image: $icon-correct;
-    }
-  }
-}
-
-.wysiwyg-noembed iframe {
-  pointer-events: none;
-}

package/scss/overrides/_modal.scss

@@ -1,18 +1,4 @@
-.v--modal-overlay {
-    z-index: 9999 !important;
-    background-color: rgba(0, 0, 0, .4) !important;
-}
-
-.v--modal-overlay .v--modal-box {
-    box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
-}
-
-.modal--translation .v--modal-box {
-    padding: 20px 30px 30px 30px;
-}
-
 .modal-title {
-    margin-bottom: 20px;
     text-align: center;
 }
 
@@ -20,7 +6,3 @@
     margin-top: 30px;
     padding: 10px 0;
 }
-
-.loading .v--modal-overlay {
-    display: none;
-}

package/scss/overrides/_multiselect.scss

@@ -1,6 +1,4 @@
-@use "../variables" as *;
-
-.multiselect__tag-icon:after {
+.multiselect__tag-icon::after {
     color: white !important;
 }
 
@@ -18,13 +16,14 @@
 }
 
 .multiselect__tags {
-    border-radius: 0 !important;
+    border-radius: $border-radius !important;
     border-color: $mutedText !important;
 }
 
 .multiselect__option--highlight {
     background: $success !important;
-    &:after {
+
+    &::after {
         background: $success !important;
     }
 }
@@ -35,7 +34,64 @@
 
 .multiselect__option--selected.multiselect__option--highlight {
     background: $danger !important;
-    &:after {
+
+    &::after {
         background: $danger !important;
     }
-}
+}
+
+.multiselect.is-invalid .multiselect__tags {
+    border-color: $danger !important;
+}
+
+// Multiselect as input-group prepend (e.g. translation group filter)
+.multiselect--input-group-prepend {
+    width: auto !important;
+    min-width: 180px;
+    flex: 0 0 auto;
+    box-sizing: border-box !important;
+
+    // Let align-items: stretch from .input-group size this element
+    align-self: stretch;
+
+    .multiselect__tags {
+        height: 100% !important;
+        min-height: 0 !important;
+        padding: 0.375rem 2rem 0.375rem 0.75rem !important;
+        border-radius: var(--cui-border-radius) 0 0 var(--cui-border-radius) !important;
+        margin-right: -1px;
+        display: flex;
+        align-items: center;
+    }
+
+    .multiselect__placeholder,
+    .multiselect__single {
+        margin: 0 !important;
+        padding: 0 !important;
+        font-size: 1rem;
+        line-height: 1.5;
+        color: $mutedText;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .multiselect__single {
+        color: var(--cui-body-color);
+    }
+
+    .multiselect__select {
+        height: 100% !important;
+        top: 0 !important;
+    }
+
+    .multiselect__content-wrapper {
+        min-width: 100%;
+    }
+
+    .multiselect__input {
+        margin: 0 !important;
+        padding: 0 !important;
+        font-size: 1rem;
+    }
+}

package/scss/overrides/_nav.scss

@@ -1,27 +1,55 @@
-@use "../variables" as *;
-
-.header-fixed .app-header {
-    padding-right: 20px;
+.header {
+    padding: 0 20px 0 0;
+    border-bottom: 1px solid #e4e7ea;
+    margin-bottom: 0;
 }
 
-.nav .dropdown-menu {
-    border-radius: 0;
-    margin-top: 13px;
+.header-toggler {
+    background: none;
+    border: none;
+    color: var(--cui-header-color);
+    cursor: pointer;
+    padding: 0.25rem 0.75rem;
+    font-size: 1.25rem;
 }
 
-.dropdown-menu {
+.dropdown .dropdown-menu {
+    display: block;
     border: none;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, .23);
+    border-radius: $border-radius;
+    padding: 0;
+    margin-top: -3px;
+    right: 0;
+    left: auto;
+    box-shadow: 0 2px 8px rgb(0 0 0 / 23%);
+    opacity: 0;
+    visibility: hidden;
+    transition:
+        opacity 200ms ease-in-out,
+        visibility 200ms ease-in-out;
 }
 
 .dropdown-header {
     background: $primary;
     color: white;
     border-bottom: none;
+    padding: 0.5rem 1.25rem;
+    font-size: 0.875rem;
 }
 
 .dropdown-item {
-    border-bottom: 1px solid #F0F2F4;
+    border-bottom: 1px solid #f0f2f4;
+    padding: 0.5rem 1.25rem;
+    font-size: 0.875rem;
+
+    i {
+        color: #c8ced3;
+        display: inline-block;
+        margin-left: -10px;
+        margin-right: 10px;
+        text-align: center;
+        width: 20px;
+    }
 }
 
 .dropdown-item.active,
@@ -31,9 +59,9 @@
     background-color: white;
 }
 
-.app-header.navbar .navbar-brand {
+.header .navbar-brand {
     padding: 0.5rem 1rem;
-    color: #4273fa;
+    color: $primary;
     font-weight: 600;
     display: inline;
     width: auto;
@@ -41,49 +69,43 @@
     margin-right: 1rem;
     background: none !important;
     border: none;
+
     img {
         max-width: 200px;
         max-height: 20px;
     }
 }
 
+.header-nav .nav-link {
+    font-size: 0.875rem;
+    color: #263238;
+}
+
 .dropdown-toggle {
     box-shadow: none !important;
+
     &:hover {
         cursor: pointer;
     }
 }
 
-.dropdown .dropdown-menu {
-    display: block;
-    transition: all 300ms ease-in-out;
-    opacity: 0;
-    pointer-events: none;
-    transform: translateY(5px);
-}
-
-.open .dropdown-menu {
-    display: block;
+.dropdown-menu.show {
     opacity: 1;
-    pointer-events: all;
-    transform: translateY(-5px);
-}
-
-.app-header.navbar {
-    border-bottom: 1px solid #D6DEE3;
+    visibility: visible;
 }
 
-@media (max-width: 991px) {
-    .app-header .navbar-brand {
+@media (width <= 991px) {
+    .header .navbar-brand {
         text-align: center;
     }
+
     .avatar-initials {
         display: none;
     }
 }
 
-@media (max-width: 600px) {
-    .app-header.navbar .navbar-brand {
+@media (width <= 600px) {
+    .header .navbar-brand {
         display: none;
     }
-}
+}

package/scss/overrides/_notifications.scss

@@ -4,4 +4,9 @@
 
 .vue-notification {
     box-shadow: 0 0 12px #999;
-}
+}
+
+// vue3-notification compatibility
+.vue-notification-group {
+    margin: 10px;
+}

package/scss/overrides/_pagination.scss

@@ -1,5 +1,3 @@
-@use "../variables" as *;
-
 .pagination {
     margin-bottom: 28px;
 }
@@ -22,18 +20,20 @@
 .pagination li.active a {
     background-color: $primary;
     border-color: $primary;
+
     &:hover {
         color: white;
     }
 }
 
-@media (max-width: 575px) {
+@media (width <= 575px) {
     .pagination-caption {
         display: block;
         text-align: center;
         margin-bottom: 20px;
         top: 0;
     }
+
     .pagination {
         justify-content: center;
     }

package/scss/overrides/_sidebar.scss

@@ -0,0 +1,84 @@
+.sidebar {
+    --cui-sidebar-bg: #{$sidebar-bg};
+    --cui-sidebar-border-color: transparent;
+    --cui-sidebar-toggler-color: #fff;
+    --cui-sidebar-toggler-hover-color: #fff;
+
+    border-right-color: transparent !important;
+}
+
+.sidebar-toggler {
+    --cui-sidebar-toggler-color: #fff;
+    --cui-sidebar-toggler-hover-color: #fff;
+    --cui-sidebar-toggler-focus-color: #fff;
+}
+
+.sidebar-nav {
+    --cui-sidebar-nav-link-color: #fff;
+    --cui-sidebar-nav-link-icon-color: #{$mutedText};
+    --cui-sidebar-nav-title-color: rgb(255 255 255 / 45%);
+    --cui-sidebar-nav-link-hover-bg: #{$primary};
+    --cui-sidebar-nav-link-hover-color: #fff;
+    --cui-sidebar-nav-link-hover-icon-color: #fff;
+    --cui-sidebar-nav-link-active-bg: #{$sidebar-nav-link-active-bg};
+    --cui-sidebar-nav-link-active-color: #{$sidebar-nav-link-active-color};
+    --cui-sidebar-nav-link-active-icon-color: #{$sidebar-nav-link-active-icon-color};
+    --cui-sidebar-nav-link-border-radius: 0;
+    --cui-sidebar-nav-link-padding-x: 0;
+    --cui-sidebar-nav-padding-x: 0;
+
+    padding: 0;
+}
+
+// Wrapper should be pushed by sidebar width
+.wrapper {
+    margin-left: var(--cui-sidebar-occupy-start, 0);
+    transition: margin-left 0.15s;
+}
+
+// When sidebar is narrow-unfoldable (not hovered), push wrapper by narrow width
+@media (width >= 992px) {
+    .sidebar.sidebar-narrow-unfoldable:not(.hide, .sidebar-end) ~ .wrapper {
+        --cui-sidebar-occupy-start: 4rem;
+    }
+}
+
+.sidebar-nav .nav-link {
+    padding: 0.75rem 1rem;
+    border-radius: 0;
+    margin: 0;
+}
+
+.sidebar-nav .nav-title {
+    padding: 0.75rem 1rem 0.25rem;
+    font-size: 0.7rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    font-weight: 600;
+}
+
+.sidebar-nav .nav-icon {
+    margin-right: 0.75rem;
+    font-size: 1.1rem;
+    text-align: center;
+}
+
+// In narrow mode, icon should fill the width to hide text and center
+@media (width >= 992px) {
+    .sidebar-narrow .sidebar-nav .nav-link,
+    .sidebar-narrow-unfoldable:not(:hover) .sidebar-nav .nav-link {
+        padding-left: 0;
+        padding-right: 0;
+    }
+
+    .sidebar-narrow .sidebar-nav .nav-icon,
+    .sidebar-narrow-unfoldable:not(:hover) .sidebar-nav .nav-icon {
+        flex: 0 0 var(--cui-sidebar-narrow-width, 4rem);
+        margin-right: 0;
+    }
+}
+
+.sidebar-footer {
+    background: rgb(0 0 0 / 10%);
+    border-top-color: rgb(255 255 255 / 10%) !important;
+}