Skip to content

Commit

Permalink
feat(table): Design layout first table | JIRA: PT-87
Browse files Browse the repository at this point in the history
  • Loading branch information
LeThanhPhongLTV committed May 30, 2022
1 parent aa62fd3 commit 8450a09
Show file tree
Hide file tree
Showing 8 changed files with 350 additions and 36 deletions.
62 changes: 31 additions & 31 deletions src/assets/css/el-button.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,111 +17,111 @@ body {
}

.el-button.el-button--primary.is-plain {
@apply bg-transparent text-primary-blue border-primary-blue drop-shadow-none;
@apply bg-transparent text-primary-blue border-primary-blue drop-shadow-none #{!important};
&:hover {
@apply bg-primary-blue text-white drop-shadow-lg;
@apply bg-primary-blue text-white drop-shadow-lg #{!important};
}
&:active {
@apply drop-shadow-none;
@apply drop-shadow-none #{!important};
}
}

.el-button.el-button--secondary.is-plain {
@apply bg-transparent text-secondary border-slate-50 shadow-none drop-shadow-none;
@apply bg-transparent text-secondary border-slate-50 shadow-none drop-shadow-none #{!important};
&:hover {
@apply bg-slate-50 text-black drop-shadow-md border-slate-50;
@apply bg-slate-50 text-black drop-shadow-md border-slate-50 #{!important};
}
&:active {
@apply drop-shadow-none bg-slate-50;
@apply drop-shadow-none bg-slate-50 #{!important};
}
}

.el-button.el-button--success.is-plain {
@apply bg-transparent text-success border-success drop-shadow-none;
@apply bg-transparent text-success border-success drop-shadow-none #{!important};
&:hover {
@apply bg-success text-white drop-shadow-lg border-success;
@apply bg-success text-white drop-shadow-lg border-success #{!important};
}
&:active {
@apply drop-shadow-none;
@apply drop-shadow-none #{!important};
}
}

.el-button.el-button--warning.is-plain {
@apply bg-transparent text-warning border-warning drop-shadow-none;
@apply bg-transparent text-warning border-warning drop-shadow-none #{!important};
&:hover {
@apply bg-warning text-white drop-shadow-lg border-warning;
@apply bg-warning text-white drop-shadow-lg border-warning #{!important};
}
&:active {
@apply drop-shadow-none;
@apply drop-shadow-none #{!important};
}
}

.el-button.el-button--info.is-plain {
@apply bg-transparent text-info border-info drop-shadow-none;
@apply bg-transparent text-info border-info drop-shadow-none #{!important};
&:hover {
@apply bg-info text-white drop-shadow-lg border-info;
@apply bg-info text-white drop-shadow-lg border-info #{!important};
}
&:active {
@apply drop-shadow-none;
@apply drop-shadow-none #{!important};
}
}

.el-button.el-button--danger.is-plain {
@apply bg-transparent text-danger border-danger drop-shadow-none;
&:hover {
@apply bg-danger text-white drop-shadow-lg border-danger;
@apply bg-danger text-white drop-shadow-lg border-danger #{!important};
}
&:active {
@apply drop-shadow-none;
@apply drop-shadow-none #{!important};
}
}

.el-button.el-button--primary {
@apply bg-primary-blue border border-primary-blue text-white;
@apply bg-primary-blue border border-primary-blue text-white #{!important};
&:active {
@apply bg-primary-blue-active drop-shadow-none;
@apply bg-primary-blue-active drop-shadow-none #{!important};
}
}

.el-button.el-button--info {
@apply bg-info border border-info text-white;
@apply bg-info border border-info text-white #{!important};
&:active {
@apply bg-info-active drop-shadow-none;
@apply bg-info-active drop-shadow-none #{!important};
}
}

.el-button.el-button--warning {
@apply bg-warning border border-warning text-white;
@apply bg-warning border border-warning text-white #{!important};
&:active {
@apply bg-warning-active drop-shadow-none;
@apply bg-warning-active drop-shadow-none #{!important};
}
}

.el-button.el-button--success {
@apply bg-success border border-success text-white;
@apply bg-success border border-success text-white #{!important};
&:active {
@apply bg-success-active drop-shadow-none;
@apply bg-success-active drop-shadow-none #{!important};
}
}

.el-button.el-button--danger {
@apply bg-danger border border-danger text-white;
@apply bg-danger border border-danger text-white #{!important};
&:active {
@apply bg-danger-active drop-shadow-none;
@apply bg-danger-active drop-shadow-none #{!important};
}
}

.el-button.el-button--secondary {
@apply bg-slate-100 border border-slate-100 text-black shadow-sm;
@apply bg-slate-100/25 border border-slate-100/25 text-black shadow-sm #{!important};
&:hover {
@apply shadow-md;
@apply shadow-md #{!important};
}
&:active {
@apply shadow-none drop-shadow-none border-slate-300 bg-slate-300;
@apply shadow-none drop-shadow-none border-slate-300 bg-slate-300 #{!important};
}
}

.el-button.btn-default {
.el-button.el-button--default {
@apply bg-btn-default border border-btn-default text-white;
&:active {
@apply bg-btn-default-active drop-shadow-none;
Expand Down
26 changes: 26 additions & 0 deletions src/assets/css/el-pagination.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
.el-pagination.is-background .number {
@apply h-9 w-9 text-gray-500 font-normal rounded-full bg-transparent border border-slate-200 #{!important};
&:hover {
@apply bg-slate-200 #{!important};
}
}

.el-pagination.is-background button {
@apply w-9 h-9 text-gray-500 rounded-full font-bold bg-transparent border border-red-200 text-center #{!important};
&:hover {
@apply bg-slate-200 #{!important};
}
}

.el-pagination.is-background button .el-icon {
@apply font-extrabold border border-slate-200 rounded-full w-9 h-9 #{!important};
}

.el-pagination.is-background button .el-icon .icon {
@apply m-auto mt-2.75 #{!important};
}


.el-pagination.is-background .el-pager .active {
@apply bg-primary-blue text-white drop-shadow-md #{!important};
}
71 changes: 71 additions & 0 deletions src/assets/css/el-table.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
// .el-table__header {
// background-color: rgba(17, 24, 39, var(--tw-bg-opacity)) !important;
// }

.el-table__header thead tr {
@apply h-10;
}

.el-table__header thead tr > th {
@apply bg-slate-50 font-semibold px-4 py-2 whitespace-nowrap text-0.65 text-[#8898aa] #{!important};
}

.el-table__body-wrapper tr td:first-child {
@apply pl-4 #{!important};
}

.el-table__body .el-table__row {
@apply text-[#525f7f] #{!important};
}

// .el-table {
// color: #909399 !important;
// }

// .el-table th,
// .el-table tr {
// background-color: rgba(17, 24, 39, var(--tw-bg-opacity)) !important;
// }

// .el-table__row:hover,
// .el-table__row.hover-row {
// background-color: rgba(31, 41, 55, 0.1) !important;
// color: #ffffff !important;
// }

// .el-table__body tr.hover-row.current-row > td,
// .el-table__body tr.hover-row.el-table__row--striped.current-row > td,
// .el-table__body tr.hover-row.el-table__row--striped > td,
// .el-table__body tr.hover-row > td {
// background-color: rgba(31, 41, 55, 0.1) !important;
// color: #ffffff !important;
// }

// .el-table--enable-row-hover .el-table__body tr:hover > td {
// background-color: rgba(31, 41, 55, 0.1) !important;
// color: #ffffff !important;
// }

// .el-table td {
// padding: 0 0 !important;
// }

// .el-table__row td {
// height: 57px;
// }

// .el-table td,
// .el-table th,
// .el-table th.is-leaf {
// border-bottom: 1px solid rgba(31, 41, 55, var(--tw-bg-opacity)) !important;
// }

// .el-table--border::after,
// .el-table--group::after,
// .el-table::before {
// background-color: rgba(31, 41, 55, var(--tw-bg-opacity)) !important;
// }
// .el-table__fixed-right::before,
// .el-table__fixed::before {
// background-color: rgba(31, 41, 55, var(--tw-bg-opacity)) !important;
// }
Binary file added src/assets/images/bootstrap.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 2 additions & 1 deletion src/components/element-plus.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@ import 'assets/css/typography.scss'
import 'assets/css/el-popper.scss'
import 'assets/css/el-breadcrumb.scss'


import 'assets/css/el-pagination.scss'
import 'assets/css/el-table.scss'
import 'element-plus/dist/index.css'
import 'element-plus/es/components/message/style/css'
import 'element-plus/es/components/message-box/style/css'
Expand Down
4 changes: 2 additions & 2 deletions src/modules/buttons/views/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -403,10 +403,10 @@ export default defineComponent({

<style lang="scss" scoped>
.el-button.el-button--default {
@apply font-semibold h-10.5;
@apply font-semibold h-11;
}
.el-button.el-button--large {
@apply h-13 rounded-lg #{!important};
@apply h-14 rounded-lg #{!important};
}
.el-button.el-button--small {
@apply rounded #{!important};
Expand Down
Loading

0 comments on commit 8450a09

Please sign in to comment.