yqcloud-ui/lib/modal/style/sidebar.less

An enterprise-class UI design language and React-based implementation

@import "../../style/mixins/index";

@sidebar-prefix-cls: ~"@{ant-prefix}-modal-sidebar";
@modal-prefix-cls: ~"@{ant-prefix}-modal";

.@{sidebar-prefix-cls} {
  position: absolute;
  height: 100%;
  top: 0;
  bottom: 0;
  padding-bottom: 0;
  outline: 0;
  opacity: 0;
  width: 100%;
  transform-origin: 100% 0% !important;

  &&-open {
    opacity: 1;
  }
  .@{modal-prefix-cls}-content {
    left: 352px;
    position: absolute;
    height: 100%;
    padding: 0;
    width: calc(~"100% - 352px") !important;
    overflow: auto;
  }

  .@{modal-prefix-cls}-header {
    padding: 0 8px;
    height: @sidebar-header-height;
    min-height: @sidebar-header-height;
    border-bottom: @border-width-base @border-style-base @border-color-base;
    display: flex;
    width: 100%;
    flex-direction: row;
    align-items: center;
    white-space: nowrap;

    .@{modal-prefix-cls}-title {
      font-size: @sidebar-font-size-lg;
      letter-spacing: .005em;
      line-height: 24px;
      margin: 0 56px 0 16px;
    }
  }

  .@{modal-prefix-cls}-body {
    font-size: 100%;
    padding: 24px;
    position: relative;
    overflow: auto;
    max-height: calc(~"100% - 121px") !important;
  }

  .@{modal-prefix-cls}-footer {
    height: 56px;
    display: flex;
    box-sizing: border-box;
    flex-direction: row;
    align-items: center;
    white-space: nowrap;
    padding: 0 24px;
    border-top: @border-width-base @border-style-base @border-color-base;
    button + button {
      margin-left: 12px;
      margin-bottom: 0;
    }
    button.cancel {
      // color: @primary-color;
      color: @cancel-color;
    }
    .@{modal-prefix-cls}-btn-shanchux {
      // color: @primary-color;
      color: @cancel-color;
    }
  }
}