Skip to content

Commit e0ea478

Browse files
icebobicebob
committed
styles: remove shadow from fieldSwitch
1 parent 49d122e commit e0ea478

File tree

1 file changed

+100
-100
lines changed

1 file changed

+100
-100
lines changed

‎src/fields/fieldSwitch.vue

+100-100
Original file line numberDiff line numberDiff line change
@@ -36,107 +36,107 @@
3636

3737
<style lang="sass">
3838
39-
$field-switch-width: 120px;
39+
$field-switch-width: 120px;
40+
$field-switch-height: 30px;
4041
41-
.vue-form-generator .field-switch {
42-
.field-wrap label {
43-
position: relative;
44-
display: block;
45-
vertical-align: top;
46-
width: $field-switch-width;
47-
height: 30px;
48-
padding: 3px;
49-
margin: 0 10px 10px 0;
50-
background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
51-
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
52-
border-radius: 18px;
53-
box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
54-
cursor: pointer;
55-
}
56-
input {
57-
position: absolute;
58-
top: 0;
59-
left: 0;
60-
opacity: 0;
61-
}
62-
.label {
63-
position: relative;
64-
display: block;
65-
height: inherit;
66-
font-size: 10px;
67-
text-transform: uppercase;
68-
background: #eceeef;
69-
border-radius: inherit;
70-
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
71-
}
72-
.label:before, .label:after {
73-
position: absolute;
74-
top: 50%;
75-
margin-top: -.5em;
76-
line-height: 1;
77-
-webkit-transition: inherit;
78-
-moz-transition: inherit;
79-
-o-transition: inherit;
80-
transition: inherit;
81-
}
82-
.label:before {
83-
content: attr(data-off);
84-
right: 11px;
85-
color: #aaaaaa;
86-
text-shadow: 0 1px rgba(255, 255, 255, 0.5);
87-
}
88-
.label:after {
89-
content: attr(data-on);
90-
left: 11px;
91-
color: #FFFFFF;
92-
text-shadow: 0 1px rgba(0, 0, 0, 0.2);
93-
opacity: 0;
94-
}
95-
input:checked ~ .label {
96-
background: #E1B42B;
97-
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
98-
}
99-
input:checked ~ .label:before {
100-
opacity: 0;
101-
}
102-
input:checked ~ .label:after {
103-
opacity: 1;
104-
}
42+
.vue-form-generator .field-switch {
10543
106-
.handle {
107-
position: absolute;
108-
top: 4px;
109-
left: 4px;
110-
width: 28px;
111-
height: 28px;
112-
background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
113-
background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
114-
border-radius: 100%;
115-
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
116-
}
117-
.handle:before {
118-
content: "";
119-
position: absolute;
120-
top: 50%;
121-
left: 50%;
122-
margin: -6px 0 0 -6px;
123-
width: 12px;
124-
height: 12px;
125-
background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
126-
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
127-
border-radius: 6px;
128-
box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
129-
}
130-
input:checked ~ .handle {
131-
left: $field-switch-width - 32px;
132-
left: calc(100% - 32px);
133-
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
134-
}
135-
136-
/* Transition
137-
========================== */
138-
.label, .handle {
139-
transition: all 0.3s ease;
44+
.field-wrap label {
45+
position: relative;
46+
display: block;
47+
vertical-align: top;
48+
width: $field-switch-width;
49+
height: $field-switch-height;
50+
padding: 0;
51+
margin: 0 10px 10px 0;
52+
border-radius: $field-switch-height / 2;
53+
box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
54+
cursor: pointer;
55+
}
56+
input {
57+
position: absolute;
58+
top: 0;
59+
left: 0;
60+
opacity: 0;
61+
}
62+
.label {
63+
position: relative;
64+
display: block;
65+
height: inherit;
66+
font-size: 10px;
67+
text-transform: uppercase;
68+
background: #eceeef;
69+
border-radius: inherit;
70+
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
71+
}
72+
.label:before, .label:after {
73+
position: absolute;
74+
top: 50%;
75+
margin-top: -.5em;
76+
line-height: 1;
77+
-webkit-transition: inherit;
78+
-moz-transition: inherit;
79+
-o-transition: inherit;
80+
transition: inherit;
81+
}
82+
.label:before {
83+
content: attr(data-off);
84+
right: 11px;
85+
color: #aaaaaa;
86+
text-shadow: 0 1px rgba(255, 255, 255, 0.5);
87+
}
88+
.label:after {
89+
content: attr(data-on);
90+
left: 11px;
91+
color: #FFFFFF;
92+
text-shadow: 0 1px rgba(0, 0, 0, 0.2);
93+
opacity: 0;
94+
}
95+
input:checked ~ .label {
96+
background: #E1B42B;
97+
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
98+
}
99+
input:checked ~ .label:before {
100+
opacity: 0;
101+
}
102+
input:checked ~ .label:after {
103+
opacity: 1;
104+
}
105+
106+
.handle {
107+
position: absolute;
108+
top: 1px;
109+
left: 1px;
110+
width: $field-switch-height - 2px;
111+
height: $field-switch-height - 2px;
112+
background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
113+
background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
114+
border-radius: 100%;
115+
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
116+
}
117+
.handle:before {
118+
content: "";
119+
position: absolute;
120+
top: 50%;
121+
left: 50%;
122+
margin: -6px 0 0 -6px;
123+
width: 12px;
124+
height: 12px;
125+
background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
126+
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
127+
border-radius: 6px;
128+
box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
129+
}
130+
input:checked ~ .handle {
131+
left: $field-switch-width - ($field-switch-height - 1px);
132+
left: calc(100% - ($field-switch-height - 1px));
133+
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
134+
}
135+
136+
/* Transition
137+
========================== */
138+
.label, .handle {
139+
transition: all 0.3s ease;
140+
}
140141
}
141-
}
142142
</style>

0 commit comments

Comments
 (0)