mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-08-06 16:06:28 +08:00
Code Issues Actions 17 Packages Projects Releases Wiki Activity

💄 optimize Calendar header style in small screen

Browse Source
This commit is contained in:
afc163 2020-03-03 14:44:26 +08:00 committed by 偏右
parent c8a8e5d95b
commit f287708db5
1 changed files with 30 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
components/calendar/style/index.less
View File

@ -12,14 +12,9 @@
&-header { &-header {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
padding: 11px 16px 11px 0; padding: @padding-sm 0;
.@{calendar-prefix-cls}-year-select {
min-width: 85px;
}
.@{calendar-prefix-cls}-month-select { .@{calendar-prefix-cls}-month-select {
min-width: 70px;
margin-left: @padding-xs; margin-left: @padding-xs;
} }
@ -40,7 +35,7 @@
} }
.@{calendar-picker-prefix-cls}-body { .@{calendar-picker-prefix-cls}-body {
padding: @padding-xs @padding-sm; padding: @padding-xs 0;
} }
.@{calendar-picker-prefix-cls}-content { .@{calendar-picker-prefix-cls}-content {
@ -63,21 +58,6 @@
// ========================== Full ========================== // ========================== Full ==========================
&-full { &-full {
.@{calendar-prefix-cls}-header {
.@{calendar-prefix-cls}-year-select {
width: 90px;
}
.@{calendar-prefix-cls}-month-select {
width: 80px;
margin-left: @padding-xs;
}
.@{calendar-prefix-cls}-mode-switch {
margin-left: @padding-md;
}
}
.@{calendar-picker-prefix-cls}-panel { .@{calendar-picker-prefix-cls}-panel {
display: block; display: block;
width: 100%; width: 100%;
@ -165,3 +145,31 @@
} }
} }
} }
@media only screen and (max-width: @screen-xs) {
.@{calendar-prefix-cls} {
&-header {
display: block;
.@{calendar-prefix-cls}-year-select {
width: 50%;
}
.@{calendar-prefix-cls}-month-select {
width: ~'calc(50% - @{padding-xs})';
}
.@{calendar-prefix-cls}-mode-switch {
width: 100%;
margin-top: @padding-xs;
margin-left: 0;
> label {
width: 50%;
text-align: center;
}
}
}
}
}