Files
hoppscotch/packages/hoppscotch-ui/src/assets/scss/styles.scss
2023-02-24 13:20:12 +05:30

121 lines
1.9 KiB
SCSS

@keyframes fade {
0% {
@apply opacity-0;
}
100% {
@apply opacity-100;
}
}
.fade-enter-active,
.fade-leave-active {
@apply transition-opacity;
}
.fade-enter-from,
.fade-leave-to {
@apply opacity-0;
}
.slide-enter-active,
.slide-leave-active {
@apply transition;
@apply duration-300;
}
.slide-enter-from,
.slide-leave-to {
@apply transform;
@apply translate-x-full;
}
.bounce-enter-active,
.bounce-leave-active {
@apply transition;
}
.bounce-enter-from,
.bounce-leave-to {
@apply transform;
@apply scale-95;
}
.svg-icons {
@apply flex-shrink-0;
@apply overflow-hidden;
height: var(--line-height-body);
width: var(--line-height-body);
}
a {
@apply inline-flex;
@apply text-current;
@apply no-underline;
@apply transition;
@apply leading-body;
@apply focus:outline-none;
&.link {
@apply items-center;
@apply py-0.5 px-1;
@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 focus-visible:text-accentDark;
}
}
[data-v-tippy] {
@apply flex flex-1;
}
[interactive] > div {
@apply flex flex-1;
@apply h-full;
}
hr {
@apply border-b border-dividerLight;
@apply my-2;
}
.heading {
@apply font-bold;
@apply text-secondaryDark text-lg;
@apply tracking-tight;
}
.input,
.select,
.textarea {
@apply flex;
@apply w-full;
@apply py-2 px-4;
@apply bg-transparent;
@apply rounded;
@apply text-secondaryDark;
@apply border border-divider;
@apply focus-visible:border-dividerDark;
}
.shortcut-key {
@apply inline-flex;
@apply font-sans;
@apply text-tiny;
@apply bg-divider;
@apply rounded;
@apply ml-2;
@apply px-1;
@apply min-w-5;
@apply min-h-5;
@apply items-center;
@apply justify-center;
@apply border border-dividerDark;
@apply shadow-sm;
@apply <sm:hidden;
}