searchBar.scss 2.34 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

Andrew Hrdy's avatar
Andrew Hrdy committed
22
.search-bar-search-icon, .search-bar-arrow-icon {
23
  display: block;
24
  color: rgba(0, 0, 0, 0.54);
25 26
}

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

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

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

Andrew Hrdy's avatar
Andrew Hrdy committed
43 44 45 46 47
.search-bar-campus-control {
  width: 150px;
  justify-content: center;
}

Andrew Hrdy's avatar
Andrew Hrdy committed
48 49 50 51 52
@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;
53
      border: 1px solid rgba(0, 0, 0, 0.15);
Andrew Hrdy's avatar
Andrew Hrdy committed
54 55 56 57 58 59
    }
  }

  .search-bar-input {
    transition: ease-in-out width 250ms;
  }
60 61 62 63 64 65

  .search-bar-has-value {
    .search-bar-close-btn {
      display: inline-flex !important;
    }
  }
Andrew Hrdy's avatar
Andrew Hrdy committed
66 67 68 69 70 71 72 73 74 75 76 77
}

@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;
    }
  }
78

Mattias J Duffy's avatar
Mattias J Duffy committed
79 80
  .hide-search-input {
    display: none !important;
81
  }
Andrew Hrdy's avatar
Andrew Hrdy committed
82 83 84 85
  .search-bar-input {
    width: 0 !important;
  }

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

90 91 92 93
  .search-bar-close-btn {
    display: none !important;
  }

Andrew Hrdy's avatar
Andrew Hrdy committed
94
  .search-bar-mobile-open {
95 96 97 98 99 100
    &.search-bar-has-value {
      .search-bar-close-btn {
        display: inline-flex !important;
      }
    }

Andrew Hrdy's avatar
Andrew Hrdy committed
101 102 103 104
    .search-bar-input {
      width: 100% !important;
    }

Andrew Hrdy's avatar
Andrew Hrdy committed
105 106 107 108
    .search-bar-campus-control {
      display: inline-flex !important;
    }

Andrew Hrdy's avatar
Andrew Hrdy committed
109 110 111 112 113 114 115 116 117 118 119 120 121 122 123
    .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;
    }
  }
124
}