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:
Anwarul Islam
2023-11-01 21:25:08 +06:00
committed by GitHub
parent 59b5a50a97
commit a215860782
174 changed files with 6921 additions and 5185 deletions

View File

@@ -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>

View File

@@ -93,7 +93,7 @@
</div>
</div>
<section class="mt-15">
<section class="mt-16">
<div
v-if="
mode === 'sign-in' &&

View File

@@ -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 {

View File

@@ -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" />