Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
.validate {
margin-top: 10px; }
.invalid-form-error-message {
margin-top: 10px;
padding: 5px; }
.invalid-form-error-message.filled {
border-left: 2px solid #E74C3C; }
p.parsley-success {
color: #468847;
background-color: #DFF0D8;
border: 1px solid #D6E9C6; }
p.parsley-error {
color: #B94A48;
background-color: #F2DEDE;
border: 1px solid #EED3D7; }
ul.parsley-errors-list {
list-style: none;
color: #E74C3C;
padding-left: 0; }
input.parsley-error, textarea.parsley-error, select.parsley-error {
background: #FAEDEC;
border: 1px solid #E85445; }
.btn-group .parsley-errors-list {
display: none; }
.bad input, .bad select, .bad textarea {
border: 1px solid #CE5454;
-webkit-box-shadow: 0 0 4px -2px #CE5454;
box-shadow: 0 0 4px -2px #CE5454;
position: relative;
left: 0;
-moz-animation: .7s 1 shake linear;
-webkit-animation: 0.7s 1 shake linear; }
.item {
display: -webkit-box;
display: -ms-flexbox;
display: flex; }
.item input, .item textarea {
-webkit-transition: 0.42s;
transition: 0.42s; }
/* alerts (when validation fails) */
.item .alert {
float: left;
margin: 0 0 0 20px;
padding: 3px 10px;
color: #FFF;
border-radius: 3px 4px 4px 3px;
background-color: #CE5454;
max-width: 170px;
white-space: pre;
position: relative;
left: -15px;
opacity: 0;
z-index: 1;
-webkit-transition: 0.15s ease-out;
transition: 0.15s ease-out; }
.item .alert::after {
content: '';
display: block;
height: 0;
width: 0;
border-color: transparent #CE5454 transparent transparent;
border-style: solid;
border-width: 11px 7px;
position: absolute;
left: -13px;
top: 1px; }
.item.bad .alert {
left: 0;
opacity: 1; }
.inl-bl {
display: inline-block; }
.well {
min-height: 20px;
padding: 19px;
margin-bottom: 20px;
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); }
.well .markup {
background: #fff;
color: #777;
position: relative;
padding: 45px 15px 15px;
margin: 15px 0 0 0;
background-color: #fff;
border-radius: 0 0 4px 4px;
-webkit-box-shadow: none;
box-shadow: none; }
.well .markup::after {
content: "Example";
position: absolute;
top: 15px;
left: 15px;
font-size: 12px;
font-weight: bold;
color: #bbb;
text-transform: uppercase;
letter-spacing: 1px; }