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

6
components/app/Contributors.vue
View File

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

11
components/app/Footer.vue
View File

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

5
components/app/Header.vue
View File

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

3
components/app/Shortcuts.vue
View File

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

15
components/app/Sidenav.vue
View File

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

4
components/docs/Collection.vue
View File

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

7
components/docs/Folder.vue
View File

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

19
components/docs/Request.vue
View File

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

3
components/graphql/Field.vue
View File

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

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

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

8
components/history/index.vue
View File

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

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

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

3
components/http/BodyParameters.vue
View File

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

3
components/realtime/Log.vue
View File

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

12
components/smart/AceEditor.vue
View File

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

3
components/smart/AutoComplete.vue
View File

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

3
components/smart/DeletableChip.vue
View File

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

10
components/smart/Modal.vue
View File

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

14
components/smart/Tabs.vue
View File

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

6
components/smart/UrlField.vue
View File

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

3
components/teams/index.vue
View File

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

2
components/translate/SlideLeft.vue
View File

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

4
layouts/error.vue
View File

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

6
pages/graphql.vue
View File

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