Streamline form field colors

This commit is contained in:
Björn Fromme
2019-06-06 17:59:47 +02:00
parent fa67ac8f4f
commit d8889fdaa9
2 changed files with 20 additions and 8 deletions
@@ -30,7 +30,8 @@
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
background-color: $color-divider; background-color: $color-brand-light;
color: white;
border-radius: 8px; border-radius: 8px;
} }
@@ -65,12 +66,13 @@
} }
.form__field { .form__field {
@include nooutline;
border: none; border: none;
border-radius: 8px; border-radius: 8px;
width: 100%; width: 100%;
padding: 8px 16px; padding: 8px 16px;
color: $color-font-main; color: white;
background-color: $color-divider; background-color: $color-brand-light;
.form--box & { .form--box & {
background-color: $color-brand-light; background-color: $color-brand-light;
@@ -172,33 +174,33 @@
} }
::-webkit-input-placeholder { /* WebKit, Blink, Edge */ ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: $color-font-main; color: white;
text-transform: uppercase; text-transform: uppercase;
font-size: 90%; font-size: 90%;
} }
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: $color-font-main; color: white;
opacity: 1; opacity: 1;
text-transform: uppercase; text-transform: uppercase;
font-size: 90%; font-size: 90%;
} }
::-moz-placeholder { /* Mozilla Firefox 19+ */ ::-moz-placeholder { /* Mozilla Firefox 19+ */
color: $color-font-main; color: white;
opacity: 1; opacity: 1;
text-transform: uppercase; text-transform: uppercase;
font-size: 90%; font-size: 90%;
} }
:-ms-input-placeholder { /* Internet Explorer 10-11 */ :-ms-input-placeholder { /* Internet Explorer 10-11 */
color: $color-font-main; color: white;
text-transform: uppercase; text-transform: uppercase;
font-size: 90%; font-size: 90%;
} }
::-ms-input-placeholder { /* Microsoft Edge */ ::-ms-input-placeholder { /* Microsoft Edge */
color: $color-font-main; color: white;
text-transform: uppercase; text-transform: uppercase;
font-size: 90%; font-size: 90%;
} }
@@ -6,6 +6,16 @@
padding: 0 $padding; padding: 0 $padding;
} }
@mixin nooutline() {
outline: none;
&:focus,
&:active,
&:visited {
outline: none;
}
}
@mixin sectionColours() { @mixin sectionColours() {
&.section-incentives { &.section-incentives {
color: $color-incentives; color: $color-incentives;