nubomed-ui 1.0.3 → 1.0.4

package/src/packages/components/Menu/index.scss

@@ -1,559 +0,0 @@
-:root {
-  --nb-menu-left-width: 360px;
-  --nb-menu-footer-height: 96px;
-  --nb-menu-header-height: 80px;
-  --nb-menu-gird-width: 1000px;
-  --nb-menu-gird-height: 640px;
-}
-
-.nb-menu--left {
-  width: var(--nb-menu-left-width);
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  border-right: 1px solid #cad0e0;
-  overflow-x: hidden;
-  overflow-y: auto;
-  padding: 24px 0;
-  background-color: #f4f6f9;
-
-  .nb-menu__title {
-    text-align: left;
-    font-size: 36px;
-    line-height: 47px;
-    margin-bottom: 24px;
-    padding: 0 30px;
-  }
-
-  .nb-menu__group {
-    width: 100%;
-  }
-
-  .nb-menu__group + .nb-menu__group {
-    margin-top: 24px;
-  }
-
-  .nb-menu__item {
-    min-height: 88px;
-    padding: 0 32px;
-    background-color: #fff;
-    position: relative;
-    overflow: hidden;
-    display: flex;
-    align-items: center;
-
-    &__icon {
-      width: 40px;
-      height: 40px;
-      margin-right: 16px;
-      color: inherit;
-    }
-
-    &__text {
-      flex: 1;
-      font-size: 28px;
-      line-height: 42px;
-      padding: 16px 16px 16px 0;
-      word-break: break-all;
-    }
-
-    &__count {
-      font-size: 28px;
-      line-height: 42px;
-      color: var(--nb-font-color-5);
-    }
-
-    &__arrow {
-      position: absolute;
-      top: 28px;
-      right: 16px;
-      width: 32px;
-      height: 32px;
-      color: #cad0e0;
-    }
-
-    // 选中
-    &--active {
-      background-color: var(--nb-theme-color);
-      color: #fff;
-
-      .nb-menu__item__count,
-      .nb-menu__item__arrow {
-        color: #ffffff !important;
-      }
-    }
-
-    // 选中且异常
-    &--abnormal {
-      background-color: var(--nb-abnormal-color);
-    }
-  }
-
-  .nb-menu__item + .nb-menu__item {
-    &::before {
-      content: '';
-      position: absolute;
-      left: 32px;
-      right: 0;
-      top: 0;
-      background-color: #f4f6f9;
-      height: 1px;
-    }
-  }
-}
-
-.nb-menu--footer {
-  width: 100%;
-  height: var(--nb-menu-footer-height);
-  background-color: var(--nb-font-color);
-  color: #ffffff;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow-y: hidden;
-  overflow-x: auto;
-
-  .nb-menu__item {
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    &__text {
-      height: 100%;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-
-      span {
-        background-color: #0f377a;
-        padding: 0 30px;
-        min-width: 200px;
-        height: 56px;
-        border-radius: 32px;
-        text-align: center;
-        font-size: 28px;
-        line-height: 56px;
-        box-sizing: border-box;
-        position: relative;
-      }
-
-      i {
-        position: absolute;
-        top: -8px;
-        right: -8px;
-        min-width: 32px;
-        height: 32px;
-        text-align: center;
-        line-height: 32px;
-        border-radius: 16px;
-        color: #fff;
-        background-color: var(--nb-abnormal-color);
-        font-style: normal;
-        font-size: 24px;
-        padding: 0 4px;
-      }
-    }
-
-    &__arrow {
-      width: 32px;
-      height: 32px;
-      margin: 0 16px;
-      color: #cad0e0;
-    }
-
-    &--active {
-      .nb-menu__item__text span {
-        background-color: var(--nb-theme-color);
-        font-family: var(--nb-font-bold-family);
-      }
-    }
-
-    &--disabled {
-      cursor: not-allowed;
-
-      .nb-menu__item__text span {
-        background-color: #122e67;
-        color: rgba(#ffffff, 0.2);
-      }
-    }
-
-    &--import {
-      .nb-menu__item__text span {
-        color: #f98900;
-        font-family: var(--nb-font-bold-family);
-      }
-    }
-  }
-}
-
-.nb-menu--header {
-  width: 100%;
-  height: var(--nb-menu-header-height);
-  background-color: var(--nb-font-color);
-  color: #ffffff;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  overflow-y: hidden;
-  overflow-x: auto;
-  color: #ffffff;
-  position: relative;
-  overflow: hidden;
-
-  .nb-menu__back {
-    padding: 0 20px 0 32px;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    .svg-icon {
-      width: 40px;
-      height: 40px;
-      margin-right: 4px;
-    }
-
-    &__text {
-      font-size: 32px;
-      line-height: 42px;
-      font-family: var(--nb-font-bold-family);
-    }
-  }
-
-  .nb-menu__logout {
-    padding: 0 32px 0 34px;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    .svg-icon {
-      width: 40px;
-      height: 40px;
-      margin-right: 4px;
-    }
-
-    &__text {
-      font-size: 32px;
-      line-height: 42px;
-      font-family: var(--nb-font-bold-family);
-    }
-  }
-
-  .nb-menu__title,
-  .nb-menu__menus {
-    height: 100%;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    z-index: 1;
-  }
-
-  .nb-menu__title {
-    width: fit-content;
-    text-align: center;
-    font-size: 32px;
-    line-height: 42px;
-    font-family: var(--nb-font-bold-family);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .nb-menu__menus {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    .nb-menu__item {
-      height: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      &__text {
-        height: 48px;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        background-color: #0f377a;
-        overflow: hidden;
-
-        span {
-          padding: 0 30px;
-          min-width: 200px;
-          height: 48px;
-          text-align: center;
-          font-size: 28px;
-          line-height: 48px;
-          box-sizing: border-box;
-          position: relative;
-        }
-
-        i {
-          position: absolute;
-          top: -8px;
-          right: -8px;
-          min-width: 32px;
-          height: 32px;
-          text-align: center;
-          line-height: 32px;
-          border-radius: 16px;
-          color: #fff;
-          background-color: var(--nb-abnormal-color);
-          font-style: normal;
-          font-size: 24px;
-          padding: 0 4px;
-        }
-      }
-
-      &--active {
-        .nb-menu__item__text span {
-          background-color: var(--nb-theme-color);
-          border-radius: 24px !important;
-        }
-      }
-
-      &--disabled {
-        cursor: not-allowed;
-
-        .nb-menu__item__text span {
-          background-color: #122e67;
-          color: rgba(#ffffff, 0.2);
-        }
-      }
-    }
-
-    .nb-menu__item:first-child .nb-menu__item__text {
-      border-radius: 24px 0 0 24px;
-    }
-
-    .nb-menu__item:last-child .nb-menu__item__text {
-      border-radius: 0 24px 24px 0;
-    }
-  }
-}
-
-.nb-menu--grid {
-  display: inline-flex;
-  flex-wrap: wrap;
-  width: var(--nb-menu-gird-width);
-  height: var(--nb-menu-gird-height);
-  overflow: hidden;
-  .nb-menu__item {
-    border-radius: 12px;
-    color: #fff;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    padding: 30px 30px 22px 30px;
-    box-sizing: border-box;
-    &__icon {
-      width: 56px;
-      height: 56px;
-    }
-    &__name {
-      font-size: 40px;
-      line-height: 60px;
-      word-break: break-all;
-    }
-    &__desc {
-      font-size: 18px;
-      line-height: 28px;
-      color: rgba(255, 255, 255, 0.7);
-    }
-  }
-  // 1个菜单
-  &--1 {
-    .nb-menu__item:nth-child(1) {
-      width: 480px;
-      height: 240px;
-      background: #009a82;
-      margin-right: 40px;
-    }
-  }
-  // 2个菜单
-  &--2 {
-    .nb-menu__item:nth-child(1) {
-      width: 480px;
-      height: 240px;
-      background: #009a82;
-      margin-right: 40px;
-    }
-    .nb-menu__item:nth-child(2) {
-      width: 480px;
-      height: 240px;
-      background: #B0529F;
-    }
-  }
-  // 3个菜单
-  &--3 {
-    .nb-menu__item:nth-child(1) {
-      width: 480px;
-      height: 240px;
-      background: #009a82;
-      margin-right: 40px;
-    }
-    .nb-menu__item:nth-child(2) {
-      width: 480px;
-      height: 240px;
-      background: #B0529F;
-    }
-    .nb-menu__item:nth-child(3) {
-      width: 420px;
-      height: 360px;
-      background: #5963AE;
-      margin-top: 40px;
-    }
-  }
-  // 4个菜单
-  &--4 {
-    .nb-menu__item:nth-child(1) {
-      width: 480px;
-      height: 240px;
-      background: #009a82;
-      margin-right: 40px;
-    }
-    .nb-menu__item:nth-child(2) {
-      width: 480px;
-      height: 360px;
-      background: #B0529F;
-    }
-    .nb-menu__item:nth-child(3) {
-      width: 480px;
-      height: 360px;
-      background: #5963AE;
-      margin-top: -80px;
-      margin-right: 40px;
-    }
-    .nb-menu__item:nth-child(4) {
-      width: 480px;
-      height: 240px;
-      background: #E5A354;
-      margin-top: 40px;
-    }
-  }
-  // 5个菜单
-  &--5 {
-    .nb-menu__item:nth-child(1) {
-      width: 480px;
-      height: 240px;
-      background: #009a82;
-      margin-right: 40px;
-    }
-    .nb-menu__item:nth-child(2) {
-      width: 220px;
-      height: 360px;
-      background: #B0529F;
-      margin-right: 40px;
-    }
-    .nb-menu__item:nth-child(3) {
-      width: 220px;
-      height: 360px;
-      background: #5963AE;
-    }
-    .nb-menu__item:nth-child(4) {
-      width: 480px;
-      height: 360px;
-      background: #E5A354;
-      margin-top: -80px;
-      margin-right: 40px;
-    }
-    .nb-menu__item:nth-child(5) {
-      width: 480px;
-      height: 240px;
-      background: #00A3B3;
-      margin-top: 40px;
-    }
-  }
-  // 6个菜单
-  &--6 {
-    .nb-menu__item:nth-child(1) {
-      width: 480px;
-      height: 240px;
-      background: #009a82;
-      margin-right: 40px;
-    }
-    .nb-menu__item:nth-child(2) {
-      width: 220px;
-      height: 360px;
-      background: #B0529F;
-      margin-right: 40px;
-    }
-    .nb-menu__item:nth-child(3) {
-      width: 220px;
-      height: 360px;
-      background: #5963AE;
-    }
-    .nb-menu__item:nth-child(4) {
-      width: 220px;
-      height: 360px;
-      background: #E5A354;
-      margin-top: -80px;
-      margin-right: 40px;
-    }
-    .nb-menu__item:nth-child(5) {
-      width: 220px;
-      height: 360px;
-      background: #5963AE;
-      margin-top: -80px;
-      margin-right: 40px;
-    }
-    .nb-menu__item:nth-child(6) {
-      width: 480px;
-      height: 240px;
-      background: #00A3B3;
-      margin-top: 40px;
-    }
-  }
-  // 7个菜单
-  &--7 {
-    .nb-menu__item:nth-child(1) {
-      width: 480px;
-      height: 240px;
-      background: #009a82;
-      margin-right: 40px;
-    }
-    .nb-menu__item:nth-child(2) {
-      width: 220px;
-      height: 360px;
-      background: #B0529F;
-      margin-right: 40px;
-    }
-    .nb-menu__item:nth-child(3) {
-      width: 220px;
-      height: 360px;
-      background: #5963AE;
-    }
-    .nb-menu__item:nth-child(4) {
-      width: 220px;
-      height: 360px;
-      background: #E5A354;
-      margin-top: -80px;
-      margin-right: 40px;
-    }
-    .nb-menu__item:nth-child(5) {
-      width: 220px;
-      height: 360px;
-      background: #5963AE;
-      margin-top: -80px;
-      margin-right: 40px;
-    }
-    .nb-menu__item:nth-child(6) {
-      width: 220px;
-      height: 240px;
-      background: #00A3B3;
-      margin-top: 40px;
-      margin-right: 40px;
-    }
-    .nb-menu__item:nth-child(7) {
-      width: 220px;
-      height: 240px;
-      background: #009A82;
-      margin-top: 40px;
-    }
-  }
-}