mayak-common-library 0.0.144 → 0.0.146

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mayak-common-library",
-  "version": "0.0.144",
+  "version": "0.0.146",
   "private": false,
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/styles/assets.ts

@@ -0,0 +1,17 @@
+export type TitlePosition = 'center' | 'left'
+
+export const CONTAINER_WIDTH = 'lg'
+
+export const WINDOW_SIZE = {
+	xxs: 0,
+	// xs: 430,
+	// sm: 800,
+	// xs: 800,
+	xs: 650,
+	sm: 800,
+	md: 1100,
+	lg: 1200,
+	xl: 1620,
+}
+
+export const NO_IMAGE = '/images/no-photo.svg'

package/styles/common.scss

@@ -0,0 +1,548 @@
+// colors
+$colorTextDark: #343434;
+$colorTextLight: #fff;
+$colorTextGold: #C8BCA1;
+$colorTextGold2: #99835F;
+$colorGray: #757575;
+$colorGrayLight: #F5F5F5;
+$colorGrayMedium: #D0CED2;
+$colorGray2: #FBFBFB;
+
+$colorDark: #343434;
+
+$bgGold: #C8BCA1;
+$bgDark: #343434;
+$bgLight: #fff;
+
+$colorGold: #C8BCA1;
+$colorGold2: #99835F;
+
+$filterColorGold: invert(5%) sepia(22%) saturate(331%) hue-rotate(346deg) brightness(83%) contrast(86%);
+$filterColorGold2: invert(64%) sepia(5%) saturate(2284%) hue-rotate(358deg) brightness(81%) contrast(87%);
+$filterColorDark: invert(18%) sepia(13%) saturate(19%) hue-rotate(5deg) brightness(60%) contrast(90%);
+$filterColorGray: invert(50%) sepia(10%) saturate(17%) hue-rotate(354deg) brightness(89%) contrast(90%);
+
+// fonts
+@mixin fontRock {
+  font-family: RockStar, sans-serif;
+}
+
+// font sizes
+@mixin f10 {
+  font-size: 10px;
+  line-height: 12px;
+}
+@mixin f11 {
+  font-size: 11px;
+  line-height: 11px;
+}
+@mixin f12 {
+  font-size: 12px;
+  line-height: 16px;
+}
+@mixin f14 {
+  font-size: 14px;
+  line-height: 22px ;
+}
+@mixin f16 {
+  font-size: 16px;
+  line-height: 20px;
+}
+@mixin f18 {
+  font-size: 18px;
+  line-height: 19px;
+}
+@mixin f20 {
+  font-size: 20px;
+  line-height: 22px;
+}
+@mixin f22 {
+  font-size: 22px;
+  line-height: 26px;
+}
+@mixin f26 {
+  font-size: 26px;
+  line-height: 31px;
+}
+@mixin f28 {
+  font-size: 28px;
+  line-height: 31px;
+}
+@mixin f30 {
+  font-size: 30px;
+  line-height: 33px;
+}
+@mixin f32 {
+  font-size: 32px;
+  line-height: 35px;
+}
+@mixin f34 {
+  font-size: 34px;
+  line-height: 38px;
+}
+@mixin f40 {
+  font-size: 40px;
+  line-height: 48px;
+}
+@mixin f50 {
+  font-size: 50px;
+  line-height: 55px;
+}
+@mixin f60 {
+  font-size: 60px;
+  line-height: 66px;
+}
+@mixin f100 {
+  font-size: 100px;
+  line-height: 110px;
+}
+
+// font weights
+@mixin f400 {
+  font-weight: 400;
+}
+@mixin f800 {
+  font-weight: 800;
+}
+
+// screens width
+$screen-sm: 800px;
+$screen-md: 1100px;
+$screen-lg: 1200px;
+$screen-xl: 1620px;
+
+// media queries
+@mixin sm {
+  @media screen and (max-width: #{$screen-sm}) {
+    @content;
+  }
+}
+@mixin sm-md {
+  @media screen and (min-width: #{$screen-sm}) and (max-width: #{$screen-md}) {
+    @content;
+  }
+}
+@mixin md {
+  @media screen and (max-width: #{$screen-md}) {
+    @content;
+  }
+}
+@mixin md-lg {
+  @media screen and (min-width: #{$screen-md}) and (max-width: #{$screen-lg}) {
+    @content;
+  }
+}
+@mixin lg {
+  @media screen and (max-width: #{$screen-lg}) {
+    @content;
+  }
+}
+@mixin min-lg {
+  @media screen and (min-width: #{$screen-lg}) {
+    @content;
+  }
+}
+@mixin xl {
+  @media screen and (max-width: #{$screen-xl}) {
+    @content;
+  }
+}
+
+.button {
+  width: fit-content;
+  padding: 12px 30px;
+  text-transform: unset;
+  border-radius: 0;
+  min-width: 145px;
+  font-size: 14px;
+  line-height: 16px;
+  box-shadow: none;
+  &_dark {
+    background-color: $bgDark;
+    color: $colorTextLight;
+    &:hover {
+      background-color: $bgDark;
+    }
+  }
+}
+
+
+
+.customImage {
+  position: relative;
+  img {
+    object-position: center;
+    object-fit: cover;
+  }
+}
+
+@layer components {
+  .white-block-snack {
+    @apply bg-white px-[10px] py-[2px] w-fit text-12;
+  }
+  .white-block-snack-border {
+    @apply bg-white border-solid px-[10px] py-[2px] w-fit text-14 border-[1px] border-dark;
+  }
+  .gold-block-snack-border {
+    @apply bg-gold border-solid px-[10px] py-[2px] w-fit text-14 border-[1px] border-gold;
+  }
+  .black-block-snack {
+    @apply bg-dark py-[6px] px-[16px] w-fit text-white font-extrabold text-12;
+  }
+  .gray-block-snack {
+    @apply bg-gray-light px-[10px] w-fit text-12;
+  }
+  .border-block-snack {
+    @apply px-[10px] py-[2px] text-12 border-[1px] border-custom-gray-medium w-fit;
+  }
+  .border-gold-block-snack {
+    @apply w-fit px-[10px] py-[2px] text-gray border-[1px] border-gold font-extrabold text-12 group-hover/card:text-white group-hover/card:bg-gold;
+  }
+  .text-gold2 {
+    color: $colorGold2;
+  }
+  .text-gold {
+    color: $colorGold;
+  }
+  .text-gray {
+    color: $colorGray;
+  }
+  .text-34 {
+    @include f34;
+    @apply uppercase font-extrabold
+  }
+  .text-32 {
+    @include f32;
+  }
+  .text-100 {
+    @include f100;
+  }
+  .text-50 {
+    @include f50;
+  }
+  .text-60 {
+    @include f60;
+  }
+  .text-10 {
+    @include f10;
+  }
+  .text-11 {
+    @include f11;
+  }
+  .text-12 {
+    @include f12;
+  }
+  .text-14 {
+    @include f14;
+  }
+  .text-14-gray {
+    @include f14;
+    color: $colorGray;
+  }
+  .text-14-bold {
+    @include f14;
+    @apply font-extrabold
+  }
+  .text-16 {
+    @include f16;
+  }
+  .text-18 {
+    @include f18;
+  }
+  .text-20 {
+    @include f20;
+  }
+  .text-22 {
+    @include f22;
+  }
+  .text-24 {
+    font-size: 24px;
+    line-height: 30px;
+  }
+  .text-26 {
+    @include f26;
+    @apply font-extrabold;
+  }
+  .text-28 {
+    @include f28;
+  }
+  .text-30 {
+    @include f30;
+  }
+  .text-40 {
+    @include f40;
+    @apply uppercase font-extrabold;
+  }
+  .text-light {
+    color: $colorTextLight;
+  }
+  .text-dark {
+    color: $colorTextDark;
+  }
+  .text-gold {
+    color: $colorTextGold;
+  }
+  .text-gray-light {
+    color: $colorGrayLight;
+  }
+  .bg-gray-light {
+    background-color: $colorGrayLight;
+  }
+  .bg-gray-medium {
+    background-color: $colorGrayMedium;
+  }
+  .bg-gray {
+    background-color: $colorGray;
+  }
+  .bg-gray2 {
+    background-color: $colorGray2;
+  }
+  .bg-dark {
+    background-color: $bgDark;
+  }
+  .bg-light {
+    background-color: $bgLight;
+  }
+  .bg-gold {
+    background-color: $bgGold;
+  }
+  .border-custom-gray {
+    border-color: $colorGray;
+  }
+
+  .border-custom-gray-medium {
+    border-color: $colorGrayMedium
+  }
+
+  .border-custom-gray-light {
+    border-color: $colorGrayLight;
+  }
+
+  .border-custom-dark {
+    border-color: $colorTextDark;
+  }
+
+  .border-dark {
+    border-color: $colorTextDark;
+  }
+
+  .border-gold {
+    border-color: $colorGold;
+  }
+
+  .border-gold2 {
+    border-color: $colorGold2;
+  }
+
+  .big-title {
+    @apply uppercase font-extrabold text-34
+  }
+
+  .wrapper-gold {
+    @apply bg-gold py-[6px] px-[16px] w-fit md:py-[2px] md:px-[6px]
+  }
+
+  .block-gold {
+    @apply bg-gold py-[30px] px-[40px] flex flex-col
+  }
+
+  .block-simple-border {
+    @apply block border-[1px] py-[16px] px-[24px] text-14 w-fit border-dark border-solid
+  }
+
+  .block-white-wrapper {
+    @apply text-28 bg-white py-[20px] px-[30px] block md:pt-[10px] md:pb-[6px] md:px-[10px]
+  }
+
+  .block-white {
+    @apply bg-white py-[30px] px-[40px]
+  }
+
+  .block-center {
+    @apply block mx-auto w-fit
+  }
+
+  .filter-gold2 {
+    filter: $filterColorGold2;
+  }
+
+  .filter-gold {
+    filter: $filterColorGold;
+  }
+
+  .filter-gray {
+    filter: $filterColorGray;
+  }
+
+  .filter-dark {
+    filter: $filterColorDark;
+  }
+
+  .trim-2 {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    -webkit-line-clamp: 2;
+  }
+
+  .trim-4 {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    -webkit-line-clamp: 4;
+  }
+
+  .container-mini {
+    width: 100%;
+    margin-left: auto;
+    box-sizing: border-box;
+    margin-right: auto;
+    display: block;
+    max-width: 790px!important;
+  }
+
+  .dot-slider {
+    border: none;
+    width: 10px;
+    height: 10px;
+    background: $colorDark;
+    border-radius: 50%;
+    cursor: pointer;
+    &_big {
+      width: 14px;
+      height: 14px;
+      @include md {
+        width: 10px;
+        height: 10px;
+      }
+    }
+  }
+
+  .dot:focus {
+    outline: none;
+  }
+
+  .dot-slider_active {
+    background: $colorGold;
+  }
+
+  .trim-text-1 {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    -webkit-line-clamp: 1;
+  }
+
+  .simpleZoomImgHover {
+    @apply opacity-90 transform scale-110 transition duration-300 ease-out
+  }
+
+  .simpleZoomImg {
+    -webkit-transform: scale(1);
+    -ms-transform: scale(1);
+    transform: scale(1);
+    -webkit-transition: .3s ease-out;
+    transition: .3s ease-out;
+  }
+
+  .bg-gold-gradient {
+    @apply bg-gradient-to-r from-[#{$colorGold2}] to-[#{$colorGold}]
+  }
+}
+
+.richTextBlock {
+  @include fontRock;
+  line-height: 24px;
+  p {
+    color: $colorDark!important;
+    margin: 10px 0;
+    @include md {
+      margin: 6px 0;
+    }
+  }
+  ul {
+    margin: 16px 0;
+    padding-left: 20px;
+    list-style: disc;
+    @include md {
+      margin: 10px 0;
+    }
+  }
+  h2 {
+    @include f20;
+    font-weight: 800;
+    margin-top: 20px;
+    margin-bottom: 6px;
+  }
+  h3 {
+    @include f18;
+    font-weight: 800;
+    margin-top: 20px;
+    margin-bottom: 6px;
+  }
+}
+
+.input-form::placeholder {
+  color: $colorDark;
+  opacity: 1;
+}
+
+.fader {
+  height: 738px;
+  position: relative;
+  overflow: hidden;
+  @include sm {
+    height: 950px;
+  }
+}
+
+.fader__slide {
+  cursor: pointer;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+}
+
+.homeLocaleSwitcher {
+  p {
+    color: white!important;
+  }
+  svg {
+    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
+  }
+  &:hover {
+    p {
+      color: $colorDark!important;
+    }
+    svg {
+      filter: none;
+    }
+  }
+}
+
+.placeholder-style::placeholder {
+  position: relative;
+  //top: 2px;
+  left: 2px;
+}
+
+
+
+.placeholder-style-2::placeholder {
+  position: relative;
+  //top: 2px;
+  left: 2px;
+  color: #939393 !important;
+}
+
+
+.placeholder-style-phone::placeholder {
+  //position: absolute;
+  //top: 0px;
+  //right: 30px;
+
+  color: $colorDark;
+  opacity: 1;
+}
+

package/styles/globals.scss

@@ -0,0 +1,92 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@import 'common';
+
+@font-face {
+    font-family: RockStar;
+    src: url("../styles/fonts/RockStar/Rock_Star_Regular_Web.woff2");
+    font-weight: 400;
+}
+@font-face {
+    font-family: RockStar;
+    src: url("../styles/fonts/RockStar/Rock_Star_Extra Bold_Web.woff2");
+    font-weight: 800;
+}
+
+body {
+    max-width: 100vw;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    color: $colorTextDark;
+    background-color: #F5F5F5 !important;//$colorGrayLight;
+    @include f14;
+    font-weight: 400;
+    @include fontRock;
+}
+
+div {
+    box-sizing: border-box;
+}
+
+html {
+    overflow-x: hidden;
+}
+
+main {
+    flex-grow: 1;
+}
+
+a {
+    color: inherit;
+    text-decoration: none;
+    transition: all 0.3s ease-out;
+    &:not(.noHover):hover {
+        color: $colorGold2;
+    }
+}
+
+*:focus-visible {
+    outline: none;
+}
+
+.MuiContainer-root {
+    padding-left: 0!important;
+    padding-right: 0!important;
+    @media screen and (max-width: 1270px) {
+        padding-left: 40px!important;
+        padding-right: 40px!important;
+    }
+    @include md {
+        padding-left: 60px!important;
+        padding-right: 60px!important;
+    }
+    @include sm {
+        //padding-left: 30px!important;
+        //padding-right: 30px!important;
+        padding-left: 25px!important;
+        padding-right: 25px!important;
+    }
+}
+
+:root {
+    --map-tiles-filter: grayscale(0.5) saturate(0) ;
+}
+
+.map-tiles {
+    filter:var(--map-tiles-filter, none);
+}
+
+::-webkit-input-placeholder {
+    opacity: 1!important;
+}
+
+input,
+textarea,
+button,
+select,
+a {
+    -webkit-tap-highlight-color: transparent;
+}

package/theme.ts

@@ -0,0 +1,30 @@
+'use client'
+import createTheme from '@mui/material/styles/createTheme'
+// import 'mayak-common-library/dist/index.css'
+import './styles/globals.scss'
+import 'keen-slider/keen-slider.min.css'
+// import 'leaflet/dist/leaflet.css'
+
+const _theme = {
+	typography: {
+		fontFamily: 'RockStar, sans-serif',
+		body1: {
+			fontSize: 14,
+			lineHeight: '22px',
+		},
+	},
+	body: {
+		backgroundColor: '#F5F5F5',
+	},
+	components: {
+		MuiButton: {
+			styleOverrides: {
+				root: {
+					fontFamily: 'RockStar, sans-serif',
+				},
+			},
+		},
+	},
+}
+
+export const theme = createTheme({ palette: { mode: 'light' }, ..._theme })