mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2026-07-30 18:40:19 +00:00
add basis for navbar
This commit is contained in:
akcodez
committed by
Calvin Jhunjhuwala
Calvin Jhunjhuwala
parent
1cdf943bdc
commit
ba3032f58c
File diff suppressed because it is too large
Load Diff
@@ -15357,6 +15357,780 @@ article h1:first-of-type:before, article .h1:first-of-type:before {
|
||||
box-shadow: 0px 25px 40px -20px #141414;
|
||||
}
|
||||
}
|
||||
.bds-navbar {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 56px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #FFFFFF;
|
||||
border-bottom: none;
|
||||
box-sizing: border-box;
|
||||
z-index: 1000;
|
||||
}
|
||||
@media (min-width: 576px) {
|
||||
.bds-navbar {
|
||||
height: 56px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.bds-navbar {
|
||||
height: 80px;
|
||||
}
|
||||
}
|
||||
.bds-navbar__content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
padding: 0 20px;
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
@media (min-width: 576px) {
|
||||
.bds-navbar__content {
|
||||
padding: 0 32px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.bds-navbar__content {
|
||||
padding: 0 32px;
|
||||
}
|
||||
}
|
||||
.bds-navbar__logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
text-decoration: none;
|
||||
}
|
||||
.bds-navbar__logo:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
.bds-navbar__logo-symbol {
|
||||
display: block;
|
||||
width: 33px;
|
||||
height: 28px;
|
||||
}
|
||||
@media (min-width: 576px) {
|
||||
.bds-navbar__logo-symbol {
|
||||
width: 33px;
|
||||
height: 28px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.bds-navbar__logo-symbol {
|
||||
width: 37px;
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
.bds-navbar__logo-full {
|
||||
display: none;
|
||||
}
|
||||
.bds-navbar__items {
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 24px;
|
||||
font-family: "Booton", "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
font-weight: 400;
|
||||
}
|
||||
@media (min-width: 576px) {
|
||||
.bds-navbar__items {
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
line-height: 20.1px;
|
||||
gap: 24px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.bds-navbar__items {
|
||||
font-size: 16px;
|
||||
line-height: 23.2px;
|
||||
gap: 32px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
.bds-navbar__item {
|
||||
color: #141414;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s ease;
|
||||
padding: 4px 0;
|
||||
}
|
||||
.bds-navbar__item:hover, .bds-navbar__item--active {
|
||||
color: #0DAA3E;
|
||||
}
|
||||
.bds-navbar__item:focus {
|
||||
outline: none;
|
||||
color: #0DAA3E;
|
||||
}
|
||||
.bds-navbar__item:focus-visible {
|
||||
outline: 2px solid #0DAA3E;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.bds-navbar__controls {
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
@media (min-width: 576px) {
|
||||
.bds-navbar__controls {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
.bds-navbar__icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.bds-navbar__icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
.bds-navbar__icon:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
.bds-navbar__icon:focus {
|
||||
outline: none;
|
||||
}
|
||||
.bds-navbar__icon:focus-visible {
|
||||
outline: 2px solid #0DAA3E;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.bds-navbar__icon img,
|
||||
.bds-navbar__icon svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.bds-navbar__lang-pill {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
height: 28px;
|
||||
padding: 8px 9px 8px 8px;
|
||||
background: transparent;
|
||||
border: 1px solid #141414;
|
||||
border-radius: 100px;
|
||||
cursor: pointer;
|
||||
font-family: "Booton", "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 20.1px;
|
||||
color: #141414;
|
||||
transition: background-color 0.2s ease, border-color 0.2s ease;
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.bds-navbar__lang-pill {
|
||||
height: 32px;
|
||||
padding: 8px 13px 8px 12px;
|
||||
border-width: 1.3px;
|
||||
gap: 8px;
|
||||
font-size: 16px;
|
||||
line-height: 23.2px;
|
||||
}
|
||||
}
|
||||
.bds-navbar__lang-pill:hover {
|
||||
background-color: #F0F3F7;
|
||||
}
|
||||
.bds-navbar__lang-pill:focus {
|
||||
outline: none;
|
||||
}
|
||||
.bds-navbar__lang-pill:focus-visible {
|
||||
outline: 2px solid #0DAA3E;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.bds-navbar__lang-pill-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.bds-navbar__lang-pill-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
.bds-navbar__lang-pill-text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
.bds-navbar__lang-pill-chevron {
|
||||
width: 8px;
|
||||
height: 13px;
|
||||
transform: rotate(90deg);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.bds-navbar__hamburger {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
@media (min-width: 576px) {
|
||||
.bds-navbar__hamburger {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.bds-navbar__hamburger:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
.bds-navbar__hamburger:focus {
|
||||
outline: none;
|
||||
}
|
||||
.bds-navbar__hamburger:focus-visible {
|
||||
outline: 2px solid #0DAA3E;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.bds-navbar__hamburger img,
|
||||
.bds-navbar__hamburger svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.bds-navbar--with-banner {
|
||||
margin-top: 52px;
|
||||
}
|
||||
|
||||
[data-component-name="layouts/RootLayout"]:has(.bds-navbar) {
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
|
||||
body [data-component-name="layouts/RootLayout"]:has(> .bds-navbar),
|
||||
body [data-component-name="layouts/RootLayout"]:has(header.bds-navbar) {
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
|
||||
html:has(.bds-navbar) {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body:has(.bds-navbar) {
|
||||
overflow-x: hidden;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
[data-component-name="layouts/RootLayout"]:has(.bds-navbar) {
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
margin: 0;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
html.light:has(.bds-navbar)::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
html.light:has(.bds-navbar)::-webkit-scrollbar-track {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
html.light:has(.bds-navbar)::-webkit-scrollbar-thumb {
|
||||
background-color: #CAD4DF;
|
||||
border-radius: 6px;
|
||||
border: 3px solid #FFFFFF;
|
||||
}
|
||||
html.light:has(.bds-navbar)::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #8A919A;
|
||||
}
|
||||
html.light:has(.bds-navbar) {
|
||||
scrollbar-color: #CAD4DF #FFFFFF;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.bds-submenu-backdrop {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 80px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 999;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
background-color: rgba(230, 234, 240, 0.65);
|
||||
backdrop-filter: blur(17.5px);
|
||||
-webkit-backdrop-filter: blur(17.5px);
|
||||
transition: opacity 300ms ease-out;
|
||||
}
|
||||
@media (min-width: 576px) {
|
||||
.bds-submenu-backdrop {
|
||||
display: block;
|
||||
top: 56px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.bds-submenu-backdrop {
|
||||
top: 80px;
|
||||
}
|
||||
}
|
||||
.bds-submenu-backdrop--active {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.bds-submenu {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 1001;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
width: 612px;
|
||||
height: 390px;
|
||||
padding: 8px;
|
||||
gap: 8px;
|
||||
background-color: #E6EAF0;
|
||||
transition: opacity 100ms ease-out 400ms, visibility 0ms linear 500ms;
|
||||
}
|
||||
@media (min-width: 576px) {
|
||||
.bds-submenu {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
.bds-submenu--active {
|
||||
pointer-events: auto;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transition: opacity 0ms, visibility 0ms;
|
||||
}
|
||||
.bds-submenu--active .bds-submenu__left {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
transition: transform 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98), opacity 150ms ease-out;
|
||||
}
|
||||
.bds-submenu--active .bds-submenu__right {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
transition: transform 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98) 200ms, opacity 150ms ease-out 200ms;
|
||||
}
|
||||
.bds-submenu-wrapper {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
.bds-submenu__left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
width: 298px;
|
||||
height: 374px;
|
||||
transform: translateY(-100%);
|
||||
opacity: 0;
|
||||
background-color: #E6EAF0;
|
||||
transition: transform 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98) 200ms, opacity 150ms ease-in 350ms;
|
||||
}
|
||||
.bds-submenu__right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
width: 290px;
|
||||
height: 374px;
|
||||
transform: translateX(-100%);
|
||||
opacity: 0;
|
||||
background-color: #E6EAF0;
|
||||
transition: transform 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98), opacity 150ms ease-in 150ms;
|
||||
}
|
||||
.bds-submenu__section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
flex: 1 0 0;
|
||||
min-height: 1px;
|
||||
min-width: 1px;
|
||||
padding: 16px 24px;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
.bds-submenu__tier1 {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
.bds-submenu__tier2 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
width: 100%;
|
||||
margin-top: auto;
|
||||
}
|
||||
.bds-submenu__icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.bds-submenu__icon img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.bds-submenu__link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
color: #141414;
|
||||
text-decoration: none;
|
||||
font-family: "Booton", "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 23.2px;
|
||||
white-space: nowrap;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
.bds-submenu__link:hover {
|
||||
color: #0DAA3E;
|
||||
}
|
||||
.bds-submenu__link:hover .bds-submenu__arrow {
|
||||
transform: translateX(2px);
|
||||
}
|
||||
.bds-submenu__link--bold {
|
||||
font-weight: 500;
|
||||
}
|
||||
.bds-submenu__sublink {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
color: #141414;
|
||||
text-decoration: none;
|
||||
font-family: "Booton", "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
line-height: 23.2px;
|
||||
white-space: nowrap;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
.bds-submenu__sublink:hover {
|
||||
color: #0DAA3E;
|
||||
}
|
||||
.bds-submenu__sublink--active {
|
||||
color: #0DAA3E;
|
||||
font-weight: 400;
|
||||
}
|
||||
.bds-submenu__sublink--active .bds-submenu__arrow {
|
||||
display: inline-flex;
|
||||
}
|
||||
.bds-submenu__arrow {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 15px;
|
||||
height: 14px;
|
||||
flex-shrink: 0;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
.bds-submenu__arrow svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.bds-submenu__sublink .bds-submenu__arrow {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.bds-navbar__item-wrapper {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bds-mobile-menu {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #FFFFFF;
|
||||
z-index: 1002;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
transform: translateX(100%);
|
||||
transition: transform 300ms ease-out;
|
||||
}
|
||||
@media (max-width: 575.98px) {
|
||||
.bds-mobile-menu {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
.bds-mobile-menu--open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
.bds-mobile-menu__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 80px;
|
||||
padding: 24px;
|
||||
background-color: #FFFFFF;
|
||||
border-bottom: 1px solid #E6EAF0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.bds-mobile-menu__close {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.bds-mobile-menu__close img, .bds-mobile-menu__close svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.bds-mobile-menu__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
width: 343px;
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
}
|
||||
.bds-mobile-menu__accordion {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
.bds-mobile-menu__accordion-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
padding: 16px 8px;
|
||||
background-color: #FFFFFF;
|
||||
border: none;
|
||||
border-bottom: 1px solid #CAD4DF;
|
||||
cursor: pointer;
|
||||
font-family: "Booton", "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 20.1px;
|
||||
color: #141414;
|
||||
text-align: left;
|
||||
}
|
||||
.bds-mobile-menu__accordion-header:hover {
|
||||
background-color: #F0F3F7;
|
||||
}
|
||||
.bds-mobile-menu__chevron {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 13px;
|
||||
height: 8px;
|
||||
transition: transform 200ms ease;
|
||||
}
|
||||
.bds-mobile-menu__chevron img, .bds-mobile-menu__chevron svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.bds-mobile-menu__chevron--expanded {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.bds-mobile-menu__accordion-content {
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 300ms ease-out;
|
||||
background-color: #FFFFFF;
|
||||
border-bottom: 1px solid #CAD4DF;
|
||||
}
|
||||
.bds-mobile-menu__accordion-content--expanded {
|
||||
max-height: 600px;
|
||||
}
|
||||
.bds-mobile-menu__tier-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
padding: 8px 8px 16px 8px;
|
||||
}
|
||||
.bds-mobile-menu__tier1 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
.bds-mobile-menu__tier2 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
width: 100%;
|
||||
padding-left: 26px;
|
||||
}
|
||||
.bds-mobile-menu__icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.bds-mobile-menu__icon img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.bds-mobile-menu__link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
color: #141414;
|
||||
text-decoration: none;
|
||||
font-family: "Booton", "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 20.1px;
|
||||
white-space: nowrap;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
.bds-mobile-menu__link:hover {
|
||||
color: #0DAA3E;
|
||||
}
|
||||
.bds-mobile-menu__link--bold {
|
||||
font-weight: 500;
|
||||
}
|
||||
.bds-mobile-menu__sublink {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
color: #141414;
|
||||
text-decoration: none;
|
||||
font-family: "Booton", "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
line-height: 20.1px;
|
||||
white-space: nowrap;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
.bds-mobile-menu__sublink:hover {
|
||||
color: #0DAA3E;
|
||||
}
|
||||
.bds-mobile-menu__sublink--active {
|
||||
color: #0DAA3E;
|
||||
font-weight: 400;
|
||||
}
|
||||
.bds-mobile-menu__sublink--active .bds-mobile-menu__arrow {
|
||||
display: inline-flex;
|
||||
}
|
||||
.bds-mobile-menu__arrow {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 14px;
|
||||
height: 13px;
|
||||
flex-shrink: 0;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
.bds-mobile-menu__arrow svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.bds-mobile-menu__sublink .bds-mobile-menu__arrow {
|
||||
display: none;
|
||||
}
|
||||
.bds-mobile-menu__footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 24px;
|
||||
background-color: #FFFFFF;
|
||||
flex-shrink: 0;
|
||||
margin-top: auto;
|
||||
}
|
||||
.bds-mobile-menu__lang-pill {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
height: 28px;
|
||||
padding: 8px 9px 8px 8px;
|
||||
background: transparent;
|
||||
border: 1px solid #141414;
|
||||
border-radius: 100px;
|
||||
cursor: pointer;
|
||||
font-family: "Booton", "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 20.1px;
|
||||
color: #141414;
|
||||
}
|
||||
.bds-mobile-menu__lang-pill:hover {
|
||||
background-color: #F0F3F7;
|
||||
}
|
||||
.bds-mobile-menu__lang-pill-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.bds-mobile-menu__lang-pill-text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
.bds-mobile-menu__lang-pill-chevron {
|
||||
width: 8px;
|
||||
height: 13px;
|
||||
transform: rotate(90deg);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.bds-mobile-menu__footer-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.bds-mobile-menu__footer-icon img, .bds-mobile-menu__footer-icon svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.bds-mobile-menu__footer-icon:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
body.bds-mobile-menu-open {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body.bds-submenu-open {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.web-banner {
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
|
||||
8
static/img/navbar/blue-wallet.svg
Normal file
8
static/img/navbar/blue-wallet.svg
Normal file
@@ -0,0 +1,8 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="24" height="24" fill="#93BFF1"/>
|
||||
<path d="M20.1156 20.4783L20.1121 18.8137L8.39074 18.8086C7.09045 18.8086 5.55103 17.598 5.55103 16.1578V10.8242H3.88672V16.138C3.88672 18.4958 5.80485 20.4783 8.16275 20.4783" fill="#141414"/>
|
||||
<path d="M20.1136 9.89844H5.42969V11.521H20.1136V9.89844Z" fill="#141414"/>
|
||||
<path d="M17.6787 5.81641V9.08691H16.0557V7.51172L8.40137 7.5166C7.09784 7.5166 5.55486 8.81276 5.55469 10.2578V15.6094H3.88672V10.2783C3.88672 7.98653 5.69085 5.94765 7.95215 5.82227L16.0557 5.81641H17.6787Z" fill="#141414"/>
|
||||
<path d="M16.8681 13.9883H13.623V15.6108H16.8681V13.9883Z" fill="#141414"/>
|
||||
<path d="M20.1123 16.5029V20.3164H18.4902V14.8809L20.1123 16.5029ZM20.1123 10.8242V13.0957L18.4902 14.7178V10.8242H20.1123Z" fill="#141414"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 864 B |
3
static/img/navbar/chevron-down.svg
Normal file
3
static/img/navbar/chevron-down.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="8" height="13" viewBox="0 0 8 13" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1.5 1L6.5 6.5L1.5 12" stroke="#141414" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 218 B |
5
static/img/navbar/globe-icon.svg
Normal file
5
static/img/navbar/globe-icon.svg
Normal file
@@ -0,0 +1,5 @@
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10 18.3333C14.6024 18.3333 18.3333 14.6024 18.3333 10C18.3333 5.39763 14.6024 1.66667 10 1.66667C5.39763 1.66667 1.66667 5.39763 1.66667 10C1.66667 14.6024 5.39763 18.3333 10 18.3333Z" stroke="#141414" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M1.66667 10H18.3333" stroke="#141414" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M10 1.66667C12.0844 3.94863 13.269 6.91003 13.3333 10C13.269 13.09 12.0844 16.0514 10 18.3333C7.91562 16.0514 6.73106 13.09 6.66667 10C6.73106 6.91003 7.91562 3.94863 10 1.66667Z" stroke="#141414" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 772 B |
8
static/img/navbar/green-wallet.svg
Normal file
8
static/img/navbar/green-wallet.svg
Normal file
@@ -0,0 +1,8 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="24" height="24" fill="#70EE97"/>
|
||||
<path d="M20.1156 20.4783L20.1121 18.8137L8.39074 18.8086C7.09045 18.8086 5.55103 17.598 5.55103 16.1578V10.8242H3.88672V16.138C3.88672 18.4958 5.80485 20.4783 8.16275 20.4783" fill="#141414"/>
|
||||
<path d="M20.1136 9.89844H5.42969V11.521H20.1136V9.89844Z" fill="#141414"/>
|
||||
<path d="M17.6787 5.81641V9.08691H16.0557V7.51172L8.40137 7.5166C7.09784 7.5166 5.55486 8.81276 5.55469 10.2578V15.6094H3.88672V10.2783C3.88672 7.98653 5.69085 5.94765 7.95215 5.82227L16.0557 5.81641H17.6787Z" fill="#141414"/>
|
||||
<path d="M16.8681 13.9883H13.623V15.6108H16.8681V13.9883Z" fill="#141414"/>
|
||||
<path d="M20.1123 16.5029V20.3164H18.4902V14.8809L20.1123 16.5029ZM20.1123 10.8242V13.0957L18.4902 14.7178V10.8242H20.1123Z" fill="#141414"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 864 B |
4
static/img/navbar/hamburger-icon.svg
Normal file
4
static/img/navbar/hamburger-icon.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<line x1="2" y1="10" x2="26" y2="10" stroke="#141414" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="2" y1="18" x2="26" y2="18" stroke="#141414" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 295 B |
8
static/img/navbar/lilac-wallet.svg
Normal file
8
static/img/navbar/lilac-wallet.svg
Normal file
@@ -0,0 +1,8 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="24" height="24" fill="#D9CAFF"/>
|
||||
<path d="M20.1156 20.4783L20.1121 18.8137L8.39074 18.8086C7.09045 18.8086 5.55103 17.598 5.55103 16.1578V10.8242H3.88672V16.138C3.88672 18.4958 5.80485 20.4783 8.16275 20.4783" fill="#141414"/>
|
||||
<path d="M20.1136 9.89844H5.42969V11.521H20.1136V9.89844Z" fill="#141414"/>
|
||||
<path d="M17.6787 5.81641V9.08691H16.0557V7.51172L8.40137 7.5166C7.09784 7.5166 5.55486 8.81276 5.55469 10.2578V15.6094H3.88672V10.2783C3.88672 7.98653 5.69085 5.94765 7.95215 5.82227L16.0557 5.81641H17.6787Z" fill="#141414"/>
|
||||
<path d="M16.8681 13.9883H13.623V15.6108H16.8681V13.9883Z" fill="#141414"/>
|
||||
<path d="M20.1123 16.5029V20.3164H18.4902V14.8809L20.1123 16.5029ZM20.1123 10.8242V13.0957L18.4902 14.7178V10.8242H20.1123Z" fill="#141414"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 864 B |
11
static/img/navbar/mode-toggle.svg
Normal file
11
static/img/navbar/mode-toggle.svg
Normal file
@@ -0,0 +1,11 @@
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10 2.5V4.16667" stroke="#141414" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M10 15.8333V17.5" stroke="#141414" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M4.69165 4.69165L5.86665 5.86665" stroke="#141414" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M14.1333 14.1333L15.3083 15.3083" stroke="#141414" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M2.5 10H4.16667" stroke="#141414" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M15.8333 10H17.5" stroke="#141414" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M4.69165 15.3083L5.86665 14.1333" stroke="#141414" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M14.1333 5.86665L15.3083 4.69165" stroke="#141414" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M13.3333 10C13.3333 11.841 11.841 13.3333 10 13.3333C8.15907 13.3333 6.66668 11.841 6.66668 10C6.66668 8.15907 8.15907 6.66668 10 6.66668C11.841 6.66668 13.3333 8.15907 13.3333 10Z" stroke="#141414" stroke-width="1.5"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
8
static/img/navbar/pink-wallet.svg
Normal file
8
static/img/navbar/pink-wallet.svg
Normal file
@@ -0,0 +1,8 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="24" height="24" fill="#F2B5C3"/>
|
||||
<path d="M20.1156 20.4783L20.1121 18.8137L8.39074 18.8086C7.09045 18.8086 5.55103 17.598 5.55103 16.1578V10.8242H3.88672V16.138C3.88672 18.4958 5.80485 20.4783 8.16275 20.4783" fill="#141414"/>
|
||||
<path d="M20.1136 9.89844H5.42969V11.521H20.1136V9.89844Z" fill="#141414"/>
|
||||
<path d="M17.6787 5.81641V9.08691H16.0557V7.51172L8.40137 7.5166C7.09784 7.5166 5.55486 8.81276 5.55469 10.2578V15.6094H3.88672V10.2783C3.88672 7.98653 5.69085 5.94765 7.95215 5.82227L16.0557 5.81641H17.6787Z" fill="#141414"/>
|
||||
<path d="M16.8681 13.9883H13.623V15.6108H16.8681V13.9883Z" fill="#141414"/>
|
||||
<path d="M20.1123 16.5029V20.3164H18.4902V14.8809L20.1123 16.5029ZM20.1123 10.8242V13.0957L18.4902 14.7178V10.8242H20.1123Z" fill="#141414"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 864 B |
4
static/img/navbar/search-icon.svg
Normal file
4
static/img/navbar/search-icon.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9.16667 15.8333C12.8486 15.8333 15.8333 12.8486 15.8333 9.16667C15.8333 5.48477 12.8486 2.5 9.16667 2.5C5.48477 2.5 2.5 5.48477 2.5 9.16667C2.5 12.8486 5.48477 15.8333 9.16667 15.8333Z" stroke="#141414" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M17.5 17.5L13.875 13.875" stroke="#141414" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 504 B |
11
static/img/navbar/xrp-logotype-black.svg
Normal file
11
static/img/navbar/xrp-logotype-black.svg
Normal file
@@ -0,0 +1,11 @@
|
||||
<svg width="167" height="32" viewBox="0 0 167 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M36.8546 0H31.5424L23.1459 8.30632C20.6111 10.8179 16.4998 10.8179 13.965 8.30632L5.56855 0H0.256348L11.3061 10.9305C15.307 14.8949 21.8039 14.8949 25.8048 10.9305L36.8546 0ZM0.188965 31.4653H5.50115L13.965 23.0645C16.4998 20.5529 20.6111 20.5529 23.1459 23.0645L31.6098 31.4653H36.922L25.8048 20.4403C21.8039 16.4759 15.307 16.4759 11.3061 20.4403L0.188965 31.4653Z" fill="#141414"/>
|
||||
<path d="M52.2644 13.9512L55.0044 10.4512H58.6044L54.0044 16.0512L58.7444 21.8112H55.0844L52.2644 18.1712L49.4444 21.8112H45.7844L50.5244 16.0512L45.9244 10.4512H49.5244L52.2644 13.9512Z" fill="#141414"/>
|
||||
<path d="M67.1556 17.5312H65.4356V21.8112H62.2756V10.4512H67.4756C68.8689 10.4512 69.9556 10.7712 70.7356 11.4112C71.5156 12.0512 71.9056 12.9712 71.9056 14.1712C71.9056 15.0179 71.7089 15.7179 71.3156 16.2712C70.9356 16.8245 70.3956 17.2312 69.6956 17.4912L72.5356 21.7312V21.8112H69.2156L67.1556 17.5312ZM65.4356 15.3512H67.4756C67.9889 15.3512 68.3889 15.2045 68.6756 14.9112C68.9756 14.6179 69.1256 14.2179 69.1256 13.7112C69.1256 13.2045 68.9823 12.7979 68.6956 12.4912C68.4089 12.1845 67.9956 12.0312 67.4556 12.0312H65.4356V15.3512Z" fill="#141414"/>
|
||||
<path d="M81.0578 17.0512V21.8112H77.9178V10.4512H82.9978C84.3911 10.4512 85.4911 10.7712 86.2978 11.4112C87.1044 12.0512 87.5078 12.9579 87.5078 14.1312C87.5078 14.9112 87.3111 15.5912 86.9178 16.1712C86.5244 16.7379 85.9511 17.1845 85.1978 17.5112L85.1778 17.5312H82.9978H81.0578ZM81.0578 14.8712H82.9778C83.5044 14.8712 83.9044 14.7312 84.1778 14.4512C84.4644 14.1579 84.6078 13.7579 84.6078 13.2512C84.6078 12.7312 84.4644 12.3179 84.1778 12.0112C83.8911 11.6912 83.4778 11.5312 82.9378 11.5312H81.0578V14.8712Z" fill="#141414"/>
|
||||
<path d="M99.9422 21.8112H93.5022V10.4512H99.9022V12.2912H96.6622V15.1112H99.5622V16.9312H96.6622V19.9712H99.9422V21.8112Z" fill="#141414"/>
|
||||
<path d="M111.714 16.0712C111.714 17.9245 111.234 19.4112 110.274 20.5312C109.314 21.6512 108.027 22.2112 106.414 22.0112V21.8112H106.394C106.047 21.8112 105.714 21.7845 105.394 21.7312C105.087 21.6912 104.787 21.6179 104.494 21.5112L104.114 21.3512V10.4512H106.394V10.4712C106.787 10.4445 107.174 10.4712 107.554 10.5512C108.847 10.8179 109.874 11.4445 110.634 12.4312C111.407 13.4045 111.781 14.5979 111.714 16.0112V16.0712ZM108.494 16.0712C108.494 14.8179 108.234 13.8579 107.714 13.1912C107.207 12.5112 106.527 12.1579 105.674 12.1312V19.9912C106.527 19.9645 107.207 19.6179 107.714 18.9512C108.234 18.2845 108.494 17.3245 108.494 16.0712Z" fill="#141414"/>
|
||||
<path d="M123.946 21.8112H117.506V10.4512H123.906V12.2912H120.666V15.1112H123.566V16.9312H120.666V19.9712H123.946V21.8112Z" fill="#141414"/>
|
||||
<path d="M135.698 21.8112H132.558V10.4512H135.698V21.8112ZM137.898 21.8112L138.738 19.4112H138.518L141.458 10.4512H145.138L148.058 19.4112H147.838L148.698 21.8112H145.518L145.038 20.1312H141.558L141.078 21.8112H137.898ZM144.218 17.9512L143.298 14.7312L142.378 17.9512H144.218Z" fill="#141414"/>
|
||||
<path d="M160.61 17.5312H158.89V21.8112H155.73V10.4512H160.93C162.323 10.4512 163.41 10.7712 164.19 11.4112C164.97 12.0512 165.36 12.9712 165.36 14.1712C165.36 15.0179 165.163 15.7179 164.77 16.2712C164.39 16.8245 163.85 17.2312 163.15 17.4912L165.99 21.7312V21.8112H162.67L160.61 17.5312ZM158.89 15.3512H160.93C161.443 15.3512 161.843 15.2045 162.13 14.9112C162.43 14.6179 162.58 14.2179 162.58 13.7112C162.58 13.2045 162.437 12.7979 162.15 12.4912C161.863 12.1845 161.45 12.0312 160.91 12.0312H158.89V15.3512Z" fill="#141414"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.5 KiB |
3
static/img/navbar/xrp-symbol-black.svg
Normal file
3
static/img/navbar/xrp-symbol-black.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="37" height="32" viewBox="0 0 37 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M36.8546 0H31.5424L23.1459 8.30632C20.6111 10.8179 16.4998 10.8179 13.965 8.30632L5.56855 0H0.256348L11.3061 10.9305C15.307 14.8949 21.8039 14.8949 25.8048 10.9305L36.8546 0ZM0.188965 31.4653H5.50115L13.965 23.0645C16.4998 20.5529 20.6111 20.5529 23.1459 23.0645L31.6098 31.4653H36.922L25.8048 20.4403C21.8039 16.4759 15.307 16.4759 11.3061 20.4403L0.188965 31.4653Z" fill="#141414"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 537 B |
8
static/img/navbar/yellow-wallet.svg
Normal file
8
static/img/navbar/yellow-wallet.svg
Normal file
@@ -0,0 +1,8 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="24" height="24" fill="#E6F1A7"/>
|
||||
<path d="M20.1156 20.4783L20.1121 18.8137L8.39074 18.8086C7.09045 18.8086 5.55103 17.598 5.55103 16.1578V10.8242H3.88672V16.138C3.88672 18.4958 5.80485 20.4783 8.16275 20.4783" fill="#141414"/>
|
||||
<path d="M20.1136 9.89844H5.42969V11.521H20.1136V9.89844Z" fill="#141414"/>
|
||||
<path d="M17.6787 5.81641V9.08691H16.0557V7.51172L8.40137 7.5166C7.09784 7.5166 5.55486 8.81276 5.55469 10.2578V15.6094H3.88672V10.2783C3.88672 7.98653 5.69085 5.94765 7.95215 5.82227L16.0557 5.81641H17.6787Z" fill="#141414"/>
|
||||
<path d="M16.8681 13.9883H13.623V15.6108H16.8681V13.9883Z" fill="#141414"/>
|
||||
<path d="M20.1123 16.5029V20.3164H18.4902V14.8809L20.1123 16.5029ZM20.1123 10.8242V13.0957L18.4902 14.7178V10.8242H20.1123Z" fill="#141414"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 864 B |
968
styles/_bds-navbar.scss
Normal file
968
styles/_bds-navbar.scss
Normal file
@@ -0,0 +1,968 @@
|
||||
// BDS Navbar Styles - Phase 1 (Light Mode Only)
|
||||
// Uses color variables from _colors.scss
|
||||
// Follows breakpoints from _breakpoints.scss
|
||||
|
||||
$bds-navbar-height-desktop: 80px;
|
||||
$bds-navbar-height-tablet: 56px;
|
||||
$bds-navbar-height-mobile: 56px;
|
||||
$bds-navbar-padding-desktop: 0 32px;
|
||||
$bds-navbar-padding-tablet: 0 32px;
|
||||
$bds-navbar-padding-mobile: 0 20px;
|
||||
|
||||
// Main navbar container
|
||||
.bds-navbar {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: $bds-navbar-height-mobile;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: $white;
|
||||
border-bottom: none; // Remove border, submenu has its own styling
|
||||
box-sizing: border-box;
|
||||
z-index: 1000;
|
||||
|
||||
// Tablet
|
||||
@include media-breakpoint-up(md) {
|
||||
height: $bds-navbar-height-tablet;
|
||||
}
|
||||
|
||||
// Desktop
|
||||
@include media-breakpoint-up(lg) {
|
||||
height: $bds-navbar-height-desktop;
|
||||
}
|
||||
|
||||
// Content wrapper - flex container
|
||||
&__content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
padding: $bds-navbar-padding-mobile;
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
|
||||
// Tablet
|
||||
@include media-breakpoint-up(md) {
|
||||
padding: $bds-navbar-padding-tablet;
|
||||
}
|
||||
|
||||
// Desktop
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding: $bds-navbar-padding-desktop;
|
||||
}
|
||||
}
|
||||
|
||||
// Logo container
|
||||
&__logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
// Symbol logo (all breakpoints - mobile, tablet, desktop)
|
||||
&-symbol {
|
||||
display: block;
|
||||
width: 33px;
|
||||
height: 28px;
|
||||
|
||||
// Tablet
|
||||
@include media-breakpoint-up(md) {
|
||||
width: 33px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
// Desktop
|
||||
@include media-breakpoint-up(lg) {
|
||||
width: 37px;
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
// Full logotype - hidden for now (same logo across all breakpoints)
|
||||
&-full {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Navigation items container - centered
|
||||
&__items {
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 24px;
|
||||
font-family: $font-family-sans-serif;
|
||||
font-weight: 400;
|
||||
|
||||
// Tablet - show nav items
|
||||
@include media-breakpoint-up(md) {
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
line-height: 20.1px;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
// Desktop - larger font and gap
|
||||
@include media-breakpoint-up(lg) {
|
||||
font-size: 16px;
|
||||
line-height: 23.2px;
|
||||
gap: 32px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
// Individual nav item
|
||||
&__item {
|
||||
color: $black;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s ease;
|
||||
padding: 4px 0;
|
||||
|
||||
&:hover,
|
||||
&--active {
|
||||
color: $green-400;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
color: $green-400;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid $green-400;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
// Right side controls container
|
||||
&__controls {
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 16px;
|
||||
flex-shrink: 0;
|
||||
|
||||
// Tablet - show controls
|
||||
@include media-breakpoint-up(md) {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
// Icon buttons (search, mode toggle)
|
||||
&__icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s ease;
|
||||
|
||||
// Desktop - larger icons
|
||||
@include media-breakpoint-up(lg) {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid $green-400;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
img,
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// Language selector pill button
|
||||
&__lang-pill {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
height: 28px;
|
||||
padding: 8px 9px 8px 8px;
|
||||
background: transparent;
|
||||
border: 1px solid $black;
|
||||
border-radius: 100px;
|
||||
cursor: pointer;
|
||||
font-family: $font-family-sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 20.1px;
|
||||
color: $black;
|
||||
transition: background-color 0.2s ease, border-color 0.2s ease;
|
||||
|
||||
// Desktop - larger pill
|
||||
@include media-breakpoint-up(lg) {
|
||||
height: 32px;
|
||||
padding: 8px 13px 8px 12px;
|
||||
border-width: 1.3px;
|
||||
gap: 8px;
|
||||
font-size: 16px;
|
||||
line-height: 23.2px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $gray-100;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid $green-400;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
&-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
flex-shrink: 0;
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
&-text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
&-chevron {
|
||||
width: 8px;
|
||||
height: 13px;
|
||||
transform: rotate(90deg);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Hamburger menu button (mobile only)
|
||||
&__hamburger {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s ease;
|
||||
|
||||
// Hide on tablet and desktop
|
||||
@include media-breakpoint-up(md) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid $green-400;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
img,
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// When alert banner is shown, add margin to navbar
|
||||
.bds-navbar--with-banner {
|
||||
margin-top: 52px;
|
||||
}
|
||||
|
||||
// Override old top-nav padding when using new BDS navbar
|
||||
// The _top-nav.scss adds padding-top: 80px to RootLayout for old fixed navbar
|
||||
// We need to reset this for the new non-fixed navbar
|
||||
[data-component-name="layouts/RootLayout"]:has(.bds-navbar) {
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
|
||||
// Additional override with body context for higher specificity
|
||||
body [data-component-name="layouts/RootLayout"]:has(> .bds-navbar),
|
||||
body [data-component-name="layouts/RootLayout"]:has(header.bds-navbar) {
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
|
||||
// Ensure full-width layout when BDS navbar is present
|
||||
html:has(.bds-navbar) {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body:has(.bds-navbar) {
|
||||
overflow-x: hidden;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
[data-component-name="layouts/RootLayout"]:has(.bds-navbar) {
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
margin: 0;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
// Style scrollbar to match navbar background (light mode)
|
||||
html.light:has(.bds-navbar) {
|
||||
// Webkit browsers (Chrome, Safari, Edge)
|
||||
&::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
background-color: $white;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: $white;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: $gray-300;
|
||||
border-radius: 6px;
|
||||
border: 3px solid $white;
|
||||
|
||||
&:hover {
|
||||
background-color: $gray-400;
|
||||
}
|
||||
}
|
||||
|
||||
// Firefox
|
||||
scrollbar-color: $gray-300 $white;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Submenu Backdrop Blur Overlay
|
||||
// Blurs the page content when submenu is open
|
||||
// =============================================================================
|
||||
|
||||
.bds-submenu-backdrop {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: $bds-navbar-height-desktop; // Start below navbar
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 999; // Below navbar (1000) and submenu (1001)
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
background-color: rgba($gray-200, 0.65); // Semi-transparent gray
|
||||
backdrop-filter: blur(17.5px);
|
||||
-webkit-backdrop-filter: blur(17.5px);
|
||||
transition: opacity 300ms ease-out;
|
||||
|
||||
// Only show on tablet and desktop
|
||||
@include media-breakpoint-up(md) {
|
||||
display: block;
|
||||
top: $bds-navbar-height-tablet;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
top: $bds-navbar-height-desktop;
|
||||
}
|
||||
|
||||
// Active state
|
||||
&--active {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Desktop Submenu Styles
|
||||
// Two-column layout with sequential animation
|
||||
// Matches Figma design: 612px wide, 390px tall, gray background container
|
||||
// Animation: Open = left drops down from top, then right slides out from left
|
||||
// Close = right slides back left, then left slides up (reverse)
|
||||
// =============================================================================
|
||||
|
||||
.bds-submenu {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 1001;
|
||||
pointer-events: none;
|
||||
overflow: hidden; // Clip content during animation
|
||||
opacity: 0; // Hidden by default
|
||||
visibility: hidden; // Prevent interaction when hidden
|
||||
|
||||
// Container with gray background
|
||||
width: 612px;
|
||||
height: 390px;
|
||||
padding: 8px;
|
||||
gap: 8px;
|
||||
background-color: $gray-200; // #E6EAF0 - Neutral 200
|
||||
|
||||
// On close: wait for column animations (300ms + 200ms delay), then hide container
|
||||
transition: opacity 100ms ease-out 400ms, visibility 0ms linear 500ms;
|
||||
|
||||
// Only show on tablet and desktop
|
||||
@include media-breakpoint-up(md) {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
// Active state - triggered by hover
|
||||
&--active {
|
||||
pointer-events: auto;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
// On open: show immediately
|
||||
transition: opacity 0ms, visibility 0ms;
|
||||
|
||||
.bds-submenu__left {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
// On open: left drops down first (no delay)
|
||||
transition: transform 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98),
|
||||
opacity 150ms ease-out;
|
||||
}
|
||||
|
||||
.bds-submenu__right {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
// On open: right slides out second (delayed by 200ms)
|
||||
transition: transform 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98) 200ms,
|
||||
opacity 150ms ease-out 200ms;
|
||||
}
|
||||
}
|
||||
|
||||
// Wrapper to bridge gap between nav item and submenu
|
||||
&-wrapper {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding-top: 0; // No gap - submenu starts right at navbar bottom
|
||||
}
|
||||
|
||||
// Left column - slides down from top (starts completely above)
|
||||
&__left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
width: 298px;
|
||||
height: 374px; // Fixed height to match design
|
||||
transform: translateY(-100%); // Start completely above (hidden)
|
||||
opacity: 0;
|
||||
background-color: $gray-200; // Background on column so it animates with content
|
||||
// On close: left animates second (delayed), slides back up
|
||||
transition: transform 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98) 200ms,
|
||||
opacity 150ms ease-in 350ms;
|
||||
}
|
||||
|
||||
// Right column - slides from left (starts completely to the left)
|
||||
&__right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
width: 290px;
|
||||
height: 374px; // Fixed height to match design
|
||||
transform: translateX(-100%); // Start completely to the left (hidden behind left column)
|
||||
opacity: 0;
|
||||
background-color: $gray-200; // Background on column so it animates with content
|
||||
// On close: right animates first (no delay), slides back left
|
||||
transition: transform 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98),
|
||||
opacity 150ms ease-in 150ms;
|
||||
}
|
||||
|
||||
// Section card (white background)
|
||||
&__section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
flex: 1 0 0;
|
||||
min-height: 1px;
|
||||
min-width: 1px;
|
||||
padding: 16px 24px;
|
||||
background-color: $white;
|
||||
}
|
||||
|
||||
// Tier 1 item (main item with icon)
|
||||
&__tier1 {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Tier 2 list (sub-items)
|
||||
&__tier2 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
width: 100%;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
// Icon container (SVGs have background colors built in)
|
||||
&__icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// Main link item (Tier 1)
|
||||
&__link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
color: $black;
|
||||
text-decoration: none;
|
||||
font-family: $font-family-sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 23.2px;
|
||||
white-space: nowrap;
|
||||
transition: color 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
color: $green-400;
|
||||
|
||||
.bds-submenu__arrow {
|
||||
transform: translateX(2px);
|
||||
}
|
||||
}
|
||||
|
||||
// Bold style for main items
|
||||
&--bold {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
// Sub-link item (Tier 2)
|
||||
&__sublink {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
color: $black;
|
||||
text-decoration: none;
|
||||
font-family: $font-family-sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
line-height: 23.2px;
|
||||
white-space: nowrap;
|
||||
transition: color 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
color: $green-400;
|
||||
}
|
||||
|
||||
// Active state (green with arrow)
|
||||
&--active {
|
||||
color: $green-400;
|
||||
font-weight: 400;
|
||||
|
||||
.bds-submenu__arrow {
|
||||
display: inline-flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Arrow icon for links
|
||||
&__arrow {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 15px;
|
||||
height: 14px;
|
||||
flex-shrink: 0;
|
||||
transition: transform 0.2s ease;
|
||||
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// Hide arrow by default on sub-links (shown on active)
|
||||
&__sublink &__arrow {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Nav item wrapper (no longer used for submenu positioning)
|
||||
.bds-navbar__item-wrapper {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Mobile Menu Styles
|
||||
// Full-screen accordion menu for mobile devices
|
||||
// =============================================================================
|
||||
|
||||
.bds-mobile-menu {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: $white;
|
||||
z-index: 1002;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
transform: translateX(100%);
|
||||
transition: transform 300ms ease-out;
|
||||
|
||||
// Only show on mobile (below tablet breakpoint)
|
||||
@include media-breakpoint-down(sm) {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
// Open state
|
||||
&--open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
// Mobile menu header
|
||||
&__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 80px;
|
||||
padding: 24px;
|
||||
background-color: $white;
|
||||
border-bottom: 1px solid $gray-200;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
// Close button (X icon)
|
||||
&__close {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
|
||||
img, svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// Menu content area
|
||||
&__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
width: 343px;
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// Accordion item container
|
||||
&__accordion {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Accordion item header (clickable)
|
||||
&__accordion-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
padding: 16px 8px;
|
||||
background-color: $white;
|
||||
border: none;
|
||||
border-bottom: 1px solid $gray-300;
|
||||
cursor: pointer;
|
||||
font-family: $font-family-sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 20.1px;
|
||||
color: $black;
|
||||
text-align: left;
|
||||
|
||||
&:hover {
|
||||
background-color: $gray-100;
|
||||
}
|
||||
}
|
||||
|
||||
// Accordion chevron
|
||||
&__chevron {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 13px;
|
||||
height: 8px;
|
||||
transition: transform 200ms ease;
|
||||
|
||||
img, svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
// Expanded state - rotate chevron
|
||||
&--expanded {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
// Accordion content (collapsible)
|
||||
&__accordion-content {
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 300ms ease-out;
|
||||
background-color: $white;
|
||||
border-bottom: 1px solid $gray-300;
|
||||
|
||||
// Expanded state
|
||||
&--expanded {
|
||||
max-height: 600px;
|
||||
}
|
||||
}
|
||||
|
||||
// Tier list inside accordion
|
||||
&__tier-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
padding: 8px 8px 16px 8px;
|
||||
}
|
||||
|
||||
// Tier 1 item (main item with icon)
|
||||
&__tier1 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Tier 2 list (sub-items)
|
||||
&__tier2 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
width: 100%;
|
||||
padding-left: 26px; // Indent for sub-items (icon width + gap)
|
||||
}
|
||||
|
||||
// Mobile icon container (smaller than desktop, SVGs have background colors built in)
|
||||
&__icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// Mobile link item
|
||||
&__link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
color: $black;
|
||||
text-decoration: none;
|
||||
font-family: $font-family-sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 20.1px;
|
||||
white-space: nowrap;
|
||||
transition: color 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
color: $green-400;
|
||||
}
|
||||
|
||||
// Bold style for main items
|
||||
&--bold {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
// Mobile sub-link item
|
||||
&__sublink {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
color: $black;
|
||||
text-decoration: none;
|
||||
font-family: $font-family-sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
line-height: 20.1px;
|
||||
white-space: nowrap;
|
||||
transition: color 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
color: $green-400;
|
||||
}
|
||||
|
||||
// Active state (green with arrow)
|
||||
&--active {
|
||||
color: $green-400;
|
||||
font-weight: 400;
|
||||
|
||||
.bds-mobile-menu__arrow {
|
||||
display: inline-flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Mobile arrow icon
|
||||
&__arrow {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 14px;
|
||||
height: 13px;
|
||||
flex-shrink: 0;
|
||||
transition: transform 0.2s ease;
|
||||
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// Hide arrow by default on sub-links
|
||||
&__sublink &__arrow {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Mobile menu footer
|
||||
&__footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 24px;
|
||||
background-color: $white;
|
||||
flex-shrink: 0;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
// Footer language pill (smaller version)
|
||||
&__lang-pill {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
height: 28px;
|
||||
padding: 8px 9px 8px 8px;
|
||||
background: transparent;
|
||||
border: 1px solid $black;
|
||||
border-radius: 100px;
|
||||
cursor: pointer;
|
||||
font-family: $font-family-sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 20.1px;
|
||||
color: $black;
|
||||
|
||||
&:hover {
|
||||
background-color: $gray-100;
|
||||
}
|
||||
}
|
||||
|
||||
&__lang-pill-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&__lang-pill-text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
&__lang-pill-chevron {
|
||||
width: 8px;
|
||||
height: 13px;
|
||||
transform: rotate(90deg);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
// Footer icon buttons
|
||||
&__footer-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
|
||||
img, svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Body scroll lock when mobile menu is open
|
||||
body.bds-mobile-menu-open {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// Body scroll lock when desktop submenu is open
|
||||
body.bds-submenu-open {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -86,6 +86,7 @@ $line-height-base: 1.5;
|
||||
@import "_use-cases.scss";
|
||||
@import "_github-edit.scss";
|
||||
@import "_top-nav.scss";
|
||||
@import "_bds-navbar.scss";
|
||||
@import "_top-banner.scss";
|
||||
@import "_content.scss";
|
||||
@import "../shared/components/PageGrid/page-grid";
|
||||
|
||||
Reference in New Issue
Block a user