wizard responsive
This commit is contained in:
@ -1,15 +1,15 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="relative bg-body z-10 rounded-lg shadow-2xl p-10" style="height:675px;">
|
||||
<div class="relative bg-body z-10 rounded-lg shadow-2xl p-5 sm:p-10 full-height-mobile" style="height:675px;">
|
||||
<WizardSteps :active_state="active"></WizardSteps>
|
||||
|
||||
<form ref="form" class="w-full">
|
||||
<div class="relative">
|
||||
<div v-if="pageLoad" class="absolute left-0 right-0 top-0 bottom-0 w-full h-full bg-white rounded-lg flex items-center justify-center z-50">
|
||||
<span class="material-icons form-spin text-lg animate-spin text-9xl">data_usage</span>
|
||||
<span class="material-icons form-spin animate-spin text-9xl">data_usage</span>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col justify-between">
|
||||
<div class="flex flex-col justify-between -mt-5 sm:mt-0">
|
||||
<div class="grid sm:grid-cols-6 gap-x-8 gap-y-6 my-3.5 menu-scroll gap-10">
|
||||
<div class="sm:col-span-6">
|
||||
<base-input
|
||||
|
@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div class="relative bg-body z-10 rounded-lg shadow-2xl p-10" style="height:675px;">
|
||||
<div class="relative bg-body z-10 rounded-lg shadow-2xl p-5 sm:p-10 full-height-mobile" style="height:675px;">
|
||||
<WizardSteps :active_state="active"></WizardSteps>
|
||||
|
||||
<div class="flex flex-col justify-between overflow-y-auto" style="height: calc(100% - 53px)">
|
||||
<div class="flex flex-col justify-between -mt-5 sm:mt-0 overflow-y-auto" style="height: calc(100% - 53px)">
|
||||
<div v-if="pageLoad" class="absolute left-0 right-0 top-0 bottom-0 w-full h-full bg-white rounded-lg flex items-center justify-center z-50">
|
||||
<span class="material-icons form-spin animate-spin text-9xl">data_usage</span>
|
||||
</div>
|
||||
|
@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<div class="relative bg-body z-10 rounded-lg shadow-2xl py-10 ltr:pl-10 rtl:pr-10 overflow-hidden">
|
||||
<div class="relative bg-body z-10 rounded-lg shadow-2xl p-5 sm:py-10 sm:ltr:pl-10 sm:rtl:pr-10 overflow-hidden">
|
||||
<div class="pr-10">
|
||||
<WizardSteps :active_state="active"></WizardSteps>
|
||||
</div>
|
||||
|
||||
<div modal-container class="flex flex-col justify-between" style="height:565px;">
|
||||
<div modal-container class="flex flex-col justify-between -mt-5 sm:mt-0" style="height:565px;">
|
||||
<div v-if="pageLoad" class="absolute left-0 right-0 top-0 bottom-0 w-full h-full bg-white rounded-lg flex items-center justify-center z-50">
|
||||
<span class="material-icons form-spin text-lg animate-spin text-9xl">data_usage</span>
|
||||
</div>
|
||||
|
@ -2,7 +2,7 @@
|
||||
<div>
|
||||
<nav aria-label="Progress">
|
||||
<ol role="list" class="flex mb-10">
|
||||
<li class="w-1/4">
|
||||
<li class="w-1/3">
|
||||
<span class="pr-6 flex flex-col">
|
||||
<span
|
||||
:class="[{'bg-purple': active_state > 0}, {'bg-purple': active_state == 0}]"
|
||||
@ -15,7 +15,7 @@
|
||||
</span>
|
||||
</li>
|
||||
|
||||
<li class="w-1/4">
|
||||
<li class="w-1/3">
|
||||
<span class="px-3 flex flex-col">
|
||||
<span
|
||||
:class="[{'bg-purple': active_state > 1}, {'bg-purple': active_state == 1}]"
|
||||
@ -28,7 +28,7 @@
|
||||
</span>
|
||||
</li>
|
||||
|
||||
<li class="w-1/4">
|
||||
<li class="w-1/3">
|
||||
<span class="pl-6 flex flex-col">
|
||||
<span
|
||||
:class="[{'bg-purple': active_state == 3}]"
|
||||
|
Reference in New Issue
Block a user