Skip to content

Commit 10df3b0

Browse files
techfanotechfano
committed
adding select styles
1 parent e806eca commit 10df3b0

File tree

9 files changed

+268
-88
lines changed

9 files changed

+268
-88
lines changed

‎package-lock.json

+138-79
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+3
Original file line numberDiff line numberDiff line change
@@ -61,5 +61,8 @@
6161
"webpack": "^2.7.0",
6262
"webpack-dev-server": "^2.4.5",
6363
"zip-webpack-plugin": "^2.1.0"
64+
},
65+
"dependencies": {
66+
"autoprefixer": "^9.4.3"
6467
}
6568
}

‎postcss.config.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ module.exports = {
77
'postcss-conditionals': {},
88
'postcss-nested': {},
99
'postcss-extend': {},
10-
'cssnano': {}
10+
'cssnano': {},
11+
'autoprefixer': {}
1112
}
1213
}

‎src/app.css

+2-1
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,9 @@
2121
/*Loading Form System*/
2222
@import "css/form/control-box.css";
2323
@import "css/form/input/text.css";
24-
@import "css/form/textarea.css";
2524
@import "css/form/label.css";
25+
@import "css/form/select.css";
26+
@import "css/form/textarea.css";
2627

2728
/*Loading Components Design*/
2829
@import "css/component/button.css";

‎src/css/color/pallete.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ $light-primary-color: #BBDEFB;
44
$secondary-color: #03A9F4;
55
$dark-secondary-color: #03A9F4;
66
$primary-text-color: #212121;
7-
$text-icon-color: #3C3C3C;
87
$secondary-text-color: #757575;
8+
$text-icon-color: #3C3C3C;
99
$border-color: #BDBDBD;
1010
$error-color: #FF1744;
1111
$shadow-color: #999999;

‎src/css/effect/shadow.css

+5
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,8 @@
22
-webkit-box-shadow: 0 2px 6px 0 $shadow-color;
33
box-shadow: 0 2px 6px 0 $shadow-color;
44
}
5+
6+
.shadow-light {
7+
-webkit-box-shadow: 0 1px 3px 0 $shadow-color;
8+
box-shadow: 0 1px 3px 0 $shadow-color;
9+
}

‎src/css/form/control-box.css

+16-3
Original file line numberDiff line numberDiff line change
@@ -39,17 +39,30 @@
3939
& label{
4040
color: $error-color;
4141
}
42+
& input[type="text"]{
43+
border-bottom: 3px solid $error-color;
44+
}
4245
& .control-input{
4346
border-bottom: 3px solid $error-color;
4447
& .action{
4548
color: $error-color;
4649
}
4750
}
51+
select{
52+
border: 1px solid $error-color;
53+
background-image: linear-gradient($error-color, $error-color),
54+
linear-gradient(-135deg, transparent 50%, white 50%),
55+
linear-gradient(-225deg, transparent 50%, white 50%),
56+
linear-gradient(white 42%, $error-color 42%);
57+
&:hover{
58+
background-image: linear-gradient($error-color, $error-color),
59+
linear-gradient(-135deg, transparent 50%, white 50%),
60+
linear-gradient(-225deg, transparent 50%, white 50%),
61+
linear-gradient(white 42%, $error-color 42%);
62+
}
63+
}
4864
& .control-message{
4965
color: $error-color;
5066
}
51-
& input[type="text"]{
52-
border-bottom: 3px solid $error-color;
53-
}
5467
}
5568
}

‎src/css/form/select.css

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
select{
2+
-webkit-appearance: button;
3+
appearance: button;
4+
-webkit-user-select: none;
5+
user-select: none;
6+
outline: none;
7+
background-attachment: white;
8+
padding: 6px;
9+
background-color: white;
10+
border: 1px solid $border-color;
11+
background-image: linear-gradient($border-color, $border-color),
12+
linear-gradient(-135deg, transparent 50%, white 50%),
13+
linear-gradient(-225deg, transparent 50%, white 50%),
14+
linear-gradient(white 42%, $primary-text-color 42%);
15+
background-repeat: no-repeat;
16+
background-size: 0px 100%, 20px 22px, 20px 22px, 20px 100%;
17+
background-position: right 20px center, right bottom, right bottom, right bottom;
18+
& option(:checked){
19+
margin: 12px;
20+
background-color: red;
21+
padding:12px;
22+
border: 1px solid $secondary-color;
23+
}
24+
&:focus{
25+
border: 1px solid $secondary-color;
26+
/* background-color: $action-color; */
27+
background-image: linear-gradient($secondary-color, $secondary-color),
28+
linear-gradient(-135deg, transparent 50%, white 50%),
29+
linear-gradient(-225deg, transparent 50%, white 50%),
30+
linear-gradient(white 42%, $secondary-color 42%);
31+
&:hover{
32+
background-image: linear-gradient($secondary-color, $secondary-color),
33+
linear-gradient(-135deg, transparent 50%, white 50%),
34+
linear-gradient(-225deg, transparent 50%, white 50%),
35+
linear-gradient(white 42%, $secondary-color 42%);
36+
}
37+
@extend .font-400;
38+
}
39+
&:hover{
40+
cursor: pointer;
41+
@extend .shadow-light;
42+
}
43+
&.rounded{
44+
border-radius: 12px;
45+
padding-left: 9px;
46+
padding-right: 9px;
47+
}
48+
@extend .transition;
49+
@extend .caption-text;
50+
}

‎src/index.html

+51-3
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,59 @@
1616
<div class="row">
1717
<div class="six">
1818
<div class="control-box">
19-
<select name="" id="">
19+
<select class="margin-bottom-18" name="" id="">
2020
<option value="0">-Select-</option>
21-
<option value="0">Option 1</option>
22-
<option value="0">Option 2</option>
21+
<option value="1">Option 1</option>
22+
<option value="2">Option 2</option>
2323
</select>
24+
<select class="margin-bottom-18" name="" id="">
25+
<option value="0">-Select-</option>
26+
<option value="1">Option 1</option>
27+
<option value="2">Option 2</option>
28+
</select>
29+
<select class="rounded margin-bottom-18" name="" id="">
30+
<option value="0">-Select-</option>
31+
<option value="1">Option 1</option>
32+
<option value="2">Option 2</option>
33+
</select>
34+
<div class="control-box">
35+
<label for="">
36+
Clientes
37+
</label>
38+
<select name="" id="">
39+
<option value="0">
40+
- Selecciona -
41+
</option>
42+
<option value="1" selected>
43+
Cliente A
44+
</option>
45+
<option value="2">
46+
Cliente B
47+
</option>
48+
</select>
49+
<div class="control-message">
50+
* Dato Obligatorio
51+
</div>
52+
</div>
53+
<div class="control-box error">
54+
<label for="">
55+
Clientes
56+
</label>
57+
<select name="" id="">
58+
<option value="0">
59+
- Selecciona -
60+
</option>
61+
<option value="1" selected>
62+
Cliente A
63+
</option>
64+
<option value="2">
65+
Cliente B
66+
</option>
67+
</select>
68+
<div class="control-message">
69+
* Dato Obligatorio
70+
</div>
71+
</div>
2472
</div>
2573
</div>
2674
<div class="six">

0 commit comments

Comments
 (0)