Skip to content

Commit

Permalink
feat(Notifications): Fix bugs | JIRA PT-126
Browse files Browse the repository at this point in the history
  • Loading branch information
Trung-Hieu-Dev committed Jun 8, 2022
1 parent 69c0382 commit 8701f78
Show file tree
Hide file tree
Showing 3 changed files with 91 additions and 90 deletions.
125 changes: 84 additions & 41 deletions src/assets/css/form.scss
View file
Original file line number Diff line number Diff line change
@@ -1,48 +1,91 @@
body {
.el-form.el-form--default {
@apply flex flex-col items-center;
}
.open-form {
@apply rounded-md w-[90%] sm:w-[380px] #{!important};

.el-form-item {
@apply shadow rounded overflow-hidden;
}
.el-button.el-button--primary.el-button--default.sign-btn {
@apply bg-white text-primary-blue border-transparent hover:text-black #{!important};
}
.el-button img {
@apply h-5 w-5;
}
.el-button.el-button--default span .sign-img,
.el-button.el-button--default span .sign-text {
@apply p-0 #{!important};
}
.el-button.el-button--default span .sign-text {
@apply ml-[14px] #{!important};
}
.btn span {
@apply font-semibold text-left-bar-indigo hover:text-black;
}

.el-form .form-icon {
@apply bg-white flex-none text-lg px-3 py-[10px] #{!important};
}
.el-input.el-input--default {
@apply flex-1;
}
.el-form.el-form--default {
@apply flex flex-col items-center;
}

.el-form-item.el-form-item--default.form-input {
@apply w-full border-0 p-0 drop-shadow-sm;
}
.el-input.el-input--default .el-input__inner {
@apply h-[46px] p-0 rounded-none bg-white border-transparent focus:text-mess-box-text focus:font-normal text-slate-400 focus:ring-0 focus:bg-white #{!important};
}
.el-form-item {
@apply shadow rounded overflow-hidden;
}

.el-form-item.checkbox {
@apply self-start shadow-none #{!important};
}
.el-checkbox__inner {
@apply rounded h-4 w-4 border-0 shadow #{!important};
}
.el-checkbox__label {
@apply text-mess-box-text font-normal focus:border-transparent;
}
.el-checkbox__inner:hover {
@apply border-inherit;
}
.el-checkbox__input.is-checked .el-checkbox__inner {
@apply bg-primary-blue border-0 #{!important};
}
.el-checkbox__input.is-checked + .el-checkbox__label {
@apply text-slate-400;
}
.el-button.el-button--default {
@apply will-change-transform #{!important};
}
.el-checkbox__inner::after {
@apply border-[2.5px];
.el-form .form-icon {
@apply bg-white flex-none text-lg px-3 py-[10px] leading-[1.6rem] #{!important};
}
.el-input.el-input--default {
@apply flex-1;
}

.el-form-item.el-form-item--default.form-input {
@apply w-full border-0 p-0 drop-shadow-sm;
}
.el-input.el-input--default .el-input__inner {
@apply h-[46px] p-0 text-sm rounded-none bg-white border-transparent focus:text-mess-box-text focus:font-normal text-slate-400 focus:ring-0 focus:bg-white #{!important};
}

.el-form-item.checkbox {
@apply self-start shadow-none #{!important};
}
.el-checkbox__inner {
@apply rounded h-4 w-4 border-0 shadow #{!important};
}
.el-checkbox__label {
@apply text-mess-box-text font-normal focus:border-transparent;
}
.el-checkbox__inner:hover {
@apply border-inherit;
}
.el-checkbox__input.is-checked .el-checkbox__inner {
@apply bg-primary-blue border-0 #{!important};
}
.el-checkbox__input.is-checked + .el-checkbox__label {
@apply text-slate-400;
}
.el-button.el-button--default {
@apply will-change-transform #{!important};
}
.el-checkbox__inner::after {
@apply border-[2.5px];
}

.open-form-body {
@apply w-full p-6;
}
.el-dialog__body {
@apply flex flex-col items-center justify-center bg-mess-box-bg pt-0 rounded-md text-mess-box-text p-0 flex flex-col text-center;
}
.el-dialog__header {
@apply hidden;
}
.open-form-header {
@apply w-full pt-5 pb-12 border-b px-6;
}
.open-form-title {
@apply mb-4 mt-2 text-center;
}
.open-form-title small {
@apply text-12.8 mb-6 #{!important};
}
.open-form-header-body {
@apply flex flex-wrap justify-center gap-0;
}
}
}
50 changes: 4 additions & 46 deletions src/assets/css/notifications.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -140,15 +140,17 @@ body {
.el-dialog__footer .dialog-footer {
@apply w-full flex justify-between;
}
.el-dialog .btn-close {

.el-dialog .el-button.btn-close {
@apply bg-transparent text-primary-blue hover:translate-y-0 border-transparent shadow-none #{!important};
}
.open-notification .btn1-close {
@apply bg-transparent text-white border-transparent shadow-none hover:translate-y-0 hover:border-transparent #{!important};
}
.el-button.el-button--primary:active {
.open-notification .el-button.el-button--default.btn1-close:active {
@apply bg-transparent #{!important};
}

.el-button.el-button--default span {
@apply will-change-transform;
}
Expand Down Expand Up @@ -179,51 +181,7 @@ body {
@apply bg-white text-black will-change-transform #{!important};
}

// el-dialog - form
.open-form .open-form-body {
@apply w-full p-12;
}
.open-form .el-dialog__body {
@apply flex flex-col items-center justify-center bg-mess-box-bg pt-0 rounded-md text-mess-box-text p-0 flex flex-col text-center;
}
.open-form .el-dialog__header {
@apply hidden;
}
.open-form-header {
@apply w-full pt-5 pb-12 border-b p-10;
}
.open-form-title {
@apply mb-4 mt-2 text-center;
}
.open-form-title small {
@apply text-12.8 mb-6 #{!important};
}
.open-form-header-body {
@apply flex flex-wrap justify-center gap-0;
}

.el-button.el-button--primary.el-button--default.sign-btn {
@apply bg-white text-primary-blue border-transparent hover:text-black #{!important};
}
.el-button img {
@apply h-5 w-5;
}
.el-button.el-button--default span .sign-img,
.el-button.el-button--default span .sign-text {
@apply p-0 #{!important};
}
.el-button.el-button--default span .sign-text {
@apply ml-[14px] #{!important};
}
.btn span {
@apply font-semibold text-left-bar-indigo hover:text-black;
}

// Responsive
.el-dialog {
@apply w-97/100 sm:w-8/12 md:w-7/12 lg:w-6/12 xl:w-[32.95%] rounded-md #{!important};
}
.open-form {
@apply rounded-md w-[96%] md:w-[40%] xl:w-[25%] #{!important};
}
}
6 changes: 3 additions & 3 deletions src/modules/notification/views/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@
<el-button class="btn-open" type="danger" @click="openNotification = false"
>Ok, got it</el-button
>
<el-button class="btn1-close" type="primary" @click="openNotification = false"
<el-button class="btn1-close" type="danger" @click="openNotification = false"
>Close</el-button
>
</span>
Expand Down Expand Up @@ -111,7 +111,7 @@
<component :is="form.MailIcon" />
</el-icon>
</div>
<el-input v-model="form.email" />
<el-input v-model="form.email" placeholder="Email" />
</el-form-item>
<!-- Password -->
<el-form-item class="form-input" prop="LockClosedIcon">
Expand All @@ -120,7 +120,7 @@
<component :is="form.LockClosedIcon" />
</el-icon>
</div>
<el-input v-model="form.password" />
<el-input v-model="form.password" placeholder="Password" />
</el-form-item>

<!-- Checkbox -->
Expand Down

0 comments on commit 8701f78

Please sign in to comment.