mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-18 12:34:25 +08:00
feat(advance-table): add change sort by click title
This commit is contained in:
JiwenBai
parent
210e091239
commit
727bb988dd
@ -2,9 +2,10 @@
|
||||
<span
|
||||
class="ts-funnel-container"
|
||||
:class="{'ts-funnel-container--active':status}"
|
||||
@click.stop="()=>{}"
|
||||
>
|
||||
<n-icon
|
||||
style="vertical-align: middle;color: #63e2b7;"
|
||||
style="vertical-align: middle;"
|
||||
:class="{'ts-funnel-container--active':status}"
|
||||
type="ios-funnel"
|
||||
size="12"
|
||||
@ -48,7 +49,7 @@ export default {
|
||||
line-height: 16px;
|
||||
}
|
||||
.ts-funnel-container i {
|
||||
opacity: 0.3;
|
||||
opacity: 0.4;
|
||||
}
|
||||
.ts-funnel-container--active i{
|
||||
opacity: 1;
|
||||
|
||||
@ -12,35 +12,6 @@
|
||||
<template v-slot:activator>
|
||||
<filterIcon :status="filterStatus" />
|
||||
</template>
|
||||
<!-- <n-popselect-option
|
||||
v-if="loading"
|
||||
disabled
|
||||
label="Loading.."
|
||||
value="loading.."
|
||||
/>
|
||||
<p
|
||||
v-if="error"
|
||||
style="text-align:center;padding:5px;"
|
||||
>
|
||||
Error,refresh
|
||||
<n-icon
|
||||
style="cursor:pointer"
|
||||
type="md-refresh"
|
||||
color="#999"
|
||||
size="18"
|
||||
@click.stop="initItems"
|
||||
/>
|
||||
</p> -->
|
||||
<!-- <n-scrollbar
|
||||
style="max-height:120px;"
|
||||
> -->
|
||||
<!-- <n-popselect-option
|
||||
v-for="item in filterItems"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/> -->
|
||||
<!-- </n-scrollbar> -->
|
||||
</n-popselect>
|
||||
<n-popover
|
||||
v-else
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
opacity: opacitys.downOpacity,
|
||||
transform: 'scale(0.8)'
|
||||
}"
|
||||
@click.native="changeDownSort()"
|
||||
@click.stop="changeDownSort()"
|
||||
/>
|
||||
<n-icon
|
||||
type="md-arrow-dropup"
|
||||
@ -16,7 +16,7 @@
|
||||
opacity: opacitys.upOpacity,
|
||||
transform: 'scale(0.8)'
|
||||
}"
|
||||
@click.native="changeUpSort()"
|
||||
@click.stop="changeUpSort()"
|
||||
/>
|
||||
</span>
|
||||
</template>
|
||||
@ -26,20 +26,20 @@ const computeOpacity = (val) => {
|
||||
let self = {}
|
||||
switch (val) {
|
||||
case 0:
|
||||
self.upOpacity = 0.3
|
||||
self.downOpacity = 0.3
|
||||
self.upOpacity = 0.4
|
||||
self.downOpacity = 0.4
|
||||
break
|
||||
case 1:
|
||||
self.upOpacity = 1
|
||||
self.downOpacity = 0.3
|
||||
self.downOpacity = 0.4
|
||||
break
|
||||
case -1:
|
||||
self.upOpacity = 0.3
|
||||
self.upOpacity = 0.4
|
||||
self.downOpacity = 1
|
||||
break
|
||||
case null:
|
||||
self.upOpacity = 0.3
|
||||
self.downOpacity = 0.3
|
||||
self.upOpacity = 0.4
|
||||
self.downOpacity = 0.4
|
||||
break
|
||||
}
|
||||
return self
|
||||
@ -66,8 +66,8 @@ export default {
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
upOpacity: 0.3,
|
||||
downOpacity: 0.3
|
||||
upOpacity: 0.4,
|
||||
downOpacity: 0.4
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -101,6 +101,15 @@ export default {
|
||||
}
|
||||
this.setSort(v)
|
||||
},
|
||||
changeSort () {
|
||||
if (this.value === 0 || this.value === null) {
|
||||
this.setSort(1)
|
||||
} else if (this.value === 1) {
|
||||
this.setSort(-1)
|
||||
} else {
|
||||
this.setSort(0)
|
||||
}
|
||||
},
|
||||
setSort (val) {
|
||||
this.$emit('input', val)
|
||||
this.$emit('onSortTypeChange', {
|
||||
@ -133,7 +142,6 @@ export default {
|
||||
display: block;
|
||||
height: 19px;
|
||||
position: absolute;
|
||||
color: #63e2b7 !important;
|
||||
transition: color 0.2s ease-in-out;
|
||||
font-size: 19px !important;
|
||||
font-weight: 400;
|
||||
|
||||
@ -2,6 +2,9 @@
|
||||
<div
|
||||
ref="tableWrapper"
|
||||
class="n-advance-table__wrapper n-advance-table"
|
||||
:class="{
|
||||
[`n-${synthesizedTheme}-theme`]: synthesizedTheme
|
||||
}"
|
||||
>
|
||||
<div class="n-advance-table__operation">
|
||||
<div class="n-advance-table__operation--left">
|
||||
@ -30,8 +33,9 @@
|
||||
<div class="n-advance-table__tbody">
|
||||
<n-table
|
||||
ref="header"
|
||||
style="padding:0;border-bottom-left-radius:0;border-bottom-right-radius:0;background-color: #2b3147;"
|
||||
style="padding:0;border-bottom-left-radius:0;border-bottom-right-radius:0;"
|
||||
:style="colGroup"
|
||||
class="n-advance-table__header"
|
||||
>
|
||||
<colgroup>
|
||||
<col
|
||||
@ -51,6 +55,10 @@
|
||||
ref="theads"
|
||||
:key="column.key"
|
||||
:style="computeAlign(column)"
|
||||
:class="{
|
||||
'n-advance-table__sortable-column': column.sortable
|
||||
}"
|
||||
@click.native="()=>sortByColumn(column)"
|
||||
>
|
||||
<!-- 当前页全选 -->
|
||||
<n-checkbox
|
||||
@ -64,6 +72,7 @@
|
||||
v-if="column.sortable"
|
||||
:ref="'sorter_' + (column.key || i)"
|
||||
v-model="sortIndexs[column.key || i]"
|
||||
class="n-advance-table__header-icon"
|
||||
:column="column"
|
||||
:index="i"
|
||||
@onSortTypeChange="onSortTypeChange"
|
||||
@ -75,6 +84,7 @@
|
||||
<PopFilter
|
||||
v-if="column.onFilter && (column.filterItems || column.asynsFilterItems)"
|
||||
v-model="selectedFilter[column.key]"
|
||||
class="n-advance-table__header-icon"
|
||||
:column="column"
|
||||
:items="column.filterItems || column.asynsFilterItems"
|
||||
@on-filter="onFilter"
|
||||
@ -187,8 +197,9 @@ import row from '../row/index.js'
|
||||
import SortIcon from '../sortIcon'
|
||||
import PopFilter from '../popFilter'
|
||||
import searchInput from '../searchInput'
|
||||
import Loading from '../loading'
|
||||
import { noopFn } from '../../../utils/index'
|
||||
import withapp from '../../../mixins/withapp'
|
||||
import themeable from '../../../mixins/themeable'
|
||||
|
||||
export default {
|
||||
name: 'NAdvanceTable',
|
||||
@ -196,9 +207,13 @@ export default {
|
||||
row,
|
||||
SortIcon,
|
||||
PopFilter,
|
||||
searchInput,
|
||||
Loading
|
||||
searchInput
|
||||
|
||||
},
|
||||
mixins: [
|
||||
withapp,
|
||||
themeable
|
||||
],
|
||||
props: {
|
||||
search: {
|
||||
/**
|
||||
@ -486,6 +501,11 @@ export default {
|
||||
}
|
||||
})
|
||||
},
|
||||
sortByColumn (column) {
|
||||
if (!column.sortable || column.key === void 0) return
|
||||
const ref = this.$refs['sorter_' + column.key][0]
|
||||
ref.changeSort()
|
||||
},
|
||||
computeAlign (column) {
|
||||
if (column.align) {
|
||||
return {
|
||||
|
||||
@ -1,5 +1,11 @@
|
||||
<template>
|
||||
<div class="n-table">
|
||||
<div
|
||||
class="n-table"
|
||||
:class="{
|
||||
|
||||
[`n-${synthesizedTheme}-theme`]: synthesizedTheme
|
||||
}"
|
||||
>
|
||||
<table>
|
||||
<slot>default table content</slot>
|
||||
</table>
|
||||
@ -7,8 +13,12 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import withapp from '../../../mixins/withapp'
|
||||
import themeable from '../../../mixins/themeable'
|
||||
|
||||
export default {
|
||||
name: 'NTable'
|
||||
name: 'NTable',
|
||||
mixins: [withapp, themeable]
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -1,84 +1,189 @@
|
||||
@import "./mixins/mixins.scss";
|
||||
@import "./themes/vars.scss";
|
||||
@include b(advance-table){
|
||||
@include e(wrapper){
|
||||
width: 100%;
|
||||
}
|
||||
@include e(tbody){
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 3px 20px 6px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
@include e(td-text){
|
||||
&-center{
|
||||
text-align: center;
|
||||
}
|
||||
&-left{
|
||||
text-align: left;
|
||||
}
|
||||
&-right{
|
||||
text-align: right;
|
||||
}
|
||||
@include m(ellipsis){
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
&>*{
|
||||
text-overflow: ellipsis;
|
||||
|
||||
@include themes-mixin {
|
||||
@include b(advance-table) {
|
||||
@include once {
|
||||
@include e(wrapper){
|
||||
width: 100%;
|
||||
}
|
||||
@include e(tbody){
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
border-radius: 12px;
|
||||
}
|
||||
@include e(td-text){
|
||||
&-center{
|
||||
text-align: center;
|
||||
}
|
||||
&-left{
|
||||
text-align: left;
|
||||
}
|
||||
&-right{
|
||||
text-align: right;
|
||||
}
|
||||
@include m(ellipsis){
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
&>*{
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include e(no-data-tip){
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
display: table-cell;
|
||||
}
|
||||
@include e(pagination){
|
||||
margin-top: 27px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
@include e(operation){
|
||||
display: flex;
|
||||
justify-content:space-between;
|
||||
&--right,&--left{
|
||||
display: flex;
|
||||
}
|
||||
|
||||
}
|
||||
@include e(sortable-column) {
|
||||
cursor: pointer;
|
||||
}
|
||||
@include b(table) {
|
||||
table {
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
table-layout: fixed;
|
||||
}
|
||||
&::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border-radius: 2.5px;
|
||||
}
|
||||
// &::-webkit-scrollbar-thumb:hover {
|
||||
// background: rgba(255, 255, 255, 0.3);
|
||||
// }
|
||||
&::-webkit-scrollbar-corner {
|
||||
background: transparent;
|
||||
}
|
||||
&::-webkit-scrollbar:horizontal {
|
||||
height: 5px;
|
||||
}
|
||||
table thead tr th:last-of-type {
|
||||
padding-left: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include e(no-data-tip){
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
display: table-cell;
|
||||
}
|
||||
@include e(pagination){
|
||||
margin-top: 27px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
@include e(operation){
|
||||
display: flex;
|
||||
justify-content:space-between;
|
||||
&--right,&--left{
|
||||
display: flex;
|
||||
@include e(tbody){
|
||||
box-shadow: 0 3px 20px 6px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
@include b(table) {
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border-radius: 2.5px;
|
||||
background: $--table-scrollbar-color;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
@include e(header){
|
||||
background-color: $--table-header-background;
|
||||
i {
|
||||
color:$--table-header-icon-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include b(table) {
|
||||
// background-color: #2b3147;
|
||||
table {
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
table-layout: fixed;
|
||||
// width: auto;
|
||||
}
|
||||
&::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 2.5px;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
&::-webkit-scrollbar-corner {
|
||||
background: transparent;
|
||||
}
|
||||
&::-webkit-scrollbar:horizontal {
|
||||
height: 5px;
|
||||
}
|
||||
table thead tr th:last-of-type {
|
||||
padding-left: 32px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// @include b(advance-table){
|
||||
// @include e(wrapper){
|
||||
// width: 100%;
|
||||
// }
|
||||
// @include e(tbody){
|
||||
// overflow: hidden;
|
||||
// border-radius: 12px;
|
||||
// box-shadow: 0 3px 20px 6px rgba(0, 0, 0, 0.2);
|
||||
// }
|
||||
// @include e(td-text){
|
||||
// &-center{
|
||||
// text-align: center;
|
||||
// }
|
||||
// &-left{
|
||||
// text-align: left;
|
||||
// }
|
||||
// &-right{
|
||||
// text-align: right;
|
||||
// }
|
||||
// @include m(ellipsis){
|
||||
// text-overflow: ellipsis;
|
||||
// overflow: hidden;
|
||||
// white-space: nowrap;
|
||||
// &>*{
|
||||
// text-overflow: ellipsis;
|
||||
// overflow: hidden;
|
||||
// white-space: nowrap;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// @include e(no-data-tip){
|
||||
// padding: 5px;
|
||||
// text-align: center;
|
||||
// width: 100%;
|
||||
// display: table-cell;
|
||||
// }
|
||||
// @include e(pagination){
|
||||
// margin-top: 27px;
|
||||
// display: flex;
|
||||
// justify-content: flex-end;
|
||||
// }
|
||||
// @include e(operation){
|
||||
// display: flex;
|
||||
// justify-content:space-between;
|
||||
// &--right,&--left{
|
||||
// display: flex;
|
||||
// }
|
||||
|
||||
// }
|
||||
|
||||
// @include b(table) {
|
||||
// // background-color: #2b3147;
|
||||
// table {
|
||||
// word-wrap: break-word;
|
||||
// word-break: break-all;
|
||||
// table-layout: fixed;
|
||||
// // width: auto;
|
||||
// }
|
||||
// &::-webkit-scrollbar {
|
||||
// width: 5px;
|
||||
// }
|
||||
// &::-webkit-scrollbar-track {
|
||||
// background: transparent;
|
||||
// }
|
||||
// &::-webkit-scrollbar-thumb {
|
||||
// background: rgba(255, 255, 255, 0.2);
|
||||
// border-radius: 2.5px;
|
||||
// }
|
||||
// &::-webkit-scrollbar-thumb:hover {
|
||||
// background: rgba(255, 255, 255, 0.3);
|
||||
// }
|
||||
// &::-webkit-scrollbar-corner {
|
||||
// background: transparent;
|
||||
// }
|
||||
// &::-webkit-scrollbar:horizontal {
|
||||
// height: 5px;
|
||||
// }
|
||||
// table thead tr th:last-of-type {
|
||||
// padding-left: 32px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
@ -1,55 +1,127 @@
|
||||
@import "./mixins/mixins.scss";
|
||||
@import "./themes/vars.scss";
|
||||
|
||||
@include b(table) {
|
||||
width: 100%;
|
||||
border-radius: 12px;
|
||||
font-size: $table-font-size;
|
||||
overflow: hidden;
|
||||
box-shadow: $table-box-shadow;
|
||||
padding-bottom: 8px;
|
||||
background-color: $table-body-background-color;
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
thead {
|
||||
background-color: $table-header-background-color;
|
||||
color: $primary-text-color;
|
||||
tr {
|
||||
th {
|
||||
padding: 16px 6px 16px 6px;
|
||||
text-align: left;
|
||||
border: none;
|
||||
|
||||
@include themes-mixin {
|
||||
@include b(table) {
|
||||
@include once {
|
||||
width: 100%;
|
||||
border-radius: 12px;
|
||||
font-size: $table-font-size;
|
||||
overflow: hidden;
|
||||
padding-bottom: 8px;
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
thead {
|
||||
tr {
|
||||
th {
|
||||
padding: 12px 6px 12px 6px;
|
||||
text-align: left;
|
||||
border: none;
|
||||
font-weight: 400;
|
||||
}
|
||||
th:nth-child(1) {
|
||||
padding-left: 32px;
|
||||
border-radius: 12px 0 0 0;
|
||||
}
|
||||
th:nth-last-child(1) {
|
||||
padding-left: 32px;
|
||||
border-radius: 0 12px 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
th:nth-child(1) {
|
||||
padding-left: 32px;
|
||||
border-radius: 12px 0 0 0;
|
||||
}
|
||||
th:nth-last-child(1) {
|
||||
padding-left: 32px;
|
||||
border-radius: 0 12px 0 0;
|
||||
tbody {
|
||||
background-color: $--table-body-background;
|
||||
color: $--table-body-color;
|
||||
tr {
|
||||
td {
|
||||
padding: 16px 6px 12px 6px;
|
||||
text-align: left;
|
||||
border: none;
|
||||
}
|
||||
td:nth-child(1) {
|
||||
padding-left: 32px;
|
||||
}
|
||||
td:nth-last-child(1) {
|
||||
padding-left: 32px;
|
||||
}
|
||||
}
|
||||
tr:hover {
|
||||
background-color: $--table-row-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
tbody {
|
||||
background-color: $table-body-background-color;
|
||||
color: $regular-text-color;
|
||||
tr {
|
||||
td {
|
||||
padding: 16px 6px 12px 6px;
|
||||
text-align: left;
|
||||
border: none;
|
||||
}
|
||||
td:nth-child(1) {
|
||||
padding-left: 32px;
|
||||
}
|
||||
td:nth-last-child(1) {
|
||||
padding-left: 32px;
|
||||
background-color: $--table-body-background;
|
||||
box-shadow: $--table-box-shadow;
|
||||
table {
|
||||
thead {
|
||||
background-color: $--table-header-background;
|
||||
color: $--table-header-color;
|
||||
}
|
||||
tbody {
|
||||
background-color: $--table-body-background;
|
||||
color: $--table-body-color;
|
||||
tr:hover {
|
||||
background-color: $--table-row-hover;
|
||||
}
|
||||
}
|
||||
tr:hover {
|
||||
background-color: #2b3147;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// @include b(table) {
|
||||
// width: 100%;
|
||||
// border-radius: 12px;
|
||||
// font-size: $table-font-size;
|
||||
// overflow: hidden;
|
||||
// // box-shadow: $table-box-shadow;
|
||||
// padding-bottom: 8px;
|
||||
// // background-color: $table-body-background-color;
|
||||
// table {
|
||||
// border-collapse: collapse;
|
||||
// width: 100%;
|
||||
// thead {
|
||||
// background-color: $table-header-background-color;
|
||||
// color: $primary-text-color;
|
||||
// tr {
|
||||
// th {
|
||||
// padding: 16px 6px 16px 6px;
|
||||
// text-align: left;
|
||||
// border: none;
|
||||
// }
|
||||
// th:nth-child(1) {
|
||||
// padding-left: 32px;
|
||||
// border-radius: 12px 0 0 0;
|
||||
// }
|
||||
// th:nth-last-child(1) {
|
||||
// padding-left: 32px;
|
||||
// border-radius: 0 12px 0 0;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// tbody {
|
||||
// background-color: $table-body-background-color;
|
||||
// color: $regular-text-color;
|
||||
// tr {
|
||||
// td {
|
||||
// padding: 16px 6px 12px 6px;
|
||||
// text-align: left;
|
||||
// border: none;
|
||||
// }
|
||||
// td:nth-child(1) {
|
||||
// padding-left: 32px;
|
||||
// }
|
||||
// td:nth-last-child(1) {
|
||||
// padding-left: 32px;
|
||||
// }
|
||||
// }
|
||||
// tr:hover {
|
||||
// background-color: #2b3147;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
4
styles/themes/dark/components/AdvanceTable.scss
Normal file
4
styles/themes/dark/components/AdvanceTable.scss
Normal file
@ -0,0 +1,4 @@
|
||||
@mixin setup-dark-advance-table {
|
||||
$--table-header-icon-color: $primary-6 !global;
|
||||
$--table-scrollbar-color: rgba(255, 255, 255, 0.2) !global;
|
||||
}
|
||||
9
styles/themes/dark/components/Table.scss
Normal file
9
styles/themes/dark/components/Table.scss
Normal file
@ -0,0 +1,9 @@
|
||||
@mixin setup-dark-table {
|
||||
$--table-header-background: #2b3147 !global;
|
||||
$--table-body-background: #1f263e !global;
|
||||
$--table-header-color: $neutral-3 !global;
|
||||
$--table-body-color: $neutral-4 !global;
|
||||
$--table-row-hover: $--table-header-background !global;
|
||||
$--table-box-shadow: 0 3px 20px 6px rgba(0, 0, 0, .2) !global;
|
||||
$--table-border: none;
|
||||
}
|
||||
@ -7,6 +7,9 @@
|
||||
@import "components/BasePicker.scss";
|
||||
@import "components/BaseCancelMark.scss";
|
||||
@import "components/Tag.scss";
|
||||
@import "components/Table.scss";
|
||||
@import 'components/AdvanceTable.scss';
|
||||
|
||||
|
||||
@mixin setup-dark-theme () {
|
||||
@include setup-dark-colors();
|
||||
@ -32,4 +35,6 @@
|
||||
@include setup-dark-base-picker;
|
||||
@include setup-dark-base-cancel-mark;
|
||||
@include setup-dark-tag;
|
||||
@include setup-dark-table;
|
||||
@include setup-dark-advance-table;
|
||||
}
|
||||
4
styles/themes/light/components/AdvanceTable.scss
Normal file
4
styles/themes/light/components/AdvanceTable.scss
Normal file
@ -0,0 +1,4 @@
|
||||
@mixin setup-light-advance-table {
|
||||
$--table-header-icon-color: $primary-6 !global;
|
||||
$--table-scrollbar-color: #ababab !global;
|
||||
}
|
||||
9
styles/themes/light/components/Table.scss
Normal file
9
styles/themes/light/components/Table.scss
Normal file
@ -0,0 +1,9 @@
|
||||
@mixin setup-light-table {
|
||||
$--table-header-background: #e8e8e8 !global;
|
||||
$--table-body-background: #fff !global;
|
||||
$--table-header-color: #262626 !global;
|
||||
$--table-body-color: #595959 !global;
|
||||
$--table-row-hover: rgba(0,0,0,0.03) !global;
|
||||
$--table-box-shadow: none !global;
|
||||
$--table-border:1px solid rgba(0,0,0,0.15) !global;
|
||||
}
|
||||
@ -7,6 +7,10 @@
|
||||
@import "components/BasePicker.scss";
|
||||
@import "components/BaseCancelMark.scss";
|
||||
@import "components/Tag.scss";
|
||||
@import "components/Table.scss";
|
||||
@import "components/AdvanceTable.scss";
|
||||
|
||||
|
||||
|
||||
@mixin setup-light-theme () {
|
||||
@include setup-light-colors();
|
||||
@ -34,4 +38,6 @@
|
||||
@include setup-light-base-picker;
|
||||
@include setup-light-base-cancel-mark;
|
||||
@include setup-light-tag;
|
||||
@include setup-light-table;
|
||||
@include setup-light-advance-table;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user