@sdata/web-vue 2.3.1 → 2.8.0

package/es/layout/style/index.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /******** borderSize *******/
 /******** borderStyle *******/
 /******** radius *******/
@@ -15,229 +16,170 @@
 /******** link *******/
 /******** radius *******/
 /********* icon hover *********/
+/*****************************************************
+ * Layout 整体背景（容器主体与页脚共用）
+ *****************************************************/
+/*****************************************************
+ * Header
+ *****************************************************/
+/*****************************************************
+ * Footer
+ *****************************************************/
+/*****************************************************
+ * Sider
+ * 深色背景与 Menu 深色背景保持一致，避免内嵌菜单出现接缝
+ *****************************************************/
+/*****************************************************
+ * Sider light 主题
+ *****************************************************/
+/*****************************************************
+ * 公共
+ *****************************************************/
 .sd-layout {
   display: flex;
-  flex: 1;
+  flex: auto;
   flex-direction: column;
-  margin: 0;
-  padding: 0;
-}
-.sd-layout-sider {
-  position: relative;
-  flex: none;
-  width: auto;
-  max-width: 100%;
-  margin: 0;
-  padding: 0;
-  overflow: hidden;
-  background: var(--sd-color-menu-dark-bg);
-  transition: width 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), height 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
+  /* fix firefox can't set height smaller than content on flex item */
+  min-height: 0;
+  background: var(--sd-color-fill-1);
 }
-.sd-layout-sider-image, .sd-layout-sider-prepend, .sd-layout-sider-append {
-  flex: none;
-}
-.sd-layout-sider-children {
-  flex: 1;
-  height: 100%;
-  overflow: auto;
-}
-.sd-layout-sider-mask {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.45);
+.sd-layout, .sd-layout * {
+  box-sizing: border-box;
 }
-.sd-layout-sider-collapsed .sd-layout-sider-children {
-  /* width */
+.sd-layout.sd-layout-has-sider {
+  flex-direction: row;
 }
-.sd-layout-sider-collapsed .sd-layout-sider-children::-webkit-scrollbar {
+.sd-layout.sd-layout-has-sider > .sd-layout,
+.sd-layout.sd-layout-has-sider > .sd-layout-content {
   width: 0;
 }
-.sd-layout-sider-has-trigger {
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-  padding-bottom: 48px;
-}
-.sd-layout-sider-rail {
-  width: 56px;
+.sd-layout .sd-layout-header, .sd-layout.sd-layout-footer {
+  flex: 0 0 auto;
 }
-.sd-layout-sider-trigger {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  width: 100%;
-  height: 48px;
-  color: var(--sd-color-white);
-  background: rgba(255, 255, 255, 0.2);
-  cursor: pointer;
-  transition: width 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
+.sd-layout-rtl {
+  direction: rtl;
 }
-.sd-layout-sider-trigger-light {
+
+.sd-layout-header {
+  height: 64px;
+  padding: 0 50px;
   color: var(--sd-color-text-1);
-  background: var(--sd-color-menu-light-bg);
-  border-top: 1px solid var(--sd-color-bg-5);
-}
-.sd-layout-sider-floating {
-  box-shadow: none;
-}
-.sd-layout-sider-sticky {
-  z-index: 1;
-}
-.sd-layout-sider-temporary {
-  position: fixed;
-  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
-}
-.sd-layout-sider-temporary.sd-layout-sider-left {
-  top: 0;
-  bottom: 0;
-  left: 0;
-  transform: translateX(-100%);
-}
-.sd-layout-sider-temporary.sd-layout-sider-right {
-  top: 0;
-  right: 0;
-  bottom: 0;
-  transform: translateX(100%);
-}
-.sd-layout-sider-temporary.sd-layout-sider-top {
-  top: 0;
-  right: 0;
-  left: 0;
-  width: 100%;
-  transform: translateY(-100%);
+  line-height: 64px;
+  background: #001529;
 }
-.sd-layout-sider-temporary.sd-layout-sider-bottom {
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  transform: translateY(100%);
-}
-.sd-layout-sider-temporary.sd-layout-sider-active {
-  transform: translate(0, 0);
-}
-.sd-layout-sider-light {
-  background: var(--sd-color-menu-light-bg);
-  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.08);
-}
-.sd-layout-header {
-  position: relative;
-  flex: 0 0 auto;
-  box-sizing: border-box;
-  margin: 0;
-  overflow: hidden;
+
+.sd-layout-footer {
+  padding: 24px 50px;
   color: var(--sd-color-text-1);
-  background: var(--sd-color-bg-2);
-  border-bottom: 1px solid var(--sd-color-border-2);
-  transition: height 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), box-shadow 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
+  font-size: 14px;
+  background: var(--sd-color-fill-1);
 }
-.sd-layout-header-wrapper {
-  width: 100%;
+
+.sd-layout-content {
+  flex: auto;
+  min-height: 0;
+  color: var(--sd-color-text-1);
 }
-.sd-layout-header-bar, .sd-layout-header-extension, .sd-layout-header-prepend, .sd-layout-header-append, .sd-layout-header-content {
+
+.sd-layout-sider {
+  position: relative;
   display: flex;
-  align-items: center;
+  flex-direction: column;
+  min-width: 0;
+  background: var(--sd-color-menu-dark-bg);
+  transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), background 0s;
 }
-.sd-layout-header-bar {
-  position: relative;
-  z-index: 1;
-  gap: 16px;
-  min-height: var(--sd-layout-header-content-height, 64px);
-  padding: 0 20px;
+.sd-layout-sider-has-trigger {
+  padding-bottom: 44px;
 }
-.sd-layout-header-prepend, .sd-layout-header-append {
-  flex: none;
-  gap: 8px;
+.sd-layout-sider-right {
+  order: 1;
 }
-.sd-layout-header-title {
-  position: relative;
-  z-index: 1;
+.sd-layout-sider-header {
   flex: none;
-  max-width: min(40%, 480px);
-  overflow: hidden;
-  color: inherit;
-  font-weight: 600;
-  font-size: 18px;
-  white-space: nowrap;
-  text-overflow: ellipsis;
 }
-.sd-layout-header-content {
-  position: relative;
-  z-index: 1;
+.sd-layout-sider-children {
   flex: 1;
-  gap: 8px;
-  min-width: 0;
+  min-height: 0;
 }
-.sd-layout-header-extension {
-  position: relative;
+.sd-layout-sider-children-scroll {
+  overflow: hidden auto;
+}
+.sd-layout-sider-zero-width .sd-layout-sider-children {
+  overflow: hidden;
+}
+.sd-layout-sider-trigger {
+  position: absolute;
+  bottom: 0;
   z-index: 1;
-  gap: 8px;
-  min-height: var(--sd-layout-header-extension-height, 48px);
-  padding: 0 20px;
-  border-top: 1px solid var(--sd-color-border-2);
+  height: 44px;
+  color: var(--sd-color-white);
+  line-height: 44px;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
-.sd-layout-header-image {
+.sd-layout-sider-zero-width-trigger {
   position: absolute;
-  inset: 0;
-  overflow: hidden;
+  top: 64px;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  color: var(--sd-color-white);
+  font-size: 18px;
+  background: var(--sd-color-menu-dark-bg);
+  border-radius: 0 8px 8px 0;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+  inset-inline-end: -40px;
 }
-.sd-layout-header-image::after {
+.sd-layout-sider-zero-width-trigger::after {
   position: absolute;
   inset: 0;
-  background: linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.36));
+  background: transparent;
+  transition: all 0.3s;
   content: "";
 }
-.sd-layout-header-image-inner, .sd-layout-header-image :is(img, picture, video) {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  opacity: var(--sd-layout-header-image-opacity, 1);
-  transition: opacity 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
-}
-.sd-layout-header-flat {
-  box-shadow: none;
-}
-.sd-layout-header:not(.sd-layout-header-flat) {
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
-}
-.sd-layout-header-floating {
-  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.14);
-}
-.sd-layout-header-hidden {
-  pointer-events: none;
-}
-.sd-layout-header-collapsed .sd-layout-header-extension {
-  display: none;
+.sd-layout-sider-zero-width-trigger:hover::after {
+  background: rgba(255, 255, 255, 0.2);
 }
-.sd-layout-header-with-image {
-  color: var(--sd-color-white);
-  border-bottom-color: transparent;
+.sd-layout-sider-zero-width-trigger-right {
+  inset-inline-start: -40px;
+  border-radius: 8px 0 0 8px;
 }
-.sd-layout-header-with-image .sd-layout-header-extension {
-  border-top-color: rgba(255, 255, 255, 0.16);
+.sd-layout-sider-light {
+  background: var(--sd-color-bg-1);
 }
-.sd-layout-header-bottom {
-  border-top: 1px solid var(--sd-color-border-2);
-  border-bottom: 0;
+.sd-layout-sider-light .sd-layout-sider-trigger {
+  color: var(--sd-color-text-1);
+  background: var(--sd-color-bg-1);
 }
-.sd-layout-content {
-  flex: 1;
+.sd-layout-sider-light .sd-layout-sider-zero-width-trigger {
+  color: var(--sd-color-text-1);
+  background: var(--sd-color-bg-1);
+  border: 1px solid var(--sd-color-fill-1);
+  border-inline-start: 0;
 }
-.sd-layout-footer {
+.sd-layout-sider-temporary {
   flex: 0 0 auto;
-  margin: 0;
+  width: auto;
+  background: transparent;
 }
-
-.sd-layout-has-sider {
-  flex-direction: row;
+.sd-layout-sider-temporary-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  color: var(--sd-color-text-1);
+  font-size: 18px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
 }
-.sd-layout-has-sider > .sd-layout,
-.sd-layout-has-sider > .sd-layout-content {
-  overflow-x: hidden;
+.sd-layout-sider-temporary-trigger:hover {
+  background: var(--sd-color-fill-2);
 }