xarxaprod
/
oficinasuport-wp-theme
2
0
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
sass/abstracts/variables/_colors.scss
View File

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

8
sass/base/elements/_fields.scss
View File

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

15
sass/plugins/contactform7/_contactform7.scss Normal file
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;
}

4
sass/style.scss
View File

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

42
style.css
View File

@ -603,7 +603,7 @@ table {
/* Links /* Links
--------------------------------------------- */ --------------------------------------------- */
a { a {
color: #101010; color: #333;
} }
a:visited { a:visited {
@ -630,7 +630,7 @@ input[type="reset"],
input[type="submit"], input[type="submit"],
.wp-block-button__link { .wp-block-button__link {
border: 1px solid; border: 1px solid;
border-color: #000 #000 #000; border-color: #000;
border-radius: 3px; border-radius: 3px;
background: #fff; background: #fff;
color: rgba(0, 0, 0, 0.8); color: rgba(0, 0, 0, 0.8);
@ -643,7 +643,7 @@ input[type="button"]:hover,
input[type="reset"]:hover, input[type="reset"]:hover,
input[type="submit"]:hover, input[type="submit"]:hover,
.wp-block-button__link:hover { .wp-block-button__link:hover {
border-color: #111 #111 #111; border-color: #111;
} }
button:active, button:focus, button:active, button:focus,
@ -655,7 +655,7 @@ input[type="submit"]:active,
input[type="submit"]:focus, input[type="submit"]:focus,
.wp-block-button__link:active, .wp-block-button__link:active,
.wp-block-button__link:focus { .wp-block-button__link:focus {
border-color: #222 #222 #222; border-color: #222;
} }
input[type="text"], input[type="text"],
@ -674,10 +674,12 @@ input[type="datetime"],
input[type="datetime-local"], input[type="datetime-local"],
input[type="color"], input[type="color"],
textarea { textarea {
color: #ccc; color: #333;
border: 1px solid #000; background-color: #eee;
border-radius: 3px; border: none;
padding: 3px; border-radius: 0;
width: 100%;
padding: 0.3rem;
} }
input[type="text"]:focus, input[type="text"]:focus,
@ -696,7 +698,7 @@ input[type="datetime"]:focus,
input[type="datetime-local"]:focus, input[type="datetime-local"]:focus,
input[type="color"]:focus, input[type="color"]:focus,
textarea:focus { textarea:focus {
color: #666; color: #000;
} }
select { select {
@ -1013,6 +1015,26 @@ textarea {
display: block; 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 # Utilities
--------------------------------------------------------------*/ --------------------------------------------------------------*/
@ -1038,7 +1060,7 @@ textarea {
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important; clip: auto !important;
clip-path: none; clip-path: none;
color: #020202; color: #111;
display: block; display: block;
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 700; font-weight: 700;

3
style.css.map
View File

File diff suppressed because one or more lines are too long