@ozdao/prometheus-framework 0.2.112 → 0.2.113

package/src/styles/base/shadow_transitions_hover_refactor.scss

@@ -63,6 +63,10 @@ body {
 		transition-duration: 0.45s;
 	}
 
+	.transition-delay-1 {
+		transition-delay: 1s;
+	}
+
 	// Shadows 
 	.bs-red { box-shadow: 0 0 5px red; }
 

package/src/styles/config.scss

@@ -41,8 +41,11 @@
     .#{$class-name}-#{$value-key}-negative {
       #{$css-property}: -$value;
     }
-    
-    @if $modifiers {
+  }
+
+  // Генерация классов с модификаторами
+  @if $modifiers {
+    @each $value-key, $value in $values {
       @each $modifier, $css-modifier in $modifiers {
         .#{$class-name}-#{$modifier}-#{$value-key} {
           #{$css-property}-#{$css-modifier}: $value;
@@ -65,8 +68,10 @@
           .#{$breakpoint-key}\:#{$class-name}-#{$value-key}-negative {
             #{$css-property}: calc(#{$value} * -1);
           }
+        }
 
-          @if $modifiers {
+        @if $modifiers {
+          @each $value-key, $value in $values {
             @each $modifier, $css-modifier in $modifiers {
               .#{$breakpoint-key}\:#{$class-name}-#{$modifier}-#{$value-key} {
                 #{$css-property}-#{$css-modifier}: $value;
@@ -82,8 +87,6 @@
   }
 }
 
-
-
 :root {
 	// THEME
 	color-scheme: light dark;
@@ -105,9 +108,9 @@
 	@include 	generate-vars-color('black');
 	--dark:   36,36,36; 	
 	@include 	generate-vars-color('dark');
-	--grey:   245,249,247; 
+	--grey:   180,180,180; 
 	@include 	generate-vars-color('grey');
-	--light:  249,251,252; 
+	--light:  245,249,247; 
 	@include 	generate-vars-color('light');
 	--white:  255,255,255;
 	@include 	generate-vars-color('white');
@@ -143,7 +146,9 @@
 	////////////////////////////////////////
 	// 3. TEXT VARIABLES
 	///////////////////////////////////////
-	--font: 'Avenir Next';
+	--font: 'Avenir Next World';
+	--font-main: 'Days One';
+	--font-second: 'Avenir Next World';
 	////////////////////////////////////////
 	// 4. BREAKPOINTS
 	///////////////////////////////////////
@@ -188,6 +193,7 @@ $rem: (
   '15r': 15rem,
   '10r': 10rem,
   '8r': 8rem,
+  '6r': 5rem,
   '5r': 5rem,
   '4r': 4rem,
   '3r': 3rem,
@@ -276,7 +282,7 @@ body {
 
 	@include generate-bg-classes('bg-black', 	'black');
 	@include generate-bg-classes('bg-dark', 	'dark');
-	@include generate-bg-classes('bg-grey', 	'grey');
+	@include generate-bg-classes('bg-light', 	'grey');
 	@include generate-bg-classes('bg-light', 	'light');
 	@include generate-bg-classes('bg-white', 	'white');
 }

package/src/styles/layout.scss

@@ -8,6 +8,7 @@ html, body {
 	height: 100vh;
 }
 
+
 html {
 	backface-visibility: hidden;
 	text-rendering: geometricPrecision;
@@ -18,18 +19,46 @@ html {
 body {
 	background: rgb(var(--white));
 	color: rgb(var(--black));; 
-	font-family: var(--font) !important; 
-
-	-ms-overflow-style: none;
+	// -ms-overflow-style: none;
 	// overflow-y: hidden;
-	overflow-x: hidden;
+	// overflow-x: hidden;
+}
+
+
+html,
+body {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  // overflow-x: hidden;
+}
+
+#app {
+	position: relative;
+	width: 100%;
+	height: 100%;
 }
 
 #app-wrapper {
 	display: grid;
+	grid-template-rows: minmax(1px, auto) 1fr;
 	position: relative;
-	height: 100vh;
-  overflow: hidden;
+	height: 100%;
+	width: 100%;
+}
+
+#screen {
+	// min-height: 100%;
+}
+
+// TURN OFF SCROLL AND CUROURS
+// * {
+//   cursor: none !important;
+//   > * {
+//     cursor: none !important;
+//   }
+//   > *::-webkit-scrollbar {
 
-  grid-template-rows: min-content;
-}
+//     display: none !important;
+//   }
+// }

package/src/styles/typography.scss

@@ -1,33 +1,33 @@
-// Headers
-.tx-extra   { padding: var(--extra);  }
-.tx-big   	{ padding: var(--big);  	}
-.tx-semi  	{ padding: var(--semi);   } 
-.tx-medium  { padding: var(--medium); }
-.tx-regular { padding: var(--regular);}
-.tx-small 	{ padding: var(--small);  } 
-.tx-thin  	{ padding: var(--thin);   } 
-.tx-zero  	{ padding: 0;   		} 
-// Font Styles
-.h0  		{ font-weight: 500; font-size: 8.000rem; 	line-height: 1.000; letter-spacing: -0.1rem; 	text-transform: none;				}
-h1,.h1  { font-weight: 500; font-size: 3.500rem; 	line-height: 1.000; letter-spacing: -0.1rem; 	text-transform: none;				}
-h2,.h2  { font-weight: 500; font-size: 3.000rem; 	line-height: 1.000; letter-spacing: -0.0rem;	text-transform: none;				}
-h3,.h3  { font-weight: 500; font-size: 1.750rem; 	line-height: 1.250; letter-spacing: -0.0rem;	text-transform: none;				}
-h4,.h4  { font-weight: 500; font-size: 1.250rem; 	line-height: 1.250; letter-spacing: +0.0rem; 	text-transform: none;				}
-h5,.h5 	{ font-weight: 500; font-size: 1.000rem; 	line-height: 1.250;	letter-spacing: -0.0rem; 	text-transform: none;				}
+// Global Font Family
+body {
+	font-family: var(--font); 
+}
+
+.font-main {
+	font-family: var(--font-main); 
+}
 
-// h1,.h1  { font-weight: 500; font-size: 3.000rem; 	line-height: 1.000; letter-spacing: -0.1rem; 	text-transform: none;				}
-// h2,.h2  { font-weight: 500; font-size: 2.500rem; 	line-height: 1.000; letter-spacing: -0.0rem;	text-transform: none;				}
-// h3,.h3  { font-weight: 500; font-size: 1.750rem; 	line-height: 1.250; letter-spacing: -0.0rem;	text-transform: none;				}
-// h4,.h4  { font-weight: 500; font-size: 1.250rem; 	line-height: 1.250; letter-spacing: +0.0rem; 	text-transform: none;				}
-// h5,.h5 	{ font-weight: 500; font-size: 1.000rem; 	line-height: 1.250;	letter-spacing: -0.0rem; 	text-transform: none;				}
+.font-second {
+	font-family: var(--font-second); 
+}
+
+// Font Styles
+.h0  		{ font-family: var(--font-main); font-weight: 500; font-size: 8.000rem; 	line-height: 1.000; letter-spacing: -0.1rem; 	text-transform: none; }
+h1,.h1  { font-family: var(--font-main); font-weight: 500; font-size: 3.500rem; 	line-height: 1.000; letter-spacing: -0.1rem; 	text-transform: none; }
+h2,.h2  { font-family: var(--font-main); font-weight: 500; font-size: 3.000rem; 	line-height: 1.000; letter-spacing: -0.1rem;	text-transform: none; }
+h3,.h3  { font-family: var(--font-main); font-weight: 500; font-size: 1.750rem; 	line-height: 1.250; letter-spacing: -0.0rem;	text-transform: none; }
+h4,.h4  { font-family: var(--font-main); font-weight: 500; font-size: 1.250rem; 	line-height: 1.250; letter-spacing: +0.0rem; 	text-transform: none; }
+h5,.h5 	{ font-family: var(--font-main); font-weight: 500; font-size: 1.000rem; 	line-height: 1.250;	letter-spacing: -0.0rem; 	text-transform: none; }
 
 // Typogragy Styles
-		.p-small     	{ font-weight: 400;				font-size: 0.75rem;		line-height: 1.250; }
-p, 	.p-medium     { font-weight: 400;				font-size: 1.00rem;		line-height: 1.250	}
-		.p-big     		{ font-weight: 400; 			font-size: 1.50rem;		line-height: 1.250;	letter-spacing: +0.0rem;	}
+		.p-small     	{ font-family: var(--font-second); font-weight: 400;				font-size: 0.75rem;		line-height: 1.250; }
+p, 	.p-medium     { font-family: var(--font-second); font-weight: 400;				font-size: 1.00rem;		line-height: 1.250	}
+		.p-big     		{ font-family: var(--font-second); font-weight: 400; 			font-size: 1.40rem;		line-height: 1.250;	letter-spacing: +0.0rem;	}
 
 b  { font-weight: 600}
 
+a, button { font-family: var(--font-main); }
+
 a  				{	transition: all 0.233s ease; }
 a:hover   { cursor: pointer;} 
 a:active  { opacity: 0.75 }

package/src/modules/products/components/sections/SortProducts.vue

@@ -1,74 +0,0 @@
-<template>
-  <div class="pd-medium mn-b-thin bg-grey radius-big">
-    <div class="flex-nowrap flex flex-v-center">
-      <p class="mn-r-auto p-big t-semi t-transp">2,982 results</p>
-
-      <button 
-        @click="setSort('price')" 
-        class="button-active button-sort button">
-        {{t('sort.price')}}
-      </button>
-      <button 
-        @click="setSort('createdAt')" 
-        class="button-sort button">
-        {{t('sort.newest')}}
-      </button>
-      <button 
-        @click="setSort('popularity')" 
-        class="button-sort button">
-          {{t('sort.popularity')}}
-      </button>
-    </div>
-    
-  </div>
-</template>
-
-<script setup>
-import { ref, watch } from 'vue'
-
-import { useI18n }    from 'vue-i18n'
-
-const props = defineProps({
-  categories: Array,
-  prices: Array,
-  deliveryOptions: Array,
-  selectedFilters: Object
-})
-
-const emit = defineEmits(['updateFilters', 'resetFilters'])
-
-const emitFilterChange = (filterType, value) => {
-  emit('updateFilters', { filterType, value })
-}
-
-const resetFilters = () => {
-  emit('resetFilters')
-}
-
-const text = {
-  locale: 'en',
-  messages: {
-    en: {
-      sort: {
-        price: 'By price',
-        newest: 'By newest',
-        popularity: 'By popularity'
-      }
-    },
-    ru: {
-      sort: {
-        price: 'По цене',
-        newest: 'По новизне',
-        popularity: 'По популярности'
-      },
-    }
-  }
-}
-
-
-const { t } = useI18n(text)
-</script>
-
-<style>
-
-</style>