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
}