diff --git a/frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.component.scss b/frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.component.scss index aef8fa680..d7a1d0de9 100644 --- a/frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.component.scss +++ b/frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.component.scss @@ -70,6 +70,9 @@ justify-content: center; align-items: center; color: var(--primary-color); + &:disabled { + color: #CBCBCB; + } } .plan-stepper { diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index 245ad4333..dc868aa96 100644 --- a/frontend/src/styles.scss +++ b/frontend/src/styles.scss @@ -416,64 +416,63 @@ button,.mdc-button,.mat-mdc-button, .mdc-button:has(.material-icons,mat-icon,[ma &:hover { box-shadow: var(--mdc-protected-button-hover-container-elevation-shadow); } - } - &.neutral { - background: #ffffff 0% 0% no-repeat padding-box; - border: 1px solid #b5b5b5; + &.primary { + background: var(--primary-color) 0% 0% no-repeat padding-box; + color: #ffffff; + } + &.secondary { + background: var(--secondary-color) 0% 0% no-repeat padding-box; + color: #000000; + } + + &.save-btn { + background: var(--secondary-color) 0% 0% no-repeat padding-box; + color: #000000; + padding-left: 2em; + padding-right: 2em; + &:disabled { + background-color: #CBCBCB; + color: #FFF; + border: 0px; + } + } + + &.cancel-btn { + background: #ffffff 0% 0% no-repeat padding-box; + border: 1px solid #b5b5b5; + padding-left: 2em; + padding-right: 2em; + &:disabled { + background-color: #CBCBCB; + color: #FFF; + border: 0px; + } + } + + // &.finalize-btn { + + // } + + &.delete-btn { + background: #ffffff; + color: #ba2c2c; + border: 1px solid #ba2c2c; + padding-left: 2em; + padding-right: 2em; + &:disabled { + background-color: #CBCBCB; + color: #FFF; + border: 0px; + } + } + + &.md-button { + padding: 0.62rem 1.87rem; + font-weight: 400; + } } - &.primary { - background: var(--primary-color) 0% 0% no-repeat padding-box; - color: #ffffff; - } - &.primary-inverted { - border: 1px solid var(--primary-color); - background: transparent; - color: var(--primary-color); - } - - &.secondary { - background: var(--secondary-color) 0% 0% no-repeat padding-box; - color: #000000; - } - - &.save-btn { - background: var(--secondary-color) 0% 0% no-repeat padding-box; - color: #000000; - padding-left: 2em; - padding-right: 2em; - } - - &.cancel-btn { - background: #ffffff 0% 0% no-repeat padding-box; - border: 1px solid #b5b5b5; - padding-left: 2em; - padding-right: 2em; - } - - &.finalize-btn { - - } - - &.delete-btn { - background: #ffffff; - color: #ba2c2c; - border: 1px solid #ba2c2c; - padding-left: 2em; - padding-right: 2em; - } - - &.md-button { - padding: 0.62rem 1.87rem; - font-weight: 400; - } - - &:disabled { - background-color: #CBCBCB; - color: #FFF; - border: 0px; - } } .mat-mdc-button.mat-mdc-button-disabled {