From 371b009b654586e78d5a1057a6f973b49952f277 Mon Sep 17 00:00:00 2001 From: baburay23 <54642337+baburay23@users.noreply.github.com> Date: Tue, 31 May 2022 15:08:13 +0100 Subject: [PATCH] docs(PPDSC-2064): doc site nav (#190) * feat(PPDSC-2064): feat-ppdse/2064 added with and icons * feat(PPDSC-2064): feat-ppdse/2064 site header tidied * feat(PPDSC-2064): feat-ppdse/2064 tidied getter functions * feat(PPDSC-2064): feat-ppdse/2064 theme switch on lg up * feat(PPDSC-2064): feat-ppdse/2064 added github button * feat(PPDSC-2064): feat-ppdse/2064 added menu collapse * feat(PPDSC-2064): feat-ppdse/2064 created menu in site * feat(PPDSC-2064): feat-ppdse/2064 sidebar files updated * feat(PPDSC-2064): feat-ppdse/2064 added divider on LG * feat(PPDSC-2064): feat-ppdse/2064 updated style preset * feat(PPDSC-2064): feat-ppdse/2064 fixed routes * feat(PPDSC-2064): feat-ppdse/2064 selected showing lg xl * feat(PPDSC-2064): feat-ppdse/2064 spacing fixed mobile * feat(PPDSC-2064): feat-ppdse/2064 passed switcher props dwn * feat(PPDSC-2064): feat-ppdse/2064 made theme switch dymanimc * feat(PPDSC-2064): feat-ppdse/2064 added github button * feat(PPDSC-2064): feat-ppdse/2064 added correct font * feat(PPDSC-2064): feat-ppdse/2064 fixed github link * feat(PPDSC-2064): feat-ppdse/2064 text on switch * feat(PPDSC-2064): feat-ppdse/2064 added-aria-att * feat(PPDSC-2064): feat-ppdse/2064 fixed 3 comments * feat(PPDSC-2064): feat-ppdse/2064 fixed divider * feat(PPDSC-2064): feat-ppdse/2064 fixed height on selected * feat(PPDSC-2064): feat-ppdse/2064 fixed github button * feat(PPDSC-2064): feat-ppdse/2064 changed theme switch pos * feat(PPDSC-2064): feat-ppdse/2064 fixed site header test * feat(PPDSC-2064): feat-ppdse/2064 fixed site header test * feat(PPDSC-2064): feat-ppdse/2064 fixed keys * feat(PPDSC-2064): feat-ppdse/2064 fixed keys and test * feat(PPDSC-2064): feat-ppdse/2064 fixed keys and test * feat(PPDSC-2064): feat-ppdse/2064 fixed sidebar test * feat(PPDSC-2064): feat-ppdse/2064 updated snaps * feat(PPDSC-2064): feat-ppdse/2064 updated height * feat(PPDSC-2064): feat-ppdse/2064 tidied * feat(PPDSC-2064): feat-ppdse/2064 updated cypress * feat(PPDSC-2064): feat-ppdse/2064 updated file names * feat(PPDSC-2064): feat-ppdse/2064 updated snapshots * feat(PPDSC-2064): feat-ppdse/2064 tidied up * feat(PPDSC-2064): feat-ppdse/2064 updated smnapshots * feat(PPDSC-2064): feat-ppdse/2064 sidebar nav has menu * feat(PPDSC-2064): feat-ppdse/2064 sidebar indicator working * feat(PPDSC-2064): feat-ppdse/2064 sidebar name update * feat(PPDSC-2064): feat-ppdse/2064 sidebar indicator height done * feat(PPDSC-2064): feat-ppdse/2064 added marginleft * feat(PPDSC-2064): feat-ppdse/2064 fixed sidebar width * feat(PPDSC-2064): feat-ppdse/2064 fixed last item * feat(PPDSC-2064): feat-ppdse/2064 fixed some on menu nav * feat(PPDSC-2064): feat-ppdse/2064 sorted divider * feat(PPDSC-2064): feat-ppdse/2064 fixed indicator * feat(PPDSC-2064): feat-ppdse/2064 fixed sidebar space * feat(PPDSC-2064): feat-ppdse/2064 adding space on github but * feat(PPDSC-2064): feat-ppdse/2064 changed margininline * feat(PPDSC-2064): feat-ppdse/2064 removed padding * feat(PPDSC-2064): feat-ppdse/2064 aligned title * feat(PPDSC-2064): feat-ppdse/2064 addressed mobile comments * feat(PPDSC-2064): feat-ppdse/2064 menItem on site header * feat(PPDSC-2064): feat-ppdse/2064 added mobileicon spacing * feat(PPDSC-2064): feat-ppdse/2064 fixed spacing header * feat(PPDSC-2064): feat-ppdse/2064 updated snaps * feat(PPDSC-2064): feat-ppdse/2064 fixed use Router * feat(PPDSC-2064): feat-ppdse/2064 split component * feat(PPDSC-2064): feat-ppdse/2064 scroll working * feat(PPDSC-2064): feat-ppdse/2064 ref on menuitem * feat(PPDSC-2064): feat-ppdse/2064 ref on menuitem * feat(PPDSC-2064): feat-ppdse/2064 got rid of menu selected * docs(PPDSC-2064): docs-ppdse-2064-removed id * docs(PPDSC-2064): docs-ppdse-2064-updated tests * docs(PPDSC-2064): docs-ppdse-2064-moved div inside li * docs(PPDSC-2064): docs-ppdse-2064-SH indicator working * docs(PPDSC-2064): docs-ppdse-2064-fixed html structure * docs(PPDSC-2064): docs-ppdse-2064-fixed stylepreset fonts * docs(PPDSC-2064): docs-ppdse-2064-centered logo * docs(PPDSC-2064): docs-ppdse-2064-updated tests * docs(PPDSC-2064): docs-ppdse-2064-fixed * docs(PPDSC-2064): docs-ppdse-2064-updated snapshots * docs(PPDSC-2064): docs-ppdse-2064-sidebar gap fixed * docs(PPDSC-2064): docs-ppdse-2064-fixed hoover * docs(PPDSC-2064): docs-ppdse-2064-fixed routes and added grid * docs(PPDSC-2064): docs-ppdse-2064-fixed changed aria labl * docs(PPDSC-2064): docs-ppdse-2064-removed divider * docs(PPDSC-2064): docs-ppdse-2064-uding selected reomved ind * docs(PPDSC-2064): docs-ppdse-2064-removed indicator sidebar * docs(PPDSC-2064): docs-ppdse-2064-fixd menu indi * docs(PPDSC-2064): docs-ppdse-2064-grid on site header * docs(PPDSC-2064): docs-ppdse-2064-fixed site header grid * docs(PPDSC-2064): docs-ppdse-2064-menu site header fixed * docs(PPDSC-2064): docs-ppdse-2064-added drawer mobile * docs(PPDSC-2064): docs-ppdse-2064-got rid of extrs spacing * docs(PPDSC-2064): docs-ppdse-2064-fixed title spacing * docs(PPDSC-2064): docs-ppdse-2064-indicator now aligned * docs(PPDSC-2064): docs-ppdse-2064-changed label to p tag * docs(PPDSC-2064): docs-ppdse-2064-removec comments * docs(PPDSC-2064): docs-ppdse-2064-drawer working * docs(PPDSC-2064): docs-ppdse-2064-added drawer kground * docs(PPDSC-2064): docs-ppdse-2064-centered * docs(PPDSC-2064): docs-ppdse-2064-updated test and text block * docs(PPDSC-2064): docs-ppdse-2064-tidied up * docs(PPDSC-2064): docs-ppdse-2064-fixed header on xs * docs(PPDSC-2064): docs-ppdse-2064-fixed h3 to p * docs(PPDSC-2064): docs-ppdse-2064-fixed test * docs(PPDSC-2064): docs-ppdse-2064-updated snapshots * docs(PPDSC-2064): docs-ppdse-2064-comments * docs(PPDSC-2064): docs-ppdse-2064-addressed comments * docs(PPDSC-2064): docs-ppdse-2064-fixed anchor link * docs(PPDSC-2064): docs-ppdse-2064-addressed comments * docs(PPDSC-2064): docs-ppdse-2064-path as prop * docs(PPDSC-2064): docs-ppdse-2064-fixed space * docs(PPDSC-2064): docs-ppdse-2064-fixed theme * docs(PPDSC-2064): docs-ppdse-2064-design comments * docs(PPDSC-2064): docs-ppdse-2064-addressed pr comments * docs(PPDSC-2064): docs-ppdse-2064-added icon as button * docs(PPDSC-2064): docs-ppdse-2064-fixed indention divider * docs(PPDSC-2064): docs-ppdse-2064-updated tests * docs(PPDSC-2064): docs-ppdse-2064-tidied up * docs(PPDSC-2064): docs-ppdse-2064-li last of tyoe 24px * docs(PPDSC-2064): docs-ppdse-2064-fixed overview * docs(PPDSC-2064): docs-ppdse-2064-centered? * docs(PPDSC-2064): docs-ppdse-2064-updated tests * docs(PPDSC-2064): docs-ppdse-2064-cypress test passing * docs(PPDSC-2064): docs-ppdse-2064-updated tests * docs(PPDSC-2064): docs-ppdse-2064-tidied roots * docs(PPDSC-2064): docs-ppdse-2064-fixed onclick * docs(PPDSC-2064): docs-ppdse-2064-removed mobile switch * docs(PPDSC-2064): docs-ppdse-2064-addressed comments * docs(PPDSC-2064): docs-ppdse-2064-fixed layout * docs(PPDSC-2064): docs-ppdse-2064-fixed sidebar * docs(PPDSC-2064): docs-ppdse-2064-fixed routes * docs(PPDSC-2064): docs-ppdse-2064-fixed tests * docs(PPDSC-2064): docs-ppdse-2064-removed prop Co-authored-by: Stoyan Delev --- .../site/functional/header-navigation.spec.js | 16 +- .../__snapshots__/site-header.test.tsx.snap | 4421 +++--- .../__snapshots__/icons.test.tsx.snap | 89 + .../icons/icon-filled-expand-less.tsx | 13 + .../icons/icon-filled-expand-more.tsx | 13 + site/components/icons/index.tsx | 2 + site/components/layout.tsx | 5 +- .../__snapshots__/logo.test.tsx.snap | 30 +- site/components/logo/newskit-logo.tsx | 9 +- .../menu-collapsible/menu-collapsible.tsx | 172 + site/components/menu-collapsible/styled.tsx | 80 + .../__snapshots__/meta.test.tsx.snap | 4 +- .../sidebar-navigation.test.tsx.snap | 2787 +++- .../__snapshots__/sidebar.test.tsx.snap | 12988 +++++++++++++++- .../__tests__/sidebar-navigation.test.tsx | 8 - .../components/sidebar/sidebar-navigation.tsx | 175 +- site/components/sidebar/sidebar.tsx | 136 +- site/components/sidebar/styled.tsx | 94 +- site/components/sidebar/types.ts | 35 +- site/components/site-header.tsx | 280 +- site/components/theme-switch.tsx | 26 +- site/pages/theme/overview.tsx | 7 +- site/routes.ts | 154 +- .../__snapshots__/doc-theme.test.ts.snap | 504 +- site/theme/style-presets.ts | 61 +- 25 files changed, 18635 insertions(+), 3474 deletions(-) create mode 100644 site/components/icons/icon-filled-expand-less.tsx create mode 100644 site/components/icons/icon-filled-expand-more.tsx create mode 100644 site/components/menu-collapsible/menu-collapsible.tsx create mode 100644 site/components/menu-collapsible/styled.tsx diff --git a/cypress/site/functional/header-navigation.spec.js b/cypress/site/functional/header-navigation.spec.js index d662a6a337..726c98296c 100644 --- a/cypress/site/functional/header-navigation.spec.js +++ b/cypress/site/functional/header-navigation.spec.js @@ -2,7 +2,7 @@ const hamburgerIconTestID = '[data-testid="mobile-menu-icon"]'; const sidebarTestID = '[data-testid="sidebar"]'; -const overlayTestID = '[data-testid="overlay"]'; +const indicatorID = '[data-testid="styled-indicator"]'; describe('Documentation Site - header-navigation component', () => { before(() => { @@ -13,12 +13,9 @@ describe('Documentation Site - header-navigation component', () => { it('should contain logo', () => { cy.get('[data-testid="logo-container"]').should('exist'); }); - it('should highlight active section', () => { cy.visit('/about/introduction'); - cy.contains('About').within(() => - cy.get('div').should('have.attr', 'aria-current'), - ); + cy.get(indicatorID).should('have.attr', 'aria-current'); }); }); @@ -30,18 +27,9 @@ describe('Documentation Site - header-navigation component', () => { cy.get(sidebarTestID).should('exist').and('not.be.visible'); cy.get(hamburgerIconTestID).first().click(); cy.get(sidebarTestID).should('be.visible'); - cy.get('body').should('have.css', 'overflow', 'hidden'); - cy.get(overlayTestID).should('have.css', 'visibility', 'visible'); cy.get(hamburgerIconTestID).first().click(); cy.get(sidebarTestID).should('exist').and('not.be.visible'); - cy.get('body').should('have.css', 'overflow', 'visible'); - cy.get(overlayTestID).should('have.css', 'visibility', 'hidden'); - }); - - it('burger menu should not be visible on the homepage', () => { - cy.visit('/'); - cy.get(hamburgerIconTestID).should('not.exist'); }); }); }); diff --git a/site/components/__tests__/__snapshots__/site-header.test.tsx.snap b/site/components/__tests__/__snapshots__/site-header.test.tsx.snap index ee94e1c954..e6e7d7dd84 100644 --- a/site/components/__tests__/__snapshots__/site-header.test.tsx.snap +++ b/site/components/__tests__/__snapshots__/site-header.test.tsx.snap @@ -3,188 +3,198 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section within /about 1`] = ` .emotion-0 { - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; + border-bottom-style: solid; position: fixed; - top: 0; right: 0; left: 0; z-index: 4; + height: 48px; + border-bottom-width: 1px; + border-bottom-color: #E4E4E4; background-color: #FFFFFF; font-family: "Poppins",sans-serif; font-size: 14px; line-height: 1.5; font-weight: 500; letter-spacing: 0; - padding-top: 8px; - padding-bottom: 8px; - box-shadow: 0 4px 8px 0 rgba(10,10,10,0.08); + padding-top: 0; + padding-bottom: 0; } @media screen and (min-width: 1024px) { .emotion-0 { - padding-top: 12px; - padding-bottom: 12px; - box-shadow: 0 8px 16px 0 rgba(10,10,10,0.08); height: 80px; } } -.emotion-1 { - width: 100%; - max-width: 9999px; - margin: 0 auto; -} - -.emotion-2 { - box-sizing: border-box; - -webkit-background-clip: padding-box; - background-clip: padding-box; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-flex-wrap: wrap; - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - position: -webkit-sticky; - position: sticky; -} - @media screen { - .emotion-2 { - margin: -16px 8px 0 8px; + .emotion-1 { + display: block; } } @media screen and (min-width: 480px) { - .emotion-2 { - margin: -16px 8px 0 8px; + .emotion-1 { + display: block; } } @media screen and (min-width: 768px) { - .emotion-2 { - margin: -16px 8px 0 8px; + .emotion-1 { + display: block; } } @media screen and (min-width: 1024px) { - .emotion-2 { - margin: -24px 12px 0 12px; + .emotion-1 { + display: none; } } @media screen and (min-width: 1440px) { - .emotion-2 { - margin: -24px 12px 0 12px; + .emotion-1 { + display: none; } } -.emotion-3 { - box-sizing: border-box; - -webkit-background-clip: padding-box; - background-clip: padding-box; - -webkit-flex: 1 0 auto; - -ms-flex: 1 0 auto; - flex: 1 0 auto; +.emotion-2 { + display: grid; + justify-items: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; } @media screen { - .emotion-3 { - -webkit-order: 1; - -ms-flex-order: 1; - order: 1; - padding: 0 8px; - margin-top: 16px; - -webkit-flex-basis: 50%; - -ms-flex-preferred-size: 50%; - flex-basis: 50%; - max-width: 50%; + .emotion-2 { + grid-template-columns: 50px 1fr 50px; } } -@media screen and (min-width: 1024px) { - .emotion-3 { - padding: 0 12px; - margin-top: 24px; - } +.emotion-3 { + font-size: 0; + margin-left: 16px; + margin-bottom: 4px; } .emotion-4 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - height: 100%; + box-sizing: border-box; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-pack: start; - -ms-flex-pack: start; - -webkit-justify-content: flex-start; - justify-content: flex-start; + -webkit-text-decoration: none; + text-decoration: none; + width: 32px; + height: 32px; + padding: 8px; + cursor: default; + overflow: hidden; + border: none; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + background-color: transparent; + border-radius: 50%; + color: #577FFB; + margin: 0; + cursor: pointer; } -@media screen { - .emotion-5 { - display: block; - } +.emotion-4 svg { + width: 16px; + height: 16px; } -@media screen and (min-width: 480px) { - .emotion-5 { - display: block; - } +.emotion-4 svg { + fill: #577FFB; } -@media screen and (min-width: 768px) { - .emotion-5 { - display: none; - } +.emotion-4:hover:not(:disabled) { + background-color: #E0E7FF; } -@media screen and (min-width: 1024px) { - .emotion-5 { - display: none; +.emotion-4:active:not(:disabled) { + background-color: #AEBFFF; +} + +.emotion-4:disabled { + background-color: transparent; + color: #C0C0C0; +} + +.emotion-4:disabled svg { + fill: #C0C0C0; +} + +@media screen and (prefers-reduced-motion: no-preference) { + .emotion-4 { + transition-property: background-color; + transition-duration: 200ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); } } -@media screen and (min-width: 1440px) { - .emotion-5 { - display: none; +@media screen and (prefers-reduced-motion: reduce) { + .emotion-4 { + transition-property: background-color; + transition-duration: 0ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); } } -.emotion-7 { - font-size: 0; - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; - margin-right: 16px; +.emotion-5 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + height: 100%; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + margin-left: calc(-8px/2); + margin-right: calc(-8px/2); +} + +.emotion-6 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + margin-left: calc(8px/2); + margin-right: calc(8px/2); } -.emotion-8 { +.emotion-7 { display: inline-block; vertical-align: middle; overflow: hidden; - color: #577FFB; - fill: #577FFB; + color: #0A0A0A; + fill: #0A0A0A; vertical-align: unset; display: inline-block; } @media screen and (prefers-reduced-motion: no-preference) { - .emotion-8 { + .emotion-7 { transition-property: fill; transition-duration: 200ms; transition-timing-function: cubic-bezier(0, 0, .5, 1); @@ -192,22 +202,22 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi } @media screen and (prefers-reduced-motion: reduce) { - .emotion-8 { + .emotion-7 { transition-property: fill; transition-duration: 0ms; transition-timing-function: cubic-bezier(0, 0, .5, 1); } } -.emotion-8.emotion-8 { - width: 32px; - height: 32px; - color: #577FFB; - fill: #577FFB; +.emotion-7.emotion-7 { + width: 24px; + height: 24px; + color: #0A0A0A; + fill: #0A0A0A; } @media screen and (prefers-reduced-motion: no-preference) { - .emotion-8.emotion-8 { + .emotion-7.emotion-7 { transition-property: fill; transition-duration: 200ms; transition-timing-function: cubic-bezier(0, 0, .5, 1); @@ -215,20 +225,20 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi } @media screen and (prefers-reduced-motion: reduce) { - .emotion-8.emotion-8 { + .emotion-7.emotion-7 { transition-property: fill; transition-duration: 0ms; transition-timing-function: cubic-bezier(0, 0, .5, 1); } } -.emotion-10 { +.emotion-9 { display: inline-block; color: #2E2E2E; } @media screen and (prefers-reduced-motion: no-preference) { - .emotion-10 { + .emotion-9 { transition-property: color,fill; transition-duration: 200ms,200ms; transition-timing-function: cubic-bezier(0, 0, .5, 1),cubic-bezier(0, 0, .5, 1); @@ -236,445 +246,459 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi } @media screen and (prefers-reduced-motion: reduce) { - .emotion-10 { + .emotion-9 { transition-property: color,fill; transition-duration: 0ms; transition-timing-function: cubic-bezier(0, 0, .5, 1),cubic-bezier(0, 0, .5, 1); } } -.emotion-10 svg { +.emotion-9 svg { fill: #2E2E2E; } -.emotion-12 { +.emotion-10 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; + height: 100%; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; - width: 64px; - height: 40px; - overflow: hidden; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: start; + -ms-flex-pack: start; + -webkit-justify-content: flex-start; + justify-content: flex-start; } -.emotion-13 { - display: inline-block; - fill: #2E2E2E; - color: #2E2E2E; - width: 48px; - height: 32px; +.emotion-11 { + overflow: hidden; } -@media screen { - .emotion-14 { - display: none; +@media screen and (min-width: 1024px) { + .emotion-11 { + margin-left: 24px; } } -@media screen and (min-width: 480px) { - .emotion-14 { - display: none; - } +.emotion-12 { + display: inline-block; + height: 48px; } -@media screen and (min-width: 768px) { - .emotion-14 { - display: block; +@media screen and (max-width: 1023px) { + .emotion-12 { + width: 125px; } } @media screen and (min-width: 1024px) { - .emotion-14 { - display: none; - } -} - -@media screen and (min-width: 1440px) { - .emotion-14 { - display: none; + .emotion-12 { + width: 183px; } } -.emotion-21 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - height: 52px; - overflow: hidden; -} - -.emotion-22 { - display: inline-block; - width: 183px; - height: 40px; -} - -.emotion-23 { +.emotion-13 { fill: #162740; color: #162740; } @media screen { - .emotion-24 { + .emotion-14 { display: none; } } @media screen and (min-width: 480px) { - .emotion-24 { + .emotion-14 { display: none; } } @media screen and (min-width: 768px) { - .emotion-24 { + .emotion-14 { display: none; } } @media screen and (min-width: 1024px) { - .emotion-24 { + .emotion-14 { display: block; } } @media screen and (min-width: 1440px) { - .emotion-24 { + .emotion-14 { display: block; } } -.emotion-30 { - box-sizing: border-box; - -webkit-background-clip: padding-box; - background-clip: padding-box; - -webkit-flex: 1 0 auto; - -ms-flex: 1 0 auto; - flex: 1 0 auto; -} - -@media screen { - .emotion-30 { - -webkit-order: 3; - -ms-flex-order: 3; - order: 3; - padding: 0 8px; - margin-top: 16px; - -webkit-flex-basis: 100%; - -ms-flex-preferred-size: 100%; - flex-basis: 100%; - max-width: 100%; - } +.emotion-15 { + display: grid; + -webkit-column-gap: 20px; + column-gap: 20px; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; } @media screen and (min-width: 1024px) { - .emotion-30 { - -webkit-order: 2; - -ms-flex-order: 2; - order: 2; - padding: 0 12px; - margin-top: 24px; - -webkit-flex-basis: 41.66666666666667%; - -ms-flex-preferred-size: 41.66666666666667%; - flex-basis: 41.66666666666667%; - max-width: 41.66666666666667%; - } -} - -.emotion-31 { - height: 100%; -} - -@media screen { - .emotion-31 { - display: none; + .emotion-15 { + grid-template-columns: 276px 1fr auto 80px; } } -@media screen and (min-width: 480px) { - .emotion-31 { - display: none; +@media screen and (min-width: 1024px) { + .emotion-15 { + grid-template-areas: "logo menu github theme"; } } -@media screen and (min-width: 768px) { - .emotion-31 { - display: none; - } +.emotion-16 { + grid-area: logo; + justify-self: start; } -@media screen and (min-width: 1024px) { - .emotion-31 { - display: block; - } +.emotion-22 { + grid-area: menu; + justify-self: start; } -@media screen and (min-width: 1440px) { - .emotion-31 { - display: block; - } +.emotion-23 { + box-sizing: border-box; + width: 100%; } -.emotion-32 { +.emotion-23>ul { + box-sizing: border-box; + list-style-type: none; + margin: 0; + padding: 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; - height: 100%; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-pack: end; - -ms-flex-pack: end; - -webkit-justify-content: flex-end; - justify-content: flex-end; - margin-left: calc(-40px/2); - margin-right: calc(-40px/2); + width: 100%; +} + +.emotion-23 li:last-of-type { + margin-right: 0; } -.emotion-33 { +.emotion-24 { + box-sizing: border-box; + margin-right: 8px; +} + +.emotion-25 { + box-sizing: border-box; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; - margin-left: calc(40px/2); - margin-right: calc(40px/2); -} - -.emotion-34 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - height: 100%; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-pack: end; - -ms-flex-pack: end; - -webkit-justify-content: flex-end; - justify-content: flex-end; - margin-left: calc(-40px/2); - margin-right: calc(-40px/2); + -webkit-text-decoration: none; + text-decoration: none; + min-height: 80px; + width: 100%; + padding: 12px 16px; + margin-inline: 10px; + cursor: default; + overflow: hidden; + border: none; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + color: #535353; + -webkit-text-decoration: none; + text-decoration: none; + border-color: transparent; + border-width: 4px; + border-style: solid; + margin: 0; + cursor: pointer; + margin-inline: 10px; + color: #577FFB; + -webkit-text-decoration: none; + text-decoration: none; + border-color: transparent transparent #577FFB transparent; + border-width: 4px; + border-style: solid; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + text-align: center; } -.emotion-36 { - padding: 4px; +.emotion-25 svg { + width: 24px; + height: 24px; } -.emotion-37 { - display: inline-block; +.emotion-25:hover:not(:disabled) { color: #535353; -webkit-text-decoration: none; text-decoration: none; } @media screen and (prefers-reduced-motion: no-preference) { - .emotion-37 { - transition-property: color,fill; - transition-duration: 200ms,200ms; - transition-timing-function: cubic-bezier(0, 0, .5, 1),cubic-bezier(0, 0, .5, 1); + .emotion-25 { + transition-property: background-color; + transition-duration: 200ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); } } @media screen and (prefers-reduced-motion: reduce) { - .emotion-37 { - transition-property: color,fill; + .emotion-25 { + transition-property: background-color; transition-duration: 0ms; - transition-timing-function: cubic-bezier(0, 0, .5, 1),cubic-bezier(0, 0, .5, 1); + transition-timing-function: cubic-bezier(0, 0, .5, 1); } } -.emotion-37:hover:not(:disabled) { - color: #535353; - -webkit-text-decoration: none; - text-decoration: none; -} - -.emotion-37:active:not(:disabled) { - color: #0A0A0A; - -webkit-text-decoration: none; - text-decoration: none; -} - -.emotion-39 { +.emotion-28 { + margin: 0; font-family: "Poppins",sans-serif; font-size: 14px; line-height: 21px; font-weight: 600; letter-spacing: 0; padding: 0.5px 0px; - color: #0A0A0A; - box-sizing: border-box; + display: inline-block; } -.emotion-39::before { +.emotion-28::before { content: ''; margin-bottom: -0.403em; display: block; } -.emotion-39::after { +.emotion-28::after { content: ''; margin-top: -0.4em; display: block; } -.emotion-44 { - font-family: "Poppins",sans-serif; - font-size: 14px; - line-height: 21px; - font-weight: 600; - letter-spacing: 0; - padding: 0.5px 0px; - color: #535353; +.emotion-30 { box-sizing: border-box; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-text-decoration: none; + text-decoration: none; + min-height: 80px; + width: 100%; + padding: 12px 16px; + margin-inline: 10px; + cursor: default; + overflow: hidden; + border: none; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + color: #535353; + -webkit-text-decoration: none; + text-decoration: none; + border-color: transparent; + border-width: 4px; + border-style: solid; + margin: 0; + cursor: pointer; + margin-inline: 10px; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + text-align: center; } -.emotion-44::before { - content: ''; - margin-bottom: -0.403em; - display: block; +.emotion-30 svg { + width: 24px; + height: 24px; } -.emotion-44::after { - content: ''; - margin-top: -0.4em; - display: block; +.emotion-30:hover:not(:disabled) { + color: #535353; + -webkit-text-decoration: none; + text-decoration: none; } -@media screen { - .emotion-55 { - display: block; +@media screen and (prefers-reduced-motion: no-preference) { + .emotion-30 { + transition-property: background-color; + transition-duration: 200ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); } } -@media screen and (min-width: 480px) { - .emotion-55 { - display: block; +@media screen and (prefers-reduced-motion: reduce) { + .emotion-30 { + transition-property: background-color; + transition-duration: 0ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); } } -@media screen and (min-width: 768px) { - .emotion-55 { - display: block; - } +.emotion-44 { + grid-area: github; } -@media screen and (min-width: 1024px) { - .emotion-55 { - display: none; - } +.emotion-45 { + box-sizing: border-box; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-text-decoration: none; + text-decoration: none; + min-width: 130px; + height: 30px; + padding: 8px 12px; + cursor: default; + overflow: hidden; + border: none; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + background-color: transparent; + border-style: solid; + border-color: #535353; + border-width: 1px; + border-radius: 24px; + color: #2E2E2E; + margin: 0; + cursor: pointer; } -@media screen and (min-width: 1440px) { - .emotion-55 { - display: none; - } +.emotion-45 svg { + width: 16px; + height: 16px; } -.emotion-56 { - box-sizing: border-box; - position: relative; - overflow: hidden; - height: 100%; +.emotion-45 svg { + fill: #2E2E2E; } -.emotion-57 { - box-sizing: border-box; - height: 100%; - overflow-x: auto; - overflow-y: auto; - scroll-behavior: smooth; +.emotion-45:hover:not(:disabled) { + background-color: #F4F4F4; + border-color: #2E2E2E; } -.emotion-57::-webkit-scrollbar { - display: none; +.emotion-45:active:not(:disabled) { + background-color: #CCCCCC; + border-color: #0A0A0A; } -.emotion-57 { - -ms-overflow-style: none; - scrollbar-width: none; +.emotion-45:disabled { + border-color: #F4F4F4; + color: #C0C0C0; } -.emotion-58 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - height: 100%; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-pack: space-around; - -ms-flex-pack: space-around; - -webkit-justify-content: space-around; - justify-content: space-around; - margin-left: calc(-40px/2); - margin-right: calc(-40px/2); +.emotion-45:disabled svg { + fill: #C0C0C0; } -.emotion-79 { - box-sizing: border-box; - -webkit-background-clip: padding-box; - background-clip: padding-box; - -webkit-flex: 1 0 auto; - -ms-flex: 1 0 auto; - flex: 1 0 auto; +@media screen and (prefers-reduced-motion: no-preference) { + .emotion-45 { + transition-property: background-color; + transition-duration: 200ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } } -@media screen { - .emotion-79 { - -webkit-order: 2; - -ms-flex-order: 2; - order: 2; - padding: 0 8px; - margin-top: 16px; - margin-left: 41.66666666666667%; - -webkit-flex-basis: 8.333333333333334%; - -ms-flex-preferred-size: 8.333333333333334%; - flex-basis: 8.333333333333334%; - max-width: 8.333333333333334%; +@media screen and (prefers-reduced-motion: reduce) { + .emotion-45 { + transition-property: background-color; + transition-duration: 0ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); } } -@media screen and (min-width: 1024px) { - .emotion-79 { - -webkit-order: 3; - -ms-flex-order: 3; - order: 3; - padding: 0 12px; - margin-top: 24px; - margin-left: 0; +.emotion-48 { + fill: #2E2E2E; + vertical-align: unset; + display: inline-block; +} + +@media screen and (prefers-reduced-motion: no-preference) { + .emotion-48 { + transition-property: fill; + transition-duration: 200ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); } } -.emotion-80 { +@media screen and (prefers-reduced-motion: reduce) { + .emotion-48 { + transition-property: fill; + transition-duration: 0ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } +} + +.emotion-50 { + margin: 0; + font-family: "Poppins",sans-serif; + font-size: 12px; + line-height: 18px; + font-weight: 600; + letter-spacing: 0; + padding: 0.5px 0px; + display: inline-block; +} + +.emotion-50::before { + content: ''; + margin-bottom: -0.403em; + display: block; +} + +.emotion-50::after { + content: ''; + margin-top: -0.4em; + display: block; +} + +.emotion-51 { + grid-area: theme; +} + +.emotion-52 { box-sizing: border-box; display: -webkit-inline-box; display: -webkit-inline-flex; @@ -706,21 +730,21 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi cursor: pointer; } -.emotion-80 svg { +.emotion-52 svg { width: 24px; height: 24px; } -.emotion-80:hover:not(:disabled) { +.emotion-52:hover:not(:disabled) { background-color: #CCCCCC; } -.emotion-80:active:not(:disabled) { +.emotion-52:active:not(:disabled) { background-color: #CCCCCC; } @media screen and (prefers-reduced-motion: no-preference) { - .emotion-80 { + .emotion-52 { transition-property: background-color; transition-duration: 200ms; transition-timing-function: cubic-bezier(0, 0, .5, 1); @@ -728,51 +752,21 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi } @media screen and (prefers-reduced-motion: reduce) { - .emotion-80 { + .emotion-52 { transition-property: background-color; transition-duration: 0ms; transition-timing-function: cubic-bezier(0, 0, .5, 1); } } -.emotion-81 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - height: 100%; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - margin-left: calc(-8px/2); - margin-right: calc(-8px/2); -} - -.emotion-82 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - margin-left: calc(8px/2); - margin-right: calc(8px/2); -} - -.emotion-83 { +.emotion-55 { fill: #2E2E2E; vertical-align: unset; display: inline-block; } @media screen and (prefers-reduced-motion: no-preference) { - .emotion-83 { + .emotion-55 { transition-property: fill; transition-duration: 200ms; transition-timing-function: cubic-bezier(0, 0, .5, 1); @@ -780,16 +774,16 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi } @media screen and (prefers-reduced-motion: reduce) { - .emotion-83 { + .emotion-55 { transition-property: fill; transition-duration: 0ms; transition-timing-function: cubic-bezier(0, 0, .5, 1); } } -.emotion-83.emotion-83 { - width: 24px; - height: 24px; +.emotion-55.emotion-55 { + width: 16px; + height: 16px; }
-
-
- -
- + + +
+ +
+ +
-
-
+ Newskit Logo + + - -
- - -
- + + + - - Newskit Logo - - - - - - - - - - - - - - - - -
- - -
+ + + + + + + +
-
+ +
+
+
+
+
+ + - - -
+ Newskit Logo + + - - - Newskit Logo - + + + - - - - - - - - - - + + + - -
- - -
-
+ + + +
+ +
- -
+ + + +
+
+
- + + +
+
+ + View Github +
-
+
+
+ + +
+ + + Newskit Logo + + + + + + + + + + + + + + + + +
+ + + + +
-
-
-
- -
- - + Newskit Logo + + -
- + + + - - Newskit Logo - - -
- - -
-
-
-
-
- -
- - -
- - - Newskit Logo - - - - - - - - - - - - - - - - -
- - -
-
-
- - -
- - - Newskit Logo - - - - - - - - - - - - - - - -
- - -
-
+ + + +
+ +
- -
+ + + +
+
+
- + + +
+
+ + View Github +
-
+
+
+ +
-
-
- -
- + Newskit Logo + + - -
+ + + - - - Newskit Logo - - - - - - - - - - - - - - - - -
- - -
+ + + + + + + +
-
+ +
+
+
+
+
+ + - - -
+ Newskit Logo + + - - - Newskit Logo - + + + - - - - - - - - - - + + + - -
- - -
-
+ + + +
+ +
- -
+ + + +
+
+
- + + +
+
+ + View Github +
-
+
+
+ +
  • + +
    +
    + + Group 1 Page 1 + +
    +
    +     +
    • + + + +
    + +
    + + + + @media screen { + .emotion-0 { + display: none; + } +} + +@media screen and (min-width: 480px) { + .emotion-0 { + display: none; + } +} + +@media screen and (min-width: 768px) { + .emotion-0 { + display: none; + } +} + +@media screen and (min-width: 1024px) { + .emotion-0 { + display: block; + } +} + +@media screen and (min-width: 1440px) { + .emotion-0 { + display: block; + } +} + +.emotion-1 { + box-sizing: border-box; + height: 100%; +} + +.emotion-1>ul { + box-sizing: border-box; + list-style-type: none; + margin: 0; + padding: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + height: 100%; +} + +.emotion-1 li:last-of-type { + margin-bottom: 0; +} + +.emotion-2 { + box-sizing: border-box; + margin-bottom: 0; +} + +.emotion-3 { + box-sizing: border-box; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-text-decoration: none; + text-decoration: none; + min-height: 40px; + width: 100%; + padding: 12px 16px; + -webkit-padding-start: 32px; + padding-inline-start: 32px; + cursor: default; + overflow: hidden; + border: none; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + -webkit-text-decoration: none; + text-decoration: none; + border-color: transparent; + border-width: 4px; + border-style: solid; + color: #535353; + margin: 0; + cursor: pointer; + -webkit-padding-start: 32px; + padding-inline-start: 32px; + -webkit-box-pack: start; + -ms-flex-pack: start; + -webkit-justify-content: flex-start; + justify-content: flex-start; + text-align: left; +} + +.emotion-3 svg { + width: 16px; + height: 16px; +} + +.emotion-3:hover:not(:disabled) { + color: #577FFB; + background-color: #E0E7FF; +} + +.emotion-3:active:not(:disabled) { + color: #213A82; +} + +@media screen and (prefers-reduced-motion: no-preference) { + .emotion-3 { + transition-property: background-color; + transition-duration: 200ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } +} + +@media screen and (prefers-reduced-motion: reduce) { + .emotion-3 { + transition-property: background-color; + transition-duration: 0ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } +} + +.emotion-4 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + height: 100%; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + margin-left: calc(-8px/2); + margin-right: calc(-8px/2); +} + +.emotion-5 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + margin-left: calc(8px/2); + margin-right: calc(8px/2); +} + +.emotion-6 { + margin: 0; + font-family: "Poppins",sans-serif; + font-size: 14px; + line-height: 21px; + font-weight: 600; + letter-spacing: 0; + padding: 0.5px 0px; + display: inline-block; +} + +.emotion-6::before { + content: ''; + margin-bottom: -0.403em; + display: block; +} + +.emotion-6::after { + content: ''; + margin-top: -0.4em; + display: block; +} + +.emotion-10 { + margin-bottom: 32px; +} + +
    + +
    +
    + +`; + +exports[`Sidebar navigation should match snapshot with no active link 1`] = ` + + @media screen { + .emotion-0 { + display: block; + } +} + +@media screen and (min-width: 480px) { + .emotion-0 { + display: block; + } +} + +@media screen and (min-width: 768px) { + .emotion-0 { + display: block; + } +} + +@media screen and (min-width: 1024px) { + .emotion-0 { + display: none; + } +} + +@media screen and (min-width: 1440px) { + .emotion-0 { + display: none; + } +} + +.emotion-1 { + box-sizing: border-box; + height: 100%; +} + +.emotion-1>ul { + box-sizing: border-box; + list-style-type: none; + margin: 0; + padding: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + height: 100%; +} + +.emotion-1 li:last-of-type { + margin-bottom: 0; +} + +.emotion-2 { + list-style-type: none; + margin: 0; + padding: 0; +} + +.emotion-3 { + background-color: transparent; + color: #0A0A0A; + margin-top: 16px; + margin-bottom: 0; +} + +.emotion-3.collapsed>li { + overflow: hidden; + max-height: 0px; + -webkit-transition: max-height 0.8s cubic-bezier(0, 1, 0, 1) -0.1s; + transition: max-height 0.8s cubic-bezier(0, 1, 0, 1) -0.1s; + margin-bottom: 0; + visibility: hidden; +} + +.emotion-3.expanded>li { + transition-timing-function: cubic-bezier(0.5, 0, 1, 0); + transition-delay: 0s; +} + +.emotion-3.expanded>li:last-of-type { + margin-bottom: 32px; +} + +.emotion-4 { + margin: 0; + font-family: "Poppins",sans-serif; + font-size: 18px; + line-height: 20.25px; + font-weight: 700; + letter-spacing: 0; + padding: 0.5px 0px; + margin-inline: 32px; + margin-block: 4px; +} + +.emotion-4::before { + content: ''; + margin-bottom: -0.2155em; + display: block; +} + +.emotion-4::after { + content: ''; + margin-top: -0.2125em; + display: block; +} + +.emotion-5 { + display: grid; + -webkit-column-gap: 20px; + column-gap: 20px; + grid-template-columns: 1fr auto; +} + +.emotion-6 { + box-sizing: border-box; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-text-decoration: none; + text-decoration: none; + width: 32px; + height: 32px; + padding: 8px; + cursor: default; + overflow: hidden; + border: none; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + background-color: transparent; + border-radius: 50%; + color: #577FFB; + margin: 0; + cursor: pointer; +} + +.emotion-6 svg { + width: 16px; + height: 16px; +} + +.emotion-6 svg { + fill: #577FFB; +} + +.emotion-6:hover:not(:disabled) { + background-color: #E0E7FF; +} + +.emotion-6:active:not(:disabled) { + background-color: #AEBFFF; +} + +.emotion-6:disabled { + background-color: transparent; + color: #C0C0C0; +} + +.emotion-6:disabled svg { + fill: #C0C0C0; +} + +@media screen and (prefers-reduced-motion: no-preference) { + .emotion-6 { + transition-property: background-color; + transition-duration: 200ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } +} + +@media screen and (prefers-reduced-motion: reduce) { + .emotion-6 { + transition-property: background-color; + transition-duration: 0ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } +} + +.emotion-7 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + height: 100%; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + margin-left: calc(-8px/2); + margin-right: calc(-8px/2); +} + +.emotion-8 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + margin-left: calc(8px/2); + margin-right: calc(8px/2); +} + +.emotion-9 { + color: #0A0A0A; + fill: #0A0A0A; + vertical-align: unset; + display: inline-block; +} + +@media screen and (prefers-reduced-motion: no-preference) { + .emotion-9 { + transition-property: fill; + transition-duration: 200ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } +} + +@media screen and (prefers-reduced-motion: reduce) { + .emotion-9 { + transition-property: fill; + transition-duration: 0ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } +} + +.emotion-9.emotion-9 { + width: 24px; + height: 24px; + color: #0A0A0A; + fill: #0A0A0A; +} + +@media screen and (prefers-reduced-motion: no-preference) { + .emotion-9.emotion-9 { + transition-property: fill; + transition-duration: 200ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } +} + +@media screen and (prefers-reduced-motion: reduce) { + .emotion-9.emotion-9 { + transition-property: fill; + transition-duration: 0ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } +} + +.emotion-10 { + box-sizing: border-box; + margin-bottom: 0; +} + +.emotion-11 { + box-sizing: border-box; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-text-decoration: none; + text-decoration: none; + min-height: 40px; + width: 100%; + padding: 12px 16px; + padding-inline: 64px; + cursor: default; + overflow: hidden; + border: none; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + -webkit-text-decoration: none; + text-decoration: none; + border-color: transparent; + border-width: 4px; + border-style: solid; + color: #535353; + margin: 0; + cursor: pointer; + padding-inline: 64px; + -webkit-box-pack: start; + -ms-flex-pack: start; + -webkit-justify-content: flex-start; + justify-content: flex-start; + text-align: left; +} + +.emotion-11 svg { + width: 16px; + height: 16px; +} + +.emotion-11:hover:not(:disabled) { + color: #577FFB; + background-color: #E0E7FF; +} + +.emotion-11:active:not(:disabled) { + color: #213A82; +} + +@media screen and (prefers-reduced-motion: no-preference) { + .emotion-11 { + transition-property: background-color; + transition-duration: 200ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } +} + +@media screen and (prefers-reduced-motion: reduce) { + .emotion-11 { + transition-property: background-color; + transition-duration: 0ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } +} + +.emotion-14 { + margin: 0; + font-family: "Poppins",sans-serif; + font-size: 14px; + line-height: 21px; + font-weight: 600; + letter-spacing: 0; + padding: 0.5px 0px; + display: inline-block; +} + +.emotion-14::before { + content: ''; + margin-bottom: -0.403em; + display: block; +} + +.emotion-14::after { + content: ''; + margin-top: -0.4em; + display: block; +} + +.emotion-23 { + box-sizing: border-box; + margin-bottom: 24px; +} + +.emotion-23>ul { + box-sizing: border-box; + list-style-type: none; + margin: 0; + padding: 0; +} + +.emotion-24 { + box-sizing: border-box; + margin-bottom: 12px; + padding-left: 48px; + padding-right: 48px; +} + +.emotion-25 { + margin: 0; + background-color: transparent; + color: #0A0A0A; + font-family: "Poppins",sans-serif; font-size: 16px; - line-height: 1.5; - font-weight: 400; + line-height: 18px; + font-weight: 700; + letter-spacing: 0; + padding: 0.5px 0px; +} + +.emotion-25::before { + content: ''; + margin-bottom: -0.2155em; + display: block; +} + +.emotion-25::after { + content: ''; + margin-top: -0.2125em; + display: block; +} + +.emotion-49 { + width: 100%; + position: relative; + left: calc(-50vw + 50%); + margin-top: 4px; + margin-bottom: 8px; +} + +.emotion-50 { + border-style: solid; + border-color: #E4E4E4; + border-width: 1px; + border-width: 0px; + margin: 0; + border-top-width: 1px; + width: 100%; +} + +
    + +
    + @media screen { + .emotion-0 { + display: none; + } +} + +@media screen and (min-width: 480px) { + .emotion-0 { + display: none; + } +} + +@media screen and (min-width: 768px) { + .emotion-0 { + display: none; + } +} + +@media screen and (min-width: 1024px) { + .emotion-0 { + display: block; + } +} + +@media screen and (min-width: 1440px) { + .emotion-0 { + display: block; + } +} + +.emotion-1 { + box-sizing: border-box; + height: 100%; +} + +.emotion-1>ul { + box-sizing: border-box; + list-style-type: none; + margin: 0; + padding: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + height: 100%; +} + +.emotion-1 li:last-of-type { + margin-bottom: 0; +} + +.emotion-2 { + margin-bottom: 32px; +} + +
    + +
    +
    + +`; + +exports[`Sidebar navigation should render only routes under current section 1`] = ` + + @media screen { + .emotion-0 { + display: block; + } +} + +@media screen and (min-width: 480px) { + .emotion-0 { + display: block; + } +} + +@media screen and (min-width: 768px) { + .emotion-0 { + display: block; + } +} + +@media screen and (min-width: 1024px) { + .emotion-0 { + display: none; + } +} + +@media screen and (min-width: 1440px) { + .emotion-0 { + display: none; + } +} + +.emotion-1 { + box-sizing: border-box; + height: 100%; +} + +.emotion-1>ul { + box-sizing: border-box; + list-style-type: none; + margin: 0; + padding: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + height: 100%; +} + +.emotion-1 li:last-of-type { + margin-bottom: 0; +} + +.emotion-2 { + list-style-type: none; + margin: 0; + padding: 0; +} + +.emotion-3 { + background-color: transparent; + color: #0A0A0A; + margin-top: 16px; + margin-bottom: 0; +} + +.emotion-3.collapsed>li { + overflow: hidden; + max-height: 0px; + -webkit-transition: max-height 0.8s cubic-bezier(0, 1, 0, 1) -0.1s; + transition: max-height 0.8s cubic-bezier(0, 1, 0, 1) -0.1s; + margin-bottom: 0; + visibility: hidden; +} + +.emotion-3.expanded>li { + transition-timing-function: cubic-bezier(0.5, 0, 1, 0); + transition-delay: 0s; +} + +.emotion-3.expanded>li:last-of-type { + margin-bottom: 32px; +} + +.emotion-4 { + margin: 0; + font-family: "Poppins",sans-serif; + font-size: 18px; + line-height: 20.25px; + font-weight: 700; letter-spacing: 0; + padding: 0.5px 0px; + margin-inline: 32px; + margin-block: 4px; +} + +.emotion-4::before { + content: ''; + margin-bottom: -0.2155em; + display: block; +} + +.emotion-4::after { + content: ''; + margin-top: -0.2125em; + display: block; +} + +.emotion-5 { + display: grid; + -webkit-column-gap: 20px; + column-gap: 20px; + grid-template-columns: 1fr auto; +} + +.emotion-6 { + box-sizing: border-box; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-text-decoration: none; + text-decoration: none; + width: 32px; + height: 32px; + padding: 8px; + cursor: default; + overflow: hidden; + border: none; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + background-color: transparent; + border-radius: 50%; + color: #577FFB; + margin: 0; + cursor: pointer; } -.emotion-1 { - list-style-type: none; - margin: 0px; - padding: 0; +.emotion-6 svg { + width: 16px; + height: 16px; } -.emotion-1:last-child { - margin-bottom: 24px; +.emotion-6 svg { + fill: #577FFB; } -.emotion-2 { - margin-bottom: 24px; +.emotion-6:hover:not(:disabled) { + background-color: #E0E7FF; } -.emotion-4 { - display: inline-block; - -webkit-text-decoration: none; - text-decoration: none; +.emotion-6:active:not(:disabled) { + background-color: #AEBFFF; +} + +.emotion-6:disabled { + background-color: transparent; + color: #C0C0C0; +} + +.emotion-6:disabled svg { + fill: #C0C0C0; } @media screen and (prefers-reduced-motion: no-preference) { - .emotion-4 { - transition-property: color,fill; - transition-duration: 200ms,200ms; - transition-timing-function: cubic-bezier(0, 0, .5, 1),cubic-bezier(0, 0, .5, 1); + .emotion-6 { + transition-property: background-color; + transition-duration: 200ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); } } @media screen and (prefers-reduced-motion: reduce) { - .emotion-4 { - transition-property: color,fill; + .emotion-6 { + transition-property: background-color; transition-duration: 0ms; - transition-timing-function: cubic-bezier(0, 0, .5, 1),cubic-bezier(0, 0, .5, 1); + transition-timing-function: cubic-bezier(0, 0, .5, 1); } } -.emotion-4:hover:not(:disabled) { - -webkit-text-decoration: none; - text-decoration: none; -} - -.emotion-5 { +.emotion-7 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -64,165 +2037,647 @@ exports[`Sidebar navigation should match snapshot with active link 1`] = ` -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + margin-left: calc(-8px/2); + margin-right: calc(-8px/2); +} + +.emotion-8 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + margin-left: calc(8px/2); + margin-right: calc(8px/2); +} + +.emotion-9 { + color: #0A0A0A; + fill: #0A0A0A; + vertical-align: unset; + display: inline-block; +} + +@media screen and (prefers-reduced-motion: no-preference) { + .emotion-9 { + transition-property: fill; + transition-duration: 200ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } +} + +@media screen and (prefers-reduced-motion: reduce) { + .emotion-9 { + transition-property: fill; + transition-duration: 0ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } +} + +.emotion-9.emotion-9 { + width: 24px; + height: 24px; + color: #0A0A0A; + fill: #0A0A0A; +} + +@media screen and (prefers-reduced-motion: no-preference) { + .emotion-9.emotion-9 { + transition-property: fill; + transition-duration: 200ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } +} + +@media screen and (prefers-reduced-motion: reduce) { + .emotion-9.emotion-9 { + transition-property: fill; + transition-duration: 0ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } +} + +.emotion-10 { + box-sizing: border-box; + margin-bottom: 0; +} + +.emotion-11 { + box-sizing: border-box; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-text-decoration: none; + text-decoration: none; + min-height: 40px; + width: 100%; + padding: 12px 16px; + padding-inline: 64px; + cursor: default; + overflow: hidden; + border: none; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + -webkit-text-decoration: none; + text-decoration: none; + border-color: transparent; + border-width: 4px; + border-style: solid; + color: #535353; + margin: 0; + cursor: pointer; + padding-inline: 64px; -webkit-box-pack: start; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; + text-align: left; } -.emotion-6 { +.emotion-11 svg { + width: 16px; + height: 16px; +} + +.emotion-11:hover:not(:disabled) { + color: #577FFB; + background-color: #E0E7FF; +} + +.emotion-11:active:not(:disabled) { + color: #213A82; +} + +@media screen and (prefers-reduced-motion: no-preference) { + .emotion-11 { + transition-property: background-color; + transition-duration: 200ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } +} + +@media screen and (prefers-reduced-motion: reduce) { + .emotion-11 { + transition-property: background-color; + transition-duration: 0ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } +} + +.emotion-14 { + margin: 0; font-family: "Poppins",sans-serif; font-size: 14px; line-height: 21px; font-weight: 600; letter-spacing: 0; padding: 0.5px 0px; - background-color: transparent; - color: #0A0A0A; - box-sizing: border-box; - cursor: 'pointer'; - min-width: 230px; - padding: 12px; - margin: 4px 0; - text-overflow: ellipsis; + display: inline-block; } -.emotion-6::before { +.emotion-14::before { content: ''; margin-bottom: -0.403em; display: block; } -.emotion-6::after { +.emotion-14::after { content: ''; margin-top: -0.4em; display: block; } - - -`; - -exports[`Sidebar navigation should match snapshot with no active link 1`] = ` - + + +
    + @media screen { .emotion-0 { - font-family: "DM Sans",sans-serif; - font-size: 16px; - line-height: 1.5; - font-weight: 400; - letter-spacing: 0; + display: none; + } } -.emotion-1 { - list-style-type: none; - margin: 0px; - padding: 0; +@media screen and (min-width: 480px) { + .emotion-0 { + display: none; + } } -.emotion-1:last-child { - margin-bottom: 24px; +@media screen and (min-width: 768px) { + .emotion-0 { + display: none; + } } - -     -`; +@media screen and (min-width: 1024px) { + .emotion-0 { + display: block; + } +} -exports[`Sidebar navigation should render only routes under current section 1`] = ` - +@media screen and (min-width: 1440px) { .emotion-0 { - font-family: "DM Sans",sans-serif; - font-size: 16px; - line-height: 1.5; - font-weight: 400; - letter-spacing: 0; + display: block; + } } .emotion-1 { + box-sizing: border-box; + height: 100%; +} + +.emotion-1>ul { + box-sizing: border-box; list-style-type: none; - margin: 0px; + margin: 0; padding: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + height: 100%; } -.emotion-1:last-child { - margin-bottom: 24px; +.emotion-1 li:last-of-type { + margin-bottom: 0; } .emotion-2 { - margin-bottom: 24px; + box-sizing: border-box; + margin-bottom: 0; } -.emotion-4 { - display: inline-block; +.emotion-3 { + box-sizing: border-box; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; -webkit-text-decoration: none; text-decoration: none; + min-height: 40px; + width: 100%; + padding: 12px 16px; + -webkit-padding-start: 32px; + padding-inline-start: 32px; + cursor: default; + overflow: hidden; + border: none; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + -webkit-text-decoration: none; + text-decoration: none; + border-color: transparent; + border-width: 4px; + border-style: solid; + color: #535353; + margin: 0; + cursor: pointer; + -webkit-padding-start: 32px; + padding-inline-start: 32px; + -webkit-box-pack: start; + -ms-flex-pack: start; + -webkit-justify-content: flex-start; + justify-content: flex-start; + text-align: left; +} + +.emotion-3 svg { + width: 16px; + height: 16px; +} + +.emotion-3:hover:not(:disabled) { + color: #577FFB; + background-color: #E0E7FF; +} + +.emotion-3:active:not(:disabled) { + color: #213A82; } @media screen and (prefers-reduced-motion: no-preference) { - .emotion-4 { - transition-property: color,fill; - transition-duration: 200ms,200ms; - transition-timing-function: cubic-bezier(0, 0, .5, 1),cubic-bezier(0, 0, .5, 1); + .emotion-3 { + transition-property: background-color; + transition-duration: 200ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); } } @media screen and (prefers-reduced-motion: reduce) { - .emotion-4 { - transition-property: color,fill; + .emotion-3 { + transition-property: background-color; transition-duration: 0ms; - transition-timing-function: cubic-bezier(0, 0, .5, 1),cubic-bezier(0, 0, .5, 1); + transition-timing-function: cubic-bezier(0, 0, .5, 1); } } -.emotion-4:hover:not(:disabled) { - -webkit-text-decoration: none; - text-decoration: none; -} - -.emotion-5 { +.emotion-4 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -235,27 +2690,32 @@ exports[`Sidebar navigation should render only routes under current section 1`] -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; - -webkit-box-pack: start; - -ms-flex-pack: start; - -webkit-justify-content: flex-start; - justify-content: flex-start; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + margin-left: calc(-8px/2); + margin-right: calc(-8px/2); +} + +.emotion-5 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + margin-left: calc(8px/2); + margin-right: calc(8px/2); } .emotion-6 { + margin: 0; font-family: "Poppins",sans-serif; font-size: 14px; line-height: 21px; font-weight: 600; letter-spacing: 0; padding: 0.5px 0px; - background-color: transparent; - color: #535353; - box-sizing: border-box; - cursor: 'pointer'; - min-width: 230px; - padding: 12px; - margin: 4px 0; - text-overflow: ellipsis; + display: inline-block; } .emotion-6::before { @@ -270,53 +2730,64 @@ exports[`Sidebar navigation should render only routes under current section 1`] display: block; } -.emotion-6:hover:not(:disabled) { - background-color: #E0E7FF; - border-radius: 8px; - color: #0A0A0A; -} - -.emotion-6:active:not(:disabled) { - background-color: #AEBFFF; - border-radius: 8px; - color: #0A0A0A; +.emotion-10 { + margin-bottom: 32px; } - + +
    +
    + + + +
    +
    + +
    + + + + + +
    +
    `; diff --git a/site/components/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap b/site/components/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap index dfda266784..6660d16b4c 100644 --- a/site/components/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap +++ b/site/components/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap @@ -2,109 +2,424 @@ exports[`Sidebar renders correctly when closed 1`] = ` + @media screen { .emotion-0 { - width: 276px; - padding-left: 24px; - padding-right: 24px; + display: block; + } +} + +@media screen and (min-width: 480px) { + .emotion-0 { + display: block; + } +} + +@media screen and (min-width: 768px) { + .emotion-0 { + display: block; + } +} + +@media screen and (min-width: 1024px) { + .emotion-0 { + display: none; + } +} + +@media screen and (min-width: 1440px) { + .emotion-0 { + display: none; + } +} + +.emotion-1 { + box-sizing: border-box; position: fixed; - overflow: auto; - bottom: 0; + pointer-events: none; + z-index: 80; + display: grid; + grid-template-areas: 'header close' 'content content'; + grid-template-columns: 1fr auto; + grid-template-rows: auto 1fr; + overflow: hidden; top: 0; left: 0; - z-index: 3; - -webkit-transform: translateX(-100%); - -moz-transform: translateX(-100%); - -ms-transform: translateX(-100%); - transform: translateX(-100%); - -webkit-transition: -webkit-transform 300ms; - transition: transform 300ms; - margin-top: 64px; + max-width: 100%; + min-width: 100%; + height: 100%; background-color: #F4F4F4; border-style: solid; border-color: #E4E4E4; border-width: 0 1px 0 0; + margin-top: 48px; + height: calc(100vh - 48px); } -@media screen and (min-width: 1024px) { - .emotion-0 { - margin-top: 80px; - -webkit-transform: translateX(0); - -moz-transform: translateX(0); - -ms-transform: translateX(0); - transform: translateX(0); - overflow: hidden; +@media screen and (max-width: 479px) { + .emotion-1 { + width: 305px; } +} - .emotion-0:hover { - overflow: auto; +@media screen and (min-width: 480px) and (max-width: 767px) { + .emotion-1 { + width: 309px; } } -@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) { - .emotion-0 { - overflow: auto; +@media screen and (min-width: 768px) and (max-width: 1023px) { + .emotion-1 { + width: 310px; } } -.emotion-1 { - padding: 48px; +@media screen and (min-width: 1024px) and (max-width: 1439px) { + .emotion-1 { + width: 333px; + } } -@media screen { - .emotion-2 { - display: block; +@media screen and (min-width: 1440px) { + .emotion-1 { + width: 354px; } } -@media screen and (min-width: 480px) { - .emotion-2 { - display: block; +@media screen and (prefers-reduced-motion: no-preference) { + .emotion-1 { + opacity: 0; + -webkit-transform: translateX(-100%); + -moz-transform: translateX(-100%); + -ms-transform: translateX(-100%); + transform: translateX(-100%); } -} -@media screen and (min-width: 768px) { - .emotion-2 { - display: block; + .emotion-1.nk-drawer-enter { + opacity: 0; + -webkit-transform: translateX(-100%); + -moz-transform: translateX(-100%); + -ms-transform: translateX(-100%); + transform: translateX(-100%); } -} -@media screen and (min-width: 1024px) { - .emotion-2 { - display: none; + .emotion-1.nk-drawer-enter-active { + opacity: 1; + transition-property: opacity,transform; + transition-duration: 200ms,200ms; + -webkit-transform: translateX(0); + -moz-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + transition-timing-function: cubic-bezier(.5, 0, 1, 1); + } + + .emotion-1.nk-drawer-enter-done { + opacity: 1; + -webkit-transform: translateX(0); + -moz-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } + + .emotion-1.nk-drawer-exit { + opacity: 1; + -webkit-transform: translateX(0); + -moz-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } + + .emotion-1.nk-drawer-exit-active { + opacity: 0; + transition-property: opacity,transform; + transition-duration: 200ms,200ms; + -webkit-transform: translateX(-100%); + -moz-transform: translateX(-100%); + -ms-transform: translateX(-100%); + transform: translateX(-100%); + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } + + .emotion-1.nk-drawer-exit-done { + opacity: 0; + -webkit-transform: translateX(-100%); + -moz-transform: translateX(-100%); + -ms-transform: translateX(-100%); + transform: translateX(-100%); } } -@media screen and (min-width: 1440px) { - .emotion-2 { - display: none; +@media screen and (prefers-reduced-motion: reduce) { + .emotion-1 { + opacity: 0; + -webkit-transform: translateX(-100%); + -moz-transform: translateX(-100%); + -ms-transform: translateX(-100%); + transform: translateX(-100%); + } + + .emotion-1.nk-drawer-enter { + opacity: 0; + -webkit-transform: translateX(-100%); + -moz-transform: translateX(-100%); + -ms-transform: translateX(-100%); + transform: translateX(-100%); + } + + .emotion-1.nk-drawer-enter-active { + opacity: 1; + transition-property: opacity,transform; + transition-duration: 0ms; + -webkit-transform: translateX(0); + -moz-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + transition-timing-function: cubic-bezier(.5, 0, 1, 1); + } + + .emotion-1.nk-drawer-enter-done { + opacity: 1; + -webkit-transform: translateX(0); + -moz-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } + + .emotion-1.nk-drawer-exit { + opacity: 1; + -webkit-transform: translateX(0); + -moz-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } + + .emotion-1.nk-drawer-exit-active { + opacity: 0; + transition-property: opacity,transform; + transition-duration: 0ms; + -webkit-transform: translateX(-100%); + -moz-transform: translateX(-100%); + -ms-transform: translateX(-100%); + transform: translateX(-100%); + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } + + .emotion-1.nk-drawer-exit-done { + opacity: 0; + -webkit-transform: translateX(-100%); + -moz-transform: translateX(-100%); + -ms-transform: translateX(-100%); + transform: translateX(-100%); } } -.emotion-3 { +.emotion-2 { + box-sizing: border-box; + grid-area: content; + overflow: hidden auto; + padding: 0; +} + +.emotion-4 { + box-sizing: border-box; height: 100%; +} + +.emotion-4>ul { + box-sizing: border-box; + list-style-type: none; + margin: 0; + padding: 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + height: 100%; } -.emotion-4 { - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; +.emotion-4 li:last-of-type { + margin-bottom: 0; } .emotion-5 { - display: inline-block; - vertical-align: middle; + list-style-type: none; + margin: 0; + padding: 0; +} + +.emotion-6 { + background-color: transparent; + color: #0A0A0A; + margin-top: 16px; + margin-bottom: 0; +} + +.emotion-6.collapsed>li { overflow: hidden; - fill: #2E2E2E; + max-height: 0px; + -webkit-transition: max-height 0.8s cubic-bezier(0, 1, 0, 1) -0.1s; + transition: max-height 0.8s cubic-bezier(0, 1, 0, 1) -0.1s; + margin-bottom: 0; + visibility: hidden; +} + +.emotion-6.expanded>li { + transition-timing-function: cubic-bezier(0.5, 0, 1, 0); + transition-delay: 0s; +} + +.emotion-6.expanded>li:last-of-type { + margin-bottom: 32px; +} + +.emotion-7 { + margin: 0; + font-family: "Poppins",sans-serif; + font-size: 18px; + line-height: 20.25px; + font-weight: 700; + letter-spacing: 0; + padding: 0.5px 0px; + margin-inline: 32px; + margin-block: 4px; +} + +.emotion-7::before { + content: ''; + margin-bottom: -0.2155em; + display: block; +} + +.emotion-7::after { + content: ''; + margin-top: -0.2125em; + display: block; +} + +.emotion-8 { + display: grid; + -webkit-column-gap: 20px; + column-gap: 20px; + grid-template-columns: 1fr auto; +} + +.emotion-9 { + box-sizing: border-box; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-text-decoration: none; + text-decoration: none; + width: 32px; + height: 32px; + padding: 8px; + cursor: default; + overflow: hidden; + border: none; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + background-color: transparent; + border-radius: 50%; + color: #577FFB; + margin: 0; + cursor: pointer; +} + +.emotion-9 svg { + width: 16px; + height: 16px; +} + +.emotion-9 svg { + fill: #577FFB; +} + +.emotion-9:hover:not(:disabled) { + background-color: #E0E7FF; +} + +.emotion-9:active:not(:disabled) { + background-color: #AEBFFF; +} + +.emotion-9:disabled { + background-color: transparent; + color: #C0C0C0; +} + +.emotion-9:disabled svg { + fill: #C0C0C0; +} + +@media screen and (prefers-reduced-motion: no-preference) { + .emotion-9 { + transition-property: background-color; + transition-duration: 200ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } +} + +@media screen and (prefers-reduced-motion: reduce) { + .emotion-9 { + transition-property: background-color; + transition-duration: 0ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } +} + +.emotion-10 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + height: 100%; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + margin-left: calc(-8px/2); + margin-right: calc(-8px/2); +} + +.emotion-11 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + margin-left: calc(8px/2); + margin-right: calc(8px/2); +} + +.emotion-12 { + color: #0A0A0A; + fill: #0A0A0A; vertical-align: unset; display: inline-block; } @media screen and (prefers-reduced-motion: no-preference) { - .emotion-5 { + .emotion-12 { transition-property: fill; transition-duration: 200ms; transition-timing-function: cubic-bezier(0, 0, .5, 1); @@ -112,21 +427,22 @@ exports[`Sidebar renders correctly when closed 1`] = ` } @media screen and (prefers-reduced-motion: reduce) { - .emotion-5 { + .emotion-12 { transition-property: fill; transition-duration: 0ms; transition-timing-function: cubic-bezier(0, 0, .5, 1); } } -.emotion-5.emotion-5 { - width: 16px; - height: 16px; - fill: #2E2E2E; +.emotion-12.emotion-12 { + width: 24px; + height: 24px; + color: #0A0A0A; + fill: #0A0A0A; } @media screen and (prefers-reduced-motion: no-preference) { - .emotion-5.emotion-5 { + .emotion-12.emotion-12 { transition-property: fill; transition-duration: 200ms; transition-timing-function: cubic-bezier(0, 0, .5, 1); @@ -134,214 +450,9743 @@ exports[`Sidebar renders correctly when closed 1`] = ` } @media screen and (prefers-reduced-motion: reduce) { - .emotion-5.emotion-5 { + .emotion-12.emotion-12 { transition-property: fill; transition-duration: 0ms; transition-timing-function: cubic-bezier(0, 0, .5, 1); } } -.emotion-7 { - font-family: "DM Sans",sans-serif; - font-size: 16px; - line-height: 1.5; - font-weight: 400; +.emotion-13 { + box-sizing: border-box; + margin-bottom: 0; +} + +.emotion-14 { + box-sizing: border-box; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-text-decoration: none; + text-decoration: none; + min-height: 40px; + width: 100%; + padding: 12px 16px; + padding-inline: 64px; + cursor: default; + overflow: hidden; + border: none; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + -webkit-text-decoration: none; + text-decoration: none; + border-color: transparent; + border-width: 4px; + border-style: solid; + color: #535353; + margin: 0; + cursor: pointer; + padding-inline: 64px; + -webkit-box-pack: start; + -ms-flex-pack: start; + -webkit-justify-content: flex-start; + justify-content: flex-start; + text-align: left; +} + +.emotion-14 svg { + width: 16px; + height: 16px; +} + +.emotion-14:hover:not(:disabled) { + color: #577FFB; + background-color: #E0E7FF; +} + +.emotion-14:active:not(:disabled) { + color: #213A82; +} + +@media screen and (prefers-reduced-motion: no-preference) { + .emotion-14 { + transition-property: background-color; + transition-duration: 200ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } +} + +@media screen and (prefers-reduced-motion: reduce) { + .emotion-14 { + transition-property: background-color; + transition-duration: 0ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } +} + +.emotion-17 { + margin: 0; + font-family: "Poppins",sans-serif; + font-size: 14px; + line-height: 21px; + font-weight: 600; letter-spacing: 0; + padding: 0.5px 0px; + display: inline-block; +} + +.emotion-17::before { + content: ''; + margin-bottom: -0.403em; + display: block; +} + +.emotion-17::after { + content: ''; + margin-top: -0.4em; + display: block; +} + +.emotion-47 { + box-sizing: border-box; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-text-decoration: none; + text-decoration: none; + min-height: 40px; + width: 100%; + padding: 12px 16px; + margin-block-end: 12px; + padding-inline: 64px; + cursor: default; + overflow: hidden; + border: none; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + -webkit-text-decoration: none; + text-decoration: none; + border-color: transparent; + border-width: 4px; + border-style: solid; + color: #535353; + margin: 0; + cursor: pointer; + margin-block-end: 12px; + padding-inline: 64px; + -webkit-box-pack: start; + -ms-flex-pack: start; + -webkit-justify-content: flex-start; + justify-content: flex-start; + text-align: left; +} + +.emotion-47 svg { + width: 16px; + height: 16px; +} + +.emotion-47:hover:not(:disabled) { + color: #577FFB; + background-color: #E0E7FF; +} + +.emotion-47:active:not(:disabled) { + color: #213A82; +} + +@media screen and (prefers-reduced-motion: no-preference) { + .emotion-47 { + transition-property: background-color; + transition-duration: 200ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } +} + +@media screen and (prefers-reduced-motion: reduce) { + .emotion-47 { + transition-property: background-color; + transition-duration: 0ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } +} + +.emotion-51 { + box-sizing: border-box; + margin-bottom: 24px; +} + +.emotion-51>ul { + box-sizing: border-box; + list-style-type: none; + margin: 0; + padding: 0; +} + +.emotion-52 { + box-sizing: border-box; + margin-bottom: 12px; + padding-left: 48px; + padding-right: 48px; +} + +.emotion-53 { + margin: 0; + background-color: transparent; + color: #0A0A0A; + font-family: "Poppins",sans-serif; + font-size: 16px; + line-height: 18px; + font-weight: 700; + letter-spacing: 0; + padding: 0.5px 0px; +} + +.emotion-53::before { + content: ''; + margin-bottom: -0.2155em; + display: block; +} + +.emotion-53::after { + content: ''; + margin-top: -0.2125em; + display: block; +} + +.emotion-496 { + width: 100%; + position: relative; + left: calc(-50vw + 50%); + margin-top: 4px; + margin-bottom: 8px; +} + +.emotion-497 { + border-style: solid; + border-color: #E4E4E4; + border-width: 1px; + border-width: 0px; + margin: 0; + border-top-width: 1px; + width: 100%; +} + +@media screen { + .emotion-498 { + display: none; + } +} + +@media screen and (min-width: 480px) { + .emotion-498 { + display: none; + } +} + +@media screen and (min-width: 768px) { + .emotion-498 { + display: none; + } +} + +@media screen and (min-width: 1024px) { + .emotion-498 { + display: block; + } +} + +@media screen and (min-width: 1440px) { + .emotion-498 { + display: block; + } +} + +.emotion-500 { + margin-bottom: 32px; +} + +.emotion-501 { + margin-inline: 32px; + margin-block: 24px; +} + +.emotion-502 { + -webkit-text-decoration: none; + text-decoration: none; +} + +.emotion-503 { + display: grid; + grid-template-columns: 1fr 24px; +} + +.emotion-504 { + margin: 0; + color: #2E2E2E; + font-family: "Poppins",sans-serif; + font-size: 16px; + line-height: 1.5; + font-weight: 500; + letter-spacing: 0; +} + +.emotion-504 svg { + fill: #2E2E2E; +} + +.emotion-505 { + display: inline-block; + vertical-align: middle; + overflow: hidden; + fill: #2E2E2E; + vertical-align: unset; + display: inline-block; +} + +@media screen and (prefers-reduced-motion: no-preference) { + .emotion-505 { + transition-property: fill; + transition-duration: 200ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } +} + +@media screen and (prefers-reduced-motion: reduce) { + .emotion-505 { + transition-property: fill; + transition-duration: 0ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } +} + +.emotion-505.emotion-505 { + width: 24px; + height: 24px; +} + +.emotion-507 { + margin-block: 24px; +} + +
    +
    +
    +
    +
    + + @media screen { + .emotion-0 { + display: none; + } +} + +@media screen and (min-width: 480px) { + .emotion-0 { + display: none; + } +} + +@media screen and (min-width: 768px) { + .emotion-0 { + display: none; + } +} + +@media screen and (min-width: 1024px) { + .emotion-0 { + display: block; + } +} + +@media screen and (min-width: 1440px) { + .emotion-0 { + display: block; + } +} + +.emotion-1 { + position: fixed; + overflow: auto; + bottom: 0; + top: 0; + left: 0; + z-index: 3; + padding-top: 16px; + margin-top: 48px; + background-color: #F4F4F4; + border-style: solid; + border-color: #E4E4E4; + border-width: 0 1px 0 0; + width: 276px; + margin-top: 80px; + padding-top: 0; + overflow: hidden; +} + +.emotion-1:hover { + overflow: auto; +} + +@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) { + .emotion-1 { + overflow: auto; + } +} + +.emotion-2 { + padding: 4px; +} + +@media screen { + .emotion-3 { + display: block; + } +} + +@media screen and (min-width: 480px) { + .emotion-3 { + display: block; + } +} + +@media screen and (min-width: 768px) { + .emotion-3 { + display: block; + } +} + +@media screen and (min-width: 1024px) { + .emotion-3 { + display: none; + } +} + +@media screen and (min-width: 1440px) { + .emotion-3 { + display: none; + } +} + +.emotion-4 { + box-sizing: border-box; + height: 100%; +} + +.emotion-4>ul { + box-sizing: border-box; + list-style-type: none; + margin: 0; + padding: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + height: 100%; +} + +.emotion-4 li:last-of-type { + margin-bottom: 0; +} + +.emotion-5 { + list-style-type: none; + margin: 0; + padding: 0; +} + +.emotion-6 { + background-color: transparent; + color: #0A0A0A; + margin-top: 16px; + margin-bottom: 0; +} + +.emotion-6.collapsed>li { + overflow: hidden; + max-height: 0px; + -webkit-transition: max-height 0.8s cubic-bezier(0, 1, 0, 1) -0.1s; + transition: max-height 0.8s cubic-bezier(0, 1, 0, 1) -0.1s; + margin-bottom: 0; + visibility: hidden; +} + +.emotion-6.expanded>li { + transition-timing-function: cubic-bezier(0.5, 0, 1, 0); + transition-delay: 0s; +} + +.emotion-6.expanded>li:last-of-type { + margin-bottom: 32px; +} + +.emotion-7 { + margin: 0; + font-family: "Poppins",sans-serif; + font-size: 18px; + line-height: 20.25px; + font-weight: 700; + letter-spacing: 0; + padding: 0.5px 0px; + margin-inline: 32px; + margin-block: 4px; +} + +.emotion-7::before { + content: ''; + margin-bottom: -0.2155em; + display: block; +} + +.emotion-7::after { + content: ''; + margin-top: -0.2125em; + display: block; +} + +.emotion-8 { + display: grid; + -webkit-column-gap: 20px; + column-gap: 20px; + grid-template-columns: 1fr auto; +} + +.emotion-9 { + box-sizing: border-box; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-text-decoration: none; + text-decoration: none; + width: 32px; + height: 32px; + padding: 8px; + cursor: default; + overflow: hidden; + border: none; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + background-color: transparent; + border-radius: 50%; + color: #577FFB; + margin: 0; + cursor: pointer; +} + +.emotion-9 svg { + width: 16px; + height: 16px; +} + +.emotion-9 svg { + fill: #577FFB; +} + +.emotion-9:hover:not(:disabled) { + background-color: #E0E7FF; +} + +.emotion-9:active:not(:disabled) { + background-color: #AEBFFF; +} + +.emotion-9:disabled { + background-color: transparent; + color: #C0C0C0; +} + +.emotion-9:disabled svg { + fill: #C0C0C0; +} + +@media screen and (prefers-reduced-motion: no-preference) { + .emotion-9 { + transition-property: background-color; + transition-duration: 200ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } +} + +@media screen and (prefers-reduced-motion: reduce) { + .emotion-9 { + transition-property: background-color; + transition-duration: 0ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } +} + +.emotion-10 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + height: 100%; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + margin-left: calc(-8px/2); + margin-right: calc(-8px/2); +} + +.emotion-11 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + margin-left: calc(8px/2); + margin-right: calc(8px/2); +} + +.emotion-12 { + color: #0A0A0A; + fill: #0A0A0A; + vertical-align: unset; + display: inline-block; +} + +@media screen and (prefers-reduced-motion: no-preference) { + .emotion-12 { + transition-property: fill; + transition-duration: 200ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } +} + +@media screen and (prefers-reduced-motion: reduce) { + .emotion-12 { + transition-property: fill; + transition-duration: 0ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } +} + +.emotion-12.emotion-12 { + width: 24px; + height: 24px; + color: #0A0A0A; + fill: #0A0A0A; +} + +@media screen and (prefers-reduced-motion: no-preference) { + .emotion-12.emotion-12 { + transition-property: fill; + transition-duration: 200ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } +} + +@media screen and (prefers-reduced-motion: reduce) { + .emotion-12.emotion-12 { + transition-property: fill; + transition-duration: 0ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } +} + +.emotion-13 { + box-sizing: border-box; + margin-bottom: 0; +} + +.emotion-14 { + box-sizing: border-box; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-text-decoration: none; + text-decoration: none; + min-height: 40px; + width: 100%; + padding: 12px 16px; + padding-inline: 64px; + cursor: default; + overflow: hidden; + border: none; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + -webkit-text-decoration: none; + text-decoration: none; + border-color: transparent; + border-width: 4px; + border-style: solid; + color: #535353; + margin: 0; + cursor: pointer; + padding-inline: 64px; + -webkit-box-pack: start; + -ms-flex-pack: start; + -webkit-justify-content: flex-start; + justify-content: flex-start; + text-align: left; +} + +.emotion-14 svg { + width: 16px; + height: 16px; +} + +.emotion-14:hover:not(:disabled) { + color: #577FFB; + background-color: #E0E7FF; +} + +.emotion-14:active:not(:disabled) { + color: #213A82; +} + +@media screen and (prefers-reduced-motion: no-preference) { + .emotion-14 { + transition-property: background-color; + transition-duration: 200ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } +} + +@media screen and (prefers-reduced-motion: reduce) { + .emotion-14 { + transition-property: background-color; + transition-duration: 0ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } +} + +.emotion-17 { + margin: 0; + font-family: "Poppins",sans-serif; + font-size: 14px; + line-height: 21px; + font-weight: 600; + letter-spacing: 0; + padding: 0.5px 0px; + display: inline-block; +} + +.emotion-17::before { + content: ''; + margin-bottom: -0.403em; + display: block; +} + +.emotion-17::after { + content: ''; + margin-top: -0.4em; + display: block; +} + +.emotion-47 { + box-sizing: border-box; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-text-decoration: none; + text-decoration: none; + min-height: 40px; + width: 100%; + padding: 12px 16px; + margin-block-end: 12px; + padding-inline: 64px; + cursor: default; + overflow: hidden; + border: none; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + -webkit-text-decoration: none; + text-decoration: none; + border-color: transparent; + border-width: 4px; + border-style: solid; + color: #535353; + margin: 0; + cursor: pointer; + margin-block-end: 12px; + padding-inline: 64px; + -webkit-box-pack: start; + -ms-flex-pack: start; + -webkit-justify-content: flex-start; + justify-content: flex-start; + text-align: left; +} + +.emotion-47 svg { + width: 16px; + height: 16px; +} + +.emotion-47:hover:not(:disabled) { + color: #577FFB; + background-color: #E0E7FF; +} + +.emotion-47:active:not(:disabled) { + color: #213A82; +} + +@media screen and (prefers-reduced-motion: no-preference) { + .emotion-47 { + transition-property: background-color; + transition-duration: 200ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } +} + +@media screen and (prefers-reduced-motion: reduce) { + .emotion-47 { + transition-property: background-color; + transition-duration: 0ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } +} + +.emotion-51 { + box-sizing: border-box; + margin-bottom: 24px; +} + +.emotion-51>ul { + box-sizing: border-box; + list-style-type: none; + margin: 0; + padding: 0; +} + +.emotion-52 { + box-sizing: border-box; + margin-bottom: 12px; + padding-left: 48px; + padding-right: 48px; +} + +.emotion-53 { + margin: 0; + background-color: transparent; + color: #0A0A0A; + font-family: "Poppins",sans-serif; + font-size: 16px; + line-height: 18px; + font-weight: 700; + letter-spacing: 0; + padding: 0.5px 0px; +} + +.emotion-53::before { + content: ''; + margin-bottom: -0.2155em; + display: block; +} + +.emotion-53::after { + content: ''; + margin-top: -0.2125em; + display: block; +} + +.emotion-496 { + width: 100%; + position: relative; + left: calc(-50vw + 50%); + margin-top: 4px; + margin-bottom: 8px; +} + +.emotion-497 { + border-style: solid; + border-color: #E4E4E4; + border-width: 1px; + border-width: 0px; + margin: 0; + border-top-width: 1px; + width: 100%; +} + +.emotion-500 { + margin-bottom: 32px; +} + +
    +