diff --git a/client/components/admin/admin-groups-edit.vue b/client/components/admin/admin-groups-edit.vue index 9ee23b45..476b1272 100644 --- a/client/components/admin/admin-groups-edit.vue +++ b/client/components/admin/admin-groups-edit.vue @@ -27,10 +27,16 @@ v-icon(left) mdi-check span Update Group v-card.mt-3 - v-tabs(v-model='tab', :background-color='$vuetify.theme.dark ? "primary" : "grey darken-2"', fixed-tabs, slider-color='white', show-arrows, dark) - v-tab(key='permissions') Permissions - v-tab(key='rules') Page Rules - v-tab(key='users') Users + v-tabs.grad-tabs(v-model='tab', :color='$vuetify.theme.dark ? `blue` : `primary`', fixed-tabs, show-arrows, icons-and-text) + v-tab(key='permissions') + span Permissions + v-icon mdi-lock-pattern + v-tab(key='rules') + span Page Rules + v-icon mdi-file-lock + v-tab(key='users') + span Users + v-icon mdi-account-group v-tab-item(key='permissions', :transition='false', :reverse-transition='false') group-permissions(v-model='group', @refresh='refresh') diff --git a/client/scss/app.scss b/client/scss/app.scss index aeb79806..09e5804d 100644 --- a/client/scss/app.scss +++ b/client/scss/app.scss @@ -11,6 +11,7 @@ @import 'components/v-data-table'; @import 'components/v-dialog'; @import 'components/v-form'; +@import 'components/v-tabs'; // @import '../libs/twemoji/twemoji-awesome'; // @import '../libs/prism/prism.css'; diff --git a/client/scss/components/v-tabs.scss b/client/scss/components/v-tabs.scss new file mode 100644 index 00000000..2cc0ad1b --- /dev/null +++ b/client/scss/components/v-tabs.scss @@ -0,0 +1,10 @@ +.grad-tabs > .v-tabs-bar { + background-image: linear-gradient(to top, rgba(#000, .025), transparent); + border-bottom: 1px solid rgba(#000, .1); + border-radius: 4px 4px 0 0; + + @at-root .theme--dark & { + background-image: linear-gradient(to bottom, rgba(#FFF, .05), transparent); + border-bottom-color: transparent; + } +}