mirror of
https://github.com/kuaifan/dootask.git
synced 2026-01-03 18:28:11 +00:00
149 lines
4.0 KiB
SCSS
Vendored
149 lines
4.0 KiB
SCSS
Vendored
.home-calendar {
|
|
width: 100%;
|
|
height: 100%;
|
|
color: #555;
|
|
position: relative;
|
|
border-radius: 3px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: auto;
|
|
|
|
.calendar-header {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
.calendar-header-menu {
|
|
position: relative;
|
|
flex: 1;
|
|
font-size: 24px;
|
|
margin-left: 10px;
|
|
}
|
|
.calendar-header-back {
|
|
margin-left: 12px;
|
|
margin-right: 12px;
|
|
}
|
|
}
|
|
|
|
.scrollbar-content{
|
|
padding: 0 24px;
|
|
}
|
|
|
|
.calendar-content{
|
|
overflow: auto;
|
|
flex: 1;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.slide-up-enter-active,
|
|
.slide-up-leave-active {
|
|
transition: all 0.1s ease-out;
|
|
}
|
|
|
|
.slide-up-enter,
|
|
.slide-up-leave-to {
|
|
transform: translateY(-100%);
|
|
}
|
|
|
|
.calendar-loading {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 1;
|
|
background-color: rgba(55, 55, 55, .15);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.calendar-table {
|
|
width: 100%;
|
|
border: 0;
|
|
border-spacing: 0;
|
|
border-collapse: collapse;
|
|
table-layout: fixed;
|
|
th {
|
|
text-align: center;
|
|
height: 48px;
|
|
font-weight: 700;
|
|
opacity: 0.4;
|
|
}
|
|
td {
|
|
position: relative;
|
|
text-align: center;
|
|
font-size: 14px;
|
|
height: 46px;
|
|
.item-day {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
cursor: pointer;
|
|
position: relative;
|
|
> div {
|
|
width: 32px;
|
|
height: 32px;
|
|
line-height: 32px;
|
|
max-width: 100%;
|
|
padding: 0 4px;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
border-radius: 30px;
|
|
}
|
|
.badge{
|
|
width: 6px;
|
|
height: 6px;
|
|
background-color: #8FCE78;
|
|
border-radius: 100%;
|
|
position: absolute;
|
|
bottom: -2px;
|
|
}
|
|
}
|
|
&:last-child {
|
|
border-right: 0;
|
|
}
|
|
&.disabled {
|
|
color: #ccc;
|
|
background: none;
|
|
* {
|
|
color: #ccc;
|
|
}
|
|
}
|
|
&.today {
|
|
.item-day {
|
|
> div {
|
|
background-color: #8FCE78;
|
|
color: #fff;
|
|
}
|
|
.badge{
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
//
|
|
.calendar-tui{
|
|
overflow: auto;
|
|
flex: 1;
|
|
margin-top: 30px;
|
|
border-top: 1px solid #F2F2F2;
|
|
.tui-full-calendar-dayname-layout{
|
|
display: none;
|
|
}
|
|
.tui-full-calendar-left,.tui-full-calendar-timegrid-left{
|
|
width: 45px !important;
|
|
}
|
|
.tui-full-calendar-timegrid-right{
|
|
margin-left: 45px !important;
|
|
}
|
|
.tui-full-calendar-popup {
|
|
box-shadow: none;
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
}
|
|
}
|