commons-assessment 12.1.1 → 12.1.2-dev.1

package/src/lib/assets/theme/styles.global.scss

@@ -26,16 +26,20 @@ GLOBAL stylesheet for commons-assessment library
 
 .assessment-dialog {
     overflow: auto;
+    scrollbar-width: thin;
+    scrollbar-color: var(--assessment-grey-six, #bdc9d3) transparent;
 
     /* Angular <= v14 (legacy) */
     .mat-dialog-container {
         padding: 0;
+        overflow: hidden;
     }
 
     /* Angular v15+ (MDC) */
     .mat-mdc-dialog-container {
         padding: 0;
         max-width: unset;
+        overflow: hidden;
     }
 
     @extend .assessment-custom-scrollbar-thumb;
@@ -58,19 +62,30 @@ GLOBAL stylesheet for commons-assessment library
 }
 
 .assessment-custom-scrollbar-thumb {
+    scrollbar-width: thin;
+    scrollbar-color: var(--assessment-grey-six, #bdc9d3) transparent;
+
+    &::-webkit-scrollbar,
     ::-webkit-scrollbar {
-        width: 0.4rem !important;
-        height: 0.4rem !important;
+        width: 6px !important;
+        height: 6px !important;
     }
 
+    &::-webkit-scrollbar-track,
     ::-webkit-scrollbar-track {
-        box-shadow: inset 0 0 6px var(--assessment-grey-four) !important;
-        border-radius: inherit !important;
+        background: transparent !important;
     }
 
+    &::-webkit-scrollbar-thumb,
     ::-webkit-scrollbar-thumb {
-        background-color: var(--assessment-grey-six) !important;
-        border-radius: inherit !important;
+        background-color: var(--assessment-grey-six, #cbd5e1) !important;
+        border-radius: 10px !important;
+        transition: background-color 0.2s ease;
+    }
+
+    &::-webkit-scrollbar-thumb:hover,
+    ::-webkit-scrollbar-thumb:hover {
+        background-color: var(--assessment-grey-eight, #94a3b8) !important;
     }
 }
 
@@ -126,6 +141,21 @@ GLOBAL stylesheet for commons-assessment library
 }
 
 .assessment-panel {
+    overflow: visible !important;
+
+    &.mat-expanded {
+        overflow: visible !important;
+
+        .mat-expansion-panel-content {
+            overflow: visible !important;
+        }
+
+        .mat-expansion-panel-body {
+            overflow: visible !important;
+            padding: 0;
+        }
+    }
+
     .mat-expansion-panel-body {
         padding: 0;
     }
@@ -208,14 +238,93 @@ GLOBAL stylesheet for commons-assessment library
     }
 }
 
-input.assessment-input-border-one,
-textarea.assessment-input-border-one {
-    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
+/* ---------------------------------------------------------------------------
+ * 2. Assessment Dropdown Menu Animations & Styling
+ * --------------------------------------------------------------------------- */
+.assessment-bloom-down {
+    transform-origin: top left;
+    animation: ctaMenuBloomDown 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
+    will-change: transform, opacity;
+}
+
+.assessment-bloom-up {
+    transform-origin: bottom left;
+    animation: ctaMenuBloomUp 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
+    will-change: transform, opacity;
+}
+
+.assessment-dropdown-menu {
+    border: 1px solid rgba(0, 0, 0, 0.08) !important;
+    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04) !important;
+
+    .dropdown-item {
+        position: relative;
+        cursor: pointer;
+        background-color: transparent;
+        transition: background-color 0.2s ease;
+        user-select: none;
+
+        img,
+        .menu-action-icon,
+        span,
+        .menu-item-text {
+            transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
+                        color 0.18s ease;
+            display: inline-block;
+        }
+
+        span,
+        .menu-item-text {
+            color: var(--assessment-grey-ten, #1e293b);
+        }
+
+        img,
+        .menu-action-icon {
+            flex-shrink: 0;
+        }
+
+        &:hover,
+        &:focus-visible {
+            background-color: var(--assessment-palette-EDF3FD, #edf3fd) !important;
+
+            img,
+            .menu-action-icon,
+            span,
+            .menu-item-text {
+                transform: translateX(2.5px);
+            }
+
+            span,
+            .menu-item-text {
+                color: var(--assessment-primary-one, #467dd6) !important;
+            }
+        }
+
+        &:active {
+            transform: scale(0.99);
+            background-color: var(--assessment-palette-C8DAF9, #c8daf9) !important;
+        }
+    }
+}
+
+@keyframes ctaMenuBloomDown {
+    0% {
+        opacity: 0;
+        transform: translateY(-6px);
+    }
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
 
-    &:focus {
-        background-color: var(--assessment-white) !important;
-        border: var(--assessment-input-border-one) !important;
-        border-color: var(--assessment-primary-one) !important;
-        box-shadow: var(--assessment-input-focus-box-shadow);
+@keyframes ctaMenuBloomUp {
+    0% {
+        opacity: 0;
+        transform: translateY(6px);
+    }
+    100% {
+        opacity: 1;
+        transform: translateY(0);
     }
 }