summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorBirte Kristina Friesel <derf@finalrewind.org>2023-08-06 22:23:06 +0200
committerBirte Kristina Friesel <derf@finalrewind.org>2023-08-06 22:23:06 +0200
commit3456350c2c8cf4bc136eb822f1793ec92f0f2c79 (patch)
tree306116a86a26278fd031b05f834cdf61691304b2
parentf43082f74e92cb98845efb19017846f4e3255f98 (diff)
use proper text contrast for input labels
Materialize has _weird_ defaults Closes #79
-rw-r--r--sass/components/_variables.scss1
-rw-r--r--sass/components/forms/_forms.scss2
-rw-r--r--sass/components/forms/_input-fields.scss2
-rw-r--r--sass/src/dark/_variables.scss2
-rw-r--r--sass/src/light/_variables.scss1
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');