erp/web
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: build UI

Browse Source
This commit is contained in:
Viet An
2026-04-09 17:20:47 +07:00
parent bcfda00993
commit 631527225e
36 changed files with 11305 additions and 1123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

237
app/assets/styles/utils.scss Normal file
View File

@@ -0,0 +1,237 @@
@use "sass:list";
.font-thin {
font-weight: 100;
}
.font-extralight {
font-weight: 200;
}
.font-light {
font-weight: 300;
}
.font-normal {
font-weight: 400;
}
.font-medium {
font-weight: 500;
}
.font-semibold {
font-weight: 600;
}
.font-bold {
font-weight: 700;
}
.font-extrabold {
font-weight: 800;
}
.font-black {
font-weight: 900;
}
.rounded-xs {
border-radius: 0.125rem;
}
.rounded-sm {
border-radius: 0.25rem;
}
.rounded-md {
border-radius: 0.375rem;
}
.rounded-lg {
border-radius: 0.5rem;
}
.rounded-xl {
border-radius: 0.75rem;
}
.rounded-2xl {
border-radius: 1rem;
}
.rounded-3xl {
border-radius: 1.5rem;
}
.rounded-4xl {
border-radius: 2rem;
}
.rounded-none {
border-radius: 0;
}
.rounded-full {
border-radius: calc(infinity * 1px);
}
$base: 0.25rem;
@function spacing($step) {
@return $step * $base;
}
$spacing-types: (
"p": "padding",
"m": "margin",
);
$spacing-variants: (
"": (""),
"x": ("-left", "-right"),
"y": ("-top", "-bottom"),
"t": ("-top"),
"b": ("-bottom"),
"l": ("-left"),
"r": ("-right"),
);
@each $type-prefix, $type in $spacing-types {
@each $dir-suffix, $sides in $spacing-variants {
@for $i from 0 through 48 {
// Whole step: p-0, p-1, p-2 ...
.#{$type-prefix}#{$dir-suffix}-#{$i} {
@each $side in $sides {
#{$type}#{$side}: spacing($i);
}
}
// Half step: p-0\.5, p-1\.5, p-2\.5 ...
// Stop at 47.5 — 48.5 would exceed the scale
@if $i < 48 {
.#{$type-prefix}#{$dir-suffix}-#{$i}\.5 {
@each $side in $sides {
#{$type}#{$side}: spacing($i + 0.5);
}
}
}
}
}
}
// ─── CSS custom properties ─────────────────────────────────────────────────
:root {
--spacing: 0.25rem;
--container-3xs: 16rem;
--container-2xs: 18rem;
--container-xs: 20rem;
--container-sm: 24rem;
--container-md: 28rem;
--container-lg: 32rem;
--container-xl: 36rem;
--container-2xl: 42rem;
--container-3xl: 48rem;
--container-4xl: 56rem;
--container-5xl: 64rem;
--container-6xl: 72rem;
--container-7xl: 80rem;
}
// ─── Shared mixin ──────────────────────────────────────────────────────────
@mixin set-props($props, $value) {
@each $prop in $props {
#{$prop}: $value;
}
}
// ─── Class types ───────────────────────────────────────────────────────────
$class-types: (
"w": (width),
"h": (height),
"size": (width, height),
);
// ─── Numeric: w-0 → w-48, h-0 → h-48, size-0 → size-48 ───────────────────
@each $prefix, $props in $class-types {
@for $i from 0 through 48 {
.#{$prefix}-#{$i} {
@include set-props($props, calc(var(--spacing) * #{$i}));
}
}
}
// ─── Fractions ─────────────────────────────────────────────────────────────
$fractions: (
"1\\/2": (1, 2),
"1\\/3": (1, 3),
"2\\/3": (2, 3),
"1\\/4": (1, 4),
"2\\/4": (2, 4),
"3\\/4": (3, 4),
"1\\/5": (1, 5),
"2\\/5": (2, 5),
"3\\/5": (3, 5),
"4\\/5": (4, 5),
"1\\/6": (1, 6),
"2\\/6": (2, 6),
"3\\/6": (3, 6),
"4\\/6": (4, 6),
"5\\/6": (5, 6),
"1\\/12": (1, 12),
"2\\/12": (2, 12),
"3\\/12": (3, 12),
"4\\/12": (4, 12),
"5\\/12": (5, 12),
"6\\/12": (6, 12),
"7\\/12": (7, 12),
"8\\/12": (8, 12),
"9\\/12": (9, 12),
"10\\/12": (10, 12),
"11\\/12": (11, 12),
);
@each $prefix, $props in $class-types {
@each $name, $pair in $fractions {
$num: list.nth($pair, 1);
$den: list.nth($pair, 2);
.#{$prefix}-#{$name} {
@include set-props($props, calc(#{$num} / #{$den} * 100%));
}
}
}
// ─── Container sizes (w- only) ─────────────────────────────────────────────
$containers: (
"3xs", "2xs", "xs", "sm", "md", "lg", "xl",
"2xl", "3xl", "4xl", "5xl", "6xl", "7xl"
);
@each $name in $containers {
.w-#{$name} { width: var(--container-#{$name}); }
}
// ─── Shared keywords (auto, px, full, min, max, fit) ───────────────────────
// These are identical in value across w-, h-, and size-
$shared-keywords: (
"auto": auto,
"px": 1px,
"full": 100%,
"min": min-content,
"max": max-content,
"fit": fit-content,
);
@each $prefix, $props in $class-types {
@each $name, $value in $shared-keywords {
.#{$prefix}-#{$name} {
@include set-props($props, $value);
}
}
}
// ─── Viewport keywords ─────────────────────────────────────────────────────
// dvw/dvh/lvw/lvh/svw/svh apply equally to w-, h-, and size-
$viewport-keywords: (
"dvw": 100dvw,
"dvh": 100dvh,
"lvw": 100lvw,
"lvh": 100lvh,
"svw": 100svw,
"svh": 100svh,
);
@each $prefix, $props in $class-types {
@each $name, $value in $viewport-keywords {
.#{$prefix}-#{$name} {
@include set-props($props, $value);
}
}
}
.w-screen { width: 100vw; }
.h-screen { height: 100vh; }