Install apexcharts and tests some graphs.
This commit is contained in:
mateuswetah
parent
4bb7aae467
commit
cf4f42d5b1
|
|
@ -1665,6 +1665,19 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"apexcharts": {
|
||||||
|
"version": "3.24.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.24.0.tgz",
|
||||||
|
"integrity": "sha512-iT6czJCIVrmAtrcO90MZTQCvC+xi6R6Acf0jNH/d40FVTtCfcqECuKIh5iAMyOTtgUb7+fQ8rbadH2bm1kbL9Q==",
|
||||||
|
"requires": {
|
||||||
|
"svg.draggable.js": "^2.2.2",
|
||||||
|
"svg.easing.js": "^2.0.0",
|
||||||
|
"svg.filter.js": "^2.0.2",
|
||||||
|
"svg.pathmorphing.js": "^0.1.3",
|
||||||
|
"svg.resize.js": "^1.4.3",
|
||||||
|
"svg.select.js": "^3.0.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
"aproba": {
|
"aproba": {
|
||||||
"version": "1.2.0",
|
"version": "1.2.0",
|
||||||
"resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
|
||||||
|
|
@ -9983,6 +9996,70 @@
|
||||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
|
||||||
"integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc="
|
"integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc="
|
||||||
},
|
},
|
||||||
|
"svg.draggable.js": {
|
||||||
|
"version": "2.2.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz",
|
||||||
|
"integrity": "sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==",
|
||||||
|
"requires": {
|
||||||
|
"svg.js": "^2.0.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"svg.easing.js": {
|
||||||
|
"version": "2.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/svg.easing.js/-/svg.easing.js-2.0.0.tgz",
|
||||||
|
"integrity": "sha1-iqmUawqOJ4V6XEChDrpAkeVpHxI=",
|
||||||
|
"requires": {
|
||||||
|
"svg.js": ">=2.3.x"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"svg.filter.js": {
|
||||||
|
"version": "2.0.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/svg.filter.js/-/svg.filter.js-2.0.2.tgz",
|
||||||
|
"integrity": "sha1-kQCOFROJ3ZIwd5/L5uLJo2LRwgM=",
|
||||||
|
"requires": {
|
||||||
|
"svg.js": "^2.2.5"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"svg.js": {
|
||||||
|
"version": "2.7.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/svg.js/-/svg.js-2.7.1.tgz",
|
||||||
|
"integrity": "sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA=="
|
||||||
|
},
|
||||||
|
"svg.pathmorphing.js": {
|
||||||
|
"version": "0.1.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz",
|
||||||
|
"integrity": "sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==",
|
||||||
|
"requires": {
|
||||||
|
"svg.js": "^2.4.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"svg.resize.js": {
|
||||||
|
"version": "1.4.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/svg.resize.js/-/svg.resize.js-1.4.3.tgz",
|
||||||
|
"integrity": "sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==",
|
||||||
|
"requires": {
|
||||||
|
"svg.js": "^2.6.5",
|
||||||
|
"svg.select.js": "^2.1.2"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"svg.select.js": {
|
||||||
|
"version": "2.1.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-2.1.2.tgz",
|
||||||
|
"integrity": "sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==",
|
||||||
|
"requires": {
|
||||||
|
"svg.js": "^2.2.5"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"svg.select.js": {
|
||||||
|
"version": "3.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-3.0.1.tgz",
|
||||||
|
"integrity": "sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==",
|
||||||
|
"requires": {
|
||||||
|
"svg.js": "^2.6.5"
|
||||||
|
}
|
||||||
|
},
|
||||||
"swiper": {
|
"swiper": {
|
||||||
"version": "5.4.5",
|
"version": "5.4.5",
|
||||||
"resolved": "https://registry.npmjs.org/swiper/-/swiper-5.4.5.tgz",
|
"resolved": "https://registry.npmjs.org/swiper/-/swiper-5.4.5.tgz",
|
||||||
|
|
@ -10699,6 +10776,11 @@
|
||||||
"resolved": "https://registry.npmjs.org/vue/-/vue-2.6.11.tgz",
|
"resolved": "https://registry.npmjs.org/vue/-/vue-2.6.11.tgz",
|
||||||
"integrity": "sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ=="
|
"integrity": "sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ=="
|
||||||
},
|
},
|
||||||
|
"vue-apexcharts": {
|
||||||
|
"version": "1.6.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/vue-apexcharts/-/vue-apexcharts-1.6.0.tgz",
|
||||||
|
"integrity": "sha512-sT6tuVTLBwfH3TA7azecDNS/W70bmz14ZJI7aE7QIqcG9I6OywyH7x3hcOeY1v1DxttI8Svc5RuYj4Dd+A5F4g=="
|
||||||
|
},
|
||||||
"vue-awesome-swiper": {
|
"vue-awesome-swiper": {
|
||||||
"version": "4.1.1",
|
"version": "4.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/vue-awesome-swiper/-/vue-awesome-swiper-4.1.1.tgz",
|
"resolved": "https://registry.npmjs.org/vue-awesome-swiper/-/vue-awesome-swiper-4.1.1.tgz",
|
||||||
|
|
|
||||||
|
|
@ -8,8 +8,9 @@
|
||||||
"build-prod": "cross-env NODE_ENV=production webpack --config webpack.prod.js --display-error-details --progress --hide-modules"
|
"build-prod": "cross-env NODE_ENV=production webpack --config webpack.prod.js --display-error-details --progress --hide-modules"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"blurhash": "^1.1.3",
|
"apexcharts": "^3.24.0",
|
||||||
"axios": "^0.21.1",
|
"axios": "^0.21.1",
|
||||||
|
"blurhash": "^1.1.3",
|
||||||
"buefy": "^0.9.4",
|
"buefy": "^0.9.4",
|
||||||
"bulma": "^0.9.1",
|
"bulma": "^0.9.1",
|
||||||
"css-vars-ponyfill": "^2.3.1",
|
"css-vars-ponyfill": "^2.3.1",
|
||||||
|
|
@ -23,6 +24,7 @@
|
||||||
"t": "^0.5.1",
|
"t": "^0.5.1",
|
||||||
"v-tooltip": "^2.0.3",
|
"v-tooltip": "^2.0.3",
|
||||||
"vue": "^2.6.11",
|
"vue": "^2.6.11",
|
||||||
|
"vue-apexcharts": "^1.6.0",
|
||||||
"vue-awesome-swiper": "^4.1.1",
|
"vue-awesome-swiper": "^4.1.1",
|
||||||
"vue-blurhash": "^0.1.4",
|
"vue-blurhash": "^0.1.4",
|
||||||
"vue-masonry-css": "^1.0.3",
|
"vue-masonry-css": "^1.0.3",
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
<template>
|
||||||
|
<article class="tile is-child">
|
||||||
|
<apexchart
|
||||||
|
height="350"
|
||||||
|
:options="chartOptions"
|
||||||
|
:series="chartSeries" />
|
||||||
|
</article>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
chartTitle: String,
|
||||||
|
chartOptions: Object,
|
||||||
|
chartSeries: Array
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -3,6 +3,7 @@ import store from '../../admin/js/store/store';
|
||||||
import router from './reports-router';
|
import router from './reports-router';
|
||||||
import VTooltip from 'v-tooltip';
|
import VTooltip from 'v-tooltip';
|
||||||
import { Snackbar, Modal } from 'buefy';
|
import { Snackbar, Modal } from 'buefy';
|
||||||
|
import VueApexCharts from 'vue-apexcharts';
|
||||||
|
|
||||||
// Vue Dev Tools!
|
// Vue Dev Tools!
|
||||||
Vue.config.devtools = process && process.env && process.env.NODE_ENV === 'development';
|
Vue.config.devtools = process && process.env && process.env.NODE_ENV === 'development';
|
||||||
|
|
@ -10,12 +11,18 @@ Vue.config.devtools = process && process.env && process.env.NODE_ENV === 'develo
|
||||||
import { I18NPlugin } from './wp-i18n-plugin';
|
import { I18NPlugin } from './wp-i18n-plugin';
|
||||||
|
|
||||||
import ReportsPage from '../reports.vue';
|
import ReportsPage from '../reports.vue';
|
||||||
|
import ChartBlock from '../components/chart-block.vue';
|
||||||
|
|
||||||
|
Vue.use(VueApexCharts)
|
||||||
|
|
||||||
Vue.use(I18NPlugin);
|
Vue.use(I18NPlugin);
|
||||||
Vue.use(VTooltip);
|
Vue.use(VTooltip);
|
||||||
Vue.use(Snackbar);
|
Vue.use(Snackbar);
|
||||||
Vue.use(Modal);
|
Vue.use(Modal);
|
||||||
|
|
||||||
|
Vue.component('chart-block', ChartBlock);
|
||||||
|
Vue.component('apexchart', VueApexCharts);
|
||||||
|
|
||||||
// Changing title of pages
|
// Changing title of pages
|
||||||
router.beforeEach((to, from, next) => {
|
router.beforeEach((to, from, next) => {
|
||||||
document.title = to.meta.title;
|
document.title = to.meta.title;
|
||||||
|
|
|
||||||
|
|
@ -1,17 +1,238 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<h1 class="wp-heading-inline">{{ $route.meta.title }}</h1>
|
<h1 class="wp-heading-inline">{{ $route.meta.title }}</h1>
|
||||||
|
<div class="tile is-ancestor is-vertical">
|
||||||
|
<div class="tile">
|
||||||
|
<div class="tile is-parent">
|
||||||
|
<chart-block
|
||||||
|
:chart-series="chartSeries1"
|
||||||
|
:chart-options="chartOptions1" />
|
||||||
|
<chart-block
|
||||||
|
:chart-series="chartSeries2"
|
||||||
|
:chart-options="chartOptions2" />
|
||||||
|
</div>
|
||||||
|
<div class="tile is-parent">
|
||||||
|
<chart-block
|
||||||
|
:chart-series="chartSeries3"
|
||||||
|
:chart-options="chartOptions3" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tile is-parent">
|
||||||
|
<chart-block
|
||||||
|
:chart-series="chartSeries4"
|
||||||
|
:chart-options="chartOptions4" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
//import { mapActions, mapGetters } from 'vuex';
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "ReportsList",
|
name: "ReportsList",
|
||||||
data() {
|
data() {
|
||||||
return {}
|
return {
|
||||||
},
|
chartSeries1: [44, 55, 13, 43, 22],
|
||||||
|
chartOptions1: {
|
||||||
|
chart: {
|
||||||
|
width: 380,
|
||||||
|
type: 'pie',
|
||||||
|
},
|
||||||
|
labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E'],
|
||||||
|
|
||||||
|
title: {
|
||||||
|
text: 'Pie chart'
|
||||||
|
},
|
||||||
|
responsive: [{
|
||||||
|
breakpoint: 480,
|
||||||
|
options: {
|
||||||
|
chart: {
|
||||||
|
width: 200
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
position: 'bottom'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
chartSeries2: [
|
||||||
|
{
|
||||||
|
name: 'Marine Sprite',
|
||||||
|
data: [44, 55, 41, 37, 22]
|
||||||
|
}, {
|
||||||
|
name: 'Striking Calf',
|
||||||
|
data: [53, 32, 33, 52, 13]
|
||||||
|
}, {
|
||||||
|
name: 'Tank Picture',
|
||||||
|
data: [12, 17, 11, 9, 15]
|
||||||
|
}, {
|
||||||
|
name: 'Bucket Slope',
|
||||||
|
data: [9, 7, 5, 8, 6]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
chartOptions2: {
|
||||||
|
chart: {
|
||||||
|
type: 'bar',
|
||||||
|
height: 350,
|
||||||
|
stacked: true,
|
||||||
|
stackType: '100%'
|
||||||
|
},
|
||||||
|
plotOptions: {
|
||||||
|
bar: {
|
||||||
|
horizontal: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
stroke: {
|
||||||
|
width: 1,
|
||||||
|
colors: ['#fff']
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
text: '100% Stacked Bar'
|
||||||
|
},
|
||||||
|
xaxis: {
|
||||||
|
categories: [2008, 2009, 2010, 2011, 2012],
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
y: {
|
||||||
|
formatter: function (val) {
|
||||||
|
return val + "K"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fill: {
|
||||||
|
opacity: 1
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
position: 'top',
|
||||||
|
horizontalAlign: 'left',
|
||||||
|
offsetX: 40
|
||||||
|
}
|
||||||
|
},
|
||||||
|
chartSeries3: [
|
||||||
|
{
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
x: 'New Delhi',
|
||||||
|
y: 218
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: 'Kolkata',
|
||||||
|
y: 149
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: 'Mumbai',
|
||||||
|
y: 184
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: 'Ahmedabad',
|
||||||
|
y: 55
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: 'Bangaluru',
|
||||||
|
y: 84
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: 'Pune',
|
||||||
|
y: 31
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: 'Chennai',
|
||||||
|
y: 70
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: 'Jaipur',
|
||||||
|
y: 30
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: 'Surat',
|
||||||
|
y: 44
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: 'Hyderabad',
|
||||||
|
y: 68
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: 'Lucknow',
|
||||||
|
y: 28
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: 'Indore',
|
||||||
|
y: 19
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: 'Kanpur',
|
||||||
|
y: 29
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
chartOptions3: {
|
||||||
|
legend: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
chart: {
|
||||||
|
height: 350,
|
||||||
|
type: 'treemap'
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
text: 'Basic Treemap'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
chartSeries4: [
|
||||||
|
{
|
||||||
|
name: 'Net Profit',
|
||||||
|
data: [44, 55, 57, 56, 61, 58, 63, 60, 66]
|
||||||
|
}, {
|
||||||
|
name: 'Revenue',
|
||||||
|
data: [76, 85, 101, 98, 87, 105, 91, 114, 94]
|
||||||
|
}, {
|
||||||
|
name: 'Free Cash Flow',
|
||||||
|
data: [35, 41, 36, 26, 45, 48, 52, 53, 41]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
chartOptions4: {
|
||||||
|
chart: {
|
||||||
|
type: 'bar',
|
||||||
|
height: 350
|
||||||
|
},
|
||||||
|
plotOptions: {
|
||||||
|
bar: {
|
||||||
|
horizontal: false,
|
||||||
|
columnWidth: '55%',
|
||||||
|
endingShape: 'rounded'
|
||||||
|
},
|
||||||
|
},
|
||||||
|
dataLabels: {
|
||||||
|
enabled: false
|
||||||
|
},
|
||||||
|
stroke: {
|
||||||
|
show: true,
|
||||||
|
width: 2,
|
||||||
|
colors: ['transparent']
|
||||||
|
},
|
||||||
|
xaxis: {
|
||||||
|
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
|
||||||
|
},
|
||||||
|
yaxis: {
|
||||||
|
title: {
|
||||||
|
text: '$ (thousands)'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
text: 'Vertical columns'
|
||||||
|
},
|
||||||
|
fill: {
|
||||||
|
opacity: 1
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
y: {
|
||||||
|
formatter: function (val) {
|
||||||
|
return "$ " + val + " thousands"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -13,106 +13,16 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
|
||||||
|
// Bulma imports
|
||||||
|
@import "./scss/reports-basics.sass";
|
||||||
|
|
||||||
.tainacan_page_tainacan_reports #wpbody {
|
.tainacan_page_tainacan_reports #wpbody {
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
#tainacan-reports-app {
|
#tainacan-reports-app {
|
||||||
margin-top: 42px;
|
|
||||||
a:hover {
|
a:hover {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.tainacan-reports-tooltip {
|
|
||||||
display: block !important;
|
|
||||||
z-index: 10000;
|
|
||||||
max-width: 300px;
|
|
||||||
|
|
||||||
.tooltip-inner {
|
|
||||||
background: black;
|
|
||||||
padding: 0.35em 0.45em;
|
|
||||||
color: white;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tooltip-arrow {
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border-style: solid;
|
|
||||||
position: absolute;
|
|
||||||
margin: 5px;
|
|
||||||
border-color: black;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
&[x-placement^="top"] {
|
|
||||||
margin-bottom: 5px;
|
|
||||||
|
|
||||||
.tooltip-arrow {
|
|
||||||
border-width: 5px 5px 0 5px;
|
|
||||||
border-left-color: transparent !important;
|
|
||||||
border-right-color: transparent !important;
|
|
||||||
border-bottom-color: transparent !important;
|
|
||||||
bottom: -5px;
|
|
||||||
left: calc(50% - 5px);
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&[x-placement^="bottom"] {
|
|
||||||
margin-top: 5px;
|
|
||||||
|
|
||||||
.tooltip-arrow {
|
|
||||||
border-width: 0 5px 5px 5px;
|
|
||||||
border-left-color: transparent !important;
|
|
||||||
border-right-color: transparent !important;
|
|
||||||
border-top-color: transparent !important;
|
|
||||||
top: -5px;
|
|
||||||
left: calc(50% - 5px);
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&[x-placement^="right"] {
|
|
||||||
margin-left: 5px;
|
|
||||||
|
|
||||||
.tooltip-arrow {
|
|
||||||
border-width: 5px 5px 5px 0;
|
|
||||||
border-left-color: transparent !important;
|
|
||||||
border-top-color: transparent !important;
|
|
||||||
border-bottom-color: transparent !important;
|
|
||||||
left: -5px;
|
|
||||||
top: calc(50% - 5px);
|
|
||||||
margin-left: 0;
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&[x-placement^="left"] {
|
|
||||||
margin-right: 5px;
|
|
||||||
|
|
||||||
.tooltip-arrow {
|
|
||||||
border-width: 5px 0 5px 5px;
|
|
||||||
border-top-color: transparent !important;
|
|
||||||
border-right-color: transparent !important;
|
|
||||||
border-bottom-color: transparent !important;
|
|
||||||
right: -5px;
|
|
||||||
top: calc(50% - 5px);
|
|
||||||
margin-left: 0;
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&[aria-hidden='true'] {
|
|
||||||
visibility: hidden;
|
|
||||||
opacity: 0;
|
|
||||||
transition: opacity .15s, visibility .15s;
|
|
||||||
}
|
|
||||||
|
|
||||||
&[aria-hidden='false'] {
|
|
||||||
visibility: visible;
|
|
||||||
opacity: 1;
|
|
||||||
transition: opacity .15s;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
@import "../../../../node_modules/bulma/sass/utilities/_all.sass"
|
||||||
|
@import "../../../../node_modules/bulma/sass/helpers/_all.sass"
|
||||||
|
@import "../../../../node_modules/bulma/sass/form/_all.sass"
|
||||||
|
@import "../../../../node_modules/bulma/sass/grid/_all.sass"
|
||||||
|
@import "../../../../node_modules/bulma/sass/components/pagination.sass"
|
||||||
|
@import "../../../../node_modules/bulma/sass/components/card.sass"
|
||||||
|
@import "../../../../node_modules/bulma/sass/elements/icon.sass"
|
||||||
|
@import "../../../../node_modules/bulma/sass/elements/tag.sass"
|
||||||
|
@import "../../../../node_modules/bulma/sass/elements/notification.sass"
|
||||||
|
@import "../../../../node_modules/bulma/sass/components/tabs.sass"
|
||||||
|
@import "../../../../node_modules/bulma/sass/elements/button.sass"
|
||||||
|
@import "../../../../node_modules/bulma/sass/components/dropdown.sass"
|
||||||
|
@import "../../../../node_modules/bulma/sass/components/modal.sass"
|
||||||
Loading…
Reference in New Issue