Skip to content

Janis / btflags

Go to a project
Toggle navigation
Toggle navigation pinning
343e6dd1 by Joshua Tundag
Options

update example

1 parent 24a15569
Inline Side-by-side
Showing 1 changed file with 369 additions and 391 deletions
examples/Table.vue
<script>
import FlagsService from './../services/Flags';
import Vue from 'vue'
export default {
props: {
errorPosition: {
default: 'static'
}
},
created(){
},
data(){
return {
isEditing: false,
dialogPostFormVisible: false,
selected: null,
flag: {
name: null,
is_encrypted: true,
is_filtered: true,
encrypted_name: null,
has_default: false,
default: null,
accepted_values: [
{
value: null,
encrypted_value: null
}
]
},
errors: [],
tableOptions: {
perPage: 10,
columns: [
......@@ -67,10 +42,10 @@
}
],
css: {
tableClass: 'table table-bordered table-hover table-striped',
tableClass: 'ui red selectable celled stackable attached table vuetable-wrapper',
loadingClass: 'loading',
ascendingIcon: 'fa fa-caret-up',
descendingIcon: 'fa fa-caret-down',
ascendingIcon: 'blue chevron up icon',
descendingIcon: 'blue chevron down icon',
detailRowClass: 'vuetable-detail-row',
sortHandleIcon: 'grey sidebar icon'
}
......@@ -78,41 +53,79 @@
loading: false,
sortOrder: [
{
field: 'flags.name',
direction: 'desc'
field: 'u.date_created',
direction: 'asc'
}
],
moreParams: {
filter: null,
date_range: '',
date_from: null,
date_to: null,
search: null
},
paginationCss: {
wrapperClass: 'col-md-6 text-right',
wrapperClass: 'ui right floated pagination menu',
activeClass: 'active large',
disabledClass: 'disabled',
pageClass: 'item',
linkClass: 'icon item',
paginationClass: 'pagination-box pagination',
paginationInfoClass: 'col-md-6',
paginationClass: 'ui bottom attached segment grid',
paginationInfoClass: 'left floated left aligned six wide column',
icons: {
first: 'fa fa-angle-double-left',
prev: 'fa fa-chevron-left',
next: 'fa fa-chevron-right',
last: 'fa fa-angle-double-right'
first: 'angle double left icon',
prev: 'left chevron icon',
next: 'right chevron icon',
last: 'angle double right icon',
}
},
paginationInfoClass: 'col-md-6',
tmpDateTo: null,
tmpDateFrom: null,
total: 0
tmpDateTo: null,
timeout: null,
errors: [],
isEditing: false,
flag: {
name: null,
is_encrypted: true,
is_filtered: true,
encrypted_name: null,
has_default: false,
default: null,
accepted_values: [
{
value: null,
encrypted_value: null
}
]
}
};
},
methods: {
__capitalize(str){
return str.replace(/\b\w/g, (l) => l.toUpperCase());
__formatDate(value, fmt){
if (value == null) return ''
fmt = (typeof fmt == 'undefined') ? 'D MMM YYYY' : fmt;
return moment(value, 'YYYY-MM-DD').format(fmt);
},
getSortParam: function(sortOrder) {
return sortOrder.map(function(sort) {
return (sort.direction === 'desc' ? '+' : '') + sort.field
}).join(',')
},
setFilter(){
this.moreParams = {
search: this.moreParams.search
};
this.$refs.vuetable.changePage(1);
this.$nextTick(() => {
this.$refs.vuetable.reload();
});
},
searchKeyword(){
clearTimeout(this.timeout);
this.timeout = setTimeout(() => {
this.setFilter();
}, 500);
},
resetFilter(){
this.moreParams.search = '';
this.setFilter();
},
onPaginationData(paginationData){
this.$refs.pagination.setPaginationData(paginationData);
this.$refs.paginationInfo.setPaginationData(paginationData);
......@@ -120,28 +133,26 @@
onChangePage(page){
this.$refs.vuetable.changePage(page);
},
setFilter(){
this.moreParams = {
filter: this.moreParams.filter
};
this.$nextTick(() => {
this.$refs.vuetable.refresh();
});
},
resetFilter(){
this.moreParams.filter = '';
this.setFilter();
},
getSortParam: function(sortOrder) {
return sortOrder.map(function(sort) {
return (sort.direction === 'desc' ? '+' : '') + sort.field
}).join(',')
},
togglePostFormModal(){
this.resetFields();
this.isEditing = false;
this.dialogPostFormVisible = true;
showModal(){
$('#flag-creation-modal').show();
},
closeModal(){
$('#flag-creation-modal').hide();
},
addFlagValue(){
this.flag.accepted_values.push({
value: null,
encrypted_value: null
})
},
removeFlagValue(index){
this.flag.accepted_values.splice(index, 1)
},
copyNameIfNotEncrypted(){
if(!this.flag.is_encrypted) this.flag.encrypted_name = this.flag.name
},
copyValueOfIfNotEncrypted(acceptedValue){
if(!this.flag.is_encrypted) acceptedValue.encrypted_value = acceptedValue.value
},
_checkIfFlagIsEncrypted(){
if(!this.flag.is_encrypted){
......@@ -163,41 +174,59 @@
if(this.flag.is_filtered) return false
if(!this.flag.has_default) this.flag.default = null;
},
createFlag(){
createFlag(){
this.closeModal();
this.loading = true;
this.errors = [];
this._checkIfFlagIsFiltered();
this._checkIfFlagIsEncrypted();
this._checkIfFlagHasDefaultValue();
FlagsService.create(this.flag)
this.$http.post('/admin/api/create_flag', this.flag)
.then(({data}) => {
data = typeof data == 'string' || data instanceof String ? JSON.parse(data) : data;
if(!data.success){
this.loading = false;
this.errors = data.errors;
this.showModal();
return false;
}
this.resetFields();
this.dialogPostFormVisible = false;
this.closeModal();
this.loading = false;
this.errors = [];
this.$notify({
title: 'Success',
message: data.message,
type: 'success'
});
Lobibox.notify('success', {
size: 'mini',
rounded: false,
position: 'center top',
msg: data.message
})
this.$nextTick(() => {
this.$refs.vuetable.reload();
});
});
},
},
resetFields(){
this.flag = {
name: null,
is_encrypted: true,
is_filtered: true,
encrypted_name: null,
has_default: false,
default: null,
accepted_values: [
{
value: null,
encrypted_value: null
}
]
}
},
toggleEdit(flag){
this.showWarningMessage();
this.isEditing = true;
this.resetFields();
this.dialogPostFormVisible = true;
this.showModal();
this.flag = Object.assign(
JSON.parse(JSON.stringify(flag)),
{
......@@ -212,7 +241,7 @@
this._checkIfFlagIsFiltered();
this._checkIfFlagIsEncrypted();
this._checkIfFlagHasDefaultValue();
FlagsService.update(this.flag)
this.$http.post('/admin/api/update_flag', this.flag)
.then(({data}) => {
if(!data.success){
this.loading = false;
......@@ -221,358 +250,307 @@
}
this.resetFields();
this.dialogPostFormVisible = false;
this.closeModal();
this.isEditing = false;
this.loading = false;
this.errors = [];
this.$notify({
title: 'Success',
message: data.message,
type: 'success'
});
Lobibox.notify('success', {
size: 'mini',
rounded: false,
position: 'center top',
msg: data.message
});
this.$nextTick(() => {
this.$refs.vuetable.reload();
});
});
},
toggleDelete(flag){
this.showWarningMessage();
this.selected = flag;
this.$refs.deleteConfirmationModal.open();
},
cancelDelete(){
this.selected = null;
this.$refs.deleteConfirmationModal.close();
},
remove(){
this.loading = true;
FlagsService.delete(this.selected)
.then(({data}) => {
this.loading = false;
this.selected = null;
this.$refs.deleteConfirmationModal.close();
swal({
title: "Confirm",
text: "Are you sure you want to delete this flag?",
icon: "warning",
buttons: true,
dangerMode: true,
})
.then((willDelete) => {
if (willDelete) {
this.loading = true;
Vue.http.post('/admin/api/delete_flag', flag)
.then(({data}) => {
this.loading = false;
if(!data.success){
this.$notify({
title: 'Error',
message: data.message,
type: 'error'
});
return false;
}
if(!data.success){
Lobibox.notify('success', {
size: 'mini',
rounded: false,
position: 'center top',
msg: data.message
});
return false;
}
this.$notify({
title: 'Success',
message: data.message,
type: 'success'
});
this.$nextTick(() => {
this.$refs.vuetable.reload();
});
Lobibox.notify('success', {
size: 'mini',
rounded: false,
position: 'center top',
msg: data.message
});
this.$nextTick(() => {
this.$refs.vuetable.reload();
});
});
},
resetFields(){
this.flag = {
name: null,
is_encrypted: true,
is_filtered: true,
encrypted_name: null,
has_default: false,
default: null,
accepted_values: [
{
value: null,
encrypted_value: null
}
]
}
},
addFlagValue(){
this.flag.accepted_values.push({
value: null,
encrypted_value: null
})
},
removeFlagValue(index){
this.flag.accepted_values.splice(index, 1)
},
copyNameIfNotEncrypted(){
if(!this.flag.is_encrypted) this.flag.encrypted_name = this.flag.name
},
copyValueOfIfNotEncrypted(acceptedValue){
if(!this.flag.is_encrypted) acceptedValue.encrypted_value = acceptedValue.value
},
showWarningMessage(){
this.$refs.moreWarningModal.open();
}
},
watch: {
dialogPostFormVisible(to){
if(!to) this.errors = [];
},
'flag.is_filtered'(to, from){
this.flag.has_default = false
if(!from) this.flag.default = null;
},
'flag.default'(to, from){
if(to) this.flag.has_default = true
},
'flag.has_default'(to, from){
if(!to) this.flag.default = null;
}
});
}
}
}
</script>
<template>
<div id="lfusa-flag-table">
<lfusa-loading-overlay :loading="loading"></lfusa-loading-overlay>
<div id="customers-list" class="ui segment">
<div class="ui active dimmer" v-if="loading">
<div class="ui massive text loader">Loading</div>
</div>
<div class="row">
<div class="col-md-8">
<!-- label / search -->
<div class="filter-field">
<div class="input-group input-group-sm">
<span class="input-group-addon" id="sizing-addon3"><i class="fa fa-search"></i></span>
<input type="text" placeholder="Search" class="form-control" id="search" @keypress.enter="setFilter" v-model="moreParams.filter">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-3">
<div class="form-group">
<div class="form-inline">
<div class="ui icon input" style="width: 100%">
<input type="text" placeholder="Search..." v-model="moreParams.search" @keyup.enter="setFilter" @keyup="searchKeyword">
<i class="inverted circular search link icon" @click="setFilter"></i>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<button type="button"
class="ui positive button icon"
title="Create New"
@click="showModal">
Create New
</button>
</div>
</div>
<!-- /label / search -->
<div class="clearfix"></div>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-default btn-success btn-md pull-right" @click="togglePostFormModal">Create</button>
</div>
</div>
<vuetable ref="vuetable"
api-url="/admin/api/get_flags_for_table"
:fields="tableOptions.columns"
:query-params="{ sort: 'sortOrder', page: 'page', perPage: 'perPage' }"
:css="tableOptions.css"
:sort-order="sortOrder"
:per-page="tableOptions.perPage"
:append-params="moreParams"
pagination-path=""
@vuetable:loading="loading = true"
@vuetable:load-success="loading = false"
@vuetable:pagination-data="onPaginationData">
<template slot="actions" scope="props">
<div class="table-button-container" v-if="!parseInt(props.rowData.is_default)">
<div class="btn-group">
<button
type="button"
class="btn btn-xs btn-success dropdown-toggle"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
More
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<a href="#" @click="toggleEdit(props.rowData)">
<i class="fa fa-pencil"></i>
Edit
</a>
</li>
<li>
<a href="#" @click="toggleDelete(props.rowData)">
<i class="fa fa-trash"></i>
Delete
</a>
</li>
</ul>
</div>
</div>
</template>
</vuetable>
<div class="table-pagination">
<vuetable-pagination-info ref="paginationInfo" :css="{ infoClass: 'col-md-6' }"></vuetable-pagination-info>
<vuetable-pagination
ref="pagination"
@vuetable-pagination:change-page="onChangePage"
:css="paginationCss"></vuetable-pagination>
<div class="clearfix"></div>
</div>
<el-dialog :title="isEditing ? 'Edit Flag' : 'Create New Flag'" :close-on-click-modal="false" class="field-options-dialog" v-model="dialogPostFormVisible">
<form @submit.prevent action="#">
<div class="panel panel-danger" :class="errorPosition" v-if="errors && errors.length">
<div class="panel-body">
<ul>
<li class="text-left text-danger error-text" v-for="(error, index) in errors" :key="index">
{{ error }}
</li>
</ul>
<div class="row">
<div class="col-sm-12">
<div class="ui">
<vuetable ref="vuetable"
api-url="/admin/api/get_flags_for_table"
:fields="tableOptions.columns"
:query-params="{ sort: 'sortOrder', page: 'page', perPage: 'perPage' }"
:css="tableOptions.css"
:sort-order="sortOrder"
:per-page="tableOptions.perPage"
:append-params="moreParams"
pagination-path=""
@vuetable:loading="loading = true"
@vuetable:load-success="loading = false"
@vuetable:pagination-data="onPaginationData">
<template slot="actions" scope="props">
<div class="table-button-container text-center" v-if="!parseInt(props.rowData.is_default)">
<a href="#"
@click="toggleEdit(props.rowData)"
class="btn bs-btn btn-xs btn-lineDark">
<i class="fa fa-pencil"></i>
Edit
</a>
<a href="#"
@click="toggleDelete(props.rowData)"
class="btn bs-btn btn-xs btn-lineDark">
<i class="fa fa-trash"></i>
Delete
</a>
</div>
</template>
</vuetable>
<div class="table-pagination">
<vuetable-pagination-info ref="paginationInfo" :css="{ infoClass: 'col-md-6' }"></vuetable-pagination-info>
<vuetable-pagination
ref="pagination"
@vuetable-pagination:change-page="onChangePage"
:css="paginationCss"></vuetable-pagination>
<div class="clearfix"></div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-xs-12">
<label for="is_encrypted">
Encrypted? <el-switch
v-model="flag.is_encrypted"
on-color="#13ce66"
off-color="#ff4949"
on-text="Yes"
off-text="No"
:width="68">
</el-switch>
</label>
<label for="is_encrypted">
Filtered? <el-switch
v-model="flag.is_filtered"
on-color="#13ce66"
off-color="#ff4949"
on-text="Yes"
off-text="No"
:width="68">
</el-switch>
</label>
<label for="is_encrypted" v-if="!flag.is_filtered">
Has Default Value? <el-switch
v-model="flag.has_default"
on-color="#13ce66"
off-color="#ff4949"
on-text="Yes"
off-text="No"
:width="68">
</el-switch>
</label>
</div>
</div>
</div>
</div>
<div class="modal" role="dialog" id="flag-creation-modal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title pull-left">
{{ isEditing ? 'Edit Flag' : 'Create New Flag' }}
</h3>
<button type="button pull-right" class="close" @click="closeModal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="form-group">
<div class="row">
<div :class="{ 'col-xs-10': !flag.is_encrypted , 'col-xs-5': flag.is_encrypted, 'col-xs-12': !flag.is_encrypted && !flag.is_filtered}">
<label for="flag_name" class="control-label">Flag Name:</label>
<input type="text"
name="flag_name" id="flag_name"
class="form-control interview-control -text round-field"
v-model="flag.name"
@input="copyNameIfNotEncrypted"
autocomplete="off">
</div>
<div class="encryption-arrows" v-if="flag.is_encrypted">
<div class="text-center" style="margin-top: 36px;">
<i class="fa fa-arrows-h" style="font-size: 1.5em;font-weight: 300;"></i>
<div class="modal-body">
<form @submit.prevent action="#">
<div class="panel panel-danger" v-if="errors && errors.length">
<div class="panel-body">
<ul>
<li class="text-left text-danger error-text" v-for="(error, index) in errors" :key="index">
{{ error }}
</li>
</ul>
</div>
</div>
<div class="col-xs-5" v-if="flag.is_encrypted">
<label for="encrypted_name" class="control-label">Encrypted Flag Name:</label>
<input type="text" name="encrypted_name" id="encrypted_name" class="form-control interview-control -text round-field" v-model="flag.encrypted_name" autocomplete="off">
<div class="form-group">
<div class="row">
<div class="col-xs-12">
<label for="is_encrypted">
<input
type="checkbox"
name="is_encrypted"
id="is_encrypted"
v-model="flag.is_encrypted"> Encrypted?
</label>
<label for="is_filtered">
<input
type="checkbox"
name="is_filtered"
id="is_filtered"
v-model="flag.is_filtered"> Filtered?
</label>
<label for="has_default" v-if="!flag.is_filtered">
<input
type="checkbox"
name="has_default"
id="has_default"
v-model="flag.has_default"> Has Default Value?
</label>
</div>
</div>
</div>
</div>
</div>
<div class="form-group" v-if="flag.has_default && !flag.is_filtered">
<div class="row">
<div class="col-xs-12">
<label for="accepted_value" class="control-label">Default Value:</label>
<input type="text"
name="accepted_value"
id="accepted_value"
class="form-control interview-control -text round-field"
v-model="flag.default"
autocomplete="off">
<div class="form-group">
<div class="row">
<div :class="{ 'col-xs-10': !flag.is_encrypted , 'col-xs-5': flag.is_encrypted, 'col-xs-12': !flag.is_encrypted && !flag.is_filtered}">
<label style="margin-bottom: 10px;" for="flag_name" class="control-label">Flag Name:</label>
<input type="text"
name="flag_name" id="flag_name"
class="form-control interview-control -text round-field"
v-model="flag.name"
@input="copyNameIfNotEncrypted"
autocomplete="off">
</div>
<div class="encryption-arrows" v-if="flag.is_encrypted">
<div class="text-center" style="margin-top: 32px;">
<i class="fa fa-arrows-h" style="font-size: 1.5em;font-weight: 300;"></i>
</div>
</div>
<div class="col-xs-5" v-if="flag.is_encrypted">
<label style="margin-bottom: 10px;" for="encrypted_name" class="control-label">Encrypted Flag Name:</label>
<input type="text" name="encrypted_name" id="encrypted_name" class="form-control interview-control -text round-field" v-model="flag.encrypted_name" autocomplete="off">
</div>
</div>
</div>
</div>
</div>
<div class="form-group"
v-for="(accepted_value, index) in flag.accepted_values"
:key="index"
v-if="flag.is_filtered">
<div class="row">
<div :class="{ 'col-xs-10': !flag.is_encrypted , 'col-xs-5': flag.is_encrypted}">
<label for="accepted_value" class="control-label">Value:</label>
<label :for="`as_default_${index}`" class="pull-right">
Set as Default
<input type="checkbox"
<div class="form-group" v-if="flag.has_default && !flag.is_filtered">
<div class="row">
<div class="col-xs-12">
<label for="accepted_value" class="control-label">Default Value:</label>
<input type="text"
name="accepted_value"
id="accepted_value"
class="form-control interview-control -text round-field"
v-model="flag.default"
:true-value="accepted_value.encrypted_value"
:false-value="null"
:name="`as_default_${index}`"
:id="`as_default_${index}`">
</label>
<input type="text"
name="accepted_value"
id="accepted_value"
class="form-control interview-control -text round-field"
v-model="accepted_value.value"
@input="copyValueOfIfNotEncrypted(accepted_value)"
autocomplete="off">
</div>
<div class="encryption-arrows" v-if="flag.is_encrypted">
<div class="text-center" style="margin-top: 36px;">
<i class="fa fa-arrows-h" style="font-size: 1.5em;font-weight: 300;"></i>
autocomplete="off">
</div>
</div>
</div>
<div class="col-xs-5" v-if="flag.is_encrypted">
<label for="encrypted_accepted_value" class="control-label">Encrypted Value:</label>
<input type="text" name="encrypted_accepted_value" id="encrypted_accepted_value" class="form-control interview-control -text round-field" v-model="accepted_value.encrypted_value" autocomplete="off">
</div>
<div style="margin-top: 26px;">
<button type="button"
class="btn btn-md btn-success"
@click="addFlagValue"
v-if="index == (flag.accepted_values.length - 1)">
<i class="fa fa-plus"></i>
</button>
<button type="button"
class="btn btn-md btn-danger"
@click="removeFlagValue(index)"
v-if="index > 0">
<i class="fa fa-minus"></i>
</button>
<div class="form-group"
v-for="(accepted_value, index) in flag.accepted_values"
:key="index"
v-if="flag.is_filtered">
<div class="row">
<div :class="{ 'col-xs-10': !flag.is_encrypted , 'col-xs-5': flag.is_encrypted}">
<label for="accepted_value" class="control-label">Value:</label>
<label style="margin-bottom: 10px;" :for="`as_default_${index}`" class="pull-right">
Set as Default
<input type="checkbox"
v-model="flag.default"
:true-value="accepted_value.encrypted_value"
:false-value="null"
:name="`as_default_${index}`"
:id="`as_default_${index}`">
</label>
<input type="text"
name="accepted_value"
id="accepted_value"
class="form-control interview-control -text round-field"
v-model="accepted_value.value"
@input="copyValueOfIfNotEncrypted(accepted_value)"
autocomplete="off">
</div>
<div class="encryption-arrows" v-if="flag.is_encrypted">
<div class="text-center" style="margin-top: 32px;">
<i class="fa fa-arrows-h" style="font-size: 1.5em;font-weight: 300;"></i>
</div>
</div>
<div class="col-xs-5" v-if="flag.is_encrypted">
<label style="margin-bottom: 10px;" for="encrypted_accepted_value" class="control-label">Encrypted Value:</label>
<input type="text" name="encrypted_accepted_value" id="encrypted_accepted_value" class="form-control interview-control -text round-field" v-model="accepted_value.encrypted_value" autocomplete="off">
</div>
<div style="margin-top: 32px;">
<button type="button"
class="btn bs-btn btn-xs btn-primary"
@click="addFlagValue"
v-if="index == (flag.accepted_values.length - 1)">
<i class="fa fa-plus"></i>
</button>
<button type="button"
class="btn bs-btn btn-xs btn-danger"
@click="removeFlagValue(index)"
v-if="index > 0">
<i class="fa fa-minus"></i>
</button>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" @click="closeModal">Cancel</button>
<button type="button" class="btn btn-primary" @click="createFlag" v-if="!isEditing">Create</button>
<button type="button" class="btn btn-primary" @click="update" v-else>Save</button>
</div>
</div>
</form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogPostFormVisible = false">Cancel</el-button>
<el-button type="primary" @click="createFlag" v-if="!isEditing">Create</el-button>
<el-button type="primary" @click="update" v-else>Save</el-button>
</span>
</el-dialog>
<sweet-modal icon="warning" ref="deleteConfirmationModal" hide-close-button blocking overlay-theme="dark" modal-theme="dark">
Are you sure you want to delete this flag?
<div slot="button">
<button type="button" class="btn btn-md modal-btn -default" @click="cancelDelete" v-if="!loading">No</button>
<button type="button" class="btn btn-md modal-btn -danger" @click="remove">Yes</button>
</div>
</sweet-modal>
<sweet-modal icon="warning" ref="moreWarningModal" hide-close-button overlay-theme="dark" modal-theme="dark">
This may have impact on existing campaigns.
</sweet-modal>
</div>
</div>
</template>
<style lang="sass">
#lfusa-flag-table {
.interview-control.-text {
height: 40px;
font-size: 14px;
}
<style scoped>
.table>caption+thead>tr:first-child>td, .table>caption+thead>tr:first-child>th, .table>colgroup+thead>tr:first-child>td, .table>colgroup+thead>tr:first-child>th, .table>thead:first-child>tr:first-child>td, .table>thead:first-child>tr:first-child>th{
font-size: 0.9em !important;
}
.dropdown-menu{
min-width: 90px;
}
.ui.right.floated.pagination.menu{
clear: both;
}
.vuetable-pagination-info{
.btn-nav.icon.item.disabled:first-child,
.btn-nav.icon.item.disabled:nth-child(2){
margin-right: -5px;
}
.vuetable-pagination-info{
padding-top: 10px;
}
.btn-nav.icon.item.disabled:last-child,
.btn-nav.icon.item.disabled:nth-last-child(2){
margin-left: -5px;
}
}
.ui.input.custom{
width: 100%;
}
.encryption-arrows{
display: inline-block;
float: left;
}
.ui.form select.custom{
height: 43px;
}
.encryption-arrows{
display: inline-block;
float: left;
}
</style>
\ No newline at end of file
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!