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

refactor: class names

Browse Source
This commit is contained in:
Liyas Thomas
2021-06-26 10:41:19 +00:00
committed by GitHub
parent 9bd86f0564
commit cdfce9e2b8
25 changed files with 80 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
assets/scss/styles.scss
View File

@@ -1,7 +1,7 @@
*, *,
*::before, *::before,
*::after { *::after {
backface-visibility: hidden; @apply backface-hidden;
} }
:root { :root {
@@ -89,8 +89,7 @@ header,
footer { footer {
& > div { & > div {
@apply flex; @apply flex;
@apply py-2; @apply py-2 px-2;
@apply px-2;
@apply w-full; @apply w-full;
@apply items-center; @apply items-center;
@apply justify-between; @apply justify-between;
@@ -99,9 +98,7 @@ footer {
.wrapper { .wrapper {
@apply min-h-screen; @apply min-h-screen;
@apply flex; @apply flex flex-col flex-nowrap;
@apply flex-col;
@apply flex-nowrap;
} }
.wrapper .page { .wrapper .page {
@@ -112,26 +109,21 @@ footer {
.content, .content,
.columns, .columns,
.footer { .footer {
@apply flex; @apply flex flex-1;
@apply flex-1;
} }
.nav-first, .nav-first,
.sticky-inner { .sticky-inner {
@apply flex; @apply flex flex-col;
@apply items-start items-stretch;
@apply order-1; @apply order-1;
@apply flex-col;
@apply sticky; @apply sticky;
@apply top-0; @apply top-0;
@apply items-start;
@apply items-stretch;
@apply h-full; @apply h-full;
} }
main { main {
@apply flex; @apply flex flex-col flex-1;
@apply flex-col;
@apply flex-1;
@apply order-2; @apply order-2;
@apply relative; @apply relative;
@apply px-4; @apply px-4;
@@ -156,9 +148,7 @@ p {
} }
hr { hr {
@apply border-b; @apply border-b border-dashed border-divider;
@apply border-dashed;
@apply border-divider;
@apply my-4; @apply my-4;
} }
@@ -170,23 +160,21 @@ hr {
@apply rounded-lg; @apply rounded-lg;
@apply px-4; @apply px-4;
@apply py-2; @apply py-2;
@apply text-xs; @apply text-xs text-secondary;
@apply font-medium; @apply font-medium;
@apply shadow-lg; @apply shadow-lg;
@apply transition; @apply transition;
@apply ease-in-out; @apply ease-in-out;
@apply duration-150; @apply duration-150;
@apply bg-tooltip; @apply bg-tooltip;
@apply text-secondary;
} }
.tooltip-arrow { .tooltip-arrow {
@apply h-0; @apply h-0;
@apply w-0; @apply w-0;
@apply border-solid; @apply border-solid border-tooltip;
@apply absolute; @apply absolute;
@apply m-2; @apply m-2;
@apply border-tooltip;
@apply z-30; @apply z-30;
@apply transition; @apply transition;
@apply ease-in-out; @apply ease-in-out;
@@ -197,8 +185,7 @@ hr {
@apply mb-0; @apply mb-0;
.tooltip-arrow { .tooltip-arrow {
@apply mt-0; @apply mt-0 mb-0;
@apply mb-0;
border-width: 5px 5px 0 5px; border-width: 5px 5px 0 5px;
border-left-color: transparent !important; border-left-color: transparent !important;
@@ -213,8 +200,7 @@ hr {
@apply mt-0; @apply mt-0;
.tooltip-arrow { .tooltip-arrow {
@apply mt-0; @apply mt-0 mb-0;
@apply mb-0;
border-width: 0 5px 5px 5px; border-width: 0 5px 5px 5px;
border-left-color: transparent !important; border-left-color: transparent !important;
@@ -229,8 +215,7 @@ hr {
@apply ml-0; @apply ml-0;
.tooltip-arrow { .tooltip-arrow {
@apply ml-0; @apply ml-0 mr-0;
@apply mr-0;
border-width: 5px 5px 5px 0; border-width: 5px 5px 5px 0;
border-left-color: transparent !important; border-left-color: transparent !important;
@@ -245,8 +230,7 @@ hr {
@apply mr-0; @apply mr-0;
.tooltip-arrow { .tooltip-arrow {
@apply ml-0; @apply ml-0 mr-0;
@apply mr-0;
border-width: 5px 0 5px 5px; border-width: 5px 0 5px 5px;
border-top-color: transparent !important; border-top-color: transparent !important;
@@ -425,8 +409,7 @@ input[type="radio"],
} }
.show-on-large-screen { .show-on-large-screen {
@apply flex; @apply flex flex-1;
@apply flex-1;
} }
.drop-down-input, .drop-down-input,
@@ -592,9 +575,7 @@ ol {
ul li, ul li,
ol li { ol li {
@apply inline-flex; @apply inline-flex;
@apply flex-col; @apply flex-col flex-nowrap flex-1;
@apply flex-nowrap;
@apply flex-1;
@apply justify-center; @apply justify-center;
&.shrink { &.shrink {
@@ -603,11 +584,9 @@ ol li {
} }
.row-wrapper { .row-wrapper {
@apply flex; @apply flex flex-1 flex-row;
@apply items-center; @apply items-center;
@apply justify-between; @apply justify-between;
@apply flex-1;
@apply flex-row;
span, span,
div { div {
@@ -707,9 +686,7 @@ section {
} }
.page-columns { .page-columns {
@apply flex; @apply flex flex-1 flex-col;
@apply flex-1;
@apply flex-col;
} }
.inner-left { .inner-left {
@@ -740,8 +717,7 @@ section {
ul, ul,
ol { ol {
@apply flex-col; @apply flex-col flex-nowrap;
@apply flex-nowrap;
} }
ul li, ul li,
@@ -773,9 +749,8 @@ section {
.toasted-ad { .toasted-ad {
@apply bg-gray-50; @apply bg-gray-50;
@apply text-gray-900; @apply text-gray-900 text-sm;
@apply font-bold; @apply font-bold;
@apply text-sm;
@apply rounded-lg; @apply rounded-lg;
@apply shadow-lg; @apply shadow-lg;

6
components/app/Contributors.vue
View File

@@ -164,12 +164,10 @@
<style scoped lang="scss"> <style scoped lang="scss">
.contributors { .contributors {
@apply flex; @apply flex flex-wrap;
@apply items-center; @apply items-center;
@apply flex-wrap;
@apply overflow-auto; @apply overflow-auto;
@apply m-2; @apply m-2;
@apply space-x-2; @apply space-x-2 space-y-2;
@apply space-y-2;
} }
</style> </style>

11
components/app/Footer.vue
View File

@@ -85,13 +85,8 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.footer-link { .footer-link {
@apply flex-shrink-0; @apply flex-shrink-0;
@apply my-2; @apply my-2 mx-4;
@apply mx-4; @apply text-secondaryLight text-sm;
@apply text-secondaryLight; @apply hover:text-secondary;
@apply text-sm;
&:hover {
@apply text-secondary;
}
} }
</style> </style>

5
components/app/Header.vue
View File

@@ -310,10 +310,7 @@ export default {
@apply transition-colors; @apply transition-colors;
@apply ease-in-out; @apply ease-in-out;
@apply duration-150; @apply duration-150;
@apply hover:text-accent;
&:hover {
@apply text-accent;
}
} }
@keyframes slideIn { @keyframes slideIn {

3
components/app/Shortcuts.vue
View File

@@ -94,9 +94,8 @@ kbd {
@apply inline-flex; @apply inline-flex;
@apply resize-none; @apply resize-none;
@apply m-2; @apply m-2;
@apply py-2 px-4;
@apply rounded-lg; @apply rounded-lg;
@apply py-2;
@apply px-4;
@apply text-sm; @apply text-sm;
} }
</style> </style>

15
components/app/Sidenav.vue
View File

@@ -199,9 +199,7 @@ export default {
} }
nav.primary-nav { nav.primary-nav {
@apply flex; @apply flex flex-col flex-nowrap;
@apply flex-col;
@apply flex-nowrap;
@apply items-center; @apply items-center;
@apply justify-center; @apply justify-center;
@apply space-y-2; @apply space-y-2;
@@ -258,14 +256,10 @@ nav.primary-nav::-webkit-scrollbar,
} }
nav.secondary-nav { nav.secondary-nav {
@apply flex; @apply flex flex-col flex-nowrap;
@apply flex-col;
@apply flex-nowrap;
@apply items-center; @apply items-center;
@apply justify-center; @apply justify-center;
@apply border-t-2; @apply border-t-2 border-dashed border-divider;
@apply border-dashed;
@apply border-divider;
@apply pt-2; @apply pt-2;
@apply space-y-2; @apply space-y-2;
@@ -310,8 +304,7 @@ nav.secondary-nav {
} }
nav.primary-nav { nav.primary-nav {
@apply flex-row; @apply flex-row flex-nowrap;
@apply flex-nowrap;
@apply overflow-auto; @apply overflow-auto;
@apply bg-primaryDark; @apply bg-primaryDark;
@apply space-y-0; @apply space-y-0;

4
components/docs/Collection.vue
View File

@@ -30,10 +30,8 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.collection { .collection {
@apply flex; @apply flex flex-col flex-1;
@apply flex-col;
@apply justify-center; @apply justify-center;
@apply flex-1;
@apply p-4; @apply p-4;
.material-icons { .material-icons {

7
components/docs/Folder.vue
View File

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

19
components/docs/Request.vue
View File

@@ -111,15 +111,12 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.request { .request {
@apply flex; @apply flex flex-col flex-1;
@apply flex-col;
@apply justify-center; @apply justify-center;
@apply flex-1;
@apply p-4; @apply p-4;
@apply border;
@apply border-divider;
@apply rounded-lg;
@apply mt-4; @apply mt-4;
@apply border border-divider;
@apply rounded-lg;
h4 { h4 {
@apply mt-4; @apply mt-4;
@@ -131,16 +128,12 @@ export default {
} }
.doc-desc { .doc-desc {
@apply flex; @apply flex flex-col flex-1;
@apply flex-col;
@apply justify-center; @apply justify-center;
@apply flex-1;
@apply p-4; @apply p-4;
@apply text-secondaryLight;
@apply border-b;
@apply border-dashed;
@apply border-divider;
@apply m-0; @apply m-0;
@apply text-secondaryLight;
@apply border-b border-dashed border-divider;
&:last-child { &:last-child {
@apply border-b-0; @apply border-b-0;

3
components/graphql/Field.vue
View File

@@ -84,7 +84,6 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.field-highlighted { .field-highlighted {
@apply border-b-2; @apply border-b-2 border-accent;
@apply border-accent;
} }
</style> </style>

4
components/history/graphql/Card.vue
View File

@@ -149,12 +149,14 @@ export default {
.stared { .stared {
color: #f8e81c !important; color: #f8e81c !important;
} }
.fade-enter-active, .fade-enter-active,
.fade-leave-active { .fade-leave-active {
transition: all 0.2s; transition: all 0.2s;
} }
.fade-enter, .fade-enter,
.fade-leave-to { .fade-leave-to {
opacity: 0; @apply opacity-0;
} }
</style> </style>

8
components/history/index.vue
View File

@@ -176,18 +176,22 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.virtual-list { .virtual-list {
max-height: calc(100vh - 270px); max-height: calc(100vh - 270px);
[readonly] { [readonly] {
cursor: default; @apply cursor-default;
} }
} }
ul, ul,
ol { ol {
flex-direction: column; @apply flex-col;
} }
@media (max-width: 720px) { @media (max-width: 720px) {
.virtual-list.filled { .virtual-list.filled {
min-height: 320px; min-height: 320px;
} }
.labels { .labels {
display: none; display: none;
} }

4
components/history/rest/Card.vue
View File

@@ -160,12 +160,14 @@ export default {
.stared { .stared {
color: #f8e81c !important; color: #f8e81c !important;
} }
.fade-enter-active, .fade-enter-active,
.fade-leave-active { .fade-leave-active {
transition: all 0.2s; transition: all 0.2s;
} }
.fade-enter, .fade-enter,
.fade-leave-to { .fade-leave-to {
opacity: 0; @apply opacity-0;
} }
</style> </style>

3
components/http/BodyParameters.vue
View File

@@ -241,8 +241,7 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.file-chips-container { .file-chips-container {
@apply flex; @apply flex flex-1;
@apply flex-1;
@apply whitespace-nowrap; @apply whitespace-nowrap;
@apply overflow-auto; @apply overflow-auto;
@apply bg-primaryDark; @apply bg-primaryDark;

3
components/realtime/Log.vue
View File

@@ -57,8 +57,7 @@ export default {
span { span {
@apply block; @apply block;
@apply break-words; @apply break-words break-all;
@apply break-all;
} }
} }
</style> </style>

12
components/smart/AceEditor.vue
View File

@@ -257,8 +257,7 @@ export default {
} }
.outline { .outline {
@apply flex; @apply flex flex-nowrap;
@apply flex-nowrap;
@apply w-full; @apply w-full;
@apply overflow-auto; @apply overflow-auto;
@apply font-mono; @apply font-mono;
@@ -268,10 +267,8 @@ export default {
.block { .block {
@apply inline-flex; @apply inline-flex;
@apply items-center; @apply items-center;
@apply flex-grow-0; @apply flex-grow-0 flex-shrink-0;
@apply flex-shrink-0; @apply text-secondaryLight text-sm;
@apply text-secondaryLight;
@apply text-sm;
&:hover { &:hover {
@apply text-secondary; @apply text-secondary;
@@ -300,8 +297,7 @@ export default {
} }
.sib { .sib {
@apply px-4; @apply px-4 py-1;
@apply py-1;
&:hover { &:hover {
@apply text-secondary; @apply text-secondary;

3
components/smart/AutoComplete.vue
View File

@@ -211,8 +211,7 @@ export default {
li { li {
@apply w-full; @apply w-full;
@apply block; @apply block;
@apply py-2; @apply py-2 px-4;
@apply px-4;
@apply text-sm; @apply text-sm;
@apply font-mono; @apply font-mono;

3
components/smart/DeletableChip.vue
View File

@@ -21,8 +21,7 @@
@apply transition; @apply transition;
@apply ease-in-out; @apply ease-in-out;
@apply duration-150; @apply duration-150;
@apply border; @apply border border-divider;
@apply border-divider;
} }
.close-button { .close-button {

10
components/smart/Modal.vue
View File

@@ -129,17 +129,14 @@ export default {
} }
.modal-wrapper { .modal-wrapper {
@apply flex; @apply flex flex-1;
@apply items-center; @apply items-center;
@apply justify-center; @apply justify-center;
@apply flex-1;
} }
.modal-container { .modal-container {
@apply relative; @apply relative;
@apply flex; @apply flex flex-1 flex-col;
@apply flex-1;
@apply flex-col;
@apply m-2; @apply m-2;
@apply transition; @apply transition;
@apply ease-in-out; @apply ease-in-out;
@@ -147,8 +144,7 @@ export default {
@apply bg-primary; @apply bg-primary;
@apply rounded-lg; @apply rounded-lg;
@apply shadow-2xl; @apply shadow-2xl;
@apply border-4; @apply border-4 border-tooltip;
@apply border-tooltip;
max-height: calc(100vh - 128px); max-height: calc(100vh - 128px);
max-width: 640px; max-width: 640px;

14
components/smart/Tabs.vue
View File

@@ -56,10 +56,7 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.tabs-wrapper { .tabs-wrapper {
@apply flex; @apply flex flex-col flex-nowrap flex-1;
@apply flex-col;
@apply flex-nowrap;
@apply flex-1;
.tabs { .tabs {
@apply flex; @apply flex;
@@ -81,10 +78,8 @@ export default {
@apply flex; @apply flex;
@apply items-center; @apply items-center;
@apply justify-center; @apply justify-center;
@apply py-2; @apply py-2 px-4;
@apply px-4; @apply text-secondaryLight text-sm;
@apply text-secondaryLight;
@apply text-sm;
@apply rounded-lg; @apply rounded-lg;
@apply cursor-pointer; @apply cursor-pointer;
@apply transition-colors; @apply transition-colors;
@@ -115,8 +110,7 @@ export default {
@media (max-width: 768px) { @media (max-width: 768px) {
ul, ul,
ol { ol {
@apply flex-row; @apply flex-row flex-nowrap;
@apply flex-nowrap;
} }
} }
</style> </style>

6
components/smart/UrlField.vue
View File

@@ -394,17 +394,19 @@ export default {
@apply font-bold; @apply font-bold;
@apply text-accent; @apply text-accent;
} }
.url-field-container { .url-field-container {
@apply inline-grid; @apply inline-grid;
} }
.url-field { .url-field {
@apply border-dashed; @apply border-dashed border-divider;
@apply border-divider;
@apply whitespace-nowrap; @apply whitespace-nowrap;
@apply overflow-x-auto; @apply overflow-x-auto;
@apply resize-none; @apply resize-none;
@apply md:border-l; @apply md:border-l;
} }
.url-field::-webkit-scrollbar { .url-field::-webkit-scrollbar {
@apply hidden; @apply hidden;
} }

3
components/teams/index.vue
View File

@@ -134,7 +134,6 @@ export default {
} }
ul { ul {
display: flex; @apply flex flex-col;
flex-direction: column;
} }
</style> </style>

2
components/translate/SlideLeft.vue
View File

@@ -22,12 +22,14 @@ export default {
opacity: 0; opacity: 0;
margin-left: 0; margin-left: 0;
} }
&-enter-to, &-enter-to,
&-leave { &-leave {
width: var(--width, 33%); width: var(--width, 33%);
margin-left: var(--ml, 0); margin-left: var(--ml, 0);
opacity: 1; opacity: 1;
} }
&-enter-active, &-enter-active,
&-leave-active { &-leave-active {
overflow-x: hidden; overflow-x: hidden;

4
layouts/error.vue
View File

@@ -60,12 +60,10 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
// Center the error page in the viewport.
.page-error { .page-error {
@apply flex; @apply flex flex-col;
@apply items-center; @apply items-center;
@apply justify-center; @apply justify-center;
@apply flex-col;
@apply text-center; @apply text-center;
} }

6
pages/graphql.vue
View File

@@ -1175,10 +1175,12 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.gqlTabs { .gqlTabs {
max-height: calc(100vh - 192px); @apply relative;
position: relative;
@apply overflow-auto; @apply overflow-auto;
max-height: calc(100vh - 192px);
} }
.gqlRunQuery { .gqlRunQuery {
@apply mb-8; @apply mb-8;
} }