149 lines
4.6 KiB
SCSS
149 lines
4.6 KiB
SCSS
// scss-lint:disable SpaceAfterPropertyColon
|
|
@import 'tailwindcss/base';
|
|
@import 'tailwindcss/components';
|
|
@import 'tailwindcss/utilities';
|
|
|
|
@import 'shared/assets/fonts/InterDisplay/inter-display';
|
|
@import 'shared/assets/fonts/inter';
|
|
|
|
// Next Colors
|
|
@import 'next-colors';
|
|
|
|
// Base styles for elements
|
|
@import 'base';
|
|
|
|
// Plugins
|
|
@import 'plugins/date-picker';
|
|
|
|
html,
|
|
body {
|
|
font-family:
|
|
'Inter',
|
|
-apple-system,
|
|
system-ui,
|
|
BlinkMacSystemFont,
|
|
'Segoe UI',
|
|
Roboto,
|
|
'Helvetica Neue',
|
|
Tahoma,
|
|
Arial,
|
|
sans-serif !important;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
-webkit-font-smoothing: antialiased;
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.tooltip {
|
|
@apply bg-n-solid-2 text-n-slate-12 py-1 px-2 z-40 text-xs rounded-md max-w-96;
|
|
}
|
|
|
|
#app {
|
|
@apply h-full w-full;
|
|
}
|
|
|
|
.custom-dashed-border {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='none' rx='16' ry='16' stroke='%23E2E3E7' stroke-width='2' stroke-dasharray='6, 8' stroke-dashoffset='0' stroke-linecap='round'/%3E%3C/svg%3E");
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.dark .custom-dashed-border {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='none' rx='16' ry='16' stroke='%23343434' stroke-width='2' stroke-dasharray='6, 8' stroke-dashoffset='0' stroke-linecap='round'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
@layer utilities {
|
|
/* Hide scrollbar for Chrome, Safari and Opera */
|
|
.no-scrollbar::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
/* Hide scrollbar for IE, Edge and Firefox */
|
|
.no-scrollbar {
|
|
-ms-overflow-style: none; /* IE and Edge */
|
|
scrollbar-width: none; /* Firefox */
|
|
}
|
|
|
|
/**
|
|
* ============================================================================
|
|
* TYPOGRAPHY UTILITIES
|
|
* ============================================================================
|
|
*
|
|
* | Class | Use Case |
|
|
* |--------------------|----------------------------------------------------|
|
|
* | .text-body-main | <p>, <span>, general body text |
|
|
* | .text-body-para | <p> for paragraphs, larger text blocks |
|
|
* | .text-heading-1 | <h1>, page titles, panel headers |
|
|
* | .text-heading-2 | <h2>, section headings, card titles |
|
|
* | .text-heading-3 | <h3>, card headings, breadcrumbs, subsections |
|
|
* | .text-label | <label>, form labels, field names |
|
|
* | .text-label-small | <small>, footnotes, tags, badges, captions |
|
|
* | .text-button | <button>, standard button text |
|
|
* | .text-button-small | <button>, small/compact button text |
|
|
*/
|
|
|
|
/* body-text-main: Main text style for general body text */
|
|
.text-body-main {
|
|
@apply font-inter text-sm font-420;
|
|
line-height: 21px; /* 150% */
|
|
letter-spacing: -0.28px;
|
|
}
|
|
|
|
/* body-text-paragraph: For paragraphs or larger blocks of text */
|
|
.text-body-para {
|
|
@apply font-inter text-sm font-420;
|
|
line-height: 21px; /* 150% */
|
|
letter-spacing: -0.21px;
|
|
}
|
|
|
|
/* heading-1: Large heading for pages and panels */
|
|
.text-heading-1 {
|
|
@apply font-inter text-lg font-520;
|
|
line-height: 24px; /* 133.333% */
|
|
letter-spacing: -0.27px;
|
|
}
|
|
|
|
/* heading-2: Secondary heading for sections */
|
|
.text-heading-2 {
|
|
@apply font-inter text-base font-medium;
|
|
line-height: 24px; /* 133.333% */
|
|
letter-spacing: -0.27px;
|
|
}
|
|
|
|
/* heading-3: For card headings, breadcrumbs, subsections */
|
|
.text-heading-3 {
|
|
@apply font-inter text-sm font-medium;
|
|
line-height: 21px; /* 150% */
|
|
letter-spacing: -0.27px;
|
|
}
|
|
|
|
/* label: Standard label text for form fields */
|
|
.text-label {
|
|
@apply font-inter text-sm font-medium;
|
|
line-height: 21px; /* 150% */
|
|
}
|
|
|
|
/* label-small: Smallest font for labels, footnotes, tags */
|
|
.text-label-small {
|
|
@apply font-inter text-xs font-440;
|
|
line-height: 16px; /* 133.333% */
|
|
letter-spacing: -0.24px;
|
|
}
|
|
|
|
/* button-text: Text for standard size buttons */
|
|
.text-button {
|
|
@apply font-inter text-sm font-460;
|
|
line-height: 21px; /* 150% */
|
|
letter-spacing: -0.28px;
|
|
}
|
|
|
|
/* button-text-small: Text for smaller buttons */
|
|
.text-button-small {
|
|
@apply font-inter text-xs font-440;
|
|
line-height: 18px; /* 150% */
|
|
letter-spacing: -0.24px;
|
|
}
|
|
}
|