_search.scss 3.34 KB
Newer Older
1 2 3 4
.search-backdrop {
  position: fixed;
  right: 0;
  left: 0;
5
  bottom: 0;
6 7 8 9 10 11
  top: $navbarHeight;
  z-index: $zindex-modal-backdrop;
  background-color: $black;
  @include opacity(70);
}

12
.search-container {
13
  left: $side-menu-width;
14 15
  top: 0;
  right: 0;
16
  bottom: 0;
17
  z-index: ($zindex-modal-backdrop + 10);
18
  position: fixed;
19 20 21 22
}

// Search
.search-field-wrapper {
23 24
  width: 100%;
  display: flex;
25 26 27
  background-color: $navbarBackground;
  box-shadow: $navbarShadow;
  position: relative;
28

29
  input {
30 31 32 33 34
    max-width: 653px;
    //padding: 0.5rem 1.5rem 0.5rem 0;
    padding: 1rem 1rem 0.75rem 1rem;
    height: 51px;
    line-height: 51px;
35
    box-sizing: border-box;
36 37 38 39
    outline: none;
    background: $side-menu-bg;
    background-color: $navbarButtonBackground;
    flex-grow: 10;
40
  }
41 42 43 44 45
}

.search-field-spacer {
  flex-grow: 1;
}
46

47 48 49 50 51 52 53 54
.search-switches {
  flex-grow: 1;
  padding: 1rem 1rem 0.75rem 1rem;
  white-space: nowrap;
}

.search-field-icon {
  font-size: $font-size-lg;
55
  padding: 1rem 1rem 0.75rem 1.5rem;
56 57 58 59
}

.search-dropdown {
  display: flex;
60
  flex-direction: column;
61
  max-width: 800px;
62
  background: $page-bg;
63
  height: calc(100% - #{$navbarHeight});
64 65 66
}

.search-results-container {
67
  height: 100%;
68
  display: block;
69
  padding: $spacer;
70
  position: relative;
71
  flex-grow: 10;
72
  margin-bottom: 1rem;
73

74 75 76 77 78 79
  .label-tag {
    margin-left: 6px;
    font-size: 11px;
    padding: 2px 6px;
  }

80 81 82 83 84 85
  .selected {
    .search-result-tag {
      opacity: 0.70;
      color: white;
    }
  }
86
}
87

88 89 90 91 92 93 94
.search-section {
  background: $panel-bg;
  border: $panel-border;
  padding: $panel-padding;
  margin-bottom: 8px;
}

95 96
.search-section__header {
  font-size: $font-size-h6;
97
  padding: 8px 0 2px 0;
98 99
  color: $text-color-weak;
  display: flex;
100
  flex-grow: 1;
101

102 103 104 105 106
  &:hover {
    color: $text-color-weak;
    .search-section__header__toggle {
      background: $tight-form-func-bg;
      color: $link-hover-color;
107 108
    }
  }
109
}
110

111 112 113 114
.search-section__header__with-checkbox {
  display: flex;
}

115
.search-section__header__icon {
116
  padding: 5px 10px;
117 118 119 120 121 122 123 124 125 126
}

.search-section__header__toggle {
  padding: 5px;
}

.search-section__header__text {
  flex-grow: 1;
}

127 128
.search-item__with-checkbox {
  display: flex;
129 130 131 132

  .search-item {
    margin: 1px 3px;
  }
133 134
}

135
.search-item {
136 137 138
  @include list-item();
  @include left-brand-border();

139
  display: flex;
140
  flex-grow: 1;
Torkel Ödegaard committed
141
  height: 37px;
142
  white-space: nowrap;
143
  padding: 0px;
144

145
  &:hover {
146
    @include left-brand-border-gradient();
147 148
  }

149
  &.selected {
150
    background: $list-item-hover-bg;
151
  }
152
}
153

Torkel Ödegaard committed
154
.search-item__body {
155 156
  flex: 1 1 auto;
  overflow: hidden;
Torkel Ödegaard committed
157 158 159 160 161 162 163
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 10px;
}

.search-item__body-title {
164
  color: $list-item-link-color;
Torkel Ödegaard committed
165 166 167 168 169 170
}

.search-item__body-sub-title {
  color: $text-muted;
  font-size: $font-size-sm;
  line-height: 9pt;
171 172 173 174 175 176
}

.search-item__icon {
  padding: 5px;
  flex: 0 0 auto;
  font-size: 19px;
Torkel Ödegaard committed
177
  padding: 5px 2px 5px 10px;
178 179 180
}

.search-item__tags {
181
  padding: 10px;
182 183
}

184
.search-item__actions {
Torkel Ödegaard committed
185
  flex: 0 0 auto;
186
  padding: 0 10px 0 0;
Torkel Ödegaard committed
187 188 189
}

.search-item__actions__item {
190 191 192 193 194 195 196 197
  display: inline-block;
  opacity: 0;
  width: 0;
  transition: all 0.2s ease-in-out;
  .fa-star, .fa-star-o {
    color: $orange;
    line-height: 37px;
  }
Torkel Ödegaard committed
198 199 200 201
}

.search-item:hover {
  .search-item__actions__item {
202 203
    width: 15px;
    opacity: 1;
Torkel Ödegaard committed
204
  }
205
}
206

207 208 209
.search-button-row {
  text-align: center;
  padding: $spacer*2 $spacer;
210
  background: $panel-bg;
211
}