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

refactor(ui): minor ux improvements

Browse Source
This commit is contained in:
liyasthomas
2021-06-13 16:24:29 +05:30
parent 2ffd0be03f
commit 34cd604a91
9 changed files with 35 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
components/smart/Modal.vue
View File

@@ -8,8 +8,8 @@
</div>
<div class="modal-body">
<slot name="body"></slot>
<!-- <div class="fade top"></div>
<div class="fade bottom"></div> -->
<!-- <div class="top fade"></div>
<div class="bottom fade"></div> -->
</div>
<div v-if="hasFooterSlot" class="modal-footer">
<slot name="footer"></slot>
@@ -44,7 +44,7 @@ export default {
@apply ease-in-out;
@apply duration-150;
background-color: rgba(0, 0, 0, 0.32);
background-color: rgba(0, 0, 0, 0.64);
}
.modal-wrapper {
@@ -66,7 +66,7 @@ export default {
@apply bg-primary;
@apply rounded-lg;
@apply shadow-2xl;
@apply border;
@apply border-4;
@apply border-tooltip;
max-height: calc(100vh - 128px);
@@ -108,25 +108,25 @@ export default {
@apply duration-150;
}
.fade {
@apply absolute;
@apply block;
@apply transition;
@apply ease-in-out;
@apply duration-150;
// .fade {
// @apply absolute;
// @apply block;
// @apply transition;
// @apply ease-in-out;
// @apply duration-150;
left: 16px;
right: 20px;
height: 32px;
// left: 16px;
// right: 20px;
// height: 32px;
&.top {
top: 68px;
background: linear-gradient(to bottom, var(--primary-color), transparent);
}
// &.top {
// top: 56px;
// background: linear-gradient(to bottom, var(--primary-color), transparent);
// }
&.bottom {
bottom: 16px;
background: linear-gradient(to top, var(--primary-color), transparent);
}
}
// &.bottom {
// bottom: 16px;
// background: linear-gradient(to top, var(--primary-color), transparent);
// }
// }
</style>