@deriv-web-design/ui 0.0.8 → 0.0.9

package/dist/index.css

@@ -10,7 +10,7 @@
   border: 2px solid transparent;
   border-radius: var(--radius-full);
   font-family: var(--font-family-base);
-  font-size: var(--font-size-lg);
+  font-size: var(--font-size-md);
   font-weight: var(--font-weight-extra-bold);
   line-height: 1;
   text-align: center;
@@ -3240,8 +3240,6 @@
   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;
 }
@@ -3339,65 +3337,6 @@
 .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;
@@ -3474,15 +3413,6 @@
   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;
@@ -3644,12 +3574,6 @@
   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 {
@@ -3718,17 +3642,16 @@
   transform: rotate(180deg);
 }
 .navbar__drawer-panel {
-  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;
+  overflow: hidden;
 }
 .navbar__drawer-panel-inner {
-  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-16);
+  padding: var(--spacing-8) 0 var(--spacing-16);
+  background-color: var(--color-slate-50);
 }
-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 {
+.navbar__drawer-panel-cols {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-16);
@@ -3865,60 +3788,6 @@ display: flex; flex-direction: column; gap: var(--spacing-16); padding: var(--sp
   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;