@deriv-web-design/ui 0.0.6 → 0.0.8

package/dist/index.css

@@ -3240,6 +3240,8 @@
   grid-template-columns: 1fr auto 1fr;
   align-items: center;
   height: var(--navbar-height);
+  max-width: var(--navbar-max-width);
+  margin: 0 auto;
   padding: 0 var(--spacing-24);
   box-sizing: border-box;
 }
@@ -3337,6 +3339,65 @@
 .navbar--dark .navbar__pill .navbar__lang-globe {
   filter: brightness(0) invert(1);
 }
+.navbar__lang-wrapper {
+  position: relative;
+}
+.navbar__lang-dropdown {
+  position: absolute;
+  top: calc(100% + var(--spacing-16));
+  right: 0;
+  transform: translateY(-8px) scale(0.96);
+  width: 36rem;
+  background-color: var(--color-slate-50);
+  border: 1px solid var(--color-slate-100);
+  border-radius: var(--spacing-24);
+  box-shadow: 0px 8px 16px 2px rgba(0, 0, 0, 0.04), 0px -14px 16px 2px rgba(0, 0, 0, 0.02);
+  padding: var(--spacing-16) var(--spacing-24);
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--spacing-4);
+  z-index: var(--navbar-z-dropdown);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.18s ease, transform 0.18s ease;
+}
+.navbar__lang-dropdown--open {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+  pointer-events: auto;
+}
+.navbar__lang-option {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-4);
+  width: 100%;
+  padding: var(--spacing-8) var(--spacing-12);
+  border: none;
+  border-radius: var(--radius-md);
+  background: transparent;
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-md);
+  color: var(--color-slate-1200);
+  text-align: left;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.navbar__lang-option .navbar__lang-option-arrow {
+  opacity: 0;
+  transform: translateX(-6px);
+  transition: opacity 160ms ease, transform 160ms ease;
+  flex-shrink: 0;
+}
+.navbar__lang-option:hover .navbar__lang-option-arrow {
+  opacity: 1;
+  transform: translateX(0);
+}
+.navbar__lang-option--active {
+  color: var(--link-coral-color);
+  font-weight: var(--font-weight-semi-bold);
+}
 .navbar__actions {
   grid-column: 3;
   grid-row: 1;
@@ -3406,7 +3467,6 @@
   top: calc(100% + var(--spacing-8));
   left: calc(50% - var(--navbar-dropdown-w) / 2);
   width: var(--navbar-dropdown-w);
-  height: 23.25rem;
   background-color: var(--color-slate-50);
   border: 1px solid var(--color-slate-100);
   border-radius: var(--navbar-dropdown-radius);
@@ -3414,6 +3474,15 @@
   display: flex;
   overflow: hidden;
   z-index: var(--navbar-z-dropdown);
+  opacity: 0;
+  transform: scale(0.96) translateY(-8px);
+  pointer-events: none;
+  transition: opacity 0.18s ease, transform 0.18s ease;
+}
+.navbar__dropdown--open {
+  opacity: 1;
+  transform: scale(1) translateY(0);
+  pointer-events: auto;
 }
 .navbar__dropdown-inner {
   display: flex;
@@ -3440,6 +3509,7 @@
   gap: var(--spacing-16);
   flex-shrink: 0;
   width: 12.375rem;
+  align-self: start;
 }
 .navbar__dropdown-col-list {
   display: flex;
@@ -3503,9 +3573,12 @@
 .navbar__dropdown-feature-overlay {
   position: absolute;
   inset: 0;
-  background-color: var(--color-slate-700);
+  background:
+    linear-gradient(
+      to bottom,
+      rgba(24, 28, 37, 0) 0%,
+      rgba(24, 28, 37, 0.92) 100%);
   border-radius: var(--radius-2xl);
-  opacity: 0.8;
   pointer-events: none;
 }
 .navbar__dropdown-feature-img {
@@ -3515,7 +3588,6 @@
   height: 100%;
   object-fit: cover;
   border-radius: var(--radius-2xl);
-  opacity: 0.2;
   pointer-events: none;
 }
 .navbar__dropdown-feature-content {
@@ -3572,6 +3644,12 @@
   flex-direction: column;
   font-family: var(--font-family-base);
   box-sizing: border-box;
+  pointer-events: none;
+  transform: translateY(-100%);
+  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.navbar__drawer--open {
+  transform: translateY(0);
   pointer-events: all;
 }
 .navbar__drawer-header {
@@ -3640,25 +3718,24 @@
   transform: rotate(180deg);
 }
 .navbar__drawer-panel {
-  overflow: hidden;
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 0.22s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.navbar__drawer-panel--open {
+  grid-template-rows: 1fr;
 }
 .navbar__drawer-panel-inner {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-16);
-  padding: var(--spacing-8) 0 var(--spacing-16);
-  background-color: var(--color-slate-50);
+  overflow: hidden;
 }
-.navbar__drawer-panel-cols {
+display: flex; flex-direction: column; gap: var(--spacing-16); padding: var(--spacing-8) 0 var(--spacing-16); background-color: var(--color-slate-50); } .navbar__drawer-panel-cols {
   display: flex;
+  flex-direction: column;
   gap: var(--spacing-16);
 }
 .navbar__drawer-panel-col {
   display: flex;
-  flex: 1;
   flex-direction: column;
-  gap: var(--spacing-16);
-  min-width: 0;
 }
 .navbar__drawer-col-section {
   display: flex;
@@ -3707,8 +3784,11 @@
 .navbar__drawer-feature-overlay {
   position: absolute;
   inset: 0;
-  background-color: var(--color-slate-700);
-  opacity: 0.8;
+  background:
+    linear-gradient(
+      to bottom,
+      rgba(24, 28, 37, 0) 0%,
+      rgba(24, 28, 37, 0.92) 100%);
   pointer-events: none;
   border-radius: var(--radius-2xl);
 }
@@ -3718,7 +3798,6 @@
   width: 100%;
   height: 100%;
   object-fit: cover;
-  opacity: 0.2;
   pointer-events: none;
   border-radius: var(--radius-2xl);
 }
@@ -3786,6 +3865,60 @@
   cursor: pointer;
   text-align: left;
 }
+.navbar__drawer-lang-label {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-8);
+}
+.navbar__lang-globe--dark {
+  filter: none !important;
+}
+.navbar__drawer-lang-grid {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 0.22s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.navbar__drawer-lang-grid--open {
+  grid-template-rows: 1fr;
+}
+.navbar__drawer-lang-grid-inner {
+  overflow: hidden;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--spacing-4);
+  padding: var(--spacing-8) 0 var(--spacing-16);
+}
+.navbar__drawer-lang-option {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-4);
+  width: 100%;
+  padding: var(--spacing-8) var(--spacing-12);
+  border: none;
+  border-radius: var(--radius-md);
+  background: transparent;
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-md);
+  color: var(--color-slate-1200);
+  text-align: left;
+  cursor: pointer;
+}
+.navbar__drawer-lang-option .navbar__lang-option-arrow {
+  opacity: 0;
+  transform: translateX(-6px);
+  transition: opacity 160ms ease, transform 160ms ease;
+  flex-shrink: 0;
+}
+.navbar__drawer-lang-option:hover .navbar__lang-option-arrow {
+  opacity: 1;
+  transform: translateX(0);
+}
+.navbar__drawer-lang-option--active {
+  color: var(--link-coral-color);
+  font-weight: var(--font-weight-semi-bold);
+}
 .navbar__drawer-footer {
   display: flex;
   flex-direction: column;