styled input fields and contact form 7 plugin

This commit is contained in:
jorge-vitrubio 2022-11-30 15:42:32 +01:00
parent 99a043dcb8
commit a27391fb9b
6 changed files with 66 additions and 21 deletions

View File

@ -3,8 +3,8 @@ $color__white-dark: #fdfdfd;
$color__grey-lighter: #eee;
$color__grey-light: #ccc;
$color__grey-dark: #666;
$color__black-light: #101010;
$color__black-grey: #020202;
$color__black-light: #333;
$color__black-grey: #111;
$color__black: #000;
$color__orange: #ff8d76;
$color__yellow: #f6cc4c;
@ -21,18 +21,19 @@ $color__background-hr: $color__black;
$color__background-button: $color__white;
$color__background-pre: $color__white-dark;
$color__background-ins: $color__white-dark;
$color__background-input: $color__grey-lighter;
$color__text-screen: $color__black-grey;
$color__text-input: $color__grey-light;
$color__text-input-focus: $color__grey-dark;
$color__text-input: $color__black-light;
$color__text-input-focus: $color__black;
$color__link: $color__black-light;
$color__link-visited: #505050;
$color__link-hover: #707070;
$color__text-main: #404040;
$color__border-button: #000 #000 #000;
$color__border-button-hover: #111 #111 #111;
$color__border-button-focus: #222 #222 #222;
$color__border-button: #000;
$color__border-button-hover: #111;
$color__border-button-focus: #222;
$color__border-input: $color__black;
$color__border-abbr: $color__grey-dark;

View File

@ -15,9 +15,11 @@ input[type="datetime-local"],
input[type="color"],
textarea {
color: $color__text-input;
border: 1px solid $color__border-input;
border-radius: 3px;
padding: 3px;
background-color: $color__background-input;
border: none;
border-radius: 0;
width: 100%;
padding: 0.3rem;
&:focus {
color: $color__text-input-focus;

View File

@ -0,0 +1,15 @@
.wpcf7-not-valid:not(:focus) {
background-color: $color__red;
}
.wpcf7-not-valid-tip {
color: $color__red;
}
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {
border-color: $color__yellow;
background-color: $color__yellow;
color: $color__white;
font-family: "din-medium";
font-weight: bold;
margin: -4.5em -0.5em 0 -0.5em;
padding: 0.4rem 0 1rem 6rem;
}

View File

@ -91,6 +91,10 @@ Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
--------------------------------------------- */
@import "plugins/jetpack/infinite-scroll";
/* Contact Form 7
--------------------------------------------- */
@import "plugins/contactform7/contactform7";
/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

View File

@ -603,7 +603,7 @@ table {
/* Links
--------------------------------------------- */
a {
color: #101010;
color: #333;
}
a:visited {
@ -630,7 +630,7 @@ input[type="reset"],
input[type="submit"],
.wp-block-button__link {
border: 1px solid;
border-color: #000 #000 #000;
border-color: #000;
border-radius: 3px;
background: #fff;
color: rgba(0, 0, 0, 0.8);
@ -643,7 +643,7 @@ input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover {
border-color: #111 #111 #111;
border-color: #111;
}
button:active, button:focus,
@ -655,7 +655,7 @@ input[type="submit"]:active,
input[type="submit"]:focus,
.wp-block-button__link:active,
.wp-block-button__link:focus {
border-color: #222 #222 #222;
border-color: #222;
}
input[type="text"],
@ -674,10 +674,12 @@ input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
color: #ccc;
border: 1px solid #000;
border-radius: 3px;
padding: 3px;
color: #333;
background-color: #eee;
border: none;
border-radius: 0;
width: 100%;
padding: 0.3rem;
}
input[type="text"]:focus,
@ -696,7 +698,7 @@ input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
color: #666;
color: #000;
}
select {
@ -1013,6 +1015,26 @@ textarea {
display: block;
}
/* Contact Form 7
--------------------------------------------- */
.wpcf7-not-valid:not(:focus) {
background-color: #ff686e;
}
.wpcf7-not-valid-tip {
color: #ff686e;
}
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {
border-color: #f6cc4c;
background-color: #f6cc4c;
color: #fff;
font-family: "din-medium";
font-weight: bold;
margin: -4.5em -0.5em 0 -0.5em;
padding: 0.4rem 0 1rem 6rem;
}
/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/
@ -1038,7 +1060,7 @@ textarea {
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important;
clip-path: none;
color: #020202;
color: #111;
display: block;
font-size: 0.875rem;
font-weight: 700;

File diff suppressed because one or more lines are too long