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

refactor: minor ui improvements

Browse Source
This commit is contained in:
liyasthomas
2021-12-14 22:41:07 +05:30
parent 70555cd4a6
commit a2757a0335
58 changed files with 289 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
packages/hoppscotch-app/assets/scss/styles.scss
View File

@@ -64,10 +64,10 @@ body {
@apply font-medium;
@apply select-none;
@apply overflow-x-hidden;
@apply text-body;
@apply leading-body;
animation: fade 300ms forwards;
font-size: var(--body-font-size);
line-height: var(--body-line-height);
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
}
@@ -103,15 +103,15 @@ body {
.material-icons {
@apply flex-shrink-0;
font-size: var(--body-line-height) !important;
width: var(--body-line-height);
font-size: var(--line-height-body) !important;
width: var(--line-height-body);
}
.svg-icons {
@apply flex-shrink-0;
height: var(--body-line-height);
width: var(--body-line-height);
height: var(--line-height-body);
width: var(--line-height-body);
}
a {
@@ -120,9 +120,8 @@ a {
@apply no-underline;
@apply outline-none;
@apply transition;
font-size: var(--body-font-size);
line-height: var(--body-line-height);
@apply text-body;
@apply leading-body;
&.link {
@apply items-center;
@@ -144,9 +143,9 @@ a {
@apply rounded;
@apply truncate;
@apply shadow;
@apply leading-body;
font-size: 88%;
line-height: var(--body-line-height);
kbd {
@apply inline-flex;
@@ -166,11 +165,10 @@ a {
@apply text-secondary;
@apply p-2;
@apply shadow-lg;
@apply text-body;
@apply leading-body;
@apply focus:outline-none;
font-size: var(--body-font-size);
line-height: var(--body-line-height);
.tippy-roundarrow svg {
@apply fill-popover;
}
@@ -216,13 +214,12 @@ input,
select,
textarea,
button {
@apply focus:outline-none;
@apply truncate;
@apply transition;
@apply text-body;
@apply leading-body;
@apply focus:outline-none;
@apply disabled:cursor-not-allowed;
font-size: var(--body-font-size);
line-height: var(--body-line-height);
}
.input[type="file"],
@@ -323,9 +320,8 @@ pre.ace_editor {
@apply shadow;
@apply font-medium;
@apply transition;
font-size: var(--body-font-size);
line-height: var(--body-line-height);
@apply text-body;
@apply leading-body;
.action {
@apply bg-gray-500;
@@ -337,12 +333,11 @@ pre.ace_editor {
@apply rounded;
@apply text-current;
@apply normal-case;
@apply font-medium;
@apply text-body;
@apply leading-body;
@apply hover:bg-opacity-20;
@apply hover:no-underline;
@apply font-medium;
font-size: var(--body-font-size);
line-height: var(--body-line-height);
}
}
@@ -451,6 +446,7 @@ pre.ace_editor {
}
.shortcut-key {
@apply font-sans;
@apply bg-dividerLight;
@apply rounded;
@apply ml-2;

13
packages/hoppscotch-app/assets/scss/themes.scss
View File

@@ -2,6 +2,7 @@
--font-sans: "Inter", sans-serif;
--font-mono: "Roboto Mono", monospace;
--font-icon: "Material Icons";
--font-size-tiny: calc(var(--font-size-body) - 0.062rem);
}
@mixin dark-theme {
@@ -243,8 +244,8 @@
}
@mixin font-small {
--body-font-size: 0.75rem;
--body-line-height: 1rem;
--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;
@@ -255,8 +256,8 @@
}
@mixin font-medium {
--body-font-size: 0.875rem;
--body-line-height: 1.25rem;
--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;
@@ -267,8 +268,8 @@
}
@mixin font-large {
--body-font-size: 1rem;
--body-line-height: 1.5rem;
--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;