mirror of
https://github.com/n8n-io/n8n
synced 2026-04-21 15:47:20 +00:00
chore: Update primary spacing and size css variables to match new guidelines (#20621)
This commit is contained in:
Mutasem Aldmour
GitHub
parent
5c50c0aee1
commit
621adb00ee
464 changed files with 3208 additions and 2956 deletions
|
|
@ -127,7 +127,47 @@ describe('css-var-naming rule', () => {
|
|||
const result = await lintCSS(invalidPattern);
|
||||
expect(result.warnings.length).toBeGreaterThan(0);
|
||||
expect(result.warnings[0]).toMatchObject({
|
||||
text: expect.stringContaining('Must follow pattern'),
|
||||
text: expect.stringContaining('Must have at least 2 groups'),
|
||||
});
|
||||
});
|
||||
|
||||
it('should reject properties without values', async () => {
|
||||
const invalidPattern = `
|
||||
:root {
|
||||
--color: #0d6efd;
|
||||
--spacing: 4px;
|
||||
}
|
||||
`;
|
||||
const result = await lintCSS(invalidPattern);
|
||||
expect(result.warnings.length).toBeGreaterThan(0);
|
||||
expect(result.warnings[0]).toMatchObject({
|
||||
text: expect.stringContaining('Must have at least 2 groups'),
|
||||
});
|
||||
});
|
||||
|
||||
it('should reject spacing property without value', async () => {
|
||||
const invalidPattern = `
|
||||
:root {
|
||||
--spacing: 4px;
|
||||
}
|
||||
`;
|
||||
const result = await lintCSS(invalidPattern);
|
||||
expect(result.warnings.length).toBeGreaterThan(0);
|
||||
expect(result.warnings[0]).toMatchObject({
|
||||
text: expect.stringContaining('Must have at least 2 groups'),
|
||||
});
|
||||
});
|
||||
|
||||
it('should reject variable without proeprty', async () => {
|
||||
const invalidPattern = `
|
||||
:root {
|
||||
--button: 4px;
|
||||
}
|
||||
`;
|
||||
const result = await lintCSS(invalidPattern);
|
||||
expect(result.warnings.length).toBeGreaterThan(0);
|
||||
expect(result.warnings[0]).toMatchObject({
|
||||
text: expect.stringContaining('Must have at least 2 groups'),
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -140,7 +180,7 @@ describe('css-var-naming rule', () => {
|
|||
const result = await lintCSS(invalidPattern);
|
||||
expect(result.warnings.length).toBeGreaterThan(0);
|
||||
expect(result.warnings[0]).toMatchObject({
|
||||
text: expect.stringContaining('Must follow pattern'),
|
||||
text: expect.stringContaining('Must have at least 2 groups'),
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -404,14 +444,24 @@ describe('css-var-naming rule', () => {
|
|||
it('should accept scale values', async () => {
|
||||
const scaleValues = `
|
||||
:root {
|
||||
--spacing--2xs: 2px;
|
||||
--spacing--xs: 4px;
|
||||
--spacing--sm: 8px;
|
||||
--spacing--md: 16px;
|
||||
--spacing--5xs: 2px;
|
||||
--spacing--4xs: 4px;
|
||||
--spacing--3xs: 6px;
|
||||
--spacing--2xs: 8px;
|
||||
--spacing--xs: 12px;
|
||||
--spacing--sm: 16px;
|
||||
--spacing--md: 20px;
|
||||
--spacing--lg: 24px;
|
||||
--spacing--xl: 32px;
|
||||
--spacing--2xl: 48px;
|
||||
--spacing--3xl: 64px;
|
||||
--spacing--4xl: 128px;
|
||||
--spacing--5xl: 256px;
|
||||
--font-size--5xs: 8px;
|
||||
--font-size--4xs: 9px;
|
||||
--font-size--3xs: 10px;
|
||||
--font-size--2xs: 12px;
|
||||
--font-size--xs: 13px;
|
||||
--radius--none: 0;
|
||||
--radius--sm: 2px;
|
||||
--radius--md: 4px;
|
||||
|
|
@ -443,6 +493,33 @@ describe('css-var-naming rule', () => {
|
|||
expect(result.warnings).toHaveLength(0);
|
||||
});
|
||||
|
||||
it('should accept font-weight specific values only with font-weight property', async () => {
|
||||
const fontWeightValues = `
|
||||
:root {
|
||||
--font-weight--regular: 400;
|
||||
--font-weight--medium: 500;
|
||||
--font-weight--semibold: 600;
|
||||
--font-weight--bold: 700;
|
||||
--button--font-weight--bold: 700;
|
||||
}
|
||||
`;
|
||||
const result = await lintCSS(fontWeightValues);
|
||||
expect(result.warnings).toHaveLength(0);
|
||||
});
|
||||
|
||||
it('should reject font-weight specific values with non-font-weight properties', async () => {
|
||||
const invalidFontWeight = `
|
||||
:root {
|
||||
--spacing--bold: 20px;
|
||||
}
|
||||
`;
|
||||
const result = await lintCSS(invalidFontWeight);
|
||||
expect(result.warnings.length).toBeGreaterThan(0);
|
||||
expect(result.warnings[0]).toMatchObject({
|
||||
text: expect.stringContaining('can only be used with font-weight property'),
|
||||
});
|
||||
});
|
||||
|
||||
it('should reject very short value names (<4 chars)', async () => {
|
||||
const shortValue = `
|
||||
:root {
|
||||
|
|
@ -502,7 +579,7 @@ describe('css-var-naming rule', () => {
|
|||
const result = await lintCSS(invalidVarReferences);
|
||||
expect(result.warnings.length).toBeGreaterThan(0);
|
||||
expect(result.warnings[0]).toMatchObject({
|
||||
text: expect.stringContaining('Must follow pattern'),
|
||||
text: expect.stringContaining('Must have at least 2 groups'),
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -594,6 +671,38 @@ describe('css-var-naming rule', () => {
|
|||
});
|
||||
|
||||
describe('edge cases', () => {
|
||||
it('should accept single-property shorthand variables', async () => {
|
||||
const singleProperties = `
|
||||
:root {
|
||||
--shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
--radius: 4px;
|
||||
--border-color: #ddd;
|
||||
--border-style: solid;
|
||||
--border-width: 1px;
|
||||
--border: 1px solid #ddd;
|
||||
--font-family: InterVariable, sans-serif;
|
||||
}
|
||||
`;
|
||||
const result = await lintCSS(singleProperties);
|
||||
expect(result.warnings).toHaveLength(0);
|
||||
});
|
||||
|
||||
it('should accept shorthand properties in component patterns', async () => {
|
||||
const componentShorthand = `
|
||||
:root {
|
||||
--n8n--button--border-color: #ddd;
|
||||
--button--border: 1px solid #ddd;
|
||||
--chat--font--font-family: InterVariable, sans-serif;
|
||||
--menu--tab--radius: 4px;
|
||||
--card--shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
--input--border-style: solid;
|
||||
--input--border-width: 1px;
|
||||
}
|
||||
`;
|
||||
const result = await lintCSS(componentShorthand);
|
||||
expect(result.warnings).toHaveLength(0);
|
||||
});
|
||||
|
||||
it('should accept variables with numbers in groups', async () => {
|
||||
const numbersInGroups = `
|
||||
:root {
|
||||
|
|
|
|||
|
|
@ -18,12 +18,15 @@ const PROPERTY_VOCABULARY = new Set([
|
|||
'background',
|
||||
'border-color',
|
||||
'border-width',
|
||||
'border-style',
|
||||
'border',
|
||||
'icon-color',
|
||||
'radius',
|
||||
'shadow',
|
||||
'spacing',
|
||||
'font-size',
|
||||
'font-weight',
|
||||
'font-family',
|
||||
'line-height',
|
||||
'z',
|
||||
'duration',
|
||||
|
|
@ -32,6 +35,17 @@ const PROPERTY_VOCABULARY = new Set([
|
|||
'outline-width',
|
||||
]);
|
||||
|
||||
// Properties that can be used as standalone single-group variables (without a value)
|
||||
const STANDALONE_PROPERTIES = new Set([
|
||||
'shadow',
|
||||
'radius',
|
||||
'border-color',
|
||||
'border-style',
|
||||
'border-width',
|
||||
'border',
|
||||
'font-family',
|
||||
]);
|
||||
|
||||
const STATES = new Set([
|
||||
'hover',
|
||||
'active',
|
||||
|
|
@ -71,7 +85,9 @@ const SEMANTIC_VALUES = new Set([
|
|||
]);
|
||||
|
||||
const SCALE_VALUES = new Set([
|
||||
'none',
|
||||
'5xs',
|
||||
'4xs',
|
||||
'3xs',
|
||||
'2xs',
|
||||
'xs',
|
||||
'sm',
|
||||
|
|
@ -80,14 +96,13 @@ const SCALE_VALUES = new Set([
|
|||
'xl',
|
||||
'2xl',
|
||||
'3xl',
|
||||
'pill',
|
||||
'full',
|
||||
'regular',
|
||||
'medium',
|
||||
'semibold',
|
||||
'bold',
|
||||
'4xl',
|
||||
'5xl',
|
||||
]);
|
||||
|
||||
// Font weight specific values (only valid with font-weight property)
|
||||
const FONT_WEIGHT_VALUES = new Set(['regular', 'medium', 'semibold', 'bold']);
|
||||
|
||||
// Regex for basic validation
|
||||
const BASIC_PATTERN = /^--[a-z0-9]+(?:-[a-z0-9]+)*(?:--[a-z0-9]+(?:-[a-z0-9]+)*){1,7}$/;
|
||||
|
||||
|
|
@ -97,7 +112,23 @@ interface ValidationResult {
|
|||
}
|
||||
|
||||
function validateCssVariable(variable: string): ValidationResult {
|
||||
// Basic pattern check
|
||||
// Split into groups first (drop first empty element from leading --)
|
||||
const groups = variable.slice(2).split('--');
|
||||
|
||||
// Check if this is a single-group variable (e.g., --shadow, --radius, --border-color)
|
||||
if (groups.length === 1) {
|
||||
const singleGroup = groups[0];
|
||||
// Allow standalone properties that are in the STANDALONE_PROPERTIES set
|
||||
if (STANDALONE_PROPERTIES.has(singleGroup)) {
|
||||
return { valid: true };
|
||||
}
|
||||
return {
|
||||
valid: false,
|
||||
reason: 'Must have at least 2 groups separated by double dashes (--property--value minimum)',
|
||||
};
|
||||
}
|
||||
|
||||
// Basic pattern check for multi-group variables
|
||||
if (!BASIC_PATTERN.test(variable)) {
|
||||
return {
|
||||
valid: false,
|
||||
|
|
@ -106,9 +137,6 @@ function validateCssVariable(variable: string): ValidationResult {
|
|||
};
|
||||
}
|
||||
|
||||
// Split into groups (drop first empty element from leading --)
|
||||
const groups = variable.slice(2).split('--');
|
||||
|
||||
// Check group count (2-8 groups)
|
||||
if (groups.length < 2) {
|
||||
return {
|
||||
|
|
@ -158,10 +186,24 @@ function validateCssVariable(variable: string): ValidationResult {
|
|||
.findIndex((group) => PROPERTY_VOCABULARY.has(group));
|
||||
const absolutePropertyIndex = startIndex + propertyIndex;
|
||||
|
||||
// Get the property name to validate specific property-value combinations
|
||||
const propertyName = groups[absolutePropertyIndex];
|
||||
|
||||
// The group after property should be a value (semantic or scale)
|
||||
if (absolutePropertyIndex + 1 < groups.length) {
|
||||
const valueGroup = groups[absolutePropertyIndex + 1];
|
||||
|
||||
// Check if this is a font-weight specific value
|
||||
if (FONT_WEIGHT_VALUES.has(valueGroup)) {
|
||||
// Font weight values are only valid with font-weight property
|
||||
if (propertyName !== 'font-weight') {
|
||||
return {
|
||||
valid: false,
|
||||
reason: `Value "${valueGroup}" can only be used with font-weight property (e.g., --font-weight--${valueGroup})`,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// Check if this is a known modifier (variant, state, mode, media)
|
||||
const isModifier =
|
||||
VARIANTS.has(valueGroup) ||
|
||||
|
|
@ -175,6 +217,7 @@ function validateCssVariable(variable: string): ValidationResult {
|
|||
const isValidValue =
|
||||
SEMANTIC_VALUES.has(valueGroup) ||
|
||||
SCALE_VALUES.has(valueGroup) ||
|
||||
FONT_WEIGHT_VALUES.has(valueGroup) ||
|
||||
// Allow color shades like "primary-500", "shade-50", "tint-50"
|
||||
/^[a-z]+-\d+$/.test(valueGroup) ||
|
||||
// Allow descriptive names (4+ chars) - these are likely intentional semantic names
|
||||
|
|
|
|||
|
|
@ -87,9 +87,9 @@ watch(
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--spacing-xs);
|
||||
padding-inline: var(--spacing-m);
|
||||
padding-bottom: var(--spacing-l);
|
||||
gap: var(--spacing--xs);
|
||||
padding-inline: var(--spacing--md);
|
||||
padding-bottom: var(--spacing--lg);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -122,7 +122,7 @@ body {
|
|||
kbd,
|
||||
samp {
|
||||
font-family:
|
||||
var(--font-family-monospace),
|
||||
var(--font-family--monospace),
|
||||
/* macOS emoji */ 'Apple Color Emoji',
|
||||
/* Windows emoji */ 'Segoe UI Emoji',
|
||||
/* Windows emoji */ 'Segoe UI Symbol',
|
||||
|
|
@ -147,7 +147,7 @@ body {
|
|||
*/
|
||||
b,
|
||||
strong {
|
||||
font-weight: var(--font-weight-bold);
|
||||
font-weight: var(--font-weight--bold);
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -461,7 +461,7 @@ body {
|
|||
display: block;
|
||||
font-size: 1em;
|
||||
font-style: italic;
|
||||
font-weight: var(--font-weight-regular);
|
||||
font-weight: var(--font-weight--regular);
|
||||
line-height: 1.3;
|
||||
margin-top: 0.3em;
|
||||
}
|
||||
|
|
@ -501,7 +501,7 @@ body {
|
|||
*/
|
||||
ins {
|
||||
text-decoration: none;
|
||||
font-weight: var(--font-weight-bold);
|
||||
font-weight: var(--font-weight--bold);
|
||||
}
|
||||
|
||||
blockquote {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
|
||||
#storybook-root > div:not([class]) > *,
|
||||
#storybook-root > * {
|
||||
margin: var(--spacing-5xs);
|
||||
margin: var(--spacing--5xs);
|
||||
}
|
||||
|
||||
body {
|
||||
|
|
|
|||
|
|
@ -22,12 +22,12 @@ withDefaults(defineProps<{ size?: 'small' | 'mini' }>(), {
|
|||
}
|
||||
|
||||
.small {
|
||||
height: var(--spacing-m);
|
||||
width: var(--spacing-m);
|
||||
height: var(--spacing--md);
|
||||
width: var(--spacing--md);
|
||||
}
|
||||
|
||||
.mini {
|
||||
height: var(--spacing-s);
|
||||
width: var(--spacing-s);
|
||||
height: var(--spacing--sm);
|
||||
width: var(--spacing--sm);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -53,9 +53,9 @@ function onMouseLeave() {
|
|||
|
||||
<style lang="scss" module>
|
||||
.button {
|
||||
border: var(--border-base);
|
||||
border: var(--border);
|
||||
background: var(--color--foreground--tint-2);
|
||||
border-radius: var(--border-radius-base);
|
||||
border-radius: var(--radius);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -78,12 +78,12 @@ function onMouseLeave() {
|
|||
color: var(--prim-color-white);
|
||||
background: var(--color-assistant-highlight-reverse);
|
||||
border-radius: 50%;
|
||||
width: var(--spacing-s);
|
||||
height: var(--spacing-s);
|
||||
width: var(--spacing--sm);
|
||||
height: var(--spacing--sm);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: var(--font-size-3xs);
|
||||
font-size: var(--font-size--3xs);
|
||||
}
|
||||
|
||||
.text {
|
||||
|
|
|
|||
|
|
@ -576,9 +576,9 @@ defineExpose({
|
|||
|
||||
.header {
|
||||
height: 65px; // same as header height in editor
|
||||
padding: 0 var(--spacing-l);
|
||||
padding: 0 var(--spacing--lg);
|
||||
background-color: var(--color--background--light-3);
|
||||
border: var(--border-base);
|
||||
border: var(--border);
|
||||
border-top: 0;
|
||||
display: flex;
|
||||
|
||||
|
|
@ -594,13 +594,13 @@ defineExpose({
|
|||
|
||||
.betaTag {
|
||||
color: var(--color--text);
|
||||
font-size: var(--font-size-2xs);
|
||||
font-weight: var(--font-weight-bold);
|
||||
font-size: var(--font-size--2xs);
|
||||
font-weight: var(--font-weight--bold);
|
||||
}
|
||||
|
||||
.body {
|
||||
background-color: var(--color--background--light-2);
|
||||
border: var(--border-base);
|
||||
border: var(--border);
|
||||
border-top: 0;
|
||||
border-bottom: 0;
|
||||
position: relative;
|
||||
|
|
@ -612,7 +612,7 @@ defineExpose({
|
|||
}
|
||||
|
||||
.placeholder {
|
||||
padding: var(--spacing-s);
|
||||
padding: var(--spacing--sm);
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -637,45 +637,45 @@ defineExpose({
|
|||
}
|
||||
|
||||
.messagesContent {
|
||||
padding: var(--spacing-xs);
|
||||
padding-bottom: var(--spacing-xl); // Extra padding for fade area
|
||||
padding: var(--spacing--xs);
|
||||
padding-bottom: var(--spacing--xl); // Extra padding for fade area
|
||||
}
|
||||
|
||||
.message {
|
||||
margin-bottom: var(--spacing-s);
|
||||
font-size: var(--font-size-2xs);
|
||||
line-height: var(--font-line-height-xloose);
|
||||
margin-bottom: var(--spacing--sm);
|
||||
font-size: var(--font-size--2xs);
|
||||
line-height: var(--line-height--xl);
|
||||
}
|
||||
|
||||
.firstToolMessage {
|
||||
margin-top: var(--spacing-m);
|
||||
margin-top: var(--spacing--md);
|
||||
}
|
||||
|
||||
.lastToolMessage {
|
||||
margin-bottom: var(--spacing-l);
|
||||
margin-bottom: var(--spacing--lg);
|
||||
}
|
||||
|
||||
.chatTitle {
|
||||
display: flex;
|
||||
gap: var(--spacing-xs);
|
||||
gap: var(--spacing--xs);
|
||||
}
|
||||
|
||||
.headerText {
|
||||
gap: var(--spacing-3xs);
|
||||
gap: var(--spacing--3xs);
|
||||
}
|
||||
|
||||
.assistantTitle {
|
||||
gap: var(--spacing-2xs);
|
||||
gap: var(--spacing--2xs);
|
||||
}
|
||||
|
||||
.greeting {
|
||||
color: var(--color--text--shade-1);
|
||||
font-size: var(--font-size-m);
|
||||
margin-bottom: var(--spacing-s);
|
||||
font-size: var(--font-size--md);
|
||||
margin-bottom: var(--spacing--sm);
|
||||
}
|
||||
|
||||
.info {
|
||||
font-size: var(--font-size-s);
|
||||
font-size: var(--font-size--sm);
|
||||
color: var(--color--text);
|
||||
|
||||
button {
|
||||
|
|
@ -688,34 +688,34 @@ defineExpose({
|
|||
}
|
||||
|
||||
.quickReplies {
|
||||
margin-top: var(--spacing-s);
|
||||
margin-top: var(--spacing--sm);
|
||||
|
||||
> * {
|
||||
margin-bottom: var(--spacing-3xs);
|
||||
margin-bottom: var(--spacing--3xs);
|
||||
}
|
||||
}
|
||||
|
||||
.quickRepliesTitle {
|
||||
font-size: var(--font-size-3xs);
|
||||
font-size: var(--font-size--3xs);
|
||||
color: var(--color--text);
|
||||
}
|
||||
|
||||
.inputWrapper {
|
||||
padding: var(--spacing-4xs) var(--spacing-2xs) var(--spacing-xs);
|
||||
padding: var(--spacing--4xs) var(--spacing--2xs) var(--spacing--xs);
|
||||
background-color: transparent;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
border-left: var(--border-base);
|
||||
border-right: var(--border-base);
|
||||
border-left: var(--border);
|
||||
border-right: var(--border);
|
||||
|
||||
// Add a gradient fade from the chat to the input
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: calc(-1 * var(--spacing-m));
|
||||
top: calc(-1 * var(--spacing--md));
|
||||
left: 0;
|
||||
right: var(--spacing-xs);
|
||||
height: var(--spacing-m);
|
||||
right: var(--spacing--xs);
|
||||
height: var(--spacing--md);
|
||||
background: linear-gradient(to bottom, transparent 0%, var(--color--background--light-2) 100%);
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
|
|
|
|||
|
|
@ -58,25 +58,25 @@ function onRate(rating: RatingFeedback) {
|
|||
|
||||
<style lang="scss" module>
|
||||
.message {
|
||||
margin-bottom: var(--spacing-s);
|
||||
font-size: var(--font-size-2xs);
|
||||
line-height: var(--font-line-height-xloose);
|
||||
margin-bottom: var(--spacing--sm);
|
||||
font-size: var(--font-size--2xs);
|
||||
line-height: var(--line-height--xl);
|
||||
}
|
||||
|
||||
.roleName {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: var(--spacing-3xs);
|
||||
height: var(--spacing-xl);
|
||||
font-weight: var(--font-weight-bold);
|
||||
font-size: var(--font-size-2xs);
|
||||
margin-bottom: var(--spacing--3xs);
|
||||
height: var(--spacing--xl);
|
||||
font-weight: var(--font-weight--bold);
|
||||
font-size: var(--font-size--2xs);
|
||||
|
||||
> * {
|
||||
margin-right: var(--spacing-3xs);
|
||||
margin-right: var(--spacing--3xs);
|
||||
}
|
||||
}
|
||||
|
||||
.userSection {
|
||||
margin-top: var(--spacing-m);
|
||||
margin-top: var(--spacing--md);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -47,56 +47,56 @@ const { renderMarkdown } = useMarkdown();
|
|||
|
||||
<style lang="scss" module>
|
||||
.block {
|
||||
font-size: var(--font-size-2xs);
|
||||
font-size: var(--font-size--2xs);
|
||||
background-color: var(--color--foreground--tint-2);
|
||||
border: var(--border-base);
|
||||
border-radius: var(--border-radius-base);
|
||||
border: var(--border);
|
||||
border-radius: var(--radius);
|
||||
word-break: break-word;
|
||||
|
||||
li {
|
||||
margin-left: var(--spacing-xs);
|
||||
margin-left: var(--spacing--xs);
|
||||
}
|
||||
}
|
||||
|
||||
.blockTitle {
|
||||
border-bottom: var(--border-base);
|
||||
padding: var(--spacing-2xs);
|
||||
font-weight: var(--font-weight-bold);
|
||||
border-bottom: var(--border);
|
||||
padding: var(--spacing--2xs);
|
||||
font-weight: var(--font-weight--bold);
|
||||
}
|
||||
|
||||
.blockBody {
|
||||
padding: var(--spacing-xs);
|
||||
padding: var(--spacing--xs);
|
||||
}
|
||||
|
||||
.rendered-content {
|
||||
p {
|
||||
margin: 0;
|
||||
margin: var(--spacing-4xs) 0;
|
||||
margin: var(--spacing--4xs) 0;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
font-weight: var(--font-weight-bold);
|
||||
font-size: var(--font-size-xs);
|
||||
margin: var(--spacing-xs) 0 var(--spacing-4xs);
|
||||
font-weight: var(--font-weight--bold);
|
||||
font-size: var(--font-size--xs);
|
||||
margin: var(--spacing--xs) 0 var(--spacing--4xs);
|
||||
}
|
||||
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: var(--font-weight-bold);
|
||||
font-size: var(--font-size-2xs);
|
||||
font-weight: var(--font-weight--bold);
|
||||
font-size: var(--font-size--2xs);
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
margin: var(--spacing-4xs) 0 var(--spacing-4xs) var(--spacing-l);
|
||||
margin: var(--spacing--4xs) 0 var(--spacing--4xs) var(--spacing--lg);
|
||||
|
||||
ul,
|
||||
ol {
|
||||
margin-left: var(--spacing-xs);
|
||||
margin-top: var(--spacing-4xs);
|
||||
margin-left: var(--spacing--xs);
|
||||
margin-top: var(--spacing--4xs);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -105,7 +105,7 @@ const { renderMarkdown } = useMarkdown();
|
|||
}
|
||||
|
||||
table {
|
||||
margin: var(--spacing-4xs) 0;
|
||||
margin: var(--spacing--4xs) 0;
|
||||
|
||||
th {
|
||||
white-space: nowrap;
|
||||
|
|
@ -115,8 +115,8 @@ const { renderMarkdown } = useMarkdown();
|
|||
|
||||
th,
|
||||
td {
|
||||
border: var(--border-base);
|
||||
padding: var(--spacing-4xs);
|
||||
border: var(--border);
|
||||
padding: var(--spacing--4xs);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -43,27 +43,27 @@ const { t } = useI18n();
|
|||
.error {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-2xs);
|
||||
padding: var(--spacing-2xs) var(--spacing-xs);
|
||||
gap: var(--spacing--2xs);
|
||||
padding: var(--spacing--2xs) var(--spacing--xs);
|
||||
border: 1px solid var(--color--foreground);
|
||||
border-radius: var(--border-radius-base);
|
||||
border-radius: var(--radius);
|
||||
background-color: var(--color--background--light-3);
|
||||
}
|
||||
|
||||
.errorIcon {
|
||||
margin-right: var(--spacing-5xs);
|
||||
margin-right: var(--spacing--5xs);
|
||||
color: var(--color--danger);
|
||||
}
|
||||
|
||||
.errorText {
|
||||
color: var(--color--danger);
|
||||
font-weight: var(--font-weight-regular);
|
||||
font-weight: var(--font-weight--regular);
|
||||
line-height: var(--font-line-height-tight);
|
||||
word-break: break-word;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.retryButton {
|
||||
margin-top: var(--spacing-3xs);
|
||||
margin-top: var(--spacing--3xs);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -55,14 +55,14 @@ const eventMessages: Record<EventName, { part1: string; part2: string }> = {
|
|||
|
||||
<style lang="scss" module>
|
||||
.eventText {
|
||||
margin-top: var(--spacing-l);
|
||||
padding-top: var(--spacing-3xs);
|
||||
border-top: var(--border-base);
|
||||
margin-top: var(--spacing--lg);
|
||||
padding-top: var(--spacing--3xs);
|
||||
border-top: var(--border);
|
||||
color: var(--color--text);
|
||||
|
||||
> button,
|
||||
> span {
|
||||
margin-right: var(--spacing-3xs);
|
||||
margin-right: var(--spacing--3xs);
|
||||
}
|
||||
|
||||
button {
|
||||
|
|
|
|||
|
|
@ -145,51 +145,51 @@ function onCancelFeedback() {
|
|||
.rating {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-2xs);
|
||||
margin-top: var(--spacing-2xs);
|
||||
gap: var(--spacing--2xs);
|
||||
margin-top: var(--spacing--2xs);
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
gap: var(--spacing-2xs);
|
||||
gap: var(--spacing--2xs);
|
||||
}
|
||||
|
||||
.feedbackContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-2xs);
|
||||
gap: var(--spacing--2xs);
|
||||
}
|
||||
|
||||
.feedbackInput {
|
||||
:global(.el-textarea__inner) {
|
||||
resize: none;
|
||||
font-family: var(--font-family);
|
||||
font-size: var(--font-size-s);
|
||||
font-size: var(--font-size--sm);
|
||||
|
||||
&::placeholder {
|
||||
font-size: var(--font-size-s);
|
||||
font-size: var(--font-size--sm);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.feedbackActions {
|
||||
display: flex;
|
||||
gap: var(--spacing-2xs);
|
||||
gap: var(--spacing--2xs);
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.success {
|
||||
color: var(--color--text);
|
||||
font-size: var(--font-size-2xs);
|
||||
font-size: var(--font-size--2xs);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Minimal style specific */
|
||||
.minimal {
|
||||
margin-top: var(--spacing-5xs);
|
||||
margin-top: var(--spacing--5xs);
|
||||
|
||||
.buttons {
|
||||
gap: var(--spacing-5xs);
|
||||
gap: var(--spacing--5xs);
|
||||
}
|
||||
|
||||
.ratingButton {
|
||||
|
|
@ -199,15 +199,15 @@ function onCancelFeedback() {
|
|||
}
|
||||
|
||||
.feedbackContainer {
|
||||
gap: var(--spacing-3xs);
|
||||
gap: var(--spacing--3xs);
|
||||
}
|
||||
|
||||
.feedbackInput {
|
||||
:global(.el-textarea__inner) {
|
||||
font-size: var(--font-size-2xs);
|
||||
font-size: var(--font-size--2xs);
|
||||
|
||||
&::placeholder {
|
||||
font-size: var(--font-size-2xs);
|
||||
font-size: var(--font-size--2xs);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -92,19 +92,19 @@ async function onCopyButtonClick(content: string, e: MouseEvent) {
|
|||
.textMessage {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-xs);
|
||||
font-size: var(--font-size-2xs);
|
||||
gap: var(--spacing--xs);
|
||||
font-size: var(--font-size--2xs);
|
||||
line-height: 1.6;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.codeSnippet {
|
||||
position: relative;
|
||||
border: var(--border-base);
|
||||
border: var(--border);
|
||||
background-color: var(--color--foreground--tint-2);
|
||||
border-radius: var(--border-radius-base);
|
||||
font-family: var(--font-family-monospace);
|
||||
font-size: var(--font-size-3xs);
|
||||
border-radius: var(--radius);
|
||||
font-family: var(--font-family--monospace);
|
||||
font-size: var(--font-size--3xs);
|
||||
max-height: 218px; // 12 lines
|
||||
overflow: auto;
|
||||
margin: var(--spacing-4s) 0;
|
||||
|
|
@ -112,8 +112,8 @@ async function onCopyButtonClick(content: string, e: MouseEvent) {
|
|||
header {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: var(--spacing-4xs);
|
||||
border-bottom: var(--border-base);
|
||||
padding: var(--spacing--4xs);
|
||||
border-bottom: var(--border);
|
||||
|
||||
button:active,
|
||||
button:focus {
|
||||
|
|
@ -122,7 +122,7 @@ async function onCopyButtonClick(content: string, e: MouseEvent) {
|
|||
}
|
||||
|
||||
.snippetContent {
|
||||
padding: var(--spacing-2xs);
|
||||
padding: var(--spacing--2xs);
|
||||
}
|
||||
|
||||
pre {
|
||||
|
|
@ -131,7 +131,7 @@ async function onCopyButtonClick(content: string, e: MouseEvent) {
|
|||
|
||||
code {
|
||||
background-color: transparent;
|
||||
font-size: var(--font-size-3xs);
|
||||
font-size: var(--font-size--3xs);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -143,36 +143,36 @@ async function onCopyButtonClick(content: string, e: MouseEvent) {
|
|||
.renderedContent {
|
||||
p {
|
||||
margin: 0;
|
||||
margin: var(--spacing-4xs) 0;
|
||||
margin: var(--spacing--4xs) 0;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
font-weight: var(--font-weight-bold);
|
||||
font-size: var(--font-size-xs);
|
||||
margin: var(--spacing-xs) 0 var(--spacing-4xs);
|
||||
font-weight: var(--font-weight--bold);
|
||||
font-size: var(--font-size--xs);
|
||||
margin: var(--spacing--xs) 0 var(--spacing--4xs);
|
||||
}
|
||||
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: var(--font-weight-bold);
|
||||
font-size: var(--font-size-2xs);
|
||||
font-weight: var(--font-weight--bold);
|
||||
font-size: var(--font-size--2xs);
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
margin: var(--spacing-4xs) 0 var(--spacing-4xs) var(--spacing-l);
|
||||
margin: var(--spacing--4xs) 0 var(--spacing--4xs) var(--spacing--lg);
|
||||
|
||||
li {
|
||||
margin-bottom: var(--spacing-5xs);
|
||||
margin-bottom: var(--spacing--5xs);
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
margin-left: var(--spacing-xs);
|
||||
margin-top: var(--spacing-4xs);
|
||||
margin-left: var(--spacing--xs);
|
||||
margin-top: var(--spacing--4xs);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -181,7 +181,7 @@ async function onCopyButtonClick(content: string, e: MouseEvent) {
|
|||
}
|
||||
|
||||
table {
|
||||
margin: var(--spacing-4xs) 0;
|
||||
margin: var(--spacing--4xs) 0;
|
||||
|
||||
th {
|
||||
white-space: nowrap;
|
||||
|
|
@ -191,8 +191,8 @@ async function onCopyButtonClick(content: string, e: MouseEvent) {
|
|||
|
||||
th,
|
||||
td {
|
||||
border: var(--border-base);
|
||||
padding: var(--spacing-4xs);
|
||||
border: var(--border);
|
||||
padding: var(--spacing--4xs);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -101,19 +101,19 @@ const statusColor = computed(() => {
|
|||
.titleRow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-2xs);
|
||||
gap: var(--spacing--2xs);
|
||||
}
|
||||
|
||||
.status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: var(--spacing-m);
|
||||
width: var(--spacing--md);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.statusText {
|
||||
font-size: var(--font-size-2xs);
|
||||
font-size: var(--font-size--2xs);
|
||||
|
||||
&.status-running {
|
||||
color: var(--execution-card-text-waiting);
|
||||
|
|
@ -129,22 +129,22 @@ const statusColor = computed(() => {
|
|||
}
|
||||
|
||||
.content {
|
||||
padding: 0 var(--spacing-xs) var(--spacing-xs) var(--spacing-xs);
|
||||
border-radius: var(--border-radius-base);
|
||||
padding: 0 var(--spacing--xs) var(--spacing--xs) var(--spacing--xs);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
.sectionTitle {
|
||||
font-weight: var(--font-weight-bold);
|
||||
font-size: var(--font-size-2xs);
|
||||
font-weight: var(--font-weight--bold);
|
||||
font-size: var(--font-size--2xs);
|
||||
color: var(--color--text--shade-1);
|
||||
margin-bottom: var(--spacing-3xs);
|
||||
margin-bottom: var(--spacing--3xs);
|
||||
}
|
||||
|
||||
.errorContent {
|
||||
color: var(--color--danger);
|
||||
font-size: var(--font-size-2xs);
|
||||
padding: var(--spacing-xs);
|
||||
font-size: var(--font-size--2xs);
|
||||
padding: var(--spacing--xs);
|
||||
background-color: var(--color--danger--tint-4);
|
||||
border-radius: var(--border-radius-base);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ withDefaults(
|
|||
.container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-2xs);
|
||||
gap: var(--spacing--2xs);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
|
|
@ -38,7 +38,7 @@ withDefaults(
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: var(--spacing-m);
|
||||
width: var(--spacing--md);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -51,6 +51,6 @@ onMounted(() => {
|
|||
|
||||
<style module lang="scss">
|
||||
.loading-message {
|
||||
padding: var(--spacing-3xs);
|
||||
padding: var(--spacing--3xs);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -15,17 +15,17 @@ withDefaults(defineProps<{ text: string; size?: 'small' | 'medium' | 'large' | '
|
|||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
font-weight: var(--font-weight-bold);
|
||||
font-weight: var(--font-weight--bold);
|
||||
}
|
||||
|
||||
.small {
|
||||
font-size: 9px;
|
||||
line-height: var(--spacing-xs);
|
||||
line-height: var(--spacing--xs);
|
||||
}
|
||||
|
||||
.medium {
|
||||
font-size: var(--spacing-xs);
|
||||
line-height: var(--spacing-s);
|
||||
font-size: var(--spacing--xs);
|
||||
line-height: var(--spacing--sm);
|
||||
}
|
||||
|
||||
.large {
|
||||
|
|
@ -34,7 +34,7 @@ withDefaults(defineProps<{ text: string; size?: 'small' | 'medium' | 'large' | '
|
|||
}
|
||||
|
||||
.xlarge {
|
||||
font-size: var(--spacing-s);
|
||||
line-height: var(--spacing-s);
|
||||
font-size: var(--spacing--sm);
|
||||
line-height: var(--spacing--sm);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -13,10 +13,10 @@ const { t } = useI18n();
|
|||
display: inline-block;
|
||||
|
||||
color: var(--color--secondary);
|
||||
font-size: var(--font-size-3xs);
|
||||
font-weight: var(--font-weight-bold);
|
||||
font-size: var(--font-size--3xs);
|
||||
font-weight: var(--font-weight--bold);
|
||||
background-color: var(--color--secondary--tint-2);
|
||||
padding: var(--spacing-5xs) var(--spacing-4xs);
|
||||
padding: var(--spacing--5xs) var(--spacing--4xs);
|
||||
border-radius: 16px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -5,10 +5,10 @@
|
|||
<style lang="scss">
|
||||
.blinking-cursor {
|
||||
display: inline-block;
|
||||
height: var(--font-size-m);
|
||||
width: var(--spacing-3xs);
|
||||
border-radius: var(--border-radius-small);
|
||||
margin-left: var(--spacing-4xs);
|
||||
height: var(--font-size--md);
|
||||
width: var(--spacing--3xs);
|
||||
border-radius: var(--radius--sm);
|
||||
margin-left: var(--spacing--4xs);
|
||||
|
||||
animation: 1s blink step-end infinite;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -44,10 +44,10 @@ const $style = useCssModule();
|
|||
.thinkingPill {
|
||||
display: flex;
|
||||
height: 40px;
|
||||
padding: 0 var(--spacing-s) 0 var(--spacing-xs);
|
||||
padding: 0 var(--spacing--sm) 0 var(--spacing--xs);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: var(--spacing-2xs);
|
||||
gap: var(--spacing--2xs);
|
||||
border-radius: 22px;
|
||||
border: 1px solid var(--prim-gray-740);
|
||||
background: rgba(65, 66, 68, 0.92);
|
||||
|
|
@ -71,12 +71,12 @@ const $style = useCssModule();
|
|||
}
|
||||
|
||||
.stopButton {
|
||||
margin-left: var(--spacing-xs);
|
||||
margin-left: var(--spacing--xs);
|
||||
}
|
||||
.text {
|
||||
color: white;
|
||||
font-size: var(--font-size-s);
|
||||
font-weight: var(--font-weight-medium);
|
||||
font-size: var(--font-size--sm);
|
||||
font-weight: var(--font-weight--medium);
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -143,15 +143,15 @@ const diffs = computed(() => {
|
|||
|
||||
<style lang="scss" module>
|
||||
.container {
|
||||
border: var(--border-base);
|
||||
border: var(--border);
|
||||
background-color: var(--color--foreground--tint-2);
|
||||
border-radius: var(--border-radius-base);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
.title {
|
||||
padding: var(--spacing-2xs);
|
||||
font-weight: var(--font-weight-bold);
|
||||
font-size: var(--font-size-2xs);
|
||||
padding: var(--spacing--2xs);
|
||||
font-weight: var(--font-weight--bold);
|
||||
font-size: var(--font-size--2xs);
|
||||
// ensure consistent spacing even if title is empty
|
||||
min-height: 32.5px;
|
||||
line-height: normal;
|
||||
|
|
@ -159,25 +159,25 @@ const diffs = computed(() => {
|
|||
}
|
||||
|
||||
.lineNumber {
|
||||
font-size: var(--font-size-3xs);
|
||||
font-size: var(--font-size--3xs);
|
||||
min-width: 18px;
|
||||
max-width: 18px;
|
||||
text-align: center;
|
||||
border-right: var(--border-base);
|
||||
border-right: var(--border);
|
||||
}
|
||||
|
||||
.diffSection {
|
||||
overflow: scroll;
|
||||
border-top: var(--border-base);
|
||||
border-bottom: var(--border-base);
|
||||
border-top: var(--border);
|
||||
border-bottom: var(--border);
|
||||
max-height: 218px; // 12 lines
|
||||
background-color: var(--color--background);
|
||||
font-family: var(--font-family-monospace);
|
||||
font-family: var(--font-family--monospace);
|
||||
}
|
||||
|
||||
.diff {
|
||||
display: flex;
|
||||
font-size: var(--font-size-3xs);
|
||||
font-size: var(--font-size--3xs);
|
||||
line-height: 18px; /* 100% */
|
||||
height: 18px;
|
||||
max-height: 18px;
|
||||
|
|
@ -208,18 +208,18 @@ const diffs = computed(() => {
|
|||
}
|
||||
|
||||
.actions {
|
||||
padding: var(--spacing-2xs);
|
||||
padding: var(--spacing--2xs);
|
||||
|
||||
> button {
|
||||
> span {
|
||||
margin-right: var(--spacing-4xs);
|
||||
margin-right: var(--spacing--4xs);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.infoText {
|
||||
color: var(--color--text--tint-1);
|
||||
font-size: var(--font-size-xs);
|
||||
margin-left: var(--spacing-4xs);
|
||||
font-size: var(--font-size--xs);
|
||||
margin-left: var(--spacing--4xs);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@ const onClick = () => {
|
|||
|
||||
<style lang="scss" module>
|
||||
.button {
|
||||
border-radius: var(--border-radius-base);
|
||||
border-radius: var(--radius);
|
||||
position: relative;
|
||||
border: 1px solid transparent;
|
||||
padding: 0;
|
||||
|
|
@ -112,6 +112,6 @@ const onClick = () => {
|
|||
}
|
||||
|
||||
.icon {
|
||||
margin-right: var(--spacing-3xs);
|
||||
margin-right: var(--spacing--3xs);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -75,14 +75,14 @@ withDefaults(defineProps<ActionBoxProps>(), {
|
|||
<style lang="scss" module>
|
||||
.container {
|
||||
border: 2px dashed var(--color--foreground);
|
||||
border-radius: var(--border-radius-large);
|
||||
border-radius: var(--radius--lg);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: var(--spacing-3xl);
|
||||
padding: var(--spacing--3xl);
|
||||
|
||||
> * {
|
||||
margin-bottom: var(--spacing-l);
|
||||
margin-bottom: var(--spacing--lg);
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
|
|
@ -95,13 +95,13 @@ withDefaults(defineProps<ActionBoxProps>(), {
|
|||
}
|
||||
|
||||
.heading {
|
||||
margin-bottom: var(--spacing-l);
|
||||
margin-bottom: var(--spacing--lg);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.description {
|
||||
color: var(--color--text);
|
||||
margin-bottom: var(--spacing-xl);
|
||||
margin-bottom: var(--spacing--xl);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -165,7 +165,7 @@ defineExpose({ open, close });
|
|||
:global(.el-dropdown__list) {
|
||||
.userActionsMenu {
|
||||
min-width: 160px;
|
||||
padding: var(--spacing-4xs) 0;
|
||||
padding: var(--spacing--4xs) 0;
|
||||
}
|
||||
|
||||
.elementItem {
|
||||
|
|
@ -180,7 +180,7 @@ defineExpose({ open, close });
|
|||
}
|
||||
|
||||
.shadow {
|
||||
box-shadow: var(--box-shadow-light);
|
||||
box-shadow: var(--shadow--light);
|
||||
}
|
||||
|
||||
.activator {
|
||||
|
|
@ -192,11 +192,11 @@ defineExpose({ open, close });
|
|||
.itemContainer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-s);
|
||||
gap: var(--spacing--sm);
|
||||
justify-content: space-between;
|
||||
font-size: var(--font-size-2xs);
|
||||
font-size: var(--font-size--2xs);
|
||||
line-height: 18px;
|
||||
padding: var(--spacing-3xs) var(--spacing-2xs);
|
||||
padding: var(--spacing--3xs) var(--spacing--2xs);
|
||||
|
||||
&.disabled {
|
||||
.shortcut {
|
||||
|
|
@ -208,7 +208,7 @@ defineExpose({ open, close });
|
|||
.icon {
|
||||
display: flex;
|
||||
text-align: center;
|
||||
margin-right: var(--spacing-2xs);
|
||||
margin-right: var(--spacing--2xs);
|
||||
|
||||
svg {
|
||||
width: 1.2em !important;
|
||||
|
|
|
|||
|
|
@ -138,8 +138,8 @@ defineExpose({
|
|||
|
||||
.button {
|
||||
cursor: pointer;
|
||||
padding: var(--spacing-4xs);
|
||||
border-radius: var(--border-radius-base);
|
||||
padding: var(--spacing--4xs);
|
||||
border-radius: var(--radius);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
|
|
@ -172,13 +172,13 @@ li:hover .iconContainer svg {
|
|||
.loading-dropdown {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: var(--spacing-xs) 0;
|
||||
gap: var(--spacing-2xs);
|
||||
padding: var(--spacing--xs) 0;
|
||||
gap: var(--spacing--2xs);
|
||||
}
|
||||
|
||||
.loading {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
min-width: var(--spacing-3xl);
|
||||
min-width: var(--spacing--3xl);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -215,8 +215,8 @@ const alertBoxClassNames = computed(() => {
|
|||
display: inline-flex;
|
||||
color: inherit;
|
||||
align-items: center;
|
||||
padding-left: var(--spacing-2xs);
|
||||
padding-right: var(--spacing-s);
|
||||
padding-left: var(--spacing--2xs);
|
||||
padding-right: var(--spacing--sm);
|
||||
}
|
||||
|
||||
.text {
|
||||
|
|
@ -228,7 +228,7 @@ const alertBoxClassNames = computed(() => {
|
|||
.title {
|
||||
font-size: var.$alert-title-font-size;
|
||||
line-height: 18px;
|
||||
font-weight: var(--font-weight-bold);
|
||||
font-weight: var(--font-weight--bold);
|
||||
}
|
||||
|
||||
.description {
|
||||
|
|
@ -242,6 +242,6 @@ const alertBoxClassNames = computed(() => {
|
|||
.aside {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding-left: var(--spacing-s);
|
||||
padding-left: var(--spacing--sm);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -79,8 +79,8 @@ const getSize = (size: string): number => sizes[size];
|
|||
|
||||
.initials {
|
||||
position: absolute;
|
||||
font-size: var(--font-size-2xs);
|
||||
font-weight: var(--font-weight-bold);
|
||||
font-size: var(--font-size--2xs);
|
||||
font-weight: var(--font-weight--bold);
|
||||
color: var(--color-avatar-font);
|
||||
text-shadow: 0 1px 6px rgba(25, 11, 9, 0.3);
|
||||
text-transform: uppercase;
|
||||
|
|
@ -91,8 +91,8 @@ const getSize = (size: string): number => sizes[size];
|
|||
}
|
||||
|
||||
.xsmall {
|
||||
height: var(--spacing-m);
|
||||
width: var(--spacing-m);
|
||||
height: var(--spacing--md);
|
||||
width: var(--spacing--md);
|
||||
}
|
||||
|
||||
.small {
|
||||
|
|
|
|||
|
|
@ -31,46 +31,46 @@ withDefaults(defineProps<BadgeProps>(), {
|
|||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: var(--spacing-5xs) var(--spacing-4xs);
|
||||
padding: var(--spacing--5xs) var(--spacing--4xs);
|
||||
white-space: nowrap;
|
||||
|
||||
&.border {
|
||||
border: var(--border-base);
|
||||
border: var(--border);
|
||||
}
|
||||
}
|
||||
|
||||
.default {
|
||||
composes: badge;
|
||||
border-radius: var(--border-radius-base);
|
||||
border-radius: var(--radius);
|
||||
color: var(--color--text--tint-1);
|
||||
border-color: var(--color--text--tint-1);
|
||||
}
|
||||
|
||||
.success {
|
||||
composes: badge;
|
||||
border-radius: var(--border-radius-base);
|
||||
border-radius: var(--radius);
|
||||
color: var(--color--success);
|
||||
border-color: var(--color--success);
|
||||
}
|
||||
|
||||
.warning {
|
||||
composes: badge;
|
||||
border-radius: var(--border-radius-base);
|
||||
border-radius: var(--radius);
|
||||
color: var(--color--warning);
|
||||
border-color: var(--color--warning);
|
||||
}
|
||||
|
||||
.danger {
|
||||
composes: badge;
|
||||
border-radius: var(--border-radius-base);
|
||||
border-radius: var(--radius);
|
||||
color: var(--color--danger);
|
||||
border-color: var(--color--danger);
|
||||
}
|
||||
|
||||
.primary {
|
||||
composes: badge;
|
||||
padding: var(--spacing-5xs) var(--spacing-3xs);
|
||||
border-radius: var(--border-radius-xlarge);
|
||||
padding: var(--spacing--5xs) var(--spacing--3xs);
|
||||
border-radius: var(--radius--xl);
|
||||
color: var(--color--foreground--tint-2);
|
||||
background-color: var(--color--primary);
|
||||
border-color: var(--color--primary);
|
||||
|
|
@ -78,16 +78,16 @@ withDefaults(defineProps<BadgeProps>(), {
|
|||
|
||||
.secondary {
|
||||
composes: badge;
|
||||
border-radius: var(--border-radius-xlarge);
|
||||
border-radius: var(--radius--xl);
|
||||
color: var(--color--secondary);
|
||||
background-color: var(--color--secondary--tint-1);
|
||||
}
|
||||
|
||||
.tertiary {
|
||||
composes: badge;
|
||||
border-radius: var(--border-radius-base);
|
||||
border-radius: var(--radius);
|
||||
color: var(--color--text--tint-1);
|
||||
border-color: var(--color--text--tint-1);
|
||||
padding: 1px var(--spacing-5xs);
|
||||
padding: 1px var(--spacing--5xs);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ withDefaults(defineProps<BlockUiProps>(), {
|
|||
background-color: var(--color-block-ui-overlay);
|
||||
z-index: 10;
|
||||
opacity: 0.6;
|
||||
border-radius: var(--border-radius-large);
|
||||
border-radius: var(--radius--lg);
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -263,12 +263,12 @@ const handleTooltipClose = () => {
|
|||
|
||||
&.small {
|
||||
display: inline-flex;
|
||||
padding: var(--spacing-4xs) var(--spacing-3xs);
|
||||
padding: var(--spacing--4xs) var(--spacing--3xs);
|
||||
}
|
||||
|
||||
&.border {
|
||||
border: var(--border-base);
|
||||
border-radius: var(--border-radius-base);
|
||||
border: var(--border);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -279,12 +279,12 @@ const handleTooltipClose = () => {
|
|||
}
|
||||
|
||||
.item {
|
||||
border: var(--border-width-base) var(--border-style-base) transparent;
|
||||
border: var(--border-width) var(--border-style) transparent;
|
||||
}
|
||||
|
||||
.item.dragging:hover {
|
||||
border: var(--border-width-base) var(--border-style-base) var(--color--secondary);
|
||||
border-radius: var(--border-radius-base);
|
||||
border: var(--border-width) var(--border-style) var(--color--secondary);
|
||||
border-radius: var(--radius);
|
||||
background-color: var(--color-callout-secondary-background);
|
||||
|
||||
& a {
|
||||
|
|
@ -343,7 +343,7 @@ const handleTooltipClose = () => {
|
|||
}
|
||||
|
||||
li {
|
||||
max-width: var(--spacing-5xl);
|
||||
max-width: var(--spacing--5xl);
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
|
@ -352,13 +352,13 @@ const handleTooltipClose = () => {
|
|||
}
|
||||
|
||||
.tooltip-loading {
|
||||
min-width: var(--spacing-3xl);
|
||||
min-width: var(--spacing--3xl);
|
||||
width: 100%;
|
||||
|
||||
:global(.n8n-loading) > div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-xs);
|
||||
gap: var(--spacing--xs);
|
||||
}
|
||||
|
||||
:global(.el-skeleton__item) {
|
||||
|
|
@ -367,24 +367,24 @@ const handleTooltipClose = () => {
|
|||
}
|
||||
|
||||
.tooltip {
|
||||
padding: var(--spacing-xs) var(--spacing-2xs);
|
||||
padding: var(--spacing--xs) var(--spacing--2xs);
|
||||
text-align: center;
|
||||
& > div {
|
||||
color: var(--color--text--tint-2);
|
||||
span {
|
||||
font-size: var(--font-size-2xs);
|
||||
font-size: var(--font-size--2xs);
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip-loading {
|
||||
min-width: var(--spacing-4xl);
|
||||
min-width: var(--spacing--4xl);
|
||||
}
|
||||
}
|
||||
|
||||
.dots {
|
||||
padding: 0 var(--spacing-4xs);
|
||||
padding: 0 var(--spacing--4xs);
|
||||
color: var(--color--text--tint-1);
|
||||
border-radius: var(--border-radius-base);
|
||||
border-radius: var(--radius);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
|
|
@ -396,18 +396,18 @@ const handleTooltipClose = () => {
|
|||
// Small theme overrides
|
||||
.small {
|
||||
.list {
|
||||
gap: var(--spacing-5xs);
|
||||
gap: var(--spacing--5xs);
|
||||
}
|
||||
|
||||
.item {
|
||||
max-width: var(--spacing-3xl);
|
||||
max-width: var(--spacing--3xl);
|
||||
}
|
||||
|
||||
.item,
|
||||
.item * {
|
||||
color: var(--color--text);
|
||||
font-size: var(--font-size-2xs);
|
||||
line-height: var(--font-line-height-xsmall);
|
||||
font-size: var(--font-size--2xs);
|
||||
line-height: var(--line-height--xs);
|
||||
}
|
||||
|
||||
.item a:hover * {
|
||||
|
|
@ -415,7 +415,7 @@ const handleTooltipClose = () => {
|
|||
}
|
||||
|
||||
.separator {
|
||||
font-size: var(--font-size-s);
|
||||
font-size: var(--font-size--sm);
|
||||
color: var(--color--text);
|
||||
}
|
||||
}
|
||||
|
|
@ -423,18 +423,18 @@ const handleTooltipClose = () => {
|
|||
// Medium theme overrides
|
||||
.medium {
|
||||
li {
|
||||
padding: var(--spacing-3xs) var(--spacing-4xs) var(--spacing-4xs);
|
||||
padding: var(--spacing--3xs) var(--spacing--4xs) var(--spacing--4xs);
|
||||
}
|
||||
|
||||
.item,
|
||||
.item * {
|
||||
color: var(--color--text);
|
||||
font-size: var(--font-size-s);
|
||||
line-height: var(--font-line-height-xsmall);
|
||||
font-size: var(--font-size--sm);
|
||||
line-height: var(--line-height--xs);
|
||||
}
|
||||
|
||||
.item {
|
||||
max-width: var(--spacing-5xl);
|
||||
max-width: var(--spacing--5xl);
|
||||
}
|
||||
|
||||
.item:not(.dragging) a:hover * {
|
||||
|
|
@ -451,7 +451,7 @@ const handleTooltipClose = () => {
|
|||
}
|
||||
|
||||
.separator {
|
||||
font-size: var(--font-size-xl);
|
||||
font-size: var(--font-size--xl);
|
||||
color: var(--color--foreground);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,11 +10,11 @@
|
|||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
|
||||
border: var(--border-width-base) var.$button-border-color var(--border-style-base)
|
||||
border: var(--border-width) var.$button-border-color var(--border-style)
|
||||
string.unquote($important);
|
||||
color: var.$button-font-color string.unquote($important);
|
||||
background-color: var.$button-background-color string.unquote($important);
|
||||
font-weight: var(--font-weight-medium) string.unquote($important);
|
||||
font-weight: var(--font-weight--medium) string.unquote($important);
|
||||
border-radius: var.$button-border-radius string.unquote($important);
|
||||
padding: var.$button-padding-vertical var.$button-padding-horizontal string.unquote($important);
|
||||
font-size: var.$button-font-size string.unquote($important);
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
width 0s,
|
||||
height 0s;
|
||||
|
||||
gap: var(--spacing-3xs);
|
||||
gap: var(--spacing--3xs);
|
||||
|
||||
@include utils.utils-user-select(none);
|
||||
|
||||
|
|
|
|||
|
|
@ -85,12 +85,12 @@ const classes = computed(() => {
|
|||
.el-button {
|
||||
@include Button.n8n-button(true);
|
||||
|
||||
--button-padding-vertical: var(--spacing-2xs);
|
||||
--button-padding-horizontal: var(--spacing-xs);
|
||||
--button-font-size: var(--font-size-2xs);
|
||||
--button-padding-vertical: var(--spacing--2xs);
|
||||
--button-padding-horizontal: var(--spacing--xs);
|
||||
--button-font-size: var(--font-size--2xs);
|
||||
|
||||
+ .el-button {
|
||||
margin-left: var(--spacing-2xs);
|
||||
margin-left: var(--spacing--2xs);
|
||||
}
|
||||
|
||||
&.btn--cancel,
|
||||
|
|
@ -144,9 +144,9 @@ $loading-overlay-background-color: rgba(255, 255, 255, 0);
|
|||
*/
|
||||
|
||||
.xmini {
|
||||
--button-padding-vertical: var(--spacing-4xs);
|
||||
--button-padding-horizontal: var(--spacing-3xs);
|
||||
--button-font-size: var(--font-size-3xs);
|
||||
--button-padding-vertical: var(--spacing--4xs);
|
||||
--button-padding-horizontal: var(--spacing--3xs);
|
||||
--button-font-size: var(--font-size--3xs);
|
||||
|
||||
&.square {
|
||||
height: 22px;
|
||||
|
|
@ -155,9 +155,9 @@ $loading-overlay-background-color: rgba(255, 255, 255, 0);
|
|||
}
|
||||
|
||||
.mini {
|
||||
--button-padding-vertical: var(--spacing-4xs);
|
||||
--button-padding-horizontal: var(--spacing-2xs);
|
||||
--button-font-size: var(--font-size-2xs);
|
||||
--button-padding-vertical: var(--spacing--4xs);
|
||||
--button-padding-horizontal: var(--spacing--2xs);
|
||||
--button-font-size: var(--font-size--2xs);
|
||||
|
||||
&.square {
|
||||
height: 22px;
|
||||
|
|
@ -166,9 +166,9 @@ $loading-overlay-background-color: rgba(255, 255, 255, 0);
|
|||
}
|
||||
|
||||
.small {
|
||||
--button-padding-vertical: var(--spacing-3xs);
|
||||
--button-padding-horizontal: var(--spacing-xs);
|
||||
--button-font-size: var(--font-size-2xs);
|
||||
--button-padding-vertical: var(--spacing--3xs);
|
||||
--button-padding-horizontal: var(--spacing--xs);
|
||||
--button-font-size: var(--font-size--2xs);
|
||||
|
||||
&.square {
|
||||
height: 26px;
|
||||
|
|
@ -177,9 +177,9 @@ $loading-overlay-background-color: rgba(255, 255, 255, 0);
|
|||
}
|
||||
|
||||
.medium {
|
||||
--button-padding-vertical: var(--spacing-2xs);
|
||||
--button-padding-horizontal: var(--spacing-xs);
|
||||
--button-font-size: var(--font-size-2xs);
|
||||
--button-padding-vertical: var(--spacing--2xs);
|
||||
--button-padding-horizontal: var(--spacing--xs);
|
||||
--button-font-size: var(--font-size--2xs);
|
||||
|
||||
&.square {
|
||||
height: 30px;
|
||||
|
|
@ -195,9 +195,9 @@ $loading-overlay-background-color: rgba(255, 255, 255, 0);
|
|||
}
|
||||
|
||||
.xlarge {
|
||||
--button-padding-vertical: var(--spacing-xs);
|
||||
--button-padding-horizontal: var(--spacing-s);
|
||||
--button-font-size: var(--font-size-m);
|
||||
--button-padding-vertical: var(--spacing--xs);
|
||||
--button-padding-horizontal: var(--spacing--sm);
|
||||
--button-font-size: var(--font-size--md);
|
||||
|
||||
&.square {
|
||||
height: 46px;
|
||||
|
|
|
|||
|
|
@ -75,23 +75,23 @@ const getIconSize = computed<IconSize>(() => {
|
|||
.callout {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: var(--font-size-2xs);
|
||||
padding: var(--spacing-xs);
|
||||
border: var(--border-width-base) var(--border-style-base);
|
||||
font-size: var(--font-size--2xs);
|
||||
padding: var(--spacing--xs);
|
||||
border: var(--border-width) var(--border-style);
|
||||
align-items: center;
|
||||
line-height: var(--font-line-height-xloose);
|
||||
line-height: var(--line-height--xl);
|
||||
border-color: var(--color-callout-info-border);
|
||||
background-color: var(--color-callout-info-background);
|
||||
color: var(--color-callout-info-font);
|
||||
|
||||
&.slim {
|
||||
line-height: var(--font-line-height-xloose);
|
||||
padding: var(--spacing-3xs) var(--spacing-2xs);
|
||||
line-height: var(--line-height--xl);
|
||||
padding: var(--spacing--3xs) var(--spacing--2xs);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-secondary-link);
|
||||
font-weight: var(--font-weight-medium);
|
||||
font-weight: var(--font-weight--medium);
|
||||
text-decoration-line: underline;
|
||||
text-decoration-style: solid;
|
||||
text-decoration-skip-ink: none;
|
||||
|
|
@ -102,7 +102,7 @@ const getIconSize = computed<IconSize>(() => {
|
|||
}
|
||||
|
||||
.round {
|
||||
border-radius: var(--border-radius-base);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
.onlyBottomBorder {
|
||||
|
|
@ -159,12 +159,12 @@ const getIconSize = computed<IconSize>(() => {
|
|||
|
||||
.icon {
|
||||
line-height: 1;
|
||||
margin-right: var(--spacing-xs);
|
||||
margin-right: var(--spacing--xs);
|
||||
}
|
||||
|
||||
.secondary {
|
||||
font-size: var(--font-size-2xs);
|
||||
font-weight: var(--font-weight-bold);
|
||||
font-size: var(--font-size--2xs);
|
||||
font-weight: var(--font-weight--bold);
|
||||
border-color: var(--color-callout-secondary-border);
|
||||
background-color: var(--color-callout-secondary-background);
|
||||
color: var(--color-callout-secondary-font);
|
||||
|
|
|
|||
|
|
@ -46,10 +46,10 @@ const classes = computed(() => ({
|
|||
|
||||
<style lang="scss" module>
|
||||
.card {
|
||||
border-radius: var(--border-radius-large);
|
||||
border: var(--border-base);
|
||||
border-radius: var(--radius--lg);
|
||||
border: var(--border);
|
||||
background-color: var(--color--background--light-3);
|
||||
padding: var(--card--padding, var(--spacing-s));
|
||||
padding: var(--card--padding, var(--spacing--sm));
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
|
|
@ -85,7 +85,7 @@ const classes = computed(() => ({
|
|||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-right: var(--spacing-s);
|
||||
margin-right: var(--spacing--sm);
|
||||
}
|
||||
|
||||
.hoverable {
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@ const onLabelClick = () => {
|
|||
.n8nCheckbox {
|
||||
display: flex !important;
|
||||
white-space: normal !important;
|
||||
margin-bottom: var(--spacing-2xs);
|
||||
margin-bottom: var(--spacing--2xs);
|
||||
|
||||
span {
|
||||
white-space: normal;
|
||||
|
|
|
|||
|
|
@ -89,7 +89,7 @@ const onColorSelect = (value: string | null) => {
|
|||
}
|
||||
|
||||
.input {
|
||||
margin-left: var(--spacing-3xs);
|
||||
margin-left: var(--spacing--3xs);
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -322,9 +322,9 @@ onUnmounted(() => {
|
|||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: var(--color--background--light-3);
|
||||
border: var(--border-base);
|
||||
border-radius: var(--border-radius-large);
|
||||
box-shadow: var(--box-shadow-dark);
|
||||
border: var(--border);
|
||||
border-radius: var(--radius--lg);
|
||||
box-shadow: var(--shadow--dark);
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
z-index: 1000;
|
||||
|
|
@ -335,11 +335,11 @@ onUnmounted(() => {
|
|||
border: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
font-size: var(--font-size-m);
|
||||
font-size: var(--font-size--md);
|
||||
font-family: var(--font-family);
|
||||
color: var(--color--text);
|
||||
padding: var(--spacing-m) var(--spacing-l);
|
||||
border-bottom: var(--border-base);
|
||||
padding: var(--spacing--md) var(--spacing--lg);
|
||||
border-bottom: var(--border);
|
||||
|
||||
&::placeholder {
|
||||
color: var(--color--text--tint-1);
|
||||
|
|
@ -349,25 +349,25 @@ onUnmounted(() => {
|
|||
.itemsList {
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
padding-bottom: var(--spacing-s);
|
||||
padding-bottom: var(--spacing--sm);
|
||||
}
|
||||
|
||||
.sectionHeader {
|
||||
padding: var(--spacing-xs) var(--spacing-l);
|
||||
font-size: var(--font-size-2xs);
|
||||
font-weight: var(--font-weight-regular);
|
||||
padding: var(--spacing--xs) var(--spacing--lg);
|
||||
font-size: var(--font-size--2xs);
|
||||
font-weight: var(--font-weight--regular);
|
||||
color: var(--color--text--tint-1);
|
||||
}
|
||||
|
||||
.noResults {
|
||||
padding: var(--spacing-l);
|
||||
padding: var(--spacing--lg);
|
||||
text-align: center;
|
||||
color: var(--color--text--tint-1);
|
||||
font-size: var(--font-size-s);
|
||||
font-size: var(--font-size--sm);
|
||||
}
|
||||
|
||||
.contextContainer {
|
||||
padding: var(--spacing-xs) var(--spacing-l) 0;
|
||||
padding: var(--spacing--xs) var(--spacing--lg) 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -39,22 +39,22 @@ const handleSelect = () => {
|
|||
<style lang="scss" module>
|
||||
.item {
|
||||
display: flex;
|
||||
gap: var(--spacing-2xs);
|
||||
gap: var(--spacing--2xs);
|
||||
align-items: center;
|
||||
height: var(--spacing-2xl);
|
||||
padding: 0 var(--spacing-s);
|
||||
height: var(--spacing--2xl);
|
||||
padding: 0 var(--spacing--sm);
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
margin-left: var(--border-width-base);
|
||||
margin-left: var(--border-width);
|
||||
transition: background-color 0.1s ease;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: calc(-1 * var(--border-width-base));
|
||||
left: calc(-1 * var(--border-width));
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: calc(2 * var(--border-width-base));
|
||||
width: calc(2 * var(--border-width));
|
||||
background-color: transparent;
|
||||
transition: background-color 0.1s ease;
|
||||
}
|
||||
|
|
@ -80,8 +80,8 @@ const handleSelect = () => {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: var(--spacing-l);
|
||||
height: var(--spacing-l);
|
||||
width: var(--spacing--lg);
|
||||
height: var(--spacing--lg);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
|
|
@ -91,10 +91,10 @@ const handleSelect = () => {
|
|||
}
|
||||
|
||||
.title {
|
||||
font-size: var(--font-size-s);
|
||||
font-weight: var(--font-weight-regular);
|
||||
font-size: var(--font-size--sm);
|
||||
font-weight: var(--font-weight--regular);
|
||||
color: var(--color--text--shade-1);
|
||||
line-height: var(--font-line-height-compact);
|
||||
line-height: var(--line-height--sm);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
|
@ -103,7 +103,7 @@ const handleSelect = () => {
|
|||
.meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-2xs);
|
||||
gap: var(--spacing--2xs);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -507,7 +507,7 @@ const table = useVueTable({
|
|||
<style lang="scss" scoped>
|
||||
.n8n-data-table-server {
|
||||
height: 100%;
|
||||
font-size: var(--font-size-s);
|
||||
font-size: var(--font-size--sm);
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
|
|
@ -656,8 +656,8 @@ th.loading-row {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 8px;
|
||||
border-top-left-radius: var(--border-radius-base);
|
||||
border-bottom-left-radius: var(--border-radius-base);
|
||||
border-top-left-radius: var(--radius);
|
||||
border-bottom-left-radius: var(--radius);
|
||||
}
|
||||
|
||||
&__select {
|
||||
|
|
|
|||
|
|
@ -155,7 +155,7 @@ function getThStyle(column: DatatableColumn) {
|
|||
align-items: center;
|
||||
bottom: 0;
|
||||
overflow: visible;
|
||||
margin-top: var(--spacing-s);
|
||||
margin-top: var(--spacing--sm);
|
||||
}
|
||||
|
||||
.pageSizeSelector {
|
||||
|
|
|
|||
|
|
@ -36,13 +36,13 @@ withDefaults(defineProps<ExternalLinkProps>(), {
|
|||
text-decoration: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-4xs);
|
||||
gap: var(--spacing--4xs);
|
||||
background: none;
|
||||
border: none;
|
||||
padding: var(--spacing-4xs) var(--spacing-2xs);
|
||||
padding: var(--spacing--4xs) var(--spacing--2xs);
|
||||
cursor: pointer;
|
||||
border-radius: var(--border-radius-base);
|
||||
font-weight: var(--font-weight-regular);
|
||||
border-radius: var(--radius);
|
||||
font-weight: var(--font-weight--regular);
|
||||
|
||||
svg {
|
||||
color: var(--color--text--tint-1);
|
||||
|
|
|
|||
|
|
@ -88,19 +88,19 @@ const onSecondaryButtonClick = (event: Event) => emit('secondaryClick', event);
|
|||
.heading {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: var(--spacing-xl);
|
||||
margin-bottom: var(--spacing--xl);
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: var(--color--background--light-3);
|
||||
padding: var(--spacing-l);
|
||||
border: var(--border-base);
|
||||
border-radius: var(--border-radius-large);
|
||||
padding: var(--spacing--lg);
|
||||
border: var(--border);
|
||||
border-radius: var(--radius--lg);
|
||||
box-shadow: 0 4px 16px rgba(99, 77, 255, 0.06);
|
||||
}
|
||||
|
||||
.inputsContainer {
|
||||
margin-bottom: var(--spacing-xl);
|
||||
margin-bottom: var(--spacing--xl);
|
||||
}
|
||||
|
||||
.actionContainer {
|
||||
|
|
@ -110,7 +110,7 @@ const onSecondaryButtonClick = (event: Event) => emit('secondaryClick', event);
|
|||
|
||||
.buttonsContainer {
|
||||
composes: actionContainer;
|
||||
margin-bottom: var(--spacing-s);
|
||||
margin-bottom: var(--spacing--sm);
|
||||
}
|
||||
|
||||
.secondaryButtonContainer {
|
||||
|
|
@ -120,6 +120,6 @@ const onSecondaryButtonClick = (event: Event) => emit('secondaryClick', event);
|
|||
}
|
||||
|
||||
.withLabel {
|
||||
margin-bottom: var(--spacing-s);
|
||||
margin-bottom: var(--spacing--sm);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -276,9 +276,9 @@ defineExpose({ inputRef });
|
|||
|
||||
<style lang="scss" module>
|
||||
.infoText {
|
||||
margin-top: var(--spacing-2xs);
|
||||
font-size: var(--font-size-2xs);
|
||||
font-weight: var(--font-weight-regular);
|
||||
margin-top: var(--spacing--2xs);
|
||||
font-size: var(--font-size--2xs);
|
||||
font-weight: var(--font-weight--regular);
|
||||
color: var(--color--text);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -141,8 +141,8 @@ onMounted(() => {
|
|||
<style lang="scss" module>
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-row-gap: var(--spacing-s);
|
||||
grid-column-gap: var(--spacing-2xs);
|
||||
grid-row-gap: var(--spacing--sm);
|
||||
grid-column-gap: var(--spacing--2xs);
|
||||
}
|
||||
|
||||
.gridMulti {
|
||||
|
|
|
|||
|
|
@ -52,36 +52,36 @@ const classes = computed(() => {
|
|||
|
||||
<style lang="scss" module>
|
||||
.bold {
|
||||
font-weight: var(--font-weight-bold);
|
||||
font-weight: var(--font-weight--bold);
|
||||
}
|
||||
|
||||
.regular {
|
||||
font-weight: var(--font-weight-regular);
|
||||
font-weight: var(--font-weight--regular);
|
||||
}
|
||||
|
||||
.size-2xlarge {
|
||||
font-size: var(--font-size-2xl);
|
||||
line-height: var(--font-line-height-compact);
|
||||
font-size: var(--font-size--2xl);
|
||||
line-height: var(--line-height--sm);
|
||||
}
|
||||
|
||||
.size-xlarge {
|
||||
font-size: var(--font-size-xl);
|
||||
line-height: var(--font-line-height-compact);
|
||||
font-size: var(--font-size--xl);
|
||||
line-height: var(--line-height--sm);
|
||||
}
|
||||
|
||||
.size-large {
|
||||
font-size: var(--font-size-l);
|
||||
line-height: var(--font-line-height-loose);
|
||||
font-size: var(--font-size--lg);
|
||||
line-height: var(--line-height--lg);
|
||||
}
|
||||
|
||||
.size-medium {
|
||||
font-size: var(--font-size-m);
|
||||
line-height: var(--font-line-height-loose);
|
||||
font-size: var(--font-size--md);
|
||||
line-height: var(--line-height--lg);
|
||||
}
|
||||
|
||||
.size-small {
|
||||
font-size: var(--font-size-s);
|
||||
line-height: var(--font-line-height-regular);
|
||||
font-size: var(--font-size--sm);
|
||||
line-height: var(--line-height--md);
|
||||
}
|
||||
|
||||
.primary {
|
||||
|
|
|
|||
|
|
@ -165,29 +165,29 @@ const togglePopup = () => {
|
|||
max-height: 300px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: var(--spacing-4xs);
|
||||
margin-top: var(--spacing--4xs);
|
||||
background-color: var(--color--background--light-3);
|
||||
border-radius: var(--border-radius-base);
|
||||
border: var(--border-base);
|
||||
border-radius: var(--radius);
|
||||
border: var(--border);
|
||||
border-color: var(--color--foreground--shade-1);
|
||||
|
||||
.tabs {
|
||||
padding: var(--spacing-2xs);
|
||||
padding-bottom: var(--spacing-5xs);
|
||||
padding: var(--spacing--2xs);
|
||||
padding-bottom: var(--spacing--5xs);
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: var(--spacing-2xs);
|
||||
padding: var(--spacing--2xs);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.icon,
|
||||
.emoji {
|
||||
cursor: pointer;
|
||||
padding: var(--spacing-4xs);
|
||||
border-radius: var(--border-radius-small);
|
||||
padding: var(--spacing--4xs);
|
||||
border-radius: var(--radius--sm);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color--background--shade-1);
|
||||
|
|
|
|||
|
|
@ -95,14 +95,14 @@ const onTooltipClick = (item: string, event: MouseEvent) => emit('tooltipClick',
|
|||
.header {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
padding: var(--spacing-s);
|
||||
padding: var(--spacing--sm);
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: var(--spacing-3xs);
|
||||
gap: var(--spacing--3xs);
|
||||
}
|
||||
|
||||
.expanded {
|
||||
padding: var(--spacing-s) var(--spacing-s) var(--spacing-2xs) var(--spacing-s);
|
||||
padding: var(--spacing--sm) var(--spacing--sm) var(--spacing--2xs) var(--spacing--sm);
|
||||
}
|
||||
|
||||
.accordionItems {
|
||||
|
|
@ -119,10 +119,10 @@ const onTooltipClick = (item: string, event: MouseEvent) => emit('tooltipClick',
|
|||
|
||||
.description {
|
||||
display: flex;
|
||||
padding: 0 var(--spacing-s) var(--spacing-s) var(--spacing-s);
|
||||
padding: 0 var(--spacing--sm) var(--spacing--sm) var(--spacing--sm);
|
||||
|
||||
b {
|
||||
font-weight: var(--font-weight-bold);
|
||||
font-weight: var(--font-weight--bold);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -105,26 +105,26 @@ const iconData = computed<{ icon: IconName; color: IconColor }>(() => {
|
|||
}
|
||||
|
||||
.base {
|
||||
font-size: var(--font-size-2xs);
|
||||
line-height: var(--font-size-s);
|
||||
font-size: var(--font-size--2xs);
|
||||
line-height: var(--font-size--sm);
|
||||
word-break: normal;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
svg {
|
||||
font-size: var(--font-size-s);
|
||||
font-size: var(--font-size--sm);
|
||||
}
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: var(--font-weight-medium);
|
||||
font-weight: var(--font-weight--medium);
|
||||
}
|
||||
|
||||
.note {
|
||||
composes: base;
|
||||
|
||||
svg {
|
||||
margin-right: var(--spacing-4xs);
|
||||
margin-right: var(--spacing--4xs);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -139,11 +139,11 @@ defineExpose({ forceFocus, forceCancel });
|
|||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: calc(var(--spacing-4xs) * -1);
|
||||
left: calc(var(--spacing-3xs) * -1);
|
||||
width: calc(100% + var(--spacing-xs));
|
||||
height: calc(100% + var(--spacing-2xs));
|
||||
border-radius: var(--border-radius-base);
|
||||
top: calc(var(--spacing--4xs) * -1);
|
||||
left: calc(var(--spacing--3xs) * -1);
|
||||
width: calc(100% + var(--spacing--xs));
|
||||
height: calc(100% + var(--spacing--2xs));
|
||||
border-radius: var(--radius);
|
||||
background-color: var(--color--foreground--tint-2);
|
||||
opacity: 0;
|
||||
z-index: 0;
|
||||
|
|
|
|||
|
|
@ -100,7 +100,7 @@ defineExpose({ focus, blur, select });
|
|||
|
||||
<style lang="scss" module>
|
||||
.xlarge {
|
||||
--input-font-size: var(--font-size-m);
|
||||
--input-font-size: var(--font-size--md);
|
||||
input {
|
||||
height: 48px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -148,7 +148,7 @@ const addTargetBlank = (html: string) =>
|
|||
|
||||
.trailing-content {
|
||||
display: flex;
|
||||
gap: var(--spacing-3xs);
|
||||
gap: var(--spacing--3xs);
|
||||
|
||||
* {
|
||||
align-self: center;
|
||||
|
|
@ -192,7 +192,7 @@ const addTargetBlank = (html: string) =>
|
|||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--color--text--tint-1);
|
||||
margin-left: var(--spacing-4xs);
|
||||
margin-left: var(--spacing--4xs);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
|
|
@ -252,31 +252,31 @@ const addTargetBlank = (html: string) =>
|
|||
display: flex;
|
||||
|
||||
&.small {
|
||||
padding-bottom: var(--spacing-5xs);
|
||||
padding-bottom: var(--spacing--5xs);
|
||||
}
|
||||
&.medium {
|
||||
padding-bottom: var(--spacing-2xs);
|
||||
padding-bottom: var(--spacing--2xs);
|
||||
}
|
||||
}
|
||||
|
||||
.underline {
|
||||
border-bottom: var(--border-base);
|
||||
border-bottom: var(--border);
|
||||
}
|
||||
|
||||
:root .tooltipPopper {
|
||||
line-height: var(--font-line-height-compact);
|
||||
line-height: var(--line-height--sm);
|
||||
max-width: 400px;
|
||||
|
||||
li {
|
||||
margin-left: var(--spacing-s);
|
||||
margin-left: var(--spacing--sm);
|
||||
}
|
||||
|
||||
code {
|
||||
color: var(--color--text--shade-1);
|
||||
font-size: var(--font-size-3xs);
|
||||
font-size: var(--font-size--3xs);
|
||||
background: var(--color--background--shade-1);
|
||||
padding: var(--spacing-5xs);
|
||||
border-radius: var(--border-radius-base);
|
||||
padding: var(--spacing--5xs);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -38,22 +38,22 @@ const keys = computed(() => {
|
|||
.shortcut {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-4xs);
|
||||
gap: var(--spacing--4xs);
|
||||
}
|
||||
.keyWrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: var(--border-radius-small);
|
||||
border-radius: var(--radius--sm);
|
||||
height: 18px;
|
||||
min-width: 18px;
|
||||
padding: 0 var(--spacing-4xs);
|
||||
padding: 0 var(--spacing--4xs);
|
||||
border: solid 1px var(--color--foreground);
|
||||
background: var(--color--background);
|
||||
}
|
||||
|
||||
.key {
|
||||
color: var(--color--text);
|
||||
font-size: var(--font-size-3xs);
|
||||
font-size: var(--font-size--3xs);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@ onMounted(() => {
|
|||
}
|
||||
|
||||
.logoText {
|
||||
margin-left: var(--spacing-5xs);
|
||||
margin-left: var(--spacing--5xs);
|
||||
path {
|
||||
fill: var(--color--text--shade-1);
|
||||
}
|
||||
|
|
@ -78,7 +78,7 @@ onMounted(() => {
|
|||
|
||||
.large {
|
||||
transform: scale(2);
|
||||
margin-bottom: var(--spacing-xl);
|
||||
margin-bottom: var(--spacing--xl);
|
||||
|
||||
.logo,
|
||||
.logoText {
|
||||
|
|
@ -86,18 +86,18 @@ onMounted(() => {
|
|||
}
|
||||
|
||||
.logoText {
|
||||
margin-left: var(--spacing-xs);
|
||||
margin-right: var(--spacing-3xs);
|
||||
margin-left: var(--spacing--xs);
|
||||
margin-right: var(--spacing--3xs);
|
||||
}
|
||||
}
|
||||
|
||||
.sidebarExpanded .logo {
|
||||
margin-left: var(--spacing-2xs);
|
||||
margin-left: var(--spacing--2xs);
|
||||
}
|
||||
|
||||
.sidebarCollapsed .logo {
|
||||
width: 40px;
|
||||
height: 30px;
|
||||
padding: 0 var(--spacing-4xs);
|
||||
padding: 0 var(--spacing--4xs);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -249,33 +249,33 @@ const onCheckboxChange = (index: number) => {
|
|||
color: var(--color--text);
|
||||
|
||||
* {
|
||||
font-size: var(--font-size-m);
|
||||
line-height: var(--font-line-height-xloose);
|
||||
font-size: var(--font-size--md);
|
||||
line-height: var(--line-height--xl);
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
margin-bottom: var(--spacing-s);
|
||||
font-size: var(--font-size-m);
|
||||
font-weight: var(--font-weight-bold);
|
||||
margin-bottom: var(--spacing--sm);
|
||||
font-size: var(--font-size--md);
|
||||
font-weight: var(--font-weight--bold);
|
||||
}
|
||||
|
||||
h3,
|
||||
h4 {
|
||||
font-weight: var(--font-weight-bold);
|
||||
font-weight: var(--font-weight--bold);
|
||||
}
|
||||
|
||||
p,
|
||||
span {
|
||||
margin-bottom: var(--spacing-s);
|
||||
margin-bottom: var(--spacing--sm);
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
margin-bottom: var(--spacing-s);
|
||||
padding-left: var(--spacing-m);
|
||||
margin-bottom: var(--spacing--sm);
|
||||
padding-left: var(--spacing--md);
|
||||
|
||||
li {
|
||||
margin-top: 0.25em;
|
||||
|
|
@ -289,7 +289,7 @@ const onCheckboxChange = (index: number) => {
|
|||
|
||||
li > code,
|
||||
p > code {
|
||||
padding: 0 var(--spacing-4xs);
|
||||
padding: 0 var(--spacing--4xs);
|
||||
color: var(--color--text--shade-1);
|
||||
background-color: var(--color--background);
|
||||
}
|
||||
|
|
@ -300,13 +300,13 @@ const onCheckboxChange = (index: number) => {
|
|||
|
||||
img {
|
||||
max-width: 100%;
|
||||
border-radius: var(--border-radius-large);
|
||||
border-radius: var(--radius--lg);
|
||||
}
|
||||
|
||||
blockquote {
|
||||
padding-left: 10px;
|
||||
font-style: italic;
|
||||
border-left: var(--border-color-base) 2px solid;
|
||||
border-left: var(--border-color) 2px solid;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -335,9 +335,9 @@ input[type='checkbox'] + label {
|
|||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
margin-bottom: var(--spacing-2xs);
|
||||
font-weight: var(--font-weight-bold);
|
||||
line-height: var(--font-line-height-loose);
|
||||
margin-bottom: var(--spacing--2xs);
|
||||
font-weight: var(--font-weight--bold);
|
||||
line-height: var(--line-height--lg);
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
|
@ -352,31 +352,31 @@ input[type='checkbox'] + label {
|
|||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-size: var(--font-size-m);
|
||||
font-size: var(--font-size--md);
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: var(--spacing-2xs);
|
||||
font-size: var(--font-size-s);
|
||||
font-weight: var(--font-weight-regular);
|
||||
line-height: var(--font-line-height-loose);
|
||||
margin-bottom: var(--spacing--2xs);
|
||||
font-size: var(--font-size--sm);
|
||||
font-weight: var(--font-weight--regular);
|
||||
line-height: var(--line-height--lg);
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
margin-bottom: var(--spacing-2xs);
|
||||
padding-left: var(--spacing-m);
|
||||
margin-bottom: var(--spacing--2xs);
|
||||
padding-left: var(--spacing--md);
|
||||
|
||||
li {
|
||||
margin-top: 0.25em;
|
||||
font-size: var(--font-size-s);
|
||||
font-weight: var(--font-weight-regular);
|
||||
line-height: var(--font-line-height-regular);
|
||||
font-size: var(--font-size--sm);
|
||||
font-weight: var(--font-weight--regular);
|
||||
line-height: var(--line-height--md);
|
||||
}
|
||||
|
||||
&:has(input[type='checkbox']) {
|
||||
list-style-type: none;
|
||||
padding-left: var(--spacing-5xs);
|
||||
padding-left: var(--spacing--5xs);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -399,8 +399,8 @@ input[type='checkbox'] + label {
|
|||
|
||||
img {
|
||||
object-fit: contain;
|
||||
margin-top: var(--spacing-xs);
|
||||
margin-bottom: var(--spacing-2xs);
|
||||
margin-top: var(--spacing--xs);
|
||||
margin-bottom: var(--spacing--2xs);
|
||||
|
||||
&[src*='#full-width'] {
|
||||
width: 100%;
|
||||
|
|
@ -411,13 +411,13 @@ input[type='checkbox'] + label {
|
|||
.sticky,
|
||||
.markdown {
|
||||
pre {
|
||||
margin-bottom: var(--spacing-s);
|
||||
margin-bottom: var(--spacing--sm);
|
||||
display: grid;
|
||||
}
|
||||
|
||||
pre > code {
|
||||
display: block;
|
||||
padding: var(--spacing-s);
|
||||
padding: var(--spacing--sm);
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
|
|
@ -431,6 +431,6 @@ input[type='checkbox'] + label {
|
|||
}
|
||||
|
||||
.spacer {
|
||||
margin: var(--spacing-2xl);
|
||||
margin: var(--spacing--2xl);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -95,7 +95,7 @@ const iconColor = computed(() => {
|
|||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
margin-bottom: var(--spacing-5xs);
|
||||
margin-bottom: var(--spacing--5xs);
|
||||
}
|
||||
|
||||
.router-link-active,
|
||||
|
|
@ -107,11 +107,11 @@ const iconColor = computed(() => {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: var(--spacing-3xs);
|
||||
gap: var(--spacing-3xs);
|
||||
padding: var(--spacing--3xs);
|
||||
gap: var(--spacing--3xs);
|
||||
cursor: pointer;
|
||||
color: var(--color--text);
|
||||
border-radius: var(--spacing-4xs);
|
||||
border-radius: var(--spacing--4xs);
|
||||
cursor: pointer;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
|
|
@ -137,7 +137,7 @@ const iconColor = computed(() => {
|
|||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
flex: 1;
|
||||
line-height: var(--font-size-l);
|
||||
line-height: var(--font-size--lg);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
|
|
@ -147,24 +147,24 @@ const iconColor = computed(() => {
|
|||
|
||||
.menuItemIcon {
|
||||
position: relative;
|
||||
width: var(--spacing-s);
|
||||
height: var(--spacing-s);
|
||||
min-width: var(--spacing-s);
|
||||
width: var(--spacing--sm);
|
||||
height: var(--spacing--sm);
|
||||
min-width: var(--spacing--sm);
|
||||
|
||||
&.notification::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: calc(var(--spacing-5xs) * -1);
|
||||
right: calc(var(--spacing-5xs) * -1);
|
||||
width: var(--spacing-4xs);
|
||||
height: var(--spacing-4xs);
|
||||
top: calc(var(--spacing--5xs) * -1);
|
||||
right: calc(var(--spacing--5xs) * -1);
|
||||
width: var(--spacing--4xs);
|
||||
height: var(--spacing--4xs);
|
||||
background-color: var(--color--danger);
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.menuItemEmoji {
|
||||
font-size: var(--spacing-s);
|
||||
font-size: var(--spacing--sm);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -165,8 +165,8 @@ defineExpose({
|
|||
|
||||
& hr {
|
||||
border-top: none;
|
||||
border-bottom: var(--border-base);
|
||||
margin-block: var(--spacing-4xs);
|
||||
border-bottom: var(--border);
|
||||
margin-block: var(--spacing--4xs);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -197,7 +197,7 @@ defineExpose({
|
|||
|
||||
:global(.el-menu--popup) {
|
||||
border: 1px solid var(--color--foreground);
|
||||
border-radius: var(--border-radius-base);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
:global(.el-menu--horizontal .el-menu .el-menu-item.is-disabled) {
|
||||
|
|
@ -212,7 +212,7 @@ defineExpose({
|
|||
}
|
||||
|
||||
.submenu__icon {
|
||||
margin-right: var(--spacing-2xs);
|
||||
margin-right: var(--spacing--2xs);
|
||||
color: var(--color--text);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -75,7 +75,7 @@ const { t } = useI18n();
|
|||
align-items: center;
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
padding: var(--spacing-xs) var(--spacing-2xs) var(--spacing-xs) 0;
|
||||
padding: var(--spacing--xs) var(--spacing--2xs) var(--spacing--xs) 0;
|
||||
|
||||
&.hasAction {
|
||||
user-select: none;
|
||||
|
|
@ -85,14 +85,14 @@ const { t } = useI18n();
|
|||
color: var(--action-arrow-color-hover, var(--color--text--tint-1));
|
||||
}
|
||||
:root .tag {
|
||||
margin-left: var(--spacing-2xs);
|
||||
line-height: var(--font-size-3xs);
|
||||
font-size: var(--font-size-3xs);
|
||||
padding: 0.1875rem var(--spacing-3xs) var(--spacing-4xs) var(--spacing-3xs);
|
||||
margin-left: var(--spacing--2xs);
|
||||
line-height: var(--font-size--3xs);
|
||||
font-size: var(--font-size--3xs);
|
||||
padding: 0.1875rem var(--spacing--3xs) var(--spacing--4xs) var(--spacing--3xs);
|
||||
height: auto;
|
||||
|
||||
span {
|
||||
font-size: var(--font-size-2xs) !important;
|
||||
font-size: var(--font-size--2xs) !important;
|
||||
}
|
||||
}
|
||||
.panelIcon {
|
||||
|
|
@ -100,36 +100,36 @@ const { t } = useI18n();
|
|||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
margin-left: var(--spacing-2xs);
|
||||
margin-left: var(--spacing--2xs);
|
||||
color: var(--action-arrow-color, var(--color--text--tint-2));
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
.tooltipIcon {
|
||||
margin-left: var(--spacing-3xs);
|
||||
margin-left: var(--spacing--3xs);
|
||||
color: var(--color--text);
|
||||
font-size: var(--font-size-2xs);
|
||||
font-size: var(--font-size--2xs);
|
||||
}
|
||||
.details {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-3xs);
|
||||
gap: var(--spacing--3xs);
|
||||
}
|
||||
.nodeIcon {
|
||||
display: flex;
|
||||
margin-right: var(--node-icon-margin-right, var(--spacing-s));
|
||||
margin-right: var(--node-icon-margin-right, var(--spacing--sm));
|
||||
}
|
||||
.name {
|
||||
font-weight: var(--node-creator-name-weight, var(--font-weight-medium));
|
||||
font-size: var(--node-creator-name-size, var(--font-size-s));
|
||||
font-weight: var(--node-creator-name-weight, var(--font-weight--medium));
|
||||
font-size: var(--node-creator-name-size, var(--font-size--sm));
|
||||
line-height: 1.115rem;
|
||||
}
|
||||
.description {
|
||||
margin-top: var(--spacing-5xs);
|
||||
font-size: var(--font-size-2xs);
|
||||
margin-top: var(--spacing--5xs);
|
||||
font-size: var(--font-size--2xs);
|
||||
line-height: 1rem;
|
||||
font-weight: var(--font-weight-regular);
|
||||
font-weight: var(--font-weight--regular);
|
||||
color: var(--node-creator-description-colos, var(--color--text));
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -134,12 +134,12 @@ const N8nNodeIcon = getCurrentInstance()?.type;
|
|||
.nodeIconWrapper {
|
||||
width: var(--node-icon-size, 26px);
|
||||
height: var(--node-icon-size, 26px);
|
||||
border-radius: var(--border-radius-small);
|
||||
border-radius: var(--radius--sm);
|
||||
color: var(--node-icon-color, #444);
|
||||
line-height: var(--node-icon-size, 26px);
|
||||
font-size: 1.1em;
|
||||
text-align: center;
|
||||
font-weight: var(--font-weight-bold);
|
||||
font-weight: var(--font-weight--bold);
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -86,20 +86,20 @@ const onClick = (event: MouseEvent) => {
|
|||
|
||||
<style lang="scss" module>
|
||||
.notice {
|
||||
font-size: var(--font-size-2xs);
|
||||
font-size: var(--font-size--2xs);
|
||||
display: flex;
|
||||
color: var(--color-notice-font);
|
||||
margin: var(--notice-margin, var(--spacing-s) 0);
|
||||
padding: var(--spacing-2xs);
|
||||
margin: var(--notice-margin, var(--spacing--sm) 0);
|
||||
padding: var(--spacing--2xs);
|
||||
background-color: var(--background-color);
|
||||
border-width: 1px 1px 1px 7px;
|
||||
border-style: solid;
|
||||
border-color: var(--border-color);
|
||||
border-radius: var(--border-radius-small);
|
||||
line-height: var(--font-line-height-compact);
|
||||
border-radius: var(--radius--sm);
|
||||
line-height: var(--line-height--sm);
|
||||
|
||||
a {
|
||||
font-weight: var(--font-weight-bold);
|
||||
font-weight: var(--font-weight--bold);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -125,7 +125,7 @@ const onClick = (event: MouseEvent) => {
|
|||
|
||||
.expanded {
|
||||
+ span {
|
||||
margin-top: var(--spacing-4xs);
|
||||
margin-top: var(--spacing--4xs);
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -110,9 +110,9 @@ function handleOpenAutoFocus(e: Event) {
|
|||
|
||||
<style lang="scss" module>
|
||||
.popoverContent {
|
||||
border-radius: var(--border-radius-base);
|
||||
border-radius: var(--radius);
|
||||
background-color: var(--color--foreground--tint-2);
|
||||
border: var(--border-base);
|
||||
border: var(--border);
|
||||
box-shadow:
|
||||
rgba(0, 0, 0, 0.1) 0 10px 15px -3px,
|
||||
rgba(0, 0, 0, 0.05) 0 4px 6px -2px;
|
||||
|
|
|
|||
|
|
@ -346,12 +346,12 @@ const CreditsInteractiveTemplate: StoryFn = (args) => ({
|
|||
},
|
||||
template: `
|
||||
<div style="max-width: 600px; margin: 20px;">
|
||||
<div style="margin-bottom: 20px; padding: 20px; background: var(--color--background); border-radius: var(--border-radius-base);">
|
||||
<div style="margin-bottom: 20px; padding: 20px; background: var(--color--background); border-radius: var(--radius);">
|
||||
<h3 style="color: var(--color--text--shade-1); margin-bottom: 10px;">Credits Tracking Demo</h3>
|
||||
<p style="color: var(--color--text); margin-bottom: 10px;">
|
||||
Each message consumes 1 credit. Credits renew at the beginning of next month.
|
||||
</p>
|
||||
<p style="color: var(--color--text--tint-1); font-size: var(--font-size-s);">
|
||||
<p style="color: var(--color--text--tint-1); font-size: var(--font-size--sm);">
|
||||
Credits remaining: {{ creditsRemaining }} / {{ creditsQuota }}
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -406,7 +406,7 @@ defineExpose({
|
|||
.wrapper {
|
||||
background: var(--color--background--light-2);
|
||||
border: 1px solid var(--color--foreground);
|
||||
border-radius: var(--border-radius-large);
|
||||
border-radius: var(--radius--lg);
|
||||
}
|
||||
|
||||
.container {
|
||||
|
|
@ -416,16 +416,16 @@ defineExpose({
|
|||
background: var(--color--background--light-3);
|
||||
border: none;
|
||||
border-bottom: 1px transparent solid;
|
||||
border-radius: var(--border-radius-large);
|
||||
border-radius: var(--radius--lg);
|
||||
transition:
|
||||
border-color 0.2s ease,
|
||||
box-shadow 0.2s ease;
|
||||
padding: var(--spacing-2xs);
|
||||
padding: var(--spacing--2xs);
|
||||
box-sizing: border-box;
|
||||
|
||||
// if credit bar is showing
|
||||
&.withBottomBorder {
|
||||
border-bottom: var(--border-base);
|
||||
border-bottom: var(--border);
|
||||
}
|
||||
|
||||
&.focused {
|
||||
|
|
@ -449,14 +449,14 @@ defineExpose({
|
|||
}
|
||||
|
||||
.warningCallout {
|
||||
margin: 0 var(--spacing-3xs) var(--spacing-2xs) var(--spacing-3xs);
|
||||
margin: 0 var(--spacing--3xs) var(--spacing--2xs) var(--spacing--3xs);
|
||||
}
|
||||
|
||||
// Single line mode
|
||||
.singleLineWrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-2xs);
|
||||
gap: var(--spacing--2xs);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -467,10 +467,10 @@ defineExpose({
|
|||
resize: none;
|
||||
outline: none;
|
||||
font-family: var(--font-family), sans-serif;
|
||||
font-size: var(--font-size-2xs);
|
||||
font-size: var(--font-size--2xs);
|
||||
line-height: 24px;
|
||||
color: var(--color--text--shade-1);
|
||||
padding: 0 var(--spacing-2xs);
|
||||
padding: 0 var(--spacing--2xs);
|
||||
height: 24px;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -484,7 +484,7 @@ defineExpose({
|
|||
.inlineActions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-3xs);
|
||||
gap: var(--spacing--3xs);
|
||||
}
|
||||
|
||||
// Multiline mode
|
||||
|
|
@ -500,10 +500,10 @@ defineExpose({
|
|||
resize: none;
|
||||
outline: none;
|
||||
font-family: var(--font-family), sans-serif;
|
||||
font-size: var(--font-size-2xs);
|
||||
font-size: var(--font-size--2xs);
|
||||
line-height: 18px;
|
||||
color: var(--color--text--shade-1);
|
||||
padding: var(--spacing-3xs);
|
||||
padding: var(--spacing--3xs);
|
||||
margin-bottom: 0;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
|
|
@ -518,8 +518,8 @@ defineExpose({
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: var(--spacing-3xs);
|
||||
padding: var(--spacing-2xs) 0 var(--spacing-2xs) var(--spacing-2xs);
|
||||
gap: var(--spacing--3xs);
|
||||
padding: var(--spacing--2xs) 0 var(--spacing--2xs) var(--spacing--2xs);
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
|
|
@ -528,19 +528,19 @@ defineExpose({
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: var(--spacing-2xs) var(--spacing-xs);
|
||||
padding: var(--spacing--2xs) var(--spacing--xs);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.creditsInfoWrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-3xs);
|
||||
gap: var(--spacing--3xs);
|
||||
color: var(--color--text);
|
||||
font-size: var(--font-size-2xs);
|
||||
font-size: var(--font-size--2xs);
|
||||
|
||||
b {
|
||||
font-weight: var(--font-weight-bold);
|
||||
font-weight: var(--font-weight--bold);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -549,7 +549,7 @@ defineExpose({
|
|||
line-height: 18px;
|
||||
|
||||
b {
|
||||
font-weight: var(--font-weight-bold);
|
||||
font-weight: var(--font-weight--bold);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -559,13 +559,13 @@ defineExpose({
|
|||
|
||||
// Common styles
|
||||
.characterCount {
|
||||
font-size: var(--font-size-3xs);
|
||||
font-size: var(--font-size--3xs);
|
||||
color: var(--color--text--tint-1);
|
||||
padding: 0 var(--spacing-3xs);
|
||||
padding: 0 var(--spacing--3xs);
|
||||
|
||||
.overLimit {
|
||||
color: var(--color--danger);
|
||||
font-weight: var(--font-weight-bold);
|
||||
font-weight: var(--font-weight--bold);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@ function onSuggestionClick(suggestion: WorkflowSuggestion) {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: var(--spacing-m);
|
||||
gap: var(--spacing--md);
|
||||
max-width: 710px;
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -69,7 +69,7 @@ function onSuggestionClick(suggestion: WorkflowSuggestion) {
|
|||
.promptContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-s);
|
||||
gap: var(--spacing--sm);
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
|
|
@ -78,24 +78,24 @@ function onSuggestionClick(suggestion: WorkflowSuggestion) {
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
gap: var(--spacing-2xs);
|
||||
gap: var(--spacing--2xs);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.suggestionPill {
|
||||
display: flex;
|
||||
padding: var(--spacing-4xs) var(--spacing-2xs);
|
||||
padding: var(--spacing--4xs) var(--spacing--2xs);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: var(--spacing-2xs);
|
||||
gap: var(--spacing--2xs);
|
||||
border-radius: 56px;
|
||||
border: var(--border-base);
|
||||
border: var(--border);
|
||||
background: var(--color--background--light-3);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
font-size: var(--font-size-2xs);
|
||||
font-size: var(--font-size--2xs);
|
||||
color: var(--color--text--shade-1);
|
||||
font-weight: var(--font-weight-regular);
|
||||
font-weight: var(--font-weight--regular);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
color: var(--color--primary);
|
||||
|
|
|
|||
|
|
@ -69,8 +69,8 @@ defineSlots<{ default?: {} }>();
|
|||
.button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: var(--border-radius-base);
|
||||
font-weight: var(--font-weight-medium);
|
||||
border-radius: var(--radius);
|
||||
font-weight: var(--font-weight--medium);
|
||||
color: var(--color--text);
|
||||
transition: background-color 0.2s ease;
|
||||
cursor: pointer;
|
||||
|
|
@ -89,8 +89,8 @@ defineSlots<{ default?: {} }>();
|
|||
|
||||
.medium {
|
||||
height: 26px;
|
||||
font-size: var(--font-size-2xs);
|
||||
padding: 0 var(--spacing-xs);
|
||||
font-size: var(--font-size--2xs);
|
||||
padding: 0 var(--spacing--xs);
|
||||
|
||||
.square & {
|
||||
width: 26px;
|
||||
|
|
@ -100,8 +100,8 @@ defineSlots<{ default?: {} }>();
|
|||
|
||||
.small-medium {
|
||||
height: 22px;
|
||||
font-size: var(--font-size-3xs);
|
||||
padding: 0 var(--spacing-2xs);
|
||||
font-size: var(--font-size--3xs);
|
||||
padding: 0 var(--spacing--2xs);
|
||||
|
||||
.square & {
|
||||
width: 22px;
|
||||
|
|
@ -110,9 +110,9 @@ defineSlots<{ default?: {} }>();
|
|||
}
|
||||
|
||||
.small {
|
||||
font-size: var(--font-size-3xs);
|
||||
font-size: var(--font-size--3xs);
|
||||
height: 15px;
|
||||
padding: 0 var(--spacing-4xs);
|
||||
padding: 0 var(--spacing--4xs);
|
||||
|
||||
.square & {
|
||||
width: 15px;
|
||||
|
|
|
|||
|
|
@ -69,8 +69,8 @@ const onClick = (
|
|||
vertical-align: middle;
|
||||
font-size: 0;
|
||||
background-color: var(--color--foreground);
|
||||
padding: var(--spacing-5xs);
|
||||
border-radius: var(--border-radius-base);
|
||||
padding: var(--spacing--5xs);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
.disabled {
|
||||
|
|
|
|||
|
|
@ -147,7 +147,7 @@ const InPopoverTemplate: StoryFn = (args) => ({
|
|||
N8nScrollArea,
|
||||
},
|
||||
template: `
|
||||
<div style="width: 260px; padding: 16px; background-color: var(--color--foreground--tint-2); border: var(--border-base); border-radius: var(--border-radius-base); box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;">
|
||||
<div style="width: 260px; padding: 16px; background-color: var(--color--foreground--tint-2); border: var(--border); border-radius: var(--radius); box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;">
|
||||
<N8nScrollArea v-bind="args">
|
||||
<div style="display: flex; flex-direction: column; gap: 12px;">
|
||||
<h3 style="margin: 0; font-size: 14px; font-weight: 600;">Long Menu Items</h3>
|
||||
|
|
|
|||
|
|
@ -213,7 +213,7 @@ defineExpose({
|
|||
display: flex;
|
||||
user-select: none;
|
||||
touch-action: none;
|
||||
padding: var(--spacing-5xs);
|
||||
padding: var(--spacing--5xs);
|
||||
background: transparent;
|
||||
transition: background 160ms ease-out;
|
||||
pointer-events: none;
|
||||
|
|
@ -223,11 +223,11 @@ defineExpose({
|
|||
}
|
||||
|
||||
&[data-orientation='vertical'] {
|
||||
width: var(--spacing-xs);
|
||||
width: var(--spacing--xs);
|
||||
}
|
||||
|
||||
&[data-orientation='horizontal'] {
|
||||
height: var(--spacing-xs);
|
||||
height: var(--spacing--xs);
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -151,7 +151,7 @@ defineExpose({
|
|||
|
||||
<style lang="scss" module>
|
||||
.xlarge {
|
||||
--input-font-size: var(--font-size-m);
|
||||
--input-font-size: var(--font-size--md);
|
||||
input {
|
||||
height: 48px;
|
||||
}
|
||||
|
|
@ -167,21 +167,21 @@ defineExpose({
|
|||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
@-moz-document url-prefix() {
|
||||
padding: 0 var(--spacing-3xs);
|
||||
padding: 0 var(--spacing--3xs);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.prepend {
|
||||
font-size: var(--font-size-2xs);
|
||||
border: var(--border-base);
|
||||
font-size: var(--font-size--2xs);
|
||||
border: var(--border);
|
||||
border-right: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 var(--spacing-3xs);
|
||||
padding: 0 var(--spacing--3xs);
|
||||
background-color: var(--color--background--light-2);
|
||||
border-bottom-left-radius: var(--input-border-radius, var(--border-radius-base));
|
||||
border-top-left-radius: var(--input-border-radius, var(--border-radius-base));
|
||||
border-bottom-left-radius: var(--input-border-radius, var(--radius));
|
||||
border-top-left-radius: var(--input-border-radius, var(--radius));
|
||||
color: var(--color--text);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -106,7 +106,7 @@ function itemComparator(a: Item, b: Item) {
|
|||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-grow: 1;
|
||||
gap: var(--spacing-2xs);
|
||||
gap: var(--spacing--2xs);
|
||||
}
|
||||
|
||||
.slotContainer {
|
||||
|
|
@ -120,10 +120,10 @@ function itemComparator(a: Item, b: Item) {
|
|||
}
|
||||
.selectableCell {
|
||||
display: flex;
|
||||
margin-right: var(--spacing-3xs);
|
||||
margin-right: var(--spacing--3xs);
|
||||
|
||||
min-width: max-content;
|
||||
border-radius: var(--border-radius-base);
|
||||
border-radius: var(--radius);
|
||||
font-size: small;
|
||||
background-color: var(--color-ndv-background);
|
||||
color: var(--text-color-dark);
|
||||
|
|
@ -136,8 +136,8 @@ function itemComparator(a: Item, b: Item) {
|
|||
}
|
||||
|
||||
.selectableTextSize {
|
||||
font-size: var(--font-size-2xs);
|
||||
line-height: var(--font-line-height-loose);
|
||||
font-size: var(--font-size--2xs);
|
||||
line-height: var(--line-height--lg);
|
||||
}
|
||||
|
||||
.slotRemoveIcon {
|
||||
|
|
|
|||
|
|
@ -238,7 +238,7 @@ const UsageExampleTemplate: StoryFn = () => ({
|
|||
padding: 8px;
|
||||
background: var(--color--background--light-3);
|
||||
border: 1px solid var(--color--foreground);
|
||||
border-radius: var(--border-radius-large);
|
||||
border-radius: var(--radius--lg);
|
||||
">
|
||||
<input
|
||||
v-model="message"
|
||||
|
|
|
|||
|
|
@ -53,10 +53,10 @@ function handleStop() {
|
|||
|
||||
<style lang="scss" module>
|
||||
.sendButton {
|
||||
--button-border-radius: var(--border-radius-large);
|
||||
--button-border-radius: var(--radius--lg);
|
||||
}
|
||||
|
||||
.stopButton {
|
||||
--button-border-radius: var(--border-radius-large);
|
||||
--button-border-radius: var(--radius--lg);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -126,7 +126,7 @@ const onInputScroll = (event: WheelEvent) => {
|
|||
<style lang="scss" module>
|
||||
.sticky {
|
||||
position: absolute;
|
||||
border-radius: var(--border-radius-base);
|
||||
border-radius: var(--radius);
|
||||
|
||||
background-color: var(--color-sticky-background);
|
||||
border: 1px solid var(--color-sticky-border);
|
||||
|
|
@ -149,7 +149,7 @@ const onInputScroll = (event: WheelEvent) => {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
padding: var(--spacing-2xs) var(--spacing-xs) 0;
|
||||
padding: var(--spacing--2xs) var(--spacing--xs) 0;
|
||||
overflow: hidden;
|
||||
|
||||
&::after {
|
||||
|
|
@ -159,12 +159,12 @@ const onInputScroll = (event: WheelEvent) => {
|
|||
left: 0;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
border-radius: var(--border-radius-base);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding: var(--spacing-5xs) var(--spacing-2xs) 0 var(--spacing-2xs);
|
||||
padding: var(--spacing--5xs) var(--spacing--2xs) 0 var(--spacing--2xs);
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
|
@ -202,8 +202,8 @@ const onInputScroll = (event: WheelEvent) => {
|
|||
|
||||
<style lang="scss">
|
||||
.sticky-textarea {
|
||||
height: calc(100% - var(--spacing-l));
|
||||
padding: var(--spacing-2xs) var(--spacing-2xs) 0 var(--spacing-2xs);
|
||||
height: calc(100% - var(--spacing--lg));
|
||||
padding: var(--spacing--2xs) var(--spacing--2xs) 0 var(--spacing--2xs);
|
||||
cursor: default;
|
||||
|
||||
.el-textarea {
|
||||
|
|
@ -217,6 +217,6 @@ const onInputScroll = (event: WheelEvent) => {
|
|||
}
|
||||
|
||||
.full-height {
|
||||
height: calc(100% - var(--spacing-2xs));
|
||||
height: calc(100% - var(--spacing--2xs));
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -164,8 +164,8 @@ const handleIgnoreClick = (actionId: string) => {
|
|||
.popoverContent {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-s);
|
||||
padding: var(--spacing-m) var(--spacing-s);
|
||||
gap: var(--spacing--sm);
|
||||
padding: var(--spacing--md) var(--spacing--sm);
|
||||
}
|
||||
|
||||
.actionItem {
|
||||
|
|
@ -174,7 +174,7 @@ const handleIgnoreClick = (actionId: string) => {
|
|||
transition:
|
||||
opacity 0.3s ease,
|
||||
filter 0.3s ease;
|
||||
border-bottom: var(--border-base);
|
||||
border-bottom: var(--border);
|
||||
|
||||
&.ignoring {
|
||||
opacity: 0.5;
|
||||
|
|
@ -204,15 +204,15 @@ const handleIgnoreClick = (actionId: string) => {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
padding-bottom: var(--spacing-s);
|
||||
padding-bottom: var(--spacing--sm);
|
||||
}
|
||||
|
||||
.checkboxContainer {
|
||||
padding-top: 1px;
|
||||
padding-right: var(--spacing-xs);
|
||||
padding-right: var(--spacing--xs);
|
||||
}
|
||||
|
||||
.ignoreAllContainer {
|
||||
padding-left: var(--spacing-5xs);
|
||||
padding-left: var(--spacing--5xs);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -176,7 +176,7 @@ const scrollRight = () => scroll(50);
|
|||
|
||||
.tabs {
|
||||
color: var(--color--text);
|
||||
font-weight: var(--font-weight-medium);
|
||||
font-weight: var(--font-weight--medium);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
|
|
@ -193,7 +193,7 @@ const scrollRight = () => scroll(50);
|
|||
scrollbar-width: none; /* Firefox */
|
||||
|
||||
.small.modern & {
|
||||
gap: var(--spacing-xs);
|
||||
gap: var(--spacing--xs);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -201,10 +201,10 @@ const scrollRight = () => scroll(50);
|
|||
--active-tab-border-width: 2px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-4xs);
|
||||
padding: 0 var(--spacing-s);
|
||||
padding-bottom: calc(var(--spacing-2xs) + var(--active-tab-border-width));
|
||||
font-size: var(--font-size-s);
|
||||
gap: var(--spacing--4xs);
|
||||
padding: 0 var(--spacing--sm);
|
||||
padding-bottom: calc(var(--spacing--2xs) + var(--active-tab-border-width));
|
||||
font-size: var(--font-size--sm);
|
||||
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
|
|
@ -214,17 +214,17 @@ const scrollRight = () => scroll(50);
|
|||
}
|
||||
|
||||
span + span {
|
||||
margin-left: var(--spacing-4xs);
|
||||
margin-left: var(--spacing--4xs);
|
||||
}
|
||||
|
||||
.modern & {
|
||||
padding-bottom: calc(var(--spacing-xs) + var(--active-tab-border-width));
|
||||
font-size: var(--font-size-2xs);
|
||||
font-weight: var(--font-weight-bold);
|
||||
padding-bottom: calc(var(--spacing--xs) + var(--active-tab-border-width));
|
||||
font-size: var(--font-size--2xs);
|
||||
font-weight: var(--font-weight--bold);
|
||||
}
|
||||
|
||||
.small & {
|
||||
font-size: var(--font-size-2xs);
|
||||
font-size: var(--font-size--2xs);
|
||||
}
|
||||
|
||||
.small.modern & {
|
||||
|
|
@ -234,11 +234,11 @@ const scrollRight = () => scroll(50);
|
|||
|
||||
.activeTab {
|
||||
color: var(--color--primary);
|
||||
padding-bottom: var(--spacing-2xs);
|
||||
padding-bottom: var(--spacing--2xs);
|
||||
border-bottom: var(--color--primary) var(--active-tab-border-width) solid;
|
||||
|
||||
.modern & {
|
||||
padding-bottom: var(--spacing-xs);
|
||||
padding-bottom: var(--spacing--xs);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -257,7 +257,7 @@ const scrollRight = () => scroll(50);
|
|||
|
||||
.external {
|
||||
display: inline-block;
|
||||
margin-left: var(--spacing-5xs);
|
||||
margin-left: var(--spacing--5xs);
|
||||
|
||||
.noText & {
|
||||
display: block;
|
||||
|
|
@ -285,7 +285,7 @@ const scrollRight = () => scroll(50);
|
|||
width: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: var(--font-weight-bold);
|
||||
font-weight: var(--font-weight--bold);
|
||||
}
|
||||
|
||||
.notificationContainer {
|
||||
|
|
|
|||
|
|
@ -77,7 +77,7 @@ const onExpand = () => {
|
|||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
overflow-x: scroll;
|
||||
gap: var(--spacing-4xs);
|
||||
gap: var(--spacing--4xs);
|
||||
|
||||
/* Hide scrollbar for Chrome, Safari and Opera */
|
||||
&::-webkit-scrollbar {
|
||||
|
|
@ -88,6 +88,6 @@ const onExpand = () => {
|
|||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
|
||||
margin-top: calc(var(--spacing-4xs) * -1); // Cancel out top margin of first tags row
|
||||
margin-top: calc(var(--spacing--4xs) * -1); // Cancel out top margin of first tags row
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -49,36 +49,36 @@ const classes = computed(() => {
|
|||
|
||||
<style lang="scss" module>
|
||||
.bold {
|
||||
font-weight: var(--font-weight-medium);
|
||||
font-weight: var(--font-weight--medium);
|
||||
}
|
||||
|
||||
.regular {
|
||||
font-weight: var(--font-weight-regular);
|
||||
font-weight: var(--font-weight--regular);
|
||||
}
|
||||
|
||||
.size-xlarge {
|
||||
font-size: var(--font-size-xl);
|
||||
line-height: var(--font-line-height-xloose);
|
||||
font-size: var(--font-size--xl);
|
||||
line-height: var(--line-height--xl);
|
||||
}
|
||||
|
||||
.size-large {
|
||||
font-size: var(--font-size-m);
|
||||
line-height: var(--font-line-height-xloose);
|
||||
font-size: var(--font-size--md);
|
||||
line-height: var(--line-height--xl);
|
||||
}
|
||||
|
||||
.size-medium {
|
||||
font-size: var(--font-size-s);
|
||||
line-height: var(--font-line-height-loose);
|
||||
font-size: var(--font-size--sm);
|
||||
line-height: var(--line-height--lg);
|
||||
}
|
||||
|
||||
.size-small {
|
||||
font-size: var(--font-size-2xs);
|
||||
line-height: var(--font-line-height-loose);
|
||||
font-size: var(--font-size--2xs);
|
||||
line-height: var(--line-height--lg);
|
||||
}
|
||||
|
||||
.size-xsmall {
|
||||
font-size: var(--font-size-3xs);
|
||||
line-height: var(--font-line-height-compact);
|
||||
font-size: var(--font-size--3xs);
|
||||
line-height: var(--line-height--sm);
|
||||
}
|
||||
|
||||
.compact {
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@ const appendTo = useInjectTooltipAppendTo();
|
|||
.buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: var(--spacing-s);
|
||||
gap: var(--spacing-2xs);
|
||||
margin-top: var(--spacing--sm);
|
||||
gap: var(--spacing--2xs);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -91,7 +91,7 @@ const N8nTree = getCurrentInstance()?.type;
|
|||
</template>
|
||||
|
||||
<style lang="scss" module>
|
||||
$--spacing: var(--spacing-s);
|
||||
$--spacing: var(--spacing--sm);
|
||||
|
||||
.indent {
|
||||
margin-left: $--spacing;
|
||||
|
|
|
|||
|
|
@ -79,18 +79,18 @@ const classes = computed(
|
|||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin-left: var(--spacing-xs);
|
||||
margin-left: var(--spacing--xs);
|
||||
}
|
||||
|
||||
.pendingUser {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: var(--spacing-xs);
|
||||
margin-left: var(--spacing--xs);
|
||||
}
|
||||
|
||||
.pendingBadge {
|
||||
margin-left: var(--spacing-xs);
|
||||
margin-left: var(--spacing--xs);
|
||||
}
|
||||
|
||||
.disabled {
|
||||
|
|
|
|||
|
|
@ -112,7 +112,7 @@ const getLabel = (user: IUser) =>
|
|||
|
||||
<style lang="scss" module>
|
||||
.itemContainer {
|
||||
--select-option-padding: var(--spacing-2xs) var(--spacing-s);
|
||||
--select-option-padding: var(--spacing--2xs) var(--spacing--sm);
|
||||
--select-option-line-height: 1;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -114,7 +114,7 @@ const menuHeight = computed(() => {
|
|||
cursor: pointer;
|
||||
}
|
||||
.avatar {
|
||||
margin-right: calc(-1 * var(--spacing-3xs));
|
||||
margin-right: calc(-1 * var(--spacing--3xs));
|
||||
user-select: none;
|
||||
}
|
||||
.hiddenBadge {
|
||||
|
|
@ -125,10 +125,10 @@ const menuHeight = computed(() => {
|
|||
height: 28px;
|
||||
color: var(--color--text);
|
||||
background-color: var(--color--background--light-3);
|
||||
font-weight: var(--font-weight-bold);
|
||||
font-size: var(--font-size-3xs);
|
||||
font-weight: var(--font-weight--bold);
|
||||
font-size: var(--font-size--3xs);
|
||||
z-index: 999;
|
||||
border: var(--border-width-base) var(--border-style-base) var(--color-info-tint-1);
|
||||
border: var(--border-width) var(--border-style) var(--color-info-tint-1);
|
||||
border-radius: 50%;
|
||||
}
|
||||
.groupContainer {
|
||||
|
|
@ -136,27 +136,27 @@ const menuHeight = computed(() => {
|
|||
flex-direction: column;
|
||||
|
||||
& + & {
|
||||
margin-top: var(--spacing-3xs);
|
||||
margin-top: var(--spacing--3xs);
|
||||
}
|
||||
}
|
||||
|
||||
.groupName {
|
||||
font-size: var(--font-size-3xs);
|
||||
font-size: var(--font-size--3xs);
|
||||
color: var(--color--text--tint-1);
|
||||
text-transform: uppercase;
|
||||
font-weight: var(--font-weight-bold);
|
||||
margin-bottom: var(--spacing-4xs);
|
||||
font-weight: var(--font-weight--bold);
|
||||
margin-bottom: var(--spacing--4xs);
|
||||
}
|
||||
.groupUsers {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-2xs);
|
||||
gap: var(--spacing--2xs);
|
||||
}
|
||||
|
||||
.userInfoContainer {
|
||||
display: flex;
|
||||
padding-top: var(--spacing-5xs);
|
||||
padding-bottom: var(--spacing-5xs);
|
||||
padding-top: var(--spacing--5xs);
|
||||
padding-bottom: var(--spacing--5xs);
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -165,11 +165,11 @@ ul.user-stack-list {
|
|||
border: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-s);
|
||||
padding-bottom: var(--spacing-2xs);
|
||||
gap: var(--spacing--sm);
|
||||
padding-bottom: var(--spacing--2xs);
|
||||
|
||||
.el-dropdown-menu__item {
|
||||
line-height: var(--font-line-height-regular);
|
||||
line-height: var(--line-height--md);
|
||||
}
|
||||
|
||||
li:hover {
|
||||
|
|
@ -178,9 +178,9 @@ ul.user-stack-list {
|
|||
}
|
||||
|
||||
.user-stack-popper {
|
||||
border: 1px solid var(--border-color-light);
|
||||
border-radius: var(--border-radius-base);
|
||||
padding: var(--spacing-5xs) 0;
|
||||
border: 1px solid var(--border-color--light);
|
||||
border-radius: var(--radius);
|
||||
padding: var(--spacing--5xs) 0;
|
||||
box-shadow: 0 2px 8px 0 #441c171a;
|
||||
background-color: var(--color--background--light-3);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -119,7 +119,7 @@ const onUserAction = (user: UserType, action: string) =>
|
|||
<style lang="scss" module>
|
||||
.itemContainer {
|
||||
display: flex;
|
||||
padding: var(--spacing-2xs) 0 vaR(--spacing-2xs) 0;
|
||||
padding: var(--spacing--2xs) 0 vaR(--spacing--2xs) 0;
|
||||
|
||||
> *:first-child {
|
||||
flex-grow: 1;
|
||||
|
|
@ -128,7 +128,7 @@ const onUserAction = (user: UserType, action: string) =>
|
|||
|
||||
.itemWithBorder {
|
||||
composes: itemContainer;
|
||||
border-bottom: var(--border-base);
|
||||
border-bottom: var(--border);
|
||||
}
|
||||
|
||||
.badgeContainer {
|
||||
|
|
@ -136,7 +136,7 @@ const onUserAction = (user: UserType, action: string) =>
|
|||
align-items: center;
|
||||
|
||||
> * {
|
||||
margin-left: var(--spacing-2xs);
|
||||
margin-left: var(--spacing--2xs);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
border-radius: 8px;
|
||||
border: 1px solid var(--color--foreground);
|
||||
overflow: hidden;
|
||||
font-size: var(--font-size-s);
|
||||
font-size: var(--font-size--sm);
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -228,9 +228,9 @@ const handleDragEnd = () => {
|
|||
|
||||
<style lang="scss" module>
|
||||
.header {
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: var(--font-weight-bold);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
font-size: var(--font-size--xs);
|
||||
font-weight: var(--font-weight--bold);
|
||||
margin-bottom: var(--spacing--xs);
|
||||
}
|
||||
|
||||
.grip {
|
||||
|
|
@ -243,7 +243,7 @@ const handleDragEnd = () => {
|
|||
}
|
||||
|
||||
.contentContainer {
|
||||
padding: var(--spacing-s);
|
||||
padding: var(--spacing--sm);
|
||||
}
|
||||
|
||||
.column {
|
||||
|
|
@ -254,7 +254,7 @@ const handleDragEnd = () => {
|
|||
align-items: center;
|
||||
|
||||
label {
|
||||
font-size: var(--font-size-xs);
|
||||
font-size: var(--font-size--xs);
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,6 +5,10 @@
|
|||
**/
|
||||
@mixin deprecatedTheme {
|
||||
--color-danger: var(--p--color--alt-h-310);
|
||||
|
||||
--box-shadow-base: 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 6px rgba(0, 0, 0, 0.1);
|
||||
--box-shadow-dark: 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 6px rgba(0, 0, 0, 0.2);
|
||||
--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
body[data-theme='dark'] {
|
||||
|
|
|
|||
|
|
@ -27,9 +27,9 @@
|
|||
--color--background--light-2: var(--p--color--gray-820);
|
||||
--color--background--light-3: var(--p--color--gray-740);
|
||||
|
||||
--box-shadow-base: 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 6px rgba(0, 0, 0, 0.1);
|
||||
--box-shadow-dark: 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 6px rgba(0, 0, 0, 0.2);
|
||||
--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
|
||||
--shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 6px rgba(0, 0, 0, 0.1);
|
||||
--shadow--dark: 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 6px rgba(0, 0, 0, 0.2);
|
||||
--shadow--light: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
|
||||
|
||||
// Secondary tokens
|
||||
|
||||
|
|
@ -505,9 +505,9 @@
|
|||
// Various
|
||||
--color-info-tint-1: var(--p--color--gray-420);
|
||||
--color-info-tint-2: var(--p--color--gray-740);
|
||||
--border-color-base: var(--color--foreground);
|
||||
--border-color-light: var(--color--foreground--tint-1);
|
||||
--border-base: var(--border-width-base) var(--border-style-base) var(--color--foreground);
|
||||
--border-color: var(--color--foreground);
|
||||
--border-color--light: var(--color--foreground--tint-1);
|
||||
--border: var(--border-width) var(--border-style) var(--color--foreground);
|
||||
--node-type-supplemental-label-color-l: 100%;
|
||||
--node-type-supplemental-label-color: hsl(
|
||||
var(--node-type-supplemental-label-color-h),
|
||||
|
|
|
|||
|
|
@ -67,6 +67,57 @@
|
|||
--color-background-light-base: var(--p--color--gray-025);
|
||||
--color-background-light: var(--p--color--gray-010);
|
||||
--color-background-xlight: var(--p--color--white);
|
||||
|
||||
--box-shadow-base: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
|
||||
--box-shadow-dark: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.12);
|
||||
--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.07);
|
||||
|
||||
--border-radius-xlarge: 12px;
|
||||
--border-radius-large: 8px;
|
||||
--border-radius-base: 4px;
|
||||
--border-radius-small: 2px;
|
||||
--border-color-base: var(--color--foreground);
|
||||
--border-color-light: var(--color--foreground--tint-1);
|
||||
|
||||
--border-style-base: solid;
|
||||
--border-width-base: 1px;
|
||||
--border-base: var(--border-width-base) var(--border-style-base) var(--color--foreground);
|
||||
|
||||
--font-size-4xs: 0.5rem;
|
||||
--font-size-3xs: 0.625rem;
|
||||
--font-size-2xs: 0.75rem;
|
||||
--font-size-xs: 0.8125rem;
|
||||
--font-size-s: 0.875rem;
|
||||
--font-size-m: 1rem;
|
||||
--font-size-l: 1.125rem;
|
||||
--font-size-xl: 1.25rem;
|
||||
--font-size-2xl: 1.75rem;
|
||||
|
||||
--font-line-height-xsmall: 1;
|
||||
--font-line-height-compact: 1.25;
|
||||
--font-line-height-regular: 1.3;
|
||||
--font-line-height-loose: 1.35;
|
||||
--font-line-height-xloose: 1.5;
|
||||
|
||||
--font-weight-regular: 400;
|
||||
--font-weight-medium: 500;
|
||||
--font-weight-bold: 600;
|
||||
--font-family: InterVariable, sans-serif;
|
||||
--font-family-monospace: CommitMono, ui-monospace, Menlo, Consolas, 'DejaVu Sans Mono', monospace;
|
||||
|
||||
--spacing-5xs: 0.125rem;
|
||||
--spacing-4xs: 0.25rem;
|
||||
--spacing-3xs: 0.375rem;
|
||||
--spacing-2xs: 0.5rem;
|
||||
--spacing-xs: 0.75rem;
|
||||
--spacing-s: 1rem;
|
||||
--spacing-m: 1.25rem;
|
||||
--spacing-l: 1.5rem;
|
||||
--spacing-xl: 2rem;
|
||||
--spacing-2xl: 3rem;
|
||||
--spacing-3xl: 4rem;
|
||||
--spacing-4xl: 8rem;
|
||||
--spacing-5xl: 16rem;
|
||||
}
|
||||
|
||||
:root {
|
||||
|
|
|
|||
|
|
@ -65,6 +65,58 @@
|
|||
--color--background--light-2: var(--p--color--gray-010);
|
||||
--color--background--light-3: var(--p--color--white);
|
||||
|
||||
--shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
|
||||
--shadow--dark: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.12);
|
||||
--shadow--light: 0 2px 12px 0 rgba(0, 0, 0, 0.07);
|
||||
|
||||
--radius--xl: 12px;
|
||||
--radius--lg: 8px;
|
||||
--radius: 4px;
|
||||
--radius--sm: 2px;
|
||||
--border-color: var(--color--foreground);
|
||||
--border-color--light: var(--color--foreground--tint-1);
|
||||
|
||||
--border-style: solid;
|
||||
--border-width: 1px;
|
||||
--border: var(--border-width) var(--border-style) var(--color--foreground);
|
||||
|
||||
--font-size--4xs: 0.5rem;
|
||||
--font-size--3xs: 0.625rem;
|
||||
--font-size--2xs: 0.75rem;
|
||||
--font-size--xs: 0.8125rem;
|
||||
--font-size--sm: 0.875rem;
|
||||
--font-size--md: 1rem;
|
||||
--font-size--lg: 1.125rem;
|
||||
--font-size--xl: 1.25rem;
|
||||
--font-size--2xl: 1.75rem;
|
||||
|
||||
--line-height--xs: 1;
|
||||
--line-height--sm: 1.25;
|
||||
--line-height--md: 1.3;
|
||||
--line-height--lg: 1.35;
|
||||
--line-height--xl: 1.5;
|
||||
|
||||
--font-weight--regular: 400;
|
||||
--font-weight--medium: 500;
|
||||
--font-weight--bold: 600;
|
||||
--font-family: InterVariable, sans-serif;
|
||||
--font-family--monospace:
|
||||
CommitMono, ui-monospace, Menlo, Consolas, 'DejaVu Sans Mono', monospace;
|
||||
|
||||
--spacing--5xs: 0.125rem;
|
||||
--spacing--4xs: 0.25rem;
|
||||
--spacing--3xs: 0.375rem;
|
||||
--spacing--2xs: 0.5rem;
|
||||
--spacing--xs: 0.75rem;
|
||||
--spacing--sm: 1rem;
|
||||
--spacing--md: 1.25rem;
|
||||
--spacing--lg: 1.5rem;
|
||||
--spacing--xl: 2rem;
|
||||
--spacing--2xl: 3rem;
|
||||
--spacing--3xl: 4rem;
|
||||
--spacing--4xl: 8rem;
|
||||
--spacing--5xl: 16rem;
|
||||
|
||||
// Secondary tokens
|
||||
|
||||
// LangChain
|
||||
|
|
@ -235,15 +287,15 @@
|
|||
|
||||
// Tag
|
||||
--tag-height: 20px;
|
||||
--tag-padding: 0 var(--spacing-4xs);
|
||||
--tag-padding: 0 var(--spacing--4xs);
|
||||
--tag-background-color: var(--p--color--gray-040);
|
||||
--tag-background-hover-color: var(--p--color--gray-070);
|
||||
--tag-border-color: var(--p--color--gray-070);
|
||||
--tag-border-hover-color: var(--p--color--gray-120);
|
||||
--tag-border-radius: var(--border-radius-base);
|
||||
--tag-border-radius: var(--radius);
|
||||
--tag-text-color: var(--color--text);
|
||||
--tag-font-size: var(--font-size-2xs);
|
||||
--tag-font-weight: var(--font-weight-regular);
|
||||
--tag-font-size: var(--font-size--2xs);
|
||||
--tag-font-weight: var(--font-weight--regular);
|
||||
--tag-line-height: 0;
|
||||
|
||||
// Variables
|
||||
|
|
@ -596,7 +648,6 @@
|
|||
--color-info-tint-2: var(--p--color--gray-040);
|
||||
--color-grey: var(--p--color--gray-200);
|
||||
--color-light-grey: var(--p--color--gray-120);
|
||||
--color-neutral: var(--p--color--gray-490);
|
||||
--color-configurable-node-name: var(--color--text--shade-1);
|
||||
--color-secondary-link: var(--color--secondary);
|
||||
--color-secondary-link-hover: var(--color--secondary--shade-1);
|
||||
|
|
@ -606,92 +657,6 @@
|
|||
--color-menu-hover-background: var(--p--color--gray-120);
|
||||
--color-menu-active-background: var(--p--color--gray-120);
|
||||
|
||||
// Generated Color Shades from 50 to 950
|
||||
// Not yet used in design system
|
||||
@each $color in ('neutral', 'success', 'warning', 'danger') {
|
||||
@each $shade
|
||||
in (
|
||||
50,
|
||||
100,
|
||||
150,
|
||||
200,
|
||||
250,
|
||||
300,
|
||||
350,
|
||||
400,
|
||||
450,
|
||||
500,
|
||||
550,
|
||||
600,
|
||||
650,
|
||||
700,
|
||||
750,
|
||||
800,
|
||||
850,
|
||||
900,
|
||||
950
|
||||
)
|
||||
{
|
||||
--color-#{$color}-#{$shade}-l: #{math.div($shade, 10)}#{'%'};
|
||||
--color-#{$color}-#{$shade}: hsl(
|
||||
var(--color-#{$color}-h),
|
||||
var(--color-#{$color}-s),
|
||||
var(--color-#{$color}-#{$shade}-l)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
--box-shadow-base: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
|
||||
--box-shadow-dark: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.12);
|
||||
--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.07);
|
||||
|
||||
--border-radius-xlarge: 12px;
|
||||
--border-radius-large: 8px;
|
||||
--border-radius-base: 4px;
|
||||
--border-radius-small: 2px;
|
||||
--border-color-base: var(--color--foreground);
|
||||
--border-color-light: var(--color--foreground--tint-1);
|
||||
|
||||
--border-style-base: solid;
|
||||
--border-width-base: 1px;
|
||||
--border-base: var(--border-width-base) var(--border-style-base) var(--color--foreground);
|
||||
|
||||
--font-size-4xs: 0.5rem;
|
||||
--font-size-3xs: 0.625rem;
|
||||
--font-size-2xs: 0.75rem;
|
||||
--font-size-xs: 0.8125rem;
|
||||
--font-size-s: 0.875rem;
|
||||
--font-size-m: 1rem;
|
||||
--font-size-l: 1.125rem;
|
||||
--font-size-xl: 1.25rem;
|
||||
--font-size-2xl: 1.75rem;
|
||||
|
||||
--font-line-height-xsmall: 1;
|
||||
--font-line-height-compact: 1.25;
|
||||
--font-line-height-regular: 1.3;
|
||||
--font-line-height-loose: 1.35;
|
||||
--font-line-height-xloose: 1.5;
|
||||
|
||||
--font-weight-regular: 400;
|
||||
--font-weight-medium: 500;
|
||||
--font-weight-bold: 600;
|
||||
--font-family: InterVariable, sans-serif;
|
||||
--font-family-monospace: CommitMono, ui-monospace, Menlo, Consolas, 'DejaVu Sans Mono', monospace;
|
||||
|
||||
--spacing-5xs: 0.125rem;
|
||||
--spacing-4xs: 0.25rem;
|
||||
--spacing-3xs: 0.375rem;
|
||||
--spacing-2xs: 0.5rem;
|
||||
--spacing-xs: 0.75rem;
|
||||
--spacing-s: 1rem;
|
||||
--spacing-m: 1.25rem;
|
||||
--spacing-l: 1.5rem;
|
||||
--spacing-xl: 2rem;
|
||||
--spacing-2xl: 3rem;
|
||||
--spacing-3xl: 4rem;
|
||||
--spacing-4xl: 8rem;
|
||||
--spacing-5xl: 16rem;
|
||||
|
||||
// Params
|
||||
--color-icon-base: var(--color--text--tint-1);
|
||||
--color-icon-hover: var(--p--color--primary-320);
|
||||
|
|
|
|||
|
|
@ -15,8 +15,8 @@
|
|||
|
||||
@include mixins.when(bordered) {
|
||||
padding: var.$checkbox-bordered-padding;
|
||||
border-radius: var(--border-radius-base);
|
||||
border: var(--border-base);
|
||||
border-radius: var(--radius);
|
||||
border: var(--border);
|
||||
box-sizing: border-box;
|
||||
line-height: normal;
|
||||
height: var.$checkbox-bordered-height;
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
}
|
||||
|
||||
&.is-disabled {
|
||||
border-color: var(--border-color-light);
|
||||
border-color: var(--border-color--light);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
|
|
@ -190,7 +190,7 @@
|
|||
position: relative;
|
||||
border: var.$checkbox-input-border;
|
||||
border-radius: var.$checkbox-border-radius;
|
||||
margin-top: var(--spacing-5xs);
|
||||
margin-top: var(--spacing--5xs);
|
||||
box-sizing: border-box;
|
||||
width: var.$checkbox-input-width;
|
||||
height: var.$checkbox-input-height;
|
||||
|
|
@ -254,7 +254,7 @@
|
|||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
background: var.$button-default-background-color;
|
||||
border: var(--border-base);
|
||||
border: var(--border);
|
||||
border-left: 0;
|
||||
color: var.$button-default-font-color;
|
||||
-webkit-appearance: none;
|
||||
|
|
@ -322,8 +322,8 @@
|
|||
|
||||
&:first-child {
|
||||
.el-checkbox-button__inner {
|
||||
border-left: var(--border-base);
|
||||
border-radius: var(--border-radius-base) 0 0 var(--border-radius-base);
|
||||
border-left: var(--border);
|
||||
border-radius: var(--radius) 0 0 var(--radius);
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -336,7 +336,7 @@
|
|||
|
||||
&:last-child {
|
||||
.el-checkbox-button__inner {
|
||||
border-radius: 0 var(--border-radius-base) var(--border-radius-base) 0;
|
||||
border-radius: 0 var(--radius) var(--radius) 0;
|
||||
}
|
||||
}
|
||||
@include mixins.m(medium) {
|
||||
|
|
|
|||
|
|
@ -225,7 +225,7 @@
|
|||
@include button.button-small();
|
||||
|
||||
& {
|
||||
margin-right: var(--spacing-2xs);
|
||||
margin-right: var(--spacing--2xs);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -324,7 +324,7 @@
|
|||
display: block;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #999;
|
||||
border-radius: var(--border-radius-small);
|
||||
border-radius: var(--radius--sm);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
|
|
@ -369,8 +369,8 @@
|
|||
padding: 6px;
|
||||
box-sizing: content-box;
|
||||
background-color: var.$color-white;
|
||||
border: 1px solid var(--border-color-light);
|
||||
border-radius: var(--border-radius-base);
|
||||
border: 1px solid var(--border-color--light);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var.$dropdown-menu-box-shadow;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -69,11 +69,11 @@ $focus-outline-width: 3px;
|
|||
/* Box shadow
|
||||
-------------------------- */
|
||||
/// boxShadow|1|Shadow|1
|
||||
$box-shadow-base: var(--box-shadow-base);
|
||||
$box-shadow-base: var(--shadow);
|
||||
// boxShadow|1|Shadow|1
|
||||
$box-shadow-dark: var(--box-shadow-dark);
|
||||
$box-shadow-dark: var(--shadow--dark);
|
||||
/// boxShadow|1|Shadow|1
|
||||
$box-shadow-light: var(--box-shadow-light);
|
||||
$box-shadow-light: var(--shadow--light);
|
||||
|
||||
/* Fill
|
||||
-------------------------- */
|
||||
|
|
@ -84,19 +84,19 @@ $fill-base: $color-white;
|
|||
$font-path: '../../assets/fonts' !default;
|
||||
$font-display: 'auto';
|
||||
/// fontSize|1|Font Size|0
|
||||
$font-size-extra-large: var(--font-size-xl);
|
||||
$font-size-extra-large: var(--font-size--xl);
|
||||
/// fontSize|1|Font Size|0
|
||||
$font-size-large: var(--font-size-l);
|
||||
$font-size-large: var(--font-size--lg);
|
||||
/// fontSize|1|Font Size|0
|
||||
$font-size-medium: var(--font-size-m);
|
||||
$font-size-medium: var(--font-size--md);
|
||||
/// fontSize|1|Font Size|0
|
||||
$font-size-base: var(--font-size-s);
|
||||
$font-size-base: var(--font-size--sm);
|
||||
/// fontSize|1|Font Size|0
|
||||
$font-size-small: var(--font-size-xs);
|
||||
$font-size-small: var(--font-size--xs);
|
||||
/// fontSize|1|Font Size|0
|
||||
$font-size-extra-small: var(--font-size-2xs);
|
||||
$font-size-extra-small: var(--font-size--2xs);
|
||||
/// fontWeight|1|Font Weight|1
|
||||
$font-weight-primary: var(--font-weight-regular);
|
||||
$font-weight-primary: var(--font-weight--regular);
|
||||
/// fontLineHeight|1|Line Height|2
|
||||
$font-line-height-primary: 24px;
|
||||
$font-color-disabled-base: var(--color--text--tint-1);
|
||||
|
|
@ -111,7 +111,7 @@ $index-popper: 2000;
|
|||
-------------------------- */
|
||||
$disabled-fill-base: var(--disabled-fill, var(--color--background--light-2));
|
||||
$disabled-color-base: var(--disabled-color, var(--color--text));
|
||||
$disabled-border-base: var(--disabled-border, var(--border-color-base));
|
||||
$disabled-border-base: var(--disabled-border, var(--border-color));
|
||||
|
||||
/* Icon
|
||||
-------------------------- */
|
||||
|
|
@ -127,18 +127,18 @@ $checkbox-font-color: var(--color--text);
|
|||
$checkbox-input-height: 14px;
|
||||
$checkbox-input-width: 14px;
|
||||
/// borderRadius||Border|2
|
||||
$checkbox-border-radius: var(--border-radius-small);
|
||||
$checkbox-border-radius: var(--radius--sm);
|
||||
/// color||Color|0
|
||||
$checkbox-background-color: var(--color--background--light-3);
|
||||
$checkbox-input-border: var(--border-base);
|
||||
$checkbox-input-border: var(--border);
|
||||
|
||||
/// color||Color|0
|
||||
$checkbox-disabled-border-color: var(--border-color-base);
|
||||
$checkbox-disabled-border-color: var(--border-color);
|
||||
$checkbox-disabled-input-fill: var(--color--background);
|
||||
$checkbox-disabled-icon-color: var(--color--text--tint-2);
|
||||
|
||||
$checkbox-disabled-checked-input-fill: var(--border-color-light);
|
||||
$checkbox-disabled-checked-input-border-color: var(--border-color-base);
|
||||
$checkbox-disabled-checked-input-fill: var(--border-color--light);
|
||||
$checkbox-disabled-checked-input-border-color: var(--border-color);
|
||||
$checkbox-disabled-checked-icon-color: var(--color--text--tint-2);
|
||||
|
||||
/// color||Color|0
|
||||
|
|
@ -193,9 +193,9 @@ $radio-input-width: 14px;
|
|||
$radio-input-border-radius: $border-radius-circle;
|
||||
/// color||Color|0
|
||||
$radio-input-background-color: var(--color--background--light-3);
|
||||
$radio-input-border: var(--border-base);
|
||||
$radio-input-border: var(--border);
|
||||
/// color||Color|0
|
||||
$radio-input-border-color: var(--border-color-base);
|
||||
$radio-input-border-color: var(--border-color);
|
||||
/// color||Color|0
|
||||
$radio-icon-color: var(--color--text--tint-3);
|
||||
|
||||
|
|
@ -241,7 +241,7 @@ $radio-button-checked-background-color: var(--color--primary);
|
|||
$radio-button-checked-font-color: var(--color--background--light-3);
|
||||
/// color||Color|0
|
||||
$radio-button-checked-border-color: var(--color--primary);
|
||||
$radio-button-disabled-checked-fill: var(--border-color-light);
|
||||
$radio-button-disabled-checked-fill: var(--border-color--light);
|
||||
|
||||
/* Select
|
||||
-------------------------- */
|
||||
|
|
@ -279,13 +279,13 @@ $select-dropdown-empty-color: var(--color--text--tint-1);
|
|||
$select-dropdown-max-height: 274px;
|
||||
$select-dropdown-padding: 6px 0;
|
||||
$select-dropdown-empty-padding: 10px 0;
|
||||
$select-dropdown-border: solid 1px var(--border-color-base);
|
||||
$select-dropdown-border: solid 1px var(--border-color);
|
||||
|
||||
/* Alert
|
||||
-------------------------- */
|
||||
$alert-padding: 8px 16px;
|
||||
/// borderRadius||Border|2
|
||||
$alert-border-radius: var(--border-radius-base);
|
||||
$alert-border-radius: var(--radius);
|
||||
/// fontSize||Font|1
|
||||
$alert-title-font-size: 13px;
|
||||
/// fontSize||Font|1
|
||||
|
|
@ -319,7 +319,7 @@ $messagebox-content-font-size: $font-size-base;
|
|||
$messagebox-content-color: var(--color--text--shade-1);
|
||||
/// fontSize||Font|1
|
||||
$messagebox-error-font-size: 12px;
|
||||
$msgbox-padding-primary: var(--spacing-s);
|
||||
$msgbox-padding-primary: var(--spacing--sm);
|
||||
/// color||Color|0
|
||||
$messagebox-success-color: var(--color--success);
|
||||
/// color||Color|0
|
||||
|
|
@ -359,7 +359,7 @@ $notification-padding: 14px 26px 14px 13px;
|
|||
$notification-radius: 8px;
|
||||
$notification-shadow: $box-shadow-light;
|
||||
/// color||Color|0
|
||||
$notification-border-color: var(--border-color-light);
|
||||
$notification-border-color: var(--border-color--light);
|
||||
$notification-icon-size: 24px;
|
||||
$notification-close-font-size: $message-close-size;
|
||||
$notification-group-margin-left: 13px;
|
||||
|
|
@ -391,20 +391,20 @@ $notification-danger-icon-color: var(--color--danger);
|
|||
-------------------------- */
|
||||
$input-placeholder-color: var(--input-placeholder-color, var(--color--text--tint-1));
|
||||
$input-focus-border: var(--input-focus-border-color, var(--color--secondary));
|
||||
$input-border-color: var(--input-border-color, var(--border-color-base));
|
||||
$input-border-style: var(--input-border-style, var(--border-style-base));
|
||||
$input-border-width: var(--input-border-width, var(--border-width-base));
|
||||
$input-border-color: var(--input-border-color, var(--border-color));
|
||||
$input-border-style: var(--input-border-style, var(--border-style));
|
||||
$input-border-width: var(--input-border-width, var(--border-width));
|
||||
$input-border: $input-border-color $input-border-style $input-border-width;
|
||||
$input-border-right-color: var(
|
||||
--input-border-right-color,
|
||||
var(--input-border-color, var(--border-color-base))
|
||||
var(--input-border-color, var(--border-color))
|
||||
);
|
||||
$input-border-bottom-color: var(
|
||||
--input-border-bottom-color,
|
||||
var(--input-border-color, var(--border-color-base))
|
||||
var(--input-border-color, var(--border-color))
|
||||
);
|
||||
|
||||
$input-font-size: var(--input-font-size, var(--font-size-s));
|
||||
$input-font-size: var(--input-font-size, var(--font-size--sm));
|
||||
/// color||Color|0
|
||||
$input-font-color: var(--input-font-color, var(--color--text--shade-1));
|
||||
/// height||Other|4
|
||||
|
|
@ -412,24 +412,24 @@ $input-width: 140px;
|
|||
/// height||Other|4
|
||||
$input-height: 40px;
|
||||
/// borderRadius||Border|2
|
||||
$input-border-radius: var(--input-border-radius, var(--border-radius-base));
|
||||
$input-border-radius: var(--input-border-radius, var(--radius));
|
||||
$input-border-top-left-radius: var(
|
||||
--input-border-top-left-radius,
|
||||
var(--input-border-radius, var(--border-radius-base))
|
||||
var(--input-border-radius, var(--radius))
|
||||
);
|
||||
$input-border-top-right-radius: var(
|
||||
--input-border-top-right-radius,
|
||||
var(--input-border-radius, var(--border-radius-base)),
|
||||
var(--input-border-radius, var(--radius)),
|
||||
);
|
||||
$input-border-bottom-left-radius: var(
|
||||
--input-border-bottom-left-radius,
|
||||
var(--input-border-radius, var(--border-radius-base)),
|
||||
var(--input-border-radius, var(--radius)),
|
||||
);
|
||||
$input-border-bottom-right-radius: var(
|
||||
--input-border-bottom-right-radius,
|
||||
var(--input-border-radius, var(--border-radius-base)),
|
||||
var(--input-border-radius, var(--radius)),
|
||||
);
|
||||
$input-border-radius: var(--input-border-radius, var(--border-radius-base));
|
||||
$input-border-radius: var(--input-border-radius, var(--radius));
|
||||
$input-border-color-hover: $border-color-hover;
|
||||
/// color||Color|0
|
||||
$input-background-color: var(--input-background-color, var(--color--foreground--tint-2));
|
||||
|
|
@ -470,8 +470,8 @@ $cascader-menu-font-color: var(--color--text--shade-1);
|
|||
$cascader-menu-selected-font-color: var(--color--primary);
|
||||
$cascader-menu-fill: $fill-base;
|
||||
$cascader-menu-font-size: $font-size-base;
|
||||
$cascader-menu-radius: var(--border-radius-base);
|
||||
$cascader-menu-border: solid 1px var(--border-color-base);
|
||||
$cascader-menu-radius: var(--radius);
|
||||
$cascader-menu-border: solid 1px var(--border-color);
|
||||
$cascader-menu-shadow: $box-shadow-light;
|
||||
$cascader-node-background-hover: $background-color-base;
|
||||
$cascader-node-color-disabled: var(--color--text--tint-2);
|
||||
|
|
@ -502,15 +502,15 @@ $tab-vertical-header-count-fill: var(--color--text--tint-1);
|
|||
|
||||
/* Button
|
||||
-------------------------- */
|
||||
$button-font-size: var(--button-font-size, var(--font-size-s));
|
||||
$button-padding-vertical: var(--button-padding-vertical, var(--spacing-xs));
|
||||
$button-padding-horizontal: var(--button-padding-horizontal, var(--spacing-m));
|
||||
$button-font-size: var(--button-font-size, var(--font-size--sm));
|
||||
$button-padding-vertical: var(--button-padding-vertical, var(--spacing--xs));
|
||||
$button-padding-horizontal: var(--button-padding-horizontal, var(--spacing--md));
|
||||
$button-border-radius: var(--button-border-radius, 4px);
|
||||
|
||||
/// fontSize||Font|1
|
||||
$button-medium-font-size: $font-size-base;
|
||||
/// borderRadius||Border|2
|
||||
$button-medium-border-radius: var(--border-radius-base);
|
||||
$button-medium-border-radius: var(--radius);
|
||||
/// padding||Spacing|3
|
||||
$button-medium-padding-vertical: 10px;
|
||||
/// padding||Spacing|3
|
||||
|
|
@ -518,14 +518,14 @@ $button-medium-padding-horizontal: 20px;
|
|||
|
||||
/// fontSize||Font|1
|
||||
$button-small-font-size: 12px;
|
||||
$button-small-border-radius: #{var(--border-radius-base) - 1};
|
||||
$button-small-border-radius: #{var(--radius) - 1};
|
||||
/// padding||Spacing|3
|
||||
$button-small-padding-vertical: 9px;
|
||||
/// padding||Spacing|3
|
||||
$button-small-padding-horizontal: 15px;
|
||||
/// fontSize||Font|1
|
||||
$button-mini-font-size: 12px;
|
||||
$button-mini-border-radius: #{var(--border-radius-base) - 1};
|
||||
$button-mini-border-radius: #{var(--radius) - 1};
|
||||
/// padding||Spacing|3
|
||||
$button-mini-padding-vertical: 7px;
|
||||
/// padding||Spacing|3
|
||||
|
|
@ -601,7 +601,7 @@ $button-default-font-color: var(--color--text--shade-1); // ! Actually used by c
|
|||
/// color||Color|0
|
||||
$button-default-background-color: $color-white; // ! Actually used by checkbox
|
||||
/// color||Color|0
|
||||
// $button-default-border-color: var(--border-color-base); // ! Never used
|
||||
// $button-default-border-color: var(--border-color); // ! Never used
|
||||
|
||||
/// color||Color|0
|
||||
// $button-disabled-font-color: var(--button-disabled-color, var(--color--text--shade-1));
|
||||
|
|
@ -673,13 +673,13 @@ $dialog-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
|||
/// fontSize||Font|1
|
||||
$dialog-content-font-size: 14px;
|
||||
/// padding||Spacing|3
|
||||
$dialog-padding-primary: var(--spacing-l);
|
||||
$dialog-close-top: var(--dialog-close-top, var(--spacing-l));
|
||||
$dialog-padding-primary: var(--spacing--lg);
|
||||
$dialog-close-top: var(--dialog-close-top, var(--spacing--lg));
|
||||
|
||||
/* Table
|
||||
-------------------------- */
|
||||
/// color||Color|0
|
||||
$table-border-color: var(--border-color-light);
|
||||
$table-border-color: var(--border-color--light);
|
||||
$table-border: 1px solid $table-border-color;
|
||||
/// color||Color|0
|
||||
$table-font-color: var(--color--text--shade-1);
|
||||
|
|
@ -696,7 +696,7 @@ $table-fixed-box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
|
|||
/* Pagination
|
||||
-------------------------- */
|
||||
/// fontSize||Font|1
|
||||
$pagination-font-size: var(--font-size-2xs);
|
||||
$pagination-font-size: var(--font-size--2xs);
|
||||
/// color||Color|0
|
||||
$pagination-background-color: $color-white;
|
||||
/// color||Color|0
|
||||
|
|
@ -729,10 +729,10 @@ $popover-background-color: $color-white;
|
|||
/// fontSize||Font|1
|
||||
$popover-font-size: $font-size-base;
|
||||
/// color||Color|0
|
||||
$popover-border-color: var(--border-color-light);
|
||||
$popover-border-color: var(--border-color--light);
|
||||
$popover-arrow-size: 6px;
|
||||
/// padding||Spacing|3
|
||||
$popover-padding: var(--spacing-s);
|
||||
$popover-padding: var(--spacing--sm);
|
||||
$popover-padding-large: 18px 20px;
|
||||
/// fontSize||Font|1
|
||||
$popover-title-font-size: 16px;
|
||||
|
|
@ -766,7 +766,7 @@ $tag-warning-color: var(--color--warning);
|
|||
/// color||Color|0
|
||||
$tag-danger-color: var(--color--danger);
|
||||
/// fontSize||Font|1
|
||||
$tag-font-size: var(--font-size-xs);
|
||||
$tag-font-size: var(--font-size--xs);
|
||||
$tag-border-radius: 4px;
|
||||
$tag-padding: 16px;
|
||||
|
||||
|
|
@ -800,7 +800,7 @@ $badge-size: 18px;
|
|||
/* Card
|
||||
--------------------------*/
|
||||
/// color||Color|0
|
||||
$card-border-color: var(--border-color-light);
|
||||
$card-border-color: var(--border-color--light);
|
||||
$card-border-radius: 4px;
|
||||
/// padding||Spacing|3
|
||||
$card-padding: 20px;
|
||||
|
|
@ -810,7 +810,7 @@ $card-padding: 20px;
|
|||
/// color||Color|0
|
||||
$slider-main-background-color: var(--color--primary);
|
||||
/// color||Color|0
|
||||
$slider-runway-background-color: var(--border-color-base);
|
||||
$slider-runway-background-color: var(--border-color);
|
||||
$slider-button-hover-color: function.saturation(
|
||||
--color--primary-h,
|
||||
--color--primary-s,
|
||||
|
|
@ -838,7 +838,7 @@ $steps-padding: 20px;
|
|||
--------------------------*/
|
||||
/// fontSize||Font|1
|
||||
$menu-item-font-size: $font-size-base;
|
||||
$menu-item-font-weight: var(--menu-item-font-weight, var(--font-weight-regular));
|
||||
$menu-item-font-weight: var(--menu-item-font-weight, var(--font-weight--regular));
|
||||
/// color||Color|0
|
||||
$menu-item-font-color: var(--menu-font-color, var(--color--text--shade-1));
|
||||
$menu-item-icon-font-color: var(--menu-item-font-color, var(--color--text--tint-1));
|
||||
|
|
@ -847,7 +847,7 @@ $menu-background-color: var(--menu-background-color, var(--color--background--li
|
|||
$menu-item-hover-fill: var(--menu-item-hover-fill, transparent);
|
||||
$menu-item-hover-font-color: var(--menu-item-hover-font-color, var(--color--text--shade-1));
|
||||
$menu-item-active-font-color: var(--menu-item-active-font-color, var(--color--primary));
|
||||
$menu-item-active-font-weight: var(--font-weight-regular);
|
||||
$menu-item-active-font-weight: var(--font-weight--regular);
|
||||
$menu-item-active-background-color: var(--menu-item-active-background-color, transparent);
|
||||
$menu-item-border-radius: var(--menu-item-border-radius, 0);
|
||||
$menu-item-height: var(--menu-item-height, 56px);
|
||||
|
|
@ -874,9 +874,9 @@ $datepicker-icon-color: var(--color--text--shade-1);
|
|||
$datepicker-border-color: $disabled-border-base;
|
||||
$datepicker-inner-border-color: var(--color--foreground);
|
||||
/// color||Color|0
|
||||
$datepicker-inrange-background-color: var(--border-color-light);
|
||||
$datepicker-inrange-background-color: var(--border-color--light);
|
||||
/// color||Color|0
|
||||
$datepicker-inrange-hover-background-color: var(--border-color-light);
|
||||
$datepicker-inrange-hover-background-color: var(--border-color--light);
|
||||
/// color||Color|0
|
||||
$datepicker-active-color: var(--color--primary);
|
||||
/// color||Color|0
|
||||
|
|
@ -913,7 +913,7 @@ $carousel-indicator-out-color: $border-color-hover;
|
|||
/* Collapse
|
||||
--------------------------*/
|
||||
/// color||Color|0
|
||||
$collapse-border-color: var(--border-color-light);
|
||||
$collapse-border-color: var(--border-color--light);
|
||||
/// height||Other|4
|
||||
$collapse-header-height: 48px;
|
||||
/// color||Color|0
|
||||
|
|
@ -931,8 +931,8 @@ $collapse-content-font-color: var(--color--text--shade-1);
|
|||
|
||||
/* Transfer
|
||||
--------------------------*/
|
||||
$transfer-border-color: var(--border-color-light);
|
||||
$transfer-border-radius: var(--border-radius-base);
|
||||
$transfer-border-color: var(--border-color--light);
|
||||
$transfer-border-radius: var(--radius);
|
||||
/// height||Other|4
|
||||
$transfer-panel-width: 200px;
|
||||
/// height||Other|4
|
||||
|
|
@ -964,7 +964,7 @@ $main-padding: 20px;
|
|||
--------------------------*/
|
||||
$timeline-node-size-normal: 12px;
|
||||
$timeline-node-size-large: 14px;
|
||||
$timeline-node-color: var(--border-color-base);
|
||||
$timeline-node-color: var(--border-color);
|
||||
|
||||
/* Backtop
|
||||
--------------------------*/
|
||||
|
|
@ -973,7 +973,7 @@ $backtop-background-color: $color-white;
|
|||
/// color||Color|0
|
||||
$backtop-font-color: var(--color--primary);
|
||||
/// color||Color|0
|
||||
$backtop-hover-background-color: var(--border-color-light);
|
||||
$backtop-hover-background-color: var(--border-color--light);
|
||||
|
||||
/* Link
|
||||
--------------------------*/
|
||||
|
|
@ -1021,7 +1021,7 @@ $avatar-text-font-size: 14px;
|
|||
/// fontSize||Font Size|1
|
||||
$avatar-icon-font-size: 18px;
|
||||
/// borderRadius||Border|2
|
||||
$avatar-border-radius: var(--border-radius-base);
|
||||
$avatar-border-radius: var(--radius);
|
||||
/// size|1|Avatar Size|3
|
||||
$avatar-large-size: 40px;
|
||||
/// size|1|Avatar Size|3
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@
|
|||
@include mixins.m(bordered) {
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: solid 1px var(--border-color-light);
|
||||
border-bottom: solid 1px var(--border-color--light);
|
||||
|
||||
& + .el-picker-panel__content {
|
||||
margin-top: 0;
|
||||
|
|
@ -59,7 +59,7 @@
|
|||
|
||||
@include mixins.e(header-label) {
|
||||
font-size: 16px;
|
||||
font-weight: var(--font-weight-medium);
|
||||
font-weight: var(--font-weight--medium);
|
||||
padding: 0 5px;
|
||||
line-height: 22px;
|
||||
text-align: center;
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@
|
|||
|
||||
div {
|
||||
font-size: 16px;
|
||||
font-weight: var(--font-weight-medium);
|
||||
font-weight: var(--font-weight--medium);
|
||||
margin-right: 50px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@
|
|||
position: relative;
|
||||
span {
|
||||
color: var(--color--primary);
|
||||
font-weight: var(--font-weight-bold);
|
||||
font-weight: var(--font-weight--bold);
|
||||
}
|
||||
&.start-date span,
|
||||
&.end-date span {
|
||||
|
|
@ -145,7 +145,7 @@
|
|||
th {
|
||||
padding: 5px;
|
||||
color: var.$datepicker-header-font-color;
|
||||
font-weight: var(--font-weight-regular);
|
||||
border-bottom: solid 1px var(--border-color-light);
|
||||
font-weight: var(--font-weight--regular);
|
||||
border-bottom: solid 1px var(--border-color--light);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
&.today {
|
||||
.cell {
|
||||
color: var(--color--primary);
|
||||
font-weight: var(--font-weight-bold);
|
||||
font-weight: var(--font-weight--bold);
|
||||
}
|
||||
&.start-date .cell,
|
||||
&.end-date .cell {
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
border: 1px solid var.$datepicker-border-color;
|
||||
box-shadow: var.$box-shadow-light;
|
||||
background: var.$color-white;
|
||||
border-radius: var(--border-radius-base);
|
||||
border-radius: var(--radius);
|
||||
line-height: 30px;
|
||||
margin: 5px 0;
|
||||
|
||||
|
|
@ -106,7 +106,7 @@
|
|||
|
||||
& {
|
||||
vertical-align: middle;
|
||||
margin-left: var(--spacing-2xs);
|
||||
margin-left: var(--spacing--2xs);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,8 +32,8 @@
|
|||
box-sizing: border-box;
|
||||
padding-top: 6px;
|
||||
text-align: left;
|
||||
border-top: 1px solid var(--border-color-base);
|
||||
border-bottom: 1px solid var(--border-color-base);
|
||||
border-top: 1px solid var(--border-color);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
&::after {
|
||||
|
|
@ -80,7 +80,7 @@
|
|||
color: var(--color--text--shade-1);
|
||||
|
||||
&.confirm {
|
||||
font-weight: var(--font-weight-bold);
|
||||
font-weight: var(--font-weight--bold);
|
||||
color: var.$datepicker-active-color;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -99,7 +99,7 @@
|
|||
|
||||
&.active:not(.disabled) {
|
||||
color: var(--color--text--shade-1);
|
||||
font-weight: var(--font-weight-bold);
|
||||
font-weight: var(--font-weight--bold);
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
&.today {
|
||||
.cell {
|
||||
color: var(--color--primary);
|
||||
font-weight: var(--font-weight-bold);
|
||||
font-weight: var(--font-weight--bold);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue