Skip to content

Instantly share code, notes, and snippets.

@twome twome/today.compiled.css
Last active Oct 28, 2016

Embed
What would you like to do?
Trello - Stronger "today" indicator for date-select mini-calendar
/*
Stronger "today" indicator for date-select mini-calendar.
The current "today" indicator already has bold text, but that might be a bit subtle
for some users (especially those with vision impairments or poor font rendering).
This uses a coloured background and a faint light rim that remains when "today"
is also the selected day, to save users from having to select a different
day to double-check they have correctly selected "today". This also helps
for more instantly noticing the current day when skimming through months.
*/
.pika-single .is-today:not(.is-selected) .pika-button {
background-color: #61BD4F;
box-shadow: inset 0px 0px 0px 3px #4b9e3b;
}
.pika-single .is-today.is-selected .pika-button {
box-shadow: inset 0px 0px 0px 3px rgba(255, 255, 255, 0.7);
}
/*
Stronger "today" indicator for date-select mini-calendar.
Uses a coloured background and a faint light rim that remains when "today"
is also the selected day, to save users from having to select a different
day to double-check they have correctly selected "today".
*/
$trello-brand-color-green: #61BD4F;
$date-select-today-color: $trello-brand-color-green;
$date-select-today-rim: inset 0px 0px 0px 3px;
.pika-single .is-today:not(.is-selected) .pika-button {
background-color: $date-select-today-color;
box-shadow: inset 0px 0px 0px 3px darken($date-select-today-color, 10%);
}
// We must copy the shadow's positioning properties as "box-shadow" is not
// actually a shorthand for more sub-properties.
.pika-single .is-today.is-selected .pika-button {
box-shadow: $date-select-today-rim hsla(100,0%,100%,.7);
}
@twome

This comment has been minimized.

Copy link
Owner Author

commented Oct 28, 2016

screen shot 2016-10-28 at 3 21 24 pm

screen shot 2016-10-28 at 3 20 18 pm

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.