front init

2026-01-12 23:06:40 +03:00
parent b1d3e89988
commit 749fda017c
27 changed files with 2322 additions and 148 deletions
@@ -0,0 +1,45 @@
+@use "sass:map";
+@use "sass:meta";
+
+$mobile: 767;
+$tablet: 1439;
+$desktopSecond: 1919;
+
+$mobileMin: "mobileMin";
+$mobileMax: "mobileMax";
+$tabletMin: "tabletMin";
+$tabletMax: "tabletMax";
+$desktopSecondMin: "desktopSecondMin";
+$desktopSecondMax: "desktopSecondMax";
+
+$breakpoints: (
+	"mobileMin": (
+		min-width: $mobile + 1 + px
+	),
+	"mobileMax": (
+		max-width: $mobile + px
+	),
+	"tabletMin": (
+		min-width: $tablet + 1 + px
+	),
+	"tabletMax": (
+		max-width: $tablet + px
+	),
+	"desktopSecondMin": (
+		min-width: $desktopSecond + 1 + px
+	),
+	"desktopSecondMax": (
+		max-width: $desktopSecond + px
+	)
+) !default;
+
+@mixin respond-to($breakpoint) {
+	@if map.has-key($breakpoints, $breakpoint) {
+		@media #{meta.inspect(map.get($breakpoints, $breakpoint))} {
+			@content;
+		}
+	} @else {
+		@warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
+    + "Available breakpoints are: #{map.keys($breakpoints)}.";
+	}
+}
@@ -0,0 +1,51 @@
+// Common mixins for the project
+
+// Flexbox center
+@mixin flex-center {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+// Flexbox column
+@mixin flex-column {
+	display: flex;
+	flex-direction: column;
+}
+
+// Truncate text with ellipsis
+@mixin text-ellipsis {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+// Visually hidden (accessible)
+@mixin visually-hidden {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+	border: 0;
+}
+
+// Reset button styles
+@mixin reset-button {
+	padding: 0;
+	border: none;
+	background: none;
+	cursor: pointer;
+	font: inherit;
+	color: inherit;
+}
+
+// Reset list styles
+@mixin reset-list {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
@@ -0,0 +1,49 @@
+@mixin font-header-l {
+	font-variant-numeric: lining-nums proportional-nums;
+	font-weight: 500;
+	font-size: 20px;
+	line-height: 26px;
+	letter-spacing: -0.41px;
+}
+
+@mixin font-subheader-l {
+	font-weight: 500;
+	font-size: 16px;
+	line-height: 22px;
+	letter-spacing: 0px;
+}
+
+@mixin font-body-m {
+	font-weight: 500;
+	font-size: 16px;
+	line-height: 22px;
+	letter-spacing: 0px;
+}
+
+@mixin font-body-mm {
+	font-weight: 500;
+	font-size: 16px;
+	line-height: 22px;
+	letter-spacing: 0px;
+}
+
+@mixin font-body-mr {
+	font-weight: 400;
+	font-size: 16px;
+	line-height: 22px;
+	letter-spacing: 0px;
+}
+
+@mixin font-body-s {
+	font-weight: 400;
+	font-size: 14px;
+	line-height: 20px;
+	letter-spacing: 0px;
+}
+
+@mixin font-caption-m {
+	font-weight: 400;
+	font-size: 12px;
+	line-height: 18px;
+	letter-spacing: 0px;
+}
@@ -0,0 +1,33 @@
+$purple-50: var(--purple-50);
+$purple-100: var(--purple-100);
+$purple-200: var(--purple-200);
+$purple-300: var(--purple-300);
+$purple-400: var(--purple-400);
+$purple-500: var(--purple-500);
+$purple-600: var(--purple-600);
+$purple-700: var(--purple-700);
+$purple-800: var(--purple-800);
+$purple-900: var(--purple-900);
+
+$green-50: var(--green-50);
+$green-100: var(--green-100);
+$green-200: var(--green-200);
+$green-300: var(--green-300);
+$green-400: var(--green-400);
+$green-500: var(--green-500);
+$green-600: var(--green-600);
+$green-700: var(--green-700);
+$green-800: var(--green-800);
+$green-900: var(--green-900);
+
+$color-success: var(--color-success);
+$color-danger: var(--color-danger);
+$color-warning: var(--color-warning);
+
+$color-primary: var(--color-primary);
+$color-secondary: var(--color-secondary);
+$color-white: var(--color-white);
+$color-black: var(--color-black);
+
+$header-height: var(--header-height);
+
@@ -0,0 +1,59 @@
+@import "normalize.css";
+
+* {
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-family: var(--font-roboto);
+	font-variant-numeric: lining-nums proportional-nums;
+	-moz-osx-font-smoothing: grayscale;
+	-webkit-font-smoothing: antialiased;
+	font-variation-settings: "opsz" 10;
+}
+
+body {
+	background-color: #f8f8f8;
+}
+
+:root {
+	/* Dark Fuchsia Palette (HSL) */
+  --purple-50:  hsl(300, 52%, 93%);
+  --purple-100: hsl(298, 46%, 82%);
+  --purple-200: hsl(298, 51%, 69%);
+  --purple-300: hsl(297, 53%, 56%);
+  --purple-400: hsl(297, 70%, 44%); /* Primary */
+  --purple-500: hsl(296, 100%, 35%);
+  --purple-600: hsl(293, 100%, 34%);
+  --purple-700: hsl(288, 100%, 33%);
+  --purple-800: hsl(283, 100%, 32%);
+  --purple-900: hsl(272, 100%, 30%);
+
+  /* Deep Lime Green Palette (HSL) */
+  --green-50:  hsl(84, 50%, 94%);
+  --green-100: hsl(85, 48%, 83%);
+  --green-200: hsl(86, 47%, 73%);
+  --green-300: hsl(85, 47%, 61%);
+  --green-400: hsl(85, 51%, 53%);
+  --green-500: hsl(84, 67%, 43%);
+  --green-600: hsl(87, 71%, 39%);
+  --green-700: hsl(88, 79%, 33%);
+  --green-800: hsl(90, 93%, 26%); /* Secondary */
+  --green-900: hsl(104, 100%, 19%);
+  
+  --color-success: #22c55e;
+  --color-danger: #ef4444;
+  --color-warning: #facc15;
+
+	--color-primary: var(--purple-400);
+	--color-secondary: var(--green-800);
+	--color-white: #ffffff;
+	--color-black: #000000;
+
+	--header-height: 56px;
+}
+
+
+
+
+
@@ -0,0 +1,15 @@
+.app {
+	width: 100%;
+	// max-width: 1192px;
+	margin: 0 auto;
+	padding: 16px;
+	padding-top: 24px;
+	box-sizing: border-box;
+	height: calc(100vh - var(--header-height) - 16px);
+	margin-top: var(--header-height);
+
+	@include breakpoints.respond-to(breakpoints.$mobileMax) {
+		padding-top: 12px;
+		height: calc(100svh - var(--header-height));
+	}
+}
@@ -0,0 +1,3 @@
+export interface IButtonProps {
+	message?: string
+}
@@ -0,0 +1,7 @@
+import BootstrapButton, { ButtonProps } from "react-bootstrap/Button"
+
+export const Button = (props: ButtonProps) => (
+	<BootstrapButton variant="primary" {...props}>
+		{props.children}
+	</BootstrapButton>
+)
@@ -0,0 +1 @@
+export * from "./Button"
@@ -0,0 +1 @@
+export * from "./Button"