form input background gradients

This commit is contained in:
ManjaroOne666 2019-01-30 21:12:13 +00:00
parent 5ad171c467
commit 3891b2e381
1 changed files with 40 additions and 0 deletions

View File

@ -16,7 +16,47 @@ $success: $color__accent-success-300;
} }
.input, .textarea { .input, .textarea {
$color-bg: $color__neutral-900;
$gradient-from: .1;
$gradient-to: .3;
font-weight: 600; font-weight: 600;
background-color: rgba($color__neutral-900, .7);
background: linear-gradient(
to bottom,
rgba($color-bg, $gradient-from),
rgba($color-bg, $gradient-to),
rgba($color-bg, $gradient-to),
rgba($color-bg, $gradient-from),
),
linear-gradient(
to right,
rgba($color-bg, $gradient-from),
rgba($color-bg, $gradient-to),
rgba($color-bg, $gradient-to),
rgba($color-bg, $gradient-from),
);
&:focus {
$color-bg: #fff;
$gradient-from: .1;
$gradient-to: .5;
background: $color-bg;
background: linear-gradient(
to bottom,
rgba($color-bg, $gradient-from),
rgba($color-bg, $gradient-to),
rgba($color-bg, $gradient-to),
rgba($color-bg, $gradient-from),
),
linear-gradient(
to right,
rgba($color-bg, $gradient-from),
rgba($color-bg, $gradient-to),
rgba($color-bg, $gradient-to),
rgba($color-bg, $gradient-from),
);
}
} }
.help { .help {