Skip to content

Commit 08c4c33

Browse files
LeThanhPhongLTVLeThanhPhongLTV
authored
fix(Pages): Refactor Tailwind && fix href Github icon | JIRA: PT-208 (#130)
* fix(Pages): Refactor Tailwind && fix href Github icon | JIRA: PT-208
1 parent 6711407 commit 08c4c33

File tree

31 files changed

+267
-223
lines changed

31 files changed

+267
-223
lines changed

‎src/assets/css/el-button.scss

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -13,38 +13,46 @@ body {
1313
}
1414

1515
.el-button.el-button--large {
16-
@apply h-[51px] rounded-md font-semibold text-sm tracking-wide px-[11px] #{!important};
16+
@apply h-12.6 rounded-md font-semibold text-sm tracking-wide px-2.75 #{!important};
1717
}
1818

1919
.el-button.el-button--small {
2020
@apply rounded text-xs font-semibold tracking-wide p-0.5 py-3.25 #{!important};
2121
}
2222

2323
.el-button.el-button--default.el-button--small {
24-
@apply rounded max-w-fit h-[25px] #{!important};
24+
@apply rounded max-w-fit h-6.2 #{!important};
2525
}
2626

2727
.el-button.el-button--default.is-plain {
28+
@apply transition-all duration-150 ;
29+
&::before {
30+
@apply opacity-0;
31+
}
32+
&:hover::before {
33+
@apply opacity-100;
34+
}
35+
2836
@apply bg-transparent text-dark border-dark shadow-none;
2937

3038
&:hover {
31-
@apply bg-dark text-white drop-shadow-lg;
39+
@apply bg-dark text-white drop-shadow-lg border-dark;
3240
}
3341

3442
&:active {
35-
@apply drop-shadow-none;
43+
@apply drop-shadow-none text-white;
3644
}
3745
}
3846

3947
.el-button.el-button--primary.is-plain {
4048
@apply bg-transparent text-indigo-410 border-indigo-410 shadow-none #{!important};
4149

4250
&:hover {
43-
@apply bg-indigo-410 text-white drop-shadow-lg #{!important};
51+
@apply bg-indigo-410 text-white drop-shadow-lg border-indigo-410 #{!important};
4452
}
4553

4654
&:active {
47-
@apply drop-shadow-none #{!important};
55+
@apply drop-shadow-none text-white #{!important};
4856
}
4957
}
5058

@@ -56,7 +64,7 @@ body {
5664
}
5765

5866
&:active {
59-
@apply drop-shadow-none bg-secondary #{!important};
67+
@apply drop-shadow-none text-black bg-secondary #{!important};
6068
}
6169
}
6270

@@ -68,7 +76,7 @@ body {
6876
}
6977

7078
&:active {
71-
@apply drop-shadow-none #{!important};
79+
@apply drop-shadow-none text-white #{!important};
7280
}
7381
}
7482

@@ -80,7 +88,7 @@ body {
8088
}
8189

8290
&:active {
83-
@apply drop-shadow-none #{!important};
91+
@apply drop-shadow-none text-white #{!important};
8492
}
8593
}
8694

@@ -92,7 +100,7 @@ body {
92100
}
93101

94102
&:active {
95-
@apply drop-shadow-none #{!important};
103+
@apply drop-shadow-none text-white #{!important};
96104
}
97105
}
98106

@@ -104,7 +112,7 @@ body {
104112
}
105113

106114
&:active {
107-
@apply drop-shadow-none #{!important};
115+
@apply drop-shadow-none text-white #{!important};
108116
}
109117
}
110118

‎src/assets/css/el-card.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
body {
22
.el-card {
3-
@apply relative flex flex-col bg-clip-border break-words min-w-0 rounded-[5px] shadow-card cursor-auto text-primary-dark #{!important};
3+
@apply relative flex flex-col bg-clip-border break-words min-w-0 rounded-5 shadow-card cursor-auto text-primary-dark #{!important};
44
--el-card-bg-color: white !important;
55
}
66
.el-card .card-header {
@@ -9,7 +9,7 @@ body {
99
}
1010
}
1111
.el-card .el-card__header {
12-
@apply w-full py-[20px] px-6 mb-0 border-b-dark-4;
12+
@apply w-full py-5 px-6 mb-0 border-b-dark-4;
1313
}
1414
.el-card .el-card__body {
1515
@apply w-full py-6 px-6 grow shrink;

‎src/assets/css/el-menu.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424

2525
.el-sub-menu {
2626
.el-sub-menu__title {
27-
@apply rounded-md px-2 pr-0 h-[45px] text-dark-20 #{!important};
27+
@apply rounded-md px-2 pr-0 h-11.25 text-dark-20 #{!important};
2828
.el-icon.el-sub-menu__icon-arrow {
2929
@apply text-indigo-410;
3030
}
@@ -43,7 +43,7 @@
4343
}
4444

4545
.el-menu-item {
46-
@apply rounded-md px-2 pr-0 h-[45px] text-dark-20 #{!important};
46+
@apply rounded-md px-2 pr-0 h-11.25 text-dark-20 #{!important};
4747
&:hover {
4848
@apply bg-white;
4949
}

‎src/assets/css/el-popper.scss

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,101 @@
33
}
44
.el-dropdown-menu {
55
@apply p-0;
6+
}
7+
8+
.ava-column-popper.el-popover.el-popper {
9+
@apply p-1 min-w-fit rounded-md text-white bg-black border-slate-600 #{!important};
10+
.el-popper__arrow::before {
11+
@apply bg-black #{!important};
12+
}
13+
}
14+
.action-column-popper {
15+
@apply rounded-lg -mt-3 #{!important};
16+
.el-popper__arrow {
17+
@apply hidden;
18+
}
19+
.el-dropdown-menu__item {
20+
@apply mx-0 text-zinc-800 #{!important};
21+
&:hover {
22+
@apply bg-secondary;
23+
}
24+
}
25+
}
26+
27+
.icon-popper.el-popover.el-popper {
28+
@apply transition-all duration-300 p-1 min-w-fit min-h-fit rounded-md #{!important};
29+
.el-popper__arrow::before {
30+
@apply bg-white #{!important};
31+
}
32+
}
33+
.auth-menu-popper.el-popper {
34+
@apply border shadow-card w-[94%] md:w-[95.5%] lg:hidden rounded-md p-6;
35+
@apply top-2.5 mx-2 inset-x-1 #{!important};
36+
.el-dropdown-menu.el-dropdown-menu--default {
37+
@apply p-0;
38+
}
39+
.el-dropdown-menu__item--divided {
40+
@apply border-[#e4e4e5];
41+
}
42+
.el-dropdown-menu__item {
43+
@apply p-0 m-0;
44+
&:hover {
45+
@apply bg-white;
46+
}
47+
}
48+
.el-popper__arrow {
49+
@apply hidden;
50+
}
51+
}
52+
53+
.menu-popper {
54+
@apply lg:w-80 md:w-80 sm:w-80 w-97/100 border-none bg-[#182c4e] top-4 sm:top-1 rounded-lg #{!important};
55+
.el-dropdown-menu__item--divided {
56+
@apply m-0;
57+
}
58+
}
59+
.notification-popper {
60+
@apply lg:w-98 md:w-98 sm:w-98 w-97/100 top-9/100 sm:top-16 rounded-lg #{!important};
61+
.el-popper__arrow {
62+
@apply hidden;
63+
}
64+
.el-dropdown-menu {
65+
@apply p-0 #{!important};
66+
}
67+
.el-dropdown-menu__item--divided {
68+
@apply m-0;
69+
}
70+
.el-dropdown-menu__item:first-child {
71+
@apply m-0 bg-white rounded-lg;
72+
&:hover {
73+
@apply bg-white #{!important};
74+
}
75+
}
76+
.el-dropdown-menu__item {
77+
@apply m-0;
78+
&:hover {
79+
@apply bg-secondary #{!important};
80+
}
81+
}
82+
}
83+
.profile-popper {
84+
@apply lg:w-48 md:w-48 sm:w-48 w-97/100 top-9/100 sm:top-18 rounded-lg #{!important};
85+
.el-popper__arrow {
86+
@apply hidden;
87+
}
88+
.el-dropdown-menu {
89+
@apply py-2 #{!important};
90+
.el-dropdown-menu__item:first-child {
91+
@apply m-0 rounded-lg;
92+
&:hover {
93+
@apply bg-white #{!important};
94+
}
95+
}
96+
.el-dropdown-menu__item {
97+
@apply m-0;
98+
&:hover {
99+
@apply bg-secondary text-black #{!important};
100+
}
101+
}
102+
}
6103
}

‎src/assets/css/el-progress.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
.el-progress-bar .el-progress-bar__outer {
2-
@apply h-[3px] #{!important};
2+
@apply h-0.75 #{!important};
33
}

‎src/assets/css/el-table.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@
4747
}
4848

4949
.is-dark.el-table th.is-leaf {
50-
@apply border-y-[0.5px] border-[#1f3a68] #{!important};
50+
@apply border-y-0.5 border-[#1f3a68] #{!important};
5151
}
5252

5353
.is-dark.el-table td,

‎src/assets/css/form.scss

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
body {
22
// Default
33
hr {
4-
@apply border-0 border-b-[1px] border-b-light-10 my-6;
4+
@apply border-0 border-b border-b-light-10 my-6;
55
}
66
.el-form-item__content:last-child .el-button {
77
@apply mt-6;
88
}
99
.el-input__inner {
10-
@apply h-[46px] rounded-[0.25rem] border border-light placeholder:text-muted text-sm;
10+
@apply h-11.5 rounded border border-light placeholder:text-muted text-sm;
1111
}
1212
.el-input-group__append {
1313
@apply text-base text-muted bg-white font-normal;
@@ -16,7 +16,7 @@ body {
1616
@apply text-base font-medium placeholder:text-muted;
1717
}
1818
.el-input__inner:focus {
19-
@apply border-[1px] outline-0 border-indigo-410 ring-0 shadow-[0_3px_9px_transparent] drop-shadow-[3px_4px_8px_rgb(94,114,228,0.10)];
19+
@apply border outline-0 border-indigo-410 ring-0 shadow-[0_3px_9px_transparent] drop-shadow-[3px_4px_8px_rgb(94,114,228,0.10)];
2020
}
2121

2222
.el-upload.el-upload--text {
@@ -32,7 +32,7 @@ body {
3232
}
3333
// Notification - Form popup
3434
.el-dialog.sign-in {
35-
@apply rounded-md w-[90%] sm:w-[380px] sm:-top-10 #{!important};
35+
@apply rounded-md w-[90%] sm:w-95 sm:-top-10 #{!important};
3636

3737
.el-dialog__body {
3838
@apply flex flex-col items-center justify-center bg-secondary pt-0 rounded-md text-muted p-0 text-center;
@@ -48,7 +48,7 @@ body {
4848
@apply rounded;
4949
}
5050
.el-form-item__content .el-icon {
51-
@apply block flex-none text-lg leading-[1.6rem] mx-2.5 #{!important};
51+
@apply block flex-none text-lg leading-1.6 mx-2.5 #{!important};
5252
}
5353
.el-input.el-input--default {
5454
@apply flex-1;
@@ -57,7 +57,7 @@ body {
5757
@apply w-full border-0 p-0 drop-shadow-sm;
5858
}
5959
.el-input.el-input--default .el-input__inner {
60-
@apply h-[46px] p-0 text-sm rounded bg-white border-transparent placeholder:text-muted focus:text-muted focus:font-normal text-slate-400 focus:ring-0 focus:bg-white #{!important};
60+
@apply h-11.5 p-0 text-sm rounded bg-white border-transparent placeholder:text-muted focus:text-muted focus:font-normal text-slate-400 focus:ring-0 focus:bg-white #{!important};
6161
}
6262
.el-form-item__content {
6363
@apply justify-center;
@@ -85,7 +85,7 @@ body {
8585
@apply will-change-transform #{!important};
8686
}
8787
.el-checkbox__inner::after {
88-
@apply border-[2.5px];
88+
@apply border-2.5;
8989
}
9090
}
9191
.authentication-form {
@@ -95,7 +95,7 @@ body {
9595

9696
.el-input {
9797
.el-input__inner {
98-
@apply transition-all duration-300 rounded-md shadow-form-input border-none h-[46px] pl-10 text-muted text-sm placeholder:font-normal #{!important};
98+
@apply transition-all duration-300 rounded-md shadow-form-input border-none h-11.5 pl-10 text-muted text-sm placeholder:font-normal #{!important};
9999
&:focus {
100100
@apply border-none shadow-md ring-0 #{!important};
101101
}
@@ -109,7 +109,7 @@ body {
109109
@apply rounded h-4 w-4 border-0 shadow #{!important};
110110
}
111111
.el-checkbox__inner::after {
112-
@apply border-[3px] w-0.5 h-[5px] mt-0.5 ml-0.5 #{!important};
112+
@apply border-3 w-0.5 h-1.25 mt-0.5 ml-0.5 #{!important};
113113
}
114114
}
115115
.el-checkbox.is-checked {

‎src/assets/css/notifications.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ body {
3636

3737
// Notifications
3838
.el-message {
39-
@apply py-4 pl-6 pr-20 min-w-0 w-[90%] max-w-[600px] items-start rounded-md;
39+
@apply py-4 pl-6 pr-20 min-w-0 w-[90%] max-w-1.5xl items-start rounded-md;
4040
}
4141
.el-message.default {
4242
@apply bg-dark-50 border-dark-50 text-white #{!important};
@@ -138,7 +138,7 @@ body {
138138
}
139139

140140
.el-dialog__header {
141-
@apply p-5 h-[60px];
141+
@apply p-5 h-15;
142142
}
143143
.el-dialog__title {
144144
@apply inline-block text-1.0625 font-semibold h-[18.7px];
@@ -154,7 +154,7 @@ body {
154154
@apply text-base #{!important};
155155
}
156156
.el-dialog__body p {
157-
@apply text-base leading-[1.7rem];
157+
@apply text-base leading-1.7;
158158
}
159159

160160
.el-dialog__footer {

0 commit comments

Comments
 (0)