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

refactor(ui): better tabs

Browse Source
This commit is contained in:
liyasthomas
2021-08-22 00:39:05 +05:30
parent 08fe4ae71f
commit 0fb0ae1826
33 changed files with 394 additions and 330 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
assets/scss/styles.scss
View File

@@ -198,7 +198,7 @@ hr {
@apply rounded;
@apply text-secondaryDark;
@apply border border-divider;
@apply focus-visible:border-accent;
@apply focus-visible:border-dividerDark;
}
input,
@@ -242,7 +242,7 @@ button {
}
.floating-input:focus-within ~ label {
@apply text-accent;
@apply text-secondaryDark;
}
pre.ace_editor {
@@ -292,7 +292,7 @@ pre.ace_editor {
@apply pointer-events-none;
@apply font-icon;
@apply text-secondaryLight;
@apply left-3;
@apply left-4;
content: "\e8b6";
}
@@ -400,20 +400,35 @@ input[type="checkbox"] {
}
}
.splitpanes__splitter {
.smart-splitter .splitpanes__splitter {
@apply relative;
@apply bg-primaryLight;
}
.splitpanes--vertical > .splitpanes__splitter {
.no-splitter .splitpanes__splitter {
@apply relative;
@apply bg-primaryLight;
}
.smart-splitter.splitpanes--vertical > .splitpanes__splitter {
@apply w-1;
}
.splitpanes--horizontal > .splitpanes__splitter {
.smart-splitter.splitpanes--horizontal > .splitpanes__splitter {
@apply h-1;
}
.splitpanes__splitter::before {
.no-splitter.splitpanes--vertical > .splitpanes__splitter {
@apply w-0.5;
@apply pointer-events-none;
}
.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-dividerLight;
@@ -424,7 +439,7 @@ input[type="checkbox"] {
content: "";
}
.splitpanes__splitter::after {
.smart-splitter .splitpanes__splitter::after {
@apply absolute;
@apply inset-0;
@apply z-30;
@@ -436,25 +451,25 @@ input[type="checkbox"] {
@apply font-icon;
}
.splitpanes--vertical > .splitpanes__splitter::after {
.smart-splitter.splitpanes--vertical > .splitpanes__splitter::after {
content: "\e5d4";
}
.splitpanes--horizontal > .splitpanes__splitter::after {
.smart-splitter.splitpanes--horizontal > .splitpanes__splitter::after {
content: "\e5d3";
}
.splitpanes__splitter:hover::before {
.smart-splitter .splitpanes__splitter:hover::before {
@apply opacity-100;
}
.splitpanes--vertical > .splitpanes__splitter::before {
.smart-splitter.splitpanes--vertical > .splitpanes__splitter::before {
@apply -left-0.5;
@apply -right-0.5;
@apply h-full;
}
.splitpanes--horizontal > .splitpanes__splitter::before {
.smart-splitter.splitpanes--horizontal > .splitpanes__splitter::before {
@apply -top-0.5;
@apply -bottom-0.5;
@apply w-full;

18
assets/scss/themes.scss
View File

@@ -37,25 +37,25 @@
// Background color
--primary-color: theme("colors.white");
// Light Background color
--primary-light-color: theme("colors.blue-gray.50");
--primary-light-color: theme("colors.true-gray.50");
// Dark Background color
--primary-dark-color: theme("colors.blue-gray.100");
--primary-dark-color: theme("colors.true-gray.100");
// Text color
--secondary-color: theme("colors.blue-gray.500");
--secondary-color: theme("colors.true-gray.500");
// Light Text color
--secondary-light-color: theme("colors.blue-gray.400");
--secondary-light-color: theme("colors.true-gray.400");
// Dark Text color
--secondary-dark-color: theme("colors.blue-gray.900");
--secondary-dark-color: theme("colors.true-gray.900");
// Border color
--divider-color: theme("colors.blue-gray.200");
--divider-color: theme("colors.true-gray.200");
// Light Border color
--divider-light-color: theme("colors.blue-gray.100");
--divider-light-color: theme("colors.true-gray.100");
// Dark Border color
--divider-dark-color: theme("colors.blue-gray.300");
--divider-dark-color: theme("colors.true-gray.300");
// Error color
--error-color: theme("colors.yellow.100");
// Tooltip color
--tooltip-color: theme("colors.blue-gray.800");
--tooltip-color: theme("colors.true-gray.800");
// Popover color
--popover-color: theme("colors.white");
// Editor theme