From 93415d0442fc2cc2ee95114cbfef557d59984035 Mon Sep 17 00:00:00 2001 From: Konv Suu <2583695112@qq.com> Date: Sat, 9 Sep 2023 09:20:46 +0800 Subject: [PATCH] docs: mobile drawer menu trigger (#6927) --- site/src/index.less | 84 +++----------------------------------- site/src/layouts/index.vue | 12 +++--- 2 files changed, 11 insertions(+), 85 deletions(-) diff --git a/site/src/index.less b/site/src/index.less index 042998d3d..fb9e5712f 100644 --- a/site/src/index.less +++ b/site/src/index.less @@ -1,19 +1,5 @@ @import './theme/static/index.less'; -.drawer { - position: fixed; - z-index: 9999; - -webkit-transition: width 0s ease 0.3s, height 0s ease 0.3s, - -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86); - transition: width 0s ease 0.3s, height 0s ease 0.3s, - -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86); - transition: width 0s ease 0.3s, height 0s ease 0.3s, - transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86); - transition: width 0s ease 0.3s, height 0s ease 0.3s, - transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86), - -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86); -} - .drawer > * { -webkit-transition: opacity 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86), -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86), @@ -31,14 +17,6 @@ -webkit-box-shadow 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86); } -.drawer.drawer-open { - -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86); - transition: -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86); - transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86); - transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86), - -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86); -} - .drawer .drawer-mask { background: #000; opacity: 0; @@ -63,12 +41,12 @@ } .drawer-handle { - position: absolute; - top: 72px; + position: fixed; + top: 100px; width: 41px; height: 40px; cursor: pointer; - z-index: 0; + z-index: 100; text-align: center; line-height: 40px; font-size: 16px; @@ -82,38 +60,9 @@ -ms-flex-align: center; align-items: center; background: #fff; -} - -.drawer-handle-icon { - width: 14px; - height: 2px; - background: #333; - position: relative; - -webkit-transition: background 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86); - transition: background 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86); -} - -.drawer-handle-icon:after, -.drawer-handle-icon:before { - content: ''; - display: block; - position: absolute; - background: #333; - width: 100%; - height: 2px; - -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86); - transition: -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86); - transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86); - transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86), - -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86); -} - -.drawer-handle-icon:before { - top: -5px; -} - -.drawer-handle-icon:after { - top: 5px; + -webkit-box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15); + box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15); + border-radius: 0 4px 4px 0; } .drawer-left, @@ -129,16 +78,6 @@ height: 100%; } -.drawer-left.drawer-open, -.drawer-right.drawer-open { - width: 100%; -} - -.drawer-left.drawer-open.no-mask, -.drawer-right.drawer-open.no-mask { - width: 0; -} - .drawer-left { top: 0; left: 0; @@ -146,14 +85,3 @@ .drawer-left .ant-drawer-body { padding: 0; } - -.drawer-left .drawer-handle { - right: -40px; - border-radius: 0 4px 4px 0; -} - -.drawer-left .drawer-handle, -.drawer-left.drawer-open .drawer-content-wrapper { - -webkit-box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15); - box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15); -} diff --git a/site/src/layouts/index.vue b/site/src/layouts/index.vue index 963eee737..9eae183e4 100644 --- a/site/src/layouts/index.vue +++ b/site/src/layouts/index.vue @@ -13,22 +13,20 @@