Make dates slightly larger and perfectly rounded.

SCSS cleanup, fix fringe cases, add margin between dates, un-bold title.

Signed-off-by: Marin Treselj <marin@pixelipo.com>
This commit is contained in:
Marin Treselj 2017-07-17 11:08:40 +02:00 committed by Roeland Jago Douma
parent b26d133e28
commit 0ba8903aad
No known key found for this signature in database
GPG Key ID: F941078878347C0C
1 changed files with 21 additions and 29 deletions

View File

@ -968,6 +968,7 @@ code {
.ui-widget.ui-datepicker { .ui-widget.ui-datepicker {
margin-top: 10px; margin-top: 10px;
padding: 4px 8px; padding: 4px 8px;
width: auto;
.ui-state-default, .ui-state-default,
.ui-widget-content .ui-state-default, .ui-widget-content .ui-state-default,
@ -975,77 +976,68 @@ code {
border: 1px solid transparent; border: 1px solid transparent;
background: inherit; background: inherit;
} }
.ui-widget-header { .ui-widget-header {
margin: 3px 3px 3px 0; padding: 7px;
padding: 7px 6px;
font-size: 13px; font-size: 13px;
border: none; // 1px solid #dbdbdb; font-weight: normal;
border-radius: 3px; border: none;
background-color: $color-main-background; background-color: $color-main-background;
color: $color-main-text; color: $color-main-text;
.ui-datepicker-title { .ui-datepicker-title {
line-height: 1; line-height: 1;
} }
.ui-icon { .ui-icon {
opacity: .5; opacity: .5;
}
.ui-state-hover .ui-icon { &.ui-icon-circle-triangle-e {
opacity: 1;
}
.ui-icon.ui-icon-circle-triangle-e {
background: url("../img/actions/arrow-right.svg") center center no-repeat; background: url("../img/actions/arrow-right.svg") center center no-repeat;
} }
&.ui-icon-circle-triangle-w {
.ui-icon.ui-icon-circle-triangle-w {
background: url("../img/actions/arrow-left.svg") center center no-repeat; background: url("../img/actions/arrow-left.svg") center center no-repeat;
} }
} }
.ui-state-hover .ui-icon {
opacity: 1;
}
}
.ui-datepicker-calendar { .ui-datepicker-calendar {
th { th {
font-weight: normal; font-weight: normal;
color: nc-lighten($color-main-text, 33%); color: nc-lighten($color-main-text, 33%);
} }
tr:hover { tr:hover {
background-color: inherit; background-color: inherit;
} }
td { td {
padding: 0; > * {
border-radius: 50%;
a {
border-radius: 3px;
text-align: center; text-align: center;
font-weight: normal; font-weight: normal;
color: $color-main-text; color: $color-main-text;
} padding: 6px;
line-height: 12px;
&.ui-datepicker-week-end a:not(.ui-state-hover),
.ui-priority-secondary {
color: nc-lighten($color-main-text, 33%);
} }
&.ui-datepicker-today a:not(.ui-state-hover) { &.ui-datepicker-today a:not(.ui-state-hover) {
background-color: nc-lighten($color-main-text, 86%); background-color: nc-lighten($color-main-text, 86%);
} }
&.ui-datepicker-current-day .ui-state-active, &.ui-datepicker-current-day a.ui-state-active,
.ui-state-hover, .ui-state-hover,
.ui-state-focus { .ui-state-focus {
background-color: $color-primary; background-color: $color-primary;
color: $color-primary-text; color: $color-primary-text;
font-weight: bold; font-weight: bold;
} }
}
}
}
&.ui-datepicker-week-end :not(.ui-state-hover),
.ui-priority-secondary:not(.ui-state-hover) {
color: nc-lighten($color-main-text, 33%);
}
}
}
}
.ui-datepicker-prev, .ui-datepicker-next { .ui-datepicker-prev, .ui-datepicker-next {
border: nc-lighten($color-main-text, 86%); border: nc-lighten($color-main-text, 86%);