@primer/brand-css 0.0.0-20250212132611

package/components/SubdomainNavBar/SubdomainNavBar.css

@@ -0,0 +1,728 @@
+/*
+ * Main styles for the subdomain navigation bar.
+ */
+.SubdomainNavBar {
+  position: relative;
+  z-index: 90;
+  font-weight: 550;
+  background: var(--brand-SubdomainNavBar-canvas-default);
+  -webkit-backdrop-filter: blur(16px);
+  backdrop-filter: blur(16px);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  transition: background-color var(--brand-animation-duration-fast) var(--brand-animation-easing-default),
+    border-color var(--brand-animation-duration-fast) var(--brand-animation-easing-default);
+  height: 75px;
+}
+
+/*
+ * Outer container
+ */
+.SubdomainNavBar-outer-container {
+  z-index: 90;
+}
+
+.SubdomainNavBar-outer-container--fixed {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+}
+
+/*
+ * Inner container
+ */
+.SubdomainNavBar-inner-container {
+  display: flex;
+  padding: 4px 28px;
+}
+
+.SubdomainNavBar-inner-container--centered {
+  max-width: 1280px;
+  margin: 0 auto;
+}
+
+@media screen and (min-width: 48rem) {
+  .SubdomainNavBar-inner-container {
+    padding: 4px 32px;
+  }
+}
+
+.SubdomainNavBar-inner-container--search-open {
+  animation: fade-out 150ms;
+}
+
+/*
+ * Logo and title area
+ */
+.SubdomainNavBar-title-area {
+  display: inline-flex;
+  list-style-type: none;
+  align-items: center;
+  gap: var(--base-size-8);
+  padding: 0;
+  margin: 0;
+  max-width: 340px;
+  color: var(--brand-color-text-default);
+  padding: var(--base-size-16) 0;
+}
+
+@media screen and (min-width: 63.25rem) {
+  .SubdomainNavBar-title-area {
+    gap: var(--base-size-16);
+  }
+}
+
+.SubdomainNavBar-logo-mark {
+  color: var(--brand-color-text-default);
+  position: relative;
+}
+
+.SubdomainNavBar-back-arrow {
+  position: absolute;
+  left: calc(-32px + 5px);
+  opacity: 0;
+  transition: opacity var(--brand-animation-duration-fast), transform var(--brand-animation-duration-fast) ease;
+  transform: translateX(5px);
+  color: var(--brand-color-text-muted);
+}
+
+.SubdomainNavBar-logo-mark:hover .SubdomainNavBar-back-arrow {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.SubdomainNavBar-title-separator {
+  color: var(--brand-color-text-muted);
+  font-weight: var(--base-text-weight-semibold);
+  font-size: var(--base-size-32);
+  line-height: 29px;
+}
+
+.SubdomainNavBar-logo-mark svg {
+  width: 32px;
+  height: 32px;
+}
+
+.SubdomainNavBar-title {
+  line-height: var(--base-size-32);
+  text-decoration: none;
+  padding-right: var(--base-size-16);
+  white-space: nowrap;
+}
+
+.SubdomainNavBar-title:hover {
+  text-decoration: none;
+}
+
+/*
+ * Primary navigation link area
+ */
+.SubdomainNavBar-primary-nav {
+  display: inline-flex;
+  list-style-type: none;
+  align-items: center;
+  padding: 0;
+  margin: 0;
+}
+
+.SubdomainNavBar-primary-nav-list {
+  list-style-type: none;
+}
+
+@media screen and (max-width: 767px) {
+  .SubdomainNavBar-primary-nav-list {
+    display: none;
+  }
+
+  .SubdomainNavBar-primary-nav-list--invisible {
+    display: none;
+  }
+
+  .SubdomainNavBar-primary-nav-list--visible {
+    display: block;
+    margin: 0;
+    padding: 0;
+  }
+
+  .SubdomainNavBar-menu-wrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    overflow-y: auto;
+    position: absolute;
+    top: 75px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 2;
+    background-color: var(--brand-color-canvas-default);
+    width: 100vw;
+    height: calc(100vh - 75px);
+    animation: fade-in-down 500ms;
+    animation-timing-function: var(--brand-animation-easing-default);
+  }
+
+  .SubdomainNavBar-menu-wrapper--close {
+    display: none;
+  }
+}
+
+@media screen and (min-width: 48rem) {
+  .SubdomainNavBar-primary-nav-list {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    max-width: 150px;
+    padding: 0;
+    margin: 0 24px 0 0;
+    /* overflow: hidden; */
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .SubdomainNavBar-primary-nav-list {
+    max-width: 100px;
+  }
+}
+
+@media screen and (min-width: 850px) {
+  .SubdomainNavBar-primary-nav-list {
+    max-width: 200px;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  .SubdomainNavBar-primary-nav-list {
+    max-width: 300px;
+  }
+}
+
+@media screen and (min-width: 1280px) {
+  .SubdomainNavBar-primary-nav-list {
+    max-width: 520px;
+    margin-right: 80px;
+  }
+
+  .SubdomainNavBar-outer-container--has-actions .SubdomainNavBar-primary-nav-list {
+    max-width: 465px;
+  }
+}
+
+.SubdomainNavBar-primary-nav-list-item {
+  white-space: nowrap;
+}
+
+@media screen and (max-width: 767px) {
+  .SubdomainNavBar-primary-nav-list-item {
+    animation-name: fade-in-down-staggered;
+    animation-duration: 500ms;
+    animation-delay: calc(var(--animation-order) * 80ms);
+    animation-fill-mode: both;
+    animation-timing-function: var(--brand-animation-easing-default);
+  }
+}
+
+@media screen and (min-width: 48rem) {
+  .SubdomainNavBar-primary-nav-list-item--visible {
+    order: 0;
+    visibility: visible;
+    opacity: 1;
+  }
+
+  .SubdomainNavBar-primary-nav-list-item--invisible {
+    order: 100;
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  .SubdomainNavBar-primary-nav-list-item--overflow {
+    order: 99;
+    position: relative;
+    right: 0;
+  }
+}
+
+.SubdomainNavBar-link {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--base-size-8);
+  color: var(--brand-color-text-default);
+  font-family: var(--brand-heading-fontFamily);
+  font-weight: var(--base-text-weight-normal);
+  font-size: var(--base-size-20);
+  line-height: var(--base-size-20);
+  padding: var(--base-size-8) var(--base-size-16) var(--base-size-16) var(--base-size-28);
+  text-decoration: none;
+}
+
+.SubdomainNavBar-link:hover {
+  text-decoration: none;
+}
+
+.SubdomainNavBar-link-text {
+  position: relative;
+}
+
+@media screen and (max-width: 767px) {
+  .SubdomainNavBar-link:first-of-type {
+    padding-top: var(--base-size-24);
+  }
+
+  .SubdomainNavBar-link--title {
+    font-weight: var(--base-text-weight-bold);
+  }
+}
+
+@media screen and (min-width: 48rem) {
+  .SubdomainNavBar-link {
+    font-family: var(--brand-heading-fontFamily);
+    font-weight: var(--base-text-weight-semibold);
+    font-size: var(--base-size-16);
+    line-height: var(--base-size-16);
+    padding: var(--base-size-16) var(--base-size-16);
+  }
+
+  .SubdomainNavBar-link-text::after {
+    content: '';
+    position: absolute;
+    bottom: -6px;
+    left: 0;
+    width: 100%;
+    height: 2px;
+    background-color: var(--brand-SubdomainNavBar-border-nav-default);
+    opacity: 0;
+    transition: opacity var(--brand-animation-duration-fast), transform var(--brand-animation-duration-fast);
+    transform: scale(0);
+    transform-origin: center;
+  }
+
+  .SubdomainNavBar-link:hover .SubdomainNavBar-link-text::after,
+  .SubdomainNavBar-link:focus .SubdomainNavBar-link-text::after {
+    opacity: 1;
+    transform: scale(0.75);
+  }
+
+  .SubdomainNavBar-link:active .SubdomainNavBar-link-text::after {
+    background-color: var(--brand-SubdomainNavBar-border-nav-pressed);
+    transform: scale(0.75);
+  }
+
+  .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link {
+    transition: background-color var(--brand-animation-easing-default) 250ms;
+    background-color: var(--brand-SubdomainNavBar-canvas-overflow-default);
+    color: var(--brand-SubdomainNavBar-fg-overflow-default);
+  }
+
+  .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link .SubdomainNavBar-link-text::after {
+    display: none;
+  }
+
+  .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link:hover {
+    background-color: var(--brand-SubdomainNavBar-canvas-overflow-hover);
+  }
+
+  .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link:focus,
+  .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link:focus-visible {
+    box-shadow: inset 0px 0px 0px 2px var(--brand-color-focus);
+    outline: none;
+  }
+}
+
+@media screen and (min-width: 63.25rem) {
+  .SubdomainNavBar-link {
+    padding: var(--base-size-16) var(--base-size-24);
+  }
+}
+
+.SubdomainNavBar-more-link {
+  display: none;
+}
+
+.SubdomainNavBar-more-link[aria-expanded='true']:hover::after,
+.SubdomainNavBar-more-link[aria-expanded='true']:focus::after {
+  display: none;
+}
+
+@media screen and (min-width: 48rem) {
+  .SubdomainNavBar-more-link {
+    cursor: pointer;
+    -webkit-appearance: none;
+       -moz-appearance: none;
+            appearance: none;
+    border: none;
+    background-color: transparent;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--base-size-4);
+  }
+}
+
+.SubdomainNavBar-overflow-menu {
+  position: absolute;
+  right: 0;
+  top: var(--base-size-48);
+  background-color: var(--base-color-scale-white-0);
+  border-radius: var(--brand-borderRadius-large);
+  animation: fade-in-down 0.25s, enlarge-shadow 250ms forwards;
+  animation-timing-function: var(--brand-animation-easing-default);
+  box-shadow: 0px 8px 24px rgba(1, 4, 9, 0.15);
+  overflow: hidden;
+}
+
+.SubdomainNavBar-overflow-menu-list {
+  display: grid;
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+  width: -moz-max-content;
+  width: max-content;
+}
+
+/*
+ * Toolbar actions area for search and mobile menu
+ */
+
+.SubdomainNavBar-secondary-nav {
+  display: flex;
+  align-items: center;
+  margin-left: auto;
+  min-width: 0;
+}
+.SubdomainNavBar-search-trigger {
+  display: flex;
+  align-items: center;
+}
+
+.SubdomainNavBar-search-button,
+.SubdomainNavBar-menu-button {
+  cursor: pointer;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background-color: transparent;
+  border: var(--brand-borderWidth-thick) solid transparent;
+  color: var(--brand-color-text-default);
+  width: calc(48px - var(--brand-borderWidth-thick));
+  height: calc(48px - var(--brand-borderWidth-thick));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: border 250ms var(--brand-animation-easing-default), box-shadow 250ms ease;
+  border-radius: var(--brand-borderRadius-medium);
+  box-shadow: 0 0 0 2px transparent;
+}
+
+.SubdomainNavBar-search-button svg,
+.SubdomainNavBar-menu-button svg {
+  width: 24px;
+  height: 24px;
+}
+
+.SubdomainNavBar-menu-button {
+  display: inline-block;
+  align-self: center;
+}
+
+.SubdomainNavBar-menu-button-bar {
+  width: 22px;
+  height: 2px;
+  background-color: var(--brand-color-text-default);
+  margin: var(--base-size-4) auto;
+  border-radius: var(--brand-borderRadius-large);
+  display: block;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .SubdomainNavBar-menu-button-bar {
+    transition-timing-function: var(--brand-animation-easing-default);
+    transition-duration: 500ms;
+    transition-property: opacity, transform;
+  }
+}
+
+.SubdomainNavBar-menu-button-bar:nth-of-type(1) {
+  transform-origin: bottom right;
+}
+
+.SubdomainNavBar-menu-button-bar:nth-of-type(3) {
+  transform-origin: top right;
+}
+
+.SubdomainNavBar-menu-button--close .SubdomainNavBar-menu-button-bar:nth-of-type(1) {
+  transform: rotate(-45deg) translateY(-3px);
+}
+
+.SubdomainNavBar-menu-button--close .SubdomainNavBar-menu-button-bar:nth-of-type(2) {
+  opacity: 0;
+  transform: scale(0);
+}
+
+.SubdomainNavBar-menu-button--close .SubdomainNavBar-menu-button-bar:nth-of-type(3) {
+  transform: rotate(45deg) translateY(3px);
+}
+
+@media screen and (min-width: 48rem) {
+  .SubdomainNavBar-search-button:hover,
+  .SubdomainNavBar-menu-button:hover {
+    border: var(--brand-borderWidth-thick) solid var(--brand-SubdomainNavBar-border-button-hover);
+  }
+
+  .SubdomainNavBar-search-button:active,
+  .SubdomainNavBar-menu-button:active {
+    box-shadow: 0 0 0 1px var(--brand-SubdomainNavBar-border-button-hover);
+  }
+
+  .SubdomainNavBar-mobile-menu-button {
+    display: none;
+  }
+
+  .SubdomainNavBar-search-dialog-control-area .SubdomainNavBar-search-button,
+  .SubdomainNavBar-search-dialog-control-area .SubdomainNavBar-menu-button {
+    display: inline-flex;
+    width: 48px;
+  }
+
+  .SubdomainNavBar-search-button {
+    margin: 0 var(--base-size-16) 0 auto;
+  }
+}
+
+.SubdomainNavBar-button-area {
+  display: inline-flex;
+  gap: var(--base-size-16);
+  align-items: center;
+  min-width: 0;
+}
+
+.SubdomainNavBar-button-area-inner {
+  display: flex;
+  gap: var(--base-size-8);
+  min-width: 0;
+}
+
+@media screen and (max-width: 48rem) {
+  .SubdomainNavBar-button-area {
+    display: none;
+  }
+
+  .SubdomainNavBar-button-area--visible {
+    display: flex;
+    left: 0;
+    z-index: 99;
+    width: 100%;
+    height: auto;
+    animation-name: fade-in-down-staggered;
+    animation-duration: 500ms;
+    animation-delay: calc(10 * 80ms);
+    animation-fill-mode: both;
+    animation-timing-function: var(--brand-animation-easing-default);
+  }
+
+  .SubdomainNavBar-inner-container--search-open .SubdomainNavBar-button-area--visible {
+    display: none;
+  }
+
+  .SubdomainNavBar-button-area-inner {
+    width: 100%;
+    flex-direction: column;
+    margin: 24px;
+    min-width: 0;
+  }
+}
+
+.SubdomainNavBar-cta-button {
+  white-space: nowrap;
+}
+
+@media screen and (min-width: 1024px) {
+  .SubdomainNavBar-cta-button--secondary {
+    display: inline-flex;
+  }
+}
+
+/*
+ * Search dialog control area
+ */
+.SubdomainNavBar-search-form {
+  display: flex;
+  width: 100%;
+}
+
+.SubdomainNavBar-search-dialog {
+  position: absolute;
+  z-index: 99;
+}
+
+@media screen and (max-width: 767px) {
+  .SubdomainNavBar-search-dialog {
+    top: 0;
+    left: 0;
+    right: 0;
+    background: var(--brand-SubdomainNavBar-canvas-search);
+    -webkit-backdrop-filter: blur(100px);
+    backdrop-filter: blur(100px);
+    height: 100vh;
+    width: 100vw;
+    animation: fade-in-down var(--brand-animation-duration-fast);
+    animation-timing-function: var(--brand-animation-easing-default);
+  }
+}
+
+@media screen and (min-width: 48rem) {
+  .SubdomainNavBar-search-dialog {
+    position: absolute;
+    top: 0;
+    bottom: 1px;
+    width: 100vw;
+    left: 0;
+    right: 0;
+    background-color: var(--brand-SubdomainNavBar-canvas-search);
+  }
+}
+
+.SubdomainNavBar-search-dialog .SubdomainNavBar-search-trigger .SubdomainNavBar-search-button {
+  margin-right: 0;
+}
+
+.SubdomainNavBar-search-dialog-control-area {
+  height: 74px;
+  background: var(--brand-SubdomainNavBar-canvas-default);
+  -webkit-backdrop-filter: blur(16px);
+  backdrop-filter: blur(16px);
+  padding: var(--base-size-12) var(--base-size-28);
+  display: flex;
+  align-items: center;
+  animation: fade-in-down 500ms;
+  gap: var(--base-size-4);
+}
+
+@media screen and (min-width: 48rem) {
+  .SubdomainNavBar-search-dialog-control-area {
+    max-width: 570px;
+    margin: 0 auto;
+  }
+}
+
+.SubdomainNavBar-search-text-input {
+  border-color: transparent;
+}
+
+.SubdomainNavBar-search-results-container {
+  animation: fade-in-down 500ms;
+  padding: var(--base-size-24);
+  background-color: var(--base-color-scale-white-0);
+  border-radius: var(--brand-borderRadius-large);
+  box-shadow: 0px 8px 24px rgba(1, 4, 9, 0.15);
+  max-height: 514px;
+  height: 70vh;
+  max-width: 570px;
+  margin: 0 auto;
+  width: 80%;
+}
+
+.SubdomainNavBar-search-results {
+  overflow-y: scroll;
+  list-style: none;
+  padding: 0 var(--base-size-24) 0 0;
+  margin: 0;
+  height: 90%;
+}
+
+.SubdomainNavBar-search-results-heading {
+  display: block;
+  font-weight: var(--brand-heading-weight-600);
+  font-size: var(--base-size-20);
+  line-height: var(--base-size-24);
+  margin-bottom: var(--base-size-20);
+  padding: 0 var(--base-size-8);
+  color: var(--base-color-scale-black-0);
+}
+
+.SubdomainNavBar-search-result-item {
+  padding: var(--base-size-16) var(--base-size-8);
+  border-bottom: solid var(--brand-borderWidth-thin, 1px)
+    var(--brand-SubdomainNavBar-search-results-border-default, #b7bfc7);
+}
+
+.SubdomainNavBar-search-result-item[aria-selected='true'] a {
+  outline: var(--brand-color-focus) auto var(--brand-borderWidth-thick);
+}
+
+.SubdomainNavBar-search-result-item-container {
+  letter-spacing: var(--brand-heading-letterSpacing-400);
+  font-size: var(--brand-text-size-400);
+}
+
+.SubdomainNavBar-search-result-item-container a {
+  display: block;
+  color: var(--base-color-scale-black-0);
+  text-decoration: none;
+  margin: 0 0 var(--base-size-12);
+  font-size: var(--base-size-16);
+  font-weight: var(--brand-heading-weight-400);
+  font-family: var(--brand-heading-fontFamily);
+  line-height: var(--brand-text-lineHeight-400);
+}
+
+.SubdomainNavBar-search-result-item-container a:hover {
+  text-decoration: none;
+}
+
+.SubdomainNavBar-search-result-item-desc {
+  color: var(--base-color-scale-black-0);
+}
+
+.SubdomainNavBar-skip-to-content {
+  position: fixed;
+  top: 75px;
+  border-radius: 0px;
+  width: 100vw;
+  z-index: 100;
+}
+
+/*
+ * Reusable animations
+ */
+@keyframes fade-in-down {
+  0% {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fade-out {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes enlarge-shadow {
+  0% {
+    scale: 0.98;
+    box-shadow: 0px 8px 0 rgba(1, 4, 9, 0.15);
+  }
+  100% {
+    scale: 1;
+    box-shadow: 0px 8px 24px rgba(1, 4, 9, 0.15);
+  }
+}
+
+@keyframes fade-in-down-staggered {
+  0% {
+    opacity: 0;
+    transform: scale(0.6) translateY(-8px);
+  }
+
+  100% {
+    opacity: 1;
+  }
+}