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

fix: minor UI styling

Browse Source
This commit is contained in:
liyasthomas
2021-07-20 15:59:30 +05:30
parent 88ccda8fd1
commit 2ace83bcaf
13 changed files with 110 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
assets/scss/styles.scss
View File

@@ -15,17 +15,10 @@
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
@apply bg-divider; @apply bg-divider bg-clip-content;
@apply rounded-full; @apply rounded-full;
@apply border-solid; @apply border-solid border-4 border-transparent;
@apply border-4; @apply hover:(bg-dividerDark bg-clip-content);
@apply border-transparent;
@apply bg-clip-content;
&:hover {
@apply bg-dividerDark;
@apply bg-clip-content;
}
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
@@ -53,8 +46,7 @@ html {
body { body {
@apply bg-primary; @apply bg-primary;
@apply text-secondary; @apply text-secondary !text-sm;
@apply !text-sm;
@apply font-medium; @apply font-medium;
@apply select-none; @apply select-none;
@apply overflow-x-hidden; @apply overflow-x-hidden;
@@ -73,7 +65,8 @@ body {
} }
.fade-enter, .fade-enter,
.fade-leave-to .page-enter, .fade-leave-to,
.page-enter,
.page-leave-to, .page-leave-to,
.layout-enter, .layout-enter,
.layout-leave-to { .layout-leave-to {
@@ -96,26 +89,25 @@ a {
@apply text-current; @apply text-current;
@apply no-underline; @apply no-underline;
@apply outline-none; @apply outline-none;
@apply focus-visible:ring; @apply rounded-lg;
@apply focus-visible:ring-inset; @apply focus-visible:(ring ring-inset ring-accent);
@apply focus-visible:ring-accent; @apply transition;
&.link { &.link {
@apply items-center; @apply items-center;
@apply px-2 py-1;
@apply -mx-2 -my-1;
@apply text-accent; @apply text-accent;
@apply hover:text-accent; @apply hover:text-accentDark;
@apply focus:text-accent;
} }
} }
.tippy-popper { .tippy-popper {
.tooltip-theme { .tooltip-theme {
@apply bg-tooltip; @apply bg-tooltip;
@apply text-primaryLight; @apply text-primaryLight text-xs;
@apply text-xs;
@apply font-semibold; @apply font-semibold;
@apply py-1; @apply py-1 px-2;
@apply px-2;
@apply shadow; @apply shadow;
kbd { kbd {
@@ -139,59 +131,51 @@ a {
} }
&[x-placement^="top"] .tippy-tooltip .tippy-arrow { &[x-placement^="top"] .tippy-tooltip .tippy-arrow {
border-top-color: var(--primary-color); @apply border-t-primary;
} }
&[x-placement^="bottom"] .tippy-tooltip .tippy-arrow { &[x-placement^="bottom"] .tippy-tooltip .tippy-arrow {
border-bottom-color: var(--primary-color); @apply border-b-primary;
} }
&[x-placement^="left"] .tippy-tooltip .tippy-arrow { &[x-placement^="left"] .tippy-tooltip .tippy-arrow {
border-left-color: var(--primary-color); @apply border-l-primary;
} }
&[x-placement^="right"] .tippy-tooltip .tippy-arrow { &[x-placement^="right"] .tippy-tooltip .tippy-arrow {
border-right-color: var(--primary-color); @apply border-r-primary;
} }
} }
.tippy-content > div { .tippy-content > div {
@apply flex; @apply flex flex-col;
@apply flex-col;
@apply max-h-64; @apply max-h-64;
@apply overflow-y-auto;
@apply items-stretch; @apply items-stretch;
@apply overflow-y-auto;
} }
hr { hr {
@apply border-b; @apply border-b border-dividerLight;
@apply border-dividerLight;
} }
.heading { .heading {
@apply font-bold; @apply font-bold;
@apply text-secondaryDark; @apply text-secondaryDark text-lg;
@apply text-lg;
} }
.input, .input,
.select { .select {
@apply flex; @apply flex flex-1;
@apply flex-1;
@apply w-full; @apply w-full;
@apply px-4; @apply px-4 py-2;
@apply py-2;
@apply bg-primary; @apply bg-primary;
@apply truncate; @apply truncate;
@apply rounded-lg; @apply rounded-lg;
@apply font-semibold; @apply font-semibold font-mono;
@apply font-mono;
@apply text-xs; @apply text-xs;
@apply border; @apply border border-divider;
@apply border-divider;
@apply transition; @apply transition;
@apply focus:outline-none; @apply focus:(outline-none border-accent);
@apply focus:border-accent;
} }
.input[type="file"], .input[type="file"],
@@ -202,13 +186,13 @@ hr {
pre.ace_editor { pre.ace_editor {
@apply font-mono; @apply font-mono;
@apply z-0;
@apply resize-none; @apply resize-none;
@apply z-0;
} }
select { select {
@apply cursor-pointer;
@apply appearance-none; @apply appearance-none;
@apply cursor-pointer;
&::-ms-expand { &::-ms-expand {
@apply hidden; @apply hidden;
@@ -220,8 +204,8 @@ select {
@apply w-full; @apply w-full;
&::after { &::after {
@apply inline-block;
@apply absolute; @apply absolute;
@apply inline-block;
@apply pointer-events-none; @apply pointer-events-none;
@apply font-icon; @apply font-icon;
@apply text-secondaryLight; @apply text-secondaryLight;
@@ -241,8 +225,7 @@ input[type="checkbox"] {
@apply cursor-pointer; @apply cursor-pointer;
&::before { &::before {
@apply border; @apply border border-secondary;
@apply border-secondary;
@apply rounded-lg; @apply rounded-lg;
@apply inline-flex; @apply inline-flex;
@apply items-center; @apply items-center;
@@ -293,8 +276,6 @@ input[type="checkbox"] {
textarea { textarea {
@apply m-0; @apply m-0;
@apply w-full; @apply w-full;
line-height: 1;
} }
.covers-response { .covers-response {
@@ -309,11 +290,9 @@ input[type="checkbox"] {
.toasted-container { .toasted-container {
.toasted { .toasted {
&.toasted-primary { &.toasted-primary {
@apply px-6; @apply px-6 py-1;
@apply py-1;
@apply bg-tooltip; @apply bg-tooltip;
@apply text-primary; @apply text-white text-xs;
@apply text-xs;
@apply !font-semibold; @apply !font-semibold;
.material-icons { .material-icons {
@@ -322,10 +301,8 @@ input[type="checkbox"] {
.action { .action {
@apply transition; @apply transition;
@apply text-current; @apply text-current text-xs;
@apply text-xs; @apply hover:(opacity-75 no-underline);
@apply hover:opacity-75;
@apply hover:no-underline;
} }
} }
@@ -336,12 +313,6 @@ input[type="checkbox"] {
} }
} }
@media (max-width: 767px) {
main {
margin-bottom: env(safe-area-inset-bottom);
}
}
.splitpanes__splitter { .splitpanes__splitter {
@apply relative; @apply relative;
@apply bg-primaryLight; @apply bg-primaryLight;
@@ -402,3 +373,9 @@ input[type="checkbox"] {
bottom: -2px; bottom: -2px;
width: 100%; width: 100%;
} }
@media (max-width: 767px) {
main {
margin-bottom: env(safe-area-inset-bottom);
}
}

42
assets/scss/themes.scss
View File

@@ -123,11 +123,11 @@
// Dark Accent color // Dark Accent color
--accent-dark-color: theme("colors.teal.600"); --accent-dark-color: theme("colors.teal.600");
// Gradient from // Gradient from
--gradient-from-color: theme("colors.blue.200"); --gradient-from-color: theme("colors.teal.200");
// Gradient via // Gradient via
--gradient-via-color: theme("colors.blue.400"); --gradient-via-color: theme("colors.teal.400");
// Gradient to // Gradient to
--gradient-to-color: theme("colors.blue.600"); --gradient-to-color: theme("colors.teal.600");
} }
@mixin indigoTheme { @mixin indigoTheme {
@@ -138,11 +138,11 @@
// Dark Accent color // Dark Accent color
--accent-dark-color: theme("colors.indigo.600"); --accent-dark-color: theme("colors.indigo.600");
// Gradient from // Gradient from
--gradient-from-color: theme("colors.blue.200"); --gradient-from-color: theme("colors.indigo.200");
// Gradient via // Gradient via
--gradient-via-color: theme("colors.blue.400"); --gradient-via-color: theme("colors.indigo.400");
// Gradient to // Gradient to
--gradient-to-color: theme("colors.blue.600"); --gradient-to-color: theme("colors.indigo.600");
} }
@mixin purpleTheme { @mixin purpleTheme {
@@ -153,11 +153,11 @@
// Dark Accent color // Dark Accent color
--accent-dark-color: theme("colors.purple.600"); --accent-dark-color: theme("colors.purple.600");
// Gradient from // Gradient from
--gradient-from-color: theme("colors.blue.200"); --gradient-from-color: theme("colors.purple.200");
// Gradient via // Gradient via
--gradient-via-color: theme("colors.blue.400"); --gradient-via-color: theme("colors.purple.400");
// Gradient to // Gradient to
--gradient-to-color: theme("colors.blue.600"); --gradient-to-color: theme("colors.purple.600");
} }
@mixin orangeTheme { @mixin orangeTheme {
@@ -168,11 +168,11 @@
// Dark Accent color // Dark Accent color
--accent-dark-color: theme("colors.orange.600"); --accent-dark-color: theme("colors.orange.600");
// Gradient from // Gradient from
--gradient-from-color: theme("colors.blue.200"); --gradient-from-color: theme("colors.orange.200");
// Gradient via // Gradient via
--gradient-via-color: theme("colors.blue.400"); --gradient-via-color: theme("colors.orange.400");
// Gradient to // Gradient to
--gradient-to-color: theme("colors.blue.600"); --gradient-to-color: theme("colors.orange.600");
} }
@mixin pinkTheme { @mixin pinkTheme {
@@ -183,11 +183,11 @@
// Dark Accent color // Dark Accent color
--accent-dark-color: theme("colors.pink.600"); --accent-dark-color: theme("colors.pink.600");
// Gradient from // Gradient from
--gradient-from-color: theme("colors.blue.200"); --gradient-from-color: theme("colors.pink.200");
// Gradient via // Gradient via
--gradient-via-color: theme("colors.blue.400"); --gradient-via-color: theme("colors.pink.400");
// Gradient to // Gradient to
--gradient-to-color: theme("colors.blue.600"); --gradient-to-color: theme("colors.pink.600");
} }
@mixin redTheme { @mixin redTheme {
@@ -198,11 +198,11 @@
// Dark Accent color // Dark Accent color
--accent-dark-color: theme("colors.red.600"); --accent-dark-color: theme("colors.red.600");
// Gradient from // Gradient from
--gradient-from-color: theme("colors.blue.200"); --gradient-from-color: theme("colors.red.200");
// Gradient via // Gradient via
--gradient-via-color: theme("colors.blue.400"); --gradient-via-color: theme("colors.red.400");
// Gradient to // Gradient to
--gradient-to-color: theme("colors.blue.600"); --gradient-to-color: theme("colors.red.600");
} }
@mixin yellowTheme { @mixin yellowTheme {
@@ -213,11 +213,11 @@
// Dark Accent color // Dark Accent color
--accent-dark-color: theme("colors.yellow.600"); --accent-dark-color: theme("colors.yellow.600");
// Gradient from // Gradient from
--gradient-from-color: theme("colors.blue.200"); --gradient-from-color: theme("colors.yellow.200");
// Gradient via // Gradient via
--gradient-via-color: theme("colors.blue.400"); --gradient-via-color: theme("colors.yellow.400");
// Gradient to // Gradient to
--gradient-to-color: theme("colors.blue.600"); --gradient-to-color: theme("colors.yellow.600");
} }
:root { :root {

7
components/app/Sidenav.vue
View File

@@ -35,13 +35,12 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.nav-link { .nav-link {
@apply p-4; @apply p-4;
@apply flex-col; @apply flex flex-col flex-1;
@apply flex-1;
@apply hover:bg-primaryDark;
@apply hover:text-secondaryDark;
@apply items-center; @apply items-center;
@apply justify-center; @apply justify-center;
@apply transition; @apply transition;
@apply hover:bg-primaryDark;
@apply hover:text-secondaryDark;
.material-icons { .material-icons {
@apply transition-opacity; @apply transition-opacity;

2
components/docs/Collection.vue
View File

@@ -28,7 +28,7 @@ export default {
} }
</script> </script>
<style lang="scss" scoped> <style scoped lang="scss">
.collection { .collection {
@apply flex flex-col flex-1; @apply flex flex-col flex-1;
@apply justify-center; @apply justify-center;

4
components/docs/Folder.vue
View File

@@ -24,13 +24,13 @@ export default {
} }
</script> </script>
<style lang="scss" scoped> <style scoped lang="scss">
.folder { .folder {
@apply flex flex-col flex-1; @apply flex flex-col flex-1;
@apply justify-center; @apply justify-center;
@apply p-4; @apply p-4;
@apply border-l border-divider;
@apply mt-4; @apply mt-4;
@apply border-l border-divider;
.material-icons { .material-icons {
@apply mr-4; @apply mr-4;

11
components/landing/Footer.vue
View File

@@ -154,13 +154,12 @@ export default {
} }
</script> </script>
<style lang="scss" scoped> <style scoped lang="scss">
.footer-nav { .footer-nav {
@apply px-2 py-1;
@apply -mx-2 -my-1;
@apply text-xs; @apply text-xs;
@apply hover:text-secondaryDark;
&:hover, @apply focus:text-secondaryDark;
&:focus {
@apply text-secondaryDark;
}
} }
</style> </style>

40
components/landing/Globe.vue
View File

@@ -9,6 +9,26 @@ import TrackballControls from "three-trackballcontrols"
import geojson from "~/assets/geojson/ne_110m_admin_0_countries.geojson" import geojson from "~/assets/geojson/ne_110m_admin_0_countries.geojson"
import texture from "~/assets/images/texture.png" import texture from "~/assets/images/texture.png"
const COLORS = [
"#f43f5e",
"#ec4899",
"#d946ef",
"#a855f7",
"#8b5cf6",
"#6366f1",
"#3b82f6",
"#0ea5e9",
"#06b6d4",
"#14b8a6",
"#10b981",
"#22c55e",
"#84cc16",
"#eab308",
"#f59e0b",
"#f97316",
"#ef4444",
]
export default { export default {
data() { data() {
return { return {
@@ -17,18 +37,14 @@ export default {
scene: null, scene: null,
camera: null, camera: null,
tbControls: null, tbControls: null,
arcsData: [...Array(20).keys()].map(() => ({ arcsData: [...Array(16).keys()].map(() => ({
startLat: (Math.random() - 0.5) * 180, startLat: (Math.random() - 0.5) * 90,
startLng: (Math.random() - 0.5) * 360, startLng: (Math.random() - 0.5) * 180,
endLat: (Math.random() - 0.5) * 180, endLat: (Math.random() - 0.5) * 270,
endLng: (Math.random() - 0.5) * 360, endLng: (Math.random() - 0.5) * 360,
color: [ color: [
["#00acee", "#aceeff", "#00ffac", "#aaef3e"][ COLORS[Math.round(Math.random() * 16)],
Math.round(Math.random() * 3) COLORS[Math.round(Math.random() * 16)],
],
["#00acee", "#aceeff", "#00ffac", "#aaef3e"][
Math.round(Math.random() * 3)
],
], ],
})), })),
} }
@@ -47,7 +63,9 @@ export default {
lat, lat,
lng, lng,
color: color[edgeIdx], color: color[edgeIdx],
text: `${linkIdx} ${edgeIdx ? "tgt" : "src"}`, text: `#${linkIdx} ${
edgeIdx ? "response" : "request"
} ${Math.random().toString(36).substring(7)}`,
}) })
) )
) )

2
components/landing/Hero.vue
View File

@@ -38,7 +38,7 @@
svg="github" svg="github"
large large
rounded rounded
:shortcuts="['30k']" :shortcuts="['30k Stars']"
/> />
</div> </div>
<LandingStats /> <LandingStats />

3
components/smart/AutoComplete.vue
View File

@@ -197,8 +197,7 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.autocomplete-wrapper { .autocomplete-wrapper {
@apply relative; @apply relative;
@apply flex; @apply flex flex-1;
@apply flex-1;
input:focus + ul.suggestions, input:focus + ul.suggestions,
ul.suggestions:hover { ul.suggestions:hover {

5
components/smart/Tabs.vue
View File

@@ -78,11 +78,11 @@ export default {
} }
.tab { .tab {
@apply relative;
@apply flex; @apply flex;
@apply items-center; @apply items-center;
@apply justify-center; @apply justify-center;
@apply px-4; @apply px-4 py-3;
@apply py-3;
@apply text-secondary; @apply text-secondary;
@apply font-semibold; @apply font-semibold;
@apply text-xs; @apply text-xs;
@@ -91,7 +91,6 @@ export default {
@apply hover:text-secondaryDark; @apply hover:text-secondaryDark;
@apply focus:text-secondaryDark; @apply focus:text-secondaryDark;
@apply focus:outline-none; @apply focus:outline-none;
@apply relative;
.tab-info { .tab-info {
@apply inline-flex; @apply inline-flex;

6
components/smart/Toggle.vue
View File

@@ -29,9 +29,9 @@ $activeColor: var(--accent-color);
$inactiveColor: var(--divider-dark-color); $inactiveColor: var(--divider-dark-color);
$inactiveHandleColor: var(--primary-color); $inactiveHandleColor: var(--primary-color);
$activeHandleColor: var(--primary-color); $activeHandleColor: var(--primary-color);
$width: 32px; $width: 2rem;
$height: 16px; $height: 1rem;
$handleSpacing: 4px; $handleSpacing: 0.25rem;
$transition: all 0.2s ease-in-out; $transition: all 0.2s ease-in-out;
.toggle { .toggle {

3
components/smart/UrlField.vue
View File

@@ -389,7 +389,7 @@ export default {
} }
</script> </script>
<style lang="scss"> <style scoped lang="scss">
.VAR { .VAR {
@apply font-bold; @apply font-bold;
@apply text-accent; @apply text-accent;
@@ -404,7 +404,6 @@ export default {
@apply whitespace-nowrap; @apply whitespace-nowrap;
@apply overflow-x-auto; @apply overflow-x-auto;
@apply resize-none; @apply resize-none;
@apply md:border-l;
} }
.url-field::-webkit-scrollbar { .url-field::-webkit-scrollbar {

9
layouts/default.vue
View File

@@ -148,12 +148,3 @@ export default {
}, },
} }
</script> </script>
<style lang="scss" scoped>
.splitpanes--vertical > .splitpanes__splitter {
display: none;
}
.splitpanes--horizontal > .splitpanes__splitter {
display: none;
}
</style>