ember-slimguide/addon/styles/components/es-header.css

A test for bottled-ember

.es-header {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-gray-900);
  padding: 0 var(--grid-margin);
}

.es-header a:link,
.es-header a:visited {
  background-image: none;
}

.es-header ul,
.es-header li {
  list-style: none;
}

.es-navbar {
  background-color: var(--color-gray-900);
  color: var(--color-gray-100);
  display: flex;
  flex-direction: column;
  font-size: inherit;
  max-width: var(--container-width);
  width: 100%;
  padding: 0.5rem 0;
}

.navbar-brand-wrapper {
  display: block;
  height: 2.5rem;
  margin: auto auto auto 0;
  border-radius: var(--radius-lg);
}

.navbar-brand {
  display: block;
  height: 100%;
  width: auto;
}

.navbar-list {
  display: none;
  margin: 0.5rem -0.5rem 0;
  padding: 0;
  font-weight: var(--font-weight-3);
  list-style: none;
}

.navbar-list > li > * {
  display: block;
  text-align: left;
  font-size: var(--font-size-base);
  font-weight: inherit;
  border-radius: var(--radius-lg);
  box-sizing: border-box;
  line-height: var(--line-height-base);
  color: var(--color-white);
}

.navbar-toggler {
  display: block;
  width: 3rem;
  height: 2rem;
  margin: -2.25rem -0.5rem 0.25rem auto;
  padding: 0;
  border: 0;
  background: transparent
    url("data:image/svg+xml,%3Csvg height='24' width='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 18a1 1 0 0 1 0 2H1a1 1 0 0 1 0-2zm0-7a1 1 0 0 1 0 2H1a1 1 0 0 1 0-2zm0-7a1 1 0 0 1 0 2H1a1 1 0 1 1 0-2z' fill='%23fff' fill-rule='evenodd'/%3E%3C/svg%3E")
    center no-repeat;
  overflow: hidden;
  text-indent: -999rem;
  border-radius: var(--radius-lg);
}

.navbar-expanded .navbar-list,
.navbar-expanded .navbar-end {
  display: block;
}

.navbar-list-item {
  position: relative;
}

.navbar-list-item-link,
.navbar-list-item-dropdown-toggle,
.navbar-dropdown-list-item-link {
  width: 100%;
  padding: 0.5rem 1rem;
  box-sizing: border-box;
}

.navbar-list-item-link,
.navbar-list-item-link:link,
.navbar-list-item-link:visited {
  display: block;
  color: inherit;
  text-decoration: none;
  width: unset;
}

.navbar-list-item-link:hover {
  color: var(--color-brand-hc-light);
}

.navbar-list-item-dropdown-toggle {
  border: 0;
  display: block;
  padding-right: 2rem;
  text-decoration: none;
  white-space: nowrap;
  background: transparent
    url("data:image/svg+xml,%3Csvg width='8' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M.295 3.707C-.335 3.077.11 2 1.002 2h5.996c.891 0 1.337 1.077.707 1.707l-2.998 3a1 1 0 0 1-1.414 0l-2.998-3z' fill='%23A3A6AF' fill-rule='nonzero'/%3E%3C/svg%3E")
    right 1.25rem center no-repeat;
}

.navbar-list-item-dropdown-toggle:focus,
.navbar-list-item-dropdown-toggle:hover {
  background-image: url("data:image/svg+xml,%3Csvg width='8' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M.295 3.707C-.335 3.077.11 2 1.002 2h5.996c.891 0 1.337 1.077.707 1.707l-2.998 3a1 1 0 0 1-1.414 0l-2.998-3z' fill='%23FFF' fill-rule='nonzero'/%3E%3C/svg%3E");
}

.navbar-list-item-dropdown-toggle[aria-expanded="true"] {
  color: var(--color-brand-hc-light);
  background-image: url("data:image/svg+xml,%3Csvg width='8' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M.295 4.293C-.335 4.923.11 6 1.002 6h5.996c.891 0 1.337-1.077.707-1.707l-2.998-3a1 1 0 0 0-1.414 0l-2.998 3z' fill='%23E04E39' fill-rule='nonzero'/%3E%3C/svg%3E");
}

.navbar-dropdown-list {
  margin: 0;
  padding: 0;
  background: var(--color-gray-100);
  border-radius: var(--radius);
}

.navbar-dropdown-list :first-child :first-child {
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}

.navbar-dropdown-list :last-child :last-child {
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}

.separator {
  margin: 0;
  height: 0;
  list-style: none;
  border-bottom: 2px solid var(--color-gray-300);
}

.navbar-dropdown-list-item {
  display: block;
  white-space: nowrap;
}

.navbar-dropdown-list-item-link,
.navbar-dropdown-list-item-link:link,
.navbar-dropdown-list-item-link:visited {
  color: var(--color-brand);
  display: block;
  text-decoration: none;
}

.navbar-dropdown-list-item-link:hover,
.navbar-dropdown-list-item-link:focus {
  position: relative;
  background: var(--color-gray-300);
  color: var(--color-brand);
  z-index: 1;
}

.navbar-end {
  display: none;
}

@media (min-width: 1008px) {
  .es-navbar {
    display: flex;
    flex-direction: row;
    padding: 0;
  }

  .navbar-brand-wrapper {
    height: 2.8125rem;
    margin-right: var(--spacing-4);
  }

  .navbar-list,
  .navbar-expanded .navbar-list {
    display: flex;
    margin-top: 0;
  }

  .navbar-toggler {
    display: none;
  }

  .navbar-list-item {
    padding: var(--spacing-3) var(--spacing-3) var(--spacing-3) 0;
  }

  .navbar-list-item-link,
  .navbar-list-item-dropdown-toggle {
    padding: 0.3125rem 0 0.25rem;
  }

  .navbar-list-item-link {
    margin-right: -0.5rem;
    margin-left: -0.5rem;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }

  .navbar-list-item-dropdown-toggle {
    width: auto;
    margin-left: -0.5rem;
    padding-right: 1rem;
    padding-left: 0.5rem;
    background-position: right 1px center;
  }

  .navbar-dropdown-list {
    box-shadow: 0 0 1px 0 rgba(73, 79, 95, 0.6),
      0 2px 10px -5px rgba(73, 79, 95, 0.55),
      0 3px 30px -15px rgba(73, 79, 95, 0.8),
      0 0 50px -5px rgba(73, 79, 95, 0.5);
    width: auto;
    min-width: 12rem;
    margin: 0;
    position: absolute;
    left: -0.5rem;
    z-index: 100;
  }

  .navbar-end {
    display: block;
    align-self: center;
  }
}