TheCloneArmy/crater
1
0
Fork 1
mirror of https://github.com/crater-invoice/crater.git synced 2025-10-28 12:11:08 -04:00
Code Issues Packages Projects Releases Wiki Activity

refactor base modal styles

Browse Source
This commit is contained in:
Jay_Makwana
2019-11-15 19:42:16 +05:30
parent 9707b6b3a2
commit 1567d9fd37
8 changed files with 47 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
resources/assets/js/components/base/BaseInput.vue
View File

@ -20,7 +20,7 @@
@blur="handleFocusOut" @blur="handleFocusOut"
> >
<div v-if="showPassword && isAlignLeftIcon" style="cursor: pointer" @click="showPass = !showPass" > <div v-if="showPassword && isAlignLeftIcon" style="cursor: pointer" @click="showPass = !showPass" >
<font-awesome-icon :icon="!showPass ?'eye-slash': 'eye'" class="right-icon" /> <font-awesome-icon :icon="!showPass ?'eye': 'eye-slash'" class="right-icon" />
</div> </div>
<font-awesome-icon v-if="icon && !isAlignLeftIcon" :icon="icon" class="right-icon" /> <font-awesome-icon v-if="icon && !isAlignLeftIcon" :icon="icon" class="right-icon" />
</div> </div>

4
resources/assets/js/components/base/modal/BaseModal.vue
View File

@ -2,8 +2,8 @@
<transition name="fade"> <transition name="fade">
<div v-if="modalActive" :class="'size-' + modalSize" class="base-modal"> <div v-if="modalActive" :class="'size-' + modalSize" class="base-modal">
<div class="modal-body"> <div class="modal-body">
<div class="close-icon"> <div class="close-icon" @click="closeModal">
<font-awesome-icon class="mr-2" icon="times" @click="closeModal"/> <font-awesome-icon icon="times" />
</div> </div>
<div class="modal-header p-3"> <div class="modal-header p-3">
<h5 class="modal-heading">{{ modalTitle }}</h5> <h5 class="modal-heading">{{ modalTitle }}</h5>

17
resources/assets/sass/components/base-modal.scss vendored
View File

@ -55,14 +55,29 @@
.close-icon { .close-icon {
position: absolute; position: absolute;
padding: 6px 0 0 0; padding: 6px;
top: 23px; top: 23px;
right: 15px; right: 15px;
display: flex;
justify-content: center;
align-content: center;
width: 20px;
cursor: pointer; cursor: pointer;
} }
} }
@media (max-width: $x-small-breakpoint) {
.base-modal {
.modal-body {
height: 100%;
overflow: scroll;
border-radius: 0px;
}
}
}

9
resources/assets/sass/components/customer-modal.scss vendored
View File

@ -36,11 +36,16 @@
} }
@media(max-width: $x-small-breakpoint ) { @media (max-width: $x-small-breakpoint) {
.base-modal { .base-modal {
.customer-modal { .customer-modal {
width: 100vw;
.required {
position: relative;
}
.input-label { .input-label {
text-align: left; text-align: left;
@ -50,4 +55,4 @@
} }
} }

3
resources/assets/sass/components/item-modal.scss vendored
View File

@ -26,6 +26,7 @@
.base-modal { .base-modal {
.item-modal { .item-modal {
width: 100vw;
.input-label { .input-label {
text-align: left; text-align: left;
@ -35,4 +36,4 @@
} }
} }

1
resources/assets/sass/components/tax-type-modal.scss vendored
View File

@ -31,6 +31,7 @@
.base-modal { .base-modal {
.tax-type-modal { .tax-type-modal {
width: 100vw;
.input-label { .input-label {
text-align: left; text-align: left;

17
resources/assets/sass/components/template-modal.scss vendored
View File

@ -38,3 +38,20 @@
} }
} }
} }
@media (max-width: $x-small-breakpoint) {
.base-modal {
.template-modal {
width: 100vw;
.template-container {
justify-content: center;
}
}
}
}

2
resources/assets/sass/pages/invoices/view.scss vendored
View File

@ -13,7 +13,7 @@
position: fixed; position: fixed;
top: 0; top: 0;
width: 300px; width: 300px;
z-index: 30; z-index: 25;
background: #FFFFFF; background: #FFFFFF;
} }