rb-navbar/nav.css

react-basics nav component

.rbnav {
  align-items: stretch;
  display: flex;
  justify-content: center;
  width: 100%;
}

.rbnav *:focus,
.rbnav *:active {
  outline: none;
}

.rbnav input:focus,
.rbnav input:active {
  box-shadow: 0 0 3pt 2pt rgba(0, 0, 0, 0.2);
}

.rbnav__container {
  align-items: stretch;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
  max-width: 1440px;
  width: 100%;
}

.rbnav__navbar {
  align-items: flex-start;
  display: flex;
  flex-flow: row wrap;
  width: 100%;
}

.rbnav__linkContainer {
  align-items: center;
  box-sizing: border-box;
  color: #ecf0f1;
  display: flex;
  font-family: sans-serif;
  font-size: 1.1rem;
  /* font-weight: bold; */
  padding: 0 1.5rem;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  user-select: none;
}

.rbnav__linkContainer:hover {
  background-color: rgba(0, 0, 0, .1);
}

.rbnav__linkContainer > i {
  font-size: .8rem;
  margin-right: .5rem;
  opacity: 1;
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.rbnav__linkContainer > i:last-child {
  margin-right: 0;
  margin-left: .5rem;
}

.rbnav__linksContainer {
  border-radius: 0 0 .5rem .5rem;
  height: 100%;
  overflow: hidden;
  position: relative;
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.rbnav__linksContainer:hover {
  height: 100%;
}

.rbnav__linksContainer > .rbnav__linkContainer {
  width: 100%;
}

.rbnav__linksContainer:hover > .rbnav__linkContainer > i:last-child {
  opacity: 0;
}

.rbnav__brand {
  align-items: center;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  color: #ecf0f1;
  display: flex;
  font-family: sans-serif;
  font-size: 1.1rem;
  padding: 0 2rem;
  user-select: none;
}

.rbnav__brand > i {
  font-size: .8rem;
  margin-right: .5rem;
}

.rbnav__brandName {
  white-space: nowrap;
}

.rbnav__search {
  align-items: center;
  display: flex;
  justify-content: flex-end;
  padding: 0 1rem;
  position: relative;
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.rbnav__searchBar {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: calc(100vw - 4rem);
  position: relative;
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.rbnav__searchBar > i {
  border-radius: 50%;
  color: #888;
  cursor: text;
  font-size: .8rem;
  left: 0;
  padding: .5rem;
  position: absolute;
}

.rbnav__searchBar > i:last-of-type {
  cursor: pointer;
  left: inherit;
  padding: .5rem;
  right: 0;
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.rbnav__searchBar > i:last-of-type:hover {
  color: #000;
}

.rbnav__searchInput::-webkit-search-cancel-button {
  display: none;
}

.rbnav__searchInput {
  border: none;
  border-radius: 2rem;
  font-family: sans-serif;
  font-size: 1rem;
  line-height: 1rem;
  padding: .3rem 1.5rem .3rem 1.7rem;
  transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
  width: 100%;
}

.rbnav__search--medium {
  width: 7.25rem;
}

.rbnav__search--medium > .rbnav__searchBar {
  position: absolute;
}

.rbnav__search--medium > .rbnav__searchBar > i:last-of-type {
  overflow: hidden;
  padding: .5rem 0;
  width: 0;
}

.rbnav__search--medium > .rbnav__searchBar > .rbnav__searchInput {
  padding: .3rem .5rem .3rem 1.7rem;
}

.rbnav__search--small {
  width: 2.25rem;
}

.rbnav__search--small > .rbnav__searchBar {
  position: absolute;
  width: 1.75rem;
}

.rbnav__search--small > .rbnav__searchBar > i:last-of-type {
  overflow: hidden;
  padding: .5rem 0;
  width: 0;
}

.rbnav__search--small > .rbnav__searchBar > .rbnav__searchInput {
  padding: .3rem .1rem .3rem 1.7rem;
}

.rbnav__userbox {
  align-items: stretch;
  display: flex;
  justify-content: stretch;
  position: relative;
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.rbnav__userbox:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.rbnav__userbox:hover > .rbnav__userboxBox {
  height: inherit;
  opacity: .8;
  padding: 1rem 2rem;
}

.rbnav__userboxText {
  align-items: center;
  color: #ecf0f1;
  cursor: default;
  display: flex;
  font-family: sans-serif;
  font-size: 1.1rem;
  padding: 0 1rem;
  user-select: none;
  white-space: nowrap;
}

.rbnav__userboxText > i {
  font-size: .8rem;
  padding-right: .5rem;
}

.rbnav__userboxBox {
  align-items: flex-start;
  border-radius: 0 0 .5rem .5rem;
  display: flex;
  height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  right: 0;
  top: 100%;
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}