dotfiles

My PC Dotfiles & Website
git clone https://github.com/maydayv7/dotfiles

_search.scss (1775B)

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
@import "variables";

.search {
  &-container {
    display: inline-block;
    align-self: flex-end;
    position: relative;
    top: -32px;
    transition: all 0.5s ease-out;
    width: 160px;
    margin-bottom: -20px;

    input {
      width: 100%;
      transition: background-color 0.2s ease-in;

      &:hover {
        background-color: var(--accent-alpha-20);
      }
    }

    @media (max-width: $tablet-max-width) {
      align-self: flex-end;
      width: 300px;
    }

    @media (max-width: $phone-max-width) {
      left: 0 !important;
      margin-bottom: 20px;
      top: 20px;
      width: 100%;
    }
  }

  &-results {
    background-color: var(--accent-alpha-20);
    backdrop-filter: blur(10px);
    border-style: inset;
    color: var(--accent-secondary);
    display: none;
    z-index: 1;
    max-height: 500px;
    overflow: auto;
    padding: 1rem;
    position: absolute;
    right: 0;
    width: 300%;

    @media (max-width: $tablet-max-width) {
      left: 0;
      width: 300px;
    }

    @media (max-width: $phone-max-width) {
      width: 100%;
    }

    &__number {
      font-size: small;
      text-align: end;
      margin: 0 0 1rem;
    }

    &__item {
      margin-bottom: 1rem;

      .title {
        margin-top: -3px;
        margin-bottom: -3px;
      }

      a {
        display: inline-block;
        font-size: $font-size;
        margin-bottom: 0.5rem;
      }

      b {
        color: var(--accent);
      }
    }

    &__items {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    li {
      border-bottom: 1px solid var(--color);
      font-size: 0.9rem;
      margin-top: 1rem;

      &:first-of-type {
        margin-top: 0;
      }

      &:last-of-type {
        border: none;
      }
    }
  }
}