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:
parent
b26d133e28
commit
0ba8903aad
|
@ -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%);
|
||||||
|
|
Loading…
Reference in New Issue