Skip to content

Commit fd673e0

Browse files
author
andxu282
committed
clean up styling
1 parent 8a93ed5 commit fd673e0

File tree

1 file changed

+170
-8
lines changed

1 file changed

+170
-8
lines changed

src/components/ScheduleGenerate/AllRequirementsDropdown.vue

+170-8
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
<template>
22
<div
3-
class="onboarding-selectWrapperRow"
3+
class="requirementDropdown-selectWrapperRow"
44
:style="{ borderColor: boxBorder }"
55
v-click-outside="closeDropdownIfOpen"
66
>
7-
<div class="onboarding-select onboarding-input" data-cyId="onboarding-dropdown">
7+
<div class="requirementDropdown-select requirementDropdown-input">
88
<div
9-
class="onboarding-dropdown-placeholder college-major-minor-wrapper"
9+
class="requirementDropdown-dropdown-placeholder requirement-wrapper"
1010
@click="showHideDropdown()"
1111
>
1212
<input
1313
type="text"
14-
class="onboarding-dropdown-placeholder college-major-minor-placeholder"
14+
class="requirementDropdown-dropdown-placeholder requirement-placeholder"
1515
:style="{ color: placeholderColor, border: 'none', outline: 'none' }"
1616
:placeholder="prevQuery || 'Select Requirement'"
1717
v-model="curQuery"
@@ -20,15 +20,15 @@
2020
@keyup="onKeyUp"
2121
/>
2222
<div
23-
class="onboarding-dropdown-placeholder college-major-minor-arrow"
23+
class="requirementDropdown-dropdown-placeholder requirement-arrow"
2424
:style="{ borderTopColor: arrowColor }"
2525
></div>
2626
</div>
27-
<div class="onboarding-dropdown-content" v-if="shown">
27+
<div class="requirementDropdown-dropdown-content" v-if="shown">
2828
<div
2929
v-for="[key, fullName] in foundChoices"
3030
:key="key"
31-
class="onboarding-dropdown-content-item"
31+
class="requirementDropdown-dropdown-content-item"
3232
:ref="`scroll-ref-${key}`"
3333
@click="onSelect([key, fullName])"
3434
>
@@ -155,6 +155,168 @@ export default defineComponent({
155155
});
156156
</script>
157157

158+
// a lot of this styling is copied from Onboarding.scss
159+
158160
<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+
}
160322
</style>

0 commit comments

Comments
 (0)