fix(theme): fix missing xl style in vertical (#1506)

Author: cipchk

packages/theme/docs/global.en-US.md

@@ -39,6 +39,10 @@ title: Global Parameters
 | `@drawer-md` | `500px` | Medium drawer |
 | `@drawer-lg` | `900px` | Large drawer |
 | `@drawer-lg` | `1200px` | Extra large drawer |
+| `@drawer-sm-height` | `200px` | Small drawer for height |
+| `@drawer-md-height` | `400px` | Medium drawer for height |
+| `@drawer-lg-height` | `600px` | Large drawer for height |
+| `@drawer-xl-height` | `800px` | Extra large drawer for height |
 | `@code-border-color` | `#eee` | `<code>` border color |
 | `@code-bg` | `#f7f7f7` | `<code>` background color |
 | `@widths`  | `xs @layout-gutter * 10`<br>`sm @layout-gutter * 20`<br>`md @layout-gutter * 30`<br>`lg @layout-gutter * 40`<br>`xl @layout-gutter * 50`<br>`xxl @layout-gutter * 50` | width |

packages/theme/docs/global.zh-CN.md

@@ -39,6 +39,10 @@ title: 全局参数
 | `@drawer-md` | `500px` | 中号抽屉 |
 | `@drawer-lg` | `900px` | 大号抽屉 |
 | `@drawer-xl` | `1200px` | 超大号抽屉 |
+| `@drawer-sm-height` | `200px` | 小号抽屉 |
+| `@drawer-md-height` | `400px` | 中号抽屉 |
+| `@drawer-lg-height` | `600px` | 大号抽屉 |
+| `@drawer-xl-height` | `800px` | 超大号抽屉 |
 | `@code-border-color` | `#eee` | `<code>` 边框颜色 |
 | `@code-bg` | `#f7f7f7` | `<code>` 背景颜色 |
 | `@widths`  | `xs @layout-gutter * 10`<br>`sm @layout-gutter * 20`<br>`md @layout-gutter * 30`<br>`lg @layout-gutter * 40`<br>`xl @layout-gutter * 50`<br>`xxl @layout-gutter * 50` | 宽度 |

packages/theme/system/antd/_drawer.less

@@ -7,7 +7,7 @@
         max-width: @drawer-sm;
       }
     }
-    @media (max-width: @drawer-sm - 1) {
+    @media (max-width: (@drawer-sm - 1)) {
       .drawer-sm {
         width: 100% !important;
       }
@@ -19,7 +19,7 @@
         max-width: @drawer-md;
       }
     }
-    @media (max-width: @drawer-md - 1) {
+    @media (max-width: (@drawer-md - 1)) {
       .drawer-md {
         width: 100% !important;
       }
@@ -31,7 +31,7 @@
         max-width: @drawer-lg;
       }
     }
-    @media (max-width: @drawer-lg - 1) {
+    @media (max-width: (@drawer-lg - 1)) {
       .drawer-lg {
         width: 100% !important;
       }
@@ -43,12 +43,63 @@
         max-width: @drawer-xl;
       }
     }
-    @media (max-width: @drawer-xl - 1) {
+    @media (max-width: (@drawer-xl - 1)) {
       .drawer-xl {
         width: 100% !important;
       }
     }
   }
+
+  &-top,
+  &-bottom {
+    @media (min-height: @drawer-sm-height) {
+      .drawer-sm {
+        height: auto !important;
+        max-height: @drawer-sm-height;
+      }
+    }
+    @media (max-height: (@drawer-sm-height - 1)) {
+      .drawer-sm {
+        height: 100% !important;
+      }
+    }
+
+    @media (min-height: @drawer-md-height) {
+      .drawer-md {
+        height: auto !important;
+        max-height: @drawer-md-height;
+      }
+    }
+    @media (max-height: (@drawer-md-height - 1)) {
+      .drawer-md {
+        height: 100% !important;
+      }
+    }
+
+    @media (min-height: @drawer-lg-height) {
+      .drawer-lg {
+        height: auto !important;
+        max-height: @drawer-lg-height;
+      }
+    }
+    @media (max-height: (@drawer-lg-height - 1)) {
+      .drawer-lg {
+        height: 100% !important;
+      }
+    }
+
+    @media (min-height: @drawer-xl-height) {
+      .drawer-xl {
+        height: auto !important;
+        max-height: @drawer-xl-height;
+      }
+    }
+    @media (max-height: (@drawer-xl-height - 1)) {
+      .drawer-xl {
+        height: 100% !important;
+      }
+    }
+  }
 }
 
 .drawer {

packages/theme/system/theme-default.less

@@ -174,6 +174,10 @@
 @drawer-lg: 900px;
 @drawer-md: 600px;
 @drawer-sm: 300px;
+@drawer-xl-height: 800px;
+@drawer-lg-height: 600px;
+@drawer-md-height: 400px;
+@drawer-sm-height: 200px;
 
 @modal-xl: 1200px;
 @modal-lg: 900px;