You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
351 lines
13 KiB
351 lines
13 KiB
$ax5calendar-control-bg: #f5f5f5 !default;
|
|
$ax5calendar-control-border: 1px solid #ddd !default;
|
|
$ax5calendar-control-border-radius: 5px !default;
|
|
$ax5calendar-control-font-size: ceil(($font-size-base * 1.25)) !default;
|
|
$ax5calendar-control-text-color: #222 !default;
|
|
$ax5calendar-control-hover-text-color: $brand-primary !default;
|
|
$ax5calendar-control-padding: 0 !default;
|
|
|
|
$ax5calendar-header-bg: (#FFFFFF, #FFFFFF) !default;
|
|
$ax5calendar-header-border: 0px none !default;
|
|
$ax5calendar-header-padding: 0px 2px !default;
|
|
$ax5calendar-header-font-size: ceil(($font-size-base * 0.8)) !default;
|
|
|
|
$ax5calendar-body-bg: (#FFFFFF, #FFFFFF) !default;
|
|
$ax5calendar-body-border: 0px none !default;
|
|
$ax5calendar-body-font-size: ceil(($font-size-base * 1)) !default;
|
|
$ax5calendar-body-animation-in: ax5-ui-calendar-fadein !default;
|
|
$ax5calendar-body-animation-out: ax5-ui-calendar-fadeout !default;
|
|
|
|
$ax5calendar-sun-text-color: #C78B81 !default;
|
|
$ax5calendar-sat-text-color: #32B4DC !default;
|
|
|
|
$ax5calendar-date-bg: (#FFFFFF, #FFFFFF) !default;
|
|
$ax5calendar-date-text-color: #C3C4C6 !default;
|
|
$ax5calendar-live-bg: (#F0F0F0, #F0F0F0) !default;
|
|
$ax5calendar-live-text-color: #6D6E70 !default;
|
|
$ax5calendar-hover-bg: (#32B4DC, #32B4DC) !default;
|
|
$ax5calendar-hover-text-color: #fff !default;
|
|
$ax5calendar-focus-bg: (#E67241, #E67241) !default;
|
|
$ax5calendar-focus-text-color: #fff !default;
|
|
$ax5calendar-period-bg: (#82d3fa, #82d3fa) !default;
|
|
$ax5calendar-period-text-color: #fff !default;
|
|
|
|
|
|
$ax5calendar-item-day-radius: 5px !default;
|
|
$ax5calendar-item-month-radius: 5px !default;
|
|
$ax5calendar-item-year-radius: 5px !default;
|
|
|
|
@mixin extend-item-theme() {
|
|
&.holiday {
|
|
color: $ax5calendar-sun-text-color;
|
|
}
|
|
}
|
|
|
|
// mixins --------------------------------------------- end
|
|
|
|
@include keyframes(ax5-ui-calendar-fadeout) {
|
|
from {
|
|
opacity: 1.0;
|
|
}
|
|
to {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
@include keyframes(ax5-ui-calendar-fadein) {
|
|
from {
|
|
opacity: 0.5;
|
|
}
|
|
to {
|
|
opacity: 1.0;
|
|
}
|
|
}
|
|
|
|
.ax5-ui-calendar {
|
|
box-sizing: border-box;
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
position: relative;
|
|
.calendar-control {
|
|
position: relative;
|
|
box-sizing: content-box;
|
|
@include ax-background($ax5calendar-control-bg);
|
|
border: $ax5calendar-control-border;
|
|
border-radius: $ax5calendar-control-border-radius;
|
|
font-size: $ax5calendar-control-font-size;
|
|
margin-bottom: 5px;
|
|
padding: $ax5calendar-control-padding;
|
|
|
|
.date-move-left, .date-move-right {
|
|
display: block;
|
|
position: absolute;
|
|
overflow: hidden;
|
|
|
|
text-align: center;
|
|
font-size: ceil($ax5calendar-control-font-size * 1.2);
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
padding: $ax5calendar-control-padding;
|
|
i, span {
|
|
line-height: inherit;
|
|
}
|
|
}
|
|
|
|
.date-move-left {
|
|
left: 0px;
|
|
top: 0px;
|
|
}
|
|
.date-move-right {
|
|
right: 0px;
|
|
top: 0px;
|
|
}
|
|
.date-display {
|
|
text-align: center;
|
|
[data-calendar-display] {
|
|
margin: 0px 10px;
|
|
cursor: pointer;
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
color: $ax5calendar-control-text-color;
|
|
a {
|
|
color: $ax5calendar-control-text-color;
|
|
}
|
|
a:hover {
|
|
color: $ax5calendar-control-hover-text-color;
|
|
}
|
|
}
|
|
.calendar-body {
|
|
&.fadein {
|
|
@include animation($ax5calendar-body-animation-in 0.1s ease-in-out);
|
|
opacity: 1.0;
|
|
}
|
|
&.fadeout {
|
|
@include animation($ax5calendar-body-animation-out 0.1s ease-in-out);
|
|
opacity: 0.0;
|
|
}
|
|
|
|
table {
|
|
box-sizing: border-box;
|
|
table-layout: fixed;
|
|
border-collapse: collapse;
|
|
border-spacing: 0px;
|
|
border: 0px none;
|
|
thead {
|
|
td, th {
|
|
box-sizing: border-box;
|
|
vertical-align: middle;
|
|
line-height: 1em;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
font-size: $ax5calendar-header-font-size;
|
|
padding: $ax5calendar-header-padding;
|
|
border: $ax5calendar-header-border;
|
|
overflow: hidden;
|
|
@include ax-background($ax5calendar-header-bg);
|
|
|
|
color: $ax5calendar-live-text-color;
|
|
&.calendar-col-0 {
|
|
color: $ax5calendar-sun-text-color;
|
|
}
|
|
&.calendar-col-6 {
|
|
color: $ax5calendar-sat-text-color;
|
|
}
|
|
}
|
|
}
|
|
tbody {
|
|
td, th {
|
|
box-sizing: border-box;
|
|
vertical-align: middle;
|
|
line-height: 1em;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
font-size: $ax5calendar-body-font-size;
|
|
|
|
border: $ax5calendar-body-border;
|
|
@include ax-background($ax5calendar-body-bg);
|
|
|
|
overflow: hidden;
|
|
.calendar-item-day {
|
|
position: relative;
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
vertical-align: middle;
|
|
border-radius: $ax5calendar-item-day-radius;
|
|
overflow: hidden;
|
|
line-height: inherit;
|
|
@include ax-background($ax5calendar-date-bg);
|
|
color: $ax5calendar-date-text-color;
|
|
font-size: $ax5calendar-body-font-size;
|
|
|
|
span.addon {
|
|
position: absolute;
|
|
width: 100%;
|
|
text-align: center;
|
|
line-height: $ax5calendar-body-font-size * 0.8;
|
|
font-size: $ax5calendar-body-font-size * 0.8;
|
|
|
|
&.addon-header {
|
|
left: 0px;
|
|
top: 1px;
|
|
}
|
|
&.addon-footer {
|
|
left: 0px;
|
|
bottom: 1px;
|
|
}
|
|
}
|
|
|
|
&.live {
|
|
@include ax-background($ax5calendar-live-bg);
|
|
color: $ax5calendar-live-text-color;
|
|
span.addon {
|
|
color: #A1A1A1;
|
|
}
|
|
&.sunday {
|
|
color: $ax5calendar-sun-text-color;
|
|
}
|
|
&.saturday {
|
|
color: $ax5calendar-sat-text-color;
|
|
}
|
|
}
|
|
&.focus {
|
|
@include ax-background($ax5calendar-focus-bg);
|
|
color: $ax5calendar-focus-text-color;
|
|
span.addon {
|
|
color: $ax5calendar-focus-text-color;
|
|
}
|
|
&.hover {
|
|
@include ax-background($ax5calendar-hover-bg);
|
|
color: $ax5calendar-hover-text-color !important;
|
|
span.addon {
|
|
color: $ax5calendar-hover-text-color;
|
|
}
|
|
}
|
|
}
|
|
&.period {
|
|
@include ax-background($ax5calendar-period-bg);
|
|
color: $ax5calendar-period-text-color !important;
|
|
span.addon {
|
|
color: $ax5calendar-period-text-color;
|
|
}
|
|
}
|
|
&.selected-day {
|
|
@include ax-background($ax5calendar-hover-bg);
|
|
color: $ax5calendar-hover-text-color !important;
|
|
span.addon {
|
|
color: $ax5calendar-hover-text-color;
|
|
}
|
|
}
|
|
&.disable {
|
|
@include ax-background($ax5calendar-date-bg);
|
|
color: lighten($ax5calendar-date-text-color, 10%);
|
|
}
|
|
|
|
@include extend-item-theme();
|
|
}
|
|
.calendar-item-month {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
vertical-align: middle;
|
|
border-radius: $ax5calendar-item-month-radius;
|
|
overflow: hidden;
|
|
line-height: inherit;
|
|
@include ax-background($ax5calendar-date-bg);
|
|
color: $ax5calendar-date-text-color;
|
|
font-size: $ax5calendar-body-font-size;
|
|
|
|
&.live {
|
|
@include ax-background($ax5calendar-live-bg);
|
|
color: $ax5calendar-live-text-color;
|
|
}
|
|
&.hover {
|
|
@include ax-background($ax5calendar-hover-bg);
|
|
color: $ax5calendar-hover-text-color;
|
|
}
|
|
&.focus {
|
|
@include ax-background($ax5calendar-focus-bg);
|
|
color: $ax5calendar-focus-text-color;
|
|
}
|
|
&.selected-month {
|
|
@include ax-background($ax5calendar-hover-bg);
|
|
color: $ax5calendar-hover-text-color !important;
|
|
span.addon {
|
|
color: $ax5calendar-hover-text-color;
|
|
}
|
|
span.lunar {
|
|
color: $ax5calendar-hover-text-color;
|
|
}
|
|
}
|
|
&.disable {
|
|
@include ax-background($ax5calendar-date-bg);
|
|
color: lighten($ax5calendar-date-text-color, 10%);
|
|
}
|
|
@include extend-item-theme();
|
|
}
|
|
.calendar-item-year {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
vertical-align: middle;
|
|
border-radius: $ax5calendar-item-year-radius;
|
|
overflow: hidden;
|
|
line-height: inherit;
|
|
@include ax-background($ax5calendar-date-bg);
|
|
color: $ax5calendar-date-text-color;
|
|
font-size: $ax5calendar-body-font-size;
|
|
|
|
&.live {
|
|
@include ax-background($ax5calendar-live-bg);
|
|
color: $ax5calendar-live-text-color;
|
|
}
|
|
&.hover {
|
|
@include ax-background($ax5calendar-hover-bg);
|
|
color: $ax5calendar-hover-text-color;
|
|
}
|
|
&.focus {
|
|
@include ax-background($ax5calendar-focus-bg);
|
|
color: $ax5calendar-focus-text-color;
|
|
}
|
|
&.selected-year {
|
|
@include ax-background($ax5calendar-hover-bg);
|
|
color: $ax5calendar-hover-text-color !important;
|
|
span.addon {
|
|
color: $ax5calendar-hover-text-color;
|
|
}
|
|
span.lunar {
|
|
color: $ax5calendar-hover-text-color;
|
|
}
|
|
}
|
|
&.disable {
|
|
@include ax-background($ax5calendar-date-bg);
|
|
color: lighten($ax5calendar-date-text-color, 10%);
|
|
}
|
|
@include extend-item-theme();
|
|
}
|
|
|
|
/*
|
|
&.calendar-col-0 {
|
|
.calendar-item-day.live {
|
|
color: $ax5calendar-sun-text-color;
|
|
@include extend-item-theme();
|
|
}
|
|
}
|
|
&.calendar-col-6 {
|
|
.calendar-item-day.live {
|
|
color: $ax5calendar-sat-text-color;
|
|
@include extend-item-theme();
|
|
}
|
|
}
|
|
*/
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|