feat: migrate to vue 3 + vite (#2553)

Co-authored-by: amk-dev <akash.k.mohan98@gmail.com>
Co-authored-by: liyasthomas <liyascthomas@gmail.com>
This commit is contained in:
Andrew Bastin
2022-09-29 10:55:21 +05:30
committed by GitHub
parent 77a561b581
commit 8b300fab5d
685 changed files with 17102 additions and 25942 deletions

View File

@@ -1,29 +1,28 @@
* {
@apply backface-hidden;
@apply before:backface-hidden;
@apply after:backface-hidden;
@apply selection:bg-accentDark;
@apply selection:text-accentContrast;
@apply before: backface-hidden;
@apply after: backface-hidden;
@apply selection: bg-accentDark;
@apply selection: text-accentContrast;
}
:root {
@apply antialiased;
accent-color: var(--accent-color);
font-variant-ligatures: common-ligatures;
}
::-webkit-scrollbar-track {
@apply bg-transparent;
@apply border-solid border-l border-t-0 border-b-0 border-r-0 border-dividerLight;
@apply border-solid border-l border-dividerLight border-t-0 border-b-0 border-r-0;
}
::-webkit-scrollbar-thumb {
@apply bg-divider bg-clip-content;
@apply rounded-full;
@apply border-solid border-transparent border-4;
@apply hover:bg-dividerDark;
@apply hover:bg-clip-content;
@apply hover: bg-dividerDark;
@apply hover: bg-clip-content;
}
::-webkit-scrollbar {
@@ -31,15 +30,6 @@
@apply h-0;
}
// .hide-scrollbar {
// -ms-overflow-style: none;
// scrollbar-width: none;
// }
// .hide-scrollbar::-webkit-scrollbar {
// @apply hidden;
// }
input::placeholder,
textarea::placeholder,
.cm-placeholder {
@@ -59,13 +49,11 @@ html {
body {
@apply bg-primary;
@apply text-secondary;
@apply text-secondary text-body;
@apply font-medium;
@apply select-none;
@apply overflow-x-hidden;
@apply text-body;
@apply leading-body;
animation: fade 300ms forwards;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
@@ -82,35 +70,30 @@ body {
}
.fade-enter-active,
.fade-leave-active,
.page-enter-active,
.page-leave-active,
.layout-enter-active,
.layout-leave-active {
.fade-leave-active {
@apply transition-opacity;
}
.fade-enter,
.fade-leave-to,
.page-enter,
.page-leave-to,
.layout-enter,
.layout-leave-to {
.fade-enter-from,
.fade-leave-to {
@apply opacity-0;
}
.material-icons {
@apply flex-shrink-0;
@apply overflow-hidden;
.slide-enter-active,
.slide-leave-active {
@apply transition;
@apply duration-300;
}
font-size: var(--line-height-body) !important;
width: var(--line-height-body);
.slide-enter-from,
.slide-leave-to {
@apply transform;
@apply translate-x-full;
}
.svg-icons {
@apply flex-shrink-0;
@apply overflow-hidden;
height: var(--line-height-body);
width: var(--line-height-body);
}
@@ -119,10 +102,9 @@ a {
@apply inline-flex;
@apply text-current;
@apply no-underline;
@apply outline-none;
@apply transition;
@apply text-body;
@apply leading-body;
@apply focus: outline-none;
&.link {
@apply items-center;
@@ -130,20 +112,21 @@ a {
@apply -my-0.5 -mx-1;
@apply text-accent;
@apply rounded;
@apply hover:text-accentDark;
@apply focus-visible:ring;
@apply focus-visible:ring-accent;
@apply hover: text-accentDark;
@apply focus-visible: ring;
@apply focus-visible: ring-accent;
@apply focus-visible: text-accentDark;
}
}
.cm-tooltip {
.tooltip-theme {
.tippy-box {
@apply fixed;
@apply -mt-6;
}
}
.tooltip-theme {
.tippy-box[data-theme="tooltip"] {
@apply bg-tooltip;
@apply text-primary;
@apply font-semibold;
@@ -152,54 +135,59 @@ a {
@apply truncate;
@apply shadow;
@apply leading-body;
font-size: 86%;
xmp {
@apply hidden;
@apply sm:inline-flex;
@apply font-sans;
@apply bg-gray-500;
@apply bg-opacity-45;
@apply bg-gray-500/45;
@apply text-primaryLight;
@apply rounded-sm;
@apply px-1;
@apply ml-1;
@apply my-0;
@apply my-0 ml-1;
@apply truncate;
@apply sm: inline-flex;
&.expand-loop {
@apply bg-error;
@apply text-accentContrast;
}
}
}
.popover-theme {
@apply bg-popover;
@apply text-secondary;
@apply p-2;
@apply shadow-lg;
@apply text-body;
@apply leading-body;
@apply focus:outline-none;
.tippy-roundarrow svg {
@apply fill-popover;
.tippy-svg-arrow svg {
@apply fill-tooltip;
}
}
[interactive] > div {
@apply flex;
@apply flex-1;
@apply h-full;
}
.tippy-content > div {
.tippy-box[data-theme="popover"] {
@apply flex flex-col;
@apply max-h-46;
@apply items-stretch;
@apply overflow-y-auto;
@apply bg-popover;
@apply text-secondary text-body;
@apply p-2;
@apply shadow-lg;
@apply leading-body;
@apply border border-dividerDark;
@apply focus: outline-none;
.tippy-svg-arrow svg {
@apply fill-popover;
}
}
.tippy-content {
@apply p-0;
}
[data-v-tippy] {
@apply flex flex-1;
}
[interactive]>div {
@apply flex flex-1;
@apply h-full;
}
hr {
@@ -210,6 +198,7 @@ hr {
.heading {
@apply font-bold;
@apply text-secondaryDark text-lg;
@apply tracking-tight;
}
.input,
@@ -222,7 +211,7 @@ hr {
@apply rounded;
@apply text-secondaryDark;
@apply border border-divider;
@apply focus-visible:border-dividerDark;
@apply focus-visible: border-dividerDark;
}
input,
@@ -233,8 +222,8 @@ button {
@apply transition;
@apply text-body;
@apply leading-body;
@apply focus:outline-none;
@apply disabled:cursor-not-allowed;
@apply focus: outline-none;
@apply disabled: cursor-not-allowed;
}
.input[type="file"],
@@ -243,27 +232,25 @@ button {
@apply hidden;
}
.floating-input ~ label {
@apply py-0.5;
@apply px-2;
.floating-input~label {
@apply absolute;
@apply px-2 py-0.5;
@apply m-2;
@apply rounded;
@apply transition;
@apply absolute;
@apply origin-top-left;
}
.floating-input:focus-within ~ label,
.floating-input:not(:placeholder-shown) ~ label {
.floating-input:focus-within~label,
.floating-input:not(:placeholder-shown)~label {
@apply bg-primary;
@apply transform;
@apply origin-top-left;
@apply scale-75;
@apply -translate-y-4;
@apply translate-x-1;
@apply translate-x-1 -translate-y-4;
}
.floating-input:focus-within ~ label {
.floating-input:focus-within~label {
@apply text-secondaryDark;
}
@@ -285,20 +272,16 @@ pre.ace_editor {
.select-wrapper {
@apply flex flex-1;
@apply relative;
&::after {
@apply absolute;
@apply flex;
@apply inset-y-0;
@apply items-center;
@apply justify-center;
@apply pointer-events-none;
@apply font-icon;
@apply text-secondaryLight;
@apply right-3;
content: "\e313";
}
@apply after: absolute;
@apply after: flex;
@apply after: inset-y-0;
@apply after: items-center;
@apply after: justify-center;
@apply after: pointer-events-none;
@apply after: font-icon;
@apply after: text-secondaryLight;
@apply after: right-3;
@apply after: content-["\e313"];
}
.info-response {
@@ -330,45 +313,58 @@ pre.ace_editor {
.toasted {
&.toasted-primary {
@apply px-4 py-2;
@apply bg-tooltip;
@apply text-primary;
@apply border-secondaryDark;
@apply text-primary text-body;
@apply justify-between;
@apply shadow;
@apply font-medium;
@apply shadow-lg;
@apply font-semibold;
@apply transition;
@apply text-body;
@apply leading-body;
@apply sm: rounded;
@apply sm: border;
.action {
@apply bg-gray-500;
@apply px-4;
@apply bg-opacity-10;
@apply ml-auto;
@apply last:ml-4;
@apply sm:ml-8;
@apply rounded;
@apply text-current;
@apply normal-case;
@apply font-medium;
@apply relative;
@apply flex flex-shrink-0;
@apply text-body;
@apply px-4;
@apply my-1;
@apply ml-auto;
@apply normal-case;
@apply font-semibold;
@apply leading-body;
@apply hover:bg-opacity-20;
@apply hover:no-underline;
@apply tracking-normal;
@apply last: ml-4;
@apply sm: ml-8;
@apply before: absolute;
@apply before: bg-current;
@apply before: opacity-10;
@apply before: inset-0;
@apply before: transition;
@apply before: content-DEFAULT;
@apply hover: no-underline;
@apply hover: before:opacity-20;
}
}
&.info {
@apply !bg-accent;
@apply bg-accent;
@apply text-accentContrast;
@apply border-accentDark;
}
&.error {
@apply !bg-red-200;
@apply !text-red-800;
@apply bg-red-200;
@apply text-red-800;
@apply border-red-400;
}
&.success {
@apply !bg-green-200;
@apply !text-green-800;
@apply bg-green-200;
@apply text-green-800;
@apply border-green-400;
}
}
}
@@ -376,6 +372,24 @@ pre.ace_editor {
.smart-splitter .splitpanes__splitter {
@apply relative;
@apply bg-primaryLight;
@apply before: absolute;
@apply before: inset-0;
@apply before: bg-accentLight;
@apply before: opacity-0;
@apply before: z-20;
@apply before: transition;
@apply before: content-DEFAULT;
@apply after: absolute;
@apply after: inset-0;
@apply after: z-20;
@apply after: transition;
@apply after: flex;
@apply after: items-center;
@apply after: justify-center;
@apply after: text-dividerDark;
@apply after: font-icon;
@apply hover: before:opacity-100;
@apply hover: after:text-accentDark;
}
.no-splitter .splitpanes__splitter {
@@ -383,74 +397,35 @@ pre.ace_editor {
@apply bg-primaryLight;
}
.smart-splitter.splitpanes--vertical > .splitpanes__splitter {
.smart-splitter.splitpanes--vertical>.splitpanes__splitter {
@apply w-1;
@apply before: -left-0.5;
@apply before: -right-0.5;
@apply before: h-full;
@apply after: content-["\e5d4"];
}
.smart-splitter.splitpanes--horizontal > .splitpanes__splitter {
.smart-splitter.splitpanes--horizontal>.splitpanes__splitter {
@apply h-1;
@apply before: -top-0.5;
@apply before: -bottom-0.5;
@apply before: w-full;
@apply after: content-["\e5d3"];
}
.no-splitter.splitpanes--vertical > .splitpanes__splitter {
.no-splitter.splitpanes--vertical>.splitpanes__splitter {
@apply w-0.5;
@apply pointer-events-none;
}
.no-splitter.splitpanes--horizontal > .splitpanes__splitter {
.no-splitter.splitpanes--horizontal>.splitpanes__splitter {
@apply h-0.5;
@apply pointer-events-none;
}
.smart-splitter .splitpanes__splitter::before {
@apply absolute;
@apply inset-0;
@apply bg-accentLight;
@apply opacity-0;
@apply z-20;
@apply transition;
content: "";
}
.smart-splitter .splitpanes__splitter::after {
@apply absolute;
@apply inset-0;
@apply z-20;
@apply transition;
@apply flex;
@apply items-center;
@apply justify-center;
@apply text-dividerDark;
@apply font-icon;
}
.smart-splitter.splitpanes--vertical > .splitpanes__splitter::after {
content: "\e5d4";
}
.smart-splitter.splitpanes--horizontal > .splitpanes__splitter::after {
content: "\e5d3";
}
.smart-splitter .splitpanes__splitter:hover::before {
@apply opacity-100;
}
.smart-splitter.splitpanes--vertical > .splitpanes__splitter::before {
@apply -left-0.5;
@apply -right-0.5;
@apply h-full;
}
.smart-splitter.splitpanes--horizontal > .splitpanes__splitter::before {
@apply -top-0.5;
@apply -bottom-0.5;
@apply w-full;
}
.cm-focused {
@apply select-auto;
@apply !outline-none;
@apply outline-none;
.cm-activeLine {
@apply bg-primaryLight;
@@ -463,12 +438,13 @@ pre.ace_editor {
.cm-editor {
.cm-line::selection {
background-color: var(--accent-dark-color) !important;
color: var(--accent-contrast-color) !important;
@apply bg-accentDark #{!important};
@apply text-accentContrast #{!important};
}
.cm-line ::selection {
background-color: var(--accent-dark-color) !important;
color: var(--accent-contrast-color) !important;
@apply bg-accentDark #{!important};
@apply text-accentContrast #{!important};
}
}
@@ -484,13 +460,22 @@ pre.ace_editor {
}
.capitalize-first {
@apply first-letter:capitalize;
@apply first-letter: capitalize;
}
details {
@apply select-none;
}
details summary::-webkit-details-marker {
@apply hidden;
}
details[open] summary .indicator {
@apply transform;
@apply rotate-90;
}
@media (max-width: 767px) {
main {
margin-bottom: env(safe-area-inset-bottom);
@@ -502,3 +487,7 @@ details summary::-webkit-details-marker {
@apply text-accentContrast;
}
}
#nprogress .bar {
@apply bg-accent #{!important};
}

View File

@@ -6,49 +6,52 @@
}
@mixin dark-theme {
--primary-color: theme("colors.true-gray.900");
--primary-color: theme("colors.neutral.900");
--primary-light-color: theme("colors.dark.600");
--primary-dark-color: theme("colors.true-gray.800");
--secondary-color: theme("colors.true-gray.400");
--secondary-light-color: theme("colors.true-gray.500");
--secondary-dark-color: theme("colors.true-gray.100");
--divider-color: theme("colors.true-gray.800");
--primary-dark-color: theme("colors.neutral.800");
--primary-contrast-color: #161616;
--secondary-color: theme("colors.neutral.400");
--secondary-light-color: theme("colors.neutral.500");
--secondary-dark-color: theme("colors.neutral.100");
--divider-color: theme("colors.neutral.800");
--divider-light-color: theme("colors.dark.500");
--divider-dark-color: theme("colors.dark.300");
--error-color: theme("colors.warm-gray.800");
--tooltip-color: theme("colors.true-gray.100");
--error-color: theme("colors.stone.800");
--tooltip-color: theme("colors.neutral.100");
--popover-color: theme("colors.dark.700");
--editor-theme: "merbivore_soft";
}
@mixin light-theme {
--primary-color: theme("colors.white");
--primary-light-color: theme("colors.true-gray.50");
--primary-dark-color: theme("colors.true-gray.100");
--secondary-color: theme("colors.true-gray.500");
--secondary-light-color: theme("colors.true-gray.400");
--secondary-dark-color: theme("colors.true-gray.900");
--primary-light-color: theme("colors.neutral.50");
--primary-dark-color: theme("colors.neutral.100");
--primary-contrast-color: #fefefe;
--secondary-color: theme("colors.neutral.500");
--secondary-light-color: theme("colors.neutral.400");
--secondary-dark-color: theme("colors.neutral.900");
--divider-color: theme("colors.gray.100");
--divider-light-color: theme("colors.true-gray.100");
--divider-dark-color: theme("colors.true-gray.300");
--divider-light-color: theme("colors.neutral.100");
--divider-dark-color: theme("colors.neutral.300");
--error-color: theme("colors.yellow.100");
--tooltip-color: theme("colors.true-gray.800");
--tooltip-color: theme("colors.neutral.800");
--popover-color: theme("colors.white");
--editor-theme: "textmate";
}
@mixin black-theme {
--primary-color: theme("colors.dark.900");
--primary-light-color: theme("colors.true-gray.900");
--primary-light-color: theme("colors.neutral.900");
--primary-dark-color: theme("colors.dark.800");
--secondary-color: theme("colors.true-gray.400");
--secondary-light-color: theme("colors.true-gray.500");
--secondary-dark-color: theme("colors.true-gray.100");
--divider-color: theme("colors.true-gray.800");
--primary-contrast-color: #0e0e0e;
--secondary-color: theme("colors.neutral.400");
--secondary-light-color: theme("colors.neutral.500");
--secondary-dark-color: theme("colors.neutral.100");
--divider-color: theme("colors.neutral.800");
--divider-light-color: theme("colors.dark.800");
--divider-dark-color: theme("colors.dark.300");
--error-color: theme("colors.warm-gray.900");
--tooltip-color: theme("colors.true-gray.100");
--error-color: theme("colors.stone.900");
--tooltip-color: theme("colors.neutral.100");
--popover-color: theme("colors.dark.600");
--editor-theme: "twilight";
}
@@ -247,15 +250,15 @@
--font-size-body: 0.75rem;
--line-height-body: 1rem;
--upper-primary-sticky-fold: 4.125rem;
--upper-secondary-sticky-fold: 6.125rem;
--upper-tertiary-sticky-fold: 8.188rem;
--upper-secondary-sticky-fold: 6.188rem;
--upper-tertiary-sticky-fold: 8.25rem;
--upper-mobile-primary-sticky-fold: 6.625rem;
--upper-mobile-secondary-sticky-fold: 8.625rem;
--upper-mobile-raw-sticky-fold: 10.688rem;
--upper-mobile-raw-tertiary-sticky-fold: 8.188rem;
--upper-mobile-secondary-sticky-fold: 8.688rem;
--upper-mobile-sticky-fold: 10.75rem;
--upper-mobile-tertiary-sticky-fold: 8.25rem;
--lower-primary-sticky-fold: 3rem;
--lower-secondary-sticky-fold: 5rem;
--lower-tertiary-sticky-fold: 7.05rem;
--lower-secondary-sticky-fold: 5.063rem;
--lower-tertiary-sticky-fold: 7.125rem;
--sidebar-primary-sticky-fold: 2rem;
}
@@ -263,15 +266,15 @@
--font-size-body: 0.875rem;
--line-height-body: 1.25rem;
--upper-primary-sticky-fold: 4.375rem;
--upper-secondary-sticky-fold: 6.625rem;
--upper-tertiary-sticky-fold: 8.813rem;
--upper-secondary-sticky-fold: 6.688rem;
--upper-tertiary-sticky-fold: 9rem;
--upper-mobile-primary-sticky-fold: 7.125rem;
--upper-mobile-secondary-sticky-fold: 9.375rem;
--upper-mobile-raw-sticky-fold: 11.688rem;
--upper-mobile-raw-tertiary-sticky-fold: 8.938rem;
--upper-mobile-secondary-sticky-fold: 9.438rem;
--upper-mobile-sticky-fold: 11.75rem;
--upper-mobile-tertiary-sticky-fold: 9rem;
--lower-primary-sticky-fold: 3.25rem;
--lower-secondary-sticky-fold: 5.5rem;
--lower-tertiary-sticky-fold: 7.8rem;
--lower-secondary-sticky-fold: 5.563rem;
--lower-tertiary-sticky-fold: 7.875rem;
--sidebar-primary-sticky-fold: 2.25rem;
}
@@ -279,15 +282,15 @@
--font-size-body: 1rem;
--line-height-body: 1.5rem;
--upper-primary-sticky-fold: 4.625rem;
--upper-secondary-sticky-fold: 7.125rem;
--upper-tertiary-sticky-fold: 9.5rem;
--upper-secondary-sticky-fold: 7.188rem;
--upper-tertiary-sticky-fold: 9.75rem;
--upper-mobile-primary-sticky-fold: 7.625rem;
--upper-mobile-secondary-sticky-fold: 10.125rem;
--upper-mobile-raw-sticky-fold: 12.688rem;
--upper-mobile-raw-tertiary-sticky-fold: 9.688rem;
--upper-mobile-secondary-sticky-fold: 10.188rem;
--upper-mobile-sticky-fold: 12.75rem;
--upper-mobile-tertiary-sticky-fold: 9.75rem;
--lower-primary-sticky-fold: 3.5rem;
--lower-secondary-sticky-fold: 6rem;
--lower-tertiary-sticky-fold: 8.55rem;
--lower-secondary-sticky-fold: 6.063rem;
--lower-tertiary-sticky-fold: 8.625rem;
--sidebar-primary-sticky-fold: 2.5rem;
}