Datepicker design fix

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
This commit is contained in:
John Molakvoæ (skjnldsv) 2017-12-13 11:10:52 +01:00
parent a8ab67ff48
commit fe43330e73
No known key found for this signature in database
GPG Key ID: FB5ACEED51955BF8
2 changed files with 49 additions and 23 deletions

View File

@ -206,12 +206,15 @@ nav {
margin-left: -54px;
}
.header-left #navigation,
.ui-datepicker,
.ui-timepicker.ui-widget {
.header-left #navigation {
position: relative;
left: -100%;
width: 160px;
}
.header-left #navigation,
.ui-datepicker,
.ui-timepicker.ui-widget {
background-color: $color-main-background;
filter: drop-shadow(0 1px 10px $color-box-shadow);
&:after {

View File

@ -1030,15 +1030,6 @@ code {
background-color: inherit;
}
td {
> * {
border-radius: 50%;
text-align: center;
font-weight: normal;
color: $color-main-text;
padding: 6px;
line-height: 12px;
}
&.ui-datepicker-today a:not(.ui-state-hover) {
background-color: nc-lighten($color-main-text, 86%);
}
@ -1051,7 +1042,7 @@ code {
font-weight: bold;
}
&.ui-datepicker-week-end :not(.ui-state-hover),
&.ui-datepicker-week-end:not(.ui-state-disabled) :not(.ui-state-hover),
.ui-priority-secondary:not(.ui-state-hover) {
color: nc-lighten($color-main-text, 33%);
opacity: .8;
@ -1094,6 +1085,12 @@ code {
font-weight: 300;
}
}
/* AM/PM fix */
table.ui-timepicker tr th {
position: absolute;
margin-left: -24px;
top: calc(50% + 5px);
}
.ui-timepicker-table {
th {
font-weight: normal;
@ -1104,16 +1101,6 @@ code {
background-color: inherit;
}
td {
> * {
border-radius: 50%;
text-align: center;
font-weight: normal;
color: $color-main-text;
padding: 8px 7px;
font-size: .9em;
line-height: 12px;
}
&.ui-timepicker-hour-cell a.ui-state-active,
&.ui-timepicker-minute-cell a.ui-state-active,
.ui-state-hover,
@ -1129,6 +1116,42 @@ code {
&.ui-timepicker-hours {
border-right: 1px solid $color-border;
/* AM/PM fix */
.ui-timepicker tr {
position: relative;
margin-left: 25px;
}
}
}
}
}
/* ---- jQuery UI datepicker & timepicker global rules ---- */
.ui-widget.ui-datepicker .ui-datepicker-calendar,
.ui-widget.ui-timepicker table.ui-timepicker {
tr {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
td {
display: block;
flex: 1 1;
margin: 0;
padding: 2px;
display: flex;
align-items: center;
justify-content: center;
> * {
border-radius: 50%;
text-align: center;
font-weight: normal;
color: $color-main-text;
display: block;
line-height: 18px;
width: 18px;
height: 18px;
padding: 3px;
font-size: .9em;
}
}
}