@dejwcake/craftable 0.1.9 → 2.0.0

package/scss/styles/_others.scss

@@ -1,18 +1,18 @@
-@use "../variables" as *;
-@use "../images" as *;
-
 // Uncategorised styles, will refactor if it gets bigger
 .avatar-initials {
     background-color: $primary;
     color: white;
-    display: inline-block;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
     margin: 0 10px;
     letter-spacing: 0;
     width: 35px;
+    min-width: 35px;
     height: 35px;
-    line-height: 35px;
-    border-radius: 100%;
+    border-radius: 50%;
     text-align: center;
+    flex-shrink: 0;
 }
 
 .no-items-found {
@@ -21,16 +21,19 @@
     align-items: center;
     justify-content: center;
     padding: 50px 0;
-    &>i {
-        color: rgba(0, 0, 0, 0.2);
+
+    & > i {
+        color: rgb(0 0 0 / 20%);
         margin-bottom: 30px;
         font-size: 70px;
     }
+
     h3 {
         font-size: 15px;
         font-weight: 600;
         text-align: center;
     }
+
     p {
         color: #7e8990;
         font-weight: 500;
@@ -44,6 +47,7 @@
     align-items: center;
     height: calc(100vh - 200px);
     min-height: 200px;
+
     blockquote {
         font-family: Georgia, serif;
         font-size: 25px;
@@ -55,23 +59,26 @@
         position: relative;
         color: #383838;
     }
-    blockquote:before {
+
+    blockquote::before {
         display: block;
-        content: "\201C";
+        content: '\201C';
         font-size: 89px;
         position: absolute;
         left: -15px;
         top: -20px;
         color: #7a7a7a;
     }
+
     blockquote cite {
-        color: #999999;
+        color: #999;
         font-size: 18px;
         display: block;
         margin-top: 10px;
     }
-    blockquote cite:before {
-        content: "\2014 \2009";
+
+    blockquote cite::before {
+        content: '\2014 \2009';
     }
 }
 
@@ -90,68 +97,162 @@
 
 .avatar-upload {
     display: inline-block;
-    .vue-dropzone.dropzone {
+
+    .base-upload {
+        margin-bottom: 0;
+    }
+
+    .form-label {
+        display: none !important;
+    }
+
+    .vue3-dropzone.dropzone {
         position: relative;
         width: 200px;
         height: 200px;
+        min-height: 200px;
         border-radius: 200px;
-        background: #B0C4DA;
+        background: #b0c4da;
         color: white;
         overflow: hidden;
+        border: none !important;
+        align-items: center;
+        justify-content: center;
 
         &:hover {
-            background-color: #4273FA;
-        }
+            border: none !important;
 
+            .dz-message {
+                background-color: #4273fa;
+            }
+        }
 
         .dz-preview {
             position: absolute;
             top: 0;
             left: 0;
             margin: 0;
+            width: 100%;
+            height: 100%;
+            border-radius: 200px;
 
-            .dz-image img + p {
-                display: none;
+            .dz-image {
+                width: 100% !important;
+                height: 100% !important;
+                border-radius: 200px;
             }
-        }
 
-        .dz-details {
-            .dz-size, .dz-filename{
-                display: none !important;
+            .dz-hover-overlay {
+                border-radius: 200px;
+
+                .dz-file-size,
+                .dz-file-name {
+                    display: none;
+                }
+
+                .dz-remove-btn {
+                    margin-bottom: 0;
+                }
             }
-        }
 
-        .dz-error-message {
-            display: none !important;
-        }
+            .dz-success-mark,
+            .dz-error-mark {
+                position: absolute;
+                inset: 0;
+                border-radius: 200px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                animation: dz-fade-in 0.3s ease;
+
+                i {
+                    color: white !important;
+                    font-size: 60px !important;
+                    animation: dz-check-pop 0.4s ease;
+                }
+            }
+
+            .dz-success-mark {
+                background: rgb(40 167 69 / 60%);
+            }
 
-        .dz-error-mark {
-            top: 20% !important;
+            .dz-error-mark {
+                background: rgb(220 53 69 / 70%);
+                top: 0 !important;
+            }
         }
 
-        .dz-remove {
-            width: 60% !important;
-            height: 40px !important;
-            bottom: 40px !important;
-            top: auto !important;
-            left: 20% !important;
-            right: 20% !important;
-            margin: 0 !important;
+        .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;
+            }
         }
 
-        .dz-message,.dz-message * {
+        .dz-message {
+            width: 100%;
+            height: 100%;
+            padding: 20px;
+            text-align: center;
             color: white;
             font-weight: bold;
-            font-size: 14px;
-            line-height: 1.2;
-        }
+            font-size: 20px;
+            line-height: 1.3;
+            background: #b0c4da;
+            border-radius: 200px;
+            transition: background-color 0.2s ease;
+            min-height: unset;
+
+            i {
+                font-size: 50px !important;
+                margin-bottom: 10px;
+                display: block;
+                color: white !important;
+            }
 
-        i {
-            color: white !important;
+            p {
+                margin: 0;
+                color: white;
+            }
         }
     }
 }
 
+@keyframes dz-fade-in {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes dz-check-pop {
+    0% {
+        transform: scale(0);
+        opacity: 0;
+    }
+
+    50% {
+        transform: scale(1.2);
+    }
+
+    100% {
+        transform: scale(1);
+        opacity: 1;
+    }
+}
+
 .avatar-photo {
     display: inline-block;
     width: 35px;
@@ -172,12 +273,9 @@
     position: relative;
 }
 
-.file-field input[type=file] {
+.file-field input[type='file'] {
     position: absolute;
-    top: 0;
-    right: 0;
-    left: 0;
-    bottom: 0;
+    inset: 0;
     width: 100%;
     margin: 0;
     padding: 0;
@@ -193,7 +291,7 @@
 }
 
 .file-field span {
-    line-height: 2.0;
+    line-height: 2;
 }
 
 .form-check-label {
@@ -234,7 +332,6 @@
     .dropdown-item-label {
         display: block;
         width: 100%;
-
         clear: both;
         font-weight: normal;
         color: #151b1e;
@@ -242,21 +339,21 @@
         white-space: nowrap;
         background: none;
         border: 0;
-
         position: relative;
-        border-bottom: 1px solid #F0F2F4;
+        border-bottom: 1px solid #f0f2f4;
+
         label {
             width: 100%;
             padding: 10px 20px;
             padding-left: 40px;
             margin: 0;
 
-            &:before {
+            &::before {
                 left: 10px;
                 top: 10px;
             }
 
-            &:after {
+            &::after {
                 top: 15px;
                 left: 15px;
             }
@@ -270,318 +367,113 @@
     }
 }
 
-@media (max-width: 991px) {
+@media (width <= 991px) {
     .avatar-initials {
         display: none;
     }
 }
 
-@media (max-width: 450px) {
+@media (width <= 450px) {
     .no-items-found {
         padding: 10px 0;
     }
 }
 
-.user-avatar, .user-info{
-	display: inline-block;
-	vertical-align: middle;
+// User detail tooltip trigger
+.avatar-trigger-text {
+    display: inline-block;
+    vertical-align: middle;
+    margin-left: 5px;
+    line-height: 1.3;
 }
 
 .avatar-full-name {
-	display: inline-block;
-	vertical-align: middle;
-	margin-left: 5px;
-}
-
-.user-avatar {
-	width: 75px;
-    height: 75px;
-    text-align: center;
-
-    img, .avatar-initials {
-		margin: 0;
-		width: 100%;
-		height: 100%;
-	}
-
-    img {
-		border-radius: 75px;
-	}
-
-    .avatar-initials {
-		line-height: 75px;
-		text-align: center;
-		font-size: 2rem;
-	}
+    display: block;
 }
 
-.user-info {
-	text-align: left;
-	margin: 0 5px;
+// User detail popper content
+.user-detail-popper {
+    background: #f9f9f9;
+    border: 1px solid #e0e0e0;
+    border-radius: 6px;
+    padding: 16px 20px;
+    box-shadow: 0 4px 20px rgba(black, 0.1);
 
-    h3 {
-		font-size: 1.3rem;
-		color: #536c79;
-		margin: 0;
-		padding:0;
-		line-height: 1.2;
-	}
-
-    a {
-		display: block;
-		margin: 0;
-		font-size: 0.8rem;
-		line-height: 1.2;
-	}
+    .user-avatar {
+        width: 75px;
+        height: 75px;
+        flex-shrink: 0;
 
-    p {
-		color: #536c79;
-		font-size: 0.8rem;
-		margin: 5px 0 0 0;
-	}
-}
-.tooltip {
-	display: block !important;
-	z-index: 10000;
-    max-width: 800px;
-
-    .tooltip-inner {
-		background: black;
-		color: white;
-		border-radius: 16px;
-		padding: 5px 10px 4px;
-        max-width: 800px;
-	}
-
-    .tooltip-arrow {
-		width: 0;
-		height: 0;
-		border-style: solid;
-		position: absolute;
-		margin: 5px;
-		border-color: black;
-		z-index: 1;
-	}
-
-    &[x-placement^="top"] {
-	    margin-bottom: 5px;
-
-        .tooltip-arrow {
-            border-width: 5px 5px 0 5px;
-            border-left-color: transparent !important;
-            border-right-color: transparent !important;
-            border-bottom-color: transparent !important;
-            bottom: -5px;
-            left: calc(50% - 5px);
-            margin-top: 0;
-            margin-bottom: 0;
-        }
-	}
-
-    &[x-placement^="bottom"] {
-	    margin-top: 5px;
-
-        .tooltip-arrow {
-            border-width: 0 5px 5px 5px;
-            border-left-color: transparent !important;
-            border-right-color: transparent !important;
-            border-top-color: transparent !important;
-            top: -5px;
-            left: calc(50% - 5px);
-            margin-top: 0;
-            margin-bottom: 0;
-        }
-	}
-
-    &[x-placement^="right"] {
-	    margin-left: 5px;
-
-        .tooltip-arrow {
-            border-width: 5px 5px 5px 0;
-            border-left-color: transparent !important;
-            border-top-color: transparent !important;
-            border-bottom-color: transparent !important;
-            left: -5px;
-            top: calc(50% - 5px);
-            margin-left: 0;
-            margin-right: 0;
-        }
-	}
-
-    &[x-placement^="left"] {
-        margin-right: 5px;
-
-        .tooltip-arrow {
-            border-width: 5px 0 5px 5px;
-            border-top-color: transparent !important;
-            border-right-color: transparent !important;
-            border-bottom-color: transparent !important;
-            right: -5px;
-            top: calc(50% - 5px);
-            margin-left: 0;
-            margin-right: 0;
+        img,
+        .avatar-initials {
+            margin: 0;
+            width: 100%;
+            height: 100%;
         }
-	}
 
-    &.popover {
-		$color: #f9f9f9;
-
-        .popover-inner {
-            background: $color;
-            color: black;
-            padding: 24px;
-            border-radius: 5px;
-            box-shadow: 0 5px 30px rgba(black, .1);
+        img {
+            border-radius: 75px;
         }
 
-        .popover-arrow {
-            border-color: $color;
+        .avatar-initials {
+            line-height: 75px;
+            text-align: center;
+            font-size: 2rem;
         }
-	}
-
-    &[aria-hidden='true'] {
-		visibility: hidden;
-		opacity: 0;
-		transition: opacity .15s, visibility .15s;
-	}
-
-    &[aria-hidden='false'] {
-		visibility: visible;
-		opacity: 1;
-		transition: opacity .15s;
-	}
-}
-
-.tooltip {
-	display: block !important;
-	z-index: 10000;
-}
-
-.tooltip .tooltip-inner {
-	background: black;
-    color: white;
-    border-radius: 16px;
-    padding: 5px 10px 4px;
-}
-
-.tooltip .tooltip-arrow {
-	width: 0;
-	height: 0;
-    border-style: solid;
-    position: absolute;
-    margin: 5px;
-    border-color: black;
-    z-index: 1;
-}
-
-.tooltip[x-placement^="top"] {
-	margin-bottom: 5px;
-}
-
-.tooltip[x-placement^="top"] .tooltip-arrow {
-	border-width: 5px 5px 0 5px;
-    border-left-color: transparent !important;
-    border-right-color: transparent !important;
-    border-bottom-color: transparent !important;
-    bottom: -5px;
-    left: calc(50% - 5px);
-    margin-top: 0;
-    margin-bottom: 0;
-}
-
-.tooltip[x-placement^="bottom"] {
-	margin-top: 5px;
-}
-
-.tooltip[x-placement^="bottom"] .tooltip-arrow {
-	border-width: 0 5px 5px 5px;
-    border-left-color: transparent !important;
-    border-right-color: transparent !important;
-    border-top-color: transparent !important;
-    top: -5px;
-    left: calc(50% - 5px);
-    margin-top: 0;
-    margin-bottom: 0;
-}
-
-.tooltip[x-placement^="right"] {
-	margin-left: 5px;
-}
-
-.tooltip[x-placement^="right"] .tooltip-arrow {
-	border-width: 5px 5px 5px 0;
-    border-left-color: transparent !important;
-    border-top-color: transparent !important;
-    border-bottom-color: transparent !important;
-    left: -5px;
-    top: calc(50% - 5px);
-    margin-left: 0;
-    margin-right: 0;
-}
-
-.tooltip[x-placement^="left"] {
-	margin-right: 5px;
-}
-
-.tooltip[x-placement^="left"] .tooltip-arrow {
-	border-width: 5px 0 5px 5px;
-    border-top-color: transparent !important;
-    border-right-color: transparent !important;
-    border-bottom-color: transparent !important;
-    right: -5px;
-    top: calc(50% - 5px);
-    margin-left: 0;
-    margin-right: 0;
-}
+    }
 
-.tooltip.popover .popover-inner {
-	background: #f9f9f9;
-    color: black;
-    padding: 24px;
-    border-radius: 5px;
-    box-shadow: 0 5px 30px rgba(black, .1);
-}
+    .user-info {
+        text-align: left;
 
-.tooltip.popover .popover-arrow {
-	border-color: #C8C8C8;
-}
+        h3 {
+            font-size: 1.3rem;
+            color: #536c79;
+            margin: 0;
+            padding: 0;
+            line-height: 1.2;
+        }
 
-.tooltip[aria-hidden='true'] {
-    visibility: hidden;
-    opacity: 0;
-    transition: opacity .15s, visibility .15s;
-}
+        a {
+            display: block;
+            margin: 0;
+            font-size: 0.8rem;
+            line-height: 1.2;
+            color: $primary;
+        }
 
-.tooltip[aria-hidden='false'] {
-    visibility: visible;
-    opacity: 1;
-	transition: opacity .15s;
+        p {
+            color: #536c79;
+            font-size: 0.8rem;
+            margin: 5px 0 0;
+        }
+    }
 }
 
 .fixed-cta-button {
-  position: fixed;
-  bottom: 20px;
-  right: 20px;
-  z-index: 99999;
-
-  width: 56px;
-  height: 56px;
-  border-radius: 56px;
-  font-size: 12px;
-
-  -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
-  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
-  i {
-    display: block;
-    margin-bottom: 2px;
-    font-size: 13px;
-  }
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    z-index: 99999;
+    width: 56px;
+    height: 56px;
+    border-radius: 56px;
+    font-size: 12px;
+    box-shadow:
+        0 2px 2px 0 rgb(0 0 0 / 14%),
+        0 3px 1px -2px rgb(0 0 0 / 12%),
+        0 1px 5px 0 rgb(0 0 0 / 20%);
+
+    i {
+        display: block;
+        margin-bottom: 2px;
+        font-size: 13px;
+    }
 }
 
 .user-info-span {
     color: #536c79;
     font-size: 0.8rem;
-    margin: 5px 0 0 0;
+    margin: 5px 0 0;
 }
 
 .bulk-checkbox {
@@ -598,10 +490,13 @@
     display: inline !important;
 }
 
-.bg-bulk {
-    background: #edf3fe;
+.table tr.bg-bulk > td,
+.table tr.bg-bulk > th {
+    background-color: #e8eef8;
 }
 
-.bg-bulk-info {
-    background: $mutedText;
-}
+.table td.bg-bulk-info {
+    background-color: #c9d4e8;
+    padding-top: 0.625rem;
+    padding-bottom: 0.625rem;
+}