@cloudbase/weda-ui 0.2.17 → 1.0.21

package/src/web/components/navigationBar/index.css

@@ -0,0 +1,762 @@
+:root {
+  --weda-navigation-menu-hover-color: #f3f3f3;
+  --weda-navigation-menu-selected-color: #eaeaea;
+  --weda-navigation-menu-background-color: #fff;
+}
+/** PC 端左侧菜单 start*/
+.weda-menu {
+  display: inline-block;
+}
+
+.weda-menu .weda-menu__wrapper {
+  box-shadow: 2px 0px 6px rgba(0, 0, 0, 0.05);
+}
+
+.weda-menu .weda-menu__wrapper .weda-menu__menu-content {
+  width: 232px;
+  border-right: none;
+}
+
+.weda-menu
+  .wedatea2td-menu--light
+  .wedatea2td-menu__fold:hover
+  .wedatea2td-menu__fold-icon,
+.weda-menu
+  .wedatea2td-menu--light
+  .wedatea2td-menu__list
+  li.wedatea2td-menu__submenu.is-expanded:hover,
+.weda-menu
+  .wedatea2td-menu--light
+  .wedatea2td-menu__list
+  li.wedatea2td-menu__submenu.is-expanded
+  > .wedatea2td-menu__item,
+.weda-menu .wedatea2td-menu--light .wedatea2td-menu__submenu.is-expanded {
+  background-color: transparent;
+}
+
+.weda-menu
+  .weda-menu__wrapper
+  .weda-menu__menu-content
+  .wedatea2td-menu__title {
+  width: 100%;
+  display: flex;
+  padding: 20px;
+  height: auto;
+}
+
+.weda-menu
+  .weda-menu__wrapper
+  .weda-menu__menu-content
+  .wedatea2td-menu__title
+  .wedatea2td-menu__title-icon {
+  display: block;
+  width: 32px;
+  height: 32px;
+  margin-right: 12px;
+}
+
+.weda-menu
+  .weda-menu__wrapper
+  .weda-menu__menu-content
+  .wedatea2td-menu__title
+  .wedatea2td-h2 {
+  font-size: 16px;
+  line-height: 18px;
+  color: #000000;
+  margin-top: 0;
+  font-weight: normal;
+}
+
+.weda-menu .weda-menu__wrapper .weda-menu__menu-content .wedatea2td-menu__body {
+  width: 100%;
+  padding: 0 8px 30px 8px;
+}
+
+.weda-menu
+  .weda-menu__menu-content
+  .wedatea2td-menu__body
+  .wedatea2td-menu__item {
+  padding: 7px 0 7px 12px;
+  align-items: center;
+}
+
+.weda-menu
+  .weda-menu__menu-content
+  .wedatea2td-menu__body
+  .wedatea2td-menu__item
+  .wedatea2td-menu__list-icon {
+  width: 20px;
+  height: 20px;
+  margin-top: 0;
+}
+
+.weda-menu
+  .weda-menu__menu-content
+  .wedatea2td-menu__body
+  .wedatea2td-menu__item
+  .wedatea2td-menu__text {
+  font-weight: normal;
+  font-size: 14px;
+  line-height: 22px;
+  color: rgba(0, 0, 0, 0.9);
+  padding: 0;
+}
+
+.weda-menu .weda-menu__menu-content .wedatea2td-icon-arrowdown,
+.weda-menu
+  .weda-menu__menu-content
+  .wedatea2td-menu__submenu.is-expanded
+  .wedatea2td-icon-arrowdown {
+  background-image: url('https://imgcache.qq.com/qcloud/tcloud_dtc/static/static_source_business/4d3251a2-2fcd-4810-99a6-c8f69a258e09.svg');
+}
+.weda-menu
+  .weda-menu__menu-content
+  .wedatea2td-menu__body
+  .wedatea2td-menu__submenu
+  .wedatea2td-menu__list {
+  padding: 0;
+}
+
+.weda-menu
+  .weda-menu__menu-content
+  .wedatea2td-menu__body
+  .wedatea2td-menu__submenu
+  .wedatea2td-menu__item::before {
+  display: none;
+}
+
+.weda-menu
+  .weda-menu__menu-content
+  .wedatea2td-menu__body
+  .wedatea2td-menu__list
+  .is-selected
+  .wedatea2td-menu__item {
+  background: var(--weda-navigation-menu-selected-color);
+  border-radius: 3px;
+}
+.wedatea2td-drawer
+  .wedatea2td-menu--light
+  .wedatea2td-menu__list
+  .is-selected
+  .wedatea2td-menu__item {
+  background: var(--weda-navigation-menu-selected-color);
+}
+.weda-menu
+  .wedatea2td-menu--light
+  .wedatea2td-menu__list
+  li
+  .wedatea2td-menu__item:hover {
+  background-color: var(--weda-navigation-menu-hover-color);
+  border-radius: 3px;
+}
+
+.weda-menu
+  .wedatea2td-menu--light
+  .wedatea2td-menu__list
+  li.is-selected
+  > .wedatea2td-menu__item:hover {
+  background-color: var(--weda-navigation-menu-hover-color);
+}
+.wedatea2td-drawer
+  .wedatea2td-menu--light
+  .wedatea2td-menu__list
+  li
+  .wedatea2td-menu__item:hover {
+  background-color: var(--weda-navigation-menu-hover-color);
+}
+.weda-menu
+  .weda-menu__menu-content
+  .wedatea2td-menu__body
+  .wedatea2td-menu__submenu
+  .wedatea2td-menu__list
+  .wedatea2td-menu__item {
+  padding-left: 40px;
+}
+
+.weda-menu
+  .weda-menu__menu-content
+  .wedatea2td-menu__body
+  .weda-menu__submenu
+  .wedatea2td-menu__list
+  .wedatea2td-menu__item {
+  padding-left: 56px;
+}
+
+.weda-menu
+  .weda-menu__menu-content
+  .wedatea2td-menu__submenu
+  .wedatea2td-menu__list
+  .wedatea2td-menu__item
+  .wedatea2td-menu__text,
+.weda-menu
+  .weda-menu__menu-content
+  .wedatea2td-menu__submenu
+  .weda-menu__submenu
+  .wedatea2td-menu__list
+  .wedatea2td-menu__item
+  .wedatea2td-menu__text {
+  color: rgba(0, 0, 0, 0.6);
+}
+
+.weda-menu
+  .weda-menu__menu-content
+  .wedatea2td-menu__submenu
+  .weda-menu__submenu
+  .wedatea2td-menu__item
+  .wedatea2td-menu__text {
+  color: rgba(0, 0, 0, 0.9);
+}
+
+.weda-menu
+  .wedatea2td-menu
+  .wedatea2td-menu__body
+  .wedatea2td-menu__submenu
+  .wedatea2td-menu__list
+  .is-selected
+  .wedatea2td-menu__item
+  .wedatea2td-menu__text,
+.weda-menu
+  .wedatea2td-menu
+  .wedatea2td-menu__body
+  .is-selected
+  .wedatea2td-menu__item
+  .wedatea2td-menu__text {
+  font-weight: normal;
+  color: rgba(0, 0, 0, 0.9);
+}
+.weda-menu .wedatea2td-menu__submenu.is-expanded .wedatea2td-menu__list {
+  display: none;
+}
+.weda-menu__drawer
+  .wedatea2td-menu__submenu.is-expanded
+  .wedatea2td-menu__list {
+  display: none;
+}
+.weda-menu__drawer .wedatea2td-menu__submenu .wedatea2td-menu__list {
+  display: none;
+}
+
+.weda-menu .weda-menu__submenu .wedatea2td-menu__list {
+  display: none;
+}
+.weda-menu__drawer
+  .wedatea2td-menu__submenu.is-expanded
+  .wedatea2td-icon-arrowdown {
+  transform: none;
+}
+.weda-menu .wedatea2td-menu__submenu.is-expanded .wedatea2td-icon-arrowdown {
+  transform: none;
+}
+.weda-menu__drawer
+  .wedatea2td-menu__submenu.is-expanded
+  > .wedatea2td-menu__item
+  .wedatea2td-icon-arrowdown {
+  transform: scaleY(-1);
+}
+.weda-menu
+  .wedatea2td-menu__submenu.is-expanded
+  > .wedatea2td-menu__item
+  .wedatea2td-icon-arrowdown {
+  transform: scaleY(-1);
+}
+.weda-menu .wedatea2td-menu__submenu.is-expanded > .wedatea2td-menu__list {
+  display: block;
+}
+.weda-menu__drawer
+  .wedatea2td-menu__submenu.is-expanded
+  > .wedatea2td-menu__list {
+  display: block;
+}
+/** PC 端左侧菜单 end*/
+/** PC 端顶部导航菜单 start*/
+.weda-menu-horizontal {
+  display: block;
+}
+
+.weda-menu-horizontal .weda-menu__nav {
+  background: #ffffff;
+  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.05);
+  height: 64px;
+  padding: 0 16px 0 16px;
+}
+
+.weda-menu-horizontal .weda-menu__nav .weda-menu__nav-logo {
+  padding: 0;
+}
+
+.weda-menu-horizontal
+  .weda-menu__nav
+  .weda-menu__nav-logo
+  .weda-menu__nav-logo--img {
+  width: 100%;
+  height: 100%;
+}
+
+.weda-menu-horizontal .weda-menu__nav .weda-menu__nav-logo::before {
+  display: none;
+}
+
+.weda-menu-horizontal .weda-menu__nav .weda-menu__nav-title .weda-menu__title {
+  font-weight: normal;
+  font-size: 16px;
+  line-height: 18px;
+  color: #000000;
+  margin-left: 12px;
+}
+
+.weda-menu-horizontal .weda-menu__nav .wedatea2td-nav__flex-end {
+  margin-left: 20px;
+}
+
+.weda-menu-horizontal .weda-menu__nav .weda-menu__nav-wrap {
+  position: relative;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  width: calc(100vw - 300px);
+  margin: 0 40px;
+}
+
+.weda-menu-horizontal .weda-menu__nav .weda-menu__nav-shadow {
+  position: absolute;
+  height: 100%;
+  right: -36px;
+  width: 36px;
+  background: unset;
+  cursor: pointer;
+}
+.weda-menu-horizontal .weda-menu__nav .weda-menu__nav-shadow.leftButton {
+  left: -12px;
+}
+.weda-menu-horizontal
+  .weda-menu__nav
+  .weda-menu__nav-shadow.leftButton
+  .weda-menu__shadow--icon {
+  transform: rotate(180deg);
+}
+.weda-menu-horizontal .weda-menu__nav .weda-menu__shadow {
+  position: absolute;
+  width: 31px;
+  height: 52px;
+  left: 0;
+  top: 6px;
+  background: radial-gradient(
+    50% 50% at 50% 50%,
+    rgba(0, 0, 0, 0.05) 0%,
+    rgba(0, 0, 0, 0) 100%
+  );
+}
+.weda-menu-horizontal .weda-menu__nav .leftButton .weda-menu__shadow--white {
+  left: 14px;
+}
+.weda-menu-horizontal .weda-menu__nav .weda-menu__shadow--white {
+  position: absolute;
+  width: 17px;
+  left: 14px;
+  height: 100%;
+  background-color: unset;
+}
+.weda-menu-horizontal .weda-menu__nav .leftButton .weda-menu__shadow--icon {
+  left: -4px;
+}
+.weda-menu-horizontal .weda-menu__nav .weda-menu__shadow--icon {
+  position: absolute;
+  background-image: url('./chevron-right--double.svg');
+  width: 16px;
+  height: 16px;
+  right: 0;
+  top: calc((100% - 16px) / 2);
+}
+
+.weda-menu-horizontal .weda-menu__nav .weda-menu__nav-content {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.weda-menu-horizontal .weda-menu__nav .weda-menu__nav-content.box {
+  overflow: hidden;
+}
+.weda-menu-horizontal .weda-menu__nav .weda-menu__nav-item {
+  margin: 0 4px;
+  padding: 7px 12px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.weda-menu-horizontal .weda-menu__nav .weda-menu__nav-item:hover,
+.weda-menu-horizontal .weda-menu__nav .weda-menu__item-open {
+  background-color: var(--weda-navigation-menu-selected-color);
+  border-radius: 3px;
+}
+
+.weda-menu-horizontal .weda-menu__nav-item .weda-menu__item-icon {
+  width: 20px;
+  height: 20px;
+  margin-right: 4px;
+}
+.weda-menu-horizontal .weda-menu__item-val.wedatea2td-nav__dropdown {
+  height: auto;
+}
+
+.weda-menu-horizontal .weda-menu__item-val .wedatea2td-dropdown {
+  padding: 0;
+}
+.weda-menu-horizontal .wedatea2td-dropdown__header.wedatea2td-dropdown-default {
+  padding: 0 23px 0 0;
+  height: auto;
+}
+
+.weda-menu-horizontal .wedatea2td-dropdown .wedatea2td-dropdown__value {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 22px;
+  color: #000000;
+  white-space: nowrap;
+}
+
+.weda-menu-horizontal
+  .wedatea2td-dropdown__header.wedatea2td-dropdown-default
+  .wedatea2td-icon,
+.weda-menu-horizontal
+  .wedatea2td-nav__dropdown
+  .wedatea2td-dropdown__header:hover
+  .wedatea2td-icon-arrowdown {
+  right: 0;
+  top: calc((100% - 16px) / 2);
+  background-image: url('https://imgcache.qq.com/qcloud/tcloud_dtc/static/static_source_business/4d3251a2-2fcd-4810-99a6-c8f69a258e09.svg');
+}
+
+.weda-menu-horizontal .weda-menu__item-val.wedatea2td-nav__service span {
+  white-space: nowrap;
+}
+.weda-menu-horizontal .weda-menu__nav-item .weda-menu__item-val a,
+.weda-menu-horizontal
+  .weda-menu__nav-item
+  .weda-menu__dropdown
+  .wedatea2td-dropdown__value {
+  font-weight: normal;
+  font-size: 14px;
+  line-height: 22px;
+  color: #000000;
+  padding: 0;
+  white-space: nowrap;
+}
+
+.weda-menu-horizontal
+  .weda-menu__nav-item
+  .weda-menu__dropdown
+  .wedatea2td-dropdown__header {
+  padding-left: 0;
+  padding-right: 23px;
+  height: 22px;
+}
+
+.weda-menu-horizontal
+  .weda-menu__nav-item
+  .weda-menu__dropdown
+  .wedatea2td-dropdown__header.wedatea2td-dropdown__header:hover {
+  background-color: transparent;
+}
+
+.weda-menu-horizontal
+  .weda-menu__nav-item
+  .weda-menu__dropdown
+  .wedatea2td-icon {
+  right: 0;
+  top: calc((100% - 16px) / 2);
+}
+
+.weda-menu__nav-content::-webkit-scrollbar {
+  display: none;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+/* 横向导航栏dropdown */
+.weda-menu__dropdown .wedatea2td-dropdown-box {
+  padding: 0;
+  min-width: 200px;
+  background-color: var(--weda-navigation-menu-background-color);
+}
+.weda-menu__dropdown
+  .wedatea2td-dropdown-box
+  .wedatea2td-list--option
+  > li.is-selected {
+  background: var(--weda-navigation-menu-selected-color);
+}
+.weda-menu__dropdown .weda-menu__dropdown-menu-list {
+  background: #ffffff;
+  border-radius: 3px;
+  padding: 8px;
+  border: 0.5px solid var(--weda-navigation-menu-background-color);
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
+}
+
+.wedatea2td-nav__dropdown-box
+  .weda-menu__dropdown-menu-list.wedatea2td-list--option
+  > li {
+  display: flex;
+  align-items: center;
+}
+.weda-menu__dropdown .weda-menu__dropdown-list-item:hover,
+.weda-menu__dropdown .wedatea2td-list__submenu:hover {
+  background: var(--weda-navigation-menu-hover-color);
+  border-radius: 3px;
+}
+
+.weda-menu__dropdown .weda-menu__dropdown-list-item,
+.weda-menu__dropdown .wedatea2td-list__submenu {
+  padding: 9px 32px 9px 16px;
+}
+
+.weda-menu__dropdown-menu-list .weda-menu__dropdown-list-item {
+  margin-bottom: 4px;
+  color: rgba(0, 0, 0, 0.9);
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 22px;
+}
+
+.weda-menu__dropdown-menu-list .weda-menu__dropdown-list-item:last-child {
+  margin-bottom: 0;
+}
+
+.weda-menu__dropdown .weda-menu__dropdown-list-item::after,
+.weda-menu__dropdown .wedatea2td-list__submenu::after {
+  right: 24px;
+}
+
+/** PC 端顶部导航菜单 end*/
+
+/** mobile 端顶部导航菜单 start*/
+.weda-menu-mobile {
+  display: block;
+  position: relative;
+  z-index: 100;
+  width: 100%;
+}
+
+.weda-menu-mobile .weda-menu__wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 20px 0 16px;
+  height: 64px;
+  background-color: #fff;
+  position: relative;
+  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.05);
+}
+
+.weda-menu-mobile .weda-menu__bar-main {
+  flex: 1;
+  display: flex;
+  align-items: center;
+}
+
+.weda-menu-mobile .weda-menu__bar-main .weda-menu__main-logo {
+  font-weight: normal;
+  font-size: 18px;
+  line-height: 18px;
+  color: #000000;
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+}
+
+.weda-menu-mobile .weda-menu__bar-main .weda-menu__main-icon {
+  width: 32px;
+  height: 32px;
+  margin-right: 12px;
+}
+
+.weda-menu-mobile .weda-menu__bar-extra {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.weda-menu-mobile .weda-menu__bar-extra .weda-menu__bar-btn,
+.weda-menu-mobile .weda-menu__bar-extra .weda-menu__bar-btn--close {
+  width: 24px;
+  height: 24px;
+}
+
+.weda-menu__drawer {
+  top: 0 !important;
+  width: 100% !important;
+}
+
+.weda-menu__drawer .wedatea2td-drawer__header {
+  display: none;
+}
+
+.weda-menu__drawer .wedatea2td-drawer__body {
+  padding: 0;
+}
+
+.weda-menu__drawer .weda-menu__drawer-menu,
+.weda-menu__drawer .weda-menu__drawer-menu .wedatea2td-menu__body {
+  width: 100%;
+  border: none;
+}
+
+.weda-menu__drawer
+  .wedatea2td-menu--light
+  .wedatea2td-menu__fold:hover
+  .wedatea2td-menu__fold-icon,
+.weda-menu__drawer
+  .wedatea2td-menu--light
+  .wedatea2td-menu__list
+  li.wedatea2td-menu__submenu.is-expanded:hover,
+.weda-menu__drawer
+  .wedatea2td-menu--light
+  .wedatea2td-menu__list
+  li.wedatea2td-menu__submenu.is-expanded
+  > .wedatea2td-menu__item,
+.weda-menu__drawer
+  .wedatea2td-menu--light
+  .wedatea2td-menu__submenu.is-expanded {
+  background-color: transparent;
+}
+.weda-menu__drawer .weda-menu__drawer-menu .wedatea2td-menu__item {
+  padding: 14px 16px 16px 16px;
+  border-bottom: 1px solid;
+  border-color: rgba(160, 160, 160, 0.2);
+}
+
+.weda-menu__drawer .weda-menu__drawer-menu .wedatea2td-menu__list {
+  padding-bottom: 0;
+}
+
+.weda-menu__drawer .weda-menu__drawer-menu .wedatea2td-menu__item::before {
+  display: none;
+}
+
+.weda-menu__drawer
+  .weda-menu__drawer-menu
+  .wedatea2td-menu__submenu
+  .wedatea2td-menu__list
+  .wedatea2td-menu__item {
+  padding-left: 50px;
+}
+
+.weda-menu__drawer
+  .weda-menu__drawer-menu
+  .weda-menu__submenu
+  .wedatea2td-menu__list
+  .wedatea2td-menu__item {
+  padding-left: 70px;
+}
+
+.weda-menu__drawer .weda-menu__drawer-menu .wedatea2td-menu__list-icon {
+  width: 20px;
+  height: 20px;
+  margin-right: 4px;
+  margin-top: 0;
+}
+
+.weda-menu__drawer
+  .wedatea2td-menu__submenu
+  .wedatea2td-menu__list
+  .wedatea2td-menu__item:before {
+  display: none;
+}
+.weda-menu__drawer .weda-menu__drawer-menu .wedatea2td-menu__text,
+.weda-menu__drawer .weda-menu__drawer-menu .wedatea2td-menu__submenu,
+.wedatea2td-menu__item .wedatea2td-menu__text,
+.weda-menu__drawer
+  .wedatea2td-menu--light
+  .wedatea2td-menu__submenu.is-expanded
+  > .wedatea2td-menu__item
+  > .wedatea2td-menu__text,
+.weda-menu__drawer
+  .wedatea2td-menu--light
+  .wedatea2td-menu__submenu
+  .wedatea2td-menu__list
+  .wedatea2td-menu__text {
+  font-size: 16px;
+  line-height: 20px;
+  color: rgba(0, 0, 0, 0.9);
+  padding: 0;
+  max-width: 100%;
+  font-weight: normal;
+}
+
+.weda-menu__drawer
+  .weda-menu__drawer-menu
+  .wedatea2td-menu__submenu
+  .wedatea2td-menu__list
+  .wedatea2td-menu__text {
+  font-weight: normal;
+}
+.weda-menu__drawer .wedatea2td-menu .wedatea2td-icon-arrowdown {
+  top: 15px;
+}
+/** mobile 端顶部导航菜单 end*/
+
+.wedatea2td-menu__title .weda-menu__main-icon {
+  margin-right: 10px;
+}
+
+.weda-menu .menu-solt {
+  flex: 1;
+}
+.weda-menu .menu-solt ._wa-comp-slot-wrapper {
+  height: 100%;
+}
+
+.wedatea2td-drawer {
+  z-index: 1000;
+}
+.weda-menu {
+  overflow-y: auto;
+}
+.weda-menu .menu-solt {
+  overflow-y: auto;
+}
+.weda-menu__fonticon.lcap-icon,
+.weda-menu__fonticon.t-icon {
+  margin: 0 4px 0 0;
+  font-size: 14px;
+}
+.weda-menu__fonticon.lcap-icon:hover {
+  background-color: unset;
+}
+
+.weda-menu .wedatea2td-menu__text .menu-text {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.weda-menu__drawer .wedatea2td-menu__text .menu-text {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.weda-menu-mobile .weda-menu__wrapper .weda-menu__bar-main {
+  height: 64px;
+}
+.weda-menu__wrapper {
+  z-index: 1000;
+}
+.weda-menu-mobile .weda-menu__wrapper {
+  width: 100%;
+  z-index: 1000;
+}
+.wedatea2td-drawer.weda-menu__drawer {
+  z-index: 1000;
+  background-color: var(--weda-navigation-menu-background-color);
+}
+.weda-menu__drawer .wedatea2td-menu--light.wedatea2td-menu {
+  width: 100%;
+}
+.weda-menu__wrapper
+  .wedatea2td-dropdown__header.wedatea2td-dropdown-default:hover {
+  background-color: unset;
+}
+
+.weda-menu {
+  font-family: -apple-system-font, 'Helvetica Neue', sans-serif;
+}