From d56c2a77a7aa3c33b3227d7cb581ec934311a334 Mon Sep 17 00:00:00 2001 From: Kartik Sharma Date: Wed, 10 Dec 2025 09:46:07 +0530 Subject: [PATCH] changes in extend.css --- public/assets/css/core-extend.css | 2329 ++++------------------------- 1 file changed, 256 insertions(+), 2073 deletions(-) diff --git a/public/assets/css/core-extend.css b/public/assets/css/core-extend.css index cef2e129..26ffcc4a 100644 --- a/public/assets/css/core-extend.css +++ b/public/assets/css/core-extend.css @@ -1,33 +1,20 @@ :root, [data-bs-theme="light"] { --bs-nav-link-font-size: 0.7375rem; - --bg-border-color: #f8f6f6 - --bg-border-color: #f8f6f6 + --bg-border-color :#f8f6f6 } - - .offcanvas.offcanvas-wide { - width: 700px !important; - /* adjust as needed */ - width: 700px !important; - /* adjust as needed */ + width: 700px !important; /* adjust as needed */ } - - .sticky-section { position: sticky; top: var(--sticky-top, 0px) !important; z-index: 1025; } - - .form-control-md { min-height: calc(1.6em + 0.65rem + calc(var(--bs-border-width) * 2)); padding: 0.18rem 0.60rem; - font-size: 0.875rem; - /* ~14px */ - font-size: 0.875rem; - /* ~14px */ + font-size: 0.875rem; /* ~14px */ border-radius: var(--bs-border-radius); } @@ -37,24 +24,18 @@ margin-inline-end: 0.75rem; } + /* ===========================% Background_Colors %========================================================== */ .bg-light-primary { background-color: color-mix(in srgb, var(--bs-primary) 10.4%, transparent); - border: var(--bs-primary-border-subtle) - border: var(--bs-primary-border-subtle) + border:var(--bs-primary-border-subtle) } - - .bg-light-secondary { background-color: color-mix(in srgb, var(--bs-secondary) 10.4%, transparent); } - - .bg-light-danger { background-color: color-mix(in srgb, var(--bs-danger) 10.4%, transparent); } - - .bg-light-success { background-color: color-mix(in srgb, var(--bs-success) 10.4%, transparent); } @@ -62,8 +43,6 @@ .bg-light-info { background-color: color-mix(in srgb, var(--bs-info) 10.4%, transparent); } - - .bg-light-warning { background-color: color-mix(in srgb, var(--bs-warning) 10.4%, transparent); } @@ -71,31 +50,24 @@ .card-header { padding: 0.5rem var(--bs-card-cap-padding-x); } - - .table_header_border { - border-bottom: 2px solid var(--bs-table-border-color); + border-bottom:2px solid var(--bs-table-border-color) ; } - - .text-gary-80 { - color: var(--bs-gray-500) - color: var(--bs-gray-500) +color:var(--bs-gray-500) } -.text-royalblue { - color: #1796e3; +.text-royalblue{ +color: #1796e3; } .text-md { - font-size: 2rem; +font-size: 2rem; } .text-md-b { - font-weight: normal; +font-weight: normal; } - - .stepper-container { position: relative; } @@ -159,8 +131,7 @@ } /* Make line green for completed sections */ -.timeline-item.completed~.timeline-line-horizontal { -.timeline-item.completed~.timeline-line-horizontal { +.timeline-item.completed ~ .timeline-line-horizontal { background-color: var(--bs-success); } @@ -181,14 +152,10 @@ transform: scale(1); opacity: 0.6; } - - 70% { transform: scale(1.5); opacity: 0; } - - 100% { transform: scale(1); opacity: 0; @@ -197,2073 +164,311 @@ -.text-xxs { - font-size: 0.55rem; -} - -/* 8px */ -.text-xs { - font-size: 0.75rem; -} - -/* 12px */ -.text-sm { - font-size: 0.875rem; -} - -/* 14px */ -.text-base { - font-size: 1rem; -} - -/* 16px */ -.text-lg { - font-size: 1.125rem; -} - -/* 18px */ -.text-xl { - font-size: 1.25rem; -} - -/* 20px */ -.text-2xl { - font-size: 1.5rem; -} - -/* 24px */ -.text-3xl { - font-size: 1.875rem; -} - -/* 30px */ -.text-4xl { - font-size: 2.25rem; -} - -/* 36px */ -.text-5xl { - font-size: 3rem; -} - -/* 48px */ -.text-6xl { - font-size: 3.75rem; -} - -/* 60px */ -.text-7xl { - font-size: 4.5rem; -} - -/* 72px */ -.text-8xl { - font-size: 6rem; -} - -/* 96px */ -.text-9xl { - font-size: 8rem; -} - -/* 128px */ -.text-xxs { - font-size: 0.55rem; -} - -/* 8px */ -.text-xs { - font-size: 0.75rem; -} - -/* 12px */ -.text-sm { - font-size: 0.875rem; -} - -/* 14px */ -.text-base { - font-size: 1rem; -} - -/* 16px */ -.text-lg { - font-size: 1.125rem; -} - -/* 18px */ -.text-xl { - font-size: 1.25rem; -} - -/* 20px */ -.text-2xl { - font-size: 1.5rem; -} - -/* 24px */ -.text-3xl { - font-size: 1.875rem; -} - -/* 30px */ -.text-4xl { - font-size: 2.25rem; -} - -/* 36px */ -.text-5xl { - font-size: 3rem; -} - -/* 48px */ -.text-6xl { - font-size: 3.75rem; -} - -/* 60px */ -.text-7xl { - font-size: 4.5rem; -} - -/* 72px */ -.text-8xl { - font-size: 6rem; -} - -/* 96px */ -.text-9xl { - font-size: 8rem; -} - -/* 128px */ +.text-xxs { font-size: 0.55rem; } /* 8px */ +.text-xs { font-size: 0.75rem; } /* 12px */ +.text-sm { font-size: 0.875rem; } /* 14px */ +.text-base { font-size: 1rem; } /* 16px */ +.text-lg { font-size: 1.125rem; } /* 18px */ +.text-xl { font-size: 1.25rem; } /* 20px */ +.text-2xl { font-size: 1.5rem; } /* 24px */ +.text-3xl { font-size: 1.875rem; } /* 30px */ +.text-4xl { font-size: 2.25rem; } /* 36px */ +.text-5xl { font-size: 3rem; } /* 48px */ +.text-6xl { font-size: 3.75rem; } /* 60px */ +.text-7xl { font-size: 4.5rem; } /* 72px */ +.text-8xl { font-size: 6rem; } /* 96px */ +.text-9xl { font-size: 8rem; } /* 128px */ /* */ -.w-0 { - width: 0px; -} - -.w-px { - width: 1px; -} - -.w-1 { - width: 0.25rem; -} - -/* 4px */ -.w-2 { - width: 0.5rem; -} - -/* 8px */ -.w-3 { - width: 0.75rem; -} - -/* 12px */ -.w-4 { - width: 1rem; -} - -/* 16px */ -.w-5 { - width: 1.25rem; -} - -/* 20px */ -.w-6 { - width: 1.5rem; -} - -/* 24px */ -.w-8 { - width: 2rem; -} - -/* 32px */ -.w-10 { - width: 2.5rem; -} - -/* 40px */ -.w-12 { - width: 3rem; -} - -/* 48px */ -.w-16 { - width: 4rem; -} - -/* 64px */ -.w-20 { - width: 5rem; -} - -/* 80px */ -.w-24 { - width: 6rem; -} - -/* 96px */ -.w-32 { - width: 8rem; -} - -/* 128px */ -.w-40 { - width: 10rem; -} - -/* 160px */ -.w-48 { - width: 12rem; -} - -/* 192px */ -.w-56 { - width: 14rem; -} - -/* 224px */ -.w-64 { - width: 16rem; -} - -/* 256px */ -.w-auto { - width: auto; -} - -.w-full { - width: 100%; -} - -.w-screen { - width: 100vw; -} - -.w-min { - width: min-content; -} - -.w-max { - width: max-content; -} -.w-0 { - width: 0px; -} - -.w-px { - width: 1px; -} - -.w-1 { - width: 0.25rem; -} - -/* 4px */ -.w-2 { - width: 0.5rem; -} - -/* 8px */ -.w-3 { - width: 0.75rem; -} - -/* 12px */ -.w-4 { - width: 1rem; -} - -/* 16px */ -.w-5 { - width: 1.25rem; -} - -/* 20px */ -.w-6 { - width: 1.5rem; -} - -/* 24px */ -.w-8 { - width: 2rem; -} - -/* 32px */ -.w-10 { - width: 2.5rem; -} - -/* 40px */ -.w-12 { - width: 3rem; -} - -/* 48px */ -.w-16 { - width: 4rem; -} - -/* 64px */ -.w-20 { - width: 5rem; -} - -/* 80px */ -.w-24 { - width: 6rem; -} - -/* 96px */ -.w-32 { - width: 8rem; -} - -/* 128px */ -.w-40 { - width: 10rem; -} - -/* 160px */ -.w-48 { - width: 12rem; -} - -/* 192px */ -.w-56 { - width: 14rem; -} - -/* 224px */ -.w-64 { - width: 16rem; -} - -/* 256px */ -.w-auto { - width: auto; -} - -.w-full { - width: 100%; -} - -.w-screen { - width: 100vw; -} - -.w-min { - width: min-content; -} - -.w-max { - width: max-content; -} - - - -.h-0 { - height: 0px; -} - -.h-px { - height: 1px; -} - -.h-1 { - height: 0.25rem; -} - -/* 4px */ -.h-2 { - height: 0.5rem; -} - -/* 8px */ -.h-3 { - height: 0.75rem; -} - -/* 12px */ -.h-4 { - height: 1rem; -} - -/* 16px */ -.h-5 { - height: 1.25rem; -} - -/* 20px */ -.h-6 { - height: 1.5rem; -} - -/* 24px */ -.h-8 { - height: 2rem; -} - -/* 32px */ -.h-10 { - height: 2.5rem; -} - -/* 40px */ -.h-12 { - height: 3rem; -} - -/* 48px */ -.h-16 { - height: 4rem; -} - -/* 64px */ -.h-20 { - height: 5rem; -} - -/* 80px */ -.h-24 { - height: 6rem; -} - -/* 96px */ -.h-32 { - height: 8rem; -} - -/* 128px */ -.h-40 { - height: 10rem; -} - -/* 160px */ -.h-48 { - height: 12rem; -} - -/* 192px */ -.h-56 { - height: 14rem; -} - -/* 224px */ -.h-64 { - height: 16rem; -} - -/* 256px */ -.h-auto { - height: auto; -} - -.h-full { - height: 100%; -} - -.h-screen { - height: 100vh; -} - -.h-min { - height: min-content; -} - -.h-max { - height: max-content; -} -.h-0 { - height: 0px; -} - -.h-px { - height: 1px; -} - -.h-1 { - height: 0.25rem; -} - -/* 4px */ -.h-2 { - height: 0.5rem; -} - -/* 8px */ -.h-3 { - height: 0.75rem; -} - -/* 12px */ -.h-4 { - height: 1rem; -} - -/* 16px */ -.h-5 { - height: 1.25rem; -} - -/* 20px */ -.h-6 { - height: 1.5rem; -} - -/* 24px */ -.h-8 { - height: 2rem; -} - -/* 32px */ -.h-10 { - height: 2.5rem; -} - -/* 40px */ -.h-12 { - height: 3rem; -} - -/* 48px */ -.h-16 { - height: 4rem; -} - -/* 64px */ -.h-20 { - height: 5rem; -} - -/* 80px */ -.h-24 { - height: 6rem; -} - -/* 96px */ -.h-32 { - height: 8rem; -} - -/* 128px */ -.h-40 { - height: 10rem; -} - -/* 160px */ -.h-48 { - height: 12rem; -} - -/* 192px */ -.h-56 { - height: 14rem; -} - -/* 224px */ -.h-64 { - height: 16rem; -} - -/* 256px */ -.h-auto { - height: auto; -} - -.h-full { - height: 100%; -} - -.h-screen { - height: 100vh; -} - -.h-min { - height: min-content; -} - -.h-max { - height: max-content; -} +.w-0 { width: 0px; } +.w-px { width: 1px; } +.w-1 { width: 0.25rem; } /* 4px */ +.w-2 { width: 0.5rem; } /* 8px */ +.w-3 { width: 0.75rem; } /* 12px */ +.w-4 { width: 1rem; } /* 16px */ +.w-5 { width: 1.25rem; } /* 20px */ +.w-6 { width: 1.5rem; } /* 24px */ +.w-8 { width: 2rem; } /* 32px */ +.w-10 { width: 2.5rem; } /* 40px */ +.w-12 { width: 3rem; } /* 48px */ +.w-16 { width: 4rem; } /* 64px */ +.w-20 { width: 5rem; } /* 80px */ +.w-24 { width: 6rem; } /* 96px */ +.w-32 { width: 8rem; } /* 128px */ +.w-40 { width: 10rem; } /* 160px */ +.w-48 { width: 12rem; } /* 192px */ +.w-56 { width: 14rem; } /* 224px */ +.w-64 { width: 16rem; } /* 256px */ +.w-auto { width: auto; } +.w-full { width: 100%; } +.w-screen{ width: 100vw; } +.w-min { width: min-content; } +.w-max { width: max-content; } + + + +.h-0 { height: 0px; } +.h-px { height: 1px; } +.h-1 { height: 0.25rem; } /* 4px */ +.h-2 { height: 0.5rem; } /* 8px */ +.h-3 { height: 0.75rem; } /* 12px */ +.h-4 { height: 1rem; } /* 16px */ +.h-5 { height: 1.25rem; } /* 20px */ +.h-6 { height: 1.5rem; } /* 24px */ +.h-8 { height: 2rem; } /* 32px */ +.h-10 { height: 2.5rem; } /* 40px */ +.h-12 { height: 3rem; } /* 48px */ +.h-16 { height: 4rem; } /* 64px */ +.h-20 { height: 5rem; } /* 80px */ +.h-24 { height: 6rem; } /* 96px */ +.h-32 { height: 8rem; } /* 128px */ +.h-40 { height: 10rem; } /* 160px */ +.h-48 { height: 12rem; } /* 192px */ +.h-56 { height: 14rem; } /* 224px */ +.h-64 { height: 16rem; } /* 256px */ +.h-auto { height: auto; } +.h-full { height: 100%; } +.h-screen{ height: 100vh; } +.h-min { height: min-content; } +.h-max { height: max-content; } .vh-50 { height: 50vh !important; } + + /* ========================== Base Font Sizes (mobile first) ========================== */ -.text-xxs { - font-size: 0.55rem; -} - -/* 8px */ -.text-xs { - font-size: 0.75rem; -} - -/* 12px */ -.text-sm { - font-size: 0.875rem; -} - -/* 14px */ -.text-base { - font-size: 1rem; -} - -/* 16px */ -.text-lg { - font-size: 1.125rem; -} - -/* 18px */ -.text-xl { - font-size: 1.25rem; -} - -/* 20px */ -.text-2xl { - font-size: 1.5rem; -} - -/* 24px */ -.text-3xl { - font-size: 1.875rem; -} - -/* 30px */ -.text-4xl { - font-size: 2.25rem; -} - -/* 36px */ -.text-5xl { - font-size: 3rem; -} - -/* 48px */ -.text-6xl { - font-size: 3.75rem; -} - -/* 60px */ -.text-7xl { - font-size: 4.5rem; -} - -/* 72px */ -.text-8xl { - font-size: 6rem; -} - -/* 96px */ -.text-9xl { - font-size: 8rem; -} - -/* 128px */ -.text-xxs { - font-size: 0.55rem; -} - -/* 8px */ -.text-xs { - font-size: 0.75rem; -} - -/* 12px */ -.text-sm { - font-size: 0.875rem; -} - -/* 14px */ -.text-base { - font-size: 1rem; -} - -/* 16px */ -.text-lg { - font-size: 1.125rem; -} - -/* 18px */ -.text-xl { - font-size: 1.25rem; -} - -/* 20px */ -.text-2xl { - font-size: 1.5rem; -} - -/* 24px */ -.text-3xl { - font-size: 1.875rem; -} - -/* 30px */ -.text-4xl { - font-size: 2.25rem; -} - -/* 36px */ -.text-5xl { - font-size: 3rem; -} - -/* 48px */ -.text-6xl { - font-size: 3.75rem; -} - -/* 60px */ -.text-7xl { - font-size: 4.5rem; -} - -/* 72px */ -.text-8xl { - font-size: 6rem; -} - -/* 96px */ -.text-9xl { - font-size: 8rem; -} - -/* 128px */ +.text-xxs { font-size: 0.55rem; } /* 8px */ +.text-xs { font-size: 0.75rem; } /* 12px */ +.text-sm { font-size: 0.875rem; } /* 14px */ +.text-base{ font-size: 1rem; } /* 16px */ +.text-lg { font-size: 1.125rem; } /* 18px */ +.text-xl { font-size: 1.25rem; } /* 20px */ +.text-2xl { font-size: 1.5rem; } /* 24px */ +.text-3xl { font-size: 1.875rem; } /* 30px */ +.text-4xl { font-size: 2.25rem; } /* 36px */ +.text-5xl { font-size: 3rem; } /* 48px */ +.text-6xl { font-size: 3.75rem; } /* 60px */ +.text-7xl { font-size: 4.5rem; } /* 72px */ +.text-8xl { font-size: 6rem; } /* 96px */ +.text-9xl { font-size: 8rem; } /* 128px */ /* ========================== Base Heights ========================== */ -.h-0 { - height: 0; -} +.h-0 { height: 0; } +.h-px { height: 1px; } +.h-1 { height: 0.25rem; } /* 4px */ +.h-2 { height: 0.5rem; } /* 8px */ +.h-3 { height: 0.75rem; } /* 12px */ +.h-4 { height: 1rem; } /* 16px */ +.h-5 { height: 1.25rem; } /* 20px */ +.h-6 { height: 1.5rem; } /* 24px */ +.h-8 { height: 2rem; } /* 32px */ +.h-10 { height: 2.5rem; } /* 40px */ +.h-12 { height: 3rem; } /* 48px */ +.h-16 { height: 4rem; } /* 64px */ +.h-20 { height: 5rem; } /* 80px */ +.h-24 { height: 6rem; } /* 96px */ +.h-32 { height: 8rem; } /* 128px */ +.h-40 { height: 10rem; } /* 160px */ +.h-48 { height: 12rem; } /* 192px */ +.h-56 { height: 14rem; } /* 224px */ +.h-64 { height: 16rem; } /* 256px */ +.h-70 { height: 20rem; } /* 256px */ +.h-74 { max-height: 35rem; } /* 256px */ +.h-full { height: 100%; } -.h-px { - height: 1px; -} - -.h-1 { - height: 0.25rem; -} - -/* 4px */ -.h-2 { - height: 0.5rem; -} - -/* 8px */ -.h-3 { - height: 0.75rem; -} - -/* 12px */ -.h-4 { - height: 1rem; -} - -/* 16px */ -.h-5 { - height: 1.25rem; -} - -/* 20px */ -.h-6 { - height: 1.5rem; -} - -/* 24px */ -.h-8 { - height: 2rem; -} - -/* 32px */ -.h-10 { - height: 2.5rem; -} - -/* 40px */ -.h-12 { - height: 3rem; -} - -/* 48px */ -.h-16 { - height: 4rem; -} - -/* 64px */ -.h-20 { - height: 5rem; -} - -/* 80px */ -.h-24 { - height: 6rem; -} - -/* 96px */ -.h-32 { - height: 8rem; -} - -/* 128px */ -.h-40 { - height: 10rem; -} - -/* 160px */ -.h-48 { - height: 12rem; -} - -/* 192px */ -.h-56 { - height: 14rem; -} - -/* 224px */ -.h-64 { - height: 16rem; -} - -/* 256px */ -.h-70 { - height: 20rem; -} - -/* 256px */ -.h-74 { - max-height: 35rem; -} - -/* 256px */ -.h-full { - height: 100%; -} -.h-0 { - height: 0; -} - -.h-px { - height: 1px; -} - -.h-1 { - height: 0.25rem; -} - -/* 4px */ -.h-2 { - height: 0.5rem; -} - -/* 8px */ -.h-3 { - height: 0.75rem; -} - -/* 12px */ -.h-4 { - height: 1rem; -} - -/* 16px */ -.h-5 { - height: 1.25rem; -} - -/* 20px */ -.h-6 { - height: 1.5rem; -} - -/* 24px */ -.h-8 { - height: 2rem; -} - -/* 32px */ -.h-10 { - height: 2.5rem; -} - -/* 40px */ -.h-12 { - height: 3rem; -} - -/* 48px */ -.h-16 { - height: 4rem; -} - -/* 64px */ -.h-20 { - height: 5rem; -} - -/* 80px */ -.h-24 { - height: 6rem; -} - -/* 96px */ -.h-32 { - height: 8rem; -} - -/* 128px */ -.h-40 { - height: 10rem; -} - -/* 160px */ -.h-48 { - height: 12rem; -} - -/* 192px */ -.h-56 { - height: 14rem; -} - -/* 224px */ -.h-64 { - height: 16rem; -} - -/* 256px */ -.h-70 { - height: 20rem; -} - -/* 256px */ -.h-74 { - max-height: 35rem; -} - -/* 256px */ -.h-full { - height: 100%; -} - -.h-screen { - height: 100vh; -} +.h-screen{ height: 100vh; } /* ========================== Base Widths ========================== */ -.w-0 { - width: 0; -} - -.w-px { - width: 1px; -} - -.w-1 { - width: 0.25rem; -} - -.w-2 { - width: 0.5rem; -} - -.w-3 { - width: 0.75rem; -} - -.w-4 { - width: 1rem; -} - -.w-5 { - width: 1.25rem; -} - -.w-6 { - width: 1.5rem; -} - -.w-8 { - width: 2rem; -} - -.w-10 { - width: 2.5rem; -} - -.w-12 { - width: 3rem; -} - -.w-16 { - width: 4rem; -} - -.w-20 { - width: 5rem; -} - -.w-24 { - width: 6rem; -} - -.w-32 { - width: 8rem; -} - -.w-40 { - width: 10rem; -} - -.w-48 { - width: 12rem; -} - -.w-56 { - width: 14rem; -} - -.w-64 { - width: 16rem; -} - -.w-full { - width: 100%; -} - -.w-screen { - width: 100vw; -} -.w-0 { - width: 0; -} - -.w-px { - width: 1px; -} - -.w-1 { - width: 0.25rem; -} - -.w-2 { - width: 0.5rem; -} - -.w-3 { - width: 0.75rem; -} - -.w-4 { - width: 1rem; -} - -.w-5 { - width: 1.25rem; -} - -.w-6 { - width: 1.5rem; -} - -.w-8 { - width: 2rem; -} - -.w-10 { - width: 2.5rem; -} - -.w-12 { - width: 3rem; -} - -.w-16 { - width: 4rem; -} - -.w-20 { - width: 5rem; -} - -.w-24 { - width: 6rem; -} - -.w-32 { - width: 8rem; -} - -.w-40 { - width: 10rem; -} - -.w-48 { - width: 12rem; -} - -.w-56 { - width: 14rem; -} - -.w-64 { - width: 16rem; -} - -.w-full { - width: 100%; -} - -.w-screen { - width: 100vw; -} +.w-0 { width: 0; } +.w-px { width: 1px; } +.w-1 { width: 0.25rem; } +.w-2 { width: 0.5rem; } +.w-3 { width: 0.75rem; } +.w-4 { width: 1rem; } +.w-5 { width: 1.25rem; } +.w-6 { width: 1.5rem; } +.w-8 { width: 2rem; } +.w-10 { width: 2.5rem; } +.w-12 { width: 3rem; } +.w-16 { width: 4rem; } +.w-20 { width: 5rem; } +.w-24 { width: 6rem; } +.w-32 { width: 8rem; } +.w-40 { width: 10rem; } +.w-48 { width: 12rem; } +.w-56 { width: 14rem; } +.w-64 { width: 16rem; } +.w-full { width: 100%; } +.w-screen{ width: 100vw; } /* ========================== Responsive Variants ========================== */ -@media (min-width: 576px) { - /* sm */ +@media (min-width: 576px) { /* sm */ /* Font */ - .text-xxs-sm { - font-size: 0.55rem; - } - - .text-xs-sm { - font-size: 0.75rem; - } - - .text-sm-sm { - font-size: 0.875rem; - } - - .text-base-sm { - font-size: 1rem; - } - - .text-lg-sm { - font-size: 1.125rem; - } - - .text-xl-sm { - font-size: 1.25rem; - } - - .text-2xl-sm { - font-size: 1.5rem; - } - .text-xxs-sm { - font-size: 0.55rem; - } - - .text-xs-sm { - font-size: 0.75rem; - } - - .text-sm-sm { - font-size: 0.875rem; - } - - .text-base-sm { - font-size: 1rem; - } - - .text-lg-sm { - font-size: 1.125rem; - } - - .text-xl-sm { - font-size: 1.25rem; - } - - .text-2xl-sm { - font-size: 1.5rem; - } + .text-xxs-sm { font-size: 0.55rem; } + .text-xs-sm { font-size: 0.75rem; } + .text-sm-sm { font-size: 0.875rem; } + .text-base-sm{ font-size: 1rem; } + .text-lg-sm { font-size: 1.125rem; } + .text-xl-sm { font-size: 1.25rem; } + .text-2xl-sm{ font-size: 1.5rem; } /* Height */ - .h-1-sm { - height: 0.25rem; - } - - .h-2-sm { - height: 0.5rem; - } - - .h-3-sm { - height: 0.75rem; - } - - .h-4-sm { - height: 1rem; - } - - .h-5-sm { - height: 1.25rem; - } - - .h-6-sm { - height: 1.5rem; - } - - .h-8-sm { - height: 2rem; - } - - .h-10-sm { - height: 2.5rem; - } - .h-1-sm { - height: 0.25rem; - } - - .h-2-sm { - height: 0.5rem; - } - - .h-3-sm { - height: 0.75rem; - } - - .h-4-sm { - height: 1rem; - } - - .h-5-sm { - height: 1.25rem; - } - - .h-6-sm { - height: 1.5rem; - } - - .h-8-sm { - height: 2rem; - } - - .h-10-sm { - height: 2.5rem; - } + .h-1-sm{ height: 0.25rem; } + .h-2-sm{ height: 0.5rem; } + .h-3-sm{ height: 0.75rem; } + .h-4-sm{ height: 1rem; } + .h-5-sm{ height: 1.25rem; } + .h-6-sm{ height: 1.5rem; } + .h-8-sm{ height: 2rem; } + .h-10-sm{ height: 2.5rem; } /* Width */ - .w-1-sm { - width: 0.25rem; - } - - .w-2-sm { - width: 0.5rem; - } - - .w-3-sm { - width: 0.75rem; - } - - .w-4-sm { - width: 1rem; - } - - .w-5-sm { - width: 1.25rem; - } - - .w-6-sm { - width: 1.5rem; - } - - .w-8-sm { - width: 2rem; - } - - .w-10-sm { - width: 2.5rem; - } - .w-1-sm { - width: 0.25rem; - } - - .w-2-sm { - width: 0.5rem; - } - - .w-3-sm { - width: 0.75rem; - } - - .w-4-sm { - width: 1rem; - } - - .w-5-sm { - width: 1.25rem; - } - - .w-6-sm { - width: 1.5rem; - } - - .w-8-sm { - width: 2rem; - } - - .w-10-sm { - width: 2.5rem; - } + .w-1-sm{ width: 0.25rem; } + .w-2-sm{ width: 0.5rem; } + .w-3-sm{ width: 0.75rem; } + .w-4-sm{ width: 1rem; } + .w-5-sm{ width: 1.25rem; } + .w-6-sm{ width: 1.5rem; } + .w-8-sm{ width: 2rem; } + .w-10-sm{ width: 2.5rem; } } -@media (min-width: 768px) { - /* md */ +@media (min-width: 768px) { /* md */ /* Font */ - .text-xxs-md { - font-size: 0.55rem; - } - - .text-xs-md { - font-size: 0.75rem; - } - - .text-sm-md { - font-size: 0.875rem; - } - - .text-base-md { - font-size: 1rem; - } - - .text-lg-md { - font-size: 1.125rem; - } - - .text-xl-md { - font-size: 1.25rem; - } - - .text-2xl-md { - font-size: 1.5rem; - } - .text-xxs-md { - font-size: 0.55rem; - } - - .text-xs-md { - font-size: 0.75rem; - } - - .text-sm-md { - font-size: 0.875rem; - } - - .text-base-md { - font-size: 1rem; - } - - .text-lg-md { - font-size: 1.125rem; - } - - .text-xl-md { - font-size: 1.25rem; - } - - .text-2xl-md { - font-size: 1.5rem; - } + .text-xxs-md { font-size: 0.55rem; } + .text-xs-md { font-size: 0.75rem; } + .text-sm-md { font-size: 0.875rem; } + .text-base-md{ font-size: 1rem; } + .text-lg-md { font-size: 1.125rem; } + .text-xl-md { font-size: 1.25rem; } + .text-2xl-md{ font-size: 1.5rem; } /* Height */ - .h-1-md { - height: 0.25rem; - } - - .h-2-md { - height: 0.5rem; - } - - .h-3-md { - height: 0.75rem; - } - - .h-4-md { - height: 1rem; - } - - .h-5-md { - height: 1.25rem; - } - - .h-6-md { - height: 1.5rem; - } - - .h-8-md { - height: 2rem; - } - - .h-10-md { - height: 2.5rem; - } - .h-1-md { - height: 0.25rem; - } - - .h-2-md { - height: 0.5rem; - } - - .h-3-md { - height: 0.75rem; - } - - .h-4-md { - height: 1rem; - } - - .h-5-md { - height: 1.25rem; - } - - .h-6-md { - height: 1.5rem; - } - - .h-8-md { - height: 2rem; - } - - .h-10-md { - height: 2.5rem; - } + .h-1-md{ height: 0.25rem; } + .h-2-md{ height: 0.5rem; } + .h-3-md{ height: 0.75rem; } + .h-4-md{ height: 1rem; } + .h-5-md{ height: 1.25rem; } + .h-6-md{ height: 1.5rem; } + .h-8-md{ height: 2rem; } + .h-10-md{ height: 2.5rem; } /* Width */ - .w-1-md { - width: 0.25rem; - } - - .w-2-md { - width: 0.5rem; - } - - .w-3-md { - width: 0.75rem; - } - - .w-4-md { - width: 1rem; - } - - .w-5-md { - width: 1.25rem; - } - - .w-6-md { - width: 1.5rem; - } - - .w-8-md { - width: 2rem; - } - - .w-10-md { - width: 2.5rem; - } - .w-1-md { - width: 0.25rem; - } - - .w-2-md { - width: 0.5rem; - } - - .w-3-md { - width: 0.75rem; - } - - .w-4-md { - width: 1rem; - } - - .w-5-md { - width: 1.25rem; - } - - .w-6-md { - width: 1.5rem; - } - - .w-8-md { - width: 2rem; - } - - .w-10-md { - width: 2.5rem; - } + .w-1-md{ width: 0.25rem; } + .w-2-md{ width: 0.5rem; } + .w-3-md{ width: 0.75rem; } + .w-4-md{ width: 1rem; } + .w-5-md{ width: 1.25rem; } + .w-6-md{ width: 1.5rem; } + .w-8-md{ width: 2rem; } + .w-10-md{ width: 2.5rem; } } -@media (min-width: 992px) { - /* lg */ +@media (min-width: 992px) { /* lg */ /* Font */ - .text-xxs-lg { - font-size: 0.55rem; - } - - .text-xs-lg { - font-size: 0.75rem; - } - - .text-sm-lg { - font-size: 0.875rem; - } - - .text-base-lg { - font-size: 1rem; - } - - .text-lg-lg { - font-size: 1.125rem; - } - - .text-xl-lg { - font-size: 1.25rem; - } - - .text-2xl-lg { - font-size: 1.5rem; - } - .text-xxs-lg { - font-size: 0.55rem; - } - - .text-xs-lg { - font-size: 0.75rem; - } - - .text-sm-lg { - font-size: 0.875rem; - } - - .text-base-lg { - font-size: 1rem; - } - - .text-lg-lg { - font-size: 1.125rem; - } - - .text-xl-lg { - font-size: 1.25rem; - } - - .text-2xl-lg { - font-size: 1.5rem; - } + .text-xxs-lg { font-size: 0.55rem; } + .text-xs-lg { font-size: 0.75rem; } + .text-sm-lg { font-size: 0.875rem; } + .text-base-lg{ font-size: 1rem; } + .text-lg-lg { font-size: 1.125rem; } + .text-xl-lg { font-size: 1.25rem; } + .text-2xl-lg{ font-size: 1.5rem; } /* Height */ - .h-1-lg { - height: 0.25rem; - } - - .h-2-lg { - height: 0.5rem; - } - - .h-3-lg { - height: 0.75rem; - } - - .h-4-lg { - height: 1rem; - } - - .h-5-lg { - height: 1.25rem; - } - - .h-6-lg { - height: 1.5rem; - } - - .h-8-lg { - height: 2rem; - } - - .h-10-lg { - height: 2.5rem; - } - .h-1-lg { - height: 0.25rem; - } - - .h-2-lg { - height: 0.5rem; - } - - .h-3-lg { - height: 0.75rem; - } - - .h-4-lg { - height: 1rem; - } - - .h-5-lg { - height: 1.25rem; - } - - .h-6-lg { - height: 1.5rem; - } - - .h-8-lg { - height: 2rem; - } - - .h-10-lg { - height: 2.5rem; - } + .h-1-lg{ height: 0.25rem; } + .h-2-lg{ height: 0.5rem; } + .h-3-lg{ height: 0.75rem; } + .h-4-lg{ height: 1rem; } + .h-5-lg{ height: 1.25rem; } + .h-6-lg{ height: 1.5rem; } + .h-8-lg{ height: 2rem; } + .h-10-lg{ height: 2.5rem; } /* Width */ - .w-1-lg { - width: 0.25rem; - } - - .w-2-lg { - width: 0.5rem; - } - - .w-3-lg { - width: 0.75rem; - } - - .w-4-lg { - width: 1rem; - } - - .w-5-lg { - width: 1.25rem; - } - - .w-6-lg { - width: 1.5rem; - } - - .w-8-lg { - width: 2rem; - } - - .w-10-lg { - width: 2.5rem; - } - .w-1-lg { - width: 0.25rem; - } - - .w-2-lg { - width: 0.5rem; - } - - .w-3-lg { - width: 0.75rem; - } - - .w-4-lg { - width: 1rem; - } - - .w-5-lg { - width: 1.25rem; - } - - .w-6-lg { - width: 1.5rem; - } - - .w-8-lg { - width: 2rem; - } - - .w-10-lg { - width: 2.5rem; - } + .w-1-lg{ width: 0.25rem; } + .w-2-lg{ width: 0.5rem; } + .w-3-lg{ width: 0.75rem; } + .w-4-lg{ width: 1rem; } + .w-5-lg{ width: 1.25rem; } + .w-6-lg{ width: 1.5rem; } + .w-8-lg{ width: 2rem; } + .w-10-lg{ width: 2.5rem; } } -@media (min-width: 1200px) { - /* xl */ +@media (min-width: 1200px) { /* xl */ /* Font */ - .text-xxs-xl { - font-size: 0.55rem; - } - - .text-xs-xl { - font-size: 0.75rem; - } - - .text-sm-xl { - font-size: 0.875rem; - } - - .text-base-xl { - font-size: 1rem; - } - - .text-lg-xl { - font-size: 1.125rem; - } - - .text-xl-xl { - font-size: 1.25rem; - } - - .text-2xl-xl { - font-size: 1.5rem; - } - .text-xxs-xl { - font-size: 0.55rem; - } - - .text-xs-xl { - font-size: 0.75rem; - } - - .text-sm-xl { - font-size: 0.875rem; - } - - .text-base-xl { - font-size: 1rem; - } - - .text-lg-xl { - font-size: 1.125rem; - } - - .text-xl-xl { - font-size: 1.25rem; - } - - .text-2xl-xl { - font-size: 1.5rem; - } + .text-xxs-xl { font-size: 0.55rem; } + .text-xs-xl { font-size: 0.75rem; } + .text-sm-xl { font-size: 0.875rem; } + .text-base-xl{ font-size: 1rem; } + .text-lg-xl { font-size: 1.125rem; } + .text-xl-xl { font-size: 1.25rem; } + .text-2xl-xl{ font-size: 1.5rem; } /* Height */ - .h-1-xl { - height: 0.25rem; - } - - .h-2-xl { - height: 0.5rem; - } - - .h-3-xl { - height: 0.75rem; - } - - .h-4-xl { - height: 1rem; - } - - .h-5-xl { - height: 1.25rem; - } - - .h-6-xl { - height: 1.5rem; - } - - .h-8-xl { - height: 2rem; - } - - .h-10-xl { - height: 2.5rem; - } - .h-1-xl { - height: 0.25rem; - } - - .h-2-xl { - height: 0.5rem; - } - - .h-3-xl { - height: 0.75rem; - } - - .h-4-xl { - height: 1rem; - } - - .h-5-xl { - height: 1.25rem; - } - - .h-6-xl { - height: 1.5rem; - } - - .h-8-xl { - height: 2rem; - } - - .h-10-xl { - height: 2.5rem; - } + .h-1-xl{ height: 0.25rem; } + .h-2-xl{ height: 0.5rem; } + .h-3-xl{ height: 0.75rem; } + .h-4-xl{ height: 1rem; } + .h-5-xl{ height: 1.25rem; } + .h-6-xl{ height: 1.5rem; } + .h-8-xl{ height: 2rem; } + .h-10-xl{ height: 2.5rem; } /* Width */ - .w-1-xl { - width: 0.25rem; - } - - .w-2-xl { - width: 0.5rem; - } - - .w-3-xl { - width: 0.75rem; - } - - .w-4-xl { - width: 1rem; - } - - .w-5-xl { - width: 1.25rem; - } - - .w-6-xl { - width: 1.5rem; - } - - .w-8-xl { - width: 2rem; - } - - .w-10-xl { - width: 2.5rem; - } - .w-1-xl { - width: 0.25rem; - } - - .w-2-xl { - width: 0.5rem; - } - - .w-3-xl { - width: 0.75rem; - } - - .w-4-xl { - width: 1rem; - } - - .w-5-xl { - width: 1.25rem; - } - - .w-6-xl { - width: 1.5rem; - } - - .w-8-xl { - width: 2rem; - } - - .w-10-xl { - width: 2.5rem; - } + .w-1-xl{ width: 0.25rem; } + .w-2-xl{ width: 0.5rem; } + .w-3-xl{ width: 0.75rem; } + .w-4-xl{ width: 1rem; } + .w-5-xl{ width: 1.25rem; } + .w-6-xl{ width: 1.5rem; } + .w-8-xl{ width: 2rem; } + .w-10-xl{ width: 2.5rem; } } + /* ------------------------Text------------------------- */ @media (min-width: 576px) { - .fs-sm-1 { - font-size: calc(1.3rem + 1.6vw) !important; - } + .fs-sm-1 { font-size: calc(1.3rem + 1.6vw) !important; } + .fs-sm-2 { font-size: calc(1.2rem + 1.2vw) !important; } + .fs-sm-3 { font-size: calc(1.1rem + 0.8vw) !important; } + .fs-sm-4 { font-size: calc(1rem + 0.5vw) !important; } + .fs-sm-5 { font-size: 1.05rem !important; } + .fs-sm-6 { font-size: 0.9rem !important; } - .fs-sm-2 { - font-size: calc(1.2rem + 1.2vw) !important; - } - - .fs-sm-3 { - font-size: calc(1.1rem + 0.8vw) !important; - } - - .fs-sm-4 { - font-size: calc(1rem + 0.5vw) !important; - } - - .fs-sm-5 { - font-size: 1.05rem !important; - } - - .fs-sm-6 { - font-size: 0.9rem !important; - } - .fs-sm-1 { - font-size: calc(1.3rem + 1.6vw) !important; - } - - .fs-sm-2 { - font-size: calc(1.2rem + 1.2vw) !important; - } - - .fs-sm-3 { - font-size: calc(1.1rem + 0.8vw) !important; - } - - .fs-sm-4 { - font-size: calc(1rem + 0.5vw) !important; - } - - .fs-sm-5 { - font-size: 1.05rem !important; - } - - .fs-sm-6 { - font-size: 0.9rem !important; - } - - .fs-sm-tiny { - font-size: 72% !important; - } - - .fs-sm-big { - font-size: 115% !important; - } - - .fs-sm-large { - font-size: 155% !important; - } - - .fs-sm-xlarge { - font-size: 175% !important; - } - - .fs-sm-xxlarge { - font-size: calc(1.6rem + 3.5vw) !important; - } - .fs-sm-tiny { - font-size: 72% !important; - } - - .fs-sm-big { - font-size: 115% !important; - } - - .fs-sm-large { - font-size: 155% !important; - } - - .fs-sm-xlarge { - font-size: 175% !important; - } - - .fs-sm-xxlarge { - font-size: calc(1.6rem + 3.5vw) !important; - } + .fs-sm-tiny { font-size: 72% !important; } + .fs-sm-big { font-size: 115% !important; } + .fs-sm-large { font-size: 155% !important; } + .fs-sm-xlarge { font-size: 175% !important; } + .fs-sm-xxlarge { font-size: calc(1.6rem + 3.5vw) !important; } } /* 💻 Medium devices (≥768px) */ @media (min-width: 768px) { - .fs-md-1 { - font-size: calc(1.4125rem + 1.95vw) !important; - } + .fs-md-1 { font-size: calc(1.4125rem + 1.95vw) !important; } + .fs-md-2 { font-size: calc(1.3625rem + 1.35vw) !important; } + .fs-md-3 { font-size: calc(1.3rem + 0.6vw) !important; } + .fs-md-4 { font-size: calc(1.275rem + 0.3vw) !important; } + .fs-md-5 { font-size: 1.125rem !important; } + .fs-md-6 { font-size: 0.9375rem !important; } - .fs-md-2 { - font-size: calc(1.3625rem + 1.35vw) !important; - } - - .fs-md-3 { - font-size: calc(1.3rem + 0.6vw) !important; - } - - .fs-md-4 { - font-size: calc(1.275rem + 0.3vw) !important; - } - - .fs-md-5 { - font-size: 1.125rem !important; - } - - .fs-md-6 { - font-size: 0.9375rem !important; - } - .fs-md-1 { - font-size: calc(1.4125rem + 1.95vw) !important; - } - - .fs-md-2 { - font-size: calc(1.3625rem + 1.35vw) !important; - } - - .fs-md-3 { - font-size: calc(1.3rem + 0.6vw) !important; - } - - .fs-md-4 { - font-size: calc(1.275rem + 0.3vw) !important; - } - - .fs-md-5 { - font-size: 1.125rem !important; - } - - .fs-md-6 { - font-size: 0.9375rem !important; - } - - .fs-md-tiny { - font-size: 70% !important; - } - - .fs-md-big { - font-size: 112% !important; - } - - .fs-md-large { - font-size: 150% !important; - } - - .fs-md-xlarge { - font-size: 170% !important; - } - - .fs-md-xxlarge { - font-size: calc(1.725rem + 5.7vw) !important; - } - .fs-md-tiny { - font-size: 70% !important; - } - - .fs-md-big { - font-size: 112% !important; - } - - .fs-md-large { - font-size: 150% !important; - } - - .fs-md-xlarge { - font-size: 170% !important; - } - - .fs-md-xxlarge { - font-size: calc(1.725rem + 5.7vw) !important; - } -} - - -/* For Chrome, Edge, Safari */ -::-webkit-scrollbar { - width: 8px; + .fs-md-tiny { font-size: 70% !important; } + .fs-md-big { font-size: 112% !important; } + .fs-md-large { font-size: 150% !important; } + .fs-md-xlarge { font-size: 170% !important; } + .fs-md-xxlarge { font-size: calc(1.725rem + 5.7vw) !important; } } /* ====================== Thin Scrollbar (Global) ====================== */ @@ -2296,7 +501,6 @@ } - ::-webkit-scrollbar-track { background: #f0f0f0; /* light grey track */ @@ -2319,24 +523,3 @@ scrollbar-color: #b3b3b3 #f0f0f0; } -::-webkit-scrollbar-track { - background: #f0f0f0; - /* light grey track */ -} - -::-webkit-scrollbar-thumb { - background: #b3b3b3; - /* grey handle */ - border-radius: 4px; -} - -::-webkit-scrollbar-thumb:hover { - background: #8e8e8e; - /* darker grey on hover */ -} - -/* For Firefox */ -* { - scrollbar-width: thin; - scrollbar-color: #b3b3b3 #f0f0f0; -}