feat: replacing windicss by tailwindcss in hoppscotch-ui (#3076)
Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com> Co-authored-by: Joel Jacob Stephen <70131076+JoelJacobStephen@users.noreply.github.com> Co-authored-by: nivedin <nivedinp@gmail.com>
This commit is contained in:
@@ -7,7 +7,7 @@
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="t('app.open_navigation')"
|
||||
:icon="IconMenu"
|
||||
class="transform !md:hidden mr-2"
|
||||
class="transform md:hidden mr-2"
|
||||
@click="isOpen = true"
|
||||
/>
|
||||
<HoppButtonSecondary
|
||||
@@ -18,7 +18,7 @@
|
||||
: `${t('app.expand_sidebar')}`
|
||||
"
|
||||
:icon="isExpanded ? IconSidebarClose : IconSidebarOpen"
|
||||
class="transform"
|
||||
class="transform hidden md:block"
|
||||
@click="expandSidebar"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -93,7 +93,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="mt-15">
|
||||
<section class="mt-16">
|
||||
<div
|
||||
v-if="
|
||||
mode === 'sign-in' &&
|
||||
|
||||
@@ -9,10 +9,10 @@
|
||||
<!-- End Backdrop -->
|
||||
|
||||
<div
|
||||
:class="isOpen ? '' : '!-translate-x-full ease-in'"
|
||||
:class="isOpen ? '' : '-translate-x-full ease-in'"
|
||||
class="sidebar-container transform !md:translate-x-0 ease-out"
|
||||
>
|
||||
<div :class="isExpanded ? 'w-xs' : 'w-full'">
|
||||
<div :class="isExpanded ? 'w-80' : 'w-full'">
|
||||
<div class="flex items-center justify-start px-4 my-4">
|
||||
<div class="flex items-center">
|
||||
<HoppSmartLink class="flex items-center space-x-4" to="/dashboard">
|
||||
@@ -106,22 +106,22 @@ const primaryNavigations = [
|
||||
@apply flex flex-1;
|
||||
@apply items-center;
|
||||
@apply space-x-4;
|
||||
@apply hover: (bg-primaryDark text-secondaryDark);
|
||||
@apply focus-visible: text-secondaryDark;
|
||||
@apply hover:bg-primaryDark hover:text-secondaryDark;
|
||||
@apply focus-visible:text-secondaryDark;
|
||||
@apply after:absolute;
|
||||
@apply after:inset-x-0;
|
||||
@apply after:md: inset-x-auto;
|
||||
@apply after:md: inset-y-0;
|
||||
@apply after:md:inset-x-auto;
|
||||
@apply after:md:inset-y-0;
|
||||
@apply after:bottom-0;
|
||||
@apply after:md: bottom-auto;
|
||||
@apply after:md: left-0;
|
||||
@apply after:z-2;
|
||||
@apply after:md:bottom-auto;
|
||||
@apply after:md:left-0;
|
||||
@apply after:z-10;
|
||||
@apply after:h-0.5;
|
||||
@apply after:md: h-full;
|
||||
@apply after:md:h-full;
|
||||
@apply after:w-full;
|
||||
@apply after:md: w-0.5;
|
||||
@apply after:content-DEFAULT;
|
||||
@apply focus: after: bg-divider;
|
||||
@apply after:md:w-0.5;
|
||||
@apply after:content-[''];
|
||||
@apply focus:after:bg-divider;
|
||||
|
||||
.svg-icons {
|
||||
@apply opacity-75;
|
||||
@@ -130,7 +130,7 @@ const primaryNavigations = [
|
||||
&.router-link-active {
|
||||
@apply text-secondaryDark;
|
||||
@apply bg-primaryLight;
|
||||
@apply hover: text-secondaryDark;
|
||||
@apply hover:text-secondaryDark;
|
||||
@apply after:bg-accent;
|
||||
|
||||
.svg-icons {
|
||||
@@ -141,7 +141,7 @@ const primaryNavigations = [
|
||||
&.exact-active-link {
|
||||
@apply text-secondaryDark;
|
||||
@apply bg-primaryLight;
|
||||
@apply hover: text-secondaryDark;
|
||||
@apply hover:text-secondaryDark;
|
||||
@apply after:bg-accent;
|
||||
|
||||
.svg-icons {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div
|
||||
class="flex items-center sm:px-15 px-8 justify-center !sm:justify-start py-6 bg-primaryLight rounded-md shadow-sm h-50 space-x-6"
|
||||
class="flex items-center sm:px-16 px-8 justify-start py-6 bg-primaryLight rounded-md shadow-sm h-48 space-x-6"
|
||||
>
|
||||
<component :is="icon" class="text-5xl" :class="color" />
|
||||
|
||||
|
||||
Reference in New Issue
Block a user