Skip to content

Commit 8cba617

Browse files
mikerodhammikerodham
committed
Removed the need for sass-loader
1 parent a09fedd commit 8cba617

File tree

3 files changed

+91
-95
lines changed

3 files changed

+91
-95
lines changed

‎Dropdown.vue‎

Lines changed: 89 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -61,100 +61,100 @@
6161
}
6262
</script>
6363

64-
<style lang="scss" scoped>
64+
<style>
6565
66-
.btn-group {
67-
min-width: 160px;
68-
height: 40px;
69-
position: relative;
70-
margin: 10px 1px;
71-
display: inline-block;
72-
vertical-align: middle;
73-
a {
74-
&:hover {
75-
text-decoration: none;
76-
}
77-
}
78-
}
66+
.btn-group {
67+
min-width: 160px;
68+
height: 40px;
69+
position: relative;
70+
margin: 10px 1px;
71+
display: inline-block;
72+
vertical-align: middle;
73+
}
74+
.btn-group a:hover {
75+
text-decoration: none;
76+
}
7977
80-
.dropdown-toggle {
81-
color: #636b6f;
82-
min-width: 160px;
83-
padding: 10px;
84-
text-transform: none;
85-
font-weight: 300;
86-
margin-bottom: 7px;
87-
border: 0;
88-
background-image: linear-gradient(#009688, #009688), linear-gradient(#D2D2D2, #D2D2D2);
89-
background-size: 0 2px, 100% 1px;
90-
background-repeat: no-repeat;
91-
background-position: center bottom, center calc(100% - 1px);
92-
background-color: transparent;
93-
transition: background 0s ease-out;
94-
float: none;
95-
box-shadow: none;
96-
border-radius: 0;
78+
.dropdown-toggle {
79+
color: #636b6f;
80+
min-width: 160px;
81+
padding: 10px;
82+
text-transform: none;
83+
font-weight: 300;
84+
margin-bottom: 7px;
85+
border: 0;
86+
background-image: linear-gradient(#009688, #009688), linear-gradient(#D2D2D2, #D2D2D2);
87+
background-size: 0 2px, 100% 1px;
88+
background-repeat: no-repeat;
89+
background-position: center bottom, center calc(100% - 1px);
90+
background-color: transparent;
91+
transition: background 0s ease-out;
92+
float: none;
93+
box-shadow: none;
94+
border-radius: 0;
95+
}
96+
.dropdown-toggle:hover {
97+
background: #e1e1e1;
98+
cursor: pointer;
99+
}
97100
98-
&:hover {
99-
background: #e1e1e1;
100-
cursor: pointer;
101-
}
102-
}
101+
.dropdown-menu {
102+
position: absolute;
103+
top: 100%;
104+
left: 0;
105+
z-index: 1000;
106+
float: left;
107+
min-width: 160px;
108+
padding: 5px 0;
109+
margin: 2px 0 0;
110+
list-style: none;
111+
font-size: 14px;
112+
text-align: left;
113+
background-color: #fff;
114+
border: 1px solid #ccc;
115+
border-radius: 4px;
116+
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
117+
background-clip: padding-box;
118+
}
103119
104-
.dropdown-menu {
105-
position: absolute;
106-
top: 100%;
107-
left: 0;
108-
z-index: 1000;
109-
float: left;
110-
min-width: 160px;
111-
padding: 5px 0;
112-
margin: 2px 0 0;
113-
list-style: none;
114-
font-size: 14px;
115-
text-align: left;
116-
background-color: #fff;
117-
border: 1px solid #ccc;
118-
border-radius: 4px;
119-
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
120-
background-clip: padding-box;
121-
}
120+
.dropdown-menu > li > a {
121+
padding: 10px 30px;
122+
display: block;
123+
clear: both;
124+
font-weight: normal;
125+
line-height: 1.6;
126+
color: #333333;
127+
white-space: nowrap;
128+
text-decoration: none;
129+
}
130+
.dropdown-menu > li > a:hover {
131+
background: #efefef;
132+
color: #409FCB;
133+
}
122134
123-
.dropdown-menu > li > a {
124-
padding: 10px 30px;
125-
display: block;
126-
clear: both;
127-
font-weight: normal;
128-
line-height: 1.6;
129-
color: #333333;
130-
white-space: nowrap;
131-
text-decoration: none;
135+
.dropdown-menu > li {
136+
overflow: hidden;
137+
width: 100%;
138+
position: relative;
139+
margin: 0;
140+
}
132141
133-
&:hover {
134-
background: #efefef;
135-
color: #409FCB;
136-
}
137-
}
142+
.caret {
143+
display: relative;
144+
width: 0;
145+
position: relative;
146+
top: 10px;
147+
height: 0;
148+
margin-left: 2px;
149+
vertical-align: middle;
150+
border-top: 4px dashed;
151+
border-top: 4px solid \9;
152+
border-right: 4px solid transparent;
153+
border-left: 4px solid transparent;
154+
float: right;
155+
}
138156
139-
.dropdown-menu > li {
140-
overflow: hidden;
141-
width: 100%;
142-
position: relative;
143-
margin: 0
144-
}
145-
146-
.caret {
147-
display: relative;
148-
width: 0;
149-
position: relative;
150-
top: 10px;
151-
height: 0;
152-
margin-left: 2px;
153-
vertical-align: middle;
154-
border-top: 4px dashed;
155-
border-top: 4px solid \9;
156-
border-right: 4px solid transparent;
157-
border-left: 4px solid transparent;
158-
float: right;
159-
}
157+
li {
158+
list-style: none;
159+
}
160160
</style>

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "vue-dropdowns",
3-
"version": "1.0.4",
4-
"description": "A prettier dropdown for Vue2 to replace select boxes",
3+
"version": "1.0.5",
4+
"description": "An easier way to display select boxes using objects",
55
"main": "dropdown.vue",
66
"scripts": {
77
"test": "echo \"Error: no test specified\" && exit 1"

‎readme.md‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -50,10 +50,6 @@ export default {
5050

5151
```
5252

53-
# Todo
54-
- Add different styles to choose from
55-
- Add option to include own styling via json object
56-
5753
# License
5854

5955
[The MIT License](http://opensource.org/licenses/MIT)

0 commit comments

Comments
 (0)