searchBar.scss 2.19 KB
Newer Older
Andrew Hrdy's avatar
Andrew Hrdy committed
1 2
@import '../_variables.scss';

3
.search-bar-paper-background {
Andrew Hrdy's avatar
Andrew Hrdy committed
4 5
  height: 44px;
  width: 400px;
6
  display: flex;
Andrew Hrdy's avatar
Andrew Hrdy committed
7 8 9
  border-radius: 4px !important;
  background-color: rgba(0, 0, 0, 0.04) !important;
  box-shadow: none !important;
Andrew Hrdy's avatar
Andrew Hrdy committed
10
}
Andrew Hrdy's avatar
Andrew Hrdy committed
11

Andrew Hrdy's avatar
Andrew Hrdy committed
12 13 14 15
.search-bar-search-btn {
  width: 44px !important;
  height: 44px !important;
  cursor: default !important;
16 17
}

Andrew Hrdy's avatar
Andrew Hrdy committed
18 19
.search-bar-back-btn {
  display: none !important;
20
}
Mattias J Duffy's avatar
Mattias J Duffy committed
21 22 23
.hide-search-input {
    display: none !important;
}
Andrew Hrdy's avatar
Andrew Hrdy committed
24
.search-bar-search-icon, .search-bar-arrow-icon {
25
  display: block;
26
  color: rgba(0, 0, 0, 0.54);
27 28
}

Andrew Hrdy's avatar
Andrew Hrdy committed
29 30 31 32
.search-bar-arrow-icon {
  display: none !important;
}

Andrew Hrdy's avatar
Andrew Hrdy committed
33
.search-bar-input {
Mattias J Duffy's avatar
Mattias J Duffy committed
34
  display: flex;
35
  align-items: center !important;
Andrew Hrdy's avatar
Andrew Hrdy committed
36
  width: 100%
Andrew Hrdy's avatar
Andrew Hrdy committed
37 38 39 40 41 42 43 44
}

.search-bar-close-btn {
  width: 44px !important;
  height: 44px !important;
  display: none !important;
}

Andrew Hrdy's avatar
Andrew Hrdy committed
45
.search-bar-campus-control {
Mattias J Duffy's avatar
Mattias J Duffy committed
46
//   margin-right: 8px !important;
Andrew Hrdy's avatar
Andrew Hrdy committed
47 48 49 50
  width: 150px;
  justify-content: center;
}

Andrew Hrdy's avatar
Andrew Hrdy committed
51 52 53 54
.search-bar-has-value {
  .search-bar-close-btn {
    display: inline-flex !important;
  }
Andrew Hrdy's avatar
Andrew Hrdy committed
55 56 57 58 59 60 61
}

@media screen and (min-width: map-get($breakpoints, lg)) {
  .search-bar-paper-background {
    &.search-bar-focus {
      background-color: rgba(255, 255, 255, 1) !important;
      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.24) !important;
62
      border: 1px solid rgba(0, 0, 0, 0.15);
Andrew Hrdy's avatar
Andrew Hrdy committed
63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85
    }
  }

  .search-bar-input {
    transition: ease-in-out width 250ms;
  }
}

@media screen and (max-width: map-get($breakpoints, lg) - 1px) {
  .search-bar-paper-background {
    background-color: rgba(255, 255, 255, 1) !important;
    width: auto !important;

    &.search-bar-mobile-open {
      height: 100% !important;
      width: 100% !important;
    }
  }

  .search-bar-input {
    width: 0 !important;
  }

Andrew Hrdy's avatar
Andrew Hrdy committed
86 87 88 89
  .search-bar-campus-control {
    display: none !important;
  }

Andrew Hrdy's avatar
Andrew Hrdy committed
90 91 92 93 94
  .search-bar-mobile-open {
    .search-bar-input {
      width: 100% !important;
    }

Andrew Hrdy's avatar
Andrew Hrdy committed
95 96 97 98
    .search-bar-campus-control {
      display: inline-flex !important;
    }

Andrew Hrdy's avatar
Andrew Hrdy committed
99 100 101 102 103 104 105 106 107 108 109 110 111 112 113
    .search-bar-search-btn {
      display: none !important;
    }

    .search-bar-back-btn {
      display: inline-flex !important;
      width: 56px !important;
      height: 56px !important;
    }

    .search-bar-close-btn {
      width: 56px !important;
      height: 56px !important;
    }
  }
114
}