flylocal-web/assets/css/main.css

:root {
  --m-s: 0.1s;
  --h-s: 0.3s;
  --d: calc(var(--h-s) - var(--m-s));
}

html,
body,
#__nuxt,
#__layout,
.page-container,
main {
  height: 100%;
}

html {
  font-size: min(3vmin, 18px);
}

header {
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: 403;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 1rem 1rem 0.75rem 1rem;
  pointer-events: none;
}

.white-bkg header {
  background-color: white;
}

header button {
  pointer-events: all;
}

.header__col:nth-child(2) {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.header__col:nth-child(3) {
  text-align: right;
}

main {
  display: flex;
  flex-direction: column;
}

.nav {
  flex: 0 0 auto;
  background: white;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
  flex-wrap: wrap;
  overflow: hidden;
}

.nav--hide {
  transition: padding-top var(--m-s) linear var(--h-s), max-height var(--h-s) linear 0s;
  padding-top: 0;
  max-height: 0;
  overflow: hidden;
}

.nav--show {
  padding-top: 3.5rem;
  max-height: 18rem;
  transition: padding-top var(--m-s) linear 0s, max-height var(--h-s) linear var(--m-s);
  overflow: visible;
}

.btn {
  border-radius: 999px;
  padding: 0.5em 0.8em;
  font-size: min(1rem, 18px);
  white-space: nowrap;
  transition: 0.2s all;
  display: flex;
  align-items: center;
  /* justify-content: space-around; what was this for? */
  justify-content: center;
  gap: 0.25rem;
  line-height: 1;
  min-height: 1em;
}

.btn svg {
  height: min(1rem, 18px);
  display: inline-block;
  aspect-ratio: 1;
  transition: 0.2s all;
}

.btn.btn--primary {
  background: #007fff;
  color: #fff;
}

.btn.btn--primary:hover {
  background: #00ca00;
  color: #fff;
}

.btn.btn--primary:hover svg {
  stroke: #ffffff;
}

.btn.btn--cancel {
  background: red;
  color: #fff;
}

.btn.btn--cancel:hover {
  background: rgb(255, 83, 83);
  color: #fff;
}

.btn.btn--secondary {
  background: #ccc;
  color: #000;
}

.btn.btn--secondary:hover {
  background: rgb(151, 151, 151);
  color: #000;
}

.btn--nav-open {
  padding: 1rem;
  display: block;
}

.flyout-container {
  z-index: 1001;
  position: fixed;
  bottom: 0;
  display: flex;
  justify-content: center;
  width: 100vw;
  transition: all 0.3s;
  pointer-events: none;
}

.flyout-container.flyout-container--hide {
  transform: translateY(200px);
}

.flyout-container.flyout-container--show {
  transform: translateY(0);
}

.flyout .v-select {
  font-size: 1.5rem;
}

.flyout .vs__dropdown-menu {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.flyout .vs__dropdown-menu li {
  border-radius: 999px;
  transition: 0.3 all;
}

.flyout .vs__dropdown-menu li:hover {
  border-radius: 999px;
  background-color: #007fff;
}

.flyout .vs__dropdown-toggle {
  background: #eee;
  border-radius: 1.2rem 1.2rem 1.2rem 1.2rem;
  padding: 0;
}

.flyout .vs--open .vs__dropdown-toggle {
  background: #eee;
  border-radius: 1.2rem 1.2rem 0 0;
}