@ccs-design/rc-pro-component/lib/CcsProLayout/index.less

ccs design basic react component

// table buttons
.buttons {
  button:not(:last-child)::after {
    margin: 0 4px 0 6px;
    color: #e8e8e8;
    content: '|';
  }
  button {
    padding: 0;
    height: 24px;
  }
}

.ccs-prolayout {
  &-icon {
    font-size: 16;
  }

  &-table-content {
    margin: 10px;
  }

  &-table-header {
    margin: 10px;
  }

  &-title {
    padding: 10px 16px;
    font-weight: 500;
    font-size: 16px;
  }

  &-form {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    .ant-form-item {
      flex-wrap: nowrap;
    }
    .ant-form-item .ant-form-item-label {
      padding: 0;
    }
  }

  .ant-form-item-control {
    line-height: 0;
  }

  .ant-form-item {
    margin-bottom: 0;
  }

  .ant-input-number {
    width: 100%;
  }

  .ant-picker {
    width: 100%;
  }

  .ant-drawer-right.ant-drawer-open {
    width: 100%;
    transition: none;
  }
  .ant-drawer.ant-drawer-open .ant-drawer-mask {
    animation: none;
  }

  &-form-label {
    .ant-col-24.ant-form-item-label {
      padding: 0;
    }
  }
  &-breadcrumb {
    // height: 40px;
    margin: 10px 16px 16px 16px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    > :first-child {
      color: rgba(0, 0, 0, 0.85);
      font-weight: 600;
      font-size: 20px;
    }
  }
  &-simple-toolbar {
    padding: 0 6px 6px 6px;
    margin-top: 6px;
  }
  &-toolbar {
    padding: 0 16px 16px 16px;
    margin-top: 16px;
  }
}

.default-theme {
  .ccs-prolayout {
    table tbody {
      tr:nth-child(even) {
        background-color: #fcfdff;
      }
    }
    &-icon {
      color: rgba(0, 0, 0, 0.75);
    }
    &-table-content {
      background: #fff;
    }
    &-title {
      color: rgba(0, 0, 0, 0.85);
      border-bottom: 1px solid #f0f0f0;
      background: #fff;
    }
  }
}

.dark-theme {
  .ccs-prolayout {
    &-icon {
      color: #fff;
    }

    &-table-content {
      background: @dark-color-shallow;
    }

    &-title {
      color: rgba(255, 255, 255, 0.85);
      border-bottom: 1px solid @dark-border-color;
      background: @dark-color-shallow;
    }
    &-breadcrumb {
      background-color: #141414;
      > :first-child {
        color: rgba(255, 255, 255, 0.85);
      }
    }
  }
}