From 3456350c2c8cf4bc136eb822f1793ec92f0f2c79 Mon Sep 17 00:00:00 2001 From: Birte Kristina Friesel Date: Sun, 6 Aug 2023 22:23:06 +0200 Subject: [PATCH] use proper text contrast for input labels Materialize has _weird_ defaults Closes #79 --- sass/components/_variables.scss | 1 + sass/components/forms/_forms.scss | 2 +- sass/components/forms/_input-fields.scss | 2 +- sass/src/dark/_variables.scss | 2 +- sass/src/light/_variables.scss | 1 + 5 files changed, 5 insertions(+), 3 deletions(-) diff --git a/sass/components/_variables.scss b/sass/components/_variables.scss index 4c59c12..fa03d61 100644 --- a/sass/components/_variables.scss +++ b/sass/components/_variables.scss @@ -165,6 +165,7 @@ $dropdown-item-height: 50px !default; // Text Inputs + Textarea $input-height: 3rem !default; $input-border-color: color("grey", "base") !default; +$input-label-color: color("grey", "base") !default; $input-border: 1px solid $input-border-color !default; $input-background: #fff !default; $input-error-color: $error-color !default; diff --git a/sass/components/forms/_forms.scss b/sass/components/forms/_forms.scss index 4c19f4c..a387260 100644 --- a/sass/components/forms/_forms.scss +++ b/sass/components/forms/_forms.scss @@ -10,7 +10,7 @@ button:focus { label { font-size: $label-font-size; - color: $input-border-color; + color: $input-label-color; } @import 'input-fields'; diff --git a/sass/components/forms/_input-fields.scss b/sass/components/forms/_input-fields.scss index f18c2f8..09fa47c 100644 --- a/sass/components/forms/_input-fields.scss +++ b/sass/components/forms/_input-fields.scss @@ -176,7 +176,7 @@ textarea.materialize-textarea { margin-bottom: 1rem; & > label { - color: $input-border-color; + color: $input-label-color; position: absolute; top: 0; left: 0; diff --git a/sass/src/dark/_variables.scss b/sass/src/dark/_variables.scss index 7dcd006..04e3689 100644 --- a/sass/src/dark/_variables.scss +++ b/sass/src/dark/_variables.scss @@ -11,7 +11,7 @@ $secondary-color: color('cyan', 'darken-2'); $link-color: color('light-blue', 'darken-1'); $success-color: color('green', 'darken-2'); $error-color: color('red', 'darken-2'); -$input-border-color: $off-black; +$input-label-color: $off-black; $collection-border-color: color('grey', 'darken-3'); $collection-link-color: color('shades', 'white'); $collection-hover-bg-color: color('grey', 'darken-4'); diff --git a/sass/src/light/_variables.scss b/sass/src/light/_variables.scss index 4fdd9e8..6c5095b 100644 --- a/sass/src/light/_variables.scss +++ b/sass/src/light/_variables.scss @@ -5,3 +5,4 @@ $card-link-color: $link-color; $collection-link-color: color('shades', 'black'); $card-bg-color: color('blue-grey', 'lighten-5'); $inactive-color: color('grey', 'darken-2'); +$input-label-color: color('shades', 'black');