fixes
This commit is contained in:
rakesh
parent
b2bd44f55b
commit
9086ddedf3
|
|
@ -24,6 +24,7 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@vuetify/vite-plugin": "^1.0.0-alpha.11",
|
||||
"@mdi/font": "5.9.55",
|
||||
"core-js": "^3.8.3",
|
||||
"fuse.js": "^6.4.2",
|
||||
"js-base64": "^2.5.1",
|
||||
|
|
@ -44,6 +45,7 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^4.1.0",
|
||||
"vite-plugin-vuetify": "^1.0.2",
|
||||
"babel-eslint": "^10.0.3",
|
||||
"eslint": "^7.32.0",
|
||||
"eslint-plugin-vue": "^8.0.3",
|
||||
|
|
|
|||
|
|
@ -23,5 +23,6 @@ export default {
|
|||
|
||||
};
|
||||
</script>
|
||||
<style src="./styles/_app.scss" lang="scss" />
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,15 +1,20 @@
|
|||
import { createVuetify } from 'vuetify'
|
||||
import { VDataTable } from 'vuetify/labs/VDataTable'
|
||||
import 'vuetify/styles'
|
||||
import { createVuetify } from "vuetify";
|
||||
|
||||
import theme from './theme'
|
||||
import "@mdi/font/css/materialdesignicons.css";
|
||||
import "vuetify/styles";
|
||||
import { VDataTable } from 'vuetify/labs/VDataTable'
|
||||
import * as labs from 'vuetify/labs/components'
|
||||
import * as directives from 'vuetify/directives'
|
||||
import theme from './theme'
|
||||
|
||||
// Vuetify
|
||||
|
||||
export default createVuetify({
|
||||
theme,
|
||||
ssr: true,
|
||||
directives,
|
||||
|
||||
components: {
|
||||
VDataTable,
|
||||
...labs,
|
||||
},
|
||||
theme
|
||||
})
|
||||
});
|
||||
|
|
|
|||
|
|
@ -17,28 +17,32 @@
|
|||
</v-overlay>
|
||||
<div v-show="!cartProductsProgress">
|
||||
<v-row
|
||||
><v-col cols="12" sm="12" md="12">
|
||||
>
|
||||
<v-col cols="12" sm="12" md="12">
|
||||
<v-col cols="12" sm="12" md="8">
|
||||
<v-menu offset-y down allow-overflow>
|
||||
<template v-slot:activator="{ on }">
|
||||
|
||||
<v-menu location="bottom" attach >
|
||||
<template v-slot:activator="{ props}">
|
||||
<v-text-field
|
||||
prepend-inner-icon="mdi-magnify"
|
||||
placeholder="Enter Item, Name, Keyword"
|
||||
v-model="searchData"
|
||||
v-on="on"
|
||||
|
||||
@input="searchProducts"
|
||||
hide-details
|
||||
variant="underlined"
|
||||
color="primary"
|
||||
v-bind="props"
|
||||
>
|
||||
</v-text-field>
|
||||
</template>
|
||||
<div>
|
||||
<v-card tile flat v-if="searchData">
|
||||
<v-card tile flat v-if="searchData" min-width="500">
|
||||
<RetailerSearchProducts @actionClose="showSnackBarMessage" />
|
||||
</v-card>
|
||||
<v-card v-else >
|
||||
<div class="fontcolor-bordeaux pa-1">Please type Item, Name, or Keyword to search</div>
|
||||
</v-card>
|
||||
</div>
|
||||
|
||||
</v-menu>
|
||||
</v-col>
|
||||
</v-col>
|
||||
|
|
@ -339,6 +343,7 @@ export default {
|
|||
});
|
||||
},
|
||||
async searchProducts() {
|
||||
|
||||
if (this.timeout) clearTimeout(this.timeout);
|
||||
this.timeout = setTimeout(() => {
|
||||
if (this.searchData) {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
@import './custom_functions.scss';
|
||||
@import './overrides.scss';
|
||||
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
@import 'vuetify/lib/styles/settings/_variables.scss';
|
||||
|
||||
@mixin mq($mq-breakpoint) {
|
||||
@if map-has-key($grid-breakpoints, $mq-breakpoint) {
|
||||
$mq-breakpoint: map-get($grid-breakpoints, $mq-breakpoint);
|
||||
}
|
||||
|
||||
@media screen and (min-width: #{$mq-breakpoint}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,436 @@
|
|||
.mdi:before,.mdi-set {
|
||||
display: inline-block;
|
||||
font: normal normal normal 24px/1 "Material Design Icons";
|
||||
font-size: inherit;
|
||||
text-rendering: auto;
|
||||
line-height: inherit;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale
|
||||
}
|
||||
|
||||
@import './custom_functions.scss';
|
||||
@import url('https://fonts.googleapis.com/css2?family=PT+Serif:wght@400;700&display=swap');
|
||||
|
||||
@font-face {
|
||||
font-family: 'Whyte-Regular';
|
||||
src: url('../assets/font/Whyte-Regular.woff2') format("woff2");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Whyte-Book';
|
||||
src: url('../assets/font/Whyte-Book.woff2') format("woff2");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
.v-application {
|
||||
.h1,
|
||||
.h2,
|
||||
.h3,
|
||||
.h4,
|
||||
.whyte-regular-font {
|
||||
font-family: 'Whyte-Regular', sans-serif;
|
||||
}
|
||||
.whyte-book-font {
|
||||
font-family: 'Whyte-Book', sans-serif;
|
||||
}
|
||||
.body {
|
||||
font-family: 'Whyte-Regular', sans-serif;
|
||||
}
|
||||
.body-font {
|
||||
font-family: 'Whyte-Book', sans-serif;
|
||||
}
|
||||
.body-font1 {
|
||||
font-family: 'PT Serif', serif;
|
||||
}
|
||||
.regular-font {
|
||||
font-family: 'Whyte-Regular', sans-serif;
|
||||
}
|
||||
.whyteTmin10-font {
|
||||
font-family: 'WhyteTmin10', sans-serif;
|
||||
}
|
||||
.whyteBookTmin10-font {
|
||||
font-family: 'WhyteBookTmin10', sans-serif;
|
||||
}
|
||||
.ls-n01 {
|
||||
letter-spacing: -0.1px;
|
||||
}
|
||||
.ls-n03 {
|
||||
letter-spacing: -0.03px;
|
||||
}
|
||||
.ls-n009 {
|
||||
letter-spacing: -0.09px;
|
||||
}
|
||||
// .ls-n10 {
|
||||
// letter-spacing: -1px !important;
|
||||
// }
|
||||
.ls-n008 {
|
||||
letter-spacing: -0.08px;
|
||||
}
|
||||
.ls-0 {
|
||||
letter-spacing: 0px;
|
||||
}
|
||||
.ls-n012 {
|
||||
letter-spacing: -0.12px;
|
||||
}
|
||||
.ls-n015 {
|
||||
letter-spacing: -0.15px;
|
||||
}
|
||||
.ls-n028 {
|
||||
letter-spacing: -0.28px;
|
||||
}
|
||||
.ls-n016 {
|
||||
letter-spacing: -0.16px;
|
||||
}
|
||||
.ls-n029 {
|
||||
letter-spacing: -0.29px;
|
||||
}
|
||||
.primary-focus-button:hover,
|
||||
.primary-focus-button:active,
|
||||
.primary-focus-button:focus {
|
||||
color: #fff !important;
|
||||
background-color: #2850DA !important;
|
||||
}
|
||||
.primary-focus:hover,
|
||||
.primary-focus:active,
|
||||
.primary-focus:focus {
|
||||
color: #2850DA !important;
|
||||
}
|
||||
.title-color-black {
|
||||
color: #000000;
|
||||
}
|
||||
.transparent-background {
|
||||
background: transparent !important;
|
||||
}
|
||||
.fontcolor-black-darken {
|
||||
color: #1D1D1D!important;
|
||||
}
|
||||
.fontcolor-black-light {
|
||||
color: #333333;
|
||||
}
|
||||
.fontcolor-grey-darken {
|
||||
color: #666666;
|
||||
}
|
||||
.fontcolor-grey-shade8b {
|
||||
color: #8b8b8b;
|
||||
}
|
||||
.fontcolor-mauve {
|
||||
color: #E5DBFE;
|
||||
}
|
||||
.fontcolor-mauve-CCB7FF {
|
||||
color: #CCB7FF;
|
||||
}
|
||||
.background-mauve-CCB7FF {
|
||||
background-color: #CCB7FF;
|
||||
}
|
||||
.fontcolor-monarch {
|
||||
color: #EB7525;
|
||||
}
|
||||
.fontcolor-lapis {
|
||||
color: #2E5D86;
|
||||
}
|
||||
.fontcolor-bordeaux {
|
||||
color: #C53C44;
|
||||
}
|
||||
.fontcolor-ecru {
|
||||
color: #F5F3F2;
|
||||
}
|
||||
.fontcolor-404040 {
|
||||
color: #404040;
|
||||
}
|
||||
.fontcolor-cloud {
|
||||
color: #CEE4F2;
|
||||
}
|
||||
.background-ecru {
|
||||
background-color: #F5F3F2;
|
||||
}
|
||||
.background-bordeaux {
|
||||
background-color: #C53C44;
|
||||
}
|
||||
.background-lapis {
|
||||
background-color: #2E5D86;
|
||||
}
|
||||
.background-mauve {
|
||||
background-color: #E5DBFE;
|
||||
}
|
||||
.background-monarch {
|
||||
background-color: #EB7525;
|
||||
}
|
||||
.background-cloud {
|
||||
background-color: #CEE4F2;
|
||||
}
|
||||
|
||||
.fontsize-10 {
|
||||
font-size: 0.625rem;
|
||||
}
|
||||
.fontsize-12 {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
.fontsize-28 {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
.fontsize-14 {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
.fontsize-15 {
|
||||
font-size: 0.970rem;
|
||||
}
|
||||
.fontsize-16 {
|
||||
font-size: 1rem !important;
|
||||
}
|
||||
.fontsize-18 {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
.fontsize-16pt {
|
||||
font-size: 1.375rem;
|
||||
}
|
||||
.fontsize-50 {
|
||||
font-size: 3.125rem;
|
||||
}
|
||||
.fontsize-70 {
|
||||
font-size: 4.375rem;
|
||||
}
|
||||
.font-weight-400 {
|
||||
font-weight: 400;
|
||||
}
|
||||
.font-weight-300 {
|
||||
font-weight: 300;
|
||||
}
|
||||
.line-height-18 {
|
||||
line-height: 1.125rem !important;
|
||||
}
|
||||
.line-height-18pt {
|
||||
line-height: 1.5rem !important;
|
||||
}
|
||||
.line-height-20 {
|
||||
line-height: 1.25rem !important;
|
||||
}
|
||||
.line-height-21 {
|
||||
line-height: 1.3125rem !important;
|
||||
}
|
||||
.line-height-22 {
|
||||
line-height: 1.375rem !important;
|
||||
}
|
||||
.line-height-36 {
|
||||
line-height: 2.25rem !important;
|
||||
}
|
||||
.line-height-33 {
|
||||
line-height: 2.0625rem !important;
|
||||
}
|
||||
.line-height-46 {
|
||||
line-height: 2.875rem !important;
|
||||
}
|
||||
.line-height-54 {
|
||||
line-height: 3.375rem !important;
|
||||
}
|
||||
.text-decoration-none {
|
||||
text-decoration: none;
|
||||
}
|
||||
.word-break {
|
||||
word-break: break-word!important;
|
||||
overflow-wrap: break-word!important;
|
||||
}
|
||||
.content-link-hover-color {
|
||||
color: #CCB7FF !important;
|
||||
}
|
||||
// custom css for vue-tel-input
|
||||
.phonenumber-input-error-border {
|
||||
&.vue-tel-input,
|
||||
&.vue-tel-input:focus,
|
||||
&.vue-tel-input:focus-within,
|
||||
&.vue-tel-input:active {
|
||||
border: 2px solid red !important;
|
||||
border-radius: 4px !important;
|
||||
box-shadow: unset !important;
|
||||
}
|
||||
}
|
||||
.phonenumber-custom-input .vti__input {
|
||||
height: 40px!important;
|
||||
}
|
||||
.phonenumber-custom-input.vue-tel-input {
|
||||
border-radius: 4px !important;
|
||||
border: thin solid rgba(0, 0, 0, 0.42) !important;
|
||||
}
|
||||
.phonenumber-custom-input {
|
||||
&,
|
||||
&:focus,
|
||||
&:active,
|
||||
&:focus-within {
|
||||
border: 2px solid #2c05da !important;
|
||||
}
|
||||
}
|
||||
.phonenumber-custom-input.vue-tel-input:focus-within {
|
||||
box-shadow: unset !important;
|
||||
}
|
||||
.phonenumber-custom-input .vti__dropdown {
|
||||
&:focus,
|
||||
&:active,
|
||||
&:focus-within {
|
||||
border: unset !important;
|
||||
outline: unset !important;
|
||||
}
|
||||
}
|
||||
.opacity-1 {
|
||||
opacity: 1;
|
||||
}
|
||||
.height-100 {
|
||||
height: 100vh;
|
||||
}
|
||||
.height-130px{
|
||||
height: 130px;
|
||||
}
|
||||
|
||||
// end vue-tel-input css end
|
||||
@include mq(xs) {
|
||||
.h1 {
|
||||
font-size: 2rem;
|
||||
line-height: 2.25rem;
|
||||
}
|
||||
.h2 {
|
||||
font-size: 1.625rem;
|
||||
line-height: 1.875rem;
|
||||
}
|
||||
.h3 {
|
||||
font-size: 1.375rem;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
.h4 {
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.375rem;
|
||||
}
|
||||
.body {
|
||||
font-size: 1rem!important;
|
||||
line-height: 1.5rem!important
|
||||
}
|
||||
.v-btn--outlined {
|
||||
border: 1px solid !important;
|
||||
}
|
||||
.textfield-border.v-text-field>.v-input__control>.v-input__slot:before {
|
||||
border-width: 1px 0 0 0 !important;
|
||||
}
|
||||
}
|
||||
@include mq(sm) {
|
||||
.h1 {
|
||||
font-size: 2rem;
|
||||
line-height: 2.25rem;
|
||||
}
|
||||
.h2 {
|
||||
font-size: 1.625rem;
|
||||
line-height: 1.875rem;
|
||||
}
|
||||
.h3 {
|
||||
font-size: 1.375rem;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
.h4 {
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.375rem;
|
||||
}
|
||||
.body {
|
||||
font-size: 1rem!important;
|
||||
line-height: 1.5rem!important
|
||||
}
|
||||
.v-btn--outlined {
|
||||
border: thin solid !important;
|
||||
}
|
||||
.textfield-border.v-text-field>.v-input__control>.v-input__slot:before {
|
||||
border-width: thin 0 0 0 !important;
|
||||
}
|
||||
}
|
||||
@include mq(md) {
|
||||
.h1 {
|
||||
font-size: 2.5rem;
|
||||
line-height: 2.875rem;
|
||||
}
|
||||
.h2 {
|
||||
font-size: 2rem;
|
||||
line-height: 2.25rem;
|
||||
}
|
||||
.h3 {
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
.h4 {
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.375rem;
|
||||
}
|
||||
.body {
|
||||
font-size: 1rem!important;
|
||||
line-height: 1.5rem!important
|
||||
}
|
||||
}
|
||||
@include mq(lg) {
|
||||
.h1 {
|
||||
font-size: 3rem;
|
||||
line-height: 3.375rem;
|
||||
}
|
||||
.h2 {
|
||||
font-size: 2.25rem;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
.h3 {
|
||||
font-size: 1.75rem;
|
||||
line-height: 2.25rem;
|
||||
}
|
||||
.h4 {
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.375rem;
|
||||
}
|
||||
.body {
|
||||
font-size: 1rem!important;
|
||||
line-height: 1.5rem!important
|
||||
}
|
||||
}
|
||||
@include mq(xl) {
|
||||
.h1 {
|
||||
font-size: 3rem;
|
||||
line-height: 3.375rem;
|
||||
}
|
||||
.h2 {
|
||||
font-size: 2.25rem;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
.h3 {
|
||||
font-size: 1.75rem;
|
||||
line-height: 2.25rem;
|
||||
}
|
||||
.h4 {
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.375rem;
|
||||
}
|
||||
.body {
|
||||
font-size: 1rem!important;
|
||||
line-height: 1.5rem!important
|
||||
}
|
||||
}
|
||||
@supports (-webkit-overflow-scrolling: touch) {
|
||||
/* CSS specific to iOS devices */
|
||||
.ios-fill-height {
|
||||
height: -webkit-fill-available;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.button-background.v-btn:before {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
* {
|
||||
text-transform: none !important;
|
||||
}
|
||||
|
||||
.p-absolute {
|
||||
position: absolute!important;
|
||||
}
|
||||
|
||||
// .v-application{
|
||||
// font-family: 'Whyte-Regular'!important;
|
||||
// }
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
// @import '~vuetify/src/styles/settings/_variables.scss';
|
||||
|
||||
|
||||
$body-font-family: 'Whyte-Regular', sans-serif !default;
|
||||
$body-font-family-book: 'Whyte-Book', sans-serif !default;
|
||||
|
|
@ -1956,6 +1956,11 @@
|
|||
resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
|
||||
integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
|
||||
|
||||
"@mdi/font@5.9.55":
|
||||
version "5.9.55"
|
||||
resolved "https://registry.yarnpkg.com/@mdi/font/-/font-5.9.55.tgz#41acd50b88073ded7095fc3029d8712b6e12f38e"
|
||||
integrity sha512-jswRF6q3eq8NWpWiqct6q+6Fg/I7nUhrxYJfiEM8JJpap0wVJLQdbKtyS65GdlK7S7Ytnx3TTi/bmw+tBhkGmg==
|
||||
|
||||
"@types/color-name@^1.1.1":
|
||||
version "1.1.1"
|
||||
resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
|
||||
|
|
|
|||
Loading…
Reference in New Issue