|
1 | 1 | <template>
|
2 | 2 | <div
|
3 |
| - class="onboarding-selectWrapperRow" |
| 3 | + class="requirementDropdown-selectWrapperRow" |
4 | 4 | :style="{ borderColor: boxBorder }"
|
5 | 5 | v-click-outside="closeDropdownIfOpen"
|
6 | 6 | >
|
7 |
| - <div class="onboarding-select onboarding-input" data-cyId="onboarding-dropdown"> |
| 7 | + <div class="requirementDropdown-select requirementDropdown-input"> |
8 | 8 | <div
|
9 |
| - class="onboarding-dropdown-placeholder college-major-minor-wrapper" |
| 9 | + class="requirementDropdown-dropdown-placeholder requirement-wrapper" |
10 | 10 | @click="showHideDropdown()"
|
11 | 11 | >
|
12 | 12 | <input
|
13 | 13 | type="text"
|
14 |
| - class="onboarding-dropdown-placeholder college-major-minor-placeholder" |
| 14 | + class="requirementDropdown-dropdown-placeholder requirement-placeholder" |
15 | 15 | :style="{ color: placeholderColor, border: 'none', outline: 'none' }"
|
16 | 16 | :placeholder="prevQuery || 'Select Requirement'"
|
17 | 17 | v-model="curQuery"
|
|
20 | 20 | @keyup="onKeyUp"
|
21 | 21 | />
|
22 | 22 | <div
|
23 |
| - class="onboarding-dropdown-placeholder college-major-minor-arrow" |
| 23 | + class="requirementDropdown-dropdown-placeholder requirement-arrow" |
24 | 24 | :style="{ borderTopColor: arrowColor }"
|
25 | 25 | ></div>
|
26 | 26 | </div>
|
27 |
| - <div class="onboarding-dropdown-content" v-if="shown"> |
| 27 | + <div class="requirementDropdown-dropdown-content" v-if="shown"> |
28 | 28 | <div
|
29 | 29 | v-for="[key, fullName] in foundChoices"
|
30 | 30 | :key="key"
|
31 |
| - class="onboarding-dropdown-content-item" |
| 31 | + class="requirementDropdown-dropdown-content-item" |
32 | 32 | :ref="`scroll-ref-${key}`"
|
33 | 33 | @click="onSelect([key, fullName])"
|
34 | 34 | >
|
@@ -155,6 +155,168 @@ export default defineComponent({
|
155 | 155 | });
|
156 | 156 | </script>
|
157 | 157 |
|
| 158 | +// a lot of this styling is copied from Onboarding.scss |
| 159 | + |
158 | 160 | <style scoped lang="scss">
|
159 |
| -@import '@/components/Modals/Onboarding/Onboarding.scss'; |
| 161 | +@import '@/assets/scss/_variables.scss'; |
| 162 | +
|
| 163 | +.requirementDropdown { |
| 164 | + padding: 1rem; |
| 165 | + width: 100%; |
| 166 | +
|
| 167 | + &-selectWrapperRow { |
| 168 | + margin-top: 4px; |
| 169 | + display: flex; |
| 170 | + flex-direction: row; |
| 171 | + justify-content: space-between; |
| 172 | + width: 100%; |
| 173 | + } |
| 174 | +
|
| 175 | + &-select { |
| 176 | + background: $white; |
| 177 | + border: 1px solid $inactiveGray; |
| 178 | +
|
| 179 | + box-sizing: border-box; |
| 180 | + border-radius: 1px; |
| 181 | + width: 100%; |
| 182 | + font-size: 14px; |
| 183 | + line-height: 17px; |
| 184 | + padding-left: 0; |
| 185 | +
|
| 186 | + color: $darkPlaceholderGray; |
| 187 | + position: relative; |
| 188 | +
|
| 189 | + &--disabled { |
| 190 | + opacity: 0.3; |
| 191 | + pointer-events: none; |
| 192 | + } |
| 193 | +
|
| 194 | + &--column { |
| 195 | + display: flex; |
| 196 | + flex-direction: column; |
| 197 | + margin-right: 4px; |
| 198 | + margin-left: 32px; |
| 199 | + } |
| 200 | + &--columnCenter { |
| 201 | + display: flex; |
| 202 | + flex-direction: column; |
| 203 | + align-items: center; |
| 204 | + } |
| 205 | + &--column-remove { |
| 206 | + display: flex; |
| 207 | + flex-direction: column-reverse; |
| 208 | + justify-content: center; |
| 209 | + } |
| 210 | + &--column-removeExam { |
| 211 | + display: flex; |
| 212 | + flex-direction: column-reverse; |
| 213 | + } |
| 214 | + &--columnWide { |
| 215 | + display: flex; |
| 216 | + flex-direction: column; |
| 217 | + width: 380px; |
| 218 | + } |
| 219 | + &--columnFill { |
| 220 | + display: flex; |
| 221 | + flex-direction: column; |
| 222 | + width: 100%; |
| 223 | + } |
| 224 | + } |
| 225 | +
|
| 226 | + &-input { |
| 227 | + font-size: 14px; |
| 228 | + line-height: 17px; |
| 229 | + color: $lightPlaceholderGray; |
| 230 | + width: 100%; |
| 231 | + height: auto; |
| 232 | + min-height: 1.75rem; |
| 233 | + padding: 5px 8px; |
| 234 | + background-color: $white; |
| 235 | + border: 0.5px solid $inactiveGray; |
| 236 | + box-sizing: border-box; |
| 237 | + border-radius: 2px; |
| 238 | + } |
| 239 | +
|
| 240 | + &-dropdown { |
| 241 | + &-placeholder { |
| 242 | + height: 100%; |
| 243 | + font-size: 14px; |
| 244 | + line-height: 17px; |
| 245 | + margin-left: 0.25rem; |
| 246 | + display: flex; |
| 247 | + align-items: center; |
| 248 | +
|
| 249 | + color: $darkPlaceholderGray; |
| 250 | +
|
| 251 | + background: transparent; |
| 252 | +
|
| 253 | + &.requirement-wrapper { |
| 254 | + width: 100%; |
| 255 | + height: 100%; |
| 256 | + } |
| 257 | +
|
| 258 | + &.requirement-placeholder { |
| 259 | + width: 100%; |
| 260 | + } |
| 261 | +
|
| 262 | + &.requirement-arrow { |
| 263 | + border-left: 6.24px solid transparent; |
| 264 | + border-right: 6.24px solid transparent; |
| 265 | +
|
| 266 | + border-top: 6.24px solid $inactiveGray; |
| 267 | + background: transparent; |
| 268 | +
|
| 269 | + //when clicked border-top-color: #32A0F2; |
| 270 | +
|
| 271 | + height: auto; |
| 272 | + margin-right: 8.7px; |
| 273 | + margin-left: 5px; |
| 274 | + } |
| 275 | +
|
| 276 | + &.college-test-credits-arrow { |
| 277 | + border-left: 6.24px solid transparent; |
| 278 | + border-right: 6.24px solid transparent; |
| 279 | +
|
| 280 | + border-top: 6.24px solid $inactiveGray; |
| 281 | + background: transparent; |
| 282 | +
|
| 283 | + //when clicked border-top-color: #32A0F2; |
| 284 | + height: auto; |
| 285 | + margin-right: 6px; |
| 286 | + margin-left: 15px; |
| 287 | + } |
| 288 | + } |
| 289 | + } |
| 290 | +
|
| 291 | + &-dropdown-content { |
| 292 | + z-index: 2; |
| 293 | + position: absolute; |
| 294 | + width: inherit; |
| 295 | + background: $white; |
| 296 | + box-shadow: -4px 4px 10px rgba(0, 0, 0, 0.25); |
| 297 | + border-radius: 7px; |
| 298 | + max-height: 150px; |
| 299 | + overflow: auto; |
| 300 | + left: 0px; |
| 301 | +
|
| 302 | + margin-top: 6px; |
| 303 | +
|
| 304 | + &-item { |
| 305 | + height: 2.25rem; |
| 306 | + font-size: 14px; |
| 307 | + line-height: 17px; |
| 308 | + display: flex; |
| 309 | + align-items: center; |
| 310 | +
|
| 311 | + color: $lightPlaceholderGray; |
| 312 | +
|
| 313 | + padding-left: 8px; |
| 314 | + } |
| 315 | + } |
| 316 | +
|
| 317 | + &-dropdown-content div:hover { |
| 318 | + background: rgba(50, 160, 242, 0.15); |
| 319 | + width: 100%; |
| 320 | + } |
| 321 | +} |
160 | 322 | </style>
|
0 commit comments