.dataset-profile-editor { //margin-top: 1.3rem; .full-width { width: 100%; } } .deleteBtn{ margin-right:2em; } // REFACTORED CSS .stepper{ background-color: transparent; min-height: 500px; } .content-displayer{ background-color: #fff; border-radius: 7px; box-shadow: 0px 1px 2px #bfbfbf; padding: 0em; // padding-top: 0em; overflow: visible; // min-height: 30em; } .heading { text-align: left; font-weight: 700; font-size: 18px; letter-spacing: 0px; color: #212121; opacity: 0.81; // margin-top: 1.625rem; margin-bottom: 0.625rem; } .hint { text-align: left; font-weight: 400; font-size: 16px; letter-spacing: 0px; color: #212121; opacity: 0.81; margin-bottom: 0.125rem; } //TO CHECK :host ::ng-deep .mat-horizontal-content-container { overflow: visible; // padding: 0px; } :host ::ng-deep .mat-form-field-outline{ background-color: #ffffff4f; } :host ::ng-deep .mat-horizontal-stepper-header-container { display: none !important; } #progress{ position: absolute; height: 100%; width: 100%; clip-path: polygon(0 0, 0 0, 0 0, 0 0); transition-property: clip-path; transition-duration: 600ms; transition-timing-function: ease-out; transition-delay: 50ms; box-shadow: 0px 1px 2px #bfbfbf; background-color: var(--secondary-color); } #progress-container{ box-shadow: 1px 1px 6px #00000029;; // border-radius: .3em; } // .import-btn { // background: #ffffff 0% 0% no-repeat padding-box; // border-radius: 30px; // // color: var(--primary-color); // // border: 1px solid var(--primary-color); // padding-left: 2em; // padding-right: 2em; // color: #000; // border: 1px solid #000; // } .navigate-btn { border-radius: 30px; background-color: var(--secondary-color); border: 1px solid transparent; padding-left: 2em; padding-right: 2em; box-shadow: 0px 3px 6px #1E202029; transition-property: background-color, color; transition-duration: 200ms; transition-delay: 50ms; transition-timing-function: ease-in-out; } .navigate-btn-disabled{ background-color: #CBCBCB; color: #FFF; } .create-section-btn { border-radius: 30px; background-color: var(--secondary-color); border: 1px solid transparent; padding-left: 1em; padding-right: 1em; box-shadow: 0px 3px 6px #1E202029; line-height: 1.7em; } $blue-color : var(--primary-color); $blue-color-light: #5cf7f2; .finalize-btn { border-radius: 30px; border: 1px solid var(--primary-color); background: transparent; padding-left: 2em; padding-right: 2em; box-shadow: 0px 3px 6px #1E202029; color: var(--primary-color); } .template_action_btn{ border-radius: 30px; border: 1px solid var(--primary-color); background: transparent; //padding-left: 2em; //padding-right: 2em; height: 2.5em; min-width: 110px; width: auto; box-shadow: 0px 3px 6px #1E202029; color: var(--primary-color); flex: 0 0 auto; &.save-btn{ background-color: var(--secondary-color); border: 1px solid transparent; //padding-left: 2em; //padding-right: 2em; box-shadow: 0px 3px 6px #1E202029; color: #212121; transition-property: background-color, color; transition-duration: 200ms; transition-delay: 50ms; transition-timing-function: ease-in-out; } &:disabled{ background-color: #CBCBCB; color: #FFF; border: 0px; } } .stepper-title-label{ cursor: pointer; transition-property: color, opacity; transition-duration: 200ms; transition-delay: 50ms; transition-timing-function: ease-in-out; color: #212121; font-size: 0.9em; } .stepper-title-label-locked{ color: #DEDEDE; } .stepper-title-label-completed{ opacity: 0.5; } .page-infos{ padding: 2em; } .mat-subheader{ padding: 0px; } //for the acitons list toolbar // .mat-list-item.mat-list-item-with-avatar{ // padding-left: 0em; // } .actions-list{ // border: 1px solid $blue-color; box-shadow: 0px 3px 12px var(--primary-color)99; border-radius: 4px; // padding-top: 1rem; padding: 1em 0.9em; min-width: 166px; .mat-list-item-content{ padding: 0px; } .action-list-item{ display: flex; align-items: center; cursor: pointer; .action-list-icon{ font-size: 1.2em; // padding-right: 1em; width: 14px; margin-right: 0.5em; margin-left: -.09em; height: auto; color: var(--primary-color);; } .input_icon{ width: 14px; margin-right: .5em; } .action-list-text{ font-size: 0.9em; } } .action-list-label{ color: #212121; font-size: small; opacity: 0.6; } .list-unstyled{ margin-bottom: 0.2rem; } } // .mli{ // height: auto; // } :host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline { background: #fafafa !important; } :host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix { font-size: 1rem; padding: 0.6em 0 1em 0 !important; } .basic-info-input{ margin-top: 2em; margin-bottom: 2em; } .delete-btn { // background-color: rgba(255, 0, 0, 0.76); // color: white; } .email-input { border-color: black; border-style: solid; border-width: thin; border-radius: 4px; margin-right: 5px; background-color: white; padding-top: 10px; padding-bottom: 10px; } .user-table { // border: thin solid rgb(179, 173, 173); // border: 1px solid rgba(0, 0, 0, 0.12); background-color: white; border-radius: 4px; padding-bottom: 1em; box-shadow: -1px 1px 11px -3px #00000017; } .user-table-header { text-align: center; display: revert; background-color: rgb(243 245 248); // background-color: #129d9811; } .user-table-header th { padding-top: 10px; padding-bottom: 10px; // border: thin solid darkgray; } .user-table-row { // display: revert; background-color: #fafafa; td{ padding-top: .5em; padding-bottom: .5em; } &:hover{ background-color: #eef5f6; } border-top:1px solid rgba(0, 0, 0, 0.12); } .user-table-row:nth-child(even) { // background-color: silver; } .user-table-body{ text-align: center; } .scroll-on-top{ position: fixed; bottom: 20em; right: 2em; color: var(--primary-color) !important; cursor: pointer; font-size: 1rem; font-weight: 400; } .floating-btn { position: fixed; bottom: 2em; right: 2em; } .progress-min-height { min-height: 35px; } #stepper-navigation-wrapper{ z-index: 99; width: 100%; #stepper-navigation{ background-color: #f4f4f4; z-index: 99; } } .actions-template{ align-self:flex-end; display: flex; justify-content: space-between; width: 100%; padding-left: 15px; padding-right: 15px; } .stepper-navigation-outer-wrapper{ padding: 2em; margin-bottom: 1em; //background: #f4f4f4; //position: sticky; //top: 0.01em; //z-index: 9999; } #header-outer-wrapper { padding-top: 1.3rem; background: #f4f4f4; position: sticky; top: 0.01em; z-index: 9999; } #title-column{ justify-content: space-between; align-items: baseline; padding-right: 15px; } .side-actions{ display: flex; height: 40vh; position: sticky; top: 2em; }