argos/dmp-frontend/src/app/ui/description/editor/description-editor.component.scss

.main-content {
  height: 100vh !important;
  margin-top: -80px;
}

.description-editor {
  .toc-pane-container {
    &.is-sticky ~ .nav-spacer {
      height: 500px; // the container size }
      // height: calc(100vh - 100px); // the container size }
    }
  }

  .step-container {
    margin-top: 1em;
  }

  .external-item-card {
    margin-top: 1em;
  }

  .external-item-action-row,
  .description-action-row {
    margin-top: 1em;
  }

  .deleteButton,
  .reverseButton {
    margin-top: 15px;
    margin-bottom: 15px;
    margin-right: 15px;
    text-transform: uppercase;
  }

  .cancelButton {
    margin-top: 15px;
    margin-bottom: 15px;
    margin-right: 15px;
    text-transform: uppercase;
  }

  .saveButton {
    margin-top: 15px;
    margin-bottom: 15px;
    margin-right: 15px;
    text-transform: uppercase;
  }

  .saveAndFinalizeButton {
    margin-top: 15px;
    margin-bottom: 15px;
    margin-right: 15px;
  }

  .finalizeButton {
    margin-top: 15px;
    margin-bottom: 15px;
    margin-right: 15px;
    text-transform: uppercase;
  }

  .export-btn {
    padding-right: 6px;
  }

  .downloadPDF {
    margin-top: 15px;
    margin-bottom: 15px;
    margin-right: 15px;
  }

  .downloadXML {
    margin-top: 15px;
    margin-bottom: 15px;
    margin-right: 15px;
  }

  .downloadDOCX {
    margin-top: 15px;
    margin-bottom: 15px;
    margin-right: 15px;
  }

  .updateDescriptionProfile {
    margin-top: 15px;
    margin-bottom: 15px;
    margin-right: 15px;
  }

  .actions {
    display: flex;
    justify-content: flex-end;
  }

  //   .actions > button {
  //     background-color: #0070c0;
  //     color: #ffffff;
  //     text-transform: uppercase;
  //   }

  .more-horiz {
    font-size: 28px;
    color: #aaaaaa;
  }

  .more-icon :hover {
    color: var(--primary-color-3);
  }

  .new-description {
    height: 3.5em;
  }

  .fixed-editor-header {
    //   position: fixed;
    //   width: calc(100% - 310px);
    z-index: 3;
    background-color: whitesmoke;
  }

  .description-editor-header {
    height: 113px;
    background: var(--unnamed-color-var(--primary-color)) 0% 0% no-repeat padding-box;
    background: var(--secondary-color) 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px #00000029;
    padding: 0.6rem;
    margin: 30px 0px 0px 0px;
    border-radius: 4px;
    opacity: 1;

    .info {
      flex: 2;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .description-title {
    text-align: left;
    letter-spacing: 0px;
    color: #212121;
    opacity: 0.9;
    font-size: 14px;
    font-weight: 400;
  }

  .subtitle {
    text-align: left;
    color: #ffffff;
    font-weight: 700;
    font-size: 16px;
    opacity: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .description-subtitle {
    text-align: left;
    letter-spacing: 0px;
    color: #212121;
    font-weight: 700;
    font-size: 16px;
    opacity: 0.9;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .discard-btn {
    background: transparent;
    border: 1px solid #ffffff;
    color: white;
    border-radius: 30px;
    opacity: 1;
    width: 110px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .save-btn {
    background: #ffffff 0% 0% no-repeat padding-box;
    border-radius: 30px;
    opacity: 1;
    width: auto;
    min-width: 110px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    color: var(--primary-color);
  }

  .description-discard-btn {
    border: 1px solid #212121;
    border-radius: 30px;
    opacity: 1;
    background-color: transparent;
    font-weight: 700;
    width: 110px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .description-save-btn, .description-export-btn {
    background: #ffffff 0% 0% no-repeat padding-box;
    border-radius: 30px;
    opacity: 1;
    width: auto;
    min-width: 110px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .description-to-dmp {
    display: flex;
    align-items: center;
    padding: 0;
    text-align: left;
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 25px;
  }

  .dmp-info {
    padding-top: 0.75rem;
  }

  .dmp-label {
    min-width: 67px;
    height: 37px;
    background: var(--primary-color) 0% 0% no-repeat padding-box;
    color: white;
    border-radius: 4px;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .dmp-title {
    text-align: left;
    font-weight: 700;
    font-family: "Roboto", sans-serif;
    font-size: 1rem;
    color: #212121;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 25px;
  }

  .open-in-new-icon {
    color: #434343;
    opacity: 0.75;
  }
  .open-in-new-icon:hover {
    color: var(--primary-color);
  }

  .description-stepper {
    position: fixed;
    //   height: 100%;
    display: flex;
	flex-direction: column;
	height: calc(100vh - 246px);
  // max-width: 366px;
  }

  .stepper-options {
	height: calc(100vh - 600px);
    overflow-y: auto;
    .main-info {
      padding-left: .2rem;
      color: #21212194;
      font-weight: 400;
      cursor: pointer;
    }
    .main-info:hover {
      background-color: #ececec;
      border-radius: 6px;
    }
  }

  .stepper-back {
    margin-top: 3.125rem;
    padding-left: 0.5rem;
    font-size: 0.875rem;
    letter-spacing: 0px;
    color: #848484;
    opacity: 1;
  }

  .stepper-title {
    text-align: left;
    font-weight: 300;
    font-size: 20px;
    letter-spacing: 0px;
    color: #212121;
    opacity: 0.6;
    margin: 2.875rem 0rem 2.25rem 0rem;
    padding-left: 1rem;
  }

  .stepper-list {
    .toc-pane-container {
      // padding-left: 0.2rem;
      // overflow-x: hidden;
      span {
        text-align: left;
        font-weight: 400;
        letter-spacing: 0px;
        color: #212121;
        padding: 0.3rem 0.1rem;
        opacity: 0.6;
        cursor: pointer;
        max-width: 290px;
      }
    }
  }

  .stepper-list span:hover {
    background-color: #ececec;
    border-radius: 6px;
  }

  .stepper-list .active {
    color: #212121;
    font-weight: 700;
    opacity: 1;
  }

  .stepper-list .active-description {
    color: #212121;
    font-weight: 700;
    opacity: 1;
    .label {
      width: 100%;
      height: 27px;
      line-height: 27px;
      background-color: var(--secondary-color);
      color: #5d5d5d;
      border-radius: 4px;
      font-weight: 400;
      font-size: 14px;
      justify-content: left;
      display: flex;
      align-items: center;
      padding-left: 0.625rem;
      padding-right: 0.625rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: inline-block;
    }
  }

  .back-to-dmp:hover {
    background: #ececec;
    border-radius: 6px;
  }

  .back-icon {
    display: inline-flex;
    vertical-align: middle;
  }

  .editor-content {
    .form {
      // position: relative;
      // left: 362px;
      // width: calc(100% - 366px);

      position: relative;
      left: 362px;
      width: calc(100% - 366px);
      overflow-y: auto;
      height: calc(100vh - 218px);
    }
  }

  form {
	height: calc(100vh - 124px);
	margin-top: 6rem;
  }

  .stepper-actions {
	display: flex;
	padding-left: 1rem;
	margin-top: auto;
	margin-bottom: 0.5rem;
	//   margin-top: 5rem;
	//   flex-grow: 8;
  }

  .stepper-btn {
	border-radius: 30px;
	opacity: 1;
	width: 154px;
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 14px;
  }

  .previous {
	color: #212121;
	background: #f5f5f5 0% 0% no-repeat padding-box;
	box-shadow: 0px 3px 6px #1e202029;
	border: 2px solid #212121;
	font-weight: 500;
	cursor: pointer;
  }

  .add-description-btn {
	background: var(--secondary-color) 0% 0% no-repeat padding-box;
	box-shadow: 0px 3px 6px #1e202029;
	font-weight: 500;
	word-wrap: break-word;
	white-space: normal;
	line-height: normal;
  }

  .next {
	background: var(--primary-color) 0% 0% no-repeat padding-box;
	color: white;
	box-shadow: 0px 3px 6px #1e202029;
	font-weight: 400;
	cursor: pointer;
  }

  .description-next {
	background: var(--secondary-color) 0% 0% no-repeat padding-box;
	color: #212121;
	box-shadow: 0px 3px 6px #1e202029;
	font-weight: 700;
	cursor: pointer;
  }

  .previous-disabled {
	border: 1px solid #b5b5b5;
	color: #b5b5b5 !important;
	cursor: auto !important;
  }

  .next-disabled {
	background: #cbcbcb 0% 0% no-repeat padding-box;
	box-shadow: 0px 3px 6px #1e202029;
	color: white;
	cursor: auto !important;
  }
}

mat-icon.size-18 {
  width: 18px;
  height: 18px;
  line-height: 18px;
  font-size: 18px;
}

.menu-item {
  width: 248px;
}

.toc-pane-container {
  &.is-sticky ~ .nav-spacer {
    height: 500px; // the container size }
    // height: calc(100vh - 100px); // the container size }
  }
}

.is-sticky {
  margin-top: 70px !important;
}

.done-icon {
	display: inline-flex;
    vertical-align: middle;
	font-size: 16px !important;
	height: auto;
	width: auto;
}

// ::ng-deep .mat-tab-labels {
//   justify-content: space-between;
// }

// ::ng-deep .mat-tab-label-content {
//   text-transform: uppercase;
// }

// ::ng-deep .mat-ink-bar {
//   background-color: var(--primary-color-3) !important;
//   //   background-color: #0070c0 !important;
// }

// @media (max-width: 768px) {
//   .main-content {
//     padding: 30px 0px;
//   }

//   ::ng-deep .mat-expansion-panel-header {
//     min-height: 48px;
//     height: auto !important;
//   }

//   ::ng-deep .mat-expansion-panel-body {
//     padding: 0 0px 16px !important;
//   }

//   ::ng-deep .mat-vertical-content {
//     padding: 0 14px 24px 14px !important;
//   }
// }