@d4sd/components/components/WorkspaceActionCard/styles.less

D4SD Component Library, extended from Ant-Design

@import "../../styles/vars.less";
.WorkspaceActionCardWrapper {
  border-radius: 10px;

  width: 600px;
  position: relative;
  transition: all 0.2s;
  .panelCard {


  }
  .arrow {
    position: absolute;
    top:18px;
    right:24px;
    transition: all 0.2s;
    transform: rotate(-90deg);
  }
  .arrow.collapsed {
    transform: rotate(0deg);
  }
  .WorkspaceActionCard {
    transition: all 0.2s;
    box-sizing: border-box;
    box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.45);
    background: white;
    border-radius: 10px !important;
    padding: 16px;
    padding-top:12px;
    .top {
      cursor: pointer;
    }
    .copy-container {
      width: 90%;
      display: flex;
      margin: auto;
      .copy-link {
        display: inline-block;
        vertical-align: middle;
        border: 2px solid @b3;
        border-radius: 10px 0px 0px 10px;
        border-right-width: 0px;
        line-height: 50px;
        font-size: 14px;
        height: 50px;
        padding: 0 18px;
        flex-grow: 1;
        color: @b1;
        span {
          top: -1px;
          position: relative;
        }
      }
      .d4sdbutton-wrapper {
        display: inline;
        // width: auto;
        max-width: 120px;
        vertical-align: middle;
        button {
          width: 100%;
          border-radius: 0px 10px 10px 0px;
        }
      }
    }
    width: 100%;
    font-size: 1rem;
    .share-feedback-wrapper {
      p {
        color: @b3;
        text-align: center;
        font-weight: 300;
        margin-top: 12px;

      }
    }
    .card-full-desc {
      margin: 0px;
      color: @b3;
      font-weight: 300;
      font-size: 1rem;
    }
    .card-short-desc {
      margin: 0px;
      color: @b3;
      font-weight: 300;
      font-size: 1rem;
    }
    .progressBar.warning .ant-progress-bg {
      background-color: @d4sd-secondary-color;
    }
    .progressBar.success .ant-progress-bg {
      background-color: @d4sd-success;
    }
    .progressBar.progressing .ant-progress-bg {
      background-color: @d4sd-color-two;
    }
    .card-title {
      font-size: 26px;
      font-family: 'Montserrat', 'Open Sans', sans-serif;
      margin-right: @margin-base * 4;
      color: @d4sd-color;
      cursor: pointer;
    }
    .card-status {
      text-align: right;
      .feedback-text {
        font-weight: bold;
        text-align: right;
        margin-bottom: 0px;
        color: @d4sd-secondary-color;
        font-family: 'Open Sans' sans-serif;
        display: inline;
        position: relative;
        right:0px;
        font-size: 14px;
      }
      .feedback-count {
        color: white;
        margin-right: @margin-base / 2;
        background-color: @d4sd-secondary-color;
        border-radius: 50%;
        text-align: center;
        width: 22px;
        font-weight: 400;
        display: inline-block;
        span {
          position: relative;
          top: 1px;
        }
      }
      .feedback-none  {
        .feedback-text {
          color: @d4sd-color-two;
        }
        .feedback-count {
          background-color: @d4sd-color-two;
        }
      }

      .no-submit, .submitted, .inprogress-submit, .feedback-submit {
        font-weight: bold;
        text-align: right;
        margin-bottom: 0px;
        color: @d4sd-secondary-color;
        font-family: 'Open Sans' sans-serif;
        display: inline;
        position: relative;
        right:0px;
        font-size: 14px;
      }
      .no-submit::before, .submitted::before, .inprogress-submit::before, .feedback-submit::before {
        content: "";
        height: 12px;
        width: 12px;
        background-color: @d4sd-secondary-color;
        position: absolute;
        border-radius: 50%;
        top: 0px;
        left: -20px;
      }
      .submitted {
        color: @d4sd-success;
      }
      .submitted::before {
        background-color: @d4sd-success;
      }
      .inprogress-submit, .feedback-submit {
        color: @d4sd-color-two;
      }
      .inprogress-submit::before, .feedback-submit::before {
        background-color: @d4sd-color-two;
      }
    }
    .card-dates {
      font-weight: bold;
      color: @b3;
      text-align: left;
      font-size: 14px;
      .due-date.warning {
        color: @d4sd-secondary-color;
      }
      .due-date.success {
        color: @d4sd-success
      }
      .due-date.progressing {
        color: @d4sd-color-two
      }
      .days-left {
        float: right;
      }
    }
    .progressBar {
      transform: rotate(180deg);
      margin-bottom: @margin-base / 2;
      margin-top: @margin-base / 2;
      .ant-progress-bg {
        height: 16px !important;
      }
      .ant-progress-text {
        display: none;
      }
      .ant-progress-outer {
        padding-right: 0px;
      }
    }
    .btn-wrapper {
      text-align: center;
      margin-top: @margin-base;
      button {
        margin: 0px;
      }
    }
    .ant-collapse {
      border-radius: 10px;
    }

  }
}
.panelCard.closed {
  filter: grayscale(1);
  background-color: @d4sd-color-disabled;
  box-shadow: none;
  border: none;
}