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
|
/*
* Use existing Bootstrap 4 classes and
* variables to extend - override CF7 style
*
* Useful CF7 classes:
* .wpcf7 the wrapper element
* .wpcf7-form
* .wpcf7-form-control
* .wpcf7-text
* .wpcf7-email
* .wpcf7-textarea
* .wpcf7-submit
*/
// keep a max width in case it is just the form and nothing else
// we do not want a form spanning whole page
.wpcf7 {
max-width: 600px;
margin: 0 auto !important;
// all inputs except radios and checkboxes inherit from form-control
input[type=text],
input[type=search],
input[type=url],
input[type=tel],
input[type=number],
input[type=range],
input[type=date],
input[type=month],
input[type=week],
input[type=time],
input[type=datetime],
input[type=datetime-local],
input[type=color],
input[type=email],
input[type=file],
input[type=submit],
select,
textarea {
@extend .form-control;
}
// submit button, inherit .btn and .btn-outline-primary classes.
input[type=submit] {
@extend .btn;
@extend .btn-outline-primary;
}
.wpcf7-form {
// set paragraphs to behave like divs with class .form-group
p {
@extend .form-group;
}
// let labels be 100%
label {
width: 100%;
}
}
// not valid tip for each control
.wpcf7-not-valid-tip {
color: theme-color("danger");
}
// validation errors ourput bottom of form
.wpcf7-validation-errors {
@extend .form-control;
color: theme-color("danger");
border: 1px solid $gray-200;
}
}
|
