fix(layout): up layout mix css level

ant-design · Apr 26, 2023 · 18e8157 · 18e8157
1 parent 336fc71
commit 18e8157
Show file tree

Hide file tree

Showing 8 changed files with 9,865 additions and 10,804 deletions.
diff --git a/index.css b/index.css
@@ -0,0 +1,162 @@
+.my-prefix-layout .my-prefix-sider {
+  position: relative;
+  background: transparent;
+  box-sizing: border-box;
+}
+.my-prefix-layout .my-prefix-sider-menu {
+  position: relative;
+  z-index: 10;
+  min-height: 100%;
+}
+.my-prefix-layout .my-prefix-sider .ant-layout-sider-children {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding-inline: 8px;
+  padding-block: 0;
+  border-inline-end: 1px solid rgba(5, 5, 5, 0.06);
+  margin-inline-end: -1px;
+}
+.my-prefix-layout .my-prefix-sider .ant-menu .ant-menu-item-group-title {
+  font-size: 12px;
+  padding-bottom: 4px;
+}
+.my-prefix-layout .my-prefix-sider .ant-menu .ant-menu-item:hover {
+  color: rgba(0, 0, 0, 0.88);
+}
+.my-prefix-layout .my-prefix-sider-logo {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-inline: 12px;
+  padding-block: 16px;
+  color: rgba(0, 0, 0, 0.65);
+  cursor: pointer;
+  border-block-end: 1px solid rgba(0, 0, 0, 0.06);
+}
+.my-prefix-layout .my-prefix-sider-logo > a {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 22px;
+  font-size: 22px;
+}
+.my-prefix-layout .my-prefix-sider-logo > a > img {
+  display: inline-block;
+  height: 22px;
+  vertical-align: middle;
+}
+.my-prefix-layout .my-prefix-sider-logo > a > h1 {
+  display: inline-block;
+  height: 22px;
+  margin-block: 0;
+  margin-inline-end: 0;
+  margin-inline-start: 6px;
+  color: rgba(0, 0, 0, 0.88);
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 22px;
+  vertical-align: middle;
+}
+.my-prefix-layout .my-prefix-sider-logo-collapsed {
+  flex-direction: column-reverse;
+  margin: 0;
+  padding: 12px;
+}
+.my-prefix-layout .my-prefix-sider-logo-collapsed .my-prefix-layout-apps-icon {
+  margin-block-end: 8px;
+  font-size: 16px;
+  transition: font-size 0.2s ease-in-out, color 0.2s ease-in-out;
+}
+.my-prefix-layout .my-prefix-sider-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-block: 4px;
+  margin-inline: 0;
+  color: rgba(0, 0, 0, 0.65);
+}
+.my-prefix-layout .my-prefix-sider-actions-collapsed {
+  flex-direction: column-reverse;
+  padding-block: 0;
+  padding-inline: 8px;
+  font-size: 16px;
+  transition: font-size 0.3s ease-in-out;
+}
+.my-prefix-layout .my-prefix-sider-actions-list {
+  color: rgba(0, 0, 0, 0.45);
+}
+.my-prefix-layout .my-prefix-sider-actions-list-collapsed {
+  margin-block-end: 8px;
+  animation-name: none;
+}
+.my-prefix-layout .my-prefix-sider-actions-list-item {
+  padding-inline: 6px;
+  padding-block: 6px;
+  line-height: 16px;
+  font-size: 16px;
+  cursor: pointer;
+  border-radius: 6px;
+}
+.my-prefix-layout .my-prefix-sider-actions-list-item:hover {
+  background: rgba(0, 0, 0, 0.06);
+}
+.my-prefix-layout .my-prefix-sider-actions-avatar {
+  font-size: 14px;
+  padding-inline: 8px;
+  padding-block: 8px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  border-radius: 6px;
+}
+.my-prefix-layout .my-prefix-sider-actions-avatar * {
+  cursor: pointer;
+}
+.my-prefix-layout .my-prefix-sider-actions-avatar:hover {
+  background: rgba(0, 0, 0, 0.06);
+}
+.my-prefix-layout .my-prefix-sider-hide-menu-collapsed {
+  inset-inline-start: -52px;
+  position: absolute;
+}
+.my-prefix-layout .my-prefix-sider-extra {
+  margin-block-end: 16px;
+  margin-block: 0;
+  margin-inline: 16px;
+}
+.my-prefix-layout .my-prefix-sider-extra-no-logo {
+  margin-block-start: 16px;
+}
+.my-prefix-layout .my-prefix-sider-links {
+  width: 100%;
+}
+.my-prefix-layout .my-prefix-sider-links ul {
+  height: auto;
+}
+.my-prefix-layout .my-prefix-sider-link-menu {
+  border: none;
+  box-shadow: none;
+  background: transparent;
+}
+.my-prefix-layout .my-prefix-sider-footer {
+  color: rgba(0, 0, 0, 0.45);
+  padding-block-end: 16px;
+  font-size: 14px;
+  animation-name: antBadgeLoadingCircle;
+  animation-duration: 0.3s;
+  animation-timing-function: ease;
+}
+.my-prefix-layout .my-prefix-sider.my-prefix-sider-fixed {
+  position: fixed;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  z-index: 100;
+  height: 100%;
+}
+.my-prefix-layout .my-prefix-sider.my-prefix-sider-fixed-mix {
+  height: calc(100% - 56px);
+  inset-block-start: 56px;
+}
diff --git a/packages/layout/src/components/SiderMenu/SiderMenu.tsx b/packages/layout/src/components/SiderMenu/SiderMenu.tsx
@@ -217,6 +217,7 @@ const SiderMenu: React.FC<SiderMenuProps & PrivateSiderMenuProps> = (props) => {
 
   const siderClassName = classNames(`${baseClassName}`, hashId, {
     [`${baseClassName}-fixed`]: fixSiderbar,
+    [`${baseClassName}-fixed-mix`]: layout === 'mix' && !isMobile && fixSiderbar,
     [`${baseClassName}-collapsed`]: props.collapsed,
     [`${baseClassName}-layout-${layout}`]: layout && !isMobile,
     [`${baseClassName}-light`]: theme !== 'dark',

diff --git a/packages/layout/src/components/SiderMenu/style/index.ts b/packages/layout/src/components/SiderMenu/style/index.ts
@@ -30,13 +30,7 @@ const genSiderMenuStyle: GenerateStyle<SiderMenuToken> = (token) => {
           zIndex: 10,
           minHeight: '100%',
         },
-        '&-fixed': {
-          position: 'fixed',
-          insetBlockStart: 0,
-          insetInlineStart: 0,
-          zIndex: '100',
-          height: '100%',
-        },
+
         [`${token.antCls}-layout-sider-children`]: {
           position: 'relative',
           display: 'flex',
@@ -153,10 +147,7 @@ const genSiderMenuStyle: GenerateStyle<SiderMenuToken> = (token) => {
           insetInlineStart: `-${token.proLayoutCollapsedWidth - 12}px`,
           position: 'absolute',
         },
-        '&-mix': {
-          height: `calc(100% - ${token?.layout?.header?.heightLayoutHeader || 56}px)`,
-          insetBlockStart: `${token?.layout?.header?.heightLayoutHeader || 56}px`,
-        },
+
         '&-extra': {
           marginBlockEnd: 16,
           marginBlock: 0,
@@ -185,6 +176,17 @@ const genSiderMenuStyle: GenerateStyle<SiderMenuToken> = (token) => {
           animationTimingFunction: 'ease',
         },
       },
+      [`${token.componentCls}${token.componentCls}-fixed`]: {
+        position: 'fixed',
+        insetBlockStart: 0,
+        insetInlineStart: 0,
+        zIndex: '100',
+        height: '100%',
+        '&-mix': {
+          height: `calc(100% - ${token?.layout?.header?.heightLayoutHeader || 56}px)`,
+          insetBlockStart: `${token?.layout?.header?.heightLayoutHeader || 56}px`,
+        },
+      },
     },
   };
 };