From 93d29ca7d849458892741f4a1afcf1026c64012c Mon Sep 17 00:00:00 2001 From: Viet An Date: Mon, 4 May 2026 12:00:16 +0700 Subject: [PATCH] changes --- app/assets/styles/main.scss | 154 ----------------------------------- app/assets/styles/utils.scss | 6 ++ 2 files changed, 6 insertions(+), 154 deletions(-) diff --git a/app/assets/styles/main.scss b/app/assets/styles/main.scss index 3f2b6d3..1e959d0 100644 --- a/app/assets/styles/main.scss +++ b/app/assets/styles/main.scss @@ -10,122 +10,6 @@ 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 .blockdiv { max-width: 1900px !important; @@ -136,41 +20,3 @@ $size: ( @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() } diff --git a/app/assets/styles/utils.scss b/app/assets/styles/utils.scss index 1e5f4bf..a33e13c 100644 --- a/app/assets/styles/utils.scss +++ b/app/assets/styles/utils.scss @@ -1,5 +1,11 @@ @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-weight: 100; }