feat(storefront): overhaul theming system and unify SCSS variables
Revamped the theming system with new SCSS variables for consistent styling across light and dark themes. Replaced static color values with dynamic variables for maintainability and improved theme adaptability. Updated components and layouts to use the new variables. - Moved theme plugin logic for optimized handling of theme cookies and attributes. - Enhanced `useThemes` composable for simplified client-side updates and SSR support. - Replaced redundant SCSS color definitions with centralized variables. - Improved page structure by introducing `ui-title` for reusable section headers. - Unified transitions and border-radius for consistent design language. Breaking Changes: Theming system restructured—migrate to `$main`, `$primary`, and related variables for SCSS colors. Remove usage of `--color-*` variables in templates and styles.
This commit is contained in:
parent
8d7685ef67
commit
556354a44d
82 changed files with 841 additions and 1321 deletions
|
|
@ -1,9 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
class="main"
|
class="main"
|
||||||
:style="{ 'padding-top': uiConfig.isHeaderFixed ? '83px': '0' }"
|
:style="{ 'padding-top': uiConfig.isHeaderFixed ? '84px': '0' }"
|
||||||
>
|
>
|
||||||
<nuxt-loading-indicator :color="accentColor" />
|
<nuxt-loading-indicator :color="primaryColor" />
|
||||||
<base-header />
|
<base-header />
|
||||||
<ui-breadcrumbs v-if="uiConfig.showBreadcrumbs && showBreadcrumbs" />
|
<ui-breadcrumbs v-if="uiConfig.showBreadcrumbs && showBreadcrumbs" />
|
||||||
<transition
|
<transition
|
||||||
|
|
@ -134,7 +134,7 @@ if (locale.value !== cookieLocale.value) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const accentColor = ref('');
|
const primaryColor = ref('');
|
||||||
|
|
||||||
const getCssVariable = (name: string): string => {
|
const getCssVariable = (name: string): string => {
|
||||||
if (import.meta.client) {
|
if (import.meta.client) {
|
||||||
|
|
@ -166,7 +166,7 @@ onMounted( async () => {
|
||||||
{ immediate: true }
|
{ immediate: true }
|
||||||
);
|
);
|
||||||
|
|
||||||
accentColor.value = getCssVariable('--accent');
|
primaryColor.value = getCssVariable('--primary');
|
||||||
|
|
||||||
useHead({
|
useHead({
|
||||||
htmlAttrs: {
|
htmlAttrs: {
|
||||||
|
|
@ -184,7 +184,7 @@ onBeforeUnmount(() => {
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.main {
|
.main {
|
||||||
background-color: $light;
|
background-color: $main_hover;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,45 +1,105 @@
|
||||||
$font_default: 'Inter', sans-serif;
|
$font_default: 'Inter', sans-serif;
|
||||||
$default_border_radius: 4px;
|
|
||||||
|
|
||||||
$white: var(--color-neutral-50, #fff);
|
$default_border_radius: 8px;
|
||||||
$light: var(--color-neutral-100, #f8f7fc);
|
$less_border_radius: 4px;
|
||||||
$black: var(--color-neutral-900, #000);
|
|
||||||
|
|
||||||
$accent: var(--color-accent, #111827);
|
$main: var(--main);
|
||||||
$accentDark: var(--color-accent-dark, #242c38);
|
$main_hover: var(--main_hover);
|
||||||
$accentLight: var(--color-accent-light, #465267);
|
$title_bg: var(--title_bg);
|
||||||
$accentDisabled: var(--color-accent-disabled, #826fa2);
|
$primary: var(--primary);
|
||||||
$accentSmooth: var(--color-accent-smooth, #656bd1);
|
$primary_hover: var(--primary_hover);
|
||||||
$accentNeon: var(--color-accent-neon, #F200FF);
|
$primary_dark: var(--primary_dark);
|
||||||
$contrast: var(--color-contrast, #FFC107);
|
$primary_gradient: var(--primary_gradient);
|
||||||
$error: var(--color-error, #f13838);
|
$primary_shadow: var(--primary_shadow);
|
||||||
|
$primary_shadow_hover: var(--primary_shadow_hover);
|
||||||
|
$blackout: var(--blackout);
|
||||||
|
|
||||||
$background: var(--color-background);
|
$secondary: var(--secondary);
|
||||||
$background-secondary: var(--color-background-secondary);
|
$secondary_hover: var(--secondary_hover);
|
||||||
$background-elevated: var(--color-background-elevated);
|
|
||||||
|
|
||||||
$text-primary: var(--color-text-primary);
|
$disabled: var(--disabled);
|
||||||
$text-secondary: var(--color-text-secondary);
|
$disabled_secondary: var(--disabled_secondary);
|
||||||
$text-tertiary: var(--color-text-tertiary);
|
$border: var(--border);
|
||||||
$text-accent: var(--color-text-accent);
|
$border_hover: var(--border_hover);
|
||||||
$text-inverse: var(--color-text-inverse);
|
|
||||||
|
|
||||||
$border: var(--color-border);
|
$text: var(--text);
|
||||||
$border-hover: var(--color-border-hover);
|
$link_primary: var(--link_primary);
|
||||||
$divider: var(--color-divider);
|
$link_primary_hover: var(--link_primary_hover);
|
||||||
|
$link_secondary: var(--link_secondary);
|
||||||
|
$link_secondary_hover: var(--link_secondary_hover);
|
||||||
|
$skeleton: var(--skeleton);
|
||||||
|
|
||||||
$surface: var(--color-surface);
|
$rating: var(--rating);
|
||||||
$surface-hover: var(--color-surface-hover);
|
$success: var(--success);
|
||||||
$surface-active: var(--color-surface-active);
|
$error: var(--error);
|
||||||
|
$info: var(--info);
|
||||||
|
$warning: var(--warning);
|
||||||
|
|
||||||
$success: var(--color-success, #10b981);
|
|
||||||
$warning: var(--color-warning, #f59e0b);
|
|
||||||
$info: var(--color-info, #3b82f6);
|
|
||||||
|
|
||||||
$success-bg: var(--color-success-bg, #d1fae5);
|
:root {
|
||||||
$warning-bg: var(--color-warning-bg, #fef3c7);
|
--main: #fff;
|
||||||
$info-bg: var(--color-info-bg, #dbeafe);
|
--main_hover: #f9fafb;
|
||||||
$error-bg: var(--color-error-bg, #fee2e2);
|
--title_bg: #f8f8f8;
|
||||||
|
--primary: #111827;
|
||||||
|
--primary_hover: #242c38;
|
||||||
|
--primary_dark: #1a1a1a;
|
||||||
|
--primary_gradient: linear-gradient(to bottom, rgba(26, 26, 26, 1) 0%,rgba(31, 41, 55, 1) 100%);
|
||||||
|
--primary_shadow: rgba(0, 0, 0, 0.1);
|
||||||
|
--primary_shadow_hover: rgba(0, 0, 0, 0.3);
|
||||||
|
--blackout: rgba(0, 0, 0, 0.4);
|
||||||
|
|
||||||
$accent-hover: var(--color-accent-hover);
|
--secondary: #374151;
|
||||||
$accent-active: var(--color-accent-active);
|
--secondary_hover: #29323f;
|
||||||
|
|
||||||
|
--disabled: #0a0f1a;
|
||||||
|
--disabled_secondary: #9a9a9a;
|
||||||
|
--border: #e5e7eb;
|
||||||
|
--border_hover: #505052;
|
||||||
|
|
||||||
|
--text: #4b5563;
|
||||||
|
--link_primary: #1f2937;
|
||||||
|
--link_primary_hover: #29323f;
|
||||||
|
--link_secondary: #c2c7ce;
|
||||||
|
--link_secondary_hover: #a4a8ad;
|
||||||
|
--skeleton: rgba(255, 255, 255, 0.61);
|
||||||
|
|
||||||
|
--rating: #facc15;
|
||||||
|
--success: #67c23a;
|
||||||
|
--error: #f56c6c;
|
||||||
|
--info: #909399;
|
||||||
|
--warning: #e6a23c;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme='dark'] {
|
||||||
|
--main: #1a1a1a;
|
||||||
|
--main_hover: #242424;
|
||||||
|
--title_bg: #111111;
|
||||||
|
--primary: #f3f4f6;
|
||||||
|
--primary_hover: #ffffff;
|
||||||
|
--primary_dark: #e5e7eb;
|
||||||
|
--primary_gradient: linear-gradient(to bottom, rgba(243, 244, 246, 1) 0%, rgba(229, 231, 235, 1) 100%);
|
||||||
|
--primary_shadow: rgba(0, 0, 0, 0.5);
|
||||||
|
--primary_shadow_hover: rgba(0, 0, 0, 0.7);
|
||||||
|
--blackout: rgba(0, 0, 0, 0.5);
|
||||||
|
|
||||||
|
--secondary: #9ca3af;
|
||||||
|
--secondary_hover: #d1d5db;
|
||||||
|
|
||||||
|
--disabled: #4b5563;
|
||||||
|
--disabled_secondary: #6b7280;
|
||||||
|
--border: #374151;
|
||||||
|
--border_hover: #4b5563;
|
||||||
|
|
||||||
|
--text: #e5e7eb;
|
||||||
|
--link_primary: #aba7a7;
|
||||||
|
--link_primary_hover: #858282;
|
||||||
|
--link_secondary: #9ca3af;
|
||||||
|
--link_secondary_hover: #cbd5e1;
|
||||||
|
--skeleton: rgba(255, 255, 255, 0.1);
|
||||||
|
|
||||||
|
--rating: #facc15;
|
||||||
|
--success: #67c23a;
|
||||||
|
--error: #f56c6c;
|
||||||
|
--info: #909399;
|
||||||
|
--warning: #e6a23c;
|
||||||
|
}
|
||||||
|
|
@ -4,114 +4,10 @@
|
||||||
@use "global/variables";
|
@use "global/variables";
|
||||||
|
|
||||||
// UI
|
// UI
|
||||||
|
@use "ui/badge";
|
||||||
@use "ui/collapse";
|
@use "ui/collapse";
|
||||||
@use "ui/notification";
|
@use "ui/notification";
|
||||||
@use "ui/rating";
|
@use "ui/rating";
|
||||||
@use "ui/select";
|
@use "ui/select";
|
||||||
|
|
||||||
:root {
|
|
||||||
--color-accent: #111827;
|
|
||||||
--color-accent-dark: #242c38;
|
|
||||||
--color-accent-light: #465267;
|
|
||||||
--color-accent-smooth: #656bd1;
|
|
||||||
--color-accent-neon: #f200ff;
|
|
||||||
--color-contrast: #ffc107;
|
|
||||||
--color-error: #f13838;
|
|
||||||
|
|
||||||
|
|
||||||
--color-neutral-50: #ffffff;
|
|
||||||
--color-neutral-100: #f8f7fc;
|
|
||||||
--color-neutral-200: #f0eefa;
|
|
||||||
--color-neutral-300: #e2dfed;
|
|
||||||
--color-neutral-400: #c5c1d9;
|
|
||||||
--color-neutral-500: #8c8a9e;
|
|
||||||
--color-neutral-600: #5a5869;
|
|
||||||
--color-neutral-700: #3d3b47;
|
|
||||||
--color-neutral-800: #23222a;
|
|
||||||
--color-neutral-900: #000000;
|
|
||||||
|
|
||||||
--color-background: var(--color-neutral-50);
|
|
||||||
--color-background-secondary: var(--color-neutral-100);
|
|
||||||
--color-background-elevated: var(--color-neutral-50);
|
|
||||||
|
|
||||||
--color-text-primary: var(--color-neutral-900);
|
|
||||||
--color-text-secondary: var(--color-neutral-600);
|
|
||||||
--color-text-tertiary: var(--color-neutral-500);
|
|
||||||
--color-text-accent: var(--color-accent);
|
|
||||||
--color-text-inverse: var(--color-neutral-50);
|
|
||||||
|
|
||||||
--color-border: var(--color-neutral-300);
|
|
||||||
--color-border-hover: var(--color-accent-light);
|
|
||||||
--color-divider: var(--color-neutral-200);
|
|
||||||
|
|
||||||
--color-surface: var(--color-neutral-50);
|
|
||||||
--color-surface-hover: var(--color-neutral-100);
|
|
||||||
--color-surface-active: var(--color-neutral-200);
|
|
||||||
|
|
||||||
--color-success: #10b981;
|
|
||||||
--color-warning: #f59e0b;
|
|
||||||
--color-info: #3b82f6;
|
|
||||||
|
|
||||||
--color-success-bg: #d1fae5;
|
|
||||||
--color-warning-bg: #fef3c7;
|
|
||||||
--color-info-bg: #dbeafe;
|
|
||||||
--color-error-bg: #fee2e2;
|
|
||||||
|
|
||||||
--color-accent-hover: var(--color-accent-dark);
|
|
||||||
--color-accent-active: var(--color-accent-smooth);
|
|
||||||
--color-accent-disabled: #c7bfe9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark {
|
|
||||||
--color-accent: #8d7bdb;
|
|
||||||
--color-accent-dark: #6b58c7;
|
|
||||||
--color-accent-light: #b3a9e5;
|
|
||||||
--color-accent-smooth: #7a80e1;
|
|
||||||
--color-accent-neon: #ff1aff;
|
|
||||||
--color-contrast: #ffd54f;
|
|
||||||
--color-error: #ff6b6b;
|
|
||||||
|
|
||||||
--color-neutral-50: #000000;
|
|
||||||
--color-neutral-100: #0f0e14;
|
|
||||||
--color-neutral-200: #1d1b26;
|
|
||||||
--color-neutral-300: #2d2b3a;
|
|
||||||
--color-neutral-400: #4a4858;
|
|
||||||
--color-neutral-500: #6d6b7a;
|
|
||||||
--color-neutral-600: #a19fae;
|
|
||||||
--color-neutral-700: #c9c7d6;
|
|
||||||
--color-neutral-800: #e2e0ef;
|
|
||||||
--color-neutral-900: #ffffff;
|
|
||||||
|
|
||||||
--color-background: var(--color-neutral-100);
|
|
||||||
--color-background-secondary: var(--color-neutral-200);
|
|
||||||
--color-background-elevated: var(--color-neutral-300);
|
|
||||||
|
|
||||||
--color-text-primary: var(--color-neutral-800);
|
|
||||||
--color-text-secondary: var(--color-neutral-600);
|
|
||||||
--color-text-tertiary: var(--color-neutral-500);
|
|
||||||
--color-text-accent: var(--color-accent-light);
|
|
||||||
--color-text-inverse: var(--color-neutral-900);
|
|
||||||
|
|
||||||
--color-border: var(--color-neutral-400);
|
|
||||||
--color-border-hover: var(--color-accent);
|
|
||||||
--color-divider: var(--color-neutral-300);
|
|
||||||
|
|
||||||
--color-surface: var(--color-neutral-200);
|
|
||||||
--color-surface-hover: var(--color-neutral-300);
|
|
||||||
--color-surface-active: var(--color-neutral-400);
|
|
||||||
|
|
||||||
--color-success: #34d399;
|
|
||||||
--color-warning: #fbbf24;
|
|
||||||
--color-info: #60a5fa;
|
|
||||||
|
|
||||||
--color-success-bg: rgba(16, 185, 129, 0.2);
|
|
||||||
--color-warning-bg: rgba(245, 158, 11, 0.2);
|
|
||||||
--color-info-bg: rgba(59, 130, 246, 0.2);
|
|
||||||
--color-error-bg: rgba(239, 68, 68, 0.2);
|
|
||||||
|
|
||||||
--color-accent-hover: var(--color-accent);
|
|
||||||
--color-accent-active: var(--color-accent-dark);
|
|
||||||
--color-accent-disabled: #4a4269;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,7 @@
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border: none;
|
border: none;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
transition: all 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
|
|
@ -38,19 +39,19 @@ button:focus-visible {
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb {
|
::-webkit-scrollbar-thumb {
|
||||||
background: $accent;
|
background: $primary;
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-track {
|
::-webkit-scrollbar-track {
|
||||||
background: $light;
|
background: $main_hover;
|
||||||
}
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
scrollbar-color: $accent $light;
|
scrollbar-color: $primary $main_hover;
|
||||||
}
|
}
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--el-color-primary: #{$accent} !important;
|
--el-color-primary: #{$primary} !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-skeleton__item {
|
.el-skeleton__item {
|
||||||
|
|
|
||||||
5
storefront/app/assets/styles/ui/badge.scss
Normal file
5
storefront/app/assets/styles/ui/badge.scss
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
@use "../global/variables" as *;
|
||||||
|
|
||||||
|
.el-badge__content {
|
||||||
|
background-color: $disabled !important;
|
||||||
|
}
|
||||||
|
|
@ -8,8 +8,8 @@
|
||||||
padding-block: 20px
|
padding-block: 20px
|
||||||
}
|
}
|
||||||
.el-collapse-item {
|
.el-collapse-item {
|
||||||
border-radius: 8px;
|
border-radius: $default_border_radius;
|
||||||
border: 1px solid #e5e7eb;
|
border: 1px solid $border;
|
||||||
}
|
}
|
||||||
.el-collapse-item__header {
|
.el-collapse-item__header {
|
||||||
background-color: transparent !important;
|
background-color: transparent !important;
|
||||||
|
|
@ -18,13 +18,13 @@
|
||||||
font-size: 14px !important;
|
font-size: 14px !important;
|
||||||
font-weight: 600 !important;
|
font-weight: 600 !important;
|
||||||
padding-inline: 8px !important;
|
padding-inline: 8px !important;
|
||||||
color: $accentDark !important;
|
color: $primary_dark !important;
|
||||||
}
|
}
|
||||||
.el-collapse-item__header.focusing:focus:not(:hover) {
|
.el-collapse-item__header.focusing:focus:not(:hover) {
|
||||||
color: $accentDark !important;
|
color: $primary_dark !important;
|
||||||
}
|
}
|
||||||
.el-collapse-item__wrap {
|
.el-collapse-item__wrap {
|
||||||
border-top: 2px solid #e5e7eb;
|
border-top: 2px solid $border;
|
||||||
border-bottom: none !important;
|
border-bottom: none !important;
|
||||||
background-color: transparent !important;
|
background-color: transparent !important;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
@use "../global/variables" as *;
|
@use "../global/variables" as *;
|
||||||
|
|
||||||
.el-notification {
|
.el-notification {
|
||||||
border: 2px solid $accent !important;
|
border: 2px solid $primary !important;
|
||||||
transition: all 0.3s ease !important;
|
transition: all 0.3s ease !important;
|
||||||
|
|
||||||
&__progress {
|
&__progress {
|
||||||
|
|
@ -10,22 +10,35 @@
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 3px;
|
height: 3px;
|
||||||
background-color: $accentDark;
|
background-color: $primary_dark;
|
||||||
animation: progress-animation linear forwards;
|
animation: progress-animation linear forwards;
|
||||||
|
|
||||||
|
&.success {
|
||||||
|
background-color: $success;
|
||||||
|
}
|
||||||
|
&.error {
|
||||||
|
background-color: $error;
|
||||||
|
}
|
||||||
|
&.info {
|
||||||
|
background-color: $info;
|
||||||
|
}
|
||||||
|
&.warning {
|
||||||
|
background-color: $warning;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__button {
|
&__button {
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
padding: 6px 12px;
|
padding: 6px 12px;
|
||||||
background-color: $accent;
|
background-color: $primary;
|
||||||
border-radius: $default_border_radius;
|
border-radius: $less_border_radius;
|
||||||
color: #fff;
|
color: $main;
|
||||||
border: none;
|
border: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-notification__closeBtn {
|
.el-notification__closeBtn {
|
||||||
color: $accent !important;
|
color: $primary !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -4,15 +4,10 @@
|
||||||
height: unset !important;
|
height: unset !important;
|
||||||
}
|
}
|
||||||
.el-rate .el-rate__icon.is-active {
|
.el-rate .el-rate__icon.is-active {
|
||||||
color: #facc15 !important;
|
color: $rating !important;
|
||||||
}
|
}
|
||||||
.el-rate .el-rate__icon {
|
.el-rate .el-rate__icon {
|
||||||
color: #facc15 !important;
|
color: $rating !important;
|
||||||
font-size: 16px !important;
|
font-size: 16px !important;
|
||||||
margin-right: 0 !important;
|
margin-right: 0 !important;
|
||||||
}
|
|
||||||
|
|
||||||
.white .el-rate__icon.is-active {
|
|
||||||
color: $white !important;
|
|
||||||
font-size: 18px !important;
|
|
||||||
}
|
}
|
||||||
|
|
@ -38,10 +38,10 @@ onClickOutside(modalRef, () => closeModal());
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
top: 125px;
|
top: 125px;
|
||||||
background-color: $white;
|
background-color: $main;
|
||||||
width: 600px;
|
width: 600px;
|
||||||
padding: 30px;
|
padding: 30px;
|
||||||
border-radius: $default_border_radius;
|
border-radius: $less_border_radius;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -50,7 +50,7 @@ const encodedCompanyAddress = computed(() => {
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.footer {
|
.footer {
|
||||||
background-color: #1a1a1a;
|
background-color: #000;
|
||||||
|
|
||||||
&__wrapper {
|
&__wrapper {
|
||||||
padding-block: 64px;
|
padding-block: 64px;
|
||||||
|
|
@ -72,15 +72,14 @@ const encodedCompanyAddress = computed(() => {
|
||||||
}
|
}
|
||||||
|
|
||||||
&__logo {
|
&__logo {
|
||||||
transition: 0.2s;
|
color: #fff;
|
||||||
color: $white;
|
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
letter-spacing: 6.7px;
|
letter-spacing: 6.7px;
|
||||||
font-family: 'Playfair Display', sans-serif;
|
font-family: 'Playfair Display', sans-serif;
|
||||||
|
|
||||||
@include hover {
|
@include hover {
|
||||||
text-shadow: 0 0 5px #1a1a1a;
|
text-shadow: 0 0 5px #fff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -104,28 +103,27 @@ const encodedCompanyAddress = computed(() => {
|
||||||
gap: 14px;
|
gap: 14px;
|
||||||
|
|
||||||
& h6 {
|
& h6 {
|
||||||
color: $white;
|
color: $link_primary;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
letter-spacing: -0.5px;
|
letter-spacing: -0.5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
& p, a {
|
& p, a {
|
||||||
transition: 0.2s;
|
color: $link_secondary;
|
||||||
color: #d1d5db;
|
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
letter-spacing: -0.5px;
|
letter-spacing: -0.5px;
|
||||||
|
|
||||||
@include hover {
|
@include hover {
|
||||||
color: #acafb4;
|
color: $link_secondary_hover;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__bottom {
|
&__bottom {
|
||||||
& p {
|
& p {
|
||||||
color: #d1d5db;
|
color: $link_secondary;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
letter-spacing: -0.5px;
|
letter-spacing: -0.5px;
|
||||||
|
|
|
||||||
|
|
@ -82,32 +82,30 @@ const setActiveCategory = (category: ICategory) => {
|
||||||
.catalog {
|
.catalog {
|
||||||
&__button {
|
&__button {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border-radius: $default_border_radius;
|
border-radius: $less_border_radius;
|
||||||
background-color: rgba($accent, 0.2);
|
background-color: rgba($primary, 0.2);
|
||||||
border: 1px solid $accent;
|
border: 1px solid $primary;
|
||||||
padding: 5px 20px;
|
padding: 5px 20px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
transition: 0.2s;
|
|
||||||
|
|
||||||
color: $accent;
|
color: $primary;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
|
||||||
@include hover {
|
@include hover {
|
||||||
background-color: $accent;
|
background-color: $primary;
|
||||||
color: $white;
|
color: $main;
|
||||||
}
|
}
|
||||||
|
|
||||||
& span {
|
& span {
|
||||||
transition: 0.2s;
|
|
||||||
font-size: 26px;
|
font-size: 26px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
background-color: $accent;
|
background-color: $primary;
|
||||||
color: $white;
|
color: $main;
|
||||||
|
|
||||||
& span {
|
& span {
|
||||||
transform: rotate(-180deg);
|
transform: rotate(-180deg);
|
||||||
|
|
@ -125,10 +123,10 @@ const setActiveCategory = (category: ICategory) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.categories {
|
.categories {
|
||||||
border-radius: $default_border_radius;
|
border-radius: $less_border_radius;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color: $white;
|
background-color: $main;
|
||||||
box-shadow: 0 0 15px 1px $accentLight;
|
box-shadow: 0 0 15px 1px $secondary;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-rows: 0fr;
|
grid-template-rows: 0fr;
|
||||||
transition: grid-template-rows 0.2s ease;
|
transition: grid-template-rows 0.2s ease;
|
||||||
|
|
@ -159,13 +157,12 @@ const setActiveCategory = (category: ICategory) => {
|
||||||
& p {
|
& p {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding: 5px 20px;
|
padding: 5px 20px;
|
||||||
transition: 0.2s;
|
|
||||||
|
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
|
||||||
@include hover {
|
@include hover {
|
||||||
color: $accent;
|
color: $primary;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -178,26 +175,25 @@ const setActiveCategory = (category: ICategory) => {
|
||||||
|
|
||||||
& p {
|
& p {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: 0.2s;
|
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
border-left: 3px solid $white;
|
border-left: 3px solid $main;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
|
|
||||||
@include hover {
|
@include hover {
|
||||||
color: $accent;
|
color: $primary;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
border-color: $accent;
|
border-color: $primary;
|
||||||
color: $accent;
|
color: $primary;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__main {
|
&__main {
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
border-left: 2px solid $accentDark;
|
border-left: 2px solid $primary_dark;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
|
|
||||||
&-block {
|
&-block {
|
||||||
|
|
@ -227,7 +223,7 @@ const setActiveCategory = (category: ICategory) => {
|
||||||
height: 2px;
|
height: 2px;
|
||||||
width: 0;
|
width: 0;
|
||||||
transition: all .3s ease;
|
transition: all .3s ease;
|
||||||
background-color: $accent;
|
background-color: $primary;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include hover {
|
@include hover {
|
||||||
|
|
@ -246,12 +242,11 @@ const setActiveCategory = (category: ICategory) => {
|
||||||
|
|
||||||
& a {
|
& a {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: 0.1s;
|
|
||||||
|
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
|
||||||
@include hover {
|
@include hover {
|
||||||
color: $accent;
|
color: $primary;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -61,12 +61,13 @@
|
||||||
size="20"
|
size="20"
|
||||||
/>
|
/>
|
||||||
<ui-language-switcher />
|
<ui-language-switcher />
|
||||||
<el-badge :value="productsInWishlistQuantity" color="#111827">
|
<ui-theme-toggle />
|
||||||
|
<el-badge :value="productsInWishlistQuantity">
|
||||||
<nuxt-link-locale to="/wishlist">
|
<nuxt-link-locale to="/wishlist">
|
||||||
<icon class="header__block-wishlist" name="material-symbols:favorite-rounded" size="20" />
|
<icon class="header__block-wishlist" name="material-symbols:favorite-rounded" size="20" />
|
||||||
</nuxt-link-locale>
|
</nuxt-link-locale>
|
||||||
</el-badge>
|
</el-badge>
|
||||||
<el-badge :value="productsInCartQuantity" color="#111827">
|
<el-badge :value="productsInCartQuantity">
|
||||||
<nuxt-link-locale to="/cart">
|
<nuxt-link-locale to="/cart">
|
||||||
<icon class="header__block-cart" name="bx:bxs-shopping-bag" size="20" />
|
<icon class="header__block-cart" name="bx:bxs-shopping-bag" size="20" />
|
||||||
</nuxt-link-locale>
|
</nuxt-link-locale>
|
||||||
|
|
@ -173,16 +174,8 @@ const redirectTo = (to) => {
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
background-color: rgba(255, 255, 255, 0.9);
|
background-color: $main;
|
||||||
border-bottom: 1px solid #f3f4f6;
|
border-bottom: 1px solid $border;
|
||||||
|
|
||||||
&__no-search {
|
|
||||||
padding-inline: 75px;
|
|
||||||
|
|
||||||
& .header__inner {
|
|
||||||
gap: 75px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__fixed {
|
&__fixed {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
@ -194,6 +187,7 @@ const redirectTo = (to) => {
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
gap: 25px;
|
gap: 25px;
|
||||||
padding-block: 25px;
|
padding-block: 25px;
|
||||||
|
background-color: $main;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__inner {
|
&__inner {
|
||||||
|
|
@ -211,15 +205,14 @@ const redirectTo = (to) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
&__logo {
|
&__logo {
|
||||||
transition: 0.2s;
|
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
letter-spacing: 6.7px;
|
letter-spacing: 6.7px;
|
||||||
font-family: 'Playfair Display', sans-serif;
|
font-family: 'Playfair Display', sans-serif;
|
||||||
color: #1a1a1a;
|
color: $primary_dark;
|
||||||
|
|
||||||
@include hover {
|
@include hover {
|
||||||
text-shadow: 0 0 5px #1a1a1a;
|
text-shadow: 0 0 5px $primary_dark;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -230,8 +223,7 @@ const redirectTo = (to) => {
|
||||||
|
|
||||||
&-item {
|
&-item {
|
||||||
position: relative;
|
position: relative;
|
||||||
transition: 0.2s;
|
color: $link_primary;
|
||||||
color: #1f2937;
|
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
letter-spacing: -0.5px;
|
letter-spacing: -0.5px;
|
||||||
|
|
@ -244,7 +236,7 @@ const redirectTo = (to) => {
|
||||||
height: 2px;
|
height: 2px;
|
||||||
width: 0;
|
width: 0;
|
||||||
transition: all .3s ease;
|
transition: all .3s ease;
|
||||||
background-color: #1f2937;
|
background-color: $link_primary;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.active::after {
|
&.active::after {
|
||||||
|
|
@ -273,55 +265,50 @@ const redirectTo = (to) => {
|
||||||
&-search {
|
&-search {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: block;
|
display: block;
|
||||||
transition: 0.2s;
|
color: $secondary;
|
||||||
color: #374151;
|
|
||||||
|
|
||||||
@include hover {
|
@include hover {
|
||||||
color: #29323f;
|
color: $secondary_hover;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-wishlist {
|
&-wishlist {
|
||||||
display: block;
|
display: block;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: 0.2s;
|
color: $secondary;
|
||||||
color: #374151;
|
|
||||||
|
|
||||||
@include hover {
|
@include hover {
|
||||||
color: #29323f;
|
color: $secondary_hover;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-cart {
|
&-cart {
|
||||||
display: block;
|
display: block;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: 0.2s;
|
color: $secondary;
|
||||||
color: #374151;
|
|
||||||
|
|
||||||
@include hover {
|
@include hover {
|
||||||
color: #29323f;
|
color: $secondary_hover;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-auth {
|
&-auth {
|
||||||
transition: 0.2s;
|
border-bottom: 1px solid $secondary;
|
||||||
border-bottom: 1px solid #111827;
|
|
||||||
padding-bottom: 2px;
|
padding-bottom: 2px;
|
||||||
color: #111827;
|
color: $secondary;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
letter-spacing: -0.5px;
|
letter-spacing: -0.5px;
|
||||||
|
|
||||||
@include hover {
|
@include hover {
|
||||||
color: #424c62;
|
color: $secondary_hover;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-avatar {
|
&-avatar {
|
||||||
width: 28px;
|
width: 28px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
border: 1px solid #374151;
|
border: 1px solid $secondary;
|
||||||
transition: 0.2s;
|
|
||||||
|
|
||||||
& span {
|
& span {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -336,10 +323,10 @@ const redirectTo = (to) => {
|
||||||
width: 28px;
|
width: 28px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
border: 1px solid #374151;
|
border: 1px solid $secondary;
|
||||||
transition: 0.2s;
|
|
||||||
|
|
||||||
& span {
|
& span {
|
||||||
|
color: $primary;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -350,17 +337,20 @@ const redirectTo = (to) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
&__search {
|
&__search {
|
||||||
position: absolute;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
top: 100%;
|
top: 100%;
|
||||||
left: 0;
|
left: 0;
|
||||||
overflow: hidden;
|
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-rows: 0fr;
|
grid-template-rows: 0fr;
|
||||||
transition: grid-template-rows 0.2s ease;
|
//transition: grid-template-rows 0.2s ease;
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
grid-template-rows: 1fr;
|
grid-template-rows: 1fr;
|
||||||
|
opacity: 1;
|
||||||
|
visibility: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
& > * {
|
& > * {
|
||||||
|
|
|
||||||
|
|
@ -33,16 +33,15 @@ const props = defineProps<{
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 20px;
|
gap: 20px;
|
||||||
background-color: $white;
|
background-color: $main;
|
||||||
border-radius: 8px;
|
border-radius: $default_border_radius;
|
||||||
border: 1px solid #e5e7eb;
|
border: 1px solid $border;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding: 23px;
|
padding: 23px;
|
||||||
transition: 0.2s;
|
|
||||||
|
|
||||||
@include hover {
|
@include hover {
|
||||||
box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.3);
|
box-shadow: 0 0 10px 2px $primary_shadow_hover;
|
||||||
border-color: #505052;
|
border-color: $border_hover;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__image {
|
&__image {
|
||||||
|
|
@ -54,13 +53,13 @@ const props = defineProps<{
|
||||||
&-placeholder {
|
&-placeholder {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
aspect-ratio: 1;
|
aspect-ratio: 1;
|
||||||
background-color: $accentLight;
|
background-color: $primary;
|
||||||
border-radius: $default_border_radius;
|
border-radius: $less_border_radius;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
& p {
|
& p {
|
||||||
color: #1a1a1a;
|
color: $primary_dark;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
|
|
||||||
|
|
@ -33,16 +33,15 @@ const props = defineProps<{
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 20px;
|
gap: 20px;
|
||||||
background-color: $white;
|
background-color: $main;
|
||||||
border-radius: 8px;
|
border-radius: $default_border_radius;
|
||||||
border: 1px solid #e5e7eb;
|
border: 1px solid $border;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding: 23px;
|
padding: 23px;
|
||||||
transition: 0.2s;
|
|
||||||
|
|
||||||
@include hover {
|
@include hover {
|
||||||
box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.3);
|
box-shadow: 0 0 10px 2px $primary_shadow_hover;
|
||||||
border-color: #505052;
|
border-color: $border_hover;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__image {
|
&__image {
|
||||||
|
|
@ -54,13 +53,13 @@ const props = defineProps<{
|
||||||
&-placeholder {
|
&-placeholder {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
aspect-ratio: 1;
|
aspect-ratio: 1;
|
||||||
background-color: $accentLight;
|
background-color: $primary;
|
||||||
border-radius: $default_border_radius;
|
border-radius: $less_border_radius;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
& p {
|
& p {
|
||||||
color: #1a1a1a;
|
color: $primary_dark;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
|
|
||||||
|
|
@ -125,20 +125,19 @@ const statusColor = (status: string) => {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 5px;
|
gap: 5px;
|
||||||
|
|
||||||
color: #4b5563;
|
color: $secondary;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
|
|
||||||
&.status {
|
&.status {
|
||||||
border-radius: $default_border_radius;
|
border-radius: $less_border_radius;
|
||||||
padding: 3px 7px;
|
padding: 3px 7px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-icon {
|
&-icon {
|
||||||
transition: 0.2s;
|
color: $secondary;
|
||||||
color: #4b5563;
|
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
transform: rotate(-180deg);
|
transform: rotate(-180deg);
|
||||||
|
|
@ -162,7 +161,7 @@ const statusColor = (status: string) => {
|
||||||
& div {
|
& div {
|
||||||
& div {
|
& div {
|
||||||
padding-top: 10px;
|
padding-top: 10px;
|
||||||
border-top: 1px solid #e5e7eb;
|
border-top: 1px solid $border;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
@ -177,12 +176,12 @@ const statusColor = (status: string) => {
|
||||||
|
|
||||||
& img {
|
& img {
|
||||||
height: 65px;
|
height: 65px;
|
||||||
border-radius: $default_border_radius;
|
border-radius: $less_border_radius;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
& p {
|
& p {
|
||||||
color: #4b5563;
|
color: $secondary;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
@ -202,7 +201,7 @@ const statusColor = (status: string) => {
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding-bottom: 15px;
|
padding-bottom: 15px;
|
||||||
border-bottom: 2px solid #e5e7eb;
|
border-bottom: 2px solid $border;
|
||||||
|
|
||||||
&-left {
|
&-left {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -211,11 +210,11 @@ const statusColor = (status: string) => {
|
||||||
|
|
||||||
& img {
|
& img {
|
||||||
height: 150px;
|
height: 150px;
|
||||||
border-radius: $default_border_radius;
|
border-radius: $less_border_radius;
|
||||||
}
|
}
|
||||||
|
|
||||||
& p {
|
& p {
|
||||||
color: #4b5563;
|
color: $secondary;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
@ -227,13 +226,13 @@ const statusColor = (status: string) => {
|
||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
|
|
||||||
& h6 {
|
& h6 {
|
||||||
color: #4b5563;
|
color: $secondary;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
& p {
|
& p {
|
||||||
color: #4b5563;
|
color: $secondary;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -22,7 +22,12 @@ const {t} = useI18n();
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
|
|
||||||
&__title {
|
&__title {
|
||||||
color: #1a1a1a;
|
word-break: break-all;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-line-clamp: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
color: $primary_dark;
|
||||||
font-family: "Playfair Display", sans-serif;
|
font-family: "Playfair Display", sans-serif;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
|
@ -32,8 +37,7 @@ const {t} = useI18n();
|
||||||
&__button {
|
&__button {
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
position: relative;
|
position: relative;
|
||||||
color: #1a1a1a;
|
color: $primary_dark;
|
||||||
transition: 0.2s;
|
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
letter-spacing: -0.5px;
|
letter-spacing: -0.5px;
|
||||||
|
|
@ -46,7 +50,7 @@ const {t} = useI18n();
|
||||||
height: 2px;
|
height: 2px;
|
||||||
width: 0;
|
width: 0;
|
||||||
transition: all .3s ease;
|
transition: all .3s ease;
|
||||||
background-color: #1f2937;
|
background-color: $primary_dark;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.active::after {
|
&.active::after {
|
||||||
|
|
|
||||||
|
|
@ -108,6 +108,15 @@
|
||||||
>
|
>
|
||||||
{{ t('buttons.addToCart') }}
|
{{ t('buttons.addToCart') }}
|
||||||
</ui-button>
|
</ui-button>
|
||||||
|
<ui-button
|
||||||
|
:type="'button'"
|
||||||
|
class="card__bottom-button"
|
||||||
|
:style="'secondary'"
|
||||||
|
@click="buyProduct(product.uuid)"
|
||||||
|
:isLoading="buyLoading"
|
||||||
|
>
|
||||||
|
{{ t('buttons.buyNow') }}
|
||||||
|
</ui-button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -120,6 +129,7 @@ import { Swiper, SwiperSlide } from 'swiper/vue';
|
||||||
import { EffectFade, Pagination } from 'swiper/modules';
|
import { EffectFade, Pagination } from 'swiper/modules';
|
||||||
import {useWishlistOverwrite} from '@composables/wishlist';
|
import {useWishlistOverwrite} from '@composables/wishlist';
|
||||||
import {useOrderOverwrite} from '@composables/orders';
|
import {useOrderOverwrite} from '@composables/orders';
|
||||||
|
import {useProductBuy} from "@composables/products";
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
product: IProduct;
|
product: IProduct;
|
||||||
|
|
@ -134,6 +144,7 @@ const { $appHelpers } = useNuxtApp();
|
||||||
|
|
||||||
const { overwriteWishlist } = useWishlistOverwrite();
|
const { overwriteWishlist } = useWishlistOverwrite();
|
||||||
const { addLoading, removeLoading, overwriteOrder } = useOrderOverwrite();
|
const { addLoading, removeLoading, overwriteOrder } = useOrderOverwrite();
|
||||||
|
const { buyProduct, loading: buyLoading } = useProductBuy();
|
||||||
|
|
||||||
const cookieWishlist = useCookie($appHelpers.COOKIES_WISHLIST_KEY, {
|
const cookieWishlist = useCookie($appHelpers.COOKIES_WISHLIST_KEY, {
|
||||||
default: () => [],
|
default: () => [],
|
||||||
|
|
@ -211,11 +222,10 @@ function goTo(index: number) {
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.card {
|
.card {
|
||||||
border-radius: 8px;
|
border-radius: $default_border_radius;
|
||||||
border: 1px solid #e5e7eb;
|
border: 1px solid $border;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color: $white;
|
background-color: $main;
|
||||||
transition: 0.2s;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -281,8 +291,8 @@ function goTo(index: number) {
|
||||||
}
|
}
|
||||||
|
|
||||||
@include hover {
|
@include hover {
|
||||||
border-color: #b7b8bb;
|
border-color: $border_hover;
|
||||||
box-shadow: 0 0 10px 1px #e5e7eb;
|
box-shadow: 0 0 10px 1px $border;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__wrapper {
|
&__wrapper {
|
||||||
|
|
@ -332,7 +342,7 @@ function goTo(index: number) {
|
||||||
&-placeholder {
|
&-placeholder {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 200px;
|
height: 200px;
|
||||||
background-color: $accentLight;
|
background-color: $primary;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -353,14 +363,14 @@ function goTo(index: number) {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
letter-spacing: -0.2px;
|
letter-spacing: -0.2px;
|
||||||
color: #6b7280;
|
color: $text;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__price {
|
&__price {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
letter-spacing: -0.5px;
|
letter-spacing: -0.5px;
|
||||||
color: #1a1a1a;
|
color: $primary_dark;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__rating {
|
&__rating {
|
||||||
|
|
@ -368,10 +378,12 @@ function goTo(index: number) {
|
||||||
}
|
}
|
||||||
|
|
||||||
&__name {
|
&__name {
|
||||||
|
word-break: break-all;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-line-clamp: 1;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
color: $primary_dark;
|
||||||
white-space: nowrap;
|
|
||||||
color: $black;
|
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
letter-spacing: -0.5px;
|
letter-spacing: -0.5px;
|
||||||
|
|
@ -379,8 +391,8 @@ function goTo(index: number) {
|
||||||
|
|
||||||
&__quantity {
|
&__quantity {
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
background-color: rgba($contrast, 0.5);
|
background-color: rgba($secondary, 0.5);
|
||||||
border-radius: $default_border_radius;
|
border-radius: $less_border_radius;
|
||||||
padding: 5px 10px;
|
padding: 5px 10px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
@ -388,22 +400,21 @@ function goTo(index: number) {
|
||||||
&__wishlist {
|
&__wishlist {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
background-color: $white;
|
background-color: $main;
|
||||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
|
box-shadow: 0 2px 4px 0 $primary_shadow;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 16px;
|
top: 16px;
|
||||||
right: 16px;
|
right: 16px;
|
||||||
z-index: 3;
|
z-index: 3;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
transition: 0.2s;
|
|
||||||
|
|
||||||
@include hover {
|
@include hover {
|
||||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3);
|
box-shadow: 0 2px 4px 0 $primary_shadow_hover;
|
||||||
}
|
}
|
||||||
|
|
||||||
& span {
|
& span {
|
||||||
color: #4b5563;
|
color: $secondary;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -411,14 +422,13 @@ function goTo(index: number) {
|
||||||
&__bottom {
|
&__bottom {
|
||||||
&-inner {
|
&-inner {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
flex-direction: column;
|
||||||
justify-content: space-between;
|
gap: 10px;
|
||||||
gap: 5px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&-button {
|
&-button {
|
||||||
padding-block: 10px !important;
|
padding-block: 10px !important;
|
||||||
border-radius: 4px;
|
border-radius: $less_border_radius;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-wishlist {
|
&-wishlist {
|
||||||
|
|
@ -426,17 +436,16 @@ function goTo(index: number) {
|
||||||
width: 34px;
|
width: 34px;
|
||||||
height: 34px;
|
height: 34px;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
background-color: $accent;
|
background-color: $primary;
|
||||||
border-radius: $default_border_radius;
|
border-radius: $less_border_radius;
|
||||||
display: grid;
|
display: grid;
|
||||||
place-items: center;
|
place-items: center;
|
||||||
transition: 0.2s;
|
|
||||||
|
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
color: $white;
|
color: $main;
|
||||||
|
|
||||||
@include hover {
|
@include hover {
|
||||||
background-color: $accentLight;
|
background-color: $primary_hover;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -444,8 +453,8 @@ function goTo(index: number) {
|
||||||
|
|
||||||
.tools {
|
.tools {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-radius: 4px;
|
border-radius: $less_border_radius;
|
||||||
background-color: #111827;
|
background-color: $primary;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr 2fr 1fr;
|
grid-template-columns: 1fr 2fr 1fr;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
|
|
@ -458,31 +467,30 @@ function goTo(index: number) {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
&-count {
|
&-count {
|
||||||
border-left: 1px solid $accent;
|
border-left: 1px solid $primary_hover;
|
||||||
border-right: 1px solid $accent;
|
border-right: 1px solid $primary_hover;
|
||||||
|
|
||||||
color: $white;
|
color: $main;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-button {
|
&-button {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background-color: #111827;
|
background-color: $primary;
|
||||||
border-radius: 4px 0 0 4px;
|
border-radius: $less_border_radius 0 0 $less_border_radius;
|
||||||
transition: 0.2s;
|
|
||||||
|
|
||||||
color: $white;
|
color: $main;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
|
||||||
@include hover {
|
@include hover {
|
||||||
background-color: #222c41;
|
background-color: $primary_hover;
|
||||||
color: $white;
|
color: $main;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
border-radius: 0 4px 4px 0;
|
border-radius: 0 $less_border_radius $less_border_radius 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -499,13 +507,12 @@ function goTo(index: number) {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 24px;
|
width: 24px;
|
||||||
height: 2px;
|
height: 2px;
|
||||||
background-color: rgba($accentDark, 0.3);
|
background-color: rgba($primary_dark, 0.3);
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transition: 0.2s;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.swiper-pagination-line--active) {
|
:deep(.swiper-pagination-line--active) {
|
||||||
background-color: $accentDark;
|
background-color: $primary_dark;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -170,9 +170,9 @@ const codePreview = computed(() => {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
inset: 100px;
|
inset: 100px;
|
||||||
background-color: #0d0d0d;
|
background-color: $primary_dark;
|
||||||
padding: 50px;
|
padding: 50px;
|
||||||
border-radius: $default_border_radius;
|
border-radius: $less_border_radius;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
|
|
@ -191,9 +191,9 @@ const codePreview = computed(() => {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 40px;
|
font-size: 40px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
text-shadow: 0 0 5px $accentNeon;
|
text-shadow: 0 0 5px $primary_shadow;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
color: $accentNeon;
|
color: $text;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__inner {
|
&__inner {
|
||||||
|
|
@ -205,7 +205,7 @@ const codePreview = computed(() => {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 50px;
|
gap: 50px;
|
||||||
padding: 10px 20px;
|
padding: 10px 20px;
|
||||||
scrollbar-color: $accentNeon transparent;
|
scrollbar-color: $text transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__block {
|
&__block {
|
||||||
|
|
@ -218,10 +218,10 @@ const codePreview = computed(() => {
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
padding-bottom: 5px;
|
padding-bottom: 5px;
|
||||||
border-bottom: 2px solid $accentNeon;
|
border-bottom: 2px solid $text;
|
||||||
color: $accentNeon;
|
color: $text;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
text-shadow: 0 0 5px $accentNeon;
|
text-shadow: 0 0 5px $text;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
}
|
}
|
||||||
|
|
@ -233,7 +233,7 @@ const codePreview = computed(() => {
|
||||||
|
|
||||||
& p {
|
& p {
|
||||||
padding-left: 50px;
|
padding-left: 50px;
|
||||||
color: #8c8c8c;
|
color: $text;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
@ -248,19 +248,19 @@ const codePreview = computed(() => {
|
||||||
|
|
||||||
&-wrapper {
|
&-wrapper {
|
||||||
position: relative;
|
position: relative;
|
||||||
background-color: #1a1a1a;
|
background-color: $primary_dark;
|
||||||
border-radius: $default_border_radius;
|
border-radius: $less_border_radius;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
border: 1px solid rgba($accentNeon, 0.3);
|
border: 1px solid rgba($text, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
&-code {
|
&-code {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: #f8f8f2;
|
color: $main_hover;
|
||||||
font-family: 'Fira Code', 'Courier New', monospace;
|
font-family: 'Fira Code', 'Courier New', monospace;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
white-space: pre-wrap;
|
main-space: pre-wrap;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
|
|
||||||
.language-typescript {
|
.language-typescript {
|
||||||
|
|
@ -298,7 +298,7 @@ const codePreview = computed(() => {
|
||||||
}
|
}
|
||||||
|
|
||||||
&-text {
|
&-text {
|
||||||
color: #8c8c8c;
|
color: $text;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
@ -306,7 +306,7 @@ const codePreview = computed(() => {
|
||||||
}
|
}
|
||||||
|
|
||||||
&__buttons {
|
&__buttons {
|
||||||
border-top: 1px solid $white;
|
border-top: 1px solid $main;
|
||||||
padding-top: 25px;
|
padding-top: 25px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
|
||||||
|
|
@ -23,11 +23,10 @@ const props = defineProps<{
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
transition: 0.2s;
|
border: 1px solid $text;
|
||||||
border: 1px solid $accentNeon;
|
box-shadow: 0 0 10px 1px $text;
|
||||||
box-shadow: 0 0 10px 1px $accentNeon;
|
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
border-radius: $default_border_radius;
|
border-radius: $less_border_radius;
|
||||||
padding: 7px 15px;
|
padding: 7px 15px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -35,31 +34,31 @@ const props = defineProps<{
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
|
||||||
color: $accentNeon;
|
color: $text;
|
||||||
text-shadow: 0 0 10px $accentNeon;
|
text-shadow: 0 0 10px $text;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
|
||||||
@include hover {
|
@include hover {
|
||||||
background-color: $accentNeon;
|
background-color: $text;
|
||||||
color: $white;
|
color: $main;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
background-color: $accentNeon;
|
background-color: $text;
|
||||||
color: $white;
|
color: $main;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:disabled {
|
&:disabled {
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
color: #fff;
|
color: $main;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:disabled:hover, &.active {
|
&:disabled:hover, &.active {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
color: #fff;
|
color: $main;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__loader {
|
&__loader {
|
||||||
|
|
|
||||||
|
|
@ -52,7 +52,7 @@ defineEmits<{
|
||||||
&__box {
|
&__box {
|
||||||
width: 1.5em;
|
width: 1.5em;
|
||||||
height: 1.5em;
|
height: 1.5em;
|
||||||
border: 2px solid $accentNeon;
|
border: 2px solid $text;
|
||||||
position: relative;
|
position: relative;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
|
|
@ -74,7 +74,7 @@ defineEmits<{
|
||||||
left: 50%;
|
left: 50%;
|
||||||
width: 60%;
|
width: 60%;
|
||||||
height: 60%;
|
height: 60%;
|
||||||
background-color: $accentNeon;
|
background-color: $text;
|
||||||
transform: translate(-50%, -50%) scale(0);
|
transform: translate(-50%, -50%) scale(0);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
|
transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
|
||||||
|
|
@ -82,7 +82,7 @@ defineEmits<{
|
||||||
}
|
}
|
||||||
|
|
||||||
&__label {
|
&__label {
|
||||||
color: $white;
|
color: $main;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
|
|
@ -100,12 +100,12 @@ defineEmits<{
|
||||||
}
|
}
|
||||||
|
|
||||||
.checkbox input:checked ~ .checkbox__label {
|
.checkbox input:checked ~ .checkbox__label {
|
||||||
color: $accentNeon;
|
color: $text;
|
||||||
text-shadow: 0 0 8px $accentNeon;
|
text-shadow: 0 0 8px $text;
|
||||||
}
|
}
|
||||||
|
|
||||||
.checkbox:hover .checkbox__box {
|
.checkbox:hover .checkbox__box {
|
||||||
box-shadow: 0 0 10px $accentNeon;
|
box-shadow: 0 0 10px $text;
|
||||||
}
|
}
|
||||||
|
|
||||||
.checkbox:hover .checkbox__label::before,
|
.checkbox:hover .checkbox__label::before,
|
||||||
|
|
@ -116,17 +116,17 @@ defineEmits<{
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: #050505;
|
background-color: $primary_dark;
|
||||||
}
|
}
|
||||||
|
|
||||||
.checkbox:hover .checkbox__label::before {
|
.checkbox:hover .checkbox__label::before {
|
||||||
color: #a855f7;
|
color: $text;
|
||||||
animation: glitch-anim-text var(--glitch-anim-duration)
|
animation: glitch-anim-text var(--glitch-anim-duration)
|
||||||
cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
|
cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
|
||||||
}
|
}
|
||||||
|
|
||||||
.checkbox:hover .checkbox__label::after {
|
.checkbox:hover .checkbox__label::after {
|
||||||
color: $accentNeon;
|
color: $text;
|
||||||
animation: glitch-anim-text var(--glitch-anim-duration)
|
animation: glitch-anim-text var(--glitch-anim-duration)
|
||||||
cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both;
|
cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -92,11 +92,11 @@ async function handleContactUs() {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 24px;
|
gap: 24px;
|
||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
border: 1px solid #e5e7eb;
|
border: 1px solid $border;
|
||||||
padding: 32px;
|
padding: 32px;
|
||||||
|
|
||||||
&__title {
|
&__title {
|
||||||
color: #1a1a1a;
|
color: $primary_dark;
|
||||||
font-family: "Playfair Display", sans-serif;
|
font-family: "Playfair Display", sans-serif;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
|
|
|
||||||
|
|
@ -108,7 +108,7 @@ async function handleLogin() {
|
||||||
}
|
}
|
||||||
|
|
||||||
&__title {
|
&__title {
|
||||||
color: #111827;
|
color: $primary;
|
||||||
font-family: "Playfair Display", sans-serif;
|
font-family: "Playfair Display", sans-serif;
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
|
|
@ -117,7 +117,7 @@ async function handleLogin() {
|
||||||
|
|
||||||
&__subtitle {
|
&__subtitle {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #4b5563;
|
color: $text;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
letter-spacing: -0.5px;
|
letter-spacing: -0.5px;
|
||||||
|
|
@ -142,7 +142,7 @@ async function handleLogin() {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
letter-spacing: -0.5px;
|
letter-spacing: -0.5px;
|
||||||
color: #6b7280;
|
color: $text;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -77,7 +77,7 @@ async function handleReset() {
|
||||||
}
|
}
|
||||||
|
|
||||||
&__title {
|
&__title {
|
||||||
color: #111827;
|
color: $primary;
|
||||||
font-family: "Playfair Display", sans-serif;
|
font-family: "Playfair Display", sans-serif;
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
|
|
@ -86,7 +86,7 @@ async function handleReset() {
|
||||||
|
|
||||||
&__subtitle {
|
&__subtitle {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #4b5563;
|
color: $text;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
letter-spacing: -0.5px;
|
letter-spacing: -0.5px;
|
||||||
|
|
|
||||||
|
|
@ -182,7 +182,7 @@ async function handleRegister() {
|
||||||
}
|
}
|
||||||
|
|
||||||
&__title {
|
&__title {
|
||||||
color: #111827;
|
color: $primary;
|
||||||
font-family: "Playfair Display", sans-serif;
|
font-family: "Playfair Display", sans-serif;
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
|
|
@ -191,7 +191,7 @@ async function handleRegister() {
|
||||||
|
|
||||||
&__subtitle {
|
&__subtitle {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #4b5563;
|
color: $text;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
letter-spacing: -0.5px;
|
letter-spacing: -0.5px;
|
||||||
|
|
@ -218,11 +218,10 @@ async function handleRegister() {
|
||||||
}
|
}
|
||||||
|
|
||||||
&__link {
|
&__link {
|
||||||
transition: 0.2s;
|
color: $primary;
|
||||||
color: #111827;
|
|
||||||
|
|
||||||
@include hover {
|
@include hover {
|
||||||
color: #2b3752;
|
color: $primary_hover;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -234,7 +233,7 @@ async function handleRegister() {
|
||||||
|
|
||||||
& p {
|
& p {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #4b5563;
|
color: $text;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
letter-spacing: -0.5px;
|
letter-spacing: -0.5px;
|
||||||
|
|
|
||||||
|
|
@ -82,7 +82,7 @@ async function handleReset() {
|
||||||
}
|
}
|
||||||
|
|
||||||
&__title {
|
&__title {
|
||||||
color: #111827;
|
color: $primary;
|
||||||
font-family: "Playfair Display", sans-serif;
|
font-family: "Playfair Display", sans-serif;
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
|
|
@ -91,7 +91,7 @@ async function handleReset() {
|
||||||
|
|
||||||
&__subtitle {
|
&__subtitle {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #4b5563;
|
color: $text;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
letter-spacing: -0.5px;
|
letter-spacing: -0.5px;
|
||||||
|
|
|
||||||
|
|
@ -27,10 +27,10 @@ const {t} = useI18n();
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.ad {
|
.ad {
|
||||||
&__wrapper {
|
&__wrapper {
|
||||||
background: linear-gradient(to bottom, rgba(26, 26, 26, 1) 0%,rgba(31, 41, 55, 1) 100%);
|
background: $primary_gradient;
|
||||||
border-radius: 8px;
|
border-radius: $default_border_radius;
|
||||||
padding: 32px 32px 32px 50px;
|
padding: 32px 32px 32px 50px;
|
||||||
display: flex;
|
display: flex !important;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
@ -43,7 +43,7 @@ const {t} = useI18n();
|
||||||
|
|
||||||
&__title {
|
&__title {
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
color: $white;
|
color: $main;
|
||||||
font-family: "Playfair Display", sans-serif;
|
font-family: "Playfair Display", sans-serif;
|
||||||
font-size: 36px;
|
font-size: 36px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
|
|
@ -51,14 +51,14 @@ const {t} = useI18n();
|
||||||
}
|
}
|
||||||
|
|
||||||
&__subtext {
|
&__subtext {
|
||||||
color: $white;
|
color: $main;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
letter-spacing: -0.5px;
|
letter-spacing: -0.5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__text {
|
&__text {
|
||||||
color: #d1d5db;
|
color: $border;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
letter-spacing: -0.5px;
|
letter-spacing: -0.5px;
|
||||||
|
|
@ -67,18 +67,18 @@ const {t} = useI18n();
|
||||||
&__button {
|
&__button {
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
background-color: $white;
|
background-color: $main;
|
||||||
padding: 15px 35px;
|
padding: 15px 35px;
|
||||||
transition: 0.2s;
|
|
||||||
|
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
color: #1a1a1a;
|
color: $primary_dark;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
letter-spacing: -0.1px;
|
letter-spacing: -0.1px;
|
||||||
|
|
||||||
@include hover {
|
@include hover {
|
||||||
background-color: #cbcbcb;
|
background-color: $primary_dark;
|
||||||
|
color: $main;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -41,7 +41,7 @@ const filteredPosts = computed(() => {
|
||||||
}
|
}
|
||||||
|
|
||||||
&__title {
|
&__title {
|
||||||
color: $black;
|
color: $primary_dark;
|
||||||
font-family: "Playfair Display", sans-serif;
|
font-family: "Playfair Display", sans-serif;
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
|
|
||||||
|
|
@ -28,20 +28,19 @@ const props = defineProps<{
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.brands {
|
.brands {
|
||||||
background-color: #e5e7eb;
|
background-color: $border;
|
||||||
padding-block: 65px;
|
padding-block: 65px;
|
||||||
|
|
||||||
&__item {
|
&__item {
|
||||||
transition: 0.2s;
|
|
||||||
margin-right: 65px;
|
margin-right: 65px;
|
||||||
color: #4b5563;
|
color: $text;
|
||||||
font-family: "Playfair Display", sans-serif;
|
font-family: "Playfair Display", sans-serif;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
letter-spacing: 1.9px;
|
letter-spacing: 1.9px;
|
||||||
|
|
||||||
@include hover {
|
@include hover {
|
||||||
text-shadow: 0 0 10px #1a1a1a;
|
text-shadow: 0 0 10px $primary_dark;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -57,7 +57,7 @@ const categories = computed(() => categoryStore.categories);
|
||||||
}
|
}
|
||||||
|
|
||||||
&__title {
|
&__title {
|
||||||
color: $black;
|
color: $primary_dark;
|
||||||
font-family: "Playfair Display", sans-serif;
|
font-family: "Playfair Display", sans-serif;
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
|
@ -81,7 +81,7 @@ const categories = computed(() => categoryStore.categories);
|
||||||
padding: 25px;
|
padding: 25px;
|
||||||
|
|
||||||
& p {
|
& p {
|
||||||
color: $white;
|
color: $secondary;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
letter-spacing: -0.5px;
|
letter-spacing: -0.5px;
|
||||||
|
|
|
||||||
|
|
@ -30,7 +30,7 @@ const {t} = useI18n();
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: rgba(0, 0, 0, 0.4)
|
background-color: $blackout;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__wrapper {
|
&__wrapper {
|
||||||
|
|
@ -47,7 +47,7 @@ const {t} = useI18n();
|
||||||
}
|
}
|
||||||
|
|
||||||
&__title {
|
&__title {
|
||||||
color: $white;
|
color: $main;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-family: "Playfair Display", sans-serif;
|
font-family: "Playfair Display", sans-serif;
|
||||||
font-size: 60px;
|
font-size: 60px;
|
||||||
|
|
@ -57,7 +57,7 @@ const {t} = useI18n();
|
||||||
|
|
||||||
&__text {
|
&__text {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: $white;
|
color: $main;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
letter-spacing: -0.5px;
|
letter-spacing: -0.5px;
|
||||||
|
|
@ -65,17 +65,17 @@ const {t} = useI18n();
|
||||||
|
|
||||||
&__button {
|
&__button {
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
background-color: $white;
|
background-color: $main;
|
||||||
padding: 10px 35px;
|
padding: 10px 35px;
|
||||||
transition: 0.2s;
|
|
||||||
|
|
||||||
color: #1a1a1a;
|
color: $primary_dark;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
letter-spacing: -0.1px;
|
letter-spacing: -0.1px;
|
||||||
|
|
||||||
@include hover {
|
@include hover {
|
||||||
background-color: #cbcbcb;
|
background-color: $primary_dark;
|
||||||
|
color: $main;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -59,11 +59,11 @@ const { logout } = useLogout();
|
||||||
height: fit-content;
|
height: fit-content;
|
||||||
|
|
||||||
&__inner {
|
&__inner {
|
||||||
background-color: $white;
|
background-color: $main;
|
||||||
border-radius: 8px;
|
border-radius: $default_border_radius;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
border: 1px solid #e5e7eb;
|
border: 1px solid $border;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -71,48 +71,46 @@ const { logout } = useLogout();
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding: 16px 24px;
|
padding: 16px 24px;
|
||||||
border-right: 2px solid transparent;
|
border-right: 2px solid transparent;
|
||||||
border-bottom: 1px solid #e5e7eb;
|
border-bottom: 1px solid $border;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
transition: 0.2s;
|
|
||||||
|
|
||||||
color: #374151;
|
color: $text;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
|
||||||
@include hover {
|
@include hover {
|
||||||
color: $accentDark;
|
color: $primary;
|
||||||
background-color: #f9fafb;
|
background-color: $main_hover;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
border-right-color: #111827;
|
border-right-color: $primary;
|
||||||
color: #111827;
|
color: $primary;
|
||||||
background-color: #f9fafb;
|
background-color: $main_hover;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__logout {
|
&__logout {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
margin-top: 25px;
|
margin-top: 25px;
|
||||||
border-radius: $default_border_radius;
|
border-radius: $less_border_radius;
|
||||||
background-color: rgba($accent, 0.2);
|
background-color: rgba($primary, 0.2);
|
||||||
border: 1px solid $accent;
|
border: 1px solid $primary;
|
||||||
padding: 7px 20px;
|
padding: 7px 20px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
transition: 0.2s;
|
|
||||||
|
|
||||||
color: $accent;
|
color: $primary;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
|
||||||
@include hover {
|
@include hover {
|
||||||
background-color: $accent;
|
background-color: $primary;
|
||||||
color: $white;
|
color: $main;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -25,19 +25,19 @@ const props = defineProps<{
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.sk {
|
.sk {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color: rgba(255, 255, 255, 0.61);
|
background-color: $skeleton;
|
||||||
border-radius: 8px;
|
border-radius: $default_border_radius;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 20px;
|
gap: 20px;
|
||||||
border: 1px solid #e5e7eb;
|
border: 1px solid $border;
|
||||||
padding: 23px;
|
padding: 23px;
|
||||||
|
|
||||||
&__image {
|
&__image {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 233px;
|
height: 233px;
|
||||||
border-radius: $default_border_radius;
|
border-radius: $less_border_radius;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__name {
|
&__name {
|
||||||
|
|
|
||||||
|
|
@ -39,9 +39,9 @@
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.sk {
|
.sk {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-radius: $default_border_radius;
|
border-radius: $less_border_radius;
|
||||||
background-color: rgba(255, 255, 255, 0.61);
|
background-color: $skeleton;
|
||||||
border: 1px solid $accent;
|
border: 1px solid $primary;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
|
|
@ -58,11 +58,11 @@
|
||||||
&__text {
|
&__text {
|
||||||
width: 100px;
|
width: 100px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
border-radius: $default_border_radius;
|
border-radius: $less_border_radius;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__bottom {
|
&__bottom {
|
||||||
border-top: 1px solid $accent;
|
border-top: 1px solid $primary;
|
||||||
padding-top: 10px;
|
padding-top: 10px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
@ -77,7 +77,7 @@
|
||||||
&__image {
|
&__image {
|
||||||
width: 52px;
|
width: 52px;
|
||||||
height: 65px;
|
height: 65px;
|
||||||
border-radius: $default_border_radius;
|
border-radius: $less_border_radius;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__price {
|
&__price {
|
||||||
|
|
|
||||||
|
|
@ -34,6 +34,10 @@
|
||||||
variant="p"
|
variant="p"
|
||||||
class="sk__button"
|
class="sk__button"
|
||||||
/>
|
/>
|
||||||
|
<el-skeleton-item
|
||||||
|
variant="p"
|
||||||
|
class="sk__button"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -50,9 +54,9 @@ const props = defineProps<{
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.sk {
|
.sk {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-radius: 8px;
|
border-radius: $default_border_radius;
|
||||||
border: 1px solid #e5e7eb;
|
border: 1px solid $border;
|
||||||
background-color: rgba(255, 255, 255, 0.61);
|
background-color: $skeleton;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
|
|
@ -111,7 +115,7 @@ const props = defineProps<{
|
||||||
&__image {
|
&__image {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 200px;
|
height: 200px;
|
||||||
border-radius: $default_border_radius;
|
border-radius: $less_border_radius;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__content {
|
&__content {
|
||||||
|
|
@ -152,6 +156,9 @@ const props = defineProps<{
|
||||||
|
|
||||||
&__buttons {
|
&__buttons {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__button {
|
&__button {
|
||||||
|
|
|
||||||
|
|
@ -20,6 +20,7 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 20px;
|
gap: 20px;
|
||||||
|
background-color: $skeleton;
|
||||||
|
|
||||||
&__block {
|
&__block {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -38,8 +39,8 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.el-skeleton__item) {
|
//:deep(.el-skeleton__item) {
|
||||||
--el-skeleton-color: #c9ccd0 !important;
|
// --el-skeleton-color: #c9ccd0 !important;
|
||||||
--el-skeleton-to-color: #c3c3c7 !important;
|
// --el-skeleton-to-color: #c3c3c7 !important;
|
||||||
}
|
//}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -236,8 +236,8 @@ const formatPriceTooltip = (value: number) => `€${value.toFixed(2)}`;
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.filter {
|
.filter {
|
||||||
width: 290px;
|
width: 290px;
|
||||||
border: 1px solid #e5e7ebFF;
|
border: 1px solid $border;
|
||||||
border-radius: 8px;
|
border-radius: $default_border_radius;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 24px;
|
gap: 24px;
|
||||||
|
|
@ -249,7 +249,7 @@ const formatPriceTooltip = (value: number) => `€${value.toFixed(2)}`;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
& h2 {
|
& h2 {
|
||||||
color: $black;
|
color: $primary_dark;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
letter-spacing: -0.5px;
|
letter-spacing: -0.5px;
|
||||||
|
|
@ -257,14 +257,13 @@ const formatPriceTooltip = (value: number) => `€${value.toFixed(2)}`;
|
||||||
|
|
||||||
& span {
|
& span {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: 0.2s;
|
color: $link_primary;
|
||||||
color: #4b5563;
|
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
letter-spacing: -0.5px;
|
letter-spacing: -0.5px;
|
||||||
|
|
||||||
@include hover {
|
@include hover {
|
||||||
color: #313944;
|
color: $link_primary_hover;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -29,6 +29,7 @@
|
||||||
:isList="productView === 'list'"
|
:isList="productView === 'list'"
|
||||||
/>
|
/>
|
||||||
<skeletons-cards-product
|
<skeletons-cards-product
|
||||||
|
v-if="pending"
|
||||||
v-for="idx in 12"
|
v-for="idx in 12"
|
||||||
:key="idx"
|
:key="idx"
|
||||||
:isList="productView === 'list'"
|
:isList="productView === 'list'"
|
||||||
|
|
@ -36,6 +37,7 @@
|
||||||
</div>
|
</div>
|
||||||
</client-only>
|
</client-only>
|
||||||
<div class="store__list-observer" ref="observer"></div>
|
<div class="store__list-observer" ref="observer"></div>
|
||||||
|
<p class="store__empty" v-if="!products.length && !pending">{{ t('store.empty') }}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -46,7 +48,7 @@ import {useCategoryBySlug} from '@composables/categories';
|
||||||
import {useBrandBySlug} from '@composables/brands';
|
import {useBrandBySlug} from '@composables/brands';
|
||||||
import {useDefaultSeo} from '@composables/seo';
|
import {useDefaultSeo} from '@composables/seo';
|
||||||
|
|
||||||
const { locale } = useI18n();
|
const { t, locale } = useI18n();
|
||||||
const { $appHelpers } = useNuxtApp();
|
const { $appHelpers } = useNuxtApp();
|
||||||
|
|
||||||
const productView = useCookie<string>(
|
const productView = useCookie<string>(
|
||||||
|
|
@ -214,5 +216,11 @@ watch(maxPrice, async (newVal) => {
|
||||||
height: 10px;
|
height: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&__empty {
|
||||||
|
color: $primary;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -89,8 +89,8 @@ watch(select, value => {
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
gap: 40px;
|
gap: 40px;
|
||||||
border-radius: 8px;
|
border-radius: $default_border_radius;
|
||||||
border: 1px solid #e5e7eb;
|
border: 1px solid $border;
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
|
|
||||||
&.filters {
|
&.filters {
|
||||||
|
|
@ -106,31 +106,30 @@ watch(select, value => {
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
letter-spacing: -0.5px;
|
letter-spacing: -0.5px;
|
||||||
color: #4b5563;
|
color: $text;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__view {
|
&__view {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
border-radius: 4px;
|
border-radius: $less_border_radius;
|
||||||
border: 1px solid #e5e7eb;
|
border: 1px solid $border;
|
||||||
|
|
||||||
&-button {
|
&-button {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background-color: transparent;
|
background-color: $main;
|
||||||
display: grid;
|
display: grid;
|
||||||
place-items: center;
|
place-items: center;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
transition: 0.2s;
|
color: $primary_dark;
|
||||||
color: #000;
|
|
||||||
|
|
||||||
@include hover {
|
@include hover {
|
||||||
background-color: rgba(0, 0, 0, 0.1);
|
background-color: $main_hover;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
background-color: rgba(0, 0, 0, 0.1);
|
background-color: $link_secondary;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -28,25 +28,24 @@ const { breadcrumbs } = useBreadcrumbs();
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.breadcrumbs {
|
.breadcrumbs {
|
||||||
background-color: #f8f8f8;
|
background-color: $title_bg;
|
||||||
padding: 15px 250px 15px 50px;
|
padding: 15px 250px 15px 50px;
|
||||||
line-height: 140%;
|
line-height: 140%;
|
||||||
border-bottom: 1px solid #e5e7eb;
|
border-bottom: 1px solid $border;
|
||||||
|
|
||||||
&__link {
|
&__link {
|
||||||
cursor: pointer !important;
|
cursor: pointer !important;
|
||||||
transition: 0.2s;
|
color: $primary !important;
|
||||||
color: $accent !important;
|
|
||||||
font-weight: 600 !important;
|
font-weight: 600 !important;
|
||||||
|
|
||||||
@include hover {
|
@include hover {
|
||||||
color: $accentDark !important;
|
color: $primary_dark !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__current {
|
&__current {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #333;
|
color: $primary_dark;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -28,9 +28,8 @@ const props = defineProps<{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
transition: 0.2s;
|
background-color: $primary;
|
||||||
background-color: #111827;
|
border-radius: $default_border_radius;
|
||||||
border-radius: 8px;
|
|
||||||
padding-block: 14px;
|
padding-block: 14px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -38,49 +37,49 @@ const props = defineProps<{
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
|
||||||
color: $white;
|
color: $main;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
|
||||||
&.secondary {
|
&.secondary {
|
||||||
background-color: $white;
|
background-color: $main;
|
||||||
border: 1px solid #d1d5db;
|
border: 1px solid $border;
|
||||||
color: #374151;
|
color: $secondary;
|
||||||
|
|
||||||
@include hover {
|
@include hover {
|
||||||
background-color: #d1d5db;
|
background-color: $border;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
background-color: #d1d5db;
|
background-color: $border;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:disabled {
|
&:disabled {
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
background-color: #9a9a9a;
|
background-color: $disabled_secondary;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:disabled:hover, &.active {
|
&:disabled:hover, &.active {
|
||||||
background-color: #9a9a9a;
|
background-color: $disabled_secondary;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@include hover {
|
@include hover {
|
||||||
background-color: #222c41;
|
background-color: $primary_hover;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
background-color: #222c41;
|
background-color: $primary_hover;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:disabled {
|
&:disabled {
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
background-color: #0a0f1a;
|
background-color: $disabled;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:disabled:hover, &.active {
|
&:disabled:hover, &.active {
|
||||||
background-color: #0a0f1a;
|
background-color: $disabled;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__loader {
|
&__loader {
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<label class="checkbox" :class="{ isAccent }">
|
<label class="checkbox" :class="{ isPrimary }">
|
||||||
<input
|
<input
|
||||||
:id="id"
|
:id="id"
|
||||||
class="checkbox__input"
|
class="checkbox__input"
|
||||||
|
|
@ -18,7 +18,7 @@
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
id?: string;
|
id?: string;
|
||||||
modelValue: boolean;
|
modelValue: boolean;
|
||||||
isAccent?: boolean;
|
isPrimary?: boolean;
|
||||||
}>();
|
}>();
|
||||||
const emit = defineEmits<{
|
const emit = defineEmits<{
|
||||||
(e: 'update:modelValue', v: boolean): void;
|
(e: 'update:modelValue', v: boolean): void;
|
||||||
|
|
@ -37,14 +37,14 @@ function onChange(e: Event) {
|
||||||
gap: 5px;
|
gap: 5px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
&.isAccent {
|
&.isPrimary {
|
||||||
& .checkbox__block {
|
& .checkbox__block {
|
||||||
border: 2px solid $accentDark;
|
border: 2px solid $primary_dark;
|
||||||
border-radius: $default_border_radius;
|
border-radius: $less_border_radius;
|
||||||
}
|
}
|
||||||
|
|
||||||
& .checkbox__label {
|
& .checkbox__label {
|
||||||
color: $accentDark;
|
color: $primary_dark;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -59,7 +59,7 @@ function onChange(e: Event) {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 16px;
|
width: 16px;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
border: 0.5px solid $black;
|
border: 0.5px solid $primary_dark;
|
||||||
border-radius: 1px;
|
border-radius: 1px;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
|
|
@ -71,7 +71,7 @@ function onChange(e: Event) {
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
width: 10px;
|
width: 10px;
|
||||||
height: 10px;
|
height: 10px;
|
||||||
background-color: $black;
|
background-color: $primary_dark;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
@ -79,7 +79,7 @@ function onChange(e: Event) {
|
||||||
|
|
||||||
&__label {
|
&__label {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: #374151;
|
color: $secondary;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
letter-spacing: -0.5px;
|
letter-spacing: -0.5px;
|
||||||
|
|
|
||||||
|
|
@ -111,7 +111,7 @@ function onInput(e: Event) {
|
||||||
}
|
}
|
||||||
|
|
||||||
&__label {
|
&__label {
|
||||||
color: #374151;
|
color: $secondary;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
letter-spacing: -0.5px;
|
letter-spacing: -0.5px;
|
||||||
|
|
@ -120,17 +120,17 @@ function onInput(e: Event) {
|
||||||
&__input {
|
&__input {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 14px 12px;
|
padding: 14px 12px;
|
||||||
border: 1px solid #d1d5db;
|
border: 1px solid $border;
|
||||||
border-radius: 8px;
|
border-radius: $default_border_radius;
|
||||||
background-color: $white;
|
background-color: $main;
|
||||||
|
|
||||||
color: #1f1f1f;
|
color: $primary_dark;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
letter-spacing: -0.5px;
|
letter-spacing: -0.5px;
|
||||||
|
|
||||||
&::placeholder {
|
&::placeholder {
|
||||||
color: #868686;
|
color: $disabled_secondary;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -144,7 +144,7 @@ function onInput(e: Event) {
|
||||||
display: grid;
|
display: grid;
|
||||||
place-items: center;
|
place-items: center;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
color: #838383;
|
color: $disabled_secondary;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__error {
|
&__error {
|
||||||
|
|
|
||||||
|
|
@ -80,15 +80,14 @@ const uiSwitchLanguage = (localeCode: string) => {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 5px;
|
gap: 5px;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
border-radius: $default_border_radius;
|
border-radius: $less_border_radius;
|
||||||
transition: 0.2s;
|
|
||||||
|
|
||||||
@include hover {
|
@include hover {
|
||||||
background-color: rgba(0, 0, 0, 0.2);
|
background-color: $primary_shadow;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
background-color: rgba(0, 0, 0, 0.2);
|
background-color: $primary_shadow;
|
||||||
}
|
}
|
||||||
|
|
||||||
& img {
|
& img {
|
||||||
|
|
@ -104,7 +103,7 @@ const uiSwitchLanguage = (localeCode: string) => {
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border-radius: $default_border_radius;
|
border-radius: $less_border_radius;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-rows: 0fr;
|
grid-template-rows: 0fr;
|
||||||
transition: grid-template-rows 0.2s ease;
|
transition: grid-template-rows 0.2s ease;
|
||||||
|
|
@ -126,8 +125,7 @@ const uiSwitchLanguage = (localeCode: string) => {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding: 3px 5px;
|
padding: 3px 5px;
|
||||||
background-color: #cccccc;
|
background-color: $link_secondary;
|
||||||
transition: 0.1s;
|
|
||||||
|
|
||||||
&:first-child {
|
&:first-child {
|
||||||
padding-top: 5px;
|
padding-top: 5px;
|
||||||
|
|
@ -137,7 +135,7 @@ const uiSwitchLanguage = (localeCode: string) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
@include hover {
|
@include hover {
|
||||||
background-color: #b2b2b2;
|
background-color: $link_secondary_hover;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -39,9 +39,8 @@ const handleClick = () => {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 5px;
|
gap: 5px;
|
||||||
transition: 0.2s;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: #111827;
|
color: $primary;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
|
|
||||||
|
|
@ -50,7 +49,7 @@ const handleClick = () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
@include hover {
|
@include hover {
|
||||||
color: #364565;
|
color: $secondary;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -20,7 +20,7 @@
|
||||||
width: 10px;
|
width: 10px;
|
||||||
height: 10px;
|
height: 10px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background-color: $white;
|
background-color: $main;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -136,7 +136,7 @@ function goTo(category: string, item: any) {
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.search {
|
.search {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color: $white;
|
background-color: $main;
|
||||||
|
|
||||||
&__inner {
|
&__inner {
|
||||||
padding-block: 10px;
|
padding-block: 10px;
|
||||||
|
|
@ -154,24 +154,30 @@ function goTo(category: string, item: any) {
|
||||||
top: 0;
|
top: 0;
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
transition: 0.2s;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&__wrapper {
|
&__wrapper {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color: #f7f7f7;
|
background-color: $border;
|
||||||
border-radius: $default_border_radius;
|
border-radius: $less_border_radius;
|
||||||
transition: 0.2s;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
background-color: $white;
|
background-color: $main;
|
||||||
box-shadow: 0 0 0 1px #0000000a,0 4px 4px #0000000a,0 20px 40px #00000014;
|
box-shadow: 0 0 0 1px #0000000a,0 4px 4px #0000000a,0 20px 40px #00000014;
|
||||||
|
|
||||||
|
& .search__wrapper {
|
||||||
|
border-radius: $less_border_radius $less_border_radius 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
& .search__form input {
|
||||||
|
border-radius: $less_border_radius $less_border_radius 0 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@include hover {
|
@include hover {
|
||||||
background-color: $white;
|
background-color: $main;
|
||||||
box-shadow: 0 0 0 1px #0000000a,0 4px 4px #0000000a,0 20px 40px #00000014;
|
box-shadow: 0 0 0 1px #0000000a,0 4px 4px #0000000a,0 20px 40px #00000014;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -186,9 +192,10 @@ function goTo(category: string, item: any) {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding-inline: 20px 150px;
|
padding-inline: 20px 150px;
|
||||||
border: 1px solid #dedede;
|
border: 1px solid $link_secondary;
|
||||||
border-radius: $default_border_radius;
|
border-radius: $less_border_radius;
|
||||||
|
|
||||||
|
color: $secondary;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
@ -207,39 +214,43 @@ function goTo(category: string, item: any) {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: grid;
|
display: grid;
|
||||||
place-items: center;
|
place-items: center;
|
||||||
border-radius: $default_border_radius;
|
border-radius: $less_border_radius;
|
||||||
padding: 5px 12px;
|
padding: 5px 12px;
|
||||||
border: 1px solid $accent;
|
border: 1px solid $primary;
|
||||||
background-color: rgba($accent, 0.2);
|
background-color: transparent;
|
||||||
transition: 0.2s;
|
|
||||||
|
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: $accent;
|
color: $primary;
|
||||||
|
|
||||||
@include hover {
|
@include hover {
|
||||||
background-color: rgba($accent, 1);
|
background-color: $primary;
|
||||||
color: $white;
|
color: $main;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-line {
|
&-line {
|
||||||
background-color: $accent;
|
background-color: $primary;
|
||||||
height: 15px;
|
height: 15px;
|
||||||
width: 1px;
|
width: 1px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__results {
|
&__results {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1;
|
||||||
|
top: 100%;
|
||||||
|
width: 100%;
|
||||||
max-height: 0;
|
max-height: 0;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
transition: 0.2s;
|
background-color: $main;
|
||||||
|
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.0392156863), 0 4px 4px rgba(0, 0, 0, 0.0392156863), 0 20px 40px rgba(0, 0, 0, 0.0784313725);
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
max-height: 40vh;
|
max-height: 40vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-title {
|
&-title {
|
||||||
background-color: rgba($accent, 0.2);
|
background-color: rgba($primary, 0.2);
|
||||||
padding: 7px 20px;
|
padding: 7px 20px;
|
||||||
|
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
|
@ -258,11 +269,10 @@ function goTo(category: string, item: any) {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
gap: 30px;
|
gap: 30px;
|
||||||
transition: 0.2s;
|
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
|
||||||
@include hover {
|
@include hover {
|
||||||
background-color: #efefef;
|
background-color: $main_hover;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-left {
|
&-left {
|
||||||
|
|
@ -280,7 +290,7 @@ function goTo(category: string, item: any) {
|
||||||
}
|
}
|
||||||
|
|
||||||
& span {
|
& span {
|
||||||
color: #7c7c7c;
|
color: $text;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -66,7 +66,7 @@ const onInput = (e: Event) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
&__label {
|
&__label {
|
||||||
color: #374151;
|
color: $secondary;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
letter-spacing: -0.5px;
|
letter-spacing: -0.5px;
|
||||||
|
|
@ -77,17 +77,17 @@ const onInput = (e: Event) => {
|
||||||
height: 150px;
|
height: 150px;
|
||||||
resize: none;
|
resize: none;
|
||||||
padding: 6px 12px;
|
padding: 6px 12px;
|
||||||
border: 1px solid #e0e0e0;
|
border: 1px solid $border;
|
||||||
border-radius: $default_border_radius;
|
border-radius: $less_border_radius;
|
||||||
background-color: $white;
|
background-color: $main;
|
||||||
|
|
||||||
color: #1f1f1f;
|
color: $primary_dark;
|
||||||
font-size: 12px;
|
font-size: 16px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
line-height: 20px;
|
letter-spacing: -0.5px;
|
||||||
|
|
||||||
&::placeholder {
|
&::placeholder {
|
||||||
color: #2B2B2B;
|
color: $disabled_secondary;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,10 @@
|
||||||
<template>
|
<template>
|
||||||
<button
|
<button
|
||||||
@click="toggleTheme"
|
@click="toggleTheme"
|
||||||
class="theme-toggle"
|
class="theme"
|
||||||
:aria-label="`Переключить на ${theme === 'light' ? 'тёмную' : 'светлую'} тему`"
|
|
||||||
>
|
>
|
||||||
<Icon v-if="theme === 'light'" name="line-md:moon-alt-loop" size="24" />
|
<icon v-if="theme === 'light'" name="line-md:moon-alt-loop" size="22" />
|
||||||
<Icon v-else name="line-md:sunny-outline-loop" size="24" />
|
<icon v-else name="line-md:sunny-outline-loop" size="22" />
|
||||||
</button>
|
</button>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -16,18 +15,20 @@ const { theme, toggleTheme } = useThemes();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.theme-toggle {
|
.theme {
|
||||||
background: var(--color-surface);
|
background-color: transparent;
|
||||||
border: 1px solid var(--color-border);
|
border-radius: $less_border_radius;
|
||||||
border-radius: $default_border_radius;
|
padding: 5px;
|
||||||
padding: 8px;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: var(--color-text-primary);
|
color: $primary;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
&:hover {
|
@include hover {
|
||||||
background: var(--color-surface-hover);
|
background-color: $primary_shadow;
|
||||||
border-color: var(--color-accent);
|
}
|
||||||
|
|
||||||
|
& span {
|
||||||
|
display: block;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -1,8 +1,10 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<h2>
|
<div class="container">
|
||||||
<slot />
|
<div class="title__wrapper">
|
||||||
</h2>
|
<slot />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -12,17 +14,57 @@
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.title {
|
.title {
|
||||||
padding-block: 10px 50px;
|
padding-block: 50px;
|
||||||
display: grid;
|
background-color: $title_bg;
|
||||||
place-items: center;
|
|
||||||
margin-bottom: 50px;
|
|
||||||
background: linear-gradient(0deg, $light 0%, $accentSmooth 100%);
|
|
||||||
|
|
||||||
& h2 {
|
&__wrapper {
|
||||||
text-align: center;
|
display: flex;
|
||||||
font-size: 48px;
|
flex-direction: column;
|
||||||
font-weight: 900;
|
align-items: center;
|
||||||
color: $white;
|
gap: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.title__wrapper h1) {
|
||||||
|
color: $primary_dark;
|
||||||
|
font-family: "Playfair Display", sans-serif;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 36px;
|
||||||
|
letter-spacing: -0.5px;
|
||||||
|
}
|
||||||
|
:deep(.title__wrapper p) {
|
||||||
|
max-width: 600px;
|
||||||
|
text-align: center;
|
||||||
|
color: $text;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: -0.5px;
|
||||||
|
}
|
||||||
|
:deep(.title__wrapper div) {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
& span {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
right: 24px;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
color: $disabled_secondary;
|
||||||
|
}
|
||||||
|
|
||||||
|
& input {
|
||||||
|
background-color: $main;
|
||||||
|
border: 1px solid $border;
|
||||||
|
border-radius: 50px;
|
||||||
|
padding: 18px 70px 18px 50px;
|
||||||
|
|
||||||
|
color: $text;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: -0.5px;
|
||||||
|
|
||||||
|
&::placeholder {
|
||||||
|
color: $text;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
export const useThemes = () => {
|
export const useThemes = () => {
|
||||||
const { $appHelpers } = useNuxtApp();
|
const { $appHelpers } = useNuxtApp();
|
||||||
|
|
||||||
const themeCookie = useCookie<'light' | 'dark'>($appHelpers.COOKIES_THEME_KEY || 'schon-theme', {
|
const themeCookie = useCookie<'light' | 'dark'>($appHelpers.COOKIES_THEME_KEY, {
|
||||||
default: () => 'light',
|
default: () => 'light',
|
||||||
path: '/',
|
path: '/',
|
||||||
});
|
});
|
||||||
|
|
@ -13,12 +13,7 @@ export const useThemes = () => {
|
||||||
themeCookie.value = newTheme;
|
themeCookie.value = newTheme;
|
||||||
|
|
||||||
if (import.meta.client) {
|
if (import.meta.client) {
|
||||||
const html = document.documentElement;
|
document.documentElement.setAttribute('data-theme', newTheme);
|
||||||
if (newTheme === 'dark') {
|
|
||||||
html.classList.add('dark');
|
|
||||||
} else {
|
|
||||||
html.classList.remove('dark');
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -20,7 +20,7 @@ setPageTitle(t('breadcrumbs.resetPassword'));
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.auth {
|
.auth {
|
||||||
background-color: #e5e7eb;
|
background-color: $border;
|
||||||
|
|
||||||
&__wrapper {
|
&__wrapper {
|
||||||
padding-block: 100px;
|
padding-block: 100px;
|
||||||
|
|
|
||||||
|
|
@ -25,7 +25,7 @@ setPageTitle(t('breadcrumbs.login'));
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.auth {
|
.auth {
|
||||||
background-color: $white;
|
background-color: $main;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -25,7 +25,7 @@ setPageTitle(t('breadcrumbs.register'));
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.auth {
|
.auth {
|
||||||
background-color: $white;
|
background-color: $main;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -28,9 +28,5 @@ setPageTitle(post.value?.title ? post.value?.title : t('breadcrumbs.blog'));
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.post {
|
.post {
|
||||||
padding-block: 50px 100px;
|
padding-block: 50px 100px;
|
||||||
|
|
||||||
&__wrapper {
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -1,13 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="blog">
|
<div class="blog">
|
||||||
<div class="blog__top">
|
<ui-title>
|
||||||
<div class="container">
|
<h1>{{ t('blog.title') }}</h1>
|
||||||
<div class="blog__top-wrapper">
|
<p>{{ t('blog.text') }}</p>
|
||||||
<h1>{{ t('blog.title') }}</h1>
|
</ui-title>
|
||||||
<p>{{ t('blog.text') }}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="blog__main">
|
<div class="blog__main">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="blog__main-wrapper">
|
<div class="blog__main-wrapper">
|
||||||
|
|
@ -42,39 +38,10 @@ setPageTitle(t('breadcrumbs.blog'));
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.blog {
|
.blog {
|
||||||
&__top {
|
|
||||||
padding-block: 70px;
|
|
||||||
background-color: #f8f8f8;
|
|
||||||
|
|
||||||
&-wrapper {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
gap: 24px;
|
|
||||||
|
|
||||||
& h1 {
|
|
||||||
color: #1a1a1a;
|
|
||||||
font-family: "Playfair Display", sans-serif;
|
|
||||||
font-size: 48px;
|
|
||||||
font-weight: 700;
|
|
||||||
letter-spacing: -0.5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
& p {
|
|
||||||
max-width: 600px;
|
|
||||||
text-align: center;
|
|
||||||
color: #4b5563;
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 400;
|
|
||||||
letter-spacing: -0.5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__main {
|
&__main {
|
||||||
background-color: $white;
|
background-color: $main;
|
||||||
padding-block: 70px;
|
padding-block: 70px;
|
||||||
border-top: 1px solid #f3f4f6;
|
border-top: 1px solid $border;
|
||||||
|
|
||||||
&-wrapper {
|
&-wrapper {
|
||||||
display: grid;
|
display: grid;
|
||||||
|
|
|
||||||
|
|
@ -1,20 +1,16 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="brand">
|
<div class="brand">
|
||||||
<div class="brand__top">
|
<ui-title v-if="brand">
|
||||||
<div class="container">
|
<nuxt-img
|
||||||
<div class="brand__top-wrapper" v-if="brand">
|
format="webp"
|
||||||
<nuxt-img
|
width="150px"
|
||||||
format="webp"
|
densities="x1"
|
||||||
width="150px"
|
:src="brand.image"
|
||||||
densities="x1"
|
:alt="brand.name"
|
||||||
:src="brand.image"
|
/>
|
||||||
:alt="brand.name"
|
<h1>{{ brand.name }}</h1>
|
||||||
/>
|
<p>{{ brand.description }}</p>
|
||||||
<h1 class="brand__top-title">{{ brand.name }}</h1>
|
</ui-title>
|
||||||
<p class="brand__top-text">{{ brand.description }}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="brand__main">
|
<div class="brand__main">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="brand__main-wrapper">
|
<div class="brand__main-wrapper">
|
||||||
|
|
@ -77,42 +73,10 @@ setPageTitle(brand.value?.name ?? 'Brand');
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.brand {
|
.brand {
|
||||||
&__top {
|
|
||||||
padding-block: 50px;
|
|
||||||
background-color: #f8f8f8;
|
|
||||||
|
|
||||||
&-wrapper {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
gap: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-title {
|
|
||||||
font-family: "Playfair Display", sans-serif;
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 36px;
|
|
||||||
letter-spacing: -0.5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-text {
|
|
||||||
max-width: 600px;
|
|
||||||
text-align: center;
|
|
||||||
color: #4b5563;
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 400;
|
|
||||||
letter-spacing: -0.5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__main {
|
&__main {
|
||||||
background-color: $white;
|
background-color: $main;
|
||||||
padding-block: 70px;
|
padding-block: 70px;
|
||||||
border-top: 1px solid #f3f4f6;
|
border-top: 1px solid $border;
|
||||||
|
|
||||||
&-wrapper {
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -1,22 +1,18 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="brands">
|
<div class="brands">
|
||||||
<div class="brands__top">
|
<ui-title>
|
||||||
<div class="container">
|
<h1>{{ t('brands.title') }}</h1>
|
||||||
<div class="brands__top-wrapper">
|
<p>{{ t('brands.text') }}</p>
|
||||||
<h1>{{ t('brands.title') }}</h1>
|
<div class="brands__top-search">
|
||||||
<p>{{ t('brands.text') }}</p>
|
<input
|
||||||
<div class="brands__top-search">
|
type="text"
|
||||||
<input
|
inputmode="text"
|
||||||
type="text"
|
:placeholder="t('fields.brandsSearch')"
|
||||||
inputmode="text"
|
v-model="searchInput"
|
||||||
:placeholder="t('fields.brandsSearch')"
|
>
|
||||||
v-model="searchInput"
|
<icon name="tabler:search" size="20" />
|
||||||
>
|
|
||||||
<icon name="tabler:search" size="20" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</ui-title>
|
||||||
<div class="brands__main">
|
<div class="brands__main">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="brands__main-wrapper">
|
<div class="brands__main-wrapper">
|
||||||
|
|
@ -83,71 +79,10 @@ setPageTitle(t('breadcrumbs.brands'));
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.brands {
|
.brands {
|
||||||
&__wrapper {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
&__top {
|
|
||||||
padding-block: 70px;
|
|
||||||
background-color: #f8f8f8;
|
|
||||||
|
|
||||||
&-wrapper {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
gap: 24px;
|
|
||||||
|
|
||||||
& h1 {
|
|
||||||
color: #1a1a1a;
|
|
||||||
font-family: "Playfair Display", sans-serif;
|
|
||||||
font-size: 48px;
|
|
||||||
font-weight: 700;
|
|
||||||
letter-spacing: -0.5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
& p {
|
|
||||||
max-width: 600px;
|
|
||||||
text-align: center;
|
|
||||||
color: #4b5563;
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 400;
|
|
||||||
letter-spacing: -0.5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&-search {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
& span {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
right: 24px;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
color: #8c8c8c;
|
|
||||||
}
|
|
||||||
|
|
||||||
& input {
|
|
||||||
background-color: $white;
|
|
||||||
border: 1px solid #e5e7eb;
|
|
||||||
border-radius: 50px;
|
|
||||||
padding: 18px 50px;
|
|
||||||
|
|
||||||
color: #8c8c8c;
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 400;
|
|
||||||
letter-spacing: -0.5px;
|
|
||||||
|
|
||||||
&::placeholder {
|
|
||||||
color: #8c8c8c;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__main {
|
&__main {
|
||||||
background-color: $white;
|
background-color: $main;
|
||||||
padding-block: 70px;
|
padding-block: 70px;
|
||||||
border-top: 1px solid #f3f4f6;
|
border-top: 1px solid $border;
|
||||||
|
|
||||||
&-wrapper {
|
&-wrapper {
|
||||||
display: grid;
|
display: grid;
|
||||||
|
|
|
||||||
|
|
@ -92,7 +92,7 @@ setPageTitle(t('breadcrumbs.cart'));
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.cart {
|
.cart {
|
||||||
padding-block: 50px 100px;
|
padding-block: 50px 100px;
|
||||||
background-color: $white;
|
background-color: $main;
|
||||||
|
|
||||||
&__wrapper {
|
&__wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -112,7 +112,7 @@ setPageTitle(t('breadcrumbs.cart'));
|
||||||
}
|
}
|
||||||
|
|
||||||
&-title {
|
&-title {
|
||||||
color: #1a1a1a;
|
color: $primary_dark;
|
||||||
font-family: "Playfair Display", sans-serif;
|
font-family: "Playfair Display", sans-serif;
|
||||||
font-size: 36px;
|
font-size: 36px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
|
@ -120,7 +120,7 @@ setPageTitle(t('breadcrumbs.cart'));
|
||||||
}
|
}
|
||||||
|
|
||||||
& p {
|
& p {
|
||||||
color: #4b5563;
|
color: $text;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
letter-spacing: -0.5px;
|
letter-spacing: -0.5px;
|
||||||
|
|
@ -139,5 +139,11 @@ setPageTitle(t('breadcrumbs.cart'));
|
||||||
gap: 25px;
|
gap: 25px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&__empty {
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 18px;
|
||||||
|
color: $primary;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -1,13 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="category">
|
<div class="category">
|
||||||
<div class="category__top">
|
<ui-title>
|
||||||
<div class="container">
|
<h1>{{ category?.name }}</h1>
|
||||||
<div class="category__top-wrapper">
|
<p>{{ category?.description }}</p>
|
||||||
<h1>{{ category?.name }}</h1>
|
</ui-title>
|
||||||
<p>{{ category?.description }}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="category__main">
|
<div class="category__main">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="category__main-wrapper">
|
<div class="category__main-wrapper">
|
||||||
|
|
@ -93,68 +89,10 @@ function findBySlug(nodes: ICategory[], slug: string): ICategory | undefined {
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.category {
|
.category {
|
||||||
|
|
||||||
&__top {
|
|
||||||
padding-block: 70px;
|
|
||||||
background-color: #f8f8f8;
|
|
||||||
|
|
||||||
&-wrapper {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
gap: 24px;
|
|
||||||
|
|
||||||
& h1 {
|
|
||||||
color: #1a1a1a;
|
|
||||||
font-family: "Playfair Display", sans-serif;
|
|
||||||
font-size: 48px;
|
|
||||||
font-weight: 700;
|
|
||||||
letter-spacing: -0.5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
& p {
|
|
||||||
max-width: 600px;
|
|
||||||
text-align: center;
|
|
||||||
color: #4b5563;
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 400;
|
|
||||||
letter-spacing: -0.5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&-search {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
& span {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
right: 24px;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
color: #8c8c8c;
|
|
||||||
}
|
|
||||||
|
|
||||||
& input {
|
|
||||||
background-color: $white;
|
|
||||||
border: 1px solid #e5e7eb;
|
|
||||||
border-radius: 50px;
|
|
||||||
padding: 18px 50px;
|
|
||||||
|
|
||||||
color: #8c8c8c;
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 400;
|
|
||||||
letter-spacing: -0.5px;
|
|
||||||
|
|
||||||
&::placeholder {
|
|
||||||
color: #8c8c8c;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__main {
|
&__main {
|
||||||
background-color: $white;
|
background-color: $main;
|
||||||
padding-block: 70px;
|
padding-block: 70px;
|
||||||
border-top: 1px solid #f3f4f6;
|
border-top: 1px solid $border;
|
||||||
|
|
||||||
&-list {
|
&-list {
|
||||||
display: grid;
|
display: grid;
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="catalog">
|
<div class="catalog">
|
||||||
<div class="catalog__top">
|
<ui-title>
|
||||||
<div class="container">
|
<h1>{{ t('catalog.title') }}</h1>
|
||||||
<div class="catalog__top-wrapper">
|
<p>{{ t('catalog.text') }}</p>
|
||||||
<h1>{{ t('catalog.title') }}</h1>
|
</ui-title>
|
||||||
<p>{{ t('catalog.text') }}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="catalog__main">
|
<div class="catalog__main">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="catalog__main-wrapper">
|
<div class="catalog__main-wrapper">
|
||||||
|
|
@ -37,39 +33,10 @@ setPageTitle(t('breadcrumbs.catalog'));
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.catalog {
|
.catalog {
|
||||||
&__top {
|
|
||||||
padding-block: 70px;
|
|
||||||
background-color: #f8f8f8;
|
|
||||||
|
|
||||||
&-wrapper {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
gap: 24px;
|
|
||||||
|
|
||||||
& h1 {
|
|
||||||
color: #1a1a1a;
|
|
||||||
font-family: "Playfair Display", sans-serif;
|
|
||||||
font-size: 48px;
|
|
||||||
font-weight: 700;
|
|
||||||
letter-spacing: -0.5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
& p {
|
|
||||||
max-width: 600px;
|
|
||||||
text-align: center;
|
|
||||||
color: #4b5563;
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 400;
|
|
||||||
letter-spacing: -0.5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__main {
|
&__main {
|
||||||
background-color: $white;
|
background-color: $main;
|
||||||
padding-block: 70px;
|
padding-block: 70px;
|
||||||
border-top: 1px solid #f3f4f6;
|
border-top: 1px solid $border;
|
||||||
|
|
||||||
&-wrapper {
|
&-wrapper {
|
||||||
display: grid;
|
display: grid;
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="contact">
|
<div class="contact">
|
||||||
<div class="contact__top">
|
<ui-title>
|
||||||
<div class="container">
|
<h1>{{ t('contact.title') }}</h1>
|
||||||
<div class="contact__top-wrapper">
|
<p>{{ t('contact.text') }}</p>
|
||||||
<h1>{{ t('contact.title') }}</h1>
|
</ui-title>
|
||||||
<p>{{ t('contact.text') }}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="contact__main">
|
<div class="contact__main">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="contact__main-wrapper">
|
<div class="contact__main-wrapper">
|
||||||
|
|
@ -66,39 +62,10 @@ setPageTitle(t('breadcrumbs.contact'));
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.contact {
|
.contact {
|
||||||
&__top {
|
|
||||||
padding-block: 70px;
|
|
||||||
background-color: #f8f8f8;
|
|
||||||
|
|
||||||
&-wrapper {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
gap: 24px;
|
|
||||||
|
|
||||||
& h1 {
|
|
||||||
color: #1a1a1a;
|
|
||||||
font-family: "Playfair Display", sans-serif;
|
|
||||||
font-size: 48px;
|
|
||||||
font-weight: 700;
|
|
||||||
letter-spacing: -0.5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
& p {
|
|
||||||
max-width: 600px;
|
|
||||||
text-align: center;
|
|
||||||
color: #4b5563;
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 400;
|
|
||||||
letter-spacing: -0.5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__main {
|
&__main {
|
||||||
background-color: $white;
|
background-color: $main;
|
||||||
padding-block: 70px;
|
padding-block: 70px;
|
||||||
border-top: 1px solid #f3f4f6;
|
border-top: 1px solid $border;
|
||||||
|
|
||||||
&-wrapper {
|
&-wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -114,7 +81,7 @@ setPageTitle(t('breadcrumbs.contact'));
|
||||||
gap: 40px;
|
gap: 40px;
|
||||||
|
|
||||||
& .title {
|
& .title {
|
||||||
color: #1a1a1a;
|
color: $primary_dark;
|
||||||
font-family: "Playfair Display", sans-serif;
|
font-family: "Playfair Display", sans-serif;
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
|
|
@ -122,7 +89,7 @@ setPageTitle(t('breadcrumbs.contact'));
|
||||||
}
|
}
|
||||||
|
|
||||||
& .subtitle {
|
& .subtitle {
|
||||||
color: #4b5563;
|
color: $text;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
letter-spacing: -0.5px;
|
letter-spacing: -0.5px;
|
||||||
|
|
@ -139,12 +106,12 @@ setPageTitle(t('breadcrumbs.contact'));
|
||||||
gap: 15px;
|
gap: 15px;
|
||||||
|
|
||||||
&-icon {
|
&-icon {
|
||||||
background-color: #1a1a1a;
|
background-color: $primary_dark;
|
||||||
border-radius: 8px;
|
border-radius: $default_border_radius;
|
||||||
padding: 14px;
|
padding: 14px;
|
||||||
|
|
||||||
& span {
|
& span {
|
||||||
color: $white;
|
color: $main;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -155,21 +122,20 @@ setPageTitle(t('breadcrumbs.contact'));
|
||||||
gap: 6px;
|
gap: 6px;
|
||||||
|
|
||||||
& h6 {
|
& h6 {
|
||||||
color: #1a1a1a;
|
color: $primary_dark;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
letter-spacing: -0.5px;
|
letter-spacing: -0.5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
& a {
|
& a {
|
||||||
transition: 0.2s;
|
color: $secondary;
|
||||||
color: #4b5563;
|
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
letter-spacing: -0.5px;
|
letter-spacing: -0.5px;
|
||||||
|
|
||||||
@include hover {
|
@include hover {
|
||||||
color: #1c2126;
|
color: $secondary_hover;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,8 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="docs">
|
<div class="docs">
|
||||||
<div class="docs__top">
|
<ui-title>
|
||||||
<div class="container">
|
<h1>{{ t('docs.about.title') }}</h1>
|
||||||
<div class="docs__top-wrapper">
|
</ui-title>
|
||||||
<h1 class="docs__top-title">{{ t('docs.about.title') }}</h1>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="docs__main">
|
<div class="docs__main">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div
|
<div
|
||||||
|
|
@ -35,36 +31,8 @@ setPageTitle(t('breadcrumbs.about'));
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.docs {
|
.docs {
|
||||||
&__top {
|
|
||||||
padding-block: 50px;
|
|
||||||
background-color: #f8f8f8;
|
|
||||||
|
|
||||||
&-wrapper {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
gap: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-title {
|
|
||||||
font-family: "Playfair Display", sans-serif;
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 36px;
|
|
||||||
letter-spacing: -0.5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-text {
|
|
||||||
max-width: 600px;
|
|
||||||
text-align: center;
|
|
||||||
color: #4b5563;
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 400;
|
|
||||||
letter-spacing: -0.5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__main {
|
&__main {
|
||||||
background-color: $white;
|
background-color: $main;
|
||||||
padding-block: 50px 100px;
|
padding-block: 50px 100px;
|
||||||
|
|
||||||
&-wrapper {
|
&-wrapper {
|
||||||
|
|
@ -77,7 +45,7 @@ setPageTitle(t('breadcrumbs.about'));
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 30px;
|
gap: 30px;
|
||||||
|
|
||||||
color: #1a1a1a;
|
color: $primary_dark;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
letter-spacing: -0.5px;
|
letter-spacing: -0.5px;
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,8 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="docs">
|
<div class="docs">
|
||||||
<div class="docs__top">
|
<ui-title>
|
||||||
<div class="container">
|
<h1>{{ t('docs.faq.title') }}</h1>
|
||||||
<div class="docs__top-wrapper">
|
</ui-title>
|
||||||
<h1 class="docs__top-title">{{ t('docs.faq.title') }}</h1>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="docs__main">
|
<div class="docs__main">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div
|
<div
|
||||||
|
|
@ -35,36 +31,8 @@ setPageTitle(t('breadcrumbs.faq'));
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.docs {
|
.docs {
|
||||||
&__top {
|
|
||||||
padding-block: 50px;
|
|
||||||
background-color: #f8f8f8;
|
|
||||||
|
|
||||||
&-wrapper {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
gap: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-title {
|
|
||||||
font-family: "Playfair Display", sans-serif;
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 36px;
|
|
||||||
letter-spacing: -0.5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-text {
|
|
||||||
max-width: 600px;
|
|
||||||
text-align: center;
|
|
||||||
color: #4b5563;
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 400;
|
|
||||||
letter-spacing: -0.5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__main {
|
&__main {
|
||||||
background-color: $white;
|
background-color: $main;
|
||||||
padding-block: 50px 100px;
|
padding-block: 50px 100px;
|
||||||
|
|
||||||
&-wrapper {
|
&-wrapper {
|
||||||
|
|
@ -77,7 +45,7 @@ setPageTitle(t('breadcrumbs.faq'));
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 30px;
|
gap: 30px;
|
||||||
|
|
||||||
color: #1a1a1a;
|
color: $primary_dark;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
letter-spacing: -0.5px;
|
letter-spacing: -0.5px;
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,8 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="docs">
|
<div class="docs">
|
||||||
<div class="docs__top">
|
<ui-title>
|
||||||
<div class="container">
|
<h1>{{ t('docs.policy.title') }}</h1>
|
||||||
<div class="docs__top-wrapper">
|
</ui-title>
|
||||||
<h1 class="docs__top-title">{{ t('docs.policy.title') }}</h1>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="docs__main">
|
<div class="docs__main">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div
|
<div
|
||||||
|
|
@ -35,36 +31,8 @@ setPageTitle(t('breadcrumbs.policy'));
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.docs {
|
.docs {
|
||||||
&__top {
|
|
||||||
padding-block: 50px;
|
|
||||||
background-color: #f8f8f8;
|
|
||||||
|
|
||||||
&-wrapper {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
gap: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-title {
|
|
||||||
font-family: "Playfair Display", sans-serif;
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 36px;
|
|
||||||
letter-spacing: -0.5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-text {
|
|
||||||
max-width: 600px;
|
|
||||||
text-align: center;
|
|
||||||
color: #4b5563;
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 400;
|
|
||||||
letter-spacing: -0.5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__main {
|
&__main {
|
||||||
background-color: $white;
|
background-color: $main;
|
||||||
padding-block: 50px 100px;
|
padding-block: 50px 100px;
|
||||||
|
|
||||||
&-wrapper {
|
&-wrapper {
|
||||||
|
|
@ -77,7 +45,7 @@ setPageTitle(t('breadcrumbs.policy'));
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 30px;
|
gap: 30px;
|
||||||
|
|
||||||
color: #1a1a1a;
|
color: $primary_dark;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
letter-spacing: -0.5px;
|
letter-spacing: -0.5px;
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,8 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="docs">
|
<div class="docs">
|
||||||
<div class="docs__top">
|
<ui-title>
|
||||||
<div class="container">
|
<h1>{{ t('docs.return.title') }}</h1>
|
||||||
<div class="docs__top-wrapper">
|
</ui-title>
|
||||||
<h1 class="docs__top-title">{{ t('docs.return.title') }}</h1>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="docs__main">
|
<div class="docs__main">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div
|
<div
|
||||||
|
|
@ -35,36 +31,8 @@ setPageTitle(t('breadcrumbs.return'));
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.docs {
|
.docs {
|
||||||
&__top {
|
|
||||||
padding-block: 50px;
|
|
||||||
background-color: #f8f8f8;
|
|
||||||
|
|
||||||
&-wrapper {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
gap: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-title {
|
|
||||||
font-family: "Playfair Display", sans-serif;
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 36px;
|
|
||||||
letter-spacing: -0.5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-text {
|
|
||||||
max-width: 600px;
|
|
||||||
text-align: center;
|
|
||||||
color: #4b5563;
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 400;
|
|
||||||
letter-spacing: -0.5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__main {
|
&__main {
|
||||||
background-color: $white;
|
background-color: $main;
|
||||||
padding-block: 50px 100px;
|
padding-block: 50px 100px;
|
||||||
|
|
||||||
&-wrapper {
|
&-wrapper {
|
||||||
|
|
@ -77,7 +45,7 @@ setPageTitle(t('breadcrumbs.return'));
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 30px;
|
gap: 30px;
|
||||||
|
|
||||||
color: #1a1a1a;
|
color: $primary_dark;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
letter-spacing: -0.5px;
|
letter-spacing: -0.5px;
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,8 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="docs">
|
<div class="docs">
|
||||||
<div class="docs__top">
|
<ui-title>
|
||||||
<div class="container">
|
<h1>{{ t('docs.shipping.title') }}</h1>
|
||||||
<div class="docs__top-wrapper">
|
</ui-title>
|
||||||
<h1 class="docs__top-title">{{ t('docs.shipping.title') }}</h1>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="docs__main">
|
<div class="docs__main">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div
|
<div
|
||||||
|
|
@ -35,36 +31,8 @@ setPageTitle(t('breadcrumbs.shipping'));
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.docs {
|
.docs {
|
||||||
&__top {
|
|
||||||
padding-block: 50px;
|
|
||||||
background-color: #f8f8f8;
|
|
||||||
|
|
||||||
&-wrapper {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
gap: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-title {
|
|
||||||
font-family: "Playfair Display", sans-serif;
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 36px;
|
|
||||||
letter-spacing: -0.5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-text {
|
|
||||||
max-width: 600px;
|
|
||||||
text-align: center;
|
|
||||||
color: #4b5563;
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 400;
|
|
||||||
letter-spacing: -0.5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__main {
|
&__main {
|
||||||
background-color: $white;
|
background-color: $main;
|
||||||
padding-block: 50px 100px;
|
padding-block: 50px 100px;
|
||||||
|
|
||||||
&-wrapper {
|
&-wrapper {
|
||||||
|
|
@ -77,7 +45,7 @@ setPageTitle(t('breadcrumbs.shipping'));
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 30px;
|
gap: 30px;
|
||||||
|
|
||||||
color: #1a1a1a;
|
color: $primary_dark;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
letter-spacing: -0.5px;
|
letter-spacing: -0.5px;
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,8 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="docs">
|
<div class="docs">
|
||||||
<div class="docs__top">
|
<ui-title>
|
||||||
<div class="container">
|
<h1>{{ t('docs.terms.title') }}</h1>
|
||||||
<div class="docs__top-wrapper">
|
</ui-title>
|
||||||
<h1 class="docs__top-title">{{ t('docs.terms.title') }}</h1>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="docs__main">
|
<div class="docs__main">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div
|
<div
|
||||||
|
|
@ -35,36 +31,8 @@ setPageTitle(t('breadcrumbs.terms'));
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.docs {
|
.docs {
|
||||||
&__top {
|
|
||||||
padding-block: 50px;
|
|
||||||
background-color: #f8f8f8;
|
|
||||||
|
|
||||||
&-wrapper {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
gap: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-title {
|
|
||||||
font-family: "Playfair Display", sans-serif;
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 36px;
|
|
||||||
letter-spacing: -0.5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-text {
|
|
||||||
max-width: 600px;
|
|
||||||
text-align: center;
|
|
||||||
color: #4b5563;
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 400;
|
|
||||||
letter-spacing: -0.5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__main {
|
&__main {
|
||||||
background-color: $white;
|
background-color: $main;
|
||||||
padding-block: 50px 100px;
|
padding-block: 50px 100px;
|
||||||
|
|
||||||
&-wrapper {
|
&-wrapper {
|
||||||
|
|
@ -77,7 +45,7 @@ setPageTitle(t('breadcrumbs.terms'));
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 30px;
|
gap: 30px;
|
||||||
|
|
||||||
color: #1a1a1a;
|
color: $primary_dark;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
letter-spacing: -0.5px;
|
letter-spacing: -0.5px;
|
||||||
|
|
|
||||||
|
|
@ -76,7 +76,6 @@
|
||||||
{{ t('buttons.addToCart') }}
|
{{ t('buttons.addToCart') }}
|
||||||
</ui-button>
|
</ui-button>
|
||||||
<ui-button
|
<ui-button
|
||||||
class="product__main-button"
|
|
||||||
@click="overwriteWishlist({
|
@click="overwriteWishlist({
|
||||||
type: (isProductInWishlist ? 'remove' : 'add'),
|
type: (isProductInWishlist ? 'remove' : 'add'),
|
||||||
productUuid: product.uuid,
|
productUuid: product.uuid,
|
||||||
|
|
@ -88,6 +87,13 @@
|
||||||
<icon name="mdi:cards-heart-outline" size="16" />
|
<icon name="mdi:cards-heart-outline" size="16" />
|
||||||
{{ isProductInWishlist ? t('buttons.removeFromWishlist') : t('buttons.addToWishlist') }}
|
{{ isProductInWishlist ? t('buttons.removeFromWishlist') : t('buttons.addToWishlist') }}
|
||||||
</ui-button>
|
</ui-button>
|
||||||
|
<ui-button
|
||||||
|
:type="'button'"
|
||||||
|
@click="buyProduct(product.uuid)"
|
||||||
|
:isLoading="buyLoading"
|
||||||
|
>
|
||||||
|
{{ t('buttons.buyNow') }}
|
||||||
|
</ui-button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -153,7 +159,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import {useProductBySlug, useProducts} from '@composables/products';
|
import {useProductBySlug, useProducts, useProductBuy} from '@composables/products';
|
||||||
import {usePageTitle} from '@composables/utils';
|
import {usePageTitle} from '@composables/utils';
|
||||||
import {useScrollTo} from '@composables/scrollTo';
|
import {useScrollTo} from '@composables/scrollTo';
|
||||||
import { Swiper, SwiperSlide } from 'swiper/vue';
|
import { Swiper, SwiperSlide } from 'swiper/vue';
|
||||||
|
|
@ -171,6 +177,7 @@ const { $appHelpers } = useNuxtApp();
|
||||||
|
|
||||||
const { setPageTitle } = usePageTitle();
|
const { setPageTitle } = usePageTitle();
|
||||||
const { scrollTo } = useScrollTo();
|
const { scrollTo } = useScrollTo();
|
||||||
|
const { buyProduct, loading: buyLoading } = useProductBuy();
|
||||||
|
|
||||||
const slug = useRouteParams<string>('slug');
|
const slug = useRouteParams<string>('slug');
|
||||||
|
|
||||||
|
|
@ -306,12 +313,12 @@ watch(
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.product {
|
.product {
|
||||||
background-color: $white;
|
background-color: $main;
|
||||||
padding-block: 50px 100px;
|
padding-block: 50px 100px;
|
||||||
|
|
||||||
&__title {
|
&__title {
|
||||||
font-family: "Playfair Display", sans-serif;
|
font-family: "Playfair Display", sans-serif;
|
||||||
color: #1e1e1e;
|
color: $primary_dark;
|
||||||
font-size: 36px;
|
font-size: 36px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
@ -338,13 +345,12 @@ watch(
|
||||||
width: 75px;
|
width: 75px;
|
||||||
height: 75px;
|
height: 75px;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
border-radius: $default_border_radius;
|
border-radius: $less_border_radius;
|
||||||
background-color: $white;
|
background-color: $main;
|
||||||
border: 2px solid $white;
|
border: 2px solid $main;
|
||||||
transition: 0.2s;
|
|
||||||
|
|
||||||
@include hover {
|
@include hover {
|
||||||
box-shadow: 0 0 10px 1px $accent;
|
box-shadow: 0 0 10px 1px $primary;
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
box-shadow: 0 0 0 0 transparent;
|
box-shadow: 0 0 0 0 transparent;
|
||||||
|
|
@ -352,21 +358,21 @@ watch(
|
||||||
}
|
}
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
border: 2px solid $accent;
|
border: 2px solid $primary;
|
||||||
}
|
}
|
||||||
|
|
||||||
& img {
|
& img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
border-radius: $default_border_radius;
|
border-radius: $less_border_radius;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-main {
|
&-main {
|
||||||
width: 550px;
|
width: 550px;
|
||||||
border-radius: $default_border_radius;
|
border-radius: $less_border_radius;
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -377,7 +383,7 @@ watch(
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
|
|
||||||
&-brand {
|
&-brand {
|
||||||
color: #1a1a1a;
|
color: $primary_dark;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
letter-spacing: -0.15px;
|
letter-spacing: -0.15px;
|
||||||
|
|
@ -388,21 +394,21 @@ watch(
|
||||||
}
|
}
|
||||||
|
|
||||||
&-price {
|
&-price {
|
||||||
color: #1a1a1a;
|
color: $primary_dark;
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
letter-spacing: -0.5px;
|
letter-spacing: -0.5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-quantity {
|
&-quantity {
|
||||||
color: #1a1a1a;
|
color: $primary_dark;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
letter-spacing: -0.15px;
|
letter-spacing: -0.15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-description {
|
&-description {
|
||||||
color: #374151;
|
color: $secondary;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
letter-spacing: -0.5px;
|
letter-spacing: -0.5px;
|
||||||
|
|
@ -416,13 +422,13 @@ watch(
|
||||||
&__info {
|
&__info {
|
||||||
width: 400px;
|
width: 400px;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
border-radius: $default_border_radius;
|
border-radius: $less_border_radius;
|
||||||
background-color: $accent;
|
background-color: $primary;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
|
|
||||||
&-inner {
|
&-inner {
|
||||||
border-radius: $default_border_radius;
|
border-radius: $less_border_radius;
|
||||||
border: 2px solid $white;
|
border: 2px solid $main;
|
||||||
padding: 25px;
|
padding: 25px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
@ -435,27 +441,27 @@ watch(
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
& p {
|
& p {
|
||||||
color: $white;
|
color: $main;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
& img {
|
& img {
|
||||||
width: 75px;
|
width: 75px;
|
||||||
border-radius: $default_border_radius;
|
border-radius: $less_border_radius;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-price {
|
&-price {
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
background-color: $accentDark;
|
background-color: $primary_dark;
|
||||||
border-radius: $default_border_radius;
|
border-radius: $less_border_radius;
|
||||||
border: 1px solid $white;
|
border: 1px solid $main;
|
||||||
padding: 7px 20px;
|
padding: 7px 20px;
|
||||||
|
|
||||||
font-size: 40px;
|
font-size: 40px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: $white;
|
color: $main;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-bottom {
|
&-bottom {
|
||||||
|
|
@ -470,13 +476,13 @@ watch(
|
||||||
&-button {
|
&-button {
|
||||||
width: unset !important;
|
width: unset !important;
|
||||||
padding-inline: 25px !important;
|
padding-inline: 25px !important;
|
||||||
background-color: $white !important;
|
background-color: $main !important;
|
||||||
color: $accent !important;
|
color: $primary !important;
|
||||||
|
|
||||||
font-size: 20px !important;
|
font-size: 20px !important;
|
||||||
|
|
||||||
@include hover {
|
@include hover {
|
||||||
background-color: #e3e3e3 !important;
|
background-color: $main_hover !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -485,17 +491,16 @@ watch(
|
||||||
width: 41px;
|
width: 41px;
|
||||||
height: 41px;
|
height: 41px;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
background-color: $white;
|
background-color: $main;
|
||||||
border-radius: $default_border_radius;
|
border-radius: $less_border_radius;
|
||||||
display: grid;
|
display: grid;
|
||||||
place-items: center;
|
place-items: center;
|
||||||
transition: 0.2s;
|
|
||||||
|
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
color: $accent;
|
color: $primary;
|
||||||
|
|
||||||
@include hover {
|
@include hover {
|
||||||
background-color: #e3e3e3;
|
background-color: $main_hover;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -503,8 +508,8 @@ watch(
|
||||||
|
|
||||||
.tools {
|
.tools {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-radius: 4px;
|
border-radius: $less_border_radius;
|
||||||
background-color: #111827;
|
background-color: $primary;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr 2fr 1fr;
|
grid-template-columns: 1fr 2fr 1fr;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
|
|
@ -517,31 +522,30 @@ watch(
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
&-count {
|
&-count {
|
||||||
border-left: 1px solid $accent;
|
border-left: 1px solid $primary;
|
||||||
border-right: 1px solid $accent;
|
border-right: 1px solid $primary;
|
||||||
|
|
||||||
color: $white;
|
color: $main;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-button {
|
&-button {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background-color: #111827;
|
background-color: $primary;
|
||||||
border-radius: 4px 0 0 4px;
|
border-radius: $less_border_radius 0 0 $less_border_radius;
|
||||||
transition: 0.2s;
|
|
||||||
|
|
||||||
color: $white;
|
color: $main;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
|
||||||
@include hover {
|
@include hover {
|
||||||
background-color: #222c41;
|
background-color: $primary_hover;
|
||||||
color: $white;
|
color: $main;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
border-radius: 0 4px 4px 0;
|
border-radius: 0 $less_border_radius $less_border_radius 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -551,16 +555,16 @@ watch(
|
||||||
padding-top: 100px;
|
padding-top: 100px;
|
||||||
|
|
||||||
&__wrapper {
|
&__wrapper {
|
||||||
background-color: $white;
|
background-color: $main;
|
||||||
border-radius: $default_border_radius;
|
border-radius: $less_border_radius;
|
||||||
box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.2);
|
box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.2);
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__title {
|
&__title {
|
||||||
padding-bottom: 10px;
|
padding-bottom: 10px;
|
||||||
border-bottom: 2px solid $accentDark;
|
border-bottom: 2px solid $primary_dark;
|
||||||
color: $black;
|
color: $primary_dark;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
@ -579,7 +583,7 @@ watch(
|
||||||
|
|
||||||
&-title {
|
&-title {
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
color: $black;
|
color: $primary_dark;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
@ -599,12 +603,12 @@ watch(
|
||||||
& span {
|
& span {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
background-color: $white;
|
background-color: $main;
|
||||||
padding-bottom: 1px;
|
padding-bottom: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
border-bottom: 1px dashed $accent;
|
border-bottom: 1px dashed $primary;
|
||||||
content: "";
|
content: "";
|
||||||
min-width: 100%;
|
min-width: 100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -629,17 +633,17 @@ watch(
|
||||||
|
|
||||||
.similar {
|
.similar {
|
||||||
margin-top: 100px;
|
margin-top: 100px;
|
||||||
background-color: $white;
|
background-color: $main;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 25px;
|
gap: 25px;
|
||||||
padding: 45px 25px;
|
padding: 45px 25px;
|
||||||
border-radius: 8px;
|
border-radius: $default_border_radius;
|
||||||
border: 1px solid #e5e7eb;
|
border: 1px solid $border;
|
||||||
|
|
||||||
&__title {
|
&__title {
|
||||||
font-family: "Playfair Display", sans-serif;
|
font-family: "Playfair Display", sans-serif;
|
||||||
color: $black;
|
color: $primary_dark;
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
letter-spacing: -0.5px;
|
letter-spacing: -0.5px;
|
||||||
|
|
@ -666,20 +670,18 @@ watch(
|
||||||
padding-inline: 10px;
|
padding-inline: 10px;
|
||||||
aspect-ratio: 1;
|
aspect-ratio: 1;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background-color: $white;
|
background-color: $main;
|
||||||
transition: 0.2s;
|
|
||||||
|
|
||||||
@include hover {
|
@include hover {
|
||||||
background-color: $accentLight;
|
background-color: $main_hover;
|
||||||
|
|
||||||
& span {
|
& span {
|
||||||
color: $white;
|
color: $main;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
& span {
|
& span {
|
||||||
transition: 0.2s;
|
color: $primary;
|
||||||
color: $accent;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.next {
|
&.next {
|
||||||
|
|
|
||||||
|
|
@ -20,11 +20,11 @@ setPageTitle(t('breadcrumbs.balance'));
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.balance {
|
.balance {
|
||||||
background-color: $white;
|
background-color: $main;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.2);
|
box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.2);
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
border-radius: $default_border_radius;
|
border-radius: $less_border_radius;
|
||||||
height: fit-content;
|
height: fit-content;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
|
||||||
|
|
@ -144,9 +144,9 @@ setPageTitle(t('breadcrumbs.orders'));
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.orders {
|
.orders {
|
||||||
background-color: $white;
|
background-color: $main;
|
||||||
border: 1px solid #e5e7eb;
|
border: 1px solid $border;
|
||||||
border-radius: 8px;
|
border-radius: $default_border_radius;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
|
|
@ -160,7 +160,7 @@ setPageTitle(t('breadcrumbs.orders'));
|
||||||
gap: 50px;
|
gap: 50px;
|
||||||
|
|
||||||
&-title {
|
&-title {
|
||||||
color: #111827;
|
color: $primary;
|
||||||
font-family: "Playfair Display", sans-serif;
|
font-family: "Playfair Display", sans-serif;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
|
|
@ -168,10 +168,10 @@ setPageTitle(t('breadcrumbs.orders'));
|
||||||
}
|
}
|
||||||
|
|
||||||
&__search {
|
&__search {
|
||||||
border-radius: $default_border_radius;
|
border-radius: $less_border_radius;
|
||||||
border: 1px solid #dedede;
|
border: 1px solid $border;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background-color: $white;
|
background-color: $main;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -182,25 +182,24 @@ setPageTitle(t('breadcrumbs.orders'));
|
||||||
padding-inline: 15px;
|
padding-inline: 15px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
color: #606266;
|
color: $text;
|
||||||
}
|
}
|
||||||
|
|
||||||
& button {
|
& button {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding-inline: 10px;
|
padding-inline: 10px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border-radius: $default_border_radius;
|
border-radius: $less_border_radius;
|
||||||
background-color: rgba($accent, 0.2);
|
background-color: rgba($primary, 0.2);
|
||||||
border: 1px solid $accent;
|
border: 1px solid $primary;
|
||||||
display: grid;
|
display: grid;
|
||||||
place-items: center;
|
place-items: center;
|
||||||
transition: 0.2s;
|
|
||||||
|
|
||||||
color: $accent;
|
color: $primary;
|
||||||
|
|
||||||
@include hover {
|
@include hover {
|
||||||
background-color: $accent;
|
background-color: $primary;
|
||||||
color: $white;
|
color: $main;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -222,13 +221,14 @@ setPageTitle(t('breadcrumbs.orders'));
|
||||||
}
|
}
|
||||||
|
|
||||||
&__empty {
|
&__empty {
|
||||||
background-color: $white;
|
background-color: $main;
|
||||||
padding: 20px;
|
padding: 24px 32px;
|
||||||
box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.2);
|
border-radius: $less_border_radius;
|
||||||
border-radius: $default_border_radius;
|
|
||||||
|
|
||||||
& p {
|
& p {
|
||||||
font-weight: 600;
|
font-weight: 500;
|
||||||
|
font-size: 18px;
|
||||||
|
color: $primary;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -68,15 +68,15 @@ setPageTitle(t('breadcrumbs.promocodes'));
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.promocodes {
|
.promocodes {
|
||||||
background-color: $white;
|
background-color: $main;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border: 1px solid #e5e7eb;
|
border: 1px solid $border;
|
||||||
border-radius: 8px;
|
border-radius: $default_border_radius;
|
||||||
height: fit-content;
|
height: fit-content;
|
||||||
padding: 24px 32px;
|
padding: 24px 32px;
|
||||||
|
|
||||||
&__title {
|
&__title {
|
||||||
color: #111827;
|
color: $primary;
|
||||||
font-family: "Playfair Display", sans-serif;
|
font-family: "Playfair Display", sans-serif;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
|
|
@ -90,8 +90,8 @@ setPageTitle(t('breadcrumbs.promocodes'));
|
||||||
}
|
}
|
||||||
|
|
||||||
&__item {
|
&__item {
|
||||||
border-radius: $default_border_radius;
|
border-radius: $less_border_radius;
|
||||||
border: 1px solid #e5e7eb;
|
border: 1px solid $border;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
@ -103,7 +103,7 @@ setPageTitle(t('breadcrumbs.promocodes'));
|
||||||
padding: 7px 15px;
|
padding: 7px 15px;
|
||||||
|
|
||||||
& p {
|
& p {
|
||||||
color: #4b5563;
|
color: $secondary;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
|
@ -111,11 +111,10 @@ setPageTitle(t('breadcrumbs.promocodes'));
|
||||||
|
|
||||||
&-button {
|
&-button {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: 0.2s;
|
color: $secondary;
|
||||||
color: #4b5563;
|
|
||||||
|
|
||||||
@include hover {
|
@include hover {
|
||||||
color: #2f353f;
|
color: $secondary_hover;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -126,19 +125,19 @@ setPageTitle(t('breadcrumbs.promocodes'));
|
||||||
}
|
}
|
||||||
|
|
||||||
&-text {
|
&-text {
|
||||||
color: #4b5563;
|
color: $secondary;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-expire {
|
&-expire {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: #e5e7eb;
|
background-color: $border;
|
||||||
padding-inline: 15px;
|
padding-inline: 15px;
|
||||||
display: grid;
|
display: grid;
|
||||||
place-items: center;
|
place-items: center;
|
||||||
|
|
||||||
color: #4b5563;
|
color: $secondary;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -103,10 +103,10 @@ setPageTitle(t('breadcrumbs.settings'));
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.settings {
|
.settings {
|
||||||
background-color: $white;
|
background-color: $main;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border: 1px solid #e5e7eb;
|
border: 1px solid $border;
|
||||||
border-radius: 8px;
|
border-radius: $default_border_radius;
|
||||||
height: fit-content;
|
height: fit-content;
|
||||||
|
|
||||||
&__top {
|
&__top {
|
||||||
|
|
@ -115,7 +115,7 @@ setPageTitle(t('breadcrumbs.settings'));
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
gap: 25px;
|
gap: 25px;
|
||||||
padding: 24px 32px;
|
padding: 24px 32px;
|
||||||
border-bottom: 1px solid #e5e7eb;
|
border-bottom: 1px solid $border;
|
||||||
|
|
||||||
&-left {
|
&-left {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -129,14 +129,14 @@ setPageTitle(t('breadcrumbs.settings'));
|
||||||
gap: 5px;
|
gap: 5px;
|
||||||
|
|
||||||
& h2 {
|
& h2 {
|
||||||
color: #111827;
|
color: $primary;
|
||||||
font-family: "Playfair Display", sans-serif;
|
font-family: "Playfair Display", sans-serif;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
& p {
|
& p {
|
||||||
color: #4b5563;
|
color: $text;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
|
@ -147,8 +147,8 @@ setPageTitle(t('breadcrumbs.settings'));
|
||||||
width: 80px;
|
width: 80px;
|
||||||
height: 80px;
|
height: 80px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
border: 2px solid #e5e7eb;
|
border: 2px solid $border;
|
||||||
background-color: rgba($accent, 0.2);
|
background-color: rgba($primary, 0.2);
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
|
|
@ -166,7 +166,7 @@ setPageTitle(t('breadcrumbs.settings'));
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
& span {
|
& span {
|
||||||
color: #a9a9a9;
|
color: $disabled_secondary;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -185,11 +185,10 @@ setPageTitle(t('breadcrumbs.settings'));
|
||||||
display: grid;
|
display: grid;
|
||||||
place-items: center;
|
place-items: center;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: 0.2s;
|
|
||||||
background-color: rgba(0, 0, 0, 0.5);
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
|
||||||
& span {
|
& span {
|
||||||
color: $white !important;
|
color: $main !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -200,28 +199,27 @@ setPageTitle(t('breadcrumbs.settings'));
|
||||||
|
|
||||||
&__button {
|
&__button {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border-radius: $default_border_radius;
|
border-radius: $less_border_radius;
|
||||||
padding: 5px 15px;
|
padding: 5px 15px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
transition: 0.2s;
|
|
||||||
|
|
||||||
color: #4b5563;
|
color: $text;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
|
||||||
@include hover {
|
@include hover {
|
||||||
background-color: #c0c0c0;
|
background-color: $main_hover;
|
||||||
color: #373f49;
|
color: $secondary;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:disabled {
|
&:disabled {
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
|
|
||||||
@include hover {
|
@include hover {
|
||||||
background-color: #c0c0c0;
|
background-color: $main_hover;
|
||||||
color: #4b5563;
|
color: $secondary;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -235,7 +233,7 @@ setPageTitle(t('breadcrumbs.settings'));
|
||||||
& p {
|
& p {
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: $accentDark;
|
color: $primary_dark;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -20,7 +20,7 @@ setPageTitle(t('breadcrumbs.newPassword'));
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.auth {
|
.auth {
|
||||||
background-color: #e5e7eb;
|
background-color: $border;
|
||||||
|
|
||||||
&__wrapper {
|
&__wrapper {
|
||||||
padding-block: 100px;
|
padding-block: 100px;
|
||||||
|
|
|
||||||
|
|
@ -142,7 +142,7 @@ const hasData = (blockKey: string): boolean => {
|
||||||
}
|
}
|
||||||
|
|
||||||
&__title {
|
&__title {
|
||||||
color: #1a1a1a;
|
color: $primary_dark;
|
||||||
font-family: "Playfair Display", sans-serif;
|
font-family: "Playfair Display", sans-serif;
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
|
@ -158,29 +158,29 @@ const hasData = (blockKey: string): boolean => {
|
||||||
top: 50%;
|
top: 50%;
|
||||||
right: 24px;
|
right: 24px;
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
color: #8c8c8c;
|
color: $disabled_secondary;
|
||||||
}
|
}
|
||||||
|
|
||||||
& input {
|
& input {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
border: 2px solid #e5e7eb;
|
border: 2px solid $border;
|
||||||
padding: 15px 20px;
|
padding: 15px 20px;
|
||||||
|
|
||||||
color: $black;
|
color: $primary_dark;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
letter-spacing: -0.5px;
|
letter-spacing: -0.5px;
|
||||||
|
|
||||||
&::placeholder {
|
&::placeholder {
|
||||||
color: #444444;
|
color: $secondary_hover;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__block {
|
&__block {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-radius: $default_border_radius;
|
border-radius: $less_border_radius;
|
||||||
padding: 25px;
|
padding: 25px;
|
||||||
|
|
||||||
&-top {
|
&-top {
|
||||||
|
|
@ -190,10 +190,10 @@ const hasData = (blockKey: string): boolean => {
|
||||||
|
|
||||||
& h6 {
|
& h6 {
|
||||||
padding-bottom: 10px;
|
padding-bottom: 10px;
|
||||||
border-bottom: 2px solid $accentDark;
|
border-bottom: 2px solid $primary_dark;
|
||||||
|
|
||||||
font-family: "Playfair Display", sans-serif;
|
font-family: "Playfair Display", sans-serif;
|
||||||
color: #1a1a1a;
|
color: $primary_dark;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
letter-spacing: -0.5px;
|
letter-spacing: -0.5px;
|
||||||
|
|
@ -203,19 +203,16 @@ const hasData = (blockKey: string): boolean => {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: grid;
|
display: grid;
|
||||||
place-items: center;
|
place-items: center;
|
||||||
border-radius: 8px;
|
border-radius: $default_border_radius;
|
||||||
padding: 5px 12px;
|
padding: 5px 12px;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
transition: 0.2s;
|
color: $primary_dark;
|
||||||
color: #000;
|
|
||||||
|
|
||||||
@include hover {
|
@include hover {
|
||||||
background-color: #dcdcdc;
|
background-color: $main_hover;
|
||||||
}
|
}
|
||||||
|
|
||||||
& span {
|
& span {
|
||||||
transition: 0.2s;
|
|
||||||
|
|
||||||
&.rotated {
|
&.rotated {
|
||||||
transform: rotate(-180deg);
|
transform: rotate(-180deg);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="shop">
|
<div class="shop">
|
||||||
<div class="shop__top">
|
<ui-title>
|
||||||
<div class="container">
|
<h1>{{ t('shop.title') }}</h1>
|
||||||
<div class="shop__top-wrapper">
|
<p>{{ t('shop.text') }}</p>
|
||||||
<h1 class="shop__top-title">{{ t('shop.title') }}</h1>
|
</ui-title>
|
||||||
<p class="shop__top-text">{{ t('shop.text') }}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="shop__main">
|
<div class="shop__main">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="shop__main-wrapper">
|
<div class="shop__main-wrapper">
|
||||||
|
|
@ -30,42 +26,10 @@ setPageTitle(t('breadcrumbs.shop'));
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.shop {
|
.shop {
|
||||||
&__top {
|
|
||||||
padding-block: 50px;
|
|
||||||
background-color: #f8f8f8;
|
|
||||||
|
|
||||||
&-wrapper {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
gap: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-title {
|
|
||||||
font-family: "Playfair Display", sans-serif;
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 36px;
|
|
||||||
letter-spacing: -0.5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-text {
|
|
||||||
max-width: 600px;
|
|
||||||
text-align: center;
|
|
||||||
color: #4b5563;
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 400;
|
|
||||||
letter-spacing: -0.5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__main {
|
&__main {
|
||||||
background-color: $white;
|
background-color: $main;
|
||||||
padding-block: 70px;
|
padding-block: 70px;
|
||||||
border-top: 1px solid #f3f4f6;
|
border-top: 1px solid $border;
|
||||||
|
|
||||||
&-wrapper {
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -107,7 +107,7 @@ setPageTitle(t('breadcrumbs.wishlist'));
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.wishlist {
|
.wishlist {
|
||||||
padding-block: 50px 100px;
|
padding-block: 50px 100px;
|
||||||
background-color: $white;
|
background-color: $main;
|
||||||
|
|
||||||
&__wrapper {
|
&__wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -121,7 +121,7 @@ setPageTitle(t('breadcrumbs.wishlist'));
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
&-title {
|
&-title {
|
||||||
color: #1a1a1a;
|
color: $primary_dark;
|
||||||
font-family: "Playfair Display", sans-serif;
|
font-family: "Playfair Display", sans-serif;
|
||||||
font-size: 36px;
|
font-size: 36px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
|
@ -135,7 +135,7 @@ setPageTitle(t('breadcrumbs.wishlist'));
|
||||||
}
|
}
|
||||||
|
|
||||||
& p {
|
& p {
|
||||||
color: #4b5563;
|
color: $text;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
letter-spacing: -0.5px;
|
letter-spacing: -0.5px;
|
||||||
|
|
@ -154,5 +154,11 @@ setPageTitle(t('breadcrumbs.wishlist'));
|
||||||
gap: 25px;
|
gap: 25px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&__empty {
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 18px;
|
||||||
|
color: $primary;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -15,7 +15,7 @@ export default defineNuxtPlugin(() => {
|
||||||
|
|
||||||
const duration = 5000;
|
const duration = 5000;
|
||||||
const progressBar = h('div', {
|
const progressBar = h('div', {
|
||||||
class: 'el-notification__progress',
|
class: `el-notification__progress ${args.type}`,
|
||||||
style: {
|
style: {
|
||||||
animationDuration: `${duration}ms`,
|
animationDuration: `${duration}ms`,
|
||||||
},
|
},
|
||||||
|
|
@ -1,26 +0,0 @@
|
||||||
export default defineNuxtPlugin((nuxtApp) => {
|
|
||||||
const { $appHelpers } = nuxtApp;
|
|
||||||
|
|
||||||
const themeCookie = useCookie<'light' | 'dark'>($appHelpers.COOKIES_THEME_KEY, {
|
|
||||||
default: () => 'light',
|
|
||||||
path: '/',
|
|
||||||
});
|
|
||||||
|
|
||||||
const currentTheme = themeCookie.value || 'light';
|
|
||||||
|
|
||||||
if (import.meta.server) {
|
|
||||||
const event = useRequestEvent();
|
|
||||||
if (event) {
|
|
||||||
event.context.theme = currentTheme;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (import.meta.client) {
|
|
||||||
const html = document.documentElement;
|
|
||||||
if (currentTheme === 'dark') {
|
|
||||||
html.classList.add('dark');
|
|
||||||
} else {
|
|
||||||
html.classList.remove('dark');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
16
storefront/app/plugins/03.theme.ts
Normal file
16
storefront/app/plugins/03.theme.ts
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
export default defineNuxtPlugin((nuxtApp) => {
|
||||||
|
const { $appHelpers } = nuxtApp;
|
||||||
|
|
||||||
|
const themeCookie = useCookie<'light' | 'dark'>($appHelpers.COOKIES_THEME_KEY, {
|
||||||
|
default: () => 'light',
|
||||||
|
path: '/',
|
||||||
|
})
|
||||||
|
|
||||||
|
const theme = themeCookie.value || 'light'
|
||||||
|
|
||||||
|
useHead({
|
||||||
|
htmlAttrs: {
|
||||||
|
'data-theme': theme,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
@ -20,7 +20,8 @@
|
||||||
"readMore": "Read More",
|
"readMore": "Read More",
|
||||||
"sendMessage": "Send Message",
|
"sendMessage": "Send Message",
|
||||||
"saveChanges": "Save Changes",
|
"saveChanges": "Save Changes",
|
||||||
"clearAll": "Clear All"
|
"clearAll": "Clear All",
|
||||||
|
"buyNow": "Buy Now"
|
||||||
},
|
},
|
||||||
"errors": {
|
"errors": {
|
||||||
"required": "This field is required!",
|
"required": "This field is required!",
|
||||||
|
|
@ -216,7 +217,8 @@
|
||||||
"apply": "Apply",
|
"apply": "Apply",
|
||||||
"reset": "Reset",
|
"reset": "Reset",
|
||||||
"all": "All"
|
"all": "All"
|
||||||
}
|
},
|
||||||
|
"empty": "There are no products by these parameters."
|
||||||
},
|
},
|
||||||
"search": {
|
"search": {
|
||||||
"title": "Search Results",
|
"title": "Search Results",
|
||||||
|
|
|
||||||
|
|
@ -20,7 +20,8 @@
|
||||||
"readMore": "Читать далее",
|
"readMore": "Читать далее",
|
||||||
"sendMessage": "Отправить сообщение",
|
"sendMessage": "Отправить сообщение",
|
||||||
"saveChanges": "Сохранить изменения",
|
"saveChanges": "Сохранить изменения",
|
||||||
"clearAll": "Очистить всё"
|
"clearAll": "Очистить всё",
|
||||||
|
"buyNow": "Купить Сейчас"
|
||||||
},
|
},
|
||||||
"errors": {
|
"errors": {
|
||||||
"required": "Это поле обязательно!",
|
"required": "Это поле обязательно!",
|
||||||
|
|
@ -216,7 +217,8 @@
|
||||||
"apply": "Применить",
|
"apply": "Применить",
|
||||||
"reset": "Сбросить",
|
"reset": "Сбросить",
|
||||||
"all": "Все"
|
"all": "Все"
|
||||||
}
|
},
|
||||||
|
"empty": "По этим параметрам нет товаров."
|
||||||
},
|
},
|
||||||
"search": {
|
"search": {
|
||||||
"title": "Результаты поиска",
|
"title": "Результаты поиска",
|
||||||
|
|
|
||||||
2
storefront/nuxt-app.d.ts
vendored
2
storefront/nuxt-app.d.ts
vendored
|
|
@ -1,6 +1,6 @@
|
||||||
import type { ApolloClient, NormalizedCacheObject } from '@apollo/client/core';
|
import type { ApolloClient, NormalizedCacheObject } from '@apollo/client/core';
|
||||||
import type { ApolloError } from '@apollo/client/errors';
|
import type { ApolloError } from '@apollo/client/errors';
|
||||||
import type { INotificationArguments } from '~/plugins/03.notification'
|
import type { INotificationArguments } from '~/plugins/02.notification'
|
||||||
|
|
||||||
declare module '#app' {
|
declare module '#app' {
|
||||||
interface NuxtApp {
|
interface NuxtApp {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue