* Copyright (c) 2022 - present TinyVue Authors.
* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
*
* Use of this source code is governed by an MIT-style license.
*
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
*
*/
@import '../mixins/common.less';
@import '../custom.less';
@import './vars.less';
@calendar-view-prefix-cls: ~'@{css-prefix}calendar-view';
.@{calendar-view-prefix-cls} {
.inject-CalendarView-vars();
width: 100%;
height: auto;
padding-top: var(--tv-CalendarView-padding);
border: 1px solid var(--tv-CalendarView-date-border-color);
background-color: var(--tv-CalendarView-bg-color);
overflow: auto;
border-bottom: none;
&__header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 18px;
padding: 0 var(--tv-CalendarView-padding);
}
&__header div:first-child {
flex-grow: 1;
}
&__picker {
flex-shrink: 0;
margin-right: var(--tv-CalendarView-picker-right-bottom);
}
&__radio {
flex-shrink: 0;
.tiny-radio-button__inner {
height: 32px;
&:hover {
background-color: var(--tv-CalendarView-radio-icon-bg-hover);
}
svg {
width: var(--tv-CalendarView-radio-font-size);
height: var(--tv-CalendarView-radio-font-size);
fill: var(--tv-CalendarView-radio-icon-color);
}
}
.is-active {
.tiny-radio-button__inner {
background-color: var(--tv-CalendarView-radio-active-inner-bg-color);
border: 1px solid var(--tv-CalendarView-radio-active-border-color);
svg {
fill: var(--tv-CalendarView-radio-active-icon-color);
}
}
}
}
.@{calendar-view-prefix-cls}-month {
&__header {
display: flex;
position: relative;
justify-content: space-around;
height: 40px;
.header-left {
height: 100%;
display: flex;
align-items: center;
position: absolute;
left: 32px;
cursor: pointer;
> svg {
fill: var(--tv-CalendarView-header-icon-color);
}
}
.header-main {
display: flex;
justify-content: space-around;
flex: 1;
height: 100%;
> li {
line-height: 40px;
> span {
font-size: var(--tv-CalendarView-header-main-font-size);
color: var(--tv-CalendarView-header-main-text-color);
}
}
}
.header-right {
height: 100%;
display: flex;
align-items: center;
position: absolute;
right: 32px;
cursor: pointer;
> svg {
fill: var(--tv-CalendarView-header-icon-color);
}
}
}
&__main {
width: 100%;
overflow: hidden;
border-top: 1px solid var(--tv-CalendarView-date-border-color);
.main-container {
width: 100%;
margin-top: var(--tv-CalendarView-main-margin-top);
> ul {
width: 100%;
display: flex;
justify-content: space-around;
border-bottom: 1px solid var(--tv-CalendarView-date-border-color);
> li {
font-size: var(--tv-CalendarView-main-li-font-size);
padding: var(--tv-CalendarView-main-li-padding) 0;
position: relative;
height: 80px;
overflow: hidden;
border-right: 1px solid var(--tv-CalendarView-date-border-color);
background-color: var(--tv-CalendarView-main-li-bg-color);
&.is-selected {
background-color: var(--tv-CalendarView-li-selected-bg-color);
}
&.not-selected:hover {
background-color: var(--tv-CalendarView-bg-color-unselected-hover);
}
&.bg-blue {
background-color: rgba(0, 103, 209, 0.1);
}
&.bg-green {
background-color: rgba(0, 168, 116, 0.1);
}
&.bg-red {
background-color: rgba(235, 23, 31, 0.1);
}
&.bg-yellow {
background-color: rgba(243, 105, 0, 0.1);
}
&.bg-purple {
background-color: rgba(116, 94, 246, 0.1);
}
&.bg-cyan {
background-color: rgba(0, 162, 181, 0.1);
}
&.bg-grey {
background-color: rgba(141, 149, 158, 0.3);
}
}
}
ul li:last-of-type {
border-right: none;
}
.day-selected {
position: absolute;
top: 0;
right: 0;
background-color: var(--tv-CalendarView-selected-bg-color-hover);
> svg {
width: var(--tv-CalendarView-selected-icon-size);
height: var(--tv-CalendarView-selected-icon-size);
fill: var(--tv-CalendarView-selected-icon-color);
position: relative;
}
}
.date {
margin-left: var(--tv-CalendarView-date-margin-left);
color: var(--tv-CalendarView-date-text-color);
&.is-next-or-last {
color: var(--tv-CalendarView-date-weaken-text-color);
}
&.is-selected {
color: var(--tv-CalendarView-date-selected-text-color);
}
&.is-disabled {
color: var(--tv-CalendarView-text-color-disabled);
}
}
.day-events {
overflow-y: auto;
width: 100%;
&::-webkit-scrollbar {
width: 0;
height: 0;
}
.events-container {
margin-bottom: var(--tv-CalendarView-event-container-margin-bottom);
}
.events-start {
padding: 0 var(--tv-CalendarView-event-start-padding);
&.multi-day {
padding-right: 0;
}
}
.events-title {
width: 100%;
display: inline-block;
font-size: var(--tv-CalendarView-event-title-font-size);
line-height: 17px;
color: var(--tv-CalendarView-event-title-text-color);
padding: 0 10px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
&.theme-blue {
border-left: 2px solid #1890ff;
background-color: rgba(0, 103, 209, 0.1);
}
&.theme-green {
border-left: 2px solid #00a874;
background-color: rgba(0, 168, 116, 0.1);
}
&.theme-red {
border-left: 2px solid #eb171f;
background-color: rgba(235, 23, 31, 0.1);
}
&.theme-yellow {
border-left: 2px solid #f36900;
background-color: rgba(243, 105, 0, 0.1);
}
&.theme-purple {
border-left: 2px solid #745ef7;
background-color: rgba(116, 94, 246, 0.1);
}
&.theme-cyan {
border-left: 2px solid #00a2b5;
background-color: rgba(0, 162, 181, 0.1);
}
&.theme-grey {
border-left: 2px solid #8d959e;
background-color: rgba(141, 149, 158, 0.3);
}
}
.events-end {
height: 20px;
line-height: 20px;
&.bg-blue {
background-color: rgba(0, 103, 209, 0.1);
}
&.bg-green {
background-color: rgba(0, 168, 116, 0.1);
}
&.bg-red {
background-color: rgba(235, 23, 31, 0.1);
}
&.bg-yellow {
background-color: rgba(243, 105, 0, 0.1);
}
&.bg-purple {
background-color: rgba(116, 94, 246, 0.1);
}
&.bg-cyan {
background-color: rgba(0, 162, 181, 0.1);
}
&.bg-grey {
background-color: rgba(141, 149, 158, 0.3);
}
}
}
}
}
}
.@{calendar-view-prefix-cls}-week {
&__header {
display: flex;
justify-content: space-around;
align-items: center;
height: 40px;
}
.header-left {
margin-left: 32px;
flex-shrink: 0;
text-align: right;
cursor: pointer;
> svg {
fill: var(--tv-CalendarView-header-icon-color);
}
}
.header-right {
margin-right: 32px;
flex-shrink: 0;
text-align: left;
cursor: pointer;
> svg {
fill: var(--tv-CalendarView-header-icon-color);
}
}
.header-main {
display: flex;
justify-content: space-around;
flex: 1;
height: 100%;
> li {
line-height: 40px;
cursor: pointer;
.date {
position: relative;
margin-right: 10px;
font-size: var(--tv-CalendarView-week-date-font-size);
color: var(--tv-CalendarView-week-date-text-color);
&.is-today {
color: var(--tv-CalendarView-week-date-today-text-color);
}
&.current {
color: var(--tv-CalendarView-week-date-today-text-color);
}
}
.mark {
width: 6px;
height: 6px;
position: absolute;
bottom: -8px;
left: var(--tv-CalendarView-mark-left);
border-radius: var(--tv-CalendarView-mark-border-radius);
&.is-two-digit {
left: var(--tv-CalendarView-mark-digit-left);
}
&.mark-blue {
background-color: #1890ff;
}
&.mark-green {
background-color: #00a874;
}
&.mark-red {
background-color: var(--tv-CalendarView-mark-bg-color);
}
&.mark-yellow {
background-color: #f36900;
}
&.mark-purple {
background-color: #745ef7;
}
&.mark-cyan {
background-color: #00a2b5;
}
&.mark-grey {
background-color: #8d959e;
}
}
.week-day {
font-size: var(--tv-CalendarView-week-day-font-size);
color: #8d959e;
&.is-today {
color: var(--tv-CalendarView-week-date-today-text-color);
}
&.current {
color: var(--tv-CalendarView-week-date-today-text-color);
}
}
}
}
}
.@{calendar-view-prefix-cls}-week__timeline {
width: 100%;
height: 448px;
display: flex;
overflow-y: auto;
margin-top: var(--tv-CalendarView-timeline-margin-top);
.day-times {
width: 36px;
margin-left: 21px;
ul > li {
height: var(--tv-CalendarView-events-list-height);
padding: var(--tv-CalendarView-events-list-padding);
text-align: left;
border-bottom-width: var(--tv-CalendarView-timeline-li-border-width);
border-bottom-style: solid;
border-bottom-color: #fff;
&.is-odd-num {
border-bottom-color: #f5f6f8;
}
span {
font-size: var(--tv-CalendarView-timeline-span-font-size);
color: var(--tv-CalendarView-timeline-span-text-color);
}
}
}
.day-events {
flex: 1;
> ul {
width: 100%;
display: flex;
justify-content: space-around;
> li {
position: relative;
&.is-weekends {
background-color: rgba(245, 246, 248, 0.5);
}
}
}
.events-list {
> li {
position: relative;
height: var(--tv-CalendarView-events-list-height);
padding: var(--tv-CalendarView-events-list-padding);
list-style-type: none;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #f5f6f8;
&.is-even-num {
border-bottom-style: dashed;
}
&.is-scroll-list{
overflow-y: auto;
overflow-x: hidden;
&.is-scroll-list::-webkit-scrollbar {
width: 0;
height: 0;
}
}
}
.events-item {
font-size: var(--tv-CalendarView-events-item-font-size);
font-weight: var(--tv-CalendarView-events-item-font-weight);
width: 92%;
display: flex;
align-items: center;
padding: 0 6px;
top: 0;
left: 0;
z-index: 10;
line-height: 1.5;
border-radius: 2px;
color: var(--tv-CalendarView-events-item-text-color);
margin-bottom: 1px;
&.theme-blue {
border-left: 2px solid #1890ff;
background-color: rgba(0, 103, 209, 0.1);
}
&.theme-green {
border-left: 2px solid #00a874;
background-color: rgba(0, 168, 116, 0.1);
}
&.theme-red {
border-left: 2px solid #eb171f;
background-color: rgba(235, 23, 31, 0.1);
}
&.theme-yellow {
border-left: 2px solid #f36900;
background-color: rgba(243, 105, 0, 0.1);
}
&.theme-purple {
border-left: 2px solid #745ef7;
background-color: rgba(116, 94, 246, 0.1);
}
&.theme-cyan {
border-left: 2px solid #00a2b5;
background-color: rgba(0, 162, 181, 0.1);
}
&.theme-grey {
border-left: 2px solid #8d959e;
background-color: rgba(141, 149, 158, 0.3);
}
}
}
}
}
.@{calendar-view-prefix-cls}-week__schedule {
width: 100%;
padding: 0 24px 16px 24px;
overflow-y: auto;
height: 448px;
> ul {
display: flex;
width: 100%;
> li {
height: 100%;
padding: var(--tv-CalendarView-week-li-padding-y) var(--tv-CalendarView-week-li-padding-x);
.title {
font-size: var(--tv-CalendarView-week-title-font-size);
font-weight: var(--tv-CalendarView-week-title-font-weight);
line-height: 20px;
}
.content {
font-size: var(--tv-CalendarView-week-content-font-size);
font-weight: var(--tv-CalendarView-week-content-font-weight);
line-height: 22px;
}
}
}
.day-events {
font-size: var(--tv-CalendarView-week-day-font-size);
padding: 6px 0;
height: auto;
border: 1px solid #e8ebef;
border-radius: var(--tv-CalendarView-week-day-border-radius);
margin-bottom: var(--tv-CalendarView-week-day-margin-bottom);
box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.08);
.title {
padding: 0 6px;
margin-bottom: 6px;
border-left-width: 2px;
border-left-color: #1890ff;
}
.date {
margin-bottom: 6px;
padding: 0 var(--tv-CalendarView-week-date-padding-x);
color: var(--tv-CalendarView-week-date-text-color);
}
.content {
padding: 0 var(--tv-CalendarView-week-content-padding-x);
color: #8d959e;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
}
.new-schedule {
height: 32px;
text-align: center;
line-height: 32px;
width: 100%;
margin-top: var(--tv-CalendarView-week-schedule-margin-top);
border: 1px solid #e8ebef;
border-radius: var(--tv-CalendarView-week-schedule-border-radius);
cursor: pointer;
> svg {
width: var(--tv-CalendarView-week-schedule-icon-size);
height: var(--tv-CalendarView-week-schedule-icon-size);
vertical-align: sub;
fill: #8d959e;
}
> span {
margin-left: var(--tv-CalendarView-schedule-span-margin-left);
color: #8d959e;
}
}
}
}
.@{calendar-view-prefix-cls}-tooltip {
.inject-CalendarView-vars();
position: absolute;
max-width: 320px;
.tooltip-main {
overflow: auto;
max-height: 80vh;
padding: var(--tv-CalendarView-tooltip-title-font-size);
.title {
font-size: var(--tv-CalendarView-tooltip-title-font-size);
font-weight: var(--tv-CalendarView-tooltip-title-font-weight);
}
.date {
margin: 6px 0;
color: var(--tv-CalendarView-tooltip-date-text-color);
}
}
}