123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163 |
- @mixin profile-theme() {
- app-profile {
- .mat-mdc-text-field-wrapper {
- background-color: $white-color !important;
- box-shadow: 0px 5px 6px #2f2c8324;
- }
- .profile {
- height: 100%;
- gap: 20px;
- .profile-menu {
- height: 80%;
- background-color: $off-white;
- margin: 2rem 0;
- box-shadow: -2px 6px 9px #2f2c8333;
- border-radius: 18px;
- }
- &__content {
- height: 80%;
- margin: 2rem 0;
- border-radius: 18px;
- }
- .profile-menu {
- ul {
- padding: 20px;
- list-style: none;
- gap: 20px;
- li {
- padding: 10px;
- border-radius: 20px;
- color: $main-color;
- cursor: pointer;
- }
- }
- }
- .profile-user {
- background-color: $off-white;
- margin-bottom: 20px;
- padding: 20px;
- border-radius: 18px;
- img {
- width: 100px;
- height: 100px;
- border-radius: 50%;
- }
- div {
- p {
- font-size: 18px;
- color: $black-color;
- margin-bottom: 5px;
- }
- span {
- font-size: 14px;
- color: $black-color;
- }
- }
- &__actions {
- button {
- color: $main-color;
- background-color: #2f2c8326;
- box-shadow: -2px 6px 9px #2f2c8333;
- border-radius: 18px;
- padding: 10px 30px;
- border: none;
- font-size: 16px;
- font-weight: 700;
- cursor: pointer;
- }
- }
- }
- .basic-info {
- background-color: $off-white;
- padding: 20px;
- border-radius: 18px;
- height: 80%;
- position: relative;
- .card {
- background: $white-color;
- box-shadow: 0px 5px 6px #2f2c8324;
- border: 0.5px solid #2f2c83;
- padding: 20px 0;
- border-radius: 20px;
- padding-bottom: 0;
- h1 {
- text-align: center;
- font-size: 15px;
- color: $main-color;
- border-bottom: 1px solid #ccc;
- padding-bottom: 10px;
- }
- p {
- text-align: center;
- padding: 2rem 0;
- font-size: 13px;
- }
- }
- }
- }
- .form-input {
- width: 100%;
- label {
- margin-bottom: 5px;
- font-size: 13px;
- span {
- margin: 0 5px;
- }
- }
- input,
- select {
- padding: 15px 20px;
- border-radius: 10px;
- box-shadow: 0px 5px 6px #2f2c8324;
- border: 0.5px solid $main-color;
- border-radius: 10px;
- outline: none;
- }
- }
- }
- .edit {
- color: $main-color;
- background-color: #2f2c8326;
- box-shadow: -2px 6px 9px #2f2c8333;
- border-radius: 18px;
- padding: 10px 30px;
- border: none;
- font-size: 16px;
- font-weight: 700;
- cursor: pointer;
- position: absolute;
- right: 1rem;
- }
- .save-changes {
- background-color: #28abe3 !important;
- color: #fff !important;
- box-shadow: -2px 6px 9px #2f2c8333 !important;
- width: 170px;
- }
- .cancel {
- box-shadow: -2px 6px 9px #2f2c8333 !important;
- background-color: #fff !important;
- color: #28abe3 !important;
- border: 1px solid #28abe3 !important;
- width: 170px;
- }
- .btn {
- padding: 15px 20px;
- border: none;
- border-radius: 28px;
- cursor: pointer;
- }
- }
|