@hulkapps/app-manager-vue 2.0.9 → 2.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hulkapps/app-manager-vue",
3
- "version": "2.0.9",
3
+ "version": "2.1.0",
4
4
  "description": "Vue SDK to render app manager contents",
5
5
  "main": "dist/app-manager-vue.ssr.js",
6
6
  "browser": "dist/app-manager-vue.esm.js",
@@ -86,8 +86,8 @@
86
86
  <PDataTableCol :colspan="selectedPlan === 'monthly' ? monthlyPlan.length + 1 : yearlyPlan.length + 1" class="app-manager-group-cell">{{ (groupKey) }}</PDataTableCol>
87
87
  </PDataTableRow>
88
88
  <PDataTableRow v-for="(feature, rIndex) in featureGroup" :key="`row-${rIndex + groupKey}`">
89
- <PDataTableCol>{{ (feature.name) }}</PDataTableCol>
90
- <PDataTableCol v-for="(plan, cIndex) in selectedPlan === 'monthly' ? monthlyPlan : yearlyPlan" :key="`cell-${cIndex}-row-${rIndex}`" :style="activePlanStyle(plan)">
89
+ <PDataTableCol :class="`feature__type__${feature.value_type} feature__class`">{{ (feature.name) }}</PDataTableCol>
90
+ <PDataTableCol :class="`feature__type__${feature.value_type}`" v-for="(plan, cIndex) in selectedPlan === 'monthly' ? monthlyPlan : yearlyPlan" :key="`cell-${cIndex}-row-${rIndex}`" :style="activePlanStyle(plan)">
91
91
  <template v-if="plan.features">
92
92
  <template v-if="feature.value_type === 'boolean'">
93
93
  <PIcon v-if="plan.features[feature.uuid]" color="success"
@@ -276,10 +276,10 @@
276
276
  } else return feature.value
277
277
  }
278
278
  else if(feature?.value_type === 'array') {
279
- return JSON.parse(feature.value).join(',')
279
+ return JSON.parse(feature.value).join(' ')
280
280
  }
281
281
  else if(feature?.value_type === 'string') {
282
- return feature.value
282
+ return feature.value.replace('"', '').replace('"', '')
283
283
  }
284
284
  },
285
285
  calculateDiscountedPrice(plan) {
@@ -371,167 +371,167 @@
371
371
 
372
372
  @import url('https://fonts.googleapis.com/css2?family=Satisfy&display=swap');
373
373
 
374
- .app-manager-plan-page .plan-table td:last-child>*[data-v-7d902277],
375
- .app-manager-plan-page .plan-table td:last-child>*[data-v-5a078dbb] {
374
+ .app-manager .app-manager-plan-page .plan-table td:last-child>*[data-v-7d902277],
375
+ .app-manager .app-manager-plan-page .plan-table td:last-child>*[data-v-5a078dbb] {
376
376
  float:none;
377
377
  }
378
- .app-manager-plan-page .active {
378
+ .app-manager .app-manager-plan-page .active {
379
379
  background: #f0f8f5;
380
380
  }
381
- .app-manager-plan-page .plan-table td:last-child>*[data-v-0d1b0d63] {
381
+ .app-manager .app-manager-plan-page .plan-table td:last-child>*[data-v-0d1b0d63] {
382
382
  float:none;
383
383
  }
384
- .app-manager-plan-page .plan-table td {
384
+ .app-manager .app-manager-plan-page .plan-table td {
385
385
  border: 0.01px solid #ececee !important;
386
386
  border-collapse: collapse !important;
387
387
  }
388
- .app-manager-plan-page .plan-table .Polaris-DataTable__ScrollContainer{
388
+ .app-manager .app-manager-plan-page .plan-table .Polaris-DataTable__ScrollContainer{
389
389
  border-radius:12px;
390
390
  overflow: visible;
391
391
  }
392
- .app-manager-plan-page .plan-table table {
392
+ .app-manager .app-manager-plan-page .plan-table table {
393
393
  border-collapse: collapse !important;
394
394
  }
395
- .app-manager-plan-page .custom-plan table {
395
+ .app-manager .app-manager-plan-page .custom-plan table {
396
396
  border-collapse: collapse !important;
397
397
  }
398
- .app-manager-plan-page .custom-plan table thead .first-column {
398
+ .app-manager .app-manager-plan-page .custom-plan table thead .first-column {
399
399
  border-radius: 12px 0 0 0;
400
400
  border-top: 0px !important;
401
401
  border-left: 0px !important;
402
402
  }
403
- .app-manager-plan-page .custom-plan table thead .plan-heading.last-column {
403
+ .app-manager .app-manager-plan-page .custom-plan table thead .plan-heading.last-column {
404
404
  text-align: left !important;
405
405
  border-radius: 0 12px 0 0;
406
406
  border-top: 0px !important;
407
407
  }
408
- .app-manager-plan-page .custom-plan table thead .plan-heading {
408
+ .app-manager .app-manager-plan-page .custom-plan table thead .plan-heading {
409
409
  background-color: rgb(255, 255, 255);
410
410
  box-shadow: rgb(23 24 24 / 5%) 1px 0px 8px, rgb(0 0 0 / 15%) 0px 0px 2px;
411
411
  }
412
- .app-manager-plan-page .custom-plan table tbody tr:first-child {
412
+ .app-manager .app-manager-plan-page .custom-plan table tbody tr:first-child {
413
413
  background-color: #fff;
414
414
  box-shadow: 0 0 5px rgb(23 24 24 / 5%), 0 1px 2px rgb(0 0 0 / 15%);
415
415
  border-radius: 12px 0 0 0;
416
416
  overflow: hidden;
417
417
  }
418
- .app-manager-plan-page .custom-plan table tbody tr:not(:first-child :last-child ) {
418
+ .app-manager .app-manager-plan-page .custom-plan table tbody tr:not(:first-child :last-child ) {
419
419
  background-color: #fff;
420
420
  overflow: hidden;
421
421
  }
422
- .app-manager-plan-page .custom-plan table tbody tr:not(:first-child :last-child) {
422
+ .app-manager .app-manager-plan-page .custom-plan table tbody tr:not(:first-child :last-child) {
423
423
  background-color: #fff;
424
424
  box-shadow: 0 0 5px rgb(23 24 24 / 5%), 0 1px 2px rgb(0 0 0 / 15%);
425
425
  overflow: hidden;
426
426
  }
427
- .app-manager-plan-page .custom-plan table tbody tr:not( :nth-last-child(2) ) {
427
+ .app-manager .app-manager-plan-page .custom-plan table tbody tr:not( :nth-last-child(2) ) {
428
428
  background-color: #fff;
429
429
  overflow: hidden;
430
430
  }
431
- .app-manager-plan-page .custom-plan table tbody tr:not( :nth-last-child(2) ) {
431
+ .app-manager .app-manager-plan-page .custom-plan table tbody tr:not( :nth-last-child(2) ) {
432
432
  border-bottom: 0;
433
433
  }
434
- .app-manager-plan-page .custom-plan table tbody tr:last-child {
434
+ .app-manager .app-manager-plan-page .custom-plan table tbody tr:last-child {
435
435
  border-bottom: 0;
436
436
  background-color: transparent !important;
437
437
  box-shadow: none !important;
438
438
  }
439
- .app-manager-plan-page .custom-plan table tbody tr:not(:last-child) {
439
+ .app-manager .app-manager-plan-page .custom-plan table tbody tr:not(:last-child) {
440
440
  pointer-events: none;
441
441
  }
442
- .app-manager-plan-page .custom-plan table thead tr td{
442
+ .app-manager .app-manager-plan-page .custom-plan table thead tr td{
443
443
  pointer-events: none;
444
444
  }
445
- .app-manager-plan-page .custom-plan table tbody tr:first-child td:first-child {
445
+ .app-manager .app-manager-plan-page .custom-plan table tbody tr:first-child td:first-child {
446
446
  overflow: hidden;
447
447
  border-radius: 12px 0 0 0;
448
448
  }
449
- .app-manager-plan-page .custom-plan table tbody tr:nth-last-child(2) {
449
+ .app-manager .app-manager-plan-page .custom-plan table tbody tr:nth-last-child(2) {
450
450
  overflow: hidden;
451
451
  border-bottom-right-radius: 12px;
452
452
  border-bottom-left-radius: 12px;
453
453
  }
454
- .app-manager-plan-page .custom-plan table tbody tr:nth-last-child(2) td:first-child {
454
+ .app-manager .app-manager-plan-page .custom-plan table tbody tr:nth-last-child(2) td:first-child {
455
455
  overflow: hidden;
456
456
  border-bottom: 0px !important;
457
457
  border-radius: 0 0 0 12px;
458
458
  }
459
- .app-manager-plan-page .custom-plan table tbody tr:nth-last-child(2) td:last-child {
459
+ .app-manager .app-manager-plan-page .custom-plan table tbody tr:nth-last-child(2) td:last-child {
460
460
  overflow: hidden;
461
461
  border-radius: 0 0 12px;
462
462
  }
463
- .app-manager-plan-page .custom-plan table tbody tr td:first-child {
463
+ .app-manager .app-manager-plan-page .custom-plan table tbody tr td:first-child {
464
464
  border-left: 0px !important;
465
465
  border-top: 0px !important;
466
466
  padding-left: 20px;
467
467
  }
468
- .app-manager-plan-page .custom-plan table tbody tr td:last-child {
468
+ .app-manager .app-manager-plan-page .custom-plan table tbody tr td:last-child {
469
469
  border-right: 0px !important;
470
470
  border-bottom: 0px !important;
471
471
  text-align: center !important;
472
472
  }
473
- .app-manager-plan-page .custom-plan table thead tr td:last-child {
473
+ .app-manager .app-manager-plan-page .custom-plan table thead tr td:last-child {
474
474
  border-right: 0px !important;
475
475
  border-bottom: 0px !important;
476
476
  text-align: center !important;
477
477
  }
478
- .app-manager-plan-page .custom-plan table tbody td:not(:first-child) {
478
+ .app-manager .app-manager-plan-page .custom-plan table tbody td:not(:first-child) {
479
479
  text-align: center !important;
480
480
  }
481
- .app-manager-plan-page .custom-plan table tbody tr:last-child td:last-child {
481
+ .app-manager .app-manager-plan-page .custom-plan table tbody tr:last-child td:last-child {
482
482
  background: transparent;
483
483
  border-radius: 0 0 12px 0;
484
484
  }
485
- .app-manager-plan-page .custom-plan table tbody tr:last-child td {
485
+ .app-manager .app-manager-plan-page .custom-plan table tbody tr:last-child td {
486
486
  border: 0 !important;
487
487
  background: transparent;
488
488
  }
489
- .app-manager-plan-page .custom-plan table tbody tr:last-child td:hover {
489
+ .app-manager .app-manager-plan-page .custom-plan table tbody tr:last-child td:hover {
490
490
  border: 0 !important;
491
491
  background: transparent;
492
492
  }
493
- .app-manager-plan-page .custom-plan tbody tr:last-child td.Polaris-DataTable__Cell--verticalAlignTop{
493
+ .app-manager .app-manager-plan-page .custom-plan tbody tr:last-child td.Polaris-DataTable__Cell--verticalAlignTop{
494
494
  background: transparent !important;
495
495
  }
496
- .app-manager-plan-page .custom-plan table tbody tr:last-child {
496
+ .app-manager .app-manager-plan-page .custom-plan table tbody tr:last-child {
497
497
  background: transparent;
498
498
  opacity:1.0;
499
499
  }
500
- .app-manager-plan-page .custom-plan table tbody tr:last-child td:first-child{
500
+ .app-manager .app-manager-plan-page .custom-plan table tbody tr:last-child td:first-child{
501
501
  visibility: hidden;
502
502
  }
503
- .app-manager-plan-page .plan-heading {
503
+ .app-manager .app-manager-plan-page .plan-heading {
504
504
  padding-top: 30px;
505
505
  }
506
- .app-manager-plan-page .custom-plan .Polaris-Layout__Section{
506
+ .app-manager .app-manager-plan-page .custom-plan .Polaris-Layout__Section{
507
507
  max-width: calc(100% - 2rem) !important;
508
508
  }
509
- .app-manager-plan-page .later-link {
509
+ .app-manager .app-manager-plan-page .later-link {
510
510
  text-align: center;
511
511
  clear: both;
512
512
  padding-top: 15px;
513
513
  }
514
- .app-manager-plan-page .plan-badge ul {
514
+ .app-manager .app-manager-plan-page .plan-badge ul {
515
515
  text-align: center;
516
516
  padding-top: 2rem;
517
517
  border-top: 0.1rem solid #e1e3e5;
518
518
  }
519
- .app-manager-plan-page .plan-badge ul li {
519
+ .app-manager .app-manager-plan-page .plan-badge ul li {
520
520
  list-style: none;
521
521
  display: inline-block;
522
522
  padding-right: 25px;
523
523
  }
524
- .app-manager-plan-page .plan-badge ul li img {
524
+ .app-manager .app-manager-plan-page .plan-badge ul li img {
525
525
  max-width: 133px;
526
526
  }
527
- .app-manager-plan-page .btn-group .Polaris-ButtonGroup__Item{
527
+ .app-manager .app-manager-plan-page .btn-group .Polaris-ButtonGroup__Item{
528
528
  margin-left: 0px !important;
529
529
  z-index: unset !important;
530
530
  }
531
- .app-manager-plan-page.custom-title .Polaris-HorizontalDivider{
531
+ .app-manager .app-manager-plan-page.custom-title .Polaris-HorizontalDivider{
532
532
  background-color: #e2e3e4;
533
533
  }
534
- /*.app-manager-plan-page .annual_heading{
534
+ /*.app-manager .app-manager-plan-page .annual_heading{
535
535
  margin-top: 2px !important;
536
536
  color: #E2C138;
537
537
  border: 2px dotted #E2C138;
@@ -540,12 +540,18 @@
540
540
  font-weight: normal !important;
541
541
  font-family: 'Satisfy', cursive;
542
542
  }*/
543
- .app-manager-plan-page .Polaris-Page__Content hr{
543
+ .app-manager .app-manager-plan-page .Polaris-Page__Content hr{
544
544
  border: 1px solid #e2e3e4;
545
545
  }
546
546
 
547
- .app-manager-plan-page .app-manager-group-row {
547
+ .app-manager .app-manager-plan-page .app-manager-group-row {
548
548
  background: transparent !important;
549
549
  padding: 16px 16px 16px 20px !important;
550
550
  }
551
+
552
+ .app-manager .app-manager-plan-page .feature__type__array {
553
+ vertical-align: middle !important;
554
+ word-spacing: 999px;
555
+ white-space: pre-line !important;
556
+ }
551
557
  </style>
@@ -1,6 +1,6 @@
1
1
  <template>
2
2
  <PPage
3
- class="app-manager-plan-page custom-title"
3
+ class="app-manager-plan-page-slider custom-title"
4
4
  title="Choose plan"
5
5
  :subtitle = "subtitleContent"
6
6
  >
@@ -28,7 +28,7 @@
28
28
  <div class="Polaris-ResourceList__ResourceListWrapper features" style="width: 30%">
29
29
  <div class="plan__price"></div>
30
30
  <ul class="Polaris-ResourceList">
31
- <li class="Polaris-ResourceList__ItemWrapper pro_title" v-for="(feature, key) in features" :key="key">
31
+ <li class="Polaris-ResourceList__ItemWrapper pro_title" :class="`feature__type__${feature.value_type} feature__class`" v-for="(feature, key) in features" :key="key">
32
32
  <div class="Polaris-ResourceList-Item__Container">
33
33
  <div class="Polaris-ResourceList-Item__Content">
34
34
  <h1 class="for-price-per-month"><span>{{ feature.name }}</span></h1>
@@ -62,7 +62,7 @@
62
62
  </div>
63
63
  <div>
64
64
  <ul>
65
- <li v-for="(feature, key) in features" :key="key" :class="activePlanClass(plan)" :style="activePlanStyle(plan)">
65
+ <li v-for="(feature, key) in features" :class="`feature__type__${feature.value_type}`" :key="key" :style="activePlanStyle(plan)">
66
66
  <div>
67
67
  <template v-if="plan.features && plan.features[feature.uuid]" style="display: flex">
68
68
  <template v-if="plan.features[feature.uuid].value_type === 'boolean'">
@@ -276,10 +276,10 @@
276
276
  } else return feature.value
277
277
  }
278
278
  else if(feature?.value_type === 'array') {
279
- return JSON.parse(feature.value).join(',')
279
+ return JSON.parse(feature.value).join(' ')
280
280
  }
281
281
  else if(feature?.value_type === 'string') {
282
- return feature.value
282
+ return feature.value.replace('"', '').replace('"', '')
283
283
  }
284
284
  },
285
285
  calculateDiscountedPrice(plan) {
@@ -317,14 +317,31 @@
317
317
  });
318
318
  },
319
319
  async selectPlan(value){
320
- this.selectedPlan= value;
321
- setTimeout(function() {
320
+ this.selectedPlan = value;
321
+ this.$nextTick(() => {
322
+
323
+ let maxHeight = 0
324
+ let elements = document.querySelectorAll('.feature__type__array');
325
+ elements.forEach((item) => {
326
+ item.style.minHeight = 'unset';
327
+ console.log(item.offsetHeight)
328
+ if (maxHeight < item.offsetHeight) {
329
+ maxHeight = item.offsetHeight
330
+ }
331
+ });
332
+ elements.forEach((item) => {
333
+ item.style.minHeight = maxHeight + 'px';
334
+ });
335
+
322
336
  let element = document.querySelector('.slide-0');
323
- element.classList.add('first-slide')
324
- element = document.querySelector('.slide-3');
325
- element.classList.add('last-slide')
326
- document.querySelector('.VueCarousel-navigation-button.VueCarousel-navigation-prev').style.left = -document.querySelector('.Polaris-ResourceList__ResourceListWrapper.features').offsetWidth + 'px';
327
- },400)
337
+ if (element) {
338
+ element.classList.add('first-slide')
339
+ element = document.querySelector('.slide-3');
340
+ element.classList.add('last-slide')
341
+ document.querySelector('.VueCarousel-navigation-button.VueCarousel-navigation-prev').style.left = -document.querySelector('.Polaris-ResourceList__ResourceListWrapper.features').offsetWidth + 'px';
342
+ }
343
+
344
+ });
328
345
  },
329
346
  headerClasses(firstColumn) {
330
347
  return {
@@ -358,21 +375,30 @@
358
375
  }
359
376
  this.default_plan_id = plansData.data.default_plan_id;
360
377
  this.onboard = !this.plan
361
- },
362
378
 
363
- created() {
364
- let initializeSliderComponent = setInterval(() => {
379
+ this.$nextTick(() => {
380
+
381
+ let maxHeight = 0
382
+ let elements = document.querySelectorAll('.feature__type__array');
383
+ elements.forEach((item) => {
384
+ if (maxHeight < item.offsetHeight) {
385
+ maxHeight = item.offsetHeight
386
+ }
387
+ });
388
+ elements.forEach((item) => {
389
+ item.style.minHeight = maxHeight + 'px';
390
+ });
391
+
365
392
  let element = document.querySelector('.slide-0');
366
393
  if (element) {
367
394
  element.classList.add('first-slide')
368
395
  element = document.querySelector('.slide-3');
369
396
  element.classList.add('last-slide')
370
397
  document.querySelector('.VueCarousel-navigation-button.VueCarousel-navigation-prev').style.left = -document.querySelector('.Polaris-ResourceList__ResourceListWrapper.features').offsetWidth + 'px';
371
- clearInterval(initializeSliderComponent);
372
398
  }
373
- }, 100);
374
- },
375
399
 
400
+ });
401
+ },
376
402
  }
377
403
  </script>
378
404
 
@@ -380,83 +406,99 @@
380
406
 
381
407
  @import url('https://fonts.googleapis.com/css2?family=Satisfy&display=swap');
382
408
 
383
- .app-manager .app-manager-plan-page ul
409
+ .app-manager .app-manager-plan-page-slider ul
384
410
  {
385
411
  list-style: none;
386
412
  margin: 0;
387
413
  padding: 0;
388
414
  }
389
- .app-manager .app-manager-plan-page .Polaris-ResourceList__ResourceListWrapper.features li,
390
- .app-manager .app-manager-plan-page .Polaris-Layout__Section .VueCarousel-slide li,
391
- .app-manager .app-manager-plan-page .plan__price
415
+ .app-manager .app-manager-plan-page-slider .Polaris-ResourceList__ResourceListWrapper.features li,
416
+ .app-manager .app-manager-plan-page-slider .Polaris-Layout__Section .VueCarousel-slide li,
417
+ .app-manager .app-manager-plan-page-slider .plan__price
392
418
  {
393
419
  padding: 16px 16px 16px 20px;
394
420
  }
395
- .app-manager .app-manager-plan-page .Polaris-ResourceList__ResourceListWrapper.features li,
396
- .app-manager .app-manager-plan-page .Polaris-Layout__Section .VueCarousel-slide li:not(:last-child),
397
- .app-manager .app-manager-plan-page .Polaris-Layout.custom-plan .VueCarousel .plan__price
421
+ .app-manager .app-manager-plan-page-slider .Polaris-ResourceList__ResourceListWrapper.features li,
422
+ .app-manager .app-manager-plan-page-slider .Polaris-Layout__Section .VueCarousel-slide li:not(:last-child),
423
+ .app-manager .app-manager-plan-page-slider .Polaris-Layout.custom-plan .VueCarousel .plan__price
398
424
  {
399
425
  border-top: 1px solid #dddddd;
400
426
  border-right: 1px solid #dddddd;
401
427
  background: #fff;
402
428
  }
403
- .app-manager .app-manager-plan-page .Polaris-ResourceList__ResourceListWrapper.features li{
429
+ .app-manager .app-manager-plan-page-slider .Polaris-ResourceList__ResourceListWrapper.features li{
404
430
  border-right: none;
405
431
  border-left: 1px solid #dddddd;
406
432
  }
407
- .app-manager .app-manager-plan-page .plan__price{
433
+ .app-manager .app-manager-plan-page-slider .plan__price{
408
434
  min-height:121px;
409
435
  }
410
- .app-manager .app-manager-plan-page .Polaris-ResourceList__ResourceListWrapper.features li:last-child,
411
- .app-manager .app-manager-plan-page .Polaris-Layout__Section .VueCarousel-slide li:nth-last-child(2)
436
+ .app-manager .app-manager-plan-page-slider .Polaris-ResourceList__ResourceListWrapper.features li:last-child,
437
+ .app-manager .app-manager-plan-page-slider .Polaris-Layout__Section .VueCarousel-slide li:nth-last-child(2)
412
438
  {
413
439
  border-bottom: 1px solid #dddddd;
414
440
  }
415
- .app-manager .app-manager-plan-page .Polaris-ResourceList__ResourceListWrapper.features li:first-child
441
+ .app-manager .app-manager-plan-page-slider .Polaris-ResourceList__ResourceListWrapper.features li:first-child
416
442
  {
417
443
  border-top-left-radius: 12px;
418
444
  }
419
- .app-manager .app-manager-plan-page .Polaris-ResourceList__ResourceListWrapper.features li:last-child
445
+ .app-manager .app-manager-plan-page-slider .Polaris-ResourceList__ResourceListWrapper.features li:last-child
420
446
  {
421
447
  border-bottom-left-radius: 12px;
422
448
  }
423
- .app-manager .app-manager-plan-page .VueCarousel-inner .VueCarousel-slide.first-slide ul li:not(:last-child)
449
+ .app-manager .app-manager-plan-page-slider .VueCarousel-inner .VueCarousel-slide.first-slide ul li:not(:last-child)
424
450
  {
425
451
  border-left: 1px solid #dddddd;
426
452
  }
427
- .app-manager .app-manager-plan-page .VueCarousel-inner .VueCarousel-slide.first-slide .plan__price
453
+ .app-manager .app-manager-plan-page-slider .VueCarousel-inner .VueCarousel-slide.first-slide .plan__price
428
454
  {
429
455
  border-left: 1px solid #dddddd;
430
456
  box-shadow: none;
431
457
  border-top-left-radius: 12px;
432
458
  overflow: hidden;
433
459
  }
434
- .app-manager .app-manager-plan-page .VueCarousel-inner .VueCarousel-slide.last-slide ul li:nth-last-child(2)
460
+ .app-manager .app-manager-plan-page-slider .VueCarousel-inner .VueCarousel-slide.last-slide ul li:nth-last-child(2)
435
461
  {
436
462
  border-bottom-right-radius: 12px;
437
463
  }
438
- .app-manager .app-manager-plan-page .VueCarousel-inner .VueCarousel-slide.last-slide .plan__price
464
+ .app-manager .app-manager-plan-page-slider .VueCarousel-inner .VueCarousel-slide.last-slide .plan__price
439
465
  {
440
466
  border-right: 1px solid #dddddd;
441
467
  box-shadow: none;
442
468
  border-top-right-radius: 12px;
443
469
  overflow: hidden;
444
470
  }
445
- .app-manager .app-manager-plan-page .VueCarousel-inner .VueCarousel-slide.last-slide
471
+ .app-manager .app-manager-plan-page-slider .VueCarousel-inner .VueCarousel-slide.last-slide
446
472
  {
447
473
  border-top-right-radius: 12px;
448
474
  }
449
- .app-manager .app-manager-plan-page .VueCarousel-inner .VueCarousel-slide.first-slide
475
+ .app-manager .app-manager-plan-page-slider .VueCarousel-inner .VueCarousel-slide.first-slide
450
476
  {
451
477
  border-top-left-radius: 12px;
452
478
  }
453
- .app-manager .app-manager-plan-page .VueCarousel .VueCarousel-inner li
479
+ .app-manager .app-manager-plan-page-slider .VueCarousel .VueCarousel-inner li
454
480
  {
455
481
  text-align: center;
456
482
  }
457
- .app-manager .app-manager-plan-page .VueCarousel-navigation-button
483
+ .app-manager .app-manager-plan-page-slider .VueCarousel-navigation-button
458
484
  {
459
485
  color: #257f60;
460
486
  }
487
+ .app-manager .app-manager-plan-page-slider .btn-group .Polaris-ButtonGroup__Item
488
+ {
489
+ margin-left: 0px !important;
490
+ z-index: unset !important;
491
+ }
492
+ .app-manager .app-manager-plan-page-slider .feature__type__array
493
+ {
494
+ display: flex;
495
+ align-items: center;
496
+ word-spacing: 999px;
497
+ justify-content: center;
498
+ }
499
+ .app-manager .app-manager-plan-page-slider .feature__type__array.feature__class
500
+ {
501
+ justify-content: left;
502
+ }
461
503
 
462
504
  </style>