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

changes

Browse Source
This commit is contained in:
Viet An
2026-05-04 12:00:16 +07:00
parent 9bb9ed0809
commit 93d29ca7d8
2 changed files with 6 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

154
app/assets/styles/main.scss
View File

@@ -10,122 +10,6 @@
font-size: 15px; font-size: 15px;
} }
// ==========================================
// 1. BRAND PALETTE (GAM MÀU TỪ LOGO)
// ==========================================
$blue-dianne: #204853; // Dark Cyan - Primary, Headings, Link
$parchment: #f2e5d6; // Cream - Accent, Background
$sirocco: #758385; // Greyish - Info, Border
$delta: #b0afaa; // Grey - Text phụ, Disabled
$cutty-sark: #566c72; // Blue Grey - Dark text, Warning text (Đậm)
$silver-rust: #ccc5bc; // Beige Grey - Line, Border nhạt
$fiord: #3c5b63; // Deep Green/Blue - Secondary, Success
$pewter: #959b99; // Medium Grey - Neutral
$pearl-bush: #f2e5d6; // Light Beige - Light background
$white-pure: #ffffff;
$black-pure: #000000;
$primary-color: $blue-dianne;
$secondary-color: $fiord;
$link-color: $blue-dianne;
$accent-color: $parchment;
$info-color: $sirocco;
$success-color: $fiord;
$warning-color: $cutty-sark;
$danger-color: #f14668;
$dark-color: $cutty-sark;
$light-color: $pearl-bush;
$neutral-color: $delta;
// ==========================================
// 2. COLOR MAP & SIZE
// ==========================================
$color: (
"primary": $primary-color,
"secondary": $secondary-color,
"link": $link-color,
"accent": $accent-color,
"info": $info-color,
"success": $success-color,
"warning": $warning-color,
"danger": $danger-color,
"dark": $dark-color,
"light": $light-color,
"delta": $delta,
"pewter": $pewter,
"silver": $silver-rust,
"white": $white-pure,
"black": $black-pure
);
$size: (
one: 10px,
two: 17px,
three: 30px,
four: 40px,
five: 50px,
six: 60px
);
// ==========================================
// 3. MIXINS & UTILITIES
// ==========================================
@mixin cbox($width, $height, $font, $background) {
display: flex;
width: $width;
height: $height;
border: 1.5px solid $sirocco;
font-size: $font;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
color: $sirocco;
font-weight: bold;
background-color: $background;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
// Tạo class cbox rỗng
@each $name, $hex in $color {
@each $n, $v in $size {
.cbox-#{$name}-#{$n} {
@include cbox($v*2, $v*2, $v*1.1, white);
border-color: $hex;
color: $hex;
}
}
}
// Tạo class cbox đặc
@each $name, $hex in $color {
@each $n, $v in $size {
.cbox-fill-#{$name}-#{$n} {
@include cbox($v*2, $v*2, $v, $hex);
border-color: $hex;
// Tự động tìm màu chữ tương phản
color: if(color.channel($hex, "lightness", $space: hsl) > 70, $blue-dianne, $white-pure);
}
}
}
// Font size loops
@for $i from 10 through 50 {
.fs-#{$i} { font-size: $i + px; }
.fsb-#{$i} { font-size: $i + px; font-weight: bold; }
}
// ==========================================
// 4. CUSTOM CLASSES
// ==========================================
// Block Layout // Block Layout
.blockdiv { .blockdiv {
max-width: 1900px !important; max-width: 1900px !important;
@@ -136,41 +20,3 @@ $size: (
@include mobile { padding-left: 0; padding-right: 0; } @include mobile { padding-left: 0; padding-right: 0; }
} }
} }
// Tooltip Styles
.tooltip {
position: relative;
display: inline-block;
cursor: pointer;
color: $white-pure;
}
.tooltip .tooltiptext {
visibility: hidden;
background-color: $fiord;
color: $parchment;
border-radius: 6px;
position: absolute;
margin-left: 0px;
z-index: 999;
bottom: 110%;
opacity: 0;
transition: opacity 0.3s;
padding: 6px;
font-size: 14px;
pointer-events: none;
}
@mixin tooltipshow() {
visibility: visible;
opacity: 1;
position: absolute;
min-width: 300px;
z-index: 999;
background-color: $pearl-bush;
color: $blue-dianne;
border: 1px solid $silver-rust;
}
.tooltip:hover .tooltiptext { @include tooltipshow() }
.tooltip:hover .tooltiptext .to-left { @include tooltipshow() }

6
app/assets/styles/utils.scss
View File

@@ -1,5 +1,11 @@
@use "sass:list"; @use "sass:list";
// Font size loops
@for $i from 10 through 50 {
.fs-#{$i} { font-size: $i + px; }
.fsb-#{$i} { font-size: $i + px; font-weight: bold; }
}
.font-thin { .font-thin {
font-weight: 100; font-weight: 100;
} }