From df6035cd69b91a0488053dbb195495b4a2cd2eb6 Mon Sep 17 00:00:00 2001 From: EugeniyKiyashko Date: Fri, 4 Sep 2026 01:08:18 +0400 Subject: [PATCH 1/8] Styles: add the dx/no-identical-branch-declarations stylelint rule with an autofix --- packages/devextreme-scss/.stylelintrc.json | 4 +- .../no-identical-branch-declarations.test.ts | 399 ++++++++++++++++++ .../no-identical-branch-declarations.mjs | 235 +++++++++++ 3 files changed, 637 insertions(+), 1 deletion(-) create mode 100644 packages/devextreme-scss/tests/no-identical-branch-declarations.test.ts create mode 100644 packages/devextreme-scss/tools/stylelint/no-identical-branch-declarations.mjs diff --git a/packages/devextreme-scss/.stylelintrc.json b/packages/devextreme-scss/.stylelintrc.json index e34adf09d5ce..de03a5282ffa 100644 --- a/packages/devextreme-scss/.stylelintrc.json +++ b/packages/devextreme-scss/.stylelintrc.json @@ -1,7 +1,8 @@ { "plugins": [ "stylelint-scss", - "@stylistic/stylelint-plugin" + "@stylistic/stylelint-plugin", + "./tools/stylelint/no-identical-branch-declarations.mjs" ], "extends": "stylelint-config-standard-scss", "ignoreFiles": "!**/*.{css,scss}", @@ -18,6 +19,7 @@ "@stylistic/declaration-colon-space-after": "always-single-line", "@stylistic/declaration-colon-space-before": "never", "declaration-no-important": true, + "dx/no-identical-branch-declarations": true, "font-family-name-quotes": "always-unless-keyword", "@stylistic/function-comma-space-after": "always-single-line", "@stylistic/indentation": [2, { "ignore": ["inside-parens"] }], diff --git a/packages/devextreme-scss/tests/no-identical-branch-declarations.test.ts b/packages/devextreme-scss/tests/no-identical-branch-declarations.test.ts new file mode 100644 index 000000000000..cdd790ef96e2 --- /dev/null +++ b/packages/devextreme-scss/tests/no-identical-branch-declarations.test.ts @@ -0,0 +1,399 @@ +import { execFileSync } from 'child_process'; +import { mkdtempSync, readFileSync, writeFileSync } from 'fs'; +import { tmpdir } from 'os'; +import { join } from 'path'; + +const packageRoot = process.cwd(); +const ruleName = 'dx/no-identical-branch-declarations'; +const stylelintBin = join(packageRoot, 'node_modules', '.bin', 'stylelint'); + +const fixture = mkdtempSync(join(tmpdir(), 'no-identical-branch-declarations-')); +const configPath = join(fixture, 'config.json'); +writeFileSync(configPath, JSON.stringify({ + customSyntax: require.resolve('postcss-scss', { paths: [require.resolve('stylelint-scss')] }), + plugins: [join(packageRoot, 'tools', 'stylelint', 'no-identical-branch-declarations.mjs')], + rules: { [ruleName]: true }, +})); + +type Warning = { line: number; rule: string; text: string }; +type Result = { warnings: Warning[]; output: string }; + +const lint = (name: string, source: string, fix = false): Result => { + const file = join(fixture, name); + const reportFile = join(fixture, `${name}.report.json`); + writeFileSync(file, source); + writeFileSync(reportFile, ''); + const args = [file, '--config', configPath, '--formatter', 'json', '--output-file', reportFile, ...(fix ? ['--fix'] : [])]; + try { + execFileSync(stylelintBin, args, { stdio: 'ignore' }); + } catch (error) { + if ((error as { status?: number }).status !== 2) throw error; + } + const [{ warnings }] = JSON.parse(readFileSync(reportFile, 'utf8') || '[{"warnings":[]}]'); + return { + warnings: warnings.map(({ line, rule, text }: Warning) => ({ line, rule, text })), + output: readFileSync(file, 'utf8'), + }; +}; + +const fix = (name: string, source: string): Result => lint(name, source, true); + +const scss = (...rows: string[]): string => `${rows.join('\n')}\n`; + +test('a variable set to one value in every @else branch is reported once, on the first branch', () => { + const { warnings } = lint('else-chain.scss', scss( + '$same: null !default;', + '$differs: null !default;', + '', + '@if $size == "default" {', + ' $same: 8px !default;', + ' $differs: 8px !default;', + '}', + '', + '@else if $size == "compact" {', + ' $same: 8px !default;', + ' $differs: 4px !default;', + '}', + )); + + expect(warnings).toEqual([{ + line: 5, + rule: ruleName, + text: `"$same" has the same value in all 2 branches of the @if chain; declare it once outside the chain (${ruleName})`, + }]); +}); + +test('consecutive @if blocks testing one variable against different constants form a chain', () => { + const { warnings } = lint('if-if.scss', scss( + '@if $size == "default" {', + ' $same: 8px !default;', + '}', + '', + '@if $size == "compact" {', + ' $same: 8px !default;', + '}', + '', + '@if $mode == "dark" {', + ' $same: 8px !default;', + '}', + )); + + expect(warnings.map((warning) => warning.line)).toEqual([2]); +}); + +test('nothing is reported for a value that differs, a variable missing from a branch, or a repeated constant', () => { + const { warnings } = lint('clean.scss', scss( + '@if $size == "default" {', + ' $a: 8px !default;', + ' $only-here: 1px !default;', + '}', + '', + '@else if $size == "compact" {', + ' $a: 4px !default;', + '}', + '', + '@if $size == "default" {', + ' $b: 8px !default;', + '}', + '', + '@if $size == "default" {', + ' $b: 8px !default;', + '}', + )); + + expect(warnings).toEqual([]); +}); + +test('--fix replaces the null pre-declaration with a literal and removes the emptied chain', () => { + const { warnings, output } = fix('fix-literal.scss', scss( + '$x: null !default;', + '$keep: 1px !default;', + '', + '@if $size == "default" {', + ' $x: ds.$spacing-480 !default;', + '}', + '', + '@else if $size == "compact" {', + ' $x: ds.$spacing-480 !default;', + '}', + )); + + expect(warnings).toEqual([]); + expect(output).toBe(scss( + '$x: ds.$spacing-480 !default;', + '$keep: 1px !default;', + )); +}); + +test('--fix puts a value that reads a branch-bound variable after the chain', () => { + const { output } = fix('fix-after.scss', scss( + '$height: null !default;', + '$handle: null !default;', + '', + '@if $size == "default" {', + ' $height: 20px !default;', + ' $handle: $height !default;', + '}', + '', + '@else if $size == "compact" {', + ' $height: 18px !default;', + ' $handle: $height !default;', + '}', + )); + + expect(output).toBe(scss( + '$height: null !default;', + '', + '@if $size == "default" {', + ' $height: 20px !default;', + '}', + '', + '@else if $size == "compact" {', + ' $height: 18px !default;', + '}', + '', + '$handle: $height !default;', + )); +}); + +test('--fix moves a value that reads a variable declared below its pre-declaration to just before the chain', () => { + const { output } = fix('fix-before.scss', scss( + '$padding: null !default;', + '$margin: 0 !default;', + '', + '@if $size == "default" {', + ' $padding: $margin !default;', + ' $width: 36px !default;', + '}', + '', + '@if $size == "compact" {', + ' $padding: $margin !default;', + ' $width: 32px !default;', + '}', + )); + + expect(output).toBe(scss( + '$margin: 0 !default;', + '$padding: $margin !default;', + '', + '@if $size == "default" {', + ' $width: 36px !default;', + '}', + '', + '@if $size == "compact" {', + ' $width: 32px !default;', + '}', + )); +}); + +test('--fix only removes branch declarations that a non-null default above the chain already overrides', () => { + const { output } = fix('fix-dead.scss', scss( + '$x: 10px !default;', + '', + '@if $size == "default" {', + ' $x: 12px !default;', + '}', + '', + '@else if $size == "compact" {', + ' $x: 12px !default;', + '}', + )); + + expect(output).toBe(scss('$x: 10px !default;')); +}); + +test('--fix settles a duplicate that only appears in the outer chain after the inner one is hoisted', () => { + const { warnings, output } = fix('fix-nested.scss', scss( + '$focused: null !default;', + '', + '@if $mode == "light" {', + ' @if $color == "blue" {', + ' $hover: #00f !default;', + ' $focused: $hover !default;', + ' }', + '', + ' @if $color == "saas" {', + ' $hover: #0ff !default;', + ' $focused: $hover !default;', + ' }', + '}', + '', + '@if $mode == "dark" {', + ' @if $color == "blue" {', + ' $hover: #008 !default;', + ' $focused: $hover !default;', + ' }', + '', + ' @if $color == "saas" {', + ' $hover: #088 !default;', + ' $focused: $hover !default;', + ' }', + '}', + )); + + expect(warnings).toEqual([]); + expect(output).toBe(scss( + '@if $mode == "light" {', + ' @if $color == "blue" {', + ' $hover: #00f !default;', + ' }', + '', + ' @if $color == "saas" {', + ' $hover: #0ff !default;', + ' }', + '}', + '', + '@if $mode == "dark" {', + ' @if $color == "blue" {', + ' $hover: #008 !default;', + ' }', + '', + ' @if $color == "saas" {', + ' $hover: #088 !default;', + ' }', + '}', + '', + '$focused: $hover !default;', + )); +}); + +test('--fix keeps a declaration behind the chain ahead of the declarations that read it', () => { + const { warnings, output } = fix('fix-order.scss', scss( + '$item-bg: null !default;', + '$disabled-bg: null !default;', + '$disabled-border: null !default;', + '', + '@if $mode == "light" {', + ' $item-bg: #eee !default;', + ' $disabled-bg: $item-bg !default;', + ' $disabled-border: $disabled-bg !default;', + '}', + '', + '@if $mode == "dark" {', + ' $item-bg: #333 !default;', + ' $disabled-bg: $item-bg !default;', + ' $disabled-border: $disabled-bg !default;', + '}', + )); + + expect(warnings).toEqual([]); + expect(output).toBe(scss( + '$item-bg: null !default;', + '', + '@if $mode == "light" {', + ' $item-bg: #eee !default;', + '}', + '', + '@if $mode == "dark" {', + ' $item-bg: #333 !default;', + '}', + '', + '$disabled-bg: $item-bg !default;', + '$disabled-border: $disabled-bg !default;', + )); +}); + +test('a duplicate that a branch-bound declaration still reads is reported but not moved', () => { + const source = scss( + '$item-bg: null !default;', + '$disabled-bg: null !default;', + '$hovered-bg: null !default;', + '', + '@if $mode == "light" {', + ' $item-bg: #eee !default;', + ' $disabled-bg: $item-bg !default;', + ' $hovered-bg: color.adjust($disabled-bg, $lightness: -4%) !default;', + '}', + '', + '@if $mode == "dark" {', + ' $item-bg: #333 !default;', + ' $disabled-bg: $item-bg !default;', + ' $hovered-bg: color.adjust($disabled-bg, $lightness: 4%) !default;', + '}', + ); + + const { warnings, output } = fix('fix-blocked.scss', source); + + expect(warnings.map((warning) => warning.line)).toEqual([7]); + expect(output).toBe(source); +}); + +test('--fix keeps a declaration under its doc comment when what it reads is not reassigned in between', () => { + const { output } = fix('fix-doc-in-place.scss', scss( + '@use "../colors" as *;', + '', + '/**', + '* $name 100. Background color', + '* $type color', + '*/', + '$common-bg: null !default;', + '', + '@if $mode == "light" {', + ' $common-bg: $base-bg !default;', + ' $accent: #00f !default;', + '}', + '', + '@if $mode == "dark" {', + ' $common-bg: $base-bg !default;', + ' $accent: #0ff !default;', + '}', + )); + + expect(output).toBe(scss( + '@use "../colors" as *;', + '', + '/**', + '* $name 100. Background color', + '* $type color', + '*/', + '$common-bg: $base-bg !default;', + '', + '@if $mode == "light" {', + ' $accent: #00f !default;', + '}', + '', + '@if $mode == "dark" {', + ' $accent: #0ff !default;', + '}', + )); +}); + +test('--fix takes the doc comment along when the declaration has to move', () => { + const { output } = fix('fix-doc-moves.scss', scss( + '/**', + '* $name 302. Divider color', + '* $type color', + '*/', + '$divider: null !default;', + '', + '$border: null !default;', + '', + '@if $mode == "light" {', + ' $border: #ccc !default;', + ' $divider: $border !default;', + '}', + '', + '@if $mode == "dark" {', + ' $border: #444 !default;', + ' $divider: $border !default;', + '}', + )); + + expect(output).toBe(scss( + '$border: null !default;', + '', + '@if $mode == "light" {', + ' $border: #ccc !default;', + '}', + '', + '@if $mode == "dark" {', + ' $border: #444 !default;', + '}', + '', + '/**', + '* $name 302. Divider color', + '* $type color', + '*/', + '$divider: $border !default;', + )); +}); diff --git a/packages/devextreme-scss/tools/stylelint/no-identical-branch-declarations.mjs b/packages/devextreme-scss/tools/stylelint/no-identical-branch-declarations.mjs new file mode 100644 index 000000000000..4bef27666838 --- /dev/null +++ b/packages/devextreme-scss/tools/stylelint/no-identical-branch-declarations.mjs @@ -0,0 +1,235 @@ +import stylelint from 'stylelint'; + +const { + createPlugin, + utils: { report, ruleMessages, validateOptions }, +} = stylelint; + +const ruleName = 'dx/no-identical-branch-declarations'; + +const messages = ruleMessages(ruleName, { + rejected: (name, count) => `"${name}" has the same value in all ${count} branches of the @if chain; declare it once outside the chain`, +}); + +const meta = { fixable: true }; + +const isElse = (node) => node.type === 'atrule' && node.name === 'else'; +const isIf = (node) => node.type === 'atrule' && node.name === 'if'; +const isVariable = (node) => node.type === 'decl' && node.prop.startsWith('$'); +const isEmpty = (block) => (block.nodes ?? []).length === 0; +const normalise = (value) => value.replace(/\s+/g, ' ').trim(); +const isNull = (value) => /^null(\s+!default)?$/.test(normalise(value)); +const hasDefaultFlag = (value) => /!default\b/.test(value); +const indentOf = (node) => (node.raws.before ?? '').match(/[ \t]*$/)[0]; + +const localReferences = (value) => [...value.matchAll(/(^|[^\w.-])(\$[\w-]+)/g)].map((match) => match[2]); + +const equalityTest = (atRule) => { + const match = atRule.params.trim().match(/^(\$[\w-]+)\s*==\s*("[^"]*"|'[^']*'|[\w.-]+)$/); + return match && { variable: match[1], literal: match[2] }; +}; + +const chainOf = (ifRule) => { + const branches = [ifRule]; + let next = ifRule.next(); + + while (next && (next.type === 'comment' || isElse(next))) { + if (isElse(next)) branches.push(next); + next = next.next(); + } + if (branches.length > 1) return { branches, independent: false }; + + const test = equalityTest(ifRule); + const literals = new Set([test?.literal]); + + while (test && next && (next.type === 'comment' || isIf(next))) { + if (isIf(next)) { + const other = equalityTest(next); + if (other?.variable !== test.variable || literals.has(other.literal)) break; + literals.add(other.literal); + branches.push(next); + } + next = next.next(); + } + return { branches, independent: true }; +}; + +const collectChains = (root) => { + const chains = []; + const seen = new WeakSet(); + + root.walkAtRules('if', (ifRule) => { + if (seen.has(ifRule)) return; + const chain = chainOf(ifRule); + chain.branches.forEach((branch) => seen.add(branch)); + if (chain.branches.length > 1) chains.push(chain); + }); + return chains.reverse(); +}; + +const directDeclarations = (block) => { + const byName = new Map(); + (block.nodes ?? []).filter(isVariable).forEach((decl) => byName.set(decl.prop, decl)); + return byName; +}; + +const identicalDeclarations = (branches) => { + const [first, ...rest] = branches.map(directDeclarations); + const identical = new Map(); + + for (const [name, decl] of first) { + const declarations = [decl, ...rest.map((byName) => byName.get(name))]; + const value = normalise(decl.value); + if (declarations.every((other) => other && normalise(other.value) === value)) identical.set(name, declarations); + } + return identical; +}; + +const walkFinds = (branches, predicate) => branches.some((branch) => { + let found = false; + branch.walkDecls((decl) => { + if (!predicate(decl, branch)) return undefined; + found = true; + return false; + }); + return found; +}); + +const assignedInside = (branches, name) => walkFinds(branches, (decl) => decl.prop === name); + +const planMoves = (branches, identical) => { + const movable = new Set(identical.keys()); + const placement = new Map(); + + const settle = () => { + placement.clear(); + for (const name of movable) { + const behind = localReferences(identical.get(name)[0].value).some((ref) => ( + movable.has(ref) ? placement.get(ref) === 'after' : assignedInside(branches, ref) + )); + placement.set(name, behind ? 'after' : 'before'); + } + }; + const readByStaying = (name) => walkFinds(branches, (decl, branch) => ( + !(movable.has(decl.prop) && decl.parent === branch) && localReferences(decl.value).includes(name) + )); + + for (let changed = true; changed;) { + settle(); + changed = false; + for (const name of movable) { + if (placement.get(name) === 'after' && readByStaying(name)) { + movable.delete(name); + changed = true; + } + } + } + return { movable, placement }; +}; + +const earlierDeclaration = (parent, ifRule, name) => { + let found; + for (const sibling of parent.nodes) { + if (sibling === ifRule) break; + if (isVariable(sibling) && sibling.prop === name) found = sibling; + } + return found; +}; + +const declaredBetween = (parent, after, before, name) => parent.nodes + .slice(parent.index(after) + 1, parent.index(before)) + .some((node) => isVariable(node) && node.prop === name); + +const attachedComment = (decl) => { + const previous = decl.prev(); + const attached = previous?.type === 'comment' && !/\n[ \t]*\n/.test(decl.raws.before ?? ''); + return attached ? previous : undefined; +}; + +const dropEmptyBranches = (branches, independent) => { + if (independent) { + branches.filter(isEmpty).forEach((branch) => branch.remove()); + return; + } + while (branches.length && isEmpty(branches[branches.length - 1])) { + branches.pop().remove(); + } +}; + +const ruleFunction = (primary) => (root, result) => { + if (!validateOptions(result, ruleName, { actual: primary, possible: [true] })) return; + + const lastHoisted = new WeakMap(); + + for (const { branches, independent } of collectChains(root)) { + const ifRule = branches[0]; + const { parent } = ifRule; + const identical = identicalDeclarations(branches); + const { movable, placement } = planMoves(branches, identical); + + for (const [name, declarations] of identical) { + const [first] = declarations; + const earlier = earlierDeclaration(parent, ifRule, name); + const overridden = earlier !== undefined && !isNull(earlier.value); + const fixable = overridden ? declarations.every((decl) => hasDefaultFlag(decl.value)) : movable.has(name); + + const fix = () => { + const live = branches.filter((branch) => branch.parent); + const tidy = () => { + dropEmptyBranches(live, independent); + parent.raws.semicolon = true; + if (parent.type === 'root' && parent.first) parent.first.raws.before = ''; + }; + + if (overridden) { + declarations.forEach((decl) => decl.remove()); + tidy(); + return; + } + + const hoisted = first.clone(); + const references = localReferences(first.value); + const comment = earlier && attachedComment(earlier); + declarations.forEach((decl) => decl.remove()); + + const relocate = (insert, gap) => { + const indent = indentOf(ifRule); + const moved = comment?.clone({ raws: { ...comment.raws, before: `${gap}${indent}` } }); + hoisted.raws.before = moved ? `\n${indent}` : `${gap}${indent}`; + if (moved) insert(moved); + insert(hoisted, moved); + comment?.remove(); + earlier?.remove(); + }; + + if (placement.get(name) === 'after') { + const anchor = lastHoisted.get(ifRule) ?? live[live.length - 1]; + relocate((node, previous) => parent.insertAfter(previous ?? anchor, node), lastHoisted.has(ifRule) ? '\n' : '\n\n'); + lastHoisted.set(ifRule, hoisted); + } else if (earlier && !references.some((ref) => declaredBetween(parent, earlier, ifRule, ref))) { + hoisted.raws.before = earlier.raws.before; + earlier.replaceWith(hoisted); + } else { + relocate((node, previous) => (previous ? parent.insertAfter(previous, node) : parent.insertBefore(ifRule, node)), '\n'); + } + + tidy(); + }; + + report({ + message: messages.rejected, + messageArgs: [name, branches.length], + node: first, + result, + ruleName, + ...(fixable && { fix: { apply: fix, node: parent } }), + }); + } + } +}; + +ruleFunction.ruleName = ruleName; +ruleFunction.messages = messages; +ruleFunction.meta = meta; + +export default createPlugin(ruleName, ruleFunction); From be61f393effc19f09f25dc0edee1f0ea7103b437 Mon Sep 17 00:00:00 2001 From: EugeniyKiyashko Date: Fri, 4 Sep 2026 01:08:18 +0400 Subject: [PATCH 2/8] Styles: declare once what every size, mode and colour branch set to the same value --- .../scss/widgets/fluent/_sizes.scss | 4 +- .../scss/widgets/fluent/accordion/_sizes.scss | 4 +- .../scss/widgets/fluent/badge/_sizes.scss | 4 +- .../scss/widgets/fluent/button/_colors.scss | 43 +-- .../scss/widgets/fluent/button/_sizes.scss | 5 +- .../scss/widgets/fluent/calendar/_colors.scss | 5 +- .../scss/widgets/fluent/cardView/_colors.scss | 218 ++++--------- .../scss/widgets/fluent/cardView/_sizes.scss | 104 ++---- .../scss/widgets/fluent/chat/_colors.scss | 4 +- .../scss/widgets/fluent/chat/_sizes.scss | 17 +- .../widgets/fluent/fileUploader/_sizes.scss | 4 +- .../scss/widgets/fluent/form/_sizes.scss | 4 +- .../scss/widgets/fluent/gridBase/_colors.scss | 13 +- .../scss/widgets/fluent/gridBase/_sizes.scss | 8 +- .../scss/widgets/fluent/numberBox/_sizes.scss | 10 +- .../scss/widgets/fluent/popup/_sizes.scss | 10 +- .../scss/widgets/fluent/scheduler/_sizes.scss | 60 +--- .../scss/widgets/fluent/splitter/_colors.scss | 14 +- .../scss/widgets/fluent/switch/_sizes.scss | 13 +- .../widgets/fluent/tabs/variables/_sizes.scss | 21 +- .../scss/widgets/fluent/tagBox/_sizes.scss | 4 +- .../widgets/fluent/textEditor/_colors.scss | 4 +- .../widgets/fluent/textEditor/_sizes.scss | 8 +- .../scss/widgets/fluent/tooltip/_sizes.scss | 4 +- .../widgets/fluent/typography/_sizes.scss | 4 +- .../scss/widgets/generic/cardView/_sizes.scss | 116 ++----- .../scss/widgets/generic/chat/_sizes.scss | 5 +- .../scss/widgets/generic/checkBox/_sizes.scss | 4 +- .../widgets/generic/fileManager/_sizes.scss | 4 +- .../generic/filterBuilder/_colors.scss | 10 +- .../scss/widgets/generic/gridBase/_sizes.scss | 8 +- .../generic/loadIndicator/_colors.scss | 10 +- .../widgets/generic/scheduler/_colors.scss | 21 +- .../widgets/generic/scheduler/_sizes.scss | 64 +--- .../scss/widgets/generic/slider/_colors.scss | 11 +- .../scss/widgets/generic/switch/_colors.scss | 11 +- .../generic/tabPanel/variables/_borders.scss | 50 +-- .../generic/tabs/variables/_colors.scss | 10 +- .../generic/tabs/variables/_sizes.scss | 8 +- .../borders/_borders-horizontal.scss | 264 ++-------------- .../variables/borders/_borders-vertical.scss | 264 ++-------------- .../scss/widgets/generic/tagBox/_colors.scss | 11 +- .../widgets/generic/textEditor/_sizes.scss | 4 +- .../widgets/generic/treeList/_colors.scss | 10 +- .../scss/widgets/generic/treeView/_sizes.scss | 5 +- .../scss/widgets/material/_colors.scss | 64 ++-- .../widgets/material/cardView/_colors.scss | 296 ++++++------------ .../widgets/material/cardView/_sizes.scss | 116 ++----- .../scss/widgets/material/chat/_sizes.scss | 5 +- .../widgets/material/gridBase/_colors.scss | 9 +- .../widgets/material/gridBase/_sizes.scss | 4 +- .../widgets/material/htmlEditor/_sizes.scss | 4 +- .../widgets/material/scheduler/_sizes.scss | 66 +--- .../scss/widgets/material/switch/_sizes.scss | 9 +- .../material/tabs/variables/_sizes.scss | 29 +- .../scss/widgets/material/tagBox/_sizes.scss | 4 +- .../widgets/material/treeView/_sizes.scss | 4 +- .../widgets/material/typography/_sizes.scss | 4 +- 58 files changed, 442 insertions(+), 1651 deletions(-) diff --git a/packages/devextreme-scss/scss/widgets/fluent/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/_sizes.scss index a4017a22e04a..70129095fd6d 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/_sizes.scss @@ -7,7 +7,7 @@ $fluent-base-inline-block-height: null !default; $fluent-base-icon-size: null !default; $fluent-base-icon-margin: 8px !default; $fluent-base-inline-horizontal-padding: null !default; -$fluent-base-border-radius: null !default; +$fluent-base-border-radius: 4px !default; $fluent-html-editor-add-image-dialog-base-padding: 5px !default; /** @@ -39,7 +39,6 @@ $fluent-button-icon-margin: null !default; $fluent-base-inline-block-height: 20px !default; $fluent-base-icon-size: 20px !default; $fluent-base-inline-horizontal-padding: 12px !default; - $fluent-base-border-radius: 4px !default; $fluent-button-height: 32px !default; $fluent-button-icon-size: 20px !default; $fluent-button-icon-margin: 8px !default; @@ -56,7 +55,6 @@ $fluent-button-icon-margin: null !default; $fluent-base-inline-block-height: 16px !default; $fluent-base-icon-size: 16px !default; $fluent-base-inline-horizontal-padding: 8px !default; - $fluent-base-border-radius: 4px !default; $fluent-button-height: 24px !default; $fluent-button-icon-size: 16px !default; $fluent-button-icon-margin: 4px !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent/accordion/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/accordion/_sizes.scss index 176f3edb5ad4..78b26f936b03 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/accordion/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/accordion/_sizes.scss @@ -13,7 +13,7 @@ $accordion-item-border-radius: $fluent-base-border-radius !default; * $name 10. Item expanded margin * $type text */ -$fluent-accordion-item-opened-margin: null !default; +$fluent-accordion-item-opened-margin: 0 !default; @if $size == "default" { $fluent-accordion-title-horizontal-padding: 12px !default; @@ -21,7 +21,6 @@ $fluent-accordion-item-opened-margin: null !default; $fluent-accordion-title-height: 44px !default; $accordion-title-icon-margin: 8px !default; $accordion-title-icon-size: 20px !default; - $fluent-accordion-item-opened-margin: 0 !default; } @else if $size == "compact" { @@ -30,5 +29,4 @@ $fluent-accordion-item-opened-margin: null !default; $fluent-accordion-title-height: 32px !default; $accordion-title-icon-margin: 6px !default; $accordion-title-icon-size: 16px !default; - $fluent-accordion-item-opened-margin: 0 !default; } diff --git a/packages/devextreme-scss/scss/widgets/fluent/badge/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/badge/_sizes.scss index 2c99c408f03a..59af08ff7a51 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/badge/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/badge/_sizes.scss @@ -1,17 +1,15 @@ @use "../sizes" as *; -$fluent-badge-padding: null !default; +$fluent-badge-padding: 0 6px !default; $fluent-badge-font-size: null !default; $badge-line-height: null !default; @if $size == "default" { - $fluent-badge-padding: 0 6px !default; $fluent-badge-font-size: 12px !default; $badge-line-height: 20px !default; } @else if $size == "compact" { - $fluent-badge-padding: 0 6px !default; $fluent-badge-font-size: 10px !default; $badge-line-height: 16px !default; } diff --git a/packages/devextreme-scss/scss/widgets/fluent/button/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/button/_colors.scss index de2be8586ff2..b3465747f9e2 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/button/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/button/_colors.scss @@ -84,13 +84,13 @@ $button-default-selected-color: null !default; * $name 30. Hover state background color * $type color */ -$button-default-hover-bg: null !default; +$button-default-hover-bg: $base-accent-hover !default; /** * $name 40. Focused state background color * $type color */ -$button-default-focused-bg: null !default; +$button-default-focused-bg: $base-accent-hover !default; /** * $name 50. Active state background color @@ -113,7 +113,6 @@ $button-default-outlined-border-color: $base-accent !default; $button-default-outlined-bg: transparent !default; $button-default-outlined-hover-bg: null !default; -$button-default-outlined-focused-bg: null !default; $button-default-outlined-active-bg: null !default; $button-default-outlined-selected-bg: null !default; @@ -168,11 +167,10 @@ $button-danger-selected-bg: $base-danger-selected !default; $button-danger-outlined-color: $base-danger !default; $button-danger-outlined-border-color: $base-danger !default; $button-danger-outlined-color-hover: null !default; -$button-danger-outlined-color-active: null !default; +$button-danger-outlined-color-active: $base-danger-active !default; $button-danger-outlined-selected-color: null !default; $button-danger-outlined-bg: transparent !default; $button-danger-outlined-hover-bg: null !default; -$button-danger-outlined-focused-bg: null !default; $button-danger-outlined-active-bg: null !default; $button-danger-outlined-selected-bg: null !default; @@ -200,12 +198,6 @@ $button-success-selected-color: null !default; */ $button-success-hover-bg: null !default; -/** -* $name 40. Focused state background color -* $type color -*/ -$button-success-focused-bg: null !default; - /** * $name 50. Active state background color * $type color @@ -225,7 +217,6 @@ $button-success-outlined-color-active: null !default; $button-success-outlined-selected-color: null !default; $button-success-outlined-bg: transparent !default; $button-success-outlined-hover-bg: null !default; -$button-success-outlined-focused-bg: null !default; $button-success-outlined-active-bg: null !default; $button-success-outlined-selected-bg: null !default; @@ -233,14 +224,10 @@ $button-accent-foreground-color: null !default; @if $mode == "light" { $button-accent-foreground-color: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -2deg, $saturation: -9.10%, $lightness: -23.53%) !default; - - $button-default-hover-bg: $base-accent-hover !default; - $button-default-focused-bg: $base-accent-hover !default; $button-default-active-bg: $base-accent-active !default; $button-default-selected-bg: $base-accent-selected !default; $button-success-hover-bg: color.adjust($base-success, $saturation: 0.63%, $space: hsl, $lightness: -2.75%) !default; - $button-success-focused-bg: $button-success-hover-bg !default; $button-success-active-bg: color.adjust($base-success, $saturation: -0.95%, $space: hsl, $lightness: -19.22%) !default; $button-success-selected-bg: color.adjust($base-success, $saturation: -0.22%, $space: hsl, $lightness: -12.16%) !default; @@ -250,12 +237,10 @@ $button-accent-foreground-color: null !default; $button-default-outlined-active-bg: extcolor.adjust-if-not-achromatic($color: $button-default-outlined-hover-bg, $hue: -1deg, $saturation: 17.00%, $lightness: -17.06%) !default; $button-danger-outlined-hover-bg: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: 1.5deg, $saturation: 0.6%, $lightness: 46.7%) !default; - $button-danger-outlined-focused-bg: $button-danger-outlined-hover-bg !default; $button-danger-outlined-active-bg: extcolor.adjust-if-not-achromatic($color: $button-danger-outlined-hover-bg, $hue: 358.9deg, $saturation: 2.2%, $lightness: -13.9%) !default; $button-danger-outlined-selected-bg: extcolor.adjust-if-not-achromatic($color: $button-danger-outlined-active-bg, $hue: 359.1deg, $saturation: -0.6%, $lightness: 7.1%) !default; $button-success-outlined-hover-bg: color.adjust($base-success, $saturation: -29.8%, $space: hsl, $lightness: 68.8%) !default; - $button-success-outlined-focused-bg: $button-success-outlined-hover-bg !default; $button-success-outlined-active-bg: color.adjust($base-success, $saturation: -34.9%, $space: hsl, $lightness: 46.1%) !default; $button-success-outlined-selected-bg: color.adjust($base-success, $saturation: -35%, $space: hsl, $lightness: 57.6%) !default; } @@ -266,20 +251,15 @@ $button-accent-foreground-color: null !default; $button-default-outlined-active-bg: color.adjust($button-default-outlined-hover-bg, $lightness: -4%, $space: hsl) !default; $button-danger-outlined-hover-bg: color.mix($base-bg, $base-danger, 90%) !default; - $button-danger-outlined-focused-bg: $button-danger-outlined-hover-bg !default; $button-danger-outlined-active-bg: color.adjust($button-danger-outlined-hover-bg, $lightness: -4%, $space: hsl) !default; $button-danger-outlined-selected-bg: color.adjust($button-danger-outlined-hover-bg, $lightness: -4%, $space: hsl) !default; $button-success-outlined-hover-bg: color.mix($base-bg, $base-success, 90%) !default; - $button-success-outlined-focused-bg: $button-success-outlined-hover-bg !default; $button-success-outlined-active-bg: color.adjust($button-success-outlined-hover-bg, $lightness: -4%, $space: hsl) !default; $button-success-outlined-selected-bg: color.adjust($button-success-outlined-hover-bg, $lightness: -4%, $space: hsl) !default; } - $button-default-outlined-focused-bg: $button-default-outlined-hover-bg !default; - $button-danger-outlined-color-hover: $base-danger-selected !default; - $button-danger-outlined-color-active: $base-danger-active !default; $button-danger-outlined-selected-color: $base-danger-selected !default; $button-success-outlined-color-hover: color.adjust($base-success, $saturation: -0.22%, $space: hsl, $lightness: -12.16%) !default; @@ -297,28 +277,21 @@ $button-accent-foreground-color: null !default; @if $mode == "dark" { $button-accent-foreground-color: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 0.9deg, $saturation: -2.2%, $lightness: 22.4%) !default; - - $button-default-hover-bg: $base-accent-hover !default; - $button-default-focused-bg: $base-accent-hover !default; $button-default-active-bg: $button-accent-foreground-color !default; $button-default-selected-bg: color.adjust($button-default-active-bg, $saturation: -6.4%, $space: hsl, $lightness: 5.3%) !default; $button-success-hover-bg: color.adjust($base-success, $saturation: 5.4%, $space: hsl, $lightness: 22.5%) !default; - $button-success-focused-bg: $button-success-hover-bg !default; $button-success-active-bg: color.adjust($base-success, $saturation: 10.6%, $space: hsl, $lightness: 45.3%) !default; $button-success-selected-bg: color.adjust($base-success, $saturation: 5.3%, $space: hsl, $lightness: 34.1%) !default; $button-default-outlined-hover-bg: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 356.3deg, $saturation: -14.7%, $lightness: -49.4%) !default; - $button-default-outlined-focused-bg: $button-default-outlined-hover-bg !default; $button-default-outlined-active-bg: $base-accent-selected !default; $button-default-outlined-selected-bg: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -4deg, $saturation: -12.33%, $lightness: -41.18%) !default; $button-danger-outlined-color-hover: $base-danger-active !default; - $button-danger-outlined-color-active: $base-danger-active !default; $button-danger-outlined-selected-color: $base-danger-active !default; $button-danger-outlined-hover-bg: color.adjust($base-danger, $saturation: -5.1%, $space: hsl, $lightness: -53.5%) !default; - $button-danger-outlined-focused-bg: $button-danger-outlined-hover-bg !default; $button-danger-outlined-active-bg: color.adjust($base-danger, $saturation: -4.6%, $space: hsl, $lightness: -22.9%) !default; $button-danger-outlined-selected-bg: color.adjust($base-danger, $saturation: -4.3%, $space: hsl, $lightness: -40.4%) !default; @@ -327,7 +300,6 @@ $button-accent-foreground-color: null !default; $button-success-outlined-selected-color: $button-success-outlined-color-hover !default; $button-success-outlined-hover-bg: color.adjust($base-success, $saturation: 39.4%, $space: hsl, $lightness: -42.7%) !default; - $button-success-outlined-focused-bg: $button-success-outlined-hover-bg !default; $button-success-outlined-active-bg: color.adjust($base-success, $saturation: 39%, $space: hsl, $lightness: -33.1%) !default; $button-success-outlined-selected-bg: color.adjust($base-success, $saturation: 40.1%, $space: hsl, $lightness: -35.7%) !default; @@ -340,6 +312,15 @@ $button-accent-foreground-color: null !default; $button-shadow-color: color.change($base-shadow-color, $alpha: 0.4) !default; } +/** +* $name 40. Focused state background color +* $type color +*/ +$button-success-focused-bg: $button-success-hover-bg !default; +$button-danger-outlined-focused-bg: $button-danger-outlined-hover-bg !default; +$button-success-outlined-focused-bg: $button-success-outlined-hover-bg !default; +$button-default-outlined-focused-bg: $button-default-outlined-hover-bg !default; + $button-default-icon-color: $button-default-color !default; $button-normal-icon-color: $button-normal-color !default; $button-danger-icon-color: $button-danger-color !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent/button/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/button/_sizes.scss index 72d7c8a9e8cd..41b5a72455db 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/button/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/button/_sizes.scss @@ -3,7 +3,6 @@ $fluent-button-horizontal-padding: null !default; $fluent-button-vertical-padding: null !default; $fluent-button-icon-padding: null !default; -$fluent-button-icon-text-padding: null !default; $fluent-button-content-line-height: 0 !default; $fluent-button-text-line-height: normal !default; $fluent-button-text-transform: none !default; @@ -16,16 +15,16 @@ $fluent-button-box-shadow-size: 0 1px 3px !default; $fluent-button-horizontal-padding: 12px !default; $fluent-button-vertical-padding: 6px !default; $fluent-button-icon-padding: 6px; - $fluent-button-icon-text-padding: $fluent-button-horizontal-padding !default; } @else if $size == "compact" { $fluent-button-horizontal-padding: 8px !default; $fluent-button-vertical-padding: 4px !default; $fluent-button-icon-padding: 4px !default; - $fluent-button-icon-text-padding: $fluent-button-horizontal-padding !default; } +$fluent-button-icon-text-padding: $fluent-button-horizontal-padding !default; + :root { --dx-button-padding-inline: #{$fluent-button-horizontal-padding}; } diff --git a/packages/devextreme-scss/scss/widgets/fluent/calendar/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/calendar/_colors.scss index 6fdc41b02872..b24780264b8f 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/calendar/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/calendar/_colors.scss @@ -24,7 +24,6 @@ $calendar-header-color: $calendar-color !default; $calendar-cell-other-color: null !default; $calendar-bg: transparent !default; $calendar-hover-bg: null !default; -$calendar-cell-hover-border-color: null !default; $calendar-cell-hover-color: $calendar-color !default; /** @@ -44,7 +43,6 @@ $calendar-week-number-border-radius: 0 !default; @if $mode == "light" { $calendar-hover-bg: $button-default-outlined-selected-bg !default; - $calendar-cell-hover-border-color: $calendar-hover-bg !default; $calendar-cell-active-bg: $button-default-outlined-active-bg !default; $calendar-cell-other-color: color.adjust($calendar-color, $lightness: 23.92%, $space: hsl) !default; $calendar-week-number-cell-color: color.adjust($calendar-color, $lightness: 23.92%, $space: hsl) !default; @@ -54,7 +52,6 @@ $calendar-week-number-border-radius: 0 !default; @if $mode == "dark" { $calendar-hover-bg: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 358.4deg, $saturation: -8.6%, $lightness: -26.7%) !default; - $calendar-cell-hover-border-color: $calendar-hover-bg !default; $calendar-cell-active-bg: $base-accent-selected !default; $calendar-cell-other-color: color.adjust($calendar-color, $lightness: -32.16%, $space: hsl) !default; $calendar-week-number-cell-color: color.adjust($calendar-color, $lightness: -32.16%, $space: hsl) !default; @@ -62,4 +59,6 @@ $calendar-week-number-border-radius: 0 !default; $calendar-week-number-cell-bg: $base-hover-bg !default; } +$calendar-cell-hover-border-color: $calendar-hover-bg !default; + $calendar-cell-other-hover-color: $calendar-cell-other-color !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent/cardView/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/cardView/_colors.scss index 7c1d3a4c5b92..7d0f1ab8613e 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/cardView/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/cardView/_colors.scss @@ -19,19 +19,19 @@ * $name 100. Background color * $type color */ -$cardview-fluent-common-bg-color: null !default; +$cardview-fluent-common-bg-color: $base-typography-bg !default; /** * $name 102. Link color * $type color */ -$cardview-fluent-common-link-color: null !default; +$cardview-fluent-common-link-color: $base-link-color !default; /** * $name 103. Text color * $type color */ -$cardview-fluent-common-text-color: null !default; +$cardview-fluent-common-text-color: $base-text-color !default; // #endregion @@ -41,31 +41,31 @@ $cardview-fluent-common-text-color: null !default; * $name 200. Background color * $type color */ -$cardview-fluent-card-bg-color: null !default; +$cardview-fluent-card-bg-color: $base-bg !default; /** * $name 201. Border color * $type color */ -$cardview-fluent-card-border-color: null !default; +$cardview-fluent-card-border-color: $base-border-color !default; /** * $name 203. Divider color * $type color */ -$cardview-fluent-card-divider-color: null !default; +$cardview-fluent-card-divider-color: $cardview-fluent-card-border-color !default; /** * $name 204. Text color * $type color */ -$cardview-fluent-card-text-color: null !default; +$cardview-fluent-card-text-color: $cardview-fluent-common-text-color !default; /** * $name 206. Cover background color * $type color */ -$cardview-fluent-card__cover-bg-color: null !default; +$cardview-fluent-card__cover-bg-color: #FFF !default; /** * $name 207. "Empty cover" background color @@ -79,7 +79,7 @@ $cardview-fluent-card__cover--noimage-bg-color: null !default; */ $cardview-fluent-card__cover--noimage__icon-color: null !default; -$cardview-fluent-card--focused-outline-color: null !default; +$cardview-fluent-card--focused-outline-color: $base-accent !default; // #endregion @@ -97,35 +97,17 @@ $cardview-fluent-card--selected-bg-color: null !default; */ $cardview-fluent-card--selected-border-color: null !default; -/** -* $name 302. Divider color -* $type color -*/ -$cardview-fluent-card--selected-divider-color: null !default; - /** * $name 303. Text color * $type color */ -$cardview-fluent-card--selected-text-color: null !default; +$cardview-fluent-card--selected-text-color: $cardview-fluent-card-text-color !default; /** * $name 305. Cover background color * $type color */ -$cardview-fluent-card--selected__cover-bg-color: null !default; - -/** -* $name 306. "Empty cover" background color -* $type color -*/ -$cardview-fluent-card--selected__cover--noimage-bg-color: null !default; - -/** -* $name 307. "Empty cover" icon color -* $type color -*/ -$cardview-fluent-card--selected__cover--noimage__icon-color: null !default; +$cardview-fluent-card--selected__cover-bg-color: $cardview-fluent-card__cover-bg-color !default; // #endregion @@ -141,33 +123,33 @@ $cardview-fluent-header-panel__item-bg-color: null !default; * $name 401. Border color * $type color */ -$cardview-fluent-header-panel__item-border-color: null !default; +$cardview-fluent-header-panel__item-border-color: $base-border-color !default; /** * $name 403. Text color * $type color */ -$cardview-fluent-header-panel__item-text-color: null !default; +$cardview-fluent-header-panel__item-text-color: $cardview-fluent-common-text-color !default; /** * $name 405. Icon color * $type color */ -$cardview-fluent-header-panel__item__icon-color: null !default; +$cardview-fluent-header-panel__item__icon-color: $cardview-fluent-common-text-color !default; /** * $name 406. Active "Filter" icon color * $type color */ -$cardview-fluent-header-panel__item__header-filter-icon--selected-color: null !default; +$cardview-fluent-header-panel__item__header-filter-icon--selected-color: $base-accent !default; /** * $name 407. Sort index text color * $type color */ -$cardview-fluent-header-panel__item__sort-index-text-color: null !default; +$cardview-fluent-header-panel__item__sort-index-text-color: $cardview-fluent-common-text-color !default; -$cardview-fluent-header-panel__item--focused-outline-color: null !default; +$cardview-fluent-header-panel__item--focused-outline-color: $base-accent !default; // #endregion @@ -213,17 +195,11 @@ $cardview-fluent-header-panel__item--hovered__sort-index-text-color: null !defau // #region HEADER PANEL ITEM (DISABLED) -/** -* $name 600. Background color -* $type color -*/ -$cardview-fluent-header-panel__item--disabled-bg-color: null !default; - /** * $name 601. Border color * $type color */ -$cardview-fluent-header-panel__item--disabled-border-color: null !default; +$cardview-fluent-header-panel__item--disabled-border-color: $cardview-fluent-header-panel__item-border-color !default; /** * $name 602. Text color @@ -253,29 +229,23 @@ $cardview-fluent-header-panel__item--disabled__sort-index-text-color: null !defa // #region HEADER PANEL ITEM (ON DRAG) -/** -* $name 700. Background color -* $type color -*/ -$cardview-fluent-header-panel__item--dragged-bg-color: null !default; - /** * $name 701. Border color * $type color */ -$cardview-fluent-header-panel__item--dragged-border-color: null !default; +$cardview-fluent-header-panel__item--dragged-border-color: $cardview-fluent-header-panel__item-border-color !default; /** * $name 702. Text color * $type color */ -$cardview-fluent-header-panel__item--dragged-text-color: null !default; +$cardview-fluent-header-panel__item--dragged-text-color: $cardview-fluent-header-panel__item-text-color !default; /** * $name 704. "Drag allowed" icon color * $type color */ -$cardview-fluent-header-panel__item--dragged__allowance-icon-color: null !default; +$cardview-fluent-header-panel__item--dragged__allowance-icon-color: $cardview-fluent-common-text-color !default; /** * $name 705. "Drag blocked" icon color @@ -287,7 +257,7 @@ $cardview-fluent-header-panel__item--dragged__prohibition-icon-color: null !defa * $name 706. Box shadow color * $type color */ -$cardview-fluent-header-panel__item--dragged-box-shadow-color: null !default; +$cardview-fluent-header-panel__item--dragged-box-shadow-color: rgba(0, 0, 0, 0.2) !default; // #endregion @@ -303,19 +273,19 @@ $cardview-fluent-header-panel__dropzone-bg-color: null !default; * $name 802. Border color * $type color */ -$cardview-fluent-header-panel__dropzone-border-color: null !default; +$cardview-fluent-header-panel__dropzone-border-color: $base-accent !default; /** * $name 803. Text color * $type color */ -$cardview-fluent-header-panel__dropzone-text-color: null !default; +$cardview-fluent-header-panel__dropzone-text-color: $base-accent !default; /** * $name 804. Icon color * $type color */ -$cardview-fluent-header-panel__dropzone__icon-color: null !default; +$cardview-fluent-header-panel__dropzone__icon-color: $base-accent !default; // #endregion @@ -325,25 +295,25 @@ $cardview-fluent-header-panel__dropzone__icon-color: null !default; * $name 900. Background color * $type color */ -$cardview-fluent-filter-panel-bg-color: null !default; +$cardview-fluent-filter-panel-bg-color: $cardview-fluent-common-bg-color !default; /** * $name 902. Border color * $type color */ -$cardview-fluent-filter-panel-border-color: null !default; +$cardview-fluent-filter-panel-border-color: $base-border-color !default; /** * $name 903. Text color * $type color */ -$cardview-fluent-filter-panel-text-color: null !default; +$cardview-fluent-filter-panel-text-color: $base-accent !default; /** * $name 904. Icon color * $type color */ -$cardview-fluent-filter-panel__icon-color: null !default; +$cardview-fluent-filter-panel__icon-color: $base-accent !default; // #endregion @@ -353,7 +323,7 @@ $cardview-fluent-filter-panel__icon-color: null !default; * $name 1000. Background color * $type color */ -$cardview-fluent-nodata-view-bg-color: null !default; +$cardview-fluent-nodata-view-bg-color: $cardview-fluent-common-bg-color !default; /** * $name 1001. Text color @@ -381,7 +351,7 @@ $cardview-fluent-nodata-view__icon-bg-color: null !default; * $name 1100. Background color * $type color */ -$cardview-fluent-card__content__field-value--highlighted-bg-color: null !default; +$cardview-fluent-card__content__field-value--highlighted-bg-color: $base-warning !default; /** * $name 1102. Text color @@ -393,52 +363,28 @@ $cardview-fluent-card__content__field-value--highlighted-text-color: null !defau * $name 1104. Box shadow color * $type color */ -$cardview-fluent-card__content__field-value--highlighted-box-shadow-color: null !default; +$cardview-fluent-card__content__field-value--highlighted-box-shadow-color: rgba(0, 0, 0, 0.25) !default; // #endregion // #region COLUMN CHOOSER -$cardview-fluent-columnchooser--empty__message-color: null !default; +$cardview-fluent-columnchooser--empty__message-color: color.adjust($cardview-fluent-common-text-color, $lightness: 26%, $space: hsl) !default; // #endregion @if $mode == "light" { - // Common - $cardview-fluent-common-bg-color: $base-typography-bg !default; - $cardview-fluent-common-link-color: $base-link-color !default; - $cardview-fluent-common-text-color: $base-text-color !default; - // Card - $cardview-fluent-card-bg-color: $base-bg !default; - $cardview-fluent-card-border-color: $base-border-color !default; - $cardview-fluent-card-divider-color: $cardview-fluent-card-border-color !default; - $cardview-fluent-card-text-color: $cardview-fluent-common-text-color !default; - $cardview-fluent-card__cover-bg-color: #FFF !default; $cardview-fluent-card__cover--noimage-bg-color: color.adjust($base-bg, $lightness: -12.16%, $space: hsl) !default; $cardview-fluent-card__cover--noimage__icon-color: color.adjust($cardview-fluent-common-text-color, $lightness: 23.92%, $space: hsl) !default; - $cardview-fluent-card--focused-outline-color: $base-accent !default; - // Card - selected $cardview-fluent-card--selected-bg-color: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 4deg, $saturation: -11.38%, $lightness: 55.49%) !default; $cardview-fluent-card--selected-border-color: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 3deg, $saturation: 2.21%, $lightness: 44.31%) !default; - $cardview-fluent-card--selected-divider-color: $cardview-fluent-card--selected-border-color !default; - $cardview-fluent-card--selected-text-color: $cardview-fluent-card-text-color !default; - $cardview-fluent-card--selected__cover-bg-color: $cardview-fluent-card__cover-bg-color !default; - $cardview-fluent-card--selected__cover--noimage-bg-color: $cardview-fluent-card__cover--noimage-bg-color !default; - $cardview-fluent-card--selected__cover--noimage__icon-color: $cardview-fluent-card__cover--noimage__icon-color !default; // Header panel item - default state $cardview-fluent-header-panel__item-bg-color: color.adjust($base-bg, $lightness: -5.88%, $space: hsl) !default; - $cardview-fluent-header-panel__item-border-color: $base-border-color !default; - $cardview-fluent-header-panel__item-text-color: $cardview-fluent-common-text-color !default; - $cardview-fluent-header-panel__item__icon-color: $cardview-fluent-common-text-color !default; - $cardview-fluent-header-panel__item__header-filter-icon--selected-color: $base-accent !default; - $cardview-fluent-header-panel__item__sort-index-text-color: $cardview-fluent-common-text-color !default; - - $cardview-fluent-header-panel__item--focused-outline-color: $base-accent !default; // Header panel item - hovered $cardview-fluent-header-panel__item--hovered-bg-color: color.adjust($cardview-fluent-header-panel__item-bg-color, $lightness: -1.96%, $space: hsl) !default; @@ -449,84 +395,38 @@ $cardview-fluent-columnchooser--empty__message-color: null !default; $cardview-fluent-header-panel__item--hovered__sort-index-text-color: $cardview-fluent-header-panel__item__sort-index-text-color !default; // Header panel item - disabled - $cardview-fluent-header-panel__item--disabled-bg-color: $cardview-fluent-header-panel__item-bg-color !default; - $cardview-fluent-header-panel__item--disabled-border-color: $cardview-fluent-header-panel__item-border-color !default; $cardview-fluent-header-panel__item--disabled-text-color: color.adjust($cardview-fluent-header-panel__item-text-color, $lightness: 60.00%, $space: hsl) !default; $cardview-fluent-header-panel__item--disabled__icon-color: color.adjust($cardview-fluent-header-panel__item__icon-color, $lightness: 60.00%, $space: hsl) !default; $cardview-fluent-header-panel__item--disabled__header-filter-icon--selected-color: color.adjust($cardview-fluent-header-panel__item__header-filter-icon--selected-color, $saturation: -34.10%, $space: hsl, $lightness: 27.06%) !default; $cardview-fluent-header-panel__item--disabled__sort-index-text-color: color.adjust($cardview-fluent-header-panel__item__sort-index-text-color, $lightness: 60.00%, $space: hsl) !default; // Header panel item - dragged - $cardview-fluent-header-panel__item--dragged-bg-color: $cardview-fluent-header-panel__item-bg-color !default; - $cardview-fluent-header-panel__item--dragged-border-color: $cardview-fluent-header-panel__item-border-color !default; - $cardview-fluent-header-panel__item--dragged-text-color: $cardview-fluent-header-panel__item-text-color !default; - $cardview-fluent-header-panel__item--dragged__allowance-icon-color: $cardview-fluent-common-text-color !default; $cardview-fluent-header-panel__item--dragged__prohibition-icon-color: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: -4deg, $saturation: 22.80%, $lightness: -9.61%) !default; - $cardview-fluent-header-panel__item--dragged-box-shadow-color: rgba(0, 0, 0, 0.2) !default; // Header panel Drop-zone $cardview-fluent-header-panel__dropzone-bg-color: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 4deg, $saturation: -11.38%, $lightness: 55.49%) !default; - $cardview-fluent-header-panel__dropzone-border-color: $base-accent !default; - $cardview-fluent-header-panel__dropzone-text-color: $base-accent !default; - $cardview-fluent-header-panel__dropzone__icon-color: $base-accent !default; - - // Filter panel - $cardview-fluent-filter-panel-bg-color: $cardview-fluent-common-bg-color !default; - $cardview-fluent-filter-panel-border-color: $base-border-color !default; - $cardview-fluent-filter-panel-text-color: $base-accent !default; - $cardview-fluent-filter-panel__icon-color: $base-accent !default; // Empty view - $cardview-fluent-nodata-view-bg-color: $cardview-fluent-common-bg-color !default; $cardview-fluent-nodata-view-text-color: color.adjust($cardview-fluent-common-text-color, $lightness: 23.92%, $space: hsl) !default; $cardview-fluent-nodata-view__icon-color: $cardview-fluent-nodata-view-text-color !default; $cardview-fluent-nodata-view__icon-bg-color: color.adjust($base-bg, $lightness: -9.80%, $space: hsl) !default; // Search highlight - $cardview-fluent-card__content__field-value--highlighted-bg-color: $base-warning !default; $cardview-fluent-card__content__field-value--highlighted-text-color: $cardview-fluent-common-text-color !default; - $cardview-fluent-card__content__field-value--highlighted-box-shadow-color: rgba(0, 0, 0, 0.25) !default; - - // Column chooser - $cardview-fluent-columnchooser--empty__message-color: color.adjust($cardview-fluent-common-text-color, $lightness: 26%, $space: hsl) !default; } @if $mode == "dark" { - // Common - $cardview-fluent-common-bg-color: $base-typography-bg !default; - $cardview-fluent-common-link-color: $base-link-color !default; - $cardview-fluent-common-text-color: $base-text-color !default; - // Card - $cardview-fluent-card-bg-color: $base-bg !default; - $cardview-fluent-card-border-color: $base-border-color !default; - $cardview-fluent-card-divider-color: $cardview-fluent-card-border-color !default; - $cardview-fluent-card-text-color: $cardview-fluent-common-text-color !default; - $cardview-fluent-card__cover-bg-color: #FFF !default; $cardview-fluent-card__cover--noimage-bg-color: color.adjust($base-bg, $lightness: -5.88%, $space: hsl) !default; $cardview-fluent-card__cover--noimage__icon-color: color.adjust($base-text-color, $lightness: -32.16%, $space: hsl) !default; - $cardview-fluent-card--focused-outline-color: $base-accent !default; - // Card - selected $cardview-fluent-card--selected-bg-color: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -4deg, $saturation: -14.69%, $lightness: -49.41%) !default; $cardview-fluent-card--selected-border-color: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -3deg, $saturation: -11.06%, $lightness: -36.27%) !default; - $cardview-fluent-card--selected-divider-color: $cardview-fluent-card--selected-border-color !default; - $cardview-fluent-card--selected-text-color: $cardview-fluent-card-text-color !default; - $cardview-fluent-card--selected__cover-bg-color: $cardview-fluent-card__cover-bg-color !default; - $cardview-fluent-card--selected__cover--noimage-bg-color: $cardview-fluent-card__cover--noimage-bg-color !default; - $cardview-fluent-card--selected__cover--noimage__icon-color: $cardview-fluent-card__cover--noimage__icon-color !default; // Header panel item - default state $cardview-fluent-header-panel__item-bg-color: color.adjust($base-bg, $lightness: -12.16%, $space: hsl) !default; - $cardview-fluent-header-panel__item-border-color: $base-border-color !default; - $cardview-fluent-header-panel__item-text-color: $cardview-fluent-common-text-color !default; - $cardview-fluent-header-panel__item__icon-color: $cardview-fluent-common-text-color !default; - $cardview-fluent-header-panel__item__header-filter-icon--selected-color: $base-accent !default; - $cardview-fluent-header-panel__item__sort-index-text-color: $cardview-fluent-common-text-color !default; - - $cardview-fluent-header-panel__item--focused-outline-color: $base-accent !default; // Header panel item - hovered $cardview-fluent-header-panel__item--hovered-bg-color: color.adjust($cardview-fluent-header-panel__item-bg-color, $lightness: 18.04%, $space: hsl) !default; @@ -537,48 +437,56 @@ $cardview-fluent-columnchooser--empty__message-color: null !default; $cardview-fluent-header-panel__item--hovered__sort-index-text-color: $cardview-fluent-common-text-color !default; // Header panel item - disabled - $cardview-fluent-header-panel__item--disabled-bg-color: $cardview-fluent-header-panel__item-bg-color !default; - $cardview-fluent-header-panel__item--disabled-border-color: $cardview-fluent-header-panel__item-border-color !default; $cardview-fluent-header-panel__item--disabled-text-color: color.adjust($cardview-fluent-header-panel__item-text-color, $lightness: -56.08%, $space: hsl) !default; $cardview-fluent-header-panel__item--disabled__icon-color: color.adjust($cardview-fluent-header-panel__item__icon-color, $lightness: -56.08%, $space: hsl) !default; $cardview-fluent-header-panel__item--disabled__header-filter-icon--selected-color: color.adjust($cardview-fluent-header-panel__item__header-filter-icon--selected-color, $saturation: -6.72%, $space: hsl, $lightness: -18.04%) !default; $cardview-fluent-header-panel__item--disabled__sort-index-text-color: color.adjust($cardview-fluent-header-panel__item__sort-index-text-color, $lightness: -56.08%, $space: hsl) !default; // Header panel item - dragged - $cardview-fluent-header-panel__item--dragged-bg-color: $cardview-fluent-header-panel__item-bg-color !default; - $cardview-fluent-header-panel__item--dragged-border-color: $cardview-fluent-header-panel__item-border-color !default; - $cardview-fluent-header-panel__item--dragged-text-color: $cardview-fluent-header-panel__item-text-color !default; - $cardview-fluent-header-panel__item--dragged__allowance-icon-color: $cardview-fluent-common-text-color !default; $cardview-fluent-header-panel__item--dragged__prohibition-icon-color: color.adjust($base-danger, $saturation: -0.27%, $space: hsl, $lightness: -7.45%) !default; - $cardview-fluent-header-panel__item--dragged-box-shadow-color: rgba(0, 0, 0, 0.2) !default; // Header panel Drop-zone $cardview-fluent-header-panel__dropzone-bg-color: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -4deg, $saturation: -14.69%, $lightness: -49.41%) !default; - $cardview-fluent-header-panel__dropzone-border-color: $base-accent !default; - $cardview-fluent-header-panel__dropzone-text-color: $base-accent !default; - $cardview-fluent-header-panel__dropzone__icon-color: $base-accent !default; - - // Filter panel - $cardview-fluent-filter-panel-bg-color: $cardview-fluent-common-bg-color !default; - $cardview-fluent-filter-panel-border-color: $base-border-color !default; - $cardview-fluent-filter-panel-text-color: $base-accent !default; - $cardview-fluent-filter-panel__icon-color: $base-accent !default; // Empty view - $cardview-fluent-nodata-view-bg-color: $cardview-fluent-common-bg-color !default; $cardview-fluent-nodata-view-text-color: color.adjust($cardview-fluent-common-text-color, $lightness: -32.16%, $space: hsl) !default; $cardview-fluent-nodata-view__icon-color: color.adjust($cardview-fluent-common-text-color, $lightness: -32.16%, $space: hsl) !default; $cardview-fluent-nodata-view__icon-bg-color: color.adjust($base-bg, $lightness: 3.92%, $space: hsl) !default; // Search highlight - $cardview-fluent-card__content__field-value--highlighted-bg-color: $base-warning !default; $cardview-fluent-card__content__field-value--highlighted-text-color: $base-inverted-text-color !default; - $cardview-fluent-card__content__field-value--highlighted-box-shadow-color: rgba(0, 0, 0, 0.25) !default; - - // Column chooser - $cardview-fluent-columnchooser--empty__message-color: color.adjust($cardview-fluent-common-text-color, $lightness: 26%, $space: hsl) !default; } +/** +* $name 302. Divider color +* $type color +*/ +$cardview-fluent-card--selected-divider-color: $cardview-fluent-card--selected-border-color !default; + +/** +* $name 306. "Empty cover" background color +* $type color +*/ +$cardview-fluent-card--selected__cover--noimage-bg-color: $cardview-fluent-card__cover--noimage-bg-color !default; + +/** +* $name 307. "Empty cover" icon color +* $type color +*/ +$cardview-fluent-card--selected__cover--noimage__icon-color: $cardview-fluent-card__cover--noimage__icon-color !default; + +/** +* $name 600. Background color +* $type color +*/ +$cardview-fluent-header-panel__item--disabled-bg-color: $cardview-fluent-header-panel__item-bg-color !default; + +/** +* $name 700. Background color +* $type color +*/ +$cardview-fluent-header-panel__item--dragged-bg-color: $cardview-fluent-header-panel__item-bg-color !default; + $cardview-bg-color: $cardview-fluent-common-bg-color !default; $cardview-link-color: $cardview-fluent-common-link-color !default; $cardview-text-color: $cardview-fluent-common-text-color !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent/cardView/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/cardView/_sizes.scss index a47f1f1d3df2..deda8c0b29f0 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/cardView/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/cardView/_sizes.scss @@ -17,14 +17,14 @@ * $name 101. Border radius * $type text */ -$cardview-fluent-common-border-radius: null !default; +$cardview-fluent-common-border-radius: 16px !default; /** * $name 104. Text weight * $type select * $type-values 100|200|300|400|500|600|700|800|900 */ -$cardview-fluent-common-text-weight: null !default; +$cardview-fluent-common-text-weight: 400 !default; /** * $name 105. Vertical gap between cards @@ -46,9 +46,9 @@ $cardview-fluent-common-padding: null !default; // #region CARD -$cardview-fluent-card-min-width: null !default; +$cardview-fluent-card-min-width: 250px !default; -$cardview-fluent-card-border-width: null !default; +$cardview-fluent-card-border-width: 1px !default; /** * $name 202. Border radius @@ -67,7 +67,7 @@ $cardview-fluent-card__header__selection-checkbox-padding-right: null !default; * $type select * $type-values 100|200|300|400|500|600|700|800|900 */ -$cardview-fluent-card__field-caption-weight: null !default; +$cardview-fluent-card__field-caption-weight: 600 !default; $cardview-fluent-card__cover-max-height: null !default; @@ -90,7 +90,7 @@ $cardview-fluent-card__content__cell-padding-horizontal: null !default; * $type select * $type-values 100|200|300|400|500|600|700|800|900 */ -$cardview-fluent-card--selected__field-caption-weight: null !default; +$cardview-fluent-card--selected__field-caption-weight: $cardview-fluent-card__field-caption-weight !default; // #endregion @@ -110,13 +110,13 @@ $cardview-fluent-header-panel--empty-line-height: null !default; // #region HEADER PANEL ITEM -$cardview-fluent-header-panel__item-border-width: null !default; +$cardview-fluent-header-panel__item-border-width: 1px !default; /** * $name 402. Border radius * $type text */ -$cardview-fluent-header-panel__item-border-radius: null !default; +$cardview-fluent-header-panel__item-border-radius: 6px !default; $cardview-fluent-header-panel__item-padding-vertical: null !default; @@ -127,16 +127,16 @@ $cardview-fluent-header-panel__item-padding-horizontal: null !default; * $type select * $type-values 100|200|300|400|500|600|700|800|900 */ -$cardview-fluent-header-panel__item-text-weight: null !default; +$cardview-fluent-header-panel__item-text-weight: $cardview-fluent-common-text-weight !default; /** * $name 408. Sort index text weight * $type select * $type-values 100|200|300|400|500|600|700|800|900 */ -$cardview-fluent-header-panel__item__sort-index-text-weight: null !default; +$cardview-fluent-header-panel__item__sort-index-text-weight: 400 !default; -$cardview-fluent-header-panel__item__icon-size: null !default; +$cardview-fluent-header-panel__item__icon-size: $fluent-base-icon-size !default; $cardview-fluent-header-item__left-padding: null !default; $cardview-fluent-header-item__right-padding: null !default; @@ -150,14 +150,14 @@ $cardview-fluent-header-item__right-padding: null !default; * $type select * $type-values 100|200|300|400|500|600|700|800|900 */ -$cardview-fluent-header-panel__item--hovered-text-weight: null !default; +$cardview-fluent-header-panel__item--hovered-text-weight: $cardview-fluent-header-panel__item-text-weight !default; /** * $name 507. Sort index text weight * $type select * $type-values 100|200|300|400|500|600|700|800|900 */ -$cardview-fluent-header-panel__item--hovered__sort-index-text-weight: null !default; +$cardview-fluent-header-panel__item--hovered__sort-index-text-weight: $cardview-fluent-header-panel__item__sort-index-text-weight !default; // #endregion @@ -168,14 +168,14 @@ $cardview-fluent-header-panel__item--hovered__sort-index-text-weight: null !defa * $type select * $type-values 100|200|300|400|500|600|700|800|900 */ -$cardview-fluent-header-panel__item--disabled-text-weight: null !default; +$cardview-fluent-header-panel__item--disabled-text-weight: $cardview-fluent-header-panel__item-text-weight !default; /** * $name 607. Sort index text weight * $type select * $type-values 100|200|300|400|500|600|700|800|900 */ -$cardview-fluent-header-panel__item--disabled__sort-index-text-weight: null !default; +$cardview-fluent-header-panel__item--disabled__sort-index-text-weight: $cardview-fluent-header-panel__item__sort-index-text-weight !default; // #endregion @@ -186,7 +186,7 @@ $cardview-fluent-header-panel__item--disabled__sort-index-text-weight: null !def * $type select * $type-values 100|200|300|400|500|600|700|800|900 */ -$cardview-fluent-header-panel__item--dragged-text-weight: null !default; +$cardview-fluent-header-panel__item--dragged-text-weight: $cardview-fluent-header-panel__item-text-weight !default; $cardview-fluent-header-item__sort-indicator__border-size: null; $cardview-fluent-header-item__sort-indicator__border-radius: null; @@ -199,7 +199,7 @@ $cardview-fluent-header-panel__dropzone-height: null !default; $cardview-fluent-header-panel__dropzone-top: null !default; -$cardview-fluent-header-panel__dropzone-border-width: null !default; +$cardview-fluent-header-panel__dropzone-border-width: 1.5px !default; /** * $name 801. Border radius @@ -215,7 +215,7 @@ $cardview-fluent-header-panel__dropzone-border-radius: null !default; * $name 901. Border radius * $type text */ -$cardview-fluent-filter-panel-border-radius: null !default; +$cardview-fluent-filter-panel-border-radius: 0 !default; // #endregion @@ -235,16 +235,16 @@ $cardview-fluent-nodata-view__icon-size: null !default; * $name 1101. Border radius * $type text */ -$cardview-fluent-card__content__field-value--highlighted-border-radius: null !default; +$cardview-fluent-card__content__field-value--highlighted-border-radius: 5px !default; -$cardview-fluent-card__content__field-value--highlighted-border-padding: null !default; +$cardview-fluent-card__content__field-value--highlighted-border-padding: 0.125em 0.2em !default; /** * $name 1103. Text weight * $type select * $type-values 100|200|300|400|500|600|700|800|900 */ -$cardview-fluent-card__content__field-value--highlighted-text-weight: null !default; +$cardview-fluent-card__content__field-value--highlighted-text-weight: 500 !default; // #endregion @@ -259,21 +259,16 @@ $cardview-fluent-column-chooser__select-all-item-horizontal-padding: null !defau @if $size == "default" { // Common - $cardview-fluent-common-border-radius: 16px !default; - $cardview-fluent-common-text-weight: 400 !default; $cardview-fluent-common-cards-row-gap: 16px !default; $cardview-fluent-common-cards-column-gap: 16px !default; $cardview-fluent-common-gap: 24px !default; $cardview-fluent-common-padding: 24px !default; // Card - $cardview-fluent-card-min-width: 250px !default; - $cardview-fluent-card-border-width: 1px !default; $cardview-fluent-card-border-radius: 8px !default; $cardview-fluent-card__header-height: 48px !default; $cardview-fluent-card__header-text-size: 16px !default; $cardview-fluent-card__header__selection-checkbox-padding-right: 12px !default; - $cardview-fluent-card__field-caption-weight: 600 !default; $cardview-fluent-card__cover-max-height: 180px !default; $cardview-fluent-card__cover--noimage__icon-size: 48px !default; $cardview-fluent-card__content-padding: 12px !default; @@ -281,9 +276,6 @@ $cardview-fluent-column-chooser__select-all-item-horizontal-padding: null !defau $cardview-fluent-card__content__cell-padding-vertical: 6px !default; $cardview-fluent-card__content__cell-padding-horizontal: 12px !default; - // Card - selected - $cardview-fluent-card--selected__field-caption-weight: $cardview-fluent-card__field-caption-weight !default; - // Header $cardview-fluent-header-gap: 0 !default; @@ -292,48 +284,25 @@ $cardview-fluent-column-chooser__select-all-item-horizontal-padding: null !defau $cardview-fluent-header-panel--empty-line-height: 32px !default; // Header panel item - default - $cardview-fluent-header-panel__item-border-width: 1px !default; - $cardview-fluent-header-panel__item-border-radius: 6px !default; $cardview-fluent-header-panel__item-padding-horizontal: 8px !default; $cardview-fluent-header-panel__item-padding-vertical: 5px !default; $cardview-fluent-header-item__left-padding: 6px !default; $cardview-fluent-header-item__right-padding: 2px !default; - $cardview-fluent-header-panel__item-text-weight: $cardview-fluent-common-text-weight !default; - $cardview-fluent-header-panel__item__sort-index-text-weight: 400 !default; - $cardview-fluent-header-panel__item__icon-size: $fluent-base-icon-size !default; - - // Header panel item - hovered - $cardview-fluent-header-panel__item--hovered-text-weight: $cardview-fluent-header-panel__item-text-weight !default; - $cardview-fluent-header-panel__item--hovered__sort-index-text-weight: $cardview-fluent-header-panel__item__sort-index-text-weight !default; - - // Header panel item - disabled - $cardview-fluent-header-panel__item--disabled-text-weight: $cardview-fluent-header-panel__item-text-weight !default; - $cardview-fluent-header-panel__item--disabled__sort-index-text-weight: $cardview-fluent-header-panel__item__sort-index-text-weight !default; // Header panel item - dragged - $cardview-fluent-header-panel__item--dragged-text-weight: $cardview-fluent-header-panel__item-text-weight !default; $cardview-fluent-header-item__sort-indicator__border-size: 2px !default; $cardview-fluent-header-item__sort-indicator__border-radius: 8px !default; // Header panel Drop-zone $cardview-fluent-header-panel__dropzone-height: 44px !default; $cardview-fluent-header-panel__dropzone-top: -6px !default; - $cardview-fluent-header-panel__dropzone-border-width: 1.5px !default; $cardview-fluent-header-panel__dropzone-border-radius: 8px !default; - // Filter panel - $cardview-fluent-filter-panel-border-radius: 0 !default; - // Empty view $cardview-fluent-nodata-view__icon-container-size: 64px !default; $cardview-fluent-nodata-view__icon-container-margin: 12px !default; $cardview-fluent-nodata-view__icon-size: 40px !default; - // Search highlight - $cardview-fluent-card__content__field-value--highlighted-border-radius: 5px !default; - $cardview-fluent-card__content__field-value--highlighted-border-padding: 0.125em 0.2em !default; - $cardview-fluent-card__content__field-value--highlighted-text-weight: 500 !default; - // Column chooser $cardview-fluent-column-chooser--empty__message-horizontal-padding: 24px !default; $cardview-fluent-column-chooser__select-all-item-horizontal-padding: 14px !default; @@ -341,21 +310,16 @@ $cardview-fluent-column-chooser__select-all-item-horizontal-padding: null !defau @else if $size == "compact" { // Common - $cardview-fluent-common-border-radius: 16px !default; - $cardview-fluent-common-text-weight: 400 !default; $cardview-fluent-common-cards-row-gap: 12px !default; $cardview-fluent-common-cards-column-gap: 12px !default; $cardview-fluent-common-gap: 16px !default; $cardview-fluent-common-padding: 16px !default; // Card - $cardview-fluent-card-min-width: 250px !default; - $cardview-fluent-card-border-width: 1px !default; $cardview-fluent-card-border-radius: 6px !default; $cardview-fluent-card__header-height: 36px !default; $cardview-fluent-card__header-text-size: 14px !default; $cardview-fluent-card__header__selection-checkbox-padding-right: 8px !default; - $cardview-fluent-card__field-caption-weight: 600 !default; $cardview-fluent-card__cover-max-height: 140px !default; $cardview-fluent-card__cover--noimage__icon-size: 32px !default; $cardview-fluent-card__content-padding: 8px !default; @@ -363,9 +327,6 @@ $cardview-fluent-column-chooser__select-all-item-horizontal-padding: null !defau $cardview-fluent-card__content__cell-padding-vertical: 4px !default; $cardview-fluent-card__content__cell-padding-horizontal: 8px !default; - // Card - selected - $cardview-fluent-card--selected__field-caption-weight: $cardview-fluent-card__field-caption-weight !default; - // Header $cardview-fluent-header-gap: 4px !default; @@ -374,48 +335,25 @@ $cardview-fluent-column-chooser__select-all-item-horizontal-padding: null !defau $cardview-fluent-header-panel--empty-line-height: 24px !default; // Header panel item - default - $cardview-fluent-header-panel__item-border-width: 1px !default; - $cardview-fluent-header-panel__item-border-radius: 6px !default; $cardview-fluent-header-panel__item-padding-horizontal: 6px !default; $cardview-fluent-header-panel__item-padding-vertical: 3px !default; $cardview-fluent-header-item__left-padding: 3px !default; $cardview-fluent-header-item__right-padding: 1px !default; - $cardview-fluent-header-panel__item-text-weight: $cardview-fluent-common-text-weight !default; - $cardview-fluent-header-panel__item__sort-index-text-weight: 400 !default; - $cardview-fluent-header-panel__item__icon-size: $fluent-base-icon-size !default; - - // Header panel item - hovered - $cardview-fluent-header-panel__item--hovered-text-weight: $cardview-fluent-header-panel__item-text-weight !default; - $cardview-fluent-header-panel__item--hovered__sort-index-text-weight: $cardview-fluent-header-panel__item__sort-index-text-weight !default; - - // Header panel item - disabled - $cardview-fluent-header-panel__item--disabled-text-weight: $cardview-fluent-header-panel__item-text-weight !default; - $cardview-fluent-header-panel__item--disabled__sort-index-text-weight: $cardview-fluent-header-panel__item__sort-index-text-weight !default; // Header panel item - dragged - $cardview-fluent-header-panel__item--dragged-text-weight: $cardview-fluent-header-panel__item-text-weight !default; $cardview-fluent-header-item__sort-indicator__border-size: 1px !default; $cardview-fluent-header-item__sort-indicator__border-radius: 4px !default; // Header panel Drop-zone $cardview-fluent-header-panel__dropzone-height: 32px !default; $cardview-fluent-header-panel__dropzone-top: -4px !default; - $cardview-fluent-header-panel__dropzone-border-width: 1.5px !default; $cardview-fluent-header-panel__dropzone-border-radius: 6px !default; - // Filter panel - $cardview-fluent-filter-panel-border-radius: 0 !default; - // Empty view $cardview-fluent-nodata-view__icon-container-size: 48px !default; $cardview-fluent-nodata-view__icon-container-margin: 8px !default; $cardview-fluent-nodata-view__icon-size: 32px !default; - // Search highlight - $cardview-fluent-card__content__field-value--highlighted-border-radius: 5px !default; - $cardview-fluent-card__content__field-value--highlighted-border-padding: 0.125em 0.2em !default; - $cardview-fluent-card__content__field-value--highlighted-text-weight: 500 !default; - // Column chooser $cardview-fluent-column-chooser--empty__message-horizontal-padding: 16px !default; $cardview-fluent-column-chooser__select-all-item-horizontal-padding: 12px !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent/chat/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/chat/_colors.scss index 2d7ee1140d81..7f53705ade4e 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/chat/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/chat/_colors.scss @@ -125,7 +125,7 @@ $chat-typingindicator-circle-bg-color: null !default; $chat-file-container-background-color: $base-bg !default; $chat-file-container-box-shadow: null !default; -$chat-file-secondary-color: null !default; +$chat-file-secondary-color: $base-icon-color !default; $chat-suggestions-box-shadow: null !default; @@ -144,7 +144,6 @@ $chat-suggestions-box-shadow: null !default; $chat-typingindicator-circle-bg-color-center: color.adjust($base-bg, $lightness: -56.08%, $space: hsl) !default; $chat-file-container-box-shadow: 0 0 2px 0 color.change($base-shadow-color, $alpha: 0.12), 0 1px 2px 0 color.change($base-shadow-color, $alpha: 0.14) !default; - $chat-file-secondary-color: $base-icon-color !default; $chat-suggestions-box-shadow: 0 4px 12px 0 color.change($base-shadow-color, $alpha: 0.04), 0 4px 24px 0 color.change($base-shadow-color, $alpha: 0.02) !default; @@ -176,7 +175,6 @@ $chat-suggestions-box-shadow: null !default; $chat-typingindicator-circle-bg-color-center: color.adjust($base-bg, $lightness: 43.92%, $space: hsl) !default; $chat-file-container-box-shadow: 0 0 2px 0 color.change($base-shadow-color, $alpha: 0.24), 0 1px 2px 0 color.change($base-shadow-color, $alpha: 0.28) !default; - $chat-file-secondary-color: $base-icon-color !default; $chat-suggestions-box-shadow: 0 4px 24px 0 color.change($base-shadow-color, $alpha: 0.02), 0 4px 12px 0 color.change($base-shadow-color, $alpha: 0.04) !default; } diff --git a/packages/devextreme-scss/scss/widgets/fluent/chat/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/chat/_sizes.scss index f8069845cec3..cad0368631dd 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/chat/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/chat/_sizes.scss @@ -14,7 +14,7 @@ $chat-bubble-delete-gap: null !default; $chat-bubble-delete-icon-size: null !default; $chat-messagebox-padding: null !default; $chat-messagebox-textarea-padding: null !default; -$chat-messagebox-textarea-border-radius: null !default; +$chat-messagebox-textarea-border-radius: 8px !default; $chat-messagebox-toolbar-min-height: null !default; $chat-messagebox-gap: 8px !default; $chat-messagebox-files-container-padding: 3px !default; @@ -32,7 +32,7 @@ $chat-information-edited-gap: 2px !default; $chat-alerts-padding-block: null !default; $chat-alerts-padding-inline: 8px !default; -$chat-alerts-row-gap: null !default; +$chat-alerts-row-gap: 2px !default; $chat-alert-padding-block: null !default; $chat-suggestions-padding: null !default; @@ -57,12 +57,10 @@ $chat-messagelist-day-header-first-padding-top: 20px !default; $chat-messagelist-day-header-font-size: 12px !default; $chat-typingindicator-template: $chat-messagegroup-alignment-start-template !default; -$chat-typingindicator-padding: null !default; $chat-typingindicator-row-gap: $chat-messagegroup-gap !default; $chat-typingindicator-font-size: $chat-information-font-size !default; $chat-typingindicator-bubble-padding-block: null !default; $chat-typingindicator-bubble-padding-inline: null !default; -$chat-typingindicator-bubble-border-radius: null !default; $chat-typingindicator-bubble-column-gap: 4px !default; $chat-typingindicator-circle-size: null !default; $chat-typingindicator-circle-size-center: null !default; @@ -90,14 +88,12 @@ $chat-bubble-gap: 8px !default; $chat-bubble-delete-gap: 4px !default; $chat-bubble-delete-icon-size: 20px !default; $chat-messagebox-padding: 20px !default; - $chat-messagebox-textarea-border-radius: 8px !default; $chat-messagebox-textarea-padding: 12px !default; $chat-messagebox-toolbar-min-height: 32px !default; $chat-messagelist-padding: 20px !default; $chat-messagegroup-padding: 24px !default; $chat-alerts-padding-block: 12px !default; - $chat-alerts-row-gap: 2px !default; $chat-alert-padding-block: 6px !default; $chat-suggestions-padding: 20px !default; @@ -116,8 +112,6 @@ $chat-bubble-gap: 8px !default; $chat-typingindicator-circle-size-center: math.div(12, 14) * 1em !default; $chat-typingindicator-bubble-padding-block: 12px !default; $chat-typingindicator-bubble-padding-inline: 20px !default; - $chat-typingindicator-padding: $chat-messagegroup-padding !default; - $chat-typingindicator-bubble-border-radius: $chat-bubble-border-radius !default; $chat-confirmation-popup-toolbar-gap: 8px !default; @@ -130,14 +124,12 @@ $chat-bubble-gap: 8px !default; $chat-bubble-delete-gap: 2px !default; $chat-bubble-delete-icon-size: 16px !default; $chat-messagebox-padding: 16px !default; - $chat-messagebox-textarea-border-radius: 8px !default; $chat-messagebox-textarea-padding: 8px !default; $chat-messagebox-toolbar-min-height: 24px !default; $chat-messagelist-padding: 16px !default; $chat-messagegroup-padding: 12px !default; $chat-alerts-padding-block: 8px !default; - $chat-alerts-row-gap: 2px !default; $chat-alert-padding-block: 5px !default; $chat-suggestions-padding: 16px !default; @@ -156,10 +148,11 @@ $chat-bubble-gap: 8px !default; $chat-typingindicator-circle-size-center: math.div(12, 12) * 1em !default; $chat-typingindicator-bubble-padding-block: 8px !default; $chat-typingindicator-bubble-padding-inline: 12px !default; - $chat-typingindicator-padding: $chat-messagegroup-padding !default; - $chat-typingindicator-bubble-border-radius: $chat-bubble-border-radius !default; $chat-confirmation-popup-toolbar-gap: 4px !default; $chat-file-icon-font-size: 16px !default; } + +$chat-typingindicator-padding: $chat-messagegroup-padding !default; +$chat-typingindicator-bubble-border-radius: $chat-bubble-border-radius !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent/fileUploader/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/fileUploader/_sizes.scss index fa118fa0c463..c41cfcdc2c1b 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/fileUploader/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/fileUploader/_sizes.scss @@ -7,7 +7,7 @@ $fluent-fileuploader-file-cancel-button-margin-left: 4px !default; $fluent-fileuploader-file-container-button-size: null !default; $fluent-fileuploader-vertical-padding: 7px !default; -$fluent-fileuploader-files-container-padding: null !default; +$fluent-fileuploader-files-container-padding: 12px 4px 0 !default; $fluent-fileuploader-file-size-margin: null !default; $fluent-fileuploader-file-icon-font-size: null !default; $fluent-fileuploader-files-container-rounding: 4px !default; @@ -17,7 +17,6 @@ $fluent-fileuploader-files-container-rounding: 4px !default; $fluent-fileuploader-file-container-text-margin: 15px !default; $fluent-fileuploader-file-container-button-margin: 8px !default; $fluent-fileuploader-file-container-button-size: 32px !default; - $fluent-fileuploader-files-container-padding: 12px 4px 0 !default; $fluent-fileuploader-file-size-margin: 0 0 0 4px !default; $fluent-fileuploader-file-icon-font-size: 20px !default; } @@ -27,7 +26,6 @@ $fluent-fileuploader-files-container-rounding: 4px !default; $fluent-fileuploader-file-container-text-margin: 6px !default; $fluent-fileuploader-file-container-button-margin: 2px !default; $fluent-fileuploader-file-container-button-size: 28px !default; - $fluent-fileuploader-files-container-padding: 12px 4px 0 !default; $fluent-fileuploader-file-size-margin: 0 0 4px !default; $fluent-fileuploader-file-icon-font-size: 16px !default; } diff --git a/packages/devextreme-scss/scss/widgets/fluent/form/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/form/_sizes.scss index 384113d46730..465839839624 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/form/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/form/_sizes.scss @@ -1,6 +1,6 @@ @use "../sizes" as *; -$fluent-form-group-caption-bottom-margin: null !default; +$fluent-form-group-caption-bottom-margin: 4px !default; $fluent-form-group-caption-top-padding: null !default; $fluent-form-group-content-bottom-padding: null !default; $fluent-form-group-caption-font-size: null !default; @@ -17,7 +17,6 @@ $fluent-form-label-icon-size: $fluent-base-icon-size !default; $fluent-form-group-custom-caption-icon-margin: null !default; @if $size == "default" { - $fluent-form-group-caption-bottom-margin: 4px !default; $fluent-form-group-caption-top-padding: 16px !default; $fluent-form-group-content-bottom-padding: 16px !default; $fluent-form-group-caption-font-size: 20px !default; @@ -30,7 +29,6 @@ $fluent-form-group-custom-caption-icon-margin: null !default; } @else if $size == "compact" { - $fluent-form-group-caption-bottom-margin: 4px !default; $fluent-form-group-caption-top-padding: 12px !default; $fluent-form-group-content-bottom-padding: 12px !default; $fluent-form-group-caption-font-size: 16px !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent/gridBase/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/gridBase/_colors.scss index c154f911500c..2a039e042a8c 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/gridBase/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/gridBase/_colors.scss @@ -34,7 +34,7 @@ $datagrid-drag-header-border-color: color.change($base-accent, $alpha: 0.5) !def $datagrid-drag-header-shadow-color: null !default; $datagrid-drag-header-second-shadow-color: null !default; $datagrid-header-drag-bg: $datagrid-base-background-color !default; -$header-filter-color: null !default; +$header-filter-color: $datagrid-columnchooser-item-color !default; /** * $name 51. Selected row background color @@ -75,7 +75,7 @@ $datagrid-row-hovered-color: $base-hover-color !default; $datagrid-cell-modified-border-color: $button-success-text-hover-bg !default; $datagrid-cell-removed-border-color: $datagrid-border-color !default; $datagrid-row-removed-bg: $datagrid-hover-bg !default; -$datagrid-cell-removed-text-color: null !default; +$datagrid-cell-removed-text-color: $datagrid-columnchooser-item-color !default; /** * $name 45. Invalid data faded color @@ -88,7 +88,7 @@ $datagrid-nodata-color: $base-label-color !default; * $name 90. Group row text color * $type color */ -$datagrid-group-row-color: null !default; +$datagrid-group-row-color: $datagrid-columnchooser-item-color !default; /** * $name 95. Group row background color @@ -172,31 +172,24 @@ $datagrid-icon-link-disabled-opacity: $button-disabled-icon-opacity; $datagrid-row-focused-bg: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -1deg, $saturation: 0%, $lightness: 26.47%) !default; $datagrid-filter-row-background-color: $base-typography-bg !default; } - - $datagrid-group-row-color: $datagrid-columnchooser-item-color !default; $datagrid-block-separator-bg: color.adjust($datagrid-base-background-color, $lightness: -12%, $space: hsl) !default; $datagrid-drag-header-shadow-color: color.change($base-shadow-color, $alpha: 0.1) !default; $datagrid-drag-header-second-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default; - $header-filter-color: $datagrid-columnchooser-item-color !default; $datagrid-columnchooser-item-bg: $datagrid-columnchooser-bg !default; $datagrid-row-alternation-bg: color.adjust($datagrid-base-background-color, $lightness: -4%, $space: hsl) !default; $datagrid-text-stub-background-image-path: data-uri("images/widgets/fluent/color-schemes/light/grid/text-stub.png") !default; - $datagrid-cell-removed-text-color: $datagrid-columnchooser-item-color !default; $datagrid-draggable-column-text-color: color.adjust($base-text-color, $lightness: 60%, $space: hsl) !default; } @if $mode == "dark" { $datagrid-row-focused-bg: #0c3b5e !default; $datagrid-filter-row-background-color: color.adjust($datagrid-base-background-color, $lightness: 2%, $space: hsl) !default; - $datagrid-group-row-color: $datagrid-columnchooser-item-color !default; $datagrid-block-separator-bg: color.adjust($datagrid-base-background-color, $lightness: 12%, $space: hsl) !default; $datagrid-drag-header-shadow-color: color.change($base-shadow-color, $alpha: 0.3) !default; $datagrid-drag-header-second-shadow-color: color.change($base-shadow-color, $alpha: 0.4) !default; - $header-filter-color: $datagrid-columnchooser-item-color !default; $datagrid-columnchooser-item-bg: color.adjust($datagrid-columnchooser-bg, $lightness: 3%, $space: hsl) !default; $datagrid-row-alternation-bg: color.adjust($datagrid-base-background-color, $lightness: 4%, $space: hsl) !default; $datagrid-text-stub-background-image-path: data-uri("images/widgets/fluent/color-schemes/dark/grid/text-stub.png") !default; - $datagrid-cell-removed-text-color: $datagrid-columnchooser-item-color !default; $datagrid-draggable-column-text-color: color.adjust($base-text-color, $lightness: -63.9%, $space: hsl) !default; } diff --git a/packages/devextreme-scss/scss/widgets/fluent/gridBase/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/gridBase/_sizes.scss index caaa91c8ec2f..ae0e28767c20 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/gridBase/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/gridBase/_sizes.scss @@ -17,11 +17,11 @@ $fluent-grid-base-menu-item-padding: null !default; $fluent-grid-base-column-chooser-horizontal-padding: null !default; $fluent-grid-base-column-chooser-paddings: null !default; $fluent-grid-base-header-panel-padding: null !default; -$fluent-grid-base-grouppanel-item-margin: null !default; +$fluent-grid-base-grouppanel-item-margin: 6px !default; $fluent-grid-base-command-edit-column-width: null !default; $fluent-grid-base-command-edit-column-with-icons-width: null !default; $fluent-grid-base-adaptive-column-height: null !default; -$fluent-grid-base-treeview-search-margin: null !default; +$fluent-grid-base-treeview-search-margin: 10px !default; $fluent-grid-base-nodata-font-size: null !default; $fluent-filter-row-between-editor-padding: null !default; $fluent-command-column-additional-right-margin: null !default; @@ -57,12 +57,10 @@ $fluent-grid-base-ai-prompt-editor-progressbar-height: 4px !default; $fluent-grid-base-column-chooser-horizontal-padding: 24px !default; $fluent-grid-base-column-chooser-paddings: 16px $fluent-grid-base-column-chooser-horizontal-padding 9px !default; $fluent-grid-base-header-panel-padding: 8px 0 !default; - $fluent-grid-base-grouppanel-item-margin: 6px !default; $fluent-grid-base-command-edit-column-width: 115px !default; $fluent-grid-base-command-edit-column-with-icons-width: 93px !default; $fluent-grid-base-adaptive-column-height: 40px !default; - $fluent-grid-base-treeview-search-margin: 10px !default; $fluent-grid-base-nodata-font-size: 17px !default; $fluent-filter-row-between-editor-padding: 12px !default; @@ -92,12 +90,10 @@ $fluent-grid-base-ai-prompt-editor-progressbar-height: 4px !default; $fluent-grid-base-column-chooser-horizontal-padding: 8px !default; $fluent-grid-base-column-chooser-paddings: 8px $fluent-grid-base-column-chooser-horizontal-padding 8px !default; $fluent-grid-base-header-panel-padding: 6px 0 !default; - $fluent-grid-base-grouppanel-item-margin: 6px !default; $fluent-grid-base-command-edit-column-width: 105px !default; $fluent-grid-base-command-edit-column-with-icons-width: 80px !default; $fluent-grid-base-adaptive-column-height: 26px !default; - $fluent-grid-base-treeview-search-margin: 10px !default; $fluent-grid-base-nodata-font-size: 14px !default; $fluent-filter-row-between-editor-padding: 8px !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent/numberBox/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/numberBox/_sizes.scss index 09bdf6b8492b..a166d36fbe1f 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/numberBox/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/numberBox/_sizes.scss @@ -1,12 +1,4 @@ @use "../sizes" as *; $fluent-numberbox-spin-container-width: 24px !default; -$fluent-numberbox-touch-friendly-spin-container-width: null !default; - -@if $size == "default" { - $fluent-numberbox-touch-friendly-spin-container-width: 48px !default; -} - -@else if $size == "compact" { - $fluent-numberbox-touch-friendly-spin-container-width: 48px !default; -} +$fluent-numberbox-touch-friendly-spin-container-width: 48px !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent/popup/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/popup/_sizes.scss index d2d88fcd38d3..5553608c8b33 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/popup/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/popup/_sizes.scss @@ -12,8 +12,8 @@ $fluent-popup-toolbar-height: null !default; $fluent-popup-button-margin: 0 8px !default; $fluent-popup-toolbar-item-spacing: 8px !default; -$fluent-popup-content-shadow: null !default; -$fluent-popup-focused-content-shadow: null !default; +$fluent-popup-content-shadow: 0 0 8px 0 $popup-content-shadow-color1, 0 32px 64px 0 $popup-content-shadow-color2 !default; +$fluent-popup-focused-content-shadow: 0 0 12px 0 $popup-focused-content-shadow-color, 0 32px 64px 0 $popup-focused-content-shadow-color !default; @if $size == "default" { $fluent-popup-content-padding: 24px !default; @@ -24,9 +24,6 @@ $fluent-popup-focused-content-shadow: null !default; $fluent-popup-toolbar-horizontal-padding: 24px !default; $fluent-popup-bottom-toolbar-height: 48px !default; $fluent-popup-toolbar-height: 48px !default; - - $fluent-popup-content-shadow: 0 0 8px 0 $popup-content-shadow-color1, 0 32px 64px 0 $popup-content-shadow-color2 !default; - $fluent-popup-focused-content-shadow: 0 0 12px 0 $popup-focused-content-shadow-color, 0 32px 64px 0 $popup-focused-content-shadow-color !default; } @else if $size == "compact" { @@ -38,9 +35,6 @@ $fluent-popup-focused-content-shadow: null !default; $fluent-popup-toolbar-horizontal-padding: 16px !default; $fluent-popup-bottom-toolbar-height: 36px !default; $fluent-popup-toolbar-height: 36px !default; - - $fluent-popup-content-shadow: 0 0 8px 0 $popup-content-shadow-color1, 0 32px 64px 0 $popup-content-shadow-color2 !default; - $fluent-popup-focused-content-shadow: 0 0 12px 0 $popup-focused-content-shadow-color, 0 32px 64px 0 $popup-focused-content-shadow-color !default; } :root { diff --git a/packages/devextreme-scss/scss/widgets/fluent/scheduler/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/scheduler/_sizes.scss index 6fb2abec8776..6e37afec4634 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/scheduler/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/scheduler/_sizes.scss @@ -4,7 +4,7 @@ @use "../toolbar/sizes" as *; $fluent-scheduler-workspace-date-table-cell-height: null !default; -$fluent-scheduler-toolbar-item-offset: null !default; +$fluent-scheduler-toolbar-item-offset: 4px !default; $fluent-scheduler-navigator-height: null !default; $fluent-scheduler-header-panel-day-font-size: null !default; $fluent-scheduler-appointment-tooltip-title-font-size: null !default; @@ -18,8 +18,8 @@ $fluent-scheduler-dropdown-button-height: null !default; $fluent-scheduler-dropdown-button-padding: null !default; $fluent-scheduler-dropdown-button-margin: null !default; $fluent-scheduler-dropdown-button-vertical-margin: null !default; -$fluent-scheduler-dropdown-button-adaptive-margin: null !default; -$fluent-scheduler-dropdown-button-adaptive-vertical-margin: null !default; +$fluent-scheduler-dropdown-button-adaptive-margin: 0 2px !default; +$fluent-scheduler-dropdown-button-adaptive-vertical-margin: 0 2px 0 1px !default; $fluent-scheduler-appointment-tooltip-content-margin-left: null !default; $fluent-tooltip-marker-dimension: null !default; $fluent-scheduler-appointment-tooltip-title-margin-top: null !default; @@ -34,19 +34,19 @@ $fluent-scheduler-appointment-popup-all-day-item-height: null !default; $fluent-scheduler-appointment-popup-days-of-week-buttons-gap: null !default; $fluent-scheduler-appointment-popup-repeat-end-item-height: null !default; -$fluent-scheduler-appointment-short-content-padding: null !default; -$fluent-scheduler-appointment-15min-height: null !default; -$fluent-scheduler-appointment-20min-height: null !default; -$fluent-scheduler-appointment-25min-height: null !default; -$fluent-scheduler-appointment-10min-recurrence-padding-right: null !default; -$fluent-scheduler-appointment-10min-title-font-size: null !default; -$fluent-scheduler-appointment-10min-title-line-height: null !default; -$fluent-scheduler-appointment-10min-icon-font-size: null !default; -$fluent-scheduler-appointment-10min-icon-right: null !default; +$fluent-scheduler-appointment-short-content-padding: 0 8px 0 12px !default; +$fluent-scheduler-appointment-15min-height: 17px !default; +$fluent-scheduler-appointment-20min-height: 24px !default; +$fluent-scheduler-appointment-25min-height: 32px !default; +$fluent-scheduler-appointment-10min-recurrence-padding-right: 14px !default; +$fluent-scheduler-appointment-10min-title-font-size: 8px !default; +$fluent-scheduler-appointment-10min-title-line-height: 12px !default; +$fluent-scheduler-appointment-10min-icon-font-size: 12px !default; +$fluent-scheduler-appointment-10min-icon-right: 2px !default; $fluent-scheduler-appointment-15min-recurrence-padding-right: null !default; -$fluent-scheduler-appointment-15min-title-font-size: null !default; +$fluent-scheduler-appointment-15min-title-font-size: 12px !default; $fluent-scheduler-appointment-15min-title-line-height: null !default; -$fluent-scheduler-appointment-15min-icon-font-size: null !default; +$fluent-scheduler-appointment-15min-icon-font-size: 12px !default; $fluent-scheduler-appointment-15min-icon-right: null !default; $fluent-scheduler-appointment-20min-recurrence-padding-right: null !default; $fluent-scheduler-appointment-20min-icon-right: null !default; @@ -97,7 +97,6 @@ $header-panel-time-cell-padding: null !default; $fluent-scheduler-header-panel-day-font-size: 16px !default; $fluent-scheduler-header-height: 46px !default; $fluent-scheduler-header-offset: 0 12px !default; - $fluent-scheduler-toolbar-item-offset: 4px !default; $fluent-scheduler-appointment-tooltip-title-font-size: 16px !default; $fluent-scheduler-appointment-tooltip-date-font-size: 14px !default; @@ -111,8 +110,6 @@ $header-panel-time-cell-padding: null !default; $fluent-scheduler-dropdown-button-padding: 4px !default; $fluent-scheduler-dropdown-button-margin: 5px 1px 3px 3px !default; $fluent-scheduler-dropdown-button-vertical-margin: 5px 3px 3px 3px !default; - $fluent-scheduler-dropdown-button-adaptive-margin: 0 2px !default; - $fluent-scheduler-dropdown-button-adaptive-vertical-margin: 0 2px 0 1px !default; $fluent-scheduler-appointment-tooltip-content-margin-left: 6px !default; $fluent-tooltip-marker-dimension: 12px !default; @@ -130,21 +127,8 @@ $header-panel-time-cell-padding: null !default; $agenda-appointment-title-font-size: 14px; - $fluent-scheduler-appointment-short-content-padding: 0 8px 0 12px !default; - $fluent-scheduler-appointment-15min-height: 17px !default; - $fluent-scheduler-appointment-20min-height: 24px !default; - $fluent-scheduler-appointment-25min-height: 32px !default; - - $fluent-scheduler-appointment-10min-recurrence-padding-right: 14px !default; - $fluent-scheduler-appointment-10min-title-font-size: 8px !default; - $fluent-scheduler-appointment-10min-title-line-height: 12px !default; - $fluent-scheduler-appointment-10min-icon-font-size: 12px !default; - $fluent-scheduler-appointment-10min-icon-right: 2px !default; - $fluent-scheduler-appointment-15min-recurrence-padding-right: 14px !default; - $fluent-scheduler-appointment-15min-title-font-size: 12px !default; $fluent-scheduler-appointment-15min-title-line-height: 18px !default; - $fluent-scheduler-appointment-15min-icon-font-size: 12px !default; $fluent-scheduler-appointment-15min-icon-right: 2px !default; $fluent-scheduler-appointment-20min-icon-right: 2px !default; @@ -162,7 +146,6 @@ $header-panel-time-cell-padding: null !default; $fluent-scheduler-header-panel-day-font-size: 14px !default; $fluent-scheduler-header-height: 34px !default; $fluent-scheduler-header-offset: 2px 8px !default; - $fluent-scheduler-toolbar-item-offset: 4px !default; $fluent-scheduler-appointment-tooltip-title-font-size: 14px !default; $fluent-scheduler-appointment-tooltip-date-font-size: 11px !default; @@ -176,8 +159,6 @@ $header-panel-time-cell-padding: null !default; $fluent-scheduler-dropdown-button-padding: 2px !default; $fluent-scheduler-dropdown-button-margin: 2px 1px 2px 3px !default; $fluent-scheduler-dropdown-button-vertical-margin: 2px 1px 2px 1px !default; - $fluent-scheduler-dropdown-button-adaptive-margin: 0 2px !default; - $fluent-scheduler-dropdown-button-adaptive-vertical-margin: 0 2px 0 1px !default; $fluent-scheduler-appointment-tooltip-content-margin-left: 8px !default; $fluent-tooltip-marker-dimension: 18px !default; @@ -195,21 +176,8 @@ $header-panel-time-cell-padding: null !default; $agenda-appointment-title-font-size: 13px; - $fluent-scheduler-appointment-short-content-padding: 0 8px 0 12px !default; - $fluent-scheduler-appointment-15min-height: 17px !default; - $fluent-scheduler-appointment-20min-height: 24px !default; - $fluent-scheduler-appointment-25min-height: 32px !default; - - $fluent-scheduler-appointment-10min-recurrence-padding-right: 14px !default; - $fluent-scheduler-appointment-10min-title-font-size: 8px !default; - $fluent-scheduler-appointment-10min-title-line-height: 12px !default; - $fluent-scheduler-appointment-10min-icon-font-size: 12px !default; - $fluent-scheduler-appointment-10min-icon-right: 2px !default; - $fluent-scheduler-appointment-15min-recurrence-padding-right: 16px !default; - $fluent-scheduler-appointment-15min-title-font-size: 12px !default; $fluent-scheduler-appointment-15min-title-line-height: 12px !default; - $fluent-scheduler-appointment-15min-icon-font-size: 12px !default; $fluent-scheduler-appointment-15min-icon-right: 5px !default; $fluent-scheduler-appointment-20min-recurrence-padding-right: 20px !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent/splitter/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/splitter/_colors.scss index 44c8a9441194..31e5ce8db750 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/splitter/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/splitter/_colors.scss @@ -10,19 +10,19 @@ $splitter-resize-handle-color: null !default; * $name 30. Focused state icon color * $type color */ -$splitter-resize-handle-color-focused: null !default; +$splitter-resize-handle-color-focused: $base-inverted-text-color !default; /** * $name 40. Handle background color * $type color */ -$splitter-resize-handle-bg: null !default; +$splitter-resize-handle-bg: $base-border-color !default; /** * $name 50. Handle hover state background color * $type color */ -$splitter-resize-handle-bg-hover: null !default; +$splitter-resize-handle-bg-hover: $base-border-color-hover !default; /** * $name 60. Handle focused state background color @@ -32,18 +32,10 @@ $splitter-resize-handle-bg-focused: $base-accent !default; @if $mode == "light" { $splitter-resize-handle-color: $base-icon-color !default; - $splitter-resize-handle-color-focused: $base-inverted-text-color !default; - - $splitter-resize-handle-bg: $base-border-color !default; - $splitter-resize-handle-bg-hover: $base-border-color-hover !default; } @if $mode == "dark" { $splitter-resize-handle-color: $base-text-color !default; - $splitter-resize-handle-color-focused: $base-inverted-text-color !default; - - $splitter-resize-handle-bg: $base-border-color !default; - $splitter-resize-handle-bg-hover: $base-border-color-hover !default; } /** diff --git a/packages/devextreme-scss/scss/widgets/fluent/switch/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/switch/_sizes.scss index c2817e8f9714..8906ee1bef54 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/switch/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/switch/_sizes.scss @@ -3,11 +3,9 @@ $fluent-switch-width: null !default; $switch-handle-margin: null !default; $switch-padding: 8px !default; -$switch-container-vertical-margin: null !default; -$switch-container-horizontal-padding: null !default; +$switch-container-vertical-margin: 0 !default; $fluent-switch-height: null !default; $switch-handle-height: null !default; -$switch-container-height: null !default; $fluent-switch-shadow-blur-radius: 0 !default; $fluent-switch-container-adjustment: 6px !default; @@ -16,18 +14,15 @@ $fluent-switch-container-adjustment: 6px !default; $fluent-switch-width: 40px !default; $switch-handle-height: 14px !default; $switch-handle-margin: 3px !default; - $switch-container-vertical-margin: 0 !default; - $switch-container-horizontal-padding: $switch-handle-margin !default; $fluent-switch-height: 20px !default; - $switch-container-height: $fluent-switch-height !default; } @else if $size == "compact" { $fluent-switch-width: 32px !default; $switch-handle-height: 12px !default; $switch-handle-margin: 2px !default; - $switch-container-vertical-margin: 0 !default; - $switch-container-horizontal-padding: $switch-handle-margin !default; $fluent-switch-height: 16px !default; - $switch-container-height: $fluent-switch-height !default; } + +$switch-container-horizontal-padding: $switch-handle-margin !default; +$switch-container-height: $fluent-switch-height !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent/tabs/variables/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/tabs/variables/_sizes.scss index 1793c8ce0a4a..0c73f52e0640 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/tabs/variables/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/tabs/variables/_sizes.scss @@ -1,22 +1,21 @@ @use "../../sizes" as *; $fluent-tabs-item-gap: 4px !default; -$fluent-tabs-item-padding: null !default; $fluent-tabs-item-padding-top-bottom: null !default; $fluent-tabs-item-padding-right-left: null !default; -$fluent-tab-height: null !default; +$fluent-tab-height: auto !default; $fluent-tab-font-weight-basic: 400 !default; $fluent-tab-font-weight-accent: 500 !default; -$fluent-base-icon-margin: null !default; +$fluent-base-icon-margin: 8px !default; $fluent-tabs-icon-size: $fluent-base-icon-size !default; $fluent-tab-nav-button-icon-width: null !default; $fluent-tab-nav-button-icon-height: null !default; $fluent-tab-nav-button-icon-font-size: null !default; -$fluent-tab-nav-button-content-padding: null !default; +$fluent-tab-nav-button-content-padding: 0 4px !default; -$fluent-tab-vertical-nav-button-content-padding: null !default; +$fluent-tab-vertical-nav-button-content-padding: 4px 0 !default; $fluent-indicator-thickness-primary: 2px !default; $fluent-indicator-thickness-secondary: 3px !default; @@ -32,27 +31,19 @@ $fluent-badge-min-size: null !default; @if $size == "default" { $fluent-tabs-item-padding-top-bottom: 12px !default; $fluent-tabs-item-padding-right-left: 10px !default; - $fluent-tabs-item-padding: $fluent-tabs-item-padding-top-bottom $fluent-tabs-item-padding-right-left !default; - $fluent-tab-height: auto !default; - $fluent-base-icon-margin: 8px !default; $fluent-tab-nav-button-icon-width: 20px !default; $fluent-tab-nav-button-icon-height: 20px !default; $fluent-tab-nav-button-icon-font-size: 20px !default; - $fluent-tab-nav-button-content-padding: 0 4px !default; - $fluent-tab-vertical-nav-button-content-padding: 4px 0 !default; $fluent-badge-min-size: 20px !default; } @else if $size == "compact" { $fluent-tabs-item-padding-top-bottom: 8px !default; $fluent-tabs-item-padding-right-left: 8px !default; - $fluent-tabs-item-padding: $fluent-tabs-item-padding-top-bottom $fluent-tabs-item-padding-right-left !default; - $fluent-tab-height: auto !default; - $fluent-base-icon-margin: 8px !default; $fluent-tab-nav-button-icon-width: 16px !default; $fluent-tab-nav-button-icon-height: 16px !default; $fluent-tab-nav-button-icon-font-size: 16px !default; - $fluent-tab-nav-button-content-padding: 0 4px !default; - $fluent-tab-vertical-nav-button-content-padding: 4px 0 !default; $fluent-badge-min-size: 16px !default; } + +$fluent-tabs-item-padding: $fluent-tabs-item-padding-top-bottom $fluent-tabs-item-padding-right-left !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent/tagBox/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/tagBox/_sizes.scss index 214f072e13de..92052e567b9e 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/tagBox/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/tagBox/_sizes.scss @@ -1,7 +1,7 @@ @use "../sizes" as *; $fluent-tagbox-tag-content-padding-left: null !default; -$fluent-tagbox-tag-content-padding-right: null !default; +$fluent-tagbox-tag-content-padding-right: 20px !default; $fluent-tagbox-tag-content-vertical-padding: null !default; $fluent-tagbox-tag-content-font-size: null !default; $fluent-tagbox-tag-container-padding-left: null !default; @@ -17,7 +17,6 @@ $fluent-tagbox-tag-container-gap: null !default; @if $size == "default" { $fluent-tagbox-tag-content-padding-left: 6px !default; - $fluent-tagbox-tag-content-padding-right: 20px !default; $fluent-tagbox-tag-content-vertical-padding: 2px !default; $fluent-tagbox-tag-content-font-size: 12px !default; $fluent-tagbox-tag-container-padding-left: 12px !default; @@ -31,7 +30,6 @@ $fluent-tagbox-tag-container-gap: null !default; @else if $size == "compact" { $fluent-tagbox-tag-content-padding-left: 4px !default; - $fluent-tagbox-tag-content-padding-right: 20px !default; $fluent-tagbox-tag-content-vertical-padding: 0 !default; $fluent-tagbox-tag-content-font-size: 10px !default; $fluent-tagbox-tag-container-padding-left: 8px !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent/textEditor/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/textEditor/_colors.scss index b711bc2cce9d..e5337797a97a 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/textEditor/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/textEditor/_colors.scss @@ -90,17 +90,17 @@ $texteditor-label-transition: top 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms; @if $mode == "light" { + $texteditor-outlined-bg: $base-element-bg !default; + @if $color == "blue" { $texteditor-color: $base-text-color !default; $texteditor-placeholder-color: color.adjust($base-text-color, $lightness: 29.80%, $space: hsl) !default; - $texteditor-outlined-bg: $base-element-bg !default; $texteditor-filled-bg: color.adjust($base-element-bg, $lightness: -3.9%, $space: hsl) !default; } @if $color == "saas" { $texteditor-color: rgba(66, 81, 118, 1) !default; $texteditor-placeholder-color: rgba(144, 158, 192, 1) !default; - $texteditor-outlined-bg: $base-element-bg !default; $texteditor-filled-bg: rgba(243, 245, 248, 1) !default; } diff --git a/packages/devextreme-scss/scss/widgets/fluent/textEditor/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/textEditor/_sizes.scss index eabf7d1cf17a..d49693d85091 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/textEditor/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/textEditor/_sizes.scss @@ -4,13 +4,13 @@ $fluent-texteditor-line-height: null !default; $fluent-texteditor-font-size: null !default; $fluent-texteditor-input-height: null !default; -$fluent-texteditor-label-top-offset: null !default; +$fluent-texteditor-label-top-offset: -1px !default; $fluent-texteditor-label-outside-top-offset: null !default; $fluent-filled-texteditor-input-horizontal-padding: null !default; $fluent-filled-texteditor-input-top-padding: null !default; $fluent-filled-texteditor-input-bottom-padding: null !default; $fluent-standard-texteditor-input-top-padding: null !default; -$fluent-underlined-editor-button-height: null !default; +$fluent-underlined-editor-button-height: 22px !default; $fluent-texteditor-label-font-size: null !default; $fluent-texteditor-label-outside-height: null !default; $fluent-standard-texteditor-input-bottom-padding: null !default; @@ -27,7 +27,6 @@ $texteditor-icon-container-size: $fluent-base-icon-size !default; $fluent-texteditor-label-outside-height: 20px !default; $fluent-texteditor-label-outside-top-offset: 24px !default; $fluent-texteditor-label-font-size: 12px !default; - $fluent-texteditor-label-top-offset: -1px !default; $fluent-filled-texteditor-input-horizontal-padding: 12px !default; $fluent-filled-texteditor-input-top-padding: 5px !default; $fluent-filled-texteditor-input-with-label-top-padding: 8px !default; @@ -37,7 +36,6 @@ $texteditor-icon-container-size: $fluent-base-icon-size !default; $fluent-standard-texteditor-input-bottom-padding: 5px !default; $fluent-standard-texteditor-with-label-input-top-padding: 9px !default; $fluent-standard-texteditor-with-label-input-bottom-padding: 3px !default; - $fluent-underlined-editor-button-height: 22px !default; } @else if $size == "compact" { @@ -47,7 +45,6 @@ $texteditor-icon-container-size: $fluent-base-icon-size !default; $fluent-texteditor-label-outside-height: 16px !default; $fluent-texteditor-label-outside-top-offset: 18px !default; $fluent-texteditor-label-font-size: 10px !default; - $fluent-texteditor-label-top-offset: -1px !default; $fluent-filled-texteditor-input-horizontal-padding: 8px !default; $fluent-filled-texteditor-input-top-padding: 3px !default; $fluent-filled-texteditor-input-with-label-top-padding: 6px !default; @@ -57,7 +54,6 @@ $texteditor-icon-container-size: $fluent-base-icon-size !default; $fluent-standard-texteditor-input-bottom-padding: 3px !default; $fluent-standard-texteditor-with-label-input-top-padding: 6px !default; $fluent-standard-texteditor-with-label-input-bottom-padding: 2px !default; - $fluent-underlined-editor-button-height: 22px !default; } $fluent-filled-texteditor-input-padding: diff --git a/packages/devextreme-scss/scss/widgets/fluent/tooltip/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/tooltip/_sizes.scss index 62ab9b9c048a..6bd67df0c85a 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/tooltip/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/tooltip/_sizes.scss @@ -2,16 +2,14 @@ @use "../sizes" as *; $fluent-tooltip-padding: null !default; -$fluent-tooltip-font-size: null !default; +$fluent-tooltip-font-size: 12px; $fluent-tooltip-arrow-border-radius: 2px !default; $fluent-tooltip-shadow: 0 0 2px 0 $base-dropdown-shadow-color1 !default; @if $size == "default" { $fluent-tooltip-padding: 7px 11px !default; - $fluent-tooltip-font-size: 12px; } @else if $size == "compact" { $fluent-tooltip-padding: 3px 5px !default; - $fluent-tooltip-font-size: 12px; } diff --git a/packages/devextreme-scss/scss/widgets/fluent/typography/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/typography/_sizes.scss index 554959097d56..7a73a5756f5e 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/typography/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/typography/_sizes.scss @@ -4,7 +4,7 @@ $fluent-xl-font-size: null !default; $fluent-l-font-size: null !default; $fluent-m-font-size: null !default; $fluent-s-font-size: null !default; -$fluent-xs-font-size: null !default; +$fluent-xs-font-size: 12px !default; $fluent-h1-font-size: null !default; $fluent-h2-font-size: null !default; $fluent-h3-font-size: null !default; @@ -17,7 +17,6 @@ $fluent-h6-font-size: null !default; $fluent-l-font-size: 28px !default; $fluent-m-font-size: 20px !default; $fluent-s-font-size: 18px !default; - $fluent-xs-font-size: 12px !default; $fluent-h1-font-size: 40px !default; $fluent-h2-font-size: 36px !default; @@ -32,7 +31,6 @@ $fluent-h6-font-size: null !default; $fluent-l-font-size: 20px !default; $fluent-m-font-size: 16px !default; $fluent-s-font-size: 14px !default; - $fluent-xs-font-size: 12px !default; $fluent-h1-font-size: 32px !default; $fluent-h2-font-size: 28px !default; diff --git a/packages/devextreme-scss/scss/widgets/generic/cardView/_sizes.scss b/packages/devextreme-scss/scss/widgets/generic/cardView/_sizes.scss index e1f0ed77f527..e80841f925e5 100644 --- a/packages/devextreme-scss/scss/widgets/generic/cardView/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/generic/cardView/_sizes.scss @@ -17,14 +17,14 @@ * $name 101. Border radius * $type text */ -$cardview-generic-common-border-radius: null !default; +$cardview-generic-common-border-radius: 16px !default; /** * $name 104. Text weight * $type select * $type-values 100|200|300|400|500|600|700|800|900 */ -$cardview-generic-common-text-weight: null !default; +$cardview-generic-common-text-weight: 400 !default; /** * $name 105. Vertical gap between cards @@ -46,9 +46,9 @@ $cardview-generic-common-padding: null !default; // #region CARD -$cardview-generic-card-min-width: null !default; +$cardview-generic-card-min-width: 250px !default; -$cardview-generic-card-border-width: null !default; +$cardview-generic-card-border-width: 1px !default; /** * $name 202. Border radius @@ -67,7 +67,7 @@ $cardview-generic-card__header__selection-checkbox-padding-right: null !default; * $type select * $type-values 100|200|300|400|500|600|700|800|900 */ -$cardview-generic-card__field-caption-weight: null !default; +$cardview-generic-card__field-caption-weight: 600 !default; $cardview-generic-card__cover-max-height: null !default; @@ -90,13 +90,13 @@ $cardview-generic-card__content__cell-padding-horizontal: null !default; * $type select * $type-values 100|200|300|400|500|600|700|800|900 */ -$cardview-generic-card--selected__field-caption-weight: null !default; +$cardview-generic-card--selected__field-caption-weight: $cardview-generic-card__field-caption-weight !default; // #endregion // #region HEADER -$cardview-generic-header-gap: null !default; +$cardview-generic-header-gap: 12px !default; // #endregion @@ -110,13 +110,13 @@ $cardview-generic-header-panel--empty-line-height: null !default; // #region HEADER PANEL ITEM -$cardview-generic-header-panel__item-border-width: null !default; +$cardview-generic-header-panel__item-border-width: 1px !default; /** * $name 402. Border radius * $type text */ -$cardview-generic-header-panel__item-border-radius: null !default; +$cardview-generic-header-panel__item-border-radius: 4px !default; $cardview-generic-header-panel__item-padding-vertical: null !default; @@ -129,16 +129,16 @@ $cardview-generic-header-panel__item-line-height: null !default; * $type select * $type-values 100|200|300|400|500|600|700|800|900 */ -$cardview-generic-header-panel__item-text-weight: null !default; +$cardview-generic-header-panel__item-text-weight: $cardview-generic-common-text-weight !default; /** * $name 408. Sort index text weight * $type select * $type-values 100|200|300|400|500|600|700|800|900 */ -$cardview-generic-header-panel__item__sort-index-text-weight: null !default; +$cardview-generic-header-panel__item__sort-index-text-weight: 400 !default; -$cardview-generic-header-panel__item__icon-size: null !default; +$cardview-generic-header-panel__item__icon-size: $generic-base-icon-size !default; $cardview-generic-header-item__left-padding: null !default; $cardview-generic-header-item__right-padding: null !default; @@ -152,14 +152,14 @@ $cardview-generic-header-item__right-padding: null !default; * $type select * $type-values 100|200|300|400|500|600|700|800|900 */ -$cardview-generic-header-panel__item--hovered-text-weight: null !default; +$cardview-generic-header-panel__item--hovered-text-weight: $cardview-generic-header-panel__item-text-weight !default; /** * $name 507. Sort index text weight * $type select * $type-values 100|200|300|400|500|600|700|800|900 */ -$cardview-generic-header-panel__item--hovered__sort-index-text-weight: null !default; +$cardview-generic-header-panel__item--hovered__sort-index-text-weight: $cardview-generic-header-panel__item__sort-index-text-weight !default; // #endregion @@ -170,14 +170,14 @@ $cardview-generic-header-panel__item--hovered__sort-index-text-weight: null !def * $type select * $type-values 100|200|300|400|500|600|700|800|900 */ -$cardview-generic-header-panel__item--disabled-text-weight: null !default; +$cardview-generic-header-panel__item--disabled-text-weight: $cardview-generic-header-panel__item-text-weight !default; /** * $name 607. Sort index text weight * $type select * $type-values 100|200|300|400|500|600|700|800|900 */ -$cardview-generic-header-panel__item--disabled__sort-index-text-weight: null !default; +$cardview-generic-header-panel__item--disabled__sort-index-text-weight: $cardview-generic-header-panel__item__sort-index-text-weight !default; // #endregion @@ -188,7 +188,7 @@ $cardview-generic-header-panel__item--disabled__sort-index-text-weight: null !de * $type select * $type-values 100|200|300|400|500|600|700|800|900 */ -$cardview-generic-header-panel__item--dragged-text-weight: null !default; +$cardview-generic-header-panel__item--dragged-text-weight: $cardview-generic-header-panel__item-text-weight !default; $cardview-generic-header-item__sort-indicator__border-size: null; $cardview-generic-header-item__sort-indicator__border-radius: null; @@ -199,9 +199,9 @@ $cardview-generic-header-item__sort-indicator__border-radius: null; $cardview-generic-header-panel__dropzone-height: null !default; -$cardview-generic-header-panel__dropzone-top: null !default; +$cardview-generic-header-panel__dropzone-top: 0 !default; -$cardview-generic-header-panel__dropzone-border-width: null !default; +$cardview-generic-header-panel__dropzone-border-width: 1.5px !default; /** * $name 801. Border radius @@ -217,7 +217,7 @@ $cardview-generic-header-panel__dropzone-border-radius: null !default; * $name 901. Border radius * $type text */ -$cardview-generic-filter-panel-border-radius: null !default; +$cardview-generic-filter-panel-border-radius: 0 !default; // #endregion @@ -237,16 +237,16 @@ $cardview-generic-nodata-view__icon-size: null !default; * $name 1101. Border radius * $type text */ -$cardview-generic-card__content__field-value--highlighted-border-radius: null !default; +$cardview-generic-card__content__field-value--highlighted-border-radius: 5px !default; -$cardview-generic-card__content__field-value--highlighted-border-padding: null !default; +$cardview-generic-card__content__field-value--highlighted-border-padding: 0.125em 0.2em !default; /** * $name 1103. Text weight * $type select * $type-values 100|200|300|400|500|600|700|800|900 */ -$cardview-generic-card__content__field-value--highlighted-text-weight: null !default; +$cardview-generic-card__content__field-value--highlighted-text-weight: 500 !default; // #endregion @@ -261,21 +261,16 @@ $cardview-generic-column-chooser__select-all-item-horizontal-padding: null !defa @if $size == "default" { // Common - $cardview-generic-common-border-radius: 16px !default; - $cardview-generic-common-text-weight: 400 !default; $cardview-generic-common-cards-row-gap: 16px !default; $cardview-generic-common-cards-column-gap: 16px !default; $cardview-generic-common-gap: 20px !default; $cardview-generic-common-padding: 24px !default; // Card - $cardview-generic-card-min-width: 250px !default; - $cardview-generic-card-border-width: 1px !default; $cardview-generic-card-border-radius: 8px !default; $cardview-generic-card__header-height: 52px !default; $cardview-generic-card__header-text-size: 16px !default; $cardview-generic-card__header__selection-checkbox-padding-right: 12px !default; - $cardview-generic-card__field-caption-weight: 600 !default; $cardview-generic-card__cover-max-height: 180px !default; $cardview-generic-card__cover--noimage__icon-size: 48px !default; $cardview-generic-card__content-padding: 12px !default; @@ -283,60 +278,30 @@ $cardview-generic-column-chooser__select-all-item-horizontal-padding: null !defa $cardview-generic-card__content__cell-padding-vertical: 6px !default; $cardview-generic-card__content__cell-padding-horizontal: 12px !default; - // Card - selected - $cardview-generic-card--selected__field-caption-weight: $cardview-generic-card__field-caption-weight !default; - - // Header - $cardview-generic-header-gap: 12px !default; - // Header panel $cardview-generic-header-panel-vertical-margin: 4px !default; $cardview-generic-header-panel--empty-line-height: 36px !default; // Header panel item - default - $cardview-generic-header-panel__item-border-width: 1px !default; - $cardview-generic-header-panel__item-border-radius: 4px !default; $cardview-generic-header-panel__item-padding-horizontal: 12px !default; $cardview-generic-header-panel__item-padding-vertical: 8px !default; $cardview-generic-header-item__left-padding: 6px !default; $cardview-generic-header-item__right-padding: 2px !default; $cardview-generic-header-panel__item-line-height: 18px !default; - $cardview-generic-header-panel__item-text-weight: $cardview-generic-common-text-weight !default; - $cardview-generic-header-panel__item__sort-index-text-weight: 400 !default; - $cardview-generic-header-panel__item__icon-size: $generic-base-icon-size !default; - - // Header panel item - hovered - $cardview-generic-header-panel__item--hovered-text-weight: $cardview-generic-header-panel__item-text-weight !default; - $cardview-generic-header-panel__item--hovered__sort-index-text-weight: $cardview-generic-header-panel__item__sort-index-text-weight !default; - - // Header panel item - disabled - $cardview-generic-header-panel__item--disabled-text-weight: $cardview-generic-header-panel__item-text-weight !default; - $cardview-generic-header-panel__item--disabled__sort-index-text-weight: $cardview-generic-header-panel__item__sort-index-text-weight !default; // Header panel item - dragged - $cardview-generic-header-panel__item--dragged-text-weight: $cardview-generic-header-panel__item-text-weight !default; $cardview-generic-header-item__sort-indicator__border-size: 2px !default; $cardview-generic-header-item__sort-indicator__border-radius: 8px !default; // Header panel Drop-zone $cardview-generic-header-panel__dropzone-height: 36px !default; - $cardview-generic-header-panel__dropzone-top: 0 !default; - $cardview-generic-header-panel__dropzone-border-width: 1.5px !default; $cardview-generic-header-panel__dropzone-border-radius: 8px !default; - // Filter panel - $cardview-generic-filter-panel-border-radius: 0 !default; - // Empty view $cardview-generic-nodata-view__icon-container-size: 60px !default; $cardview-generic-nodata-view__icon-container-margin: 12px !default; $cardview-generic-nodata-view__icon-size: 36px !default; - // Search highlight - $cardview-generic-card__content__field-value--highlighted-border-radius: 5px !default; - $cardview-generic-card__content__field-value--highlighted-border-padding: 0.125em 0.2em !default; - $cardview-generic-card__content__field-value--highlighted-text-weight: 500 !default; - // Column chooser $cardview-generic-column-chooser--empty__message-horizontal-padding: 24px !default; $cardview-generic-column-chooser__select-all-item-horizontal-padding: 10px !default; @@ -344,21 +309,16 @@ $cardview-generic-column-chooser__select-all-item-horizontal-padding: null !defa @else if $size == "compact" { // Common - $cardview-generic-common-border-radius: 16px !default; - $cardview-generic-common-text-weight: 400 !default; $cardview-generic-common-cards-row-gap: 12px !default; $cardview-generic-common-cards-column-gap: 12px !default; $cardview-generic-common-gap: 16px !default; $cardview-generic-common-padding: 16px !default; // Card - $cardview-generic-card-min-width: 250px !default; - $cardview-generic-card-border-width: 1px !default; $cardview-generic-card-border-radius: 6px !default; $cardview-generic-card__header-height: 48px !default; $cardview-generic-card__header-text-size: 14px !default; $cardview-generic-card__header__selection-checkbox-padding-right: 8px !default; - $cardview-generic-card__field-caption-weight: 600 !default; $cardview-generic-card__cover-max-height: 140px !default; $cardview-generic-card__cover--noimage__icon-size: 32px !default; $cardview-generic-card__content-padding: 8px !default; @@ -366,60 +326,30 @@ $cardview-generic-column-chooser__select-all-item-horizontal-padding: null !defa $cardview-generic-card__content__cell-padding-vertical: 4px !default; $cardview-generic-card__content__cell-padding-horizontal: 8px !default; - // Card - selected - $cardview-generic-card--selected__field-caption-weight: $cardview-generic-card__field-caption-weight !default; - - // Header - $cardview-generic-header-gap: 12px !default; - // Header panel $cardview-generic-header-panel-vertical-margin: 0 !default; $cardview-generic-header-panel--empty-line-height: 24px !default; // Header panel item - default - $cardview-generic-header-panel__item-border-width: 1px !default; - $cardview-generic-header-panel__item-border-radius: 4px !default; $cardview-generic-header-panel__item-padding-horizontal: 8px !default; $cardview-generic-header-panel__item-padding-vertical: 5px !default; $cardview-generic-header-item__left-padding: 3px !default; $cardview-generic-header-item__right-padding: 1px !default; $cardview-generic-header-panel__item-line-height: 14px !default; - $cardview-generic-header-panel__item-text-weight: $cardview-generic-common-text-weight !default; - $cardview-generic-header-panel__item__sort-index-text-weight: 400 !default; - $cardview-generic-header-panel__item__icon-size: $generic-base-icon-size !default; - - // Header panel item - hovered - $cardview-generic-header-panel__item--hovered-text-weight: $cardview-generic-header-panel__item-text-weight !default; - $cardview-generic-header-panel__item--hovered__sort-index-text-weight: $cardview-generic-header-panel__item__sort-index-text-weight !default; - - // Header panel item - disabled - $cardview-generic-header-panel__item--disabled-text-weight: $cardview-generic-header-panel__item-text-weight !default; - $cardview-generic-header-panel__item--disabled__sort-index-text-weight: $cardview-generic-header-panel__item__sort-index-text-weight !default; // Header panel item - dragged - $cardview-generic-header-panel__item--dragged-text-weight: $cardview-generic-header-panel__item-text-weight !default; $cardview-generic-header-item__sort-indicator__border-size: 1px !default; $cardview-generic-header-item__sort-indicator__border-radius: 4px !default; // Header panel Drop-zone $cardview-generic-header-panel__dropzone-height: 24px !default; - $cardview-generic-header-panel__dropzone-top: 0 !default; - $cardview-generic-header-panel__dropzone-border-width: 1.5px !default; $cardview-generic-header-panel__dropzone-border-radius: 6px !default; - // Filter panel - $cardview-generic-filter-panel-border-radius: 0 !default; - // Empty view $cardview-generic-nodata-view__icon-container-size: 40px !default; $cardview-generic-nodata-view__icon-container-margin: 8px !default; $cardview-generic-nodata-view__icon-size: 24px !default; - // Search highlight - $cardview-generic-card__content__field-value--highlighted-border-radius: 5px !default; - $cardview-generic-card__content__field-value--highlighted-border-padding: 0.125em 0.2em !default; - $cardview-generic-card__content__field-value--highlighted-text-weight: 500 !default; - // Column chooser $cardview-generic-column-chooser--empty__message-horizontal-padding: 16px !default; $cardview-generic-column-chooser__select-all-item-horizontal-padding: 6px !default; diff --git a/packages/devextreme-scss/scss/widgets/generic/chat/_sizes.scss b/packages/devextreme-scss/scss/widgets/generic/chat/_sizes.scss index d7d7f7342931..5c6de4412cf1 100644 --- a/packages/devextreme-scss/scss/widgets/generic/chat/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/generic/chat/_sizes.scss @@ -59,7 +59,6 @@ $chat-messagelist-day-header-first-padding-top: 20px !default; $chat-messagelist-day-header-font-size: 12px !default; $chat-typingindicator-template: $chat-messagegroup-alignment-start-template !default; -$chat-typingindicator-padding: null !default; $chat-typingindicator-row-gap: $chat-messagegroup-gap !default; $chat-typingindicator-font-size: $chat-information-font-size !default; $chat-typingindicator-bubble-padding-block: null !default; @@ -119,7 +118,6 @@ $chat-bubble-gap: 8px !default; $chat-typingindicator-circle-size-center: math.div(12, 14) * 1em !default; $chat-typingindicator-bubble-padding-block: 12px !default; $chat-typingindicator-bubble-padding-inline: 20px !default; - $chat-typingindicator-padding: $chat-messagegroup-padding !default; $chat-confirmation-popup-content-padding: 0 !default; $chat-confirmation-popup-toolbar-gap: 8px !default; @@ -160,10 +158,11 @@ $chat-bubble-gap: 8px !default; $chat-typingindicator-circle-size-center: math.div(12, 12) * 1em !default; $chat-typingindicator-bubble-padding-block: 8px !default; $chat-typingindicator-bubble-padding-inline: 12px !default; - $chat-typingindicator-padding: $chat-messagegroup-padding !default; $chat-confirmation-popup-content-padding: $generic-popup-content-padding !default; $chat-confirmation-popup-toolbar-gap: 4px !default; $chat-file-icon-font-size: 14 !default; } + +$chat-typingindicator-padding: $chat-messagegroup-padding !default; diff --git a/packages/devextreme-scss/scss/widgets/generic/checkBox/_sizes.scss b/packages/devextreme-scss/scss/widgets/generic/checkBox/_sizes.scss index 4d759dc73135..bda37bf216e9 100644 --- a/packages/devextreme-scss/scss/widgets/generic/checkBox/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/generic/checkBox/_sizes.scss @@ -5,7 +5,7 @@ $generic-checkbox-icon-font-size: null !default; $generic-checkbox-border-width: 1px !default; -$generic-checkbox-border-radius: null !default; +$generic-checkbox-border-radius: if($base-border-radius-exsmall, min($base-border-radius-exsmall, 2px), null) !default; $generic-checkbox-arrow-icon-size: 1em !default; $generic-checkbox-arrow-font-size: null !default; @@ -16,12 +16,10 @@ $generic-checkbox-indeterminate-icon-border-radius: 2px !default; $generic-checkbox-icon-font-size: 22px !default; $generic-checkbox-arrow-font-size: 0.727273em !default; $generic-checkbox-indeterminate-icon-size: 0.545455em !default; - $generic-checkbox-border-radius: if($base-border-radius-exsmall, min($base-border-radius-exsmall, 2px), null) !default; } @else if $size == "compact" { $generic-checkbox-icon-font-size: 16px !default; $generic-checkbox-arrow-font-size: 0.625em !default; $generic-checkbox-indeterminate-icon-size: 0.5em !default; - $generic-checkbox-border-radius: if($base-border-radius-exsmall, min($base-border-radius-exsmall, 2px), null) !default; } diff --git a/packages/devextreme-scss/scss/widgets/generic/fileManager/_sizes.scss b/packages/devextreme-scss/scss/widgets/generic/fileManager/_sizes.scss index 50a1d5bc883e..7e82ab74502a 100644 --- a/packages/devextreme-scss/scss/widgets/generic/fileManager/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/generic/fileManager/_sizes.scss @@ -4,7 +4,7 @@ $filemanager-toolbar-separator-height: null !default; $filemanager-toolbar-viewmode-width: null !default; $filemanager-toolbar-viewmode-padding: null !default; -$filemanager-toolbar-height: null !default; +$filemanager-toolbar-height: $generic-toolbar-height + 12px; $filemanager-breadcrumbs-item-padding-top: null !default; $filemanager-breadcrumbs-item-padding-bottom: null !default; $filemanager-details-view-checkbox-column-width: null !default; @@ -21,7 +21,6 @@ $filemanager-progress-panel-padding-top: 6px !default; $filemanager-toolbar-separator-height: 36px !default; $filemanager-toolbar-viewmode-width: 150px !default; $filemanager-toolbar-viewmode-padding: 8px !default; - $filemanager-toolbar-height: $generic-toolbar-height + 12px; $filemanager-breadcrumbs-item-padding-top: 5px !default; $filemanager-breadcrumbs-item-padding-bottom: 8px !default; $filemanager-details-view-checkbox-column-width: 43px !default; @@ -37,7 +36,6 @@ $filemanager-progress-panel-padding-top: 6px !default; $filemanager-toolbar-separator-height: 26px !default; $filemanager-toolbar-viewmode-width: 130px !default; $filemanager-toolbar-viewmode-padding: 5px !default; - $filemanager-toolbar-height: $generic-toolbar-height + 12px; $filemanager-breadcrumbs-item-padding-top: 3px !default; $filemanager-breadcrumbs-item-padding-bottom: 7px !default; $filemanager-details-view-checkbox-column-width: 39px !default; diff --git a/packages/devextreme-scss/scss/widgets/generic/filterBuilder/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/filterBuilder/_colors.scss index 151208112147..238ce96d88f5 100644 --- a/packages/devextreme-scss/scss/widgets/generic/filterBuilder/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/generic/filterBuilder/_colors.scss @@ -67,7 +67,7 @@ $filterbuilder-item-value-focus-color: null !default; * $name 10. Menu icon color * $type color */ -$filterbuilder-menu-icon-color: null !default; +$filterbuilder-menu-icon-color: $base-text-color !default; @if $color == "carmine" { $filterbuilder-text-color: $base-text-color !default; @@ -90,7 +90,6 @@ $filterbuilder-menu-icon-color: null !default; $filterbuilder-item-value-color: color.change($base-border-color, $alpha: 0.5) !default; $filterbuilder-item-value-hover-color: $filterbuilder-item-value-color !default; $filterbuilder-item-value-focus-color: color.adjust($filterbuilder-item-value-color, $alpha: 0.7) !default; - $filterbuilder-menu-icon-color: $base-text-color !default; } @if $color == "contrast" { @@ -114,7 +113,6 @@ $filterbuilder-menu-icon-color: null !default; $filterbuilder-item-value-focus-color: $filterbuilder-item-value-color !default; $filterbuilder-text-color: $base-text-color !default; $filterbuilder-text-focus-color: $base-text-color !default; - $filterbuilder-menu-icon-color: $base-text-color !default; } @if $color == "dark" { @@ -138,13 +136,11 @@ $filterbuilder-menu-icon-color: null !default; $filterbuilder-item-value-color: rgba(204, 204, 204, 0.8) !default; $filterbuilder-item-value-hover-color: color.adjust($filterbuilder-item-value-color, $alpha: -0.1) !default; $filterbuilder-item-value-focus-color: color.adjust($filterbuilder-item-value-color, $alpha: 0.2) !default; - $filterbuilder-menu-icon-color: $base-text-color !default; } @if $color == "darkmoon" { $filterbuilder-text-color: #000 !default; $filterbuilder-text-focus-color: $filterbuilder-text-color !default; - $filterbuilder-menu-icon-color: $base-text-color !default; $filterbuilder-plus-icon-color: color.change($base-success, $alpha: 0.8) !default; $filterbuilder-plus-icon-hover-color: color.adjust($filterbuilder-plus-icon-color, $alpha: -0.1) !default; $filterbuilder-plus-icon-focus-color: color.adjust($filterbuilder-plus-icon-color, $alpha: 0.2) !default; @@ -186,7 +182,6 @@ $filterbuilder-menu-icon-color: null !default; $filterbuilder-item-value-color: rgba(204, 204, 204, 0.8) !default; $filterbuilder-item-value-hover-color: color.adjust($filterbuilder-item-value-color, $alpha: -0.1) !default; $filterbuilder-item-value-focus-color: color.adjust($filterbuilder-item-value-color, $alpha: 0.2) !default; - $filterbuilder-menu-icon-color: $base-text-color !default; } @if $color == "greenmist" { @@ -210,7 +205,6 @@ $filterbuilder-menu-icon-color: null !default; $filterbuilder-item-value-color: color.change($base-border-color, $alpha: 0.5) !default; $filterbuilder-item-value-hover-color: $filterbuilder-item-value-color !default; $filterbuilder-item-value-focus-color: color.adjust($filterbuilder-item-value-color, $alpha: 0.7) !default; - $filterbuilder-menu-icon-color: $base-text-color !default; } @if $color == "light" { @@ -234,7 +228,6 @@ $filterbuilder-menu-icon-color: null !default; $filterbuilder-item-value-color: color.change($base-border-color, $alpha: 0.5) !default; $filterbuilder-item-value-hover-color: $filterbuilder-item-value-color !default; $filterbuilder-item-value-focus-color: color.adjust($filterbuilder-item-value-color, $alpha: 0.7) !default; - $filterbuilder-menu-icon-color: $base-text-color !default; } @if $color == "softblue" { @@ -258,5 +251,4 @@ $filterbuilder-menu-icon-color: null !default; $filterbuilder-item-value-color: color.change($base-border-color, $alpha: 0.5) !default; $filterbuilder-item-value-hover-color: $filterbuilder-item-value-color !default; $filterbuilder-item-value-focus-color: color.adjust($filterbuilder-item-value-color, $alpha: 0.7) !default; - $filterbuilder-menu-icon-color: $base-text-color !default; } diff --git a/packages/devextreme-scss/scss/widgets/generic/gridBase/_sizes.scss b/packages/devextreme-scss/scss/widgets/generic/gridBase/_sizes.scss index 3d9e0643fe47..2ce6b729b277 100644 --- a/packages/devextreme-scss/scss/widgets/generic/gridBase/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/generic/gridBase/_sizes.scss @@ -16,8 +16,8 @@ $generic-grid-base-checkbox-fontsize: null !default; $generic-grid-base-adaptive-text-padding: null !default; $generic-grid-base-treeview-search-margin: null !default; $generic-command-edit-icon-size: null !default; -$generic-command-edit-icon-margin: null !default; -$generic-command-edit-text-margin: null !default; +$generic-command-edit-icon-margin: 5px !default; +$generic-command-edit-text-margin: 2px !default; $generic-grid-base-nodata-font-size: null !default; $generic-grid-base-checkbox-padding-bottom: null !default; $generic-grid-base-treeview-select-all-item-offset: null !default; @@ -46,8 +46,6 @@ $generic-grid-base-ai-prompt-editor-progressbar-height: 4px !default; $generic-grid-base-adaptive-text-padding: 8px !default; $generic-grid-base-treeview-search-margin: 10px !default; $generic-command-edit-icon-size: 18px !default; - $generic-command-edit-icon-margin: 5px !default; - $generic-command-edit-text-margin: 2px !default; $generic-grid-base-nodata-font-size: 17px !default; $generic-grid-base-checkbox-padding-bottom: 2px; $generic-grid-base-treeview-select-all-item-offset: 34px; @@ -73,8 +71,6 @@ $generic-grid-base-ai-prompt-editor-progressbar-height: 4px !default; $generic-grid-base-adaptive-text-padding: 6px !default; $generic-grid-base-treeview-search-margin: 5px !default; $generic-command-edit-icon-size: 14px !default; - $generic-command-edit-icon-margin: 5px !default; - $generic-command-edit-text-margin: 2px !default; $generic-grid-base-nodata-font-size: 14px !default; $generic-grid-base-checkbox-padding-bottom: 0; $generic-grid-base-treeview-select-all-item-offset: 28px; diff --git a/packages/devextreme-scss/scss/widgets/generic/loadIndicator/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/loadIndicator/_colors.scss index a5829b425501..21159495c936 100644 --- a/packages/devextreme-scss/scss/widgets/generic/loadIndicator/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/generic/loadIndicator/_colors.scss @@ -8,14 +8,13 @@ */ $loadindicator-bg: null !default; $loadindicator-segment-shadow-color: null !default; -$load-indicator-animation-sparkle-bg-color1: null !default; +$load-indicator-animation-sparkle-bg-color1: $base-accent !default; $load-indicator-animation-sparkle-bg-color2: null !default; $load-indicator-animation-sparkle-bg-color3: null !default; @if $color == "carmine" { $loadindicator-bg: $base-accent !default; $loadindicator-segment-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default; - $load-indicator-animation-sparkle-bg-color1: $base-accent !default; $load-indicator-animation-sparkle-bg-color2: color.adjust($base-accent, $saturation: -8.58%, $space: hsl, $lightness: 27.06%) !default; $load-indicator-animation-sparkle-bg-color3: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 2deg, $saturation: -6.88%, $lightness: 33.14%) !default; } @@ -23,7 +22,6 @@ $load-indicator-animation-sparkle-bg-color3: null !default; @if $color == "contrast" { $loadindicator-bg: $base-inverted-bg !default; $loadindicator-segment-shadow-color: $base-shadow-color !default; - $load-indicator-animation-sparkle-bg-color1: $base-accent !default; $load-indicator-animation-sparkle-bg-color2: color.adjust($base-accent, $saturation: -25.83%, $space: hsl, $lightness: -19.61%) !default; $load-indicator-animation-sparkle-bg-color3: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 1deg, $saturation: -44.18%, $lightness: -11.76%) !default; } @@ -31,7 +29,6 @@ $load-indicator-animation-sparkle-bg-color3: null !default; @if $color == "dark" { $loadindicator-bg: color.adjust($base-text-color, $lightness: -17.5%, $space: hsl) !default; $loadindicator-segment-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default; - $load-indicator-animation-sparkle-bg-color1: $base-accent !default; $load-indicator-animation-sparkle-bg-color2: color.adjust($base-accent, $saturation: -25.83%, $space: hsl, $lightness: -19.61%) !default; $load-indicator-animation-sparkle-bg-color3: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 1deg, $saturation: -44.18%, $lightness: -11.76%) !default; } @@ -39,7 +36,6 @@ $load-indicator-animation-sparkle-bg-color3: null !default; @if $color == "darkmoon" { $loadindicator-bg: $base-accent !default; $loadindicator-segment-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default; - $load-indicator-animation-sparkle-bg-color1: $base-accent !default; $load-indicator-animation-sparkle-bg-color2: color.adjust($base-accent, $saturation: -25.83%, $space: hsl, $lightness: -19.61%) !default; $load-indicator-animation-sparkle-bg-color3: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 1deg, $saturation: -44.18%, $lightness: -11.76%) !default; } @@ -47,7 +43,6 @@ $load-indicator-animation-sparkle-bg-color3: null !default; @if $color == "darkviolet" { $loadindicator-bg: $base-accent-highlight-color !default; $loadindicator-segment-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default; - $load-indicator-animation-sparkle-bg-color1: $base-accent !default; $load-indicator-animation-sparkle-bg-color2: color.adjust($base-accent, $saturation: -25.83%, $space: hsl, $lightness: -19.61%) !default; $load-indicator-animation-sparkle-bg-color3: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 1deg, $saturation: -44.18%, $lightness: -11.76%) !default; } @@ -55,7 +50,6 @@ $load-indicator-animation-sparkle-bg-color3: null !default; @if $color == "greenmist" { $loadindicator-bg: color.adjust($base-text-color, $lightness: 17.5%, $space: hsl) !default; $loadindicator-segment-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default; - $load-indicator-animation-sparkle-bg-color1: $base-accent !default; $load-indicator-animation-sparkle-bg-color2: color.adjust($base-accent, $saturation: -8.58%, $space: hsl, $lightness: 27.06%) !default; $load-indicator-animation-sparkle-bg-color3: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 2deg, $saturation: -6.88%, $lightness: 33.14%) !default; } @@ -63,7 +57,6 @@ $load-indicator-animation-sparkle-bg-color3: null !default; @if $color == "light" { $loadindicator-bg: color.adjust($base-text-color, $lightness: 17.5%, $space: hsl) !default; $loadindicator-segment-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default; - $load-indicator-animation-sparkle-bg-color1: $base-accent !default; $load-indicator-animation-sparkle-bg-color2: color.adjust($base-accent, $saturation: -8.58%, $space: hsl, $lightness: 27.06%) !default; $load-indicator-animation-sparkle-bg-color3: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 2deg, $saturation: -6.88%, $lightness: 33.14%) !default; } @@ -71,7 +64,6 @@ $load-indicator-animation-sparkle-bg-color3: null !default; @if $color == "softblue" { $loadindicator-bg: $base-accent !default; $loadindicator-segment-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default; - $load-indicator-animation-sparkle-bg-color1: $base-accent !default; $load-indicator-animation-sparkle-bg-color2: color.adjust($base-accent, $saturation: -8.58%, $space: hsl, $lightness: 27.06%) !default; $load-indicator-animation-sparkle-bg-color3: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 2deg, $saturation: -6.88%, $lightness: 33.14%) !default; } diff --git a/packages/devextreme-scss/scss/widgets/generic/scheduler/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/scheduler/_colors.scss index 998c9d6176d5..008b2b871d91 100644 --- a/packages/devextreme-scss/scss/widgets/generic/scheduler/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/generic/scheduler/_colors.scss @@ -67,7 +67,6 @@ $scheduler-dd-appointment-hover-text-color: null !default; $scheduler-form-icon-color: $base-icon-color !default; $scheduler-workspace-month-text-color: null !default; $scheduler-dropdown-appointment-date-color: null !default; -$scheduler-workspace-active-cell-color: null !default; $scheduler-workspace-hovered-cell-color: null !default; $scheduler-group-header-color: null !default; $scheduler-header-bg: null !default; @@ -92,7 +91,7 @@ $month-text-color-dark: #9c9c9c; $agenda-appointment-recurrence-icon-color: null !default; $agenda-appointment-hover-bg: $base-hover-bg !default; $agenda-appointment-active-bg: null !default; -$agenda-appointment-text-color: null !default; +$agenda-appointment-text-color: $base-text-color !default; @if $color == "carmine" { $scheduler-base-border-color: color.change($base-border-color, $alpha: 0.6) !default; @@ -112,7 +111,6 @@ $agenda-appointment-text-color: null !default; $scheduler-dd-appointment-hover-text-color: $base-inverted-text-color !default; $scheduler-workspace-month-text-color: $month-text-color-light !default; $scheduler-dropdown-appointment-date-color: color.adjust($base-text-color, $lightness: 38.5%, $space: hsl) !default; - $scheduler-workspace-active-cell-color: $scheduler-accent-border-color !default; $scheduler-workspace-hovered-cell-color: $scheduler-workspace-month-text-color !default; $scheduler-group-header-color: $scheduler-panel-text-color !default; $scheduler-header-bg: color.adjust($base-bg, $lightness: -4%, $space: hsl) !default; @@ -129,7 +127,6 @@ $agenda-appointment-text-color: null !default; $scheduler-appointment-overlay-bg: $base-bg !default; $agenda-appointment-recurrence-icon-color: $base-inverted-text-color !default; - $agenda-appointment-text-color: $base-text-color !default; $agenda-appointment-active-bg: color.change($base-accent, $alpha: 0.15) !default; } @@ -149,7 +146,6 @@ $agenda-appointment-text-color: null !default; $scheduler-workspace-focused-cell-color: color.adjust($base-accent, $lightness: 5%, $space: hsl) !default; $scheduler-panel-text-color: $base-text-color !default; $scheduler-dropdown-appointment-date-color: $base-text-color !default; - $scheduler-workspace-active-cell-color: $scheduler-accent-border-color !default; $scheduler-workspace-hovered-cell-color: extcolor.difference(#fff, $base-text-color) !default; $scheduler-group-header-color: $base-text-color !default; $scheduler-header-bg: $base-bg !default; @@ -167,7 +163,6 @@ $agenda-appointment-text-color: null !default; $scheduler-appointment-overlay-bg: $base-inverted-bg !default; $agenda-appointment-recurrence-icon-color: $base-text-color !default; - $agenda-appointment-text-color: $base-text-color !default; $agenda-appointment-active-bg: $base-accent !default; } @@ -189,7 +184,6 @@ $agenda-appointment-text-color: null !default; $scheduler-dd-appointment-hover-text-color: $base-inverted-text-color !default; $scheduler-workspace-month-text-color: $month-text-color-dark !default; $scheduler-dropdown-appointment-date-color: color.adjust($base-text-color, $lightness: 38.5%, $space: hsl) !default; - $scheduler-workspace-active-cell-color: $scheduler-accent-border-color !default; $scheduler-workspace-hovered-cell-color: $scheduler-workspace-month-text-color !default; $scheduler-group-header-color: $scheduler-panel-text-color !default; $scheduler-header-bg: $base-hover-bg !default; @@ -206,7 +200,6 @@ $agenda-appointment-text-color: null !default; $scheduler-appointment-overlay-bg: $base-bg !default; $agenda-appointment-recurrence-icon-color: $base-text-color !default; - $agenda-appointment-text-color: $base-text-color !default; $agenda-appointment-active-bg: color.change(#fff, $alpha: 0.15) !default; } @@ -230,7 +223,6 @@ $agenda-appointment-text-color: null !default; $scheduler-dd-appointment-hover-text-color: #fff !default; $scheduler-workspace-month-text-color: $month-text-color-dark !default; $scheduler-dropdown-appointment-date-color: color.adjust($base-text-color, $lightness: 38.5%, $space: hsl) !default; - $scheduler-workspace-active-cell-color: $scheduler-accent-border-color !default; $scheduler-workspace-hovered-cell-color: $scheduler-workspace-month-text-color !default; $scheduler-group-header-color: $scheduler-panel-text-color !default; $scheduler-header-bg: $base-hover-bg !default; @@ -247,7 +239,6 @@ $agenda-appointment-text-color: null !default; $scheduler-appointment-overlay-bg: $base-bg !default; $agenda-appointment-recurrence-icon-color: $base-text-color !default; - $agenda-appointment-text-color: $base-text-color !default; $agenda-appointment-active-bg: color.change(#000, $alpha: 0.15) !default; } @@ -269,7 +260,6 @@ $agenda-appointment-text-color: null !default; $scheduler-dd-appointment-hover-text-color: $base-text-color !default; $scheduler-workspace-month-text-color: $month-text-color-dark !default; $scheduler-dropdown-appointment-date-color: color.adjust($base-text-color, $lightness: 38.5%, $space: hsl) !default; - $scheduler-workspace-active-cell-color: $scheduler-accent-border-color !default; $scheduler-workspace-hovered-cell-color: $scheduler-workspace-month-text-color !default; $scheduler-group-header-color: $scheduler-panel-text-color !default; $scheduler-header-bg: $base-hover-bg !default; @@ -286,7 +276,6 @@ $agenda-appointment-text-color: null !default; $scheduler-appointment-overlay-bg: $base-bg !default; $agenda-appointment-recurrence-icon-color: $base-text-color !default; - $agenda-appointment-text-color: $base-text-color !default; $agenda-appointment-active-bg: color.change(#9e9ec5, $alpha: 0.35) !default; } @@ -309,7 +298,6 @@ $agenda-appointment-text-color: null !default; $scheduler-workspace-month-text-color: color.adjust($base-text-color, $lightness: 38.5%, $space: hsl) !default; $scheduler-dropdown-appointment-date-color: color.adjust($base-text-color, $lightness: 38.5%, $space: hsl) !default; $scheduler-time-panel-background-color: $scheduler-workspace-background-color !default; - $scheduler-workspace-active-cell-color: $scheduler-accent-border-color !default; $scheduler-workspace-hovered-cell-color: $scheduler-workspace-month-text-color !default; $scheduler-group-header-color: $scheduler-panel-text-color !default; $scheduler-header-bg: $base-hover-bg !default; @@ -326,7 +314,6 @@ $agenda-appointment-text-color: null !default; $scheduler-appointment-overlay-bg: $base-bg !default; $agenda-appointment-recurrence-icon-color: $base-inverted-text-color !default; - $agenda-appointment-text-color: $base-text-color !default; $agenda-appointment-active-bg: color.change(#000, $alpha: 0.15) !default; } @@ -349,7 +336,6 @@ $agenda-appointment-text-color: null !default; $scheduler-dd-appointment-hover-text-color: $base-inverted-text-color !default; $scheduler-workspace-month-text-color: $month-text-color-light !default; $scheduler-dropdown-appointment-date-color: color.adjust($base-text-color, $lightness: 38.5%, $space: hsl) !default; - $scheduler-workspace-active-cell-color: $scheduler-accent-border-color !default; $scheduler-workspace-hovered-cell-color: $scheduler-workspace-month-text-color !default; $scheduler-group-header-color: $scheduler-panel-text-color !default; $scheduler-alldaypanel-bg: $base-element-bg !default; @@ -365,7 +351,6 @@ $agenda-appointment-text-color: null !default; $scheduler-appointment-overlay-bg: $base-bg !default; $agenda-appointment-recurrence-icon-color: $base-inverted-text-color !default; - $agenda-appointment-text-color: $base-text-color !default; $agenda-appointment-active-bg: color.change(#000, $alpha: 0.08) !default; } @@ -387,7 +372,6 @@ $agenda-appointment-text-color: null !default; $scheduler-dd-appointment-hover-text-color: $base-inverted-text-color !default; $scheduler-workspace-month-text-color: $month-text-color-light !default; $scheduler-dropdown-appointment-date-color: color.adjust($base-text-color, $lightness: 38.5%, $space: hsl) !default; - $scheduler-workspace-active-cell-color: $scheduler-accent-border-color !default; $scheduler-workspace-hovered-cell-color: $scheduler-workspace-month-text-color !default; $scheduler-group-header-color: $scheduler-panel-text-color !default; $scheduler-header-bg: $base-hover-bg !default; @@ -404,8 +388,9 @@ $agenda-appointment-text-color: null !default; $scheduler-appointment-overlay-bg: $base-bg !default; $agenda-appointment-recurrence-icon-color: $base-inverted-text-color !default; - $agenda-appointment-text-color: $base-text-color !default; $agenda-appointment-active-bg: color.change(#000, $alpha: 0.08) !default; } +$scheduler-workspace-active-cell-color: $scheduler-accent-border-color !default; + $scheduler-appointment-active-color: $scheduler-appointment-start-color; diff --git a/packages/devextreme-scss/scss/widgets/generic/scheduler/_sizes.scss b/packages/devextreme-scss/scss/widgets/generic/scheduler/_sizes.scss index 46750f3037f9..9dff0661c68c 100644 --- a/packages/devextreme-scss/scss/widgets/generic/scheduler/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/generic/scheduler/_sizes.scss @@ -22,17 +22,17 @@ $generic-scheduler-appointment-transparent-right-border: null !default; $generic-scheduler-dropdown-button-height: null !default; $generic-scheduler-dropdown-button-margin: null !default; $generic-scheduler-dropdown-button-vertical-margin: null !default; -$generic-scheduler-dropdown-button-adaptive-margin: null !default; -$generic-scheduler-dropdown-button-adaptive-vertical-margin: null !default; +$generic-scheduler-dropdown-button-adaptive-margin: 0 2px !default; +$generic-scheduler-dropdown-button-adaptive-vertical-margin: 0 2px 0 0 !default; $generic-scheduler-appointment-popup-toolbar-height: null !default; $generic-scheduler-appointment-popup-toolbar-label-size: null !default; $generic-scheduler-appointment-popup-icon-size: null !default; $generic-scheduler-appointment-popup-icon-container-height: null !default; -$generic-scheduler-appointment-popup-icon-padding-right: null !default; +$generic-scheduler-appointment-popup-icon-padding-right: 5px !default; $generic-scheduler-appointment-popup-icon-margin-top: null !default; $generic-scheduler-appointment-popup-icon-inner-label-margin-top: null !default; -$generic-scheduler-appointment-popup-item-padding-horizontal: null !default; +$generic-scheduler-appointment-popup-item-padding-horizontal: 5px !default; $generic-scheduler-appointment-popup-item-padding-top: null !default; $generic-scheduler-appointment-popup-all-day-item-height: null !default; $generic-scheduler-appointment-popup-days-of-week-button-size: null !default; @@ -42,22 +42,22 @@ $generic-scheduler-appointment-popup-repeat-end-item-height: null !default; $generic-scheduler-appointment-short-content-padding: null !default; $generic-scheduler-appointment-10min-height: null !default; -$generic-scheduler-appointment-15min-height: null !default; -$generic-scheduler-appointment-20min-height: null !default; -$generic-scheduler-appointment-25min-height: null !default; -$generic-scheduler-appointment-10min-recurrence-padding-right: null !default; -$generic-scheduler-appointment-10min-title-font-size: null !default; -$generic-scheduler-appointment-10min-title-line-height: null !default; -$generic-scheduler-appointment-10min-icon-font-size: null !default; -$generic-scheduler-appointment-10min-icon-right: null !default; +$generic-scheduler-appointment-15min-height: 23px !default; +$generic-scheduler-appointment-20min-height: 32px !default; +$generic-scheduler-appointment-25min-height: 41px !default; +$generic-scheduler-appointment-10min-recurrence-padding-right: 16px !default; +$generic-scheduler-appointment-10min-title-font-size: 8px !default; +$generic-scheduler-appointment-10min-title-line-height: 16px !default; +$generic-scheduler-appointment-10min-icon-font-size: 14px !default; +$generic-scheduler-appointment-10min-icon-right: 2px !default; $generic-scheduler-appointment-15min-recurrence-padding-right: null !default; -$generic-scheduler-appointment-15min-title-font-size: null !default; +$generic-scheduler-appointment-15min-title-font-size: 12px !default; $generic-scheduler-appointment-15min-title-line-height: null !default; $generic-scheduler-appointment-15min-icon-font-size: null !default; -$generic-scheduler-appointment-15min-icon-right: null !default; +$generic-scheduler-appointment-15min-icon-right: 2px !default; $generic-scheduler-appointment-20min-recurrence-padding-right: null !default; -$agenda-appointment-title-font-size: null !default; +$agenda-appointment-title-font-size: 16px; $scheduler-timeline-cell-height: null !default; $scheduler-left-column-width: 100px !default; @@ -89,17 +89,13 @@ $generic-scheduler-group-header-agenda-font-size: 14px !default; $generic-scheduler-dropdown-button-height: 20px !default; $generic-scheduler-dropdown-button-margin: 3px 2px 3px 3px !default; $generic-scheduler-dropdown-button-vertical-margin: 3px 2px 3px 0 !default; - $generic-scheduler-dropdown-button-adaptive-margin: 0 2px !default; - $generic-scheduler-dropdown-button-adaptive-vertical-margin: 0 2px 0 0 !default; $generic-scheduler-appointment-popup-toolbar-height: 43px !default; $generic-scheduler-appointment-popup-toolbar-label-size: 20px !default; $generic-scheduler-appointment-popup-icon-size: 18px !default; $generic-scheduler-appointment-popup-icon-container-height: 36px !default; - $generic-scheduler-appointment-popup-icon-padding-right: 5px !default; $generic-scheduler-appointment-popup-icon-margin-top: 22px !default; $generic-scheduler-appointment-popup-icon-inner-label-margin-top: 7px !default; - $generic-scheduler-appointment-popup-item-padding-horizontal: 5px !default; $generic-scheduler-appointment-popup-item-padding-top: 20px !default; $generic-scheduler-appointment-popup-all-day-item-height: 36px !default; $generic-scheduler-appointment-popup-repeat-end-radio-margin-top: 10px !default; @@ -107,27 +103,14 @@ $generic-scheduler-group-header-agenda-font-size: 14px !default; $generic-scheduler-appointment-popup-days-of-week-buttons-gap: 10px !default; $generic-scheduler-appointment-popup-repeat-end-item-height: 36px !default; - $agenda-appointment-title-font-size: 16px; - $scheduler-timeline-cell-height: 78px !default; $generic-scheduler-appointment-short-content-padding: 0 7px !default; $generic-scheduler-appointment-10min-height: 23px !default; - $generic-scheduler-appointment-15min-height: 23px !default; - $generic-scheduler-appointment-20min-height: 32px !default; - $generic-scheduler-appointment-25min-height: 41px !default; - - $generic-scheduler-appointment-10min-recurrence-padding-right: 16px !default; - $generic-scheduler-appointment-10min-title-font-size: 8px !default; - $generic-scheduler-appointment-10min-title-line-height: 16px !default; - $generic-scheduler-appointment-10min-icon-font-size: 14px !default; - $generic-scheduler-appointment-10min-icon-right: 2px !default; $generic-scheduler-appointment-15min-recurrence-padding-right: 20px !default; - $generic-scheduler-appointment-15min-title-font-size: 12px !default; $generic-scheduler-appointment-15min-title-line-height: 24px !default; $generic-scheduler-appointment-15min-icon-font-size: 18px !default; - $generic-scheduler-appointment-15min-icon-right: 2px !default; $generic-scheduler-appointment-20min-recurrence-padding-right: 24px !default; } @@ -158,17 +141,13 @@ $generic-scheduler-group-header-agenda-font-size: 14px !default; $generic-scheduler-dropdown-button-height: 17px !default; $generic-scheduler-dropdown-button-margin: 3px 1px 3px 3px !default; $generic-scheduler-dropdown-button-vertical-margin: 3px 1px 3px 0 !default; - $generic-scheduler-dropdown-button-adaptive-margin: 0 2px !default; - $generic-scheduler-dropdown-button-adaptive-vertical-margin: 0 2px 0 0 !default; $generic-scheduler-appointment-popup-toolbar-height: 39px !default; $generic-scheduler-appointment-popup-toolbar-label-size: 18px !default; $generic-scheduler-appointment-popup-icon-size: 14px !default; $generic-scheduler-appointment-popup-icon-container-height: 26px !default; - $generic-scheduler-appointment-popup-icon-padding-right: 5px !default; $generic-scheduler-appointment-popup-icon-margin-top: 18px !default; $generic-scheduler-appointment-popup-icon-inner-label-margin-top: 6px !default; - $generic-scheduler-appointment-popup-item-padding-horizontal: 5px !default; $generic-scheduler-appointment-popup-item-padding-top: 10px !default; $generic-scheduler-appointment-popup-all-day-item-height: 24px !default; $generic-scheduler-appointment-popup-repeat-end-radio-margin-top: 6px !default; @@ -176,27 +155,14 @@ $generic-scheduler-group-header-agenda-font-size: 14px !default; $generic-scheduler-appointment-popup-days-of-week-buttons-gap: 6px !default; $generic-scheduler-appointment-popup-repeat-end-item-height: 26px !default; - $agenda-appointment-title-font-size: 16px; - $scheduler-timeline-cell-height: 50px !default; $generic-scheduler-appointment-short-content-padding: 0 5px !default; $generic-scheduler-appointment-10min-height: 14px !default; - $generic-scheduler-appointment-15min-height: 23px !default; - $generic-scheduler-appointment-20min-height: 32px !default; - $generic-scheduler-appointment-25min-height: 41px !default; - - $generic-scheduler-appointment-10min-title-font-size: 8px !default; - $generic-scheduler-appointment-10min-title-line-height: 16px !default; - $generic-scheduler-appointment-10min-recurrence-padding-right: 16px !default; - $generic-scheduler-appointment-10min-icon-font-size: 14px !default; - $generic-scheduler-appointment-10min-icon-right: 2px !default; $generic-scheduler-appointment-15min-recurrence-padding-right: 16px !default; - $generic-scheduler-appointment-15min-title-font-size: 12px !default; $generic-scheduler-appointment-15min-title-line-height: 16px !default; $generic-scheduler-appointment-15min-icon-font-size: 14px !default; - $generic-scheduler-appointment-15min-icon-right: 2px !default; $generic-scheduler-appointment-20min-recurrence-padding-right: 20px !default; } diff --git a/packages/devextreme-scss/scss/widgets/generic/slider/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/slider/_colors.scss index 6e7b828ad034..4ffcbc4e0e48 100644 --- a/packages/devextreme-scss/scss/widgets/generic/slider/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/generic/slider/_colors.scss @@ -18,7 +18,6 @@ $slider-handle-bg: null !default; $slider-handle-border-color: null !default; $slider-handle-active-bg: null !default; $slider-handle-hover-bg: null !default; -$slider-handle-focused-bg: null !default; $slider-invalid-handle-accent-bg: null !default; $slider-handle-border-radius: $base-border-radius - 1px !default; @@ -27,7 +26,6 @@ $slider-handle-border-radius: $base-border-radius - 1px !default; $slider-handle-border-color: $base-bg !default; $slider-handle-active-bg: color.adjust($slider-handle-bg, $lightness: -17%, $space: hsl) !default; $slider-handle-hover-bg: color.adjust($slider-handle-bg, $lightness: -10%, $space: hsl) !default; - $slider-handle-focused-bg: $slider-handle-hover-bg !default; $slider-invalid-handle-accent-bg: color.adjust($base-danger, $lightness: -10%, $space: hsl) !default; } @@ -36,7 +34,6 @@ $slider-handle-border-radius: $base-border-radius - 1px !default; $slider-handle-border-color: extcolor.difference(#fff, $base-border-color) !default; $slider-handle-active-bg: $base-inverted-bg !default; $slider-handle-hover-bg: $slider-range-bg !default; - $slider-handle-focused-bg: $slider-handle-hover-bg !default; $slider-invalid-handle-accent-bg: color.adjust($base-danger, $lightness: 10%, $space: hsl) !default; } @@ -45,7 +42,6 @@ $slider-handle-border-radius: $base-border-radius - 1px !default; $slider-handle-border-color: $base-bg !default; $slider-handle-active-bg: color.adjust($slider-handle-bg, $lightness: 17%, $space: hsl) !default; $slider-handle-hover-bg: color.adjust($slider-handle-bg, $lightness: 10%, $space: hsl) !default; - $slider-handle-focused-bg: $slider-handle-hover-bg !default; $slider-invalid-handle-accent-bg: color.adjust($base-danger, $lightness: 10%, $space: hsl) !default; } @@ -54,7 +50,6 @@ $slider-handle-border-radius: $base-border-radius - 1px !default; $slider-handle-border-color: $base-bg !default; $slider-handle-active-bg: color.adjust($slider-handle-bg, $lightness: 17%, $space: hsl) !default; $slider-handle-hover-bg: color.adjust($slider-handle-bg, $lightness: 10%, $space: hsl) !default; - $slider-handle-focused-bg: $slider-handle-hover-bg !default; $slider-invalid-handle-accent-bg: color.adjust($base-danger, $lightness: 10%, $space: hsl) !default; } @@ -63,7 +58,6 @@ $slider-handle-border-radius: $base-border-radius - 1px !default; $slider-handle-border-color: $base-bg !default; $slider-handle-active-bg: color.adjust($slider-handle-bg, $lightness: 17%, $space: hsl) !default; $slider-handle-hover-bg: color.adjust($slider-handle-bg, $lightness: 10%, $space: hsl) !default; - $slider-handle-focused-bg: $slider-handle-hover-bg !default; $slider-invalid-handle-accent-bg: color.adjust($base-danger, $lightness: 10%, $space: hsl) !default; } @@ -72,7 +66,6 @@ $slider-handle-border-radius: $base-border-radius - 1px !default; $slider-handle-border-color: $base-bg !default; $slider-handle-active-bg: color.adjust($slider-handle-bg, $lightness: -17%, $space: hsl) !default; $slider-handle-hover-bg: color.adjust($slider-handle-bg, $lightness: -10%, $space: hsl) !default; - $slider-handle-focused-bg: $slider-handle-hover-bg !default; $slider-invalid-handle-accent-bg: color.adjust($base-danger, $lightness: -10%, $space: hsl) !default; } @@ -81,7 +74,6 @@ $slider-handle-border-radius: $base-border-radius - 1px !default; $slider-handle-border-color: $base-bg !default; $slider-handle-active-bg: color.adjust($slider-handle-bg, $lightness: -17%, $space: hsl) !default; $slider-handle-hover-bg: color.adjust($slider-handle-bg, $lightness: -10%, $space: hsl) !default; - $slider-handle-focused-bg: $slider-handle-hover-bg !default; $slider-invalid-handle-accent-bg: color.adjust($base-danger, $lightness: -10%, $space: hsl) !default; } @@ -90,6 +82,7 @@ $slider-handle-border-radius: $base-border-radius - 1px !default; $slider-handle-border-color: $base-bg !default; $slider-handle-active-bg: color.adjust($slider-handle-bg, $lightness: -17%, $space: hsl) !default; $slider-handle-hover-bg: color.adjust($slider-handle-bg, $lightness: -10%, $space: hsl) !default; - $slider-handle-focused-bg: $slider-handle-hover-bg !default; $slider-invalid-handle-accent-bg: color.adjust($base-danger, $lightness: -10%, $space: hsl) !default; } + +$slider-handle-focused-bg: $slider-handle-hover-bg !default; diff --git a/packages/devextreme-scss/scss/widgets/generic/switch/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/switch/_colors.scss index a4e5208391da..85340cd00c40 100644 --- a/packages/devextreme-scss/scss/widgets/generic/switch/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/generic/switch/_colors.scss @@ -35,7 +35,6 @@ $switch-active-border-color: null !default; $switch-off-color: null !default; $switch-handle-off-bg: null !default; $switch-readonly-border-color: null !default; -$switch-container-readonly-bg: null !default; $switch-border-radius: null !default; @if $color == "carmine" { @@ -51,7 +50,6 @@ $switch-border-radius: null !default; $switch-off-color: color.adjust($base-text-color, $lightness: 40%, $space: hsl) !default; $switch-handle-off-bg: color.adjust($switch-handle-bg, $lightness: 15%, $space: hsl) !default; $switch-readonly-border-color: color.adjust($switch-border-color, $lightness: 9%, $space: hsl) !default; - $switch-container-readonly-bg: $switch-bg !default; $switch-border-radius: $base-border-radius-exsmall !default; } @@ -67,7 +65,6 @@ $switch-border-radius: null !default; $switch-off-color: $base-text-color !default; $switch-handle-off-bg: $base-inverted-bg !default; $switch-readonly-border-color: color.adjust($switch-border-color, $lightness: -50%, $space: hsl) !default; - $switch-container-readonly-bg: $switch-bg !default; $switch-border-radius: $base-border-radius - 2px !default; } @@ -83,7 +80,6 @@ $switch-border-radius: null !default; $switch-off-color: color.adjust($base-text-color, $lightness: -40%, $space: hsl) !default; $switch-handle-off-bg: color.adjust($switch-handle-bg, $lightness: -15%, $space: hsl) !default; $switch-readonly-border-color: color.adjust($switch-border-color, $lightness: -9%, $space: hsl) !default; - $switch-container-readonly-bg: $switch-bg !default; $switch-border-radius: $base-border-radius-exsmall !default; } @@ -99,7 +95,6 @@ $switch-border-radius: null !default; $switch-off-color: color.adjust($base-text-color, $lightness: -40%, $space: hsl) !default; $switch-handle-off-bg: color.adjust($switch-handle-bg, $lightness: -15%, $space: hsl) !default; $switch-readonly-border-color: color.adjust($switch-border-color, $lightness: -9%, $space: hsl) !default; - $switch-container-readonly-bg: $switch-bg !default; $switch-border-radius: $base-border-radius-exsmall !default; } @@ -115,7 +110,6 @@ $switch-border-radius: null !default; $switch-off-color: color.adjust($base-text-color, $lightness: -40%, $space: hsl) !default; $switch-handle-off-bg: color.adjust($switch-handle-bg, $lightness: -15%, $space: hsl) !default; $switch-readonly-border-color: color.adjust($switch-border-color, $lightness: -9%, $space: hsl) !default; - $switch-container-readonly-bg: $switch-bg !default; $switch-border-radius: $base-border-radius-exsmall !default; } @@ -131,7 +125,6 @@ $switch-border-radius: null !default; $switch-off-color: color.adjust($base-text-color, $lightness: 40%, $space: hsl) !default; $switch-handle-off-bg: color.adjust($switch-handle-bg, $lightness: 15%, $space: hsl) !default; $switch-readonly-border-color: color.adjust($switch-border-color, $lightness: 9%, $space: hsl) !default; - $switch-container-readonly-bg: $switch-bg !default; $switch-border-radius: $base-border-radius-exsmall !default; } @@ -147,7 +140,6 @@ $switch-border-radius: null !default; $switch-off-color: color.adjust($base-text-color, $lightness: 40%, $space: hsl) !default; $switch-handle-off-bg: color.adjust($switch-handle-bg, $lightness: 15%, $space: hsl) !default; $switch-readonly-border-color: color.adjust($switch-border-color, $lightness: 9%, $space: hsl) !default; - $switch-container-readonly-bg: $switch-bg !default; $switch-border-radius: $base-border-radius-exsmall !default; } @@ -163,6 +155,7 @@ $switch-border-radius: null !default; $switch-off-color: color.adjust($base-text-color, $lightness: 40%, $space: hsl) !default; $switch-handle-off-bg: color.adjust($switch-handle-bg, $lightness: 15%, $space: hsl) !default; $switch-readonly-border-color: color.adjust($switch-border-color, $lightness: 9%, $space: hsl) !default; - $switch-container-readonly-bg: $switch-bg !default; $switch-border-radius: $base-border-radius-exsmall !default; } + +$switch-container-readonly-bg: $switch-bg !default; diff --git a/packages/devextreme-scss/scss/widgets/generic/tabPanel/variables/_borders.scss b/packages/devextreme-scss/scss/widgets/generic/tabPanel/variables/_borders.scss index 7065d72a2709..04ea3a81ce87 100644 --- a/packages/devextreme-scss/scss/widgets/generic/tabPanel/variables/_borders.scss +++ b/packages/devextreme-scss/scss/widgets/generic/tabPanel/variables/_borders.scss @@ -4,90 +4,50 @@ @use "../../tabs/variables/sizes" as *; @use "../../tabs/variables/colors" as *; -$generic-tabpanel-tab-border-transparent: null !default; -$generic-tabpanel-tab-border-selected-bottom: null !default; -$generic-tabpanel-tab-border-active-bottom: null !default; +$generic-tabpanel-tab-border-transparent: $generic-tabs-border-width solid transparent !default; +$generic-tabpanel-tab-border-selected-bottom: $generic-tabs-border-width solid !default; +$generic-tabpanel-tab-border-active-bottom: $generic-tabs-border-width solid $tabs-focused-border-color !default; $generic-tabpanel-tab-border-focused-bottom: null !default; -$generic-tabpanel-tab-border-focused-left: null !default; -$generic-tabpanel-tab-border-focused-right: null !default; +$generic-tabpanel-tab-border-focused-left: $generic-tabs-border-width solid $tabs-focused-border-color !default; +$generic-tabpanel-tab-border-focused-right: $generic-tabs-border-width solid $tabs-focused-border-color !default; @if $color == "carmine" { - $generic-tabpanel-tab-border-transparent: $generic-tabs-border-width solid transparent !default; - $generic-tabpanel-tab-border-selected-bottom: $generic-tabs-border-width solid !default; - $generic-tabpanel-tab-border-active-bottom: $generic-tabs-border-width solid $tabs-focused-border-color !default; $generic-tabpanel-tab-border-focused-bottom: $generic-tabs-border-width solid $tabs-tab-selected-bg !default; - $generic-tabpanel-tab-border-focused-left: $generic-tabs-border-width solid $tabs-focused-border-color !default; - $generic-tabpanel-tab-border-focused-right: $generic-tabs-border-width solid $tabs-focused-border-color !default; } @if $color == "contrast" { - $generic-tabpanel-tab-border-transparent: $generic-tabs-border-width solid transparent !default; - $generic-tabpanel-tab-border-selected-bottom: $generic-tabs-border-width solid !default; - $generic-tabpanel-tab-border-active-bottom: $generic-tabs-border-width solid $tabs-focused-border-color !default; $generic-tabpanel-tab-border-focused-bottom: $generic-tabs-border-width solid !default; - $generic-tabpanel-tab-border-focused-left: $generic-tabs-border-width solid $tabs-focused-border-color !default; - $generic-tabpanel-tab-border-focused-right: $generic-tabs-border-width solid $tabs-focused-border-color !default; } @if $color == "dark" { - $generic-tabpanel-tab-border-transparent: $generic-tabs-border-width solid transparent !default; - $generic-tabpanel-tab-border-selected-bottom: $generic-tabs-border-width solid !default; - $generic-tabpanel-tab-border-active-bottom: $generic-tabs-border-width solid $tabs-focused-border-color !default; $generic-tabpanel-tab-border-focused-bottom: $generic-tabs-border-width solid $tabs-tab-selected-bg !default; - $generic-tabpanel-tab-border-focused-left: $generic-tabs-border-width solid $tabs-focused-border-color !default; - $generic-tabpanel-tab-border-focused-right: $generic-tabs-border-width solid $tabs-focused-border-color !default; } @if $color == "darkmoon" { - $generic-tabpanel-tab-border-transparent: $generic-tabs-border-width solid transparent !default; - $generic-tabpanel-tab-border-selected-bottom: $generic-tabs-border-width solid !default; - $generic-tabpanel-tab-border-active-bottom: $generic-tabs-border-width solid $tabs-focused-border-color !default; $generic-tabpanel-tab-border-focused-bottom: $generic-tabs-border-width solid $tabs-tab-selected-bg !default; - $generic-tabpanel-tab-border-focused-left: $generic-tabs-border-width solid $tabs-focused-border-color !default; - $generic-tabpanel-tab-border-focused-right: $generic-tabs-border-width solid $tabs-focused-border-color !default; } @if $color == "darkviolet" { - $generic-tabpanel-tab-border-transparent: $generic-tabs-border-width solid transparent !default; - $generic-tabpanel-tab-border-selected-bottom: $generic-tabs-border-width solid !default; - $generic-tabpanel-tab-border-active-bottom: $generic-tabs-border-width solid $tabs-focused-border-color !default; $generic-tabpanel-tab-border-focused-bottom: $generic-tabs-border-width solid $tabs-tab-selected-bg !default; - $generic-tabpanel-tab-border-focused-left: $generic-tabs-border-width solid $tabs-focused-border-color !default; - $generic-tabpanel-tab-border-focused-right: $generic-tabs-border-width solid $tabs-focused-border-color !default; } @if $color == "greenmist" { - $generic-tabpanel-tab-border-transparent: $generic-tabs-border-width solid transparent !default; - $generic-tabpanel-tab-border-selected-bottom: $generic-tabs-border-width solid !default; - $generic-tabpanel-tab-border-active-bottom: $generic-tabs-border-width solid $tabs-focused-border-color !default; $generic-tabpanel-tab-border-focused-bottom: $generic-tabs-border-width solid $tabs-tab-selected-bg !default; - $generic-tabpanel-tab-border-focused-left: $generic-tabs-border-width solid $tabs-focused-border-color !default; - $generic-tabpanel-tab-border-focused-right: $generic-tabs-border-width solid $tabs-focused-border-color !default; } @if $color == "light" { - $generic-tabpanel-tab-border-transparent: $generic-tabs-border-width solid transparent !default; - $generic-tabpanel-tab-border-selected-bottom: $generic-tabs-border-width solid !default; - $generic-tabpanel-tab-border-active-bottom: $generic-tabs-border-width solid $tabs-focused-border-color !default; $generic-tabpanel-tab-border-focused-bottom: $generic-tabs-border-width solid $tabs-tab-selected-bg !default; - $generic-tabpanel-tab-border-focused-left: $generic-tabs-border-width solid $tabs-focused-border-color !default; - $generic-tabpanel-tab-border-focused-right: $generic-tabs-border-width solid $tabs-focused-border-color !default; } @if $color == "softblue" { - $generic-tabpanel-tab-border-transparent: $generic-tabs-border-width solid transparent !default; - $generic-tabpanel-tab-border-selected-bottom: $generic-tabs-border-width solid !default; - $generic-tabpanel-tab-border-active-bottom: $generic-tabs-border-width solid $tabs-focused-border-color !default; $generic-tabpanel-tab-border-focused-bottom: $generic-tabs-border-width solid $tabs-tab-selected-bg !default; - $generic-tabpanel-tab-border-focused-left: $generic-tabs-border-width solid $tabs-focused-border-color !default; - $generic-tabpanel-tab-border-focused-right: $generic-tabs-border-width solid $tabs-focused-border-color !default; } diff --git a/packages/devextreme-scss/scss/widgets/generic/tabs/variables/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/tabs/variables/_colors.scss index 63fc74fbffb6..0ea8b9f91231 100644 --- a/packages/devextreme-scss/scss/widgets/generic/tabs/variables/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/generic/tabs/variables/_colors.scss @@ -50,7 +50,7 @@ $tabs-focused-disabled-border-color: null !default; $tabs-tab-hover-bg: null !default; $tabs-tab-active-bg: null !default; $tabs-tab-active-border-color: null !default; -$tabs-tab-hover-border-color-horizontal: null !default; +$tabs-tab-hover-border-color-horizontal: $base-border-color !default; $tabs-tab-hover-border-color-vertical: null !default; @if $color == "carmine" { @@ -64,7 +64,6 @@ $tabs-tab-hover-border-color-vertical: null !default; $tabs-tab-hover-bg: $base-hover-bg !default; $tabs-tab-active-bg: color.change(color.adjust($tabs-tab-bg, $lightness: -62.5%, $space: hsl), $alpha: 0.2) !default; $tabs-tab-active-border-color: color.change(color.adjust($base-border-color, $lightness: -2.55%, $space: hsl)) !default; - $tabs-tab-hover-border-color-horizontal: $base-border-color !default; $tabs-tab-hover-border-color-vertical: color.change(color.adjust($base-accent, $lightness: 33.92%, $space: hsl)) !default; } @@ -79,7 +78,6 @@ $tabs-tab-hover-border-color-vertical: null !default; $tabs-focused-disabled-border-color: color.adjust($base-border-color, $lightness: -20%, $space: hsl) !default; $tabs-tab-active-bg: $base-inverted-bg !default; $tabs-tab-active-border-color: $base-border-color !default; - $tabs-tab-hover-border-color-horizontal: $base-border-color !default; $tabs-tab-hover-border-color-vertical: $tabs-tab-hover-bg !default; } @@ -94,7 +92,6 @@ $tabs-tab-hover-border-color-vertical: null !default; $tabs-tab-hover-bg: $base-element-bg !default; $tabs-tab-active-bg: color.change(color.adjust($tabs-tab-bg, $lightness: 62.5%, $space: hsl), $alpha: 0.2) !default; $tabs-tab-active-border-color: color.change(color.adjust($tabs-tab-bg, $lightness: 12.55%, $space: hsl)) !default; - $tabs-tab-hover-border-color-horizontal: $base-border-color !default; $tabs-tab-hover-border-color-vertical: $tabs-tab-hover-bg !default; } @@ -109,7 +106,6 @@ $tabs-tab-hover-border-color-vertical: null !default; $tabs-tab-hover-bg: $base-element-bg !default; $tabs-tab-active-bg: color.change(color.adjust($tabs-tab-bg, $lightness: 62.5%, $space: hsl), $alpha: 0.2) !default; $tabs-tab-active-border-color: transparent !default; - $tabs-tab-hover-border-color-horizontal: $base-border-color !default; $tabs-tab-hover-border-color-vertical: $tabs-tab-hover-bg !default; } @@ -124,7 +120,6 @@ $tabs-tab-hover-border-color-vertical: null !default; $tabs-tab-hover-bg: $base-hover-bg !default; $tabs-tab-active-bg: color.change(color.adjust($tabs-tab-bg, $lightness: 62.5%, $space: hsl), $alpha: 0.2) !default; $tabs-tab-active-border-color: color.change(color.adjust($base-bg, $lightness: 15.49%, $space: hsl)) !default; - $tabs-tab-hover-border-color-horizontal: $base-border-color !default; $tabs-tab-hover-border-color-vertical: color.change(color.adjust($tabs-tab-bg, $lightness: 16.86%, $space: hsl)) !default; } @@ -139,7 +134,6 @@ $tabs-tab-hover-border-color-vertical: null !default; $tabs-tab-hover-bg: $base-element-bg !default; $tabs-tab-active-bg: color.change(color.adjust($tabs-tab-bg, $lightness: -62.5%, $space: hsl), $alpha: 0.2) !default; $tabs-tab-active-border-color: color.adjust($tabs-tab-bg, $lightness: -12.16%, $space: hsl) !default; - $tabs-tab-hover-border-color-horizontal: $base-border-color !default; $tabs-tab-hover-border-color-vertical: $tabs-tab-hover-bg !default; } @@ -154,7 +148,6 @@ $tabs-tab-hover-border-color-vertical: null !default; $tabs-tab-hover-bg: $base-element-bg !default; $tabs-tab-active-bg: color.change(color.adjust($tabs-tab-bg, $lightness: -62.5%, $space: hsl), $alpha: 0.2) !default; $tabs-tab-active-border-color: color.adjust($tabs-tab-bg, $lightness: -12.16%, $space: hsl) !default; - $tabs-tab-hover-border-color-horizontal: $base-border-color !default; $tabs-tab-hover-border-color-vertical: $tabs-tab-hover-bg !default; } @@ -169,6 +162,5 @@ $tabs-tab-hover-border-color-vertical: null !default; $tabs-tab-hover-bg: $base-element-bg !default; $tabs-tab-active-bg: color.change(color.adjust($tabs-tab-bg, $lightness: -62.5%, $space: hsl), $alpha: 0.2) !default; $tabs-tab-active-border-color: color.adjust($tabs-tab-bg, $lightness: -12.16%, $space: hsl) !default; - $tabs-tab-hover-border-color-horizontal: $base-border-color !default; $tabs-tab-hover-border-color-vertical: $tabs-tab-hover-bg !default; } diff --git a/packages/devextreme-scss/scss/widgets/generic/tabs/variables/_sizes.scss b/packages/devextreme-scss/scss/widgets/generic/tabs/variables/_sizes.scss index 9aa3bb5dc194..d79ed889d948 100644 --- a/packages/devextreme-scss/scss/widgets/generic/tabs/variables/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/generic/tabs/variables/_sizes.scss @@ -6,8 +6,8 @@ $generic-tabs-item-padding: null !default; $generic-tabs-item-padding-disabled-focused: null !default; $generic-tabs-border-width: $generic-base-border-width !default; -$generic-tabs-nav-button-height: null !default; -$generic-tabs-nav-button-width: null !default; +$generic-tabs-nav-button-height: 38px !default; +$generic-tabs-nav-button-width: 25px !default; $generic-tab-text-line-height: null !default; $generic-tabs-icon-margin: null !default; $generic-tabs-icon-size: $generic-base-icon-size !default; @@ -17,9 +17,7 @@ $generic-badge-min-size: null !default; $generic-tabs-item-gap: 4px !default; $generic-tabs-item-padding: 10px 9px !default; $generic-tabs-item-padding-disabled-focused: 10px !default; - $generic-tabs-nav-button-width: 25px !default; $generic-tab-text-line-height: 1.285715 !default; - $generic-tabs-nav-button-height: 38px !default; $generic-tabs-icon-margin: 8px !default; $generic-badge-min-size: 18px !default; } @@ -28,9 +26,7 @@ $generic-badge-min-size: null !default; $generic-tabs-item-gap: 2px !default; $generic-tabs-item-padding: 5px 4px !default; $generic-tabs-item-padding-disabled-focused: 5px !default; - $generic-tabs-nav-button-width: 25px !default; $generic-tab-text-line-height: 1.75 !default; - $generic-tabs-nav-button-height: 38px !default; $generic-tabs-icon-margin: 7px !default; $generic-badge-min-size: 21px !default; } diff --git a/packages/devextreme-scss/scss/widgets/generic/tabs/variables/borders/_borders-horizontal.scss b/packages/devextreme-scss/scss/widgets/generic/tabs/variables/borders/_borders-horizontal.scss index eed206407654..42077dcc6b05 100644 --- a/packages/devextreme-scss/scss/widgets/generic/tabs/variables/borders/_borders-horizontal.scss +++ b/packages/devextreme-scss/scss/widgets/generic/tabs/variables/borders/_borders-horizontal.scss @@ -8,243 +8,27 @@ $generic-tabs-border: $generic-tabs-border-width solid !default; $generic-tabs-border-transparent: $generic-tabs-border-width solid transparent !default; -$generic-tabs-border-hover-top: null !default; -$generic-tabs-border-hover-bottom: null !default; -$generic-tabs-border-hover-left: null !default; -$generic-tabs-border-hover-right: null !default; - -$generic-tabs-border-selected-top: null !default; -$generic-tabs-border-selected-bottom: null !default; -$generic-tabs-border-selected-left: null !default; -$generic-tabs-border-selected-right: null !default; - -$generic-tabs-border-focused-top: null !default; -$generic-tabs-border-focused-bottom: null !default; -$generic-tabs-border-focused-left: null !default; -$generic-tabs-border-focused-right: null !default; - -$generic-tabs-border-focused-disabled-top: null !default; -$generic-tabs-border-focused-disabled-bottom: null !default; -$generic-tabs-border-focused-disabled-left: null !default; -$generic-tabs-border-focused-disabled-right: null !default; - -$generic-tabs-border-active-top: null !default; -$generic-tabs-border-active-bottom: null !default; -$generic-tabs-border-active-left: null !default; -$generic-tabs-border-active-right: null !default; - -@if $color == "carmine" { - $generic-tabs-border-hover-top: $generic-tabs-border-width solid !default; - $generic-tabs-border-hover-bottom: $generic-tabs-border-width solid !default; - $generic-tabs-border-hover-left: none !default; - $generic-tabs-border-hover-right: none !default; - - $generic-tabs-border-selected-top: $generic-tabs-border-width solid !default; - $generic-tabs-border-selected-bottom: $generic-tabs-border-width solid !default; - $generic-tabs-border-selected-left: $generic-tabs-border-width solid !default; - $generic-tabs-border-selected-right: $generic-tabs-border-width solid !default; - - $generic-tabs-border-focused-top: $generic-tabs-border-width solid !default; - $generic-tabs-border-focused-bottom: $generic-tabs-border-width solid !default; - $generic-tabs-border-focused-left: $generic-tabs-border-width solid !default; - $generic-tabs-border-focused-right: $generic-tabs-border-width solid !default; - - $generic-tabs-border-focused-disabled-top: $generic-tabs-border-width solid !default; - $generic-tabs-border-focused-disabled-bottom: $generic-tabs-border-width solid !default; - $generic-tabs-border-focused-disabled-left: $generic-tabs-border-width solid !default; - $generic-tabs-border-focused-disabled-right: $generic-tabs-border-width solid !default; - - $generic-tabs-border-active-top: $generic-tabs-border-width solid !default; - $generic-tabs-border-active-bottom: $generic-tabs-border-width solid !default; - $generic-tabs-border-active-left: $generic-tabs-border-width solid !default; - $generic-tabs-border-active-right: $generic-tabs-border-width solid !default; -} - -@if $color == "contrast" { - $generic-tabs-border-hover-top: $generic-tabs-border-width solid !default; - $generic-tabs-border-hover-bottom: $generic-tabs-border-width solid !default; - $generic-tabs-border-hover-left: none !default; - $generic-tabs-border-hover-right: none !default; - - $generic-tabs-border-selected-top: $generic-tabs-border-width solid !default; - $generic-tabs-border-selected-bottom: $generic-tabs-border-width solid !default; - $generic-tabs-border-selected-left: $generic-tabs-border-width solid !default; - $generic-tabs-border-selected-right: $generic-tabs-border-width solid !default; - - $generic-tabs-border-focused-top: $generic-tabs-border-width solid !default; - $generic-tabs-border-focused-bottom: $generic-tabs-border-width solid !default; - $generic-tabs-border-focused-left: $generic-tabs-border-width solid !default; - $generic-tabs-border-focused-right: $generic-tabs-border-width solid !default; - - $generic-tabs-border-focused-disabled-top: $generic-tabs-border-width solid !default; - $generic-tabs-border-focused-disabled-bottom: $generic-tabs-border-width solid !default; - $generic-tabs-border-focused-disabled-left: $generic-tabs-border-width solid !default; - $generic-tabs-border-focused-disabled-right: $generic-tabs-border-width solid !default; - - $generic-tabs-border-active-top: $generic-tabs-border-width solid !default; - $generic-tabs-border-active-bottom: $generic-tabs-border-width solid !default; - $generic-tabs-border-active-left: $generic-tabs-border-width solid !default; - $generic-tabs-border-active-right: $generic-tabs-border-width solid !default; -} - -@if $color == "dark" { - $generic-tabs-border-hover-top: $generic-tabs-border-width solid !default; - $generic-tabs-border-hover-bottom: $generic-tabs-border-width solid !default; - $generic-tabs-border-hover-left: none !default; - $generic-tabs-border-hover-right: none !default; - - $generic-tabs-border-selected-top: $generic-tabs-border-width solid !default; - $generic-tabs-border-selected-bottom: $generic-tabs-border-width solid !default; - $generic-tabs-border-selected-left: $generic-tabs-border-width solid !default; - $generic-tabs-border-selected-right: $generic-tabs-border-width solid !default; - - $generic-tabs-border-focused-top: $generic-tabs-border-width solid !default; - $generic-tabs-border-focused-bottom: $generic-tabs-border-width solid !default; - $generic-tabs-border-focused-left: $generic-tabs-border-width solid !default; - $generic-tabs-border-focused-right: $generic-tabs-border-width solid !default; - - $generic-tabs-border-focused-disabled-top: $generic-tabs-border-width solid !default; - $generic-tabs-border-focused-disabled-bottom: $generic-tabs-border-width solid !default; - $generic-tabs-border-focused-disabled-left: $generic-tabs-border-width solid !default; - $generic-tabs-border-focused-disabled-right: $generic-tabs-border-width solid !default; - - $generic-tabs-border-active-top: $generic-tabs-border-width solid !default; - $generic-tabs-border-active-bottom: $generic-tabs-border-width solid !default; - $generic-tabs-border-active-left: $generic-tabs-border-width solid !default; - $generic-tabs-border-active-right: $generic-tabs-border-width solid !default; -} - -@if $color == "darkmoon" { - $generic-tabs-border-hover-top: $generic-tabs-border-width solid !default; - $generic-tabs-border-hover-bottom: $generic-tabs-border-width solid !default; - $generic-tabs-border-hover-left: none !default; - $generic-tabs-border-hover-right: none !default; - - $generic-tabs-border-selected-top: $generic-tabs-border-width solid !default; - $generic-tabs-border-selected-bottom: $generic-tabs-border-width solid !default; - $generic-tabs-border-selected-left: $generic-tabs-border-width solid !default; - $generic-tabs-border-selected-right: $generic-tabs-border-width solid !default; - - $generic-tabs-border-focused-top: $generic-tabs-border-width solid !default; - $generic-tabs-border-focused-bottom: $generic-tabs-border-width solid !default; - $generic-tabs-border-focused-left: $generic-tabs-border-width solid !default; - $generic-tabs-border-focused-right: $generic-tabs-border-width solid !default; - - $generic-tabs-border-focused-disabled-top: $generic-tabs-border-width solid !default; - $generic-tabs-border-focused-disabled-bottom: $generic-tabs-border-width solid !default; - $generic-tabs-border-focused-disabled-left: $generic-tabs-border-width solid !default; - $generic-tabs-border-focused-disabled-right: $generic-tabs-border-width solid !default; - - $generic-tabs-border-active-top: $generic-tabs-border-width solid !default; - $generic-tabs-border-active-bottom: $generic-tabs-border-width solid !default; - $generic-tabs-border-active-left: $generic-tabs-border-width solid !default; - $generic-tabs-border-active-right: $generic-tabs-border-width solid !default; -} - -@if $color == "darkviolet" { - $generic-tabs-border-hover-top: $generic-tabs-border-width solid !default; - $generic-tabs-border-hover-bottom: $generic-tabs-border-width solid !default; - $generic-tabs-border-hover-left: none !default; - $generic-tabs-border-hover-right: none !default; - - $generic-tabs-border-selected-top: $generic-tabs-border-width solid !default; - $generic-tabs-border-selected-bottom: $generic-tabs-border-width solid !default; - $generic-tabs-border-selected-left: $generic-tabs-border-width solid !default; - $generic-tabs-border-selected-right: $generic-tabs-border-width solid !default; - - $generic-tabs-border-focused-top: $generic-tabs-border-width solid !default; - $generic-tabs-border-focused-bottom: $generic-tabs-border-width solid !default; - $generic-tabs-border-focused-left: $generic-tabs-border-width solid !default; - $generic-tabs-border-focused-right: $generic-tabs-border-width solid !default; - - $generic-tabs-border-focused-disabled-top: $generic-tabs-border-width solid !default; - $generic-tabs-border-focused-disabled-bottom: $generic-tabs-border-width solid !default; - $generic-tabs-border-focused-disabled-left: $generic-tabs-border-width solid !default; - $generic-tabs-border-focused-disabled-right: $generic-tabs-border-width solid !default; - - $generic-tabs-border-active-top: $generic-tabs-border-width solid !default; - $generic-tabs-border-active-bottom: $generic-tabs-border-width solid !default; - $generic-tabs-border-active-left: $generic-tabs-border-width solid !default; - $generic-tabs-border-active-right: $generic-tabs-border-width solid !default; -} - -@if $color == "greenmist" { - $generic-tabs-border-hover-top: $generic-tabs-border-width solid !default; - $generic-tabs-border-hover-bottom: $generic-tabs-border-width solid !default; - $generic-tabs-border-hover-left: none !default; - $generic-tabs-border-hover-right: none !default; - - $generic-tabs-border-selected-top: $generic-tabs-border-width solid !default; - $generic-tabs-border-selected-bottom: $generic-tabs-border-width solid !default; - $generic-tabs-border-selected-left: $generic-tabs-border-width solid !default; - $generic-tabs-border-selected-right: $generic-tabs-border-width solid !default; - - $generic-tabs-border-focused-top: $generic-tabs-border-width solid !default; - $generic-tabs-border-focused-bottom: $generic-tabs-border-width solid !default; - $generic-tabs-border-focused-left: $generic-tabs-border-width solid !default; - $generic-tabs-border-focused-right: $generic-tabs-border-width solid !default; - - $generic-tabs-border-focused-disabled-top: $generic-tabs-border-width solid !default; - $generic-tabs-border-focused-disabled-bottom: $generic-tabs-border-width solid !default; - $generic-tabs-border-focused-disabled-left: $generic-tabs-border-width solid !default; - $generic-tabs-border-focused-disabled-right: $generic-tabs-border-width solid !default; - - $generic-tabs-border-active-top: $generic-tabs-border-width solid !default; - $generic-tabs-border-active-bottom: $generic-tabs-border-width solid !default; - $generic-tabs-border-active-left: $generic-tabs-border-width solid !default; - $generic-tabs-border-active-right: $generic-tabs-border-width solid !default; -} - -@if $color == "light" { - $generic-tabs-border-hover-top: $generic-tabs-border-width solid !default; - $generic-tabs-border-hover-bottom: $generic-tabs-border-width solid !default; - $generic-tabs-border-hover-left: none !default; - $generic-tabs-border-hover-right: none !default; - - $generic-tabs-border-selected-top: $generic-tabs-border-width solid !default; - $generic-tabs-border-selected-bottom: $generic-tabs-border-width solid !default; - $generic-tabs-border-selected-left: $generic-tabs-border-width solid !default; - $generic-tabs-border-selected-right: $generic-tabs-border-width solid !default; - - $generic-tabs-border-focused-top: $generic-tabs-border-width solid !default; - $generic-tabs-border-focused-bottom: $generic-tabs-border-width solid !default; - $generic-tabs-border-focused-left: $generic-tabs-border-width solid !default; - $generic-tabs-border-focused-right: $generic-tabs-border-width solid !default; - - $generic-tabs-border-focused-disabled-top: $generic-tabs-border-width solid !default; - $generic-tabs-border-focused-disabled-bottom: $generic-tabs-border-width solid !default; - $generic-tabs-border-focused-disabled-left: $generic-tabs-border-width solid !default; - $generic-tabs-border-focused-disabled-right: $generic-tabs-border-width solid !default; - - $generic-tabs-border-active-top: $generic-tabs-border-width solid !default; - $generic-tabs-border-active-bottom: $generic-tabs-border-width solid !default; - $generic-tabs-border-active-left: $generic-tabs-border-width solid !default; - $generic-tabs-border-active-right: $generic-tabs-border-width solid !default; -} - -@if $color == "softblue" { - $generic-tabs-border-hover-top: $generic-tabs-border-width solid !default; - $generic-tabs-border-hover-bottom: $generic-tabs-border-width solid !default; - $generic-tabs-border-hover-left: none !default; - $generic-tabs-border-hover-right: none !default; - - $generic-tabs-border-selected-top: $generic-tabs-border-width solid !default; - $generic-tabs-border-selected-bottom: $generic-tabs-border-width solid !default; - $generic-tabs-border-selected-left: $generic-tabs-border-width solid !default; - $generic-tabs-border-selected-right: $generic-tabs-border-width solid !default; - - $generic-tabs-border-focused-top: $generic-tabs-border-width solid !default; - $generic-tabs-border-focused-bottom: $generic-tabs-border-width solid !default; - $generic-tabs-border-focused-left: $generic-tabs-border-width solid !default; - $generic-tabs-border-focused-right: $generic-tabs-border-width solid !default; - - $generic-tabs-border-focused-disabled-top: $generic-tabs-border-width solid !default; - $generic-tabs-border-focused-disabled-bottom: $generic-tabs-border-width solid !default; - $generic-tabs-border-focused-disabled-left: $generic-tabs-border-width solid !default; - $generic-tabs-border-focused-disabled-right: $generic-tabs-border-width solid !default; - - $generic-tabs-border-active-top: $generic-tabs-border-width solid !default; - $generic-tabs-border-active-bottom: $generic-tabs-border-width solid !default; - $generic-tabs-border-active-left: $generic-tabs-border-width solid !default; - $generic-tabs-border-active-right: $generic-tabs-border-width solid !default; -} +$generic-tabs-border-hover-top: $generic-tabs-border-width solid !default; +$generic-tabs-border-hover-bottom: $generic-tabs-border-width solid !default; +$generic-tabs-border-hover-left: none !default; +$generic-tabs-border-hover-right: none !default; + +$generic-tabs-border-selected-top: $generic-tabs-border-width solid !default; +$generic-tabs-border-selected-bottom: $generic-tabs-border-width solid !default; +$generic-tabs-border-selected-left: $generic-tabs-border-width solid !default; +$generic-tabs-border-selected-right: $generic-tabs-border-width solid !default; + +$generic-tabs-border-focused-top: $generic-tabs-border-width solid !default; +$generic-tabs-border-focused-bottom: $generic-tabs-border-width solid !default; +$generic-tabs-border-focused-left: $generic-tabs-border-width solid !default; +$generic-tabs-border-focused-right: $generic-tabs-border-width solid !default; + +$generic-tabs-border-focused-disabled-top: $generic-tabs-border-width solid !default; +$generic-tabs-border-focused-disabled-bottom: $generic-tabs-border-width solid !default; +$generic-tabs-border-focused-disabled-left: $generic-tabs-border-width solid !default; +$generic-tabs-border-focused-disabled-right: $generic-tabs-border-width solid !default; + +$generic-tabs-border-active-top: $generic-tabs-border-width solid !default; +$generic-tabs-border-active-bottom: $generic-tabs-border-width solid !default; +$generic-tabs-border-active-left: $generic-tabs-border-width solid !default; +$generic-tabs-border-active-right: $generic-tabs-border-width solid !default; diff --git a/packages/devextreme-scss/scss/widgets/generic/tabs/variables/borders/_borders-vertical.scss b/packages/devextreme-scss/scss/widgets/generic/tabs/variables/borders/_borders-vertical.scss index f9d01c04e193..04cc910391e2 100644 --- a/packages/devextreme-scss/scss/widgets/generic/tabs/variables/borders/_borders-vertical.scss +++ b/packages/devextreme-scss/scss/widgets/generic/tabs/variables/borders/_borders-vertical.scss @@ -6,243 +6,27 @@ @use "../../variables/sizes" as *; @use "../../variables/borders/borders-horizontal"; -$generic-tabs-vertical-border-hover-top: null !default; -$generic-tabs-vertical-border-hover-bottom: null !default; -$generic-tabs-vertical-border-hover-left: null !default; -$generic-tabs-vertical-border-hover-right: null !default; - -$generic-tabs-vertical-border-selected-top: null !default; -$generic-tabs-vertical-border-selected-bottom: null !default; -$generic-tabs-vertical-border-selected-left: null !default; -$generic-tabs-vertical-border-selected-right: null !default; - -$generic-tabs-vertical-border-focused-top: null !default; -$generic-tabs-vertical-border-focused-bottom: null !default; -$generic-tabs-vertical-border-focused-left: null !default; -$generic-tabs-vertical-border-focused-right: null !default; - -$generic-tabs-vertical-border-focused-disabled-top: null !default; -$generic-tabs-vertical-border-focused-disabled-bottom: null !default; -$generic-tabs-vertical-border-focused-disabled-left: null !default; -$generic-tabs-vertical-border-focused-disabled-right: null !default; - -$generic-tabs-vertical-border-active-top: null !default; -$generic-tabs-vertical-border-active-bottom: null !default; -$generic-tabs-vertical-border-active-left: null !default; -$generic-tabs-vertical-border-active-right: null !default; - -@if $color == "carmine" { - $generic-tabs-vertical-border-hover-top: none !default; - $generic-tabs-vertical-border-hover-bottom: none !default; - $generic-tabs-vertical-border-hover-left: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-hover-right: $generic-tabs-border-width solid !default; - - $generic-tabs-vertical-border-selected-top: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-selected-bottom: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-selected-left: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-selected-right: $generic-tabs-border-width solid !default; - - $generic-tabs-vertical-border-focused-top: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-focused-bottom: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-focused-left: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-focused-right: $generic-tabs-border-width solid !default; - - $generic-tabs-vertical-border-focused-disabled-top: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-focused-disabled-bottom: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-focused-disabled-left: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-focused-disabled-right: $generic-tabs-border-width solid !default; - - $generic-tabs-vertical-border-active-top: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-active-bottom: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-active-left: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-active-right: $generic-tabs-border-width solid !default; -} - -@if $color == "contrast" { - $generic-tabs-vertical-border-hover-top: none !default; - $generic-tabs-vertical-border-hover-bottom: none !default; - $generic-tabs-vertical-border-hover-left: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-hover-right: $generic-tabs-border-width solid !default; - - $generic-tabs-vertical-border-selected-top: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-selected-bottom: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-selected-left: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-selected-right: $generic-tabs-border-width solid !default; - - $generic-tabs-vertical-border-focused-top: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-focused-bottom: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-focused-left: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-focused-right: $generic-tabs-border-width solid !default; - - $generic-tabs-vertical-border-focused-disabled-top: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-focused-disabled-bottom: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-focused-disabled-left: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-focused-disabled-right: $generic-tabs-border-width solid !default; - - $generic-tabs-vertical-border-active-top: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-active-bottom: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-active-left: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-active-right: $generic-tabs-border-width solid !default; -} - -@if $color == "dark" { - $generic-tabs-vertical-border-hover-top: none !default; - $generic-tabs-vertical-border-hover-bottom: none !default; - $generic-tabs-vertical-border-hover-left: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-hover-right: $generic-tabs-border-width solid !default; - - $generic-tabs-vertical-border-selected-top: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-selected-bottom: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-selected-left: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-selected-right: $generic-tabs-border-width solid !default; - - $generic-tabs-vertical-border-focused-top: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-focused-bottom: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-focused-left: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-focused-right: $generic-tabs-border-width solid !default; - - $generic-tabs-vertical-border-focused-disabled-top: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-focused-disabled-bottom: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-focused-disabled-left: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-focused-disabled-right: $generic-tabs-border-width solid !default; - - $generic-tabs-vertical-border-active-top: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-active-bottom: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-active-left: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-active-right: $generic-tabs-border-width solid !default; -} - -@if $color == "darkmoon" { - $generic-tabs-vertical-border-hover-top: none !default; - $generic-tabs-vertical-border-hover-bottom: none !default; - $generic-tabs-vertical-border-hover-left: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-hover-right: $generic-tabs-border-width solid !default; - - $generic-tabs-vertical-border-selected-top: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-selected-bottom: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-selected-left: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-selected-right: $generic-tabs-border-width solid !default; - - $generic-tabs-vertical-border-focused-top: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-focused-bottom: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-focused-left: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-focused-right: $generic-tabs-border-width solid !default; - - $generic-tabs-vertical-border-focused-disabled-top: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-focused-disabled-bottom: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-focused-disabled-left: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-focused-disabled-right: $generic-tabs-border-width solid !default; - - $generic-tabs-vertical-border-active-top: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-active-bottom: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-active-left: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-active-right: $generic-tabs-border-width solid !default; -} - -@if $color == "darkviolet" { - $generic-tabs-vertical-border-hover-top: none !default; - $generic-tabs-vertical-border-hover-bottom: none !default; - $generic-tabs-vertical-border-hover-left: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-hover-right: $generic-tabs-border-width solid !default; - - $generic-tabs-vertical-border-selected-top: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-selected-bottom: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-selected-left: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-selected-right: $generic-tabs-border-width solid !default; - - $generic-tabs-vertical-border-focused-top: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-focused-bottom: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-focused-left: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-focused-right: $generic-tabs-border-width solid !default; - - $generic-tabs-vertical-border-focused-disabled-top: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-focused-disabled-bottom: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-focused-disabled-left: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-focused-disabled-right: $generic-tabs-border-width solid !default; - - $generic-tabs-vertical-border-active-top: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-active-bottom: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-active-left: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-active-right: $generic-tabs-border-width solid !default; -} - -@if $color == "greenmist" { - $generic-tabs-vertical-border-hover-top: none !default; - $generic-tabs-vertical-border-hover-bottom: none !default; - $generic-tabs-vertical-border-hover-left: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-hover-right: $generic-tabs-border-width solid !default; - - $generic-tabs-vertical-border-selected-top: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-selected-bottom: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-selected-left: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-selected-right: $generic-tabs-border-width solid !default; - - $generic-tabs-vertical-border-focused-top: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-focused-bottom: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-focused-left: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-focused-right: $generic-tabs-border-width solid !default; - - $generic-tabs-vertical-border-focused-disabled-top: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-focused-disabled-bottom: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-focused-disabled-left: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-focused-disabled-right: $generic-tabs-border-width solid !default; - - $generic-tabs-vertical-border-active-top: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-active-bottom: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-active-left: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-active-right: $generic-tabs-border-width solid !default; -} - -@if $color == "light" { - $generic-tabs-vertical-border-hover-top: none !default; - $generic-tabs-vertical-border-hover-bottom: none !default; - $generic-tabs-vertical-border-hover-left: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-hover-right: $generic-tabs-border-width solid !default; - - $generic-tabs-vertical-border-selected-top: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-selected-bottom: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-selected-left: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-selected-right: $generic-tabs-border-width solid !default; - - $generic-tabs-vertical-border-focused-top: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-focused-bottom: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-focused-left: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-focused-right: $generic-tabs-border-width solid !default; - - $generic-tabs-vertical-border-focused-disabled-top: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-focused-disabled-bottom: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-focused-disabled-left: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-focused-disabled-right: $generic-tabs-border-width solid !default; - - $generic-tabs-vertical-border-active-top: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-active-bottom: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-active-left: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-active-right: $generic-tabs-border-width solid !default; -} - -@if $color == "softblue" { - $generic-tabs-vertical-border-hover-top: none !default; - $generic-tabs-vertical-border-hover-bottom: none !default; - $generic-tabs-vertical-border-hover-left: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-hover-right: $generic-tabs-border-width solid !default; - - $generic-tabs-vertical-border-selected-top: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-selected-bottom: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-selected-left: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-selected-right: $generic-tabs-border-width solid !default; - - $generic-tabs-vertical-border-focused-top: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-focused-bottom: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-focused-left: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-focused-right: $generic-tabs-border-width solid !default; - - $generic-tabs-vertical-border-focused-disabled-top: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-focused-disabled-bottom: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-focused-disabled-left: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-focused-disabled-right: $generic-tabs-border-width solid !default; - - $generic-tabs-vertical-border-active-top: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-active-bottom: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-active-left: $generic-tabs-border-width solid !default; - $generic-tabs-vertical-border-active-right: $generic-tabs-border-width solid !default; -} +$generic-tabs-vertical-border-hover-top: none !default; +$generic-tabs-vertical-border-hover-bottom: none !default; +$generic-tabs-vertical-border-hover-left: $generic-tabs-border-width solid !default; +$generic-tabs-vertical-border-hover-right: $generic-tabs-border-width solid !default; + +$generic-tabs-vertical-border-selected-top: $generic-tabs-border-width solid !default; +$generic-tabs-vertical-border-selected-bottom: $generic-tabs-border-width solid !default; +$generic-tabs-vertical-border-selected-left: $generic-tabs-border-width solid !default; +$generic-tabs-vertical-border-selected-right: $generic-tabs-border-width solid !default; + +$generic-tabs-vertical-border-focused-top: $generic-tabs-border-width solid !default; +$generic-tabs-vertical-border-focused-bottom: $generic-tabs-border-width solid !default; +$generic-tabs-vertical-border-focused-left: $generic-tabs-border-width solid !default; +$generic-tabs-vertical-border-focused-right: $generic-tabs-border-width solid !default; + +$generic-tabs-vertical-border-focused-disabled-top: $generic-tabs-border-width solid !default; +$generic-tabs-vertical-border-focused-disabled-bottom: $generic-tabs-border-width solid !default; +$generic-tabs-vertical-border-focused-disabled-left: $generic-tabs-border-width solid !default; +$generic-tabs-vertical-border-focused-disabled-right: $generic-tabs-border-width solid !default; + +$generic-tabs-vertical-border-active-top: $generic-tabs-border-width solid !default; +$generic-tabs-vertical-border-active-bottom: $generic-tabs-border-width solid !default; +$generic-tabs-vertical-border-active-left: $generic-tabs-border-width solid !default; +$generic-tabs-vertical-border-active-right: $generic-tabs-border-width solid !default; diff --git a/packages/devextreme-scss/scss/widgets/generic/tagBox/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/tagBox/_colors.scss index a342938c89a6..294bb2ffc202 100644 --- a/packages/devextreme-scss/scss/widgets/generic/tagBox/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/generic/tagBox/_colors.scss @@ -23,7 +23,6 @@ $tagbox-tag-button-remove-bg: null !default; $tagbox-tag-button-remove-active-bg: null !default; $tagbox-tag-focused-bg: null !default; $tagbox-tag-focused-color: null !default; -$tagbox-tag-focused-button-remove-bg: null !default; $tagbox-select-all-border-color: $base-border-color !default; @if $color == "carmine" { @@ -33,7 +32,6 @@ $tagbox-select-all-border-color: $base-border-color !default; $tagbox-tag-button-remove-active-bg: color.adjust($tagbox-tag-button-remove-bg, $lightness: 20%, $space: hsl) !default; $tagbox-tag-focused-bg: color.adjust($tagbox-tag-bg, $lightness: -7%, $space: hsl) !default; $tagbox-tag-focused-color: $tagbox-tag-color !default; - $tagbox-tag-focused-button-remove-bg: $tagbox-tag-button-remove-bg !default; } @if $color == "contrast" { @@ -43,7 +41,6 @@ $tagbox-select-all-border-color: $base-border-color !default; $tagbox-tag-button-remove-active-bg: color.adjust($tagbox-tag-button-remove-bg, $lightness: 20%, $space: hsl) !default; $tagbox-tag-focused-bg: $base-focus-color !default; $tagbox-tag-focused-color: $base-text-color !default; - $tagbox-tag-focused-button-remove-bg: $tagbox-tag-button-remove-bg !default; } @if $color == "dark" { @@ -53,7 +50,6 @@ $tagbox-select-all-border-color: $base-border-color !default; $tagbox-tag-button-remove-active-bg: color.adjust($tagbox-tag-button-remove-bg, $lightness: -20%, $space: hsl) !default; $tagbox-tag-focused-bg: color.adjust($tagbox-tag-bg, $lightness: -7.3%, $space: hsl) !default; $tagbox-tag-focused-color: $tagbox-tag-color !default; - $tagbox-tag-focused-button-remove-bg: $tagbox-tag-button-remove-bg !default; } @if $color == "darkmoon" { @@ -63,7 +59,6 @@ $tagbox-select-all-border-color: $base-border-color !default; $tagbox-tag-button-remove-active-bg: color.adjust($tagbox-tag-button-remove-bg, $lightness: -20%, $space: hsl) !default; $tagbox-tag-focused-bg: color.adjust($tagbox-tag-bg, $lightness: -7.3%, $space: hsl) !default; $tagbox-tag-focused-color: $tagbox-tag-color !default; - $tagbox-tag-focused-button-remove-bg: $tagbox-tag-button-remove-bg !default; } @if $color == "darkviolet" { @@ -73,7 +68,6 @@ $tagbox-select-all-border-color: $base-border-color !default; $tagbox-tag-button-remove-active-bg: color.adjust($tagbox-tag-button-remove-bg, $lightness: -20%, $space: hsl) !default; $tagbox-tag-focused-bg: color.adjust($tagbox-tag-bg, $lightness: -7.3%, $space: hsl) !default; $tagbox-tag-focused-color: $tagbox-tag-color !default; - $tagbox-tag-focused-button-remove-bg: $tagbox-tag-button-remove-bg !default; } @if $color == "greenmist" { @@ -83,7 +77,6 @@ $tagbox-select-all-border-color: $base-border-color !default; $tagbox-tag-button-remove-active-bg: color.adjust($tagbox-tag-button-remove-bg, $lightness: 20%, $space: hsl) !default; $tagbox-tag-focused-bg: color.adjust($tagbox-tag-bg, $lightness: -7%, $space: hsl) !default; $tagbox-tag-focused-color: $tagbox-tag-color !default; - $tagbox-tag-focused-button-remove-bg: $tagbox-tag-button-remove-bg !default; } @if $color == "light" { @@ -93,7 +86,6 @@ $tagbox-select-all-border-color: $base-border-color !default; $tagbox-tag-button-remove-active-bg: color.adjust($tagbox-tag-button-remove-bg, $lightness: 20%, $space: hsl) !default; $tagbox-tag-focused-bg: color.adjust($tagbox-tag-bg, $lightness: -7%, $space: hsl) !default; $tagbox-tag-focused-color: $tagbox-tag-color !default; - $tagbox-tag-focused-button-remove-bg: $tagbox-tag-button-remove-bg !default; } @if $color == "softblue" { @@ -103,5 +95,6 @@ $tagbox-select-all-border-color: $base-border-color !default; $tagbox-tag-button-remove-active-bg: color.adjust($tagbox-tag-button-remove-bg, $lightness: 20%, $space: hsl) !default; $tagbox-tag-focused-bg: color.adjust($tagbox-tag-bg, $lightness: -7%, $space: hsl) !default; $tagbox-tag-focused-color: $tagbox-tag-color !default; - $tagbox-tag-focused-button-remove-bg: $tagbox-tag-button-remove-bg !default; } + +$tagbox-tag-focused-button-remove-bg: $tagbox-tag-button-remove-bg !default; diff --git a/packages/devextreme-scss/scss/widgets/generic/textEditor/_sizes.scss b/packages/devextreme-scss/scss/widgets/generic/textEditor/_sizes.scss index ebbe32e60ef1..6520341bb9fe 100644 --- a/packages/devextreme-scss/scss/widgets/generic/textEditor/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/generic/textEditor/_sizes.scss @@ -7,7 +7,7 @@ $generic-texteditor-label-outside-font-size: null !default; $generic-texteditor-label-outside-height: null !default; $generic-texteditor-label-outside-top-offset: null !default; $generic-texteditor-button-icononly-bottom-padding: null !default; -$generic-texteditor-button-icononly-horizontal-padding: null !default; +$generic-texteditor-button-icononly-horizontal-padding: $generic-button-icon-horizontal-padding - 2px !default; $generic-texteditor-button-top-padding: $generic-base-inline-widget-top-padding - $generic-button-border-weight - 2px !default; $generic-texteditor-button-bottom-padding: $generic-base-inline-widget-bottom-padding - $generic-button-border-weight - 2px !default; @@ -26,7 +26,6 @@ $generic-texteditor-underlined-input-with-label-bottom-padding: $generic-base-in $generic-texteditor-label-outside-height: 20px !default; $generic-texteditor-label-outside-top-offset: 24px !default; $generic-texteditor-button-icononly-bottom-padding: $generic-texteditor-button-bottom-padding !default; - $generic-texteditor-button-icononly-horizontal-padding: $generic-button-icon-horizontal-padding - 2px !default; } @else if $size == "compact" { @@ -36,5 +35,4 @@ $generic-texteditor-underlined-input-with-label-bottom-padding: $generic-base-in $generic-texteditor-label-outside-height: 16px !default; $generic-texteditor-label-outside-top-offset: 18px !default; $generic-texteditor-button-icononly-bottom-padding: $generic-texteditor-button-bottom-padding + 1px !default; - $generic-texteditor-button-icononly-horizontal-padding: $generic-button-icon-horizontal-padding - 2px !default; } diff --git a/packages/devextreme-scss/scss/widgets/generic/treeList/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/treeList/_colors.scss index 86c52ae07a9f..b46d475d6eeb 100644 --- a/packages/devextreme-scss/scss/widgets/generic/treeList/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/generic/treeList/_colors.scss @@ -2,45 +2,37 @@ @use "../colors" as *; @use "../gridBase/colors" as *; -$treelist-spin-icon-color: null !default; +$treelist-spin-icon-color: $datagrid-spin-icon-color !default; $treelist-selection-spin-icon-color: null !default; @if $color == "carmine" { - $treelist-spin-icon-color: $datagrid-spin-icon-color !default; $treelist-selection-spin-icon-color: color.adjust($datagrid-spin-icon-color, $lightness: 100%, $space: hsl) !default; } @if $color == "contrast" { - $treelist-spin-icon-color: $datagrid-spin-icon-color !default; $treelist-selection-spin-icon-color: $base-inverted-text-color !default; } @if $color == "dark" { - $treelist-spin-icon-color: $datagrid-spin-icon-color !default; $treelist-selection-spin-icon-color: $treelist-spin-icon-color !default; } @if $color == "darkmoon" { - $treelist-spin-icon-color: $datagrid-spin-icon-color !default; $treelist-selection-spin-icon-color: $base-bg !default; } @if $color == "darkviolet" { - $treelist-spin-icon-color: $datagrid-spin-icon-color !default; $treelist-selection-spin-icon-color: $base-icon-color !default; } @if $color == "greenmist" { - $treelist-spin-icon-color: $datagrid-spin-icon-color !default; $treelist-selection-spin-icon-color: color.adjust($treelist-spin-icon-color, $lightness: 100%, $space: hsl) !default; } @if $color == "light" { - $treelist-spin-icon-color: $datagrid-spin-icon-color !default; $treelist-selection-spin-icon-color: $treelist-spin-icon-color !default; } @if $color == "softblue" { - $treelist-spin-icon-color: $datagrid-spin-icon-color !default; $treelist-selection-spin-icon-color: $base-icon-color !default; } diff --git a/packages/devextreme-scss/scss/widgets/generic/treeView/_sizes.scss b/packages/devextreme-scss/scss/widgets/generic/treeView/_sizes.scss index e24765ccb446..6a94a9ac1dfb 100644 --- a/packages/devextreme-scss/scss/widgets/generic/treeView/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/generic/treeView/_sizes.scss @@ -6,7 +6,6 @@ $generic-treeview-toggle-item-width: null !default; $generic-treeview-item-height: null !default; $generic-select-all-item-padding: null !default; $generic-treeview-item-padding: null !default; -$generic-treeview-load-indicator-size: null !default; $generic-checkbox-container-size: null !default; $generic-treeview-searchbox-margin-bottom: null !default; $generic-treeview-border-padding: 1px !default; @@ -21,7 +20,6 @@ $generic-select-all-item-border-visible-padding: 20px !default; $generic-treeview-toggle-item-width: 22px !default; $generic-select-all-item-padding: 9px 40px 11px 40px !default; $generic-treeview-item-padding: 5px 10px !default; - $generic-treeview-load-indicator-size: $generic-treeview-toggle-item-width !default; $generic-treeview-searchbox-margin-bottom: 5px !default; } @@ -33,10 +31,11 @@ $generic-select-all-item-border-visible-padding: 20px !default; $generic-treeview-toggle-item-width: 16px !default; $generic-select-all-item-padding: 6px 30px 8px 30px !default; $generic-treeview-item-padding: 4px 6px !default; - $generic-treeview-load-indicator-size: $generic-treeview-toggle-item-width !default; $generic-treeview-searchbox-margin-bottom: 3px !default; } +$generic-treeview-load-indicator-size: $generic-treeview-toggle-item-width !default; + $generic-treeview-container-padding: $generic-treeview-border-padding $generic-treeview-border-padding diff --git a/packages/devextreme-scss/scss/widgets/material/_colors.scss b/packages/devextreme-scss/scss/widgets/material/_colors.scss index 6b8686ed2905..cdf27f7e9c34 100644 --- a/packages/devextreme-scss/scss/widgets/material/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/_colors.scss @@ -31,18 +31,6 @@ $base-text-color: null !default; */ $base-label-color: null !default; -/** -* $name 40. Icon color -* $type color -*/ -$base-icon-color: null !default; - -/** -* $name 50. Arrow icon color -* $type color -*/ -$base-spin-icon-color: null !default; - /** * $name 30. Background color * $type color @@ -55,7 +43,6 @@ $base-bg: null !default; */ $base-border-color: null !default; $base-inverted-bg: null !default; -$base-element-bg: null !default; $base-shadow-color: null !default; /** @@ -76,12 +63,6 @@ $base-warning: null !default; */ $base-danger: null !default; -/** -* $name 80. Hover state text color -* $type color -*/ -$base-hover-color: null !default; - /** * $name 90. Hover state background color * $type color @@ -89,18 +70,11 @@ $base-hover-color: null !default; $base-hover-bg: null !default; $base-inverted-text-color: null !default; -/** -* $name 100. Focused state text color -* $type color -*/ -$base-focus-color: null !default; - /** * $name 110. Focused state background color * $type color */ $base-focus-bg: null !default; -$base-inverted-icon-color: null !default; $base-disabled-opacity: 0.38 !default; $base-disabled-color: null !default; $base-dropdown-shadow-color: null !default; @@ -155,19 +129,13 @@ $scrollview-pulldown-path: null !default; $base-text-color: rgba(0, 0, 0, 0.87) !default; $base-label-color: rgba(0, 0, 0, 0.6) !default; $base-disabled-color: rgba(0, 0, 0, $base-disabled-opacity) !default; - $base-icon-color: color.change($base-text-color, $alpha: 0.6) !default; - $base-spin-icon-color: color.change($base-text-color, $alpha: 0.6) !default; $base-bg: #fff !default; $base-border-color: #e0e0e0 !default; $base-inverted-bg: color.adjust($base-bg, $lightness: -100%, $space: hsl) !default; - $base-element-bg: $base-bg !default; $base-shadow-color: $base-inverted-bg !default; - $base-hover-color: $base-text-color !default; $base-hover-bg: color.change(#000, $alpha: 0.04) !default; $base-inverted-text-color: #fff !default; - $base-focus-color: $base-inverted-text-color !default; $base-focus-bg: color.change(#000, $alpha: 0.04) !default; - $base-inverted-icon-color: $base-inverted-text-color !default; $base-dropdown-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default; $scrollview-pulldown-path: data-uri("images/widgets/material/color-schemes/light/pulldown.png") !default; @@ -185,24 +153,44 @@ $scrollview-pulldown-path: null !default; $base-text-color: #fff !default; $base-label-color: rgba(255, 255, 255, 0.6) !default; $base-disabled-color: rgba(255, 255, 255, $base-disabled-opacity) !default; - $base-icon-color: color.change($base-text-color, $alpha: 0.6) !default; - $base-spin-icon-color: color.change($base-text-color, $alpha: 0.6) !default; $base-bg: #292929 !default; $base-border-color: #515159 !default; $base-inverted-bg: color.adjust($base-bg, $lightness: 100%, $space: hsl) !default; - $base-element-bg: $base-bg !default; $base-shadow-color: #000 !default; - $base-hover-color: $base-text-color !default; $base-hover-bg: color.change(#fff, $alpha: 0.04) !default; $base-inverted-text-color: rgba(0, 0, 0, 0.87) !default; - $base-focus-color: $base-inverted-text-color !default; $base-focus-bg: color.change(#fff, $alpha: 0.04) !default; - $base-inverted-icon-color: $base-inverted-text-color !default; $base-dropdown-shadow-color: color.change($base-shadow-color, $alpha: 0.4) !default; $scrollview-pulldown-path: data-uri("images/widgets/material/color-schemes/dark/pulldown.png") !default; } +/** +* $name 40. Icon color +* $type color +*/ +$base-icon-color: color.change($base-text-color, $alpha: 0.6) !default; + +/** +* $name 50. Arrow icon color +* $type color +*/ +$base-spin-icon-color: color.change($base-text-color, $alpha: 0.6) !default; +$base-element-bg: $base-bg !default; + +/** +* $name 80. Hover state text color +* $type color +*/ +$base-hover-color: $base-text-color !default; + +/** +* $name 100. Focused state text color +* $type color +*/ +$base-focus-color: $base-inverted-text-color !default; +$base-inverted-icon-color: $base-inverted-text-color !default; + /** * $name 30. Link color * $type color diff --git a/packages/devextreme-scss/scss/widgets/material/cardView/_colors.scss b/packages/devextreme-scss/scss/widgets/material/cardView/_colors.scss index f5b547710de0..3f3c19fa0907 100644 --- a/packages/devextreme-scss/scss/widgets/material/cardView/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/cardView/_colors.scss @@ -19,19 +19,19 @@ * $name 100. Background color * $type color */ -$cardview-material-common-bg-color: null !default; +$cardview-material-common-bg-color: $base-bg !default; /** * $name 102. Link color * $type color */ -$cardview-material-common-link-color: null !default; +$cardview-material-common-link-color: $base-link-color !default; /** * $name 103. Text color * $type color */ -$cardview-material-common-text-color: null !default; +$cardview-material-common-text-color: $base-text-color !default; // #endregion @@ -41,31 +41,31 @@ $cardview-material-common-text-color: null !default; * $name 200. Background color * $type color */ -$cardview-material-card-bg-color: null !default; +$cardview-material-card-bg-color: $base-bg !default; /** * $name 201. Border color * $type color */ -$cardview-material-card-border-color: null !default; +$cardview-material-card-border-color: $base-border-color !default; /** * $name 203. Divider color * $type color */ -$cardview-material-card-divider-color: null !default; +$cardview-material-card-divider-color: $cardview-material-card-border-color !default; /** * $name 204. Text color * $type color */ -$cardview-material-card-text-color: null !default; +$cardview-material-card-text-color: $cardview-material-common-text-color !default; /** * $name 206. Cover background color * $type color */ -$cardview-material-card__cover-bg-color: null !default; +$cardview-material-card__cover-bg-color: #FFF !default; /** * $name 207. "Empty cover" background color @@ -77,9 +77,9 @@ $cardview-material-card__cover--noimage-bg-color: null !default; * $name 208. "Empty cover" icon color * $type color */ -$cardview-material-card__cover--noimage__icon-color: null !default; +$cardview-material-card__cover--noimage__icon-color: color.change($cardview-material-common-text-color, $alpha: 0.38) !default; -$cardview-material-card--focused-outline-color: null !default; +$cardview-material-card--focused-outline-color: $base-accent !default; // #endregion @@ -97,35 +97,23 @@ $cardview-material-card--selected-bg-color: null !default; */ $cardview-material-card--selected-border-color: null !default; -/** -* $name 302. Divider color -* $type color -*/ -$cardview-material-card--selected-divider-color: null !default; - /** * $name 303. Text color * $type color */ -$cardview-material-card--selected-text-color: null !default; +$cardview-material-card--selected-text-color: $cardview-material-card-text-color !default; /** * $name 305. Cover background color * $type color */ -$cardview-material-card--selected__cover-bg-color: null !default; - -/** -* $name 306. "Empty cover" background color -* $type color -*/ -$cardview-material-card--selected__cover--noimage-bg-color: null !default; +$cardview-material-card--selected__cover-bg-color: $cardview-material-card__cover-bg-color !default; /** * $name 307. "Empty cover" icon color * $type color */ -$cardview-material-card--selected__cover--noimage__icon-color: null !default; +$cardview-material-card--selected__cover--noimage__icon-color: $cardview-material-card__cover--noimage__icon-color !default; // #endregion @@ -137,37 +125,31 @@ $cardview-material-card--selected__cover--noimage__icon-color: null !default; */ $cardview-material-header-panel__item-bg-color: null !default; -/** -* $name 401. Border color -* $type color -*/ -$cardview-material-header-panel__item-border-color: null !default; - /** * $name 403. Text color * $type color */ -$cardview-material-header-panel__item-text-color: null !default; +$cardview-material-header-panel__item-text-color: $cardview-material-common-text-color !default; /** * $name 405. Icon color * $type color */ -$cardview-material-header-panel__item__icon-color: null !default; +$cardview-material-header-panel__item__icon-color: $cardview-material-common-text-color !default; /** * $name 406. Active "Filter" icon color * $type color */ -$cardview-material-header-panel__item__header-filter-icon--selected-color: null !default; +$cardview-material-header-panel__item__header-filter-icon--selected-color: $base-accent !default; /** * $name 407. Sort index text color * $type color */ -$cardview-material-header-panel__item__sort-index-text-color: null !default; +$cardview-material-header-panel__item__sort-index-text-color: $cardview-material-common-text-color !default; -$cardview-material-header-panel__item--focused-outline-color: null !default; +$cardview-material-header-panel__item--focused-outline-color: $base-accent !default; // #endregion @@ -179,103 +161,73 @@ $cardview-material-header-panel__item--focused-outline-color: null !default; */ $cardview-material-header-panel__item--hovered-bg-color: null !default; -/** -* $name 501. Border color -* $type color -*/ -$cardview-material-header-panel__item--hovered-border-color: null !default; - /** * $name 502. Text color * $type color */ -$cardview-material-header-panel__item--hovered-text-color: null !default; +$cardview-material-header-panel__item--hovered-text-color: $cardview-material-header-panel__item-text-color !default; /** * $name 504. Icon color * $type color */ -$cardview-material-header-panel__item--hovered__icon-color: null !default; +$cardview-material-header-panel__item--hovered__icon-color: $cardview-material-header-panel__item__icon-color !default; /** * $name 505. Active "Filter" icon color * $type color */ -$cardview-material-header-panel__item--hovered__header-filter-icon--selected-color: null !default; +$cardview-material-header-panel__item--hovered__header-filter-icon--selected-color: $cardview-material-header-panel__item__header-filter-icon--selected-color !default; /** * $name 506. Sort index text color * $type color */ -$cardview-material-header-panel__item--hovered__sort-index-text-color: null !default; +$cardview-material-header-panel__item--hovered__sort-index-text-color: $cardview-material-header-panel__item__sort-index-text-color !default; // #endregion // #region HEADER PANEL ITEM (DISABLED) -/** -* $name 600. Background color -* $type color -*/ -$cardview-material-header-panel__item--disabled-bg-color: null !default; - -/** -* $name 601. Border color -* $type color -*/ -$cardview-material-header-panel__item--disabled-border-color: null !default; - /** * $name 602. Text color * $type color */ -$cardview-material-header-panel__item--disabled-text-color: null !default; +$cardview-material-header-panel__item--disabled-text-color: color.change($cardview-material-header-panel__item-text-color, $alpha: 0.38) !default; /** * $name 604. Icon color * $type color */ -$cardview-material-header-panel__item--disabled__icon-color: null !default; +$cardview-material-header-panel__item--disabled__icon-color: color.change($cardview-material-header-panel__item__icon-color, $alpha: 0.38) !default; /** * $name 605. Active "Filter" icon color * $type color */ -$cardview-material-header-panel__item--disabled__header-filter-icon--selected-color: null !default; +$cardview-material-header-panel__item--disabled__header-filter-icon--selected-color: color.change($cardview-material-header-panel__item__header-filter-icon--selected-color, $alpha: 0.38) !default; /** * $name 606. Sort index text color * $type color */ -$cardview-material-header-panel__item--disabled__sort-index-text-color: null !default; +$cardview-material-header-panel__item--disabled__sort-index-text-color: color.change($cardview-material-header-panel__item__sort-index-text-color, $alpha: 0.38) !default; // #endregion // #region HEADER PANEL ITEM (ON DRAG) -/** -* $name 700. Background color -* $type color -*/ -$cardview-material-header-panel__item--dragged-bg-color: null !default; - -/** -* $name 701. Border color -* $type color -*/ -$cardview-material-header-panel__item--dragged-border-color: null !default; - /** * $name 702. Text color * $type color */ -$cardview-material-header-panel__item--dragged-text-color: null !default; +$cardview-material-header-panel__item--dragged-text-color: $cardview-material-header-panel__item-text-color !default; /** * $name 704. "Drag allowed" icon color * $type color */ -$cardview-material-header-panel__item--dragged__allowance-icon-color: null !default; +$cardview-material-header-panel__item--dragged__allowance-icon-color: $cardview-material-common-text-color !default; /** * $name 705. "Drag blocked" icon color @@ -287,7 +239,7 @@ $cardview-material-header-panel__item--dragged__prohibition-icon-color: null !de * $name 706. Box shadow color * $type color */ -$cardview-material-header-panel__item--dragged-box-shadow-color: null !default; +$cardview-material-header-panel__item--dragged-box-shadow-color: rgba(0, 0, 0, 0.2) !default; // #endregion @@ -303,19 +255,19 @@ $cardview-material-header-panel__dropzone-bg-color: null !default; * $name 802. Border color * $type color */ -$cardview-material-header-panel__dropzone-border-color: null !default; +$cardview-material-header-panel__dropzone-border-color: $base-accent !default; /** * $name 803. Text color * $type color */ -$cardview-material-header-panel__dropzone-text-color: null !default; +$cardview-material-header-panel__dropzone-text-color: $base-accent !default; /** * $name 804. Icon color * $type color */ -$cardview-material-header-panel__dropzone__icon-color: null !default; +$cardview-material-header-panel__dropzone__icon-color: $base-accent !default; // #endregion @@ -325,25 +277,25 @@ $cardview-material-header-panel__dropzone__icon-color: null !default; * $name 900. Background color * $type color */ -$cardview-material-filter-panel-bg-color: null !default; +$cardview-material-filter-panel-bg-color: $cardview-material-common-bg-color !default; /** * $name 902. Border color * $type color */ -$cardview-material-filter-panel-border-color: null !default; +$cardview-material-filter-panel-border-color: $base-border-color !default; /** * $name 903. Text color * $type color */ -$cardview-material-filter-panel-text-color: null !default; +$cardview-material-filter-panel-text-color: $base-accent !default; /** * $name 904. Icon color * $type color */ -$cardview-material-filter-panel__icon-color: null !default; +$cardview-material-filter-panel__icon-color: $base-accent !default; // #endregion @@ -353,19 +305,19 @@ $cardview-material-filter-panel__icon-color: null !default; * $name 1000. Background color * $type color */ -$cardview-material-nodata-view-bg-color: null !default; +$cardview-material-nodata-view-bg-color: $cardview-material-common-bg-color !default; /** * $name 1001. Text color * $type color */ -$cardview-material-nodata-view-text-color: null !default; +$cardview-material-nodata-view-text-color: $base-label-color !default; /** * $name 1002. Icon color * $type color */ -$cardview-material-nodata-view__icon-color: null !default; +$cardview-material-nodata-view__icon-color: $cardview-material-nodata-view-text-color !default; /** * $name 1003. Icon background color @@ -393,190 +345,120 @@ $cardview-material-card__content__field-value--highlighted-text-color: null !def * $name 1104. Box shadow color * $type color */ -$cardview-material-card__content__field-value--highlighted-box-shadow-color: null !default; +$cardview-material-card__content__field-value--highlighted-box-shadow-color: rgba(0, 0, 0, 0.25) !default; // #endregion // #region COLUMN CHOOSER -$cardview-material-columnchooser--empty__message-color: null !default; +$cardview-material-columnchooser--empty__message-color: color.adjust($cardview-material-common-text-color, $lightness: 26%, $space: hsl) !default; // #endregion @if $mode == "light" { - // Common - $cardview-material-common-bg-color: $base-bg !default; - $cardview-material-common-link-color: $base-link-color !default; - $cardview-material-common-text-color: $base-text-color !default; - // Card - $cardview-material-card-bg-color: $base-bg !default; - $cardview-material-card-border-color: $base-border-color !default; - $cardview-material-card-divider-color: $cardview-material-card-border-color !default; - $cardview-material-card-text-color: $cardview-material-common-text-color !default; - $cardview-material-card__cover-bg-color: #FFF !default; $cardview-material-card__cover--noimage-bg-color: color.adjust($base-bg, $lightness: -7.84%, $space: hsl) !default; - $cardview-material-card__cover--noimage__icon-color: color.change($cardview-material-common-text-color, $alpha: 0.38) !default; - - $cardview-material-card--focused-outline-color: $base-accent !default; // Card - selected $cardview-material-card--selected-bg-color: color.change($base-accent, $alpha: 0.08) !default; $cardview-material-card--selected-border-color: color.change($base-accent, $alpha: 0.32) !default; - $cardview-material-card--selected-divider-color: $cardview-material-card--selected-border-color !default; - $cardview-material-card--selected-text-color: $cardview-material-card-text-color !default; - $cardview-material-card--selected__cover-bg-color: $cardview-material-card__cover-bg-color !default; - $cardview-material-card--selected__cover--noimage-bg-color: $cardview-material-card__cover--noimage-bg-color !default; - $cardview-material-card--selected__cover--noimage__icon-color: $cardview-material-card__cover--noimage__icon-color !default; // Header panel item - default state $cardview-material-header-panel__item-bg-color: color.adjust($base-bg, $lightness: -7.84%, $space: hsl) !default; - $cardview-material-header-panel__item-border-color: $cardview-material-header-panel__item-bg-color !default; - $cardview-material-header-panel__item-text-color: $cardview-material-common-text-color !default; - $cardview-material-header-panel__item__icon-color: $cardview-material-common-text-color !default; - $cardview-material-header-panel__item__header-filter-icon--selected-color: $base-accent !default; - $cardview-material-header-panel__item__sort-index-text-color: $cardview-material-common-text-color !default; - - $cardview-material-header-panel__item--focused-outline-color: $base-accent !default; // Header panel item - hovered $cardview-material-header-panel__item--hovered-bg-color: color.adjust($cardview-material-header-panel__item-bg-color, $lightness: -4.31%, $space: hsl) !default; - $cardview-material-header-panel__item--hovered-border-color: $cardview-material-header-panel__item--hovered-bg-color !default; - $cardview-material-header-panel__item--hovered-text-color: $cardview-material-header-panel__item-text-color !default; - $cardview-material-header-panel__item--hovered__icon-color: $cardview-material-header-panel__item__icon-color !default; - $cardview-material-header-panel__item--hovered__header-filter-icon--selected-color: $cardview-material-header-panel__item__header-filter-icon--selected-color !default; - $cardview-material-header-panel__item--hovered__sort-index-text-color: $cardview-material-header-panel__item__sort-index-text-color !default; - - // Header panel item - disabled - $cardview-material-header-panel__item--disabled-bg-color: $cardview-material-header-panel__item-bg-color !default; - $cardview-material-header-panel__item--disabled-border-color: $cardview-material-header-panel__item--disabled-bg-color !default; - $cardview-material-header-panel__item--disabled-text-color: color.change($cardview-material-header-panel__item-text-color, $alpha: 0.38) !default; - $cardview-material-header-panel__item--disabled__icon-color: color.change($cardview-material-header-panel__item__icon-color, $alpha: 0.38) !default; - $cardview-material-header-panel__item--disabled__header-filter-icon--selected-color: color.change($cardview-material-header-panel__item__header-filter-icon--selected-color, $alpha: 0.38) !default; - $cardview-material-header-panel__item--disabled__sort-index-text-color: color.change($cardview-material-header-panel__item__sort-index-text-color, $alpha: 0.38) !default; // Header panel item - dragged - $cardview-material-header-panel__item--dragged-bg-color: $cardview-material-header-panel__item-bg-color !default; - $cardview-material-header-panel__item--dragged-border-color: $cardview-material-header-panel__item--dragged-bg-color !default; - $cardview-material-header-panel__item--dragged-text-color: $cardview-material-header-panel__item-text-color !default; - $cardview-material-header-panel__item--dragged__allowance-icon-color: $cardview-material-common-text-color !default; $cardview-material-header-panel__item--dragged__prohibition-icon-color: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: -4deg, $saturation: 22.8%, $lightness: -9.61%) !default; - $cardview-material-header-panel__item--dragged-box-shadow-color: rgba(0, 0, 0, 0.2) !default; // Header panel Drop-zone $cardview-material-header-panel__dropzone-bg-color: color.mix($base-accent, $base-bg, 8%) !default; - $cardview-material-header-panel__dropzone-border-color: $base-accent !default; - $cardview-material-header-panel__dropzone-text-color: $base-accent !default; - $cardview-material-header-panel__dropzone__icon-color: $base-accent !default; - - // Filter panel - $cardview-material-filter-panel-bg-color: $cardview-material-common-bg-color !default; - $cardview-material-filter-panel-border-color: $base-border-color !default; - $cardview-material-filter-panel-text-color: $base-accent !default; - $cardview-material-filter-panel__icon-color: $base-accent !default; // Empty view - $cardview-material-nodata-view-bg-color: $cardview-material-common-bg-color !default; - $cardview-material-nodata-view-text-color: $base-label-color !default; - $cardview-material-nodata-view__icon-color: $cardview-material-nodata-view-text-color !default; $cardview-material-nodata-view__icon-bg-color: color.adjust($base-bg, $lightness: -7.84%, $space: hsl) !default; // Search highlight $cardview-material-card__content__field-value--highlighted-text-color: rgba(0, 0, 0, 1) !default; - $cardview-material-card__content__field-value--highlighted-box-shadow-color: rgba(0, 0, 0, 0.25) !default; - - // Column chooser - $cardview-material-columnchooser--empty__message-color: color.adjust($cardview-material-common-text-color, $lightness: 26%, $space: hsl) !default; } @if $mode == "dark" { - // Common - $cardview-material-common-bg-color: $base-bg !default; - $cardview-material-common-link-color: $base-link-color !default; - $cardview-material-common-text-color: $base-text-color !default; - // Card - $cardview-material-card-bg-color: $base-bg !default; - $cardview-material-card-border-color: $base-border-color !default; - $cardview-material-card-divider-color: $cardview-material-card-border-color !default; - $cardview-material-card-text-color: $cardview-material-common-text-color !default; - $cardview-material-card__cover-bg-color: #FFF !default; $cardview-material-card__cover--noimage-bg-color: color.adjust($base-bg, $saturation: -0.3%, $space: hsl, $lightness: 8.04%) !default; - $cardview-material-card__cover--noimage__icon-color: color.change($cardview-material-common-text-color, $alpha: 0.38) !default; - - $cardview-material-card--focused-outline-color: $base-accent !default; // Card - selected $cardview-material-card--selected-bg-color: color.change(color.adjust($base-accent, $lightness: 19.22%, $space: hsl), $alpha: 0.08) !default; $cardview-material-card--selected-border-color: color.change(color.adjust($base-accent, $lightness: 19.22%, $space: hsl), $alpha: 0.32) !default; - $cardview-material-card--selected-divider-color: $cardview-material-card--selected-border-color !default; - $cardview-material-card--selected-text-color: $cardview-material-card-text-color !default; - $cardview-material-card--selected__cover-bg-color: $cardview-material-card__cover-bg-color !default; - $cardview-material-card--selected__cover--noimage-bg-color: $cardview-material-card__cover--noimage-bg-color !default; - $cardview-material-card--selected__cover--noimage__icon-color: $cardview-material-card__cover--noimage__icon-color !default; // Header panel item - default $cardview-material-header-panel__item-bg-color: color.adjust($base-bg, $saturation: -0.3%, $space: hsl, $lightness: 8.04%) !default; - $cardview-material-header-panel__item-border-color: $cardview-material-header-panel__item-bg-color !default; - $cardview-material-header-panel__item-text-color: $cardview-material-common-text-color !default; - $cardview-material-header-panel__item__icon-color: $cardview-material-common-text-color !default; - $cardview-material-header-panel__item__header-filter-icon--selected-color: $base-accent !default; - $cardview-material-header-panel__item__sort-index-text-color: $cardview-material-common-text-color !default; - - $cardview-material-header-panel__item--focused-outline-color: $base-accent !default; // Header panel item - hovered $cardview-material-header-panel__item--hovered-bg-color: color.adjust($cardview-material-header-panel__item-bg-color, $saturation: -3.47%, $space: hsl, $lightness: 2.16%) !default; - $cardview-material-header-panel__item--hovered-border-color: $cardview-material-header-panel__item--hovered-bg-color !default; - $cardview-material-header-panel__item--hovered-text-color: $cardview-material-header-panel__item-text-color !default; - $cardview-material-header-panel__item--hovered__icon-color: $cardview-material-header-panel__item__icon-color !default; - $cardview-material-header-panel__item--hovered__header-filter-icon--selected-color: $cardview-material-header-panel__item__header-filter-icon--selected-color !default; - $cardview-material-header-panel__item--hovered__sort-index-text-color: $cardview-material-header-panel__item__sort-index-text-color !default; - - // Header panel item - disabled - $cardview-material-header-panel__item--disabled-bg-color: $cardview-material-header-panel__item-bg-color !default; - $cardview-material-header-panel__item--disabled-border-color: $cardview-material-header-panel__item--disabled-bg-color !default; - $cardview-material-header-panel__item--disabled-text-color: color.change($cardview-material-header-panel__item-text-color, $alpha: 0.38) !default; - $cardview-material-header-panel__item--disabled__icon-color: color.change($cardview-material-header-panel__item__icon-color, $alpha: 0.38) !default; - $cardview-material-header-panel__item--disabled__header-filter-icon--selected-color: color.change($cardview-material-header-panel__item__header-filter-icon--selected-color, $alpha: 0.38) !default; - $cardview-material-header-panel__item--disabled__sort-index-text-color: color.change($cardview-material-header-panel__item__sort-index-text-color, $alpha: 0.38) !default; // Header panel item - dragged - $cardview-material-header-panel__item--dragged-bg-color: $cardview-material-header-panel__item-bg-color !default; - $cardview-material-header-panel__item--dragged-border-color: $cardview-material-header-panel__item--dragged-bg-color !default; - $cardview-material-header-panel__item--dragged-text-color: $cardview-material-header-panel__item-text-color !default; - $cardview-material-header-panel__item--dragged__allowance-icon-color: $cardview-material-common-text-color !default; $cardview-material-header-panel__item--dragged__prohibition-icon-color: color.adjust($base-danger, $saturation: -0.27%, $space: hsl, $lightness: -7.45%) !default; - $cardview-material-header-panel__item--dragged-box-shadow-color: rgba(0, 0, 0, 0.2) !default; // Header panel Drop-zone $cardview-material-header-panel__dropzone-bg-color: color.mix(color.adjust($base-accent, $lightness: 19.22%, $space: hsl), $base-bg, 8%) !default; - $cardview-material-header-panel__dropzone-border-color: $base-accent !default; - $cardview-material-header-panel__dropzone-text-color: $base-accent !default; - $cardview-material-header-panel__dropzone__icon-color: $base-accent !default; - - // Filter panel - $cardview-material-filter-panel-bg-color: $cardview-material-common-bg-color !default; - $cardview-material-filter-panel-border-color: $base-border-color !default; - $cardview-material-filter-panel-text-color: $base-accent !default; - $cardview-material-filter-panel__icon-color: $base-accent !default; // Empty view - $cardview-material-nodata-view-bg-color: $cardview-material-common-bg-color !default; - $cardview-material-nodata-view-text-color: $base-label-color !default; - $cardview-material-nodata-view__icon-color: $cardview-material-nodata-view-text-color !default; $cardview-material-nodata-view__icon-bg-color: color.adjust($base-bg, $saturation: -0.3%, $space: hsl, $lightness: 8.04%) !default; // Search highlight $cardview-material-card__content__field-value--highlighted-text-color: $base-inverted-text-color !default; - $cardview-material-card__content__field-value--highlighted-box-shadow-color: rgba(0, 0, 0, 0.25) !default; - - // Column chooser - $cardview-material-columnchooser--empty__message-color: color.adjust($cardview-material-common-text-color, $lightness: 26%, $space: hsl) !default; } +/** +* $name 302. Divider color +* $type color +*/ +$cardview-material-card--selected-divider-color: $cardview-material-card--selected-border-color !default; + +/** +* $name 306. "Empty cover" background color +* $type color +*/ +$cardview-material-card--selected__cover--noimage-bg-color: $cardview-material-card__cover--noimage-bg-color !default; + +/** +* $name 401. Border color +* $type color +*/ +$cardview-material-header-panel__item-border-color: $cardview-material-header-panel__item-bg-color !default; + +/** +* $name 501. Border color +* $type color +*/ +$cardview-material-header-panel__item--hovered-border-color: $cardview-material-header-panel__item--hovered-bg-color !default; + +/** +* $name 600. Background color +* $type color +*/ +$cardview-material-header-panel__item--disabled-bg-color: $cardview-material-header-panel__item-bg-color !default; + +/** +* $name 601. Border color +* $type color +*/ +$cardview-material-header-panel__item--disabled-border-color: $cardview-material-header-panel__item--disabled-bg-color !default; + +/** +* $name 700. Background color +* $type color +*/ +$cardview-material-header-panel__item--dragged-bg-color: $cardview-material-header-panel__item-bg-color !default; + +/** +* $name 701. Border color +* $type color +*/ +$cardview-material-header-panel__item--dragged-border-color: $cardview-material-header-panel__item--dragged-bg-color !default; + $cardview-bg-color: $cardview-material-common-bg-color !default; $cardview-link-color: $cardview-material-common-link-color !default; $cardview-text-color: $cardview-material-common-text-color !default; diff --git a/packages/devextreme-scss/scss/widgets/material/cardView/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/cardView/_sizes.scss index c7ef0ddf524f..47e062f428c6 100644 --- a/packages/devextreme-scss/scss/widgets/material/cardView/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/material/cardView/_sizes.scss @@ -17,14 +17,14 @@ * $name 101. Border radius * $type text */ -$cardview-material-common-border-radius: null !default; +$cardview-material-common-border-radius: 16px !default; /** * $name 104. Text weight * $type select * $type-values 100|200|300|400|500|600|700|800|900 */ -$cardview-material-common-text-weight: null !default; +$cardview-material-common-text-weight: 400 !default; /** * $name 105. Vertical gap between cards @@ -46,9 +46,9 @@ $cardview-material-common-padding: null !default; // #region CARD -$cardview-material-card-min-width: null !default; +$cardview-material-card-min-width: 250px !default; -$cardview-material-card-border-width: null !default; +$cardview-material-card-border-width: 1px !default; /** * $name 202. Border radius @@ -73,7 +73,7 @@ $cardview-material-card__content-line-height: null !default; * $type select * $type-values 100|200|300|400|500|600|700|800|900 */ -$cardview-material-card__field-caption-weight: null !default; +$cardview-material-card__field-caption-weight: 500 !default; $cardview-material-card__cover-max-height: null !default; @@ -85,7 +85,7 @@ $cardview-material-card__content-row-gap: null !default; $cardview-material-card__content__cell-padding-vertical: null !default; -$cardview-material-card__content__cell-padding-horizontal: null !default; +$cardview-material-card__content__cell-padding-horizontal: 12px !default; // #endregion @@ -96,19 +96,19 @@ $cardview-material-card__content__cell-padding-horizontal: null !default; * $type select * $type-values 100|200|300|400|500|600|700|800|900 */ -$cardview-material-card--selected__field-caption-weight: null !default; +$cardview-material-card--selected__field-caption-weight: $cardview-material-card__field-caption-weight !default; // #endregion // #region HEADER -$cardview-material-header-gap: null !default; +$cardview-material-header-gap: 4px !default; // #endregion // #region HEADER PANEL -$cardview-material-header-panel-vertical-margin: null !default; +$cardview-material-header-panel-vertical-margin: 4px !default; $cardview-material-header-panel--empty-line-height: null !default; @@ -116,13 +116,13 @@ $cardview-material-header-panel--empty-line-height: null !default; // #region HEADER PANEL ITEM -$cardview-material-header-panel__item-border-width: null !default; +$cardview-material-header-panel__item-border-width: 1px !default; /** * $name 402. Border radius * $type text */ -$cardview-material-header-panel__item-border-radius: null !default; +$cardview-material-header-panel__item-border-radius: 99px !default; $cardview-material-header-panel__item-padding-vertical: null !default; @@ -135,14 +135,14 @@ $cardview-material-header-panel__item-line-height: null !default; * $type select * $type-values 100|200|300|400|500|600|700|800|900 */ -$cardview-material-header-panel__item-text-weight: null !default; +$cardview-material-header-panel__item-text-weight: $cardview-material-common-text-weight !default; /** * $name 408. Sort index text weight * $type select * $type-values 100|200|300|400|500|600|700|800|900 */ -$cardview-material-header-panel__item__sort-index-text-weight: null !default; +$cardview-material-header-panel__item__sort-index-text-weight: 400 !default; $cardview-material-header-panel__item__icon-size: null !default; @@ -158,14 +158,14 @@ $cardview-material-header-item__right-padding: null !default; * $type select * $type-values 100|200|300|400|500|600|700|800|900 */ -$cardview-material-header-panel__item--hovered-text-weight: null !default; +$cardview-material-header-panel__item--hovered-text-weight: $cardview-material-header-panel__item-text-weight !default; /** * $name 507. Sort index text weight * $type select * $type-values 100|200|300|400|500|600|700|800|900 */ -$cardview-material-header-panel__item--hovered__sort-index-text-weight: null !default; +$cardview-material-header-panel__item--hovered__sort-index-text-weight: $cardview-material-header-panel__item__sort-index-text-weight !default; // #endregion @@ -176,14 +176,14 @@ $cardview-material-header-panel__item--hovered__sort-index-text-weight: null !de * $type select * $type-values 100|200|300|400|500|600|700|800|900 */ -$cardview-material-header-panel__item--disabled-text-weight: null !default; +$cardview-material-header-panel__item--disabled-text-weight: $cardview-material-header-panel__item-text-weight !default; /** * $name 607. Sort index text weight * $type select * $type-values 100|200|300|400|500|600|700|800|900 */ -$cardview-material-header-panel__item--disabled__sort-index-text-weight: null !default; +$cardview-material-header-panel__item--disabled__sort-index-text-weight: $cardview-material-header-panel__item__sort-index-text-weight !default; // #endregion @@ -194,7 +194,7 @@ $cardview-material-header-panel__item--disabled__sort-index-text-weight: null !d * $type select * $type-values 100|200|300|400|500|600|700|800|900 */ -$cardview-material-header-panel__item--dragged-text-weight: null !default; +$cardview-material-header-panel__item--dragged-text-weight: $cardview-material-header-panel__item-text-weight !default; $cardview-material-header-item__sort-indicator__border-size: null; $cardview-material-header-item__sort-indicator__border-radius: null; @@ -207,7 +207,7 @@ $cardview-material-header-panel__dropzone-height: null !default; $cardview-material-header-panel__dropzone-top: null !default; -$cardview-material-header-panel__dropzone-border-width: null !default; +$cardview-material-header-panel__dropzone-border-width: 1.5px !default; /** * $name 801. Border radius @@ -223,7 +223,7 @@ $cardview-material-header-panel__dropzone-border-radius: null !default; * $name 901. Border radius * $type text */ -$cardview-material-filter-panel-border-radius: null !default; +$cardview-material-filter-panel-border-radius: 0 !default; // #endregion @@ -243,16 +243,16 @@ $cardview-material-nodata-view__icon-size: null !default; * $name 1101. Border radius * $type text */ -$cardview-material-card__content__field-value--highlighted-border-radius: null !default; +$cardview-material-card__content__field-value--highlighted-border-radius: 5px !default; -$cardview-material-card__content__field-value--highlighted-border-padding: null !default; +$cardview-material-card__content__field-value--highlighted-border-padding: 0.125em 0.2em !default; /** * $name 1103. Text weight * $type select * $type-values 100|200|300|400|500|600|700|800|900 */ -$cardview-material-card__content__field-value--highlighted-text-weight: null !default; +$cardview-material-card__content__field-value--highlighted-text-weight: 500 !default; // #endregion @@ -267,84 +267,49 @@ $cardview-material-column-chooser__select-all-item-horizontal-padding: null !def @if $size == "default" { // Common - $cardview-material-common-border-radius: 16px !default; - $cardview-material-common-text-weight: 400 !default; $cardview-material-common-cards-row-gap: 16px !default; $cardview-material-common-cards-column-gap: 16px !default; $cardview-material-common-gap: 24px !default; $cardview-material-common-padding: 24px !default; // Card - $cardview-material-card-min-width: 250px !default; - $cardview-material-card-border-width: 1px !default; $cardview-material-card-border-radius: 8px !default; $cardview-material-card__header-height: 52px !default; $cardview-material-card__header-text-size: 16px !default; $cardview-material-card__header__toolbar-override-height: 52px !default; $cardview-material-card__header__selection-checkbox-padding-right: 12px !default; $cardview-material-card__header-toolbar-override-height: 52px !default; - $cardview-material-card__field-caption-weight: 500 !default; $cardview-material-card__cover-max-height: 180px !default; $cardview-material-card__cover--noimage__icon-size: 48px !default; $cardview-material-card__content-padding: 12px !default; $cardview-material-card__content-row-gap: 4px !default; $cardview-material-card__content__cell-padding-vertical: 6px !default; - $cardview-material-card__content__cell-padding-horizontal: 12px !default; - - // Card - selected - $cardview-material-card--selected__field-caption-weight: $cardview-material-card__field-caption-weight !default; - - // Header - $cardview-material-header-gap: 4px !default; // Header panel - $cardview-material-header-panel-vertical-margin: 4px !default; $cardview-material-header-panel--empty-line-height: 36px !default; // Header panel item - default - $cardview-material-header-panel__item-border-width: 1px !default; - $cardview-material-header-panel__item-border-radius: 99px !default; $cardview-material-header-panel__item-padding-horizontal: 16px !default; $cardview-material-header-panel__item-padding-vertical: 7px !default; $cardview-material-header-item__left-padding: 6px !default; $cardview-material-header-item__right-padding: 2px !default; $cardview-material-header-panel__item-line-height: 20px !default; - $cardview-material-header-panel__item-text-weight: $cardview-material-common-text-weight !default; - $cardview-material-header-panel__item__sort-index-text-weight: 400 !default; $cardview-material-header-panel__item__icon-size: 20px !default; - // Header panel item - hovered - $cardview-material-header-panel__item--hovered-text-weight: $cardview-material-header-panel__item-text-weight !default; - $cardview-material-header-panel__item--hovered__sort-index-text-weight: $cardview-material-header-panel__item__sort-index-text-weight !default; - - // Header panel item - disabled - $cardview-material-header-panel__item--disabled-text-weight: $cardview-material-header-panel__item-text-weight !default; - $cardview-material-header-panel__item--disabled__sort-index-text-weight: $cardview-material-header-panel__item__sort-index-text-weight !default; - // Header panel item - dragged - $cardview-material-header-panel__item--dragged-text-weight: $cardview-material-header-panel__item-text-weight !default; $cardview-material-header-item__sort-indicator__border-size: 2px !default; $cardview-material-header-item__sort-indicator__border-radius: 8px !default; // Header panel Drop-zone $cardview-material-header-panel__dropzone-height: 44px !default; $cardview-material-header-panel__dropzone-top: -4px !default; - $cardview-material-header-panel__dropzone-border-width: 1.5px !default; $cardview-material-header-panel__dropzone-border-radius: 8px !default; - // Filter panel - $cardview-material-filter-panel-border-radius: 0 !default; - // Empty view $cardview-material-nodata-view__icon-container-size: 64px !default; $cardview-material-nodata-view__icon-container-margin: 12px !default; $cardview-material-nodata-view__icon-size: 40px !default; - // Search highlight - $cardview-material-card__content__field-value--highlighted-border-radius: 5px !default; - $cardview-material-card__content__field-value--highlighted-border-padding: 0.125em 0.2em !default; - $cardview-material-card__content__field-value--highlighted-text-weight: 500 !default; - // Column chooser $cardview-material-column-chooser--empty__message-horizontal-padding: 24px !default; $cardview-material-column-chooser__select-all-item-horizontal-padding: 19px !default; @@ -353,22 +318,17 @@ $cardview-material-column-chooser__select-all-item-horizontal-padding: null !def @else if $size == "compact" { // Common - $cardview-material-common-border-radius: 16px !default; - $cardview-material-common-text-weight: 400 !default; $cardview-material-common-cards-row-gap: 12px !default; $cardview-material-common-cards-column-gap: 12px !default; $cardview-material-common-gap: 16px !default; $cardview-material-common-padding: 16px !default; // Card - $cardview-material-card-min-width: 250px !default; - $cardview-material-card-border-width: 1px !default; $cardview-material-card-border-radius: 6px !default; $cardview-material-card__header-height: 44px !default; $cardview-material-card__header-text-size: 14px !default; $cardview-material-card__header__selection-checkbox-padding-right: 8px !default; $cardview-material-card__header-toolbar-override-height: 44px !default; - $cardview-material-card__field-caption-weight: 500 !default; $cardview-material-card__cover-max-height: 140px !default; $cardview-material-card__cover--noimage__icon-size: 32px !default; $cardview-material-card__content-padding: 8px !default; @@ -376,62 +336,32 @@ $cardview-material-column-chooser__select-all-item-horizontal-padding: null !def $cardview-material-card__content-font-size: 12px !default; $cardview-material-card__content-line-height: 16px !default; $cardview-material-card__content__cell-padding-vertical: 4px !default; - $cardview-material-card__content__cell-padding-horizontal: 12px !default; - - // Card - selected - $cardview-material-card--selected__field-caption-weight: $cardview-material-card__field-caption-weight !default; - - // Header - $cardview-material-header-gap: 4px !default; // Header panel - $cardview-material-header-panel-vertical-margin: 4px !default; $cardview-material-header-panel--empty-line-height: 32px !default; // Header panel item - default - $cardview-material-header-panel__item-border-width: 1px !default; - $cardview-material-header-panel__item-border-radius: 99px !default; $cardview-material-header-panel__item-padding-horizontal: 12px !default; $cardview-material-header-panel__item-padding-vertical: 5px !default; $cardview-material-header-item__left-padding: 3px !default; $cardview-material-header-item__right-padding: 1px !default; $cardview-material-header-panel__item-line-height: 16px !default; - $cardview-material-header-panel__item-text-weight: $cardview-material-common-text-weight !default; - $cardview-material-header-panel__item__sort-index-text-weight: 400 !default; $cardview-material-header-panel__item__icon-size: 16px !default; - // Header panel item - hovered - $cardview-material-header-panel__item--hovered-text-weight: $cardview-material-header-panel__item-text-weight !default; - $cardview-material-header-panel__item--hovered__sort-index-text-weight: $cardview-material-header-panel__item__sort-index-text-weight !default; - - // Header panel item - disabled - $cardview-material-header-panel__item--disabled-text-weight: $cardview-material-header-panel__item-text-weight !default; - $cardview-material-header-panel__item--disabled__sort-index-text-weight: $cardview-material-header-panel__item__sort-index-text-weight !default; - // Header panel item - dragged - $cardview-material-header-panel__item--dragged-text-weight: $cardview-material-header-panel__item-text-weight !default; $cardview-material-header-item__sort-indicator__border-size: 1px !default; $cardview-material-header-item__sort-indicator__border-radius: 4px !default; // Header panel Drop-zone $cardview-material-header-panel__dropzone-height: 38px !default; $cardview-material-header-panel__dropzone-top: -3px !default; - $cardview-material-header-panel__dropzone-border-width: 1.5px !default; $cardview-material-header-panel__dropzone-border-radius: 6px !default; - // Filter panel - $cardview-material-filter-panel-border-radius: 0 !default; - // Empty view $cardview-material-nodata-view__icon-container-size: 48px !default; $cardview-material-nodata-view__icon-container-margin: 8px !default; $cardview-material-nodata-view__icon-size: 32px !default; - // Search highlight - $cardview-material-card__content__field-value--highlighted-border-radius: 5px !default; - $cardview-material-card__content__field-value--highlighted-border-padding: 0.125em 0.2em !default; - $cardview-material-card__content__field-value--highlighted-text-weight: 500 !default; - // Column chooser $cardview-material-column-chooser--empty__message-horizontal-padding: 16px !default; $cardview-material-column-chooser__select-all-item-horizontal-padding: 17px !default; diff --git a/packages/devextreme-scss/scss/widgets/material/chat/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/chat/_sizes.scss index eee7e7d54d74..8bb57067f07c 100644 --- a/packages/devextreme-scss/scss/widgets/material/chat/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/material/chat/_sizes.scss @@ -56,7 +56,6 @@ $chat-messagelist-day-header-first-padding-top: 20px !default; $chat-messagelist-day-header-font-size: 12px !default; $chat-typingindicator-template: $chat-messagegroup-alignment-start-template !default; -$chat-typingindicator-padding: null !default; $chat-typingindicator-row-gap: $chat-messagegroup-gap !default; $chat-typingindicator-font-size: $chat-information-font-size !default; $chat-typingindicator-bubble-padding-block: null !default; @@ -115,7 +114,6 @@ $chat-bubble-gap: 8px !default; $chat-typingindicator-circle-size-center: math.div(12, 14) * 1em !default; $chat-typingindicator-bubble-padding-block: 11px !default; $chat-typingindicator-bubble-padding-inline: 20px !default; - $chat-typingindicator-padding: $chat-messagegroup-padding !default; $chat-confirmation-popup-content-padding: 16px !default; $chat-confirmation-popup-toolbar-padding-block: 0 16px !default; @@ -156,7 +154,6 @@ $chat-bubble-gap: 8px !default; $chat-typingindicator-circle-size-center: math.div(12, 13) * 1em !default; $chat-typingindicator-bubble-padding-block: 8px !default; $chat-typingindicator-bubble-padding-inline: 12px !default; - $chat-typingindicator-padding: $chat-messagegroup-padding !default; $chat-confirmation-popup-content-padding: 8px !default; $chat-confirmation-popup-toolbar-padding-block: 0 8px !default; @@ -165,3 +162,5 @@ $chat-bubble-gap: 8px !default; $chat-file-icon-font-size: 16px !default; } + +$chat-typingindicator-padding: $chat-messagegroup-padding !default; diff --git a/packages/devextreme-scss/scss/widgets/material/gridBase/_colors.scss b/packages/devextreme-scss/scss/widgets/material/gridBase/_colors.scss index 3c3662d4e159..03502c0e2645 100644 --- a/packages/devextreme-scss/scss/widgets/material/gridBase/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/gridBase/_colors.scss @@ -35,7 +35,6 @@ $datagrid-drag-header-border-color: color.change($base-accent, $alpha: 0.5) !def $datagrid-drag-header-shadow-color: null !default; $datagrid-drag-header-second-shadow-color: null !default; $datagrid-header-drag-bg: $datagrid-base-background-color !default; -$header-filter-color: null !default; /** * $name 51. Selected row background color @@ -82,7 +81,6 @@ $datagrid-menu-icon-color: inherit !default; $datagrid-cell-modified-border-color: null !default; $datagrid-cell-removed-border-color: $datagrid-border-color !default; $datagrid-row-removed-bg: $datagrid-border-color !default; -$datagrid-cell-removed-text-color: null !default; /** * $name 45. Invalid data faded color @@ -175,12 +173,10 @@ $datagrid-icon-link-disabled-opacity: $button-disabled-icon-opacity; $datagrid-block-separator-bg: color.adjust($datagrid-base-background-color, $lightness: -12%, $space: hsl) !default; $datagrid-drag-header-shadow-color: color.change($base-shadow-color, $alpha: 0.1) !default; $datagrid-drag-header-second-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default; - $header-filter-color: $datagrid-columnchooser-item-color !default; $datagrid-columnchooser-item-bg: $datagrid-columnchooser-bg !default; $datagrid-row-alternation-bg: color.adjust($datagrid-base-background-color, $lightness: -4%, $space: hsl) !default; $datagrid-hover-bg: color.adjust($datagrid-base-background-color, $lightness: -4%, $space: hsl) !default; $datagrid-text-stub-background-image-path: data-uri("images/widgets/material/color-schemes/light/grid/text-stub.png") !default; - $datagrid-cell-removed-text-color: $datagrid-columnchooser-item-color !default; $datagrid-row-invalid-faded-border-color: color.adjust($base-danger, $lightness: 44%, $space: hsl) !default; } @@ -190,15 +186,16 @@ $datagrid-icon-link-disabled-opacity: $button-disabled-icon-opacity; $datagrid-block-separator-bg: color.adjust($datagrid-base-background-color, $lightness: 12%, $space: hsl) !default; $datagrid-drag-header-shadow-color: color.change($base-shadow-color, $alpha: 0.3) !default; $datagrid-drag-header-second-shadow-color: color.change($base-shadow-color, $alpha: 0.4) !default; - $header-filter-color: $datagrid-columnchooser-item-color !default; $datagrid-columnchooser-item-bg: color.adjust($datagrid-columnchooser-bg, $lightness: 3%, $space: hsl) !default; $datagrid-row-alternation-bg: color.adjust($datagrid-base-background-color, $lightness: 4%, $space: hsl) !default; $datagrid-hover-bg: color.adjust($datagrid-base-background-color, $lightness: 4%, $space: hsl) !default; $datagrid-text-stub-background-image-path: data-uri("images/widgets/material/color-schemes/dark/grid/text-stub.png") !default; - $datagrid-cell-removed-text-color: $datagrid-columnchooser-item-color !default; $datagrid-row-invalid-faded-border-color: color.adjust($base-danger, $lightness: -31%, $space: hsl) !default; } +$header-filter-color: $datagrid-columnchooser-item-color !default; +$datagrid-cell-removed-text-color: $datagrid-columnchooser-item-color !default; + $header-filter-color-empty: $header-filter-color !default; :root { diff --git a/packages/devextreme-scss/scss/widgets/material/gridBase/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/gridBase/_sizes.scss index 0ea533d4e9aa..ba6bdaed40e5 100644 --- a/packages/devextreme-scss/scss/widgets/material/gridBase/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/material/gridBase/_sizes.scss @@ -15,7 +15,7 @@ $material-grid-base-grouppanel-item-margin: null !default; $material-grid-base-command-edit-column-width: null !default; $material-grid-base-command-edit-column-with-icons-width: null !default; $material-grid-base-adaptive-column-height: null !default; -$material-grid-base-treeview-search-margin: null !default; +$material-grid-base-treeview-search-margin: 10px !default; $material-grid-base-nodata-font-size: null !default; $material-command-edit-icon-size: null !default; $material-filter-row-between-editor-padding: null !default; @@ -51,7 +51,6 @@ $material-grid-base-ai-prompt-editor-progressbar-height: 4px !default; $material-grid-base-command-edit-column-width: 115px !default; $material-grid-base-command-edit-column-with-icons-width: 93px !default; $material-grid-base-adaptive-column-height: 40px !default; - $material-grid-base-treeview-search-margin: 10px !default; $material-grid-base-nodata-font-size: 17px !default; $material-command-edit-icon-size: 18px !default; @@ -83,7 +82,6 @@ $material-grid-base-ai-prompt-editor-progressbar-height: 4px !default; $material-grid-base-command-edit-column-width: 105px !default; $material-grid-base-command-edit-column-with-icons-width: 80px !default; $material-grid-base-adaptive-column-height: 26px !default; - $material-grid-base-treeview-search-margin: 10px !default; $material-grid-base-nodata-font-size: 14px !default; $material-command-edit-icon-size: 16px !default; diff --git a/packages/devextreme-scss/scss/widgets/material/htmlEditor/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/htmlEditor/_sizes.scss index 03c12ee590fa..adbf5ec48cd4 100644 --- a/packages/devextreme-scss/scss/widgets/material/htmlEditor/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/material/htmlEditor/_sizes.scss @@ -4,7 +4,7 @@ $material-toolbar-size-editor-width: null !default; $material-htmleditor-toolbar-padding: null !default; $material-html-editor-add-image-dialog-fileuploader-padding: null !default; -$material-aidialog-selects-gap: null !default; +$material-aidialog-selects-gap: 8px !default; $material-aidialog-content-gap: null !default; $material-aidialog-content-padding: null !default; $material-aidialog-toolbar-padding: null !default; @@ -14,7 +14,6 @@ $material-aidialog-border-radius: $base-border-radius * 2 !default; $material-toolbar-size-editor-width: 120px !default; $material-htmleditor-toolbar-padding: 16px !default; $material-html-editor-add-image-dialog-fileuploader-padding: 50px 40px !default; - $material-aidialog-selects-gap: 8px !default; $material-aidialog-content-gap: 24px !default; $material-aidialog-content-padding: 24px !default; $material-aidialog-toolbar-padding: 0 24px 16px !default; @@ -24,7 +23,6 @@ $material-aidialog-border-radius: $base-border-radius * 2 !default; $material-toolbar-size-editor-width: 90px !default; $material-htmleditor-toolbar-padding: 11px !default; $material-html-editor-add-image-dialog-fileuploader-padding: 40px 30px !default; - $material-aidialog-selects-gap: 8px !default; $material-aidialog-content-gap: 16px !default; $material-aidialog-content-padding: 16px !default; $material-aidialog-toolbar-padding: 0 16px 8px !default; diff --git a/packages/devextreme-scss/scss/widgets/material/scheduler/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/scheduler/_sizes.scss index 26815ff6d53b..b28f29e19c37 100644 --- a/packages/devextreme-scss/scss/widgets/material/scheduler/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/material/scheduler/_sizes.scss @@ -16,29 +16,29 @@ $material-scheduler-dropdown-button-height: null !default; $material-scheduler-dropdown-button-padding: null !default; $material-scheduler-dropdown-button-margin: null !default; $material-scheduler-dropdown-button-vertical-margin: null !default; -$material-scheduler-dropdown-button-adaptive-margin: null !default; -$material-scheduler-dropdown-button-adaptive-vertical-margin: null !default; +$material-scheduler-dropdown-button-adaptive-margin: 0 2px !default; +$material-scheduler-dropdown-button-adaptive-vertical-margin: 0 2px 0 1px !default; $material-scheduler-appointment-tooltip-content-margin-left: null !default; $material-tooltip-marker-dimension: null !default; $material-scheduler-appointment-tooltip-title-margin-top: null !default; $material-scheduler-appointment-tooltip-remove-padding-top: null !default; -$material-scheduler-appointment-short-content-padding: null !default; -$material-scheduler-appointment-15min-height: null !default; -$material-scheduler-appointment-20min-height: null !default; -$material-scheduler-appointment-25min-height: null !default; -$material-scheduler-appointment-10min-recurrence-padding-right: null !default; -$material-scheduler-appointment-10min-title-font-size: null !default; -$material-scheduler-appointment-10min-title-line-height: null !default; -$material-scheduler-appointment-10min-icon-font-size: null !default; -$material-scheduler-appointment-10min-icon-right: null !default; +$material-scheduler-appointment-short-content-padding: 0 7px !default; +$material-scheduler-appointment-15min-height: 17px !default; +$material-scheduler-appointment-20min-height: 24px !default; +$material-scheduler-appointment-25min-height: 32px !default; +$material-scheduler-appointment-10min-recurrence-padding-right: 14px !default; +$material-scheduler-appointment-10min-title-font-size: 8px !default; +$material-scheduler-appointment-10min-title-line-height: 12px !default; +$material-scheduler-appointment-10min-icon-font-size: 12px !default; +$material-scheduler-appointment-10min-icon-right: 2px !default; $material-scheduler-appointment-15min-recurrence-padding-right: null !default; -$material-scheduler-appointment-15min-title-font-size: null !default; +$material-scheduler-appointment-15min-title-font-size: 12px !default; $material-scheduler-appointment-15min-title-line-height: null !default; $material-scheduler-appointment-15min-icon-font-size: null !default; -$material-scheduler-appointment-15min-icon-right: null !default; -$material-scheduler-appointment-20min-recurrence-padding-right: null !default; -$material-scheduler-appointment-20min-icon-right: null !default; +$material-scheduler-appointment-15min-icon-right: 2px !default; +$material-scheduler-appointment-20min-recurrence-padding-right: 25px !default; +$material-scheduler-appointment-20min-icon-right: 4px !default; $scheduler-left-column-width: 65px !default; $material-scheduler-timeline-date-table-cell-height: 50px !default; @@ -97,8 +97,6 @@ $scheduler-timeline-cell-height: 50px !default; $material-scheduler-dropdown-button-padding: 4px !default; $material-scheduler-dropdown-button-margin: 5px 1px 3px 3px !default; $material-scheduler-dropdown-button-vertical-margin: 5px 2px 3px 1px !default; - $material-scheduler-dropdown-button-adaptive-margin: 0 2px !default; - $material-scheduler-dropdown-button-adaptive-vertical-margin: 0 2px 0 1px !default; $material-scheduler-appointment-tooltip-content-margin-left: 10px !default; $material-tooltip-marker-dimension: 24px !default; @@ -122,25 +120,9 @@ $scheduler-timeline-cell-height: 50px !default; $agenda-appointment-title-font-size: 14px; - $material-scheduler-appointment-short-content-padding: 0 7px !default; - $material-scheduler-appointment-15min-height: 17px !default; - $material-scheduler-appointment-20min-height: 24px !default; - $material-scheduler-appointment-25min-height: 32px !default; - - $material-scheduler-appointment-10min-recurrence-padding-right: 14px !default; - $material-scheduler-appointment-10min-title-font-size: 8px !default; - $material-scheduler-appointment-10min-title-line-height: 12px !default; - $material-scheduler-appointment-10min-icon-font-size: 12px !default; - $material-scheduler-appointment-10min-icon-right: 2px !default; - $material-scheduler-appointment-15min-recurrence-padding-right: 18px !default; - $material-scheduler-appointment-15min-title-font-size: 12px !default; $material-scheduler-appointment-15min-title-line-height: 18px !default; $material-scheduler-appointment-15min-icon-font-size: 16px !default; - $material-scheduler-appointment-15min-icon-right: 2px !default; - - $material-scheduler-appointment-20min-recurrence-padding-right: 25px !default; - $material-scheduler-appointment-20min-icon-right: 4px !default; } @else if $size == "compact" { @@ -163,8 +145,6 @@ $scheduler-timeline-cell-height: 50px !default; $material-scheduler-dropdown-button-padding: 2px !default; $material-scheduler-dropdown-button-margin: 2px 1px 2px 2px !default; $material-scheduler-dropdown-button-vertical-margin: 2px 1px 2px 1px !default; - $material-scheduler-dropdown-button-adaptive-margin: 0 2px !default; - $material-scheduler-dropdown-button-adaptive-vertical-margin: 0 2px 0 1px !default; $material-scheduler-appointment-tooltip-content-margin-left: 8px !default; $material-tooltip-marker-dimension: 18px !default; @@ -188,23 +168,7 @@ $scheduler-timeline-cell-height: 50px !default; $agenda-appointment-title-font-size: 13px; - $material-scheduler-appointment-short-content-padding: 0 7px !default; - $material-scheduler-appointment-15min-height: 17px !default; - $material-scheduler-appointment-20min-height: 24px !default; - $material-scheduler-appointment-25min-height: 32px !default; - - $material-scheduler-appointment-10min-recurrence-padding-right: 14px !default; - $material-scheduler-appointment-10min-title-font-size: 8px !default; - $material-scheduler-appointment-10min-title-line-height: 12px !default; - $material-scheduler-appointment-10min-icon-font-size: 12px !default; - $material-scheduler-appointment-10min-icon-right: 2px !default; - $material-scheduler-appointment-15min-recurrence-padding-right: 14px !default; - $material-scheduler-appointment-15min-title-font-size: 12px !default; $material-scheduler-appointment-15min-title-line-height: 12px !default; $material-scheduler-appointment-15min-icon-font-size: 12px !default; - $material-scheduler-appointment-15min-icon-right: 2px !default; - - $material-scheduler-appointment-20min-recurrence-padding-right: 25px !default; - $material-scheduler-appointment-20min-icon-right: 4px !default; } diff --git a/packages/devextreme-scss/scss/widgets/material/switch/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/switch/_sizes.scss index edc230fb821e..5688f2501bf0 100644 --- a/packages/devextreme-scss/scss/widgets/material/switch/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/material/switch/_sizes.scss @@ -3,28 +3,25 @@ $material-switch-width: null !default; $switch-padding: 10px !default; $switch-container-vertical-margin: null !default; -$switch-container-horizontal-padding: null !default; $material-switch-height: null !default; -$switch-handle-height: null !default; $switch-container-height: 14px !default; $switch-handle-margin: 0 !default; $material-switch-shadow-blur-radius: 10px !default; $material-switch-handle-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2) !default; $material-switch-container-adjustment: 6px !default; +$switch-container-horizontal-padding: $switch-handle-margin !default; @if $size == "default" { $material-switch-width: 36px !default; $switch-container-vertical-margin: 3px !default; - $switch-container-horizontal-padding: $switch-handle-margin !default; $material-switch-height: 20px !default; - $switch-handle-height: $material-switch-height !default; } @else if $size == "compact" { $material-switch-width: 32px !default; $switch-container-vertical-margin: 2px !default; - $switch-container-horizontal-padding: $switch-handle-margin !default; $material-switch-height: 18px !default; - $switch-handle-height: $material-switch-height !default; } + +$switch-handle-height: $material-switch-height !default; diff --git a/packages/devextreme-scss/scss/widgets/material/tabs/variables/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/tabs/variables/_sizes.scss index 97c92422d3a9..c50cef3909cf 100644 --- a/packages/devextreme-scss/scss/widgets/material/tabs/variables/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/material/tabs/variables/_sizes.scss @@ -1,21 +1,20 @@ @use "../../sizes" as *; $material-tabs-item-gap: 4px !default; -$material-tabs-item-padding: null !default; $material-tabs-item-padding-horizontal: null !default; $material-tabs-item-padding-vertical: null !default; -$material-tab-height: null !default; +$material-tab-height: auto !default; $material-tab-min-width: null !default; $material-tab-text-line-height: 1.714286 !default; $material-base-icon-margin: null !default; -$material-tab-nav-button-icon-width: null !default; -$material-tab-nav-button-icon-height: null !default; -$material-tab-nav-button-icon-font-size: null !default; -$material-tab-nav-button-content-padding: null !default; +$material-tab-nav-button-icon-width: 24px !default; +$material-tab-nav-button-icon-height: 24px !default; +$material-tab-nav-button-icon-font-size: 24px !default; +$material-tab-nav-button-content-padding: 0 4px !default; -$material-tab-vertical-nav-button-content-padding: null !default; +$material-tab-vertical-nav-button-content-padding: 4px 0 !default; $material-indicator-thickness-primary: 2px !default; $material-indicator-thickness-secondary: 3px !default; @@ -30,27 +29,15 @@ $material-tabs-icon-size: $material-base-icon-size !default; @if $size == "default" { $material-tabs-item-padding-horizontal: 12px !default; $material-tabs-item-padding-vertical: 16px !default; - $material-tabs-item-padding: $material-tabs-item-padding-horizontal $material-tabs-item-padding-vertical !default; - $material-tab-height: auto !default; $material-tab-min-width: 90px !default; $material-base-icon-margin: 8px !default; - $material-tab-nav-button-icon-width: 24px !default; - $material-tab-nav-button-icon-height: 24px !default; - $material-tab-nav-button-icon-font-size: 24px !default; - $material-tab-nav-button-content-padding: 0 4px !default; - $material-tab-vertical-nav-button-content-padding: 4px 0 !default; } @else if $size == "compact" { $material-tabs-item-padding-horizontal: 6px !default; $material-tabs-item-padding-vertical: 12px !default; - $material-tabs-item-padding: $material-tabs-item-padding-horizontal $material-tabs-item-padding-vertical !default; - $material-tab-height: auto !default; $material-tab-min-width: 82px !default; $material-base-icon-margin: 7px !default; - $material-tab-nav-button-icon-width: 24px !default; - $material-tab-nav-button-icon-height: 24px !default; - $material-tab-nav-button-icon-font-size: 24px !default; - $material-tab-nav-button-content-padding: 0 4px !default; - $material-tab-vertical-nav-button-content-padding: 4px 0 !default; } + +$material-tabs-item-padding: $material-tabs-item-padding-horizontal $material-tabs-item-padding-vertical !default; diff --git a/packages/devextreme-scss/scss/widgets/material/tagBox/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/tagBox/_sizes.scss index af20f502f158..f2fb1d93318c 100644 --- a/packages/devextreme-scss/scss/widgets/material/tagBox/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/material/tagBox/_sizes.scss @@ -15,7 +15,7 @@ $material-tagbox-select-all-padding-bottom: 12px !default; $material-tagbox-select-all-margin-bottom: 3px !default; $tagbox-tag-border-radius: 2em !default; $material-tagbox-filled-with-label-top-padding: null !default; -$material-tagbox-filled-with-label-bottom-padding: null !default; +$material-tagbox-filled-with-label-bottom-padding: 4px !default; @if $size == "default" { $material-tagbox-tag-content-padding-left: 8px !default; @@ -29,7 +29,6 @@ $material-tagbox-filled-with-label-bottom-padding: null !default; $material-tagbox-remove-button-width: 26px !default; $material-tagbox-remove-button-icon-size: 16px !default; $material-tagbox-filled-with-label-top-padding: 18px !default; - $material-tagbox-filled-with-label-bottom-padding: 4px !default; } @else if $size == "compact" { @@ -44,5 +43,4 @@ $material-tagbox-filled-with-label-bottom-padding: null !default; $material-tagbox-remove-button-width: 18px !default; $material-tagbox-remove-button-icon-size: 12px !default; $material-tagbox-filled-with-label-top-padding: 10px !default; - $material-tagbox-filled-with-label-bottom-padding: 4px !default; } diff --git a/packages/devextreme-scss/scss/widgets/material/treeView/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/treeView/_sizes.scss index a9a01c5e3df1..9c6fa56cc475 100644 --- a/packages/devextreme-scss/scss/widgets/material/treeView/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/material/treeView/_sizes.scss @@ -8,7 +8,7 @@ $material-treeview-item-height: null !default; $material-checkbox-container-size: null !default; $material-treeview-load-indicator-size: null !default; -$material-treeview-item-element-gap: null !default; +$material-treeview-item-element-gap: 12px !default; $material-treeview-searchbox-margin-bottom: null !default; $material-treeview-search-editor-height: null !default; @@ -23,7 +23,6 @@ $material-treeview-container-padding: $material-treeview-container-with-border-offset; @if $size == "default" { - $material-treeview-item-element-gap: 12px !default; $material-treeview-toggle-item-width: 24px !default; $material-treeview-checkbox-offset: 55px !default; $material-select-all-item-padding: 15px $material-treeview-checkbox-offset !default; @@ -36,7 +35,6 @@ $material-treeview-container-padding: } @else if $size == "compact" { - $material-treeview-item-element-gap: 12px !default; $material-treeview-toggle-item-width: 18px !default; $material-treeview-checkbox-offset: 47px !default; $material-select-all-item-padding: 10px $material-treeview-checkbox-offset !default; diff --git a/packages/devextreme-scss/scss/widgets/material/typography/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/typography/_sizes.scss index c9ab6f8f1224..8cf4574b658d 100644 --- a/packages/devextreme-scss/scss/widgets/material/typography/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/material/typography/_sizes.scss @@ -4,7 +4,7 @@ $material-xl-font-size: null !default; $material-l-font-size: null !default; $material-m-font-size: null !default; $material-s-font-size: null !default; -$material-xs-font-size: null !default; +$material-xs-font-size: 12px !default; $material-h1-font-size: null !default; $material-h2-font-size: null !default; $material-h3-font-size: null !default; @@ -17,7 +17,6 @@ $material-h6-font-size: null !default; $material-l-font-size: 28px !default; $material-m-font-size: 20px !default; $material-s-font-size: 18px !default; - $material-xs-font-size: 12px !default; $material-h1-font-size: 96px !default; $material-h2-font-size: 60px !default; @@ -32,7 +31,6 @@ $material-h6-font-size: null !default; $material-l-font-size: 20px !default; $material-m-font-size: 16px !default; $material-s-font-size: 14px !default; - $material-xs-font-size: 12px !default; $material-h1-font-size: 64px !default; $material-h2-font-size: 42px !default; From 1e592b383dca94a1f48386aaf1eb071ce0e0af6b Mon Sep 17 00:00:00 2001 From: EugeniyKiyashko Date: Fri, 4 Sep 2026 02:20:07 +0400 Subject: [PATCH 3/8] Styles: add the dx/module-variable-default stylelint rule requiring !default on module variables --- packages/devextreme-scss/.stylelintrc.json | 4 +- .../tests/module-variable-default.test.ts | 90 +++++++++++++++++++ .../no-identical-branch-declarations.test.ts | 41 +-------- .../devextreme-scss/tests/stylelint-rule.ts | 49 ++++++++++ .../stylelint/module-variable-default.mjs | 55 ++++++++++++ 5 files changed, 199 insertions(+), 40 deletions(-) create mode 100644 packages/devextreme-scss/tests/module-variable-default.test.ts create mode 100644 packages/devextreme-scss/tests/stylelint-rule.ts create mode 100644 packages/devextreme-scss/tools/stylelint/module-variable-default.mjs diff --git a/packages/devextreme-scss/.stylelintrc.json b/packages/devextreme-scss/.stylelintrc.json index de03a5282ffa..52bbdc7712f3 100644 --- a/packages/devextreme-scss/.stylelintrc.json +++ b/packages/devextreme-scss/.stylelintrc.json @@ -2,7 +2,8 @@ "plugins": [ "stylelint-scss", "@stylistic/stylelint-plugin", - "./tools/stylelint/no-identical-branch-declarations.mjs" + "./tools/stylelint/no-identical-branch-declarations.mjs", + "./tools/stylelint/module-variable-default.mjs" ], "extends": "stylelint-config-standard-scss", "ignoreFiles": "!**/*.{css,scss}", @@ -19,6 +20,7 @@ "@stylistic/declaration-colon-space-after": "always-single-line", "@stylistic/declaration-colon-space-before": "never", "declaration-no-important": true, + "dx/module-variable-default": true, "dx/no-identical-branch-declarations": true, "font-family-name-quotes": "always-unless-keyword", "@stylistic/function-comma-space-after": "always-single-line", diff --git a/packages/devextreme-scss/tests/module-variable-default.test.ts b/packages/devextreme-scss/tests/module-variable-default.test.ts new file mode 100644 index 000000000000..92edb88505f2 --- /dev/null +++ b/packages/devextreme-scss/tests/module-variable-default.test.ts @@ -0,0 +1,90 @@ +import { createRunner, scss } from './stylelint-rule'; + +const ruleName = 'dx/module-variable-default'; +const { lint, fix } = createRunner('module-variable-default.mjs', ruleName); + +test('a module-level variable without the flag is reported, at the top level and inside @if branches', () => { + const { warnings } = lint('missing.scss', scss( + '$top: 7px;', + '$flagged: 8px !default;', + '$global: 9px !global;', + '', + '@if $size == "default" {', + ' $branch: 1px;', + '}', + '', + '@else {', + ' $branch: 2px;', + '}', + )); + + expect(warnings).toEqual([ + { line: 1, rule: ruleName, text: `Expected the !default flag on "$top": without it a value passed through @use … with() is ignored (${ruleName})` }, + { line: 6, rule: ruleName, text: `Expected the !default flag on "$branch": without it a value passed through @use … with() is ignored (${ruleName})` }, + { line: 10, rule: ruleName, text: `Expected the !default flag on "$branch": without it a value passed through @use … with() is ignored (${ruleName})` }, + ]); +}); + +test('variables local to a mixin, function or rule are not module variables', () => { + const { warnings } = lint('local.scss', scss( + '@mixin size($base) {', + ' $double: $base * 2;', + ' width: $double;', + '}', + '', + '@function half($value) {', + ' $result: $value / 2;', + ' @return $result;', + '}', + '', + '.dx-widget {', + ' $gap: 4px;', + ' margin: $gap;', + '', + ' @if $size == "compact" {', + ' $gap: 2px;', + ' }', + '}', + )); + + expect(warnings).toEqual([]); +}); + +test('reassigning a variable that already holds a value is not a default', () => { + const { warnings } = lint('reassign.scss', scss( + '$offset: 4px !default;', + '$offset: $offset + 1px;', + '', + '$late: null !default;', + '$late: 2px;', + )); + + expect(warnings.map((warning) => warning.line)).toEqual([5]); +}); + +test('--fix appends the flag, also to a multi-line value', () => { + const { warnings, output } = fix('fix.scss', scss( + '$top: 7px;', + '$map: (', + ' "a": 1,', + ' "b": 2,', + ');', + '', + '@if $size == "default" {', + ' $branch: 1px;', + '}', + )); + + expect(warnings).toEqual([]); + expect(output).toBe(scss( + '$top: 7px !default;', + '$map: (', + ' "a": 1,', + ' "b": 2,', + ') !default;', + '', + '@if $size == "default" {', + ' $branch: 1px !default;', + '}', + )); +}); diff --git a/packages/devextreme-scss/tests/no-identical-branch-declarations.test.ts b/packages/devextreme-scss/tests/no-identical-branch-declarations.test.ts index cdd790ef96e2..acd51056e901 100644 --- a/packages/devextreme-scss/tests/no-identical-branch-declarations.test.ts +++ b/packages/devextreme-scss/tests/no-identical-branch-declarations.test.ts @@ -1,44 +1,7 @@ -import { execFileSync } from 'child_process'; -import { mkdtempSync, readFileSync, writeFileSync } from 'fs'; -import { tmpdir } from 'os'; -import { join } from 'path'; +import { createRunner, scss } from './stylelint-rule'; -const packageRoot = process.cwd(); const ruleName = 'dx/no-identical-branch-declarations'; -const stylelintBin = join(packageRoot, 'node_modules', '.bin', 'stylelint'); - -const fixture = mkdtempSync(join(tmpdir(), 'no-identical-branch-declarations-')); -const configPath = join(fixture, 'config.json'); -writeFileSync(configPath, JSON.stringify({ - customSyntax: require.resolve('postcss-scss', { paths: [require.resolve('stylelint-scss')] }), - plugins: [join(packageRoot, 'tools', 'stylelint', 'no-identical-branch-declarations.mjs')], - rules: { [ruleName]: true }, -})); - -type Warning = { line: number; rule: string; text: string }; -type Result = { warnings: Warning[]; output: string }; - -const lint = (name: string, source: string, fix = false): Result => { - const file = join(fixture, name); - const reportFile = join(fixture, `${name}.report.json`); - writeFileSync(file, source); - writeFileSync(reportFile, ''); - const args = [file, '--config', configPath, '--formatter', 'json', '--output-file', reportFile, ...(fix ? ['--fix'] : [])]; - try { - execFileSync(stylelintBin, args, { stdio: 'ignore' }); - } catch (error) { - if ((error as { status?: number }).status !== 2) throw error; - } - const [{ warnings }] = JSON.parse(readFileSync(reportFile, 'utf8') || '[{"warnings":[]}]'); - return { - warnings: warnings.map(({ line, rule, text }: Warning) => ({ line, rule, text })), - output: readFileSync(file, 'utf8'), - }; -}; - -const fix = (name: string, source: string): Result => lint(name, source, true); - -const scss = (...rows: string[]): string => `${rows.join('\n')}\n`; +const { lint, fix } = createRunner('no-identical-branch-declarations.mjs', ruleName); test('a variable set to one value in every @else branch is reported once, on the first branch', () => { const { warnings } = lint('else-chain.scss', scss( diff --git a/packages/devextreme-scss/tests/stylelint-rule.ts b/packages/devextreme-scss/tests/stylelint-rule.ts new file mode 100644 index 000000000000..c8e8d5bafbf7 --- /dev/null +++ b/packages/devextreme-scss/tests/stylelint-rule.ts @@ -0,0 +1,49 @@ +import { execFileSync } from 'child_process'; +import { mkdtempSync, readFileSync, writeFileSync } from 'fs'; +import { tmpdir } from 'os'; +import { basename, join } from 'path'; + +export type Warning = { line: number; rule: string; text: string }; +export type Result = { warnings: Warning[]; output: string }; +export type Runner = { + lint: (name: string, source: string) => Result; + fix: (name: string, source: string) => Result; +}; + +const packageRoot = process.cwd(); +const stylelintBin = join(packageRoot, 'node_modules', '.bin', 'stylelint'); + +export const scss = (...rows: string[]): string => `${rows.join('\n')}\n`; + +export const createRunner = (pluginFile: string, ruleName: string): Runner => { + const fixture = mkdtempSync(join(tmpdir(), `${basename(pluginFile, '.mjs')}-`)); + const configPath = join(fixture, 'config.json'); + writeFileSync(configPath, JSON.stringify({ + customSyntax: require.resolve('postcss-scss', { paths: [require.resolve('stylelint-scss')] }), + plugins: [join(packageRoot, 'tools', 'stylelint', pluginFile)], + rules: { [ruleName]: true }, + })); + + const run = (name: string, source: string, fix: boolean): Result => { + const file = join(fixture, name); + const reportFile = join(fixture, `${name}.report.json`); + writeFileSync(file, source); + writeFileSync(reportFile, ''); + const args = [file, '--config', configPath, '--formatter', 'json', '--output-file', reportFile, ...(fix ? ['--fix'] : [])]; + try { + execFileSync(stylelintBin, args, { stdio: 'ignore' }); + } catch (error) { + if ((error as { status?: number }).status !== 2) throw error; + } + const [{ warnings }] = JSON.parse(readFileSync(reportFile, 'utf8') || '[{"warnings":[]}]'); + return { + warnings: warnings.map(({ line, rule, text }: Warning) => ({ line, rule, text })), + output: readFileSync(file, 'utf8'), + }; + }; + + return { + lint: (name, source) => run(name, source, false), + fix: (name, source) => run(name, source, true), + }; +}; diff --git a/packages/devextreme-scss/tools/stylelint/module-variable-default.mjs b/packages/devextreme-scss/tools/stylelint/module-variable-default.mjs new file mode 100644 index 000000000000..1bf97bfbf8ce --- /dev/null +++ b/packages/devextreme-scss/tools/stylelint/module-variable-default.mjs @@ -0,0 +1,55 @@ +import stylelint from 'stylelint'; + +const { + createPlugin, + utils: { report, ruleMessages, validateOptions }, +} = stylelint; + +const ruleName = 'dx/module-variable-default'; + +const messages = ruleMessages(ruleName, { + expected: (name) => `Expected the !default flag on "${name}": without it a value passed through @use … with() is ignored`, +}); + +const meta = { fixable: true }; + +const isConditional = (node) => node.type === 'atrule' && ['if', 'else'].includes(node.name); +const isModuleLevel = (decl) => { + let node = decl.parent; + while (isConditional(node)) node = node.parent; + return node.type === 'root'; +}; +const hasFlag = (decl, flag) => new RegExp(`!${flag}\\b`, 'i').test(decl.value); +const isNull = (decl) => /^null(\s+!default)?$/.test(decl.value.trim()); + +const ruleFunction = (primary) => (root, result) => { + if (!validateOptions(result, ruleName, { actual: primary, possible: [true] })) return; + + const assigned = new Set(); + + root.walkDecls((decl) => { + if (!decl.prop.startsWith('$') || !isModuleLevel(decl)) return; + + const reassignment = assigned.has(decl.prop); + if (decl.parent.type === 'root' && !isNull(decl)) assigned.add(decl.prop); + if (reassignment || hasFlag(decl, 'default') || hasFlag(decl, 'global')) return; + + report({ + message: messages.expected, + messageArgs: [decl.prop], + node: decl, + result, + ruleName, + fix: () => { + decl.value = `${decl.value} !default`; + if (decl.raws.value) decl.raws.value = { value: decl.value, raw: `${decl.raws.value.raw} !default` }; + }, + }); + }); +}; + +ruleFunction.ruleName = ruleName; +ruleFunction.messages = messages; +ruleFunction.meta = meta; + +export default createPlugin(ruleName, ruleFunction); From 7878f67dc6b21219ce089776ebab9072abc62fce Mon Sep 17 00:00:00 2001 From: EugeniyKiyashko Date: Fri, 4 Sep 2026 02:20:07 +0400 Subject: [PATCH 4/8] Styles: give every module variable the !default flag so @use with() can override it --- .../scss/widgets/base/_htmlEditor.scss | 22 +++--- .../scss/widgets/base/_icon_fonts.scss | 2 +- .../scss/widgets/base/_loadIndicator.scss | 4 +- .../scss/widgets/base/_mixins.scss | 4 +- .../scss/widgets/base/_numberBox.scss | 4 +- .../scss/widgets/base/_pagination.scss | 4 +- .../scss/widgets/base/_recurrenceEditor.scss | 6 +- .../scss/widgets/base/_resizable.scss | 6 +- .../scss/widgets/base/_scrollView.scss | 4 +- .../scss/widgets/base/_slider.scss | 4 +- .../base/cardView/header_panel/_index.scss | 2 +- .../scss/widgets/base/colorBox/_index.scss | 2 +- .../scss/widgets/base/colorView/_index.scss | 24 +++---- .../scss/widgets/base/diagram/_index.scss | 2 +- .../widgets/base/gridBase/_variables.scss | 26 +++---- .../gridBase/layout/aiChat/_variables.scss | 12 ++-- .../scss/widgets/base/list/_index.scss | 2 +- .../scss/widgets/base/pivotGrid/_index.scss | 20 +++--- .../scss/widgets/base/scheduler/_common.scss | 4 +- .../scss/widgets/base/scheduler/_index.scss | 68 +++++++++---------- .../base/scheduler/layout/_header.scss | 2 +- .../widgets/base/scheduler/views/_index.scss | 26 +++---- .../base/scheduler/views/agenda/_index.scss | 4 +- .../scheduler/views/timelines/_index.scss | 2 +- .../scss/widgets/base/treeList/_index.scss | 18 ++--- .../scss/widgets/base/treeView/_common.scss | 2 +- .../scss/widgets/fluent/_colors.scss | 2 +- .../widgets/fluent/actionSheet/_sizes.scss | 2 +- .../scss/widgets/fluent/button/_colors.scss | 5 +- .../scss/widgets/fluent/button/_sizes.scss | 2 +- .../scss/widgets/fluent/cardView/_sizes.scss | 4 +- .../scss/widgets/fluent/colorView/_index.scss | 4 +- .../scss/widgets/fluent/common/_mixins.scss | 2 +- .../widgets/fluent/dateRangeBox/_index.scss | 2 +- .../scss/widgets/fluent/dateView/_index.scss | 2 +- .../scss/widgets/fluent/diagram/_index.scss | 6 +- .../widgets/fluent/dropDownButton/_sizes.scss | 4 +- .../widgets/fluent/dropDownEditor/_index.scss | 8 +-- .../widgets/fluent/fileManager/_sizes.scss | 2 +- .../widgets/fluent/fileUploader/_index.scss | 4 +- .../scss/widgets/fluent/gantt/_index.scss | 2 +- .../scss/widgets/fluent/gridBase/_colors.scss | 4 +- .../scss/widgets/fluent/gridBase/_index.scss | 10 +-- .../widgets/fluent/gridBase/_variables.scss | 12 ++-- .../fluent/gridBase/layout/aiChat/_sizes.scss | 2 +- .../scss/widgets/fluent/informer/_colors.scss | 8 +-- .../scss/widgets/fluent/list/_index.scss | 8 +-- .../scss/widgets/fluent/menuBase/_colors.scss | 2 +- .../scss/widgets/fluent/menuBase/_sizes.scss | 2 +- .../scss/widgets/fluent/pivotGrid/_index.scss | 10 +-- .../scss/widgets/fluent/popup/_index.scss | 2 +- .../widgets/fluent/progressBar/_colors.scss | 6 +- .../widgets/fluent/progressBar/_sizes.scss | 2 +- .../fluent/recurrenceEditor/_index.scss | 6 +- .../widgets/fluent/scheduler/_colors.scss | 9 ++- .../scss/widgets/fluent/scheduler/_index.scss | 8 +-- .../scss/widgets/fluent/scheduler/_sizes.scss | 10 +-- .../widgets/fluent/scrollView/_index.scss | 2 +- .../widgets/fluent/scrollable/_sizes.scss | 4 +- .../fluent/speedDialAction/_index.scss | 4 +- .../fluent/speedDialAction/_sizes.scss | 8 +-- .../scss/widgets/fluent/splitter/_sizes.scss | 2 +- .../scss/widgets/fluent/switch/_index.scss | 6 +- .../widgets/fluent/textEditor/_colors.scss | 6 +- .../widgets/fluent/textEditor/_index.scss | 8 +-- .../scss/widgets/fluent/tooltip/_sizes.scss | 2 +- .../scss/widgets/fluent/treeView/_sizes.scss | 14 ++-- .../scss/widgets/generic/_sizes.scss | 2 +- .../scss/widgets/generic/cardView/_sizes.scss | 4 +- .../scss/widgets/generic/checkBox/_index.scss | 2 +- .../widgets/generic/colorView/_index.scss | 4 +- .../scss/widgets/generic/common/_mixins.scss | 4 +- .../widgets/generic/contextMenu/_index.scss | 2 +- .../scss/widgets/generic/dateView/_index.scss | 2 +- .../scss/widgets/generic/diagram/_index.scss | 8 +-- .../generic/dropDownEditor/_index.scss | 12 ++-- .../scss/widgets/generic/fieldset/_index.scss | 4 +- .../widgets/generic/fileManager/_sizes.scss | 2 +- .../widgets/generic/fileUploader/_index.scss | 2 +- .../scss/widgets/generic/gantt/_index.scss | 2 +- .../scss/widgets/generic/gridBase/_index.scss | 18 ++--- .../scss/widgets/generic/gridBase/_sizes.scss | 12 ++-- .../widgets/generic/gridBase/_variables.scss | 2 +- .../gridBase/layout/aiChat/_sizes.scss | 2 +- .../widgets/generic/htmlEditor/_sizes.scss | 12 ++-- .../widgets/generic/informer/_colors.scss | 64 ++++++++--------- .../scss/widgets/generic/list/_index.scss | 6 +- .../scss/widgets/generic/menuBase/_index.scss | 8 +-- .../widgets/generic/pivotGrid/_sizes.scss | 4 +- .../scss/widgets/generic/popup/_index.scss | 4 +- .../widgets/generic/progressBar/_index.scss | 10 +-- .../widgets/generic/rangeSlider/_index.scss | 2 +- .../generic/recurrenceEditor/_index.scss | 2 +- .../widgets/generic/scheduler/_colors.scss | 6 +- .../widgets/generic/scheduler/_index.scss | 20 +++--- .../widgets/generic/scheduler/_sizes.scss | 2 +- .../widgets/generic/scrollable/_sizes.scss | 4 +- .../scss/widgets/generic/slider/_index.scss | 2 +- .../generic/speedDialAction/_index.scss | 6 +- .../generic/speedDialAction/_sizes.scss | 4 +- .../scss/widgets/generic/splitter/_sizes.scss | 2 +- .../scss/widgets/generic/switch/_index.scss | 4 +- .../widgets/generic/textEditor/_colors.scss | 4 +- .../widgets/generic/textEditor/_index.scss | 16 ++--- .../scss/widgets/generic/toast/_index.scss | 2 +- .../widgets/generic/treeView/_colors.scss | 2 +- .../scss/widgets/generic/treeView/_sizes.scss | 4 +- .../widgets/material/actionSheet/_sizes.scss | 2 +- .../scss/widgets/material/button/_colors.scss | 2 +- .../scss/widgets/material/button/_sizes.scss | 4 +- .../widgets/material/cardView/_sizes.scss | 4 +- .../widgets/material/checkBox/_index.scss | 2 +- .../widgets/material/colorView/_index.scss | 4 +- .../scss/widgets/material/common/_mixins.scss | 2 +- .../widgets/material/dateRangeBox/_index.scss | 2 +- .../widgets/material/dateView/_index.scss | 2 +- .../scss/widgets/material/diagram/_index.scss | 6 +- .../material/dropDownButton/_sizes.scss | 4 +- .../material/dropDownEditor/_index.scss | 8 +-- .../widgets/material/fileManager/_sizes.scss | 2 +- .../widgets/material/fileUploader/_index.scss | 2 +- .../widgets/material/fileUploader/_sizes.scss | 2 +- .../scss/widgets/material/gantt/_colors.scss | 8 +-- .../scss/widgets/material/gantt/_index.scss | 2 +- .../widgets/material/gridBase/_colors.scss | 4 +- .../widgets/material/gridBase/_index.scss | 10 +-- .../widgets/material/gridBase/_variables.scss | 12 ++-- .../gridBase/layout/aiChat/_sizes.scss | 2 +- .../widgets/material/informer/_colors.scss | 8 +-- .../scss/widgets/material/list/_index.scss | 10 +-- .../scss/widgets/material/menu/_index.scss | 2 +- .../widgets/material/menuBase/_index.scss | 2 +- .../widgets/material/menuBase/_sizes.scss | 2 +- .../widgets/material/pivotGrid/_index.scss | 10 +-- .../scss/widgets/material/popup/_index.scss | 2 +- .../widgets/material/progressBar/_index.scss | 6 +- .../widgets/material/radioButton/_index.scss | 2 +- .../widgets/material/rangeSlider/_index.scss | 2 +- .../material/recurrenceEditor/_index.scss | 6 +- .../widgets/material/scheduler/_colors.scss | 6 +- .../widgets/material/scheduler/_index.scss | 14 ++-- .../widgets/material/scheduler/_sizes.scss | 6 +- .../widgets/material/scrollView/_index.scss | 2 +- .../widgets/material/scrollable/_sizes.scss | 4 +- .../scss/widgets/material/slider/_index.scss | 10 +-- .../material/speedDialAction/_index.scss | 6 +- .../material/speedDialAction/_sizes.scss | 8 +-- .../widgets/material/splitter/_sizes.scss | 2 +- .../scss/widgets/material/switch/_index.scss | 8 +-- .../scss/widgets/material/textBox/_index.scss | 6 +- .../widgets/material/textEditor/_colors.scss | 4 +- .../widgets/material/textEditor/_index.scss | 8 +-- .../widgets/material/textEditor/_sizes.scss | 16 ++--- .../widgets/material/treeView/_sizes.scss | 8 +-- 154 files changed, 501 insertions(+), 503 deletions(-) diff --git a/packages/devextreme-scss/scss/widgets/base/_htmlEditor.scss b/packages/devextreme-scss/scss/widgets/base/_htmlEditor.scss index 5b3818d55082..79636b10de17 100644 --- a/packages/devextreme-scss/scss/widgets/base/_htmlEditor.scss +++ b/packages/devextreme-scss/scss/widgets/base/_htmlEditor.scss @@ -2,17 +2,17 @@ @use "sass:math"; @use "sass:selector"; -$list-style: decimal lower-alpha lower-roman; -$list-style-width: 1.2em; -$list-style-margin: 0.3em; -$list-style-outer-width: $list-style-margin + $list-style-width; -$max-indent: 9; -$resize-handle-size: 11px; -$touch-resize-handle-size: 15px; -$half-resize-handle-size: math.div($resize-handle-size, 2); -$half-touch-resize-handle-size: math.div($touch-resize-handle-size, 2); - -$transparent-border: 1px solid transparent; +$list-style: decimal lower-alpha lower-roman !default; +$list-style-width: 1.2em !default; +$list-style-margin: 0.3em !default; +$list-style-outer-width: $list-style-margin + $list-style-width !default; +$max-indent: 9 !default; +$resize-handle-size: 11px !default; +$touch-resize-handle-size: 15px !default; +$half-resize-handle-size: math.div($resize-handle-size, 2) !default; +$half-touch-resize-handle-size: math.div($touch-resize-handle-size, 2) !default; + +$transparent-border: 1px solid transparent !default; @function add-counter-reset($counter, $start: 1) { @if $counter > $start { diff --git a/packages/devextreme-scss/scss/widgets/base/_icon_fonts.scss b/packages/devextreme-scss/scss/widgets/base/_icon_fonts.scss index c6645d033729..2bc650a5f1c8 100644 --- a/packages/devextreme-scss/scss/widgets/base/_icon_fonts.scss +++ b/packages/devextreme-scss/scss/widgets/base/_icon_fonts.scss @@ -613,7 +613,7 @@ $icons: ( "gridkanban": "\f240", "listbartreeoffset": "\f241", "clearhistory": "\f242", -); +) !default; // stylelint-enable diff --git a/packages/devextreme-scss/scss/widgets/base/_loadIndicator.scss b/packages/devextreme-scss/scss/widgets/base/_loadIndicator.scss index ac6f0ec94503..eafdf848b572 100644 --- a/packages/devextreme-scss/scss/widgets/base/_loadIndicator.scss +++ b/packages/devextreme-scss/scss/widgets/base/_loadIndicator.scss @@ -1,7 +1,7 @@ @use "sass:math"; -$loadindicator-width: 32px; -$loadindicator-height: 32px; +$loadindicator-width: 32px !default; +$loadindicator-height: 32px !default; .dx-loadindicator { width: $loadindicator-width; diff --git a/packages/devextreme-scss/scss/widgets/base/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/_mixins.scss index e38a7556b667..5a37174c9974 100644 --- a/packages/devextreme-scss/scss/widgets/base/_mixins.scss +++ b/packages/devextreme-scss/scss/widgets/base/_mixins.scss @@ -140,5 +140,5 @@ transform: translate(-50%, -50%); } -$overlay-zindex: 1000; -$max-integer: 2147483647; +$overlay-zindex: 1000 !default; +$max-integer: 2147483647 !default; diff --git a/packages/devextreme-scss/scss/widgets/base/_numberBox.scss b/packages/devextreme-scss/scss/widgets/base/_numberBox.scss index 569695d1163f..e2db3328c299 100644 --- a/packages/devextreme-scss/scss/widgets/base/_numberBox.scss +++ b/packages/devextreme-scss/scss/widgets/base/_numberBox.scss @@ -1,7 +1,7 @@ @use "./mixins" as *; -$spin-container-width: 22px; -$touch-friendly-spin-container-width: 64px; +$spin-container-width: 22px !default; +$touch-friendly-spin-container-width: 64px !default; .dx-numberbox { position: relative; diff --git a/packages/devextreme-scss/scss/widgets/base/_pagination.scss b/packages/devextreme-scss/scss/widgets/base/_pagination.scss index e4e03edf80db..b73aed4bc164 100644 --- a/packages/devextreme-scss/scss/widgets/base/_pagination.scss +++ b/packages/devextreme-scss/scss/widgets/base/_pagination.scss @@ -1,7 +1,7 @@ @use "./mixins" as *; -$pagination-paddings: 8px; -$pagination-info-paddings: 9px; +$pagination-paddings: 8px !default; +$pagination-info-paddings: 9px !default; .dx-pager, .dx-pagination { diff --git a/packages/devextreme-scss/scss/widgets/base/_recurrenceEditor.scss b/packages/devextreme-scss/scss/widgets/base/_recurrenceEditor.scss index 28f826acb54d..136bc1ebf27c 100644 --- a/packages/devextreme-scss/scss/widgets/base/_recurrenceEditor.scss +++ b/packages/devextreme-scss/scss/widgets/base/_recurrenceEditor.scss @@ -1,6 +1,6 @@ -$recurrence-interval-number-box-margin-top: 25px; -$recurrence-radio-group-item-padding: 10px; -$recurrence-button-group-item-padding: 8px; +$recurrence-interval-number-box-margin-top: 25px !default; +$recurrence-radio-group-item-padding: 10px !default; +$recurrence-button-group-item-padding: 8px !default; .dx-recurrence-repeat-on, .dx-recurrence-numberbox-interval-wrapper { diff --git a/packages/devextreme-scss/scss/widgets/base/_resizable.scss b/packages/devextreme-scss/scss/widgets/base/_resizable.scss index 8068ae0a863a..a7635864fec7 100644 --- a/packages/devextreme-scss/scss/widgets/base/_resizable.scss +++ b/packages/devextreme-scss/scss/widgets/base/_resizable.scss @@ -1,6 +1,6 @@ -$handle-offset: 0; -$one-side-handle-size: 3px + $handle-offset; -$two-side-handle-size: 6px + $handle-offset; +$handle-offset: 0 !default; +$one-side-handle-size: 3px + $handle-offset !default; +$two-side-handle-size: 6px + $handle-offset !default; .dx-resizable { display: block; diff --git a/packages/devextreme-scss/scss/widgets/base/_scrollView.scss b/packages/devextreme-scss/scss/widgets/base/_scrollView.scss index c125ad2d0d01..920800bdf699 100644 --- a/packages/devextreme-scss/scss/widgets/base/_scrollView.scss +++ b/packages/devextreme-scss/scss/widgets/base/_scrollView.scss @@ -1,7 +1,7 @@ @use "./mixins" as *; -$pulldown-height: 50px; -$pulldown-padding: 15px; +$pulldown-height: 50px !default; +$pulldown-padding: 15px !default; .dx-scrollable-native { &.dx-scrollable-native-generic { diff --git a/packages/devextreme-scss/scss/widgets/base/_slider.scss b/packages/devextreme-scss/scss/widgets/base/_slider.scss index 1c2ebfa9e3d4..2f6fe5294ea2 100644 --- a/packages/devextreme-scss/scss/widgets/base/_slider.scss +++ b/packages/devextreme-scss/scss/widgets/base/_slider.scss @@ -1,8 +1,8 @@ @use "./mixins" as *; @use "./popover/mixins" as *; -$slider-tooltip-content-height: 28px; -$slider-tooltip-arrow-height: 7px; +$slider-tooltip-content-height: 28px !default; +$slider-tooltip-arrow-height: 7px !default; .dx-slider-label { position: absolute; diff --git a/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/_index.scss b/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/_index.scss index 33789dd4a50e..f03e72471f49 100644 --- a/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/_index.scss @@ -6,7 +6,7 @@ 2px maximal right header item padding + 4px maximal dxSortable placeholder (drop indicator) width We can increase this number up to the CardView root padding without issues */ -$sortable-side-offset: 6px; +$sortable-side-offset: 6px !default; .dx-cardview-header-item-sorting { display: flex; diff --git a/packages/devextreme-scss/scss/widgets/base/colorBox/_index.scss b/packages/devextreme-scss/scss/widgets/base/colorBox/_index.scss index 262086e375ee..4174f1803d22 100644 --- a/packages/devextreme-scss/scss/widgets/base/colorBox/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/colorBox/_index.scss @@ -2,7 +2,7 @@ @use "./mixins" as *; @use "sass:string" as string; -$colorbox-input-left-padding: 40px; +$colorbox-input-left-padding: 40px !default; .dx-colorbox-input-container { &.dx-colorbox-color-is-not-defined { diff --git a/packages/devextreme-scss/scss/widgets/base/colorView/_index.scss b/packages/devextreme-scss/scss/widgets/base/colorView/_index.scss index f226a5938c2a..9eb36c7c7061 100644 --- a/packages/devextreme-scss/scss/widgets/base/colorView/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/colorView/_index.scss @@ -1,17 +1,17 @@ @use "../mixins" as *; -$color-view-container-width: 450px; -$color-view-palette-width: 288px; -$color-view-palette-height: 299px; -$color-view-alpha-width: 292px; -$color-view-hue-scale-width: 18px; -$color-view-hue-scale-height: $color-view-palette-height; - -$colorview-palette-handle-size: 28px; -$colorview-transparent-background-color: #ccc; - -$colorview-handle-first-side-size: 36px; -$colorview-handle-second-side-size: 17px; +$color-view-container-width: 450px !default; +$color-view-palette-width: 288px !default; +$color-view-palette-height: 299px !default; +$color-view-alpha-width: 292px !default; +$color-view-hue-scale-width: 18px !default; +$color-view-hue-scale-height: $color-view-palette-height !default; + +$colorview-palette-handle-size: 28px !default; +$colorview-transparent-background-color: #ccc !default; + +$colorview-handle-first-side-size: 36px !default; +$colorview-handle-second-side-size: 17px !default; .dx-colorview-container { width: $color-view-container-width; diff --git a/packages/devextreme-scss/scss/widgets/base/diagram/_index.scss b/packages/devextreme-scss/scss/widgets/base/diagram/_index.scss index e6d9d5683a3c..3b10c750588e 100644 --- a/packages/devextreme-scss/scss/widgets/base/diagram/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/diagram/_index.scss @@ -1,6 +1,6 @@ @use "../mixins" as *; -$transparent-border: 1px solid transparent; +$transparent-border: 1px solid transparent !default; .dx-diagram { border: $transparent-border; diff --git a/packages/devextreme-scss/scss/widgets/base/gridBase/_variables.scss b/packages/devextreme-scss/scss/widgets/base/gridBase/_variables.scss index c1b6172d3926..e6a121dc6e89 100644 --- a/packages/devextreme-scss/scss/widgets/base/gridBase/_variables.scss +++ b/packages/devextreme-scss/scss/widgets/base/gridBase/_variables.scss @@ -1,13 +1,13 @@ -$grid-cell-padding: 7px; -$grid-texteditor-input-padding: 32px; -$grid-total-footer-paddings: 7px; -$grid-command-select-column-width: 70px; -$grid-command-edit-column-width: 100px; -$grid-command-edit-column-with-icons-width: 80px; -$grid-command-expand-column-width: 30px; -$grid-command-adaptive-column-width: 36px; -$grid-column-header-indicator-width: 14px; -$grid-text-content-margin: 3px; -$grid-sort-index-width: 12px; -$grid-sort-index-offset: 3px; -$grid-ai-assistant-confirm-dialog-button-width: 50px; +$grid-cell-padding: 7px !default; +$grid-texteditor-input-padding: 32px !default; +$grid-total-footer-paddings: 7px !default; +$grid-command-select-column-width: 70px !default; +$grid-command-edit-column-width: 100px !default; +$grid-command-edit-column-with-icons-width: 80px !default; +$grid-command-expand-column-width: 30px !default; +$grid-command-adaptive-column-width: 36px !default; +$grid-column-header-indicator-width: 14px !default; +$grid-text-content-margin: 3px !default; +$grid-sort-index-width: 12px !default; +$grid-sort-index-offset: 3px !default; +$grid-ai-assistant-confirm-dialog-button-width: 50px !default; diff --git a/packages/devextreme-scss/scss/widgets/base/gridBase/layout/aiChat/_variables.scss b/packages/devextreme-scss/scss/widgets/base/gridBase/layout/aiChat/_variables.scss index 03c18025cb6e..887b8717f691 100644 --- a/packages/devextreme-scss/scss/widgets/base/gridBase/layout/aiChat/_variables.scss +++ b/packages/devextreme-scss/scss/widgets/base/gridBase/layout/aiChat/_variables.scss @@ -1,6 +1,6 @@ -$ai-chat-toolbar-item-spacing: 4px; -$ai-chat-message-gap: 8px; -$ai-chat-message-content-gap: 4px; -$ai-chat-message-width: 280px; -$ai-chat-message-regenerate-button-border-radius: 4px; -$ai-chat-action-list-item-text-max-lines: 2; +$ai-chat-toolbar-item-spacing: 4px !default; +$ai-chat-message-gap: 8px !default; +$ai-chat-message-content-gap: 4px !default; +$ai-chat-message-width: 280px !default; +$ai-chat-message-regenerate-button-border-radius: 4px !default; +$ai-chat-action-list-item-text-max-lines: 2 !default; diff --git a/packages/devextreme-scss/scss/widgets/base/list/_index.scss b/packages/devextreme-scss/scss/widgets/base/list/_index.scss index 44c3baa238f4..ce602f27237d 100644 --- a/packages/devextreme-scss/scss/widgets/base/list/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/list/_index.scss @@ -1,7 +1,7 @@ @use "../mixins" as *; @use "../button/mixins" as *; -$list-searchbox-margin-bottom: 5px; +$list-searchbox-margin-bottom: 5px !default; .dx-list { margin: 0; diff --git a/packages/devextreme-scss/scss/widgets/base/pivotGrid/_index.scss b/packages/devextreme-scss/scss/widgets/base/pivotGrid/_index.scss index cfd91f6158e4..f207e0faa181 100644 --- a/packages/devextreme-scss/scss/widgets/base/pivotGrid/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/pivotGrid/_index.scss @@ -23,16 +23,16 @@ $pivotgrid-button-top-padding: null !default; @use "../icon_fonts" as *; @use "./common"; -$pivotgrid-drag-header-border: 1px solid; -$pivotgrid-drag-header-first-shadow: 0 0 1px $pivotgrid-drag-header-first-shadow-color; -$pivotgrid-drag-header-second-shadow: 0 1px 3px $pivotgrid-drag-header-second-shadow-color; -$pivotgrid-border-width: 1px; -$pivotgrid-border: $pivotgrid-border-width solid; -$pivotgrid-icon-size: 14px; -$pivotgrid-common-field-padding: 2px; -$pivotgrid-filter-area-border-spacing: $pivotgrid-common-left-right-padding - $pivotgrid-common-field-padding $pivotgrid-header-top-bottom-padding - $pivotgrid-common-field-padding; -$pivotgrid-expand-icon-offset: -5px; -$pivotgrid-expand-icon-text-offset: 0; +$pivotgrid-drag-header-border: 1px solid !default; +$pivotgrid-drag-header-first-shadow: 0 0 1px $pivotgrid-drag-header-first-shadow-color !default; +$pivotgrid-drag-header-second-shadow: 0 1px 3px $pivotgrid-drag-header-second-shadow-color !default; +$pivotgrid-border-width: 1px !default; +$pivotgrid-border: $pivotgrid-border-width solid !default; +$pivotgrid-icon-size: 14px !default; +$pivotgrid-common-field-padding: 2px !default; +$pivotgrid-filter-area-border-spacing: $pivotgrid-common-left-right-padding - $pivotgrid-common-field-padding $pivotgrid-header-top-bottom-padding - $pivotgrid-common-field-padding !default; +$pivotgrid-expand-icon-offset: -5px !default; +$pivotgrid-expand-icon-text-offset: 0 !default; .dx-pivotgrid-fields-container { .dx-position-indicator { diff --git a/packages/devextreme-scss/scss/widgets/base/scheduler/_common.scss b/packages/devextreme-scss/scss/widgets/base/scheduler/_common.scss index 757318499b2b..996034b1de34 100644 --- a/packages/devextreme-scss/scss/widgets/base/scheduler/_common.scss +++ b/packages/devextreme-scss/scss/widgets/base/scheduler/_common.scss @@ -1,8 +1,8 @@ @use "sass:math"; @use "../../base/mixins" as *; -$scheduler-appointment-collector-margin: 3px; -$scheduler-appointment-collector-height: 22px; +$scheduler-appointment-collector-margin: 3px !default; +$scheduler-appointment-collector-height: 22px !default; .dx-scheduler { .dx-empty-message { diff --git a/packages/devextreme-scss/scss/widgets/base/scheduler/_index.scss b/packages/devextreme-scss/scss/widgets/base/scheduler/_index.scss index 5aed1e0f20f4..c42229cab532 100644 --- a/packages/devextreme-scss/scss/widgets/base/scheduler/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/scheduler/_index.scss @@ -52,52 +52,52 @@ $agenda-appointment-recurrence-icon-color: null !default; $scheduler-tooltip-list-focused-bg: $scheduler-tooltip-list-focused-bg ); -$scheduler-appointment-min-size: 4px; -$scheduler-appointment-content-padding: 5px 7px; -$scheduler-appointment-reduced-content-padding: 40px; +$scheduler-appointment-min-size: 4px !default; +$scheduler-appointment-content-padding: 5px 7px !default; +$scheduler-appointment-reduced-content-padding: 40px !default; -$scheduler-hovered-appointment-top-shadow-size: 5px; -$scheduler-focused-cell-shadow: inset 0 0 0 1px $scheduler-appointment-base-color; +$scheduler-hovered-appointment-top-shadow-size: 5px !default; +$scheduler-focused-cell-shadow: inset 0 0 0 1px $scheduler-appointment-base-color !default; -$scheduler-vertical-appointment-resizable-hovering-shadow: inset 0 $scheduler-hovered-appointment-top-shadow-size 0 0 $scheduler-appointment-start-color, inset 0 -2px 0 0 $scheduler-appointment-start-color; -$scheduler-vertical-appointment-hovering-shadow: inset 0 $scheduler-hovered-appointment-top-shadow-size 0 0 $scheduler-appointment-start-color; -$scheduler-vertical-appointment-shadow: inset 0 2px 0 0 $scheduler-appointment-start-color; -$scheduler-vertical-appointment-resizing-shadow: inset 0 -2px 0 0 $scheduler-appointment-start-color, $scheduler-vertical-appointment-shadow; +$scheduler-vertical-appointment-resizable-hovering-shadow: inset 0 $scheduler-hovered-appointment-top-shadow-size 0 0 $scheduler-appointment-start-color, inset 0 -2px 0 0 $scheduler-appointment-start-color !default; +$scheduler-vertical-appointment-hovering-shadow: inset 0 $scheduler-hovered-appointment-top-shadow-size 0 0 $scheduler-appointment-start-color !default; +$scheduler-vertical-appointment-shadow: inset 0 2px 0 0 $scheduler-appointment-start-color !default; +$scheduler-vertical-appointment-resizing-shadow: inset 0 -2px 0 0 $scheduler-appointment-start-color, $scheduler-vertical-appointment-shadow !default; -$scheduler-appointment-dragging-shadow: 7px 7px 15px 0 rgba(50, 50, 50, 0.2); +$scheduler-appointment-dragging-shadow: 7px 7px 15px 0 rgba(50, 50, 50, 0.2) !default; -$scheduler-horizontal-appointment-resizable-hovering-shadow: inset $scheduler-hovered-appointment-top-shadow-size 0 0 0 $scheduler-appointment-start-color, inset -2px 0 0 0 $scheduler-appointment-start-color; -$scheduler-horizontal-appointment-resizable-hovering-shadow-rtl: inset (-$scheduler-hovered-appointment-top-shadow-size) 0 0 0 $scheduler-appointment-start-color, inset 2px 0 0 0 $scheduler-appointment-start-color; -$scheduler-horizontal-appointment-hovering-shadow: inset $scheduler-hovered-appointment-top-shadow-size 0 0 0 $scheduler-appointment-start-color; -$scheduler-horizontal-appointment-hovering-shadow-rtl: inset (-$scheduler-hovered-appointment-top-shadow-size) 0 0 0 $scheduler-appointment-start-color; -$scheduler-horizontal-appointment-shadow: inset 2px 0 0 0 $scheduler-appointment-start-color; -$scheduler-horizontal-appointment-shadow-rtl: inset -2px 0 0 0 $scheduler-appointment-start-color; -$scheduler-horizontal-appointment-resizing-shadow: inset -2px 0 0 0 $scheduler-appointment-start-color, $scheduler-horizontal-appointment-shadow; +$scheduler-horizontal-appointment-resizable-hovering-shadow: inset $scheduler-hovered-appointment-top-shadow-size 0 0 0 $scheduler-appointment-start-color, inset -2px 0 0 0 $scheduler-appointment-start-color !default; +$scheduler-horizontal-appointment-resizable-hovering-shadow-rtl: inset (-$scheduler-hovered-appointment-top-shadow-size) 0 0 0 $scheduler-appointment-start-color, inset 2px 0 0 0 $scheduler-appointment-start-color !default; +$scheduler-horizontal-appointment-hovering-shadow: inset $scheduler-hovered-appointment-top-shadow-size 0 0 0 $scheduler-appointment-start-color !default; +$scheduler-horizontal-appointment-hovering-shadow-rtl: inset (-$scheduler-hovered-appointment-top-shadow-size) 0 0 0 $scheduler-appointment-start-color !default; +$scheduler-horizontal-appointment-shadow: inset 2px 0 0 0 $scheduler-appointment-start-color !default; +$scheduler-horizontal-appointment-shadow-rtl: inset -2px 0 0 0 $scheduler-appointment-start-color !default; +$scheduler-horizontal-appointment-resizing-shadow: inset -2px 0 0 0 $scheduler-appointment-start-color, $scheduler-horizontal-appointment-shadow !default; -$scheduler-grouped-appointment-month-text-size: 12px; +$scheduler-grouped-appointment-month-text-size: 12px !default; -$scheduler-base-border: 1px solid; -$scheduler-transparent-top-border: 1px solid transparent; -$scheduler-accent-border: 1px solid; +$scheduler-base-border: 1px solid !default; +$scheduler-transparent-top-border: 1px solid transparent !default; +$scheduler-accent-border: 1px solid !default; -$scheduler-reduced-icon-offset: 5px; -$scheduler-recurrence-icon-offset: 20px; +$scheduler-reduced-icon-offset: 5px !default; +$scheduler-recurrence-icon-offset: 20px !default; -$scheduler-agenda-appointment-margin: 5px; -$scheduler-agenda-last-in-date-appointment-margin: 20px; +$scheduler-agenda-appointment-margin: 5px !default; +$scheduler-agenda-last-in-date-appointment-margin: 20px !default; -$scheduler-small-size-factor: 0.5; +$scheduler-small-size-factor: 0.5 !default; -$scheduler-small-size-element-offset: $scheduler-left-column-width * $scheduler-small-size-factor; +$scheduler-small-size-element-offset: $scheduler-left-column-width * $scheduler-small-size-factor !default; -$scheduler-time-indicator-font-size: 30px; -$scheduler-time-indicator-size: 1px; -$scheduler-time-indicator-top: 14px; -$scheduler-time-indicator-left: 12px; +$scheduler-time-indicator-font-size: 30px !default; +$scheduler-time-indicator-size: 1px !default; +$scheduler-time-indicator-top: 14px !default; +$scheduler-time-indicator-left: 12px !default; -$scheduler-time-indicator-shadow-color: rgba(255, 255, 255, 0.1); -$scheduler-time-indicator-shadow: 0 1px 0 0 $scheduler-time-indicator-shadow-color; -$scheduler-time-indicator-text-shadow: $scheduler-time-indicator-shadow-color 1px 0 0; +$scheduler-time-indicator-shadow-color: rgba(255, 255, 255, 0.1) !default; +$scheduler-time-indicator-shadow: 0 1px 0 0 $scheduler-time-indicator-shadow-color !default; +$scheduler-time-indicator-text-shadow: $scheduler-time-indicator-shadow-color 1px 0 0 !default; @use "./appointment" with ( $scheduler-transparent-top-border: $scheduler-transparent-top-border, diff --git a/packages/devextreme-scss/scss/widgets/base/scheduler/layout/_header.scss b/packages/devextreme-scss/scss/widgets/base/scheduler/layout/_header.scss index f58cba3e9c35..76a342a3bfbb 100644 --- a/packages/devextreme-scss/scss/widgets/base/scheduler/layout/_header.scss +++ b/packages/devextreme-scss/scss/widgets/base/scheduler/layout/_header.scss @@ -1,4 +1,4 @@ -$arrow-down: "\f016"; +$arrow-down: "\f016" !default; @mixin header-base( $border, diff --git a/packages/devextreme-scss/scss/widgets/base/scheduler/views/_index.scss b/packages/devextreme-scss/scss/widgets/base/scheduler/views/_index.scss index bdbe38bd195e..dec89907e065 100644 --- a/packages/devextreme-scss/scss/widgets/base/scheduler/views/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/scheduler/views/_index.scss @@ -28,24 +28,24 @@ $scheduler-first-month-cell-background-color: null !default; $scheduler-panel-text-color: null !default; -$scheduler-timepanel-cell-offset: 20px; -$scheduler-workspace-info-font-size: 20px; -$scheduler-small-font-size: 14px; +$scheduler-timepanel-cell-offset: 20px !default; +$scheduler-workspace-info-font-size: 20px !default; +$scheduler-small-font-size: 14px !default; -$scheduler-current-time-cell-border-size: 2px; +$scheduler-current-time-cell-border-size: 2px !default; -$scheduler-workspace-date-table-cell-height: 50px; -$scheduler-all-day-table-cell-height: $scheduler-workspace-date-table-cell-height * 1.5; -$scheduler-collapsed-all-day-table-cell-height: $scheduler-workspace-date-table-cell-height * 0.5; -$scheduler-vertical-grouped-all-day-table-cell-height: $scheduler-workspace-date-table-cell-height; -$scheduler-header-panel-table-cell-height: $scheduler-workspace-date-table-cell-height - 10px; -$scheduler-group-header-table-cell-height: 30px; +$scheduler-workspace-date-table-cell-height: 50px !default; +$scheduler-all-day-table-cell-height: $scheduler-workspace-date-table-cell-height * 1.5 !default; +$scheduler-collapsed-all-day-table-cell-height: $scheduler-workspace-date-table-cell-height * 0.5 !default; +$scheduler-vertical-grouped-all-day-table-cell-height: $scheduler-workspace-date-table-cell-height !default; +$scheduler-header-panel-table-cell-height: $scheduler-workspace-date-table-cell-height - 10px !default; +$scheduler-group-header-table-cell-height: 30px !default; -$scheduler-group-header-table-cell-width: 80px; +$scheduler-group-header-table-cell-width: 80px !default; -$scheduler-month-date-text-size: 16px; +$scheduler-month-date-text-size: 16px !default; -$scheduler-month-date-text-padding: 6px; +$scheduler-month-date-text-padding: 6px !default; @use "./day" with ( $scheduler-base-border: $scheduler-base-border, diff --git a/packages/devextreme-scss/scss/widgets/base/scheduler/views/agenda/_index.scss b/packages/devextreme-scss/scss/widgets/base/scheduler/views/agenda/_index.scss index 9602a3aaadc9..61291d143064 100644 --- a/packages/devextreme-scss/scss/widgets/base/scheduler/views/agenda/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/scheduler/views/agenda/_index.scss @@ -4,8 +4,8 @@ $scheduler-small-font-size: null !default; $scheduler-workspace-info-font-size: null !default; $scheduler-other-month-cell-opacity: null !default; -$scheduler-agenda-left-column-width: 70px; -$scheduler-group-header-agenda-font-size: 18px; +$scheduler-agenda-left-column-width: 70px !default; +$scheduler-group-header-agenda-font-size: 18px !default; .dx-scheduler-agenda { .dx-scheduler-date-table-scrollable { diff --git a/packages/devextreme-scss/scss/widgets/base/scheduler/views/timelines/_index.scss b/packages/devextreme-scss/scss/widgets/base/scheduler/views/timelines/_index.scss index b8469f2b1e83..8805dcef56c5 100644 --- a/packages/devextreme-scss/scss/widgets/base/scheduler/views/timelines/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/scheduler/views/timelines/_index.scss @@ -6,7 +6,7 @@ $scheduler-base-border: null !default; $scheduler-base-border-color: null !default; $scheduler-accent-border-color: null !default; -$scheduler-timeline-min-height: 100px; +$scheduler-timeline-min-height: 100px !default; .dx-scheduler-timeline-week, .dx-scheduler-timeline-work-week, diff --git a/packages/devextreme-scss/scss/widgets/base/treeList/_index.scss b/packages/devextreme-scss/scss/widgets/base/treeList/_index.scss index 95667f2a6758..30e7affaa09d 100644 --- a/packages/devextreme-scss/scss/widgets/base/treeList/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/treeList/_index.scss @@ -24,15 +24,15 @@ $base-focus-color: null !default; $treelist-focused-border-color: $datagrid-focused-border-color, ); -$treelist-border: $datagrid-border; -$treelist-drag-header-border-color: $datagrid-drag-header-border-color; -$treelist-row-error-bg: $datagrid-row-error-bg; -$treelist-base-color: $datagrid-base-color; -$treelist-base-background-color: $datagrid-base-background-color; -$treelist-border-color: $datagrid-border-color; -$treelist-focused-border-color: $datagrid-focused-border-color; -$treelist-text-stub-background-image-path: $datagrid-text-stub-background-image-path; -$treelist-row-error-color: $datagrid-row-error-color; +$treelist-border: $datagrid-border !default; +$treelist-drag-header-border-color: $datagrid-drag-header-border-color !default; +$treelist-row-error-bg: $datagrid-row-error-bg !default; +$treelist-base-color: $datagrid-base-color !default; +$treelist-base-background-color: $datagrid-base-background-color !default; +$treelist-border-color: $datagrid-border-color !default; +$treelist-focused-border-color: $datagrid-focused-border-color !default; +$treelist-text-stub-background-image-path: $datagrid-text-stub-background-image-path !default; +$treelist-row-error-color: $datagrid-row-error-color !default; .dx-treelist-borders { > .dx-treelist-headers, diff --git a/packages/devextreme-scss/scss/widgets/base/treeView/_common.scss b/packages/devextreme-scss/scss/widgets/base/treeView/_common.scss index 644abfdb53c3..86223bf07535 100644 --- a/packages/devextreme-scss/scss/widgets/base/treeView/_common.scss +++ b/packages/devextreme-scss/scss/widgets/base/treeView/_common.scss @@ -1,7 +1,7 @@ @use "../mixins" as *; @use "../../base/icon_fonts" as *; -$treeview-searchbox-margin-bottom: 5px; +$treeview-searchbox-margin-bottom: 5px !default; .dx-treeview-loadindicator-wrapper { text-align: center; diff --git a/packages/devextreme-scss/scss/widgets/fluent/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/_colors.scss index bbceda66881c..f0b0ffd43d08 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/_colors.scss @@ -250,7 +250,7 @@ $scrollview-pulldown-path: null !default; $base-danger-hover: color.adjust($base-danger, $saturation: 0.44%, $space: hsl, $lightness: 7.45%) !default; $base-danger-active: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: 1.8deg, $saturation: -0.9%, $lightness: 28.8%) !default; - $base-danger-selected: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: 0.7deg, $saturation: 1.3%, $lightness: 14.9%); + $base-danger-selected: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: 0.7deg, $saturation: 1.3%, $lightness: 14.9%) !default; $scrollview-pulldown-path: data-uri("images/widgets/fluent/color-schemes/dark/pulldown.png") !default; } diff --git a/packages/devextreme-scss/scss/widgets/fluent/actionSheet/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/actionSheet/_sizes.scss index 5694e65f75d3..15fdcab8742f 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/actionSheet/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/actionSheet/_sizes.scss @@ -1,2 +1,2 @@ -$fluent-actionsheet-item-margin-value: 12px; +$fluent-actionsheet-item-margin-value: 12px !default; $fluent-actionsheet-item-margin: 0 0 $fluent-actionsheet-item-margin-value 0 !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent/button/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/button/_colors.scss index b3465747f9e2..73dd4ef65aa4 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/button/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/button/_colors.scss @@ -214,7 +214,6 @@ $button-success-outlined-color: $base-success !default; $button-success-outlined-border-color: $base-success !default; $button-success-outlined-color-hover: null !default; $button-success-outlined-color-active: null !default; -$button-success-outlined-selected-color: null !default; $button-success-outlined-bg: transparent !default; $button-success-outlined-hover-bg: null !default; $button-success-outlined-active-bg: null !default; @@ -264,7 +263,6 @@ $button-accent-foreground-color: null !default; $button-success-outlined-color-hover: color.adjust($base-success, $saturation: -0.22%, $space: hsl, $lightness: -12.16%) !default; $button-success-outlined-color-active: color.adjust($base-success, $saturation: -0.95%, $space: hsl, $lightness: -19.22%) !default; - $button-success-outlined-selected-color: $button-success-outlined-color-hover; $button-default-color: $base-inverted-text-color !default; $button-default-selected-color: $base-inverted-text-color !default; @@ -297,7 +295,6 @@ $button-accent-foreground-color: null !default; $button-success-outlined-color-hover: color.adjust($base-success, $saturation: 10.6%, $space: hsl, $lightness: 45.3%) !default; $button-success-outlined-color-active: $button-success-outlined-color-hover !default; - $button-success-outlined-selected-color: $button-success-outlined-color-hover !default; $button-success-outlined-hover-bg: color.adjust($base-success, $saturation: 39.4%, $space: hsl, $lightness: -42.7%) !default; $button-success-outlined-active-bg: color.adjust($base-success, $saturation: 39%, $space: hsl, $lightness: -33.1%) !default; @@ -312,6 +309,8 @@ $button-accent-foreground-color: null !default; $button-shadow-color: color.change($base-shadow-color, $alpha: 0.4) !default; } +$button-success-outlined-selected-color: $button-success-outlined-color-hover !default; + /** * $name 40. Focused state background color * $type color diff --git a/packages/devextreme-scss/scss/widgets/fluent/button/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/button/_sizes.scss index 41b5a72455db..3deda76ec3da 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/button/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/button/_sizes.scss @@ -14,7 +14,7 @@ $fluent-button-box-shadow-size: 0 1px 3px !default; @if $size == "default" { $fluent-button-horizontal-padding: 12px !default; $fluent-button-vertical-padding: 6px !default; - $fluent-button-icon-padding: 6px; + $fluent-button-icon-padding: 6px !default; } @else if $size == "compact" { diff --git a/packages/devextreme-scss/scss/widgets/fluent/cardView/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/cardView/_sizes.scss index deda8c0b29f0..92390ea11dec 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/cardView/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/cardView/_sizes.scss @@ -188,8 +188,8 @@ $cardview-fluent-header-panel__item--disabled__sort-index-text-weight: $cardview */ $cardview-fluent-header-panel__item--dragged-text-weight: $cardview-fluent-header-panel__item-text-weight !default; -$cardview-fluent-header-item__sort-indicator__border-size: null; -$cardview-fluent-header-item__sort-indicator__border-radius: null; +$cardview-fluent-header-item__sort-indicator__border-size: null !default; +$cardview-fluent-header-item__sort-indicator__border-radius: null !default; // #endregion diff --git a/packages/devextreme-scss/scss/widgets/fluent/colorView/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/colorView/_index.scss index bef18943d2af..4259a2430fb2 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/colorView/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/colorView/_index.scss @@ -4,8 +4,8 @@ @use "../../base/colorView"; @include dx-base-colorview-styles($colorview-handle-color, $colorview-handle-border-color); -$fluent-colorview-alpha-width: $fluent-colorview-palette-width + 4; -$fluent-colorview-hue-scale-height: $fluent-colorview-palette-height; +$fluent-colorview-alpha-width: $fluent-colorview-palette-width + 4 !default; +$fluent-colorview-hue-scale-height: $fluent-colorview-palette-height !default; .dx-colorview-container { width: $fluent-colorview-container-width; diff --git a/packages/devextreme-scss/scss/widgets/fluent/common/_mixins.scss b/packages/devextreme-scss/scss/widgets/fluent/common/_mixins.scss index 07d36367e858..83f2458bf9b9 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/common/_mixins.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/common/_mixins.scss @@ -7,7 +7,7 @@ @use "../../base/validation" as *; @use "../list/sizes" as *; -$badge-invalid-bg: $base-invalid-color; +$badge-invalid-bg: $base-invalid-color !default; @mixin dx-base-typography() { @include dx-base-typography-mixin( diff --git a/packages/devextreme-scss/scss/widgets/fluent/dateRangeBox/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/dateRangeBox/_index.scss index c9c93f884a25..7540a81f6463 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/dateRangeBox/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/dateRangeBox/_index.scss @@ -9,7 +9,7 @@ @use "../../base/icon_fonts" as *; @use "../textEditor" as *; -$fluent-editor-custom-button-margin: 6px; +$fluent-editor-custom-button-margin: 6px !default; .dx-daterangebox { @include dx-dropdowneditor-button-icon-styling(daterangepicker); diff --git a/packages/devextreme-scss/scss/widgets/fluent/dateView/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/dateView/_index.scss index 276fbf644f98..67bb91377d8d 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/dateView/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/dateView/_index.scss @@ -6,7 +6,7 @@ @use "../../base/dateView"; @use "../scrollable"; -$fluent-dateview-roller-padding: math.div($fluent-dateview-roller-height - $fluent-dateview-roller-item-height, 2); +$fluent-dateview-roller-padding: math.div($fluent-dateview-roller-height - $fluent-dateview-roller-item-height, 2) !default; .dx-dateview-rollers { width: auto; diff --git a/packages/devextreme-scss/scss/widgets/fluent/diagram/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/diagram/_index.scss index 9b8af08066b7..d7d9b61bed19 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/diagram/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/diagram/_index.scss @@ -15,10 +15,10 @@ @use "../fieldset/sizes" as *; @use "../menu/colors" as *; -$fluent-diagram-toolbar-icon-size: $fluent-base-icon-size; -$diagram-toolbar-colorbutton-border-width: 3px; +$fluent-diagram-toolbar-icon-size: $fluent-base-icon-size !default; +$diagram-toolbar-colorbutton-border-width: 3px !default; -$diagram-toolbox-title-size: 18px; +$diagram-toolbox-title-size: 18px !default; .dx-diagram { border-color: $diagram-border-color; diff --git a/packages/devextreme-scss/scss/widgets/fluent/dropDownButton/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/dropDownButton/_sizes.scss index b6f005a34d5d..b970e8c4cacd 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/dropDownButton/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/dropDownButton/_sizes.scss @@ -6,12 +6,12 @@ $fluent-dropdownbutton-icon-spindown-right-size: null !default; @if $size == "default" { $fluent-dropdownbutton-action-horizontal-padding: 12px !default; - $fluent-dropdownbutton-icon-spindown-size: 24px; + $fluent-dropdownbutton-icon-spindown-size: 24px !default; $fluent-dropdownbutton-icon-spindown-right-size: 16px !default; } @else if $size == "compact" { $fluent-dropdownbutton-action-horizontal-padding: 8px !default; - $fluent-dropdownbutton-icon-spindown-size: 18px; + $fluent-dropdownbutton-icon-spindown-size: 18px !default; $fluent-dropdownbutton-icon-spindown-right-size: 12px !default; } diff --git a/packages/devextreme-scss/scss/widgets/fluent/dropDownEditor/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/dropDownEditor/_index.scss index c21aed8508d0..1a767ca16beb 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/dropDownEditor/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/dropDownEditor/_index.scss @@ -8,17 +8,17 @@ @use "../../base/dropDownEditor"; @use "../../base/dropDownEditor/mixins" as *; -$fluent-dropdowneditor-container-button-size: $fluent-base-icon-size; +$fluent-dropdowneditor-container-button-size: $fluent-base-icon-size !default; $fluent-dropdowneditor-invalid-badge-offset: $fluent-dropdowneditor-container-button-size + - $fluent-invalid-badge-halfhorizontal-padding; + $fluent-invalid-badge-halfhorizontal-padding !default; $fluent-dropdowneditor-invalid-badge-with-clear-offset: $fluent-dropdowneditor-container-button-size * 2 + - $fluent-invalid-badge-halfhorizontal-padding; + $fluent-invalid-badge-halfhorizontal-padding !default; -$fluent-dropdowneditor-invalid-badge-size: $fluent-invalid-badge-size + $fluent-invalid-badge-horizontal-padding; +$fluent-dropdowneditor-invalid-badge-size: $fluent-invalid-badge-size + $fluent-invalid-badge-horizontal-padding !default; @mixin dx-dropdowneditor-button-icon() { width: $fluent-dropdowneditor-container-button-size; diff --git a/packages/devextreme-scss/scss/widgets/fluent/fileManager/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/fileManager/_sizes.scss index c20681b38015..6d827e99f941 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/fileManager/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/fileManager/_sizes.scss @@ -15,7 +15,7 @@ $filemanager-large-icon-size: null !default; $filemanager-progress-panel-title-padding: null !default; $filemanager-progress-box-button-close-margin-top: null !default; -$filemanager-toolbar-height: $fluent-toolbar-height; +$filemanager-toolbar-height: $fluent-toolbar-height !default; @if $size == "default" { $filemanager-toolbar-separator-height: 36px !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent/fileUploader/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/fileUploader/_index.scss index 985d8a670669..feaf4bcd5aa4 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/fileUploader/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/fileUploader/_index.scss @@ -7,8 +7,8 @@ @use "../../base/mixins" as *; @use "../../base/fileUploader"; -$fluent-fileuploader-file-wrapper-border-size: 3px; -$fluent-fileuploader-file-container-boxshadow: 0 1px 3px 0 color.change($base-shadow-color, $alpha: 0.1); +$fluent-fileuploader-file-wrapper-border-size: 3px !default; +$fluent-fileuploader-file-container-boxshadow: 0 1px 3px 0 color.change($base-shadow-color, $alpha: 0.1) !default; .dx-fileuploader-wrapper { padding: $fluent-fileuploader-vertical-padding; diff --git a/packages/devextreme-scss/scss/widgets/fluent/gantt/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/gantt/_index.scss index c6e20ce847e9..06d100805263 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/gantt/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/gantt/_index.scss @@ -9,7 +9,7 @@ @use "../form/sizes" as *; @use "../splitterBar"; -$gantt-successor-background-color: white; +$gantt-successor-background-color: white !default; .dx-gantt { border: 1px solid; diff --git a/packages/devextreme-scss/scss/widgets/fluent/gridBase/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/gridBase/_colors.scss index 2a039e042a8c..7ee20bfdcd22 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/gridBase/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/gridBase/_colors.scss @@ -159,8 +159,8 @@ $datagrid-text-stub-background-image-path: null !default; $datagrid-filter-panel-color: $base-accent !default; $datagrid-draggable-column-text-color: null !default; -$datagrid-text-link-disabled-opacity: $base-disabled-opacity; -$datagrid-icon-link-disabled-opacity: $button-disabled-icon-opacity; +$datagrid-text-link-disabled-opacity: $base-disabled-opacity !default; +$datagrid-icon-link-disabled-opacity: $button-disabled-icon-opacity !default; @if $mode == "light" { @if $color == "blue" { diff --git a/packages/devextreme-scss/scss/widgets/fluent/gridBase/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/gridBase/_index.scss index 26ed9c35829f..27842a42af13 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/gridBase/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/gridBase/_index.scss @@ -28,11 +28,11 @@ @use "layout/cell" as *; @use "layout/aiChat" as *; -$fluent-grid-base-border-hidden: 1px solid transparent; -$fluent-grid-base-row-border: 1px solid transparent; -$fluent-grid-base-drag-header-first-shadow: 0 0 1px $datagrid-drag-header-shadow-color; -$fluent-grid-base-drag-header-second-shadow: 0 1px 3px $datagrid-drag-header-second-shadow-color; -$fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-height; +$fluent-grid-base-border-hidden: 1px solid transparent !default; +$fluent-grid-base-row-border: 1px solid transparent !default; +$fluent-grid-base-drag-header-first-shadow: 0 0 1px $datagrid-drag-header-shadow-color !default; +$fluent-grid-base-drag-header-second-shadow: 0 1px 3px $datagrid-drag-header-second-shadow-color !default; +$fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-height !default; @mixin grid-base($widget-name) { @include fluent-grid-base-cell($widget-name); diff --git a/packages/devextreme-scss/scss/widgets/fluent/gridBase/_variables.scss b/packages/devextreme-scss/scss/widgets/fluent/gridBase/_variables.scss index 1ec5dd5b0875..2c57c3b85b93 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/gridBase/_variables.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/gridBase/_variables.scss @@ -2,9 +2,9 @@ @use "colors" as *; @use "sizes" as *; -$fluent-grid-base-border-color: $datagrid-border-color; -$fluent-grid-base-cell-vertical-padding: math.round(math.div($fluent-grid-base-cell-height - $fluent-grid-base-cell-line-height, 2)); -$fluent-grid-base-cell-padding: $fluent-grid-base-cell-vertical-padding $fluent-grid-base-cell-horizontal-padding; -$fluent-grid-base-header-cell-vertical-padding: math.round(math.div($fluent-grid-base-header-height - $fluent-grid-base-header-line-height, 2)); -$fluent-grid-base-command-select-column-width: $fluent-grid-base-checkbox-size + 2 * $fluent-grid-base-cell-horizontal-padding; -$grid-masterdetail-padding: 16px; +$fluent-grid-base-border-color: $datagrid-border-color !default; +$fluent-grid-base-cell-vertical-padding: math.round(math.div($fluent-grid-base-cell-height - $fluent-grid-base-cell-line-height, 2)) !default; +$fluent-grid-base-cell-padding: $fluent-grid-base-cell-vertical-padding $fluent-grid-base-cell-horizontal-padding !default; +$fluent-grid-base-header-cell-vertical-padding: math.round(math.div($fluent-grid-base-header-height - $fluent-grid-base-header-line-height, 2)) !default; +$fluent-grid-base-command-select-column-width: $fluent-grid-base-checkbox-size + 2 * $fluent-grid-base-cell-horizontal-padding !default; +$grid-masterdetail-padding: 16px !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent/gridBase/layout/aiChat/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/gridBase/layout/aiChat/_sizes.scss index 23463e560ea2..bf760a009072 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/gridBase/layout/aiChat/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/gridBase/layout/aiChat/_sizes.scss @@ -1,3 +1,3 @@ @use "../../../sizes" as *; -$ai-chat-message-icon-size: $fluent-base-icon-size; +$ai-chat-message-icon-size: $fluent-base-icon-size !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent/informer/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/informer/_colors.scss index 8fc917a37748..256a14dca7d3 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/informer/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/informer/_colors.scss @@ -8,11 +8,11 @@ $informer-info-color: $base-text-color !default; $informer-info-background-color: null !default; @if $mode == "light" { - $informer-error-background-color: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: -358deg, $saturation: 0.58%, $lightness: 46.67%); - $informer-info-background-color: color.adjust($base-text-color, $lightness: 74.90%, $space: hsl); + $informer-error-background-color: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: -358deg, $saturation: 0.58%, $lightness: 46.67%) !default; + $informer-info-background-color: color.adjust($base-text-color, $lightness: 74.90%, $space: hsl) !default; } @if $mode == "dark" { - $informer-error-background-color: color.adjust($base-danger, $saturation: -5.06%, $space: hsl, $lightness: -53.53%); - $informer-info-background-color: color.adjust($base-text-color, $lightness: -76.08%, $space: hsl); + $informer-error-background-color: color.adjust($base-danger, $saturation: -5.06%, $space: hsl, $lightness: -53.53%) !default; + $informer-info-background-color: color.adjust($base-text-color, $lightness: -76.08%, $space: hsl) !default; } diff --git a/packages/devextreme-scss/scss/widgets/fluent/list/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/list/_index.scss index 12d1d175891c..21aefb71d99d 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/list/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/list/_index.scss @@ -13,10 +13,10 @@ @use "../radioGroup/colors" as *; @use "../badge"; -$fluent-list-item-border-width: 1px; -$fluent-list-border-width: 1px; -$fluent-list-border: $fluent-list-border-width solid; -$fluent-list-item-border: $fluent-list-item-border-width solid; +$fluent-list-item-border-width: 1px !default; +$fluent-list-border-width: 1px !default; +$fluent-list-border: $fluent-list-border-width solid !default; +$fluent-list-item-border: $fluent-list-item-border-width solid !default; .dx-state-disabled { &.dx-list { diff --git a/packages/devextreme-scss/scss/widgets/fluent/menuBase/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/menuBase/_colors.scss index f55789e57034..1f1279d587f3 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/menuBase/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/menuBase/_colors.scss @@ -1,3 +1,3 @@ @use "../colors" as *; -$menu-item-color-disabled: $base-foreground-disabled; +$menu-item-color-disabled: $base-foreground-disabled !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent/menuBase/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/menuBase/_sizes.scss index 63d09d1d7dbf..dd2ef1a21d2f 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/menuBase/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/menuBase/_sizes.scss @@ -3,7 +3,7 @@ $fluent-menu-item-line-height: null !default; $fluent-menu-item-with-icon-horizontal-padding: null !default; $fluent-menu-horizontal-padding: null !default; -$fluent-menu-icon-to-text-offset: 4px; +$fluent-menu-icon-to-text-offset: 4px !default; @if $size == "default" { $fluent-menu-item-line-height: 20px !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent/pivotGrid/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/pivotGrid/_index.scss index 3871987a599d..0afa3b10b188 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/pivotGrid/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/pivotGrid/_index.scss @@ -32,12 +32,12 @@ $pivotgrid-button-top-padding: $pivotgrid-button-top-padding, ); -$fluent-pivotgrid-headers-font-size: 14px; -$fluent-pivotgrid-area-font-size: 13px; -$fluent-pivotgrid-chevron-icon-size: 20px; +$fluent-pivotgrid-headers-font-size: 14px !default; +$fluent-pivotgrid-area-font-size: 13px !default; +$fluent-pivotgrid-chevron-icon-size: 20px !default; -$fluent-pivotgrid-drag-header-shadow: 0 3px 4px color.change($base-shadow-color, $alpha: 0.15); -$fluent-pivotgridfieldchooser-field-min-height: 36px; +$fluent-pivotgrid-drag-header-shadow: 0 3px 4px color.change($base-shadow-color, $alpha: 0.15) !default; +$fluent-pivotgridfieldchooser-field-min-height: 36px !default; .dx-pivotgrid-fields-container { &.dx-drag { diff --git a/packages/devextreme-scss/scss/widgets/fluent/popup/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/popup/_index.scss index 75423b3fb670..3f1362182fa1 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/popup/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/popup/_index.scss @@ -8,7 +8,7 @@ @use "../../base/popup"; @use "../overlay"; -$fluent-popup-toolbar-label-font-size: $fluent-m-font-size; +$fluent-popup-toolbar-label-font-size: $fluent-m-font-size !default; .dx-popup-wrapper { & > .dx-overlay-content { diff --git a/packages/devextreme-scss/scss/widgets/fluent/progressBar/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/progressBar/_colors.scss index 85165ce798f0..a81d38c91d00 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/progressBar/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/progressBar/_colors.scss @@ -18,9 +18,9 @@ $progressbar-range-disabled-bg: $base-foreground-disabled !default; $progressbar-range-indeterminate-color: $base-accent !default; $progressbar-range-invalid-color: $base-invalid-color !default; -$progressbar-interdeterminate-state-gradient: -90deg, transparent 5%, $progressbar-range-indeterminate-color, transparent 95%; -$progressbar-disabled-interdeterminate-state-gradient: -90deg, transparent 5%, $progressbar-range-disabled-bg, transparent 95%; -$progressbar-invalid-interdeterminate-state-gradient: -90deg, transparent 5%, $progressbar-range-invalid-color, transparent 95%; +$progressbar-interdeterminate-state-gradient: -90deg, transparent 5%, $progressbar-range-indeterminate-color, transparent 95% !default; +$progressbar-disabled-interdeterminate-state-gradient: -90deg, transparent 5%, $progressbar-range-disabled-bg, transparent 95% !default; +$progressbar-invalid-interdeterminate-state-gradient: -90deg, transparent 5%, $progressbar-range-invalid-color, transparent 95% !default; /** * $name 30. Label color diff --git a/packages/devextreme-scss/scss/widgets/fluent/progressBar/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/progressBar/_sizes.scss index 91677287e082..d093147ac5d1 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/progressBar/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/progressBar/_sizes.scss @@ -3,7 +3,7 @@ $progressbar-height: null !default; $progressbar-border-radius: $base-border-radius !default; $progressbar-status-margin-top: null !default; -$progressbar-indeterminate-background-width: 90%; +$progressbar-indeterminate-background-width: 90% !default; @if $size == "default" { $progressbar-height: 4px !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent/recurrenceEditor/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/recurrenceEditor/_index.scss index a3bad1a3542a..cded1ffcecac 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/recurrenceEditor/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/recurrenceEditor/_index.scss @@ -4,9 +4,9 @@ @use "../scheduler/sizes" as *; @use "../../base/recurrenceEditor" as *; -$fluent-recurrence-number-box-margin: 11px; -$fluent-recurrence-button-group-padding: 6px; -$fluent-recurrence-radio-group-margin: 15px; +$fluent-recurrence-number-box-margin: 11px !default; +$fluent-recurrence-button-group-padding: 6px !default; +$fluent-recurrence-radio-group-margin: 15px !default; .dx-recurrence-numberbox-interval { margin-right: $fluent-recurrence-number-box-margin; diff --git a/packages/devextreme-scss/scss/widgets/fluent/scheduler/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/scheduler/_colors.scss index c307c71d772d..edaae60d331c 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/scheduler/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/scheduler/_colors.scss @@ -23,7 +23,6 @@ $scheduler-accent-border-color: $base-border-color !default; * $type color */ $scheduler-appointment-text-color: null !default; -$scheduler-appointment-focus-color: null !default; /** * $name 40. Appointment background color @@ -36,7 +35,7 @@ $scheduler-appointment-base-color: null !default; * $type color */ $scheduler-appointment-start-color: color.change($base-shadow-color, $alpha: 0.3) !default; -$scheduler-appointment-active-color: $button-default-outlined-active-bg; +$scheduler-appointment-active-color: $button-default-outlined-active-bg !default; /** * $name 60. Focused cell color @@ -87,7 +86,7 @@ $header-panel-cell-date: null !default; @if $mode == "light" { $scheduler-appointment-text-color: #000 !default; - $header-panel-cell-date: #424242; + $header-panel-cell-date: #424242 !default; @if $color == "blue" { $scheduler-appointment-base-color: color.adjust($base-accent, $lightness: 48%, $space: hsl) !default; @@ -107,7 +106,7 @@ $header-panel-cell-date: null !default; @if $mode == "dark" { $scheduler-appointment-base-color: color.adjust($base-accent, $lightness: -48%, $space: hsl) !default; $scheduler-appointment-text-color: #fff !default; - $header-panel-cell-date: #adadad; + $header-panel-cell-date: #adadad !default; $scheduler-cell-hover-bg: $base-hover-bg !default; @if $color == "blue" { @@ -122,4 +121,4 @@ $header-panel-cell-date: null !default; } $scheduler-first-month-cell-background-color: color.adjust($scheduler-appointment-base-color, $alpha: -0.85) !default; -$scheduler-appointment-focus-color: $scheduler-appointment-text-color; +$scheduler-appointment-focus-color: $scheduler-appointment-text-color !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent/scheduler/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/scheduler/_index.scss index b7136eab49d5..28f18745f2d9 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/scheduler/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/scheduler/_index.scss @@ -55,13 +55,13 @@ @use "../recurrenceEditor" as *; @use "../scrollable"; -$fluent-scheduler-all-day-table-cell-height: $fluent-scheduler-workspace-date-table-cell-height * 1.5; +$fluent-scheduler-all-day-table-cell-height: $fluent-scheduler-workspace-date-table-cell-height * 1.5 !default; -$fluent-scheduler-month-date-text-size: 14px; +$fluent-scheduler-month-date-text-size: 14px !default; -$scheduler-first-of-month-border: 1px solid; +$scheduler-first-of-month-border: 1px solid !default; -$fluent-scheduler-agenda-time-panel-cell-padding: 8px; +$fluent-scheduler-agenda-time-panel-cell-padding: 8px !default; @include baseScheduler.scheduler-mixin(); diff --git a/packages/devextreme-scss/scss/widgets/fluent/scheduler/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/scheduler/_sizes.scss index 6e37afec4634..88c257b03c0c 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/scheduler/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/scheduler/_sizes.scss @@ -60,7 +60,7 @@ $fluent-scheduler-timeline-date-table-cell-height: 50px !default; */ $scheduler-border-radius: 0 !default; -$fluent-scheduler-navigator-icon-font-size: $fluent-base-icon-size; +$fluent-scheduler-navigator-icon-font-size: $fluent-base-icon-size !default; $fluent-scheduler-appointment-month-text-size: 12px !default; $fluent-scheduler-workspace-info-text-size: 16px !default; $fluent-scheduler-all-day-title-font-size: 12px !default; @@ -90,7 +90,7 @@ $header-panel-time-cell-padding: null !default; $fluent-scheduler-collapsed-all-day-table-cell-height: 32px !default; $header-panel-time-cell-padding: 12px !default; - $header-day-element-height: 26px; + $header-day-element-height: 26px !default; $fluent-scheduler-workspace-date-table-cell-height: 38px !default; $fluent-scheduler-navigator-height: 36px !default; @@ -125,7 +125,7 @@ $header-panel-time-cell-padding: null !default; $fluent-scheduler-appointment-popup-days-of-week-buttons-gap: 12px !default; $fluent-scheduler-appointment-popup-repeat-end-item-height: 32px !default; - $agenda-appointment-title-font-size: 14px; + $agenda-appointment-title-font-size: 14px !default; $fluent-scheduler-appointment-15min-recurrence-padding-right: 14px !default; $fluent-scheduler-appointment-15min-title-line-height: 18px !default; @@ -139,7 +139,7 @@ $header-panel-time-cell-padding: null !default; $fluent-scheduler-collapsed-all-day-table-cell-height: 24px !default; $header-panel-time-cell-padding: 8px !default; - $header-day-element-height: 24px; + $header-day-element-height: 24px !default; $fluent-scheduler-workspace-date-table-cell-height: 28px !default; $fluent-scheduler-navigator-height: 28px !default; @@ -174,7 +174,7 @@ $header-panel-time-cell-padding: null !default; $fluent-scheduler-appointment-popup-days-of-week-buttons-gap: 8px !default; $fluent-scheduler-appointment-popup-repeat-end-item-height: 24px !default; - $agenda-appointment-title-font-size: 13px; + $agenda-appointment-title-font-size: 13px !default; $fluent-scheduler-appointment-15min-recurrence-padding-right: 16px !default; $fluent-scheduler-appointment-15min-title-line-height: 12px !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent/scrollView/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/scrollView/_index.scss index 12a4b458fc80..fa971352b542 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/scrollView/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/scrollView/_index.scss @@ -6,7 +6,7 @@ @use "../scrollable"; @use "../../base/scrollView"; -$scrollview-loading-indicator-size: 42px; +$scrollview-loading-indicator-size: 42px !default; .dx-scrollview-scrollbottom-text, .dx-scrollview-pull-down-text { diff --git a/packages/devextreme-scss/scss/widgets/fluent/scrollable/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/scrollable/_sizes.scss index 993a6b25a95a..0cfcdad10d93 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/scrollable/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/scrollable/_sizes.scss @@ -1,2 +1,2 @@ -$fluent-scrollbar-size-thin: 6px; -$fluent-scrollbar-size: 13px; +$fluent-scrollbar-size-thin: 6px !default; +$fluent-scrollbar-size: 13px !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent/speedDialAction/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/speedDialAction/_index.scss index 4ddec0093191..d1143ea3fcea 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/speedDialAction/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/speedDialAction/_index.scss @@ -5,8 +5,8 @@ @use "../button/colors" as *; @use "../overlay"; -$fluent-fa-button-label-offset: 16px; -$fluent-fa-button-label-padding: 4px 8px; +$fluent-fa-button-label-offset: 16px !default; +$fluent-fa-button-label-padding: 4px 8px !default; @include dx-fa-button-mixin( $fluent-main-fa-button-size, diff --git a/packages/devextreme-scss/scss/widgets/fluent/speedDialAction/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/speedDialAction/_sizes.scss index 8862d4505a19..bfd200a0685b 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/speedDialAction/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/speedDialAction/_sizes.scss @@ -8,13 +8,13 @@ $fluent-fa-button-size: null !default; @if $size == "default" { $fluent-main-fa-button-size: 44px !default; $fluent-fa-button-size: 44px !default; - $fluent-main-fa-button-horizontal-padding: 16px; - $fluent-main-fa-button-label-padding: 0 $fluent-main-fa-button-horizontal-padding 0 8px; + $fluent-main-fa-button-horizontal-padding: 16px !default; + $fluent-main-fa-button-label-padding: 0 $fluent-main-fa-button-horizontal-padding 0 8px !default; } @else if $size == "compact" { $fluent-main-fa-button-size: 32px !default; $fluent-fa-button-size: 32px !default; - $fluent-main-fa-button-horizontal-padding: 12px; - $fluent-main-fa-button-label-padding: 0 $fluent-main-fa-button-horizontal-padding 0 4px; + $fluent-main-fa-button-horizontal-padding: 12px !default; + $fluent-main-fa-button-label-padding: 0 $fluent-main-fa-button-horizontal-padding 0 4px !default; } diff --git a/packages/devextreme-scss/scss/widgets/fluent/splitter/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/splitter/_sizes.scss index a0e0b973b604..94d7ce69c89a 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/splitter/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/splitter/_sizes.scss @@ -1 +1 @@ -$splitter-resize-handle-icon-size: 20px; +$splitter-resize-handle-icon-size: 20px !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent/switch/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/switch/_index.scss index f2dcd883f771..55c05689deca 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/switch/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/switch/_index.scss @@ -5,9 +5,9 @@ @use "../../base/switch"; @use "../../base/switch/mixins" as *; -$fluent-switch-transition: all 0.2s cubic-bezier(0.33, 0, 0.67, 1); -$fluent-switch-handle-on-shadow: 0 0 0 $fluent-switch-shadow-blur-radius color.change($switch-handle-on-bg, $alpha: 0.1); -$fluent-switch-shadow: none; +$fluent-switch-transition: all 0.2s cubic-bezier(0.33, 0, 0.67, 1) !default; +$fluent-switch-handle-on-shadow: 0 0 0 $fluent-switch-shadow-blur-radius color.change($switch-handle-on-bg, $alpha: 0.1) !default; +$fluent-switch-shadow: none !default; @include dx-switch( $fluent-switch-width, diff --git a/packages/devextreme-scss/scss/widgets/fluent/textEditor/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/textEditor/_colors.scss index e5337797a97a..40f6e1def3da 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/textEditor/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/textEditor/_colors.scss @@ -87,7 +87,7 @@ $texteditor-input-border-radius: $base-border-radius !default; $texteditor-label-transition: font-size 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms, transform 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms, - top 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms; + top 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms !default; @if $mode == "light" { $texteditor-outlined-bg: $base-element-bg !default; @@ -141,8 +141,8 @@ $texteditor-filled-bg-hover: $texteditor-filled-bg !default; */ $texteditor-filled-bg-focused: $texteditor-filled-bg !default; -$texteditor-label-color: $texteditor-placeholder-color; -$texteditor-label-color-focused: $base-accent; +$texteditor-label-color: $texteditor-placeholder-color !default; +$texteditor-label-color-focused: $base-accent !default; :root { --dx-texteditor-color-text: #{$texteditor-color}; diff --git a/packages/devextreme-scss/scss/widgets/fluent/textEditor/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/textEditor/_index.scss index 6ef8c31da61a..463672eeeafe 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/textEditor/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/textEditor/_index.scss @@ -12,10 +12,10 @@ @use "../../base/textEditor/mixins" as *; @use "../colorBox/sizes" as *; -$fluent-base-standard-texteditor-input-horizontal-padding: 0; -$fluent-texteditor-invalid-badge-size: $fluent-invalid-badge-size + 2 * $fluent-invalid-badge-horizontal-padding; -$fluent-editor-custom-button-margin: 6px; -$fluent-editor-border-width: 1px; +$fluent-base-standard-texteditor-input-horizontal-padding: 0 !default; +$fluent-texteditor-invalid-badge-size: $fluent-invalid-badge-size + 2 * $fluent-invalid-badge-horizontal-padding !default; +$fluent-editor-custom-button-margin: 6px !default; +$fluent-editor-border-width: 1px !default; @mixin texteditor-outlined-styling() { background-color: $texteditor-outlined-bg; diff --git a/packages/devextreme-scss/scss/widgets/fluent/tooltip/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/tooltip/_sizes.scss index 6bd67df0c85a..80bebbfef54f 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/tooltip/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/tooltip/_sizes.scss @@ -2,7 +2,7 @@ @use "../sizes" as *; $fluent-tooltip-padding: null !default; -$fluent-tooltip-font-size: 12px; +$fluent-tooltip-font-size: 12px !default; $fluent-tooltip-arrow-border-radius: 2px !default; $fluent-tooltip-shadow: 0 0 2px 0 $base-dropdown-shadow-color1 !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent/treeView/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/treeView/_sizes.scss index 8f2518ae8958..4b44a49fe36a 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/treeView/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/treeView/_sizes.scss @@ -3,16 +3,16 @@ $fluent-treeview-toggle-item-width: null !default; $fluent-treeview-item-height: null !default; $fluent-checkbox-container-size: null !default; -$fluent-treeview-container-with-border-offset: 8px; +$fluent-treeview-container-with-border-offset: 8px !default; $fluent-treeview-item-element-gap: 8px !default; -$fluent-treeview-item-margin: 1px 0; -$fluent-treeview-item-border-radius: 4px; -$fluent-treeview-border-padding: 1px; +$fluent-treeview-item-margin: 1px 0 !default; +$fluent-treeview-item-border-radius: 4px !default; +$fluent-treeview-border-padding: 1px !default; $fluent-treeview-container-padding: $fluent-treeview-border-padding $fluent-treeview-border-padding $fluent-treeview-border-padding - $fluent-treeview-container-with-border-offset; + $fluent-treeview-container-with-border-offset !default; $fluent-treeview-checkbox-offset: null !default; $fluent-select-all-item-padding: null !default; @@ -32,7 +32,7 @@ $fluent-select-all-item-border-visible-padding: 26px !default; $fluent-treeview-item-padding: 12px $fluent-treeview-item-side-padding !default; $fluent-treeview-load-indicator-size: 20px !default; $fluent-treeview-searchbox-margin-bottom: 8px !default; - $fluent-treeview-search-editor-height: 48px; + $fluent-treeview-search-editor-height: 48px !default; } @else if $size == "compact" { @@ -44,5 +44,5 @@ $fluent-select-all-item-border-visible-padding: 26px !default; $fluent-treeview-item-padding: 10px $fluent-treeview-item-side-padding !default; $fluent-treeview-load-indicator-size: 16px !default; $fluent-treeview-searchbox-margin-bottom: 4px !default; - $fluent-treeview-search-editor-height: 32px; + $fluent-treeview-search-editor-height: 32px !default; } diff --git a/packages/devextreme-scss/scss/widgets/generic/_sizes.scss b/packages/devextreme-scss/scss/widgets/generic/_sizes.scss index bfcfe2484d0a..3ad8c9f221f2 100644 --- a/packages/devextreme-scss/scss/widgets/generic/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/generic/_sizes.scss @@ -69,7 +69,7 @@ $generic-base-inline-borderedwidget-bottom-padding: $generic-base-inline-widget-bottom-padding - $generic-base-border-width !default; -$generic-treeview-search-editor-height: math.round($generic-base-line-height * $generic-base-font-size) + $generic-base-inline-borderedwidget-top-padding + $generic-base-inline-borderedwidget-bottom-padding + 2 * $generic-base-border-width; +$generic-treeview-search-editor-height: math.round($generic-base-line-height * $generic-base-font-size) + $generic-base-inline-borderedwidget-top-padding + $generic-base-inline-borderedwidget-bottom-padding + 2 * $generic-base-border-width !default; :root { --dx-component-height: #{$generic-base-inline-widget-height}; diff --git a/packages/devextreme-scss/scss/widgets/generic/cardView/_sizes.scss b/packages/devextreme-scss/scss/widgets/generic/cardView/_sizes.scss index e80841f925e5..561619679484 100644 --- a/packages/devextreme-scss/scss/widgets/generic/cardView/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/generic/cardView/_sizes.scss @@ -190,8 +190,8 @@ $cardview-generic-header-panel__item--disabled__sort-index-text-weight: $cardvie */ $cardview-generic-header-panel__item--dragged-text-weight: $cardview-generic-header-panel__item-text-weight !default; -$cardview-generic-header-item__sort-indicator__border-size: null; -$cardview-generic-header-item__sort-indicator__border-radius: null; +$cardview-generic-header-item__sort-indicator__border-size: null !default; +$cardview-generic-header-item__sort-indicator__border-radius: null !default; // #endregion diff --git a/packages/devextreme-scss/scss/widgets/generic/checkBox/_index.scss b/packages/devextreme-scss/scss/widgets/generic/checkBox/_index.scss index 740205c5095b..9a808cc9f92a 100644 --- a/packages/devextreme-scss/scss/widgets/generic/checkBox/_index.scss +++ b/packages/devextreme-scss/scss/widgets/generic/checkBox/_index.scss @@ -4,7 +4,7 @@ @use "../../base/checkBox"; @use "../../base/checkBox/mixins" as *; -$generic-checkbox-disable-opacity: 0.4; +$generic-checkbox-disable-opacity: 0.4 !default; .dx-checkbox { line-height: 0; diff --git a/packages/devextreme-scss/scss/widgets/generic/colorView/_index.scss b/packages/devextreme-scss/scss/widgets/generic/colorView/_index.scss index 05284c86677b..d304e8f7c8d0 100644 --- a/packages/devextreme-scss/scss/widgets/generic/colorView/_index.scss +++ b/packages/devextreme-scss/scss/widgets/generic/colorView/_index.scss @@ -4,8 +4,8 @@ @use "../../base/colorView"; @include dx-base-colorview-styles($colorview-handle-color, $colorview-handle-border-color); -$generic-colorview-alpha-width: $generic-colorview-palette-width + 4; -$generic-colorview-hue-scale-height: $generic-colorview-palette-height; +$generic-colorview-alpha-width: $generic-colorview-palette-width + 4 !default; +$generic-colorview-hue-scale-height: $generic-colorview-palette-height !default; .dx-colorview-container { width: $generic-colorview-container-width; diff --git a/packages/devextreme-scss/scss/widgets/generic/common/_mixins.scss b/packages/devextreme-scss/scss/widgets/generic/common/_mixins.scss index c4e2389d750a..004e85bb20cb 100644 --- a/packages/devextreme-scss/scss/widgets/generic/common/_mixins.scss +++ b/packages/devextreme-scss/scss/widgets/generic/common/_mixins.scss @@ -6,10 +6,10 @@ @use "../../base/validation" as *; @use "../list/sizes" as *; -$badge-invalid-bg: $base-invalid-color; +$badge-invalid-bg: $base-invalid-color !default; $generic-dropdownlist-min-height: $generic-base-font-size * $generic-base-line-height + - 2 * $generic-list-item-vertical-padding; + 2 * $generic-list-item-vertical-padding !default; @mixin dx-base-typography() { @include dx-base-typography-mixin( diff --git a/packages/devextreme-scss/scss/widgets/generic/contextMenu/_index.scss b/packages/devextreme-scss/scss/widgets/generic/contextMenu/_index.scss index 4fe335a1b57b..5dddf82d1e49 100644 --- a/packages/devextreme-scss/scss/widgets/generic/contextMenu/_index.scss +++ b/packages/devextreme-scss/scss/widgets/generic/contextMenu/_index.scss @@ -8,7 +8,7 @@ @use "../overlay"; @use "../menuBase" as *; // need as private -$generic-menu-popup-border: 1px solid; +$generic-menu-popup-border: 1px solid !default; .dx-context-menu { color: $menu-color; diff --git a/packages/devextreme-scss/scss/widgets/generic/dateView/_index.scss b/packages/devextreme-scss/scss/widgets/generic/dateView/_index.scss index f769f5703721..9a546976aa44 100644 --- a/packages/devextreme-scss/scss/widgets/generic/dateView/_index.scss +++ b/packages/devextreme-scss/scss/widgets/generic/dateView/_index.scss @@ -5,7 +5,7 @@ @use "../../base/dateView"; @use "../scrollable"; -$generic-dateview-roller-padding: math.div($generic-dateview-roller-height - $generic-dateview-roller-item-height, 2); +$generic-dateview-roller-padding: math.div($generic-dateview-roller-height - $generic-dateview-roller-item-height, 2) !default; .dx-dateview-rollers { width: auto; diff --git a/packages/devextreme-scss/scss/widgets/generic/diagram/_index.scss b/packages/devextreme-scss/scss/widgets/generic/diagram/_index.scss index db120bcabaf2..f226c1eabec4 100644 --- a/packages/devextreme-scss/scss/widgets/generic/diagram/_index.scss +++ b/packages/devextreme-scss/scss/widgets/generic/diagram/_index.scss @@ -14,11 +14,11 @@ @use "../fieldset/sizes" as *; @use "../menu/colors" as *; -$generic-diagram-toolbar-icon-size: $generic-base-icon-size; -$diagram-toolbar-colorbutton-border-width: 3px; -$diagram-touchbar-item-padding: 5px; +$generic-diagram-toolbar-icon-size: $generic-base-icon-size !default; +$diagram-toolbar-colorbutton-border-width: 3px !default; +$diagram-touchbar-item-padding: 5px !default; -$diagram-toolbox-title-size: 12px; +$diagram-toolbox-title-size: 12px !default; .dx-diagram { border-color: $diagram-border-color; diff --git a/packages/devextreme-scss/scss/widgets/generic/dropDownEditor/_index.scss b/packages/devextreme-scss/scss/widgets/generic/dropDownEditor/_index.scss index e9ba41d0d338..6656681ab031 100644 --- a/packages/devextreme-scss/scss/widgets/generic/dropDownEditor/_index.scss +++ b/packages/devextreme-scss/scss/widgets/generic/dropDownEditor/_index.scss @@ -8,20 +8,20 @@ @use "../../base/icon_fonts" as *; @use "../../base/dropDownEditor"; -$generic-dropdowneditor-container-button-size: $generic-base-inline-borderedwidget-inner-size; -$generic-dropdowneditor-button-offset: $generic-base-border-width; +$generic-dropdowneditor-container-button-size: $generic-base-inline-borderedwidget-inner-size !default; +$generic-dropdowneditor-button-offset: $generic-base-border-width !default; $generic-dropdowneditor-button-size: $generic-dropdowneditor-container-button-size - - $generic-dropdowneditor-button-offset * 2; + $generic-dropdowneditor-button-offset * 2 !default; $generic-dropdowneditor-invalid-badge-offset: $generic-dropdowneditor-container-button-size + - $generic-invalid-badge-halfhorizontal-padding; + $generic-invalid-badge-halfhorizontal-padding !default; -$generic-dropdowneditor-invalid-badge-with-clear-offset: $generic-dropdowneditor-container-button-size * 2; +$generic-dropdowneditor-invalid-badge-with-clear-offset: $generic-dropdowneditor-container-button-size * 2 !default; -$generic-dropdowneditor-invalid-badge-size: $generic-invalid-badge-size + $generic-invalid-badge-horizontal-padding; +$generic-dropdowneditor-invalid-badge-size: $generic-invalid-badge-size + $generic-invalid-badge-horizontal-padding !default; @mixin dx-dropdowneditor-button-icon() { width: $generic-dropdowneditor-button-size; diff --git a/packages/devextreme-scss/scss/widgets/generic/fieldset/_index.scss b/packages/devextreme-scss/scss/widgets/generic/fieldset/_index.scss index 0ea3fc18ff59..a6c5d42e5a62 100644 --- a/packages/devextreme-scss/scss/widgets/generic/fieldset/_index.scss +++ b/packages/devextreme-scss/scss/widgets/generic/fieldset/_index.scss @@ -11,8 +11,8 @@ @use "../slider/sizes" as *; @use "../../base/fieldset"; -$generic-field-min-height: $generic-base-inline-widget-height; -$generic-fieldset-attention-icon-offset: $generic-base-inline-horizontal-padding + $generic-invalid-badge-size; +$generic-field-min-height: $generic-base-inline-widget-height !default; +$generic-fieldset-attention-icon-offset: $generic-base-inline-horizontal-padding + $generic-invalid-badge-size !default; @mixin dx-fieldset-styling() { .dx-field { diff --git a/packages/devextreme-scss/scss/widgets/generic/fileManager/_sizes.scss b/packages/devextreme-scss/scss/widgets/generic/fileManager/_sizes.scss index 7e82ab74502a..ff43e8aea566 100644 --- a/packages/devextreme-scss/scss/widgets/generic/fileManager/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/generic/fileManager/_sizes.scss @@ -4,7 +4,7 @@ $filemanager-toolbar-separator-height: null !default; $filemanager-toolbar-viewmode-width: null !default; $filemanager-toolbar-viewmode-padding: null !default; -$filemanager-toolbar-height: $generic-toolbar-height + 12px; +$filemanager-toolbar-height: $generic-toolbar-height + 12px !default; $filemanager-breadcrumbs-item-padding-top: null !default; $filemanager-breadcrumbs-item-padding-bottom: null !default; $filemanager-details-view-checkbox-column-width: null !default; diff --git a/packages/devextreme-scss/scss/widgets/generic/fileUploader/_index.scss b/packages/devextreme-scss/scss/widgets/generic/fileUploader/_index.scss index db8ac6f2827f..d9c1d0c3c4b5 100644 --- a/packages/devextreme-scss/scss/widgets/generic/fileUploader/_index.scss +++ b/packages/devextreme-scss/scss/widgets/generic/fileUploader/_index.scss @@ -6,7 +6,7 @@ @use "../../base/mixins" as *; @use "../../base/fileUploader"; -$generic-fileuploader-file-wrapper-border-size: 3px; +$generic-fileuploader-file-wrapper-border-size: 3px !default; .dx-fileuploader-wrapper { padding: $generic-fileuploader-vertical-padding; diff --git a/packages/devextreme-scss/scss/widgets/generic/gantt/_index.scss b/packages/devextreme-scss/scss/widgets/generic/gantt/_index.scss index aab84e869c3f..5ee45c681393 100644 --- a/packages/devextreme-scss/scss/widgets/generic/gantt/_index.scss +++ b/packages/devextreme-scss/scss/widgets/generic/gantt/_index.scss @@ -8,7 +8,7 @@ @use "../toolbar/sizes" as *; @use "../splitterBar"; -$gantt-successor-background-color: white; +$gantt-successor-background-color: white !default; .dx-gantt { border: 1px solid; diff --git a/packages/devextreme-scss/scss/widgets/generic/gridBase/_index.scss b/packages/devextreme-scss/scss/widgets/generic/gridBase/_index.scss index ea37ef5d4fc7..3a3ba9008d53 100644 --- a/packages/devextreme-scss/scss/widgets/generic/gridBase/_index.scss +++ b/packages/devextreme-scss/scss/widgets/generic/gridBase/_index.scss @@ -26,15 +26,15 @@ @use "../overlay"; @use "../pagination"; -$generic-grid-base-border-hidden: 1px solid transparent; -$generic-grid-base-row-border: 1px solid transparent; -$generic-grid-base-drag-header-border: 1px solid; -$generic-grid-base-drag-header-first-shadow: 0 0 1px $datagrid-drag-header-shadow-color; -$generic-grid-base-drag-header-second-shadow: 0 1px 3px $datagrid-drag-header-second-shadow-color; -$generic-grid-base-checkbox-icon-size: 16px; -$generic-grid-base-checkbox-indeterminate-icon-size: 6px; -$generic-grid-base-group-panel-message-line-height: $generic-button-text-line-height; -$generic-grid-base-cell-input-height: math.round($generic-base-line-height * $generic-base-font-size) + 2 * $generic-grid-base-cell-padding; +$generic-grid-base-border-hidden: 1px solid transparent !default; +$generic-grid-base-row-border: 1px solid transparent !default; +$generic-grid-base-drag-header-border: 1px solid !default; +$generic-grid-base-drag-header-first-shadow: 0 0 1px $datagrid-drag-header-shadow-color !default; +$generic-grid-base-drag-header-second-shadow: 0 1px 3px $datagrid-drag-header-second-shadow-color !default; +$generic-grid-base-checkbox-icon-size: 16px !default; +$generic-grid-base-checkbox-indeterminate-icon-size: 6px !default; +$generic-grid-base-group-panel-message-line-height: $generic-button-text-line-height !default; +$generic-grid-base-cell-input-height: math.round($generic-base-line-height * $generic-base-font-size) + 2 * $generic-grid-base-cell-padding !default; @mixin dx-set-checkbox-border-color-as-background() { @if $generic-color-postfix == ".contrast" { diff --git a/packages/devextreme-scss/scss/widgets/generic/gridBase/_sizes.scss b/packages/devextreme-scss/scss/widgets/generic/gridBase/_sizes.scss index 2ce6b729b277..9ab006263cd5 100644 --- a/packages/devextreme-scss/scss/widgets/generic/gridBase/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/generic/gridBase/_sizes.scss @@ -26,8 +26,8 @@ $generic-grid-base-command-ai-text-content-padding: null !default; $generic-grid-base-command-ai-header-button-padding: null !default; $generic-grid-base-command-ai-header-button-size: null !default; -$datagrid-text-link-disabled-opacity: $base-disabled-opacity; -$datagrid-icon-link-disabled-opacity: 0.6; +$datagrid-text-link-disabled-opacity: $base-disabled-opacity !default; +$datagrid-icon-link-disabled-opacity: 0.6 !default; $generic-grid-base-ai-prompt-editor-progressbar-height: 4px !default; @if $size == "default" { @@ -47,8 +47,8 @@ $generic-grid-base-ai-prompt-editor-progressbar-height: 4px !default; $generic-grid-base-treeview-search-margin: 10px !default; $generic-command-edit-icon-size: 18px !default; $generic-grid-base-nodata-font-size: 17px !default; - $generic-grid-base-checkbox-padding-bottom: 2px; - $generic-grid-base-treeview-select-all-item-offset: 34px; + $generic-grid-base-checkbox-padding-bottom: 2px !default; + $generic-grid-base-treeview-select-all-item-offset: 34px !default; $generic-grid-base-command-ai-chatsparkleoutline-icon-size: 18px !default; $generic-grid-base-command-ai-text-content-padding: $generic-grid-base-command-ai-chatsparkleoutline-icon-size + 8px !default; $generic-grid-base-command-ai-header-button-padding: 6px !default; @@ -72,8 +72,8 @@ $generic-grid-base-ai-prompt-editor-progressbar-height: 4px !default; $generic-grid-base-treeview-search-margin: 5px !default; $generic-command-edit-icon-size: 14px !default; $generic-grid-base-nodata-font-size: 14px !default; - $generic-grid-base-checkbox-padding-bottom: 0; - $generic-grid-base-treeview-select-all-item-offset: 28px; + $generic-grid-base-checkbox-padding-bottom: 0 !default; + $generic-grid-base-treeview-select-all-item-offset: 28px !default; $generic-grid-base-command-ai-chatsparkleoutline-icon-size: 14px !default; $generic-grid-base-command-ai-text-content-padding: $generic-grid-base-command-ai-chatsparkleoutline-icon-size + 6px !default; $generic-grid-base-command-ai-header-button-padding: 5px !default; diff --git a/packages/devextreme-scss/scss/widgets/generic/gridBase/_variables.scss b/packages/devextreme-scss/scss/widgets/generic/gridBase/_variables.scss index 4d9254181e0a..58d431d63c19 100644 --- a/packages/devextreme-scss/scss/widgets/generic/gridBase/_variables.scss +++ b/packages/devextreme-scss/scss/widgets/generic/gridBase/_variables.scss @@ -1 +1 @@ -$grid-masterdetail-padding: 20px; +$grid-masterdetail-padding: 20px !default; diff --git a/packages/devextreme-scss/scss/widgets/generic/gridBase/layout/aiChat/_sizes.scss b/packages/devextreme-scss/scss/widgets/generic/gridBase/layout/aiChat/_sizes.scss index fa9ad84197d8..0b43b77902d3 100644 --- a/packages/devextreme-scss/scss/widgets/generic/gridBase/layout/aiChat/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/generic/gridBase/layout/aiChat/_sizes.scss @@ -1,3 +1,3 @@ @use "../../../sizes" as *; -$ai-chat-message-icon-size: $generic-base-icon-size; +$ai-chat-message-icon-size: $generic-base-icon-size !default; diff --git a/packages/devextreme-scss/scss/widgets/generic/htmlEditor/_sizes.scss b/packages/devextreme-scss/scss/widgets/generic/htmlEditor/_sizes.scss index b19b96465f4e..85381b1e0bfc 100644 --- a/packages/devextreme-scss/scss/widgets/generic/htmlEditor/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/generic/htmlEditor/_sizes.scss @@ -10,15 +10,15 @@ $generic-aidialog-content-padding: null !default; @if $size == "default" { $generic-toolbar-size-editor-width: 105px !default; $generic-html-editor-add-image-dialog-fileuploader-padding: 60px 20px !default; - $generic-aidialog-selects-gap: 10px; - $generic-aidialog-content-gap: 20px; - $generic-aidialog-content-padding: 20px; + $generic-aidialog-selects-gap: 10px !default; + $generic-aidialog-content-gap: 20px !default; + $generic-aidialog-content-padding: 20px !default; } @else if $size == "compact" { $generic-toolbar-size-editor-width: 80px !default; $generic-html-editor-add-image-dialog-fileuploader-padding: 40px 20px !default; - $generic-aidialog-selects-gap: 5px; - $generic-aidialog-content-gap: 10px; - $generic-aidialog-content-padding: 10px; + $generic-aidialog-selects-gap: 5px !default; + $generic-aidialog-content-gap: 10px !default; + $generic-aidialog-content-padding: 10px !default; } diff --git a/packages/devextreme-scss/scss/widgets/generic/informer/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/informer/_colors.scss index 573e09684108..20a972f1246b 100644 --- a/packages/devextreme-scss/scss/widgets/generic/informer/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/generic/informer/_colors.scss @@ -8,57 +8,57 @@ $informer-info-color: null !default; $informer-info-background-color: null !default; @if $color == "carmine" { - $informer-error-color: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: -351deg, $saturation: -26.91%, $lightness: -5.49%); - $informer-error-background-color: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: -347deg, $saturation: -26.69%, $lightness: 33.14%); - $informer-info-color: $base-text-color; - $informer-info-background-color: color.adjust($base-text-color, $lightness: 72.16%, $space: hsl); + $informer-error-color: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: -351deg, $saturation: -26.91%, $lightness: -5.49%) !default; + $informer-error-background-color: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: -347deg, $saturation: -26.69%, $lightness: 33.14%) !default; + $informer-info-color: $base-text-color !default; + $informer-info-background-color: color.adjust($base-text-color, $lightness: 72.16%, $space: hsl) !default; } @if $color == "contrast" { - $informer-error-color: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: 2deg, $saturation: -16.93%, $lightness: -6.08%); - $informer-error-background-color: rgba(212, 63, 58, 0.1); - $informer-info-color: color.adjust($base-text-color, $lightness: -12.94%, $space: hsl); - $informer-info-background-color: color.adjust($base-text-color, $lightness: -68.63%, $space: hsl); + $informer-error-color: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: 2deg, $saturation: -16.93%, $lightness: -6.08%) !default; + $informer-error-background-color: rgba(212, 63, 58, 0.1) !default; + $informer-info-color: color.adjust($base-text-color, $lightness: -12.94%, $space: hsl) !default; + $informer-info-background-color: color.adjust($base-text-color, $lightness: -68.63%, $space: hsl) !default; } @if $color == "dark" { - $informer-error-color: $base-danger; - $informer-error-background-color: rgba(212, 63, 58, 0.1); - $informer-info-color: $base-text-color; - $informer-info-background-color: color.adjust($base-text-color, $lightness: -55.69%, $space: hsl); + $informer-error-color: $base-danger !default; + $informer-error-background-color: rgba(212, 63, 58, 0.1) !default; + $informer-info-color: $base-text-color !default; + $informer-info-background-color: color.adjust($base-text-color, $lightness: -55.69%, $space: hsl) !default; } @if $color == "darkmoon" { - $informer-error-color: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: -342deg, $saturation: -28.85%, $lightness: -6.67%); - $informer-error-background-color: rgba(212, 63, 58, 0.1); - $informer-info-color: color.adjust($base-text-color, $lightness: -12.94%, $space: hsl); - $informer-info-background-color: color.adjust($base-text-color, $lightness: -68.63%, $space: hsl); + $informer-error-color: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: -342deg, $saturation: -28.85%, $lightness: -6.67%) !default; + $informer-error-background-color: rgba(212, 63, 58, 0.1) !default; + $informer-info-color: color.adjust($base-text-color, $lightness: -12.94%, $space: hsl) !default; + $informer-info-background-color: color.adjust($base-text-color, $lightness: -68.63%, $space: hsl) !default; } @if $color == "darkviolet" { - $informer-error-color: $base-danger; - $informer-error-background-color: rgba(212, 63, 58, 0.1); - $informer-info-color: extcolor.adjust-if-not-achromatic($color: $base-text-color, $hue: -210deg, $saturation: -11.11%, $lightness: -9.41%); - $informer-info-background-color: extcolor.adjust-if-not-achromatic($color: $base-text-color, $hue: -210deg, $saturation: -11.11%, $lightness: -65.10%); + $informer-error-color: $base-danger !default; + $informer-error-background-color: rgba(212, 63, 58, 0.1) !default; + $informer-info-color: extcolor.adjust-if-not-achromatic($color: $base-text-color, $hue: -210deg, $saturation: -11.11%, $lightness: -9.41%) !default; + $informer-info-background-color: extcolor.adjust-if-not-achromatic($color: $base-text-color, $hue: -210deg, $saturation: -11.11%, $lightness: -65.10%) !default; } @if $color == "greenmist" { - $informer-error-color: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: -351deg, $saturation: -27.05%, $lightness: -4.90%); - $informer-error-background-color: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: -348deg, $saturation: -26.83%, $lightness: 33.73%); - $informer-info-color: extcolor.adjust-if-not-achromatic($color: $base-text-color, $hue: -191deg, $saturation: -32.77%, $lightness: -3.33%); - $informer-info-background-color: extcolor.adjust-if-not-achromatic($color: $base-text-color, $hue: -191deg, $saturation: -32.77%, $lightness: 68.82%); + $informer-error-color: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: -351deg, $saturation: -27.05%, $lightness: -4.90%) !default; + $informer-error-background-color: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: -348deg, $saturation: -26.83%, $lightness: 33.73%) !default; + $informer-info-color: extcolor.adjust-if-not-achromatic($color: $base-text-color, $hue: -191deg, $saturation: -32.77%, $lightness: -3.33%) !default; + $informer-info-background-color: extcolor.adjust-if-not-achromatic($color: $base-text-color, $hue: -191deg, $saturation: -32.77%, $lightness: 68.82%) !default; } @if $color == "light" { - $informer-error-color: $base-danger; - $informer-error-background-color: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: 4deg, $saturation: 0.22%, $lightness: 38.63%); - $informer-info-color: $base-text-color; - $informer-info-background-color: color.adjust($base-text-color, $lightness: 72.16%, $space: hsl); + $informer-error-color: $base-danger !default; + $informer-error-background-color: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: 4deg, $saturation: 0.22%, $lightness: 38.63%) !default; + $informer-info-color: $base-text-color !default; + $informer-info-background-color: color.adjust($base-text-color, $lightness: 72.16%, $space: hsl) !default; } @if $color == "softblue" { - $informer-error-color: $base-danger; - $informer-error-background-color: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: 4deg, $saturation: 0.22%, $lightness: 38.63%); - $informer-info-color: $base-text-color; - $informer-info-background-color: color.adjust($base-text-color, $lightness: 72.16%, $space: hsl); + $informer-error-color: $base-danger !default; + $informer-error-background-color: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: 4deg, $saturation: 0.22%, $lightness: 38.63%) !default; + $informer-info-color: $base-text-color !default; + $informer-info-background-color: color.adjust($base-text-color, $lightness: 72.16%, $space: hsl) !default; } diff --git a/packages/devextreme-scss/scss/widgets/generic/list/_index.scss b/packages/devextreme-scss/scss/widgets/generic/list/_index.scss index c1dcca0e4a38..ed6b8aed869c 100644 --- a/packages/devextreme-scss/scss/widgets/generic/list/_index.scss +++ b/packages/devextreme-scss/scss/widgets/generic/list/_index.scss @@ -13,9 +13,9 @@ @use "../../base/list/mixins" as *; @use "../badge"; -$generic-list-border: $generic-list-border-width solid; -$generic-list-item-border: $generic-list-item-border-width solid; -$generic-list-search-editor-height: math.round($generic-base-line-height * $generic-base-font-size) + $generic-base-inline-borderedwidget-top-padding + $generic-base-inline-borderedwidget-bottom-padding + 2 * $generic-base-border-width; +$generic-list-border: $generic-list-border-width solid !default; +$generic-list-item-border: $generic-list-item-border-width solid !default; +$generic-list-search-editor-height: math.round($generic-base-line-height * $generic-base-font-size) + $generic-base-inline-borderedwidget-top-padding + $generic-base-inline-borderedwidget-bottom-padding + 2 * $generic-base-border-width !default; .dx-list-item-chevron { @include dx-icon(chevronnext); diff --git a/packages/devextreme-scss/scss/widgets/generic/menuBase/_index.scss b/packages/devextreme-scss/scss/widgets/generic/menuBase/_index.scss index c000cb70ef14..fbfba161c754 100644 --- a/packages/devextreme-scss/scss/widgets/generic/menuBase/_index.scss +++ b/packages/devextreme-scss/scss/widgets/generic/menuBase/_index.scss @@ -8,11 +8,11 @@ @use "../../base/mixins" as *; @use "../../base/menuBase"; -$generic-menu-item-padding-increased: $generic-menu-item-padding-base + 2px; -$generic-menu-item-padding-reduced: $generic-menu-item-padding-base - 2px; -$generic-menu-arrow-image-size: 7px; +$generic-menu-item-padding-increased: $generic-menu-item-padding-base + 2px !default; +$generic-menu-item-padding-reduced: $generic-menu-item-padding-base - 2px !default; +$generic-menu-arrow-image-size: 7px !default; -$generic-menu-popup-border: 1px solid; +$generic-menu-popup-border: 1px solid !default; .dx-menu-item { color: $menu-color; diff --git a/packages/devextreme-scss/scss/widgets/generic/pivotGrid/_sizes.scss b/packages/devextreme-scss/scss/widgets/generic/pivotGrid/_sizes.scss index a6c667cfc55b..f1c91857cdf8 100644 --- a/packages/devextreme-scss/scss/widgets/generic/pivotGrid/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/generic/pivotGrid/_sizes.scss @@ -16,7 +16,7 @@ $pivotgrid-empty-area-text-padding: null !default; $pivotgrid-common-top-bottom-padding: 7px !default; $pivotgrid-field-indicators-offset: 6px !default; $pivotgrid-indicators-line-height: 19px !default; - $pivotgrid-button-top-padding: 12px; + $pivotgrid-button-top-padding: 12px !default; $pivotgrid-empty-area-text-padding: 7px !default; } @@ -27,6 +27,6 @@ $pivotgrid-empty-area-text-padding: null !default; $pivotgrid-common-top-bottom-padding: 5px !default; $pivotgrid-field-indicators-offset: 4px !default; $pivotgrid-indicators-line-height: 16px !default; - $pivotgrid-button-top-padding: 8px; + $pivotgrid-button-top-padding: 8px !default; $pivotgrid-empty-area-text-padding: 5px !default; } diff --git a/packages/devextreme-scss/scss/widgets/generic/popup/_index.scss b/packages/devextreme-scss/scss/widgets/generic/popup/_index.scss index 584ad3d8053d..f7cfb912957a 100644 --- a/packages/devextreme-scss/scss/widgets/generic/popup/_index.scss +++ b/packages/devextreme-scss/scss/widgets/generic/popup/_index.scss @@ -11,8 +11,8 @@ @use "../../base/popup"; @use "../overlay"; -$generic-popup-toolbar-height: $generic-base-inline-widget-height; -$generic-popup-toolbar-label-font-size: $generic-m-font-size; +$generic-popup-toolbar-height: $generic-base-inline-widget-height !default; +$generic-popup-toolbar-label-font-size: $generic-m-font-size !default; .dx-popup-wrapper { & > .dx-overlay-content { diff --git a/packages/devextreme-scss/scss/widgets/generic/progressBar/_index.scss b/packages/devextreme-scss/scss/widgets/generic/progressBar/_index.scss index ed0a16ca0296..0d42ade93bae 100644 --- a/packages/devextreme-scss/scss/widgets/generic/progressBar/_index.scss +++ b/packages/devextreme-scss/scss/widgets/generic/progressBar/_index.scss @@ -4,11 +4,11 @@ @use "../../base/mixins" as *; @use "../../base/progressBar"; -$generic-bar-height: 6px; -$generic-background-width: 90%; -$generic-progressbar-border-radius: 2px; -$generic-progressbar-interdeterminate-state-gradient: -90deg, transparent 5%, $progressbar-range-indeterminate-color, transparent 95%; -$generic-progress-bar-border: 1px solid; +$generic-bar-height: 6px !default; +$generic-background-width: 90% !default; +$generic-progressbar-border-radius: 2px !default; +$generic-progressbar-interdeterminate-state-gradient: -90deg, transparent 5%, $progressbar-range-indeterminate-color, transparent 95% !default; +$generic-progress-bar-border: 1px solid !default; .dx-progressbar-container { height: $generic-bar-height; diff --git a/packages/devextreme-scss/scss/widgets/generic/rangeSlider/_index.scss b/packages/devextreme-scss/scss/widgets/generic/rangeSlider/_index.scss index d437e5903f72..5e412c3672ef 100644 --- a/packages/devextreme-scss/scss/widgets/generic/rangeSlider/_index.scss +++ b/packages/devextreme-scss/scss/widgets/generic/rangeSlider/_index.scss @@ -2,7 +2,7 @@ @use "sizes" as *; @use "../../base/rangeSlider"; -$generic-slider-handle-margin: -7px; +$generic-slider-handle-margin: -7px !default; .dx-rangeslider-start-handle { margin-inline-start: $generic-slider-handle-margin; diff --git a/packages/devextreme-scss/scss/widgets/generic/recurrenceEditor/_index.scss b/packages/devextreme-scss/scss/widgets/generic/recurrenceEditor/_index.scss index 8ae754ace0b8..58c2cc65dbce 100644 --- a/packages/devextreme-scss/scss/widgets/generic/recurrenceEditor/_index.scss +++ b/packages/devextreme-scss/scss/widgets/generic/recurrenceEditor/_index.scss @@ -3,7 +3,7 @@ @use "../scheduler/sizes" as *; @use "../../base/recurrenceEditor" as *; -$generic-recurrence-number-box-margin-right: 11px; +$generic-recurrence-number-box-margin-right: 11px !default; .dx-recurrence-editor-container { .dx-recurrence-numberbox-interval { diff --git a/packages/devextreme-scss/scss/widgets/generic/scheduler/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/scheduler/_colors.scss index 008b2b871d91..5d2c62ec5c1b 100644 --- a/packages/devextreme-scss/scss/widgets/generic/scheduler/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/generic/scheduler/_colors.scss @@ -84,8 +84,8 @@ $scheduler-time-panel-background-color: null !default; $scheduler-tooltip-appointment-text-color: null !default; $scheduler-appointment-overlay-bg: null !default; -$month-text-color-light: #757575; -$month-text-color-dark: #9c9c9c; +$month-text-color-light: #757575 !default; +$month-text-color-dark: #9c9c9c !default; // Agenda $agenda-appointment-recurrence-icon-color: null !default; @@ -393,4 +393,4 @@ $agenda-appointment-text-color: $base-text-color !default; $scheduler-workspace-active-cell-color: $scheduler-accent-border-color !default; -$scheduler-appointment-active-color: $scheduler-appointment-start-color; +$scheduler-appointment-active-color: $scheduler-appointment-start-color !default; diff --git a/packages/devextreme-scss/scss/widgets/generic/scheduler/_index.scss b/packages/devextreme-scss/scss/widgets/generic/scheduler/_index.scss index 89156a91ae9a..1d8501d7f8bd 100644 --- a/packages/devextreme-scss/scss/widgets/generic/scheduler/_index.scss +++ b/packages/devextreme-scss/scss/widgets/generic/scheduler/_index.scss @@ -52,21 +52,21 @@ @use "../recurrenceEditor" as *; @use "../scrollable"; -$generic-scheduler-appointment-reduced-content-padding: 40px; -$generic-scheduler-appointment-empty-transparent-border: 1px solid transparent; +$generic-scheduler-appointment-reduced-content-padding: 40px !default; +$generic-scheduler-appointment-empty-transparent-border: 1px solid transparent !default; -$generic-scheduler-all-day-table-cell-height: $generic-scheduler-workspace-date-table-cell-height * 1.5; -$generic-scheduler-collapsed-all-day-table-cell-height: $generic-scheduler-workspace-date-table-cell-height * 0.5; -$generic-scheduler-header-panel-table-cell-height: $generic-scheduler-workspace-date-table-cell-height; +$generic-scheduler-all-day-table-cell-height: $generic-scheduler-workspace-date-table-cell-height * 1.5 !default; +$generic-scheduler-collapsed-all-day-table-cell-height: $generic-scheduler-workspace-date-table-cell-height * 0.5 !default; +$generic-scheduler-header-panel-table-cell-height: $generic-scheduler-workspace-date-table-cell-height !default; -$generic-scheduler-current-time-cell-border-size: 2px; +$generic-scheduler-current-time-cell-border-size: 2px !default; -$generic-scheduler-month-date-text-size: $generic-h5-font-size; +$generic-scheduler-month-date-text-size: $generic-h5-font-size !default; -$scheduler-first-of-month-border: 1px solid; +$scheduler-first-of-month-border: 1px solid !default; -$generic-scheduler-agenda-time-cell-padding: 10px; -$generic-scheduler-agenda-group-header-padding: $generic-scheduler-agenda-time-cell-padding 0 0 10px; +$generic-scheduler-agenda-time-cell-padding: 10px !default; +$generic-scheduler-agenda-group-header-padding: $generic-scheduler-agenda-time-cell-padding 0 0 10px !default; @include baseScheduler.scheduler-mixin(); diff --git a/packages/devextreme-scss/scss/widgets/generic/scheduler/_sizes.scss b/packages/devextreme-scss/scss/widgets/generic/scheduler/_sizes.scss index 9dff0661c68c..cc48e3253c93 100644 --- a/packages/devextreme-scss/scss/widgets/generic/scheduler/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/generic/scheduler/_sizes.scss @@ -57,7 +57,7 @@ $generic-scheduler-appointment-15min-icon-font-size: null !default; $generic-scheduler-appointment-15min-icon-right: 2px !default; $generic-scheduler-appointment-20min-recurrence-padding-right: null !default; -$agenda-appointment-title-font-size: 16px; +$agenda-appointment-title-font-size: 16px !default; $scheduler-timeline-cell-height: null !default; $scheduler-left-column-width: 100px !default; diff --git a/packages/devextreme-scss/scss/widgets/generic/scrollable/_sizes.scss b/packages/devextreme-scss/scss/widgets/generic/scrollable/_sizes.scss index 721bcb419a19..7e5c45388a59 100644 --- a/packages/devextreme-scss/scss/widgets/generic/scrollable/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/generic/scrollable/_sizes.scss @@ -1,2 +1,2 @@ -$generic-scrollbar-size-thin: 8px; -$generic-scrollbar-size: 15px; +$generic-scrollbar-size-thin: 8px !default; +$generic-scrollbar-size: 15px !default; diff --git a/packages/devextreme-scss/scss/widgets/generic/slider/_index.scss b/packages/devextreme-scss/scss/widgets/generic/slider/_index.scss index b9459bab9b75..c036962f113b 100644 --- a/packages/devextreme-scss/scss/widgets/generic/slider/_index.scss +++ b/packages/devextreme-scss/scss/widgets/generic/slider/_index.scss @@ -5,7 +5,7 @@ @use "sizes" as *; @use "../../base/slider"; -$generic-slider-radius: 2px; +$generic-slider-radius: 2px !default; .dx-slider { .dx-tooltip-wrapper { diff --git a/packages/devextreme-scss/scss/widgets/generic/speedDialAction/_index.scss b/packages/devextreme-scss/scss/widgets/generic/speedDialAction/_index.scss index 396fe10c61a2..1089f51ba2a1 100644 --- a/packages/devextreme-scss/scss/widgets/generic/speedDialAction/_index.scss +++ b/packages/devextreme-scss/scss/widgets/generic/speedDialAction/_index.scss @@ -5,9 +5,9 @@ @use "../button/colors" as *; @use "../overlay"; -$generic-fa-button-size: 30px; -$generic-fa-button-label-padding: 5px 10px; -$generic-fa-button-label-offset: 10px; +$generic-fa-button-size: 30px !default; +$generic-fa-button-label-padding: 5px 10px !default; +$generic-fa-button-label-offset: 10px !default; @include dx-fa-button-mixin( $generic-main-fa-button-size, diff --git a/packages/devextreme-scss/scss/widgets/generic/speedDialAction/_sizes.scss b/packages/devextreme-scss/scss/widgets/generic/speedDialAction/_sizes.scss index 650d9654e9bd..5e8f7e17bc8e 100644 --- a/packages/devextreme-scss/scss/widgets/generic/speedDialAction/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/generic/speedDialAction/_sizes.scss @@ -7,10 +7,10 @@ $generic-fa-button-label-font-size: 12px !default; @if $size == "default" { $generic-main-fa-button-size: 48px !default; - $generic-main-fa-button-label-padding: 0 25px 0 10px; + $generic-main-fa-button-label-padding: 0 25px 0 10px !default; } @else if $size == "compact" { $generic-main-fa-button-size: 34px !default; - $generic-main-fa-button-label-padding: 0 15px 0 5px; + $generic-main-fa-button-label-padding: 0 15px 0 5px !default; } diff --git a/packages/devextreme-scss/scss/widgets/generic/splitter/_sizes.scss b/packages/devextreme-scss/scss/widgets/generic/splitter/_sizes.scss index 839b901f0580..b4d9ec2a53d7 100644 --- a/packages/devextreme-scss/scss/widgets/generic/splitter/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/generic/splitter/_sizes.scss @@ -1 +1 @@ -$splitter-resize-handle-icon-size: 18px; +$splitter-resize-handle-icon-size: 18px !default; diff --git a/packages/devextreme-scss/scss/widgets/generic/switch/_index.scss b/packages/devextreme-scss/scss/widgets/generic/switch/_index.scss index 7b3bf528f688..de3aee4096fd 100644 --- a/packages/devextreme-scss/scss/widgets/generic/switch/_index.scss +++ b/packages/devextreme-scss/scss/widgets/generic/switch/_index.scss @@ -4,8 +4,8 @@ @use "../../base/mixins" as *; @use "../../base/switch"; -$generic-switch-border-weight: 1px; -$generic-switch-inner-size: $generic-switch-height - $generic-switch-border-weight * 2; +$generic-switch-border-weight: 1px !default; +$generic-switch-inner-size: $generic-switch-height - $generic-switch-border-weight * 2 !default; .dx-switch { width: $generic-switch-width; diff --git a/packages/devextreme-scss/scss/widgets/generic/textEditor/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/textEditor/_colors.scss index f6c080b13de3..79a778f4d217 100644 --- a/packages/devextreme-scss/scss/widgets/generic/textEditor/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/generic/textEditor/_colors.scss @@ -54,7 +54,7 @@ $texteditor-readonly-border-color: $base-border-color !default; $texteditor-label-transition: font-size 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms, transform 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms, - top 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms; + top 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms !default; @if $color == "carmine" { $texteditor-placeholder-color: $base-label-color !default; @@ -128,7 +128,7 @@ $texteditor-label-transition: $texteditor-filled-invalid-background: color.change($texteditor-invalid-faded-border-color, $alpha: 0.1) !default; } -$texteditor-label-color: $texteditor-placeholder-color; +$texteditor-label-color: $texteditor-placeholder-color !default; :root { --dx-texteditor-color-text: #{$texteditor-color}; diff --git a/packages/devextreme-scss/scss/widgets/generic/textEditor/_index.scss b/packages/devextreme-scss/scss/widgets/generic/textEditor/_index.scss index 67a56708f324..d3b4dc45bebc 100644 --- a/packages/devextreme-scss/scss/widgets/generic/textEditor/_index.scss +++ b/packages/devextreme-scss/scss/widgets/generic/textEditor/_index.scss @@ -13,21 +13,21 @@ @use "../../base/textEditor/mixins" as *; @use "../colorBox/sizes" as *; -$generic-texteditor-border-width: $generic-base-border-width; +$generic-texteditor-border-width: $generic-base-border-width !default; $generic-texteditor-input-padding: $generic-base-inline-borderedwidget-top-padding $generic-base-inline-borderedwidget-horizontal-padding - $generic-base-inline-borderedwidget-bottom-padding; + $generic-base-inline-borderedwidget-bottom-padding !default; -$generic-texteditor-input-height: math.round($generic-base-line-height * $generic-base-font-size) + $generic-base-inline-borderedwidget-top-padding + $generic-base-inline-borderedwidget-bottom-padding; +$generic-texteditor-input-height: math.round($generic-base-line-height * $generic-base-font-size) + $generic-base-inline-borderedwidget-top-padding + $generic-base-inline-borderedwidget-bottom-padding !default; -$generic-texteditor-icon-container-size: $generic-base-inline-borderedwidget-inner-size; -$generic-texteditor-icon-size: $generic-base-icon-size; +$generic-texteditor-icon-container-size: $generic-base-inline-borderedwidget-inner-size !default; +$generic-texteditor-icon-size: $generic-base-icon-size !default; -$generic-texteditor-clear-icon-size: $generic-texteditor-icon-size + $generic-texteditor-clear-icon-oversize; +$generic-texteditor-clear-icon-size: $generic-texteditor-icon-size + $generic-texteditor-clear-icon-oversize !default; -$generic-texteditor-custom-button-margin: 1px; -$generic-texteditor-invalid-badge-size: $generic-invalid-badge-size + 2 * $generic-invalid-badge-horizontal-padding; +$generic-texteditor-custom-button-margin: 1px !default; +$generic-texteditor-invalid-badge-size: $generic-invalid-badge-size + 2 * $generic-invalid-badge-horizontal-padding !default; @mixin dx-texteditor-icon() { position: absolute; diff --git a/packages/devextreme-scss/scss/widgets/generic/toast/_index.scss b/packages/devextreme-scss/scss/widgets/generic/toast/_index.scss index 3be2e70bcbaf..8ae3fbf94cd5 100644 --- a/packages/devextreme-scss/scss/widgets/generic/toast/_index.scss +++ b/packages/devextreme-scss/scss/widgets/generic/toast/_index.scss @@ -4,7 +4,7 @@ @use "../../base/toast"; @use "../overlay"; -$generic-toast-shadow: 0 2px 3px 0 $toast-shadow-color; +$generic-toast-shadow: 0 2px 3px 0 $toast-shadow-color !default; .dx-toast-content { color: $toast-color; diff --git a/packages/devextreme-scss/scss/widgets/generic/treeView/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/treeView/_colors.scss index 1a618a1088fe..484d2c98afd0 100644 --- a/packages/devextreme-scss/scss/widgets/generic/treeView/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/generic/treeView/_colors.scss @@ -38,7 +38,7 @@ $treeview-item-content-disabled: null !default; */ $treeview-spin-icon-color: null !default; -$generic-treeview-focused-row-load-indicator-color: #fff; +$generic-treeview-focused-row-load-indicator-color: #fff !default; @if $color == "carmine" { $treeview-color: $base-text-color !default; diff --git a/packages/devextreme-scss/scss/widgets/generic/treeView/_sizes.scss b/packages/devextreme-scss/scss/widgets/generic/treeView/_sizes.scss index 6a94a9ac1dfb..3fb827a82ddf 100644 --- a/packages/devextreme-scss/scss/widgets/generic/treeView/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/generic/treeView/_sizes.scss @@ -13,7 +13,7 @@ $generic-treeview-item-element-gap: 8px !default; $generic-select-all-item-border-visible-padding: 20px !default; @if $size == "default" { - $generic-treeview-item-height: 32px; + $generic-treeview-item-height: 32px !default; $generic-treeview-base-container-size: 22px !default; $generic-treeview-container-with-border-offset: 7px !default; $generic-checkbox-container-size: 22px !default; @@ -24,7 +24,7 @@ $generic-select-all-item-border-visible-padding: 20px !default; } @else if $size == "compact" { - $generic-treeview-item-height: 28px; + $generic-treeview-item-height: 28px !default; $generic-treeview-container-with-border-offset: 6px !default; $generic-treeview-base-container-size: 16px !default; $generic-checkbox-container-size: 16px !default; diff --git a/packages/devextreme-scss/scss/widgets/material/actionSheet/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/actionSheet/_sizes.scss index 01d93773d6c3..14a898935fca 100644 --- a/packages/devextreme-scss/scss/widgets/material/actionSheet/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/material/actionSheet/_sizes.scss @@ -1,2 +1,2 @@ -$material-actionsheet-item-margin-value: 20px; +$material-actionsheet-item-margin-value: 20px !default; $material-actionsheet-item-margin: 0 0 $material-actionsheet-item-margin-value 0 !default; diff --git a/packages/devextreme-scss/scss/widgets/material/button/_colors.scss b/packages/devextreme-scss/scss/widgets/material/button/_colors.scss index d14a977b8059..8e2218b4706a 100644 --- a/packages/devextreme-scss/scss/widgets/material/button/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/button/_colors.scss @@ -13,7 +13,7 @@ $button-shadow-color: null !default; * $type color */ $button-normal-color: $base-text-color !default; -$button-normal-border-color: color.change($button-normal-color, $alpha: 0.24); +$button-normal-border-color: color.change($button-normal-color, $alpha: 0.24) !default; /** * $name 20. Selected state text color diff --git a/packages/devextreme-scss/scss/widgets/material/button/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/button/_sizes.scss index 7de9889ee26f..3e96b6f5ce03 100644 --- a/packages/devextreme-scss/scss/widgets/material/button/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/material/button/_sizes.scss @@ -20,7 +20,7 @@ $material-button-active-box-shadow-size: 0 4px 6px !default; $material-button-horizontal-padding: 16px !default; $material-button-vertical-padding: 6px !default; $material-button-icon-padding: 8px !default; - $material-button-icon-text-padding: 12px; + $material-button-icon-text-padding: 12px !default; $material-button-min-width: 64px !default; } @@ -28,7 +28,7 @@ $material-button-active-box-shadow-size: 0 4px 6px !default; $material-button-horizontal-padding: 12px !default; $material-button-vertical-padding: 5px !default; $material-button-icon-padding: 5px !default; - $material-button-icon-text-padding: 8px; + $material-button-icon-text-padding: 8px !default; $material-button-min-width: 48px !default; } diff --git a/packages/devextreme-scss/scss/widgets/material/cardView/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/cardView/_sizes.scss index 47e062f428c6..4745802c92b4 100644 --- a/packages/devextreme-scss/scss/widgets/material/cardView/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/material/cardView/_sizes.scss @@ -196,8 +196,8 @@ $cardview-material-header-panel__item--disabled__sort-index-text-weight: $cardvi */ $cardview-material-header-panel__item--dragged-text-weight: $cardview-material-header-panel__item-text-weight !default; -$cardview-material-header-item__sort-indicator__border-size: null; -$cardview-material-header-item__sort-indicator__border-radius: null; +$cardview-material-header-item__sort-indicator__border-size: null !default; +$cardview-material-header-item__sort-indicator__border-radius: null !default; // #endregion diff --git a/packages/devextreme-scss/scss/widgets/material/checkBox/_index.scss b/packages/devextreme-scss/scss/widgets/material/checkBox/_index.scss index 119dfc9588ae..cb1034a3b0dd 100644 --- a/packages/devextreme-scss/scss/widgets/material/checkBox/_index.scss +++ b/packages/devextreme-scss/scss/widgets/material/checkBox/_index.scss @@ -7,7 +7,7 @@ @use "../../base/checkBox"; @use "../../base/checkBox/mixins" as *; -$material-checkbox-ripple-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); +$material-checkbox-ripple-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1) !default; .dx-checkbox { .dx-checkbox-container { diff --git a/packages/devextreme-scss/scss/widgets/material/colorView/_index.scss b/packages/devextreme-scss/scss/widgets/material/colorView/_index.scss index 556fe5fe74c5..deb1bfcbfced 100644 --- a/packages/devextreme-scss/scss/widgets/material/colorView/_index.scss +++ b/packages/devextreme-scss/scss/widgets/material/colorView/_index.scss @@ -4,8 +4,8 @@ @use "../../base/colorView"; @include dx-base-colorview-styles($colorview-handle-color, $colorview-handle-border-color); -$material-colorview-alpha-width: $material-colorview-palette-width + 4; -$material-colorview-hue-scale-height: $material-colorview-palette-height; +$material-colorview-alpha-width: $material-colorview-palette-width + 4 !default; +$material-colorview-hue-scale-height: $material-colorview-palette-height !default; .dx-colorview-container { width: $material-colorview-container-width; diff --git a/packages/devextreme-scss/scss/widgets/material/common/_mixins.scss b/packages/devextreme-scss/scss/widgets/material/common/_mixins.scss index 9d81f4600169..a4c30cea256a 100644 --- a/packages/devextreme-scss/scss/widgets/material/common/_mixins.scss +++ b/packages/devextreme-scss/scss/widgets/material/common/_mixins.scss @@ -8,7 +8,7 @@ @use "../../base/validation" as *; @use "../list/sizes" as *; -$badge-invalid-bg: $base-invalid-color; +$badge-invalid-bg: $base-invalid-color !default; @mixin dx-base-typography() { @include dx-base-typography-mixin( diff --git a/packages/devextreme-scss/scss/widgets/material/dateRangeBox/_index.scss b/packages/devextreme-scss/scss/widgets/material/dateRangeBox/_index.scss index 38c27e283940..902b0493def2 100644 --- a/packages/devextreme-scss/scss/widgets/material/dateRangeBox/_index.scss +++ b/packages/devextreme-scss/scss/widgets/material/dateRangeBox/_index.scss @@ -9,7 +9,7 @@ @use "../../base/icon_fonts" as *; @use "../textEditor" as *; -$material-editor-custom-button-margin: 5px; +$material-editor-custom-button-margin: 5px !default; .dx-daterangebox { @include dx-dropdowneditor-button-icon-styling(daterangepicker); diff --git a/packages/devextreme-scss/scss/widgets/material/dateView/_index.scss b/packages/devextreme-scss/scss/widgets/material/dateView/_index.scss index 936652fe63ca..003ec8b587fe 100644 --- a/packages/devextreme-scss/scss/widgets/material/dateView/_index.scss +++ b/packages/devextreme-scss/scss/widgets/material/dateView/_index.scss @@ -6,7 +6,7 @@ @use "../../base/dateView"; @use "../scrollable"; -$material-dateview-roller-padding: math.div($material-dateview-roller-height - $material-dateview-roller-item-height, 2); +$material-dateview-roller-padding: math.div($material-dateview-roller-height - $material-dateview-roller-item-height, 2) !default; .dx-dateview-rollers { width: auto; diff --git a/packages/devextreme-scss/scss/widgets/material/diagram/_index.scss b/packages/devextreme-scss/scss/widgets/material/diagram/_index.scss index eb57e7b9e913..c436fcd6eebe 100644 --- a/packages/devextreme-scss/scss/widgets/material/diagram/_index.scss +++ b/packages/devextreme-scss/scss/widgets/material/diagram/_index.scss @@ -15,10 +15,10 @@ @use "../fieldset/sizes" as *; @use "../menu/colors" as *; -$material-diagram-toolbar-icon-size: $material-base-icon-size; -$diagram-toolbar-colorbutton-border-width: 3px; +$material-diagram-toolbar-icon-size: $material-base-icon-size !default; +$diagram-toolbar-colorbutton-border-width: 3px !default; -$diagram-toolbox-title-size: 18px; +$diagram-toolbox-title-size: 18px !default; .dx-diagram { border-color: $diagram-border-color; diff --git a/packages/devextreme-scss/scss/widgets/material/dropDownButton/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/dropDownButton/_sizes.scss index 57c4be674692..60ff376fd31c 100644 --- a/packages/devextreme-scss/scss/widgets/material/dropDownButton/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/material/dropDownButton/_sizes.scss @@ -5,10 +5,10 @@ $material-dropdownbutton-icon-spindown-size: null !default; @if $size == "default" { $material-dropdownbutton-action-horizontal-padding: 12px !default; - $material-dropdownbutton-icon-spindown-size: 24px; + $material-dropdownbutton-icon-spindown-size: 24px !default; } @else if $size == "compact" { $material-dropdownbutton-action-horizontal-padding: 8px !default; - $material-dropdownbutton-icon-spindown-size: 18px; + $material-dropdownbutton-icon-spindown-size: 18px !default; } diff --git a/packages/devextreme-scss/scss/widgets/material/dropDownEditor/_index.scss b/packages/devextreme-scss/scss/widgets/material/dropDownEditor/_index.scss index aecf0ce9c787..e71b1065dae8 100644 --- a/packages/devextreme-scss/scss/widgets/material/dropDownEditor/_index.scss +++ b/packages/devextreme-scss/scss/widgets/material/dropDownEditor/_index.scss @@ -8,17 +8,17 @@ @use "../../base/dropDownEditor"; @use "../../base/dropDownEditor/mixins" as *; -$material-dropdowneditor-container-button-size: $material-base-icon-size; +$material-dropdowneditor-container-button-size: $material-base-icon-size !default; $material-dropdowneditor-invalid-badge-offset: $material-dropdowneditor-container-button-size + - $material-invalid-badge-halfhorizontal-padding; + $material-invalid-badge-halfhorizontal-padding !default; $material-dropdowneditor-invalid-badge-with-clear-offset: $material-dropdowneditor-container-button-size * 2 + - $material-invalid-badge-halfhorizontal-padding; + $material-invalid-badge-halfhorizontal-padding !default; -$material-dropdowneditor-invalid-badge-size: $material-invalid-badge-size + $material-invalid-badge-horizontal-padding; +$material-dropdowneditor-invalid-badge-size: $material-invalid-badge-size + $material-invalid-badge-horizontal-padding !default; @mixin dx-dropdowneditor-button-icon() { width: $material-dropdowneditor-container-button-size; diff --git a/packages/devextreme-scss/scss/widgets/material/fileManager/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/fileManager/_sizes.scss index 8a8635282724..710c1b09d13f 100644 --- a/packages/devextreme-scss/scss/widgets/material/fileManager/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/material/fileManager/_sizes.scss @@ -15,7 +15,7 @@ $filemanager-large-icon-size: null !default; $filemanager-progress-panel-title-padding: null !default; $filemanager-progress-box-button-close-margin-top: null !default; -$filemanager-toolbar-height: $material-toolbar-height; +$filemanager-toolbar-height: $material-toolbar-height !default; @if $size == "default" { $filemanager-toolbar-separator-height: 36px !default; diff --git a/packages/devextreme-scss/scss/widgets/material/fileUploader/_index.scss b/packages/devextreme-scss/scss/widgets/material/fileUploader/_index.scss index bb9fcb08ec53..1d2218ae1772 100644 --- a/packages/devextreme-scss/scss/widgets/material/fileUploader/_index.scss +++ b/packages/devextreme-scss/scss/widgets/material/fileUploader/_index.scss @@ -6,7 +6,7 @@ @use "../../base/mixins" as *; @use "../../base/fileUploader"; -$material-fileuploader-file-wrapper-border-size: 3px; +$material-fileuploader-file-wrapper-border-size: 3px !default; .dx-fileuploader-wrapper { padding: $material-fileuploader-vertical-padding; diff --git a/packages/devextreme-scss/scss/widgets/material/fileUploader/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/fileUploader/_sizes.scss index 7956eae8fdf4..a0d2d94e429e 100644 --- a/packages/devextreme-scss/scss/widgets/material/fileUploader/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/material/fileUploader/_sizes.scss @@ -3,7 +3,7 @@ $material-fileuploader-file-container-padding: null !default; $material-fileuploader-file-container-text-margin: null !default; $material-fileuploader-file-container-button-margin: null !default; -$material-fileuploader-file-cancel-button-margin-left: 4px; +$material-fileuploader-file-cancel-button-margin-left: 4px !default; $material-fileuploader-file-container-button-size: null !default; $material-fileuploader-file-icon-font-size: null !default; diff --git a/packages/devextreme-scss/scss/widgets/material/gantt/_colors.scss b/packages/devextreme-scss/scss/widgets/material/gantt/_colors.scss index de5874276173..fe96fa4a1ac0 100644 --- a/packages/devextreme-scss/scss/widgets/material/gantt/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/gantt/_colors.scss @@ -12,8 +12,8 @@ $gantt-task-background-color: null !default; @if $color == "lime" { $gantt-parent-task-background-color: #f44336 !default; $gantt-task-progress-background-color: rgba(0, 0, 0, 0.2) !default; - $gantt-task-color: #fff; - $gantt-task-background-color: #999; + $gantt-task-color: #fff !default; + $gantt-task-background-color: #999 !default; } @if $color == "blue" { @@ -34,8 +34,8 @@ $gantt-task-background-color: null !default; @if $color == "orange" or $color == "purple" or $color == "teal" { $gantt-parent-task-background-color: #8bc34a !default; $gantt-task-progress-background-color: rgba(0, 0, 0, 0.2) !default; - $gantt-task-color: #fff; - $gantt-task-background-color: #999; + $gantt-task-color: #fff !default; + $gantt-task-background-color: #999 !default; } @if $mode == "light" { diff --git a/packages/devextreme-scss/scss/widgets/material/gantt/_index.scss b/packages/devextreme-scss/scss/widgets/material/gantt/_index.scss index fcdcfef389c2..4a5b51c944b4 100644 --- a/packages/devextreme-scss/scss/widgets/material/gantt/_index.scss +++ b/packages/devextreme-scss/scss/widgets/material/gantt/_index.scss @@ -9,7 +9,7 @@ @use "../form/sizes" as *; @use "../splitterBar"; -$gantt-successor-background-color: white; +$gantt-successor-background-color: white !default; .dx-gantt { border: 1px solid; diff --git a/packages/devextreme-scss/scss/widgets/material/gridBase/_colors.scss b/packages/devextreme-scss/scss/widgets/material/gridBase/_colors.scss index 03502c0e2645..ce10df69f8c6 100644 --- a/packages/devextreme-scss/scss/widgets/material/gridBase/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/gridBase/_colors.scss @@ -164,8 +164,8 @@ $datagrid-text-stub-background-image-path: null !default; $datagrid-filter-panel-color: $base-accent !default; $datagrid-draggable-column-text-color: color.change($base-text-color, $alpha: 0.38) !default; -$datagrid-text-link-disabled-opacity: $base-disabled-opacity; -$datagrid-icon-link-disabled-opacity: $button-disabled-icon-opacity; +$datagrid-text-link-disabled-opacity: $base-disabled-opacity !default; +$datagrid-icon-link-disabled-opacity: $button-disabled-icon-opacity !default; @if $mode == "light" { $datagrid-cell-modified-border-color: color.adjust($base-success, $lightness: 51%, $space: hsl) !default; diff --git a/packages/devextreme-scss/scss/widgets/material/gridBase/_index.scss b/packages/devextreme-scss/scss/widgets/material/gridBase/_index.scss index 1afc72cc3cfb..7ea5a0c74fb6 100644 --- a/packages/devextreme-scss/scss/widgets/material/gridBase/_index.scss +++ b/packages/devextreme-scss/scss/widgets/material/gridBase/_index.scss @@ -28,12 +28,12 @@ @use "../overlay"; @use "../pagination"; -$material-grid-base-border-hidden: 1px solid transparent; -$material-grid-base-row-border: 1px solid transparent; -$material-grid-base-drag-header-first-shadow: 0 0 1px $datagrid-drag-header-shadow-color; -$material-grid-base-drag-header-second-shadow: 0 1px 3px $datagrid-drag-header-second-shadow-color; +$material-grid-base-border-hidden: 1px solid transparent !default; +$material-grid-base-row-border: 1px solid transparent !default; +$material-grid-base-drag-header-first-shadow: 0 0 1px $datagrid-drag-header-shadow-color !default; +$material-grid-base-drag-header-second-shadow: 0 1px 3px $datagrid-drag-header-second-shadow-color !default; -$material-grid-base-group-panel-message-line-height: $material-button-text-line-height; +$material-grid-base-group-panel-message-line-height: $material-button-text-line-height !default; @mixin grid-base($widget-name) { @include material-grid-base-cell($widget-name); diff --git a/packages/devextreme-scss/scss/widgets/material/gridBase/_variables.scss b/packages/devextreme-scss/scss/widgets/material/gridBase/_variables.scss index 9ad1220cd023..4014da737971 100644 --- a/packages/devextreme-scss/scss/widgets/material/gridBase/_variables.scss +++ b/packages/devextreme-scss/scss/widgets/material/gridBase/_variables.scss @@ -2,9 +2,9 @@ @use "colors" as *; @use "sizes" as *; -$grid-masterdetail-padding: 16px; -$material-grid-base-border-color: $datagrid-border-color; -$material-grid-base-header-cell-vertical-padding: math.round(math.div($material-grid-base-header-height - $material-grid-base-header-line-height, 2)); -$material-grid-base-command-select-column-width: $material-grid-base-checkbox-size + 2 * $material-grid-base-cell-horizontal-padding; -$material-grid-base-cell-vertical-padding: math.round(math.div($material-grid-base-cell-height - $material-grid-base-cell-line-height, 2)); -$material-grid-base-cell-padding: $material-grid-base-cell-vertical-padding $material-grid-base-cell-horizontal-padding; +$grid-masterdetail-padding: 16px !default; +$material-grid-base-border-color: $datagrid-border-color !default; +$material-grid-base-header-cell-vertical-padding: math.round(math.div($material-grid-base-header-height - $material-grid-base-header-line-height, 2)) !default; +$material-grid-base-command-select-column-width: $material-grid-base-checkbox-size + 2 * $material-grid-base-cell-horizontal-padding !default; +$material-grid-base-cell-vertical-padding: math.round(math.div($material-grid-base-cell-height - $material-grid-base-cell-line-height, 2)) !default; +$material-grid-base-cell-padding: $material-grid-base-cell-vertical-padding $material-grid-base-cell-horizontal-padding !default; diff --git a/packages/devextreme-scss/scss/widgets/material/gridBase/layout/aiChat/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/gridBase/layout/aiChat/_sizes.scss index a5cd8a835bab..c8f045a350f9 100644 --- a/packages/devextreme-scss/scss/widgets/material/gridBase/layout/aiChat/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/material/gridBase/layout/aiChat/_sizes.scss @@ -1,3 +1,3 @@ @use "../../../sizes" as *; -$ai-chat-message-icon-size: $material-base-icon-size - 4px; +$ai-chat-message-icon-size: $material-base-icon-size - 4px !default; diff --git a/packages/devextreme-scss/scss/widgets/material/informer/_colors.scss b/packages/devextreme-scss/scss/widgets/material/informer/_colors.scss index d8059cab008d..fd8e7ba5a2e7 100644 --- a/packages/devextreme-scss/scss/widgets/material/informer/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/informer/_colors.scss @@ -7,11 +7,11 @@ $informer-info-color: $base-text-color !default; $informer-info-background-color: null !default; @if $mode == "light" { - $informer-error-background-color: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: 1deg, $saturation: -24.92%, $lightness: 38.24%); - $informer-info-background-color: extcolor.adjust-if-not-achromatic($color: $base-text-color, $hue: -240deg, $saturation: -100.00%, $lightness: 48.63%); + $informer-error-background-color: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: 1deg, $saturation: -24.92%, $lightness: 38.24%) !default; + $informer-info-background-color: extcolor.adjust-if-not-achromatic($color: $base-text-color, $hue: -240deg, $saturation: -100.00%, $lightness: 48.63%) !default; } @if $mode == "dark" { - $informer-error-background-color: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: 1deg, $saturation: -41.80%, $lightness: -53.92%); - $informer-info-background-color: extcolor.adjust-if-not-achromatic($color: $base-text-color, $hue: 240deg, $saturation: 6.04%, $lightness: -70.78%); + $informer-error-background-color: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: 1deg, $saturation: -41.80%, $lightness: -53.92%) !default; + $informer-info-background-color: extcolor.adjust-if-not-achromatic($color: $base-text-color, $hue: 240deg, $saturation: 6.04%, $lightness: -70.78%) !default; } diff --git a/packages/devextreme-scss/scss/widgets/material/list/_index.scss b/packages/devextreme-scss/scss/widgets/material/list/_index.scss index 0394033ee1eb..1f6f61db64c5 100644 --- a/packages/devextreme-scss/scss/widgets/material/list/_index.scss +++ b/packages/devextreme-scss/scss/widgets/material/list/_index.scss @@ -13,11 +13,11 @@ @use "../radioGroup/colors" as *; @use "../badge"; -$material-list-item-border-width: 1px; -$material-list-border-width: 1px; -$material-list-border: $material-list-border-width solid; -$material-list-item-border: $material-list-item-border-width solid; -$material-list-searchbox-padding-top: $material-list-searchbox-vertical-padding - 2px; +$material-list-item-border-width: 1px !default; +$material-list-border-width: 1px !default; +$material-list-border: $material-list-border-width solid !default; +$material-list-item-border: $material-list-item-border-width solid !default; +$material-list-searchbox-padding-top: $material-list-searchbox-vertical-padding - 2px !default; .dx-list-item-chevron { @include dx-icon(chevronnext); diff --git a/packages/devextreme-scss/scss/widgets/material/menu/_index.scss b/packages/devextreme-scss/scss/widgets/material/menu/_index.scss index 86d8eec7b186..74feb67ec42e 100644 --- a/packages/devextreme-scss/scss/widgets/material/menu/_index.scss +++ b/packages/devextreme-scss/scss/widgets/material/menu/_index.scss @@ -9,7 +9,7 @@ @use "../menuBase" as *; @use "../../base/menu"; -$material-menu-font-size: $material-base-font-size; +$material-menu-font-size: $material-base-font-size !default; .dx-context-menu-container-border { background-color: transparent; diff --git a/packages/devextreme-scss/scss/widgets/material/menuBase/_index.scss b/packages/devextreme-scss/scss/widgets/material/menuBase/_index.scss index c58fb28cc838..e9cff178ebc9 100644 --- a/packages/devextreme-scss/scss/widgets/material/menuBase/_index.scss +++ b/packages/devextreme-scss/scss/widgets/material/menuBase/_index.scss @@ -8,7 +8,7 @@ @use "../../base/mixins" as *; @use "../../base/menuBase"; -$material-menu-arrow-image-size: 7px; +$material-menu-arrow-image-size: 7px !default; .dx-menu-item { color: $menu-color; diff --git a/packages/devextreme-scss/scss/widgets/material/menuBase/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/menuBase/_sizes.scss index cbcdc4c94b66..697bd594e2e1 100644 --- a/packages/devextreme-scss/scss/widgets/material/menuBase/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/material/menuBase/_sizes.scss @@ -3,7 +3,7 @@ $material-menu-item-line-height: null !default; $material-menu-item-with-icon-horizontal-padding: null !default; $material-menu-horizontal-padding: null !default; -$material-menu-icon-to-text-offset: 8px; +$material-menu-icon-to-text-offset: 8px !default; @if $size == "default" { $material-menu-item-line-height: 18px !default; diff --git a/packages/devextreme-scss/scss/widgets/material/pivotGrid/_index.scss b/packages/devextreme-scss/scss/widgets/material/pivotGrid/_index.scss index e8f0a912e74c..fedacbe636cf 100644 --- a/packages/devextreme-scss/scss/widgets/material/pivotGrid/_index.scss +++ b/packages/devextreme-scss/scss/widgets/material/pivotGrid/_index.scss @@ -32,12 +32,12 @@ $pivotgrid-button-top-padding: $pivotgrid-button-top-padding, ); -$material-pivotgrid-headers-font-size: 12px; -$material-pivotgrid-area-font-size: 13px; -$material-pivotgrid-chevron-icon-size: 20px; +$material-pivotgrid-headers-font-size: 12px !default; +$material-pivotgrid-area-font-size: 13px !default; +$material-pivotgrid-chevron-icon-size: 20px !default; -$material-pivotgrid-drag-header-shadow: 0 3px 4px color.change($base-shadow-color, $alpha: 0.15); -$material-pivotgridfieldchooser-field-min-height: 36px; +$material-pivotgrid-drag-header-shadow: 0 3px 4px color.change($base-shadow-color, $alpha: 0.15) !default; +$material-pivotgridfieldchooser-field-min-height: 36px !default; .dx-pivotgrid-fields-container { &.dx-drag { diff --git a/packages/devextreme-scss/scss/widgets/material/popup/_index.scss b/packages/devextreme-scss/scss/widgets/material/popup/_index.scss index 0082098d5238..bfbb2902eed0 100644 --- a/packages/devextreme-scss/scss/widgets/material/popup/_index.scss +++ b/packages/devextreme-scss/scss/widgets/material/popup/_index.scss @@ -8,7 +8,7 @@ @use "../../base/popup"; @use "../overlay"; -$material-popup-toolbar-label-font-size: $material-m-font-size; +$material-popup-toolbar-label-font-size: $material-m-font-size !default; .dx-popup-wrapper { & > .dx-overlay-content { diff --git a/packages/devextreme-scss/scss/widgets/material/progressBar/_index.scss b/packages/devextreme-scss/scss/widgets/material/progressBar/_index.scss index 58b93ad7bfc8..66c0e933c0fa 100644 --- a/packages/devextreme-scss/scss/widgets/material/progressBar/_index.scss +++ b/packages/devextreme-scss/scss/widgets/material/progressBar/_index.scss @@ -4,9 +4,9 @@ @use "../../base/mixins" as *; @use "../../base/progressBar"; -$material-bar-height: 4px; -$material-background-width: 90%; -$material-progressbar-interdeterminate-state-gradient: -90deg, transparent 5%, $progressbar-range-indeterminate-color, transparent 95%; +$material-bar-height: 4px !default; +$material-background-width: 90% !default; +$material-progressbar-interdeterminate-state-gradient: -90deg, transparent 5%, $progressbar-range-indeterminate-color, transparent 95% !default; .dx-progressbar-container { height: $material-bar-height; diff --git a/packages/devextreme-scss/scss/widgets/material/radioButton/_index.scss b/packages/devextreme-scss/scss/widgets/material/radioButton/_index.scss index 960a46991c2a..f42753264aab 100644 --- a/packages/devextreme-scss/scss/widgets/material/radioButton/_index.scss +++ b/packages/devextreme-scss/scss/widgets/material/radioButton/_index.scss @@ -6,7 +6,7 @@ @use "../radioGroup/colors" as *; @use "../../base/radioButton"; -$material-radiobutton-ripple-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); +$material-radiobutton-ripple-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1) !default; @include dx-radiobutton-icon-mixin( $material-radiobutton-size, diff --git a/packages/devextreme-scss/scss/widgets/material/rangeSlider/_index.scss b/packages/devextreme-scss/scss/widgets/material/rangeSlider/_index.scss index 583170ede72f..d73e48a91ceb 100644 --- a/packages/devextreme-scss/scss/widgets/material/rangeSlider/_index.scss +++ b/packages/devextreme-scss/scss/widgets/material/rangeSlider/_index.scss @@ -2,7 +2,7 @@ @use "sizes" as *; @use "../../base/rangeSlider"; -$material-slider-handle-margin: -14px; +$material-slider-handle-margin: -14px !default; .dx-rangeslider-start-handle { margin-inline-start: $material-slider-handle-margin; diff --git a/packages/devextreme-scss/scss/widgets/material/recurrenceEditor/_index.scss b/packages/devextreme-scss/scss/widgets/material/recurrenceEditor/_index.scss index 2ca39d753187..48e26a618efb 100644 --- a/packages/devextreme-scss/scss/widgets/material/recurrenceEditor/_index.scss +++ b/packages/devextreme-scss/scss/widgets/material/recurrenceEditor/_index.scss @@ -4,9 +4,9 @@ @use "../scheduler/sizes" as *; @use "../../base/recurrenceEditor" as *; -$material-recurrence-number-box-margin: 11px; -$material-recurrence-button-group-padding: 6px; -$material-recurrence-radio-group-margin: 15px; +$material-recurrence-number-box-margin: 11px !default; +$material-recurrence-button-group-padding: 6px !default; +$material-recurrence-radio-group-margin: 15px !default; .dx-recurrence-numberbox-interval { margin-right: $material-recurrence-number-box-margin; diff --git a/packages/devextreme-scss/scss/widgets/material/scheduler/_colors.scss b/packages/devextreme-scss/scss/widgets/material/scheduler/_colors.scss index 1d3349f02d9d..1468a9d68cfb 100644 --- a/packages/devextreme-scss/scss/widgets/material/scheduler/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/scheduler/_colors.scss @@ -35,7 +35,7 @@ $scheduler-appointment-base-color: $base-accent !default; * $type color */ $scheduler-appointment-start-color: color.change($base-shadow-color, $alpha: 0.3) !default; -$scheduler-appointment-active-color: $scheduler-appointment-start-color; +$scheduler-appointment-active-color: $scheduler-appointment-start-color !default; /** * $name 60. Focused cell color @@ -74,8 +74,8 @@ $scheduler-fill-focused-appointment: false !default; $scheduler-is-shadow-color-for-focused-state: true !default; $scheduler-time-indicator-background-color: rgba(0, 0, 0, 0.03) !default; $scheduler-first-month-cell-background-color: color.adjust($scheduler-appointment-base-color, $alpha: -0.85) !default; -$material-scheduler-toolbar-color: $base-accent; -$material-scheduler-toolbar-active-color: color.change($base-accent, $alpha: 0.08); +$material-scheduler-toolbar-color: $base-accent !default; +$material-scheduler-toolbar-active-color: color.change($base-accent, $alpha: 0.08) !default; $scheduler-tooltip-appointment-text-color: $base-text-color !default; $scheduler-appointment-overlay-bg: $base-bg !default; diff --git a/packages/devextreme-scss/scss/widgets/material/scheduler/_index.scss b/packages/devextreme-scss/scss/widgets/material/scheduler/_index.scss index e655da5b8b04..7b42c6fb901a 100644 --- a/packages/devextreme-scss/scss/widgets/material/scheduler/_index.scss +++ b/packages/devextreme-scss/scss/widgets/material/scheduler/_index.scss @@ -53,17 +53,17 @@ @use "../recurrenceEditor" as *; @use "../scrollable"; -$scheduler-appointment-recurrence-content-padding: 5px 25px 5px 7px; -$scheduler-appointment-recurrence-content-padding-rtl: 5px 7px 5px 25px; +$scheduler-appointment-recurrence-content-padding: 5px 25px 5px 7px !default; +$scheduler-appointment-recurrence-content-padding-rtl: 5px 7px 5px 25px !default; -$material-scheduler-all-day-table-cell-height: $material-scheduler-workspace-date-table-cell-height * 1.5; -$material-scheduler-collapsed-all-day-table-cell-height: $material-scheduler-workspace-date-table-cell-height * 0.5; +$material-scheduler-all-day-table-cell-height: $material-scheduler-workspace-date-table-cell-height * 1.5 !default; +$material-scheduler-collapsed-all-day-table-cell-height: $material-scheduler-workspace-date-table-cell-height * 0.5 !default; -$material-scheduler-month-date-text-size: 14px; +$material-scheduler-month-date-text-size: 14px !default; -$scheduler-first-of-month-border: 1px solid; +$scheduler-first-of-month-border: 1px solid !default; -$material-scheduler-agenda-time-panel-cell-padding: 8px; +$material-scheduler-agenda-time-panel-cell-padding: 8px !default; @include baseScheduler.scheduler-mixin(); diff --git a/packages/devextreme-scss/scss/widgets/material/scheduler/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/scheduler/_sizes.scss index b28f29e19c37..ffa4e98b64d7 100644 --- a/packages/devextreme-scss/scss/widgets/material/scheduler/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/material/scheduler/_sizes.scss @@ -42,7 +42,7 @@ $material-scheduler-appointment-20min-icon-right: 4px !default; $scheduler-left-column-width: 65px !default; $material-scheduler-timeline-date-table-cell-height: 50px !default; -$material-scheduler-navigator-icon-font-size: $material-base-icon-size; +$material-scheduler-navigator-icon-font-size: $material-base-icon-size !default; $material-scheduler-appointment-month-text-size: 12px !default; $material-scheduler-workspace-info-text-size: 16px !default; $material-scheduler-all-day-title-font-size: 12px !default; @@ -118,7 +118,7 @@ $scheduler-timeline-cell-height: 50px !default; $material-scheduler-appointment-popup-days-of-week-buttons-gap: 8px !default; $material-scheduler-appointment-popup-repeat-end-item-height: 48px !default; - $agenda-appointment-title-font-size: 14px; + $agenda-appointment-title-font-size: 14px !default; $material-scheduler-appointment-15min-recurrence-padding-right: 18px !default; $material-scheduler-appointment-15min-title-line-height: 18px !default; @@ -166,7 +166,7 @@ $scheduler-timeline-cell-height: 50px !default; $material-scheduler-appointment-popup-days-of-week-buttons-gap: 4px !default; $material-scheduler-appointment-popup-repeat-end-item-height: 32px !default; - $agenda-appointment-title-font-size: 13px; + $agenda-appointment-title-font-size: 13px !default; $material-scheduler-appointment-15min-recurrence-padding-right: 14px !default; $material-scheduler-appointment-15min-title-line-height: 12px !default; diff --git a/packages/devextreme-scss/scss/widgets/material/scrollView/_index.scss b/packages/devextreme-scss/scss/widgets/material/scrollView/_index.scss index b91875142119..ea4f3b80cd11 100644 --- a/packages/devextreme-scss/scss/widgets/material/scrollView/_index.scss +++ b/packages/devextreme-scss/scss/widgets/material/scrollView/_index.scss @@ -6,7 +6,7 @@ @use "../scrollable"; @use "../../base/scrollView"; -$scrollview-loading-indicator-size: 42px; +$scrollview-loading-indicator-size: 42px !default; .dx-scrollview-scrollbottom-text, .dx-scrollview-pull-down-text { diff --git a/packages/devextreme-scss/scss/widgets/material/scrollable/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/scrollable/_sizes.scss index 28567ffc4f8a..08d5cbb4b37b 100644 --- a/packages/devextreme-scss/scss/widgets/material/scrollable/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/material/scrollable/_sizes.scss @@ -1,2 +1,2 @@ -$material-scrollbar-size-thin: 6px; -$material-scrollbar-size: 13px; +$material-scrollbar-size-thin: 6px !default; +$material-scrollbar-size: 13px !default; diff --git a/packages/devextreme-scss/scss/widgets/material/slider/_index.scss b/packages/devextreme-scss/scss/widgets/material/slider/_index.scss index 36bf203145da..9c819f8ec0b2 100644 --- a/packages/devextreme-scss/scss/widgets/material/slider/_index.scss +++ b/packages/devextreme-scss/scss/widgets/material/slider/_index.scss @@ -6,11 +6,11 @@ @use "../../material/tooltip/colors" as *; @use "../../base/slider"; -$material-slider-radius: 50%; -$material-slider-handle-active-border-width: 2px; -$material-slider-handle-inner-size: 12px; -$material-slider-handle-inner-border-width: 1px; -$material-slider-handle-inner-disabled-size: 2px; +$material-slider-radius: 50% !default; +$material-slider-handle-active-border-width: 2px !default; +$material-slider-handle-inner-size: 12px !default; +$material-slider-handle-inner-border-width: 1px !default; +$material-slider-handle-inner-disabled-size: 2px !default; .dx-slider-wrapper { height: $material-slider-wrapper-height; diff --git a/packages/devextreme-scss/scss/widgets/material/speedDialAction/_index.scss b/packages/devextreme-scss/scss/widgets/material/speedDialAction/_index.scss index ac08160d72be..615c8df0cf78 100644 --- a/packages/devextreme-scss/scss/widgets/material/speedDialAction/_index.scss +++ b/packages/devextreme-scss/scss/widgets/material/speedDialAction/_index.scss @@ -5,9 +5,9 @@ @use "../button/colors" as *; @use "../overlay"; -$material-fa-button-size: 40px; -$material-fa-button-label-offset: 16px; -$material-fa-button-label-padding: 4px 8px; +$material-fa-button-size: 40px !default; +$material-fa-button-label-offset: 16px !default; +$material-fa-button-label-padding: 4px 8px !default; @include dx-fa-button-mixin( $material-main-fa-button-size, diff --git a/packages/devextreme-scss/scss/widgets/material/speedDialAction/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/speedDialAction/_sizes.scss index bc68610c12b7..1cda46827d86 100644 --- a/packages/devextreme-scss/scss/widgets/material/speedDialAction/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/material/speedDialAction/_sizes.scss @@ -7,12 +7,12 @@ $material-fa-button-label-font-size: null !default; @if $size == "default" { $material-main-fa-button-size: 56px !default; - $material-main-fa-button-label-padding: 0 24px 0 8px; - $material-fa-button-label-font-size: 14px; + $material-main-fa-button-label-padding: 0 24px 0 8px !default; + $material-fa-button-label-font-size: 14px !default; } @else if $size == "compact" { $material-main-fa-button-size: 42px !default; - $material-main-fa-button-label-padding: 0 20px 0 8px; - $material-fa-button-label-font-size: 12px; + $material-main-fa-button-label-padding: 0 20px 0 8px !default; + $material-fa-button-label-font-size: 12px !default; } diff --git a/packages/devextreme-scss/scss/widgets/material/splitter/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/splitter/_sizes.scss index 3af001d1096d..a97016b18725 100644 --- a/packages/devextreme-scss/scss/widgets/material/splitter/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/material/splitter/_sizes.scss @@ -1 +1 @@ -$splitter-resize-handle-icon-size: 24px; +$splitter-resize-handle-icon-size: 24px !default; diff --git a/packages/devextreme-scss/scss/widgets/material/switch/_index.scss b/packages/devextreme-scss/scss/widgets/material/switch/_index.scss index 9b7f631c40ef..59f2347d69ed 100644 --- a/packages/devextreme-scss/scss/widgets/material/switch/_index.scss +++ b/packages/devextreme-scss/scss/widgets/material/switch/_index.scss @@ -6,10 +6,10 @@ @use "../../base/switch"; @use "../../base/switch/mixins" as *; -$material-switch-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); -$material-switch-handle-on-shadow: 0 0 0 $material-switch-shadow-blur-radius color.change($switch-handle-on-bg, $alpha: 0.1); -$material-switch-shadow: 0 0 0 $material-switch-shadow-blur-radius color.change($base-text-color, $alpha: 0.1); -$material-invalid-switch-shadow: 0 0 0 $material-switch-shadow-blur-radius color.change($switch-invalid-handle-bg, $alpha: 0.1); +$material-switch-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1) !default; +$material-switch-handle-on-shadow: 0 0 0 $material-switch-shadow-blur-radius color.change($switch-handle-on-bg, $alpha: 0.1) !default; +$material-switch-shadow: 0 0 0 $material-switch-shadow-blur-radius color.change($base-text-color, $alpha: 0.1) !default; +$material-invalid-switch-shadow: 0 0 0 $material-switch-shadow-blur-radius color.change($switch-invalid-handle-bg, $alpha: 0.1) !default; @include dx-switch( $material-switch-width, diff --git a/packages/devextreme-scss/scss/widgets/material/textBox/_index.scss b/packages/devextreme-scss/scss/widgets/material/textBox/_index.scss index dacb0d90e04e..da0905c94c67 100644 --- a/packages/devextreme-scss/scss/widgets/material/textBox/_index.scss +++ b/packages/devextreme-scss/scss/widgets/material/textBox/_index.scss @@ -8,15 +8,15 @@ @use "../../base/textBox"; @use "../textEditor" as *; -$textbox-search-icon-right-padding: math.div($material-filled-texteditor-input-horizontal-padding, 2); +$textbox-search-icon-right-padding: math.div($material-filled-texteditor-input-horizontal-padding, 2) !default; $textbox-standard-search-icon-size: $material-texteditor-icon-container-size + $material-base-standard-texteditor-input-horizontal-padding + - $textbox-search-icon-right-padding; + $textbox-search-icon-right-padding !default; $textbox-filled-search-icon-size: $material-texteditor-icon-container-size + $material-filled-texteditor-input-horizontal-padding + - $textbox-search-icon-right-padding; + $textbox-search-icon-right-padding !default; @mixin dx-texteditor-search-icon($texteditor-icon-size, $texteditor-padding) { position: absolute; diff --git a/packages/devextreme-scss/scss/widgets/material/textEditor/_colors.scss b/packages/devextreme-scss/scss/widgets/material/textEditor/_colors.scss index e05f1ab8f71e..e7495f66bedd 100644 --- a/packages/devextreme-scss/scss/widgets/material/textEditor/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/textEditor/_colors.scss @@ -13,7 +13,7 @@ $texteditor-color: $base-text-color !default; * $type color */ $texteditor-placeholder-color: $base-label-color !default; -$texteditor-label-color: $texteditor-placeholder-color; +$texteditor-label-color: $texteditor-placeholder-color !default; /** * $name 30. Background color @@ -59,7 +59,7 @@ $texteditor-input-border-radius: $base-border-radius !default; $texteditor-label-transition: font-size 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms, transform 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms, - top 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms; + top 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms !default; @if $mode == "light" { $texteditor-disabled-color: rgba(0, 0, 0, 0.6) !default; diff --git a/packages/devextreme-scss/scss/widgets/material/textEditor/_index.scss b/packages/devextreme-scss/scss/widgets/material/textEditor/_index.scss index ae152575c305..c9e40f7baa5b 100644 --- a/packages/devextreme-scss/scss/widgets/material/textEditor/_index.scss +++ b/packages/devextreme-scss/scss/widgets/material/textEditor/_index.scss @@ -13,10 +13,10 @@ @use "../../base/textEditor/mixins" as *; @use "../colorBox/sizes" as *; -$material-base-standard-texteditor-input-horizontal-padding: 0; -$material-texteditor-icon-container-size: $material-base-icon-size - 2px; -$material-texteditor-invalid-badge-size: $material-invalid-badge-size + 2 * $material-invalid-badge-horizontal-padding; -$material-editor-custom-button-margin: 5px; +$material-base-standard-texteditor-input-horizontal-padding: 0 !default; +$material-texteditor-icon-container-size: $material-base-icon-size - 2px !default; +$material-texteditor-invalid-badge-size: $material-invalid-badge-size + 2 * $material-invalid-badge-horizontal-padding !default; +$material-editor-custom-button-margin: 5px !default; @mixin dx-texteditor-icon() { position: absolute; diff --git a/packages/devextreme-scss/scss/widgets/material/textEditor/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/textEditor/_sizes.scss index 8082b872260d..1e206df56fc9 100644 --- a/packages/devextreme-scss/scss/widgets/material/textEditor/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/material/textEditor/_sizes.scss @@ -28,9 +28,9 @@ $material-filled-texteditor-input-with-label-bottom-padding: null !default; $material-texteditor-label-outside-top-offset: 24px !default; $material-filled-texteditor-input-horizontal-padding: 16px !default; $material-filled-texteditor-input-top-padding: 15px !default; - $material-filled-texteditor-input-with-label-top-padding: 21px; + $material-filled-texteditor-input-with-label-top-padding: 21px !default; $material-filled-texteditor-input-bottom-padding: 14px !default; - $material-filled-texteditor-input-with-label-bottom-padding: 8px; + $material-filled-texteditor-input-with-label-bottom-padding: 8px !default; $material-standard-texteditor-input-top-padding: 15px !default; $material-standard-texteditor-input-bottom-padding: 14px !default; $material-standard-texteditor-with-label-input-top-padding: 21px !default; @@ -47,10 +47,10 @@ $material-filled-texteditor-input-with-label-bottom-padding: null !default; $material-texteditor-label-outside-height: 16px !default; $material-texteditor-label-outside-top-offset: 18px !default; $material-filled-texteditor-input-horizontal-padding: 12px !default; - $material-filled-texteditor-input-top-padding: 9px; - $material-filled-texteditor-input-with-label-top-padding: 15px; - $material-filled-texteditor-input-bottom-padding: 9px; - $material-filled-texteditor-input-with-label-bottom-padding: 3px; + $material-filled-texteditor-input-top-padding: 9px !default; + $material-filled-texteditor-input-with-label-top-padding: 15px !default; + $material-filled-texteditor-input-bottom-padding: 9px !default; + $material-filled-texteditor-input-with-label-bottom-padding: 3px !default; $material-standard-texteditor-input-top-padding: 9px !default; $material-standard-texteditor-input-bottom-padding: 9px !default; $material-standard-texteditor-with-label-input-top-padding: 14px !default; @@ -68,5 +68,5 @@ $material-standard-texteditor-input-padding: $material-base-standard-texteditor-input-horizontal-padding $material-standard-texteditor-input-bottom-padding !default; -$material-filled-texteditor-input-button-horizontal-padding: $material-filled-texteditor-input-horizontal-padding - 4px; -$material-filled-texteditor-spin-button-horizontal-padding: $material-filled-texteditor-input-horizontal-padding - 8px; +$material-filled-texteditor-input-button-horizontal-padding: $material-filled-texteditor-input-horizontal-padding - 4px !default; +$material-filled-texteditor-spin-button-horizontal-padding: $material-filled-texteditor-input-horizontal-padding - 8px !default; diff --git a/packages/devextreme-scss/scss/widgets/material/treeView/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/treeView/_sizes.scss index 9c6fa56cc475..833a5ba82d53 100644 --- a/packages/devextreme-scss/scss/widgets/material/treeView/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/material/treeView/_sizes.scss @@ -20,7 +20,7 @@ $material-treeview-container-padding: $material-treeview-border-padding $material-treeview-border-padding $material-treeview-border-padding - $material-treeview-container-with-border-offset; + $material-treeview-container-with-border-offset !default; @if $size == "default" { $material-treeview-toggle-item-width: 24px !default; @@ -31,7 +31,7 @@ $material-treeview-container-padding: $material-treeview-item-height: 48px !default; $material-treeview-load-indicator-size: 24px !default; $material-treeview-searchbox-margin-bottom: 8px !default; - $material-treeview-search-editor-height: 48px; + $material-treeview-search-editor-height: 48px !default; } @else if $size == "compact" { @@ -41,7 +41,7 @@ $material-treeview-container-padding: $material-treeview-item-padding: 9px $material-treeview-item-side-padding !default; $material-treeview-item-height: 36px !default; $material-treeview-load-indicator-size: 18px !default; - $material-checkbox-container-size: 18px; + $material-checkbox-container-size: 18px !default; $material-treeview-searchbox-margin-bottom: 4px !default; - $material-treeview-search-editor-height: 32px; + $material-treeview-search-editor-height: 32px !default; } From fe3cecb5d7b3de938b0f423cc81401a89fda07b7 Mon Sep 17 00:00:00 2001 From: EugeniyKiyashko Date: Fri, 4 Sep 2026 03:11:49 +0400 Subject: [PATCH 5/8] Styles: drop three dead tabPanel variables the branch repeats were hiding, and leave no blank first line after a hoist --- .../scss/widgets/fluent/button/_colors.scss | 3 +- .../generic/tabPanel/variables/_borders.scss | 11 ------- .../no-identical-branch-declarations.test.ts | 30 +++++++++++++++++++ .../no-identical-branch-declarations.mjs | 3 ++ 4 files changed, 34 insertions(+), 13 deletions(-) diff --git a/packages/devextreme-scss/scss/widgets/fluent/button/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/button/_colors.scss index 73dd4ef65aa4..354fabaa5455 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/button/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/button/_colors.scss @@ -309,8 +309,6 @@ $button-accent-foreground-color: null !default; $button-shadow-color: color.change($base-shadow-color, $alpha: 0.4) !default; } -$button-success-outlined-selected-color: $button-success-outlined-color-hover !default; - /** * $name 40. Focused state background color * $type color @@ -319,6 +317,7 @@ $button-success-focused-bg: $button-success-hover-bg !default; $button-danger-outlined-focused-bg: $button-danger-outlined-hover-bg !default; $button-success-outlined-focused-bg: $button-success-outlined-hover-bg !default; $button-default-outlined-focused-bg: $button-default-outlined-hover-bg !default; +$button-success-outlined-selected-color: $button-success-outlined-color-hover !default; $button-default-icon-color: $button-default-color !default; $button-normal-icon-color: $button-normal-color !default; diff --git a/packages/devextreme-scss/scss/widgets/generic/tabPanel/variables/_borders.scss b/packages/devextreme-scss/scss/widgets/generic/tabPanel/variables/_borders.scss index 04ea3a81ce87..05f84313f289 100644 --- a/packages/devextreme-scss/scss/widgets/generic/tabPanel/variables/_borders.scss +++ b/packages/devextreme-scss/scss/widgets/generic/tabPanel/variables/_borders.scss @@ -6,48 +6,37 @@ $generic-tabpanel-tab-border-transparent: $generic-tabs-border-width solid transparent !default; $generic-tabpanel-tab-border-selected-bottom: $generic-tabs-border-width solid !default; -$generic-tabpanel-tab-border-active-bottom: $generic-tabs-border-width solid $tabs-focused-border-color !default; $generic-tabpanel-tab-border-focused-bottom: null !default; -$generic-tabpanel-tab-border-focused-left: $generic-tabs-border-width solid $tabs-focused-border-color !default; -$generic-tabpanel-tab-border-focused-right: $generic-tabs-border-width solid $tabs-focused-border-color !default; @if $color == "carmine" { - $generic-tabpanel-tab-border-focused-bottom: $generic-tabs-border-width solid $tabs-tab-selected-bg !default; } @if $color == "contrast" { - $generic-tabpanel-tab-border-focused-bottom: $generic-tabs-border-width solid !default; } @if $color == "dark" { - $generic-tabpanel-tab-border-focused-bottom: $generic-tabs-border-width solid $tabs-tab-selected-bg !default; } @if $color == "darkmoon" { - $generic-tabpanel-tab-border-focused-bottom: $generic-tabs-border-width solid $tabs-tab-selected-bg !default; } @if $color == "darkviolet" { - $generic-tabpanel-tab-border-focused-bottom: $generic-tabs-border-width solid $tabs-tab-selected-bg !default; } @if $color == "greenmist" { - $generic-tabpanel-tab-border-focused-bottom: $generic-tabs-border-width solid $tabs-tab-selected-bg !default; } @if $color == "light" { - $generic-tabpanel-tab-border-focused-bottom: $generic-tabs-border-width solid $tabs-tab-selected-bg !default; } @if $color == "softblue" { - $generic-tabpanel-tab-border-focused-bottom: $generic-tabs-border-width solid $tabs-tab-selected-bg !default; } diff --git a/packages/devextreme-scss/tests/no-identical-branch-declarations.test.ts b/packages/devextreme-scss/tests/no-identical-branch-declarations.test.ts index acd51056e901..1c70a11fe2f9 100644 --- a/packages/devextreme-scss/tests/no-identical-branch-declarations.test.ts +++ b/packages/devextreme-scss/tests/no-identical-branch-declarations.test.ts @@ -119,6 +119,36 @@ test('--fix puts a value that reads a branch-bound variable after the chain', () )); }); +test('--fix leaves no blank first line when the removed declaration opened its group', () => { + const { output } = fix('fix-first-line.scss', scss( + '$same: null !default;', + '', + '@if $size == "default" {', + ' $same: 1px !default;', + '', + ' $width: 36px !default;', + '}', + '', + '@else if $size == "compact" {', + ' $same: 1px !default;', + '', + ' $width: 32px !default;', + '}', + )); + + expect(output).toBe(scss( + '$same: 1px !default;', + '', + '@if $size == "default" {', + ' $width: 36px !default;', + '}', + '', + '@else if $size == "compact" {', + ' $width: 32px !default;', + '}', + )); +}); + test('--fix moves a value that reads a variable declared below its pre-declaration to just before the chain', () => { const { output } = fix('fix-before.scss', scss( '$padding: null !default;', diff --git a/packages/devextreme-scss/tools/stylelint/no-identical-branch-declarations.mjs b/packages/devextreme-scss/tools/stylelint/no-identical-branch-declarations.mjs index 4bef27666838..9fb4c3fa37d4 100644 --- a/packages/devextreme-scss/tools/stylelint/no-identical-branch-declarations.mjs +++ b/packages/devextreme-scss/tools/stylelint/no-identical-branch-declarations.mjs @@ -177,6 +177,9 @@ const ruleFunction = (primary) => (root, result) => { const live = branches.filter((branch) => branch.parent); const tidy = () => { dropEmptyBranches(live, independent); + live.forEach((branch) => { + if (branch.parent && branch.first) branch.first.raws.before = branch.first.raws.before.replace(/^\s*\n/, '\n'); + }); parent.raws.semicolon = true; if (parent.type === 'root' && parent.first) parent.first.raws.before = ''; }; From e9a237cf3957ec26abc04f4ff7e2a5dc4b9a7066 Mon Sep 17 00:00:00 2001 From: EugeniyKiyashko Date: Fri, 4 Sep 2026 03:54:24 +0400 Subject: [PATCH 6/8] Styles: report a theme variable as unused when nothing reads it, not when it is mentioned once --- .../tests/unused-elements.test.ts | 72 +++++++++---------- .../no-identical-branch-declarations.mjs | 2 +- 2 files changed, 36 insertions(+), 38 deletions(-) diff --git a/packages/devextreme-scss/tests/unused-elements.test.ts b/packages/devextreme-scss/tests/unused-elements.test.ts index 559096b709b3..6cf8755e0855 100644 --- a/packages/devextreme-scss/tests/unused-elements.test.ts +++ b/packages/devextreme-scss/tests/unused-elements.test.ts @@ -47,24 +47,37 @@ const removeAllCommentsFromContent = (content: string): string => content .filter((_, index) => index % 2 === 0) .join(''); -const extractVariables = (filePath: string): string[] => { +const variableRegex = new RegExp(`\\$[${VAR_NAME_CHARS}]+`, 'g'); + +type VariableUsage = { declared: Set; read: Set }; + +const collectVariableUsage = (filePath: string, usage: VariableUsage): void => { const content = removeAllCommentsFromContent(readFileSync(filePath, 'utf8')); - const regex = new RegExp(`\\$[${VAR_NAME_CHARS}]+`, 'g'); - return content.match(regex) ?? []; + let depth = 0; + let index = 0; + while (index < content.length) { + const char = content[index]; + if (char === '(') depth += 1; + if (char === ')') depth -= 1; + if (char === '$') { + variableRegex.lastIndex = index; + const [variable] = variableRegex.exec(content) ?? ['']; + const assigned = /^\s*:/.test(content.slice(index + variable.length)); + if (assigned && depth === 0) usage.declared.add(variable); + if (!assigned) usage.read.add(variable); + index += variable.length; + continue; + } + index += 1; + } }; -const findUniqueVariables = (variables: string[]): string[] => { - const variableCounts = new Map(); - variables.forEach((variable) => { - variableCounts.set(variable, (variableCounts.get(variable) ?? 0) + 1); - }); - return Array.from(variableCounts.entries()) - // eslint-disable-next-line @typescript-eslint/no-unused-vars - // @ts-ignore - .filter(([variable, count]) => count === 1) - // eslint-disable-next-line @typescript-eslint/no-unused-vars - // @ts-ignore - .map(([variable, count]) => variable); +const variableUsageOf = (directories: string[]): VariableUsage => { + const usage: VariableUsage = { declared: new Set(), read: new Set() }; + directories + .flatMap((directory) => getFilesFromDirectory(join('scss', 'widgets', directory), ['.scss'])) + .forEach((filePath) => collectVariableUsage(filePath, usage)); + return usage; }; test('There are no unused images in repository', () => { @@ -85,29 +98,14 @@ test('There are no unused images in repository', () => { expect(fullImagesFileList).toEqual(usedImagesFileList); }); -['generic', 'material', 'fluent'].forEach((themeName) => { - test(`There are no unused variables in ${themeName} SCSS files`, () => { - const baseScssFiles = getFilesFromDirectory(join('scss', 'widgets', 'base'), ['.scss']) - .map((fileName) => resolve(fileName)); - - const genericScssFiles = getFilesFromDirectory(join('scss', 'widgets', themeName), ['.scss']) - .map((fileName) => resolve(fileName)); +const themes = ['generic', 'material', 'fluent']; +const readAnywhere = variableUsageOf(['base', ...themes]).read; - const scssFiles = [...baseScssFiles, ...genericScssFiles]; - - let variables: string[] = []; - scssFiles.forEach((filePath) => { - variables = variables.concat(extractVariables(getFilePath(filePath.substring(filePath.indexOf('/scss'))))); - }); - - const uniqueVariables = findUniqueVariables(variables); - - const exclusions: { generic: string[]; material: string[]; fluent: string[] } = { - generic: [], - material: [], - fluent: [], - }; +themes.forEach((themeName) => { + test(`There are no unused variables in ${themeName} SCSS files`, () => { + const { declared } = variableUsageOf(['base', themeName]); + const unused = [...declared].filter((variable) => !readAnywhere.has(variable)).sort(); - expect(uniqueVariables).toEqual(exclusions[themeName]); + expect(unused).toEqual([]); }); }); diff --git a/packages/devextreme-scss/tools/stylelint/no-identical-branch-declarations.mjs b/packages/devextreme-scss/tools/stylelint/no-identical-branch-declarations.mjs index 9fb4c3fa37d4..088b41e742bd 100644 --- a/packages/devextreme-scss/tools/stylelint/no-identical-branch-declarations.mjs +++ b/packages/devextreme-scss/tools/stylelint/no-identical-branch-declarations.mjs @@ -178,7 +178,7 @@ const ruleFunction = (primary) => (root, result) => { const tidy = () => { dropEmptyBranches(live, independent); live.forEach((branch) => { - if (branch.parent && branch.first) branch.first.raws.before = branch.first.raws.before.replace(/^\s*\n/, '\n'); + if (branch.parent && branch.first?.type === 'decl') branch.first.raws.before = branch.first.raws.before.replace(/^\s*\n/, '\n'); }); parent.raws.semicolon = true; if (parent.type === 'root' && parent.first) parent.first.raws.before = ''; From 7e5c0ee48eea5da3d266bc5c4b654aa85ee1979f Mon Sep 17 00:00:00 2001 From: EugeniyKiyashko Date: Fri, 4 Sep 2026 03:54:24 +0400 Subject: [PATCH 7/8] Styles: remove the 38 theme variables nothing reads --- .../scss/widgets/fluent/button/_sizes.scss | 3 -- .../widgets/fluent/fileManager/_colors.scss | 3 -- .../scss/widgets/fluent/gridBase/_sizes.scss | 3 -- .../widgets/fluent/radioGroup/_sizes.scss | 3 -- .../scss/widgets/fluent/scheduler/_sizes.scss | 3 -- .../scss/widgets/fluent/slider/_sizes.scss | 9 ----- .../scss/widgets/fluent/treeView/_sizes.scss | 3 -- .../widgets/fluent/validation/_sizes.scss | 3 -- .../scss/widgets/generic/button/_sizes.scss | 3 -- .../widgets/generic/fileManager/_colors.scss | 18 --------- .../widgets/generic/htmlEditor/_colors.scss | 36 ------------------ .../widgets/generic/scheduler/_colors.scss | 29 -------------- .../widgets/generic/scheduler/_sizes.scss | 9 ----- .../generic/tabPanel/variables/_borders.scss | 38 ------------------- .../generic/tabs/variables/_colors.scss | 9 ----- .../generic/tabs/variables/_sizes.scss | 3 -- .../widgets/generic/treeView/_colors.scss | 9 ----- .../scss/widgets/generic/treeView/_sizes.scss | 3 -- .../scss/widgets/material/button/_sizes.scss | 3 -- .../widgets/material/cardView/_sizes.scss | 2 - .../widgets/material/fileManager/_colors.scss | 3 -- .../widgets/material/gridBase/_sizes.scss | 3 -- .../widgets/material/scheduler/_sizes.scss | 6 --- .../scss/widgets/material/slider/_sizes.scss | 3 -- .../material/speedDialAction/_sizes.scss | 4 -- .../scss/widgets/material/tagBox/_sizes.scss | 3 -- .../widgets/material/treeView/_sizes.scss | 3 -- .../widgets/material/validation/_sizes.scss | 3 -- 28 files changed, 220 deletions(-) diff --git a/packages/devextreme-scss/scss/widgets/fluent/button/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/button/_sizes.scss index 3deda76ec3da..44ca7a7ee796 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/button/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/button/_sizes.scss @@ -2,7 +2,6 @@ $fluent-button-horizontal-padding: null !default; $fluent-button-vertical-padding: null !default; -$fluent-button-icon-padding: null !default; $fluent-button-content-line-height: 0 !default; $fluent-button-text-line-height: normal !default; $fluent-button-text-transform: none !default; @@ -14,13 +13,11 @@ $fluent-button-box-shadow-size: 0 1px 3px !default; @if $size == "default" { $fluent-button-horizontal-padding: 12px !default; $fluent-button-vertical-padding: 6px !default; - $fluent-button-icon-padding: 6px !default; } @else if $size == "compact" { $fluent-button-horizontal-padding: 8px !default; $fluent-button-vertical-padding: 4px !default; - $fluent-button-icon-padding: 4px !default; } $fluent-button-icon-text-padding: $fluent-button-horizontal-padding !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent/fileManager/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/fileManager/_colors.scss index 9c5aed4a9f7a..f0a6358c9177 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/fileManager/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/fileManager/_colors.scss @@ -16,14 +16,11 @@ $filemanager-file-item-hover-bg: $base-hover-bg !default; $filemanager-file-item-focused-border: $base-accent !default; $filemanager-item-focused-color: $base-inverted-text-color !default; $filemanager-dirs-tree-item-focus-bg: null !default; -$filemanager-progressbox-shadow-color: null !default; @if $mode == "light" { $filemanager-dirs-tree-item-focus-bg: color.adjust($base-bg, $lightness: -8%, $space: hsl) !default; - $filemanager-progressbox-shadow-color: color.change($base-shadow-color, $alpha: 0.175) !default; } @if $mode == "dark" { $filemanager-dirs-tree-item-focus-bg: color.adjust($base-bg, $lightness: 8%, $space: hsl) !default; - $filemanager-progressbox-shadow-color: color.change($base-shadow-color, $alpha: 0.3) !default; } diff --git a/packages/devextreme-scss/scss/widgets/fluent/gridBase/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/gridBase/_sizes.scss index ae0e28767c20..bc836c3c34a0 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/gridBase/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/gridBase/_sizes.scss @@ -24,7 +24,6 @@ $fluent-grid-base-adaptive-column-height: null !default; $fluent-grid-base-treeview-search-margin: 10px !default; $fluent-grid-base-nodata-font-size: null !default; $fluent-filter-row-between-editor-padding: null !default; -$fluent-command-column-additional-right-margin: null !default; $fluent-grid-base-treeview-select-all-item-offset: null !default; $fluent-grid-base-header-line-height: 18px !default; @@ -64,7 +63,6 @@ $fluent-grid-base-ai-prompt-editor-progressbar-height: 4px !default; $fluent-grid-base-nodata-font-size: 17px !default; $fluent-filter-row-between-editor-padding: 12px !default; - $fluent-command-column-additional-right-margin: 0 !default; $fluent-grid-base-treeview-select-all-item-offset: 34px !default; @@ -97,7 +95,6 @@ $fluent-grid-base-ai-prompt-editor-progressbar-height: 4px !default; $fluent-grid-base-nodata-font-size: 14px !default; $fluent-filter-row-between-editor-padding: 8px !default; - $fluent-command-column-additional-right-margin: 2px !default; $fluent-grid-base-treeview-select-all-item-offset: 28px !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent/radioGroup/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/radioGroup/_sizes.scss index 47f7cd1cd4ed..ada30c55a57e 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/radioGroup/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/radioGroup/_sizes.scss @@ -1,14 +1,11 @@ @use "../sizes" as *; $fluent-radio-button-vertical-margin: null !default; -$fluent-radio-group-horizontal-gap: null !default; @if $size == "default" { - $fluent-radio-group-horizontal-gap: 16px !default; $fluent-radio-button-vertical-margin: 12px !default; } @else if $size == "compact" { - $fluent-radio-group-horizontal-gap: 12px !default; $fluent-radio-button-vertical-margin: 6px !default; } diff --git a/packages/devextreme-scss/scss/widgets/fluent/scheduler/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/scheduler/_sizes.scss index 88c257b03c0c..1db3d084feb0 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/scheduler/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/scheduler/_sizes.scss @@ -5,7 +5,6 @@ $fluent-scheduler-workspace-date-table-cell-height: null !default; $fluent-scheduler-toolbar-item-offset: 4px !default; -$fluent-scheduler-navigator-height: null !default; $fluent-scheduler-header-panel-day-font-size: null !default; $fluent-scheduler-appointment-tooltip-title-font-size: null !default; $fluent-scheduler-appointment-tooltip-date-font-size: null !default; @@ -93,7 +92,6 @@ $header-panel-time-cell-padding: null !default; $header-day-element-height: 26px !default; $fluent-scheduler-workspace-date-table-cell-height: 38px !default; - $fluent-scheduler-navigator-height: 36px !default; $fluent-scheduler-header-panel-day-font-size: 16px !default; $fluent-scheduler-header-height: 46px !default; $fluent-scheduler-header-offset: 0 12px !default; @@ -142,7 +140,6 @@ $header-panel-time-cell-padding: null !default; $header-day-element-height: 24px !default; $fluent-scheduler-workspace-date-table-cell-height: 28px !default; - $fluent-scheduler-navigator-height: 28px !default; $fluent-scheduler-header-panel-day-font-size: 14px !default; $fluent-scheduler-header-height: 34px !default; $fluent-scheduler-header-offset: 2px 8px !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent/slider/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/slider/_sizes.scss index 788adabaef81..b9af6d044e39 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/slider/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/slider/_sizes.scss @@ -3,31 +3,22 @@ $fluent-slider-handle-size: null !default; $fluent-slider-wrapper-height: null !default; $fluent-slider-tooltip-width: null !default; -$fluent-slider-top-tooltip-margin: null !default; $fluent-slider-height: 28px !default; // for fieldset height $fluent-slider-radius: 50% !default; $fluent-slider-track-height: null !default; $fluent-slider-track-border-radius: 2px !default; -$fluent-slider-handle-height: null !default; -$fluent-slider-handle-inner-size: null !default; @if $size == "default" { $fluent-slider-track-height: 4px !default; - $fluent-slider-handle-height: 18px !default; $fluent-slider-handle-size: 20px !default; - $fluent-slider-handle-inner-size: 18px !default; $fluent-slider-wrapper-height: 32px !default; $fluent-slider-tooltip-width: 34px !default; - $fluent-slider-top-tooltip-margin: -5px !default; } @else if $size == "compact" { $fluent-slider-track-height: 2px !default; - $fluent-slider-handle-height: 14px !default; $fluent-slider-handle-size: 16px !default; - $fluent-slider-handle-inner-size: 14px !default; $fluent-slider-wrapper-height: 26px !default; $fluent-slider-tooltip-width: 28px !default; - $fluent-slider-top-tooltip-margin: -2px !default; } diff --git a/packages/devextreme-scss/scss/widgets/fluent/treeView/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/treeView/_sizes.scss index 4b44a49fe36a..8cb50f05e334 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/treeView/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/treeView/_sizes.scss @@ -1,7 +1,6 @@ @use "../sizes" as *; $fluent-treeview-toggle-item-width: null !default; -$fluent-treeview-item-height: null !default; $fluent-checkbox-container-size: null !default; $fluent-treeview-container-with-border-offset: 8px !default; $fluent-treeview-item-element-gap: 8px !default; @@ -24,7 +23,6 @@ $fluent-treeview-item-side-padding: 12px !default; $fluent-select-all-item-border-visible-padding: 26px !default; @if $size == "default" { - $fluent-treeview-item-height: 44px !default; $fluent-treeview-toggle-item-width: 20px !default; $fluent-checkbox-container-size: 20px !default; $fluent-treeview-checkbox-offset: 42px !default; @@ -36,7 +34,6 @@ $fluent-select-all-item-border-visible-padding: 26px !default; } @else if $size == "compact" { - $fluent-treeview-item-height: 32px !default; $fluent-treeview-toggle-item-width: 16px !default; $fluent-treeview-checkbox-offset: 36px !default; $fluent-checkbox-container-size: 16px !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent/validation/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/validation/_sizes.scss index 408e81922fdd..f46cec6854f2 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/validation/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/validation/_sizes.scss @@ -1,6 +1,5 @@ @use "../sizes" as *; -$fluent-validation-message-padding: null !default; $fluent-validationsummary-item-margin: null !default; $fluent-validation-message-line-height: null !default; $fluent-validation-message-horizontal-padding: null !default; @@ -10,7 +9,6 @@ $fluent-validation-message-vertical-padding: 4px !default; $fluent-validation-message-font-size: 12px !default; @if $size == "default" { - $fluent-validation-message-padding: 6px !default; $fluent-validationsummary-item-margin: 6px !default; $fluent-validation-message-horizontal-padding: 8px !default; @@ -18,7 +16,6 @@ $fluent-validation-message-font-size: 12px !default; } @else if $size == "compact" { - $fluent-validation-message-padding: 4px !default; $fluent-validationsummary-item-margin: 4px !default; $fluent-validation-message-horizontal-padding: 6px !default; diff --git a/packages/devextreme-scss/scss/widgets/generic/button/_sizes.scss b/packages/devextreme-scss/scss/widgets/generic/button/_sizes.scss index 8c648c6e3c96..d8302f0516c3 100644 --- a/packages/devextreme-scss/scss/widgets/generic/button/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/generic/button/_sizes.scss @@ -4,7 +4,6 @@ $generic-button-text-line-height: null !default; $generic-button-vertical-padding: null !default; $generic-button-horizontal-padding: null !default; $generic-button-icon-horizontal-padding: null !default; -$generic-button-box-shadow-size: null !default; $generic-button-border-weight: $generic-base-border-width !default; $generic-button-content-line-height: $generic-base-line-height !default; @@ -14,7 +13,6 @@ $generic-button-content-line-height: $generic-base-line-height !default; $generic-button-vertical-padding: 8px !default; $generic-button-horizontal-padding: 12px !default; $generic-button-icon-horizontal-padding: 8px !default; - $generic-button-box-shadow-size: 0 1px 3px !default; } @else if $size == "compact" { @@ -22,7 +20,6 @@ $generic-button-content-line-height: $generic-base-line-height !default; $generic-button-vertical-padding: 4px !default; $generic-button-horizontal-padding: 10px !default; $generic-button-icon-horizontal-padding: 5px !default; - $generic-button-box-shadow-size: 0 1px 2px !default; } :root { diff --git a/packages/devextreme-scss/scss/widgets/generic/fileManager/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/fileManager/_colors.scss index e7a8071ba5b7..28c2fc9c26b0 100644 --- a/packages/devextreme-scss/scss/widgets/generic/fileManager/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/generic/fileManager/_colors.scss @@ -14,19 +14,15 @@ $filemanager-file-item-select-bg: color.change($base-accent, $alpha: 0.8) !defau $filemanager-file-item-select-focus-color: $base-bg !default; $filemanager-file-item-select-focus-bg: color.change($base-accent, $alpha: 0.7) !default; $filemanager-file-item-hover-bg: null !default; -$filemanager-file-item-focused-bg: null !default; $filemanager-file-item-focused-border: $base-accent !default; $filemanager-item-focused-color: null !default; -$filemanager-progressbox-shadow-color: null !default; @if $color == "carmine" { $filemanager-file-toolbar-bg: color.adjust($base-bg, $lightness: -3%, $space: hsl) !default; $filemanager-dirs-tree-item-focus-bg: color.adjust($base-bg, $lightness: -8%, $space: hsl) !default; $filemanager-dirs-tree-item-focus-color: $base-text-color !default; $filemanager-file-item-hover-bg: $base-hover-bg !default; - $filemanager-file-item-focused-bg: $base-accent !default; $filemanager-item-focused-color: $base-inverted-text-color !default; - $filemanager-progressbox-shadow-color: color.change($base-shadow-color, $alpha: 0.175) !default; } @if $color == "contrast" { @@ -34,9 +30,7 @@ $filemanager-progressbox-shadow-color: null !default; $filemanager-dirs-tree-item-focus-bg: $base-text-color !default; $filemanager-dirs-tree-item-focus-color: $base-bg !default; $filemanager-file-item-hover-bg: $base-hover-color !default; - $filemanager-file-item-focused-bg: $base-accent !default; $filemanager-item-focused-color: $base-text-color !default; - $filemanager-progressbox-shadow-color: $base-shadow-color !default; } @if $color == "dark" { @@ -44,9 +38,7 @@ $filemanager-progressbox-shadow-color: null !default; $filemanager-dirs-tree-item-focus-bg: color.adjust($base-bg, $lightness: 8%, $space: hsl) !default; $filemanager-dirs-tree-item-focus-color: $base-text-color !default; $filemanager-file-item-hover-bg: $base-hover-bg !default; - $filemanager-file-item-focused-bg: $base-focus-bg !default; $filemanager-item-focused-color: $base-inverted-text-color !default; - $filemanager-progressbox-shadow-color: color.change($base-shadow-color, $alpha: 0.3) !default; } @if $color == "darkmoon" { @@ -54,9 +46,7 @@ $filemanager-progressbox-shadow-color: null !default; $filemanager-dirs-tree-item-focus-bg: color.adjust($base-bg, $lightness: 8%, $space: hsl) !default; $filemanager-dirs-tree-item-focus-color: $base-text-color !default; $filemanager-file-item-hover-bg: $base-hover-bg !default; - $filemanager-file-item-focused-bg: $base-accent !default; $filemanager-item-focused-color: $base-inverted-text-color !default; - $filemanager-progressbox-shadow-color: color.change(color.adjust($base-shadow-color, $lightness: -100%, $space: hsl), $alpha: 0.3) !default; } @if $color == "darkviolet" { @@ -64,9 +54,7 @@ $filemanager-progressbox-shadow-color: null !default; $filemanager-dirs-tree-item-focus-bg: color.adjust($base-bg, $lightness: 8%, $space: hsl) !default; $filemanager-dirs-tree-item-focus-color: $base-text-color !default; $filemanager-file-item-hover-bg: $base-hover-bg !default; - $filemanager-file-item-focused-bg: $base-focus-bg !default; $filemanager-item-focused-color: $base-inverted-text-color !default; - $filemanager-progressbox-shadow-color: color.change($base-shadow-color, $alpha: 0.3) !default; } @if $color == "greenmist" { @@ -74,9 +62,7 @@ $filemanager-progressbox-shadow-color: null !default; $filemanager-dirs-tree-item-focus-bg: color.adjust($base-bg, $lightness: -8%, $space: hsl) !default; $filemanager-dirs-tree-item-focus-color: $base-text-color !default; $filemanager-file-item-hover-bg: $base-hover-bg !default; - $filemanager-file-item-focused-bg: $base-accent !default; $filemanager-item-focused-color: $base-inverted-text-color !default; - $filemanager-progressbox-shadow-color: color.change($base-shadow-color, $alpha: 0.175) !default; } @if $color == "light" { @@ -84,9 +70,7 @@ $filemanager-progressbox-shadow-color: null !default; $filemanager-dirs-tree-item-focus-bg: color.adjust($base-bg, $lightness: -8%, $space: hsl) !default; $filemanager-dirs-tree-item-focus-color: $base-text-color !default; $filemanager-file-item-hover-bg: $base-hover-bg !default; - $filemanager-file-item-focused-bg: $base-focus-bg !default; $filemanager-item-focused-color: $base-inverted-text-color !default; - $filemanager-progressbox-shadow-color: color.change($base-shadow-color, $alpha: 0.175) !default; } @if $color == "softblue" { @@ -94,7 +78,5 @@ $filemanager-progressbox-shadow-color: null !default; $filemanager-dirs-tree-item-focus-bg: color.adjust($base-bg, $lightness: -8%, $space: hsl) !default; $filemanager-dirs-tree-item-focus-color: $base-text-color !default; $filemanager-file-item-hover-bg: $base-hover-bg !default; - $filemanager-file-item-focused-bg: $base-focus-bg !default; $filemanager-item-focused-color: $base-inverted-text-color !default; - $filemanager-progressbox-shadow-color: color.change($base-shadow-color, $alpha: 0.175) !default; } diff --git a/packages/devextreme-scss/scss/widgets/generic/htmlEditor/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/htmlEditor/_colors.scss index 797aaf643d03..90e0b2e4232c 100644 --- a/packages/devextreme-scss/scss/widgets/generic/htmlEditor/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/generic/htmlEditor/_colors.scss @@ -9,10 +9,6 @@ $htmleditor-filled-border-color: transparent !default; $htmleditor-invalid-border-color: $base-invalid-color !default; $htmleditor-invalid-faded-border-color: $base-invalid-faded-border-color !default; $htmleditor-toolbar-border-color: $base-border-color !default; -$htmleditor-normal-format-active-bg: null !default; -$htmleditor-default-format-active-bg: null !default; -$htmleditor-danger-format-active-bg: null !default; -$htmleditor-success-format-active-bg: null !default; $htmleditor-variable-bg: color.change($base-accent, $alpha: 0.15) !default; $htmleditor-resize-frame-border-color: $base-accent !default; $htmleditor-resize-handle-bg: $base-accent !default; @@ -22,73 +18,41 @@ $htmleditor-table-border-color: $base-border-color !default; $htmleditor-cells-separator-bg: color.change($base-accent, $alpha: 0.5) !default; @if $color == "carmine" { - $htmleditor-normal-format-active-bg: color.adjust($base-element-bg, $lightness: -10%, $space: hsl) !default; - $htmleditor-default-format-active-bg: color.adjust($base-accent, $lightness: -10%, $space: hsl) !default; - $htmleditor-danger-format-active-bg: color.adjust($base-danger, $lightness: -10%, $space: hsl) !default; - $htmleditor-success-format-active-bg: color.adjust($base-success, $lightness: -10%, $space: hsl) !default; $htmleditor-mention-bg: color.adjust($base-bg, $lightness: -9%, $space: hsl) !default; $htmleditor-mention-color: $base-text-color !default; } @if $color == "contrast" { - $htmleditor-normal-format-active-bg: $base-bg !default; - $htmleditor-default-format-active-bg: $base-default !default; - $htmleditor-danger-format-active-bg: $base-danger !default; - $htmleditor-success-format-active-bg: $base-success !default; $htmleditor-mention-bg: extcolor.difference(#fff, $base-bg) !default; $htmleditor-mention-color: $base-inverted-text-color !default; } @if $color == "dark" { - $htmleditor-normal-format-active-bg: color.adjust($base-element-bg, $lightness: 10%, $space: hsl) !default; - $htmleditor-default-format-active-bg: color.adjust($base-accent, $lightness: -10%, $space: hsl) !default; - $htmleditor-danger-format-active-bg: color.adjust($base-danger, $lightness: -10%, $space: hsl) !default; - $htmleditor-success-format-active-bg: color.adjust($base-success, $lightness: -10%, $space: hsl) !default; $htmleditor-mention-bg: color.adjust($base-bg, $lightness: 13.5%, $space: hsl) !default; $htmleditor-mention-color: $base-text-color !default; } @if $color == "darkmoon" { - $htmleditor-normal-format-active-bg: color.adjust($base-element-bg, $lightness: 10%, $space: hsl) !default; - $htmleditor-default-format-active-bg: color.adjust($base-accent, $lightness: 10%, $space: hsl) !default; - $htmleditor-danger-format-active-bg: color.adjust($base-danger, $lightness: 10%, $space: hsl) !default; - $htmleditor-success-format-active-bg: color.adjust($base-success, $lightness: 10%, $space: hsl) !default; $htmleditor-mention-bg: color.adjust($base-bg, $lightness: 13.5%, $space: hsl) !default; $htmleditor-mention-color: $base-text-color !default; } @if $color == "darkviolet" { - $htmleditor-normal-format-active-bg: color.adjust($base-element-bg, $lightness: 10%, $space: hsl) !default; - $htmleditor-default-format-active-bg: color.adjust($base-accent, $lightness: 10%, $space: hsl) !default; - $htmleditor-danger-format-active-bg: color.adjust($base-danger, $lightness: 10%, $space: hsl) !default; - $htmleditor-success-format-active-bg: color.adjust($base-success, $lightness: 10%, $space: hsl) !default; $htmleditor-mention-bg: $base-select-bg !default; $htmleditor-mention-color: $base-text-color !default; } @if $color == "greenmist" { - $htmleditor-normal-format-active-bg: color.adjust($base-element-bg, $lightness: 10%, $space: hsl) !default; - $htmleditor-default-format-active-bg: color.adjust($base-accent, $lightness: 10%, $space: hsl) !default; - $htmleditor-danger-format-active-bg: color.adjust($base-danger, $lightness: 10%, $space: hsl) !default; - $htmleditor-success-format-active-bg: color.adjust($base-success, $lightness: 10%, $space: hsl) !default; $htmleditor-mention-bg: $base-accent !default; $htmleditor-mention-color: color.adjust($base-text-color, $lightness: 100%, $space: hsl) !default; } @if $color == "light" { - $htmleditor-normal-format-active-bg: color.adjust($base-element-bg, $lightness: -10%, $space: hsl) !default; - $htmleditor-default-format-active-bg: color.adjust($base-accent, $lightness: -10%, $space: hsl) !default; - $htmleditor-danger-format-active-bg: color.adjust($base-danger, $lightness: -10%, $space: hsl) !default; - $htmleditor-success-format-active-bg: color.adjust($base-success, $lightness: -10%, $space: hsl) !default; $htmleditor-mention-bg: color.adjust($base-bg, $lightness: -13.5%, $space: hsl) !default; $htmleditor-mention-color: $base-text-color !default; } @if $color == "softblue" { - $htmleditor-normal-format-active-bg: color.adjust($base-element-bg, $lightness: -10%, $space: hsl) !default; - $htmleditor-default-format-active-bg: color.adjust($base-accent, $lightness: -10%, $space: hsl) !default; - $htmleditor-danger-format-active-bg: color.adjust($base-danger, $lightness: -10%, $space: hsl) !default; - $htmleditor-success-format-active-bg: color.adjust($base-success, $lightness: -10%, $space: hsl) !default; $htmleditor-mention-bg: color.adjust($base-bg, $lightness: -13.5%, $space: hsl) !default; $htmleditor-mention-color: $base-text-color !default; } diff --git a/packages/devextreme-scss/scss/widgets/generic/scheduler/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/scheduler/_colors.scss index 5d2c62ec5c1b..71c6890c436a 100644 --- a/packages/devextreme-scss/scss/widgets/generic/scheduler/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/generic/scheduler/_colors.scss @@ -71,15 +71,11 @@ $scheduler-workspace-hovered-cell-color: null !default; $scheduler-group-header-color: null !default; $scheduler-header-bg: null !default; $scheduler-alldaypanel-bg: null !default; -$scheduler-tab-selected-bg: null !default; -$scheduler-tab-selected-before-bg: null !default; -$scheduler-tab-focused-border-color: null !default; $scheduler-other-month-cell-opacity: null !default; $scheduler-fill-focused-appointment: null !default; $scheduler-is-shadow-color-for-focused-state: true !default; $scheduler-time-indicator-background-color: null !default; $scheduler-first-month-cell-background-color: null !default; -$scheduler-time-panel-background-color: null !default; $scheduler-tooltip-appointment-text-color: null !default; $scheduler-appointment-overlay-bg: null !default; @@ -115,9 +111,6 @@ $agenda-appointment-text-color: $base-text-color !default; $scheduler-group-header-color: $scheduler-panel-text-color !default; $scheduler-header-bg: color.adjust($base-bg, $lightness: -4%, $space: hsl) !default; $scheduler-alldaypanel-bg: $base-element-bg !default; - $scheduler-tab-selected-bg: $base-bg !default; - $scheduler-tab-selected-before-bg: $scheduler-tab-selected-bg !default; - $scheduler-tab-focused-border-color: $base-accent !default; $scheduler-other-month-cell-opacity: 0.5 !default; $scheduler-fill-focused-appointment: false !default; $scheduler-time-indicator-background-color: rgba(51, 51, 51, 0.04) !default; @@ -150,9 +143,6 @@ $agenda-appointment-text-color: $base-text-color !default; $scheduler-group-header-color: $base-text-color !default; $scheduler-header-bg: $base-bg !default; $scheduler-alldaypanel-bg: $base-bg !default; - $scheduler-tab-selected-bg: $base-inverted-bg !default; - $scheduler-tab-selected-before-bg: transparent !default; - $scheduler-tab-focused-border-color: $base-border-color !default; $scheduler-other-month-cell-opacity: 1 !default; $scheduler-fill-focused-appointment: true !default; $scheduler-time-indicator-background-color: color.change(#3806ff, $alpha: 0.6) !default; @@ -188,9 +178,6 @@ $agenda-appointment-text-color: $base-text-color !default; $scheduler-group-header-color: $scheduler-panel-text-color !default; $scheduler-header-bg: $base-hover-bg !default; $scheduler-alldaypanel-bg: $base-element-bg !default; - $scheduler-tab-selected-bg: $scheduler-workspace-background-color !default; - $scheduler-tab-selected-before-bg: $scheduler-tab-selected-bg !default; - $scheduler-tab-focused-border-color: $base-focus-bg !default; $scheduler-other-month-cell-opacity: 0.5 !default; $scheduler-fill-focused-appointment: false !default; $scheduler-time-indicator-background-color: rgba(222, 222, 222, 0.07) !default; @@ -227,9 +214,6 @@ $agenda-appointment-text-color: $base-text-color !default; $scheduler-group-header-color: $scheduler-panel-text-color !default; $scheduler-header-bg: $base-hover-bg !default; $scheduler-alldaypanel-bg: $base-element-bg !default; - $scheduler-tab-selected-bg: $scheduler-workspace-background-color !default; - $scheduler-tab-selected-before-bg: $scheduler-tab-selected-bg !default; - $scheduler-tab-focused-border-color: $base-accent !default; $scheduler-other-month-cell-opacity: 0.5 !default; $scheduler-fill-focused-appointment: false !default; $scheduler-time-indicator-background-color: rgba(222, 222, 222, 0.07) !default; @@ -264,9 +248,6 @@ $agenda-appointment-text-color: $base-text-color !default; $scheduler-group-header-color: $scheduler-panel-text-color !default; $scheduler-header-bg: $base-hover-bg !default; $scheduler-alldaypanel-bg: $base-element-bg !default; - $scheduler-tab-selected-bg: $scheduler-workspace-background-color !default; - $scheduler-tab-selected-before-bg: $scheduler-tab-selected-bg !default; - $scheduler-tab-focused-border-color: $base-accent !default; $scheduler-other-month-cell-opacity: 0.5 !default; $scheduler-fill-focused-appointment: false !default; $scheduler-time-indicator-background-color: rgba(222, 222, 222, 0.07) !default; @@ -297,14 +278,10 @@ $agenda-appointment-text-color: $base-text-color !default; $scheduler-dd-appointment-hover-text-color: $base-inverted-text-color !default; $scheduler-workspace-month-text-color: color.adjust($base-text-color, $lightness: 38.5%, $space: hsl) !default; $scheduler-dropdown-appointment-date-color: color.adjust($base-text-color, $lightness: 38.5%, $space: hsl) !default; - $scheduler-time-panel-background-color: $scheduler-workspace-background-color !default; $scheduler-workspace-hovered-cell-color: $scheduler-workspace-month-text-color !default; $scheduler-group-header-color: $scheduler-panel-text-color !default; $scheduler-header-bg: $base-hover-bg !default; $scheduler-alldaypanel-bg: $base-element-bg !default; - $scheduler-tab-selected-bg: $scheduler-time-panel-background-color !default; - $scheduler-tab-selected-before-bg: $scheduler-tab-selected-bg !default; - $scheduler-tab-focused-border-color: $base-focus-bg !default; $scheduler-other-month-cell-opacity: 0.5 !default; $scheduler-fill-focused-appointment: false !default; $scheduler-time-indicator-background-color: rgba(51, 51, 51, 0.04) !default; @@ -339,9 +316,6 @@ $agenda-appointment-text-color: $base-text-color !default; $scheduler-workspace-hovered-cell-color: $scheduler-workspace-month-text-color !default; $scheduler-group-header-color: $scheduler-panel-text-color !default; $scheduler-alldaypanel-bg: $base-element-bg !default; - $scheduler-tab-selected-bg: $scheduler-workspace-background-color !default; - $scheduler-tab-selected-before-bg: $scheduler-tab-selected-bg !default; - $scheduler-tab-focused-border-color: $base-focus-bg !default; $scheduler-other-month-cell-opacity: 0.5 !default; $scheduler-fill-focused-appointment: false !default; $scheduler-time-indicator-background-color: rgba(51, 51, 51, 0.04) !default; @@ -376,9 +350,6 @@ $agenda-appointment-text-color: $base-text-color !default; $scheduler-group-header-color: $scheduler-panel-text-color !default; $scheduler-header-bg: $base-hover-bg !default; $scheduler-alldaypanel-bg: $base-element-bg !default; - $scheduler-tab-selected-bg: $scheduler-workspace-background-color !default; - $scheduler-tab-selected-before-bg: $scheduler-tab-selected-bg !default; - $scheduler-tab-focused-border-color: $base-accent !default; $scheduler-other-month-cell-opacity: 0.5 !default; $scheduler-fill-focused-appointment: false !default; $scheduler-time-indicator-background-color: rgba(51, 51, 51, 0.04) !default; diff --git a/packages/devextreme-scss/scss/widgets/generic/scheduler/_sizes.scss b/packages/devextreme-scss/scss/widgets/generic/scheduler/_sizes.scss index cc48e3253c93..cab02338233c 100644 --- a/packages/devextreme-scss/scss/widgets/generic/scheduler/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/generic/scheduler/_sizes.scss @@ -7,15 +7,12 @@ $generic-scheduler-timeline-date-table-cell-height: null !default; $generic-scheduler-header-height: null !default; $generic-scheduler-header-offset: null !default; $generic-scheduler-toolbar-item-offset: null !default; -$generic-scheduler-navigator-height: null !default; -$generic-scheduler-navigation-buttons-padding: null !default; $generic-scheduler-appointment-month-text-size: null !default; $generic-scheduler-workspace-info-text-size: null !default; $generic-scheduler-all-day-title-font-size: null !default; $generic-scheduler-appointment-content-padding: null !default; $generic-scheduler-appointment-recurrence-content-padding: null !default; $generic-scheduler-appointment-recurrence-content-padding-rtl: null !default; -$generic-scheduler-agenda-appointment-font-size: null !default; $generic-scheduler-group-header-table-cell-width: null !default; $generic-scheduler-appointment-transparent-left-border: null !default; $generic-scheduler-appointment-transparent-right-border: null !default; @@ -70,8 +67,6 @@ $generic-scheduler-group-header-agenda-font-size: 14px !default; $generic-scheduler-header-height: 36px !default; $generic-scheduler-header-offset: 9px 10px !default; $generic-scheduler-toolbar-item-offset: 2px !default; - $generic-scheduler-navigator-height: 36px !default; - $generic-scheduler-navigation-buttons-padding: 6px !default; $generic-scheduler-appointment-month-text-size: 13px !default; $generic-scheduler-workspace-info-text-size: 14px !default; @@ -81,7 +76,6 @@ $generic-scheduler-group-header-agenda-font-size: 14px !default; $generic-scheduler-appointment-recurrence-content-padding: 5px 25px 5px 7px !default; $generic-scheduler-appointment-recurrence-content-padding-rtl: 5px 7px 5px 25px !default; - $generic-scheduler-agenda-appointment-font-size: 16px !default; $generic-scheduler-group-header-table-cell-width: 80px !default; $generic-scheduler-appointment-transparent-left-border: 3px solid transparent !default; $generic-scheduler-appointment-transparent-right-border: 2px solid transparent !default; @@ -122,8 +116,6 @@ $generic-scheduler-group-header-agenda-font-size: 14px !default; $generic-scheduler-header-height: 26px !default; $generic-scheduler-header-offset: 6px 7px !default; $generic-scheduler-toolbar-item-offset: 0 !default; - $generic-scheduler-navigator-height: 25px !default; - $generic-scheduler-navigation-buttons-padding: 4px !default; $generic-scheduler-appointment-month-text-size: 11px !default; $generic-scheduler-workspace-info-text-size: 12px !default; @@ -133,7 +125,6 @@ $generic-scheduler-group-header-agenda-font-size: 14px !default; $generic-scheduler-appointment-recurrence-content-padding: 2px 25px 2px 5px !default; $generic-scheduler-appointment-recurrence-content-padding-rtl: 2px 5px 2px 25px !default; - $generic-scheduler-agenda-appointment-font-size: 14px !default; $generic-scheduler-group-header-table-cell-width: 60px !default; $generic-scheduler-appointment-transparent-left-border: 2px solid transparent !default; $generic-scheduler-appointment-transparent-right-border: 1px solid transparent !default; diff --git a/packages/devextreme-scss/scss/widgets/generic/tabPanel/variables/_borders.scss b/packages/devextreme-scss/scss/widgets/generic/tabPanel/variables/_borders.scss index 05f84313f289..89b71d9318f2 100644 --- a/packages/devextreme-scss/scss/widgets/generic/tabPanel/variables/_borders.scss +++ b/packages/devextreme-scss/scss/widgets/generic/tabPanel/variables/_borders.scss @@ -1,42 +1,4 @@ -@use "../../colors" as *; -@use "../variables/sizes" as *; -@use "../../button/colors" as *; @use "../../tabs/variables/sizes" as *; -@use "../../tabs/variables/colors" as *; $generic-tabpanel-tab-border-transparent: $generic-tabs-border-width solid transparent !default; $generic-tabpanel-tab-border-selected-bottom: $generic-tabs-border-width solid !default; - -$generic-tabpanel-tab-border-focused-bottom: null !default; - -@if $color == "carmine" { - $generic-tabpanel-tab-border-focused-bottom: $generic-tabs-border-width solid $tabs-tab-selected-bg !default; -} - -@if $color == "contrast" { - $generic-tabpanel-tab-border-focused-bottom: $generic-tabs-border-width solid !default; -} - -@if $color == "dark" { - $generic-tabpanel-tab-border-focused-bottom: $generic-tabs-border-width solid $tabs-tab-selected-bg !default; -} - -@if $color == "darkmoon" { - $generic-tabpanel-tab-border-focused-bottom: $generic-tabs-border-width solid $tabs-tab-selected-bg !default; -} - -@if $color == "darkviolet" { - $generic-tabpanel-tab-border-focused-bottom: $generic-tabs-border-width solid $tabs-tab-selected-bg !default; -} - -@if $color == "greenmist" { - $generic-tabpanel-tab-border-focused-bottom: $generic-tabs-border-width solid $tabs-tab-selected-bg !default; -} - -@if $color == "light" { - $generic-tabpanel-tab-border-focused-bottom: $generic-tabs-border-width solid $tabs-tab-selected-bg !default; -} - -@if $color == "softblue" { - $generic-tabpanel-tab-border-focused-bottom: $generic-tabs-border-width solid $tabs-tab-selected-bg !default; -} diff --git a/packages/devextreme-scss/scss/widgets/generic/tabs/variables/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/tabs/variables/_colors.scss index 0ea8b9f91231..99b07836830a 100644 --- a/packages/devextreme-scss/scss/widgets/generic/tabs/variables/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/generic/tabs/variables/_colors.scss @@ -51,7 +51,6 @@ $tabs-tab-hover-bg: null !default; $tabs-tab-active-bg: null !default; $tabs-tab-active-border-color: null !default; $tabs-tab-hover-border-color-horizontal: $base-border-color !default; -$tabs-tab-hover-border-color-vertical: null !default; @if $color == "carmine" { $tabs-tab-selected-color: $base-text-color !default; @@ -64,7 +63,6 @@ $tabs-tab-hover-border-color-vertical: null !default; $tabs-tab-hover-bg: $base-hover-bg !default; $tabs-tab-active-bg: color.change(color.adjust($tabs-tab-bg, $lightness: -62.5%, $space: hsl), $alpha: 0.2) !default; $tabs-tab-active-border-color: color.change(color.adjust($base-border-color, $lightness: -2.55%, $space: hsl)) !default; - $tabs-tab-hover-border-color-vertical: color.change(color.adjust($base-accent, $lightness: 33.92%, $space: hsl)) !default; } @if $color == "contrast" { @@ -78,7 +76,6 @@ $tabs-tab-hover-border-color-vertical: null !default; $tabs-focused-disabled-border-color: color.adjust($base-border-color, $lightness: -20%, $space: hsl) !default; $tabs-tab-active-bg: $base-inverted-bg !default; $tabs-tab-active-border-color: $base-border-color !default; - $tabs-tab-hover-border-color-vertical: $tabs-tab-hover-bg !default; } @if $color == "dark" { @@ -92,7 +89,6 @@ $tabs-tab-hover-border-color-vertical: null !default; $tabs-tab-hover-bg: $base-element-bg !default; $tabs-tab-active-bg: color.change(color.adjust($tabs-tab-bg, $lightness: 62.5%, $space: hsl), $alpha: 0.2) !default; $tabs-tab-active-border-color: color.change(color.adjust($tabs-tab-bg, $lightness: 12.55%, $space: hsl)) !default; - $tabs-tab-hover-border-color-vertical: $tabs-tab-hover-bg !default; } @if $color == "darkmoon" { @@ -106,7 +102,6 @@ $tabs-tab-hover-border-color-vertical: null !default; $tabs-tab-hover-bg: $base-element-bg !default; $tabs-tab-active-bg: color.change(color.adjust($tabs-tab-bg, $lightness: 62.5%, $space: hsl), $alpha: 0.2) !default; $tabs-tab-active-border-color: transparent !default; - $tabs-tab-hover-border-color-vertical: $tabs-tab-hover-bg !default; } @if $color == "darkviolet" { @@ -120,7 +115,6 @@ $tabs-tab-hover-border-color-vertical: null !default; $tabs-tab-hover-bg: $base-hover-bg !default; $tabs-tab-active-bg: color.change(color.adjust($tabs-tab-bg, $lightness: 62.5%, $space: hsl), $alpha: 0.2) !default; $tabs-tab-active-border-color: color.change(color.adjust($base-bg, $lightness: 15.49%, $space: hsl)) !default; - $tabs-tab-hover-border-color-vertical: color.change(color.adjust($tabs-tab-bg, $lightness: 16.86%, $space: hsl)) !default; } @if $color == "greenmist" { @@ -134,7 +128,6 @@ $tabs-tab-hover-border-color-vertical: null !default; $tabs-tab-hover-bg: $base-element-bg !default; $tabs-tab-active-bg: color.change(color.adjust($tabs-tab-bg, $lightness: -62.5%, $space: hsl), $alpha: 0.2) !default; $tabs-tab-active-border-color: color.adjust($tabs-tab-bg, $lightness: -12.16%, $space: hsl) !default; - $tabs-tab-hover-border-color-vertical: $tabs-tab-hover-bg !default; } @if $color == "light" { @@ -148,7 +141,6 @@ $tabs-tab-hover-border-color-vertical: null !default; $tabs-tab-hover-bg: $base-element-bg !default; $tabs-tab-active-bg: color.change(color.adjust($tabs-tab-bg, $lightness: -62.5%, $space: hsl), $alpha: 0.2) !default; $tabs-tab-active-border-color: color.adjust($tabs-tab-bg, $lightness: -12.16%, $space: hsl) !default; - $tabs-tab-hover-border-color-vertical: $tabs-tab-hover-bg !default; } @if $color == "softblue" { @@ -162,5 +154,4 @@ $tabs-tab-hover-border-color-vertical: null !default; $tabs-tab-hover-bg: $base-element-bg !default; $tabs-tab-active-bg: color.change(color.adjust($tabs-tab-bg, $lightness: -62.5%, $space: hsl), $alpha: 0.2) !default; $tabs-tab-active-border-color: color.adjust($tabs-tab-bg, $lightness: -12.16%, $space: hsl) !default; - $tabs-tab-hover-border-color-vertical: $tabs-tab-hover-bg !default; } diff --git a/packages/devextreme-scss/scss/widgets/generic/tabs/variables/_sizes.scss b/packages/devextreme-scss/scss/widgets/generic/tabs/variables/_sizes.scss index d79ed889d948..5183306a42b6 100644 --- a/packages/devextreme-scss/scss/widgets/generic/tabs/variables/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/generic/tabs/variables/_sizes.scss @@ -3,7 +3,6 @@ $generic-tabs-item-gap: null !default; $generic-tabs-item-padding: null !default; -$generic-tabs-item-padding-disabled-focused: null !default; $generic-tabs-border-width: $generic-base-border-width !default; $generic-tabs-nav-button-height: 38px !default; @@ -16,7 +15,6 @@ $generic-badge-min-size: null !default; @if $size == "default" { $generic-tabs-item-gap: 4px !default; $generic-tabs-item-padding: 10px 9px !default; - $generic-tabs-item-padding-disabled-focused: 10px !default; $generic-tab-text-line-height: 1.285715 !default; $generic-tabs-icon-margin: 8px !default; $generic-badge-min-size: 18px !default; @@ -25,7 +23,6 @@ $generic-badge-min-size: null !default; @else if $size == "compact" { $generic-tabs-item-gap: 2px !default; $generic-tabs-item-padding: 5px 4px !default; - $generic-tabs-item-padding-disabled-focused: 5px !default; $generic-tab-text-line-height: 1.75 !default; $generic-tabs-icon-margin: 7px !default; $generic-badge-min-size: 21px !default; diff --git a/packages/devextreme-scss/scss/widgets/generic/treeView/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/treeView/_colors.scss index 484d2c98afd0..b69ae56ce488 100644 --- a/packages/devextreme-scss/scss/widgets/generic/treeView/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/generic/treeView/_colors.scss @@ -29,7 +29,6 @@ $treeview-border-color: $base-border-color !default; */ $treeview-item-selected-color: null !default; $treeview-item-selected-bg: null !default; -$treeview-item-selected-hover-bg: null !default; $treeview-item-content-disabled: null !default; /** @@ -48,7 +47,6 @@ $generic-treeview-focused-row-load-indicator-color: #fff !default; $treeview-item-hover-color: $base-hover-color !default; $treeview-item-selected-color: $treeview-color !default; $treeview-item-selected-bg: color.change($base-accent, $alpha: 0.48) !default; - $treeview-item-selected-hover-bg: color.change($base-accent, $alpha: 0.3) !default; $treeview-spin-icon-color: $base-header-color !default; $treeview-item-content-disabled: color.adjust($base-text-color, $lightness: 40%, $space: hsl) !default; } @@ -60,7 +58,6 @@ $generic-treeview-focused-row-load-indicator-color: #fff !default; $treeview-item-hover-color: $base-text-color !default; $treeview-item-selected-color: $base-inverted-text-color !default; $treeview-item-selected-bg: $base-inverted-bg !default; - $treeview-item-selected-hover-bg: $base-inverted-bg !default; $treeview-spin-icon-color: $base-icon-color !default; $treeview-item-content-disabled: color.adjust($base-text-color, $lightness: -48.24%, $space: hsl) !default; } @@ -73,7 +70,6 @@ $generic-treeview-focused-row-load-indicator-color: #fff !default; $treeview-item-hover-color: $base-hover-color !default; $treeview-item-selected-color: $treeview-color !default; $treeview-item-selected-bg: color.change(#fff, $alpha: 0.12) !default; - $treeview-item-selected-hover-bg: color.change(#fff, $alpha: 0.09) !default; $treeview-spin-icon-color: $base-icon-color !default; $treeview-item-content-disabled: color.change($base-text-color, $lightness: 51.8%, $space: hsl) !default; } @@ -86,7 +82,6 @@ $generic-treeview-focused-row-load-indicator-color: #fff !default; $treeview-item-hover-color: $treeview-color !default; $treeview-item-selected-color: $treeview-color !default; $treeview-item-selected-bg: color.change(#748fbc, $alpha: 0.42) !default; - $treeview-item-selected-hover-bg: color.change(#748fbc, $alpha: 0.3) !default; $treeview-spin-icon-color: $base-icon-color !default; $treeview-item-content-disabled: color.adjust($base-text-color, $lightness: -48.24%, $space: hsl) !default; } @@ -99,7 +94,6 @@ $generic-treeview-focused-row-load-indicator-color: #fff !default; $treeview-item-hover-color: $base-hover-color !default; $treeview-item-selected-color: $treeview-color !default; $treeview-item-selected-bg: color.change($base-accent, $alpha: 0.46) !default; - $treeview-item-selected-hover-bg: color.change($base-accent, $alpha: 0.6) !default; $treeview-spin-icon-color: $base-header-color !default; $treeview-item-content-disabled: color.change($base-text-color, $saturation: 0%, $lightness: 51.76%, $space: hsl) !default; } @@ -112,7 +106,6 @@ $generic-treeview-focused-row-load-indicator-color: #fff !default; $treeview-item-hover-color: $base-hover-color !default; $treeview-item-selected-color: $treeview-color !default; $treeview-item-selected-bg: color.change(#000, $alpha: 0.1) !default; - $treeview-item-selected-hover-bg: color.change(#000, $alpha: 0.2) !default; $treeview-spin-icon-color: $base-icon-color !default; $treeview-item-content-disabled: color.change($base-text-color, $saturation: 0%, $lightness: 60%, $space: hsl) !default; } @@ -125,7 +118,6 @@ $generic-treeview-focused-row-load-indicator-color: #fff !default; $treeview-item-hover-color: $treeview-color !default; $treeview-item-selected-color: $treeview-color !default; $treeview-item-selected-bg: color.change(#000, $alpha: 0.1) !default; - $treeview-item-selected-hover-bg: color.change(#000, $alpha: 0.07) !default; $treeview-spin-icon-color: $base-icon-color !default; $treeview-item-content-disabled: color.adjust($base-text-color, $lightness: 40%, $space: hsl) !default; } @@ -138,7 +130,6 @@ $generic-treeview-focused-row-load-indicator-color: #fff !default; $treeview-item-hover-color: $treeview-color !default; $treeview-item-selected-color: $treeview-color !default; $treeview-item-selected-bg: color.change(#000, $alpha: 0.1) !default; - $treeview-item-selected-hover-bg: color.change(#000, $alpha: 0.15) !default; $treeview-spin-icon-color: $base-icon-color !default; $treeview-item-content-disabled: color.adjust($base-text-color, $lightness: 40%, $space: hsl) !default; } diff --git a/packages/devextreme-scss/scss/widgets/generic/treeView/_sizes.scss b/packages/devextreme-scss/scss/widgets/generic/treeView/_sizes.scss index 3fb827a82ddf..aa86eaa7255c 100644 --- a/packages/devextreme-scss/scss/widgets/generic/treeView/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/generic/treeView/_sizes.scss @@ -3,7 +3,6 @@ $generic-treeview-container-with-border-offset: null !default; $generic-treeview-base-container-size: null !default; $generic-treeview-toggle-item-width: null !default; -$generic-treeview-item-height: null !default; $generic-select-all-item-padding: null !default; $generic-treeview-item-padding: null !default; $generic-checkbox-container-size: null !default; @@ -13,7 +12,6 @@ $generic-treeview-item-element-gap: 8px !default; $generic-select-all-item-border-visible-padding: 20px !default; @if $size == "default" { - $generic-treeview-item-height: 32px !default; $generic-treeview-base-container-size: 22px !default; $generic-treeview-container-with-border-offset: 7px !default; $generic-checkbox-container-size: 22px !default; @@ -24,7 +22,6 @@ $generic-select-all-item-border-visible-padding: 20px !default; } @else if $size == "compact" { - $generic-treeview-item-height: 28px !default; $generic-treeview-container-with-border-offset: 6px !default; $generic-treeview-base-container-size: 16px !default; $generic-checkbox-container-size: 16px !default; diff --git a/packages/devextreme-scss/scss/widgets/material/button/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/button/_sizes.scss index 3e96b6f5ce03..88e97b8ff4a4 100644 --- a/packages/devextreme-scss/scss/widgets/material/button/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/material/button/_sizes.scss @@ -2,7 +2,6 @@ $material-button-horizontal-padding: null !default; $material-button-vertical-padding: null !default; -$material-button-icon-padding: null !default; $material-button-icon-text-padding: null !default; $material-button-min-width: null !default; @@ -19,7 +18,6 @@ $material-button-active-box-shadow-size: 0 4px 6px !default; @if $size == "default" { $material-button-horizontal-padding: 16px !default; $material-button-vertical-padding: 6px !default; - $material-button-icon-padding: 8px !default; $material-button-icon-text-padding: 12px !default; $material-button-min-width: 64px !default; } @@ -27,7 +25,6 @@ $material-button-active-box-shadow-size: 0 4px 6px !default; @else if $size == "compact" { $material-button-horizontal-padding: 12px !default; $material-button-vertical-padding: 5px !default; - $material-button-icon-padding: 5px !default; $material-button-icon-text-padding: 8px !default; $material-button-min-width: 48px !default; } diff --git a/packages/devextreme-scss/scss/widgets/material/cardView/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/cardView/_sizes.scss index 4745802c92b4..e67175a11df0 100644 --- a/packages/devextreme-scss/scss/widgets/material/cardView/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/material/cardView/_sizes.scss @@ -278,7 +278,6 @@ $cardview-material-column-chooser__select-all-item-horizontal-padding: null !def $cardview-material-card__header-text-size: 16px !default; $cardview-material-card__header__toolbar-override-height: 52px !default; $cardview-material-card__header__selection-checkbox-padding-right: 12px !default; - $cardview-material-card__header-toolbar-override-height: 52px !default; $cardview-material-card__cover-max-height: 180px !default; $cardview-material-card__cover--noimage__icon-size: 48px !default; $cardview-material-card__content-padding: 12px !default; @@ -328,7 +327,6 @@ $cardview-material-column-chooser__select-all-item-horizontal-padding: null !def $cardview-material-card__header-height: 44px !default; $cardview-material-card__header-text-size: 14px !default; $cardview-material-card__header__selection-checkbox-padding-right: 8px !default; - $cardview-material-card__header-toolbar-override-height: 44px !default; $cardview-material-card__cover-max-height: 140px !default; $cardview-material-card__cover--noimage__icon-size: 32px !default; $cardview-material-card__content-padding: 8px !default; diff --git a/packages/devextreme-scss/scss/widgets/material/fileManager/_colors.scss b/packages/devextreme-scss/scss/widgets/material/fileManager/_colors.scss index ed7f90e27e38..f0a6358c9177 100644 --- a/packages/devextreme-scss/scss/widgets/material/fileManager/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/fileManager/_colors.scss @@ -16,14 +16,11 @@ $filemanager-file-item-hover-bg: $base-hover-bg !default; $filemanager-file-item-focused-border: $base-accent !default; $filemanager-item-focused-color: $base-inverted-text-color !default; $filemanager-dirs-tree-item-focus-bg: null !default; -$filemanager-progressbox-shadow-color: null !default; @if $mode == "light" { $filemanager-dirs-tree-item-focus-bg: color.adjust($base-bg, $lightness: -8%, $space: hsl) !default; - $filemanager-progressbox-shadow-color: color.change($base-shadow-color, $alpha: 0.175) !default; } @if $mode == "dark" { $filemanager-dirs-tree-item-focus-bg: color.adjust($base-bg, $lightness: 8%, $space: hsl) !default; - $filemanager-progressbox-shadow-color: color.change(color.adjust($base-shadow-color, $lightness: -100%, $space: hsl), $alpha: 0.3) !default; } diff --git a/packages/devextreme-scss/scss/widgets/material/gridBase/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/gridBase/_sizes.scss index ba6bdaed40e5..928d14b042ab 100644 --- a/packages/devextreme-scss/scss/widgets/material/gridBase/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/material/gridBase/_sizes.scss @@ -19,7 +19,6 @@ $material-grid-base-treeview-search-margin: 10px !default; $material-grid-base-nodata-font-size: null !default; $material-command-edit-icon-size: null !default; $material-filter-row-between-editor-padding: null !default; -$material-command-column-additional-right-margin: null !default; $material-grid-base-treeview-select-all-item-offset: null !default; $material-grid-base-command-ai-chatsparkleoutline-icon-size: null !default; $material-grid-base-command-ai-text-content-padding: null !default; @@ -55,7 +54,6 @@ $material-grid-base-ai-prompt-editor-progressbar-height: 4px !default; $material-command-edit-icon-size: 18px !default; $material-filter-row-between-editor-padding: 12px !default; - $material-command-column-additional-right-margin: 0 !default; $material-grid-base-treeview-select-all-item-offset: 43px !default; $material-grid-base-command-ai-chatsparkleoutline-icon-size: 24px !default; @@ -86,7 +84,6 @@ $material-grid-base-ai-prompt-editor-progressbar-height: 4px !default; $material-command-edit-icon-size: 16px !default; $material-filter-row-between-editor-padding: 8px !default; - $material-command-column-additional-right-margin: 2px !default; $material-grid-base-treeview-select-all-item-offset: 35px !default; $material-grid-base-command-ai-chatsparkleoutline-icon-size: 18px !default; diff --git a/packages/devextreme-scss/scss/widgets/material/scheduler/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/scheduler/_sizes.scss index ffa4e98b64d7..d8178c42da4d 100644 --- a/packages/devextreme-scss/scss/widgets/material/scheduler/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/material/scheduler/_sizes.scss @@ -4,14 +4,12 @@ $material-scheduler-workspace-date-table-cell-height: null !default; $material-scheduler-toolbar-item-offset: null !default; -$material-scheduler-navigator-height: null !default; $material-scheduler-header-panel-day-font-size: null !default; $material-scheduler-appointment-tooltip-title-font-size: null !default; $material-scheduler-appointment-tooltip-date-font-size: null !default; $material-scheduler-workspace-month-cell-left-offset: null !default; $material-scheduler-header-panel-table-cell-height: null !default; $material-scheduler-appointment-content-padding: null !default; -$material-scheduler-dropdown-appointment-margin-top: null !default; $material-scheduler-dropdown-button-height: null !default; $material-scheduler-dropdown-button-padding: null !default; $material-scheduler-dropdown-button-margin: null !default; @@ -80,7 +78,6 @@ $scheduler-timeline-cell-height: 50px !default; @if $size == "default" { $material-scheduler-workspace-date-table-cell-height: 38px !default; - $material-scheduler-navigator-height: 36px !default; $material-scheduler-header-panel-day-font-size: 30px !default; $material-scheduler-header-height: 54px !default; $material-scheduler-header-offset: 2px 16px !default; @@ -92,7 +89,6 @@ $scheduler-timeline-cell-height: 50px !default; $material-scheduler-header-panel-table-cell-height: 56px !default; $material-scheduler-appointment-content-padding: 5px 7px !default; - $material-scheduler-dropdown-appointment-margin-top: 7px !default; $material-scheduler-dropdown-button-height: 22px !default; $material-scheduler-dropdown-button-padding: 4px !default; $material-scheduler-dropdown-button-margin: 5px 1px 3px 3px !default; @@ -128,7 +124,6 @@ $scheduler-timeline-cell-height: 50px !default; @else if $size == "compact" { $material-scheduler-workspace-date-table-cell-height: 28px !default; - $material-scheduler-navigator-height: 28px !default; $material-scheduler-header-panel-day-font-size: 20px !default; $material-scheduler-header-height: 38px !default; $material-scheduler-header-offset: 0 8px !default; @@ -140,7 +135,6 @@ $scheduler-timeline-cell-height: 50px !default; $material-scheduler-header-panel-table-cell-height: 40px !default; $material-scheduler-appointment-content-padding: 2px 4px !default; - $material-scheduler-dropdown-appointment-margin-top: 3px !default; $material-scheduler-dropdown-button-height: 18px !default; $material-scheduler-dropdown-button-padding: 2px !default; $material-scheduler-dropdown-button-margin: 2px 1px 2px 2px !default; diff --git a/packages/devextreme-scss/scss/widgets/material/slider/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/slider/_sizes.scss index 6a7fa38a0fdd..9b1763a9f246 100644 --- a/packages/devextreme-scss/scss/widgets/material/slider/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/material/slider/_sizes.scss @@ -3,7 +3,6 @@ $material-slider-handle-size: null !default; $material-slider-wrapper-height: null !default; $material-slider-tooltip-width: null !default; -$material-slider-top-tooltip-margin: null !default; $material-slider-tooltip-popup-content-padding: null !default; $material-slider-track-height: 2px !default; @@ -13,7 +12,6 @@ $material-slider-height: 28px !default; $material-slider-handle-size: 32px !default; $material-slider-wrapper-height: 32px !default; $material-slider-tooltip-width: 34px !default; - $material-slider-top-tooltip-margin: -5px !default; $material-slider-tooltip-popup-content-padding: 5px 7px !default; } @@ -21,6 +19,5 @@ $material-slider-height: 28px !default; $material-slider-handle-size: 26px !default; $material-slider-wrapper-height: 26px !default; $material-slider-tooltip-width: 28px !default; - $material-slider-top-tooltip-margin: -2px !default; $material-slider-tooltip-popup-content-padding: 3px 5px !default; } diff --git a/packages/devextreme-scss/scss/widgets/material/speedDialAction/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/speedDialAction/_sizes.scss index 1cda46827d86..ffdd306ceace 100644 --- a/packages/devextreme-scss/scss/widgets/material/speedDialAction/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/material/speedDialAction/_sizes.scss @@ -3,16 +3,12 @@ $material-main-fa-button-label-padding: null !default; $material-main-fa-button-size: null !default; -$material-fa-button-label-font-size: null !default; - @if $size == "default" { $material-main-fa-button-size: 56px !default; $material-main-fa-button-label-padding: 0 24px 0 8px !default; - $material-fa-button-label-font-size: 14px !default; } @else if $size == "compact" { $material-main-fa-button-size: 42px !default; $material-main-fa-button-label-padding: 0 20px 0 8px !default; - $material-fa-button-label-font-size: 12px !default; } diff --git a/packages/devextreme-scss/scss/widgets/material/tagBox/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/tagBox/_sizes.scss index f2fb1d93318c..0a55098aa46e 100644 --- a/packages/devextreme-scss/scss/widgets/material/tagBox/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/material/tagBox/_sizes.scss @@ -4,7 +4,6 @@ $material-tagbox-tag-content-padding-left: null !default; $material-tagbox-tag-content-padding-right: null !default; $material-tagbox-tag-content-vertical-padding: null !default; $material-tagbox-tag-content-font-size: null !default; -$material-tagbox-tag-container-padding: null !default; $material-tagbox-tag-container-padding-left: null !default; $material-tagbox-tag-container-vertical-padding: null !default; $material-tagbox-tag-height: null !default; @@ -22,7 +21,6 @@ $material-tagbox-filled-with-label-bottom-padding: 4px !default; $material-tagbox-tag-content-padding-right: 30px !default; $material-tagbox-tag-content-vertical-padding: 4px !default; $material-tagbox-tag-content-font-size: 14px !default; - $material-tagbox-tag-container-padding: 0 12px 11px 16px !default; $material-tagbox-tag-container-padding-left: 16px !default; $material-tagbox-tag-container-vertical-padding: 11px !default; $material-tagbox-tag-height: 26px !default; @@ -36,7 +34,6 @@ $material-tagbox-filled-with-label-bottom-padding: 4px !default; $material-tagbox-tag-content-padding-right: 20px !default; $material-tagbox-tag-content-vertical-padding: 2px !default; $material-tagbox-tag-content-font-size: 12px !default; - $material-tagbox-tag-container-padding: 0 8px 3px 11px !default; $material-tagbox-tag-container-padding-left: 12px !default; $material-tagbox-tag-container-vertical-padding: 7px !default; $material-tagbox-tag-height: 18px !default; diff --git a/packages/devextreme-scss/scss/widgets/material/treeView/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/treeView/_sizes.scss index 833a5ba82d53..b1bdbb525bb6 100644 --- a/packages/devextreme-scss/scss/widgets/material/treeView/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/material/treeView/_sizes.scss @@ -4,7 +4,6 @@ $material-treeview-toggle-item-width: null !default; $material-treeview-checkbox-offset: null !default; $material-treeview-item-padding: null !default; $material-select-all-item-padding: null !default; -$material-treeview-item-height: null !default; $material-checkbox-container-size: null !default; $material-treeview-load-indicator-size: null !default; @@ -28,7 +27,6 @@ $material-treeview-container-padding: $material-select-all-item-padding: 15px $material-treeview-checkbox-offset !default; $material-checkbox-container-size: 24px !default; $material-treeview-item-padding: 12px $material-treeview-item-side-padding !default; - $material-treeview-item-height: 48px !default; $material-treeview-load-indicator-size: 24px !default; $material-treeview-searchbox-margin-bottom: 8px !default; $material-treeview-search-editor-height: 48px !default; @@ -39,7 +37,6 @@ $material-treeview-container-padding: $material-treeview-checkbox-offset: 47px !default; $material-select-all-item-padding: 10px $material-treeview-checkbox-offset !default; $material-treeview-item-padding: 9px $material-treeview-item-side-padding !default; - $material-treeview-item-height: 36px !default; $material-treeview-load-indicator-size: 18px !default; $material-checkbox-container-size: 18px !default; $material-treeview-searchbox-margin-bottom: 4px !default; diff --git a/packages/devextreme-scss/scss/widgets/material/validation/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/validation/_sizes.scss index ba97716f3337..5fec857c6d92 100644 --- a/packages/devextreme-scss/scss/widgets/material/validation/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/material/validation/_sizes.scss @@ -1,6 +1,5 @@ @use "../sizes" as *; -$material-validation-message-padding: null !default; $material-validationsummary-item-margin: null !default; $material-validation-message-line-height: null !default; @@ -10,7 +9,6 @@ $material-validation-overlay-border-radius: 4px !default; $material-validation-message-font-size: 12px !default; @if $size == "default" { - $material-validation-message-padding: 6px !default; $material-validationsummary-item-margin: 10px !default; $material-validation-message-horizontal-padding: 8px !default; @@ -18,7 +16,6 @@ $material-validation-message-font-size: 12px !default; } @else if $size == "compact" { - $material-validation-message-padding: 4px !default; $material-validationsummary-item-margin: 6px !default; $material-validation-message-horizontal-padding: 6px !default; From 06475ffdbaade5dce0f2faf2f3cc619bd01dc835 Mon Sep 17 00:00:00 2001 From: EugeniyKiyashko Date: Fri, 4 Sep 2026 11:38:41 +0400 Subject: [PATCH 8/8] Styles: anchor the variable scan so a stray $ is skipped instead of claiming the next variable --- packages/devextreme-scss/tests/unused-elements.test.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/devextreme-scss/tests/unused-elements.test.ts b/packages/devextreme-scss/tests/unused-elements.test.ts index 6cf8755e0855..52180125fabf 100644 --- a/packages/devextreme-scss/tests/unused-elements.test.ts +++ b/packages/devextreme-scss/tests/unused-elements.test.ts @@ -47,7 +47,7 @@ const removeAllCommentsFromContent = (content: string): string => content .filter((_, index) => index % 2 === 0) .join(''); -const variableRegex = new RegExp(`\\$[${VAR_NAME_CHARS}]+`, 'g'); +const variableRegex = new RegExp(`\\$[${VAR_NAME_CHARS}]+`, 'y'); type VariableUsage = { declared: Set; read: Set }; @@ -61,7 +61,11 @@ const collectVariableUsage = (filePath: string, usage: VariableUsage): void => { if (char === ')') depth -= 1; if (char === '$') { variableRegex.lastIndex = index; - const [variable] = variableRegex.exec(content) ?? ['']; + const [variable] = variableRegex.exec(content) ?? []; + if (!variable) { + index += 1; + continue; + } const assigned = /^\s*:/.test(content.slice(index + variable.length)); if (assigned && depth === 0) usage.declared.add(variable); if (!assigned) usage.read.add(variable);