Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Gradient change for form elements
$color: #804A69;
/*-------
Goal: The main color gets lighten by a small percentage each time the nth-of-type increase
-------*/
form { // to limit to forms only
$n: 15; // to make sure the loop stops
@for $i from 0 to $n { // for loop
$label: $i/10 * 100% - 10%; // e.g. for nth-of-type(1) $i = 3 -> $label = (3/10 * 100%) - 10% = 20%
$input: $i/10 * 100% - 5%; // e.g. for nth-of-type(3) $i = 3 -> $input = (3/10 * 100%) - 5% = 25%
div:nth-of-type(#{$i + 1}) { // start loop
label {
color: lighten($color, $label); // e.g. for nth-of-type(3), color: lighten( #804A69, 20%);
}
input[type],
textarea {
border: 2px solid lighten($color, $input);
&:focus {
background-image: linear-gradient(to bottom right, transparent, transparent, lighten($color, 55%));
}
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment