test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-11-30 11:08:45 +08:00
Code Issues Actions 68 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 {
display: flex;
justify-content: flex-end;
padding: 11px 16px 11px 0;
.@{calendar-prefix-cls}-year-select {
min-width: 85px;
}
padding: @padding-sm 0;
.@{calendar-prefix-cls}-month-select {
min-width: 70px;
margin-left: @padding-xs;
}
@ -40,7 +35,7 @@
}
.@{calendar-picker-prefix-cls}-body {
padding: @padding-xs @padding-sm;
padding: @padding-xs 0;
}
.@{calendar-picker-prefix-cls}-content {
@ -63,21 +58,6 @@
// ========================== 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 {
display: block;
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;
}
}
}
}
}