Skip to content

Commit 43e2e4f

Browse files
egauzensegauzens
committed
Added styles for inputs, popovers, and selects
1 parent 8519f41 commit 43e2e4f

File tree

5 files changed

+244
-6
lines changed

5 files changed

+244
-6
lines changed

‎src/App.vue

Lines changed: 85 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -191,6 +191,37 @@
191191
/>
192192
</el-row>
193193
</el-col>
194+
<el-select v-model="value" placeholder="Select">
195+
<el-option
196+
v-for="item in options"
197+
:key="item.value"
198+
:label="item.label"
199+
:value="item.value">
200+
</el-option>
201+
</el-select>
202+
<div>
203+
<el-popover
204+
title="How do filters work?"
205+
width="190"
206+
trigger="hover"
207+
:append-to-body=false
208+
class="popover"
209+
>
210+
<template v-slot:reference>
211+
<el-button>Hover to show popover</el-button>
212+
</template>
213+
<div>
214+
<strong>Within categories:</strong> OR
215+
<br/>
216+
example: 'heart' OR 'colon'
217+
<br/>
218+
<br/>
219+
<strong>Between categories:</strong> AND
220+
<br/>
221+
example: 'rat' AND 'lung'
222+
</div>
223+
</el-popover>
224+
</div>
194225
</main>
195226
</template>
196227

@@ -577,7 +608,7 @@
577608
label: 'Five',
578609
id: '5',
579610
}]
580-
};
611+
}
581612
const fifteenOptionsDropdownMultiselectCategory = {
582613
label: 'Fifteen Options',
583614
id: '0',
@@ -643,6 +674,50 @@
643674
id: '15'
644675
}]
645676
}
677+
const selectOpts = [
678+
{
679+
label: 'Group 1',
680+
options: [
681+
{
682+
value: 'Option1',
683+
label: 'Option 1'
684+
},
685+
{
686+
value: 'Option2',
687+
label: 'Option 2'
688+
},
689+
]
690+
},
691+
{
692+
label: 'Group 2',
693+
options: [
694+
{
695+
value: 'Option3',
696+
label: 'Option 3'
697+
},
698+
{
699+
value: 'Option4',
700+
label: 'Option 4'
701+
},
702+
]
703+
},
704+
]
705+
const options = [{
706+
value: 'Option1',
707+
label: 'Option1'
708+
}, {
709+
value: 'Option2',
710+
label: 'Option2'
711+
}, {
712+
value: 'Option3',
713+
label: 'Option3'
714+
}, {
715+
value: 'Option4',
716+
label: 'Option4'
717+
}, {
718+
value: 'Option5',
719+
label: 'Option5'
720+
}]
646721
647722
export default {
648723
components: {
@@ -669,8 +744,10 @@
669744
'right-center',
670745
'right-bottom'
671746
])
672-
const radioVal=ref("1");
673-
const radioVal2 = ref(5);
747+
let value = ref('')
748+
let selectVal = ref([])
749+
const radioVal=ref("1")
750+
const radioVal2 = ref(5)
674751
const radios = ref([
675752
{
676753
label: 4,
@@ -704,7 +781,11 @@
704781
tooltipDirs,
705782
radioVal,
706783
radioVal2,
707-
radios
784+
radios,
785+
value,
786+
selectVal,
787+
selectOpts,
788+
options
708789
}
709790
},
710791
methods: {

‎src/assets/components/_el-input.scss

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
@import '../_variables.scss';
2+
3+
.el-input {
4+
&.secondary {
5+
.el-input__inner {
6+
border-color: $lineColor1
7+
}
8+
}
9+
&__inner {
10+
border-color: $lightGrey;
11+
color: $grey;
12+
padding: 0 0.8rem;
13+
&:hover {
14+
border-color: $lightGrey !important;
15+
}
16+
&:focus {
17+
border-color: $app-primary-color !important;
18+
}
19+
&::placeholder {
20+
color: $lightGrey
21+
}
22+
}
23+
&__suffix {
24+
display: flex;
25+
right: 0.625rem;
26+
}
27+
&__suffix-inner {
28+
align-items: center;
29+
display: flex;
30+
}
31+
&.is-disabled {
32+
.el-input__inner {
33+
border-color: $lineColor1;
34+
color: $mediumGrey;
35+
&:hover {
36+
border-color: #dcdfe6 !important;
37+
}
38+
}
39+
}
40+
}
41+
42+
.el-input--small .el-input__inner {
43+
border-radius: 3px;
44+
font-size: 0.875rem;
45+
padding: 0 0.75rem;
46+
}
47+
.el-input--suffix .el-input__inner {
48+
padding-right: 2rem;
49+
}
50+
.el-form-item.is-error {
51+
.el-input__inner,
52+
.el-input__inner:focus,
53+
.el-textarea__inner,
54+
.el-textarea__inner:focus {
55+
border-color: $danger;
56+
}
57+
.el-input__suffix-inner {
58+
color: $danger;
59+
}
60+
}
61+
.el-form-item.is-success {
62+
.el-input__inner,
63+
.el-input__inner:focus,
64+
.el-textarea__inner,
65+
.el-textarea__inner:focus {
66+
border-color: $success;
67+
}
68+
.el-input__suffix-inner {
69+
color: $success;
70+
}
71+
}
72+
73+
.el-input-number__increase,
74+
.el-input-number__decrease,
75+
.el-input-number.is-controls-right .el-input-number__increase,
76+
.el-input-number.is-controls-right .el-input-number__decrease,
77+
.el-input-group__prepend,
78+
.el-input-group__append {
79+
border-color: $lightGrey;
80+
color: $mediumGrey;
81+
}
82+
83+
.text-and-link.el-input--suffix .el-input__inner {
84+
padding-right: 5rem;
85+
}
86+
.el-input__suffix-inner a {
87+
border-left: 1px solid $lightGrey;
88+
color: $grey;
89+
padding-left: 0.625rem;
90+
}
91+
.el-input__icon {
92+
color: $lightGrey;
93+
}

‎src/assets/components/_el-popover.scss

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
@import '../_variables.scss';
2+
3+
.el-popover {
4+
background: $tooltipColor !important;
5+
border: 1px solid $purple !important;
6+
border-radius: 4px;
7+
color: #303133 !important;
8+
font-size: 12px;
9+
line-height: 18px;
10+
a:not(.underline){
11+
text-decoration: underline;
12+
color: #303133;
13+
}
14+
.popper__arrow {
15+
border-top-color: $purple !important;
16+
border-bottom-color: $purple !important;
17+
}
18+
.el-popper__arrow::before{
19+
border: 1px solid $purple !important;
20+
background-color: $tooltipColor !important;
21+
}
22+
p {
23+
margin-bottom: 0;
24+
}
25+
}

‎src/assets/components/_el-select.scss

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
@import '../_variables.scss';
2+
.el-select {
3+
&.secondary {
4+
.el-input {
5+
input {
6+
border-color: $lightGrey;
7+
}
8+
}
9+
}
10+
.el-input {
11+
.el-input__inner {
12+
font-size: 1rem;
13+
}
14+
}
15+
.el-input {
16+
&.is-disabled {
17+
input {
18+
border-color: $mediumGrey;
19+
}
20+
.el-select__caret {
21+
color: $lightGrey;
22+
}
23+
.el-input__inner {
24+
&:hover {
25+
border-color: $mediumGrey !important;
26+
}
27+
}
28+
}
29+
.el-select__caret {
30+
color: $mediumGrey;
31+
}
32+
}
33+
}
34+
35+
.el-select-group__title {
36+
color: $mediumGrey;
37+
font-size: 1rem;
38+
font-weight: bold;
39+
}

‎src/assets/styles.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,9 @@ $--font-path: '~element-plus/lib/theme-chalk/fonts';
1717
@import './components/_el-table';
1818
@import './components/_el-dialog';
1919

20-
/*@import './components/_el-input';
20+
@import './components/_el-input';
2121
@import './components/_el-select';
2222
@import './components/_el-popover';
2323

24-
@import '_icons';*/
24+
//@import '_icons';
2525

0 commit comments

Comments
 (0)