vue-search-input/playground/css/app.css

A Vue.js 3 search input component, inspired by the global search input of Storybook and GitHub.

@import 'tailwindcss';

html {
  font-family: Avenir, Helvetica, Arial, sans-serif;
}

:root {
  --white: #ffffff;
  --primary-color: #1ea7fd;
  --input-icon-color: #83add6;
}

a {
  color: var(--primary-color);
}

.font-monospace {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

.btn {
  display: inline-block;
  padding: 0rem 0.75rem;
  border-radius: 0.25rem;
  cursor: pointer;
  font-size: 1rem;
  background-color: var(--primary-color);
  color: var(--white);
}

.btn:hover {
  background-color: #40b4fd;
}

.btn-primary {
  color: var(--white);
  &:hover {
    color: var(--white);
  }
  &:focus {
    color: var(--white);
  }
}

.w270 {
  width: 270px;
  transition: width 0.35s;
}

.w350 {
  width: 350px;
  transition: width 0.35s;
}

.search-input-wrapper {
  &.no-search-icon {
    [data-search-input='true'] {
      padding-left: 12px;
    }
  }

  &.gmail {
    input[data-search-input='true'] {
      padding-right: 56px;
    }
    .search-icon {
      &.clear {
        right: 32px;
      }
    }
    .settings {
      position: absolute;
      bottom: 7px;
      right: 6px;
      background: none;
      border: none;
      cursor: pointer;
      outline: none;
      padding: 0px;
      line-height: 0;
      color: var(--input-icon-color);
      fill: var(--input-icon-color);
    }
  }

  &.youtube {
    display: flex;
    flex-wrap: wrap;
    input[data-search-input='true'] {
      flex: 1 1 auto;
      width: 1%;
    }
    .search-icon {
      &.clear {
        right: 50px;
      }
    }
    .btn-search {
      fill: var(--white);
    }
  }
}