@cupcodev/ui 1.0.0 → 1.0.2

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@cupcodev/ui",
   "private": false,
-  "version": "1.0.0",
+  "version": "1.0.2",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "license": "UNLICENSED",
   "exports": {
     ".": {
       "import": "./dist/index.js",

package/styles/dock.css

@@ -56,7 +56,6 @@
     overflow: visible;
     transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
     background: #fcfcfc87;
-    z-index: 100;
 }
 
 .dark .dock {
@@ -118,7 +117,7 @@
     display: flex;
     align-items: center;
     gap: 10px;
-    overflow: hidden;
+    overflow: visible;
 }
 
 .tabbar li {
@@ -173,6 +172,57 @@
     box-shadow: 0 0 10px var(--lg-hover-glow);
 }
 
+.tab-style1 li.dock-divider:hover {
+    transform: none;
+    box-shadow: none;
+}
+
+.tab-style1 li.dock-divider::after {
+    content: none;
+}
+
+.tab-style1 li.dock-divider {
+    width: 1px;
+    min-width: 1px;
+    height: 44px;
+    padding: 0;
+    margin: 0 7px;
+    border-radius: 999px;
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(120, 120, 120, 0.2));
+    box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.55), 0 0 2px rgba(0, 0, 0, 0.25);
+    pointer-events: none;
+    cursor: default;
+    align-self: center;
+}
+
+.tabbar ul > li:last-of-type::before {
+    content: '';
+    position: absolute;
+    bottom: -10px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: hsl(var(--cc-pink, 330 87% 52%));
+    box-shadow: 0 0 6px rgba(237, 30, 121, 0.45);
+}
+
+.tabbar li .bg-img-menu-fix-mob {
+    display: block;
+    height: 60px;
+    width: 60px;
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-origin: content-box;
+    padding: 1px;
+}
+
+.tabbar li.mn-sobre-nos .bg-img-menu-fix-mob {
+    padding: 5px;
+}
+
 .list-menu-mob-show {
     position: absolute;
     left: 0;
@@ -211,6 +261,23 @@
     background: none;
 }
 
+.submenu-stack::after {
+    content: '';
+    position: absolute;
+    bottom: -14px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 0;
+    height: 0;
+    border-left: 14px solid transparent;
+    border-right: 14px solid transparent;
+    border-top: 14px solid rgba(255, 255, 255, 0.6);
+    opacity: 0;
+    transition: opacity 0.3s cubic-bezier(0.175, 0.885, 0.32, 2.2);
+    pointer-events: none;
+    z-index: -1;
+}
+
 .submenu-stack::before {
     content: '';
     position: absolute;
@@ -612,34 +679,16 @@
     transform: scale(0.95);
 }
 
-.tabbar li.marketing .bg-img-menu-fix-mob {
-    height: 60px;
-    width: 60px;
-    background-size: contain;
-    background-position: center;
-    background-repeat: no-repeat;
-    background-origin: content-box;
-    padding: 1px;
-}
-
-.tabbar li.mn-desenvolvimento .bg-img-menu-fix-mob {
-    height: 60px;
-    width: 60px;
-    background-size: contain;
-    background-position: center;
-    background-repeat: no-repeat;
-    background-origin: content-box;
-    padding: 1px;
-}
-
 .tabbar li.mn-homepage {
     position: relative;
 }
 
 a.link-absolute-menu {
+    display: block;
     height: 100%;
     width: 100%;
     position: absolute;
+    inset: 0;
 }
 
 .tabbar li.mn-homepage .bg-img-menu-fix-mob {
@@ -652,46 +701,6 @@ a.link-absolute-menu {
     padding: 1px;
 }
 
-.tabbar li.mn-solucoes .bg-img-menu-fix-mob {
-    height: 60px;
-    width: 60px;
-    background-size: contain;
-    background-position: center;
-    background-repeat: no-repeat;
-    background-origin: content-box;
-    padding: 1px;
-}
-
-.tabbar li.mn-cases-de-sucesso .bg-img-menu-fix-mob {
-    height: 60px;
-    width: 60px;
-    background-size: contain;
-    background-position: center;
-    background-repeat: no-repeat;
-    background-origin: content-box;
-    padding: 1px;
-}
-
-.tabbar li.mn-sobre-nos .bg-img-menu-fix-mob {
-    height: 60px;
-    width: 60px;
-    background-size: contain;
-    background-position: center;
-    background-repeat: no-repeat;
-    background-origin: content-box;
-    padding: 5px;
-}
-
-.tabbar li.mn-contato .bg-img-menu-fix-mob {
-    height: 60px;
-    width: 60px;
-    background-size: contain;
-    background-position: center;
-    background-repeat: no-repeat;
-    background-origin: content-box;
-    padding: 1px;
-}
-
 .tooltip {
     z-index: 10000 !important;
     filter: none !important;
@@ -721,17 +730,15 @@ a.link-absolute-menu {
         max-width: 240px;
     }
 
-    .tabbar li.marketing .bg-img-menu-fix-mob,
-    .tabbar li.mn-desenvolvimento .bg-img-menu-fix-mob,
-    .tabbar li.mn-solucoes .bg-img-menu-fix-mob,
-    .tabbar li.mn-cases-de-sucesso .bg-img-menu-fix-mob,
-    .tabbar li.mn-contato .bg-img-menu-fix-mob,
-    .tabbar li.mn-sobre-nos .bg-img-menu-fix-mob,
-    .tabbar li.mn-homepage .bg-img-menu-fix-mob {
+    .tabbar li .bg-img-menu-fix-mob {
         height: 40px;
         width: 40px;
     }
 
+    .tabbar li.mn-sobre-nos .bg-img-menu-fix-mob {
+        padding: 4px;
+    }
+
     .tab-style1 li {
         width: 40px;
         height: 40px;
@@ -748,6 +755,15 @@ a.link-absolute-menu {
         min-height: 60px;
     }
 
+    .tab-style1 li.dock-divider {
+        height: 32px;
+        margin: 0 6px;
+    }
+
+    .tabbar ul > li:last-of-type::before {
+        bottom: -8px;
+    }
+
     .submenu-card .card-content .icon {
         width: 40px;
         margin-right: 0.25rem;
@@ -777,7 +793,6 @@ a.link-absolute-menu {
     border-radius: 1.2rem;
     background: rgb(225 175 241 / 30%);
     z-index: 2;
-    filter: url(#lg-dist);
     backdrop-filter: blur(3px);
     transition-property: left, width, height, top, transform;
     transition-duration: var(--slider-duration, 0.4s);
@@ -793,9 +808,51 @@ a.link-absolute-menu {
         0px 3px 6px 0px rgba(24, 1, 58, 0.08);
     z-index: -1;
     will-change: left, width, height, top, transform;
-  transform: translateZ(0) scale(var(--slider-scale, 1));
+    transform: translateZ(0) scale(var(--slider-scale, 1));
 }
 
 .tabbar ul {
-    overflow: hidden;
-}
+    overflow: visible;
+}
+/* Custom dock backgrounds */
+@keyframes dockFloatFast {
+    0% { transform: translate3d(0,0,0); }
+    50% { transform: translate3d(0,-4px,0); }
+    100% { transform: translate3d(0,0,0); }
+}
+.submenu-card { 
+    backdrop-filter: blur(3px);
+}
+
+.submenu-card.submenu-card--particle-stars {
+    background: radial-gradient(circle at 20% 20%, rgb(255 255 255 / 45%) 0%, rgb(212 100 228 / 56%) 45%, rgb(122 16 191 / 49%) 100%);
+}
+
+.submenu-card.submenu-card--purple {
+    background: linear-gradient(135deg, rgba(83, 37, 167, 0.78), rgb(126 77 237 / 52%), rgb(176 78 236 / 60%));
+}
+
+.submenu-card.submenu-card--pink {
+    background: linear-gradient(140deg, rgb(237 30 121 / 40%), rgba(255, 177, 213, 0.62), rgb(208 47 121 / 55%));
+}
+
+.submenu-card.submenu-card--comet {
+    background: var(--cc-gradient-comet);
+}
+.submenu-card.submenu-card--comet .glass-overlay {
+    background: radial-gradient(circle at 20% 20%, rgb(217 90 220 / 64%), rgb(64 9 116 / 65%), rgb(109 17 96 / 65%));
+}
+.submenu-card.submenu-card--comet .card-content .text-content {
+    color: #f6f6ff;
+}
+
+.submenu-card.submenu-card--sunset {
+    background: linear-gradient(155deg, rgb(255 168 66 / 56%), rgb(184 66 155 / 62%), rgb(94 25 180 / 58%));
+}
+
+.submenu-card.submenu-card--particle-comets {
+    background: linear-gradient(150deg, rgb(223 35 213 / 56%), rgb(132 78 211 / 54%), rgb(132 78 211 / 48%));
+}
+.submenu-card.submenu-card--particle-comets .card-content {
+    animation: dockFloatFast 7.5s ease-in-out infinite;
+}

package/styles/global.css

@@ -745,15 +745,16 @@
     transition: 0.02s linear;
   }
   
-  .circle__btn .pause {
-    position: absolute;
-    transition: 0.02s linear;
-    font-size: 25px;
-  }
-  
-  .circle__btn .pause.visibility {
-    opacity: 0;
-  }
+.circle__btn .pause {
+  position: absolute;
+  opacity: 0;
+  transition: 0.02s linear;
+  font-size: 25px;
+}
+
+.circle__btn .pause.visibility {
+  opacity: 1;
+}
   
   .circle__back-1,
   .circle__back-2 {