btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

feat: replacing windicss by tailwindcss in hoppscotch-ui (#3076)

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

96
packages/hoppscotch-common/assets/scss/styles.scss
View File

@@ -1,7 +1,25 @@
/*
* Write hoppscotch-common related custom styles in this file.
* If styles are sharable across all package then write into hoppscotch-ui/assets/scss/styles.scss file.
*/
* {
@apply backface-hidden;
@apply before:backface-hidden;
@apply after:backface-hidden;
backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
&::before {
backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
&::after {
backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
@apply selection:bg-accentDark;
@apply selection:text-accentContrast;
@apply overscroll-none;
@@ -11,17 +29,25 @@
@apply antialiased;
accent-color: var(--accent-color);
font-variant-ligatures: common-ligatures;
// Colors
--info-color: #ec4899;
--success-color: #10b981;
--blue-color: #3b82f6;
--warning-color: #f59e0b;
--cl-error-color: #ef4444;
--sv-error-color: #dc2626;
}
::-webkit-scrollbar-track {
@apply bg-transparent;
@apply border-solid border-l border-dividerLight border-t-0 border-b-0 border-r-0;
@apply border-b-0 border-l border-r-0 border-t-0 border-solid border-dividerLight;
}
::-webkit-scrollbar-thumb {
@apply bg-divider bg-clip-content;
@apply rounded-full;
@apply border-solid border-transparent border-4;
@apply border-4 border-solid border-transparent;
@apply hover:bg-dividerDark;
@apply hover:bg-clip-content;
}
@@ -54,7 +80,7 @@ html {
body {
@apply bg-primary;
@apply text-secondary text-body;
@apply text-body text-secondary;
@apply font-medium;
@apply select-none;
@apply overflow-x-hidden;
@@ -124,8 +150,8 @@ a {
&.link {
@apply items-center;
@apply py-0.5 px-1;
@apply -my-0.5 -mx-1;
@apply px-1 py-0.5;
@apply -mx-1 -my-0.5;
@apply text-accent;
@apply rounded;
@apply hover:text-accentDark;
@@ -140,7 +166,7 @@ a {
@apply shadow-none #{!important};
@apply fixed;
@apply inline-flex;
@apply -mt-7.5;
@apply -mt-8;
}
}
@@ -154,7 +180,7 @@ a {
@apply flex;
@apply text-tiny text-primary;
@apply font-semibold;
@apply py-1 px-2;
@apply px-2 py-1;
@apply truncate;
@apply leading-normal;
@apply items-center;
@@ -162,7 +188,7 @@ a {
kbd {
@apply hidden;
@apply font-sans;
@apply bg-gray-500/45;
background-color: rgba(107, 114, 128, 0.45);
@apply text-primaryLight;
@apply rounded-sm;
@apply px-1;
@@ -170,6 +196,12 @@ a {
@apply truncate;
@apply sm:inline-flex;
}
.env-icon {
@apply transition;
@apply inline-flex;
@apply items-center;
}
}
.tippy-svg-arrow {
@@ -195,7 +227,7 @@ a {
@apply max-h-[45vh];
@apply items-stretch;
@apply overflow-y-auto;
@apply text-secondary text-body;
@apply text-body text-secondary;
@apply p-2;
@apply leading-normal;
@apply focus:outline-none;
@@ -234,7 +266,7 @@ hr {
.heading {
@apply font-bold;
@apply text-secondaryDark text-lg;
@apply text-lg text-secondaryDark;
@apply tracking-tight;
}
@@ -243,7 +275,7 @@ hr {
.textarea {
@apply flex;
@apply w-full;
@apply py-2 px-4;
@apply px-4 py-2;
@apply bg-transparent;
@apply rounded;
@apply text-secondaryDark;
@@ -284,7 +316,7 @@ button {
@apply transform;
@apply origin-top-left;
@apply scale-75;
@apply translate-x-1 -translate-y-4;
@apply -translate-y-4 translate-x-1;
}
.floating-input:focus-within ~ label {
@@ -293,7 +325,7 @@ button {
.floating-input ~ .end-actions {
@apply absolute;
@apply right-0.2;
@apply right-[.05rem];
@apply inset-y-0;
@apply flex;
@apply items-center;
@@ -335,23 +367,23 @@ pre.ace_editor {
}
.info-response {
@apply text-pink-500;
color: var(--info-color);
}
.success-response {
@apply text-green-500;
color: var(--success-color);
}
.redir-response {
@apply text-yellow-500;
color: var(--warning-color);
}
.cl-error-response {
@apply text-red-500;
color: var(--cl-error-color);
}
.sv-error-response {
@apply text-red-600;
color: var(--sv-error-color);
}
.missing-data-response {
@@ -366,7 +398,7 @@ pre.ace_editor {
@apply px-4 py-2;
@apply bg-tooltip;
@apply border-secondaryDark;
@apply text-primary text-body;
@apply text-body text-primary;
@apply justify-between;
@apply shadow-lg;
@apply font-semibold;
@@ -394,7 +426,7 @@ pre.ace_editor {
@apply before:opacity-10;
@apply before:inset-0;
@apply before:transition;
@apply before:content-DEFAULT;
@apply before:content-[''];
@apply hover:no-underline;
@apply hover:before:opacity-20;
}
@@ -428,7 +460,7 @@ pre.ace_editor {
@apply before:opacity-0;
@apply before:z-20;
@apply before:transition;
@apply before:content-DEFAULT;
@apply before:content-[''];
@apply hover:before:opacity-100;
}
@@ -501,22 +533,6 @@ pre.ace_editor {
}
}
.cm-panel.cm-search [name="close"] {
@apply flex;
@apply items-center;
@apply justify-center;
@apply min-h-5;
@apply min-w-5;
@apply bg-primaryDark #{!important};
@apply sticky #{!important};
@apply right-0 #{!important};
@apply ml-auto #{!important};
@apply my-auto #{!important};
@apply rounded #{!important};
@apply outline #{!important};
@apply outline-divider #{!important};
}
.shortcut-key {
@apply inline-flex;
@apply font-sans;