A Pen by Rafael Conde on CodePen.
Created
November 16, 2019 00:13
-
-
Save bessfernandez/3334b2a57bfa470e20ed4c21224d4d8b to your computer and use it in GitHub Desktop.
3.0 Navigation Bar
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="app-container"> | |
| <!-- Navigation bar at the Root level --> | |
| <div class="navigation-wrapper hidden" id="nav1"> | |
| <div class="navigation-bar level-root"> | |
| <ol class="app-navigation-items"> | |
| <li><a href="#" class="logo"></a></li> | |
| <li> | |
| <h5 class="active">Title of the page</h5> | |
| </li> | |
| </ol> | |
| <ol class="account-items"> | |
| <li> | |
| <div class="dropdown notifications-dropdown"> | |
| <button type="button" class="notifications-icon"></button> | |
| <ul class="notifications-dropdown"></ul> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="dropdown account-dropdown"> | |
| <button type="button" class="avatar"></button> | |
| <ul class="profile-dropdown"></ul> | |
| </div> | |
| </li> | |
| </ol> | |
| </div> | |
| </div> | |
| <!-- Navigation bar at the Team level --> | |
| <div class="navigation-wrapper hidden" id="nav2"> | |
| <div class="navigation-bar level-team"> | |
| <ol class="app-navigation-items"> | |
| <li><a href="#" class="logo"></a></li> | |
| <li> | |
| <div class="dropdown team-swither-dropdown"> | |
| <button type="button" class="button team-switcher"> | |
| Team name | |
| <svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"> | |
| <path fill="#FFF" d="M8.99991268,3.07028102 L6.41857138,5.57471215 C6.17648594,5.80958474 6.17648594,6.19041552 6.41857138,6.42520326 L9,8.92971911 L7.38140903,10.5 L3.18156408,6.42520313 C2.93947864,6.19041539 2.93947864,5.80958461 3.18156408,5.57471202 L7.38149648,1.5 L8.99991268,3.07028102 Z" transform="rotate(-90 4 5)"/> | |
| </svg> | |
| </button> | |
| <ul class="team-dropdown"></ul> | |
| </div> | |
| </li> | |
| </ol> | |
| <ul class="navigation-links"> | |
| <li><a href="#"><h5 class="active">Sites</h5></a></li> | |
| <li><a href="#"><h5>Domains</h5></a></li> | |
| <li><a href="#"><h5>Builds</h5></a></li> | |
| <li><a href="#"><h5>Activity</h5></a></li> | |
| <li><a href="#"><h5>Billing</h5></a></li> | |
| <li><a href="#"><h5>Settings</h5></a></li> | |
| </ul> | |
| <ol class="account-items"> | |
| <li> | |
| <div class="dropdown notifications-dropdown"> | |
| <button type="button" class="notifications-icon"></button> | |
| <ul class="notifications-dropdown"></ul> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="dropdown account-dropdown"> | |
| <button type="button" class="avatar"></button> | |
| <ul class="profile-dropdown"></ul> | |
| </div> | |
| </li> | |
| </ol> | |
| </div> | |
| </div> | |
| <!-- Navigation bar at Site level --> | |
| <div class="navigation-wrapper" id="nav3"> | |
| <div class="navigation-bar level-site"> | |
| <ol class="app-navigation-items"> | |
| <li><a href="#" class="logo"></a></li> | |
| <li> | |
| <div class="dropdown team-swither-dropdown"> | |
| <button type="button" class="button team-switcher"> | |
| Team name | |
| <svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"> | |
| <path fill="#FFF" d="M8.99991268,3.07028102 L6.41857138,5.57471215 C6.17648594,5.80958474 6.17648594,6.19041552 6.41857138,6.42520326 L9,8.92971911 L7.38140903,10.5 L3.18156408,6.42520313 C2.93947864,6.19041539 2.93947864,5.80958461 3.18156408,5.57471202 L7.38149648,1.5 L8.99991268,3.07028102 Z" transform="rotate(-90 4 5)"/> | |
| </svg> | |
| </button> | |
| <ul class="team-dropdown"></ul> | |
| </div> | |
| </li> | |
| </ol> | |
| <ul class="navigation-links"> | |
| <li class="back-link"><a href="#"><h5>Sites</h5></a></li> | |
| <li><a href="#"><h5 class="active">site-name-generated-1234</h5></a></li> | |
| </ul> | |
| <ol class="account-items"> | |
| <li> | |
| <div class="dropdown notifications-dropdown"> | |
| <button type="button" class="notifications-icon"></button> | |
| <ul class="notifications-dropdown"></ul> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="dropdown account-dropdown"> | |
| <button type="button" class="avatar"></button> | |
| <ul class="profile-dropdown"></ul> | |
| </div> | |
| </li> | |
| </ol> | |
| </div> | |
| </div> | |
| <div class="mock-content"> | |
| <div class="sitebar" id="sitebar"></div> | |
| <div class="list-of-cards"> | |
| <h1 id="title">Page title</h1> | |
| <div class="card"></div> | |
| <div class="card"></div> | |
| <div class="card"></div> | |
| <div class="card"></div> | |
| <div class="card"></div> | |
| <div class="card"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Little navigation bar switcher --> | |
| <div class="wrapper"> | |
| <div class="switcher" id="switcher"> | |
| <div class="input-row"> | |
| <input type="radio" name="mode" value="root" id="mode1" class="mode-switcher"/> | |
| <label for="mode1"> | |
| Root level | |
| <p class="muted">High level pages, like "Create new team", "Create new site"….<p> | |
| </label> | |
| </div> | |
| <div class="input-row"> | |
| <input type="radio" name="mode" value="team" id="mode2" class="mode-switcher"/> | |
| <label for="mode2"> | |
| Team level | |
| <p class="muted">Top level for when a team is selected<p> | |
| </label> | |
| </div> | |
| <div class="input-row"> | |
| <input type="radio" name="mode" value="site" id="mode3" class="mode-switcher" checked/> | |
| <label for="mode3"> | |
| Site level | |
| <p class="muted">At a site level, with a SiteBar™ visible <p> | |
| </label> | |
| </div> | |
| </div> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var inputs = document.getElementsByClassName('mode-switcher'); | |
| for (var i = 0; i < inputs.length; i++) { | |
| var el = inputs[i]; | |
| el.addEventListener('change', function() { | |
| defineSetting(this.value); | |
| }) | |
| } | |
| function defineSetting(setting) { | |
| if (setting == 'root') { | |
| document.getElementById("nav1").classList.remove('hidden'); | |
| document.getElementById("nav2").classList.add('hidden'); | |
| document.getElementById("nav3").classList.add('hidden'); | |
| document.getElementById("sitebar").classList.add('hidden'); | |
| document.getElementById("title").classList.add('hidden'); | |
| } else if (setting == 'team') { | |
| document.getElementById("nav1").classList.add('hidden'); | |
| document.getElementById("nav2").classList.remove('hidden'); | |
| document.getElementById("nav3").classList.add('hidden'); | |
| document.getElementById("sitebar").classList.add('hidden'); | |
| document.getElementById("title").classList.add('hidden'); | |
| } else if (setting == 'site') { | |
| document.getElementById("nav1").classList.add('hidden'); | |
| document.getElementById("nav2").classList.add('hidden'); | |
| document.getElementById("nav3").classList.remove('hidden'); | |
| document.getElementById("sitebar").classList.remove('hidden'); | |
| document.getElementById("title").classList.remove('hidden'); | |
| } | |
| } | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @use postcss-nested; | |
| :root { | |
| --neutral000: #ffffff; | |
| --neutral100: #F7F8F8; | |
| --neutral200: #E9EBEB; | |
| --neutral400: #A3A9AC; | |
| --neutral500: #7D8589; | |
| --neutral800: #2D3B41; | |
| --neutral900: #0E1E25; | |
| --neutral999: #000000; | |
| --teal800: #007A70; | |
| --gold500: #F6BC00; | |
| --appBackground: #F6FAFB; | |
| --systemFont: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; | |
| font-size: 14px; | |
| } | |
| body { | |
| background-color: var(--appBackground); | |
| width: 100vw; | |
| height: 100vh; | |
| font-family: var(--systemFont); | |
| margin: 0; | |
| } | |
| h1 { | |
| font-size: 2em; | |
| font-weight: 700; | |
| line-height: 40px; | |
| margin: 0; | |
| margin-bottom: 16px; | |
| } | |
| h5 { | |
| font-size: 1.14em; | |
| font-weight: 600; | |
| line-height: 24px; | |
| margin: 0; | |
| } | |
| .app-container { | |
| position: relative; | |
| box-sizing: border-box; | |
| width: 100%; | |
| max-width: 1230px; | |
| margin: auto; | |
| padding: 0 8px; | |
| } | |
| .navigation-wrapper { | |
| position: sticky; | |
| top: 0; | |
| display: block; | |
| padding-top: 8px; | |
| z-index: 1; | |
| &::before { | |
| content: ""; | |
| width: 100%; | |
| height: 16px; | |
| top: 0; | |
| position: absolute; | |
| z-index: -1; | |
| background-color: var(--appBackground); | |
| filter: blur(10px); | |
| } | |
| } | |
| .navigation-bar { | |
| box-sizing: border-box; | |
| width: 100%; | |
| padding: 16px; | |
| margin-bottom: 24px; | |
| background-color: var(--neutral900); | |
| border-radius: 8px; | |
| color: var(--neutral500); | |
| box-shadow: 0 2px 2px 0 rgba(14,30,37,0.16); | |
| overflow: hidden; | |
| display: grid; | |
| grid-template-columns: auto 1fr auto; | |
| grid-template-areas: | |
| "teamArea linksArea profileArea" | |
| ". . ."; | |
| & ul, & ol { | |
| display: flex; | |
| align-items: center; | |
| padding: 0; | |
| margin: 0; | |
| & li { | |
| list-style: none; | |
| } | |
| } | |
| & .app-navigation-items > li { | |
| margin-right: 16px; | |
| } | |
| & .account-items > li { | |
| margin-left: 16px; | |
| } | |
| } | |
| .navigation-bar.level-site, | |
| .navigation-bar.level-team { | |
| @media (max-width: 780px) { | |
| grid-row-gap: 16px; | |
| grid-template-areas: | |
| "teamArea . profileArea" | |
| "linksArea linksArea linksArea"; | |
| } | |
| } | |
| .app-navigation-items { | |
| grid-area: teamArea; | |
| } | |
| .account-items { | |
| grid-area: profileArea; | |
| justify-self: end; | |
| } | |
| ul.navigation-links { | |
| grid-area: linksArea; | |
| justify-self: start; | |
| & > li { | |
| margin-left: 0; | |
| margin-right: 8px; | |
| } | |
| & a { | |
| display: inline-block; | |
| background-color: transparent; | |
| padding: 6px 8px; | |
| border-radius: 6px; | |
| text-decoration: none; | |
| color: inherit; | |
| &:hover, | |
| &:focus { | |
| background-color: var(--neutral999); | |
| cursor: pointer; | |
| } | |
| } | |
| @media (max-width: 780px) { | |
| width: 100%; | |
| overflow-x: scroll; | |
| /* Moving the scrollbar away from sight 😎 */ | |
| padding-bottom: 24px; | |
| margin-bottom: -24px; | |
| & li:last-child { | |
| padding-right: 40px; /* To make sure you can scroll if enough to be visible (escape the top gradient) */ | |
| } | |
| &::before, &::after { | |
| display: block; | |
| content: ""; | |
| position: absolute; | |
| height: 36px; | |
| } | |
| &::after { | |
| width: 64px; | |
| right: 0; | |
| background-image: linear-gradient(to right, rgba(14, 30, 37, 0), var(--neutral900) 80%); | |
| } | |
| &::before { | |
| width: 24px; | |
| left: 0; | |
| background-image: linear-gradient(to left, rgba(14, 30, 37, 0), var(--neutral900) 40%); | |
| } | |
| } | |
| } | |
| .level-site .navigation-links { | |
| white-space: nowrap; | |
| } | |
| .active { | |
| color: var(--neutral000); | |
| } | |
| .logo { | |
| display: block; | |
| height: 36px; | |
| width: 36px; | |
| background-image: var(--logo); | |
| background-position: center 0; | |
| border-radius: 6px; | |
| &:hover, | |
| &:active { | |
| background-color: var(--neutral999); | |
| } | |
| } | |
| .avatar { | |
| display: block; | |
| width: 36px; | |
| height: 36px; | |
| padding: 0; | |
| background-image: var(--avatar); | |
| background-size: cover; | |
| border: none; | |
| border-radius: 50%; | |
| box-shadow: 0 0 0 1px var(--neutral800); | |
| &:hover, | |
| &:active { | |
| cursor: pointer; | |
| } | |
| } | |
| .notifications-icon { | |
| display: block; | |
| width: 36px; | |
| height: 36px; | |
| border: none; | |
| border-radius: 6px; | |
| background-color: transparent; | |
| background-image: var(--notification-icon); | |
| background-repeat: no-repeat; | |
| background-position: center; | |
| &:hover, | |
| &:active { | |
| cursor: pointer; | |
| background-color: var(--neutral999); | |
| } | |
| } | |
| .button { | |
| /* Should extend typographic style of h5.emphasis */ | |
| font-size: 16px; | |
| line-height: 20px; | |
| font-weight: 600; | |
| color: #0E1E25; | |
| align-self: center; | |
| border: none; | |
| border-radius: 6px; | |
| outline: 0; | |
| box-sizing: border-box; | |
| display: inline-block; | |
| font-family: inherit; | |
| padding: 8px; | |
| min-width: 36px; | |
| max-height: 36px; | |
| position: relative; | |
| text-align: center; | |
| text-decoration: none; | |
| cursor: pointer; | |
| } | |
| .team-switcher { | |
| background-color: var(--neutral800); | |
| color: var(--neutral000); | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| &:hover, | |
| &:active { | |
| background-color: var(--neutral999); | |
| } | |
| } | |
| .team-switcher svg { | |
| position: relative; | |
| top: -2px; | |
| margin-left: 4px; | |
| } | |
| .back-link + li::before { | |
| content: ""; | |
| display: inline-block; | |
| position: relative; | |
| width: 16px; | |
| height: 16px; | |
| right: 0; | |
| top: 4px; | |
| margin-right: 8px; | |
| background-image: var(--caret-right-icon); | |
| background-position: center; | |
| } | |
| .card { | |
| background: var(--neutral000); | |
| border-radius: 8px; | |
| box-shadow: 0 2px 4px 0 rgba(14,30,37,0.12); | |
| } | |
| .mock-content .card { | |
| display: block; | |
| width: 100%; | |
| height: 424px; | |
| margin-bottom: 16px; | |
| } | |
| .mock-content { | |
| position: relative; | |
| display: flex; | |
| flex-direction: row; | |
| @media (max-width: 780px) { | |
| flex-direction: column; | |
| } | |
| } | |
| .sitebar { | |
| display: block; | |
| position: sticky; | |
| top: 104px; | |
| width: 164px; | |
| height: 404px; | |
| margin-right: 40px; | |
| background: var(--neutral200); | |
| border-radius: 8px; | |
| @media (max-width: 780px) { | |
| width: 100%; | |
| height: 36px; | |
| margin-bottom: 8px; | |
| } | |
| } | |
| .list-of-cards { | |
| display: block; | |
| width: 100%; | |
| } | |
| /* Unreadable mess */ | |
| :root { | |
| --avatar: url(https://images-na.ssl-images-amazon.com/images/M/MV5BNDgyMDc2NDgtN2JkMy00NjM0LWIzMjQtZGFiZjc1ZDU4ZWU4XkEyXkFqcGdeQXVyMjg5MDk0NTA@._V1_UY256_CR16,0,172,256_AL_.jpg); | |
| --logo: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzOSIgaGVpZ2h0PSI0MCIgdmlld0JveD0iMCAwIDM5IDQwIj4KICA8ZGVmcz4KICAgIDxmaWx0ZXIgaWQ9ImRlZmF1bHQtYiIgd2lkdGg9IjEwMS4zJSIgaGVpZ2h0PSIxMjMuNSUiIHg9Ii0uNyUiIHk9Ii0xMS44JSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94Ij4KICAgICAgPGZlT2Zmc2V0IGR5PSIyIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+CiAgICAgIDxmZUdhdXNzaWFuQmx1ciBpbj0ic2hhZG93T2Zmc2V0T3V0ZXIxIiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiIHN0ZERldmlhdGlvbj0iMSIvPgogICAgICA8ZmVDb2xvck1hdHJpeCBpbj0ic2hhZG93Qmx1ck91dGVyMSIgcmVzdWx0PSJzaGFkb3dNYXRyaXhPdXRlcjEiIHZhbHVlcz0iMCAwIDAgMCAwLjA1NDkwMTk2MDggICAwIDAgMCAwIDAuMTE3NjQ3MDU5ICAgMCAwIDAgMCAwLjE0NTA5ODAzOSAgMCAwIDAgMC4xNiAwIi8+CiAgICAgIDxmZU1lcmdlPgogICAgICAgIDxmZU1lcmdlTm9kZSBpbj0ic2hhZG93TWF0cml4T3V0ZXIxIi8+CiAgICAgICAgPGZlTWVyZ2VOb2RlIGluPSJTb3VyY2VHcmFwaGljIi8+CiAgICAgIDwvZmVNZXJnZT4KICAgIDwvZmlsdGVyPgogICAgPHJhZGlhbEdyYWRpZW50IGlkPSJkZWZhdWx0LWEiIGN4PSI1MCUiIGN5PSIwJSIgcj0iMTAwLjExJSIgZng9IjUwJSIgZnk9IjAlIiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KDAgLjk5ODkgLTEuMTUyIDAgLjUgLS41KSI+CiAgICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMyMEM2QjciLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjNEQ5QUJGIi8+CiAgICA8L3JhZGlhbEdyYWRpZW50PgogIDwvZGVmcz4KICA8ZyBmaWxsPSJ1cmwoI2RlZmF1bHQtYSkiIGZpbHRlcj0idXJsKCNkZWZhdWx0LWIpIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTQgLTE2KSI+CiAgICA8cGF0aCBkPSJNMTEuNjEwMzE1LDIyLjQ1Mjg2MTkgTDExLjYzMTAxNSwyMi40NjI5NDUyIEMxMS42NDAxMDUsMjIuNDcxMDQ1MiAxMS42NDk0NjUsMjIuNDgyMjA1MiAxMS42NTYzMDUsMjIuNDkyMTk1MiBMMTEuNjU2MzA1LDIyLjQ5MjE5NTIgTDE5Ljc1NDk1NSwzNC4yNDQyMTUyIEMxOS4yMTc4MzUsMzQuNzc2MTE1MiAxOC45MDEwMzUsMzUuMDU3MzY1MiAxOC41NDI3NDUsMzUuMTcwNjc1MiBDMTguMTg5NTg1LDM1LjI4MjM2NTIgMTcuODEwNDE1LDM1LjI4MjM2NTIgMTcuNDU3MjU1LDM1LjE3MDY3NTIgQzE3LjAzODAzNSwzNS4wMzgxMDUyIDE2LjY3NTYwNSwzNC42NzU2NzUyIDE1Ljk1MDgzNSwzMy45NTA4MTUyIEwxNS45NTA4MzUsMzMuOTUwODE1MiBMNy44NTczNjksMjUuODU3Mzg1MiBMOS45NzA5NjUsMjIuNTc4MjM1MiBDOS45ODE0MDUsMjIuNTYyMDM1MiA5Ljk5MDg1NSwyMi41NDczNjUyIDEwLjAwNjYwNSwyMi41MzYyMDUyIEMxMC4wMjk1NTUsMjIuNTE5OTE1MiAxMC4wNjIzMTUsMjIuNTI3NzQ1MiAxMC4wODkxMzUsMjIuNTM2MTE1MiBDMTAuMzA2NjY1LDIyLjYwMzI1NTIgMTAuNTExOTU1LDIyLjYzMDUyNTIgMTAuNzMxMDE1LDIyLjYzMDUyNTIgQzExLjAxMzcwNSwyMi42MzA1MjUyIDExLjI4MjA4NSwyMi41NzQwOTUyIDExLjU2MzUxNSwyMi40NjEyMzUyIEMxMS41ODcyNzUsMjIuNDUxNjk1MiAxMS42MTE5MzUsMjIuNDQ2MDI1MiAxMS42MzEwMTUsMjIuNDYyOTQ1MiBaIE0xMi42NTIwMDg4LDIxLjQ4MjYzMTQgTDEyLjY4NTYzNSwyMS40ODczNDUyIEwyMS42MTQ3MTUsMjMuMzI4NzQ1MiBDMjEuNjM2OTQ1LDIzLjMzMzMzNTIgMjEuNjY3MDA1LDIzLjM0MjY5NTIgMjEuNjgzMjA1LDIzLjM1ODYyNTIgQzIxLjY5NDcyNSwyMy4zNzAxNDUyIDIxLjY5NzE1NSwyMy4zODI2NTUyIDIxLjY5OTg1NSwyMy4zOTY4NzUyIEwyMS43MDE1MiwyMy40MDU1NzE1IEwyMS43MDM3MjUsMjMuNDE0NjA1MiBDMjEuODM0NzY1LDIzLjg3NTk0NTIgMjIuMTcwODI1LDI0LjI3NTAwNTIgMjIuNjI1MjM1LDI0LjQ1NDczNTIgQzIyLjY1MDQzNSwyNC40NjcxNTUyIDIyLjYzOTI3NSwyNC40OTU1OTUyIDIyLjYyNzU3NSwyNC41MjUzODUyIEMyMi42MjIxNzUsMjQuNTM5MDY1MiAyMi42MTY2ODUsMjQuNTUzMDE1MiAyMi42MTQ1MjUsMjQuNTY1Nzk1MiBDMjIuNTAyMjA1LDI1LjI1MDE1NTIgMjEuNTM2ODY1LDMxLjEzMzgxNTIgMjEuMjc3ODQ1LDMyLjcyMjIyNTIgTDIxLjI3Nzg0NSwzMi43MjIyMjUyIEwyMC41NDg1NzUsMzMuNDUxNDk1MiBMMTIuNDg5NjE1LDIxLjgwMzQyNTIgQzEyLjQ4NjY0NSwyMS43OTkxOTUyIDEyLjQ4MzQ5NSwyMS43OTQ5NjUyIDEyLjQ4MDI1NSwyMS43OTA3MzUyIEMxMi40Njc1NjUsMjEuNzc0MDg1MiAxMi40NTQ2MDUsMjEuNzU2ODk1MiAxMi40NTY0OTUsMjEuNzM2NzM1MiBDMTIuNDU3NzU1LDIxLjcyMjE1NTIgMTIuNDY3MDI1LDIxLjcxMDM2NTIgMTIuNDc2Mjk1LDIxLjY5ODY2NTIgTDEyLjQ3NjI5NSwyMS42OTg2NjUyIEwxMi40ODUwMjUsMjEuNjg3MTQ1MiBDMTIuNTA5Njg1LDIxLjY1MTg2NTIgMTIuNTMwNjU1LDIxLjYxNTg2NTIgMTIuNTUzNjA1LDIxLjU3NjM1NTIgQzEyLjU1OTU0NSwyMS41NjYxODUyIDEyLjU2NTU3NSwyMS41NTU3NDUyIDEyLjU3MTg3NSwyMS41NDUwMzUyIEwxMi41NzE4NzUsMjEuNTQ1MDM1MiBMMTIuNTkzMjk1LDIxLjUxMTgxNCBMMTIuNTkzMjk1LDIxLjUxMTgxNCBMMTIuNjE5OTM1LDIxLjQ4ODc4NTIgQzEyLjYzODkyNSwyMS40Nzg3MDUyIDEyLjY2NDU3NSwyMS40ODI5MzUyIDEyLjY4NTYzNSwyMS40ODczNDUyIFogTTI0LjU0NjE1LDIzLjk0OTUwOSBMMjQuNTU5MTU1LDIzLjk1MTA5NTIgTDI5LjExMzg3NSwyNC44ODYxMDUyIEwyMi42NDY0NzUsMzEuMzUzNTA1MiBMMjMuNzU0Mzc1LDI0LjU0OTA1NTIgQzIzLjc1NDgyNSwyNC41NDU5MDUyIDIzLjc1NTI3NSwyNC41NDI3NTUyIDIzLjc1NTYzNSwyNC41Mzk2MDUyIEMyMy43NTY4MDUsMjQuNTMxMDU1MiAyMy43NTc4ODUsMjQuNTIyNTk1MiAyMy43NjEwMzUsMjQuNTE0NDA1MiBDMjMuNzY5Njc1LDI0LjQ5MjUzNTIgMjMuNzkzNDM1LDI0LjQ4MzE3NTIgMjMuODE1OTM1LDI0LjQ3NDI2NTIgQzIzLjgxOTUzNSwyNC40NzI4MjUyIDIzLjgyMzA0NSwyNC40NzE0NzUyIDIzLjgyNjQ2NSwyNC40NzAwMzUyIEMyNC4wNzIyNTUsMjQuMzY3Nzk1MiAyNC4yODA3ODUsMjQuMjA1NTI1MiAyNC40NTIxNDUsMjQuMDA0OTE1MiBDMjQuNDczOTI1LDIzLjk3OTQ0NTIgMjQuNTAwMDI1LDIzLjk1NTY4NTIgMjQuNTMzMTQ1LDIzLjk1MDAxNTIgQzI0LjU0MDUyNSwyMy45NDg3NTUyIDI0LjU1MTc3NSwyMy45NDk1NjUyIDI0LjU1OTE1NSwyMy45NTEwOTUyIFogTTguOTE2NzMyLDIxLjY0OTM0NTIgQzguOTQ3MTE2LDIxLjY0OTM0NTIgOC45NjQ5MDksMjEuNjc5NzY1MiA4Ljk4MTUxNCwyMS43MDgxMTUyIEw4Ljk4MTUxNCwyMS43MDgxMTUyIEw4Ljk5MzcyNywyMS43MjgxODUyIEM5LjAyODcxOSwyMS43ODEzNzUyIDkuMDYzNzAyLDIxLjgyNzcyNTIgOS4wOTg2OTQsMjEuODczODk1MiBMOS4wOTg2OTQsMjEuODczODk1MiBMOS4xMTAyMzIsMjEuODg4MTE1MiBDOS4xMjA2MjcsMjEuOTAzNDE1MiA5LjExMzAxMywyMS45MTgyNjUyIDkuMTAzMDE0LDIxLjkzMzc0NTIgTDkuMTAzMDE0LDIxLjkzMzc0NTIgTDcuMDc2OTI1LDI1LjA3NjkwNTIgTDUuMjE5NjA0LDIzLjIxOTU3NTIgTDguODg2OTYsMjEuNjU1NDY1MiBDOC44OTYzNzQsMjEuNjUxNDE1MiA4LjkwNjQ5OSwyMS42NDkzNDUyIDguOTE2NzMyLDIxLjY0OTM0NTIgWiBNMjYuMjk4MzE1LDE1LjA3ODcxNTIgQzI2LjMyNjY2NSwxNS4wNjUzMDUyIDI2LjM2MTg1NSwxNS4wNzkzNDUyIDI2LjM5MDc0NSwxNS4wOTE0OTUyIEwyNi4zOTA3NDUsMTUuMDkxNDk1MiBMMzUuMDc2NDY1LDE4Ljc2NTAyNTIgQzM0Ljg5NjU1NSwxOS4xMDM0MjUyIDM0LjU0NTczNSwxOS40NTQyNDUyIDMzLjk1MDgzNSwyMC4wNDkyMzUyIEwzMC4wMTg4MjUsMjMuOTgxMTU1MiBMMjQuOTMxODQ1LDIyLjkyMTc2NTIgQzI0LjkyMzM4NSwyMi45MTk5NjUyIDI0LjkxNDIwNSwyMi45MTg1MjUyIDI0LjkwNDkzNSwyMi45MTY5OTUyIEMyNC44NjA0NzUsMjIuOTA5NzA1MiAyNC44MTE3ODUsMjIuOTAxNjk1MiAyNC44MTE3ODUsMjIuODYwNDc1MiBDMjQuNzY1MjU1LDIyLjQzMTE3NTIgMjQuNTYzNjU1LDIyLjA0Nzk1NTIgMjQuMjIyNDY1LDIxLjc4NzQwNTIgQzI0LjIwMTY3NSwyMS43NjY3OTUyIDI0LjIwNzUyNSwyMS43MzQyMTUyIDI0LjIxMjkyNSwyMS43MDQyNDUyIEwyNC4yMTI5MjUsMjEuNzA0MjQ1MiBMMjQuMjE1MDg1LDIxLjY5MTgyNTIgTDI1LjE3MjQxNSwxNS44MTg0MjUyIEMyNS4xNzM0MDUsMTUuODEyMjE1MiAyNS4xNzQzMDUsMTUuODA1NjQ1MiAyNS4xNzUyOTUsMTUuNzk4OTg1MiBDMjUuMTgxNTA1LDE1Ljc1NDE2NTIgMjUuMTg4ODg1LDE1LjcwMTUxNTIgMjUuMjMwNDY1LDE1LjcwMTUxNTIgQzI1LjY1ODMyNSwxNS42NDExMjUyIDI2LjAyNTg4NSwxNS40MzE4NzUyIDI2LjI3MzkyNSwxNS4xMDMxMDUyIEMyNi4yODEzOTUsMTUuMDkzMjk1MiAyNi4yODcyNDUsMTUuMDg0MDI1MiAyNi4yOTgzMTUsMTUuMDc4NzE1MiBaIE0xLjE1ODY5ODcsMTkuMTEwNzE1MiBMOC4zMDAzNzYsMjAuNTkxNjY1MiBMOC4zMDAzNzYsMjAuNTkxNjY1MiBMOC4zMjcxOTYsMjAuNTk2NDM1MiBDOC4zNzE3MDEsMjAuNjAzNjM1MiA4LjQyMDQwOSwyMC42MTE2NDUyIDguNDIwNDA5LDIwLjY1Mjg2NTIgQzguNDIwNDA5LDIwLjY5NzU5NTIgOC4zNjc1NywyMC43MTg1NjUyIDguMzIyNDE3LDIwLjczNjM4NTIgQzguMzE1MjA4LDIwLjczOTI2NTIgOC4zMDgxOTcsMjAuNzQyMDU1MiA4LjMwMTYyNywyMC43NDQ4NDUyIEw4LjMwMTYyNywyMC43NDQ4NDUyIEw0LjM5ODQ0NCwyMi4zOTg0MTUyIEwyLjA0OTE5MiwyMC4wNDkyMzUyIEMxLjY0OTYzNywxOS42NDk2MzUyIDEuMzYwMjEwNSwxOS4zNjAxOTUyIDEuMTU4Njk4NywxOS4xMTA3MTUyIEwxLjE1ODY5ODcsMTkuMTEwNzE1MiBaIE0yMy44NjU3OTUsMTUuMjcyMjE1MiBDMjMuODY1Nzk1LDE1LjI3MjIxNTIgMjMuODgxMzY1LDE1LjI3MjMwNTIgMjMuODk2ODQ1LDE1LjI4NzYwNTIgQzIzLjk1NzQxNSwxNS4zNDczNjUyIDI0LjAwODQ0NSwxNS4zODg1ODUyIDI0LjA1NzQ5NSwxNS40MjU2NjUyIEMyNC4wNjQ3ODUsMTUuNDMxMTU1MiAyNC4wNzMzMzUsMTUuNDM2MTA1MiAyNC4wODE5NzUsMTUuNDQxMTQ1MiBDMjQuMTA0NjU1LDE1LjQ1NDI4NTIgMjQuMTI3Njk1LDE1LjQ2NzY5NTIgMjQuMTI5MjI1LDE1LjQ5MTcyNTIgTDI0LjEyOTIyNSwxNS40OTE3MjUyIEwyNC4xMjc0MjUsMTUuNTE0NDk1MiBMMjMuMTgwMDg1LDIxLjMyOTkzNTIgQzIzLjE3ODgyNSwyMS4zMzczMTUyIDIzLjE3NzgzNSwyMS4zNDUxNDUyIDIzLjE3Njc1NSwyMS4zNTMwNjUyIEMyMy4xNzA3MjUsMjEuMzk4Nzg1MiAyMy4xNjM5NzUsMjEuNDQ5OTk1MiAyMy4xMjE0OTUsMjEuNDQ5OTk1MiBDMjIuNjA3Nzc1LDIxLjQ3OTg3NTIgMjIuMTUzMDA1LDIxLjc3MTY1NTIgMjEuODg2MTU1LDIyLjIxMTkzNTIgQzIxLjg4NDcxNSwyMi4yMTQzNjUyIDIxLjg4MzI3NSwyMi4yMTY3MDUyIDIxLjg4MTgzNSwyMi4yMTkwNDUyIEMyMS44Njk1MDUsMjIuMjM5ODM1MiAyMS44NTc2MjUsMjIuMjU5NzI1MiAyMS44MzU5MzUsMjIuMjcwNjE1MiBDMjEuODE3NjY1LDIyLjI3OTcwNTIgMjEuNzkzMjc1LDIyLjI3NTc0NTIgMjEuNzczMzg1LDIyLjI3MTYwNTIgTDIxLjc3MzM4NSwyMi4yNzE2MDUyIEwxMi45NjAxMzUsMjAuNDUzNDI1MiBDMTIuOTUxNzY1LDIwLjQ1MTcxNTIgMTIuODIyODg1LDE5Ljk4NjQxNTIgMTIuODEzNjE1LDE5Ljk4NDk3NTIgTDEyLjgxMzYxNSwxOS45ODQ5NzUyIFogTTUuMDU2MTAxLDEyLjk0MzkxNTIgQzUuNTUxNTY5LDEzLjY3MTExNTIgOC44MjQzODMsMTguMzk4OTk1MiA5LjIwNjQwNiwxOC45NDYxOTUyIEw5LjIwNjQwNiwxOC45NDYxOTUyIEw5LjIxODM0OSwxOC45NjI1NzUyIEM5LjI0MjczOSwxOC45OTU1MTUyIDkuMjY5NjEzLDE5LjAzMTc4NTIgOS4yNDIzODgsMTkuMDU4Njk1MiBDOS4xMTA2NjQsMTkuMjAzMzI1MiA4Ljk3ODk0LDE5LjM2MTYzNTIgOC44ODYzMywxOS41MzM3MTUyIEM4Ljg3NTM5NSwxOS41NTM5NjUyIDguODYxMzkxLDE5LjU3NzAwNTIgOC44NDE3OCwxOS41ODkxNTUyIEM4LjgyOTg0NiwxOS41OTY1MzUyIDguODE3NjMzLDE5LjU5Mzk1MjQgOC44MDQwMjUsMTkuNTkxMDQ1MiBMOC44MDQwMjUsMTkuNTkxMDQ1MiBMOC44MDE5OTEsMTkuNTkwNjg1MiBMMC43NDgyMTUsMTcuOTAyNzM1MiBDMC43NTYzNTgzOTgsMTcuNzUyMjU1MiAwLjc4MzQwOTA1LDE3LjYwMjU4NTIgMC44MjkzNjY5MiwxNy40NTcyMzUyIEMwLjk2MTkzMDgsMTcuMDM4MTA1MiAxLjMyNDM1MTgsMTYuNjc1Njc1MiAyLjA0OTE5MiwxNS45NTA4MTUyIEwyLjA0OTE5MiwxNS45NTA4MTUyIFogTTE4LjM0NjI3NSwxMS43MTU5NTUyIEMxOC4zNzA3NTUsMTEuNjk2OTY1MiAxOC40MDYzOTUsMTEuNzA2Njg1MiAxOC40MzQ5MjUsMTEuNzE4ODM1MiBMMTguNDM0OTI1LDExLjcxODgzNTIgTDIzLjM0MzA3NSwxMy43OTgxOTUyIEMyMy4zNzExNTUsMTMuODEwMDc1MiAyMy4zOTk4NjUsMTMuODIyMjI1MiAyMy40MTEyOTUsMTMuODUwNDg1MiBDMjMuNDE3MzI1LDEzLjg2NTYwNTIgMjMuNDE0NDQ1LDEzLjg4NTMxNTIgMjMuNDExMzg1LDEzLjkwMTE1NTIgQzIzLjM5NzYxNSwxMy45NzI3MDUyIDIzLjM4NTEwNSwxNC4wNTUzMjUyIDIzLjM4NTEwNSwxNC4xMzc4NTUyIEwyMy4zODUxMDUsMTQuMTM3ODU1MiBMMjMuMzg1MTA1LDE0LjI3NTgyNTIgQzIzLjM4NTEwNSwxNC4zMDk1NzUyIDIzLjM0OTgyNSwxNC4zMjQyNDUyIDIzLjMxNzYwNSwxNC4zMzc0NzUyIEMyMy4zMTQwMDUsMTQuMzM5MDA1MiAyMy4zMTA0MDUsMTQuMzQwNDQ1MiAyMy4zMDY5ODUsMTQuMzQxODg1MiBDMjIuNTI5NjU1LDE0LjY3MzQ0NTIgMTIuMzg5ODA1LDE4Ljk5NzMxNTIgMTIuMzc0ODY1LDE4Ljk5NzMxNTIgQzEyLjM1OTM4NSwxOC45OTczMTUyIDEyLjM0MzkwNSwxOC45OTczMTUyIDEyLjMyODMzNSwxOC45ODIwMTUyIEMxMi4zMDE2MDUsMTguOTU1NTU1MiAxMi4zMjg2MDUsMTguOTE2NzY1MiAxMi4zNTIyNzUsMTguODgyNjU1MiBDMTIuMzU2Njg1LDE4Ljg3NjM1NTIgMTIuMzYxMDA1LDE4Ljg3MDE0NTIgMTIuMzY0ODc1LDE4Ljg2NDIwNTIgTDEyLjM2NDg3NSwxOC44NjQyMDUyIEwxNi4zOTkwMzUsMTIuNjE5MDE1MiBDMTYuNDAxMzc1LDEyLjYxNTQxNTIgMTYuNDAzNzE1LDEyLjYxMTcyNTIgMTYuNDA2MDU1LDEyLjYwODAzNTIgQzE2LjQyOTkwNSwxMi41NzAzMjUyIDE2LjQ1NjYzNSwxMi41MjgyOTUyIDE2LjQ5OTgzNSwxMi41MjgyOTUyIEMxNi41MTM2MDUsMTIuNTMwMTg1MiAxNi41MjcxOTUsMTIuNTMyMTY1MiAxNi41NDA1MTUsMTIuNTM0MDU1MiBDMTYuNjMyMDQ1LDEyLjU0NzI4NTIgMTYuNzEzMjI1LDEyLjU1ODk4NTIgMTYuNzk0NDk1LDEyLjU1ODk4NTIgQzE3LjQwNjU4NSwxMi41NTg5ODUyIDE3Ljk3MzQwNSwxMi4yNjAzNjUyIDE4LjMxNjEyNSwxMS43NTE1OTUyIEMxOC4zMjUyMTUsMTEuNzM4MDk1MiAxOC4zMzM0MDUsMTEuNzI2MDM1MiAxOC4zNDYyNzUsMTEuNzE1OTU1MiBaIE05LjkwMTc1NSw4LjA5ODIxNjIgQzEwLjI4MTY0NSw4LjI2NDQxOTIgMTEuNjY0NDA1LDguODQ4NzYyMiAxMi45MDAzNzUsOS4zNzExMDQyIEMxMy44MzcxODUsOS43NjcwMDUyIDE0LjY5MDAyNSwxMC4xMjc0NTUyIDE0Ljk1NzU5NSwxMC4yNDMwMTUyIEMxNC45ODQ1MDUsMTAuMjU0NjI1MiAxNS4wMDkwNzUsMTAuMjY1MjQ1MiAxNS4wMjA5NTUsMTAuMjkyMDY1MiBDMTUuMDI4MDY1LDEwLjMwODE3NTIgMTUuMDI0NTU1LDEwLjMyOTQxNTIgMTUuMDIwOTU1LDEwLjM0NjY5NTIgQzE0Ljk5MzY4NSwxMC40NzYwMjUyIDE0Ljk4MDA5NSwxMC42MDUzNTUyIDE0Ljk4MDA5NSwxMC43MzQ2ODUyIEMxNC45ODAwOTUsMTEuMjA5ODg1MiAxNS4xNjYyMTUsMTEuNjU0NDg1MiAxNS40OTE4MzUsMTEuOTkxNzE1MiBDMTUuNTE4NjU1LDEyLjAxODE3NTIgMTUuNDkxNTY1LDEyLjA1Njk2NTIgMTUuNDY3ODk1LDEyLjA5MDk4NTIgTDE1LjQ2Nzg5NSwxMi4wOTA5ODUyIEwxNS40NTUzODUsMTIuMTA5NTI1MiBMMTEuMzUyMDE1LDE4LjQ2NjQwNTIgQzExLjM0MDg1NSwxOC40ODM2ODUyIDExLjMzMDY4NSwxOC40OTk1MjUyIDExLjMxMzQwNSwxOC41MTA3NzUyIEMxMS4yOTE2MjUsMTguNTI0OTk1MiAxMS4yNjExMTUsMTguNTE4NjA1MiAxMS4yMzU5MTUsMTguNTEyMjE1MiBDMTEuMDc1OTg1LDE4LjQ3MTcxNTIgMTAuOTA0NjI1LDE4LjQ0NTQzNTIgMTAuNzQ2NTg1LDE4LjQ0NTQzNTIgQzEwLjU5OTcwNSwxOC40NDU0MzUyIDEwLjQzODk2NSwxOC40NzI5NzUyIDEwLjI3NzQxNSwxOC41MDE4NjUyIEwxMC4yNzc0MTUsMTguNTAxODY1MiBDMTAuMjU4NTE1LDE4LjUwNTI4NTIgMTAuMjQyMzE1LDE4LjUwODI1NTIgMTAuMjI3ODI1LDE4LjQ5NzcyNTIgQzEwLjIxMTk4NSwxOC40ODYyOTUyIDEwLjE5ODIxNSwxOC40Njc5MzUyIDEwLjE4NzE0NSwxOC40NTE4MjUyIEwxMC4xODcxNDUsMTguNDUxODI1MiBMNS44NTk2MTIsMTIuMTQwMzk1MiBaIE0zMC40NjIxNjUsMTIuNDYyMjM1MiBMMzQuMTExNzE3OCwxNi4xMTE4NDc3IEMzNC43MzAwMDMzLDE2LjczMTc2OTIgMzUuMDQ4MjMyNywxNy4wNzAzNDYgMzUuMTcwNjA1LDE3LjQ1NzIzNTIgQzM1LjE5MDIyNSwxNy41MTkxNTUyIDM1LjIwNjMzNSwxNy41ODE3OTUyIDM1LjIxOTAyNSwxNy42NDUwNjUyIEwzNS4yMTkwMjUsMTcuNjQ1MDY1MiBMMjYuODgyMTQ1LDE0LjExNDk5NTIgQzI2Ljg3NzkxNSwxNC4xMTMxOTUyIDI2Ljg3MzUwNSwxNC4xMTEzOTUyIDI2Ljg2OTAwNSwxNC4xMDk1OTUyIEMyNi44MzUyNTUsMTQuMDk1OTE1MiAyNi43OTY2NDUsMTQuMDgwMzQ1MiAyNi43OTY2NDUsMTQuMDQ1ODc1MiBDMjYuNzk2NjQ1LDE0LjAxMjAzNTIgMjYuODM2NDI1LDEzLjk5NTc0NTIgMjYuODY5NTQ1LDEzLjk4MjA2NTIgTDI2Ljg2OTU0NSwxMy45ODIwNjUyIEwyNi44Nzk5ODUsMTMuOTc3ODM1MiBMMzAuNDYyMTY1LDEyLjQ2MjIzNTIgWiBNMjYuMzY3MDc1LDguMzY3MDM3MiBMMjkuNjMwMjA1LDExLjYzMDI3NTIgTDI2LjIzNzExNSwxMy4wNzM5NjUyIEMyNi4yMjc3NTUsMTMuMDc4MDE1MiAyNi4yMTc1ODUsMTMuMDgwMDg1MiAyNi4yMDc0MTUsMTMuMDgwMDg1MiBDMjYuMjAwNzU1LDEzLjA4MDA4NTIgMjYuMTk2OTc1LDEzLjA4MDA4NTIgMjYuMTkzNjQ1LDEzLjA3ODkxNTIgQzI2LjE4OTA1NSwxMy4wNzcyOTUyIDI2LjE4NTI3NSwxMy4wNzM1MTUyIDI2LjE3NjM2NSwxMy4wNjQ3ODUyIEMyNi4wNTY0ODUsMTIuOTMxNDA1MiAyNS45MDc2MjUsMTIuODEyNDI1MiAyNS43Mjk3ODUsMTIuNzIxNTI1MiBDMjUuNzI1NTU1LDEyLjcxOTM2NTIgMjUuNzIxNTA1LDEyLjcxNzgzNTIgMjUuNzE3NTQ1LDEyLjcxNjMwNTIgQzI1LjcxMDA3NSwxMi43MTM0MjUyIDI1LjcwMzE0NSwxMi43MTA4MTUyIDI1LjY5NjY2NSwxMi43MDQ2MDUyIEMyNS42NzU2OTUsMTIuNjg0ODA1MiAyNS42Njc0MTUsMTIuNjQ5MjU1MiAyNS42NzIwMDUsMTIuNjIwODE1MiBMMjUuNjcyMDA1LDEyLjYyMDgxNTIgTDI2LjM2NzA3NSw4LjM2NzAzNzIgWiBNMjEuOTczMDk1LDMuOTczMTExMiBMMjUuNDEwMTA1LDcuNDEwMTMwMiBMMjQuNTgyNTU1LDEyLjUzNzU2NTIgTDI0LjU4MjU1NSwxMi41Mzc1NjUyIEwyNC41ODA5MzUsMTIuNTUxNDI1MiBDMjQuNTc5Njc1LDEyLjU2MzIxNTIgMjQuNTc4MjM1LDEyLjU3NjE3NTIgMjQuNTc0MDk1LDEyLjU4NTQ0NTIgQzI0LjU2NTk5NSwxMi42MDM0NDUyIDI0LjU0ODI2NSwxMi42MDc0OTUyIDI0LjUyOTM2NSwxMi42MTE4MTUyIEMyNC41MjI5NzUsMTIuNjEzMjU1MiAyNC41MTY0MDUsMTIuNjE0Nzg1MiAyNC41MTAwMTUsMTIuNjE2ODU1MiBDMjQuMzM1OTU1LDEyLjY3MzczNTIgMjQuMTc0NDk1LDEyLjc1MzgzNTIgMjQuMDM1ODA1LDEyLjg1NzMzNTIgQzI0LjAyOTMyNSwxMi44NjIxOTUyIDI0LjAyMzkyNSwxMi44Njc4NjUyIDI0LjAxODcwNSwxMi44NzMzNTUyIEMyNC4wMDgyNjUsMTIuODg0NDI1MiAyMy45OTg0NTUsMTIuODk0Njg1MiAyMy45ODIzNDUsMTIuODk1Njc1MiBDMjMuOTcxNzI1LDEyLjg5NjMwNTIgMjMuOTUzODE1LDEyLjg5Mzk2NTIgMjMuOTQ0MDA1LDEyLjg4OTczNTIgTDIzLjk0NDAwNSwxMi44ODk3MzUyIEwxOC43MDc2MjUsMTAuNjY0ODQ1MiBDMTguNzA0MjA1LDEwLjY2MzQwNTIgMTguNzAwNjk1LDEwLjY2MTk2NTIgMTguNjk3MDk1LDEwLjY2MDQzNTIgQzE4LjY2Mzk3NSwxMC42NDY4NDUyIDE4LjYyNDI4NSwxMC42MzA0NjUyIDE4LjYyNDI4NSwxMC41OTY2MjUyIEMxOC41OTYwMjUsMTAuMzE2NzI1MiAxOC41MDMwNTUsMTAuMDM2OTE1MiAxOC4zNTczNDUsOS43OTIwMjUyIEMxOC4zNTM2NTUsOS43ODU5MDUyIDE4LjM0OTg3NSw5Ljc3OTY5NTIgMTguMzQ1OTE1LDkuNzczMzk1MiBDMTguMzIwMjY1LDkuNzMyMDg1MiAxOC4yOTI5MDUsOS42ODgyMDEyIDE4LjMxNDE0NSw5LjY0NjIxNjIgTDE4LjMxNDE0NSw5LjY0NjIxNjIgTDIxLjk3MzA5NSwzLjk3MzExMTIgWiBNMTcuNDU3MjU1LDAuODI5MzY3NjQgQzE3LjgxMDQxNSwwLjcxNzY1Nzc1IDE4LjE4OTU4NSwwLjcxNzY1Nzc1IDE4LjU0Mjc0NSwwLjgyOTM2NzczIEMxOC45NjE5NjUsMC45NjE5MzA4IDE5LjMyNDM5NSwxLjMyNDM1MjcgMjAuMDQ5MTY1LDIuMDQ5MTk5MiBMMjEuMTgzMTY1LDMuMTgzMTU0MiBMMTcuNDYxNjY1LDguOTQ3MjQwMiBDMTcuNDUwOTU1LDguOTYzODE4MiAxNy40NDExNDUsOC45Nzg5MjkyIDE3LjQyNDg1NSw4Ljk5MDE0MzIgQzE3LjQwMjM1NSw5LjAwNTYxNDIgMTcuMzcwNDk1LDguOTk4MzI0MiAxNy4zNDQyMTUsOC45OTA4NTQyIEMxNy4xNTU4NDUsOC45MzcyODYyIDE2Ljk2NzM4NSw4LjkxMDUwMjIgMTYuNzc4OTI1LDguOTEwNTAyMiBDMTYuMzYwMjQ1LDguOTEwNTAyMiAxNS45NDE1NjUsOS4wNjM3OTkyIDE1LjYxNTk0NSw5LjMyNDQwMzIgQzE1LjU5MTgyNSw5LjM0ODI0NDIgMTUuNTU1NzM1LDkuMzMzNTQ3MiAxNS41MjQ2ODUsOS4zMjAwNDcyIEMxNS4wMzg2ODUsOS4xMDkwNjAyIDExLjI1ODY4NSw3LjUxMDc0MTIgMTAuNzE3ODc1LDcuMjgyMDk2MiBMMTAuNzE3ODc1LDcuMjgyMDk2MiBMMTYuMTExODQ4MywxLjg4ODMwMDM0IEMxNi43MzE2OTk1LDEuMjY5OTU2MzYgMTcuMDcwMjgyNywwLjk1MTczMzYzNCAxNy40NTcyNTUsMC44MjkzNjc2NCBaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNiAxNikiLz4KICA8L2c+Cjwvc3ZnPgo="); | |
| --notification-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDE2IDIwIj4KICA8cGF0aCBmaWxsPSIjN0Q4NTg5IiBkPSJNMTUsMTkgQzE1LDIwLjY1NyAxMy42NTcsMjIgMTIsMjIgQzEwLjM0MywyMiA5LDIwLjY1NyA5LDE5IEwxNSwxOSBaIE0xOC4xMjkxNjg4LDE3IEw1Ljg3MDUxMTEyLDE3IEM0LjgzNzQ1NjM1LDE3IDQsMTYuMTA0NTY5NSA0LDE1IEM0LDE0LjY1MTk0NjEgNC4wODQ5NDk4NiwxNC4zMDk5MTc1IDQuMjQ2NDUyNjcsMTQuMDA3NzIyMSBMNi4zODgzMDY2MSwxMCBMNi4zODgzMDY2MSw4IEM2LjM4ODMwNjYxLDQuNjg2IDguOTAwNDAzMDQsMiAxMS45OTk4NCwyIEMxNS4wOTkyNzY5LDIgMTcuNjExMzczMyw0LjY4NiAxNy42MTEzNzMzLDggTDE3LjYxMTM3MzMsMTAgTDE5Ljc1MzIyNzMsMTQuMDA3NzIyMSBDMjAuMjY1NzY1OSwxNC45NjY3NTcgMTkuOTU0MTQ0OSwxNi4xODg0NjYzIDE5LjA1NzIwMjIsMTYuNzM2NDg2MyBDMTguNzc0NTcyMywxNi45MDkxNjk0IDE4LjQ1NDY4ODEsMTcgMTguMTI5MTY4OCwxNyBaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNCAtMikiLz4KPC9zdmc+Cg=="); | |
| --caret-right-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDEyIDE2Ij4KICA8ZGVmcz4KICAgIDxmaWx0ZXIgaWQ9ImNhcmV0LXJpZ2h0LWEiIHdpZHRoPSIxMDEuMyUiIGhlaWdodD0iMTIzLjUlIiB4PSItLjclIiB5PSItMTEuOCUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCI+CiAgICAgIDxmZU9mZnNldCBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPgogICAgICA8ZmVHYXVzc2lhbkJsdXIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIiBzdGREZXZpYXRpb249IjEiLz4KICAgICAgPGZlQ29sb3JNYXRyaXggaW49InNoYWRvd0JsdXJPdXRlcjEiIHJlc3VsdD0ic2hhZG93TWF0cml4T3V0ZXIxIiB2YWx1ZXM9IjAgMCAwIDAgMC4wNTQ5MDE5NjA4ICAgMCAwIDAgMCAwLjExNzY0NzA1OSAgIDAgMCAwIDAgMC4xNDUwOTgwMzkgIDAgMCAwIDAuMTYgMCIvPgogICAgICA8ZmVNZXJnZT4KICAgICAgICA8ZmVNZXJnZU5vZGUgaW49InNoYWRvd01hdHJpeE91dGVyMSIvPgogICAgICAgIDxmZU1lcmdlTm9kZSBpbj0iU291cmNlR3JhcGhpYyIvPgogICAgICA8L2ZlTWVyZ2U+CiAgICA8L2ZpbHRlcj4KICA8L2RlZnM+CiAgPGcgZmlsbD0iIzdEODU4OSIgZmlsdGVyPSJ1cmwoI2NhcmV0LXJpZ2h0LWEpIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjczIC0yOCkiPgogICAgPHBhdGggZD0iTTExLjk5OTg4MzYsNC4wOTM3MDgwMyBMOC41NTgwOTUxNyw3LjQzMjk0OTUzIEM4LjIzNTMxNDU5LDcuNzQ2MTEyOTggOC4yMzUzMTQ1OSw4LjI1Mzg4NzM2IDguNTU4MDk1MTcsOC41NjY5Mzc2OSBMMTIsMTEuOTA2MjkyMSBMOS44NDE4Nzg3MSwxNCBMNC4yNDIwODU0NCw4LjU2NjkzNzUxIEMzLjkxOTMwNDg1LDguMjUzODg3MTkgMy45MTkzMDQ4NSw3Ljc0NjExMjgxIDQuMjQyMDg1NDQsNy40MzI5NDkzNiBMOS44NDE5OTUzMSwyIEwxMS45OTk4ODM2LDQuMDkzNzA4MDMgWiIgdHJhbnNmb3JtPSJtYXRyaXgoLTEgMCAwIDEgMjg3IDI2KSIvPgogIDwvZz4KPC9zdmc+Cg=="); | |
| --circleTeal: url("data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjhweCIgaGVpZ2h0PSI4cHgiIHZpZXdCb3g9IjAgMCA4IDgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8ZyBpZD0iT3RoZXIiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJPdGhlci0vLVJhZGlvLS8tRGlzYWJsZWQtLy1BY3RpdmUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02LjAwMDAwMCwgLTYuMDAwMDAwKSIgZmlsbD0iIzAwN0E3MCIgZmlsbC1ydWxlPSJub256ZXJvIj4KICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbCIgY3g9IjEwIiBjeT0iMTAiIHI9IjQiPjwvY2lyY2xlPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+Cg=="); | |
| } | |
| /* Unrelated styles for radios and switcher */ | |
| p { | |
| color: var(--neutral900); | |
| font-size: 14px; | |
| font-weight: 400; | |
| line-height: 20px; | |
| } | |
| .emphasis, strong { | |
| font-weight: 600; | |
| color: #0E1E25; | |
| } | |
| .muted { | |
| color: #656F74; | |
| } | |
| /* ⭐️Checkbox and Radio Styling ⭐️ */ | |
| /* CSS madness, hiding the actual checkbox */ | |
| [type="checkbox"]:not(:checked), | |
| [type="checkbox"]:checked, | |
| [type="radio"]:not(:checked), | |
| [type="radio"]:checked { | |
| position: absolute; | |
| left: -9999px; | |
| } | |
| /* The actual label */ | |
| [type="checkbox"]:not(:checked) + label, | |
| [type="checkbox"]:checked + label, | |
| [type="radio"]:not(:checked) + label, | |
| [type="radio"]:checked + label { | |
| position: relative; | |
| padding-left: 1.95em; | |
| cursor: pointer; | |
| /* Extends h5.emphasis 👇 */ | |
| font-size: 16px; | |
| font-weight: 600; | |
| line-height: 24px; | |
| color: var(--neutral900); | |
| } | |
| label p { | |
| margin: 4px 0 8px 0; | |
| } | |
| /* Basic shape of the checkbox/radio */ | |
| [type="checkbox"]:not(:checked) + label:before, | |
| [type="checkbox"]:checked + label:before, | |
| [type="radio"]:not(:checked) + label:before, | |
| [type="radio"]:checked + label:before { | |
| content: ''; | |
| position: absolute; | |
| left: 0; | |
| top: 2px; | |
| width: 20px; | |
| height: 20px; | |
| } | |
| /* Checkbox only shape */ | |
| [type="checkbox"]:not(:checked) + label:before, | |
| [type="checkbox"]:checked + label:before { | |
| border-radius: 6px; | |
| } | |
| /* Radio only shape */ | |
| [type="radio"]:not(:checked) + label:before, | |
| [type="radio"]:checked + label:before { | |
| border-radius: 10px; | |
| } | |
| /* Checked state */ | |
| [type="radio"]:checked + label:before { | |
| background: var(--neutral100); | |
| box-shadow: inset 0 0 0 6px var(--teal800); | |
| } | |
| /* Default state */ | |
| [type="checkbox"]:not(:checked) + label:before, | |
| [type="radio"]:not(:checked) + label:before{ | |
| background: var(--neutral100); | |
| box-shadow: inset 0 0 0 2px var(--neutral400); | |
| } | |
| /* disabled checkbox */ | |
| [type="checkbox"]:disabled:not(:checked) + label:before, | |
| [type="checkbox"]:disabled:checked + label:before, | |
| [type="radio"]:disabled:not(:checked) + label:before, | |
| [type="radio"]:disabled:checked + label:before { | |
| box-shadow: none; | |
| } | |
| [type="checkbox"]:disabled:checked + label:before { | |
| background: var(--neutral200); | |
| background-image: var(--checkmarkTeal); | |
| background-size: 11px 8px; | |
| background-repeat: no-repeat; | |
| background-position: 5px center; | |
| } | |
| [type="radio"]:disabled:checked + label:before { | |
| background-image: var(--circleTeal); /* Tried using simple inset box-shadows but there was some artifacts */ | |
| background-size: 8px 8px; | |
| background-repeat: no-repeat; | |
| background-position: center; | |
| } | |
| [type="checkbox"]:disabled:not(:checked) + label:before { | |
| background: var(--neutral200); | |
| background-image: var(--uncheckMark); | |
| background-size: 8px 8px; | |
| background-repeat: no-repeat; | |
| background-position: center; | |
| } | |
| /* Hover/Focus/Active states */ | |
| [type="checkbox"]:checked + label:hover:before, | |
| [type="checkbox"]:checked + label:active:before, | |
| [type="checkbox"]:checked + label:focus:before { | |
| box-shadow: 0 0 0 2px var(--gold500); | |
| } | |
| [type="radio"]:not(:checked) + label:hover:before, | |
| [type="radio"]:not(:checked) + label:active:before, | |
| [type="radio"]:not(:checked) + label:focus:before { | |
| box-shadow: inset 0 0 0 2px var(--gold500); | |
| } | |
| [type="checkbox"]:not(:checked) + label:hover:before, | |
| [type="checkbox"]:not(:checked) + label:active:before, | |
| [type="checkbox"]:not(:checked) + label:focus:before { | |
| box-shadow: inset 0 0 0 2px var(--gold500); | |
| } | |
| [type="checkbox"]:disabled:not(:checked) + label:hover:before, | |
| [type="checkbox"]:disabled:checked + label:hover:before, | |
| [type="radio"]:disabled:not(:checked) + label:hover:before, | |
| [type="radio"]:disabled:checked + label:hover:before { | |
| cursor: not-allowed; | |
| box-shadow: none; | |
| } | |
| .input-row { | |
| display: inline-flex; | |
| align-items: center; | |
| margin-top: 8px; | |
| width: auto; | |
| } | |
| .wrapper { | |
| position: fixed; | |
| padding-left: 8px; | |
| width: 100%; | |
| bottom: 8px; | |
| } | |
| .switcher { | |
| display: inline-flex; | |
| flex-direction: column; | |
| padding: 16px; | |
| margin: auto; | |
| background: var(--neutral000); | |
| border-radius: 8px; | |
| box-shadow: 0 2px 4px 0 rgba(14,30,37,0.12); | |
| } | |
| .hidden { | |
| display: none; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment