Fixes issues mentioned in comments.

- [x] Highlight for selected date should be bold text.
- [x] Hover highlight for day should be the same as for the selected date.
- [x] Remove hover effect on the week.
- [x] Row for days of the week should indeed stay, but non-bold and at 50% opacity so it doesn't take away the focus.
- [x] Dates of previous and next months a bit lighter.
- [x] Remove marking the weekend blue.
- [x] The box centered below the date field, with triangle in the middle.

Signed-off-by: Marin Treselj <marin@pixelipo.com>
This commit is contained in:
Marin Treselj 2017-07-14 15:05:41 +02:00 committed by Roeland Jago Douma
parent 586eb3ed0a
commit 82a52a8f17
No known key found for this signature in database
GPG Key ID: F941078878347C0C
2 changed files with 19 additions and 15 deletions

View File

@ -211,7 +211,8 @@ nav {
margin-left: -54px;
}
#navigation {
#navigation,
.ui-datepicker {
position: relative;
left: -100%;
width: 160px;

View File

@ -966,9 +966,7 @@ code {
/* ---- jQuery UI datepicker ---- */
.ui-widget.ui-datepicker {
margin-left: -110px !important;
margin-top: 10px;
border-radius: 3px;
.ui-state-default,
.ui-widget-content .ui-state-default,
@ -977,12 +975,6 @@ code {
background: inherit;
}
.ui-state-hover,
.ui-state-focus {
background: inherit;
color: $color-primary;
}
.ui-widget-header {
margin: 3px 3px 3px 0;
padding: 7px 6px;
@ -1014,8 +1006,13 @@ code {
}
.ui-datepicker-calendar {
th.ui-datepicker-week-end {
color: $color-primary;
th {
font-weight: normal;
color: nc-lighten($color-main-text, 33%);
}
tr:hover {
background-color: inherit;
}
td {
@ -1024,19 +1021,25 @@ code {
a {
border-radius: 3px;
text-align: center;
font-weight: normal;
color: $color-main-text;
}
&.ui-datepicker-week-end a {
color: $color-primary;
&.ui-datepicker-week-end a:not(.ui-state-hover),
.ui-priority-secondary {
color: nc-lighten($color-main-text, 33%);
}
&.ui-datepicker-today a {
&.ui-datepicker-today a:not(.ui-state-hover) {
background-color: nc-lighten($color-main-text, 86%);
}
&.ui-datepicker-current-day .ui-state-active {
&.ui-datepicker-current-day .ui-state-active,
.ui-state-hover,
.ui-state-focus {
background-color: $color-primary;
color: $color-primary-text;
font-weight: bold;
}
}
}