fix(web): keep jalali day cells inside calendar panel
This commit is contained in:
@@ -867,10 +867,11 @@ onBeforeUnmount(() => {
|
||||
.panel {
|
||||
position: fixed;
|
||||
z-index: 120;
|
||||
box-sizing: border-box;
|
||||
width: min(20.5rem, calc(100vw - 16px));
|
||||
/* تقویم باید یکجا دیده شود؛ اسکرول داخل پنل گیجکننده است */
|
||||
max-height: none;
|
||||
overflow: visible;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
border-radius: var(--radius);
|
||||
box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18);
|
||||
@@ -921,19 +922,22 @@ onBeforeUnmount(() => {
|
||||
padding: 0.25rem 0;
|
||||
}
|
||||
|
||||
.pick-cell {
|
||||
height: 44px;
|
||||
.panel :deep(.pick-cell.ant-btn) {
|
||||
width: 100% !important;
|
||||
min-width: 0 !important;
|
||||
height: 44px !important;
|
||||
padding-inline: 0 !important;
|
||||
border-radius: var(--radius);
|
||||
color: #0f172a;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.pick-cell.today {
|
||||
.panel :deep(.pick-cell.today) {
|
||||
box-shadow: inset 0 0 0 1px #99f6e4;
|
||||
}
|
||||
|
||||
.pick-cell.on,
|
||||
.pick-cell:hover {
|
||||
.panel :deep(.pick-cell.on),
|
||||
.panel :deep(.pick-cell.ant-btn:hover) {
|
||||
background: #0d9488;
|
||||
color: #fff;
|
||||
}
|
||||
@@ -957,8 +961,10 @@ onBeforeUnmount(() => {
|
||||
.week,
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
grid-template-columns: repeat(7, minmax(0, 1fr));
|
||||
gap: 0.15rem;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.week span {
|
||||
@@ -968,31 +974,43 @@ onBeforeUnmount(() => {
|
||||
padding-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.day {
|
||||
height: 34px;
|
||||
.panel :deep(.day.ant-btn) {
|
||||
width: 100% !important;
|
||||
min-width: 0 !important;
|
||||
height: 34px !important;
|
||||
padding: 0 !important;
|
||||
border: 0;
|
||||
border-radius: var(--radius);
|
||||
background: none;
|
||||
color: #0f172a;
|
||||
font: inherit;
|
||||
font-size: 0.82rem;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.day.mute {
|
||||
.panel :deep(.day.ant-btn > span) {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.panel :deep(.day.mute) {
|
||||
color: #cbd5e1;
|
||||
}
|
||||
|
||||
.day.today {
|
||||
.panel :deep(.day.today) {
|
||||
box-shadow: inset 0 0 0 1px #99f6e4;
|
||||
}
|
||||
|
||||
.day.on,
|
||||
.day:hover {
|
||||
.panel :deep(.day.on),
|
||||
.panel :deep(.day.ant-btn:hover) {
|
||||
background: #0d9488;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.day.mute:hover {
|
||||
.panel :deep(.day.mute:hover) {
|
||||
background: #f1f5f9;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user