Datepicker design fix
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
This commit is contained in:
parent
a8ab67ff48
commit
fe43330e73
|
@ -206,12 +206,15 @@ nav {
|
||||||
margin-left: -54px;
|
margin-left: -54px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-left #navigation,
|
.header-left #navigation {
|
||||||
.ui-datepicker,
|
|
||||||
.ui-timepicker.ui-widget {
|
|
||||||
position: relative;
|
position: relative;
|
||||||
left: -100%;
|
left: -100%;
|
||||||
width: 160px;
|
width: 160px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-left #navigation,
|
||||||
|
.ui-datepicker,
|
||||||
|
.ui-timepicker.ui-widget {
|
||||||
background-color: $color-main-background;
|
background-color: $color-main-background;
|
||||||
filter: drop-shadow(0 1px 10px $color-box-shadow);
|
filter: drop-shadow(0 1px 10px $color-box-shadow);
|
||||||
&:after {
|
&:after {
|
||||||
|
|
|
@ -1030,15 +1030,6 @@ code {
|
||||||
background-color: inherit;
|
background-color: inherit;
|
||||||
}
|
}
|
||||||
td {
|
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) {
|
&.ui-datepicker-today a:not(.ui-state-hover) {
|
||||||
background-color: nc-lighten($color-main-text, 86%);
|
background-color: nc-lighten($color-main-text, 86%);
|
||||||
}
|
}
|
||||||
|
@ -1051,7 +1042,7 @@ code {
|
||||||
font-weight: bold;
|
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) {
|
.ui-priority-secondary:not(.ui-state-hover) {
|
||||||
color: nc-lighten($color-main-text, 33%);
|
color: nc-lighten($color-main-text, 33%);
|
||||||
opacity: .8;
|
opacity: .8;
|
||||||
|
@ -1094,6 +1085,12 @@ code {
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
/* AM/PM fix */
|
||||||
|
table.ui-timepicker tr th {
|
||||||
|
position: absolute;
|
||||||
|
margin-left: -24px;
|
||||||
|
top: calc(50% + 5px);
|
||||||
|
}
|
||||||
.ui-timepicker-table {
|
.ui-timepicker-table {
|
||||||
th {
|
th {
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
|
@ -1104,16 +1101,6 @@ code {
|
||||||
background-color: inherit;
|
background-color: inherit;
|
||||||
}
|
}
|
||||||
td {
|
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-hour-cell a.ui-state-active,
|
||||||
&.ui-timepicker-minute-cell a.ui-state-active,
|
&.ui-timepicker-minute-cell a.ui-state-active,
|
||||||
.ui-state-hover,
|
.ui-state-hover,
|
||||||
|
@ -1129,6 +1116,42 @@ code {
|
||||||
|
|
||||||
&.ui-timepicker-hours {
|
&.ui-timepicker-hours {
|
||||||
border-right: 1px solid $color-border;
|
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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue