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

Feat/tailwind (#1179)

Browse Source
This commit is contained in:
Liyas Thomas
2020-09-22 22:36:37 +05:30
committed by GitHub
parent 45fb612793
commit b747d0273c
59 changed files with 2020 additions and 1431 deletions
Download Patch File Download Diff File Expand all files Collapse all files

784
assets/css/styles.scss
View File

@@ -1,784 +0,0 @@
$responsiveWidth: 768px;
::selection {
background-color: var(--ac-color);
color: var(--act-color);
}
::-webkit-scrollbar {
width: 4px;
height: 4px;
border-radius: 4px;
background-color: var(--bg-dark-color);
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: var(--fg-light-color);
&:hover {
background-color: var(--fg-color);
}
}
::placeholder {
color: var(--fg-light-color);
opacity: 0.3;
}
* {
box-sizing: border-box;
outline: 0;
border: 0;
}
html,
body {
background-color: var(--bg-color);
color: var(--fg-color);
font-weight: 500;
font-size: 14px;
font-family: "Poppins", "Roboto", "Noto", sans-serif;
line-height: 1.5;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
user-select: none;
padding: 0;
margin: 0;
scroll-behavior: smooth;
transition: all 0.2s ease-in-out;
}
body.afterLoad {
transition: background-color 0.2s ease-in-out;
}
body.sticky-footer footer {
opacity: 0.25;
}
a {
display: inline-flex;
color: inherit;
text-decoration: none;
transition: all 0.2s ease-in-out;
&.link {
color: var(--ac-color);
}
}
header,
footer {
& > div {
display: flex;
padding: 16px 8px;
width: 100%;
align-items: center;
justify-content: space-between;
}
}
.page-enter-active,
.page-leave-active,
.layout-enter-active,
.layout-leave-active {
transition: opacity 0.2s;
}
.page-enter,
.page-leave-active,
.layout-enter,
.layout-leave-active {
opacity: 0;
}
.wrapper {
min-height: 100vh;
display: flex;
flex-flow: column nowrap;
}
.wrapper .page {
min-height: calc(100vh - 153px);
}
.header,
.content,
.columns,
.footer {
display: flex;
flex: 1;
}
.nav-first,
.sticky-inner {
display: flex;
order: 1;
flex-flow: column;
position: sticky;
top: 0;
align-self: flex-start;
}
.main {
display: flex;
flex-flow: column;
flex: 1;
order: 2;
position: relative;
padding: 0 16px;
}
h1,
h2,
h3,
h4 {
display: flex;
align-items: center;
margin: 0;
font-weight: 700;
}
h3.title {
margin: 4px;
}
p {
transition: all 0.2s ease-in-out;
}
hr {
border-bottom: 1px dashed var(--brd-color);
margin: 16px 0;
}
.tooltip {
$bgcolor: var(--tt-color);
$fgcolor: var(--fg-color);
display: block !important;
z-index: 10000;
transition: all 0.2s ease-in-out;
.tooltip-inner {
background: $bgcolor;
color: $fgcolor;
border-radius: 8px;
padding: 8px 16px;
font-size: 12px;
font-weight: 500;
box-shadow: 0 4px 24px rgba(black, 0.1);
}
.tooltip-arrow {
width: 0;
height: 0;
border-style: solid;
position: absolute;
margin: 5px;
border-color: $bgcolor;
z-index: 1;
}
&[x-placement^="top"] {
margin-bottom: 5px;
.tooltip-arrow {
border-width: 5px 5px 0 5px;
border-left-color: transparent !important;
border-right-color: transparent !important;
border-bottom-color: transparent !important;
bottom: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
}
}
&[x-placement^="bottom"] {
margin-top: 5px;
.tooltip-arrow {
border-width: 0 5px 5px 5px;
border-left-color: transparent !important;
border-right-color: transparent !important;
border-top-color: transparent !important;
top: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
}
}
&[x-placement^="right"] {
margin-left: 5px;
.tooltip-arrow {
border-width: 5px 5px 5px 0;
border-left-color: transparent !important;
border-top-color: transparent !important;
border-bottom-color: transparent !important;
left: -5px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0;
}
}
&[x-placement^="left"] {
margin-right: 5px;
.tooltip-arrow {
border-width: 5px 0 5px 5px;
border-top-color: transparent !important;
border-right-color: transparent !important;
border-bottom-color: transparent !important;
right: -5px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0;
}
}
&.popover {
.wrapper {
min-height: auto;
}
.popover-inner {
background: $bgcolor;
color: $fgcolor;
padding: 4px;
border-radius: 8px;
box-shadow: 0 5px 30px rgba(black, 0.1);
max-height: 256px;
overflow: auto;
div {
display: flex;
align-items: stretch;
flex-direction: column;
}
button {
justify-content: start;
}
}
.popover-arrow {
border-color: $bgcolor;
}
}
&[aria-hidden="true"] {
visibility: hidden;
opacity: 0;
transition: opacity 0.15s, visibility 0.15s;
}
&[aria-hidden="false"] {
visibility: visible;
opacity: 1;
transition: opacity 0.15s;
}
}
.info:not(.toasted) {
margin-left: 4px;
color: var(--fg-light-color);
.material-icons {
vertical-align: middle;
margin-right: 8px;
}
}
.bg-color {
background-color: transparent;
}
button {
display: inline-flex;
align-items: center;
justify-content: center;
margin: 4px;
padding: 6px 16px;
border-radius: 8px;
background-color: var(--ac-color);
color: var(--act-color);
font-size: 16px;
font-family: "Poppins", "Roboto", "Noto", sans-serif;
font-weight: 700;
transition: all 0.2s ease-in-out;
fill: var(--act-color);
cursor: pointer;
span {
display: inline-flex;
margin-left: 8px;
text-align: left;
}
&:not([disabled]):hover,
&:not([disabled]):active,
&:not([disabled]):focus {
color: var(--act-color);
fill: var(--act-color);
box-shadow: inset 0 0 0 2px var(--fg-color);
}
&.icon {
background-color: transparent;
color: var(--fg-light-color);
fill: var(--fg-light-color);
border-radius: 8px;
&:not([disabled]):hover,
&:not([disabled]):active,
&:not([disabled]):focus {
color: var(--fg-color);
fill: var(--fg-color);
box-shadow: none;
}
}
&.primary {
color: var(--ac-color);
&:not([disabled]):hover,
&:not([disabled]):active,
&:not([disabled]):focus {
background-color: var(--ac-color);
color: var(--act-color);
}
}
}
@keyframes beat {
30% {
transform: scale(1.1);
}
50% {
transform: scale(0.9);
}
100% {
transform: scale(1);
}
}
.material-icons:active {
animation: beat 0.5s forwards 1;
}
fieldset:target,
section:target {
animation: highlight 2s ease;
}
@keyframes highlight {
50% {
box-shadow: 0 0 0 2px var(--ac-color);
}
}
input[type="file"],
input[type="radio"],
#installPWA,
.hidden {
display: none;
}
.show-on-large-screen {
display: flex;
flex: 1;
}
.method,
.url-field,
kbd,
select,
input,
textarea,
pre,
code {
display: inline-flex;
margin: 4px;
padding: 8px;
border-radius: 8px;
background-color: var(--bg-dark-color);
color: var(--fg-color);
font-size: 16px;
font-family: "Roboto Mono", monospace;
font-weight: 400;
line-height: 1.25;
transition: all 0.2s ease-in-out;
user-select: text;
width: calc(100% - 8px);
resize: vertical;
text-overflow: ellipsis;
&:not([readonly]):not(.ace_editor):hover,
&:not([readonly]):not(.ace_editor):active,
&:not([readonly]):not(.ace_editor):focus {
box-shadow: inset 0 0 0 2px var(--fg-light-color);
}
}
.method {
cursor: pointer;
&:hover,
&:active,
&:focus {
box-shadow: inset 0 0 0 2px var(--fg-light-color);
}
}
pre {
display: grid;
}
pre.ace_editor {
font-family: "Roboto Mono", monospace;
font-weight: 400;
z-index: 0;
}
kbd,
code,
pre {
width: auto;
}
.select-wrapper {
position: relative;
input {
text-transform: uppercase;
min-width: 128px;
}
.trigger {
width: 100%;
}
&:after {
display: inline-block;
position: absolute;
pointer-events: none;
content: "\e313";
font-family: "Material Icons";
top: 14px;
right: 14px;
}
}
select {
height: 37px;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
&::-ms-expand {
display: none;
}
}
option {
background-color: var(--bg-color);
}
input[type="checkbox"] {
display: none;
&,
& + label {
vertical-align: middle;
cursor: pointer;
&:before {
content: "\2714";
border: 1px solid var(--fg-color);
border-radius: 8px;
display: inline-flex;
height: 16px;
width: 16px;
align-items: center;
justify-content: center;
margin: 8px 8px 8px 0;
color: transparent;
transition: all 0.2s ease-in-out;
}
}
&:checked + label:before {
background-color: var(--ac-color);
border-color: var(--ac-color);
color: var(--act-color);
}
}
.error:not(input),
.disabled:not(input),
[disabled] {
background-color: var(--err-color);
color: var(--fg-light-color);
fill: var(--fg-light-color);
cursor: not-allowed;
&.icon {
color: var(--err-color);
fill: var(--err-color);
}
}
label {
padding: 4px;
color: var(--fg-light-color);
transition: all 0.2s ease-in-out;
}
ul,
ol {
display: flex;
margin: 4px 0 4px;
padding: 0;
list-style-type: none;
ul,
ol {
margin: 0;
}
}
ul li,
ol li {
display: inline-flex;
flex-flow: column nowrap;
flex: 1;
justify-content: center;
&.shrink {
flex-grow: 0;
}
}
.flex-wrap {
display: flex;
align-items: center;
justify-content: space-between;
flex-grow: 1;
flex-direction: row;
* {
display: inline-flex;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
}
}
.info-response {
color: #ffeb3b;
}
.success-response {
color: #4bb543;
}
.redir-response {
color: #ff5722;
}
.cl-error-response {
color: #a63232;
}
.sv-error-response {
color: #b71c1c;
}
.missing-data-response {
background-color: var(--err-color);
}
.align-left {
text-align: left;
}
.align-center {
text-align: center;
}
.align-right {
text-align: right;
}
.mono {
font-family: "Roboto Mono", monospace;
font-weight: 400;
}
#response-details-wrapper {
position: relative;
overflow: hidden;
border-radius: 8px;
textarea {
margin: 0;
width: 100%;
line-height: 1;
}
.covers-response {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: white;
height: 100%;
width: 100%;
}
}
#send {
white-space: nowrap;
&.show {
display: flex;
position: fixed;
bottom: 86px;
left: 50%;
z-index: 10001;
transform: translateX(-50%);
box-shadow: 0 4px 24px rgba(black, 0.2);
transition: all 0.2s ease-in-out;
}
}
section {
display: flex;
flex-wrap: wrap;
border-radius: 8px;
}
.toasted-container .toasted {
justify-content: space-between !important;
}
.toasted.info {
background-color: var(--ac-color) !important;
color: var(--act-color) !important;
font-weight: 700 !important;
}
.toasted.bubble .action {
color: inherit !important;
}
.toasted .action {
margin-left: auto !important;
}
.page-columns {
display: flex;
flex: 1;
flex-flow: column;
}
.inner-left {
display: flex;
order: 1;
}
.inner-right {
display: flex;
width: 30%;
order: 2;
margin-left: 16px;
}
@media (max-width: $responsiveWidth) {
.content,
.columns {
flex-flow: column;
}
.main {
padding: 0 8px 68px;
}
ul,
ol {
flex-flow: column nowrap;
}
ul li,
ol li {
display: flex;
}
.hide-on-small-screen {
display: none;
}
.sticky-inner {
position: relative;
width: 100%;
}
.inner-left {
order: 0;
}
.inner-right {
margin-left: 0;
}
.toasted-container {
margin-bottom: 68px;
}
}
.toasted-ad {
background-color: #fefefe;
color: #121212;
padding: 16px !important;
font-weight: 700;
font-size: 16px;
border-radius: 8px;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
.action {
text-transform: none !important;
background-color: #121212;
color: #fefefe;
padding: 12px 16px !important;
font-weight: 500 !important;
font-size: 16px !important;
border-radius: 8px;
margin: 0 !important;
margin-left: 8px !important;
}
}
.virtual-list {
overflow: auto;
}
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
overflow-wrap: break-word;
word-break: break-all;
}
.github-sponsor {
margin-right: 4px;
max-width: 64px;
max-height: 64px;
border-radius: 100%;
}

5
assets/css/tailwind.css Normal file
View File

@@ -0,0 +1,5 @@
/* purgecss start ignore */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
/* purgecss end ignore */
@import 'tailwindcss/utilities';

20
assets/css/fonts.scss → assets/scss/fonts.scss
View File

@@ -12,26 +12,6 @@
src: url("~static/fonts/material-icons-v54.woff2") format("woff2"); src: url("~static/fonts/material-icons-v54.woff2") format("woff2");
} }
.material-icons {
font-family: "Material Icons";
font-weight: normal;
font-style: normal;
height: 24px;
width: 24px;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: "liga";
-webkit-font-smoothing: antialiased;
font-feature-settings: "liga";
border-radius: 50%;
}
/* poppins-500 - latin */ /* poppins-500 - latin */
@font-face { @font-face {
font-family: "Poppins"; font-family: "Poppins";

827
assets/scss/styles.scss Normal file
View File

@@ -0,0 +1,827 @@
$responsiveWidth: 768px;
*,
*::before,
*::after {
backface-visibility: hidden;
}
:root {
font-variant-ligatures: common-ligatures;
@apply antialiased;
}
::selection {
@apply bg-acColor;
@apply text-actColor;
}
::-webkit-scrollbar {
@apply h-1;
@apply w-1;
@apply rounded-lg;
&:hover {
@apply bg-bgDarkColor;
}
}
::-webkit-scrollbar-thumb {
@apply rounded-lg;
@apply bg-fgLightColor;
&:hover {
@apply bg-fgColor;
}
}
::placeholder {
@apply text-fgLightColor;
@apply opacity-25;
}
html {
scroll-behavior: smooth;
}
body {
@apply bg-bgColor;
@apply text-fgColor;
@apply text-base;
@apply font-body;
@apply font-medium;
@apply select-none;
@apply transition;
@apply ease-in-out;
@apply duration-200;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
}
body.afterLoad {
@apply transition-colors;
@apply ease-in-out;
@apply duration-200;
}
body.sticky-footer footer {
@apply opacity-25;
}
.page-enter-active,
.page-leave-active,
.layout-enter-active,
.layout-leave-active {
@apply transition-opacity;
@apply duration-200;
}
.page-enter,
.page-leave-active,
.layout-enter,
.layout-leave-active {
@apply opacity-0;
}
a {
@apply inline-flex;
@apply text-current;
@apply no-underline;
@apply transition;
@apply ease-in-out;
@apply duration-200;
@apply outline-none;
&.link {
@apply text-acColor;
}
}
header,
footer {
& > div {
@apply flex;
@apply py-2;
@apply px-2;
@apply w-full;
@apply items-center;
@apply justify-between;
}
}
.wrapper {
@apply min-h-screen;
@apply flex;
@apply flex-col;
@apply flex-no-wrap;
}
.wrapper .page {
min-height: calc(100vh - 153px);
}
.header,
.content,
.columns,
.footer {
@apply flex;
@apply flex-1;
}
.nav-first,
.sticky-inner {
@apply flex;
@apply order-1;
@apply flex-col;
@apply sticky;
@apply top-0;
@apply items-start;
@apply items-stretch;
@apply h-full;
}
.main {
@apply flex;
@apply flex-col;
@apply flex-1;
@apply order-2;
@apply relative;
@apply px-4;
}
h1,
h2,
h3,
h4 {
@apply flex;
@apply items-center;
@apply m-0;
@apply font-bold;
}
h3.title {
@apply m-2;
}
p {
@apply text-sm;
@apply transition;
@apply ease-in-out;
@apply duration-200;
}
hr {
@apply border-b;
@apply border-dashed;
@apply border-brdColor;
@apply my-4;
}
.tooltip {
$bgcolor: var(--tt-color);
$fgcolor: var(--fg-color);
@apply z-50;
@apply transition;
@apply ease-in-out;
@apply duration-200;
.tooltip-inner {
@apply rounded-lg;
@apply px-4;
@apply py-2;
@apply text-xs;
@apply font-medium;
@apply shadow-lg;
background: $bgcolor;
color: $fgcolor;
}
.tooltip-arrow {
@apply h-0;
@apply w-0;
@apply border-solid;
@apply absolute;
@apply m-2;
@apply border-ttColor;
@apply z-30;
}
&[x-placement^="top"] {
@apply mb-0;
.tooltip-arrow {
border-width: 5px 5px 0 5px;
border-left-color: transparent !important;
border-right-color: transparent !important;
border-bottom-color: transparent !important;
bottom: -5px;
left: calc(50% - 5px);
@apply mt-0;
@apply mb-0;
}
}
&[x-placement^="bottom"] {
@apply mt-0;
.tooltip-arrow {
border-width: 0 5px 5px 5px;
border-left-color: transparent !important;
border-right-color: transparent !important;
border-top-color: transparent !important;
top: -5px;
left: calc(50% - 5px);
@apply mt-0;
@apply mb-0;
}
}
&[x-placement^="right"] {
@apply ml-0;
.tooltip-arrow {
border-width: 5px 5px 5px 0;
border-left-color: transparent !important;
border-top-color: transparent !important;
border-bottom-color: transparent !important;
left: -5px;
top: calc(50% - 5px);
@apply ml-0;
@apply mr-0;
}
}
&[x-placement^="left"] {
@apply mr-0;
.tooltip-arrow {
border-width: 5px 0 5px 5px;
border-top-color: transparent !important;
border-right-color: transparent !important;
border-bottom-color: transparent !important;
right: -5px;
top: calc(50% - 5px);
@apply ml-0;
@apply mr-0;
}
}
&.popover {
.wrapper {
min-height: auto;
}
.popover-inner {
background: $bgcolor;
color: $fgcolor;
max-height: 256px;
@apply text-base;
@apply p-2;
@apply rounded-lg;
@apply overflow-auto;
@apply shadow-lg;
button {
@apply flex-1;
@apply m-0;
}
div {
@apply flex;
@apply items-stretch;
@apply flex-col;
}
button {
@apply justify-start;
}
}
.popover-arrow {
border-color: $bgcolor;
}
}
&[aria-hidden="true"] {
@apply invisible;
@apply opacity-0;
@apply transition-opacity;
@apply ease-in-out;
@apply duration-200;
}
&[aria-hidden="false"] {
@apply visible;
@apply opacity-100;
@apply transition-opacity;
@apply ease-in-out;
@apply duration-200;
}
}
.info:not(.toasted) {
@apply m-2;
@apply text-fgLightColor;
.material-icons {
@apply align-middle;
@apply ml-2;
@apply mr-4;
}
}
button {
@apply inline-flex;
@apply items-center;
@apply justify-center;
@apply m-2;
@apply py-2;
@apply px-4;
@apply rounded-lg;
@apply bg-acColor;
@apply text-actColor;
@apply font-body;
@apply font-bold;
@apply transition;
@apply ease-in-out;
@apply duration-200;
@apply fill-current;
@apply cursor-pointer;
@apply outline-none;
@apply border-none;
span {
@apply inline-flex;
@apply ml-4;
@apply text-left;
}
&:not([disabled]):hover,
&:not([disabled]):active,
&:not([disabled]):focus {
@apply text-actColor;
@apply fill-current;
box-shadow: inset 0 0 0 2px var(--fg-color);
}
&.icon {
@apply bg-transparent;
@apply text-fgLightColor;
@apply fill-current;
@apply rounded-lg;
@apply outline-none;
@apply border-none;
@apply p-2;
&:not([disabled]):hover,
&:not([disabled]):active,
&:not([disabled]):focus {
@apply text-fgColor;
@apply fill-current;
@apply shadow-none;
}
}
&.primary {
@apply text-acColor;
&:not([disabled]):hover,
&:not([disabled]):active,
&:not([disabled]):focus {
@apply bg-acColor;
@apply text-actColor;
}
}
}
@keyframes beat {
30% {
@apply transform;
@apply scale-90;
}
50% {
@apply transform;
@apply scale-110;
}
100% {
@apply transform;
@apply scale-100;
}
}
.material-icons {
@apply font-icon;
@apply font-normal;
@apply not-italic;
@apply h-6;
@apply w-6;
@apply text-2xl;
@apply leading-6;
@apply inline-block;
@apply normal-case;
@apply tracking-normal;
@apply whitespace-no-wrap;
@apply antialiased;
word-wrap: normal;
direction: ltr;
text-rendering: optimizeLegibility;
font-feature-settings: "liga";
&:active {
animation: beat 0.5s forwards 1;
}
}
fieldset:target,
section:target {
animation: highlight 2s ease;
}
@keyframes highlight {
50% {
box-shadow: 0 0 0 2px var(--ac-color);
}
}
input[type="file"],
input[type="radio"],
#installPWA {
@apply hidden;
}
.show-on-large-screen {
@apply flex;
@apply flex-1;
}
.method,
.url-field,
kbd,
select,
input,
textarea,
pre,
code {
@apply flex;
@apply m-2;
@apply p-2;
@apply rounded-lg;
@apply bg-bgDarkColor;
@apply text-fgColor;
@apply font-mono;
@apply font-normal;
@apply transition;
@apply ease-in-out;
@apply duration-200;
@apply select-text;
@apply resize-y;
@apply truncate;
@apply outline-none;
width: calc(100% - 16px);
&:not([readonly]):not(.ace_editor):hover,
&:not([readonly]):not(.ace_editor):active,
&:not([readonly]):not(.ace_editor):focus {
box-shadow: inset 0 0 0 2px var(--fg-light-color);
}
}
.method {
@apply cursor-pointer;
&:hover,
&:active,
&:focus {
box-shadow: inset 0 0 0 2px var(--fg-light-color);
}
}
pre {
@apply grid;
}
pre.ace_editor {
@apply font-mono;
@apply font-normal;
@apply z-0;
}
kbd,
code,
pre {
@apply w-auto;
}
.select-wrapper {
@apply relative;
input {
@apply uppercase;
min-width: 128px;
}
.trigger {
@apply w-full;
}
&:after {
@apply inline-block;
@apply absolute;
@apply pointer-events-none;
content: "\e313";
@apply font-icon;
top: 16px;
right: 16px;
}
}
select {
height: 40px;
@apply cursor-pointer;
@apply appearance-none;
&::-ms-expand {
@apply hidden;
}
}
option {
@apply bg-bgColor;
}
input[type="checkbox"] {
@apply hidden;
&,
& + label {
@apply align-middle;
@apply cursor-pointer;
&:before {
content: "\2714";
@apply border;
@apply border-fgColor;
@apply rounded-lg;
@apply inline-flex;
@apply items-center;
@apply justify-center;
@apply text-transparent;
@apply transition;
@apply ease-in-out;
@apply duration-200;
height: 16px;
width: 16px;
margin: 8px 8px 8px 0;
}
}
&:checked + label:before {
@apply bg-acColor;
@apply border-acColor;
@apply text-actColor;
}
}
.error:not(input),
.disabled:not(input),
[disabled] {
@apply bg-errColor;
@apply text-fgLightColor;
@apply fill-current;
@apply cursor-not-allowed;
&.icon {
@apply text-errColor;
@apply fill-current;
}
}
label {
@apply px-2;
@apply text-fgLightColor;
@apply text-sm;
@apply transition;
@apply ease-in-out;
@apply duration-200;
}
ul,
ol {
@apply flex;
@apply p-0;
@apply list-none;
margin: 4px 0 4px;
ul,
ol {
@apply m-0;
}
}
ul li,
ol li {
@apply inline-flex;
@apply flex-col;
@apply flex-no-wrap;
@apply flex-1;
@apply justify-center;
&.shrink {
@apply flex-grow-0;
}
}
.row-wrapper {
@apply flex;
@apply items-center;
@apply justify-between;
@apply flex-1;
@apply flex-row;
* {
@apply inline-flex;
@apply flex-no-wrap;
@apply items-center;
@apply justify-center;
}
}
.info-response {
color: #ffeb3b;
}
.success-response {
color: #4bb543;
}
.redir-response {
color: #ff5722;
}
.cl-error-response {
color: #a63232;
}
.sv-error-response {
color: #b71c1c;
}
.missing-data-response {
@apply bg-errColor;
}
#response-details-wrapper {
@apply relative;
@apply overflow-hidden;
@apply rounded-lg;
textarea {
@apply m-0;
@apply w-full;
line-height: 1;
}
.covers-response {
@apply absolute;
@apply inset-0;
@apply bg-white;
@apply h-full;
@apply w-full;
}
}
#send {
@apply whitespace-no-wrap;
@apply outline-none;
@apply border-none;
&.show {
@apply flex;
@apply fixed;
@apply transition;
@apply ease-in-out;
@apply duration-200;
@apply shadow-lg;
bottom: 86px;
left: 50%;
z-index: 10001;
transform: translateX(-50%);
}
}
section {
@apply flex;
@apply rounded-lg;
}
.toasted-container .toasted {
justify-content: space-between !important;
}
.toasted.info {
background-color: var(--ac-color) !important;
color: var(--act-color) !important;
font-weight: 700 !important;
}
.toasted.bubble .action {
color: inherit !important;
}
.toasted .action {
margin-left: auto !important;
}
.page-columns {
@apply flex;
@apply flex-1;
@apply flex-col;
}
.inner-left {
@apply flex;
@apply order-1;
}
.inner-right {
@apply flex;
@apply order-2;
@apply ml-4;
width: 33%;
}
@media (max-width: $responsiveWidth) {
.content,
.columns {
@apply flex-col;
}
.main {
padding: 0 8px 68px;
}
ul,
ol {
@apply flex-col;
@apply flex-no-wrap;
}
ul li,
ol li {
@apply flex;
}
.hide-on-small-screen {
@apply hidden;
}
.sticky-inner {
@apply relative;
@apply w-full;
}
.inner-left {
order: 0;
}
.inner-right {
@apply ml-0;
}
.toasted-container {
margin-bottom: 68px;
}
}
.toasted-ad {
background-color: #fefefe;
color: #121212;
padding: 16px !important;
@apply font-bold;
@apply text-sm;
@apply rounded-lg;
@apply shadow-lg;
.action {
text-transform: none !important;
background-color: #121212;
color: #fefefe;
padding: 12px 16px !important;
font-weight: 500 !important;
font-size: 16px !important;
margin: 0 !important;
margin-left: 8px !important;
@apply rounded-lg;
}
}
.virtual-list {
@apply overflow-auto;
}
.github-sponsor {
@apply mr-4;
max-width: 64px;
max-height: 64px;
@apply rounded-full;
}

7
assets/css/themes.scss → assets/scss/themes.scss
View File

@@ -1,3 +1,9 @@
@mixin baseTheme {
--font-body: 'Poppins', 'sans-serif';
--font-mono: 'Roboto Mono', 'monoscpace';
--font-icon: 'Material Icons';
}
/** /**
Main Themes: Main Themes:
- dark (default) - dark (default)
@@ -83,6 +89,7 @@
} }
:root { :root {
@include baseTheme;
@include darkTheme; @include darkTheme;
} }

4
components/collections/add-collection.vue
View File

@@ -3,7 +3,7 @@
<div slot="header"> <div slot="header">
<ul> <ul>
<li> <li>
<div class="flex-wrap"> <div class="row-wrapper">
<h3 class="title">{{ $t("new_collection") }}</h3> <h3 class="title">{{ $t("new_collection") }}</h3>
<div> <div>
<button class="icon" @click="hideModal"> <button class="icon" @click="hideModal">
@@ -27,7 +27,7 @@
</ul> </ul>
</div> </div>
<div slot="footer"> <div slot="footer">
<div class="flex-wrap"> <div class="row-wrapper">
<span></span> <span></span>
<span> <span>
<button class="icon" @click="hideModal"> <button class="icon" @click="hideModal">

4
components/collections/add-folder.vue
View File

@@ -3,7 +3,7 @@
<div slot="header"> <div slot="header">
<ul> <ul>
<li> <li>
<div class="flex-wrap"> <div class="row-wrapper">
<h3 class="title">{{ $t("new_folder") }}</h3> <h3 class="title">{{ $t("new_folder") }}</h3>
<div> <div>
<button class="icon" @click="hideModal"> <button class="icon" @click="hideModal">
@@ -27,7 +27,7 @@
</ul> </ul>
</div> </div>
<div slot="footer"> <div slot="footer">
<div class="flex-wrap"> <div class="row-wrapper">
<span></span> <span></span>
<span> <span>
<button class="icon" @click="hideModal"> <button class="icon" @click="hideModal">

36
components/collections/collection.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<div class="flex-wrap"> <div class="row-wrapper">
<button class="icon" @click="toggleShowChildren"> <button class="icon" @click="toggleShowChildren">
<i class="material-icons" v-show="!showChildren">arrow_right</i> <i class="material-icons" v-show="!showChildren">arrow_right</i>
<i class="material-icons" v-show="showChildren">arrow_drop_down</i> <i class="material-icons" v-show="showChildren">arrow_drop_down</i>
@@ -45,8 +45,12 @@
</div> </div>
<div v-show="showChildren"> <div v-show="showChildren">
<ul> <ul class="flex-col">
<li v-for="(folder, index) in collection.folders" :key="folder.name"> <li
v-for="(folder, index) in collection.folders"
:key="folder.name"
class="ml-8 border-l border-brdColor"
>
<folder <folder
:folder="folder" :folder="folder"
:folderIndex="index" :folderIndex="index"
@@ -56,12 +60,19 @@
@edit-request="$emit('edit-request', $event)" @edit-request="$emit('edit-request', $event)"
/> />
</li> </li>
<li v-if="collection.folders.length === 0 && collection.requests.length === 0"> <li
v-if="collection.folders.length === 0 && collection.requests.length === 0"
class="ml-8 border-l border-brdColor"
>
<label>{{ $t("collection_empty") }}</label> <label>{{ $t("collection_empty") }}</label>
</li> </li>
</ul> </ul>
<ul> <ul class="flex-col">
<li v-for="(request, index) in collection.requests" :key="index"> <li
v-for="(request, index) in collection.requests"
:key="index"
class="ml-8 border-l border-brdColor"
>
<request <request
:request="request" :request="request"
:collection-index="collectionIndex" :collection-index="collectionIndex"
@@ -83,19 +94,6 @@
</div> </div>
</template> </template>
<style scoped lang="scss">
ul {
display: flex;
flex-direction: column;
}
ul li {
display: flex;
margin-left: 32px;
border-left: 1px solid var(--brd-color);
}
</style>
<script> <script>
import { fb } from "~/helpers/fb" import { fb } from "~/helpers/fb"
import folderIcon from "~/static/icons/folder-24px.svg?inline" import folderIcon from "~/static/icons/folder-24px.svg?inline"

4
components/collections/edit-collection.vue
View File

@@ -3,7 +3,7 @@
<div slot="header"> <div slot="header">
<ul> <ul>
<li> <li>
<div class="flex-wrap"> <div class="row-wrapper">
<h3 class="title">{{ $t("edit_collection") }}</h3> <h3 class="title">{{ $t("edit_collection") }}</h3>
<div> <div>
<button class="icon" @click="hideModal"> <button class="icon" @click="hideModal">
@@ -27,7 +27,7 @@
</ul> </ul>
</div> </div>
<div slot="footer"> <div slot="footer">
<div class="flex-wrap"> <div class="row-wrapper">
<span></span> <span></span>
<span> <span>
<button class="icon" @click="hideModal"> <button class="icon" @click="hideModal">

4
components/collections/edit-folder.vue
View File

@@ -3,7 +3,7 @@
<div slot="header"> <div slot="header">
<ul> <ul>
<li> <li>
<div class="flex-wrap"> <div class="row-wrapper">
<h3 class="title">{{ $t("edit_folder") }}</h3> <h3 class="title">{{ $t("edit_folder") }}</h3>
<div> <div>
<button class="icon" @click="hideModal"> <button class="icon" @click="hideModal">
@@ -22,7 +22,7 @@
</ul> </ul>
</div> </div>
<div slot="footer"> <div slot="footer">
<div class="flex-wrap"> <div class="row-wrapper">
<span></span> <span></span>
<span> <span>
<button class="icon" @click="hideModal"> <button class="icon" @click="hideModal">

10
components/collections/edit-request.vue
View File

@@ -3,7 +3,7 @@
<div slot="header"> <div slot="header">
<ul> <ul>
<li> <li>
<div class="flex-wrap"> <div class="row-wrapper">
<h3 class="title">{{ $t("edit_request") }}</h3> <h3 class="title">{{ $t("edit_request") }}</h3>
<div> <div>
<button class="icon" @click="hideModal"> <button class="icon" @click="hideModal">
@@ -28,9 +28,9 @@
<label for="selectCollection">{{ $t("collection") }}</label> <label for="selectCollection">{{ $t("collection") }}</label>
<span class="select-wrapper"> <span class="select-wrapper">
<select type="text" id="selectCollection" v-model="requestUpdateData.collectionIndex"> <select type="text" id="selectCollection" v-model="requestUpdateData.collectionIndex">
<option :key="undefined" :value="undefined" hidden disabled selected>{{ <option :key="undefined" :value="undefined" hidden disabled selected>
$t("current_collection") {{ $t("current_collection") }}
}}</option> </option>
<option <option
v-for="(collection, index) in $store.state.postwoman.collections" v-for="(collection, index) in $store.state.postwoman.collections"
:key="index" :key="index"
@@ -53,7 +53,7 @@
</ul> </ul>
</div> </div>
<div slot="footer"> <div slot="footer">
<div class="flex-wrap"> <div class="row-wrapper">
<span></span> <span></span>
<span> <span>
<button class="icon" @click="hideModal"> <button class="icon" @click="hideModal">

25
components/collections/folder.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<div class="flex-wrap"> <div class="row-wrapper">
<div> <div>
<button class="icon" @click="toggleShowChildren"> <button class="icon" @click="toggleShowChildren">
<i class="material-icons" v-show="!showChildren">arrow_right</i> <i class="material-icons" v-show="!showChildren">arrow_right</i>
@@ -31,8 +31,12 @@
</div> </div>
<div v-show="showChildren"> <div v-show="showChildren">
<ul> <ul class="flex-col">
<li v-for="(request, index) in folder.requests" :key="index"> <li
v-for="(request, index) in folder.requests"
:key="index"
class="flex ml-8 border-l border-brdColor"
>
<request <request
:request="request" :request="request"
:collection-index="collectionIndex" :collection-index="collectionIndex"
@@ -49,7 +53,7 @@
" "
/> />
</li> </li>
<li v-if="folder.requests.length === 0"> <li v-if="folder.requests.length === 0" class="flex ml-8 border-l border-brdColor">
<label>{{ $t("folder_empty") }}</label> <label>{{ $t("folder_empty") }}</label>
</li> </li>
</ul> </ul>
@@ -57,19 +61,6 @@
</div> </div>
</template> </template>
<style scoped lang="scss">
ul {
display: flex;
flex-direction: column;
}
ul li {
display: flex;
margin-left: 32px;
border-left: 1px solid var(--brd-color);
}
</style>
<script> <script>
import { fb } from "~/helpers/fb" import { fb } from "~/helpers/fb"
import deleteIcon from "~/static/icons/delete-24px.svg?inline" import deleteIcon from "~/static/icons/delete-24px.svg?inline"

16
components/collections/import-export-collections.vue
View File

@@ -3,7 +3,7 @@
<div slot="header"> <div slot="header">
<ul> <ul>
<li> <li>
<div class="flex-wrap"> <div class="row-wrapper">
<h3 class="title">{{ $t("import_export") }} {{ $t("collections") }}</h3> <h3 class="title">{{ $t("import_export") }} {{ $t("collections") }}</h3>
<div> <div>
<button class="icon" @click="hideModal"> <button class="icon" @click="hideModal">
@@ -11,7 +11,7 @@
</button> </button>
</div> </div>
</div> </div>
<div class="flex-wrap"> <div class="row-wrapper">
<span <span
v-tooltip="{ v-tooltip="{
content: !fb.currentUser ? $t('login_first') : $t('replace_current'), content: !fb.currentUser ? $t('login_first') : $t('replace_current'),
@@ -60,7 +60,7 @@
<textarea v-model="collectionJson" rows="8"></textarea> <textarea v-model="collectionJson" rows="8"></textarea>
</div> </div>
<div slot="footer"> <div slot="footer">
<div class="flex-wrap"> <div class="row-wrapper">
<span></span> <span></span>
<span> <span>
<button class="icon" @click="hideModal"> <button class="icon" @click="hideModal">
@@ -140,7 +140,7 @@ export default {
} }
} else if (collections.info && collections.info.schema.includes("v2.1.0")) { } else if (collections.info && collections.info.schema.includes("v2.1.0")) {
//replace the variables, postman uses {{var}}, Hoppscotch uses <<var>> //replace the variables, postman uses {{var}}, Hoppscotch uses <<var>>
collections = JSON.parse(content.replaceAll(/{{([a-z]+)}}/gi, '<<$1>>')) collections = JSON.parse(content.replaceAll(/{{([a-z]+)}}/gi, "<<$1>>"))
collections.item = this.flattenPostmanFolders(collections) collections.item = this.flattenPostmanFolders(collections)
collections = this.parsePostmanCollection(collections) collections = this.parsePostmanCollection(collections)
} else { } else {
@@ -317,15 +317,15 @@ export default {
} }
items.push(collectionItem) items.push(collectionItem)
} }
return items; return items
}, },
hasFolder(item) { hasFolder(item) {
return item.hasOwnProperty('item') return item.hasOwnProperty("item")
}, },
isSubFolder(item) { isSubFolder(item) {
return item.hasOwnProperty('_postman_isSubFolder') && item._postman_isSubFolder return item.hasOwnProperty("_postman_isSubFolder") && item._postman_isSubFolder
}, },
flattenPostmanItem(subFolder, subFolderGlue = ' -- ') { flattenPostmanItem(subFolder, subFolderGlue = " -- ") {
delete subFolder._postman_isSubFolder delete subFolder._postman_isSubFolder
let flattenedItems = [] let flattenedItems = []
for (let subFolderItem of subFolder.item) { for (let subFolderItem of subFolder.item) {

9
components/collections/index.vue
View File

@@ -39,7 +39,7 @@ TODO:
@hide-modal="displayModalImportExport(false)" @hide-modal="displayModalImportExport(false)"
/> />
<div class="flex-wrap"> <div class="row-wrapper">
<div> <div>
<button class="icon" @click="displayModalAdd(true)"> <button class="icon" @click="displayModalAdd(true)">
<i class="material-icons">add</i> <i class="material-icons">add</i>
@@ -65,7 +65,7 @@ TODO:
<i class="material-icons">help_outline</i> {{ $t("create_new_collection") }} <i class="material-icons">help_outline</i> {{ $t("create_new_collection") }}
</p> </p>
<div class="virtual-list"> <div class="virtual-list">
<ul> <ul class="flex-col">
<li v-for="(collection, index) in collections" :key="collection.name"> <li v-for="(collection, index) in collections" :key="collection.name">
<collection <collection
:collection-index="index" :collection-index="index"
@@ -87,11 +87,6 @@ TODO:
.virtual-list { .virtual-list {
max-height: calc(100vh - 245px); max-height: calc(100vh - 245px);
} }
ul {
display: flex;
flex-direction: column;
}
</style> </style>
<script> <script>

15
components/collections/request.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="flex-wrap"> <div class="row-wrapper">
<div> <div>
<button <button
class="icon" class="icon"
@@ -32,19 +32,6 @@
</div> </div>
</template> </template>
<style scoped lang="scss">
ul {
display: flex;
flex-direction: column;
}
ul li {
display: flex;
padding-left: 16px;
border-left: 1px solid var(--brd-color);
}
</style>
<script> <script>
import { fb } from "~/helpers/fb" import { fb } from "~/helpers/fb"
import deleteIcon from "~/static/icons/delete-24px.svg?inline" import deleteIcon from "~/static/icons/delete-24px.svg?inline"

10
components/collections/save-request-as.vue
View File

@@ -3,7 +3,7 @@
<div slot="header"> <div slot="header">
<ul> <ul>
<li> <li>
<div class="flex-wrap"> <div class="row-wrapper">
<h3 class="title">{{ $t("save_request_as") }}</h3> <h3 class="title">{{ $t("save_request_as") }}</h3>
<div> <div>
<button class="icon" @click="hideModal"> <button class="icon" @click="hideModal">
@@ -28,9 +28,9 @@
<label for="selectCollection">{{ $t("collection") }}</label> <label for="selectCollection">{{ $t("collection") }}</label>
<span class="select-wrapper"> <span class="select-wrapper">
<select type="text" id="selectCollection" v-model="requestData.collectionIndex"> <select type="text" id="selectCollection" v-model="requestData.collectionIndex">
<option :key="undefined" :value="undefined" hidden disabled selected>{{ <option :key="undefined" :value="undefined" hidden disabled selected>
$t("select_collection") {{ $t("select_collection") }}
}}</option> </option>
<option <option
v-for="(collection, index) in $store.state.postwoman.collections" v-for="(collection, index) in $store.state.postwoman.collections"
:key="index" :key="index"
@@ -62,7 +62,7 @@
</ul> </ul>
</div> </div>
<div slot="footer"> <div slot="footer">
<div class="flex-wrap"> <div class="row-wrapper">
<span></span> <span></span>
<span> <span>
<button class="icon" @click="hideModal"> <button class="icon" @click="hideModal">

4
components/environments/add-environment.vue
View File

@@ -3,7 +3,7 @@
<div slot="header"> <div slot="header">
<ul> <ul>
<li> <li>
<div class="flex-wrap"> <div class="row-wrapper">
<h3 class="title">{{ $t("new_environment") }}</h3> <h3 class="title">{{ $t("new_environment") }}</h3>
<div> <div>
<button class="icon" @click="hideModal"> <button class="icon" @click="hideModal">
@@ -27,7 +27,7 @@
</ul> </ul>
</div> </div>
<div slot="footer"> <div slot="footer">
<div class="flex-wrap"> <div class="row-wrapper">
<span></span> <span></span>
<span> <span>
<button class="icon" @click="hideModal"> <button class="icon" @click="hideModal">

6
components/environments/edit-environment.vue
View File

@@ -3,7 +3,7 @@
<div slot="header"> <div slot="header">
<ul> <ul>
<li> <li>
<div class="flex-wrap"> <div class="row-wrapper">
<h3 class="title">{{ $t("edit_environment") }}</h3> <h3 class="title">{{ $t("edit_environment") }}</h3>
<div> <div>
<button class="icon" @click="hideModal"> <button class="icon" @click="hideModal">
@@ -27,7 +27,7 @@
</ul> </ul>
<ul> <ul>
<li> <li>
<div class="flex-wrap"> <div class="row-wrapper">
<label for="variableList">{{ $t("env_variable_list") }}</label> <label for="variableList">{{ $t("env_variable_list") }}</label>
<div> <div>
<button class="icon" @click="clearContent($event)" v-tooltip.bottom="$t('clear')"> <button class="icon" @click="clearContent($event)" v-tooltip.bottom="$t('clear')">
@@ -90,7 +90,7 @@
</ul> </ul>
</div> </div>
<div slot="footer"> <div slot="footer">
<div class="flex-wrap"> <div class="row-wrapper">
<span></span> <span></span>
<span> <span>
<button class="icon" @click="hideModal"> <button class="icon" @click="hideModal">

15
components/environments/environment.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="flex-wrap"> <div class="row-wrapper">
<div> <div>
<button <button
class="icon" class="icon"
@@ -32,19 +32,6 @@
</div> </div>
</template> </template>
<style scoped lang="scss">
ul {
display: flex;
flex-direction: column;
}
ul li {
display: flex;
padding-left: 16px;
border-left: 1px solid var(--brd-color);
}
</style>
<script> <script>
import { fb } from "~/helpers/fb" import { fb } from "~/helpers/fb"
import deleteIcon from "~/static/icons/delete-24px.svg?inline" import deleteIcon from "~/static/icons/delete-24px.svg?inline"

6
components/environments/import-export-environment.vue
View File

@@ -3,7 +3,7 @@
<div slot="header"> <div slot="header">
<ul> <ul>
<li> <li>
<div class="flex-wrap"> <div class="row-wrapper">
<h3 class="title">{{ $t("import_export") }} {{ $t("environments") }}</h3> <h3 class="title">{{ $t("import_export") }} {{ $t("environments") }}</h3>
<div> <div>
<button class="icon" @click="hideModal"> <button class="icon" @click="hideModal">
@@ -11,7 +11,7 @@
</button> </button>
</div> </div>
</div> </div>
<div class="flex-wrap"> <div class="row-wrapper">
<span <span
v-tooltip="{ v-tooltip="{
content: !fb.currentUser ? $t('login_first') : $t('replace_current'), content: !fb.currentUser ? $t('login_first') : $t('replace_current'),
@@ -60,7 +60,7 @@
<textarea v-model="environmentJson" rows="8"></textarea> <textarea v-model="environmentJson" rows="8"></textarea>
</div> </div>
<div slot="footer"> <div slot="footer">
<div class="flex-wrap"> <div class="row-wrapper">
<span></span> <span></span>
<span> <span>
<button class="icon" @click="hideModal"> <button class="icon" @click="hideModal">

9
components/environments/index.vue
View File

@@ -11,7 +11,7 @@
:show="showModalImportExport" :show="showModalImportExport"
@hide-modal="displayModalImportExport(false)" @hide-modal="displayModalImportExport(false)"
/> />
<div class="flex-wrap"> <div class="row-wrapper">
<div> <div>
<button class="icon" @click="displayModalAdd(true)"> <button class="icon" @click="displayModalAdd(true)">
<i class="material-icons">add</i> <i class="material-icons">add</i>
@@ -28,7 +28,7 @@
<i class="material-icons">help_outline</i> {{ $t("create_new_environment") }} <i class="material-icons">help_outline</i> {{ $t("create_new_environment") }}
</p> </p>
<div class="virtual-list"> <div class="virtual-list">
<ul> <ul class="flex-col">
<li v-for="(environment, index) in environments" :key="environment.name"> <li v-for="(environment, index) in environments" :key="environment.name">
<environment <environment
:environmentIndex="index" :environmentIndex="index"
@@ -46,11 +46,6 @@
.virtual-list { .virtual-list {
max-height: calc(100vh - 245px); max-height: calc(100vh - 245px);
} }
ul {
display: flex;
flex-direction: column;
}
</style> </style>
<script> <script>

20
components/firebase/feeds.vue
View File

@@ -1,6 +1,10 @@
<template> <template>
<div v-if="fb.currentFeeds.length !== 0" class="virtual-list"> <div v-if="fb.currentFeeds.length !== 0" class="virtual-list">
<ul v-for="feed in fb.currentFeeds" :key="feed.id" class="entry"> <ul
v-for="feed in fb.currentFeeds"
:key="feed.id"
class="flex-col py-2 border-b border-dashed border-brdColor"
>
<div class="show-on-large-screen"> <div class="show-on-large-screen">
<li class="info"> <li class="info">
<label> <label>
@@ -18,7 +22,7 @@
</div> </div>
</ul> </ul>
</div> </div>
<ul v-else> <ul v-else class="flex-col">
<li> <li>
<label class="info">{{ $t("empty") }}</label> <label class="info">{{ $t("empty") }}</label>
</li> </li>
@@ -30,21 +34,11 @@
max-height: calc(100vh - 298px); max-height: calc(100vh - 298px);
} }
ul,
ol {
flex-direction: column;
}
.entry {
border-bottom: 1px dashed var(--brd-color);
padding: 0 0 8px;
}
.clamb-3 { .clamb-3 {
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 3; -webkit-line-clamp: 3;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
overflow: hidden; @apply overflow-hidden;
} }
</style> </style>

9
components/firebase/inputform.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<ul> <ul class="flex-col">
<div class="show-on-large-screen"> <div class="show-on-large-screen">
<li> <li>
<input <input
@@ -38,13 +38,6 @@
</div> </div>
</template> </template>
<style scoped lang="scss">
ul,
ol {
flex-direction: column;
}
</style>
<script> <script>
import { fb } from "~/helpers/fb" import { fb } from "~/helpers/fb"
import addIcon from "~/static/icons/add-24px.svg?inline" import addIcon from "~/static/icons/add-24px.svg?inline"

38
components/graphql/field.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="field-box"> <div class="p-2 m-2 border-b border-dashed border-brdColor">
<div class="field-title"> <div class="field-title">
{{ fieldName }} {{ fieldName }}
<span v-if="fieldArgs.length > 0"> <span v-if="fieldArgs.length > 0">
@@ -7,48 +7,24 @@
<span v-for="(field, index) in fieldArgs" :key="index"> <span v-for="(field, index) in fieldArgs" :key="index">
{{ field.name }}: {{ field.name }}:
<typelink :gqlType="field.type" :jumpTypeCallback="jumpTypeCallback" /> <typelink :gqlType="field.type" :jumpTypeCallback="jumpTypeCallback" />
<span v-if="index !== fieldArgs.length - 1"> <span v-if="index !== fieldArgs.length - 1"> , </span>
,
</span>
</span> </span>
) </span ) </span
>: >:
<typelink :gqlType="gqlField.type" :jumpTypeCallback="jumpTypeCallback" /> <typelink :gqlType="gqlField.type" :jumpTypeCallback="jumpTypeCallback" />
</div> </div>
<div class="field-desc" v-if="gqlField.description"> <div class="mt-2 text-fgLightColor field-desc" v-if="gqlField.description">
{{ gqlField.description }} {{ gqlField.description }}
</div> </div>
<div
<div class="field-deprecated" v-if="gqlField.isDeprecated"> class="inline-block px-4 py-2 my-2 text-sm font-bold text-black bg-yellow-200 rounded-lg field-deprecated"
v-if="gqlField.isDeprecated"
>
{{ $t("deprecated") }} {{ $t("deprecated") }}
</div> </div>
</div> </div>
</template> </template>
<style scoped lang="scss">
.field-box {
padding: 16px;
margin: 4px;
border-bottom: 1px dashed var(--brd-color);
}
.field-deprecated {
background-color: yellow;
color: black;
display: inline-block;
padding: 4px 8px;
margin: 4px 0;
border-radius: 8px;
font-size: 14px;
font-weight: 700;
}
.field-desc {
color: var(--fg-light-color);
margin-top: 4px;
}
</style>
<script> <script>
export default { export default {
props: { props: {

10
components/graphql/queryeditor.vue
View File

@@ -1,19 +1,17 @@
<template> <template>
<div class="show-if-initialized" :class="{ initialized }"> <div class="opacity-0 show-if-initialized" :class="{ initialized }">
<pre ref="editor"></pre> <pre ref="editor"></pre>
</div> </div>
</template> </template>
<style lang="scss"> <style scoped lang="scss">
.show-if-initialized { .show-if-initialized {
opacity: 0;
&.initialized { &.initialized {
opacity: 1; @apply opacity-100;
} }
& > * { & > * {
transition: none; @apply transition-none;
} }
} }
</style> </style>

23
components/graphql/type.vue
View File

@@ -1,10 +1,9 @@
<template> <template>
<div class="type-box"> <div class="p-2 m-2">
<div class="type-title">{{ gqlType.name }}</div> <div class="font-bold type-title">{{ gqlType.name }}</div>
<div class="type-desc" v-if="gqlType.description"> <div class="mt-2 text-fgLightColor type-desc" v-if="gqlType.description">
{{ gqlType.description }} {{ gqlType.description }}
</div> </div>
<div v-if="gqlType.getFields"> <div v-if="gqlType.getFields">
<h5>{{ $t("fields") }}</h5> <h5>{{ $t("fields") }}</h5>
<div v-for="field in gqlType.getFields()" :key="field.name"> <div v-for="field in gqlType.getFields()" :key="field.name">
@@ -14,22 +13,6 @@
</div> </div>
</template> </template>
<style scoped lang="scss">
.type-box {
padding: 16px;
margin: 4px 0;
}
.type-desc {
color: var(--fg-light-color);
margin-top: 4px;
}
.type-title {
font-weight: 700;
}
</style>
<script> <script>
export default { export default {
props: { props: {

13
components/graphql/typelink.vue
View File

@@ -1,16 +1,9 @@
<template> <template>
<span class="typelink" @click="jumpToType">{{ typeString }}</span> <span class="font-mono font-normal cursor-pointer text-acColor" @click="jumpToType">
{{ typeString }}
</span>
</template> </template>
<style scoped lang="scss">
.typelink {
color: var(--ac-color);
font-family: "Roboto Mono", monospace;
font-weight: 400;
cursor: pointer;
}
</style>
<script> <script>
export default { export default {
props: { props: {

108
components/layout/contributors.vue
View File

@@ -6,7 +6,7 @@
<p class="info"> <p class="info">
{{ $t("donate_info2") }} {{ $t("donate_info2") }}
</p> </p>
<div class="flex-wrap"> <div class="row-wrapper">
<span> <span>
<a <a
href="https://github.com/sponsors/hoppscotch" href="https://github.com/sponsors/hoppscotch"
@@ -33,7 +33,7 @@
</a> </a>
</span> </span>
</div> </div>
<div class="flex-wrap"> <div class="row-wrapper">
<span> <span>
<a <a
href="https://opencollective.com/hoppscotch" href="https://opencollective.com/hoppscotch"
@@ -78,13 +78,25 @@
<h3 class="title">Financial Contributors</h3> <h3 class="title">Financial Contributors</h3>
<p class="info"> <p class="info">
Become a financial contributor and help us sustain our community. Become a financial contributor and help us sustain our community.
<a class="link" href="https://opencollective.com/hoppscotch/contribute">Contribute</a>. <a
class="link"
target="_blank"
rel="noopener"
href="https://opencollective.com/hoppscotch/contribute"
>Contribute</a
>.
</p> </p>
<h3 class="title">Organizations</h3> <h3 class="title">Organizations</h3>
<p class="info"> <p class="info">
Support this project with your organization. Your logo will show up here with a link to your Support this project with your organization. Your logo will show up here with a link to your
website. website.
<a class="link" href="https://opencollective.com/hoppscotch/contribute">Contribute</a>. <a
class="link"
target="_blank"
rel="noopener"
href="https://opencollective.com/hoppscotch/contribute"
>Contribute</a
>.
</p> </p>
<div class="contributors"> <div class="contributors">
<a href="https://tyk.io" target="_blank" rel="noopener"> <a href="https://tyk.io" target="_blank" rel="noopener">
@@ -96,34 +108,74 @@
</a> </a>
</div> </div>
<div class="contributors"> <div class="contributors">
<a href="https://opencollective.com/hoppscotch/organization/0/website"> <a
target="_blank"
rel="noopener"
href="https://opencollective.com/hoppscotch/organization/0/website"
>
<img src="https://opencollective.com/hoppscotch/organization/0/avatar.svg" /> <img src="https://opencollective.com/hoppscotch/organization/0/avatar.svg" />
</a> </a>
<a href="https://opencollective.com/hoppscotch/organization/1/website"> <a
target="_blank"
rel="noopener"
href="https://opencollective.com/hoppscotch/organization/1/website"
>
<img src="https://opencollective.com/hoppscotch/organization/1/avatar.svg" /> <img src="https://opencollective.com/hoppscotch/organization/1/avatar.svg" />
</a> </a>
<a href="https://opencollective.com/hoppscotch/organization/2/website"> <a
target="_blank"
rel="noopener"
href="https://opencollective.com/hoppscotch/organization/2/website"
>
<img src="https://opencollective.com/hoppscotch/organization/2/avatar.svg" /> <img src="https://opencollective.com/hoppscotch/organization/2/avatar.svg" />
</a> </a>
<a href="https://opencollective.com/hoppscotch/organization/3/website"> <a
target="_blank"
rel="noopener"
href="https://opencollective.com/hoppscotch/organization/3/website"
>
<img src="https://opencollective.com/hoppscotch/organization/3/avatar.svg" /> <img src="https://opencollective.com/hoppscotch/organization/3/avatar.svg" />
</a> </a>
<a href="https://opencollective.com/hoppscotch/organization/4/website"> <a
target="_blank"
rel="noopener"
href="https://opencollective.com/hoppscotch/organization/4/website"
>
<img src="https://opencollective.com/hoppscotch/organization/4/avatar.svg" /> <img src="https://opencollective.com/hoppscotch/organization/4/avatar.svg" />
</a> </a>
<a href="https://opencollective.com/hoppscotch/organization/5/website"> <a
target="_blank"
rel="noopener"
href="https://opencollective.com/hoppscotch/organization/5/website"
>
<img src="https://opencollective.com/hoppscotch/organization/5/avatar.svg" /> <img src="https://opencollective.com/hoppscotch/organization/5/avatar.svg" />
</a> </a>
<a href="https://opencollective.com/hoppscotch/organization/6/website"> <a
target="_blank"
rel="noopener"
href="https://opencollective.com/hoppscotch/organization/6/website"
>
<img src="https://opencollective.com/hoppscotch/organization/6/avatar.svg" /> <img src="https://opencollective.com/hoppscotch/organization/6/avatar.svg" />
</a> </a>
<a href="https://opencollective.com/hoppscotch/organization/7/website"> <a
target="_blank"
rel="noopener"
href="https://opencollective.com/hoppscotch/organization/7/website"
>
<img src="https://opencollective.com/hoppscotch/organization/7/avatar.svg" /> <img src="https://opencollective.com/hoppscotch/organization/7/avatar.svg" />
</a> </a>
<a href="https://opencollective.com/hoppscotch/organization/8/website"> <a
target="_blank"
rel="noopener"
href="https://opencollective.com/hoppscotch/organization/8/website"
>
<img src="https://opencollective.com/hoppscotch/organization/8/avatar.svg" /> <img src="https://opencollective.com/hoppscotch/organization/8/avatar.svg" />
</a> </a>
<a href="https://opencollective.com/hoppscotch/organization/9/website"> <a
target="_blank"
rel="noopener"
href="https://opencollective.com/hoppscotch/organization/9/website"
>
<img src="https://opencollective.com/hoppscotch/organization/9/avatar.svg" /> <img src="https://opencollective.com/hoppscotch/organization/9/avatar.svg" />
</a> </a>
</div> </div>
@@ -131,7 +183,13 @@
<p class="info"> <p class="info">
Support this project with your organization. Your logo will show up here with a link to your Support this project with your organization. Your logo will show up here with a link to your
website. website.
<a class="link" href="https://opencollective.com/hoppscotch/contribute">Contribute</a>. <a
class="link"
target="_blank"
rel="noopener"
href="https://opencollective.com/hoppscotch/contribute"
>Contribute</a
>.
</p> </p>
<div class="contributors"> <div class="contributors">
<a <a
@@ -147,14 +205,18 @@
:alt="sponsor.handle" :alt="sponsor.handle"
/> />
</a> </a>
<a href="https://opencollective.com/hoppscotch"> <a target="_blank" rel="noopener" href="https://opencollective.com/hoppscotch">
<img src="https://opencollective.com/hoppscotch/individuals.svg" /> <img src="https://opencollective.com/hoppscotch/individuals.svg" />
</a> </a>
</div> </div>
<h3 class="title">Code Contributors</h3> <h3 class="title">Code Contributors</h3>
<p class="info">This project exists thanks to all the people who contribute.</p> <p class="info">This project exists thanks to all the people who contribute.</p>
<div class="contributors"> <div class="contributors">
<a href="https://github.com/liyasthomas/hoppscotch/graphs/contributors"> <a
target="_blank"
rel="noopener"
href="https://github.com/liyasthomas/hoppscotch/graphs/contributors"
>
<img src="https://opencollective.com/hoppscotch/contributors.svg" /> <img src="https://opencollective.com/hoppscotch/contributors.svg" />
</a> </a>
</div> </div>
@@ -163,12 +225,12 @@
<style scoped lang="scss"> <style scoped lang="scss">
.contributors { .contributors {
display: flex; @apply flex;
align-items: center; @apply items-center;
flex-flow: row nowrap; @apply flex-no-wrap;
overflow: auto; @apply overflow-auto;
padding: 8px 0; @apply py-4;
margin: 8px 0; @apply my-4;
max-width: calc(100vw - 72px); max-width: calc(100vw - 72px);
} }
</style> </style>

71
components/layout/history.vue
View File

@@ -7,7 +7,11 @@
</button> --> </button> -->
</div> </div>
<div class="virtual-list" :class="{ filled: filteredHistory.length }"> <div class="virtual-list" :class="{ filled: filteredHistory.length }">
<ul v-for="(entry, index) in filteredHistory" :key="index" class="entry"> <ul
v-for="(entry, index) in filteredHistory"
:key="index"
class="flex-col border-b border-dashed border-brdColor"
>
<div class="show-on-large-screen"> <div class="show-on-large-screen">
<button <button
class="icon" class="icon"
@@ -30,7 +34,7 @@
{{ entry.star ? "star" : "star_border" }} {{ entry.star ? "star" : "star_border" }}
</i> </i>
</button> </button>
<li class="method-list-item"> <li class="relative">
<input <input
:aria-label="$t('method')" :aria-label="$t('method')"
type="text" type="text"
@@ -38,14 +42,8 @@
:value="`${entry.method} ${entry.status}`" :value="`${entry.method} ${entry.status}`"
:class="findEntryStatus(entry).className" :class="findEntryStatus(entry).className"
:style="{ '--status-code': entry.status }" :style="{ '--status-code': entry.status }"
class="bg-color" class="bg-transparent"
/> />
<!-- <span
class="entry-status-code"
:class="findEntryStatus(entry).className"
:style="{ '--status-code': entry.status }"
>{{ entry.status }}</span
> -->
</li> </li>
<v-popover> <v-popover>
<button class="tooltip-target icon" v-tooltip="$t('options')"> <button class="tooltip-target icon" v-tooltip="$t('options')">
@@ -66,14 +64,14 @@
</div> </div>
</template> </template>
</v-popover> </v-popover>
<!-- <li class="method-list-item"> <!-- <li class="relative">
<input <input
:aria-label="$t('label')" :aria-label="$t('label')"
type="text" type="text"
readonly readonly
:value="entry.label" :value="entry.label"
:placeholder="$t('no_label')" :placeholder="$t('no_label')"
class="bg-color" class="bg-transparent"
/> />
</li> --> </li> -->
<!-- <li> <!-- <li>
@@ -101,7 +99,7 @@
readonly readonly
:value="`${entry.url}${entry.path}`" :value="`${entry.url}${entry.path}`"
:placeholder="$t('no_url')" :placeholder="$t('no_url')"
class="bg-color" class="bg-transparent"
/> />
</li> </li>
<!-- <li> <!-- <li>
@@ -147,7 +145,7 @@
</transition> </transition>
</ul> </ul>
</div> </div>
<ul :class="{ hidden: filteredHistory.length != 0 || history.length === 0 }"> <ul class="flex-col" :class="{ hidden: filteredHistory.length != 0 || history.length === 0 }">
<li> <li>
<label>{{ $t("nothing_found") }} "{{ filterText }}"</label> <label>{{ $t("nothing_found") }} "{{ filterText }}"</label>
</li> </li>
@@ -156,7 +154,7 @@
<i class="material-icons">schedule</i> {{ $t("history_empty") }} <i class="material-icons">schedule</i> {{ $t("history_empty") }}
</p> </p>
<div v-if="history.length !== 0"> <div v-if="history.length !== 0">
<div class="flex-wrap" v-if="!isClearingHistory"> <div class="row-wrapper" v-if="!isClearingHistory">
<button <button
class="icon" class="icon"
id="clear-history-button" id="clear-history-button"
@@ -218,7 +216,7 @@
</template> </template>
</v-popover> </v-popover>
</div> </div>
<div class="flex-wrap" v-else> <div class="row-wrapper" v-else>
<label for="clear-history-button" class="info"> <label for="clear-history-button" class="info">
<i class="material-icons">help_outline</i> {{ $t("are_you_sure") }} <i class="material-icons">help_outline</i> {{ $t("are_you_sure") }}
</label> </label>
@@ -250,47 +248,24 @@
max-height: calc(100vh - 290px); max-height: calc(100vh - 290px);
[readonly] { [readonly] {
cursor: default; @apply cursor-default;
} }
} }
.fade-enter-active, .fade-enter-active,
.fade-leave-active { .fade-leave-active {
transition: all 0.2s; @apply transition;
@apply ease-in-out;
@apply duration-200;
} }
.fade-enter, .fade-enter,
.fade-leave-to { .fade-leave-to {
opacity: 0; @apply opacity-0;
} }
.stared { .stared {
color: #f8e81c !important; @apply text-yellow-200;
}
ul,
ol {
flex-direction: column;
}
.method-list-item {
position: relative;
span {
position: absolute;
top: 10px;
right: 10px;
font-family: "Roboto Mono", monospace;
font-weight: 400;
background-color: transparent;
padding: 2px 6px;
border-radius: 8px;
}
}
.entry {
border-bottom: 1px dashed var(--brd-color);
padding: 0 0 8px;
} }
@media (max-width: 720px) { @media (max-width: 720px) {
@@ -299,7 +274,7 @@ ol {
} }
.labels { .labels {
display: none; @apply hidden;
} }
} }
</style> </style>
@@ -341,14 +316,16 @@ export default {
fb.currentUser !== null fb.currentUser !== null
? fb.currentHistory ? fb.currentHistory
: JSON.parse(window.localStorage.getItem("history")) || [] : JSON.parse(window.localStorage.getItem("history")) || []
return this.history.filter((entry) => { return this.history
.filter((entry) => {
const filterText = this.filterText.toLowerCase() const filterText = this.filterText.toLowerCase()
return Object.keys(entry).some((key) => { return Object.keys(entry).some((key) => {
let value = entry[key] let value = entry[key]
value = typeof value !== "string" ? value.toString() : value value = typeof value !== "string" ? value.toString() : value
return value.toLowerCase().includes(filterText) return value.toLowerCase().includes(filterText)
}) })
}).reverse() })
.reverse()
}, },
}, },
methods: { methods: {

21
components/layout/pw-footer.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<footer class="footer"> <footer class="flex-col flex-no-wrap">
<div class="flex-wrap"> <div class="row-wrapper">
<span v-if="version.name" class="mono"> <span v-if="version.name" class="font-mono">
<a <a
class="footer-link" class="footer-link"
:href="'https://github.com/hoppscotch/hoppscotch/releases/tag/' + version.name" :href="'https://github.com/hoppscotch/hoppscotch/releases/tag/' + version.name"
@@ -31,9 +31,7 @@
</span> </span>
<span> <span>
<a href="https://liyasthomas.web.app" target="_blank" rel="noopener"> <a href="https://liyasthomas.web.app" target="_blank" rel="noopener">
<button class="icon" v-tooltip="'Liyas Thomas'"> <button class="icon" v-tooltip="'Liyas Thomas'">🦄</button>
🦄
</button>
</a> </a>
<a href="mailto:liyascthomas@gmail.com" target="_blank" rel="noopener"> <a href="mailto:liyascthomas@gmail.com" target="_blank" rel="noopener">
<button class="icon" v-tooltip="$t('contact_us')"> <button class="icon" v-tooltip="$t('contact_us')">
@@ -60,16 +58,13 @@
</template> </template>
<style scoped lang="scss"> <style scoped lang="scss">
.footer {
flex-flow: column nowrap;
}
.footer-link { .footer-link {
margin: 8px 16px; @apply my-2;
color: var(--fg-light-color); @apply mx-4;
@apply text-fgLightColor;
&:hover { &:hover {
color: var(--fg-color); @apply text-fgColor;
} }
} }
</style> </style>

37
components/layout/pw-header.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<header class="header"> <header class="header">
<div class="flex-wrap"> <div class="row-wrapper">
<span class="slide-in"> <span class="slide-in">
<nuxt-link :to="localePath('index')"> <nuxt-link :to="localePath('index')">
<h1 class="logo hide-on-small-screen">Hoppscotch</h1> <h1 class="logo hide-on-small-screen">Hoppscotch</h1>
@@ -51,7 +51,7 @@
<img <img
v-if="fb.currentUser.photoURL" v-if="fb.currentUser.photoURL"
:src="fb.currentUser.photoURL" :src="fb.currentUser.photoURL"
class="material-icons" class="rounded-full material-icons"
alt="Profile image" alt="Profile image"
/> />
<i v-else class="material-icons">account_circle</i> <i v-else class="material-icons">account_circle</i>
@@ -119,7 +119,7 @@
<div slot="header"> <div slot="header">
<ul> <ul>
<li> <li>
<div class="flex-wrap"> <div class="row-wrapper">
<h3 class="title">{{ $t("extensions") }}</h3> <h3 class="title">{{ $t("extensions") }}</h3>
<div> <div>
<button class="icon" @click="showExtensions = false"> <button class="icon" @click="showExtensions = false">
@@ -179,7 +179,7 @@
<div slot="header"> <div slot="header">
<ul> <ul>
<li> <li>
<div class="flex-wrap"> <div class="row-wrapper">
<h3 class="title">{{ $t("shortcuts") }}</h3> <h3 class="title">{{ $t("shortcuts") }}</h3>
<div> <div>
<button class="icon" @click="showShortcuts = false"> <button class="icon" @click="showShortcuts = false">
@@ -214,11 +214,11 @@
</div> </div>
<hr /> <hr />
<div> <div>
<kbd>Alt</kbd>+<kbd>🠋</kbd> <kbd>Alt</kbd>+<kbd>▲</kbd>
<label>{{ $t("select_next_method") }}</label> <label>{{ $t("select_next_method") }}</label>
</div> </div>
<div> <div>
<kbd>Alt</kbd>+<kbd>🠉</kbd> <kbd>Alt</kbd>+<kbd>▼</kbd>
<label>{{ $t("select_previous_method") }}</label> <label>{{ $t("select_previous_method") }}</label>
</div> </div>
<hr /> <hr />
@@ -249,7 +249,7 @@
<div slot="header"> <div slot="header">
<ul> <ul>
<li> <li>
<div class="flex-wrap"> <div class="row-wrapper">
<h3 class="title">{{ $t("support_us") }}</h3> <h3 class="title">{{ $t("support_us") }}</h3>
<div> <div>
<button class="icon" @click="showSupport = false"> <button class="icon" @click="showSupport = false">
@@ -271,38 +271,43 @@
<style scoped lang="scss"> <style scoped lang="scss">
$responsiveWidth: 768px; $responsiveWidth: 768px;
kbd {
@apply inline-flex;
@apply resize-none;
}
@keyframes slideIn { @keyframes slideIn {
0% { 0% {
opacity: 0; @apply opacity-0;
left: -16px; @apply -left-4;
} }
100% { 100% {
opacity: 1; @apply opacity-100;
left: 0px; @apply left-0;
} }
} }
.slide-in { .slide-in {
position: relative; @apply relative;
animation: slideIn 0.2s forwards ease-in-out; animation: slideIn 0.2s forwards ease-in-out;
} }
.logo { .logo {
font-size: 22px; @apply text-xl;
&:hover { &:hover {
color: var(--ac-color); @apply text-acColor;
} }
} }
.show-on-small-screen { .show-on-small-screen {
display: none; @apply hidden;
} }
@media (max-width: $responsiveWidth) { @media (max-width: $responsiveWidth) {
.show-on-small-screen { .show-on-small-screen {
display: inline-flex; @apply inline-flex;
} }
} }
</style> </style>

34
components/layout/pw-section.vue
View File

@@ -14,26 +14,26 @@
<style scoped lang="scss"> <style scoped lang="scss">
fieldset { fieldset {
margin: 16px 0; @apply my-2;
border-radius: 8px; @apply p-2;
background-color: var(--bg-dark-color); @apply rounded-lg;
transition: all 0.2s ease-in-out; @apply bg-bgDarkColor;
@apply transition;
@apply ease-in-out;
@apply duration-200;
legend { legend {
display: inline-block; @apply text-fgColor;
align-items: center; @apply text-sm;
justify-content: center; @apply font-bold;
color: var(--fg-color); @apply cursor-pointer;
font-weight: 700; @apply transition;
cursor: pointer; @apply ease-in-out;
transition: all 0.2s ease-in-out; @apply duration-200;
* {
vertical-align: middle;
}
i { i {
margin-left: 8px; @apply ml-2;
@apply align-middle;
} }
} }
@@ -75,7 +75,7 @@ fieldset {
} }
fieldset.no-colored-frames legend { fieldset.no-colored-frames legend {
color: var(--fg-color); @apply text-fgColor;
} }
</style> </style>

156
components/layout/sidenav.vue
View File

@@ -11,7 +11,7 @@
v-tooltip.right="$t('home')" v-tooltip.right="$t('home')"
:aria-label="$t('home')" :aria-label="$t('home')"
> >
<logo alt class="material-icons" style="height: 24px;"></logo> <logo alt class="material-icons" style="height: 24px"></logo>
</nuxt-link> </nuxt-link>
<nuxt-link <nuxt-link
:to="localePath('realtime')" :to="localePath('realtime')"
@@ -171,93 +171,103 @@
$responsiveWidth: 768px; $responsiveWidth: 768px;
.nav-first { .nav-first {
z-index: 1; @apply z-10;
height: 100vh; @apply h-screen;
padding: 0 8px; @apply p-2;
background-color: var(--bg-dark-color); @apply bg-bgDarkColor;
transition: all 0.2s ease-in-out; @apply transition;
@apply ease-in-out;
@apply duration-200;
// @apply overflow-y-auto;
} }
nav.primary-nav { nav.primary-nav {
display: flex; @apply flex;
flex-flow: column nowrap; @apply flex-col;
align-items: center; @apply flex-no-wrap;
justify-content: center; @apply items-center;
@apply justify-center;
@apply space-y-2;
svg { svg {
fill: var(--fg-light-color); @apply fill-current;
transition: all 0.2s ease-in-out;
} }
a { a {
display: inline-flex; @apply inline-flex;
align-items: center; @apply items-center;
justify-content: center; @apply justify-center;
flex-shrink: 0; @apply flex-shrink-0;
padding: 14px; @apply p-4;
border-radius: 50%; @apply rounded-full;
background-color: var(--bg-light-color); @apply bg-bgLightColor;
color: var(--fg-light-color); @apply text-fgLightColor;
fill: var(--fg-light-color); @apply fill-current;
margin: 8px 0; @apply outline-none;
&:hover { &:hover {
color: var(--fg-color); @apply text-fgColor;
fill: var(--fg-color); @apply fill-current;
svg { svg {
fill: var(--fg-color); @apply fill-current;
} }
} }
&.nuxt-link-exact-active { &.nuxt-link-exact-active {
background-color: var(--ac-color); @apply bg-acColor;
color: var(--act-color); @apply text-actColor;
fill: var(--act-color); @apply fill-current;
border-radius: 16px; border-radius: 16px;
svg { svg {
fill: var(--act-color); @apply fill-current;
} }
} }
} }
} }
nav.primary-nav::-webkit-scrollbar,
.nav-first::-webkit-scrollbar {
@apply hidden;
}
nav.secondary-nav { nav.secondary-nav {
display: flex; @apply flex;
flex-flow: column nowrap; @apply flex-col;
align-items: center; @apply flex-no-wrap;
justify-content: center; @apply items-center;
border-top: 2px dashed var(--brd-color); @apply justify-center;
margin-top: 4px; @apply border-t-2;
@apply border-dashed;
@apply border-brdColor;
@apply mt-2;
ul { ul {
display: flex; @apply flex;
flex-flow: column nowrap; @apply flex-col;
@apply flex-no-wrap;
@apply space-y-2;
li { li {
display: flex; @apply flex;
a { a {
display: inline-flex; @apply p-4;
align-items: center; @apply rounded-full;
justify-content: center; @apply bg-bgDarkColor;
flex-shrink: 0; @apply text-fgLightColor;
padding: 14px; @apply fill-current;
border-radius: 50%; @apply outline-none;
background-color: var(--bg-dark-color);
color: var(--fg-light-color);
fill: var(--fg-light-color);
margin: 8px 0;
&:hover { &:hover {
color: var(--fg-color); @apply text-fgColor;
fill: var(--fg-color); @apply fill-current;
} }
&.current { &.current {
color: var(--ac-color); @apply text-acColor;
fill: var(--ac-color); @apply fill-current;
} }
} }
} }
@@ -266,41 +276,43 @@ nav.secondary-nav {
@media (max-width: $responsiveWidth) { @media (max-width: $responsiveWidth) {
.nav-first { .nav-first {
position: fixed; @apply fixed;
top: auto; @apply top-auto;
bottom: 0; @apply bottom-0;
height: auto; @apply h-auto;
padding: 0; @apply p-0;
width: 100%; @apply w-full;
background-color: var(--bg-color); @apply bg-bgColor;
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.45); @apply shadow-2xl;
} }
nav.primary-nav { nav.primary-nav {
flex-flow: row nowrap; @apply flex-row;
overflow: auto; @apply flex-no-wrap;
justify-content: space-between; @apply overflow-auto;
background-color: var(--bg-dark-color); @apply justify-between;
@apply bg-bgDarkColor;
@apply space-y-0;
a { a {
background-color: transparent; @apply bg-transparent;
margin: 8px; @apply m-2;
flex: 1; @apply flex-1;
&.nuxt-link-exact-active { &.nuxt-link-exact-active {
background-color: transparent; @apply bg-transparent;
color: var(--ac-color); @apply text-acColor;
fill: var(--ac-color); @apply fill-current;
svg { svg {
fill: var(--ac-color); @apply fill-current;
} }
} }
} }
} }
nav.secondary-nav { nav.secondary-nav {
display: none; @apply hidden;
} }
} }
</style> </style>

2
components/lenses/headers.vue
View File

@@ -2,7 +2,7 @@
<div> <div>
<ul v-for="(value, key) in headers" :key="key"> <ul v-for="(value, key) in headers" :key="key">
<li> <li>
<input :value="`${key} → ${value}`" :name="key" class="bg-color" readonly /> <input :value="`${key} → ${value}`" :name="key" class="bg-transparent" readonly />
</li> </li>
</ul> </ul>
</div> </div>

2
components/lenses/renderers/HTMLLensRenderer.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<ul> <ul>
<li> <li>
<div class="flex-wrap"> <div class="row-wrapper">
<label for="body">{{ $t("response") }}</label> <label for="body">{{ $t("response") }}</label>
<div> <div>
<button <button

10
components/lenses/renderers/ImageLensRenderer.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<ul> <ul>
<li> <li>
<div class="flex-wrap"> <div class="row-wrapper">
<label for="body">{{ $t("response") }}</label> <label for="body">{{ $t("response") }}</label>
<div> <div>
<button <button
@@ -16,18 +16,12 @@
</div> </div>
</div> </div>
<div id="response-details-wrapper"> <div id="response-details-wrapper">
<img class="response-image" :src="imageSource" /> <img class="max-w-full" :src="imageSource" />
</div> </div>
</li> </li>
</ul> </ul>
</template> </template>
<style scoped lang="scss">
.response-image {
max-width: 100%;
}
</style>
<script> <script>
export default { export default {
props: { props: {

2
components/lenses/renderers/JSONLensRenderer.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<ul> <ul>
<li> <li>
<div class="flex-wrap"> <div class="row-wrapper">
<label for="body">{{ $t("response") }}</label> <label for="body">{{ $t("response") }}</label>
<div> <div>
<button <button

2
components/lenses/renderers/RawLensRenderer.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<ul> <ul>
<li> <li>
<div class="flex-wrap"> <div class="row-wrapper">
<label for="body">{{ $t("response") }}</label> <label for="body">{{ $t("response") }}</label>
<div> <div>
<button <button

2
components/lenses/renderers/XMLLensRenderer.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<ul> <ul>
<li> <li>
<div class="flex-wrap"> <div class="row-wrapper">
<label for="body">{{ $t("response") }}</label> <label for="body">{{ $t("response") }}</label>
<div> <div>
<button <button

30
components/realtime/log.vue
View File

@@ -13,29 +13,27 @@
</template> </template>
<style scoped lang="scss"> <style scoped lang="scss">
div.realtime-log { .realtime-log {
margin: 4px; @apply m-2;
padding: 8px 16px; @apply p-2;
width: calc(100% - 8px); @apply rounded-lg;
border-radius: 8px; @apply bg-bgDarkColor;
background-color: var(--bg-dark-color); @apply text-fgColor;
color: var(--fg-color); @apply overflow-auto;
height: 256px; height: 256px;
overflow: auto;
&, &,
span { span {
font-size: 16px; @apply text-sm;
font-family: "Roboto Mono", monospace; @apply font-mono;
font-weight: 400; @apply font-normal;
user-select: text; @apply select-text;
} }
span { span {
display: block; @apply block;
white-space: pre-wrap; @apply break-words;
word-wrap: break-word; @apply break-all;
word-break: break-all;
} }
} }
</style> </style>

40
components/settings/swatch.vue
View File

@@ -12,36 +12,38 @@
<style scoped lang="scss"> <style scoped lang="scss">
.color { .color {
display: inline-flex; @apply inline-flex;
align-items: center; @apply items-center;
position: relative; @apply justify-center;
justify-content: center; @apply relative;
margin: 8px; @apply m-2;
padding: 16px; @apply p-4;
border-radius: 100%; @apply rounded-full;
border: 3px solid var(--bg-dark-color); @apply border-2;
cursor: pointer; @apply border-bgDarkColor;
transition: all 0.2s ease-in-out; @apply cursor-pointer;
@apply transition;
@apply ease-in-out;
@apply duration-200;
&.fg { &.fg {
color: var(--act-color); @apply text-actColor;
} }
&.active { &.active {
border: 3px solid var(--ac-color); @apply border-2;
@apply border-acColor;
} }
&.fg.active { &.fg.active {
border: 3px solid var(--fg-color); @apply border-2;
@apply border-fgColor;
} }
.activeTick { .activeTick {
position: absolute; @apply absolute;
margin: auto; @apply m-auto;
top: 0; @apply inset-0;
bottom: 0;
left: 0;
right: 0;
} }
} }
</style> </style>

6
components/ui/ace-editor.vue
View File

@@ -6,14 +6,14 @@
<style lang="scss"> <style lang="scss">
.show-if-initialized { .show-if-initialized {
opacity: 0; @apply opacity-0;
&.initialized { &.initialized {
opacity: 1; @apply opacity-100;
} }
& > * { & > * {
transition: none; @apply transition-none;
} }
} }
</style> </style>

43
components/ui/autocomplete.vue
View File

@@ -32,33 +32,34 @@
<style scoped lang="scss"> <style scoped lang="scss">
.autocomplete-wrapper { .autocomplete-wrapper {
position: relative; @apply relative;
input:focus + ul.suggestions, input:focus + ul.suggestions,
ul.suggestions:hover { ul.suggestions:hover {
display: block; @apply block;
} }
ul.suggestions { ul.suggestions {
display: none; @apply hidden;
background-color: var(--atc-color); @apply bg-atcColor;
position: absolute; @apply absolute;
top: calc(100% - 4px); @apply mx-2;
margin: 0 4px; @apply left-0;
left: 0; @apply z-50;
padding: 0; @apply transition-transform;
@apply ease-in-out;
@apply duration-200;
@apply shadow-lg;
top: calc(100% - 8px);
border-radius: 0 0 8px 8px; border-radius: 0 0 8px 8px;
z-index: 9999;
transition: transform 0.2s ease-out;
box-shadow: 0 5px 30px rgba(black, 0.1);
li { li {
width: 100%; @apply w-full;
display: block; @apply block;
padding: 8px 16px; @apply p-2;
font-size: 16px; @apply text-sm;
font-family: "Roboto Mono", monospace; @apply font-mono;
font-weight: 400; @apply font-normal;
&:last-child { &:last-child {
border-radius: 0 0 8px 8px; border-radius: 0 0 8px 8px;
@@ -66,9 +67,9 @@
&:hover, &:hover,
&.active { &.active {
background-color: var(--ac-color); @apply bg-acColor;
color: var(--act-color); @apply text-actColor;
cursor: pointer; @apply cursor-pointer;
} }
} }
} }

6
components/ui/js-editor.vue
View File

@@ -6,14 +6,14 @@
<style lang="scss"> <style lang="scss">
.show-if-initialized { .show-if-initialized {
opacity: 0; @apply opacity-0;
&.initialized { &.initialized {
opacity: 1; @apply opacity-100;
} }
& > * { & > * {
transition: none; @apply transition-none;
} }
} }
</style> </style>

70
components/ui/modal.vue
View File

@@ -21,43 +21,46 @@
</template> </template>
<style scoped lang="scss"> <style scoped lang="scss">
.modal-backdrop { .modal-backdrop {
position: fixed; @apply fixed;
z-index: 998; @apply inset-0;
top: 0; @apply z-50;
left: 0; @apply w-full;
width: 100%; @apply h-full;
height: 100%; @apply flex;
@apply items-center;
@apply justify-center;
@apply transition;
@apply ease-in-out;
@apply duration-200;
background-color: rgba(0, 0, 0, 0.32); background-color: rgba(0, 0, 0, 0.32);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
} }
.modal-wrapper { .modal-wrapper {
display: flex; @apply flex;
align-items: center; @apply items-center;
justify-content: center; @apply justify-center;
flex-grow: 1; @apply flex-1;
} }
.modal-container { .modal-container {
position: relative; @apply relative;
display: flex; @apply flex;
flex-grow: 1; @apply flex-1;
flex-direction: column; @apply flex-col;
margin: 16px; @apply m-2;
padding: 16px; @apply p-2;
transition: all 0.2s ease; @apply transition;
background-color: var(--bg-color); @apply ease-in-out;
border-radius: 8px; @apply duration-200;
box-shadow: 0px 16px 70px rgba(0, 0, 0, 0.5); @apply bg-bgColor;
@apply rounded-lg;
@apply shadow-2xl;
max-height: calc(100vh - 128px); max-height: calc(100vh - 128px);
max-width: 720px; max-width: 720px;
} }
.modal-body { .modal-body {
overflow: auto; @apply overflow-auto;
} }
/* /*
@@ -71,22 +74,27 @@
.modal-enter, .modal-enter,
.modal-leave-active { .modal-leave-active {
opacity: 0; @apply opacity-0;
} }
.modal-enter .modal-container, .modal-enter .modal-container,
.modal-leave-active .modal-container { .modal-leave-active .modal-container {
transform: scale(0.8); @apply transform;
transition: all 0.2s ease-in-out; @apply scale-75;
@apply transition;
@apply ease-in-out;
@apply duration-200;
} }
.fade { .fade {
position: absolute; @apply absolute;
@apply block;
left: 16px; left: 16px;
right: 20px; right: 20px;
display: block;
height: 32px; height: 32px;
transition: all 0.2s; @apply transition;
@apply ease-in-out;
@apply duration-200;
&.top { &.top {
top: 68px; top: 68px;

43
components/ui/pw-toggle.vue
View File

@@ -14,57 +14,50 @@ $useBorder: false;
$borderColor: var(--fg-light-color); $borderColor: var(--fg-light-color);
$activeColor: var(--ac-color); $activeColor: var(--ac-color);
$inactiveColor: var(--fg-light-color); $inactiveColor: var(--fg-light-color);
$inactiveHandleColor: var(--bg-color); $inactiveHandleColor: var(--bg-color);
$activeHandleColor: var(--act-color); $activeHandleColor: var(--act-color);
$width: 32px; $width: 32px;
$height: 16px; $height: 16px;
$handleSpacing: 4px; $handleSpacing: 4px;
$transition: all 0.2s ease-in-out; $transition: all 0.2s ease-in-out;
div { div {
display: inline-block; @apply inline-block;
cursor: pointer; @apply cursor-pointer;
} }
label.caption { label.caption {
vertical-align: middle; @apply align-middle;
cursor: pointer; @apply cursor-pointer;
} }
label.toggle { label.toggle {
position: relative; @apply relative;
display: inline-block; @apply inline-block;
@apply align-middle;
@apply rounded-full;
@apply p-0;
@apply my-4;
@apply mx-2;
@apply cursor-pointer;
width: $width; width: $width;
height: $height; height: $height;
border: if($useBorder, 2px solid $borderColor, none); border: if($useBorder, 2px solid $borderColor, none);
background-color: if($useBorder, transparent, $inactiveColor); background-color: if($useBorder, transparent, $inactiveColor);
vertical-align: middle;
border-radius: 32px;
transition: $transition; transition: $transition;
box-sizing: initial; box-sizing: initial;
padding: 0;
margin: 8px 4px;
cursor: pointer;
.handle { .handle {
position: absolute; @apply absolute;
display: inline-block; @apply inline-block;
top: 0; @apply inset-0;
bottom: 0; @apply rounded-full;
left: 0; @apply pointer-events-none;
transition: $transition;
margin: $handleSpacing; margin: $handleSpacing;
background-color: $inactiveHandleColor; background-color: $inactiveHandleColor;
width: #{$height - ($handleSpacing * 2)}; width: #{$height - ($handleSpacing * 2)};
height: #{$height - ($handleSpacing * 2)}; height: #{$height - ($handleSpacing * 2)};
border-radius: 100px;
pointer-events: none;
transition: $transition;
} }
&.on { &.on {

2
components/ui/tab.vue
View File

@@ -4,8 +4,6 @@
</div> </div>
</template> </template>
<style scoped lang="scss"></style>
<script> <script>
export default { export default {
props: { props: {

54
components/ui/tabs.vue
View File

@@ -26,50 +26,55 @@
<style scoped lang="scss"> <style scoped lang="scss">
.tabs-wrapper { .tabs-wrapper {
display: flex; @apply flex;
flex-flow: column nowrap; @apply flex-col;
flex-grow: 1; @apply flex-no-wrap;
overflow: hidden; @apply flex-1;
@apply overflow-hidden;
.tabs { .tabs {
-webkit-overflow-scrolling: touch; @apply scrolling-touch;
display: flex; @apply flex;
white-space: nowrap; @apply whitespace-no-wrap;
overflow: auto; @apply overflow-auto;
ul { ul {
display: flex; @apply flex;
width: 0px; @apply w-0;
} }
li { li {
display: inline-flex; @apply inline-flex;
@apply outline-none;
@apply border-none;
a { a {
display: flex; @apply flex;
align-items: center; @apply items-center;
justify-content: center; @apply justify-center;
padding: 8px 16px; @apply py-2;
color: var(--fg-light-color); @apply px-4;
border-radius: 8px; @apply text-fgLightColor;
cursor: pointer; @apply text-sm;
@apply rounded-lg;
@apply cursor-pointer;
.material-icons { .material-icons {
margin-right: 8px; @apply m-4;
} }
&:hover { &:hover {
color: var(--fg-color); @apply text-fgColor;
} }
} }
&:focus a { &:focus a {
color: var(--fg-color); @apply text-fgColor;
} }
&.is-active a { &.is-active a {
background-color: var(--brd-color); @apply bg-brdColor;
color: var(--fg-color); @apply text-fgColor;
} }
} }
} }
@@ -78,7 +83,8 @@
@media (max-width: 768px) { @media (max-width: 768px) {
ul, ul,
ol { ol {
flex-flow: row nowrap; @apply flex-row;
@apply flex-no-wrap;
} }
} }
</style> </style>

8
components/ui/url-field.vue
View File

@@ -3,16 +3,16 @@
</template> </template>
<style lang="scss"> <style lang="scss">
.highlight-VAR { .highlight-VAR {
@apply font-bold;
color: var(--ac-color); color: var(--ac-color);
font-weight: bold;
} }
.highlight-TEXT { .highlight-TEXT {
overflow: auto; @apply overflow-auto;
@apply break-all;
height: 20px; height: 20px;
word-break: break-all;
} }
.highlight-TEXT::-webkit-scrollbar { .highlight-TEXT::-webkit-scrollbar {
display: none; @apply hidden;
} }
</style> </style>
<script> <script>

10
layouts/error.vue
View File

@@ -17,11 +17,11 @@
<style scoped lang="scss"> <style scoped lang="scss">
// Center the error page in the viewport. // Center the error page in the viewport.
.page-error { .page-error {
display: flex; @apply flex;
align-items: center; @apply items-center;
justify-content: center; @apply justify-center;
flex-direction: column; @apply flex-col;
text-align: center; @apply text-center;
} }
.error_banner { .error_banner {

15
nuxt.config.js
View File

@@ -5,8 +5,8 @@ export const options = {
shortDescription: "A free, fast and beautiful API request builder", shortDescription: "A free, fast and beautiful API request builder",
description: "Helps you create requests faster, saving precious time on development.", description: "Helps you create requests faster, saving precious time on development.",
loading: { loading: {
color: "#50fa7b", color: "var(--ac-color)",
background: "#202124", background: "var(--bg-color)",
}, },
app: { app: {
color: "#ffffff", color: "#ffffff",
@@ -18,7 +18,7 @@ export const options = {
}, },
} }
export default { export default {
mode: "spa", ssr: false,
target: "static", target: "static",
server: { server: {
host: "0.0.0.0", // default: localhost host: "0.0.0.0", // default: localhost
@@ -88,7 +88,7 @@ export default {
** Customize the progress-bar color ** Customize the progress-bar color
*/ */
loading: { loading: {
color: "var(--ac-color)", color: options.loading.color,
continuous: true, continuous: true,
}, },
/* /*
@@ -102,7 +102,7 @@ export default {
/* /*
** Global CSS ** Global CSS
*/ */
css: ["~/assets/css/styles.scss", "~/assets/css/themes.scss", "~/assets/css/fonts.scss"], css: ["~/assets/scss/styles.scss", "~/assets/scss/themes.scss", "~/assets/scss/fonts.scss"],
/* /*
** Plugins to load before mounting the App ** Plugins to load before mounting the App
*/ */
@@ -124,6 +124,10 @@ export default {
"@nuxtjs/gtm", "@nuxtjs/gtm",
// Doc: https://github.com/nuxt-community/svg-module // Doc: https://github.com/nuxt-community/svg-module
"@nuxtjs/svg", "@nuxtjs/svg",
// Doc: https://tailwindcss.nuxtjs.org
"@nuxtjs/tailwindcss",
// Doc: https://color-mode.nuxtjs.org
"@nuxtjs/color-mode",
], ],
/* /*
** Nuxt.js modules ** Nuxt.js modules
@@ -179,6 +183,7 @@ export default {
Allow: "/", Allow: "/",
Sitemap: `${process.env.BASE_URL}sitemap.xml`, Sitemap: `${process.env.BASE_URL}sitemap.xml`,
}, },
colorMode: { preference: "dark" },
i18n: { i18n: {
locales: [ locales: [
{ {

526
package-lock.json generated
View File

@@ -1484,6 +1484,96 @@
"resolved": "https://registry.npmjs.org/@firebase/webchannel-wrapper/-/webchannel-wrapper-0.3.0.tgz", "resolved": "https://registry.npmjs.org/@firebase/webchannel-wrapper/-/webchannel-wrapper-0.3.0.tgz",
"integrity": "sha512-VniCGPIgSGNEgOkh5phb3iKmSGIzcwrccy3IomMFRWPCMiCk2y98UQNJEoDs1yIHtZMstVjYWKYxnunIGzC5UQ==" "integrity": "sha512-VniCGPIgSGNEgOkh5phb3iKmSGIzcwrccy3IomMFRWPCMiCk2y98UQNJEoDs1yIHtZMstVjYWKYxnunIGzC5UQ=="
}, },
"@fullhuman/postcss-purgecss": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/@fullhuman/postcss-purgecss/-/postcss-purgecss-2.3.0.tgz",
"integrity": "sha512-qnKm5dIOyPGJ70kPZ5jiz0I9foVOic0j+cOzNDoo8KoCf6HjicIZ99UfO2OmE7vCYSKAAepEwJtNzpiiZAh9xw==",
"dev": true,
"requires": {
"postcss": "7.0.32",
"purgecss": "^2.3.0"
},
"dependencies": {
"ansi-styles": {
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
"integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
"dev": true,
"requires": {
"color-convert": "^1.9.0"
}
},
"chalk": {
"version": "2.4.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
"integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
"dev": true,
"requires": {
"ansi-styles": "^3.2.1",
"escape-string-regexp": "^1.0.5",
"supports-color": "^5.3.0"
},
"dependencies": {
"supports-color": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
"dev": true,
"requires": {
"has-flag": "^3.0.0"
}
}
}
},
"color-convert": {
"version": "1.9.3",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
"integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
"dev": true,
"requires": {
"color-name": "1.1.3"
}
},
"color-name": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
"dev": true
},
"has-flag": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
"integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
"dev": true
},
"postcss": {
"version": "7.0.32",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
"integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
"dev": true,
"requires": {
"chalk": "^2.4.2",
"source-map": "^0.6.1",
"supports-color": "^6.1.0"
}
},
"source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
"dev": true
},
"supports-color": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
"integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
"dev": true,
"requires": {
"has-flag": "^3.0.0"
}
}
}
},
"@grpc/grpc-js": { "@grpc/grpc-js": {
"version": "1.1.7", "version": "1.1.7",
"resolved": "https://registry.npmjs.org/@grpc/grpc-js/-/grpc-js-1.1.7.tgz", "resolved": "https://registry.npmjs.org/@grpc/grpc-js/-/grpc-js-1.1.7.tgz",
@@ -2440,6 +2530,24 @@
"defu": "^3.1.0" "defu": "^3.1.0"
} }
}, },
"@nuxtjs/color-mode": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/@nuxtjs/color-mode/-/color-mode-1.1.1.tgz",
"integrity": "sha512-Q091KLVMX4ZhVnwgNE2eKdjkaMZRdfVsKISI4kOsWBxJgj/PdPAQpGcSjLIOTB+l1XuLGLmh7hUtLOIM8FE0gA==",
"dev": true,
"requires": {
"defu": "^2.0.4",
"lodash.template": "^4.5.0"
},
"dependencies": {
"defu": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/defu/-/defu-2.0.4.tgz",
"integrity": "sha512-G9pEH1UUMxShy6syWk01VQSRVs3CDWtlxtZu7A+NyqjxaCA4gSlWAKDBx6QiUEKezqS8+DUlXLI14Fp05Hmpwg==",
"dev": true
}
}
},
"@nuxtjs/google-analytics": { "@nuxtjs/google-analytics": {
"version": "2.4.0", "version": "2.4.0",
"resolved": "https://registry.npmjs.org/@nuxtjs/google-analytics/-/google-analytics-2.4.0.tgz", "resolved": "https://registry.npmjs.org/@nuxtjs/google-analytics/-/google-analytics-2.4.0.tgz",
@@ -2595,6 +2703,49 @@
} }
} }
}, },
"@nuxtjs/tailwindcss": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/@nuxtjs/tailwindcss/-/tailwindcss-3.0.2.tgz",
"integrity": "sha512-jSudt1JaJQRE64r0Bx5PHVTYVIedlZtR00KtFYYUSpRLHD2BLkjHsvYOa/jtKcinSF3RWZy6dg+l0IMJqDoSLg==",
"dev": true,
"requires": {
"clear-module": "^4.1.1",
"consola": "^2.15.0",
"defu": "^3.1.0",
"fs-extra": "^9.0.1",
"tailwindcss": "^1.7.3"
},
"dependencies": {
"fs-extra": {
"version": "9.0.1",
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.0.1.tgz",
"integrity": "sha512-h2iAoN838FqAFJY2/qVpzFXy+EBxfVE220PalAqQLDVsFOHLJrZvut5puAbCdNv6WJk+B8ihI+k0c7JK5erwqQ==",
"dev": true,
"requires": {
"at-least-node": "^1.0.0",
"graceful-fs": "^4.2.0",
"jsonfile": "^6.0.1",
"universalify": "^1.0.0"
}
},
"jsonfile": {
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.0.1.tgz",
"integrity": "sha512-jR2b5v7d2vIOust+w3wtFKZIfpC2pnRmFAhAC/BuweZFQR8qZzxH1OyrQ10HmdVYiXWkYUqPVsz91cG7EL2FBg==",
"dev": true,
"requires": {
"graceful-fs": "^4.1.6",
"universalify": "^1.0.0"
}
},
"universalify": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/universalify/-/universalify-1.0.0.tgz",
"integrity": "sha512-rb6X1W158d7pRQBg5gkR8uPaSfiids68LTJQYOtEUhoJUWBdaQHsuT/EUduxXYxcrt4r5PJ4fuHW1MHT6p0qug==",
"dev": true
}
}
},
"@nuxtjs/toast": { "@nuxtjs/toast": {
"version": "3.3.1", "version": "3.3.1",
"resolved": "https://registry.npmjs.org/@nuxtjs/toast/-/toast-3.3.1.tgz", "resolved": "https://registry.npmjs.org/@nuxtjs/toast/-/toast-3.3.1.tgz",
@@ -3444,6 +3595,25 @@
"integrity": "sha512-HiUX/+K2YpkpJ+SzBffkM/AQ2YE03S0U1kjTLVpoJdhZMOWy8qvXVN9JdLqv2QsaQ6MPYQIuNmwD8zOiYUofLQ==", "integrity": "sha512-HiUX/+K2YpkpJ+SzBffkM/AQ2YE03S0U1kjTLVpoJdhZMOWy8qvXVN9JdLqv2QsaQ6MPYQIuNmwD8zOiYUofLQ==",
"dev": true "dev": true
}, },
"acorn-node": {
"version": "1.8.2",
"resolved": "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz",
"integrity": "sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==",
"dev": true,
"requires": {
"acorn": "^7.0.0",
"acorn-walk": "^7.0.0",
"xtend": "^4.0.2"
},
"dependencies": {
"acorn": {
"version": "7.4.0",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.0.tgz",
"integrity": "sha512-+G7P8jJmCHr+S+cLfQxygbWhXy+8YTVGzAkpEbcLo2mLoL7tij/VG41QSHACSf5QgYRhMZYHuNc6drJaO0Da+w==",
"dev": true
}
}
},
"acorn-walk": { "acorn-walk": {
"version": "7.2.0", "version": "7.2.0",
"resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz", "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
@@ -4679,6 +4849,12 @@
"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz", "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
"integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==" "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg=="
}, },
"camelcase-css": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
"integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
"dev": true
},
"camelcase-keys": { "camelcase-keys": {
"version": "2.1.0", "version": "2.1.0",
"resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz", "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz",
@@ -4836,6 +5012,39 @@
"resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz", "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
"integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==" "integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A=="
}, },
"clear-module": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/clear-module/-/clear-module-4.1.1.tgz",
"integrity": "sha512-ng0E7LeODcT3QkazOckzZqbca+JByQy/Q2Z6qO24YsTp+pLxCfohGz2gJYJqZS0CWTX3LEUiHOqe5KlYeUbEMw==",
"dev": true,
"requires": {
"parent-module": "^2.0.0",
"resolve-from": "^5.0.0"
},
"dependencies": {
"callsites": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
"integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
"dev": true
},
"parent-module": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/parent-module/-/parent-module-2.0.0.tgz",
"integrity": "sha512-uo0Z9JJeWzv8BG+tRcapBKNJ0dro9cLyczGzulS6EfeyAdeC9sbojtW6XwvYxJkEne9En+J2XEl4zyglVeIwFg==",
"dev": true,
"requires": {
"callsites": "^3.1.0"
}
},
"resolve-from": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
"integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
"dev": true
}
}
},
"cli-boxes": { "cli-boxes": {
"version": "2.2.1", "version": "2.2.1",
"resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-2.2.1.tgz", "resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-2.2.1.tgz",
@@ -5556,6 +5765,12 @@
} }
} }
}, },
"css-unit-converter": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/css-unit-converter/-/css-unit-converter-1.1.2.tgz",
"integrity": "sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA==",
"dev": true
},
"css-what": { "css-what": {
"version": "3.3.0", "version": "3.3.0",
"resolved": "https://registry.npmjs.org/css-what/-/css-what-3.3.0.tgz", "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.3.0.tgz",
@@ -5842,6 +6057,12 @@
} }
} }
}, },
"defined": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz",
"integrity": "sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM=",
"dev": true
},
"defu": { "defu": {
"version": "3.1.0", "version": "3.1.0",
"resolved": "https://registry.npmjs.org/defu/-/defu-3.1.0.tgz", "resolved": "https://registry.npmjs.org/defu/-/defu-3.1.0.tgz",
@@ -5894,6 +6115,17 @@
"integrity": "sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==", "integrity": "sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==",
"dev": true "dev": true
}, },
"detective": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/detective/-/detective-5.2.0.tgz",
"integrity": "sha512-6SsIx+nUUbuK0EthKjv0zrdnajCCXVYGmbYYiYjFVpzcjwEs/JMDZ8tPRG29J/HhN56t3GJp2cGSWDRjjot8Pg==",
"dev": true,
"requires": {
"acorn-node": "^1.6.1",
"defined": "^1.0.0",
"minimist": "^1.1.1"
}
},
"diff-sequences": { "diff-sequences": {
"version": "26.3.0", "version": "26.3.0",
"resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-26.3.0.tgz", "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-26.3.0.tgz",
@@ -9952,6 +10184,12 @@
"lodash._reinterpolate": "^3.0.0" "lodash._reinterpolate": "^3.0.0"
} }
}, },
"lodash.toarray": {
"version": "4.4.0",
"resolved": "https://registry.npmjs.org/lodash.toarray/-/lodash.toarray-4.4.0.tgz",
"integrity": "sha1-JMS/zWsvuji/0FlNsRedjptlZWE=",
"dev": true
},
"lodash.unionby": { "lodash.unionby": {
"version": "4.8.0", "version": "4.8.0",
"resolved": "https://registry.npmjs.org/lodash.unionby/-/lodash.unionby-4.8.0.tgz", "resolved": "https://registry.npmjs.org/lodash.unionby/-/lodash.unionby-4.8.0.tgz",
@@ -10515,6 +10753,15 @@
"lodash": "^4.17.15" "lodash": "^4.17.15"
} }
}, },
"node-emoji": {
"version": "1.10.0",
"resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.10.0.tgz",
"integrity": "sha512-Yt3384If5H6BYGVHiHwTL+99OzJKHhgp82S8/dktEK73T26BazdgZ4JZh92xSVtGNJvz9UbXdNAc5hcrXV42vw==",
"dev": true,
"requires": {
"lodash.toarray": "^4.4.0"
}
},
"node-fetch": { "node-fetch": {
"version": "2.6.1", "version": "2.6.1",
"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz", "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz",
@@ -10894,6 +11141,12 @@
"resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-3.3.0.tgz", "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-3.3.0.tgz",
"integrity": "sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==" "integrity": "sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg=="
}, },
"normalize.css": {
"version": "8.0.1",
"resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz",
"integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==",
"dev": true
},
"npm-run-path": { "npm-run-path": {
"version": "4.0.1", "version": "4.0.1",
"resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz", "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
@@ -11016,6 +11269,12 @@
} }
} }
}, },
"object-hash": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/object-hash/-/object-hash-2.0.3.tgz",
"integrity": "sha512-JPKn0GMu+Fa3zt3Bmr66JhokJU5BaNBIh4ZeTlaCBzrBsOeXzwcKKAK1tbLiPKgvwmPXsDvvLHoWh5Bm7ofIYg==",
"dev": true
},
"object-inspect": { "object-inspect": {
"version": "1.8.0", "version": "1.8.0",
"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.8.0.tgz", "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.8.0.tgz",
@@ -11896,6 +12155,93 @@
"postcss": "^7.0.2" "postcss": "^7.0.2"
} }
}, },
"postcss-functions": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/postcss-functions/-/postcss-functions-3.0.0.tgz",
"integrity": "sha1-DpTQFERwCkgd4g3k1V+yZAVkJQ4=",
"dev": true,
"requires": {
"glob": "^7.1.2",
"object-assign": "^4.1.1",
"postcss": "^6.0.9",
"postcss-value-parser": "^3.3.0"
},
"dependencies": {
"ansi-styles": {
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
"integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
"dev": true,
"requires": {
"color-convert": "^1.9.0"
}
},
"chalk": {
"version": "2.4.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
"integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
"dev": true,
"requires": {
"ansi-styles": "^3.2.1",
"escape-string-regexp": "^1.0.5",
"supports-color": "^5.3.0"
}
},
"color-convert": {
"version": "1.9.3",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
"integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
"dev": true,
"requires": {
"color-name": "1.1.3"
}
},
"color-name": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
"dev": true
},
"has-flag": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
"integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
"dev": true
},
"postcss": {
"version": "6.0.23",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
"integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
"dev": true,
"requires": {
"chalk": "^2.4.1",
"source-map": "^0.6.1",
"supports-color": "^5.4.0"
}
},
"postcss-value-parser": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
"integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
"dev": true
},
"source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
"dev": true
},
"supports-color": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
"dev": true,
"requires": {
"has-flag": "^3.0.0"
}
}
}
},
"postcss-gap-properties": { "postcss-gap-properties": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/postcss-gap-properties/-/postcss-gap-properties-2.0.0.tgz", "resolved": "https://registry.npmjs.org/postcss-gap-properties/-/postcss-gap-properties-2.0.0.tgz",
@@ -11948,6 +12294,16 @@
"postcss": "^7.0.2" "postcss": "^7.0.2"
} }
}, },
"postcss-js": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-2.0.3.tgz",
"integrity": "sha512-zS59pAk3deu6dVHyrGqmC3oDXBdNdajk4k1RyxeVXCrcEDBUBHoIhE4QTsmhxgzXxsaqFDAkUZfmMa5f/N/79w==",
"dev": true,
"requires": {
"camelcase-css": "^2.0.1",
"postcss": "^7.0.18"
}
},
"postcss-lab-function": { "postcss-lab-function": {
"version": "2.0.1", "version": "2.0.1",
"resolved": "https://registry.npmjs.org/postcss-lab-function/-/postcss-lab-function-2.0.1.tgz", "resolved": "https://registry.npmjs.org/postcss-lab-function/-/postcss-lab-function-2.0.1.tgz",
@@ -12163,6 +12519,16 @@
"postcss": "^7.0.6" "postcss": "^7.0.6"
} }
}, },
"postcss-nested": {
"version": "4.2.3",
"resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-4.2.3.tgz",
"integrity": "sha512-rOv0W1HquRCamWy2kFl3QazJMMe1ku6rCFoAAH+9AcxdbpDeBr6k968MLWuLjvjMcGEip01ak09hKOEgpK9hvw==",
"dev": true,
"requires": {
"postcss": "^7.0.32",
"postcss-selector-parser": "^6.0.2"
}
},
"postcss-nesting": { "postcss-nesting": {
"version": "7.0.1", "version": "7.0.1",
"resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-7.0.1.tgz", "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-7.0.1.tgz",
@@ -12615,6 +12981,12 @@
"react-is": "^16.12.0" "react-is": "^16.12.0"
} }
}, },
"pretty-hrtime": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
"integrity": "sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=",
"dev": true
},
"pretty-quick": { "pretty-quick": {
"version": "3.0.2", "version": "3.0.2",
"resolved": "https://registry.npmjs.org/pretty-quick/-/pretty-quick-3.0.2.tgz", "resolved": "https://registry.npmjs.org/pretty-quick/-/pretty-quick-3.0.2.tgz",
@@ -12827,6 +13199,104 @@
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
"integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==" "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A=="
}, },
"purgecss": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/purgecss/-/purgecss-2.3.0.tgz",
"integrity": "sha512-BE5CROfVGsx2XIhxGuZAT7rTH9lLeQx/6M0P7DTXQH4IUc3BBzs9JUzt4yzGf3JrH9enkeq6YJBe9CTtkm1WmQ==",
"dev": true,
"requires": {
"commander": "^5.0.0",
"glob": "^7.0.0",
"postcss": "7.0.32",
"postcss-selector-parser": "^6.0.2"
},
"dependencies": {
"ansi-styles": {
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
"integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
"dev": true,
"requires": {
"color-convert": "^1.9.0"
}
},
"chalk": {
"version": "2.4.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
"integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
"dev": true,
"requires": {
"ansi-styles": "^3.2.1",
"escape-string-regexp": "^1.0.5",
"supports-color": "^5.3.0"
},
"dependencies": {
"supports-color": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
"dev": true,
"requires": {
"has-flag": "^3.0.0"
}
}
}
},
"color-convert": {
"version": "1.9.3",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
"integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
"dev": true,
"requires": {
"color-name": "1.1.3"
}
},
"color-name": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
"dev": true
},
"commander": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz",
"integrity": "sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==",
"dev": true
},
"has-flag": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
"integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
"dev": true
},
"postcss": {
"version": "7.0.32",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
"integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
"dev": true,
"requires": {
"chalk": "^2.4.2",
"source-map": "^0.6.1",
"supports-color": "^6.1.0"
}
},
"source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
"dev": true
},
"supports-color": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
"integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
"dev": true,
"requires": {
"has-flag": "^3.0.0"
}
}
}
},
"q": { "q": {
"version": "1.5.1", "version": "1.5.1",
"resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz", "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
@@ -13050,6 +13520,24 @@
} }
} }
}, },
"reduce-css-calc": {
"version": "2.1.7",
"resolved": "https://registry.npmjs.org/reduce-css-calc/-/reduce-css-calc-2.1.7.tgz",
"integrity": "sha512-fDnlZ+AybAS3C7Q9xDq5y8A2z+lT63zLbynew/lur/IR24OQF5x98tfNwf79mzEdfywZ0a2wpM860FhFfMxZlA==",
"dev": true,
"requires": {
"css-unit-converter": "^1.1.1",
"postcss-value-parser": "^3.3.0"
},
"dependencies": {
"postcss-value-parser": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
"integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
"dev": true
}
}
},
"regenerate": { "regenerate": {
"version": "1.4.1", "version": "1.4.1",
"resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.1.tgz", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.1.tgz",
@@ -14967,6 +15455,44 @@
} }
} }
}, },
"tailwindcss": {
"version": "1.8.10",
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-1.8.10.tgz",
"integrity": "sha512-7QkERG/cWCzsuMqHMwjOaLMVixOGLNBiXsrkssxlE1aWfkxVbGqiuMokR2162xRyaH2mBIHKxmlf1qb3DvIPqw==",
"dev": true,
"requires": {
"@fullhuman/postcss-purgecss": "^2.1.2",
"autoprefixer": "^9.4.5",
"browserslist": "^4.12.0",
"bytes": "^3.0.0",
"chalk": "^3.0.0 || ^4.0.0",
"color": "^3.1.2",
"detective": "^5.2.0",
"fs-extra": "^8.0.0",
"html-tags": "^3.1.0",
"lodash": "^4.17.20",
"node-emoji": "^1.8.1",
"normalize.css": "^8.0.1",
"object-hash": "^2.0.3",
"postcss": "^7.0.11",
"postcss-functions": "^3.0.0",
"postcss-js": "^2.0.0",
"postcss-nested": "^4.1.1",
"postcss-selector-parser": "^6.0.0",
"postcss-value-parser": "^4.1.0",
"pretty-hrtime": "^1.0.3",
"reduce-css-calc": "^2.1.6",
"resolve": "^1.14.2"
},
"dependencies": {
"html-tags": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.1.0.tgz",
"integrity": "sha512-1qYz89hW3lFDEazhjW0yVAV87lw8lVkrJocr72XmBkMKsoSVJCQx3W8BXsC7hO2qAt8BoVjYjtAcZ9perqGnNg==",
"dev": true
}
}
},
"tapable": { "tapable": {
"version": "1.1.3", "version": "1.1.3",
"resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz", "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz",

4
package.json
View File

@@ -33,8 +33,8 @@
"@nuxtjs/sitemap": "^2.4.0", "@nuxtjs/sitemap": "^2.4.0",
"@nuxtjs/toast": "^3.3.1", "@nuxtjs/toast": "^3.3.1",
"ace-builds": "^1.4.12", "ace-builds": "^1.4.12",
"firebase": "^7.21.0",
"esprima": "^4.0.1", "esprima": "^4.0.1",
"firebase": "^7.21.0",
"graphql": "^15.3.0", "graphql": "^15.3.0",
"graphql-language-service-interface": "^2.4.2", "graphql-language-service-interface": "^2.4.2",
"nuxt": "^2.14.6", "nuxt": "^2.14.6",
@@ -50,9 +50,11 @@
"devDependencies": { "devDependencies": {
"@babel/core": "^7.11.6", "@babel/core": "^7.11.6",
"@babel/preset-env": "^7.11.5", "@babel/preset-env": "^7.11.5",
"@nuxtjs/color-mode": "^1.1.1",
"@nuxtjs/google-analytics": "^2.4.0", "@nuxtjs/google-analytics": "^2.4.0",
"@nuxtjs/pwa": "^3.0.2", "@nuxtjs/pwa": "^3.0.2",
"@nuxtjs/svg": "^0.1.12", "@nuxtjs/svg": "^0.1.12",
"@nuxtjs/tailwindcss": "^3.0.2",
"@testing-library/jest-dom": "^5.11.4", "@testing-library/jest-dom": "^5.11.4",
"@vue/test-utils": "^1.1.0", "@vue/test-utils": "^1.1.0",
"babel-core": "^7.0.0-bridge.0", "babel-core": "^7.0.0-bridge.0",

38
pages/doc.vue
View File

@@ -12,7 +12,7 @@
</ul> </ul>
<ul> <ul>
<li> <li>
<div class="flex-wrap"> <div class="row-wrapper">
<label for="collectionUpload"> <label for="collectionUpload">
<button <button
class="icon" class="icon"
@@ -288,39 +288,43 @@
.doc-desc, .doc-desc,
.folder, .folder,
.request { .request {
display: flex; @apply flex;
flex-flow: column; @apply flex-col;
justify-content: center; @apply justify-center;
flex: 1; @apply flex-1;
padding: 16px; @apply p-8;
.material-icons { .material-icons {
margin-right: 16px; @apply mr-8;
} }
} }
.folder { .folder {
border-left: 1px solid var(--brd-color); @apply border-l;
margin: 16px 0 0; @apply border-brdColor;
@apply mt-8;
} }
.request { .request {
border: 1px solid var(--brd-color); @apply border;
border-radius: 8px; @apply border-brdColor;
margin: 16px 0 0; @apply rounded-lg;
@apply mt-8;
h4 { h4 {
margin: 8px 0; @apply mt-8;
} }
} }
.doc-desc { .doc-desc {
color: var(--fg-light-color); @apply text-fgLightColor;
border-bottom: 1px dashed var(--brd-color); @apply border-b;
margin: 0; @apply border-dashed;
@apply border-brdColor;
@apply m-0;
&:last-child { &:last-child {
border-bottom: none; @apply border-b-0;
} }
} }
</style> </style>

12
pages/graphql.vue
View File

@@ -29,7 +29,7 @@
<pw-section class="orange" :label="$t('headers')" ref="headers"> <pw-section class="orange" :label="$t('headers')" ref="headers">
<ul v-if="headers.length !== 0"> <ul v-if="headers.length !== 0">
<li> <li>
<div class="flex-wrap"> <div class="row-wrapper">
<label for="headerList">{{ $t("header_list") }}</label> <label for="headerList">{{ $t("header_list") }}</label>
<div> <div>
<button class="icon" @click="headers = []" v-tooltip.bottom="$t('clear')"> <button class="icon" @click="headers = []" v-tooltip.bottom="$t('clear')">
@@ -93,7 +93,7 @@
</pw-section> </pw-section>
<pw-section class="green" :label="$t('schema')" ref="schema"> <pw-section class="green" :label="$t('schema')" ref="schema">
<div class="flex-wrap"> <div class="row-wrapper">
<label>{{ $t("schema") }}</label> <label>{{ $t("schema") }}</label>
<div v-if="schema"> <div v-if="schema">
<button <button
@@ -153,7 +153,7 @@
</pw-section> </pw-section>
<pw-section class="cyan" :label="$t('query')" ref="query"> <pw-section class="cyan" :label="$t('query')" ref="query">
<div class="flex-wrap gqlRunQuery"> <div class="row-wrapper gqlRunQuery">
<label for="gqlQuery">{{ $t("query") }}</label> <label for="gqlQuery">{{ $t("query") }}</label>
<div> <div>
<button <button
@@ -210,7 +210,7 @@
</pw-section> </pw-section>
<pw-section class="purple" label="Response" ref="response"> <pw-section class="purple" label="Response" ref="response">
<div class="flex-wrap"> <div class="row-wrapper">
<label for="responseField">{{ $t("response") }}</label> <label for="responseField">{{ $t("response") }}</label>
<div> <div>
<button <button
@@ -321,10 +321,10 @@
<style scoped lang="scss"> <style scoped lang="scss">
.gqlTabs { .gqlTabs {
max-height: calc(100vh - 192px); max-height: calc(100vh - 192px);
overflow: auto; @apply overflow-auto;
} }
.gqlRunQuery { .gqlRunQuery {
margin-bottom: 12px; @apply mb-8;
} }
</style> </style>

56
pages/index.vue
View File

@@ -207,7 +207,7 @@
</ul> </ul>
<ul> <ul>
<li> <li>
<div class="flex-wrap"> <div class="row-wrapper">
<span> <span>
<pw-toggle v-if="canListParameters" :on="rawInput" @change="rawInput = $event"> <pw-toggle v-if="canListParameters" :on="rawInput" @change="rawInput = $event">
{{ $t("raw_input") }} {{ $t("raw_input") }}
@@ -267,7 +267,7 @@
<div v-if="!rawInput"> <div v-if="!rawInput">
<ul> <ul>
<li> <li>
<div class="flex-wrap"> <div class="row-wrapper">
<label for="reqParamList">{{ $t("parameter_list") }}</label> <label for="reqParamList">{{ $t("parameter_list") }}</label>
<div> <div>
<button <button
@@ -337,7 +337,7 @@
<div v-else> <div v-else>
<ul> <ul>
<li> <li>
<div class="flex-wrap"> <div class="row-wrapper">
<label for="rawBody">{{ $t("raw_request_body") }}</label> <label for="rawBody">{{ $t("raw_request_body") }}</label>
<div> <div>
<button <button
@@ -365,7 +365,7 @@
</ul> </ul>
</div> </div>
</div> </div>
<div class="flex-wrap"> <div class="row-wrapper">
<span> <span>
<button <button
class="icon" class="icon"
@@ -433,7 +433,7 @@
<pw-section class="pink" label="Parameters" ref="parameters"> <pw-section class="pink" label="Parameters" ref="parameters">
<ul v-if="params.length !== 0"> <ul v-if="params.length !== 0">
<li> <li>
<div class="flex-wrap"> <div class="row-wrapper">
<label for="paramList">{{ $t("parameter_list") }}</label> <label for="paramList">{{ $t("parameter_list") }}</label>
<div> <div>
<button <button
@@ -523,7 +523,7 @@
<pw-section class="cyan" :label="$t('authentication')" ref="authentication"> <pw-section class="cyan" :label="$t('authentication')" ref="authentication">
<ul> <ul>
<li> <li>
<div class="flex-wrap"> <div class="row-wrapper">
<label for="auth">{{ $t("authentication") }}</label> <label for="auth">{{ $t("authentication") }}</label>
<div> <div>
<button <button
@@ -575,7 +575,7 @@
</ul> </ul>
<ul v-if="auth === 'Bearer Token' || auth === 'OAuth 2.0'"> <ul v-if="auth === 'Bearer Token' || auth === 'OAuth 2.0'">
<li> <li>
<div class="flex-wrap"> <div class="row-wrapper">
<input placeholder="Token" name="bearer_token" v-model="bearerToken" /> <input placeholder="Token" name="bearer_token" v-model="bearerToken" />
<button <button
v-if="auth === 'OAuth 2.0'" v-if="auth === 'OAuth 2.0'"
@@ -596,7 +596,7 @@
</div> </div>
</li> </li>
</ul> </ul>
<div class="flex-wrap"> <div class="row-wrapper">
<pw-toggle :on="!urlExcludes.auth" @change="setExclude('auth', !$event)"> <pw-toggle :on="!urlExcludes.auth" @change="setExclude('auth', !$event)">
{{ $t("include_in_url") }} {{ $t("include_in_url") }}
</pw-toggle> </pw-toggle>
@@ -610,7 +610,7 @@
> >
<ul> <ul>
<li> <li>
<div class="flex-wrap"> <div class="row-wrapper">
<label for="token-name">{{ $t("token_name") }}</label> <label for="token-name">{{ $t("token_name") }}</label>
<div> <div>
<button <button
@@ -732,7 +732,7 @@
<pw-section class="orange" label="Headers" ref="headers"> <pw-section class="orange" label="Headers" ref="headers">
<ul v-if="headers.length !== 0"> <ul v-if="headers.length !== 0">
<li> <li>
<div class="flex-wrap"> <div class="row-wrapper">
<label for="headerList">{{ $t("header_list") }}</label> <label for="headerList">{{ $t("header_list") }}</label>
<div> <div>
<button <button
@@ -810,7 +810,7 @@
> >
<ul> <ul>
<li> <li>
<div class="flex-wrap"> <div class="row-wrapper">
<label for="generatedCode">{{ $t("javascript_code") }}</label> <label for="generatedCode">{{ $t("javascript_code") }}</label>
<div> <div>
<a <a
@@ -855,7 +855,7 @@
> >
<ul> <ul>
<li> <li>
<div class="flex-wrap"> <div class="row-wrapper">
<label for="generatedCode">{{ $t("javascript_code") }}</label> <label for="generatedCode">{{ $t("javascript_code") }}</label>
<div> <div>
<a <a
@@ -881,7 +881,7 @@
}" }"
/> />
<div v-if="testReports.length !== 0"> <div v-if="testReports.length !== 0">
<div class="flex-wrap"> <div class="row-wrapper">
<label>Test Reports</label> <label>Test Reports</label>
<div> <div>
<button <button
@@ -897,7 +897,7 @@
<div v-if="testReport.startBlock" class="info"> <div v-if="testReport.startBlock" class="info">
<h4>{{ testReport.startBlock }}</h4> <h4>{{ testReport.startBlock }}</h4>
</div> </div>
<p v-else-if="testReport.result" class="flex-wrap info"> <p v-else-if="testReport.result" class="row-wrapper info">
<span :class="testReport.styles.class"> <span :class="testReport.styles.class">
<i class="material-icons"> <i class="material-icons">
{{ testReport.styles.icon }} {{ testReport.styles.icon }}
@@ -942,19 +942,19 @@
<aside v-if="activeSidebar" class="sticky-inner inner-right"> <aside v-if="activeSidebar" class="sticky-inner inner-right">
<section> <section>
<tabs> <tabs>
<tab :id="'history'" :icon="'watch_later'" :label="$t('history')" :selected="true"> <tab :id="'history'" :label="$t('history')" :selected="true">
<history @useHistory="handleUseHistory" ref="historyComponent" /> <history @useHistory="handleUseHistory" ref="historyComponent" />
</tab> </tab>
<tab :id="'collections'" :icon="'folder_special'" :label="$t('collections')"> <tab :id="'collections'" :label="$t('collections')">
<collections /> <collections />
</tab> </tab>
<tab :id="'env'" :icon="'style'" :label="$t('environments')"> <tab :id="'env'" :label="$t('environments')">
<environments @use-environment="useSelectedEnvironment($event)" /> <environments @use-environment="useSelectedEnvironment($event)" />
</tab> </tab>
<tab :id="'notes'" :icon="'note'" :label="$t('notes')"> <tab :id="'notes'" :label="$t('notes')">
<pw-section class="pink" :label="$t('notes')" ref="sync"> <pw-section class="pink" :label="$t('notes')" ref="sync">
<div v-if="fb.currentUser"> <div v-if="fb.currentUser">
<inputform /> <inputform />
@@ -986,7 +986,7 @@
<div slot="header"> <div slot="header">
<ul> <ul>
<li> <li>
<div class="flex-wrap"> <div class="row-wrapper">
<h3 class="title">{{ $t("import_curl") }}</h3> <h3 class="title">{{ $t("import_curl") }}</h3>
<div> <div>
<button class="icon" @click="showModal = false"> <button class="icon" @click="showModal = false">
@@ -1010,7 +1010,7 @@
</ul> </ul>
</div> </div>
<div slot="footer"> <div slot="footer">
<div class="flex-wrap"> <div class="row-wrapper">
<span></span> <span></span>
<span> <span>
<button class="icon" @click="showModal = false"> <button class="icon" @click="showModal = false">
@@ -1028,7 +1028,7 @@
<div slot="header"> <div slot="header">
<ul> <ul>
<li> <li>
<div class="flex-wrap"> <div class="row-wrapper">
<h3 class="title">{{ $t("generate_code") }}</h3> <h3 class="title">{{ $t("generate_code") }}</h3>
<div> <div>
<button class="icon" @click="isHidden = true"> <button class="icon" @click="isHidden = true">
@@ -1054,7 +1054,7 @@
</ul> </ul>
<ul> <ul>
<li> <li>
<div class="flex-wrap"> <div class="row-wrapper">
<label for="generatedCode">{{ $t("generated_code") }}</label> <label for="generatedCode">{{ $t("generated_code") }}</label>
<div> <div>
<button <button
@@ -1085,7 +1085,7 @@
<div slot="header"> <div slot="header">
<ul> <ul>
<li> <li>
<div class="flex-wrap"> <div class="row-wrapper">
<h3 class="title">{{ $t("manage_token") }}</h3> <h3 class="title">{{ $t("manage_token") }}</h3>
<div> <div>
<button class="icon" @click="showTokenList = false"> <button class="icon" @click="showTokenList = false">
@@ -1099,7 +1099,7 @@
<div slot="body"> <div slot="body">
<ul> <ul>
<li> <li>
<div class="flex-wrap"> <div class="row-wrapper">
<label for="token-list">{{ $t("token_list") }}</label> <label for="token-list">{{ $t("token_list") }}</label>
<div v-if="tokens.length != 0"> <div v-if="tokens.length != 0">
<button <button
@@ -1129,7 +1129,7 @@
<li> <li>
<input :value="token.value" readonly /> <input :value="token.value" readonly />
</li> </li>
<div class="flex-wrap"> <div class="row-wrapper">
<li> <li>
<button <button
class="icon" class="icon"
@@ -1161,7 +1161,7 @@
<div slot="header"> <div slot="header">
<ul> <ul>
<li> <li>
<div class="flex-wrap"> <div class="row-wrapper">
<h3 class="title">{{ $t("manage_token_req") }}</h3> <h3 class="title">{{ $t("manage_token_req") }}</h3>
<div> <div>
<button class="icon" @click="showTokenRequestList = false"> <button class="icon" @click="showTokenRequestList = false">
@@ -1175,7 +1175,7 @@
<div slot="body"> <div slot="body">
<ul> <ul>
<li> <li>
<div class="flex-wrap"> <div class="row-wrapper">
<label for="token-req-list">{{ $t("token_req_list") }}</label> <label for="token-req-list">{{ $t("token_req_list") }}</label>
<div> <div>
<button <button
@@ -1231,7 +1231,7 @@
</ul> </ul>
</div> </div>
<div slot="footer"> <div slot="footer">
<div class="flex-wrap"> <div class="row-wrapper">
<span></span> <span></span>
<span> <span>
<button class="icon primary" @click="addOAuthTokenReq"> <button class="icon primary" @click="addOAuthTokenReq">

33
pages/settings.vue
View File

@@ -8,7 +8,7 @@
<img <img
v-if="fb.currentUser.photoURL" v-if="fb.currentUser.photoURL"
:src="fb.currentUser.photoURL" :src="fb.currentUser.photoURL"
class="material-icons" class="rounded-full material-icons"
/> />
<i v-else class="material-icons">account_circle</i> <i v-else class="material-icons">account_circle</i>
<span> <span>
@@ -119,7 +119,7 @@
<pw-section class="purple" :label="$t('extensions')" ref="extensions"> <pw-section class="purple" :label="$t('extensions')" ref="extensions">
<ul> <ul>
<li> <li>
<div class="flex-wrap"> <div class="row-wrapper">
<pw-toggle <pw-toggle
:on="settings.EXTENSIONS_ENABLED" :on="settings.EXTENSIONS_ENABLED"
@change="toggleSetting('EXTENSIONS_ENABLED')" @change="toggleSetting('EXTENSIONS_ENABLED')"
@@ -131,17 +131,22 @@
</ul> </ul>
<ul class="info"> <ul class="info">
<li v-if="extensionVersion != null"> <li v-if="extensionVersion != null">
{{ $t("extension_version") }}: v{{ extensionVersion.major }}.{{ extensionVersion.minor }} <p>
{{ $t("extension_version") }}: v{{ extensionVersion.major }}.{{
extensionVersion.minor
}}
</p>
</li>
<li v-else>
<p>{{ $t("extension_version") }}: {{ $t("extension_ver_not_reported") }}</p>
</li> </li>
<li v-else>{{ $t("extension_version") }}: {{ $t("extension_ver_not_reported") }}</li>
</ul> </ul>
</pw-section> </pw-section>
<pw-section class="blue" :label="$t('proxy')" ref="proxy"> <pw-section class="blue" :label="$t('proxy')" ref="proxy">
<ul> <ul>
<li> <li>
<div class="flex-wrap"> <div class="row-wrapper">
<span> <span>
<pw-toggle :on="settings.PROXY_ENABLED" @change="toggleSetting('PROXY_ENABLED')"> <pw-toggle :on="settings.PROXY_ENABLED" @change="toggleSetting('PROXY_ENABLED')">
{{ $t("proxy") }} {{ $t("proxy") }}
@@ -162,7 +167,7 @@
</ul> </ul>
<ul> <ul>
<li> <li>
<div class="flex-wrap"> <div class="row-wrapper">
<label for="url">{{ $t("url") }}</label> <label for="url">{{ $t("url") }}</label>
<button class="icon" @click="resetProxy" v-tooltip.bottom="$t('reset_default')"> <button class="icon" @click="resetProxy" v-tooltip.bottom="$t('reset_default')">
<i class="material-icons">clear_all</i> <i class="material-icons">clear_all</i>
@@ -227,7 +232,7 @@
</ul> </ul>
<ul> <ul>
<li> <li>
<div class="flex-wrap"> <div class="row-wrapper">
<pw-toggle <pw-toggle
:on="settings.EXPERIMENTAL_URL_BAR_ENABLED" :on="settings.EXPERIMENTAL_URL_BAR_ENABLED"
@change="toggleSetting('EXPERIMENTAL_URL_BAR_ENABLED')" @change="toggleSetting('EXPERIMENTAL_URL_BAR_ENABLED')"
@@ -238,11 +243,19 @@
</li> </li>
</ul> </ul>
</pw-section> </pw-section>
<!-- <div>
<h1>Color mode: {{ $colorMode.value }}</h1>
<select v-model="$colorMode.preference">
<option value="system">System</option>
<option value="light">Light</option>
<option value="dark">Dark</option>
<option value="sepia">Sepia</option>
</select>
</div> -->
</div> </div>
</template> </template>
<style scoped lang="scss"></style>
<script> <script>
import firebase from "firebase/app" import firebase from "firebase/app"
import { fb } from "~/helpers/fb" import { fb } from "~/helpers/fb"

7
plugins/v-tooltip.js
View File

@@ -1,4 +1,9 @@
import Vue from "vue" import Vue from "vue"
import VTooltip from "v-tooltip" import VTooltip from "v-tooltip"
Vue.use(VTooltip) Vue.use(VTooltip, {
defaultOffset: 8,
popover: {
defaultOffset: 0,
},
})

58
tailwind.config.js Normal file
View File

@@ -0,0 +1,58 @@
/*
** TailwindCSS Configuration File
**
** Docs: https://tailwindcss.com/docs/configuration
** Default: https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js
*/
module.exports = {
future: {
removeDeprecatedGapUtilities: true,
},
experimental: "all",
corePlugins: {
clear: false,
float: false,
skew: false,
},
theme: {
extend: {
colors: {
bgColor: "var(--bg-color)",
bgLightColor: "var(--bg-light-color)",
bgDarkColor: "var(--bg-dark-color)",
fgColor: "var(--fg-color)",
fgLightColor: "var(--fg-light-color)",
brdColor: "var(--brd-color)",
errColor: "var(--err-color)",
acColor: "var(--ac-color)",
actColor: "var(--act-color)",
atcColor: "var(--atc-color)",
ttColor: "var(--tt-color)",
},
inset: {},
},
fontFamily: {
body: "var(--font-body)",
mono: "var(--font-mono)",
icon: "var(--font-icon)",
},
},
variants: {},
plugins: [],
purge: {
// Learn more on https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css
enabled: process.env.NODE_ENV === "production",
content: [
"components/**/*.vue",
"layouts/**/*.vue",
"pages/**/*.vue",
"plugins/**/*.js",
"nuxt.config.js",
"content/**/*.md",
],
// These options are passed through directly to PurgeCSS
options: {
whitelistPatterns: [/^bg-/, /^text-/, /^border-/, /^h-/, /^w-/, /^hover:/],
},
},
}