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

7
components/app/Sidenav.vue
View File

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

2
components/docs/Collection.vue
View File

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

4
components/docs/Folder.vue
View File

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

11
components/landing/Footer.vue
View File

@@ -154,13 +154,12 @@ export default {
}
</script>
<style lang="scss" scoped>
<style scoped lang="scss">
.footer-nav {
@apply px-2 py-1;
@apply -mx-2 -my-1;
@apply text-xs;
&:hover,
&:focus {
@apply text-secondaryDark;
}
@apply hover:text-secondaryDark;
@apply focus:text-secondaryDark;
}
</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 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 {
data() {
return {
@@ -17,18 +37,14 @@ export default {
scene: null,
camera: null,
tbControls: null,
arcsData: [...Array(20).keys()].map(() => ({
startLat: (Math.random() - 0.5) * 180,
startLng: (Math.random() - 0.5) * 360,
endLat: (Math.random() - 0.5) * 180,
arcsData: [...Array(16).keys()].map(() => ({
startLat: (Math.random() - 0.5) * 90,
startLng: (Math.random() - 0.5) * 180,
endLat: (Math.random() - 0.5) * 270,
endLng: (Math.random() - 0.5) * 360,
color: [
["#00acee", "#aceeff", "#00ffac", "#aaef3e"][
Math.round(Math.random() * 3)
],
["#00acee", "#aceeff", "#00ffac", "#aaef3e"][
Math.round(Math.random() * 3)
],
COLORS[Math.round(Math.random() * 16)],
COLORS[Math.round(Math.random() * 16)],
],
})),
}
@@ -47,7 +63,9 @@ export default {
lat,
lng,
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"
large
rounded
:shortcuts="['30k']"
:shortcuts="['30k Stars']"
/>
</div>
<LandingStats />

3
components/smart/AutoComplete.vue
View File

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

5
components/smart/Tabs.vue
View File

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

6
components/smart/Toggle.vue
View File

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

3
components/smart/UrlField.vue
View File

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

9
layouts/default.vue
View File

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